@hhgtech/hhg-components 1.29.134 → 1.29.136

package/build/vaccination.js

@@ -2,40 +2,39 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-6cf152d6.js');
+var tslib_es6 = require('./tslib.es6-e3715db4.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$2 = require('./index-3e801e33.js');
+var index$3 = require('./index-53b1d680.js');
 require('@mantine/dates');
-require('./index-920ebbb7.js');
-var index$4 = require('./index-291e6f28.js');
-require('./index-e6bdfb93.js');
-require('./useMantineLocale-d59fa63b.js');
-var index$1 = require('./index-7f563129.js');
-var index = require('./index-a0a2321b.js');
+require('./index-58ef4c66.js');
+var index$5 = require('./index-c9911c65.js');
+require('./index-a4cdd0ad.js');
+require('./useMantineLocale-ceb23b28.js');
+var index$2 = require('./index-f301a143.js');
+var index$1 = require('./index-91f5fadb.js');
 var miscTheme = require('./miscTheme.js');
-var index_styles = require('./index.styles-b57afab1.js');
-var useTranslations = require('./useTranslations-928d4ace.js');
+var index_styles = require('./index.styles-d4cfe368.js');
+var index = require('./index-1358bae0.js');
 var hooks = require('@mantine/hooks');
-require('./other-427e38dc.js');
-require('./index-41f6c400.js');
+require('./other-2ce2695a.js');
+require('./index-3fa5e9f1.js');
 var styled = require('@emotion/styled');
-var utils = require('./utils-54857ab8.js');
-var index$3 = require('./index-04139501.js');
-require('./translationsContext-e1cd3ed4.js');
-require('string-format');
+var utils = require('./utils-ee304330.js');
+var index$4 = require('./index-70f828bd.js');
+require('./translationsContext-014418fe.js');
 var other = require('@hhgtech/icons/other');
-var index$5 = require('./index-e8251765.js');
+var index$6 = require('./index-447aa18b.js');
 var form = require('@mantine/form');
 var dayjs = require('dayjs');
 var customParseFormat = require('dayjs/plugin/customParseFormat');
-var index$7 = require('./index-d919834a.js');
-var index$6 = require('./index-418c000b.js');
+var index$8 = require('./index-bdadc7a8.js');
+var index$7 = require('./index-84798e33.js');
 require('@mantine/carousel');
-require('./Locale-409f6e0e.js');
-require('./index-8244f19c.js');
+require('./Locale-4d114b4b.js');
+require('./index-4391671f.js');
 require('classnames');
-require('./useUniqueId-f1ce19f5.js');
+require('./useUniqueId-7b676392.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
 require('date-fns/locale');
@@ -114,12 +113,12 @@ const StyledInformationWrapper = styled__default["default"].div `
 
 const _Immunization = (_a) => {
     var { vaccineDetail, isCurrent } = _a, rest = tslib_es6.__rest(_a, ["vaccineDetail", "isCurrent"]);
-    const { t } = useTranslations.useTranslations();
+    const { t } = index.useTranslations();
     const { name, antigen, optional } = vaccineDetail;
     return (React__default["default"].createElement(StyledVaccineCard, Object.assign({}, rest, { "data-template": "modal", "data-status": isCurrent ? 'next' : status }),
         React__default["default"].createElement(core.Stack, { spacing: 12 },
             React__default["default"].createElement(core.Stack, { spacing: 4 },
-                React__default["default"].createElement(index.Button, { variant: "ghost", styles: {
+                React__default["default"].createElement(index$1.Button, { variant: "ghost", styles: {
                         root: {
                             padding: 0,
                             height: 'initial',
@@ -132,27 +131,27 @@ const _Immunization = (_a) => {
                             justifyContent: 'left',
                         },
                     } },
-                    React__default["default"].createElement(index$1.Text, { size: "s3", color: miscTheme.theme.colors.gray800, weight: "semiBold" }, name)),
+                    React__default["default"].createElement(index$2.Text, { size: "s3", color: miscTheme.theme.colors.gray800, weight: "semiBold" }, name)),
                 React__default["default"].createElement(core.Flex, { gap: 4, align: 'center' },
-                    antigen && (React__default["default"].createElement(index$1.Text, { size: "n1", color: index$2.themeColors.gray[6] },
+                    antigen && (React__default["default"].createElement(index$2.Text, { size: "n1", color: index$3.themeColors.gray[6] },
                         t('babyVaccine.timeline.antigen'),
                         "\u00A0",
-                        React__default["default"].createElement(index$1.Text, { size: "s5", weight: "semiBold", as: "span" }, antigen))),
+                        React__default["default"].createElement(index$2.Text, { size: "s5", weight: "semiBold", as: "span" }, antigen))),
                     React__default["default"].createElement(core.Badge, { px: 8, py: 1, radius: 'xl', sx: {
                             height: 'initial',
                             border: `1px solid ${optional ? miscTheme.theme.colors.neutral100 : 'transparent'}`,
                         }, bg: optional ? miscTheme.theme.colors.white : miscTheme.theme.colors.red50 },
-                        React__default["default"].createElement(index$1.Text, { size: "n1", color: optional ? miscTheme.theme.colors.gray800 : miscTheme.theme.colors.red800, tt: 'capitalize' }, optional
+                        React__default["default"].createElement(index$2.Text, { size: "n1", color: optional ? miscTheme.theme.colors.gray800 : miscTheme.theme.colors.red800, tt: 'capitalize' }, optional
                             ? t('babyVaccine.vaccineInfo.optional')
                             : t('babyVaccine.vaccineInfo.mandatory'))))))));
 };
 
 const _VaccineStatus = ({ checked, onToggle: _onToggle, }) => {
-    const { t } = useTranslations.useTranslations();
+    const { t } = index.useTranslations();
     const onToggle = (event) => {
         _onToggle === null || _onToggle === void 0 ? void 0 : _onToggle(event.currentTarget.checked);
     };
-    return (React__default["default"].createElement(index$3.Switch, { checked: checked, onChange: onToggle, label: t('babyVaccine.vaccineCard.injected'), size: "xs", color: 'green.6', styles: {
+    return (React__default["default"].createElement(index$4.Switch, { checked: checked, onChange: onToggle, label: t('babyVaccine.vaccineCard.injected'), size: "xs", color: 'green.6', styles: {
             root: {
                 '*': {
                     cursor: 'pointer',
@@ -181,29 +180,29 @@ const _CardIcon = ({ status, isCurrent }) => {
 
 const MAPPED_STATUS = {
     vaccinated: {
-        backgroundColor: index$2.themeColors.green[0],
-        borderColor: index$2.themeColors.green[2],
-        color: index$2.themeColors.green[7],
+        backgroundColor: index$3.themeColors.green[0],
+        borderColor: index$3.themeColors.green[2],
+        color: index$3.themeColors.green[7],
     },
     missed: {
-        backgroundColor: index$2.themeColors.yellow[0],
-        borderColor: index$2.themeColors.yellow[2],
-        color: index$2.themeColors.yellow[9],
+        backgroundColor: index$3.themeColors.yellow[0],
+        borderColor: index$3.themeColors.yellow[2],
+        color: index$3.themeColors.yellow[9],
     },
     upcoming: {
-        backgroundColor: index$2.themeColors.neutral[0],
-        borderColor: index$2.themeColors.neutral[1],
-        color: index$2.themeColors.gray[8],
+        backgroundColor: index$3.themeColors.neutral[0],
+        borderColor: index$3.themeColors.neutral[1],
+        color: index$3.themeColors.gray[8],
     },
     next: {
-        backgroundColor: index$2.themeColors.blue[0],
+        backgroundColor: index$3.themeColors.blue[0],
         borderColor: 'transparent',
-        color: index$2.themeColors.blue[6],
+        color: index$3.themeColors.blue[6],
     },
     all: {
-        backgroundColor: index$2.themeColors.blue[0],
+        backgroundColor: index$3.themeColors.blue[0],
         borderColor: 'transparent',
-        color: index$2.themeColors.blue[6],
+        color: index$3.themeColors.blue[6],
     },
 };
 function formatBabyVaccinationDetail(data) {
@@ -310,14 +309,14 @@ const generateTimeLineName = (timeline, t) => {
 const _Badge = (_a) => {
     var _b;
     var { status, sx, content = '' } = _a, rest = tslib_es6.__rest(_a, ["status", "sx", "content"]);
-    return (React__default["default"].createElement(core.Badge, Object.assign({ leftSection: status !== 'all' && (React__default["default"].createElement(index$2.AspectRatio, { ratio: 1, w: 18 },
-            React__default["default"].createElement(_CardIcon, { status: status }))), px: 8, py: 3, radius: 4, sx: Object.assign(Object.assign({ height: 'initial', backgroundColor: index$2.themeColors.blue[0], borderColor: index$2.themeColors.blue[2], color: index$2.themeColors.blue[7] }, MAPPED_STATUS[status]), sx) }, rest),
-        React__default["default"].createElement(index$1.Text, { size: "n1", span: true, tt: 'capitalize', color: String((_b = MAPPED_STATUS[status]) === null || _b === void 0 ? void 0 : _b.color) }, content || status)));
+    return (React__default["default"].createElement(core.Badge, Object.assign({ leftSection: status !== 'all' && (React__default["default"].createElement(index$3.AspectRatio, { ratio: 1, w: 18 },
+            React__default["default"].createElement(_CardIcon, { status: status }))), px: 8, py: 3, radius: 4, sx: Object.assign(Object.assign({ height: 'initial', backgroundColor: index$3.themeColors.blue[0], borderColor: index$3.themeColors.blue[2], color: index$3.themeColors.blue[7] }, MAPPED_STATUS[status]), sx) }, rest),
+        React__default["default"].createElement(index$2.Text, { size: "n1", span: true, tt: 'capitalize', color: String((_b = MAPPED_STATUS[status]) === null || _b === void 0 ? void 0 : _b.color) }, content || status)));
 };
 
 const _Modal = (_a) => {
     var { vaccineRecord, isCurrent, onToggle, showTopDetail = true } = _a, rest = tslib_es6.__rest(_a, ["vaccineRecord", "isCurrent", "onToggle", "showTopDetail"]);
-    const { t } = useTranslations.useTranslations();
+    const { t } = index.useTranslations();
     const { status, vaccineOptional, vaccineName, doseNumber, totalDoses, vaccineAntigen, } = vaccineRecord;
     return (React__default["default"].createElement(StyledVaccineCard, Object.assign({}, rest, { "data-template": "modal", "data-status": isCurrent ? 'next' : status }),
         React__default["default"].createElement(core.Stack, { spacing: 12 },
@@ -325,7 +324,7 @@ const _Modal = (_a) => {
                 React__default["default"].createElement(_Badge, { status: status, content: t(`babyVaccine.status.${status}`) }),
                 React__default["default"].createElement(_VaccineStatus, { checked: status === 'vaccinated', onToggle: (status) => onToggle(status, vaccineRecord) }))),
             React__default["default"].createElement(core.Stack, { spacing: 4 },
-                React__default["default"].createElement(index.Button, { variant: "ghost", styles: {
+                React__default["default"].createElement(index$1.Button, { variant: "ghost", styles: {
                         root: {
                             padding: 0,
                             height: 'initial',
@@ -338,20 +337,20 @@ const _Modal = (_a) => {
                             justifyContent: 'left',
                         },
                     } },
-                    React__default["default"].createElement(index$1.Text, { size: "s3", color: miscTheme.theme.colors.gray800, weight: "semiBold" }, vaccineName)),
+                    React__default["default"].createElement(index$2.Text, { size: "s3", color: miscTheme.theme.colors.gray800, weight: "semiBold" }, vaccineName)),
                 React__default["default"].createElement(core.Flex, { gap: 4, align: 'center' },
-                    vaccineAntigen && (React__default["default"].createElement(index$1.Text, { size: "n1", color: index$2.themeColors.gray[6] },
+                    vaccineAntigen && (React__default["default"].createElement(index$2.Text, { size: "n1", color: index$3.themeColors.gray[6] },
                         t('babyVaccine.timeline.antigen'),
                         "\u00A0",
-                        React__default["default"].createElement(index$1.Text, { size: "s5", weight: "semiBold", as: "span" }, vaccineAntigen))),
+                        React__default["default"].createElement(index$2.Text, { size: "s5", weight: "semiBold", as: "span" }, vaccineAntigen))),
                     React__default["default"].createElement(core.Badge, { px: 8, py: 1, radius: 'xl', sx: {
                             height: 'initial',
                             border: `1px solid ${vaccineOptional ? miscTheme.theme.colors.neutral100 : 'transparent'}`,
                         }, bg: vaccineOptional ? miscTheme.theme.colors.white : miscTheme.theme.colors.red50 },
-                        React__default["default"].createElement(index$1.Text, { size: "n1", color: vaccineOptional ? miscTheme.theme.colors.gray800 : miscTheme.theme.colors.red800, tt: 'capitalize' }, vaccineOptional
+                        React__default["default"].createElement(index$2.Text, { size: "n1", color: vaccineOptional ? miscTheme.theme.colors.gray800 : miscTheme.theme.colors.red800, tt: 'capitalize' }, vaccineOptional
                             ? t('babyVaccine.vaccineInfo.optional')
                             : t('babyVaccine.vaccineInfo.mandatory')))),
-                React__default["default"].createElement(index$1.Text, { size: "n1", color: miscTheme.theme.colors.gray600 },
+                React__default["default"].createElement(index$2.Text, { size: "n1", color: miscTheme.theme.colors.gray600 },
                     React__default["default"].createElement("span", { dangerouslySetInnerHTML: {
                             __html: t('babyVaccine.vaccineInfo.dose', {
                                 ordinal: `<b>${doseNumber}</b>`,
@@ -362,7 +361,7 @@ const _Modal = (_a) => {
 
 const _Timeline = (_a) => {
     var { vaccineRecord, onToggle, onTitleClick } = _a, rest = tslib_es6.__rest(_a, ["vaccineRecord", "onToggle", "onTitleClick"]);
-    const { t } = useTranslations.useTranslations();
+    const { t } = index.useTranslations();
     const { status, vaccineOptional, vaccineName, doseNumber, totalDoses, givenOn, vaccineAntigen, } = vaccineRecord;
     return (React__default["default"].createElement(StyledVaccineCard, Object.assign({}, rest, { "data-status": status }),
         React__default["default"].createElement(core.Stack, { spacing: 12 },
@@ -371,21 +370,21 @@ const _Timeline = (_a) => {
                 React__default["default"].createElement(_VaccineStatus, { checked: status === 'vaccinated', onToggle: (status) => onToggle(status, vaccineRecord) })),
             React__default["default"].createElement(core.Stack, { spacing: 4 },
                 React__default["default"].createElement("div", { onClick: () => onTitleClick(vaccineRecord) },
-                    React__default["default"].createElement(index$1.Text, { size: "s3", color: miscTheme.theme.colors.gray800, weight: "semiBold", sx: { cursor: 'pointer' } }, vaccineName)),
+                    React__default["default"].createElement(index$2.Text, { size: "s3", color: miscTheme.theme.colors.gray800, weight: "semiBold", sx: { cursor: 'pointer' } }, vaccineName)),
                 React__default["default"].createElement(core.Flex, { gap: 4, align: 'center' },
-                    vaccineAntigen && (React__default["default"].createElement(index$1.Text, { size: "n1", color: index$2.themeColors.gray[6] },
+                    vaccineAntigen && (React__default["default"].createElement(index$2.Text, { size: "n1", color: index$3.themeColors.gray[6] },
                         t('babyVaccine.timeline.antigen'),
                         "\u00A0",
-                        React__default["default"].createElement(index$1.Text, { size: "s5", weight: "semiBold", as: "span" }, vaccineAntigen))),
+                        React__default["default"].createElement(index$2.Text, { size: "s5", weight: "semiBold", as: "span" }, vaccineAntigen))),
                     React__default["default"].createElement(core.Badge, { px: 8, py: 1, radius: 'xl', sx: {
                             height: 'initial',
                             border: `1px solid ${vaccineOptional ? miscTheme.theme.colors.neutral100 : 'transparent'}`,
                         }, bg: vaccineOptional ? miscTheme.theme.colors.white : miscTheme.theme.colors.red50 },
-                        React__default["default"].createElement(index$1.Text, { size: "n1", color: vaccineOptional ? miscTheme.theme.colors.gray800 : miscTheme.theme.colors.red800, tt: 'capitalize' }, vaccineOptional
+                        React__default["default"].createElement(index$2.Text, { size: "n1", color: vaccineOptional ? miscTheme.theme.colors.gray800 : miscTheme.theme.colors.red800, tt: 'capitalize' }, vaccineOptional
                             ? t('babyVaccine.vaccineInfo.optional')
                             : t('babyVaccine.vaccineInfo.mandatory')))),
                 React__default["default"].createElement(StyledInformationWrapper, null,
-                    React__default["default"].createElement(index$1.Text, { size: "n1", color: miscTheme.theme.colors.gray600 },
+                    React__default["default"].createElement(index$2.Text, { size: "n1", color: miscTheme.theme.colors.gray600 },
                         React__default["default"].createElement("span", { dangerouslySetInnerHTML: {
                                 __html: t('babyVaccine.vaccineInfo.dose', {
                                     ordinal: `<b>${doseNumber}</b>`,
@@ -393,7 +392,7 @@ const _Timeline = (_a) => {
                                 }),
                             } })),
                     React__default["default"].createElement("span", { className: "dot" }),
-                    React__default["default"].createElement(index$1.Text, { size: "n1", color: miscTheme.theme.colors.gray600 }, status === 'vaccinated'
+                    React__default["default"].createElement(index$2.Text, { size: "n1", color: miscTheme.theme.colors.gray600 }, status === 'vaccinated'
                         ? t('babyVaccine.vaccineInfo.injectedDate', {
                             date: givenOn,
                         })
@@ -466,7 +465,7 @@ const _Record = (_a) => {
 const _ScheduleTimeline = (_a) => {
     var _b, _c;
     var { timeline, onToggle, onTitleClick, isCurrent: _isCurrent = false } = _a, rest = tslib_es6.__rest(_a, ["timeline", "onToggle", "onTitleClick", "isCurrent"]);
-    const { t } = useTranslations.useTranslations();
+    const { t } = index.useTranslations();
     const { isMobile } = index_styles.useScreenSize();
     const isCurrent = React.useMemo(() => {
         var _a;
@@ -478,7 +477,7 @@ const _ScheduleTimeline = (_a) => {
     return (React__default["default"].createElement("div", Object.assign({}, rest),
         React__default["default"].createElement(core.Grid, { key: timeline.id, gutter: 16, py: 16 },
             React__default["default"].createElement(core.Grid.Col, { span: "content" },
-                React__default["default"].createElement(index$1.Text, { size: "s4", color: isCurrent ? miscTheme.theme.colors.primaryBase : miscTheme.theme.colors.gray800, weight: "semiBold", sx: {
+                React__default["default"].createElement(index$2.Text, { size: "s4", color: isCurrent ? miscTheme.theme.colors.primaryBase : miscTheme.theme.colors.gray800, weight: "semiBold", sx: {
                         height: 42,
                         width: 100,
                         display: 'flex',
@@ -491,7 +490,7 @@ const _ScheduleTimeline = (_a) => {
                 React__default["default"].createElement(StyledCurrentLineWrapper, { "data-is-current": isCurrent },
                     React__default["default"].createElement("span", { className: "dot" }),
                     React__default["default"].createElement("div", { className: "line" }),
-                    React__default["default"].createElement(index$1.Text, { size: "n1", ml: 16 },
+                    React__default["default"].createElement(index$2.Text, { size: "n1", ml: 16 },
                         React__default["default"].createElement("span", { dangerouslySetInnerHTML: {
                                 __html: t('babyVaccine.timeline.total', {
                                     number: `<b>${(_c = timeline === null || timeline === void 0 ? void 0 : timeline.records) === null || _c === void 0 ? void 0 : _c.length}</b>`,
@@ -532,18 +531,18 @@ const StyledTimelineBanner = styled__default["default"].div `
 
 const TimelineBanner = (_a) => {
     var { content, url, icon, gender, name } = _a, rest = tslib_es6.__rest(_a, ["content", "url", "icon", "gender", "name"]);
-    const { t } = useTranslations.useTranslations();
+    const { t } = index.useTranslations();
     const { isMobile } = index_styles.useScreenSize();
     return (React__default["default"].createElement(StyledTimelineBanner
     // data-theme={siteType}
     , Object.assign({ "data-gender": gender }, rest),
         React__default["default"].createElement(core.Stack, { spacing: 8 },
-            React__default["default"].createElement(index$1.Text, { size: "p3", color: miscTheme.theme.colors.gray800 }, content.replace(/{babyName}/g, name)),
+            React__default["default"].createElement(index$2.Text, { size: "p3", color: miscTheme.theme.colors.gray800 }, content.replace(/{babyName}/g, name)),
             url && (React__default["default"].createElement("a", { className: "read-more", href: url, target: "_blank", rel: "noreferrer" },
                 React__default["default"].createElement(core.Flex, { align: 'center', gap: 6 },
-                    React__default["default"].createElement(index$1.Text, { size: "s4", color: miscTheme.theme.colors.primaryBase, weight: "semiBold" }, t('articlePage.readMore')),
+                    React__default["default"].createElement(index$2.Text, { size: "s4", color: miscTheme.theme.colors.primaryBase, weight: "semiBold" }, t('articlePage.readMore')),
                     React__default["default"].createElement(other.ArrowRight, { size: 20, color: miscTheme.theme.colors.primaryBase }))))),
-        icon && (React__default["default"].createElement(index$2.AspectRatio, { ratio: 1, w: isMobile ? 56 : 80, sx: {
+        icon && (React__default["default"].createElement(index$3.AspectRatio, { ratio: 1, w: isMobile ? 56 : 80, sx: {
                 flexShrink: 0,
             } },
             React__default["default"].createElement("img", { alt: "health-tool-icon", src: icon, style: { objectFit: 'contain' }, loading: "lazy" })))));
@@ -584,7 +583,7 @@ const RecordsByAgeGroup = (_a) => {
     //   }
     //   return null
     // }
-    var { schedules, age, onToggle, onTitleClick, gender = index$4.Gender.Boy, hideBanner = false, name } = _a, rest = tslib_es6.__rest(_a, ["schedules", "age", "onToggle", "onTitleClick", "gender", "hideBanner", "name"]);
+    var { schedules, age, onToggle, onTitleClick, gender = index$5.Gender.Boy, hideBanner = false, name } = _a, rest = tslib_es6.__rest(_a, ["schedules", "age", "onToggle", "onTitleClick", "gender", "hideBanner", "name"]);
     // const currentIndex = useMemo(() => {
     //   let idx = schedules[0].id
     //   schedules.some((schedule, scheduleIndex) =>
@@ -608,7 +607,7 @@ const RecordsByAgeGroup = (_a) => {
     return (React__default["default"].createElement("div", Object.assign({}, rest), schedules.map((schedule, index) => {
         var _a;
         return (React__default["default"].createElement(React__default["default"].Fragment, null, ((_a = schedule.timelines) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React__default["default"].createElement("div", { key: schedule.id },
-            schedule.title && !shouldHideBanner[index] && (React__default["default"].createElement(TimelineBanner, { content: schedule.title, gender: gender, icon: gender === index$4.Gender.Boy ? schedule.iconBoy : schedule.iconGirl, url: schedule.readMoreUrl, name: name })),
+            schedule.title && !shouldHideBanner[index] && (React__default["default"].createElement(TimelineBanner, { content: schedule.title, gender: gender, icon: gender === index$5.Gender.Boy ? schedule.iconBoy : schedule.iconGirl, url: schedule.readMoreUrl, name: name })),
             schedule.timelines.map((timeline) => (React__default["default"].createElement(_ScheduleTimeline, { key: timeline.id, timeline: timeline, onTitleClick: onTitleClick, onToggle: onToggle, isCurrent: getIsCurrent(timeline) })))))));
     })));
 };
@@ -618,8 +617,8 @@ const noop = () => { };
 
 const _ConfirmModal = (_a) => {
     var { onSubmit, date } = _a, rest = tslib_es6.__rest(_a, ["onSubmit", "date"]);
-    const { t } = useTranslations.useTranslations();
-    return (React__default["default"].createElement(index$5.Modal, Object.assign({ withinPortal: true, zIndex: 500, styles: {
+    const { t } = index.useTranslations();
+    return (React__default["default"].createElement(index$6.Modal, Object.assign({ withinPortal: true, zIndex: 500, styles: {
             body: {
                 padding: 32,
             },
@@ -631,16 +630,16 @@ const _ConfirmModal = (_a) => {
             React__default["default"].createElement("svg", { width: "80", height: "80", viewBox: "0 0 80 80", fill: "none" },
                 React__default["default"].createElement("path", { d: "M40 73.333c18.41 0 33.333-14.923 33.333-33.333S58.41 6.667 40 6.667 6.667 21.59 6.667 40 21.59 73.333 40 73.333", fill: "#FFB521" }),
                 React__default["default"].createElement("path", { d: "M39.325 48.609a2.48 2.48 0 0 1-2.48-2.48V29.147a2.48 2.48 0 1 1 4.959 0V46.13a2.48 2.48 0 0 1-2.48 2.479m.001 8.058a2.658 2.658 0 1 0 0-5.316 2.658 2.658 0 0 0 0 5.316", fill: "#fff" })),
-            React__default["default"].createElement(index$6.Heading, { tag: "h4" }, t('babyVaccine.popup.confirm.title')),
-            React__default["default"].createElement(index$1.Text, { size: "p2", color: "gray.6" },
+            React__default["default"].createElement(index$7.Heading, { tag: "h4" }, t('babyVaccine.popup.confirm.title')),
+            React__default["default"].createElement(index$2.Text, { size: "p2", color: "gray.6" },
                 React__default["default"].createElement("span", { dangerouslySetInnerHTML: {
                         __html: t('babyVaccine.popup.confirm.description', {
                             date: `<b>${dayjs__default["default"](date).format('DD/MM/YYYY')}</b>`,
                         }),
                     } }))),
         React__default["default"].createElement(core.Flex, { gap: 12, mt: 32, w: "100%" },
-            React__default["default"].createElement(index.Button, { variant: "tertiary", type: "button", size: "lg", w: "100%", onClick: rest.onClose }, t('babyVaccine.popup.confirm.close')),
-            React__default["default"].createElement(index.Button, { type: "button", size: "lg", w: "100%", onClick: () => onSubmit() }, t('babyVaccine.popup.confirm.ok')))));
+            React__default["default"].createElement(index$1.Button, { variant: "tertiary", type: "button", size: "lg", w: "100%", onClick: rest.onClose }, t('babyVaccine.popup.confirm.close')),
+            React__default["default"].createElement(index$1.Button, { type: "button", size: "lg", w: "100%", onClick: () => onSubmit() }, t('babyVaccine.popup.confirm.ok')))));
 };
 
 const StyledImmunization = styled__default["default"].div `
@@ -687,24 +686,24 @@ const StyledDose = styled__default["default"].div `
     }
   }
   &[data-status='upcoming'] {
-    background-color: ${index$2.themeColors.neutral[0]};
-    border: 1px solid ${index$2.themeColors.neutral[1]};
+    background-color: ${index$3.themeColors.neutral[0]};
+    border: 1px solid ${index$3.themeColors.neutral[1]};
   }
   &[data-status='next'] {
-    background-color: ${index$2.themeColors.blue[6]};
-    border: 1px solid ${index$2.themeColors.blue[6]};
+    background-color: ${index$3.themeColors.blue[6]};
+    border: 1px solid ${index$3.themeColors.blue[6]};
     .inner-text {
       color: ${miscTheme.theme.colors.white};
     }
   }
   &[data-disabled='true'] {
     opacity: 50%;
-    background-color: ${index$2.themeColors.neutral[0]};
-    border: 1px solid ${index$2.themeColors.neutral[1]};
+    background-color: ${index$3.themeColors.neutral[0]};
+    border: 1px solid ${index$3.themeColors.neutral[1]};
     cursor: not-allowed;
 
     .inner-text {
-      color: ${index$2.themeColors.neutral[9]};
+      color: ${index$3.themeColors.neutral[9]};
     }
   }
 `;
@@ -713,13 +712,13 @@ const Dose = (_a) => {
     var { status, idx, template, disabled, onClick } = _a, rest = tslib_es6.__rest(_a, ["status", "idx", "template", "disabled", "onClick"]);
     const shouldDisable = template === 'default' && disabled;
     return (React__default["default"].createElement(StyledDose, Object.assign({ onClick: template !== 'default' ? onClick : noop, "data-status": status, "data-id": idx ? idx : 'header', "data-disabled": shouldDisable }, rest),
-        React__default["default"].createElement(index$1.Text, { size: "s4", span: true, className: "inner-text", weight: "semiBold", color: shouldDisable ? index$2.themeColors.neutral[9] : index$2.themeColors.gray[8] }, idx ? idx : '')));
+        React__default["default"].createElement(index$2.Text, { size: "s4", span: true, className: "inner-text", weight: "semiBold", color: shouldDisable ? index$3.themeColors.neutral[9] : index$3.themeColors.gray[8] }, idx ? idx : '')));
 };
 
 dayjs__default["default"].extend(customParseFormat__default["default"]);
 const _DefaultForm = (_a) => {
     var { autoInjected, record, onSubmit: _onSubmit, doses = [], closeModal, birthday } = _a, rest = tslib_es6.__rest(_a, ["autoInjected", "record", "onSubmit", "doses", "closeModal", "birthday"]);
-    const { t } = useTranslations.useTranslations();
+    const { t } = index.useTranslations();
     const [opened, { open, close }] = hooks.useDisclosure(false);
     const form$1 = form.useForm({
         initialValues: {
@@ -752,11 +751,11 @@ const _DefaultForm = (_a) => {
         React__default["default"].createElement("form", Object.assign({ onSubmit: form$1.onSubmit(onSubmit) }, rest),
             React__default["default"].createElement(core.Stack, { spacing: 20 },
                 React__default["default"].createElement(VaccineCardModal, { vaccineRecord: Object.assign(Object.assign({}, record), { status }), onToggle: (status) => form$1.setFieldValue('injected', status) }),
-                React__default["default"].createElement(index$7.DatePicker, Object.assign({ label: React__default["default"].createElement(index$1.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 }, t('babyVaccine.popup.checkbox.suggestedDate')), disabled: record.status === 'vaccinated', excludeDate: (date) => dayjs__default["default"](date).isAfter(dayjs__default["default"]().add(7, 'D')) ||
+                React__default["default"].createElement(index$8.DatePicker, Object.assign({ label: React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", color: miscTheme.theme.colors.gray600 }, t('babyVaccine.popup.checkbox.suggestedDate')), disabled: record.status === 'vaccinated', excludeDate: (date) => dayjs__default["default"](date).isAfter(dayjs__default["default"]().add(7, 'D')) ||
                         dayjs__default["default"](date).isBefore(dayjs__default["default"](birthday, 'YYYY-MM-DD', true), 'D') }, form$1.getInputProps('date'))),
                 doses.length > 0 && (React__default["default"].createElement(core.Input.Wrapper, null,
                     React__default["default"].createElement(core.Input.Label, null,
-                        React__default["default"].createElement(index$1.Text, { size: "s5", weight: "semiBold", color: miscTheme.theme.colors.gray600 }, t('babyVaccine.popup.label.doses'))),
+                        React__default["default"].createElement(index$2.Text, { size: "s5", weight: "semiBold", color: miscTheme.theme.colors.gray600 }, t('babyVaccine.popup.label.doses'))),
                     React__default["default"].createElement(core.Flex, { gap: 4 }, doses.map((item, index) => (React__default["default"].createElement(Dose, { key: index, status: item.status, idx: index + 1, onClick: noop, disabled: Number(record.doseNumber) !== Number(item.doseNumber), template: 'default' })))))),
                 React__default["default"].createElement(core.Flex, { gap: 8, sx: {
                         position: 'absolute',
@@ -769,8 +768,8 @@ const _DefaultForm = (_a) => {
                             bottom: 16,
                         },
                     } },
-                    React__default["default"].createElement(index.Button, { variant: "tertiary", size: "lg", type: "button", fullWidth: true, onClick: closeModal }, t('actionPopover.leaveCommunity.cancel')),
-                    shouldShowSaveButton && (React__default["default"].createElement(index.Button, { size: "lg", type: "submit", fullWidth: true, disabled: !form$1.values.injected }, t('babyVaccine.popup.button.submit'))))))));
+                    React__default["default"].createElement(index$1.Button, { variant: "tertiary", size: "lg", type: "button", fullWidth: true, onClick: closeModal }, t('actionPopover.leaveCommunity.cancel')),
+                    shouldShowSaveButton && (React__default["default"].createElement(index$1.Button, { size: "lg", type: "submit", fullWidth: true, disabled: !form$1.values.injected }, t('babyVaccine.popup.button.submit'))))))));
 };
 
 const _Icon = ({ type }) => {
@@ -814,7 +813,7 @@ const _Section = (_a) => {
             React__default["default"].createElement(core.Flex, { gap: 8 },
                 React__default["default"].createElement(core.AspectRatio, { ratio: 1, w: 24 },
                     React__default["default"].createElement(_Icon, { type: type })),
-                React__default["default"].createElement(index$1.Text, { size: "s2", weight: "semiBold" }, title)),
+                React__default["default"].createElement(index$2.Text, { size: "s2", weight: "semiBold" }, title)),
             children)));
 };
 const _Detail = (_a) => {
@@ -822,28 +821,28 @@ const _Detail = (_a) => {
     return (React__default["default"].createElement(core.Container, Object.assign({ p: 0 }, rest),
         React__default["default"].createElement(core.Stack, { spacing: 24 },
             details.detail && (React__default["default"].createElement(_Section, { type: "definition", title: "Definition" },
-                React__default["default"].createElement(index$1.Text, { size: "p2" },
+                React__default["default"].createElement(index$2.Text, { size: "p2" },
                     React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: details.detail } })))),
             details.benefits && (React__default["default"].createElement(_Section, { type: "benefit", title: "Benefits" },
-                React__default["default"].createElement(index$1.Text, { size: "p2" },
+                React__default["default"].createElement(index$2.Text, { size: "p2" },
                     React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: details.benefits } })))),
             details.contraindications && (React__default["default"].createElement(_Section, { type: "contraindications", title: "Contraindications" },
-                React__default["default"].createElement(index$1.Text, { size: "p2" },
+                React__default["default"].createElement(index$2.Text, { size: "p2" },
                     React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: details.contraindications } })))),
             details.link && (React__default["default"].createElement(_Section, { type: "related_articles", title: "Related Articles" },
-                React__default["default"].createElement(index$1.Text, { size: "p2" },
+                React__default["default"].createElement(index$2.Text, { size: "p2" },
                     React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: details.link } })))))));
 };
 
 dayjs__default["default"].extend(customParseFormat__default["default"]);
 const _ImmunizationForm = (_a) => {
     var { vaccineDetail, doses = [], onDoseClick } = _a, rest = tslib_es6.__rest(_a, ["vaccineDetail", "doses", "onDoseClick"]);
-    const { t } = useTranslations.useTranslations();
+    const { t } = index.useTranslations();
     return (React__default["default"].createElement(core.Stack, Object.assign({ spacing: 20 }, rest),
         React__default["default"].createElement(VaccineCardImmunization, { vaccineDetail: Object.assign({}, vaccineDetail), showTopDetail: false }),
         doses.length > 0 && (React__default["default"].createElement(core.Input.Wrapper, null,
             React__default["default"].createElement(core.Input.Label, null,
-                React__default["default"].createElement(index$1.Text, { size: "s5", weight: "semiBold", color: miscTheme.theme.colors.gray600 }, t('babyVaccine.popup.label.doses'))),
+                React__default["default"].createElement(index$2.Text, { size: "s5", weight: "semiBold", color: miscTheme.theme.colors.gray600 }, t('babyVaccine.popup.label.doses'))),
             React__default["default"].createElement(core.Flex, { gap: 4 }, doses.map((item, index) => (React__default["default"].createElement(Dose, { key: index, status: item.status, idx: index + 1, onClick: () => {
                     onDoseClick(item);
                 }, template: 'immunization' }))))))));
@@ -851,7 +850,7 @@ const _ImmunizationForm = (_a) => {
 
 const VaccineDetailPopup = (_a) => {
     var { currentRecord, vaccineDetail, isDetail, onSubmit: _onSubmit, template = 'default', shouldAutoInjected = true, birthday } = _a, rest = tslib_es6.__rest(_a, ["currentRecord", "vaccineDetail", "isDetail", "onSubmit", "template", "shouldAutoInjected", "birthday"]);
-    const { t } = useTranslations.useTranslations();
+    const { t } = index.useTranslations();
     const { isMobile } = index_styles.useScreenSize();
     const [activeTab, setActiveTab] = React.useState();
     const options = [
@@ -877,7 +876,7 @@ const VaccineDetailPopup = (_a) => {
         return null;
     if (template === 'immunization' && !vaccineDetail)
         return null;
-    return (React__default["default"].createElement(index$5.Modal, Object.assign({}, rest, { title: React__default["default"].createElement(index$1.Text, { size: "s3", weight: "semiBold" }, t('babyVaccine.popup.title')), withCloseButton: true, size: 500, styles: {
+    return (React__default["default"].createElement(index$6.Modal, Object.assign({}, rest, { title: React__default["default"].createElement(index$2.Text, { size: "s3", weight: "semiBold" }, t('babyVaccine.popup.title')), withCloseButton: true, size: 500, styles: {
             content: {
                 [utils.MediaQueries.mbUp]: { height: 560 },
             },
@@ -890,7 +889,7 @@ const VaccineDetailPopup = (_a) => {
             React__default["default"].createElement(core.Tabs, { value: activeTab, onTabChange: setActiveTab },
                 React__default["default"].createElement(core.Flex, { justify: 'space-between' },
                     React__default["default"].createElement(core.Tabs.List, { grow: true }, options.map((opt) => (React__default["default"].createElement(core.Tabs.Tab, { key: opt.id, value: opt.id },
-                        React__default["default"].createElement(index$1.Text, { size: "s3", weight: "semiBold", color: "inherit" }, opt.name)))))),
+                        React__default["default"].createElement(index$2.Text, { size: "s3", weight: "semiBold", color: "inherit" }, opt.name)))))),
                 React__default["default"].createElement(core.Tabs.Panel, { value: "1", pt: 20 }, vaccineDetail &&
                     (template === 'default' ? (React__default["default"].createElement(_DefaultForm, { autoInjected: shouldAutoInjected &&
                             currentRecord.status !== 'vaccinated' &&
@@ -902,34 +901,34 @@ const VaccineDetailPopup = (_a) => {
 
 const _Header = ({ numberOfDoses }) => {
     const { isMobile } = index_styles.useScreenSize();
-    const { t } = useTranslations.useTranslations();
+    const { t } = index.useTranslations();
     return (React__default["default"].createElement(core.Flex, { px: { base: 0, md: 16 } },
-        !isMobile && (React__default["default"].createElement(index$1.Text, { size: "s4", weight: "semiBold", sx: { flexGrow: 1 }, color: miscTheme.theme.colors.gray600 }, t('babyVaccine.immunization.vaccineName'))),
+        !isMobile && (React__default["default"].createElement(index$2.Text, { size: "s4", weight: "semiBold", sx: { flexGrow: 1 }, color: miscTheme.theme.colors.gray600 }, t('babyVaccine.immunization.vaccineName'))),
         React__default["default"].createElement(core.Flex, { gap: { base: 12, md: 24 }, wrap: 'wrap' },
             React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
                 React__default["default"].createElement(Dose, { status: "missed" }),
-                React__default["default"].createElement(index$1.Text, { size: "p4" },
+                React__default["default"].createElement(index$2.Text, { size: "p4" },
                     t('babyVaccine.status.missed'),
                     " (", numberOfDoses === null || numberOfDoses === void 0 ? void 0 :
                     numberOfDoses['missed'],
                     ")")),
             React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
                 React__default["default"].createElement(Dose, { status: "upcoming" }),
-                React__default["default"].createElement(index$1.Text, { size: "p4" },
+                React__default["default"].createElement(index$2.Text, { size: "p4" },
                     t('babyVaccine.status.upcoming'),
                     " (", numberOfDoses === null || numberOfDoses === void 0 ? void 0 :
                     numberOfDoses['upcoming'],
                     ")")),
             React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
                 React__default["default"].createElement(Dose, { status: "vaccinated" }),
-                React__default["default"].createElement(index$1.Text, { size: "p4" },
+                React__default["default"].createElement(index$2.Text, { size: "p4" },
                     t('babyVaccine.status.vaccinated'),
                     " (", numberOfDoses === null || numberOfDoses === void 0 ? void 0 :
                     numberOfDoses['vaccinated'],
                     ")")),
             React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
                 React__default["default"].createElement(Dose, { status: "next" }),
-                React__default["default"].createElement(index$1.Text, { size: "p4" },
+                React__default["default"].createElement(index$2.Text, { size: "p4" },
                     t('babyVaccine.status.next'),
                     " (", numberOfDoses === null || numberOfDoses === void 0 ? void 0 :
                     numberOfDoses['next'],
@@ -938,18 +937,18 @@ const _Header = ({ numberOfDoses }) => {
 const Header = React__default["default"].memo(_Header);
 
 const _Warning = () => {
-    const { t } = useTranslations.useTranslations();
+    const { t } = index.useTranslations();
     return (React__default["default"].createElement(core.Flex, { gap: 14, bg: miscTheme.theme.colors.neutral50, p: 12, sx: { borderRadius: 8 }, align: 'start' },
-        React__default["default"].createElement(index$2.AspectRatio, { ratio: 1, w: 24 },
+        React__default["default"].createElement(index$3.AspectRatio, { ratio: 1, w: 24 },
             React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
                 React__default["default"].createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m-1-8h2V7h-2z", fill: "#595959" }))),
-        React__default["default"].createElement(index$1.Text, { size: "p3" }, t('babyVaccine.immunization.warning'))));
+        React__default["default"].createElement(index$2.Text, { size: "p3" }, t('babyVaccine.immunization.warning'))));
 };
 const Warning = React__default["default"].memo(_Warning);
 
 const Immunization = (_a) => {
     var { details, siteType, onClick } = _a, rest = tslib_es6.__rest(_a, ["details", "siteType", "onClick"]);
-    const { t } = useTranslations.useTranslations();
+    const { t } = index.useTranslations();
     const numberOfDoses = React.useMemo(() => {
         const result = {
             vaccinated: 0,
@@ -973,11 +972,11 @@ const Immunization = (_a) => {
                     React__default["default"].createElement(core.Divider, { h: 1, color: miscTheme.theme.colors.neutral100 }),
                     React__default["default"].createElement(core.Flex, { align: 'stretch', justify: 'space-between', gap: { base: 12, md: 40 }, direction: { base: 'column', lg: 'row' } },
                         React__default["default"].createElement(core.Stack, { spacing: 2 },
-                            React__default["default"].createElement(index$1.Text, { size: "n1", color: item ? miscTheme.theme.colors.gray800 : miscTheme.theme.colors.red800 }, item.optional
+                            React__default["default"].createElement(index$2.Text, { size: "n1", color: item ? miscTheme.theme.colors.gray800 : miscTheme.theme.colors.red800 }, item.optional
                                 ? t('babyVaccine.vaccineInfo.optional')
                                 : t('babyVaccine.vaccineInfo.mandatory')),
                             React__default["default"].createElement("div", { style: { cursor: 'pointer' }, onClick: () => onClick(item, 'immunization') },
-                                React__default["default"].createElement(index$1.Text, { size: 's4', color: miscTheme.theme.colors.gray800, weight: "semiBold" }, item.name || item.antigen))),
+                                React__default["default"].createElement(index$2.Text, { size: 's4', color: miscTheme.theme.colors.gray800, weight: "semiBold" }, item.name || item.antigen))),
                         React__default["default"].createElement("div", { style: { flexShrink: 0 } },
                             React__default["default"].createElement(core.SimpleGrid, { cols: 5, spacing: 4, verticalSpacing: 4, sx: {
                                     flexGrow: 1,
@@ -997,9 +996,9 @@ const ALL_STATUS = [
 ];
 const VaccinationFilter = (_a) => {
     var { status: _status = 'all', onClick } = _a, rest = tslib_es6.__rest(_a, ["status", "onClick"]);
-    const { t } = useTranslations.useTranslations();
+    const { t } = index.useTranslations();
     return (React__default["default"].createElement("div", Object.assign({}, rest),
-        React__default["default"].createElement(core.Flex, { align: "center", gap: 8, wrap: 'wrap' }, ALL_STATUS.map((status) => (React__default["default"].createElement(_Badge, { key: status, px: 12, py: 6, radius: 40, status: status, content: t(`babyVaccine.status.${status}`), sx: Object.assign({ borderColor: index$2.themeColors.neutral[1], backgroundColor: 'white', color: index$2.themeColors.gray[8], cursor: 'pointer', transition: 'all 300mc ease-in' }, (status === _status
+        React__default["default"].createElement(core.Flex, { align: "center", gap: 8, wrap: 'wrap' }, ALL_STATUS.map((status) => (React__default["default"].createElement(_Badge, { key: status, px: 12, py: 6, radius: 40, status: status, content: t(`babyVaccine.status.${status}`), sx: Object.assign({ borderColor: index$3.themeColors.neutral[1], backgroundColor: 'white', color: index$3.themeColors.gray[8], cursor: 'pointer', transition: 'all 300mc ease-in' }, (status === _status
                 ? Object.assign({ fontWeight: 600 }, MAPPED_STATUS[status]) : {})), 
             //@ts-ignore
             onClick: () => onClick(status) }))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hhgtech/hhg-components",
-  "version": "1.29.134",
+  "version": "1.29.136",
   "main": "build/index.js",
   "module": "build/esm/index.js",
   "files": [