@helpwave/hightide 0.10.2 → 0.11.0

package/dist/index.js

@@ -7091,6 +7091,7 @@ __export(index_exports, {
   Transition: () => Transition,
   UseValidators: () => UseValidators,
   VerticalDivider: () => VerticalDivider,
+  VirtualizedTableBody: () => VirtualizedTableBody,
   Visibility: () => Visibility,
   YearMonthPicker: () => YearMonthPicker,
   buildSegmentLayout: () => buildSegmentLayout,
@@ -20089,17 +20090,95 @@ var TableHeader = ({ isSticky = false }) => {
   ] });
 };
 
-// src/components/layout/table/TableDisplay.tsx
+// src/components/layout/table/VirtualizedTableBody.tsx
+var import_react92 = require("react");
+var import_react_table5 = require("@tanstack/react-table");
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_clsx33 = __toESM(require("clsx"));
 var import_jsx_runtime84 = require("react/jsx-runtime");
+var VirtualizedTableBody = ({
+  estimateRowHeight = 48,
+  overscan = 8,
+  scroll = "window"
+}) => {
+  const { table, onRowClick } = useTableStateWithoutSizingContext();
+  const { containerRef } = useTableContainerContext();
+  const rows = table.getRowModel().rows;
+  const bodyRef = (0, import_react92.useRef)(null);
+  const [isMounted, setIsMounted] = (0, import_react92.useState)(false);
+  const [scrollMargin, setScrollMargin] = (0, import_react92.useState)(0);
+  (0, import_react92.useEffect)(() => setIsMounted(true), []);
+  (0, import_react92.useEffect)(() => {
+    if (scroll !== "window") return;
+    const element = bodyRef.current;
+    if (!element || typeof window === "undefined") return;
+    const measure = () => {
+      const next = element.getBoundingClientRect().top + window.scrollY;
+      setScrollMargin((prev) => Math.abs(prev - next) < 1 ? prev : next);
+    };
+    measure();
+    const resizeObserver = new ResizeObserver(measure);
+    resizeObserver.observe(element);
+    window.addEventListener("resize", measure);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [scroll]);
+  const common = {
+    count: rows.length,
+    estimateSize: () => estimateRowHeight,
+    overscan,
+    getItemKey: (index) => rows[index]?.id ?? index
+  };
+  const windowVirtualizer = (0, import_react_virtual.useWindowVirtualizer)({ ...common, scrollMargin });
+  const containerVirtualizer = (0, import_react_virtual.useVirtualizer)({ ...common, getScrollElement: () => containerRef.current });
+  const virtualizer = scroll === "window" ? windowVirtualizer : containerVirtualizer;
+  const offset = scroll === "window" ? scrollMargin : 0;
+  const renderRow = (row, key, measured, dataIndex) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    "tr",
+    {
+      "data-index": dataIndex,
+      ref: measured ? virtualizer.measureElement : void 0,
+      onClick: () => onRowClick?.(row, table),
+      "data-clickable": PropsUtil.dataAttributes.bool(!!onRowClick),
+      "data-name": "table-body-row",
+      className: (0, import_clsx33.default)(BagFunctionUtil.resolve(table.options.meta?.bodyRowClassName, row.original)),
+      children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("td", { "data-name": "table-body-cell", className: (0, import_clsx33.default)(cell.column.columnDef.meta?.className), children: (0, import_react_table5.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+    },
+    key
+  );
+  if (!isMounted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("tbody", { ref: bodyRef, children: rows.map((row) => renderRow(row, row.id, false)) });
+  }
+  const items = virtualizer.getVirtualItems();
+  const total = virtualizer.getTotalSize();
+  const paddingTop = items.length ? items[0].start - offset : 0;
+  const paddingBottom = items.length ? total - (items[items.length - 1].end - offset) : 0;
+  const columnCount = Math.max(1, table.getVisibleLeafColumns().length);
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("tbody", { ref: bodyRef, children: [
+    paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("tr", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("td", { colSpan: columnCount, style: { height: paddingTop, padding: 0, border: 0 } }) }),
+    items.map((virtualRow) => {
+      const row = rows[virtualRow.index];
+      if (!row) return null;
+      return renderRow(row, virtualRow.key, true, virtualRow.index);
+    }),
+    paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("tr", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("td", { colSpan: columnCount, style: { height: paddingBottom, padding: 0, border: 0 } }) })
+  ] });
+};
+
+// src/components/layout/table/TableDisplay.tsx
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var TableDisplay = ({
   children,
   containerProps,
   tableHeaderProps,
+  virtualized = false,
   ...props
 }) => {
   const { table } = useTableStateContext();
   const { containerRef } = useTableContainerContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { ...containerProps, ref: containerRef, "data-name": containerProps?.["data-name"] ?? "table-container", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { ...containerProps, ref: containerRef, "data-name": containerProps?.["data-name"] ?? "table-container", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
     "table",
     {
       ...props,
@@ -20110,19 +20189,19 @@ var TableDisplay = ({
       },
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(TableHeader, { ...tableHeaderProps }),
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(TableBody, {})
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TableHeader, { ...tableHeaderProps }),
+        virtualized ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(VirtualizedTableBody, { ...typeof virtualized === "object" ? virtualized : {} }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TableBody, {})
       ]
     }
   ) });
 };
 
 // src/components/layout/table/TablePagination.tsx
-var import_clsx33 = __toESM(require("clsx"));
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_clsx34 = __toESM(require("clsx"));
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var TablePaginationMenu = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     Pagination,
     {
       ...props,
@@ -20142,27 +20221,27 @@ var TablePageSizeSelect = ({
 }) => {
   const { table } = useTableStateWithoutSizingContext();
   const currentPageSize = table.getState().pagination.pageSize;
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     Select,
     {
       ...props,
       value: currentPageSize.toString(),
       onValueChange: (value) => table.setPageSize(Number(value)),
-      children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SelectOption, { value: size.toString(), label: size.toString() }, size))
+      children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(SelectOption, { value: size.toString(), label: size.toString() }, size))
     }
   );
 };
 var TablePagination = ({ allowChangingPageSize = true, pageSizeOptions, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { ...props, className: (0, import_clsx33.default)("container flex-col-2 sm:flex-row-8 items-center justify-center", props.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TablePaginationMenu, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "h-10 min-w-24 max-w-24" } }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { ...props, className: (0, import_clsx34.default)("container flex-col-2 sm:flex-row-8 items-center justify-center", props.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TablePaginationMenu, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Visibility, { isVisible: allowChangingPageSize, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TablePageSizeSelect, { pageSizeOptions, buttonProps: { className: "h-10 min-w-24 max-w-24" } }) })
   ] });
 };
 
 // src/components/user-interaction/Checkbox.tsx
 var import_lucide_react24 = require("lucide-react");
