@hhgtech/hhg-components 1.29.76 → 1.29.78

package/build/esm/{index-d0a2f6ec.js → index-5c2abf3a.js}

@@ -1,20 +1,20 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-6d3de7c2.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-42d35711.js';
 import * as React from 'react';
-import React__default, { useState, forwardRef, useEffect, Component, useCallback, createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
+import React__default, { forwardRef, useState, useEffect, Component, useCallback, createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
 import { ArrowDown, ArrowLeft, ArrowRight } from '@hhgtech/icons/other';
-import { em, createStyles, useMantineTheme, Button as Button$1, Autocomplete, Image, ActionIcon, Select as Select$1, AspectRatio as AspectRatio$1, Box, Breadcrumbs as Breadcrumbs$1, Textarea, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Flex, rem, Tabs as Tabs$1, ScrollArea, Popover as Popover$1, Chip } from '@mantine/core';
+import { em, Autocomplete, Image, ActionIcon, Select as Select$1, createStyles, AspectRatio as AspectRatio$1, useMantineTheme, Box, Breadcrumbs as Breadcrumbs$1, Button as Button$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-cd069a89.js';
-import { B as Breakpoints } from './utils-3d823a9f.js';
+import { C as CommonGAssets } from './index-2e13488d.js';
+import { B as Breakpoints } from './utils-0f3667a8.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-c79781fb.js';
-import { L as LOCALE } from './index-352d0aa5.js';
-import { t as theme } from './theme-ac1a0e46.js';
-import { G as GlobalHeadingStyle } from './useMantineLocale-9b58b685.js';
-import { I as ISO_FORMAT, s as siteOptions } from './index-413867da.js';
+import { T as Text } from './index-dd00700b.js';
+import { L as LOCALE } from './index-b851beaf.js';
+import { t as theme } from './theme-676e1d3e.js';
+import { G as GlobalHeadingStyle } from './useMantineLocale-e9d07649.js';
+import { I as ISO_FORMAT, s as siteOptions } from './index-94f2f772.js';
 import cn from 'classnames';
-import { a as useUniqueId } from './useUniqueId-a727e698.js';
+import { a as useUniqueId } from './useUniqueId-28b8a8d2.js';
 import { Check, Plus } from '@hhgtech/icons/core';
 
 const GlobalButtonStyle = {
@@ -321,24 +321,242 @@ const getMantineThemeOverride = (locale, template = 'hb') => {
     };
 };
 
-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 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" })));
+
+const getIsMobile = () => {
+    return (typeof window !== 'undefined' &&
+        window.innerWidth < Breakpoints.BREAK_POINT_MOBILE);
 };
-const StyledImage = styled.img `
-  &[data-has-placeholder='true'] {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
+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$4 = createStyles((_theme, _params) => {
+    return {
+        root: {
+            color: _params.color ||
+                (_theme.primaryColor === 'hb'
+                    ? _theme.colors.hb[6]
+                    : _theme.fn.primaryColor()),
+        },
+    };
+});
+
+const Anchor = (_a) => {
+    var { color, styles, className } = _a, rest = __rest(_a, ["color", "styles", "className"]);
+    const { classes, cx } = useStyles$4({ color }, { name: 'Anchor', styles });
+    return React__default.createElement(Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
+};
+
+const BreadcrumbItem = (_a) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (React__default.createElement(Anchor, Object.assign({ size: "p4", color: 'gray.8' }, rest), children));
+};
+
+const AspectRatio = (props) => {
+    return (React__default.createElement(AspectRatio$1, Object.assign({ sx: {
+            borderRadius: 4,
+            overflow: 'hidden',
+            '> img': {
+                objectFit: 'contain',
+            },
+        } }, props)));
+};
+
+const _Breadcrumbs = (_a) => {
+    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;
+
+var useStyles$3 = createStyles((_theme, _params) => {
     var _a, _b, _c, _d, _e, _f;
     const { other } = _theme;
     const { template } = other;
@@ -511,7 +729,7 @@ const Button = (props) => {
     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({
+    const { classes, cx } = useStyles$3({
         variant,
         size,
         color,
@@ -526,1075 +744,857 @@ const Button = (props) => {
         }, variant: MAPPED_VARIANT[variant], "data-variant": variant, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, rest), children));
 };
 
-const CambodiaRoundIcon = (props) => (React__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 StyledTextArea = styled(Textarea) `
+  .mantine-Textarea-input {
+    padding: 12px 16px;
+    background: #ffffff;
+    border: 1px solid ${theme.colors.gray200};
+    border-radius: 4px;
+  }
+`;
 
-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" }))));
+var useStyles$2 = createStyles((theme) => {
+    return {
+        root: {},
+        inner: {},
+        content: {},
+        header: {
+            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+            marginRight: 0,
+            marginBottom: 0,
+            padding: '12px',
+        },
+        overlay: {},
+        title: {
+            fontSize: 16,
+            fontWeight: 700,
+            lineHeight: 1.5,
+        },
+        body: {},
+        close: {
+            cursor: 'pointer',
+            width: 'unset',
+            height: 'unset',
+            svg: {
+                width: '24px !important',
+                height: '24px !important',
+            },
+        },
+    };
+});
 
-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 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 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 _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 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 Accordion = _Accordion;
+Accordion.Control = Accordion$1.Control;
+Accordion.Item = Accordion$1.Item;
+Accordion.Panel = Accordion$1.Panel;
+
+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 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 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 FileInput = (props) => {
+    return React__default.createElement(FileInput$1, Object.assign({ size: "md" }, props));
+};
 
-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 DEBOUNCED_TIME = 300;
+const emotionCache = createEmotionCache({
+    key: 'mantine',
+    prepend: false,
+});
 
-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 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 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 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 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 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 _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" })));
+const Input = InputWrapper;
+Input.File = FileInput;
+Input.Password = PasswordInput;
+Input.Number = NumberInput;
+Input.Wrapper = Input$1.Wrapper;
 
-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());
+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(() => {
-        const handleResize = () => {
-            setIsMobile(getIsMobile());
-            setIsLargeMobile(getIsLargeMobile());
-        };
-        window.addEventListener('resize', handleResize, {
-            passive: true,
-        });
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
+        key.current = String(Math.round(Math.random() * 10000));
     }, []);
-    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);
+    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;
         }
-        return this.props.children;
-    }
-}
+        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 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 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 Carousel = CarouselWrapper$1;
-Carousel.Slide = Carousel$1.Slide;
+const Checkbox = CheckboxWrapper;
+Checkbox.Group = Checkbox$1.Group;
 
-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%
-      );
+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};
     }
-    &: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%
-      );
+  }
+  [data-theme='marryBaby'] & {
+    button {
+      path:not([stroke]) {
+        stroke: ${theme.mbColors.pink};
+      }
     }
   }
+`;
 
-  .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()),
-        },
-    };
-});
-
-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 RadioWrapper = (_a) => {
+    var { styles, color } = _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.fn.primaryColor();
+    }, [color]);
+    return (React__default.createElement(Radio$1, Object.assign({ styles: Object.assign({ radio: {
+                '&:hover, &:checked': {
+                    border: `1px solid ${hexColor}`,
+                },
+            }, icon: {
+                color: `${hexColor}`,
+            } }, styles), color: color }, props)));
+};
+const Radio = RadioWrapper;
+Radio.Group = Radio$1.Group;
 
