@hhgtech/hhg-components
Version:
Hello Health Group common components
704 lines (682 loc) • 91.7 kB
JavaScript
'use strict';
var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var other = require('@hhgtech/icons/other');
var core = require('@mantine/core');
var hooks = require('@mantine/hooks');
var index$2 = require('./index-db44e8cb.js');
var useScreenSize = require('./useScreenSize-30f50b76.js');
var styled = require('@emotion/styled');
var carousel = require('@mantine/carousel');
var index$3 = require('./index-25f2e7a5.js');
require('./index-ad7155cf.js');
var miscTheme = require('./miscTheme.js');
var utils = require('./utils-7ba0038a.js');
var useMantineLocale = require('./useMantineLocale-e946ce4a.js');
var index = require('./index-1ee4ebb8.js');
var index$1 = require('./index-86fd931c.js');
var Locale = require('./Locale-59ccf941.js');
var cn = require('classnames');
var useUniqueId = require('./useUniqueId-6e2f8c19.js');
var constantsSite = require('./constantsSite.js');
var core$1 = require('@hhgtech/icons/core');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var cn__default = /*#__PURE__*/_interopDefault(cn);
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: miscTheme.theme.colors.gray600,
},
description: {
fontWeight: 400,
fontSize: '12px',
lineHeight: '18px',
color: miscTheme.theme.colors.gray600,
marginBottom: '0.25rem',
},
error: {
marginTop: '0.25rem',
},
},
},
NumberInput: {
defaultProps: {
decimalSeparator: (_a = index.ISO_FORMAT[locale]) === null || _a === void 0 ? void 0 : _a.separator,
},
},
Input: {
styles: (_theme, _, { size }) => ({
input: {
border: `1px solid ${miscTheme.theme.colors.gray200}`,
transition: `all ${index$1.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 ${miscTheme.theme.colors.red600}`,
color: '#000',
},
}),
},
});
};
const getGlobalRadioStyle = {
Radio: {
defaultProps: {
size: 'sm',
color: 'blue.6',
},
styles: {
radio: {
backgroundColor: 'transparent',
'&:checked': {
backgroundColor: 'transparent',
},
},
},
},
};
const themeColors = {
hb: [
'#e3f2ff',
'#bcdeff',
'#91caff',
'#65b5ff',
'#45a4ff',
'#2b94ff',
'#2d87f3',
'#2c74df',
'#2b62cd',
'#2743ad',
],
mb: [
'#FFE9F1',
'#F8CCDC',
'#F5B4CB',
'#F29CBA',
'#EE84AA',
'#EB6B99',
'#E85388',
'#D34C7C',
'#BE446F',
'#A93D63',
],
blue: [
'#e3f2ff',
'#bcdeff',
'#91caff',
'#65b5ff',
'#45a4ff',
'#2b94ff',
'#2d87f3',
'#2c74df',
'#2b62cd',
'#2743ad',
],
gray: [
'#fafafa',
'#f2f2f2',
'#d9d9d9',
'#bfbfbf',
'#8c8c8c',
'#737373',
'#595959',
'#404040',
'#262626',
'#1a1a1a',
],
delftGray: [
'#F3F3F3',
'#EAEAEC',
'#D9DAE2',
'#B9BAC8',
'#9898A9',
'#7C7C8F',
'#5A5A72',
'#3E3F58',
'#202135',
'#0C0C12',
],
neutral: [
'#f7f9fc',
'#e4e8ec',
'#d2d6dc',
'#bfc5cc',
'#adb3bc',
'#9aa2ac',
'#87909c',
'#757f8c',
'#626d7c',
'#545E6C',
],
green: [
'#e0f8ee',
'#b3eed5',
'#7ce2b9',
'#2ed69e',
'#00CB8A',
'#00C076',
'#00B16A',
'#009E5C',
'#008C50',
'#006C39',
],
pink: [
'#fff1f6',
'#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 getMantineThemeOverride = (locale, template = 'hb') => {
return {
defaultRadius: template === 'hb' ? 8 : 16,
cursorType: 'pointer',
colors: Object.assign(Object.assign(Object.assign({}, themeColors), miscTheme.theme.colors), { toneYellow: '#fff9eb', toneGreen: '#f2fcf7', toneBlue: '#e0e9fb', tonePink: '#ffeaf1' }),
primaryColor: template,
primaryShade: 6,
fontFamily: (locale === Locale.LOCALE.Cambodia
? 'Battambang'
: locale === Locale.LOCALE.Thailand
? 'Noto Sans Thai'
: 'Inter') +
`, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif`,
breakpoints: {
xs: core.em(utils.Breakpoints.BREAK_POINT_SMALL_MOBILE),
sm: core.em(utils.Breakpoints.BREAK_POINT_MOBILE),
md: core.em(utils.Breakpoints.BREAK_POINT_TABLET),
lg: core.em(utils.Breakpoints.BREAK_POINT_PC),
xl: core.em(utils.Breakpoints.BREAK_POINT_LGPC),
},
components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, GlobalInputStyle(locale)), getGlobalRadioStyle), GlobalButtonStyle), useMantineLocale.GlobalHeadingStyle), useMantineLocale.GlobalContainerStyle),
other: {
template,
defaultImage: index$2.CommonGAssets.getAssetPath(template === 'mb' ? 'default-image-mb.jpg' : 'default-image.jpg'),
},
};
};
const CambodiaRoundIcon = (props) => (React__namespace["default"].createElement(useScreenSize.ImageWrap, Object.assign({ alt: "round cambodia flag", src: index$2.CommonGAssets.getAssetPath('flags/cambodiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
const CambodiaSquareIcon = (props) => (React__namespace["default"].createElement(useScreenSize.ImageWrap, Object.assign({ alt: "square cambodia flag", src: index$2.CommonGAssets.getAssetPath('flags/cambodiaSquare.png') }, props)));
const EnglishRoundIcon = (props) => (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
React__namespace["default"].createElement("g", null,
React__namespace["default"].createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
React__namespace["default"].createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
React__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["default"].createElement("path", { d: "M13.4785 8.50019L11.7345 7.43417L11.5925 7.34717L11.5 7.49867V8.50019H13.4785Z", fill: "white" }),
React__namespace["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__namespace["default"].createElement("path", { d: "M7.01758 8.50026H8.50011V7.59424L7.01758 8.50026Z", fill: "white" }),
React__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 26 26", fill: "none" }, props),
React__namespace["default"].createElement("g", null,
React__namespace["default"].createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "1", y: "5", width: "24", height: "16" },
React__namespace["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__namespace["default"].createElement("path", { d: "M1.08301 5.41675H24.9163V20.5834H1.08301V5.41675Z", fill: "#3F51B5" }),
React__namespace["default"].createElement("path", { d: "M1.08301 7.70041L12.3551 14.5899L14.05 11.8165L3.57901 5.41675H1.08301V7.70041Z", fill: "white" }),
React__namespace["default"].createElement("path", { d: "M24.9165 5.41675H22.9616L12.4912 11.816L14.1855 14.5899L24.9165 8.03083V5.41675Z", fill: "white" }),
React__namespace["default"].createElement("path", { d: "M14.1855 10.9802L12.4912 13.7536L23.6658 20.5834H24.9165V17.5387L14.1855 10.9802Z", fill: "white" }),
React__namespace["default"].createElement("path", { d: "M1.08301 17.8702V20.5834H2.87592L14.05 13.7541L12.3556 10.9802L1.08301 17.8702Z", fill: "white" }),
React__namespace["default"].createElement("path", { d: "M1.08301 10.8333H24.9163V15.1666H1.08301V10.8333Z", fill: "white" }),
React__namespace["default"].createElement("path", { d: "M10.833 5.41675H15.1663V20.5834H10.833V5.41675Z", fill: "white" }),
React__namespace["default"].createElement("path", { d: "M9.32609 10.8334L1.08301 5.79537V7.06504L7.24826 10.8334H9.32609ZM24.0004 5.41675L15.1376 10.8334H17.2149L24.9163 6.12687V5.41675H24.0004ZM17.9191 15.1667L24.9163 19.4432V18.1735L19.9964 15.1667H17.9191ZM8.62192 15.1667L1.08301 19.7742V20.5834H1.83701L10.6992 15.1667H8.62192ZM1.08301 11.9167H24.9163V14.0834H1.08301V11.9167Z", fill: "#E53935" }),
React__namespace["default"].createElement("path", { d: "M11.917 5.41675H14.0837V20.5834H11.917V5.41675Z", fill: "#E53935" }))));
const IndiaRoundIcon = (props) => (React__namespace["default"].createElement(useScreenSize.ImageWrap, Object.assign({ alt: "round india flag", src: index$2.CommonGAssets.getAssetPath('flags/indiaRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
const IndiaSquareIcon = (props) => (React__namespace["default"].createElement(useScreenSize.ImageWrap, Object.assign({ alt: "square indian flag", src: index$2.CommonGAssets.getAssetPath('flags/indiaSquare.png') }, props)));
const IndonesiaRoundIcon = (_a) => {
var rest = tslib_es6.__rest(_a, []);
const maskId = useUniqueId.useUniqueId();
return (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none" }, rest),
React__namespace["default"].createElement("mask", { id: maskId, style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
React__namespace["default"].createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
React__namespace["default"].createElement("g", { mask: `url(#${maskId})` },
React__namespace["default"].createElement("rect", { width: "20", height: "10", fill: "#CE1126" }),
React__namespace["default"].createElement("rect", { y: "10", width: "20", height: "10", fill: "white" }))));
};
const IndonesiaSquareIcon = (_a) => {
var rest = tslib_es6.__rest(_a, []);
const clipPathId = useUniqueId.useUniqueId();
return (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, rest),
React__namespace["default"].createElement("g", { clipPath: `url(#${clipPathId})` },
React__namespace["default"].createElement("rect", { y: "0.0166016", width: "24", height: "8", fill: "#CE1126" }),
React__namespace["default"].createElement("rect", { y: "8.0166", width: "24", height: "8", fill: "white" })),
React__namespace["default"].createElement("defs", null,
React__namespace["default"].createElement("clipPath", { id: clipPathId },
React__namespace["default"].createElement("rect", { width: "24", height: "16", rx: "2", fill: "white" })))));
};
const MalaysiaRoundIcon = (props) => (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
React__namespace["default"].createElement("g", null,
React__namespace["default"].createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
React__namespace["default"].createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
React__namespace["default"].createElement("rect", { y: "1", width: "20", height: "20", fill: "#CC0001" }),
React__namespace["default"].createElement("rect", { y: "16.106", width: "20", height: "1.02041", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "16", width: "20", height: "1.02041", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "18", width: "20", height: "1.02041", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "14.0652", width: "20", height: "1.02041", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "12.0242", width: "20", height: "1.02041", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "9.9834", width: "20", height: "1.02041", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "7.94263", width: "20", height: "1.02041", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "5.90186", width: "20", height: "1.02041", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "3.86084", width: "20", height: "1.02041", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "2", width: "20", height: "1.02041", fill: "white" }),
React__namespace["default"].createElement("rect", { width: "20", height: "1.02041", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "-1", width: "10", height: "12", fill: "#010066" }),
React__namespace["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__namespace["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__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, props),
React__namespace["default"].createElement("rect", { width: "24", height: "16", rx: "2", fill: "#CC0001" }),
React__namespace["default"].createElement("rect", { y: "12.2712", width: "24", height: "0.777454", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "12.1904", width: "24", height: "0.777454", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "13.7144", width: "24", height: "0.777454", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "10.7161", width: "24", height: "0.777454", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "9.16138", width: "24", height: "0.777454", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "7.60645", width: "24", height: "0.777454", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "6.05127", width: "24", height: "0.777454", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "4.49658", width: "24", height: "0.777454", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "2.94141", width: "24", height: "0.777454", fill: "white" }),
React__namespace["default"].createElement("rect", { y: "1.52393", width: "24", height: "0.777454", fill: "white" }),
React__namespace["default"].createElement("rect", { width: "24", height: "0.777454", fill: "white" }),
React__namespace["default"].createElement("path", { d: "M0 2C0 0.895431 0.895431 0 2 0H12V8.38095H0V2Z", fill: "#010066" }),
React__namespace["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__namespace["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__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
React__namespace["default"].createElement("g", null,
React__namespace["default"].createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
React__namespace["default"].createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
React__namespace["default"].createElement("rect", { x: "-4", y: "-1", width: "28", height: "11", fill: "#FECB00" }),
React__namespace["default"].createElement("rect", { x: "-4", y: "10", width: "28", height: "10", fill: "#EA2839" }),
React__namespace["default"].createElement("rect", { x: "-4", y: "6.7041", width: "28", height: "6.47773", fill: "#34B233" }),
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.56543 10.3272L10.1796 5.15527L11.7938 10.3272H8.56543Z", fill: "white" }),
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.5292 11.2775L7.18336 14.5129L8.91745 9.37991L11.5292 11.2775Z", fill: "white" }),
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.75181 11.8648L5.33182 8.73143L10.7494 8.79447L9.75181 11.8648Z", fill: "white" }),
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.6105 8.78962L15.0281 8.72658L10.6081 11.86L9.6105 8.78962Z", fill: "white" }),
React__namespace["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__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, props),
React__namespace["default"].createElement("rect", { width: "24", height: "16", rx: "2", fill: "#FECB00" }),
React__namespace["default"].createElement("rect", { y: "8.3811", width: "24", height: "7.61905", rx: "2", fill: "#EA2839" }),
React__namespace["default"].createElement("rect", { y: "5.86987", width: "24", height: "4.93542", fill: "#34B233" }),
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.7705 8.63046L12.1541 4.68994L13.5377 8.63046H10.7705Z", fill: "white" }),
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.3108 9.35502L9.58574 11.8201L11.0721 7.90925L13.3108 9.35502Z", fill: "white" }),
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.7874 9.80216L7.99884 7.41482L12.6425 7.46285L11.7874 9.80216Z", fill: "white" }),
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.6667 7.4589L16.3104 7.41087L12.5218 9.79821L11.6667 7.4589Z", fill: "white" }),
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2361 7.90629L14.7225 11.8171L10.9974 9.35207L13.2361 7.90629Z", fill: "white" })));
const PhilippinesRoundIcon = (props) => (React__namespace["default"].createElement(useScreenSize.ImageWrap, Object.assign({ alt: "round philippines flag", src: index$2.CommonGAssets.getAssetPath('flags/philippineRound.png'), style: Object.assign({ borderRadius: '50%' }, props.style) }, props)));
const PhilippinesSquareIcon = (props) => (React__namespace["default"].createElement(useScreenSize.ImageWrap, Object.assign({ alt: "square philippines flag", src: index$2.CommonGAssets.getAssetPath('flags/philippineSquare.png') }, props)));
const TaiwanRoundIcon = (props) => (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
React__namespace["default"].createElement("g", null,
React__namespace["default"].createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
React__namespace["default"].createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
React__namespace["default"].createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#D8D8D8" }),
React__namespace["default"].createElement("g", null,
React__namespace["default"].createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
React__namespace["default"].createElement("circle", { cx: "10", cy: "10", r: "10", fill: "white" })),
React__namespace["default"].createElement("rect", { width: "30", height: "20", fill: "#ED1E24" }),
React__namespace["default"].createElement("rect", { width: "15", height: "10", fill: "#2B2F84" }),
React__namespace["default"].createElement("circle", { cx: "7.49791", cy: "4.99913", r: "1.869", fill: "white" }),
React__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, props),
React__namespace["default"].createElement("rect", { width: "24", height: "16", rx: "2", fill: "#ED1E24" }),
React__namespace["default"].createElement("path", { d: "M0 2C0 0.89543 0.895431 0 2 0H15V10H0V2Z", fill: "#2B2F84" }),
React__namespace["default"].createElement("circle", { cx: "7.49791", cy: "4.99913", r: "1.869", fill: "white" }),
React__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["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__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
React__namespace["default"].createElement("g", null,
React__namespace["default"].createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
React__namespace["default"].createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
React__namespace["default"].createElement("rect", { x: "-4", y: "-0.0166016", width: "28", height: "20", fill: "#ED1C24" }),
React__namespace["default"].createElement("rect", { x: "-4", y: "3.31665", width: "28", height: "13.3333", fill: "white" }),
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M-4 6.65015H24V13.3168H-4V6.65015Z", fill: "#241D4F" }))));
const ThailandSquareIcon = (props) => (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 24 17", fill: "none" }, props),
React__namespace["default"].createElement("rect", { y: "0.983398", width: "24", height: "16", rx: "2", fill: "#ED1C24" }),
React__namespace["default"].createElement("rect", { y: "3.65039", width: "24", height: "10.6667", fill: "white" }),
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 6.31689H24V11.6502H0V6.31689Z", fill: "#241D4F" })));
const VietnamRoundIcon = (props) => (React__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: "none", style: Object.assign({ borderRadius: '50%' }, props.style) }, props),
React__namespace["default"].createElement("g", null,
React__namespace["default"].createElement("mask", { style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "20", height: "20" },
React__namespace["default"].createElement("circle", { cx: "10", cy: "10", r: "10", fill: "#C4C4C4" })),
React__namespace["default"].createElement("rect", { x: "-4", y: "-0.0166016", width: "28", height: "20", fill: "#DA251D" }),
React__namespace["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__namespace["default"].createElement("svg", Object.assign({ viewBox: "0 0 24 16", fill: "none" }, props),
React__namespace["default"].createElement("g", null,
React__namespace["default"].createElement("clipPath", null,
React__namespace["default"].createElement("rect", { width: "24", height: "16", fill: "white" })),
React__namespace["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__namespace["default"].createElement("path", { d: "M13.7823 8.92854L16.6663 6.8332L13.1016 6.8332L11.9997 3.44287L10.8978 6.8332L7.33301 6.8332L10.217 8.92854L9.11567 12.3195L11.9997 10.2235L14.8837 12.3195L13.7823 8.92854Z", fill: "#FFEB3B" }))));
var styles$2 = {"flag":"pfaLGRK"};
const Flag = ({ country, language, rounded, height, width, isTesting, className, }) => {
let flag;
let flagRounded;
switch (language) {
case 'en':
flag = React__namespace["default"].createElement(EnglishSquareIcon, null);
flagRounded = React__namespace["default"].createElement(EnglishRoundIcon, null);
break;
case 'vi':
flag = React__namespace["default"].createElement(VietnamSquareIcon, null);
flagRounded = React__namespace["default"].createElement(VietnamRoundIcon, null);
break;
case 'id':
flag = React__namespace["default"].createElement(IndonesiaSquareIcon, { isTesting: isTesting });
flagRounded = React__namespace["default"].createElement(IndonesiaRoundIcon, { isTesting: isTesting });
break;
case 'th':
flag = React__namespace["default"].createElement(ThailandSquareIcon, null);
flagRounded = React__namespace["default"].createElement(ThailandRoundIcon, null);
break;
case 'km':
flag = React__namespace["default"].createElement(CambodiaSquareIcon, null);
flagRounded = React__namespace["default"].createElement(CambodiaRoundIcon, null);
break;
case 'ms':
flag = React__namespace["default"].createElement(MalaysiaSquareIcon, null);
flagRounded = React__namespace["default"].createElement(MalaysiaRoundIcon, null);
break;
case 'my':
flag = React__namespace["default"].createElement(MyanmarSquareIcon, null);
flagRounded = React__namespace["default"].createElement(MyanmarRoundIcon, null);
break;
case 'tl':
flag = React__namespace["default"].createElement(PhilippinesSquareIcon, null);
flagRounded = React__namespace["default"].createElement(PhilippinesRoundIcon, null);
break;
case 'hi':
flag = React__namespace["default"].createElement(IndiaSquareIcon, null);
flagRounded = React__namespace["default"].createElement(IndiaRoundIcon, null);
break;
case 'zh':
flag = React__namespace["default"].createElement(TaiwanSquareIcon, null);
flagRounded = React__namespace["default"].createElement(TaiwanRoundIcon, null);
break;
}
if (!flag && !flagRounded) {
switch (country) {
case 'VN':
flag = React__namespace["default"].createElement(VietnamSquareIcon, null);
flagRounded = React__namespace["default"].createElement(VietnamRoundIcon, null);
break;
case 'ID':
flag = React__namespace["default"].createElement(IndonesiaSquareIcon, { isTesting: isTesting });
flagRounded = React__namespace["default"].createElement(IndonesiaRoundIcon, { isTesting: isTesting });
break;
case 'TH':
flag = React__namespace["default"].createElement(ThailandSquareIcon, null);
flagRounded = React__namespace["default"].createElement(ThailandRoundIcon, null);
break;
case 'KH':
flag = React__namespace["default"].createElement(CambodiaSquareIcon, null);
flagRounded = React__namespace["default"].createElement(CambodiaRoundIcon, null);
break;
case 'MY':
flag = React__namespace["default"].createElement(MalaysiaSquareIcon, null);
flagRounded = React__namespace["default"].createElement(MalaysiaRoundIcon, null);
break;
case 'MM':
flag = React__namespace["default"].createElement(MyanmarSquareIcon, null);
flagRounded = React__namespace["default"].createElement(MyanmarRoundIcon, null);
break;
case 'PH':
flag = React__namespace["default"].createElement(PhilippinesSquareIcon, null);
flagRounded = React__namespace["default"].createElement(PhilippinesRoundIcon, null);
break;
case 'IN':
flag = React__namespace["default"].createElement(IndiaSquareIcon, null);
flagRounded = React__namespace["default"].createElement(IndiaRoundIcon, null);
break;
case 'TW':
flag = React__namespace["default"].createElement(TaiwanSquareIcon, null);
flagRounded = React__namespace["default"].createElement(TaiwanRoundIcon, null);
break;
}
}
return (React__namespace["default"].createElement("div", { className: `${styles$2.flag} ${className || ''}`, style: {
'--width': width || 20,
'--height': height || 20,
} }, rounded ? flagRounded : flag));
};
const Select = React.forwardRef((_a, ref) => {
var { keepSearch = false } = _a, props = tslib_es6.__rest(_a, ["keepSearch"]);
if (keepSearch) {
return (React__namespace["default"].createElement(_AutoComplete, Object.assign({}, props, { ref: ref })));
}
else {
return React__namespace["default"].createElement(_Select, Object.assign({}, props, { ref: ref }));
}
});
const _AutoComplete = React.forwardRef((_a, ref) => {
var { value, defaultValue, onChange, clearable } = _a, props = tslib_es6.__rest(_a, ["value", "defaultValue", "onChange", "clearable"]);
const [_value, handleChange] = hooks.useUncontrolled({
value,
defaultValue,
onChange,
});
const onClear = () => {
handleChange('');
};
return (React__namespace["default"].createElement(core.Autocomplete, Object.assign({ ref: ref, rightSection: React__namespace["default"].createElement(core.Image, { src: index$2.CommonGAssets.getAssetPath('chevron-down.svg'), fit: "none" }), size: "md", maxDropdownHeight: 300, onChange: (e) => handleChange(e), value: _value }, props, (clearable && (_value === null || _value === void 0 ? void 0 : _value.length) > 0
? {
rightSection: (React__namespace["default"].createElement(core.ActionIcon, { onClick: onClear, sx: { cursor: 'pointer' } },
React__namespace["default"].createElement(_IconSelect, null))),
}
: {}))));
});
const _Select = React.forwardRef((_a, ref) => {
var { searchValue, onSearchChange } = _a, props = tslib_es6.__rest(_a, ["searchValue", "onSearchChange"]);
const [_searchValue, handleSearchChange] = hooks.useUncontrolled({
defaultValue: '',
value: searchValue,
onChange: onSearchChange,
});
const onClear = () => {
handleSearchChange('');
};
return (React__namespace["default"].createElement(core.Select, Object.assign({ ref: ref, rightSection: React__namespace["default"].createElement(other.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__namespace["default"].createElement(core.ActionIcon, { onClick: onClear, sx: { cursor: 'pointer' } },
React__namespace["default"].createElement(_IconSelect, null))),
}
: {}))));
});
const _IconSelect = () => (React__namespace["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.6665 9.99996C1.6665 5.39163 5.3915 1.66663 9.99984 1.66663C14.6082 1.66663 18.3332 5.39163 18.3332 9.99996C18.3332 14.6083 14.6082 18.3333 9.99984 18.3333C5.3915 18.3333 1.6665 14.6083 1.6665 9.99996ZM12.4083 13.5831C12.7333 13.9081 13.2583 13.9081 13.5833 13.5831C13.9 13.2581 13.9 12.7247 13.5833 12.4081L11.175 9.99973L13.5833 7.5914C13.9083 7.2664 13.9083 6.7414 13.5833 6.4164C13.2583 6.0914 12.7333 6.0914 12.4083 6.4164L10 8.82473L7.59167 6.4164C7.26667 6.0914 6.74167 6.0914 6.41667 6.4164C6.26063 6.57209 6.17293 6.78347 6.17293 7.0039C6.17293 7.22433 6.26063 7.43571 6.41667 7.5914L8.825 9.99973L6.41667 12.4081C6.26063 12.5638 6.17293 12.7751 6.17293 12.9956C6.17293 13.216 6.26063 13.4274 6.41667 13.5831C6.74167 13.9081 7.26667 13.9081 7.59167 13.5831L10 11.1747L12.4083 13.5831Z", fill: "#8C8C8C" })));
class ErrorBoundary extends React.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 (th