likec4 1.1.0 → 1.1.1

package/dist/__app__/src/{main-Ccc7-VWf.js → main-DvKdwZif.js}

@@ -18,7 +18,7 @@ function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2.default : x2;
 }
 var jsxRuntime = { exports: {} }, reactJsxRuntime_production_min = {}, react = { exports: {} }, react_production_min = {};
-var l$2 = Symbol.for("react.element"), n$3 = Symbol.for("react.portal"), p$5 = Symbol.for("react.fragment"), q$4 = Symbol.for("react.strict_mode"), r$4 = Symbol.for("react.profiler"), t$2 = Symbol.for("react.provider"), u$3 = Symbol.for("react.context"), v$3 = Symbol.for("react.forward_ref"), w$2 = Symbol.for("react.suspense"), x$1 = Symbol.for("react.memo"), y$1 = Symbol.for("react.lazy"), z$2 = Symbol.iterator;
+var l$2 = Symbol.for("react.element"), n$3 = Symbol.for("react.portal"), p$5 = Symbol.for("react.fragment"), q$4 = Symbol.for("react.strict_mode"), r$4 = Symbol.for("react.profiler"), t$2 = Symbol.for("react.provider"), u$3 = Symbol.for("react.context"), v$3 = Symbol.for("react.forward_ref"), w$2 = Symbol.for("react.suspense"), x$2 = Symbol.for("react.memo"), y$2 = Symbol.for("react.lazy"), z$2 = Symbol.iterator;
 function A$2(a) {
   return a === null || typeof a != "object" ? null : (a = z$2 && a[z$2] || a["@@iterator"], typeof a == "function" ? a : null);
 }
