@helpwave/hightide 0.1.48 → 0.2.0

package/dist/index.js

@@ -29,135 +29,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
-var require_use_sync_external_store_shim_production = __commonJS({
-  "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports2) {
-    "use strict";
-    var React21 = require("react");
-    function is(x, y) {
-      return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
-    }
-    var objectIs = "function" === typeof Object.is ? Object.is : is;
-    var useState37 = React21.useState;
-    var useEffect40 = React21.useEffect;
-    var useLayoutEffect3 = React21.useLayoutEffect;
-    var useDebugValue = React21.useDebugValue;
-    function useSyncExternalStore$2(subscribe2, getSnapshot) {
-      var value = getSnapshot(), _useState = useState37({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
-      useLayoutEffect3(
-        function() {
-          inst.value = value;
-          inst.getSnapshot = getSnapshot;
-          checkIfSnapshotChanged(inst) && forceUpdate({ inst });
-        },
-        [subscribe2, value, getSnapshot]
-      );
-      useEffect40(
-        function() {
-          checkIfSnapshotChanged(inst) && forceUpdate({ inst });
-          return subscribe2(function() {
-            checkIfSnapshotChanged(inst) && forceUpdate({ inst });
-          });
-        },
-        [subscribe2]
-      );
-      useDebugValue(value);
-      return value;
-    }
-    function checkIfSnapshotChanged(inst) {
-      var latestGetSnapshot = inst.getSnapshot;
-      inst = inst.value;
-      try {
-        var nextValue = latestGetSnapshot();
-        return !objectIs(inst, nextValue);
-      } catch (error) {
-        return true;
-      }
-    }
-    function useSyncExternalStore$1(subscribe2, getSnapshot) {
-      return getSnapshot();
-    }
-    var shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
-    exports2.useSyncExternalStore = void 0 !== React21.useSyncExternalStore ? React21.useSyncExternalStore : shim;
-  }
-});
-
-// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
-var require_use_sync_external_store_shim_development = __commonJS({
-  "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports2) {
-    "use strict";
-    "production" !== process.env.NODE_ENV && function() {
-      function is(x, y) {
-        return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
-      }
-      function useSyncExternalStore$2(subscribe2, getSnapshot) {
-        didWarnOld18Alpha || void 0 === React21.startTransition || (didWarnOld18Alpha = true, console.error(
-          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
-        ));
-        var value = getSnapshot();
-        if (!didWarnUncachedGetSnapshot) {
-          var cachedValue = getSnapshot();
-          objectIs(value, cachedValue) || (console.error(
-            "The result of getSnapshot should be cached to avoid an infinite loop"
-          ), didWarnUncachedGetSnapshot = true);
-        }
-        cachedValue = useState37({
-          inst: { value, getSnapshot }
-        });
-        var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
-        useLayoutEffect3(
-          function() {
-            inst.value = value;
-            inst.getSnapshot = getSnapshot;
-            checkIfSnapshotChanged(inst) && forceUpdate({ inst });
-          },
-          [subscribe2, value, getSnapshot]
-        );
-        useEffect40(
-          function() {
-            checkIfSnapshotChanged(inst) && forceUpdate({ inst });
-            return subscribe2(function() {
-              checkIfSnapshotChanged(inst) && forceUpdate({ inst });
-            });
-          },
-          [subscribe2]
-        );
-        useDebugValue(value);
-        return value;
-      }
-      function checkIfSnapshotChanged(inst) {
-        var latestGetSnapshot = inst.getSnapshot;
-        inst = inst.value;
-        try {
-          var nextValue = latestGetSnapshot();
-          return !objectIs(inst, nextValue);
-        } catch (error) {
-          return true;
-        }
-      }
-      function useSyncExternalStore$1(subscribe2, getSnapshot) {
-        return getSnapshot();
-      }
-      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React21 = require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState37 = React21.useState, useEffect40 = React21.useEffect, useLayoutEffect3 = React21.useLayoutEffect, useDebugValue = React21.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
-      exports2.useSyncExternalStore = void 0 !== React21.useSyncExternalStore ? React21.useSyncExternalStore : shim;
-      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-    }();
-  }
-});
-
-// node_modules/use-sync-external-store/shim/index.js
-var require_shim = __commonJS({
-  "node_modules/use-sync-external-store/shim/index.js"(exports2, module2) {
-    "use strict";
-    if (process.env.NODE_ENV === "production") {
-      module2.exports = require_use_sync_external_store_shim_production();
-    } else {
-      module2.exports = require_use_sync_external_store_shim_development();
-    }
-  }
-});
-
 // node_modules/@swc/helpers/cjs/_interop_require_default.cjs
 var require_interop_require_default = __commonJS({
   "node_modules/@swc/helpers/cjs/_interop_require_default.cjs"(exports2) {
@@ -2712,7 +2583,7 @@ var require_image_component = __commonJS({
     Object.defineProperty(exports2, "Image", {
       enumerable: true,
       get: function() {
-        return Image3;
+        return Image2;
       }
     });
     var _interop_require_default = require_interop_require_default();
@@ -2920,7 +2791,7 @@ var require_image_component = __commonJS({
         }, "__nimg-" + imgAttributes.src + imgAttributes.srcSet + imgAttributes.sizes)
       });
     }
-    var Image3 = /* @__PURE__ */ (0, _react.forwardRef)((props, forwardedRef) => {
+    var Image2 = /* @__PURE__ */ (0, _react.forwardRef)((props, forwardedRef) => {
       const pagesRouter = (0, _react.useContext)(_routercontextsharedruntime.RouterContext);
       const isAppRouter = !pagesRouter;
       const configContext = (0, _react.useContext)(_imageconfigcontextsharedruntime.ImageConfigContext);
@@ -6238,7 +6109,7 @@ var require_link = __commonJS({
         resetVisible,
         setIntersectionRef
       ]);
-      const setRef2 = (0, _usemergedref.useMergedRef)(setIntersectionWithResetRef, childRef);
+      const setRef = (0, _usemergedref.useMergedRef)(setIntersectionWithResetRef, childRef);
       _react.default.useEffect(() => {
         if (process.env.NODE_ENV !== "production") {
           return;
@@ -6262,7 +6133,7 @@ var require_link = __commonJS({
         router
       ]);
       const childProps = {
-        ref: setRef2,
+        ref: setRef,
         onClick(e) {
           if (process.env.NODE_ENV !== "production") {
             if (!e) {
@@ -6370,7 +6241,7 @@ __export(index_exports, {
   ASTNodeInterpreter: () => ASTNodeInterpreter,
   AnimatedRing: () => AnimatedRing,
   ArrayUtil: () => ArrayUtil,
-  Avatar: () => Avatar2,
+  Avatar: () => Avatar,
   AvatarGroup: () => AvatarGroup,
   AvatarUtil: () => AvatarUtil,
   BagFunctionUtil: () => BagFunctionUtil,
@@ -6379,7 +6250,7 @@ __export(index_exports, {
   ButtonUtil: () => ButtonUtil,
   Carousel: () => Carousel,
   CarouselSlide: () => CarouselSlide,
-  Checkbox: () => Checkbox2,
+  Checkbox: () => Checkbox,
   CheckboxProperty: () => CheckboxProperty,
   CheckboxUncontrolled: () => CheckboxUncontrolled,
   Chip: () => Chip,
@@ -6449,11 +6320,11 @@ __export(index_exports, {
   OutlineButton: () => OutlineButton,
   Pagination: () => Pagination,
   ProgressIndicator: () => ProgressIndicator,
+  PromiseUtils: () => PromiseUtils,
   PropertyBase: () => PropertyBase,
   RadialRings: () => RadialRings,
   Ring: () => Ring,
   RingWave: () => RingWave,
-  ScrollArea: () => ScrollArea2,
   ScrollPicker: () => ScrollPicker,
   SearchBar: () => SearchBar,
   Select: () => Select,
@@ -10273,377 +10144,7 @@ var FormElementWrapper = ({
 var import_clsx17 = __toESM(require("clsx"));
 var import_react22 = require("react");
 var import_lucide_react6 = require("lucide-react");
-
-// node_modules/@radix-ui/react-avatar/dist/index.mjs
-var React9 = __toESM(require("react"), 1);
-
-// node_modules/@radix-ui/react-context/dist/index.mjs
-var React3 = __toESM(require("react"), 1);
 var import_jsx_runtime23 = require("react/jsx-runtime");
-function createContextScope(scopeName, createContextScopeDeps = []) {
-  let defaultContexts = [];
-  function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React3.createContext(defaultContext);
-    const index = defaultContexts.length;
-    defaultContexts = [...defaultContexts, defaultContext];
-    const Provider = (props) => {
-      const { scope, children, ...context } = props;
-      const Context = scope?.[scopeName]?.[index] || BaseContext;
-      const value = React3.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Context.Provider, { value, children });
-    };
-    Provider.displayName = rootComponentName + "Provider";
-    function useContext22(consumerName, scope) {
-      const Context = scope?.[scopeName]?.[index] || BaseContext;
-      const context = React3.useContext(Context);
-      if (context) return context;
-      if (defaultContext !== void 0) return defaultContext;
-      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
-    }
-    return [Provider, useContext22];
-  }
-  const createScope = () => {
-    const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React3.createContext(defaultContext);
-    });
-    return function useScope(scope) {
-      const contexts = scope?.[scopeName] || scopeContexts;
-      return React3.useMemo(
-        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
-        [scope, contexts]
-      );
-    };
-  };
-  createScope.scopeName = scopeName;
-  return [createContext32, composeContextScopes(createScope, ...createContextScopeDeps)];
-}
-function composeContextScopes(...scopes) {
-  const baseScope = scopes[0];
-  if (scopes.length === 1) return baseScope;
-  const createScope = () => {
-    const scopeHooks = scopes.map((createScope2) => ({
-      useScope: createScope2(),
-      scopeName: createScope2.scopeName
-    }));
-    return function useComposedScopes(overrideScopes) {
-      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
-        const scopeProps = useScope(overrideScopes);
-        const currentScope = scopeProps[`__scope${scopeName}`];
-        return { ...nextScopes2, ...currentScope };
-      }, {});
-      return React3.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
-    };
-  };
-  createScope.scopeName = baseScope.scopeName;
-  return createScope;
-}
-
-// node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
-var React4 = __toESM(require("react"), 1);
-function useCallbackRef(callback) {
-  const callbackRef = React4.useRef(callback);
-  React4.useEffect(() => {
-    callbackRef.current = callback;
-  });
-  return React4.useMemo(() => (...args) => callbackRef.current?.(...args), []);
-}
-
-// node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
-var React5 = __toESM(require("react"), 1);
-var useLayoutEffect22 = globalThis?.document ? React5.useLayoutEffect : () => {
-};
-
-// node_modules/@radix-ui/react-primitive/dist/index.mjs
-var React8 = __toESM(require("react"), 1);
-var ReactDOM = __toESM(require("react-dom"), 1);
-
-// node_modules/@radix-ui/react-slot/dist/index.mjs
-var React7 = __toESM(require("react"), 1);
-
-// node_modules/@radix-ui/react-compose-refs/dist/index.mjs
-var React6 = __toESM(require("react"), 1);
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    return ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    let hasCleanup = false;
-    const cleanups = refs.map((ref) => {
-      const cleanup = setRef(ref, node);
-      if (!hasCleanup && typeof cleanup == "function") {
-        hasCleanup = true;
-      }
-      return cleanup;
-    });
-    if (hasCleanup) {
-      return () => {
-        for (let i = 0; i < cleanups.length; i++) {
-          const cleanup = cleanups[i];
-          if (typeof cleanup == "function") {
-            cleanup();
-          } else {
-            setRef(refs[i], null);
-          }
-        }
-      };
-    }
-  };
-}
-function useComposedRefs(...refs) {
-  return React6.useCallback(composeRefs(...refs), refs);
-}
-
-// node_modules/@radix-ui/react-slot/dist/index.mjs
-var import_jsx_runtime24 = require("react/jsx-runtime");
-// @__NO_SIDE_EFFECTS__
-function createSlot(ownerName) {
-  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React7.forwardRef((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
-    const childrenArray = React7.Children.toArray(children);
-    const slottable = childrenArray.find(isSlottable);
-    if (slottable) {
-      const newElement = slottable.props.children;
-      const newChildren = childrenArray.map((child) => {
-        if (child === slottable) {
-          if (React7.Children.count(newElement) > 1) return React7.Children.only(null);
-          return React7.isValidElement(newElement) ? newElement.props.children : null;
-        } else {
-          return child;
-        }
-      });
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children: React7.isValidElement(newElement) ? React7.cloneElement(newElement, void 0, newChildren) : null });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children });
-  });
-  Slot2.displayName = `${ownerName}.Slot`;
-  return Slot2;
-}
-// @__NO_SIDE_EFFECTS__
-function createSlotClone(ownerName) {
-  const SlotClone = React7.forwardRef((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
-    if (React7.isValidElement(children)) {
-      const childrenRef = getElementRef(children);
-      const props2 = mergeProps(slotProps, children.props);
-      if (children.type !== React7.Fragment) {
-        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
-      }
-      return React7.cloneElement(children, props2);
-    }
-    return React7.Children.count(children) > 1 ? React7.Children.only(null) : null;
-  });
-  SlotClone.displayName = `${ownerName}.SlotClone`;
-  return SlotClone;
-}
-var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
-function isSlottable(child) {
-  return React7.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
-}
-function mergeProps(slotProps, childProps) {
-  const overrideProps = { ...childProps };
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (slotPropValue && childPropValue) {
-        overrideProps[propName] = (...args) => {
-          const result = childPropValue(...args);
-          slotPropValue(...args);
-          return result;
-        };
-      } else if (slotPropValue) {
-        overrideProps[propName] = slotPropValue;
-      }
-    } else if (propName === "style") {
-      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
-    }
-  }
-  return { ...slotProps, ...overrideProps };
-}
-function getElementRef(element) {
-  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.ref;
-  }
-  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.props.ref;
-  }
-  return element.props.ref || element.ref;
-}
-
-// node_modules/@radix-ui/react-primitive/dist/index.mjs
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var NODES = [
-  "a",
-  "button",
-  "div",
-  "form",
-  "h2",
-  "h3",
-  "img",
-  "input",
-  "label",
-  "li",
-  "nav",
-  "ol",
-  "p",
-  "select",
-  "span",
-  "svg",
-  "ul"
-];
-var Primitive = NODES.reduce((primitive, node) => {
-  const Slot = createSlot(`Primitive.${node}`);
-  const Node2 = React8.forwardRef((props, forwardedRef) => {
-    const { asChild, ...primitiveProps } = props;
-    const Comp = asChild ? Slot : node;
-    if (typeof window !== "undefined") {
-      window[Symbol.for("radix-ui")] = true;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
-  });
-  Node2.displayName = `Primitive.${node}`;
-  return { ...primitive, [node]: Node2 };
-}, {});
-
-// node_modules/@radix-ui/react-use-is-hydrated/dist/index.mjs
-var import_shim = __toESM(require_shim(), 1);
-function useIsHydrated() {
-  return (0, import_shim.useSyncExternalStore)(
-    subscribe,
-    () => true,
-    () => false
-  );
-}
-function subscribe() {
-  return () => {
-  };
-}
-
-// node_modules/@radix-ui/react-avatar/dist/index.mjs
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var AVATAR_NAME = "Avatar";
-var [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);
-var [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
-var Avatar = React9.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeAvatar, ...avatarProps } = props;
-    const [imageLoadingStatus, setImageLoadingStatus] = React9.useState("idle");
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      AvatarProvider,
-      {
-        scope: __scopeAvatar,
-        imageLoadingStatus,
-        onImageLoadingStatusChange: setImageLoadingStatus,
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Primitive.span, { ...avatarProps, ref: forwardedRef })
-      }
-    );
-  }
-);
-Avatar.displayName = AVATAR_NAME;
-var IMAGE_NAME = "AvatarImage";
-var AvatarImage = React9.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeAvatar, src, onLoadingStatusChange = () => {
-    }, ...imageProps } = props;
-    const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
-    const imageLoadingStatus = useImageLoadingStatus(src, imageProps);
-    const handleLoadingStatusChange = useCallbackRef((status) => {
-      onLoadingStatusChange(status);
-      context.onImageLoadingStatusChange(status);
-    });
-    useLayoutEffect22(() => {
-      if (imageLoadingStatus !== "idle") {
-        handleLoadingStatusChange(imageLoadingStatus);
-      }
-    }, [imageLoadingStatus, handleLoadingStatusChange]);
-    return imageLoadingStatus === "loaded" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Primitive.img, { ...imageProps, ref: forwardedRef, src }) : null;
-  }
-);
-AvatarImage.displayName = IMAGE_NAME;
-var FALLBACK_NAME = "AvatarFallback";
-var AvatarFallback = React9.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeAvatar, delayMs, ...fallbackProps } = props;
-    const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
-    const [canRender, setCanRender] = React9.useState(delayMs === void 0);
-    React9.useEffect(() => {
-      if (delayMs !== void 0) {
-        const timerId = window.setTimeout(() => setCanRender(true), delayMs);
-        return () => window.clearTimeout(timerId);
-      }
-    }, [delayMs]);
-    return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Primitive.span, { ...fallbackProps, ref: forwardedRef }) : null;
-  }
-);
-AvatarFallback.displayName = FALLBACK_NAME;
-function resolveLoadingStatus(image, src) {
-  if (!image) {
-    return "idle";
-  }
-  if (!src) {
-    return "error";
-  }
-  if (image.src !== src) {
-    image.src = src;
-  }
-  return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
-}
-function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
-  const isHydrated = useIsHydrated();
-  const imageRef = React9.useRef(null);
-  const image = (() => {
-    if (!isHydrated) return null;
-    if (!imageRef.current) {
-      imageRef.current = new window.Image();
-    }
-    return imageRef.current;
-  })();
-  const [loadingStatus, setLoadingStatus] = React9.useState(
-    () => resolveLoadingStatus(image, src)
-  );
-  useLayoutEffect22(() => {
-    setLoadingStatus(resolveLoadingStatus(image, src));
-  }, [image, src]);
-  useLayoutEffect22(() => {
-    const updateStatus = (status) => () => {
-      setLoadingStatus(status);
-    };
-    if (!image) return;
-    const handleLoad = updateStatus("loaded");
-    const handleError = updateStatus("error");
-    image.addEventListener("load", handleLoad);
-    image.addEventListener("error", handleError);
-    if (referrerPolicy) {
-      image.referrerPolicy = referrerPolicy;
-    }
-    if (typeof crossOrigin === "string") {
-      image.crossOrigin = crossOrigin;
-    }
-    return () => {
-      image.removeEventListener("load", handleLoad);
-      image.removeEventListener("error", handleError);
-    };
-  }, [image, crossOrigin, referrerPolicy]);
-  return loadingStatus;
-}
-var Root = Avatar;
-var Image = AvatarImage;
-var Fallback = AvatarFallback;
-
-// src/components/icons-and-geometry/Avatar.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
 var avtarSizeList = ["sm", "md", "lg", "xl"];
 var avatarSizeMapping = {
   sm: 18,
@@ -10661,7 +10162,15 @@ var AvatarUtil = {
   avatarSizeMapping,
   sizes: avtarSizeList
 };
-var Avatar2 = ({ image, name, size = "md", fullyRounded, className = "" }) => {
+var Avatar = ({
+  image,
+  name,
+  size = "md",
+  fullyRounded,
+  className = ""
+}) => {
+  const [hasError, setHasError] = (0, import_react22.useState)(false);
+  const [isLoaded, setIsLoaded] = (0, import_react22.useState)(false);
   const pixels = avatarSizeMapping[size];
   const sizeStyle = {
     minWidth: pixels,
@@ -10679,25 +10188,27 @@ var Avatar2 = ({ image, name, size = "md", fullyRounded, className = "" }) => {
     "rounded-lg": !fullyRounded && !(size === "sm" || size === "md"),
     "rounded-sm": !fullyRounded && (size === "sm" || size === "md")
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-    Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
     {
       className: (0, import_clsx17.default)(
-        `flex-row-0 items-center justify-center bg-primary text-on-primary`,
+        `relative flex-row-0 items-center justify-center bg-primary text-on-primary`,
         rounding,
         className
       ),
       style: sizeStyle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          Image,
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "img",
           {
             src: image?.avatarUrl,
             alt: image?.alt,
-            className: (0, import_clsx17.default)(rounding)
+            className: (0, import_clsx17.default)(rounding, { "absolute left-0 top-0 -translate-1/2 opacity-0 z-1 ": !isLoaded || hasError }),
+            onLoad: () => setIsLoaded(true),
+            onError: () => setHasError(true)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Fallback, { asChild: true, children: name ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: textClassName, children: displayName }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react6.UserIcon, { size: Math.round(pixels * 3 / 4) }) })
+        name ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: textClassName, children: displayName }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react6.UserIcon, { size: Math.round(pixels * 3 / 4) })
       ]
     }
   );
