@hhgtech/hhg-components 1.29.79 → 1.29.81

package/build/esm/{index-c5b3a3ba.js → index-2774583d.js}

@@ -1,186 +1,45 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-efad16cf.js';
-import React__default, { useState, useMemo, useRef, Fragment, useEffect, useContext, useCallback } from 'react';
-import { F as Flag, a as Avatar, B as Button$1, c as Input } from './index-e2d856fc.js';
-import styled from '@emotion/styled';
-import { t as theme } from './theme-eb1b39f6.js';
-import { T as Text } from './index-b2eed677.js';
-import { C as CommonGAssets } from './index-92fd8661.js';
-import { C as CARE_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, b as CARE_BOOKING_LOCALES, d as domainLocales, L as LOCALE_SPECS, S as STATIC_PAGES } from './index-ef96fd13.js';
-import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-65565106.js';
-import { a as getCurrentSsoUrl, g as getCurrentBaseUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, d as getCareApiDomain } from './routing-e7ff0e08.js';
-import { P as Popup, U as UserAvatar, a as formatCommunity, b as formatPost } from './index-f672661d.js';
-import { L as Logo } from './index-687f9ee4.js';
-import { u as useTranslations } from './useTranslations-b8c49c9b.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-761239c7.js';
+import React__default, { useMemo, useRef, useState, Fragment, useEffect, useContext, useCallback } from 'react';
+import { i as isInternalLink, L as LanguageSwitcher } from './index-996f7caf.js';
+import { b as CARE_LOCALES, T as TOGETHER_LOCALES, E as ECOM_LOCALES, c as CARE_BOOKING_LOCALES, d as domainLocales, L as LOCALE_SPECS, S as STATIC_PAGES } from './index-bef3c9bd.js';
+import { n as normalizeLinkSlash, a as normalizeLink } from './normalizeLink-d6f57223.js';
+import { a as getCurrentSsoUrl, g as getCurrentBaseUrl, b as getTogetherApiDomain, c as getDiscoverApiDomain, d as getCareApiDomain } from './routing-bebdc8b7.js';
+import { P as Popup, a as formatCommunity, b as formatPost } from './dataTransform-3e8e25ba.js';
+import { L as Logo } from './index-1ecbcf21.js';
+import { u as useTranslations } from './useTranslations-fbf6a6ab.js';
 import throttle from 'lodash/throttle';
 import { createStyles, Box, Indicator, Portal, useMantineTheme } from '@mantine/core';
+import { a as Avatar, c as Input } from './index-21eac858.js';
 import '@mantine/dates';
-import { L as LOCALE } from './index-877eed06.js';
-import './useMantineLocale-bcfdeb0c.js';
-import './translationsContext-dfb42bf8.js';
+import { L as LOCALE } from './index-e3787b20.js';
+import { C as CommonGAssets } from './index-78255d6c.js';
+import './useMantineLocale-4fb67342.js';
+import { T as Text } from './index-c200bff6.js';
+import { B as Button$1 } from './index-2b9213cf.js';
+import { t as theme } from './theme-f18c2351.js';
+import './translationsContext-f3d1a7bd.js';
 import formatString from 'string-format';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-0d590d5e.js';
-import { L as LOCALISED_SLUGS } from './constants-78d473b4.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-f8761b9d.js';
+import { L as LOCALISED_SLUGS } from './constants-ebf80e5f.js';
+import styled from '@emotion/styled';
 import { User } from '@hhgtech/icons/core';
-import { s as setDefaultClass, j as domainLocalesMarryBaby } from './defaultClassWrapper-fcdfc7a3.js';
-import { C as ChevronDown } from './ChevronDown-5f18ca6b.js';
+import { s as setDefaultClass } from './defaultClassWrapper-31caf23b.js';
+import { C as ChevronDown } from './ChevronDown-74267eb8.js';
 import { css } from '@emotion/react';
