@hhgtech/hhg-components 1.28.68 → 1.28.69

package/build/i18n.js

@@ -1 +1,64 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./translationsContext-6a4e467c.js"),s=require("react"),t=require("./i18n-values/en-PH.js"),a=require("./i18n-values/hi-IN.js"),r=require("./i18n-values/id-ID.js"),n=require("./i18n-values/km-KH.js"),u=require("./i18n-values/ms-MY.js"),i=require("./i18n-values/my-MM.js"),l=require("./i18n-values/th-TH.js"),o=require("./i18n-values/tl-PH.js"),d=require("./i18n-values/vi-VN.js"),v=require("./i18n-values/vi-VN_MB.js"),c=require("./i18n-values/zh-TW.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=f(s);const q={"en-PH":t.default,"vi-VN":d.default,"hi-IN":a.default,"id-ID":r.default,"ms-MY":u.default,"my-MM":i.default,"km-KH":n.default,"zh-TW":c.default,"th-TH":l.default,"tl-PH":o.default,"vi-VN_MB":v.default};exports.TranslationsContext=e.TranslationsContext,exports.TranslationsProvider=({locale:t="en-PH",overrides:a,overrideCurrentLocale:r,children:n,shouldLoadTranslation:u=!0,loader:i=null,onTranslationsLoaded:l})=>{const o=a&&a[t]||r,[d,v]=s.useState((()=>Object.assign(Object.assign({},o),u?q[t]:{})));s.useEffect((()=>{v(Object.assign(Object.assign({},o),u?q[t]:{}))}),[u,t]);const c=s.useMemo((()=>d?{locale:t,values:d}:null),[t,d]);return s.useEffect((()=>{l&&Object.keys(d).length&&l(d)}),[d]),j.default.createElement(e.TranslationsContext.Provider,{value:c},c?n:i)},exports.translationsMap=q;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var translationsContext = require('./translationsContext-950334bf.js');
+var React = require('react');
+var i18nValues_enPH = require('./i18n-values/en-PH.js');
+var i18nValues_hiIN = require('./i18n-values/hi-IN.js');
+var i18nValues_idID = require('./i18n-values/id-ID.js');
+var i18nValues_kmKH = require('./i18n-values/km-KH.js');
+var i18nValues_msMY = require('./i18n-values/ms-MY.js');
+var i18nValues_myMM = require('./i18n-values/my-MM.js');
+var i18nValues_thTH = require('./i18n-values/th-TH.js');
+var i18nValues_tlPH = require('./i18n-values/tl-PH.js');
+var i18nValues_viVN = require('./i18n-values/vi-VN.js');
+var i18nValues_viVN_MB = require('./i18n-values/vi-VN_MB.js');
+var i18nValues_zhTW = require('./i18n-values/zh-TW.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const translationsMap = {
+    'en-PH': i18nValues_enPH["default"],
+    'vi-VN': i18nValues_viVN["default"],
+    'hi-IN': i18nValues_hiIN["default"],
+    'id-ID': i18nValues_idID["default"],
+    'ms-MY': i18nValues_msMY["default"],
+    'my-MM': i18nValues_myMM["default"],
+    'km-KH': i18nValues_kmKH["default"],
+    'zh-TW': i18nValues_zhTW["default"],
+    'th-TH': i18nValues_thTH["default"],
+    'tl-PH': i18nValues_tlPH["default"],
+    'vi-VN_MB': i18nValues_viVN_MB["default"],
+};
+/**
+ * @deprecated Consider to use TranslationsProviderV2
+ */
+const TranslationsProvider = ({ locale = 'en-PH', overrides, overrideCurrentLocale, children, shouldLoadTranslation = true, loader = null, onTranslationsLoaded, }) => {
+    const overridedValues = (overrides && overrides[locale]) || overrideCurrentLocale;
+    const [values, setValues] = React.useState(() => (Object.assign(Object.assign({}, overridedValues), (shouldLoadTranslation ? translationsMap[locale] : {}))));
+    React.useEffect(() => {
+        setValues(Object.assign(Object.assign({}, overridedValues), (shouldLoadTranslation ? translationsMap[locale] : {})));
+    }, [shouldLoadTranslation, locale]);
+    const contextValue = React.useMemo(() => {
+        if (!values) {
+            return null;
+        }
+        return {
+            locale,
+            values,
+        };
+    }, [locale, values]);
+    React.useEffect(() => {
+        if (onTranslationsLoaded && Object.keys(values).length) {
+            onTranslationsLoaded(values);
+        }
+    }, [values]);
+    return (React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: contextValue }, contextValue ? children : loader));
+};
+
+exports.TranslationsContext = translationsContext.TranslationsContext;
+exports.TranslationsProvider = TranslationsProvider;
+exports.translationsMap = translationsMap;

