@helpwave/hightide 0.1.20 → 0.1.22

package/dist/index.js

@@ -2845,6 +2845,7 @@ __export(index_exports, {
   ArrayUtil: () => ArrayUtil,
   Avatar: () => Avatar,
   AvatarGroup: () => AvatarGroup,
+  AvatarUtil: () => AvatarUtil,
   BagFunctionUtil: () => BagFunctionUtil,
   BreadCrumb: () => BreadCrumb,
   ButtonColorUtil: () => ButtonColorUtil,
@@ -2855,6 +2856,7 @@ __export(index_exports, {
   CheckboxUncontrolled: () => CheckboxUncontrolled,
   Chip: () => Chip,
   ChipList: () => ChipList,
+  ChipUtil: () => ChipUtil,
   Circle: () => Circle,
   ConfirmDialog: () => ConfirmDialog,
   ConfirmModal: () => ConfirmModal,
@@ -2955,8 +2957,6 @@ __export(index_exports, {
   YearMonthPicker: () => YearMonthPicker,
   YearMonthPickerUncontrolled: () => YearMonthPickerUncontrolled,
   addDuration: () => addDuration,
-  avatarSizeMapping: () => avatarSizeMapping,
-  avtarSizeList: () => avtarSizeList,
   builder: () => builder,
   changeDuration: () => changeDuration,
   clamp: () => clamp,
@@ -2993,6 +2993,7 @@ __export(index_exports, {
   useLanguage: () => useLanguage,
   useLocalStorage: () => useLocalStorage,
   useLocale: () => useLocale,
+  useLogOnce: () => useLogOnce,
   useOutsideClick: () => useOutsideClick,
   usePopoverPosition: () => usePopoverPosition,
   useRerender: () => useRerender,
@@ -3235,6 +3236,11 @@ var SessionStorageService = class extends StorageService {
   }
 };
 
+// src/util/resolveSetState.ts
+function resolveSetState(action, prev) {
+  return typeof action === "function" ? action(prev) : action;
+}
+
 // src/hooks/useLocalStorage.ts
 var useLocalStorage = (key, initValue) => {
   const get = (0, import_react.useCallback)(() => {
@@ -3246,10 +3252,10 @@ var useLocalStorage = (key, initValue) => {
     return value || initValue;
   }, [initValue, key]);
   const [storedValue, setStoredValue] = (0, import_react.useState)(get);
-  const setValue = (0, import_react.useCallback)((value) => {
-    const newValue = value instanceof Function ? value(storedValue) : value;
+  const setValue = (0, import_react.useCallback)((action) => {
+    const newValue = resolveSetState(action, storedValue);
     const storageService = new LocalStorageService();
-    storageService.set(key, value);
+    storageService.set(key, newValue);
     setStoredValue(newValue);
   }, [storedValue, setStoredValue, key]);
   (0, import_react.useEffect)(() => {
@@ -3296,8 +3302,9 @@ var LanguageProvider = ({ initialLanguage, children }) => {
     }
   }, [initialLanguage]);
   (0, import_react2.useEffect)(() => {
+    document.documentElement.setAttribute("lang", language);
     setStoredLanguage(language);
-  }, [language, setStoredLanguage]);
+  }, [language]);
   (0, import_react2.useEffect)(() => {
     if (storedLanguage !== null) {
       setLanguage(storedLanguage);
@@ -3684,6 +3691,7 @@ var SolidButton = (0, import_react3.forwardRef)(function SolidButton2({
       onClick,
       disabled,
       className: (0, import_clsx4.default)(
+        "font-semibold",
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
           [(0, import_clsx4.default)(colorClasses, "hover:brightness-90")]: !disabled
@@ -3741,6 +3749,7 @@ var OutlineButton = ({
       onClick,
       disabled,
       className: (0, import_clsx4.default)(
+        "font-semibold",
         {
           "text-disabled-text border-disabled-outline cursor-not-allowed": disabled,
           [(0, import_clsx4.default)(colorClasses, "hover:brightness-80")]: !disabled
@@ -3783,6 +3792,7 @@ var TextButton = ({
   startIcon,
   endIcon,
   onClick,
+  coloredHoverBackground = true,
   className,
   ...restProps
 }) => {
@@ -3791,6 +3801,11 @@ var TextButton = ({
     negative: "bg-transparent text-button-text-negative-text",
     neutral: "bg-transparent text-button-text-neutral-text"
   }[color];
+  const backgroundColor = {
+    primary: "hover:bg-button-text-primary-text/20",
+    negative: "hover:bg-button-text-negative-text/20",
+    neutral: "hover:bg-button-text-neutral-text/20"
+  }[color];
   const iconColorClasses = {
     primary: "text-button-text-primary-icon",
     negative: "text-button-text-negative-icon",
@@ -3802,9 +3817,12 @@ var TextButton = ({
       onClick,
       disabled,
       className: (0, import_clsx4.default)(
+        "font-semibold",
         {
           "text-disabled-text cursor-not-allowed": disabled,
-          [(0, import_clsx4.default)(colorClasses, "hover:bg-button-text-hover-background")]: !disabled
+          [colorClasses]: !disabled,
+          [backgroundColor]: !disabled && coloredHoverBackground,
+          "hover:bg-button-text-hover-background": !disabled && !coloredHoverBackground
         },
         ButtonUtil.paddingMapping[size],
         className
@@ -4779,7 +4797,7 @@ var Overlay = ({
   }, []);
   if (!root || !isOpen) return null;
   return import_react_dom.default.createPortal(
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_clsx11.default)("fixed inset-0 z-[9999]"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_clsx11.default)("fixed inset-0 z-[200]"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "div",
         {
@@ -4886,7 +4904,7 @@ var Modal = ({
           ref,
           tabIndex: -1,
           className: (0, import_clsx11.default)(
-            "flex-col-2 fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl animate-pop-in",
+            "flex-col-2 fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-around-lg shadow-strong animate-pop-in",
             className
           ),
           role: "dialog",
@@ -4955,7 +4973,7 @@ var Dialog = ({
           ref,
           tabIndex: -1,
           className: (0, import_clsx11.default)(
-            "flex-col-2 fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl animate-pop-in",
+            "flex-col-2 fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-around-lg shadow-strong animate-pop-in",
             className
           ),
           role: "dialog",
@@ -5017,49 +5035,105 @@ var ConfirmDialog = ({
 
 // src/components/icons-and-geometry/Avatar.tsx
 var import_clsx13 = __toESM(require("clsx"));
+
+// src/hooks/useLogOnce.ts
+var import_react11 = require("react");
+var useLogOnce = ({
+  message,
+  condition,
+  type = "warning"
+}) => {
+  const [hasLogged, setHasLogged] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
+    if (!hasLogged && condition) {
+      switch (type) {
+        case "info":
+          console.info(message);
+          break;
+        case "error":
+          console.error(message);
+          break;
+        case "warning":
+          console.warn(message);
+          break;
+      }
+      setHasLogged(true);
+    }
+  }, [condition]);
+};
+
+// src/components/icons-and-geometry/Avatar.tsx
+var import_react12 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var avtarSizeList = ["tiny", "small", "medium", "large"];
+var avtarSizeList = ["sm", "md", "lg", "xl"];
 var avatarSizeMapping = {
-  tiny: 24,
-  small: 32,
-  medium: 48,
-  large: 64
-};
-var Avatar = ({ avatarUrl, alt, size = "medium", className = "" }) => {
-  avatarUrl = "https://cdn.helpwave.de/boringavatar.svg";
-  const avtarSize = {
-    tiny: 24,
-    small: 32,
-    medium: 48,
-    large: 64
-  }[size];
-  const style = {
-    width: avtarSize + "px",
-    height: avtarSize + "px",
-    maxWidth: avtarSize + "px",
-    maxHeight: avtarSize + "px",
-    minWidth: avtarSize + "px",
-    minHeight: avtarSize + "px"
+  sm: 18,
+  md: 24,
+  lg: 32,
+  xl: 48
+};
+var textClassNameMapping = {
+  sm: "text-xs font-semibold",
+  md: "text-sm font-semibold",
+  lg: "text-lg font-semibold",
+  xl: "text-2xl font-bold"
+};
+var AvatarUtil = {
+  avatarSizeMapping,
+  sizes: avtarSizeList
+};
+var Avatar = ({ image, name, size = "md", fullyRounded, className = "" }) => {
+  const pixels = avatarSizeMapping[size];
+  const sizeStyle = {
+    minWidth: pixels,
+    maxWidth: pixels,
+    minHeight: pixels,
+    maxHeight: pixels
   };
-  return (
-    // TODO transparent or white background later
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_clsx13.default)(`rounded-full bg-primary shadow`, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "img",
-      {
-        className: "rounded-full",
-        style,
-        src: avatarUrl,
-        alt,
-        width: avtarSize,
-        height: avtarSize
-      }
-    ) })
+  const textClassName = textClassNameMapping[size];
+  useLogOnce({ message: "Either set image or name in Avatar", condition: !image && !name, type: "warning" });
+  const displayName = (0, import_react12.useMemo)(() => {
+    const maxLetters = size === "sm" ? 1 : 2;
+    return (name ?? "").split(" ").filter((_, index) => index < maxLetters).map((value) => value[0]).join("").toUpperCase();
+  }, [name, size]);
+  const rounding = {
+    "rounded-full": fullyRounded,
+    "rounded-lg": !fullyRounded && !(size === "sm" || size === "md"),
+    "rounded-sm": !fullyRounded && (size === "sm" || size === "md")
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx13.default)(
+        `relative bg-primary text-on-primary`,
+        rounding,
+        className
+      ),
+      style: sizeStyle,
+      children: [
+        name && !image && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: (0, import_clsx13.default)(textClassName, "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"), children: displayName }),
+        image && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "img",
+          {
+            className: (0, import_clsx13.default)(
+              "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+              rounding
+            ),
+            src: image.avatarUrl,
+            alt: image.alt,
+            style: sizeStyle
+          }
+        )
+      ]
+    }
   );
 };
 var AvatarGroup = ({
   avatars,
   maxShownProfiles = 5,
-  size = "tiny"
+  showTotalNumber = true,
+  size = "md",
+  fullyRounded
 }) => {
   const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles);
   const diameter = avatarSizeMapping[size];
@@ -5072,15 +5146,22 @@ var AvatarGroup = ({
       {
         className: "absolute",
         style: { left: index * diameter * stackingOverlap + "px", zIndex: maxShownProfiles - index },
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Avatar, { avatarUrl: avatar.avatarUrl, alt: avatar.alt, size })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          Avatar,
+          {
+            ...avatar,
+            size,
+            fullyRounded,
+            className: (0, import_clsx13.default)("shadow-side shadow-r-4 shadow-hard", avatar.className)
+          }
+        )
       },
       index
     )) }),
-    notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
-        className: "flex-row-2 truncate items-center",
-        style: { fontSize: diameter / 2 + "px", marginLeft: 1 + diameter / 16 + "px" },
+        className: (0, import_clsx13.default)(textClassNameMapping[size], "flex-row-2 truncate items-center"),
         children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
           "+ ",
           notDisplayedProfiles
@@ -5115,7 +5196,7 @@ var Circle = ({
 };
 
 // src/components/icons-and-geometry/Ring.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_clsx15 = __toESM(require("clsx"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Ring = ({
@@ -5144,9 +5225,9 @@ var AnimatedRing = ({
   onAnimationFinished = noop,
   style
 }) => {
-  const [currentWidth, setCurrentWidth] = (0, import_react11.useState)(0);
+  const [currentWidth, setCurrentWidth] = (0, import_react13.useState)(0);
   const milliseconds = 1e3 * fillAnimationDuration;
-  const animate = (0, import_react11.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react13.useCallback)((timestamp, startTime) => {
     const progress = Math.min((timestamp - startTime) / milliseconds, 1);
     const newWidth = Math.min(width * progress, width);
     setCurrentWidth(newWidth);
@@ -5160,7 +5241,7 @@ var AnimatedRing = ({
       }
     }
   }, [milliseconds, onAnimationFinished, repeating, width]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (currentWidth < width) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -5195,10 +5276,10 @@ var RingWave = ({
   onAnimationFinished = noop,
   style
 }) => {
-  const [currentInnerSize, setCurrentInnerSize] = (0, import_react11.useState)(startInnerSize);
+  const [currentInnerSize, setCurrentInnerSize] = (0, import_react13.useState)(startInnerSize);
   const distance = endInnerSize - startInnerSize;
   const milliseconds = 1e3 * fillAnimationDuration;
-  const animate = (0, import_react11.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react13.useCallback)((timestamp, startTime) => {
     const progress = Math.min((timestamp - startTime) / milliseconds, 1);
     const newInnerSize = Math.min(
       startInnerSize + distance * progress,
@@ -5215,7 +5296,7 @@ var RingWave = ({
       }
     }
   }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (currentInnerSize < endInnerSize) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -5250,7 +5331,7 @@ var RadialRings = ({
   sizeCircle2 = 200,
   sizeCircle3 = 300
 }) => {
-  const [currentRing, setCurrentRing] = (0, import_react11.useState)(0);
+  const [currentRing, setCurrentRing] = (0, import_react13.useState)(0);
   const size = sizeCircle3;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
@@ -5417,7 +5498,7 @@ var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
 };
 
 // src/components/layout-and-navigation/Carousel.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_clsx17 = __toESM(require("clsx"));
 var import_lucide_react5 = require("lucide-react");
 
@@ -5549,15 +5630,15 @@ var Carousel = ({
     currentPosition,
     dragState,
     animationState
-  }, setCarouselInformation] = (0, import_react12.useState)({
+  }, setCarouselInformation] = (0, import_react14.useState)({
     currentPosition: 0
   });
-  const animationId = (0, import_react12.useRef)(void 0);
-  const timeOut = (0, import_react12.useRef)(void 0);
+  const animationId = (0, import_react14.useRef)(void 0);
+  const timeOut = (0, import_react14.useRef)(void 0);
   autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
   const length = children.length;
   const paddingItemCount = 3;
-  const util = (0, import_react12.useMemo)(() => new LoopingArrayCalculator(length, isLooping, overScrollThreshold), [length, isLooping, overScrollThreshold]);
+  const util = (0, import_react14.useMemo)(() => new LoopingArrayCalculator(length, isLooping, overScrollThreshold), [length, isLooping, overScrollThreshold]);
   const currentIndex = util.getCorrectedPosition(LoopingArrayCalculator.withoutOffset(currentPosition));
   animationTime = Math.max(200, animationTime);
   autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime);
@@ -5565,7 +5646,7 @@ var Carousel = ({
     const baseOffset = -50 + (index - currentPosition) * 100;
     return `${baseOffset}%`;
   };
-  const animation = (0, import_react12.useCallback)((time) => {
+  const animation = (0, import_react14.useCallback)((time) => {
     let keepAnimating = true;
     setCarouselInformation((state) => {
       const {
@@ -5610,7 +5691,7 @@ var Carousel = ({
       animationId.current = requestAnimationFrame((time1) => animation(time1));
     }
   }, [animationTime, autoLoopAnimationTime, util]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (animationState) {
       animationId.current = requestAnimationFrame(animation);
     }
@@ -5632,7 +5713,7 @@ var Carousel = ({
       isAutoLooping: true
     }
   }));
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!animationId.current && !animationState && !dragState && !timeOut.current) {
       if (autoLoopingTimeOut > 0) {
         timeOut.current = setTimeout(() => {
@@ -5840,6 +5921,10 @@ var Carousel = ({
 // src/components/layout-and-navigation/Chip.tsx
 var import_clsx18 = __toESM(require("clsx"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
+var chipColors = ["default", "dark", "red", "yellow", "green", "blue", "pink"];
+var ChipUtil = {
+  colors: chipColors
+};
 var Chip = ({
   children,
   trailingIcon,
@@ -6183,17 +6268,17 @@ var import_lucide_react6 = require("lucide-react");
 var import_clsx23 = __toESM(require("clsx"));
 
 // src/components/user-action/Input.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_clsx22 = __toESM(require("clsx"));
 
 // src/hooks/useDelay.ts
-var import_react13 = require("react");
+var import_react15 = require("react");
 var defaultOptions = {
   delay: 3e3,
   disabled: false
 };
 function useDelay(options) {
-  const [timer, setTimer] = (0, import_react13.useState)(void 0);
+  const [timer, setTimer] = (0, import_react15.useState)(void 0);
   const { delay, disabled } = {
     ...defaultOptions,
     ...options
@@ -6212,12 +6297,12 @@ function useDelay(options) {
       setTimer(void 0);
     }, delay));
   };
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     return () => {
       clearTimeout(timer);
     };
   }, [timer]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (disabled) {
       clearTimeout(timer);
       setTimer(void 0);
@@ -6245,9 +6330,9 @@ var Label = ({
 };
 
 // src/hooks/useFocusManagement.ts
-var import_react14 = require("react");
+var import_react16 = require("react");
 function useFocusManagement() {
-  const getFocusableElements = (0, import_react14.useCallback)(() => {
+  const getFocusableElements = (0, import_react16.useCallback)(() => {
     return Array.from(
       document.querySelectorAll(
         'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
@@ -6256,7 +6341,7 @@ function useFocusManagement() {
       (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
     );
   }, []);
-  const getNextFocusElement = (0, import_react14.useCallback)(() => {
+  const getNextFocusElement = (0, import_react16.useCallback)(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -6268,11 +6353,11 @@ function useFocusManagement() {
     }
     return nextElement;
   }, [getFocusableElements]);
-  const focusNext = (0, import_react14.useCallback)(() => {
+  const focusNext = (0, import_react16.useCallback)(() => {
     const nextElement = getNextFocusElement();
     nextElement?.focus();
   }, [getNextFocusElement]);
-  const getPreviousFocusElement = (0, import_react14.useCallback)(() => {
+  const getPreviousFocusElement = (0, import_react16.useCallback)(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -6288,7 +6373,7 @@ function useFocusManagement() {
     }
     return previousElement;
   }, [getFocusableElements]);
-  const focusPrevious = (0, import_react14.useCallback)(() => {
+  const focusPrevious = (0, import_react16.useCallback)(() => {
     const previousElement = getPreviousFocusElement();
     if (previousElement) previousElement.focus();
   }, [getPreviousFocusElement]);
@@ -6302,10 +6387,10 @@ function useFocusManagement() {
 }
 
 // src/hooks/useFocusOnceVisible.ts
-var import_react15 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react15.default.useState(false);
-  (0, import_react15.useEffect)(() => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react17.default.useState(false);
+  (0, import_react17.useEffect)(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -6330,7 +6415,7 @@ var getInputClassName = ({ disabled = false, hasError = false }) => {
   return (0, import_clsx22.default)(
     "px-2 py-1.5 rounded-md border-2",
     {
-      "bg-surface text-on-surface hover:border-primary focus:border-primary": !disabled && !hasError,
+      "bg-input-background text-input-text hover:border-primary focus:border-primary": !disabled && !hasError,
       "bg-on-negative text-negative border-negative-border hover:border-negative-border-hover": !disabled && hasError,
       "bg-disabled-background text-disabled-text border-disabled-border": disabled
     }
@@ -6341,7 +6426,7 @@ var defaultEditCompleteOptions = {
   afterDelay: true,
   delay: 2500
 };
-var Input = (0, import_react16.forwardRef)(function Input2({
+var Input = (0, import_react18.forwardRef)(function Input2({
   id,
   type = "text",
   value,
@@ -6364,10 +6449,10 @@ var Input = (0, import_react16.forwardRef)(function Input2({
     restartTimer,
     clearTimer
   } = useDelay({ delay, disabled: !afterDelay });
-  const innerRef = (0, import_react16.useRef)(null);
+  const innerRef = (0, import_react18.useRef)(null);
   const { focusNext } = useFocusManagement();
   useFocusOnceVisible(innerRef, !autoFocus);
-  (0, import_react16.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react18.useImperativeHandle)(forwardedRef, () => innerRef.current);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -6421,8 +6506,8 @@ var InputUncontrolled = ({
   onChangeText = noop,
   ...props
 }) => {
-  const [usedValue, setUsedValue] = (0, import_react16.useState)(value);
-  (0, import_react16.useEffect)(() => {
+  const [usedValue, setUsedValue] = (0, import_react18.useState)(value);
+  (0, import_react18.useEffect)(() => {
     setUsedValue(value);
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -6437,7 +6522,7 @@ var InputUncontrolled = ({
     }
   );
 };
-var FormInput = (0, import_react16.forwardRef)(function FormInput2({
+var FormInput = (0, import_react18.forwardRef)(function FormInput2({
   id,
   labelText,
   errorText,
@@ -6473,7 +6558,7 @@ var FormInput = (0, import_react16.forwardRef)(function FormInput2({
 });
 
 // src/components/layout-and-navigation/Pagination.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var Pagination = ({
   overwriteTranslation,
@@ -6484,11 +6569,11 @@ var Pagination = ({
   style
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  const [value, setValue] = (0, import_react17.useState)((pageIndex + 1).toString());
+  const [value, setValue] = (0, import_react19.useState)((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -6531,7 +6616,7 @@ var Pagination = ({
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "span",
         {
-          className: "flex-row-2 flex-1 items-center justify-center select-none h-10 bg-surface text-on-surface rounded-md font-bold",
+          className: "flex-row-2 flex-1 items-center justify-center select-none h-10 bg-input-background text-input-text rounded-md font-bold",
           children: pageCount
         }
       )
@@ -6546,7 +6631,7 @@ var import_lucide_react7 = require("lucide-react");
 var import_clsx24 = __toESM(require("clsx"));
 
 // src/hooks/useSearch.ts
-var import_react18 = require("react");
+var import_react20 = require("react");
 
 // src/util/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -6585,34 +6670,34 @@ var useSearch = ({
   filter,
   disabled = false
 }) => {
-  const [search, setSearch] = (0, import_react18.useState)(initialSearch ?? "");
-  const [result, setResult] = (0, import_react18.useState)(list);
-  const searchTags = (0, import_react18.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
-  const updateSearch = (0, import_react18.useCallback)((newSearch) => {
+  const [search, setSearch] = (0, import_react20.useState)(initialSearch ?? "");
+  const [result, setResult] = (0, import_react20.useState)(list);
+  const searchTags = (0, import_react20.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = (0, import_react20.useCallback)((newSearch) => {
     const usedSearch = newSearch ?? search;
     if (newSearch) {
       setSearch(search);
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
   }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = (0, import_react18.useMemo)(() => {
+  const filteredResult = (0, import_react20.useMemo)(() => {
     if (!filter) {
       return result;
     }
     return result.filter(filter);
   }, [result, filter]);
-  const sortedAndFilteredResult = (0, import_react18.useMemo)(() => {
+  const sortedAndFilteredResult = (0, import_react20.useMemo)(() => {
     if (!sortingFunction) {
       return filteredResult;
     }
     return filteredResult.sort(sortingFunction);
   }, [filteredResult, sortingFunction]);
-  const usedResult = (0, import_react18.useMemo)(() => {
+  const usedResult = (0, import_react20.useMemo)(() => {
     if (!disabled) {
       return sortedAndFilteredResult;
     }
@@ -6672,7 +6757,7 @@ var SearchableList = ({
 // src/components/layout-and-navigation/StepperBar.tsx
 var import_lucide_react8 = require("lucide-react");
 var import_clsx25 = __toESM(require("clsx"));
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var defaultState = {
   currentStep: 0,
@@ -6766,8 +6851,8 @@ var StepperBar = ({
   );
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
-  const [usedState, setUsedState] = (0, import_react19.useState)(state ?? defaultState);
-  (0, import_react19.useEffect)(() => {
+  const [usedState, setUsedState] = (0, import_react21.useState)(state ?? defaultState);
+  (0, import_react21.useEffect)(() => {
     setUsedState(state ?? defaultState);
   }, [state]);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -6912,7 +6997,7 @@ var ErrorComponent = ({
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 
 // src/components/loading-states/LoadingContainer.tsx
 var import_clsx28 = require("clsx");
@@ -6933,8 +7018,8 @@ var LoadingAndErrorComponent = ({
   minimumLoadingDuration,
   className
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react20.useState)(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react20.useState)(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react22.useState)(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react22.useState)(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -7137,18 +7222,18 @@ var InputModal = ({
 };
 
 // src/components/user-action/Select.tsx
-var import_react23 = require("react");
-var import_react24 = require("react");
+var import_react25 = require("react");
+var import_react26 = require("react");
 var import_clsx35 = __toESM(require("clsx"));
 
 // src/components/user-action/Menu.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_clsx33 = __toESM(require("clsx"));
 
 // src/hooks/useOutsideClick.ts
-var import_react21 = require("react");
+var import_react23 = require("react");
 var useOutsideClick = (refs, handler) => {
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -7242,7 +7327,7 @@ var MenuItem = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
   "div",
   {
-    className: (0, import_clsx33.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold", {
+    className: (0, import_clsx33.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
       "text-right": alignment === "right",
       "text-left": alignment === "left",
       "text-disabled-text cursor-not-allowed": isDisabled,
@@ -7272,10 +7357,10 @@ var Menu = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = (0, import_react22.useRef)(null);
-  const menuRef = (0, import_react22.useRef)(null);
+  const triggerRef = (0, import_react24.useRef)(null);
+  const menuRef = (0, import_react24.useRef)(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = (0, import_react22.useState)(true);
+  const [isHidden, setIsHidden] = (0, import_react24.useState)(true);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -7286,7 +7371,7 @@ var Menu = ({
     triggerRef.current?.getBoundingClientRect(),
     { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
   );
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!isOpen) return;
     const triggerEl = triggerRef.current;
     if (!triggerEl) return;
@@ -7303,7 +7388,7 @@ var Menu = ({
       window.removeEventListener("resize", close);
     };
   }, [isOpen, setIsOpen]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (isOpen) {
       setIsHidden(false);
     }
@@ -7316,7 +7401,7 @@ var Menu = ({
         ref: menuRef,
         onClick: (e) => e.stopPropagation(),
         className: (0, import_clsx33.default)(
-          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg z-10",
+          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
           {
             "animate-pop-in": isOpen,
             "animate-pop-out": !isOpen,
@@ -7401,7 +7486,7 @@ var Select = ({
   const isShowingHint = !selectedDisplayOverwrite && !selectedOption?.label;
   const { result, search, setSearch } = useSearch({
     list: options,
-    searchMapping: (0, import_react23.useCallback)((item) => item.searchTags, []),
+    searchMapping: (0, import_react25.useCallback)((item) => item.searchTags, []),
     ...searchOptions
   });
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: (0, import_clsx35.default)(className), children: [
@@ -7418,7 +7503,7 @@ var Select = ({
               "btn-md justify-between w-full border-2",
               {
                 "rounded-b-lg": !open,
-                "bg-menu-background text-menu-text border-menu-border hover:border-primary": !disabled,
+                "bg-input-background text-input-text hover:border-primary": !disabled,
                 "bg-disabled-background text-disabled-text border-disabled-background cursor-not-allowed": disabled
               },
               triggerClassName
@@ -7473,8 +7558,8 @@ var SelectUncontrolled = ({
   hintText,
   ...props
 }) => {
-  const [selected, setSelected] = (0, import_react24.useState)(value);
-  (0, import_react24.useEffect)(() => {
+  const [selected, setSelected] = (0, import_react26.useState)(value);
+  (0, import_react26.useEffect)(() => {
     if (options.find((options2) => options2.value === value)) {
       setSelected(value);
     }
@@ -7535,7 +7620,8 @@ var LanguageModal = ({
             className: "mt-2",
             value: language,
             options: LanguageUtil.languages.map((language2) => ({ label: translation(language2), value: language2 })),
-            onChange: (language2) => setLanguage(language2)
+            onChange: (language2) => setLanguage(language2),
+            searchOptions: { disabled: true }
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
@@ -7545,13 +7631,15 @@ var LanguageModal = ({
 };
 
 // src/theming/useTheme.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var themes = ["light", "dark"];
+var themes = ["light", "dark", "system"];
 var defaultThemeTypeTranslation = {
   en: {
     dark: "Dark",
     light: "Light",
+    system: "System",
     theme: {
       one: "Theme",
       other: "Themes"
@@ -7560,6 +7648,7 @@ var defaultThemeTypeTranslation = {
   de: {
     dark: "Dunkel",
     light: "Hell",
+    system: "System",
     theme: {
       one: "Farbschema",
       other: "Farbschemas"
@@ -7570,24 +7659,30 @@ var ThemeUtil = {
   themes,
   translation: defaultThemeTypeTranslation
 };
-var ThemeContext = (0, import_react25.createContext)({
+var ThemeContext = (0, import_react28.createContext)({
   theme: "light",
   setTheme: noop
 });
-var ThemeProvider = ({ children, initialTheme = "light" }) => {
-  const [theme, setTheme] = (0, import_react25.useState)(initialTheme);
-  (0, import_react25.useEffect)(() => {
-    if (theme !== initialTheme) {
+var ThemeProvider = ({ children, initialTheme = "system" }) => {
+  const [storedTheme, setStoredTheme] = useLocalStorage("theme", initialTheme);
+  const [userTheme, setUserTheme] = (0, import_react28.useState)();
+  (0, import_react28.useEffect)(() => {
+    if (storedTheme !== initialTheme) {
       console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
-      setTheme(initialTheme);
+      setStoredTheme(initialTheme);
     }
   }, [initialTheme]);
-  (0, import_react25.useEffect)(() => {
-    document.documentElement.setAttribute("data-theme", theme);
-  }, [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ThemeContext.Provider, { value: { theme, setTheme }, children });
+  const usedTheme = (0, import_react27.useMemo)(() => storedTheme !== "system" ? storedTheme : userTheme, [storedTheme, userTheme]);
+  (0, import_react28.useEffect)(() => {
+    document.documentElement.setAttribute("data-theme", usedTheme);
+  }, [usedTheme]);
+  (0, import_react28.useEffect)(() => {
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    setUserTheme(prefersDark ? "dark" : "light");
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ThemeContext.Provider, { value: { theme: storedTheme, setTheme: setStoredTheme }, children });
 };
-var useTheme = () => (0, import_react25.useContext)(ThemeContext);
+var useTheme = () => (0, import_react28.useContext)(ThemeContext);
 
 // src/components/modals/ThemeModal.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
@@ -7624,7 +7719,8 @@ var ThemeModal = ({
             className: "mt-2",
             value: theme,
             options: ThemeUtil.themes.map((theme2) => ({ label: translation(theme2), value: theme2 })),
-            onChange: (theme2) => setTheme(theme2)
+            onChange: (theme2) => setTheme(theme2),
+            searchOptions: { disabled: true }
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
@@ -7637,7 +7733,7 @@ var ThemeModal = ({
 var import_lucide_react13 = require("lucide-react");
 
 // src/components/user-action/Checkbox.tsx
-var import_react26 = require("react");
+var import_react29 = require("react");
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var import_lucide_react11 = require("lucide-react");
 var import_clsx36 = __toESM(require("clsx"));
@@ -7688,7 +7784,7 @@ var Checkbox = ({
         className: (0, import_clsx36.default)(usedSizeClass, `items-center border-2 rounded outline-none `, {
           "text-disabled-text border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
           "focus:border-primary group-hover:border-primary ": !disabled,
-          "bg-surface": !disabled && !checked,
+          "bg-input-background": !disabled && !checked,
           "bg-primary/30 border-primary text-primary": !disabled && checked === true || checked === "indeterminate"
         }, className),
         children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(CheckboxPrimitive.Indicator, { children: [
@@ -7706,7 +7802,7 @@ var CheckboxUncontrolled = ({
   defaultValue = false,
   ...props
 }) => {
-  const [checked, setChecked] = (0, import_react26.useState)(defaultValue);
+  const [checked, setChecked] = (0, import_react29.useState)(defaultValue);
   const handleChange = (checked2) => {
     if (onChangeTristate) {
       onChangeTristate(checked2);
@@ -7767,7 +7863,7 @@ var PropertyBase = ({
         className: (0, import_clsx37.default)(
           "flex-row-2 grow px-3 py-2 justify-between items-center rounded-r-xl border-2 border-l-0 min-h-15",
           {
-            "bg-surface group-hover:border-primary": !requiredAndNoValue,
+            "bg-input-background text-input-text group-hover:border-primary": !requiredAndNoValue,
             "bg-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
           },
           className
@@ -7870,8 +7966,8 @@ var import_lucide_react16 = require("lucide-react");
 var import_clsx40 = __toESM(require("clsx"));
 
 // src/components/user-action/MultiSelect.tsx
-var import_react27 = require("react");
-var import_react28 = require("react");
+var import_react30 = require("react");
+var import_react31 = require("react");
 var import_clsx39 = __toESM(require("clsx"));
 var import_lucide_react15 = require("lucide-react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
@@ -7901,7 +7997,7 @@ var MultiSelect = ({
   const translation = useTranslation([formTranslation, defaultMultiSelectTranslation], overwriteTranslation);
   const { result, search, setSearch } = useSearch({
     list: options,
-    searchMapping: (0, import_react27.useCallback)((item) => item.searchTags, []),
+    searchMapping: (0, import_react30.useCallback)((item) => item.searchTags, []),
     ...searchOptions
   });
   const selectedItems = options.filter((value) => value.selected);
@@ -7925,17 +8021,17 @@ var MultiSelect = ({
           {
             ref,
             className: (0, import_clsx39.default)(
-              "btn-md justify-between w-full border-2 h-auto",
+              "group btn-md justify-between w-full border-2 h-auto",
               {
                 "min-h-14": useChipDisplay,
-                "bg-menu-background text-menu-text border-menu-border hover:border-primary": !disabled,
+                "bg-input-background text-input-text hover:border-primary": !disabled,
                 "bg-disabled-background text-disabled-text border-disabled-background cursor-not-allowed": disabled
               },
               triggerClassName
             ),
             onClick: toggleOpen,
             disabled,
-            children: useChipDisplay ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: isShowingHint ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconButton, { disabled, size: "small", color: "neutral", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react15.Plus, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+            children: useChipDisplay ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: isShowingHint ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "icon-btn-sm bg-button-solid-neutral-background text-button-solid-neutral-text hover:brightness-90 group-hover:brightness-90", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react15.Plus, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
               !isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "font-semibold", children: selectedDisplayOverwrite ?? translation("selected", { replacements: { amount: selectedItems.length.toString() } }) }),
               isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: (0, import_clsx39.default)("textstyle-description", hintTextClassName), children: hintText ?? translation("select") }),
               /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ExpansionIcon, { isExpanded: isOpen })
@@ -8028,8 +8124,8 @@ var MultiSelectUncontrolled = ({
   onChange,
   ...props
 }) => {
-  const [usedOptions, setUsedOptions] = (0, import_react28.useState)(options);
-  (0, import_react28.useEffect)(() => {
+  const [usedOptions, setUsedOptions] = (0, import_react31.useState)(options);
+  (0, import_react31.useEffect)(() => {
     setUsedOptions(options);
   }, [options]);
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
@@ -8257,7 +8353,7 @@ var import_lucide_react19 = require("lucide-react");
 var import_clsx44 = __toESM(require("clsx"));
 
 // src/components/user-action/Textarea.tsx
-var import_react29 = require("react");
+var import_react32 = require("react");
 var import_clsx43 = __toESM(require("clsx"));
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var Textarea = ({
@@ -8276,7 +8372,7 @@ var Textarea = ({
   className,
   ...props
 }) => {
-  const [hasFocus, setHasFocus] = (0, import_react29.useState)(false);
+  const [hasFocus, setHasFocus] = (0, import_react32.useState)(false);
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
@@ -8296,11 +8392,11 @@ var Textarea = ({
       "div",
       {
         className: (0, import_clsx43.default)(
-          "bg-surface text-on-surface relative",
+          "bg-input-background text-input-text relative",
           {
-            "shadow border-2 rounded-lg": defaultStyle,
+            "border-2 rounded-lg": defaultStyle,
             "hover:border-primary focus-within:border-primary": defaultStyle && !disabled,
-            "border-disabled-border cursor-not-allowed": defaultStyle && !disabled
+            "border-disabled-border cursor-not-allowed": defaultStyle && disabled
           }
         ),
         children: [
@@ -8346,8 +8442,8 @@ var TextareaUncontrolled = ({
   onChangeText = noop,
   ...props
 }) => {
-  const [text, setText] = (0, import_react29.useState)(value);
-  (0, import_react29.useEffect)(() => {
+  const [text, setText] = (0, import_react32.useState)(value);
+  (0, import_react32.useEffect)(() => {
     setText(value);
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
@@ -8444,14 +8540,14 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-var import_react32 = require("react");
+var import_react35 = require("react");
 var import_clsx48 = __toESM(require("clsx"));
 var import_react_table = require("@tanstack/react-table");
 var import_react_custom_scrollbars_23 = require("react-custom-scrollbars-2");
 
 // src/components/table/TableFilterButton.tsx
 var import_lucide_react20 = require("lucide-react");
-var import_react30 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var defaultTableFilterTranslation = {
   en: {
@@ -8477,9 +8573,9 @@ var TableFilterButton = ({
 }) => {
   const translation = useTranslation([formTranslation, defaultTableFilterTranslation]);
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react30.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react33.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
@@ -8611,9 +8707,9 @@ var TableSortButton = ({
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-var import_react31 = require("react");
+var import_react34 = require("react");
 var useResizeCallbackWrapper = (callback) => {
-  (0, import_react31.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -8645,22 +8741,22 @@ var Table = ({
   columns,
   ...tableOptions
 }) => {
-  const ref = (0, import_react32.useRef)(null);
-  const tableRef = (0, import_react32.useRef)(null);
-  const [columnSizing, setColumnSizing] = (0, import_react32.useState)(columns.reduce((previousValue, currentValue) => {
+  const ref = (0, import_react35.useRef)(null);
+  const tableRef = (0, import_react35.useRef)(null);
+  const [columnSizing, setColumnSizing] = (0, import_react35.useState)(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react32.useState)();
-  const [pagination, setPagination] = (0, import_react32.useState)({
+  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react35.useState)();
+  const [pagination, setPagination] = (0, import_react35.useState)({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = (0, import_react32.useState)(initialState?.columnFilters);
-  const computedColumnMinWidths = (0, import_react32.useMemo)(() => {
+  const [columnFilters, setColumnFilters] = (0, import_react35.useState)(initialState?.columnFilters);
+  const computedColumnMinWidths = (0, import_react35.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -8669,7 +8765,7 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const computedColumnMaxWidths = (0, import_react32.useMemo)(() => {
+  const computedColumnMaxWidths = (0, import_react35.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -8677,12 +8773,12 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const tableMinWidth = (0, import_react32.useMemo)(() => {
+  const tableMinWidth = (0, import_react35.useMemo)(() => {
     return columns.reduce((sum, column) => {
       return sum + computedColumnMinWidths[column.id];
     }, 0);
   }, [columns, computedColumnMinWidths]);
-  const updateColumnSizes = (0, import_react32.useMemo)(() => {
+  const updateColumnSizes = (0, import_react35.useMemo)(() => {
     return (previous) => {
       const updateSizing = {
         ...columnSizing,
@@ -8799,18 +8895,18 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react32.useState)(false);
-  (0, import_react32.useEffect)(() => {
+  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react35.useState)(false);
+  (0, import_react35.useEffect)(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
     }
   }, [columnSizing, hasInitializedSizing]);
-  useResizeCallbackWrapper((0, import_react32.useCallback)(() => {
+  useResizeCallbackWrapper((0, import_react35.useCallback)(() => {
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  (0, import_react32.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -8826,7 +8922,7 @@ var Table = ({
       }));
     }
   }, [data, pageCount, pagination.pageSize, pagination.pageIndex]);
-  const columnSizeVars = (0, import_react32.useMemo)(() => {
+  const columnSizeVars = (0, import_react35.useMemo)(() => {
     const headers = table.getFlatHeaders();
     const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
@@ -8841,7 +8937,7 @@ var Table = ({
       import_react_custom_scrollbars_23.Scrollbars,
       {
         autoHeight: true,
-        autoHeightMax: tableRef.current?.offsetHeight + 2,
+        autoHeightMax: tableRef.current?.offsetHeight ? tableRef.current?.offsetHeight + 2 : void 0,
         autoHide: true,
         children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
           "table",
@@ -8941,8 +9037,8 @@ var Table = ({
   ] });
 };
 var TableUncontrolled = ({ data, ...props }) => {
-  const [usedDate, setUsedData] = (0, import_react32.useState)(data);
-  (0, import_react32.useEffect)(() => {
+  const [usedDate, setUsedData] = (0, import_react35.useState)(data);
+  (0, import_react35.useEffect)(() => {
     setUsedData(data);
   }, [data]);
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
@@ -8964,7 +9060,7 @@ var TableWithSelection = ({
   meta,
   ...props
 }) => {
-  const columnsWithSelection = (0, import_react32.useMemo)(() => {
+  const columnsWithSelection = (0, import_react35.useMemo)(() => {
     return [
       {
         id: selectionRowId,
@@ -9034,7 +9130,7 @@ var TableWithSelection = ({
 };
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
-var import_react33 = require("react");
+var import_react36 = require("react");
 var import_clsx49 = require("clsx");
 
 // src/util/writeToClipboard.ts
@@ -9054,8 +9150,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useTranslation([formTranslation]);
-  const [isShowingIndication, setIsShowingIndication] = (0, import_react33.useState)(false);
-  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react33.useState)(false);
+  const [isShowingIndication, setIsShowingIndication] = (0, import_react36.useState)(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react36.useState)(false);
   const positionClasses = {
     top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
     bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
@@ -9197,7 +9293,7 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-var import_react34 = require("react");
+var import_react37 = require("react");
 var import_clsx51 = __toESM(require("clsx"));
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var up = 1;
@@ -9218,7 +9314,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react34.useState)({
+  }, setAnimation] = (0, import_react37.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -9234,7 +9330,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = (0, import_react34.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react37.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -9244,7 +9340,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react34.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react37.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -9317,7 +9413,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -9394,7 +9490,7 @@ var ScrollPicker = ({
 };
 
 // src/components/user-action/ToggleableInput.tsx
-var import_react35 = require("react");
+var import_react38 = require("react");
 var import_lucide_react23 = require("lucide-react");
 var import_clsx52 = __toESM(require("clsx"));
 var import_jsx_runtime65 = require("react/jsx-runtime");
@@ -9412,14 +9508,14 @@ var ToggleableInput = ({
   saveDelayOptions,
   ...restProps
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react35.useState)(initialState !== "display");
+  const [isEditing, setIsEditing] = (0, import_react38.useState)(initialState !== "display");
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
-  const ref = (0, import_react35.useRef)(null);
+  const ref = (0, import_react38.useRef)(null);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
     clearTimer();
   };
-  (0, import_react35.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (isEditing) {
       ref.current?.focus();
     }
@@ -9484,8 +9580,8 @@ var ToggleableInputUncontrolled = ({
   onChangeText = noop,
   ...restProps
 }) => {
-  const [value, setValue] = (0, import_react35.useState)(initialValue);
-  (0, import_react35.useEffect)(() => {
+  const [value, setValue] = (0, import_react38.useState)(initialValue);
+  (0, import_react38.useEffect)(() => {
     setValue(initialValue);
   }, [initialValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
@@ -9502,9 +9598,9 @@ var ToggleableInputUncontrolled = ({
 };
 
 // src/hooks/useRerender.ts
-var import_react36 = require("react");
+var import_react39 = require("react");
 var useRerender = () => {
-  return (0, import_react36.useReducer)(() => ({}), {})[1];
+  return (0, import_react39.useReducer)(() => ({}), {})[1];
 };
 
 // src/util/builder.ts
@@ -9545,11 +9641,6 @@ var localizedNewsSchema = import_zod.z.record(import_zod.z.enum(LanguageUtil.lan
 var filterNews = (localizedNews, requiredKeys) => {
   return localizedNews.filter((news) => requiredKeys.every((value) => news.keys.includes(value)));
 };
-
-// src/util/resolveSetState.ts
-function resolveSetState(action, prev) {
-  return typeof action === "function" ? action(prev) : action;
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ASTNodeInterpreter,
@@ -9557,6 +9648,7 @@ function resolveSetState(action, prev) {
   ArrayUtil,
   Avatar,
   AvatarGroup,
+  AvatarUtil,
   BagFunctionUtil,
   BreadCrumb,
   ButtonColorUtil,
@@ -9567,6 +9659,7 @@ function resolveSetState(action, prev) {
   CheckboxUncontrolled,
   Chip,
   ChipList,
+  ChipUtil,
   Circle,
   ConfirmDialog,
   ConfirmModal,
@@ -9667,8 +9760,6 @@ function resolveSetState(action, prev) {
   YearMonthPicker,
   YearMonthPickerUncontrolled,
   addDuration,
-  avatarSizeMapping,
-  avtarSizeList,
   builder,
   changeDuration,
   clamp,
@@ -9705,6 +9796,7 @@ function resolveSetState(action, prev) {
   useLanguage,
   useLocalStorage,
   useLocale,
+  useLogOnce,
   useOutsideClick,
   usePopoverPosition,
   useRerender,