@hhgtech/hhg-components 1.28.91 → 1.29.1

package/build/{index-9aef26c3.js → index-5c601f08.js}

@@ -1,21 +1,21 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-29b65c9b.js');
+var tslib_es6 = require('./tslib.es6-a30e1f43.js');
 var React = require('react');
 var other = require('@hhgtech/icons/other');
 var core = require('@mantine/core');
 var hooks = require('@mantine/hooks');
-var index = require('./index-1840623c.js');
-var dayjs = require('dayjs');
-var Subot = require('./Subot-0e90b908.js');
-var utils = require('./utils-6404c93f.js');
-var styled = require('styled-components');
+var index$1 = require('./index-cdd4f091.js');
+var utils = require('./utils-f00bdea3.js');
+var styled = require('@emotion/styled');
 var carousel = require('@mantine/carousel');
-var index$1 = require('./index-f788027e.js');
-var theme = require('./theme-8f20fc74.js');
-var index$2 = require('./index-9bd23d0b.js');
+var index$2 = require('./index-3fce6344.js');
+var Subot = require('./Subot-4134f5c3.js');
+var theme = require('./theme-222196ff.js');
+var useMantineLocale = require('./useMantineLocale-0e980601.js');
+var index = require('./index-1071810d.js');
 var cn = require('classnames');
-var useUniqueId = require('./useUniqueId-2d25434a.js');
+var useUniqueId = require('./useUniqueId-89244ce8.js');
 var core$1 = require('@hhgtech/icons/core');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -39,192 +39,493 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var cn__default = /*#__PURE__*/_interopDefault(cn);
 
