@hhgtech/hhg-components 1.28.90 → 1.29.0

package/build/esm/{index-80a62f02.js → index-116820df.js}

@@ -1,203 +1,505 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-eb1928b9.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-90c980db.js';
 import * as React from 'react';
 import React__default, { useState, forwardRef, useEffect, Component, useCallback, createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
 import { ArrowDown, ArrowLeft, ArrowRight } from '@hhgtech/icons/other';
-import { createStyles, useMantineTheme, Button as Button$1, Autocomplete, Image, ActionIcon, Select as Select$1, AspectRatio as AspectRatio$1, em, Box, Breadcrumbs as Breadcrumbs$1, Textarea, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Flex, rem, Tabs as Tabs$1, ScrollArea, Popover as Popover$1, Chip } from '@mantine/core';
+import { em, createStyles, useMantineTheme, Button as Button$1, Autocomplete, Image, ActionIcon, Select as Select$1, AspectRatio as AspectRatio$1, Box, Breadcrumbs as Breadcrumbs$1, Textarea, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Flex, rem, Tabs as Tabs$1, ScrollArea, Popover as Popover$1, Chip } from '@mantine/core';
 import { useUncontrolled, useDebouncedValue, useViewportSize, useResizeObserver, useDisclosure, useClickOutside } from '@mantine/hooks';
-import { C as CommonGAssets } from './index-35beacf4.js';
-import dayjs from 'dayjs';
-import { L as LOCALE } from './Subot-6de87f68.js';
-import { B as Breakpoints, M as MediaQueries } from './utils-a1ed9d4d.js';
-import styled from 'styled-components';
+import { C as CommonGAssets } from './index-3a7874fb.js';
+import { B as Breakpoints } from './utils-68130dfd.js';
+import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text, O as OTHER_THEME_CONFIG } from './index-f6cfb6eb.js';
-import { t as theme } from './theme-32fcafc9.js';
-import { I as ISO_FORMAT, s as siteOptions } from './index-8c86c020.js';
+import { T as Text } from './index-a89978b5.js';
+import { L as LOCALE } from './Subot-87ce123a.js';
+import { t as theme } from './theme-872b838b.js';
+import { G as GlobalHeadingStyle } from './useMantineLocale-9509c75a.js';
+import { I as ISO_FORMAT, s as siteOptions } from './index-a225de9a.js';
 import cn from 'classnames';
-import { a as useUniqueId } from './useUniqueId-7e817975.js';
+import { a as useUniqueId } from './useUniqueId-0c2bd684.js';
 import { Check, Plus } from '@hhgtech/icons/core';
 
-const ImageWrap = (_a) => {
-    var { alt, backupSrc, src, placeholderSrc, style, ref } = _a, props = __rest(_a, ["alt", "backupSrc", "src", "placeholderSrc", "style", "ref"]);
-    const [hasError, setHasError] = useState(false);
-    return (React__default.createElement(StyledImage, Object.assign({ loading: "lazy", alt: alt, onError: () => !hasError && setHasError(true), src: hasError ? backupSrc || src : src || backupSrc, style: Object.assign(Object.assign({}, (placeholderSrc
-            ? {
-                backgroundImage: `url(${placeholderSrc})`,
-            }
-            : {})), style), "data-has-placeholder": !!placeholderSrc, ref: ref }, props)));
-};
-const StyledImage = styled.img `
-  &[data-has-placeholder='true'] {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
-`;
+const GlobalButtonStyle = {
+    Button: {
+        defaultProps: {
+            variant: 'primary',
+            size: 'md',
+        },
+    },
+};
 
 const ANIMATION_DURATION = '100ms';
 
