@hhgtech/hhg-components 1.28.68 → 1.28.70

package/build/esm/index-9622b7d8.js

@@ -0,0 +1,23 @@
+import { _ as __rest } from './tslib.es6-f79929c2.js';
+import React__default from 'react';
+import { S as StyledHeading, a as StyledText } from './index.styled-385c2908.js';
+
+const MarryBabyHeading = (_a) => {
+    var { type, color, style } = _a, props = __rest(_a, ["type", "color", "style"]);
+    const DATATYPE = {
+        h1: 'headline-1',
+        h2: 'headline-2',
+        h3: 'headline-3',
+        h4: 'headline-4',
+    };
+    return (React__default.createElement(StyledHeading, Object.assign({ type: type, "data-type": DATATYPE[type], style: Object.assign(Object.assign({}, (color && { '--text-color': color })), style) }, props)));
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const MarryBabyText = (_a) => {
+    var { type, color, style } = _a, props = __rest(_a, ["type", "color", "style"]);
+    return (React__default.createElement(StyledText, Object.assign({ "data-type": type, style: Object.assign(Object.assign({}, style), (color && { '--text-color': color })) }, props)));
+};
+
+export { MarryBabyText as M, MarryBabyHeading as a };

package/build/esm/index-9d3bbec1.js

@@ -0,0 +1,124 @@
+import React__default, { useState, useEffect, useMemo, useCallback } from 'react';
+import { v as StyledDivider, w as useStyles } from './index.styles-31411b37.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-f79929c2.js';
+import { u as useTranslations } from './useTranslations-d53557b4.js';
+import { B as Button } from './index-01e95463.js';
+import { P as PATHS } from './paths-4eadd090.js';
+import { a as LOCALIZED_SLUGS } from './constants-bf79fcda.js';
+import { d as domainLocales } from './index-852bb5ca.js';
+import { b as callApi, h as getCarePath } from './utils-72693be6.js';
+import { i as isProduction } from './isProduction-9081cff7.js';
+
+/**
+ * @deprecated Consider to use mantine
+ */
+const Divider = ({ type = 'solid', className, style }) => {
+    return (React__default.createElement(StyledDivider, { style: style, className: className, "data-diver-type": type, dividerType: type }));
+};
+
+const AuthorLabelTextMapping = {
+    admin: 'cardAuthor.admin',
+    moderator: 'cardAuthor.moderator',
+    ambassador: 'cardAuthor.ambassador',
+    expert: 'cardAuthor.expert',
+    sponsor: 'cardAuthor.sponsor',
+    // 'local-admin': 'cardAuthor.localAdmin',
+    guide: 'cardAuthor.guide',
+    influencer: 'cardAuthor.influencer',
+};
+const looselyMatchRole = (role) => {
+    const allRoles = [
+        'admin',
+        'moderator',
+        'ambassador',
+        'expert',
+        'sponsor',
+        'guide',
+        'influencer',
+    ];
+    return allRoles.find((r) => r === role);
+};
+const AuthorBadge = (_a) => {
+    var { siteType, role, title, styles, className } = _a, rest = __rest(_a, ["siteType", "role", "title", "styles", "className"]);
+    const { t } = useTranslations();
+    const matchedRole = role ? looselyMatchRole(role) : '';
+    const { classes, cx } = useStyles(undefined, 
+    // Second argument is responsible for styles api integration
+    { name: 'AuthorBadge', styles });
+    return matchedRole && AuthorLabelTextMapping[matchedRole] ? (React__default.createElement("div", Object.assign({ 
+        // className={styles.authorBadge}
+        className: cx(classes.root, className), "data-label-type": matchedRole, "data-is-marrybaby": siteType === 'marryBaby' }, rest), title || t(AuthorLabelTextMapping[matchedRole]))) : null;
+};
+
+var styles = {"container":"Dudns9-"};
+
+const BtnChoice = ({ value: valueInit, choices, onChange }) => {
+    const [value, setValue] = useState(valueInit);
+    useEffect(() => {
+        setValue(valueInit);
+    }, [valueInit]);
+    return (React__default.createElement("div", { className: styles.container }, choices.map((i, idx) => (React__default.createElement(Button, { dataEventCategory: i.dataEventCategory, dataEventAction: i.dataEventAction, dataEventLabel: i.dataEventLabel, size: "sm", variant: i.value === value ? 'primary' : 'tertiary', key: idx, onClick: () => {
+            setValue(i.value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(i.value);
+        } }, i.label || '')))));
+};
+
+const BookingBtn = (_a) => {
+    var { label, bookingId, bookingType = 'doctor', locale = 'vi-VN' } = _a, rest = __rest(_a, ["label", "bookingId", "bookingType", "locale"]);
+    const { t } = useTranslations();
+    const [loading, setLoading] = useState(false);
+    const currentUrl = useMemo(() => {
+        if (typeof window !== 'undefined') {
+            return window.location.href;
+        }
+        else
+            return '';
+    }, []);
+    const handleOnClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        const url = bookingType === 'doctor'
+            ? PATHS.GET_DOCTOR_DETAIL
+            : bookingType === 'hospital'
+                ? PATHS.GET_HOSPITAL_DETAIL
+                : bookingType === 'service'
+                    ? PATHS.GET_SERVICE_DETAIL
+                    : '';
+        try {
+            setLoading(true);
+            const response = yield callApi(getCarePath(url, {
+                id: bookingId,
+                site: domainLocales[locale],
+            }), 'get');
+            if ((response === null || response === void 0 ? void 0 : response._status) === 1) {
+                const result = bookingType === 'doctor'
+                    ? {
+                        id: (_c = (_b = response === null || response === void 0 ? void 0 : response._data) === null || _b === void 0 ? void 0 : _b.doctor) === null || _c === void 0 ? void 0 : _c.id,
+                        slug: (_e = (_d = response === null || response === void 0 ? void 0 : response._data) === null || _d === void 0 ? void 0 : _d.doctor) === null || _e === void 0 ? void 0 : _e.slug,
+                        localSlug: (_f = LOCALIZED_SLUGS[locale]) === null || _f === void 0 ? void 0 : _f.DOCTOR,
+                    }
+                    : bookingType === 'hospital'
+                        ? {
+                            id: (_h = (_g = response === null || response === void 0 ? void 0 : response._data) === null || _g === void 0 ? void 0 : _g.branch) === null || _h === void 0 ? void 0 : _h.id,
+                            slug: (_k = (_j = response === null || response === void 0 ? void 0 : response._data) === null || _j === void 0 ? void 0 : _j.branch) === null || _k === void 0 ? void 0 : _k.slug,
+                            localSlug: (_l = LOCALIZED_SLUGS[locale]) === null || _l === void 0 ? void 0 : _l.HOSPITAL,
+                        }
+                        : {
+                            id: (_o = (_m = response === null || response === void 0 ? void 0 : response._data) === null || _m === void 0 ? void 0 : _m.service) === null || _o === void 0 ? void 0 : _o.id,
+                            slug: (_q = (_p = response === null || response === void 0 ? void 0 : response._data) === null || _p === void 0 ? void 0 : _p.service) === null || _q === void 0 ? void 0 : _q.slug,
+                            localSlug: (_r = LOCALIZED_SLUGS[locale]) === null || _r === void 0 ? void 0 : _r.SERVICE,
+                        };
+                window.location.href = `https://${!isProduction ? 'discover.' : ''}${domainLocales[locale]}/care/${result.localSlug}/${result.slug}-${result.id}/`;
+            }
+            else {
+                setLoading(false);
+            }
+        }
+        catch (err) {
+            console.log(err);
+            setLoading(false);
+        }
+    }), []);
+    return bookingId && bookingType ? (React__default.createElement(Button, Object.assign({ dataEventCategory: "Care", dataEventAction: "Comment - Quick Booking", dataEventLabel: currentUrl, onClick: handleOnClick, loading: loading }, rest), label || t('careBooking.bookAnAppointment'))) : null;
+};
+
+export { AuthorBadge as A, BtnChoice as B, Divider as D, BookingBtn as a };

