@hhgtech/hhg-components 1.29.412 → 1.29.413

package/build/esm/{index-a7522c77.js → index-b702de5f.js}

@@ -1,967 +1,370 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-5c2f3910.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-b72daa1a.js';
 import * as React from 'react';
 import React__default, { forwardRef, Component, useState, useCallback, useEffect, createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
 import { ArrowDown } from '@hhgtech/icons/other';
-import { em, Autocomplete, Image, ActionIcon, Select as Select$1, createStyles, AspectRatio as AspectRatio$1, useMantineTheme, 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, Popover as Popover$1, rem, Chip } from '@mantine/core';
+import { Autocomplete, Image, ActionIcon, Select as Select$1, createStyles, AspectRatio as AspectRatio$1, useMantineTheme, 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, Popover as Popover$1, rem, Chip } from '@mantine/core';
 import { useUncontrolled, useDebouncedValue, useViewportSize, useResizeObserver, useDisclosure, useClickOutside } from '@mantine/hooks';
-import { C as CommonGAssets } from './index-575e6549.js';
-import { I as ImageWrap, u as useScreenSize } from './useScreenSize-eed7f4a5.js';
+import { C as CommonGAssets } from './index-3794729d.js';
+import { u as useScreenSize, I as ImageWrap } from './index-21bfbdb2.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-afa0d541.js';
-import './index-33967b7e.js';
+import { T as Text } from './index-9960902f.js';
+import { t as themeColors } from './index-d7f3892a.js';
 import { theme } from './miscTheme.js';
-import { B as Breakpoints } from './utils-5612bf85.js';
-import { G as GlobalHeadingStyle, a as GlobalContainerStyle } from './useMantineLocale-8b661839.js';
-import { I as ISO_FORMAT } from './index-001a6be5.js';
-import { A as ANIMATION_DURATION, B as Button } from './index-fef96a07.js';
-import { L as LOCALE } from './Locale-ab51c731.js';
+import { C as CustomStylesType } from './text-59a87359.js';
 import cn from 'classnames';
-import { a as useUniqueId } from './useUniqueId-3e9d2ccb.js';
+import { a as useUniqueId } from './useUniqueId-fc5768de.js';
 import { siteOptions } from './constantsSite.js';
 import { Check, Plus } from '@hhgtech/icons/core';
+import { B as Button } from './index-6ab41b81.js';
 
-const GlobalButtonStyle = {
-    Button: {
-        defaultProps: {
-            variant: 'primary',
-            size: 'md',
-        },
-    },
-};
-
-const GlobalInputStyle = (locale) => {
-    var _a;
-    return ({
-        InputWrapper: {
-            styles: {
-                label: {
-                    display: 'inline-flex',
-                    gap: 4,
-                    marginBottom: '0.25rem',
-                    fontWeight: 600,
-                    fontSize: '14px',
-                    lineHeight: '22px',
-                    color: theme.colors.gray600,
-                },
-                description: {
-                    fontWeight: 400,
-                    fontSize: '12px',
-                    lineHeight: '18px',
-                    color: theme.colors.gray600,
-                    marginBottom: '0.25rem',
-                },
-                error: {
-                    marginTop: '0.25rem',
-                },
-            },
-        },
-        NumberInput: {
-            defaultProps: {
-                decimalSeparator: (_a = ISO_FORMAT[locale]) === null || _a === void 0 ? void 0 : _a.separator,
-            },
-        },
-        Input: {
-            styles: (_theme, _, { size }) => ({
-                input: {
-                    border: `1px solid ${theme.colors.gray200}`,
-                    transition: `all ${ANIMATION_DURATION} ease-in-out`,
-                    ['&:not(.mantine-Textarea-input)']: Object.assign({}, (() => {
-                        switch (size) {
-                            case 'lg':
-                                return {
-                                    height: 48,
-                                    fontSize: 16,
-                                    minHeight: 'unset',
-                                    lineHeight: '24px',
-                                };
-                            case 'md':
-                                return {
-                                    height: 40,
-                                    fontSize: 14,
-                                    lineHeight: '22px',
-                                    minHeight: 'unset',
-                                };
-                            case 'sm':
-                                return {
-                                    height: 32,
-                                    fontSize: 14,
-                                    lineHeight: '22px',
-                                    minHeight: 'unset',
-                                };
-                        }
-                    })()),
-                    '&:hover': {
-                        border: `1px solid ${_theme.primaryColor}`,
-                        // boxShadow: `0 0 2px 2px ${theme.colors.primary200}`,
-                    },
-                    '&:focus': {
-                        boxShadow: `0px 0px 0px 2px ${_theme.colors[_theme.primaryColor][2]}`,
-                    },
-                },
-                '&[data-invalid="true"]': {
-                    border: `1px solid ${theme.colors.red600}`,
-                    color: '#000',
-                },
-            }),
-        },
+const 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 getGlobalRadioStyle = {
-    Radio: {
-        defaultProps: {
-            size: 'sm',
-            color: 'blue.6',
-        },
-        styles: {
-            radio: {
-                backgroundColor: 'transparent',
-                '&:checked': {
-                    backgroundColor: 'transparent',
-                },
-            },
-        },
-    },
-};
+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 themeColors = {
-    hb: [
-        '#e3f2ff',
-        '#bcdeff',
-        '#91caff',
-        '#65b5ff',
-        '#45a4ff',
-        '#2b94ff',
-        '#2d87f3',
-        '#2c74df',
-        '#2b62cd',
-        '#2743ad',
-    ],
-    mb: [
-        '#FFE9F1',
-        '#F8CCDC',
-        '#F5B4CB',
-        '#F29CBA',
-        '#EE84AA',
-        '#EB6B99',
-        '#E85388',
-        '#D34C7C',
-        '#BE446F',
-        '#A93D63',
-    ],
-    blue: [
-        '#e3f2ff',
-        '#bcdeff',
-        '#91caff',
-        '#65b5ff',
-        '#45a4ff',
-        '#2b94ff',
-        '#2d87f3',
-        '#2c74df',
-        '#2b62cd',
-        '#2743ad',
-    ],
-    gray: [
-        '#fafafa',
-        '#f2f2f2',
-        '#d9d9d9',
-        '#bfbfbf',
-        '#8c8c8c',
-        '#737373',
-        '#595959',
-        '#404040',
-        '#262626',
-        '#1a1a1a',
-    ],
-    delftGray: [
-        '#F3F3F3',
-        '#EAEAEC',
-        '#D9DAE2',
-        '#B9BAC8',
-        '#9898A9',
-        '#7C7C8F',
-        '#5A5A72',
-        '#3E3F58',
-        '#202135',
-        '#0C0C12',
-    ],
-    neutral: [
-        '#f7f9fc',
-        '#e4e8ec',
-        '#d2d6dc',
-        '#bfc5cc',
-        '#adb3bc',
-        '#9aa2ac',
-        '#87909c',
-        '#757f8c',
-        '#626d7c',
-        '#545E6C',
-    ],
-    green: [
-        '#e0f8ee',
-        '#b3eed5',
-        '#7ce2b9',
-        '#2ed69e',
-        '#00CB8A',
-        '#00C076',
-        '#00B16A',
-        '#009E5C',
-        '#008C50',
-        '#006C39',
-    ],
-    pink: [
-        '#fff1f6',
-        '#ffdce9',
-        '#fec7dc',
-        '#feb2cf',
-        '#fe9dc2',
-        '#fd87b4',
-        '#fd72a7',
-        '#fc5d9a',
-        '#fc488d',
-        '#e92d74',
-    ],
-    violet: [
-        '#F5EDFF',
-        '#E7D2F7',
-        '#D8B7F0',
-        '#CA9CE8',
-        '#BB82E1',
-        '#AD67D9',
-        '#9E4CD1',
-        '#9031CA',
-        '#8116C2',
-        '#63059D',
-    ],
-    yellow: [
-        '#fff8e2',
-        '#ffecb6',
-        '#ffe187',
-        '#ffd658',
-        '#ffcb37',
-        '#ffc326',
-        '#ffb521',
-        '#fea21e',
-        '#fe921d',
-        '#fc7419',
-    ],
-    teal: [
-        '#e0f7fc',
-        '#b1ebf8',
-        '#7ddff3',
-        '#44d1ec',
-        '#00c7e6',
-        '#00bee0',
-        '#00aecd',
-        '#0099b2',
-        '#008599',
-        '#00626c',
-    ],
-    indigol: [
-        '#CEDDF0',
-        '#ACC5E6',
-        '#95B3DA',
-        '#85A6CF',
-        '#6D91BE',
-        '#5F85B5',
-        '#4C77AC',
-        '#35639C',
-        '#284A75',
-        '#1B3250',
-    ],
-    red: [
-        '#fae9e8',
-        '#feccbf',
-        '#FEAA96',
-        '#f44d2c',
-        '#ff6f4d',
-        '#ff5331',
-        '#f44d2c',
-        '#e64728',
-        '#d84023',
-        '#bf331b',
-    ],
-    redViolet: [
-        '#F3EAEB',
-        '#E8D5D7',
-        '#DDC1C4',
-        '#D1ACB0',
-        '#C5979C',
-        '#BA8288',
-        '#AF6D74',
-        '#A35961',
-        '#97444D',
-        '#8C2F39',
-    ],
+const 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 getMantineThemeOverride = (locale, template = 'hb') => {
+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$1 = createStyles((_theme, _params) => {
     return {
-        defaultRadius: template === 'hb' ? 8 : 16,
-        cursorType: 'pointer',
-        colors: Object.assign(Object.assign(Object.assign({}, themeColors), theme.colors), { toneYellow: '#fff9eb', toneGreen: '#f2fcf7', toneBlue: '#e0e9fb', tonePink: '#ffeaf1' }),
-        primaryColor: template,
-        primaryShade: 6,
-        fontFamily: (locale === LOCALE.Cambodia
-            ? 'Battambang'
-            : locale === LOCALE.Thailand
-                ? 'Noto Sans Thai'
-                : 'Inter') +
-            `, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif`,
-        breakpoints: {
-            xs: em(Breakpoints.BREAK_POINT_SMALL_MOBILE),
-            sm: em(Breakpoints.BREAK_POINT_MOBILE),
-            md: em(Breakpoints.BREAK_POINT_TABLET),
-            lg: em(Breakpoints.BREAK_POINT_PC),
-            xl: em(Breakpoints.BREAK_POINT_LGPC),
-        },
-        components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale)), getGlobalRadioStyle), GlobalButtonStyle), GlobalHeadingStyle), GlobalContainerStyle),
-        other: {
-            template,
-            defaultImage: CommonGAssets.getAssetPath(template === 'mb' ? 'default-image-mb.jpg' : 'default-image.jpg'),
+        root: {
+            color: _params.color ||
+                (_theme.primaryColor === 'hb'
+                    ? _theme.colors.hb[6]
+                    : _theme.fn.primaryColor()),
         },
     };
-};
-
-const CambodiaRoundIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "round cambodia flag", src: CommonGAssets.getAssetPath('flags/cambodiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
-const CambodiaSquareIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "square cambodia flag", src: CommonGAssets.getAssetPath('flags/cambodiaSquare.png') }, props)));
+});
 
