@helpwave/hightide 0.6.8 → 0.6.10

package/dist/index.js

@@ -6297,6 +6297,8 @@ __export(index_exports, {
   FormContext: () => FormContext,
   FormField: () => FormField,
   FormFieldLayout: () => FormFieldLayout,
+  FormObserver: () => FormObserver,
+  FormObserverKey: () => FormObserverKey,
   FormProvider: () => FormProvider,
   FormStore: () => FormStore,
   GenericFilter: () => GenericFilter,
@@ -6461,6 +6463,8 @@ __export(index_exports, {
   useFocusTrap: () => useFocusTrap,
   useForm: () => useForm,
   useFormField: () => useFormField,
+  useFormObserver: () => useFormObserver,
+  useFormObserverKey: () => useFormObserverKey,
   useHandleRefs: () => useHandleRefs,
   useHightideConfig: () => useHightideConfig,
   useHightideTranslation: () => useHightideTranslation,
@@ -7167,277 +7171,7 @@ var TagIcon = ({
 
 // src/components/form/FieldLayout.tsx
 var import_react5 = require("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
+var import_clsx5 = __toESM(require("clsx"));
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var FormFieldLayout = (0, import_react5.forwardRef)(function FormFieldLayout2({
   children,
@@ -7451,6 +7185,7 @@ var FormFieldLayout = (0, import_react5.forwardRef)(function FormFieldLayout2({
   invalidDescriptionProps,
   description,
   descriptionProps,
+  showRequiredIndicator = true,
   ...props
 }, ref) {
   const generatedId = (0, import_react5.useId)();
@@ -7488,7 +7223,7 @@ var FormFieldLayout = (0, import_react5.forwardRef)(function FormFieldLayout2({
     {
       ...props,
       ref,
-      "data-name": PropsUtil.dataAttributes.name("form-field-container", props),
+      className: (0, import_clsx5.default)("form-field-container", props.className),
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "label",
@@ -7496,10 +7231,10 @@ var FormFieldLayout = (0, import_react5.forwardRef)(function FormFieldLayout2({
             ...labelProps,
             id: ids.label,
             htmlFor: ids.input,
-            "data-name": "form-field-label",
+            className: (0, import_clsx5.default)("form-field-label", labelProps?.className),
             children: [
               label,
-              required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { role: "none", className: "bg-primary w-2 h-2 rounded-full" })
+              showRequiredIndicator && required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { role: "none", className: "bg-primary w-2 h-2 rounded-full" })
             ]
           }
         ),
@@ -7508,7 +7243,7 @@ var FormFieldLayout = (0, import_react5.forwardRef)(function FormFieldLayout2({
           {
             ...descriptionProps,
             id: ids.description,
-            "data-name": "form-field-description",
+            className: (0, import_clsx5.default)("form-field-description", descriptionProps?.className),
             children: description
           }
         ),
@@ -7518,10 +7253,10 @@ var FormFieldLayout = (0, import_react5.forwardRef)(function FormFieldLayout2({
           {
             ...invalidDescriptionProps,
             id: ids.description,
-            "data-name": "form-field-error",
             role: "alert",
             "aria-hidden": !invalid,
             "aria-live": "polite",
+            className: (0, import_clsx5.default)("form-field-error", invalidDescriptionProps?.className),
             children: invalidDescription
           }
         )
@@ -7542,13 +7277,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 = (0, import_react6.useContext)(FormContext);
   const subscribe = (0, import_react6.useCallback)((cb) => {
     if (!context) return () => {
     };
     return context.store.subscribe(key, cb);
   }, [context, key]);
+  const subscribeAll = (0, import_react6.useCallback)((cb) => {
+    if (!context) return () => {
+    };
+    return context.store.subscribe("ALL", cb);
+  }, [context]);
   const value = (0, import_react6.useSyncExternalStore)(
     subscribe,
     () => context ? context.store.getValue(key) : void 0
@@ -7557,31 +7297,85 @@ function useFormField(key, { triggerUpdate = true }) {
     subscribe,
     () => context ? context.store.getError(key) : void 0
   );
+  const touched = (0, import_react6.useSyncExternalStore)(
+    subscribe,
+    () => context ? context.store.getTouched(key) : void 0
+  );
+  const hasTriedSubmitting = (0, import_react6.useSyncExternalStore)(
+    subscribeAll,
+    () => context ? context.store.getHasTriedSubmitting() : void 0
+  );
+  const isShowingErrors = validationBehaviour === "always" || validationBehaviour === "touched" && (touched ?? false) || validationBehaviour === "submit" && (hasTriedSubmitting ?? false);
   const getDataProps = (0, import_react6.useCallback)(() => {
     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 = (0, import_react6.useContext)(FormContext);
+  const store = formStore ?? context?.store;
+  const subscribe = (0, import_react6.useCallback)((cb) => {
+    if (!store) return () => {
+    };
+    return store.subscribe("ALL", cb);
+  }, [store]);
+  const values = (0, import_react6.useSyncExternalStore)(subscribe, () => store ? store.getAllValues() : void 0);
+  const errors = (0, import_react6.useSyncExternalStore)(subscribe, () => store ? store.getErrors() : void 0);
+  const touched = (0, import_react6.useSyncExternalStore)(subscribe, () => store ? store.getAllTouched() : void 0);
+  const hasErrors = (0, import_react6.useSyncExternalStore)(subscribe, () => store ? store.getHasError() : void 0);
+  const hasTriedSubmitting = (0, import_react6.useSyncExternalStore)(subscribe, () => store ? store.getHasTriedSubmitting() : void 0);
+  if (!store) return null;
+  return {
+    store,
+    values,
+    errors,
+    touched,
+    hasErrors,
+    hasTriedSubmitting
+  };
+}
+function useFormObserverKey({ formStore, key }) {
+  const context = (0, import_react6.useContext)(FormContext);
+  const store = formStore ?? context?.store;
+  const subscribe = (0, import_react6.useCallback)((cb) => {
+    if (!store) return () => {
+    };
+    return store.subscribe(key, cb);
+  }, [store, key]);
+  const value = (0, import_react6.useSyncExternalStore)(subscribe, () => store ? store.getValue(key) : void 0);
+  const error = (0, import_react6.useSyncExternalStore)(subscribe, () => store ? store.getError(key) : void 0);
+  const touched = (0, import_react6.useSyncExternalStore)(subscribe, () => store ? store.getTouched(key) : void 0);
+  if (!store) return null;
+  return {
+    store,
+    value,
+    error,
+    touched,
+    hasError: !!error
+  };
+}
 
 // src/components/form/FormField.tsx
 var import_jsx_runtime14 = require("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>");
   }
@@ -7593,20 +7387,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 = {};
@@ -7623,7 +7444,6 @@ var FormStore = class {
       });
     }
     this.validators = validators;
-    this.validationBehaviour = validationBehaviour;
     this.validateAll();
   }
   // Values
@@ -7636,8 +7456,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({
@@ -7669,10 +7489,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
@@ -7694,10 +7516,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 };
@@ -7705,8 +7525,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;
     }
@@ -7744,7 +7563,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;
@@ -7779,7 +7597,6 @@ function useCreateForm({
   initialValues,
   hasTriedSubmitting,
   validators,
-  validationBehaviour,
   scrollToElements = true,
   scrollOptions = { behavior: "smooth", block: "center" }
 }) {
@@ -7787,13 +7604,9 @@ function useCreateForm({
     new FormStore({
       initialValues,
       hasTriedSubmitting,
-      validators,
-      validationBehaviour
+      validators
     })
   );
-  (0, import_react7.useEffect)(() => {
-    storeRef.current.changeValidationBehavoir(validationBehaviour);
-  }, [validationBehaviour]);
   (0, import_react7.useEffect)(() => {
     storeRef.current.changeValidators(validators);
   }, [validators]);
@@ -7864,12 +7677,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,
@@ -8162,9 +7970,142 @@ var AnchoredFloatingContainer = (0, import_react9.forwardRef)(function FloatingC
 
 // src/components/layout/Carousel.tsx
 var import_react14 = require("react");
-var import_clsx5 = __toESM(require("clsx"));
+var import_clsx6 = __toESM(require("clsx"));
 var import_lucide_react3 = require("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
 var import_react12 = require("react");
 
@@ -9078,7 +9019,7 @@ function CarouselTabs({
             },
             onClick: () => onChange(index),
             onKeyDown: (e) => handleKeyDown(e, index),
-            className: (0, import_clsx5.default)(
+            className: (0, import_clsx6.default)(
               "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,
@@ -9113,7 +9054,7 @@ var CarouselSlide = (0, import_react14.forwardRef)(
         ...props,
         ref,
         id: `${id}-slide-${index}`,
-        className: (0, import_clsx5.default)("focus-style-none group/slide", props.className),
+        className: (0, import_clsx6.default)("focus-style-none group/slide", props.className),
         tabIndex: isSelected ? 0 : void 0,
         role: "group",
         "aria-roledescription": translation("slide"),
@@ -9262,7 +9203,7 @@ var Carousel = ({
     {
       ref: carouselContainerRef,
       ...props,
-      className: (0, import_clsx5.default)("flex-col-2 items-center w-full", props.className),
+      className: (0, import_clsx6.default)("flex-col-2 items-center w-full", props.className),
       id,
       role: "region",
       "aria-roledescription": translation("slide"),
@@ -9271,7 +9212,7 @@ var Carousel = ({
           "div",
           {
             ...slideContainerProps,
-            className: (0, import_clsx5.default)(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
+            className: (0, import_clsx6.default)(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
             children: [
               hintNext ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                 "div",
@@ -9280,7 +9221,7 @@ var Carousel = ({
                   onPointerMove: handlePointerMove,
                   onPointerUp: handlePointerUp,
                   onPointerLeave: handlePointerUp,
-                  className: (0, import_clsx5.default)(`flex-row-2 relative h-full`, heightClassName),
+                  className: (0, import_clsx6.default)(`flex-row-2 relative h-full`, heightClassName),
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
                       item,
@@ -9293,7 +9234,7 @@ var Carousel = ({
                           ref: isInItems ? slideRefs[index] : void 0,
                           index,
                           isSelected: isInItems && currentIndex === index,
-                          className: (0, import_clsx5.default)(
+                          className: (0, import_clsx6.default)(
                             `absolute left-[50%] h-full overflow-hidden transition-transform ease-in-out`,
                             slideClassName
                           ),
@@ -9310,13 +9251,13 @@ var Carousel = ({
                     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       "div",
                       {
-                        className: (0, import_clsx5.default)(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+                        className: (0, import_clsx6.default)(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       "div",
                       {
-                        className: (0, import_clsx5.default)(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+                        className: (0, import_clsx6.default)(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
                       }
                     )
                   ]
@@ -9325,7 +9266,7 @@ var Carousel = ({
                 "div",
                 {
                   ref: slideRefs[currentIndex],
-                  className: (0, import_clsx5.default)("px-16 h-full"),
+                  className: (0, import_clsx6.default)("px-16 h-full"),
                   tabIndex: 0,
                   role: "group",
                   "aria-roledescription": translation("slide"),
@@ -9342,7 +9283,7 @@ var Carousel = ({
                   {
                     layout: "icon",
                     color: "neutral",
-                    className: (0, import_clsx5.default)("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
+                    className: (0, import_clsx6.default)("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
                     disabled: !canGoLeft(),
                     onClick: () => left(),
                     children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react3.ChevronLeft, { size: 24 })
@@ -9353,7 +9294,7 @@ var Carousel = ({
                   {
                     layout: "icon",
                     color: "neutral",
-                    className: (0, import_clsx5.default)("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
+                    className: (0, import_clsx6.default)("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
                     disabled: !canGoRight(),
                     onClick: () => right(),
                     children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react3.ChevronRight, { size: 24 })
@@ -9370,7 +9311,7 @@ var Carousel = ({
 };
 
 // src/components/layout/DividerInserter.tsx
-var import_clsx6 = __toESM(require("clsx"));
+var import_clsx7 = __toESM(require("clsx"));
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var DividerInserter = ({
   children,
@@ -9388,7 +9329,7 @@ var DividerInserter = ({
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_clsx6.default)(className), ...restProps, children: nodes });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_clsx7.default)(className), ...restProps, children: nodes });
 };
 
 // src/hooks/focus/useFocusTrap.ts
@@ -9795,6 +9736,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
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var Drawer = (0, import_react18.forwardRef)(function Drawer2({
@@ -9903,7 +9980,7 @@ var Drawer = (0, import_react18.forwardRef)(function Drawer2({
 var import_react20 = require("react");
 var import_react21 = require("react");
 var import_react22 = require("react");
-var import_clsx7 = __toESM(require("clsx"));
+var import_clsx8 = __toESM(require("clsx"));
 
 // src/hooks/useOverwritableState.ts
 var import_react19 = require("react");
@@ -10069,7 +10146,7 @@ var Expandable = (0, import_react22.forwardRef)(function Expandable2({
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ExpandableContext.Consumer, { children: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           ExpandableContent,
           {
-            className: (0, import_clsx7.default)(contentClassName, { [contentExpandedClassName ?? ""]: !!ctx?.isExpanded }),
+            className: (0, import_clsx8.default)(contentClassName, { [contentExpandedClassName ?? ""]: !!ctx?.isExpanded }),
             children
           }
         ) })
@@ -10114,7 +10191,7 @@ var FAQSection = ({
 
 // src/components/layout/InifiniteScroll.tsx
 var import_react23 = require("react");
-var import_clsx8 = __toESM(require("clsx"));
+var import_clsx9 = __toESM(require("clsx"));
 var import_lucide_react5 = require("lucide-react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function InfiniteScroll({
@@ -10191,7 +10268,7 @@ function InfiniteScroll({
     {
       ref: containerRef,
       onScroll: isUsingInfiteScroll ? handleScroll : void 0,
-      className: (0, import_clsx8.default)("overflow-y-auto", className),
+      className: (0, import_clsx9.default)("overflow-y-auto", className),
       style,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Visibility, { isVisible: windowState.start > 0, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { color: "neutral", onClick: () => addToStart(), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react5.ChevronUp, {}) }) }),
@@ -10204,7 +10281,7 @@ function InfiniteScroll({
 
 // src/components/layout/ListBox.tsx
 var import_react24 = __toESM(require("react"));
-var import_clsx9 = require("clsx");
+var import_clsx10 = require("clsx");
 
 // src/utils/match.ts
 var match = (key, values) => {
@@ -10254,7 +10331,7 @@ var ListBoxItem = (0, import_react24.forwardRef)(
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-selected": selected ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: (0, import_clsx9.clsx)(
+        className: (0, import_clsx10.clsx)(
           "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",
@@ -10869,7 +10946,7 @@ function TabPanel({ label, ...props }) {
 }
 
 // src/components/layout/TextImage.tsx
-var import_clsx10 = __toESM(require("clsx"));
+var import_clsx11 = __toESM(require("clsx"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var TextImage = ({
   title,
@@ -10895,7 +10972,7 @@ var TextImage = ({
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
-      className: (0, import_clsx10.default)("rounded-2xl w-full", className),
+      className: (0, import_clsx11.default)("rounded-2xl w-full", className),
       style: {
         backgroundImage: `url(${imageUrl})`,
         backgroundSize: "cover"
@@ -10903,9 +10980,9 @@ var TextImage = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         "div",
         {
-          className: (0, import_clsx10.default)(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          className: (0, import_clsx11.default)(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
-            badge && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: (0, import_clsx10.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
+            badge && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: (0, import_clsx11.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
             /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-col-1 overflow-hidden", children: [
               /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "typography-title-lg", children: title }),
               /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-ellipsis overflow-hidden", children: description })
@@ -11016,7 +11093,7 @@ var Portal = ({ children, container }) => {
 };
 
 // src/components/layout/dialog/Dialog.tsx
-var import_clsx11 = __toESM(require("clsx"));
+var import_clsx12 = __toESM(require("clsx"));
 
 // src/components/utils/FocusTrap.tsx
 var import_react28 = require("react");
@@ -11128,7 +11205,7 @@ var Dialog = (0, import_react33.forwardRef)(function Dialog2({
       ref: containerRef,
       id: ids.container,
       "data-open": PropsUtil.dataAttributes.bool(isOpen),
-      className: (0, import_clsx11.default)("dialog-container", containerClassName),
+      className: (0, import_clsx12.default)("dialog-container", containerClassName),
       style: { zIndex },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -11138,7 +11215,7 @@ var Dialog = (0, import_react33.forwardRef)(function Dialog2({
             onClick: onCloseWrapper,
             "data-state": transitionState,
             "aria-hidden": true,
-            className: (0, import_clsx11.default)("dialog-background", backgroundClassName)
+            className: (0, import_clsx12.default)("dialog-background", backgroundClassName)
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FocusTrap, { active: isPresent && isOpen, container: ref, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
@@ -11154,7 +11231,7 @@ var Dialog = (0, import_react33.forwardRef)(function Dialog2({
             "aria-modal": isModal,
             "aria-labelledby": ids.title,
             "aria-describedby": hasDescription ? ids.description : void 0,
-            className: (0, import_clsx11.default)("dialog-content", props.className),
+            className: (0, import_clsx12.default)("dialog-content", props.className),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "typography-title-lg mr-8", children: titleElement }),
               /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Visibility, { isVisible: hasDescription, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-description", children: description }) }),
@@ -11190,19 +11267,6 @@ var Dialog = (0, import_react33.forwardRef)(function Dialog2({
 
 // src/components/layout/dialog/DialogOpener.tsx
 var import_react34 = require("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 = (0, import_react34.useMemo)(() => ({
@@ -11262,7 +11326,7 @@ function DialogRoot({
 }
 
 // src/components/layout/dialog/premade/ConfirmDialog.tsx
-var import_clsx12 = __toESM(require("clsx"));
+var import_clsx13 = __toESM(require("clsx"));
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var ConfirmDialog = ({
   children,
@@ -11281,7 +11345,7 @@ var ConfirmDialog = ({
     positive: "positive",
     primary: "primary"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Dialog, { ...restProps, onClose: onCancel, className: (0, import_clsx12.default)("justify-between", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Dialog, { ...restProps, onClose: onCancel, className: (0, import_clsx13.default)("justify-between", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-col-2 grow", children }),
     /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex-row-4 mt-3 justify-end", children: [
       onCancel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -11789,12 +11853,12 @@ var MultiSelectRoot = ({ value, onValueChange, onEditComplete, ...props }) => {
 
 // src/components/user-interaction/select/SelectComponents.tsx
 var import_react43 = require("react");
-var import_clsx14 = __toESM(require("clsx"));
+var import_clsx15 = __toESM(require("clsx"));
 var import_lucide_react7 = require("lucide-react");
 
 // src/components/layout/popup/PopUp.tsx
 var import_react42 = require("react");
-var import_clsx13 = require("clsx");
+var import_clsx14 = require("clsx");
 
 // src/hooks/useOutsideClick.ts
 var import_react40 = require("react");
@@ -11884,7 +11948,7 @@ var PopUp = (0, import_react42.forwardRef)(function PopUp2({
         transition: `top ${props.options?.pollingInterval ?? 100}ms linear, left ${props.options?.pollingInterval ?? 100}ms linear`,
         ...props.style
       },
-      className: (0, import_clsx13.clsx)("pop-up", props.className),
+      className: (0, import_clsx14.clsx)("pop-up", props.className),
       children
     }
   ) }) }) });
@@ -11926,7 +11990,7 @@ var SelectOption = (0, import_react43.forwardRef)(
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-selected": isSelected ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: (0, import_clsx14.default)(
+        className: (0, import_clsx15.default)(
           "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",
@@ -11952,7 +12016,7 @@ var SelectOption = (0, import_react43.forwardRef)(
           iconAppearance === "left" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             import_lucide_react7.CheckIcon,
             {
-              className: (0, import_clsx14.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              className: (0, import_clsx15.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           ),
@@ -11960,7 +12024,7 @@ var SelectOption = (0, import_react43.forwardRef)(
           iconAppearance === "right" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             import_lucide_react7.CheckIcon,
             {
-              className: (0, import_clsx14.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              className: (0, import_clsx15.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           )
@@ -12032,7 +12096,7 @@ var SelectButton = (0, import_react43.forwardRef)(function SelectButton2({
       "aria-expanded": state.isOpen,
       "aria-controls": state.isOpen ? ids.content : void 0,
       children: [
-        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: (0, import_clsx14.default)("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "flex-row-0", children: [
+        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: (0, import_clsx15.default)("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "flex-row-0", children: [
           label,
           index < state.value.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "," })
         ] }, value)) }) : placeholder ?? translation("clickToSelect"),
@@ -12104,7 +12168,7 @@ var SelectContent = (0, import_react43.forwardRef)(function SelectContent2({
                 break;
             }
           },
-          className: (0, import_clsx14.default)("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-outline-within overflow-auto", props.className),
+          className: (0, import_clsx15.default)("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",
@@ -12197,7 +12261,7 @@ var LanguageDialog = ({
 
 // src/components/layout/dialog/premade/ThemeDialog.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_clsx15 = __toESM(require("clsx"));
+var import_clsx16 = __toESM(require("clsx"));
 
 // src/global-contexts/ThemeContext.tsx
 var import_react45 = require("react");
@@ -12288,11 +12352,11 @@ var useTheme = () => {
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var ThemeIcon = ({ theme, className }) => {
   if (theme === "dark") {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react8.MoonIcon, { className: (0, import_clsx15.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react8.MoonIcon, { className: (0, import_clsx16.default)("w-4 h-4", className) });
   } else if (theme === "light") {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react8.SunIcon, { className: (0, import_clsx15.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react8.SunIcon, { className: (0, import_clsx16.default)("w-4 h-4", className) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react8.MonitorCog, { className: (0, import_clsx15.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react8.MonitorCog, { className: (0, import_clsx16.default)("w-4 h-4", className) });
   }
 };
 var ThemeDialog = ({
@@ -12338,14 +12402,14 @@ var ThemeDialog = ({
 
 // src/components/layout/loading/ErrorComponent.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_clsx16 = __toESM(require("clsx"));
+var import_clsx17 = __toESM(require("clsx"));
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var ErrorComponent = ({
   errorText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: (0, import_clsx16.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: (0, import_clsx17.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react9.AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
@@ -12355,14 +12419,14 @@ var ErrorComponent = ({
 var import_react46 = require("react");
 
 // src/components/layout/loading/LoadingContainer.tsx
-var import_clsx17 = require("clsx");
+var import_clsx18 = require("clsx");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var LoadingContainer = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: (0, import_clsx17.clsx)("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: (0, import_clsx18.clsx)("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
 };
 
 // src/components/layout/loading/LoadingAndErrorComponent.tsx
-var import_clsx18 = require("clsx");
+var import_clsx19 = require("clsx");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var LoadingAndErrorComponent = ({
   children,
@@ -12383,23 +12447,23 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LoadingContainer, { className: (0, import_clsx18.clsx)(className) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LoadingContainer, { className: (0, import_clsx19.clsx)(className) }) });
   }
   if (hasError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LoadingContainer, { className: (0, import_clsx18.clsx)("bg-negative", className) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LoadingContainer, { className: (0, import_clsx19.clsx)("bg-negative", className) }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children });
 };
 
 // src/components/layout/loading/LoadingAnimation.tsx
-var import_clsx19 = __toESM(require("clsx"));
+var import_clsx20 = __toESM(require("clsx"));
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var LoadingAnimation = ({
   loadingText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: (0, import_clsx19.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: (0, import_clsx20.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(HelpwaveLogo, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
@@ -12439,7 +12503,7 @@ var import_lucide_react10 = require("lucide-react");
 var import_react47 = require("react");
 var import_react48 = require("react");
 var import_link2 = __toESM(require_link2());
-var import_clsx20 = __toESM(require("clsx"));
+var import_clsx21 = __toESM(require("clsx"));
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
@@ -12503,7 +12567,7 @@ var NavigationItemWithSubItem = ({
         },
         onBlur,
         hidden: !isOpen,
-        className: (0, import_clsx20.default)(
+        className: (0, import_clsx21.default)(
           "fixed flex-col-4 p-4 bg-surface text-on-surface shadow-side shadow-hw-bottom rounded-md",
           { "opacity-0": !style }
         ),
@@ -12522,7 +12586,7 @@ var NavigationItemWithSubItem = ({
   ] });
 };
 var NavigationItemList = ({ items, ...restProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("ul", { ...restProps, className: (0, import_clsx20.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("ul", { ...restProps, className: (0, import_clsx21.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime48.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_react48.useState)(false);
@@ -12537,7 +12601,7 @@ var Navigation = ({ ...props }) => {
       NavigationItemList,
       {
         ...props,
-        className: (0, import_clsx20.default)("hidden", { "desktop:flex": !isMobileOpen }, props.className)
+        className: (0, import_clsx21.default)("hidden", { "desktop:flex": !isMobileOpen }, props.className)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -12567,7 +12631,7 @@ var Navigation = ({ ...props }) => {
             event.stopPropagation();
           }
         },
-        className: (0, import_clsx20.default)(
+        className: (0, import_clsx21.default)(
           "flex-col-8 items-center justify-center fixed inset-0 p-8 w-screen h-screen bg-surface text-on-surface",
           {
             "desktop:hidden": isMobileOpen
@@ -12586,7 +12650,7 @@ var Navigation = ({ ...props }) => {
               children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react10.XIcon, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NavigationItemList, { ...props, className: (0, import_clsx20.default)("flex-col-8", props.className) })
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(NavigationItemList, { ...props, className: (0, import_clsx21.default)("flex-col-8", props.className) })
         ]
       }
     )
@@ -12595,14 +12659,14 @@ var Navigation = ({ ...props }) => {
 
 // src/components/layout/navigation/Pagination.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_clsx22 = __toESM(require("clsx"));
+var import_clsx23 = __toESM(require("clsx"));
 var import_react52 = require("react");
 
 // src/components/user-interaction/Tooltip.tsx
 var import_react49 = require("react");
 var import_react50 = require("react");
 var import_react51 = require("react");
-var import_clsx21 = require("clsx");
+var import_clsx22 = require("clsx");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var Tooltip = ({
   tooltip,
@@ -12682,7 +12746,7 @@ var Tooltip = ({
     "div",
     {
       ref: anchor,
-      className: (0, import_clsx21.clsx)("relative inline-block", containerClassName),
+      className: (0, import_clsx22.clsx)("relative inline-block", containerClassName),
       "aria-describedby": isVisible ? id : void 0,
       onPointerEnter: openWithDelay,
       onPointerLeave: close3,
@@ -12705,7 +12769,7 @@ var Tooltip = ({
             "data-state": transitionState,
             "data-animated": isAnimated ? "" : void 0,
             role: "tooltip",
-            className: (0, import_clsx21.clsx)("tooltip", tooltipClassName),
+            className: (0, import_clsx22.clsx)("tooltip", tooltipClassName),
             style: { zIndex, position: "fixed" },
             children: tooltip
           }
@@ -12739,7 +12803,7 @@ var Pagination = ({
   const changePage = (page) => {
     onPageIndexChanged(page);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: (0, import_clsx22.default)("flex-row-1", className), style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: (0, import_clsx23.default)("flex-row-1", className), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Tooltip, { tooltip: translation("first"), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       Button,
       {
@@ -12767,7 +12831,7 @@ var Pagination = ({
         Input,
         {
           value,
-          className: (0, import_clsx22.default)(
+          className: (0, import_clsx23.default)(
             "w-24 text-center font-bold input-indicator-hidden h-10"
           ),
           type: "number",
@@ -12823,7 +12887,7 @@ var Pagination = ({
 
 // src/components/layout/navigation/StepperBar.tsx
 var import_lucide_react12 = require("lucide-react");
-var import_clsx23 = __toESM(require("clsx"));
+var import_clsx24 = __toESM(require("clsx"));
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var defaultState = {
   currentStep: 0,
@@ -12849,7 +12913,7 @@ var StepperBar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "div",
     {
-      className: (0, import_clsx23.default)("flex-row-2 justify-between", className),
+      className: (0, import_clsx24.default)("flex-row-2 justify-between", className),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           Button,
@@ -12871,7 +12935,7 @@ var StepperBar = ({
             "div",
             {
               onClick: () => seen && update(index),
-              className: (0, import_clsx23.default)(
+              className: (0, import_clsx24.default)(
                 "rounded-full w-4 h-4",
                 {
                   "bg-stepperbar-dot-active hover:brightness-75": index === currentStep && seen && !disabledSteps.has(currentStep),
@@ -12988,7 +13052,7 @@ function PopUpRoot({
 }
 
 // src/components/layout/table/FillerCell.tsx
-var import_clsx24 = __toESM(require("clsx"));
+var import_clsx25 = __toESM(require("clsx"));
 var import_lucide_react13 = require("lucide-react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var FillerCell = ({ ...props }) => {
@@ -12996,7 +13060,7 @@ var FillerCell = ({ ...props }) => {
     "div",
     {
       ...props,
-      className: (0, import_clsx24.default)("table-filler-cell", props.className),
+      className: (0, import_clsx25.default)("table-filler-cell", props.className),
       children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react13.Minus, { className: "max-w-4 max-h-4" })
     }
   );
@@ -13347,13 +13411,13 @@ var useResizeCallbackWrapper = (callback) => {
 };
 
 // src/components/layout/table/TableCell.tsx
-var import_clsx25 = require("clsx");
+var import_clsx26 = require("clsx");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: (0, import_clsx25.clsx)("table-default-cell", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: (0, import_clsx26.clsx)("table-default-cell", className), children });
 };
 
 // src/components/layout/table/TableProvider.tsx
@@ -13361,9 +13425,10 @@ var import_jsx_runtime55 = require("react/jsx-runtime");
 var TableProvider = ({
   data,
   isUsingFillerRows = true,
-  fillerRow,
+  fillerRowCell,
   initialState,
   onRowClick,
+  onFillerRowClick,
   defaultColumn: defaultColumnOverwrite,
   state,
   columns: columnsProp,
@@ -13502,15 +13567,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 = (0, import_react57.useMemo)(() => ({
     table,
     registerColumn
@@ -13529,11 +13595,24 @@ var TableProvider = ({
 // src/components/layout/table/TableBody.tsx
 var import_react_table2 = require("@tanstack/react-table");
 var import_react58 = __toESM(require("react"));
-var import_clsx26 = __toESM(require("clsx"));
+var import_clsx27 = __toESM(require("clsx"));
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var TableBody = import_react58.default.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 state = table.getState();
+  const baseOrder = state.columnOrder?.length ? state.columnOrder : table.getVisibleLeafColumns().map((col) => col.id);
+  const pinnedLeft = state.columnPinning?.left ?? [];
+  const pinnedRight = state.columnPinning?.right ?? [];
+  const columnOrder = [
+    ...pinnedLeft,
+    ...baseOrder.filter(
+      (id) => !pinnedLeft.includes(id) && !pinnedRight.includes(id)
+    ),
+    ...pinnedRight
+  ];
+  const columns = columnOrder.map((id) => table.getColumn(id)).filter(
+    (col) => !!col && state.columnVisibility?.[col.id] !== false
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("tbody", { children: [
     rows.map((row) => {
       return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
@@ -13541,9 +13620,9 @@ var TableBody = import_react58.default.memo(function TableBodyVisual() {
         {
           onClick: () => onRowClick?.(row, table),
           "data-clickable": PropsUtil.dataAttributes.bool(!!onRowClick),
-          className: (0, import_clsx26.default)("table-body-row", BagFunctionUtil.resolve(table.options.meta?.bodyRowClassName, row.original)),
+          className: (0, import_clsx27.default)("table-body-row", BagFunctionUtil.resolve(table.options.meta?.bodyRowClassName, row.original)),
           children: row.getVisibleCells().map((cell) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("td", { className: (0, import_clsx26.default)("table-body-cell", cell.column.columnDef.meta?.className), children: (0, import_react_table2.flexRender)(
+            return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("td", { className: (0, import_clsx27.default)("table-body-cell", cell.column.columnDef.meta?.className), children: (0, import_react_table2.flexRender)(
               cell.column.columnDef.cell,
               cell.getContext()
             ) }, cell.id);
@@ -13552,21 +13631,30 @@ var TableBody = import_react58.default.memo(function TableBodyVisual() {
         row.id
       );
     }),
-    isUsingFillerRows && range(pagination.pageSize - rows.length, { allowEmptyRange: true }).map((row, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("tr", { className: (0, import_clsx26.default)("table-body-filler-row"), children: columns.map((column) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("td", { className: (0, import_clsx26.default)("table-body-filler-cell", column.columnDef.meta?.className), children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FillerCell, {}) }, column.id);
-      }) }, "filler-row-" + index);
-    })
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Visibility, { isVisible: isUsingFillerRows, children: range(pagination.pageSize - rows.length, { allowEmptyRange: true }).map((index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        "tr",
+        {
+          className: (0, import_clsx27.default)("table-body-filler-row"),
+          onClick: () => onFillerRowClick?.(index, table),
+          "data-clickable": PropsUtil.dataAttributes.bool(!!onFillerRowClick),
+          children: columns.map((column) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("td", { className: (0, import_clsx27.default)("table-body-filler-cell", column.columnDef.meta?.className), children: fillerRowCell ? fillerRowCell(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FillerCell, {}) }, column.id);
+          })
+        },
+        "filler-row-" + index
+      );
+    }) })
   ] });
 });
 
 // src/components/layout/table/TableHeader.tsx
 var import_react_table3 = require("@tanstack/react-table");
-var import_clsx32 = __toESM(require("clsx"));
+var import_clsx33 = __toESM(require("clsx"));
 
 // src/components/layout/table/TableSortButton.tsx
 var import_lucide_react14 = require("lucide-react");
-var import_clsx27 = __toESM(require("clsx"));
+var import_clsx28 = __toESM(require("clsx"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var TableSortButton = ({
   sortDirection,
@@ -13594,13 +13682,13 @@ var TableSortButton = ({
       layout: hasSortingIndex ? "default" : "icon",
       color,
       size,
-      className: (0, import_clsx27.default)("relative", className),
+      className: (0, import_clsx28.default)("relative", className),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Visibility, { isVisible: hasSortingIndex, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "div",
           {
-            className: (0, import_clsx27.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"),
+            className: (0, import_clsx28.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"),
             children: `${index}.`
           }
         ) }),
@@ -13617,7 +13705,7 @@ var import_react67 = require("react");
 // src/components/user-interaction/input/DateTimeInput.tsx
 var import_react64 = require("react");
 var import_lucide_react16 = require("lucide-react");
-var import_clsx31 = __toESM(require("clsx"));
+var import_clsx32 = __toESM(require("clsx"));
 
 // src/utils/date.ts
 var monthsList = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
@@ -13790,7 +13878,7 @@ var DateUtils = {
 };
 
 // src/components/user-interaction/date/DateTimePicker.tsx
-var import_clsx30 = __toESM(require("clsx"));
+var import_clsx31 = __toESM(require("clsx"));
 
 // src/components/user-interaction/date/TimePicker.tsx
 var import_react59 = require("react");
@@ -13912,7 +14000,7 @@ var TimePickerUncontrolled = ({
 // src/components/user-interaction/date/DatePicker.tsx
 var import_react62 = require("react");
 var import_lucide_react15 = require("lucide-react");
-var import_clsx29 = __toESM(require("clsx"));
+var import_clsx30 = __toESM(require("clsx"));
 
 // src/components/user-interaction/date/DayPicker.tsx
 var import_react60 = require("react");
@@ -13992,7 +14080,7 @@ var DayPickerUncontrolled = ({
 
 // src/components/user-interaction/date/YearMonthPicker.tsx
 var import_react61 = require("react");
-var import_clsx28 = __toESM(require("clsx"));
+var import_clsx29 = __toESM(require("clsx"));
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var YearRow = (0, import_react61.memo)(function YearRow2({
   year,
@@ -14018,7 +14106,7 @@ var YearRow = (0, import_react61.memo)(function YearRow2({
       isExpanded,
       onExpandedChange: setIsExpanded,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ExpandableHeader, { className: (0, import_clsx28.default)("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ExpandableHeader, { className: (0, import_clsx29.default)("px-2", { "text-primary font-bold": isSelectedYear }), children: year }),
         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ExpandableContent, { className: "gap-y-1 px-2 expandable-content-h-39", children: isExpanded && monthGrid.map((group, groupIdx) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-1", children: group.map((month) => {
           const monthIndex = DateUtils.monthsList.indexOf(month);
           const currentTimestamp = new Date(year, monthIndex).getTime();
@@ -14087,7 +14175,7 @@ var YearMonthPicker = ({
     InfiniteScroll,
     {
       itemCount: years.length,
-      className: (0, import_clsx28.default)("flex-col-1 h-full select-none", className),
+      className: (0, import_clsx29.default)("flex-col-1 h-full select-none", className),
       initialIndex: years.findIndex((year) => year === value.getFullYear()),
       children: (index) => {
         const year = years[index];
@@ -14142,14 +14230,14 @@ var DatePicker = ({
   const { locale } = useLocale();
   const [displayedMonth, setDisplayedMonth] = (0, import_react62.useState)(new Date(value.getFullYear(), value.getMonth(), 1));
   const [displayMode, setDisplayMode] = (0, import_react62.useState)(initialDisplay);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: (0, import_clsx29.default)("flex-col-3", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: (0, import_clsx30.default)("flex-col-3", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-row-2 items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
         Button,
         {
           size: "sm",
           coloringStyle: "text",
-          className: (0, import_clsx29.default)("flex-row-1 items-center cursor-pointer select-none", {
+          className: (0, import_clsx30.default)("flex-row-1 items-center cursor-pointer select-none", {
             "text-disabled": displayMode !== "day"
           }),
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
@@ -14289,7 +14377,7 @@ var DateTimePicker = ({
         ...timePickerProps,
         is24HourFormat,
         minuteIncrement,
-        className: (0, import_clsx30.default)({ "justify-between": mode === "time" }),
+        className: (0, import_clsx31.default)({ "justify-between": mode === "time" }),
         value,
         onValueChange,
         onEditComplete
@@ -14445,11 +14533,7 @@ var DateTimeInput = (0, import_react64.forwardRef)(function DateTimeInput2({
     label: `date-time-input-label-${id}`
   }), [id]);
   const innerRef = (0, import_react64.useRef)(null);
-  const containerRef = (0, import_react64.useRef)(null);
-  (0, import_react64.useImperativeHandle)(forwardedRef, () => ({
-    input: innerRef.current,
-    popup: containerRef.current
-  }));
+  (0, import_react64.useImperativeHandle)(forwardedRef, () => innerRef.current);
   (0, import_react64.useEffect)(() => {
     if (readOnly || disabled) {
       changeOpenWrapper(false);
@@ -14457,11 +14541,12 @@ var DateTimeInput = (0, import_react64.forwardRef)(function DateTimeInput2({
   }, [changeOpenWrapper, readOnly, disabled]);
   const clickHandler = PropsUtil.aria.click(() => changeOpenWrapper(true));
   return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { ...containerProps, ref: innerRef, className: (0, import_clsx31.default)("relative w-full", containerProps?.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { ...containerProps, className: (0, import_clsx32.default)("relative w-full", containerProps?.className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
         "div",
         {
           ...props,
+          ref: innerRef,
           id: ids.input,
           onClick: (event) => {
             clickHandler.onClick();
@@ -14469,13 +14554,14 @@ var DateTimeInput = (0, import_react64.forwardRef)(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: (0, import_clsx31.default)(
+          className: (0, import_clsx32.default)(
             "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 },
@@ -14507,7 +14593,6 @@ var DateTimeInput = (0, import_react64.forwardRef)(function DateTimeInput2({
     /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       PopUp,
       {
-        ref: containerRef,
         id: ids.popup,
         isOpen,
         anchor: innerRef,
@@ -15209,13 +15294,13 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
       },
       header.id
     )) }, headerGroup.id)),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("tr", { className: (0, import_clsx32.default)("table-header-row", table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("tr", { className: (0, import_clsx33.default)("table-header-row", table.options.meta?.headerRowClassName), children: headerGroup.headers.map((header) => {
       return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
         "th",
         {
           colSpan: header.colSpan,
           "data-sticky": isSticky ? "" : void 0,
-          className: (0, import_clsx32.default)("table-header-cell group/table-header-cell", header.column.columnDef.meta?.className),
+          className: (0, import_clsx33.default)("table-header-cell group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex-row-1 items-center", children: [
               /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
@@ -15287,7 +15372,7 @@ var TableHeader = ({ table: tableOverride, isSticky = false }) => {
 };
 
 // src/components/layout/table/TableDisplay.tsx
-var import_clsx33 = __toESM(require("clsx"));
+var import_clsx34 = __toESM(require("clsx"));
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var TableDisplay = ({
   children,
@@ -15298,11 +15383,11 @@ var TableDisplay = ({
   const { table } = useTableDataContext();
   const { containerRef } = useTableContainerContext();
   const { sizeVars } = useTableHeaderContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { ...containerProps, ref: containerRef, className: (0, import_clsx33.default)("table-container", containerProps?.className), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { ...containerProps, ref: containerRef, className: (0, import_clsx34.default)("table-container", containerProps?.className), children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
     "table",
     {
       ...props,
-      className: (0, import_clsx33.default)("table", props.className),
+      className: (0, import_clsx34.default)("table", props.className),
       style: {
         ...sizeVars,
         width: Math.floor(Math.max(table.getTotalSize(), containerRef.current?.offsetWidth ?? table.getTotalSize()))
@@ -15318,7 +15403,7 @@ var TableDisplay = ({
 
 // src/components/layout/table/TablePagination.tsx
 var import_react69 = require("react");
-var import_clsx34 = __toESM(require("clsx"));
+var import_clsx35 = __toESM(require("clsx"));
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var TablePaginationMenu = () => {
   const { table } = useTableDataContext();
@@ -15356,7 +15441,7 @@ var TablePageSizeSelect = ({
   );
 };
 var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { ...props, className: (0, import_clsx34.default)("flex-row-2 items-center justify-center", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "relative", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { ...props, className: (0, import_clsx35.default)("flex-row-2 items-center justify-center", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TablePaginationMenu, {}),
     /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "absolute left-1/1 top-1/2 -translate-y-1/2 translate-x-4 h-10 min-w-24" } }) })
   ] }) });
@@ -15365,7 +15450,7 @@ var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props
 // src/components/user-interaction/Checkbox.tsx
 var import_lucide_react19 = require("lucide-react");
 var import_react70 = require("react");
-var import_clsx35 = __toESM(require("clsx"));
+var import_clsx36 = __toESM(require("clsx"));
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var Checkbox = ({
   value = false,
@@ -15409,7 +15494,7 @@ var Checkbox = ({
       tabIndex: disabled ? -1 : 0,
       "aria-checked": indeterminate ? "mixed" : value,
       ...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props),
-      className: (0, import_clsx35.default)("checkbox", props.className),
+      className: (0, import_clsx36.default)("checkbox", props.className),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react19.Minus, { className: "checkbox-indicator", "aria-hidden": true }) }),
         /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react19.Check, { className: "checkbox-indicator", "aria-hidden": true }) })
@@ -15439,7 +15524,7 @@ var import_jsx_runtime72 = require("react/jsx-runtime");
 var TableWithSelectionProvider = ({
   children,
   state,
-  fillerRow,
+  fillerRowCell,
   rowSelection,
   disableClickRowClickSelection = false,
   selectionRowId = "selection",
@@ -15463,7 +15548,14 @@ var TableWithSelectionProvider = ({
         );
       },
       cell: ({ row }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Checkbox, { disabled: !row.getCanSelect(), value: row.getIsSelected(), onValueChange: row.getToggleSelectedHandler() });
+        return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+          Checkbox,
+          {
+            disabled: !row.getCanSelect(),
+            value: row.getIsSelected(),
+            onValueChange: row.getToggleSelectedHandler()
+          }
+        );
       },
       size: 60,
       minSize: 60,
@@ -15479,12 +15571,12 @@ var TableWithSelectionProvider = ({
     TableProvider,
     {
       ...props,
-      fillerRow: (0, import_react71.useCallback)((columnId, table) => {
+      fillerRowCell: (0, import_react71.useCallback)((columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Checkbox, { value: false, disabled: true, className: "max-w-6" });
+          return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Checkbox, { value: false, disabled: true });
         }
-        return fillerRow?.(columnId, table) ?? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(FillerCell, {});
-      }, [fillerRow, selectionRowId]),
+        return fillerRowCell?.(columnId, table) ?? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(FillerCell, {});
+      }, [fillerRowCell, selectionRowId]),
       columns: columnDef,
       initialState: {
         ...props.initialState,
@@ -15509,11 +15601,11 @@ var TableWithSelectionProvider = ({
 };
 
 // src/components/layout/table/Table.tsx
-var import_clsx36 = __toESM(require("clsx"));
+var import_clsx37 = __toESM(require("clsx"));
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var Table = ({ children, table, paginationOptions, displayProps, header, footer, ...props }) => {
   const { showPagination = true, allowChangingPageSize, pageSizeOptions } = paginationOptions ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { ...props, className: (0, import_clsx36.default)("flex-col-3", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(TableProvider, { ...table, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { ...props, className: (0, import_clsx37.default)("flex-col-3", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(TableProvider, { ...table, children: [
     header,
     /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TableDisplay, { ...displayProps, children }),
     /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
@@ -15530,7 +15622,7 @@ var TableWithSelection = ({
   ...props
 }) => {
   const { showPagination = true, allowChangingPageSize, pageSizeOptions } = paginationOptions ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { ...props, className: (0, import_clsx36.default)("flex-col-3", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(TableWithSelectionProvider, { ...table, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { ...props, className: (0, import_clsx37.default)("flex-col-3", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(TableWithSelectionProvider, { ...table, children: [
     header,
     /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TableDisplay, { ...displayProps, children }),
     /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
@@ -15840,7 +15932,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
 var import_react74 = require("react");
-var import_clsx37 = require("clsx");
+var import_clsx38 = require("clsx");
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -15883,7 +15975,7 @@ var CopyToClipboardWrapper = ({
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     "div",
     {
-      className: (0, import_clsx37.clsx)("relative inline-block cursor-copy", containerClassName),
+      className: (0, import_clsx38.clsx)("relative inline-block cursor-copy", containerClassName),
       onMouseEnter: () => {
         setIsShowingIndication(true);
       },
@@ -15901,7 +15993,7 @@ var CopyToClipboardWrapper = ({
         /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
           "div",
           {
-            className: (0, import_clsx37.clsx)(
+            className: (0, import_clsx38.clsx)(
               `absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
            shadow-around-md bg-tooltip-background cursor-default pointer-events-none`,
               "transition-opacity duration-200",
@@ -15924,7 +16016,7 @@ var CopyToClipboardWrapper = ({
               /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx37.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: (0, import_clsx38.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -15938,7 +16030,7 @@ var CopyToClipboardWrapper = ({
 
 // src/components/user-interaction/Menu.tsx
 var import_react76 = require("react");
-var import_clsx38 = __toESM(require("clsx"));
+var import_clsx39 = __toESM(require("clsx"));
 
 // src/hooks/useHoverState.ts
 var import_react75 = require("react");
@@ -15994,7 +16086,7 @@ var MenuItem = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
   "div",
   {
-    className: (0, import_clsx38.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+    className: (0, import_clsx39.default)("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
@@ -16042,7 +16134,7 @@ var Menu = ({
 
 // src/components/user-interaction/ScrollPicker.tsx
 var import_react77 = require("react");
-var import_clsx39 = __toESM(require("clsx"));
+var import_clsx40 = __toESM(require("clsx"));
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
@@ -16212,7 +16304,7 @@ var ScrollPicker = ({
             children: shownItems.map(({ name: name2, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               "div",
               {
-                className: (0, import_clsx39.default)(
+                className: (0, import_clsx40.default)(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -16240,7 +16332,7 @@ var ScrollPicker = ({
 
 // src/components/user-interaction/Textarea.tsx
 var import_react78 = require("react");
-var import_clsx40 = __toESM(require("clsx"));
+var import_clsx41 = __toESM(require("clsx"));
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var Textarea = (0, import_react78.forwardRef)(function Textarea2({
   invalid = false,
@@ -16307,7 +16399,7 @@ var TextareaWithHeadline = ({
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
     "div",
     {
-      className: (0, import_clsx40.default)(
+      className: (0, import_clsx41.default)(
         "group flex-col-3 border-2 rounded-lg",
         {
           "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
@@ -16316,13 +16408,13 @@ var TextareaWithHeadline = ({
         containerClassName
       ),
       children: [
-        headline && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("label", { ...headlineProps, htmlFor: usedId, className: (0, import_clsx40.default)("typography-lable-md text-label", headlineProps.className), children: headline }),
+        headline && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("label", { ...headlineProps, htmlFor: usedId, className: (0, import_clsx41.default)("typography-lable-md text-label", headlineProps.className), children: headline }),
         /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
           Textarea,
           {
             ...props,
             id: usedId,
-            className: (0, import_clsx40.default)(
+            className: (0, import_clsx41.default)(
               "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
               className
             )
@@ -16377,7 +16469,7 @@ var TimeDisplay = ({
 // src/components/user-interaction/input/InsideLabelInput.tsx
 var import_react79 = require("react");
 var import_react80 = require("react");
-var import_clsx41 = __toESM(require("clsx"));
+var import_clsx42 = __toESM(require("clsx"));
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var InsideLabelInput = (0, import_react80.forwardRef)(function InsideLabelInput2({
   id: customId,
@@ -16388,13 +16480,13 @@ var InsideLabelInput = (0, import_react80.forwardRef)(function InsideLabelInput2
   const [isFocused, setIsFocused] = (0, import_react80.useState)(false);
   const generatedId = (0, import_react79.useId)();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: (0, import_clsx41.default)("relative"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: (0, import_clsx42.default)("relative"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       Input,
       {
         ...props,
         id,
-        className: (0, import_clsx41.default)("h-14 px-4 pb-2 py-6.5", props.className),
+        className: (0, import_clsx42.default)("h-14 px-4 pb-2 py-6.5", props.className),
         ref: forwardedRef,
         "aria-labelledby": id + "-label",
         onFocus: (event) => {
@@ -16413,7 +16505,7 @@ var InsideLabelInput = (0, import_react80.forwardRef)(function InsideLabelInput2
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: (0, import_clsx41.default)(
+        className: (0, import_clsx42.default)(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -16441,7 +16533,7 @@ var InsideLabelInputUncontrolled = ({
 
 // src/components/user-interaction/input/SearchBar.tsx
 var import_lucide_react22 = require("lucide-react");
-var import_clsx42 = require("clsx");
+var import_clsx43 = require("clsx");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var SearchBar = ({
   value: initialValue,
@@ -16453,7 +16545,7 @@ var SearchBar = ({
 }) => {
   const translation = useHightideTranslation();
   const [value, setValue] = useOverwritableState(initialValue, onValueChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { ...containerProps, className: (0, import_clsx42.clsx)("relative", containerProps?.className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { ...containerProps, className: (0, import_clsx43.clsx)("relative", containerProps?.className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       InputUncontrolled,
       {
@@ -16462,7 +16554,7 @@ var SearchBar = ({
         onValueChange: setValue,
         onEditComplete: onSearch,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: (0, import_clsx42.clsx)("pr-10 w-full", inputProps.className)
+        className: (0, import_clsx43.clsx)("pr-10 w-full", inputProps.className)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
@@ -16474,7 +16566,7 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: () => onSearch(value),
-        className: (0, import_clsx42.clsx)("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        className: (0, import_clsx43.clsx)("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
         children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react22.Search, { className: "w-full h-full" })
       }
     )
@@ -16484,7 +16576,7 @@ var SearchBar = ({
 // src/components/user-interaction/input/ToggleableInput.tsx
 var import_react81 = require("react");
 var import_lucide_react23 = require("lucide-react");
-var import_clsx43 = __toESM(require("clsx"));
+var import_clsx44 = __toESM(require("clsx"));
 var import_jsx_runtime83 = require("react/jsx-runtime");
 var ToggleableInput = (0, import_react81.forwardRef)(function ToggleableInput2({
   value,
@@ -16500,7 +16592,7 @@ var ToggleableInput = (0, import_react81.forwardRef)(function ToggleableInput2({
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: (0, import_clsx43.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: (0, import_clsx44.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       Input,
       {
@@ -16522,14 +16614,14 @@ var ToggleableInput = (0, import_react81.forwardRef)(function ToggleableInput2({
         },
         "data-name": props["data-name"] ?? "togglable-input",
         "data-isEditing": isEditing ? "" : void 0,
-        className: (0, import_clsx43.default)(`w-full rounded-md`, {
+        className: (0, import_clsx44.default)(`w-full rounded-md`, {
           "text-transparent": !isEditing
         })
       }
     ),
     !isEditing && /* @__PURE__ */ (0, import_jsx_runtime83.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_runtime83.jsx)("span", { className: (0, import_clsx43.default)(" truncate"), children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react23.Pencil, { className: (0, import_clsx43.default)(`size-force-4`, { "text-transparent": isEditing }) })
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: (0, import_clsx44.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_lucide_react23.Pencil, { className: (0, import_clsx44.default)(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -17678,6 +17770,8 @@ var PromiseUtils = {
   FormContext,
   FormField,
   FormFieldLayout,
+  FormObserver,
+  FormObserverKey,
   FormProvider,
   FormStore,
   GenericFilter,
@@ -17842,6 +17936,8 @@ var PromiseUtils = {
   useFocusTrap,
   useForm,
   useFormField,
+  useFormObserver,
+  useFormObserverKey,
   useHandleRefs,
   useHightideConfig,
   useHightideTranslation,