package/build/esm/index-a23ed47f.js

@@ -0,0 +1,53 @@
+import { _ as __rest } from './tslib.es6-f79929c2.js';
+import React__default from 'react';
+import { t as theme } from './theme-7522724d.js';
+import { S as Share, E as Eye, W as WhatsApp, w as Spinner } from './utils-72693be6.js';
+
+const ArrowRightTail = (_a) => {
+    var { size = 24, color: colorInit = theme.colors.gray600, useCurrentColor, isActive, activeColor = theme.colors.primaryBase } = _a, rest = __rest(_a, ["size", "color", "useCurrentColor", "isActive", "activeColor"]);
+    const color = useCurrentColor
+        ? 'currentColor'
+        : isActive
+            ? activeColor
+            : colorInit;
+    const props = Object.assign({ width: size, height: size }, rest);
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 18 18", fill: "none" }, props),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.74707 4.22754C9.89332 4.08091 10.0854 4.00635 10.2773 4.00635C10.4692 4.00635 10.661 4.08091 10.8076 4.22754L15.0498 8.46973C15.3431 8.76223 15.3431 9.23702 15.0498 9.53027L10.8076 13.7725C10.5151 14.0657 10.0403 14.0657 9.74707 13.7725L9.68262 13.708C9.38937 13.4155 9.38937 12.9407 9.68262 12.6475L12.5801 9.75H2.77734C2.36334 9.75 2.02734 9.414 2.02734 9C2.02734 8.586 2.36334 8.25 2.77734 8.25H12.5801L9.68262 5.35254C9.38937 5.06004 9.38937 4.58524 9.68262 4.29199L9.74707 4.22754Z", fill: color })));
+};
+
+const Cart = (_a) => {
+    var { size = 24, color: colorInit = theme.colors.gray600, useCurrentColor, isActive, isSolid, activeColor = theme.colors.primaryBase } = _a, rest = __rest(_a, ["size", "color", "useCurrentColor", "isActive", "isSolid", "activeColor"]);
+    const color = useCurrentColor
+        ? 'currentColor'
+        : isActive
+            ? activeColor
+            : colorInit;
+    const props = Object.assign({ width: size, height: size }, rest);
+    return isSolid ? (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { d: "M7.154 21.558q-.73 0-1.24-.51-.51-.511-.51-1.24 0-.73.51-1.24t1.24-.51q.729 0 1.24.51.51.51.51 1.24 0 .729-.51 1.24-.511.51-1.24.51m9.692 0q-.729 0-1.24-.51-.51-.511-.51-1.24 0-.73.51-1.24.511-.51 1.24-.51.73 0 1.24.51t.51 1.24-.51 1.24-1.24.51M5.296 4.25h13.885q.613 0 .928.522t.03 1.066l-3.204 5.804a1.8 1.8 0 0 1-.651.674 1.7 1.7 0 0 1-.888.242H8.1l-1.158 2.115q-.077.115-.005.25.073.135.217.135h10.692q.32 0 .535.215a.73.73 0 0 1 .215.535.73.73 0 0 1-.215.534.73.73 0 0 1-.535.216H7.154q-1 0-1.503-.863-.503-.862-.036-1.722l1.427-2.565L3.404 3.75H2.25a.73.73 0 0 1-.535-.215A.73.73 0 0 1 1.5 3q0-.32.215-.535a.73.73 0 0 1 .535-.215h1.529a.9.9 0 0 1 .813.517z", fill: color }))) : (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { d: "M7.154 21.558q-.73 0-1.24-.51-.51-.511-.51-1.24 0-.73.51-1.24t1.24-.51q.729 0 1.24.51.51.51.51 1.24 0 .729-.51 1.24-.511.51-1.24.51m9.692 0q-.729 0-1.24-.51-.51-.511-.51-1.24 0-.73.51-1.24.511-.51 1.24-.51.73 0 1.24.51t.51 1.24-.51 1.24-1.24.51M6.016 5.75l2.534 5.308h6.817a.3.3 0 0 0 .154-.044.4.4 0 0 0 .116-.12l2.682-4.875q.058-.105.01-.187t-.164-.082zm-.72-1.5h13.885q.613 0 .928.522.315.523.03 1.066l-3.204 5.804a1.8 1.8 0 0 1-.651.674 1.7 1.7 0 0 1-.888.242H8.1l-1.158 2.115q-.077.115-.005.25.073.135.217.135h10.692q.32 0 .535.215a.73.73 0 0 1 .215.535.73.73 0 0 1-.215.534.73.73 0 0 1-.535.216H7.154q-1 0-1.503-.863-.503-.862-.036-1.722l1.427-2.565L3.404 3.75H2.25a.73.73 0 0 1-.535-.215A.73.73 0 0 1 1.5 3q0-.32.215-.535a.73.73 0 0 1 .535-.215h1.529a.9.9 0 0 1 .813.517z", fill: color })));
+};
+
+const CartWithAdd = (_a) => {
+    var { size = 24, color: colorInit = theme.colors.gray600, useCurrentColor, isActive, activeColor = theme.colors.primaryBase } = _a, rest = __rest(_a, ["size", "color", "useCurrentColor", "isActive", "activeColor"]);
+    const color = useCurrentColor
+        ? 'currentColor'
+        : isActive
+            ? activeColor
+            : colorInit;
+    const props = Object.assign({ width: size, height: size }, rest);
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 19 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { d: "M8.938 4.812H7.25a.54.54 0 0 1-.4-.161.55.55 0 0 1-.162-.401q0-.24.161-.401a.55.55 0 0 1 .401-.162h1.688V2q0-.24.161-.4a.55.55 0 0 1 .401-.163q.24 0 .4.162a.55.55 0 0 1 .162.401v1.688h1.688q.24 0 .4.161a.55.55 0 0 1 .162.401q0 .24-.161.4a.55.55 0 0 1-.401.162h-1.687V6.5q0 .24-.162.4a.55.55 0 0 1-.401.162.54.54 0 0 1-.4-.161.55.55 0 0 1-.162-.401zM5.865 16.668q-.546 0-.93-.383a1.27 1.27 0 0 1-.382-.93q0-.546.383-.929t.93-.383.929.383.383.93q0 .546-.383.93a1.27 1.27 0 0 1-.93.382m7.27 0q-.547 0-.93-.383a1.27 1.27 0 0 1-.383-.93q0-.546.383-.929t.93-.383.93.383.382.93q0 .546-.383.93a1.27 1.27 0 0 1-.93.382M3.053 3.312h-.865a.54.54 0 0 1-.401-.161.55.55 0 0 1-.162-.401q0-.24.162-.4a.55.55 0 0 1 .4-.162h1.158q.192 0 .36.1a.63.63 0 0 1 .25.287l2.946 6.218h5.113q.065 0 .115-.032a.3.3 0 0 0 .087-.09l2.618-4.702a.5.5 0 0 1 .198-.21.56.56 0 0 1 .28-.071q.324 0 .485.275.162.276.006.557L13.2 9.232a1.35 1.35 0 0 1-.489.505q-.303.18-.665.181H6.575l-.868 1.587q-.058.086-.004.187t.162.101h8.02q.239 0 .4.162a.55.55 0 0 1 .162.401q0 .24-.162.4a.55.55 0 0 1-.4.162h-8.02q-.75 0-1.133-.64-.383-.642-.02-1.298l1.07-1.924z", fill: color })));
+};
+
+const Icon = {
+    Share,
+    Eye,
+    WhatsApp,
+    ArrowRightTail,
+    Spinner,
+    Cart,
+    CartWithAdd,
+};
+
+export { Icon as I };

