@helpwave/hightide 0.6.2 → 0.6.3

package/dist/index.js

@@ -6323,9 +6323,14 @@ __export(index_exports, {
   MenuItem: () => MenuItem,
   MultiSearchWithMapping: () => MultiSearchWithMapping,
   MultiSelect: () => MultiSelect,
+  MultiSelectButton: () => MultiSelectButton,
   MultiSelectChipDisplay: () => MultiSelectChipDisplay,
+  MultiSelectChipDisplayButton: () => MultiSelectChipDisplayButton,
   MultiSelectChipDisplayUncontrolled: () => MultiSelectChipDisplayUncontrolled,
+  MultiSelectContent: () => MultiSelectContent,
+  MultiSelectOption: () => MultiSelectOption,
   MultiSelectProperty: () => MultiSelectProperty,
+  MultiSelectRoot: () => MultiSelectRoot,
   MultiSelectUncontrolled: () => MultiSelectUncontrolled,
   MultiSubjectSearchWithMapping: () => MultiSubjectSearchWithMapping,
   Navigation: () => Navigation,
@@ -6343,8 +6348,8 @@ __export(index_exports, {
   SearchBar: () => SearchBar,
   Select: () => Select,
   SelectButton: () => SelectButton,
-  SelectChipDisplay: () => SelectChipDisplay,
   SelectContent: () => SelectContent,
+  SelectContext: () => SelectContext,
   SelectOption: () => SelectOption,
   SelectRoot: () => SelectRoot,
   SelectUncontrolled: () => SelectUncontrolled,
@@ -6433,6 +6438,7 @@ __export(index_exports, {
   useRerender: () => useRerender,
   useResizeCallbackWrapper: () => useResizeCallbackWrapper,
   useSearch: () => useSearch,
+  useSelectContext: () => useSelectContext,
   useTabContext: () => useTabContext,
   useTheme: () => useTheme,
   useTransitionState: () => useTransitionState,
@@ -7457,7 +7463,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 = (0, import_react6.useContext)(FormContext);
   const subscribe = (0, import_react6.useCallback)((cb) => {
     if (!context) return () => {
@@ -7472,20 +7478,31 @@ function useFormField(key) {
     subscribe,
     () => context ? context.store.getError(key) : void 0
   );
+  const getDataProps = (0, import_react6.useCallback)(() => {
+    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
 var import_jsx_runtime14 = require("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>");
   }
@@ -7496,7 +7513,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)
+    }
   }) });
 };
 
@@ -7505,6 +7525,7 @@ var FormStore = class {
   constructor({
     initialValues,
     hasTriedSubmitting,
+    submittingTouchesAll = true,
     validators = {},
     validationBehaviour = "touched"
   }) {
@@ -7512,9 +7533,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();
@@ -7526,14 +7554,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) {
@@ -7543,6 +7594,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() {
@@ -7561,7 +7613,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;
@@ -7610,35 +7662,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 } });
   }
 };
 
@@ -7648,6 +7695,8 @@ function useCreateForm({
   onFormSubmit,
   onFormError,
   onValueChange,
+  onUpdate,
+  onValidUpdate,
   initialValues,
   hasTriedSubmitting,
   validators,
@@ -7677,22 +7726,24 @@ function useCreateForm({
   }, []);
   (0, import_react7.useEffect)(() => {
     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) {
@@ -7712,23 +7763,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 = (0, import_react7.useCallback)((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 = (0, import_react7.useMemo)(() => ({
     reset: () => storeRef.current.reset(),
     submit: () => storeRef.current.submit(),
@@ -7749,7 +7795,6 @@ function useCreateForm({
   return {
     store: storeRef.current,
     ...callbacks,
-    getDataProps,
     registerRef
   };
 }
@@ -9507,7 +9552,6 @@ var Expandable = (0, import_react21.forwardRef)(function Expandable2({
   children,
   id,
   label,
-  icon,
   isExpanded,
   onChange,
   clickOnlyOnHeader = true,
@@ -9517,8 +9561,6 @@ var Expandable = (0, import_react21.forwardRef)(function Expandable2({
   contentClassName,
   contentExpandedClassName
 }, ref) {
-  const defaultIcon = (0, import_react21.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
-  const iconBuilder = icon ?? defaultIcon;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     ExpandableRoot,
     {
@@ -9530,10 +9572,7 @@ var Expandable = (0, import_react21.forwardRef)(function Expandable2({
       allowContainerToggle: !clickOnlyOnHeader,
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ExpandableHeader, { className: headerClassName, children: [
-          label,
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ExpandableContext.Consumer, { children: (ctx) => iconBuilder(ctx?.isExpanded ?? false) })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ExpandableHeader, { className: headerClassName, children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ExpandableContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           ExpandableContent,
           {
@@ -9721,9 +9760,9 @@ var FloatingContainer = (0, import_react23.forwardRef)(function FloatingContaine
   screenPadding = 16,
   gap = 4,
   ...props
-}, forwardRef13) {
+}, forwardRef16) {
   const innerRef = (0, import_react23.useRef)(null);
-  (0, import_react23.useImperativeHandle)(forwardRef13, () => innerRef.current);
+  (0, import_react23.useImperativeHandle)(forwardRef16, () => innerRef.current);
   const position = useFloatingElement({
     active: !props.hidden,
     containerRef: innerRef,
@@ -11055,11 +11094,8 @@ var InputDialog = ({
   );
 };
 
-// src/components/user-interaction/Select.tsx
+// src/components/user-interaction/select/SelectContext.tsx
 var import_react34 = require("react");
-var import_clsx13 = __toESM(require("clsx"));
-var import_lucide_react7 = require("lucide-react");
-var import_react_dom5 = require("react-dom");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var defaultToggleOpenOptions = {
   highlightStartPositionBehavior: "first"
@@ -11068,28 +11104,34 @@ var SelectContext = (0, import_react34.createContext)(null);
 function useSelectContext() {
   const ctx = (0, import_react34.useContext)(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 = (0, import_react34.useRef)(null);
   const generatedId = (0, import_react34.useId)();
-  const usedId = id ?? generatedId;
+  const [ids, setIds] = (0, import_react34.useState)({
+    trigger: id ?? (isMultiSelect ? "multi-select-" + generatedId : "select-" + generatedId),
+    content: isMultiSelect ? "multi-select-content-" + generatedId : "select-content-" + generatedId
+  });
   const [internalState, setInternalState] = (0, import_react34.useState)({
-    isOpen,
+    isOpen: initialIsOpen,
     options: []
   });
   const selectedValues = (0, import_react34.useMemo)(
@@ -11102,9 +11144,10 @@ var SelectRoot = ({
   );
   const state = {
     ...internalState,
-    id: usedId,
     disabled,
     invalid,
+    readOnly,
+    required,
     value: selectedValues,
     selectedOptions
   };
@@ -11182,7 +11225,7 @@ var SelectRoot = ({
   const unregisterTrigger = (0, import_react34.useCallback)(() => {
     triggerRef.current = null;
   }, []);
-  const toggleOpen = (isOpen2, toggleOpenOptions) => {
+  const toggleOpen = (isOpen, toggleOpenOptions) => {
     const { highlightStartPositionBehavior } = { ...defaultToggleOpenOptions, ...toggleOpenOptions };
     let firstSelectedValue;
     let firstEnabledValue;
@@ -11198,11 +11241,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);
@@ -11235,6 +11282,8 @@ var SelectRoot = ({
     }
   }, [internalState.highlightedValue]);
   const contextValue = {
+    ids,
+    setIds,
     state,
     config,
     item: {
@@ -11253,14 +11302,52 @@ var SelectRoot = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectContext.Provider, { value: contextValue, children });
 };
-var SelectOption = (0, import_react34.forwardRef)(
+var SelectRoot = ({ value, onValueChange, onEditComplete, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    PrimitveSelectRoot,
+    {
+      ...props,
+      isMultiSelect: false,
+      value,
+      onValueChange: (value2) => {
+        onValueChange?.(value2);
+        onEditComplete?.(value2);
+      }
+    }
+  );
+};
+var MultiSelectRoot = ({ value, onValueChange, onEditComplete, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    PrimitveSelectRoot,
+    {
+      ...props,
+      isMultiSelect: true,
+      values: value,
+      onValuesChange: (values) => {
+        onValueChange?.(values);
+      },
+      onClose: () => {
+        onEditComplete?.(value);
+        props.onClose?.();
+      }
+    }
+  );
+};
+
+// src/components/user-interaction/select/SelectComponents.tsx
+var import_react35 = require("react");
+var import_clsx13 = __toESM(require("clsx"));
+var import_lucide_react7 = require("lucide-react");
+var import_react_dom5 = require("react-dom");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var SelectOption = (0, import_react35.forwardRef)(
   function SelectOption2({ children, value, disabled = false, iconAppearance, className, ...restProps }, ref) {
     const { state, config, item, trigger } = useSelectContext();
     const { register, unregister, toggleSelection, highlightItem } = item;
-    const itemRef = (0, import_react34.useRef)(null);
+    const itemRef = (0, import_react35.useRef)(null);
     iconAppearance ??= config.iconAppearance;
     const label = children ?? value;
-    (0, import_react34.useEffect)(() => {
+    (0, import_react35.useEffect)(() => {
       register({
         value,
         label,
@@ -11271,7 +11358,7 @@ var SelectOption = (0, import_react34.forwardRef)(
     }, [value, disabled, register, unregister, children, label]);
     const isHighlighted = state.highlightedValue === value;
     const isSelected = state.value.includes(value);
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "li",
       {
         ...restProps,
@@ -11310,7 +11397,7 @@ var SelectOption = (0, import_react34.forwardRef)(
           }
         },
         children: [
-          iconAppearance === "left" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          iconAppearance === "left" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             import_lucide_react7.CheckIcon,
             {
               className: (0, import_clsx13.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
@@ -11318,7 +11405,7 @@ var SelectOption = (0, import_react34.forwardRef)(
             }
           ),
           label,
-          iconAppearance === "right" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          iconAppearance === "right" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             import_lucide_react7.CheckIcon,
             {
               className: (0, import_clsx13.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
@@ -11330,25 +11417,38 @@ var SelectOption = (0, import_react34.forwardRef)(
     );
   }
 );
-var SelectButton = (0, import_react34.forwardRef)(function SelectButton2({ placeholder, selectedDisplay, ...props }, ref) {
+var SelectButton = (0, import_react35.forwardRef)(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 = (0, import_react34.useRef)(null);
-  (0, import_react34.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
+    if (id) {
+      setIds((prev) => ({
+        ...prev,
+        trigger: id
+      }));
+    }
+  }, [id, setIds]);
+  const innerRef = (0, import_react35.useRef)(null);
+  (0, import_react35.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react35.useEffect)(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
   const disabled = !!props?.disabled || !!state.disabled;
   const invalid = state.invalid;
   const hasValue = state.value.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "button",
     {
       ...props,
       ref: innerRef,
-      id: state.id,
+      id: ids.trigger,
       disabled,
       type: "button",
       onClick: (event) => {
@@ -11378,29 +11478,188 @@ var SelectButton = (0, import_react34.forwardRef)(function SelectButton2({ place
       "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__ */ (0, import_jsx_runtime34.jsx)("div", { className: (0, import_clsx13.default)("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "flex-row-0", children: [
+        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: (0, import_clsx13.default)("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "flex-row-0", children: [
           label,
-          index < state.value.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: "," })
+          index < state.value.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: "," })
         ] }, value)) }) : placeholder ?? translation("clickToSelect"),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ExpansionIcon, { isExpanded: state.isOpen })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ExpansionIcon, { isExpanded: state.isOpen })
       ]
     }
   );
 });
-var SelectChipDisplay = (0, import_react34.forwardRef)(function SelectChipDisplay2({ ...props }, ref) {
-  const { state, trigger, item } = useSelectContext();
+var SelectContent = (0, import_react35.forwardRef)(function SelectContent2({
+  id,
+  alignment,
+  orientation = "vertical",
+  containerClassName,
+  ...props
+}, ref) {
+  const innerRef = (0, import_react35.useRef)(null);
+  (0, import_react35.useImperativeHandle)(ref, () => innerRef.current);
+  const { trigger, state, config, item, ids, setIds } = useSelectContext();
+  (0, import_react35.useEffect)(() => {
+    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 (0, import_react_dom5.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      "div",
+      {
+        id: ids.content,
+        className: (0, import_clsx13.default)("fixed inset-0 w-screen h-screen", containerClassName),
+        style: { zIndex },
+        hidden: !state.isOpen,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            "div",
+            {
+              onClick: () => trigger.toggleOpen(false),
+              className: (0, import_clsx13.default)("fixed inset-0 w-screen h-screen")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            "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;
+                }
+              },
+              className: (0, import_clsx13.default)("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 MultiSelectOption = SelectOption;
+var MultiSelectContent = SelectContent;
+var MultiSelectButton = SelectButton;
+
+// src/components/user-interaction/select/MultiSelect.tsx
+var import_react36 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var MultiSelect = (0, import_react36.forwardRef)(function MultiSelect2({
+  children,
+  contentPanelProps,
+  buttonProps,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(MultiSelectRoot, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MultiSelectButton, { ref, ...buttonProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MultiSelectContent, { ...contentPanelProps, children })
+  ] });
+});
+var MultiSelectUncontrolled = (0, import_react36.forwardRef)(function MultiSelectUncontrolled2({
+  value: initialValue,
+  onValueChange,
+  ...props
+}, ref) {
+  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    MultiSelect,
+    {
+      ...props,
+      ref,
+      value,
+      onValueChange: setValue
+    }
+  );
+});
+
+// src/components/user-interaction/select/MultiSelectChipDisplay.tsx
+var import_react37 = require("react");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var MultiSelectChipDisplayButton = (0, import_react37.forwardRef)(function MultiSelectChipDisplayButton2({
+  id,
+  ...props
+}, ref) {
+  const { state, trigger, item, ids, setIds } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  const innerRef = (0, import_react34.useRef)(null);
-  (0, import_react34.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
+    if (id) {
+      setIds((prev) => ({
+        ...prev,
+        trigger: id
+      }));
+    }
+  }, [id, setIds]);
+  const innerRef = (0, import_react37.useRef)(null);
+  (0, import_react37.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react37.useEffect)(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
   const disabled = !!props?.disabled || !!state.disabled;
   const invalid = state.invalid;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       ...props,
@@ -11416,9 +11675,9 @@ var SelectChipDisplay = (0, import_react34.forwardRef)(function SelectChipDispla
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       children: [
-        state.selectedOptions.map(({ value, label }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Chip, { className: "gap-x-2", children: [
+        state.selectedOptions.map(({ value, label }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Chip, { className: "gap-x-2", children: [
           label,
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             Button,
             {
               onClick: () => {
@@ -11429,14 +11688,14 @@ var SelectChipDisplay = (0, import_react34.forwardRef)(function SelectChipDispla
               coloringStyle: "text",
               layout: "icon",
               className: "flex-row-0 items-center",
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react7.XIcon, { className: "size-5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react8.XIcon, { className: "size-5" })
             }
           )
         ] }, value)),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           Button,
           {
-            id: state.id,
+            id: ids.trigger,
             onClick: (event) => {
               event.stopPropagation();
               toggleOpen();
@@ -11457,149 +11716,34 @@ var SelectChipDisplay = (0, import_react34.forwardRef)(function SelectChipDispla
             "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,
             className: "size-9",
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react7.Plus, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react8.Plus, {})
           }
         )
       ]
     }
   );
 });
-var SelectContent = (0, import_react34.forwardRef)(
-  function SelectContent2({
-    alignment,
-    orientation = "vertical",
-    containerClassName,
-    ...props
-  }, ref) {
-    const innerRef = (0, import_react34.useRef)(null);
-    (0, import_react34.useImperativeHandle)(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 (0, import_react_dom5.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-        "div",
-        {
-          id: `select-container-${state.id}`,
-          className: (0, import_clsx13.default)("fixed inset-0 w-screen h-screen", containerClassName),
-          style: { zIndex },
-          hidden: !state.isOpen,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-              "div",
-              {
-                id: `select-background-${state.id}`,
-                onClick: () => trigger.toggleOpen(false),
-                className: (0, import_clsx13.default)("fixed inset-0 w-screen h-screen")
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-              "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: (0, import_clsx13.default)("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 = (0, import_react34.forwardRef)(function Select2({
+var MultiSelectChipDisplay = (0, import_react37.forwardRef)(function MultiSelectChipDisplay2({
   children,
   contentPanelProps,
-  buttonProps,
+  chipDisplayProps,
   ...props
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(SelectRoot, { ...props, isMultiSelect: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      SelectButton,
-      {
-        ref,
-        ...buttonProps,
-        selectedDisplay: (values) => {
-          const value = values[0];
-          if (!buttonProps?.selectedDisplay) return void 0;
-          return buttonProps.selectedDisplay(value);
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectContent, { ...contentPanelProps, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(MultiSelectRoot, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MultiSelectChipDisplayButton, { ref, ...chipDisplayProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MultiSelectContent, { ...contentPanelProps, children })
   ] });
 });
-var SelectUncontrolled = (0, import_react34.forwardRef)(function SelectUncontrolled2({
+var MultiSelectChipDisplayUncontrolled = (0, import_react37.forwardRef)(function MultiSelectChipDisplayUncontrolled2({
   value: initialValue,
   onValueChange,
   ...props
 }, ref) {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    Select,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    MultiSelectChipDisplay,
     {
       ...props,
       ref,
@@ -11608,56 +11752,40 @@ var SelectUncontrolled = (0, import_react34.forwardRef)(function SelectUncontrol
     }
   );
 });
-var MultiSelect = (0, import_react34.forwardRef)(function MultiSelect2({
+
+// src/components/user-interaction/select/Select.tsx
+var import_react38 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Select = (0, import_react38.forwardRef)(function Select2({
   children,
-  value,
-  onValueChange,
   contentPanelProps,
   buttonProps,
   ...props
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(SelectRoot, { ...props, values: value, onValuesChange: onValueChange, isMultiSelect: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectButton, { ref, ...buttonProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectContent, { ...contentPanelProps, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(SelectRoot, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      SelectButton,
+      {
+        ref,
+        ...buttonProps,
+        selectedDisplay: (values) => {
+          const value = values[0];
+          if (!buttonProps?.selectedDisplay) return void 0;
+          return buttonProps.selectedDisplay(value);
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var MultiSelectUncontrolled = (0, import_react34.forwardRef)(function MultiSelectUncontrolled2({
+var SelectUncontrolled = (0, import_react38.forwardRef)(function SelectUncontrolled2({
   value: initialValue,
   onValueChange,
   ...props
 }, ref) {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    MultiSelect,
-    {
-      ...props,
-      ref,
-      value,
-      onValueChange: setValue
-    }
-  );
-});
-var MultiSelectChipDisplay = (0, import_react34.forwardRef)(function MultiSelectChipDisplay2({
-  children,
-  value,
-  onValueChange,
-  contentPanelProps,
-  chipDisplayProps,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(SelectRoot, { ...props, values: value, onValuesChange: onValueChange, isMultiSelect: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectChipDisplay, { ref, ...chipDisplayProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectContent, { ...contentPanelProps, children })
-  ] });
-});
-var MultiSelectChipDisplayUncontrolled = (0, import_react34.forwardRef)(function MultiSelectChipDisplayUncontrolled2({
-  value: initialValue,
-  onValueChange,
-  ...props
-}, ref) {
-  const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    MultiSelectChipDisplay,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    Select,
     {
       ...props,
       ref,
@@ -11668,7 +11796,7 @@ var MultiSelectChipDisplayUncontrolled = (0, import_react34.forwardRef)(function
 });
 
 // src/components/layout/dialog/LanguageDialog.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var LanguageDialog = ({
   onClose,
   titleOverwrite,
@@ -11677,15 +11805,15 @@ var LanguageDialog = ({
 }) => {
   const { locale, setLocale } = useLocale();
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     Dialog,
     {
       titleElement: titleOverwrite ?? translation("language"),
       description: descriptionOverwrite ?? translation("chooseLanguage"),
       onClose,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "w-64", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "w-64", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           Select,
           {
             value: locale,
@@ -11693,27 +11821,27 @@ var LanguageDialog = ({
             buttonProps: {
               selectedDisplay: (locale2) => LocalizationUtil.languagesLocalNames[locale2]
             },
-            children: LocalizationUtil.locals.map((local) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectOption, { value: local, children: LocalizationUtil.languagesLocalNames[local] }, local))
+            children: LocalizationUtil.locals.map((local) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SelectOption, { value: local, children: LocalizationUtil.languagesLocalNames[local] }, local))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
 };
 
 // src/components/layout/dialog/ThemeDialog.tsx
-var import_lucide_react8 = require("lucide-react");
+var import_lucide_react9 = require("lucide-react");
 var import_clsx14 = __toESM(require("clsx"));
 
 // src/contexts/ThemeContext.tsx
-var import_react35 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react39 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var themes = ["light", "dark", "system"];
 var ThemeUtil = {
   themes
 };
-var ThemeContext = (0, import_react35.createContext)(null);
+var ThemeContext = (0, import_react39.createContext)(null);
 var ThemeProvider = ({ children, theme, initialTheme }) => {
   const {
     value: storedTheme,
@@ -11721,8 +11849,8 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     deleteValue: deleteStoredTheme
   } = useLocalStorage("theme", "system");
   const { config } = useHightideConfig();
-  const [themePreference, setThemePreference] = (0, import_react35.useState)("system");
-  const resolvedTheme = (0, import_react35.useMemo)(() => {
+  const [themePreference, setThemePreference] = (0, import_react39.useState)("system");
+  const resolvedTheme = (0, import_react39.useMemo)(() => {
     if (theme && theme !== "system") {
       return theme;
     }
@@ -11734,7 +11862,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
     }
     return initialTheme ?? config.theme.initialTheme;
   }, [config.theme.initialTheme, initialTheme, storedTheme, theme, themePreference]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!theme) return;
     if (theme === "system") {
       deleteStoredTheme();
@@ -11742,18 +11870,18 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
       setStoredTheme(theme);
     }
   }, [theme]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     document.documentElement.setAttribute("data-theme", resolvedTheme);
   }, [resolvedTheme]);
-  const getPreference = (0, import_react35.useCallback)(() => {
+  const getPreference = (0, import_react39.useCallback)(() => {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
     setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
   }, []);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     getPreference();
   }, [getPreference]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     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)");
@@ -11766,7 +11894,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
       noPrefQuery.removeEventListener("change", getPreference);
     };
   }, [getPreference]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     ThemeContext.Provider,
     {
       value: {
@@ -11784,7 +11912,7 @@ var ThemeProvider = ({ children, theme, initialTheme }) => {
   );
 };
 var useTheme = () => {
-  const context = (0, import_react35.useContext)(ThemeContext);
+  const context = (0, import_react39.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
   }
@@ -11792,14 +11920,14 @@ var useTheme = () => {
 };
 
 // src/components/layout/dialog/ThemeDialog.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var ThemeIcon = ({ theme, className }) => {
   if (theme === "dark") {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react8.MoonIcon, { className: (0, import_clsx14.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react9.MoonIcon, { className: (0, import_clsx14.default)("w-4 h-4", className) });
   } else if (theme === "light") {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react8.SunIcon, { className: (0, import_clsx14.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react9.SunIcon, { className: (0, import_clsx14.default)("w-4 h-4", className) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react8.MonitorCog, { className: (0, import_clsx14.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react9.MonitorCog, { className: (0, import_clsx14.default)("w-4 h-4", className) });
   }
 };
 var ThemeDialog = ({
@@ -11810,67 +11938,67 @@ var ThemeDialog = ({
 }) => {
   const { theme, setTheme } = useTheme();
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     Dialog,
     {
       titleElement: titleOverwrite ?? translation("pThemes", { count: 1 }),
       description: descriptionOverwrite ?? translation("chooseTheme"),
       onClose,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "w-64", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "w-64", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           Select,
           {
             value: theme,
             onValueChange: (theme2) => setTheme(theme2),
             iconAppearance: "right",
             buttonProps: {
-              selectedDisplay: (value) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-row-2 items-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ThemeIcon, { theme }),
+              selectedDisplay: (value) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex-row-2 items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ThemeIcon, { theme }),
                 translation("sThemeMode", { theme: value })
               ] }),
               className: "min-w-32"
             },
-            children: ThemeUtil.themes.map((theme2) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectOption, { value: theme2, className: "gap-x-6 justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-row-2 items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ThemeIcon, { theme: theme2 }),
+            children: ThemeUtil.themes.map((theme2) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectOption, { value: theme2, className: "gap-x-6 justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex-row-2 items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ThemeIcon, { theme: theme2 }),
               translation("sThemeMode", { theme: theme2 })
             ] }) }, theme2))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
 };
 
 // src/components/layout/loading/ErrorComponent.tsx
-var import_lucide_react9 = require("lucide-react");
+var import_lucide_react10 = require("lucide-react");
 var import_clsx15 = __toESM(require("clsx"));
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var ErrorComponent = ({
   errorText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: (0, import_clsx15.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react9.AlertOctagon, { size: 64, className: "text-warning" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: (0, import_clsx15.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react10.AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
 };
 
 // src/components/layout/loading/LoadingAndErrorComponent.tsx
-var import_react36 = require("react");
+var import_react40 = require("react");
 
 // src/components/layout/loading/LoadingContainer.tsx
 var import_clsx16 = require("clsx");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var LoadingContainer = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: (0, import_clsx16.clsx)("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: (0, import_clsx16.clsx)("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
 };
 
 // src/components/layout/loading/LoadingAndErrorComponent.tsx
 var import_clsx17 = require("clsx");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
@@ -11880,8 +12008,8 @@ var LoadingAndErrorComponent = ({
   minimumLoadingDuration = 200,
   className
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react36.useState)(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react36.useState)(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react40.useState)(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react40.useState)(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -11890,33 +12018,33 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LoadingContainer, { className: (0, import_clsx17.clsx)(className) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children: loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(LoadingContainer, { className: (0, import_clsx17.clsx)(className) }) });
   }
   if (hasError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LoadingContainer, { className: (0, import_clsx17.clsx)("bg-negative", className) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children: errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(LoadingContainer, { className: (0, import_clsx17.clsx)("bg-negative", className) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children });
 };
 
 // src/components/layout/loading/LoadingAnimation.tsx
 var import_clsx18 = __toESM(require("clsx"));
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var LoadingAnimation = ({
   loadingText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: (0, import_clsx18.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(HelpwaveLogo, { animate: "loading" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: (0, import_clsx18.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(HelpwaveLogo, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
 };
 
 // src/components/layout/navigation/BreadCrumbs.tsx
 var import_link = __toESM(require_link2());
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var BreadCrumbLink = ({ ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     import_link.default,
     {
       ...props,
@@ -11925,29 +12053,29 @@ var BreadCrumbLink = ({ ...props }) => {
   );
 };
 var BreadCrumbDivider = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "data-name": "breadcrumb-divider", children: "/" });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { "data-name": "breadcrumb-divider", children: "/" });
 };
 var BreadCrumbGroup = ({ children, divider, ...props }) => {
   const items = ArrayUtil.resolveSingleOrArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { ...props, "data-name": props["data-name"] ?? "breadcrumb", children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("ul", { ...props, "data-name": props["data-name"] ?? "breadcrumb", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { "data-name": "breadcrumb-item", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("li", { "data-name": "breadcrumb-item", children: [
       item,
-      !isLast && divider !== null && (divider ?? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(BreadCrumbDivider, {}))
+      !isLast && divider !== null && (divider ?? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(BreadCrumbDivider, {}))
     ] }, index);
   }) });
 };
 var BreadCrumbs = ({ crumbs }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(BreadCrumbGroup, { children: crumbs.map(({ href, label }, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(BreadCrumbLink, { href, children: label }, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(BreadCrumbGroup, { children: crumbs.map(({ href, label }, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(BreadCrumbLink, { href, children: label }, index)) });
 };
 
 // src/components/layout/navigation/Navigation.tsx
-var import_lucide_react10 = require("lucide-react");
-var import_react37 = require("react");
-var import_react38 = require("react");
+var import_lucide_react11 = require("lucide-react");
+var import_react41 = require("react");
+var import_react42 = require("react");
 var import_link2 = __toESM(require_link2());
 var import_clsx19 = __toESM(require("clsx"));
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
 }
@@ -11957,10 +12085,10 @@ var NavigationItemWithSubItem = ({
   horizontalAlignment = "center",
   ...options
 }) => {
-  const [isOpen, setOpen] = (0, import_react38.useState)(false);
-  const containerRef = (0, import_react38.useRef)(null);
-  const triggerRef = (0, import_react38.useRef)(null);
-  const id = (0, import_react38.useId)();
+  const [isOpen, setOpen] = (0, import_react42.useState)(false);
+  const containerRef = (0, import_react42.useRef)(null);
+  const triggerRef = (0, import_react42.useRef)(null);
+  const id = (0, import_react42.useId)();
   const style = useFloatingElement({
     active: isOpen,
     containerRef,
@@ -11968,15 +12096,15 @@ var NavigationItemWithSubItem = ({
     horizontalAlignment,
     ...options
   });
-  const onBlur = (0, import_react38.useCallback)((event) => {
+  const onBlur = (0, import_react42.useCallback)((event) => {
     const nextFocus = event.relatedTarget;
     if (!containerRef.current?.contains(nextFocus) && !triggerRef.current?.contains(nextFocus)) {
       setOpen(false);
     }
   }, []);
   const { zIndex } = useOverlayRegistry();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "button",
       {
         id: "navigation-" + id,
@@ -11992,11 +12120,11 @@ var NavigationItemWithSubItem = ({
         "aria-controls": "navigation-items-" + id,
         children: [
           label,
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ExpansionIcon, { isExpanded: isOpen })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ExpansionIcon, { isExpanded: isOpen })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "ul",
       {
         id: "navigation-items-" + id,
@@ -12015,7 +12143,7 @@ var NavigationItemWithSubItem = ({
           { "opacity-0": !style }
         ),
         style: { ...style, zIndex },
-        children: items.map(({ link, label: label2, external }, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        children: items.map(({ link, label: label2, external }, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           import_link2.default,
           {
             href: link,
@@ -12029,25 +12157,25 @@ var NavigationItemWithSubItem = ({
   ] });
 };
 var NavigationItemList = ({ items, ...restProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { ...restProps, className: (0, import_clsx19.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("ul", { ...restProps, className: (0, import_clsx19.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
-  const [isMobileOpen, setIsMobileOpen] = (0, import_react38.useState)(false);
-  const id = (0, import_react38.useId)();
-  const menuRef = (0, import_react38.useRef)(null);
-  (0, import_react37.useEffect)(() => {
+  const [isMobileOpen, setIsMobileOpen] = (0, import_react42.useState)(false);
+  const id = (0, import_react42.useId)();
+  const menuRef = (0, import_react42.useRef)(null);
+  (0, import_react41.useEffect)(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
   const { zIndex } = useOverlayRegistry({ isActive: isMobileOpen });
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("nav", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("nav", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       NavigationItemList,
       {
         ...props,
         className: (0, import_clsx19.default)("hidden", { "desktop:flex": !isMobileOpen }, props.className)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       Button,
       {
         layout: "icon",
@@ -12058,10 +12186,10 @@ var Navigation = ({ ...props }) => {
         "aria-haspopup": "true",
         "aria-expanded": isMobileOpen,
         "aria-controls": "navigation-menu-" + id,
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react10.Menu, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react11.Menu, { className: "w-6 h-6" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "div",
       {
         id: "navigation-menu-" + id,
@@ -12083,17 +12211,17 @@ var Navigation = ({ ...props }) => {
         ),
         style: { zIndex },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             Button,
             {
               layout: "icon",
               coloringStyle: "text",
               color: "neutral",
               onClick: () => setIsMobileOpen(false),
-              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react10.XIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react11.XIcon, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemList, { ...props, className: (0, import_clsx19.default)("flex-col-8", props.className) })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NavigationItemList, { ...props, className: (0, import_clsx19.default)("flex-col-8", props.className) })
         ]
       }
     )
@@ -12101,10 +12229,10 @@ var Navigation = ({ ...props }) => {
 };
 
 // src/components/layout/navigation/Pagination.tsx
-var import_lucide_react11 = require("lucide-react");
+var import_lucide_react12 = require("lucide-react");
 var import_clsx20 = __toESM(require("clsx"));
-var import_react39 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_react43 = require("react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var Pagination = ({
   pageIndex,
   pageCount,
@@ -12113,11 +12241,11 @@ var Pagination = ({
   style
 }) => {
   const translation = useHightideTranslation();
-  const [value, setValue] = (0, import_react39.useState)((pageIndex + 1).toString());
+  const [value, setValue] = (0, import_react43.useState)((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -12127,8 +12255,8 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_clsx20.default)("flex-row-1", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: (0, import_clsx20.default)("flex-row-1", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       Button,
       {
         layout: "icon",
@@ -12136,10 +12264,10 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(0),
         disabled: onFirstPage || noPages,
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react11.ChevronFirst, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react12.ChevronFirst, {})
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       Button,
       {
         layout: "icon",
@@ -12147,11 +12275,11 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(pageIndex - 1),
         disabled: onFirstPage || noPages,
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react11.ChevronLeft, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react12.ChevronLeft, {})
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         Input,
         {
           value,
@@ -12175,8 +12303,8 @@ var Pagination = ({
           editCompleteOptions: { delay: 800 }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "select-none w-10", children: translation("of") }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "select-none w-10", children: translation("of") }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         "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",
@@ -12184,7 +12312,7 @@ var Pagination = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       Button,
       {
         layout: "icon",
@@ -12192,10 +12320,10 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(pageIndex + 1),
         disabled: onLastPage || noPages,
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react11.ChevronRight, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react12.ChevronRight, {})
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       Button,
       {
         layout: "icon",
@@ -12203,16 +12331,16 @@ var Pagination = ({
         color: "neutral",
         onClick: () => changePage(pageCount - 1),
         disabled: onLastPage || noPages,
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react11.ChevronLast, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react12.ChevronLast, {})
       }
     )
   ] });
 };
 
 // src/components/layout/navigation/StepperBar.tsx
-var import_lucide_react12 = require("lucide-react");
+var import_lucide_react13 = require("lucide-react");
 var import_clsx21 = __toESM(require("clsx"));
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var defaultState = {
   currentStep: 0,
   seenSteps: /* @__PURE__ */ new Set([0])
@@ -12234,12 +12362,12 @@ var StepperBar = ({
     seenSteps.add(newStep);
     onChange({ currentStep: newStep, seenSteps });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
       className: (0, import_clsx21.default)("flex-row-2 justify-between", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
           Button,
           {
             disabled: currentStep === 0 || disabledSteps.has(currentStep),
@@ -12248,14 +12376,14 @@ var StepperBar = ({
             },
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react12.ChevronLeft, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react13.ChevronLeft, { size: 14 }),
               translation("back")
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
           const seen = seenSteps.has(index);
-          return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "div",
             {
               onClick: () => seen && update(index),
@@ -12275,7 +12403,7 @@ var StepperBar = ({
             index
           );
         }) }),
-        currentStep !== numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        currentStep !== numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
           Button,
           {
             onClick: () => update(currentStep + 1),
@@ -12283,18 +12411,18 @@ var StepperBar = ({
             disabled: disabledSteps.has(currentStep),
             children: [
               translation("next"),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react12.ChevronRight, { size: 14 })
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react13.ChevronRight, { size: 14 })
             ]
           }
         ) }),
-        currentStep === numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        currentStep === numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
           Button,
           {
             disabled: disabledSteps.has(currentStep),
             onClick: onFinish,
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react12.Check, { size: 14 }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react13.Check, { size: 14 }),
               finishText ?? translation("confirm")
             ]
           }
@@ -12305,7 +12433,7 @@ var StepperBar = ({
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
   const [usedState, setUsedState] = useOverwritableState(state, onChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     StepperBar,
     {
       ...props,
@@ -12316,15 +12444,15 @@ var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
 };
 
 // src/components/layout/table/FillerCell.tsx
-var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var FillerCell = ({ ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "div",
     {
       ...props,
       "data-name": PropsUtil.dataAttributes.name("table-filler-cell"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react13.Minus, { className: "max-w-4 max-h-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react14.Minus, { className: "max-w-4 max-h-4" })
     }
   );
 };
@@ -12344,24 +12472,24 @@ var TableFilters = {
 };
 
 // src/components/layout/table/Table.tsx
-var import_react47 = require("react");
+var import_react51 = require("react");
 var import_clsx26 = __toESM(require("clsx"));
 var import_react_table = require("@tanstack/react-table");
 
 // src/components/layout/table/TableCell.tsx
 var import_clsx22 = require("clsx");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: (0, import_clsx22.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: (0, import_clsx22.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-var import_react40 = require("react");
+var import_react44 = require("react");
 var useResizeCallbackWrapper = (callback) => {
-  (0, import_react40.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -12370,14 +12498,14 @@ var useResizeCallbackWrapper = (callback) => {
 };
 
 // src/components/layout/table/TableSortButton.tsx
-var import_lucide_react14 = require("lucide-react");
+var import_lucide_react15 = require("lucide-react");
 var import_clsx24 = __toESM(require("clsx"));
 
 // src/components/user-interaction/Tooltip.tsx
-var import_react41 = require("react");
+var import_react45 = require("react");
 var import_clsx23 = require("clsx");
 var import_react_dom6 = require("react-dom");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var Tooltip = ({
   tooltip,
   children,
@@ -12388,52 +12516,52 @@ var Tooltip = ({
   position = "bottom",
   disabled = false
 }) => {
-  const [state, setState] = (0, import_react41.useState)({
+  const [state, setState] = (0, import_react45.useState)({
     isShown: false,
     timer: null
   });
   const { config } = useHightideConfig();
-  const appearDelay = (0, import_react41.useMemo)(
+  const appearDelay = (0, import_react45.useMemo)(
     () => appearDelayOverwrite ?? config.tooltip.appearDelay,
     [config.tooltip.appearDelay, appearDelayOverwrite]
   );
-  const disappearDelay = (0, import_react41.useMemo)(
+  const disappearDelay = (0, import_react45.useMemo)(
     () => disappearDelayOverwrite ?? config.tooltip.disappearDelay,
     [config.tooltip.disappearDelay, disappearDelayOverwrite]
   );
-  const anchorRef = (0, import_react41.useRef)(null);
-  const containerRef = (0, import_react41.useRef)(null);
-  const triangleRef = (0, import_react41.useRef)(null);
+  const anchorRef = (0, import_react45.useRef)(null);
+  const containerRef = (0, import_react45.useRef)(null);
+  const triangleRef = (0, import_react45.useRef)(null);
   const isActive = !disabled && state.isShown;
   const { isVisible, transitionState, callbacks } = useTransitionState(
-    (0, import_react41.useMemo)(() => ({ isOpen: isActive }), [isActive])
+    (0, import_react45.useMemo)(() => ({ isOpen: isActive }), [isActive])
   );
-  const verticalAlignment = (0, import_react41.useMemo)(
+  const verticalAlignment = (0, import_react45.useMemo)(
     () => position === "top" ? "beforeStart" : position === "bottom" ? "afterEnd" : "center",
     [position]
   );
-  const horizontalAlignment = (0, import_react41.useMemo)(
+  const horizontalAlignment = (0, import_react45.useMemo)(
     () => position === "left" ? "beforeStart" : position === "right" ? "afterEnd" : "center",
     [position]
   );
-  const css = useFloatingElement((0, import_react41.useMemo)(() => ({
+  const css = useFloatingElement((0, import_react45.useMemo)(() => ({
     active: isActive || isVisible,
     anchorRef,
     containerRef,
     horizontalAlignment,
     verticalAlignment
   }), [horizontalAlignment, isActive, isVisible, verticalAlignment]));
-  const cssTriangle = useFloatingElement((0, import_react41.useMemo)(() => ({
+  const cssTriangle = useFloatingElement((0, import_react45.useMemo)(() => ({
     active: isActive || isVisible,
     anchorRef,
     containerRef: triangleRef,
     horizontalAlignment,
     verticalAlignment
   }), [horizontalAlignment, isActive, isVisible, verticalAlignment]));
-  const regsitryOptions = (0, import_react41.useMemo)(() => ({ isActive }), [isActive]);
+  const regsitryOptions = (0, import_react45.useMemo)(() => ({ isActive }), [isActive]);
   const { zIndex } = useOverlayRegistry(regsitryOptions);
   const { zIndex: zIndexTriangle } = useOverlayRegistry(regsitryOptions);
-  const onEnter = (0, import_react41.useCallback)(() => {
+  const onEnter = (0, import_react45.useCallback)(() => {
     setState((prevState) => {
       if (prevState.isShown) {
         clearTimeout(prevState.timer);
@@ -12453,7 +12581,7 @@ var Tooltip = ({
       };
     });
   }, [appearDelay]);
-  const onLeave = (0, import_react41.useCallback)(() => {
+  const onLeave = (0, import_react45.useCallback)(() => {
     setState((prevState) => {
       if (!prevState.isShown) {
         clearTimeout(prevState.timer);
@@ -12474,7 +12602,7 @@ var Tooltip = ({
       };
     });
   }, [disappearDelay]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "div",
     {
       ref: anchorRef,
@@ -12483,9 +12611,9 @@ var Tooltip = ({
       onPointerLeave: onLeave,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Visibility, { isVisible: isActive || isVisible, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Visibility, { isVisible: isActive || isVisible, children: [
           (0, import_react_dom6.createPortal)(
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               "div",
               {
                 ref: containerRef,
@@ -12501,7 +12629,7 @@ var Tooltip = ({
             document.body
           ),
           (0, import_react_dom6.createPortal)(
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               "div",
               {
                 ref: triangleRef,
@@ -12520,7 +12648,7 @@ var Tooltip = ({
 };
 
 // src/components/layout/table/TableSortButton.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var TableSortButton = ({
   sortDirection,
   invert = false,
@@ -12532,16 +12660,16 @@ var TableSortButton = ({
 }) => {
   const translation = useHightideTranslation();
   const { sortingsCount, index } = sortingIndexDisplay;
-  let icon = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react14.ChevronsUpDown, { className: "size-4" });
+  let icon = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react15.ChevronsUpDown, { className: "size-4" });
   if (sortDirection) {
     let usedSortDirection = sortDirection;
     if (invert) {
       usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
     }
-    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react14.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react14.ChevronDown, { className: "size-4" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react15.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react15.ChevronDown, { className: "size-4" });
   }
   const hasSortingIndex = !!sortingIndexDisplay && sortingsCount > 1 && index > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Tooltip, { tooltip: translation("rSortingOrderAfter", { otherSortings: index - 1 }), disabled: !hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Tooltip, { tooltip: translation("rSortingOrderAfter", { otherSortings: index - 1 }), disabled: !hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     Button,
     {
       layout: hasSortingIndex ? "default" : "icon",
@@ -12550,7 +12678,7 @@ var TableSortButton = ({
       className: (0, import_clsx24.default)("relative", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "div",
           {
             className: (0, import_clsx24.default)("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"),
@@ -12564,10 +12692,10 @@ var TableSortButton = ({
 };
 
 // src/components/layout/table/TableFilterButton.tsx
-var import_lucide_react15 = require("lucide-react");
+var import_lucide_react16 = require("lucide-react");
 
 // src/components/user-interaction/Menu.tsx
-var import_react44 = require("react");
+var import_react48 = require("react");
 var import_clsx25 = __toESM(require("clsx"));
 
 // src/utils/bagFunctions.ts
@@ -12639,15 +12767,15 @@ var usePopoverPosition = (trigger, options) => {
 };
 
 // src/hooks/useHoverState.ts
-var import_react42 = require("react");
+var import_react46 = require("react");
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
 };
 var useHoverState = (props = void 0) => {
   const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = (0, import_react42.useState)(false);
-  const [timer, setTimer] = (0, import_react42.useState)();
+  const [isHovered, setIsHovered] = (0, import_react46.useState)(false);
+  const [timer, setTimer] = (0, import_react46.useState)();
   const onMouseEnter = () => {
     if (isDisabled) {
       return;
@@ -12663,14 +12791,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  (0, import_react42.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  (0, import_react42.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -12683,9 +12811,9 @@ var useHoverState = (props = void 0) => {
 };
 
 // src/hooks/useOutsideClick.ts
-var import_react43 = require("react");
+var import_react47 = require("react");
 var useOutsideClick = (refs, handler) => {
-  (0, import_react43.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -12703,14 +12831,14 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-interaction/Menu.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   isDisabled = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
   "div",
   {
     className: (0, import_clsx25.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
@@ -12743,10 +12871,10 @@ var Menu = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = (0, import_react44.useRef)(null);
-  const menuRef = (0, import_react44.useRef)(null);
+  const triggerRef = (0, import_react48.useRef)(null);
+  const menuRef = (0, import_react48.useRef)(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = (0, import_react44.useState)(true);
+  const [isHidden, setIsHidden] = (0, import_react48.useState)(true);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -12757,7 +12885,7 @@ var Menu = ({
     triggerRef.current?.getBoundingClientRect(),
     { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
   );
-  (0, import_react44.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (!isOpen) return;
     const triggerEl = triggerRef.current;
     if (!triggerEl) return;
@@ -12774,7 +12902,7 @@ var Menu = ({
       window.removeEventListener("resize", close3);
     };
   }, [isOpen, setIsOpen]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (isOpen) {
       setIsHidden(false);
     }
@@ -12782,9 +12910,9 @@ var Menu = ({
   const { zIndex } = useOverlayRegistry({
     isActive: isOpen
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-    trigger(bag, (0, import_react44.useCallback)((el) => triggerRef.current = el, [])),
-    (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+    trigger(bag, (0, import_react48.useCallback)((el) => triggerRef.current = el, [])),
+    (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "div",
       {
         ref: menuRef,
@@ -12814,34 +12942,34 @@ var Menu = ({
 };
 
 // src/components/layout/table/TableFilterButton.tsx
-var import_react45 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_react49 = require("react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var TableFilterButton = ({
   filterType,
   column
 }) => {
   const translation = useHightideTranslation();
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react45.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react49.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  (0, import_react45.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     Menu,
     {
-      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           Button,
           {
             layout: "icon",
             color: "neutral",
             size: "xs",
             onClick: toggleOpen,
-            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react15.FilterIcon, { className: "size-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react16.FilterIcon, { className: "size-4" })
           }
         ),
-        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        hasFilter && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "div",
           {
             className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
@@ -12849,9 +12977,9 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close: close3 }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
-        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      children: ({ close: close3 }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           Input,
           {
             value: filterValue ?? "",
@@ -12861,8 +12989,8 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex-row-2 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex-row-2 items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             Input,
             {
               value: filterValue?.[0].toString() ?? "",
@@ -12875,8 +13003,8 @@ var TableFilterButton = ({
               className: "h-10 input-indicator-hidden w-40"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "font-bold", children: "-" }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             Input,
             {
               value: filterValue?.[1].toString() ?? "",
@@ -12890,8 +13018,8 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        filterType === "dateRange" && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             Input,
             {
               value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
@@ -12904,7 +13032,7 @@ var TableFilterButton = ({
               className: "h-10 w-50"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             Input,
             {
               value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
@@ -12918,12 +13046,12 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { color: "negative", size: "sm", onClick: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
+          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, { color: "negative", size: "sm", onClick: () => {
             column.setFilterValue(void 0);
             close3();
           }, children: translation("remove") }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { size: "sm", onClick: () => {
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, { size: "sm", onClick: () => {
             column.setFilterValue(filterValue);
             close3();
           }, children: translation("apply") })
@@ -12934,9 +13062,9 @@ var TableFilterButton = ({
 };
 
 // src/components/user-interaction/Checkbox.tsx
-var import_lucide_react16 = require("lucide-react");
-var import_react46 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_lucide_react17 = require("lucide-react");
+var import_react50 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var Checkbox = ({
   value = false,
   indeterminate = false,
@@ -12950,11 +13078,11 @@ var Checkbox = ({
   alwaysShowCheckIcon = false,
   ...props
 }) => {
-  const onChangeWrapper = (0, import_react46.useCallback)(() => {
+  const onChangeWrapper = (0, import_react50.useCallback)(() => {
     onValueChange?.(!value);
     onEditComplete?.(!value);
   }, [onEditComplete, onValueChange, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "div",
     {
       ...props,
@@ -12981,8 +13109,8 @@ var Checkbox = ({
       "aria-checked": indeterminate ? "mixed" : value,
       ...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react16.Minus, { "data-name": "checkbox-indicator", "aria-hidden": true }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react16.Check, { "data-name": "checkbox-indicator", "aria-hidden": true }) })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react17.Minus, { "data-name": "checkbox-indicator", "aria-hidden": true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react17.Check, { "data-name": "checkbox-indicator", "aria-hidden": true }) })
       ]
     }
   );
@@ -12993,7 +13121,7 @@ var CheckboxUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     Checkbox,
     {
       ...props,
@@ -13004,7 +13132,7 @@ var CheckboxUncontrolled = ({
 };
 
 // src/components/layout/table/Table.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var Table = ({
   data,
   fillerRow,
@@ -13018,22 +13146,22 @@ var Table = ({
   columns,
   ...tableOptions
 }) => {
-  const ref = (0, import_react47.useRef)(null);
-  const tableRef = (0, import_react47.useRef)(null);
-  const [columnSizing, setColumnSizing] = (0, import_react47.useState)(columns.reduce((previousValue, currentValue) => {
+  const ref = (0, import_react51.useRef)(null);
+  const tableRef = (0, import_react51.useRef)(null);
+  const [columnSizing, setColumnSizing] = (0, import_react51.useState)(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react47.useState)();
-  const [pagination, setPagination] = (0, import_react47.useState)({
+  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react51.useState)();
+  const [pagination, setPagination] = (0, import_react51.useState)({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = (0, import_react47.useState)(initialState?.columnFilters);
-  const computedColumnMinWidths = (0, import_react47.useMemo)(() => {
+  const [columnFilters, setColumnFilters] = (0, import_react51.useState)(initialState?.columnFilters);
+  const computedColumnMinWidths = (0, import_react51.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -13042,7 +13170,7 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const computedColumnMaxWidths = (0, import_react47.useMemo)(() => {
+  const computedColumnMaxWidths = (0, import_react51.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -13050,12 +13178,12 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const tableMinWidth = (0, import_react47.useMemo)(() => {
+  const tableMinWidth = (0, import_react51.useMemo)(() => {
     return columns.reduce((sum, column) => {
       return sum + computedColumnMinWidths[column.id];
     }, 0);
   }, [columns, computedColumnMinWidths]);
-  const updateColumnSizes = (0, import_react47.useMemo)(() => {
+  const updateColumnSizes = (0, import_react51.useMemo)(() => {
     return (previous) => {
       const updateSizing = {
         ...columnSizing,
@@ -13124,7 +13252,7 @@ var Table = ({
       minSize: 60,
       maxSize: 700,
       cell: ({ cell }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(TableCell, { children: cell.getValue() });
+        return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableCell, { children: cell.getValue() });
       },
       ...defaultColumn
     },
@@ -13172,18 +13300,18 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react47.useState)(false);
-  (0, import_react47.useEffect)(() => {
+  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react51.useState)(false);
+  (0, import_react51.useEffect)(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
     }
   }, [columnSizing, hasInitializedSizing]);
-  useResizeCallbackWrapper((0, import_react47.useCallback)(() => {
+  useResizeCallbackWrapper((0, import_react51.useCallback)(() => {
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  (0, import_react47.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -13199,7 +13327,7 @@ var Table = ({
       }));
     }
   }, [data, pageCount, pagination.pageSize, pagination.pageIndex]);
-  const columnSizeVars = (0, import_react47.useMemo)(() => {
+  const columnSizeVars = (0, import_react51.useMemo)(() => {
     const headers = table.getFlatHeaders();
     const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
@@ -13209,8 +13337,8 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { ref, "data-name": PropsUtil.dataAttributes.name("table-container"), className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { "data-name": PropsUtil.dataAttributes.name("table-scroll-wrapper"), className: tableContainerClassName, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { ref, "data-name": PropsUtil.dataAttributes.name("table-container"), className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { "data-name": PropsUtil.dataAttributes.name("table-scroll-wrapper"), className: tableContainerClassName, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
       "table",
       {
         ref: tableRef,
@@ -13221,7 +13349,7 @@ var Table = ({
         },
         className: tableClassName,
         children: [
-          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             "col",
             {
               style: {
@@ -13232,16 +13360,16 @@ var Table = ({
             },
             header.id
           )) }, headerGroup.id)),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("tr", { "data-name": PropsUtil.dataAttributes.name("table-header-row"), className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("tr", { "data-name": PropsUtil.dataAttributes.name("table-header-row"), className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
               "th",
               {
                 colSpan: header.colSpan,
                 "data-name": PropsUtil.dataAttributes.name("table-header-cell"),
                 className: (0, import_clsx26.default)("group/table-header-cell", header.column.columnDef.meta?.className),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex-row-1 items-center", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                       TableSortButton,
                       {
                         sortDirection: header.column.getIsSorted(),
@@ -13267,7 +13395,7 @@ var Table = ({
                         }
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Visibility, { isVisible: header.column.getCanFilter() && !!header.column.columnDef.meta?.filterType, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Visibility, { isVisible: header.column.getCanFilter() && !!header.column.columnDef.meta?.filterType, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                       TableFilterButton,
                       {
                         column: header.column,
@@ -13279,7 +13407,7 @@ var Table = ({
                       header.getContext()
                     )
                   ] }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Visibility, { isVisible: header.column.getCanResize(), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                     "div",
                     {
                       onPointerDown: header.getResizeHandler(),
@@ -13300,16 +13428,16 @@ var Table = ({
               header.id
             );
           }) }, headerGroup.id)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("tbody", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("tbody", { children: [
             table.getRowModel().rows.map((row) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 "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__ */ (0, import_jsx_runtime53.jsx)("td", { "data-name": "table-body-cell", children: (0, import_react_table.flexRender)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("td", { "data-name": "table-body-cell", children: (0, import_react_table.flexRender)(
                       cell.column.columnDef.cell,
                       cell.getContext()
                     ) }, cell.id);
@@ -13319,15 +13447,15 @@ var Table = ({
               );
             }),
             range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("tr", { children: columns.map((column) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FillerCell, {}) }, column.id);
+              return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("tr", { children: columns.map((column) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FillerCell, {}) }, column.id);
               }) }, "filler-row-" + index);
             })
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -13339,7 +13467,7 @@ var Table = ({
 };
 var TableUncontrolled = ({ data, ...props }) => {
   const [usedDate] = useOverwritableState(data);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     Table,
     {
       ...props,
@@ -13358,12 +13486,12 @@ var TableWithSelection = ({
   meta,
   ...props
 }) => {
-  const columnsWithSelection = (0, import_react47.useMemo)(() => {
+  const columnsWithSelection = (0, import_react51.useMemo)(() => {
     return [
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Checkbox,
             {
               value: table.getIsAllRowsSelected(),
@@ -13376,7 +13504,7 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Checkbox,
             {
               disabled: !row.getCanSelect(),
@@ -13394,15 +13522,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Checkbox, { value: false, disabled: true, className: "max-w-6" });
+          return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Checkbox, { value: false, disabled: true, className: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FillerCell, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FillerCell, {});
       },
       state: {
         rowSelection,
@@ -13427,7 +13555,7 @@ var TableWithSelection = ({
 };
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
-var import_react48 = require("react");
+var import_react52 = require("react");
 var import_clsx27 = require("clsx");
 
 // src/utils/writeToClipboard.ts
@@ -13436,8 +13564,8 @@ var writeToClipboard = (text) => {
 };
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
-var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_lucide_react18 = require("lucide-react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -13447,8 +13575,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingIndication, setIsShowingIndication] = (0, import_react48.useState)(false);
-  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react48.useState)(false);
+  const [isShowingIndication, setIsShowingIndication] = (0, import_react52.useState)(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react52.useState)(false);
   const positionClasses = {
     top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
     bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
@@ -13468,7 +13596,7 @@ var CopyToClipboardWrapper = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
     "div",
     {
       className: (0, import_clsx27.clsx)("relative inline-block cursor-copy", containerClassName),
@@ -13486,7 +13614,7 @@ var CopyToClipboardWrapper = ({
       },
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
           "div",
           {
             className: (0, import_clsx27.clsx)(
@@ -13501,15 +13629,15 @@ var CopyToClipboardWrapper = ({
               opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
             },
             children: [
-              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex-row-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react17.CheckIcon, { size: 16, className: "text-positive" }),
+              isShowingConfirmation && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-row-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react18.CheckIcon, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
-              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex-row-1 text-description", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react17.Copy, { size: 16 }),
+              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-row-1 text-description", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react18.Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                 "div",
                 {
                   className: (0, import_clsx27.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
@@ -13525,9 +13653,9 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-interaction/ScrollPicker.tsx
-var import_react49 = require("react");
+var import_react53 = require("react");
 var import_clsx28 = __toESM(require("clsx"));
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -13546,7 +13674,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react49.useState)({
+  }, setAnimation] = (0, import_react53.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -13562,7 +13690,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = (0, import_react49.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react53.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -13572,7 +13700,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react49.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react53.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -13645,7 +13773,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -13666,7 +13794,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "div",
     {
       className: "relative overflow-hidden",
@@ -13677,15 +13805,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + deltaY }));
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "div",
           {
             className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/50 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -13693,7 +13821,7 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name: name2, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            children: shownItems.map(({ name: name2, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               "div",
               {
                 className: (0, import_clsx28.default)(
@@ -13723,10 +13851,10 @@ var ScrollPicker = ({
 };
 
 // src/components/user-interaction/Textarea.tsx
-var import_react50 = require("react");
+var import_react54 = require("react");
 var import_clsx29 = __toESM(require("clsx"));
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var Textarea = (0, import_react50.forwardRef)(function Textarea2({
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var Textarea = (0, import_react54.forwardRef)(function Textarea2({
   invalid = false,
   onValueChange,
   onEditComplete,
@@ -13738,7 +13866,7 @@ var Textarea = (0, import_react50.forwardRef)(function Textarea2({
     onEditComplete?.(text);
     clearTimer();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "textarea",
     {
       ...props,
@@ -13768,7 +13896,7 @@ var TextareaUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Textarea,
     {
       ...props,
@@ -13786,9 +13914,9 @@ var TextareaWithHeadline = ({
   containerClassName,
   ...props
 }) => {
-  const genId = (0, import_react50.useId)();
+  const genId = (0, import_react54.useId)();
   const usedId = id ?? genId;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "div",
     {
       className: (0, import_clsx29.default)(
@@ -13800,8 +13928,8 @@ var TextareaWithHeadline = ({
         containerClassName
       ),
       children: [
-        headline && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("label", { ...headlineProps, htmlFor: usedId, className: (0, import_clsx29.default)("typography-lable-md text-label", headlineProps.className), children: headline }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        headline && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("label", { ...headlineProps, htmlFor: usedId, className: (0, import_clsx29.default)("typography-lable-md text-label", headlineProps.className), children: headline }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           Textarea,
           {
             ...props,
@@ -13818,8 +13946,8 @@ var TextareaWithHeadline = ({
 };
 
 // src/components/user-interaction/date/DatePicker.tsx
-var import_react53 = require("react");
-var import_lucide_react18 = require("lucide-react");
+var import_react57 = require("react");
+var import_lucide_react19 = require("lucide-react");
 
 // src/utils/date.ts
 var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
@@ -13995,8 +14123,8 @@ var DateUtils = {
 var import_clsx31 = __toESM(require("clsx"));
 
 // src/components/user-interaction/date/DayPicker.tsx
-var import_react51 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_react55 = require("react");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var DayPicker = ({
   displayedMonth,
   value,
@@ -14011,22 +14139,22 @@ var DayPicker = ({
   const { locale } = useLocale();
   const month = displayedMonth.getMonth();
   const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
-  const end = (0, import_react51.useMemo)(() => {
+  const end = (0, import_react55.useMemo)(() => {
     if (!providedEnd) return;
     return new Date(providedEnd.getFullYear(), providedEnd.getMonth(), providedEnd.getDate());
   }, [providedEnd]);
-  const start = (0, import_react51.useMemo)(() => {
+  const start = (0, import_react55.useMemo)(() => {
     if (!providedStart) return;
     return new Date(providedStart.getFullYear(), providedStart.getMonth(), providedStart.getDate());
   }, [providedStart]);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className, "data-name": "day-picker-container", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { "data-name": "day-picker-header-row", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("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__ */ (0, import_jsx_runtime57.jsx)("div", { "data-name": "day-picker-body-row", children: week.map((date) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className, "data-name": "day-picker-container", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { "data-name": "day-picker-header-row", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("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__ */ (0, import_jsx_runtime61.jsx)("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__ */ (0, import_jsx_runtime57.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         "button",
         {
           disabled: !isDayValid,
@@ -14060,7 +14188,7 @@ var DayPickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     DayPicker,
     {
       value,
@@ -14071,10 +14199,10 @@ var DayPickerUncontrolled = ({
 };
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
-var import_react52 = require("react");
+var import_react56 = require("react");
 var import_clsx30 = __toESM(require("clsx"));
-var import_jsx_runtime58 = require("react/jsx-runtime");
-var YearRow = (0, import_react52.memo)(function YearRow2({
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var YearRow = (0, import_react56.memo)(function YearRow2({
   year,
   selectedMonthIndex,
   minTimestamp,
@@ -14082,31 +14210,31 @@ var YearRow = (0, import_react52.memo)(function YearRow2({
   monthNames,
   onSelect
 }) {
-  const ref = (0, import_react52.useRef)(null);
+  const ref = (0, import_react56.useRef)(null);
   const isSelectedYear = selectedMonthIndex !== void 0;
-  const [isExpanded, setIsExpanded] = (0, import_react52.useState)(false);
-  (0, import_react52.useEffect)(() => {
+  const [isExpanded, setIsExpanded] = (0, import_react56.useState)(false);
+  (0, import_react56.useEffect)(() => {
     if (isSelectedYear) {
       ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
   }, [isSelectedYear]);
-  const monthGrid = (0, import_react52.useMemo)(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  const monthGrid = (0, import_react56.useMemo)(() => equalSizeGroups([...DateUtils.monthsList], 3), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     ExpandableRoot,
     {
       ref: isSelectedYear ? ref : void 0,
       isExpanded,
       onExpandedChange: setIsExpanded,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ExpandableHeader, { className: (0, import_clsx30.default)("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ExpandableContent, { className: "gap-y-1 px-2 expadable-content-h-39", children: isExpanded && monthGrid.map((group, groupIdx) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex-row-1", children: group.map((month) => {
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ExpandableHeader, { className: (0, import_clsx30.default)("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ExpandableContent, { className: "gap-y-1 px-2 expadable-content-h-39", children: isExpanded && monthGrid.map((group, groupIdx) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("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__ */ (0, import_jsx_runtime58.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             Button,
             {
               disabled: !isValid,
@@ -14138,32 +14266,32 @@ var YearMonthPicker = ({
   className
 }) => {
   const { locale } = useLocale();
-  const monthNames = (0, import_react52.useMemo)(() => {
+  const monthNames = (0, import_react56.useMemo)(() => {
     const formatter = new Intl.DateTimeFormat(locale, { month: "short" });
     return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2e3, i, 1)));
   }, [locale]);
-  const years = (0, import_react52.useMemo)(
+  const years = (0, import_react56.useMemo)(
     () => range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false }),
     [start, end]
   );
-  const minTimestamp = (0, import_react52.useMemo)(() => {
+  const minTimestamp = (0, import_react56.useMemo)(() => {
     if (!start) return;
     return new Date(start.getFullYear(), start.getMonth(), 1).getTime();
   }, [start]);
-  const maxTimestamp = (0, import_react52.useMemo)(() => {
+  const maxTimestamp = (0, import_react56.useMemo)(() => {
     if (!end) return;
     return new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime();
   }, [end]);
-  const callbackRefs = (0, import_react52.useRef)({ onValueChange, onEditComplete });
-  (0, import_react52.useLayoutEffect)(() => {
+  const callbackRefs = (0, import_react56.useRef)({ onValueChange, onEditComplete });
+  (0, import_react56.useLayoutEffect)(() => {
     callbackRefs.current = { onValueChange, onEditComplete };
   });
-  const handleSelect = (0, import_react52.useCallback)((newDate) => {
+  const handleSelect = (0, import_react56.useCallback)((newDate) => {
     const { onValueChange: onValueChange2, onEditComplete: onEditComplete2 } = callbackRefs.current;
     onValueChange2?.(newDate);
     onEditComplete2?.(newDate);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     InfiniteScroll,
     {
       itemCount: years.length,
@@ -14173,7 +14301,7 @@ var YearMonthPicker = ({
         const year = years[index];
         const isSelectedYear = value.getFullYear() === year;
         const selectedMonthIndex = isSelectedYear ? value.getMonth() : void 0;
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           YearRow,
           {
             year,
@@ -14195,7 +14323,7 @@ var YearMonthPickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     YearMonthPicker,
     {
       value,
@@ -14206,7 +14334,7 @@ var YearMonthPickerUncontrolled = ({
 };
 
 // src/components/user-interaction/date/DatePicker.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var DatePicker = ({
   value = /* @__PURE__ */ new Date(),
   start,
@@ -14220,11 +14348,11 @@ var DatePicker = ({
   className
 }) => {
   const { locale } = useLocale();
-  const [displayedMonth, setDisplayedMonth] = (0, import_react53.useState)(new Date(value.getFullYear(), value.getMonth(), 1));
-  const [displayMode, setDisplayMode] = (0, import_react53.useState)(initialDisplay);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: (0, import_clsx31.default)("flex-col-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex-row-2 items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  const [displayedMonth, setDisplayedMonth] = (0, import_react57.useState)(new Date(value.getFullYear(), value.getMonth(), 1));
+  const [displayMode, setDisplayMode] = (0, import_react57.useState)(initialDisplay);
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: (0, import_clsx31.default)("flex-col-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex-row-2 items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
         Button,
         {
           size: "sm",
@@ -14235,12 +14363,12 @@ var DatePicker = ({
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
           children: [
             `${new Intl.DateTimeFormat(LocalizationUtil.localToLanguage(locale), { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react18.ChevronDown, { size: 16 })
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react19.ChevronDown, { size: 16 })
           ]
         }
       ),
-      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex-row-2 justify-end", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex-row-2 justify-end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           Button,
           {
             size: "sm",
@@ -14251,10 +14379,10 @@ var DatePicker = ({
               onValueChange(newDate);
               setDisplayedMonth(newDate);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react18.Calendar, { className: "size-5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react19.Calendar, { className: "size-5" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           Button,
           {
             size: "sm",
@@ -14262,10 +14390,10 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react18.ArrowUp, { size: 20 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react19.ArrowUp, { size: 20 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           Button,
           {
             size: "sm",
@@ -14273,12 +14401,12 @@ var DatePicker = ({
             onClick: () => {
               setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react18.ArrowDown, { size: 20 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react19.ArrowDown, { size: 20 })
           }
         )
       ] })
     ] }),
-    displayMode === "yearMonth" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    displayMode === "yearMonth" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       YearMonthPicker,
       {
         ...yearMonthPickerProps,
@@ -14295,7 +14423,7 @@ var DatePicker = ({
         },
         className: "h-60 max-h-60"
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       DayPicker,
       {
         ...dayPickerProps,
@@ -14317,7 +14445,7 @@ var DatePickerUncontrolled = ({
   ...props
 }) => {
   const [date, setDate] = useOverwritableState(value, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     DatePicker,
     {
       ...props,
@@ -14331,8 +14459,8 @@ var DatePickerUncontrolled = ({
 var import_clsx32 = __toESM(require("clsx"));
 
 // src/components/user-interaction/date/TimePicker.tsx
-var import_react54 = require("react");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_react58 = require("react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var TimePicker = ({
   value = /* @__PURE__ */ new Date(),
   onValueChange,
@@ -14341,8 +14469,8 @@ var TimePicker = ({
   minuteIncrement = "5min",
   className
 }) => {
-  const minuteRef = (0, import_react54.useRef)(null);
-  const hourRef = (0, import_react54.useRef)(null);
+  const minuteRef = (0, import_react58.useRef)(null);
+  const hourRef = (0, import_react58.useRef)(null);
   const isPM = value.getHours() > 11;
   const hours = is24HourFormat ? range(24) : range(12);
   let minutes = range(60);
@@ -14362,13 +14490,13 @@ var TimePicker = ({
   }
   const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - value.getMinutes()) < Math.abs(item2 - value.getMinutes()));
   const hour = value.getHours();
-  (0, import_react54.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     minuteRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
     });
   }, [closestMinute]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     hourRef.current?.scrollIntoView({
       behavior: "smooth",
       block: "nearest"
@@ -14380,10 +14508,10 @@ var TimePicker = ({
     onValueChange?.(newDate);
     onEditComplete?.(newDate);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { "data-name": "time-picker-container", className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { "data-name": "time-picker-value-column", children: hours.map((hour2) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { "data-name": "time-picker-container", className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { "data-name": "time-picker-value-column", children: hours.map((hour2) => {
       const isSelected = hour2 === value.getHours() - (!is24HourFormat && isPM ? 12 : 0);
-      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         Button,
         {
           size: "sm",
@@ -14395,9 +14523,9 @@ var TimePicker = ({
         hour2
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { "data-name": "time-picker-value-column", children: minutes.map((minute) => {
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { "data-name": "time-picker-value-column", children: minutes.map((minute) => {
       const isSelected = minute === closestMinute;
-      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         Button,
         {
           size: "sm",
@@ -14409,8 +14537,8 @@ var TimePicker = ({
         minute + minuteIncrement
       );
     }) }),
-    !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { "data-name": "time-picker-value-column", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { "data-name": "time-picker-value-column", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         Button,
         {
           size: "sm",
@@ -14419,7 +14547,7 @@ var TimePicker = ({
           children: "AM"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         Button,
         {
           size: "sm",
@@ -14437,7 +14565,7 @@ var TimePickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     TimePicker,
     {
       ...props,
@@ -14448,7 +14576,7 @@ var TimePickerUncontrolled = ({
 };
 
 // src/components/user-interaction/date/DateTimePicker.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var DateTimePicker = ({
   value = /* @__PURE__ */ new Date(),
   start,
@@ -14467,7 +14595,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       DatePicker,
       {
         ...datePickerProps,
@@ -14483,7 +14611,7 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       TimePicker,
       {
         ...timePickerProps,
@@ -14496,14 +14624,14 @@ var DateTimePicker = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-2 min-h-71 max-h-71", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("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__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     DateTimePicker,
     {
       ...props,
@@ -14514,7 +14642,7 @@ var DateTimePickerUncontrolled = ({ value: initialValue, onValueChange, ...props
 };
 
 // src/components/user-interaction/date/TimeDisplay.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var TimeDisplay = ({
   date,
   mode = "daysFromToday"
@@ -14551,15 +14679,15 @@ var TimeDisplay = ({
   } else {
     fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: fullString });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { children: fullString });
 };
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-var import_react55 = require("react");
+var import_react59 = require("react");
 var import_react_dom8 = require("react-dom");
-var import_lucide_react19 = require("lucide-react");
+var import_lucide_react20 = require("lucide-react");
 var import_clsx33 = __toESM(require("clsx"));
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var DateTimeInput = ({
   value,
   onValueChange,
@@ -14572,9 +14700,9 @@ var DateTimeInput = ({
 }) => {
   const translation = useHightideTranslation();
   const { locale } = useLocale();
-  const [isOpen, setIsOpen] = (0, import_react55.useState)(false);
-  const anchorRef = (0, import_react55.useRef)(null);
-  const containerRef = (0, import_react55.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react59.useState)(false);
+  const anchorRef = (0, import_react59.useRef)(null);
+  const containerRef = (0, import_react59.useRef)(null);
   const position = useFloatingElement({
     active: isOpen,
     anchorRef,
@@ -14588,15 +14716,15 @@ var DateTimeInput = ({
     onEditComplete(value);
   });
   const { zIndex } = useOverlayRegistry({ isActive: isOpen });
-  const isReadOnly = (0, import_react55.useMemo)(() => props.readOnly || props.disabled, [props.readOnly, props.disabled]);
-  (0, import_react55.useEffect)(() => {
+  const isReadOnly = (0, import_react59.useMemo)(() => props.readOnly || props.disabled, [props.readOnly, props.disabled]);
+  (0, import_react59.useEffect)(() => {
     if (isReadOnly) {
       setIsOpen(false);
     }
   }, [isReadOnly]);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { ...containerProps, ref: anchorRef, className: (0, import_clsx33.default)("relative w-full", containerProps?.className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { ...containerProps, ref: anchorRef, className: (0, import_clsx33.default)("relative w-full", containerProps?.className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         Input,
         {
           ...props,
@@ -14614,7 +14742,7 @@ var DateTimeInput = ({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         Button,
         {
           coloringStyle: "text",
@@ -14624,12 +14752,12 @@ var DateTimeInput = ({
           className: "absolute right-1 top-1/2 -translate-y-1/2",
           disabled: isReadOnly,
           onClick: () => setIsOpen((prevState) => !prevState),
-          children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react19.CalendarIcon, { className: "size-5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react20.CalendarIcon, { className: "size-5" })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Visibility, { isVisible: isOpen, children: (0, import_react_dom8.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: isOpen, children: (0, import_react_dom8.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
         "div",
         {
           ref: containerRef,
@@ -14640,7 +14768,7 @@ var DateTimeInput = ({
             opacity: position ? void 0 : 0
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
               DateTimePicker,
               {
                 ...pickerProps,
@@ -14650,8 +14778,8 @@ var DateTimeInput = ({
                 onEditComplete
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex-row-2 justify-end", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Visibility, { isVisible: !!onRemove && !!value, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-2 justify-end", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !!onRemove && !!value, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
                 Button,
                 {
                   size: "md",
@@ -14664,7 +14792,7 @@ var DateTimeInput = ({
                   children: translation("clear")
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Visibility, { isVisible: !value, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Visibility, { isVisible: !value, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
                 Button,
                 {
                   size: "md",
@@ -14674,7 +14802,7 @@ var DateTimeInput = ({
                   children: translation("cancel")
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
                 Button,
                 {
                   size: "md",
@@ -14699,7 +14827,7 @@ var DateTimeInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     DateTimeInput,
     {
       ...props,
@@ -14717,21 +14845,21 @@ var DateTimeInputUncontrolled = ({
 };
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
-var import_react56 = require("react");
-var import_react57 = require("react");
+var import_react60 = require("react");
+var import_react61 = require("react");
 var import_clsx34 = __toESM(require("clsx"));
-var import_jsx_runtime64 = require("react/jsx-runtime");
-var InsideLabelInput = (0, import_react57.forwardRef)(function InsideLabelInput2({
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var InsideLabelInput = (0, import_react61.forwardRef)(function InsideLabelInput2({
   id: customId,
   label,
   ...props
 }, forwardedRef) {
   const { value } = props;
-  const [isFocused, setIsFocused] = (0, import_react57.useState)(false);
-  const generatedId = (0, import_react56.useId)();
+  const [isFocused, setIsFocused] = (0, import_react61.useState)(false);
+  const generatedId = (0, import_react60.useId)();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: (0, import_clsx34.default)("relative"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: (0, import_clsx34.default)("relative"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       Input,
       {
         ...props,
@@ -14749,7 +14877,7 @@ var InsideLabelInput = (0, import_react57.forwardRef)(function InsideLabelInput2
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       "label",
       {
         id: id + "-label",
@@ -14771,7 +14899,7 @@ var InsideLabelInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, props.onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     InsideLabelInput,
     {
       ...props,
@@ -14782,9 +14910,9 @@ var InsideLabelInputUncontrolled = ({
 };
 
 // src/components/user-interaction/input/SearchBar.tsx
-var import_lucide_react20 = require("lucide-react");
+var import_lucide_react21 = require("lucide-react");
 var import_clsx35 = require("clsx");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var SearchBar = ({
   value: initialValue,
   onSearch,
@@ -14795,8 +14923,8 @@ var SearchBar = ({
 }) => {
   const translation = useHightideTranslation();
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { ...containerProps, className: (0, import_clsx35.clsx)("relative", containerProps?.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { ...containerProps, className: (0, import_clsx35.clsx)("relative", containerProps?.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       InputUncontrolled,
       {
         ...inputProps,
@@ -14807,7 +14935,7 @@ var SearchBar = ({
         className: (0, import_clsx35.clsx)("pr-10 w-full", inputProps.className)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       Button,
       {
         ...searchButtonProps,
@@ -14817,33 +14945,33 @@ var SearchBar = ({
         coloringStyle: "text",
         onClick: () => onSearch(value),
         className: (0, import_clsx35.clsx)("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react20.Search, { className: "w-full h-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_lucide_react21.Search, { className: "w-full h-full" })
       }
     )
   ] });
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-var import_react58 = require("react");
-var import_lucide_react21 = require("lucide-react");
+var import_react62 = require("react");
+var import_lucide_react22 = require("lucide-react");
 var import_clsx36 = __toESM(require("clsx"));
-var import_jsx_runtime66 = require("react/jsx-runtime");
-var ToggleableInput = (0, import_react58.forwardRef)(function ToggleableInput2({
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var ToggleableInput = (0, import_react62.forwardRef)(function ToggleableInput2({
   value,
   initialState = "display",
   editCompleteOptions,
   ...props
 }, forwardedRef) {
-  const [isEditing, setIsEditing] = (0, import_react58.useState)(initialState !== "display");
-  const innerRef = (0, import_react58.useRef)(null);
-  (0, import_react58.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react58.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react62.useState)(initialState !== "display");
+  const innerRef = (0, import_react62.useRef)(null);
+  (0, import_react62.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react62.useEffect)(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: (0, import_clsx36.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: (0, import_clsx36.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       Input,
       {
         ...props,
@@ -14869,9 +14997,9 @@ var ToggleableInput = (0, import_react58.forwardRef)(function ToggleableInput2({
         })
       }
     ),
-    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: (0, import_clsx36.default)(" truncate"), children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react21.Pencil, { className: (0, import_clsx36.default)(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: (0, import_clsx36.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react22.Pencil, { className: (0, import_clsx36.default)(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -14881,7 +15009,7 @@ var ToggleableInputUncontrolled = ({
   ...restProps
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     ToggleableInput,
     {
       value,
@@ -14892,11 +15020,11 @@ var ToggleableInputUncontrolled = ({
 };
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-var import_lucide_react23 = require("lucide-react");
+var import_lucide_react24 = require("lucide-react");
 
 // src/components/user-interaction/properties/PropertyBase.tsx
-var import_lucide_react22 = require("lucide-react");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_lucide_react23 = require("lucide-react");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var PropertyBase = ({
   name: name2,
   children,
@@ -14915,29 +15043,29 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     "div",
     {
       className: className ? `group/property ${className}` : "group/property",
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
           "div",
           {
             className,
             "data-name": "property-title",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Tooltip, { tooltip: name2, containerClassName: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex-row-1 items-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { "data-name": "property-title-icon", children: icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "data-name": "property-title-text", children: name2 })
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Tooltip, { tooltip: name2, containerClassName: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { "data-name": "property-title-icon", children: icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { "data-name": "property-title-text", children: name2 })
               ] }) }),
-              invalid && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react22.AlertTriangle, { className: "size-force-6" })
+              invalid && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react23.AlertTriangle, { className: "size-force-6" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
           "div",
           {
             className,
@@ -14945,8 +15073,8 @@ var PropertyBase = ({
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
               children({ required, hasValue, invalid }),
-              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { "data-name": "property-actions", children: [
-                isClearEnabled && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Tooltip, { tooltip: translation("clearValue"), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { "data-name": "property-actions", children: [
+                isClearEnabled && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Tooltip, { tooltip: translation("clearValue"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
                   Button,
                   {
                     onClick: onValueClear,
@@ -14955,10 +15083,10 @@ var PropertyBase = ({
                     coloringStyle: "text",
                     layout: "icon",
                     size: "sm",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react22.X, { className: "size-force-5" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react23.X, { className: "size-force-5" })
                   }
                 ) }),
-                isRemoveEnabled && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Tooltip, { tooltip: translation("removeProperty"), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+                isRemoveEnabled && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Tooltip, { tooltip: translation("removeProperty"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
                   Button,
                   {
                     onClick: onRemove,
@@ -14966,7 +15094,7 @@ var PropertyBase = ({
                     coloringStyle: "text",
                     layout: "icon",
                     size: "sm",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react22.Trash, { className: "size-force-5" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react23.Trash, { className: "size-force-5" })
                   }
                 ) })
               ] })
@@ -14979,7 +15107,7 @@ var PropertyBase = ({
 };
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var CheckboxProperty = ({
   value,
   onValueChange,
@@ -14988,15 +15116,15 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue: value !== void 0,
       readOnly,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react23.Check, { size: 24 }),
-      children: () => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react24.Check, { size: 24 }),
+      children: () => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           Button,
           {
             color: value ? "positive" : "neutral",
@@ -15009,7 +15137,7 @@ var CheckboxProperty = ({
             children: translation("yes")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           Button,
           {
             color: !value && value !== void 0 ? "negative" : "neutral",
@@ -15028,8 +15156,8 @@ var CheckboxProperty = ({
 };
 
 // src/components/user-interaction/properties/DateProperty.tsx
-var import_lucide_react24 = require("lucide-react");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_lucide_react25 = require("lucide-react");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var DateProperty = ({
   value,
   onValueChange,
@@ -15039,13 +15167,13 @@ var DateProperty = ({
   ...baseProps
 }) => {
   const hasValue = !!value;
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_lucide_react24.CalendarDays, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react25.CalendarDays, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         DateTimeInput,
         {
           value,
@@ -15062,8 +15190,8 @@ var DateProperty = ({
 };
 
 // src/components/user-interaction/properties/MultiSelectProperty.tsx
-var import_lucide_react25 = require("lucide-react");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_lucide_react26 = require("lucide-react");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var MultiSelectProperty = ({
   children,
   value,
@@ -15072,18 +15200,18 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = value.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react25.List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_lucide_react26.List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
             MultiSelectChipDisplay,
             {
               value,
@@ -15108,8 +15236,8 @@ var MultiSelectProperty = ({
 };
 
 // src/components/user-interaction/properties/NumberProperty.tsx
-var import_lucide_react26 = require("lucide-react");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_lucide_react27 = require("lucide-react");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var NumberProperty = ({
   value,
   onRemove,
@@ -15121,20 +15249,20 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react26.Binary, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react27.Binary, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               Input,
               {
                 className: "w-full pr-8",
@@ -15162,7 +15290,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               "span",
               {
                 "data-name": "property-suffix",
@@ -15178,8 +15306,8 @@ var NumberProperty = ({
 };
 
 // src/components/user-interaction/properties/SelectProperty.tsx
-var import_lucide_react27 = require("lucide-react");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_lucide_react28 = require("lucide-react");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var SingleSelectProperty = ({
   children,
   value,
@@ -15188,18 +15316,18 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react27.List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react28.List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
             Select,
             {
               value,
@@ -15221,8 +15349,8 @@ var SingleSelectProperty = ({
 };
 
 // src/components/user-interaction/properties/TextProperty.tsx
-var import_lucide_react28 = require("lucide-react");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_lucide_react29 = require("lucide-react");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var TextProperty = ({
   value,
   readOnly,
@@ -15233,14 +15361,14 @@ var TextProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react28.Text, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react29.Text, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         Textarea,
         {
           className: "w-full",
@@ -15271,33 +15399,33 @@ var TextProperty = ({
 };
 
 // src/components/utils/FocusTrap.tsx
-var import_react59 = require("react");
-var import_react60 = require("react");
-var import_react61 = require("react");
-var import_jsx_runtime74 = require("react/jsx-runtime");
-var FocusTrap = (0, import_react61.forwardRef)(function FocusTrap2({
+var import_react63 = require("react");
+var import_react64 = require("react");
+var import_react65 = require("react");
+var import_jsx_runtime78 = require("react/jsx-runtime");
+var FocusTrap = (0, import_react65.forwardRef)(function FocusTrap2({
   active = true,
   initialFocus,
   focusFirst = false,
   ...props
 }, forwardedRef) {
-  const innerRef = (0, import_react59.useRef)(null);
-  (0, import_react60.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  const innerRef = (0, import_react63.useRef)(null);
+  (0, import_react64.useImperativeHandle)(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus, focusFirst });
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { ref: innerRef, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ref: innerRef, ...props });
 });
 
 // src/components/utils/Transition.tsx
-var import_react62 = require("react");
+var import_react66 = require("react");
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = (0, import_react62.useState)(show);
-  const [isTransitioning, setIsTransitioning] = (0, import_react62.useState)(!isOpen);
+  const [isOpen, setIsOpen] = (0, import_react66.useState)(show);
+  const [isTransitioning, setIsTransitioning] = (0, import_react66.useState)(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  (0, import_react62.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -15322,18 +15450,18 @@ function Transition({
 }
 
 // src/contexts/HightideProvider.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var HightideProvider = ({
   children,
   theme,
   locale,
   config
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(LocaleProvider, { ...locale, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ThemeProvider, { ...theme, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(HightideConfigProvider, { ...config, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(LocaleProvider, { ...locale, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ThemeProvider, { ...theme, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(HightideConfigProvider, { ...config, children }) }) });
 };
 
 // src/hooks/focus/useFocusGuards.ts
-var import_react63 = require("react");
+var import_react67 = require("react");
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -15371,7 +15499,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  (0, import_react63.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -15380,10 +15508,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-var import_react64 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react64.default.useState(false);
-  (0, import_react64.useEffect)(() => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react68.default.useState(false);
+  (0, import_react68.useEffect)(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -15403,13 +15531,13 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/useRerender.ts
-var import_react65 = require("react");
+var import_react69 = require("react");
 var useRerender = () => {
-  return (0, import_react65.useReducer)(() => ({}), {})[1];
+  return (0, import_react69.useReducer)(() => ({}), {})[1];
 };
 
 // src/hooks/useSearch.ts
-var import_react66 = require("react");
+var import_react70 = require("react");
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -15448,34 +15576,34 @@ var useSearch = ({
   filter,
   disabled = false
 }) => {
-  const [search, setSearch] = (0, import_react66.useState)(initialSearch ?? "");
-  const [result, setResult] = (0, import_react66.useState)(list);
-  const searchTags = (0, import_react66.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
-  const updateSearch = (0, import_react66.useCallback)((newSearch) => {
+  const [search, setSearch] = (0, import_react70.useState)(initialSearch ?? "");
+  const [result, setResult] = (0, import_react70.useState)(list);
+  const searchTags = (0, import_react70.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = (0, import_react70.useCallback)((newSearch) => {
     const usedSearch = newSearch ?? search;
     if (newSearch) {
       setSearch(search);
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  (0, import_react66.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
   }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = (0, import_react66.useMemo)(() => {
+  const filteredResult = (0, import_react70.useMemo)(() => {
     if (!filter) {
       return result;
     }
     return result.filter(filter);
   }, [result, filter]);
-  const sortedAndFilteredResult = (0, import_react66.useMemo)(() => {
+  const sortedAndFilteredResult = (0, import_react70.useMemo)(() => {
     if (!sortingFunction) {
       return filteredResult;
     }
     return filteredResult.sort(sortingFunction);
   }, [filteredResult, sortingFunction]);
-  const usedResult = (0, import_react66.useMemo)(() => {
+  const usedResult = (0, import_react70.useMemo)(() => {
     if (!disabled) {
       return sortedAndFilteredResult;
     }
@@ -15497,7 +15625,7 @@ var validateEmail = (email) => {
 };
 
 // src/hooks/useValidators.ts
-var import_react67 = require("react");
+var import_react71 = require("react");
 var notEmpty = (value) => {
   if (!value) {
     return "notEmpty";
@@ -15547,7 +15675,7 @@ var UseValidators = {
 };
 var useTranslatedValidators = () => {
   const translation = useHightideTranslation();
-  return (0, import_react67.useMemo)(() => ({
+  return (0, import_react71.useMemo)(() => ({
     notEmpty: (value) => {
       const result = notEmpty(value);
       if (result) {
@@ -15885,9 +16013,14 @@ var PromiseUtils = {
   MenuItem,
   MultiSearchWithMapping,
   MultiSelect,
+  MultiSelectButton,
   MultiSelectChipDisplay,
+  MultiSelectChipDisplayButton,
   MultiSelectChipDisplayUncontrolled,
+  MultiSelectContent,
+  MultiSelectOption,
   MultiSelectProperty,
+  MultiSelectRoot,
   MultiSelectUncontrolled,
   MultiSubjectSearchWithMapping,
   Navigation,
@@ -15905,8 +16038,8 @@ var PromiseUtils = {
   SearchBar,
   Select,
   SelectButton,
-  SelectChipDisplay,
   SelectContent,
+  SelectContext,
   SelectOption,
   SelectRoot,
   SelectUncontrolled,
@@ -15995,6 +16128,7 @@ var PromiseUtils = {
   useRerender,
   useResizeCallbackWrapper,
   useSearch,
+  useSelectContext,
   useTabContext,
   useTheme,
   useTransitionState,