-var useStyles$4 = 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`, '&[data-event-category] > *': {
-                pointerEvents: 'none',
-            }, '&:focus': {
-                outline: 'none',
-            } }, (!children && {
-            paddingLeft: '10px',
-            paddingRight: '10px',
-            '.mantine-Button-icon': {
-                margin: 0,
+const GlobalInputStyle = (locale) => {
+    var _a;
+    return ({
+        InputWrapper: {
+            styles: {
+                label: {
+                    display: 'inline-flex',
+                    gap: 4,
+                    marginBottom: '0.25rem',
+                    fontWeight: 600,
+                    fontSize: '14px',
+                    lineHeight: '22px',
+                    color: theme.colors.gray600,
+                },
+                description: {
+                    fontWeight: 400,
+                    fontSize: '12px',
+                    lineHeight: '18px',
+                    color: theme.colors.gray600,
+                    marginBottom: '0.25rem',
+                },
+                error: {
+                    marginTop: '0.25rem',
+                },
             },
-        })), (() => {
-            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]}`,
+        },
+        NumberInput: {
+            defaultProps: {
+                decimalSeparator: (_a = ISO_FORMAT[locale]) === null || _a === void 0 ? void 0 : _a.separator,
+            },
+        },
+        Input: {
+            styles: (_theme, _, { size }) => ({
+                input: {
+                    border: `1px solid ${theme.colors.gray200}`,
+                    transition: `all ${ANIMATION_DURATION} ease-in-out`,
+                    ['&:not(.mantine-Textarea-input)']: Object.assign({}, (() => {
+                        switch (size) {
+                            case 'lg':
+                                return {
+                                    height: 48,
+                                    fontSize: 16,
+                                    minHeight: 'unset',
+                                    lineHeight: '24px',
+                                };
+                            case 'md':
+                                return {
+                                    height: 40,
+                                    fontSize: 14,
+                                    lineHeight: '22px',
+                                    minHeight: 'unset',
+                                };
+                            case 'sm':
+                                return {
+                                    height: 32,
+                                    fontSize: 14,
+                                    lineHeight: '22px',
+                                    minHeight: 'unset',
+                                };
+                        }
+                    })()),
+                    '&:hover': {
+                        border: `1px solid ${_theme.primaryColor}`,
+                        // boxShadow: `0 0 2px 2px ${theme.colors.primary200}`,
+                    },
+                    '&:focus': {
+                        boxShadow: `0px 0px 0px 2px ${_theme.colors[_theme.primaryColor][2]}`,
+                    },
                 },
-            })) : {})), (isSuccess
-            ? Object.assign({ color: _theme.colors.green[8], backgroundColor: _theme.colors.green[0] }, (!skipHover && {
-                '&:hover': {
-                    backgroundColor: _theme.colors.green[0],
+                '&[data-invalid="true"]': {
+                    border: `1px solid ${theme.colors.red600}`,
+                    color: '#000',
                 },
-            })) : {})),
-    };
-});
+            }),
+        },
+    });
+};
 