package/build/i18nV2.js

@@ -1 +1,26 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./translationsContext-6a4e467c.js"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(t);exports.TranslationsContext=e.TranslationsContext,exports.TranslationsProvider=({locale:r="en-PH",values:a,children:o})=>{const l=t.useMemo((()=>a?{locale:r,values:a}:null),[r,a]);return n.default.createElement(e.TranslationsContext.Provider,{value:l},o)};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var translationsContext = require('./translationsContext-950334bf.js');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const TranslationsProvider = ({ locale = 'en-PH', values, children, }) => {
+    const contextValue = React.useMemo(() => {
+        if (!values) {
+            return null;
+        }
+        return {
+            locale,
+            values,
+        };
+    }, [locale, values]);
+    return (React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: contextValue }, children));
+};
+
+exports.TranslationsContext = translationsContext.TranslationsContext;
+exports.TranslationsProvider = TranslationsProvider;

package/build/index-020e6908.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-65e312a5.js');
+var React = require('react');
+var core = require('@mantine/core');
+var constants = require('./constants-8b8bc19f.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Input = (_a) => {
+    var { name, value, errorMessage, isNumerousKeyboard = false, showErrorMessage = true, actionIcon: ActionIcon, displayIcon: DisplayIcon, onActionClick, label, className, onChange, isDisabled, CustomInput, size, style, autoComplete = 'off', type = 'text', inputClassName, trackingAttributes, enterKeyHint } = _a, rest = tslib_es6.__rest(_a, ["name", "value", "errorMessage", "isNumerousKeyboard", "showErrorMessage", "actionIcon", "displayIcon", "onActionClick", "label", "className", "onChange", "isDisabled", "CustomInput", "size", "style", "autoComplete", "type", "inputClassName", "trackingAttributes", "enterKeyHint"]);
+    const _theme = core.useMantineTheme();
+    const gaAttributes = React.useMemo(() => {
+        if (trackingAttributes) {
+            return {
+                'data-event-category': trackingAttributes.dataEventCategory,
+                'data-event-action': trackingAttributes.dataEventAction,
+                'data-event-label': trackingAttributes.dataEventLabel,
+            };
+        }
+        else {
+            return {};
+        }
+    }, [trackingAttributes]);
+    return (React__default["default"].createElement(constants.StyledInput, { "data-size": size, className: className, "data-has-action-icon": !!ActionIcon || undefined, "data-has-display-icon": !!DisplayIcon || undefined, "data-has-error": (errorMessage && errorMessage.length > 0) || undefined, color: _theme.fn.primaryColor(), shadowColor: _theme.colors[_theme.primaryColor][0], style: style },
+        label && (React__default["default"].createElement(constants.Label, { size: "label2", htmlFor: name, className: "inputLabel" }, label)),
+        React__default["default"].createElement("div", { style: { position: 'relative' } },
+            CustomInput ? (CustomInput) : (React__default["default"].createElement("input", Object.assign({ id: name, name: name, onChange: (e) => onChange && onChange(e.target.value), type: type, "aria-label": type, value: value, disabled: isDisabled, autoComplete: autoComplete, inputMode: isNumerousKeyboard || type === 'number' ? 'numeric' : type, pattern: isNumerousKeyboard ? '[0-9]*' : '.*', className: inputClassName, enterKeyHint: enterKeyHint }, gaAttributes, rest))),
+            DisplayIcon && (React__default["default"].createElement(constants.StyledDisplayIcon, { className: "displayIcon" }, DisplayIcon)),
+            ActionIcon && (React__default["default"].createElement(constants.StyledActionIcon, { className: "actionIcon", onClick: onActionClick }, ActionIcon))),
+        errorMessage && errorMessage.length > 0 && showErrorMessage && (React__default["default"].createElement(constants.StyledErrorLabel, { className: "errorLabel" }, errorMessage))));
+};
+
+exports.Input = Input;

