@helpwave/hightide 0.6.8 → 0.6.9

package/dist/index.mjs

@@ -6909,277 +6909,7 @@ var TagIcon = ({
 
 // src/components/form/FieldLayout.tsx
 import { useId, useMemo as useMemo2, forwardRef as forwardRef2 } from "react";
-
-// src/utils/array.ts
-var equalSizeGroups = (array, groupSize) => {
-  if (groupSize <= 0) {
-    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
-    return [[...array]];
-  }
-  const groups = [];
-  for (let i = 0; i < array.length; i += groupSize) {
-    groups.push(array.slice(i, Math.min(i + groupSize, array.length)));
-  }
-  return groups;
-};
-var defaultRangeOptions = {
-  allowEmptyRange: false,
-  stepSize: 1,
-  exclusiveStart: false,
-  exclusiveEnd: true
-};
-var range = (endOrRange, options) => {
-  const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options };
-  let start = 0;
-  let end;
-  if (typeof endOrRange === "number") {
-    end = endOrRange;
-  } else {
-    start = endOrRange[0];
-    end = endOrRange[1];
-  }
-  if (!exclusiveEnd) {
-    end -= 1;
-  }
-  if (exclusiveStart) {
-    start += 1;
-  }
-  if (end - 1 < start) {
-    if (!allowEmptyRange) {
-      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`);
-    }
-    return [];
-  }
-  return Array.from({ length: end - start }, (_, index) => index * stepSize + start);
-};
-var closestMatch = (list, firstCloser) => {
-  return list.reduce((item1, item2) => {
-    return firstCloser(item1, item2) ? item1 : item2;
-  });
-};
-var getNeighbours = (list, item, neighbourDistance = 2) => {
-  const index = list.indexOf(item);
-  const totalItems = neighbourDistance * 2 + 1;
-  if (list.length < totalItems) {
-    console.warn("List is to short");
-    return list;
-  }
-  if (index === -1) {
-    console.error("item not found in list");
-    return list.splice(0, totalItems);
-  }
-  let start = index - neighbourDistance;
-  if (start < 0) {
-    start += list.length;
-  }
-  const end = (index + neighbourDistance + 1) % list.length;
-  const result = [];
-  let ignoreOnce = list.length === totalItems;
-  for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {
-    result.push(list[i]);
-    if (end === i && ignoreOnce) {
-      ignoreOnce = false;
-    }
-  }
-  return result;
-};
-var createLoopingListWithIndex = (list, startIndex = 0, length = 0, forwards = true) => {
-  if (length < 0) {
-    console.warn(`createLoopingList: length must be >= 0, given ${length}`);
-  } else if (length === 0) {
-    length = list.length;
-  }
-  const returnList = [];
-  if (forwards) {
-    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {
-      returnList.push([i, list[i]]);
-    }
-  } else {
-    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {
-      returnList.push([i, list[i]]);
-    }
-  }
-  return returnList;
-};
-var createLoopingList = (list, startIndex = 0, length = 0, forwards = true) => {
-  return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item);
-};
-var moveItems = (list, move = 0) => {
-  const result = [];
-  let start = move;
-  if (start < 0) {
-    start = list.length - move;
-  }
-  start = start % list.length;
-  for (let i = 0; i < list.length; i++) {
-    result[i] = list[(i + start) % list.length];
-  }
-  return result;
-};
-function resolveSingleOrArray(value) {
-  if (Array.isArray(value)) {
-    return value;
-  } else if (value) {
-    return [value];
-  }
-  return [];
-}
-var ArrayUtil = {
-  unique: (list) => {
-    const seen = /* @__PURE__ */ new Set();
-    return list.filter((item) => {
-      if (seen.has(item)) {
-        return false;
-      }
-      seen.add(item);
-      return true;
-    });
-  },
-  difference: (list, removeList) => {
-    const remove = new Set(removeList);
-    return list.filter((item) => !remove.has(item));
-  },
-  moveItems,
-  resolveSingleOrArray
-};
-
-// src/utils/propsUtil.ts
-function bool(isActive) {
-  return isActive ? "" : void 0;
-}
-function name(name2, props = {}) {
-  return props["data-name"] ? String(props["data-name"]) : name2;
-}
-function interactionStatesData(interactionStates) {
-  return {
-    "data-disabled": bool(!!interactionStates.disabled),
-    "data-invalid": bool(!!interactionStates.invalid),
-    "data-readonly": bool(!!interactionStates.readOnly),
-    "data-required": bool(!!interactionStates.required)
-  };
-}
-var dataAttributes = {
-  bool,
-  name,
-  interactionStates: interactionStatesData
-};
-function mouseEventExtender({
-  fromProps,
-  extensions
-}) {
-  return (event) => {
-    fromProps?.(event);
-    ArrayUtil.resolveSingleOrArray(extensions).forEach((element) => element(event));
-  };
-}
-function keyboardEventExtender({
-  fromProps,
-  extensions
-}) {
-  return (event) => {
-    fromProps?.(event);
-    ArrayUtil.resolveSingleOrArray(extensions).forEach((element) => element(event));
-  };
-}
-var extender = {
-  mouseEvent: mouseEventExtender,
-  keyboardEvent: keyboardEventExtender
-};
-function click(onClick) {
-  const keyboardEventHandler = (event) => {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      event.stopPropagation();
-      onClick();
-    }
-  };
-  return {
-    onClick,
-    onKeyDown: keyboardEventHandler
-  };
-}
-function close2(onClose) {
-  return (event) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
-      onClose?.();
-    }
-  };
-}
-function navigate({
-  left,
-  right,
-  up: up2,
-  down: down2
-}) {
-  return (event) => {
-    switch (event.key) {
-      case "ArrowLeft":
-        left(event);
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      case "ArrowRight":
-        right(event);
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      case "ArrowUp":
-        up2(event);
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-      case "ArrowDown":
-        down2(event);
-        event.preventDefault();
-        event.stopPropagation();
-        break;
-    }
-  };
-}
-function mergeProps(slotProps, childProps) {
-  const result = { ...childProps };
-  for (const key in slotProps) {
-    const slotValue = slotProps[key];
-    const childValue = childProps[key];
-    if (key === "className") {
-      result.className = [slotValue, childValue].filter(Boolean).join(" ");
-    } else if (key === "style") {
-      result.style = { ...slotValue, ...childValue };
-    } else if (key.startsWith("on") && typeof slotValue === "function" && typeof childValue === "function") {
-      result[key] = (...args) => {
-        slotValue(...args);
-        childValue(...args);
-      };
-    } else {
-      result[key] = childValue ?? slotValue;
-    }
-  }
-  return result;
-}
-function interactionStatesAria(interactionStates, props = {}) {
-  return {
-    "aria-disabled": props["aria-disabled"] ?? interactionStates.disabled,
-    "aria-invalid": props["aria-invalid"] ?? interactionStates.invalid,
-    "aria-readonly": props["aria-readonly"] ?? interactionStates.readOnly,
-    "aria-required": props["aria-required"] ?? interactionStates.required
-  };
-}
-var aria = {
-  close: close2,
-  click,
-  navigate,
-  interactionStates: interactionStatesAria
-};
-var PropsUtil = {
-  extender,
-  dataAttributes,
-  aria,
-  mergeProps
-};
-
-// src/components/form/FieldLayout.tsx
+import clsx5 from "clsx";
 import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var FormFieldLayout = forwardRef2(function FormFieldLayout2({
   children,
@@ -7193,6 +6923,7 @@ var FormFieldLayout = forwardRef2(function FormFieldLayout2({
   invalidDescriptionProps,
   description,
   descriptionProps,
+  showRequiredIndicator = true,
   ...props
 }, ref) {
   const generatedId = useId();
@@ -7230,7 +6961,7 @@ var FormFieldLayout = forwardRef2(function FormFieldLayout2({
     {
       ...props,
       ref,
-      "data-name": PropsUtil.dataAttributes.name("form-field-container", props),
+      className: clsx5("form-field-container", props.className),
       children: [
         label && /* @__PURE__ */ jsxs6(
           "label",
@@ -7238,10 +6969,10 @@ var FormFieldLayout = forwardRef2(function FormFieldLayout2({
             ...labelProps,
             id: ids.label,
             htmlFor: ids.input,
-            "data-name": "form-field-label",
+            className: clsx5("form-field-label", labelProps?.className),
             children: [
               label,
-              required && /* @__PURE__ */ jsx12("div", { role: "none", className: "bg-primary w-2 h-2 rounded-full" })
+              showRequiredIndicator && required && /* @__PURE__ */ jsx12("div", { role: "none", className: "bg-primary w-2 h-2 rounded-full" })
             ]
           }
         ),
@@ -7250,7 +6981,7 @@ var FormFieldLayout = forwardRef2(function FormFieldLayout2({
           {
             ...descriptionProps,
             id: ids.description,
-            "data-name": "form-field-description",
+            className: clsx5("form-field-description", descriptionProps?.className),
             children: description
           }
         ),
@@ -7260,10 +6991,10 @@ var FormFieldLayout = forwardRef2(function FormFieldLayout2({
           {
             ...invalidDescriptionProps,
             id: ids.description,
-            "data-name": "form-field-error",
             role: "alert",
             "aria-hidden": !invalid,
             "aria-live": "polite",
+            className: clsx5("form-field-error", invalidDescriptionProps?.className),
             children: invalidDescription
           }
         )
@@ -7284,13 +7015,18 @@ function useForm() {
   if (!ctx) throw new Error("FormContext is only available inside a <Form>");
   return ctx;
 }
-function useFormField(key, { triggerUpdate = true }) {
+function useFormField(key, { triggerUpdate = true, validationBehaviour = "touched" }) {
   const context = useContext(FormContext);
   const subscribe = useCallback2((cb) => {
     if (!context) return () => {
     };
     return context.store.subscribe(key, cb);
   }, [context, key]);
+  const subscribeAll = useCallback2((cb) => {
+    if (!context) return () => {
+    };
+    return context.store.subscribe("ALL", cb);
+  }, [context]);
   const value = useSyncExternalStore(
     subscribe,
     () => context ? context.store.getValue(key) : void 0
@@ -7299,31 +7035,85 @@ function useFormField(key, { triggerUpdate = true }) {
     subscribe,
     () => context ? context.store.getError(key) : void 0
   );
+  const touched = useSyncExternalStore(
+    subscribe,
+    () => context ? context.store.getTouched(key) : void 0
+  );
+  const hasTriedSubmitting = useSyncExternalStore(
+    subscribeAll,
+    () => context ? context.store.getHasTriedSubmitting() : void 0
+  );
+  const isShowingErrors = validationBehaviour === "always" || validationBehaviour === "touched" && (touched ?? false) || validationBehaviour === "submit" && (hasTriedSubmitting ?? false);
   const getDataProps = useCallback2(() => {
     return {
-      value: context ? context.store.getValue(key) : void 0,
+      value,
       onValueChange: (val) => context?.store.setValue(key, val),
       onEditComplete: (val) => {
         context?.store.setTouched(key);
         context?.store.setValue(key, val, triggerUpdate);
       }
     };
-  }, [context, key, triggerUpdate]);
+  }, [context?.store, key, triggerUpdate, value]);
   if (!context) return null;
   const { registerRef } = context;
   return {
     store: context.store,
     value,
-    error,
+    error: isShowingErrors ? error : void 0,
+    touched: touched ?? false,
+    hasTriedSubmitting: hasTriedSubmitting ?? false,
     dataProps: getDataProps(),
     registerRef: registerRef(key)
   };
 }
+function useFormObserver({ formStore } = {}) {
+  const context = useContext(FormContext);
+  const store = formStore ?? context?.store;
+  const subscribe = useCallback2((cb) => {
+    if (!store) return () => {
+    };
+    return store.subscribe("ALL", cb);
+  }, [store]);
+  const values = useSyncExternalStore(subscribe, () => store ? store.getAllValues() : void 0);
+  const errors = useSyncExternalStore(subscribe, () => store ? store.getErrors() : void 0);
+  const touched = useSyncExternalStore(subscribe, () => store ? store.getAllTouched() : void 0);
+  const hasErrors = useSyncExternalStore(subscribe, () => store ? store.getHasError() : void 0);
+  const hasTriedSubmitting = useSyncExternalStore(subscribe, () => store ? store.getHasTriedSubmitting() : void 0);
+  if (!store) return null;
+  return {
+    store,
+    values,
+    errors,
+    touched,
+    hasErrors,
+    hasTriedSubmitting
+  };
+}
+function useFormObserverKey({ formStore, key }) {
+  const context = useContext(FormContext);
+  const store = formStore ?? context?.store;
+  const subscribe = useCallback2((cb) => {
+    if (!store) return () => {
+    };
+    return store.subscribe(key, cb);
+  }, [store, key]);
+  const value = useSyncExternalStore(subscribe, () => store ? store.getValue(key) : void 0);
+  const error = useSyncExternalStore(subscribe, () => store ? store.getError(key) : void 0);
+  const touched = useSyncExternalStore(subscribe, () => store ? store.getTouched(key) : void 0);
+  if (!store) return null;
+  return {
+    store,
+    value,
+    error,
+    touched,
+    hasError: !!error
+  };
+}
 
 // src/components/form/FormField.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-var FormField = ({ children, name: name2, triggerUpdateOnEditComplete, ...props }) => {
-  const formField = useFormField(name2, { triggerUpdate: triggerUpdateOnEditComplete });
+var FormField = ({ children, name: name2, triggerUpdateOnEditComplete, validationBehaviour, ...props }) => {
+  const formField = useFormField(name2, { triggerUpdate: triggerUpdateOnEditComplete, validationBehaviour });
   if (!formField) {
     throw new Error("<FormField> can only be used inside a FormContext try wrapping your app in a <FormProvider>");
   }
@@ -7335,20 +7125,47 @@ var FormField = ({ children, name: name2, triggerUpdateOnEditComplete, ...props
       ref: formField.registerRef
     },
     interactionStates: formFieldLayoutBag.interactionStates,
+    touched: formField.touched,
     other: {
       updateValue: (value) => formField.store.setValue(name2, value, true)
     }
   }) });
 };
 
+// src/utils/bagFunctions.ts
+var resolve = (bagFunctionOrValue, bag) => {
+  if (typeof bagFunctionOrValue === "function") {
+    return bagFunctionOrValue(bag);
+  }
+  return bagFunctionOrValue;
+};
+var BagFunctionUtil = {
+  resolve
+};
+
+// src/components/form/FormObserver.tsx
+var FormObserver = ({ children, formStore }) => {
+  const formObserver = useFormObserver({ formStore });
+  if (!formObserver) {
+    throw new Error("<FormObserver> can only be used inside a <FormProvider>");
+  }
+  return BagFunctionUtil.resolve(children, formObserver);
+};
+var FormObserverKey = ({ children, formStore, key }) => {
+  const formObserver = useFormObserverKey({ formStore, key });
+  if (!formObserver) {
+    throw new Error("<FormObserverKey> can only be used inside a <FormProvider>");
+  }
+  return BagFunctionUtil.resolve(children, formObserver);
+};
+
 // src/components/form/FormStore.ts
 var FormStore = class {
   constructor({
     initialValues,
     hasTriedSubmitting,
     submittingTouchesAll = true,
-    validators = {},
-    validationBehaviour = "touched"
+    validators = {}
   }) {
     this.hasTriedSubmitting = false;
     this.errors = {};
@@ -7365,7 +7182,6 @@ var FormStore = class {
       });
     }
     this.validators = validators;
-    this.validationBehaviour = validationBehaviour;
     this.validateAll();
   }
   // Values
@@ -7378,8 +7194,8 @@ var FormStore = class {
   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 });
+      this.validate(key);
     }
     if (triggerUpdate) {
       this.notify({
@@ -7411,10 +7227,12 @@ var FormStore = class {
   getTouched(key) {
     return !!this.touched[key];
   }
+  getAllTouched() {
+    return { ...this.touched };
+  }
   setTouched(key, isTouched = true) {
     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
@@ -7436,10 +7254,8 @@ var FormStore = class {
     }
     this.notify({ type: "onError", key, value: this.values[key], error, values: { ...this.values } });
   }
-  changeValidationBehavoir(validationBehaviour) {
-    if (validationBehaviour === this.validationBehaviour) return;
-    this.validationBehaviour = validationBehaviour;
-    this.validateAll();
+  getHasTriedSubmitting() {
+    return this.hasTriedSubmitting;
   }
   changeValidators(validators) {
     this.validators = { ...this.validators, ...validators };
@@ -7447,8 +7263,7 @@ var FormStore = class {
   }
   validate(key) {
     const validator = this.validators[key];
-    const shouldValidate = this.validationBehaviour === "always" || this.validationBehaviour === "touched" && this.touched[key] || this.validationBehaviour === "submit" && this.hasTriedSubmitting;
-    if (!validator || !shouldValidate) {
+    if (!validator) {
       this.setError(key, void 0);
       return;
     }
@@ -7486,7 +7301,6 @@ var FormStore = class {
     if (this.submittingTouchesAll) {
       Object.keys(this.initialValues).forEach((k) => {
         this.touched[k] = true;
-        this.validate(k);
       });
     }
     const hasErrors = Object.keys(this.errors).length > 0;
@@ -7521,7 +7335,6 @@ function useCreateForm({
   initialValues,
   hasTriedSubmitting,
   validators,
-  validationBehaviour,
   scrollToElements = true,
   scrollOptions = { behavior: "smooth", block: "center" }
 }) {
@@ -7529,13 +7342,9 @@ function useCreateForm({
     new FormStore({
       initialValues,
       hasTriedSubmitting,
-      validators,
-      validationBehaviour
+      validators
     })
   );
-  useEffect3(() => {
-    storeRef.current.changeValidationBehavoir(validationBehaviour);
-  }, [validationBehaviour]);
   useEffect3(() => {
     storeRef.current.changeValidators(validators);
   }, [validators]);
@@ -7606,12 +7415,7 @@ function useCreateForm({
         storeRef.current.setValues(updater);
       }
     },
-    validateAll: () => storeRef.current.validateAll(),
-    getError: (key) => storeRef.current.getError(key),
-    getErrors: () => storeRef.current.getErrors(),
-    getIsValid: () => !storeRef.current.getHasError(),
-    getValue: (key) => storeRef.current.getValue(key),
-    getValues: () => storeRef.current.getAllValues()
+    validateAll: () => storeRef.current.validateAll()
   }), []);
   return {
     store: storeRef.current,
@@ -7914,9 +7718,142 @@ import {
   useRef as useRef3,
   useState as useState7
 } from "react";
-import clsx5 from "clsx";
+import clsx6 from "clsx";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
+// src/utils/array.ts
+var equalSizeGroups = (array, groupSize) => {
+  if (groupSize <= 0) {
+    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`);
+    return [[...array]];
+  }
+  const groups = [];
+  for (let i = 0; i < array.length; i += groupSize) {
+    groups.push(array.slice(i, Math.min(i + groupSize, array.length)));
+  }
+  return groups;
+};
+var defaultRangeOptions = {
+  allowEmptyRange: false,
+  stepSize: 1,
+  exclusiveStart: false,
+  exclusiveEnd: true
+};
+var range = (endOrRange, options) => {
+  const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options };
+  let start = 0;
+  let end;
+  if (typeof endOrRange === "number") {
+    end = endOrRange;
+  } else {
+    start = endOrRange[0];
+    end = endOrRange[1];
+  }
+  if (!exclusiveEnd) {
+    end -= 1;
+  }
+  if (exclusiveStart) {
+    start += 1;
+  }
+  if (end - 1 < start) {
+    if (!allowEmptyRange) {
+      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`);
+    }
+    return [];
+  }
+  return Array.from({ length: end - start }, (_, index) => index * stepSize + start);
+};
+var closestMatch = (list, firstCloser) => {
+  return list.reduce((item1, item2) => {
+    return firstCloser(item1, item2) ? item1 : item2;
+  });
+};
+var getNeighbours = (list, item, neighbourDistance = 2) => {
+  const index = list.indexOf(item);
+  const totalItems = neighbourDistance * 2 + 1;
+  if (list.length < totalItems) {
+    console.warn("List is to short");
+    return list;
+  }
+  if (index === -1) {
+    console.error("item not found in list");
+    return list.splice(0, totalItems);
+  }
+  let start = index - neighbourDistance;
+  if (start < 0) {
+    start += list.length;
+  }
+  const end = (index + neighbourDistance + 1) % list.length;
+  const result = [];
+  let ignoreOnce = list.length === totalItems;
+  for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {
+    result.push(list[i]);
+    if (end === i && ignoreOnce) {
+      ignoreOnce = false;
+    }
+  }
+  return result;
+};
+var createLoopingListWithIndex = (list, startIndex = 0, length = 0, forwards = true) => {
+  if (length < 0) {
+    console.warn(`createLoopingList: length must be >= 0, given ${length}`);
+  } else if (length === 0) {
+    length = list.length;
+  }
+  const returnList = [];
+  if (forwards) {
+    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {
+      returnList.push([i, list[i]]);
+    }
+  } else {
+    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {
+      returnList.push([i, list[i]]);
+    }
+  }
+  return returnList;
+};
+var createLoopingList = (list, startIndex = 0, length = 0, forwards = true) => {
+  return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item);
+};
+var moveItems = (list, move = 0) => {
+  const result = [];
+  let start = move;
+  if (start < 0) {
+    start = list.length - move;
+  }
+  start = start % list.length;
+  for (let i = 0; i < list.length; i++) {
+    result[i] = list[(i + start) % list.length];
+  }
+  return result;
+};
+function resolveSingleOrArray(value) {
+  if (Array.isArray(value)) {
+    return value;
+  } else if (value) {
+    return [value];
+  }
+  return [];
+}
+var ArrayUtil = {
+  unique: (list) => {
+    const seen = /* @__PURE__ */ new Set();
+    return list.filter((item) => {
+      if (seen.has(item)) {
+        return false;
+      }
+      seen.add(item);
+      return true;
+    });
+  },
+  difference: (list, removeList) => {
+    const remove = new Set(removeList);
+    return list.filter((item) => !remove.has(item));
+  },
+  moveItems,
+  resolveSingleOrArray
+};
+
 // src/global-contexts/LocaleContext.tsx
 import { createContext as createContext3, useContext as useContext3, useEffect as useEffect5, useMemo as useMemo5, useState as useState6 } from "react";
 
@@ -8830,7 +8767,7 @@ function CarouselTabs({
             },
             onClick: () => onChange(index),
             onKeyDown: (e) => handleKeyDown(e, index),
-            className: clsx5(
+            className: clsx6(
               "w-8 min-w-8 h-3 min-h-3 first:rounded-l-md last:rounded-r-md",
               {
                 "bg-carousel-dot-disabled hover:bg-carousel-dot-active": currentIndex !== index,
@@ -8865,7 +8802,7 @@ var CarouselSlide = forwardRef4(
         ...props,
         ref,
         id: `${id}-slide-${index}`,
-        className: clsx5("focus-style-none group/slide", props.className),
+        className: clsx6("focus-style-none group/slide", props.className),
         tabIndex: isSelected ? 0 : void 0,
         role: "group",
         "aria-roledescription": translation("slide"),
@@ -9014,7 +8951,7 @@ var Carousel = ({
     {
       ref: carouselContainerRef,
       ...props,
-      className: clsx5("flex-col-2 items-center w-full", props.className),
+      className: clsx6("flex-col-2 items-center w-full", props.className),
       id,
       role: "region",
       "aria-roledescription": translation("slide"),
@@ -9023,7 +8960,7 @@ var Carousel = ({
           "div",
           {
             ...slideContainerProps,
-            className: clsx5(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
+            className: clsx6(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
             children: [
               hintNext ? /* @__PURE__ */ jsxs7(
                 "div",
@@ -9032,7 +8969,7 @@ var Carousel = ({
                   onPointerMove: handlePointerMove,
                   onPointerUp: handlePointerUp,
                   onPointerLeave: handlePointerUp,
-                  className: clsx5(`flex-row-2 relative h-full`, heightClassName),
+                  className: clsx6(`flex-row-2 relative h-full`, heightClassName),
                   children: [
                     /* @__PURE__ */ jsx18("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
                       item,
@@ -9045,7 +8982,7 @@ var Carousel = ({
                           ref: isInItems ? slideRefs[index] : void 0,
                           index,
                           isSelected: isInItems && currentIndex === index,
-                          className: clsx5(
+                          className: clsx6(
                             `absolute left-[50%] h-full overflow-hidden transition-transform ease-in-out`,
                             slideClassName
                           ),
@@ -9062,13 +8999,13 @@ var Carousel = ({
                     /* @__PURE__ */ jsx18(
                       "div",
                       {
-                        className: clsx5(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+                        className: clsx6(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
                       }
                     ),
                     /* @__PURE__ */ jsx18(
                       "div",
                       {
-                        className: clsx5(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+                        className: clsx6(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
                       }
                     )
                   ]
@@ -9077,7 +9014,7 @@ var Carousel = ({
                 "div",
                 {
                   ref: slideRefs[currentIndex],
-                  className: clsx5("px-16 h-full"),
+                  className: clsx6("px-16 h-full"),
                   tabIndex: 0,
                   role: "group",
                   "aria-roledescription": translation("slide"),
@@ -9094,7 +9031,7 @@ var Carousel = ({
                   {
                     layout: "icon",
                     color: "neutral",
-                    className: clsx5("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
+                    className: clsx6("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
                     disabled: !canGoLeft(),
                     onClick: () => left(),
                     children: /* @__PURE__ */ jsx18(ChevronLeft, { size: 24 })
@@ -9105,7 +9042,7 @@ var Carousel = ({
                   {
                     layout: "icon",
                     color: "neutral",
-                    className: clsx5("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
+                    className: clsx6("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
                     disabled: !canGoRight(),
                     onClick: () => right(),
                     children: /* @__PURE__ */ jsx18(ChevronRight, { size: 24 })
@@ -9122,7 +9059,7 @@ var Carousel = ({
 };
 
 // src/components/layout/DividerInserter.tsx
-import clsx6 from "clsx";
+import clsx7 from "clsx";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var DividerInserter = ({
   children,
@@ -9140,7 +9077,7 @@ var DividerInserter = ({
       }
     }
   }
-  return /* @__PURE__ */ jsx19("div", { className: clsx6(className), ...restProps, children: nodes });
+  return /* @__PURE__ */ jsx19("div", { className: clsx7(className), ...restProps, children: nodes });
 };
 
 // src/hooks/focus/useFocusTrap.ts
@@ -9547,6 +9484,142 @@ var useTransitionState = ({
   };
 };
 
+// src/utils/propsUtil.ts
+function bool(isActive) {
+  return isActive ? "" : void 0;
+}
+function name(name2, props = {}) {
+  return props["data-name"] ? String(props["data-name"]) : name2;
+}
+function interactionStatesData(interactionStates) {
+  return {
+    "data-disabled": bool(!!interactionStates.disabled),
+    "data-invalid": bool(!!interactionStates.invalid),
+    "data-readonly": bool(!!interactionStates.readOnly),
+    "data-required": bool(!!interactionStates.required)
+  };
+}
+var dataAttributes = {
+  bool,
+  name,
+  interactionStates: interactionStatesData
+};
+function mouseEventExtender({
+  fromProps,
+  extensions
+}) {
+  return (event) => {
+    fromProps?.(event);
+    ArrayUtil.resolveSingleOrArray(extensions).forEach((element) => element(event));
+  };
+}
+function keyboardEventExtender({
+  fromProps,
+  extensions
+}) {
+  return (event) => {
+    fromProps?.(event);
+    ArrayUtil.resolveSingleOrArray(extensions).forEach((element) => element(event));
+  };
+}
+var extender = {
+  mouseEvent: mouseEventExtender,
+  keyboardEvent: keyboardEventExtender
+};
+function click(onClick) {
+  const keyboardEventHandler = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick();
+    }
+  };
+  return {
+    onClick,
+    onKeyDown: keyboardEventHandler
+  };
+}
+function close2(onClose) {
+  return (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      onClose?.();
+    }
+  };
+}
+function navigate({
+  left,
+  right,
+  up: up2,
+  down: down2
+}) {
+  return (event) => {
+    switch (event.key) {
+      case "ArrowLeft":
+        left(event);
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      case "ArrowRight":
+        right(event);
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      case "ArrowUp":
+        up2(event);
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      case "ArrowDown":
+        down2(event);
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+    }
+  };
+}
+function mergeProps(slotProps, childProps) {
+  const result = { ...childProps };
+  for (const key in slotProps) {
+    const slotValue = slotProps[key];
+    const childValue = childProps[key];
+    if (key === "className") {
+      result.className = [slotValue, childValue].filter(Boolean).join(" ");
+    } else if (key === "style") {
+      result.style = { ...slotValue, ...childValue };
+    } else if (key.startsWith("on") && typeof slotValue === "function" && typeof childValue === "function") {
+      result[key] = (...args) => {
+        slotValue(...args);
+        childValue(...args);
+      };
+    } else {
+      result[key] = childValue ?? slotValue;
+    }
+  }
+  return result;
+}
+function interactionStatesAria(interactionStates, props = {}) {
+  return {
+    "aria-disabled": props["aria-disabled"] ?? interactionStates.disabled,
+    "aria-invalid": props["aria-invalid"] ?? interactionStates.invalid,
+    "aria-readonly": props["aria-readonly"] ?? interactionStates.readOnly,
+    "aria-required": props["aria-required"] ?? interactionStates.required
+  };
+}
+var aria = {
+  close: close2,
+  click,
+  navigate,
+  interactionStates: interactionStatesAria
+};
+var PropsUtil = {
+  extender,
+  dataAttributes,
+  aria,
+  mergeProps
+};
+
 // src/components/layout/Drawer.tsx
 import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 var Drawer = forwardRef5(function Drawer2({
@@ -9655,7 +9728,7 @@ var Drawer = forwardRef5(function Drawer2({
 import { useEffect as useEffect11, useImperativeHandle as useImperativeHandle3, useRef as useRef7 } from "react";
 import { useState as useState12 } from "react";
 import { createContext as createContext5, forwardRef as forwardRef6, useCallback as useCallback9, useContext as useContext5, useId as useId6, useMemo as useMemo10 } from "react";
-import clsx7 from "clsx";
+import clsx8 from "clsx";
 
 // src/hooks/useOverwritableState.ts
 import { useEffect as useEffect10, useState as useState11 } from "react";
@@ -9821,7 +9894,7 @@ var Expandable = forwardRef6(function Expandable2({
         /* @__PURE__ */ jsx21(ExpandableContext.Consumer, { children: (ctx) => /* @__PURE__ */ jsx21(
           ExpandableContent,
           {
-            className: clsx7(contentClassName, { [contentExpandedClassName ?? ""]: !!ctx?.isExpanded }),
+            className: clsx8(contentClassName, { [contentExpandedClassName ?? ""]: !!ctx?.isExpanded }),
             children
           }
         ) })
@@ -9872,7 +9945,7 @@ import {
   useMemo as useMemo11,
   useCallback as useCallback10
 } from "react";
-import clsx8 from "clsx";
+import clsx9 from "clsx";
 import { ChevronDown as ChevronDown2, ChevronUp } from "lucide-react";
 import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 function InfiniteScroll({
@@ -9949,7 +10022,7 @@ function InfiniteScroll({
     {
       ref: containerRef,
       onScroll: isUsingInfiteScroll ? handleScroll : void 0,
-      className: clsx8("overflow-y-auto", className),
+      className: clsx9("overflow-y-auto", className),
       style,
       children: [
         /* @__PURE__ */ jsx23(Visibility, { isVisible: windowState.start > 0, children: /* @__PURE__ */ jsx23(Button, { color: "neutral", onClick: () => addToStart(), children: /* @__PURE__ */ jsx23(ChevronUp, {}) }) }),
@@ -9962,7 +10035,7 @@ function InfiniteScroll({
 
 // src/components/layout/ListBox.tsx
 import React2, { createContext as createContext6, forwardRef as forwardRef7, useCallback as useCallback11, useContext as useContext6, useEffect as useEffect12, useRef as useRef9, useState as useState14 } from "react";
-import { clsx as clsx9 } from "clsx";
+import { clsx as clsx10 } from "clsx";
 
 // src/utils/match.ts
 var match = (key, values) => {
@@ -10012,7 +10085,7 @@ var ListBoxItem = forwardRef7(
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-selected": selected ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: clsx9(
+        className: clsx10(
           "flex-row-1 items-center px-2 py-1 rounded-md",
           "data-highlighted:bg-primary/20",
           "data-disabled:text-disabled data-disabled:cursor-not-allowed",
@@ -10627,7 +10700,7 @@ function TabPanel({ label, ...props }) {
 }
 
 // src/components/layout/TextImage.tsx
-import clsx10 from "clsx";
+import clsx11 from "clsx";
 import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
 var TextImage = ({
   title,
@@ -10653,7 +10726,7 @@ var TextImage = ({
   return /* @__PURE__ */ jsx27(
     "div",
     {
-      className: clsx10("rounded-2xl w-full", className),
+      className: clsx11("rounded-2xl w-full", className),
       style: {
         backgroundImage: `url(${imageUrl})`,
         backgroundSize: "cover"
@@ -10661,9 +10734,9 @@ var TextImage = ({
       children: /* @__PURE__ */ jsxs12(
         "div",
         {
-          className: clsx10(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          className: clsx11(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
-            badge && /* @__PURE__ */ jsx27("div", { className: clsx10(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx27("span", { className: "text-lg font-bold", children: badge }) }),
+            badge && /* @__PURE__ */ jsx27("div", { className: clsx11(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx27("span", { className: "text-lg font-bold", children: badge }) }),
             /* @__PURE__ */ jsxs12("div", { className: "flex-col-1 overflow-hidden", children: [
               /* @__PURE__ */ jsx27("span", { className: "typography-title-lg", children: title }),
               /* @__PURE__ */ jsx27("span", { className: "text-ellipsis overflow-hidden", children: description })
@@ -10774,7 +10847,7 @@ var Portal = ({ children, container }) => {
 };
 
 // src/components/layout/dialog/Dialog.tsx
-import clsx11 from "clsx";
+import clsx12 from "clsx";
 
 // src/components/utils/FocusTrap.tsx
 import { useRef as useRef11 } from "react";
@@ -10886,7 +10959,7 @@ var Dialog = forwardRef9(function Dialog2({
       ref: containerRef,
       id: ids.container,
       "data-open": PropsUtil.dataAttributes.bool(isOpen),
-      className: clsx11("dialog-container", containerClassName),
+      className: clsx12("dialog-container", containerClassName),
       style: { zIndex },
       children: [
         /* @__PURE__ */ jsx30(
@@ -10896,7 +10969,7 @@ var Dialog = forwardRef9(function Dialog2({
             onClick: onCloseWrapper,
             "data-state": transitionState,
             "aria-hidden": true,
-            className: clsx11("dialog-background", backgroundClassName)
+            className: clsx12("dialog-background", backgroundClassName)
           }
         ),
         /* @__PURE__ */ jsx30(FocusTrap, { active: isPresent && isOpen, container: ref, children: /* @__PURE__ */ jsxs14(
@@ -10912,7 +10985,7 @@ var Dialog = forwardRef9(function Dialog2({
             "aria-modal": isModal,
             "aria-labelledby": ids.title,
             "aria-describedby": hasDescription ? ids.description : void 0,
-            className: clsx11("dialog-content", props.className),
+            className: clsx12("dialog-content", props.className),
             children: [
               /* @__PURE__ */ jsx30("div", { className: "typography-title-lg mr-8", children: titleElement }),
               /* @__PURE__ */ jsx30(Visibility, { isVisible: hasDescription, children: /* @__PURE__ */ jsx30("div", { className: "text-description", children: description }) }),
@@ -10948,19 +11021,6 @@ var Dialog = forwardRef9(function Dialog2({
 
 // src/components/layout/dialog/DialogOpener.tsx
 import { useMemo as useMemo13 } from "react";
-
-// src/utils/bagFunctions.ts
-var resolve = (bagFunctionOrValue, bag) => {
-  if (typeof bagFunctionOrValue === "function") {
-    return bagFunctionOrValue(bag);
-  }
-  return bagFunctionOrValue;
-};
-var BagFunctionUtil = {
-  resolve
-};
-
-// src/components/layout/dialog/DialogOpener.tsx
 function DialogOpenerWrapper({ children }) {
   const context = useDialogContext();
   const bag = useMemo13(() => ({
@@ -11020,7 +11080,7 @@ function DialogRoot({
 }
 
 // src/components/layout/dialog/premade/ConfirmDialog.tsx
-import clsx12 from "clsx";
+import clsx13 from "clsx";
 import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
 var ConfirmDialog = ({
   children,
@@ -11039,7 +11099,7 @@ var ConfirmDialog = ({
     positive: "positive",
     primary: "primary"
   };
-  return /* @__PURE__ */ jsxs15(Dialog, { ...restProps, onClose: onCancel, className: clsx12("justify-between", className), children: [
+  return /* @__PURE__ */ jsxs15(Dialog, { ...restProps, onClose: onCancel, className: clsx13("justify-between", className), children: [
     /* @__PURE__ */ jsx32("div", { className: "flex-col-2 grow", children }),
     /* @__PURE__ */ jsxs15("div", { className: "flex-row-4 mt-3 justify-end", children: [
       onCancel && /* @__PURE__ */ jsx32(
@@ -11549,12 +11609,12 @@ var MultiSelectRoot = ({ value, onValueChange, onEditComplete, ...props }) => {
 
 // src/components/user-interaction/select/SelectComponents.tsx
 import { forwardRef as forwardRef12, useEffect as useEffect19, useImperativeHandle as useImperativeHandle8, useRef as useRef16 } from "react";
-import clsx14 from "clsx";
+import clsx15 from "clsx";
 import { CheckIcon } from "lucide-react";
 
 // src/components/layout/popup/PopUp.tsx
 import { forwardRef as forwardRef11, useContext as useContext12, useImperativeHandle as useImperativeHandle7, useMemo as useMemo15 } from "react";
-import { clsx as clsx13 } from "clsx";
+import { clsx as clsx14 } from "clsx";
 
 // src/hooks/useOutsideClick.ts
 import { useEffect as useEffect18 } from "react";
@@ -11644,7 +11704,7 @@ var PopUp = forwardRef11(function PopUp2({
         transition: `top ${props.options?.pollingInterval ?? 100}ms linear, left ${props.options?.pollingInterval ?? 100}ms linear`,
         ...props.style
       },
-      className: clsx13("pop-up", props.className),
+      className: clsx14("pop-up", props.className),
       children
     }
   ) }) }) });
@@ -11686,7 +11746,7 @@ var SelectOption = forwardRef12(
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-selected": isSelected ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: clsx14(
+        className: clsx15(
           "flex-row-1 items-center px-2 py-1 rounded-md",
           "data-highlighted:bg-primary/20",
           "data-disabled:text-disabled data-disabled:cursor-not-allowed",
@@ -11712,7 +11772,7 @@ var SelectOption = forwardRef12(
           iconAppearance === "left" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ jsx38(
             CheckIcon,
             {
-              className: clsx14("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              className: clsx15("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           ),
@@ -11720,7 +11780,7 @@ var SelectOption = forwardRef12(
           iconAppearance === "right" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ jsx38(
             CheckIcon,
             {
-              className: clsx14("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              className: clsx15("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           )
@@ -11792,7 +11852,7 @@ var SelectButton = forwardRef12(function SelectButton2({
       "aria-expanded": state.isOpen,
       "aria-controls": state.isOpen ? ids.content : void 0,
       children: [
-        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ jsx38("div", { className: clsx14("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ jsxs16("span", { className: "flex-row-0", children: [
+        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ jsx38("div", { className: clsx15("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ jsxs16("span", { className: "flex-row-0", children: [
           label,
           index < state.value.length - 1 && /* @__PURE__ */ jsx38("span", { children: "," })
         ] }, value)) }) : placeholder ?? translation("clickToSelect"),
@@ -11864,7 +11924,7 @@ var SelectContent = forwardRef12(function SelectContent2({
                 break;
             }
           },
-          className: clsx14("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-outline-within overflow-auto", props.className),
+          className: clsx15("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-outline-within overflow-auto", props.className),
           role: "listbox",
           "aria-multiselectable": config.isMultiSelect,
           "aria-orientation": "vertical",
@@ -11957,7 +12017,7 @@ var LanguageDialog = ({
 
 // src/components/layout/dialog/premade/ThemeDialog.tsx
 import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
-import clsx15 from "clsx";
+import clsx16 from "clsx";
 
 // src/global-contexts/ThemeContext.tsx
 import { createContext as createContext11, useCallback as useCallback16, useContext as useContext13, useEffect as useEffect20, useMemo as useMemo16, useState as useState21 } from "react";
@@ -12048,11 +12108,11 @@ var useTheme = () => {
 import { jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
 var ThemeIcon = ({ theme, className }) => {
   if (theme === "dark") {
-    return /* @__PURE__ */ jsx42(MoonIcon, { className: clsx15("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx42(MoonIcon, { className: clsx16("w-4 h-4", className) });
   } else if (theme === "light") {
-    return /* @__PURE__ */ jsx42(SunIcon, { className: clsx15("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx42(SunIcon, { className: clsx16("w-4 h-4", className) });
   } else {
-    return /* @__PURE__ */ jsx42(MonitorCog, { className: clsx15("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx42(MonitorCog, { className: clsx16("w-4 h-4", className) });
   }
 };
 var ThemeDialog = ({
@@ -12098,14 +12158,14 @@ var ThemeDialog = ({
 
 // src/components/layout/loading/ErrorComponent.tsx
 import { AlertOctagon } from "lucide-react";
-import clsx16 from "clsx";
+import clsx17 from "clsx";
 import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
 var ErrorComponent = ({
   errorText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs20("div", { className: clsx16("flex-col-4 items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ jsxs20("div", { className: clsx17("flex-col-4 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ jsx43(AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
@@ -12115,14 +12175,14 @@ var ErrorComponent = ({
 import { useState as useState22 } from "react";
 
 // src/components/layout/loading/LoadingContainer.tsx
-import { clsx as clsx17 } from "clsx";
+import { clsx as clsx18 } from "clsx";
 import { jsx as jsx44 } from "react/jsx-runtime";
 var LoadingContainer = ({ className }) => {
-  return /* @__PURE__ */ jsx44("div", { className: clsx17("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
+  return /* @__PURE__ */ jsx44("div", { className: clsx18("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
 };
 
 // src/components/layout/loading/LoadingAndErrorComponent.tsx
-import { clsx as clsx18 } from "clsx";
+import { clsx as clsx19 } from "clsx";
 import { Fragment as Fragment4, jsx as jsx45 } from "react/jsx-runtime";
 var LoadingAndErrorComponent = ({
   children,
@@ -12143,23 +12203,23 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return /* @__PURE__ */ jsx45(Fragment4, { children: loadingComponent ?? /* @__PURE__ */ jsx45(LoadingContainer, { className: clsx18(className) }) });
+    return /* @__PURE__ */ jsx45(Fragment4, { children: loadingComponent ?? /* @__PURE__ */ jsx45(LoadingContainer, { className: clsx19(className) }) });
   }
   if (hasError) {
-    return /* @__PURE__ */ jsx45(Fragment4, { children: errorComponent ?? /* @__PURE__ */ jsx45(LoadingContainer, { className: clsx18("bg-negative", className) }) });
+    return /* @__PURE__ */ jsx45(Fragment4, { children: errorComponent ?? /* @__PURE__ */ jsx45(LoadingContainer, { className: clsx19("bg-negative", className) }) });
   }
   return /* @__PURE__ */ jsx45(Fragment4, { children });
 };
 
 // src/components/layout/loading/LoadingAnimation.tsx
-import clsx19 from "clsx";
+import clsx20 from "clsx";
 import { jsx as jsx46, jsxs as jsxs21 } from "react/jsx-runtime";
 var LoadingAnimation = ({
   loadingText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs21("div", { className: clsx19("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ jsxs21("div", { className: clsx20("flex-col-2 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ jsx46(HelpwaveLogo, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
@@ -12199,7 +12259,7 @@ var import_link2 = __toESM(require_link2());
 import { Menu as MenuIcon, XIcon } from "lucide-react";
 import { useEffect as useEffect21 } from "react";
 import { useCallback as useCallback17, useId as useId10, useRef as useRef17, useState as useState23 } from "react";
-import clsx20 from "clsx";
+import clsx21 from "clsx";
 import { Fragment as Fragment5, jsx as jsx48, jsxs as jsxs23 } from "react/jsx-runtime";
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
@@ -12263,7 +12323,7 @@ var NavigationItemWithSubItem = ({
         },
         onBlur,
         hidden: !isOpen,
-        className: clsx20(
+        className: clsx21(
           "fixed flex-col-4 p-4 bg-surface text-on-surface shadow-side shadow-hw-bottom rounded-md",
           { "opacity-0": !style }
         ),
@@ -12282,7 +12342,7 @@ var NavigationItemWithSubItem = ({
   ] });
 };
 var NavigationItemList = ({ items, ...restProps }) => {
-  return /* @__PURE__ */ jsx48("ul", { ...restProps, className: clsx20("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx48("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx48(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx48(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
+  return /* @__PURE__ */ jsx48("ul", { ...restProps, className: clsx21("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx48("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx48(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx48(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
   const [isMobileOpen, setIsMobileOpen] = useState23(false);
@@ -12297,7 +12357,7 @@ var Navigation = ({ ...props }) => {
       NavigationItemList,
       {
         ...props,
-        className: clsx20("hidden", { "desktop:flex": !isMobileOpen }, props.className)
+        className: clsx21("hidden", { "desktop:flex": !isMobileOpen }, props.className)
       }
     ),
     /* @__PURE__ */ jsx48(
@@ -12327,7 +12387,7 @@ var Navigation = ({ ...props }) => {
             event.stopPropagation();
           }
         },
-        className: clsx20(
+        className: clsx21(
           "flex-col-8 items-center justify-center fixed inset-0 p-8 w-screen h-screen bg-surface text-on-surface",
           {
             "desktop:hidden": isMobileOpen
@@ -12346,7 +12406,7 @@ var Navigation = ({ ...props }) => {
               children: /* @__PURE__ */ jsx48(XIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx48(NavigationItemList, { ...props, className: clsx20("flex-col-8", props.className) })
+          /* @__PURE__ */ jsx48(NavigationItemList, { ...props, className: clsx21("flex-col-8", props.className) })
         ]
       }
     )
@@ -12355,14 +12415,14 @@ var Navigation = ({ ...props }) => {
 
 // src/components/layout/navigation/Pagination.tsx
 import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
-import clsx22 from "clsx";
+import clsx23 from "clsx";
 import { useEffect as useEffect23, useState as useState25 } from "react";
 
 // src/components/user-interaction/Tooltip.tsx
 import { useEffect as useEffect22 } from "react";
 import { useId as useId11 } from "react";
 import { useCallback as useCallback18, useMemo as useMemo17, useRef as useRef18, useState as useState24 } from "react";
-import { clsx as clsx21 } from "clsx";
+import { clsx as clsx22 } from "clsx";
 import { jsx as jsx49, jsxs as jsxs24 } from "react/jsx-runtime";
 var Tooltip = ({
   tooltip,
@@ -12442,7 +12502,7 @@ var Tooltip = ({
     "div",
     {
       ref: anchor,
-      className: clsx21("relative inline-block", containerClassName),
+      className: clsx22("relative inline-block", containerClassName),
       "aria-describedby": isVisible ? id : void 0,
       onPointerEnter: openWithDelay,
       onPointerLeave: close3,
@@ -12465,7 +12525,7 @@ var Tooltip = ({
             "data-state": transitionState,
             "data-animated": isAnimated ? "" : void 0,
             role: "tooltip",
-            className: clsx21("tooltip", tooltipClassName),
+            className: clsx22("tooltip", tooltipClassName),
             style: { zIndex, position: "fixed" },
             children: tooltip
           }
@@ -12499,7 +12559,7 @@ var Pagination = ({
   const changePage = (page) => {
     onPageIndexChanged(page);
   };
-  return /* @__PURE__ */ jsxs25("div", { className: clsx22("flex-row-1", className), style, children: [
+  return /* @__PURE__ */ jsxs25("div", { className: clsx23("flex-row-1", className), style, children: [
     /* @__PURE__ */ jsx50(Tooltip, { tooltip: translation("first"), children: /* @__PURE__ */ jsx50(
       Button,
       {
@@ -12527,7 +12587,7 @@ var Pagination = ({
         Input,
         {
           value,
-          className: clsx22(
+          className: clsx23(
             "w-24 text-center font-bold input-indicator-hidden h-10"
           ),
           type: "number",
@@ -12583,7 +12643,7 @@ var Pagination = ({
 
 // src/components/layout/navigation/StepperBar.tsx
 import { Check, ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "lucide-react";
-import clsx23 from "clsx";
+import clsx24 from "clsx";
 import { jsx as jsx51, jsxs as jsxs26 } from "react/jsx-runtime";
 var defaultState = {
   currentStep: 0,
@@ -12609,7 +12669,7 @@ var StepperBar = ({
   return /* @__PURE__ */ jsxs26(
     "div",
     {
-      className: clsx23("flex-row-2 justify-between", className),
+      className: clsx24("flex-row-2 justify-between", className),
       children: [
         /* @__PURE__ */ jsx51("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ jsxs26(
           Button,
@@ -12631,7 +12691,7 @@ var StepperBar = ({
             "div",
             {
               onClick: () => seen && update(index),
-              className: clsx23(
+              className: clsx24(
                 "rounded-full w-4 h-4",
                 {
                   "bg-stepperbar-dot-active hover:brightness-75": index === currentStep && seen && !disabledSteps.has(currentStep),
@@ -12748,7 +12808,7 @@ function PopUpRoot({
 }
 
 // src/components/layout/table/FillerCell.tsx
-import clsx24 from "clsx";
+import clsx25 from "clsx";
 import { Minus } from "lucide-react";
 import { jsx as jsx53 } from "react/jsx-runtime";
 var FillerCell = ({ ...props }) => {
@@ -12756,7 +12816,7 @@ var FillerCell = ({ ...props }) => {
     "div",
     {
       ...props,
-      className: clsx24("table-filler-cell", props.className),
+      className: clsx25("table-filler-cell", props.className),
       children: /* @__PURE__ */ jsx53(Minus, { className: "max-w-4 max-h-4" })
     }
   );
@@ -13107,13 +13167,13 @@ var useResizeCallbackWrapper = (callback) => {
 };
 
 // src/components/layout/table/TableCell.tsx
-import { clsx as clsx25 } from "clsx";
+import { clsx as clsx26 } from "clsx";
 import { jsx as jsx54 } from "react/jsx-runtime";
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsx54("span", { className: clsx25("table-default-cell", className), children });
+  return /* @__PURE__ */ jsx54("span", { className: clsx26("table-default-cell", className), children });
 };
 
 // src/components/layout/table/TableProvider.tsx
@@ -13121,9 +13181,10 @@ import { jsx as jsx55 } from "react/jsx-runtime";
 var TableProvider = ({
   data,
   isUsingFillerRows = true,
-  fillerRow,
+  fillerRowCell,
   initialState,
   onRowClick,
+  onFillerRowClick,
   defaultColumn: defaultColumnOverwrite,
   state,
   columns: columnsProp,
@@ -13262,15 +13323,16 @@ var TableProvider = ({
     pagination,
     rowSelection,
     isUsingFillerRows,
-    fillerRow,
+    fillerRowCell,
     onRowClick,
+    onFillerRowClick,
     rows,
     columnOrder,
     columnFilters,
     columnVisibility,
     columnPinning,
     columnSorting
-  }), [table, data, pagination, rowSelection, isUsingFillerRows, fillerRow, onRowClick, columns, rows, columnOrder, columnFilters, columnVisibility, columnPinning, columnSorting]);
+  }), [table, data, pagination, rowSelection, isUsingFillerRows, fillerRowCell, onRowClick, onFillerRowClick, columns, rows, columnOrder, columnFilters, columnVisibility, columnPinning, columnSorting]);
   const tableColumnDefinitionContextValue = useMemo20(() => ({
     table,
     registerColumn
@@ -13289,11 +13351,21 @@ var TableProvider = ({
 // src/components/layout/table/TableBody.tsx
 import { flexRender } from "@tanstack/react-table";
 import React5 from "react";
-import clsx26 from "clsx";
+import clsx27 from "clsx";
 import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
 var TableBody = React5.memo(function TableBodyVisual() {
-  const { table, onRowClick, isUsingFillerRows, fillerRow, pagination, rows } = useTableDataContext();
-  const columns = table.getAllColumns();
+  const { table, onRowClick, onFillerRowClick, isUsingFillerRows, fillerRowCell, pagination, rows } = useTableDataContext();
+  const pinnedColumnsLeft = table.getState().columnPinning?.left ?? [];
+  const pinnedColumnsRight = table.getState().columnPinning?.right ?? [];
+  let columnOrder = table.getState().columnOrder;
+  columnOrder = [...pinnedColumnsLeft, ...columnOrder.filter((id) => !pinnedColumnsLeft.includes(id) && !pinnedColumnsRight.includes(id)), ...pinnedColumnsRight];
+  const columnVisibility = table.getState().columnVisibility;
+  const columns = columnOrder.map((id) => {
+    const column = table.getColumn(id);
+    if (!column) return null;
+    if (columnVisibility[id] === false) return null;
+    return column;
+  }).filter(Boolean);
   return /* @__PURE__ */ jsxs27("tbody", { children: [
     rows.map((row) => {
       return /* @__PURE__ */ jsx56(
@@ -13301,9 +13373,9 @@ var TableBody = React5.memo(function TableBodyVisual() {
         {
           onClick: () => onRowClick?.(row, table),
           "data-clickable": PropsUtil.dataAttributes.bool(!!onRowClick),
-          className: clsx26("table-body-row", BagFunctionUtil.resolve(table.options.meta?.bodyRowClassName, row.original)),
+          className: clsx27("table-body-row", BagFunctionUtil.resolve(table.options.meta?.bodyRowClassName, row.original)),
           children: row.getVisibleCells().map((cell) => {
-            return /* @__PURE__ */ jsx56("td", { className: clsx26("table-body-cell", cell.column.columnDef.meta?.className), children: flexRender(
+            return /* @__PURE__ */ jsx56("td", { className: clsx27("table-body-cell", cell.column.columnDef.meta?.className), children: flexRender(
               cell.column.columnDef.cell,
               cell.getContext()
             ) }, cell.id);
@@ -13312,21 +13384,30 @@ var TableBody = React5.memo(function TableBodyVisual() {
         row.id
       );
     }),
-    isUsingFillerRows && range(pagination.pageSize - rows.length, { allowEmptyRange: true }).map((row, index) => {
-      return /* @__PURE__ */ jsx56("tr", { className: clsx26("table-body-filler-row"), children: columns.map((column) => {
-        return /* @__PURE__ */ jsx56("td", { className: clsx26("table-body-filler-cell", column.columnDef.meta?.className), children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx56(FillerCell, {}) }, column.id);
-      }) }, "filler-row-" + index);
-    })
+    /* @__PURE__ */ jsx56(Visibility, { isVisible: isUsingFillerRows, children: range(pagination.pageSize - rows.length, { allowEmptyRange: true }).map((index) => {
+      return /* @__PURE__ */ jsx56(
+        "tr",
+        {
+          className: clsx27("table-body-filler-row"),
+          onClick: () => onFillerRowClick?.(index, table),
+          "data-clickable": PropsUtil.dataAttributes.bool(!!onFillerRowClick),
+          children: columns.map((column) => {
+            return /* @__PURE__ */ jsx56("td", { className: clsx27("table-body-filler-cell", column.columnDef.meta?.className), children: fillerRowCell ? fillerRowCell(column.id, table) : /* @__PURE__ */ jsx56(FillerCell, {}) }, column.id);
+          })
+        },
+        "filler-row-" + index
+      );
+    }) })
   ] });
 });
 
 // src/components/layout/table/TableHeader.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
-import clsx32 from "clsx";
+import clsx33 from "clsx";
 
 // src/components/layout/table/TableSortButton.tsx
 import { ChevronDown as ChevronDown3, ChevronsUpDown, ChevronUp as ChevronUp2 } from "lucide-react";
-import clsx27 from "clsx";
+import clsx28 from "clsx";
 import { jsx as jsx57, jsxs as jsxs28 } from "react/jsx-runtime";
 var TableSortButton = ({
   sortDirection,
@@ -13354,13 +13435,13 @@ var TableSortButton = ({
       layout: hasSortingIndex ? "default" : "icon",
       color,
       size,
-      className: clsx27("relative", className),
+      className: clsx28("relative", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx57(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ jsx57(
           "div",
           {
-            className: clsx27("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"),
+            className: clsx28("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"),
             children: `${index}.`
           }
         ) }),
@@ -13377,7 +13458,7 @@ import { useEffect as useEffect30, useId as useId14, useMemo as useMemo26, useRe
 // src/components/user-interaction/input/DateTimeInput.tsx
 import { forwardRef as forwardRef14, useCallback as useCallback21, useEffect as useEffect29, useId as useId13, useImperativeHandle as useImperativeHandle9, useMemo as useMemo24, useRef as useRef23, useState as useState30 } from "react";
 import { CalendarIcon } from "lucide-react";
-import clsx31 from "clsx";
+import clsx32 from "clsx";
 
 // src/utils/date.ts
 var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
@@ -13550,7 +13631,7 @@ var DateUtils = {
 };
 
 // src/components/user-interaction/date/DateTimePicker.tsx
-import clsx30 from "clsx";
+import clsx31 from "clsx";
 
 // src/components/user-interaction/date/TimePicker.tsx
 import { useEffect as useEffect27, useRef as useRef21 } from "react";
@@ -13672,7 +13753,7 @@ var TimePickerUncontrolled = ({
 // src/components/user-interaction/date/DatePicker.tsx
 import { useState as useState29 } from "react";
 import { ArrowDown, ArrowUp, Calendar, ChevronDown as ChevronDown4 } from "lucide-react";
-import clsx29 from "clsx";
+import clsx30 from "clsx";
 
 // src/components/user-interaction/date/DayPicker.tsx
 import { useMemo as useMemo21 } from "react";
@@ -13752,7 +13833,7 @@ var DayPickerUncontrolled = ({
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
 import { memo, useCallback as useCallback20, useEffect as useEffect28, useLayoutEffect as useLayoutEffect4, useMemo as useMemo22, useRef as useRef22, useState as useState28 } from "react";
-import clsx28 from "clsx";
+import clsx29 from "clsx";
 import { jsx as jsx60, jsxs as jsxs31 } from "react/jsx-runtime";
 var YearRow = memo(function YearRow2({
   year,
@@ -13778,7 +13859,7 @@ var YearRow = memo(function YearRow2({
       isExpanded,
       onExpandedChange: setIsExpanded,
       children: [
-        /* @__PURE__ */ jsx60(ExpandableHeader, { className: clsx28("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
+        /* @__PURE__ */ jsx60(ExpandableHeader, { className: clsx29("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
         /* @__PURE__ */ jsx60(ExpandableContent, { className: "gap-y-1 px-2 expandable-content-h-39", children: isExpanded && monthGrid.map((group, groupIdx) => /* @__PURE__ */ jsx60("div", { className: "flex-row-1", children: group.map((month) => {
           const monthIndex = DateUtils.monthsList.indexOf(month);
           const currentTimestamp = new Date(year, monthIndex).getTime();
@@ -13847,7 +13928,7 @@ var YearMonthPicker = ({
     InfiniteScroll,
     {
       itemCount: years.length,
-      className: clsx28("flex-col-1 h-full select-none", className),
+      className: clsx29("flex-col-1 h-full select-none", className),
       initialIndex: years.findIndex((year) => year === value.getFullYear()),
       children: (index) => {
         const year = years[index];
@@ -13902,14 +13983,14 @@ var DatePicker = ({
   const { locale } = useLocale();
   const [displayedMonth, setDisplayedMonth] = useState29(new Date(value.getFullYear(), value.getMonth(), 1));
   const [displayMode, setDisplayMode] = useState29(initialDisplay);
-  return /* @__PURE__ */ jsxs32("div", { className: clsx29("flex-col-3", className), children: [
+  return /* @__PURE__ */ jsxs32("div", { className: clsx30("flex-col-3", className), children: [
     /* @__PURE__ */ jsxs32("div", { className: "flex-row-2 items-center justify-between", children: [
       /* @__PURE__ */ jsxs32(
         Button,
         {
           size: "sm",
           coloringStyle: "text",
-          className: clsx29("flex-row-1 items-center cursor-pointer select-none", {
+          className: clsx30("flex-row-1 items-center cursor-pointer select-none", {
             "text-disabled": displayMode !== "day"
           }),
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
@@ -14049,7 +14130,7 @@ var DateTimePicker = ({
         ...timePickerProps,
         is24HourFormat,
         minuteIncrement,
-        className: clsx30({ "justify-between": mode === "time" }),
+        className: clsx31({ "justify-between": mode === "time" }),
         value,
         onValueChange,
         onEditComplete
@@ -14205,11 +14286,7 @@ var DateTimeInput = forwardRef14(function DateTimeInput2({
     label: `date-time-input-label-${id}`
   }), [id]);
   const innerRef = useRef23(null);
-  const containerRef = useRef23(null);
-  useImperativeHandle9(forwardedRef, () => ({
-    input: innerRef.current,
-    popup: containerRef.current
-  }));
+  useImperativeHandle9(forwardedRef, () => innerRef.current);
   useEffect29(() => {
     if (readOnly || disabled) {
       changeOpenWrapper(false);
@@ -14217,11 +14294,12 @@ var DateTimeInput = forwardRef14(function DateTimeInput2({
   }, [changeOpenWrapper, readOnly, disabled]);
   const clickHandler = PropsUtil.aria.click(() => changeOpenWrapper(true));
   return /* @__PURE__ */ jsxs35(Fragment7, { children: [
-    /* @__PURE__ */ jsxs35("div", { ...containerProps, ref: innerRef, className: clsx31("relative w-full", containerProps?.className), children: [
+    /* @__PURE__ */ jsxs35("div", { ...containerProps, className: clsx32("relative w-full", containerProps?.className), children: [
       /* @__PURE__ */ jsx64(
         "div",
         {
           ...props,
+          ref: innerRef,
           id: ids.input,
           onClick: (event) => {
             clickHandler.onClick();
@@ -14229,13 +14307,14 @@ var DateTimeInput = forwardRef14(function DateTimeInput2({
           },
           onKeyDown: clickHandler.onKeyDown,
           ...PropsUtil.dataAttributes.interactionStates({ disabled, readOnly, invalid, required }),
+          "data-value": PropsUtil.dataAttributes.bool(!!state),
           ...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props),
           tabIndex: 0,
           role: "combobox",
           "aria-haspopup": "dialog",
           "aria-expanded": isOpen,
           "aria-controls": isOpen ? ids.popup : void 0,
-          className: clsx31(
+          className: clsx32(
             "pr-10 w-full flex-row-2 items-center justify-between h-10 px-3 rounded-md input-element",
             "outline-offset-0 outline-primary focus:outline-1 focus:outline-offset-1 focus:border-primary duration-(--animation-duration-in)",
             { "hover:cursor-pointer": !readOnly },
@@ -14267,7 +14346,6 @@ var DateTimeInput = forwardRef14(function DateTimeInput2({
     /* @__PURE__ */ jsx64(
       PopUp,
       {
-        ref: containerRef,
         id: ids.popup,
         isOpen,
         anchor: innerRef,
@@ -14983,13 +15061,13 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
       },
       header.id
     )) }, headerGroup.id)),
-    /* @__PURE__ */ jsx68("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx68("tr", { className: clsx32("table-header-row", table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
+    /* @__PURE__ */ jsx68("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx68("tr", { className: clsx33("table-header-row", table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
       return /* @__PURE__ */ jsxs39(
         "th",
         {
           colSpan: header.colSpan,
           "data-sticky": isSticky ? "" : void 0,
-          className: clsx32("table-header-cell group/table-header-cell", header.column.columnDef.meta?.className),
+          className: clsx33("table-header-cell group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
             /* @__PURE__ */ jsx68(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs39("div", { className: "flex-row-1 items-center", children: [
               /* @__PURE__ */ jsx68(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ jsx68(
@@ -15061,7 +15139,7 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
 };
 
 // src/components/layout/table/TableDisplay.tsx
-import clsx33 from "clsx";
+import clsx34 from "clsx";
 import { jsx as jsx69, jsxs as jsxs40 } from "react/jsx-runtime";
 var TableDisplay = ({
   children,
@@ -15072,11 +15150,11 @@ var TableDisplay = ({
   const { table } = useTableDataContext();
   const { containerRef } = useTableContainerContext();
   const { sizeVars } = useTableHeaderContext();
-  return /* @__PURE__ */ jsx69("div", { ...containerProps, ref: containerRef, className: clsx33("table-container", containerProps?.className), children: /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsx69("div", { ...containerProps, ref: containerRef, className: clsx34("table-container", containerProps?.className), children: /* @__PURE__ */ jsxs40(
     "table",
     {
       ...props,
-      className: clsx33("table", props.className),
+      className: clsx34("table", props.className),
       style: {
         ...sizeVars,
         width: Math.floor(Math.max(table.getTotalSize(), containerRef.current?.offsetWidth ?? table.getTotalSize()))
@@ -15092,7 +15170,7 @@ var TableDisplay = ({
 
 // src/components/layout/table/TablePagination.tsx
 import { useEffect as useEffect32 } from "react";
-import clsx34 from "clsx";
+import clsx35 from "clsx";
 import { jsx as jsx70, jsxs as jsxs41 } from "react/jsx-runtime";
 var TablePaginationMenu = () => {
   const { table } = useTableDataContext();
@@ -15130,7 +15208,7 @@ var TablePageSizeSelect = ({
   );
 };
 var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props }) => {
-  return /* @__PURE__ */ jsx70("div", { ...props, className: clsx34("flex-row-2 items-center justify-center", props.className), children: /* @__PURE__ */ jsxs41("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsx70("div", { ...props, className: clsx35("flex-row-2 items-center justify-center", props.className), children: /* @__PURE__ */ jsxs41("div", { className: "relative", children: [
     /* @__PURE__ */ jsx70(TablePaginationMenu, {}),
     /* @__PURE__ */ jsx70(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ jsx70(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "absolute left-1/1 top-1/2 -translate-y-1/2 translate-x-4 h-10 min-w-24" } }) })
   ] }) });
@@ -15139,7 +15217,7 @@ var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props
 // src/components/user-interaction/Checkbox.tsx
 import { Check as Check2, Minus as Minus2 } from "lucide-react";
 import { useCallback as useCallback23 } from "react";
-import clsx35 from "clsx";
+import clsx36 from "clsx";
 import { jsx as jsx71, jsxs as jsxs42 } from "react/jsx-runtime";
 var Checkbox = ({
   value = false,
@@ -15183,7 +15261,7 @@ var Checkbox = ({
       tabIndex: disabled ? -1 : 0,
       "aria-checked": indeterminate ? "mixed" : value,
       ...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props),
-      className: clsx35("checkbox", props.className),
+      className: clsx36("checkbox", props.className),
       children: [
         /* @__PURE__ */ jsx71(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ jsx71(Minus2, { className: "checkbox-indicator", "aria-hidden": true }) }),
         /* @__PURE__ */ jsx71(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ jsx71(Check2, { className: "checkbox-indicator", "aria-hidden": true }) })
@@ -15213,7 +15291,7 @@ import { jsx as jsx72 } from "react/jsx-runtime";
 var TableWithSelectionProvider = ({
   children,
   state,
-  fillerRow,
+  fillerRowCell,
   rowSelection,
   disableClickRowClickSelection = false,
   selectionRowId = "selection",
@@ -15237,7 +15315,14 @@ var TableWithSelectionProvider = ({
         );
       },
       cell: ({ row }) => {
-        return /* @__PURE__ */ jsx72(Checkbox, { disabled: !row.getCanSelect(), value: row.getIsSelected(), onValueChange: row.getToggleSelectedHandler() });
+        return /* @__PURE__ */ jsx72(
+          Checkbox,
+          {
+            disabled: !row.getCanSelect(),
+            value: row.getIsSelected(),
+            onValueChange: row.getToggleSelectedHandler()
+          }
+        );
       },
       size: 60,
       minSize: 60,
@@ -15253,12 +15338,12 @@ var TableWithSelectionProvider = ({
     TableProvider,
     {
       ...props,
-      fillerRow: useCallback24((columnId, table) => {
+      fillerRowCell: useCallback24((columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ jsx72(Checkbox, { value: false, disabled: true, className: "max-w-6" });
+          return /* @__PURE__ */ jsx72(Checkbox, { value: false, disabled: true });
         }
-        return fillerRow?.(columnId, table) ?? /* @__PURE__ */ jsx72(FillerCell, {});
-      }, [fillerRow, selectionRowId]),
+        return fillerRowCell?.(columnId, table) ?? /* @__PURE__ */ jsx72(FillerCell, {});
+      }, [fillerRowCell, selectionRowId]),
       columns: columnDef,
       initialState: {
         ...props.initialState,
@@ -15283,11 +15368,11 @@ var TableWithSelectionProvider = ({
 };
 
 // src/components/layout/table/Table.tsx
-import clsx36 from "clsx";
+import clsx37 from "clsx";
 import { jsx as jsx73, jsxs as jsxs43 } from "react/jsx-runtime";
 var Table = ({ children, table, paginationOptions, displayProps, header, footer, ...props }) => {
   const { showPagination = true, allowChangingPageSize, pageSizeOptions } = paginationOptions ?? {};
-  return /* @__PURE__ */ jsx73("div", { ...props, className: clsx36("flex-col-3", props.className), children: /* @__PURE__ */ jsxs43(TableProvider, { ...table, children: [
+  return /* @__PURE__ */ jsx73("div", { ...props, className: clsx37("flex-col-3", props.className), children: /* @__PURE__ */ jsxs43(TableProvider, { ...table, children: [
     header,
     /* @__PURE__ */ jsx73(TableDisplay, { ...displayProps, children }),
     /* @__PURE__ */ jsx73(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ jsx73(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
@@ -15304,7 +15389,7 @@ var TableWithSelection = ({
   ...props
 }) => {
   const { showPagination = true, allowChangingPageSize, pageSizeOptions } = paginationOptions ?? {};
-  return /* @__PURE__ */ jsx73("div", { ...props, className: clsx36("flex-col-3", props.className), children: /* @__PURE__ */ jsxs43(TableWithSelectionProvider, { ...table, children: [
+  return /* @__PURE__ */ jsx73("div", { ...props, className: clsx37("flex-col-3", props.className), children: /* @__PURE__ */ jsxs43(TableWithSelectionProvider, { ...table, children: [
     header,
     /* @__PURE__ */ jsx73(TableDisplay, { ...displayProps, children }),
     /* @__PURE__ */ jsx73(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ jsx73(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
@@ -15614,7 +15699,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
 import { useState as useState34 } from "react";
-import { clsx as clsx37 } from "clsx";
+import { clsx as clsx38 } from "clsx";
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -15657,7 +15742,7 @@ var CopyToClipboardWrapper = ({
   return /* @__PURE__ */ jsxs45(
     "div",
     {
-      className: clsx37("relative inline-block cursor-copy", containerClassName),
+      className: clsx38("relative inline-block cursor-copy", containerClassName),
       onMouseEnter: () => {
         setIsShowingIndication(true);
       },
@@ -15675,7 +15760,7 @@ var CopyToClipboardWrapper = ({
         /* @__PURE__ */ jsxs45(
           "div",
           {
-            className: clsx37(
+            className: clsx38(
               `absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
            shadow-around-md bg-tooltip-background cursor-default pointer-events-none`,
               "transition-opacity duration-200",
@@ -15698,7 +15783,7 @@ var CopyToClipboardWrapper = ({
               /* @__PURE__ */ jsx76(
                 "div",
                 {
-                  className: clsx37(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: clsx38(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -15712,7 +15797,7 @@ var CopyToClipboardWrapper = ({
 
 // src/components/user-interaction/Menu.tsx
 import { useCallback as useCallback25, useRef as useRef26 } from "react";
-import clsx38 from "clsx";
+import clsx39 from "clsx";
 
 // src/hooks/useHoverState.ts
 import { useEffect as useEffect34, useState as useState35 } from "react";
@@ -15768,7 +15853,7 @@ var MenuItem = ({
 }) => /* @__PURE__ */ jsx77(
   "div",
   {
-    className: clsx38("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+    className: clsx39("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
       "text-disabled cursor-not-allowed": isDisabled,
       "text-menu-text hover:bg-primary/20": !isDisabled,
       "cursor-pointer": !!onClick
@@ -15816,7 +15901,7 @@ var Menu = ({
 
 // src/components/user-interaction/ScrollPicker.tsx
 import { useCallback as useCallback26, useEffect as useEffect35, useState as useState36 } from "react";
-import clsx39 from "clsx";
+import clsx40 from "clsx";
 import { jsx as jsx78, jsxs as jsxs47 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
@@ -15986,7 +16071,7 @@ var ScrollPicker = ({
             children: shownItems.map(({ name: name2, index }, arrayIndex) => /* @__PURE__ */ jsx78(
               "div",
               {
-                className: clsx39(
+                className: clsx40(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -16014,7 +16099,7 @@ var ScrollPicker = ({
 
 // src/components/user-interaction/Textarea.tsx
 import { forwardRef as forwardRef16, useId as useId16 } from "react";
-import clsx40 from "clsx";
+import clsx41 from "clsx";
 import { jsx as jsx79, jsxs as jsxs48 } from "react/jsx-runtime";
 var Textarea = forwardRef16(function Textarea2({
   invalid = false,
@@ -16081,7 +16166,7 @@ var TextareaWithHeadline = ({
   return /* @__PURE__ */ jsxs48(
     "div",
     {
-      className: clsx40(
+      className: clsx41(
         "group flex-col-3 border-2 rounded-lg",
         {
           "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
@@ -16090,13 +16175,13 @@ var TextareaWithHeadline = ({
         containerClassName
       ),
       children: [
-        headline && /* @__PURE__ */ jsx79("label", { ...headlineProps, htmlFor: usedId, className: clsx40("typography-lable-md text-label", headlineProps.className), children: headline }),
+        headline && /* @__PURE__ */ jsx79("label", { ...headlineProps, htmlFor: usedId, className: clsx41("typography-lable-md text-label", headlineProps.className), children: headline }),
         /* @__PURE__ */ jsx79(
           Textarea,
           {
             ...props,
             id: usedId,
-            className: clsx40(
+            className: clsx41(
               "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
               className
             )
@@ -16151,7 +16236,7 @@ var TimeDisplay = ({
 // src/components/user-interaction/input/InsideLabelInput.tsx
 import { useId as useId17 } from "react";
 import { forwardRef as forwardRef17, useState as useState37 } from "react";
-import clsx41 from "clsx";
+import clsx42 from "clsx";
 import { jsx as jsx81, jsxs as jsxs49 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef17(function InsideLabelInput2({
   id: customId,
@@ -16162,13 +16247,13 @@ var InsideLabelInput = forwardRef17(function InsideLabelInput2({
   const [isFocused, setIsFocused] = useState37(false);
   const generatedId = useId17();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ jsxs49("div", { className: clsx41("relative"), children: [
+  return /* @__PURE__ */ jsxs49("div", { className: clsx42("relative"), children: [
     /* @__PURE__ */ jsx81(
       Input,
       {
         ...props,
         id,
-        className: clsx41("h-14 px-4 pb-2 py-6.5", props.className),
+        className: clsx42("h-14 px-4 pb-2 py-6.5", props.className),
         ref: forwardedRef,
         "aria-labelledby": id + "-label",
         onFocus: (event) => {
@@ -16187,7 +16272,7 @@ var InsideLabelInput = forwardRef17(function InsideLabelInput2({
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: clsx41(
+        className: clsx42(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -16215,7 +16300,7 @@ var InsideLabelInputUncontrolled = ({
 
 // src/components/user-interaction/input/SearchBar.tsx
 import { Search } from "lucide-react";
-import { clsx as clsx42 } from "clsx";
+import { clsx as clsx43 } from "clsx";
 import { jsx as jsx82, jsxs as jsxs50 } from "react/jsx-runtime";
 var SearchBar = ({
   value: initialValue,
@@ -16227,7 +16312,7 @@ var SearchBar = ({
 }) => {
   const translation = useHightideTranslation();
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ jsxs50("div", { ...containerProps, className: clsx42("relative", containerProps?.className), children: [
+  return /* @__PURE__ */ jsxs50("div", { ...containerProps, className: clsx43("relative", containerProps?.className), children: [
     /* @__PURE__ */ jsx82(
       InputUncontrolled,
       {
@@ -16236,7 +16321,7 @@ var SearchBar = ({
         onValueChange: setValue,
         onEditComplete: onSearch,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: clsx42("pr-10 w-full", inputProps.className)
+        className: clsx43("pr-10 w-full", inputProps.className)
       }
     ),
     /* @__PURE__ */ jsx82(
@@ -16248,7 +16333,7 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: () => onSearch(value),
-        className: clsx42("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        className: clsx43("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
         children: /* @__PURE__ */ jsx82(Search, { className: "w-full h-full" })
       }
     )
@@ -16258,7 +16343,7 @@ var SearchBar = ({
 // src/components/user-interaction/input/ToggleableInput.tsx
 import { forwardRef as forwardRef18, useEffect as useEffect36, useImperativeHandle as useImperativeHandle10, useRef as useRef27, useState as useState38 } from "react";
 import { Pencil } from "lucide-react";
-import clsx43 from "clsx";
+import clsx44 from "clsx";
 import { jsx as jsx83, jsxs as jsxs51 } from "react/jsx-runtime";
 var ToggleableInput = forwardRef18(function ToggleableInput2({
   value,
@@ -16274,7 +16359,7 @@ var ToggleableInput = forwardRef18(function ToggleableInput2({
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs51("div", { className: clsx43("relative flex-row-2", { "flex-1": isEditing }), children: [
+  return /* @__PURE__ */ jsxs51("div", { className: clsx44("relative flex-row-2", { "flex-1": isEditing }), children: [
     /* @__PURE__ */ jsx83(
       Input,
       {
@@ -16296,14 +16381,14 @@ var ToggleableInput = forwardRef18(function ToggleableInput2({
         },
         "data-name": props["data-name"] ?? "togglable-input",
         "data-isEditing": isEditing ? "" : void 0,
-        className: clsx43(`w-full rounded-md`, {
+        className: clsx44(`w-full rounded-md`, {
           "text-transparent": !isEditing
         })
       }
     ),
     !isEditing && /* @__PURE__ */ jsxs51("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsx83("span", { className: clsx43(" truncate"), children: value }),
-      /* @__PURE__ */ jsx83(Pencil, { className: clsx43(`size-force-4`, { "text-transparent": isEditing }) })
+      /* @__PURE__ */ jsx83("span", { className: clsx44(" truncate"), children: value }),
+      /* @__PURE__ */ jsx83(Pencil, { className: clsx44(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -17451,6 +17536,8 @@ export {
   FormContext,
   FormField,
   FormFieldLayout,
+  FormObserver,
+  FormObserverKey,
   FormProvider,
   FormStore,
   GenericFilter,
@@ -17615,6 +17702,8 @@ export {
   useFocusTrap,
   useForm,
   useFormField,
+  useFormObserver,
+  useFormObserverKey,
   useHandleRefs,
   useHightideConfig,
   useHightideTranslation,