-const MAPPED_VARIANT = {
-    primary: 'filled',
-    secondary: 'outline',
-    tertiary: 'default',
-    light: 'light',
-    ghost: 'subtle',
-    error: 'outline',
-    white: 'white',
-    success: 'subtle',
+const getGlobalRadioStyle = {
+    Radio: {
+        defaultProps: {
+            size: 'sm',
+            color: 'blue.6',
+        },
+        styles: {
+            radio: {
+                backgroundColor: 'transparent',
+                '&:checked': {
+                    backgroundColor: 'transparent',
+                },
+            },
+        },
+    },
+};
+
+const themeColors = {
+    hb: [
+        '#e3f2ff',
+        '#bcdeff',
+        '#91caff',
+        '#65b5ff',
+        '#45a4ff',
+        '#2b94ff',
+        '#2d87f3',
+        '#2c74df',
+        '#2b62cd',
+        '#2743ad',
+    ],
+    mb: [
+        '#FFE9F1',
+        '#F8CCDC',
+        '#F5B4CB',
+        '#F29CBA',
+        '#EE84AA',
+        '#EB6B99',
+        '#E85388',
+        '#D34C7C',
+        '#BE446F',
+        '#A93D63',
+    ],
+    blue: [
+        '#e3f2ff',
+        '#bcdeff',
+        '#91caff',
+        '#65b5ff',
+        '#45a4ff',
+        '#2b94ff',
+        '#2d87f3',
+        '#2c74df',
+        '#2b62cd',
+        '#2743ad',
+    ],
+    gray: [
+        '#fafafa',
+        '#f2f2f2',
+        '#d9d9d9',
+        '#bfbfbf',
+        '#8c8c8c',
+        '#737373',
+        '#595959',
+        '#404040',
+        '#262626',
+        '#1a1a1a',
+    ],
+    delftGray: [
+        '#F3F3F3',
+        '#EAEAEC',
+        '#D9DAE2',
+        '#B9BAC8',
+        '#9898A9',
+        '#7C7C8F',
+        '#5A5A72',
+        '#3E3F58',
+        '#202135',
+        '#0C0C12',
+    ],
+    neutral: [
+        '#f7f9fc',
+        '#e4e8ec',
+        '#d2d6dc',
+        '#bfc5cc',
+        '#adb3bc',
+        '#9aa2ac',
+        '#87909c',
+        '#757f8c',
+        '#626d7c',
+        '#545E6C',
+    ],
+    green: [
+        '#e0f8ee',
+        '#b3eed5',
+        '#7ce2b9',
+        '#2ed69e',
+        '#00CB8A',
+        '#00C076',
+        '#00B16A',
+        '#009E5C',
+        '#008C50',
+        '#006C39',
+    ],
+    pink: [
+        '#fff1f6',
+        '#fec7dc',
+        '#fec7dc',
+        '#fec2cf',
+        '#fe9dc2',
+        '#fd87b4',
+        '#fd72a7',
+        '#fc5d9a',
+        '#fc488d',
+        '#E92D74',
+    ],
+    violet: [
+        '#F5EDFF',
+        '#E7D2F7',
+        '#D8B7F0',
+        '#CA9CE8',
+        '#BB82E1',
+        '#AD67D9',
+        '#9E4CD1',
+        '#9031CA',
+        '#8116C2',
+        '#63059D',
+    ],
+    yellow: [
+        '#fff8e2',
+        '#ffecb6',
+        '#ffe187',
+        '#ffd658',
+        '#ffcb37',
+        '#ffc326',
+        '#ffb521',
+        '#fea21e',
+        '#fe921d',
+        '#fc7419',
+    ],
+    teal: [
+        '#e0f7fc',
+        '#b1ebf8',
+        '#7ddff3',
+        '#44d1ec',
+        '#00c7e6',
+        '#00bee0',
+        '#00aecd',
+        '#0099b2',
+        '#008599',
+        '#00626c',
+    ],
+    indigol: [
+        '#CEDDF0',
+        '#ACC5E6',
+        '#95B3DA',
+        '#85A6CF',
+        '#6D91BE',
+        '#5F85B5',
+        '#4C77AC',
+        '#35639C',
+        '#284A75',
+        '#1B3250',
+    ],
+    red: [
+        '#fae9e8',
+        '#feccbf',
+        '#FEAA96',
+        '#f44d2c',
+        '#ff6f4d',
+        '#ff5331',
+        '#f44d2c',
+        '#e64728',
+        '#d84023',
+        '#bf331b',
+    ],
+    redViolet: [
+        '#F3EAEB',
+        '#E8D5D7',
+        '#DDC1C4',
+        '#D1ACB0',
+        '#C5979C',
+        '#BA8288',
+        '#AF6D74',
+        '#A35961',
+        '#97444D',
+        '#8C2F39',
+    ],
+};
+const getMantineThemeOverride = (locale, template = 'hb') => {
+    return {
+        defaultRadius: template === 'hb' ? 8 : 16,
+        cursorType: 'pointer',
+        colors: Object.assign(Object.assign(Object.assign({}, themeColors), theme.colors), { toneYellow: '#fff9eb', toneGreen: '#f2fcf7', toneBlue: '#e0e9fb', tonePink: '#ffeaf1' }),
+        primaryColor: template,
+        primaryShade: 6,
+        fontFamily: (locale === LOCALE.Cambodia
+            ? 'Battambang'
+            : locale === LOCALE.Thailand
+                ? 'Noto Sans Thai'
+                : 'Inter') +
+            `, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif`,
+        breakpoints: {
+            xs: em(Breakpoints.BREAK_POINT_SMALL_MOBILE),
+            sm: em(Breakpoints.BREAK_POINT_MOBILE),
+            md: em(Breakpoints.BREAK_POINT_TABLET),
+            lg: em(Breakpoints.BREAK_POINT_PC),
+            xl: em(Breakpoints.BREAK_POINT_LGPC),
+        },
+        components: Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale)), getGlobalRadioStyle), GlobalButtonStyle), GlobalHeadingStyle),
+        other: {
+            template,
+            defaultImage: CommonGAssets.getAssetPath(template === 'mb' ? 'default-image-mb.jpg' : 'default-image.jpg'),
+        },
+    };
+};
+
+const ImageWrap = (_a) => {
+    var { alt, backupSrc, src, placeholderSrc, style, ref } = _a, props = __rest(_a, ["alt", "backupSrc", "src", "placeholderSrc", "style", "ref"]);
+    const [hasError, setHasError] = useState(false);
+    return (React__default.createElement(StyledImage, Object.assign({ loading: "lazy", alt: alt, onError: () => !hasError && setHasError(true), src: hasError ? backupSrc || src : src || backupSrc, style: Object.assign(Object.assign({}, (placeholderSrc
+            ? {
+                backgroundImage: `url(${placeholderSrc})`,
+            }
+            : {})), style), "data-has-placeholder": !!placeholderSrc, ref: ref }, props)));
+};
+const StyledImage = styled.img `
+  &[data-has-placeholder='true'] {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+`;
+
+var useStyles$4 = 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`, '&[data-event-category] > *': {
+                pointerEvents: 'none',
+            }, '&: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 = {};
@@ -564,47 +866,6 @@ const _Select = forwardRef((_a, ref) => {
 const _IconSelect = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
     React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.6665 9.99996C1.6665 5.39163 5.3915 1.66663 9.99984 1.66663C14.6082 1.66663 18.3332 5.39163 18.3332 9.99996C18.3332 14.6083 14.6082 18.3333 9.99984 18.3333C5.3915 18.3333 1.6665 14.6083 1.6665 9.99996ZM12.4083 13.5831C12.7333 13.9081 13.2583 13.9081 13.5833 13.5831C13.9 13.2581 13.9 12.7247 13.5833 12.4081L11.175 9.99973L13.5833 7.5914C13.9083 7.2664 13.9083 6.7414 13.5833 6.4164C13.2583 6.0914 12.7333 6.0914 12.4083 6.4164L10 8.82473L7.59167 6.4164C7.26667 6.0914 6.74167 6.0914 6.41667 6.4164C6.26063 6.57209 6.17293 6.78347 6.17293 7.0039C6.17293 7.22433 6.26063 7.43571 6.41667 7.5914L8.825 9.99973L6.41667 12.4081C6.26063 12.5638 6.17293 12.7751 6.17293 12.9956C6.17293 13.216 6.26063 13.4274 6.41667 13.5831C6.74167 13.9081 7.26667 13.9081 7.59167 13.5831L10 11.1747L12.4083 13.5831Z", fill: "#8C8C8C" })));
 
-// Available locale list https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
-const MAPPED_LOCALE = {
-    [LOCALE.Vietnam]: 'vi',
-    [LOCALE.Cambodia]: 'km',
-    [LOCALE.India]: 'hi',
-    [LOCALE.Indonesia]: 'id',
-    [LOCALE.Malaysia]: 'ms',
-    [LOCALE.Thailand]: 'th',
-    [LOCALE.Taiwan]: 'zh-tw',
-    [LOCALE.PhilippinesTagalog]: 'tl-ph',
-    [LOCALE.PhilippinesEnglish]: 'en',
-    [LOCALE.Myanmar]: 'my',
-};
-const LOCALE_LOADERS = {
-    [LOCALE.Vietnam]: () => import('dayjs/locale/vi.js'),
-    [LOCALE.Cambodia]: () => import('dayjs/locale/km.js'),
-    [LOCALE.India]: () => import('dayjs/locale/hi.js'),
-    [LOCALE.Indonesia]: () => import('dayjs/locale/id.js'),
-    [LOCALE.Malaysia]: () => import('dayjs/locale/ms.js'),
-    [LOCALE.Thailand]: () => import('dayjs/locale/th.js'),
-    [LOCALE.Taiwan]: () => import('dayjs/locale/zh-tw.js'),
-    [LOCALE.PhilippinesTagalog]: () => import('dayjs/locale/tl-ph.js'),
-    [LOCALE.PhilippinesEnglish]: () => import('dayjs/locale/en.js'),
-    [LOCALE.Myanmar]: () => import('dayjs/locale/my.js'),
-};
-const useMantineLocale = (locale) => {
-    const [isLoaded, setIsLoaded] = useState(false);
-    useEffect(() => {
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            setIsLoaded(false);
-            yield ((_a = LOCALE_LOADERS[locale]) === null || _a === void 0 ? void 0 : _a.call(LOCALE_LOADERS));
-            dayjs.locale(MAPPED_LOCALE[locale]);
-            setIsLoaded(true);
-        }))();
-    }, [locale]);
-    return {
-        isLoaded,
-    };
-};
-
 const getIsMobile = () => {
     return (typeof window !== 'undefined' &&
         window.innerWidth < Breakpoints.BREAK_POINT_MOBILE);
@@ -688,392 +949,58 @@ const StyledCarousel = styled(Carousel) `
         90deg,
         rgba(255, 255, 255, 1) 0%,
         rgba(255, 255, 255, 1) 50%,