-const BreadcrumbItem = (_a) => {
-    var { children } = _a, rest = __rest(_a, ["children"]);
-    return (React__default.createElement(Anchor, Object.assign({ size: "p4", color: 'gray.8' }, rest), children));
-};
+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('');
+}
 
-const AspectRatio = (props) => {
-    return (React__default.createElement(AspectRatio$1, Object.assign({ sx: {
-            borderRadius: 4,
-            overflow: 'hidden',
-            '> img': {
-                objectFit: 'contain',
-            },
-        } }, props)));
-};
+var styles$2 = {"otpContainer":"_2iQs0sk","otpInput":"Ia6IojY","error":"yJs9MaD"};
 
-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);
+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$2.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);
+        }
     }, []);
-    useEffect(() => {
-        if (embla) {
-            embla.on('scroll', handleScroll);
-            embla.on('pointerUp', handlePointerUp);
+    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();
         }
-        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))));
+        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$2.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 Breadcrumbs = _Breadcrumbs;
-Breadcrumbs.Item = BreadcrumbItem;
+const OTP = forwardRef(OTPFowardRef);
 
-const StyledTextArea = styled(Textarea) `
-  .mantine-Textarea-input {
-    padding: 12px 16px;
-    background: #ffffff;
-    border: 1px solid ${theme.colors.gray200};
-    border-radius: 4px;
-  }
-`;
+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)));
 
-var useStyles$2 = createStyles((theme) => {
-    return {
-        root: {},
-        inner: {},
-        content: {},
-        header: {
-            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
-            marginRight: 0,
-            marginBottom: 0,
-            padding: '12px',
-        },
-        overlay: {},
-        title: {
-            fontSize: 16,
-            fontWeight: 700,
-            lineHeight: 1.5,
-        },
-        body: {},
-        close: {
-            cursor: 'pointer',
-            width: 'unset',
-            height: 'unset',
-            svg: {
-                width: '24px !important',
-                height: '24px !important',
-            },
-        },
-    };
-});
+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 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 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 _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 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 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 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 DEBOUNCED_TIME = 300;
-const emotionCache = createEmotionCache({
-    key: 'mantine',
-    prepend: false,
-});
+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 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 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 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 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 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 } = _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.fn.primaryColor();
-    }, [color]);
-    return (React__default.createElement(Radio$1, Object.assign({ styles: Object.assign({ radio: {
-                '&:hover, &:checked': {
-                    border: `1px solid ${hexColor}`,
-                },
-            }, icon: {
-                color: `${hexColor}`,
-            } }, styles), color: color }, props)));
-};
-const Radio = RadioWrapper;
-Radio.Group = Radio$1.Group;
+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" })));
 
-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('');
-}
+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" })));
 
-var styles$1 = {"otpContainer":"_2iQs0sk","otpInput":"Ia6IojY","error":"yJs9MaD"};
+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" }))));
 
-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();
+var styles$1 = {"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;
         }
-    }, [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);
+    }
+    return (React__default.createElement("div", { className: `${styles$1.flag} ${className || ''}`, style: {
+            '--width': width || 20,
+            '--height': height || 20,
+        } }, rounded ? flagRounded : flag));
+};
 
 const countriesDefault = Object.values(siteOptions).reduce((countries, { phoneCountry: phone }) => {
     if (!countries.includes(phone)) {