likec4 1.17.1 → 1.18.0

package/{dist/__app__/src/chunks/mantine-BzD51ZKm.js → __app__/src/chunks/mantine-oFa3ZrEq.js}

@@ -708,8 +708,8 @@ function useHovered() {
 function clamp$2(value, min2, max2) {
   return min2 === void 0 && max2 === void 0 ? value : min2 !== void 0 && max2 === void 0 ? Math.max(value, min2) : Math.min(min2 === void 0 && max2 !== void 0 ? value : Math.max(value, min2), max2);
 }
-function randomId() {
-  return `mantine-${Math.random().toString(36).slice(2, 11)}`;
+function randomId(prefix = "mantine-") {
+  return `${prefix}${Math.random().toString(36).slice(2, 11)}`;
 }
 function useCallbackRef(callback) {
   const callbackRef = useRef(callback);
@@ -728,7 +728,7 @@ function useDebouncedCallback(callback, delay) {
 }
 const DEFAULT_EVENTS = ["mousedown", "touchstart"];
 function useClickOutside(handler, events, nodes) {
-  const ref = useRef();
+  const ref = useRef(null);
   return useEffect(() => {
     const listener = (event) => {
       const { target } = event ?? {};
@@ -767,7 +767,7 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
 }) {
   const [matches, setMatches] = useState(
     getInitialValueInEffect ? initialValue : getInitialValue(query)
-  ), queryRef = useRef();
+  ), queryRef = useRef(null);
   return useEffect(() => {
     if ("matchMedia" in window)
       return queryRef.current = window.matchMedia(query), setMatches(queryRef.current.matches), attachMediaListener(queryRef.current, (event) => setMatches(event.matches));
@@ -799,7 +799,7 @@ function useDidUpdate(fn, dependencies) {
   }, dependencies);
 }
 function useFocusReturn({ opened, shouldReturnFocus = !0 }) {
-  const lastActiveElement = useRef(), returnFocus = () => {
+  const lastActiveElement = useRef(null), returnFocus = () => {
     lastActiveElement.current && "focus" in lastActiveElement.current && typeof lastActiveElement.current.focus == "function" && lastActiveElement.current?.focus({ preventScroll: !0 });
   };
   return useDidUpdate(() => {
@@ -860,7 +860,7 @@ function scopeTab(node, event) {
   target && target.focus();
 }
 function useFocusTrap(active = !0) {
-  const ref = useRef(), focusNode = (node) => {
+  const ref = useRef(null), focusNode = (node) => {
     let focusElement = node.querySelector("[data-autofocus]");
     if (!focusElement) {
       const children = Array.from(node.querySelectorAll(FOCUS_SELECTOR));
@@ -938,7 +938,7 @@ function createStorageHandler(type) {
   } };
 }
 function createStorage(type, hookName) {
-  const eventName = "mantine-local-storage", { getItem, setItem, removeItem } = createStorageHandler(type);
+  const eventName = type === "localStorage" ? "mantine-local-storage" : "mantine-session-storage", { getItem, setItem, removeItem } = createStorageHandler(type);
   return function({
     key,
     defaultValue,
@@ -988,6 +988,9 @@ function createStorage(type, hookName) {
 function useLocalStorage(props) {
   return createStorage("localStorage", "use-local-storage")(props);
 }
+function useSessionStorage(props) {
+  return createStorage("sessionStorage", "use-session-storage")(props);
+}
 function assignRef(ref, value) {
   typeof ref == "function" ? ref(value) : typeof ref == "object" && ref !== null && "current" in ref && (ref.current = value);
 }
@@ -1177,7 +1180,7 @@ function useTimeout(callback, delay, options = { autoInvoke: !1 }) {
   return useEffect(() => (options.autoInvoke && start(), clear), [clear, start]), { start, clear };
 }
 function usePrevious(value) {
-  const ref = useRef();
+  const ref = useRef(void 0);
   return useEffect(() => {
     ref.current = value;
   }, [value]), ref.current;
@@ -1191,7 +1194,7 @@ function useInViewport() {
   }, []), inViewport };
 }
 function useMutationObserver(callback, options, target) {
-  const observer = useRef(), ref = useRef(null);
+  const observer = useRef(null), ref = useRef(null);
   return useEffect(() => {
     const targetElement = typeof target == "function" ? target() : target;
     return (targetElement || ref.current) && (observer.current = new MutationObserver(callback), observer.current.observe(targetElement || ref.current, options)), () => {
@@ -2222,7 +2225,7 @@ function suppressNextjsWarning() {
   };
 }
 function setColorSchemeAttribute(colorScheme, getRootElement) {
-  const computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  const hasDarkColorScheme = typeof window < "u" && "matchMedia" in window && window.matchMedia("(prefers-color-scheme: dark)").matches, computedColorScheme = colorScheme !== "auto" ? colorScheme : hasDarkColorScheme ? "dark" : "light";
   getRootElement()?.setAttribute("data-mantine-color-scheme", computedColorScheme);
 }
 function useProviderColorScheme({
@@ -2231,7 +2234,7 @@ function useProviderColorScheme({
   getRootElement,
   forceColorScheme
 }) {
-  const media = useRef(), [value, setValue] = useState(() => manager.get(defaultColorScheme)), colorSchemeValue = forceColorScheme || value, setColorScheme = useCallback(
+  const media = useRef(null), [value, setValue] = useState(() => manager.get(defaultColorScheme)), colorSchemeValue = forceColorScheme || value, setColorScheme = useCallback(
     (colorScheme) => {
       forceColorScheme || (setColorSchemeAttribute(colorScheme, getRootElement), setValue(colorScheme), manager.set(colorScheme));
     },
@@ -2245,7 +2248,7 @@ function useProviderColorScheme({
     if (forceColorScheme)
       return setColorSchemeAttribute(forceColorScheme, getRootElement), () => {
       };
-    forceColorScheme === void 0 && setColorSchemeAttribute(value, getRootElement), media.current = window.matchMedia("(prefers-color-scheme: dark)");
+    forceColorScheme === void 0 && setColorSchemeAttribute(value, getRootElement), typeof window < "u" && "matchMedia" in window && (media.current = window.matchMedia("(prefers-color-scheme: dark)"));
     const listener = (event) => {
       value === "auto" && setColorSchemeAttribute(event.matches ? "dark" : "light", getRootElement);
     };
@@ -2589,7 +2592,7 @@ function disableTransition(nonce) {
   return style.setAttribute("data-mantine-styles", "inline"), style.innerHTML = "*, *::before, *::after {transition: none !important;}", style.setAttribute("data-mantine-disable-transition", "true"), nonce && style.setAttribute("nonce", nonce), document.head.appendChild(style), () => document.querySelectorAll("[data-mantine-disable-transition]").forEach((element) => element.remove());
 }
 function useMantineColorScheme({ keepTransitions } = {}) {
-  const clearStylesRef = useRef(), timeoutRef = useRef(), ctx = useContext(MantineContext), nonce = useMantineStyleNonce(), nonceValue = useRef(nonce?.());
+  const clearStylesRef = useRef(noop), timeoutRef = useRef(-1), ctx = useContext(MantineContext), nonce = useMantineStyleNonce(), nonceValue = useRef(nonce?.());
   if (!ctx)
     throw new Error("[@mantine/core] MantineProvider was not found in tree");
   const setColorScheme = (value) => {
@@ -3099,11 +3102,11 @@ const Corner = forwardRef((props, ref) => {
 }), ScrollAreaCorner = forwardRef((props, ref) => {
   const ctx = useScrollAreaContext(), hasBothScrollbarsVisible = !!(ctx.scrollbarX && ctx.scrollbarY);
   return ctx.type !== "scroll" && hasBothScrollbarsVisible ? /* @__PURE__ */ jsx(Corner, { ...props, ref }) : null;
-}), defaultProps$1I = {
+}), defaultProps$1K = {
   scrollHideDelay: 1e3,
   type: "hover"
 }, ScrollAreaRoot = forwardRef((_props, ref) => {
-  const props = useProps("ScrollAreaRoot", defaultProps$1I, _props), { type, scrollHideDelay, scrollbars, ...others } = props, [scrollArea, setScrollArea] = useState(null), [viewport, setViewport] = useState(null), [content, setContent] = useState(null), [scrollbarX, setScrollbarX] = useState(null), [scrollbarY, setScrollbarY] = useState(null), [cornerWidth, setCornerWidth] = useState(0), [cornerHeight, setCornerHeight] = useState(0), [scrollbarXEnabled, setScrollbarXEnabled] = useState(!1), [scrollbarYEnabled, setScrollbarYEnabled] = useState(!1), rootRef = useMergedRef(ref, (node) => setScrollArea(node));
+  const props = useProps("ScrollAreaRoot", defaultProps$1K, _props), { type, scrollHideDelay, scrollbars, ...others } = props, [scrollArea, setScrollArea] = useState(null), [viewport, setViewport] = useState(null), [content, setContent] = useState(null), [scrollbarX, setScrollbarX] = useState(null), [scrollbarY, setScrollbarY] = useState(null), [cornerWidth, setCornerWidth] = useState(0), [cornerHeight, setCornerHeight] = useState(0), [scrollbarXEnabled, setScrollbarXEnabled] = useState(!1), [scrollbarYEnabled, setScrollbarYEnabled] = useState(!1), rootRef = useMergedRef(ref, (node) => setScrollArea(node));
   return /* @__PURE__ */ jsx(
     ScrollAreaProvider,
     {
@@ -3362,7 +3365,7 @@ const ScrollAreaScrollbarVisible = forwardRef((props, forwardedRef) => {
       onThumbPositionChange: () => {
         if (context.viewport && thumbRef.current) {
           const scrollPos = context.viewport.scrollTop, offset2 = getThumbOffsetFromScroll(scrollPos, sizes2);
-          sizes2.scrollbar.size === 0 ? thumbRef.current.style.opacity = "0" : thumbRef.current.style.opacity = "1", thumbRef.current.style.transform = `translate3d(0, ${offset2}px, 0)`;
+          sizes2.scrollbar.size === 0 ? thumbRef.current.style.setProperty("--thumb-opacity", "0") : thumbRef.current.style.setProperty("--thumb-opacity", "1"), thumbRef.current.style.transform = `translate3d(0, ${offset2}px, 0)`;
         }
       },
       onWheelScroll: (scrollPos) => {
@@ -3468,7 +3471,7 @@ function addUnlinkedScrollListener(node, handler = () => {
   }(), () => window.cancelAnimationFrame(rAF);
 }
 const Thumb$1 = forwardRef((props, forwardedRef) => {
-  const { style, ...others } = props, scrollAreaContext = useScrollAreaContext(), scrollbarContext = useScrollbarContext(), { onThumbPositionChange } = scrollbarContext, composedRef = useMergedRef(forwardedRef, (node) => scrollbarContext.onThumbChange(node)), removeUnlinkedScrollListenerRef = useRef(), debounceScrollEnd = useDebouncedCallback(() => {
+  const { style, ...others } = props, scrollAreaContext = useScrollAreaContext(), scrollbarContext = useScrollbarContext(), { onThumbPositionChange } = scrollbarContext, composedRef = useMergedRef(forwardedRef, (node) => scrollbarContext.onThumbChange(node)), removeUnlinkedScrollListenerRef = useRef(noop), debounceScrollEnd = useDebouncedCallback(() => {
     removeUnlinkedScrollListenerRef.current && (removeUnlinkedScrollListenerRef.current(), removeUnlinkedScrollListenerRef.current = void 0);
   }, 100);
   return useEffect(() => {
@@ -3529,16 +3532,16 @@ const ScrollAreaViewport = forwardRef(
 );
 ScrollAreaViewport.displayName = "@mantine/core/ScrollAreaViewport";
 var __default__$J = { root: "m_d57069b5", viewport: "m_c0783ff9", viewportInner: "m_f8f631dd", scrollbar: "m_c44ba933", thumb: "m_d8b5e363", corner: "m_21657268" };
-const classes$J = __default__$J, defaultProps$1H = {
+const classes$J = __default__$J, defaultProps$1J = {
   scrollHideDelay: 1e3,
   type: "hover",
   scrollbars: "xy"
-}, varsResolver$J = (_, { scrollbarSize }) => ({
+}, varsResolver$L = (_, { scrollbarSize }) => ({
   root: {
     "--scrollarea-scrollbar-size": rem(scrollbarSize)
   }
 }), ScrollArea = factory((_props, ref) => {
-  const props = useProps("ScrollArea", defaultProps$1H, _props), {
+  const props = useProps("ScrollArea", defaultProps$1J, _props), {
     classNames,
     className,
     style,
@@ -3567,7 +3570,7 @@ const classes$J = __default__$J, defaultProps$1H = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$J
+    varsResolver: varsResolver$L
   });
   return /* @__PURE__ */ jsxs(
     ScrollAreaRoot,
@@ -3653,7 +3656,7 @@ const ScrollAreaAutosize = factory((props, ref) => {
     onBottomReached,
     onTopReached,
     ...others
-  } = useProps("ScrollAreaAutosize", defaultProps$1H, props);
+  } = useProps("ScrollAreaAutosize", defaultProps$1J, props);
   return /* @__PURE__ */ jsx(Box, { ...others, ref, style: [{ display: "flex", overflow: "auto" }, style], children: /* @__PURE__ */ jsx(Box, { style: { display: "flex", flexDirection: "column", flex: 1 }, children: /* @__PURE__ */ jsx(
     ScrollArea,
     {
@@ -3682,11 +3685,11 @@ ScrollAreaAutosize.displayName = "@mantine/core/ScrollAreaAutosize";
 ScrollAreaAutosize.classes = classes$J;
 ScrollArea.Autosize = ScrollAreaAutosize;
 var __default__$I = { root: "m_87cf2631" };
-const classes$I = __default__$I, defaultProps$1G = {
+const classes$I = __default__$I, defaultProps$1I = {
   __staticSelector: "UnstyledButton"
 }, UnstyledButton = polymorphicFactory(
   (_props, ref) => {
-    const props = useProps("UnstyledButton", defaultProps$1G, _props), {
+    const props = useProps("UnstyledButton", defaultProps$1I, _props), {
       className,
       component = "button",
       __staticSelector,
@@ -3720,8 +3723,8 @@ const classes$I = __default__$I, defaultProps$1G = {
 UnstyledButton.classes = classes$I;
 UnstyledButton.displayName = "@mantine/core/UnstyledButton";
 var __default__$H = { root: "m_515a97f8" };
-const classes$H = __default__$H, defaultProps$1F = {}, VisuallyHidden = factory((_props, ref) => {
-  const props = useProps("VisuallyHidden", defaultProps$1F, _props), { classNames, className, style, styles, unstyled, vars, ...others } = props, getStyles2 = useStyles({
+const classes$H = __default__$H, defaultProps$1H = {}, VisuallyHidden = factory((_props, ref) => {
+  const props = useProps("VisuallyHidden", defaultProps$1H, _props), { classNames, className, style, styles, unstyled, vars, ...others } = props, getStyles2 = useStyles({
     name: "VisuallyHidden",
     classes: classes$H,
     props,
@@ -3736,13 +3739,13 @@ const classes$H = __default__$H, defaultProps$1F = {}, VisuallyHidden = factory(
 VisuallyHidden.classes = classes$H;
 VisuallyHidden.displayName = "@mantine/core/VisuallyHidden";
 var __default__$G = { root: "m_1b7284a3" };
-const classes$G = __default__$G, defaultProps$1E = {}, varsResolver$I = (_, { radius, shadow }) => ({
+const classes$G = __default__$G, defaultProps$1G = {}, varsResolver$K = (_, { radius, shadow }) => ({
   root: {
     "--paper-radius": radius === void 0 ? void 0 : getRadius(radius),
     "--paper-shadow": getShadow(shadow)
   }
 }), Paper = polymorphicFactory((_props, ref) => {
-  const props = useProps("Paper", defaultProps$1E, _props), {
+  const props = useProps("Paper", defaultProps$1G, _props), {
     classNames,
     className,
     style,
@@ -3765,7 +3768,7 @@ const classes$G = __default__$G, defaultProps$1E = {}, varsResolver$I = (_, { ra
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$I
+    varsResolver: varsResolver$K
   });
   return /* @__PURE__ */ jsx(
     Box,
@@ -5992,25 +5995,29 @@ function getArrowPositionStyles({
     ...horizontalSide(placement, arrowY, arrowOffset, arrowPosition),
     right: arrowPlacement,
     borderLeftColor: "transparent",
-    borderBottomColor: "transparent"
+    borderBottomColor: "transparent",
+    clipPath: "polygon(100% 0, 0 0, 100% 100%)"
   } : side === "right" ? {
     ...baseStyles,
     ...horizontalSide(placement, arrowY, arrowOffset, arrowPosition),
     left: arrowPlacement,
     borderRightColor: "transparent",
-    borderTopColor: "transparent"
+    borderTopColor: "transparent",
+    clipPath: "polygon(0 100%, 0 0, 100% 100%)"
   } : side === "top" ? {
     ...baseStyles,
     ...verticalSide(placement, arrowX, arrowOffset, arrowPosition, dir),
     bottom: arrowPlacement,
     borderTopColor: "transparent",
-    borderLeftColor: "transparent"
+    borderLeftColor: "transparent",
+    clipPath: "polygon(0 100%, 100% 100%, 100% 0)"
   } : side === "bottom" ? {
     ...baseStyles,
     ...verticalSide(placement, arrowX, arrowOffset, arrowPosition, dir),
     top: arrowPlacement,
     borderBottomColor: "transparent",
-    borderRightColor: "transparent"
+    borderRightColor: "transparent",
+    clipPath: "polygon(0 100%, 0 0, 100% 0)"
   } : {};
 }
 const FloatingArrow = forwardRef(
@@ -6072,8 +6079,8 @@ function createPortalNode(props) {
   const node = document.createElement("div");
   return node.setAttribute("data-portal", "true"), typeof props.className == "string" && node.classList.add(...props.className.split(" ").filter(Boolean)), typeof props.style == "object" && Object.assign(node.style, props.style), typeof props.id == "string" && node.setAttribute("id", props.id), node;
 }
-const defaultProps$1D = {}, Portal = forwardRef((props, ref) => {
-  const { children, target, ...others } = useProps("Portal", defaultProps$1D, props), [mounted, setMounted] = useState(!1), nodeRef = useRef(null);
+const defaultProps$1F = {}, Portal = forwardRef((props, ref) => {
+  const { children, target, ...others } = useProps("Portal", defaultProps$1F, props), [mounted, setMounted] = useState(!1), nodeRef = useRef(null);
   return useIsomorphicEffect(() => (setMounted(!0), nodeRef.current = target ? typeof target == "string" ? document.querySelector(target) : target : createPortalNode(others), assignRef(ref, nodeRef.current), !target && nodeRef.current && document.body.appendChild(nodeRef.current), () => {
     !target && nodeRef.current && document.body.removeChild(nodeRef.current);
   }), [target]), !mounted || !nodeRef.current ? null : createPortal(/* @__PURE__ */ jsx(Fragment$1, { children }), nodeRef.current);
@@ -6317,8 +6324,8 @@ function Transition({
 }
 Transition.displayName = "@mantine/core/Transition";
 var __default__$F = { dropdown: "m_38a85659", arrow: "m_a31dc6c1" };
-const classes$F = __default__$F, defaultProps$1C = {}, PopoverDropdown = factory((_props, ref) => {
-  const props = useProps("PopoverDropdown", defaultProps$1C, _props), {
+const classes$F = __default__$F, defaultProps$1E = {}, PopoverDropdown = factory((_props, ref) => {
+  const props = useProps("PopoverDropdown", defaultProps$1E, _props), {
     className,
     style,
     vars,
@@ -6406,13 +6413,13 @@ const classes$F = __default__$F, defaultProps$1C = {}, PopoverDropdown = factory
 });
 PopoverDropdown.classes = classes$F;
 PopoverDropdown.displayName = "@mantine/core/PopoverDropdown";
-const defaultProps$1B = {
+const defaultProps$1D = {
   refProp: "ref",
   popupType: "dialog"
 }, PopoverTarget = factory((props, ref) => {
   const { children, refProp, popupType, ...others } = useProps(
     "PopoverTarget",
-    defaultProps$1B,
+    defaultProps$1D,
     props
   );
   if (!isElement$1(children))
@@ -6429,7 +6436,11 @@ const defaultProps$1B = {
     ...forwardedProps,
     ...accessibleProps,
     ...ctx.targetProps,
-    className: clsx(ctx.targetProps.className, forwardedProps.className, children.props.className),
+    className: clsx(
+      ctx.targetProps.className,
+      forwardedProps.className,
+      children.props.className
+    ),
     [refProp]: targetRef,
     ...ctx.controlled ? null : { onClick: ctx.onToggle }
   });
@@ -6522,7 +6533,7 @@ function usePopover(options) {
     onToggle
   };
 }
-const defaultProps$1A = {
+const defaultProps$1C = {
   position: "bottom",
   offset: 8,
   positionDependencies: [],
@@ -6542,14 +6553,14 @@ const defaultProps$1A = {
   zIndex: getDefaultZIndex("popover"),
   __staticSelector: "Popover",
   width: "max-content"
-}, varsResolver$H = (_, { radius, shadow }) => ({
+}, varsResolver$J = (_, { radius, shadow }) => ({
   dropdown: {
     "--popover-radius": radius === void 0 ? void 0 : getRadius(radius),
     "--popover-shadow": getShadow(shadow)
   }
 });
 function Popover(_props) {
-  const props = useProps("Popover", defaultProps$1A, _props), {
+  const props = useProps("Popover", defaultProps$1C, _props), {
     children,
     position,
     offset: offset2,
@@ -6557,6 +6568,8 @@ function Popover(_props) {
     positionDependencies,
     opened,
     transitionProps,
+    onExitTransitionEnd,
+    onEnterTransitionEnd,
     width,
     middlewares,
     withArrow,
@@ -6599,7 +6612,7 @@ function Popover(_props) {
     unstyled,
     rootSelector: "dropdown",
     vars,
-    varsResolver: varsResolver$H
+    varsResolver: varsResolver$J
   }), { resolvedStyles } = useResolvedStylesApi({ classNames, styles, props }), arrowRef = useRef(null), [targetNode, setTargetNode] = useState(null), [dropdownNode, setDropdownNode] = useState(null), { dir } = useDirection(), uid = useId$1(id), popover = usePopover({
     middlewares,
     width,
@@ -6630,7 +6643,11 @@ function Popover(_props) {
       setDropdownNode(node), popover.floating.refs.setFloating(node);
     },
     [popover.floating.refs.setFloating]
-  );
+  ), onExited = useCallback(() => {
+    transitionProps?.onExited?.(), onExitTransitionEnd?.();
+  }, [transitionProps?.onExited, onExitTransitionEnd]), onEntered = useCallback(() => {
+    transitionProps?.onEntered?.(), onEnterTransitionEnd?.();
+  }, [transitionProps?.onEntered, onEnterTransitionEnd]);
   return /* @__PURE__ */ jsx(
     PopoverContextProvider,
     {
@@ -6646,7 +6663,7 @@ function Popover(_props) {
         arrowY: popover.floating?.middlewareData?.arrow?.y,
         opened: popover.opened,
         arrowRef,
-        transitionProps,
+        transitionProps: { ...transitionProps, onExited, onEntered },
         width,
         withArrow,
         arrowSize,
@@ -6704,16 +6721,16 @@ const defaultLoaders = {
   bars: Bars,
   oval: Oval,
   dots: Dots
-}, defaultProps$1z = {
+}, defaultProps$1B = {
   loaders: defaultLoaders,
   type: "oval"
-}, varsResolver$G = (theme, { size: size2, color }) => ({
+}, varsResolver$I = (theme, { size: size2, color }) => ({
   root: {
     "--loader-size": getSize(size2, "loader-size"),
     "--loader-color": color ? getThemeColor(color, theme) : void 0
   }
 }), Loader = factory((_props, ref) => {
-  const props = useProps("Loader", defaultProps$1z, _props), {
+  const props = useProps("Loader", defaultProps$1B, _props), {
     size: size2,
     color,
     type,
@@ -6737,7 +6754,7 @@ const defaultLoaders = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$G
+    varsResolver: varsResolver$I
   });
   return children ? /* @__PURE__ */ jsx(Box, { ...getStyles2("root"), ref, ...others, children }) : /* @__PURE__ */ jsx(
     Box,
@@ -6754,13 +6771,13 @@ const defaultLoaders = {
 Loader.defaultLoaders = defaultLoaders;
 Loader.classes = classes$E;
 Loader.displayName = "@mantine/core/Loader";
-var __default__$D = { root: "m_8d3f4000", icon: "m_8d3afb97", loader: "m_302b9fb1", group: "m_1a0f1b21" };
-const classes$D = __default__$D, defaultProps$1y = {
+var __default__$D = { root: "m_8d3f4000", icon: "m_8d3afb97", loader: "m_302b9fb1", group: "m_1a0f1b21", groupSection: "m_437b6484" };
+const classes$D = __default__$D, defaultProps$1A = {
   orientation: "horizontal"
-}, varsResolver$F = (_, { borderWidth }) => ({
+}, varsResolver$H = (_, { borderWidth }) => ({
   group: { "--ai-border-width": rem(borderWidth) }
 }), ActionIconGroup = factory((_props, ref) => {
-  const props = useProps("ActionIconGroup", defaultProps$1y, _props), {
+  const props = useProps("ActionIconGroup", defaultProps$1A, _props), {
     className,
     style,
     classNames,
@@ -6772,7 +6789,7 @@ const classes$D = __default__$D, defaultProps$1y = {
     variant,
     mod,
     ...others
-  } = useProps("ActionIconGroup", defaultProps$1y, _props), getStyles2 = useStyles({
+  } = useProps("ActionIconGroup", defaultProps$1A, _props), getStyles2 = useStyles({
     name: "ActionIconGroup",
     props,
     classes: classes$D,
@@ -6782,7 +6799,7 @@ const classes$D = __default__$D, defaultProps$1y = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$F,
+    varsResolver: varsResolver$H,
     rootSelector: "group"
   });
   return /* @__PURE__ */ jsx(
@@ -6799,7 +6816,56 @@ const classes$D = __default__$D, defaultProps$1y = {
 });
 ActionIconGroup.classes = classes$D;
 ActionIconGroup.displayName = "@mantine/core/ActionIconGroup";
-const defaultProps$1x = {}, varsResolver$E = (theme, { size: size2, radius, variant, gradient, color, autoContrast }) => {
+const defaultProps$1z = {}, varsResolver$G = (theme, { radius, color, gradient, variant, autoContrast, size: size2 }) => {
+  const colors = theme.variantColorResolver({
+    color: color || theme.primaryColor,
+    theme,
+    gradient,
+    variant: variant || "filled",
+    autoContrast
+  });
+  return {
+    groupSection: {
+      "--section-height": getSize(size2, "section-height"),
+      "--section-padding-x": getSize(size2, "section-padding-x"),
+      "--section-fz": getFontSize(size2),
+      "--section-radius": radius === void 0 ? void 0 : getRadius(radius),
+      "--section-bg": color || variant ? colors.background : void 0,
+      "--section-color": colors.color,
+      "--section-bd": color || variant ? colors.border : void 0
+    }
+  };
+}, ActionIconGroupSection = factory((_props, ref) => {
+  const props = useProps("ActionIconGroupSection", defaultProps$1z, _props), {
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+    vars,
+    variant,
+    gradient,
+    radius,
+    autoContrast,
+    ...others
+  } = useProps("ActionIconGroupSection", defaultProps$1z, _props), getStyles2 = useStyles({
+    name: "ActionIconGroupSection",
+    props,
+    classes: classes$D,
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+    vars,
+    varsResolver: varsResolver$G,
+    rootSelector: "groupSection"
+  });
+  return /* @__PURE__ */ jsx(Box, { ...getStyles2("groupSection"), ref, variant, ...others });
+});
+ActionIconGroupSection.classes = classes$D;
+ActionIconGroupSection.displayName = "@mantine/core/ActionIconGroupSection";
+const defaultProps$1y = {}, varsResolver$F = (theme, { size: size2, radius, variant, gradient, color, autoContrast }) => {
   const colors = theme.variantColorResolver({
     color: color || theme.primaryColor,
     theme,
@@ -6819,7 +6885,7 @@ const defaultProps$1x = {}, varsResolver$E = (theme, { size: size2, radius, vari
     }
   };
 }, ActionIcon = polymorphicFactory((_props, ref) => {
-  const props = useProps("ActionIcon", defaultProps$1x, _props), {
+  const props = useProps("ActionIcon", defaultProps$1y, _props), {
     className,
     unstyled,
     variant,
@@ -6850,7 +6916,7 @@ const defaultProps$1x = {}, varsResolver$E = (theme, { size: size2, radius, vari
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$E
+    varsResolver: varsResolver$F
   });
   return /* @__PURE__ */ jsxs(
     UnstyledButton,
@@ -6873,6 +6939,7 @@ const defaultProps$1x = {}, varsResolver$E = (theme, { size: size2, radius, vari
 ActionIcon.classes = classes$D;
 ActionIcon.displayName = "@mantine/core/ActionIcon";
 ActionIcon.Group = ActionIconGroup;
+ActionIcon.GroupSection = ActionIconGroupSection;
 const CloseIcon = forwardRef(
   ({ size: size2 = "var(--cb-icon-size, 70%)", style, ...others }, ref) => /* @__PURE__ */ jsx(
     "svg",
@@ -6897,16 +6964,16 @@ const CloseIcon = forwardRef(
 );
 CloseIcon.displayName = "@mantine/core/CloseIcon";
 var __default__$C = { root: "m_86a44da5", "root--subtle": "m_220c80f2" };
-const classes$C = __default__$C, defaultProps$1w = {
+const classes$C = __default__$C, defaultProps$1x = {
   variant: "subtle"
-}, varsResolver$D = (_, { size: size2, radius, iconSize }) => ({
+}, varsResolver$E = (_, { size: size2, radius, iconSize }) => ({
   root: {
     "--cb-size": getSize(size2, "cb-size"),
     "--cb-radius": radius === void 0 ? void 0 : getRadius(radius),
     "--cb-icon-size": rem(iconSize)
   }
 }), CloseButton = polymorphicFactory((_props, ref) => {
-  const props = useProps("CloseButton", defaultProps$1w, _props), {
+  const props = useProps("CloseButton", defaultProps$1x, _props), {
     iconSize,
     children,
     vars,
@@ -6932,7 +6999,7 @@ const classes$C = __default__$C, defaultProps$1w = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$D
+    varsResolver: varsResolver$E
   });
   return /* @__PURE__ */ jsxs(
     UnstyledButton,
@@ -6957,13 +7024,13 @@ function filterFalsyChildren(children) {
   return Children.toArray(children).filter(Boolean);
 }
 var __default__$B = { root: "m_4081bf90" };
-const classes$B = __default__$B, defaultProps$1v = {
+const classes$B = __default__$B, defaultProps$1w = {
   preventGrowOverflow: !0,
   gap: "md",
   align: "center",
   justify: "flex-start",
   wrap: "wrap"
-}, varsResolver$C = (_, { grow, preventGrowOverflow, gap, align, justify, wrap }, { childWidth }) => ({
+}, varsResolver$D = (_, { grow, preventGrowOverflow, gap, align, justify, wrap }, { childWidth }) => ({
   root: {
     "--group-child-width": grow && preventGrowOverflow ? childWidth : void 0,
     "--group-gap": getSpacing(gap),
@@ -6972,7 +7039,7 @@ const classes$B = __default__$B, defaultProps$1v = {
     "--group-wrap": wrap
   }
 }), Group = factory((_props, ref) => {
-  const props = useProps("Group", defaultProps$1v, _props), {
+  const props = useProps("Group", defaultProps$1w, _props), {
     classNames,
     className,
     style,
@@ -7001,7 +7068,7 @@ const classes$B = __default__$B, defaultProps$1v = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$C
+    varsResolver: varsResolver$D
   });
   return /* @__PURE__ */ jsx(
     Box,
@@ -7019,9 +7086,9 @@ const classes$B = __default__$B, defaultProps$1v = {
 Group.classes = classes$B;
 Group.displayName = "@mantine/core/Group";
 var __default__$A = { root: "m_9814e45f" };
-const classes$A = __default__$A, defaultProps$1u = {
+const classes$A = __default__$A, defaultProps$1v = {
   zIndex: getDefaultZIndex("modal")
-}, varsResolver$B = (_, { gradient, color, backgroundOpacity, blur, radius, zIndex }) => ({
+}, varsResolver$C = (_, { gradient, color, backgroundOpacity, blur, radius, zIndex }) => ({
   root: {
     "--overlay-bg": gradient || (color !== void 0 || backgroundOpacity !== void 0) && rgba(color || "#000", backgroundOpacity ?? 0.6) || void 0,
     "--overlay-filter": blur ? `blur(${rem(blur)})` : void 0,
@@ -7029,7 +7096,7 @@ const classes$A = __default__$A, defaultProps$1u = {
     "--overlay-z-index": zIndex?.toString()
   }
 }), Overlay = polymorphicFactory((_props, ref) => {
-  const props = useProps("Overlay", defaultProps$1u, _props), {
+  const props = useProps("Overlay", defaultProps$1v, _props), {
     classNames,
     className,
     style,
@@ -7057,7 +7124,7 @@ const classes$A = __default__$A, defaultProps$1u = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$B
+    varsResolver: varsResolver$C
   });
   return /* @__PURE__ */ jsx(Box, { ref, ...getStyles2("root"), mod: [{ center, fixed }, mod], ...others, children });
 });
@@ -7067,7 +7134,7 @@ const [ModalBaseProvider, useModalBaseContext] = createSafeContext(
   "ModalBase component was not found in tree"
 );
 function useLockScroll({ opened, transitionDuration }) {
-  const [shouldLockScroll, setShouldLockScroll] = useState(opened), timeout = useRef(), _transitionDuration = useReducedMotion() ? 0 : transitionDuration;
+  const [shouldLockScroll, setShouldLockScroll] = useState(opened), timeout = useRef(-1), _transitionDuration = useReducedMotion() ? 0 : transitionDuration;
   return useEffect(() => (opened ? (setShouldLockScroll(!0), window.clearTimeout(timeout.current)) : _transitionDuration === 0 ? setShouldLockScroll(!1) : timeout.current = window.setTimeout(() => setShouldLockScroll(!1), _transitionDuration), () => window.clearTimeout(timeout.current)), [opened, _transitionDuration]), shouldLockScroll;
 }
 function useModal({
@@ -7102,6 +7169,8 @@ const ModalBase = forwardRef(
     onClose,
     id,
     transitionProps,
+    onExitTransitionEnd,
+    onEnterTransitionEnd,
     trapFocus,
     closeOnEscape: closeOnEscape2,
     returnFocus,
@@ -7126,6 +7195,8 @@ const ModalBase = forwardRef(
           opened,
           onClose,
           closeOnClickOutside,
+          onExitTransitionEnd,
+          onEnterTransitionEnd,
           transitionProps: { ...transitionProps, keepMounted },
           getTitleId: () => `${_id}-title`,
           getBodyId: () => `${_id}-body`,
@@ -7212,6 +7283,12 @@ const ModalBaseContent = forwardRef(
         mounted: ctx.opened,
         transition: "pop",
         ...ctx.transitionProps,
+        onExited: () => {
+          ctx.onExitTransitionEnd?.(), ctx.transitionProps?.onExited?.();
+        },
+        onEntered: () => {
+          ctx.onEnterTransitionEnd?.(), ctx.transitionProps?.onEntered?.();
+        },
         ...transitionProps,
         children: (transitionStyles) => /* @__PURE__ */ jsx(
           "div",
@@ -7325,12 +7402,12 @@ const [InputWrapperProvider, useInputWrapperContext] = createOptionalContext({
   labelId: void 0
 });
 var __default__$y = { wrapper: "m_6c018570", input: "m_8fb7ebe7", section: "m_82577fc2", placeholder: "m_88bacfd0", root: "m_46b77525", label: "m_8fdc1311", required: "m_78a94662", error: "m_8f816625", description: "m_fe47ce59" };
-const classes$y = __default__$y, defaultProps$1t = {}, varsResolver$A = (_, { size: size2 }) => ({
+const classes$y = __default__$y, defaultProps$1u = {}, varsResolver$B = (_, { size: size2 }) => ({
   description: {
     "--input-description-size": size2 === void 0 ? void 0 : `calc(${getFontSize(size2)} - ${rem(2)})`
   }
 }), InputDescription = factory((_props, ref) => {
-  const props = useProps("InputDescription", defaultProps$1t, _props), {
+  const props = useProps("InputDescription", defaultProps$1u, _props), {
     classNames,
     className,
     style,
@@ -7342,7 +7419,7 @@ const classes$y = __default__$y, defaultProps$1t = {}, varsResolver$A = (_, { si
     __inheritStyles = !0,
     variant,
     ...others
-  } = useProps("InputDescription", defaultProps$1t, props), ctx = useInputWrapperContext(), _getStyles = useStyles({
+  } = useProps("InputDescription", defaultProps$1u, props), ctx = useInputWrapperContext(), _getStyles = useStyles({
     name: ["InputWrapper", __staticSelector],
     props,
     classes: classes$y,
@@ -7353,7 +7430,7 @@ const classes$y = __default__$y, defaultProps$1t = {}, varsResolver$A = (_, { si
     unstyled,
     rootSelector: "description",
     vars,
-    varsResolver: varsResolver$A
+    varsResolver: varsResolver$B
   }), getStyles2 = __inheritStyles && ctx?.getStyles || _getStyles;
   return /* @__PURE__ */ jsx(
     Box,
@@ -7369,12 +7446,12 @@ const classes$y = __default__$y, defaultProps$1t = {}, varsResolver$A = (_, { si
 });
 InputDescription.classes = classes$y;
 InputDescription.displayName = "@mantine/core/InputDescription";
-const defaultProps$1s = {}, varsResolver$z = (_, { size: size2 }) => ({
+const defaultProps$1t = {}, varsResolver$A = (_, { size: size2 }) => ({
   error: {
     "--input-error-size": size2 === void 0 ? void 0 : `calc(${getFontSize(size2)} - ${rem(2)})`
   }
 }), InputError = factory((_props, ref) => {
-  const props = useProps("InputError", defaultProps$1s, _props), {
+  const props = useProps("InputError", defaultProps$1t, _props), {
     classNames,
     className,
     style,
@@ -7397,7 +7474,7 @@ const defaultProps$1s = {}, varsResolver$z = (_, { size: size2 }) => ({
     unstyled,
     rootSelector: "error",
     vars,
-    varsResolver: varsResolver$z
+    varsResolver: varsResolver$A
   }), ctx = useInputWrapperContext(), getStyles2 = __inheritStyles && ctx?.getStyles || _getStyles;
   return /* @__PURE__ */ jsx(
     Box,
@@ -7413,15 +7490,15 @@ const defaultProps$1s = {}, varsResolver$z = (_, { size: size2 }) => ({
 });
 InputError.classes = classes$y;
 InputError.displayName = "@mantine/core/InputError";
-const defaultProps$1r = {
+const defaultProps$1s = {
   labelElement: "label"
-}, varsResolver$y = (_, { size: size2 }) => ({
+}, varsResolver$z = (_, { size: size2 }) => ({
   label: {
     "--input-label-size": getFontSize(size2),
     "--input-asterisk-color": void 0
   }
 }), InputLabel = factory((_props, ref) => {
-  const props = useProps("InputLabel", defaultProps$1r, _props), {
+  const props = useProps("InputLabel", defaultProps$1s, _props), {
     classNames,
     className,
     style,
@@ -7438,7 +7515,7 @@ const defaultProps$1r = {
     variant,
     mod,
     ...others
-  } = useProps("InputLabel", defaultProps$1r, props), _getStyles = useStyles({
+  } = useProps("InputLabel", defaultProps$1s, props), _getStyles = useStyles({
     name: ["InputWrapper", __staticSelector],
     props,
     classes: classes$y,
@@ -7449,7 +7526,7 @@ const defaultProps$1r = {
     unstyled,
     rootSelector: "label",
     vars,
-    varsResolver: varsResolver$y
+    varsResolver: varsResolver$z
   }), ctx = useInputWrapperContext(), getStyles2 = ctx?.getStyles || _getStyles;
   return /* @__PURE__ */ jsxs(
     Box,
@@ -7474,8 +7551,8 @@ const defaultProps$1r = {
 });
 InputLabel.classes = classes$y;
 InputLabel.displayName = "@mantine/core/InputLabel";
-const defaultProps$1q = {}, InputPlaceholder = factory((_props, ref) => {
-  const props = useProps("InputPlaceholder", defaultProps$1q, _props), {
+const defaultProps$1r = {}, InputPlaceholder = factory((_props, ref) => {
+  const props = useProps("InputPlaceholder", defaultProps$1r, _props), {
     classNames,
     className,
     style,
@@ -7487,7 +7564,7 @@ const defaultProps$1q = {}, InputPlaceholder = factory((_props, ref) => {
     error,
     mod,
     ...others
-  } = useProps("InputPlaceholder", defaultProps$1q, props), getStyles2 = useStyles({
+  } = useProps("InputPlaceholder", defaultProps$1r, props), getStyles2 = useStyles({
     name: ["InputPlaceholder", __staticSelector],
     props,
     classes: classes$y,
@@ -7516,11 +7593,11 @@ function getInputOffsets(inputWrapperOrder, { hasDescription, hasError }) {
   const inputIndex = inputWrapperOrder.findIndex((part) => part === "input"), aboveInput = inputWrapperOrder.slice(0, inputIndex), belowInput = inputWrapperOrder.slice(inputIndex + 1), offsetTop = hasDescription && aboveInput.includes("description") || hasError && aboveInput.includes("error");
   return { offsetBottom: hasDescription && belowInput.includes("description") || hasError && belowInput.includes("error"), offsetTop };
 }
-const defaultProps$1p = {
+const defaultProps$1q = {
   labelElement: "label",
   inputContainer: (children) => children,
   inputWrapperOrder: ["label", "description", "input", "error"]
-}, varsResolver$x = (_, { size: size2 }) => ({
+}, varsResolver$y = (_, { size: size2 }) => ({
   label: {
     "--input-label-size": getFontSize(size2),
     "--input-asterisk-color": void 0
@@ -7532,7 +7609,7 @@ const defaultProps$1p = {
     "--input-description-size": size2 === void 0 ? void 0 : `calc(${getFontSize(size2)} - ${rem(2)})`
   }
 }), InputWrapper = factory((_props, ref) => {
-  const props = useProps("InputWrapper", defaultProps$1p, _props), {
+  const props = useProps("InputWrapper", defaultProps$1q, _props), {
     classNames,
     className,
     style,
@@ -7568,7 +7645,7 @@ const defaultProps$1p = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$x
+    varsResolver: varsResolver$y
   }), sharedProps = {
     size: size2,
     variant,
@@ -7646,13 +7723,13 @@ const defaultProps$1p = {
 });
 InputWrapper.classes = classes$y;
 InputWrapper.displayName = "@mantine/core/InputWrapper";
-const defaultProps$1o = {
+const defaultProps$1p = {
   variant: "default",
   leftSectionPointerEvents: "none",
   rightSectionPointerEvents: "none",
   withAria: !0,
   withErrorStyles: !0
-}, varsResolver$w = (_, props, ctx) => ({
+}, varsResolver$x = (_, props, ctx) => ({
   wrapper: {
     "--input-margin-top": ctx.offsetTop ? "calc(var(--mantine-spacing-xs) / 2)" : void 0,
     "--input-margin-bottom": ctx.offsetBottom ? "calc(var(--mantine-spacing-xs) / 2)" : void 0,
@@ -7666,7 +7743,7 @@ const defaultProps$1o = {
     "--input-right-section-pointer-events": props.rightSectionPointerEvents
   }
 }), Input = polymorphicFactory((_props, ref) => {
-  const props = useProps("Input", defaultProps$1o, _props), {
+  const props = useProps("Input", defaultProps$1p, _props), {
     classNames,
     className,
     style,
@@ -7710,7 +7787,7 @@ const defaultProps$1o = {
     stylesCtx,
     rootSelector: "wrapper",
     vars,
-    varsResolver: varsResolver$w
+    varsResolver: varsResolver$x
   }), ariaAttributes = withAria ? {
     required,
     disabled,
@@ -7857,11 +7934,11 @@ function useInputProps(component, defaultProps2, _props) {
     }
   };
 }
-const defaultProps$1n = {
+const defaultProps$1o = {
   __staticSelector: "InputBase",
   withAria: !0
 }, InputBase = polymorphicFactory((props, ref) => {
-  const { inputProps, wrapperProps, ...others } = useInputProps("InputBase", defaultProps$1n, props);
+  const { inputProps, wrapperProps, ...others } = useInputProps("InputBase", defaultProps$1o, props);
   return /* @__PURE__ */ jsx(Input.Wrapper, { ...wrapperProps, children: /* @__PURE__ */ jsx(Input, { ...inputProps, ...others, ref }) });
 });
 InputBase.classes = { ...Input.classes, ...Input.Wrapper.classes };
@@ -7876,8 +7953,8 @@ const FLEX_STYLE_PROPS_DATA = {
   direction: { type: "identity", property: "flexDirection" }
 };
 var __default__$x = { root: "m_8bffd616" };
-const classes$x = __default__$x, defaultProps$1m = {}, Flex = polymorphicFactory((_props, ref) => {
-  const props = useProps("Flex", defaultProps$1m, _props), {
+const classes$x = __default__$x, defaultProps$1n = {}, Flex = polymorphicFactory((_props, ref) => {
+  const props = useProps("Flex", defaultProps$1n, _props), {
     classNames,
     className,
     style,
@@ -7948,7 +8025,7 @@ function useFloatingIndicator({
   ref,
   displayAfterTransitionEnd
 }) {
-  const transitionTimeout = useRef(), [initialized, setInitialized] = useState(!1), [hidden2, setHidden] = useState(
+  const transitionTimeout = useRef(-1), [initialized, setInitialized] = useState(!1), [hidden2, setHidden] = useState(
     typeof displayAfterTransitionEnd == "boolean" ? displayAfterTransitionEnd : !1
   ), updatePosition = () => {
     if (!target || !parent)
@@ -7964,7 +8041,7 @@ function useFloatingIndicator({
     window.clearTimeout(transitionTimeout.current), ref.current && (ref.current.style.transitionDuration = "0ms"), updatePosition(), transitionTimeout.current = window.setTimeout(() => {
       ref.current && (ref.current.style.transitionDuration = "");
     }, 30);
-  }, targetResizeObserver = useRef(), parentResizeObserver = useRef();
+  }, targetResizeObserver = useRef(null), parentResizeObserver = useRef(null);
   return useEffect(() => {
     if (updatePosition(), target)
       return targetResizeObserver.current = new ResizeObserver(updatePositionWithoutAnimation), targetResizeObserver.current.observe(target), parent && (parentResizeObserver.current = new ResizeObserver(updatePositionWithoutAnimation), parentResizeObserver.current.observe(parent)), () => {
@@ -7996,12 +8073,12 @@ function useFloatingIndicator({
   ), { initialized, hidden: hidden2 };
 }
 var __default__$w = { root: "m_96b553a6" };
-const classes$w = __default__$w, defaultProps$1l = {}, varsResolver$v = (_theme, { transitionDuration }) => ({
+const classes$w = __default__$w, defaultProps$1m = {}, varsResolver$w = (_theme, { transitionDuration }) => ({
   root: {
     "--transition-duration": typeof transitionDuration == "number" ? `${transitionDuration}ms` : transitionDuration
   }
 }), FloatingIndicator = factory((_props, ref) => {
-  const props = useProps("FloatingIndicator", defaultProps$1l, _props), {
+  const props = useProps("FloatingIndicator", defaultProps$1m, _props), {
     classNames,
     className,
     style,
@@ -8024,7 +8101,7 @@ const classes$w = __default__$w, defaultProps$1l = {}, varsResolver$v = (_theme,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$v
+    varsResolver: varsResolver$w
   }), innerRef = useRef(null), { initialized, hidden: hidden2 } = useFloatingIndicator({
     target,
     parent,
@@ -8036,7 +8113,7 @@ const classes$w = __default__$w, defaultProps$1l = {}, varsResolver$v = (_theme,
 FloatingIndicator.displayName = "@mantine/core/FloatingIndicator";
 FloatingIndicator.classes = classes$w;
 var __default__$v = { root: "m_66836ed3", wrapper: "m_a5d60502", body: "m_667c2793", title: "m_6a03f287", label: "m_698f4f23", icon: "m_667f2a6a", message: "m_7fa78076", closeButton: "m_87f54839" };
-const classes$v = __default__$v, defaultProps$1k = {}, varsResolver$u = (theme, { radius, color, variant, autoContrast }) => {
+const classes$v = __default__$v, defaultProps$1l = {}, varsResolver$v = (theme, { radius, color, variant, autoContrast }) => {
   const colors = theme.variantColorResolver({
     color: color || theme.primaryColor,
     theme,
@@ -8052,7 +8129,7 @@ const classes$v = __default__$v, defaultProps$1k = {}, varsResolver$u = (theme,
     }
   };
 }, Alert = factory((_props, ref) => {
-  const props = useProps("Alert", defaultProps$1k, _props), {
+  const props = useProps("Alert", defaultProps$1l, _props), {
     classNames,
     className,
     style,
@@ -8081,7 +8158,7 @@ const classes$v = __default__$v, defaultProps$1k = {}, varsResolver$u = (theme,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$u
+    varsResolver: varsResolver$v
   }), rootId = useId$1(id), titleId = title && `${rootId}-title` || void 0, bodyId = `${rootId}-body`;
   return /* @__PURE__ */ jsx(
     Box,
@@ -8126,9 +8203,9 @@ function getTextTruncate(truncate) {
   if (truncate === "end" || truncate)
     return "end";
 }
-const defaultProps$1j = {
+const defaultProps$1k = {
   inherit: !1
-}, varsResolver$t = (theme, { variant, lineClamp, gradient, size: size2, color }) => ({
+}, varsResolver$u = (theme, { variant, lineClamp, gradient, size: size2, color }) => ({
   root: {
     "--text-fz": getFontSize(size2),
     "--text-lh": getLineHeight(size2),
@@ -8137,7 +8214,7 @@ const defaultProps$1j = {
     "--text-color": color ? getThemeColor(color, theme) : void 0
   }
 }), Text = polymorphicFactory((_props, ref) => {
-  const props = useProps("Text", defaultProps$1j, _props), {
+  const props = useProps("Text", defaultProps$1k, _props), {
     lineClamp,
     truncate,
     inline: inline2,
@@ -8165,7 +8242,7 @@ const defaultProps$1j = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$t
+    varsResolver: varsResolver$u
   });
   return /* @__PURE__ */ jsx(
     Box,
@@ -8191,12 +8268,12 @@ const defaultProps$1j = {
 Text.classes = classes$u;
 Text.displayName = "@mantine/core/Text";
 var __default__$t = { root: "m_849cf0da" };
-const classes$t = __default__$t, defaultProps$1i = {
+const classes$t = __default__$t, defaultProps$1j = {
   underline: "hover"
 }, Anchor = polymorphicFactory((props, ref) => {
   const { underline, className, unstyled, mod, ...others } = useProps(
     "Anchor",
-    defaultProps$1i,
+    defaultProps$1j,
     props
   );
   return /* @__PURE__ */ jsx(
@@ -8227,14 +8304,14 @@ function getOptionsLockup(options) {
   return options.reduce((acc, item) => "group" in item ? { ...acc, ...getOptionsLockup(item.items) } : (acc[item.value] = item, acc), {});
 }
 var __default__$s = { dropdown: "m_88b62a41", search: "m_985517d8", options: "m_b2821a6e", option: "m_92253aa5", empty: "m_2530cd1d", header: "m_858f94bd", footer: "m_82b967cb", group: "m_254f3e4f", groupLabel: "m_2bb2e9e5", chevron: "m_2943220b", optionsDropdownOption: "m_390b5f4", optionsDropdownCheckIcon: "m_8ee53fc2" };
-const classes$s = __default__$s, defaultProps$1h = {
+const classes$s = __default__$s, defaultProps$1i = {
   error: null
-}, varsResolver$s = (_, { size: size2 }) => ({
+}, varsResolver$t = (_, { size: size2 }) => ({
   chevron: {
     "--combobox-chevron-size": getSize(size2, "combobox-chevron-size")
   }
 }), ComboboxChevron = factory((_props, ref) => {
-  const props = useProps("ComboboxChevron", defaultProps$1h, _props), { size: size2, error, style, className, classNames, styles, unstyled, vars, mod, ...others } = props, getStyles2 = useStyles({
+  const props = useProps("ComboboxChevron", defaultProps$1i, _props), { size: size2, error, style, className, classNames, styles, unstyled, vars, mod, ...others } = props, getStyles2 = useStyles({
     name: "ComboboxChevron",
     classes: classes$s,
     props,
@@ -8244,7 +8321,7 @@ const classes$s = __default__$s, defaultProps$1h = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$s,
+    varsResolver: varsResolver$t,
     rootSelector: "chevron"
   });
   return /* @__PURE__ */ jsx(
@@ -8295,10 +8372,10 @@ const [ComboboxProvider, useComboboxContext] = createSafeContext(
   )
 );
 ComboboxClearButton.displayName = "@mantine/core/ComboboxClearButton";
-const defaultProps$1g = {}, ComboboxDropdown = factory((props, ref) => {
+const defaultProps$1h = {}, ComboboxDropdown = factory((props, ref) => {
   const { classNames, styles, className, style, hidden: hidden2, ...others } = useProps(
     "ComboboxDropdown",
-    defaultProps$1g,
+    defaultProps$1h,
     props
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsx(
@@ -8314,10 +8391,10 @@ const defaultProps$1g = {}, ComboboxDropdown = factory((props, ref) => {
 });
 ComboboxDropdown.classes = classes$s;
 ComboboxDropdown.displayName = "@mantine/core/ComboboxDropdown";
-const defaultProps$1f = {
+const defaultProps$1g = {
   refProp: "ref"
 }, ComboboxDropdownTarget = factory((props, ref) => {
-  const { children, refProp } = useProps("ComboboxDropdownTarget", defaultProps$1f, props);
+  const { children, refProp } = useProps("ComboboxDropdownTarget", defaultProps$1g, props);
   if (useComboboxContext(), !isElement$1(children))
     throw new Error(
       "Combobox.DropdownTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
@@ -8325,10 +8402,10 @@ const defaultProps$1f = {
   return /* @__PURE__ */ jsx(Popover.Target, { ref, refProp, children });
 });
 ComboboxDropdownTarget.displayName = "@mantine/core/ComboboxDropdownTarget";
-const defaultProps$1e = {}, ComboboxEmpty = factory((props, ref) => {
+const defaultProps$1f = {}, ComboboxEmpty = factory((props, ref) => {
   const { classNames, className, style, styles, vars, ...others } = useProps(
     "ComboboxEmpty",
-    defaultProps$1e,
+    defaultProps$1f,
     props
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsx(
@@ -8376,7 +8453,7 @@ function useComboboxTargetProps({
     onKeyDown: handleKeyDown
   };
 }
-const defaultProps$1d = {
+const defaultProps$1e = {
   refProp: "ref",
   targetType: "input",
   withKeyboardNavigation: !0,
@@ -8393,7 +8470,7 @@ const defaultProps$1d = {
     targetType,
     autoComplete,
     ...others
-  } = useProps("ComboboxEventsTarget", defaultProps$1d, props);
+  } = useProps("ComboboxEventsTarget", defaultProps$1e, props);
   if (!isElement$1(children))
     throw new Error(
       "Combobox.EventsTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
@@ -8413,10 +8490,10 @@ const defaultProps$1d = {
   });
 });
 ComboboxEventsTarget.displayName = "@mantine/core/ComboboxEventsTarget";
-const defaultProps$1c = {}, ComboboxFooter = factory((props, ref) => {
+const defaultProps$1d = {}, ComboboxFooter = factory((props, ref) => {
   const { classNames, className, style, styles, vars, ...others } = useProps(
     "ComboboxFooter",
-    defaultProps$1c,
+    defaultProps$1d,
     props
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsx(
@@ -8433,10 +8510,10 @@ const defaultProps$1c = {}, ComboboxFooter = factory((props, ref) => {
 });
 ComboboxFooter.classes = classes$s;
 ComboboxFooter.displayName = "@mantine/core/ComboboxFooter";
-const defaultProps$1b = {}, ComboboxGroup = factory((props, ref) => {
+const defaultProps$1c = {}, ComboboxGroup = factory((props, ref) => {
   const { classNames, className, style, styles, vars, children, label, ...others } = useProps(
     "ComboboxGroup",
-    defaultProps$1b,
+    defaultProps$1c,
     props
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsxs(
@@ -8454,10 +8531,10 @@ const defaultProps$1b = {}, ComboboxGroup = factory((props, ref) => {
 });
 ComboboxGroup.classes = classes$s;
 ComboboxGroup.displayName = "@mantine/core/ComboboxGroup";
-const defaultProps$1a = {}, ComboboxHeader = factory((props, ref) => {
+const defaultProps$1b = {}, ComboboxHeader = factory((props, ref) => {
   const { classNames, className, style, styles, vars, ...others } = useProps(
     "ComboboxHeader",
-    defaultProps$1a,
+    defaultProps$1b,
     props
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsx(
@@ -8489,8 +8566,8 @@ function ComboboxHiddenInput({
   );
 }
 ComboboxHiddenInput.displayName = "@mantine/core/ComboboxHiddenInput";
-const defaultProps$19 = {}, ComboboxOption = factory((_props, ref) => {
-  const props = useProps("ComboboxOption", defaultProps$19, _props), {
+const defaultProps$1a = {}, ComboboxOption = factory((_props, ref) => {
+  const props = useProps("ComboboxOption", defaultProps$1a, _props), {
     classNames,
     className,
     style,
@@ -8533,8 +8610,8 @@ const defaultProps$19 = {}, ComboboxOption = factory((_props, ref) => {
 });
 ComboboxOption.classes = classes$s;
 ComboboxOption.displayName = "@mantine/core/ComboboxOption";
-const defaultProps$18 = {}, ComboboxOptions = factory((_props, ref) => {
-  const props = useProps("ComboboxOptions", defaultProps$18, _props), { classNames, className, style, styles, id, onMouseDown, labelledBy, ...others } = props, ctx = useComboboxContext(), _id = useId$1(id);
+const defaultProps$19 = {}, ComboboxOptions = factory((_props, ref) => {
+  const props = useProps("ComboboxOptions", defaultProps$19, _props), { classNames, className, style, styles, id, onMouseDown, labelledBy, ...others } = props, ctx = useComboboxContext(), _id = useId$1(id);
   return useEffect(() => {
     ctx.store.setListId(_id);
   }, [_id]), /* @__PURE__ */ jsx(
@@ -8554,11 +8631,11 @@ const defaultProps$18 = {}, ComboboxOptions = factory((_props, ref) => {
 });
 ComboboxOptions.classes = classes$s;
 ComboboxOptions.displayName = "@mantine/core/ComboboxOptions";
-const defaultProps$17 = {
+const defaultProps$18 = {
   withAriaAttributes: !0,
   withKeyboardNavigation: !0
 }, ComboboxSearch = factory((_props, ref) => {
-  const props = useProps("ComboboxSearch", defaultProps$17, _props), {
+  const props = useProps("ComboboxSearch", defaultProps$18, _props), {
     classNames,
     styles,
     unstyled,
@@ -8591,7 +8668,7 @@ const defaultProps$17 = {
 });
 ComboboxSearch.classes = classes$s;
 ComboboxSearch.displayName = "@mantine/core/ComboboxSearch";
-const defaultProps$16 = {
+const defaultProps$17 = {
   refProp: "ref",
   targetType: "input",
   withKeyboardNavigation: !0,
@@ -8608,7 +8685,7 @@ const defaultProps$16 = {
     targetType,
     autoComplete,
     ...others
-  } = useProps("ComboboxTarget", defaultProps$16, props);
+  } = useProps("ComboboxTarget", defaultProps$17, props);
   if (!isElement$1(children))
     throw new Error(
       "Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
@@ -8785,13 +8862,13 @@ function useCombobox({
     focusTarget
   };
 }
-const defaultProps$15 = {
+const defaultProps$16 = {
   keepMounted: !0,
   withinPortal: !0,
   resetSelectionOnOptionHover: !1,
   width: "target",
   transitionProps: { transition: "fade", duration: 0 }
-}, varsResolver$r = (_, { size: size2, dropdownPadding }) => ({
+}, varsResolver$s = (_, { size: size2, dropdownPadding }) => ({
   options: {
     "--combobox-option-fz": getFontSize(size2),
     "--combobox-option-padding": getSize(size2, "combobox-option-padding")
@@ -8803,7 +8880,7 @@ const defaultProps$15 = {
   }
 });
 function Combobox(_props) {
-  const props = useProps("Combobox", defaultProps$15, _props), {
+  const props = useProps("Combobox", defaultProps$16, _props), {
     classNames,
     styles,
     unstyled,
@@ -8826,7 +8903,7 @@ function Combobox(_props) {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$r
+    varsResolver: varsResolver$s
   }), onDropdownClose = () => {
     onClose?.(), store.closeDropdown();
   };
@@ -9045,7 +9122,7 @@ function OptionsDropdown({
   ] }) });
 }
 var __default__$r = { root: "m_347db0ec", "root--dot": "m_fbd81e3d", label: "m_5add502a", section: "m_91fdda9b" };
-const classes$r = __default__$r, defaultProps$14 = {}, varsResolver$q = (theme, { radius, color, gradient, variant, size: size2, autoContrast }) => {
+const classes$r = __default__$r, defaultProps$15 = {}, varsResolver$r = (theme, { radius, color, gradient, variant, size: size2, autoContrast }) => {
   const colors = theme.variantColorResolver({
     color: color || theme.primaryColor,
     theme,
@@ -9066,7 +9143,7 @@ const classes$r = __default__$r, defaultProps$14 = {}, varsResolver$q = (theme,
     }
   };
 }, Badge = polymorphicFactory((_props, ref) => {
-  const props = useProps("Badge", defaultProps$14, _props), {
+  const props = useProps("Badge", defaultProps$15, _props), {
     classNames,
     className,
     style,
@@ -9095,7 +9172,7 @@ const classes$r = __default__$r, defaultProps$14 = {}, varsResolver$q = (theme,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$q
+    varsResolver: varsResolver$r
   });
   return /* @__PURE__ */ jsxs(
     Box,
@@ -9124,7 +9201,7 @@ const classes$r = __default__$r, defaultProps$14 = {}, varsResolver$q = (theme,
 Badge.classes = classes$r;
 Badge.displayName = "@mantine/core/Badge";
 var __default__$q = { root: "m_fea6bf1a", burger: "m_d4fb9cad" };
-const classes$q = __default__$q, defaultProps$13 = {}, varsResolver$p = (theme, { color, size: size2, lineSize, transitionDuration, transitionTimingFunction }) => ({
+const classes$q = __default__$q, defaultProps$14 = {}, varsResolver$q = (theme, { color, size: size2, lineSize, transitionDuration, transitionTimingFunction }) => ({
   root: {
     "--burger-color": color ? getThemeColor(color, theme) : void 0,
     "--burger-size": getSize(size2, "burger-size"),
@@ -9133,7 +9210,7 @@ const classes$q = __default__$q, defaultProps$13 = {}, varsResolver$p = (theme,
     "--burger-transition-timing-function": transitionTimingFunction
   }
 }), Burger = factory((_props, ref) => {
-  const props = useProps("Burger", defaultProps$13, _props), {
+  const props = useProps("Burger", defaultProps$14, _props), {
     classNames,
     className,
     style,
@@ -9156,7 +9233,7 @@ const classes$q = __default__$q, defaultProps$13 = {}, varsResolver$p = (theme,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$p
+    varsResolver: varsResolver$q
   });
   return /* @__PURE__ */ jsxs(UnstyledButton, { ...getStyles2("root"), ref, ...others, children: [
     /* @__PURE__ */ jsx(Box, { mod: ["reduce-motion", { opened }], ...getStyles2("burger") }),
@@ -9165,13 +9242,13 @@ const classes$q = __default__$q, defaultProps$13 = {}, varsResolver$p = (theme,
 });
 Burger.classes = classes$q;
 Burger.displayName = "@mantine/core/Burger";
-var __default__$p = { root: "m_77c9d27d", inner: "m_80f1301b", label: "m_811560b9", section: "m_a74036a", loader: "m_a25b86ee", group: "m_80d6d844" };
-const classes$p = __default__$p, defaultProps$12 = {
+var __default__$p = { root: "m_77c9d27d", inner: "m_80f1301b", label: "m_811560b9", section: "m_a74036a", loader: "m_a25b86ee", group: "m_80d6d844", groupSection: "m_70be2a01" };
+const classes$p = __default__$p, defaultProps$13 = {
   orientation: "horizontal"
-}, varsResolver$o = (_, { borderWidth }) => ({
+}, varsResolver$p = (_, { borderWidth }) => ({
   group: { "--button-border-width": rem(borderWidth) }
 }), ButtonGroup = factory((_props, ref) => {
-  const props = useProps("ButtonGroup", defaultProps$12, _props), {
+  const props = useProps("ButtonGroup", defaultProps$13, _props), {
     className,
     style,
     classNames,
@@ -9183,7 +9260,7 @@ const classes$p = __default__$p, defaultProps$12 = {
     variant,
     mod,
     ...others
-  } = useProps("ButtonGroup", defaultProps$12, _props), getStyles2 = useStyles({
+  } = useProps("ButtonGroup", defaultProps$13, _props), getStyles2 = useStyles({
     name: "ButtonGroup",
     props,
     classes: classes$p,
@@ -9193,7 +9270,7 @@ const classes$p = __default__$p, defaultProps$12 = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$o,
+    varsResolver: varsResolver$p,
     rootSelector: "group"
   });
   return /* @__PURE__ */ jsx(
@@ -9210,6 +9287,55 @@ const classes$p = __default__$p, defaultProps$12 = {
 });
 ButtonGroup.classes = classes$p;
 ButtonGroup.displayName = "@mantine/core/ButtonGroup";
+const defaultProps$12 = {}, varsResolver$o = (theme, { radius, color, gradient, variant, autoContrast, size: size2 }) => {
+  const colors = theme.variantColorResolver({
+    color: color || theme.primaryColor,
+    theme,
+    gradient,
+    variant: variant || "filled",
+    autoContrast
+  });
+  return {
+    groupSection: {
+      "--section-height": getSize(size2, "section-height"),
+      "--section-padding-x": getSize(size2, "section-padding-x"),
+      "--section-fz": size2?.includes("compact") ? getFontSize(size2.replace("compact-", "")) : getFontSize(size2),
+      "--section-radius": radius === void 0 ? void 0 : getRadius(radius),
+      "--section-bg": color || variant ? colors.background : void 0,
+      "--section-color": colors.color,
+      "--section-bd": color || variant ? colors.border : void 0
+    }
+  };
+}, ButtonGroupSection = factory((_props, ref) => {
+  const props = useProps("ButtonGroupSection", defaultProps$12, _props), {
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+    vars,
+    variant,
+    gradient,
+    radius,
+    autoContrast,
+    ...others
+  } = useProps("ButtonGroupSection", defaultProps$12, _props), getStyles2 = useStyles({
+    name: "ButtonGroupSection",
+    props,
+    classes: classes$p,
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+    vars,
+    varsResolver: varsResolver$o,
+    rootSelector: "groupSection"
+  });
+  return /* @__PURE__ */ jsx(Box, { ...getStyles2("groupSection"), ref, variant, ...others });
+});
+ButtonGroupSection.classes = classes$p;
+ButtonGroupSection.displayName = "@mantine/core/ButtonGroupSection";
 const loaderTransition = {
   in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${rem(1)}))` },
   out: { opacity: 0, transform: "translate(-50%, -200%)" },
@@ -9312,6 +9438,7 @@ const loaderTransition = {
 Button.classes = classes$p;
 Button.displayName = "@mantine/core/Button";
 Button.Group = ButtonGroup;
+Button.GroupSection = ButtonGroupSection;
 const [CardProvider, useCardContext] = createSafeContext(
   "Card component was not found in tree"
 );
@@ -10137,7 +10264,7 @@ const defaultProps$D = {}, MenuItem = polymorphicFactory((props, ref) => {
     children,
     disabled,
     ...others
-  } = useProps("MenuItem", defaultProps$D, props), ctx = useMenuContext(), theme = useMantineTheme(), { dir } = useDirection(), itemRef = useRef(), itemIndex = ctx.getItemIndex(itemRef.current), _others = others, handleMouseLeave = createEventHandler(_others.onMouseLeave, () => ctx.setHovered(-1)), handleMouseEnter = createEventHandler(
+  } = useProps("MenuItem", defaultProps$D, props), ctx = useMenuContext(), theme = useMantineTheme(), { dir } = useDirection(), itemRef = useRef(null), itemIndex = ctx.getItemIndex(itemRef.current), _others = others, handleMouseLeave = createEventHandler(_others.onMouseLeave, () => ctx.setHovered(-1)), handleMouseEnter = createEventHandler(
     _others.onMouseEnter,
     () => ctx.setHovered(ctx.getItemIndex(itemRef.current))
   ), handleClick = createEventHandler(_others.onClick, () => {
@@ -10212,12 +10339,12 @@ const defaultProps$B = {
     throw new Error(
       "Menu.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
     );
-  const ctx = useMenuContext(), onClick = createEventHandler(children.props.onClick, () => {
+  const ctx = useMenuContext(), _childrenProps = children.props, onClick = createEventHandler(_childrenProps.onClick, () => {
     ctx.trigger === "click" ? ctx.toggleDropdown() : ctx.trigger === "click-hover" && (ctx.setOpenedViaClick(!0), ctx.opened || ctx.openDropdown());
   }), onMouseEnter = createEventHandler(
-    children.props.onMouseEnter,
+    _childrenProps.onMouseEnter,
     () => (ctx.trigger === "hover" || ctx.trigger === "click-hover") && ctx.openDropdown()
-  ), onMouseLeave = createEventHandler(children.props.onMouseLeave, () => {
+  ), onMouseLeave = createEventHandler(_childrenProps.onMouseLeave, () => {
     (ctx.trigger === "hover" || ctx.trigger === "click-hover" && !ctx.openedViaClick) && ctx.closeDropdown();
   });
   return /* @__PURE__ */ jsx(Popover.Target, { refProp, popupType: "menu", ref, ...others, children: cloneElement(children, {
@@ -10786,7 +10913,7 @@ function useFloatingTooltip({
   position,
   defaultOpened
 }) {
-  const [opened, setOpened] = useState(defaultOpened), boundaryRef = useRef(), { x, y, elements, refs, update, placement } = useFloating({
+  const [opened, setOpened] = useState(defaultOpened), boundaryRef = useRef(null), { x, y, elements, refs, update, placement } = useFloating({
     placement: position,
     middleware: [
       shift({
@@ -10887,10 +11014,10 @@ const classes$a = __default__$a, defaultProps$o = {
     throw new Error(
       "[@mantine/core] Tooltip.Floating component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported"
     );
-  const targetRef = useMergedRef(boundaryRef, getRefProp(children), ref), onMouseEnter = (event) => {
-    children.props.onMouseEnter?.(event), handleMouseMove(event), setOpened(!0);
+  const targetRef = useMergedRef(boundaryRef, getRefProp(children), ref), _childrenProps = children.props, onMouseEnter = (event) => {
+    _childrenProps.onMouseEnter?.(event), handleMouseMove(event), setOpened(!0);
   }, onMouseLeave = (event) => {
-    children.props.onMouseLeave?.(event), setOpened(!1);
+    _childrenProps.onMouseLeave?.(event), setOpened(!1);
   };
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(OptionalPortal, { ...portalProps, withinPortal, children: /* @__PURE__ */ jsx(
@@ -10913,7 +11040,7 @@ const classes$a = __default__$a, defaultProps$o = {
       }
     ) }),
     cloneElement(children, {
-      ...children.props,
+      ..._childrenProps,
       [refProp]: targetRef,
       onMouseEnter,
       onMouseLeave
@@ -11088,7 +11215,7 @@ const defaultProps$m = {
     throw new Error(
       "[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported"
     );
-  const targetRef = useMergedRef(tooltip.reference, getRefProp(children), ref), transition = getTransitionProps(transitionProps, { duration: 100, transition: "fade" });
+  const targetRef = useMergedRef(tooltip.reference, getRefProp(children), ref), transition = getTransitionProps(transitionProps, { duration: 100, transition: "fade" }), _childrenProps = children.props;
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(OptionalPortal, { ...portalProps, withinPortal, children: /* @__PURE__ */ jsx(
       Transition,
@@ -11147,8 +11274,8 @@ const defaultProps$m = {
         onPointerDown: props.onPointerDown,
         onPointerEnter: props.onPointerEnter,
         [refProp]: targetRef,
-        className: clsx(className, children.props.className),
-        ...children.props
+        className: clsx(className, _childrenProps.className),
+        ..._childrenProps
       })
     )
   ] });
@@ -11631,11 +11758,11 @@ const Thumb = forwardRef(
         __vars: { "--slider-thumb-offset": `${position}%` },
         ...getStyles2("thumb", { focusable: !0 }),
         mod: { dragging, disabled },
-        onFocus: () => {
-          setFocused(!0), typeof onFocus == "function" && onFocus();
+        onFocus: (event) => {
+          setFocused(!0), typeof onFocus == "function" && onFocus(event);
         },
-        onBlur: () => {
-          setFocused(!1), typeof onBlur == "function" && onBlur();
+        onBlur: (event) => {
+          setFocused(!1), typeof onBlur == "function" && onBlur(event);
         },
         onTouchStart: onMouseDown,
         onMouseDown,
@@ -11737,6 +11864,22 @@ function getPrecision(step) {
   const split = step.toString().split(".");
   return split.length > 1 ? split[1].length : 0;
 }
+function getNextMarkValue(currentValue, marks) {
+  const nextMark = [...marks].sort((a, b) => a.value - b.value).find((mark) => mark.value > currentValue);
+  return nextMark ? nextMark.value : currentValue;
+}
+function getPreviousMarkValue(currentValue, marks) {
+  const previousMark = [...marks].sort((a, b) => b.value - a.value).find((mark) => mark.value < currentValue);
+  return previousMark ? previousMark.value : currentValue;
+}
+function getFirstMarkValue(marks) {
+  const sortedMarks = [...marks].sort((a, b) => b.value - a.value);
+  return sortedMarks.length > 0 ? sortedMarks[0].value : 0;
+}
+function getLastMarkValue(marks) {
+  const sortedMarks = [...marks].sort((a, b) => a.value - b.value);
+  return sortedMarks.length > 0 ? sortedMarks[sortedMarks.length - 1].value : 100;
+}
 var __default__$7 = { root: "m_dd36362e", label: "m_c9357328", thumb: "m_c9a9a60a", trackContainer: "m_a8645c2", track: "m_c9ade57f", bar: "m_38aeed47", markWrapper: "m_b7b0423a", mark: "m_dd33bc19", markLabel: "m_68c77a5b" };
 const classes$7 = __default__$7, defaultProps$i = {
   radius: "xl",
@@ -11788,6 +11931,7 @@ const classes$7 = __default__$7, defaultProps$i = {
     vars,
     hiddenInputProps,
     restrictToMarks,
+    thumbProps,
     ...others
   } = props, getStyles2 = useStyles({
     name: "Slider",
@@ -11805,7 +11949,7 @@ const classes$7 = __default__$7, defaultProps$i = {
     defaultValue: typeof defaultValue == "number" ? clamp$2(defaultValue, min2, max2) : defaultValue,
     finalValue: clamp$2(0, min2, max2),
     onChange
-  }), valueRef = useRef(_value), root = useRef(), thumb = useRef(), position = getPosition({ value: _value, min: min2, max: max2 }), scaledValue = scale(_value), _label = typeof label == "function" ? label(scaledValue) : label, precision = _precision ?? getPrecision(step), handleChange = useCallback(
+  }), valueRef = useRef(_value), root = useRef(null), thumb = useRef(null), position = getPosition({ value: _value, min: min2, max: max2 }), scaledValue = scale(_value), _label = typeof label == "function" ? label(scaledValue) : label, precision = _precision ?? getPrecision(step), handleChange = useCallback(
     ({ x }) => {
       if (!disabled) {
         const nextValue = getChangeValue({
@@ -11839,7 +11983,11 @@ const classes$7 = __default__$7, defaultProps$i = {
     if (!disabled)
       switch (event.key) {
         case "ArrowUp": {
-          event.preventDefault(), thumb.current?.focus();
+          if (event.preventDefault(), thumb.current?.focus(), restrictToMarks && marks) {
+            const nextValue2 = getNextMarkValue(_value, marks);
+            setValue(nextValue2), onChangeEnd?.(nextValue2);
+            break;
+          }
           const nextValue = getFloatingValue(
             Math.min(Math.max(_value + step, min2), max2),
             precision
@@ -11848,7 +11996,11 @@ const classes$7 = __default__$7, defaultProps$i = {
           break;
         }
         case "ArrowRight": {
-          event.preventDefault(), thumb.current?.focus();
+          if (event.preventDefault(), thumb.current?.focus(), restrictToMarks && marks) {
+            const nextValue2 = dir === "rtl" ? getPreviousMarkValue(_value, marks) : getNextMarkValue(_value, marks);
+            setValue(nextValue2), onChangeEnd?.(nextValue2);
+            break;
+          }
           const nextValue = getFloatingValue(
             Math.min(Math.max(dir === "rtl" ? _value - step : _value + step, min2), max2),
             precision
@@ -11857,7 +12009,11 @@ const classes$7 = __default__$7, defaultProps$i = {
           break;
         }
         case "ArrowDown": {
-          event.preventDefault(), thumb.current?.focus();
+          if (event.preventDefault(), thumb.current?.focus(), restrictToMarks && marks) {
+            const nextValue2 = getPreviousMarkValue(_value, marks);
+            setValue(nextValue2), onChangeEnd?.(nextValue2);
+            break;
+          }
           const nextValue = getFloatingValue(
             Math.min(Math.max(_value - step, min2), max2),
             precision
@@ -11866,7 +12022,11 @@ const classes$7 = __default__$7, defaultProps$i = {
           break;
         }
         case "ArrowLeft": {
-          event.preventDefault(), thumb.current?.focus();
+          if (event.preventDefault(), thumb.current?.focus(), restrictToMarks && marks) {
+            const nextValue2 = dir === "rtl" ? getNextMarkValue(_value, marks) : getPreviousMarkValue(_value, marks);
+            setValue(nextValue2), onChangeEnd?.(nextValue2);
+            break;
+          }
           const nextValue = getFloatingValue(
             Math.min(Math.max(dir === "rtl" ? _value + step : _value - step, min2), max2),
             precision
@@ -11875,11 +12035,19 @@ const classes$7 = __default__$7, defaultProps$i = {
           break;
         }
         case "Home": {
-          event.preventDefault(), thumb.current?.focus(), setValue(min2), onChangeEnd?.(min2);
+          if (event.preventDefault(), thumb.current?.focus(), restrictToMarks && marks) {
+            setValue(getFirstMarkValue(marks)), onChangeEnd?.(getFirstMarkValue(marks));
+            break;
+          }
+          setValue(min2), onChangeEnd?.(min2);
           break;
         }
         case "End": {
-          event.preventDefault(), thumb.current?.focus(), setValue(max2), onChangeEnd?.(max2);
+          if (event.preventDefault(), thumb.current?.focus(), restrictToMarks && marks) {
+            setValue(getLastMarkValue(marks)), onChangeEnd?.(getLastMarkValue(marks));
+            break;
+          }
+          setValue(max2), onChangeEnd?.(max2);
           break;
         }
       }
@@ -11926,6 +12094,7 @@ const classes$7 = __default__$7, defaultProps$i = {
                 showLabelOnHover,
                 isHovered: hovered,
                 disabled,
+                ...thumbProps,
                 children: thumbChildren
               }
             )
@@ -12429,7 +12598,8 @@ function TreeNode({
   renderNode,
   flatValues,
   allowRangeSelection,
-  expandOnSpace
+  expandOnSpace,
+  checkOnSpace
 }) {
   const ref = useRef(null), nested = (node.children || []).map((child) => /* @__PURE__ */ jsx(
     TreeNode,
@@ -12445,7 +12615,8 @@ function TreeNode({
       renderNode,
       selectOnClick,
       allowRangeSelection,
-      expandOnSpace
+      expandOnSpace,
+      checkOnSpace
     },
     child.value
   )), handleKeyDown = (event) => {
@@ -12465,7 +12636,7 @@ function TreeNode({
         );
       }
     }
-    event.nativeEvent.code === "Space" && expandOnSpace && (event.stopPropagation(), event.preventDefault(), controller.toggleExpanded(node.value));
+    event.nativeEvent.code === "Space" && (expandOnSpace && (event.stopPropagation(), event.preventDefault(), controller.toggleExpanded(node.value)), checkOnSpace && (event.stopPropagation(), event.preventDefault(), controller.isNodeChecked(node.value) ? controller.uncheckNode(node.value) : controller.checkNode(node.value)));
   }, handleNodeClick = (event) => {
     event.stopPropagation(), allowRangeSelection && event.shiftKey && controller.anchorNode ? (controller.setSelectedState(getValuesRange(controller.anchorNode, node.value, flatValues)), ref.current?.focus()) : (expandOnClick && controller.toggleExpanded(node.value), selectOnClick && controller.select(node.value), ref.current?.focus());
   }, selected = controller.selectedState.includes(node.value), elementProps = {
@@ -12711,6 +12882,7 @@ const defaultProps$8 = {
     allowRangeSelection,
     expandOnSpace,
     levelOffset,
+    checkOnSpace,
     ...others
   } = props, defaultController = useTree(), controller = tree || defaultController, getStyles2 = useStyles({
     name: "Tree",
@@ -12741,7 +12913,8 @@ const defaultProps$8 = {
       renderNode,
       flatValues,
       allowRangeSelection,
-      expandOnSpace
+      expandOnSpace,
+      checkOnSpace
     },
     node.value
   ));
@@ -13380,82 +13553,83 @@ Spotlight.open = spotlight.open;
 Spotlight.close = spotlight.close;
 Spotlight.toggle = spotlight.toggle;
 export {
-  useLocalStorage as $,
+  UnstyledButton as $,
   ActionIcon as A,
   Box as B,
   Card as C,
-  Pill as D,
-  Divider as E,
-  useViewportSize as F,
+  Anchor as D,
+  Pill as E,
+  Divider as F,
   Group as G,
   Highlight as H,
   Image as I,
-  FocusTrap as J,
-  FocusTrapInitialFocus as K,
-  CloseButton as L,
-  Badge as M,
-  Flex as N,
-  ActionIconGroup as O,
+  useViewportSize as J,
+  useSessionStorage as K,
+  FocusTrap as L,
+  Menu as M,
+  FocusTrapInitialFocus as N,
+  CloseButton as O,
   Paper as P,
-  Tabs as Q,
+  Badge as Q,
   RemoveScroll as R,
   Spotlight as S,
   ThemeIcon as T,
-  TabsList as U,
-  TabsTab as V,
-  TabsPanel as W,
-  ScrollArea as X,
-  UnstyledButton as Y,
-  CopyButton as Z,
-  Code as _,
+  Flex as U,
+  ActionIconGroup as V,
+  Tabs as W,
+  TabsList as X,
+  TabsTab as Y,
+  TabsPanel as Z,
+  ScrollArea as _,
   Text as a,
-  useStateHistory as a0,
-  Space as a1,
-  useHotkeys as a2,
-  MantineContext as a3,
-  Menu as a4,
-  MenuTarget as a5,
-  MenuDropdown as a6,
-  MenuLabel as a7,
-  MenuDivider as a8,
-  TooltipGroup as a9,
-  ModalRoot as aA,
-  ModalOverlay as aB,
-  ModalContent as aC,
-  ModalBody as aD,
-  useMantineTheme as aE,
-  useMediaQuery as aF,
-  useDisclosure as aG,
-  LoadingOverlay as aH,
-  useCallbackRef as aI,
-  Burger as aJ,
-  Loader as aK,
-  MenuItem as aa,
-  keys as ab,
-  ColorSwatch as ac,
-  CheckIcon as ad,
-  rem as ae,
-  Slider as af,
-  useDebouncedValue as ag,
-  Spoiler as ah,
-  ButtonGroup as ai,
-  useHover$1 as aj,
-  FloatingIndicator as ak,
-  useUncontrolled as al,
-  clampUseMovePosition as am,
-  useMove as an,
-  openSpotlight as ao,
-  HoverCard as ap,
-  HoverCardTarget as aq,
-  Overlay as ar,
-  HoverCardDropdown as as,
-  Notification as at,
-  createTheme as au,
-  MantineProvider as av,
-  useInViewport as aw,
-  SimpleGrid as ax,
-  Drawer as ay,
-  Select as az,
+  CopyButton as a0,
+  Code as a1,
+  useLocalStorage as a2,
+  useStateHistory as a3,
+  Space as a4,
+  useHotkeys as a5,
+  Notification as a6,
+  MantineContext as a7,
+  MenuTarget as a8,
+  MenuDropdown as a9,
+  Select as aA,
+  ModalRoot as aB,
+  ModalOverlay as aC,
+  ModalContent as aD,
+  ModalBody as aE,
+  useMantineTheme as aF,
+  useMediaQuery as aG,
+  useDisclosure as aH,
+  LoadingOverlay as aI,
+  useCallbackRef as aJ,
+  Burger as aK,
+  Loader as aL,
+  MenuLabel as aa,
+  MenuDivider as ab,
+  TooltipGroup as ac,
+  MenuItem as ad,
+  keys as ae,
+  ColorSwatch as af,
+  CheckIcon as ag,
+  Slider as ah,
+  useDebouncedValue as ai,
+  Spoiler as aj,
+  ButtonGroup as ak,
+  useHover$1 as al,
+  FloatingIndicator as am,
+  useUncontrolled as an,
+  clampUseMovePosition as ao,
+  useMove as ap,
+  openSpotlight as aq,
+  HoverCard as ar,
+  HoverCardTarget as as,
+  Overlay as at,
+  HoverCardDropdown as au,
+  createTheme as av,
+  MantineProvider as aw,
+  useInViewport as ax,
+  SimpleGrid as ay,
+  Drawer as az,
   CardSection as b,
   clsx as c,
   Center as d,
@@ -13473,12 +13647,12 @@ export {
   ScrollAreaAutosize as p,
   Stack as q,
   useTree as r,
-  Tree as s,
+  Alert as s,
   themeToVars as t,
   useMantineColorScheme as u,
-  Tooltip as v,
-  useId$1 as w,
-  SegmentedControl as x,
-  Alert as y,
-  Anchor as z
+  Tree as v,
+  rem as w,
+  Tooltip as x,
+  useId$1 as y,
+  SegmentedControl as z
 };