@@ -205,10 +205,10 @@ react_production_min.forwardRef = function(a) {
 };
 react_production_min.isValidElement = O$2;
 react_production_min.lazy = function(a) {
-  return { $$typeof: y$1, _payload: { _status: -1, _result: a }, _init: T$2 };
+  return { $$typeof: y$2, _payload: { _status: -1, _result: a }, _init: T$2 };
 };
 react_production_min.memo = function(a, b2) {
-  return { $$typeof: x$1, type: a, compare: b2 === void 0 ? null : b2 };
+  return { $$typeof: x$2, type: a, compare: b2 === void 0 ? null : b2 };
 };
 react_production_min.startTransition = function(a) {
   var b2 = V$2.transition;
@@ -3318,11 +3318,11 @@ function ni(a, b2, c2) {
   a.flags |= 16384, a = { getSnapshot: b2, value: c2 }, b2 = N$1.updateQueue, b2 === null ? (b2 = { lastEffect: null, stores: null }, N$1.updateQueue = b2, b2.stores = [a]) : (c2 = b2.stores, c2 === null ? b2.stores = [a] : c2.push(a));
 }
 function mi(a, b2, c2, d2) {
-  b2.value = c2, b2.getSnapshot = d2, oi(b2) && pi(a);
+  b2.value = c2, b2.getSnapshot = d2, oi(b2) && pi$1(a);
 }
 function ki(a, b2, c2) {
   return c2(function() {
-    oi(b2) && pi(a);
+    oi(b2) && pi$1(a);
   });
 }
 function oi(a) {
@@ -3335,7 +3335,7 @@ function oi(a) {
     return !0;
   }
 }
-function pi(a) {
+function pi$1(a) {
   var b2 = Zg(a, 1);
   b2 !== null && mh(b2, a, 1, -1);
 }
@@ -6323,26 +6323,26 @@ function createHashHistory(opts) {
 function createMemoryHistory(opts = {
   initialEntries: ["/"]
 }) {
-  const entries = opts.initialEntries;
-  let index2 = opts.initialIndex ?? entries.length - 1, currentState = {
+  const entries2 = opts.initialEntries;
+  let index2 = opts.initialIndex ?? entries2.length - 1, currentState = {
     key: createRandomKey()
   };
   return createHistory({
-    getLocation: () => parseHref(entries[index2], currentState),
+    getLocation: () => parseHref(entries2[index2], currentState),
     pushState: (path, state) => {
-      currentState = state, entries.push(path), index2 = Math.max(entries.length - 1, 0);
+      currentState = state, entries2.push(path), index2 = Math.max(entries2.length - 1, 0);
     },
     replaceState: (path, state) => {
-      currentState = state, entries[index2] = path;
+      currentState = state, entries2[index2] = path;
     },
     back: () => {
       currentState = assignKey(currentState), index2--;
     },
     forward: () => {
-      currentState = assignKey(currentState), index2 = Math.min(index2 + 1, entries.length - 1);
+      currentState = assignKey(currentState), index2 = Math.min(index2 + 1, entries2.length - 1);
     },
     go: (n2) => {
-      currentState = assignKey(currentState), index2 = Math.min(Math.max(index2 + n2, 0), entries.length - 1);
+      currentState = assignKey(currentState), index2 = Math.min(Math.max(index2 + n2, 0), entries2.length - 1);
     },
     createHref: (path) => path
   });
@@ -9175,6 +9175,9 @@ function useHovered() {
   const [hovered, setHovered] = reactExports.useState(-1);
   return [hovered, { setHovered, resetHovered: () => setHovered(-1) }];
 }
+function clamp$5(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)}`;
 }
@@ -9386,6 +9389,94 @@ function useId$1(staticId) {
 function useWindowEvent(type, listener, options) {
   reactExports.useEffect(() => (window.addEventListener(type, listener, options), () => window.removeEventListener(type, listener, options)), [type, listener]);
 }
+function serializeJSON(value, hookName = "use-local-storage") {
+  try {
+    return JSON.stringify(value);
+  } catch {
+    throw new Error(`@mantine/hooks ${hookName}: Failed to serialize the value`);
+  }
+}
+function deserializeJSON(value) {
+  try {
+    return value && JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+function createStorageHandler(type) {
+  return { getItem: (key) => {
+    try {
+      return window[type].getItem(key);
+    } catch {
+      return console.warn("use-local-storage: Failed to get value from storage, localStorage is blocked"), null;
+    }
+  }, setItem: (key, value) => {
+    try {
+      window[type].setItem(key, value);
+    } catch {
+      console.warn("use-local-storage: Failed to set value to storage, localStorage is blocked");
+    }
+  }, removeItem: (key) => {
+    try {
+      window[type].removeItem(key);
+    } catch {
+      console.warn(
+        "use-local-storage: Failed to remove value from storage, localStorage is blocked"
+      );
+    }
+  } };
+}
+function createStorage(type, hookName) {
+  const eventName = type === "localStorage" ? "mantine-local-storage" : "mantine-session-storage", { getItem, setItem, removeItem: removeItem2 } = createStorageHandler(type);
+  return function({
+    key,
+    defaultValue,
+    getInitialValueInEffect = !0,
+    deserialize = deserializeJSON,
+    serialize = (value) => serializeJSON(value, hookName)
+  }) {
+    const readStorageValue = reactExports.useCallback(
+      (skipStorage) => {
+        let storageBlockedOrSkipped;
+        try {
+          storageBlockedOrSkipped = typeof window > "u" || !(type in window) || window[type] === null || !!skipStorage;
+        } catch {
+          storageBlockedOrSkipped = !0;
+        }
+        if (storageBlockedOrSkipped)
+          return defaultValue;
+        const storageValue = getItem(key);
+        return storageValue !== null ? deserialize(storageValue) : defaultValue;
+      },
+      [key, defaultValue]
+    ), [value, setValue] = reactExports.useState(readStorageValue(getInitialValueInEffect)), setStorageValue = reactExports.useCallback(
+      (val) => {
+        val instanceof Function ? setValue((current) => {
+          const result = val(current);
+          return setItem(key, serialize(result)), window.dispatchEvent(
+            new CustomEvent(eventName, { detail: { key, value: val(current) } })
+          ), result;
+        }) : (setItem(key, serialize(val)), window.dispatchEvent(new CustomEvent(eventName, { detail: { key, value: val } })), setValue(val));
+      },
+      [key]
+    ), removeStorageValue = reactExports.useCallback(() => {
+      removeItem2(key), window.dispatchEvent(new CustomEvent(eventName, { detail: { key, value: defaultValue } }));
+    }, []);
+    return useWindowEvent("storage", (event) => {
+      event.storageArea === window[type] && event.key === key && setValue(deserialize(event.newValue ?? void 0));
+    }), useWindowEvent(eventName, (event) => {
+      event.detail.key === key && setValue(event.detail.value);
+    }), reactExports.useEffect(() => {
+      defaultValue !== void 0 && value === void 0 && setStorageValue(defaultValue);
+    }, [defaultValue, value, setStorageValue]), reactExports.useEffect(() => {
+      const val = readStorageValue();
+      val !== void 0 && setStorageValue(val);
+    }, []), [value === void 0 ? defaultValue : value, setStorageValue, removeStorageValue];
+  };
+}
+function useLocalStorage(props) {
+  return createStorage("localStorage", "use-local-storage")(props);
+}
 function assignRef(ref, value) {
   typeof ref == "function" ? ref(value) : typeof ref == "object" && ref !== null && "current" in ref && (ref.current = value);
 }
@@ -9397,6 +9488,47 @@ function mergeRefs(...refs) {
 function useMergedRef(...refs) {
   return reactExports.useCallback(mergeRefs(...refs), refs);
 }
+function useMove(onChange, handlers, dir = "ltr") {
+  const ref = reactExports.useRef(null), mounted = reactExports.useRef(!1), isSliding = reactExports.useRef(!1), frame2 = reactExports.useRef(0), [active, setActive] = reactExports.useState(!1);
+  return reactExports.useEffect(() => {
+    mounted.current = !0;
+  }, []), reactExports.useEffect(() => {
+    const onScrub = ({ x: x2, y: y2 }) => {
+      cancelAnimationFrame(frame2.current), frame2.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$5((x2 - rect.left) / rect.width, 0, 1);
+            onChange({
+              x: dir === "ltr" ? _x : 1 - _x,
+              y: clamp$5((y2 - rect.top) / rect.height, 0, 1)
+            });
+          }
+        }
+      });
+    }, bindEvents = () => {
+      document.addEventListener("mousemove", onMouseMove), document.addEventListener("mouseup", stopScrubbing), document.addEventListener("touchmove", onTouchMove), document.addEventListener("touchend", stopScrubbing);
+    }, unbindEvents = () => {
+      document.removeEventListener("mousemove", onMouseMove), document.removeEventListener("mouseup", stopScrubbing), document.removeEventListener("touchmove", onTouchMove), document.removeEventListener("touchend", stopScrubbing);
+    }, startScrubbing = () => {
+      !isSliding.current && mounted.current && (isSliding.current = !0, typeof handlers?.onScrubStart == "function" && handlers.onScrubStart(), setActive(!0), bindEvents());
+    }, stopScrubbing = () => {
+      isSliding.current && mounted.current && (isSliding.current = !1, setActive(!1), unbindEvents(), setTimeout(() => {
+        typeof handlers?.onScrubEnd == "function" && handlers.onScrubEnd();
+      }, 0));
+    }, onMouseDown = (event) => {
+      startScrubbing(), event.preventDefault(), onMouseMove(event);
+    }, onMouseMove = (event) => onScrub({ x: event.clientX, y: event.clientY }), onTouchStart = (event) => {
+      event.cancelable && event.preventDefault(), startScrubbing(), onTouchMove(event);
+    }, onTouchMove = (event) => {
+      event.cancelable && event.preventDefault(), onScrub({ x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY });
+    };
+    return ref.current?.addEventListener("mousedown", onMouseDown), ref.current?.addEventListener("touchstart", onTouchStart, { passive: !1 }), () => {
+      ref.current && (ref.current.removeEventListener("mousedown", onMouseDown), ref.current.removeEventListener("touchstart", onTouchStart));
+    };
+  }, [dir, onChange]), { ref, active };
+}
 function useUncontrolled({
   value,
   defaultValue,
@@ -9414,6 +9546,34 @@ function useUncontrolled({
 function useReducedMotion(initialValue, options) {
   return useMediaQuery("(prefers-reduced-motion: reduce)", initialValue, options);
 }
+const defaultState = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+};
+function useResizeObserver$2(options) {
+  const frameID = reactExports.useRef(0), ref = reactExports.useRef(null), [rect, setRect] = reactExports.useState(defaultState), observer = reactExports.useMemo(
+    () => typeof window < "u" ? new ResizeObserver((entries2) => {
+      const entry = entries2[0];
+      entry && (cancelAnimationFrame(frameID.current), frameID.current = requestAnimationFrame(() => {
+        ref.current && setRect(entry.contentRect);
+      }));
+    }) : null,
+    []
+  );
+  return reactExports.useEffect(() => (ref.current && observer?.observe(ref.current, options), () => {
+    observer?.disconnect(), frameID.current && cancelAnimationFrame(frameID.current);
+  }), [ref.current]), [ref, rect];
+}
+function useElementSize(options) {
+  const [ref, { width, height }] = useResizeObserver$2(options);
+  return { ref, width, height };
+}
 function useDisclosure(initialState2 = !1, callbacks) {
   const { onOpen, onClose } = callbacks || {}, [opened, setOpened] = reactExports.useState(initialState2), open = reactExports.useCallback(() => {
     setOpened((isOpened) => isOpened || (onOpen?.(), !0));
@@ -9424,6 +9584,35 @@ function useDisclosure(initialState2 = !1, callbacks) {
   }, [close, open, opened]);
   return [opened, { open, close, toggle }];
 }
+function useTimeout(callback, delay2, options = { autoInvoke: !1 }) {
+  const timeoutRef = reactExports.useRef(null), start2 = reactExports.useCallback(
+    (...callbackParams) => {
+      timeoutRef.current || (timeoutRef.current = window.setTimeout(() => {
+        callback(callbackParams), timeoutRef.current = null;
+      }, delay2));
+    },
+    [delay2]
+  ), clear = reactExports.useCallback(() => {
+    timeoutRef.current && (window.clearTimeout(timeoutRef.current), timeoutRef.current = null);
+  }, []);
+  return reactExports.useEffect(() => (options.autoInvoke && start2(), clear), [clear, start2]), { start: start2, clear };
+}
+function useMutationObserver(callback, options, target) {
+  const observer = reactExports.useRef(), ref = reactExports.useRef(null);
+  return reactExports.useEffect(() => {
+    const targetElement = typeof target == "function" ? target() : target;
+    return (targetElement || ref.current) && (observer.current = new MutationObserver(callback), observer.current.observe(targetElement || ref.current, options)), () => {
+      observer.current?.disconnect();
+    };
+  }, [callback, options]), ref;
+}
+function useMounted() {
+  const [mounted, setMounted] = reactExports.useState(!1);
+  return reactExports.useEffect(() => setMounted(!0), []), mounted;
+}
+function getEnv() {
+  return typeof process < "u" && process.env ? "production" : "development";
+}
 function r$1(e2) {
   var t2, f2, n2 = "";
   if (typeof e2 == "string" || typeof e2 == "number")
@@ -11247,11 +11436,11 @@ const Corner = reactExports.forwardRef((props, ref) => {
 }), ScrollAreaCorner = reactExports.forwardRef((props, ref) => {
   const ctx = useScrollAreaContext(), hasBothScrollbarsVisible = !!(ctx.scrollbarX && ctx.scrollbarY);
   return ctx.type !== "scroll" && hasBothScrollbarsVisible ? /* @__PURE__ */ jsxRuntimeExports.jsx(Corner, { ...props, ref }) : null;
-}), defaultProps$1h = {
+}), defaultProps$1l = {
   scrollHideDelay: 1e3,
   type: "hover"
 }, ScrollAreaRoot = reactExports.forwardRef((_props, ref) => {
-  const props = useProps("ScrollAreaRoot", defaultProps$1h, _props), { type, scrollHideDelay, scrollbars, ...others } = props, [scrollArea, setScrollArea] = reactExports.useState(null), [viewport, setViewport] = reactExports.useState(null), [content2, setContent] = reactExports.useState(null), [scrollbarX, setScrollbarX] = reactExports.useState(null), [scrollbarY, setScrollbarY] = reactExports.useState(null), [cornerWidth, setCornerWidth] = reactExports.useState(0), [cornerHeight, setCornerHeight] = reactExports.useState(0), [scrollbarXEnabled, setScrollbarXEnabled] = reactExports.useState(!1), [scrollbarYEnabled, setScrollbarYEnabled] = reactExports.useState(!1), rootRef = useMergedRef(ref, (node) => setScrollArea(node));
+  const props = useProps("ScrollAreaRoot", defaultProps$1l, _props), { type, scrollHideDelay, scrollbars, ...others } = props, [scrollArea, setScrollArea] = reactExports.useState(null), [viewport, setViewport] = reactExports.useState(null), [content2, setContent] = reactExports.useState(null), [scrollbarX, setScrollbarX] = reactExports.useState(null), [scrollbarY, setScrollbarY] = reactExports.useState(null), [cornerWidth, setCornerWidth] = reactExports.useState(0), [cornerHeight, setCornerHeight] = reactExports.useState(0), [scrollbarXEnabled, setScrollbarXEnabled] = reactExports.useState(!1), [scrollbarYEnabled, setScrollbarYEnabled] = reactExports.useState(!1), rootRef = useMergedRef(ref, (node) => setScrollArea(node));
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ScrollAreaProvider,
     {
@@ -11602,7 +11791,7 @@ function addUnlinkedScrollListener(node, handler = () => {
     (isHorizontalScroll || isVerticalScroll) && handler(), prevPosition = position, rAF = window.requestAnimationFrame(loop);
   }(), () => window.cancelAnimationFrame(rAF);
 }
-const Thumb = reactExports.forwardRef((props, forwardedRef) => {
+const Thumb$1 = reactExports.forwardRef((props, forwardedRef) => {
   const { style: style2, ...others } = props, scrollAreaContext = useScrollAreaContext(), scrollbarContext = useScrollbarContext(), { onThumbPositionChange } = scrollbarContext, composedRef = useMergedRef(forwardedRef, (node) => scrollbarContext.onThumbChange(node)), removeUnlinkedScrollListenerRef = reactExports.useRef(), debounceScrollEnd = useDebouncedCallback$1(() => {
     removeUnlinkedScrollListenerRef.current && (removeUnlinkedScrollListenerRef.current(), removeUnlinkedScrollListenerRef.current = void 0);
   }, 100);
@@ -11638,7 +11827,7 @@ const Thumb = reactExports.forwardRef((props, forwardedRef) => {
 }), ScrollAreaThumb = reactExports.forwardRef(
   (props, forwardedRef) => {
     const { forceMount, ...thumbProps } = props, scrollbarContext = useScrollbarContext();
-    return forceMount || scrollbarContext.hasThumb ? /* @__PURE__ */ jsxRuntimeExports.jsx(Thumb, { ref: forwardedRef, ...thumbProps }) : null;
+    return forceMount || scrollbarContext.hasThumb ? /* @__PURE__ */ jsxRuntimeExports.jsx(Thumb$1, { ref: forwardedRef, ...thumbProps }) : null;
   }
 ), ScrollAreaViewport = reactExports.forwardRef(
   ({ children: children2, style: style2, ...others }, ref) => {
@@ -11659,17 +11848,17 @@ const Thumb = reactExports.forwardRef((props, forwardedRef) => {
   }
 );
 ScrollAreaViewport.displayName = "@mantine/core/ScrollAreaViewport";
-var __default__$w = { root: "m_d57069b5", viewport: "m_c0783ff9", viewportInner: "m_f8f631dd", scrollbar: "m_c44ba933", thumb: "m_d8b5e363", corner: "m_21657268" };
-const classes$u = __default__$w, defaultProps$1g = {
+var __default__$A = { root: "m_d57069b5", viewport: "m_c0783ff9", viewportInner: "m_f8f631dd", scrollbar: "m_c44ba933", thumb: "m_d8b5e363", corner: "m_21657268" };
+const classes$y = __default__$A, defaultProps$1k = {
   scrollHideDelay: 1e3,
   type: "hover",
   scrollbars: "xy"
-}, varsResolver$x = (_2, { scrollbarSize }) => ({
+}, varsResolver$B = (_2, { scrollbarSize }) => ({
   root: {
     "--scrollarea-scrollbar-size": rem(scrollbarSize)
   }
 }), ScrollArea = factory((_props, ref) => {
-  const props = useProps("ScrollArea", defaultProps$1g, _props), {
+  const props = useProps("ScrollArea", defaultProps$1k, _props), {
     classNames,
     className,
     style: style2,
@@ -11689,14 +11878,14 @@ const classes$u = __default__$w, defaultProps$1g = {
   } = props, [scrollbarHovered, setScrollbarHovered] = reactExports.useState(!1), getStyles2 = useStyles({
     name: "ScrollArea",
     props,
-    classes: classes$u,
+    classes: classes$y,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$x
+    varsResolver: varsResolver$B
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     ScrollAreaRoot,
@@ -11778,7 +11967,7 @@ const ScrollAreaAutosize = factory((props, ref) => {
     style: style2,
     vars,
     ...others
-  } = useProps("ScrollAreaAutosize", defaultProps$1g, props);
+  } = useProps("ScrollAreaAutosize", defaultProps$1k, props);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { ...others, ref, style: [{ display: "flex", overflow: "auto" }, style2], children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { style: { display: "flex", flexDirection: "column", flex: 1 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     ScrollArea,
     {
@@ -11800,16 +11989,16 @@ const ScrollAreaAutosize = factory((props, ref) => {
     }
   ) }) });
 });
-ScrollArea.classes = classes$u;
+ScrollArea.classes = classes$y;
 ScrollAreaAutosize.displayName = "@mantine/core/ScrollAreaAutosize";
-ScrollAreaAutosize.classes = classes$u;
+ScrollAreaAutosize.classes = classes$y;
 ScrollArea.Autosize = ScrollAreaAutosize;
-var __default__$v = { root: "m_87cf2631" };
-const classes$t = __default__$v, defaultProps$1f = {
+var __default__$z = { root: "m_87cf2631" };
+const classes$x = __default__$z, defaultProps$1j = {
   __staticSelector: "UnstyledButton"
 }, UnstyledButton = polymorphicFactory(
   (_props, ref) => {
-    const props = useProps("UnstyledButton", defaultProps$1f, _props), {
+    const props = useProps("UnstyledButton", defaultProps$1j, _props), {
       className,
       component = "button",
       __staticSelector,
@@ -11821,7 +12010,7 @@ const classes$t = __default__$v, defaultProps$1f = {
     } = props, getStyles2 = useStyles({
       name: __staticSelector,
       props,
-      classes: classes$t,
+      classes: classes$x,
       className,
       style: style2,
       classNames,
@@ -11840,13 +12029,13 @@ const classes$t = __default__$v, defaultProps$1f = {
     );
   }
 );
-UnstyledButton.classes = classes$t;
+UnstyledButton.classes = classes$x;
 UnstyledButton.displayName = "@mantine/core/UnstyledButton";
-var __default__$u = { root: "m_515a97f8" };
-const classes$s = __default__$u, defaultProps$1e = {}, VisuallyHidden = factory((_props, ref) => {
-  const props = useProps("VisuallyHidden", defaultProps$1e, _props), { classNames, className, style: style2, styles, unstyled, vars, ...others } = props, getStyles2 = useStyles({
+var __default__$y = { root: "m_515a97f8" };
+const classes$w = __default__$y, defaultProps$1i = {}, VisuallyHidden = factory((_props, ref) => {
+  const props = useProps("VisuallyHidden", defaultProps$1i, _props), { classNames, className, style: style2, styles, unstyled, vars, ...others } = props, getStyles2 = useStyles({
     name: "VisuallyHidden",
-    classes: classes$s,
+    classes: classes$w,
     props,
     className,
     style: style2,
@@ -11856,16 +12045,16 @@ const classes$s = __default__$u, defaultProps$1e = {}, VisuallyHidden = factory(
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { component: "span", ref, ...getStyles2("root"), ...others });
 });
-VisuallyHidden.classes = classes$s;
+VisuallyHidden.classes = classes$w;
 VisuallyHidden.displayName = "@mantine/core/VisuallyHidden";
-var __default__$t = { root: "m_1b7284a3" };
-const classes$r = __default__$t, defaultProps$1d = {}, varsResolver$w = (_2, { radius, shadow }) => ({
+var __default__$x = { root: "m_1b7284a3" };
+const classes$v = __default__$x, defaultProps$1h = {}, varsResolver$A = (_2, { radius, shadow }) => ({
   root: {
     "--paper-radius": radius === void 0 ? void 0 : getRadius$1(radius),
     "--paper-shadow": getShadow(shadow)
   }
 }), Paper = polymorphicFactory((_props, ref) => {
-  const props = useProps("Paper", defaultProps$1d, _props), {
+  const props = useProps("Paper", defaultProps$1h, _props), {
     classNames,
     className,
     style: style2,
@@ -11881,14 +12070,14 @@ const classes$r = __default__$t, defaultProps$1d = {}, varsResolver$w = (_2, { r
   } = props, getStyles2 = useStyles({
     name: "Paper",
     props,
-    classes: classes$r,
+    classes: classes$v,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$w
+    varsResolver: varsResolver$A
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box$1,
@@ -11901,7 +12090,7 @@ const classes$r = __default__$t, defaultProps$1d = {}, varsResolver$w = (_2, { r
     }
   );
 });
-Paper.classes = classes$r;
+Paper.classes = classes$v;
 Paper.displayName = "@mantine/core/Paper";
 function getNodeName(node) {
   return isNode$1(node) ? (node.nodeName || "").toLowerCase() : "#document";
@@ -12985,8 +13174,8 @@ function observeMove(element, onMove) {
       threshold: max(0, min(1, threshold)) || 1
     };
     let isFirstUpdate = !0;
-    function handleObserve(entries) {
-      const ratio = entries[0].intersectionRatio;
+    function handleObserve(entries2) {
+      const ratio = entries2[0].intersectionRatio;
       if (ratio !== threshold) {
         if (!isFirstUpdate)
           return refresh();
@@ -14085,8 +14274,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$1c = {}, Portal = reactExports.forwardRef((props, ref) => {
-  const { children: children2, target, ...others } = useProps("Portal", defaultProps$1c, props), [mounted, setMounted] = reactExports.useState(!1), nodeRef = reactExports.useRef(null);
+const defaultProps$1g = {}, Portal = reactExports.forwardRef((props, ref) => {
+  const { children: children2, target, ...others } = useProps("Portal", defaultProps$1g, props), [mounted, setMounted] = reactExports.useState(!1), nodeRef = reactExports.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 : reactDomExports.createPortal(/* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children2 }), nodeRef.current);
@@ -14312,9 +14501,9 @@ function Transition$1({
   ) });
 }
 Transition$1.displayName = "@mantine/core/Transition";
-var __default__$s = { dropdown: "m_38a85659", arrow: "m_a31dc6c1" };
-const classes$q = __default__$s, defaultProps$1b = {}, PopoverDropdown = factory((_props, ref) => {
-  const props = useProps("PopoverDropdown", defaultProps$1b, _props), {
+var __default__$w = { dropdown: "m_38a85659", arrow: "m_a31dc6c1" };
+const classes$u = __default__$w, defaultProps$1f = {}, PopoverDropdown = factory((_props, ref) => {
+  const props = useProps("PopoverDropdown", defaultProps$1f, _props), {
     className,
     style: style2,
     vars,
@@ -14398,15 +14587,15 @@ const classes$q = __default__$s, defaultProps$1b = {}, PopoverDropdown = factory
     }
   ) });
 });
-PopoverDropdown.classes = classes$q;
+PopoverDropdown.classes = classes$u;
 PopoverDropdown.displayName = "@mantine/core/PopoverDropdown";
-const defaultProps$1a = {
+const defaultProps$1e = {
   refProp: "ref",
   popupType: "dialog"
 }, PopoverTarget = factory((props, ref) => {
   const { children: children2, refProp, popupType, ...others } = useProps(
     "PopoverTarget",
-    defaultProps$1a,
+    defaultProps$1e,
     props
   );
   if (!isElement$1(children2))
@@ -14518,7 +14707,7 @@ function usePopover(options) {
     onToggle
   };
 }
-const defaultProps$19 = {
+const defaultProps$1d = {
   position: "bottom",
   offset: 8,
   positionDependencies: [],
@@ -14538,14 +14727,14 @@ const defaultProps$19 = {
   zIndex: getDefaultZIndex("popover"),
   __staticSelector: "Popover",
   width: "max-content"
-}, varsResolver$v = (_2, { radius, shadow }) => ({
+}, varsResolver$z = (_2, { radius, shadow }) => ({
   dropdown: {
     "--popover-radius": radius === void 0 ? void 0 : getRadius$1(radius),
     "--popover-shadow": getShadow(shadow)
   }
 });
 function Popover(_props) {
-  const props = useProps("Popover", defaultProps$19, _props), {
+  const props = useProps("Popover", defaultProps$1d, _props), {
     children: children2,
     position,
     offset: offset2,
@@ -14589,13 +14778,13 @@ function Popover(_props) {
   } = props, getStyles2 = useStyles({
     name: __staticSelector,
     props,
-    classes: classes$q,
+    classes: classes$u,
     classNames,
     styles,
     unstyled,
     rootSelector: "dropdown",
     vars,
-    varsResolver: varsResolver$v
+    varsResolver: varsResolver$z
   }), arrowRef = reactExports.useRef(null), [targetNode, setTargetNode] = reactExports.useState(null), [dropdownNode, setDropdownNode] = reactExports.useState(null), { dir } = useDirection(), uid = useId$1(id2), popover = usePopover({
     middlewares,
     width,
@@ -14679,29 +14868,29 @@ Popover.Target = PopoverTarget;
 Popover.Dropdown = PopoverDropdown;
 Popover.displayName = "@mantine/core/Popover";
 Popover.extend = (input) => input;
-var __default__$r = { root: "m_5ae2e3c", barsLoader: "m_7a2bd4cd", bar: "m_870bb79", "bars-loader-animation": "m_5d2b3b9d", dotsLoader: "m_4e3f22d7", dot: "m_870c4af", "loader-dots-animation": "m_aac34a1", ovalLoader: "m_b34414df", "oval-loader-animation": "m_f8e89c4b" };
-const classes$p = __default__$r, Bars = reactExports.forwardRef(({ className, ...others }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Box$1, { component: "span", className: clsx$1(classes$p.barsLoader, className), ...others, ref, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$p.bar }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$p.bar }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$p.bar })
-] })), Dots = reactExports.forwardRef(({ className, ...others }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Box$1, { component: "span", className: clsx$1(classes$p.dotsLoader, className), ...others, ref, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$p.dot }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$p.dot }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$p.dot })
-] })), Oval = reactExports.forwardRef(({ className, ...others }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { component: "span", className: clsx$1(classes$p.ovalLoader, className), ...others, ref })), defaultLoaders = {
+var __default__$v = { root: "m_5ae2e3c", barsLoader: "m_7a2bd4cd", bar: "m_870bb79", "bars-loader-animation": "m_5d2b3b9d", dotsLoader: "m_4e3f22d7", dot: "m_870c4af", "loader-dots-animation": "m_aac34a1", ovalLoader: "m_b34414df", "oval-loader-animation": "m_f8e89c4b" };
+const classes$t = __default__$v, Bars = reactExports.forwardRef(({ className, ...others }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Box$1, { component: "span", className: clsx$1(classes$t.barsLoader, className), ...others, ref, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$t.bar }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$t.bar }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$t.bar })
+] })), Dots = reactExports.forwardRef(({ className, ...others }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Box$1, { component: "span", className: clsx$1(classes$t.dotsLoader, className), ...others, ref, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$t.dot }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$t.dot }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes$t.dot })
+] })), Oval = reactExports.forwardRef(({ className, ...others }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { component: "span", className: clsx$1(classes$t.ovalLoader, className), ...others, ref })), defaultLoaders = {
   bars: Bars,
   oval: Oval,
   dots: Dots
-}, defaultProps$18 = {
+}, defaultProps$1c = {
   loaders: defaultLoaders,
   type: "oval"
-}, varsResolver$u = (theme2, { size: size2, color: color2 }) => ({
+}, varsResolver$y = (theme2, { size: size2, color: color2 }) => ({
   root: {
     "--loader-size": getSize(size2, "loader-size"),
     "--loader-color": color2 ? getThemeColor(color2, theme2) : void 0
   }
 }), Loader = factory((_props, ref) => {
-  const props = useProps("Loader", defaultProps$18, _props), {
+  const props = useProps("Loader", defaultProps$1c, _props), {
     size: size2,
     color: color2,
     type,
@@ -14718,14 +14907,14 @@ const classes$p = __default__$r, Bars = reactExports.forwardRef(({ className, ..
   } = props, getStyles2 = useStyles({
     name: "Loader",
     props,
-    classes: classes$p,
+    classes: classes$t,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$u
+    varsResolver: varsResolver$y
   });
   return children2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { ...getStyles2("root"), ref, ...others, children: children2 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box$1,
@@ -14740,15 +14929,15 @@ const classes$p = __default__$r, Bars = reactExports.forwardRef(({ className, ..
   );
 });
 Loader.defaultLoaders = defaultLoaders;
-Loader.classes = classes$p;
+Loader.classes = classes$t;
 Loader.displayName = "@mantine/core/Loader";
-var __default__$q = { root: "m_8d3f4000", icon: "m_8d3afb97", loader: "m_302b9fb1", group: "m_1a0f1b21" };
-const classes$o = __default__$q, defaultProps$17 = {
+var __default__$u = { root: "m_8d3f4000", icon: "m_8d3afb97", loader: "m_302b9fb1", group: "m_1a0f1b21" };
+const classes$s = __default__$u, defaultProps$1b = {
   orientation: "horizontal"
-}, varsResolver$t = (_2, { borderWidth }) => ({
+}, varsResolver$x = (_2, { borderWidth }) => ({
   group: { "--ai-border-width": rem(borderWidth) }
 }), ActionIconGroup = factory((_props, ref) => {
-  const props = useProps("ActionIconGroup", defaultProps$17, _props), {
+  const props = useProps("ActionIconGroup", defaultProps$1b, _props), {
     className,
     style: style2,
     classNames,
@@ -14760,17 +14949,17 @@ const classes$o = __default__$q, defaultProps$17 = {
     variant,
     mod,
     ...others
-  } = useProps("ActionIconGroup", defaultProps$17, _props), getStyles2 = useStyles({
+  } = useProps("ActionIconGroup", defaultProps$1b, _props), getStyles2 = useStyles({
     name: "ActionIconGroup",
     props,
-    classes: classes$o,
+    classes: classes$s,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$t,
+    varsResolver: varsResolver$x,
     rootSelector: "group"
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -14785,9 +14974,9 @@ const classes$o = __default__$q, defaultProps$17 = {
     }
   );
 });
-ActionIconGroup.classes = classes$o;
+ActionIconGroup.classes = classes$s;
 ActionIconGroup.displayName = "@mantine/core/ActionIconGroup";
-const defaultProps$16 = {}, varsResolver$s = (theme2, { size: size2, radius, variant, gradient, color: color2, autoContrast }) => {
+const defaultProps$1a = {}, varsResolver$w = (theme2, { size: size2, radius, variant, gradient, color: color2, autoContrast }) => {
   const colors2 = theme2.variantColorResolver({
     color: color2 || theme2.primaryColor,
     theme: theme2,
@@ -14807,7 +14996,7 @@ const defaultProps$16 = {}, varsResolver$s = (theme2, { size: size2, radius, var
     }
   };
 }, ActionIcon = polymorphicFactory((_props, ref) => {
-  const props = useProps("ActionIcon", defaultProps$16, _props), {
+  const props = useProps("ActionIcon", defaultProps$1a, _props), {
     className,
     unstyled,
     variant,
@@ -14833,12 +15022,12 @@ const defaultProps$16 = {}, varsResolver$s = (theme2, { size: size2, radius, var
     props,
     className,
     style: style2,
-    classes: classes$o,
+    classes: classes$s,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$s
+    varsResolver: varsResolver$w
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     UnstyledButton,
@@ -14858,7 +15047,7 @@ const defaultProps$16 = {}, varsResolver$s = (theme2, { size: size2, radius, var
     }
   );
 });
-ActionIcon.classes = classes$o;
+ActionIcon.classes = classes$s;
 ActionIcon.displayName = "@mantine/core/ActionIcon";
 ActionIcon.Group = ActionIconGroup;
 const CloseIcon = reactExports.forwardRef(
@@ -14884,17 +15073,17 @@ const CloseIcon = reactExports.forwardRef(
   )
 );
 CloseIcon.displayName = "@mantine/core/CloseIcon";
-var __default__$p = { root: "m_86a44da5", "root--subtle": "m_220c80f2" };
-const classes$n = __default__$p, defaultProps$15 = {
+var __default__$t = { root: "m_86a44da5", "root--subtle": "m_220c80f2" };
+const classes$r = __default__$t, defaultProps$19 = {
   variant: "subtle"
-}, varsResolver$r = (_2, { size: size2, radius, iconSize }) => ({
+}, varsResolver$v = (_2, { size: size2, radius, iconSize }) => ({
   root: {
     "--cb-size": getSize(size2, "cb-size"),
     "--cb-radius": radius === void 0 ? void 0 : getRadius$1(radius),
     "--cb-icon-size": rem(iconSize)
   }
 }), CloseButton = polymorphicFactory((_props, ref) => {
-  const props = useProps("CloseButton", defaultProps$15, _props), {
+  const props = useProps("CloseButton", defaultProps$19, _props), {
     iconSize,
     children: children2,
     vars,
@@ -14915,12 +15104,12 @@ const classes$n = __default__$p, defaultProps$15 = {
     props,
     className,
     style: style2,
-    classes: classes$n,
+    classes: classes$r,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$r
+    varsResolver: varsResolver$v
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     UnstyledButton,
@@ -14939,19 +15128,19 @@ const classes$n = __default__$p, defaultProps$15 = {
     }
   );
 });
-CloseButton.classes = classes$n;
+CloseButton.classes = classes$r;
 CloseButton.displayName = "@mantine/core/CloseButton";
 function filterFalsyChildren(children2) {
   return reactExports.Children.toArray(children2).filter(Boolean);
 }
-var __default__$o = { root: "m_4081bf90" };
-const classes$m = __default__$o, defaultProps$14 = {
+var __default__$s = { root: "m_4081bf90" };
+const classes$q = __default__$s, defaultProps$18 = {
   preventGrowOverflow: !0,
   gap: "md",
   align: "center",
   justify: "flex-start",
   wrap: "wrap"
-}, varsResolver$q = (_2, { grow, preventGrowOverflow, gap, align, justify, wrap }, { childWidth }) => ({
+}, varsResolver$u = (_2, { grow, preventGrowOverflow, gap, align, justify, wrap }, { childWidth }) => ({
   root: {
     "--group-child-width": grow && preventGrowOverflow ? childWidth : void 0,
     "--group-gap": getSpacing(gap),
@@ -14960,7 +15149,7 @@ const classes$m = __default__$o, defaultProps$14 = {
     "--group-wrap": wrap
   }
 }), Group = factory((_props, ref) => {
-  const props = useProps("Group", defaultProps$14, _props), {
+  const props = useProps("Group", defaultProps$18, _props), {
     classNames,
     className,
     style: style2,
@@ -14984,12 +15173,12 @@ const classes$m = __default__$o, defaultProps$14 = {
     stylesCtx,
     className,
     style: style2,
-    classes: classes$m,
+    classes: classes$q,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$q
+    varsResolver: varsResolver$u
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box$1,
@@ -15004,12 +15193,12 @@ const classes$m = __default__$o, defaultProps$14 = {
     }
   );
 });
-Group.classes = classes$m;
+Group.classes = classes$q;
 Group.displayName = "@mantine/core/Group";
-var __default__$n = { root: "m_9814e45f" };
-const classes$l = __default__$n, defaultProps$13 = {
+var __default__$r = { root: "m_9814e45f" };
+const classes$p = __default__$r, defaultProps$17 = {
   zIndex: getDefaultZIndex("modal")
-}, varsResolver$p = (_2, { gradient, color: color2, backgroundOpacity, blur, radius, zIndex }) => ({
+}, varsResolver$t = (_2, { gradient, color: color2, backgroundOpacity, blur, radius, zIndex }) => ({
   root: {
     "--overlay-bg": gradient || (color2 !== void 0 || backgroundOpacity !== void 0) && rgba$2(color2 || "#000", backgroundOpacity ?? 0.6) || void 0,
     "--overlay-filter": blur ? `blur(${rem(blur)})` : void 0,
@@ -15017,7 +15206,7 @@ const classes$l = __default__$n, defaultProps$13 = {
     "--overlay-z-index": zIndex?.toString()
   }
 }), Overlay = polymorphicFactory((_props, ref) => {
-  const props = useProps("Overlay", defaultProps$13, _props), {
+  const props = useProps("Overlay", defaultProps$17, _props), {
     classNames,
     className,
     style: style2,
@@ -15038,18 +15227,18 @@ const classes$l = __default__$n, defaultProps$13 = {
   } = props, getStyles2 = useStyles({
     name: "Overlay",
     props,
-    classes: classes$l,
+    classes: classes$p,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$p
+    varsResolver: varsResolver$t
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { ref, ...getStyles2("root"), mod: [{ center, fixed }, mod], ...others, children: children2 });
 });
-Overlay.classes = classes$l;
+Overlay.classes = classes$p;
 Overlay.displayName = "@mantine/core/Overlay";
 const [ModalBaseProvider, useModalBaseContext] = createSafeContext(
   "ModalBase component was not found in tree"
@@ -15148,7 +15337,7 @@ function useModalBodyId() {
   const ctx = useModalBaseContext();
   return reactExports.useEffect(() => (ctx.setBodyMounted(!0), () => ctx.setBodyMounted(!1)), []), ctx.getBodyId();
 }
-var __default__$m = { title: "m_615af6c9", header: "m_b5489c3c", inner: "m_60c222c7", content: "m_fd1ab0aa", close: "m_606cb269", body: "m_5df29311" };
+var __default__$q = { title: "m_615af6c9", header: "m_b5489c3c", inner: "m_60c222c7", content: "m_fd1ab0aa", close: "m_606cb269", body: "m_5df29311" };
 const ModalBaseBody = reactExports.forwardRef(
   ({ className, ...others }, ref) => {
     const bodyId = useModalBodyId(), ctx = useModalBaseContext();
@@ -15158,7 +15347,7 @@ const ModalBaseBody = reactExports.forwardRef(
         ref,
         ...others,
         id: bodyId,
-        className: clsx$1({ [__default__$m.body]: !ctx.unstyled }, className)
+        className: clsx$1({ [__default__$q.body]: !ctx.unstyled }, className)
       }
     );
   }
@@ -15175,7 +15364,7 @@ const ModalBaseCloseButton = reactExports.forwardRef(
         onClick: (event) => {
           ctx.onClose(), onClick?.(event);
         },
-        className: clsx$1({ [__default__$m.close]: !ctx.unstyled }, className),
+        className: clsx$1({ [__default__$q.close]: !ctx.unstyled }, className),
         unstyled: ctx.unstyled
       }
     );
@@ -15196,7 +15385,7 @@ const ModalBaseContent = reactExports.forwardRef(
           "div",
           {
             ...innerProps,
-            className: clsx$1({ [__default__$m.inner]: !ctx.unstyled }, innerProps.className),
+            className: clsx$1({ [__default__$q.inner]: !ctx.unstyled }, innerProps.className),
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(FocusTrap, { active: ctx.opened && ctx.trapFocus, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               Paper,
               {
@@ -15209,7 +15398,7 @@ const ModalBaseContent = reactExports.forwardRef(
                 "aria-labelledby": ctx.titleMounted ? ctx.getTitleId() : void 0,
                 ref,
                 style: [style2, transitionStyles],
-                className: clsx$1({ [__default__$m.content]: !ctx.unstyled }, className),
+                className: clsx$1({ [__default__$q.content]: !ctx.unstyled }, className),
                 unstyled: ctx.unstyled,
                 children: others.children
               }
@@ -15227,7 +15416,7 @@ const ModalBaseContent = reactExports.forwardRef(
       {
         component: "header",
         ref,
-        className: clsx$1({ [__default__$m.header]: !ctx.unstyled }, className),
+        className: clsx$1({ [__default__$q.header]: !ctx.unstyled }, className),
         ...others
       }
     );
@@ -15275,7 +15464,7 @@ const ModalBaseTitle = reactExports.forwardRef(
       {
         component: "h2",
         ref,
-        className: clsx$1({ [__default__$m.title]: !ctx.unstyled }, className),
+        className: clsx$1({ [__default__$q.title]: !ctx.unstyled }, className),
         ...others,
         id: id2
       }
@@ -15294,13 +15483,13 @@ const [InputWrapperProvider, useInputWrapperContext] = createOptionalContext({
   inputId: void 0,
   labelId: void 0
 });
-var __default__$l = { 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$k = __default__$l, defaultProps$12 = {}, varsResolver$o = (_2, { size: size2 }) => ({
+var __default__$p = { 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$o = __default__$p, defaultProps$16 = {}, varsResolver$s = (_2, { 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$12, _props), {
+  const props = useProps("InputDescription", defaultProps$16, _props), {
     classNames,
     className,
     style: style2,
@@ -15312,10 +15501,10 @@ const classes$k = __default__$l, defaultProps$12 = {}, varsResolver$o = (_2, { s
     __inheritStyles = !0,
     variant,
     ...others
-  } = useProps("InputDescription", defaultProps$12, props), ctx = useInputWrapperContext(), _getStyles = useStyles({
+  } = useProps("InputDescription", defaultProps$16, props), ctx = useInputWrapperContext(), _getStyles = useStyles({
     name: ["InputWrapper", __staticSelector],
     props,
-    classes: classes$k,
+    classes: classes$o,
     className,
     style: style2,
     classNames,
@@ -15323,7 +15512,7 @@ const classes$k = __default__$l, defaultProps$12 = {}, varsResolver$o = (_2, { s
     unstyled,
     rootSelector: "description",
     vars,
-    varsResolver: varsResolver$o
+    varsResolver: varsResolver$s
   }), getStyles2 = __inheritStyles && ctx?.getStyles || _getStyles;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box$1,
@@ -15337,14 +15526,14 @@ const classes$k = __default__$l, defaultProps$12 = {}, varsResolver$o = (_2, { s
     }
   );
 });
-InputDescription.classes = classes$k;
+InputDescription.classes = classes$o;
 InputDescription.displayName = "@mantine/core/InputDescription";
-const defaultProps$11 = {}, varsResolver$n = (_2, { size: size2 }) => ({
+const defaultProps$15 = {}, varsResolver$r = (_2, { 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$11, _props), {
+  const props = useProps("InputError", defaultProps$15, _props), {
     classNames,
     className,
     style: style2,
@@ -15359,7 +15548,7 @@ const defaultProps$11 = {}, varsResolver$n = (_2, { size: size2 }) => ({
   } = props, _getStyles = useStyles({
     name: ["InputWrapper", __staticSelector],
     props,
-    classes: classes$k,
+    classes: classes$o,
     className,
     style: style2,
     classNames,
@@ -15367,7 +15556,7 @@ const defaultProps$11 = {}, varsResolver$n = (_2, { size: size2 }) => ({
     unstyled,
     rootSelector: "error",
     vars,
-    varsResolver: varsResolver$n
+    varsResolver: varsResolver$r
   }), ctx = useInputWrapperContext(), getStyles2 = __inheritStyles && ctx?.getStyles || _getStyles;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box$1,
@@ -15381,17 +15570,17 @@ const defaultProps$11 = {}, varsResolver$n = (_2, { size: size2 }) => ({
     }
   );
 });
-InputError.classes = classes$k;
+InputError.classes = classes$o;
 InputError.displayName = "@mantine/core/InputError";
-const defaultProps$10 = {
+const defaultProps$14 = {
   labelElement: "label"
-}, varsResolver$m = (_2, { size: size2 }) => ({
+}, varsResolver$q = (_2, { size: size2 }) => ({
   label: {
     "--input-label-size": getFontSize(size2),
     "--input-asterisk-color": void 0
   }
 }), InputLabel = factory((_props, ref) => {
-  const props = useProps("InputLabel", defaultProps$10, _props), {
+  const props = useProps("InputLabel", defaultProps$14, _props), {
     classNames,
     className,
     style: style2,
@@ -15408,10 +15597,10 @@ const defaultProps$10 = {
     variant,
     mod,
     ...others
-  } = useProps("InputLabel", defaultProps$10, props), _getStyles = useStyles({
+  } = useProps("InputLabel", defaultProps$14, props), _getStyles = useStyles({
     name: ["InputWrapper", __staticSelector],
     props,
-    classes: classes$k,
+    classes: classes$o,
     className,
     style: style2,
     classNames,
@@ -15419,7 +15608,7 @@ const defaultProps$10 = {
     unstyled,
     rootSelector: "label",
     vars,
-    varsResolver: varsResolver$m
+    varsResolver: varsResolver$q
   }), ctx = useInputWrapperContext(), getStyles2 = ctx?.getStyles || _getStyles;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Box$1,
@@ -15442,10 +15631,10 @@ const defaultProps$10 = {
     }
   );
 });
-InputLabel.classes = classes$k;
+InputLabel.classes = classes$o;
 InputLabel.displayName = "@mantine/core/InputLabel";
-const defaultProps$$ = {}, InputPlaceholder = factory((_props, ref) => {
-  const props = useProps("InputPlaceholder", defaultProps$$, _props), {
+const defaultProps$13 = {}, InputPlaceholder = factory((_props, ref) => {
+  const props = useProps("InputPlaceholder", defaultProps$13, _props), {
     classNames,
     className,
     style: style2,
@@ -15457,10 +15646,10 @@ const defaultProps$$ = {}, InputPlaceholder = factory((_props, ref) => {
     error,
     mod,
     ...others
-  } = useProps("InputPlaceholder", defaultProps$$, props), getStyles2 = useStyles({
+  } = useProps("InputPlaceholder", defaultProps$13, props), getStyles2 = useStyles({
     name: ["InputPlaceholder", __staticSelector],
     props,
-    classes: classes$k,
+    classes: classes$o,
     className,
     style: style2,
     classNames,
@@ -15480,17 +15669,17 @@ const defaultProps$$ = {}, InputPlaceholder = factory((_props, ref) => {
     }
   );
 });
-InputPlaceholder.classes = classes$k;
+InputPlaceholder.classes = classes$o;
 InputPlaceholder.displayName = "@mantine/core/InputPlaceholder";
 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$_ = {
+const defaultProps$12 = {
   labelElement: "label",
   inputContainer: (children2) => children2,
   inputWrapperOrder: ["label", "description", "input", "error"]
-}, varsResolver$l = (_2, { size: size2 }) => ({
+}, varsResolver$p = (_2, { size: size2 }) => ({
   label: {
     "--input-label-size": getFontSize(size2),
     "--input-asterisk-color": void 0
@@ -15502,7 +15691,7 @@ const defaultProps$_ = {
     "--input-description-size": size2 === void 0 ? void 0 : `calc(${getFontSize(size2)} - ${rem(2)})`
   }
 }), InputWrapper = factory((_props, ref) => {
-  const props = useProps("InputWrapper", defaultProps$_, _props), {
+  const props = useProps("InputWrapper", defaultProps$12, _props), {
     classNames,
     className,
     style: style2,
@@ -15531,14 +15720,14 @@ const defaultProps$_ = {
   } = props, getStyles2 = useStyles({
     name: ["InputWrapper", __staticSelector],
     props: __stylesApiProps || props,
-    classes: classes$k,
+    classes: classes$o,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$l
+    varsResolver: varsResolver$p
   }), sharedProps = {
     size: size2,
     variant,
@@ -15614,15 +15803,15 @@ const defaultProps$_ = {
     }
   );
 });
-InputWrapper.classes = classes$k;
+InputWrapper.classes = classes$o;
 InputWrapper.displayName = "@mantine/core/InputWrapper";
-const defaultProps$Z = {
+const defaultProps$11 = {
   variant: "default",
   leftSectionPointerEvents: "none",
   rightSectionPointerEvents: "none",
   withAria: !0,
   withErrorStyles: !0
-}, varsResolver$k = (_2, props, ctx) => ({
+}, varsResolver$o = (_2, 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,
@@ -15636,7 +15825,7 @@ const defaultProps$Z = {
     "--input-right-section-pointer-events": props.rightSectionPointerEvents
   }
 }), Input = polymorphicFactory((_props, ref) => {
-  const props = useProps("Input", defaultProps$Z, _props), {
+  const props = useProps("Input", defaultProps$11, _props), {
     classNames,
     className,
     style: style2,
@@ -15670,7 +15859,7 @@ const defaultProps$Z = {
   } = props, { styleProps, rest } = extractStyleProps(others), ctx = useInputWrapperContext(), stylesCtx = { offsetBottom: ctx?.offsetBottom, offsetTop: ctx?.offsetTop }, getStyles2 = useStyles({
     name: ["Input", __staticSelector],
     props: __stylesApiProps || props,
-    classes: classes$k,
+    classes: classes$o,
     className,
     style: style2,
     classNames,
@@ -15679,7 +15868,7 @@ const defaultProps$Z = {
     stylesCtx,
     rootSelector: "wrapper",
     vars,
-    varsResolver: varsResolver$k
+    varsResolver: varsResolver$o
   }), ariaAttributes = withAria ? {
     required,
     disabled,
@@ -15748,7 +15937,7 @@ const defaultProps$Z = {
     }
   );
 });
-Input.classes = classes$k;
+Input.classes = classes$o;
 Input.Wrapper = InputWrapper;
 Input.Label = InputLabel;
 Input.Error = InputError;
@@ -15825,11 +16014,11 @@ function useInputProps(component, defaultProps2, _props) {
     }
   };
 }
-const defaultProps$Y = {
+const defaultProps$10 = {
   __staticSelector: "InputBase",
   withAria: !0
 }, InputBase = polymorphicFactory((props, ref) => {
-  const { inputProps, wrapperProps, ...others } = useInputProps("InputBase", defaultProps$Y, props);
+  const { inputProps, wrapperProps, ...others } = useInputProps("InputBase", defaultProps$10, props);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Input.Wrapper, { ...wrapperProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { ...inputProps, ...others, ref }) });
 });
 InputBase.classes = { ...Input.classes, ...Input.Wrapper.classes };
@@ -15843,9 +16032,9 @@ const FLEX_STYLE_PROPS_DATA = {
   wrap: { type: "identity", property: "flexWrap" },
   direction: { type: "identity", property: "flexDirection" }
 };
-var __default__$k = { root: "m_8bffd616" };
-const classes$j = __default__$k, defaultProps$X = {}, Flex$1 = polymorphicFactory((_props, ref) => {
-  const props = useProps("Flex", defaultProps$X, _props), {
+var __default__$o = { root: "m_8bffd616" };
+const classes$n = __default__$o, defaultProps$$ = {}, Flex$1 = polymorphicFactory((_props, ref) => {
+  const props = useProps("Flex", defaultProps$$, _props), {
     classNames,
     className,
     style: style2,
@@ -15862,7 +16051,7 @@ const classes$j = __default__$k, defaultProps$X = {}, Flex$1 = polymorphicFactor
     ...others
   } = props, getStyles2 = useStyles({
     name: "Flex",
-    classes: classes$j,
+    classes: classes$n,
     props,
     className,
     style: style2,
@@ -15897,10 +16086,114 @@ const classes$j = __default__$k, defaultProps$X = {}, Flex$1 = polymorphicFactor
     )
   ] });
 });
-Flex$1.classes = classes$j;
+Flex$1.classes = classes$n;
 Flex$1.displayName = "@mantine/core/Flex";
-var __default__$j = { 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$i = __default__$j, defaultProps$W = {}, varsResolver$j = (theme2, { radius, color: color2, variant, autoContrast }) => {
+function isParent(parentElement, childElement) {
+  if (!childElement || !parentElement)
+    return !1;
+  let parent = childElement.parentNode;
+  for (; parent != null; ) {
+    if (parent === parentElement)
+      return !0;
+    parent = parent.parentNode;
+  }
+  return !1;
+}
+function useFloatingIndicator({
+  target,
+  parent,
+  ref,
+  displayAfterTransitionEnd
+}) {
+  const transitionTimeout = reactExports.useRef(), [initialized, setInitialized] = reactExports.useState(!1), [hidden2, setHidden] = reactExports.useState(
+    typeof displayAfterTransitionEnd == "boolean" ? displayAfterTransitionEnd : !1
+  ), updatePosition = () => {
+    if (!target || !parent)
+      return;
+    const targetRect = target.getBoundingClientRect(), parentRect = parent.getBoundingClientRect(), position = {
+      top: targetRect.top - parentRect.top,
+      left: targetRect.left - parentRect.left,
+      width: targetRect.width,
+      height: targetRect.height
+    };
+    ref.current && (ref.current.style.transform = `translateY(${position.top}px) translateX(${position.left}px)`, ref.current.style.width = `${position.width}px`, ref.current.style.height = `${position.height}px`);
+  }, updatePositionWithoutAnimation = () => {
+    window.clearTimeout(transitionTimeout.current), ref.current && (ref.current.style.transitionDuration = "0ms"), updatePosition(), transitionTimeout.current = window.setTimeout(() => {
+      ref.current && (ref.current.style.transitionDuration = "");
+    }, 30);
+  }, targetResizeObserver = reactExports.useRef(), parentResizeObserver = reactExports.useRef();
+  return reactExports.useEffect(() => {
+    if (updatePosition(), target)
+      return targetResizeObserver.current = new ResizeObserver(updatePositionWithoutAnimation), targetResizeObserver.current.observe(target), parent && (parentResizeObserver.current = new ResizeObserver(updatePositionWithoutAnimation), parentResizeObserver.current.observe(parent)), () => {
+        targetResizeObserver.current?.disconnect(), parentResizeObserver.current?.disconnect();
+      };
+  }, [parent, target]), reactExports.useEffect(() => {
+    if (parent) {
+      const handleTransitionEnd = (event) => {
+        isParent(event.target, parent) && (updatePositionWithoutAnimation(), setHidden(!1));
+      };
+      return document.addEventListener("transitionend", handleTransitionEnd), () => {
+        document.removeEventListener("transitionend", handleTransitionEnd);
+      };
+    }
+  }, [parent]), useTimeout(
+    () => {
+      getEnv() !== "test" && setInitialized(!0);
+    },
+    20,
+    { autoInvoke: !0 }
+  ), useMutationObserver(
+    (mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.type === "attributes" && mutation.attributeName === "dir" && updatePositionWithoutAnimation();
+      });
+    },
+    { attributes: !0, attributeFilter: ["dir"] },
+    () => document.documentElement
+  ), { initialized, hidden: hidden2 };
+}
+var __default__$n = { root: "m_96b553a6" };
+const classes$m = __default__$n, defaultProps$_ = {}, varsResolver$n = (_theme, { transitionDuration }) => ({
+  root: {
+    "--transition-duration": typeof transitionDuration == "number" ? `${transitionDuration}ms` : transitionDuration
+  }
+}), FloatingIndicator = factory((_props, ref) => {
+  const props = useProps("FloatingIndicator", defaultProps$_, _props), {
+    classNames,
+    className,
+    style: style2,
+    styles,
+    unstyled,
+    vars,
+    target,
+    parent,
+    transitionDuration,
+    mod,
+    displayAfterTransitionEnd,
+    ...others
+  } = props, getStyles2 = useStyles({
+    name: "FloatingIndicator",
+    classes: classes$m,
+    props,
+    className,
+    style: style2,
+    classNames,
+    styles,
+    unstyled,
+    vars,
+    varsResolver: varsResolver$n
+  }), innerRef = reactExports.useRef(null), { initialized, hidden: hidden2 } = useFloatingIndicator({
+    target,
+    parent,
+    ref: innerRef,
+    displayAfterTransitionEnd
+  }), mergedRef = useMergedRef(ref, innerRef);
+  return !target || !parent ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { ref: mergedRef, mod: [{ initialized, hidden: hidden2 }, mod], ...getStyles2("root"), ...others });
+});
+FloatingIndicator.displayName = "@mantine/core/FloatingIndicator";
+FloatingIndicator.classes = classes$m;
+var __default__$m = { 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$l = __default__$m, defaultProps$Z = {}, varsResolver$m = (theme2, { radius, color: color2, variant, autoContrast }) => {
   const colors2 = theme2.variantColorResolver({
     color: color2 || theme2.primaryColor,
     theme: theme2,
@@ -15916,7 +16209,7 @@ const classes$i = __default__$j, defaultProps$W = {}, varsResolver$j = (theme2,
     }
   };
 }, Alert = factory((_props, ref) => {
-  const props = useProps("Alert", defaultProps$W, _props), {
+  const props = useProps("Alert", defaultProps$Z, _props), {
     classNames,
     className,
     style: style2,
@@ -15937,7 +16230,7 @@ const classes$i = __default__$j, defaultProps$W = {}, varsResolver$j = (theme2,
     ...others
   } = props, getStyles2 = useStyles({
     name: "Alert",
-    classes: classes$i,
+    classes: classes$l,
     props,
     className,
     style: style2,
@@ -15945,7 +16238,7 @@ const classes$i = __default__$j, defaultProps$W = {}, varsResolver$j = (theme2,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$j
+    varsResolver: varsResolver$m
   }), rootId = useId$1(id2), titleId = title2 && `${rootId}-title` || void 0, bodyId = `${rootId}-body`;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box$1,
@@ -15980,19 +16273,19 @@ const classes$i = __default__$j, defaultProps$W = {}, varsResolver$j = (theme2,
     }
   );
 });
-Alert.classes = classes$i;
+Alert.classes = classes$l;
 Alert.displayName = "@mantine/core/Alert";
-var __default__$i = { root: "m_b6d8b162" };
-const classes$h = __default__$i;
+var __default__$l = { root: "m_b6d8b162" };
+const classes$k = __default__$l;
 function getTextTruncate(truncate) {
   if (truncate === "start")
     return "start";
   if (truncate === "end" || truncate)
     return "end";
 }
-const defaultProps$V = {
+const defaultProps$Y = {
   inherit: !1
-}, varsResolver$i = (theme2, { variant, lineClamp, gradient, size: size2, color: color2 }) => ({
+}, varsResolver$l = (theme2, { variant, lineClamp, gradient, size: size2, color: color2 }) => ({
   root: {
     "--text-fz": getFontSize(size2),
     "--text-lh": getLineHeight(size2),
@@ -16001,7 +16294,7 @@ const defaultProps$V = {
     "--text-color": color2 ? getThemeColor(color2, theme2) : void 0
   }
 }), Text$1 = polymorphicFactory((_props, ref) => {
-  const props = useProps("Text", defaultProps$V, _props), {
+  const props = useProps("Text", defaultProps$Y, _props), {
     lineClamp,
     truncate,
     inline: inline2,
@@ -16022,14 +16315,14 @@ const defaultProps$V = {
   } = props, getStyles2 = useStyles({
     name: ["Text", __staticSelector],
     props,
-    classes: classes$h,
+    classes: classes$k,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$i
+    varsResolver: varsResolver$l
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box$1,
@@ -16052,15 +16345,15 @@ const defaultProps$V = {
     }
   );
 });
-Text$1.classes = classes$h;
+Text$1.classes = classes$k;
 Text$1.displayName = "@mantine/core/Text";
-var __default__$h = { root: "m_849cf0da" };
-const defaultProps$U = {
+var __default__$k = { root: "m_849cf0da" };
+const defaultProps$X = {
   underline: "hover"
 }, Anchor = polymorphicFactory((props, ref) => {
   const { underline, className, unstyled, mod, ...others } = useProps(
     "Anchor",
-    defaultProps$U,
+    defaultProps$X,
     props
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16068,7 +16361,7 @@ const defaultProps$U = {
     {
       component: "a",
       ref,
-      className: clsx$1({ [__default__$h.root]: !unstyled }, className),
+      className: clsx$1({ [__default__$k.root]: !unstyled }, className),
       ...others,
       mod: [{ underline }, mod],
       __staticSelector: "Anchor",
@@ -16076,7 +16369,7 @@ const defaultProps$U = {
     }
   );
 });
-Anchor.classes = __default__$h;
+Anchor.classes = __default__$k;
 Anchor.displayName = "@mantine/core/Anchor";
 function parseItem(item) {
   return typeof item == "string" ? { value: item, label: item } : "value" in item && !("label" in item) ? { value: item.value, label: item.value, disabled: item.disabled } : typeof item == "number" ? { value: item.toString(), label: item.toString() } : "group" in item ? {
@@ -16090,17 +16383,17 @@ function getParsedComboboxData(data) {
 function getOptionsLockup(options) {
   return options.reduce((acc, item) => "group" in item ? { ...acc, ...getOptionsLockup(item.items) } : (acc[item.value] = item, acc), {});
 }
-var __default__$g = { dropdown: "m_88b62a41", options: "m_b2821a6e", option: "m_92253aa5", search: "m_985517d8", 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$g = __default__$g, defaultProps$T = {
+var __default__$j = { dropdown: "m_88b62a41", options: "m_b2821a6e", option: "m_92253aa5", search: "m_985517d8", 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$j = __default__$j, defaultProps$W = {
   error: null
-}, varsResolver$h = (_2, { size: size2 }) => ({
+}, varsResolver$k = (_2, { size: size2 }) => ({
   chevron: {
     "--combobox-chevron-size": getSize(size2, "combobox-chevron-size")
   }
 }), ComboboxChevron = factory((_props, ref) => {
-  const props = useProps("ComboboxChevron", defaultProps$T, _props), { size: size2, error, style: style2, className, classNames, styles, unstyled, vars, mod, ...others } = props, getStyles2 = useStyles({
+  const props = useProps("ComboboxChevron", defaultProps$W, _props), { size: size2, error, style: style2, className, classNames, styles, unstyled, vars, mod, ...others } = props, getStyles2 = useStyles({
     name: "ComboboxChevron",
-    classes: classes$g,
+    classes: classes$j,
     props,
     style: style2,
     className,
@@ -16108,7 +16401,7 @@ const classes$g = __default__$g, defaultProps$T = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$h,
+    varsResolver: varsResolver$k,
     rootSelector: "chevron"
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16135,7 +16428,7 @@ const classes$g = __default__$g, defaultProps$T = {
     }
   );
 });
-ComboboxChevron.classes = classes$g;
+ComboboxChevron.classes = classes$j;
 ComboboxChevron.displayName = "@mantine/core/ComboboxChevron";
 const [ComboboxProvider, useComboboxContext] = createSafeContext(
   "Combobox component was not found in tree"
@@ -16159,10 +16452,10 @@ const [ComboboxProvider, useComboboxContext] = createSafeContext(
   )
 );
 ComboboxClearButton.displayName = "@mantine/core/ComboboxClearButton";
-const defaultProps$S = {}, ComboboxDropdown = factory((props, ref) => {
+const defaultProps$V = {}, ComboboxDropdown = factory((props, ref) => {
   const { classNames, styles, className, style: style2, hidden: hidden2, ...others } = useProps(
     "ComboboxDropdown",
-    defaultProps$S,
+    defaultProps$V,
     props
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16176,12 +16469,12 @@ const defaultProps$S = {}, ComboboxDropdown = factory((props, ref) => {
     }
   );
 });
-ComboboxDropdown.classes = classes$g;
+ComboboxDropdown.classes = classes$j;
 ComboboxDropdown.displayName = "@mantine/core/ComboboxDropdown";
-const defaultProps$R = {
+const defaultProps$U = {
   refProp: "ref"
 }, ComboboxDropdownTarget = factory((props, ref) => {
-  const { children: children2, refProp } = useProps("ComboboxDropdownTarget", defaultProps$R, props);
+  const { children: children2, refProp } = useProps("ComboboxDropdownTarget", defaultProps$U, props);
   if (useComboboxContext(), !isElement$1(children2))
     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"
@@ -16189,10 +16482,10 @@ const defaultProps$R = {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Popover.Target, { ref, refProp, children: children2 });
 });
 ComboboxDropdownTarget.displayName = "@mantine/core/ComboboxDropdownTarget";
-const defaultProps$Q = {}, ComboboxEmpty = factory((props, ref) => {
+const defaultProps$T = {}, ComboboxEmpty = factory((props, ref) => {
   const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "ComboboxEmpty",
-    defaultProps$Q,
+    defaultProps$T,
     props
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16204,7 +16497,7 @@ const defaultProps$Q = {}, ComboboxEmpty = factory((props, ref) => {
     }
   );
 });
-ComboboxEmpty.classes = classes$g;
+ComboboxEmpty.classes = classes$j;
 ComboboxEmpty.displayName = "@mantine/core/ComboboxEmpty";
 function useComboboxTargetProps({
   onKeyDown,
@@ -16240,7 +16533,7 @@ function useComboboxTargetProps({
     onKeyDown: handleKeyDown
   };
 }
-const defaultProps$P = {
+const defaultProps$S = {
   refProp: "ref",
   targetType: "input",
   withKeyboardNavigation: !0,
@@ -16257,7 +16550,7 @@ const defaultProps$P = {
     targetType,
     autoComplete,
     ...others
-  } = useProps("ComboboxEventsTarget", defaultProps$P, props);
+  } = useProps("ComboboxEventsTarget", defaultProps$S, props);
   if (!isElement$1(children2))
     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"
@@ -16277,10 +16570,10 @@ const defaultProps$P = {
   });
 });
 ComboboxEventsTarget.displayName = "@mantine/core/ComboboxEventsTarget";
-const defaultProps$O = {}, ComboboxFooter = factory((props, ref) => {
+const defaultProps$R = {}, ComboboxFooter = factory((props, ref) => {
   const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "ComboboxFooter",
-    defaultProps$O,
+    defaultProps$R,
     props
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16292,12 +16585,12 @@ const defaultProps$O = {}, ComboboxFooter = factory((props, ref) => {
     }
   );
 });
-ComboboxFooter.classes = classes$g;
+ComboboxFooter.classes = classes$j;
 ComboboxFooter.displayName = "@mantine/core/ComboboxFooter";
-const defaultProps$N = {}, ComboboxGroup = factory((props, ref) => {
+const defaultProps$Q = {}, ComboboxGroup = factory((props, ref) => {
   const { classNames, className, style: style2, styles, vars, children: children2, label, ...others } = useProps(
     "ComboboxGroup",
-    defaultProps$N,
+    defaultProps$Q,
     props
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -16313,12 +16606,12 @@ const defaultProps$N = {}, ComboboxGroup = factory((props, ref) => {
     }
   );
 });
-ComboboxGroup.classes = classes$g;
+ComboboxGroup.classes = classes$j;
 ComboboxGroup.displayName = "@mantine/core/ComboboxGroup";
-const defaultProps$M = {}, ComboboxHeader = factory((props, ref) => {
+const defaultProps$P = {}, ComboboxHeader = factory((props, ref) => {
   const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "ComboboxHeader",
-    defaultProps$M,
+    defaultProps$P,
     props
   ), ctx = useComboboxContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16330,7 +16623,7 @@ const defaultProps$M = {}, ComboboxHeader = factory((props, ref) => {
     }
   );
 });
-ComboboxHeader.classes = classes$g;
+ComboboxHeader.classes = classes$j;
 ComboboxHeader.displayName = "@mantine/core/ComboboxHeader";
 function ComboboxHiddenInput({
   value,
@@ -16347,8 +16640,8 @@ function ComboboxHiddenInput({
   );
 }
 ComboboxHiddenInput.displayName = "@mantine/core/ComboboxHiddenInput";
-const defaultProps$L = {}, ComboboxOption = factory((_props, ref) => {
-  const props = useProps("ComboboxOption", defaultProps$L, _props), {
+const defaultProps$O = {}, ComboboxOption = factory((_props, ref) => {
+  const props = useProps("ComboboxOption", defaultProps$O, _props), {
     classNames,
     className,
     style: style2,
@@ -16389,10 +16682,10 @@ const defaultProps$L = {}, ComboboxOption = factory((_props, ref) => {
     }
   );
 });
-ComboboxOption.classes = classes$g;
+ComboboxOption.classes = classes$j;
 ComboboxOption.displayName = "@mantine/core/ComboboxOption";
-const defaultProps$K = {}, ComboboxOptions = factory((_props, ref) => {
-  const props = useProps("ComboboxOptions", defaultProps$K, _props), { classNames, className, style: style2, styles, id: id2, onMouseDown, labelledBy, ...others } = props, ctx = useComboboxContext(), _id = useId$1(id2);
+const defaultProps$N = {}, ComboboxOptions = factory((_props, ref) => {
+  const props = useProps("ComboboxOptions", defaultProps$N, _props), { classNames, className, style: style2, styles, id: id2, onMouseDown, labelledBy, ...others } = props, ctx = useComboboxContext(), _id = useId$1(id2);
   return reactExports.useEffect(() => {
     ctx.store.setListId(_id);
   }, [_id]), /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -16410,13 +16703,13 @@ const defaultProps$K = {}, ComboboxOptions = factory((_props, ref) => {
     }
   );
 });
-ComboboxOptions.classes = classes$g;
+ComboboxOptions.classes = classes$j;
 ComboboxOptions.displayName = "@mantine/core/ComboboxOptions";
-const defaultProps$J = {
+const defaultProps$M = {
   withAriaAttributes: !0,
   withKeyboardNavigation: !0
 }, ComboboxSearch = factory((_props, ref) => {
-  const props = useProps("ComboboxSearch", defaultProps$J, _props), {
+  const props = useProps("ComboboxSearch", defaultProps$M, _props), {
     classNames,
     styles,
     unstyled,
@@ -16447,9 +16740,9 @@ const defaultProps$J = {
     }
   );
 });
-ComboboxSearch.classes = classes$g;
+ComboboxSearch.classes = classes$j;
 ComboboxSearch.displayName = "@mantine/core/ComboboxSearch";
-const defaultProps$I = {
+const defaultProps$L = {
   refProp: "ref",
   targetType: "input",
   withKeyboardNavigation: !0,
@@ -16466,7 +16759,7 @@ const defaultProps$I = {
     targetType,
     autoComplete,
     ...others
-  } = useProps("ComboboxTarget", defaultProps$I, props);
+  } = useProps("ComboboxTarget", defaultProps$L, props);
   if (!isElement$1(children2))
     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"
@@ -16643,13 +16936,13 @@ function useCombobox({
     focusTarget
   };
 }
-const defaultProps$H = {
+const defaultProps$K = {
   keepMounted: !0,
   withinPortal: !0,
   resetSelectionOnOptionHover: !1,
   width: "target",
   transitionProps: { transition: "fade", duration: 0 }
-}, varsResolver$g = (_2, { size: size2, dropdownPadding }) => ({
+}, varsResolver$j = (_2, { size: size2, dropdownPadding }) => ({
   options: {
     "--combobox-option-fz": getFontSize(size2),
     "--combobox-option-padding": getSize(size2, "combobox-option-padding")
@@ -16661,7 +16954,7 @@ const defaultProps$H = {
   }
 });
 function Combobox(_props) {
-  const props = useProps("Combobox", defaultProps$H, _props), {
+  const props = useProps("Combobox", defaultProps$K, _props), {
     classNames,
     styles,
     unstyled,
@@ -16678,13 +16971,13 @@ function Combobox(_props) {
     ...others
   } = props, uncontrolledStore = useCombobox(), store = controlledStore || uncontrolledStore, getStyles2 = useStyles({
     name: __staticSelector || "Combobox",
-    classes: classes$g,
+    classes: classes$j,
     props,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$g
+    varsResolver: varsResolver$j
   }), onDropdownClose = () => {
     onClose?.(), store.closeDropdown();
   };
@@ -16715,7 +17008,7 @@ function Combobox(_props) {
 }
 const extendCombobox = (c2) => c2;
 Combobox.extend = extendCombobox;
-Combobox.classes = classes$g;
+Combobox.classes = classes$j;
 Combobox.displayName = "@mantine/core/Combobox";
 Combobox.Target = ComboboxTarget;
 Combobox.Dropdown = ComboboxDropdown;
@@ -16817,7 +17110,7 @@ function Option({
   renderOption
 }) {
   if (!isOptionsGroup(data)) {
-    const checked = isValueChecked(value, data.value), check = withCheckIcon && checked && /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, { className: classes$g.optionsDropdownCheckIcon }), defaultContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    const checked = isValueChecked(value, data.value), check = withCheckIcon && checked && /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, { className: classes$j.optionsDropdownCheckIcon }), defaultContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       checkIconPosition === "left" && check,
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: data.label }),
       checkIconPosition === "right" && check
@@ -16827,7 +17120,7 @@ function Option({
       {
         value: data.value,
         disabled: data.disabled,
-        className: clsx$1({ [classes$g.optionsDropdownOption]: !unstyled }),
+        className: clsx$1({ [classes$j.optionsDropdownOption]: !unstyled }),
         "data-reverse": checkIconPosition === "right" || void 0,
         "data-checked": checked || void 0,
         "aria-selected": checked,
@@ -16902,8 +17195,8 @@ function OptionsDropdown({
     isEmpty2 && nothingFoundMessage && /* @__PURE__ */ jsxRuntimeExports.jsx(Combobox.Empty, { children: nothingFoundMessage })
   ] }) });
 }
-var __default__$f = { root: "m_347db0ec", "root--dot": "m_fbd81e3d", label: "m_5add502a", section: "m_91fdda9b" };
-const classes$f = __default__$f, defaultProps$G = {}, varsResolver$f = (theme2, { radius, color: color2, gradient, variant, size: size2, autoContrast }) => {
+var __default__$i = { root: "m_347db0ec", "root--dot": "m_fbd81e3d", label: "m_5add502a", section: "m_91fdda9b" };
+const classes$i = __default__$i, defaultProps$J = {}, varsResolver$i = (theme2, { radius, color: color2, gradient, variant, size: size2, autoContrast }) => {
   const colors2 = theme2.variantColorResolver({
     color: color2 || theme2.primaryColor,
     theme: theme2,
@@ -16924,7 +17217,7 @@ const classes$f = __default__$f, defaultProps$G = {}, varsResolver$f = (theme2,
     }
   };
 }, Badge = polymorphicFactory((_props, ref) => {
-  const props = useProps("Badge", defaultProps$G, _props), {
+  const props = useProps("Badge", defaultProps$J, _props), {
     classNames,
     className,
     style: style2,
@@ -16946,14 +17239,14 @@ const classes$f = __default__$f, defaultProps$G = {}, varsResolver$f = (theme2,
   } = props, getStyles2 = useStyles({
     name: "Badge",
     props,
-    classes: classes$f,
+    classes: classes$i,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$f
+    varsResolver: varsResolver$i
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Box$1,
@@ -16971,10 +17264,10 @@ const classes$f = __default__$f, defaultProps$G = {}, varsResolver$f = (theme2,
     }
   );
 });
-Badge.classes = classes$f;
+Badge.classes = classes$i;
 Badge.displayName = "@mantine/core/Badge";
-var __default__$e = { root: "m_fea6bf1a", burger: "m_d4fb9cad" };
-const classes$e = __default__$e, defaultProps$F = {}, varsResolver$e = (theme2, { color: color2, size: size2, transitionDuration, transitionTimingFunction }) => ({
+var __default__$h = { root: "m_fea6bf1a", burger: "m_d4fb9cad" };
+const classes$h = __default__$h, defaultProps$I = {}, varsResolver$h = (theme2, { color: color2, size: size2, transitionDuration, transitionTimingFunction }) => ({
   root: {
     "--burger-color": color2 ? getThemeColor(color2, theme2) : void 0,
     "--burger-size": getSize(size2, "burger-size"),
@@ -16982,7 +17275,7 @@ const classes$e = __default__$e, defaultProps$F = {}, varsResolver$e = (theme2,
     "--burger-transition-timing-function": transitionTimingFunction
   }
 }), Burger = factory((_props, ref) => {
-  const props = useProps("Burger", defaultProps$F, _props), {
+  const props = useProps("Burger", defaultProps$I, _props), {
     classNames,
     className,
     style: style2,
@@ -16996,7 +17289,7 @@ const classes$e = __default__$e, defaultProps$F = {}, varsResolver$e = (theme2,
     ...others
   } = props, getStyles2 = useStyles({
     name: "Burger",
-    classes: classes$e,
+    classes: classes$h,
     props,
     className,
     style: style2,
@@ -17004,22 +17297,22 @@ const classes$e = __default__$e, defaultProps$F = {}, varsResolver$e = (theme2,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$e
+    varsResolver: varsResolver$h
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(UnstyledButton, { ...getStyles2("root"), ref, ...others, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { mod: ["reduce-motion", { opened }], ...getStyles2("burger") }),
     children2
   ] });
 });
-Burger.classes = classes$e;
+Burger.classes = classes$h;
 Burger.displayName = "@mantine/core/Burger";
-var __default__$d = { root: "m_77c9d27d", inner: "m_80f1301b", label: "m_811560b9", section: "m_a74036a", loader: "m_a25b86ee", group: "m_80d6d844" };
-const classes$d = __default__$d, defaultProps$E = {
+var __default__$g = { root: "m_77c9d27d", inner: "m_80f1301b", label: "m_811560b9", section: "m_a74036a", loader: "m_a25b86ee", group: "m_80d6d844" };
+const classes$g = __default__$g, defaultProps$H = {
   orientation: "horizontal"
-}, varsResolver$d = (_2, { borderWidth }) => ({
+}, varsResolver$g = (_2, { borderWidth }) => ({
   group: { "--button-border-width": rem(borderWidth) }
 }), ButtonGroup = factory((_props, ref) => {
-  const props = useProps("ButtonGroup", defaultProps$E, _props), {
+  const props = useProps("ButtonGroup", defaultProps$H, _props), {
     className,
     style: style2,
     classNames,
@@ -17031,17 +17324,17 @@ const classes$d = __default__$d, defaultProps$E = {
     variant,
     mod,
     ...others
-  } = useProps("ButtonGroup", defaultProps$E, _props), getStyles2 = useStyles({
+  } = useProps("ButtonGroup", defaultProps$H, _props), getStyles2 = useStyles({
     name: "ButtonGroup",
     props,
-    classes: classes$d,
+    classes: classes$g,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$d,
+    varsResolver: varsResolver$g,
     rootSelector: "group"
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -17056,14 +17349,14 @@ const classes$d = __default__$d, defaultProps$E = {
     }
   );
 });
-ButtonGroup.classes = classes$d;
+ButtonGroup.classes = classes$g;
 ButtonGroup.displayName = "@mantine/core/ButtonGroup";
 const loaderTransition = {
   in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${rem(1)}))` },
   out: { opacity: 0, transform: "translate(-50%, -200%)" },
   common: { transformOrigin: "center" },
   transitionProperty: "transform, opacity"
-}, defaultProps$D = {}, varsResolver$c = (theme2, { radius, color: color2, gradient, variant, size: size2, justify, autoContrast }) => {
+}, defaultProps$G = {}, varsResolver$f = (theme2, { radius, color: color2, gradient, variant, size: size2, justify, autoContrast }) => {
   const colors2 = theme2.variantColorResolver({
     color: color2 || theme2.primaryColor,
     theme: theme2,
@@ -17086,7 +17379,7 @@ const loaderTransition = {
     }
   };
 }, Button = polymorphicFactory((_props, ref) => {
-  const props = useProps("Button", defaultProps$D, _props), {
+  const props = useProps("Button", defaultProps$G, _props), {
     style: style2,
     vars,
     className,
@@ -17111,14 +17404,14 @@ const loaderTransition = {
   } = props, getStyles2 = useStyles({
     name: "Button",
     props,
-    classes: classes$d,
+    classes: classes$g,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$c
+    varsResolver: varsResolver$f
   }), hasLeftSection = !!leftSection, hasRightSection = !!rightSection;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     UnstyledButton,
@@ -17157,15 +17450,15 @@ const loaderTransition = {
     }
   );
 });
-Button.classes = classes$d;
+Button.classes = classes$g;
 Button.displayName = "@mantine/core/Button";
 Button.Group = ButtonGroup;
 const [CardProvider, useCardContext] = createSafeContext(
   "Card component was not found in tree"
 );
-var __default__$c = { root: "m_e615b15f", section: "m_599a2148" };
-const classes$c = __default__$c, defaultProps$C = {}, CardSection = polymorphicFactory((_props, ref) => {
-  const props = useProps("CardSection", defaultProps$C, _props), { classNames, className, style: style2, styles, vars, withBorder, inheritPadding, mod, ...others } = props, ctx = useCardContext();
+var __default__$f = { root: "m_e615b15f", section: "m_599a2148" };
+const classes$f = __default__$f, defaultProps$F = {}, CardSection = polymorphicFactory((_props, ref) => {
+  const props = useProps("CardSection", defaultProps$F, _props), { classNames, className, style: style2, styles, vars, withBorder, inheritPadding, mod, ...others } = props, ctx = useCardContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box$1,
     {
@@ -17176,39 +17469,39 @@ const classes$c = __default__$c, defaultProps$C = {}, CardSection = polymorphicF
     }
   );
 });
-CardSection.classes = classes$c;
+CardSection.classes = classes$f;
 CardSection.displayName = "@mantine/core/CardSection";
-const defaultProps$B = {}, varsResolver$b = (_2, { padding }) => ({
+const defaultProps$E = {}, varsResolver$e = (_2, { padding }) => ({
   root: {
     "--card-padding": getSpacing(padding)
   }
 }), Card$1 = polymorphicFactory((_props, ref) => {
-  const props = useProps("Card", defaultProps$B, _props), { classNames, className, style: style2, styles, unstyled, vars, children: children2, padding, ...others } = props, getStyles2 = useStyles({
+  const props = useProps("Card", defaultProps$E, _props), { classNames, className, style: style2, styles, unstyled, vars, children: children2, padding, ...others } = props, getStyles2 = useStyles({
     name: "Card",
     props,
-    classes: classes$c,
+    classes: classes$f,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$b
+    varsResolver: varsResolver$e
   }), _children = reactExports.Children.toArray(children2), content2 = _children.map((child, index2) => typeof child == "object" && child && "type" in child && child.type === CardSection ? reactExports.cloneElement(child, {
     "data-first-section": index2 === 0 || void 0,
     "data-last-section": index2 === _children.length - 1 || void 0
   }) : child);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(CardProvider, { value: { getStyles: getStyles2 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Paper, { ref, unstyled, ...getStyles2("root"), ...others, children: content2 }) });
 });
-Card$1.classes = classes$c;
+Card$1.classes = classes$f;
 Card$1.displayName = "@mantine/core/Card";
 Card$1.Section = CardSection;
-var __default__$b = { root: "m_4451eb3a" };
-const classes$b = __default__$b, defaultProps$A = {}, Center = polymorphicFactory((_props, ref) => {
-  const props = useProps("Center", defaultProps$A, _props), { classNames, className, style: style2, styles, unstyled, vars, inline: inline2, mod, ...others } = props, getStyles2 = useStyles({
+var __default__$e = { root: "m_4451eb3a" };
+const classes$e = __default__$e, defaultProps$D = {}, Center = polymorphicFactory((_props, ref) => {
+  const props = useProps("Center", defaultProps$D, _props), { classNames, className, style: style2, styles, unstyled, vars, inline: inline2, mod, ...others } = props, getStyles2 = useStyles({
     name: "Center",
     props,
-    classes: classes$b,
+    classes: classes$e,
     className,
     style: style2,
     classNames,
@@ -17218,15 +17511,15 @@ const classes$b = __default__$b, defaultProps$A = {}, Center = polymorphicFactor
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { ref, mod: [{ inline: inline2 }, mod], ...getStyles2("root"), ...others });
 });
-Center.classes = classes$b;
+Center.classes = classes$e;
 Center.displayName = "@mantine/core/Center";
-var __default__$a = { root: "m_b183c0a2" };
-const classes$a = __default__$a, defaultProps$z = {}, varsResolver$a = (theme2, { color: color2 }) => ({
+var __default__$d = { root: "m_b183c0a2" };
+const classes$d = __default__$d, defaultProps$C = {}, varsResolver$d = (theme2, { color: color2 }) => ({
   root: {
     "--code-bg": color2 ? getThemeColor(color2, theme2) : void 0
   }
 }), Code = factory((_props, ref) => {
-  const props = useProps("Code", defaultProps$z, _props), {
+  const props = useProps("Code", defaultProps$C, _props), {
     classNames,
     className,
     style: style2,
@@ -17241,14 +17534,14 @@ const classes$a = __default__$a, defaultProps$z = {}, varsResolver$a = (theme2,
   } = props, getStyles2 = useStyles({
     name: "Code",
     props,
-    classes: classes$a,
+    classes: classes$d,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$a
+    varsResolver: varsResolver$d
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box$1,
@@ -17263,18 +17556,18 @@ const classes$a = __default__$a, defaultProps$z = {}, varsResolver$a = (theme2,
     }
   );
 });
-Code.classes = classes$a;
+Code.classes = classes$d;
 Code.displayName = "@mantine/core/Code";
-var __default__$9 = { root: "m_de3d2490", colorOverlay: "m_862f3d1b", shadowOverlay: "m_98ae7f22", alphaOverlay: "m_95709ac0", childrenOverlay: "m_93e74e3" };
-const classes$9 = __default__$9, defaultProps$y = {
+var __default__$c = { root: "m_de3d2490", colorOverlay: "m_862f3d1b", shadowOverlay: "m_98ae7f22", alphaOverlay: "m_95709ac0", childrenOverlay: "m_93e74e3" };
+const classes$c = __default__$c, defaultProps$B = {
   withShadow: !0
-}, varsResolver$9 = (_2, { radius, size: size2 }) => ({
+}, varsResolver$c = (_2, { radius, size: size2 }) => ({
   root: {
     "--cs-radius": radius === void 0 ? void 0 : getRadius$1(radius),
     "--cs-size": rem(size2)
   }
 }), ColorSwatch = polymorphicFactory((_props, ref) => {
-  const props = useProps("ColorSwatch", defaultProps$y, _props), {
+  const props = useProps("ColorSwatch", defaultProps$B, _props), {
     classNames,
     className,
     style: style2,
@@ -17288,17 +17581,17 @@ const classes$9 = __default__$9, defaultProps$y = {
     children: children2,
     variant,
     ...others
-  } = useProps("ColorSwatch", defaultProps$y, props), getStyles2 = useStyles({
+  } = useProps("ColorSwatch", defaultProps$B, props), getStyles2 = useStyles({
     name: "ColorSwatch",
     props,
-    classes: classes$9,
+    classes: classes$c,
     className,
     style: style2,
     classNames,
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$9
+    varsResolver: varsResolver$c
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Box$1,
@@ -17317,17 +17610,17 @@ const classes$9 = __default__$9, defaultProps$y = {
     }
   );
 });
-ColorSwatch.classes = classes$9;
+ColorSwatch.classes = classes$c;
 ColorSwatch.displayName = "@mantine/core/ColorSwatch";
-var __default__$8 = { root: "m_7485cace" };
-const classes$8 = __default__$8, defaultProps$x = {}, varsResolver$8 = (_2, { size: size2, fluid }) => ({
+var __default__$b = { root: "m_7485cace" };
+const classes$b = __default__$b, defaultProps$A = {}, varsResolver$b = (_2, { size: size2, fluid }) => ({
   root: {
     "--container-size": fluid ? void 0 : getSize(size2, "container-size")
   }
 }), Container$1 = factory((_props, ref) => {
-  const props = useProps("Container", defaultProps$x, _props), { classNames, className, style: style2, styles, unstyled, vars, fluid, mod, ...others } = props, getStyles2 = useStyles({
+  const props = useProps("Container", defaultProps$A, _props), { classNames, className, style: style2, styles, unstyled, vars, fluid, mod, ...others } = props, getStyles2 = useStyles({
     name: "Container",
-    classes: classes$8,
+    classes: classes$b,
     props,
     className,
     style: style2,
@@ -17335,31 +17628,31 @@ const classes$8 = __default__$8, defaultProps$x = {}, varsResolver$8 = (_2, { si
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$8
+    varsResolver: varsResolver$b
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { ref, mod: [{ fluid }, mod], ...getStyles2("root"), ...others });
 });
-Container$1.classes = classes$8;
+Container$1.classes = classes$b;
 Container$1.displayName = "@mantine/core/Container";
-const defaultProps$w = {
+const defaultProps$z = {
   timeout: 1e3
 };
 function CopyButton(props) {
-  const { children: children2, timeout: timeout2, value, ...others } = useProps("CopyButton", defaultProps$w, props), clipboard = useClipboard({ timeout: timeout2 }), copy = () => clipboard.copy(value);
+  const { children: children2, timeout: timeout2, value, ...others } = useProps("CopyButton", defaultProps$z, props), clipboard = useClipboard({ timeout: timeout2 }), copy = () => clipboard.copy(value);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children2({ copy, copied: clipboard.copied, ...others }) });
 }
 CopyButton.displayName = "@mantine/core/CopyButton";
-var __default__$7 = { root: "m_3eebeb36", label: "m_9e365f20" };
-const classes$7 = __default__$7, defaultProps$v = {
+var __default__$a = { root: "m_3eebeb36", label: "m_9e365f20" };
+const classes$a = __default__$a, defaultProps$y = {
   orientation: "horizontal"
-}, varsResolver$7 = (theme2, { color: color2, variant, size: size2 }) => ({
+}, varsResolver$a = (theme2, { color: color2, variant, size: size2 }) => ({
   root: {
     "--divider-color": color2 ? getThemeColor(color2, theme2) : void 0,
     "--divider-border-style": variant,
     "--divider-size": getSize(size2, "divider-size")
   }
 }), Divider = factory((_props, ref) => {
-  const props = useProps("Divider", defaultProps$v, _props), {
+  const props = useProps("Divider", defaultProps$y, _props), {
     classNames,
     className,
     style: style2,
@@ -17374,7 +17667,7 @@ const classes$7 = __default__$7, defaultProps$v = {
     ...others
   } = props, getStyles2 = useStyles({
     name: "Divider",
-    classes: classes$7,
+    classes: classes$a,
     props,
     className,
     style: style2,
@@ -17382,7 +17675,7 @@ const classes$7 = __default__$7, defaultProps$v = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$7
+    varsResolver: varsResolver$a
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box$1,
@@ -17396,14 +17689,14 @@ const classes$7 = __default__$7, defaultProps$v = {
     }
   );
 });
-Divider.classes = classes$7;
+Divider.classes = classes$a;
 Divider.displayName = "@mantine/core/Divider";
 const [DrawerProvider, useDrawerContext] = createSafeContext(
   "Drawer component was not found in tree"
 );
-var __default__$6 = { root: "m_f11b401e", header: "m_5a7c2c9", content: "m_b8a05bbd", inner: "m_31cd769a" };
-const classes$6 = __default__$6, defaultProps$u = {}, DrawerBody = factory((_props, ref) => {
-  const props = useProps("DrawerBody", defaultProps$u, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
+var __default__$9 = { root: "m_f11b401e", header: "m_5a7c2c9", content: "m_b8a05bbd", inner: "m_31cd769a" };
+const classes$9 = __default__$9, defaultProps$x = {}, DrawerBody = factory((_props, ref) => {
+  const props = useProps("DrawerBody", defaultProps$x, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseBody,
     {
@@ -17413,10 +17706,10 @@ const classes$6 = __default__$6, defaultProps$u = {}, DrawerBody = factory((_pro
     }
   );
 });
-DrawerBody.classes = classes$6;
+DrawerBody.classes = classes$9;
 DrawerBody.displayName = "@mantine/core/DrawerBody";
-const defaultProps$t = {}, DrawerCloseButton = factory((_props, ref) => {
-  const props = useProps("DrawerCloseButton", defaultProps$t, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
+const defaultProps$w = {}, DrawerCloseButton = factory((_props, ref) => {
+  const props = useProps("DrawerCloseButton", defaultProps$w, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseCloseButton,
     {
@@ -17426,10 +17719,10 @@ const defaultProps$t = {}, DrawerCloseButton = factory((_props, ref) => {
     }
   );
 });
-DrawerCloseButton.classes = classes$6;
+DrawerCloseButton.classes = classes$9;
 DrawerCloseButton.displayName = "@mantine/core/DrawerCloseButton";
-const defaultProps$s = {}, DrawerContent = factory((_props, ref) => {
-  const props = useProps("DrawerContent", defaultProps$s, _props), { classNames, className, style: style2, styles, vars, children: children2, radius, ...others } = props, ctx = useDrawerContext(), Scroll = ctx.scrollAreaComponent || NativeScrollArea;
+const defaultProps$v = {}, DrawerContent = factory((_props, ref) => {
+  const props = useProps("DrawerContent", defaultProps$v, _props), { classNames, className, style: style2, styles, vars, children: children2, radius, ...others } = props, ctx = useDrawerContext(), Scroll = ctx.scrollAreaComponent || NativeScrollArea;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseContent,
     {
@@ -17442,10 +17735,10 @@ const defaultProps$s = {}, DrawerContent = factory((_props, ref) => {
     }
   );
 });
-DrawerContent.classes = classes$6;
+DrawerContent.classes = classes$9;
 DrawerContent.displayName = "@mantine/core/DrawerContent";
-const defaultProps$r = {}, DrawerHeader = factory((_props, ref) => {
-  const props = useProps("DrawerHeader", defaultProps$r, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
+const defaultProps$u = {}, DrawerHeader = factory((_props, ref) => {
+  const props = useProps("DrawerHeader", defaultProps$u, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseHeader,
     {
@@ -17455,10 +17748,10 @@ const defaultProps$r = {}, DrawerHeader = factory((_props, ref) => {
     }
   );
 });
-DrawerHeader.classes = classes$6;
+DrawerHeader.classes = classes$9;
 DrawerHeader.displayName = "@mantine/core/DrawerHeader";
-const defaultProps$q = {}, DrawerOverlay = factory((_props, ref) => {
-  const props = useProps("DrawerOverlay", defaultProps$q, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
+const defaultProps$t = {}, DrawerOverlay = factory((_props, ref) => {
+  const props = useProps("DrawerOverlay", defaultProps$t, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseOverlay,
     {
@@ -17468,7 +17761,7 @@ const defaultProps$q = {}, DrawerOverlay = factory((_props, ref) => {
     }
   );
 });
-DrawerOverlay.classes = classes$6;
+DrawerOverlay.classes = classes$9;
 DrawerOverlay.displayName = "@mantine/core/DrawerOverlay";
 function getDrawerAlign(position) {
   switch (position) {
@@ -17494,7 +17787,7 @@ const transitions = {
   bottom: "slide-up",
   right: "slide-right",
   left: "slide-left"
-}, defaultProps$p = {
+}, defaultProps$s = {
   closeOnClickOutside: !0,
   withinPortal: !0,
   lockScroll: !0,
@@ -17504,7 +17797,7 @@ const transitions = {
   keepMounted: !1,
   zIndex: getDefaultZIndex("modal"),
   position: "left"
-}, varsResolver$6 = (_2, { position, size: size2, offset: offset2 }) => ({
+}, varsResolver$9 = (_2, { position, size: size2, offset: offset2 }) => ({
   root: {
     "--drawer-size": getSize(size2, "drawer-size"),
     "--drawer-flex": getDrawerFlex(position),
@@ -17514,7 +17807,7 @@ const transitions = {
     "--drawer-offset": rem(offset2)
   }
 }), DrawerRoot = factory((_props, ref) => {
-  const props = useProps("DrawerRoot", defaultProps$p, _props), {
+  const props = useProps("DrawerRoot", defaultProps$s, _props), {
     classNames,
     className,
     style: style2,
@@ -17528,7 +17821,7 @@ const transitions = {
     ...others
   } = props, { dir } = useDirection(), getStyles2 = useStyles({
     name: "Drawer",
-    classes: classes$6,
+    classes: classes$9,
     props,
     className,
     style: style2,
@@ -17536,7 +17829,7 @@ const transitions = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$6
+    varsResolver: varsResolver$9
   }), drawerTransition = (dir === "rtl" ? rtlTransitions : transitions)[position];
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DrawerProvider, { value: { scrollAreaComponent, getStyles: getStyles2, radius }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBase,
@@ -17549,10 +17842,10 @@ const transitions = {
     }
   ) });
 });
-DrawerRoot.classes = classes$6;
+DrawerRoot.classes = classes$9;
 DrawerRoot.displayName = "@mantine/core/DrawerRoot";
-const defaultProps$o = {}, DrawerTitle = factory((_props, ref) => {
-  const props = useProps("DrawerTitle", defaultProps$o, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
+const defaultProps$r = {}, DrawerTitle = factory((_props, ref) => {
+  const props = useProps("DrawerTitle", defaultProps$r, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useDrawerContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseTitle,
     {
@@ -17562,9 +17855,9 @@ const defaultProps$o = {}, DrawerTitle = factory((_props, ref) => {
     }
   );
 });
-DrawerTitle.classes = classes$6;
+DrawerTitle.classes = classes$9;
 DrawerTitle.displayName = "@mantine/core/DrawerTitle";
-const defaultProps$n = {
+const defaultProps$q = {
   closeOnClickOutside: !0,
   withinPortal: !0,
   lockScroll: !0,
@@ -17584,7 +17877,7 @@ const defaultProps$n = {
     closeButtonProps,
     children: children2,
     ...others
-  } = useProps("Drawer", defaultProps$n, _props), hasHeader = !!title2 || withCloseButton;
+  } = useProps("Drawer", defaultProps$q, _props), hasHeader = !!title2 || withCloseButton;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(DrawerRoot, { ref, ...others, children: [
     withOverlay && /* @__PURE__ */ jsxRuntimeExports.jsx(DrawerOverlay, { ...overlayProps }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(DrawerContent, { children: [
@@ -17596,7 +17889,7 @@ const defaultProps$n = {
     ] })
   ] });
 });
-Drawer.classes = classes$6;
+Drawer.classes = classes$9;
 Drawer.displayName = "@mantine/core/Drawer";
 Drawer.Root = DrawerRoot;
 Drawer.Overlay = DrawerOverlay;
@@ -17617,22 +17910,22 @@ function useDelayedHover({ open, close, openDelay, closeDelay }) {
 }
 const [HoverCardContextProvider, useHoverCardContext] = createSafeContext(
   "HoverCard component was not found in the tree"
-), defaultProps$m = {};
+), defaultProps$p = {};
 function HoverCardDropdown(props) {
   const { children: children2, onMouseEnter, onMouseLeave, ...others } = useProps(
     "HoverCardDropdown",
-    defaultProps$m,
+    defaultProps$p,
     props
   ), ctx = useHoverCardContext(), handleMouseEnter = createEventHandler(onMouseEnter, ctx.openDropdown), handleMouseLeave = createEventHandler(onMouseLeave, ctx.closeDropdown);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Popover.Dropdown, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...others, children: children2 });
 }
 HoverCardDropdown.displayName = "@mantine/core/HoverCardDropdown";
-const defaultProps$l = {
+const defaultProps$o = {
   refProp: "ref"
 }, HoverCardTarget = reactExports.forwardRef((props, ref) => {
   const { children: children2, refProp, eventPropsWrapperName, ...others } = useProps(
     "HoverCardTarget",
-    defaultProps$l,
+    defaultProps$o,
     props
   );
   if (!isElement$1(children2))
@@ -17646,7 +17939,7 @@ const defaultProps$l = {
   ) });
 });
 HoverCardTarget.displayName = "@mantine/core/HoverCardTarget";
-const defaultProps$k = {
+const defaultProps$n = {
   openDelay: 0,
   closeDelay: 150,
   initiallyOpened: !1
@@ -17654,7 +17947,7 @@ const defaultProps$k = {
 function HoverCard(props) {
   const { children: children2, onOpen, onClose, openDelay, closeDelay, initiallyOpened, ...others } = useProps(
     "HoverCard",
-    defaultProps$k,
+    defaultProps$n,
     props
   ), [opened, { open, close }] = useDisclosure(initiallyOpened, { onClose, onOpen }), { openDropdown, closeDropdown } = useDelayedHover({ open, close, openDelay, closeDelay });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCardContextProvider, { value: { openDropdown, closeDropdown }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Popover, { ...others, opened, __staticSelector: "HoverCard", children: children2 }) });
@@ -17676,11 +17969,11 @@ function _extends() {
 const [MenuContextProvider, useMenuContext] = createSafeContext(
   "Menu component was not found in the tree"
 );
-var __default__$5 = { dropdown: "m_dc9b7c9f", label: "m_9bfac126", divider: "m_efdf90cb", item: "m_99ac2aa1", itemLabel: "m_5476e0d3", itemSection: "m_8b75e504" };
-const classes$5 = __default__$5, defaultProps$j = {}, MenuDivider = factory((props, ref) => {
+var __default__$8 = { dropdown: "m_dc9b7c9f", label: "m_9bfac126", divider: "m_efdf90cb", item: "m_99ac2aa1", itemLabel: "m_5476e0d3", itemSection: "m_8b75e504" };
+const classes$8 = __default__$8, defaultProps$m = {}, MenuDivider = factory((props, ref) => {
   const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "MenuDivider",
-    defaultProps$j,
+    defaultProps$m,
     props
   ), ctx = useMenuContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -17692,9 +17985,9 @@ const classes$5 = __default__$5, defaultProps$j = {}, MenuDivider = factory((pro
     }
   );
 });
-MenuDivider.classes = classes$5;
+MenuDivider.classes = classes$8;
 MenuDivider.displayName = "@mantine/core/MenuDivider";
-const defaultProps$i = {}, MenuDropdown = factory((props, ref) => {
+const defaultProps$l = {}, MenuDropdown = factory((props, ref) => {
   const {
     classNames,
     className,
@@ -17705,7 +17998,7 @@ const defaultProps$i = {}, MenuDropdown = factory((props, ref) => {
     onMouseLeave,
     children: children2,
     ...others
-  } = useProps("MenuDropdown", defaultProps$i, props), wrapperRef = reactExports.useRef(null), ctx = useMenuContext(), handleKeyDown = (event) => {
+  } = useProps("MenuDropdown", defaultProps$l, props), wrapperRef = reactExports.useRef(null), ctx = useMenuContext(), handleKeyDown = (event) => {
     (event.key === "ArrowUp" || event.key === "ArrowDown") && (event.preventDefault(), wrapperRef.current?.querySelectorAll("[data-menu-item]:not(:disabled)")[0]?.focus());
   }, handleMouseEnter = createEventHandler(
     onMouseEnter,
@@ -17740,9 +18033,9 @@ const defaultProps$i = {}, MenuDropdown = factory((props, ref) => {
     }
   );
 });
-MenuDropdown.classes = classes$5;
+MenuDropdown.classes = classes$8;
 MenuDropdown.displayName = "@mantine/core/MenuDropdown";
-const defaultProps$h = {}, MenuItem = polymorphicFactory((props, ref) => {
+const defaultProps$k = {}, MenuItem = polymorphicFactory((props, ref) => {
   const {
     classNames,
     className,
@@ -17756,7 +18049,7 @@ const defaultProps$h = {}, MenuItem = polymorphicFactory((props, ref) => {
     children: children2,
     disabled,
     ...others
-  } = useProps("MenuItem", defaultProps$h, props), ctx = useMenuContext(), theme2 = useMantineTheme(), { dir } = useDirection(), itemRef = reactExports.useRef(), itemIndex = ctx.getItemIndex(itemRef.current), _others = others, handleMouseLeave = createEventHandler(_others.onMouseLeave, () => ctx.setHovered(-1)), handleMouseEnter = createEventHandler(
+  } = useProps("MenuItem", defaultProps$k, props), ctx = useMenuContext(), theme2 = useMantineTheme(), { dir } = useDirection(), itemRef = reactExports.useRef(), 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, () => {
@@ -17803,12 +18096,12 @@ const defaultProps$h = {}, MenuItem = polymorphicFactory((props, ref) => {
     }
   );
 });
-MenuItem.classes = classes$5;
+MenuItem.classes = classes$8;
 MenuItem.displayName = "@mantine/core/MenuItem";
-const defaultProps$g = {}, MenuLabel = factory((props, ref) => {
+const defaultProps$j = {}, MenuLabel = factory((props, ref) => {
   const { classNames, className, style: style2, styles, vars, ...others } = useProps(
     "MenuLabel",
-    defaultProps$g,
+    defaultProps$j,
     props
   ), ctx = useMenuContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -17820,12 +18113,12 @@ const defaultProps$g = {}, MenuLabel = factory((props, ref) => {
     }
   );
 });
-MenuLabel.classes = classes$5;
+MenuLabel.classes = classes$8;
 MenuLabel.displayName = "@mantine/core/MenuLabel";
-const defaultProps$f = {
+const defaultProps$i = {
   refProp: "ref"
 }, MenuTarget = reactExports.forwardRef((props, ref) => {
-  const { children: children2, refProp, ...others } = useProps("MenuTarget", defaultProps$f, props);
+  const { children: children2, refProp, ...others } = useProps("MenuTarget", defaultProps$i, props);
   if (!isElement$1(children2))
     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"
@@ -17846,7 +18139,7 @@ const defaultProps$f = {
   }) });
 });
 MenuTarget.displayName = "@mantine/core/MenuTarget";
-const defaultProps$e = {
+const defaultProps$h = {
   trapFocus: !0,
   closeOnItemClick: !0,
   clickOutsideEvents: ["mousedown", "touchstart", "keydown"],
@@ -17857,7 +18150,7 @@ const defaultProps$e = {
   menuItemTabIndex: -1
 };
 function Menu(_props) {
-  const props = useProps("Menu", defaultProps$e, _props), {
+  const props = useProps("Menu", defaultProps$h, _props), {
     children: children2,
     onOpen,
     onClose,
@@ -17881,7 +18174,7 @@ function Menu(_props) {
     ...others
   } = props, getStyles2 = useStyles({
     name: "Menu",
-    classes: classes$5,
+    classes: classes$8,
     props,
     classNames,
     styles,
@@ -17947,7 +18240,7 @@ function Menu(_props) {
   );
 }
 Menu.extend = (input) => input;
-Menu.classes = classes$5;
+Menu.classes = classes$8;
 Menu.displayName = "@mantine/core/Menu";
 Menu.Item = MenuItem;
 Menu.Label = MenuLabel;
@@ -17957,9 +18250,9 @@ Menu.Divider = MenuDivider;
 const [ModalProvider, useModalContext] = createSafeContext(
   "Modal component was not found in tree"
 );
-var __default__$4 = { root: "m_9df02822", content: "m_54c44539", inner: "m_1f958f16", header: "m_d0e2b9cd" };
-const classes$4 = __default__$4, defaultProps$d = {}, ModalBody = factory((_props, ref) => {
-  const props = useProps("ModalBody", defaultProps$d, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useModalContext();
+var __default__$7 = { root: "m_9df02822", content: "m_54c44539", inner: "m_1f958f16", header: "m_d0e2b9cd" };
+const classes$7 = __default__$7, defaultProps$g = {}, ModalBody = factory((_props, ref) => {
+  const props = useProps("ModalBody", defaultProps$g, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useModalContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseBody,
     {
@@ -17969,10 +18262,10 @@ const classes$4 = __default__$4, defaultProps$d = {}, ModalBody = factory((_prop
     }
   );
 });
-ModalBody.classes = classes$4;
+ModalBody.classes = classes$7;
 ModalBody.displayName = "@mantine/core/ModalBody";
-const defaultProps$c = {}, ModalContent = factory((_props, ref) => {
-  const props = useProps("ModalContent", defaultProps$c, _props), { classNames, className, style: style2, styles, vars, children: children2, ...others } = props, ctx = useModalContext(), Scroll = ctx.scrollAreaComponent || NativeScrollArea;
+const defaultProps$f = {}, ModalContent = factory((_props, ref) => {
+  const props = useProps("ModalContent", defaultProps$f, _props), { classNames, className, style: style2, styles, vars, children: children2, ...others } = props, ctx = useModalContext(), Scroll = ctx.scrollAreaComponent || NativeScrollArea;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseContent,
     {
@@ -17994,10 +18287,10 @@ const defaultProps$c = {}, ModalContent = factory((_props, ref) => {
     }
   );
 });
-ModalContent.classes = classes$4;
+ModalContent.classes = classes$7;
 ModalContent.displayName = "@mantine/core/ModalContent";
-const defaultProps$b = {}, ModalOverlay = factory((_props, ref) => {
-  const props = useProps("ModalOverlay", defaultProps$b, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useModalContext();
+const defaultProps$e = {}, ModalOverlay = factory((_props, ref) => {
+  const props = useProps("ModalOverlay", defaultProps$e, _props), { classNames, className, style: style2, styles, vars, ...others } = props, ctx = useModalContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseOverlay,
     {
@@ -18007,9 +18300,9 @@ const defaultProps$b = {}, ModalOverlay = factory((_props, ref) => {
     }
   );
 });
-ModalOverlay.classes = classes$4;
+ModalOverlay.classes = classes$7;
 ModalOverlay.displayName = "@mantine/core/ModalOverlay";
-const defaultProps$a = {
+const defaultProps$d = {
   __staticSelector: "Modal",
   closeOnClickOutside: !0,
   withinPortal: !0,
@@ -18021,7 +18314,7 @@ const defaultProps$a = {
   zIndex: getDefaultZIndex("modal"),
   transitionProps: { duration: 200, transition: "pop" },
   yOffset: "5dvh"
-}, varsResolver$5 = (_2, { radius, size: size2, yOffset, xOffset }) => ({
+}, varsResolver$8 = (_2, { radius, size: size2, yOffset, xOffset }) => ({
   root: {
     "--modal-radius": radius === void 0 ? void 0 : getRadius$1(radius),
     "--modal-size": getSize(size2, "modal-size"),
@@ -18029,7 +18322,7 @@ const defaultProps$a = {
     "--modal-x-offset": rem(xOffset)
   }
 }), ModalRoot = factory((_props, ref) => {
-  const props = useProps("ModalRoot", defaultProps$a, _props), {
+  const props = useProps("ModalRoot", defaultProps$d, _props), {
     classNames,
     className,
     style: style2,
@@ -18046,7 +18339,7 @@ const defaultProps$a = {
     ...others
   } = props, getStyles2 = useStyles({
     name: __staticSelector,
-    classes: classes$4,
+    classes: classes$7,
     props,
     className,
     style: style2,
@@ -18054,7 +18347,7 @@ const defaultProps$a = {
     styles,
     unstyled,
     vars,
-    varsResolver: varsResolver$5
+    varsResolver: varsResolver$8
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ModalProvider, { value: { yOffset, scrollAreaComponent, getStyles: getStyles2, fullScreen }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBase,
@@ -18068,7 +18361,7 @@ const defaultProps$a = {
     }
   ) });
 });
-ModalRoot.classes = classes$4;
+ModalRoot.classes = classes$7;
 ModalRoot.displayName = "@mantine/core/ModalRoot";
 const defaultTransition = {
   duration: 100,
@@ -18124,21 +18417,21 @@ function useFloatingTooltip({
     }
   }, [elements.reference, refs.floating.current, update, handleMouseMove, opened]), { handleMouseMove, x: x2, y: y2, opened, setOpened, boundaryRef, floating: refs.setFloating };
 }
-var __default__$3 = { tooltip: "m_1b3c8819", arrow: "m_f898399f" };
-const classes$3 = __default__$3, defaultProps$9 = {
+var __default__$6 = { tooltip: "m_1b3c8819", arrow: "m_f898399f" };
+const classes$6 = __default__$6, defaultProps$c = {
   refProp: "ref",
   withinPortal: !0,
   offset: 10,
   position: "right",
   zIndex: getDefaultZIndex("popover")
-}, varsResolver$4 = (theme2, { radius, color: color2 }) => ({
+}, varsResolver$7 = (theme2, { radius, color: color2 }) => ({
   tooltip: {
     "--tooltip-radius": radius === void 0 ? void 0 : getRadius$1(radius),
     "--tooltip-bg": color2 ? getThemeColor(color2, theme2) : void 0,
     "--tooltip-color": color2 ? "var(--mantine-color-white)" : void 0
   }
 }), TooltipFloating = factory((_props, ref) => {
-  const props = useProps("TooltipFloating", defaultProps$9, _props), {
+  const props = useProps("TooltipFloating", defaultProps$c, _props), {
     children: children2,
     refProp,
     withinPortal,
@@ -18162,7 +18455,7 @@ const classes$3 = __default__$3, defaultProps$9 = {
   } = props, theme2 = useMantineTheme(), getStyles2 = useStyles({
     name: "TooltipFloating",
     props,
-    classes: classes$3,
+    classes: classes$6,
     className,
     style: style2,
     classNames,
@@ -18170,7 +18463,7 @@ const classes$3 = __default__$3, defaultProps$9 = {
     unstyled,
     rootSelector: "tooltip",
     vars,
-    varsResolver: varsResolver$4
+    varsResolver: varsResolver$7
   }), { handleMouseMove, x: x2, y: y2, opened, boundaryRef, floating, setOpened } = useFloatingTooltip({
     offset: offset2,
     position
@@ -18212,14 +18505,14 @@ const classes$3 = __default__$3, defaultProps$9 = {
     })
   ] });
 });
-TooltipFloating.classes = classes$3;
+TooltipFloating.classes = classes$6;
 TooltipFloating.displayName = "@mantine/core/TooltipFloating";
-const TooltipGroupContext = reactExports.createContext(!1), TooltipGroupProvider = TooltipGroupContext.Provider, useTooltipGroupContext = () => reactExports.useContext(TooltipGroupContext), defaultProps$8 = {
+const TooltipGroupContext = reactExports.createContext(!1), TooltipGroupProvider = TooltipGroupContext.Provider, useTooltipGroupContext = () => reactExports.useContext(TooltipGroupContext), defaultProps$b = {
   openDelay: 0,
   closeDelay: 0
 };
 function TooltipGroup(props) {
-  const { openDelay, closeDelay, children: children2 } = useProps("TooltipGroup", defaultProps$8, props);
+  const { openDelay, closeDelay, children: children2 } = useProps("TooltipGroup", defaultProps$b, props);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipGroupProvider, { value: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDelayGroup, { delay: { open: openDelay, close: closeDelay }, children: children2 }) });
 }
 TooltipGroup.displayName = "@mantine/core/TooltipGroup";
@@ -18284,7 +18577,7 @@ function useTooltip(settings) {
     placement
   };
 }
-const defaultProps$7 = {
+const defaultProps$a = {
   position: "top",
   refProp: "ref",
   withinPortal: !0,
@@ -18298,14 +18591,14 @@ const defaultProps$7 = {
   events: { hover: !0, focus: !1, touch: !1 },
   zIndex: getDefaultZIndex("popover"),
   positionDependencies: []
-}, varsResolver$3 = (theme2, { radius, color: color2 }) => ({
+}, varsResolver$6 = (theme2, { radius, color: color2 }) => ({
   tooltip: {
     "--tooltip-radius": radius === void 0 ? void 0 : getRadius$1(radius),
     "--tooltip-bg": color2 ? getThemeColor(color2, theme2) : void 0,
     "--tooltip-color": color2 ? "var(--mantine-color-white)" : void 0
   }
 }), Tooltip = factory((_props, ref) => {
-  const props = useProps("Tooltip", defaultProps$7, _props), {
+  const props = useProps("Tooltip", defaultProps$a, _props), {
     children: children2,
     position,
     refProp,
@@ -18345,7 +18638,7 @@ const defaultProps$7 = {
     mod,
     floatingStrategy,
     ...others
-  } = useProps("Tooltip", defaultProps$7, props), { dir } = useDirection(), arrowRef = reactExports.useRef(null), tooltip = useTooltip({
+  } = useProps("Tooltip", defaultProps$a, props), { dir } = useDirection(), arrowRef = reactExports.useRef(null), tooltip = useTooltip({
     position: getFloatingPosition(dir, position),
     closeDelay,
     openDelay,
@@ -18361,7 +18654,7 @@ const defaultProps$7 = {
   }), getStyles2 = useStyles({
     name: "Tooltip",
     props,
-    classes: classes$3,
+    classes: classes$6,
     className,
     style: style2,
     classNames,
@@ -18369,7 +18662,7 @@ const defaultProps$7 = {
     unstyled,
     rootSelector: "tooltip",
     vars,
-    varsResolver: varsResolver$3
+    varsResolver: varsResolver$6
   });
   if (!isElement$1(children2))
     throw new Error(
@@ -18439,17 +18732,153 @@ const defaultProps$7 = {
     )
   ] });
 });
-Tooltip.classes = classes$3;
+Tooltip.classes = classes$6;
 Tooltip.displayName = "@mantine/core/Tooltip";
 Tooltip.Floating = TooltipFloating;
 Tooltip.Group = TooltipGroup;
-const defaultProps$6 = {
+var __default__$5 = { root: "m_cf365364", indicator: "m_9e182ccd", label: "m_1738fcb2", input: "m_1714d588", control: "m_69686b9b", innerLabel: "m_78882f40" };
+const classes$5 = __default__$5, defaultProps$9 = {
+  withItemsBorders: !0
+}, varsResolver$5 = (theme2, { radius, color: color2, transitionDuration, size: size2, transitionTimingFunction }) => ({
+  root: {
+    "--sc-radius": radius === void 0 ? void 0 : getRadius$1(radius),
+    "--sc-color": color2 ? getThemeColor(color2, theme2) : void 0,
+    "--sc-shadow": color2 ? void 0 : "var(--mantine-shadow-xs)",
+    "--sc-transition-duration": transitionDuration === void 0 ? void 0 : `${transitionDuration}ms`,
+    "--sc-transition-timing-function": transitionTimingFunction,
+    "--sc-padding": getSize(size2, "sc-padding"),
+    "--sc-font-size": getFontSize(size2)
+  }
+}), SegmentedControl = factory((_props, ref) => {
+  const props = useProps("SegmentedControl", defaultProps$9, _props), {
+    classNames,
+    className,
+    style: style2,
+    styles,
+    unstyled,
+    vars,
+    data,
+    value,
+    defaultValue,
+    onChange,
+    size: size2,
+    name,
+    disabled,
+    readOnly,
+    fullWidth,
+    orientation,
+    radius,
+    color: color2,
+    transitionDuration,
+    transitionTimingFunction,
+    variant,
+    autoContrast,
+    withItemsBorders,
+    mod,
+    ...others
+  } = props, getStyles2 = useStyles({
+    name: "SegmentedControl",
+    props,
+    classes: classes$5,
+    className,
+    style: style2,
+    classNames,
+    styles,
+    unstyled,
+    vars,
+    varsResolver: varsResolver$5
+  }), theme2 = useMantineTheme(), _data = data.map(
+    (item) => typeof item == "string" ? { label: item, value: item } : item
+  ), initialized = useMounted(), [parent, setParent] = reactExports.useState(null), [refs, setRefs] = reactExports.useState({}), setElementRef = (element, val) => {
+    refs[val] = element, setRefs(refs);
+  }, [_value, handleValueChange] = useUncontrolled({
+    value,
+    defaultValue,
+    finalValue: Array.isArray(data) ? _data.find((item) => !item.disabled)?.value ?? data[0]?.value ?? null : null,
+    onChange
+  }), uuid = useId$1(name), controls = _data.map((item) => /* @__PURE__ */ reactExports.createElement(
+    Box$1,
+    {
+      ...getStyles2("control"),
+      mod: { active: _value === item.value, orientation },
+      key: item.value
+    },
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        ...getStyles2("input"),
+        disabled: disabled || item.disabled,
+        type: "radio",
+        name: uuid,
+        value: item.value,
+        id: `${uuid}-${item.value}`,
+        checked: _value === item.value,
+        onChange: () => !readOnly && handleValueChange(item.value),
+        "data-focus-ring": theme2.focusRing
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Box$1,
+      {
+        component: "label",
+        ...getStyles2("label"),
+        mod: {
+          active: _value === item.value && !(disabled || item.disabled),
+          disabled: disabled || item.disabled,
+          "read-only": readOnly
+        },
+        htmlFor: `${uuid}-${item.value}`,
+        ref: (node) => setElementRef(node, item.value),
+        __vars: {
+          "--sc-label-color": color2 !== void 0 ? getContrastColor({ color: color2, theme: theme2, autoContrast }) : void 0
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ...getStyles2("innerLabel"), children: item.label })
+      }
+    )
+  )), mergedRef = useMergedRef(ref, (node) => setParent(node));
+  return data.length === 0 ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Box$1,
+    {
+      ...getStyles2("root"),
+      variant,
+      size: size2,
+      ref: mergedRef,
+      mod: [
+        {
+          "full-width": fullWidth,
+          orientation,
+          initialized,
+          "with-items-borders": withItemsBorders
+        },
+        mod
+      ],
+      ...others,
+      role: "radiogroup",
+      children: [
+        typeof _value == "string" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          FloatingIndicator,
+          {
+            target: refs[_value],
+            parent,
+            component: "span",
+            transitionDuration: "var(--sc-transition-duration)",
+            ...getStyles2("indicator")
+          }
+        ),
+        controls
+      ]
+    }
+  );
+});
+SegmentedControl.classes = classes$5;
+SegmentedControl.displayName = "@mantine/core/SegmentedControl";
+const defaultProps$8 = {
   searchable: !1,
   withCheckIcon: !0,
   allowDeselect: !0,
   checkIconPosition: "left"
 }, Select = factory((_props, ref) => {
-  const props = useProps("Select", defaultProps$6, _props), {
+  const props = useProps("Select", defaultProps$8, _props), {
     classNames,
     styles,
     unstyled,
@@ -18626,6 +19055,430 @@ const defaultProps$6 = {
 });
 Select.classes = { ...InputBase.classes, ...Combobox.classes };
 Select.displayName = "@mantine/core/Select";
+const [SliderProvider, useSliderContext] = createSafeContext(
+  "SliderProvider was not found in tree"
+), SliderRoot = reactExports.forwardRef(
+  ({ size: size2, disabled, variant, color: color2, thumbSize, radius, ...others }, ref) => {
+    const { getStyles: getStyles2 } = useSliderContext();
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Box$1,
+      {
+        tabIndex: -1,
+        variant,
+        size: size2,
+        ref,
+        ...getStyles2("root"),
+        ...others
+      }
+    );
+  }
+);
+SliderRoot.displayName = "@mantine/core/SliderRoot";
+const Thumb = reactExports.forwardRef(
+  ({
+    max: max2,
+    min: min2,
+    value,
+    position,
+    label,
+    dragging,
+    onMouseDown,
+    onKeyDownCapture,
+    labelTransitionProps,
+    labelAlwaysOn,
+    thumbLabel,
+    onFocus,
+    onBlur,
+    showLabelOnHover,
+    isHovered,
+    children: children2 = null,
+    disabled
+  }, ref) => {
+    const { getStyles: getStyles2 } = useSliderContext(), [focused, setFocused] = reactExports.useState(!1), isVisible = labelAlwaysOn || dragging || focused || showLabelOnHover && isHovered;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Box$1,
+      {
+        tabIndex: 0,
+        role: "slider",
+        "aria-label": thumbLabel,
+        "aria-valuemax": max2,
+        "aria-valuemin": min2,
+        "aria-valuenow": value,
+        ref,
+        __vars: { "--slider-thumb-offset": `${position}%` },
+        ...getStyles2("thumb", { focusable: !0 }),
+        mod: { dragging, disabled },
+        onFocus: () => {
+          setFocused(!0), typeof onFocus == "function" && onFocus();
+        },
+        onBlur: () => {
+          setFocused(!1), typeof onBlur == "function" && onBlur();
+        },
+        onTouchStart: onMouseDown,
+        onMouseDown,
+        onKeyDownCapture,
+        onClick: (event) => event.stopPropagation(),
+        children: [
+          children2,
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Transition$1,
+            {
+              mounted: label != null && !!isVisible,
+              transition: "fade",
+              duration: 0,
+              ...labelTransitionProps,
+              children: (transitionStyles) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...getStyles2("label", { style: transitionStyles }), children: label })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Thumb.displayName = "@mantine/core/SliderThumb";
+function getPosition({ value, min: min2, max: max2 }) {
+  const position = (value - min2) / (max2 - min2) * 100;
+  return Math.min(Math.max(position, 0), 100);
+}
+function isMarkFilled({ mark, offset: offset2, value, inverted = !1 }) {
+  return inverted ? typeof offset2 == "number" && mark.value <= offset2 || mark.value >= value : typeof offset2 == "number" ? mark.value >= offset2 && mark.value <= value : mark.value <= value;
+}
+function Marks({ marks, min: min2, max: max2, disabled, value, offset: offset2, inverted }) {
+  const { getStyles: getStyles2 } = useSliderContext();
+  if (!marks)
+    return null;
+  const items = marks.map((mark, index2) => /* @__PURE__ */ reactExports.createElement(
+    Box$1,
+    {
+      ...getStyles2("markWrapper"),
+      __vars: { "--mark-offset": `${getPosition({ value: mark.value, min: min2, max: max2 })}%` },
+      key: index2
+    },
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Box$1,
+      {
+        ...getStyles2("mark"),
+        mod: { filled: isMarkFilled({ mark, value, offset: offset2, inverted }), disabled }
+      }
+    ),
+    mark.label && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...getStyles2("markLabel"), children: mark.label })
+  ));
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: items });
+}
+Marks.displayName = "@mantine/core/SliderMarks";
+function Track({
+  filled,
+  children: children2,
+  offset: offset2,
+  disabled,
+  marksOffset,
+  inverted,
+  containerProps,
+  ...others
+}) {
+  const { getStyles: getStyles2 } = useSliderContext();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { ...getStyles2("trackContainer"), mod: { disabled }, ...containerProps, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box$1, { ...getStyles2("track"), mod: { inverted, disabled }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Box$1,
+      {
+        mod: { inverted, disabled },
+        __vars: {
+          "--slider-bar-width": `calc(${filled}% + var(--slider-size))`,
+          "--slider-bar-offset": `calc(${offset2}% - var(--slider-size))`
+        },
+        ...getStyles2("bar")
+      }
+    ),
+    children2,
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Marks, { ...others, offset: marksOffset, disabled, inverted })
+  ] }) }) });
+}
+Track.displayName = "@mantine/core/SliderTrack";
+function getChangeValue({
+  value,
+  containerWidth,
+  min: min2,
+  max: max2,
+  step,
+  precision
+}) {
+  const dx = (containerWidth ? Math.min(Math.max(value, 0), containerWidth) / containerWidth : value) * (max2 - min2), nextValue = (dx !== 0 ? Math.round(dx / step) * step : 0) + min2, nextValueWithinStep = Math.max(nextValue, min2);
+  return precision !== void 0 ? Number(nextValueWithinStep.toFixed(precision)) : nextValueWithinStep;
+}
+function getFloatingValue(value, precision) {
+  return parseFloat(value.toFixed(precision));
+}
+function getPrecision(step) {
+  if (!step)
+    return 0;
+  const split = step.toString().split(".");
+  return split.length > 1 ? split[1].length : 0;
+}
+var __default__$4 = { 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$4 = __default__$4, defaultProps$7 = {
+  radius: "xl",
+  min: 0,
+  max: 100,
+  step: 1,
+  marks: [],
+  label: (f2) => f2,
+  labelTransitionProps: { transition: "fade", duration: 0 },
+  labelAlwaysOn: !1,
+  thumbLabel: "",
+  showLabelOnHover: !0,
+  disabled: !1,
+  scale: (v2) => v2
+}, varsResolver$4 = (theme2, { size: size2, color: color2, thumbSize, radius }) => ({
+  root: {
+    "--slider-size": getSize(size2, "slider-size"),
+    "--slider-color": color2 ? getThemeColor(color2, theme2) : void 0,
+    "--slider-radius": radius === void 0 ? void 0 : getRadius$1(radius),
+    "--slider-thumb-size": thumbSize !== void 0 ? rem(thumbSize) : "calc(var(--slider-size) * 2)"
+  }
+}), Slider = factory((_props, ref) => {
+  const props = useProps("Slider", defaultProps$7, _props), {
+    classNames,
+    styles,
+    value,
+    onChange,
+    onChangeEnd,
+    size: size2,
+    min: min2,
+    max: max2,
+    step,
+    precision: _precision,
+    defaultValue,
+    name,
+    marks,
+    label,
+    labelTransitionProps,
+    labelAlwaysOn,
+    thumbLabel,
+    showLabelOnHover,
+    thumbChildren,
+    disabled,
+    unstyled,
+    scale: scale2,
+    inverted,
+    className,
+    style: style2,
+    vars,
+    hiddenInputProps,
+    ...others
+  } = props, getStyles2 = useStyles({
+    name: "Slider",
+    props,
+    classes: classes$4,
+    classNames,
+    className,
+    styles,
+    style: style2,
+    vars,
+    varsResolver: varsResolver$4,
+    unstyled
+  }), { dir } = useDirection(), [hovered, setHovered] = reactExports.useState(!1), [_value, setValue] = useUncontrolled({
+    value: typeof value == "number" ? clamp$5(value, min2, max2) : value,
+    defaultValue: typeof defaultValue == "number" ? clamp$5(defaultValue, min2, max2) : defaultValue,
+    finalValue: clamp$5(0, min2, max2),
+    onChange
+  }), valueRef = reactExports.useRef(_value), root2 = reactExports.useRef(), thumb = reactExports.useRef(), position = getPosition({ value: _value, min: min2, max: max2 }), scaledValue = scale2(_value), _label = typeof label == "function" ? label(scaledValue) : label, precision = _precision ?? getPrecision(step), handleChange = reactExports.useCallback(
+    ({ x: x2 }) => {
+      if (!disabled) {
+        const nextValue = getChangeValue({
+          value: x2,
+          min: min2,
+          max: max2,
+          step,
+          precision
+        });
+        setValue(nextValue), valueRef.current = nextValue;
+      }
+    },
+    [disabled, min2, max2, step, precision, setValue]
+  ), { ref: container2, active } = useMove(
+    handleChange,
+    { onScrubEnd: () => onChangeEnd?.(valueRef.current) },
+    dir
+  ), handleTrackKeydownCapture = (event) => {
+    if (!disabled)
+      switch (event.key) {
+        case "ArrowUp": {
+          event.preventDefault(), thumb.current?.focus();
+          const nextValue = getFloatingValue(
+            Math.min(Math.max(_value + step, min2), max2),
+            precision
+          );
+          setValue(nextValue), onChangeEnd?.(nextValue);
+          break;
+        }
+        case "ArrowRight": {
+          event.preventDefault(), thumb.current?.focus();
+          const nextValue = getFloatingValue(
+            Math.min(Math.max(dir === "rtl" ? _value - step : _value + step, min2), max2),
+            precision
+          );
+          setValue(nextValue), onChangeEnd?.(nextValue);
+          break;
+        }
+        case "ArrowDown": {
+          event.preventDefault(), thumb.current?.focus();
+          const nextValue = getFloatingValue(
+            Math.min(Math.max(_value - step, min2), max2),
+            precision
+          );
+          setValue(nextValue), onChangeEnd?.(nextValue);
+          break;
+        }
+        case "ArrowLeft": {
+          event.preventDefault(), thumb.current?.focus();
+          const nextValue = getFloatingValue(
+            Math.min(Math.max(dir === "rtl" ? _value + step : _value - step, min2), max2),
+            precision
+          );
+          setValue(nextValue), onChangeEnd?.(nextValue);
+          break;
+        }
+        case "Home": {
+          event.preventDefault(), thumb.current?.focus(), setValue(min2), onChangeEnd?.(min2);
+          break;
+        }
+        case "End": {
+          event.preventDefault(), thumb.current?.focus(), setValue(max2), onChangeEnd?.(max2);
+          break;
+        }
+      }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SliderProvider, { value: { getStyles: getStyles2 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    SliderRoot,
+    {
+      ...others,
+      ref: useMergedRef(ref, root2),
+      onKeyDownCapture: handleTrackKeydownCapture,
+      onMouseDownCapture: () => root2.current?.focus(),
+      size: size2,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Track,
+          {
+            inverted,
+            offset: 0,
+            filled: position,
+            marks,
+            min: min2,
+            max: max2,
+            value: scaledValue,
+            disabled,
+            containerProps: {
+              ref: container2,
+              onMouseEnter: showLabelOnHover ? () => setHovered(!0) : void 0,
+              onMouseLeave: showLabelOnHover ? () => setHovered(!1) : void 0
+            },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Thumb,
+              {
+                max: max2,
+                min: min2,
+                value: scaledValue,
+                position,
+                dragging: active,
+                label: _label,
+                ref: thumb,
+                labelTransitionProps,
+                labelAlwaysOn,
+                thumbLabel,
+                showLabelOnHover,
+                isHovered: hovered,
+                disabled,
+                children: thumbChildren
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "hidden", name, value: scaledValue, ...hiddenInputProps })
+      ]
+    }
+  ) });
+});
+Slider.classes = classes$4;
+Slider.displayName = "@mantine/core/Slider";
+var __default__$3 = { root: "m_559cce2d", content: "m_b912df4e", control: "m_b9131032" };
+const classes$3 = __default__$3, defaultProps$6 = {
+  maxHeight: 100,
+  initialState: !1
+}, varsResolver$3 = (_2, { transitionDuration }) => ({
+  root: {
+    "--spoiler-transition-duration": transitionDuration !== void 0 ? `${transitionDuration}ms` : void 0
+  }
+}), Spoiler = factory((_props, ref) => {
+  const props = useProps("Spoiler", defaultProps$6, _props), {
+    classNames,
+    className,
+    style: style2,
+    styles,
+    unstyled,
+    vars,
+    initialState: initialState2,
+    maxHeight,
+    hideLabel,
+    showLabel,
+    children: children2,
+    controlRef,
+    transitionDuration,
+    id: id2,
+    ...others
+  } = props, getStyles2 = useStyles({
+    name: "Spoiler",
+    classes: classes$3,
+    props,
+    className,
+    style: style2,
+    classNames,
+    styles,
+    unstyled,
+    vars,
+    varsResolver: varsResolver$3
+  }), _id = useId$1(id2), regionId = `${_id}-region`, [show, setShowState] = reactExports.useState(initialState2), { ref: contentRef, height } = useElementSize(), spoilerMoreContent = show ? hideLabel : showLabel, spoiler = spoilerMoreContent !== null && maxHeight < height;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Box$1,
+    {
+      ...getStyles2("root"),
+      id: _id,
+      ref,
+      "data-has-spoiler": spoiler || void 0,
+      ...others,
+      children: [
+        spoiler && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Anchor,
+          {
+            component: "button",
+            type: "button",
+            ref: controlRef,
+            onClick: () => setShowState((opened) => !opened),
+            "aria-expanded": show,
+            "aria-controls": regionId,
+            ...getStyles2("control"),
+            children: spoilerMoreContent
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            ...getStyles2("content", {
+              style: { maxHeight: show ? height ? rem(height) : void 0 : rem(maxHeight) }
+            }),
+            "data-reduce-motion": !0,
+            role: "region",
+            id: regionId,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: contentRef, children: children2 })
+          }
+        )
+      ]
+    }
+  );
+});
+Spoiler.classes = classes$3;
+Spoiler.displayName = "@mantine/core/Spoiler";
 var __default__$2 = { root: "m_6d731127" };
 const classes$2 = __default__$2, defaultProps$5 = {
   gap: "md",
@@ -18970,7 +19823,7 @@ const classes = __default__, defaultProps = {
 });
 Title.classes = classes;
 Title.displayName = "@mantine/core/Title";
-var content = "_1u4wf800", image = "_1u4wf801", inner = "_1u4wf802", root$1 = "_1u4wf803", description$1 = "_1u4wf804", title$2 = "_1u4wf805";
+var content = "_1u4wf800", image = "_1u4wf801", inner = "_1u4wf802", root$1 = "_1u4wf803", description$2 = "_1u4wf804", title$3 = "_1u4wf805";
 function NotFound() {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$1, { className: root$1, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: inner, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 362 145", className: image, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -18981,8 +19834,8 @@ function NotFound() {
       }
     ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: content, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { className: title$2, children: "Nothing to see here" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { c: "dimmed", size: "lg", ta: "center", className: description$1, children: "Page you are trying to open does not exist. You may have mistyped the address, or the page has been moved to another URL. If you think this is an error contact support." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { className: title$3, children: "Nothing to see here" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { c: "dimmed", size: "lg", ta: "center", className: description$2, children: "Page you are trying to open does not exist. You may have mistyped the address, or the page has been moved to another URL. If you think this is an error contact support." }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Group, { justify: "center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { component: Link$1, to: "/", search: !0, startTransition: !0, size: "md", children: "Take me back to home page" }) })
     ] })
   ] }) });
@@ -19911,7 +20764,7 @@ function selection_select(select2) {
       (node = group[i2]) && (subnode = select2.call(node, node.__data__, i2, group)) && ("__data__" in node && (subnode.__data__ = node.__data__), subgroup[i2] = subnode);
   return new Selection$1(subgroups, this._parents);
 }
-function array(x2) {
+function array$1(x2) {
   return x2 == null ? [] : Array.isArray(x2) ? x2 : Array.from(x2);
 }
 function empty() {
@@ -19924,7 +20777,7 @@ function selectorAll(selector2) {
 }
 function arrayAll(select2) {
   return function() {
-    return array(select2.apply(this, arguments));
+    return array$1(select2.apply(this, arguments));
   };
 }
 function selection_selectAll(select2) {
@@ -19999,7 +20852,7 @@ EnterNode.prototype = {
     return this._parent.querySelectorAll(selector2);
   }
 };
-function constant$3(x2) {
+function constant$4(x2) {
   return function() {
     return x2;
   };
@@ -20026,7 +20879,7 @@ function selection_data(value, key) {
   if (!arguments.length)
     return Array.from(this, datum);
   var bind = key ? bindKey : bindIndex, parents = this._parents, groups = this._groups;
-  typeof value != "function" && (value = constant$3(value));
+  typeof value != "function" && (value = constant$4(value));
   for (var m2 = groups.length, update = new Array(m2), enter = new Array(m2), exit = new Array(m2), j2 = 0; j2 < m2; ++j2) {
     var parent = parents[j2], group = groups[j2], groupLength = group.length, data = arraylike(value.call(parent, parent && parent.__data__, j2, parents)), dataLength = data.length, enterGroup = enter[j2] = new Array(dataLength), updateGroup = update[j2] = new Array(dataLength), exitGroup = exit[j2] = new Array(groupLength);
     bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
@@ -20463,8 +21316,8 @@ function pointer(event, node) {
   if (event = sourceEvent(event), node === void 0 && (node = event.currentTarget), node) {
     var svg = node.ownerSVGElement || node;
     if (svg.createSVGPoint) {
-      var point = svg.createSVGPoint();
-      return point.x = event.clientX, point.y = event.clientY, point = point.matrixTransform(node.getScreenCTM().inverse()), [point.x, point.y];
+      var point2 = svg.createSVGPoint();
+      return point2.x = event.clientX, point2.y = event.clientY, point2 = point2.matrixTransform(node.getScreenCTM().inverse()), [point2.x, point2.y];
     }
     if (node.getBoundingClientRect) {
       var rect = node.getBoundingClientRect();
@@ -20490,7 +21343,7 @@ function yesdrag(view, noclick) {
     selection2.on("click.drag", null);
   }, 0)), "onselectstart" in root2 ? selection2.on("selectstart.drag", null) : (root2.style.MozUserSelect = root2.__noselect, delete root2.__noselect);
 }
-const constant$2 = (x2) => () => x2;
+const constant$3 = (x2) => () => x2;
 function DragEvent(type, {
   sourceEvent: sourceEvent2,
   subject,
@@ -20618,13 +21471,13 @@ function drag$1() {
       };
   }
   return drag2.filter = function(_2) {
-    return arguments.length ? (filter2 = typeof _2 == "function" ? _2 : constant$2(!!_2), drag2) : filter2;
+    return arguments.length ? (filter2 = typeof _2 == "function" ? _2 : constant$3(!!_2), drag2) : filter2;
   }, drag2.container = function(_2) {
-    return arguments.length ? (container2 = typeof _2 == "function" ? _2 : constant$2(_2), drag2) : container2;
+    return arguments.length ? (container2 = typeof _2 == "function" ? _2 : constant$3(_2), drag2) : container2;
   }, drag2.subject = function(_2) {
-    return arguments.length ? (subject = typeof _2 == "function" ? _2 : constant$2(_2), drag2) : subject;
+    return arguments.length ? (subject = typeof _2 == "function" ? _2 : constant$3(_2), drag2) : subject;
   }, drag2.touchable = function(_2) {
-    return arguments.length ? (touchable = typeof _2 == "function" ? _2 : constant$2(!!_2), drag2) : touchable;
+    return arguments.length ? (touchable = typeof _2 == "function" ? _2 : constant$3(!!_2), drag2) : touchable;
   }, drag2.on = function() {
     var value = listeners.on.apply(listeners, arguments);
     return value === listeners ? drag2 : value;
@@ -20937,7 +21790,7 @@ function clampt(value) {
 function hsl2rgb(h2, m1, m2) {
   return (h2 < 60 ? m1 + (m2 - m1) * h2 / 60 : h2 < 180 ? m2 : h2 < 240 ? m1 + (m2 - m1) * (240 - h2) / 60 : m1) * 255;
 }
-const constant$1 = (x2) => () => x2;
+const constant$2 = (x2) => () => x2;
 function linear(a, d2) {
   return function(t2) {
     return a + t2 * d2;
@@ -20950,12 +21803,12 @@ function exponential(a, b2, y2) {
 }
 function gamma(y2) {
   return (y2 = +y2) == 1 ? nogamma : function(a, b2) {
-    return b2 - a ? exponential(a, b2, y2) : constant$1(isNaN(a) ? b2 : a);
+    return b2 - a ? exponential(a, b2, y2) : constant$2(isNaN(a) ? b2 : a);
   };
 }
 function nogamma(a, b2) {
   var d2 = b2 - a;
-  return d2 ? linear(a, d2) : constant$1(isNaN(a) ? b2 : a);
+  return d2 ? linear(a, d2) : constant$2(isNaN(a) ? b2 : a);
 }
 const interpolateRgb = function rgbGamma(y2) {
   var color2 = gamma(y2);
@@ -21697,7 +22550,7 @@ function selection_transition(name) {
 }
 selection.prototype.interrupt = selection_interrupt;
 selection.prototype.transition = selection_transition;
-const constant = (x2) => () => x2;
+const constant$1 = (x2) => () => x2;
 function ZoomEvent(type, {
   sourceEvent: sourceEvent2,
   target,
@@ -21723,8 +22576,8 @@ Transform.prototype = {
   translate: function(x2, y2) {
     return x2 === 0 & y2 === 0 ? this : new Transform(this.k, this.x + this.k * x2, this.y + this.k * y2);
   },
-  apply: function(point) {
-    return [point[0] * this.k + this.x, point[1] * this.k + this.y];
+  apply: function(point2) {
+    return [point2[0] * this.k + this.x, point2[1] * this.k + this.y];
   },
   applyX: function(x2) {
     return x2 * this.k + this.x;
@@ -21793,9 +22646,9 @@ function zoom() {
   function zoom2(selection2) {
     selection2.property("__zoom", defaultTransform).on("wheel.zoom", wheeled, { passive: !1 }).on("mousedown.zoom", mousedowned).on("dblclick.zoom", dblclicked).filter(touchable).on("touchstart.zoom", touchstarted).on("touchmove.zoom", touchmoved).on("touchend.zoom touchcancel.zoom", touchended).style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
   }
-  zoom2.transform = function(collection, transform2, point, event) {
+  zoom2.transform = function(collection, transform2, point2, event) {
     var selection2 = collection.selection ? collection.selection() : collection;
-    selection2.property("__zoom", defaultTransform), collection !== selection2 ? schedule2(collection, transform2, point, event) : selection2.interrupt().each(function() {
+    selection2.property("__zoom", defaultTransform), collection !== selection2 ? schedule2(collection, transform2, point2, event) : selection2.interrupt().each(function() {
       gesture(this, arguments).event(event).start().zoom(null, typeof transform2 == "function" ? transform2.apply(this, arguments) : transform2).end();
     });
   }, zoom2.scaleBy = function(selection2, k2, p2, event) {
@@ -21834,13 +22687,13 @@ function zoom() {
   function centroid(extent2) {
     return [(+extent2[0][0] + +extent2[1][0]) / 2, (+extent2[0][1] + +extent2[1][1]) / 2];
   }
-  function schedule2(transition, transform2, point, event) {
+  function schedule2(transition, transform2, point2, event) {
     transition.on("start.zoom", function() {
       gesture(this, arguments).event(event).start();
     }).on("interrupt.zoom end.zoom", function() {
       gesture(this, arguments).event(event).end();
     }).tween("zoom", function() {
-      var that = this, args = arguments, g2 = gesture(that, args).event(event), e2 = extent.apply(that, args), p2 = point == null ? centroid(e2) : typeof point == "function" ? point.apply(that, args) : point, w2 = Math.max(e2[1][0] - e2[0][0], e2[1][1] - e2[0][1]), a = that.__zoom, b2 = typeof transform2 == "function" ? transform2.apply(that, args) : transform2, i2 = interpolate2(a.invert(p2).concat(w2 / a.k), b2.invert(p2).concat(w2 / b2.k));
+      var that = this, args = arguments, g2 = gesture(that, args).event(event), e2 = extent.apply(that, args), p2 = point2 == null ? centroid(e2) : typeof point2 == "function" ? point2.apply(that, args) : point2, w2 = Math.max(e2[1][0] - e2[0][0], e2[1][1] - e2[0][1]), a = that.__zoom, b2 = typeof transform2 == "function" ? transform2.apply(that, args) : transform2, i2 = interpolate2(a.invert(p2).concat(w2 / a.k), b2.invert(p2).concat(w2 / b2.k));
       return function(t2) {
         if (t2 === 1)
           t2 = b2;
@@ -21966,13 +22819,13 @@ function zoom() {
     }
   }
   return zoom2.wheelDelta = function(_2) {
-    return arguments.length ? (wheelDelta2 = typeof _2 == "function" ? _2 : constant(+_2), zoom2) : wheelDelta2;
+    return arguments.length ? (wheelDelta2 = typeof _2 == "function" ? _2 : constant$1(+_2), zoom2) : wheelDelta2;
   }, zoom2.filter = function(_2) {
-    return arguments.length ? (filter2 = typeof _2 == "function" ? _2 : constant(!!_2), zoom2) : filter2;
+    return arguments.length ? (filter2 = typeof _2 == "function" ? _2 : constant$1(!!_2), zoom2) : filter2;
   }, zoom2.touchable = function(_2) {
-    return arguments.length ? (touchable = typeof _2 == "function" ? _2 : constant(!!_2), zoom2) : touchable;
+    return arguments.length ? (touchable = typeof _2 == "function" ? _2 : constant$1(!!_2), zoom2) : touchable;
   }, zoom2.extent = function(_2) {
-    return arguments.length ? (extent = typeof _2 == "function" ? _2 : constant([[+_2[0][0], +_2[0][1]], [+_2[1][0], +_2[1][1]]]), zoom2) : extent;
+    return arguments.length ? (extent = typeof _2 == "function" ? _2 : constant$1([[+_2[0][0], +_2[0][1]], [+_2[1][0], +_2[1][1]]]), zoom2) : extent;
   }, zoom2.scaleExtent = function(_2) {
     return arguments.length ? (scaleExtent[0] = +_2[0], scaleExtent[1] = +_2[1], zoom2) : [scaleExtent[0], scaleExtent[1]];
   }, zoom2.translateExtent = function(_2) {
@@ -23040,8 +23893,8 @@ function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection
     event.preventDefault(), event.stopImmediatePropagation();
     const currentZoom = d3Selection.property("__zoom").k || 1;
     if (event.ctrlKey && zoomOnPinch) {
-      const point = pointer(event), pinchDelta = wheelDelta(event), zoom2 = currentZoom * Math.pow(2, pinchDelta);
-      d3Zoom.scaleTo(d3Selection, zoom2, point, event);
+      const point2 = pointer(event), pinchDelta = wheelDelta(event), zoom2 = currentZoom * Math.pow(2, pinchDelta);
+      d3Zoom.scaleTo(d3Selection, zoom2, point2, event);
       return;
     }
     const deltaNormalize = event.deltaMode === 1 ? 20 : 1;
@@ -24440,9 +25293,9 @@ function useVisibleNodeIds(onlyRenderVisible) {
 }
 const selector$e = (s2) => s2.updateNodeInternals;
 function useResizeObserver() {
-  const updateNodeInternals2 = useStore$1(selector$e), [resizeObserver] = reactExports.useState(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((entries) => {
+  const updateNodeInternals2 = useStore$1(selector$e), [resizeObserver] = reactExports.useState(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((entries2) => {
     const updates = /* @__PURE__ */ new Map();
-    entries.forEach((entry) => {
+    entries2.forEach((entry) => {
       const id2 = entry.target.getAttribute("data-id");
       updates.set(id2, {
         id: id2,
@@ -24468,12 +25321,12 @@ function useNodeObserver({ node, nodeType, hasDimensions, resizeObserver }) {
   }, [node.id, nodeType, node.sourcePosition, node.targetPosition]), nodeRef;
 }
 function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes: nodeTypes2, nodeExtent, nodeOrigin, onError }) {
-  const { node, internals, isParent } = useStore$1((s2) => {
-    const node2 = s2.nodeLookup.get(id2), isParent2 = s2.parentLookup.has(id2);
+  const { node, internals, isParent: isParent2 } = useStore$1((s2) => {
+    const node2 = s2.nodeLookup.get(id2), isParent22 = s2.parentLookup.has(id2);
     return {
       node: node2,
       internals: node2.internals,
-      isParent: isParent2
+      isParent: isParent22
     };
   }, shallow$1);
   let nodeType = node.type || "default", NodeComponent = nodeTypes2?.[nodeType] || builtinNodeTypes[nodeType];
@@ -24528,7 +25381,7 @@ function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave
     {
       selected: node.selected,
       selectable: isSelectable,
-      parent: isParent,
+      parent: isParent2,
       draggable: isDraggable,
       dragging
     }
@@ -25394,7 +26247,7 @@ function NodeComponentWrapperInner({ id: id2, nodeOrigin, nodeColorFunc, nodeStr
 }
 const NodeComponentWrapper = reactExports.memo(NodeComponentWrapperInner);
 var MiniMapNodes$1 = reactExports.memo(MiniMapNodes);
-const defaultWidth = 200, defaultHeight = 150, selector$1 = (s2) => {
+const defaultWidth = 200, defaultHeight = 150, selector$1$1 = (s2) => {
   const viewBB = {
     x: -s2.transform[0] / s2.transform[2],
     y: -s2.transform[1] / s2.transform[2],
@@ -25437,7 +26290,7 @@ function MiniMapComponent({
   zoomStep = 10,
   offsetScale = 5
 }) {
-  const store = useStoreApi(), svg = reactExports.useRef(null), { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight } = useStore$1(selector$1, shallow$1), elementWidth = style2?.width ?? defaultWidth, elementHeight = style2?.height ?? defaultHeight, scaledWidth = boundingRect.width / elementWidth, scaledHeight = boundingRect.height / elementHeight, viewScale = Math.max(scaledWidth, scaledHeight), viewWidth = viewScale * elementWidth, viewHeight = viewScale * elementHeight, offset2 = offsetScale * viewScale, x2 = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset2, y2 = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset2, width = viewWidth + offset2 * 2, height = viewHeight + offset2 * 2, labelledBy = `${ARIA_LABEL_KEY}-${rfId}`, viewScaleRef = reactExports.useRef(0), minimapInstance = reactExports.useRef();
+  const store = useStoreApi(), svg = reactExports.useRef(null), { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight } = useStore$1(selector$1$1, shallow$1), elementWidth = style2?.width ?? defaultWidth, elementHeight = style2?.height ?? defaultHeight, scaledWidth = boundingRect.width / elementWidth, scaledHeight = boundingRect.height / elementHeight, viewScale = Math.max(scaledWidth, scaledHeight), viewWidth = viewScale * elementWidth, viewHeight = viewScale * elementHeight, offset2 = offsetScale * viewScale, x2 = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset2, y2 = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset2, width = viewWidth + offset2 * 2, height = viewHeight + offset2 * 2, labelledBy = `${ARIA_LABEL_KEY}-${rfId}`, viewScaleRef = reactExports.useRef(0), minimapInstance = reactExports.useRef();
   viewScaleRef.current = viewScale, reactExports.useEffect(() => {
     if (svg.current && panZoom)
       return minimapInstance.current = XYMinimap({
@@ -26181,6 +27034,12 @@ function hasAtLeast() {
 var hasAtLeastImplementation = function(data, minimum) {
   return data.length >= minimum;
 };
+function entries() {
+  return purry(Object.entries, arguments);
+}
+(function(entries2) {
+  entries2.strict = entries2;
+})(entries || (entries = {}));
 function findLast() {
   return purry(_findLast(!1), arguments);
 }
@@ -27863,50 +28722,84 @@ function createDiagramStore(props) {
           setLastClickedEdge: (edgeId) => {
             edgeId !== get2().lastClickedEdgeId && set2({ lastClickedEdgeId: edgeId }, noReplace, edgeId ? "setLastClickedEdge" : "unsetLastClickedEdge");
           },
+          resetLastClicked: () => {
+            let {
+              focusedNodeId,
+              lastClickedNodeId,
+              lastClickedEdgeId
+            } = get2();
+            (focusedNodeId || lastClickedNodeId || lastClickedEdgeId) && set2(
+              {
+                focusedNodeId: null,
+                lastClickedNodeId: null,
+                lastClickedEdgeId: null
+              },
+              noReplace,
+              "resetLastClicked"
+            );
+          },
           getElement: (fqn) => {
             const { view } = get2();
             return view.nodes.find(({ id: id2 }) => id2 === fqn) ?? null;
           },
           triggerOnChange: (changes) => {
-            const newShapes = /* @__PURE__ */ new Map(), newColor = /* @__PURE__ */ new Map();
+            const newShapes = /* @__PURE__ */ new Map(), newColor = /* @__PURE__ */ new Map(), newOpacity = /* @__PURE__ */ new Map(), newBorder = /* @__PURE__ */ new Map();
             for (const change of changes) {
-              if (change.op === "change-shape") {
-                for (const target of change.targets)
-                  newShapes.set(target, change.shape);
-                continue;
-              }
-              if (change.op === "change-color") {
-                for (const target of change.targets)
-                  newColor.set(target, change.color);
-                continue;
-              }
-              nonexhaustive(change);
+              change.op !== "change-element-style" && nonexhaustive(change.op);
+              for (const target of change.targets)
+                for (const [key, value] of entries.strict(change.style))
+                  switch (key) {
+                    case "shape":
+                      newShapes.set(target, value);
+                      break;
+                    case "color":
+                      newColor.set(target, value);
+                      break;
+                    case "opacity":
+                      newOpacity.set(target, value);
+                      break;
+                    case "border":
+                      newBorder.set(target, value);
+                      break;
+                    default:
+                      nonexhaustive(key);
+                  }
             }
             get2().xyflow.setNodes(
               (nodes) => nodes.map((node) => {
-                let { data } = node;
-                const shape = newShapes.get(data.fqn);
-                shape && shape !== data.element.shape && (node = {
-                  ...node,
-                  data: {
-                    ...data,
-                    element: {
-                      ...data.element,
-                      shape
-                    }
+                let element = node.data.element;
+                const shape = newShapes.get(element.id);
+                shape && shape !== element.shape && (element = {
+                  ...element,
+                  shape
+                });
+                const color2 = newColor.get(element.id);
+                color2 && color2 !== element.color && (element = {
+                  ...element,
+                  color: color2
+                });
+                const opacity = newOpacity.get(element.id);
+                opacity && opacity !== element.style?.opacity && (element = {
+                  ...element,
+                  style: {
+                    ...element.style,
+                    opacity
+                  }
+                });
+                const border = newBorder.get(element.id);
+                return border && border !== element.style?.border && (element = {
+                  ...element,
+                  style: {
+                    ...element.style,
+                    border
                   }
-                }, data = node.data);
-                const color2 = newColor.get(data.fqn);
-                return color2 && color2 !== data.element.color && (node = {
+                }), element === node.data.element ? node : {
                   ...node,
                   data: {
-                    ...data,
-                    element: {
-                      ...data.element,
-                      color: color2
-                    }
+                    ...node.data,
+                    element
                   }
-                }), node;
+                };
               })
             ), get2().onChange?.({ changes });
           },
@@ -27942,7 +28835,7 @@ function createDiagramStore(props) {
             xyflow.fitView({
               includeHiddenNodes: !0,
               duration: centerNode && focusedNodeId ? 300 : 400,
-              padding: centerNode ? 0 : fitViewPadding,
+              padding: fitViewPadding,
               minZoom: MinZoom,
               maxZoom: 1,
               ...centerNode && { nodes: [centerNode] }
@@ -27989,13 +28882,13 @@ class Queue {
   constructor() {
     this.order = [], this.scheduled = /* @__PURE__ */ new Set();
   }
-  add(process) {
-    if (!this.scheduled.has(process))
-      return this.scheduled.add(process), this.order.push(process), !0;
+  add(process2) {
+    if (!this.scheduled.has(process2))
+      return this.scheduled.add(process2), this.order.push(process2), !0;
   }
-  remove(process) {
-    const index2 = this.order.indexOf(process);
-    index2 !== -1 && (this.order.splice(index2, 1), this.scheduled.delete(process));
+  remove(process2) {
+    const index2 = this.order.indexOf(process2);
+    index2 !== -1 && (this.order.splice(index2, 1), this.scheduled.delete(process2));
   }
   clear() {
     this.order.length = 0, this.scheduled.clear();
@@ -28065,8 +28958,8 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
   };
   return { schedule: stepsOrder.reduce((acc, key) => {
     const step = steps2[key];
-    return acc[key] = (process, keepAlive = !1, immediate = !1) => (runNextFrame || wake2(), step.schedule(process, keepAlive, immediate)), acc;
-  }, {}), cancel: (process) => stepsOrder.forEach((key) => steps2[key].cancel(process)), state, steps: steps2 };
+    return acc[key] = (process2, keepAlive = !1, immediate = !1) => (runNextFrame || wake2(), step.schedule(process2, keepAlive, immediate)), acc;
+  }, {}), cancel: (process2) => stepsOrder.forEach((key) => steps2[key].cancel(process2)), state, steps: steps2 };
 }
 const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, !1);
 function useVisualElement(Component, visualState, props, createVisualElement) {
@@ -28206,19 +29099,19 @@ function useLayoutId({ layoutId }) {
   return layoutGroupId && layoutId !== void 0 ? layoutGroupId + "-" + layoutId : layoutId;
 }
 function createMotionProxy(createConfig) {
-  function custom(Component, customMotionComponentConfig = {}) {
+  function custom5(Component, customMotionComponentConfig = {}) {
     return createMotionComponent(createConfig(Component, customMotionComponentConfig));
   }
   if (typeof Proxy > "u")
-    return custom;
+    return custom5;
   const componentCache = /* @__PURE__ */ new Map();
-  return new Proxy(custom, {
+  return new Proxy(custom5, {
     /**
      * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
      * The prop name is passed through as `key` and we can use that to generate a `motion`
      * DOM component with that name.
      */
-    get: (_target, key) => (componentCache.has(key) || componentCache.set(key, custom(key)), componentCache.get(key))
+    get: (_target, key) => (componentCache.has(key) || componentCache.set(key, custom5(key)), componentCache.get(key))
   });
 }
 const lowercaseSVGElements = [
@@ -28625,14 +29518,14 @@ function getValueState(visualElement) {
     state[0][key] = value.get(), state[1][key] = value.getVelocity();
   }), state;
 }
-function resolveVariantFromProps(props, definition, custom, visualElement) {
+function resolveVariantFromProps(props, definition, custom5, visualElement) {
   if (typeof definition == "function") {
     const [current, velocity] = getValueState(visualElement);
-    definition = definition(custom !== void 0 ? custom : props.custom, current, velocity);
+    definition = definition(custom5 !== void 0 ? custom5 : props.custom, current, velocity);
   }
   if (typeof definition == "string" && (definition = props.variants && props.variants[definition]), typeof definition == "function") {
     const [current, velocity] = getValueState(visualElement);
-    definition = definition(custom !== void 0 ? custom : props.custom, current, velocity);
+    definition = definition(custom5 !== void 0 ? custom5 : props.custom, current, velocity);
   }
   return definition;
 }
@@ -28883,8 +29776,8 @@ class PressGesture extends Feature {
 const observerCallbacks = /* @__PURE__ */ new WeakMap(), observers = /* @__PURE__ */ new WeakMap(), fireObserverCallback = (entry) => {
   const callback = observerCallbacks.get(entry.target);
   callback && callback(entry);
-}, fireAllObserverCallbacks = (entries) => {
-  entries.forEach(fireObserverCallback);
+}, fireAllObserverCallbacks = (entries2) => {
+  entries2.forEach(fireObserverCallback);
 };
 function initIntersectionObserver({ root: root2, ...options }) {
   const lookupRoot = root2 || document;
@@ -28962,9 +29855,9 @@ function shallowCompare(next, prev) {
       return !1;
   return !0;
 }
-function resolveVariant(visualElement, definition, custom) {
+function resolveVariant(visualElement, definition, custom5) {
   const props = visualElement.getProps();
-  return resolveVariantFromProps(props, definition, custom !== void 0 ? custom : props.custom, visualElement);
+  return resolveVariantFromProps(props, definition, custom5 !== void 0 ? custom5 : props.custom, visualElement);
 }
 const secondsToMilliseconds = (seconds) => seconds * 1e3, millisecondsToSeconds = (milliseconds) => milliseconds / 1e3, underDampedSpring = {
   type: "spring",
@@ -30632,8 +31525,8 @@ class PanSession {
       const info2 = getPanInfo(this.lastMoveEventInfo, this.history), isPanStarted = this.startEvent !== null, isDistancePastThreshold = distance2D(info2.offset, { x: 0, y: 0 }) >= 3;
       if (!isPanStarted && !isDistancePastThreshold)
         return;
-      const { point: point2 } = info2, { timestamp: timestamp2 } = frameData;
-      this.history.push({ ...point2, timestamp: timestamp2 });
+      const { point: point3 } = info2, { timestamp: timestamp2 } = frameData;
+      this.history.push({ ...point3, timestamp: timestamp2 });
       const { onStart, onMove } = this.handlers;
       isPanStarted || (onStart && onStart(this.lastMoveEvent, info2), this.startEvent = this.lastMoveEvent), onMove && onMove(this.lastMoveEvent, info2);
     }, this.handlePointerMove = (event2, info2) => {
@@ -30648,8 +31541,8 @@ class PanSession {
     }, !isPrimaryPointer(event))
       return;
     this.dragSnapToOrigin = dragSnapToOrigin, this.handlers = handlers, this.transformPagePoint = transformPagePoint, this.contextWindow = contextWindow || window;
-    const info = extractEventInfo(event), initialInfo = transformPoint(info, this.transformPagePoint), { point } = initialInfo, { timestamp } = frameData;
-    this.history = [{ ...point, timestamp }];
+    const info = extractEventInfo(event), initialInfo = transformPoint(info, this.transformPagePoint), { point: point2 } = initialInfo, { timestamp } = frameData;
+    this.history = [{ ...point2, timestamp }];
     const { onSessionStart } = handlers;
     onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history)), this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
   }
@@ -30666,11 +31559,11 @@ function transformPoint(info, transformPagePoint) {
 function subtractPoint(a, b2) {
   return { x: a.x - b2.x, y: a.y - b2.y };
 }
-function getPanInfo({ point }, history) {
+function getPanInfo({ point: point2 }, history) {
   return {
-    point,
-    delta: subtractPoint(point, lastDevicePoint(history)),
-    offset: subtractPoint(point, startDevicePoint(history)),
+    point: point2,
+    delta: subtractPoint(point2, lastDevicePoint(history)),
+    offset: subtractPoint(point2, startDevicePoint(history)),
     velocity: getVelocity(history, 0.1)
   };
 }
@@ -30722,8 +31615,8 @@ function calcRelativeAxisPosition(target, layout2, parent) {
 function calcRelativePosition(target, layout2, parent) {
   calcRelativeAxisPosition(target.x, layout2.x, parent.x), calcRelativeAxisPosition(target.y, layout2.y, parent.y);
 }
-function applyConstraints(point, { min: min2, max: max2 }, elastic) {
-  return min2 !== void 0 && point < min2 ? point = elastic ? mixNumber$1(min2, point, elastic.min) : Math.max(point, min2) : max2 !== void 0 && point > max2 && (point = elastic ? mixNumber$1(max2, point, elastic.max) : Math.min(point, max2)), point;
+function applyConstraints(point2, { min: min2, max: max2 }, elastic) {
+  return min2 !== void 0 && point2 < min2 ? point2 = elastic ? mixNumber$1(min2, point2, elastic.min) : Math.max(point2, min2) : max2 !== void 0 && point2 > max2 && (point2 = elastic ? mixNumber$1(max2, point2, elastic.max) : Math.min(point2, max2)), point2;
 }
 function calcRelativeAxisConstraints(axis, min2, max2) {
   return {
@@ -30796,10 +31689,10 @@ function convertBoundingBoxToBox({ top, left, right, bottom }) {
 function convertBoxToBoundingBox({ x: x2, y: y2 }) {
   return { top: y2.min, right: x2.max, bottom: y2.max, left: x2.min };
 }
-function transformBoxPoints(point, transformPoint2) {
+function transformBoxPoints(point2, transformPoint2) {
   if (!transformPoint2)
-    return point;
-  const topLeft = transformPoint2({ x: point.left, y: point.top }), bottomRight = transformPoint2({ x: point.right, y: point.bottom });
+    return point2;
+  const topLeft = transformPoint2({ x: point2.left, y: point2.top }), bottomRight = transformPoint2({ x: point2.right, y: point2.bottom });
   return {
     top: topLeft.y,
     left: topLeft.x,
@@ -30822,12 +31715,12 @@ function has2DTranslate(values2) {
 function is2DTranslate(value) {
   return value && value !== "0%";
 }
-function scalePoint(point, scale2, originPoint) {
-  const distanceFromOrigin = point - originPoint, scaled = scale2 * distanceFromOrigin;
+function scalePoint(point2, scale2, originPoint) {
+  const distanceFromOrigin = point2 - originPoint, scaled = scale2 * distanceFromOrigin;
   return originPoint + scaled;
 }
-function applyPointDelta(point, translate, scale2, originPoint, boxScale) {
-  return boxScale !== void 0 && (point = scalePoint(point, boxScale, originPoint)), scalePoint(point, scale2, originPoint) + translate;
+function applyPointDelta(point2, translate, scale2, originPoint, boxScale) {
+  return boxScale !== void 0 && (point2 = scalePoint(point2, boxScale, originPoint)), scalePoint(point2, scale2, originPoint) + translate;
 }
 function applyAxisDelta(axis, translate = 0, scale2 = 1, originPoint, boxScale) {
   axis.min = applyPointDelta(axis.min, translate, scale2, originPoint, boxScale), axis.max = applyPointDelta(axis.max, translate, scale2, originPoint, boxScale);
@@ -31021,7 +31914,7 @@ class VisualElementDragControls {
     const dragKey = `_drag${axis.toUpperCase()}`, props = this.visualElement.getProps(), externalMotionValue = props[dragKey];
     return externalMotionValue || this.visualElement.getValue(axis, (props.initial ? props.initial[axis] : void 0) || 0);
   }
-  snapToCursor(point) {
+  snapToCursor(point2) {
     eachAxis((axis) => {
       const { drag: drag2 } = this.getProps();
       if (!shouldDrag(axis, drag2, this.currentDirection))
@@ -31029,7 +31922,7 @@ class VisualElementDragControls {
       const { projection } = this.visualElement, axisValue = this.getAxisMotionValue(axis);
       if (projection && projection.layout) {
         const { min: min2, max: max2 } = projection.layout.layoutBox[axis];
-        axisValue.set(point[axis] - mixNumber$1(min2, max2, 0.5));
+        axisValue.set(point2[axis] - mixNumber$1(min2, max2, 0.5));
       }
     });
   }
@@ -31283,8 +32176,8 @@ function copyAxisInto(axis, originAxis) {
 function copyBoxInto(box, originBox) {
   copyAxisInto(box.x, originBox.x), copyAxisInto(box.y, originBox.y);
 }
-function removePointDelta(point, translate, scale2, originPoint, boxScale) {
-  return point -= translate, point = scalePoint(point, 1 / scale2, originPoint), boxScale !== void 0 && (point = scalePoint(point, 1 / boxScale, originPoint)), point;
+function removePointDelta(point2, translate, scale2, originPoint, boxScale) {
+  return point2 -= translate, point2 = scalePoint(point2, 1 / scale2, originPoint), boxScale !== void 0 && (point2 = scalePoint(point2, 1 / boxScale, originPoint)), point2;
 }
 function removeAxisDelta(axis, translate = 0, scale2 = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {
   if (percent.test(translate) && (translate = parseFloat(translate), translate = mixNumber$1(sourceAxis.min, sourceAxis.max, translate / 100) - sourceAxis.min), typeof translate != "number")
@@ -32416,13 +33309,13 @@ function PopChild({ children: children2, isPresent }) {
     };
   }, [isPresent]), jsxRuntimeExports.jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size2, children: reactExports.cloneElement(children2, { ref }) });
 }
-const PresenceChild = ({ children: children2, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode }) => {
+const PresenceChild = ({ children: children2, initial, isPresent, onExitComplete, custom: custom5, presenceAffectsLayout, mode }) => {
   const presenceChildren = useConstant(newChildrenMap), id2 = reactExports.useId(), context = reactExports.useMemo(
     () => ({
       id: id2,
       initial,
       isPresent,
-      custom,
+      custom: custom5,
       onExitComplete: (childId) => {
         presenceChildren.set(childId, !0);
         for (const isComplete of presenceChildren.values())
@@ -32464,7 +33357,7 @@ function onlyElements(children2) {
     reactExports.isValidElement(child) && filtered.push(child);
   }), filtered;
 }
-const AnimatePresence = ({ children: children2, custom, initial = !0, onExitComplete, exitBeforeEnter, presenceAffectsLayout = !0, mode = "sync" }) => {
+const AnimatePresence = ({ children: children2, custom: custom5, initial = !0, onExitComplete, exitBeforeEnter, presenceAffectsLayout = !0, mode = "sync" }) => {
   const forceRender = reactExports.useContext(LayoutGroupContext).forceRender || useForceUpdate()[0], isMounted = useIsMounted(), filteredChildren = onlyElements(children2);
   let childrenToRender = filteredChildren;
   const exitingChildren = reactExports.useRef(/* @__PURE__ */ new Map()).current, presentChildren = reactExports.useRef(childrenToRender), allChildren = reactExports.useRef(/* @__PURE__ */ new Map()).current, isInitialRender = reactExports.useRef(!0);
@@ -32505,14 +33398,155 @@ const AnimatePresence = ({ children: children2, custom, initial = !0, onExitComp
           forceRender(), onExitComplete && onExitComplete();
         }
       };
-      exitingComponent = jsxRuntimeExports.jsx(PresenceChild, { isPresent: !1, onExitComplete: onExit, custom, presenceAffectsLayout, mode, children: child }, getChildKey(child)), exitingChildren.set(key, exitingComponent);
+      exitingComponent = jsxRuntimeExports.jsx(PresenceChild, { isPresent: !1, onExitComplete: onExit, custom: custom5, presenceAffectsLayout, mode, children: child }, getChildKey(child)), exitingChildren.set(key, exitingComponent);
     }
     childrenToRender.splice(insertionIndex, 0, exitingComponent);
   }), childrenToRender = childrenToRender.map((child) => {
     const key = child.key;
     return exitingChildren.has(key) ? child : jsxRuntimeExports.jsx(PresenceChild, { isPresent: !0, presenceAffectsLayout, mode, children: child }, getChildKey(child));
   }), jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: exitingChildren.size ? childrenToRender : childrenToRender.map((child) => reactExports.cloneElement(child)) });
-}, {
+};
+var container$3 = "_19ci0hj0", paper = "_19ci0hj1", title$2 = "_19ci0hj2", description$1 = "_19ci0hj3";
+const selector$1 = (s2) => ({
+  id: s2.view.id,
+  title: s2.view.title ?? "untitled",
+  description: s2.view.description,
+  links: s2.view.links
+});
+function DiagramTitlePanel() {
+  const { id: id2, title: title2, description: description2, links } = useDiagramState(selector$1), [isCollapsed, setCollapsed] = useLocalStorage({
+    key: "diagram-title-panel-collapsed",
+    defaultValue: !1
+  }), toggle = () => setCollapsed((v2) => !v2);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    motion.div,
+    {
+      initial: { opacity: 0.05, scale: 0.7 },
+      animate: { opacity: 1, scale: 1 },
+      exit: {
+        opacity: 0.05,
+        scale: 0.6
+      },
+      className: clsx("react-flow__panel", container$3),
+      style: {
+        transformOrigin: "left center"
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Paper,
+        {
+          radius: "sm",
+          withBorder: !isCollapsed,
+          className: paper,
+          p: isCollapsed ? "sm" : "md",
+          onDoubleClick: (e2) => e2.stopPropagation(),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { gap: "sm", justify: "stretch", align: "stretch", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { justify: "stretch", wrap: "nowrap", onClick: toggle, style: { cursor: "pointer" }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Text$1,
+                {
+                  component: "div",
+                  flex: "1",
+                  size: isCollapsed ? "sm" : "lg",
+                  fw: 500,
+                  lh: 1.1,
+                  className: title$2,
+                  children: title2
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                Text$1,
+                {
+                  hidden: isCollapsed,
+                  component: "div",
+                  flex: "0 0 auto",
+                  inline: !0,
+                  size: "xs",
+                  fz: 9,
+                  fw: 500,
+                  c: "dimmed",
+                  style: {
+                    userSelect: "all"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { style: { userSelect: "none" }, children: [
+                      "id:",
+                      " "
+                    ] }),
+                    id2
+                  ]
+                }
+              )
+            ] }),
+            !isCollapsed && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+              description2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Spoiler,
+                {
+                  maxHeight: 42,
+                  showLabel: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", children: "show more" }),
+                  hideLabel: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", children: "hide" }),
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Text$1,
+                    {
+                      component: "div",
+                      size: "sm",
+                      className: description$1,
+                      children: description2 || "no description"
+                    }
+                  )
+                }
+              ),
+              !description2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Text$1,
+                {
+                  component: "div",
+                  size: "xs",
+                  c: "dimmed",
+                  children: "no description"
+                }
+              ),
+              links && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Stack,
+                {
+                  gap: 3,
+                  justify: "stretch",
+                  align: "stretch",
+                  children: links.map((link) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { wrap: "nowrap", align: "center", gap: "sm", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { flex: "1", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Anchor,
+                      {
+                        href: link,
+                        target: "_blank",
+                        fz: "xs",
+                        truncate: "end",
+                        display: "inline-block",
+                        w: "100%",
+                        children: link
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { value: link, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Button,
+                      {
+                        size: "compact-xs",
+                        fz: "10",
+                        variant: "light",
+                        onClick: copy,
+                        color: copied ? "teal" : "gray",
+                        children: copied ? "copied" : "copy"
+                      }
+                    ) })
+                  ] }, link))
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    },
+    id2
+  ) });
+}
+var panel = "_12rmdgk0";
+const {
   primary,
   secondary,
   muted,
@@ -32529,7 +33563,16 @@ function NodeOptions({ selectedNodeIds }) {
   const diagramApi = useDiagramStoreApi(), nodes = useXYNodesData(selectedNodeIds);
   if (!hasAtLeast(nodes, 1))
     return null;
-  const showShapeOption = nodes.some((node) => node.type === "element"), [firstNode, ...rest] = nodes;
+  if (nodes.length !== selectedNodeIds.length)
+    throw new Error("NodeOptions: nodes and props.nodes should have the same length");
+  const showShapeOption = nodes.some((node) => node.type === "element"), [firstNode, ...rest] = nodes, showOpacityOption = rest.length === 0 && firstNode.type === "compound", triggerChange = (style2) => {
+    const targets = nodes.map((node) => node.data.element.id);
+    invariant$1(hasAtLeast(targets, 1), "At least one target is required"), diagramApi.getState().triggerOnChange([{
+      op: "change-element-style",
+      style: style2,
+      targets
+    }]);
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { maw: 200, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { size: "xs", c: rest.length > 0 ? "dimmed" : "", truncate: !0, children: rest.length === 0 ? firstNode.data.element.title : "[ multiple ]" }) }),
     showShapeOption && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -32537,14 +33580,7 @@ function NodeOptions({ selectedNodeIds }) {
       {
         nodes,
         onShapeChange: (shape) => {
-          const targets = [];
-          for (const nd2 of nodes)
-            nd2.data.element.shape !== shape && targets.push(nd2.data.element.id);
-          hasAtLeast(targets, 1) && diagramApi.getState().triggerOnChange([{
-            op: "change-shape",
-            shape,
-            targets
-          }]);
+          triggerChange({ shape });
         }
       }
     ),
@@ -32553,18 +33589,32 @@ function NodeOptions({ selectedNodeIds }) {
       {
         nodes,
         onColorChange: (color2) => {
-          const targets = [];
-          for (const nd2 of nodes)
-            nd2.data.element.color !== color2 && targets.push(nd2.data.element.id);
-          hasAtLeast(targets, 1) && diagramApi.getState().triggerOnChange([{
-            op: "change-color",
-            color: color2,
-            targets
-          }]);
+          triggerChange({ color: color2 });
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(NavigateToOption, { nodes })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(NavigateToOption, { nodes }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { children: showOpacityOption && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { label: "opacity and border", labelPosition: "left" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        OpacityOption,
+        {
+          node: firstNode,
+          onOpacityChange: (opacity) => {
+            triggerChange({ opacity });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        BorderStyleOption,
+        {
+          node: firstNode,
+          onChange: (border) => {
+            triggerChange({ border });
+          }
+        }
+      )
+    ] }) }, firstNode.id)
   ] });
 }
 function Colors({
@@ -32670,8 +33720,54 @@ function NavigateToOption({
     )
   ] });
 }
-var panel = "_12rmdgk0";
-const OptionsPanelMemo = /* @__PURE__ */ reactExports.memo(function() {
+function OpacityOption({
+  node,
+  onOpacityChange
+}) {
+  let selectedOpacity = node.data.element.style.opacity ?? 100;
+  const [value, setValue] = reactExports.useState(selectedOpacity);
+  return reactExports.useEffect(() => {
+    setValue(selectedOpacity);
+  }, [selectedOpacity]), /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Slider,
+    {
+      mt: "xs",
+      size: "sm",
+      color: "dark",
+      value,
+      onChange: setValue,
+      onChangeEnd: onOpacityChange
+    }
+  );
+}
+function BorderStyleOption({
+  node,
+  onChange
+}) {
+  let selecteBorderStyle = node.data.element.style.border ?? "dashed";
+  const [value, setValue] = reactExports.useState(selecteBorderStyle);
+  return reactExports.useEffect(() => {
+    setValue(selecteBorderStyle);
+  }, [selecteBorderStyle]), /* @__PURE__ */ jsxRuntimeExports.jsx(Box$1, { mt: "md", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SegmentedControl,
+    {
+      size: "xs",
+      fullWidth: !0,
+      withItemsBorders: !1,
+      value,
+      onChange: (v2) => {
+        setValue(v2), onChange(v2);
+      },
+      data: [
+        { label: "Solid", value: "solid" },
+        { label: "Dashed", value: "dashed" },
+        { label: "Dotted", value: "dotted" },
+        { label: "None", value: "none" }
+      ]
+    }
+  ) });
+}
+function OptionsPanel() {
   const [selectedNodes, setSelectedNodes] = reactExports.useState([]);
   return useOnSelectionChange({
     onChange: ({ nodes }) => {
@@ -32695,7 +33791,7 @@ const OptionsPanelMemo = /* @__PURE__ */ reactExports.memo(function() {
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card$1, { shadow: "sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx(NodeOptions, { selectedNodeIds: selectedNodes }) })
     }
   ) });
-}), OptionsPanel2 = OptionsPanelMemo;
+}
 function deriveEdgePoints(bezierSpline) {
   let [start2, ...bezierPoints] = bezierSpline;
   invariant$1(start2, "start should be defined");
@@ -32850,12 +33946,12 @@ function FitViewOnDiagramChanges() {
       (s2) => s2.viewportChanged,
       setViewportMoved
     ),
-    [diagramApi]
+    [diagramApi, setViewportMoved]
   ), useRafEffect(
     () => {
       !isReady || processedChangeId === pendingChangeId || (diagramApi.getState().fitDiagram(), setProcessed(pendingChangeId));
     },
-    [isReady, processedChangeId, pendingChangeId]
+    [isReady, processedChangeId, pendingChangeId, diagramApi]
   ), !viewportMoved && isReady ? /* @__PURE__ */ jsxRuntimeExports.jsx(FitViewOnViewportResize, { diagramApi }) : null;
 }
 const selectFitViewFlag = (s2) => s2.fitViewEnabled, FitViewOnDiagramChange = reactExports.memo(() => useDiagramState(selectFitViewFlag) ? /* @__PURE__ */ jsxRuntimeExports.jsx(FitViewOnDiagramChanges, {}) : null);
@@ -32871,13 +33967,19 @@ const isSameNode = (a) => (b2) => a.id === b2.id && a.type === b2.type && Object
     (state) => ({
       viewId: state.view.id,
       nodes: state.view.nodes,
-      edges: state.view.edges,
-      draggable: state.nodesDraggable,
-      selectable: state.nodesSelectable
+      edges: state.view.edges
     }),
     // listener
-    ({ viewId, nodes, edges, ...opts }) => {
-      const { lastOnNavigate } = diagramStoreApi.getState(), updates = diagramViewToXYFlowData({ nodes, edges }, opts);
+    ({ viewId, nodes, edges }) => {
+      const {
+        lastOnNavigate,
+        nodesDraggable,
+        nodesSelectable,
+        focusedNodeId
+      } = diagramStoreApi.getState(), updates = diagramViewToXYFlowData({ nodes, edges }, {
+        draggable: nodesDraggable,
+        selectable: nodesSelectable || focusedNodeId !== null
+      });
       if (xyflowRef.current.setNodes(
         (prev) => updates.nodes.map((update) => {
           const existing = prev.find(isSameNode(update));
@@ -32980,7 +34082,373 @@ function assignInlineVars(varsOrContract, tokens) {
     writable: !1
   }), styles;
 }
-var container$2 = "yi2p6v0", edgePathBg = "yi2p6v1", fillStrokeCtx = "yi2p6v2", cssEdgePath = "yi2p6v3", varLabelX = "var(--yi2p6v4)", varLabelY = "var(--yi2p6v5)", edgeLabel = "yi2p6v7", edgeLabelBody = "yi2p6v8";
+function constant(x2) {
+  return function() {
+    return x2;
+  };
+}
+const epsilon$1 = 1e-12, pi = Math.PI, tau = 2 * pi, epsilon = 1e-6, tauEpsilon = tau - epsilon;
+function append(strings) {
+  this._ += strings[0];
+  for (let i2 = 1, n2 = strings.length; i2 < n2; ++i2)
+    this._ += arguments[i2] + strings[i2];
+}
+function appendRound(digits) {
+  let d2 = Math.floor(digits);
+  if (!(d2 >= 0))
+    throw new Error(`invalid digits: ${digits}`);
+  if (d2 > 15)
+    return append;
+  const k2 = 10 ** d2;
+  return function(strings) {
+    this._ += strings[0];
+    for (let i2 = 1, n2 = strings.length; i2 < n2; ++i2)
+      this._ += Math.round(arguments[i2] * k2) / k2 + strings[i2];
+  };
+}
+class Path {
+  constructor(digits) {
+    this._x0 = this._y0 = // start of current subpath
+    this._x1 = this._y1 = null, this._ = "", this._append = digits == null ? append : appendRound(digits);
+  }
+  moveTo(x2, y2) {
+    this._append`M${this._x0 = this._x1 = +x2},${this._y0 = this._y1 = +y2}`;
+  }
+  closePath() {
+    this._x1 !== null && (this._x1 = this._x0, this._y1 = this._y0, this._append`Z`);
+  }
+  lineTo(x2, y2) {
+    this._append`L${this._x1 = +x2},${this._y1 = +y2}`;
+  }
+  quadraticCurveTo(x1, y1, x2, y2) {
+    this._append`Q${+x1},${+y1},${this._x1 = +x2},${this._y1 = +y2}`;
+  }
+  bezierCurveTo(x1, y1, x2, y2, x3, y3) {
+    this._append`C${+x1},${+y1},${+x2},${+y2},${this._x1 = +x3},${this._y1 = +y3}`;
+  }
+  arcTo(x1, y1, x2, y2, r2) {
+    if (x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r2 = +r2, r2 < 0)
+      throw new Error(`negative radius: ${r2}`);
+    let x0 = this._x1, y0 = this._y1, x21 = x2 - x1, y21 = y2 - y1, x01 = x0 - x1, y01 = y0 - y1, l01_2 = x01 * x01 + y01 * y01;
+    if (this._x1 === null)
+      this._append`M${this._x1 = x1},${this._y1 = y1}`;
+    else if (l01_2 > epsilon)
+      if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r2)
+        this._append`L${this._x1 = x1},${this._y1 = y1}`;
+      else {
+        let x20 = x2 - x0, y20 = y2 - y0, l21_2 = x21 * x21 + y21 * y21, l20_2 = x20 * x20 + y20 * y20, l21 = Math.sqrt(l21_2), l01 = Math.sqrt(l01_2), l2 = r2 * Math.tan((pi - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2), t01 = l2 / l01, t21 = l2 / l21;
+        Math.abs(t01 - 1) > epsilon && this._append`L${x1 + t01 * x01},${y1 + t01 * y01}`, this._append`A${r2},${r2},0,0,${+(y01 * x20 > x01 * y20)},${this._x1 = x1 + t21 * x21},${this._y1 = y1 + t21 * y21}`;
+      }
+  }
+  arc(x2, y2, r2, a0, a1, ccw) {
+    if (x2 = +x2, y2 = +y2, r2 = +r2, ccw = !!ccw, r2 < 0)
+      throw new Error(`negative radius: ${r2}`);
+    let dx = r2 * Math.cos(a0), dy = r2 * Math.sin(a0), x0 = x2 + dx, y0 = y2 + dy, cw = 1 ^ ccw, da2 = ccw ? a0 - a1 : a1 - a0;
+    this._x1 === null ? this._append`M${x0},${y0}` : (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) && this._append`L${x0},${y0}`, r2 && (da2 < 0 && (da2 = da2 % tau + tau), da2 > tauEpsilon ? this._append`A${r2},${r2},0,1,${cw},${x2 - dx},${y2 - dy}A${r2},${r2},0,1,${cw},${this._x1 = x0},${this._y1 = y0}` : da2 > epsilon && this._append`A${r2},${r2},0,${+(da2 >= pi)},${cw},${this._x1 = x2 + r2 * Math.cos(a1)},${this._y1 = y2 + r2 * Math.sin(a1)}`);
+  }
+  rect(x2, y2, w2, h2) {
+    this._append`M${this._x0 = this._x1 = +x2},${this._y0 = this._y1 = +y2}h${w2 = +w2}v${+h2}h${-w2}Z`;
+  }
+  toString() {
+    return this._;
+  }
+}
+function withPath(shape) {
+  let digits = 3;
+  return shape.digits = function(_2) {
+    if (!arguments.length)
+      return digits;
+    if (_2 == null)
+      digits = null;
+    else {
+      const d2 = Math.floor(_2);
+      if (!(d2 >= 0))
+        throw new RangeError(`invalid digits: ${_2}`);
+      digits = d2;
+    }
+    return shape;
+  }, () => new Path(digits);
+}
+function array(x2) {
+  return typeof x2 == "object" && "length" in x2 ? x2 : Array.from(x2);
+}
+function Linear(context) {
+  this._context = context;
+}
+Linear.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._point = 0;
+  },
+  lineEnd: function() {
+    (this._line || this._line !== 0 && this._point === 1) && this._context.closePath(), this._line = 1 - this._line;
+  },
+  point: function(x2, y2) {
+    switch (x2 = +x2, y2 = +y2, this._point) {
+      case 0:
+        this._point = 1, this._line ? this._context.lineTo(x2, y2) : this._context.moveTo(x2, y2);
+        break;
+      case 1:
+        this._point = 2;
+      default:
+        this._context.lineTo(x2, y2);
+        break;
+    }
+  }
+};
+function curveLinear(context) {
+  return new Linear(context);
+}
+function x$1(p2) {
+  return p2[0];
+}
+function y$1(p2) {
+  return p2[1];
+}
+function d3line(x2, y2) {
+  var defined = constant(!0), context = null, curve2 = curveLinear, output = null, path = withPath(line);
+  x2 = typeof x2 == "function" ? x2 : x2 === void 0 ? x$1 : constant(x2), y2 = typeof y2 == "function" ? y2 : y2 === void 0 ? y$1 : constant(y2);
+  function line(data) {
+    var i2, n2 = (data = array(data)).length, d2, defined0 = !1, buffer;
+    for (context == null && (output = curve2(buffer = path())), i2 = 0; i2 <= n2; ++i2)
+      !(i2 < n2 && defined(d2 = data[i2], i2, data)) === defined0 && ((defined0 = !defined0) ? output.lineStart() : output.lineEnd()), defined0 && output.point(+x2(d2, i2, data), +y2(d2, i2, data));
+    if (buffer)
+      return output = null, buffer + "" || null;
+  }
+  return line.x = function(_2) {
+    return arguments.length ? (x2 = typeof _2 == "function" ? _2 : constant(+_2), line) : x2;
+  }, line.y = function(_2) {
+    return arguments.length ? (y2 = typeof _2 == "function" ? _2 : constant(+_2), line) : y2;
+  }, line.defined = function(_2) {
+    return arguments.length ? (defined = typeof _2 == "function" ? _2 : constant(!!_2), line) : defined;
+  }, line.curve = function(_2) {
+    return arguments.length ? (curve2 = _2, context != null && (output = curve2(context)), line) : curve2;
+  }, line.context = function(_2) {
+    return arguments.length ? (_2 == null ? context = output = null : output = curve2(context = _2), line) : context;
+  }, line;
+}
+function point$1(that, x2, y2) {
+  that._context.bezierCurveTo(
+    that._x1 + that._k * (that._x2 - that._x0),
+    that._y1 + that._k * (that._y2 - that._y0),
+    that._x2 + that._k * (that._x1 - x2),
+    that._y2 + that._k * (that._y1 - y2),
+    that._x2,
+    that._y2
+  );
+}
+function Cardinal(context, tension) {
+  this._context = context, this._k = (1 - tension) / 6;
+}
+Cardinal.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._x0 = this._x1 = this._x2 = this._y0 = this._y1 = this._y2 = NaN, this._point = 0;
+  },
+  lineEnd: function() {
+    switch (this._point) {
+      case 2:
+        this._context.lineTo(this._x2, this._y2);
+        break;
+      case 3:
+        point$1(this, this._x1, this._y1);
+        break;
+    }
+    (this._line || this._line !== 0 && this._point === 1) && this._context.closePath(), this._line = 1 - this._line;
+  },
+  point: function(x2, y2) {
+    switch (x2 = +x2, y2 = +y2, this._point) {
+      case 0:
+        this._point = 1, this._line ? this._context.lineTo(x2, y2) : this._context.moveTo(x2, y2);
+        break;
+      case 1:
+        this._point = 2, this._x1 = x2, this._y1 = y2;
+        break;
+      case 2:
+        this._point = 3;
+      default:
+        point$1(this, x2, y2);
+        break;
+    }
+    this._x0 = this._x1, this._x1 = this._x2, this._x2 = x2, this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
+  }
+};
+(function custom(tension) {
+  function cardinal(context) {
+    return new Cardinal(context, tension);
+  }
+  return cardinal.tension = function(tension2) {
+    return custom(+tension2);
+  }, cardinal;
+})(0);
+function CardinalOpen(context, tension) {
+  this._context = context, this._k = (1 - tension) / 6;
+}
+CardinalOpen.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._x0 = this._x1 = this._x2 = this._y0 = this._y1 = this._y2 = NaN, this._point = 0;
+  },
+  lineEnd: function() {
+    (this._line || this._line !== 0 && this._point === 3) && this._context.closePath(), this._line = 1 - this._line;
+  },
+  point: function(x2, y2) {
+    switch (x2 = +x2, y2 = +y2, this._point) {
+      case 0:
+        this._point = 1;
+        break;
+      case 1:
+        this._point = 2;
+        break;
+      case 2:
+        this._point = 3, this._line ? this._context.lineTo(this._x2, this._y2) : this._context.moveTo(this._x2, this._y2);
+        break;
+      case 3:
+        this._point = 4;
+      default:
+        point$1(this, x2, y2);
+        break;
+    }
+    this._x0 = this._x1, this._x1 = this._x2, this._x2 = x2, this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
+  }
+};
+(function custom2(tension) {
+  function cardinal(context) {
+    return new CardinalOpen(context, tension);
+  }
+  return cardinal.tension = function(tension2) {
+    return custom2(+tension2);
+  }, cardinal;
+})(0);
+function point(that, x2, y2) {
+  var x1 = that._x1, y1 = that._y1, x22 = that._x2, y22 = that._y2;
+  if (that._l01_a > epsilon$1) {
+    var a = 2 * that._l01_2a + 3 * that._l01_a * that._l12_a + that._l12_2a, n2 = 3 * that._l01_a * (that._l01_a + that._l12_a);
+    x1 = (x1 * a - that._x0 * that._l12_2a + that._x2 * that._l01_2a) / n2, y1 = (y1 * a - that._y0 * that._l12_2a + that._y2 * that._l01_2a) / n2;
+  }
+  if (that._l23_a > epsilon$1) {
+    var b2 = 2 * that._l23_2a + 3 * that._l23_a * that._l12_a + that._l12_2a, m2 = 3 * that._l23_a * (that._l23_a + that._l12_a);
+    x22 = (x22 * b2 + that._x1 * that._l23_2a - x2 * that._l12_2a) / m2, y22 = (y22 * b2 + that._y1 * that._l23_2a - y2 * that._l12_2a) / m2;
+  }
+  that._context.bezierCurveTo(x1, y1, x22, y22, that._x2, that._y2);
+}
+function CatmullRom(context, alpha2) {
+  this._context = context, this._alpha = alpha2;
+}
+CatmullRom.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._x0 = this._x1 = this._x2 = this._y0 = this._y1 = this._y2 = NaN, this._l01_a = this._l12_a = this._l23_a = this._l01_2a = this._l12_2a = this._l23_2a = this._point = 0;
+  },
+  lineEnd: function() {
+    switch (this._point) {
+      case 2:
+        this._context.lineTo(this._x2, this._y2);
+        break;
+      case 3:
+        this.point(this._x2, this._y2);
+        break;
+    }
+    (this._line || this._line !== 0 && this._point === 1) && this._context.closePath(), this._line = 1 - this._line;
+  },
+  point: function(x2, y2) {
+    if (x2 = +x2, y2 = +y2, this._point) {
+      var x23 = this._x2 - x2, y23 = this._y2 - y2;
+      this._l23_a = Math.sqrt(this._l23_2a = Math.pow(x23 * x23 + y23 * y23, this._alpha));
+    }
+    switch (this._point) {
+      case 0:
+        this._point = 1, this._line ? this._context.lineTo(x2, y2) : this._context.moveTo(x2, y2);
+        break;
+      case 1:
+        this._point = 2;
+        break;
+      case 2:
+        this._point = 3;
+      default:
+        point(this, x2, y2);
+        break;
+    }
+    this._l01_a = this._l12_a, this._l12_a = this._l23_a, this._l01_2a = this._l12_2a, this._l12_2a = this._l23_2a, this._x0 = this._x1, this._x1 = this._x2, this._x2 = x2, this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
+  }
+};
+(function custom3(alpha2) {
+  function catmullRom(context) {
+    return alpha2 ? new CatmullRom(context, alpha2) : new Cardinal(context, 0);
+  }
+  return catmullRom.alpha = function(alpha3) {
+    return custom3(+alpha3);
+  }, catmullRom;
+})(0.5);
+function CatmullRomOpen(context, alpha2) {
+  this._context = context, this._alpha = alpha2;
+}
+CatmullRomOpen.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._x0 = this._x1 = this._x2 = this._y0 = this._y1 = this._y2 = NaN, this._l01_a = this._l12_a = this._l23_a = this._l01_2a = this._l12_2a = this._l23_2a = this._point = 0;
+  },
+  lineEnd: function() {
+    (this._line || this._line !== 0 && this._point === 3) && this._context.closePath(), this._line = 1 - this._line;
+  },
+  point: function(x2, y2) {
+    if (x2 = +x2, y2 = +y2, this._point) {
+      var x23 = this._x2 - x2, y23 = this._y2 - y2;
+      this._l23_a = Math.sqrt(this._l23_2a = Math.pow(x23 * x23 + y23 * y23, this._alpha));
+    }
+    switch (this._point) {
+      case 0:
+        this._point = 1;
+        break;
+      case 1:
+        this._point = 2;
+        break;
+      case 2:
+        this._point = 3, this._line ? this._context.lineTo(this._x2, this._y2) : this._context.moveTo(this._x2, this._y2);
+        break;
+      case 3:
+        this._point = 4;
+      default:
+        point(this, x2, y2);
+        break;
+    }
+    this._l01_a = this._l12_a, this._l12_a = this._l23_a, this._l01_2a = this._l12_2a, this._l12_2a = this._l23_2a, this._x0 = this._x1, this._x1 = this._x2, this._x2 = x2, this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
+  }
+};
+const curveCatmullRomOpen = function custom4(alpha2) {
+  function catmullRom(context) {
+    return alpha2 ? new CatmullRomOpen(context, alpha2) : new CardinalOpen(context, 0);
+  }
+  return catmullRom.alpha = function(alpha3) {
+    return custom4(+alpha3);
+  }, catmullRom;
+}(0.5);
+var container$2 = "yi2p6v1", edgePathBg = "yi2p6v2", fillStrokeCtx = "yi2p6v3", cssEdgePath = "yi2p6v6", varLabelX = "var(--yi2p6v7)", varLabelY = "var(--yi2p6v8)", edgeLabel = "yi2p6va", edgeLabelBody = "yi2p6vb";
 function getNodeIntersection(intersectionNode, targetNode) {
   const {
     width: intersectionNodeWidth,
@@ -33042,27 +34510,22 @@ function bezierPath(bezierSpline) {
   }
   return invariant$1(points.length === 0, "all points should be consumed"), path;
 }
-const isSamePoint = (a, b2) => Math.abs(a - b2) < 2.1, isSamePosition = (a, [bx, by]) => isSamePoint(a.x, bx) && isSamePoint(a.y, by), isEqualProps = (prev, next) => prev.id === next.id && prev.source === next.source && prev.target === next.target && isSamePoint(prev.sourceX, next.sourceX) && isSamePoint(prev.sourceY, next.sourceY) && isSamePoint(prev.targetX, next.targetX) && isSamePoint(prev.targetY, next.targetY) && deepEqual(prev.data, next.data), RelationshipEdge = /* @__PURE__ */ reactExports.memo(function({
+const isSamePoint = (a, b2) => Math.abs(a - b2) < 2.1, isSamePosition = (a, [bx, by]) => isSamePoint(a.x, bx) && isSamePoint(a.y, by), isEqualProps = (prev, next) => prev.id === next.id && prev.source === next.source && prev.target === next.target && deepEqual(prev.selected ?? !1, next.selected ?? !1) && isSamePoint(prev.sourceX, next.sourceX) && isSamePoint(prev.sourceY, next.sourceY) && isSamePoint(prev.targetX, next.targetX) && isSamePoint(prev.targetY, next.targetY) && deepEqual(prev.data, next.data), curve = d3line().curve(curveCatmullRomOpen.alpha(1)), RelationshipEdge = /* @__PURE__ */ reactExports.memo(function({
   id: id2,
   data,
   selected: _selected,
-  markerEnd: _markerEnd,
   style: style2,
   source,
   target,
   interactionWidth
 }) {
-  const { nodeLookup, edgeLookup } = useXYStoreApi().getState(), sourceNode = nonNullable(nodeLookup.get(source), `source node ${source} not found`), targetNode = nonNullable(nodeLookup.get(target), `target node ${target} not found`), isNotModified = isSamePosition(sourceNode.internals.positionAbsolute, sourceNode.data.element.position) && isSamePosition(targetNode.internals.positionAbsolute, targetNode.data.element.position);
-  invariant$1(data, "data is required");
-  const {
-    edge
-  } = data, color2 = edge.color ?? "gray", isHovered = useDiagramState((s2) => s2.hoveredEdgeId === id2), line = edge.line ?? "dashed", isDotted = line === "dotted", isDashed = isDotted || line === "dashed";
+  const { nodeLookup, edgeLookup } = useXYStoreApi().getState(), sourceNode = nonNullable(nodeLookup.get(source), `source node ${source} not found`), targetNode = nonNullable(nodeLookup.get(target), `target node ${target} not found`), isNotModified = isSamePosition(sourceNode.internals.positionAbsolute, sourceNode.data.element.position) && isSamePosition(targetNode.internals.positionAbsolute, targetNode.data.element.position), { edge: diagramEdge, controlPoints } = data, color2 = diagramEdge.color ?? "gray", isHovered = useDiagramState((s2) => s2.hoveredEdgeId === id2), line = diagramEdge.line ?? "dashed", isDotted = line === "dotted", isDashed = isDotted || line === "dashed";
   let strokeDasharray;
   isDotted ? strokeDasharray = "1,8" : isDashed && (strokeDasharray = "8,10");
   const marker = `url(#arrow-${id2})`;
   let edgePath, labelX, labelY;
   if (isNotModified)
-    edgePath = bezierPath(edge.points), labelX = data.label?.bbox.x ?? 0, labelY = data.label?.bbox.y ?? 0;
+    edgePath = bezierPath(diagramEdge.points), labelX = data.label?.bbox.x ?? 0, labelY = data.label?.bbox.y ?? 0;
   else {
     const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode), [_edgePath, _labelX, _labelY] = getBezierPath({
       sourceX: sx,
@@ -33073,6 +34536,14 @@ const isSamePoint = (a, b2) => Math.abs(a - b2) < 2.1, isSamePosition = (a, [bx,
       targetY: ty
     });
     edgePath = _edgePath, labelX = _labelX, labelY = _labelY;
+    const sourceCenterPos = getNodePositionWithOrigin(sourceNode, [-0.5, -0.5]), targetCenterPos = getNodePositionWithOrigin(targetNode, [-0.5, -0.5]);
+    edgePath = curve([
+      [sourceCenterPos.positionAbsolute.x, sourceCenterPos.positionAbsolute.y],
+      [sx, sy],
+      ...controlPoints,
+      [tx, ty],
+      [targetCenterPos.positionAbsolute.x, targetCenterPos.positionAbsolute.y]
+    ]);
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { className: clsx(container$2), "data-likec4-color": color2, "data-edge-hovered": isHovered, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("g", { className: clsx(fillStrokeCtx), children: /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -33096,8 +34567,8 @@ const isSamePoint = (a, b2) => Math.abs(a - b2) < 2.1, isSamePosition = (a, [bx,
         edgePath,
         interactionWidth: interactionWidth ?? 10,
         strokeDasharray,
-        markerStart: edge.tailArrow ? marker : void 0,
-        markerEnd: edge.headArrow ? marker : void 0,
+        markerStart: diagramEdge.tailArrow ? marker : void 0,
+        markerEnd: diagramEdge.headArrow ? marker : void 0,
         style: style2
       }
     ),
@@ -33121,7 +34592,7 @@ const isSamePoint = (a, b2) => Math.abs(a - b2) < 2.1, isSamePosition = (a, [bx,
       }
     ) })
   ] });
-}, isEqualProps), RelationshipPath = reactExports.memo(({
+}, isEqualProps), RelationshipPath = ({
   edgePath,
   interactionWidth,
   strokeDasharray,
@@ -33160,7 +34631,7 @@ const isSamePoint = (a, b2) => Math.abs(a - b2) < 2.1, isSamePosition = (a, [bx,
       strokeWidth: interactionWidth
     }
   )
-] })), Link = reactExports.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+] }), Link = reactExports.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   "svg",
   {
     ref,
@@ -33687,6 +35158,36 @@ function ElementNode({
     }
   );
 }
+function SelectEdgesOnNodeFocus() {
+  const focusedNodeId = useDiagramState((s2) => s2.focusedNodeId), xyflowApi = useXYStoreApi();
+  return useUpdateEffect(() => {
+    const edgeChanges = [], nodeChanges = [], { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState();
+    if (focusedNodeId) {
+      for (const edge of edges)
+        edge.source === focusedNodeId || edge.target === focusedNodeId ? edgeChanges.push({
+          id: edge.id,
+          type: "select",
+          selected: !0
+        }) : edge.selected && edgeChanges.push({
+          id: edge.id,
+          type: "select",
+          selected: !1
+        });
+      for (const node of nodes)
+        node.selected && node.id !== focusedNodeId && nodeChanges.push({
+          id: node.id,
+          type: "select",
+          selected: !1
+        });
+      nodeChanges.push({
+        id: focusedNodeId,
+        type: "select",
+        selected: !0
+      }), edgeChanges.length > 0 && triggerEdgeChanges(edgeChanges), nodeChanges.length > 0 && triggerNodeChanges(nodeChanges);
+    } else
+      xyflowApi.getState().resetSelectedElements();
+  }, [focusedNodeId]), null;
+}
 function literalToEnum(value) {
   switch (value) {
     case "dots":
@@ -33704,14 +35205,16 @@ const XYFlowBackground = reactExports.memo(({ background }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Background, { variant: literalToEnum(background) });
   const { variant, ...rest } = background;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Background, { variant: literalToEnum(variant), ...rest });
-}, deepEqual);
+}, deepEqual), viewportDomNode = (state) => state.domNode?.querySelector(".react-flow__viewport") ?? null;
 function useXYFlowEvents() {
-  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), dblclickTimeout = reactExports.useRef(), dbclickGuarg = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
+  const diagramApi = useDiagramStoreApi(), xyflowApi = useXYStoreApi(), dblclickTimeout = reactExports.useRef(), viewportRef = reactExports.useRef(viewportDomNode(xyflowApi.getState())), dbclickGuarg = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
     dblclickTimeout.current = void 0;
-  }, 250), !1);
-  return reactExports.useMemo(() => ({
+  }, 250), !1), transformRef = reactExports.useRef(""), cbRef = reactExports.useRef();
+  return reactExports.useEffect(() => xyflowApi.subscribe((state, prev) => {
+    (state.domNode !== prev.domNode || state.domNode && !viewportRef.current) && (viewportRef.current = viewportDomNode(state));
+  }), [xyflowApi]), reactExports.useMemo(() => ({
     onDoubleClick: (event) => {
-      diagramApi.getState().setLastClickedNode(null), diagramApi.getState().setLastClickedEdge(null);
+      diagramApi.getState().resetLastClicked();
       const diagramState = diagramApi.getState();
       if (diagramState.onCanvasDblClick) {
         diagramState.onCanvasDblClick(event);
@@ -33725,9 +35228,8 @@ function useXYFlowEvents() {
     onPaneClick: (event) => {
       if (dbclickGuarg())
         return;
-      diagramApi.getState().setLastClickedNode(null), diagramApi.getState().setLastClickedEdge(null);
-      const { focusedNodeId, fitDiagram, onCanvasClick } = diagramApi.getState();
-      if (onCanvasClick) {
+      const { focusedNodeId, fitDiagram, onCanvasClick, resetLastClicked } = diagramApi.getState();
+      if (resetLastClicked(), onCanvasClick) {
         onCanvasClick(event);
         return;
       }
@@ -33741,7 +35243,7 @@ function useXYFlowEvents() {
       });
     },
     onPaneContextMenu: (event) => {
-      diagramApi.getState().setLastClickedNode(null), diagramApi.getState().setLastClickedEdge(null), diagramApi.getState().onCanvasContextMenu?.(event);
+      diagramApi.getState().resetLastClicked(), diagramApi.getState().onCanvasContextMenu?.(event);
     },
     onEdgeContextMenu: (event, xyedge) => {
       diagramApi.getState().setLastClickedEdge(xyedge.id), diagramApi.getState().onEdgeContextMenu?.({
@@ -33764,15 +35266,25 @@ function useXYFlowEvents() {
       focusedNodeId && focusedNodeId !== xynode.id && (fitDiagram(xynode), event.stopPropagation());
     },
     onNodeDoubleClick: (event, xynode) => {
-      const { zoomable, fitDiagram, onNodeClick } = diagramApi.getState();
-      onNodeClick || zoomable && (fitDiagram(xynode), event.stopPropagation());
+      diagramApi.getState().setLastClickedNode(xynode.id);
+      const { zoomable, fitViewEnabled, fitDiagram, onNodeClick } = diagramApi.getState();
+      onNodeClick || zoomable && fitViewEnabled && (fitDiagram(xynode), event.stopPropagation());
     },
     onEdgeClick: (event, xyedge) => {
-      diagramApi.getState().setLastClickedEdge(xyedge.id), diagramApi.getState().onEdgeClick?.({
-        relation: xyedge.data.edge,
-        xyedge,
-        event
-      });
+      diagramApi.getState().setLastClickedEdge(xyedge.id);
+      const { focusedNodeId, fitDiagram, onEdgeClick, xyflow } = diagramApi.getState();
+      if (onEdgeClick) {
+        onEdgeClick({
+          relation: xyedge.data.edge,
+          xyedge,
+          event
+        });
+        return;
+      }
+      if (focusedNodeId && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target)) {
+        const nextFocus = focusedNodeId === xyedge.source ? xyedge.target : xyedge.source;
+        fitDiagram(xyflow.getNode(nextFocus)), event.stopPropagation();
+      }
     },
     onMoveEnd: (event, _viewport) => {
       const viewportChanged = !!event;
@@ -33789,6 +35301,19 @@ function useXYFlowEvents() {
     },
     onEdgeMouseLeave: (event, xyedge) => {
       diagramApi.getState().setHoveredEdge(null);
+    },
+    /**
+     * WOKAROUND:
+     * Viewport transform is not rounded to integers which results in blurry nodes on some resolution
+     * https://github.com/xyflow/xyflow/issues/3282
+     */
+    onViewportChange: ({ x: x2, y: y2, zoom: zoom2 }) => {
+      const scale2 = zoom2 != 1 ? zoom2.toFixed(6) : "1";
+      transformRef.current = `translate(${Math.round(x2)}px, ${Math.round(y2)}px) scale(${scale2})`, cbRef.current ??= requestIdleCallback(() => {
+        cbRef.current = void 0, viewportRef.current && viewportRef.current.style.transform !== transformRef.current && (viewportRef.current.style.transform = transformRef.current);
+      }, {
+        timeout: 1e3
+      });
     }
   }), [diagramApi, xyflowApi]);
 }
@@ -33798,7 +35323,7 @@ const nodeTypes = {
 }, edgeTypes = {
   relationship: RelationshipEdge
 }, selector = (s2) => ({
-  nodesSelectable: s2.nodesSelectable,
+  nodesSelectable: s2.nodesSelectable || s2.focusedNodeId !== null,
   nodesDraggable: s2.nodesDraggable,
   fitView: s2.fitViewEnabled,
   fitViewPadding: s2.fitViewPadding,
@@ -33884,6 +35409,7 @@ function XYFlowWrapper({
       onNodeClick: handlers.onNodeClick,
       onNodeDoubleClick: handlers.onNodeDoubleClick,
       onEdgeClick: handlers.onEdgeClick,
+      onViewportChange: handlers.onViewportChange,
       onInit: () => {
         diagramApi.setState({ initialized: !0 }, !1, "initialized");
       },
@@ -33898,7 +35424,8 @@ function XYFlowWrapper({
       },
       children: [
         isBgWithPattern && /* @__PURE__ */ jsxRuntimeExports.jsx(XYFlowBackground, { background }),
-        controls && /* @__PURE__ */ jsxRuntimeExports.jsx(Controls, {}),
+        controls && /* @__PURE__ */ jsxRuntimeExports.jsx(Controls, { position: "bottom-right" }),
+        zoomable && !editor.hasOnNodeClick && /* @__PURE__ */ jsxRuntimeExports.jsx(SelectEdgesOnNodeFocus, {}),
         children2
       ]
     }
@@ -33918,6 +35445,7 @@ function LikeC4Diagram({
   background = "dots",
   controls = !1,
   showElementLinks = !0,
+  showDiagramTitle = !0,
   initialWidth,
   initialHeight,
   keepAspectRatio = !1,
@@ -33978,7 +35506,7 @@ function LikeC4Diagram({
                 enabled: keepAspectRatio,
                 width: view.width,
                 height: view.height,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                   XYFlow,
                   {
                     className: clsx(
@@ -33992,7 +35520,10 @@ function LikeC4Diagram({
                     controls,
                     defaultNodes: initialRef.current.defaultNodes,
                     defaultEdges: initialRef.current.defaultEdges,
-                    children: readonly !== !0 && /* @__PURE__ */ jsxRuntimeExports.jsx(OptionsPanel2, {})
+                    children: [
+                      readonly !== !0 && /* @__PURE__ */ jsxRuntimeExports.jsx(OptionsPanel, {}),
+                      showDiagramTitle === !0 && /* @__PURE__ */ jsxRuntimeExports.jsx(DiagramTitlePanel, {})
+                    ]
                   }
                 )
               }
@@ -34026,6 +35557,7 @@ function StaticLikeC4Diagram({
       controls: !1,
       background,
       showElementLinks: !0,
+      showDiagramTitle: !1,
       nodesSelectable: !1,
       nodesDraggable: !1,
       ...rest
@@ -34232,7 +35764,7 @@ function useLikeC4View(id2) {
     keys: [id2]
   })[id2] ?? null;
 }
-var previewBg = "_15b5f732", cssPreviewCardLink = "_1dn84dq0", svgContainer = "_1dn84dq1", cssViewOutlet = "_1dn84dq2", cssCaptureGesturesLayer = "_1dn84dq3", cssExportView = "_1dn84dq4", cssWebcomponentView = "_1dn84dq5", cssWebcomponentIframeContainer = "_1dn84dq6";
+var previewBg = "_15b5f732", cssPreviewCardLink = "_1dn84dq0", svgContainer = "_1dn84dq1", cssViewOutlet = "_1dn84dq2", cssCaptureGesturesLayer = "_1dn84dq3", cssExportView = "_1dn84dq4", cssExportBox = "_1dn84dq5", cssWebcomponentView = "_1dn84dq6", cssWebcomponentIframeContainer = "_1dn84dq7";
 const $viewGroups = batched($views, (views) => {
   const byPath = groupBy(values(views), (v2) => v2.relativePath ?? "");
   return Object.entries(byPath).map(([path, views2]) => ({
@@ -36082,7 +37614,11 @@ const Route$3 = createFileRoute("/export/$viewId")({
 });
 function ExportPage() {
   const { padding = 20 } = Route$3.useSearch(), { viewId } = Route$3.useParams(), diagram = useLikeC4View(viewId);
-  if (useTransparentBackground(), !diagram)
+  if (useTransparentBackground(), reactExports.useEffect(() => {
+    document.querySelectorAll(".react-flow__viewport").forEach((el2) => {
+      el2.style.transform = "";
+    });
+  }), !diagram)
     throw notFound();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box$1,
@@ -36094,21 +37630,34 @@ function ExportPage() {
         padding
       },
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        LikeC4Diagram,
+        Box$1,
         {
-          view: diagram,
-          readonly: !0,
-          fitView: !1,
-          fitViewPadding: 0,
-          pannable: !1,
-          zoomable: !1,
-          controls: !1,
-          background: "transparent",
-          showElementLinks: !1,
-          nodesSelectable: !1,
-          nodesDraggable: !1,
-          initialWidth: diagram.width,
-          initialHeight: diagram.height
+          className: cssExportBox,
+          style: {
+            width: diagram.width,
+            minWidth: diagram.width,
+            height: diagram.height,
+            minHeight: diagram.height
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LikeC4Diagram,
+            {
+              view: diagram,
+              readonly: !0,
+              fitView: !1,
+              fitViewPadding: 0,
+              pannable: !1,
+              zoomable: !1,
+              controls: !1,
+              background: "transparent",
+              showElementLinks: !1,
+              showDiagramTitle: !1,
+              nodesSelectable: !1,
+              nodesDraggable: !1,
+              initialWidth: diagram.width,
+              initialHeight: diagram.height
+            }
+          )
         }
       )
     }
@@ -36226,22 +37775,22 @@ const ViewViewIdReactLegacyLazyImport = createFileRoute(
   path: "/react-legacy",
   getParentRoute: () => ViewViewIdRoute
 }).lazy(
-  () => import("./view._viewId.react-legacy.lazy-DvQqUilU.js").then((d2) => d2.Route)
+  () => import("./view._viewId.react-legacy.lazy-B2RpQXJ8.js").then((d2) => d2.Route)
 ), ViewViewIdMmdLazyRoute = ViewViewIdMmdLazyImport.update({
   path: "/mmd",
   getParentRoute: () => ViewViewIdRoute
 }).lazy(
-  () => import("./view._viewId.mmd.lazy-o20hkhat.js").then((d2) => d2.Route)
+  () => import("./view._viewId.mmd.lazy-DUPqzS9E.js").then((d2) => d2.Route)
 ), ViewViewIdDotLazyRoute = ViewViewIdDotLazyImport.update({
   path: "/dot",
   getParentRoute: () => ViewViewIdRoute
 }).lazy(
-  () => import("./view._viewId.dot.lazy-_gnghLVA.js").then((d2) => d2.Route)
+  () => import("./view._viewId.dot.lazy-BpPRcji5.js").then((d2) => d2.Route)
 ), ViewViewIdD2LazyRoute = ViewViewIdD2LazyImport.update({
   path: "/d2",
   getParentRoute: () => ViewViewIdRoute
 }).lazy(
-  () => import("./view._viewId.d2.lazy-BX8VfXLS.js").then((d2) => d2.Route)
+  () => import("./view._viewId.d2.lazy-BeClYUla.js").then((d2) => d2.Route)
 ), ViewViewIdEditorRoute = Route2.update({
   path: "/editor",
   getParentRoute: () => ViewViewIdRoute