@helpwave/hightide 0.1.37 → 0.1.39

package/dist/components/index.mjs

@@ -7705,9 +7705,8 @@ var TimePickerUncontrolled = ({
 import clsx10 from "clsx";
 
 // src/components/dialog/Dialog.tsx
-import { useEffect as useEffect10 } from "react";
-import { useState as useState9 } from "react";
-import { useRef as useRef4 } from "react";
+import { useId as useId3 } from "react";
+import { useEffect as useEffect10, useRef as useRef4, useState as useState9 } from "react";
 import clsx9 from "clsx";
 import { X } from "lucide-react";
 
@@ -8062,7 +8061,7 @@ var useLogOnce = (message, condition, options) => {
 
 // src/components/dialog/Dialog.tsx
 import { createPortal } from "react-dom";
-import { Fragment, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var Dialog = ({
   children,
   isOpen,
@@ -8070,13 +8069,16 @@ var Dialog = ({
   description,
   isModal = true,
   onClose,
-  className,
   backgroundClassName,
   position = "center",
-  isAnimated = true
+  isAnimated = true,
+  containerClassName,
+  ...props
 }) => {
   const translation = useTranslation([formTranslation]);
   const [visible, setVisible] = useState9(isOpen);
+  const generatedId = useId3();
+  const id = props.id ?? generatedId;
   const ref = useRef4(null);
   useEffect10(() => {
     if (isOpen) {
@@ -8103,14 +8105,16 @@ var Dialog = ({
     none: ""
   };
   const positionStyle = positionMap[position];
+  if (!visible) return;
   return createPortal(
-    /* @__PURE__ */ jsxs8(Fragment, { children: [
+    /* @__PURE__ */ jsxs8("div", { id: `dialog-container-${id}`, className: clsx9("fixed inset-0 h-screen w-screen", containerClassName), children: [
       /* @__PURE__ */ jsx11(
         "div",
         {
+          id: `dialog-background-${id}`,
           hidden: !visible,
           className: clsx9(
-            "fixed inset-0 h-screen w-screen bg-overlay-shadow z-100",
+            "fixed inset-0 h-screen w-screen bg-overlay-shadow",
             {
               "motion-safe:animate-fade-in": isOpen,
               "motion-safe:animate-fade-out": !isOpen
@@ -8129,6 +8133,8 @@ var Dialog = ({
       /* @__PURE__ */ jsxs8(
         "div",
         {
+          ...props,
+          id: `dialog-${id}`,
           ref,
           hidden: !visible,
           onKeyDown: (event) => {
@@ -8142,13 +8148,13 @@ var Dialog = ({
             }
           },
           className: clsx9(
-            "flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)] z-100",
+            "flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)]",
             {
               "motion-safe:animate-pop-in": isOpen,
               "motion-safe:animate-pop-out": !isOpen
             },
             positionStyle,
-            className
+            props.className
           ),
           children: [
             /* @__PURE__ */ jsx11("div", { className: "typography-title-lg mr-8", children: titleElement }),
@@ -8487,8 +8493,9 @@ import {
   useCallback as useCallback6,
   useContext as useContext2,
   useEffect as useEffect13,
-  useId as useId3,
+  useId as useId4,
   useImperativeHandle as useImperativeHandle2,
+  useMemo as useMemo2,
   useRef as useRef6,
   useState as useState12
 } from "react";
@@ -8705,9 +8712,9 @@ function useFloatingElement({
 
 // src/components/user-action/select/Select.tsx
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var defaultToggleOpenOptions = {
-  highlightStartPosition: "first"
+  highlightStartPositionBehavior: "first"
 };
 var SelectContext = createContext2(null);
 function useSelectContext() {
@@ -8730,47 +8737,62 @@ var SelectRoot = ({
   isMultiSelect = false,
   iconAppearance = "left"
 }) => {
-  const [options, setOptions] = useState12([]);
   const triggerRef = useRef6(null);
-  const generatedId = useId3();
+  const generatedId = useId4();
   const usedId = id ?? generatedId;
   const [internalState, setInternalState] = useState12({
-    isOpen
+    isOpen,
+    options: []
   });
-  const selectedValues = isMultiSelect ? values ?? [] : [value].filter(Boolean);
+  const selectedValues = useMemo2(
+    () => isMultiSelect ? values ?? [] : [value].filter(Boolean),
+    [isMultiSelect, value, values]
+  );
+  const selectedOptions = useMemo2(
+    () => selectedValues.map((value2) => internalState.options.find((option) => value2 === option.value)).filter(Boolean),
+    [selectedValues, internalState.options]
+  );
   const state = {
     ...internalState,
     id: usedId,
     disabled,
     invalid,
     value: selectedValues,
-    options,
-    selectedOptions: selectedValues.map((value2) => options.find((option) => value2 === option.value)).filter(Boolean)
+    selectedOptions
   };
   const config = {
     isMultiSelect,
     iconAppearance
   };
   const registerItem = useCallback6((item) => {
-    setOptions((prev) => {
-      const updated = [...prev, item];
-      updated.sort((a, b) => {
+    setInternalState((prev) => {
+      const updatedOptions = [...prev.options, item];
+      updatedOptions.sort((a, b) => {
         const aEl = a.ref.current;
         const bEl = b.ref.current;
         if (!aEl || !bEl) return 0;
         return aEl.compareDocumentPosition(bEl) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
       });
-      return updated;
+      return {
+        ...prev,
+        options: updatedOptions
+      };
     });
   }, []);
   const unregisterItem = useCallback6((value2) => {
-    setOptions((prev) => prev.filter((i) => i.value !== value2));
+    setInternalState((prev) => {
+      const updatedOptions = prev.options.filter((i) => i.value !== value2);
+      return {
+        ...prev,
+        options: updatedOptions
+      };
+    });
   }, []);
   const toggleSelection = (value2, isSelected) => {
     if (disabled) {
       return;
     }
-    const option = options.find((i) => i.value === value2);
+    const option = state.options.find((i) => i.value === value2);
     if (!option) {
       console.error(`SelectOption with value: ${value2} not found`);
       return;
@@ -8813,35 +8835,40 @@ var SelectRoot = ({
     triggerRef.current = null;
   }, []);
   const toggleOpen = (isOpen2, toggleOpenOptions) => {
-    const { highlightStartPosition } = { ...defaultToggleOpenOptions, ...toggleOpenOptions };
-    let highlightedIndex;
-    if (highlightStartPosition === "first") {
-      highlightedIndex = options.findIndex((option) => !option.disabled);
-    } else {
-      highlightedIndex = options.length - 1 - [...options].reverse().findIndex((option) => !option.disabled);
-    }
-    if (highlightedIndex === -1 || highlightedIndex === options.length) {
-      highlightedIndex = 0;
+    const { highlightStartPositionBehavior } = { ...defaultToggleOpenOptions, ...toggleOpenOptions };
+    let firstSelectedValue;
+    let firstEnabledValue;
+    for (let i = 0; i < state.options.length; i++) {
+      const currentOption = state.options[highlightStartPositionBehavior === "first" ? i : state.options.length - i - 1];
+      if (!currentOption.disabled) {
+        if (!firstEnabledValue) {
+          firstEnabledValue = currentOption.value;
+        }
+        if (selectedValues.includes(currentOption.value)) {
+          firstSelectedValue = currentOption.value;
+          break;
+        }
+      }
     }
     setInternalState((prevState) => ({
       ...prevState,
       isOpen: isOpen2 ?? !prevState.isOpen,
-      highlightedValue: options[highlightedIndex].value
+      highlightedValue: firstSelectedValue ?? firstEnabledValue
     }));
   };
   const moveHighlightedIndex = (delta) => {
-    let highlightedIndex = options.findIndex((value2) => value2.value === internalState.highlightedValue);
+    let highlightedIndex = state.options.findIndex((value2) => value2.value === internalState.highlightedValue);
     if (highlightedIndex === -1) {
       highlightedIndex = 0;
     }
-    const optionLength = options.length;
+    const optionLength = state.options.length;
     const startIndex = (highlightedIndex + delta % optionLength + optionLength) % optionLength;
     const isForward = delta >= 0;
-    let highlightedValue = options[startIndex].value;
-    for (let i = 0; i < options.length; i++) {
+    let highlightedValue = state.options[startIndex].value;
+    for (let i = 0; i < state.options.length; i++) {
       const index = (startIndex + (isForward ? i : -i) + optionLength) % optionLength;
-      if (!options[index].disabled) {
-        highlightedValue = options[index].value;
+      if (!state.options[index].disabled) {
+        highlightedValue = state.options[index].value;
         break;
       }
     }
@@ -8852,9 +8879,9 @@ var SelectRoot = ({
   };
   useEffect13(() => {
     if (!internalState.highlightedValue) return;
-    const highlighted = options.find((value2) => value2.value === internalState.highlightedValue);
+    const highlighted = internalState.options.find((value2) => value2.value === internalState.highlightedValue);
     if (highlighted) {
-      highlighted.ref.current.scrollIntoView({ behavior: "instant", block: "nearest" });
+      highlighted.ref.current?.scrollIntoView({ behavior: "instant", block: "nearest" });
     } else {
       console.error(`SelectRoot: Could not find highlighted value (${internalState.highlightedValue})`);
     }
@@ -8991,12 +9018,12 @@ var SelectButton = forwardRef4(function SelectButton2({ placeholder, selectedDis
         props.onKeyDown?.(event);
         switch (event.key) {
           case "ArrowDown":
-            toggleOpen(true, { highlightStartPosition: "first" });
+            toggleOpen(true, { highlightStartPositionBehavior: "first" });
             event.preventDefault();
             event.stopPropagation();
             break;
           case "ArrowUp":
-            toggleOpen(true, { highlightStartPosition: "last" });
+            toggleOpen(true, { highlightStartPositionBehavior: "last" });
             event.preventDefault();
             event.stopPropagation();
             break;
@@ -9090,10 +9117,10 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
             onKeyDown: (event) => {
               switch (event.key) {
                 case "ArrowDown":
-                  toggleOpen(true, { highlightStartPosition: "first" });
+                  toggleOpen(true, { highlightStartPositionBehavior: "first" });
                   break;
                 case "ArrowUp":
-                  toggleOpen(true, { highlightStartPosition: "last" });
+                  toggleOpen(true, { highlightStartPositionBehavior: "last" });
               }
             },
             size: "small",
@@ -9114,6 +9141,7 @@ var SelectContent = forwardRef4(
   function SelectContent2({
     alignment,
     orientation = "vertical",
+    containerClassName,
     ...props
   }, ref) {
     const innerRef = useRef6(null);
@@ -9130,76 +9158,83 @@ var SelectContent = forwardRef4(
       active: state.isOpen && !!position
     });
     return createPortal2(
-      /* @__PURE__ */ jsxs11(Fragment3, { children: [
-        /* @__PURE__ */ jsx17(
-          "div",
-          {
-            hidden: !state.isOpen,
-            onClick: () => trigger.toggleOpen(false),
-            className: clsx13("fixed w-screen h-screen inset-0")
-          }
-        ),
-        /* @__PURE__ */ jsx17(
-          "ul",
-          {
-            ...props,
-            id: `${state.id}-listbox`,
-            ref: innerRef,
-            hidden: !state.isOpen,
-            onKeyDown: (event) => {
-              switch (event.key) {
-                case "Escape":
-                  trigger.toggleOpen(false);
-                  event.preventDefault();
-                  event.stopPropagation();
-                  break;
-                case match(orientation, {
-                  vertical: "ArrowDown",
-                  horizontal: "ArrowUp"
-                }):
-                  item.moveHighlightedIndex(1);
-                  event.preventDefault();
-                  break;
-                case match(orientation, {
-                  vertical: "ArrowUp",
-                  horizontal: "ArrowDown"
-                }):
-                  item.moveHighlightedIndex(-1);
-                  event.preventDefault();
-                  break;
-                case "Home":
-                  event.preventDefault();
-                  break;
-                case "End":
-                  event.preventDefault();
-                  break;
-                case "Enter":
-                // Fall through
-                case " ":
-                  if (state.highlightedValue) {
-                    item.toggleSelection(state.highlightedValue);
-                    if (!config.isMultiSelect) {
+      /* @__PURE__ */ jsxs11(
+        "div",
+        {
+          id: `select-container-${state.id}`,
+          className: clsx13("fixed inset-0 w-screen h-screen", containerClassName),
+          hidden: !state.isOpen,
+          children: [
+            /* @__PURE__ */ jsx17(
+              "div",
+              {
+                id: `select-background-${state.id}`,
+                onClick: () => trigger.toggleOpen(false),
+                className: clsx13("fixed inset-0 w-screen h-screen")
+              }
+            ),
+            /* @__PURE__ */ jsx17(
+              "ul",
+              {
+                ...props,
+                id: `${state.id}-listbox`,
+                ref: innerRef,
+                onKeyDown: (event) => {
+                  switch (event.key) {
+                    case "Escape":
                       trigger.toggleOpen(false);
-                    }
-                    event.preventDefault();
+                      event.preventDefault();
+                      event.stopPropagation();
+                      break;
+                    case match(orientation, {
+                      vertical: "ArrowDown",
+                      horizontal: "ArrowUp"
+                    }):
+                      item.moveHighlightedIndex(1);
+                      event.preventDefault();
+                      break;
+                    case match(orientation, {
+                      vertical: "ArrowUp",
+                      horizontal: "ArrowDown"
+                    }):
+                      item.moveHighlightedIndex(-1);
+                      event.preventDefault();
+                      break;
+                    case "Home":
+                      event.preventDefault();
+                      break;
+                    case "End":
+                      event.preventDefault();
+                      break;
+                    case "Enter":
+                    // Fall through
+                    case " ":
+                      if (state.highlightedValue) {
+                        item.toggleSelection(state.highlightedValue);
+                        if (!config.isMultiSelect) {
+                          trigger.toggleOpen(false);
+                        }
+                        event.preventDefault();
+                      }
+                      break;
                   }
-                  break;
+                },
+                className: clsx13("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-style-within overflow-auto", props.className),
+                style: {
+                  opacity: position ? void 0 : 0,
+                  position: "fixed",
+                  ...position
+                },
+                role: "listbox",
+                "aria-multiselectable": config.isMultiSelect,
+                "aria-orientation": orientation,
+                tabIndex: position ? 0 : void 0,
+                children: props.children
               }
-            },
-            className: clsx13("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-style-within overflow-auto", props.className),
-            style: {
-              opacity: position ? void 0 : 0,
-              position: "fixed",
-              ...position
-            },
-            role: "listbox",
-            "aria-multiselectable": config.isMultiSelect,
-            "aria-orientation": orientation,
-            tabIndex: position ? 0 : void 0,
-            children: props.children
-          }
-        )
-      ] }),
+            )
+          ]
+        }
+      ),
       document.body
     );
   }
@@ -9353,7 +9388,7 @@ import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
 import clsx14 from "clsx";
 
 // src/theming/useTheme.tsx
-import { createContext as createContext3, useCallback as useCallback7, useContext as useContext3, useEffect as useEffect14, useMemo as useMemo2, useState as useState13 } from "react";
+import { createContext as createContext3, useCallback as useCallback7, useContext as useContext3, useEffect as useEffect14, useMemo as useMemo3, useState as useState13 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var themes = ["light", "dark", "system"];
 var defaultThemeTypeTranslation = {
@@ -9454,7 +9489,7 @@ var ThemeDialog = ({
 };
 
 // src/components/form/FormElementWrapper.tsx
-import { useId as useId4 } from "react";
+import { useId as useId5 } from "react";
 import { clsx as clsx16 } from "clsx";
 
 // src/components/user-action/Label.tsx
@@ -9492,7 +9527,7 @@ var FormElementWrapper = ({
   containerClassName
 }) => {
   const [touched, setTouched] = useOverwritableState(initialIsShowingError, onIsShowingError);
-  const generatedId = useId4();
+  const generatedId = useId5();
   const usedId = id ?? generatedId;
   const errorId = `${usedId}-description`;
   const labelId = `${usedId}-label`;
@@ -9563,7 +9598,7 @@ var FormElementWrapper = ({
 
 // src/components/icons-and-geometry/Avatar.tsx
 import clsx17 from "clsx";
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 import { UserIcon } from "lucide-react";
 
 // node_modules/@radix-ui/react-avatar/dist/index.mjs
@@ -9690,7 +9725,7 @@ function useComposedRefs(...refs) {
 }
 
 // node_modules/@radix-ui/react-slot/dist/index.mjs
-import { Fragment as Fragment22, jsx as jsx24 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx24 } from "react/jsx-runtime";
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
@@ -9962,7 +9997,7 @@ var Avatar2 = ({ image, name, size = "md", fullyRounded, className = "" }) => {
     maxHeight: pixels
   };
   const textClassName = textClassNameMapping[size];
-  const displayName = useMemo5(() => {
+  const displayName = useMemo6(() => {
     const maxLetters = size === "sm" ? 1 : 2;
     return (name ?? "").split(" ").filter((_, index) => index < maxLetters).map((value) => value[0]).join("").toUpperCase();
   }, [name, size]);
@@ -10352,14 +10387,14 @@ import {
   useCallback as useCallback10,
   useContext as useContext5,
   useEffect as useEffect18,
-  useId as useId5,
-  useMemo as useMemo6,
+  useId as useId6,
+  useMemo as useMemo7,
   useRef as useRef9,
   useState as useState16
 } from "react";
 import clsx20 from "clsx";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 var CarouselContext = createContext5(null);
 var useCarouselContext = () => {
   const context = useContext5(CarouselContext);
@@ -10502,6 +10537,7 @@ var Carousel = ({
   heightClassName = "h-96",
   widthClassName = "w-[70%] desktop:w-1/2",
   slideContainerProps,
+  onSlideChanged,
   ...props
 }) => {
   const translation = useTranslation([defaultCarouselTranslationType]);
@@ -10513,9 +10549,9 @@ var Carousel = ({
   const carouselContainerRef = useRef9(null);
   const [disableClick, setDisableClick] = useState16(false);
   const timeOut = useRef9(void 0);
-  const length = useMemo6(() => children.length, [children]);
+  const length = useMemo7(() => children.length, [children]);
   const paddingItemCount = 3;
-  const generatedId = "carousel" + useId5();
+  const generatedId = "carousel" + useId6();
   const id = props.id ?? generatedId;
   if (isAutoPlaying && !isLooping) {
     console.error("When isAutoLooping is true, isLooping should also be true");
@@ -10615,6 +10651,9 @@ var Carousel = ({
   useEffect18(() => {
     setDisableClick(!dragState);
   }, [dragState]);
+  useEffect18(() => {
+    onSlideChanged?.(currentIndex);
+  }, [currentIndex]);
   return /* @__PURE__ */ jsx31(CarouselContext.Provider, { value: { id, currentIndex, slideCount: length, isLooping }, children: /* @__PURE__ */ jsxs17(
     "div",
     {
@@ -10695,7 +10734,7 @@ var Carousel = ({
                   children: children[currentIndex]
                 }
               ),
-              arrows && /* @__PURE__ */ jsxs17(Fragment5, { children: [
+              arrows && /* @__PURE__ */ jsxs17(Fragment3, { children: [
                 /* @__PURE__ */ jsx31(
                   IconButton,
                   {
@@ -10752,7 +10791,7 @@ var DividerInserter = ({
 import clsx22 from "clsx";
 
 // src/components/layout/MarkdownInterpreter.tsx
-import { Fragment as Fragment6, jsx as jsx33 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx33 } from "react/jsx-runtime";
 var astNodeInserterType = ["helpwave", "newline"];
 var ASTNodeInterpreter = ({
   node,
@@ -10773,7 +10812,7 @@ var ASTNodeInterpreter = ({
           node: value
         },
         index
-      )) }) : /* @__PURE__ */ jsx33(Fragment6, { children: node.children.map((value, index) => /* @__PURE__ */ jsx33(ASTNodeInterpreter, { node: value }, index)) });
+      )) }) : /* @__PURE__ */ jsx33(Fragment4, { children: node.children.map((value, index) => /* @__PURE__ */ jsx33(ASTNodeInterpreter, { node: value }, index)) });
     case "bold":
       return /* @__PURE__ */ jsx33("b", { children: node.children.map((value, index) => /* @__PURE__ */ jsx33(ASTNodeInterpreter, { node: value }, index)) });
     case "italic":
@@ -11006,7 +11045,7 @@ var FAQSection = ({
 import { forwardRef as forwardRef9, useImperativeHandle as useImperativeHandle3, useRef as useRef10 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { clsx as clsx23 } from "clsx";
-import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
 var FloatingContainer = forwardRef9(function FloatingContainer2({
   children,
   backgroundOverlay,
@@ -11033,7 +11072,7 @@ var FloatingContainer = forwardRef9(function FloatingContainer2({
     screenPadding
   });
   return createPortal3(
-    /* @__PURE__ */ jsxs18(Fragment7, { children: [
+    /* @__PURE__ */ jsxs18(Fragment5, { children: [
       backgroundOverlay,
       /* @__PURE__ */ jsx35(
         "div",
@@ -11477,7 +11516,7 @@ function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForD
 
 // node_modules/@radix-ui/react-scroll-area/dist/index.mjs
 import * as React14 from "react";
-import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
 function useStateMachine2(initialState, machine) {
   return React14.useReducer((state, event) => {
     const nextState = machine[state][event];
@@ -11556,7 +11595,7 @@ var ScrollAreaViewport = React23.forwardRef(
     const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
     const ref = React23.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
-    return /* @__PURE__ */ jsxs19(Fragment8, { children: [
+    return /* @__PURE__ */ jsxs19(Fragment6, { children: [
       /* @__PURE__ */ jsx38(
         "style",
         {
@@ -12546,13 +12585,13 @@ var ProgressIndicator = ({
 // src/components/navigation/BreadCrumb.tsx
 var import_link = __toESM(require_link2());
 import clsx32 from "clsx";
-import { Fragment as Fragment9 } from "react";
+import { Fragment as Fragment7 } from "react";
 import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
 var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
   const color = "text-description";
   return /* @__PURE__ */ jsx48("div", { className: clsx32("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
-    return /* @__PURE__ */ jsxs27(Fragment9, { children: [
+    return /* @__PURE__ */ jsxs27(Fragment7, { children: [
       /* @__PURE__ */ jsx48(
         import_link.default,
         {
@@ -12570,9 +12609,9 @@ var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
 var import_link2 = __toESM(require_link2());
 import { Menu as MenuIcon, XIcon as XIcon2 } from "lucide-react";
 import { useEffect as useEffect22 } from "react";
-import { useCallback as useCallback14, useId as useId6, useRef as useRef14, useState as useState21 } from "react";
+import { useCallback as useCallback14, useId as useId7, useRef as useRef14, useState as useState21 } from "react";
 import clsx33 from "clsx";
-import { Fragment as Fragment10, jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
 }
@@ -12585,7 +12624,7 @@ var NavigationItemWithSubItem = ({
   const [isOpen, setOpen] = useState21(false);
   const containerRef = useRef14();
   const triggerRef = useRef14(null);
-  const id = useId6();
+  const id = useId7();
   const style = useFloatingElement({
     active: isOpen,
     containerRef,
@@ -12599,7 +12638,7 @@ var NavigationItemWithSubItem = ({
       setOpen(false);
     }
   }, []);
-  return /* @__PURE__ */ jsxs28(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs28(Fragment8, { children: [
     /* @__PURE__ */ jsxs28(
       "button",
       {
@@ -12648,12 +12687,12 @@ var NavigationItemList = ({ items, ...restProps }) => {
 };
 var Navigation = ({ ...props }) => {
   const [isMobileOpen, setIsMobileOpen] = useState21(false);
-  const id = useId6();
+  const id = useId7();
   const menuRef = useRef14(null);
   useEffect22(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
-  return /* @__PURE__ */ jsxs28(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs28(Fragment8, { children: [
     /* @__PURE__ */ jsx49(
       NavigationItemList,
       {
@@ -13009,7 +13048,7 @@ function useSize(element) {
 }
 
 // node_modules/@radix-ui/react-checkbox/dist/index.mjs
-import { Fragment as Fragment11, jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
 var CHECKBOX_NAME = "Checkbox";
 var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
 var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
@@ -13145,7 +13184,7 @@ var Checkbox = React19.forwardRef(
         name,
         form,
         value,
-        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ jsxs31(Fragment11, { children: [
+        internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ jsxs31(Fragment9, { children: [
           /* @__PURE__ */ jsx52(
             CheckboxTrigger,
             {
@@ -13399,7 +13438,7 @@ var PropertyBase = ({
 };
 
 // src/components/properties/CheckboxProperty.tsx
-import { useId as useId7 } from "react";
+import { useId as useId8 } from "react";
 import { jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
 var CheckboxProperty = ({
   overwriteTranslation,
@@ -13409,7 +13448,7 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  const id = useId7();
+  const id = useId8();
   return /* @__PURE__ */ jsx55(
     PropertyBase,
     {
@@ -13632,7 +13671,7 @@ import { Text } from "lucide-react";
 import clsx43 from "clsx";
 
 // src/components/user-action/Textarea.tsx
-import { forwardRef as forwardRef13, useId as useId8 } from "react";
+import { forwardRef as forwardRef13, useId as useId9 } from "react";
 import clsx42 from "clsx";
 import { jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
 var Textarea = forwardRef13(function Textarea2({
@@ -13709,7 +13748,7 @@ var TextareaWithHeadline = ({
   containerClassName,
   ...props
 }) => {
-  const genId = useId8();
+  const genId = useId9();
   const usedId = id ?? genId;
   return /* @__PURE__ */ jsxs36(
     "div",
@@ -13824,7 +13863,7 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-import { useCallback as useCallback16, useEffect as useEffect32, useMemo as useMemo9, useRef as useRef20, useState as useState29 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect32, useMemo as useMemo10, useRef as useRef20, useState as useState29 } from "react";
 import clsx48 from "clsx";
 import {
   flexRender,
@@ -14028,7 +14067,7 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-action/Menu.tsx
-import { Fragment as Fragment12, jsx as jsx65, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx65, jsxs as jsxs37 } from "react/jsx-runtime";
 var MenuItem = ({
   children,
   onClick,
@@ -14104,7 +14143,7 @@ var Menu = ({
       setIsHidden(false);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs37(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs37(Fragment10, { children: [
     trigger(bag, triggerRef),
     createPortal4(/* @__PURE__ */ jsx65(
       "div",
@@ -14136,7 +14175,7 @@ var Menu = ({
 
 // src/components/table/TableFilterButton.tsx
 import { useEffect as useEffect31, useState as useState28 } from "react";
-import { Fragment as Fragment13, jsx as jsx66, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx66, jsxs as jsxs38 } from "react/jsx-runtime";
 var defaultTableFilterTranslation = {
   en: {
     filter: "Filter",
@@ -14220,7 +14259,7 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ jsxs38(Fragment13, { children: [
+        filterType === "dateRange" && /* @__PURE__ */ jsxs38(Fragment11, { children: [
           /* @__PURE__ */ jsx66(
             Input,
             {
@@ -14292,7 +14331,7 @@ var Table = ({
     ...initialState?.pagination
   });
   const [columnFilters, setColumnFilters] = useState29(initialState?.columnFilters);
-  const computedColumnMinWidths = useMemo9(() => {
+  const computedColumnMinWidths = useMemo10(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -14301,7 +14340,7 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const computedColumnMaxWidths = useMemo9(() => {
+  const computedColumnMaxWidths = useMemo10(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -14309,12 +14348,12 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const tableMinWidth = useMemo9(() => {
+  const tableMinWidth = useMemo10(() => {
     return columns.reduce((sum, column) => {
       return sum + computedColumnMinWidths[column.id];
     }, 0);
   }, [columns, computedColumnMinWidths]);
-  const updateColumnSizes = useMemo9(() => {
+  const updateColumnSizes = useMemo10(() => {
     return (previous) => {
       const updateSizing = {
         ...columnSizing,
@@ -14458,7 +14497,7 @@ var Table = ({
       }));
     }
   }, [data, pageCount, pagination.pageSize, pagination.pageIndex]);
-  const columnSizeVars = useMemo9(() => {
+  const columnSizeVars = useMemo10(() => {
     const headers = table.getFlatHeaders();
     const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
@@ -14593,7 +14632,7 @@ var TableWithSelection = ({
   meta,
   ...props
 }) => {
-  const columnsWithSelection = useMemo9(() => {
+  const columnsWithSelection = useMemo10(() => {
     return [
       {
         id: selectionRowId,
@@ -15113,7 +15152,7 @@ var Tooltip = ({
 };
 
 // src/components/user-action/input/InsideLabelInput.tsx
-import { useId as useId9 } from "react";
+import { useId as useId10 } from "react";
 import { forwardRef as forwardRef14, useState as useState32 } from "react";
 import clsx54 from "clsx";
 import { jsx as jsx73, jsxs as jsxs45 } from "react/jsx-runtime";
@@ -15124,7 +15163,7 @@ var InsideLabelInput = forwardRef14(function InsideLabelInput2({
 }, forwardedRef) {
   const { value } = props;
   const [isFocused, setIsFocused] = useState32(false);
-  const generatedId = useId9();
+  const generatedId = useId10();
   const id = customId ?? generatedId;
   return /* @__PURE__ */ jsxs45("div", { className: clsx54("relative"), children: [
     /* @__PURE__ */ jsx73(