@syngrisi/syngrisi
Version:
Syngrisi - Visual Testing Tool
1,461 lines (1,460 loc) • 450 kB
JavaScript
import { bD as transitions$1, r as react, U as useUncontrolled, a$ as useIsomorphicEffect, O as useId, b as jsx, c as createStyles, K as useComponentDefaultProps, B as Box, j as jsxs, aW as UnstyledButton, aF as getDefaultZIndex, b0 as useInputProps, ay as useDidUpdate, W as Input, aS as useMergedRef, aE as packSx, aG as createPolymorphicComponent, d as useMantineTheme, a0 as Fragment, V as ActionIcon, a6 as Transition, P as Paper, aD as OptionalPortal, T as Text, a_ as Overlay, bE as assignRef, bF as getSystemStyles, bG as MANTINE_SIZES, aR as isElement, b1 as keyframes, aH as _extends, R as extractSystemStyles, a5 as React, J as sizes$8, q as TextInput, G as Group, bH as InputsGroup, bI as InlineInput, A as Anchor, a4 as Loader, bJ as CheckboxIcon, bK as GROUP_POSITIONS, s as Checkbox, bL as SYSTEM_PROPS, h as Button, C as Center, aX as CheckIcon, e as Container, L as LoadingOverlay, bg as Portal, i as Progress, Y as Stack, S as Switch, g as Title, a2 as Tooltip, aT as clsx, bM as DEFAULT_THEME, bN as MANTINE_COLORS, M as MantineProvider, F as ColorSchemeProvider, bO as useMantineColorScheme, bP as GlobalStyles, bQ as NormalizeCSS, bR as filterProps, bS as useCss, bT as useEmotionCache, bU as defaultMantineEmotionCache, bV as createCache, $ as Dge, bi as useLocation, bW as Link, bX as Dqe, bY as ya, bs as N9, bx as CMe, p as useForm, X as queryString, l as log, bZ as useParams$1, m as dj, n as lAe, b_ as tMe, b$ as wQ, bv as Qa, u as useQuery, bq as Iqe, Z as Epe, ab as Ol, ac as ua, ad as RX, a8 as rze, a7 as Xfe, y as useLocalStorage, as as Y, a9 as zV, au as Routes, av as Route, Q as QueryClient, f as useDocumentTitle, at as useNavigate, E as QueryClientProvider, H as createRoot, I as BrowserRouter } from "./use-form.2c921e76.js";
import { a9 as createSafeContext, aa as createScopedKeydownHandler, z as Collapse, ab as CloseButton, ac as HorizontalSection, ad as Section, ae as VerticalSection, af as DefaultItem$2, ag as groupOptions, ah as SelectPopover, ai as SelectScrollArea, aj as SelectItems, ak as noop$1, P as Popover, A as Affix, al as useFocusTrap, am as useScrollLock, an as useFocusReturn, ao as GroupedTransition, ap as createEventHandler, a as useDisclosure, aq as useDelayedHover, ar as _objectWithoutPropertiesLoose, as as useScrollIntoView, at as getSelectRightSectionProps, i as useOs, au as useElementSize, D as Divider, N as Navbar, H as Header, a0 as AppShell, av as Avatar, r as Badge, B as Breadcrumbs, E as Burger, y as Card, aw as CardSection, f as Chip, C as CopyButton, F as FocusTrap, ax as Highlight, I as Image, K as Kbd, L as List, ay as Mark, az as Menu, M as Modal, aA as Notification, R as RingProgress, d as ScrollArea, Q as SegmentedControl, aB as Select, aC as ChevronIcon$1, k as Skeleton, V as Table, T as ThemeIcon, aD as Global, aE as AppContext, n as getNavigationItem, aF as stopNavigationProgress, aG as resetNavigationProgress, l as links, g as HeaderLogo, o as openSpotlight, U as UserMenu, j as useMutation, h as SafeSelect, t as ActionPopoverIcon, s as successMsg, e as errorMsg, G as GenericService, v as UserHooks, $ as useNavProgressFetchEffect, m as useInView, p as useToggle, u as useQueryParams, S as StringParam, J as JsonParam, W as useInputState, X as RelativeDrawer, Y as LogicalGroup, Z as uuid, q as useInfinityScroll, a1 as ReactQueryDevtools, a2 as useColorScheme, a3 as navigationData, a4 as SpotlightProvider, a5 as NotificationsProvider, a6 as NavigationProgress, a7 as QueryParamProvider, a8 as ReactRouter6Adapter } from "./LogicalGroup.0c7b572b.js";
import { P as PasswordInput } from "./PasswordInput.85496f1d.js";
function getSafeId(uid, errorMessage) {
return (value) => {
if (typeof value !== "string" || value.trim().length === 0) {
throw new Error(errorMessage);
}
return `${uid}-${value}`;
};
}
function keys(object) {
return Object.keys(object);
}
const AVAILABLE_TRANSITIONS = Object.keys(transitions$1);
function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
const clampUseMovePosition = (position) => ({
x: clamp(position.x, 0, 1),
y: clamp(position.y, 0, 1)
});
function useMove(onChange, handlers, dir = "ltr") {
const ref = react.exports.useRef();
const mounted = react.exports.useRef(false);
const isSliding = react.exports.useRef(false);
const frame = react.exports.useRef(0);
const [active, setActive] = react.exports.useState(false);
react.exports.useEffect(() => {
mounted.current = true;
}, []);
react.exports.useEffect(() => {
const onScrub = ({ x, y }) => {
cancelAnimationFrame(frame.current);
frame.current = requestAnimationFrame(() => {
if (mounted.current && ref.current) {
ref.current.style.userSelect = "none";
const rect = ref.current.getBoundingClientRect();
if (rect.width && rect.height) {
const _x = clamp((x - rect.left) / rect.width, 0, 1);
onChange({
x: dir === "ltr" ? _x : 1 - _x,
y: clamp((y - rect.top) / rect.height, 0, 1)
});
}
}
});
};
const bindEvents = () => {
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", stopScrubbing);
document.addEventListener("touchmove", onTouchMove);
document.addEventListener("touchend", stopScrubbing);
};
const unbindEvents = () => {
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", stopScrubbing);
document.removeEventListener("touchmove", onTouchMove);
document.removeEventListener("touchend", stopScrubbing);
};
const startScrubbing = () => {
if (!isSliding.current && mounted.current) {
isSliding.current = true;
typeof (handlers == null ? void 0 : handlers.onScrubStart) === "function" && handlers.onScrubStart();
setActive(true);
bindEvents();
}
};
const stopScrubbing = () => {
if (isSliding.current && mounted.current) {
isSliding.current = false;
setActive(false);
unbindEvents();
setTimeout(() => {
typeof (handlers == null ? void 0 : handlers.onScrubEnd) === "function" && handlers.onScrubEnd();
}, 0);
}
};
const onMouseDown = (event) => {
startScrubbing();
event.preventDefault();
onMouseMove(event);
};
const onMouseMove = (event) => onScrub({ x: event.clientX, y: event.clientY });
const onTouchStart = (event) => {
if (event.cancelable) {
event.preventDefault();
}
startScrubbing();
onTouchMove(event);
};
const onTouchMove = (event) => {
if (event.cancelable) {
event.preventDefault();
}
onScrub({ x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY });
};
ref.current.addEventListener("mousedown", onMouseDown);
ref.current.addEventListener("touchstart", onTouchStart, { passive: false });
return () => {
if (ref.current) {
ref.current.removeEventListener("mousedown", onMouseDown);
ref.current.removeEventListener("touchstart", onTouchStart);
}
};
}, [dir, onChange]);
return { ref, active };
}
function range(start, end) {
const length = end - start + 1;
return Array.from({ length }, (_, index2) => index2 + start);
}
const DOTS = "dots";
function usePagination({
total,
siblings = 1,
boundaries = 1,
page,
initialPage = 1,
onChange
}) {
const _total = Math.max(Math.trunc(total), 0);
const [activePage, setActivePage] = useUncontrolled({
value: page,
onChange,
defaultValue: initialPage,
finalValue: initialPage
});
const setPage = (pageNumber) => {
if (pageNumber <= 0) {
setActivePage(1);
} else if (pageNumber > _total) {
setActivePage(_total);
} else {
setActivePage(pageNumber);
}
};
const next = () => setPage(activePage + 1);
const previous = () => setPage(activePage - 1);
const first = () => setPage(1);
const last = () => setPage(_total);
const paginationRange = react.exports.useMemo(() => {
const totalPageNumbers = siblings * 2 + 3 + boundaries * 2;
if (totalPageNumbers >= _total) {
return range(1, _total);
}
const leftSiblingIndex = Math.max(activePage - siblings, boundaries);
const rightSiblingIndex = Math.min(activePage + siblings, _total - boundaries);
const shouldShowLeftDots = leftSiblingIndex > boundaries + 2;
const shouldShowRightDots = rightSiblingIndex < _total - (boundaries + 1);
if (!shouldShowLeftDots && shouldShowRightDots) {
const leftItemCount = siblings * 2 + boundaries + 2;
return [...range(1, leftItemCount), DOTS, ...range(_total - (boundaries - 1), _total)];
}
if (shouldShowLeftDots && !shouldShowRightDots) {
const rightItemCount = boundaries + 1 + 2 * siblings;
return [...range(1, boundaries), DOTS, ...range(_total - rightItemCount, _total)];
}
return [
...range(1, boundaries),
DOTS,
...range(leftSiblingIndex, rightSiblingIndex),
DOTS,
...range(_total - boundaries + 1, _total)
];
}, [_total, siblings, activePage]);
return {
range: paginationRange,
active: activePage,
setPage,
next,
previous,
first,
last
};
}
function usePrevious(value) {
const ref = react.exports.useRef();
react.exports.useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
function useEyeDropper() {
const [supported, setSupported] = react.exports.useState(false);
useIsomorphicEffect(() => {
setSupported(typeof window !== "undefined" && "EyeDropper" in window);
}, []);
const open = react.exports.useCallback((options = {}) => {
if (supported) {
const eyeDropper = new window.EyeDropper();
return eyeDropper.open(options);
}
return void 0;
}, [supported]);
return { supported, open };
}
const ACCORDION_ERRORS = {
context: "Accordion component was not found in the tree",
itemContext: "Accordion.Item component was not found in the tree",
value: "Accordion.Item component was rendered with invalid value or without value"
};
const [AccordionContextProvider, useAccordionContext] = createSafeContext(ACCORDION_ERRORS.context);
function AccordionProvider({
children,
multiple,
value,
defaultValue,
onChange,
id,
loop,
transitionDuration,
disableChevronRotation,
chevronPosition,
chevronSize,
order,
chevron,
variant,
radius,
classNames,
styles,
unstyled
}) {
const uid = useId(id);
const [_value, handleChange] = useUncontrolled({
value,
defaultValue,
finalValue: multiple ? [] : null,
onChange
});
const isItemActive = (itemValue) => Array.isArray(_value) ? _value.includes(itemValue) : itemValue === _value;
const handleItemChange = (itemValue) => {
const nextValue = Array.isArray(_value) ? _value.includes(itemValue) ? _value.filter((selectedValue) => selectedValue !== itemValue) : [..._value, itemValue] : itemValue === _value ? null : itemValue;
handleChange(nextValue);
};
return /* @__PURE__ */ jsx(AccordionContextProvider, {
value: {
isItemActive,
onChange: handleItemChange,
getControlId: getSafeId(`${uid}-control`, ACCORDION_ERRORS.value),
getRegionId: getSafeId(`${uid}-panel`, ACCORDION_ERRORS.value),
transitionDuration,
disableChevronRotation,
chevronPosition,
chevronSize,
order,
chevron,
loop,
variant,
radius,
classNames,
styles,
unstyled
},
children
});
}
const [AccordionItemContextProvider, useAccordionItemContext] = createSafeContext(ACCORDION_ERRORS.itemContext);
function getVariantStyles$4(theme, { variant, radius }) {
const borderColor = theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3];
const filledColor = theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0];
const borderRadius = theme.fn.radius(radius);
if (variant === "default") {
return {
color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
borderBottom: `1px solid ${borderColor}`
};
}
if (variant === "contained") {
return {
border: `1px solid ${borderColor}`,
transition: "background-color 150ms ease",
"&[data-active]": {
backgroundColor: filledColor
},
"&:first-of-type": {
borderTopRightRadius: borderRadius,
borderTopLeftRadius: borderRadius,
"& > [data-accordion-control]": {
borderTopRightRadius: borderRadius,
borderTopLeftRadius: borderRadius
}
},
"&:last-of-type": {
borderBottomRightRadius: borderRadius,
borderBottomLeftRadius: borderRadius,
"& > [data-accordion-control]": {
borderBottomRightRadius: borderRadius,
borderBottomLeftRadius: borderRadius
}
},
"& + &": {
borderTop: 0
}
};
}
if (variant === "filled") {
return {
borderRadius,
"&[data-active]": {
backgroundColor: filledColor
}
};
}
if (variant === "separated") {
return {
borderRadius,
backgroundColor: filledColor,
border: "1px solid transparent",
transition: "background-color 150ms ease",
"& + &": {
marginTop: theme.spacing.md
},
"&[data-active]": {
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
borderColor
}
};
}
return {};
}
var useStyles$1A = createStyles((theme, params) => ({
item: getVariantStyles$4(theme, params)
}));
const useStyles$1B = useStyles$1A;
var __defProp$1x = Object.defineProperty;
var __getOwnPropSymbols$1x = Object.getOwnPropertySymbols;
var __hasOwnProp$1x = Object.prototype.hasOwnProperty;
var __propIsEnum$1x = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1x = (obj, key, value) => key in obj ? __defProp$1x(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value
}) : obj[key] = value;
var __spreadValues$1x = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$1x.call(b, prop))
__defNormalProp$1x(a, prop, b[prop]);
if (__getOwnPropSymbols$1x)
for (var prop of __getOwnPropSymbols$1x(b)) {
if (__propIsEnum$1x.call(b, prop))
__defNormalProp$1x(a, prop, b[prop]);
}
return a;
};
var __objRest$Y = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp$1x.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols$1x)
for (var prop of __getOwnPropSymbols$1x(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum$1x.call(source, prop))
target[prop] = source[prop];
}
return target;
};
const defaultProps$M = {};
const AccordionItem = react.exports.forwardRef((props, ref) => {
const _a = useComponentDefaultProps("AccordionItem", defaultProps$M, props), {
children,
className,
value
} = _a, others = __objRest$Y(_a, ["children", "className", "value"]);
const ctx = useAccordionContext();
const {
classes,
cx
} = useStyles$1B({
variant: ctx.variant,
radius: ctx.radius
}, {
name: "Accordion",
classNames: ctx.classNames,
styles: ctx.styles,
unstyled: ctx.unstyled
});
return /* @__PURE__ */ jsx(AccordionItemContextProvider, {
value: {
value
},
children: /* @__PURE__ */ jsx(Box, {
...__spreadValues$1x({
ref,
className: cx(classes.item, className),
"data-active": ctx.isItemActive(value) || void 0
}, others),
children
})
});
});
AccordionItem.displayName = "@mantine/core/AccordionItem";
var __defProp$1w = Object.defineProperty;
var __defProps$L = Object.defineProperties;
var __getOwnPropDescs$L = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$1w = Object.getOwnPropertySymbols;
var __hasOwnProp$1w = Object.prototype.hasOwnProperty;
var __propIsEnum$1w = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1w = (obj, key, value) => key in obj ? __defProp$1w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues$1w = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$1w.call(b, prop))
__defNormalProp$1w(a, prop, b[prop]);
if (__getOwnPropSymbols$1w)
for (var prop of __getOwnPropSymbols$1w(b)) {
if (__propIsEnum$1w.call(b, prop))
__defNormalProp$1w(a, prop, b[prop]);
}
return a;
};
var __spreadProps$L = (a, b) => __defProps$L(a, __getOwnPropDescs$L(b));
var __objRest$X = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp$1w.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols$1w)
for (var prop of __getOwnPropSymbols$1w(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum$1w.call(source, prop))
target[prop] = source[prop];
}
return target;
};
function getVariantStyles$3(theme, { variant }) {
if (variant === "default" || variant === "contained") {
return theme.fn.hover({
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0]
});
}
return {};
}
var useStyles$1y = createStyles((theme, _a) => {
var _b = _a, { transitionDuration, chevronPosition, chevronSize } = _b, params = __objRest$X(_b, ["transitionDuration", "chevronPosition", "chevronSize"]);
return {
icon: {
display: "flex",
alignItems: "center",
justifyContent: "center",
marginRight: chevronPosition === "left" ? 0 : theme.spacing.sm,
marginLeft: chevronPosition === "left" ? theme.spacing.lg : 0
},
chevron: {
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: `transform ${transitionDuration}ms ease`,
marginRight: chevronPosition === "right" ? 0 : theme.spacing.sm,
marginLeft: chevronPosition === "right" ? theme.spacing.lg : 0,
width: chevronSize,
minWidth: chevronSize,
"&[data-rotate]": {
transform: "rotate(180deg)"
}
},
label: {
color: "inherit",
fontWeight: 400,
flex: 1,
overflow: "hidden",
textOverflow: "ellipsis"
},
itemTitle: {
margin: 0,
padding: 0
},
control: __spreadProps$L(__spreadValues$1w(__spreadValues$1w(__spreadValues$1w({}, theme.fn.focusStyles()), theme.fn.fontStyles()), getVariantStyles$3(theme, params)), {
width: "100%",
display: "flex",
alignItems: "center",
flexDirection: chevronPosition === "right" ? "row-reverse" : "row",
padding: `${theme.spacing.md}px ${theme.spacing.md / 2}px`,
paddingLeft: chevronPosition === "right" ? `calc(${theme.spacing.sm}px + 4px)` : null,
textAlign: "left",
color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
"&:disabled": __spreadValues$1w({
opacity: 0.4,
cursor: "not-allowed"
}, theme.fn.hover({ backgroundColor: "transparent" }))
})
};
});
const useStyles$1z = useStyles$1y;
var __defProp$1v = Object.defineProperty;
var __defProps$K = Object.defineProperties;
var __getOwnPropDescs$K = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$1v = Object.getOwnPropertySymbols;
var __hasOwnProp$1v = Object.prototype.hasOwnProperty;
var __propIsEnum$1v = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1v = (obj, key, value) => key in obj ? __defProp$1v(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value
}) : obj[key] = value;
var __spreadValues$1v = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$1v.call(b, prop))
__defNormalProp$1v(a, prop, b[prop]);
if (__getOwnPropSymbols$1v)
for (var prop of __getOwnPropSymbols$1v(b)) {
if (__propIsEnum$1v.call(b, prop))
__defNormalProp$1v(a, prop, b[prop]);
}
return a;
};
var __spreadProps$K = (a, b) => __defProps$K(a, __getOwnPropDescs$K(b));
var __objRest$W = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp$1v.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols$1v)
for (var prop of __getOwnPropSymbols$1v(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum$1v.call(source, prop))
target[prop] = source[prop];
}
return target;
};
const defaultProps$L = {};
const AccordionControl = react.exports.forwardRef((props, ref) => {
const _a = useComponentDefaultProps("AccordionControl", defaultProps$L, props), {
disabled,
onKeyDown,
onClick,
chevron,
children,
className,
icon
} = _a, others = __objRest$W(_a, ["disabled", "onKeyDown", "onClick", "chevron", "children", "className", "icon"]);
const ctx = useAccordionContext();
const {
value
} = useAccordionItemContext();
const {
classes,
cx
} = useStyles$1z({
transitionDuration: ctx.transitionDuration,
chevronPosition: ctx.chevronPosition,
chevronSize: ctx.chevronSize,
variant: ctx.variant,
radius: ctx.radius
}, {
name: "Accordion",
classNames: ctx.classNames,
styles: ctx.styles,
unstyled: ctx.unstyled
});
const isActive = ctx.isItemActive(value);
const shouldWrapWithHeading = typeof ctx.order === "number";
const Heading = `h${ctx.order}`;
const content = /* @__PURE__ */ jsxs(UnstyledButton, {
...__spreadProps$K(__spreadValues$1v({}, others), {
ref,
"data-accordion-control": true,
disabled,
className: cx(classes.control, className),
onClick: (event) => {
onClick == null ? void 0 : onClick(event);
ctx.onChange(value);
},
type: "button",
"data-active": isActive || void 0,
"aria-expanded": isActive,
"aria-controls": ctx.getRegionId(value),
id: ctx.getControlId(value),
unstyled: ctx.unstyled,
onKeyDown: createScopedKeydownHandler({
siblingSelector: "[data-accordion-control]",
parentSelector: "[data-accordion]",
activateOnFocus: false,
loop: ctx.loop,
orientation: "vertical",
onKeyDown
})
}),
children: [/* @__PURE__ */ jsx("div", {
className: classes.chevron,
"data-rotate": !ctx.disableChevronRotation && isActive || void 0,
children: chevron || ctx.chevron
}), /* @__PURE__ */ jsx("div", {
className: classes.label,
children
}), icon && /* @__PURE__ */ jsx("div", {
className: classes.icon,
children: icon
})]
});
return shouldWrapWithHeading ? /* @__PURE__ */ jsx(Heading, {
className: classes.itemTitle,
children: content
}) : content;
});
AccordionControl.displayName = "@mantine/core/AccordionControl";
var __defProp$1u = Object.defineProperty;
var __defProps$J = Object.defineProperties;
var __getOwnPropDescs$J = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$1u = Object.getOwnPropertySymbols;
var __hasOwnProp$1u = Object.prototype.hasOwnProperty;
var __propIsEnum$1u = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1u = (obj, key, value) => key in obj ? __defProp$1u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues$1u = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$1u.call(b, prop))
__defNormalProp$1u(a, prop, b[prop]);
if (__getOwnPropSymbols$1u)
for (var prop of __getOwnPropSymbols$1u(b)) {
if (__propIsEnum$1u.call(b, prop))
__defNormalProp$1u(a, prop, b[prop]);
}
return a;
};
var __spreadProps$J = (a, b) => __defProps$J(a, __getOwnPropDescs$J(b));
var useStyles$1w = createStyles((theme, _params) => ({
panel: __spreadProps$J(__spreadValues$1u({}, theme.fn.fontStyles()), {
wordBreak: "break-word",
lineHeight: theme.lineHeight
}),
content: {
padding: theme.spacing.md,
paddingTop: `calc(${theme.spacing.xs}px / 2)`
}
}));
const useStyles$1x = useStyles$1w;
var __defProp$1t = Object.defineProperty;
var __defProps$I = Object.defineProperties;
var __getOwnPropDescs$I = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$1t = Object.getOwnPropertySymbols;
var __hasOwnProp$1t = Object.prototype.hasOwnProperty;
var __propIsEnum$1t = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1t = (obj, key, value) => key in obj ? __defProp$1t(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value
}) : obj[key] = value;
var __spreadValues$1t = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$1t.call(b, prop))
__defNormalProp$1t(a, prop, b[prop]);
if (__getOwnPropSymbols$1t)
for (var prop of __getOwnPropSymbols$1t(b)) {
if (__propIsEnum$1t.call(b, prop))
__defNormalProp$1t(a, prop, b[prop]);
}
return a;
};
var __spreadProps$I = (a, b) => __defProps$I(a, __getOwnPropDescs$I(b));
var __objRest$V = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp$1t.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols$1t)
for (var prop of __getOwnPropSymbols$1t(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum$1t.call(source, prop))
target[prop] = source[prop];
}
return target;
};
const defaultProps$K = {};
function AccordionPanel(props) {
const _a = useComponentDefaultProps("AccordionPanel", defaultProps$K, props), {
children,
className
} = _a, others = __objRest$V(_a, ["children", "className"]);
const ctx = useAccordionContext();
const {
value
} = useAccordionItemContext();
const {
classNames,
styles,
unstyled
} = useAccordionContext();
const {
classes,
cx
} = useStyles$1x({
variant: ctx.variant,
radius: ctx.radius
}, {
name: "Accordion",
classNames,
styles,
unstyled
});
return /* @__PURE__ */ jsx(Collapse, {
...__spreadProps$I(__spreadValues$1t({}, others), {
className: cx(classes.panel, className),
in: ctx.isItemActive(value),
transitionDuration: ctx.transitionDuration,
role: "region",
id: ctx.getRegionId(value),
"aria-labelledby": ctx.getControlId(value)
}),
children: /* @__PURE__ */ jsx("div", {
className: classes.content,
children
})
});
}
AccordionPanel.displayName = "@mantine/core/AccordionPanel";
var __defProp$1s = Object.defineProperty;
var __getOwnPropSymbols$1s = Object.getOwnPropertySymbols;
var __hasOwnProp$1s = Object.prototype.hasOwnProperty;
var __propIsEnum$1s = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1s = (obj, key, value) => key in obj ? __defProp$1s(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value
}) : obj[key] = value;
var __spreadValues$1s = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$1s.call(b, prop))
__defNormalProp$1s(a, prop, b[prop]);
if (__getOwnPropSymbols$1s)
for (var prop of __getOwnPropSymbols$1s(b)) {
if (__propIsEnum$1s.call(b, prop))
__defNormalProp$1s(a, prop, b[prop]);
}
return a;
};
function ChevronIcon(props) {
return /* @__PURE__ */ jsx("svg", {
...__spreadValues$1s({
viewBox: "0 0 15 15",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
width: 16,
height: 16
}, props),
children: /* @__PURE__ */ jsx("path", {
d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",
fill: "currentColor",
fillRule: "evenodd",
clipRule: "evenodd"
})
});
}
var __defProp$1r = Object.defineProperty;
var __defProps$H = Object.defineProperties;
var __getOwnPropDescs$H = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$1r = Object.getOwnPropertySymbols;
var __hasOwnProp$1r = Object.prototype.hasOwnProperty;
var __propIsEnum$1r = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1r = (obj, key, value) => key in obj ? __defProp$1r(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value
}) : obj[key] = value;
var __spreadValues$1r = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$1r.call(b, prop))
__defNormalProp$1r(a, prop, b[prop]);
if (__getOwnPropSymbols$1r)
for (var prop of __getOwnPropSymbols$1r(b)) {
if (__propIsEnum$1r.call(b, prop))
__defNormalProp$1r(a, prop, b[prop]);
}
return a;
};
var __spreadProps$H = (a, b) => __defProps$H(a, __getOwnPropDescs$H(b));
var __objRest$U = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp$1r.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols$1r)
for (var prop of __getOwnPropSymbols$1r(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum$1r.call(source, prop))
target[prop] = source[prop];
}
return target;
};
const defaultProps$J = {
multiple: false,
disableChevronRotation: false,
transitionDuration: 200,
chevronPosition: "right",
variant: "default",
chevronSize: 24,
chevron: /* @__PURE__ */ jsx(ChevronIcon, {})
};
function Accordion(props) {
const _a = useComponentDefaultProps("Accordion", defaultProps$J, props), {
id,
loop,
children,
multiple,
value,
defaultValue,
onChange,
transitionDuration,
disableChevronRotation,
chevronPosition,
chevronSize,
order,
chevron,
classNames,
styles,
unstyled,
variant,
radius
} = _a, others = __objRest$U(_a, ["id", "loop", "children", "multiple", "value", "defaultValue", "onChange", "transitionDuration", "disableChevronRotation", "chevronPosition", "chevronSize", "order", "chevron", "classNames", "styles", "unstyled", "variant", "radius"]);
return /* @__PURE__ */ jsx(AccordionProvider, {
id,
multiple,
value,
defaultValue,
onChange,
loop,
transitionDuration,
disableChevronRotation,
chevronPosition,
chevronSize,
order,
chevron,
variant,
radius,
classNames,
styles,
unstyled,
children: /* @__PURE__ */ jsx(Box, {
...__spreadProps$H(__spreadValues$1r({}, others), {
"data-accordion": true
}),
children
})
});
}
Accordion.Item = AccordionItem;
Accordion.Control = AccordionControl;
Accordion.Panel = AccordionPanel;
Accordion.displayName = "@mantine/core/Accordion";
var __defProp$1q = Object.defineProperty;
var __defProps$G = Object.defineProperties;
var __getOwnPropDescs$G = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$1q = Object.getOwnPropertySymbols;
var __hasOwnProp$1q = Object.prototype.hasOwnProperty;
var __propIsEnum$1q = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1q = (obj, key, value) => key in obj ? __defProp$1q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues$1q = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$1q.call(b, prop))
__defNormalProp$1q(a, prop, b[prop]);
if (__getOwnPropSymbols$1q)
for (var prop of __getOwnPropSymbols$1q(b)) {
if (__propIsEnum$1q.call(b, prop))
__defNormalProp$1q(a, prop, b[prop]);
}
return a;
};
var __spreadProps$G = (a, b) => __defProps$G(a, __getOwnPropDescs$G(b));
function getVariantStyles$2({ variant, color, theme }) {
if (variant === "filled") {
const colors2 = theme.fn.variant({ variant: "filled", color });
return {
backgroundColor: colors2.background,
color: theme.white
};
}
if (variant === "outline") {
const colors2 = theme.fn.variant({ variant: "outline", color });
return {
color: colors2.color,
borderColor: colors2.border,
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white
};
}
const colors = theme.fn.variant({ variant: "light", color });
return {
backgroundColor: colors.background,
color: colors.color
};
}
var useStyles$1u = createStyles((theme, { color, radius, variant }) => ({
root: __spreadValues$1q(__spreadProps$G(__spreadValues$1q({}, theme.fn.fontStyles()), {
position: "relative",
overflow: "hidden",
padding: `${theme.spacing.sm}px ${theme.spacing.md}px`,
borderRadius: theme.fn.radius(radius),
border: "1px solid transparent"
}), getVariantStyles$2({ variant, color, theme })),
wrapper: {
display: "flex"
},
body: {
flex: 1
},
title: {
boxSizing: "border-box",
margin: 0,
marginBottom: 7,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
lineHeight: theme.lineHeight,
fontSize: theme.fontSizes.sm,
fontWeight: 700,
"&[data-with-close-button]": {
paddingRight: theme.spacing.md
}
},
label: {
display: "block",
overflow: "hidden",
textOverflow: "ellipsis"
},
icon: {
lineHeight: 1,
width: 20,
height: 20,
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
marginRight: theme.spacing.md,
marginTop: 1
},
message: __spreadProps$G(__spreadValues$1q({}, theme.fn.fontStyles()), {
lineHeight: theme.lineHeight,
textOverflow: "ellipsis",
overflow: "hidden",
fontSize: theme.fontSizes.sm,
color: variant === "filled" ? theme.white : theme.colorScheme === "dark" ? variant === "light" ? theme.white : theme.colors.dark[0] : theme.black
}),
closeButton: {
position: "absolute",
top: theme.spacing.sm,
right: theme.spacing.sm,
color: "inherit"
}
}));
const useStyles$1v = useStyles$1u;
var __defProp$1p = Object.defineProperty;
var __getOwnPropSymbols$1p = Object.getOwnPropertySymbols;
var __hasOwnProp$1p = Object.prototype.hasOwnProperty;
var __propIsEnum$1p = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1p = (obj, key, value) => key in obj ? __defProp$1p(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value
}) : obj[key] = value;
var __spreadValues$1p = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$1p.call(b, prop))
__defNormalProp$1p(a, prop, b[prop]);
if (__getOwnPropSymbols$1p)
for (var prop of __getOwnPropSymbols$1p(b)) {
if (__propIsEnum$1p.call(b, prop))
__defNormalProp$1p(a, prop, b[prop]);
}
return a;
};
var __objRest$T = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp$1p.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols$1p)
for (var prop of __getOwnPropSymbols$1p(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum$1p.call(source, prop))
target[prop] = source[prop];
}
return target;
};
const defaultProps$I = {
variant: "light"
};
const Alert = react.exports.forwardRef((props, ref) => {
const _a = useComponentDefaultProps("Alert", defaultProps$I, props), {
id,
className,
title,
variant,
children,
color,
classNames,
icon,
styles,
onClose,
radius,
withCloseButton,
closeButtonLabel,
unstyled
} = _a, others = __objRest$T(_a, ["id", "className", "title", "variant", "children", "color", "classNames", "icon", "styles", "onClose", "radius", "withCloseButton", "closeButtonLabel", "unstyled"]);
const {
classes,
cx
} = useStyles$1v({
color,
radius,
variant
}, {
classNames,
styles,
unstyled,
name: "Alert"
});
const rootId = useId(id);
const titleId = title && `${rootId}-title`;
const bodyId = `${rootId}-body`;
return /* @__PURE__ */ jsx(Box, {
...__spreadValues$1p({
id: rootId,
role: "alert",
"aria-labelledby": titleId,
"aria-describedby": bodyId,
className: cx(classes.root, classes[variant], className),
ref
}, others),
children: /* @__PURE__ */ jsxs("div", {
className: classes.wrapper,
children: [icon && /* @__PURE__ */ jsx("div", {
className: classes.icon,
children: icon
}), /* @__PURE__ */ jsxs("div", {
className: classes.body,
children: [title && /* @__PURE__ */ jsx("div", {
className: classes.title,
"data-with-close-button": withCloseButton || void 0,
children: /* @__PURE__ */ jsx("span", {
id: titleId,
className: classes.label,
children: title
})
}), withCloseButton && /* @__PURE__ */ jsx(CloseButton, {
className: classes.closeButton,
onClick: onClose,
variant: "transparent",
size: 16,
iconSize: 16,
"aria-label": closeButtonLabel
}), /* @__PURE__ */ jsx("div", {
id: bodyId,
className: classes.message,
children
})]
})]
})
});
});
Alert.displayName = "@mantine/core/Alert";
var __defProp$1o = Object.defineProperty;
var __getOwnPropSymbols$1o = Object.getOwnPropertySymbols;
var __hasOwnProp$1o = Object.prototype.hasOwnProperty;
var __propIsEnum$1o = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1o = (obj, key, value) => key in obj ? __defProp$1o(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value
}) : obj[key] = value;
var __spreadValues$1o = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$1o.call(b, prop))
__defNormalProp$1o(a, prop, b[prop]);
if (__getOwnPropSymbols$1o)
for (var prop of __getOwnPropSymbols$1o(b)) {
if (__propIsEnum$1o.call(b, prop))
__defNormalProp$1o(a, prop, b[prop]);
}
return a;
};
const defaultProps$H = {
fixed: false,
position: {
top: 0,
right: 0
},
hiddenBreakpoint: "md",
hidden: false
};
const Aside = react.exports.forwardRef((props, ref) => {
const _props = useComponentDefaultProps("Aside", defaultProps$H, props);
return /* @__PURE__ */ jsx(HorizontalSection, {
...__spreadValues$1o({
section: "aside",
__staticSelector: "Aside",
ref
}, _props)
});
});
Aside.Section = Section;
Aside.displayName = "@mantine/core/Aside";
var __defProp$1n = Object.defineProperty;
var __defProps$F = Object.defineProperties;
var __getOwnPropDescs$F = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$1n = Object.getOwnPropertySymbols;
var __hasOwnProp$1n = Object.prototype.hasOwnProperty;
var __propIsEnum$1n = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1n = (obj, key, value) => key in obj ? __defProp$1n(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value
}) : obj[key] = value;
var __spreadValues$1n = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$1n.call(b, prop))
__defNormalProp$1n(a, prop, b[prop]);
if (__getOwnPropSymbols$1n)
for (var prop of __getOwnPropSymbols$1n(b)) {
if (__propIsEnum$1n.call(b, prop))
__defNormalProp$1n(a, prop, b[prop]);
}
return a;
};
var __spreadProps$F = (a, b) => __defProps$F(a, __getOwnPropDescs$F(b));
const defaultProps$G = {
fixed: false,
position: {
bottom: 0,
left: 0,
right: 0
}
};
const Footer = react.exports.forwardRef((props, ref) => {
const _props = useComponentDefaultProps("Footer", defaultProps$G, props);
return /* @__PURE__ */ jsx(VerticalSection, {
...__spreadProps$F(__spreadValues$1n({
section: "footer",
__staticSelector: "Footer"
}, _props), {
ref
})
});
});
Footer.displayName = "@mantine/core/Footer";
var useStyles$1s = createStyles((_theme, { ratio }) => ({
root: {
position: "relative",
maxWidth: "100%",
"&::before": {
content: '""',
height: 0,
display: "block",
paddingBottom: `${1 / ratio * 100}%`
},
"&::after": {
content: '""',
display: "table",
clear: "both"
},
"& > *:not(style)": {
overflow: "hidden",
position: "absolute",
top: 0,
right: 0,
bottom: 0,
left: 0,
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100%"
},
"& > img, & > video": {
objectFit: "cover"
}
}
}));
const useStyles$1t = useStyles$1s;
var __defProp$1m = Object.defineProperty;
var __getOwnPropSymbols$1m = Object.getOwnPropertySymbols;
var __hasOwnProp$1m = Object.prototype.hasOwnProperty;
var __propIsEnum$1m = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1m = (obj, key, value) => key in obj ? __defProp$1m(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value
}) : obj[key] = value;
var __spreadValues$1m = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$1m.call(b, prop))
__defNormalProp$1m(a, prop, b[prop]);
if (__getOwnPropSymbols$1m)
for (var prop of __getOwnPropSymbols$1m(b)) {
if (__propIsEnum$1m.call(b, prop))
__defNormalProp$1m(a, prop, b[prop]);
}
return a;
};
var __objRest$S = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp$1m.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols$1m)
for (var prop of __getOwnPropSymbols$1m(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum$1m.call(source, prop))
target[prop] = source[prop];
}
return target;
};
const AspectRatio = react.exports.forwardRef((props, ref) => {
const _a = useComponentDefaultProps("AspectRatio", {}, props), {
className,
ratio,
children,
unstyled
} = _a, others = __objRest$S(_a, ["className", "ratio", "children", "unstyled"]);
const {
classes,
cx
} = useStyles$1t({
ratio
}, {
name: "AspectRatio",
unstyled
});
return /* @__PURE__ */ jsx(Box, {
...__spreadValues$1m({
ref,
className: cx(classes.root, className)
}, others),
children
});
});
AspectRatio.displayName = "@mantine/core/AspectRatio";
function filterData$1({ data, limit, value, filter }) {
const result = [];
for (let i = 0; i < data.length; i += 1) {
if (filter(value, data[i])) {
result.push(data[i]);
}
if (result.length >= limit) {
break;
}
}
return result;
}
var useStyles$1q = createStyles(() => ({
wrapper: {
position: "relative"
}
}));
const useStyles$1r = useStyles$1q;
var __defProp$1l = Object.defineProperty;
var __defProps$E = Object.defineProperties;
var __getOwnPropDescs$E = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$1l = Object.getOwnPropertySymbols;
var __hasOwnProp$1l = Object.prototype.hasOwnProperty;
var __propIsEnum$1l = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1l = (obj, key, value) => key in obj ? __defProp$1l(obj, key, {
enumerable: true,
configurable: true,
writable: true,
value
}) : obj[key] = value;
var __spreadValues$1l = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp$1l.call(b, prop))
__defNormalProp$1l(a, prop, b[prop]);
if (__getOwnPropSymbols$1l)
for (var prop of __getOwnPropSymbols$1l(b)) {
if (__propIsEnum$1l.call(b, prop))
__defNormalProp$1l(a, prop, b[prop]);
}
return a;
};
var __spreadProps$E = (a, b) => __defProps$E(a, __getOwnPropDescs$E(b));
var __objRest$R = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp$1l.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols$1l)
for (var prop of __getOwnPropSymbols$1l(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum$1l.call(source, prop))
target[prop] = source[prop];
}
return target;
};
function defaultFilter$2(value, item) {
return item.value.toLowerCase().trim().includes(value.toLowerCase().trim());
}
const defaultProps$F = {
required: false,
size: "sm",
shadow: "sm",
limit: 5,
itemComponent: DefaultItem$2,
transition: "pop",
transitionDuration: 0,
initiallyOpened: false,
filter: defaultFilter$2,
switchDirectionOnFlip: false,
zIndex: getDefaultZIndex("popover"),
dropdownPosition: "flip",
maxDropdownHeight: "auto",
positionDependencies: []
};
const Autocomplete = react.exports.forwardRef((props, ref) => {
const _a = useInputProps("Autocomplete", defaultProps$F, props), {
inputProps,
wrapperProps,
shadow,
data,
limit,
value,
defaultValue,
onChange,
unstyled,
itemComponent,
onItemSubmit,
onKeyDown,
onFocus,
onBlur,
onClick,
transition,
transitionDuration,
initiallyOpened,
transitionTimingFunction,
classNames,
styles,
filter,
nothingFound,
onDropdownClose,
onDropdownOpen,
withinPortal,
switchDirectionOnFlip,
zIndex,
dropdownPosition,
maxDropdownHeight,
dropdownComponent,
positionDependencies,
readOnly
} = _a, others = __objRest$R(_a, ["inputProps", "wrapperProps", "shadow", "data", "limit", "value", "defaultValue", "onChange", "unstyled", "itemComponent", "onItemSubmit", "onKeyDown", "onFocus", "onBlur", "onClick", "transition", "transitionDuration", "initiallyOpened", "transitionTimingFunction", "classNames", "styles", "filter", "nothingFound", "onDropdownClose", "onDropdownOpen", "withinPortal", "switchDirectionOnFlip", "zIndex", "dropdownPosition", "maxDropdownHeight", "dropdownComponent", "positionDependencies", "readOnly"]);
const {
classes
} = useStyles$1r(null, {
classNames,
styles,
name: "Autocomplete",
unstyled
});
const [dropdownOpened, _setDropdownOpened] = react.exports.useState(initiallyOpened);
const [hovered, setHovered] = react.exports.useState(-1);
const [direction, setDirection] = react.exports.useState("column");
const inputRef = react.exports.useRef(null);
const [IMEOpen, setIMEOpen] = react.exports.useState(false);
const [_value, handleChange] = useUncontrolled({
value,
defaultValue,
finalValue: "",
onChange
});
const setDropdownOpened = (opened) => {
_setDropdownOpened(opened);
const handler = opened ? onDropdownOpen : onDropdownClose;
typeof handler === "function" && handler();
};
useDidUpdate(() => {
setHovered(-1);
}, [_value]);
const handleItemClick = (item) => {
handleChange(item.value);
typeof onItemSubmit === "function" && onItemSubmit(item);
setDropdownOpened(false);
};
const formattedData = data.map((item) => typeof item === "string" ? {
value: item
} : item);
const filteredData = groupOptions({
data: filterData$1({
data: formattedData,
value: _value,
limit,
filter
})
});
const handleInputKeydown = (event) => {
if (IMEOpen) {
return;
}
typeof onKeyDown === "function" && onKeyDown(event);
const isColumn = direction === "column";
const handleNext = () => {
setHovered((current) => current < filteredData.length - 1 ? current + 1 : current);
};
const handlePrevious = () => {
setHovered((current) => current > 0 ? current - 1 : current);
};
switch (event.key) {
case "ArrowUp": {
event.preventDefault();
isColumn ? handlePrevious() : handleNext();
break;
}
case "ArrowDown": {
event.preventDefault();
isColumn ? handleNext() : handlePrevious();
break;
}
case "Enter": {
if (filteredData[hovered] && dropdownOpened) {
event.preventDefault();
handleChange(filteredData[hovered].value);
typeof onItemSubmit === "function" && onItemSubmit(filteredData[hovered]);
setDropdownOpened(false);
}
break;
}
case "Escape": {
if (dropdownOpened) {
event.preventDefault();
setDropdownOpened(false);
}
}
}
};
const handleInputFocus = (event) => {
typeof onFocus === "function" && onFocus(event);
setDropdownOpened(true);
};
const handleInputBlur = (event) => {
typeof onBlur === "function" && onBlur(event);
setDropdownOpened(false);
};
const handleInputClick = (event) => {
typeof onClick === "function" && onClick(event);
setDropdownOpened(true);
};
const shouldRenderDropdown = dropdownOpened && (filteredData.length > 0 || filteredData.length === 0 && !!nothingFound);
return /* @__PURE__ */ jsx(Input.Wrapper, {
...__spreadProps$E(__spreadValues$1l({}, wrapperProps), {
__staticSelector: "Autocomplete"
}),
children: /* @__PURE__ */ jsxs(SelectPopover, {
opened: shouldRenderDropdown,
transition,
transitionDuration,
shadow: "sm",
withinPortal,
__staticSelector: "Autocomplete",
onDirectionChange: setDirection,
switchDirectionOnFlip,
zIndex,
dropdownPosition,
positionDependencies,
classNames,
styles,
unstyled,
readOnly,
children: [/* @__PURE__ */ jsx(SelectPopover.Target, {
children: /* @__PURE__ */ jsx("div", {
className: classes.wrapper,
role: "combobox",
"aria-haspopup": "listbox",
"aria-owns": shouldRenderDropdown ? `${inputProps.id}-items` : null,
"aria-controls": inputProps.id,
"aria-expanded": shouldRenderDropdown,
onMouseLeave: () => setHovered(-1),
tabIndex: -1,