@helpwave/hightide 0.1.21 → 0.1.22

package/dist/index.mjs

@@ -3067,6 +3067,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 = useCallback(() => {
@@ -3078,10 +3083,10 @@ var useLocalStorage = (key, initValue) => {
     return value || initValue;
   }, [initValue, key]);
   const [storedValue, setStoredValue] = useState(get);
-  const setValue = useCallback((value) => {
-    const newValue = value instanceof Function ? value(storedValue) : value;
+  const setValue = useCallback((action) => {
+    const newValue = resolveSetState(action, storedValue);
     const storageService = new LocalStorageService();
-    storageService.set(key, value);
+    storageService.set(key, newValue);
     setStoredValue(newValue);
   }, [storedValue, setStoredValue, key]);
   useEffect(() => {
@@ -3517,6 +3522,7 @@ var SolidButton = forwardRef(function SolidButton2({
       onClick,
       disabled,
       className: clsx4(
+        "font-semibold",
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
           [clsx4(colorClasses, "hover:brightness-90")]: !disabled
@@ -3574,6 +3580,7 @@ var OutlineButton = ({
       onClick,
       disabled,
       className: clsx4(
+        "font-semibold",
         {
           "text-disabled-text border-disabled-outline cursor-not-allowed": disabled,
           [clsx4(colorClasses, "hover:brightness-80")]: !disabled
@@ -3616,6 +3623,7 @@ var TextButton = ({
   startIcon,
   endIcon,
   onClick,
+  coloredHoverBackground = true,
   className,
   ...restProps
 }) => {
@@ -3624,6 +3632,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",
@@ -3635,9 +3648,12 @@ var TextButton = ({
       onClick,
       disabled,
       className: clsx4(
+        "font-semibold",
         {
           "text-disabled-text cursor-not-allowed": disabled,
-          [clsx4(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
@@ -4719,7 +4735,7 @@ var Modal = ({
           ref,
           tabIndex: -1,
           className: clsx11(
-            "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",
@@ -4788,7 +4804,7 @@ var Dialog = ({
           ref,
           tabIndex: -1,
           className: clsx11(
-            "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",
@@ -4850,49 +4866,105 @@ var ConfirmDialog = ({
 
 // src/components/icons-and-geometry/Avatar.tsx
 import clsx13 from "clsx";
+
+// src/hooks/useLogOnce.ts
+import { useEffect as useEffect10, useState as useState10 } from "react";
+var useLogOnce = ({
+  message,
+  condition,
+  type = "warning"
+}) => {
+  const [hasLogged, setHasLogged] = useState10(false);
+  useEffect10(() => {
+    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
+import { useMemo } from "react";
 import { jsx as jsx15, jsxs as jsxs11 } from "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__ */ jsx15("div", { className: clsx13(`rounded-full bg-primary shadow`, className), style, children: /* @__PURE__ */ jsx15(
-      "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 = 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__ */ jsxs11(
+    "div",
+    {
+      className: clsx13(
+        `relative bg-primary text-on-primary`,
+        rounding,
+        className
+      ),
+      style: sizeStyle,
+      children: [
+        name && !image && /* @__PURE__ */ jsx15("span", { className: clsx13(textClassName, "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"), children: displayName }),
+        image && /* @__PURE__ */ jsx15(
+          "img",
+          {
+            className: clsx13(
+              "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];
@@ -4905,15 +4977,22 @@ var AvatarGroup = ({
       {
         className: "absolute",
         style: { left: index * diameter * stackingOverlap + "px", zIndex: maxShownProfiles - index },
-        children: /* @__PURE__ */ jsx15(Avatar, { avatarUrl: avatar.avatarUrl, alt: avatar.alt, size })
+        children: /* @__PURE__ */ jsx15(
+          Avatar,
+          {
+            ...avatar,
+            size,
+            fullyRounded,
+            className: clsx13("shadow-side shadow-r-4 shadow-hard", avatar.className)
+          }
+        )
       },
       index
     )) }),
-    notDisplayedProfiles > 0 && /* @__PURE__ */ jsx15(
+    showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ jsx15(
       "div",
       {
-        className: "flex-row-2 truncate items-center",
-        style: { fontSize: diameter / 2 + "px", marginLeft: 1 + diameter / 16 + "px" },
+        className: clsx13(textClassNameMapping[size], "flex-row-2 truncate items-center"),
         children: /* @__PURE__ */ jsxs11("span", { children: [
           "+ ",
           notDisplayedProfiles
@@ -4948,7 +5027,7 @@ var Circle = ({
 };
 
 // src/components/icons-and-geometry/Ring.tsx
-import { useCallback as useCallback3, useEffect as useEffect10, useState as useState10 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect11, useState as useState11 } from "react";
 import clsx15 from "clsx";
 import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var Ring = ({
@@ -4977,7 +5056,7 @@ var AnimatedRing = ({
   onAnimationFinished = noop,
   style
 }) => {
-  const [currentWidth, setCurrentWidth] = useState10(0);
+  const [currentWidth, setCurrentWidth] = useState11(0);
   const milliseconds = 1e3 * fillAnimationDuration;
   const animate = useCallback3((timestamp, startTime) => {
     const progress = Math.min((timestamp - startTime) / milliseconds, 1);
@@ -4993,7 +5072,7 @@ var AnimatedRing = ({
       }
     }
   }, [milliseconds, onAnimationFinished, repeating, width]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (currentWidth < width) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -5028,7 +5107,7 @@ var RingWave = ({
   onAnimationFinished = noop,
   style
 }) => {
-  const [currentInnerSize, setCurrentInnerSize] = useState10(startInnerSize);
+  const [currentInnerSize, setCurrentInnerSize] = useState11(startInnerSize);
   const distance = endInnerSize - startInnerSize;
   const milliseconds = 1e3 * fillAnimationDuration;
   const animate = useCallback3((timestamp, startTime) => {
@@ -5048,7 +5127,7 @@ var RingWave = ({
       }
     }
   }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (currentInnerSize < endInnerSize) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -5083,7 +5162,7 @@ var RadialRings = ({
   sizeCircle2 = 200,
   sizeCircle3 = 300
 }) => {
-  const [currentRing, setCurrentRing] = useState10(0);
+  const [currentRing, setCurrentRing] = useState11(0);
   const size = sizeCircle3;
   return /* @__PURE__ */ jsxs12(
     "div",
@@ -5250,7 +5329,7 @@ var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
 };
 
 // src/components/layout-and-navigation/Carousel.tsx
-import { useCallback as useCallback4, useEffect as useEffect11, useMemo, useRef as useRef4, useState as useState11 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect12, useMemo as useMemo2, useRef as useRef4, useState as useState12 } from "react";
 import clsx17 from "clsx";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
@@ -5382,7 +5461,7 @@ var Carousel = ({
     currentPosition,
     dragState,
     animationState
-  }, setCarouselInformation] = useState11({
+  }, setCarouselInformation] = useState12({
     currentPosition: 0
   });
   const animationId = useRef4(void 0);
@@ -5390,7 +5469,7 @@ var Carousel = ({
   autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
   const length = children.length;
   const paddingItemCount = 3;
-  const util = useMemo(() => new LoopingArrayCalculator(length, isLooping, overScrollThreshold), [length, isLooping, overScrollThreshold]);
+  const util = useMemo2(() => 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);
@@ -5443,7 +5522,7 @@ var Carousel = ({
       animationId.current = requestAnimationFrame((time1) => animation(time1));
     }
   }, [animationTime, autoLoopAnimationTime, util]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (animationState) {
       animationId.current = requestAnimationFrame(animation);
     }
@@ -5465,7 +5544,7 @@ var Carousel = ({
       isAutoLooping: true
     }
   }));
-  useEffect11(() => {
+  useEffect12(() => {
     if (!animationId.current && !animationState && !dragState && !timeOut.current) {
       if (autoLoopingTimeOut > 0) {
         timeOut.current = setTimeout(() => {
@@ -5673,6 +5752,10 @@ var Carousel = ({
 // src/components/layout-and-navigation/Chip.tsx
 import clsx18 from "clsx";
 import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+var chipColors = ["default", "dark", "red", "yellow", "green", "blue", "pink"];
+var ChipUtil = {
+  colors: chipColors
+};
 var Chip = ({
   children,
   trailingIcon,
@@ -6016,17 +6099,17 @@ import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as
 import clsx23 from "clsx";
 
 // src/components/user-action/Input.tsx
-import { forwardRef as forwardRef3, useEffect as useEffect14, useImperativeHandle, useRef as useRef5, useState as useState13 } from "react";
+import { forwardRef as forwardRef3, useEffect as useEffect15, useImperativeHandle, useRef as useRef5, useState as useState14 } from "react";
 import clsx22 from "clsx";
 
 // src/hooks/useDelay.ts
-import { useEffect as useEffect12, useState as useState12 } from "react";
+import { useEffect as useEffect13, useState as useState13 } from "react";
 var defaultOptions = {
   delay: 3e3,
   disabled: false
 };
 function useDelay(options) {
-  const [timer, setTimer] = useState12(void 0);
+  const [timer, setTimer] = useState13(void 0);
   const { delay, disabled } = {
     ...defaultOptions,
     ...options
@@ -6045,12 +6128,12 @@ function useDelay(options) {
       setTimer(void 0);
     }, delay));
   };
-  useEffect12(() => {
+  useEffect13(() => {
     return () => {
       clearTimeout(timer);
     };
   }, [timer]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (disabled) {
       clearTimeout(timer);
       setTimer(void 0);
@@ -6135,10 +6218,10 @@ function useFocusManagement() {
 }
 
 // src/hooks/useFocusOnceVisible.ts
-import React2, { useEffect as useEffect13 } from "react";
+import React2, { useEffect as useEffect14 } from "react";
 var useFocusOnceVisible = (ref, disable = false) => {
   const [hasUsedFocus, setHasUsedFocus] = React2.useState(false);
-  useEffect13(() => {
+  useEffect14(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -6163,7 +6246,7 @@ var getInputClassName = ({ disabled = false, hasError = false }) => {
   return clsx22(
     "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
     }
@@ -6254,8 +6337,8 @@ var InputUncontrolled = ({
   onChangeText = noop,
   ...props
 }) => {
-  const [usedValue, setUsedValue] = useState13(value);
-  useEffect14(() => {
+  const [usedValue, setUsedValue] = useState14(value);
+  useEffect15(() => {
     setUsedValue(value);
   }, [value]);
   return /* @__PURE__ */ jsx26(
@@ -6306,7 +6389,7 @@ var FormInput = forwardRef3(function FormInput2({
 });
 
 // src/components/layout-and-navigation/Pagination.tsx
-import { useEffect as useEffect15, useState as useState14 } from "react";
+import { useEffect as useEffect16, useState as useState15 } from "react";
 import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var Pagination = ({
   overwriteTranslation,
@@ -6317,11 +6400,11 @@ var Pagination = ({
   style
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  const [value, setValue] = useState14((pageIndex + 1).toString());
+  const [value, setValue] = useState15((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  useEffect15(() => {
+  useEffect16(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -6364,7 +6447,7 @@ var Pagination = ({
       /* @__PURE__ */ jsx27(
         "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
         }
       )
@@ -6379,7 +6462,7 @@ import { Search } from "lucide-react";
 import clsx24 from "clsx";
 
 // src/hooks/useSearch.ts
-import { useCallback as useCallback6, useEffect as useEffect16, useMemo as useMemo2, useState as useState15 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect17, useMemo as useMemo3, useState as useState16 } from "react";
 
 // src/util/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -6418,9 +6501,9 @@ var useSearch = ({
   filter,
   disabled = false
 }) => {
-  const [search, setSearch] = useState15(initialSearch ?? "");
-  const [result, setResult] = useState15(list);
-  const searchTags = useMemo2(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const [search, setSearch] = useState16(initialSearch ?? "");
+  const [result, setResult] = useState16(list);
+  const searchTags = useMemo3(() => additionalSearchTags ?? [], [additionalSearchTags]);
   const updateSearch = useCallback6((newSearch) => {
     const usedSearch = newSearch ?? search;
     if (newSearch) {
@@ -6428,24 +6511,24 @@ var useSearch = ({
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
   }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = useMemo2(() => {
+  const filteredResult = useMemo3(() => {
     if (!filter) {
       return result;
     }
     return result.filter(filter);
   }, [result, filter]);
-  const sortedAndFilteredResult = useMemo2(() => {
+  const sortedAndFilteredResult = useMemo3(() => {
     if (!sortingFunction) {
       return filteredResult;
     }
     return filteredResult.sort(sortingFunction);
   }, [filteredResult, sortingFunction]);
-  const usedResult = useMemo2(() => {
+  const usedResult = useMemo3(() => {
     if (!disabled) {
       return sortedAndFilteredResult;
     }
@@ -6505,7 +6588,7 @@ var SearchableList = ({
 // src/components/layout-and-navigation/StepperBar.tsx
 import { Check as Check2, ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "lucide-react";
 import clsx25 from "clsx";
-import { useEffect as useEffect17, useState as useState16 } from "react";
+import { useEffect as useEffect18, useState as useState17 } from "react";
 import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var defaultState = {
   currentStep: 0,
@@ -6599,8 +6682,8 @@ var StepperBar = ({
   );
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
-  const [usedState, setUsedState] = useState16(state ?? defaultState);
-  useEffect17(() => {
+  const [usedState, setUsedState] = useState17(state ?? defaultState);
+  useEffect18(() => {
     setUsedState(state ?? defaultState);
   }, [state]);
   return /* @__PURE__ */ jsx29(
@@ -6745,7 +6828,7 @@ var ErrorComponent = ({
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-import { useState as useState17 } from "react";
+import { useState as useState18 } from "react";
 
 // src/components/loading-states/LoadingContainer.tsx
 import { clsx as clsx28 } from "clsx";
@@ -6766,8 +6849,8 @@ var LoadingAndErrorComponent = ({
   minimumLoadingDuration,
   className
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = useState17(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState17(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = useState18(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState18(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -6971,21 +7054,17 @@ var InputModal = ({
 
 // src/components/user-action/Select.tsx
 import { useCallback as useCallback7 } from "react";
-import { useEffect as useEffect20, useState as useState19 } from "react";
+import { useEffect as useEffect21, useState as useState20 } from "react";
 import clsx35 from "clsx";
 
 // src/components/user-action/Menu.tsx
-import {
-  useEffect as useEffect19,
-  useRef as useRef6,
-  useState as useState18
-} from "react";
+import { useEffect as useEffect20, useRef as useRef6, useState as useState19 } from "react";
 import clsx33 from "clsx";
 
 // src/hooks/useOutsideClick.ts
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect19 } from "react";
 var useOutsideClick = (refs, handler) => {
-  useEffect18(() => {
+  useEffect19(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -7079,7 +7158,7 @@ var MenuItem = ({
 }) => /* @__PURE__ */ jsx41(
   "div",
   {
-    className: clsx33("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold", {
+    className: clsx33("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,
@@ -7112,7 +7191,7 @@ var Menu = ({
   const triggerRef = useRef6(null);
   const menuRef = useRef6(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = useState18(true);
+  const [isHidden, setIsHidden] = useState19(true);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -7123,7 +7202,7 @@ var Menu = ({
     triggerRef.current?.getBoundingClientRect(),
     { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
   );
-  useEffect19(() => {
+  useEffect20(() => {
     if (!isOpen) return;
     const triggerEl = triggerRef.current;
     if (!triggerEl) return;
@@ -7140,7 +7219,7 @@ var Menu = ({
       window.removeEventListener("resize", close);
     };
   }, [isOpen, setIsOpen]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (isOpen) {
       setIsHidden(false);
     }
@@ -7153,7 +7232,7 @@ var Menu = ({
         ref: menuRef,
         onClick: (e) => e.stopPropagation(),
         className: clsx33(
-          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg z-[300]",
+          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
           {
             "animate-pop-in": isOpen,
             "animate-pop-out": !isOpen,
@@ -7255,7 +7334,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
@@ -7310,8 +7389,8 @@ var SelectUncontrolled = ({
   hintText,
   ...props
 }) => {
-  const [selected, setSelected] = useState19(value);
-  useEffect20(() => {
+  const [selected, setSelected] = useState20(value);
+  useEffect21(() => {
     if (options.find((options2) => options2.value === value)) {
       setSelected(value);
     }
@@ -7383,13 +7462,15 @@ var LanguageModal = ({
 };
 
 // src/theming/useTheme.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect21, useState as useState20 } from "react";
+import { useMemo as useMemo4 } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect22, useState as useState21 } from "react";
 import { jsx as jsx45 } from "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"
@@ -7398,6 +7479,7 @@ var defaultThemeTypeTranslation = {
   de: {
     dark: "Dunkel",
     light: "Hell",
+    system: "System",
     theme: {
       one: "Farbschema",
       other: "Farbschemas"
@@ -7412,28 +7494,24 @@ var ThemeContext = createContext2({
   theme: "light",
   setTheme: noop
 });
-var ThemeProvider = ({ children, initialTheme = "light" }) => {
-  const [theme, setTheme] = useState20(initialTheme);
+var ThemeProvider = ({ children, initialTheme = "system" }) => {
   const [storedTheme, setStoredTheme] = useLocalStorage("theme", initialTheme);
-  useEffect21(() => {
-    if (theme !== initialTheme) {
+  const [userTheme, setUserTheme] = useState21();
+  useEffect22(() => {
+    if (storedTheme !== initialTheme) {
       console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
-      setTheme(initialTheme);
+      setStoredTheme(initialTheme);
     }
   }, [initialTheme]);
-  useEffect21(() => {
-    document.documentElement.setAttribute("data-theme", theme);
-    setStoredTheme(theme);
-  }, [theme]);
-  useEffect21(() => {
-    if (storedTheme !== null) {
-      setTheme(storedTheme);
-      return;
-    }
+  const usedTheme = useMemo4(() => storedTheme !== "system" ? storedTheme : userTheme, [storedTheme, userTheme]);
+  useEffect22(() => {
+    document.documentElement.setAttribute("data-theme", usedTheme);
+  }, [usedTheme]);
+  useEffect22(() => {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    setTheme(prefersDark ? "dark" : "light");
+    setUserTheme(prefersDark ? "dark" : "light");
   }, []);
-  return /* @__PURE__ */ jsx45(ThemeContext.Provider, { value: { theme, setTheme }, children });
+  return /* @__PURE__ */ jsx45(ThemeContext.Provider, { value: { theme: storedTheme, setTheme: setStoredTheme }, children });
 };
 var useTheme = () => useContext2(ThemeContext);
 
@@ -7486,7 +7564,7 @@ var ThemeModal = ({
 import { Check as Check4 } from "lucide-react";
 
 // src/components/user-action/Checkbox.tsx
-import { useState as useState21 } from "react";
+import { useState as useState22 } from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check as Check3, Minus } from "lucide-react";
 import clsx36 from "clsx";
@@ -7537,7 +7615,7 @@ var Checkbox = ({
         className: clsx36(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__ */ jsxs32(CheckboxPrimitive.Indicator, { children: [
@@ -7555,7 +7633,7 @@ var CheckboxUncontrolled = ({
   defaultValue = false,
   ...props
 }) => {
-  const [checked, setChecked] = useState21(defaultValue);
+  const [checked, setChecked] = useState22(defaultValue);
   const handleChange = (checked2) => {
     if (onChangeTristate) {
       onChangeTristate(checked2);
@@ -7616,7 +7694,7 @@ var PropertyBase = ({
         className: clsx37(
           "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
@@ -7720,7 +7798,7 @@ import clsx40 from "clsx";
 
 // src/components/user-action/MultiSelect.tsx
 import { useCallback as useCallback8 } from "react";
-import { useEffect as useEffect22, useState as useState22 } from "react";
+import { useEffect as useEffect23, useState as useState23 } from "react";
 import clsx39 from "clsx";
 import { Plus } from "lucide-react";
 import { Fragment as Fragment5, jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
@@ -7774,17 +7852,17 @@ var MultiSelect = ({
           {
             ref,
             className: clsx39(
-              "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__ */ jsx51(Fragment5, { children: isShowingHint ? /* @__PURE__ */ jsx51(IconButton, { disabled, size: "small", color: "neutral", children: /* @__PURE__ */ jsx51(Plus, {}) }) : /* @__PURE__ */ jsx51(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) }) : /* @__PURE__ */ jsxs34(Fragment5, { children: [
+            children: useChipDisplay ? /* @__PURE__ */ jsx51(Fragment5, { children: isShowingHint ? /* @__PURE__ */ jsx51("div", { className: "icon-btn-sm bg-button-solid-neutral-background text-button-solid-neutral-text hover:brightness-90 group-hover:brightness-90", children: /* @__PURE__ */ jsx51(Plus, {}) }) : /* @__PURE__ */ jsx51(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) }) : /* @__PURE__ */ jsxs34(Fragment5, { children: [
               !isShowingHint && /* @__PURE__ */ jsx51("span", { className: "font-semibold", children: selectedDisplayOverwrite ?? translation("selected", { replacements: { amount: selectedItems.length.toString() } }) }),
               isShowingHint && /* @__PURE__ */ jsx51("span", { className: clsx39("textstyle-description", hintTextClassName), children: hintText ?? translation("select") }),
               /* @__PURE__ */ jsx51(ExpansionIcon, { isExpanded: isOpen })
@@ -7877,8 +7955,8 @@ var MultiSelectUncontrolled = ({
   onChange,
   ...props
 }) => {
-  const [usedOptions, setUsedOptions] = useState22(options);
-  useEffect22(() => {
+  const [usedOptions, setUsedOptions] = useState23(options);
+  useEffect23(() => {
     setUsedOptions(options);
   }, [options]);
   return /* @__PURE__ */ jsx51(
@@ -8106,7 +8184,7 @@ import { Text } from "lucide-react";
 import clsx44 from "clsx";
 
 // src/components/user-action/Textarea.tsx
-import { useEffect as useEffect23, useState as useState23 } from "react";
+import { useEffect as useEffect24, useState as useState24 } from "react";
 import clsx43 from "clsx";
 import { jsx as jsx55, jsxs as jsxs36 } from "react/jsx-runtime";
 var Textarea = ({
@@ -8125,7 +8203,7 @@ var Textarea = ({
   className,
   ...props
 }) => {
-  const [hasFocus, setHasFocus] = useState23(false);
+  const [hasFocus, setHasFocus] = useState24(false);
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
@@ -8145,11 +8223,11 @@ var Textarea = ({
       "div",
       {
         className: clsx43(
-          "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: [
@@ -8195,8 +8273,8 @@ var TextareaUncontrolled = ({
   onChangeText = noop,
   ...props
 }) => {
-  const [text, setText] = useState23(value);
-  useEffect23(() => {
+  const [text, setText] = useState24(value);
+  useEffect24(() => {
     setText(value);
   }, [value]);
   return /* @__PURE__ */ jsx55(
@@ -8293,7 +8371,7 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-import { useCallback as useCallback9, useEffect as useEffect26, useMemo as useMemo3, useRef as useRef7, useState as useState25 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect27, useMemo as useMemo5, useRef as useRef7, useState as useState26 } from "react";
 import clsx48 from "clsx";
 import {
   flexRender,
@@ -8307,7 +8385,7 @@ import { Scrollbars as Scrollbars3 } from "react-custom-scrollbars-2";
 
 // src/components/table/TableFilterButton.tsx
 import { FilterIcon } from "lucide-react";
-import { useEffect as useEffect24, useState as useState24 } from "react";
+import { useEffect as useEffect25, useState as useState25 } from "react";
 import { Fragment as Fragment6, jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
 var defaultTableFilterTranslation = {
   en: {
@@ -8333,9 +8411,9 @@ var TableFilterButton = ({
 }) => {
   const translation = useTranslation([formTranslation, defaultTableFilterTranslation]);
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = useState24(columnFilterValue);
+  const [filterValue, setFilterValue] = useState25(columnFilterValue);
   const hasFilter = !!filterValue;
-  useEffect24(() => {
+  useEffect25(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   return /* @__PURE__ */ jsx58(
@@ -8467,9 +8545,9 @@ var TableSortButton = ({
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-import { useEffect as useEffect25 } from "react";
+import { useEffect as useEffect26 } from "react";
 var useResizeCallbackWrapper = (callback) => {
-  useEffect25(() => {
+  useEffect26(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -8503,20 +8581,20 @@ var Table = ({
 }) => {
   const ref = useRef7(null);
   const tableRef = useRef7(null);
-  const [columnSizing, setColumnSizing] = useState25(columns.reduce((previousValue, currentValue) => {
+  const [columnSizing, setColumnSizing] = useState26(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = useState25();
-  const [pagination, setPagination] = useState25({
+  const [columnSizingInfo, setColumnSizingInfo] = useState26();
+  const [pagination, setPagination] = useState26({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = useState25(initialState?.columnFilters);
-  const computedColumnMinWidths = useMemo3(() => {
+  const [columnFilters, setColumnFilters] = useState26(initialState?.columnFilters);
+  const computedColumnMinWidths = useMemo5(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -8525,7 +8603,7 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const computedColumnMaxWidths = useMemo3(() => {
+  const computedColumnMaxWidths = useMemo5(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -8533,12 +8611,12 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const tableMinWidth = useMemo3(() => {
+  const tableMinWidth = useMemo5(() => {
     return columns.reduce((sum, column) => {
       return sum + computedColumnMinWidths[column.id];
     }, 0);
   }, [columns, computedColumnMinWidths]);
-  const updateColumnSizes = useMemo3(() => {
+  const updateColumnSizes = useMemo5(() => {
     return (previous) => {
       const updateSizing = {
         ...columnSizing,
@@ -8655,8 +8733,8 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = useState25(false);
-  useEffect26(() => {
+  const [hasInitializedSizing, setHasInitializedSizing] = useState26(false);
+  useEffect27(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
@@ -8666,7 +8744,7 @@ var Table = ({
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  useEffect26(() => {
+  useEffect27(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -8682,7 +8760,7 @@ var Table = ({
       }));
     }
   }, [data, pageCount, pagination.pageSize, pagination.pageIndex]);
-  const columnSizeVars = useMemo3(() => {
+  const columnSizeVars = useMemo5(() => {
     const headers = table.getFlatHeaders();
     const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
@@ -8697,7 +8775,7 @@ var Table = ({
       Scrollbars3,
       {
         autoHeight: true,
-        autoHeightMax: tableRef.current?.offsetHeight + 2,
+        autoHeightMax: tableRef.current?.offsetHeight ? tableRef.current?.offsetHeight + 2 : void 0,
         autoHide: true,
         children: /* @__PURE__ */ jsxs38(
           "table",
@@ -8797,8 +8875,8 @@ var Table = ({
   ] });
 };
 var TableUncontrolled = ({ data, ...props }) => {
-  const [usedDate, setUsedData] = useState25(data);
-  useEffect26(() => {
+  const [usedDate, setUsedData] = useState26(data);
+  useEffect27(() => {
     setUsedData(data);
   }, [data]);
   return /* @__PURE__ */ jsx61(
@@ -8820,7 +8898,7 @@ var TableWithSelection = ({
   meta,
   ...props
 }) => {
-  const columnsWithSelection = useMemo3(() => {
+  const columnsWithSelection = useMemo5(() => {
     return [
       {
         id: selectionRowId,
@@ -8890,7 +8968,7 @@ var TableWithSelection = ({
 };
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
-import { useState as useState26 } from "react";
+import { useState as useState27 } from "react";
 import { clsx as clsx49 } from "clsx";
 
 // src/util/writeToClipboard.ts
@@ -8910,8 +8988,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useTranslation([formTranslation]);
-  const [isShowingIndication, setIsShowingIndication] = useState26(false);
-  const [isShowingConfirmation, setIsShowingConfirmation] = useState26(false);
+  const [isShowingIndication, setIsShowingIndication] = useState27(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = useState27(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]`,
@@ -9053,7 +9131,7 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-import { useCallback as useCallback10, useEffect as useEffect27, useState as useState27 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect28, useState as useState28 } from "react";
 import clsx51 from "clsx";
 import { jsx as jsx64, jsxs as jsxs41 } from "react/jsx-runtime";
 var up = 1;
@@ -9074,7 +9152,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState27({
+  }, setAnimation] = useState28({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -9173,7 +9251,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect27(() => {
+  useEffect28(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -9250,7 +9328,7 @@ var ScrollPicker = ({
 };
 
 // src/components/user-action/ToggleableInput.tsx
-import { useEffect as useEffect28, useRef as useRef8, useState as useState28 } from "react";
+import { useEffect as useEffect29, useRef as useRef8, useState as useState29 } from "react";
 import { Pencil } from "lucide-react";
 import clsx52 from "clsx";
 import { jsx as jsx65, jsxs as jsxs42 } from "react/jsx-runtime";
@@ -9268,14 +9346,14 @@ var ToggleableInput = ({
   saveDelayOptions,
   ...restProps
 }) => {
-  const [isEditing, setIsEditing] = useState28(initialState !== "display");
+  const [isEditing, setIsEditing] = useState29(initialState !== "display");
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const ref = useRef8(null);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
     clearTimer();
   };
-  useEffect28(() => {
+  useEffect29(() => {
     if (isEditing) {
       ref.current?.focus();
     }
@@ -9340,8 +9418,8 @@ var ToggleableInputUncontrolled = ({
   onChangeText = noop,
   ...restProps
 }) => {
-  const [value, setValue] = useState28(initialValue);
-  useEffect28(() => {
+  const [value, setValue] = useState29(initialValue);
+  useEffect29(() => {
     setValue(initialValue);
   }, [initialValue]);
   return /* @__PURE__ */ jsx65(
@@ -9401,17 +9479,13 @@ var localizedNewsSchema = z.record(z.enum(LanguageUtil.languages), newsListSchem
 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;
-}
 export {
   ASTNodeInterpreter,
   AnimatedRing,
   ArrayUtil,
   Avatar,
   AvatarGroup,
+  AvatarUtil,
   BagFunctionUtil,
   BreadCrumb,
   ButtonColorUtil,
@@ -9422,6 +9496,7 @@ export {
   CheckboxUncontrolled,
   Chip,
   ChipList,
+  ChipUtil,
   Circle,
   ConfirmDialog,
   ConfirmModal,
@@ -9522,8 +9597,6 @@ export {
   YearMonthPicker,
   YearMonthPickerUncontrolled,
   addDuration,
-  avatarSizeMapping,
-  avtarSizeList,
   builder,
   changeDuration,
   clamp,
@@ -9560,6 +9633,7 @@ export {
   useLanguage,
   useLocalStorage,
   useLocale,
+  useLogOnce,
   useOutsideClick,
   usePopoverPosition,
   useRerender,