-import { B as Button } from './index-2a4e676a.js';
-import { a as LOCALIZED_SLUGS } from './index-122dd8ee.js';
-import { H as Heading } from './index-7c6316a6.js';
-import { I as Indicator$1 } from './index-ec38e886.js';
-import { u as useIsInit } from './useIsInit-f341c0e8.js';
-import './index.styles-bff4ac47.js';
-import './utils-45e55363.js';
-import './index-40fc06d9.js';
-import './index.styled-eb1001c3.js';
-import './index-4687d5f8.js';
-import { ArrowRight } from '@hhgtech/icons/other';
+import { B as Button } from './index-1da2ca0b.js';
+import { i as domainLocalesMarryBaby } from './utils-d5a0b58f.js';
+import { L as LOCALIZED_SLUGS } from './constants-f77fc231.js';
+import { H as Heading } from './index-73301602.js';
+import { I as Indicator$1 } from './index-780a08de.js';
+import { u as useIsInit } from './useIsInit-ee864235.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { C as Container } from './index-931414db.js';
+import { U as UserAvatar } from './index-703205e3.js';
+import { ArrowRight } from '@hhgtech/icons/other';
+import { C as Container } from './index-782fed08.js';
 import debounce from 'lodash/debounce';
-import { g as getDataWithCache } from './core-2715a7c7.js';
-
-const ALLOW_DOMAIN_URL = [
-    'hellobacsi.com',
-    'hellosehat.com',
-    'hellodoktor.com',
-    'hellokrupet.com',
-    'hellodoctor.com.ph',
-    'hellokhunmor.com',
-    'hellosayarwon.com',
-    'helloyishi.com.tw',
-    'helloswasthya.com',
-    'marrybaby.vn',
-    'hellohealth.questionpro.com',
-    'hellobacsivn.page.link',
-];
-const isInternalLink = (url = '') => {
-    return ALLOW_DOMAIN_URL.some((o) => new URL(url).origin.endsWith(o));
-};
-
-const StyledLanguageChangeLink = styled.a `
-  display: inline-flex;
-  position: relative;
-  flex-direction: row;
-  align-items: center;
-  padding: 7px 11px;
-  gap: 2px;
-
-  background: ${theme.colors.white};
-  border: 1px solid ${theme.colors.neutral100};
-  border-radius: 20px;
-
-  color: ${theme.colors.gray600};
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 18px;
-  text-decoration: none;
-
-  cursor: pointer;
-`;
-
-const StyledSelectionContainer = styled.div `
-  position: relative;
-  display: inline-block;
-`;
-const StyledSelectionLabel = styled.div `
-  position: relative;
-`;
-const StyleSelectionPopup = styled.div `
-  position: absolute;
-  z-index: 21;
-  top: 100%;
-  right: 0;
-  width: 327px;
-  padding: 8px;
-  background: white;
-  border-radius: 4px;
-  filter: drop-shadow(0px 8px 40px rgba(0, 0, 0, 0.1));
-
-  &[data-is-open='false'] {
-    display: none;
-  }
-  &[data-show-indicator='true'] {
-    &:before {
-      position: absolute;
-      right: 11px;
-      bottom: 100%;
-      width: 0;
-      height: 0;
-      border: 0.5rem solid transparent;
-      border-top: none;
-      border-bottom-color: #fff;
-      content: '';
-      filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
-    }
-  }
-`;
-const StyledOption = styled.div `
-  display: flex;
-  height: 40px;
-  align-items: center;
-  justify-content: space-between;
-
-  padding: 0 16px;
-  border-radius: ${theme.borderRadius};
-  cursor: pointer;
-
-  .check-icon {
-    width: 16px;
-    height: 16px;
-  }
-  &[data-selected='false'] {
-    background-color: ${theme.colors.gray100};
-  }
-`;
-const StyledPopupBackground = styled.div `
-  position: fixed;
-  z-index: 20;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  cursor: default;
-`;
-
-const TooltipSelection = ({ options, label, labelRenderer, selected, onChange, showSelected = true, style = {}, showIndicator = true, }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(StyledSelectionContainer, null,
-            React__default.createElement(StyledSelectionLabel, { onClick: () => setIsOpen((value) => !value) },
-                label || (labelRenderer === null || labelRenderer === void 0 ? void 0 : labelRenderer(isOpen)) || null,
-                React__default.createElement(StyleSelectionPopup, { "data-is-open": isOpen, style: style, "data-show-indicator": showIndicator }, options.map((option, index) => (React__default.createElement(StyledOption, { key: index, "data-selected": showSelected && selected === option.value, onClick: (e) => {
-                        if (selected !== option.value) {
-                            onChange(option.value);
-                            setIsOpen((value) => !value);
-                        }
-                        e.stopPropagation();
-                    } },
-                    React__default.createElement(Text, { size: "p3" }, option.label),
-                    showSelected && selected === option.value && (React__default.createElement("img", { src: CommonGAssets.getAssetPath('check.svg'), alt: "check", className: "check-icon", loading: "lazy" })))))))),
-        isOpen && (React__default.createElement(StyledPopupBackground, { onClick: () => setIsOpen(false) }))));
-};
-
-const LanguageSwitcher = ({ languageOptions, locale }) => {
-    var _a, _b;
-    const selectedLanguage = languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.find((option) => option.locale === locale);
-    if (!(languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.length)) {
-        return null;
-    }
-    return (React__default.createElement(TooltipSelection, { options: languageOptions, selected: selectedLanguage.value, label: React__default.createElement(LanguageLabel, { locale: locale, label: selectedLanguage.label || ((_b = (_a = locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) }), onChange: (href) => {
-            if (typeof window !== 'undefined') {
-                window.location.href = href;
-            }
-        }, style: { width: 100 }, showSelected: true, showIndicator: false }));
-};
-const LanguageLabel = ({ locale, label, href, }) => {
-    var _a, _b, _c;
-    return (React__default.createElement(StyledLanguageChangeLink, { href: href },
-        React__default.createElement(Flag, { country: (_b = (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase(), width: 16, height: 16, rounded: true, language: (_c = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _c === void 0 ? void 0 : _c[0] }),
-        React__default.createElement("span", null, label)));
-};
+import { g as getDataWithCache } from './core-c72e0ff5.js';
 
 const getEcomUrl = ({ path, locale, }) => {
     var _a;
@@ -2974,13 +2833,13 @@ const ItemNavButton = ({ item, color = 'blue' }) => {
                 });
             }
             if (item.id === 'care') {
-                import('./doctor-1d62f054.js').then((data) => {
+                import('./doctor-8a07ca44.js').then((data) => {
                     if (data === null || data === void 0 ? void 0 : data.default)
                         setIconJson(() => data.default);
                 });
             }
             else if (item.id === 'ecom') {
-                import('./cart-5f758c33.js').then((data) => {
+                import('./cart-f961dadc.js').then((data) => {
                     if (data === null || data === void 0 ? void 0 : data.default)
                         setIconJson(() => data.default);
                 });
@@ -3415,4 +3274,4 @@ const getNavMenuContentWithCache = (locale) => __awaiter(void 0, void 0, void 0,
     return (yield getDataWithCache('nav-menu-content', () => getNavMenuContent(locale || 'en-PH'), (data) => { var _a, _b; return !!((_b = (_a = data === null || data === void 0 ? void 0 : data.categories) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length); })) || {};
 });
 
-export { LanguageSwitcher as L, NavigationV2 as N, ProfileNavigation as P, getNavMenuContentWithCache as a, NavigationLogoutPopup as b, NavigationProfileButton as c, getTogetherUserPostsApiPath as d, getNavMenuContent as g, isInternalLink as i };
+export { NavigationV2 as N, ProfileNavigation as P, getNavMenuContentWithCache as a, NavigationLogoutPopup as b, NavigationProfileButton as c, getTogetherUserPostsApiPath as d, getNavMenuContent as g };

package/build/esm/index-29d04985.js

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { I as Icon } from './index-69248434.js';
+import { u as useTranslations } from './useTranslations-fbf6a6ab.js';
+
+var styles = {"loading":"tliWyii"};
+
+const Loading = ({ className, theme, hideText }) => {
+    const { t } = useTranslations();
+    return (React__default.createElement("div", { className: `${styles.loading} ${className}` },
+        React__default.createElement(Icon.Spinner, { isMarryBaby: theme === 'marryBaby' }),
+        !hideText && t('loading')));
+};
+
+export { Loading as L };

package/build/esm/index-2b9213cf.js

@@ -0,0 +1,195 @@
+import { _ as __rest } from './tslib.es6-761239c7.js';
+import React__default from 'react';
+import { createStyles, useMantineTheme, Button as Button$1 } from '@mantine/core';
+
+const ANIMATION_DURATION = '100ms';
+
+var useStyles = createStyles((_theme, _params) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { other } = _theme;
+    const { template } = other;
+    const { size, variant, skipHover, isError, isSuccess, color, children, theme: themeProp, } = _params;
+    const isMb = template === 'mb' || themeProp === 'marryBaby';
+    const finalColor = color || (themeProp && isMb ? 'mb' : _theme.primaryColor);
+    const isHexColor = finalColor.startsWith('#');
+    const hexColor50 = isHexColor
+        ? _theme.fn.lighten(color, 0.9)
+        : ((_b = (_a = _theme.colors) === null || _a === void 0 ? void 0 : _a[finalColor]) === null || _b === void 0 ? void 0 : _b[0]) || '';
+    const hexColor = isHexColor
+        ? finalColor
+        : (_d = (_c = _theme.colors) === null || _c === void 0 ? void 0 : _c[finalColor]) === null || _d === void 0 ? void 0 : _d[_theme.fn.primaryShade()];
+    const hoverHexColor = isHexColor
+        ? _theme.fn.darken(color, 0.05)
+        : (_f = (_e = _theme.colors) === null || _e === void 0 ? void 0 : _e[finalColor]) === null || _f === void 0 ? void 0 : _f[_theme.fn.primaryShade() + 1];
+    return {
+        root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ transition: `all ${ANIMATION_DURATION} ease-in-out`, '&:focus': {
+                outline: 'none',
+            } }, (!children && {
+            paddingLeft: '10px',
+            paddingRight: '10px',
+            '.mantine-Button-icon': {
+                margin: 0,
+            },
+        })), (() => {
+            switch (size) {
+                case 'xl':
+                    return {
+                        height: 56,
+                        fontWeight: 600,
+                        fontSize: isMb ? '14px' : '16px',
+                        lineHeight: '24px',
+                    };
+                case 'lg':
+                    return {
+                        height: 48,
+                        fontWeight: 600,
+                        fontSize: isMb ? '14px' : '16px',
+                        lineHeight: '24px',
+                    };
+                case 'md':
+                    return {
+                        height: 40,
+                        fontWeight: 600,
+                        fontSize: '14px',
+                        lineHeight: '22px',
+                    };
+                case 'sm':
+                    return {
+                        height: 32,
+                        fontWeight: 600,
+                        fontSize: isMb ? '12px' : '14px',
+                        lineHeight: '22px',
+                        paddingLeft: '16px',
+                        paddingRight: '16px',
+                    };
+                case 'xs':
+                    return {
+                        height: 24,
+                        fontWeight: 600,
+                        fontSize: '12px',
+                        lineHeight: '18px',
+                        paddingLeft: '8px',
+                        paddingRight: '8px',
+                    };
+            }
+        })()), (() => {
+            switch (variant) {
+                case 'primary': {
+                    return Object.assign({ color: _theme.white, backgroundColor: hexColor }, (!skipHover && {
+                        '&:hover': {
+                            backgroundColor: hoverHexColor,
+                        },
+                    }));
+                }
+                case 'secondary':
+                    return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid ${hexColor}` }, (!skipHover && {
+                        '&:hover': {
+                            backgroundColor: hexColor50,
+                            border: `1px solid ${hexColor}`,
+                        },
+                    }));
+                case 'white':
+                    return {
+                        color: hexColor,
+                        backgroundColor: 'transparent',
+                        border: `1px solid transparent`,
+                        '&:hover': {
+                            backgroundColor: 'transparent',
+                            borderColor: `transparent`,
+                        },
+                    };
+                case 'tertiary':
+                    return {
+                        color: _theme.colors.gray[8],
+                        backgroundColor: _theme.white,
+                        border: `1px solid ${_theme.colors.neutral[2]}`,
+                        '&:hover': Object.assign({}, (!skipHover
+                            ? {
+                                backgroundColor: _theme.colors.neutral[0],
+                                border: `1px solid ${_theme.colors.neutral[0]}`,
+                            }
+                            : {
+                                backgroundColor: _theme.white,
+                                border: `1px solid ${_theme.colors.neutral[2]}`,
+                            })),
+                    };
+                case 'light': {
+                    return {
+                        color: hexColor,
+                        backgroundColor: hexColor50,
+                        border: `1px solid transparent`,
+                        '&:hover': Object.assign({}, (!skipHover
+                            ? {
+                                backgroundColor: _theme.white,
+                                border: `1px solid ${hexColor50}`,
+                            }
+                            : {
+                                backgroundColor: hexColor50,
+                                border: `1px solid transparent`,
+                            })),
+                    };
+                }
+                case 'ghost':
+                    return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid transparent` }, (!skipHover && {
+                        '&:hover': {
+                            backgroundColor: hexColor50,
+                            border: `1px solid transparent`,
+                        },
+                    }));
+            }
+        })()), { '&[data-disabled]': {
+                backgroundColor: _theme.colors.gray[1],
+                color: _theme.colors.gray[4],
+            } }), (isError
+            ? Object.assign({ color: _theme.colors.red[6], backgroundColor: _theme.white, border: `1px solid ${_theme.colors.red[6]}` }, (!skipHover && {
+                '&:hover': {
+                    backgroundColor: _theme.colors.red[0],
+                    border: `1px solid ${_theme.colors.red[6]}`,
+                },
+            })) : {})), (isSuccess
+            ? Object.assign({ color: _theme.colors.green[8], backgroundColor: _theme.colors.green[0] }, (!skipHover && {
+                '&:hover': {
+                    backgroundColor: _theme.colors.green[0],
+                },
+            })) : {})),
+    };
+});
+
+const MAPPED_VARIANT = {
+    primary: 'filled',
+    secondary: 'outline',
+    tertiary: 'default',
+    light: 'light',
+    ghost: 'subtle',
+    error: 'outline',
+    white: 'white',
+    success: 'subtle',
+};
+function filterObject(obj) {
+    const ret = {};
+    Object.keys(obj)
+        .filter((key) => obj[key] !== undefined)
+        .forEach((key) => (ret[key] = obj[key]));
+    return ret;
+}
+const Button = (props) => {
+    var _a, _b;
+    const theme = useMantineTheme();
+    const _c = Object.assign(Object.assign({}, (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.Button) === null || _b === void 0 ? void 0 : _b.defaultProps), filterObject(props)), { variant, size, color, skipHover, className, dataEventCategory, dataEventAction, dataEventLabel, children, theme: themeProp } = _c, rest = __rest(_c, ["variant", "size", "color", "skipHover", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "children", "theme"]);
+    const isError = variant === 'error';
+    const { classes, cx } = useStyles({
+        variant,
+        size,
+        color,
+        skipHover,
+        isError,
+        isSuccess: variant === 'success',
+        children,
+        theme: themeProp,
+    });
+    return (React__default.createElement(Button$1, Object.assign({ className: cx(className, variant), classNames: {
+            root: classes.root,
+        }, variant: MAPPED_VARIANT[variant], "data-variant": variant, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, rest), children));
+};
+
+export { ANIMATION_DURATION as A, Button as B };