-const EnglishRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
-    React__default.createElement("g", null,
-        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
-            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
-        React__default.createElement("path", { d: "M7.49953 0.327881C5.47199 0.850891 3.69346 1.98591 2.37793 3.53444L7.49953 6.6655V0.327881Z", fill: "#3F51B5" }),
-        React__default.createElement("path", { d: "M2.30273 16.3824C3.62476 17.9749 5.4353 19.1399 7.50034 19.6729V13.2053L2.30273 16.3824Z", fill: "#3F51B5" }),
-        React__default.createElement("path", { d: "M0.328125 12.5C0.334625 12.526 0.341125 12.5515 0.348125 12.5775L0.474128 12.5H0.328125Z", fill: "white" }),
-        React__default.createElement("path", { d: "M17.7871 3.73445C16.4571 2.08391 14.6131 0.872891 12.499 0.327881V6.96651L17.7871 3.73445Z", fill: "#3F51B5" }),
-        React__default.createElement("path", { d: "M12.499 19.6722C14.6506 19.1172 16.5196 17.8707 17.8546 16.1752L12.499 12.9021V19.6722Z", fill: "#3F51B5" }),
-        React__default.createElement("path", { d: "M0.376626 7.31055C0.359125 7.37305 0.344125 7.43705 0.328125 7.50005H0.686632L0.376626 7.31055Z", fill: "white" }),
-        React__default.createElement("path", { d: "M19.8745 8.50006C19.827 8.18506 19.7655 7.87555 19.6895 7.57104L18.1699 8.50006H19.8745Z", fill: "white" }),
-        React__default.createElement("path", { d: "M0.686034 7.50024H0.327527C0.243026 7.82775 0.175524 8.16076 0.124023 8.50026H2.32207L0.686034 7.50024Z", fill: "white" }),
-        React__default.createElement("path", { d: "M19.7197 12.3148C19.7832 12.0473 19.8337 11.7752 19.8752 11.5002H18.3867L19.7197 12.3148Z", fill: "white" }),
-        React__default.createElement("path", { d: "M2.10956 11.5002H0.124023C0.175024 11.8398 0.243026 12.1728 0.327527 12.5003H0.47403L2.10956 11.5002Z", fill: "white" }),
-        React__default.createElement("path", { d: "M8.50002 7.27665V0.124512C8.16051 0.175513 7.82751 0.243514 7.5 0.328016V6.66564L8.50002 7.27665Z", fill: "white" }),
-        React__default.createElement("path", { d: "M11.5 12.2913V19.8759C11.8395 19.8249 12.1725 19.7569 12.5 19.6724V12.9023L11.5 12.2913Z", fill: "white" }),
-        React__default.createElement("path", { d: "M7.5 13.205V19.6721C7.82751 19.7566 8.16051 19.8241 8.50002 19.8756V12.594L7.5 13.205Z", fill: "white" }),
-        React__default.createElement("path", { d: "M11.5925 7.34715L11.7345 7.43415L12.5 6.96614V0.328016C12.1725 0.243514 11.8395 0.176013 11.5 0.124512V7.49865L11.5925 7.34715Z", fill: "white" }),
-        React__default.createElement("path", { d: "M2.32251 8.50002H7.01761L8.50014 7.594V7.277L7.50011 6.66548L2.37852 3.53442C1.95151 4.03743 1.572 4.58144 1.24949 5.16296L5.02507 7.5H2.29701L0.650482 6.47648C0.54748 6.74949 0.455478 7.02699 0.375977 7.3105L0.686483 7.5L2.32251 8.50002Z", fill: "white" }),
-        React__default.createElement("path", { d: "M11.7344 7.43419L13.4784 8.50021H18.171L19.6905 7.57119C19.528 6.92118 19.303 6.29767 19.02 5.70516L16.139 7.50019H13.4109L18.317 4.45013C18.1515 4.20313 17.9735 3.96562 17.7875 3.73462L12.4999 6.96618L11.7344 7.43419Z", fill: "white" }),
-        React__default.createElement("path", { d: "M5.02448 7.50013L1.2494 5.16309C1.0169 5.58259 0.821394 6.0231 0.650391 6.47661L2.29642 7.50013H5.02448Z", fill: "#E53935" }),
-        React__default.createElement("path", { d: "M16.1392 7.50024L19.0207 5.70521C18.8132 5.2702 18.5837 4.84819 18.3177 4.45068L13.4111 7.50024H16.1392Z", fill: "#E53935" }),
-        React__default.createElement("path", { d: "M11.5 11.5002V12.2913L12.5 12.9023L17.8556 16.1758C18.2416 15.6853 18.5836 15.1593 18.8736 14.6008L15.4856 12.5003H18.2136L19.4432 13.2673C19.5507 12.9563 19.6432 12.6393 19.7197 12.3153L18.3871 11.5002H11.5Z", fill: "white" }),
-        React__default.createElement("path", { d: "M13.4785 8.50019L11.7345 7.43417L11.5925 7.34717L11.5 7.49867V8.50019H13.4785Z", fill: "white" }),
-        React__default.createElement("path", { d: "M8.49934 12.5943V11.5002H2.10921L0.473182 12.5003L0.34668 12.5778C0.522683 13.2383 0.762688 13.8713 1.06319 14.4708L4.16375 12.5003H6.89181L1.80071 15.7168C1.95971 15.9448 2.12471 16.1688 2.30172 16.3823L7.49932 13.2053L8.49934 12.5943Z", fill: "white" }),
-        React__default.createElement("path", { d: "M7.01758 8.50026H8.50011V7.59424L7.01758 8.50026Z", fill: "white" }),
-        React__default.createElement("path", { d: "M15.4854 12.5L18.8729 14.6C19.0949 14.173 19.2834 13.727 19.4429 13.2665L18.2134 12.5H15.4854Z", fill: "#E53935" }),
-        React__default.createElement("path", { d: "M4.16501 12.5L1.06445 14.4705C1.28196 14.9045 1.52596 15.3216 1.80197 15.7166L6.89307 12.5H4.16501Z", fill: "#E53935" }),
-        React__default.createElement("path", { d: "M13.4785 8.5H11.5V11.5001H18.3871H19.8757C19.9497 11.0095 20.0002 10.511 20.0002 10C20.0002 9.48902 19.9497 8.99051 19.8757 8.5H18.1711H13.4785Z", fill: "#E53935" }),
-        React__default.createElement("path", { d: "M8.50017 11.5001V8.5H7.01764H2.32255H0.124502C0.050501 8.99051 0 9.48902 0 10C0 10.511 0.050501 11.0095 0.124502 11.5001H2.11004H8.50017Z", fill: "#E53935" }),
-        React__default.createElement("path", { d: "M11.5001 19.8759V12.2912V11.5002V8.50016V7.49865V0.124502C11.0095 0.050501 10.511 0 10 0C9.48902 0 8.99051 0.050501 8.5 0.124502V7.27664V7.59365V8.50016V11.5002V12.5942V19.8759C8.99051 19.9499 9.48902 20.0004 10 20.0004C10.511 20.0004 11.0095 19.9499 11.5001 19.8759Z", fill: "#E53935" }))));
-const EnglishSquareIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 26 26", fill: "none" }, props),
-    React__default.createElement("g", null,
-        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "1", y: "5", width: "24", height: "16" },
-            React__default.createElement("path", { d: "M1.08301 7.41675C1.08301 6.31218 1.97844 5.41675 3.08301 5.41675H22.9163C24.0209 5.41675 24.9163 6.31218 24.9163 7.41675V18.5834C24.9163 19.688 24.0209 20.5834 22.9163 20.5834H3.08301C1.97844 20.5834 1.08301 19.688 1.08301 18.5834V7.41675Z", fill: "#3F51B5" })),
-        React__default.createElement("path", { d: "M1.08301 5.41675H24.9163V20.5834H1.08301V5.41675Z", fill: "#3F51B5" }),
-        React__default.createElement("path", { d: "M1.08301 7.70041L12.3551 14.5899L14.05 11.8165L3.57901 5.41675H1.08301V7.70041Z", fill: "white" }),
-        React__default.createElement("path", { d: "M24.9165 5.41675H22.9616L12.4912 11.816L14.1855 14.5899L24.9165 8.03083V5.41675Z", fill: "white" }),
-        React__default.createElement("path", { d: "M14.1855 10.9802L12.4912 13.7536L23.6658 20.5834H24.9165V17.5387L14.1855 10.9802Z", fill: "white" }),
-        React__default.createElement("path", { d: "M1.08301 17.8702V20.5834H2.87592L14.05 13.7541L12.3556 10.9802L1.08301 17.8702Z", fill: "white" }),
-        React__default.createElement("path", { d: "M1.08301 10.8333H24.9163V15.1666H1.08301V10.8333Z", fill: "white" }),
-        React__default.createElement("path", { d: "M10.833 5.41675H15.1663V20.5834H10.833V5.41675Z", fill: "white" }),
-        React__default.createElement("path", { d: "M9.32609 10.8334L1.08301 5.79537V7.06504L7.24826 10.8334H9.32609ZM24.0004 5.41675L15.1376 10.8334H17.2149L24.9163 6.12687V5.41675H24.0004ZM17.9191 15.1667L24.9163 19.4432V18.1735L19.9964 15.1667H17.9191ZM8.62192 15.1667L1.08301 19.7742V20.5834H1.83701L10.6992 15.1667H8.62192ZM1.08301 11.9167H24.9163V14.0834H1.08301V11.9167Z", fill: "#E53935" }),
-        React__default.createElement("path", { d: "M11.917 5.41675H14.0837V20.5834H11.917V5.41675Z", fill: "#E53935" }))));
+const Anchor = (_a) => {
+    var { color, styles, className } = _a, rest = __rest(_a, ["color", "styles", "className"]);
+    const { classes, cx } = useStyles$1({ color }, { name: 'Anchor', styles });
+    return React__default.createElement(Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
+};
 
-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 BreadcrumbItem = (_a) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (React__default.createElement(Anchor, Object.assign({ size: "p4", color: 'gray.8' }, 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 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 AspectRatio = (props) => {
+    return (React__default.createElement(AspectRatio$1, Object.assign({ sx: {
+            borderRadius: 4,
+            overflow: 'hidden',
+            '> img': {
+                objectFit: 'contain',
+            },
+        } }, props)));
 };
 
-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 _Breadcrumbs = (_a) => {
+    var _b;
+    var { children, showHomeIcon = true, homeIconHref = '/' } = _a, rest = __rest(_a, ["children", "showHomeIcon", "homeIconHref"]);
+    const theme = useMantineTheme();
+    const isMarryBaby = ((_b = theme === null || theme === void 0 ? void 0 : theme.other) === null || _b === void 0 ? void 0 : _b.template) === 'mb';
+    const [embla, setEmbla] = useState(null);
+    const { isMobile } = useScreenSize();
+    const [, setShouldAllowClick] = useState(true);
+    const handleScroll = useCallback(() => {
+        setShouldAllowClick(false);
+    }, []);
+    const handlePointerUp = useCallback(() => {
+        setTimeout(() => {
+            setShouldAllowClick(true);
+        }, 1000);
+    }, []);
+    useEffect(() => {
+        if (embla) {
+            embla.on('scroll', handleScroll);
+            embla.on('pointerUp', handlePointerUp);
+        }
+        return () => {
+            if (embla) {
+                embla.off('scroll', handleScroll);
+                embla.on('pointerUp', handlePointerUp);
+            }
+        };
+    }, [embla, handleScroll, handlePointerUp]);
+    return (React__default.createElement(StyledCarousel, Object.assign({ align: "center", slideGap: "xs", dragFree: true, draggable: isMobile, slideSize: "0", getEmblaApi: setEmbla, controlsOffset: -52, previousControlIcon: React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+            React__default.createElement("path", { d: "M6.86589 3.56104C7.03647 3.56104 7.20724 3.62732 7.33724 3.75765L7.39453 3.81494C7.6552 4.07561 7.6552 4.49765 7.39453 4.75765L4.81901 7.33317L13.5326 7.33317C13.9006 7.33317 14.1992 7.63184 14.1992 7.99984C14.1992 8.36784 13.9006 8.6665 13.5326 8.6665L4.81901 8.66651L7.39453 11.242C7.6552 11.5027 7.6552 11.9247 7.39453 12.1847L7.33724 12.242C7.07657 12.5027 6.65453 12.5027 6.39453 12.242L2.6237 8.47119C2.36303 8.21053 2.36303 7.78849 2.6237 7.52849L6.39453 3.75765C6.52487 3.62732 6.6953 3.56104 6.86589 3.56104Z", fill: "#595959" })), nextControlIcon: React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+            React__default.createElement("path", { d: "M9.13411 12.439C8.96353 12.439 8.79276 12.3727 8.66276 12.2423L8.60547 12.1851C8.3448 11.9244 8.3448 11.5023 8.60547 11.2423L11.181 8.66683L2.46745 8.66683C2.09945 8.66683 1.80078 8.36816 1.80078 8.00016C1.80078 7.63216 2.09945 7.3335 2.46745 7.3335L11.181 7.3335L8.60547 4.75797C8.3448 4.49731 8.3448 4.07527 8.60547 3.81527L8.66276 3.75797C8.92343 3.49731 9.34547 3.49731 9.60547 3.75797L13.3763 7.52881C13.637 7.78947 13.637 8.21152 13.3763 8.47152L9.60547 12.2423C9.47513 12.3727 9.3047 12.439 9.13411 12.439Z", fill: "#595959" })) }, rest),
+        showHomeIcon && (React__default.createElement(Carousel.Slide, { style: { borderRight: `1px solid ${themeColors.neutral[1]}` } },
+            React__default.createElement(BreadcrumbItem, { href: homeIconHref, target: "_blank", className: "pointer-event-child-none" },
+                React__default.createElement(Box, { sx: Object.assign({}, (!isMarryBaby && {
+                        borderRadius: '50%',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    })), bg: !isMarryBaby && themeColors.neutral[0], p: !isMarryBaby ? 6 : 0 },
+                    React__default.createElement(AspectRatio, { ratio: 1, w: 18 }, isMarryBaby ? (React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+                        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1183 3.67722C12.8727 2.70772 11.1281 2.708 9.88187 3.67718L14.1183 3.67722ZM14.1183 3.67722L19.718 8.03283C20.5589 8.68632 21.05 9.69173 21.05 10.7562V17.6002C21.05 19.5057 19.5055 21.0502 17.6 21.0502H6.40016C4.49466 21.0502 2.9502 19.5057 2.9502 17.6002V10.7562C2.9502 9.69163 3.44113 8.68632 4.28216 8.03283L9.88187 3.67718M10.6799 4.70339L5.08006 9.05916C4.55657 9.46592 4.2502 10.0923 4.2502 10.7562V17.6002C4.2502 18.7878 5.21263 19.7502 6.40016 19.7502H17.6C18.7875 19.7502 19.75 18.7878 19.75 17.6002V10.7562C19.75 10.0923 19.4438 9.46612 18.9204 9.05936L13.3202 4.70335C12.5443 4.09941 11.4571 4.09905 10.6799 4.70339Z", fill: "#3E3F58" }),
+                        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2373 13.1626C12.5546 12.4794 11.4466 12.4791 10.7629 13.1628C10.0793 13.8464 10.0793 14.9538 10.7629 15.6374C11.4465 16.321 12.5539 16.321 13.2375 15.6374C13.9211 14.9538 13.9211 13.8464 13.2375 13.1628L13.2373 13.1626ZM14.1567 12.2436C12.9661 11.0521 11.0348 11.0525 9.84366 12.2436C8.65237 13.4348 8.65237 15.3653 9.84366 16.5566C11.0349 17.7479 12.9654 17.7479 14.1567 16.5566C15.348 15.3653 15.348 13.4348 14.1567 12.2436Z", fill: "#3E3F58" }))) : (React__default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
+                        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.58691 5.59863L8.58691 1.62305C8.83594 1.45898 9.16406 1.45898 9.41309 1.62305L15.4131 5.59863C15.624 5.73926 15.75 5.97363 15.75 6.22559V14.25C15.75 15.0791 15.0791 15.75 14.25 15.75H3.75C2.9209 15.75 2.25 15.0791 2.25 14.25V6.22559C2.25 5.97363 2.37598 5.73926 2.58691 5.59863ZM5.5017 11.7602C5.1717 11.5108 5.17316 11.0321 5.46521 10.7391C5.75775 10.4456 6.24936 10.4292 6.5986 10.6522C7.17818 11.0223 8.12516 11.4889 9.21628 11.4889C10.3074 11.4889 11.2543 11.0223 11.8339 10.6522C12.1832 10.4292 12.6748 10.4456 12.9673 10.7391C13.2594 11.0321 13.2608 11.5108 12.9308 11.7602C11.8743 12.5589 10.535 12.9889 9.21628 12.9889C7.89758 12.9889 6.55824 12.5589 5.5017 11.7602Z", fill: "#595959" })))))))),
+        React__default.createElement(Carousel.Slide, null),
+        React__default.createElement(Carousel.Slide, null,
+            React__default.createElement(Breadcrumbs$1, { styles: {
+                    separator: {
+                        marginInline: 4,
+                    },
+                }, separator: React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+                    React__default.createElement("path", { d: "M8.71527 7.99969L6.16794 5.45236C5.89194 5.17636 5.89194 4.72836 6.16794 4.45236C6.44394 4.17636 6.89194 4.17636 7.16794 4.45236L10.2439 7.52836C10.5046 7.78903 10.5046 8.21103 10.2439 8.47103L7.16794 11.547C6.89194 11.823 6.44394 11.823 6.16794 11.547C5.89194 11.271 5.89194 10.823 6.16794 10.547L8.71527 7.99969Z", fill: "#8C8C8C" })) }, children))));
+};
+const Breadcrumbs = _Breadcrumbs;
+Breadcrumbs.Item = BreadcrumbItem;
 
-const 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 StyledTextArea = styled(Textarea) `
+  .mantine-Textarea-input {
+    padding: 12px 16px;
+    background: #ffffff;
+    border: 1px solid ${theme.colors.gray200};
+    border-radius: 4px;
+  }
+`;
 
-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 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 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 _Accordion = (_a) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (React__default.createElement(StyledAccordion, Object.assign({ chevron: React__default.createElement("div", null), disableChevronRotation: true, transitionDuration: 300 }, rest), children));
+};
+const Accordion = _Accordion;
+Accordion.Control = Accordion$1.Control;
+Accordion.Item = Accordion$1.Item;
+Accordion.Panel = Accordion$1.Panel;
 
-const 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 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 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 FileInput = (props) => {
+    return React__default.createElement(FileInput$1, Object.assign({ size: "md" }, props));
+};
 
-var styles$2 = {"flag":"pfaLGRK"};
+const DEBOUNCED_TIME = 300;
+const emotionCache = createEmotionCache({
+    key: 'mantine',
+    prepend: false,
+});
 
-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 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 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" })));
-
-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$1 = createStyles((_theme, _params) => {
-    return {
-        root: {
-            color: _params.color ||
-                (_theme.primaryColor === 'hb'
-                    ? _theme.colors.hb[6]
-                    : _theme.fn.primaryColor()),
-        },
-    };
+const EyeVisible = CommonGAssets.getAssetPath('EyeVisible.svg');
+const EyeHidden = CommonGAssets.getAssetPath('EyeHidden.svg');
+// Fix re-render issue
+const RenderVisibleToggleIcon = ({ reveal, size, }) => (React__default.createElement("img", { src: reveal ? EyeVisible : EyeHidden, style: {
+        width: size,
+        height: size,
+    }, loading: "lazy" }));
+const PasswordInput = forwardRef((props, ref) => {
+    const { size = 'md', visibilityToggleIcon: visibilityToggleIconProps } = props, restProps = __rest(props, ["size", "visibilityToggleIcon"]);
+    const visibilityToggleIcon = visibilityToggleIconProps || RenderVisibleToggleIcon;
+    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 Anchor = (_a) => {
-    var { color, styles, className } = _a, rest = __rest(_a, ["color", "styles", "className"]);
-    const { classes, cx } = useStyles$1({ color }, { name: 'Anchor', styles });
-    return React__default.createElement(Text, Object.assign({ as: "a", className: cx(classes.root, className) }, rest));
-};
+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 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;
-
-const StyledTextArea = styled(Textarea) `
-  .mantine-Textarea-input {
-    padding: 12px 16px;
-    background: #ffffff;
-    border: 1px solid ${theme.colors.gray200};
-    border-radius: 4px;
-  }
-`;
-
-const StyledAccordion = styled(Accordion$1) `
-  .mantine-Accordion-label {
-    padding: 0;
-  }
-  .mantine-Accordion-control {
-    &:hover {
-      background-color: transparent;
-    }
-  }
-  .mantine-Accordion-item {
-    .mantine-Accordion-chevron {
-      > div {
-        background-repeat: no-repeat;
-        width: 16px;
-        height: 16px;
-        background-position: center;
-        background-image: url(${(props) => props.closeChevron || CommonGAssets.getAssetPath('plus-icon.svg')});
-      }
-    }
-    &[data-active='true'] {
-      .mantine-Accordion-chevron {
-        > div {
-          background-image: url(${(props) => props.openChevron || CommonGAssets.getAssetPath('minus-icon.svg')});
-        }
-      }
-    }
-  }
-  .mantine-Accordion-panel {
-    border-radius: ${theme.borderRadius};
-  }
-  .mantine-Accordion-content {
-    white-space: pre-wrap;
-  }
-`;
-
-const _Accordion = (_a) => {
-    var { children } = _a, rest = __rest(_a, ["children"]);
-    return (React__default.createElement(StyledAccordion, Object.assign({ chevron: React__default.createElement("div", null), disableChevronRotation: true, transitionDuration: 300 }, rest), children));
-};
-const Accordion = _Accordion;
-Accordion.Control = Accordion$1.Control;
-Accordion.Item = Accordion$1.Item;
-Accordion.Panel = Accordion$1.Panel;
-
-const DEFAULT_AVATAR = CommonGAssets.getAssetPath('avatar.jpg');
-const Avatar = (_a) => {
-    var { withIndicator = false, indicatorConfig = null, size = 56, children, styles, placeholderText } = _a, // usually first letter of name
-    avatarProps = __rest(_a, ["withIndicator", "indicatorConfig", "size", "children", "styles", "placeholderText"]);
-    const generateAvatar = () => {
-        return (React__default.createElement(Avatar$1, Object.assign({ size: size, radius: "xl" }, avatarProps, { imageProps: Object.assign({ loading: 'lazy' }, avatarProps.imageProps), styles: {
-                placeholder: {
-                    backgroundColor: avatarProps.color,
-                    color: 'white',
-                },
-            } }), children ? (children) : placeholderText ? (placeholderText) : (React__default.createElement(ImageWrap, { src: DEFAULT_AVATAR, width: size, alt: avatarProps.alt || 'avatar' }))));
-    };
-    if (withIndicator)
-        return (React__default.createElement(Indicator, Object.assign({ inline: true, position: "bottom-end", offset: 9 }, indicatorConfig, { styles: Object.assign({ indicator: {
-                    backgroundColor: React__default.isValidElement(indicatorConfig.label) && 'transparent',
-                    zIndex: 1,
-                } }, styles) }), generateAvatar()));
-    return generateAvatar();
-};
-
-const FileInput = (props) => {
-    return React__default.createElement(FileInput$1, Object.assign({ size: "md" }, props));
-};
-
-const DEBOUNCED_TIME = 300;
-const emotionCache = createEmotionCache({
-    key: 'mantine',
-    prepend: false,
-});
-
-const NumberInput = (_a) => {
-    var { value: _value, onChange: _onChange } = _a, props = __rest(_a, ["value", "onChange"]);
-    const [value, setValue] = useState(_value);
-    const [debounced] = useDebouncedValue(value, DEBOUNCED_TIME);
-    useEffect(() => {
-        _onChange === null || _onChange === void 0 ? void 0 : _onChange(debounced);
-    }, [debounced]);
-    useEffect(() => {
-        setValue(_value);
-    }, [_value]);
-    return (React__default.createElement(NumberInput$1, Object.assign({ size: "md", stepHoldDelay: 500, stepHoldInterval: (t) => Math.max(1000 / Math.pow(t, 2), 25), onChange: setValue, hideControls: true, min: 0, formatter: (value) => {
-            if (Number(value) === 0)
-                return value;
-            return value || '';
-        }, removeTrailingZeros: true, value: value }, props)));
-};
-
-const EyeVisible = CommonGAssets.getAssetPath('EyeVisible.svg');
-const EyeHidden = CommonGAssets.getAssetPath('EyeHidden.svg');
-// Fix re-render issue
-const RenderVisibleToggleIcon = ({ reveal, size, }) => (React__default.createElement("img", { src: reveal ? EyeVisible : EyeHidden, style: {
-        width: size,
-        height: size,
-    }, loading: "lazy" }));
-const PasswordInput = forwardRef((props, ref) => {
-    const { size = 'md', visibilityToggleIcon: visibilityToggleIconProps } = props, restProps = __rest(props, ["size", "visibilityToggleIcon"]);
-    const visibilityToggleIcon = visibilityToggleIconProps || RenderVisibleToggleIcon;
-    return (React__default.createElement(PasswordInput$1, Object.assign({ ref: ref, size: size, visibilityToggleIcon: visibilityToggleIcon }, restProps, { className: `input-control ${(restProps === null || restProps === void 0 ? void 0 : restProps.className) || ''}` })));
-});
-
-const InputWrapper = forwardRef((_a, ref) => {
-    var { value: _value, onChange: _onChange, onChangeRaw, maxLength } = _a, props = __rest(_a, ["value", "onChange", "onChangeRaw", "maxLength"]);
-    const [value, setValue] = useState(_value || '');
-    const [debounced] = useDebouncedValue(value, DEBOUNCED_TIME);
-    useEffect(() => {
-        _onChange === null || _onChange === void 0 ? void 0 : _onChange(debounced);
-    }, [debounced]);
-    useEffect(() => {
-        setValue(_value);
-    }, [_value]);
-    return (React__default.createElement(TextInput, Object.assign({ ref: ref, size: "md", onChange: (event) => {
-            if (typeof maxLength === 'number' &&
-                event.currentTarget.value.length > maxLength) {
-                return;
-            }
-            onChangeRaw === null || onChangeRaw === void 0 ? void 0 : onChangeRaw(event);
-            setValue(event.currentTarget.value);
-        }, value: value }, props, { maxLength: maxLength, className: `input-control ${(props === null || props === void 0 ? void 0 : props.className) || ''}` })));
-});
-const Input = InputWrapper;
-Input.File = FileInput;
-Input.Password = PasswordInput;
-Input.Number = NumberInput;
-Input.Wrapper = Input$1.Wrapper;
-
-const StyledSlide = Carousel$1.Slide;
+const StyledSlide = Carousel$1.Slide;
 
 const SlideContext = createContext({});
 const CustomSlide = (_a) => {
@@ -1097,8 +500,22 @@ const CarouselWrapper = (_a) => {
 const CentralCarousel = CarouselWrapper;
 CentralCarousel.Slide = CustomSlide;
 
+const CheckboxWithState = (_a) => {
+    var { size = 24, isSolid, isActive } = _a, rest = __rest(_a, ["size", "isSolid", "isActive"]);
+    return isSolid ? (React__default.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
+        React__default.createElement("path", { d: "M10 18C14.4183 18 18 14.4183 18 10C18 5.58173 14.4183 2 10 2C5.58173 2 2 5.58173 2 10C2 14.4183 5.58173 18 10 18Z", fill: "#2D87F3" }),
+        React__default.createElement("path", { d: "M6.38904 10.2778L8.88904 13.0556L13.6113 6.94446", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__default.createElement("path", { d: "M10 18C14.4183 18 18 14.4183 18 10C18 5.58173 14.4183 2 10 2C5.58173 2 2 5.58173 2 10C2 14.4183 5.58173 18 10 18Z", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))) : isActive ? (React__default.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
+        React__default.createElement("path", { opacity: ".2", d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", fill: "#2D87F3" }),
+        React__default.createElement("path", { d: "m6.389 10.278 2.5 2.778 4.722-6.111", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__default.createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))) : (React__default.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
+        React__default.createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", fill: "#ADB3BC", fillOpacity: ".3" }),
+        React__default.createElement("path", { d: "m6.389 10.278 2.5 2.778 4.722-6.111", stroke: "#ADB3BC", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__default.createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", stroke: "#ADB3BC", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+};
+
 const CheckboxWrapper = (_a) => {
-    var { styles, color = 'blue' } = _a, props = __rest(_a, ["styles", "color"]);
+    var { color = 'blue', label, size: sizeProp, styles } = _a, props = __rest(_a, ["color", "label", "size", "styles"]);
     const theme = useMantineTheme();
     const hexColor = useMemo(() => {
         var _a, _b;
@@ -1107,11 +524,81 @@ const CheckboxWrapper = (_a) => {
             : (_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': {
+    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+    const size = isLeadgenStyle ? 20 : sizeProp;
+    return (React__default.createElement(Checkbox$1, Object.assign({ color: color, size: size, label: isLeadgenStyle ? (React__default.createElement(Text, { size: "p2", color: theme.colors.gray[8] }, label)) : (label), icon: isLeadgenStyle
+            ? (_a) => {
+                var rest = __rest(_a, []);
+                return (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(CheckboxWithState, Object.assign({ "data-icon": "true", "data-default": "true", size: size }, rest)),
+                    React__default.createElement(CheckboxWithState, Object.assign({ "data-icon": "true", "data-hover": "true", isActive: true, size: size }, rest)),
+                    React__default.createElement(CheckboxWithState, Object.assign({ "data-icon": "true", "data-checked": "true", isSolid: true, size: size }, rest))));
+            }
+            : undefined, styles: Object.assign({ input: Object.assign({ '&:hover': {
                     border: `1px solid ${hexColor}`,
+                } }, (isLeadgenStyle && {
+                marginTop: 2,
+                borderRadius: '50%',
+                '&,&:hover': {
+                    border: 0,
+                },
+                '& ~ [data-icon]': {
+                    opacity: 0,
+                },
+                '& ~ [data-default]': {
+                    opacity: 1,
+                },
+                '&:hover': {
+                    '& ~ [data-icon]': {
+                        opacity: 0,
+                    },
+                    '& ~ [data-hover]': {
+                        opacity: 1,
+                    },
+                },
+                '&:checked': {
+                    '& ~ [data-icon]': {
+                        opacity: 0,
+                    },
+                    '& ~ [data-checked]': {
+                        opacity: 1,
+                    },
+                    '&:hover': {
+                        '& ~ [data-icon]': {
+                            opacity: 0,
+                        },
+                        '& ~ [data-checked]': {
+                            opacity: 1,
+                        },
+                    },
+                },
+                '&, &:hover, &:checked': {
+                    backgroundColor: 'transparent',
+                    borderColor: 'transparent',
+                    '& ~ svg': {
+                        width: '100%',
+                        transform: 'none',
+                        transition: 'opacity 0.2s ease',
+                    },
+                },
+                [theme.fn.smallerThan('sm')]: {
+                    '&:hover': {
+                        '& ~ [data-icon]': {
+                            opacity: 0,
+                        },
+                        '& ~ [data-default]': {
+                            opacity: 1,
+                        },
+                    },
                 },
-            } }, styles), color: color }, props)));
+            })), label: Object.assign({}, (isLeadgenStyle && {
+                paddingLeft: 8,
+            })), body: Object.assign({}, (isLeadgenStyle && {
+                alignItems: 'flex-start',
+            })), inner: Object.assign({}, (isLeadgenStyle && {
+                paddingTop: 2,
+                height: 24,
+            })) }, styles) }, props)));
 };
 const Checkbox = CheckboxWrapper;
 Checkbox.Group = Checkbox$1.Group;
@@ -1171,8 +658,18 @@ const StyledSliderWrapper = styled.div `
   }
 `;
 
+const RadioWithState = (_a) => {
+    var { size = 24, isSolid, isActive } = _a, rest = __rest(_a, ["size", "isSolid", "isActive"]);
+    return isSolid ? (React__default.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
+        React__default.createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__default.createElement("circle", { cx: "10", cy: "10", r: "4", fill: "#2D87F3" }))) : isActive ? (React__default.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
+        React__default.createElement("path", { d: "M10 1a9 9 0 1 1 0 18 9 9 0 0 1 0-18", stroke: "#BCDEFF", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+        React__default.createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))) : (React__default.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
+        React__default.createElement("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16", stroke: "#ADB3BC", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+};
+
 const RadioWrapper = (_a) => {
-    var { styles, color } = _a, props = __rest(_a, ["styles", "color"]);
+    var { color, label, size: sizeProp, styles } = _a, props = __rest(_a, ["color", "label", "size", "styles"]);
     const theme = useMantineTheme();
     const hexColor = useMemo(() => {
         var _a, _b;
@@ -1181,18 +678,85 @@ const RadioWrapper = (_a) => {
             : (_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': {
+    const isLeadgenStyle = theme.other.customStyleType === CustomStylesType.LEADGEN;
+    const size = isLeadgenStyle ? 20 : sizeProp;
+    return (React__default.createElement(Radio$1, Object.assign({ label: isLeadgenStyle ? (React__default.createElement(Text, { size: "p2", color: theme.colors.gray[8] }, label)) : (label), size: size, icon: isLeadgenStyle
+            ? (_a) => {
+                var rest = __rest(_a, []);
+                return (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(RadioWithState, Object.assign({ "data-icon": "true", "data-default": "true", size: size }, rest)),
+                    React__default.createElement(RadioWithState, Object.assign({ "data-icon": "true", "data-hover": "true", isActive: true, size: size }, rest)),
+                    React__default.createElement(RadioWithState, Object.assign({ "data-icon": "true", "data-checked": "true", isSolid: true, size: size }, rest))));
+            }
+            : undefined, styles: Object.assign({ radio: Object.assign({ '&:hover, &:checked': {
                     border: `1px solid ${hexColor}`,
-                },
-                '&:checked + .___ref-icon': {
+                }, '&:checked + .___ref-icon': {
                     top: '50%',
                     left: '50%',
                     transform: 'scale(1) translate(-50%, -50%)',
+                } }, (isLeadgenStyle && {
+                marginTop: 2,
+                borderRadius: '50%',
+                '&,&:hover': {
+                    border: 0,
+                },
+                '& ~ [data-icon]': {
+                    opacity: 0,
+                },
+                '& ~ [data-default]': {
+                    opacity: 1,
+                },
+                '&:hover': {
+                    '& ~ [data-icon]': {
+                        opacity: 0,
+                    },
+                    '& ~ [data-hover]': {
+                        opacity: 1,
+                    },
+                },
+                '&:checked': {
+                    '& ~ [data-icon]': {
+                        opacity: 0,
+                    },
+                    '& ~ [data-checked]': {
+                        opacity: 1,
+                    },
+                    '&:hover': {
+                        '& ~ [data-icon]': {
+                            opacity: 0,
+                        },
+                        '& ~ [data-checked]': {
+                            opacity: 1,
+                        },
+                    },
+                },
+                '&, &:hover, &:checked': {
+                    backgroundColor: 'transparent',
+                    borderColor: 'transparent',
+                    '& ~ svg': {
+                        position: 'absolute',
+                        width: '100%',
+                        transform: 'none',
+                        transition: 'opacity 0.2s ease',
+                        top: 2,
+                        left: 0,
+                    },
                 },
-            }, icon: {
-                color: `${hexColor}`,
-            } }, styles), color: color }, props)));
+                [theme.fn.smallerThan('sm')]: {
+                    '&:hover': {
+                        '& ~ [data-icon]': {
+                            opacity: 0,
+                        },
+                        '& ~ [data-default]': {
+                            opacity: 1,
+                        },
+                    },
+                },
+            })), icon: {
+                color: hexColor,
+            }, label: Object.assign({}, (isLeadgenStyle && {
+                paddingLeft: 8,
+            })) }, styles) }, props)));
 };
 const Radio = RadioWrapper;
 Radio.Group = Radio$1.Group;
@@ -1213,7 +777,7 @@ function transferOtpToValue(otp) {
     return otp.join('');
 }
 
-var styles$1 = {"otpContainer":"_2iQs0sk","otpInput":"Ia6IojY","error":"yJs9MaD"};
+var styles$2 = {"otpContainer":"_2iQs0sk","otpInput":"Ia6IojY","error":"yJs9MaD"};
 
 const BACKSPACE = 8;
 const LEFT_ARROW = 37;
@@ -1222,7 +786,7 @@ 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 })));
+    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) => {
@@ -1337,7 +901,7 @@ const OTPFowardRef = (props, ref) => {
         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(Flex, { justify: "center", columnGap: 8, className: cn(styles$2.otpContainer, 'otpContainer') }, otp.map((val, index) => {
         return (React__default.createElement(OTPInput, Object.assign({}, otpShareProps, { ref: (iRef) => {
                 inputRef.current[index] = iRef;
             }, key: '' + index, value: val, type: type, onChange: inputOnChange, onFocus: inputOnFocus, onKeyDown: inputOnKeyDown, onPaste: inputOnPaste, onBlur: onBlur, placeholder: placeholder })));
@@ -1345,6 +909,298 @@ const OTPFowardRef = (props, ref) => {
 };
 const OTP = forwardRef(OTPFowardRef);
 
+const CambodiaRoundIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "round cambodia flag", src: CommonGAssets.getAssetPath('flags/cambodiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const CambodiaSquareIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "square cambodia flag", src: CommonGAssets.getAssetPath('flags/cambodiaSquare.png') }, props)));
+
+const EnglishRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
+        React__default.createElement("path", { d: "M7.49953 0.327881C5.47199 0.850891 3.69346 1.98591 2.37793 3.53444L7.49953 6.6655V0.327881Z", fill: "#3F51B5" }),
+        React__default.createElement("path", { d: "M2.30273 16.3824C3.62476 17.9749 5.4353 19.1399 7.50034 19.6729V13.2053L2.30273 16.3824Z", fill: "#3F51B5" }),
+        React__default.createElement("path", { d: "M0.328125 12.5C0.334625 12.526 0.341125 12.5515 0.348125 12.5775L0.474128 12.5H0.328125Z", fill: "white" }),
+        React__default.createElement("path", { d: "M17.7871 3.73445C16.4571 2.08391 14.6131 0.872891 12.499 0.327881V6.96651L17.7871 3.73445Z", fill: "#3F51B5" }),
+        React__default.createElement("path", { d: "M12.499 19.6722C14.6506 19.1172 16.5196 17.8707 17.8546 16.1752L12.499 12.9021V19.6722Z", fill: "#3F51B5" }),
+        React__default.createElement("path", { d: "M0.376626 7.31055C0.359125 7.37305 0.344125 7.43705 0.328125 7.50005H0.686632L0.376626 7.31055Z", fill: "white" }),
+        React__default.createElement("path", { d: "M19.8745 8.50006C19.827 8.18506 19.7655 7.87555 19.6895 7.57104L18.1699 8.50006H19.8745Z", fill: "white" }),
+        React__default.createElement("path", { d: "M0.686034 7.50024H0.327527C0.243026 7.82775 0.175524 8.16076 0.124023 8.50026H2.32207L0.686034 7.50024Z", fill: "white" }),
+        React__default.createElement("path", { d: "M19.7197 12.3148C19.7832 12.0473 19.8337 11.7752 19.8752 11.5002H18.3867L19.7197 12.3148Z", fill: "white" }),
+        React__default.createElement("path", { d: "M2.10956 11.5002H0.124023C0.175024 11.8398 0.243026 12.1728 0.327527 12.5003H0.47403L2.10956 11.5002Z", fill: "white" }),
+        React__default.createElement("path", { d: "M8.50002 7.27665V0.124512C8.16051 0.175513 7.82751 0.243514 7.5 0.328016V6.66564L8.50002 7.27665Z", fill: "white" }),
+        React__default.createElement("path", { d: "M11.5 12.2913V19.8759C11.8395 19.8249 12.1725 19.7569 12.5 19.6724V12.9023L11.5 12.2913Z", fill: "white" }),
+        React__default.createElement("path", { d: "M7.5 13.205V19.6721C7.82751 19.7566 8.16051 19.8241 8.50002 19.8756V12.594L7.5 13.205Z", fill: "white" }),
+        React__default.createElement("path", { d: "M11.5925 7.34715L11.7345 7.43415L12.5 6.96614V0.328016C12.1725 0.243514 11.8395 0.176013 11.5 0.124512V7.49865L11.5925 7.34715Z", fill: "white" }),
+        React__default.createElement("path", { d: "M2.32251 8.50002H7.01761L8.50014 7.594V7.277L7.50011 6.66548L2.37852 3.53442C1.95151 4.03743 1.572 4.58144 1.24949 5.16296L5.02507 7.5H2.29701L0.650482 6.47648C0.54748 6.74949 0.455478 7.02699 0.375977 7.3105L0.686483 7.5L2.32251 8.50002Z", fill: "white" }),
+        React__default.createElement("path", { d: "M11.7344 7.43419L13.4784 8.50021H18.171L19.6905 7.57119C19.528 6.92118 19.303 6.29767 19.02 5.70516L16.139 7.50019H13.4109L18.317 4.45013C18.1515 4.20313 17.9735 3.96562 17.7875 3.73462L12.4999 6.96618L11.7344 7.43419Z", fill: "white" }),
+        React__default.createElement("path", { d: "M5.02448 7.50013L1.2494 5.16309C1.0169 5.58259 0.821394 6.0231 0.650391 6.47661L2.29642 7.50013H5.02448Z", fill: "#E53935" }),
+        React__default.createElement("path", { d: "M16.1392 7.50024L19.0207 5.70521C18.8132 5.2702 18.5837 4.84819 18.3177 4.45068L13.4111 7.50024H16.1392Z", fill: "#E53935" }),
+        React__default.createElement("path", { d: "M11.5 11.5002V12.2913L12.5 12.9023L17.8556 16.1758C18.2416 15.6853 18.5836 15.1593 18.8736 14.6008L15.4856 12.5003H18.2136L19.4432 13.2673C19.5507 12.9563 19.6432 12.6393 19.7197 12.3153L18.3871 11.5002H11.5Z", fill: "white" }),
+        React__default.createElement("path", { d: "M13.4785 8.50019L11.7345 7.43417L11.5925 7.34717L11.5 7.49867V8.50019H13.4785Z", fill: "white" }),
+        React__default.createElement("path", { d: "M8.49934 12.5943V11.5002H2.10921L0.473182 12.5003L0.34668 12.5778C0.522683 13.2383 0.762688 13.8713 1.06319 14.4708L4.16375 12.5003H6.89181L1.80071 15.7168C1.95971 15.9448 2.12471 16.1688 2.30172 16.3823L7.49932 13.2053L8.49934 12.5943Z", fill: "white" }),
+        React__default.createElement("path", { d: "M7.01758 8.50026H8.50011V7.59424L7.01758 8.50026Z", fill: "white" }),
+        React__default.createElement("path", { d: "M15.4854 12.5L18.8729 14.6C19.0949 14.173 19.2834 13.727 19.4429 13.2665L18.2134 12.5H15.4854Z", fill: "#E53935" }),
+        React__default.createElement("path", { d: "M4.16501 12.5L1.06445 14.4705C1.28196 14.9045 1.52596 15.3216 1.80197 15.7166L6.89307 12.5H4.16501Z", fill: "#E53935" }),
+        React__default.createElement("path", { d: "M13.4785 8.5H11.5V11.5001H18.3871H19.8757C19.9497 11.0095 20.0002 10.511 20.0002 10C20.0002 9.48902 19.9497 8.99051 19.8757 8.5H18.1711H13.4785Z", fill: "#E53935" }),
+        React__default.createElement("path", { d: "M8.50017 11.5001V8.5H7.01764H2.32255H0.124502C0.050501 8.99051 0 9.48902 0 10C0 10.511 0.050501 11.0095 0.124502 11.5001H2.11004H8.50017Z", fill: "#E53935" }),
+        React__default.createElement("path", { d: "M11.5001 19.8759V12.2912V11.5002V8.50016V7.49865V0.124502C11.0095 0.050501 10.511 0 10 0C9.48902 0 8.99051 0.050501 8.5 0.124502V7.27664V7.59365V8.50016V11.5002V12.5942V19.8759C8.99051 19.9499 9.48902 20.0004 10 20.0004C10.511 20.0004 11.0095 19.9499 11.5001 19.8759Z", fill: "#E53935" }))));
+const EnglishSquareIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 26 26", fill: "none" }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "1", y: "5", width: "24", height: "16" },
+            React__default.createElement("path", { d: "M1.08301 7.41675C1.08301 6.31218 1.97844 5.41675 3.08301 5.41675H22.9163C24.0209 5.41675 24.9163 6.31218 24.9163 7.41675V18.5834C24.9163 19.688 24.0209 20.5834 22.9163 20.5834H3.08301C1.97844 20.5834 1.08301 19.688 1.08301 18.5834V7.41675Z", fill: "#3F51B5" })),
+        React__default.createElement("path", { d: "M1.08301 5.41675H24.9163V20.5834H1.08301V5.41675Z", fill: "#3F51B5" }),
+        React__default.createElement("path", { d: "M1.08301 7.70041L12.3551 14.5899L14.05 11.8165L3.57901 5.41675H1.08301V7.70041Z", fill: "white" }),
+        React__default.createElement("path", { d: "M24.9165 5.41675H22.9616L12.4912 11.816L14.1855 14.5899L24.9165 8.03083V5.41675Z", fill: "white" }),
+        React__default.createElement("path", { d: "M14.1855 10.9802L12.4912 13.7536L23.6658 20.5834H24.9165V17.5387L14.1855 10.9802Z", fill: "white" }),
+        React__default.createElement("path", { d: "M1.08301 17.8702V20.5834H2.87592L14.05 13.7541L12.3556 10.9802L1.08301 17.8702Z", fill: "white" }),
+        React__default.createElement("path", { d: "M1.08301 10.8333H24.9163V15.1666H1.08301V10.8333Z", fill: "white" }),
+        React__default.createElement("path", { d: "M10.833 5.41675H15.1663V20.5834H10.833V5.41675Z", fill: "white" }),
+        React__default.createElement("path", { d: "M9.32609 10.8334L1.08301 5.79537V7.06504L7.24826 10.8334H9.32609ZM24.0004 5.41675L15.1376 10.8334H17.2149L24.9163 6.12687V5.41675H24.0004ZM17.9191 15.1667L24.9163 19.4432V18.1735L19.9964 15.1667H17.9191ZM8.62192 15.1667L1.08301 19.7742V20.5834H1.83701L10.6992 15.1667H8.62192ZM1.08301 11.9167H24.9163V14.0834H1.08301V11.9167Z", fill: "#E53935" }),
+        React__default.createElement("path", { d: "M11.917 5.41675H14.0837V20.5834H11.917V5.41675Z", fill: "#E53935" }))));
+
+const IndiaRoundIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "round india flag", src: CommonGAssets.getAssetPath('flags/indiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const IndiaSquareIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "square indian flag", src: CommonGAssets.getAssetPath('flags/indiaSquare.png') }, props)));
+
+const IndonesiaRoundIcon = (_a) => {
+    var rest = __rest(_a, []);
+    const maskId = useUniqueId();
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none" }, rest),
+        React__default.createElement("mask", { id: maskId, style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
+        React__default.createElement("g", { mask: `url(#${maskId})` },
+            React__default.createElement("rect", { width: "20", height: "10", fill: "#CE1126" }),
+            React__default.createElement("rect", { y: "10", width: "20", height: "10", fill: "white" }))));
+};
+const IndonesiaSquareIcon = (_a) => {
+    var rest = __rest(_a, []);
+    const clipPathId = useUniqueId();
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, rest),
+        React__default.createElement("g", { clipPath: `url(#${clipPathId})` },
+            React__default.createElement("rect", { y: "0.0166016", width: "24", height: "8", fill: "#CE1126" }),
+            React__default.createElement("rect", { y: "8.0166", width: "24", height: "8", fill: "white" })),
+        React__default.createElement("defs", null,
+            React__default.createElement("clipPath", { id: clipPathId },
+                React__default.createElement("rect", { width: "24", height: "16", rx: "2", fill: "white" })))));
+};
+
+const MalaysiaRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
+        React__default.createElement("rect", { y: "1", width: "20", height: "20", fill: "#CC0001" }),
+        React__default.createElement("rect", { y: "16.106", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "16", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "18", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "14.0652", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "12.0242", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "9.9834", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "7.94263", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "5.90186", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "3.86084", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "2", width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { width: "20", height: "1.02041", fill: "white" }),
+        React__default.createElement("rect", { y: "-1", width: "10", height: "12", fill: "#010066" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.11387 3.86084C2.92711 3.86084 1.96387 5.23232 1.96387 6.92206C1.96387 8.6118 2.92711 9.98329 4.11387 9.98329C4.54263 9.98329 4.94211 9.80406 5.27763 9.4957C5.08225 9.59203 4.87256 9.64471 4.65427 9.64471C3.60193 9.64471 2.74786 8.42866 2.74786 6.93032C2.74786 5.43198 3.60193 4.21594 4.65427 4.21594C4.88682 4.21594 5.10959 4.27527 5.31571 4.38397C4.97256 4.0538 4.5589 3.86084 4.11387 3.86084Z", fill: "#FFCC00" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.67935 8.51573L6.7737 7.8407L7.04147 9.22221L6.43573 8.06657L6.24676 9.47313L6.0609 8.06576L5.4526 9.2188L5.72343 7.83844L4.81629 8.50957L5.49017 7.42963L4.46387 7.48593L5.40732 6.9203L4.46512 6.35062L5.4913 6.41133L4.81981 5.3285L5.72546 6.00353L5.45769 4.62202L6.06343 5.77766L6.25241 4.37109L6.43827 5.77847L7.04656 4.62543L6.77574 6.00579L7.68287 5.33466L7.00899 6.4146L8.0353 6.3583L7.09184 6.92392L8.03404 7.49361L7.00786 7.43289L7.67935 8.51573Z", fill: "#FFCC00" }))));
+const MalaysiaSquareIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, props),
+    React__default.createElement("rect", { width: "24", height: "16", rx: "2", fill: "#CC0001" }),
+    React__default.createElement("rect", { y: "12.2712", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "12.1904", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "13.7144", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "10.7161", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "9.16138", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "7.60645", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "6.05127", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "4.49658", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "2.94141", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { y: "1.52393", width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("rect", { width: "24", height: "0.777454", fill: "white" }),
+    React__default.createElement("path", { d: "M0 2C0 0.895431 0.895431 0 2 0H12V8.38095H0V2Z", fill: "#010066" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.93644 1.52393C3.51233 1.52393 2.35645 2.56887 2.35645 3.85629C2.35645 5.14371 3.51233 6.18865 4.93644 6.18865C5.45096 6.18865 5.93034 6.05209 6.33296 5.81716C6.09851 5.89054 5.84688 5.93068 5.58492 5.93068C4.32212 5.93068 3.29724 5.00417 3.29724 3.86258C3.29724 2.72099 4.32212 1.79448 5.58492 1.79448C5.86399 1.79448 6.13132 1.83968 6.37865 1.9225C5.96688 1.67094 5.47049 1.52393 4.93644 1.52393Z", fill: "#FFCC00" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.216 5.07041L8.12923 4.55611L8.45055 5.60869L7.72366 4.72819L7.49689 5.79987L7.27386 4.72758L6.5439 5.60609L6.86889 4.55439L5.78033 5.06572L6.58899 4.24291L5.35742 4.28581L6.48957 3.85485L5.35893 3.42081L6.59034 3.46707L5.78456 2.64205L6.87133 3.15636L6.55001 2.10378L7.2769 2.98427L7.50367 1.9126L7.7267 2.98488L8.45666 2.10638L8.13166 3.15808L9.22022 2.64674L8.41157 3.46955L9.64314 3.42666L8.51099 3.85761L9.64163 4.29165L8.41022 4.2454L9.216 5.07041Z", fill: "#FFCC00" })));
+
+const MyanmarRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
+        React__default.createElement("rect", { x: "-4", y: "-1", width: "28", height: "11", fill: "#FECB00" }),
+        React__default.createElement("rect", { x: "-4", y: "10", width: "28", height: "10", fill: "#EA2839" }),
+        React__default.createElement("rect", { x: "-4", y: "6.7041", width: "28", height: "6.47773", fill: "#34B233" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.56543 10.3272L10.1796 5.15527L11.7938 10.3272H8.56543Z", fill: "white" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.5292 11.2775L7.18336 14.5129L8.91745 9.37991L11.5292 11.2775Z", fill: "white" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.75181 11.8648L5.33182 8.73143L10.7494 8.79447L9.75181 11.8648Z", fill: "white" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.6105 8.78962L15.0281 8.72658L10.6081 11.86L9.6105 8.78962Z", fill: "white" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.4424 9.37686L13.1765 14.5098L8.83064 11.2744L11.4424 9.37686Z", fill: "white" }))));
+const MyanmarSquareIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, props),
+    React__default.createElement("rect", { width: "24", height: "16", rx: "2", fill: "#FECB00" }),
+    React__default.createElement("rect", { y: "8.3811", width: "24", height: "7.61905", rx: "2", fill: "#EA2839" }),
+    React__default.createElement("rect", { y: "5.86987", width: "24", height: "4.93542", fill: "#34B233" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.7705 8.63046L12.1541 4.68994L13.5377 8.63046H10.7705Z", fill: "white" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.3108 9.35502L9.58574 11.8201L11.0721 7.90925L13.3108 9.35502Z", fill: "white" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.7874 9.80216L7.99884 7.41482L12.6425 7.46285L11.7874 9.80216Z", fill: "white" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.6667 7.4589L16.3104 7.41087L12.5218 9.79821L11.6667 7.4589Z", fill: "white" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2361 7.90629L14.7225 11.8171L10.9974 9.35207L13.2361 7.90629Z", fill: "white" })));
+
+const PhilippinesRoundIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "round philippines flag", src: CommonGAssets.getAssetPath('flags/philippineRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
+const PhilippinesSquareIcon = (props) => (React__default.createElement(ImageWrap, Object.assign({ alt: "square philippines flag", src: CommonGAssets.getAssetPath('flags/philippineSquare.png') }, props)));
+
+const TaiwanRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
+        React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#D8D8D8" }),
+        React__default.createElement("g", null,
+            React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+                React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "white" })),
+            React__default.createElement("rect", { width: "30", height: "20", fill: "#ED1E24" }),
+            React__default.createElement("rect", { width: "15", height: "10", fill: "#2B2F84" }),
+            React__default.createElement("circle", { cx: "7.49791", cy: "4.99913", r: "1.869", fill: "white" }),
+            React__default.createElement("path", { d: "M7.93582 2.89402L7.49722 1.25732L7.05762 2.89812C7.28902 2.84212 7.64062 2.82912 7.93582 2.89402Z", fill: "white" }),
+            React__default.createElement("path", { d: "M6.82515 2.95674L5.62695 1.75854L6.06655 3.39934C6.23895 3.23514 6.53695 3.04814 6.82515 2.95674Z", fill: "white" }),
+            React__default.createElement("path", { d: "M5.89364 3.56677L4.25684 3.12817L5.45794 4.32927C5.52514 4.10107 5.68964 3.79007 5.89364 3.56677Z", fill: "white" }),
+            React__default.createElement("path", { d: "M5.39266 4.56055L3.75586 4.99915L5.39666 5.43885C5.34066 5.20745 5.32756 4.85585 5.39266 4.56055Z", fill: "white" }),
+            React__default.createElement("path", { d: "M5.45504 5.67188L4.25684 6.87007L5.89764 6.43047C5.73344 6.25807 5.54634 5.96007 5.45504 5.67188Z", fill: "white" }),
+            React__default.createElement("path", { d: "M6.06555 6.60278L5.62695 8.23958L6.82815 7.03838C6.59975 6.97128 6.28875 6.80678 6.06555 6.60278Z", fill: "white" }),
+            React__default.createElement("path", { d: "M7.05859 7.1041L7.49719 8.7409L7.93679 7.1001C7.70549 7.1561 7.35399 7.1692 7.05859 7.1041Z", fill: "white" }),
+            React__default.createElement("path", { d: "M8.16992 7.04148L9.36812 8.23968L8.92852 6.59888C8.75622 6.76308 8.45822 6.95018 8.16992 7.04148Z", fill: "white" }),
+            React__default.createElement("path", { d: "M9.10156 6.43145L10.7384 6.87005L9.53726 5.66895C9.47006 5.89725 9.30556 6.20825 9.10156 6.43145Z", fill: "white" }),
+            React__default.createElement("path", { d: "M9.60263 5.43763L11.2394 4.99903L9.59863 4.55933C9.65463 4.79073 9.66763 5.14223 9.60263 5.43763Z", fill: "white" }),
+            React__default.createElement("path", { d: "M9.54026 4.32637L10.7385 3.12817L9.09766 3.56777C9.26196 3.74007 9.44896 4.03807 9.54026 4.32637Z", fill: "white" }),
+            React__default.createElement("path", { d: "M8.92959 3.39534L9.36819 1.75854L8.16699 2.95964C8.39529 3.02674 8.70629 3.19124 8.92959 3.39534Z", fill: "white" })))));
+const TaiwanSquareIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, props),
+    React__default.createElement("rect", { width: "24", height: "16", rx: "2", fill: "#ED1E24" }),
+    React__default.createElement("path", { d: "M0 2C0 0.89543 0.895431 0 2 0H15V10H0V2Z", fill: "#2B2F84" }),
+    React__default.createElement("circle", { cx: "7.49791", cy: "4.99913", r: "1.869", fill: "white" }),
+    React__default.createElement("path", { d: "M7.93582 2.89402L7.49722 1.25732L7.05762 2.89812C7.28902 2.84212 7.64062 2.82912 7.93582 2.89402Z", fill: "white" }),
+    React__default.createElement("path", { d: "M6.82515 2.95674L5.62695 1.75854L6.06655 3.39934C6.23895 3.23514 6.53695 3.04814 6.82515 2.95674Z", fill: "white" }),
+    React__default.createElement("path", { d: "M5.89364 3.56677L4.25684 3.12817L5.45794 4.32927C5.52514 4.10107 5.68964 3.79007 5.89364 3.56677Z", fill: "white" }),
+    React__default.createElement("path", { d: "M5.39266 4.56055L3.75586 4.99915L5.39666 5.43885C5.34066 5.20745 5.32756 4.85585 5.39266 4.56055Z", fill: "white" }),
+    React__default.createElement("path", { d: "M5.45504 5.67188L4.25684 6.87007L5.89764 6.43047C5.73344 6.25807 5.54634 5.96007 5.45504 5.67188Z", fill: "white" }),
+    React__default.createElement("path", { d: "M6.06555 6.60278L5.62695 8.23958L6.82815 7.03838C6.59975 6.97128 6.28875 6.80678 6.06555 6.60278Z", fill: "white" }),
+    React__default.createElement("path", { d: "M7.05859 7.1041L7.49719 8.7409L7.93679 7.1001C7.70549 7.1561 7.35399 7.1692 7.05859 7.1041Z", fill: "white" }),
+    React__default.createElement("path", { d: "M8.16992 7.04148L9.36812 8.23968L8.92852 6.59888C8.75622 6.76308 8.45822 6.95018 8.16992 7.04148Z", fill: "white" }),
+    React__default.createElement("path", { d: "M9.10156 6.43145L10.7384 6.87005L9.53726 5.66895C9.47006 5.89725 9.30556 6.20825 9.10156 6.43145Z", fill: "white" }),
+    React__default.createElement("path", { d: "M9.60263 5.43763L11.2394 4.99903L9.59863 4.55933C9.65463 4.79073 9.66763 5.14223 9.60263 5.43763Z", fill: "white" }),
+    React__default.createElement("path", { d: "M9.54026 4.32637L10.7385 3.12817L9.09766 3.56777C9.26196 3.74007 9.44896 4.03807 9.54026 4.32637Z", fill: "white" }),
+    React__default.createElement("path", { d: "M8.92959 3.39534L9.36819 1.75854L8.16699 2.95964C8.39529 3.02674 8.70629 3.19124 8.92959 3.39534Z", fill: "white" })));
+
+const ThailandRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
+        React__default.createElement("rect", { x: "-4", y: "-0.0166016", width: "28", height: "20", fill: "#ED1C24" }),
+        React__default.createElement("rect", { x: "-4", y: "3.31665", width: "28", height: "13.3333", fill: "white" }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M-4 6.65015H24V13.3168H-4V6.65015Z", fill: "#241D4F" }))));
+const ThailandSquareIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 17", fill: "none" }, props),
+    React__default.createElement("rect", { y: "0.983398", width: "24", height: "16", rx: "2", fill: "#ED1C24" }),
+    React__default.createElement("rect", { y: "3.65039", width: "24", height: "10.6667", fill: "white" }),
+    React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 6.31689H24V11.6502H0V6.31689Z", fill: "#241D4F" })));
+
+const VietnamRoundIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
+            React__default.createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
+        React__default.createElement("rect", { x: "-4", y: "-0.0166016", width: "28", height: "20", fill: "#DA251D" }),
+        React__default.createElement("path", { d: "M11.7228 10.8677L14.2819 9.00839L11.1187 9.00839L10.1409 6L9.16316 9.00839L6 9.00839L8.5591 10.8677L7.58184 13.8766L10.1409 12.0168L12.7 13.8766L11.7228 10.8677Z", fill: "#FFEB3B" }))));
+const VietnamSquareIcon = (props) => (React__default.createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, props),
+    React__default.createElement("g", null,
+        React__default.createElement("clipPath", null,
+            React__default.createElement("rect", { width: "24", height: "16", fill: "white" })),
+        React__default.createElement("path", { d: "M2.01386e-10 2C0 0.895431 0.895431 -7.50368e-10 2 -1.67599e-09L22 -1.84359e-08C23.1046 -1.93615e-08 24 0.895431 24 2L24 14C24 15.1046 23.1046 16 22 16L2 16C0.89543 16 1.52092e-09 15.1046 1.4097e-09 14L2.01386e-10 2Z", fill: "#DA251D" }),
+        React__default.createElement("path", { d: "M13.7823 8.92854L16.6663 6.8332L13.1016 6.8332L11.9997 3.44287L10.8978 6.8332L7.33301 6.8332L10.217 8.92854L9.11567 12.3195L11.9997 10.2235L14.8837 12.3195L13.7823 8.92854Z", fill: "#FFEB3B" }))));
+
+var styles$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;
+        }
+    }
+    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)) {
         countries.push(phone);
@@ -1479,4 +1335,4 @@ const _ChipButton = (_a) => {
 const ChipButton = _ChipButton;
 ChipButton.Group = Chip.Group;
 
-export { Anchor as A, Breadcrumbs as B, CaretDown as C, DEBOUNCED_TIME as D, ErrorBoundary as E, Flag as F, Input as I, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Avatar as a, AspectRatio as b, CentralCarousel as c, Checkbox as d, ChipButton as e, PasswordInput as f, getMantineThemeOverride as g, StyledTextArea as h, StyledSliderWrapper as i, StyledSlider as j, Accordion as k, Carousel as l, emotionCache as m, Popover as n, styles as s, themeColors as t };
+export { Anchor as A, Breadcrumbs as B, CaretDown as C, DEBOUNCED_TIME as D, ErrorBoundary as E, Flag as F, Input as I, NumberInput as N, OTP as O, Phone as P, Radio as R, Select as S, Avatar as a, AspectRatio as b, CentralCarousel as c, Checkbox as d, ChipButton as e, PasswordInput as f, StyledTextArea as g, StyledSliderWrapper as h, StyledSlider as i, Accordion as j, Carousel as k, emotionCache as l, Popover as m, styles as s };