@helpwave/hightide 0.6.2 → 0.6.4

package/dist/index.mjs

@@ -7251,7 +7251,7 @@ function useForm() {
   if (!ctx) throw new Error("FormContext is only available inside a <Form>");
   return ctx;
 }
-function useFormField(key) {
+function useFormField(key, { triggerUpdate = true }) {
   const context = useContext(FormContext);
   const subscribe = useCallback2((cb) => {
     if (!context) return () => {
@@ -7266,20 +7266,31 @@ function useFormField(key) {
     subscribe,
     () => context ? context.store.getError(key) : void 0
   );
+  const getDataProps = useCallback2(() => {
+    return {
+      value: context ? context.store.getValue(key) : void 0,
+      onValueChange: (val) => context?.store.setValue(key, val),
+      onEditComplete: (val) => {
+        context?.store.setTouched(key);
+        context?.store.setValue(key, val, triggerUpdate);
+      }
+    };
+  }, [context, key, triggerUpdate]);
   if (!context) return null;
-  const { registerRef, getDataProps } = context;
+  const { registerRef } = context;
   return {
+    store: context.store,
     value,
     error,
-    dataProps: getDataProps(key),
+    dataProps: getDataProps(),
     registerRef: registerRef(key)
   };
 }
 
 // src/components/form/FormField.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-var FormField = ({ children, name: name2, ...props }) => {
-  const formField = useFormField(name2);
+var FormField = ({ children, name: name2, triggerUpdateOnEditComplete, ...props }) => {
+  const formField = useFormField(name2, { triggerUpdate: triggerUpdateOnEditComplete });
   if (!formField) {
     throw new Error("<FormField> can only be used inside a FormContext try wrapping your app in a <FormProvider>");
   }
@@ -7290,7 +7301,10 @@ var FormField = ({ children, name: name2, ...props }) => {
       ...formFieldLayoutBag.ariaAttributes,
       ref: formField.registerRef
     },
-    interactionStates: formFieldLayoutBag.interactionStates
+    interactionStates: formFieldLayoutBag.interactionStates,
+    other: {
+      updateValue: (value) => formField.store.setValue(name2, value, true)
+    }
   }) });
 };
 