-        rgba(255, 255, 255, 0) 100%
-      );
-    }
-    &:last-child {
-      padding-left: 24px;
-      background: linear-gradient(
-        270deg,
-        rgba(255, 255, 255, 1) 0%,
-        rgba(255, 255, 255, 1) 50%,
-        rgba(255, 255, 255, 0) 100%
-      );
-    }
-  }
-
-  .mantine-Carousel-container {
-    align-items: center;
-  }
-`;
-
-var useStyles$3 = createStyles((_theme, _params) => {
-    return {
-        root: {
-            color: _params.color ||
-                (_theme.primaryColor === 'hb'
-                    ? _theme.colors.hb[6]
-                    : _theme.fn.primaryColor()),
-            '&[data-event-category] > *': {
-                pointerEvents: 'none',
-            },
-        },
-    };
-});
-
-const Anchor = (_a) => {
-    var { color, styles, className } = _a, rest = __rest(_a, ["color", "styles", "className"]);
-    const { classes, cx } = useStyles$3({ color }, { name: 'Anchor', styles });
-    return React__default.createElement(Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
-};
-
-const BreadcrumbItem = (_a) => {
-    var { children } = _a, rest = __rest(_a, ["children"]);
-    return (React__default.createElement(Anchor, Object.assign({ size: "p4", color: 'gray.8' }, rest), children));
-};
-
-const AspectRatio = (props) => {
-    return (React__default.createElement(AspectRatio$1, Object.assign({ sx: {
-            borderRadius: 4,
-            overflow: 'hidden',
-            '> img': {
-                objectFit: 'contain',
-            },
-        } }, props)));
-};
-
-const GlobalButtonStyle = {
-    Button: {
-        defaultProps: {
-            variant: 'primary',
-            size: 'md',
-        },
-    },
-};
-
-const headingStyles = [
-    { size: '40px', lineHeight: '52px', letterSpacing: '-1.2px' },
-    { size: '32px', lineHeight: '42px', letterSpacing: '-1px' },
-    { size: '26px', lineHeight: '36px', letterSpacing: '-0.8px' },
-    { size: '22px', lineHeight: '32px', letterSpacing: '-0.6px' },
-    { size: '18px', lineHeight: '28px', letterSpacing: '-0.2px' },
-    { size: '16px', lineHeight: '24px', letterSpacing: 0 },
-];
-const headingStylesMBDown = [
-    { size: '26px', lineHeight: '34px', letterSpacing: '-0.9px' },
-    { size: '24px', lineHeight: '32px', letterSpacing: '-0.8px' },
-    { size: '20px', lineHeight: '26px', letterSpacing: '-0.7px' },
-    { size: '18px', lineHeight: '26px', letterSpacing: '-0.6px' },
-    { size: '16px', lineHeight: '24px', letterSpacing: '-0.2px' },
-    { size: '14px', lineHeight: '22px', letterSpacing: '-0.2px' },
-];
-const getHeadingStyles = (mbDown = false) => Object.fromEntries((mbDown ? headingStylesMBDown : headingStyles).map((style, index) => [
-    `h${index + 1}`,
-    {
-        fontSize: style.size,
-        lineHeight: style.lineHeight,
-        letterSpacing: style.letterSpacing,
-    },
-]));
-const GlobalHeadingStyle = {
-    Title: {
-        styles: {
-            root: Object.assign(Object.assign({ fontWeight: OTHER_THEME_CONFIG.fontWeight.bold }, getHeadingStyles()), { [`&${MediaQueries.mbDown}`]: Object.assign({}, getHeadingStyles(true)) }),
-        },
-    },
-};
-
-const GlobalInputStyle = (locale) => {
-    var _a;
-    return ({
-        InputWrapper: {
-            styles: {
-                label: {
-                    display: 'inline-flex',
-                    gap: 4,
-                    marginBottom: '0.25rem',
-                    fontWeight: 600,
-                    fontSize: '14px',
-                    lineHeight: '22px',
-                    color: theme.colors.gray600,
-                },
-                description: {
-                    fontWeight: 400,
-                    fontSize: '12px',
-                    lineHeight: '18px',
-                    color: theme.colors.gray600,
-                    marginBottom: '0.25rem',
-                },
-                error: {
-                    marginTop: '0.25rem',
-                },
-            },
-        },
-        NumberInput: {
-            defaultProps: {
-                decimalSeparator: (_a = ISO_FORMAT[locale]) === null || _a === void 0 ? void 0 : _a.separator,
-            },
-        },
-        Input: {
-            styles: (_theme, _, { size }) => ({
-                input: {
-                    border: `1px solid ${theme.colors.gray200}`,
-                    transition: `all ${ANIMATION_DURATION} ease-in-out`,
-                    ['&:not(.mantine-Textarea-input)']: Object.assign({}, (() => {
-                        switch (size) {
-                            case 'lg':
-                                return {
-                                    height: 48,
-                                    fontSize: 16,
-                                    minHeight: 'unset',
-                                    lineHeight: '24px',
-                                };
-                            case 'md':
-                                return {
-                                    height: 40,
-                                    fontSize: 14,
-                                    lineHeight: '22px',
-                                    minHeight: 'unset',
-                                };
-                            case 'sm':
-                                return {
-                                    height: 32,
-                                    fontSize: 14,
-                                    lineHeight: '22px',
-                                    minHeight: 'unset',
-                                };
-                        }
-                    })()),
-                    '&:hover': {
-                        border: `1px solid ${_theme.primaryColor}`,
-                        // boxShadow: `0 0 2px 2px ${theme.colors.primary200}`,
-                    },
-                    '&:focus': {
-                        boxShadow: `0px 0px 0px 2px ${_theme.colors[_theme.primaryColor][2]}`,
-                    },
-                },
-                '&[data-invalid="true"]': {
-                    border: `1px solid ${theme.colors.red600}`,
-                    color: '#000',
-                },
-            }),
-        },
-    });
-};
+        rgba(255, 255, 255, 0) 100%
+      );
+    }
+    &:last-child {
+      padding-left: 24px;
+      background: linear-gradient(
+        270deg,
+        rgba(255, 255, 255, 1) 0%,
+        rgba(255, 255, 255, 1) 50%,
+        rgba(255, 255, 255, 0) 100%
+      );
+    }
+  }
 
-const getGlobalRadioStyle = {
-    Radio: {
-        defaultProps: {
-            size: 'sm',
-            color: 'blue.6',
-        },
-        styles: {
-            radio: {
-                backgroundColor: 'transparent',
-                '&:checked': {
-                    backgroundColor: 'transparent',
-                },
-            },
-        },
-    },
-};
+  .mantine-Carousel-container {
+    align-items: center;
+  }
+`;
 
