@hhgtech/hhg-components 1.28.68 → 1.28.69

package/build/esm/index-3474401a.js

@@ -0,0 +1,149 @@
+import { _ as __rest } from './tslib.es6-1b1533a9.js';
+import React__default from 'react';
+import { rem, createStyles, Text as Text$1 } from '@mantine/core';
+
+var FontWeight;
+(function (FontWeight) {
+    FontWeight[FontWeight["regular"] = 400] = "regular";
+    FontWeight[FontWeight["semiBold"] = 600] = "semiBold";
+    FontWeight[FontWeight["bold"] = 700] = "bold";
+})(FontWeight || (FontWeight = {}));
+const GlobalTextStyle = {
+    fontSize: {
+        base: [rem(16), rem(16)],
+        lg: [rem(18), rem(16)],
+        md: [rem(18), rem(16)],
+        sm: [rem(16), rem(14)],
+        xs: [rem(14), rem(12)],
+        s1: [rem(22), rem(18)],
+        s2: [rem(18), rem(16)],
+        s3: [rem(16), rem(14)],
+        s4: [rem(14), rem(12)],
+        s5: [rem(12), rem(12)],
+        p1: [rem(18), rem(16)],
+        p2: [rem(16), rem(16)],
+        p3: [rem(16), rem(14)],
+        p4: [rem(14), rem(12)],
+        p5: [rem(12), rem(12)],
+        c1: [rem(16), rem(14)],
+        c2: [rem(14), rem(12)],
+        n1: [rem(12), rem(12)],
+        label1: [rem(14), rem(14)],
+        label2: [rem(12), rem(12)],
+        h1: [rem(40), rem(26)],
+        h2: [rem(32), rem(24)],
+        h3: [rem(26), rem(20)],
+        h4: [rem(22), rem(18)],
+        h5: [rem(18), rem(16)],
+        h6: [rem(16), rem(14)],
+    },
+    lineHeight: {
+        base: [rem(24), rem(24)],
+        lg: [rem(32), rem(28)],
+        md: [rem(32), rem(28)],
+        sm: [rem(24), rem(22)],
+        xs: [rem(24), rem(18)],
+        s1: [rem(32), rem(26)],
+        s2: [rem(28), rem(24)],
+        s3: [rem(24), rem(24)],
+        s4: [rem(22), rem(18)],
+        s5: [rem(18), rem(18)],
+        p1: [rem(28), rem(28)],
+        p2: [rem(24), rem(24)],
+        p3: [rem(24), rem(22)],
+        p4: [rem(22), rem(18)],
+        c1: [rem(24), rem(22)],
+        c2: [rem(22), rem(18)],
+        n1: [rem(18), rem(18)],
+        label1: [rem(22), rem(22)],
+        label2: [rem(18), rem(18)],
+        h1: [rem(52), rem(34)],
+        h2: [rem(42), rem(32)],
+        h3: [rem(36), rem(26)],
+        h4: [rem(32), rem(26)],
+        h5: [rem(28), rem(24)],
+        h6: [rem(24), rem(22)],
+    },
+    letterSpacing: {
+        lg: [-0.2, 0],
+        md: [-0.2, 0],
+        sm: [0, -0.2],
+        s1: [-0.6, -0.6],
+        s2: [-0.4, -0.2],
+        s3: [0, -0.2],
+        s4: [0, -0.2],
+        p1: [-0.2, -0.2],
+        p2: [0, -0.2],
+        p3: [0, -0.2],
+        p4: [-0.2, 0],
+        label1: [0, -0.2],
+        h1: [-1.2, -0.9],
+        h2: [-1, -0.8],
+        h3: [-0.8, -0.7],
+        h4: [-0.6, -0.6],
+        h5: [-0.2, -0.2],
+        h6: [0, -0.2],
+    },
+    fontWeightBySize: {
+        s1: FontWeight.semiBold,
+        s2: FontWeight.semiBold,
+        s3: FontWeight.semiBold,
+        s4: FontWeight.semiBold,
+        h1: FontWeight.bold,
+        h2: FontWeight.bold,
+        h3: FontWeight.bold,
+        h4: FontWeight.bold,
+        h5: FontWeight.bold,
+        h6: FontWeight.bold,
+    },
+    fontWeight: FontWeight,
+};
+
+const OTHER_THEME_CONFIG = Object.assign({}, GlobalTextStyle);
+
+var useStyles = createStyles((theme, _params) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const TextConfig = Object.assign({}, OTHER_THEME_CONFIG);
+    const getFontSize = (_a = TextConfig.fontSize[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _a === void 0 ? void 0 : _a[0];
+    const getLineHeight = (_b = TextConfig.lineHeight[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _b === void 0 ? void 0 : _b[0];
+    const getLetterSpacing = (_e = (_d = (_c = TextConfig.letterSpacing) === null || _c === void 0 ? void 0 : _c[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : 0;
+    const getFontSizeMbDown = (_f = TextConfig.fontSize[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _f === void 0 ? void 0 : _f[1];
+    const getLineHeightMbDown = (_g = TextConfig.lineHeight[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _g === void 0 ? void 0 : _g[1];
+    const getLetterSpacingMbDown = (_k = (_j = (_h = TextConfig.letterSpacing) === null || _h === void 0 ? void 0 : _h[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _j === void 0 ? void 0 : _j[1]) !== null && _k !== void 0 ? _k : 0;
+    return {
+        root: Object.assign(Object.assign({}, ((_params === null || _params === void 0 ? void 0 : _params.size) && {
+            fontWeight: (_params === null || _params === void 0 ? void 0 : _params.as) === 'label'
+                ? FontWeight.semiBold
+                : TextConfig.fontWeightBySize[_params === null || _params === void 0 ? void 0 : _params.size] ||
+                    TextConfig.fontWeight[_params.weight],
+            fontSize: `${getFontSize}`,
+            lineHeight: `${getLineHeight}`,
+            letterSpacing: getLetterSpacing,
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: `${getFontSizeMbDown}`,
+                lineHeight: `${getLineHeightMbDown}`,
+                letterSpacing: getLetterSpacingMbDown,
+            },
+        })), { '&[data-event-category] > *': {
+                pointerEvents: 'none',
+            } }),
+    };
+});
+
+const Text = (_a) => {
+    var _b;
+    var { size, color, weight = 'regular', as = 'p', styles, className, dataEventCategory, dataEventAction, dataEventLabel } = _a, rest = __rest(_a, ["size", "color", "weight", "as", "styles", "className", "dataEventCategory", "dataEventAction", "dataEventLabel"]);
+    const { theme, classes, cx } = useStyles({ size, weight: weight === 'caption' ? 'bold' : weight, as }, { name: 'Text', styles });
+    return (React__default.createElement(Text$1, Object.assign({ className: cx(classes.root, className), color: color ||
+            (as === 'label'
+                ? theme.colors.gray[6]
+                : ((_b = theme === null || theme === void 0 ? void 0 : theme.other) === null || _b === void 0 ? void 0 : _b.template) === 'mb'
+                    ? theme.colors.delftGray[7]
+                    : theme.colors.gray[7]), component: as, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, classNames: {
+            root: Object.assign(Object.assign({}, (rest.wordWrap ? { 'word-wrap': rest.wordWrap } : undefined)), (rest.isUppercase || weight === 'caption'
+                ? { 'text-transform': 'uppercase' }
+                : undefined)),
+        } }, rest)));
+};
+
+export { OTHER_THEME_CONFIG as O, Text as T };

package/build/esm/index-34899aa3.js

@@ -0,0 +1,17 @@
+import { _ as __rest } from './tslib.es6-1b1533a9.js';
+import React__default from 'react';
+import { useMantineTheme } from '@mantine/core';
+import { T as Text } from './index-3474401a.js';
+
+/**
+ * @deprecated Consider to use import { Title } from '@mantine/core'
+ * if need to use custom tag, use Text from mantine instead
+ */
+const Heading = (_a) => {
+    var { as, tag, color, fontWeight, dataEventCategory, dataEventAction, dataEventLabel } = _a, rest = __rest(_a, ["as", "tag", "color", "fontWeight", "dataEventCategory", "dataEventAction", "dataEventLabel"]);
+    const asTag = as || tag;
+    const theme = useMantineTheme();
+    return (React__default.createElement(Text, Object.assign({ as: asTag, color: color || theme.colors.gray[8], "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, weight: fontWeight === 'semibold' ? 'semiBold' : 'bold', size: tag }, rest)));
+};
+
+export { Heading as H };

package/build/esm/index-350e8f5b.js

@@ -0,0 +1,124 @@
+import React__default, { useState, useEffect, useMemo, useCallback } from 'react';
+import { v as StyledDivider, w as useStyles } from './index.styles-5add27c5.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-1b1533a9.js';
+import { u as useTranslations } from './useTranslations-4f1db486.js';
+import { B as Button } from './index-32e53dac.js';
+import { P as PATHS } from './paths-a8204db4.js';
+import { a as LOCALIZED_SLUGS } from './constants-b77ffe3d.js';
+import { d as domainLocales } from './index-e612be9c.js';
+import { b as callApi, h as getCarePath } from './utils-70718e9c.js';
+import { i as isProduction } from './isProduction-0ea904dd.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-41bf860a.js

@@ -0,0 +1,151 @@
+import { a as __awaiter, _ as __rest } from './tslib.es6-1b1533a9.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-32e53dac.js';
+import '@mantine/dates';
+import { c as CDN_ADDRESS } from './index-e612be9c.js';
+import { L as LOCALE } from './Subot-3289bd8e.js';
+import './index-8858383e.js';
+import './index-3474401a.js';
+import './theme-e74db08c.js';
+import { u as useTranslations } from './useTranslations-4f1db486.js';
+import '@mantine/hooks';
+import './utils-2c484c05.js';
+import { M as MAPPED_LOCALE } from './utils-3a2a47d9.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 };

package/build/esm/index-4aa8e518.js

@@ -0,0 +1,116 @@
+import { _ as __rest } from './tslib.es6-1b1533a9.js';
+import React__default, { useMemo, useState, useEffect } from 'react';
+import { L as LOCALE } from './Subot-3289bd8e.js';
+import { C as CommonGAssets } from './index-8858383e.js';
+import { t as theme } from './theme-e74db08c.js';
+import styled from 'styled-components';
+import { I as ImageWrap, f as CentralCarousel } from './index-32e53dac.js';
+import { T as Text } from './index-7af5242a.js';
+
+const StyledIconContainer = styled.div `
+  display: inline-flex;
+  overflow: hidden;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+
+  border: 1px solid #e4e8ec;
+  background-color: ${(props) => props.backgroundColor || theme.colors.white};
+  border-radius: ${(props) => props.borderRadius || '50%'};
+  & > * {
+    width: ${(props) => props.iconSize}px;
+    height: ${(props) => props.iconSize}px;
+  }
+`;
+const StyledPillContainer = styled.div `
+  display: inline-block;
+  height: 108px;
+  background-color: ${(props) => props.theme.colors.white};
+  border-radius: 60px;
+  cursor: pointer;
+  &.selected-week-pill {
+    background-color: ${(props) => props.theme.colors.pink100};
+  }
+
+  & > div:first-child {
+    margin: 4px 4px 0;
+  }
+
+  & > p {
+    margin-top: 8px;
+    text-align: center;
+  }
+
+  & > * {
+    pointer-events: none;
+  }
+`;
+
+const LONG_TITLE_LOCALE = [LOCALE.Myanmar, LOCALE.Taiwan];
+const Pill = (_a) => {
+    var { icon, name, className, locale = 'en-PH', dataEventCategory, dataEventAction, dataEventLabel, onSelect } = _a, rest = __rest(_a, ["icon", "name", "className", "locale", "dataEventCategory", "dataEventAction", "dataEventLabel", "onSelect"]);
+    const isSelected = useMemo(() => className === null || className === void 0 ? void 0 : className.includes('selected-week-pill'), [className]);
+    return (React__default.createElement(StyledPillContainer, Object.assign({ onClick: onSelect, className: className
+            ? 'week-pill'.concat(' non-pointer-event-child ', className)
+            : 'week-pill non-pointer-event-child', "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, rest),
+        React__default.createElement(StyledIconContainer, { size: 64, iconSize: 40, backgroundColor: theme.colors.white },
+            React__default.createElement(ImageWrap, { src: icon || CommonGAssets.getAssetPath('week_default.png'), alt: `week ${name}` })),
+        isSelected ? (React__default.createElement(Text, Object.assign({ type: "semiBold", size: "n1", color: theme.colors.gray800 }, (LONG_TITLE_LOCALE.includes(locale) && {
+            style: { fontSize: '10px' },
+        })), name)) : (React__default.createElement(Text, Object.assign({ size: "n1", color: theme.colors.gray600 }, (LONG_TITLE_LOCALE.includes(locale) && {
+            style: { fontSize: '10px' },
+        })), name))));
+};
+
+const StyledPill = styled(Pill) `
+  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08);
+`;
+const StyledSlide = styled(CentralCarousel.Slide) `
+  cursor: pointer;
+  > div * {
+    pointer-events: none;
+  }
+`;
+const StyledCarousel = styled(CentralCarousel) `
+  .centerred-pill-wrapper {
+    padding: 16px 0;
+  }
+`;
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const PillCarousel = (_a) => {
+    var { data, isMobile, onSlideChange, pillProps, locale = LOCALE.Vietnam, blurFromIndex, blurLength } = _a, rest = __rest(_a, ["data", "isMobile", "onSlideChange", "pillProps", "locale", "blurFromIndex", "blurLength"]);
+    const sliderProps = {
+        withControls: !isMobile,
+        slideGap: 16,
+        blurFromCenter: true,
+        blurFromIndex: blurFromIndex || (isMobile ? 2 : 4),
+        blurLength: blurLength || (isMobile ? 1 : 3),
+        onSlideChange,
+    };
+    const [currentUrl, setCurrentUrl] = useState('');
+    useEffect(() => {
+        setCurrentUrl(window.location.href);
+    }, []);
+    return (React__default.createElement(StyledCarousel, Object.assign({}, sliderProps, rest, { selectSlideWhenClick: true, previousControlIcon: React__default.createElement(Arrow, { currentUrl: currentUrl }), nextControlIcon: React__default.createElement(Arrow, { currentUrl: currentUrl, isRight: true }) }), (centerSlide) => data.map((pill, idx) => (React__default.createElement(StyledSlide, Object.assign({ key: idx, onClick: onSlideChange, "data-event-category": "Health Tool", "data-event-action": "Pregnancy Week Click", "data-event-label": currentUrl, innerSlideProps: {
+            'data-event-category': 'Health Tool',
+            'data-event-action': 'Pregnancy Week Click',
+            'data-event-label': currentUrl,
+        } }, pillProps),
+        React__default.createElement("div", { className: "centerred-pill-wrapper" },
+            React__default.createElement(StyledPill, { "data-event-category": "Health Tool", "data-event-action": "Fetal Week Click", "data-event-label": currentUrl, locale: locale, name: pill.name, icon: pill.icon, className: idx === centerSlide
+                    ? 'selected-week-pill pointer-event-child-none'
+                    : 'pointer-event-child-none' })))))));
+};
+const Arrow = ({ isRight, currentUrl, }) => {
+    return (React__default.createElement("svg", { viewBox: "0 0 15 15", fill: "none", width: "16", height: "16", style: isRight
+            ? { transform: 'rotate(-90deg)' }
+            : { transform: 'rotate(90deg)' }, "data-event-category": "Health Tool", "data-event-action": "Pregnancy Week Arrow Click", "data-event-label": currentUrl, className: "pointer-event-child-none" },
+        React__default.createElement("path", { d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" })));
+};
+
+export { PillCarousel as P };

package/build/esm/index-4fe2b03f.js

@@ -0,0 +1,32 @@
+import { _ as __rest } from './tslib.es6-1b1533a9.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-32e53dac.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-6ea6484e.js

@@ -0,0 +1,29 @@
+import { _ as __rest } from './tslib.es6-1b1533a9.js';
+import React__default from 'react';
+import { B as Button$1 } from './index-32e53dac.js';
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Button = (_a) => {
+    var { size, color = 'primary', isDisabled, isBlock, title, onClick, icon, iconPosition = 'left', children, isLoading = false, loadingText, dataEventCategory, dataEventAction, dataEventLabel, dataProductChannel, dataProductSku, dataProductBrand, dataProductName, dataProductPrice, dataProductCategory, dataProductPosition, type } = _a, rest = __rest(_a, ["size", "color", "isDisabled", "isBlock", "title", "onClick", "icon", "iconPosition", "children", "isLoading", "loadingText", "dataEventCategory", "dataEventAction", "dataEventLabel", "dataProductChannel", "dataProductSku", "dataProductBrand", "dataProductName", "dataProductPrice", "dataProductCategory", "dataProductPosition", "type"]);
+    const gtmProps = {
+        'data-event-category': dataEventCategory,
+        'data-event-action': dataEventAction,
+        'data-event-label': dataEventLabel,
+        'data-product-channel': dataProductChannel,
+        'data-product-sku': dataProductSku,
+        'data-product-brand': dataProductBrand,
+        'data-product-name': dataProductName,
+        'data-product-price': dataProductPrice,
+        'data-product-category': dataProductCategory,
+        'data-product-position': dataProductPosition,
+    };
+    return (React__default.createElement(Button$1, Object.assign({}, gtmProps, { size: size, variant: color === 'transparent' ? 'white' : color === 'danger' ? 'error' : color, disabled: isDisabled, onClick: (evt) => {
+            !isLoading && !isDisabled && onClick && onClick(evt);
+        }, title: title, loading: isLoading, type: type, leftIcon: iconPosition === 'left' ? icon : undefined, rightIcon: iconPosition === 'right' ? icon : undefined, 
+        // hasIcon={!!icon || undefined}
+        w: isBlock ? '100%' : undefined, p: isBlock ? '12px auto' : undefined }, rest), isLoading ? loadingText || children : children));
+};
+
+export { Button as B };