@hhgtech/hhg-components 1.28.67 → 1.28.69

package/build/esm/index-32e53dac.js

@@ -0,0 +1,1936 @@
+import { _ as __rest, a as __awaiter } from './tslib.es6-1b1533a9.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 { useUncontrolled, useDebouncedValue, useViewportSize, useResizeObserver, useDisclosure, useClickOutside } from '@mantine/hooks';
+import { C as CommonGAssets } from './index-8858383e.js';
+import dayjs from 'dayjs';
+import { L as LOCALE } from './Subot-3289bd8e.js';
+import { B as Breakpoints, M as MediaQueries } from './utils-2c484c05.js';
+import styled from 'styled-components';
+import { Carousel as Carousel$1 } from '@mantine/carousel';
+import { T as Text, O as OTHER_THEME_CONFIG } from './index-3474401a.js';
+import { t as theme } from './theme-e74db08c.js';
+import { I as ISO_FORMAT, s as siteOptions } from './index-e612be9c.js';
+import cn from 'classnames';
+import { a as useUniqueId } from './useUniqueId-3638402f.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 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,
+            },
+        })), (() => {
+            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',
+                        borderColor: `transparent`,
+                        '&:hover': {
+                            backgroundColor: 'transparent',
+                            border: `transparent`,
+                        },
+                    };
+                case 'tertiary':
+                    return {
+                        color: _theme.colors.gray[8],
+                        backgroundColor: _theme.white,
+                        border: `1px solid ${_theme.colors.neutral[2]}`,
+                        '&:hover': Object.assign({}, (!skipHover
+                            ? {
+                                backgroundColor: _theme.colors.neutral[0],
+                                border: `1px solid ${_theme.colors.neutral[0]}`,
+                            }
+                            : {
+                                backgroundColor: _theme.white,
+                                border: `1px solid ${_theme.colors.neutral[2]}`,
+                            })),
+                    };
+                case 'light': {
+                    return {
+                        color: hexColor,
+                        backgroundColor: hexColor50,
+                        border: `1px solid transparent`,
+                        '&:hover': Object.assign({}, (!skipHover
+                            ? {
+                                backgroundColor: _theme.white,
+                                border: `1px solid ${hexColor50}`,
+                            }
+                            : {
+                                backgroundColor: hexColor50,
+                                border: `1px solid transparent`,
+                            })),
+                    };
+                }
+                case 'ghost':
+                    return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid transparent` }, (!skipHover && {
+                        '&:hover': {
+                            backgroundColor: hexColor50,
+                            border: `1px solid transparent`,
+                        },
+                    }));
+            }
+        })()), { '&[data-disabled]': {
+                backgroundColor: _theme.colors.gray[1],
+                color: _theme.colors.gray[4],
+            } }), (isError
+            ? Object.assign({ color: _theme.colors.red[6], backgroundColor: _theme.white, border: `1px solid ${_theme.colors.red[6]}` }, (!skipHover && {
+                '&:hover': {
+                    backgroundColor: _theme.colors.red[0],
+                    border: `1px solid ${_theme.colors.red[6]}`,
+                },
+            })) : {})), (isSuccess
+            ? Object.assign({ color: _theme.colors.green[8], backgroundColor: _theme.colors.green[0] }, (!skipHover && {
+                '&:hover': {
+                    backgroundColor: _theme.colors.green[0],
+                },
+            })) : {})),
+    };
+});
+
+const MAPPED_VARIANT = {
+    primary: 'filled',
+    secondary: 'outline',
+    tertiary: 'default',
+    light: 'light',
+    ghost: 'subtle',
+    error: 'outline',
+    white: 'white',
+    success: 'subtle',
+};
+function filterObject(obj) {
+    const ret = {};
+    Object.keys(obj)
+        .filter((key) => obj[key] !== undefined)
+        .forEach((key) => (ret[key] = obj[key]));
+    return ret;
+}
+const Button = (props) => {
+    var _a, _b;
+    const theme = useMantineTheme();
+    const _c = Object.assign(Object.assign({}, (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.Button) === null || _b === void 0 ? void 0 : _b.defaultProps), filterObject(props)), { variant, size, color, skipHover, className, dataEventCategory, dataEventAction, dataEventLabel, children, theme: themeProp } = _c, rest = __rest(_c, ["variant", "size", "color", "skipHover", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "children", "theme"]);
+    const isError = variant === 'error';
+    const { classes, cx } = useStyles$4({
+        variant,
+        size,
+        color,
+        skipHover,
+        isError,
+        isSuccess: variant === 'success',
+        children,
+        theme: themeProp,
+    });
+    return (React__default.createElement(Button$1, Object.assign({ className: cx(className, variant), classNames: {
+            root: classes.root,
+        }, variant: MAPPED_VARIANT[variant], "data-variant": variant, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, rest), children));
+};
+
+const CambodiaRoundIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "round cambodia flag", src: CommonGAssets.getAssetPath('flags/cambodiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const CambodiaSquareIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "square cambodia flag", src: CommonGAssets.getAssetPath('flags/cambodiaSquare.png') }, props)));
+
+const EnglishRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
+        React__default.createElement("path", { d: "M7.49953 0.327881C5.47199 0.850891 3.69346 1.98591 2.37793 3.53444L7.49953 6.6655V0.327881Z", fill: "#3F51B5" }),
+        React__default.createElement("path", { d: "M2.30273 16.3824C3.62476 17.9749 5.4353 19.1399 7.50034 19.6729V13.2053L2.30273 16.3824Z", fill: "#3F51B5" }),
+        React__default.createElement("path", { d: "M0.328125 12.5C0.334625 12.526 0.341125 12.5515 0.348125 12.5775L0.474128 12.5H0.328125Z", fill: "white" }),
+        React__default.createElement("path", { d: "M17.7871 3.73445C16.4571 2.08391 14.6131 0.872891 12.499 0.327881V6.96651L17.7871 3.73445Z", fill: "#3F51B5" }),
+        React__default.createElement("path", { d: "M12.499 19.6722C14.6506 19.1172 16.5196 17.8707 17.8546 16.1752L12.499 12.9021V19.6722Z", fill: "#3F51B5" }),
+        React__default.createElement("path", { d: "M0.376626 7.31055C0.359125 7.37305 0.344125 7.43705 0.328125 7.50005H0.686632L0.376626 7.31055Z", fill: "white" }),
+        React__default.createElement("path", { d: "M19.8745 8.50006C19.827 8.18506 19.7655 7.87555 19.6895 7.57104L18.1699 8.50006H19.8745Z", fill: "white" }),
+        React__default.createElement("path", { d: "M0.686034 7.50024H0.327527C0.243026 7.82775 0.175524 8.16076 0.124023 8.50026H2.32207L0.686034 7.50024Z", fill: "white" }),
+        React__default.createElement("path", { d: "M19.7197 12.3148C19.7832 12.0473 19.8337 11.7752 19.8752 11.5002H18.3867L19.7197 12.3148Z", fill: "white" }),
+        React__default.createElement("path", { d: "M2.10956 11.5002H0.124023C0.175024 11.8398 0.243026 12.1728 0.327527 12.5003H0.47403L2.10956 11.5002Z", fill: "white" }),
+        React__default.createElement("path", { d: "M8.50002 7.27665V0.124512C8.16051 0.175513 7.82751 0.243514 7.5 0.328016V6.66564L8.50002 7.27665Z", fill: "white" }),
+        React__default.createElement("path", { d: "M11.5 12.2913V19.8759C11.8395 19.8249 12.1725 19.7569 12.5 19.6724V12.9023L11.5 12.2913Z", fill: "white" }),
+        React__default.createElement("path", { d: "M7.5 13.205V19.6721C7.82751 19.7566 8.16051 19.8241 8.50002 19.8756V12.594L7.5 13.205Z", fill: "white" }),
+        React__default.createElement("path", { d: "M11.5925 7.34715L11.7345 7.43415L12.5 6.96614V0.328016C12.1725 0.243514 11.8395 0.176013 11.5 0.124512V7.49865L11.5925 7.34715Z", fill: "white" }),
+        React__default.createElement("path", { d: "M2.32251 8.50002H7.01761L8.50014 7.594V7.277L7.50011 6.66548L2.37852 3.53442C1.95151 4.03743 1.572 4.58144 1.24949 5.16296L5.02507 7.5H2.29701L0.650482 6.47648C0.54748 6.74949 0.455478 7.02699 0.375977 7.3105L0.686483 7.5L2.32251 8.50002Z", fill: "white" }),
+        React__default.createElement("path", { d: "M11.7344 7.43419L13.4784 8.50021H18.171L19.6905 7.57119C19.528 6.92118 19.303 6.29767 19.02 5.70516L16.139 7.50019H13.4109L18.317 4.45013C18.1515 4.20313 17.9735 3.96562 17.7875 3.73462L12.4999 6.96618L11.7344 7.43419Z", fill: "white" }),
+        React__default.createElement("path", { d: "M5.02448 7.50013L1.2494 5.16309C1.0169 5.58259 0.821394 6.0231 0.650391 6.47661L2.29642 7.50013H5.02448Z", fill: "#E53935" }),
+        React__default.createElement("path", { d: "M16.1392 7.50024L19.0207 5.70521C18.8132 5.2702 18.5837 4.84819 18.3177 4.45068L13.4111 7.50024H16.1392Z", fill: "#E53935" }),
+        React__default.createElement("path", { d: "M11.5 11.5002V12.2913L12.5 12.9023L17.8556 16.1758C18.2416 15.6853 18.5836 15.1593 18.8736 14.6008L15.4856 12.5003H18.2136L19.4432 13.2673C19.5507 12.9563 19.6432 12.6393 19.7197 12.3153L18.3871 11.5002H11.5Z", fill: "white" }),
+        React__default.createElement("path", { d: "M13.4785 8.50019L11.7345 7.43417L11.5925 7.34717L11.5 7.49867V8.50019H13.4785Z", fill: "white" }),
+        React__default.createElement("path", { d: "M8.49934 12.5943V11.5002H2.10921L0.473182 12.5003L0.34668 12.5778C0.522683 13.2383 0.762688 13.8713 1.06319 14.4708L4.16375 12.5003H6.89181L1.80071 15.7168C1.95971 15.9448 2.12471 16.1688 2.30172 16.3823L7.49932 13.2053L8.49934 12.5943Z", fill: "white" }),
+        React__default.createElement("path", { d: "M7.01758 8.50026H8.50011V7.59424L7.01758 8.50026Z", fill: "white" }),
+        React__default.createElement("path", { d: "M15.4854 12.5L18.8729 14.6C19.0949 14.173 19.2834 13.727 19.4429 13.2665L18.2134 12.5H15.4854Z", fill: "#E53935" }),
+        React__default.createElement("path", { d: "M4.16501 12.5L1.06445 14.4705C1.28196 14.9045 1.52596 15.3216 1.80197 15.7166L6.89307 12.5H4.16501Z", fill: "#E53935" }),
+        React__default.createElement("path", { d: "M13.4785 8.5H11.5V11.5001H18.3871H19.8757C19.9497 11.0095 20.0002 10.511 20.0002 10C20.0002 9.48902 19.9497 8.99051 19.8757 8.5H18.1711H13.4785Z", fill: "#E53935" }),
+        React__default.createElement("path", { d: "M8.50017 11.5001V8.5H7.01764H2.32255H0.124502C0.050501 8.99051 0 9.48902 0 10C0 10.511 0.050501 11.0095 0.124502 11.5001H2.11004H8.50017Z", fill: "#E53935" }),
+        React__default.createElement("path", { d: "M11.5001 19.8759V12.2912V11.5002V8.50016V7.49865V0.124502C11.0095 0.050501 10.511 0 10 0C9.48902 0 8.99051 0.050501 8.5 0.124502V7.27664V7.59365V8.50016V11.5002V12.5942V19.8759C8.99051 19.9499 9.48902 20.0004 10 20.0004C10.511 20.0004 11.0095 19.9499 11.5001 19.8759Z", fill: "#E53935" }))));
+const EnglishSquareIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 26 26", fill: "none" }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "1", y: "5", width: "24", height: "16" },
+            React__default.createElement("path", { d: "M1.08301 7.41675C1.08301 6.31218 1.97844 5.41675 3.08301 5.41675H22.9163C24.0209 5.41675 24.9163 6.31218 24.9163 7.41675V18.5834C24.9163 19.688 24.0209 20.5834 22.9163 20.5834H3.08301C1.97844 20.5834 1.08301 19.688 1.08301 18.5834V7.41675Z", fill: "#3F51B5" })),
+        React__default.createElement("path", { d: "M1.08301 5.41675H24.9163V20.5834H1.08301V5.41675Z", fill: "#3F51B5" }),
+        React__default.createElement("path", { d: "M1.08301 7.70041L12.3551 14.5899L14.05 11.8165L3.57901 5.41675H1.08301V7.70041Z", fill: "white" }),
+        React__default.createElement("path", { d: "M24.9165 5.41675H22.9616L12.4912 11.816L14.1855 14.5899L24.9165 8.03083V5.41675Z", fill: "white" }),
+        React__default.createElement("path", { d: "M14.1855 10.9802L12.4912 13.7536L23.6658 20.5834H24.9165V17.5387L14.1855 10.9802Z", fill: "white" }),
+        React__default.createElement("path", { d: "M1.08301 17.8702V20.5834H2.87592L14.05 13.7541L12.3556 10.9802L1.08301 17.8702Z", fill: "white" }),
+        React__default.createElement("path", { d: "M1.08301 10.8333H24.9163V15.1666H1.08301V10.8333Z", fill: "white" }),
+        React__default.createElement("path", { d: "M10.833 5.41675H15.1663V20.5834H10.833V5.41675Z", fill: "white" }),
+        React__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__default.createElement("path", { d: "M11.917 5.41675H14.0837V20.5834H11.917V5.41675Z", fill: "#E53935" }))));
+
+const IndiaRoundIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "round india flag", src: CommonGAssets.getAssetPath('flags/indiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const IndiaSquareIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "square indian flag", src: CommonGAssets.getAssetPath('flags/indiaSquare.png') }, props)));
+
+const IndonesiaRoundIcon = (_a) => {
+    var rest = __rest(_a, []);
+    const maskId = useUniqueId();
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none" }, rest),
+        React__default.createElement("mask", { id: maskId, style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
+        React__default.createElement("g", { mask: `url(#${maskId})` },
+            React__default.createElement("rect", { width: "20", height: "10", fill: "#CE1126" }),
+            React__default.createElement("rect", { y: "10", width: "20", height: "10", fill: "white" }))));
+};
+const IndonesiaSquareIcon = (_a) => {
+    var rest = __rest(_a, []);
+    const clipPathId = useUniqueId();
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, rest),
+        React__default.createElement("g", { clipPath: `url(#${clipPathId})` },
+            React__default.createElement("rect", { y: "0.0166016", width: "24", height: "8", fill: "#CE1126" }),
+            React__default.createElement("rect", { y: "8.0166", width: "24", height: "8", fill: "white" })),
+        React__default.createElement("defs", null,
+            React__default.createElement("clipPath", { id: clipPathId },
+                React__default.createElement("rect", { width: "24", height: "16", rx: "2", fill: "white" })))));
+};
+
+const MalaysiaRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
+        React__default.createElement("rect", { y: "1", width: "20", height: "20", fill: "#CC0001" }),
+        React__default.createElement("rect", { y: "16.106", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "16", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "18", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "14.0652", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "12.0242", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "9.9834", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "7.94263", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "5.90186", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "3.86084", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "2", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "-1", width: "10", height: "12", fill: "#010066" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.11387 3.86084C2.92711 3.86084 1.96387 5.23232 1.96387 6.92206C1.96387 8.6118 2.92711 9.98329 4.11387 9.98329C4.54263 9.98329 4.94211 9.80406 5.27763 9.4957C5.08225 9.59203 4.87256 9.64471 4.65427 9.64471C3.60193 9.64471 2.74786 8.42866 2.74786 6.93032C2.74786 5.43198 3.60193 4.21594 4.65427 4.21594C4.88682 4.21594 5.10959 4.27527 5.31571 4.38397C4.97256 4.0538 4.5589 3.86084 4.11387 3.86084Z", fill: "#FFCC00" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.67935 8.51573L6.7737 7.8407L7.04147 9.22221L6.43573 8.06657L6.24676 9.47313L6.0609 8.06576L5.4526 9.2188L5.72343 7.83844L4.81629 8.50957L5.49017 7.42963L4.46387 7.48593L5.40732 6.9203L4.46512 6.35062L5.4913 6.41133L4.81981 5.3285L5.72546 6.00353L5.45769 4.62202L6.06343 5.77766L6.25241 4.37109L6.43827 5.77847L7.04656 4.62543L6.77574 6.00579L7.68287 5.33466L7.00899 6.4146L8.0353 6.3583L7.09184 6.92392L8.03404 7.49361L7.00786 7.43289L7.67935 8.51573Z", fill: "#FFCC00" }))));
+const MalaysiaSquareIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, props),
+    React__default.createElement("rect", { width: "24", height: "16", rx: "2", fill: "#CC0001" }),
+    React__default.createElement("rect", { y: "12.2712", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "12.1904", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "13.7144", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "10.7161", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "9.16138", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "7.60645", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "6.05127", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "4.49658", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "2.94141", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "1.52393", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("path", { d: "M0 2C0 0.895431 0.895431 0 2 0H12V8.38095H0V2Z", fill: "#010066" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.93644 1.52393C3.51233 1.52393 2.35645 2.56887 2.35645 3.85629C2.35645 5.14371 3.51233 6.18865 4.93644 6.18865C5.45096 6.18865 5.93034 6.05209 6.33296 5.81716C6.09851 5.89054 5.84688 5.93068 5.58492 5.93068C4.32212 5.93068 3.29724 5.00417 3.29724 3.86258C3.29724 2.72099 4.32212 1.79448 5.58492 1.79448C5.86399 1.79448 6.13132 1.83968 6.37865 1.9225C5.96688 1.67094 5.47049 1.52393 4.93644 1.52393Z", fill: "#FFCC00" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.216 5.07041L8.12923 4.55611L8.45055 5.60869L7.72366 4.72819L7.49689 5.79987L7.27386 4.72758L6.5439 5.60609L6.86889 4.55439L5.78033 5.06572L6.58899 4.24291L5.35742 4.28581L6.48957 3.85485L5.35893 3.42081L6.59034 3.46707L5.78456 2.64205L6.87133 3.15636L6.55001 2.10378L7.2769 2.98427L7.50367 1.9126L7.7267 2.98488L8.45666 2.10638L8.13166 3.15808L9.22022 2.64674L8.41157 3.46955L9.64314 3.42666L8.51099 3.85761L9.64163 4.29165L8.41022 4.2454L9.216 5.07041Z", fill: "#FFCC00" })));
+
+const MyanmarRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
+        React__default.createElement("rect", { x: "-4", y: "-1", width: "28", height: "11", fill: "#FECB00" }),
+        React__default.createElement("rect", { x: "-4", y: "10", width: "28", height: "10", fill: "#EA2839" }),
+        React__default.createElement("rect", { x: "-4", y: "6.7041", width: "28", height: "6.47773", fill: "#34B233" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.56543 10.3272L10.1796 5.15527L11.7938 10.3272H8.56543Z", fill: "white" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.5292 11.2775L7.18336 14.5129L8.91745 9.37991L11.5292 11.2775Z", fill: "white" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.75181 11.8648L5.33182 8.73143L10.7494 8.79447L9.75181 11.8648Z", fill: "white" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.6105 8.78962L15.0281 8.72658L10.6081 11.86L9.6105 8.78962Z", fill: "white" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.4424 9.37686L13.1765 14.5098L8.83064 11.2744L11.4424 9.37686Z", fill: "white" }))));
+const MyanmarSquareIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, props),
+    React__default.createElement("rect", { width: "24", height: "16", rx: "2", fill: "#FECB00" }),
+    React__default.createElement("rect", { y: "8.3811", width: "24", height: "7.61905", rx: "2", fill: "#EA2839" }),
+    React__default.createElement("rect", { y: "5.86987", width: "24", height: "4.93542", fill: "#34B233" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.7705 8.63046L12.1541 4.68994L13.5377 8.63046H10.7705Z", fill: "white" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.3108 9.35502L9.58574 11.8201L11.0721 7.90925L13.3108 9.35502Z", fill: "white" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.7874 9.80216L7.99884 7.41482L12.6425 7.46285L11.7874 9.80216Z", fill: "white" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.6667 7.4589L16.3104 7.41087L12.5218 9.79821L11.6667 7.4589Z", fill: "white" }),
+    React__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__default.createElement(ImageWrap, Object.assign({ alt: "round philippines flag", src: CommonGAssets.getAssetPath('flags/philippineRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const PhilippinesSquareIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "square philippines flag", src: CommonGAssets.getAssetPath('flags/philippineSquare.png') }, props)));
+
+const TaiwanRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
+        React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#D8D8D8" }),
+        React__default.createElement("g", null,
+            React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+                React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "white" })),
+            React__default.createElement("rect", { width: "30", height: "20", fill: "#ED1E24" }),
+            React__default.createElement("rect", { width: "15", height: "10", fill: "#2B2F84" }),
+            React__default.createElement("circle", { cx: "7.49791", cy: "4.99913", r: "1.869", fill: "white" }),
+            React__default.createElement("path", { d: "M7.93582 2.89402L7.49722 1.25732L7.05762 2.89812C7.28902 2.84212 7.64062 2.82912 7.93582 2.89402Z", fill: "white" }),
+            React__default.createElement("path", { d: "M6.82515 2.95674L5.62695 1.75854L6.06655 3.39934C6.23895 3.23514 6.53695 3.04814 6.82515 2.95674Z", fill: "white" }),
+            React__default.createElement("path", { d: "M5.89364 3.56677L4.25684 3.12817L5.45794 4.32927C5.52514 4.10107 5.68964 3.79007 5.89364 3.56677Z", fill: "white" }),
+            React__default.createElement("path", { d: "M5.39266 4.56055L3.75586 4.99915L5.39666 5.43885C5.34066 5.20745 5.32756 4.85585 5.39266 4.56055Z", fill: "white" }),
+            React__default.createElement("path", { d: "M5.45504 5.67188L4.25684 6.87007L5.89764 6.43047C5.73344 6.25807 5.54634 5.96007 5.45504 5.67188Z", fill: "white" }),
+            React__default.createElement("path", { d: "M6.06555 6.60278L5.62695 8.23958L6.82815 7.03838C6.59975 6.97128 6.28875 6.80678 6.06555 6.60278Z", fill: "white" }),
+            React__default.createElement("path", { d: "M7.05859 7.1041L7.49719 8.7409L7.93679 7.1001C7.70549 7.1561 7.35399 7.1692 7.05859 7.1041Z", fill: "white" }),
+            React__default.createElement("path", { d: "M8.16992 7.04148L9.36812 8.23968L8.92852 6.59888C8.75622 6.76308 8.45822 6.95018 8.16992 7.04148Z", fill: "white" }),
+            React__default.createElement("path", { d: "M9.10156 6.43145L10.7384 6.87005L9.53726 5.66895C9.47006 5.89725 9.30556 6.20825 9.10156 6.43145Z", fill: "white" }),
+            React__default.createElement("path", { d: "M9.60263 5.43763L11.2394 4.99903L9.59863 4.55933C9.65463 4.79073 9.66763 5.14223 9.60263 5.43763Z", fill: "white" }),
+            React__default.createElement("path", { d: "M9.54026 4.32637L10.7385 3.12817L9.09766 3.56777C9.26196 3.74007 9.44896 4.03807 9.54026 4.32637Z", fill: "white" }),
+            React__default.createElement("path", { d: "M8.92959 3.39534L9.36819 1.75854L8.16699 2.95964C8.39529 3.02674 8.70629 3.19124 8.92959 3.39534Z", fill: "white" })))));
+const TaiwanSquareIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, props),
+    React__default.createElement("rect", { width: "24", height: "16", rx: "2", fill: "#ED1E24" }),
+    React__default.createElement("path", { d: "M0 2C0 0.89543 0.895431 0 2 0H15V10H0V2Z", fill: "#2B2F84" }),
+    React__default.createElement("circle", { cx: "7.49791", cy: "4.99913", r: "1.869", fill: "white" }),
+    React__default.createElement("path", { d: "M7.93582 2.89402L7.49722 1.25732L7.05762 2.89812C7.28902 2.84212 7.64062 2.82912 7.93582 2.89402Z", fill: "white" }),
+    React__default.createElement("path", { d: "M6.82515 2.95674L5.62695 1.75854L6.06655 3.39934C6.23895 3.23514 6.53695 3.04814 6.82515 2.95674Z", fill: "white" }),
+    React__default.createElement("path", { d: "M5.89364 3.56677L4.25684 3.12817L5.45794 4.32927C5.52514 4.10107 5.68964 3.79007 5.89364 3.56677Z", fill: "white" }),
+    React__default.createElement("path", { d: "M5.39266 4.56055L3.75586 4.99915L5.39666 5.43885C5.34066 5.20745 5.32756 4.85585 5.39266 4.56055Z", fill: "white" }),
+    React__default.createElement("path", { d: "M5.45504 5.67188L4.25684 6.87007L5.89764 6.43047C5.73344 6.25807 5.54634 5.96007 5.45504 5.67188Z", fill: "white" }),
+    React__default.createElement("path", { d: "M6.06555 6.60278L5.62695 8.23958L6.82815 7.03838C6.59975 6.97128 6.28875 6.80678 6.06555 6.60278Z", fill: "white" }),
+    React__default.createElement("path", { d: "M7.05859 7.1041L7.49719 8.7409L7.93679 7.1001C7.70549 7.1561 7.35399 7.1692 7.05859 7.1041Z", fill: "white" }),
+    React__default.createElement("path", { d: "M8.16992 7.04148L9.36812 8.23968L8.92852 6.59888C8.75622 6.76308 8.45822 6.95018 8.16992 7.04148Z", fill: "white" }),
+    React__default.createElement("path", { d: "M9.10156 6.43145L10.7384 6.87005L9.53726 5.66895C9.47006 5.89725 9.30556 6.20825 9.10156 6.43145Z", fill: "white" }),
+    React__default.createElement("path", { d: "M9.60263 5.43763L11.2394 4.99903L9.59863 4.55933C9.65463 4.79073 9.66763 5.14223 9.60263 5.43763Z", fill: "white" }),
+    React__default.createElement("path", { d: "M9.54026 4.32637L10.7385 3.12817L9.09766 3.56777C9.26196 3.74007 9.44896 4.03807 9.54026 4.32637Z", fill: "white" }),
+    React__default.createElement("path", { d: "M8.92959 3.39534L9.36819 1.75854L8.16699 2.95964C8.39529 3.02674 8.70629 3.19124 8.92959 3.39534Z", fill: "white" })));
+
+const ThailandRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
+        React__default.createElement("rect", { x: "-4", y: "-0.0166016", width: "28", height: "20", fill: "#ED1C24" }),
+        React__default.createElement("rect", { x: "-4", y: "3.31665", width: "28", height: "13.3333", fill: "white" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M-4 6.65015H24V13.3168H-4V6.65015Z", fill: "#241D4F" }))));
+const ThailandSquareIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 17", fill: "none" }, props),
+    React__default.createElement("rect", { y: "0.983398", width: "24", height: "16", rx: "2", fill: "#ED1C24" }),
+    React__default.createElement("rect", { y: "3.65039", width: "24", height: "10.6667", fill: "white" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 6.31689H24V11.6502H0V6.31689Z", fill: "#241D4F" })));
+
+const VietnamRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
+        React__default.createElement("rect", { x: "-4", y: "-0.0166016", width: "28", height: "20", fill: "#DA251D" }),
+        React__default.createElement("path", { d: "M11.7228 10.8677L14.2819 9.00839L11.1187 9.00839L10.1409 6L9.16316 9.00839L6 9.00839L8.5591 10.8677L7.58184 13.8766L10.1409 12.0168L12.7 13.8766L11.7228 10.8677Z", fill: "#FFEB3B" }))));
+const VietnamSquareIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("clipPath", null,
+            React__default.createElement("rect", { width: "24", height: "16", fill: "white" })),
+        React__default.createElement("path", { d: "M2.01386e-10 2C0 0.895431 0.895431 -7.50368e-10 2 -1.67599e-09L22 -1.84359e-08C23.1046 -1.93615e-08 24 0.895431 24 2L24 14C24 15.1046 23.1046 16 22 16L2 16C0.89543 16 1.52092e-09 15.1046 1.4097e-09 14L2.01386e-10 2Z", fill: "#DA251D" }),
+        React__default.createElement("path", { d: "M13.7823 8.92854L16.6663 6.8332L13.1016 6.8332L11.9997 3.44287L10.8978 6.8332L7.33301 6.8332L10.217 8.92854L9.11567 12.3195L11.9997 10.2235L14.8837 12.3195L13.7823 8.92854Z", fill: "#FFEB3B" }))));
+
+var styles$2 = {"flag":"pfaLGRK"};
+
+const Flag = ({ country, language, rounded, height, width, isTesting, className, }) => {
+    let flag;
+    let flagRounded;
+    switch (language) {
+        case 'en':
+            flag = React__default.createElement(EnglishSquareIcon, null);
+            flagRounded = React__default.createElement(EnglishRoundIcon, null);
+            break;
+        case 'vi':
+            flag = React__default.createElement(VietnamSquareIcon, null);
+            flagRounded = React__default.createElement(VietnamRoundIcon, null);
+            break;
+        case 'id':
+            flag = React__default.createElement(IndonesiaSquareIcon, { isTesting: isTesting });
+            flagRounded = React__default.createElement(IndonesiaRoundIcon, { isTesting: isTesting });
+            break;
+        case 'th':
+            flag = React__default.createElement(ThailandSquareIcon, null);
+            flagRounded = React__default.createElement(ThailandRoundIcon, null);
+            break;
+        case 'km':
+            flag = React__default.createElement(CambodiaSquareIcon, null);
+            flagRounded = React__default.createElement(CambodiaRoundIcon, null);
+            break;
+        case 'ms':
+            flag = React__default.createElement(MalaysiaSquareIcon, null);
+            flagRounded = React__default.createElement(MalaysiaRoundIcon, null);
+            break;
+        case 'my':
+            flag = React__default.createElement(MyanmarSquareIcon, null);
+            flagRounded = React__default.createElement(MyanmarRoundIcon, null);
+            break;
+        case 'tl':
+            flag = React__default.createElement(PhilippinesSquareIcon, null);
+            flagRounded = React__default.createElement(PhilippinesRoundIcon, null);
+            break;
+        case 'hi':
+            flag = React__default.createElement(IndiaSquareIcon, null);
+            flagRounded = React__default.createElement(IndiaRoundIcon, null);
+            break;
+        case 'zh':
+            flag = React__default.createElement(TaiwanSquareIcon, null);
+            flagRounded = React__default.createElement(TaiwanRoundIcon, null);
+            break;
+    }
+    if (!flag && !flagRounded) {
+        switch (country) {
+            case 'VN':
+                flag = React__default.createElement(VietnamSquareIcon, null);
+                flagRounded = React__default.createElement(VietnamRoundIcon, null);
+                break;
+            case 'ID':
+                flag = React__default.createElement(IndonesiaSquareIcon, { isTesting: isTesting });
+                flagRounded = React__default.createElement(IndonesiaRoundIcon, { isTesting: isTesting });
+                break;
+            case 'TH':
+                flag = React__default.createElement(ThailandSquareIcon, null);
+                flagRounded = React__default.createElement(ThailandRoundIcon, null);
+                break;
+            case 'KH':
+                flag = React__default.createElement(CambodiaSquareIcon, null);
+                flagRounded = React__default.createElement(CambodiaRoundIcon, null);
+                break;
+            case 'MY':
+                flag = React__default.createElement(MalaysiaSquareIcon, null);
+                flagRounded = React__default.createElement(MalaysiaRoundIcon, null);
+                break;
+            case 'MM':
+                flag = React__default.createElement(MyanmarSquareIcon, null);
+                flagRounded = React__default.createElement(MyanmarRoundIcon, null);
+                break;
+            case 'PH':
+                flag = React__default.createElement(PhilippinesSquareIcon, null);
+                flagRounded = React__default.createElement(PhilippinesRoundIcon, null);
+                break;
+            case 'IN':
+                flag = React__default.createElement(IndiaSquareIcon, null);
+                flagRounded = React__default.createElement(IndiaRoundIcon, null);
+                break;
+            case 'TW':
+                flag = React__default.createElement(TaiwanSquareIcon, null);
+                flagRounded = React__default.createElement(TaiwanRoundIcon, null);
+                break;
+        }
+    }
+    return (React__default.createElement("div", { className: `${styles$2.flag} ${className || ''}`, style: {
+            '--width': width || 20,
+            '--height': height || 20,
+        } }, rounded ? flagRounded : flag));
+};
+
+const Select = forwardRef((_a, ref) => {
+    var { keepSearch = false } = _a, props = __rest(_a, ["keepSearch"]);
+    if (keepSearch) {
+        return (React__default.createElement(_AutoComplete, Object.assign({}, props, { ref: ref })));
+    }
+    else {
+        return React__default.createElement(_Select, Object.assign({}, props, { ref: ref }));
+    }
+});
+const _AutoComplete = forwardRef((_a, ref) => {
+    var { value, defaultValue, onChange, clearable } = _a, props = __rest(_a, ["value", "defaultValue", "onChange", "clearable"]);
+    const [_value, handleChange] = useUncontrolled({
+        value,
+        defaultValue,
+        onChange,
+    });
+    const onClear = () => {
+        handleChange('');
+    };
+    return (React__default.createElement(Autocomplete, Object.assign({ ref: ref, rightSection: React__default.createElement(Image, { src: 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__default.createElement(ActionIcon, { onClick: onClear, sx: { cursor: 'pointer' } },
+                React__default.createElement(_IconSelect, null))),
+        }
+        : {}))));
+});
+const _Select = forwardRef((_a, ref) => {
+    var { searchValue, onSearchChange } = _a, props = __rest(_a, ["searchValue", "onSearchChange"]);
+    const [_searchValue, handleSearchChange] = useUncontrolled({
+        defaultValue: '',
+        value: searchValue,
+        onChange: onSearchChange,
+    });
+    const onClear = () => {
+        handleSearchChange('');
+    };
+    return (React__default.createElement(Select$1, Object.assign({ ref: ref, rightSection: React__default.createElement(ArrowDown, { size: 18 }), rightSectionProps: { style: { pointerEvents: 'none' } }, size: "md", maxDropdownHeight: 300, onSearchChange: (e) => handleSearchChange(e), searchValue: _searchValue }, props, (props.clearable && (_searchValue === null || _searchValue === void 0 ? void 0 : _searchValue.length) > 0
+        ? {
+            rightSection: (React__default.createElement(ActionIcon, { onClick: onClear, sx: { cursor: 'pointer' } },
+                React__default.createElement(_IconSelect, null))),
+        }
+        : {}))));
+});
+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);
+};
+const getIsLargeMobile = () => {
+    return (typeof window !== 'undefined' &&
+        window.innerWidth >= Breakpoints.BREAK_POINT_MOBILE &&
+        window.innerWidth < Breakpoints.BREAK_POINT_PC);
+};
+const useScreenSize = () => {
+    const [isMobile, setIsMobile] = useState(getIsMobile());
+    const [isLargeMobile, setIsLargeMobile] = useState(getIsLargeMobile());
+    useEffect(() => {
+        const handleResize = () => {
+            setIsMobile(getIsMobile());
+            setIsLargeMobile(getIsLargeMobile());
+        };
+        window.addEventListener('resize', handleResize, {
+            passive: true,
+        });
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return { isMobile, isLargeMobile };
+};
+
+class ErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            hasError: false,
+        };
+    }
+    static getDerivedStateFromError() {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('Uncaught error:', error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return this.props.fallback || React__default.createElement(React__default.Fragment, null);
+        }
+        return this.props.children;
+    }
+}
+
+const CarouselWrapper$1 = (_a) => {
+    var { slidesToShow = 1, children } = _a, props = __rest(_a, ["slidesToShow", "children"]);
+    const length = Array.isArray(children) ? children.length : 1;
+    if (!length)
+        return null;
+    return (React__default.createElement(ErrorBoundary, null,
+        React__default.createElement(Carousel$1
+        // get 2 precision number
+        , Object.assign({ 
+            // get 2 precision number
+            slideSize: String(Math.floor((1 / slidesToShow) * 10000) / 100) + '%', containScroll: "trimSnaps" }, props), children)));
+};
+const Carousel = CarouselWrapper$1;
+Carousel.Slide = Carousel$1.Slide;
+
+const StyledCarousel = styled(Carousel) `
+  cursor: grab;
+  width: 100%;
+  .mantine-Carousel-control {
+    background: rgb(255, 255, 255);
+    opacity: 1;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    &[data-inactive] {
+      opacity: 0;
+      cursor: default;
+    }
+    &: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 = 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',
+                },
+            }),
+        },
+    });
+};
+
+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' ? 4 : 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 _Breadcrumbs = (_a) => {
+    var _b;
+    var { children, showHomeIcon = true, homeIconHref = '/' } = _a, rest = __rest(_a, ["children", "showHomeIcon", "homeIconHref"]);
+    const theme = useMantineTheme();
+    const isMarryBaby = ((_b = theme === null || theme === void 0 ? void 0 : theme.other) === null || _b === void 0 ? void 0 : _b.template) === 'mb';
+    const [embla, setEmbla] = useState(null);
+    const { isMobile } = useScreenSize();
+    const [, setShouldAllowClick] = useState(true);
+    const handleScroll = useCallback(() => {
+        setShouldAllowClick(false);
+    }, []);
+    const handlePointerUp = useCallback(() => {
+        setTimeout(() => {
+            setShouldAllowClick(true);
+        }, 1000);
+    }, []);
+    useEffect(() => {
+        if (embla) {
+            embla.on('scroll', handleScroll);
+            embla.on('pointerUp', handlePointerUp);
+        }
+        return () => {
+            if (embla) {
+                embla.off('scroll', handleScroll);
+                embla.on('pointerUp', handlePointerUp);
+            }
+        };
+    }, [embla, handleScroll, handlePointerUp]);
+    return (React__default.createElement(StyledCarousel, Object.assign({ align: "center", slideGap: "xs", dragFree: true, draggable: isMobile, slideSize: "0", getEmblaApi: setEmbla, controlsOffset: -52, previousControlIcon: React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+            React__default.createElement("path", { d: "M6.86589 3.56104C7.03647 3.56104 7.20724 3.62732 7.33724 3.75765L7.39453 3.81494C7.6552 4.07561 7.6552 4.49765 7.39453 4.75765L4.81901 7.33317L13.5326 7.33317C13.9006 7.33317 14.1992 7.63184 14.1992 7.99984C14.1992 8.36784 13.9006 8.6665 13.5326 8.6665L4.81901 8.66651L7.39453 11.242C7.6552 11.5027 7.6552 11.9247 7.39453 12.1847L7.33724 12.242C7.07657 12.5027 6.65453 12.5027 6.39453 12.242L2.6237 8.47119C2.36303 8.21053 2.36303 7.78849 2.6237 7.52849L6.39453 3.75765C6.52487 3.62732 6.6953 3.56104 6.86589 3.56104Z", fill: "#595959" })), nextControlIcon: React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+            React__default.createElement("path", { d: "M9.13411 12.439C8.96353 12.439 8.79276 12.3727 8.66276 12.2423L8.60547 12.1851C8.3448 11.9244 8.3448 11.5023 8.60547 11.2423L11.181 8.66683L2.46745 8.66683C2.09945 8.66683 1.80078 8.36816 1.80078 8.00016C1.80078 7.63216 2.09945 7.3335 2.46745 7.3335L11.181 7.3335L8.60547 4.75797C8.3448 4.49731 8.3448 4.07527 8.60547 3.81527L8.66276 3.75797C8.92343 3.49731 9.34547 3.49731 9.60547 3.75797L13.3763 7.52881C13.637 7.78947 13.637 8.21152 13.3763 8.47152L9.60547 12.2423C9.47513 12.3727 9.3047 12.439 9.13411 12.439Z", fill: "#595959" })) }, rest),
+        showHomeIcon && (React__default.createElement(Carousel.Slide, { style: { borderRight: `1px solid ${themeColors.neutral[1]}` } },
+            React__default.createElement(BreadcrumbItem, { href: homeIconHref, target: "_blank", className: "pointer-event-child-none" },
+                React__default.createElement(Box, { sx: Object.assign({}, (!isMarryBaby && {
+                        borderRadius: '50%',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    })), bg: !isMarryBaby && themeColors.neutral[0], p: !isMarryBaby ? 6 : 0 },
+                    React__default.createElement(AspectRatio, { ratio: 1, w: 18 }, isMarryBaby ? (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+                        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1183 3.67722C12.8727 2.70772 11.1281 2.708 9.88187 3.67718L14.1183 3.67722ZM14.1183 3.67722L19.718 8.03283C20.5589 8.68632 21.05 9.69173 21.05 10.7562V17.6002C21.05 19.5057 19.5055 21.0502 17.6 21.0502H6.40016C4.49466 21.0502 2.9502 19.5057 2.9502 17.6002V10.7562C2.9502 9.69163 3.44113 8.68632 4.28216 8.03283L9.88187 3.67718M10.6799 4.70339L5.08006 9.05916C4.55657 9.46592 4.2502 10.0923 4.2502 10.7562V17.6002C4.2502 18.7878 5.21263 19.7502 6.40016 19.7502H17.6C18.7875 19.7502 19.75 18.7878 19.75 17.6002V10.7562C19.75 10.0923 19.4438 9.46612 18.9204 9.05936L13.3202 4.70335C12.5443 4.09941 11.4571 4.09905 10.6799 4.70339Z", fill: "#3E3F58" }),
+                        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2373 13.1626C12.5546 12.4794 11.4466 12.4791 10.7629 13.1628C10.0793 13.8464 10.0793 14.9538 10.7629 15.6374C11.4465 16.321 12.5539 16.321 13.2375 15.6374C13.9211 14.9538 13.9211 13.8464 13.2375 13.1628L13.2373 13.1626ZM14.1567 12.2436C12.9661 11.0521 11.0348 11.0525 9.84366 12.2436C8.65237 13.4348 8.65237 15.3653 9.84366 16.5566C11.0349 17.7479 12.9654 17.7479 14.1567 16.5566C15.348 15.3653 15.348 13.4348 14.1567 12.2436Z", fill: "#3E3F58" }))) : (React__default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
+                        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.58691 5.59863L8.58691 1.62305C8.83594 1.45898 9.16406 1.45898 9.41309 1.62305L15.4131 5.59863C15.624 5.73926 15.75 5.97363 15.75 6.22559V14.25C15.75 15.0791 15.0791 15.75 14.25 15.75H3.75C2.9209 15.75 2.25 15.0791 2.25 14.25V6.22559C2.25 5.97363 2.37598 5.73926 2.58691 5.59863ZM5.5017 11.7602C5.1717 11.5108 5.17316 11.0321 5.46521 10.7391C5.75775 10.4456 6.24936 10.4292 6.5986 10.6522C7.17818 11.0223 8.12516 11.4889 9.21628 11.4889C10.3074 11.4889 11.2543 11.0223 11.8339 10.6522C12.1832 10.4292 12.6748 10.4456 12.9673 10.7391C13.2594 11.0321 13.2608 11.5108 12.9308 11.7602C11.8743 12.5589 10.535 12.9889 9.21628 12.9889C7.89758 12.9889 6.55824 12.5589 5.5017 11.7602Z", fill: "#595959" })))))))),
+        React__default.createElement(Carousel.Slide, null),
+        React__default.createElement(Carousel.Slide, null,
+            React__default.createElement(Breadcrumbs$1, { styles: {
+                    separator: {
+                        marginInline: 4,
+                    },
+                }, separator: React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+                    React__default.createElement("path", { d: "M8.71527 7.99969L6.16794 5.45236C5.89194 5.17636 5.89194 4.72836 6.16794 4.45236C6.44394 4.17636 6.89194 4.17636 7.16794 4.45236L10.2439 7.52836C10.5046 7.78903 10.5046 8.21103 10.2439 8.47103L7.16794 11.547C6.89194 11.823 6.44394 11.823 6.16794 11.547C5.89194 11.271 5.89194 10.823 6.16794 10.547L8.71527 7.99969Z", fill: "#8C8C8C" })) }, children))));
+};
+const Breadcrumbs = _Breadcrumbs;
+Breadcrumbs.Item = BreadcrumbItem;
+
+const StyledTextArea = styled(Textarea) `
+  .mantine-Textarea-input {
+    padding: 12px 16px;
+    background: #ffffff;
+    border: 1px solid ${theme.colors.gray200};
+    border-radius: 4px;
+  }
+`;
+
+var useStyles$2 = createStyles((theme) => {
+    return {
+        root: {},
+        inner: {},
+        content: {
+            padding: 0,
+        },
+        header: {
+            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+            marginRight: 0,
+            marginBottom: 0,
+            padding: '1rem',
+        },
+        overlay: {},
+        title: {
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginRight: 0,
+        },
+        body: {},
+        close: {
+            cursor: 'pointer',
+            width: '24px',
+            height: '24px',
+        },
+    };
+});
+
+const StyledAccordion = styled(Accordion$1) `
+  .mantine-Accordion-label {
+    padding: 0;
+  }
+  .mantine-Accordion-control {
+    &:hover {
+      background-color: transparent;
+    }
+  }
+  .mantine-Accordion-item {
+    .mantine-Accordion-chevron {
+      > div {
+        background-repeat: no-repeat;
+        width: 16px;
+        height: 16px;
+        background-position: center;
+        background-image: url(${(props) => props.closeChevron || CommonGAssets.getAssetPath('plus-icon.svg')});
+      }
+    }
+    &[data-active='true'] {
+      .mantine-Accordion-chevron {
+        > div {
+          background-image: url(${(props) => props.openChevron || CommonGAssets.getAssetPath('minus-icon.svg')});
+        }
+      }
+    }
+  }
+  .mantine-Accordion-panel {
+    border-radius: ${theme.borderRadius};
+  }
+  .mantine-Accordion-content {
+    white-space: pre-wrap;
+  }
+`;
+
+const _Accordion = (_a) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (React__default.createElement(StyledAccordion, Object.assign({ chevron: React__default.createElement("div", null), disableChevronRotation: true, transitionDuration: 300 }, rest), children));
+};
+const Accordion = _Accordion;
+Accordion.Control = Accordion$1.Control;
+Accordion.Item = Accordion$1.Item;
+Accordion.Panel = Accordion$1.Panel;
+
+const DEFAULT_AVATAR = CommonGAssets.getAssetPath('avatar.jpg');
+const Avatar = (_a) => {
+    var { withIndicator = false, indicatorConfig = null, size = 56, children, styles, placeholderText } = _a, // usually first letter of name
+    avatarProps = __rest(_a, ["withIndicator", "indicatorConfig", "size", "children", "styles", "placeholderText"]);
+    const generateAvatar = () => {
+        return (React__default.createElement(Avatar$1, Object.assign({ size: size, radius: "xl" }, avatarProps, { imageProps: Object.assign({ loading: 'lazy' }, avatarProps.imageProps), styles: {
+                placeholder: {
+                    backgroundColor: avatarProps.color,
+                    color: 'white',
+                },
+            } }), children ? (children) : placeholderText ? (placeholderText) : (React__default.createElement(ImageWrap, { src: DEFAULT_AVATAR, width: size, alt: avatarProps.alt || 'avatar' }))));
+    };
+    if (withIndicator)
+        return (React__default.createElement(Indicator, Object.assign({ inline: true, position: "bottom-end", offset: 9 }, indicatorConfig, { styles: Object.assign({ indicator: {
+                    backgroundColor: React__default.isValidElement(indicatorConfig.label) && 'transparent',
+                    zIndex: 1,
+                } }, styles) }), generateAvatar()));
+    return generateAvatar();
+};
+
+const FileInput = (props) => {
+    return React__default.createElement(FileInput$1, Object.assign({ size: "md" }, props));
+};
+
+const DEBOUNCED_TIME = 300;
+const emotionCache = createEmotionCache({
+    key: 'mantine',
+    prepend: false,
+});
+
+const NumberInput = (_a) => {
+    var { value: _value, onChange: _onChange } = _a, props = __rest(_a, ["value", "onChange"]);
+    const [value, setValue] = useState(_value);
+    const [debounced] = useDebouncedValue(value, DEBOUNCED_TIME);
+    useEffect(() => {
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(debounced);
+    }, [debounced]);
+    useEffect(() => {
+        setValue(_value);
+    }, [_value]);
+    return (React__default.createElement(NumberInput$1, Object.assign({ size: "md", stepHoldDelay: 500, stepHoldInterval: (t) => Math.max(1000 / Math.pow(t, 2), 25), onChange: setValue, hideControls: true, min: 0, formatter: (value) => {
+            if (Number(value) === 0)
+                return value;
+            return value || '';
+        }, removeTrailingZeros: true, value: value }, props)));
+};
+
+const EyeVisible = CommonGAssets.getAssetPath('EyeVisible.svg');
+const EyeHidden = CommonGAssets.getAssetPath('EyeHidden.svg');
+const PasswordInput = forwardRef((props, ref) => {
+    const { size = 'md', visibilityToggleIcon: visibilityToggleIconProps } = props, restProps = __rest(props, ["size", "visibilityToggleIcon"]);
+    const visibilityToggleIcon = visibilityToggleIconProps ||
+        (({ reveal, size }) => reveal ? (React__default.createElement("img", { src: EyeVisible, width: size, loading: "lazy" })) : (React__default.createElement("img", { src: EyeHidden, width: size, loading: "lazy" })));
+    return (React__default.createElement(PasswordInput$1, Object.assign({ ref: ref, size: size, visibilityToggleIcon: visibilityToggleIcon }, restProps, { className: `input-control ${(restProps === null || restProps === void 0 ? void 0 : restProps.className) || ''}` })));
+});
+
+const InputWrapper = forwardRef((_a, ref) => {
+    var { value: _value, onChange: _onChange, onChangeRaw, maxLength } = _a, props = __rest(_a, ["value", "onChange", "onChangeRaw", "maxLength"]);
+    const [value, setValue] = useState(_value || '');
+    const [debounced] = useDebouncedValue(value, DEBOUNCED_TIME);
+    useEffect(() => {
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(debounced);
+    }, [debounced]);
+    useEffect(() => {
+        setValue(_value);
+    }, [_value]);
+    return (React__default.createElement(TextInput, Object.assign({ ref: ref, size: "md", onChange: (event) => {
+            if (typeof maxLength === 'number' &&
+                event.currentTarget.value.length > maxLength) {
+                return;
+            }
+            onChangeRaw === null || onChangeRaw === void 0 ? void 0 : onChangeRaw(event);
+            setValue(event.currentTarget.value);
+        }, value: value }, props, { maxLength: maxLength, className: `input-control ${(props === null || props === void 0 ? void 0 : props.className) || ''}` })));
+});
+const Input = InputWrapper;
+Input.File = FileInput;
+Input.Password = PasswordInput;
+Input.Number = NumberInput;
+Input.Wrapper = Input$1.Wrapper;
+
+const StyledSlide = Carousel$1.Slide;
+
+const SlideContext = createContext({});
+const CustomSlide = (_a) => {
+    var { children, onClick, innerSlideProps } = _a, rest = __rest(_a, ["children", "onClick", "innerSlideProps"]);
+    const { slider, selectSlideWhenClick } = useContext(SlideContext);
+    const ref = useRef();
+    const key = useRef('');
+    const [index, setIndex] = useState(0);
+    useEffect(() => {
+        key.current = String(Math.round(Math.random() * 10000));
+    }, []);
+    useEffect(() => {
+        const slidesNode = (slider === null || slider === void 0 ? void 0 : slider.slideNodes()) || [];
+        setIndex(slidesNode.findIndex((obj) => obj.dataset.key === key.current));
+    }, [slider]);
+    const sliderProps = {
+        ref,
+        'data-key': key.current,
+        'data-index': index,
+    };
+    return (React__default.createElement(StyledSlide, Object.assign({}, sliderProps, rest),
+        React__default.createElement("div", Object.assign({ style: {
+                height: '100%',
+            }, onClick: () => {
+                selectSlideWhenClick && (slider === null || slider === void 0 ? void 0 : slider.scrollTo(index));
+                onClick === null || onClick === void 0 ? void 0 : onClick(index);
+            } }, innerSlideProps), children)));
+};
+const findIndexFromLeftSide = (position, slideLength) => {
+    return position >= slideLength ? position - slideLength : position;
+};
+const findIndexFromRight = (position, slideLength) => {
+    return position < 0 ? slideLength + position : position;
+};
+const CarouselWrapper = (_a) => {
+    var { children, blurFromCenter, blurFromIndex, blurLength = 3, maxBlurOpacity = 0.5, onSlideChange, selectSlideWhenClick } = _a, props = __rest(_a, ["children", "blurFromCenter", "blurFromIndex", "blurLength", "maxBlurOpacity", "onSlideChange", "selectSlideWhenClick"]);
+    const { width } = useViewportSize();
+    const [ref] = useResizeObserver();
+    const slider = useRef(null);
+    const [centerSlide, setCenterSlide] = useState(0);
+    const handleStyle = () => {
+        var _a, _b, _c, _d, _e;
+        const slidesNode = ((_a = slider === null || slider === void 0 ? void 0 : slider.current) === null || _a === void 0 ? void 0 : _a.slideNodes()) || [];
+        if (((_b = slider === null || slider === void 0 ? void 0 : slider.current) === null || _b === void 0 ? void 0 : _b.slideNodes().length) <=
+            ((_c = slider === null || slider === void 0 ? void 0 : slider.current) === null || _c === void 0 ? void 0 : _c.slidesInView().length)) {
+            slidesNode.map((item) => {
+                item.classList.remove('center-slide');
+                item.style.opacity = '1';
+            });
+            return false;
+        }
+        const centerSlideIndex = (_d = slider === null || slider === void 0 ? void 0 : slider.current) === null || _d === void 0 ? void 0 : _d.selectedScrollSnap();
+        setCenterSlide(centerSlideIndex);
+        const slidesNodeLength = slidesNode.length;
+        const slidesInView = (_e = slider === null || slider === void 0 ? void 0 : slider.current) === null || _e === void 0 ? void 0 : _e.slidesInView();
+        const slidesInViewLength = slidesInView.length;
+        const halfSideLength = Math.floor(slidesInViewLength / 2);
+        const halfSideBlurLength = blurFromCenter
+            ? blurFromIndex + blurLength - 1
+            : halfSideLength;
+        const lastRightBlurIndexTmp = centerSlideIndex + halfSideBlurLength;
+        const lastRightBlurIndex = lastRightBlurIndexTmp === slidesNodeLength
+            ? 0
+            : lastRightBlurIndexTmp > slidesNodeLength
+                ? lastRightBlurIndexTmp - slidesNodeLength
+                : lastRightBlurIndexTmp;
+        const lastLeftBlurIndexTmp = centerSlideIndex - halfSideBlurLength;
+        const lastLeftBlurIndex = lastLeftBlurIndexTmp < 0
+            ? slidesNodeLength + lastLeftBlurIndexTmp
+            : lastLeftBlurIndexTmp > 0
+                ? centerSlideIndex - halfSideBlurLength
+                : 0;
+        const visibleSlide = [
+            ...new Set(Array(halfSideBlurLength * 2 + 1)
+                .fill('')
+                .map((i, idx) => {
+                const findFrom = lastLeftBlurIndex;
+                return findIndexFromLeftSide(findFrom + idx, slidesNodeLength);
+            })),
+        ];
+        slidesNode.map((item, index) => {
+            if (index === centerSlideIndex) {
+                item.classList.add('center-slide');
+            }
+            else {
+                item.classList.remove('center-slide');
+            }
+            if (visibleSlide.indexOf(index) !== -1) {
+                const opacityGap = maxBlurOpacity / blurLength;
+                for (let i = 0; i < blurLength; i++) {
+                    if (index ===
+                        findIndexFromLeftSide(lastLeftBlurIndex + i, slidesNodeLength) ||
+                        index ===
+                            findIndexFromRight(lastRightBlurIndex - i, slidesNodeLength)) {
+                        item.style.opacity = String((i + 1) * opacityGap);
+                        break;
+                    }
+                    item.style.opacity = '1';
+                }
+            }
+            else {
+                item.style.opacity = '0';
+            }
+        });
+    };
+    const sliderProps = {
+        getEmblaApi: (embla) => {
+            slider.current = embla;
+        },
+        onSlideChange: (index) => {
+            handleStyle();
+            onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(index);
+        },
+    };
+    useEffect(() => {
+        (slider === null || slider === void 0 ? void 0 : slider.current) && handleStyle();
+    }, [width]);
+    const useStyles = createStyles(() => {
+        var _a, _b;
+        return ({
+            control: Object.assign({}, (((_a = slider === null || slider === void 0 ? void 0 : slider.current) === null || _a === void 0 ? void 0 : _a.slideNodes().length) <=
+                ((_b = slider === null || slider === void 0 ? void 0 : slider.current) === null || _b === void 0 ? void 0 : _b.slidesInView().length) && {
+                display: 'none',
+            })),
+        });
+    });
+    const { classes } = useStyles();
+    return (React__default.createElement(SlideContext.Provider, { value: { slider: slider === null || slider === void 0 ? void 0 : slider.current, centerSlide, selectSlideWhenClick } },
+        React__default.createElement(Carousel$1, Object.assign({ classNames: {
+                control: classes.control,
+            }, ref: ref, slideSize: 'auto', containScroll: "trimSnaps" }, sliderProps, props, { loop: true }), typeof children === 'function' ? children(centerSlide) : children)));
+};
+const CentralCarousel = CarouselWrapper;
+CentralCarousel.Slide = CustomSlide;
+
+const CheckboxWrapper = (_a) => {
+    var { styles, color = 'blue' } = _a, props = __rest(_a, ["styles", "color"]);
+    const theme = useMantineTheme();
+    const hexColor = useMemo(() => {
+        var _a, _b;
+        return ((color === null || color === void 0 ? void 0 : color.includes('.'))
+            ? (_a = theme.colors[color.split('.')[0]]) === null || _a === void 0 ? void 0 : _a[color.split('.')[1]]
+            : (_b = theme.colors[color]) === null || _b === void 0 ? void 0 : _b[theme.primaryShade || 6]) ||
+            theme.colors.blue[6];
+    }, [color]);
+    return (React__default.createElement(Checkbox$1, Object.assign({ styles: Object.assign({ input: {
+                '&:hover': {
+                    border: `1px solid ${hexColor}`,
+                },
+            } }, styles), color: color }, props)));
+};
+const Checkbox = CheckboxWrapper;
+Checkbox.Group = Checkbox$1.Group;
+
+const StyledSlider = styled(Slider) `
+  ${(props) => {
+    const color = props.color || theme.colors.primaryBase;
+    return `
+      .mantine-Slider-bar {
+        background-color: ${color};
+      }
+      .mantine-Slider-thumb {
+        border-color: ${color};
+        color: ${color};
+      }
+    `;
+}}
+  [data-theme='marryBaby'] & {
+    ${(props) => {
+    const color = props.color || theme.mbColors.pink;
+    return `
+        .mantine-Slider-bar {
+          background-color: ${color};
+        }
+        .mantine-Slider-thumb {
+          border-color: ${color};
+          color: ${color};
+        }
+      `;
+}}
+  }
+
+  .mantine-Slider-label {
+    background-color: transparent;
+    color: #000;
+    font-size: 14px;
+    font-weight: bold;
+  }
+`;
+const StyledSliderWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  .hhg-mantine-slider {
+    flex-grow: 1;
+  }
+  button {
+    path:not([stroke]) {
+      stroke: ${theme.colors.primaryBase};
+    }
+  }
+  [data-theme='marryBaby'] & {
+    button {
+      path:not([stroke]) {
+        stroke: ${theme.mbColors.pink};
+      }
+    }
+  }
+`;
+
+const RadioWrapper = (_a) => {
+    var { styles, color = 'blue' } = _a, props = __rest(_a, ["styles", "color"]);
+    const theme = useMantineTheme();
+    const hexColor = useMemo(() => {
+        var _a, _b;
+        return ((color === null || color === void 0 ? void 0 : color.includes('.'))
+            ? (_a = theme.colors[color.split('.')[0]]) === null || _a === void 0 ? void 0 : _a[color.split('.')[1]]
+            : (_b = theme.colors[color]) === null || _b === void 0 ? void 0 : _b[theme.primaryShade || 6]) ||
+            theme.colors.blue[6];
+    }, [color]);
+    return (React__default.createElement(Radio$1, Object.assign({ styles: Object.assign({ radio: {
+                '&:hover': {
+                    border: `1px solid ${hexColor}`,
+                },
+            }, icon: {
+                color: `${hexColor}`,
+            } }, styles), color: color }, props)));
+};
+const Radio = RadioWrapper;
+Radio.Group = Radio$1.Group;
+
+function transferValueToOtp(value, valueLength = 6) {
+    const otp = new Array(valueLength).fill('');
+    if (value) {
+        const arr = value.toString().split('');
+        otp.map((_, index) => {
+            if (arr[index]) {
+                otp[index] = arr[index] || '';
+            }
+        });
+    }
+    return otp;
+}
+function transferOtpToValue(otp) {
+    return otp.join('');
+}
+
+var styles$1 = {"otpContainer":"_2iQs0sk","otpInput":"Ia6IojY","error":"yJs9MaD"};
+
+const BACKSPACE = 8;
+const LEFT_ARROW = 37;
+const RIGHT_ARROW = 39;
+const DELETE = 46;
+const SPACEBAR = 32;
+const OTPInputFunction = (props, ref) => {
+    const { maxLength = 1, placeholder, className } = props, restProps = __rest(props, ["maxLength", "placeholder", "className"]);
+    return (React__default.createElement("input", Object.assign({ maxLength: maxLength, className: cn(styles$1.otpInput, 'otpInput', className), placeholder: placeholder, type: "number" }, restProps, { ref: ref })));
+};
+const OTPInput = forwardRef(OTPInputFunction);
+const OTPFowardRef = (props, ref) => {
+    const { valueLength = 6, type = 'number', value: valueProps, defaultValue, placeholder, onChange, onBlur, } = props;
+    const inputRef = useRef(new Array(valueLength).fill(null));
+    const [value, setValue] = useState(defaultValue || valueProps);
+    const [activeOtp, setActiveOtp] = useState(-1);
+    const [otp, setOtp] = useState(() => transferValueToOtp(value, valueLength));
+    const changeCodeAtFocus = useCallback(() => {
+        if (activeOtp === -1) {
+            return;
+        }
+        const activeInput = inputRef.current[activeOtp];
+        if (activeInput) {
+            activeInput.value = '';
+            const newOtp = otp;
+            newOtp[activeOtp] = '';
+            setOtp(newOtp);
+            setValue(() => transferOtpToValue(newOtp));
+            onChange === null || onChange === void 0 ? void 0 : onChange(transferOtpToValue(newOtp));
+        }
+    }, [activeOtp, onChange, otp]);
+    const focusPrevInput = useCallback(() => {
+        if (activeOtp === 0) {
+            return;
+        }
+        const curInput = inputRef.current[activeOtp];
+        if (curInput) {
+            curInput.blur();
+        }
+        const prevInput = inputRef.current[activeOtp - 1];
+        if (prevInput) {
+            prevInput.focus();
+        }
+    }, [activeOtp]);
+    const focusNextInput = useCallback(() => {
+        if (activeOtp === valueLength - 1) {
+            return;
+        }
+        const curInput = inputRef.current[activeOtp];
+        if (curInput) {
+            curInput.blur();
+        }
+        const nextInput = inputRef.current[activeOtp + 1];
+        if (nextInput) {
+            nextInput.focus();
+        }
+    }, [activeOtp, valueLength]);
+    const inputOnChange = useCallback((e) => {
+        const target = e.target;
+        const targetValue = target.value;
+        const code = targetValue.toString().slice(0, 1);
+        const indexTarget = inputRef.current.findIndex((input) => input === target);
+        if (indexTarget !== -1) {
+            const newOtp = otp;
+            newOtp[indexTarget] = code;
+            setOtp(newOtp);
+            setValue(() => transferOtpToValue(newOtp));
+            onChange === null || onChange === void 0 ? void 0 : onChange(transferOtpToValue(newOtp));
+        }
+        focusNextInput();
+    }, [focusNextInput, onChange, otp]);
+    const inputOnFocus = useCallback((e) => {
+        const target = e.target;
+        const targetIndex = inputRef.current.findIndex((input) => input === target);
+        if (type === 'number') {
+            target.select();
+        }
+        else {
+            target.setSelectionRange(0, target.value.length, 'backward');
+        }
+        if (targetIndex !== -1) {
+            setActiveOtp(targetIndex);
+        }
+    }, []);
+    const inputOnPaste = useCallback((e) => {
+        const clipboard = e.clipboardData.getData('text/plain');
+        const newOtp = transferValueToOtp(clipboard, valueLength);
+        const newValue = transferOtpToValue(newOtp);
+        setOtp(newOtp);
+        setValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    }, [onChange, type, valueLength]);
+    // Handle cases of backspace, delete, left arrow, right arrow, space
+    const inputOnKeyDown = useCallback((e) => {
+        if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
+            e.preventDefault();
+            changeCodeAtFocus();
+            focusPrevInput();
+        }
+        else if (e.keyCode === DELETE || e.key === 'Delete') {
+            e.preventDefault();
+            changeCodeAtFocus();
+        }
+        else if (e.keyCode === LEFT_ARROW || e.key === 'ArrowLeft') {
+            e.preventDefault();
+            focusPrevInput();
+        }
+        else if (e.keyCode === RIGHT_ARROW || e.key === 'ArrowRight') {
+            e.preventDefault();
+            focusNextInput();
+        }
+        else if (e.keyCode === SPACEBAR ||
+            e.key === ' ' ||
+            e.key === 'Spacebar' ||
+            e.key === 'Space') {
+            e.preventDefault();
+        }
+    }, [changeCodeAtFocus, focusNextInput, focusPrevInput]);
+    useImperativeHandle(ref, () => inputRef.current[0], []);
+    useEffect(() => {
+        setOtp(() => transferValueToOtp(valueProps, valueLength));
+        setValue(valueProps);
+    }, [valueLength, valueProps]);
+    return (React__default.createElement(Flex, { justify: "center", columnGap: 8, className: cn(styles$1.otpContainer, 'otpContainer') }, otp.map((val, index) => {
+        return (React__default.createElement(OTPInput, { ref: (iRef) => {
+                inputRef.current[index] = iRef;
+            }, key: '' + index, value: val, type: type, onChange: inputOnChange, onFocus: inputOnFocus, onKeyDown: inputOnKeyDown, onPaste: inputOnPaste, onBlur: onBlur, placeholder: placeholder }));
+    })));
+};
+const OTP = forwardRef(OTPFowardRef);
+
+const countriesDefault = Object.values(siteOptions).reduce((countries, { phoneCountry: phone }) => {
+    if (!countries.includes(phone)) {
+        countries.push(phone);
+    }
+    return countries;
+}, []);
+
+var styles = {"phoneInput":"i-9Ibox","error":"YDWHh9b"};
+
+/* eslint-disable prettier/prettier */
+const CaretDown = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 8 5", fill: "currentColor" }, props),
+    React.createElement("path", { d: "M4 5L0.535898 0.5L7.4641 0.5L4 5Z" })));
+
+const PhoneForwardRef = (props, ref) => {
+    const { isError, defaultCountry, countries = countriesDefault, countryCallingCodeEditable = false, defaultValue, value: valueProps, onChange: onChangeProps, className } = props, inputProps = __rest(props, ["isError", "defaultCountry", "countries", "countryCallingCodeEditable", "defaultValue", "value", "onChange", "className"]);
+    const [value, setValue] = useState(defaultValue || valueProps);
+    const [PhoneInputUtils, setPhoneInputUtils] = useState(null);
+    const onChange = (val) => {
+        setValue(val);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(val);
+    };
+    useEffect(() => {
+        setValue(valueProps);
+    }, [valueProps]);
+    useEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            const PhoneInput = yield import('react-phone-number-input');
+            setPhoneInputUtils(PhoneInput);
+        }))();
+    }, []);
+    if (!PhoneInputUtils)
+        return null;
+    return (React__default.createElement(PhoneInputUtils.default
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    , Object.assign({ 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref: ref, value: value, onChange: onChange, countries: countries, defaultCountry: defaultCountry, countryCallingCodeEditable: countryCallingCodeEditable, className: cn(styles.phoneInput, { isError, [styles.error]: isError }, className), flagUrl: undefined, flagComponent: (props) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { country, countryName, flagUrl } = props, restProps = __rest(props, ["country", "countryName", "flagUrl"]);
+            const callingCode = country
+                ? `(+${PhoneInputUtils.getCountryCallingCode(country)})`
+                : '';
+            return (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Flag, Object.assign({ country: country, title: countryName }, restProps)),
+                React__default.createElement("span", { className: cn(styles.callingCode, 'PhoneInputCountryIconCallingCode') }, callingCode)));
+        }, countrySelectProps: {
+            arrowComponent: () => {
+                return (React__default.createElement("div", { className: cn(styles.arrowSelect, 'PhoneInputArrowContainer') },
+                    React__default.createElement(CaretDown, null)));
+            },
+        } }, inputProps)));
+};
+const Phone = forwardRef(PhoneForwardRef);
+
+var useStyles$1 = createStyles((theme, params) => {
+    const { variant } = params;
+    const gradientOverlay = {
+        content: 'none',
+        top: 0,
+        bottom: 0,
+        zIndex: 1,
+        width: rem(56),
+    };
+    return Object.assign({}, (variant === 'inline' && {
+        root: {},
+        tabsList: {
+            gap: rem(24),
+            borderBottom: 'none',
+            flexWrap: 'nowrap',
+        },
+        tab: {
+            padding: `${rem(8)} 0`,
+            color: theme.colors.gray[4],
+            borderColor: 'transparent',
+            borderBottomWidth: rem(2),
+            marginBottom: rem(-1),
+            transition: 'border 0.2s ease',
+            ['&:hover']: {
+                backgroundColor: 'initial',
+                borderColor: 'transparent',
+            },
+            [`&[data-active='true']`]: {
+                color: theme.fn.primaryColor(),
+                borderColor: theme.fn.primaryColor(),
+            },
+        },
+        tabRightSection: {},
+        tabLabel: {},
+        tabIcon: {},
+        panel: {},
+        scrollArea: {
+            position: 'relative',
+            '&.prev-bg': {
+                '&:before': Object.assign(Object.assign({}, gradientOverlay), { content: '""', position: 'absolute', left: 0, background: 'linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%)' }),
+            },
+            '&.next-bg': {
+                '&:after': Object.assign(Object.assign({}, gradientOverlay), { content: '""', position: 'absolute', right: 0, background: 'linear-gradient(90deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%)' }),
+            },
+        },
+        list: {
+            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+        },
+        btn: {
+            position: 'absolute',
+            top: '50%',
+            zIndex: 2,
+            transform: 'translate(0, -50%)',
+            width: rem(28),
+            height: rem(28),
+            padding: 0,
+            background: 'white',
+            borderRadius: '50%',
+            cursor: 'pointer',
+            filter: 'drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04)) drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))',
+            '.mantine-Button-icon': {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            },
+            '&.disabled': {
+                opacity: 0,
+                zIndex: 0,
+            },
+        },
+        prevBtn: {
+            left: 0,
+        },
+        nextBtn: {
+            right: 0,
+        },
+    }));
+});
+
+const _Tabs = (_a) => {
+    var _b;
+    var { variant = 'inline', value, styles, children, dataList = [], tabProps, listProps, panelProps, TabComponentDisplay, startPadding = 40, defaultValue } = _a, rest = __rest(_a, ["variant", "value", "styles", "children", "dataList", "tabProps", "listProps", "panelProps", "TabComponentDisplay", "startPadding", "defaultValue"]);
+    const { cx, classes } = useStyles$1({ variant }, { name: 'Tabs', styles });
+    const listRef = useRef(null);
+    const tabRef = useRef([]);
+    const [activeTab, setActiveTab] = useState(defaultValue || ((_b = dataList === null || dataList === void 0 ? void 0 : dataList[0]) === null || _b === void 0 ? void 0 : _b.value));
+    const [currentSlide, setCurrentSlide] = useState(0);
+    const [disableNext, setDisableNext] = useState(false);
+    const [disablePrevious, setDisablePrevious] = useState(true);
+    const [scrollPosition, onScrollPositionChange] = useState({ x: 0, y: 0 });
+    const viewport = useRef(null);
+    const props = Object.assign({ defaultValue, classNames: classes }, (!children
+        ? {
+            value: activeTab,
+            onTabChange: (v) => setActiveTab(v),
+        }
+        : {
+            value,
+        }));
+    useEffect(() => {
+        setActiveTab(value);
+    }, [value]);
+    useEffect(() => {
+        var _a, _b, _c;
+        (_a = viewport.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            left: ((_c = (_b = tabRef === null || tabRef === void 0 ? void 0 : tabRef.current) === null || _b === void 0 ? void 0 : _b[currentSlide]) === null || _c === void 0 ? void 0 : _c.offsetLeft) - startPadding,
+            behavior: 'smooth',
+        });
+    }, [currentSlide]);
+    useEffect(() => {
+        setCurrentSlide(dataList.findIndex((i) => i.value == activeTab));
+    }, [activeTab]);
+    useEffect(() => {
+        var _a, _b;
+        setDisablePrevious(scrollPosition.x === 0);
+        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__default.createElement(TabComponentDisplay, null, text)) : (React__default.createElement(Text, { size: "s3", color: "inherit", weight: "semiBold", "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, text));
+    return (React__default.createElement(Tabs$1, Object.assign({}, props, rest), children || (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(ScrollArea, { className: cx(classes.scrollArea, `${!disablePrevious ? 'prev-bg' : ''} ${!disableNext ? 'next-bg' : ''}`), scrollbarSize: 0, viewportRef: viewport, onScrollPositionChange: onScrollPositionChange },
+            React__default.createElement(Tabs$1.List, Object.assign({ className: classes.list, ref: listRef }, listProps), dataList.map((i, idx) => (React__default.createElement(Tabs$1.Tab, Object.assign({ ref: (e) => (tabRef.current[idx] = e), className: classes.tab, key: String(i.value), value: String(i.value) }, tabProps),
+                React__default.createElement(TabTextComponent, Object.assign({}, i)))))),
+            React__default.createElement(Button, { className: cx(classes.btn, classes.prevBtn, disablePrevious ? 'disabled' : ''), unstyled: true, onClick: () => setCurrentSlide(currentSlide - 1 > -1 ? currentSlide - 1 : 0), leftIcon: React__default.createElement(ArrowLeft, { size: 16 }) }),
+            React__default.createElement(Button, { className: cx(classes.btn, classes.nextBtn, disableNext ? 'disabled' : ''), unstyled: true, onClick: () => setCurrentSlide(currentSlide + 1 < dataList.length - 1
+                    ? currentSlide + 1
+                    : dataList.length - 1), leftIcon: React__default.createElement(ArrowRight, { size: 16 }) })),
+        dataList.map((i) => (React__default.createElement(Tabs$1.Panel, Object.assign({ value: String(i.value), key: String(i.value) }, panelProps), i.content)))))));
+};
+const Tabs = _Tabs;
+Tabs.List = Tabs$1.List;
+Tabs.Tab = Tabs$1.Tab;
+Tabs.Panel = Tabs$1.Panel;
+
+const PopoverContext = createContext({});
+const _Popover = (_a) => {
+    var { children, closeOnClickOutside = true } = _a, rest = __rest(_a, ["children", "closeOnClickOutside"]);
+    const [opened, { close, open }] = useDisclosure(false);
+    const ref = closeOnClickOutside
+        ? useClickOutside(close)
+        : useRef();
+    const props = Object.assign({}, (typeof children === 'function' ? { opened: opened } : {}));
+    return (React__default.createElement(PopoverContext.Provider, { value: { opened, close, open } },
+        React__default.createElement(Popover$1, Object.assign({ closeOnClickOutside: closeOnClickOutside }, props, rest),
+            React__default.createElement("div", { ref: ref }, typeof children === 'function'
+                ? children({ open, close, opened })
+                : children))));
+};
+const Popover = _Popover;
+Popover.Target = Popover$1.Target;
+Popover.Dropdown = Popover$1.Dropdown;
+
+var useStyles = createStyles((theme) => {
+    var _a;
+    return {
+        root: {},
+        iconWrapper: {
+            display: 'none',
+        },
+        label: {
+            display: 'inline-block',
+            cursor: 'pointer',
+            '.checked': {
+                display: 'none',
+            },
+            '.unchecked': {
+                display: 'inline-block',
+            },
+            '&[data-checked="true"]': {
+                '.checked': {
+                    display: 'inline-block',
+                },
+                '.unchecked': {
+                    display: 'none',
+                },
+            },
+            '&,&[data-checked="true"]': {
+                padding: 0,
+                border: 0,
+                height: 'auto',
+            },
+        },
+        btnRoot: {
+            pointerEvents: 'none',
+            '&[data-variant="secondary"]': {
+                backgroundColor: (_a = theme.colors[theme.primaryColor]) === null || _a === void 0 ? void 0 : _a[0],
+            },
+            '.mantine-Button-label': {
+                fontWeight: 'normal',
+                fontSize: rem(14),
+            },
+        },
+    };
+});
+
+const _ChipButton = (_a) => {
+    var { variant = 'secondary', withIcon, children, buttonProps } = _a, rest = __rest(_a, ["variant", "withIcon", "children", "buttonProps"]);
+    const { classes, cx } = useStyles();
+    return (React__default.createElement(Chip, Object.assign({ classNames: classes }, rest, { unstyled: true }),
+        React__default.createElement(Button, Object.assign({ className: cx(classes.btnRoot, 'checked'), leftIcon: withIcon ? React__default.createElement(Check, { size: 18, color: "currentColor" }) : undefined, variant: variant }, buttonProps), children),
+        React__default.createElement(Button, Object.assign({ className: cx(classes.btnRoot, 'unchecked'), leftIcon: withIcon ? React__default.createElement(Plus, { size: 18, color: "currentColor" }) : undefined, variant: 'tertiary' }, buttonProps), children)));
+};
+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 };