-var import_react92 = require("react");
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_react93 = require("react");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var Checkbox = ({
   value: controlledValue,
   initialValue = false,
@@ -20179,7 +20258,7 @@ var Checkbox = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = (0, import_react92.useCallback)((value2) => {
+  const onChangeWrapper = (0, import_react93.useCallback)((value2) => {
     onValueChangeStable(value2);
     onEditCompleteStable(value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -20188,7 +20267,7 @@ var Checkbox = ({
     onValueChange: onChangeWrapper,
     defaultValue: initialValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
     "div",
     {
       ...props,
@@ -20215,16 +20294,16 @@ var Checkbox = ({
       ...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props),
       "data-name": props["data-name"] ?? "checkbox",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react24.Minus, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react24.Check, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) })
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Visibility, { isVisible: indeterminate, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react24.Minus, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Visibility, { isVisible: !indeterminate && (alwaysShowCheckIcon || value), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react24.Check, { "data-name": "checkbox-indicator", className: "checkbox-indicator", "aria-hidden": true }) })
       ]
     }
   );
 };
 
 // src/components/layout/table/TableWithSelectionProvider.tsx
-var import_react93 = require("react");
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_react94 = require("react");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var TableWithSelectionProvider = ({
   children,
   state,
@@ -20236,11 +20315,11 @@ var TableWithSelectionProvider = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const columnDef = (0, import_react93.useMemo)(() => [
+  const columnDef = (0, import_react94.useMemo)(() => [
     {
       id: selectionRowId,
       header: ({ table }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
           Checkbox,
           {
             value: table.getIsAllRowsSelected(),
@@ -20253,7 +20332,7 @@ var TableWithSelectionProvider = ({
         );
       },
       cell: ({ row }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
           Checkbox,
           {
             disabled: !row.getCanSelect(),
@@ -20275,15 +20354,15 @@ var TableWithSelectionProvider = ({
     },
     ...props.columns ?? []
   ], [selectionRowId, props.columns, translation]);
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     TableProvider,
     {
       ...props,
-      fillerRowCell: (0, import_react93.useCallback)((columnId, table) => {
+      fillerRowCell: (0, import_react94.useCallback)((columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Checkbox, { value: false, disabled: true });
+          return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Checkbox, { value: false, disabled: true });
         }
-        return fillerRowCell?.(columnId, table) ?? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(FillerCell, {});
+        return fillerRowCell?.(columnId, table) ?? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(FillerCell, {});
       }, [fillerRowCell, selectionRowId]),
       columns: columnDef,
       initialState: {
@@ -20297,7 +20376,7 @@ var TableWithSelectionProvider = ({
         rowSelection,
         ...state
       },
-      onRowClick: (0, import_react93.useCallback)((row, table) => {
+      onRowClick: (0, import_react94.useCallback)((row, table) => {
         if (!disableClickRowClickSelection) {
           row.toggleSelected();
         }
@@ -20309,14 +20388,14 @@ var TableWithSelectionProvider = ({
 };
 
 // src/components/layout/table/Table.tsx
-var import_clsx34 = __toESM(require("clsx"));
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_clsx35 = __toESM(require("clsx"));
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var Table = ({ children, table, paginationOptions, displayProps, header, footer, ...props }) => {
   const { showPagination = true, allowChangingPageSize, pageSizeOptions } = paginationOptions ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { ...props, className: (0, import_clsx34.default)("flex-col-3", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(TableProvider, { ...table, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { ...props, className: (0, import_clsx35.default)("flex-col-3", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(TableProvider, { ...table, children: [
     header,
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(TableDisplay, { ...displayProps, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TableDisplay, { ...displayProps, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
     footer
   ] }) });
 };
@@ -20330,17 +20409,17 @@ var TableWithSelection = ({
   ...props
 }) => {
   const { showPagination = true, allowChangingPageSize, pageSizeOptions } = paginationOptions ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { ...props, className: (0, import_clsx34.default)("flex-col-3", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(TableWithSelectionProvider, { ...table, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { ...props, className: (0, import_clsx35.default)("flex-col-3", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(TableWithSelectionProvider, { ...table, children: [
     header,
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(TableDisplay, { ...displayProps, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TableDisplay, { ...displayProps, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Visibility, { isVisible: showPagination, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TablePagination, { allowChangingPageSize, pageSizeOptions }) }),
     footer
   ] }) });
 };
 
 // src/components/layout/table/TableColumn.tsx
-var import_react94 = require("react");
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_react95 = require("react");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var TableColumnComponent = ({
   filterType,
   ...props
@@ -20351,11 +20430,11 @@ var TableColumnComponent = ({
     "TableColumn: For filterType === multiTags or singleTag, filterData.tags must be set.",
     (filterType === "multiTags" || filterType === "singleTag") && props.meta?.filterData?.tags === void 0
   );
-  const [column] = (0, import_react94.useState)({
+  const [column] = (0, import_react95.useState)({
     ...props,
     filterFn
   });
-  (0, import_react94.useEffect)(() => {
+  (0, import_react95.useEffect)(() => {
     const unsubscribe = registerColumn(column);
     return () => {
       unsubscribe();
@@ -20363,27 +20442,27 @@ var TableColumnComponent = ({
   }, [registerColumn, column]);
   return null;
 };
-var TableColumnFactory = () => (0, import_react94.memo)(
+var TableColumnFactory = () => (0, import_react95.memo)(
   TableColumnComponent,
   (prevProps, nextProps) => {
     return prevProps.filterType === nextProps.filterType && prevProps.id === nextProps.id && prevProps["accessorKey"] === nextProps["accessorKey"] && prevProps.enableColumnFilter === nextProps.enableColumnFilter && prevProps.enableGlobalFilter === nextProps.enableGlobalFilter && prevProps.enableGrouping === nextProps.enableGrouping && prevProps.enableHiding === nextProps.enableHiding && prevProps.enablePinning === nextProps.enablePinning && prevProps.enableResizing === nextProps.enableResizing && prevProps.enableSorting === nextProps.enableSorting && prevProps.meta === nextProps.meta, prevProps.cell === nextProps.cell;
   }
 );
 var TableColumn = (props) => {
-  const TableColumnComponent2 = (0, import_react94.useMemo)(() => TableColumnFactory(), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TableColumnComponent2, { ...props });
+  const TableColumnComponent2 = (0, import_react95.useMemo)(() => TableColumnFactory(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TableColumnComponent2, { ...props });
 };
 
 // src/components/layout/table/TableColumnSwitcher.tsx
-var import_react95 = require("react");
+var import_react96 = require("react");
 var import_lucide_react25 = require("lucide-react");
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var TableColumnSwitcherPopUp = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
   const translation = useHightideTranslation();
-  const containerRef = (0, import_react95.useRef)(null);
-  const generatedId = (0, import_react95.useId)();
-  const ids = (0, import_react95.useMemo)(() => ({
+  const containerRef = (0, import_react96.useRef)(null);
+  const generatedId = (0, import_react96.useId)();
+  const ids = (0, import_react96.useMemo)(() => ({
     popup: props.id ?? `table-column-picker-popup-${generatedId}`,
     label: `table-column-picker-label-${generatedId}`
   }), [generatedId, props.id]);
@@ -20392,7 +20471,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
   const tableState = table.getState();
   const columnOrder = tableState.columnOrder;
   const columnPinning = tableState.columnPinning;
-  const columns = (0, import_react95.useMemo)(() => {
+  const columns = (0, import_react96.useMemo)(() => {
     const allColumns = table.getAllColumns();
     const leftPinned = [];
     const unpinned = [];
@@ -20508,7 +20587,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
     }
     return columnId;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
     PopUp,
     {
       ...props,
@@ -20524,11 +20603,11 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
       "aria-describedby": ids.label,
       className: "flex-col-1 p-2 items-start min-w-72",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex-col-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { id: ids.label, className: "typography-title-md font-semibold", children: translation("columnPicker") }),
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "text-description typography-label-sm mb-2", children: translation("columnPickerDescription") })
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "flex-col-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { id: ids.label, className: "typography-title-md font-semibold", children: translation("columnPicker") }),
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "text-description typography-label-sm mb-2", children: translation("columnPickerDescription") })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "flex-col-1 overflow-y-auto w-full", children: columns.map((column, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "flex-col-1 overflow-y-auto w-full", children: columns.map((column, index) => {
           const columnId = column.id;
           const isVisible = column.getIsVisible();
           const pinState = column.getIsPinned();
@@ -20539,9 +20618,9 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
           const nextIsPinned = nextColumn?.getCanPin() && !!nextColumn.getIsPinned();
           const canMoveUp = index > 0 && !isPinned && !prevIsPinned;
           const canMoveDown = index < columns.length - 1 && !isPinned && !nextIsPinned;
-          return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex-row-2 items-center justify-between gap-2 w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "flex-row-2 gap-1", children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "flex-row-2 items-center justify-between gap-2 w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "flex-row-2 gap-1", children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                 IconButton,
                 {
                   tooltip: translation("pinToLeft"),
@@ -20550,10 +20629,10 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   coloringStyle: "text",
                   disabled: pinState === "left",
                   onClick: () => pinColumn(columnId, "left"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react25.ChevronLeft, { className: "size-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react25.ChevronLeft, { className: "size-4" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                 IconButton,
                 {
                   tooltip: translation("pinToRight"),
@@ -20562,11 +20641,11 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   coloringStyle: "text",
                   disabled: pinState === "right",
                   onClick: () => pinColumn(columnId, "right"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react25.ChevronRight, { className: "size-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react25.ChevronRight, { className: "size-4" })
                 }
               )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                 IconButton,
                 {
                   tooltip: translation("increaseSortingPriority"),
@@ -20575,10 +20654,10 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   coloringStyle: "text",
                   disabled: !canMoveUp,
                   onClick: () => moveColumn(columnId, "up"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react25.ChevronUp, { className: "size-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react25.ChevronUp, { className: "size-4" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                 IconButton,
                 {
                   tooltip: translation("decreaseSortingPriority"),
@@ -20587,13 +20666,13 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   coloringStyle: "text",
                   disabled: !canMoveDown,
                   onClick: () => moveColumn(columnId, "down"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react25.ChevronDown, { className: "size-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react25.ChevronDown, { className: "size-4" })
                 }
               )
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "flex-1 typography-label-lg", children: getColumnHeader(columnId) }),
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Visibility, { isVisible: enableHiding, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "flex-1 typography-label-lg", children: getColumnHeader(columnId) }),
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Visibility, { isVisible: enableHiding, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                 IconButton,
                 {
                   tooltip: translation("changeVisibility"),
@@ -20603,10 +20682,10 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   disabled: !column.getCanHide(),
                   onClick: () => toggleColumnVisibility(columnId),
                   "aria-label": isVisible ? translation("hideColumn") : translation("showColumn"),
-                  children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react25.Eye, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react25.EyeOff, { className: "size-4" })
+                  children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react25.Eye, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react25.EyeOff, { className: "size-4" })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Visibility, { isVisible: enableColumnPinning, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Visibility, { isVisible: enableColumnPinning, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                 IconButton,
                 {
                   tooltip: translation("changePinning"),
@@ -20622,7 +20701,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                     }
                   },
                   "aria-label": isPinned ? translation("unpin") : translation("pinLeft"),
-                  children: !isPinned ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react25.PinOff, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react25.Pin, { className: "size-4" })
+                  children: !isPinned ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react25.PinOff, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react25.Pin, { className: "size-4" })
                 }
               ) })
             ] })
@@ -20634,32 +20713,32 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
 };
 var TableColumnSwitcher = ({ buttonProps, ...props }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(PopUpRoot, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(PopUpOpener, { children: ({ props: props2 }) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(PopUpRoot, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(PopUpOpener, { children: ({ props: props2 }) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
       IconButton,
       {
         ...props2,
         color: "neutral",
         tooltip: translation("changeColumnDisplay"),
         ...buttonProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react25.Columns3Cog, { className: "size-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react25.Columns3Cog, { className: "size-5" })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TableColumnSwitcherPopUp, { ...props })
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(TableColumnSwitcherPopUp, { ...props })
   ] });
 };
 
 // src/components/user-interaction/Combobox/Combobox.tsx
-var import_react101 = require("react");
+var import_react102 = require("react");
 
 // src/components/user-interaction/Combobox/ComboboxRoot.tsx
-var import_react98 = require("react");
+var import_react99 = require("react");
 
 // src/components/user-interaction/Combobox/ComboboxContext.tsx
-var import_react96 = require("react");
-var ComboboxContext = (0, import_react96.createContext)(null);
+var import_react97 = require("react");
+var ComboboxContext = (0, import_react97.createContext)(null);
 function useComboboxContext() {
-  const ctx = (0, import_react96.useContext)(ComboboxContext);
+  const ctx = (0, import_react97.useContext)(ComboboxContext);
   if (ctx == null) {
     throw new Error("useComboboxContext must be used within ComboboxRoot");
   }
@@ -20667,7 +20746,7 @@ function useComboboxContext() {
 }
 
 // src/components/user-interaction/Combobox/useCombobox.ts
-var import_react97 = require("react");
+var import_react98 = require("react");
 function useCombobox({
   options,
   searchQuery: controlledSearchQuery,
@@ -20682,36 +20761,36 @@ function useCombobox({
   const { searchResult: visibleOptions } = useSearch({
     items: options,
     searchQuery: searchQuery ?? "",
-    toTags: (0, import_react97.useCallback)((o) => [o.label], [])
+    toTags: (0, import_react98.useCallback)((o) => [o.label], [])
   });
-  const visibleOptionIds = (0, import_react97.useMemo)(
+  const visibleOptionIds = (0, import_react98.useMemo)(
     () => visibleOptions.map((o) => o.id),
     [visibleOptions]
   );
-  const enabledOptionIds = (0, import_react97.useMemo)(
+  const enabledOptionIds = (0, import_react98.useMemo)(
     () => visibleOptions.filter((o) => !o.disabled).map((o) => o.id),
     [visibleOptions]
   );
   const listNav = useListNavigation({ options: enabledOptionIds });
-  const highlightItem = (0, import_react97.useCallback)(
+  const highlightItem = (0, import_react98.useCallback)(
     (id) => {
       if (!enabledOptionIds.includes(id)) return;
       listNav.highlight(id);
     },
     [enabledOptionIds, listNav]
   );
-  const state = (0, import_react97.useMemo)(
+  const state = (0, import_react98.useMemo)(
     () => ({
       searchQuery: searchQuery ?? "",
       highlightedId: listNav.highlightedId
     }),
     [searchQuery, listNav.highlightedId]
   );
-  const computedState = (0, import_react97.useMemo)(
+  const computedState = (0, import_react98.useMemo)(
     () => ({ visibleOptionIds }),
     [visibleOptionIds]
   );
-  const actions = (0, import_react97.useMemo)(
+  const actions = (0, import_react98.useMemo)(
     () => ({
       setSearchQuery,
       highlightFirst: listNav.first,
@@ -20722,7 +20801,7 @@ function useCombobox({
     }),
     [setSearchQuery, listNav.first, listNav.last, listNav.next, listNav.previous, highlightItem]
   );
-  return (0, import_react97.useMemo)(
+  return (0, import_react98.useMemo)(
     () => ({
       ...state,
       ...computedState,
@@ -20733,20 +20812,20 @@ function useCombobox({
 }
 
 // src/components/user-interaction/Combobox/ComboboxRoot.tsx
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 function ComboboxRoot({
   children,
   onItemClick,
   ...hookProps
 }) {
-  const [options, setOptions] = (0, import_react98.useState)([]);
-  const [listRef, setListRef] = (0, import_react98.useState)(null);
-  const generatedId = (0, import_react98.useId)();
-  const [ids, setIds] = (0, import_react98.useState)({
+  const [options, setOptions] = (0, import_react99.useState)([]);
+  const [listRef, setListRef] = (0, import_react99.useState)(null);
+  const generatedId = (0, import_react99.useId)();
+  const [ids, setIds] = (0, import_react99.useState)({
     trigger: `combobox-${generatedId}`,
     listbox: `combobox-${generatedId}-listbox`
   });
-  const registerOption = (0, import_react98.useCallback)(
+  const registerOption = (0, import_react99.useCallback)(
     (option) => {
       setOptions((prev) => {
         const next = prev.filter((o) => o.id !== option.id);
@@ -20758,11 +20837,11 @@ function ComboboxRoot({
     },
     []
   );
-  const registerList = (0, import_react98.useCallback)((ref) => {
+  const registerList = (0, import_react99.useCallback)((ref) => {
     setListRef(() => ref);
     return () => setListRef(null);
   }, []);
-  const hookOptions = (0, import_react98.useMemo)(
+  const hookOptions = (0, import_react99.useMemo)(
     () => options.map((o) => ({
       id: o.id,
       label: o.label,
@@ -20771,38 +20850,38 @@ function ComboboxRoot({
     [options]
   );
   const state = useCombobox({ ...hookProps, options: hookOptions });
-  const idToOptionMap = (0, import_react98.useMemo)(() => {
+  const idToOptionMap = (0, import_react99.useMemo)(() => {
     return options.reduce((acc, o) => {
       acc[o.id] = o;
       return acc;
     }, {});
   }, [options]);
-  const selectOption = (0, import_react98.useCallback)(
+  const selectOption = (0, import_react99.useCallback)(
     (id) => {
       const option = idToOptionMap[id];
       if (option) onItemClick?.(option.value);
     },
     [idToOptionMap, onItemClick]
   );
-  const config = (0, import_react98.useMemo)(
+  const config = (0, import_react99.useMemo)(
     () => ({ ids, setIds }),
     [ids, setIds]
   );
-  const layout = (0, import_react98.useMemo)(
+  const layout = (0, import_react99.useMemo)(
     () => ({
       listRef: listRef ?? { current: null },
       registerList
     }),
     [listRef, registerList]
   );
-  const search = (0, import_react98.useMemo)(
+  const search = (0, import_react99.useMemo)(
     () => ({
       searchQuery: state.searchQuery,
       setSearchQuery: state.setSearchQuery
     }),
     [state.searchQuery, state.setSearchQuery]
   );
-  const contextValue = (0, import_react98.useMemo)(
+  const contextValue = (0, import_react99.useMemo)(
     () => ({
       highlightedId: state.highlightedId,
       options,
@@ -20836,18 +20915,18 @@ function ComboboxRoot({
       search
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ComboboxContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ComboboxContext.Provider, { value: contextValue, children });
 }
 
 // src/components/user-interaction/Combobox/ComboboxInput.tsx
-var import_react99 = require("react");
-var import_jsx_runtime92 = require("react/jsx-runtime");
-var ComboboxInput = (0, import_react99.forwardRef)(
+var import_react100 = require("react");
+var import_jsx_runtime93 = require("react/jsx-runtime");
+var ComboboxInput = (0, import_react100.forwardRef)(
   function ComboboxInput2(props, ref) {
     const translation = useHightideTranslation();
     const context = useComboboxContext();
     const { highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId, selectOption } = context;
-    const handleKeyDown = (0, import_react99.useCallback)(
+    const handleKeyDown = (0, import_react100.useCallback)(
       (event) => {
         props.onKeyDown?.(event);
         switch (event.key) {
@@ -20879,7 +20958,7 @@ var ComboboxInput = (0, import_react99.forwardRef)(
       },
       [props, highlightedId, selectOption, highlightNext, highlightPrevious, highlightFirst, highlightLast]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       Input,
       {
         ...props,
@@ -20899,17 +20978,17 @@ var ComboboxInput = (0, import_react99.forwardRef)(
 );
 
 // src/components/user-interaction/Combobox/ComboboxList.tsx
-var import_react100 = require("react");
-var import_clsx35 = __toESM(require("clsx"));
-var import_jsx_runtime93 = require("react/jsx-runtime");
-var ComboboxList = (0, import_react100.forwardRef)(
+var import_react101 = require("react");
+var import_clsx36 = __toESM(require("clsx"));
+var import_jsx_runtime94 = require("react/jsx-runtime");
+var ComboboxList = (0, import_react101.forwardRef)(
   function ComboboxList2({ children, ...props }, ref) {
     const translation = useHightideTranslation();
     const context = useComboboxContext();
     const { layout } = context;
     const { registerList } = layout;
-    const innerRef = (0, import_react100.useRef)(null);
-    (0, import_react100.useEffect)(() => {
+    const innerRef = (0, import_react101.useRef)(null);
+    (0, import_react101.useEffect)(() => {
       return registerList(innerRef);
     }, [registerList]);
     const setRefs = (node) => {
@@ -20918,7 +20997,7 @@ var ComboboxList = (0, import_react100.forwardRef)(
       else if (ref) ref.current = node;
     };
     const count = context.visibleOptionIds.length;
-    return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
       "ul",
       {
         ...props,
@@ -20930,7 +21009,7 @@ var ComboboxList = (0, import_react100.forwardRef)(
         "data-name": "combobox-list",
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "li",
             {
               role: "option",
@@ -20939,7 +21018,7 @@ var ComboboxList = (0, import_react100.forwardRef)(
               "aria-live": "polite",
               "aria-atomic": true,
               "data-name": "combobox-list-status",
-              className: (0, import_clsx35.default)({ "sr-only": count > 0 }),
+              className: (0, import_clsx36.default)({ "sr-only": count > 0 }),
               children: translation("nResultsFound", { count })
             }
           )
@@ -20950,8 +21029,8 @@ var ComboboxList = (0, import_react100.forwardRef)(
 );
 
 // src/components/user-interaction/Combobox/Combobox.tsx
-var import_jsx_runtime94 = require("react/jsx-runtime");
-var Combobox = (0, import_react101.forwardRef)(function Combobox2({
+var import_jsx_runtime95 = require("react/jsx-runtime");
+var Combobox = (0, import_react102.forwardRef)(function Combobox2({
   children,
   onItemClick,
   searchQuery,
@@ -20960,7 +21039,7 @@ var Combobox = (0, import_react101.forwardRef)(function Combobox2({
   inputProps,
   listProps
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
     ComboboxRoot,
     {
       onItemClick,
@@ -20968,18 +21047,18 @@ var Combobox = (0, import_react101.forwardRef)(function Combobox2({
       onSearchQueryChange,
       initialSearchQuery,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ComboboxInput, { ref, ...inputProps }),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ComboboxList, { ...listProps, children })
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ComboboxInput, { ref, ...inputProps }),
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ComboboxList, { ...listProps, children })
       ]
     }
   );
 });
 
 // src/components/user-interaction/Combobox/ComboboxOption.tsx
-var import_react102 = require("react");
-var import_clsx36 = __toESM(require("clsx"));
-var import_jsx_runtime95 = require("react/jsx-runtime");
-var ComboboxOption = (0, import_react102.forwardRef)(function ComboboxOption2({
+var import_react103 = require("react");
+var import_clsx37 = __toESM(require("clsx"));
+var import_jsx_runtime96 = require("react/jsx-runtime");
+var ComboboxOption = (0, import_react103.forwardRef)(function ComboboxOption2({
   children,
   value,
   label,
@@ -20990,11 +21069,11 @@ var ComboboxOption = (0, import_react102.forwardRef)(function ComboboxOption2({
 }, ref) {
   const context = useComboboxContext();
   const { registerOption } = context;
-  const itemRef = (0, import_react102.useRef)(null);
-  const generatedId = (0, import_react102.useId)();
+  const itemRef = (0, import_react103.useRef)(null);
+  const generatedId = (0, import_react103.useId)();
   const optionId = idProp ?? `combobox-option-${generatedId}`;
   const resolvedDisplay = children ?? label;
-  (0, import_react102.useEffect)(() => {
+  (0, import_react103.useEffect)(() => {
     return registerOption({
       id: optionId,
       value,
@@ -21004,14 +21083,14 @@ var ComboboxOption = (0, import_react102.forwardRef)(function ComboboxOption2({
       ref: itemRef
     });
   }, [optionId, value, label, resolvedDisplay, disabled, registerOption]);
-  (0, import_react102.useEffect)(() => {
+  (0, import_react103.useEffect)(() => {
     if (context.highlightedId === optionId) {
       itemRef.current?.scrollIntoView?.({ behavior: "smooth", block: "nearest" });
     }
   }, [context.highlightedId, optionId]);
   const isVisible = context.visibleOptionIds.includes(optionId);
   const isHighlighted = context.highlightedId === optionId;
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     "li",
     {
       ...restProps,
@@ -21030,7 +21109,7 @@ var ComboboxOption = (0, import_react102.forwardRef)(function ComboboxOption2({
       "data-highlighted": isHighlighted ? "" : void 0,
       "data-visible": isVisible ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
-      className: (0, import_clsx36.default)(!isVisible && "hidden", className),
+      className: (0, import_clsx37.default)(!isVisible && "hidden", className),
       onClick: (event) => {
         if (!disabled) {
           context.selectOption(optionId);
@@ -21050,8 +21129,8 @@ var ComboboxOption = (0, import_react102.forwardRef)(function ComboboxOption2({
 ComboboxOption.displayName = "ComboboxOption";
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
-var import_react103 = require("react");
-var import_clsx37 = require("clsx");
+var import_react104 = require("react");
+var import_clsx38 = require("clsx");
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -21060,7 +21139,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-interaction/CopyToClipboardWrapper.tsx
 var import_lucide_react26 = require("lucide-react");
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -21073,8 +21152,8 @@ var CopyToClipboardWrapper = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react103.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react104.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
     TooltipRoot,
     {
       isInitiallyShown,
@@ -21086,11 +21165,11 @@ var CopyToClipboardWrapper = ({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TooltipTrigger, { children: ({ props: props2, callbackRef, disabled: disabled2 }) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(TooltipTrigger, { children: ({ props: props2, callbackRef, disabled: disabled2 }) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           "div",
           {
             ref: callbackRef,
-            className: (0, import_clsx37.clsx)("w-fit hover:cursor-copy", containerClassName),
+            className: (0, import_clsx38.clsx)("w-fit hover:cursor-copy", containerClassName),
             ...disabled2 ? void 0 : props2,
             onClick: () => {
               if (disabled2) return;
@@ -21101,17 +21180,17 @@ var CopyToClipboardWrapper = ({
             children
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           TooltipDisplay,
           {
             alignment,
             isAnimated,
             ...props,
-            children: isShowingConfirmation ? /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "flex-row-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react26.CheckIcon, { size: 16, className: "text-positive" }),
+            children: isShowingConfirmation ? /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex-row-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_lucide_react26.CheckIcon, { size: 16, className: "text-positive" }),
               translation("copied")
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "flex-row-1 text-description", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react26.Copy, { size: 16 }),
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex-row-1 text-description", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_lucide_react26.Copy, { size: 16 }),
               translation("clickToCopy")
             ] })
           }
@@ -21122,18 +21201,18 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-interaction/Menu.tsx
-var import_react104 = require("react");
-var import_clsx38 = __toESM(require("clsx"));
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_react105 = require("react");
+var import_clsx39 = __toESM(require("clsx"));
+var import_jsx_runtime98 = require("react/jsx-runtime");
 var MenuItem = ({
   children,
   onClick,
   isDisabled = false,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime98.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
@@ -21148,17 +21227,17 @@ var Menu = ({
   disabled = false,
   ...props
 }) => {
-  const triggerRef = (0, import_react104.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react104.useState)(false);
+  const triggerRef = (0, import_react105.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react105.useState)(false);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
     toggleOpen: () => setIsOpen((prevState) => !prevState),
     disabled
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(import_jsx_runtime97.Fragment, { children: [
-    trigger(bag, (0, import_react104.useCallback)((el) => triggerRef.current = el, [])),
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_jsx_runtime98.Fragment, { children: [
+    trigger(bag, (0, import_react105.useCallback)((el) => triggerRef.current = el, [])),
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
       PopUp,
       {
         ...props,
@@ -21179,21 +21258,21 @@ var Menu = ({
 };
 
 // src/components/user-interaction/MultiSelect/MultiSelectChipDisplay.tsx
-var import_react105 = require("react");
+var import_react106 = require("react");
 var import_lucide_react27 = require("lucide-react");
-var import_jsx_runtime98 = require("react/jsx-runtime");
-var MultiSelectChipDisplayButton = (0, import_react105.forwardRef)(function MultiSelectChipDisplayButton2({ id, ...props }, ref) {
+var import_jsx_runtime99 = require("react/jsx-runtime");
+var MultiSelectChipDisplayButton = (0, import_react106.forwardRef)(function MultiSelectChipDisplayButton2({ id, ...props }, ref) {
   const translation = useHightideTranslation();
   const context = useMultiSelectContext();
   const { config, layout } = context;
   const { setIds } = config;
   const { registerTrigger } = layout;
-  (0, import_react105.useEffect)(() => {
+  (0, import_react106.useEffect)(() => {
     if (id) setIds((prev) => ({ ...prev, trigger: id }));
   }, [id, setIds]);
-  const innerRef = (0, import_react105.useRef)(null);
-  (0, import_react105.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react105.useEffect)(() => {
+  const innerRef = (0, import_react106.useRef)(null);
+  (0, import_react106.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react106.useEffect)(() => {
     const unregister = registerTrigger(innerRef);
     return () => unregister();
   }, [registerTrigger]);
@@ -21202,7 +21281,7 @@ var MultiSelectChipDisplayButton = (0, import_react105.forwardRef)(function Mult
   const invalid = context.invalid;
   const hasInteractions = !readOnly && !disabled;
   const selectedOptions = context.selectedIds.map((oid) => context.idToOptionMap[oid]).filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
     "div",
     {
       ...props,
@@ -21222,9 +21301,9 @@ var MultiSelectChipDisplayButton = (0, import_react105.forwardRef)(function Mult
       "aria-disabled": disabled,
       "aria-readonly": readOnly,
       children: [
-        selectedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { "data-name": "multi-select-chip-display-chip", children: [
+        selectedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { "data-name": "multi-select-chip-display-chip", children: [
           opt.display,
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
             IconButton,
             {
               tooltip: translation("remove"),
@@ -21237,11 +21316,11 @@ var MultiSelectChipDisplayButton = (0, import_react105.forwardRef)(function Mult
               color: "negative",
               coloringStyle: "text",
               className: "flex-row-0 items-center size-7 p-1",
-              children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.XIcon, { className: "size-5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_lucide_react27.XIcon, { className: "size-5" })
             }
           )
         ] }, opt.id)),
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
           IconButton,
           {
             id: context.config.ids.trigger,
@@ -21270,31 +21349,31 @@ var MultiSelectChipDisplayButton = (0, import_react105.forwardRef)(function Mult
             "aria-expanded": context.isOpen,
             "aria-controls": context.isOpen ? context.config.ids.content : void 0,
             className: "size-9",
-            children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.Plus, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_lucide_react27.Plus, {})
           }
         )
       ]
     }
   );
 });
-var MultiSelectChipDisplay = (0, import_react105.forwardRef)(
+var MultiSelectChipDisplay = (0, import_react106.forwardRef)(
   function MultiSelectChipDisplay2({
     children,
     contentPanelProps,
     chipDisplayProps,
     ...props
   }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(MultiSelectRoot, { ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(MultiSelectChipDisplayButton, { ref, ...chipDisplayProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(MultiSelectContent, { ...contentPanelProps, children })
+    return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(MultiSelectRoot, { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(MultiSelectChipDisplayButton, { ref, ...chipDisplayProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(MultiSelectContent, { ...contentPanelProps, children })
     ] });
   }
 );
 
 // src/components/user-interaction/ScrollPicker.tsx
-var import_react106 = require("react");
-var import_clsx39 = __toESM(require("clsx"));
-var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_react107 = require("react");
+var import_clsx40 = __toESM(require("clsx"));
+var import_jsx_runtime100 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -21313,7 +21392,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react106.useState)({
+  }, setAnimation] = (0, import_react107.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -21329,7 +21408,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = (0, import_react106.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react107.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -21339,7 +21418,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react106.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react107.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -21412,7 +21491,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react106.useEffect)(() => {
+  (0, import_react107.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -21433,7 +21512,7 @@ var ScrollPicker = ({
     }
     return MathUtil.clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     "div",
     {
       className: "relative overflow-hidden",
@@ -21444,15 +21523,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + deltaY }));
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
           "div",
           {
             className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/50 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -21460,10 +21539,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime100.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,
@@ -21490,8 +21569,8 @@ var ScrollPicker = ({
 };
 
 // src/components/user-interaction/Switch.tsx
-var import_react107 = require("react");
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_react108 = require("react");
+var import_jsx_runtime101 = require("react/jsx-runtime");
 var Switch = ({
   value: controlledValue,
   initialValue = false,
@@ -21505,7 +21584,7 @@ var Switch = ({
 }) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange);
-  const onChangeWrapper = (0, import_react107.useCallback)((value2) => {
+  const onChangeWrapper = (0, import_react108.useCallback)((value2) => {
     onValueChangeStable(!value2);
     onEditCompleteStable(!value2);
   }, [onValueChangeStable, onEditCompleteStable]);
@@ -21514,7 +21593,7 @@ var Switch = ({
     onValueChange: onChangeWrapper,
     defaultValue: initialValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
     "div",
     {
       ...props,
@@ -21539,16 +21618,16 @@ var Switch = ({
       "data-name": props["data-name"] ?? "switch",
       "data-active": PropsUtil.dataAttributes.bool(value),
       ...PropsUtil.dataAttributes.interactionStates({ disabled, invalid, readOnly, required }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { "data-name": "switch-track", className: "switch-track", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { "data-name": "switch-thumb", "data-active": PropsUtil.dataAttributes.bool(value), className: "switch-thumb" }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { "data-name": "switch-track", className: "switch-track", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { "data-name": "switch-thumb", "data-active": PropsUtil.dataAttributes.bool(value), className: "switch-thumb" }) })
     }
   );
 };
 
 // src/components/user-interaction/Textarea.tsx
-var import_react108 = require("react");
-var import_clsx40 = __toESM(require("clsx"));
-var import_jsx_runtime101 = require("react/jsx-runtime");
-var Textarea = (0, import_react108.forwardRef)(function Textarea2({
+var import_react109 = require("react");
+var import_clsx41 = __toESM(require("clsx"));
+var import_jsx_runtime102 = require("react/jsx-runtime");
+var Textarea = (0, import_react109.forwardRef)(function Textarea2({
   value: controlledValue,
   initialValue,
   invalid = false,
@@ -21564,11 +21643,11 @@ var Textarea = (0, import_react108.forwardRef)(function Textarea2({
   });
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete);
-  const onEditCompleteWrapper = (0, import_react108.useCallback)((text) => {
+  const onEditCompleteWrapper = (0, import_react109.useCallback)((text) => {
     onEditCompleteStable(text);
     clearTimer();
   }, [onEditCompleteStable, clearTimer]);
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
     "textarea",
     {
       ...props,
@@ -21602,12 +21681,12 @@ var TextareaWithHeadline = ({
   containerClassName,
   ...props
 }) => {
-  const genId = (0, import_react108.useId)();
+  const genId = (0, import_react109.useId)();
   const usedId = id ?? genId;
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.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,
@@ -21616,13 +21695,13 @@ var TextareaWithHeadline = ({
         containerClassName
       ),
       children: [
-        headline && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("label", { ...headlineProps, htmlFor: usedId, className: (0, import_clsx40.default)("typography-lable-md text-label", headlineProps.className), children: headline }),
-        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+        headline && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("label", { ...headlineProps, htmlFor: usedId, className: (0, import_clsx41.default)("typography-lable-md text-label", headlineProps.className), children: headline }),
+        /* @__PURE__ */ (0, import_jsx_runtime102.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
             )
@@ -21634,20 +21713,20 @@ var TextareaWithHeadline = ({
 };
 
 // src/components/user-interaction/data/FilterList.tsx
-var import_react109 = require("react");
+var import_react110 = require("react");
 var import_lucide_react28 = require("lucide-react");
-var import_jsx_runtime102 = require("react/jsx-runtime");
+var import_jsx_runtime103 = require("react/jsx-runtime");
 var FilterList = ({ value, onValueChange, availableItems }) => {
   const translation = useHightideTranslation();
   const filterValueToLabel = useFilterValueTranslation();
-  const activeIds = (0, import_react109.useMemo)(() => value.map((item) => item.id), [value]);
-  const inactiveItems = (0, import_react109.useMemo)(() => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)), [availableItems, activeIds]);
-  const itemRecord = (0, import_react109.useMemo)(() => availableItems.reduce((acc, item) => {
+  const activeIds = (0, import_react110.useMemo)(() => value.map((item) => item.id), [value]);
+  const inactiveItems = (0, import_react110.useMemo)(() => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)), [availableItems, activeIds]);
+  const itemRecord = (0, import_react110.useMemo)(() => availableItems.reduce((acc, item) => {
     acc[item.id] = item;
     return acc;
   }, {}), [availableItems]);
-  const [editState, setEditState] = (0, import_react109.useState)(void 0);
-  const valueWithEditState = (0, import_react109.useMemo)(() => {
+  const [editState, setEditState] = (0, import_react110.useState)(void 0);
+  const valueWithEditState = (0, import_react110.useMemo)(() => {
     let foundEditValue = false;
     for (const item of value) {
       if (item.id === editState?.id) {
@@ -21660,13 +21739,13 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
     }
     return value;
   }, [value, editState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(PopUpRoot, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(PopUpRoot, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
         translation("addFilter"),
-        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_lucide_react28.PlusIcon, { className: "size-4" })
+        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react28.PlusIcon, { className: "size-4" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PopUp, { className: "flex-col-2 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(PopUp, { className: "flex-col-2 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
         Combobox,
         {
           onItemClick: (id) => {
@@ -21683,7 +21762,7 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
             setEditState(newValue);
             setIsOpen(false);
           },
-          children: inactiveItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(ComboboxOption, { value: item.id, label: item.label, children: [
+          children: inactiveItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(ComboboxOption, { value: item.id, label: item.label, children: [
             DataTypeUtils.toIcon(item.dataType),
             item.label
           ] }, item.id))
@@ -21693,7 +21772,7 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
     valueWithEditState.map((columnFilter) => {
       const item = itemRecord[columnFilter.id];
       if (!item) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
         PopUpRoot,
         {
           isOpen: editState?.id === columnFilter.id,
@@ -21711,11 +21790,11 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
             }
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "sm", children: item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_jsx_runtime102.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "font-bold", children: item.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "sm", children: item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "font-bold", children: item.label }),
               filterValueToLabel(columnFilter.value, { tags: item.tags })
             ] }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PopUpContext.Consumer, { children: ({ isOpen, setIsOpen }) => item.popUpBuilder ? item.popUpBuilder({
+            /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(PopUpContext.Consumer, { children: ({ isOpen, setIsOpen }) => item.popUpBuilder ? item.popUpBuilder({
               value: editState?.id === columnFilter.id ? editState.value : columnFilter.value,
               onValueChange: (value2) => setEditState({ ...columnFilter, value: value2 }),
               onRemove: () => {
@@ -21728,7 +21807,7 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
               name: item.label,
               isOpen,
               onClose: () => setIsOpen(false)
-            }) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+            }) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
               FilterPopUp,
               {
                 name: item.label,
@@ -21755,18 +21834,18 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
 };
 
 // src/components/user-interaction/data/SortingList.tsx
-var import_react110 = require("react");
+var import_react111 = require("react");
 var import_lucide_react29 = require("lucide-react");
-var import_clsx41 = __toESM(require("clsx"));
-var import_jsx_runtime103 = require("react/jsx-runtime");
+var import_clsx42 = __toESM(require("clsx"));
+var import_jsx_runtime104 = require("react/jsx-runtime");
 var SortingList = ({ sorting, onSortingChange, availableItems }) => {
   const translation = useHightideTranslation();
-  const activeIds = (0, import_react110.useMemo)(() => sorting.map((item) => item.id), [sorting]);
-  const inactiveItems = (0, import_react110.useMemo)(
+  const activeIds = (0, import_react111.useMemo)(() => sorting.map((item) => item.id), [sorting]);
+  const inactiveItems = (0, import_react111.useMemo)(
     () => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)),
     [availableItems, activeIds]
   );
-  const itemRecord = (0, import_react110.useMemo)(
+  const itemRecord = (0, import_react111.useMemo)(
     () => availableItems.reduce(
       (acc, item) => {
         acc[item.id] = item;
@@ -21782,13 +21861,13 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
   const removeSort = (columnId) => {
     onSortingChange(sorting.filter((s) => s.id !== columnId));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(PopUpRoot, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(PopUpRoot, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
         translation("addSorting"),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react29.PlusIcon, { className: "size-4" })
+        /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react29.PlusIcon, { className: "size-4" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(PopUp, { className: "flex-col-2 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(PopUp, { className: "flex-col-2 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
         Combobox,
         {
           onItemClick: (id) => {
@@ -21797,7 +21876,7 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
             onSortingChange([...sorting, { id: item.id, desc: false }]);
             setIsOpen(false);
           },
-          children: inactiveItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(ComboboxOption, { value: item.id, label: item.label, children: [
+          children: inactiveItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(ComboboxOption, { value: item.id, label: item.label, children: [
             DataTypeUtils.toIcon(item.dataType),
             item.label
           ] }, item.id))
@@ -21807,21 +21886,21 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
     sorting.map((columnSort) => {
       const item = itemRecord[columnSort.id];
       if (!item) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(PopUpRoot, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(Button, { ...props, onClick: toggleOpen, color: "secondary", coloringStyle: "tonal-outline", size: "sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "font-bold", children: item.label }),
-          columnSort.desc ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react29.ArrowDownWideNarrow, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react29.ArrowUpNarrowWide, { className: "size-5" })
+      return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(PopUpRoot, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(Button, { ...props, onClick: toggleOpen, color: "secondary", coloringStyle: "tonal-outline", size: "sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { className: "font-bold", children: item.label }),
+          columnSort.desc ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react29.ArrowDownWideNarrow, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react29.ArrowUpNarrowWide, { className: "size-5" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
           PopUp,
           {
-            className: (0, import_clsx41.default)("flex-col-3 p-3 min-w-64"),
+            className: (0, import_clsx42.default)("flex-col-3 p-3 min-w-64"),
             onClose: () => setIsOpen(false),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex-row-4 justify-between w-full items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "typography-title-sm font-semibold", children: item.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex-row-0 shrink-0 items-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex-row-4 justify-between w-full items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { className: "typography-title-sm font-semibold", children: item.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex-row-0 shrink-0 items-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                     IconButton,
                     {
                       tooltip: translation("removeFilter"),
@@ -21832,10 +21911,10 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
                       color: "negative",
                       coloringStyle: "text",
                       size: "sm",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react29.TrashIcon, { className: "size-4" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react29.TrashIcon, { className: "size-4" })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                     IconButton,
                     {
                       tooltip: translation("close"),
@@ -21843,13 +21922,13 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
                       color: "neutral",
                       coloringStyle: "text",
                       size: "sm",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react29.XIcon, { className: "size-4" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react29.XIcon, { className: "size-4" })
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex-row-1 w-full gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex-row-1 w-full gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
                   Button,
                   {
                     type: "button",
@@ -21859,12 +21938,12 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
                     size: "md",
                     onClick: () => setSortDirection(columnSort.id, false),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react29.ArrowUpNarrowWide, { className: "size-4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react29.ArrowUpNarrowWide, { className: "size-4" }),
                       translation("sortAsc")
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
                   Button,
                   {
                     type: "button",
@@ -21874,7 +21953,7 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
                     size: "md",
                     onClick: () => setSortDirection(columnSort.id, true),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react29.ArrowDownWideNarrow, { className: "size-4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react29.ArrowDownWideNarrow, { className: "size-4" }),
                       translation("sortDesc")
                     ]
                   }
@@ -21889,7 +21968,7 @@ var SortingList = ({ sorting, onSortingChange, availableItems }) => {
 };
 
 // src/components/user-interaction/date/TimeDisplay.tsx
-var import_jsx_runtime104 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var TimeDisplay = ({
   date,
   mode = "daysFromToday",
@@ -21940,14 +22019,14 @@ var TimeDisplay = ({
   } else {
     fullString = `${zonedDate.getDate()}. ${monthToTranslation[zonedDate.getMonth()]} ${zonedDate.getFullYear()}`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { children: fullString });
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { children: fullString });
 };
 
 // src/components/user-interaction/input/FlexibleDateTimeInput.tsx
-var import_react111 = require("react");
+var import_react112 = require("react");
 var import_lucide_react30 = require("lucide-react");
-var import_jsx_runtime105 = require("react/jsx-runtime");
-var FlexibleDateTimeInput = (0, import_react111.forwardRef)(function FlexibleDateTimeInput2({
+var import_jsx_runtime106 = require("react/jsx-runtime");
+var FlexibleDateTimeInput = (0, import_react112.forwardRef)(function FlexibleDateTimeInput2({
   defaultMode = "date",
   value: controlledValue,
   initialValue,
@@ -21969,7 +22048,7 @@ var FlexibleDateTimeInput = (0, import_react111.forwardRef)(function FlexibleDat
   const zoned = (date) => DateUtils.toZonedDate(date, timeZone);
   const unzoned = (date) => DateUtils.fromZonedDate(date, timeZone);
   const hasFixedTime = (date) => DateUtils.sameTime(zoned(date), fixedTime, true, true);
-  const [mode, setMode] = (0, import_react111.useState)(() => {
+  const [mode, setMode] = (0, import_react112.useState)(() => {
     if (value && !hasFixedTime(value)) {
       return "dateTime";
     }
@@ -21977,7 +22056,7 @@ var FlexibleDateTimeInput = (0, import_react111.forwardRef)(function FlexibleDat
   });
   const toDate = (date) => unzoned(DateUtils.withTime(zoned(date), fixedTime));
   const toDateTime = (date) => hasFixedTime(date) ? unzoned(DateUtils.withTime(zoned(date), zoned(/* @__PURE__ */ new Date()))) : date;
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     DateTimeInput,
     {
       ...props,
@@ -21990,7 +22069,7 @@ var FlexibleDateTimeInput = (0, import_react111.forwardRef)(function FlexibleDat
       },
       actions: [
         ...actions,
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
           IconButton,
           {
             size: "sm",
@@ -22004,7 +22083,7 @@ var FlexibleDateTimeInput = (0, import_react111.forwardRef)(function FlexibleDat
               }
               setMode(nextMode);
             },
-            children: mode === "date" ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_lucide_react30.ClockPlus, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_lucide_react30.ClockFading, { className: "size-5" })
+            children: mode === "date" ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react30.ClockPlus, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react30.ClockFading, { className: "size-5" })
           },
           "flexible-date-time-mode"
         )
@@ -22014,11 +22093,11 @@ var FlexibleDateTimeInput = (0, import_react111.forwardRef)(function FlexibleDat
 });
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
-var import_react112 = require("react");
 var import_react113 = require("react");
-var import_clsx42 = __toESM(require("clsx"));
-var import_jsx_runtime106 = require("react/jsx-runtime");
-var InsideLabelInput = (0, import_react113.forwardRef)(function InsideLabelInput2({
+var import_react114 = require("react");
+var import_clsx43 = __toESM(require("clsx"));
+var import_jsx_runtime107 = require("react/jsx-runtime");
+var InsideLabelInput = (0, import_react114.forwardRef)(function InsideLabelInput2({
   id: customId,
   value: controlledValue,
   initialValue,
@@ -22031,11 +22110,11 @@ var InsideLabelInput = (0, import_react113.forwardRef)(function InsideLabelInput
     onValueChange,
     defaultValue: initialValue
   });
-  const [isFocused, setIsFocused] = (0, import_react113.useState)(false);
-  const generatedId = (0, import_react112.useId)();
+  const [isFocused, setIsFocused] = (0, import_react114.useState)(false);
+  const generatedId = (0, import_react113.useId)();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: (0, import_clsx42.default)("relative"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: (0, import_clsx43.default)("relative"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       Input,
       {
         ...props,
@@ -22052,16 +22131,16 @@ var InsideLabelInput = (0, import_react113.forwardRef)(function InsideLabelInput
           setIsFocused(false);
         },
         "aria-labelledby": id + "-label",
-        className: (0, import_clsx42.default)("h-14 px-4 pb-2 py-6.5", props.className)
+        className: (0, import_clsx43.default)("h-14 px-4 pb-2 py-6.5", props.className)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: (0, import_clsx42.default)(
+        className: (0, import_clsx43.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",
@@ -22075,8 +22154,8 @@ var InsideLabelInput = (0, import_react113.forwardRef)(function InsideLabelInput
 
 // src/components/user-interaction/input/SearchBar.tsx
 var import_lucide_react31 = require("lucide-react");
-var import_clsx43 = require("clsx");
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_clsx44 = require("clsx");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 var SearchBar = ({
   value: controlledValue,
   initialValue,
@@ -22092,8 +22171,8 @@ var SearchBar = ({
     onValueChange,
     defaultValue: initialValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { ...containerProps, className: (0, import_clsx43.clsx)("relative", containerProps?.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { ...containerProps, className: (0, import_clsx44.clsx)("relative", containerProps?.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
       Input,
       {
         ...inputProps,
@@ -22101,10 +22180,10 @@ var SearchBar = ({
         onValueChange: setValue,
         onEditComplete: onSearch,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: (0, import_clsx43.clsx)("pr-10 w-full", inputProps.className)
+        className: (0, import_clsx44.clsx)("pr-10 w-full", inputProps.className)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
       IconButton,
       {
         ...searchButtonProps,
@@ -22113,19 +22192,19 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: () => onSearch(value),
-        className: (0, import_clsx43.clsx)("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react31.Search, { className: "w-full h-full" })
+        className: (0, import_clsx44.clsx)("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react31.Search, { className: "w-full h-full" })
       }
     )
   ] });
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-var import_react114 = require("react");
+var import_react115 = require("react");
 var import_lucide_react32 = require("lucide-react");
-var import_clsx44 = __toESM(require("clsx"));
-var import_jsx_runtime108 = require("react/jsx-runtime");
-var ToggleableInput = (0, import_react114.forwardRef)(function ToggleableInput2({
+var import_clsx45 = __toESM(require("clsx"));
+var import_jsx_runtime109 = require("react/jsx-runtime");
+var ToggleableInput = (0, import_react115.forwardRef)(function ToggleableInput2({
   value: controlledValue,
   initialValue,
   onValueChange,
@@ -22138,16 +22217,16 @@ var ToggleableInput = (0, import_react114.forwardRef)(function ToggleableInput2(
     onValueChange,
     defaultValue: initialValue
   });
-  const [isEditing, setIsEditing] = (0, import_react114.useState)(initialState !== "display");
-  const innerRef = (0, import_react114.useRef)(null);
-  (0, import_react114.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react114.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react115.useState)(initialState !== "display");
+  const innerRef = (0, import_react115.useRef)(null);
+  (0, import_react115.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react115.useEffect)(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: (0, import_clsx44.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: (0, import_clsx45.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
       Input,
       {
         ...props,
@@ -22171,9 +22250,9 @@ var ToggleableInput = (0, import_react114.forwardRef)(function ToggleableInput2(
         "data-name": props["data-name"] ?? "togglable-input"
       }
     ),
-    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime108.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_runtime108.jsx)("span", { className: (0, import_clsx44.default)(" truncate"), children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react32.Pencil, { className: (0, import_clsx44.default)(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime109.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_runtime109.jsx)("span", { className: (0, import_clsx45.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react32.Pencil, { className: (0, import_clsx45.default)(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -22182,9 +22261,9 @@ var ToggleableInput = (0, import_react114.forwardRef)(function ToggleableInput2(
 var import_lucide_react34 = require("lucide-react");
 
 // src/components/user-interaction/properties/PropertyBase.tsx
-var import_clsx45 = __toESM(require("clsx"));
+var import_clsx46 = __toESM(require("clsx"));
 var import_lucide_react33 = require("lucide-react");
-var import_jsx_runtime109 = require("react/jsx-runtime");
+var import_jsx_runtime110 = require("react/jsx-runtime");
 var PropertyBase = ({
   name,
   children,
@@ -22203,8 +22282,8 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  const renderActionButtons = () => /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_jsx_runtime109.Fragment, { children: [
-    isClearEnabled && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+  const renderActionButtons = () => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
+    isClearEnabled && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
       IconButton,
       {
         tooltip: translation("clearValue"),
@@ -22213,10 +22292,10 @@ var PropertyBase = ({
         color: "negative",
         coloringStyle: "text",
         size: "sm",
-        children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react33.X, { className: "size-force-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_lucide_react33.X, { className: "size-force-5" })
       }
     ),
-    isRemoveEnabled && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    isRemoveEnabled && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
       IconButton,
       {
         tooltip: translation("removeProperty"),
@@ -22224,42 +22303,42 @@ var PropertyBase = ({
         color: "negative",
         coloringStyle: "text",
         size: "sm",
-        children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react33.Trash, { className: "size-force-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_lucide_react33.Trash, { className: "size-force-5" })
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
     "div",
     {
-      className: (0, import_clsx45.default)("group/property min-w-0 w-full", className),
+      className: (0, import_clsx46.default)("group/property min-w-0 w-full", className),
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-      children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { "data-name": "property-inner", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { "data-name": "property-inner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
           "div",
           {
             "data-name": "property-title",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex min-w-0 flex-1 flex-row items-center justify-between gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex-row-1 items-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { "data-name": "property-title-icon", children: icon }),
-                  /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { "data-name": "property-title-text", children: name })
+              /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "flex min-w-0 flex-1 flex-row items-center justify-between gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { "data-name": "property-title-icon", children: icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { "data-name": "property-title-text", children: name })
                 ] }) }),
-                invalid && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react33.AlertTriangle, { className: "size-force-6 shrink-0" })
+                invalid && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_lucide_react33.AlertTriangle, { className: "size-force-6 shrink-0" })
               ] }),
-              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { "data-name": "property-title-actions", children: renderActionButtons() })
+              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { "data-name": "property-title-actions", children: renderActionButtons() })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
           "div",
           {
             "data-name": "property-content",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
               children({ required, hasValue, invalid }),
-              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { "data-name": "property-actions", children: renderActionButtons() })
+              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { "data-name": "property-actions", children: renderActionButtons() })
             ]
           }
         )
@@ -22269,7 +22348,7 @@ var PropertyBase = ({
 };
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-var import_jsx_runtime110 = require("react/jsx-runtime");
+var import_jsx_runtime111 = require("react/jsx-runtime");
 var CheckboxProperty = ({
   value,
   onValueChange,
@@ -22278,15 +22357,15 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue: value !== void 0,
       readOnly,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_lucide_react34.Check, { size: 24 }),
-      children: () => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_lucide_react34.Check, { size: 24 }),
+      children: () => /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
           Button,
           {
             color: value ? "positive" : "neutral",
@@ -22299,7 +22378,7 @@ var CheckboxProperty = ({
             children: translation("yes")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
           Button,
           {
             color: !value && value !== void 0 ? "negative" : "neutral",
@@ -22319,7 +22398,7 @@ var CheckboxProperty = ({
 
 // src/components/user-interaction/properties/DateProperty.tsx
 var import_lucide_react35 = require("lucide-react");
-var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_jsx_runtime112 = require("react/jsx-runtime");
 var DateProperty = ({
   name,
   value,
@@ -22336,7 +22415,7 @@ var DateProperty = ({
   ...inputProps
 }) => {
   const hasValue = !!value;
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
     PropertyBase,
     {
       name,
@@ -22350,9 +22429,9 @@ var DateProperty = ({
         onEditComplete?.(null);
       }),
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_lucide_react35.CalendarDays, { size: 24 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_lucide_react35.CalendarDays, { size: 24 }),
       className,
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
         DateTimeInput,
         {
           ...inputProps,
@@ -22373,7 +22452,7 @@ var DateProperty = ({
 
 // src/components/user-interaction/properties/MultiSelectProperty.tsx
 var import_lucide_react36 = require("lucide-react");
-var import_jsx_runtime112 = require("react/jsx-runtime");
+var import_jsx_runtime113 = require("react/jsx-runtime");
 var MultiSelectProperty = ({
   children,
   value,
@@ -22382,18 +22461,18 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = value.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_lucide_react36.List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_lucide_react36.List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
             MultiSelectChipDisplay,
             {
               value,
@@ -22420,7 +22499,7 @@ var MultiSelectProperty = ({
 
 // src/components/user-interaction/properties/NumberProperty.tsx
 var import_lucide_react37 = require("lucide-react");
-var import_jsx_runtime113 = require("react/jsx-runtime");
+var import_jsx_runtime114 = require("react/jsx-runtime");
 var NumberProperty = ({
   value,
   onValueChange,
@@ -22432,20 +22511,20 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onValueClear,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_lucide_react37.Binary, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_lucide_react37.Binary, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
               Input,
               {
                 "data-name": "property-input",
@@ -22473,7 +22552,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
               "span",
               {
                 "data-name": "property-suffix",
@@ -22490,7 +22569,7 @@ var NumberProperty = ({
 
 // src/components/user-interaction/properties/SelectProperty.tsx
 var import_lucide_react38 = require("lucide-react");
-var import_jsx_runtime114 = require("react/jsx-runtime");
+var import_jsx_runtime115 = require("react/jsx-runtime");
 var SingleSelectProperty = ({
   children,
   value,
@@ -22499,18 +22578,18 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_lucide_react38.List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_lucide_react38.List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
             SelectRoot,
             {
               value,
@@ -22520,7 +22599,7 @@ var SingleSelectProperty = ({
               },
               disabled: props.readOnly,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
                   SelectButton,
                   {
                     className: "flex-row-2 w-full items-center justify-between",
@@ -22528,7 +22607,7 @@ var SingleSelectProperty = ({
                     "data-name": "property-input"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(SelectContent, { children })
+                /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(SelectContent, { children })
               ]
             }
           )
@@ -22540,7 +22619,7 @@ var SingleSelectProperty = ({
 
 // src/components/user-interaction/properties/TextProperty.tsx
 var import_lucide_react39 = require("lucide-react");
-var import_jsx_runtime115 = require("react/jsx-runtime");
+var import_jsx_runtime116 = require("react/jsx-runtime");
 var TextProperty = ({
   value,
   readOnly,
@@ -22550,13 +22629,13 @@ var TextProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_lucide_react39.Text, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_lucide_react39.Text, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
         Textarea,
         {
           "data-name": "property-input",
@@ -22576,29 +22655,29 @@ var TextProperty = ({
 
 // src/components/utils/Polymorphic.tsx
 var import_react_slot = require("@radix-ui/react-slot");
-var import_react115 = require("react");
-var import_jsx_runtime116 = require("react/jsx-runtime");
-var PolymorphicSlot = (0, import_react115.forwardRef)(function PolymorphicSlot2({
+var import_react116 = require("react");
+var import_jsx_runtime117 = require("react/jsx-runtime");
+var PolymorphicSlot = (0, import_react116.forwardRef)(function PolymorphicSlot2({
   children,
   asChild,
   defaultComponent = "div",
   ...props
 }, ref) {
   const Component = asChild ? import_react_slot.Slot : defaultComponent;
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Component, { ...props, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Component, { ...props, ref, children });
 });
 
 // src/components/utils/Transition.tsx
-var import_react116 = require("react");
+var import_react117 = require("react");
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = (0, import_react116.useState)(show);
-  const [isTransitioning, setIsTransitioning] = (0, import_react116.useState)(!isOpen);
+  const [isOpen, setIsOpen] = (0, import_react117.useState)(show);
+  const [isTransitioning, setIsTransitioning] = (0, import_react117.useState)(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  (0, import_react116.useEffect)(() => {
+  (0, import_react117.useEffect)(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -22623,18 +22702,18 @@ function Transition({
 }
 
 // src/global-contexts/HightideProvider.tsx
-var import_jsx_runtime117 = require("react/jsx-runtime");
+var import_jsx_runtime118 = require("react/jsx-runtime");
 var HightideProvider = ({
   children,
   theme,
   locale,
   config
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(LocaleProvider, { ...locale, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ThemeProvider, { ...theme, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(HightideConfigProvider, { ...config, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(LocaleProvider, { ...locale, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ThemeProvider, { ...theme, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(HightideConfigProvider, { ...config, children }) }) });
 };
 
 // src/hooks/focus/useFocusGuards.ts
-var import_react117 = require("react");
+var import_react118 = require("react");
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -22672,7 +22751,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  (0, import_react117.useEffect)(() => {
+  (0, import_react118.useEffect)(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -22681,10 +22760,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-var import_react118 = __toESM(require("react"));
+var import_react119 = __toESM(require("react"));
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react118.default.useState(false);
-  (0, import_react118.useEffect)(() => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react119.default.useState(false);
+  (0, import_react119.useEffect)(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -22704,11 +22783,11 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/focus/useIsMounted.ts
-var import_react119 = require("react");
+var import_react120 = require("react");
 var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicEffect = isClient ? import_react119.useLayoutEffect : import_react119.useEffect;
+var useIsomorphicEffect = isClient ? import_react120.useLayoutEffect : import_react120.useEffect;
 var useIsMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react119.useState)(false);
+  const [isMounted, setIsMounted] = (0, import_react120.useState)(false);
   useIsomorphicEffect(() => {
     setIsMounted(true);
     return () => {
@@ -22719,10 +22798,10 @@ var useIsMounted = () => {
 };
 
 // src/hooks/useHandleRefs.ts
-var import_react120 = require("react");
+var import_react121 = require("react");
 function useHandleRefs(handleRef) {
-  const refs = (0, import_react120.useRef)([]);
-  (0, import_react120.useEffect)(() => {
+  const refs = (0, import_react121.useRef)([]);
+  (0, import_react121.useEffect)(() => {
     refs.current = Object.keys(handleRef?.current ?? {}).map(
       () => ({ current: null })
     );
@@ -22735,10 +22814,10 @@ function useHandleRefs(handleRef) {
 }
 
 // src/hooks/useLogUnstableDependencies.ts
-var import_react121 = __toESM(require("react"));
+var import_react122 = __toESM(require("react"));
 function useLogUnstableDependencies(name, value) {
-  const prev = import_react121.default.useRef(null);
-  import_react121.default.useEffect(() => {
+  const prev = import_react122.default.useRef(null);
+  import_react122.default.useEffect(() => {
     if (!prev.current) {
       prev.current = value;
       return;
@@ -22760,10 +22839,10 @@ function useLogUnstableDependencies(name, value) {
 }
 
 // src/hooks/useOverwritableState.ts
-var import_react122 = require("react");
+var import_react123 = require("react");
 var useOverwritableState = (overwriteValue, onChange) => {
-  const [state, setState] = (0, import_react122.useState)(overwriteValue);
-  (0, import_react122.useEffect)(() => {
+  const [state, setState] = (0, import_react123.useState)(overwriteValue);
+  (0, import_react123.useEffect)(() => {
     setState(overwriteValue);
   }, [overwriteValue]);
   const onChangeWrapper = (action) => {
@@ -22775,31 +22854,31 @@ var useOverwritableState = (overwriteValue, onChange) => {
 };
 
 // src/hooks/useRerender.ts
-var import_react123 = require("react");
+var import_react124 = require("react");
 var useRerender = () => {
-  return (0, import_react123.useReducer)(() => ({}), {})[1];
+  return (0, import_react124.useReducer)(() => ({}), {})[1];
 };
 
 // src/hooks/useUpdatingDateString.ts
-var import_react124 = require("react");
+var import_react125 = require("react");
 var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, is24HourFormat: is24HourFormatOverride, timeZone: timeZoneOverride, date }) => {
   const { locale: contextLocale, is24HourFormat: contextIs24HourFormat, timeZone: contextTimeZone } = useLocale();
   const locale = localeOverride ?? contextLocale;
   const is24HourFormat = is24HourFormatOverride ?? contextIs24HourFormat ?? true;
   const timeZone = timeZoneOverride ?? contextTimeZone;
-  const [dateAndTimeStrings, setDateAndTimeStrings] = (0, import_react124.useState)({
+  const [dateAndTimeStrings, setDateAndTimeStrings] = (0, import_react125.useState)({
     compareDate: date,
     absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
     relative: DateUtils.formatRelative(date, locale)
   });
-  (0, import_react124.useEffect)(() => {
+  (0, import_react125.useEffect)(() => {
     setDateAndTimeStrings({
       compareDate: date,
       absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
       relative: DateUtils.formatRelative(date, locale)
     });
   }, [date, absoluteFormat, locale, is24HourFormat, timeZone]);
-  (0, import_react124.useEffect)(() => {
+  (0, import_react125.useEffect)(() => {
     let timeoutId;
     const startTimer = () => {
       const now = /* @__PURE__ */ new Date();
@@ -22835,7 +22914,7 @@ var validateEmail = (email) => {
 };
 
 // src/hooks/useValidators.ts
-var import_react125 = require("react");
+var import_react126 = require("react");
 var notEmpty = (value) => {
   if (!value) {
     return "notEmpty";
@@ -22885,7 +22964,7 @@ var UseValidators = {
 };
 var useTranslatedValidators = () => {
   const translation = useHightideTranslation();
-  return (0, import_react125.useMemo)(() => ({
+  return (0, import_react126.useMemo)(() => ({
     notEmpty: (value) => {
       const result = notEmpty(value);
       if (result) {
@@ -23347,6 +23426,7 @@ var PromiseUtils = {
   Transition,
   UseValidators,
   VerticalDivider,
+  VirtualizedTableBody,
   Visibility,
   YearMonthPicker,
   buildSegmentLayout,