package/build/esm/index-a3806b2a.js

@@ -0,0 +1,14 @@
+import { _ as __rest } from './tslib.es6-f79929c2.js';
+import React__default from 'react';
+import { Indicator as Indicator$1 } from '@mantine/core';
+import { t as theme } from './theme-7522724d.js';
+
+const Indicator = (_a) => {
+    var { styles, color = theme.colors.red700 } = _a, props = __rest(_a, ["styles", "color"]);
+    return (React__default.createElement(Indicator$1, Object.assign({ inline: true, position: "top-end", offset: 4, styles: Object.assign({ processing: {
+                // FIX: Safari blink
+                animationDirection: 'alternate',
+            } }, styles), color: color }, props)));
+};
+
+export { Indicator as I };

package/build/esm/index-a5ac9bab.js

@@ -0,0 +1,32 @@
+import { _ as __rest } from './tslib.es6-f79929c2.js';
+import React__default, { useState, useEffect } from 'react';
+import { useDebouncedValue } from '@mantine/hooks';
+import { D as DEBOUNCED_TIME, g as StyledSliderWrapper, B as Button, h as StyledSlider } from './index-01e95463.js';
+
+const Slider = (_a) => {
+    var { color, withControl, onChange, value, min, max, isStatic, containerClassName, containerStyle } = _a, props = __rest(_a, ["color", "withControl", "onChange", "value", "min", "max", "isStatic", "containerClassName", "containerStyle"]);
+    const [currentValue, setCurrentValue] = useState(value || min || 0);
+    const [debounced] = useDebouncedValue(currentValue, DEBOUNCED_TIME);
+    const increase = () => {
+        setCurrentValue((p) => (max && p === max ? p : p + 1));
+    };
+    const decrease = () => {
+        setCurrentValue((p) => (min && p === min ? p : p - 1));
+    };
+    useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(debounced);
+    }, [debounced]);
+    useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+    return (React__default.createElement(StyledSliderWrapper, { className: containerClassName, style: containerStyle },
+        withControl && (React__default.createElement(Button, { type: "button", size: "sm", color: "ghost", onClick: decrease },
+            React__default.createElement("svg", { width: "10", height: "10", fill: "none", viewBox: "0 0 12 3" },
+                React__default.createElement("path", { d: "M1 1.004h8", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })))),
+        React__default.createElement(StyledSlider, Object.assign({ thumbSize: 21, labelAlwaysOn: true, radius: "xl", color: color, value: currentValue, onChange: !isStatic ? setCurrentValue : () => null, min: min, max: max }, props, { className: 'hhg-mantine-slider ' + (props.className || '') })),
+        withControl && (React__default.createElement(Button, { type: "button", size: "sm", variant: "ghost", onClick: increase },
+            React__default.createElement("svg", { width: "16", height: "20", fill: "none", viewBox: "0 0 16 16" },
+                React__default.createElement("path", { d: "M8 4v8M4 8h8", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }))))));
+};
+
+export { Slider as S };

