@helpwave/hightide 0.9.2 → 0.9.3

package/dist/index.js

@@ -6925,6 +6925,7 @@ __export(index_exports, {
   SimpleSearch: () => SimpleSearch,
   SimpleSearchWithMapping: () => SimpleSearchWithMapping,
   SingleSelectProperty: () => SingleSelectProperty,
+  SortingList: () => SortingList,
   StepperBar: () => StepperBar,
   StorageListener: () => StorageListener,
   Switch: () => Switch,
@@ -8604,6 +8605,7 @@ var hightideTranslation = {
   "de-DE": {
     "add": `Hinzuf\xFCgen`,
     "addFilter": `Filter hinzuf\xFCgen`,
+    "addSorting": `Sortierung hinzuf\xFCgen`,
     "addTime": `Uhrzeit hinzuf\xFCgen`,
     "after": `Nach`,
     "age": `Alter`,
@@ -8815,6 +8817,8 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} von ${length} slides`;
     },
+    "sortAsc": `ASC`,
+    "sortDesc": `DESC`,
     "sorting": `Sortierung`,
     "sSortingState": ({ sortDirection }) => {
       return import_internationalization.TranslationGen.resolveSelect(sortDirection, {
@@ -8971,6 +8975,7 @@ var hightideTranslation = {
   "en-US": {
     "add": `Add`,
     "addFilter": `Add filter`,
+    "addSorting": `Add sorting`,
     "addTime": `Add Time`,
     "after": `After`,
     "age": `Age`,
@@ -9182,6 +9187,8 @@ var hightideTranslation = {
     "slideOf": ({ index, length }) => {
       return `Slide ${index} of ${length} slides`;
     },
+    "sortAsc": `ASC`,
+    "sortDesc": `DESC`,
     "sorting": `Sorting`,
     "sSortingState": ({ sortDirection }) => {
       return import_internationalization.TranslationGen.resolveSelect(sortDirection, {
@@ -18101,7 +18108,7 @@ var TableHeader = ({ isSticky = false }) => {
           "data-name": "table-header-cell",
           className: (0, import_clsx28.default)("group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex-row-1 items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex-row-1 items-center truncate", children: [
               /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                 TableSortButton,
                 {
@@ -18405,6 +18412,8 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
     popup: props.id ?? `table-column-picker-popup-${generatedId}`,
     label: `table-column-picker-label-${generatedId}`
   }), [generatedId, props.id]);
+  const enableHiding = table.options.enableHiding !== false;
+  const enableColumnPinning = table.options.enableColumnPinning !== false;
   const tableState = table.getState();
   const columnOrder = tableState.columnOrder;
   const columnPinning = tableState.columnPinning;
@@ -18609,7 +18618,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
             ] }) }),
             /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "flex-1 typography-label-lg", children: getColumnHeader(columnId) }),
             /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Visibility, { isVisible: enableHiding, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 IconButton,
                 {
                   tooltip: translation("changeVisibility"),
@@ -18621,8 +18630,8 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   "aria-label": isVisible ? translation("hideColumn") : translation("showColumn"),
                   children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.Eye, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.EyeOff, { className: "size-4" })
                 }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Visibility, { isVisible: enableColumnPinning, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 IconButton,
                 {
                   tooltip: translation("changePinning"),
@@ -18640,7 +18649,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   "aria-label": isPinned ? translation("unpin") : translation("pinLeft"),
                   children: !isPinned ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.PinOff, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.Pin, { className: "size-4" })
                 }
-              )
+              ) })
             ] })
           ] }, columnId);
         }) })
@@ -18658,7 +18667,7 @@ var TableColumnSwitcher = ({ buttonProps, ...props }) => {
         color: "neutral",
         tooltip: translation("changeColumnDisplay"),
         ...buttonProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.ArrowLeftRightIcon, { className: "size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react23.Columns3Cog, { className: "size-5" })
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TableColumnSwitcherPopUp, { ...props })
@@ -19667,9 +19676,9 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
     }
     return value;
   }, [value, editState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex-row-1 flex-wrap gap-y-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(PopUpRoot, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
         translation("addFilter"),
         /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_lucide_react26.PlusIcon, { className: "size-4" })
       ] }) }),
@@ -19718,10 +19727,10 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
             }
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpOpener, { children: ({ toggleOpen, props, isOpen }) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "md", children: [
-              item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : item.label + ": " + filterValueToLabel(columnFilter.value, { tags: item.tags }),
-              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(ExpansionIcon, { isExpanded: isOpen })
-            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "sm", children: item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(import_jsx_runtime97.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "font-bold", children: item.label }),
+              filterValueToLabel(columnFilter.value, { tags: item.tags })
+            ] }) }) }),
             /* @__PURE__ */ (0, import_jsx_runtime97.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 }),
@@ -19759,8 +19768,142 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
   ] });
 };
 
-// src/components/user-interaction/date/TimeDisplay.tsx
+// src/components/user-interaction/data/SortingList.tsx
+var import_react107 = require("react");
+var import_lucide_react27 = require("lucide-react");
+var import_clsx37 = __toESM(require("clsx"));
 var import_jsx_runtime98 = require("react/jsx-runtime");
+var SortingList = ({ sorting, onSortingChange, availableItems }) => {
+  const translation = useHightideTranslation();
+  const activeIds = (0, import_react107.useMemo)(() => sorting.map((item) => item.id), [sorting]);
+  const inactiveItems = (0, import_react107.useMemo)(
+    () => availableItems.filter((item) => !activeIds.includes(item.id)).sort((a, b) => a.label.localeCompare(b.label)),
+    [availableItems, activeIds]
+  );
+  const itemRecord = (0, import_react107.useMemo)(
+    () => availableItems.reduce(
+      (acc, item) => {
+        acc[item.id] = item;
+        return acc;
+      },
+      {}
+    ),
+    [availableItems]
+  );
+  const setSortDirection = (columnId, desc) => {
+    onSortingChange(sorting.map((s) => s.id === columnId ? { ...s, desc } : s));
+  };
+  const removeSort = (columnId) => {
+    onSortingChange(sorting.filter((s) => s.id !== columnId));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex-row-2 flex-wrap gap-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(PopUpRoot, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(Button, { ...props, onClick: toggleOpen, color: "neutral", size: "sm", className: "min-w-36", children: [
+        translation("addSorting"),
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.PlusIcon, { className: "size-4" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUp, { className: "flex-col-2 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+        Combobox,
+        {
+          onItemClick: (id) => {
+            const item = itemRecord[id];
+            if (!item) return;
+            onSortingChange([...sorting, { id: item.id, desc: false }]);
+            setIsOpen(false);
+          },
+          children: inactiveItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(ComboboxOption, { value: item.id, label: item.label, children: [
+            DataTypeUtils.toIcon(item.dataType),
+            item.label
+          ] }, item.id))
+        }
+      ) }) })
+    ] }),
+    sorting.map((columnSort) => {
+      const item = itemRecord[columnSort.id];
+      if (!item) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(PopUpRoot, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(Button, { ...props, onClick: toggleOpen, color: "secondary", coloringStyle: "tonal-outline", size: "sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "font-bold", children: item.label }),
+          columnSort.desc ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.ArrowDownWideNarrow, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.ArrowUpNarrowWide, { className: "size-5" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(PopUpContext.Consumer, { children: ({ setIsOpen }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+          PopUp,
+          {
+            className: (0, import_clsx37.default)("flex-col-3 p-3 min-w-64"),
+            onClose: () => setIsOpen(false),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex-row-4 justify-between w-full items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "typography-title-sm font-semibold", children: item.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex-row-0 shrink-0 items-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                    IconButton,
+                    {
+                      tooltip: translation("removeFilter"),
+                      onClick: () => {
+                        removeSort(columnSort.id);
+                        setIsOpen(false);
+                      },
+                      color: "negative",
+                      coloringStyle: "text",
+                      size: "sm",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.TrashIcon, { className: "size-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                    IconButton,
+                    {
+                      tooltip: translation("close"),
+                      onClick: () => setIsOpen(false),
+                      color: "neutral",
+                      coloringStyle: "text",
+                      size: "sm",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.XIcon, { className: "size-4" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex-row-1 w-full gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+                  Button,
+                  {
+                    type: "button",
+                    className: "flex-1 flex-row-1 items-center justify-center gap-2",
+                    color: columnSort.desc ? "neutral" : "primary",
+                    coloringStyle: "solid",
+                    size: "md",
+                    onClick: () => setSortDirection(columnSort.id, false),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.ArrowUpNarrowWide, { className: "size-4" }),
+                      translation("sortAsc")
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+                  Button,
+                  {
+                    type: "button",
+                    className: "flex-1 flex-row-1 items-center justify-center gap-2",
+                    color: columnSort.desc ? "primary" : "neutral",
+                    coloringStyle: "solid",
+                    size: "md",
+                    onClick: () => setSortDirection(columnSort.id, true),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_lucide_react27.ArrowDownWideNarrow, { className: "size-4" }),
+                      translation("sortDesc")
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ) })
+      ] }, columnSort.id);
+    })
+  ] });
+};
+
+// src/components/user-interaction/date/TimeDisplay.tsx
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var TimeDisplay = ({
   date,
   mode = "daysFromToday"
@@ -19797,14 +19940,14 @@ var TimeDisplay = ({
   } else {
     fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { children: fullString });
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { children: fullString });
 };
 
 // src/components/user-interaction/input/FlexibleDateTimeInput.tsx
-var import_react107 = require("react");
-var import_lucide_react27 = require("lucide-react");
-var import_jsx_runtime99 = require("react/jsx-runtime");
-var FlexibleDateTimeInput = (0, import_react107.forwardRef)(function FlexibleDateTimeInput2({
+var import_react108 = require("react");
+var import_lucide_react28 = require("lucide-react");
+var import_jsx_runtime100 = require("react/jsx-runtime");
+var FlexibleDateTimeInput = (0, import_react108.forwardRef)(function FlexibleDateTimeInput2({
   defaultMode = "date",
   value: controlledValue,
   initialValue,
@@ -19819,16 +19962,16 @@ var FlexibleDateTimeInput = (0, import_react107.forwardRef)(function FlexibleDat
     onValueChange,
     defaultValue: initialValue
   });
-  const fixedTime = (0, import_react107.useMemo)(() => fixedTimeOverride ?? new Date(23, 59, 59, 999), [fixedTimeOverride]);
-  const [preferredMode, setPreferredMode] = (0, import_react107.useState)(defaultMode);
-  const mode = (0, import_react107.useMemo)(() => {
+  const fixedTime = (0, import_react108.useMemo)(() => fixedTimeOverride ?? new Date(23, 59, 59, 999), [fixedTimeOverride]);
+  const [preferredMode, setPreferredMode] = (0, import_react108.useState)(defaultMode);
+  const mode = (0, import_react108.useMemo)(() => {
     if (!value) return preferredMode;
     if (DateUtils.sameTime(value, fixedTime, true, true)) {
       return "date";
     }
     return "dateTime";
   }, [preferredMode, value, fixedTime]);
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     DateTimeInput,
     {
       ...props,
@@ -19838,7 +19981,7 @@ var FlexibleDateTimeInput = (0, import_react107.forwardRef)(function FlexibleDat
       onValueChange: setValue,
       actions: [
         ...actions,
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
           IconButton,
           {
             size: "sm",
@@ -19856,7 +19999,7 @@ var FlexibleDateTimeInput = (0, import_react107.forwardRef)(function FlexibleDat
                 }
               }
             },
-            children: preferredMode === "date" ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_lucide_react27.ClockPlus, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_lucide_react27.ClockFading, { className: "size-5" })
+            children: preferredMode === "date" ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_lucide_react28.ClockPlus, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_lucide_react28.ClockFading, { className: "size-5" })
           },
           "date-mode"
         )
@@ -19866,11 +20009,11 @@ var FlexibleDateTimeInput = (0, import_react107.forwardRef)(function FlexibleDat
 });
 
 // src/components/user-interaction/input/InsideLabelInput.tsx
-var import_react108 = require("react");
 var import_react109 = require("react");
-var import_clsx37 = __toESM(require("clsx"));
-var import_jsx_runtime100 = require("react/jsx-runtime");
-var InsideLabelInput = (0, import_react109.forwardRef)(function InsideLabelInput2({
+var import_react110 = require("react");
+var import_clsx38 = __toESM(require("clsx"));
+var import_jsx_runtime101 = require("react/jsx-runtime");
+var InsideLabelInput = (0, import_react110.forwardRef)(function InsideLabelInput2({
   id: customId,
   value: controlledValue,
   initialValue,
@@ -19883,11 +20026,11 @@ var InsideLabelInput = (0, import_react109.forwardRef)(function InsideLabelInput
     onValueChange,
     defaultValue: initialValue
   });
-  const [isFocused, setIsFocused] = (0, import_react109.useState)(false);
-  const generatedId = (0, import_react108.useId)();
+  const [isFocused, setIsFocused] = (0, import_react110.useState)(false);
+  const generatedId = (0, import_react109.useId)();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: (0, import_clsx37.default)("relative"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: (0, import_clsx38.default)("relative"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       Input,
       {
         ...props,
@@ -19904,16 +20047,16 @@ var InsideLabelInput = (0, import_react109.forwardRef)(function InsideLabelInput
           setIsFocused(false);
         },
         "aria-labelledby": id + "-label",
-        className: (0, import_clsx37.default)("h-14 px-4 pb-2 py-6.5", props.className)
+        className: (0, import_clsx38.default)("h-14 px-4 pb-2 py-6.5", props.className)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: (0, import_clsx37.default)(
+        className: (0, import_clsx38.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",
@@ -19926,9 +20069,9 @@ var InsideLabelInput = (0, import_react109.forwardRef)(function InsideLabelInput
 });
 
 // src/components/user-interaction/input/SearchBar.tsx
-var import_lucide_react28 = require("lucide-react");
-var import_clsx38 = require("clsx");
-var import_jsx_runtime101 = require("react/jsx-runtime");
+var import_lucide_react29 = require("lucide-react");
+var import_clsx39 = require("clsx");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 var SearchBar = ({
   value: controlledValue,
   initialValue,
@@ -19944,8 +20087,8 @@ var SearchBar = ({
     onValueChange,
     defaultValue: initialValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { ...containerProps, className: (0, import_clsx38.clsx)("relative", containerProps?.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { ...containerProps, className: (0, import_clsx39.clsx)("relative", containerProps?.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
       Input,
       {
         ...inputProps,
@@ -19953,10 +20096,10 @@ var SearchBar = ({
         onValueChange: setValue,
         onEditComplete: onSearch,
         placeholder: inputProps.placeholder ?? translation("search"),
-        className: (0, import_clsx38.clsx)("pr-10 w-full", inputProps.className)
+        className: (0, import_clsx39.clsx)("pr-10 w-full", inputProps.className)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
       IconButton,
       {
         ...searchButtonProps,
@@ -19965,19 +20108,19 @@ var SearchBar = ({
         color: "neutral",
         coloringStyle: "text",
         onClick: () => onSearch(value),
-        className: (0, import_clsx38.clsx)("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(import_lucide_react28.Search, { className: "w-full h-full" })
+        className: (0, import_clsx39.clsx)("absolute right-1.5 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_lucide_react29.Search, { className: "w-full h-full" })
       }
     )
   ] });
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-var import_react110 = require("react");
-var import_lucide_react29 = require("lucide-react");
-var import_clsx39 = __toESM(require("clsx"));
-var import_jsx_runtime102 = require("react/jsx-runtime");
-var ToggleableInput = (0, import_react110.forwardRef)(function ToggleableInput2({
+var import_react111 = require("react");
+var import_lucide_react30 = require("lucide-react");
+var import_clsx40 = __toESM(require("clsx"));
+var import_jsx_runtime103 = require("react/jsx-runtime");
+var ToggleableInput = (0, import_react111.forwardRef)(function ToggleableInput2({
   value: controlledValue,
   initialValue,
   onValueChange,
@@ -19990,16 +20133,16 @@ var ToggleableInput = (0, import_react110.forwardRef)(function ToggleableInput2(
     onValueChange,
     defaultValue: initialValue
   });
-  const [isEditing, setIsEditing] = (0, import_react110.useState)(initialState !== "display");
-  const innerRef = (0, import_react110.useRef)(null);
-  (0, import_react110.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react110.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react111.useState)(initialState !== "display");
+  const innerRef = (0, import_react111.useRef)(null);
+  (0, import_react111.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react111.useEffect)(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: (0, import_clsx39.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: (0, import_clsx40.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       Input,
       {
         ...props,
@@ -20023,20 +20166,20 @@ var ToggleableInput = (0, import_react110.forwardRef)(function ToggleableInput2(
         "data-name": props["data-name"] ?? "togglable-input"
       }
     ),
-    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime102.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_runtime102.jsx)("span", { className: (0, import_clsx39.default)(" truncate"), children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_lucide_react29.Pencil, { className: (0, import_clsx39.default)(`size-force-4`, { "text-transparent": isEditing }) })
+    !isEditing && /* @__PURE__ */ (0, import_jsx_runtime103.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_runtime103.jsx)("span", { className: (0, import_clsx40.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react30.Pencil, { className: (0, import_clsx40.default)(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-var import_lucide_react31 = require("lucide-react");
+var import_lucide_react32 = require("lucide-react");
 
 // src/components/user-interaction/properties/PropertyBase.tsx
-var import_clsx40 = __toESM(require("clsx"));
-var import_lucide_react30 = require("lucide-react");
-var import_jsx_runtime103 = require("react/jsx-runtime");
+var import_clsx41 = __toESM(require("clsx"));
+var import_lucide_react31 = require("lucide-react");
+var import_jsx_runtime104 = require("react/jsx-runtime");
 var PropertyBase = ({
   name,
   children,
@@ -20055,36 +20198,36 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
     "div",
     {
-      className: (0, import_clsx40.default)("group/property", className),
+      className: (0, import_clsx41.default)("group/property", className),
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
           "div",
           {
             "data-name": "property-title",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex-row-1 items-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { "data-name": "property-title-icon", children: icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { "data-name": "property-title-text", children: name })
+              /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { "data-name": "property-title-icon", children: icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { "data-name": "property-title-text", children: name })
               ] }) }),
-              invalid && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react30.AlertTriangle, { className: "size-force-6" })
+              invalid && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.AlertTriangle, { className: "size-force-6" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
           "div",
           {
             "data-name": "property-content",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
               children({ required, hasValue, invalid }),
-              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { "data-name": "property-actions", children: [
-                isClearEnabled && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { "data-name": "property-actions", children: [
+                isClearEnabled && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                   IconButton,
                   {
                     tooltip: translation("clearValue"),
@@ -20093,10 +20236,10 @@ var PropertyBase = ({
                     color: "negative",
                     coloringStyle: "text",
                     size: "sm",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react30.X, { className: "size-force-5" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.X, { className: "size-force-5" })
                   }
                 ),
-                isRemoveEnabled && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                isRemoveEnabled && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
                   IconButton,
                   {
                     tooltip: translation("removeProperty"),
@@ -20104,7 +20247,7 @@ var PropertyBase = ({
                     color: "negative",
                     coloringStyle: "text",
                     size: "sm",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react30.Trash, { className: "size-force-5" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.Trash, { className: "size-force-5" })
                   }
                 )
               ] })
@@ -20117,7 +20260,7 @@ var PropertyBase = ({
 };
 
 // src/components/user-interaction/properties/CheckboxProperty.tsx
-var import_jsx_runtime104 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var CheckboxProperty = ({
   value,
   onValueChange,
@@ -20126,15 +20269,15 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue: value !== void 0,
       readOnly,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.Check, { size: 24 }),
-      children: () => /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_lucide_react32.Check, { size: 24 }),
+      children: () => /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "flex-row-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
           Button,
           {
             color: value ? "positive" : "neutral",
@@ -20147,7 +20290,7 @@ var CheckboxProperty = ({
             children: translation("yes")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
           Button,
           {
             color: !value && value !== void 0 ? "negative" : "neutral",
@@ -20166,8 +20309,8 @@ var CheckboxProperty = ({
 };
 
 // src/components/user-interaction/properties/DateProperty.tsx
-var import_lucide_react32 = require("lucide-react");
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_lucide_react33 = require("lucide-react");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 var DateProperty = ({
   value,
   onValueChange,
@@ -20177,13 +20320,13 @@ var DateProperty = ({
   ...baseProps
 }) => {
   const hasValue = !!value;
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_lucide_react32.CalendarDays, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react33.CalendarDays, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
         DateTimeInput,
         {
           value,
@@ -20200,8 +20343,8 @@ var DateProperty = ({
 };
 
 // src/components/user-interaction/properties/MultiSelectProperty.tsx
-var import_lucide_react33 = require("lucide-react");
-var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_lucide_react34 = require("lucide-react");
+var import_jsx_runtime107 = require("react/jsx-runtime");
 var MultiSelectProperty = ({
   children,
   value,
@@ -20210,18 +20353,18 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = value.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react33.List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react34.List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
             MultiSelectChipDisplay,
             {
               value,
@@ -20247,8 +20390,8 @@ var MultiSelectProperty = ({
 };
 
 // src/components/user-interaction/properties/NumberProperty.tsx
-var import_lucide_react34 = require("lucide-react");
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_lucide_react35 = require("lucide-react");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 var NumberProperty = ({
   value,
   onValueChange,
@@ -20260,20 +20403,20 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
     PropertyBase,
     {
       ...baseProps,
       onValueClear,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react34.Binary, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react35.Binary, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
               Input,
               {
                 "data-name": "property-input",
@@ -20301,7 +20444,7 @@ var NumberProperty = ({
                 }
               }
             ),
-            suffix && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
               "span",
               {
                 "data-name": "property-suffix",
@@ -20317,8 +20460,8 @@ var NumberProperty = ({
 };
 
 // src/components/user-interaction/properties/SelectProperty.tsx
-var import_lucide_react35 = require("lucide-react");
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_lucide_react36 = require("lucide-react");
+var import_jsx_runtime109 = require("react/jsx-runtime");
 var SingleSelectProperty = ({
   children,
   value,
@@ -20327,18 +20470,18 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react35.List, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react36.List, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
         "div",
         {
           "data-name": "property-input-wrapper",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-          children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
             SelectRoot,
             {
               value,
@@ -20348,7 +20491,7 @@ var SingleSelectProperty = ({
               },
               disabled: props.readOnly,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                   SelectButton,
                   {
                     className: "flex-row-2 w-full items-center justify-between",
@@ -20356,7 +20499,7 @@ var SingleSelectProperty = ({
                     "data-name": "property-input"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(SelectContent, { children })
+                /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(SelectContent, { children })
               ]
             }
           )
@@ -20367,8 +20510,8 @@ var SingleSelectProperty = ({
 };
 
 // src/components/user-interaction/properties/TextProperty.tsx
-var import_lucide_react36 = require("lucide-react");
-var import_jsx_runtime109 = require("react/jsx-runtime");
+var import_lucide_react37 = require("lucide-react");
+var import_jsx_runtime110 = require("react/jsx-runtime");
 var TextProperty = ({
   value,
   readOnly,
@@ -20378,13 +20521,13 @@ var TextProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react36.Text, { size: 24 }),
-      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_lucide_react37.Text, { size: 24 }),
+      children: ({ invalid }) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
         Textarea,
         {
           "data-name": "property-input",
@@ -20404,29 +20547,29 @@ var TextProperty = ({
 
 // src/components/utils/Polymorphic.tsx
 var import_react_slot = require("@radix-ui/react-slot");
-var import_react111 = require("react");
-var import_jsx_runtime110 = require("react/jsx-runtime");
-var PolymorphicSlot = (0, import_react111.forwardRef)(function PolymorphicSlot2({
+var import_react112 = require("react");
+var import_jsx_runtime111 = require("react/jsx-runtime");
+var PolymorphicSlot = (0, import_react112.forwardRef)(function PolymorphicSlot2({
   children,
   asChild,
   defaultComponent = "div",
   ...props
 }, ref) {
   const Component = asChild ? import_react_slot.Slot : defaultComponent;
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Component, { ...props, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Component, { ...props, ref, children });
 });
 
 // src/components/utils/Transition.tsx
-var import_react112 = require("react");
+var import_react113 = require("react");
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = (0, import_react112.useState)(show);
-  const [isTransitioning, setIsTransitioning] = (0, import_react112.useState)(!isOpen);
+  const [isOpen, setIsOpen] = (0, import_react113.useState)(show);
+  const [isTransitioning, setIsTransitioning] = (0, import_react113.useState)(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  (0, import_react112.useEffect)(() => {
+  (0, import_react113.useEffect)(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -20451,18 +20594,18 @@ function Transition({
 }
 
 // src/global-contexts/HightideProvider.tsx
-var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_jsx_runtime112 = require("react/jsx-runtime");
 var HightideProvider = ({
   children,
   theme,
   locale,
   config
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(LocaleProvider, { ...locale, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(ThemeProvider, { ...theme, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(HightideConfigProvider, { ...config, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(LocaleProvider, { ...locale, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(ThemeProvider, { ...theme, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(HightideConfigProvider, { ...config, children }) }) });
 };
 
 // src/hooks/focus/useFocusGuards.ts
-var import_react113 = require("react");
+var import_react114 = require("react");
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -20500,7 +20643,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  (0, import_react113.useEffect)(() => {
+  (0, import_react114.useEffect)(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -20509,10 +20652,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-var import_react114 = __toESM(require("react"));
+var import_react115 = __toESM(require("react"));
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react114.default.useState(false);
-  (0, import_react114.useEffect)(() => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react115.default.useState(false);
+  (0, import_react115.useEffect)(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -20532,11 +20675,11 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/focus/useIsMounted.ts
-var import_react115 = require("react");
+var import_react116 = require("react");
 var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicEffect = isClient ? import_react115.useLayoutEffect : import_react115.useEffect;
+var useIsomorphicEffect = isClient ? import_react116.useLayoutEffect : import_react116.useEffect;
 var useIsMounted = () => {
-  const [isMounted, setIsMounted] = (0, import_react115.useState)(false);
+  const [isMounted, setIsMounted] = (0, import_react116.useState)(false);
   useIsomorphicEffect(() => {
     setIsMounted(true);
     return () => {
@@ -20547,10 +20690,10 @@ var useIsMounted = () => {
 };
 
 // src/hooks/useHandleRefs.ts
-var import_react116 = require("react");
+var import_react117 = require("react");
 function useHandleRefs(handleRef) {
-  const refs = (0, import_react116.useRef)([]);
-  (0, import_react116.useEffect)(() => {
+  const refs = (0, import_react117.useRef)([]);
+  (0, import_react117.useEffect)(() => {
     refs.current = Object.keys(handleRef?.current ?? {}).map(
       () => ({ current: null })
     );
@@ -20563,10 +20706,10 @@ function useHandleRefs(handleRef) {
 }
 
 // src/hooks/useLogUnstableDependencies.ts
-var import_react117 = __toESM(require("react"));
+var import_react118 = __toESM(require("react"));
 function useLogUnstableDependencies(name, value) {
-  const prev = import_react117.default.useRef(null);
-  import_react117.default.useEffect(() => {
+  const prev = import_react118.default.useRef(null);
+  import_react118.default.useEffect(() => {
     if (!prev.current) {
       prev.current = value;
       return;
@@ -20588,10 +20731,10 @@ function useLogUnstableDependencies(name, value) {
 }
 
 // src/hooks/useOverwritableState.ts
-var import_react118 = require("react");
+var import_react119 = require("react");
 var useOverwritableState = (overwriteValue, onChange) => {
-  const [state, setState] = (0, import_react118.useState)(overwriteValue);
-  (0, import_react118.useEffect)(() => {
+  const [state, setState] = (0, import_react119.useState)(overwriteValue);
+  (0, import_react119.useEffect)(() => {
     setState(overwriteValue);
   }, [overwriteValue]);
   const onChangeWrapper = (action) => {
@@ -20603,29 +20746,29 @@ var useOverwritableState = (overwriteValue, onChange) => {
 };
 
 // src/hooks/useRerender.ts
-var import_react119 = require("react");
+var import_react120 = require("react");
 var useRerender = () => {
-  return (0, import_react119.useReducer)(() => ({}), {})[1];
+  return (0, import_react120.useReducer)(() => ({}), {})[1];
 };
 
 // src/hooks/useUpdatingDateString.ts
-var import_react120 = require("react");
+var import_react121 = require("react");
 var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, date }) => {
   const { locale: contextLocale } = useLocale();
   const locale = localeOverride ?? contextLocale;
-  const [dateAndTimeStrings, setDateAndTimeStrings] = (0, import_react120.useState)({
+  const [dateAndTimeStrings, setDateAndTimeStrings] = (0, import_react121.useState)({
     compareDate: date,
     absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
     relative: DateUtils.formatRelative(date, locale)
   });
-  (0, import_react120.useEffect)(() => {
+  (0, import_react121.useEffect)(() => {
     setDateAndTimeStrings({
       compareDate: date,
       absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat),
       relative: DateUtils.formatRelative(date, locale)
     });
   }, [date, absoluteFormat, locale]);
-  (0, import_react120.useEffect)(() => {
+  (0, import_react121.useEffect)(() => {
     let timeoutId;
     const startTimer = () => {
       const now = /* @__PURE__ */ new Date();
@@ -20661,7 +20804,7 @@ var validateEmail = (email) => {
 };
 
 // src/hooks/useValidators.ts
-var import_react121 = require("react");
+var import_react122 = require("react");
 var notEmpty = (value) => {
   if (!value) {
     return "notEmpty";
@@ -20711,7 +20854,7 @@ var UseValidators = {
 };
 var useTranslatedValidators = () => {
   const translation = useHightideTranslation();
-  return (0, import_react121.useMemo)(() => ({
+  return (0, import_react122.useMemo)(() => ({
     notEmpty: (value) => {
       const result = notEmpty(value);
       if (result) {
@@ -21113,6 +21256,7 @@ var PromiseUtils = {
   SimpleSearch,
   SimpleSearchWithMapping,
   SingleSelectProperty,
+  SortingList,
   StepperBar,
   StorageListener,
   Switch,