-const ImageWrap = (_a) => {
-    var { alt, backupSrc, src, placeholderSrc, style, ref } = _a, props = tslib_es6.__rest(_a, ["alt", "backupSrc", "src", "placeholderSrc", "style", "ref"]);
-    const [hasError, setHasError] = React.useState(false);
-    return (React__namespace["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__default["default"].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 = core.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.theme.colors.gray600,
+                },
+                description: {
+                    fontWeight: 400,
+                    fontSize: '12px',
+                    lineHeight: '18px',
+                    color: theme.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 = index.ISO_FORMAT[locale]) === null || _a === void 0 ? void 0 : _a.separator,
+            },
+        },
+        Input: {
+            styles: (_theme, _, { size }) => ({
+                input: {
+                    border: `1px solid ${theme.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.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.theme.colors), { toneYellow: '#fff9eb', toneGreen: '#f2fcf7', toneBlue: '#e0e9fb', tonePink: '#ffeaf1' }),
+        primaryColor: template,
+        primaryShade: 6,
+        fontFamily: (locale === Subot.LOCALE.Cambodia
+            ? 'Battambang'
+            : locale === Subot.LOCALE.Thailand
+                ? 'Noto Sans Thai'
+                : 'Inter') +
+            `, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif`,
+        breakpoints: {
+            xs: core.em(utils.Breakpoints.BREAK_POINT_SMALL_MOBILE),
+            sm: core.em(utils.Breakpoints.BREAK_POINT_MOBILE),
+            md: core.em(utils.Breakpoints.BREAK_POINT_TABLET),
+            lg: core.em(utils.Breakpoints.BREAK_POINT_PC),
+            xl: core.em(utils.Breakpoints.BREAK_POINT_LGPC),
+        },
+        components: Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale)), getGlobalRadioStyle), GlobalButtonStyle), useMantineLocale.GlobalHeadingStyle),
+        other: {
+            template,
+            defaultImage: index$1.CommonGAssets.getAssetPath(template === 'mb' ? 'default-image-mb.jpg' : 'default-image.jpg'),
+        },
+    };
+};
+
+const ImageWrap = (_a) => {
+    var { alt, backupSrc, src, placeholderSrc, style, ref } = _a, props = tslib_es6.__rest(_a, ["alt", "backupSrc", "src", "placeholderSrc", "style", "ref"]);
+    const [hasError, setHasError] = React.useState(false);
+    return (React__namespace["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__default["default"].img `
+  &[data-has-placeholder='true'] {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+`;
+
+var useStyles$4 = core.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 = {};
     Object.keys(obj)
@@ -252,8 +553,8 @@ const Button = (props) => {
         }, variant: MAPPED_VARIANT[variant], "data-variant": variant, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, rest), children));
 };
 
-const CambodiaRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round cambodia flag", src: index.CommonGAssets.getAssetPath('flags/cambodiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
-const CambodiaSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square cambodia flag", src: index.CommonGAssets.getAssetPath('flags/cambodiaSquare.png') }, props)));
+const CambodiaRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round cambodia flag", src: index$1.CommonGAssets.getAssetPath('flags/cambodiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const CambodiaSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square cambodia flag", src: index$1.CommonGAssets.getAssetPath('flags/cambodiaSquare.png') }, props)));
 
 const EnglishRoundIcon = (props) => (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
     React__namespace["default"].createElement("g", null,
@@ -300,8 +601,8 @@ const EnglishSquareIcon = (props) => (React__namespace["default"].createElement(
         React__namespace["default"].createElement("path", { d: "M9.32609 10.8334L1.08301 5.79537V7.06504L7.24826 10.8334H9.32609ZM24.0004 5.41675L15.1376 10.8334H17.2149L24.9163 6.12687V5.41675H24.0004ZM17.9191 15.1667L24.9163 19.4432V18.1735L19.9964 15.1667H17.9191ZM8.62192 15.1667L1.08301 19.7742V20.5834H1.83701L10.6992 15.1667H8.62192ZM1.08301 11.9167H24.9163V14.0834H1.08301V11.9167Z", fill: "#E53935" }),
         React__namespace["default"].createElement("path", { d: "M11.917 5.41675H14.0837V20.5834H11.917V5.41675Z", fill: "#E53935" }))));
 
-const IndiaRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round india flag", src: index.CommonGAssets.getAssetPath('flags/indiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
-const IndiaSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square indian flag", src: index.CommonGAssets.getAssetPath('flags/indiaSquare.png') }, props)));
+const IndiaRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round india flag", src: index$1.CommonGAssets.getAssetPath('flags/indiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const IndiaSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square indian flag", src: index$1.CommonGAssets.getAssetPath('flags/indiaSquare.png') }, props)));
 
 const IndonesiaRoundIcon = (_a) => {
     var rest = tslib_es6.__rest(_a, []);
@@ -383,8 +684,8 @@ const MyanmarSquareIcon = (props) => (React__namespace["default"].createElement(
     React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.6667 7.4589L16.3104 7.41087L12.5218 9.79821L11.6667 7.4589Z", fill: "white" }),
     React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2361 7.90629L14.7225 11.8171L10.9974 9.35207L13.2361 7.90629Z", fill: "white" })));
 
-const PhilippinesRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round philippines flag", src: index.CommonGAssets.getAssetPath('flags/philippineRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
-const PhilippinesSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square philippines flag", src: index.CommonGAssets.getAssetPath('flags/philippineSquare.png') }, props)));
+const PhilippinesRoundIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "round philippines flag", src: index$1.CommonGAssets.getAssetPath('flags/philippineRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const PhilippinesSquareIcon = (props) => (React__namespace["default"].createElement(ImageWrap, Object.assign({ alt: "square philippines flag", src: index$1.CommonGAssets.getAssetPath('flags/philippineSquare.png') }, props)));
 
 const TaiwanRoundIcon = (props) => (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
     React__namespace["default"].createElement("g", null,
@@ -563,7 +864,7 @@ const _AutoComplete = React.forwardRef((_a, ref) => {
     const onClear = () => {
         handleChange('');
     };
-    return (React__namespace["default"].createElement(core.Autocomplete, Object.assign({ ref: ref, rightSection: React__namespace["default"].createElement(core.Image, { src: index.CommonGAssets.getAssetPath('chevron-down.svg'), fit: "none" }), size: "md", maxDropdownHeight: 300, onChange: (e) => handleChange(e), value: _value }, props, (clearable && (_value === null || _value === void 0 ? void 0 : _value.length) > 0
+    return (React__namespace["default"].createElement(core.Autocomplete, Object.assign({ ref: ref, rightSection: React__namespace["default"].createElement(core.Image, { src: index$1.CommonGAssets.getAssetPath('chevron-down.svg'), fit: "none" }), size: "md", maxDropdownHeight: 300, onChange: (e) => handleChange(e), value: _value }, props, (clearable && (_value === null || _value === void 0 ? void 0 : _value.length) > 0
         ? {
             rightSection: (React__namespace["default"].createElement(core.ActionIcon, { onClick: onClear, sx: { cursor: 'pointer' } },
                 React__namespace["default"].createElement(_IconSelect, null))),
@@ -590,47 +891,6 @@ const _Select = React.forwardRef((_a, ref) => {
 const _IconSelect = () => (React__namespace["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
     React__namespace["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 = {
-    [Subot.LOCALE.Vietnam]: 'vi',
-    [Subot.LOCALE.Cambodia]: 'km',
-    [Subot.LOCALE.India]: 'hi',
-    [Subot.LOCALE.Indonesia]: 'id',
-    [Subot.LOCALE.Malaysia]: 'ms',
-    [Subot.LOCALE.Thailand]: 'th',
-    [Subot.LOCALE.Taiwan]: 'zh-tw',
-    [Subot.LOCALE.PhilippinesTagalog]: 'tl-ph',
-    [Subot.LOCALE.PhilippinesEnglish]: 'en',
-    [Subot.LOCALE.Myanmar]: 'my',
-};
-const LOCALE_LOADERS = {
-    [Subot.LOCALE.Vietnam]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/vi.js')); }),
-    [Subot.LOCALE.Cambodia]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/km.js')); }),
-    [Subot.LOCALE.India]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/hi.js')); }),
-    [Subot.LOCALE.Indonesia]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/id.js')); }),
-    [Subot.LOCALE.Malaysia]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/ms.js')); }),
-    [Subot.LOCALE.Thailand]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/th.js')); }),
-    [Subot.LOCALE.Taiwan]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/zh-tw.js')); }),
-    [Subot.LOCALE.PhilippinesTagalog]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/tl-ph.js')); }),
-    [Subot.LOCALE.PhilippinesEnglish]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/en.js')); }),
-    [Subot.LOCALE.Myanmar]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/my.js')); }),
-};
-const useMantineLocale = (locale) => {
-    const [isLoaded, setIsLoaded] = React.useState(false);
-    React.useEffect(() => {
-        (() => tslib_es6.__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__default["default"].locale(MAPPED_LOCALE[locale]);
-            setIsLoaded(true);
-        }))();
-    }, [locale]);
-    return {
-        isLoaded,
-    };
-};
-
 const getIsMobile = () => {
     return (typeof window !== 'undefined' &&
         window.innerWidth < utils.Breakpoints.BREAK_POINT_MOBILE);
@@ -711,395 +971,61 @@ const StyledCarousel = styled__default["default"](Carousel) `
     &:first-child {
       padding-right: 24px;
       background: linear-gradient(
-        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 = core.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 = tslib_es6.__rest(_a, ["color", "styles", "className"]);
-    const { classes, cx } = useStyles$3({ color }, { name: 'Anchor', styles });
-    return React__namespace["default"].createElement(index$1.Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
-};
-
-const BreadcrumbItem = (_a) => {
-    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
-    return (React__namespace["default"].createElement(Anchor, Object.assign({ size: "p4", color: 'gray.8' }, rest), children));
-};
-
-const AspectRatio = (props) => {
-    return (React__namespace["default"].createElement(core.AspectRatio, 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: index$1.OTHER_THEME_CONFIG.fontWeight.bold }, getHeadingStyles()), { [`&${utils.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.theme.colors.gray600,
-                },
-                description: {
-                    fontWeight: 400,
-                    fontSize: '12px',
-                    lineHeight: '18px',
-                    color: theme.theme.colors.gray600,
-                    marginBottom: '0.25rem',
-                },
-                error: {
-                    marginTop: '0.25rem',
-                },
-            },
-        },
-        NumberInput: {
-            defaultProps: {
-                decimalSeparator: (_a = index$2.ISO_FORMAT[locale]) === null || _a === void 0 ? void 0 : _a.separator,
-            },
-        },
-        Input: {
-            styles: (_theme, _, { size }) => ({
-                input: {
-                    border: `1px solid ${theme.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.theme.colors.red600}`,
-                    color: '#000',
-                },
-            }),
-        },
-    });
-};
+        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%
+      );
+    }
+  }
 
-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 = core.createStyles((_theme, _params) => {
     return {
-        defaultRadius: template === 'hb' ? 8 : 16,
-        cursorType: 'pointer',
-        colors: Object.assign(Object.assign(Object.assign({}, themeColors), theme.theme.colors), { toneYellow: '#fff9eb', toneGreen: '#f2fcf7', toneBlue: '#e0e9fb', tonePink: '#ffeaf1' }),
-        primaryColor: template,
-        primaryShade: 6,
-        fontFamily: (locale === Subot.LOCALE.Cambodia
-            ? 'Battambang'
-            : locale === Subot.LOCALE.Thailand
-                ? 'Noto Sans Thai'
-                : 'Inter') +
-            `, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif`,
-        breakpoints: {
-            xs: core.em(utils.Breakpoints.BREAK_POINT_SMALL_MOBILE),
-            sm: core.em(utils.Breakpoints.BREAK_POINT_MOBILE),
-            md: core.em(utils.Breakpoints.BREAK_POINT_TABLET),
-            lg: core.em(utils.Breakpoints.BREAK_POINT_PC),
-            xl: core.em(utils.Breakpoints.BREAK_POINT_LGPC),
-        },
-        components: Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale)), getGlobalRadioStyle), GlobalButtonStyle), GlobalHeadingStyle),
-        other: {
-            template,
-            defaultImage: index.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 = tslib_es6.__rest(_a, ["color", "styles", "className"]);
+    const { classes, cx } = useStyles$3({ color }, { name: 'Anchor', styles });
+    return React__namespace["default"].createElement(index$2.Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
+};
+
+const BreadcrumbItem = (_a) => {
+    var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
+    return (React__namespace["default"].createElement(Anchor, Object.assign({ size: "p4", color: 'gray.8' }, rest), children));
+};
+
+const AspectRatio = (props) => {
+    return (React__namespace["default"].createElement(core.AspectRatio, Object.assign({ sx: {
+            borderRadius: 4,
+            overflow: 'hidden',
+            '> img': {
+                objectFit: 'contain',
+            },
+        } }, props)));
 };
 
 const _Breadcrumbs = (_a) => {
@@ -1212,13 +1138,13 @@ const StyledAccordion = styled__default["default"](core.Accordion) `
         width: 16px;
         height: 16px;
         background-position: center;
-        background-image: url(${(props) => props.closeChevron || index.CommonGAssets.getAssetPath('plus-icon.svg')});
+        background-image: url(${(props) => props.closeChevron || index$1.CommonGAssets.getAssetPath('plus-icon.svg')});
       }
     }
     &[data-active='true'] {
       .mantine-Accordion-chevron {
         > div {
-          background-image: url(${(props) => props.openChevron || index.CommonGAssets.getAssetPath('minus-icon.svg')});
+          background-image: url(${(props) => props.openChevron || index$1.CommonGAssets.getAssetPath('minus-icon.svg')});
         }
       }
     }
@@ -1240,7 +1166,7 @@ Accordion.Control = core.Accordion.Control;
 Accordion.Item = core.Accordion.Item;
 Accordion.Panel = core.Accordion.Panel;
 
-const DEFAULT_AVATAR = index.CommonGAssets.getAssetPath('avatar.jpg');
+const DEFAULT_AVATAR = index$1.CommonGAssets.getAssetPath('avatar.jpg');
 const Avatar = (_a) => {
     var { withIndicator = false, indicatorConfig = null, size = 56, children, styles, placeholderText } = _a, // usually first letter of name
     avatarProps = tslib_es6.__rest(_a, ["withIndicator", "indicatorConfig", "size", "children", "styles", "placeholderText"]);
@@ -1287,8 +1213,8 @@ const NumberInput = (_a) => {
         }, removeTrailingZeros: true, value: value }, props)));
 };
 
-const EyeVisible = index.CommonGAssets.getAssetPath('EyeVisible.svg');
-const EyeHidden = index.CommonGAssets.getAssetPath('EyeHidden.svg');
+const EyeVisible = index$1.CommonGAssets.getAssetPath('EyeVisible.svg');
+const EyeHidden = index$1.CommonGAssets.getAssetPath('EyeHidden.svg');
 const PasswordInput = React.forwardRef((props, ref) => {
     const { size = 'md', visibilityToggleIcon: visibilityToggleIconProps } = props, restProps = tslib_es6.__rest(props, ["size", "visibilityToggleIcon"]);
     const visibilityToggleIcon = visibilityToggleIconProps ||
@@ -1700,7 +1626,7 @@ const OTPFowardRef = (props, ref) => {
 };
 const OTP = React.forwardRef(OTPFowardRef);
 
-const countriesDefault = Object.values(index$2.siteOptions).reduce((countries, { phoneCountry: phone }) => {
+const countriesDefault = Object.values(index.siteOptions).reduce((countries, { phoneCountry: phone }) => {
     if (!countries.includes(phone)) {
         countries.push(phone);
     }
@@ -1872,7 +1798,7 @@ const _Tabs = (_a) => {
         setDisableNext(((_a = viewport === null || viewport === void 0 ? void 0 : viewport.current) === null || _a === void 0 ? void 0 : _a.clientWidth) + scrollPosition.x ===
             ((_b = viewport === null || viewport === void 0 ? void 0 : viewport.current) === null || _b === void 0 ? void 0 : _b.scrollWidth));
     }, [scrollPosition]);
-    const TabTextComponent = ({ text, dataEventCategory, dataEventAction, dataEventLabel, }) => TabComponentDisplay ? (React__namespace["default"].createElement(TabComponentDisplay, null, text)) : (React__namespace["default"].createElement(index$1.Text, { size: "s3", color: "inherit", weight: "semiBold", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, text));
+    const TabTextComponent = ({ text, dataEventCategory, dataEventAction, dataEventLabel, }) => TabComponentDisplay ? (React__namespace["default"].createElement(TabComponentDisplay, null, text)) : (React__namespace["default"].createElement(index$2.Text, { size: "s3", color: "inherit", weight: "semiBold", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, text));
     return (React__namespace["default"].createElement(core.Tabs, Object.assign({}, props, rest), children || (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
         React__namespace["default"].createElement(core.ScrollArea, { className: cx(classes.scrollArea, `${!disablePrevious ? 'prev-bg' : ''} ${!disableNext ? 'next-bg' : ''}`), scrollbarSize: 0, viewportRef: viewport, onScrollPositionChange: onScrollPositionChange },
             React__namespace["default"].createElement(core.Tabs.List, Object.assign({ className: classes.list, ref: listRef }, listProps), dataList.map((i, idx) => (React__namespace["default"].createElement(core.Tabs.Tab, Object.assign({ ref: (e) => (tabRef.current[idx] = e), className: classes.tab, key: String(i.value), value: String(i.value) }, tabProps),
@@ -1974,7 +1900,6 @@ exports.DEBOUNCED_TIME = DEBOUNCED_TIME;
 exports.Flag = Flag;
 exports.ImageWrap = ImageWrap;
 exports.Input = Input;
-exports.MAPPED_LOCALE = MAPPED_LOCALE;
 exports.NumberInput = NumberInput;
 exports.OTP = OTP;
 exports.Phone = Phone;
@@ -1986,9 +1911,7 @@ exports.StyledSliderWrapper = StyledSliderWrapper;
 exports.StyledTextArea = StyledTextArea;
 exports.Tabs = Tabs;
 exports.emotionCache = emotionCache;
-exports.getHeadingStyles = getHeadingStyles;
 exports.getMantineThemeOverride = getMantineThemeOverride;
 exports.themeColors = themeColors;
-exports.useMantineLocale = useMantineLocale;
 exports.useScreenSize = useScreenSize;
 exports.useStyles = useStyles$2;