-const themeColors = {
-    hb: [
-        '#e3f2ff',
-        '#bcdeff',
-        '#91caff',
-        '#65b5ff',
-        '#45a4ff',
-        '#2b94ff',
-        '#2d87f3',
-        '#2c74df',
-        '#2b62cd',
-        '#2743ad',
-    ],
-    mb: [
-        '#FFE9F1',
-        '#F8CCDC',
-        '#F5B4CB',
-        '#F29CBA',
-        '#EE84AA',
-        '#EB6B99',
-        '#E85388',
-        '#D34C7C',
-        '#BE446F',
-        '#A93D63',
-    ],
-    blue: [
-        '#e3f2ff',
-        '#bcdeff',
-        '#91caff',
-        '#65b5ff',
-        '#45a4ff',
-        '#2b94ff',
-        '#2d87f3',
-        '#2c74df',
-        '#2b62cd',
-        '#2743ad',
-    ],
-    gray: [
-        '#fafafa',
-        '#f2f2f2',
-        '#d9d9d9',
-        '#bfbfbf',
-        '#8c8c8c',
-        '#737373',
-        '#595959',
-        '#404040',
-        '#262626',
-        '#1a1a1a',
-    ],
-    delftGray: [
-        '#F3F3F3',
-        '#EAEAEC',
-        '#D9DAE2',
-        '#B9BAC8',
-        '#9898A9',
-        '#7C7C8F',
-        '#5A5A72',
-        '#3E3F58',
-        '#202135',
-        '#0C0C12',
-    ],
-    neutral: [
-        '#f7f9fc',
-        '#e4e8ec',
-        '#d2d6dc',
-        '#bfc5cc',
-        '#adb3bc',
-        '#9aa2ac',
-        '#87909c',
-        '#757f8c',
-        '#626d7c',
-        '#545E6C',
-    ],
-    green: [
-        '#e0f8ee',
-        '#b3eed5',
-        '#7ce2b9',
-        '#2ed69e',
-        '#00CB8A',
-        '#00C076',
-        '#00B16A',
-        '#009E5C',
-        '#008C50',
-        '#006C39',
-    ],
-    pink: [
-        '#fff1f6',
-        '#fec7dc',
-        '#fec7dc',
-        '#fec2cf',
-        '#fe9dc2',
-        '#fd87b4',
-        '#fd72a7',
-        '#fc5d9a',
-        '#fc488d',
-        '#E92D74',
-    ],
-    violet: [
-        '#F5EDFF',
-        '#E7D2F7',
-        '#D8B7F0',
-        '#CA9CE8',
-        '#BB82E1',
-        '#AD67D9',
-        '#9E4CD1',
-        '#9031CA',
-        '#8116C2',
-        '#63059D',
-    ],
-    yellow: [
-        '#fff8e2',
-        '#ffecb6',
-        '#ffe187',
-        '#ffd658',
-        '#ffcb37',
-        '#ffc326',
-        '#ffb521',
-        '#fea21e',
-        '#fe921d',
-        '#fc7419',
-    ],
-    teal: [
-        '#e0f7fc',
-        '#b1ebf8',
-        '#7ddff3',
-        '#44d1ec',
-        '#00c7e6',
-        '#00bee0',
-        '#00aecd',
-        '#0099b2',
-        '#008599',
-        '#00626c',
-    ],
-    indigol: [
-        '#CEDDF0',
-        '#ACC5E6',
-        '#95B3DA',
-        '#85A6CF',
-        '#6D91BE',
-        '#5F85B5',
-        '#4C77AC',
-        '#35639C',
-        '#284A75',
-        '#1B3250',
-    ],
-    red: [
-        '#fae9e8',
-        '#feccbf',
-        '#FEAA96',
-        '#f44d2c',
-        '#ff6f4d',
-        '#ff5331',
-        '#f44d2c',
-        '#e64728',
-        '#d84023',
-        '#bf331b',
-    ],
-    redViolet: [
-        '#F3EAEB',
-        '#E8D5D7',
-        '#DDC1C4',
-        '#D1ACB0',
-        '#C5979C',
-        '#BA8288',
-        '#AF6D74',
-        '#A35961',
-        '#97444D',
-        '#8C2F39',
-    ],
-};
-const getMantineThemeOverride = (locale, template = 'hb') => {
+var useStyles$3 = createStyles((_theme, _params) => {
     return {
-        defaultRadius: template === 'hb' ? 8 : 16,
-        cursorType: 'pointer',
-        colors: Object.assign(Object.assign(Object.assign({}, themeColors), theme.colors), { toneYellow: '#fff9eb', toneGreen: '#f2fcf7', toneBlue: '#e0e9fb', tonePink: '#ffeaf1' }),
-        primaryColor: template,
-        primaryShade: 6,
-        fontFamily: (locale === LOCALE.Cambodia
-            ? 'Battambang'
-            : locale === LOCALE.Thailand
-                ? 'Noto Sans Thai'
-                : 'Inter') +
-            `, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif`,
-        breakpoints: {
-            xs: em(Breakpoints.BREAK_POINT_SMALL_MOBILE),
-            sm: em(Breakpoints.BREAK_POINT_MOBILE),
-            md: em(Breakpoints.BREAK_POINT_TABLET),
-            lg: em(Breakpoints.BREAK_POINT_PC),
-            xl: em(Breakpoints.BREAK_POINT_LGPC),
-        },
-        components: Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale)), getGlobalRadioStyle), GlobalButtonStyle), GlobalHeadingStyle),
-        other: {
-            template,
-            defaultImage: CommonGAssets.getAssetPath(template === 'mb' ? 'default-image-mb.jpg' : 'default-image.jpg'),
+        root: {
+            color: _params.color ||
+                (_theme.primaryColor === 'hb'
+                    ? _theme.colors.hb[6]
+                    : _theme.fn.primaryColor()),
+            '&[data-event-category] > *': {
+                pointerEvents: 'none',
+            },
         },
     };