package/build/index-0da9b2e8.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-65e312a5.js');
+var React = require('react');
+var theme = require('./theme-fa910869.js');
+var utils = require('./utils-661411f6.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const ArrowRightTail = (_a) => {
+    var { size = 24, color: colorInit = theme.theme.colors.gray600, useCurrentColor, isActive, activeColor = theme.theme.colors.primaryBase } = _a, rest = tslib_es6.__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["default"].createElement("svg", Object.assign({ viewBox: "0 0 18 18", fill: "none" }, props),
+        React__default["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.theme.colors.gray600, useCurrentColor, isActive, isSolid, activeColor = theme.theme.colors.primaryBase } = _a, rest = tslib_es6.__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["default"].createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["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["default"].createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["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.theme.colors.gray600, useCurrentColor, isActive, activeColor = theme.theme.colors.primaryBase } = _a, rest = tslib_es6.__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["default"].createElement("svg", Object.assign({ viewBox: "0 0 19 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["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: utils.Share,
+    Eye: utils.Eye,
+    WhatsApp: utils.WhatsApp,
+    ArrowRightTail,
+    Spinner: utils.Spinner,
+    Cart,
+    CartWithAdd,
+};
+
+exports.Icon = Icon;

package/build/index-11468c00.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-65e312a5.js');
+var React = require('react');
+var core = require('@mantine/core');
+var index$1 = require('./index-3e5fc2d6.js');
+require('@mantine/dates');
+var index = require('./index-5553f9e1.js');
+var Subot = require('./Subot-5fc40fb5.js');
+require('./index-1baaedb0.js');
+require('./index-bc4f4c33.js');
+require('./theme-fa910869.js');
+var useTranslations = require('./useTranslations-e1853417.js');
+require('@mantine/hooks');
+require('./utils-64bd0c42.js');
+var utils = require('./utils-e1513cbc.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const generateGetAddressDetail = (locale) => {
+    return `${index.CDN_ADDRESS}/cities-data-${utils.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] = React.useReducer(reducer, initialState);
+    const { provinceByName, provinces, districts, wards, selectedProvince, selectedDistrict, selectedWard, } = state;
+    const [addressData, setAddressData] = React.useState();
+    React.useEffect(() => {
+        // Simulating the API call to fetch the address data
+        const fetchAddressData = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c;
+            try {
+                const _addressData = yield fetch(generateGetAddressDetail(process.env.UNIFY_LOCALE || Subot.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 = tslib_es6.__rest(_a, ["error", "provinces", "placeholder"]);
+    const { t } = useTranslations.useTranslations();
+    const { provinces, districts, wards, selectedProvince, selectedDistrict, selectedWard, handleProvinceChange, handleDistrictChange, handleWardChange, } = useAddress({ provinces: provincesInit });
+    const [extraInfo, setExtraInfo] = React.useState('');
+    React.useEffect(() => {
+        if (selectedProvince && selectedDistrict && selectedWard && extraInfo) {
+            props.onChange({
+                selectedProvince,
+                selectedDistrict,
+                selectedWard,
+                extraInfo,
+            });
+        }
+        else {
+            props.onChange(null);
+        }
+    }, [selectedProvince, selectedDistrict, selectedWard, extraInfo]);
+    return (React__default["default"].createElement(index$1.Input.Wrapper, Object.assign({ withAsterisk: true }, props),
+        React__default["default"].createElement(core.Stack, null,
+            React__default["default"].createElement(index$1.Select, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.province) || t('onboarding.similac.input.city'), data: provincesInit ? provinces : provinces.sort(), searchable: true, onChange: handleProvinceChange, value: selectedProvince }),
+            React__default["default"].createElement(index$1.Select, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.district) || t('onboarding.similac.input.district'), data: districts.sort(), searchable: true, onChange: handleDistrictChange, value: selectedDistrict, disabled: !selectedProvince }),
+            React__default["default"].createElement(index$1.Select, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.ward) || t('onboarding.similac.input.ward'), searchable: true, data: wards.sort(), value: selectedWard, onChange: handleWardChange, disabled: !selectedProvince || !selectedDistrict }),
+            React__default["default"].createElement(index$1.Input, { placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder.address) || t('onboarding.similac.input.no'), disabled: !selectedProvince || !selectedDistrict || !selectedWard, value: extraInfo, onChange: setExtraInfo, style: { marginBottom: 0 } })),
+        React__default["default"].createElement(core.Input.Error, { size: "md" }, error)));
+};
+
+exports.AddressInput = AddressInput;

package/build/index-117448a5.js

@@ -0,0 +1,133 @@
+'use strict';
+
+var React = require('react');
+var index_styles = require('./index.styles-b822bf42.js');
+var tslib_es6 = require('./tslib.es6-65e312a5.js');
+var useTranslations = require('./useTranslations-e1853417.js');
+var index = require('./index-3e5fc2d6.js');
+var paths = require('./paths-a5643d9e.js');
+var constants = require('./constants-8b8bc19f.js');
+var index$1 = require('./index-5553f9e1.js');
+var utils = require('./utils-661411f6.js');
+var isProduction = require('./isProduction-5ce3a388.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/**
+ * @deprecated Consider to use mantine
+ */
+const Divider = ({ type = 'solid', className, style }) => {
+    return (React__default["default"].createElement(index_styles.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 = tslib_es6.__rest(_a, ["siteType", "role", "title", "styles", "className"]);
+    const { t } = useTranslations.useTranslations();
+    const matchedRole = role ? looselyMatchRole(role) : '';
+    const { classes, cx } = index_styles.useStyles$1(undefined, 
+    // Second argument is responsible for styles api integration
+    { name: 'AuthorBadge', styles });
+    return matchedRole && AuthorLabelTextMapping[matchedRole] ? (React__default["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] = React.useState(valueInit);
+    React.useEffect(() => {
+        setValue(valueInit);
+    }, [valueInit]);
+    return (React__default["default"].createElement("div", { className: styles.container }, choices.map((i, idx) => (React__default["default"].createElement(index.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 = tslib_es6.__rest(_a, ["label", "bookingId", "bookingType", "locale"]);
+    const { t } = useTranslations.useTranslations();
+    const [loading, setLoading] = React.useState(false);
+    const currentUrl = React.useMemo(() => {
+        if (typeof window !== 'undefined') {
+            return window.location.href;
+        }
+        else
+            return '';
+    }, []);
+    const handleOnClick = React.useCallback(() => tslib_es6.__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.PATHS.GET_DOCTOR_DETAIL
+            : bookingType === 'hospital'
+                ? paths.PATHS.GET_HOSPITAL_DETAIL
+                : bookingType === 'service'
+                    ? paths.PATHS.GET_SERVICE_DETAIL
+                    : '';
+        try {
+            setLoading(true);
+            const response = yield utils.callApi(utils.getCarePath(url, {
+                id: bookingId,
+                site: index$1.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 = constants.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 = constants.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 = constants.LOCALIZED_SLUGS[locale]) === null || _r === void 0 ? void 0 : _r.SERVICE,
+                        };
+                window.location.href = `https://${!isProduction.isProduction ? 'discover.' : ''}${index$1.domainLocales[locale]}/care/${result.localSlug}/${result.slug}-${result.id}/`;
+            }
+            else {
+                setLoading(false);
+            }
+        }
+        catch (err) {
+            console.log(err);
+            setLoading(false);
+        }
+    }), []);
+    return bookingId && bookingType ? (React__default["default"].createElement(index.Button, Object.assign({ dataEventCategory: "Care", dataEventAction: "Comment - Quick Booking", dataEventLabel: currentUrl, onClick: handleOnClick, loading: loading }, rest), label || t('careBooking.bookAnAppointment'))) : null;
+};
+
+exports.AuthorBadge = AuthorBadge;
+exports.BookingBtn = BookingBtn;
+exports.BtnChoice = BtnChoice;
+exports.Divider = Divider;