@@ -7299,6 +7313,7 @@ var FormStore = class {
   constructor({
     initialValues,
     hasTriedSubmitting,
+    submittingTouchesAll = true,
     validators = {},
     validationBehaviour = "touched"
   }) {
@@ -7306,9 +7321,16 @@ var FormStore = class {
     this.errors = {};
     this.touched = {};
     this.listeners = /* @__PURE__ */ new Map();
+    this.submittingTouchesAll = false;
     this.initialValues = initialValues;
     this.values = { ...initialValues };
     this.hasTriedSubmitting = hasTriedSubmitting;
+    this.submittingTouchesAll = submittingTouchesAll;
+    if (this.submittingTouchesAll && this.hasTriedSubmitting) {
+      Object.keys(this.initialValues).forEach((key) => {
+        this.touched[key] = true;
+      });
+    }
     this.validators = validators;
     this.validationBehaviour = validationBehaviour;
     this.validateAll();
@@ -7320,14 +7342,37 @@ var FormStore = class {
   getAllValues() {
     return { ...this.values };
   }
-  setValue(key, value) {
-    if (this.values[key] === value) return;
-    this.values[key] = value;
-    this.validate(key);
-    this.notify({ type: "onChange", key, value });
+  setValue(key, value, triggerUpdate = false) {
+    if (this.values[key] !== value) {
+      this.values[key] = value;
+      this.validate(key);
+      this.notify({ type: "onChange", key, value, values: this.values });
+    }
+    if (triggerUpdate) {
+      this.notify({
+        type: "onUpdate",
+        key: "ALL",
+        updatedKeys: [key],
+        update: { [key]: value },
+        values: this.values,
+        hasErrors: this.getHasError(),
+        errors: this.getErrors()
+      });
+    }
   }
-  setValues(values) {
+  setValues(values, triggerUpdate = false) {
     Object.keys(values).forEach((key) => this.setValue(key, values[key]));
+    if (triggerUpdate) {
+      this.notify({
+        type: "onUpdate",
+        key: "ALL",
+        updatedKeys: Object.keys(values),
+        update: { ...values },
+        values: this.values,
+        hasErrors: this.getHasError(),
+        errors: this.getErrors()
+      });
+    }
   }
   // Touched
   getTouched(key) {
@@ -7337,6 +7382,7 @@ var FormStore = class {
     if (this.touched[key] === isTouched) return;
     this.touched[key] = isTouched;
     this.validate(key);
+    this.notify({ type: "onTouched", key, value: this.values[key], values: { ...this.values } });
   }
   // Error and Validation
   getHasError() {
@@ -7355,7 +7401,7 @@ var FormStore = class {
     } else {
       this.errors[key] = error;
     }
-    this.notify({ type: "onError", key, value: this.values[key], error });
+    this.notify({ type: "onError", key, value: this.values[key], error, values: { ...this.values } });
   }
   changeValidationBehavoir(validationBehaviour) {
     if (validationBehaviour === this.validationBehaviour) return;
@@ -7404,35 +7450,30 @@ var FormStore = class {
   // Form
   submit() {
     this.hasTriedSubmitting = true;
-    Object.keys(this.initialValues).forEach((k) => {
-      this.touched[k] = true;
-      this.validate(k);
-    });
-    const hasErrors = Object.keys(this.errors).length > 0;
-    if (hasErrors) {
-      this.notify({
-        type: "submitError",
-        key: "ALL",
-        errors: this.errors,
-        values: this.values
-      });
-    } else {
-      this.notify({
-        type: "submit",
-        key: "ALL",
-        values: this.values
+    if (this.submittingTouchesAll) {
+      Object.keys(this.initialValues).forEach((k) => {
+        this.touched[k] = true;
+        this.validate(k);
       });
     }
+    const hasErrors = Object.keys(this.errors).length > 0;
+    this.notify({
+      type: "onSubmit",
+      key: "ALL",
+      hasErrors,
+      errors: { ...this.errors },
+      values: { ...this.values }
+    });
   }
   reset() {
     this.values = { ...this.initialValues };
     this.hasTriedSubmitting = false;
     this.touched = {};
     Object.keys(this.initialValues).forEach((key) => {
-      this.notify({ type: "onChange", key, value: this.values[key] });
+      this.notify({ type: "onChange", key, value: this.values[key], values: { ...this.values } });
     });
     this.validateAll();
-    this.notify({ type: "reset", key: "ALL", values: this.values, errors: this.errors });
+    this.notify({ type: "reset", key: "ALL", values: { ...this.values }, errors: { ...this.errors } });
   }
 };
 
@@ -7442,6 +7483,8 @@ function useCreateForm({
   onFormSubmit,
   onFormError,
   onValueChange,
+  onUpdate,
+  onValidUpdate,
   initialValues,
   hasTriedSubmitting,
   validators,
@@ -7471,22 +7514,24 @@ function useCreateForm({
   }, []);
   useEffect3(() => {
     const handleUpdate = (event) => {
-      if (event.type === "submit") {
-        onFormSubmit(event.values);
-      } else if (event.type === "submitError") {
-        onFormError?.(event.values, event.errors);
-        if (scrollToElements) {
-          const errorInputs = Object.keys(event.errors).filter((key) => event.errors[key]).map((key) => fieldRefs.current[key]).filter((el) => el !== null && el !== void 0);
-          if (errorInputs.length > 0) {
-            errorInputs.sort((a, b) => {
-              const position = a.compareDocumentPosition(b);
-              if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
-              if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
-              return 0;
-            });
-            errorInputs[0].scrollIntoView(scrollOptions);
-            errorInputs[0].focus();
+      if (event.type === "onSubmit") {
+        if (event.hasErrors) {
+          onFormError?.(event.values, event.errors);
+          if (scrollToElements) {
+            const errorInputs = Object.keys(event.errors).filter((key) => event.errors[key]).map((key) => fieldRefs.current[key]).filter((el) => el !== null && el !== void 0);
+            if (errorInputs.length > 0) {
+              errorInputs.sort((a, b) => {
+                const position = a.compareDocumentPosition(b);
+                if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+                if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+                return 0;
+              });
+              errorInputs[0].scrollIntoView(scrollOptions);
+              errorInputs[0].focus();
+            }
           }
+        } else {
+          onFormSubmit(event.values);
         }
       } else if (event.type === "reset") {
         if (scrollToElements) {
@@ -7506,23 +7551,18 @@ function useCreateForm({
         }
       } else if (event.type === "onChange") {
         onValueChange?.(storeRef.current.getAllValues());
+      } else if (event.type === "onUpdate") {
+        onUpdate?.(event.updatedKeys, event.update);
+        if (!event.hasErrors) {
+          onValidUpdate?.(event.updatedKeys, event.update);
+        }
       }
     };
     const unsubscribe = storeRef.current.subscribe("ALL", handleUpdate);
     return () => {
       unsubscribe();
     };
-  }, [onFormError, onFormSubmit, onValueChange, scrollOptions, scrollToElements]);
-  const getDataProps = useCallback3((key) => {
-    return {
-      value: storeRef.current.getValue(key),
-      onValueChange: (val) => storeRef.current.setValue(key, val),
-      onEditComplete: (val) => {
-        storeRef.current.setValue(key, val);
-        storeRef.current.setTouched(key);
-      }
-    };
-  }, []);
+  }, [onFormError, onFormSubmit, onUpdate, onValidUpdate, onValueChange, scrollOptions, scrollToElements]);
   const callbacks = useMemo3(() => ({
     reset: () => storeRef.current.reset(),
     submit: () => storeRef.current.submit(),
@@ -7543,7 +7583,6 @@ function useCreateForm({
   return {
     store: storeRef.current,
     ...callbacks,
-    getDataProps,
     registerRef
   };
 }
@@ -8161,8 +8200,7 @@ import { createContext as createContext2, useContext as useContext2, useState as
 import { jsx as jsx15 } from "react/jsx-runtime";
 var defaultConfig = {
   tooltip: {
-    appearDelay: 200,
-    disappearDelay: 400
+    appearDelay: 400
   },
   theme: {
     initialTheme: "light"
@@ -9311,7 +9349,6 @@ var Expandable = forwardRef4(function Expandable2({
   children,
   id,
   label,
-  icon,
   isExpanded,
   onChange,
   clickOnlyOnHeader = true,
@@ -9321,8 +9358,6 @@ var Expandable = forwardRef4(function Expandable2({
   contentClassName,
   contentExpandedClassName
 }, ref) {
-  const defaultIcon = useCallback8((expanded) => /* @__PURE__ */ jsx20(ExpansionIcon, { isExpanded: expanded }), []);
-  const iconBuilder = icon ?? defaultIcon;
   return /* @__PURE__ */ jsxs9(
     ExpandableRoot,
     {
@@ -9334,10 +9369,7 @@ var Expandable = forwardRef4(function Expandable2({
       allowContainerToggle: !clickOnlyOnHeader,
       className,
       children: [
-        /* @__PURE__ */ jsxs9(ExpandableHeader, { className: headerClassName, children: [
-          label,
-          /* @__PURE__ */ jsx20(ExpandableContext.Consumer, { children: (ctx) => iconBuilder(ctx?.isExpanded ?? false) })
-        ] }),
+        /* @__PURE__ */ jsx20(ExpandableHeader, { className: headerClassName, children: label }),
         /* @__PURE__ */ jsx20(ExpandableContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsx20(
           ExpandableContent,
           {
@@ -9525,9 +9557,9 @@ var FloatingContainer = forwardRef5(function FloatingContainer2({
   screenPadding = 16,
   gap = 4,
   ...props
-}, forwardRef13) {
+}, forwardRef16) {
   const innerRef = useRef6(null);
-  useImperativeHandle(forwardRef13, () => innerRef.current);
+  useImperativeHandle(forwardRef16, () => innerRef.current);
   const position = useFloatingElement({
     active: !props.hidden,
     containerRef: innerRef,
@@ -10865,23 +10897,14 @@ var InputDialog = ({
   );
 };
 
-// src/components/user-interaction/Select.tsx
+// src/components/user-interaction/select/Select.tsx
 import {
-  createContext as createContext8,
-  forwardRef as forwardRef8,
-  useCallback as useCallback14,
-  useContext as useContext8,
-  useEffect as useEffect17,
-  useId as useId9,
-  useImperativeHandle as useImperativeHandle3,
-  useMemo as useMemo12,
-  useRef as useRef12,
-  useState as useState19
+  forwardRef as forwardRef9
 } from "react";
-import clsx13 from "clsx";
-import { CheckIcon, Plus, XIcon } from "lucide-react";
-import { createPortal as createPortal5 } from "react-dom";
-import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
+
+// src/components/user-interaction/select/SelectContext.tsx
+import { createContext as createContext8, useCallback as useCallback14, useContext as useContext8, useEffect as useEffect17, useId as useId9, useMemo as useMemo12, useRef as useRef12, useState as useState19 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var defaultToggleOpenOptions = {
   highlightStartPositionBehavior: "first"
 };
@@ -10889,28 +10912,34 @@ var SelectContext = createContext8(null);
 function useSelectContext() {
   const ctx = useContext8(SelectContext);
   if (!ctx) {
-    throw new Error("SelectContext must be used within a ListBoxPrimitive");
+    throw new Error("useSelectContext must be used within a SelectRoot or MultiSelectRoot");
   }
   return ctx;
 }
-var SelectRoot = ({
+var PrimitveSelectRoot = ({
   children,
   id,
   value,
   onValueChange,
   values,
   onValuesChange,
-  isOpen = false,
+  onClose,
+  initialIsOpen = false,
   disabled = false,
+  readOnly = false,
+  required = false,
   invalid = false,
   isMultiSelect = false,
   iconAppearance = "left"
 }) => {
   const triggerRef = useRef12(null);
   const generatedId = useId9();
-  const usedId = id ?? generatedId;
+  const [ids, setIds] = useState19({
+    trigger: id ?? (isMultiSelect ? "multi-select-" + generatedId : "select-" + generatedId),
+    content: isMultiSelect ? "multi-select-content-" + generatedId : "select-content-" + generatedId
+  });
   const [internalState, setInternalState] = useState19({
-    isOpen,
+    isOpen: initialIsOpen,
     options: []
   });
   const selectedValues = useMemo12(
@@ -10923,9 +10952,10 @@ var SelectRoot = ({
   );
   const state = {
     ...internalState,
-    id: usedId,
     disabled,
     invalid,
+    readOnly,
+    required,
     value: selectedValues,
     selectedOptions
   };
@@ -11003,7 +11033,7 @@ var SelectRoot = ({
   const unregisterTrigger = useCallback14(() => {
     triggerRef.current = null;
   }, []);
-  const toggleOpen = (isOpen2, toggleOpenOptions) => {
+  const toggleOpen = (isOpen, toggleOpenOptions) => {
     const { highlightStartPositionBehavior } = { ...defaultToggleOpenOptions, ...toggleOpenOptions };
     let firstSelectedValue;
     let firstEnabledValue;
@@ -11019,11 +11049,15 @@ var SelectRoot = ({
         }
       }
     }
+    const newIsOpen = isOpen ?? !internalState.isOpen;
     setInternalState((prevState) => ({
       ...prevState,
-      isOpen: isOpen2 ?? !prevState.isOpen,
+      isOpen: newIsOpen,
       highlightedValue: firstSelectedValue ?? firstEnabledValue
     }));
+    if (!newIsOpen) {
+      onClose?.();
+    }
   };
   const moveHighlightedIndex = (delta) => {
     let highlightedIndex = state.options.findIndex((value2) => value2.value === internalState.highlightedValue);
@@ -11056,6 +11090,8 @@ var SelectRoot = ({
     }
   }, [internalState.highlightedValue]);
   const contextValue = {
+    ids,
+    setIds,
     state,
     config,
     item: {
@@ -11074,14 +11110,52 @@ var SelectRoot = ({
   };
   return /* @__PURE__ */ jsx34(SelectContext.Provider, { value: contextValue, children });
 };
+var SelectRoot = ({ value, onValueChange, onEditComplete, ...props }) => {
+  return /* @__PURE__ */ jsx34(
+    PrimitveSelectRoot,
+    {
+      ...props,
+      isMultiSelect: false,
+      value,
+      onValueChange: (value2) => {
+        onValueChange?.(value2);
+        onEditComplete?.(value2);
+      }
+    }
+  );
+};
+var MultiSelectRoot = ({ value, onValueChange, onEditComplete, ...props }) => {
+  return /* @__PURE__ */ jsx34(
+    PrimitveSelectRoot,
+    {
+      ...props,
+      isMultiSelect: true,
+      values: value,
+      onValuesChange: (values) => {
+        onValueChange?.(values);
+      },
+      onClose: () => {
+        onEditComplete?.(value);
+        props.onClose?.();
+      }
+    }
+  );
+};
+
+// src/components/user-interaction/select/SelectComponents.tsx
+import { forwardRef as forwardRef8, useEffect as useEffect18, useImperativeHandle as useImperativeHandle3, useRef as useRef13 } from "react";
+import clsx13 from "clsx";
+import { CheckIcon } from "lucide-react";
+import { createPortal as createPortal5 } from "react-dom";
+import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
 var SelectOption = forwardRef8(
   function SelectOption2({ children, value, disabled = false, iconAppearance, className, ...restProps }, ref) {
     const { state, config, item, trigger } = useSelectContext();
     const { register, unregister, toggleSelection, highlightItem } = item;
-    const itemRef = useRef12(null);
+    const itemRef = useRef13(null);
     iconAppearance ??= config.iconAppearance;
     const label = children ?? value;
-    useEffect17(() => {
+    useEffect18(() => {
       register({
         value,
         label,
@@ -11131,7 +11205,7 @@ var SelectOption = forwardRef8(
           }
         },
         children: [
-          iconAppearance === "left" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ jsx34(
+          iconAppearance === "left" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ jsx35(
             CheckIcon,
             {
               className: clsx13("w-4 h-4", { "opacity-0": !isSelected || disabled }),
@@ -11139,7 +11213,7 @@ var SelectOption = forwardRef8(
             }
           ),
           label,
-          iconAppearance === "right" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ jsx34(
+          iconAppearance === "right" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ jsx35(
             CheckIcon,
             {
               className: clsx13("w-4 h-4", { "opacity-0": !isSelected || disabled }),
@@ -11151,13 +11225,26 @@ var SelectOption = forwardRef8(
     );
   }
 );
-var SelectButton = forwardRef8(function SelectButton2({ placeholder, selectedDisplay, ...props }, ref) {
+var SelectButton = forwardRef8(function SelectButton2({
+  id,
+  placeholder,
+  selectedDisplay,
+  ...props
+}, ref) {
   const translation = useHightideTranslation();
-  const { state, trigger } = useSelectContext();
+  const { state, trigger, setIds, ids } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  const innerRef = useRef12(null);
+  useEffect18(() => {
+    if (id) {
+      setIds((prev) => ({
+        ...prev,
+        trigger: id
+      }));
+    }
+  }, [id, setIds]);
+  const innerRef = useRef13(null);
   useImperativeHandle3(ref, () => innerRef.current);
-  useEffect17(() => {
+  useEffect18(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -11169,7 +11256,7 @@ var SelectButton = forwardRef8(function SelectButton2({ placeholder, selectedDis
     {
       ...props,
       ref: innerRef,
-      id: state.id,
+      id: ids.trigger,
       disabled,
       type: "button",
       onClick: (event) => {
@@ -11199,206 +11286,140 @@ var SelectButton = forwardRef8(function SelectButton2({ placeholder, selectedDis
       "aria-disabled": disabled,
       "aria-haspopup": "listbox",
       "aria-expanded": state.isOpen,
-      "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
+      "aria-controls": state.isOpen ? ids.content : void 0,
       children: [
-        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ jsx34("div", { className: clsx13("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ jsxs17("span", { className: "flex-row-0", children: [
+        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ jsx35("div", { className: clsx13("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ jsxs17("span", { className: "flex-row-0", children: [
           label,
-          index < state.value.length - 1 && /* @__PURE__ */ jsx34("span", { children: "," })
+          index < state.value.length - 1 && /* @__PURE__ */ jsx35("span", { children: "," })
         ] }, value)) }) : placeholder ?? translation("clickToSelect"),
-        /* @__PURE__ */ jsx34(ExpansionIcon, { isExpanded: state.isOpen })
+        /* @__PURE__ */ jsx35(ExpansionIcon, { isExpanded: state.isOpen })
       ]
     }
   );
 });
-var SelectChipDisplay = forwardRef8(function SelectChipDisplay2({ ...props }, ref) {
-  const { state, trigger, item } = useSelectContext();
-  const { register, unregister, toggleOpen } = trigger;
-  const innerRef = useRef12(null);
+var SelectContent = forwardRef8(function SelectContent2({
+  id,
+  alignment,
+  orientation = "vertical",
+  containerClassName,
+  ...props
+}, ref) {
+  const innerRef = useRef13(null);
   useImperativeHandle3(ref, () => innerRef.current);
-  useEffect17(() => {
-    register(innerRef);
-    return () => unregister();
-  }, [register, unregister]);
-  const disabled = !!props?.disabled || !!state.disabled;
-  const invalid = state.invalid;
-  return /* @__PURE__ */ jsxs17(
-    "div",
-    {
-      ...props,
-      ref: innerRef,
-      onClick: (event) => {
-        toggleOpen();
-        props.onClick?.(event);
-      },
-      "data-name": props["data-name"] ?? "select-button-chips",
-      "data-value": state.value.length > 0 ? "" : void 0,
-      "data-disabled": disabled ? "" : void 0,
-      "data-invalid": invalid ? "" : void 0,
-      "aria-invalid": invalid,
-      "aria-disabled": disabled,
-      children: [
-        state.selectedOptions.map(({ value, label }) => /* @__PURE__ */ jsxs17(Chip, { className: "gap-x-2", children: [
-          label,
-          /* @__PURE__ */ jsx34(
-            Button,
+  const { trigger, state, config, item, ids, setIds } = useSelectContext();
+  useEffect18(() => {
+    if (id) {
+      setIds((prev) => ({
+        ...prev,
+        content: id
+      }));
+    }
+  }, [id, setIds]);
+  const position = useFloatingElement({
+    active: state.isOpen,
+    anchorRef: trigger.ref,
+    containerRef: innerRef,
+    ...alignment
+  });
+  useFocusTrap({
+    container: innerRef,
+    active: state.isOpen && !!position
+  });
+  const { zIndex } = useOverlayRegistry({ isActive: state.isOpen });
+  return createPortal5(
+    /* @__PURE__ */ jsxs17(
+      "div",
+      {
+        id: ids.content,
+        className: clsx13("fixed inset-0 w-screen h-screen", containerClassName),
+        style: { zIndex },
+        hidden: !state.isOpen,
+        children: [
+          /* @__PURE__ */ jsx35(
+            "div",
             {
-              onClick: () => {
-                item.toggleSelection(value, false);
+              onClick: () => trigger.toggleOpen(false),
+              className: clsx13("fixed inset-0 w-screen h-screen")
+            }
+          ),
+          /* @__PURE__ */ jsx35(
+            "ul",
+            {
+              ...props,
+              ref: innerRef,
+              onKeyDown: (event) => {
+                switch (event.key) {
+                  case "Escape":
+                    trigger.toggleOpen(false);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+                  case match(orientation, {
+                    vertical: "ArrowDown",
+                    horizontal: "ArrowUp"
+                  }):
+                    item.moveHighlightedIndex(1);
+                    event.preventDefault();
+                    break;
+                  case match(orientation, {
+                    vertical: "ArrowUp",
+                    horizontal: "ArrowDown"
+                  }):
+                    item.moveHighlightedIndex(-1);
+                    event.preventDefault();
+                    break;
+                  case "Home":
+                    event.preventDefault();
+                    break;
+                  case "End":
+                    event.preventDefault();
+                    break;
+                  case "Enter":
+                  // Fall through
+                  case " ":
+                    if (state.highlightedValue) {
+                      item.toggleSelection(state.highlightedValue);
+                      if (!config.isMultiSelect) {
+                        trigger.toggleOpen(false);
+                      }
+                      event.preventDefault();
+                    }
+                    break;
+                }
               },
-              size: "xs",
-              color: "negative",
-              coloringStyle: "text",
-              layout: "icon",
-              className: "flex-row-0 items-center",
-              children: /* @__PURE__ */ jsx34(XIcon, { className: "size-5" })
+              className: clsx13("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-outline-within overflow-auto", props.className),
+              style: {
+                opacity: position ? void 0 : 0,
+                position: "fixed",
+                ...position
+              },
+              role: "listbox",
+              "aria-multiselectable": config.isMultiSelect,
+              "aria-orientation": orientation,
+              tabIndex: position ? 0 : void 0,
+              children: props.children
             }
           )
-        ] }, value)),
-        /* @__PURE__ */ jsx34(
-          Button,
-          {
-            id: state.id,
-            onClick: (event) => {
-              event.stopPropagation();
-              toggleOpen();
-            },
-            onKeyDown: (event) => {
-              switch (event.key) {
-                case "ArrowDown":
-                  toggleOpen(true, { highlightStartPositionBehavior: "first" });
-                  break;
-                case "ArrowUp":
-                  toggleOpen(true, { highlightStartPositionBehavior: "last" });
-              }
-            },
-            layout: "icon",
-            size: "sm",
-            color: "neutral",
-            "aria-invalid": invalid,
-            "aria-disabled": disabled,
-            "aria-haspopup": "listbox",
-            "aria-expanded": state.isOpen,
-            "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
-            className: "size-9",
-            children: /* @__PURE__ */ jsx34(Plus, {})
-          }
-        )
-      ]
-    }
+        ]
+      }
+    ),
+    document.body
   );
 });
-var SelectContent = forwardRef8(
-  function SelectContent2({
-    alignment,
-    orientation = "vertical",
-    containerClassName,
-    ...props
-  }, ref) {
-    const innerRef = useRef12(null);
-    useImperativeHandle3(ref, () => innerRef.current);
-    const { trigger, state, config, item } = useSelectContext();
-    const position = useFloatingElement({
-      active: state.isOpen,
-      anchorRef: trigger.ref,
-      containerRef: innerRef,
-      ...alignment
-    });
-    useFocusTrap({
-      container: innerRef,
-      active: state.isOpen && !!position
-    });
-    const { zIndex } = useOverlayRegistry({ isActive: state.isOpen });
-    return createPortal5(
-      /* @__PURE__ */ jsxs17(
-        "div",
-        {
-          id: `select-container-${state.id}`,
-          className: clsx13("fixed inset-0 w-screen h-screen", containerClassName),
-          style: { zIndex },
-          hidden: !state.isOpen,
-          children: [
-            /* @__PURE__ */ jsx34(
-              "div",
-              {
-                id: `select-background-${state.id}`,
-                onClick: () => trigger.toggleOpen(false),
-                className: clsx13("fixed inset-0 w-screen h-screen")
-              }
-            ),
-            /* @__PURE__ */ jsx34(
-              "ul",
-              {
-                ...props,
-                id: `${state.id}-listbox`,
-                ref: innerRef,
-                onKeyDown: (event) => {
-                  switch (event.key) {
-                    case "Escape":
-                      trigger.toggleOpen(false);
-                      event.preventDefault();
-                      event.stopPropagation();
-                      break;
-                    case match(orientation, {
-                      vertical: "ArrowDown",
-                      horizontal: "ArrowUp"
-                    }):
-                      item.moveHighlightedIndex(1);
-                      event.preventDefault();
-                      break;
-                    case match(orientation, {
-                      vertical: "ArrowUp",
-                      horizontal: "ArrowDown"
-                    }):
-                      item.moveHighlightedIndex(-1);
-                      event.preventDefault();
-                      break;
-                    case "Home":
-                      event.preventDefault();
-                      break;
-                    case "End":
-                      event.preventDefault();
-                      break;
-                    case "Enter":
-                    // Fall through
-                    case " ":
-                      if (state.highlightedValue) {
-                        item.toggleSelection(state.highlightedValue);
-                        if (!config.isMultiSelect) {
-                          trigger.toggleOpen(false);
-                        }
-                        event.preventDefault();
-                      }
-                      break;
-                  }
-                },
-                className: clsx13("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-outline-within overflow-auto", props.className),
-                style: {
-                  opacity: position ? void 0 : 0,
-                  position: "fixed",
-                  ...position
-                },
-                role: "listbox",
-                "aria-multiselectable": config.isMultiSelect,
-                "aria-orientation": orientation,
-                tabIndex: position ? 0 : void 0,
-                children: props.children
-              }
-            )
-          ]
-        }
-      ),
-      document.body
-    );
-  }
-);
-var Select = forwardRef8(function Select2({
+var MultiSelectOption = SelectOption;
+var MultiSelectContent = SelectContent;
+var MultiSelectButton = SelectButton;
+
+// src/components/user-interaction/select/Select.tsx
+import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
+var Select = forwardRef9(function Select2({
   children,
   contentPanelProps,
   buttonProps,
   ...props
 }, ref) {
-  return /* @__PURE__ */ jsxs17(SelectRoot, { ...props, isMultiSelect: false, children: [
-    /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs18(SelectRoot, { ...props, children: [
+    /* @__PURE__ */ jsx36(
       SelectButton,
       {
         ref,
@@ -11410,16 +11431,16 @@ var Select = forwardRef8(function Select2({
         }
       }
     ),
-    /* @__PURE__ */ jsx34(SelectContent, { ...contentPanelProps, children })
+    /* @__PURE__ */ jsx36(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var SelectUncontrolled = forwardRef8(function SelectUncontrolled2({
+var SelectUncontrolled = forwardRef9(function SelectUncontrolled2({
   value: initialValue,
   onValueChange,
   ...props
 }, ref) {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     Select,
     {
       ...props,
@@ -11429,84 +11450,26 @@ var SelectUncontrolled = forwardRef8(function SelectUncontrolled2({
     }
   );
 });
-var MultiSelect = forwardRef8(function MultiSelect2({
-  children,
-  value,
-  onValueChange,
-  contentPanelProps,
-  buttonProps,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsxs17(SelectRoot, { ...props, values: value, onValuesChange: onValueChange, isMultiSelect: true, children: [
-    /* @__PURE__ */ jsx34(SelectButton, { ref, ...buttonProps }),
-    /* @__PURE__ */ jsx34(SelectContent, { ...contentPanelProps, children })
-  ] });
-});
-var MultiSelectUncontrolled = forwardRef8(function MultiSelectUncontrolled2({
-  value: initialValue,
-  onValueChange,
+
+// src/components/layout/dialog/LanguageDialog.tsx
+import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+var LanguageDialog = ({
+  onClose,
+  titleOverwrite,
+  descriptionOverwrite,
   ...props
-}, ref) {
-  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx34(
-    MultiSelect,
+}) => {
+  const { locale, setLocale } = useLocale();
+  const translation = useHightideTranslation();
+  return /* @__PURE__ */ jsx37(
+    Dialog,
     {
+      titleElement: titleOverwrite ?? translation("language"),
+      description: descriptionOverwrite ?? translation("chooseLanguage"),
+      onClose,
       ...props,
-      ref,
-      value,
-      onValueChange: setValue
-    }
-  );
-});
-var MultiSelectChipDisplay = forwardRef8(function MultiSelectChipDisplay2({
-  children,
-  value,
-  onValueChange,
-  contentPanelProps,
-  chipDisplayProps,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsxs17(SelectRoot, { ...props, values: value, onValuesChange: onValueChange, isMultiSelect: true, children: [
-    /* @__PURE__ */ jsx34(SelectChipDisplay, { ref, ...chipDisplayProps }),
-    /* @__PURE__ */ jsx34(SelectContent, { ...contentPanelProps, children })
-  ] });
-});
-var MultiSelectChipDisplayUncontrolled = forwardRef8(function MultiSelectChipDisplayUncontrolled2({
-  value: initialValue,
-  onValueChange,
-  ...props
-}, ref) {
-  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx34(
-    MultiSelectChipDisplay,
-    {
-      ...props,
-      ref,
-      value,
-      onValueChange: setValue
-    }
-  );
-});
-
-// src/components/layout/dialog/LanguageDialog.tsx
-import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
-var LanguageDialog = ({
-  onClose,
-  titleOverwrite,
-  descriptionOverwrite,
-  ...props
-}) => {
-  const { locale, setLocale } = useLocale();
-  const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsx35(
-    Dialog,
-    {
-      titleElement: titleOverwrite ?? translation("language"),
-      description: descriptionOverwrite ?? translation("chooseLanguage"),
-      onClose,
-      ...props,
-      children: /* @__PURE__ */ jsxs18("div", { className: "w-64", children: [
-        /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsxs19("div", { className: "w-64", children: [
+        /* @__PURE__ */ jsx37(
           Select,
           {
             value: locale,
@@ -11514,10 +11477,10 @@ var LanguageDialog = ({
             buttonProps: {
               selectedDisplay: (locale2) => LocalizationUtil.languagesLocalNames[locale2]
             },
-            children: LocalizationUtil.locals.map((local) => /* @__PURE__ */ jsx35(SelectOption, { value: local, children: LocalizationUtil.languagesLocalNames[local] }, local))
+            children: LocalizationUtil.locals.map((local) => /* @__PURE__ */ jsx37(SelectOption, { value: local, children: LocalizationUtil.languagesLocalNames[local] }, local))
           }
         ),
-        /* @__PURE__ */ jsx35("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx35(Button, { color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ jsx37("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx37(Button, { color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
@@ -11528,8 +11491,8 @@ import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
 import clsx14 from "clsx";
 
 // src/contexts/ThemeContext.tsx
-import { createContext as createContext9, useCallback as useCallback15, useContext as useContext9, useEffect as useEffect18, useMemo as useMemo13, useState as useState20 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { createContext as createContext9, useCallback as useCallback15, useContext as useContext9, useEffect as useEffect19, useMemo as useMemo13, useState as useState20 } from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var themes = ["light", "dark", "system"];
 var ThemeUtil = {
   themes
@@ -11555,7 +11518,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     }
     return initialTheme ?? config.theme.initialTheme;
   }, [config.theme.initialTheme, initialTheme, storedTheme, theme, themePreference]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!theme) return;
     if (theme === "system") {
       deleteStoredTheme();
@@ -11563,7 +11526,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
       setStoredTheme(theme);
     }
   }, [theme]);
-  useEffect18(() => {
+  useEffect19(() => {
     document.documentElement.setAttribute("data-theme", resolvedTheme);
   }, [resolvedTheme]);
   const getPreference = useCallback15(() => {
@@ -11571,10 +11534,10 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
     setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
   }, []);
-  useEffect18(() => {
+  useEffect19(() => {
     getPreference();
   }, [getPreference]);
-  useEffect18(() => {
+  useEffect19(() => {
     const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
     const noPrefQuery = window.matchMedia("(prefers-color-scheme: no-preference)");
@@ -11587,7 +11550,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
       noPrefQuery.removeEventListener("change", getPreference);
     };
   }, [getPreference]);
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx38(
     ThemeContext.Provider,
     {
       value: {
@@ -11613,14 +11576,14 @@ var useTheme = () => {
 };
 
 // src/components/layout/dialog/ThemeDialog.tsx
-import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
 var ThemeIcon = ({ theme, className }) => {
   if (theme === "dark") {
-    return /* @__PURE__ */ jsx37(MoonIcon, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx39(MoonIcon, { className: clsx14("w-4 h-4", className) });
   } else if (theme === "light") {
-    return /* @__PURE__ */ jsx37(SunIcon, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx39(SunIcon, { className: clsx14("w-4 h-4", className) });
   } else {
-    return /* @__PURE__ */ jsx37(MonitorCog, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx39(MonitorCog, { className: clsx14("w-4 h-4", className) });
   }
 };
 var ThemeDialog = ({
@@ -11631,34 +11594,34 @@ var ThemeDialog = ({
 }) => {
   const { theme, setTheme } = useTheme();
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx39(
     Dialog,
     {
       titleElement: titleOverwrite ?? translation("pThemes", { count: 1 }),
       description: descriptionOverwrite ?? translation("chooseTheme"),
       onClose,
       ...props,
-      children: /* @__PURE__ */ jsxs19("div", { className: "w-64", children: [
-        /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsxs20("div", { className: "w-64", children: [
+        /* @__PURE__ */ jsx39(
           Select,
           {
             value: theme,
             onValueChange: (theme2) => setTheme(theme2),
             iconAppearance: "right",
             buttonProps: {
-              selectedDisplay: (value) => /* @__PURE__ */ jsxs19("div", { className: "flex-row-2 items-center", children: [
-                /* @__PURE__ */ jsx37(ThemeIcon, { theme }),
+              selectedDisplay: (value) => /* @__PURE__ */ jsxs20("div", { className: "flex-row-2 items-center", children: [
+                /* @__PURE__ */ jsx39(ThemeIcon, { theme }),
                 translation("sThemeMode", { theme: value })
               ] }),
               className: "min-w-32"
             },
-            children: ThemeUtil.themes.map((theme2) => /* @__PURE__ */ jsx37(SelectOption, { value: theme2, className: "gap-x-6 justify-between", children: /* @__PURE__ */ jsxs19("div", { className: "flex-row-2 items-center", children: [
-              /* @__PURE__ */ jsx37(ThemeIcon, { theme: theme2 }),
+            children: ThemeUtil.themes.map((theme2) => /* @__PURE__ */ jsx39(SelectOption, { value: theme2, className: "gap-x-6 justify-between", children: /* @__PURE__ */ jsxs20("div", { className: "flex-row-2 items-center", children: [
+              /* @__PURE__ */ jsx39(ThemeIcon, { theme: theme2 }),
               translation("sThemeMode", { theme: theme2 })
             ] }) }, theme2))
           }
         ),
-        /* @__PURE__ */ jsx37("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx37(Button, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ jsx39("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx39(Button, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
@@ -11667,14 +11630,14 @@ var ThemeDialog = ({
 // src/components/layout/loading/ErrorComponent.tsx
 import { AlertOctagon } from "lucide-react";
 import clsx15 from "clsx";
-import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
 var ErrorComponent = ({
   errorText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs20("div", { className: clsx15("flex-col-4 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ jsx38(AlertOctagon, { size: 64, className: "text-warning" }),
+  return /* @__PURE__ */ jsxs21("div", { className: clsx15("flex-col-4 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ jsx40(AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
 };
@@ -11684,14 +11647,14 @@ import { useState as useState21 } from "react";
 
 // src/components/layout/loading/LoadingContainer.tsx
 import { clsx as clsx16 } from "clsx";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var LoadingContainer = ({ className }) => {
-  return /* @__PURE__ */ jsx39("div", { className: clsx16("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
+  return /* @__PURE__ */ jsx41("div", { className: clsx16("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
 };
 
 // src/components/layout/loading/LoadingAndErrorComponent.tsx
 import { clsx as clsx17 } from "clsx";
-import { Fragment as Fragment5, jsx as jsx40 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx42 } from "react/jsx-runtime";
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
@@ -11711,33 +11674,33 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return /* @__PURE__ */ jsx40(Fragment5, { children: loadingComponent ?? /* @__PURE__ */ jsx40(LoadingContainer, { className: clsx17(className) }) });
+    return /* @__PURE__ */ jsx42(Fragment5, { children: loadingComponent ?? /* @__PURE__ */ jsx42(LoadingContainer, { className: clsx17(className) }) });
   }
   if (hasError) {
-    return /* @__PURE__ */ jsx40(Fragment5, { children: errorComponent ?? /* @__PURE__ */ jsx40(LoadingContainer, { className: clsx17("bg-negative", className) }) });
+    return /* @__PURE__ */ jsx42(Fragment5, { children: errorComponent ?? /* @__PURE__ */ jsx42(LoadingContainer, { className: clsx17("bg-negative", className) }) });
   }
-  return /* @__PURE__ */ jsx40(Fragment5, { children });
+  return /* @__PURE__ */ jsx42(Fragment5, { children });
 };
 
 // src/components/layout/loading/LoadingAnimation.tsx
 import clsx18 from "clsx";
-import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
 var LoadingAnimation = ({
   loadingText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs21("div", { className: clsx18("flex-col-2 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ jsx41(HelpwaveLogo, { animate: "loading" }),
+  return /* @__PURE__ */ jsxs22("div", { className: clsx18("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ jsx43(HelpwaveLogo, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
 };
 
 // src/components/layout/navigation/BreadCrumbs.tsx
 var import_link = __toESM(require_link2());
-import { jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
 var BreadCrumbLink = ({ ...props }) => {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx44(
     import_link.default,
     {
       ...props,
@@ -11746,29 +11709,29 @@ var BreadCrumbLink = ({ ...props }) => {
   );
 };
 var BreadCrumbDivider = () => {
-  return /* @__PURE__ */ jsx42("span", { "data-name": "breadcrumb-divider", children: "/" });
+  return /* @__PURE__ */ jsx44("span", { "data-name": "breadcrumb-divider", children: "/" });
 };
 var BreadCrumbGroup = ({ children, divider, ...props }) => {
   const items = ArrayUtil.resolveSingleOrArray(children);
-  return /* @__PURE__ */ jsx42("ul", { ...props, "data-name": props["data-name"] ?? "breadcrumb", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx44("ul", { ...props, "data-name": props["data-name"] ?? "breadcrumb", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ jsxs22("li", { "data-name": "breadcrumb-item", children: [
+    return /* @__PURE__ */ jsxs23("li", { "data-name": "breadcrumb-item", children: [
       item,
-      !isLast && divider !== null && (divider ?? /* @__PURE__ */ jsx42(BreadCrumbDivider, {}))
+      !isLast && divider !== null && (divider ?? /* @__PURE__ */ jsx44(BreadCrumbDivider, {}))
     ] }, index);
   }) });
 };
 var BreadCrumbs = ({ crumbs }) => {
-  return /* @__PURE__ */ jsx42(BreadCrumbGroup, { children: crumbs.map(({ href, label }, index) => /* @__PURE__ */ jsx42(BreadCrumbLink, { href, children: label }, index)) });
+  return /* @__PURE__ */ jsx44(BreadCrumbGroup, { children: crumbs.map(({ href, label }, index) => /* @__PURE__ */ jsx44(BreadCrumbLink, { href, children: label }, index)) });
 };
 
 // src/components/layout/navigation/Navigation.tsx
 var import_link2 = __toESM(require_link2());
-import { Menu as MenuIcon, XIcon as XIcon2 } from "lucide-react";
-import { useEffect as useEffect19 } from "react";
-import { useCallback as useCallback16, useId as useId10, useRef as useRef13, useState as useState22 } from "react";
+import { Menu as MenuIcon, XIcon } from "lucide-react";
+import { useEffect as useEffect20 } from "react";
+import { useCallback as useCallback16, useId as useId10, useRef as useRef14, useState as useState22 } from "react";
 import clsx19 from "clsx";
-import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
 }
@@ -11779,8 +11742,8 @@ var NavigationItemWithSubItem = ({
   ...options
 }) => {
   const [isOpen, setOpen] = useState22(false);
-  const containerRef = useRef13(null);
-  const triggerRef = useRef13(null);
+  const containerRef = useRef14(null);
+  const triggerRef = useRef14(null);
   const id = useId10();
   const style = useFloatingElement({
     active: isOpen,
@@ -11796,8 +11759,8 @@ var NavigationItemWithSubItem = ({
     }
   }, []);
   const { zIndex } = useOverlayRegistry();
-  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
-    /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(Fragment6, { children: [
+    /* @__PURE__ */ jsxs24(
       "button",
       {
         id: "navigation-" + id,
@@ -11813,11 +11776,11 @@ var NavigationItemWithSubItem = ({
         "aria-controls": "navigation-items-" + id,
         children: [
           label,
-          /* @__PURE__ */ jsx43(ExpansionIcon, { isExpanded: isOpen })
+          /* @__PURE__ */ jsx45(ExpansionIcon, { isExpanded: isOpen })
         ]
       }
     ),
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx45(
       "ul",
       {
         id: "navigation-items-" + id,
@@ -11836,7 +11799,7 @@ var NavigationItemWithSubItem = ({
           { "opacity-0": !style }
         ),
         style: { ...style, zIndex },
-        children: items.map(({ link, label: label2, external }, index) => /* @__PURE__ */ jsx43("li", { children: /* @__PURE__ */ jsx43(
+        children: items.map(({ link, label: label2, external }, index) => /* @__PURE__ */ jsx45("li", { children: /* @__PURE__ */ jsx45(
           import_link2.default,
           {
             href: link,
@@ -11850,25 +11813,25 @@ var NavigationItemWithSubItem = ({
   ] });
 };
 var NavigationItemList = ({ items, ...restProps }) => {
-  return /* @__PURE__ */ jsx43("ul", { ...restProps, className: clsx19("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx43("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx43(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx43(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
+  return /* @__PURE__ */ jsx45("ul", { ...restProps, className: clsx19("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx45("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx45(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx45(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
   const [isMobileOpen, setIsMobileOpen] = useState22(false);
   const id = useId10();
-  const menuRef = useRef13(null);
-  useEffect19(() => {
+  const menuRef = useRef14(null);
+  useEffect20(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
   const { zIndex } = useOverlayRegistry({ isActive: isMobileOpen });
-  return /* @__PURE__ */ jsxs23("nav", { children: [
-    /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsxs24("nav", { children: [
+    /* @__PURE__ */ jsx45(
       NavigationItemList,
       {
         ...props,
         className: clsx19("hidden", { "desktop:flex": !isMobileOpen }, props.className)
       }
     ),
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx45(
       Button,
       {
         layout: "icon",
@@ -11879,10 +11842,10 @@ var Navigation = ({ ...props }) => {
         "aria-haspopup": "true",
         "aria-expanded": isMobileOpen,
         "aria-controls": "navigation-menu-" + id,
-        children: /* @__PURE__ */ jsx43(MenuIcon, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ jsx45(MenuIcon, { className: "w-6 h-6" })
       }
     ),
-    /* @__PURE__ */ jsxs23(
+    /* @__PURE__ */ jsxs24(
       "div",
       {
         id: "navigation-menu-" + id,
@@ -11904,17 +11867,17 @@ var Navigation = ({ ...props }) => {
         ),
         style: { zIndex },
         children: [
-          /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx45(
             Button,
             {
               layout: "icon",
               coloringStyle: "text",
               color: "neutral",
               onClick: () => setIsMobileOpen(false),
-              children: /* @__PURE__ */ jsx43(XIcon2, {})
+              children: /* @__PURE__ */ jsx45(XIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx43(NavigationItemList, { ...props, className: clsx19("flex-col-8", props.className) })
+          /* @__PURE__ */ jsx45(NavigationItemList, { ...props, className: clsx19("flex-col-8", props.className) })
         ]
       }
     )
@@ -11924,8 +11887,8 @@ var Navigation = ({ ...props }) => {
 // src/components/layout/navigation/Pagination.tsx
 import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
 import clsx20 from "clsx";
-import { useEffect as useEffect20, useState as useState23 } from "react";
-import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useEffect as useEffect21, useState as useState23 } from "react";
+import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
 var Pagination = ({
   pageIndex,
   pageCount,
@@ -11938,7 +11901,7 @@ var Pagination = ({
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  useEffect20(() => {
+  useEffect21(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -11948,8 +11911,8 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ jsxs24("div", { className: clsx20("flex-row-1", className), style, children: [
-    /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs25("div", { className: clsx20("flex-row-1", className), style, children: [
+    /* @__PURE__ */ jsx46(
       Button,
       {
         layout: "icon",
@@ -11957,10 +11920,10 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(0),
         disabled: onFirstPage || noPages,
-        children: /* @__PURE__ */ jsx44(ChevronFirst, {})
+        children: /* @__PURE__ */ jsx46(ChevronFirst, {})
       }
     ),
-    /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx46(
       Button,
       {
         layout: "icon",
@@ -11968,11 +11931,11 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(pageIndex - 1),
         disabled: onFirstPage || noPages,
-        children: /* @__PURE__ */ jsx44(ChevronLeft2, {})
+        children: /* @__PURE__ */ jsx46(ChevronLeft2, {})
       }
     ),
-    /* @__PURE__ */ jsxs24("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
-      /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsxs25("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
+      /* @__PURE__ */ jsx46(
         Input,
         {
           value,
@@ -11996,8 +11959,8 @@ var Pagination = ({
           editCompleteOptions: { delay: 800 }
         }
       ),
-      /* @__PURE__ */ jsx44("span", { className: "select-none w-10", children: translation("of") }),
-      /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsx46("span", { className: "select-none w-10", children: translation("of") }),
+      /* @__PURE__ */ jsx46(
         "span",
         {
           className: "flex-row-2 w-24 items-center justify-center select-none h-10 bg-input-background text-input-text rounded-md font-bold",
@@ -12005,7 +11968,7 @@ var Pagination = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx46(
       Button,
       {
         layout: "icon",
@@ -12013,10 +11976,10 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(pageIndex + 1),
         disabled: onLastPage || noPages,
-        children: /* @__PURE__ */ jsx44(ChevronRight2, {})
+        children: /* @__PURE__ */ jsx46(ChevronRight2, {})
       }
     ),
-    /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx46(
       Button,
       {
         layout: "icon",
@@ -12024,7 +11987,7 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(pageCount - 1),
         disabled: onLastPage || noPages,
-        children: /* @__PURE__ */ jsx44(ChevronLast, {})
+        children: /* @__PURE__ */ jsx46(ChevronLast, {})
       }
     )
   ] });
@@ -12033,7 +11996,7 @@ var Pagination = ({
 // src/components/layout/navigation/StepperBar.tsx
 import { Check, ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "lucide-react";
 import clsx21 from "clsx";
-import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
 var defaultState = {
   currentStep: 0,
   seenSteps: /* @__PURE__ */ new Set([0])
@@ -12055,12 +12018,12 @@ var StepperBar = ({
     seenSteps.add(newStep);
     onChange({ currentStep: newStep, seenSteps });
   };
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       className: clsx21("flex-row-2 justify-between", className),
       children: [
-        /* @__PURE__ */ jsx45("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsx47("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ jsxs26(
           Button,
           {
             disabled: currentStep === 0 || disabledSteps.has(currentStep),
@@ -12069,14 +12032,14 @@ var StepperBar = ({
             },
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ jsx45(ChevronLeft3, { size: 14 }),
+              /* @__PURE__ */ jsx47(ChevronLeft3, { size: 14 }),
               translation("back")
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx45("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
+        /* @__PURE__ */ jsx47("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
           const seen = seenSteps.has(index);
-          return /* @__PURE__ */ jsx45(
+          return /* @__PURE__ */ jsx47(
             "div",
             {
               onClick: () => seen && update(index),
@@ -12096,7 +12059,7 @@ var StepperBar = ({
             index
           );
         }) }),
-        currentStep !== numberOfSteps && /* @__PURE__ */ jsx45("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs25(
+        currentStep !== numberOfSteps && /* @__PURE__ */ jsx47("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs26(
           Button,
           {
             onClick: () => update(currentStep + 1),
@@ -12104,18 +12067,18 @@ var StepperBar = ({
             disabled: disabledSteps.has(currentStep),
             children: [
               translation("next"),
-              /* @__PURE__ */ jsx45(ChevronRight3, { size: 14 })
+              /* @__PURE__ */ jsx47(ChevronRight3, { size: 14 })
             ]
           }
         ) }),
-        currentStep === numberOfSteps && /* @__PURE__ */ jsx45("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs25(
+        currentStep === numberOfSteps && /* @__PURE__ */ jsx47("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs26(
           Button,
           {
             disabled: disabledSteps.has(currentStep),
             onClick: onFinish,
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ jsx45(Check, { size: 14 }),
+              /* @__PURE__ */ jsx47(Check, { size: 14 }),
               finishText ?? translation("confirm")
             ]
           }
@@ -12126,7 +12089,7 @@ var StepperBar = ({
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
   const [usedState, setUsedState] = useOverwritableState(state, onChange);
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx47(
     StepperBar,
     {
       ...props,
@@ -12138,14 +12101,14 @@ var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
 
 // src/components/layout/table/FillerCell.tsx
 import { Minus } from "lucide-react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var FillerCell = ({ ...props }) => {
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       ...props,
       "data-name": PropsUtil.dataAttributes.name("table-filler-cell"),
-      children: /* @__PURE__ */ jsx46(Minus, { className: "max-w-4 max-h-4" })
+      children: /* @__PURE__ */ jsx48(Minus, { className: "max-w-4 max-h-4" })
     }
   );
 };
@@ -12165,7 +12128,7 @@ var TableFilters = {
 };
 
 // src/components/layout/table/Table.tsx
-import { useCallback as useCallback20, useEffect as useEffect26, useMemo as useMemo15, useRef as useRef16, useState as useState28 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect28, useMemo as useMemo15, useRef as useRef17, useState as useState28 } from "react";
 import clsx26 from "clsx";
 import {
   flexRender,
@@ -12178,18 +12141,18 @@ import {
 
 // src/components/layout/table/TableCell.tsx
 import { clsx as clsx22 } from "clsx";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsx47("span", { className: clsx22("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ jsx49("span", { className: clsx22("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-import { useEffect as useEffect21 } from "react";
+import { useEffect as useEffect22 } from "react";
 var useResizeCallbackWrapper = (callback) => {
-  useEffect21(() => {
+  useEffect22(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -12202,37 +12165,33 @@ import { ChevronDown as ChevronDown3, ChevronsUpDown, ChevronUp as ChevronUp2 }
 import clsx24 from "clsx";
 
 // src/components/user-interaction/Tooltip.tsx
-import { useCallback as useCallback17, useMemo as useMemo14, useRef as useRef14, useState as useState24 } from "react";
+import { useEffect as useEffect23 } from "react";
+import { useId as useId11 } from "react";
+import { useCallback as useCallback17, useMemo as useMemo14, useRef as useRef15, useState as useState24 } from "react";
 import { clsx as clsx23 } from "clsx";
 import { createPortal as createPortal6 } from "react-dom";
-import { jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs27 } from "react/jsx-runtime";
 var Tooltip = ({
   tooltip,
   children,
-  appearDelay: appearDelayOverwrite,
-  disappearDelay: disappearDelayOverwrite,
+  appearDelay: appearOverwrite,
   tooltipClassName,
   containerClassName,
   position = "bottom",
   disabled = false
 }) => {
-  const [state, setState] = useState24({
-    isShown: false,
-    timer: null
-  });
+  const id = useId11();
+  const [open, setOpen] = useState24(false);
+  const timeoutRef = useRef15(null);
   const { config } = useHightideConfig();
   const appearDelay = useMemo14(
-    () => appearDelayOverwrite ?? config.tooltip.appearDelay,
-    [config.tooltip.appearDelay, appearDelayOverwrite]
+    () => appearOverwrite ?? config.tooltip.appearDelay,
+    [appearOverwrite, config.tooltip.appearDelay]
   );
-  const disappearDelay = useMemo14(
-    () => disappearDelayOverwrite ?? config.tooltip.disappearDelay,
-    [config.tooltip.disappearDelay, disappearDelayOverwrite]
-  );
-  const anchorRef = useRef14(null);
-  const containerRef = useRef14(null);
-  const triangleRef = useRef14(null);
-  const isActive = !disabled && state.isShown;
+  const anchorRef = useRef15(null);
+  const containerRef = useRef15(null);
+  const triangleRef = useRef15(null);
+  const isActive = !disabled && open;
   const { isVisible, transitionState, callbacks } = useTransitionState(
     useMemo14(() => ({ isOpen: isActive }), [isActive])
   );
@@ -12261,66 +12220,62 @@ var Tooltip = ({
   const regsitryOptions = useMemo14(() => ({ isActive }), [isActive]);
   const { zIndex } = useOverlayRegistry(regsitryOptions);
   const { zIndex: zIndexTriangle } = useOverlayRegistry(regsitryOptions);
-  const onEnter = useCallback17(() => {
-    setState((prevState) => {
-      if (prevState.isShown) {
-        clearTimeout(prevState.timer);
-        return {
-          ...prevState,
-          timer: null
-        };
-      }
-      return {
-        ...prevState,
-        timer: setTimeout(() => {
-          setState((prevState2) => {
-            clearTimeout(prevState2.timer);
-            return { ...prevState2, isShown: true, timer: null };
-          });
-        }, appearDelay)
-      };
-    });
-  }, [appearDelay]);
-  const onLeave = useCallback17(() => {
-    setState((prevState) => {
-      if (!prevState.isShown) {
-        clearTimeout(prevState.timer);
-        return {
-          ...prevState,
-          timer: null
-        };
+  const openWithDelay = useCallback17(() => {
+    if (timeoutRef.current || open) return;
+    timeoutRef.current = window.setTimeout(() => {
+      timeoutRef.current = null;
+      setOpen(true);
+    }, appearDelay);
+  }, [appearDelay, open]);
+  const close3 = useCallback17(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setOpen(false);
+  }, []);
+  useEffect23(() => {
+    if (!open) return;
+    const closeOnBlur = () => close3();
+    const closeOnScroll = () => close3();
+    window.addEventListener("blur", closeOnBlur);
+    window.addEventListener("scroll", closeOnScroll, true);
+    return () => {
+      window.removeEventListener("blur", closeOnBlur);
+      window.removeEventListener("scroll", closeOnScroll, true);
+    };
+  }, [open, close3]);
+  useEffect23(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
       }
-      clearTimeout(prevState.timer);
-      return {
-        ...prevState,
-        timer: setTimeout(() => {
-          setState((prevState2) => {
-            clearTimeout(prevState2.timer);
-            return { ...prevState2, isShown: false, timer: null };
-          });
-        }, disappearDelay)
-      };
-    });
-  }, [disappearDelay]);
-  return /* @__PURE__ */ jsxs26(
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: anchorRef,
       className: clsx23("relative inline-block", containerClassName),
-      onPointerEnter: onEnter,
-      onPointerLeave: onLeave,
+      "aria-describedby": isVisible ? id : void 0,
+      onPointerEnter: openWithDelay,
+      onPointerLeave: close3,
+      onPointerCancel: close3,
+      onFocus: openWithDelay,
+      onBlur: close3,
       children: [
         children,
-        /* @__PURE__ */ jsxs26(Visibility, { isVisible: isActive || isVisible, children: [
+        /* @__PURE__ */ jsxs27(Visibility, { isVisible: isActive || isVisible, children: [
           createPortal6(
-            /* @__PURE__ */ jsx48(
+            /* @__PURE__ */ jsx50(
               "div",
               {
                 ref: containerRef,
+                id,
                 ...callbacks,
-                onPointerEnter: onEnter,
                 "data-name": PropsUtil.dataAttributes.name("tooltip"),
                 "data-state": transitionState,
+                role: "tooltip",
                 className: tooltipClassName,
                 style: { ...css, zIndex },
                 children: tooltip
@@ -12329,7 +12284,7 @@ var Tooltip = ({
             document.body
           ),
           createPortal6(
-            /* @__PURE__ */ jsx48(
+            /* @__PURE__ */ jsx50(
               "div",
               {
                 ref: triangleRef,
@@ -12348,7 +12303,7 @@ var Tooltip = ({
 };
 
 // src/components/layout/table/TableSortButton.tsx
-import { jsx as jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
 var TableSortButton = ({
   sortDirection,
   invert = false,
@@ -12360,16 +12315,16 @@ var TableSortButton = ({
 }) => {
   const translation = useHightideTranslation();
   const { sortingsCount, index } = sortingIndexDisplay;
-  let icon = /* @__PURE__ */ jsx49(ChevronsUpDown, { className: "size-4" });
+  let icon = /* @__PURE__ */ jsx51(ChevronsUpDown, { className: "size-4" });
   if (sortDirection) {
     let usedSortDirection = sortDirection;
     if (invert) {
       usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
     }
-    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx49(ChevronUp2, { className: "size-4" }) : /* @__PURE__ */ jsx49(ChevronDown3, { className: "size-4" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx51(ChevronUp2, { className: "size-4" }) : /* @__PURE__ */ jsx51(ChevronDown3, { className: "size-4" });
   }
   const hasSortingIndex = !!sortingIndexDisplay && sortingsCount > 1 && index > 0;
-  return /* @__PURE__ */ jsx49(Tooltip, { tooltip: translation("rSortingOrderAfter", { otherSortings: index - 1 }), disabled: !hasSortingIndex, children: /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsx51(Tooltip, { tooltip: translation("rSortingOrderAfter", { otherSortings: index - 1 }), disabled: !hasSortingIndex, children: /* @__PURE__ */ jsxs28(
     Button,
     {
       layout: hasSortingIndex ? "default" : "icon",
@@ -12378,7 +12333,7 @@ var TableSortButton = ({
       className: clsx24("relative", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx49(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx51(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ jsx51(
           "div",
           {
             className: clsx24("absolute bottom-0 right-1/2 translate-x-1/2 translate-y-2/3 z-1 primary coloring-solid rounded-full h-4 w-5 text-sm"),
@@ -12395,7 +12350,7 @@ var TableSortButton = ({
 import { FilterIcon } from "lucide-react";
 
 // src/components/user-interaction/Menu.tsx
-import { useCallback as useCallback18, useEffect as useEffect24, useRef as useRef15, useState as useState26 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect26, useRef as useRef16, useState as useState26 } from "react";
 import clsx25 from "clsx";
 
 // src/utils/bagFunctions.ts
@@ -12467,7 +12422,7 @@ var usePopoverPosition = (trigger, options) => {
 };
 
 // src/hooks/useHoverState.ts
-import { useEffect as useEffect22, useState as useState25 } from "react";
+import { useEffect as useEffect24, useState as useState25 } from "react";
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
@@ -12491,14 +12446,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  useEffect22(() => {
+  useEffect24(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  useEffect22(() => {
+  useEffect24(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -12511,9 +12466,9 @@ var useHoverState = (props = void 0) => {
 };
 
 // src/hooks/useOutsideClick.ts
-import { useEffect as useEffect23 } from "react";
+import { useEffect as useEffect25 } from "react";
 var useOutsideClick = (refs, handler) => {
-  useEffect23(() => {
+  useEffect25(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -12531,14 +12486,14 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-interaction/Menu.tsx
-import { Fragment as Fragment7, jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx52, jsxs as jsxs29 } from "react/jsx-runtime";
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   isDisabled = false,
   className
-}) => /* @__PURE__ */ jsx50(
+}) => /* @__PURE__ */ jsx52(
   "div",
   {
     className: clsx25("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
@@ -12571,8 +12526,8 @@ var Menu = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = useRef15(null);
-  const menuRef = useRef15(null);
+  const triggerRef = useRef16(null);
+  const menuRef = useRef16(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
   const [isHidden, setIsHidden] = useState26(true);
   const bag = {
@@ -12585,7 +12540,7 @@ var Menu = ({
     triggerRef.current?.getBoundingClientRect(),
     { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
   );
-  useEffect24(() => {
+  useEffect26(() => {
     if (!isOpen) return;
     const triggerEl = triggerRef.current;
     if (!triggerEl) return;
@@ -12602,7 +12557,7 @@ var Menu = ({
       window.removeEventListener("resize", close3);
     };
   }, [isOpen, setIsOpen]);
-  useEffect24(() => {
+  useEffect26(() => {
     if (isOpen) {
       setIsHidden(false);
     }
@@ -12610,9 +12565,9 @@ var Menu = ({
   const { zIndex } = useOverlayRegistry({
     isActive: isOpen
   });
-  return /* @__PURE__ */ jsxs28(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs29(Fragment7, { children: [
     trigger(bag, useCallback18((el) => triggerRef.current = el, [])),
-    createPortal7(/* @__PURE__ */ jsx50(
+    createPortal7(/* @__PURE__ */ jsx52(
       "div",
       {
         ref: menuRef,
@@ -12642,8 +12597,8 @@ var Menu = ({
 };
 
 // src/components/layout/table/TableFilterButton.tsx
-import { useEffect as useEffect25, useState as useState27 } from "react";
-import { Fragment as Fragment8, jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
+import { useEffect as useEffect27, useState as useState27 } from "react";
+import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
 var TableFilterButton = ({
   filterType,
   column
@@ -12652,24 +12607,24 @@ var TableFilterButton = ({
   const columnFilterValue = column.getFilterValue();
   const [filterValue, setFilterValue] = useState27(columnFilterValue);
   const hasFilter = !!filterValue;
-  useEffect25(() => {
+  useEffect27(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx53(
     Menu,
     {
-      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ jsxs29("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ jsx51(
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ jsxs30("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ jsx53(
           Button,
           {
             layout: "icon",
             color: "neutral",
             size: "xs",
             onClick: toggleOpen,
-            children: /* @__PURE__ */ jsx51(FilterIcon, { className: "size-4" })
+            children: /* @__PURE__ */ jsx53(FilterIcon, { className: "size-4" })
           }
         ),
-        hasFilter && /* @__PURE__ */ jsx51(
+        hasFilter && /* @__PURE__ */ jsx53(
           "div",
           {
             className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
@@ -12677,9 +12632,9 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close: close3 }) => /* @__PURE__ */ jsxs29("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
-        /* @__PURE__ */ jsx51("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
-        filterType === "text" && /* @__PURE__ */ jsx51(
+      children: ({ close: close3 }) => /* @__PURE__ */ jsxs30("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ jsx53("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ jsx53(
           Input,
           {
             value: filterValue ?? "",
@@ -12689,8 +12644,8 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ jsxs29("div", { className: "flex-row-2 items-center", children: [
-          /* @__PURE__ */ jsx51(
+        filterType === "range" && /* @__PURE__ */ jsxs30("div", { className: "flex-row-2 items-center", children: [
+          /* @__PURE__ */ jsx53(
             Input,
             {
               value: filterValue?.[0].toString() ?? "",
@@ -12703,8 +12658,8 @@ var TableFilterButton = ({
               className: "h-10 input-indicator-hidden w-40"
             }
           ),
-          /* @__PURE__ */ jsx51("span", { className: "font-bold", children: "-" }),
-          /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx53("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ jsx53(
             Input,
             {
               value: filterValue?.[1].toString() ?? "",
@@ -12718,8 +12673,8 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ jsxs29(Fragment8, { children: [
-          /* @__PURE__ */ jsx51(
+        filterType === "dateRange" && /* @__PURE__ */ jsxs30(Fragment8, { children: [
+          /* @__PURE__ */ jsx53(
             Input,
             {
               value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
@@ -12732,7 +12687,7 @@ var TableFilterButton = ({
               className: "h-10 w-50"
             }
           ),
-          /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx53(
             Input,
             {
               value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
@@ -12746,12 +12701,12 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs29("div", { className: "flex-row-2 justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ jsx51(Button, { color: "negative", size: "sm", onClick: () => {
+        /* @__PURE__ */ jsxs30("div", { className: "flex-row-2 justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ jsx53(Button, { color: "negative", size: "sm", onClick: () => {
             column.setFilterValue(void 0);
             close3();
           }, children: translation("remove") }),
-          /* @__PURE__ */ jsx51(Button, { size: "sm", onClick: () => {
+          /* @__PURE__ */ jsx53(Button, { size: "sm", onClick: () => {
             column.setFilterValue(filterValue);
             close3();
           }, children: translation("apply") })
@@ -12764,7 +12719,7 @@ var TableFilterButton = ({
 // src/components/user-interaction/Checkbox.tsx
 import { Check as Check2, Minus as Minus2 } from "lucide-react";
 import { useCallback as useCallback19 } from "react";
-import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs31 } from "react/jsx-runtime";
 var Checkbox = ({
   value = false,
   indeterminate = false,
@@ -12782,7 +12737,7 @@ var Checkbox = ({
     onValueChange?.(!value);
     onEditComplete?.(!value);
   }, [onEditComplete, onValueChange, value]);
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       ...props,
@@ -12809,8 +12764,8 @@ var Checkbox = ({
       "aria-checked": indeterminate ? "mixed" : value,
       ...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props),
       children: [
-        /* @__PURE__ */ jsx52(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ jsx52(Minus2, { "data-name": "checkbox-indicator", "aria-hidden": true }) }),
-        /* @__PURE__ */ jsx52(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ jsx52(Check2, { "data-name": "checkbox-indicator", "aria-hidden": true }) })
+        /* @__PURE__ */ jsx54(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ jsx54(Minus2, { "data-name": "checkbox-indicator", "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx54(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ jsx54(Check2, { "data-name": "checkbox-indicator", "aria-hidden": true }) })
       ]
     }
   );
@@ -12821,7 +12776,7 @@ var CheckboxUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx54(
     Checkbox,
     {
       ...props,
@@ -12832,7 +12787,7 @@ var CheckboxUncontrolled = ({
 };
 
 // src/components/layout/table/Table.tsx
-import { jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs32 } from "react/jsx-runtime";
 var Table = ({
   data,
   fillerRow,
@@ -12846,8 +12801,8 @@ var Table = ({
   columns,
   ...tableOptions
 }) => {
-  const ref = useRef16(null);
-  const tableRef = useRef16(null);
+  const ref = useRef17(null);
+  const tableRef = useRef17(null);
   const [columnSizing, setColumnSizing] = useState28(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
@@ -12952,7 +12907,7 @@ var Table = ({
       minSize: 60,
       maxSize: 700,
       cell: ({ cell }) => {
-        return /* @__PURE__ */ jsx53(TableCell, { children: cell.getValue() });
+        return /* @__PURE__ */ jsx55(TableCell, { children: cell.getValue() });
       },
       ...defaultColumn
     },
@@ -13001,7 +12956,7 @@ var Table = ({
     ...tableOptions
   });
   const [hasInitializedSizing, setHasInitializedSizing] = useState28(false);
-  useEffect26(() => {
+  useEffect28(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
@@ -13011,7 +12966,7 @@ var Table = ({
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  useEffect26(() => {
+  useEffect28(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -13037,8 +12992,8 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ jsxs31("div", { ref, "data-name": PropsUtil.dataAttributes.name("table-container"), className, children: [
-    /* @__PURE__ */ jsx53("div", { "data-name": PropsUtil.dataAttributes.name("table-scroll-wrapper"), className: tableContainerClassName, children: /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32("div", { ref, "data-name": PropsUtil.dataAttributes.name("table-container"), className, children: [
+    /* @__PURE__ */ jsx55("div", { "data-name": PropsUtil.dataAttributes.name("table-scroll-wrapper"), className: tableContainerClassName, children: /* @__PURE__ */ jsxs32(
       "table",
       {
         ref: tableRef,
@@ -13049,7 +13004,7 @@ var Table = ({
         },
         className: tableClassName,
         children: [
-          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx53("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx53(
+          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx55("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx55(
             "col",
             {
               style: {
@@ -13060,16 +13015,16 @@ var Table = ({
             },
             header.id
           )) }, headerGroup.id)),
-          /* @__PURE__ */ jsx53("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx53("tr", { "data-name": PropsUtil.dataAttributes.name("table-header-row"), className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-            return /* @__PURE__ */ jsxs31(
+          /* @__PURE__ */ jsx55("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx55("tr", { "data-name": PropsUtil.dataAttributes.name("table-header-row"), className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+            return /* @__PURE__ */ jsxs32(
               "th",
               {
                 colSpan: header.colSpan,
                 "data-name": PropsUtil.dataAttributes.name("table-header-cell"),
                 className: clsx26("group/table-header-cell", header.column.columnDef.meta?.className),
                 children: [
-                  /* @__PURE__ */ jsx53(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs31("div", { className: "flex-row-1 items-center", children: [
-                    /* @__PURE__ */ jsx53(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ jsx53(
+                  /* @__PURE__ */ jsx55(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs32("div", { className: "flex-row-1 items-center", children: [
+                    /* @__PURE__ */ jsx55(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ jsx55(
                       TableSortButton,
                       {
                         sortDirection: header.column.getIsSorted(),
@@ -13095,7 +13050,7 @@ var Table = ({
                         }
                       }
                     ) }),
-                    /* @__PURE__ */ jsx53(Visibility, { isVisible: header.column.getCanFilter() && !!header.column.columnDef.meta?.filterType, children: /* @__PURE__ */ jsx53(
+                    /* @__PURE__ */ jsx55(Visibility, { isVisible: header.column.getCanFilter() && !!header.column.columnDef.meta?.filterType, children: /* @__PURE__ */ jsx55(
                       TableFilterButton,
                       {
                         column: header.column,
@@ -13107,7 +13062,7 @@ var Table = ({
                       header.getContext()
                     )
                   ] }) }),
-                  /* @__PURE__ */ jsx53(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ jsx53(
+                  /* @__PURE__ */ jsx55(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ jsx55(
                     "div",
                     {
                       onPointerDown: header.getResizeHandler(),
@@ -13128,16 +13083,16 @@ var Table = ({
               header.id
             );
           }) }, headerGroup.id)) }),
-          /* @__PURE__ */ jsxs31("tbody", { children: [
+          /* @__PURE__ */ jsxs32("tbody", { children: [
             table.getRowModel().rows.map((row) => {
-              return /* @__PURE__ */ jsx53(
+              return /* @__PURE__ */ jsx55(
                 "tr",
                 {
                   onClick: () => onRowClick?.(row, table),
                   "data-name": "table-body-row",
                   className: BagFunctionUtil.resolve(table.options.meta?.bodyRowClassName, row.original),
                   children: row.getVisibleCells().map((cell) => {
-                    return /* @__PURE__ */ jsx53("td", { "data-name": "table-body-cell", children: flexRender(
+                    return /* @__PURE__ */ jsx55("td", { "data-name": "table-body-cell", children: flexRender(
                       cell.column.columnDef.cell,
                       cell.getContext()
                     ) }, cell.id);
@@ -13147,15 +13102,15 @@ var Table = ({
               );
             }),
             range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-              return /* @__PURE__ */ jsx53("tr", { children: columns.map((column) => {
-                return /* @__PURE__ */ jsx53("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx53(FillerCell, {}) }, column.id);
+              return /* @__PURE__ */ jsx55("tr", { children: columns.map((column) => {
+                return /* @__PURE__ */ jsx55("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx55(FillerCell, {}) }, column.id);
               }) }, "filler-row-" + index);
             })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx53("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx55("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ jsx55(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -13167,7 +13122,7 @@ var Table = ({
 };
 var TableUncontrolled = ({ data, ...props }) => {
   const [usedDate] = useOverwritableState(data);
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx55(
     Table,
     {
       ...props,
@@ -13191,7 +13146,7 @@ var TableWithSelection = ({
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ jsx53(
+          return /* @__PURE__ */ jsx55(
             Checkbox,
             {
               value: table.getIsAllRowsSelected(),
@@ -13204,7 +13159,7 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ jsx53(
+          return /* @__PURE__ */ jsx55(
             Checkbox,
             {
               disabled: !row.getCanSelect(),
@@ -13222,15 +13177,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx55(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ jsx53(Checkbox, { value: false, disabled: true, className: "max-w-6" });
+          return /* @__PURE__ */ jsx55(Checkbox, { value: false, disabled: true, className: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx53(FillerCell, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx55(FillerCell, {});
       },
       state: {
         rowSelection,
@@ -13265,7 +13220,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
 import { CheckIcon as CheckIcon2, Copy } from "lucide-react";
-import { jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs33 } from "react/jsx-runtime";
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -13296,7 +13251,7 @@ var CopyToClipboardWrapper = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       className: clsx27("relative inline-block cursor-copy", containerClassName),
@@ -13314,7 +13269,7 @@ var CopyToClipboardWrapper = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsxs32(
+        /* @__PURE__ */ jsxs33(
           "div",
           {
             className: clsx27(
@@ -13329,15 +13284,15 @@ var CopyToClipboardWrapper = ({
               opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
             },
             children: [
-              isShowingConfirmation && /* @__PURE__ */ jsxs32("div", { className: "flex-row-1", children: [
-                /* @__PURE__ */ jsx54(CheckIcon2, { size: 16, className: "text-positive" }),
+              isShowingConfirmation && /* @__PURE__ */ jsxs33("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ jsx56(CheckIcon2, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
-              isShowingIndication && /* @__PURE__ */ jsxs32("div", { className: "flex-row-1 text-description", children: [
-                /* @__PURE__ */ jsx54(Copy, { size: 16 }),
+              isShowingIndication && /* @__PURE__ */ jsxs33("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ jsx56(Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ jsx54(
+              /* @__PURE__ */ jsx56(
                 "div",
                 {
                   className: clsx27(`absolute w-0 h-0`, triangleClasses[position]),
@@ -13353,9 +13308,9 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-interaction/ScrollPicker.tsx
-import { useCallback as useCallback21, useEffect as useEffect27, useState as useState30 } from "react";
+import { useCallback as useCallback21, useEffect as useEffect29, useState as useState30 } from "react";
 import clsx28 from "clsx";
-import { jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -13473,7 +13428,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect27(() => {
+  useEffect29(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -13494,7 +13449,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx57(
     "div",
     {
       className: "relative overflow-hidden",
@@ -13505,15 +13460,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + deltaY }));
         }
       },
-      children: /* @__PURE__ */ jsxs33("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ jsx55(
+      children: /* @__PURE__ */ jsxs34("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ jsx57(
           "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__ */ jsx55(
+        /* @__PURE__ */ jsx57(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -13521,7 +13476,7 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name: name2, index }, arrayIndex) => /* @__PURE__ */ jsx55(
+            children: shownItems.map(({ name: name2, index }, arrayIndex) => /* @__PURE__ */ jsx57(
               "div",
               {
                 className: clsx28(
@@ -13551,10 +13506,10 @@ var ScrollPicker = ({
 };
 
 // src/components/user-interaction/Textarea.tsx
-import { forwardRef as forwardRef9, useId as useId11 } from "react";
+import { forwardRef as forwardRef10, useId as useId12 } from "react";
 import clsx29 from "clsx";
-import { jsx as jsx56, jsxs as jsxs34 } from "react/jsx-runtime";
-var Textarea = forwardRef9(function Textarea2({
+import { jsx as jsx58, jsxs as jsxs35 } from "react/jsx-runtime";
+var Textarea = forwardRef10(function Textarea2({
   invalid = false,
   onValueChange,
   onEditComplete,
@@ -13566,7 +13521,7 @@ var Textarea = forwardRef9(function Textarea2({
     onEditComplete?.(text);
     clearTimer();
   };
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx58(
     "textarea",
     {
       ...props,
@@ -13596,7 +13551,7 @@ var TextareaUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx58(
     Textarea,
     {
       ...props,
@@ -13614,9 +13569,9 @@ var TextareaWithHeadline = ({
   containerClassName,
   ...props
 }) => {
-  const genId = useId11();
+  const genId = useId12();
   const usedId = id ?? genId;
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       className: clsx29(
@@ -13628,8 +13583,8 @@ var TextareaWithHeadline = ({
         containerClassName
       ),
       children: [
-        headline && /* @__PURE__ */ jsx56("label", { ...headlineProps, htmlFor: usedId, className: clsx29("typography-lable-md text-label", headlineProps.className), children: headline }),
-        /* @__PURE__ */ jsx56(
+        headline && /* @__PURE__ */ jsx58("label", { ...headlineProps, htmlFor: usedId, className: clsx29("typography-lable-md text-label", headlineProps.className), children: headline }),
+        /* @__PURE__ */ jsx58(
           Textarea,
           {
             ...props,
@@ -13824,7 +13779,7 @@ import clsx31 from "clsx";
 
 // src/components/user-interaction/date/DayPicker.tsx
 import { useMemo as useMemo16 } from "react";
-import { jsx as jsx57, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs36 } from "react/jsx-runtime";
 var DayPicker = ({
   displayedMonth,
   value,
@@ -13847,14 +13802,14 @@ var DayPicker = ({
     if (!providedStart) return;
     return new Date(providedStart.getFullYear(), providedStart.getMonth(), providedStart.getDate());
   }, [providedStart]);
-  return /* @__PURE__ */ jsxs35("div", { className, "data-name": "day-picker-container", children: [
-    /* @__PURE__ */ jsx57("div", { "data-name": "day-picker-header-row", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx57("div", { "data-name": "day-picker-header-item", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
-    weeks.map((week, index) => /* @__PURE__ */ jsx57("div", { "data-name": "day-picker-body-row", children: week.map((date) => {
+  return /* @__PURE__ */ jsxs36("div", { className, "data-name": "day-picker-container", children: [
+    /* @__PURE__ */ jsx59("div", { "data-name": "day-picker-header-row", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx59("div", { "data-name": "day-picker-header-item", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ jsx59("div", { "data-name": "day-picker-body-row", children: week.map((date) => {
       const isSelected = !!value && DateUtils.equalDate(value, date);
       const isToday = DateUtils.equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
       const isDayValid = isInTimeSpan(date, start, end);
-      return /* @__PURE__ */ jsx57(
+      return /* @__PURE__ */ jsx59(
         "button",
         {
           disabled: !isDayValid,
@@ -13888,7 +13843,7 @@ var DayPickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx59(
     DayPicker,
     {
       value,
@@ -13899,9 +13854,9 @@ var DayPickerUncontrolled = ({
 };
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
-import { memo, useCallback as useCallback22, useEffect as useEffect28, useLayoutEffect as useLayoutEffect3, useMemo as useMemo17, useRef as useRef17, useState as useState31 } from "react";
+import { memo, useCallback as useCallback22, useEffect as useEffect30, useLayoutEffect as useLayoutEffect3, useMemo as useMemo17, useRef as useRef18, useState as useState31 } from "react";
 import clsx30 from "clsx";
-import { jsx as jsx58, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
 var YearRow = memo(function YearRow2({
   year,
   selectedMonthIndex,
@@ -13910,31 +13865,31 @@ var YearRow = memo(function YearRow2({
   monthNames,
   onSelect
 }) {
-  const ref = useRef17(null);
+  const ref = useRef18(null);
   const isSelectedYear = selectedMonthIndex !== void 0;
   const [isExpanded, setIsExpanded] = useState31(false);
-  useEffect28(() => {
+  useEffect30(() => {
     if (isSelectedYear) {
       ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
   }, [isSelectedYear]);
   const monthGrid = useMemo17(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     ExpandableRoot,
     {
       ref: isSelectedYear ? ref : void 0,
       isExpanded,
       onExpandedChange: setIsExpanded,
       children: [
-        /* @__PURE__ */ jsx58(ExpandableHeader, { className: clsx30("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
-        /* @__PURE__ */ jsx58(ExpandableContent, { className: "gap-y-1 px-2 expadable-content-h-39", children: isExpanded && monthGrid.map((group, groupIdx) => /* @__PURE__ */ jsx58("div", { className: "flex-row-1", children: group.map((month) => {
+        /* @__PURE__ */ jsx60(ExpandableHeader, { className: clsx30("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
+        /* @__PURE__ */ jsx60(ExpandableContent, { className: "gap-y-1 px-2 expadable-content-h-39", children: isExpanded && monthGrid.map((group, groupIdx) => /* @__PURE__ */ jsx60("div", { className: "flex-row-1", children: group.map((month) => {
           const monthIndex = DateUtils.monthsList.indexOf(month);
           const currentTimestamp = new Date(year, monthIndex).getTime();
           const isAfterStart = minTimestamp === void 0 || currentTimestamp >= minTimestamp;
           const isBeforeEnd = maxTimestamp === void 0 || currentTimestamp <= maxTimestamp;
           const isValid = isAfterStart && isBeforeEnd;
           const isSelectedMonth = monthIndex === selectedMonthIndex;
-          return /* @__PURE__ */ jsx58(
+          return /* @__PURE__ */ jsx60(
             Button,
             {
               disabled: !isValid,
@@ -13982,7 +13937,7 @@ var YearMonthPicker = ({
     if (!end) return;
     return new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime();
   }, [end]);
-  const callbackRefs = useRef17({ onValueChange, onEditComplete });
+  const callbackRefs = useRef18({ onValueChange, onEditComplete });
   useLayoutEffect3(() => {
     callbackRefs.current = { onValueChange, onEditComplete };
   });
@@ -13991,7 +13946,7 @@ var YearMonthPicker = ({
     onValueChange2?.(newDate);
     onEditComplete2?.(newDate);
   }, []);
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx60(
     InfiniteScroll,
     {
       itemCount: years.length,
@@ -14001,7 +13956,7 @@ var YearMonthPicker = ({
         const year = years[index];
         const isSelectedYear = value.getFullYear() === year;
         const selectedMonthIndex = isSelectedYear ? value.getMonth() : void 0;
-        return /* @__PURE__ */ jsx58(
+        return /* @__PURE__ */ jsx60(
           YearRow,
           {
             year,
@@ -14023,7 +13978,7 @@ var YearMonthPickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx60(
     YearMonthPicker,
     {
       value,
@@ -14034,7 +13989,7 @@ var YearMonthPickerUncontrolled = ({
 };
 
 // src/components/user-interaction/date/DatePicker.tsx
-import { jsx as jsx59, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
 var DatePicker = ({
   value = /* @__PURE__ */ new Date(),
   start,
@@ -14050,9 +14005,9 @@ var DatePicker = ({
   const { locale } = useLocale();
   const [displayedMonth, setDisplayedMonth] = useState32(new Date(value.getFullYear(), value.getMonth(), 1));
   const [displayMode, setDisplayMode] = useState32(initialDisplay);
-  return /* @__PURE__ */ jsxs37("div", { className: clsx31("flex-col-3", className), children: [
-    /* @__PURE__ */ jsxs37("div", { className: "flex-row-2 items-center justify-between", children: [
-      /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38("div", { className: clsx31("flex-col-3", className), children: [
+    /* @__PURE__ */ jsxs38("div", { className: "flex-row-2 items-center justify-between", children: [
+      /* @__PURE__ */ jsxs38(
         Button,
         {
           size: "sm",
@@ -14063,12 +14018,12 @@ var DatePicker = ({
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
           children: [
             `${new Intl.DateTimeFormat(LocalizationUtil.localToLanguage(locale), { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
-            /* @__PURE__ */ jsx59(ChevronDown4, { size: 16 })
+            /* @__PURE__ */ jsx61(ChevronDown4, { size: 16 })
           ]
         }
       ),
-      displayMode === "day" && /* @__PURE__ */ jsxs37("div", { className: "flex-row-2 justify-end", children: [
-        /* @__PURE__ */ jsx59(
+      displayMode === "day" && /* @__PURE__ */ jsxs38("div", { className: "flex-row-2 justify-end", children: [
+        /* @__PURE__ */ jsx61(
           Button,
           {
             size: "sm",
@@ -14079,10 +14034,10 @@ var DatePicker = ({
               onValueChange(newDate);
               setDisplayedMonth(newDate);
             },
-            children: /* @__PURE__ */ jsx59(Calendar, { className: "size-5" })
+            children: /* @__PURE__ */ jsx61(Calendar, { className: "size-5" })
           }
         ),
-        /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx61(
           Button,
           {
             size: "sm",
@@ -14090,10 +14045,10 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ jsx59(ArrowUp, { size: 20 })
+            children: /* @__PURE__ */ jsx61(ArrowUp, { size: 20 })
           }
         ),
-        /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx61(
           Button,
           {
             size: "sm",
@@ -14101,12 +14056,12 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ jsx59(ArrowDown, { size: 20 })
+            children: /* @__PURE__ */ jsx61(ArrowDown, { size: 20 })
           }
         )
       ] })
     ] }),
-    displayMode === "yearMonth" ? /* @__PURE__ */ jsx59(
+    displayMode === "yearMonth" ? /* @__PURE__ */ jsx61(
       YearMonthPicker,
       {
         ...yearMonthPickerProps,
@@ -14123,7 +14078,7 @@ var DatePicker = ({
         },
         className: "h-60 max-h-60"
       }
-    ) : /* @__PURE__ */ jsx59(
+    ) : /* @__PURE__ */ jsx61(
       DayPicker,
       {
         ...dayPickerProps,
@@ -14145,7 +14100,7 @@ var DatePickerUncontrolled = ({
   ...props
 }) => {
   const [date, setDate] = useOverwritableState(value, onValueChange);
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx61(
     DatePicker,
     {
       ...props,
@@ -14159,8 +14114,8 @@ var DatePickerUncontrolled = ({
 import clsx32 from "clsx";
 
 // src/components/user-interaction/date/TimePicker.tsx
-import { useEffect as useEffect29, useRef as useRef18 } from "react";
-import { jsx as jsx60, jsxs as jsxs38 } from "react/jsx-runtime";
+import { useEffect as useEffect31, useRef as useRef19 } from "react";
+import { jsx as jsx62, jsxs as jsxs39 } from "react/jsx-runtime";
 var TimePicker = ({
   value = /* @__PURE__ */ new Date(),
   onValueChange,
@@ -14169,8 +14124,8 @@ var TimePicker = ({
   minuteIncrement = "5min",
   className
 }) => {
-  const minuteRef = useRef18(null);
-  const hourRef = useRef18(null);
+  const minuteRef = useRef19(null);
+  const hourRef = useRef19(null);
   const isPM = value.getHours() > 11;
   const hours = is24HourFormat ? range(24) : range(12);
   let minutes = range(60);
@@ -14190,13 +14145,13 @@ var TimePicker = ({
   }
   const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes()));
   const hour = value.getHours();
-  useEffect29(() => {
+  useEffect31(() => {
     minuteRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
     });
   }, [closestMinute]);
-  useEffect29(() => {
+  useEffect31(() => {
     hourRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
@@ -14208,10 +14163,10 @@ var TimePicker = ({
     onValueChange?.(newDate);
     onEditComplete?.(newDate);
   };
-  return /* @__PURE__ */ jsxs38("div", { "data-name": "time-picker-container", className, children: [
-    /* @__PURE__ */ jsx60("div", { "data-name": "time-picker-value-column", children: hours.map((hour2) => {
+  return /* @__PURE__ */ jsxs39("div", { "data-name": "time-picker-container", className, children: [
+    /* @__PURE__ */ jsx62("div", { "data-name": "time-picker-value-column", children: hours.map((hour2) => {
       const isSelected = hour2 === value.getHours() - (!is24HourFormat && isPM ? 12 : 0);
-      return /* @__PURE__ */ jsx60(
+      return /* @__PURE__ */ jsx62(
         Button,
         {
           size: "sm",
@@ -14223,9 +14178,9 @@ var TimePicker = ({
         hour2
       );
     }) }),
-    /* @__PURE__ */ jsx60("div", { "data-name": "time-picker-value-column", children: minutes.map((minute) => {
+    /* @__PURE__ */ jsx62("div", { "data-name": "time-picker-value-column", children: minutes.map((minute) => {
       const isSelected = minute === closestMinute;
-      return /* @__PURE__ */ jsx60(
+      return /* @__PURE__ */ jsx62(
         Button,
         {
           size: "sm",
@@ -14237,8 +14192,8 @@ var TimePicker = ({
         minute + minuteIncrement
       );
     }) }),
-    !is24HourFormat && /* @__PURE__ */ jsxs38("div", { "data-name": "time-picker-value-column", children: [
-      /* @__PURE__ */ jsx60(
+    !is24HourFormat && /* @__PURE__ */ jsxs39("div", { "data-name": "time-picker-value-column", children: [
+      /* @__PURE__ */ jsx62(
         Button,
         {
           size: "sm",
@@ -14247,7 +14202,7 @@ var TimePicker = ({
           children: "AM"
         }
       ),
-      /* @__PURE__ */ jsx60(
+      /* @__PURE__ */ jsx62(
         Button,
         {
           size: "sm",
@@ -14265,7 +14220,7 @@ var TimePickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx62(
     TimePicker,
     {
       ...props,
@@ -14276,7 +14231,7 @@ var TimePickerUncontrolled = ({
 };
 
 // src/components/user-interaction/date/DateTimePicker.tsx
-import { jsx as jsx61, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs40 } from "react/jsx-runtime";
 var DateTimePicker = ({
   value = /* @__PURE__ */ new Date(),
   start,
@@ -14295,7 +14250,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ jsx61(
+    dateDisplay = /* @__PURE__ */ jsx63(
       DatePicker,
       {
         ...datePickerProps,
@@ -14311,7 +14266,7 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ jsx61(
+    timeDisplay = /* @__PURE__ */ jsx63(
       TimePicker,
       {
         ...timePickerProps,
@@ -14324,14 +14279,14 @@ var DateTimePicker = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs39("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
+  return /* @__PURE__ */ jsxs40("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
     dateDisplay,
     timeDisplay
   ] });
 };
 var DateTimePickerUncontrolled = ({ value: initialValue, onValueChange, ...props }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx63(
     DateTimePicker,
     {
       ...props,
@@ -14342,7 +14297,7 @@ var DateTimePickerUncontrolled = ({ value: initialValue, onValueChange, ...props
 };
 
 // src/components/user-interaction/date/TimeDisplay.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var TimeDisplay = ({
   date,
   mode = "daysFromToday"
@@ -14379,15 +14334,15 @@ var TimeDisplay = ({
   } else {
     fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
   }
-  return /* @__PURE__ */ jsx62("span", { children: fullString });
+  return /* @__PURE__ */ jsx64("span", { children: fullString });
 };
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-import { useEffect as useEffect30, useMemo as useMemo18, useRef as useRef19, useState as useState33 } from "react";
+import { useEffect as useEffect32, useMemo as useMemo18, useRef as useRef20, useState as useState33 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { CalendarIcon } from "lucide-react";
 import clsx33 from "clsx";
-import { Fragment as Fragment9, jsx as jsx63, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx65, jsxs as jsxs41 } from "react/jsx-runtime";
 var DateTimeInput = ({
   value,
   onValueChange,
@@ -14401,8 +14356,8 @@ var DateTimeInput = ({
   const translation = useHightideTranslation();
   const { locale } = useLocale();
   const [isOpen, setIsOpen] = useState33(false);
-  const anchorRef = useRef19(null);
-  const containerRef = useRef19(null);
+  const anchorRef = useRef20(null);
+  const containerRef = useRef20(null);
   const position = useFloatingElement({
     active: isOpen,
     anchorRef,
@@ -14417,14 +14372,14 @@ var DateTimeInput = ({
   });
   const { zIndex } = useOverlayRegistry({ isActive: isOpen });
   const isReadOnly = useMemo18(() => props.readOnly || props.disabled, [props.readOnly, props.disabled]);
-  useEffect30(() => {
+  useEffect32(() => {
     if (isReadOnly) {
       setIsOpen(false);
     }
   }, [isReadOnly]);
-  return /* @__PURE__ */ jsxs40(Fragment9, { children: [
-    /* @__PURE__ */ jsxs40("div", { ...containerProps, ref: anchorRef, className: clsx33("relative w-full", containerProps?.className), children: [
-      /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsxs41(Fragment9, { children: [
+    /* @__PURE__ */ jsxs41("div", { ...containerProps, ref: anchorRef, className: clsx33("relative w-full", containerProps?.className), children: [
+      /* @__PURE__ */ jsx65(
         Input,
         {
           ...props,
@@ -14442,7 +14397,7 @@ var DateTimeInput = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx63(
+      /* @__PURE__ */ jsx65(
         Button,
         {
           coloringStyle: "text",
@@ -14452,12 +14407,12 @@ var DateTimeInput = ({
           className: "absolute right-1 top-1/2 -translate-y-1/2",
           disabled: isReadOnly,
           onClick: () => setIsOpen((prevState) => !prevState),
-          children: /* @__PURE__ */ jsx63(CalendarIcon, { className: "size-5" })
+          children: /* @__PURE__ */ jsx65(CalendarIcon, { className: "size-5" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx63(Visibility, { isVisible: isOpen, children: createPortal8(
-      /* @__PURE__ */ jsxs40(
+    /* @__PURE__ */ jsx65(Visibility, { isVisible: isOpen, children: createPortal8(
+      /* @__PURE__ */ jsxs41(
         "div",
         {
           ref: containerRef,
@@ -14468,7 +14423,7 @@ var DateTimeInput = ({
             opacity: position ? void 0 : 0
           },
           children: [
-            /* @__PURE__ */ jsx63(
+            /* @__PURE__ */ jsx65(
               DateTimePicker,
               {
                 ...pickerProps,
@@ -14478,8 +14433,8 @@ var DateTimeInput = ({
                 onEditComplete
               }
             ),
-            /* @__PURE__ */ jsxs40("div", { className: "flex-row-2 justify-end", children: [
-              /* @__PURE__ */ jsx63(Visibility, { isVisible: !!onRemove && !!value, children: /* @__PURE__ */ jsx63(
+            /* @__PURE__ */ jsxs41("div", { className: "flex-row-2 justify-end", children: [
+              /* @__PURE__ */ jsx65(Visibility, { isVisible: !!onRemove && !!value, children: /* @__PURE__ */ jsx65(
                 Button,
                 {
                   size: "md",
@@ -14492,7 +14447,7 @@ var DateTimeInput = ({
                   children: translation("clear")
                 }
               ) }),
-              /* @__PURE__ */ jsx63(Visibility, { isVisible: !value, children: /* @__PURE__ */ jsx63(
+              /* @__PURE__ */ jsx65(Visibility, { isVisible: !value, children: /* @__PURE__ */ jsx65(
                 Button,
                 {
                   size: "md",
@@ -14502,7 +14457,7 @@ var DateTimeInput = ({
                   children: translation("cancel")
                 }
               ) }),
-              /* @__PURE__ */ jsx63(
+              /* @__PURE__ */ jsx65(
                 Button,
                 {
                   size: "md",
@@ -14527,7 +14482,7 @@ var DateTimeInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue);
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx65(
     DateTimeInput,
     {
       ...props,
@@ -14545,21 +14500,21 @@ var DateTimeInputUncontrolled = ({
 };
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
-import { useId as useId12 } from "react";
-import { forwardRef as forwardRef10, useState as useState34 } from "react";
+import { useId as useId13 } from "react";
+import { forwardRef as forwardRef11, useState as useState34 } from "react";
 import clsx34 from "clsx";
-import { jsx as jsx64, jsxs as jsxs41 } from "react/jsx-runtime";
-var InsideLabelInput = forwardRef10(function InsideLabelInput2({
+import { jsx as jsx66, jsxs as jsxs42 } from "react/jsx-runtime";
+var InsideLabelInput = forwardRef11(function InsideLabelInput2({
   id: customId,
   label,
   ...props
 }, forwardedRef) {
   const { value } = props;
   const [isFocused, setIsFocused] = useState34(false);
-  const generatedId = useId12();
+  const generatedId = useId13();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ jsxs41("div", { className: clsx34("relative"), children: [
-    /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsxs42("div", { className: clsx34("relative"), children: [
+    /* @__PURE__ */ jsx66(
       Input,
       {
         ...props,
@@ -14577,7 +14532,7 @@ var InsideLabelInput = forwardRef10(function InsideLabelInput2({
         }
       }
     ),
-    /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx66(
       "label",
       {
         id: id + "-label",
@@ -14599,7 +14554,7 @@ var InsideLabelInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, props.onValueChange);
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx66(
     InsideLabelInput,
     {
       ...props,
@@ -14612,7 +14567,7 @@ var InsideLabelInputUncontrolled = ({
 // src/components/user-interaction/input/SearchBar.tsx
 import { Search } from "lucide-react";
 import { clsx as clsx35 } from "clsx";
-import { jsx as jsx65, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs43 } from "react/jsx-runtime";
 var SearchBar = ({
   value: initialValue,
   onSearch,
@@ -14623,8 +14578,8 @@ var SearchBar = ({
 }) => {
   const translation = useHightideTranslation();
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsxs42("div", { ...containerProps, className: clsx35("relative", containerProps?.className), children: [
-    /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsxs43("div", { ...containerProps, className: clsx35("relative", containerProps?.className), children: [
+    /* @__PURE__ */ jsx67(
       InputUncontrolled,
       {
         ...inputProps,
@@ -14635,7 +14590,7 @@ var SearchBar = ({
         className: clsx35("pr-10 w-full", inputProps.className)
       }
     ),
-    /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsx67(
       Button,
       {
         ...searchButtonProps,
@@ -14645,33 +14600,33 @@ var SearchBar = ({
         coloringStyle: "text",
         onClick: () => onSearch(value),
         className: clsx35("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
-        children: /* @__PURE__ */ jsx65(Search, { className: "w-full h-full" })
+        children: /* @__PURE__ */ jsx67(Search, { className: "w-full h-full" })
       }
     )
   ] });
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-import { forwardRef as forwardRef11, useEffect as useEffect31, useImperativeHandle as useImperativeHandle4, useRef as useRef20, useState as useState35 } from "react";
+import { forwardRef as forwardRef12, useEffect as useEffect33, useImperativeHandle as useImperativeHandle4, useRef as useRef21, useState as useState35 } from "react";
 import { Pencil } from "lucide-react";
 import clsx36 from "clsx";
-import { jsx as jsx66, jsxs as jsxs43 } from "react/jsx-runtime";
-var ToggleableInput = forwardRef11(function ToggleableInput2({
+import { jsx as jsx68, jsxs as jsxs44 } from "react/jsx-runtime";
+var ToggleableInput = forwardRef12(function ToggleableInput2({
   value,
   initialState = "display",
   editCompleteOptions,
   ...props
 }, forwardedRef) {
   const [isEditing, setIsEditing] = useState35(initialState !== "display");
-  const innerRef = useRef20(null);
+  const innerRef = useRef21(null);
   useImperativeHandle4(forwardedRef, () => innerRef.current);
-  useEffect31(() => {
+  useEffect33(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs43("div", { className: clsx36("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsxs44("div", { className: clsx36("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ jsx68(
       Input,
       {
         ...props,
@@ -14697,9 +14652,9 @@ var ToggleableInput = forwardRef11(function ToggleableInput2({
         })
       }
     ),
-    !isEditing && /* @__PURE__ */ jsxs43("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsx66("span", { className: clsx36(" truncate"), children: value }),
-      /* @__PURE__ */ jsx66(Pencil, { className: clsx36(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ jsxs44("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx68("span", { className: clsx36(" truncate"), children: value }),
+      /* @__PURE__ */ jsx68(Pencil, { className: clsx36(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -14709,7 +14664,7 @@ var ToggleableInputUncontrolled = ({
   ...restProps
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx68(
     ToggleableInput,
     {
       value,
@@ -14724,7 +14679,7 @@ import { Check as Check3 } from "lucide-react";
 
 // src/components/user-interaction/properties/PropertyBase.tsx
 import { AlertTriangle, Trash, X as X3 } from "lucide-react";
-import { jsx as jsx67, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs45 } from "react/jsx-runtime";
 var PropertyBase = ({
   name: name2,
   children,
@@ -14743,29 +14698,29 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
       className: className ? `group/property ${className}` : "group/property",
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
       children: [
-        /* @__PURE__ */ jsxs44(
+        /* @__PURE__ */ jsxs45(
           "div",
           {
             className,
             "data-name": "property-title",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
-              /* @__PURE__ */ jsx67(Tooltip, { tooltip: name2, containerClassName: "min-w-0", children: /* @__PURE__ */ jsxs44("div", { className: "flex-row-1 items-center", children: [
-                /* @__PURE__ */ jsx67("div", { "data-name": "property-title-icon", children: icon }),
-                /* @__PURE__ */ jsx67("span", { "data-name": "property-title-text", children: name2 })
+              /* @__PURE__ */ jsx69(Tooltip, { tooltip: name2, containerClassName: "min-w-0", children: /* @__PURE__ */ jsxs45("div", { className: "flex-row-1 items-center", children: [
+                /* @__PURE__ */ jsx69("div", { "data-name": "property-title-icon", children: icon }),
+                /* @__PURE__ */ jsx69("span", { "data-name": "property-title-text", children: name2 })
               ] }) }),
-              invalid && /* @__PURE__ */ jsx67(AlertTriangle, { className: "size-force-6" })
+              invalid && /* @__PURE__ */ jsx69(AlertTriangle, { className: "size-force-6" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs44(
+        /* @__PURE__ */ jsxs45(
           "div",
           {
             className,
@@ -14773,8 +14728,8 @@ var PropertyBase = ({
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
               children({ required, hasValue, invalid }),
-              showActionsContainer && /* @__PURE__ */ jsxs44("div", { "data-name": "property-actions", children: [
-                isClearEnabled && /* @__PURE__ */ jsx67(Tooltip, { tooltip: translation("clearValue"), children: /* @__PURE__ */ jsx67(
+              showActionsContainer && /* @__PURE__ */ jsxs45("div", { "data-name": "property-actions", children: [
+                isClearEnabled && /* @__PURE__ */ jsx69(Tooltip, { tooltip: translation("clearValue"), children: /* @__PURE__ */ jsx69(
                   Button,
                   {
                     onClick: onValueClear,
@@ -14783,10 +14738,10 @@ var PropertyBase = ({
                     coloringStyle: "text",
                     layout: "icon",
                     size: "sm",
-                    children: /* @__PURE__ */ jsx67(X3, { className: "size-force-5" })
+                    children: /* @__PURE__ */ jsx69(X3, { className: "size-force-5" })
                   }
                 ) }),
-                isRemoveEnabled && /* @__PURE__ */ jsx67(Tooltip, { tooltip: translation("removeProperty"), children: /* @__PURE__ */ jsx67(
+                isRemoveEnabled && /* @__PURE__ */ jsx69(Tooltip, { tooltip: translation("removeProperty"), children: /* @__PURE__ */ jsx69(
                   Button,
                   {
                     onClick: onRemove,
@@ -14794,7 +14749,7 @@ var PropertyBase = ({
                     coloringStyle: "text",
                     layout: "icon",
                     size: "sm",
-                    children: /* @__PURE__ */ jsx67(Trash, { className: "size-force-5" })
+                    children: /* @__PURE__ */ jsx69(Trash, { className: "size-force-5" })
                   }
                 ) })
               ] })
@@ -14807,7 +14762,7 @@ var PropertyBase = ({
 };
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-import { jsx as jsx68, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs46 } from "react/jsx-runtime";
 var CheckboxProperty = ({
   value,
   onValueChange,
@@ -14816,15 +14771,15 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx70(
     PropertyBase,
     {
       ...baseProps,
       hasValue: value !== void 0,
       readOnly,
-      icon: /* @__PURE__ */ jsx68(Check3, { size: 24 }),
-      children: () => /* @__PURE__ */ jsxs45("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ jsx68(
+      icon: /* @__PURE__ */ jsx70(Check3, { size: 24 }),
+      children: () => /* @__PURE__ */ jsxs46("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ jsx70(
           Button,
           {
             color: value ? "positive" : "neutral",
@@ -14837,7 +14792,7 @@ var CheckboxProperty = ({
             children: translation("yes")
           }
         ),
-        /* @__PURE__ */ jsx68(
+        /* @__PURE__ */ jsx70(
           Button,
           {
             color: !value && value !== void 0 ? "negative" : "neutral",
@@ -14857,7 +14812,7 @@ var CheckboxProperty = ({
 
 // src/components/user-interaction/properties/DateProperty.tsx
 import { CalendarDays } from "lucide-react";
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var DateProperty = ({
   value,
   onValueChange,
@@ -14867,13 +14822,13 @@ var DateProperty = ({
   ...baseProps
 }) => {
   const hasValue = !!value;
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx71(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ jsx69(CalendarDays, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx69(
+      icon: /* @__PURE__ */ jsx71(CalendarDays, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx71(
         DateTimeInput,
         {
           value,
@@ -14891,7 +14846,129 @@ var DateProperty = ({
 
 // src/components/user-interaction/properties/MultiSelectProperty.tsx
 import { List } from "lucide-react";
-import { jsx as jsx70 } from "react/jsx-runtime";
+
+// src/components/user-interaction/select/MultiSelectChipDisplay.tsx
+import { forwardRef as forwardRef13, useEffect as useEffect34, useImperativeHandle as useImperativeHandle5, useRef as useRef22 } from "react";
+import { XIcon as XIcon2, Plus } from "lucide-react";
+import { jsx as jsx72, jsxs as jsxs47 } from "react/jsx-runtime";
+var MultiSelectChipDisplayButton = forwardRef13(function MultiSelectChipDisplayButton2({
+  id,
+  ...props
+}, ref) {
+  const { state, trigger, item, ids, setIds } = useSelectContext();
+  const { register, unregister, toggleOpen } = trigger;
+  useEffect34(() => {
+    if (id) {
+      setIds((prev) => ({
+        ...prev,
+        trigger: id
+      }));
+    }
+  }, [id, setIds]);
+  const innerRef = useRef22(null);
+  useImperativeHandle5(ref, () => innerRef.current);
+  useEffect34(() => {
+    register(innerRef);
+    return () => unregister();
+  }, [register, unregister]);
+  const disabled = !!props?.disabled || !!state.disabled;
+  const invalid = state.invalid;
+  return /* @__PURE__ */ jsxs47(
+    "div",
+    {
+      ...props,
+      ref: innerRef,
+      onClick: (event) => {
+        toggleOpen();
+        props.onClick?.(event);
+      },
+      "data-name": props["data-name"] ?? "select-button-chips",
+      "data-value": state.value.length > 0 ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0,
+      "aria-invalid": invalid,
+      "aria-disabled": disabled,
+      children: [
+        state.selectedOptions.map(({ value, label }) => /* @__PURE__ */ jsxs47(Chip, { className: "gap-x-2", children: [
+          label,
+          /* @__PURE__ */ jsx72(
+            Button,
+            {
+              onClick: () => {
+                item.toggleSelection(value, false);
+              },
+              size: "xs",
+              color: "negative",
+              coloringStyle: "text",
+              layout: "icon",
+              className: "flex-row-0 items-center",
+              children: /* @__PURE__ */ jsx72(XIcon2, { className: "size-5" })
+            }
+          )
+        ] }, value)),
+        /* @__PURE__ */ jsx72(
+          Button,
+          {
+            id: ids.trigger,
+            onClick: (event) => {
+              event.stopPropagation();
+              toggleOpen();
+            },
+            onKeyDown: (event) => {
+              switch (event.key) {
+                case "ArrowDown":
+                  toggleOpen(true, { highlightStartPositionBehavior: "first" });
+                  break;
+                case "ArrowUp":
+                  toggleOpen(true, { highlightStartPositionBehavior: "last" });
+              }
+            },
+            layout: "icon",
+            size: "sm",
+            color: "neutral",
+            "aria-invalid": invalid,
+            "aria-disabled": disabled,
+            "aria-haspopup": "listbox",
+            "aria-expanded": state.isOpen,
+            "aria-controls": state.isOpen ? ids.content : void 0,
+            className: "size-9",
+            children: /* @__PURE__ */ jsx72(Plus, {})
+          }
+        )
+      ]
+    }
+  );
+});
+var MultiSelectChipDisplay = forwardRef13(function MultiSelectChipDisplay2({
+  children,
+  contentPanelProps,
+  chipDisplayProps,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs47(MultiSelectRoot, { ...props, children: [
+    /* @__PURE__ */ jsx72(MultiSelectChipDisplayButton, { ref, ...chipDisplayProps }),
+    /* @__PURE__ */ jsx72(MultiSelectContent, { ...contentPanelProps, children })
+  ] });
+});
+var MultiSelectChipDisplayUncontrolled = forwardRef13(function MultiSelectChipDisplayUncontrolled2({
+  value: initialValue,
+  onValueChange,
+  ...props
+}, ref) {
+  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
+  return /* @__PURE__ */ jsx72(
+    MultiSelectChipDisplay,
+    {
+      ...props,
+      ref,
+      value,
+      onValueChange: setValue
+    }
+  );
+});
+
+// src/components/user-interaction/properties/MultiSelectProperty.tsx
+import { jsx as jsx73 } from "react/jsx-runtime";
 var MultiSelectProperty = ({
   children,
   value,
@@ -14900,18 +14977,18 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = value.length > 0;
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx73(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx70(List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx70(
+      icon: /* @__PURE__ */ jsx73(List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx73(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ jsx70(
+          children: /* @__PURE__ */ jsx73(
             MultiSelectChipDisplay,
             {
               value,
@@ -14937,7 +15014,7 @@ var MultiSelectProperty = ({
 
 // src/components/user-interaction/properties/NumberProperty.tsx
 import { Binary } from "lucide-react";
-import { jsx as jsx71, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs48 } from "react/jsx-runtime";
 var NumberProperty = ({
   value,
   onRemove,
@@ -14949,20 +15026,20 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx74(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ jsx71(Binary, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsxs46(
+      icon: /* @__PURE__ */ jsx74(Binary, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsxs48(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
           children: [
-            /* @__PURE__ */ jsx71(
+            /* @__PURE__ */ jsx74(
               Input,
               {
                 className: "w-full pr-8",
@@ -14990,7 +15067,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ jsx71(
+            suffix && /* @__PURE__ */ jsx74(
               "span",
               {
                 "data-name": "property-suffix",
@@ -15007,7 +15084,7 @@ var NumberProperty = ({
 
 // src/components/user-interaction/properties/SelectProperty.tsx
 import { List as List2 } from "lucide-react";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var SingleSelectProperty = ({
   children,
   value,
@@ -15016,18 +15093,18 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx75(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx72(List2, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx72(
+      icon: /* @__PURE__ */ jsx75(List2, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx75(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ jsx72(
+          children: /* @__PURE__ */ jsx75(
             Select,
             {
               value,
@@ -15050,7 +15127,7 @@ var SingleSelectProperty = ({
 
 // src/components/user-interaction/properties/TextProperty.tsx
 import { Text } from "lucide-react";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var TextProperty = ({
   value,
   readOnly,
@@ -15061,14 +15138,14 @@ var TextProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx76(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ jsx73(Text, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ jsx73(
+      icon: /* @__PURE__ */ jsx76(Text, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ jsx76(
         Textarea,
         {
           className: "w-full",
@@ -15098,25 +15175,56 @@ var TextProperty = ({
   );
 };
 
+// src/components/user-interaction/select/MultiSelect.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx77, jsxs as jsxs49 } from "react/jsx-runtime";
+var MultiSelect = forwardRef14(function MultiSelect2({
+  children,
+  contentPanelProps,
+  buttonProps,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs49(MultiSelectRoot, { ...props, children: [
+    /* @__PURE__ */ jsx77(MultiSelectButton, { ref, ...buttonProps }),
+    /* @__PURE__ */ jsx77(MultiSelectContent, { ...contentPanelProps, children })
+  ] });
+});
+var MultiSelectUncontrolled = forwardRef14(function MultiSelectUncontrolled2({
+  value: initialValue,
+  onValueChange,
+  ...props
+}, ref) {
+  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
+  return /* @__PURE__ */ jsx77(
+    MultiSelect,
+    {
+      ...props,
+      ref,
+      value,
+      onValueChange: setValue
+    }
+  );
+});
+
 // src/components/utils/FocusTrap.tsx
-import { useRef as useRef21 } from "react";
-import { useImperativeHandle as useImperativeHandle5 } from "react";
-import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx74 } from "react/jsx-runtime";
-var FocusTrap = forwardRef12(function FocusTrap2({
+import { useRef as useRef23 } from "react";
+import { useImperativeHandle as useImperativeHandle6 } from "react";
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx78 } from "react/jsx-runtime";
+var FocusTrap = forwardRef15(function FocusTrap2({
   active = true,
   initialFocus,
   focusFirst = false,
   ...props
 }, forwardedRef) {
-  const innerRef = useRef21(null);
-  useImperativeHandle5(forwardedRef, () => innerRef.current);
+  const innerRef = useRef23(null);
+  useImperativeHandle6(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus, focusFirst });
-  return /* @__PURE__ */ jsx74("div", { ref: innerRef, ...props });
+  return /* @__PURE__ */ jsx78("div", { ref: innerRef, ...props });
 });
 
 // src/components/utils/Transition.tsx
-import { useEffect as useEffect32, useState as useState36 } from "react";
+import { useEffect as useEffect35, useState as useState36 } from "react";
 function Transition({
   children,
   show,
@@ -15125,7 +15233,7 @@ function Transition({
   const [isOpen, setIsOpen] = useState36(show);
   const [isTransitioning, setIsTransitioning] = useState36(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  useEffect32(() => {
+  useEffect35(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -15150,18 +15258,18 @@ function Transition({
 }
 
 // src/contexts/HightideProvider.tsx
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
 var HightideProvider = ({
   children,
   theme,
   locale,
   config
 }) => {
-  return /* @__PURE__ */ jsx75(LocaleProvider, { ...locale, children: /* @__PURE__ */ jsx75(ThemeProvider, { ...theme, children: /* @__PURE__ */ jsx75(HightideConfigProvider, { ...config, children }) }) });
+  return /* @__PURE__ */ jsx79(LocaleProvider, { ...locale, children: /* @__PURE__ */ jsx79(ThemeProvider, { ...theme, children: /* @__PURE__ */ jsx79(HightideConfigProvider, { ...config, children }) }) });
 };
 
 // src/hooks/focus/useFocusGuards.ts
-import { useEffect as useEffect33 } from "react";
+import { useEffect as useEffect36 } from "react";
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -15199,7 +15307,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  useEffect33(() => {
+  useEffect36(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -15208,10 +15316,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-import React6, { useEffect as useEffect34 } from "react";
+import React5, { useEffect as useEffect37 } from "react";
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = React6.useState(false);
-  useEffect34(() => {
+  const [hasUsedFocus, setHasUsedFocus] = React5.useState(false);
+  useEffect37(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -15237,7 +15345,7 @@ var useRerender = () => {
 };
 
 // src/hooks/useSearch.ts
-import { useCallback as useCallback23, useEffect as useEffect35, useMemo as useMemo19, useState as useState37 } from "react";
+import { useCallback as useCallback23, useEffect as useEffect38, useMemo as useMemo19, useState as useState37 } from "react";
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -15286,7 +15394,7 @@ var useSearch = ({
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  useEffect35(() => {
+  useEffect38(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
@@ -15712,9 +15820,14 @@ export {
   MenuItem,
   MultiSearchWithMapping,
   MultiSelect,
+  MultiSelectButton,
   MultiSelectChipDisplay,
+  MultiSelectChipDisplayButton,
   MultiSelectChipDisplayUncontrolled,
+  MultiSelectContent,
+  MultiSelectOption,
   MultiSelectProperty,
+  MultiSelectRoot,
   MultiSelectUncontrolled,
   MultiSubjectSearchWithMapping,
   Navigation,
@@ -15732,8 +15845,8 @@ export {
   SearchBar,
   Select,
   SelectButton,
-  SelectChipDisplay,
   SelectContent,
+  SelectContext,
   SelectOption,
   SelectRoot,
   SelectUncontrolled,
@@ -15822,6 +15935,7 @@ export {
   useRerender,
   useResizeCallbackWrapper,
   useSearch,
+  useSelectContext,
   useTabContext,
   useTheme,
   useTransitionState,