@@ -10714,14 +10225,14 @@ var AvatarGroup = ({
   const stackingOverlap = 0.5;
   const notDisplayedProfiles = avatars.length - maxShownProfiles;
   const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-row-2 relative", style: { height: diameter + "px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { width: avatarGroupWidth + "px" }, children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-row-2 relative", style: { height: diameter + "px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { width: avatarGroupWidth + "px" }, children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         className: "absolute",
         style: { left: index * diameter * stackingOverlap + "px", zIndex: maxShownProfiles - index },
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          Avatar2,
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          Avatar,
           {
             ...avatar,
             size,
@@ -10732,11 +10243,11 @@ var AvatarGroup = ({
       },
       index
     )) }),
-    showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         className: (0, import_clsx17.default)(textClassNameMapping[size], "flex-row-2 truncate items-center"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { children: [
           "+ ",
           notDisplayedProfiles
         ] })
@@ -10747,7 +10258,7 @@ var AvatarGroup = ({
 
 // src/components/icons-and-geometry/Circle.tsx
 var import_clsx18 = __toESM(require("clsx"));
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var Circle = ({
   radius = 20,
   className = "bg-primary",
@@ -10755,7 +10266,7 @@ var Circle = ({
   ...restProps
 }) => {
   const size = radius * 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       className: (0, import_clsx18.default)(`rounded-full`, className),
@@ -10772,13 +10283,13 @@ var Circle = ({
 // src/components/icons-and-geometry/Ring.tsx
 var import_react23 = require("react");
 var import_clsx19 = __toESM(require("clsx"));
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Ring = ({
   innerSize = 20,
   width = 7,
   className = "outline-primary"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       className: (0, import_clsx19.default)(`bg-transparent rounded-full outline`, className),
@@ -10820,7 +10331,7 @@ var AnimatedRing = ({
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       className: "flex-row-2 items-center justify-center",
@@ -10829,7 +10340,7 @@ var AnimatedRing = ({
         height: `${innerSize + 2 * width}px`,
         ...style
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         Ring,
         {
           innerSize,
@@ -10875,7 +10386,7 @@ var RingWave = ({
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       className: "flex-row-2 items-center justify-center",
@@ -10884,7 +10395,7 @@ var RingWave = ({
         height: `${endInnerSize + 2 * width}px`,
         ...style
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         Ring,
         {
           innerSize: currentInnerSize,
@@ -10907,7 +10418,7 @@ var RadialRings = ({
 }) => {
   const [currentRing, setCurrentRing] = (0, import_react23.useState)(0);
   const size = sizeCircle3;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
       className: "relative",
@@ -10916,7 +10427,7 @@ var RadialRings = ({
         height: `${sizeCircle3}px`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Circle,
           {
             radius: sizeCircle1 / 2,
@@ -10927,7 +10438,7 @@ var RadialRings = ({
             }
           }
         ),
-        currentRing === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        currentRing === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           AnimatedRing,
           {
             innerSize: sizeCircle1,
@@ -10947,7 +10458,7 @@ var RadialRings = ({
             }
           }
         ) : null,
-        currentRing === 2 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        currentRing === 2 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           RingWave,
           {
             startInnerSize: sizeCircle1 - waveWidth,
@@ -10964,7 +10475,7 @@ var RadialRings = ({
             }
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Circle,
           {
             radius: sizeCircle2 / 2,
@@ -10979,7 +10490,7 @@ var RadialRings = ({
             }
           }
         ),
-        currentRing === 1 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        currentRing === 1 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           AnimatedRing,
           {
             innerSize: sizeCircle2 - 1,
@@ -10996,7 +10507,7 @@ var RadialRings = ({
             }
           }
         ) : null,
-        currentRing === 2 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        currentRing === 2 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           RingWave,
           {
             startInnerSize: sizeCircle2,
@@ -11013,7 +10524,7 @@ var RadialRings = ({
             }
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Circle,
           {
             radius: sizeCircle3 / 2,
@@ -11035,12 +10546,12 @@ var RadialRings = ({
 
 // src/components/icons-and-geometry/Tag.tsx
 var import_image = __toESM(require_image());
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var TagIcon = ({
   className,
   size = 16
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_image.default,
     {
       style: { width: `${size}px`, height: `${size}px`, minWidth: `${size}px`, minHeight: `${size}px` },
@@ -11057,7 +10568,7 @@ var TagIcon = ({
 var import_react24 = require("react");
 var import_clsx20 = __toESM(require("clsx"));
 var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var CarouselContext = (0, import_react24.createContext)(null);
 var useCarouselContext = () => {
   const context = (0, import_react24.useContext)(CarouselContext);
@@ -11085,7 +10596,7 @@ function CarouselTabs({
     onChange(newIndex);
     tabRefs.current[newIndex]?.focus();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       className: "flex-row-1 items-center justify-center w-full my-2",
@@ -11094,7 +10605,7 @@ function CarouselTabs({
       id: `${id}-tablist`,
       children: range(slideCount).map((index) => {
         const isSelected = currentIndex === index;
-        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "button",
           {
             id: `${id}-tab-${index}`,
@@ -11129,7 +10640,7 @@ var CarouselSlide = (0, import_react24.forwardRef)(
   }, ref) {
     const translation = useHightideTranslation();
     const { id, slideCount } = useCarouselContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
       {
         ...props,
@@ -11279,7 +10790,7 @@ var Carousel = ({
   (0, import_react24.useEffect)(() => {
     onSlideChanged?.(currentIndex);
   }, [currentIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CarouselContext.Provider, { value: { id, currentIndex, slideCount: length, isLooping }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CarouselContext.Provider, { value: { id, currentIndex, slideCount: length, isLooping }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       ref: carouselContainerRef,
@@ -11289,13 +10800,13 @@ var Carousel = ({
       role: "region",
       "aria-roledescription": translation("slide"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           "div",
           {
             ...slideContainerProps,
             className: (0, import_clsx20.default)(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
             children: [
-              hintNext ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+              hintNext ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
                 "div",
                 {
                   onPointerDown: handlePointerDown,
@@ -11304,12 +10815,12 @@ var Carousel = ({
                   onPointerLeave: handlePointerUp,
                   className: (0, import_clsx20.default)(`flex-row-2 relative h-full`, heightClassName),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
                       item,
                       index
                     }, listIndex) => {
                       const isInItems = before.length <= listIndex && listIndex < items.length - after.length;
-                      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                         CarouselSlide,
                         {
                           ref: isInItems ? slideRefs[index] : void 0,
@@ -11329,13 +10840,13 @@ var Carousel = ({
                         listIndex
                       );
                     }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "div",
                       {
                         className: (0, import_clsx20.default)(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "div",
                       {
                         className: (0, import_clsx20.default)(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
@@ -11343,7 +10854,7 @@ var Carousel = ({
                     )
                   ]
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "div",
                 {
                   ref: slideRefs[currentIndex],
@@ -11358,32 +10869,32 @@ var Carousel = ({
                   children: children[currentIndex]
                 }
               ),
-              arrows && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              arrows && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   IconButton,
                   {
                     color: "neutral",
                     className: (0, import_clsx20.default)("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
                     disabled: !canGoLeft(),
                     onClick: () => left(),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react7.ChevronLeft, { size: 24 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronLeft, { size: 24 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   IconButton,
                   {
                     color: "neutral",
                     className: (0, import_clsx20.default)("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
                     disabled: !canGoRight(),
                     onClick: () => right(),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react7.ChevronRight, { size: 24 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronRight, { size: 24 })
                   }
                 )
               ] })
             ]
           }
         ),
-        dots && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CarouselTabs, { onChange: setCurrentIndex })
+        dots && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CarouselTabs, { onChange: setCurrentIndex })
       ]
     }
   ) });
@@ -11391,7 +10902,7 @@ var Carousel = ({
 
 // src/components/layout/DividerInserter.tsx
 var import_clsx21 = __toESM(require("clsx"));
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var DividerInserter = ({
   children,
   divider,
@@ -11408,14 +10919,14 @@ var DividerInserter = ({
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: (0, import_clsx21.default)(className), ...restProps, children: nodes });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: (0, import_clsx21.default)(className), ...restProps, children: nodes });
 };
 
 // src/components/layout/FAQSection.tsx
 var import_clsx22 = __toESM(require("clsx"));
 
 // src/components/layout/MarkdownInterpreter.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var astNodeInserterType = ["helpwave", "newline"];
 var ASTNodeInterpreter = ({
   node,
@@ -11424,27 +10935,27 @@ var ASTNodeInterpreter = ({
 }) => {
   switch (node.type) {
     case "newline":
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("br", {});
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("br", {});
     case "text":
-      return isRoot ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className, children: node.text }) : node.text;
+      return isRoot ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className, children: node.text }) : node.text;
     case "helpwave":
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "font-bold font-space no-underline", children: "helpwave" });
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "font-bold font-space no-underline", children: "helpwave" });
     case "none":
-      return isRoot ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className, children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      return isRoot ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className, children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         ASTNodeInterpreter,
         {
           node: value
         },
         index
-      )) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ASTNodeInterpreter, { node: value }, index)) });
+      )) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ASTNodeInterpreter, { node: value }, index)) });
     case "bold":
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("b", { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ASTNodeInterpreter, { node: value }, index)) });
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("b", { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ASTNodeInterpreter, { node: value }, index)) });
     case "italic":
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("i", { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ASTNodeInterpreter, { node: value }, index)) });
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("i", { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ASTNodeInterpreter, { node: value }, index)) });
     case "underline":
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("u", { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ASTNodeInterpreter, { node: value }, index)) });
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("u", { children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ASTNodeInterpreter, { node: value }, index)) });
     case "font-space":
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "font-space", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "font-space", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         ASTNodeInterpreter,
         {
           node: value
@@ -11452,7 +10963,7 @@ var ASTNodeInterpreter = ({
         index
       )) });
     case "primary":
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-primary", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-primary", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         ASTNodeInterpreter,
         {
           node: value
@@ -11460,7 +10971,7 @@ var ASTNodeInterpreter = ({
         index
       )) });
     case "secondary":
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-secondary", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-secondary", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         ASTNodeInterpreter,
         {
           node: value
@@ -11468,7 +10979,7 @@ var ASTNodeInterpreter = ({
         index
       )) });
     case "warn":
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-warning", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-warning", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         ASTNodeInterpreter,
         {
           node: value
@@ -11476,7 +10987,7 @@ var ASTNodeInterpreter = ({
         index
       )) });
     case "positive":
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-positive", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-positive", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         ASTNodeInterpreter,
         {
           node: value
@@ -11484,7 +10995,7 @@ var ASTNodeInterpreter = ({
         index
       )) });
     case "negative":
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-negative", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-negative", children: node.children.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         ASTNodeInterpreter,
         {
           node: value
@@ -11642,24 +11153,24 @@ var optimizeTree = (node) => {
 var MarkdownInterpreter = ({ text, className }) => {
   const tree = parseMarkdown(text);
   const optimizedTree = optimizeTree(tree);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ASTNodeInterpreter, { node: optimizedTree, isRoot: true, className });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ASTNodeInterpreter, { node: optimizedTree, isRoot: true, className });
 };
 
 // src/components/layout/FAQSection.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var FAQSection = ({
   entries,
   expandableClassName
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { className: "flex-col-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ul", { className: "flex-col-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     ExpandableUncontrolled,
     {
       ...restProps,
-      label: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { id, className: "typography-title-md", children: title }),
+      label: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { id, className: "typography-title-md", children: title }),
       clickOnlyOnHeader: false,
-      icon: (expanded) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ExpansionIcon, { isExpanded: expanded, className: "text-primary" }),
+      icon: (expanded) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ExpansionIcon, { isExpanded: expanded, className: "text-primary" }),
       className: (0, import_clsx22.default)("rounded-xl", expandableClassName),
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MarkdownInterpreter, { text: content.value }) : content.value })
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MarkdownInterpreter, { text: content.value }) : content.value })
     },
     id
   ) }, id)) });
@@ -11669,7 +11180,7 @@ var FAQSection = ({
 var import_react25 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_clsx23 = require("clsx");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var FloatingContainer = (0, import_react25.forwardRef)(function FloatingContainer2({
   children,
   backgroundOverlay,
@@ -11681,9 +11192,9 @@ var FloatingContainer = (0, import_react25.forwardRef)(function FloatingContaine
   screenPadding = 16,
   gap = 4,
   ...props
-}, forwardRef17) {
+}, forwardRef12) {
   const innerRef = (0, import_react25.useRef)(null);
-  (0, import_react25.useImperativeHandle)(forwardRef17, () => innerRef.current);
+  (0, import_react25.useImperativeHandle)(forwardRef12, () => innerRef.current);
   const position = useFloatingElement({
     active: !props.hidden,
     containerRef: innerRef,
@@ -11696,9 +11207,9 @@ var FloatingContainer = (0, import_react25.forwardRef)(function FloatingContaine
     screenPadding
   });
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
       backgroundOverlay,
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
           ...props,
@@ -11725,7 +11236,7 @@ var FloatingContainer = (0, import_react25.forwardRef)(function FloatingContaine
 // src/components/layout/ListBox.tsx
 var import_react26 = __toESM(require("react"));
 var import_clsx24 = require("clsx");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var ListBoxContext = (0, import_react26.createContext)(null);
 function useListBoxContext() {
   const ctx = (0, import_react26.useContext)(ListBoxContext);
@@ -11752,7 +11263,7 @@ var ListBoxItem = (0, import_react26.forwardRef)(
     }, [id, value, disabled, registerItem, unregisterItem]);
     const isHighlighted = highlightedId === id;
     const selected = isSelected(value);
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "li",
       {
         ref: (node) => {
@@ -11869,7 +11380,7 @@ var ListBoxPrimitive = (0, import_react26.forwardRef)(
       }
       setHighlightedIndex(nextIndex);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ListBoxContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ListBoxContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "ul",
       {
         ref,
@@ -11934,7 +11445,7 @@ var ListBoxPrimitive = (0, import_react26.forwardRef)(
   }
 );
 var ListBoxMultiple = ({ ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ListBoxPrimitive, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ListBoxPrimitive, { ...props });
 };
 var ListBoxMultipleUncontrolled = ({
   value: initialValue,
@@ -11942,7 +11453,7 @@ var ListBoxMultipleUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onSelectionChanged);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     ListBoxMultiple,
     {
       ...props,
@@ -11956,7 +11467,7 @@ var ListBox = (0, import_react26.forwardRef)(function ListBox2({
   onSelectionChanged,
   ...props
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     ListBoxPrimitive,
     {
       ref,
@@ -11975,7 +11486,7 @@ var ListBoxUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onSelectionChanged);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     ListBox,
     {
       ...props,
@@ -11985,1073 +11496,102 @@ var ListBoxUncontrolled = ({
   );
 };
 
-// node_modules/@radix-ui/react-scroll-area/dist/index.mjs
-var React23 = __toESM(require("react"), 1);
-
-// node_modules/@radix-ui/react-presence/dist/index.mjs
-var React22 = __toESM(require("react"), 1);
-var React12 = __toESM(require("react"), 1);
-function useStateMachine(initialState, machine) {
-  return React12.useReducer((state, event) => {
-    const nextState = machine[state][event];
-    return nextState ?? state;
-  }, initialState);
+// src/components/layout/TabView.tsx
+var import_react27 = require("react");
+var import_react28 = require("react");
+var import_clsx25 = __toESM(require("clsx"));
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var TabContext = (0, import_react28.createContext)(null);
+function useTabContext() {
+  const ctx = (0, import_react28.useContext)(TabContext);
+  if (!ctx) throw new Error("useTabContext must be used inside a <TabView>");
+  return ctx;
 }
-var Presence = (props) => {
-  const { present, children } = props;
-  const presence = usePresence(present);
-  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React22.Children.only(children);
-  const ref = useComposedRefs(presence.ref, getElementRef2(child));
-  const forceMount = typeof children === "function";
-  return forceMount || presence.isPresent ? React22.cloneElement(child, { ref }) : null;
-};
-Presence.displayName = "Presence";
-function usePresence(present) {
-  const [node, setNode] = React22.useState();
-  const stylesRef = React22.useRef(null);
-  const prevPresentRef = React22.useRef(present);
-  const prevAnimationNameRef = React22.useRef("none");
-  const initialState = present ? "mounted" : "unmounted";
-  const [state, send] = useStateMachine(initialState, {
-    mounted: {
-      UNMOUNT: "unmounted",
-      ANIMATION_OUT: "unmountSuspended"
-    },
-    unmountSuspended: {
-      MOUNT: "mounted",
-      ANIMATION_END: "unmounted"
-    },
-    unmounted: {
-      MOUNT: "mounted"
-    }
-  });
-  React22.useEffect(() => {
-    const currentAnimationName = getAnimationName(stylesRef.current);
-    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
-  }, [state]);
-  useLayoutEffect22(() => {
-    const styles = stylesRef.current;
-    const wasPresent = prevPresentRef.current;
-    const hasPresentChanged = wasPresent !== present;
-    if (hasPresentChanged) {
-      const prevAnimationName = prevAnimationNameRef.current;
-      const currentAnimationName = getAnimationName(styles);
-      if (present) {
-        send("MOUNT");
-      } else if (currentAnimationName === "none" || styles?.display === "none") {
-        send("UNMOUNT");
-      } else {
-        const isAnimating = prevAnimationName !== currentAnimationName;
-        if (wasPresent && isAnimating) {
-          send("ANIMATION_OUT");
-        } else {
-          send("UNMOUNT");
+function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, ...props }) {
+  const [tabs, setTabs] = (0, import_react28.useState)([]);
+  const [active, setActiveState] = (0, import_react28.useState)(null);
+  const buttonRefs = (0, import_react28.useRef)({});
+  const setActive = (id) => {
+    setActiveState(id);
+    onTabChanged?.(id);
+  };
+  const register = (id, label) => {
+    setTabs((prev) => {
+      const exists = prev.some((t) => t.id === id);
+      if (!exists) {
+        const updated = [...prev, { id, label }];
+        if (active === null && updated[initialTabIndex]) {
+          setActive(updated[initialTabIndex].id);
         }
+        return updated;
       }
-      prevPresentRef.current = present;
-    }
-  }, [present, send]);
-  useLayoutEffect22(() => {
-    if (node) {
-      let timeoutId;
-      const ownerWindow = node.ownerDocument.defaultView ?? window;
-      const handleAnimationEnd = (event) => {
-        const currentAnimationName = getAnimationName(stylesRef.current);
-        const isCurrentAnimation = currentAnimationName.includes(event.animationName);
-        if (event.target === node && isCurrentAnimation) {
-          send("ANIMATION_END");
-          if (!prevPresentRef.current) {
-            const currentFillMode = node.style.animationFillMode;
-            node.style.animationFillMode = "forwards";
-            timeoutId = ownerWindow.setTimeout(() => {
-              if (node.style.animationFillMode === "forwards") {
-                node.style.animationFillMode = currentFillMode;
-              }
-            });
-          }
-        }
-      };
-      const handleAnimationStart = (event) => {
-        if (event.target === node) {
-          prevAnimationNameRef.current = getAnimationName(stylesRef.current);
-        }
-      };
-      node.addEventListener("animationstart", handleAnimationStart);
-      node.addEventListener("animationcancel", handleAnimationEnd);
-      node.addEventListener("animationend", handleAnimationEnd);
-      return () => {
-        ownerWindow.clearTimeout(timeoutId);
-        node.removeEventListener("animationstart", handleAnimationStart);
-        node.removeEventListener("animationcancel", handleAnimationEnd);
-        node.removeEventListener("animationend", handleAnimationEnd);
-      };
-    } else {
-      send("ANIMATION_END");
-    }
-  }, [node, send]);
-  return {
-    isPresent: ["mounted", "unmountSuspended"].includes(state),
-    ref: React22.useCallback((node2) => {
-      stylesRef.current = node2 ? getComputedStyle(node2) : null;
-      setNode(node2);
-    }, [])
+      return prev;
+    });
   };
+  const unregister = (id) => {
+    setTabs((prev) => prev.filter((t) => t.id !== id));
+    delete buttonRefs.current[id];
+  };
+  const onKeyDown = (e, id) => {
+    const idx = tabs.findIndex((t) => t.id === id);
+    if (idx === -1) return;
+    let nextIdx = idx;
+    if (e.key === "ArrowRight") nextIdx = (idx + 1) % tabs.length;
+    else if (e.key === "ArrowLeft") nextIdx = (idx - 1 + tabs.length) % tabs.length;
+    else return;
+    const nextId = tabs[nextIdx].id;
+    setActive(nextId);
+    buttonRefs.current[nextId]?.focus();
+  };
+  const value = { active, setActive, register, unregister, tabs };
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TabContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...outerDivProps, className: (0, import_clsx25.default)("w-full", props.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "tablist", ...props, className: (0, import_clsx25.default)("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      "button",
+      {
+        role: "tab",
+        "aria-selected": active === t.id,
+        "aria-controls": `${t.id}-panel`,
+        id: `${t.id}-tab`,
+        tabIndex: active === t.id ? 0 : -1,
+        ref: (el) => buttonRefs.current[t.id] = el,
+        onClick: () => setActive(t.id),
+        onKeyDown: (e) => onKeyDown(e, t.id),
+        className: (0, import_clsx25.default)(
+          "flex-row-0 grow justify-center px-3 pb-1 typography-label-md border-b-2",
+          active === t.id ? "border-primary" : "text-description hover:text-on-background"
+        ),
+        children: t.label
+      },
+      t.id
+    )) }),
+    children
+  ] }) });
 }
-function getAnimationName(styles) {
-  return styles?.animationName || "none";
-}
-function getElementRef2(element) {
-  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.ref;
-  }
-  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.props.ref;
-  }
-  return element.props.ref || element.ref;
-}
-
-// node_modules/@radix-ui/react-direction/dist/index.mjs
-var React13 = __toESM(require("react"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var DirectionContext = React13.createContext(void 0);
-function useDirection(localDir) {
-  const globalDir = React13.useContext(DirectionContext);
-  return localDir || globalDir || "ltr";
-}
-
-// node_modules/@radix-ui/number/dist/index.mjs
-function clamp2(value, [min, max]) {
-  return Math.min(max, Math.max(min, value));
-}
-
-// node_modules/@radix-ui/primitive/dist/index.mjs
-function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
-  return function handleEvent(event) {
-    originalEventHandler?.(event);
-    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
-      return ourEventHandler?.(event);
-    }
-  };
-}
-
-// node_modules/@radix-ui/react-scroll-area/dist/index.mjs
-var React14 = __toESM(require("react"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
-function useStateMachine2(initialState, machine) {
-  return React14.useReducer((state, event) => {
-    const nextState = machine[state][event];
-    return nextState ?? state;
-  }, initialState);
-}
-var SCROLL_AREA_NAME = "ScrollArea";
-var [createScrollAreaContext, createScrollAreaScope] = createContextScope(SCROLL_AREA_NAME);
-var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
-var ScrollArea = React23.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeScrollArea,
-      type = "hover",
-      dir,
-      scrollHideDelay = 600,
-      ...scrollAreaProps
-    } = props;
-    const [scrollArea, setScrollArea] = React23.useState(null);
-    const [viewport, setViewport] = React23.useState(null);
-    const [content, setContent] = React23.useState(null);
-    const [scrollbarX, setScrollbarX] = React23.useState(null);
-    const [scrollbarY, setScrollbarY] = React23.useState(null);
-    const [cornerWidth, setCornerWidth] = React23.useState(0);
-    const [cornerHeight, setCornerHeight] = React23.useState(0);
-    const [scrollbarXEnabled, setScrollbarXEnabled] = React23.useState(false);
-    const [scrollbarYEnabled, setScrollbarYEnabled] = React23.useState(false);
-    const composedRefs = useComposedRefs(forwardedRef, (node) => setScrollArea(node));
-    const direction = useDirection(dir);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      ScrollAreaProvider,
-      {
-        scope: __scopeScrollArea,
-        type,
-        dir: direction,
-        scrollHideDelay,
-        scrollArea,
-        viewport,
-        onViewportChange: setViewport,
-        content,
-        onContentChange: setContent,
-        scrollbarX,
-        onScrollbarXChange: setScrollbarX,
-        scrollbarXEnabled,
-        onScrollbarXEnabledChange: setScrollbarXEnabled,
-        scrollbarY,
-        onScrollbarYChange: setScrollbarY,
-        scrollbarYEnabled,
-        onScrollbarYEnabledChange: setScrollbarYEnabled,
-        onCornerWidthChange: setCornerWidth,
-        onCornerHeightChange: setCornerHeight,
-        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-          Primitive.div,
-          {
-            dir: direction,
-            ...scrollAreaProps,
-            ref: composedRefs,
-            style: {
-              position: "relative",
-              // Pass corner sizes as CSS vars to reduce re-renders of context consumers
-              ["--radix-scroll-area-corner-width"]: cornerWidth + "px",
-              ["--radix-scroll-area-corner-height"]: cornerHeight + "px",
-              ...props.style
-            }
-          }
-        )
-      }
-    );
-  }
-);
-ScrollArea.displayName = SCROLL_AREA_NAME;
-var VIEWPORT_NAME = "ScrollAreaViewport";
-var ScrollAreaViewport = React23.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
-    const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
-    const ref = React23.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-        "style",
-        {
-          dangerouslySetInnerHTML: {
-            __html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}`
-          },
-          nonce
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-        Primitive.div,
-        {
-          "data-radix-scroll-area-viewport": "",
-          ...viewportProps,
-          ref: composedRefs,
-          style: {
-            /**
-             * We don't support `visible` because the intention is to have at least one scrollbar
-             * if this component is used and `visible` will behave like `auto` in that case
-             * https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#description
-             *
-             * We don't handle `auto` because the intention is for the native implementation
-             * to be hidden if using this component. We just want to ensure the node is scrollable
-             * so could have used either `scroll` or `auto` here. We picked `scroll` to prevent
-             * the browser from having to work out whether to render native scrollbars or not,
-             * we tell it to with the intention of hiding them in CSS.
-             */
-            overflowX: context.scrollbarXEnabled ? "scroll" : "hidden",
-            overflowY: context.scrollbarYEnabled ? "scroll" : "hidden",
-            ...props.style
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ref: context.onContentChange, style: { minWidth: "100%", display: "table" }, children })
-        }
-      )
-    ] });
-  }
-);
-ScrollAreaViewport.displayName = VIEWPORT_NAME;
-var SCROLLBAR_NAME = "ScrollAreaScrollbar";
-var ScrollAreaScrollbar = React23.forwardRef(
-  (props, forwardedRef) => {
-    const { forceMount, ...scrollbarProps } = props;
-    const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
-    const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
-    const isHorizontal = props.orientation === "horizontal";
-    React23.useEffect(() => {
-      isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
-      return () => {
-        isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
-      };
-    }, [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange]);
-    return context.type === "hover" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScrollAreaScrollbarHover, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "scroll" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScrollAreaScrollbarScroll, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "auto" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScrollAreaScrollbarAuto, { ...scrollbarProps, ref: forwardedRef, forceMount }) : context.type === "always" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScrollAreaScrollbarVisible, { ...scrollbarProps, ref: forwardedRef }) : null;
-  }
-);
-ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
-var ScrollAreaScrollbarHover = React23.forwardRef((props, forwardedRef) => {
-  const { forceMount, ...scrollbarProps } = props;
-  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
-  const [visible, setVisible] = React23.useState(false);
-  React23.useEffect(() => {
-    const scrollArea = context.scrollArea;
-    let hideTimer = 0;
-    if (scrollArea) {
-      const handlePointerEnter = () => {
-        window.clearTimeout(hideTimer);
-        setVisible(true);
-      };
-      const handlePointerLeave = () => {
-        hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
-      };
-      scrollArea.addEventListener("pointerenter", handlePointerEnter);
-      scrollArea.addEventListener("pointerleave", handlePointerLeave);
-      return () => {
-        window.clearTimeout(hideTimer);
-        scrollArea.removeEventListener("pointerenter", handlePointerEnter);
-        scrollArea.removeEventListener("pointerleave", handlePointerLeave);
-      };
-    }
-  }, [context.scrollArea, context.scrollHideDelay]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Presence, { present: forceMount || visible, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    ScrollAreaScrollbarAuto,
-    {
-      "data-state": visible ? "visible" : "hidden",
-      ...scrollbarProps,
-      ref: forwardedRef
-    }
-  ) });
-});
-var ScrollAreaScrollbarScroll = React23.forwardRef((props, forwardedRef) => {
-  const { forceMount, ...scrollbarProps } = props;
-  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
-  const isHorizontal = props.orientation === "horizontal";
-  const debounceScrollEnd = useDebounceCallback(() => send("SCROLL_END"), 100);
-  const [state, send] = useStateMachine2("hidden", {
-    hidden: {
-      SCROLL: "scrolling"
-    },
-    scrolling: {
-      SCROLL_END: "idle",
-      POINTER_ENTER: "interacting"
-    },
-    interacting: {
-      SCROLL: "interacting",
-      POINTER_LEAVE: "idle"
-    },
-    idle: {
-      HIDE: "hidden",
-      SCROLL: "scrolling",
-      POINTER_ENTER: "interacting"
-    }
-  });
-  React23.useEffect(() => {
-    if (state === "idle") {
-      const hideTimer = window.setTimeout(() => send("HIDE"), context.scrollHideDelay);
-      return () => window.clearTimeout(hideTimer);
-    }
-  }, [state, context.scrollHideDelay, send]);
-  React23.useEffect(() => {
-    const viewport = context.viewport;
-    const scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
-    if (viewport) {
-      let prevScrollPos = viewport[scrollDirection];
-      const handleScroll = () => {
-        const scrollPos = viewport[scrollDirection];
-        const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
-        if (hasScrollInDirectionChanged) {
-          send("SCROLL");
-          debounceScrollEnd();
-        }
-        prevScrollPos = scrollPos;
-      };
-      viewport.addEventListener("scroll", handleScroll);
-      return () => viewport.removeEventListener("scroll", handleScroll);
-    }
-  }, [context.viewport, isHorizontal, send, debounceScrollEnd]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Presence, { present: forceMount || state !== "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    ScrollAreaScrollbarVisible,
-    {
-      "data-state": state === "hidden" ? "hidden" : "visible",
-      ...scrollbarProps,
-      ref: forwardedRef,
-      onPointerEnter: composeEventHandlers(props.onPointerEnter, () => send("POINTER_ENTER")),
-      onPointerLeave: composeEventHandlers(props.onPointerLeave, () => send("POINTER_LEAVE"))
-    }
-  ) });
-});
-var ScrollAreaScrollbarAuto = React23.forwardRef((props, forwardedRef) => {
-  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
-  const { forceMount, ...scrollbarProps } = props;
-  const [visible, setVisible] = React23.useState(false);
-  const isHorizontal = props.orientation === "horizontal";
-  const handleResize = useDebounceCallback(() => {
-    if (context.viewport) {
-      const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
-      const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
-      setVisible(isHorizontal ? isOverflowX : isOverflowY);
-    }
-  }, 10);
-  useResizeObserver(context.viewport, handleResize);
-  useResizeObserver(context.content, handleResize);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Presence, { present: forceMount || visible, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    ScrollAreaScrollbarVisible,
-    {
-      "data-state": visible ? "visible" : "hidden",
-      ...scrollbarProps,
-      ref: forwardedRef
-    }
-  ) });
-});
-var ScrollAreaScrollbarVisible = React23.forwardRef((props, forwardedRef) => {
-  const { orientation = "vertical", ...scrollbarProps } = props;
-  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
-  const thumbRef = React23.useRef(null);
-  const pointerOffsetRef = React23.useRef(0);
-  const [sizes, setSizes] = React23.useState({
-    content: 0,
-    viewport: 0,
-    scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 }
-  });
-  const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
-  const commonProps = {
-    ...scrollbarProps,
-    sizes,
-    onSizesChange: setSizes,
-    hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
-    onThumbChange: (thumb) => thumbRef.current = thumb,
-    onThumbPointerUp: () => pointerOffsetRef.current = 0,
-    onThumbPointerDown: (pointerPos) => pointerOffsetRef.current = pointerPos
-  };
-  function getScrollPosition(pointerPos, dir) {
-    return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
-  }
-  if (orientation === "horizontal") {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      ScrollAreaScrollbarX,
-      {
-        ...commonProps,
-        ref: forwardedRef,
-        onThumbPositionChange: () => {
-          if (context.viewport && thumbRef.current) {
-            const scrollPos = context.viewport.scrollLeft;
-            const offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
-            thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
-          }
-        },
-        onWheelScroll: (scrollPos) => {
-          if (context.viewport) context.viewport.scrollLeft = scrollPos;
-        },
-        onDragScroll: (pointerPos) => {
-          if (context.viewport) {
-            context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
-          }
-        }
-      }
-    );
-  }
-  if (orientation === "vertical") {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      ScrollAreaScrollbarY,
-      {
-        ...commonProps,
-        ref: forwardedRef,
-        onThumbPositionChange: () => {
-          if (context.viewport && thumbRef.current) {
-            const scrollPos = context.viewport.scrollTop;
-            const offset = getThumbOffsetFromScroll(scrollPos, sizes);
-            thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
-          }
-        },
-        onWheelScroll: (scrollPos) => {
-          if (context.viewport) context.viewport.scrollTop = scrollPos;
-        },
-        onDragScroll: (pointerPos) => {
-          if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
-        }
-      }
-    );
-  }
-  return null;
-});
-var ScrollAreaScrollbarX = React23.forwardRef((props, forwardedRef) => {
-  const { sizes, onSizesChange, ...scrollbarProps } = props;
-  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
-  const [computedStyle, setComputedStyle] = React23.useState();
-  const ref = React23.useRef(null);
-  const composeRefs2 = useComposedRefs(forwardedRef, ref, context.onScrollbarXChange);
-  React23.useEffect(() => {
-    if (ref.current) setComputedStyle(getComputedStyle(ref.current));
-  }, [ref]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    ScrollAreaScrollbarImpl,
-    {
-      "data-orientation": "horizontal",
-      ...scrollbarProps,
-      ref: composeRefs2,
-      sizes,
-      style: {
-        bottom: 0,
-        left: context.dir === "rtl" ? "var(--radix-scroll-area-corner-width)" : 0,
-        right: context.dir === "ltr" ? "var(--radix-scroll-area-corner-width)" : 0,
-        ["--radix-scroll-area-thumb-width"]: getThumbSize(sizes) + "px",
-        ...props.style
-      },
-      onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.x),
-      onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.x),
-      onWheelScroll: (event, maxScrollPos) => {
-        if (context.viewport) {
-          const scrollPos = context.viewport.scrollLeft + event.deltaX;
-          props.onWheelScroll(scrollPos);
-          if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
-            event.preventDefault();
-          }
-        }
-      },
-      onResize: () => {
-        if (ref.current && context.viewport && computedStyle) {
-          onSizesChange({
-            content: context.viewport.scrollWidth,
-            viewport: context.viewport.offsetWidth,
-            scrollbar: {
-              size: ref.current.clientWidth,
-              paddingStart: toInt(computedStyle.paddingLeft),
-              paddingEnd: toInt(computedStyle.paddingRight)
-            }
-          });
-        }
-      }
-    }
-  );
-});
-var ScrollAreaScrollbarY = React23.forwardRef((props, forwardedRef) => {
-  const { sizes, onSizesChange, ...scrollbarProps } = props;
-  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
-  const [computedStyle, setComputedStyle] = React23.useState();
-  const ref = React23.useRef(null);
-  const composeRefs2 = useComposedRefs(forwardedRef, ref, context.onScrollbarYChange);
-  React23.useEffect(() => {
-    if (ref.current) setComputedStyle(getComputedStyle(ref.current));
-  }, [ref]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    ScrollAreaScrollbarImpl,
-    {
-      "data-orientation": "vertical",
-      ...scrollbarProps,
-      ref: composeRefs2,
-      sizes,
-      style: {
-        top: 0,
-        right: context.dir === "ltr" ? 0 : void 0,
-        left: context.dir === "rtl" ? 0 : void 0,
-        bottom: "var(--radix-scroll-area-corner-height)",
-        ["--radix-scroll-area-thumb-height"]: getThumbSize(sizes) + "px",
-        ...props.style
-      },
-      onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.y),
-      onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.y),
-      onWheelScroll: (event, maxScrollPos) => {
-        if (context.viewport) {
-          const scrollPos = context.viewport.scrollTop + event.deltaY;
-          props.onWheelScroll(scrollPos);
-          if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
-            event.preventDefault();
-          }
-        }
-      },
-      onResize: () => {
-        if (ref.current && context.viewport && computedStyle) {
-          onSizesChange({
-            content: context.viewport.scrollHeight,
-            viewport: context.viewport.offsetHeight,
-            scrollbar: {
-              size: ref.current.clientHeight,
-              paddingStart: toInt(computedStyle.paddingTop),
-              paddingEnd: toInt(computedStyle.paddingBottom)
-            }
-          });
-        }
-      }
-    }
-  );
-});
-var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
-var ScrollAreaScrollbarImpl = React23.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeScrollArea,
-    sizes,
-    hasThumb,
-    onThumbChange,
-    onThumbPointerUp,
-    onThumbPointerDown,
-    onThumbPositionChange,
-    onDragScroll,
-    onWheelScroll,
-    onResize,
-    ...scrollbarProps
-  } = props;
-  const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
-  const [scrollbar, setScrollbar] = React23.useState(null);
-  const composeRefs2 = useComposedRefs(forwardedRef, (node) => setScrollbar(node));
-  const rectRef = React23.useRef(null);
-  const prevWebkitUserSelectRef = React23.useRef("");
-  const viewport = context.viewport;
-  const maxScrollPos = sizes.content - sizes.viewport;
-  const handleWheelScroll = useCallbackRef(onWheelScroll);
-  const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);
-  const handleResize = useDebounceCallback(onResize, 10);
-  function handleDragScroll(event) {
-    if (rectRef.current) {
-      const x = event.clientX - rectRef.current.left;
-      const y = event.clientY - rectRef.current.top;
-      onDragScroll({ x, y });
-    }
-  }
-  React23.useEffect(() => {
-    const handleWheel = (event) => {
-      const element = event.target;
-      const isScrollbarWheel = scrollbar?.contains(element);
-      if (isScrollbarWheel) handleWheelScroll(event, maxScrollPos);
-    };
-    document.addEventListener("wheel", handleWheel, { passive: false });
-    return () => document.removeEventListener("wheel", handleWheel, { passive: false });
-  }, [viewport, scrollbar, maxScrollPos, handleWheelScroll]);
-  React23.useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);
-  useResizeObserver(scrollbar, handleResize);
-  useResizeObserver(context.content, handleResize);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    ScrollbarProvider,
-    {
-      scope: __scopeScrollArea,
-      scrollbar,
-      hasThumb,
-      onThumbChange: useCallbackRef(onThumbChange),
-      onThumbPointerUp: useCallbackRef(onThumbPointerUp),
-      onThumbPositionChange: handleThumbPositionChange,
-      onThumbPointerDown: useCallbackRef(onThumbPointerDown),
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-        Primitive.div,
-        {
-          ...scrollbarProps,
-          ref: composeRefs2,
-          style: { position: "absolute", ...scrollbarProps.style },
-          onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
-            const mainPointer = 0;
-            if (event.button === mainPointer) {
-              const element = event.target;
-              element.setPointerCapture(event.pointerId);
-              rectRef.current = scrollbar.getBoundingClientRect();
-              prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
-              document.body.style.webkitUserSelect = "none";
-              if (context.viewport) context.viewport.style.scrollBehavior = "auto";
-              handleDragScroll(event);
-            }
-          }),
-          onPointerMove: composeEventHandlers(props.onPointerMove, handleDragScroll),
-          onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
-            const element = event.target;
-            if (element.hasPointerCapture(event.pointerId)) {
-              element.releasePointerCapture(event.pointerId);
-            }
-            document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
-            if (context.viewport) context.viewport.style.scrollBehavior = "";
-            rectRef.current = null;
-          })
-        }
-      )
-    }
-  );
-});
-var THUMB_NAME = "ScrollAreaThumb";
-var ScrollAreaThumb = React23.forwardRef(
-  (props, forwardedRef) => {
-    const { forceMount, ...thumbProps } = props;
-    const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Presence, { present: forceMount || scrollbarContext.hasThumb, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScrollAreaThumbImpl, { ref: forwardedRef, ...thumbProps }) });
-  }
-);
-var ScrollAreaThumbImpl = React23.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeScrollArea, style, ...thumbProps } = props;
-    const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
-    const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
-    const { onThumbPositionChange } = scrollbarContext;
-    const composedRef = useComposedRefs(
-      forwardedRef,
-      (node) => scrollbarContext.onThumbChange(node)
-    );
-    const removeUnlinkedScrollListenerRef = React23.useRef(void 0);
-    const debounceScrollEnd = useDebounceCallback(() => {
-      if (removeUnlinkedScrollListenerRef.current) {
-        removeUnlinkedScrollListenerRef.current();
-        removeUnlinkedScrollListenerRef.current = void 0;
-      }
-    }, 100);
-    React23.useEffect(() => {
-      const viewport = scrollAreaContext.viewport;
-      if (viewport) {
-        const handleScroll = () => {
-          debounceScrollEnd();
-          if (!removeUnlinkedScrollListenerRef.current) {
-            const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);
-            removeUnlinkedScrollListenerRef.current = listener;
-            onThumbPositionChange();
-          }
-        };
-        onThumbPositionChange();
-        viewport.addEventListener("scroll", handleScroll);
-        return () => viewport.removeEventListener("scroll", handleScroll);
-      }
-    }, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      Primitive.div,
-      {
-        "data-state": scrollbarContext.hasThumb ? "visible" : "hidden",
-        ...thumbProps,
-        ref: composedRef,
-        style: {
-          width: "var(--radix-scroll-area-thumb-width)",
-          height: "var(--radix-scroll-area-thumb-height)",
-          ...style
-        },
-        onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, (event) => {
-          const thumb = event.target;
-          const thumbRect = thumb.getBoundingClientRect();
-          const x = event.clientX - thumbRect.left;
-          const y = event.clientY - thumbRect.top;
-          scrollbarContext.onThumbPointerDown({ x, y });
-        }),
-        onPointerUp: composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
-      }
-    );
-  }
-);
-ScrollAreaThumb.displayName = THUMB_NAME;
-var CORNER_NAME = "ScrollAreaCorner";
-var ScrollAreaCorner = React23.forwardRef(
-  (props, forwardedRef) => {
-    const context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);
-    const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
-    const hasCorner = context.type !== "scroll" && hasBothScrollbarsVisible;
-    return hasCorner ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScrollAreaCornerImpl, { ...props, ref: forwardedRef }) : null;
-  }
-);
-ScrollAreaCorner.displayName = CORNER_NAME;
-var ScrollAreaCornerImpl = React23.forwardRef((props, forwardedRef) => {
-  const { __scopeScrollArea, ...cornerProps } = props;
-  const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
-  const [width, setWidth] = React23.useState(0);
-  const [height, setHeight] = React23.useState(0);
-  const hasSize = Boolean(width && height);
-  useResizeObserver(context.scrollbarX, () => {
-    const height2 = context.scrollbarX?.offsetHeight || 0;
-    context.onCornerHeightChange(height2);
-    setHeight(height2);
-  });
-  useResizeObserver(context.scrollbarY, () => {
-    const width2 = context.scrollbarY?.offsetWidth || 0;
-    context.onCornerWidthChange(width2);
-    setWidth(width2);
-  });
-  return hasSize ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    Primitive.div,
-    {
-      ...cornerProps,
-      ref: forwardedRef,
-      style: {
-        width,
-        height,
-        position: "absolute",
-        right: context.dir === "ltr" ? 0 : void 0,
-        left: context.dir === "rtl" ? 0 : void 0,
-        bottom: 0,
-        ...props.style
-      }
-    }
-  ) : null;
-});
-function toInt(value) {
-  return value ? parseInt(value, 10) : 0;
-}
-function getThumbRatio(viewportSize, contentSize) {
-  const ratio = viewportSize / contentSize;
-  return isNaN(ratio) ? 0 : ratio;
-}
-function getThumbSize(sizes) {
-  const ratio = getThumbRatio(sizes.viewport, sizes.content);
-  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
-  const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
-  return Math.max(thumbSize, 18);
-}
-function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
-  const thumbSizePx = getThumbSize(sizes);
-  const thumbCenter = thumbSizePx / 2;
-  const offset = pointerOffset || thumbCenter;
-  const thumbOffsetFromEnd = thumbSizePx - offset;
-  const minPointerPos = sizes.scrollbar.paddingStart + offset;
-  const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
-  const maxScrollPos = sizes.content - sizes.viewport;
-  const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
-  const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
-  return interpolate(pointerPos);
-}
-function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
-  const thumbSizePx = getThumbSize(sizes);
-  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
-  const scrollbar = sizes.scrollbar.size - scrollbarPadding;
-  const maxScrollPos = sizes.content - sizes.viewport;
-  const maxThumbPos = scrollbar - thumbSizePx;
-  const scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
-  const scrollWithoutMomentum = clamp2(scrollPos, scrollClampRange);
-  const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
-  return interpolate(scrollWithoutMomentum);
-}
-function linearScale(input, output) {
-  return (value) => {
-    if (input[0] === input[1] || output[0] === output[1]) return output[0];
-    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
-    return output[0] + ratio * (value - input[0]);
-  };
-}
-function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
-  return scrollPos > 0 && scrollPos < maxScrollPos;
-}
-var addUnlinkedScrollListener = (node, handler = () => {
-}) => {
-  let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
-  let rAF = 0;
-  (function loop() {
-    const position = { left: node.scrollLeft, top: node.scrollTop };
-    const isHorizontalScroll = prevPosition.left !== position.left;
-    const isVerticalScroll = prevPosition.top !== position.top;
-    if (isHorizontalScroll || isVerticalScroll) handler();
-    prevPosition = position;
-    rAF = window.requestAnimationFrame(loop);
-  })();
-  return () => window.cancelAnimationFrame(rAF);
-};
-function useDebounceCallback(callback, delay) {
-  const handleCallback = useCallbackRef(callback);
-  const debounceTimerRef = React23.useRef(0);
-  React23.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
-  return React23.useCallback(() => {
-    window.clearTimeout(debounceTimerRef.current);
-    debounceTimerRef.current = window.setTimeout(handleCallback, delay);
-  }, [handleCallback, delay]);
-}
-function useResizeObserver(element, onResize) {
-  const handleResize = useCallbackRef(onResize);
-  useLayoutEffect22(() => {
-    let rAF = 0;
-    if (element) {
-      const resizeObserver = new ResizeObserver(() => {
-        cancelAnimationFrame(rAF);
-        rAF = window.requestAnimationFrame(handleResize);
-      });
-      resizeObserver.observe(element);
-      return () => {
-        window.cancelAnimationFrame(rAF);
-        resizeObserver.unobserve(element);
-      };
-    }
-  }, [element, handleResize]);
-}
-var Root2 = ScrollArea;
-var Viewport = ScrollAreaViewport;
-var Scrollbar = ScrollAreaScrollbar;
-var Thumb = ScrollAreaThumb;
-var Corner = ScrollAreaCorner;
-
-// src/components/layout/ScrollArea.tsx
-var import_clsx25 = require("clsx");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var ScrollArea2 = ({
-  children,
-  scrollbarSize = "md",
-  scrollbarType = "auto",
-  scrollbarAxis = "both",
-  className,
-  ...props
-}) => {
-  const scrollbarStyle = {
-    sm: { "--scrollbar-size": "calc(4px + var(--spacing))" },
-    md: { "--scrollbar-size": "calc(6px + var(--spacing))" }
-  }[scrollbarSize];
-  const hasHorizontalScrollBar = scrollbarAxis === "horizontal" || scrollbarAxis === "both";
-  const hasVerticalScrollBar = scrollbarAxis === "vertical" || scrollbarAxis === "both";
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-    Root2,
-    {
-      ...props,
-      className: (0, import_clsx25.clsx)(
-        "overflow-hidden",
-        className
-      ),
-      style: {
-        ...scrollbarStyle,
-        ...props.style
-      },
-      type: scrollbarType,
-      children: [
-        hasHorizontalScrollBar && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          Scrollbar,
-          {
-            orientation: "horizontal",
-            className: (0, import_clsx25.clsx)(
-              "peer/horizontal group/scrollbar flex-col-0 rounded-full select-none touch-none bg-scrollbar-track/50 hover:bg-scrollbar-track",
-              {
-                "h-[var(--scrollbar-size)]": scrollbarType === "always",
-                "data-[state=visible]:h-[var(--scrollbar-size)]": scrollbarType !== "always"
-              }
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              Thumb,
-              {
-                className: (0, import_clsx25.clsx)(
-                  "flex relative rounded-full bg-scrollbar-thumb group-hover/scrollbar:bg-primary",
-                  {
-                    "min-h-[var(--scrollbar-size)]": scrollbarType === "always",
-                    "data-[state=visible]:min-h-[var(--scrollbar-size)]": scrollbarType !== "always"
-                  }
-                )
-              }
-            )
-          }
-        ),
-        hasVerticalScrollBar && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          Scrollbar,
-          {
-            orientation: "vertical",
-            className: (0, import_clsx25.clsx)(
-              "peer/vertical group/scrollbar flex-col-0 rounded-full select-none touch-none bg-scrollbar-track/50 hover:bg-scrollbar-track",
-              {
-                "w-[var(--scrollbar-size)]": scrollbarType === "always",
-                "data-[state=visible]:w-[var(--scrollbar-size)]": scrollbarType !== "always"
-              }
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              Thumb,
-              {
-                className: (0, import_clsx25.clsx)(
-                  "flex relative rounded-full bg-scrollbar-thumb group-hover/scrollbar:bg-primary",
-                  {
-                    "min-w-[var(--scrollbar-size)]": scrollbarType === "always",
-                    "data-[state=visible]:min-w-[var(--scrollbar-size)]": scrollbarType !== "always"
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          Viewport,
-          {
-            className: (0, import_clsx25.clsx)(
-              "border-inherit",
-              {
-                "w-[calc(100%_-_var(--scrollbar-size))] h-[calc(100%_-_var(--scrollbar-size))]": scrollbarType === "always",
-                "w-full h-full": scrollbarType === "scroll" || scrollbarType === "hover" || scrollbarType === "auto",
-                "peer-[&:where([data-state=visible])]/horizontal:h-[calc(100%_-_var(--scrollbar-size))] peer-[&:where([data-state=visible])]/vertical:w-[calc(100%_-_var(--scrollbar-size))]": scrollbarType === "auto"
-              }
-            ),
-            children
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          Corner,
-          {
-            className: (0, import_clsx25.clsx)(
-              "bg-scrollbar-track rounded-full"
-            )
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/components/layout/TabView.tsx
-var import_react27 = require("react");
-var import_react28 = require("react");
-var import_clsx26 = __toESM(require("clsx"));
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var TabContext = (0, import_react28.createContext)(null);
-function useTabContext() {
-  const ctx = (0, import_react28.useContext)(TabContext);
-  if (!ctx) throw new Error("useTabContext must be used inside a <TabView>");
-  return ctx;
-}
-function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, ...props }) {
-  const [tabs, setTabs] = (0, import_react28.useState)([]);
-  const [active, setActiveState] = (0, import_react28.useState)(null);
-  const buttonRefs = (0, import_react28.useRef)({});
-  const setActive = (id) => {
-    setActiveState(id);
-    onTabChanged?.(id);
-  };
-  const register = (id, label) => {
-    setTabs((prev) => {
-      const exists = prev.some((t) => t.id === id);
-      if (!exists) {
-        const updated = [...prev, { id, label }];
-        if (active === null && updated[initialTabIndex]) {
-          setActive(updated[initialTabIndex].id);
-        }
-        return updated;
-      }
-      return prev;
-    });
-  };
-  const unregister = (id) => {
-    setTabs((prev) => prev.filter((t) => t.id !== id));
-    delete buttonRefs.current[id];
-  };
-  const onKeyDown = (e, id) => {
-    const idx = tabs.findIndex((t) => t.id === id);
-    if (idx === -1) return;
-    let nextIdx = idx;
-    if (e.key === "ArrowRight") nextIdx = (idx + 1) % tabs.length;
-    else if (e.key === "ArrowLeft") nextIdx = (idx - 1 + tabs.length) % tabs.length;
-    else return;
-    const nextId = tabs[nextIdx].id;
-    setActive(nextId);
-    buttonRefs.current[nextId]?.focus();
-  };
-  const value = { active, setActive, register, unregister, tabs };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TabContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...outerDivProps, className: (0, import_clsx26.default)("w-full", props.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { role: "tablist", ...props, className: (0, import_clsx26.default)("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-      "button",
-      {
-        role: "tab",
-        "aria-selected": active === t.id,
-        "aria-controls": `${t.id}-panel`,
-        id: `${t.id}-tab`,
-        tabIndex: active === t.id ? 0 : -1,
-        ref: (el) => buttonRefs.current[t.id] = el,
-        onClick: () => setActive(t.id),
-        onKeyDown: (e) => onKeyDown(e, t.id),
-        className: (0, import_clsx26.default)(
-          "flex-row-0 grow justify-center px-3 pb-1 typography-label-md border-b-2",
-          active === t.id ? "border-primary" : "text-description hover:text-on-background"
-        ),
-        children: t.label
-      },
-      t.id
-    )) }),
-    children
-  ] }) });
-}
-function Tab({ id: customId, label, children, ...props }) {
-  const { active, register, unregister } = useTabContext();
-  const generatedId = (0, import_react27.useId)();
-  const id = customId ?? generatedId;
-  (0, import_react28.useEffect)(() => {
-    register(id, label);
-    return () => unregister(id);
-  }, [id, label]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    "div",
-    {
-      role: "tabpanel",
-      id: `${id}-panel`,
-      "aria-labelledby": `${id}-tab`,
-      hidden: active !== id,
-      className: "mt-4 text-sm",
-      ...props,
-      children: active === id && children
-    }
-  );
+function Tab({ id: customId, label, children, ...props }) {
+  const { active, register, unregister } = useTabContext();
+  const generatedId = (0, import_react27.useId)();
+  const id = customId ?? generatedId;
+  (0, import_react28.useEffect)(() => {
+    register(id, label);
+    return () => unregister(id);
+  }, [id, label]);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "div",
+    {
+      role: "tabpanel",
+      id: `${id}-panel`,
+      "aria-labelledby": `${id}-tab`,
+      hidden: active !== id,
+      className: "mt-4 text-sm",
+      ...props,
+      children: active === id && children
+    }
+  );
 }
 
 // src/components/layout/TextImage.tsx
-var import_clsx27 = __toESM(require("clsx"));
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_clsx26 = __toESM(require("clsx"));
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var TextImage = ({
   title,
   description,
@@ -13073,25 +11613,25 @@ var TextImage = ({
     secondary: "text-text-image-secondary-text bg-linear-to-r from-30% from-text-image-secondary-background to-text-image-secondary-background/55",
     dark: "text-text-image-dark-text bg-linear-to-r from-30% from-text-image-dark-background to-text-image-dark-background/55"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
-      className: (0, import_clsx27.default)("rounded-2xl w-full", className),
+      className: (0, import_clsx26.default)("rounded-2xl w-full", className),
       style: {
         backgroundImage: `url(${imageUrl})`,
         backgroundSize: "cover"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "div",
         {
-          className: (0, import_clsx27.default)(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          className: (0, import_clsx26.default)(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
-            badge && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: (0, import_clsx27.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex-col-1 overflow-hidden", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "typography-title-lg", children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-ellipsis overflow-hidden", children: description })
+            badge && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: (0, import_clsx26.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex-col-1 overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "typography-title-lg", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-ellipsis overflow-hidden", children: description })
             ] }),
-            onShowMoreClicked && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex-row-2 mt-2 underline", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
+            onShowMoreClicked && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-row-2 mt-2 underline", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
           ]
         }
       )
@@ -13100,7 +11640,7 @@ var TextImage = ({
 };
 
 // src/components/layout/VerticalDivider.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var VerticalDivider = ({
   width = 1,
   height = 100,
@@ -13108,7 +11648,7 @@ var VerticalDivider = ({
   dashGap = 4,
   dashLength = 4
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "svg",
     {
       width,
@@ -13117,7 +11657,7 @@ var VerticalDivider = ({
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "line",
           {
             opacity: "0.5",
@@ -13131,7 +11671,7 @@ var VerticalDivider = ({
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "linearGradient",
           {
             id: "paint_linear",
@@ -13141,9 +11681,9 @@ var VerticalDivider = ({
             y2: height,
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("stop", { stopOpacity: "0", stopColor: "currentColor" }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("stop", { offset: "0.5", stopColor: "currentColor" }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("stop", { stopOpacity: "0", stopColor: "currentColor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("stop", { offset: "0.5", stopColor: "currentColor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
             ]
           }
         ) })
@@ -13154,15 +11694,15 @@ var VerticalDivider = ({
 
 // src/components/loading-states/ErrorComponent.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_clsx28 = __toESM(require("clsx"));
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_clsx27 = __toESM(require("clsx"));
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var ErrorComponent = ({
   errorText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: (0, import_clsx28.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.AlertOctagon, { size: 64, className: "text-warning" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: (0, import_clsx27.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react8.AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
 };
@@ -13171,15 +11711,15 @@ var ErrorComponent = ({
 var import_react29 = require("react");
 
 // src/components/loading-states/LoadingContainer.tsx
-var import_clsx29 = require("clsx");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_clsx28 = require("clsx");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var LoadingContainer = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: (0, import_clsx29.clsx)("relative overflow-hidden shimmer bg-disabled-background rounded-md", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: (0, import_clsx28.clsx)("relative overflow-hidden shimmer bg-disabled-background rounded-md", className) });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-var import_clsx30 = require("clsx");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_clsx29 = require("clsx");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
@@ -13199,41 +11739,41 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LoadingContainer, { className: (0, import_clsx30.clsx)(className) });
+    return loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingContainer, { className: (0, import_clsx29.clsx)(className) });
   }
   if (hasError) {
-    return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LoadingContainer, { className: (0, import_clsx30.clsx)("bg-negative", className) });
+    return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingContainer, { className: (0, import_clsx29.clsx)("bg-negative", className) });
   }
   return children;
 };
 
 // src/components/loading-states/LoadingAnimation.tsx
-var import_clsx31 = __toESM(require("clsx"));
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_clsx30 = __toESM(require("clsx"));
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var LoadingAnimation = ({
   loadingText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: (0, import_clsx31.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(HelpwaveLogo, { animate: "loading" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: (0, import_clsx30.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(HelpwaveLogo, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
 };
 
 // src/components/loading-states/LoadingButton.tsx
-var import_clsx32 = __toESM(require("clsx"));
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_clsx31 = __toESM(require("clsx"));
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
   const paddingClass = ButtonUtil.paddingMapping[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: (0, import_clsx32.default)("flex-row-2 absolute inset-0 items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SolidButton, { ...rest, disabled: rest.disabled, onClick })
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "inline-block relative", children: [
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: (0, import_clsx31.default)("flex-row-2 absolute inset-0 items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SolidButton, { ...rest, disabled: rest.disabled, onClick })
   ] });
 };
 
 // src/components/loading-states/ProgressIndicator.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var sizeMapping = { small: 16, medium: 24, big: 48 };
 var ProgressIndicator = ({
   progress,
@@ -13250,7 +11790,7 @@ var ProgressIndicator = ({
   if (direction === "clockwise") {
     rotation += 360 * progress;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "svg",
     {
       style: {
@@ -13259,7 +11799,7 @@ var ProgressIndicator = ({
         transform: `rotate(${rotation}deg)`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "circle",
           {
             cx: center,
@@ -13270,7 +11810,7 @@ var ProgressIndicator = ({
             className: "stroke-progress-indicator-fill"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "circle",
           {
             cx: center,
@@ -13290,23 +11830,23 @@ var ProgressIndicator = ({
 
 // src/components/navigation/BreadCrumb.tsx
 var import_link = __toESM(require_link2());
-var import_clsx33 = __toESM(require("clsx"));
+var import_clsx32 = __toESM(require("clsx"));
 var import_react30 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
   const color = "text-description";
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: (0, import_clsx33.default)("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: (0, import_clsx32.default)("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react30.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react30.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         import_link.default,
         {
           href: crumb.link,
-          className: (0, import_clsx33.default)("btn-sm hover:bg-description/20", linkClassName, { [color]: !isLast }),
+          className: (0, import_clsx32.default)("btn-sm hover:bg-description/20", linkClassName, { [color]: !isLast }),
           children: crumb.display
         }
       ),
-      !isLast && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: (0, import_clsx33.default)(`px-1`, color), children: "/" })
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_clsx32.default)(`px-1`, color), children: "/" })
     ] }, index);
   }) });
 };
@@ -13316,8 +11856,8 @@ var import_lucide_react9 = require("lucide-react");
 var import_react31 = require("react");
 var import_react32 = require("react");
 var import_link2 = __toESM(require_link2());
-var import_clsx34 = __toESM(require("clsx"));
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_clsx33 = __toESM(require("clsx"));
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
 }
@@ -13344,8 +11884,8 @@ var NavigationItemWithSubItem = ({
       setOpen(false);
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       "button",
       {
         id: "navigation-" + id,
@@ -13360,11 +11900,11 @@ var NavigationItemWithSubItem = ({
         "aria-controls": "navigation-items-" + id,
         children: [
           label,
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ExpansionIcon, { isExpanded: isOpen })
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ExpansionIcon, { isExpanded: isOpen })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "ul",
       {
         id: "navigation-items-" + id,
@@ -13378,12 +11918,12 @@ var NavigationItemWithSubItem = ({
         },
         onBlur,
         hidden: !isOpen,
-        className: (0, import_clsx34.default)(
+        className: (0, import_clsx33.default)(
           "fixed flex-col-4 p-4 bg-surface text-on-surface shadow-side shadow-hw-bottom rounded-md z-2001",
           { "opacity-0": !style }
         ),
         style,
-        children: items.map(({ link, label: label2, external }, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        children: items.map(({ link, label: label2, external }, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           import_link2.default,
           {
             href: link,
@@ -13397,7 +11937,7 @@ var NavigationItemWithSubItem = ({
   ] });
 };
 var NavigationItemList = ({ items, ...restProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { ...restProps, className: (0, import_clsx34.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { ...restProps, className: (0, import_clsx33.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
   const [isMobileOpen, setIsMobileOpen] = (0, import_react32.useState)(false);
@@ -13406,15 +11946,15 @@ var Navigation = ({ ...props }) => {
   (0, import_react31.useEffect)(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("nav", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("nav", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       NavigationItemList,
       {
         ...props,
-        className: (0, import_clsx34.default)("hidden", { "desktop:flex": !isMobileOpen }, props.className)
+        className: (0, import_clsx33.default)("hidden", { "desktop:flex": !isMobileOpen }, props.className)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       IconButton,
       {
         color: "transparent",
@@ -13423,10 +11963,10 @@ var Navigation = ({ ...props }) => {
         "aria-haspopup": "true",
         "aria-expanded": isMobileOpen,
         "aria-controls": "navigation-menu-" + id,
-        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react9.Menu, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react9.Menu, { className: "w-6 h-6" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       "div",
       {
         id: "navigation-menu-" + id,
@@ -13439,7 +11979,7 @@ var Navigation = ({ ...props }) => {
             event.stopPropagation();
           }
         },
-        className: (0, import_clsx34.default)(
+        className: (0, import_clsx33.default)(
           "flex-col-8 items-center justify-center fixed inset-0 p-8 w-screen h-screen z-2000 bg-surface text-on-surface",
           {
             "desktop:hidden": isMobileOpen
@@ -13447,8 +11987,8 @@ var Navigation = ({ ...props }) => {
           props.className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IconButton, { color: "transparent", onClick: () => setIsMobileOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react9.XIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NavigationItemList, { ...props, className: (0, import_clsx34.default)("flex-col-8", props.className) })
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(IconButton, { color: "transparent", onClick: () => setIsMobileOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react9.XIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemList, { ...props, className: (0, import_clsx33.default)("flex-col-8", props.className) })
         ]
       }
     )
@@ -13457,9 +11997,9 @@ var Navigation = ({ ...props }) => {
 
 // src/components/navigation/Pagination.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_clsx35 = __toESM(require("clsx"));
+var import_clsx34 = __toESM(require("clsx"));
 var import_react33 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var Pagination = ({
   pageIndex,
   pageCount,
@@ -13482,16 +12022,16 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: (0, import_clsx35.default)("flex-row-1", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react10.ChevronFirst, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react10.ChevronLeft, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_clsx34.default)("flex-row-1", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react10.ChevronFirst, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react10.ChevronLeft, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         Input,
         {
           value,
-          className: (0, import_clsx35.default)(
-            "w-full text-center font-bold input-indicator-hidden h-10"
+          className: (0, import_clsx34.default)(
+            "w-24 text-center font-bold input-indicator-hidden h-10"
           ),
           type: "number",
           min: 1,
@@ -13510,24 +12050,24 @@ var Pagination = ({
           editCompleteOptions: { delay: 800 }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "select-none w-10", children: translation("of") }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "select-none w-10", children: translation("of") }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "span",
         {
-          className: "flex-row-2 flex-1 items-center justify-center select-none h-10 bg-input-background text-input-text rounded-md font-bold",
+          className: "flex-row-2 w-24 items-center justify-center select-none h-10 bg-input-background text-input-text rounded-md font-bold",
           children: pageCount
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react10.ChevronRight, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageCount - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react10.ChevronLast, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react10.ChevronRight, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageCount - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react10.ChevronLast, {}) })
   ] });
 };
 
 // src/components/navigation/StepperBar.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_clsx36 = __toESM(require("clsx"));
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_clsx35 = __toESM(require("clsx"));
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var defaultState = {
   currentStep: 0,
   seenSteps: /* @__PURE__ */ new Set([0])
@@ -13549,12 +12089,12 @@ var StepperBar = ({
     seenSteps.add(newStep);
     onChange({ currentStep: newStep, seenSteps });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
-      className: (0, import_clsx36.default)("flex-row-2 justify-between", className),
+      className: (0, import_clsx35.default)("flex-row-2 justify-between", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           SolidButton,
           {
             disabled: currentStep === 0 || disabledSteps.has(currentStep),
@@ -13563,18 +12103,18 @@ var StepperBar = ({
             },
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react11.ChevronLeft, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react11.ChevronLeft, { size: 14 }),
               translation("back")
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
           const seen = seenSteps.has(index);
-          return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             "div",
             {
               onClick: () => seen && update(index),
-              className: (0, import_clsx36.default)(
+              className: (0, import_clsx35.default)(
                 "rounded-full w-4 h-4",
                 {
                   "bg-stepperbar-dot-active hover:brightness-75": index === currentStep && seen && !disabledSteps.has(currentStep),
@@ -13590,7 +12130,7 @@ var StepperBar = ({
             index
           );
         }) }),
-        currentStep !== numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+        currentStep !== numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           SolidButton,
           {
             onClick: () => update(currentStep + 1),
@@ -13598,18 +12138,18 @@ var StepperBar = ({
             disabled: disabledSteps.has(currentStep),
             children: [
               translation("next"),
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react11.ChevronRight, { size: 14 })
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react11.ChevronRight, { size: 14 })
             ]
           }
         ) }),
-        currentStep === numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+        currentStep === numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           SolidButton,
           {
             disabled: disabledSteps.has(currentStep),
             onClick: onFinish,
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react11.Check, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react11.Check, { size: 14 }),
               finishText ?? translation("confirm")
             ]
           }
@@ -13620,7 +12160,7 @@ var StepperBar = ({
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
   const [usedState, setUsedState] = useOverwritableState(state, onChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     StepperBar,
     {
       ...props,
@@ -13635,392 +12175,8 @@ var import_lucide_react14 = require("lucide-react");
 
 // src/components/user-action/Checkbox.tsx
 var import_lucide_react12 = require("lucide-react");
-var import_clsx37 = __toESM(require("clsx"));
-
-// node_modules/@radix-ui/react-checkbox/dist/index.mjs
-var React19 = __toESM(require("react"), 1);
-
-// node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
-var React16 = __toESM(require("react"), 1);
-var React24 = __toESM(require("react"), 1);
-var useInsertionEffect = React16[" useInsertionEffect ".trim().toString()] || useLayoutEffect22;
-function useControllableState({
-  prop,
-  defaultProp,
-  onChange = () => {
-  },
-  caller
-}) {
-  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
-    defaultProp,
-    onChange
-  });
-  const isControlled = prop !== void 0;
-  const value = isControlled ? prop : uncontrolledProp;
-  if (true) {
-    const isControlledRef = React16.useRef(prop !== void 0);
-    React16.useEffect(() => {
-      const wasControlled = isControlledRef.current;
-      if (wasControlled !== isControlled) {
-        const from = wasControlled ? "controlled" : "uncontrolled";
-        const to = isControlled ? "controlled" : "uncontrolled";
-        console.warn(
-          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
-        );
-      }
-      isControlledRef.current = isControlled;
-    }, [isControlled, caller]);
-  }
-  const setValue = React16.useCallback(
-    (nextValue) => {
-      if (isControlled) {
-        const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
-        if (value2 !== prop) {
-          onChangeRef.current?.(value2);
-        }
-      } else {
-        setUncontrolledProp(nextValue);
-      }
-    },
-    [isControlled, prop, setUncontrolledProp, onChangeRef]
-  );
-  return [value, setValue];
-}
-function useUncontrolledState({
-  defaultProp,
-  onChange
-}) {
-  const [value, setValue] = React16.useState(defaultProp);
-  const prevValueRef = React16.useRef(value);
-  const onChangeRef = React16.useRef(onChange);
-  useInsertionEffect(() => {
-    onChangeRef.current = onChange;
-  }, [onChange]);
-  React16.useEffect(() => {
-    if (prevValueRef.current !== value) {
-      onChangeRef.current?.(value);
-      prevValueRef.current = value;
-    }
-  }, [value, prevValueRef]);
-  return [value, setValue, onChangeRef];
-}
-function isFunction(value) {
-  return typeof value === "function";
-}
-var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
-
-// node_modules/@radix-ui/react-use-previous/dist/index.mjs
-var React17 = __toESM(require("react"), 1);
-function usePrevious(value) {
-  const ref = React17.useRef({ value, previous: value });
-  return React17.useMemo(() => {
-    if (ref.current.value !== value) {
-      ref.current.previous = ref.current.value;
-      ref.current.value = value;
-    }
-    return ref.current.previous;
-  }, [value]);
-}
-
-// node_modules/@radix-ui/react-use-size/dist/index.mjs
-var React18 = __toESM(require("react"), 1);
-function useSize(element) {
-  const [size, setSize] = React18.useState(void 0);
-  useLayoutEffect22(() => {
-    if (element) {
-      setSize({ width: element.offsetWidth, height: element.offsetHeight });
-      const resizeObserver = new ResizeObserver((entries) => {
-        if (!Array.isArray(entries)) {
-          return;
-        }
-        if (!entries.length) {
-          return;
-        }
-        const entry = entries[0];
-        let width;
-        let height;
-        if ("borderBoxSize" in entry) {
-          const borderSizeEntry = entry["borderBoxSize"];
-          const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
-          width = borderSize["inlineSize"];
-          height = borderSize["blockSize"];
-        } else {
-          width = element.offsetWidth;
-          height = element.offsetHeight;
-        }
-        setSize({ width, height });
-      });
-      resizeObserver.observe(element, { box: "border-box" });
-      return () => resizeObserver.unobserve(element);
-    } else {
-      setSize(void 0);
-    }
-  }, [element]);
-  return size;
-}
-
-// node_modules/@radix-ui/react-checkbox/dist/index.mjs
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var CHECKBOX_NAME = "Checkbox";
-var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
-var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
-function CheckboxProvider(props) {
-  const {
-    __scopeCheckbox,
-    checked: checkedProp,
-    children,
-    defaultChecked,
-    disabled,
-    form,
-    name,
-    onCheckedChange,
-    required,
-    value = "on",
-    // @ts-expect-error
-    internal_do_not_use_render
-  } = props;
-  const [checked, setChecked] = useControllableState({
-    prop: checkedProp,
-    defaultProp: defaultChecked ?? false,
-    onChange: onCheckedChange,
-    caller: CHECKBOX_NAME
-  });
-  const [control, setControl] = React19.useState(null);
-  const [bubbleInput, setBubbleInput] = React19.useState(null);
-  const hasConsumerStoppedPropagationRef = React19.useRef(false);
-  const isFormControl = control ? !!form || !!control.closest("form") : (
-    // We set this to true by default so that events bubble to forms without JS (SSR)
-    true
-  );
-  const context = {
-    checked,
-    disabled,
-    setChecked,
-    control,
-    setControl,
-    name,
-    form,
-    value,
-    hasConsumerStoppedPropagationRef,
-    required,
-    defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,
-    isFormControl,
-    bubbleInput,
-    setBubbleInput
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-    CheckboxProviderImpl,
-    {
-      scope: __scopeCheckbox,
-      ...context,
-      children: isFunction2(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
-    }
-  );
-}
-var TRIGGER_NAME = "CheckboxTrigger";
-var CheckboxTrigger = React19.forwardRef(
-  ({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) => {
-    const {
-      control,
-      value,
-      disabled,
-      checked,
-      required,
-      setControl,
-      setChecked,
-      hasConsumerStoppedPropagationRef,
-      isFormControl,
-      bubbleInput
-    } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
-    const composedRefs = useComposedRefs(forwardedRef, setControl);
-    const initialCheckedStateRef = React19.useRef(checked);
-    React19.useEffect(() => {
-      const form = control?.form;
-      if (form) {
-        const reset = () => setChecked(initialCheckedStateRef.current);
-        form.addEventListener("reset", reset);
-        return () => form.removeEventListener("reset", reset);
-      }
-    }, [control, setChecked]);
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-      Primitive.button,
-      {
-        type: "button",
-        role: "checkbox",
-        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
-        "aria-required": required,
-        "data-state": getState(checked),
-        "data-disabled": disabled ? "" : void 0,
-        disabled,
-        value,
-        ...checkboxProps,
-        ref: composedRefs,
-        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
-          if (event.key === "Enter") event.preventDefault();
-        }),
-        onClick: composeEventHandlers(onClick, (event) => {
-          setChecked((prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked);
-          if (bubbleInput && isFormControl) {
-            hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
-            if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
-          }
-        })
-      }
-    );
-  }
-);
-CheckboxTrigger.displayName = TRIGGER_NAME;
-var Checkbox = React19.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopeCheckbox,
-      name,
-      checked,
-      defaultChecked,
-      required,
-      disabled,
-      value,
-      onCheckedChange,
-      form,
-      ...checkboxProps
-    } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-      CheckboxProvider,
-      {
-        __scopeCheckbox,
-        checked,
-        defaultChecked,
-        disabled,
-        required,
-        onCheckedChange,
-        name,
-        form,
-        value,
-        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            CheckboxTrigger,
-            {
-              ...checkboxProps,
-              ref: forwardedRef,
-              __scopeCheckbox
-            }
-          ),
-          isFormControl && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            CheckboxBubbleInput,
-            {
-              __scopeCheckbox
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
-Checkbox.displayName = CHECKBOX_NAME;
-var INDICATOR_NAME = "CheckboxIndicator";
-var CheckboxIndicator = React19.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
-    const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-      Presence,
-      {
-        present: forceMount || isIndeterminate(context.checked) || context.checked === true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          Primitive.span,
-          {
-            "data-state": getState(context.checked),
-            "data-disabled": context.disabled ? "" : void 0,
-            ...indicatorProps,
-            ref: forwardedRef,
-            style: { pointerEvents: "none", ...props.style }
-          }
-        )
-      }
-    );
-  }
-);
-CheckboxIndicator.displayName = INDICATOR_NAME;
-var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
-var CheckboxBubbleInput = React19.forwardRef(
-  ({ __scopeCheckbox, ...props }, forwardedRef) => {
-    const {
-      control,
-      hasConsumerStoppedPropagationRef,
-      checked,
-      defaultChecked,
-      required,
-      disabled,
-      name,
-      value,
-      form,
-      bubbleInput,
-      setBubbleInput
-    } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);
-    const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
-    const prevChecked = usePrevious(checked);
-    const controlSize = useSize(control);
-    React19.useEffect(() => {
-      const input = bubbleInput;
-      if (!input) return;
-      const inputProto = window.HTMLInputElement.prototype;
-      const descriptor = Object.getOwnPropertyDescriptor(
-        inputProto,
-        "checked"
-      );
-      const setChecked = descriptor.set;
-      const bubbles = !hasConsumerStoppedPropagationRef.current;
-      if (prevChecked !== checked && setChecked) {
-        const event = new Event("click", { bubbles });
-        input.indeterminate = isIndeterminate(checked);
-        setChecked.call(input, isIndeterminate(checked) ? false : checked);
-        input.dispatchEvent(event);
-      }
-    }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
-    const defaultCheckedRef = React19.useRef(isIndeterminate(checked) ? false : checked);
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-      Primitive.input,
-      {
-        type: "checkbox",
-        "aria-hidden": true,
-        defaultChecked: defaultChecked ?? defaultCheckedRef.current,
-        required,
-        disabled,
-        name,
-        value,
-        form,
-        ...props,
-        tabIndex: -1,
-        ref: composedRefs,
-        style: {
-          ...props.style,
-          ...controlSize,
-          position: "absolute",
-          pointerEvents: "none",
-          opacity: 0,
-          margin: 0,
-          // We transform because the input is absolutely positioned but we have
-          // rendered it **after** the button. This pulls it back to sit on top
-          // of the button.
-          transform: "translateX(-100%)"
-        }
-      }
-    );
-  }
-);
-CheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;
-function isFunction2(value) {
-  return typeof value === "function";
-}
-function isIndeterminate(checked) {
-  return checked === "indeterminate";
-}
-function getState(checked) {
-  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
-}
-
-// src/components/user-action/Checkbox.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_clsx36 = __toESM(require("clsx"));
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var checkboxSizeMapping = {
   sm: "size-5 border-1",
   md: "size-6 border-1",
@@ -14031,25 +12187,36 @@ var checkboxIconSizeMapping = {
   md: "size-5 stroke-3",
   lg: "size-7 stroke-3"
 };
-var Checkbox2 = ({
+var Checkbox = ({
   disabled,
   checked = false,
   indeterminate = false,
-  onChange,
+  onCheckedChange,
   size = "md",
   className = "",
   ...props
 }) => {
   const usedSizeClass = checkboxSizeMapping[size];
   const innerIconSize = checkboxIconSizeMapping[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-    Checkbox,
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    "div",
     {
       ...props,
-      disabled,
-      checked: indeterminate ? "indeterminate" : checked,
-      onCheckedChange: onChange,
-      className: (0, import_clsx37.default)(
+      onClick: (event) => {
+        if (!disabled) {
+          onCheckedChange(!checked);
+          props.onClick?.(event);
+        }
+      },
+      onKeyDown: (event) => {
+        if (disabled) return;
+        if (event.key === " " || event.key === "Enter") {
+          event.preventDefault();
+          onCheckedChange(!checked);
+          props.onKeyDown?.(event);
+        }
+      },
+      className: (0, import_clsx36.default)(
         usedSizeClass,
         `flex-col-0 items-center justify-center rounded`,
         {
@@ -14060,34 +12227,38 @@ var Checkbox2 = ({
         },
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(CheckboxIndicator, { children: [
-        !checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: (0, import_clsx37.default)("bg-input-background", innerIconSize) }),
-        checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react12.Check, { className: innerIconSize }),
-        indeterminate && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react12.Minus, { className: innerIconSize })
-      ] })
+      role: "checkbox",
+      "aria-checked": indeterminate ? "mixed" : checked,
+      "aria-disabled": disabled,
+      tabIndex: disabled ? -1 : 0,
+      children: [
+        !checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: (0, import_clsx36.default)("bg-input-background", innerIconSize) }),
+        checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react12.Check, { className: innerIconSize }),
+        indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react12.Minus, { className: innerIconSize })
+      ]
     }
   );
 };
 var CheckboxUncontrolled = ({
   checked: initialChecked,
-  onChange,
+  onCheckedChange,
   ...props
 }) => {
-  const [checked, setChecked] = useOverwritableState(initialChecked, onChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-    Checkbox2,
+  const [checked, setChecked] = useOverwritableState(initialChecked, onCheckedChange);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    Checkbox,
     {
       ...props,
       checked,
-      onChange: setChecked
+      onCheckedChange: setChecked
     }
   );
 };
 
 // src/components/properties/PropertyBase.tsx
 var import_lucide_react13 = require("lucide-react");
-var import_clsx38 = __toESM(require("clsx"));
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_clsx37 = __toESM(require("clsx"));
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var PropertyBase = ({
   name,
   input,
@@ -14100,11 +12271,11 @@ var PropertyBase = ({
 }) => {
   const translation = useHightideTranslation();
   const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: (0, import_clsx38.default)("flex-row-0 group", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: (0, import_clsx37.default)("flex-row-0 group", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "div",
       {
-        className: (0, import_clsx38.default)(
+        className: (0, import_clsx37.default)(
           "flex-row-2 max-w-48 min-w-48 px-3 py-2 items-center rounded-l-xl border-2 border-r-0",
           {
             "bg-property-title-background text-property-title-text group-hover:border-primary": !requiredAndNoValue,
@@ -14113,15 +12284,15 @@ var PropertyBase = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "max-w-6 min-w-6 text-text-primary", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "font-semibold", children: name })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "max-w-6 min-w-6 text-text-primary", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "font-semibold", children: name })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "div",
       {
-        className: (0, import_clsx38.default)(
+        className: (0, import_clsx37.default)(
           "flex-row-2 grow px-3 py-2 justify-between items-center rounded-r-xl border-2 border-l-0 min-h-15",
           {
             "bg-input-background text-input-text group-hover:border-primary": !requiredAndNoValue,
@@ -14131,13 +12302,13 @@ var PropertyBase = ({
         ),
         children: [
           input({ softRequired, hasValue }),
-          requiredAndNoValue && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "text-warning", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react13.AlertTriangle, { size: 24 }) }),
-          onRemove && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          requiredAndNoValue && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-warning", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react13.AlertTriangle, { size: 24 }) }),
+          onRemove && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             TextButton,
             {
               onClick: onRemove,
               color: "negative",
-              className: (0, import_clsx38.default)("items-center"),
+              className: (0, import_clsx37.default)("items-center"),
               disabled: !hasValue,
               children: translation("remove")
             }
@@ -14150,7 +12321,7 @@ var PropertyBase = ({
 
 // src/components/properties/CheckboxProperty.tsx
 var import_react34 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var CheckboxProperty = ({
   value,
   onChange,
@@ -14159,25 +12330,25 @@ var CheckboxProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const id = (0, import_react34.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue: true,
       readOnly,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react14.Check, { size: 24 }),
-      input: () => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-          Checkbox2,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react14.Check, { size: 24 }),
+      input: () => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          Checkbox,
           {
             id,
             checked: value ?? true,
             disabled: readOnly,
-            onChange,
+            onCheckedChange: onChange,
             "aria-labelledby": id + "label"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Label, { id: id + "label", children: `${translation("yes")}/${translation("no")}` })
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Label, { id: id + "label", children: `${translation("yes")}/${translation("no")}` })
       ] })
     }
   );
@@ -14185,8 +12356,8 @@ var CheckboxProperty = ({
 
 // src/components/properties/DateProperty.tsx
 var import_lucide_react15 = require("lucide-react");
-var import_clsx39 = __toESM(require("clsx"));
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_clsx38 = __toESM(require("clsx"));
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var DateProperty = ({
   value,
   onChange,
@@ -14197,16 +12368,16 @@ var DateProperty = ({
 }) => {
   const hasValue = !!value;
   const dateText = value ? type === "dateTime" ? formatDateTime(value) : formatDate(value) : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react15.CalendarDays, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react15.CalendarDays, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         Input,
         {
-          className: (0, import_clsx39.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
+          className: (0, import_clsx38.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
           value: dateText,
           type: type === "dateTime" ? "datetime-local" : "date",
           readOnly,
@@ -14228,8 +12399,8 @@ var DateProperty = ({
 
 // src/components/properties/MultiSelectProperty.tsx
 var import_lucide_react16 = require("lucide-react");
-var import_clsx40 = __toESM(require("clsx"));
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_clsx39 = __toESM(require("clsx"));
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var MultiSelectProperty = ({
   children,
   values,
@@ -14237,25 +12408,25 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = values.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react16.List, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react16.List, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         MultiSelectChipDisplay,
         {
           values,
           onValuesChanged,
           disabled: props.readOnly,
           contentPanelProps: {
-            className: (0, import_clsx40.default)(
+            className: (0, import_clsx39.default)(
               "!border-none !min-h-10"
             )
           },
           chipDisplayProps: {
-            className: (0, import_clsx40.default)({
+            className: (0, import_clsx39.default)({
               "!bg-warning !text-surface-warning": softRequired && !hasValue
             })
           },
@@ -14268,8 +12439,8 @@ var MultiSelectProperty = ({
 
 // src/components/properties/NumberProperty.tsx
 var import_lucide_react17 = require("lucide-react");
-var import_clsx41 = __toESM(require("clsx"));
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_clsx40 = __toESM(require("clsx"));
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var NumberProperty = ({
   value,
   onChange,
@@ -14281,22 +12452,22 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react17.Binary, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react17.Binary, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
         "div",
         {
-          className: (0, import_clsx41.default)("flex-row-2 grow", { "text-warning": softRequired && !hasValue }),
+          className: (0, import_clsx40.default)("flex-row-2 grow", { "text-warning": softRequired && !hasValue }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               Input,
               {
-                className: (0, import_clsx41.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+                className: (0, import_clsx40.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
                 value: value?.toString() ?? "",
                 type: "number",
                 readOnly,
@@ -14319,7 +12490,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: (0, import_clsx41.default)("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: (0, import_clsx40.default)("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
           ]
         }
       )
@@ -14329,8 +12500,8 @@ var NumberProperty = ({
 
 // src/components/properties/SelectProperty.tsx
 var import_lucide_react18 = require("lucide-react");
-var import_clsx42 = __toESM(require("clsx"));
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_clsx41 = __toESM(require("clsx"));
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var SingleSelectProperty = ({
   children,
   value,
@@ -14339,20 +12510,20 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react18.List, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react18.List, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         Select,
         {
           value,
           onValueChanged,
           disabled: props.readOnly,
           buttonProps: {
-            className: (0, import_clsx42.default)(
+            className: (0, import_clsx41.default)(
               "border-none w-full",
               {
                 "!bg-warning !text-surface-warning": softRequired && !hasValue
@@ -14369,12 +12540,12 @@ var SingleSelectProperty = ({
 
 // src/components/properties/TextProperty.tsx
 var import_lucide_react19 = require("lucide-react");
-var import_clsx44 = __toESM(require("clsx"));
+var import_clsx43 = __toESM(require("clsx"));
 
 // src/components/user-action/Textarea.tsx
 var import_react35 = require("react");
-var import_clsx43 = __toESM(require("clsx"));
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_clsx42 = __toESM(require("clsx"));
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var Textarea = (0, import_react35.forwardRef)(function Textarea2({
   id,
   onChange,
@@ -14393,12 +12564,12 @@ var Textarea = (0, import_react35.forwardRef)(function Textarea2({
     onEditCompleted?.(text);
     clearTimer();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "textarea",
     {
       ref,
       id,
-      className: (0, import_clsx43.default)(
+      className: (0, import_clsx42.default)(
         "resize-none w-full h-32 overflow-y-scroll",
         "py-2 px-3 rounded-md border-2 border-transparent focus-style-none",
         {
@@ -14431,7 +12602,7 @@ var TextareaUncontrolled = ({
   ...props
 }) => {
   const [text, setText] = useOverwritableState(value, onChangeText);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     Textarea,
     {
       ...props,
@@ -14451,10 +12622,10 @@ var TextareaWithHeadline = ({
 }) => {
   const genId = (0, import_react35.useId)();
   const usedId = id ?? genId;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "div",
     {
-      className: (0, import_clsx43.default)(
+      className: (0, import_clsx42.default)(
         "group flex-col-3 border-2 rounded-lg",
         {
           "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
@@ -14463,13 +12634,13 @@ var TextareaWithHeadline = ({
         containerClassName
       ),
       children: [
-        headline && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Label, { size: "md", ...headlineProps, htmlFor: usedId, children: headline }),
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        headline && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Label, { size: "md", ...headlineProps, htmlFor: usedId, children: headline }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Textarea,
           {
             ...props,
             id: usedId,
-            className: (0, import_clsx43.default)(
+            className: (0, import_clsx42.default)(
               "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
               className
             ),
@@ -14482,7 +12653,7 @@ var TextareaWithHeadline = ({
 };
 
 // src/components/properties/TextProperty.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var TextProperty = ({
   value,
   readOnly,
@@ -14493,17 +12664,17 @@ var TextProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react19.Text, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react19.Text, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         Textarea,
         {
-          className: (0, import_clsx44.default)({
+          className: (0, import_clsx43.default)({
             "bg-surface-warning placeholder-warning": softRequired && !hasValue
           }),
           rows: 5,
@@ -14532,12 +12703,12 @@ var TextProperty = ({
 };
 
 // src/components/table/FillerRowElement.tsx
-var import_clsx45 = require("clsx");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_clsx44 = require("clsx");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var FillerRowElement = ({
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: (0, import_clsx45.clsx)("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: (0, import_clsx44.clsx)("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
 };
 
 // src/components/table/Filter.ts
@@ -14556,18 +12727,18 @@ var TableFilters = {
 
 // src/components/table/Table.tsx
 var import_react41 = require("react");
-var import_clsx49 = __toESM(require("clsx"));
+var import_clsx48 = __toESM(require("clsx"));
 var import_react_table = require("@tanstack/react-table");
 var import_react_custom_scrollbars_23 = require("react-custom-scrollbars-2");
 
 // src/components/table/TableCell.tsx
-var import_clsx46 = require("clsx");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_clsx45 = require("clsx");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: (0, import_clsx46.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: (0, import_clsx45.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
@@ -14583,8 +12754,8 @@ var useResizeCallbackWrapper = (callback) => {
 
 // src/components/table/TableSortButton.tsx
 var import_lucide_react20 = require("lucide-react");
-var import_clsx47 = __toESM(require("clsx"));
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_clsx46 = __toESM(require("clsx"));
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var TableSortButton = ({
   sortDirection,
   invert = false,
@@ -14592,20 +12763,20 @@ var TableSortButton = ({
   className,
   ...buttonProps
 }) => {
-  let icon = /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react20.ChevronsUpDown, { className: "w-full h-full" });
+  let icon = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react20.ChevronsUpDown, { className: "w-full h-full" });
   if (sortDirection) {
     let usedSortDirection = sortDirection;
     if (invert) {
       usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
     }
-    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react20.ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react20.ChevronDown, { className: "w-full h-full" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react20.ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react20.ChevronDown, { className: "w-full h-full" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     IconButton,
     {
       size: "tiny",
       color,
-      className: (0, import_clsx47.default)(className),
+      className: (0, import_clsx46.default)(className),
       ...buttonProps,
       children: icon
     }
@@ -14617,7 +12788,7 @@ var import_lucide_react21 = require("lucide-react");
 
 // src/components/user-action/Menu.tsx
 var import_react39 = require("react");
-var import_clsx48 = __toESM(require("clsx"));
+var import_clsx47 = __toESM(require("clsx"));
 
 // src/utils/bagFunctions.ts
 var resolve = (children, bag) => {
@@ -14752,17 +12923,17 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-action/Menu.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   isDisabled = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
   "div",
   {
-    className: (0, import_clsx48.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+    className: (0, import_clsx47.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
       "text-right": alignment === "right",
       "text-left": alignment === "left",
       "text-disabled cursor-not-allowed": isDisabled,
@@ -14828,14 +12999,14 @@ var Menu = ({
       setIsHidden(false);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
     trigger(bag, triggerRef),
-    (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "div",
       {
         ref: menuRef,
         onClick: (e) => e.stopPropagation(),
-        className: (0, import_clsx48.default)(
+        className: (0, import_clsx47.default)(
           "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
           {
             "animate-pop-in": isOpen,
@@ -14860,7 +13031,7 @@ var Menu = ({
 
 // src/components/table/TableFilterButton.tsx
 var import_react40 = require("react");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var TableFilterButton = ({
   filterType,
   column
@@ -14872,12 +13043,12 @@ var TableFilterButton = ({
   (0, import_react40.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     Menu,
     {
-      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react21.FilterIcon, {}) }),
-        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react21.FilterIcon, {}) }),
+        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "div",
           {
             className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
@@ -14885,9 +13056,9 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
-        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           Input,
           {
             value: filterValue ?? "",
@@ -14897,8 +13068,8 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-2 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex-row-2 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
             Input,
             {
               value: filterValue?.[0] ?? "",
@@ -14911,8 +13082,8 @@ var TableFilterButton = ({
               className: "h-10 input-indicator-hidden w-40"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "font-bold", children: "-" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
             Input,
             {
               value: filterValue?.[1] ?? "",
@@ -14926,8 +13097,8 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        filterType === "dateRange" && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
             Input,
             {
               value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
@@ -14940,7 +13111,7 @@ var TableFilterButton = ({
               className: "h-10 w-50"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
             Input,
             {
               value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
@@ -14954,12 +13125,12 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SolidButton, { color: "negative", size: "small", onClick: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SolidButton, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();
           }, children: translation("remove") }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SolidButton, { size: "small", onClick: () => {
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SolidButton, { size: "small", onClick: () => {
             column.setFilterValue(filterValue);
             close();
           }, children: translation("apply") })
@@ -14970,7 +13141,7 @@ var TableFilterButton = ({
 };
 
 // src/components/table/Table.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var Table = ({
   data,
   fillerRow,
@@ -15089,7 +13260,7 @@ var Table = ({
       minSize: 60,
       maxSize: 700,
       cell: ({ cell }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TableCell, { children: cell.getValue() });
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TableCell, { children: cell.getValue() });
       },
       ...defaultColumn
     },
@@ -15174,24 +13345,25 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { ref, className: (0, import_clsx49.default)("flex-col-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  console.log(table.getState().sorting);
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { ref, className: (0, import_clsx48.default)("flex-col-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       import_react_custom_scrollbars_23.Scrollbars,
       {
         autoHeight: true,
         autoHeightMax: tableRef.current?.offsetHeight ? tableRef.current?.offsetHeight + 2 : void 0,
         autoHide: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
           "table",
           {
             ref: tableRef,
-            className: (0, import_clsx49.default)(tableClassName),
+            className: (0, import_clsx48.default)(tableClassName),
             style: {
               ...columnSizeVars,
               width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
             },
             children: [
-              table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+              table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 "col",
                 {
                   style: {
@@ -15202,22 +13374,38 @@ var Table = ({
                 },
                 header.id
               )) }, headerGroup.id)),
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
                   "th",
                   {
                     colSpan: header.colSpan,
-                    className: (0, import_clsx49.default)("relative group", header.column.columnDef.meta?.className),
+                    className: (0, import_clsx48.default)("relative group", header.column.columnDef.meta?.className),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex-row-1 items-center", children: [
-                        header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                        header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                           TableSortButton,
                           {
                             sortDirection: header.column.getIsSorted(),
-                            onClick: () => header.column.toggleSorting()
+                            onClick: () => {
+                              const sorted = header.column.getIsSorted();
+                              const isMulti = header.column.getCanMultiSort();
+                              console.log(isMulti, header.column.id);
+                              if (!isMulti) {
+                                table.resetSorting();
+                              }
+                              if (!sorted) {
+                                header.column.toggleSorting(true, isMulti);
+                                return;
+                              } else if (sorted === "desc") {
+                                header.column.toggleSorting(false, isMulti);
+                              }
+                              if (sorted === "asc") {
+                                header.column.clearSorting();
+                              }
+                            }
                           }
                         ),
-                        header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                        header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                           TableFilterButton,
                           {
                             column: header.column,
@@ -15229,7 +13417,7 @@ var Table = ({
                           header.getContext()
                         )
                       ] }) }),
-                      header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                      header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                         "div",
                         {
                           onMouseDown: header.getResizeHandler(),
@@ -15248,18 +13436,26 @@ var Table = ({
                   header.id
                 );
               }) }, headerGroup.id)) }),
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("tbody", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("tbody", { children: [
                 table.getRowModel().rows.map((row) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("tr", { onClick: () => onRowClick?.(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
-                    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("td", { children: (0, import_react_table.flexRender)(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    ) }, cell.id);
-                  }) }, row.id);
+                  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                    "tr",
+                    {
+                      onClick: () => onRowClick?.(row, table),
+                      className: table.options.meta?.bodyRowClassName,
+                      children: row.getVisibleCells().map((cell) => {
+                        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { children: (0, import_react_table.flexRender)(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        ) }, cell.id);
+                      })
+                    },
+                    row.id
+                  );
                 }),
                 range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("tr", { children: columns.map((column) => {
-                    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(FillerRowElement, {}) }, column.id);
+                  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { children: columns.map((column) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FillerRowElement, {}) }, column.id);
                   }) }, "filler-row-" + index);
                 })
               ] })
@@ -15268,7 +13464,7 @@ var Table = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -15280,7 +13476,7 @@ var Table = ({
 };
 var TableUncontrolled = ({ data, ...props }) => {
   const [usedDate] = useOverwritableState(data);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Table,
     {
       ...props,
@@ -15304,12 +13500,12 @@ var TableWithSelection = ({
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-            Checkbox2,
+          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            Checkbox,
             {
               checked: table.getIsAllRowsSelected(),
               indeterminate: table.getIsSomeRowsSelected(),
-              onChange: (value) => {
+              onCheckedChange: (value) => {
                 const newValue = !!value;
                 table.toggleAllRowsSelected(newValue);
               }
@@ -15317,12 +13513,12 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-            Checkbox2,
+          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            Checkbox,
             {
               disabled: !row.getCanSelect(),
               checked: row.getIsSelected(),
-              onChange: row.getToggleSelectedHandler()
+              onCheckedChange: row.getToggleSelectedHandler()
             }
           );
         },
@@ -15335,15 +13531,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Checkbox2, { checked: false, disabled: true, className: "max-w-6" });
+          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Checkbox, { checked: false, disabled: true, className: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(FillerRowElement, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FillerRowElement, {});
       },
       state: {
         rowSelection,
@@ -15357,7 +13553,7 @@ var TableWithSelection = ({
       },
       meta: {
         ...meta,
-        bodyRowClassName: (0, import_clsx49.default)(
+        bodyRowClassName: (0, import_clsx48.default)(
           { "cursor-pointer": !disableClickRowClickSelection },
           meta?.bodyRowClassName
         )
@@ -15369,7 +13565,7 @@ var TableWithSelection = ({
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
 var import_react42 = require("react");
-var import_clsx50 = require("clsx");
+var import_clsx49 = require("clsx");
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -15378,7 +13574,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
 var import_lucide_react22 = require("lucide-react");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -15409,10 +13605,10 @@ var CopyToClipboardWrapper = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
-      className: (0, import_clsx50.clsx)("relative inline-block cursor-copy", containerClassName),
+      className: (0, import_clsx49.clsx)("relative inline-block cursor-copy", containerClassName),
       onMouseEnter: () => {
         setIsShowingIndication(true);
       },
@@ -15427,10 +13623,10 @@ var CopyToClipboardWrapper = ({
       },
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
           "div",
           {
-            className: (0, import_clsx50.clsx)(
+            className: (0, import_clsx49.clsx)(
               `absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
            shadow-around-md bg-tooltip-background cursor-default pointer-events-none`,
               "transition-opacity duration-200",
@@ -15442,18 +13638,18 @@ var CopyToClipboardWrapper = ({
               opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
             },
             children: [
-              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex-row-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_lucide_react22.CheckIcon, { size: 16, className: "text-positive" }),
+              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react22.CheckIcon, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
-              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex-row-1 text-description", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_lucide_react22.Copy, { size: 16 }),
+              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react22.Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx50.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: (0, import_clsx49.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -15466,8 +13662,8 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-var import_clsx51 = __toESM(require("clsx"));
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_clsx50 = __toESM(require("clsx"));
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var DateTimePicker = ({
   value = /* @__PURE__ */ new Date(),
   start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
@@ -15485,7 +13681,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       DatePicker,
       {
         ...datePickerProps,
@@ -15499,25 +13695,25 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       TimePicker,
       {
         ...timePickerProps,
-        className: (0, import_clsx51.default)("h-full", { "justify-between w-full": mode === "time" }),
+        className: (0, import_clsx50.default)("h-full", { "justify-between w-full": mode === "time" }),
         maxHeight: 250,
         time: value,
         onChange
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex-col-2 w-fit", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex-row-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-col-2 w-fit", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-4", children: [
       dateDisplay,
       timeDisplay
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex-row-2 mt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-2 mt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         SolidButton,
         {
           size: "medium",
@@ -15531,8 +13727,8 @@ var DateTimePicker = ({
 
 // src/components/user-action/ScrollPicker.tsx
 var import_react43 = require("react");
-var import_clsx52 = __toESM(require("clsx"));
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_clsx51 = __toESM(require("clsx"));
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -15671,7 +13867,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     "div",
     {
       className: "relative overflow-hidden",
@@ -15682,15 +13878,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + deltaY }));
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           "div",
           {
             className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/50 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -15698,10 +13894,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               "div",
               {
-                className: (0, import_clsx52.default)(
+                className: (0, import_clsx51.default)(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -15729,8 +13925,8 @@ var ScrollPicker = ({
 
 // src/components/user-action/SearchBar.tsx
 var import_lucide_react23 = require("lucide-react");
-var import_clsx53 = require("clsx");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_clsx52 = require("clsx");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var SearchBar = ({
   placeholder,
   onSearch,
@@ -15739,21 +13935,21 @@ var SearchBar = ({
   ...inputProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: (0, import_clsx53.clsx)("flex-row-2 justify-between items-center", containerClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: (0, import_clsx52.clsx)("flex-row-2 justify-between items-center", containerClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       Input,
       {
         ...inputProps,
         placeholder: placeholder ?? translation("search")
       }
     ),
-    onSearch && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(IconButton, { color: "neutral", disabled: disableOnSearch, onClick: onSearch, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react23.Search, { className: "w-full h-full" }) })
+    onSearch && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(IconButton, { color: "neutral", disabled: disableOnSearch, onClick: onSearch, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react23.Search, { className: "w-full h-full" }) })
   ] });
 };
 
 // src/components/user-action/Tooltip.tsx
-var import_clsx54 = require("clsx");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_clsx53 = require("clsx");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var Tooltip = ({
   tooltip,
   children,
@@ -15783,17 +13979,17 @@ var Tooltip = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
     "div",
     {
-      className: (0, import_clsx54.clsx)("relative inline-block", containerClassName),
+      className: (0, import_clsx53.clsx)("relative inline-block", containerClassName),
       ...handlers,
       children: [
         children,
-        isHovered && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+        isHovered && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
           "div",
           {
-            className: (0, import_clsx54.clsx)(
+            className: (0, import_clsx53.clsx)(
               `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
            animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,
               positionClasses[position],
@@ -15802,10 +13998,10 @@ var Tooltip = ({
             style: { zIndex, animationDelay: animationDelay + "ms" },
             children: [
               tooltip,
-              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx54.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: (0, import_clsx53.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -15820,8 +14016,8 @@ var Tooltip = ({
 // src/components/user-action/input/InsideLabelInput.tsx
 var import_react44 = require("react");
 var import_react45 = require("react");
-var import_clsx55 = __toESM(require("clsx"));
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_clsx54 = __toESM(require("clsx"));
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var InsideLabelInput = (0, import_react45.forwardRef)(function InsideLabelInput2({
   id: customId,
   label,
@@ -15831,13 +14027,13 @@ var InsideLabelInput = (0, import_react45.forwardRef)(function InsideLabelInput2
   const [isFocused, setIsFocused] = (0, import_react45.useState)(false);
   const generatedId = (0, import_react44.useId)();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: (0, import_clsx55.default)("relative"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: (0, import_clsx54.default)("relative"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       Input,
       {
         ...props,
         id,
-        className: (0, import_clsx55.default)("h-14 px-4 pb-2 py-6.5", props.className),
+        className: (0, import_clsx54.default)("h-14 px-4 pb-2 py-6.5", props.className),
         ref: forwardedRef,
         "aria-labelledby": id + "-label",
         onFocus: (event) => {
@@ -15850,13 +14046,13 @@ var InsideLabelInput = (0, import_react45.forwardRef)(function InsideLabelInput2
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: (0, import_clsx55.default)(
+        className: (0, import_clsx54.default)(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -15872,7 +14068,7 @@ var InsideLabelInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, props.onChangeText);
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     InsideLabelInput,
     {
       ...props,
@@ -15885,8 +14081,8 @@ var InsideLabelInputUncontrolled = ({
 // src/components/user-action/input/ToggleableInput.tsx
 var import_react46 = require("react");
 var import_lucide_react24 = require("lucide-react");
-var import_clsx56 = __toESM(require("clsx"));
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_clsx55 = __toESM(require("clsx"));
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var ToggleableInput = (0, import_react46.forwardRef)(function ToggleableInput2({
   value,
   initialState = "display",
@@ -15901,8 +14097,8 @@ var ToggleableInput = (0, import_react46.forwardRef)(function ToggleableInput2({
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: (0, import_clsx56.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: (0, import_clsx55.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       Input,
       {
         ...props,
@@ -15921,16 +14117,16 @@ var ToggleableInput = (0, import_react46.forwardRef)(function ToggleableInput2({
           ...editCompleteOptions,
           allowEnterComplete: true
         },
-        className: (0, import_clsx56.default)(`w-full ring-0 outline-0 decoration-primary underline-offset-4`, {
+        className: (0, import_clsx55.default)(`w-full ring-0 outline-0 decoration-primary underline-offset-4`, {
           "underline": isEditing,
           "text-transparent": !isEditing
         }),
         defaultStyle: false
       }
     ),
-    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: (0, import_clsx56.default)(" truncate"), children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react24.Pencil, { className: (0, import_clsx56.default)(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: (0, import_clsx55.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react24.Pencil, { className: (0, import_clsx55.default)(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -15940,7 +14136,7 @@ var ToggleableInputUncontrolled = ({
   ...restProps
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onChangeText);
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     ToggleableInput,
     {
       value,
@@ -15954,7 +14150,7 @@ var ToggleableInputUncontrolled = ({
 var import_react47 = require("react");
 var import_react48 = require("react");
 var import_react49 = require("react");
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var FocusTrap = (0, import_react49.forwardRef)(function FocusTrap2({
   active = true,
   initialFocus,
@@ -15964,7 +14160,7 @@ var FocusTrap = (0, import_react49.forwardRef)(function FocusTrap2({
   const innerRef = (0, import_react47.useRef)(null);
   (0, import_react48.useImperativeHandle)(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus, focusFirst });
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { ref: innerRef, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ref: innerRef, ...props });
 });
 
 // src/components/utils/Transition.tsx
@@ -16353,6 +14549,19 @@ var LoopingArrayCalculator = class _LoopingArrayCalculator {
 
 // src/utils/noop.ts
 var noop = () => void 0;
+
+// src/utils/promise.ts
+async function sleep(ms) {
+  return new Promise((resolve2) => setTimeout(resolve2, ms));
+}
+async function delayed(value, ms) {
+  await sleep(ms);
+  return value;
+}
+var PromiseUtils = {
+  sleep,
+  delayed
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ASTNodeInterpreter,
@@ -16437,11 +14646,11 @@ var noop = () => void 0;
   OutlineButton,
   Pagination,
   ProgressIndicator,
+  PromiseUtils,
   PropertyBase,
   RadialRings,
   Ring,
   RingWave,
-  ScrollArea,
   ScrollPicker,
   SearchBar,
   Select,
@@ -16542,28 +14751,4 @@ var noop = () => void 0;
   weekDayList,
   writeToClipboard
 });
-/*! Bundled license information:
-
-use-sync-external-store/cjs/use-sync-external-store-shim.production.js:
-  (**
-   * @license React
-   * use-sync-external-store-shim.production.js
-   *
-   * Copyright (c) Meta Platforms, Inc. and affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   *)
-
-use-sync-external-store/cjs/use-sync-external-store-shim.development.js:
-  (**
-   * @license React
-   * use-sync-external-store-shim.development.js
-   *
-   * Copyright (c) Meta Platforms, Inc. and affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   *)
-*/
 //# sourceMappingURL=index.js.map