package/build/index-12c07f71.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var styles = {"container":"d76E4SH"};
+
+/**
+ * @deprecated Consider to use mantine
+ */
+const Container = ({ children, className, style, type }) => {
+    return (React__default["default"].createElement("div", { className: `${styles.container} ${className || ''}`, style: style, "data-type": type }, children));
+};
+
+exports.Container = Container;

package/build/index-1a105e87.js

@@ -0,0 +1,123 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-65e312a5.js');
+var React = require('react');
+var Subot = require('./Subot-5fc40fb5.js');
+var index$1 = require('./index-1baaedb0.js');
+var theme = require('./theme-fa910869.js');
+var styled = require('styled-components');
+var index = require('./index-3e5fc2d6.js');
+var index$2 = require('./index-8a95d709.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledIconContainer = styled__default["default"].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.theme.colors.white};
+  border-radius: ${(props) => props.borderRadius || '50%'};
+  & > * {
+    width: ${(props) => props.iconSize}px;
+    height: ${(props) => props.iconSize}px;
+  }
+`;
+const StyledPillContainer = styled__default["default"].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 = [Subot.LOCALE.Myanmar, Subot.LOCALE.Taiwan];
+const Pill = (_a) => {
+    var { icon, name, className, locale = 'en-PH', dataEventCategory, dataEventAction, dataEventLabel, onSelect } = _a, rest = tslib_es6.__rest(_a, ["icon", "name", "className", "locale", "dataEventCategory", "dataEventAction", "dataEventLabel", "onSelect"]);
+    const isSelected = React.useMemo(() => className === null || className === void 0 ? void 0 : className.includes('selected-week-pill'), [className]);
+    return (React__default["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["default"].createElement(StyledIconContainer, { size: 64, iconSize: 40, backgroundColor: theme.theme.colors.white },
+            React__default["default"].createElement(index.ImageWrap, { src: icon || index$1.CommonGAssets.getAssetPath('week_default.png'), alt: `week ${name}` })),
+        isSelected ? (React__default["default"].createElement(index$2.Text, Object.assign({ type: "semiBold", size: "n1", color: theme.theme.colors.gray800 }, (LONG_TITLE_LOCALE.includes(locale) && {
+            style: { fontSize: '10px' },
+        })), name)) : (React__default["default"].createElement(index$2.Text, Object.assign({ size: "n1", color: theme.theme.colors.gray600 }, (LONG_TITLE_LOCALE.includes(locale) && {
+            style: { fontSize: '10px' },
+        })), name))));
+};
+
+const StyledPill = styled__default["default"](Pill) `
+  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08);
+`;
+const StyledSlide = styled__default["default"](index.CentralCarousel.Slide) `
+  cursor: pointer;
+  > div * {
+    pointer-events: none;
+  }
+`;
+const StyledCarousel = styled__default["default"](index.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 = Subot.LOCALE.Vietnam, blurFromIndex, blurLength } = _a, rest = tslib_es6.__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] = React.useState('');
+    React.useEffect(() => {
+        setCurrentUrl(window.location.href);
+    }, []);
+    return (React__default["default"].createElement(StyledCarousel, Object.assign({}, sliderProps, rest, { selectSlideWhenClick: true, previousControlIcon: React__default["default"].createElement(Arrow, { currentUrl: currentUrl }), nextControlIcon: React__default["default"].createElement(Arrow, { currentUrl: currentUrl, isRight: true }) }), (centerSlide) => data.map((pill, idx) => (React__default["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["default"].createElement("div", { className: "centerred-pill-wrapper" },
+            React__default["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["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["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" })));
+};
+
+exports.PillCarousel = PillCarousel;