@helpwave/hightide 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -6236,50 +6236,6 @@ var require_link2 = __commonJS({
   }
 });
 
-// src/coloring/shading.ts
-import tinycolor from "tinycolor2";
-
-// src/coloring/types.ts
-var shadingColorValues = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1e3];
-
-// src/coloring/shading.ts
-var generateShadingColors = (partialShading) => {
-  const shading = {
-    0: "#FFFFFF",
-    1e3: "#000000"
-  };
-  let index = 1;
-  while (index < shadingColorValues.length - 1) {
-    const previous = shadingColorValues[index - 1];
-    const current = shadingColorValues[index];
-    if (partialShading[current] !== void 0) {
-      shading[current] = partialShading[current];
-      index++;
-      continue;
-    }
-    let j = index + 1;
-    while (j < shadingColorValues.length) {
-      if (partialShading[shadingColorValues[j]] !== void 0) {
-        break;
-      }
-      j++;
-    }
-    if (j === shadingColorValues.length) {
-      j = shadingColorValues.length - 1;
-    }
-    const nextFound = shadingColorValues[j];
-    const interval = nextFound - previous;
-    for (let k = index; k < j; k++) {
-      const current2 = shadingColorValues[k];
-      const previousValue = partialShading[previous] ?? shading[previous];
-      const nextValue = partialShading[nextFound] ?? shading[nextFound];
-      shading[current2] = tinycolor.mix(tinycolor(previousValue), tinycolor(nextValue), (current2 - previous) / interval * 100).toHexString();
-    }
-    index = j;
-  }
-  return shading;
-};
-
 // src/components/icons-and-geometry/HelpwaveLogo.tsx
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -6383,7 +6339,7 @@ var HelpwaveBadge = ({
 
 // src/components/date/DatePicker.tsx
 import { useEffect as useEffect5, useState as useState5 } from "react";
-import { ArrowDown, ArrowUp, ChevronDown as ChevronDown2 } from "lucide-react";
+import { ArrowDown, ArrowUp, Calendar, ChevronDown as ChevronDown2 } from "lucide-react";
 
 // src/utils/array.ts
 var equalSizeGroups = (array, groupSize) => {
@@ -6673,7 +6629,7 @@ var useOverwritableState = (initialValue, onChange) => {
 };
 
 // src/components/date/DayPicker.tsx
-import clsx3 from "clsx";
+import clsx4 from "clsx";
 
 // src/i18n/LocaleProvider.tsx
 import { createContext, useContext, useEffect as useEffect2, useMemo, useState as useState3 } from "react";
@@ -7320,7 +7276,82 @@ var useLanguage = () => {
 
 // src/components/date/DayPicker.tsx
 import { useEffect as useEffect3, useState as useState4 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/components/user-action/Button.tsx
+import { forwardRef } from "react";
+import clsx3 from "clsx";
+import { jsxs as jsxs3 } from "react/jsx-runtime";
+var buttonColorsList = ["primary", "secondary", "positive", "warning", "negative", "neutral", "none"];
+var paddingMapping = {
+  default: {
+    tiny: "btn-xs",
+    small: "btn-sm",
+    medium: "btn-md",
+    large: "btn-lg"
+  },
+  icon: {
+    tiny: "icon-btn-xs",
+    small: "icon-btn-sm",
+    medium: "icon-btn-md",
+    large: "icon-btn-lg"
+  },
+  none: {}
+};
+var ButtonUtil = {
+  colors: buttonColorsList,
+  colorClasses: {
+    primary: "primary",
+    secondary: "secondary",
+    positive: "positive",
+    warning: "warning",
+    negative: "negative",
+    neutral: "neutral",
+    none: ""
+  }
+};
+var Button = forwardRef(function SolidButton({
+  children,
+  layout = "default",
+  size = "medium",
+  color = "primary",
+  coloringStyle = "solid",
+  startIcon,
+  endIcon,
+  disabled,
+  className,
+  ...restProps
+}, ref) {
+  const colorClasses = ButtonUtil.colorClasses[color];
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      ...restProps,
+      ref,
+      className: clsx3(
+        "group font-semibold",
+        {
+          "disabled": disabled,
+          [colorClasses]: !disabled,
+          "coloring-solid-hover": coloringStyle === "solid",
+          "coloring-text-hover": coloringStyle === "text",
+          "coloring-outline-hover": coloringStyle === "outline",
+          "coloring-tonal-hover": coloringStyle === "tonal"
+        },
+        paddingMapping[layout][size],
+        className
+      ),
+      disabled,
+      children: [
+        startIcon,
+        children,
+        endIcon
+      ]
+    }
+  );
+});
+
+// src/components/date/DayPicker.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var DayPicker = ({
   displayedMonth,
   selected,
@@ -7334,7 +7365,7 @@ var DayPicker = ({
   const { locale } = useLocale();
   const month = displayedMonth.getMonth();
   const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
-  return /* @__PURE__ */ jsxs3("div", { className: clsx3("flex-col-1 min-w-[220px] select-none", className), children: [
+  return /* @__PURE__ */ jsxs4("div", { className: clsx4("flex-col-1 min-w-[220px] select-none", className), children: [
     /* @__PURE__ */ jsx4("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ jsx4("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
     weeks.map((week, index) => /* @__PURE__ */ jsx4("div", { className: "flex-row-2 text-center", children: week.map((date) => {
       const isSelected = !!selected && equalDate(selected, date);
@@ -7342,19 +7373,18 @@ var DayPicker = ({
       const isSameMonth = date.getMonth() === month;
       const isDayValid = isInTimeSpan(date, start, end);
       return /* @__PURE__ */ jsx4(
-        "button",
+        Button,
         {
           disabled: !isDayValid,
-          className: clsx3(
+          color: isSelected ? "primary" : "neutral",
+          coloringStyle: isSelected ? "solid" : "text",
+          size: "small",
+          className: clsx4(
             "flex-1 rounded-full border-2",
             {
               "text-description": !isSameMonth && !isSelected && isDayValid,
-              "text-button-solid-neutral-text bg-button-solid-neutral-background": !isSelected && isSameMonth && isDayValid,
-              "text-button-solid-primary-text bg-button-solid-primary-background": isSelected && isDayValid,
-              "hover:brightness-90 hover:bg-button-solid-primary-background hover:text-button-solid-primary-text": isDayValid,
-              "text-disabled bg-disabled-background cursor-not-allowed": !isDayValid,
-              "border-secondary": isToday && markToday,
-              "border-transparent": !isToday || !markToday
+              "border-on-background": isToday && markToday,
+              "border-transparent": !(isToday && markToday)
             }
           ),
           onClick: () => onChange?.(date),
@@ -7394,20 +7424,19 @@ var DayPickerUncontrolled = ({
 
 // src/components/date/YearMonthPicker.tsx
 import { useEffect as useEffect4, useRef } from "react";
-import { Scrollbars } from "react-custom-scrollbars-2";
 import clsx6 from "clsx";
 
 // src/components/layout/Expandable.tsx
-import { forwardRef, useCallback as useCallback2, useId } from "react";
+import { forwardRef as forwardRef2, useCallback as useCallback2, useId } from "react";
 import { ChevronDown } from "lucide-react";
-import clsx4 from "clsx";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import clsx5 from "clsx";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var ExpansionIcon = ({ isExpanded, className }) => {
   return /* @__PURE__ */ jsx5(
     ChevronDown,
     {
       "aria-hidden": true,
-      className: clsx4(
+      className: clsx5(
         "min-w-6 w-6 min-h-6 h-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out",
         { "rotate-180": isExpanded },
         className
@@ -7415,7 +7444,7 @@ var ExpansionIcon = ({ isExpanded, className }) => {
     }
   );
 };
-var Expandable = forwardRef(function Expandable2({
+var Expandable = forwardRef2(function Expandable2({
   children,
   id: providedId,
   label,
@@ -7433,23 +7462,23 @@ var Expandable = forwardRef(function Expandable2({
   icon ??= defaultIcon;
   const generatedId = useId();
   const id = providedId ?? generatedId;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref,
       onClick: () => !clickOnlyOnHeader && !disabled && onChange?.(!isExpanded),
-      className: clsx4(
-        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+      className: clsx5(
+        "flex-col-0 surface coloring-solid group rounded-lg shadow-sm",
         { "cursor-pointer": !clickOnlyOnHeader && !disabled },
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs5(
           "button",
           {
             onClick: () => clickOnlyOnHeader && !disabled && onChange?.(!isExpanded),
-            className: clsx4(
-              "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
+            className: clsx5(
+              "flex-row-2 py-2 px-4 rounded-lg justify-between items-center coloring-solid-hover select-none",
               {
                 "group-hover:brightness-97": !isExpanded,
                 "hover:brightness-97": isExpanded && !disabled,
@@ -7470,10 +7499,10 @@ var Expandable = forwardRef(function Expandable2({
           "div",
           {
             id: `${id}-content`,
-            className: clsx4(
+            className: clsx5(
               "flex-col-2 px-4 transition-all duration-300 ease-in-out",
               {
-                [clsx4("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
+                [clsx5("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
                 "max-h-0 opacity-0 overflow-hidden": !isExpanded
               },
               contentClassName
@@ -7486,7 +7515,7 @@ var Expandable = forwardRef(function Expandable2({
     }
   );
 });
-var ExpandableUncontrolled = forwardRef(function ExpandableUncontrolled2({
+var ExpandableUncontrolled = forwardRef2(function ExpandableUncontrolled2({
   isExpanded,
   onChange,
   ...props
@@ -7503,274 +7532,14 @@ var ExpandableUncontrolled = forwardRef(function ExpandableUncontrolled2({
   );
 });
 
-// src/components/user-action/Button.tsx
-import { forwardRef as forwardRef2 } from "react";
-import clsx5 from "clsx";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var ButtonColorUtil = {
-  solid: ["primary", "secondary", "tertiary", "positive", "warning", "negative", "neutral"],
-  text: ["primary", "negative", "neutral"],
-  outline: ["primary"]
-};
-var IconButtonUtil = {
-  icon: [...ButtonColorUtil.solid, "transparent"]
-};
-var paddingMapping = {
-  none: "",
-  small: "btn-sm",
-  medium: "btn-md",
-  large: "btn-lg"
-};
-var iconPaddingMapping = {
-  none: "",
-  tiny: "icon-btn-xs",
-  small: "icon-btn-sm",
-  medium: "icon-btn-md",
-  large: "icon-btn-lg"
-};
-var ButtonUtil = {
-  paddingMapping,
-  iconPaddingMapping
-};
-var SolidButton = forwardRef2(function SolidButton2({
-  children,
-  color = "primary",
-  size = "medium",
-  startIcon,
-  endIcon,
-  onClick,
-  className,
-  ...restProps
-}, ref) {
-  const colorClasses = {
-    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
-    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
-    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
-    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
-    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
-    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
-    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text"
-  }[color];
-  const iconColorClasses = {
-    primary: "not-group-disabled:text-button-solid-primary-icon",
-    secondary: "not-group-disabled:text-button-solid-secondary-icon",
-    tertiary: "not-group-disabled:text-button-solid-tertiary-icon",
-    positive: "not-group-disabled:text-button-solid-positive-icon",
-    warning: "not-group-disabled:text-button-solid-warning-icon",
-    negative: "not-group-disabled:text-button-solid-negative-icon",
-    neutral: "not-group-disabled:text-button-solid-neutral-icon"
-  }[color];
-  return /* @__PURE__ */ jsxs5(
-    "button",
-    {
-      ref,
-      onClick,
-      className: clsx5(
-        "group font-semibold",
-        colorClasses,
-        "not-disabled:hover:brightness-90",
-        "disabled:text-disabled disabled:bg-disabled-background",
-        ButtonUtil.paddingMapping[size],
-        className
-      ),
-      ...restProps,
-      children: [
-        startIcon && /* @__PURE__ */ jsx6(
-          "span",
-          {
-            className: clsx5(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon && /* @__PURE__ */ jsx6(
-          "span",
-          {
-            className: clsx5(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: endIcon
-          }
-        )
-      ]
-    }
-  );
-});
-var OutlineButton = ({
-  children,
-  color = "primary",
-  size = "medium",
-  startIcon,
-  endIcon,
-  onClick,
-  className,
-  ...restProps
-}) => {
-  const colorClasses = {
-    primary: "not-disabled:border-button-outline-primary-text not-disabled:text-button-outline-primary-text"
-  }[color];
-  const iconColorClasses = {
-    primary: "not-group-disabled:text-button-outline-primary-icon"
-  }[color];
-  return /* @__PURE__ */ jsxs5(
-    "button",
-    {
-      onClick,
-      className: clsx5(
-        "group font-semibold bg-transparent border-2 ",
-        "not-disabled:hover:brightness-80",
-        colorClasses,
-        "disabled:text-disabled disabled:border-disabled-outline",
-        ButtonUtil.paddingMapping[size],
-        className
-      ),
-      ...restProps,
-      children: [
-        startIcon && /* @__PURE__ */ jsx6(
-          "span",
-          {
-            className: clsx5(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon && /* @__PURE__ */ jsx6(
-          "span",
-          {
-            className: clsx5(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: endIcon
-          }
-        )
-      ]
-    }
-  );
-};
-var TextButton = ({
-  children,
-  color = "neutral",
-  size = "medium",
-  startIcon,
-  endIcon,
-  onClick,
-  coloredHoverBackground = true,
-  className,
-  ...restProps
-}) => {
-  const colorClasses = {
-    primary: "not-disabled:bg-transparent not-disabled:text-button-text-primary-text not-disabled:focus-visible:outline-button-text-primary-text",
-    negative: "not-disabled:bg-transparent not-disabled:text-button-text-negative-text not-disabled:focus-visible:outline-button-text-negative-text",
-    neutral: "not-disabled:bg-transparent not-disabled:text-button-text-neutral-text not-disabled:focus-visible:outline-button-text-neutral-text"
-  }[color];
-  const backgroundColor = {
-    primary: "not-disabled:hover:bg-button-text-primary-text/20 not-disabled:focus-visible:bg-button-text-primary-text/20",
-    negative: "not-disabled:hover:bg-button-text-negative-text/20 not-disabled:focus-visible:bg-button-text-negative-text/20",
-    neutral: "not-disabled:hover:bg-button-text-neutral-text/20 not-disabled:focus-visible:bg-button-text-neutral-text/20"
-  }[color];
-  const iconColorClasses = {
-    primary: "not-group-disabled:text-button-text-primary-icon",
-    negative: "not-group-disabled:text-button-text-negative-icon",
-    neutral: "not-group-disabled:text-button-text-neutral-icon"
-  }[color];
-  return /* @__PURE__ */ jsxs5(
-    "button",
-    {
-      onClick,
-      className: clsx5(
-        "group font-semibold",
-        "disabled:text-disabled",
-        colorClasses,
-        {
-          [backgroundColor]: coloredHoverBackground,
-          "not-disabled:hover:bg-button-text-hover-background": !coloredHoverBackground
-        },
-        ButtonUtil.paddingMapping[size],
-        className
-      ),
-      ...restProps,
-      children: [
-        startIcon && /* @__PURE__ */ jsx6(
-          "span",
-          {
-            className: clsx5(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon && /* @__PURE__ */ jsx6(
-          "span",
-          {
-            className: clsx5(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: endIcon
-          }
-        )
-      ]
-    }
-  );
-};
-var IconButton = forwardRef2(function IconButton2({
-  children,
-  color = "primary",
-  size = "medium",
-  className,
-  ...restProps
-}, ref) {
-  const colorClasses = {
-    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
-    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
-    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
-    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
-    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
-    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
-    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text",
-    transparent: "not-disabled:bg-transparent"
-  }[color];
-  return /* @__PURE__ */ jsx6(
-    "button",
-    {
-      ref,
-      className: clsx5(
-        colorClasses,
-        "not-disabled:hover:brightness-90",
-        "disabled:text-disabled",
-        {
-          "disabled:bg-disabled-background": color !== "transparent",
-          "disabled:opacity-70": color === "transparent",
-          "not-disabled:hover:bg-button-text-hover-background": color === "transparent"
-        },
-        ButtonUtil.iconPaddingMapping[size],
-        className
-      ),
-      ...restProps,
-      children
-    }
-  );
-});
-
 // src/components/date/YearMonthPicker.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var YearMonthPicker = ({
   displayedYearMonth = /* @__PURE__ */ new Date(),
   start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
   end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
   onChange,
   className = "",
-  maxHeight = 300,
   showValueOpen = true
 }) => {
   const { locale } = useLocale();
@@ -7791,16 +7560,16 @@ var YearMonthPicker = ({
     return null;
   }
   const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false });
-  return /* @__PURE__ */ jsx7("div", { className: clsx6("flex-col-0 select-none", className), children: /* @__PURE__ */ jsx7(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx7("div", { className: "flex-col-1 mr-3", children: years.map((year) => {
+  return /* @__PURE__ */ jsx6("div", { className: clsx6("flex-col-1 select-none overflow-y-auto", className), children: years.map((year) => {
     const selectedYear = displayedYearMonth.getFullYear() === year;
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx6(
       ExpandableUncontrolled,
       {
         ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
-        label: /* @__PURE__ */ jsx7("span", { className: clsx6({ "text-primary font-bold": selectedYear }), children: year }),
+        label: /* @__PURE__ */ jsx6("span", { className: clsx6({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
         contentClassName: "gap-y-1",
-        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx7("div", { className: "flex-row-1", children: monthList.map((month) => {
+        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx6("div", { className: "flex-row-1", children: monthList.map((month) => {
           const monthIndex = monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
           const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
@@ -7809,8 +7578,8 @@ var YearMonthPicker = ({
           const isAfterStart = start === void 0 || start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 });
           const isBeforeEnd = end === void 0 || firstOfMonth <= end;
           const isValid = isAfterStart && isBeforeEnd;
-          return /* @__PURE__ */ jsx7(
-            SolidButton,
+          return /* @__PURE__ */ jsx6(
+            Button,
             {
               disabled: !isValid,
               color: selectedMonth && isValid ? "primary" : "neutral",
@@ -7827,7 +7596,7 @@ var YearMonthPicker = ({
       },
       year
     );
-  }) }) }) });
+  }) });
 };
 var YearMonthPickerUncontrolled = ({
   displayedYearMonth,
@@ -7835,7 +7604,7 @@ var YearMonthPickerUncontrolled = ({
   ...props
 }) => {
   const [yearMonth, setYearMonth] = useOverwritableState(displayedYearMonth, onChange);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     YearMonthPicker,
     {
       displayedYearMonth: yearMonth,
@@ -7845,39 +7614,8 @@ var YearMonthPickerUncontrolled = ({
   );
 };
 
-// src/i18n/useHightideTranslation.ts
-import { combineTranslation, ICUUtil } from "@helpwave/internationalization";
-function useICUTranslation(translations, locale) {
-  translations = Array.isArray(translations) ? translations : [translations];
-  return function translate(key, values) {
-    try {
-      for (let i = 0; i < translations.length; i++) {
-        const localizedTranslation = translations[i][locale];
-        if (!localizedTranslation) continue;
-        const msg = localizedTranslation[key];
-        if (typeof msg === "string") {
-          return ICUUtil.interpret(msg, values);
-        }
-      }
-      console.warn(`useTranslation: No translation for key "${key}" found.`);
-    } catch (e) {
-      console.error(`useTranslation: Error translating key "${String(key)}"`, e);
-    }
-    return `{{${String(locale)}:${String(key)}}}`;
-  };
-}
-function useHightideTranslation(extensions, overwrites) {
-  const { locale: inferredLocale } = useLocale();
-  const locale = overwrites?.locale ?? inferredLocale;
-  const translationExtensions = ArrayUtil.resolveSingleOrArray(extensions);
-  return combineTranslation([
-    ...translationExtensions,
-    hightideTranslation
-  ], locale);
-}
-
 // src/components/date/DatePicker.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var DatePicker = ({
   value = /* @__PURE__ */ new Date(),
   start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
@@ -7889,55 +7627,67 @@ var DatePicker = ({
   className = ""
 }) => {
   const { locale } = useLocale();
-  const translation = useHightideTranslation();
   const [displayedMonth, setDisplayedMonth] = useState5(value);
   const [displayMode, setDisplayMode] = useState5(initialDisplay);
   useEffect5(() => {
     setDisplayedMonth(value);
   }, [value]);
-  return /* @__PURE__ */ jsxs6("div", { className: clsx7("flex-col-4", className), children: [
-    /* @__PURE__ */ jsxs6("div", { className: "flex-row-2 items-center justify-between h-7", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: clsx7("flex-col-3", className), children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex-row-2 items-center justify-between", children: [
       /* @__PURE__ */ jsxs6(
-        TextButton,
+        Button,
         {
+          size: "small",
+          coloringStyle: "text",
           className: clsx7("flex-row-1 items-center cursor-pointer select-none", {
             "text-disabled": displayMode !== "day"
           }),
           onClick: () => setDisplayMode(displayMode === "day" ? "yearMonth" : "day"),
           children: [
             `${new Intl.DateTimeFormat(LocalizationUtil.localToLanguage(locale), { month: "long" }).format(displayedMonth)} ${displayedMonth.getFullYear()}`,
-            /* @__PURE__ */ jsx8(ChevronDown2, { size: 16 })
+            /* @__PURE__ */ jsx7(ChevronDown2, { size: 16 })
           ]
         }
       ),
       displayMode === "day" && /* @__PURE__ */ jsxs6("div", { className: "flex-row-2 justify-end", children: [
-        /* @__PURE__ */ jsx8(
-          SolidButton,
+        /* @__PURE__ */ jsx7(
+          Button,
+          {
+            size: "small",
+            coloringStyle: "tonal",
+            onClick: () => {
+              const newDate = /* @__PURE__ */ new Date();
+              newDate.setHours(value.getHours(), value.getMinutes());
+              onChange(newDate);
+            },
+            children: /* @__PURE__ */ jsx7(Calendar, { className: "size-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          Button,
           {
             size: "small",
-            color: "primary",
             disabled: !isInTimeSpan(subtractDuration(displayedMonth, { months: 1 }), start, end),
             onClick: () => {
               setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ jsx8(ArrowUp, { size: 20 })
+            children: /* @__PURE__ */ jsx7(ArrowUp, { size: 20 })
           }
         ),
-        /* @__PURE__ */ jsx8(
-          SolidButton,
+        /* @__PURE__ */ jsx7(
+          Button,
           {
             size: "small",
-            color: "primary",
             disabled: !isInTimeSpan(addDuration(displayedMonth, { months: 1 }), start, end),
             onClick: () => {
               setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
             },
-            children: /* @__PURE__ */ jsx8(ArrowDown, { size: 20 })
+            children: /* @__PURE__ */ jsx7(ArrowDown, { size: 20 })
           }
         )
       ] })
     ] }),
-    displayMode === "yearMonth" ? /* @__PURE__ */ jsx8(
+    displayMode === "yearMonth" ? /* @__PURE__ */ jsx7(
       YearMonthPicker,
       {
         ...yearMonthPickerProps,
@@ -7949,33 +7699,19 @@ var DatePicker = ({
           setDisplayMode("day");
         }
       }
-    ) : /* @__PURE__ */ jsxs6("div", { children: [
-      /* @__PURE__ */ jsx8(
-        DayPicker,
-        {
-          ...dayPickerProps,
-          displayedMonth,
-          start,
-          end,
-          selected: value,
-          onChange: (date) => {
-            onChange?.(date);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx8("div", { className: "mt-2", children: /* @__PURE__ */ jsx8(
-        TextButton,
-        {
-          color: "primary",
-          onClick: () => {
-            const newDate = /* @__PURE__ */ new Date();
-            newDate.setHours(value.getHours(), value.getMinutes());
-            onChange(newDate);
-          },
-          children: translation("time.today")
+    ) : /* @__PURE__ */ jsx7(
+      DayPicker,
+      {
+        ...dayPickerProps,
+        displayedMonth,
+        start,
+        end,
+        selected: value,
+        onChange: (date) => {
+          onChange?.(date);
         }
-      ) })
-    ] })
+      }
+    )
   ] });
 };
 var DatePickerUncontrolled = ({
@@ -7984,7 +7720,7 @@ var DatePickerUncontrolled = ({
   ...props
 }) => {
   const [date, setDate] = useOverwritableState(value, onChange);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     DatePicker,
     {
       ...props,
@@ -7994,8 +7730,39 @@ var DatePickerUncontrolled = ({
   );
 };
 
+// src/i18n/useHightideTranslation.ts
+import { combineTranslation, ICUUtil } from "@helpwave/internationalization";
+function useICUTranslation(translations, locale) {
+  translations = Array.isArray(translations) ? translations : [translations];
+  return function translate(key, values) {
+    try {
+      for (let i = 0; i < translations.length; i++) {
+        const localizedTranslation = translations[i][locale];
+        if (!localizedTranslation) continue;
+        const msg = localizedTranslation[key];
+        if (typeof msg === "string") {
+          return ICUUtil.interpret(msg, values);
+        }
+      }
+      console.warn(`useTranslation: No translation for key "${key}" found.`);
+    } catch (e) {
+      console.error(`useTranslation: Error translating key "${String(key)}"`, e);
+    }
+    return `{{${String(locale)}:${String(key)}}}`;
+  };
+}
+function useHightideTranslation(extensions, overwrites) {
+  const { locale: inferredLocale } = useLocale();
+  const locale = overwrites?.locale ?? inferredLocale;
+  const translationExtensions = ArrayUtil.resolveSingleOrArray(extensions);
+  return combineTranslation([
+    ...translationExtensions,
+    hightideTranslation
+  ], locale);
+}
+
 // src/components/date/TimeDisplay.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var TimeDisplay = ({
   date,
   mode = "daysFromToday"
@@ -8032,26 +7799,25 @@ var TimeDisplay = ({
   } else {
     fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
   }
-  return /* @__PURE__ */ jsx9("span", { children: fullString });
+  return /* @__PURE__ */ jsx8("span", { children: fullString });
 };
 
 // src/components/date/TimePicker.tsx
 import { useEffect as useEffect6, useRef as useRef2 } from "react";
-import { Scrollbars as Scrollbars2 } from "react-custom-scrollbars-2";
 import clsx8 from "clsx";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var TimePicker = ({
   time = /* @__PURE__ */ new Date(),
   onChange,
   is24HourFormat = true,
   minuteIncrement = "5min",
-  maxHeight = 300,
+  maxHeight = 280,
   className = ""
 }) => {
   const minuteRef = useRef2(null);
   const hourRef = useRef2(null);
   const isPM = time.getHours() >= 11;
-  const hours = is24HourFormat ? range(24) : range([1, 12], { exclusiveEnd: false });
+  const hours = is24HourFormat ? range(24) : range(12);
   let minutes = range(60);
   useEffect6(() => {
     const scrollToItem = () => {
@@ -8098,55 +7864,55 @@ var TimePicker = ({
       break;
   }
   const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - time.getMinutes()) < Math.abs(item2 - time.getMinutes()));
-  const style = (selected) => clsx8(
-    "chip-full hover:brightness-90 hover:bg-primary hover:text-on-primary rounded-md mr-3",
-    { "bg-primary text-on-primary": selected, "bg-white text-black": !selected }
-  );
   const onChangeWrapper = (transformer) => {
     const newDate = new Date(time);
     transformer(newDate);
     onChange?.(newDate);
   };
-  return /* @__PURE__ */ jsxs7("div", { className: clsx8("flex-row-2 w-fit min-w-[150px] select-none", className), children: [
-    /* @__PURE__ */ jsx10(Scrollbars2, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx10("div", { className: "flex-col-1 h-full", children: hours.map((hour) => {
-      const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
-      return /* @__PURE__ */ jsx10(
-        "button",
+  return /* @__PURE__ */ jsxs7("div", { className: clsx8("flex-row-2 w-fit min-w-[150px] select-none overflow-hidden", className), children: [
+    /* @__PURE__ */ jsx9("div", { className: "flex-col-1 h-full overflow-y-auto min-w-16", children: hours.map((hour) => {
+      const isSelected = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
+      return /* @__PURE__ */ jsx9(
+        Button,
         {
-          ref: currentHour ? hourRef : void 0,
-          className: style(currentHour),
+          size: "small",
+          color: isSelected ? "primary" : "neutral",
+          ref: isSelected ? hourRef : void 0,
           onClick: () => onChangeWrapper((newDate) => newDate.setHours(hour + (!is24HourFormat && isPM ? 12 : 0))),
           children: hour.toString().padStart(2, "0")
         },
         hour
       );
-    }) }) }),
-    /* @__PURE__ */ jsx10(Scrollbars2, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx10("div", { className: "flex-col-1 h-full", children: minutes.map((minute) => {
-      const currentMinute = minute === closestMinute;
-      return /* @__PURE__ */ jsx10(
-        "button",
+    }) }),
+    /* @__PURE__ */ jsx9("div", { className: "flex-col-1 h-full overflow-y-auto min-w-16", children: minutes.map((minute) => {
+      const isSelected = minute === closestMinute;
+      return /* @__PURE__ */ jsx9(
+        Button,
         {
-          ref: currentMinute ? minuteRef : void 0,
-          className: style(currentMinute),
+          size: "small",
+          color: isSelected ? "primary" : "neutral",
+          ref: isSelected ? minuteRef : void 0,
           onClick: () => onChangeWrapper((newDate) => newDate.setMinutes(minute)),
           children: minute.toString().padStart(2, "0")
         },
         minute + minuteIncrement
       );
-    }) }) }),
-    !is24HourFormat && /* @__PURE__ */ jsxs7("div", { className: "flex-col-1", children: [
-      /* @__PURE__ */ jsx10(
-        "button",
+    }) }),
+    !is24HourFormat && /* @__PURE__ */ jsxs7("div", { className: "flex-col-1 min-w-16", children: [
+      /* @__PURE__ */ jsx9(
+        Button,
         {
-          className: style(!isPM),
+          size: "small",
+          color: !isPM ? "primary" : "neutral",
           onClick: () => onChangeWrapper((newDate) => isPM && newDate.setHours(newDate.getHours() - 12)),
           children: "AM"
         }
       ),
-      /* @__PURE__ */ jsx10(
-        "button",
+      /* @__PURE__ */ jsx9(
+        Button,
         {
-          className: style(isPM),
+          size: "small",
+          color: isPM ? "primary" : "neutral",
           onClick: () => onChangeWrapper((newDate) => !isPM && newDate.setHours(newDate.getHours() + 12)),
           children: "PM"
         }
@@ -8160,7 +7926,7 @@ var TimePickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(time, onChange);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     TimePicker,
     {
       ...props,
@@ -8175,7 +7941,7 @@ import clsx10 from "clsx";
 
 // src/components/dialog/Dialog.tsx
 import { useId as useId3 } from "react";
-import { useEffect as useEffect10, useRef as useRef4, useState as useState9 } from "react";
+import { useEffect as useEffect11, useRef as useRef4, useState as useState10 } from "react";
 import clsx9 from "clsx";
 import { X } from "lucide-react";
 
@@ -8412,7 +8178,58 @@ var useLogOnce = (message, condition, options) => {
 
 // src/components/dialog/Dialog.tsx
 import { createPortal } from "react-dom";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+
+// src/hooks/useZIndexRegister.ts
+import { useEffect as useEffect10, useMemo as useMemo2, useState as useState9 } from "react";
+var ZIndexRegistry = class _ZIndexRegistry {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Set();
+  }
+  static {
+    this.instance = null;
+  }
+  static getInstance() {
+    if (!_ZIndexRegistry.instance) {
+      _ZIndexRegistry.instance = new _ZIndexRegistry();
+    }
+    return _ZIndexRegistry.instance;
+  }
+  register(callback) {
+    this.listeners.add(callback);
+    this.notify();
+  }
+  deregister(callback) {
+    this.listeners.delete(callback);
+    this.notify();
+  }
+  notify() {
+    let i = 100;
+    for (const callback of this.listeners) {
+      callback(i++);
+    }
+  }
+};
+function useZIndexRegister(isActive) {
+  const [zIndex, setZIndex] = useState9(0);
+  const zIndexRegistry = useMemo2(() => ZIndexRegistry.getInstance(), []);
+  useEffect10(() => {
+    if (!isActive) {
+      return;
+    }
+    function callback(zIndex2) {
+      setZIndex(zIndex2);
+    }
+    zIndexRegistry.register(callback);
+    return () => {
+      zIndexRegistry.deregister(callback);
+      setZIndex(0);
+    };
+  }, [isActive, zIndexRegistry]);
+  return zIndex;
+}
+
+// src/components/dialog/Dialog.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var Dialog = ({
   children,
   isOpen,
@@ -8427,11 +8244,11 @@ var Dialog = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [visible, setVisible] = useState9(isOpen);
+  const [visible, setVisible] = useState10(isOpen);
   const generatedId = useId3();
   const id = props.id ?? generatedId;
   const ref = useRef4(null);
-  useEffect10(() => {
+  useEffect11(() => {
     if (isOpen) {
       setVisible(true);
     } else {
@@ -8450,6 +8267,7 @@ var Dialog = ({
     active: visible,
     focusFirst: true
   });
+  const zIndex = useZIndexRegister(isOpen);
   const positionMap = {
     top: "fixed top-8 left-1/2 -translate-x-1/2",
     center: "fixed left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2",
@@ -8458,89 +8276,98 @@ var Dialog = ({
   const positionStyle = positionMap[position];
   if (!visible) return;
   return createPortal(
-    /* @__PURE__ */ jsxs8("div", { id: `dialog-container-${id}`, className: clsx9("fixed inset-0 h-screen w-screen", containerClassName), children: [
-      /* @__PURE__ */ jsx11(
-        "div",
-        {
-          id: `dialog-background-${id}`,
-          hidden: !visible,
-          className: clsx9(
-            "fixed inset-0 h-screen w-screen bg-overlay-shadow",
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        id: `dialog-container-${id}`,
+        className: clsx9("fixed inset-0 h-screen w-screen", containerClassName),
+        style: { zIndex },
+        children: [
+          /* @__PURE__ */ jsx10(
+            "div",
             {
-              "motion-safe:animate-fade-in": isOpen,
-              "motion-safe:animate-fade-out": !isOpen
-            },
-            backgroundClassName
-          ),
-          onAnimationEnd: () => {
-            if (!isOpen) {
-              setVisible(false);
-            }
-          },
-          onClick: onCloseWrapper,
-          "aria-hidden": true
-        }
-      ),
-      /* @__PURE__ */ jsxs8(
-        "div",
-        {
-          ...props,
-          id: `dialog-${id}`,
-          ref,
-          hidden: !visible,
-          onKeyDown: (event) => {
-            if (event.key === "Escape") {
-              onCloseWrapper();
-            }
-          },
-          onAnimationEnd: () => {
-            if (!isOpen) {
-              setVisible(false);
+              id: `dialog-background-${id}`,
+              hidden: !visible,
+              className: clsx9(
+                "fixed inset-0 h-screen w-screen bg-overlay-shadow",
+                {
+                  "motion-safe:animate-fade-in": isOpen,
+                  "motion-safe:animate-fade-out": !isOpen
+                },
+                backgroundClassName
+              ),
+              onAnimationEnd: () => {
+                if (!isOpen) {
+                  setVisible(false);
+                }
+              },
+              onClick: onCloseWrapper,
+              "aria-hidden": true
             }
-          },
-          className: clsx9(
-            "flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)]",
-            {
-              "motion-safe:animate-pop-in": isOpen,
-              "motion-safe:animate-pop-out": !isOpen
-            },
-            positionStyle,
-            props.className
           ),
-          children: [
-            /* @__PURE__ */ jsx11("div", { className: "typography-title-lg mr-8", children: titleElement }),
-            description && /* @__PURE__ */ jsx11("div", { className: "text-description", children: description }),
-            isModal && /* @__PURE__ */ jsx11(
-              "div",
-              {
-                className: "absolute top-0 right-0",
-                style: {
-                  paddingTop: "inherit",
-                  paddingRight: "inherit"
+          /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              ...props,
+              id: `dialog-${id}`,
+              ref,
+              hidden: !visible,
+              onKeyDown: (event) => {
+                if (event.key === "Escape") {
+                  onCloseWrapper();
+                }
+              },
+              onAnimationEnd: () => {
+                if (!isOpen) {
+                  setVisible(false);
+                }
+              },
+              className: clsx9(
+                "flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)]",
+                {
+                  "motion-safe:animate-pop-in": isOpen,
+                  "motion-safe:animate-pop-out": !isOpen
                 },
-                children: /* @__PURE__ */ jsx11(
-                  IconButton,
+                positionStyle,
+                props.className
+              ),
+              children: [
+                /* @__PURE__ */ jsx10("div", { className: "typography-title-lg mr-8", children: titleElement }),
+                description && /* @__PURE__ */ jsx10("div", { className: "text-description", children: description }),
+                isModal && /* @__PURE__ */ jsx10(
+                  "div",
                   {
-                    color: "neutral",
-                    size: "tiny",
-                    "aria-label": translation("close"),
-                    onClick: onCloseWrapper,
-                    children: /* @__PURE__ */ jsx11(X, {})
+                    className: "absolute top-0 right-0",
+                    style: {
+                      paddingTop: "inherit",
+                      paddingRight: "inherit"
+                    },
+                    children: /* @__PURE__ */ jsx10(
+                      Button,
+                      {
+                        layout: "icon",
+                        color: "neutral",
+                        size: "tiny",
+                        "aria-label": translation("close"),
+                        onClick: onCloseWrapper,
+                        children: /* @__PURE__ */ jsx10(X, {})
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            children
-          ]
-        }
-      )
-    ] }),
+                ),
+                children
+              ]
+            }
+          )
+        ]
+      }
+    ),
     document.body
   );
 };
 
 // src/components/dialog/ConfirmDialog.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var ConfirmDialog = ({
   children,
   onCancel,
@@ -8559,10 +8386,10 @@ var ConfirmDialog = ({
     primary: "primary"
   };
   return /* @__PURE__ */ jsxs9(Dialog, { ...restProps, onClose: onCancel, className: clsx10("justify-between", className), children: [
-    /* @__PURE__ */ jsx12("div", { className: "flex-col-2 grow", children }),
+    /* @__PURE__ */ jsx11("div", { className: "flex-col-2 grow", children }),
     /* @__PURE__ */ jsxs9("div", { className: "flex-row-4 mt-3 justify-end", children: [
-      onCancel && /* @__PURE__ */ jsx12(
-        SolidButton,
+      onCancel && /* @__PURE__ */ jsx11(
+        Button,
         {
           color: buttonOverwrites?.[0].color ?? "neutral",
           onClick: onCancel,
@@ -8570,8 +8397,8 @@ var ConfirmDialog = ({
           children: buttonOverwrites?.[0].text ?? translation("cancel")
         }
       ),
-      onDecline && /* @__PURE__ */ jsx12(
-        SolidButton,
+      onDecline && /* @__PURE__ */ jsx11(
+        Button,
         {
           color: buttonOverwrites?.[1].color ?? "negative",
           onClick: onDecline,
@@ -8579,8 +8406,8 @@ var ConfirmDialog = ({
           children: buttonOverwrites?.[1].text ?? translation("decline")
         }
       ),
-      /* @__PURE__ */ jsx12(
-        SolidButton,
+      /* @__PURE__ */ jsx11(
+        Button,
         {
           color: buttonOverwrites?.[2].color ?? mapping[confirmType],
           onClick: onConfirm,
@@ -8593,7 +8420,7 @@ var ConfirmDialog = ({
 };
 
 // src/components/dialog/DiscardChangesDialog.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var DiscardChangesDialog = ({
   children,
   onCancel,
@@ -8604,7 +8431,7 @@ var DiscardChangesDialog = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx12(
     ConfirmDialog,
     {
       ...props,
@@ -8624,13 +8451,13 @@ import { forwardRef as forwardRef3, useImperativeHandle, useRef as useRef5 } fro
 import clsx11 from "clsx";
 
 // src/hooks/useDelay.ts
-import { useEffect as useEffect11, useState as useState10 } from "react";
+import { useEffect as useEffect12, useState as useState11 } from "react";
 var defaultOptions2 = {
   delay: 3e3,
   disabled: false
 };
 function useDelay(options) {
-  const [timer, setTimer] = useState10(void 0);
+  const [timer, setTimer] = useState11(void 0);
   const { delay, disabled } = {
     ...defaultOptions2,
     ...options
@@ -8649,12 +8476,12 @@ function useDelay(options) {
       setTimer(void 0);
     }, delay));
   };
-  useEffect11(() => {
+  useEffect12(() => {
     return () => {
       clearTimeout(timer);
     };
   }, [timer]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (disabled) {
       clearTimeout(timer);
       setTimer(void 0);
@@ -8721,7 +8548,7 @@ function useFocusManagement() {
 }
 
 // src/components/user-action/input/Input.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var defaultEditCompleteOptions = {
   allowEnterComplete: false,
   onBlur: true,
@@ -8753,7 +8580,7 @@ var Input = forwardRef3(function Input2({
   const innerRef = useRef5(null);
   useImperativeHandle(forwardedRef, () => innerRef.current);
   const { focusNext } = useFocusManagement();
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx13(
     "input",
     {
       ...props,
@@ -8808,7 +8635,7 @@ var InputUncontrolled = ({
   ...props
 }) => {
   const [usedValue, setUsedValue] = useOverwritableState(value, onChangeText);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx13(
     Input,
     {
       ...props,
@@ -8819,34 +8646,34 @@ var InputUncontrolled = ({
 };
 
 // src/components/dialog/InputDialog.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var InputDialog = ({
   inputs,
   buttonOverwrites,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx14(
     ConfirmDialog,
     {
       buttonOverwrites,
       ...props,
-      children: inputs.map((inputProps, index) => /* @__PURE__ */ jsx15(Input, { ...inputProps }, `input ${index}`))
+      children: inputs.map((inputProps, index) => /* @__PURE__ */ jsx14(Input, { ...inputProps }, `input ${index}`))
     }
   );
 };
 
-// src/components/user-action/select/Select.tsx
+// src/components/user-action/Select.tsx
 import {
   createContext as createContext2,
   forwardRef as forwardRef4,
   useCallback as useCallback6,
   useContext as useContext2,
-  useEffect as useEffect13,
+  useEffect as useEffect14,
   useId as useId4,
   useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo2,
+  useMemo as useMemo3,
   useRef as useRef6,
-  useState as useState12
+  useState as useState13
 } from "react";
 import clsx13 from "clsx";
 
@@ -8855,61 +8682,37 @@ var match = (key, values) => {
   return values[key];
 };
 
-// src/components/user-action/select/Select.tsx
+// src/components/user-action/Select.tsx
 import { CheckIcon, Plus, XIcon } from "lucide-react";
 
 // src/components/layout/Chip.tsx
 import clsx12 from "clsx";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-var chipColors = ["default", "dark", "red", "yellow", "green", "blue", "pink", "orange"];
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var chipColors = ButtonUtil.colors;
 var ChipUtil = {
   colors: chipColors
 };
 var Chip = ({
   children,
   trailingIcon,
-  color = "default",
-  size = "md",
-  icon = false,
+  color = "neutral",
+  size = "medium",
   variant = "normal",
   className = "",
   ...restProps
 }) => {
-  const colorMapping = {
-    default: "text-tag-default-text bg-tag-default-background",
-    dark: "text-tag-dark-text bg-tag-dark-background",
-    red: "text-tag-red-text bg-tag-red-background",
-    yellow: "text-tag-yellow-text bg-tag-yellow-background",
-    green: "text-tag-green-text bg-tag-green-background",
-    blue: "text-tag-blue-text bg-tag-blue-background",
-    pink: "text-tag-pink-text bg-tag-pink-background",
-    orange: "text-tag-orange-text bg-tag-orange-background"
-  }[color];
-  const colorMappingIcon = {
-    default: "text-tag-default-icon",
-    dark: "text-tag-dark-icon",
-    red: "text-tag-red-icon",
-    yellow: "text-tag-yellow-icon",
-    green: "text-tag-green-icon",
-    blue: "text-tag-blue-icon",
-    pink: "text-tag-pink-icon",
-    orange: "text-tag-orange-icon"
-  }[color];
+  const colorMapping = ButtonUtil.colorClasses[color];
   return /* @__PURE__ */ jsxs10(
     "div",
     {
       ...restProps,
       className: clsx12(
-        `flex-row-0 w-fit font-semibold`,
+        `flex-row-0 w-fit font-semibold coloring-solid`,
         colorMapping,
-        !icon ? {
-          "px-1 py-0.5": size === "sm",
-          "px-2 py-1": size === "md",
-          "px-4 py-2": size === "lg"
-        } : {
-          "p-0.5": size === "sm",
-          "p-1": size === "md",
-          "p-2": size === "lg"
+        {
+          "chip-sm": size === "small",
+          "chip-md": size === "medium",
+          "chip-lg": size === "large"
         },
         {
           "rounded-md": variant === "normal",
@@ -8919,7 +8722,7 @@ var Chip = ({
       ),
       children: [
         children,
-        trailingIcon && /* @__PURE__ */ jsx16("span", { className: colorMappingIcon, children: trailingIcon })
+        trailingIcon
       ]
     }
   );
@@ -8928,12 +8731,12 @@ var ChipList = ({
   list,
   className = ""
 }) => {
-  return /* @__PURE__ */ jsx16("div", { className: clsx12("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx15("div", { className: clsx12("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ jsx15(
     Chip,
     {
       ...value,
-      color: value.color ?? "default",
-      variant: value.variant ?? "normal",
+      color: value.color,
+      variant: value.variant,
       children: value.children
     },
     index
@@ -8941,7 +8744,7 @@ var ChipList = ({
 };
 
 // src/hooks/useFloatingElement.ts
-import { useCallback as useCallback5, useEffect as useEffect12, useState as useState11 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect13, useState as useState12 } from "react";
 
 // src/utils/math.ts
 var clamp = (value, range2 = [0, 1]) => {
@@ -9004,7 +8807,7 @@ function useFloatingElement({
   screenPadding = 16,
   gap = 4
 }) {
-  const [style, setStyle] = useState11();
+  const [style, setStyle] = useState12();
   const isMounted = useIsMounted();
   const calculate = useCallback5(() => {
     const containerRect = containerRef.current.getBoundingClientRect();
@@ -9036,14 +8839,14 @@ function useFloatingElement({
   }, [anchorRef, containerRef, gap, horizontalAlignment, screenPadding, verticalAlignment, windowRef]);
   const height = containerRef.current?.getBoundingClientRect().height;
   const width = containerRef.current?.getBoundingClientRect().width;
-  useEffect12(() => {
+  useEffect13(() => {
     if (active && isMounted) {
       calculate();
     } else {
       setStyle(void 0);
     }
   }, [calculate, active, isMounted, height, width]);
-  useEffect12(() => {
+  useEffect13(() => {
     window.addEventListener("resize", calculate);
     let timeout;
     if (isPolling) {
@@ -9059,9 +8862,9 @@ function useFloatingElement({
   return style;
 }
 
-// src/components/user-action/select/Select.tsx
+// src/components/user-action/Select.tsx
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var defaultToggleOpenOptions = {
   highlightStartPositionBehavior: "first"
 };
@@ -9089,15 +8892,15 @@ var SelectRoot = ({
   const triggerRef = useRef6(null);
   const generatedId = useId4();
   const usedId = id ?? generatedId;
-  const [internalState, setInternalState] = useState12({
+  const [internalState, setInternalState] = useState13({
     isOpen,
     options: []
   });
-  const selectedValues = useMemo2(
+  const selectedValues = useMemo3(
     () => isMultiSelect ? values ?? [] : [value].filter(Boolean),
     [isMultiSelect, value, values]
   );
-  const selectedOptions = useMemo2(
+  const selectedOptions = useMemo3(
     () => selectedValues.map((value2) => internalState.options.find((option) => value2 === option.value)).filter(Boolean),
     [selectedValues, internalState.options]
   );
@@ -9226,7 +9029,7 @@ var SelectRoot = ({
       highlightedValue
     }));
   };
-  useEffect13(() => {
+  useEffect14(() => {
     if (!internalState.highlightedValue) return;
     const highlighted = internalState.options.find((value2) => value2.value === internalState.highlightedValue);
     if (highlighted) {
@@ -9252,7 +9055,7 @@ var SelectRoot = ({
       toggleOpen
     }
   };
-  return /* @__PURE__ */ jsx17(SelectContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx16(SelectContext.Provider, { value: contextValue, children });
 };
 var SelectOption = forwardRef4(
   function SelectOption2({ children, value, disabled = false, iconAppearance, className, ...restProps }, ref) {
@@ -9261,7 +9064,7 @@ var SelectOption = forwardRef4(
     const itemRef = useRef6(null);
     iconAppearance ??= config.iconAppearance;
     const label = children ?? value;
-    useEffect13(() => {
+    useEffect14(() => {
       register({
         value,
         label,
@@ -9311,7 +9114,7 @@ var SelectOption = forwardRef4(
           }
         },
         children: [
-          iconAppearance === "left" && /* @__PURE__ */ jsx17(
+          iconAppearance === "left" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ jsx16(
             CheckIcon,
             {
               className: clsx13("w-4 h-4", { "opacity-0": !isSelected || disabled }),
@@ -9319,7 +9122,7 @@ var SelectOption = forwardRef4(
             }
           ),
           label,
-          iconAppearance === "right" && /* @__PURE__ */ jsx17(
+          iconAppearance === "right" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ jsx16(
             CheckIcon,
             {
               className: clsx13("w-4 h-4", { "opacity-0": !isSelected || disabled }),
@@ -9337,7 +9140,7 @@ var SelectButton = forwardRef4(function SelectButton2({ placeholder, selectedDis
   const { register, unregister, toggleOpen } = trigger;
   const innerRef = useRef6(null);
   useImperativeHandle2(ref, () => innerRef.current);
-  useEffect13(() => {
+  useEffect14(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -9391,11 +9194,11 @@ var SelectButton = forwardRef4(function SelectButton2({ placeholder, selectedDis
       "aria-expanded": state.isOpen,
       "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
       children: [
-        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ jsx17("div", { className: clsx13("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ jsxs11("span", { className: "flex-row-0", children: [
+        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ jsx16("div", { className: clsx13("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ jsxs11("span", { className: "flex-row-0", children: [
           label,
-          index < state.value.length - 1 && /* @__PURE__ */ jsx17("span", { children: "," })
+          index < state.value.length - 1 && /* @__PURE__ */ jsx16("span", { children: "," })
         ] }, value)) }) : placeholder ?? translation("clickToSelect"),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx16(
           ExpansionIcon,
           {
             isExpanded: state.isOpen,
@@ -9415,7 +9218,7 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
   const { register, unregister, toggleOpen } = trigger;
   const innerRef = useRef6(null);
   useImperativeHandle2(ref, () => innerRef.current);
-  useEffect13(() => {
+  useEffect14(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -9437,21 +9240,22 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
       children: [
         state.selectedOptions.map(({ value, label }) => /* @__PURE__ */ jsxs11(Chip, { className: "gap-x-2", children: [
           label,
-          /* @__PURE__ */ jsx17(
-            TextButton,
+          /* @__PURE__ */ jsx16(
+            Button,
             {
               onClick: () => {
                 item.toggleSelection(value, false);
               },
               size: "none",
               color: "negative",
+              coloringStyle: "text",
               className: "flex-row-0 items-center px-0.5 py-0.5 w-6 h-6 rounded",
-              children: /* @__PURE__ */ jsx17(XIcon, { className: "w-5 h-5" })
+              children: /* @__PURE__ */ jsx16(XIcon, { className: "w-5 h-5" })
             }
           )
         ] }, value)),
-        /* @__PURE__ */ jsx17(
-          IconButton,
+        /* @__PURE__ */ jsx16(
+          Button,
           {
             id: state.id,
             onClick: () => toggleOpen(),
@@ -9464,6 +9268,7 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
                   toggleOpen(true, { highlightStartPositionBehavior: "last" });
               }
             },
+            layout: "icon",
             size: "small",
             color: "neutral",
             "aria-invalid": invalid,
@@ -9471,7 +9276,7 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
             "aria-haspopup": "listbox",
             "aria-expanded": state.isOpen,
             "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
-            children: /* @__PURE__ */ jsx17(Plus, {})
+            children: /* @__PURE__ */ jsx16(Plus, {})
           }
         )
       ]
@@ -9498,15 +9303,17 @@ var SelectContent = forwardRef4(
       container: innerRef,
       active: state.isOpen && !!position
     });
+    const zIndex = useZIndexRegister(state.isOpen);
     return createPortal2(
       /* @__PURE__ */ jsxs11(
         "div",
         {
           id: `select-container-${state.id}`,
           className: clsx13("fixed inset-0 w-screen h-screen", containerClassName),
+          style: { zIndex },
           hidden: !state.isOpen,
           children: [
-            /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx16(
               "div",
               {
                 id: `select-background-${state.id}`,
@@ -9514,7 +9321,7 @@ var SelectContent = forwardRef4(
                 className: clsx13("fixed inset-0 w-screen h-screen")
               }
             ),
-            /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx16(
               "ul",
               {
                 ...props,
@@ -9587,7 +9394,7 @@ var Select = forwardRef4(function Select2({
   ...props
 }, ref) {
   return /* @__PURE__ */ jsxs11(SelectRoot, { ...props, isMultiSelect: false, children: [
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx16(
       SelectButton,
       {
         ref,
@@ -9599,7 +9406,7 @@ var Select = forwardRef4(function Select2({
         }
       }
     ),
-    /* @__PURE__ */ jsx17(SelectContent, { ...contentPanelProps, children })
+    /* @__PURE__ */ jsx16(SelectContent, { ...contentPanelProps, children })
   ] });
 });
 var SelectUncontrolled = forwardRef4(function SelectUncontrolled2({
@@ -9608,7 +9415,7 @@ var SelectUncontrolled = forwardRef4(function SelectUncontrolled2({
   ...props
 }, ref) {
   const [value, setValue] = useOverwritableState(initialValue, onValueChanged);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx16(
     Select,
     {
       ...props,
@@ -9625,8 +9432,8 @@ var MultiSelect = forwardRef4(function MultiSelect2({
   ...props
 }, ref) {
   return /* @__PURE__ */ jsxs11(SelectRoot, { ...props, isMultiSelect: true, children: [
-    /* @__PURE__ */ jsx17(SelectButton, { ref, ...buttonProps }),
-    /* @__PURE__ */ jsx17(SelectContent, { ...contentPanelProps, children })
+    /* @__PURE__ */ jsx16(SelectButton, { ref, ...buttonProps }),
+    /* @__PURE__ */ jsx16(SelectContent, { ...contentPanelProps, children })
   ] });
 });
 var MultiSelectUncontrolled = forwardRef4(function MultiSelectUncontrolled2({
@@ -9635,7 +9442,7 @@ var MultiSelectUncontrolled = forwardRef4(function MultiSelectUncontrolled2({
   ...props
 }, ref) {
   const [values, setValues] = useOverwritableState(initialValues, onValuesChanged);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx16(
     MultiSelect,
     {
       ...props,
@@ -9652,8 +9459,8 @@ var MultiSelectChipDisplay = forwardRef4(function MultiSelectChipDisplay2({
   ...props
 }, ref) {
   return /* @__PURE__ */ jsxs11(SelectRoot, { ...props, isMultiSelect: true, children: [
-    /* @__PURE__ */ jsx17(SelectChipDisplay, { ref, ...chipDisplayProps }),
-    /* @__PURE__ */ jsx17(SelectContent, { ...contentPanelProps, children })
+    /* @__PURE__ */ jsx16(SelectChipDisplay, { ref, ...chipDisplayProps }),
+    /* @__PURE__ */ jsx16(SelectContent, { ...contentPanelProps, children })
   ] });
 });
 var MultiSelectChipDisplayUncontrolled = forwardRef4(function MultiSelectChipDisplayUncontrolled2({
@@ -9662,7 +9469,7 @@ var MultiSelectChipDisplayUncontrolled = forwardRef4(function MultiSelectChipDis
   ...props
 }, ref) {
   const [values, setValues] = useOverwritableState(initialValues, onValuesChanged);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx16(
     MultiSelectChipDisplay,
     {
       ...props,
@@ -9674,7 +9481,7 @@ var MultiSelectChipDisplayUncontrolled = forwardRef4(function MultiSelectChipDis
 });
 
 // src/components/dialog/LanguageDialog.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var LanguageDialog = ({
   onClose,
   titleOverwrite,
@@ -9683,7 +9490,7 @@ var LanguageDialog = ({
 }) => {
   const { locale, setLocale } = useLocale();
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(
     Dialog,
     {
       titleElement: titleOverwrite ?? translation("language"),
@@ -9691,19 +9498,18 @@ var LanguageDialog = ({
       onClose,
       ...props,
       children: /* @__PURE__ */ jsxs12("div", { className: "w-64", children: [
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx17(
           Select,
           {
             value: locale,
             onValueChanged: (language) => setLocale(language),
-            contentPanelProps: { containerClassName: "z-200" },
             buttonProps: {
               selectedDisplay: (locale2) => LocalizationUtil.languagesLocalNames[locale2]
             },
-            children: LocalizationUtil.locals.map((local) => /* @__PURE__ */ jsx18(SelectOption, { value: local, children: LocalizationUtil.languagesLocalNames[local] }, local))
+            children: LocalizationUtil.locals.map((local) => /* @__PURE__ */ jsx17(SelectOption, { value: local, children: LocalizationUtil.languagesLocalNames[local] }, local))
           }
         ),
-        /* @__PURE__ */ jsx18("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx18(SolidButton, { color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ jsx17("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx17(Button, { color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
@@ -9714,8 +9520,8 @@ import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
 import clsx14 from "clsx";
 
 // src/theming/useTheme.tsx
-import { createContext as createContext3, useCallback as useCallback7, useContext as useContext3, useEffect as useEffect14, useMemo as useMemo3, useState as useState13 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { createContext as createContext3, useCallback as useCallback7, useContext as useContext3, useEffect as useEffect15, useMemo as useMemo4, useState as useState14 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var themes = ["light", "dark", "system"];
 var ThemeUtil = {
   themes
@@ -9727,8 +9533,8 @@ var ThemeProvider = ({ children, theme }) => {
     setValue: setStoredTheme,
     deleteValue: deleteStoredTheme
   } = useLocalStorage("theme", "system");
-  const [themePreference, setThemePreference] = useState13("system");
-  const resolvedTheme = useMemo3(() => {
+  const [themePreference, setThemePreference] = useState14("system");
+  const resolvedTheme = useMemo4(() => {
     if (theme && theme !== "system") {
       return theme;
     }
@@ -9740,7 +9546,7 @@ var ThemeProvider = ({ children, theme }) => {
     }
     return "light";
   }, [storedTheme, theme, themePreference]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!theme) return;
     if (theme === "system") {
       deleteStoredTheme();
@@ -9748,7 +9554,7 @@ var ThemeProvider = ({ children, theme }) => {
       setStoredTheme(theme);
     }
   }, [theme]);
-  useEffect14(() => {
+  useEffect15(() => {
     document.documentElement.setAttribute("data-theme", resolvedTheme);
   }, [resolvedTheme]);
   const getPreference = useCallback7(() => {
@@ -9756,10 +9562,10 @@ var ThemeProvider = ({ children, theme }) => {
     const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
     setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     getPreference();
   }, [getPreference]);
-  useEffect14(() => {
+  useEffect15(() => {
     const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
     const noPrefQuery = window.matchMedia("(prefers-color-scheme: no-preference)");
@@ -9772,7 +9578,7 @@ var ThemeProvider = ({ children, theme }) => {
       noPrefQuery.removeEventListener("change", getPreference);
     };
   }, [getPreference]);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx18(
     ThemeContext.Provider,
     {
       value: {
@@ -9798,14 +9604,14 @@ var useTheme = () => {
 };
 
 // src/components/dialog/ThemeDialog.tsx
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var ThemeIcon = ({ theme, className }) => {
   if (theme === "dark") {
-    return /* @__PURE__ */ jsx20(MoonIcon, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx19(MoonIcon, { className: clsx14("w-4 h-4", className) });
   } else if (theme === "light") {
-    return /* @__PURE__ */ jsx20(SunIcon, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx19(SunIcon, { className: clsx14("w-4 h-4", className) });
   } else {
-    return /* @__PURE__ */ jsx20(MonitorCog, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx19(MonitorCog, { className: clsx14("w-4 h-4", className) });
   }
 };
 var ThemeDialog = ({
@@ -9816,7 +9622,7 @@ var ThemeDialog = ({
 }) => {
   const { theme, setTheme } = useTheme();
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx19(
     Dialog,
     {
       titleElement: titleOverwrite ?? translation("themes", { count: 1 }),
@@ -9824,29 +9630,26 @@ var ThemeDialog = ({
       onClose,
       ...props,
       children: /* @__PURE__ */ jsxs13("div", { className: "w-64", children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx19(
           Select,
           {
             value: theme,
             onValueChanged: (theme2) => setTheme(theme2),
             iconAppearance: "right",
-            contentPanelProps: {
-              containerClassName: "z-200"
-            },
             buttonProps: {
               selectedDisplay: (value) => /* @__PURE__ */ jsxs13("div", { className: "flex-row-2 items-center", children: [
-                /* @__PURE__ */ jsx20(ThemeIcon, { theme }),
+                /* @__PURE__ */ jsx19(ThemeIcon, { theme }),
                 translation("themeMode", { theme: value })
               ] }),
               className: "min-w-32"
             },
-            children: ThemeUtil.themes.map((theme2) => /* @__PURE__ */ jsx20(SelectOption, { value: theme2, className: "gap-x-6 justify-between", children: /* @__PURE__ */ jsxs13("div", { className: "flex-row-2 items-center", children: [
-              /* @__PURE__ */ jsx20(ThemeIcon, { theme: theme2 }),
+            children: ThemeUtil.themes.map((theme2) => /* @__PURE__ */ jsx19(SelectOption, { value: theme2, className: "gap-x-6 justify-between", children: /* @__PURE__ */ jsxs13("div", { className: "flex-row-2 items-center", children: [
+              /* @__PURE__ */ jsx19(ThemeIcon, { theme: theme2 }),
               translation("themeMode", { theme: theme2 })
             ] }) }, theme2))
           }
         ),
-        /* @__PURE__ */ jsx20("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx20(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ jsx19("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ jsx19(Button, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
@@ -9858,7 +9661,7 @@ import { clsx as clsx16 } from "clsx";
 
 // src/components/user-action/Label.tsx
 import clsx15 from "clsx";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var styleMapping = {
   md: "typography-label-md color-label-text",
   lg: "typography-label-lg color-label-text"
@@ -9869,11 +9672,11 @@ var Label = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx21("label", { ...props, className: clsx15(styleMapping[size], className), children });
+  return /* @__PURE__ */ jsx20("label", { ...props, className: clsx15(styleMapping[size], className), children });
 };
 
 // src/components/form/FormElementWrapper.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var FormElementWrapper = ({
   children,
   id,
@@ -9931,11 +9734,11 @@ var FormElementWrapper = ({
         className: clsx16("flex-row-1 items-start", labelProps?.className),
         children: [
           label,
-          required && /* @__PURE__ */ jsx22("div", { role: "none", className: "bg-primary w-2 h-2 rounded-full" })
+          required && /* @__PURE__ */ jsx21("div", { role: "none", className: "bg-primary w-2 h-2 rounded-full" })
         ]
       }
     ),
-    description && /* @__PURE__ */ jsx22(
+    description && /* @__PURE__ */ jsx21(
       "p",
       {
         ...descriptionProps,
@@ -9945,7 +9748,7 @@ var FormElementWrapper = ({
       }
     ),
     children(bag),
-    error && isShowingError && /* @__PURE__ */ jsx22(
+    error && isShowingError && /* @__PURE__ */ jsx21(
       "p",
       {
         ...errorProps,
@@ -9962,9 +9765,9 @@ var FormElementWrapper = ({
 
 // src/components/icons-and-geometry/Avatar.tsx
 import clsx17 from "clsx";
-import { useMemo as useMemo4, useState as useState14 } from "react";
+import { useMemo as useMemo5, useState as useState15 } from "react";
 import { UserIcon } from "lucide-react";
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var avtarSizeList = ["sm", "md", "lg", "xl"];
 var avatarSizeMapping = {
   sm: 18,
@@ -9989,8 +9792,8 @@ var Avatar = ({
   fullyRounded,
   className = ""
 }) => {
-  const [hasError, setHasError] = useState14(false);
-  const [isLoaded, setIsLoaded] = useState14(false);
+  const [hasError, setHasError] = useState15(false);
+  const [isLoaded, setIsLoaded] = useState15(false);
   const pixels = avatarSizeMapping[size];
   const sizeStyle = {
     minWidth: pixels,
@@ -9999,7 +9802,7 @@ var Avatar = ({
     maxHeight: pixels
   };
   const textClassName = textClassNameMapping[size];
-  const displayName = useMemo4(() => {
+  const displayName = useMemo5(() => {
     const maxLetters = size === "sm" ? 1 : 2;
     return (name ?? "").split(" ").filter((_, index) => index < maxLetters).map((value) => value[0]).join("").toUpperCase();
   }, [name, size]);
@@ -10018,7 +9821,7 @@ var Avatar = ({
       ),
       style: sizeStyle,
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx22(
           "img",
           {
             src: image?.avatarUrl,
@@ -10028,7 +9831,7 @@ var Avatar = ({
             onError: () => setHasError(true)
           }
         ),
-        name ? /* @__PURE__ */ jsx23("span", { className: textClassName, children: displayName }) : /* @__PURE__ */ jsx23(UserIcon, { size: Math.round(pixels * 3 / 4) })
+        name ? /* @__PURE__ */ jsx22("span", { className: textClassName, children: displayName }) : /* @__PURE__ */ jsx22(UserIcon, { size: Math.round(pixels * 3 / 4) })
       ]
     }
   );
@@ -10046,12 +9849,12 @@ var AvatarGroup = ({
   const notDisplayedProfiles = avatars.length - maxShownProfiles;
   const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1);
   return /* @__PURE__ */ jsxs15("div", { className: "flex-row-2 relative", style: { height: diameter + "px" }, children: [
-    /* @__PURE__ */ jsx23("div", { style: { width: avatarGroupWidth + "px" }, children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx22("div", { style: { width: avatarGroupWidth + "px" }, children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ jsx22(
       "div",
       {
         className: "absolute",
         style: { left: index * diameter * stackingOverlap + "px", zIndex: maxShownProfiles - index },
-        children: /* @__PURE__ */ jsx23(
+        children: /* @__PURE__ */ jsx22(
           Avatar,
           {
             ...avatar,
@@ -10063,7 +9866,7 @@ var AvatarGroup = ({
       },
       index
     )) }),
-    showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ jsx23(
+    showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ jsx22(
       "div",
       {
         className: clsx17(textClassNameMapping[size], "flex-row-2 truncate items-center"),
@@ -10078,7 +9881,7 @@ var AvatarGroup = ({
 
 // src/components/icons-and-geometry/Circle.tsx
 import clsx18 from "clsx";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var Circle = ({
   radius = 20,
   className = "bg-primary",
@@ -10086,7 +9889,7 @@ var Circle = ({
   ...restProps
 }) => {
   const size = radius * 2;
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       className: clsx18(`rounded-full`, className),
@@ -10101,15 +9904,15 @@ var Circle = ({
 };
 
 // src/components/icons-and-geometry/Ring.tsx
-import { useCallback as useCallback8, useEffect as useEffect15, useState as useState15 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect16, useState as useState16 } from "react";
 import clsx19 from "clsx";
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 var Ring = ({
   innerSize = 20,
   width = 7,
   className = "outline-primary"
 }) => {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       className: clsx19(`bg-transparent rounded-full outline`, className),
@@ -10130,7 +9933,7 @@ var AnimatedRing = ({
   onAnimationFinished,
   style
 }) => {
-  const [currentWidth, setCurrentWidth] = useState15(0);
+  const [currentWidth, setCurrentWidth] = useState16(0);
   const milliseconds = 1e3 * fillAnimationDuration;
   const animate = useCallback8((timestamp, startTime) => {
     const progress = Math.min((timestamp - startTime) / milliseconds, 1);
@@ -10146,12 +9949,12 @@ var AnimatedRing = ({
       }
     }
   }, [milliseconds, onAnimationFinished, repeating, width]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (currentWidth < width) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
   }, []);
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       className: "flex-row-2 items-center justify-center",
@@ -10160,7 +9963,7 @@ var AnimatedRing = ({
         height: `${innerSize + 2 * width}px`,
         ...style
       },
-      children: /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsx24(
         Ring,
         {
           innerSize,
@@ -10181,7 +9984,7 @@ var RingWave = ({
   onAnimationFinished,
   style
 }) => {
-  const [currentInnerSize, setCurrentInnerSize] = useState15(startInnerSize);
+  const [currentInnerSize, setCurrentInnerSize] = useState16(startInnerSize);
   const distance = endInnerSize - startInnerSize;
   const milliseconds = 1e3 * fillAnimationDuration;
   const animate = useCallback8((timestamp, startTime) => {
@@ -10201,12 +10004,12 @@ var RingWave = ({
       }
     }
   }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (currentInnerSize < endInnerSize) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
   }, []);
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       className: "flex-row-2 items-center justify-center",
@@ -10215,7 +10018,7 @@ var RingWave = ({
         height: `${endInnerSize + 2 * width}px`,
         ...style
       },
-      children: /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsx24(
         Ring,
         {
           innerSize: currentInnerSize,
@@ -10236,7 +10039,7 @@ var RadialRings = ({
   sizeCircle2 = 200,
   sizeCircle3 = 300
 }) => {
-  const [currentRing, setCurrentRing] = useState15(0);
+  const [currentRing, setCurrentRing] = useState16(0);
   const size = sizeCircle3;
   return /* @__PURE__ */ jsxs16(
     "div",
@@ -10247,7 +10050,7 @@ var RadialRings = ({
         height: `${sizeCircle3}px`
       },
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx24(
           Circle,
           {
             radius: sizeCircle1 / 2,
@@ -10258,7 +10061,7 @@ var RadialRings = ({
             }
           }
         ),
-        currentRing === 0 ? /* @__PURE__ */ jsx25(
+        currentRing === 0 ? /* @__PURE__ */ jsx24(
           AnimatedRing,
           {
             innerSize: sizeCircle1,
@@ -10278,7 +10081,7 @@ var RadialRings = ({
             }
           }
         ) : null,
-        currentRing === 2 ? /* @__PURE__ */ jsx25(
+        currentRing === 2 ? /* @__PURE__ */ jsx24(
           RingWave,
           {
             startInnerSize: sizeCircle1 - waveWidth,
@@ -10295,7 +10098,7 @@ var RadialRings = ({
             }
           }
         ) : null,
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx24(
           Circle,
           {
             radius: sizeCircle2 / 2,
@@ -10310,7 +10113,7 @@ var RadialRings = ({
             }
           }
         ),
-        currentRing === 1 ? /* @__PURE__ */ jsx25(
+        currentRing === 1 ? /* @__PURE__ */ jsx24(
           AnimatedRing,
           {
             innerSize: sizeCircle2 - 1,
@@ -10327,7 +10130,7 @@ var RadialRings = ({
             }
           }
         ) : null,
-        currentRing === 2 ? /* @__PURE__ */ jsx25(
+        currentRing === 2 ? /* @__PURE__ */ jsx24(
           RingWave,
           {
             startInnerSize: sizeCircle2,
@@ -10344,7 +10147,7 @@ var RadialRings = ({
             }
           }
         ) : null,
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx24(
           Circle,
           {
             radius: sizeCircle3 / 2,
@@ -10366,12 +10169,12 @@ var RadialRings = ({
 
 // src/components/icons-and-geometry/Tag.tsx
 var import_image = __toESM(require_image());
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var TagIcon = ({
   className,
   size = 16
 }) => {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx25(
     import_image.default,
     {
       style: { width: `${size}px`, height: `${size}px`, minWidth: `${size}px`, minHeight: `${size}px` },
@@ -10390,15 +10193,15 @@ import {
   forwardRef as forwardRef5,
   useCallback as useCallback9,
   useContext as useContext4,
-  useEffect as useEffect16,
+  useEffect as useEffect17,
   useId as useId6,
-  useMemo as useMemo5,
+  useMemo as useMemo6,
   useRef as useRef7,
-  useState as useState16
+  useState as useState17
 } from "react";
 import clsx20 from "clsx";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { Fragment, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var CarouselContext = createContext4(null);
 var useCarouselContext = () => {
   const context = useContext4(CarouselContext);
@@ -10426,7 +10229,7 @@ function CarouselTabs({
     onChange(newIndex);
     tabRefs.current[newIndex]?.focus();
   };
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: "flex-row-1 items-center justify-center w-full my-2",
@@ -10435,7 +10238,7 @@ function CarouselTabs({
       id: `${id}-tablist`,
       children: range(slideCount).map((index) => {
         const isSelected = currentIndex === index;
-        return /* @__PURE__ */ jsx27(
+        return /* @__PURE__ */ jsx26(
           "button",
           {
             id: `${id}-tab-${index}`,
@@ -10470,7 +10273,7 @@ var CarouselSlide = forwardRef5(
   }, ref) {
     const translation = useHightideTranslation();
     const { id, slideCount } = useCarouselContext();
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx26(
       "div",
       {
         ...props,
@@ -10508,14 +10311,14 @@ var Carousel = ({
 }) => {
   const translation = useHightideTranslation();
   const slideRefs = useRef7([]);
-  const [currentIndex, setCurrentIndex] = useState16(0);
-  const [hasFocus, setHasFocus] = useState16(false);
-  const [dragState, setDragState] = useState16();
+  const [currentIndex, setCurrentIndex] = useState17(0);
+  const [hasFocus, setHasFocus] = useState17(false);
+  const [dragState, setDragState] = useState17();
   const isPaused = hasFocus;
   const carouselContainerRef = useRef7(null);
-  const [disableClick, setDisableClick] = useState16(false);
+  const [disableClick, setDisableClick] = useState17(false);
   const timeOut = useRef7(void 0);
-  const length = useMemo5(() => children.length, [children]);
+  const length = useMemo6(() => children.length, [children]);
   const paddingItemCount = 3;
   const generatedId = "carousel" + useId6();
   const id = props.id ?? generatedId;
@@ -10526,7 +10329,7 @@ var Carousel = ({
   autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
   animationTime = Math.max(100, animationTime);
   autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime);
-  useEffect16(() => {
+  useEffect17(() => {
     const carousel = carouselContainerRef.current;
     if (carousel) {
       let onFocus = function() {
@@ -10554,7 +10357,7 @@ var Carousel = ({
   }, [currentIndex, isLooping, length]);
   const left = () => {
     if (canGoLeft()) {
-      setCurrentIndex(currentIndex - 1);
+      setCurrentIndex((currentIndex + length - 1) % length);
     }
   };
   const right = useCallback9(() => {
@@ -10562,7 +10365,7 @@ var Carousel = ({
       setCurrentIndex((currentIndex + length + 1) % length);
     }
   }, [canGoRight, currentIndex, length]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!timeOut.current && !isPaused) {
       if (autoLoopingTimeOut > 0) {
         timeOut.current = setTimeout(() => {
@@ -10614,13 +10417,13 @@ var Carousel = ({
     }
     setDragState(void 0);
   };
-  useEffect16(() => {
+  useEffect17(() => {
     setDisableClick(!dragState);
   }, [dragState]);
-  useEffect16(() => {
+  useEffect17(() => {
     onSlideChanged?.(currentIndex);
   }, [currentIndex]);
-  return /* @__PURE__ */ jsx27(CarouselContext.Provider, { value: { id, currentIndex, slideCount: length, isLooping }, children: /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsx26(CarouselContext.Provider, { value: { id, currentIndex, slideCount: length, isLooping }, children: /* @__PURE__ */ jsxs17(
     "div",
     {
       ref: carouselContainerRef,
@@ -10645,12 +10448,12 @@ var Carousel = ({
                   onPointerLeave: handlePointerUp,
                   className: clsx20(`flex-row-2 relative h-full`, heightClassName),
                   children: [
-                    /* @__PURE__ */ jsx27("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
+                    /* @__PURE__ */ jsx26("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
                       item,
                       index
                     }, listIndex) => {
                       const isInItems = before.length <= listIndex && listIndex < items.length - after.length;
-                      return /* @__PURE__ */ jsx27(
+                      return /* @__PURE__ */ jsx26(
                         CarouselSlide,
                         {
                           ref: isInItems ? slideRefs[index] : void 0,
@@ -10670,13 +10473,13 @@ var Carousel = ({
                         listIndex
                       );
                     }) }),
-                    /* @__PURE__ */ jsx27(
+                    /* @__PURE__ */ jsx26(
                       "div",
                       {
                         className: clsx20(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
                       }
                     ),
-                    /* @__PURE__ */ jsx27(
+                    /* @__PURE__ */ jsx26(
                       "div",
                       {
                         className: clsx20(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
@@ -10684,7 +10487,7 @@ var Carousel = ({
                     )
                   ]
                 }
-              ) : /* @__PURE__ */ jsx27(
+              ) : /* @__PURE__ */ jsx26(
                 "div",
                 {
                   ref: slideRefs[currentIndex],
@@ -10700,31 +10503,33 @@ var Carousel = ({
                 }
               ),
               arrows && /* @__PURE__ */ jsxs17(Fragment, { children: [
-                /* @__PURE__ */ jsx27(
-                  IconButton,
+                /* @__PURE__ */ jsx26(
+                  Button,
                   {
+                    layout: "icon",
                     color: "neutral",
                     className: clsx20("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
                     disabled: !canGoLeft(),
                     onClick: () => left(),
-                    children: /* @__PURE__ */ jsx27(ChevronLeft, { size: 24 })
+                    children: /* @__PURE__ */ jsx26(ChevronLeft, { size: 24 })
                   }
                 ),
-                /* @__PURE__ */ jsx27(
-                  IconButton,
+                /* @__PURE__ */ jsx26(
+                  Button,
                   {
+                    layout: "icon",
                     color: "neutral",
                     className: clsx20("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
                     disabled: !canGoRight(),
                     onClick: () => right(),
-                    children: /* @__PURE__ */ jsx27(ChevronRight, { size: 24 })
+                    children: /* @__PURE__ */ jsx26(ChevronRight, { size: 24 })
                   }
                 )
               ] })
             ]
           }
         ),
-        dots && /* @__PURE__ */ jsx27(CarouselTabs, { onChange: setCurrentIndex })
+        dots && /* @__PURE__ */ jsx26(CarouselTabs, { onChange: setCurrentIndex })
       ]
     }
   ) });
@@ -10732,7 +10537,7 @@ var Carousel = ({
 
 // src/components/layout/DividerInserter.tsx
 import clsx21 from "clsx";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var DividerInserter = ({
   children,
   divider,
@@ -10749,14 +10554,14 @@ var DividerInserter = ({
       }
     }
   }
-  return /* @__PURE__ */ jsx28("div", { className: clsx21(className), ...restProps, children: nodes });
+  return /* @__PURE__ */ jsx27("div", { className: clsx21(className), ...restProps, children: nodes });
 };
 
 // src/components/layout/FAQSection.tsx
 import clsx22 from "clsx";
 
 // src/components/layout/MarkdownInterpreter.tsx
-import { Fragment as Fragment2, jsx as jsx29 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx28 } from "react/jsx-runtime";
 var astNodeInserterType = ["helpwave", "newline"];
 var ASTNodeInterpreter = ({
   node,
@@ -10765,27 +10570,27 @@ var ASTNodeInterpreter = ({
 }) => {
   switch (node.type) {
     case "newline":
-      return /* @__PURE__ */ jsx29("br", {});
+      return /* @__PURE__ */ jsx28("br", {});
     case "text":
-      return isRoot ? /* @__PURE__ */ jsx29("span", { className, children: node.text }) : node.text;
+      return isRoot ? /* @__PURE__ */ jsx28("span", { className, children: node.text }) : node.text;
     case "helpwave":
-      return /* @__PURE__ */ jsx29("span", { className: "font-bold font-space no-underline", children: "helpwave" });
+      return /* @__PURE__ */ jsx28("span", { className: "font-bold font-space no-underline", children: "helpwave" });
     case "none":
-      return isRoot ? /* @__PURE__ */ jsx29("span", { className, children: node.children.map((value, index) => /* @__PURE__ */ jsx29(
+      return isRoot ? /* @__PURE__ */ jsx28("span", { className, children: node.children.map((value, index) => /* @__PURE__ */ jsx28(
         ASTNodeInterpreter,
         {
           node: value
         },
         index
-      )) }) : /* @__PURE__ */ jsx29(Fragment2, { children: node.children.map((value, index) => /* @__PURE__ */ jsx29(ASTNodeInterpreter, { node: value }, index)) });
+      )) }) : /* @__PURE__ */ jsx28(Fragment2, { children: node.children.map((value, index) => /* @__PURE__ */ jsx28(ASTNodeInterpreter, { node: value }, index)) });
     case "bold":
-      return /* @__PURE__ */ jsx29("b", { children: node.children.map((value, index) => /* @__PURE__ */ jsx29(ASTNodeInterpreter, { node: value }, index)) });
+      return /* @__PURE__ */ jsx28("b", { children: node.children.map((value, index) => /* @__PURE__ */ jsx28(ASTNodeInterpreter, { node: value }, index)) });
     case "italic":
-      return /* @__PURE__ */ jsx29("i", { children: node.children.map((value, index) => /* @__PURE__ */ jsx29(ASTNodeInterpreter, { node: value }, index)) });
+      return /* @__PURE__ */ jsx28("i", { children: node.children.map((value, index) => /* @__PURE__ */ jsx28(ASTNodeInterpreter, { node: value }, index)) });
     case "underline":
-      return /* @__PURE__ */ jsx29("u", { children: node.children.map((value, index) => /* @__PURE__ */ jsx29(ASTNodeInterpreter, { node: value }, index)) });
+      return /* @__PURE__ */ jsx28("u", { children: node.children.map((value, index) => /* @__PURE__ */ jsx28(ASTNodeInterpreter, { node: value }, index)) });
     case "font-space":
-      return /* @__PURE__ */ jsx29("span", { className: "font-space", children: node.children.map((value, index) => /* @__PURE__ */ jsx29(
+      return /* @__PURE__ */ jsx28("span", { className: "font-space", children: node.children.map((value, index) => /* @__PURE__ */ jsx28(
         ASTNodeInterpreter,
         {
           node: value
@@ -10793,7 +10598,7 @@ var ASTNodeInterpreter = ({
         index
       )) });
     case "primary":
-      return /* @__PURE__ */ jsx29("span", { className: "text-primary", children: node.children.map((value, index) => /* @__PURE__ */ jsx29(
+      return /* @__PURE__ */ jsx28("span", { className: "text-primary", children: node.children.map((value, index) => /* @__PURE__ */ jsx28(
         ASTNodeInterpreter,
         {
           node: value
@@ -10801,7 +10606,7 @@ var ASTNodeInterpreter = ({
         index
       )) });
     case "secondary":
-      return /* @__PURE__ */ jsx29("span", { className: "text-secondary", children: node.children.map((value, index) => /* @__PURE__ */ jsx29(
+      return /* @__PURE__ */ jsx28("span", { className: "text-secondary", children: node.children.map((value, index) => /* @__PURE__ */ jsx28(
         ASTNodeInterpreter,
         {
           node: value
@@ -10809,7 +10614,7 @@ var ASTNodeInterpreter = ({
         index
       )) });
     case "warn":
-      return /* @__PURE__ */ jsx29("span", { className: "text-warning", children: node.children.map((value, index) => /* @__PURE__ */ jsx29(
+      return /* @__PURE__ */ jsx28("span", { className: "text-warning", children: node.children.map((value, index) => /* @__PURE__ */ jsx28(
         ASTNodeInterpreter,
         {
           node: value
@@ -10817,7 +10622,7 @@ var ASTNodeInterpreter = ({
         index
       )) });
     case "positive":
-      return /* @__PURE__ */ jsx29("span", { className: "text-positive", children: node.children.map((value, index) => /* @__PURE__ */ jsx29(
+      return /* @__PURE__ */ jsx28("span", { className: "text-positive", children: node.children.map((value, index) => /* @__PURE__ */ jsx28(
         ASTNodeInterpreter,
         {
           node: value
@@ -10825,7 +10630,7 @@ var ASTNodeInterpreter = ({
         index
       )) });
     case "negative":
-      return /* @__PURE__ */ jsx29("span", { className: "text-negative", children: node.children.map((value, index) => /* @__PURE__ */ jsx29(
+      return /* @__PURE__ */ jsx28("span", { className: "text-negative", children: node.children.map((value, index) => /* @__PURE__ */ jsx28(
         ASTNodeInterpreter,
         {
           node: value
@@ -10983,24 +10788,24 @@ var optimizeTree = (node) => {
 var MarkdownInterpreter = ({ text, className }) => {
   const tree = parseMarkdown(text);
   const optimizedTree = optimizeTree(tree);
-  return /* @__PURE__ */ jsx29(ASTNodeInterpreter, { node: optimizedTree, isRoot: true, className });
+  return /* @__PURE__ */ jsx28(ASTNodeInterpreter, { node: optimizedTree, isRoot: true, className });
 };
 
 // src/components/layout/FAQSection.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var FAQSection = ({
   entries,
   expandableClassName
 }) => {
-  return /* @__PURE__ */ jsx30("ul", { className: "flex-col-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx29("ul", { className: "flex-col-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(
     ExpandableUncontrolled,
     {
       ...restProps,
-      label: /* @__PURE__ */ jsx30("span", { id, className: "typography-title-md", children: title }),
+      label: /* @__PURE__ */ jsx29("span", { id, className: "typography-title-md", children: title }),
       clickOnlyOnHeader: false,
-      icon: (expanded) => /* @__PURE__ */ jsx30(ExpansionIcon, { isExpanded: expanded, className: "text-primary" }),
+      icon: (expanded) => /* @__PURE__ */ jsx29(ExpansionIcon, { isExpanded: expanded, className: "text-primary" }),
       className: clsx22("rounded-xl", expandableClassName),
-      children: /* @__PURE__ */ jsx30("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ jsx30(MarkdownInterpreter, { text: content.value }) : content.value })
+      children: /* @__PURE__ */ jsx29("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ jsx29(MarkdownInterpreter, { text: content.value }) : content.value })
     },
     id
   ) }, id)) });
@@ -11010,7 +10815,7 @@ var FAQSection = ({
 import { forwardRef as forwardRef6, useImperativeHandle as useImperativeHandle3, useRef as useRef8 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { clsx as clsx23 } from "clsx";
-import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 var FloatingContainer = forwardRef6(function FloatingContainer2({
   children,
   backgroundOverlay,
@@ -11039,7 +10844,7 @@ var FloatingContainer = forwardRef6(function FloatingContainer2({
   return createPortal3(
     /* @__PURE__ */ jsxs18(Fragment3, { children: [
       backgroundOverlay,
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx30(
         "div",
         {
           ...props,
@@ -11064,9 +10869,9 @@ var FloatingContainer = forwardRef6(function FloatingContainer2({
 });
 
 // src/components/layout/ListBox.tsx
-import React4, { createContext as createContext5, forwardRef as forwardRef7, useCallback as useCallback10, useContext as useContext5, useEffect as useEffect17, useRef as useRef9, useState as useState17 } from "react";
+import React4, { createContext as createContext5, forwardRef as forwardRef7, useCallback as useCallback10, useContext as useContext5, useEffect as useEffect18, useRef as useRef9, useState as useState18 } from "react";
 import { clsx as clsx24 } from "clsx";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var ListBoxContext = createContext5(null);
 function useListBoxContext() {
   const ctx = useContext5(ListBoxContext);
@@ -11087,13 +10892,13 @@ var ListBoxItem = forwardRef7(
     } = useListBoxContext();
     const itemRef = useRef9(null);
     const id = React4.useId();
-    useEffect17(() => {
+    useEffect18(() => {
       registerItem({ id, value, disabled, ref: itemRef });
       return () => unregisterItem(id);
     }, [id, value, disabled, registerItem, unregisterItem]);
     const isHighlighted = highlightedId === id;
     const selected = isSelected(value);
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx31(
       "li",
       {
         ref: (node) => {
@@ -11140,7 +10945,7 @@ var ListBoxPrimitive = forwardRef7(
     ...props
   }, ref) {
     const itemsRef = useRef9([]);
-    const [highlightedIndex, setHighlightedIndex] = useState17(void 0);
+    const [highlightedIndex, setHighlightedIndex] = useState18(void 0);
     const registerItem = useCallback10((item) => {
       itemsRef.current.push(item);
       itemsRef.current.sort((a, b) => {
@@ -11187,7 +10992,7 @@ var ListBoxPrimitive = forwardRef7(
         setHighlightedIndex(index);
       }
     }, []);
-    useEffect17(() => {
+    useEffect18(() => {
       if (highlightedIndex !== void 0) {
         itemsRef.current[highlightedIndex]?.ref.current?.scrollIntoView({ block: "nearest", behavior: "auto" });
       }
@@ -11210,7 +11015,7 @@ var ListBoxPrimitive = forwardRef7(
       }
       setHighlightedIndex(nextIndex);
     };
-    return /* @__PURE__ */ jsx32(ListBoxContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx31(ListBoxContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx31(
       "ul",
       {
         ref,
@@ -11275,7 +11080,7 @@ var ListBoxPrimitive = forwardRef7(
   }
 );
 var ListBoxMultiple = ({ ...props }) => {
-  return /* @__PURE__ */ jsx32(ListBoxPrimitive, { ...props });
+  return /* @__PURE__ */ jsx31(ListBoxPrimitive, { ...props });
 };
 var ListBoxMultipleUncontrolled = ({
   value: initialValue,
@@ -11283,7 +11088,7 @@ var ListBoxMultipleUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onSelectionChanged);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx31(
     ListBoxMultiple,
     {
       ...props,
@@ -11297,7 +11102,7 @@ var ListBox = forwardRef7(function ListBox2({
   onSelectionChanged,
   ...props
 }, ref) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx31(
     ListBoxPrimitive,
     {
       ref,
@@ -11316,7 +11121,7 @@ var ListBoxUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onSelectionChanged);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx31(
     ListBox,
     {
       ...props,
@@ -11328,9 +11133,9 @@ var ListBoxUncontrolled = ({
 
 // src/components/layout/TabView.tsx
 import { useId as useId7 } from "react";
-import { createContext as createContext6, useContext as useContext6, useState as useState18, useEffect as useEffect18, useRef as useRef10 } from "react";
+import { createContext as createContext6, useContext as useContext6, useState as useState19, useEffect as useEffect19, useRef as useRef10 } from "react";
 import clsx25 from "clsx";
-import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 var TabContext = createContext6(null);
 function useTabContext() {
   const ctx = useContext6(TabContext);
@@ -11338,8 +11143,8 @@ function useTabContext() {
   return ctx;
 }
 function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, ...props }) {
-  const [tabs, setTabs] = useState18([]);
-  const [active, setActiveState] = useState18(null);
+  const [tabs, setTabs] = useState19([]);
+  const [active, setActiveState] = useState19(null);
   const buttonRefs = useRef10({});
   const setActive = (id) => {
     setActiveState(id);
@@ -11374,8 +11179,8 @@ function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, .
     buttonRefs.current[nextId]?.focus();
   };
   const value = { active, setActive, register, unregister, tabs };
-  return /* @__PURE__ */ jsx33(TabContext.Provider, { value, children: /* @__PURE__ */ jsxs19("div", { ...outerDivProps, className: clsx25("w-full", props.className), children: [
-    /* @__PURE__ */ jsx33("div", { role: "tablist", ...props, className: clsx25("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(TabContext.Provider, { value, children: /* @__PURE__ */ jsxs19("div", { ...outerDivProps, className: clsx25("w-full", props.className), children: [
+    /* @__PURE__ */ jsx32("div", { role: "tablist", ...props, className: clsx25("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ jsx32(
       "button",
       {
         role: "tab",
@@ -11387,7 +11192,7 @@ function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, .
         onClick: () => setActive(t.id),
         onKeyDown: (e) => onKeyDown(e, t.id),
         className: clsx25(
-          "flex-row-0 grow justify-center px-3 pb-1 typography-label-md border-b-2",
+          "flex-row-0 grow justify-center px-3 pb-2.25 typography-label-md font-bold border-b-2",
           active === t.id ? "border-primary" : "text-description hover:text-on-background"
         ),
         children: t.label
@@ -11401,11 +11206,11 @@ function Tab({ id: customId, label, children, ...props }) {
   const { active, register, unregister } = useTabContext();
   const generatedId = useId7();
   const id = customId ?? generatedId;
-  useEffect18(() => {
+  useEffect19(() => {
     register(id, label);
     return () => unregister(id);
   }, [id, label]);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       role: "tabpanel",
@@ -11421,7 +11226,7 @@ function Tab({ id: customId, label, children, ...props }) {
 
 // src/components/layout/TextImage.tsx
 import clsx26 from "clsx";
-import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 var TextImage = ({
   title,
   description,
@@ -11443,7 +11248,7 @@ var TextImage = ({
     secondary: "text-text-image-secondary-text bg-linear-to-r from-30% from-text-image-secondary-background to-text-image-secondary-background/55",
     dark: "text-text-image-dark-text bg-linear-to-r from-30% from-text-image-dark-background to-text-image-dark-background/55"
   };
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       className: clsx26("rounded-2xl w-full", className),
@@ -11456,12 +11261,12 @@ var TextImage = ({
         {
           className: clsx26(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
-            badge && /* @__PURE__ */ jsx34("div", { className: clsx26(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx34("span", { className: "text-lg font-bold", children: badge }) }),
+            badge && /* @__PURE__ */ jsx33("div", { className: clsx26(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx33("span", { className: "text-lg font-bold", children: badge }) }),
             /* @__PURE__ */ jsxs20("div", { className: "flex-col-1 overflow-hidden", children: [
-              /* @__PURE__ */ jsx34("span", { className: "typography-title-lg", children: title }),
-              /* @__PURE__ */ jsx34("span", { className: "text-ellipsis overflow-hidden", children: description })
+              /* @__PURE__ */ jsx33("span", { className: "typography-title-lg", children: title }),
+              /* @__PURE__ */ jsx33("span", { className: "text-ellipsis overflow-hidden", children: description })
             ] }),
-            onShowMoreClicked && /* @__PURE__ */ jsx34("div", { className: "flex-row-2 mt-2 underline", children: /* @__PURE__ */ jsx34("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
+            onShowMoreClicked && /* @__PURE__ */ jsx33("div", { className: "flex-row-2 mt-2 underline", children: /* @__PURE__ */ jsx33("button", { onClick: onShowMoreClicked, children: translation("showMore") }) })
           ]
         }
       )
@@ -11470,7 +11275,7 @@ var TextImage = ({
 };
 
 // src/components/layout/VerticalDivider.tsx
-import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
 var VerticalDivider = ({
   width = 1,
   height = 100,
@@ -11478,7 +11283,7 @@ var VerticalDivider = ({
   dashGap = 4,
   dashLength = 4
 }) => {
-  return /* @__PURE__ */ jsx35("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsx34("div", { style: { width: width + "px", height: height + "px" }, children: /* @__PURE__ */ jsxs21(
     "svg",
     {
       width,
@@ -11487,7 +11292,7 @@ var VerticalDivider = ({
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx34(
           "line",
           {
             opacity: "0.5",
@@ -11501,7 +11306,7 @@ var VerticalDivider = ({
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ jsx35("defs", { children: /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsx34("defs", { children: /* @__PURE__ */ jsxs21(
           "linearGradient",
           {
             id: "paint_linear",
@@ -11511,9 +11316,9 @@ var VerticalDivider = ({
             y2: height,
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx35("stop", { stopOpacity: "0", stopColor: "currentColor" }),
-              /* @__PURE__ */ jsx35("stop", { offset: "0.5", stopColor: "currentColor" }),
-              /* @__PURE__ */ jsx35("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
+              /* @__PURE__ */ jsx34("stop", { stopOpacity: "0", stopColor: "currentColor" }),
+              /* @__PURE__ */ jsx34("stop", { offset: "0.5", stopColor: "currentColor" }),
+              /* @__PURE__ */ jsx34("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })
             ]
           }
         ) })
@@ -11525,31 +11330,31 @@ var VerticalDivider = ({
 // src/components/loading-states/ErrorComponent.tsx
 import { AlertOctagon } from "lucide-react";
 import clsx27 from "clsx";
-import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 var ErrorComponent = ({
   errorText,
   classname
 }) => {
   const translation = useHightideTranslation();
   return /* @__PURE__ */ jsxs22("div", { className: clsx27("flex-col-4 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ jsx36(AlertOctagon, { size: 64, className: "text-warning" }),
+    /* @__PURE__ */ jsx35(AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-import { useState as useState19 } from "react";
+import { useState as useState20 } from "react";
 
 // src/components/loading-states/LoadingContainer.tsx
 import { clsx as clsx28 } from "clsx";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var LoadingContainer = ({ className }) => {
-  return /* @__PURE__ */ jsx37("div", { className: clsx28("relative overflow-hidden shimmer bg-disabled-background rounded-md", className) });
+  return /* @__PURE__ */ jsx36("div", { className: clsx28("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
 import { clsx as clsx29 } from "clsx";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
@@ -11559,8 +11364,8 @@ var LoadingAndErrorComponent = ({
   minimumLoadingDuration = 200,
   className
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = useState19(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState19(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = useState20(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState20(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -11569,41 +11374,40 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return loadingComponent ?? /* @__PURE__ */ jsx38(LoadingContainer, { className: clsx29(className) });
+    return loadingComponent ?? /* @__PURE__ */ jsx37(LoadingContainer, { className: clsx29(className) });
   }
   if (hasError) {
-    return errorComponent ?? /* @__PURE__ */ jsx38(LoadingContainer, { className: clsx29("bg-negative", className) });
+    return errorComponent ?? /* @__PURE__ */ jsx37(LoadingContainer, { className: clsx29("bg-negative", className) });
   }
   return children;
 };
 
 // src/components/loading-states/LoadingAnimation.tsx
 import clsx30 from "clsx";
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 var LoadingAnimation = ({
   loadingText,
   classname
 }) => {
   const translation = useHightideTranslation();
   return /* @__PURE__ */ jsxs23("div", { className: clsx30("flex-col-2 items-center justify-center w-full h-24", classname), children: [
-    /* @__PURE__ */ jsx39(HelpwaveLogo, { animate: "loading" }),
+    /* @__PURE__ */ jsx38(HelpwaveLogo, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
 };
 
 // src/components/loading-states/LoadingButton.tsx
 import clsx31 from "clsx";
-import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
-  const paddingClass = ButtonUtil.paddingMapping[size];
   return /* @__PURE__ */ jsxs24("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ jsx40("div", { className: clsx31("flex-row-2 absolute inset-0 items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ jsx40(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
-    /* @__PURE__ */ jsx40(SolidButton, { ...rest, disabled: rest.disabled, onClick })
+    isLoading && /* @__PURE__ */ jsx39("div", { className: clsx31("flex-row-2 absolute inset-0 items-center justify-center bg-white/40"), children: /* @__PURE__ */ jsx39(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
+    /* @__PURE__ */ jsx39(Button, { ...rest, size, disabled: rest.disabled, onClick })
   ] });
 };
 
 // src/components/loading-states/ProgressIndicator.tsx
-import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
 var sizeMapping = { small: 16, medium: 24, big: 48 };
 var ProgressIndicator = ({
   progress,
@@ -11629,7 +11433,7 @@ var ProgressIndicator = ({
         transform: `rotate(${rotation}deg)`
       },
       children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx40(
           "circle",
           {
             cx: center,
@@ -11640,7 +11444,7 @@ var ProgressIndicator = ({
             className: "stroke-progress-indicator-fill"
           }
         ),
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx40(
           "circle",
           {
             cx: center,
@@ -11662,21 +11466,27 @@ var ProgressIndicator = ({
 var import_link = __toESM(require_link2());
 import clsx32 from "clsx";
 import { Fragment as Fragment4 } from "react";
-import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
 var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
-  const color = "text-description";
-  return /* @__PURE__ */ jsx42("div", { className: clsx32("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
+  return /* @__PURE__ */ jsx41("div", { className: clsx32("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
     return /* @__PURE__ */ jsxs26(Fragment4, { children: [
-      /* @__PURE__ */ jsx42(
+      /* @__PURE__ */ jsx41(
         import_link.default,
         {
           href: crumb.link,
-          className: clsx32("btn-sm hover:bg-description/20", linkClassName, { [color]: !isLast }),
+          className: clsx32(
+            "btn-sm coloring-text-hover",
+            {
+              description: !isLast,
+              neutral: isLast
+            },
+            linkClassName
+          ),
           children: crumb.display
         }
       ),
-      !isLast && /* @__PURE__ */ jsx42("span", { className: clsx32(`px-1`, color), children: "/" })
+      !isLast && /* @__PURE__ */ jsx41("span", { className: clsx32(`px-1`, "text-description"), children: "/" })
     ] }, index);
   }) });
 };
@@ -11684,10 +11494,10 @@ var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
 // src/components/navigation/Navigation.tsx
 var import_link2 = __toESM(require_link2());
 import { Menu as MenuIcon, XIcon as XIcon2 } from "lucide-react";
-import { useEffect as useEffect19 } from "react";
-import { useCallback as useCallback11, useId as useId8, useRef as useRef11, useState as useState20 } from "react";
+import { useEffect as useEffect20 } from "react";
+import { useCallback as useCallback11, useId as useId8, useRef as useRef11, useState as useState21 } from "react";
 import clsx33 from "clsx";
-import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
 }
@@ -11697,7 +11507,7 @@ var NavigationItemWithSubItem = ({
   horizontalAlignment = "center",
   ...options
 }) => {
-  const [isOpen, setOpen] = useState20(false);
+  const [isOpen, setOpen] = useState21(false);
   const containerRef = useRef11();
   const triggerRef = useRef11(null);
   const id = useId8();
@@ -11714,6 +11524,7 @@ var NavigationItemWithSubItem = ({
       setOpen(false);
     }
   }, []);
+  const zIndex = useZIndexRegister(isOpen);
   return /* @__PURE__ */ jsxs27(Fragment5, { children: [
     /* @__PURE__ */ jsxs27(
       "button",
@@ -11730,11 +11541,11 @@ var NavigationItemWithSubItem = ({
         "aria-controls": "navigation-items-" + id,
         children: [
           label,
-          /* @__PURE__ */ jsx43(ExpansionIcon, { isExpanded: isOpen })
+          /* @__PURE__ */ jsx42(ExpansionIcon, { isExpanded: isOpen })
         ]
       }
     ),
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx42(
       "ul",
       {
         id: "navigation-items-" + id,
@@ -11749,11 +11560,11 @@ var NavigationItemWithSubItem = ({
         onBlur,
         hidden: !isOpen,
         className: clsx33(
-          "fixed flex-col-4 p-4 bg-surface text-on-surface shadow-side shadow-hw-bottom rounded-md z-2001",
+          "fixed flex-col-4 p-4 bg-surface text-on-surface shadow-side shadow-hw-bottom rounded-md",
           { "opacity-0": !style }
         ),
-        style,
-        children: items.map(({ link, label: label2, external }, index) => /* @__PURE__ */ jsx43("li", { children: /* @__PURE__ */ jsx43(
+        style: { ...style, zIndex },
+        children: items.map(({ link, label: label2, external }, index) => /* @__PURE__ */ jsx42("li", { children: /* @__PURE__ */ jsx42(
           import_link2.default,
           {
             href: link,
@@ -11767,33 +11578,36 @@ var NavigationItemWithSubItem = ({
   ] });
 };
 var NavigationItemList = ({ items, ...restProps }) => {
-  return /* @__PURE__ */ jsx43("ul", { ...restProps, className: clsx33("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx43("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx43(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx43(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
+  return /* @__PURE__ */ jsx42("ul", { ...restProps, className: clsx33("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx42("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx42(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx42(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
-  const [isMobileOpen, setIsMobileOpen] = useState20(false);
+  const [isMobileOpen, setIsMobileOpen] = useState21(false);
   const id = useId8();
   const menuRef = useRef11(null);
-  useEffect19(() => {
+  useEffect20(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
+  const zIndex = useZIndexRegister(isMobileOpen);
   return /* @__PURE__ */ jsxs27("nav", { children: [
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx42(
       NavigationItemList,
       {
         ...props,
         className: clsx33("hidden", { "desktop:flex": !isMobileOpen }, props.className)
       }
     ),
-    /* @__PURE__ */ jsx43(
-      IconButton,
+    /* @__PURE__ */ jsx42(
+      Button,
       {
-        color: "transparent",
+        layout: "icon",
+        coloringStyle: "text",
+        color: "neutral",
         onClick: () => setIsMobileOpen(true),
         className: "desktop:hidden",
         "aria-haspopup": "true",
         "aria-expanded": isMobileOpen,
         "aria-controls": "navigation-menu-" + id,
-        children: /* @__PURE__ */ jsx43(MenuIcon, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ jsx42(MenuIcon, { className: "w-6 h-6" })
       }
     ),
     /* @__PURE__ */ jsxs27(
@@ -11810,15 +11624,25 @@ var Navigation = ({ ...props }) => {
           }
         },
         className: clsx33(
-          "flex-col-8 items-center justify-center fixed inset-0 p-8 w-screen h-screen z-2000 bg-surface text-on-surface",
+          "flex-col-8 items-center justify-center fixed inset-0 p-8 w-screen h-screen bg-surface text-on-surface",
           {
             "desktop:hidden": isMobileOpen
           },
           props.className
         ),
+        style: { zIndex },
         children: [
-          /* @__PURE__ */ jsx43(IconButton, { color: "transparent", onClick: () => setIsMobileOpen(false), children: /* @__PURE__ */ jsx43(XIcon2, {}) }),
-          /* @__PURE__ */ jsx43(NavigationItemList, { ...props, className: clsx33("flex-col-8", props.className) })
+          /* @__PURE__ */ jsx42(
+            Button,
+            {
+              layout: "icon",
+              coloringStyle: "text",
+              color: "neutral",
+              onClick: () => setIsMobileOpen(false),
+              children: /* @__PURE__ */ jsx42(XIcon2, {})
+            }
+          ),
+          /* @__PURE__ */ jsx42(NavigationItemList, { ...props, className: clsx33("flex-col-8", props.className) })
         ]
       }
     )
@@ -11828,8 +11652,8 @@ var Navigation = ({ ...props }) => {
 // src/components/navigation/Pagination.tsx
 import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
 import clsx34 from "clsx";
-import { useEffect as useEffect20, useState as useState21 } from "react";
-import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useEffect as useEffect21, useState as useState22 } from "react";
+import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
 var Pagination = ({
   pageIndex,
   pageCount,
@@ -11838,11 +11662,11 @@ var Pagination = ({
   style
 }) => {
   const translation = useHightideTranslation();
-  const [value, setValue] = useState21((pageIndex + 1).toString());
+  const [value, setValue] = useState22((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  useEffect20(() => {
+  useEffect21(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -11853,10 +11677,30 @@ var Pagination = ({
     onPageChanged(page);
   };
   return /* @__PURE__ */ jsxs28("div", { className: clsx34("flex-row-1", className), style, children: [
-    /* @__PURE__ */ jsx44(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ jsx44(ChevronFirst, {}) }),
-    /* @__PURE__ */ jsx44(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ jsx44(ChevronLeft2, {}) }),
+    /* @__PURE__ */ jsx43(
+      Button,
+      {
+        layout: "icon",
+        coloringStyle: "text",
+        color: "neutral",
+        onClick: () => changePage(0),
+        disabled: onFirstPage || noPages,
+        children: /* @__PURE__ */ jsx43(ChevronFirst, {})
+      }
+    ),
+    /* @__PURE__ */ jsx43(
+      Button,
+      {
+        layout: "icon",
+        coloringStyle: "text",
+        color: "neutral",
+        onClick: () => changePage(pageIndex - 1),
+        disabled: onFirstPage || noPages,
+        children: /* @__PURE__ */ jsx43(ChevronLeft2, {})
+      }
+    ),
     /* @__PURE__ */ jsxs28("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
-      /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsx43(
         Input,
         {
           value,
@@ -11880,8 +11724,8 @@ var Pagination = ({
           editCompleteOptions: { delay: 800 }
         }
       ),
-      /* @__PURE__ */ jsx44("span", { className: "select-none w-10", children: translation("of") }),
-      /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsx43("span", { className: "select-none w-10", children: translation("of") }),
+      /* @__PURE__ */ jsx43(
         "span",
         {
           className: "flex-row-2 w-24 items-center justify-center select-none h-10 bg-input-background text-input-text rounded-md font-bold",
@@ -11889,15 +11733,35 @@ var Pagination = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx44(IconButton, { color: "transparent", onClick: () => changePage(pageIndex + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx44(ChevronRight2, {}) }),
-    /* @__PURE__ */ jsx44(IconButton, { color: "transparent", onClick: () => changePage(pageCount - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx44(ChevronLast, {}) })
+    /* @__PURE__ */ jsx43(
+      Button,
+      {
+        layout: "icon",
+        coloringStyle: "text",
+        color: "neutral",
+        onClick: () => changePage(pageIndex + 1),
+        disabled: onLastPage || noPages,
+        children: /* @__PURE__ */ jsx43(ChevronRight2, {})
+      }
+    ),
+    /* @__PURE__ */ jsx43(
+      Button,
+      {
+        layout: "icon",
+        coloringStyle: "text",
+        color: "neutral",
+        onClick: () => changePage(pageCount - 1),
+        disabled: onLastPage || noPages,
+        children: /* @__PURE__ */ jsx43(ChevronLast, {})
+      }
+    )
   ] });
 };
 
 // src/components/navigation/StepperBar.tsx
 import { Check, ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "lucide-react";
 import clsx35 from "clsx";
-import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 var defaultState = {
   currentStep: 0,
   seenSteps: /* @__PURE__ */ new Set([0])
@@ -11924,8 +11788,8 @@ var StepperBar = ({
     {
       className: clsx35("flex-row-2 justify-between", className),
       children: [
-        /* @__PURE__ */ jsx45("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ jsxs29(
-          SolidButton,
+        /* @__PURE__ */ jsx44("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ jsxs29(
+          Button,
           {
             disabled: currentStep === 0 || disabledSteps.has(currentStep),
             onClick: () => {
@@ -11933,14 +11797,14 @@ var StepperBar = ({
             },
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ jsx45(ChevronLeft3, { size: 14 }),
+              /* @__PURE__ */ jsx44(ChevronLeft3, { size: 14 }),
               translation("back")
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx45("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
+        /* @__PURE__ */ jsx44("div", { className: "flex-row-2 flex-[5] justify-center items-center", children: showDots && dots.map((value, index) => {
           const seen = seenSteps.has(index);
-          return /* @__PURE__ */ jsx45(
+          return /* @__PURE__ */ jsx44(
             "div",
             {
               onClick: () => seen && update(index),
@@ -11960,26 +11824,26 @@ var StepperBar = ({
             index
           );
         }) }),
-        currentStep !== numberOfSteps && /* @__PURE__ */ jsx45("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs29(
-          SolidButton,
+        currentStep !== numberOfSteps && /* @__PURE__ */ jsx44("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs29(
+          Button,
           {
             onClick: () => update(currentStep + 1),
             className: "flex-row-1 items-center justify-center",
             disabled: disabledSteps.has(currentStep),
             children: [
               translation("next"),
-              /* @__PURE__ */ jsx45(ChevronRight3, { size: 14 })
+              /* @__PURE__ */ jsx44(ChevronRight3, { size: 14 })
             ]
           }
         ) }),
-        currentStep === numberOfSteps && /* @__PURE__ */ jsx45("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs29(
-          SolidButton,
+        currentStep === numberOfSteps && /* @__PURE__ */ jsx44("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ jsxs29(
+          Button,
           {
             disabled: disabledSteps.has(currentStep),
             onClick: onFinish,
             className: "flex-row-1 items-center justify-center",
             children: [
-              /* @__PURE__ */ jsx45(Check, { size: 14 }),
+              /* @__PURE__ */ jsx44(Check, { size: 14 }),
               finishText ?? translation("confirm")
             ]
           }
@@ -11990,7 +11854,7 @@ var StepperBar = ({
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
   const [usedState, setUsedState] = useOverwritableState(state, onChange);
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx44(
     StepperBar,
     {
       ...props,
@@ -12006,7 +11870,7 @@ import { Check as Check3 } from "lucide-react";
 // src/components/user-action/Checkbox.tsx
 import { Check as Check2, Minus } from "lucide-react";
 import clsx36 from "clsx";
-import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 var checkboxSizeMapping = {
   sm: "size-5 border-1",
   md: "size-6 border-1",
@@ -12062,9 +11926,9 @@ var Checkbox = ({
       "aria-disabled": disabled,
       tabIndex: disabled ? -1 : 0,
       children: [
-        !checked && !indeterminate && /* @__PURE__ */ jsx46("div", { className: clsx36("bg-input-background", innerIconSize) }),
-        checked && !indeterminate && /* @__PURE__ */ jsx46(Check2, { className: innerIconSize }),
-        indeterminate && /* @__PURE__ */ jsx46(Minus, { className: innerIconSize })
+        !checked && !indeterminate && /* @__PURE__ */ jsx45("div", { className: clsx36("bg-input-background", innerIconSize) }),
+        checked && !indeterminate && /* @__PURE__ */ jsx45(Check2, { className: innerIconSize }),
+        indeterminate && /* @__PURE__ */ jsx45(Minus, { className: innerIconSize })
       ]
     }
   );
@@ -12075,7 +11939,7 @@ var CheckboxUncontrolled = ({
   ...props
 }) => {
   const [checked, setChecked] = useOverwritableState(initialChecked, onCheckedChange);
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx45(
     Checkbox,
     {
       ...props,
@@ -12088,7 +11952,7 @@ var CheckboxUncontrolled = ({
 // src/components/properties/PropertyBase.tsx
 import { AlertTriangle } from "lucide-react";
 import clsx37 from "clsx";
-import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 var PropertyBase = ({
   name,
   input,
@@ -12114,8 +11978,8 @@ var PropertyBase = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx47("div", { className: "max-w-6 min-w-6 text-text-primary", children: icon }),
-          /* @__PURE__ */ jsx47("span", { className: "font-semibold", children: name })
+          /* @__PURE__ */ jsx46("div", { className: "max-w-6 min-w-6 text-text-primary", children: icon }),
+          /* @__PURE__ */ jsx46("span", { className: "font-semibold", children: name })
         ]
       }
     ),
@@ -12132,12 +11996,13 @@ var PropertyBase = ({
         ),
         children: [
           input({ softRequired, hasValue }),
-          requiredAndNoValue && /* @__PURE__ */ jsx47("div", { className: "text-warning", children: /* @__PURE__ */ jsx47(AlertTriangle, { size: 24 }) }),
-          onRemove && !readOnly && /* @__PURE__ */ jsx47(
-            TextButton,
+          requiredAndNoValue && /* @__PURE__ */ jsx46("div", { className: "text-warning", children: /* @__PURE__ */ jsx46(AlertTriangle, { size: 24 }) }),
+          onRemove && !readOnly && /* @__PURE__ */ jsx46(
+            Button,
             {
               onClick: onRemove,
               color: "negative",
+              coloringStyle: "text",
               className: clsx37("items-center"),
               disabled: !hasValue,
               children: translation("remove")
@@ -12151,7 +12016,7 @@ var PropertyBase = ({
 
 // src/components/properties/CheckboxProperty.tsx
 import { useId as useId9 } from "react";
-import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
 var CheckboxProperty = ({
   value,
   onChange,
@@ -12160,15 +12025,15 @@ var CheckboxProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const id = useId9();
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx47(
     PropertyBase,
     {
       ...baseProps,
       hasValue: true,
       readOnly,
-      icon: /* @__PURE__ */ jsx48(Check3, { size: 24 }),
+      icon: /* @__PURE__ */ jsx47(Check3, { size: 24 }),
       input: () => /* @__PURE__ */ jsxs32("div", { className: "flex-row-2 items-center", children: [
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx47(
           Checkbox,
           {
             id,
@@ -12178,7 +12043,7 @@ var CheckboxProperty = ({
             "aria-labelledby": id + "label"
           }
         ),
-        /* @__PURE__ */ jsx48(Label, { id: id + "label", children: `${translation("yes")}/${translation("no")}` })
+        /* @__PURE__ */ jsx47(Label, { id: id + "label", children: `${translation("yes")}/${translation("no")}` })
       ] })
     }
   );
@@ -12187,7 +12052,7 @@ var CheckboxProperty = ({
 // src/components/properties/DateProperty.tsx
 import { CalendarDays } from "lucide-react";
 import clsx38 from "clsx";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var DateProperty = ({
   value,
   onChange,
@@ -12198,13 +12063,13 @@ var DateProperty = ({
 }) => {
   const hasValue = !!value;
   const dateText = value ? type === "dateTime" ? formatDateTime(value) : formatDate(value) : "";
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx48(
     PropertyBase,
     {
       ...baseProps,
       hasValue,
-      icon: /* @__PURE__ */ jsx49(CalendarDays, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsx49(
+      icon: /* @__PURE__ */ jsx48(CalendarDays, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsx48(
         Input,
         {
           className: clsx38("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
@@ -12230,7 +12095,7 @@ var DateProperty = ({
 // src/components/properties/MultiSelectProperty.tsx
 import { List } from "lucide-react";
 import clsx39 from "clsx";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var MultiSelectProperty = ({
   children,
   values,
@@ -12238,13 +12103,13 @@ var MultiSelectProperty = ({
   ...props
 }) => {
   const hasValue = values.length > 0;
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx49(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx50(List, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsx50(
+      icon: /* @__PURE__ */ jsx49(List, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsx49(
         MultiSelectChipDisplay,
         {
           values,
@@ -12270,7 +12135,7 @@ var MultiSelectProperty = ({
 // src/components/properties/NumberProperty.tsx
 import { Binary } from "lucide-react";
 import clsx40 from "clsx";
-import { jsx as jsx51, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 var NumberProperty = ({
   value,
   onChange,
@@ -12282,47 +12147,59 @@ var NumberProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx50(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ jsx51(Binary, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsxs33(
-        "div",
-        {
-          className: clsx40("flex-row-2 grow", { "text-warning": softRequired && !hasValue }),
-          children: [
-            /* @__PURE__ */ jsx51(
-              Input,
-              {
-                className: clsx40("!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
-                value: value?.toString() ?? "",
-                type: "number",
-                readOnly,
-                placeholder: `${translation("value")}...`,
-                onChangeText: (value2) => {
-                  const numberValue = parseFloat(value2);
-                  if (isNaN(numberValue)) {
-                    onRemove();
-                  } else {
-                    onChange?.(numberValue);
-                  }
-                },
-                onEditCompleted: (value2) => {
-                  const numberValue = parseFloat(value2);
-                  if (isNaN(numberValue)) {
-                    onRemove();
-                  } else {
-                    onEditComplete(numberValue);
+      icon: /* @__PURE__ */ jsx50(Binary, { size: 24 }),
+      input: ({ softRequired }) => (
+        // TODO this max width might be to low for some numbers
+        /* @__PURE__ */ jsxs33(
+          "div",
+          {
+            className: clsx40("relative flex-row-2 max-w-56", { "text-warning": softRequired && !hasValue }),
+            children: [
+              /* @__PURE__ */ jsx50(
+                Input,
+                {
+                  className: clsx40("!ring-0 !border-0 !outline-0 !py-0 pl-0 pr-8 !m-0 !shadow-none !rounded-none w-full", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+                  value: value?.toString() ?? "",
+                  type: "number",
+                  readOnly,
+                  placeholder: `${translation("value")}...`,
+                  onChangeText: (value2) => {
+                    const numberValue = parseFloat(value2);
+                    if (isNaN(numberValue)) {
+                      onRemove();
+                    } else {
+                      onChange?.(numberValue);
+                    }
+                  },
+                  onEditCompleted: (value2) => {
+                    const numberValue = parseFloat(value2);
+                    if (isNaN(numberValue)) {
+                      onRemove();
+                    } else {
+                      onEditComplete(numberValue);
+                    }
                   }
                 }
-              }
-            ),
-            suffix && /* @__PURE__ */ jsx51("span", { className: clsx40("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
-          ]
-        }
+              ),
+              suffix && /* @__PURE__ */ jsx50(
+                "span",
+                {
+                  className: clsx40(
+                    "absolute top-1/2 -translate-y-1/2 right-2",
+                    { "bg-surface-warning": softRequired && !hasValue }
+                  ),
+                  children: suffix
+                }
+              )
+            ]
+          }
+        )
       )
     }
   );
@@ -12331,7 +12208,7 @@ var NumberProperty = ({
 // src/components/properties/SelectProperty.tsx
 import { List as List2 } from "lucide-react";
 import clsx41 from "clsx";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var SingleSelectProperty = ({
   children,
   value,
@@ -12340,13 +12217,13 @@ var SingleSelectProperty = ({
   ...props
 }) => {
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx51(
     PropertyBase,
     {
       ...props,
       hasValue,
-      icon: /* @__PURE__ */ jsx52(List2, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsx52(
+      icon: /* @__PURE__ */ jsx51(List2, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsx51(
         Select,
         {
           value,
@@ -12375,7 +12252,7 @@ import clsx43 from "clsx";
 // src/components/user-action/Textarea.tsx
 import { forwardRef as forwardRef8, useId as useId10 } from "react";
 import clsx42 from "clsx";
-import { jsx as jsx53, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs34 } from "react/jsx-runtime";
 var Textarea = forwardRef8(function Textarea2({
   id,
   onChange,
@@ -12394,7 +12271,7 @@ var Textarea = forwardRef8(function Textarea2({
     onEditCompleted?.(text);
     clearTimer();
   };
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx52(
     "textarea",
     {
       ref,
@@ -12432,7 +12309,7 @@ var TextareaUncontrolled = ({
   ...props
 }) => {
   const [text, setText] = useOverwritableState(value, onChangeText);
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx52(
     Textarea,
     {
       ...props,
@@ -12464,8 +12341,8 @@ var TextareaWithHeadline = ({
         containerClassName
       ),
       children: [
-        headline && /* @__PURE__ */ jsx53(Label, { size: "md", ...headlineProps, htmlFor: usedId, children: headline }),
-        /* @__PURE__ */ jsx53(
+        headline && /* @__PURE__ */ jsx52(Label, { size: "md", ...headlineProps, htmlFor: usedId, children: headline }),
+        /* @__PURE__ */ jsx52(
           Textarea,
           {
             ...props,
@@ -12483,7 +12360,7 @@ var TextareaWithHeadline = ({
 };
 
 // src/components/properties/TextProperty.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var TextProperty = ({
   value,
   readOnly,
@@ -12494,14 +12371,14 @@ var TextProperty = ({
 }) => {
   const translation = useHightideTranslation();
   const hasValue = value !== void 0;
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx53(
     PropertyBase,
     {
       ...baseProps,
       onRemove,
       hasValue,
-      icon: /* @__PURE__ */ jsx54(Text, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ jsx54(
+      icon: /* @__PURE__ */ jsx53(Text, { size: 24 }),
+      input: ({ softRequired }) => /* @__PURE__ */ jsx53(
         Textarea,
         {
           className: clsx43({
@@ -12534,11 +12411,11 @@ var TextProperty = ({
 
 // src/components/table/FillerRowElement.tsx
 import { clsx as clsx44 } from "clsx";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var FillerRowElement = ({
   className
 }) => {
-  return /* @__PURE__ */ jsx55("div", { className: clsx44("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
+  return /* @__PURE__ */ jsx54("div", { className: clsx44("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
 };
 
 // src/components/table/Filter.ts
@@ -12556,7 +12433,7 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-import { useCallback as useCallback12, useEffect as useEffect26, useMemo as useMemo6, useRef as useRef13, useState as useState25 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect27, useMemo as useMemo7, useRef as useRef13, useState as useState26 } from "react";
 import clsx48 from "clsx";
 import {
   flexRender,
@@ -12566,22 +12443,21 @@ import {
   getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { Scrollbars as Scrollbars3 } from "react-custom-scrollbars-2";
 
 // src/components/table/TableCell.tsx
 import { clsx as clsx45 } from "clsx";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsx56("span", { className: clsx45("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ jsx55("span", { className: clsx45("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-import { useEffect as useEffect21 } from "react";
+import { useEffect as useEffect22 } from "react";
 var useResizeCallbackWrapper = (callback) => {
-  useEffect21(() => {
+  useEffect22(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -12592,27 +12468,29 @@ var useResizeCallbackWrapper = (callback) => {
 // src/components/table/TableSortButton.tsx
 import { ChevronDown as ChevronDown3, ChevronsUpDown, ChevronUp } from "lucide-react";
 import clsx46 from "clsx";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var TableSortButton = ({
   sortDirection,
   invert = false,
   color = "neutral",
+  size = "tiny",
   className,
   ...buttonProps
 }) => {
-  let icon = /* @__PURE__ */ jsx57(ChevronsUpDown, { className: "w-full h-full" });
+  let icon = /* @__PURE__ */ jsx56(ChevronsUpDown, { className: "w-full h-full" });
   if (sortDirection) {
     let usedSortDirection = sortDirection;
     if (invert) {
       usedSortDirection = usedSortDirection === "desc" ? "asc" : "desc";
     }
-    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx57(ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ jsx57(ChevronDown3, { className: "w-full h-full" });
+    icon = usedSortDirection === "asc" ? /* @__PURE__ */ jsx56(ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ jsx56(ChevronDown3, { className: "w-full h-full" });
   }
-  return /* @__PURE__ */ jsx57(
-    IconButton,
+  return /* @__PURE__ */ jsx56(
+    Button,
     {
-      size: "tiny",
+      layout: "icon",
       color,
+      size,
       className: clsx46(className),
       ...buttonProps,
       children: icon
@@ -12624,7 +12502,7 @@ var TableSortButton = ({
 import { FilterIcon } from "lucide-react";
 
 // src/components/user-action/Menu.tsx
-import { useEffect as useEffect24, useRef as useRef12, useState as useState23 } from "react";
+import { useEffect as useEffect25, useRef as useRef12, useState as useState24 } from "react";
 import clsx47 from "clsx";
 
 // src/utils/bagFunctions.ts
@@ -12696,15 +12574,15 @@ var usePopoverPosition = (trigger, options) => {
 };
 
 // src/hooks/useHoverState.ts
-import { useEffect as useEffect22, useState as useState22 } from "react";
+import { useEffect as useEffect23, useState as useState23 } from "react";
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
 };
 var useHoverState = (props = void 0) => {
   const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = useState22(false);
-  const [timer, setTimer] = useState22();
+  const [isHovered, setIsHovered] = useState23(false);
+  const [timer, setTimer] = useState23();
   const onMouseEnter = () => {
     if (isDisabled) {
       return;
@@ -12720,14 +12598,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  useEffect22(() => {
+  useEffect23(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  useEffect22(() => {
+  useEffect23(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -12740,9 +12618,9 @@ var useHoverState = (props = void 0) => {
 };
 
 // src/hooks/useOutsideClick.ts
-import { useEffect as useEffect23 } from "react";
+import { useEffect as useEffect24 } from "react";
 var useOutsideClick = (refs, handler) => {
-  useEffect23(() => {
+  useEffect24(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -12760,14 +12638,14 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/components/user-action/Menu.tsx
-import { Fragment as Fragment6, jsx as jsx58, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx57, jsxs as jsxs35 } from "react/jsx-runtime";
 var MenuItem = ({
   children,
   onClick,
   alignment = "left",
   isDisabled = false,
   className
-}) => /* @__PURE__ */ jsx58(
+}) => /* @__PURE__ */ jsx57(
   "div",
   {
     className: clsx47("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
@@ -12803,7 +12681,7 @@ var Menu = ({
   const triggerRef = useRef12(null);
   const menuRef = useRef12(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = useState23(true);
+  const [isHidden, setIsHidden] = useState24(true);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -12814,7 +12692,7 @@ var Menu = ({
     triggerRef.current?.getBoundingClientRect(),
     { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
   );
-  useEffect24(() => {
+  useEffect25(() => {
     if (!isOpen) return;
     const triggerEl = triggerRef.current;
     if (!triggerEl) return;
@@ -12831,14 +12709,15 @@ var Menu = ({
       window.removeEventListener("resize", close);
     };
   }, [isOpen, setIsOpen]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (isOpen) {
       setIsHidden(false);
     }
   }, [isOpen]);
+  const zIndex = useZIndexRegister(isOpen);
   return /* @__PURE__ */ jsxs35(Fragment6, { children: [
     trigger(bag, triggerRef),
-    createPortal4(/* @__PURE__ */ jsx58(
+    createPortal4(/* @__PURE__ */ jsx57(
       "div",
       {
         ref: menuRef,
@@ -12858,7 +12737,8 @@ var Menu = ({
           }
         },
         style: {
-          ...menuPosition
+          ...menuPosition,
+          zIndex
         },
         children: BagFunctionUtil.resolve(children, bag)
       }
@@ -12867,25 +12747,34 @@ var Menu = ({
 };
 
 // src/components/table/TableFilterButton.tsx
-import { useEffect as useEffect25, useState as useState24 } from "react";
-import { Fragment as Fragment7, jsx as jsx59, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useEffect as useEffect26, useState as useState25 } from "react";
+import { Fragment as Fragment7, jsx as jsx58, jsxs as jsxs36 } from "react/jsx-runtime";
 var TableFilterButton = ({
   filterType,
   column
 }) => {
   const translation = useHightideTranslation();
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = useState24(columnFilterValue);
+  const [filterValue, setFilterValue] = useState25(columnFilterValue);
   const hasFilter = !!filterValue;
-  useEffect25(() => {
+  useEffect26(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx58(
     Menu,
     {
       trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ jsxs36("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ jsx59(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ jsx59(FilterIcon, {}) }),
-        hasFilter && /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx58(
+          Button,
+          {
+            layout: "icon",
+            color: "neutral",
+            size: "tiny",
+            onClick: toggleOpen,
+            children: /* @__PURE__ */ jsx58(FilterIcon, {})
+          }
+        ),
+        hasFilter && /* @__PURE__ */ jsx58(
           "div",
           {
             className: "absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-primary pointer-events-none",
@@ -12894,8 +12783,8 @@ var TableFilterButton = ({
         )
       ] }),
       children: ({ close }) => /* @__PURE__ */ jsxs36("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
-        /* @__PURE__ */ jsx59("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
-        filterType === "text" && /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx58("h4", { className: "typography-label-md-semibold", children: translation("filter") }),
+        filterType === "text" && /* @__PURE__ */ jsx58(
           Input,
           {
             value: filterValue ?? "",
@@ -12906,7 +12795,7 @@ var TableFilterButton = ({
           }
         ),
         filterType === "range" && /* @__PURE__ */ jsxs36("div", { className: "flex-row-2 items-center", children: [
-          /* @__PURE__ */ jsx59(
+          /* @__PURE__ */ jsx58(
             Input,
             {
               value: filterValue?.[0] ?? "",
@@ -12919,8 +12808,8 @@ var TableFilterButton = ({
               className: "h-10 input-indicator-hidden w-40"
             }
           ),
-          /* @__PURE__ */ jsx59("span", { className: "font-bold", children: "-" }),
-          /* @__PURE__ */ jsx59(
+          /* @__PURE__ */ jsx58("span", { className: "font-bold", children: "-" }),
+          /* @__PURE__ */ jsx58(
             Input,
             {
               value: filterValue?.[1] ?? "",
@@ -12935,7 +12824,7 @@ var TableFilterButton = ({
           )
         ] }),
         filterType === "dateRange" && /* @__PURE__ */ jsxs36(Fragment7, { children: [
-          /* @__PURE__ */ jsx59(
+          /* @__PURE__ */ jsx58(
             Input,
             {
               value: filterValue?.[0] ? filterValue?.[0].toISOString().slice(0, 16) : "",
@@ -12948,7 +12837,7 @@ var TableFilterButton = ({
               className: "h-10 w-50"
             }
           ),
-          /* @__PURE__ */ jsx59(
+          /* @__PURE__ */ jsx58(
             Input,
             {
               value: filterValue?.[1] ? filterValue?.[1].toISOString().slice(0, 16) : "",
@@ -12963,11 +12852,11 @@ var TableFilterButton = ({
           )
         ] }),
         /* @__PURE__ */ jsxs36("div", { className: "flex-row-2 justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ jsx59(SolidButton, { color: "negative", size: "small", onClick: () => {
+          hasFilter && /* @__PURE__ */ jsx58(Button, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();
           }, children: translation("remove") }),
-          /* @__PURE__ */ jsx59(SolidButton, { size: "small", onClick: () => {
+          /* @__PURE__ */ jsx58(Button, { size: "small", onClick: () => {
             column.setFilterValue(filterValue);
             close();
           }, children: translation("apply") })
@@ -12978,7 +12867,7 @@ var TableFilterButton = ({
 };
 
 // src/components/table/Table.tsx
-import { jsx as jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs37 } from "react/jsx-runtime";
 var Table = ({
   data,
   fillerRow,
@@ -12986,6 +12875,7 @@ var Table = ({
   onRowClick,
   className,
   tableClassName,
+  tableContainerClassName,
   defaultColumn,
   state,
   columns,
@@ -12993,20 +12883,20 @@ var Table = ({
 }) => {
   const ref = useRef13(null);
   const tableRef = useRef13(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 = useMemo6(() => {
+  const [columnFilters, setColumnFilters] = useState26(initialState?.columnFilters);
+  const computedColumnMinWidths = useMemo7(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -13015,7 +12905,7 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const computedColumnMaxWidths = useMemo6(() => {
+  const computedColumnMaxWidths = useMemo7(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -13023,12 +12913,12 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const tableMinWidth = useMemo6(() => {
+  const tableMinWidth = useMemo7(() => {
     return columns.reduce((sum, column) => {
       return sum + computedColumnMinWidths[column.id];
     }, 0);
   }, [columns, computedColumnMinWidths]);
-  const updateColumnSizes = useMemo6(() => {
+  const updateColumnSizes = useMemo7(() => {
     return (previous) => {
       const updateSizing = {
         ...columnSizing,
@@ -13097,7 +12987,7 @@ var Table = ({
       minSize: 60,
       maxSize: 700,
       cell: ({ cell }) => {
-        return /* @__PURE__ */ jsx60(TableCell, { children: cell.getValue() });
+        return /* @__PURE__ */ jsx59(TableCell, { children: cell.getValue() });
       },
       ...defaultColumn
     },
@@ -13145,8 +13035,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));
@@ -13156,7 +13046,7 @@ var Table = ({
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  useEffect26(() => {
+  useEffect27(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -13172,7 +13062,7 @@ var Table = ({
       }));
     }
   }, [data, pageCount, pagination.pageSize, pagination.pageIndex]);
-  const columnSizeVars = useMemo6(() => {
+  const columnSizeVars = useMemo7(() => {
     const headers = table.getFlatHeaders();
     const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
@@ -13182,126 +13072,116 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  console.log(table.getState().sorting);
   return /* @__PURE__ */ jsxs37("div", { ref, className: clsx48("flex-col-4", className), children: [
-    /* @__PURE__ */ jsx60(
-      Scrollbars3,
+    /* @__PURE__ */ jsx59("div", { className: clsx48("flex-col-0 w-full overflow-auto", tableContainerClassName), children: /* @__PURE__ */ jsxs37(
+      "table",
       {
-        autoHeight: true,
-        autoHeightMax: tableRef.current?.offsetHeight ? tableRef.current?.offsetHeight + 2 : void 0,
-        autoHide: true,
-        children: /* @__PURE__ */ jsxs37(
-          "table",
-          {
-            ref: tableRef,
-            className: clsx48(tableClassName),
-            style: {
-              ...columnSizeVars,
-              width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
+        ref: tableRef,
+        className: clsx48(tableClassName),
+        style: {
+          ...columnSizeVars,
+          width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
+        },
+        children: [
+          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx59("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx59(
+            "col",
+            {
+              style: {
+                width: `calc(var(--header-${header?.id}-size) * 1px)`,
+                minWidth: header.column.columnDef.minSize,
+                maxWidth: header.column.columnDef.maxSize
+              }
             },
-            children: [
-              table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx60("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx60(
-                "col",
-                {
-                  style: {
-                    width: `calc(var(--header-${header?.id}-size) * 1px)`,
-                    minWidth: header.column.columnDef.minSize,
-                    maxWidth: header.column.columnDef.maxSize
-                  }
-                },
-                header.id
-              )) }, headerGroup.id)),
-              /* @__PURE__ */ jsx60("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx60("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-                return /* @__PURE__ */ jsxs37(
-                  "th",
-                  {
-                    colSpan: header.colSpan,
-                    className: clsx48("relative group", header.column.columnDef.meta?.className),
-                    children: [
-                      /* @__PURE__ */ jsx60("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs37("div", { className: "flex-row-1 items-center", children: [
-                        header.column.getCanSort() && /* @__PURE__ */ jsx60(
-                          TableSortButton,
-                          {
-                            sortDirection: header.column.getIsSorted(),
-                            onClick: () => {
-                              const sorted = header.column.getIsSorted();
-                              const isMulti = header.column.getCanMultiSort();
-                              console.log(isMulti, header.column.id);
-                              if (!isMulti) {
-                                table.resetSorting();
-                              }
-                              if (!sorted) {
-                                header.column.toggleSorting(true, isMulti);
-                                return;
-                              } else if (sorted === "desc") {
-                                header.column.toggleSorting(false, isMulti);
-                              }
-                              if (sorted === "asc") {
-                                header.column.clearSorting();
-                              }
-                            }
+            header.id
+          )) }, headerGroup.id)),
+          /* @__PURE__ */ jsx59("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx59("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+            return /* @__PURE__ */ jsxs37(
+              "th",
+              {
+                colSpan: header.colSpan,
+                className: clsx48("relative group", header.column.columnDef.meta?.className),
+                children: [
+                  /* @__PURE__ */ jsx59("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs37("div", { className: "flex-row-1 items-center", children: [
+                    header.column.getCanSort() && /* @__PURE__ */ jsx59(
+                      TableSortButton,
+                      {
+                        sortDirection: header.column.getIsSorted(),
+                        onClick: () => {
+                          const sorted = header.column.getIsSorted();
+                          const isMulti = header.column.getCanMultiSort();
+                          if (!isMulti) {
+                            table.resetSorting();
                           }
-                        ),
-                        header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx60(
-                          TableFilterButton,
-                          {
-                            column: header.column,
-                            filterType: header.column.columnDef.meta.filterType
+                          if (!sorted) {
+                            header.column.toggleSorting(true, isMulti);
+                            return;
+                          } else if (sorted === "desc") {
+                            header.column.toggleSorting(false, isMulti);
                           }
-                        ) : null,
-                        flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )
-                      ] }) }),
-                      header.column.getCanResize() && /* @__PURE__ */ jsx60(
-                        "div",
-                        {
-                          onMouseDown: header.getResizeHandler(),
-                          onTouchStart: header.getResizeHandler(),
-                          onDoubleClick: () => {
-                            header.column.resetSize();
-                          },
-                          className: "table-resize-indicator w-2 rounded bg-primary cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 transition-opacity",
-                          style: {
-                            opacity: !columnSizingInfo?.columnSizingStart ? void 0 : columnSizingInfo?.columnSizingStart?.findIndex(([id, _]) => id === header.column.id) !== -1 ? 1 : columnSizingInfo?.columnSizingStart?.length !== 0 ? 0 : void 0
+                          if (sorted === "asc") {
+                            header.column.clearSorting();
                           }
                         }
-                      )
-                    ]
-                  },
-                  header.id
-                );
-              }) }, headerGroup.id)) }),
-              /* @__PURE__ */ jsxs37("tbody", { children: [
-                table.getRowModel().rows.map((row) => {
-                  return /* @__PURE__ */ jsx60(
-                    "tr",
+                      }
+                    ),
+                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ jsx59(
+                      TableFilterButton,
+                      {
+                        column: header.column,
+                        filterType: header.column.columnDef.meta.filterType
+                      }
+                    ) : null,
+                    flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )
+                  ] }) }),
+                  header.column.getCanResize() && /* @__PURE__ */ jsx59(
+                    "div",
                     {
-                      onClick: () => onRowClick?.(row, table),
-                      className: table.options.meta?.bodyRowClassName,
-                      children: row.getVisibleCells().map((cell) => {
-                        return /* @__PURE__ */ jsx60("td", { children: flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        ) }, cell.id);
-                      })
-                    },
-                    row.id
-                  );
-                }),
-                range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-                  return /* @__PURE__ */ jsx60("tr", { children: columns.map((column) => {
-                    return /* @__PURE__ */ jsx60("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx60(FillerRowElement, {}) }, column.id);
-                  }) }, "filler-row-" + index);
-                })
-              ] })
-            ]
-          }
-        )
+                      onMouseDown: header.getResizeHandler(),
+                      onTouchStart: header.getResizeHandler(),
+                      onDoubleClick: () => {
+                        header.column.resetSize();
+                      },
+                      className: "table-resize-indicator w-2 rounded bg-primary cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 transition-opacity",
+                      style: {
+                        opacity: !columnSizingInfo?.columnSizingStart ? void 0 : columnSizingInfo?.columnSizingStart?.findIndex(([id, _]) => id === header.column.id) !== -1 ? 1 : columnSizingInfo?.columnSizingStart?.length !== 0 ? 0 : void 0
+                      }
+                    }
+                  )
+                ]
+              },
+              header.id
+            );
+          }) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsxs37("tbody", { children: [
+            table.getRowModel().rows.map((row) => {
+              return /* @__PURE__ */ jsx59(
+                "tr",
+                {
+                  onClick: () => onRowClick?.(row, table),
+                  className: table.options.meta?.bodyRowClassName,
+                  children: row.getVisibleCells().map((cell) => {
+                    return /* @__PURE__ */ jsx59("td", { children: flexRender(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    ) }, cell.id);
+                  })
+                },
+                row.id
+              );
+            }),
+            range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
+              return /* @__PURE__ */ jsx59("tr", { children: columns.map((column) => {
+                return /* @__PURE__ */ jsx59("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ jsx59(FillerRowElement, {}) }, column.id);
+              }) }, "filler-row-" + index);
+            })
+          ] })
+        ]
       }
-    ),
-    /* @__PURE__ */ jsx60("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ jsx60(
+    ) }),
+    /* @__PURE__ */ jsx59("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ jsx59(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -13313,7 +13193,7 @@ var Table = ({
 };
 var TableUncontrolled = ({ data, ...props }) => {
   const [usedDate] = useOverwritableState(data);
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx59(
     Table,
     {
       ...props,
@@ -13332,12 +13212,12 @@ var TableWithSelection = ({
   meta,
   ...props
 }) => {
-  const columnsWithSelection = useMemo6(() => {
+  const columnsWithSelection = useMemo7(() => {
     return [
       {
         id: selectionRowId,
         header: ({ table }) => {
-          return /* @__PURE__ */ jsx60(
+          return /* @__PURE__ */ jsx59(
             Checkbox,
             {
               checked: table.getIsAllRowsSelected(),
@@ -13350,7 +13230,7 @@ var TableWithSelection = ({
           );
         },
         cell: ({ row }) => {
-          return /* @__PURE__ */ jsx60(
+          return /* @__PURE__ */ jsx59(
             Checkbox,
             {
               disabled: !row.getCanSelect(),
@@ -13368,15 +13248,15 @@ var TableWithSelection = ({
       ...columns
     ];
   }, [columns, selectionRowId]);
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx59(
     Table,
     {
       columns: columnsWithSelection,
       fillerRow: (columnId, table) => {
         if (columnId === selectionRowId) {
-          return /* @__PURE__ */ jsx60(Checkbox, { checked: false, disabled: true, className: "max-w-6" });
+          return /* @__PURE__ */ jsx59(Checkbox, { checked: false, disabled: true, className: "max-w-6" });
         }
-        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx60(FillerRowElement, {});
+        return fillerRow ? fillerRow(columnId, table) : /* @__PURE__ */ jsx59(FillerRowElement, {});
       },
       state: {
         rowSelection,
@@ -13401,7 +13281,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/utils/writeToClipboard.ts
@@ -13411,7 +13291,7 @@ var writeToClipboard = (text) => {
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
 import { CheckIcon as CheckIcon2, Copy } from "lucide-react";
-import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs38 } from "react/jsx-runtime";
 var CopyToClipboardWrapper = ({
   children,
   textToCopy,
@@ -13421,8 +13301,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useHightideTranslation();
-  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]`,
@@ -13476,14 +13356,14 @@ var CopyToClipboardWrapper = ({
             },
             children: [
               isShowingConfirmation && /* @__PURE__ */ jsxs38("div", { className: "flex-row-1", children: [
-                /* @__PURE__ */ jsx61(CheckIcon2, { size: 16, className: "text-positive" }),
+                /* @__PURE__ */ jsx60(CheckIcon2, { size: 16, className: "text-positive" }),
                 translation("copied")
               ] }),
               isShowingIndication && /* @__PURE__ */ jsxs38("div", { className: "flex-row-1 text-description", children: [
-                /* @__PURE__ */ jsx61(Copy, { size: 16 }),
+                /* @__PURE__ */ jsx60(Copy, { size: 16 }),
                 translation("clickToCopy")
               ] }),
-              /* @__PURE__ */ jsx61(
+              /* @__PURE__ */ jsx60(
                 "div",
                 {
                   className: clsx49(`absolute w-0 h-0`, triangleClasses[position]),
@@ -13500,7 +13380,7 @@ var CopyToClipboardWrapper = ({
 
 // src/components/user-action/DateAndTimePicker.tsx
 import clsx50 from "clsx";
-import { jsx as jsx62, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs39 } from "react/jsx-runtime";
 var DateTimePicker = ({
   value = /* @__PURE__ */ new Date(),
   start = subtractDuration(/* @__PURE__ */ new Date(), { years: 50 }),
@@ -13518,12 +13398,12 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ jsx62(
+    dateDisplay = /* @__PURE__ */ jsx61(
       DatePicker,
       {
         ...datePickerProps,
-        className: "min-w-[320px] min-h-[250px]",
-        yearMonthPickerProps: { maxHeight: 218 },
+        className: "min-w-80 min-h-71 max-h-71",
+        yearMonthPickerProps: { className: "h-full grow" },
         value,
         start,
         end,
@@ -13532,12 +13412,11 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ jsx62(
+    timeDisplay = /* @__PURE__ */ jsx61(
       TimePicker,
       {
         ...timePickerProps,
-        className: clsx50("h-full", { "justify-between w-full": mode === "time" }),
-        maxHeight: 250,
+        className: clsx50("min-h-71 max-h-71", { "justify-between w-full": mode === "time" }),
         time: value,
         onChange
       }
@@ -13548,10 +13427,10 @@ var DateTimePicker = ({
       dateDisplay,
       timeDisplay
     ] }),
-    /* @__PURE__ */ jsx62("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ jsxs39("div", { className: "flex-row-2 mt-1", children: [
-      /* @__PURE__ */ jsx62(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ jsx62(
-        SolidButton,
+    /* @__PURE__ */ jsx61("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ jsxs39("div", { className: "flex-row-2 mt-1", children: [
+      /* @__PURE__ */ jsx61(Button, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
+      /* @__PURE__ */ jsx61(
+        Button,
         {
           size: "medium",
           onClick: () => onFinish?.(value),
@@ -13563,9 +13442,9 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-import { useCallback as useCallback13, useEffect as useEffect27, useState as useState27 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect28, useState as useState28 } from "react";
 import clsx51 from "clsx";
-import { jsx as jsx63, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -13584,7 +13463,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState27({
+  }, setAnimation] = useState28({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -13683,7 +13562,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect27(() => {
+  useEffect28(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -13704,7 +13583,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx62(
     "div",
     {
       className: "relative overflow-hidden",
@@ -13716,14 +13595,14 @@ var ScrollPicker = ({
         }
       },
       children: /* @__PURE__ */ jsxs40("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ jsx63(
+        /* @__PURE__ */ jsx62(
           "div",
           {
             className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/50 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ jsx63(
+        /* @__PURE__ */ jsx62(
           "div",
           {
             className: "flex-col-2 select-none",
@@ -13731,7 +13610,7 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx63(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx62(
               "div",
               {
                 className: clsx51(
@@ -13763,7 +13642,7 @@ var ScrollPicker = ({
 // src/components/user-action/SearchBar.tsx
 import { Search } from "lucide-react";
 import { clsx as clsx52 } from "clsx";
-import { jsx as jsx64, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs41 } from "react/jsx-runtime";
 var SearchBar = ({
   placeholder,
   onSearch,
@@ -13773,28 +13652,36 @@ var SearchBar = ({
 }) => {
   const translation = useHightideTranslation();
   return /* @__PURE__ */ jsxs41("div", { className: clsx52("flex-row-2 justify-between items-center", containerClassName), children: [
-    /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx63(
       Input,
       {
         ...inputProps,
         placeholder: placeholder ?? translation("search")
       }
     ),
-    onSearch && /* @__PURE__ */ jsx64(IconButton, { color: "neutral", disabled: disableOnSearch, onClick: onSearch, children: /* @__PURE__ */ jsx64(Search, { className: "w-full h-full" }) })
+    onSearch && /* @__PURE__ */ jsx63(
+      Button,
+      {
+        layout: "icon",
+        color: "neutral",
+        disabled: disableOnSearch,
+        onClick: onSearch,
+        children: /* @__PURE__ */ jsx63(Search, { className: "w-full h-full" })
+      }
+    )
   ] });
 };
 
 // src/components/user-action/Tooltip.tsx
 import { clsx as clsx53 } from "clsx";
-import { jsx as jsx65, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs42 } from "react/jsx-runtime";
 var Tooltip = ({
   tooltip,
   children,
   animationDelay = 650,
   tooltipClassName = "",
   containerClassName = "",
-  position = "bottom",
-  zIndex = 10
+  position = "bottom"
 }) => {
   const { isHovered, handlers } = useHoverState();
   const positionClasses = {
@@ -13816,6 +13703,7 @@ var Tooltip = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
+  const zIndex = useZIndexRegister(isHovered);
   return /* @__PURE__ */ jsxs42(
     "div",
     {
@@ -13835,7 +13723,7 @@ var Tooltip = ({
             style: { zIndex, animationDelay: animationDelay + "ms" },
             children: [
               tooltip,
-              /* @__PURE__ */ jsx65(
+              /* @__PURE__ */ jsx64(
                 "div",
                 {
                   className: clsx53(`absolute w-0 h-0`, triangleClasses[position]),
@@ -13852,20 +13740,20 @@ var Tooltip = ({
 
 // src/components/user-action/input/InsideLabelInput.tsx
 import { useId as useId11 } from "react";
-import { forwardRef as forwardRef9, useState as useState28 } from "react";
+import { forwardRef as forwardRef9, useState as useState29 } from "react";
 import clsx54 from "clsx";
-import { jsx as jsx66, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs43 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef9(function InsideLabelInput2({
   id: customId,
   label,
   ...props
 }, forwardedRef) {
   const { value } = props;
-  const [isFocused, setIsFocused] = useState28(false);
+  const [isFocused, setIsFocused] = useState29(false);
   const generatedId = useId11();
   const id = customId ?? generatedId;
   return /* @__PURE__ */ jsxs43("div", { className: clsx54("relative"), children: [
-    /* @__PURE__ */ jsx66(
+    /* @__PURE__ */ jsx65(
       Input,
       {
         ...props,
@@ -13883,7 +13771,7 @@ var InsideLabelInput = forwardRef9(function InsideLabelInput2({
         }
       }
     ),
-    /* @__PURE__ */ jsx66(
+    /* @__PURE__ */ jsx65(
       "label",
       {
         id: id + "-label",
@@ -13905,7 +13793,7 @@ var InsideLabelInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, props.onChangeText);
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx65(
     InsideLabelInput,
     {
       ...props,
@@ -13916,26 +13804,26 @@ var InsideLabelInputUncontrolled = ({
 };
 
 // src/components/user-action/input/ToggleableInput.tsx
-import { forwardRef as forwardRef10, useEffect as useEffect28, useImperativeHandle as useImperativeHandle4, useRef as useRef14, useState as useState29 } from "react";
+import { forwardRef as forwardRef10, useEffect as useEffect29, useImperativeHandle as useImperativeHandle4, useRef as useRef14, useState as useState30 } from "react";
 import { Pencil } from "lucide-react";
 import clsx55 from "clsx";
-import { jsx as jsx67, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs44 } from "react/jsx-runtime";
 var ToggleableInput = forwardRef10(function ToggleableInput2({
   value,
   initialState = "display",
   editCompleteOptions,
   ...props
 }, forwardedRef) {
-  const [isEditing, setIsEditing] = useState29(initialState !== "display");
+  const [isEditing, setIsEditing] = useState30(initialState !== "display");
   const innerRef = useRef14(null);
   useImperativeHandle4(forwardedRef, () => innerRef.current);
-  useEffect28(() => {
+  useEffect29(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
   return /* @__PURE__ */ jsxs44("div", { className: clsx55("relative flex-row-2", { "flex-1": isEditing }), children: [
-    /* @__PURE__ */ jsx67(
+    /* @__PURE__ */ jsx66(
       Input,
       {
         ...props,
@@ -13962,8 +13850,8 @@ var ToggleableInput = forwardRef10(function ToggleableInput2({
       }
     ),
     !isEditing && /* @__PURE__ */ jsxs44("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsx67("span", { className: clsx55(" truncate"), children: value }),
-      /* @__PURE__ */ jsx67(Pencil, { className: clsx55(`size-force-4`, { "text-transparent": isEditing }) })
+      /* @__PURE__ */ jsx66("span", { className: clsx55(" truncate"), children: value }),
+      /* @__PURE__ */ jsx66(Pencil, { className: clsx55(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -13973,7 +13861,7 @@ var ToggleableInputUncontrolled = ({
   ...restProps
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, onChangeText);
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx66(
     ToggleableInput,
     {
       value,
@@ -13987,7 +13875,7 @@ var ToggleableInputUncontrolled = ({
 import { useRef as useRef15 } from "react";
 import { useImperativeHandle as useImperativeHandle5 } from "react";
 import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 var FocusTrap = forwardRef11(function FocusTrap2({
   active = true,
   initialFocus,
@@ -13997,20 +13885,20 @@ var FocusTrap = forwardRef11(function FocusTrap2({
   const innerRef = useRef15(null);
   useImperativeHandle5(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus, focusFirst });
-  return /* @__PURE__ */ jsx68("div", { ref: innerRef, ...props });
+  return /* @__PURE__ */ jsx67("div", { ref: innerRef, ...props });
 });
 
 // src/components/utils/Transition.tsx
-import { useEffect as useEffect29, useState as useState30 } from "react";
+import { useEffect as useEffect30, useState as useState31 } from "react";
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = useState30(show);
-  const [isTransitioning, setIsTransitioning] = useState30(!isOpen);
+  const [isOpen, setIsOpen] = useState31(show);
+  const [isTransitioning, setIsTransitioning] = useState31(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  useEffect29(() => {
+  useEffect30(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -14035,7 +13923,7 @@ function Transition({
 }
 
 // src/hooks/focus/useFocusGuards.ts
-import { useEffect as useEffect30 } from "react";
+import { useEffect as useEffect31 } from "react";
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -14073,7 +13961,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  useEffect30(() => {
+  useEffect31(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -14082,10 +13970,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-import React6, { useEffect as useEffect31 } from "react";
+import React6, { useEffect as useEffect32 } from "react";
 var useFocusOnceVisible = (ref, disable = false) => {
   const [hasUsedFocus, setHasUsedFocus] = React6.useState(false);
-  useEffect31(() => {
+  useEffect32(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -14111,7 +13999,7 @@ var useRerender = () => {
 };
 
 // src/hooks/useSearch.ts
-import { useCallback as useCallback14, useEffect as useEffect32, useMemo as useMemo7, useState as useState31 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect33, useMemo as useMemo8, useState as useState32 } from "react";
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -14150,9 +14038,9 @@ var useSearch = ({
   filter,
   disabled = false
 }) => {
-  const [search, setSearch] = useState31(initialSearch ?? "");
-  const [result, setResult] = useState31(list);
-  const searchTags = useMemo7(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const [search, setSearch] = useState32(initialSearch ?? "");
+  const [result, setResult] = useState32(list);
+  const searchTags = useMemo8(() => additionalSearchTags ?? [], [additionalSearchTags]);
   const updateSearch = useCallback14((newSearch) => {
     const usedSearch = newSearch ?? search;
     if (newSearch) {
@@ -14160,24 +14048,24 @@ var useSearch = ({
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
   }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = useMemo7(() => {
+  const filteredResult = useMemo8(() => {
     if (!filter) {
       return result;
     }
     return result.filter(filter);
   }, [result, filter]);
-  const sortedAndFilteredResult = useMemo7(() => {
+  const sortedAndFilteredResult = useMemo8(() => {
     if (!sortingFunction) {
       return filteredResult;
     }
     return filteredResult.sort(sortingFunction);
   }, [filteredResult, sortingFunction]);
-  const usedResult = useMemo7(() => {
+  const usedResult = useMemo8(() => {
     if (!disabled) {
       return sortedAndFilteredResult;
     }
@@ -14408,7 +14296,7 @@ export {
   AvatarUtil,
   BagFunctionUtil,
   BreadCrumb,
-  ButtonColorUtil,
+  Button,
   ButtonUtil,
   Carousel,
   CarouselSlide,
@@ -14442,8 +14330,6 @@ export {
   FormElementWrapper,
   HelpwaveBadge,
   HelpwaveLogo,
-  IconButton,
-  IconButtonUtil,
   Input,
   InputDialog,
   InputUncontrolled,
@@ -14479,7 +14365,6 @@ export {
   Navigation,
   NavigationItemList,
   NumberProperty,
-  OutlineButton,
   Pagination,
   ProgressIndicator,
   PromiseUtils,
@@ -14500,7 +14385,6 @@ export {
   SimpleSearch,
   SimpleSearchWithMapping,
   SingleSelectProperty,
-  SolidButton,
   StepperBar,
   StepperBarUncontrolled,
   Tab,
@@ -14513,7 +14397,6 @@ export {
   TableUncontrolled,
   TableWithSelection,
   TagIcon,
-  TextButton,
   TextImage,
   TextProperty,
   Textarea,
@@ -14545,7 +14428,6 @@ export {
   equalSizeGroups,
   formatDate,
   formatDateTime,
-  generateShadingColors,
   getBetweenDuration,
   getDaysInMonth,
   getNeighbours,
@@ -14558,7 +14440,6 @@ export {
   noop,
   range,
   resolveSetState,
-  shadingColorValues,
   subtractDuration,
   useDelay,
   useFloatingElement,
@@ -14583,6 +14464,7 @@ export {
   useTabContext,
   useTheme,
   useTranslatedValidators,
+  useZIndexRegister,
   validateEmail,
   weekDayList,
   writeToClipboard