+});
+
+const Anchor = (_a) => {
+    var { color, styles, className } = _a, rest = __rest(_a, ["color", "styles", "className"]);
+    const { classes, cx } = useStyles$3({ color }, { name: 'Anchor', styles });
+    return React__default.createElement(Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
+};
+
+const BreadcrumbItem = (_a) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (React__default.createElement(Anchor, Object.assign({ size: "p4", color: 'gray.8' }, rest), children));
+};
+
+const AspectRatio = (props) => {
+    return (React__default.createElement(AspectRatio$1, Object.assign({ sx: {
+            borderRadius: 4,
+            overflow: 'hidden',
+            '> img': {
+                objectFit: 'contain',
+            },
+        } }, props)));
 };
 
 const _Breadcrumbs = (_a) => {
@@ -1933,4 +1860,4 @@ const _ChipButton = (_a) => {
 const ChipButton = _ChipButton;
 ChipButton.Group = Chip.Group;
 
-export { Anchor as A, Button as B, CaretDown as C, DEBOUNCED_TIME as D, Flag as F, ImageWrap as I, MAPPED_LOCALE as M, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Tabs as T, Avatar as a, AspectRatio as b, Input as c, Checkbox as d, ChipButton as e, CentralCarousel as f, StyledSliderWrapper as g, StyledSlider as h, useStyles$2 as i, StyledTextArea as j, useMantineLocale as k, getMantineThemeOverride as l, Breadcrumbs as m, Accordion as n, Carousel as o, emotionCache as p, getHeadingStyles as q, Popover as r, themeColors as t, useScreenSize as u };
+export { Anchor as A, Button as B, CaretDown as C, DEBOUNCED_TIME as D, Flag as F, ImageWrap as I, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Tabs as T, Avatar as a, AspectRatio as b, Input as c, Checkbox as d, ChipButton as e, CentralCarousel as f, StyledSliderWrapper as g, StyledSlider as h, useStyles$2 as i, getMantineThemeOverride as j, StyledTextArea as k, Breadcrumbs as l, Accordion as m, Carousel as n, emotionCache as o, Popover as p, themeColors as t, useScreenSize as u };