package/build/esm/index-a8506e24.js

@@ -0,0 +1,152 @@
+import React__default from 'react';
+import { B as Button } from './index-d1d2e96b.js';
+import { C as Container } from './index-fb17aef5.js';
+import dayjs from 'dayjs';
+import { d as domainLocales } from './index-852bb5ca.js';
+import { t as theme } from './theme-7522724d.js';
+import './index-01e95463.js';
+import { Flex, Stack, Box } from '@mantine/core';
+import '@mantine/dates';
+import './Subot-73dd692f.js';
+import './index-ec1cc2ea.js';
+import { T as Text } from './index-ebb8bd0e.js';
+import { u as useTranslations } from './useTranslations-d53557b4.js';
+import '@mantine/hooks';
+import './utils-f7ab8c32.js';
+import { L as Logo } from './index-e183dc84.js';
+import { M as MarryBabyText } from './index-9622b7d8.js';
+import './translationsContext-62ed87ff.js';
+import 'string-format';
+
+var styles$1 = {"footer":"Lj0qoTD","flag":"OO-qFWT"};
+
+const Flag = ({ url, isMobile, dataEventCategory, dataEventAction, dataEventLabel, }) => {
+    return (React__default.createElement("div", { className: styles$1.flag , "data-is-mobile": isMobile },
+        React__default.createElement("img", { loading: "lazy", className: "country-flag", src: url, alt: "Country Flag", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-content-label": dataEventLabel })));
+};
+const DiscoverFooter = ({ className, type = 'main', footerInfo, isMobile, locale, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+    const { t } = useTranslations();
+    const footerMenu = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu;
+    const verifiedIcons = ((_b = (_a = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _a === void 0 ? void 0 : _a.verified) === null || _b === void 0 ? void 0 : _b.filter(Boolean)) || [];
+    const FooterComp = 'footer';
+    return (React__default.createElement(FooterComp, { className: `${styles$1.footer } ${className || ''}`, style: type === 'mini'
+            ? {
+                backgroundColor: theme.colors.neutral50,
+            }
+            : {} },
+        React__default.createElement(Container, null,
+            React__default.createElement("div", { className: "inner", "data-type": type }, type === 'main' ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("a", { href: "/" },
+                    React__default.createElement("img", { loading: "lazy", className: "footer-logo", src: (_c = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _c === void 0 ? void 0 : _c.logo, alt: "Logo", "data-is-sehat": locale === 'id-ID' })),
+                React__default.createElement("div", { className: "columns" },
+                    React__default.createElement("div", { className: "newsletter" },
+                        React__default.createElement(Text, { size: "p1", weight: "bold" }, (_d = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _d === void 0 ? void 0 : _d.content),
+                        React__default.createElement(Button, { className: "signupButton", color: "primary", size: "lg" }, t('footer.signUp')),
+                        React__default.createElement("div", { className: "social" },
+                            React__default.createElement(Text, { size: "sm" }, (_e = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _e === void 0 ? void 0 : _e.title),
+                            React__default.createElement("div", { className: "icons" }, (_g = (_f = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _f === void 0 ? void 0 : _f.socials) === null || _g === void 0 ? void 0 : _g.map((social, idx) => (React__default.createElement("a", { key: idx, "data-event-category": "Footer", "data-event-action": `Follow us - ${social.name}`, "data-content-label": social.url, href: social.url },
+                                React__default.createElement("img", { loading: "lazy", "data-event-category": "Footer", "data-event-action": `Follow us - ${social.name}`, "data-content-label": social.url, src: social.icon, alt: "Logo Social", className: "social-icon" }))))),
+                            React__default.createElement("hr", { className: "hrMobile" }))),
+                    React__default.createElement("div", null,
+                        footerMenu && (React__default.createElement(React__default.Fragment, null,
+                            React__default.createElement("div", { className: "biglinks" }, (_j = (_h = footerMenu[0]) === null || _h === void 0 ? void 0 : _h.items) === null || _j === void 0 ? void 0 : _j.map((bigLink, idx) => (React__default.createElement("a", { "data-event-category": "Footer", "data-event-action": bigLink.title, "data-event-label": `https://${domainLocales[locale]}${bigLink.url}`, className: "bigLink", key: idx, href: bigLink.url }, bigLink.title)))),
+                            React__default.createElement("hr", { className: "hrMobile" }),
+                            React__default.createElement("div", { className: "mHalf" },
+                                React__default.createElement(Text, { size: "sm", className: "linkTitle" }, (_k = footerMenu[1]) === null || _k === void 0 ? void 0 : _k.menu_title), (_m = (_l = footerMenu[1]) === null || _l === void 0 ? void 0 : _l.items) === null || _m === void 0 ? void 0 :
+                                _m.map((informationLink, idx) => (React__default.createElement("a", { "data-event-category": "Footer", "data-event-action": informationLink.title, "data-event-label": `https://${domainLocales[locale]}${informationLink.url}`, className: "link", href: informationLink.url, key: idx },
+                                    React__default.createElement(Text, { size: "sm", dataEventCategory: "Footer", dataEventAction: informationLink.title, dataEventLabel: `https://${domainLocales[locale]}${informationLink.url}` }, informationLink.title))))),
+                            React__default.createElement("div", { className: "mHalf" },
+                                React__default.createElement(Text, { size: "sm", className: "linkTitle" }, (_o = footerMenu[2]) === null || _o === void 0 ? void 0 : _o.menu_title), (_q = (_p = footerMenu[2]) === null || _p === void 0 ? void 0 : _p.items) === null || _q === void 0 ? void 0 :
+                                _q.map((hellohealthlink, idx) => hellohealthlink.url && (React__default.createElement("a", { "data-event-category": "Footer", "data-event-action": hellohealthlink.title, "data-event-label": hellohealthlink.url, className: "link", href: hellohealthlink.url, key: idx },
+                                    React__default.createElement(Text, { size: "sm", dataEventCategory: "Footer", dataEventAction: hellohealthlink.title, dataEventLabel: hellohealthlink.url }, hellohealthlink.title))))))),
+                        React__default.createElement("hr", { className: "hrMobile" }),
+                        React__default.createElement("div", { className: "otherSites" },
+                            React__default.createElement(Text, { size: "sm", className: "linkTitle" }, (_r = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.branch) === null || _r === void 0 ? void 0 : _r.title),
+                            React__default.createElement("div", { className: "flags" }, (_t = (_s = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.branch) === null || _s === void 0 ? void 0 : _s.branch) === null || _t === void 0 ? void 0 : _t.map((flagLink, idx) => (React__default.createElement("a", { className: "link", href: flagLink.url, key: idx, "data-event-category": "Footer", "data-event-action": flagLink.name, "data-event-label": flagLink.url },
+                                React__default.createElement(Flag, { url: flagLink.flag, isMobile: isMobile, dataEventCategory: "Footer", dataEventAction: flagLink.name, dataEventLabel: flagLink.url })))))))),
+                React__default.createElement("hr", null),
+                React__default.createElement("div", { className: "copyright" },
+                    React__default.createElement("div", { className: "copyright-image-wrapper" }, verifiedIcons.length
+                        ? verifiedIcons.map((verify, index) => (React__default.createElement("a", { href: verify.url, key: index, className: "copyright-image" },
+                            React__default.createElement("img", { loading: "lazy", src: verify.image, alt: "DMCA Icon" }))))
+                        : null),
+                    React__default.createElement(Text, { size: "xs", className: "copyright-content", as: "div" },
+                        React__default.createElement("div", { dangerouslySetInnerHTML: {
+                                __html: (_u = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.general) === null || _u === void 0 ? void 0 : _u.copyright.replace(/{currentYear}/gi, dayjs().get('year').toString()),
+                            } }))))) : (React__default.createElement(React__default.Fragment, null, (footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu) && (React__default.createElement("div", { className: "columns" },
+                React__default.createElement("div", { className: "mHalf" },
+                    React__default.createElement(Text, { size: "sm", className: "linkTitle" }, (_v = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu[1]) === null || _v === void 0 ? void 0 : _v.menu_title), (_x = (_w = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu[1]) === null || _w === void 0 ? void 0 : _w.items) === null || _x === void 0 ? void 0 :
+                    _x.map((informationLink) => (React__default.createElement("a", { className: "link", href: informationLink.url, key: informationLink.title, "data-list-type": "Footer", "data-content-type": "Navigate", "data-content-topic": "Information", "data-content-title": informationLink.title, "data-content-id": `https://${domainLocales[locale]}${informationLink.url}`, "data-event-category": "Footer", "data-event-action": informationLink.title, "data-event-label": `https://${domainLocales[locale]}${informationLink.url}` },
+                        React__default.createElement(Text, { dataEventCategory: "Footer", dataEventAction: informationLink.title, dataEventLabel: `https://${domainLocales[locale]}${informationLink.url}`, size: "sm", style: {
+                                color: theme.colors.gray800,
+                            } }, informationLink.title))))),
+                React__default.createElement("div", { className: "mHalf" },
+                    React__default.createElement(Text, { size: "sm", className: "linkTitle" }, (_y = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu[2]) === null || _y === void 0 ? void 0 : _y.menu_title), (_0 = (_z = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.menu[2]) === null || _z === void 0 ? void 0 : _z.items) === null || _0 === void 0 ? void 0 :
+                    _0.map((hellohealthlink, idx) => (React__default.createElement("a", { className: "link", href: hellohealthlink.url, key: idx, "data-list-type": "Footer", "data-content-type": "Navigate", "data-content-topic": "Hello Health", "data-content-title": hellohealthlink.title, "data-content-id": hellohealthlink.url, "data-event-category": "Footer", "data-event-action": hellohealthlink.title, "data-event-label": hellohealthlink.url },
+                        React__default.createElement(Text, { size: "sm", color: theme.colors.gray800, dataEventCategory: "Footer", dataEventAction: hellohealthlink.title, dataEventLabel: hellohealthlink.url }, hellohealthlink.title))))),
+                type !== 'mini' && React__default.createElement("hr", { className: "hrMobile" }),
+                React__default.createElement("div", { className: "newsletter" },
+                    React__default.createElement("div", { className: "social" },
+                        React__default.createElement(Text, { size: "sm" }, (_1 = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _1 === void 0 ? void 0 : _1.title),
+                        React__default.createElement("div", { className: "icons" }, (_3 = (_2 = footerInfo === null || footerInfo === void 0 ? void 0 : footerInfo.social) === null || _2 === void 0 ? void 0 : _2.socials) === null || _3 === void 0 ? void 0 : _3.map((social, idx) => (React__default.createElement("a", { key: idx, "data-event-category": "Footer", "data-event-action": `Follow us - ${social.name}`, "data-content-label": social.url, href: social.url },
+                            React__default.createElement("img", { "data-event-category": "Footer", "data-event-action": `Follow us - ${social.name}`, "data-content-label": social.url, src: social.icon, alt: "Logo Social", loading: "lazy", className: "social-icon" })))))))))))))));
+};
+
+var styles = {"footerContainer":"B6-KmWK","menuContainer":"GS-7mbG","wrapMenuItem":"qc5bEb3","wrapItems":"CQGVeuT","wrapCopyRight":"_8eUT8Jr","wrapInfo":"_6JMoel-","socialLink":"pFG7UH3"};
+
+const MarryBabyFooter = ({ logoType = 'marryBaby', footerMenu, background, }) => {
+    var _a;
+    if (!footerMenu)
+        return null;
+    const { general, menu, socials } = footerMenu;
+    return (React__default.createElement("footer", { className: styles.footerContainer , style: {
+            backgroundColor: background ? background : 'none',
+        } },
+        React__default.createElement(Container, null,
+            React__default.createElement("div", { className: styles.menuContainer }, menu === null || menu === void 0 ? void 0 : menu.map(({ menu_title, items }, idx) => (React__default.createElement("div", { className: styles.wrapMenuItem, key: `mbf${idx}` },
+                React__default.createElement(MarryBabyText, { className: "title", type: "subtitle-1", color: theme.mbColors.pink }, menu_title), items === null || items === void 0 ? void 0 :
+                items.map(({ title, url }, id) => (React__default.createElement("a", { "data-event-category": "Footer", "data-event-action": "Click", "data-event-label": `${url}`, className: "link", href: url, key: `footer-links-${id}` },
+                    React__default.createElement("div", { className: styles.wrapItems, key: `mbitem${id}` },
+                        React__default.createElement(MarryBabyText, { type: "bodytext-2", color: theme.mbColors.gray }, title)))))))))),
+        React__default.createElement(Container, null,
+            React__default.createElement("div", { className: styles.wrapInfo },
+                React__default.createElement(Flex, { gap: '24px', sx: (theme) => ({
+                        [theme.fn.largerThan('sm')]: {
+                            '.info-item': {
+                                flexGrow: 1,
+                                width: '50%',
+                            },
+                        },
+                        [theme.fn.smallerThan('sm')]: {
+                            flexDirection: 'column',
+                        },
+                    }) },
+                    React__default.createElement(Stack, { spacing: '24px', className: "info-item" },
+                        React__default.createElement(Logo, { className: "logo", type: logoType }),
+                        React__default.createElement(Text, { size: "p4", as: "div" },
+                            React__default.createElement("div", { dangerouslySetInnerHTML: {
+                                    __html: general === null || general === void 0 ? void 0 : general.content,
+                                } })),
+                        React__default.createElement("div", { className: styles.socialLink }, socials === null || socials === void 0 ? void 0 : socials.map(({ icon, name, url }, id) => (React__default.createElement("a", { key: `social${id}`, target: "_blank", rel: "noreferrer", "data-event-category": "Footer", "data-event-action": `Follow us - ${name}`, "data-content-label": name, href: url },
+                            React__default.createElement("img", { className: "social-logo", loading: "lazy", src: icon, alt: name })))))),
+                    React__default.createElement(Box, { className: "info-item", sx: { paddingTop: '7px' } },
+                        React__default.createElement(Text, { size: "p4", as: "div" },
+                            React__default.createElement("div", { dangerouslySetInnerHTML: {
+                                    __html: general === null || general === void 0 ? void 0 : general.information,
+                                } })))))),
+        React__default.createElement("div", { className: styles.wrapCopyRight },
+            React__default.createElement(Container, null,
+                React__default.createElement("div", { className: "content" },
+                    React__default.createElement(Text, { size: "p5", color: "#fff", as: "div" },
+                        React__default.createElement("div", { dangerouslySetInnerHTML: {
+                                __html: general === null || general === void 0 ? void 0 : general.copyright.replace(/{currentYear}/gi, dayjs().get('year').toString()),
+                            } })),
+                    React__default.createElement("div", { className: "verify" }, (_a = general === null || general === void 0 ? void 0 : general.verified) === null || _a === void 0 ? void 0 : _a.map(({ image, url }, idx) => (React__default.createElement("img", { loading: "lazy", key: `imgMbFt${idx}`, src: image, alt: url })))))))));
+};
+
+const Footer = ({ type, isMobile = true, locale, footerInfo, siteType, background, }) => {
+    return siteType === 'helloSites' ? (React__default.createElement(DiscoverFooter, { isMobile: isMobile, type: type, locale: locale, footerInfo: (footerInfo || {}) })) : (React__default.createElement(MarryBabyFooter, { footerMenu: footerInfo, background: background }));
+};
+
+export { Footer as F };

package/build/esm/index-aa97bf26.js

@@ -0,0 +1,33 @@
+import { _ as __rest } from './tslib.es6-f79929c2.js';
+import React__default from 'react';
+import { Image } from '@mantine/core';
+import { DatePickerInput } from '@mantine/dates';
+import { I as ISO_FORMAT } from './index-852bb5ca.js';
+import { L as LOCALE } from './Subot-73dd692f.js';
+import { C as CommonGAssets } from './index-ec1cc2ea.js';
+import { M as MAPPED_LOCALE } from './index-01e95463.js';
+
+// Omit<MantineDatePickerInputProps, 'value'>
+const DatePicker = (_a) => {
+    var _b;
+    var { value, fullWidth = true } = _a, rest = __rest(_a, ["value", "fullWidth"]);
+    return (React__default.createElement(DatePickerInput, Object.assign({ locale: MAPPED_LOCALE[process.env.UNIFY_LOCALE || LOCALE.Vietnam], valueFormat: (_b = ISO_FORMAT[process.env.UNIFY_LOCALE || LOCALE.Vietnam]) === null || _b === void 0 ? void 0 : _b.dateFormat, size: "md", clearable: false, popoverProps: fullWidth
+            ? {
+                styles: {
+                    dropdown: {
+                        minWidth: '100%',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    },
+                },
+            }
+            : {}, styles: {
+            root: {
+                position: 'relative',
+            },
+            rightSection: { pointerEvents: 'none', cursor: 'default' },
+        }, rightSection: React__default.createElement(Image, { src: CommonGAssets.getAssetPath(rest.isMB ? 'MB-calendar.svg' : 'OutlineCalendar.svg'), width: 16, height: 16 }), value: value }, rest, { className: `input-control ${(rest === null || rest === void 0 ? void 0 : rest.className) || ''}` })));
+};
+
+export { DatePicker as D };

package/build/esm/index-bd89745e.js

@@ -0,0 +1,151 @@
+import { a as __awaiter, _ as __rest } from './tslib.es6-f79929c2.js';
+import React__default, { useReducer, useState, useEffect } from 'react';
+import { Stack, Input as Input$1 } from '@mantine/core';
+import { c as Input, S as Select } from './index-01e95463.js';
+import '@mantine/dates';
+import { c as CDN_ADDRESS } from './index-852bb5ca.js';
+import { L as LOCALE } from './Subot-73dd692f.js';
+import './index-ec1cc2ea.js';
+import './index-ebb8bd0e.js';
+import './theme-7522724d.js';
+import { u as useTranslations } from './useTranslations-d53557b4.js';
+import '@mantine/hooks';
+import './utils-f7ab8c32.js';
+import { M as MAPPED_LOCALE } from './utils-5e5da593.js';
+
+const generateGetAddressDetail = (locale) => {
+    return `${CDN_ADDRESS}/cities-data-${MAPPED_LOCALE[locale]}.json`;
+};
+
+const initialState = {
+    provinceByName: {},
+    provinces: [],
+    districts: [],
+    wards: [],
+    selectedProvince: '',
+    selectedDistrict: '',
+    selectedWard: '',
+};
+const reducer = (state, action) => {
+    switch (action.type) {
+        case 'SET_DATA':
+            return Object.assign(Object.assign({}, state), action.payload);
+        case 'SET_DISTRICTS':
+            return Object.assign(Object.assign({}, state), { districts: action.payload });
+        case 'SET_WARDS':
+            return Object.assign(Object.assign({}, state), { wards: action.payload });
+        case 'SELECT_PROVINCE':
+            return Object.assign(Object.assign({}, state), { selectedProvince: action.payload, selectedDistrict: '', selectedWard: '' });
+        case 'SELECT_DISTRICT':
+            return Object.assign(Object.assign({}, state), { selectedDistrict: action.payload, selectedWard: '' });
+        case 'SELECT_WARD':
+            return Object.assign(Object.assign({}, state), { selectedWard: action.payload });
+        default:
+            return state;
+    }
+};
+const mappingProvinceId = (provinces, hbProvincesList) => {
+    const listById = {};
+    for (const [, value] of Object.entries(hbProvincesList)) {
+        const { id } = value;
+        if (id) {
+            listById[id] = value;
+        }
+    }
+    const list = {};
+    provinces.map((i) => {
+        list[i.name] = listById[i.id];
+    });
+    return list;
+};
+const useAddress = ({ provinces: provincesInit }) => {
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const { provinceByName, provinces, districts, wards, selectedProvince, selectedDistrict, selectedWard, } = state;
+    const [addressData, setAddressData] = useState();
+    useEffect(() => {
+        // Simulating the API call to fetch the address data
+        const fetchAddressData = () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c;
+            try {
+                const _addressData = yield fetch(generateGetAddressDetail(process.env.UNIFY_LOCALE || LOCALE.Vietnam)).then((res) => res.json());
+                setAddressData(_addressData);
+                const { list } = _addressData;
+                const provinceByName = provincesInit
+                    ? mappingProvinceId(provincesInit, list)
+                    : list;
+                const provincesData = Object.keys(provinceByName);
+                const districtsData = Object.keys(((_a = list[provincesData[0]]) === null || _a === void 0 ? void 0 : _a.list) || {});
+                const wardsData = Object.keys(((_c = (_b = list[provincesData[0]]) === null || _b === void 0 ? void 0 : _b[districtsData[0]]) === null || _c === void 0 ? void 0 : _c.list) || {});
+                dispatch({
+                    type: 'SET_DATA',
+                    payload: {
+                        provinceByName,
+                        provinces: provincesData,
+                        districts: districtsData,
+                        wards: wardsData,
+                    },
+                });
+            }
+            catch (error) {
+                console.error('Error fetching address data:', error);
+            }
+        });
+        fetchAddressData();
+    }, [process.env.UNIFY_LOCALE]);
+    const handleProvinceChange = (_selectedProvince) => {
+        var _a;
+        const districtsData = Object.keys(((_a = provinceByName[_selectedProvince]) === null || _a === void 0 ? void 0 : _a.list) || {});
+        dispatch({ type: 'SET_DISTRICTS', payload: districtsData });
+        dispatch({ type: 'SET_WARDS', payload: [] });
+        dispatch({ type: 'SELECT_PROVINCE', payload: _selectedProvince });
+    };
+    const handleDistrictChange = (_selectedDistrict) => {
+        var _a, _b;
+        const wardsData = Object.keys(((_b = (_a = provinceByName[selectedProvince]) === null || _a === void 0 ? void 0 : _a.list[_selectedDistrict]) === null || _b === void 0 ? void 0 : _b.list) || {});
+        dispatch({ type: 'SET_WARDS', payload: wardsData });
+        dispatch({ type: 'SELECT_DISTRICT', payload: _selectedDistrict });
+    };
+    const handleWardChange = (_selectedWard) => {
+        dispatch({ type: 'SELECT_WARD', payload: _selectedWard });
+    };
+    return {
+        provinces,
+        districts,
+        wards,
+        selectedProvince,
+        selectedDistrict,
+        selectedWard,
+        handleProvinceChange,
+        handleDistrictChange,
+        handleWardChange,
+    };
+};
+
+const AddressInput = (_a) => {
+    var { error, provinces: provincesInit, placeholder } = _a, props = __rest(_a, ["error", "provinces", "placeholder"]);
+    const { t } = useTranslations();
+    const { provinces, districts, wards, selectedProvince, selectedDistrict, selectedWard, handleProvinceChange, handleDistrictChange, handleWardChange, } = useAddress({ provinces: provincesInit });
+    const [extraInfo, setExtraInfo] = useState('');
+    useEffect(() => {
+        if (selectedProvince && selectedDistrict && selectedWard && extraInfo) {
+            props.onChange({
+                selectedProvince,
+                selectedDistrict,
+                selectedWard,
+                extraInfo,
+            });
+        }
+        else {
+            props.onChange(null);
+        }
+    }, [selectedProvince, selectedDistrict, selectedWard, extraInfo]);
+    return (React__default.createElement(Input.Wrapper, Object.assign({ withAsterisk: true }, props),
+        React__default.createElement(Stack, null,
+            React__default.createElement(Select, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.province) || t('onboarding.similac.input.city'), data: provincesInit ? provinces : provinces.sort(), searchable: true, onChange: handleProvinceChange, value: selectedProvince }),
+            React__default.createElement(Select, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.district) || t('onboarding.similac.input.district'), data: districts.sort(), searchable: true, onChange: handleDistrictChange, value: selectedDistrict, disabled: !selectedProvince }),
+            React__default.createElement(Select, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.ward) || t('onboarding.similac.input.ward'), searchable: true, data: wards.sort(), value: selectedWard, onChange: handleWardChange, disabled: !selectedProvince || !selectedDistrict }),
+            React__default.createElement(Input, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.address) || t('onboarding.similac.input.no'), disabled: !selectedProvince || !selectedDistrict || !selectedWard, value: extraInfo, onChange: setExtraInfo, style: { marginBottom: 0 } })),
+        React__default.createElement(Input$1.Error, { size: "md" }, error)));
+};
+
+export { AddressInput as A };