@helpwave/hightide 0.2.0 → 0.4.0

package/dist/index.js

@@ -6246,7 +6246,7 @@ __export(index_exports, {
   AvatarUtil: () => AvatarUtil,
   BagFunctionUtil: () => BagFunctionUtil,
   BreadCrumb: () => BreadCrumb,
-  ButtonColorUtil: () => ButtonColorUtil,
+  Button: () => Button,
   ButtonUtil: () => ButtonUtil,
   Carousel: () => Carousel,
   CarouselSlide: () => CarouselSlide,
@@ -6280,8 +6280,6 @@ __export(index_exports, {
   FormElementWrapper: () => FormElementWrapper,
   HelpwaveBadge: () => HelpwaveBadge,
   HelpwaveLogo: () => HelpwaveLogo,
-  IconButton: () => IconButton,
-  IconButtonUtil: () => IconButtonUtil,
   Input: () => Input,
   InputDialog: () => InputDialog,
   InputUncontrolled: () => InputUncontrolled,
@@ -6317,7 +6315,6 @@ __export(index_exports, {
   Navigation: () => Navigation,
   NavigationItemList: () => NavigationItemList,
   NumberProperty: () => NumberProperty,
-  OutlineButton: () => OutlineButton,
   Pagination: () => Pagination,
   ProgressIndicator: () => ProgressIndicator,
   PromiseUtils: () => PromiseUtils,
@@ -6338,7 +6335,6 @@ __export(index_exports, {
   SimpleSearch: () => SimpleSearch,
   SimpleSearchWithMapping: () => SimpleSearchWithMapping,
   SingleSelectProperty: () => SingleSelectProperty,
-  SolidButton: () => SolidButton,
   StepperBar: () => StepperBar,
   StepperBarUncontrolled: () => StepperBarUncontrolled,
   Tab: () => Tab,
@@ -6351,7 +6347,6 @@ __export(index_exports, {
   TableUncontrolled: () => TableUncontrolled,
   TableWithSelection: () => TableWithSelection,
   TagIcon: () => TagIcon,
-  TextButton: () => TextButton,
   TextImage: () => TextImage,
   TextProperty: () => TextProperty,
   Textarea: () => Textarea,
@@ -6383,7 +6378,6 @@ __export(index_exports, {
   equalSizeGroups: () => equalSizeGroups,
   formatDate: () => formatDate,
   formatDateTime: () => formatDateTime,
-  generateShadingColors: () => generateShadingColors,
   getBetweenDuration: () => getBetweenDuration,
   getDaysInMonth: () => getDaysInMonth,
   getNeighbours: () => getNeighbours,
@@ -6396,7 +6390,6 @@ __export(index_exports, {
   noop: () => noop,
   range: () => range,
   resolveSetState: () => resolveSetState,
-  shadingColorValues: () => shadingColorValues,
   subtractDuration: () => subtractDuration,
   useDelay: () => useDelay,
   useFloatingElement: () => useFloatingElement,
@@ -6421,56 +6414,13 @@ __export(index_exports, {
   useTabContext: () => useTabContext,
   useTheme: () => useTheme,
   useTranslatedValidators: () => useTranslatedValidators,
+  useZIndexRegister: () => useZIndexRegister,
   validateEmail: () => validateEmail,
   weekDayList: () => weekDayList,
   writeToClipboard: () => writeToClipboard
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/coloring/shading.ts
-var import_tinycolor2 = __toESM(require("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] = import_tinycolor2.default.mix((0, import_tinycolor2.default)(previousValue), (0, import_tinycolor2.default)(nextValue), (current2 - previous) / interval * 100).toHexString();
-    }
-    index = j;
-  }
-  return shading;
-};
-
 // src/components/icons-and-geometry/HelpwaveLogo.tsx
 var import_clsx = require("clsx");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -6864,7 +6814,7 @@ var useOverwritableState = (initialValue, onChange) => {
 };
 
 // src/components/date/DayPicker.tsx
-var import_clsx3 = __toESM(require("clsx"));
+var import_clsx4 = __toESM(require("clsx"));
 
 // src/i18n/LocaleProvider.tsx
 var import_react3 = require("react");
@@ -7510,8 +7460,83 @@ var useLanguage = () => {
 };
 
 // src/components/date/DayPicker.tsx
+var import_react5 = require("react");
+
+// src/components/user-action/Button.tsx
 var import_react4 = require("react");
+var import_clsx3 = __toESM(require("clsx"));
 var import_jsx_runtime4 = require("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: "reset-coloring-variables"
+  }
+};
+var Button = (0, import_react4.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__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      ...restProps,
+      ref,
+      className: (0, import_clsx3.default)(
+        "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
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var DayPicker = ({
   displayedMonth,
   selected,
@@ -7525,27 +7550,26 @@ var DayPicker = ({
   const { locale } = useLocale();
   const month = displayedMonth.getMonth();
   const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx3.default)("flex-col-1 min-w-[220px] select-none", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
-    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-row-2 text-center", children: week.map((date) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx4.default)("flex-col-1 min-w-[220px] select-none", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-row-2 text-center", children: weeks[0].map((weekDay, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: "long" }).format(weekDay).substring(0, 2) }, index)) }),
+    weeks.map((week, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-row-2 text-center", children: week.map((date) => {
       const isSelected = !!selected && equalDate(selected, date);
       const isToday = equalDate(/* @__PURE__ */ new Date(), date);
       const isSameMonth = date.getMonth() === month;
       const isDayValid = isInTimeSpan(date, start, end);
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "button",
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        Button,
         {
           disabled: !isDayValid,
-          className: (0, import_clsx3.default)(
+          color: isSelected ? "primary" : "neutral",
+          coloringStyle: isSelected ? "solid" : "text",
+          size: "small",
+          className: (0, import_clsx4.default)(
             "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),
@@ -7562,13 +7586,13 @@ var DayPickerUncontrolled = ({
   onChange,
   ...restProps
 }) => {
-  const [date, setDate] = (0, import_react4.useState)(selected);
-  const [usedDisplayedMonth, setUsedDDisplayedMonth] = (0, import_react4.useState)(displayedMonth);
-  (0, import_react4.useEffect)(() => {
+  const [date, setDate] = (0, import_react5.useState)(selected);
+  const [usedDisplayedMonth, setUsedDDisplayedMonth] = (0, import_react5.useState)(displayedMonth);
+  (0, import_react5.useEffect)(() => {
     setDate(selected);
     setUsedDDisplayedMonth(selected);
   }, [selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     DayPicker,
     {
       displayedMonth: usedDisplayedMonth,
@@ -7585,20 +7609,19 @@ var DayPickerUncontrolled = ({
 
 // src/components/date/YearMonthPicker.tsx
 var import_react7 = require("react");
-var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
 var import_clsx6 = __toESM(require("clsx"));
 
 // src/components/layout/Expandable.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_lucide_react = require("lucide-react");
-var import_clsx4 = __toESM(require("clsx"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_clsx5 = __toESM(require("clsx"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var ExpansionIcon = ({ isExpanded, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_lucide_react.ChevronDown,
     {
       "aria-hidden": true,
-      className: (0, import_clsx4.default)(
+      className: (0, import_clsx5.default)(
         "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
@@ -7606,7 +7629,7 @@ var ExpansionIcon = ({ isExpanded, className }) => {
     }
   );
 };
-var Expandable = (0, import_react5.forwardRef)(function Expandable2({
+var Expandable = (0, import_react6.forwardRef)(function Expandable2({
   children,
   id: providedId,
   label,
@@ -7620,27 +7643,27 @@ var Expandable = (0, import_react5.forwardRef)(function Expandable2({
   contentClassName,
   contentExpandedClassName
 }, ref) {
-  const defaultIcon = (0, import_react5.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
+  const defaultIcon = (0, import_react6.useCallback)((expanded) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExpansionIcon, { isExpanded: expanded }), []);
   icon ??= defaultIcon;
-  const generatedId = (0, import_react5.useId)();
+  const generatedId = (0, import_react6.useId)();
   const id = providedId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       ref,
       onClick: () => !clickOnlyOnHeader && !disabled && onChange?.(!isExpanded),
-      className: (0, import_clsx4.default)(
-        "flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm",
+      className: (0, import_clsx5.default)(
+        "flex-col-0 surface coloring-solid group rounded-lg shadow-sm",
         { "cursor-pointer": !clickOnlyOnHeader && !disabled },
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "button",
           {
             onClick: () => clickOnlyOnHeader && !disabled && onChange?.(!isExpanded),
-            className: (0, import_clsx4.default)(
-              "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
+            className: (0, import_clsx5.default)(
+              "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,
@@ -7657,14 +7680,14 @@ var Expandable = (0, import_react5.forwardRef)(function Expandable2({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             id: `${id}-content`,
-            className: (0, import_clsx4.default)(
+            className: (0, import_clsx5.default)(
               "flex-col-2 px-4 transition-all duration-300 ease-in-out",
               {
-                [(0, import_clsx4.default)("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
+                [(0, import_clsx5.default)("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
                 "max-h-0 opacity-0 overflow-hidden": !isExpanded
               },
               contentClassName
@@ -7677,13 +7700,13 @@ var Expandable = (0, import_react5.forwardRef)(function Expandable2({
     }
   );
 });
-var ExpandableUncontrolled = (0, import_react5.forwardRef)(function ExpandableUncontrolled2({
+var ExpandableUncontrolled = (0, import_react6.forwardRef)(function ExpandableUncontrolled2({
   isExpanded,
   onChange,
   ...props
 }, ref) {
   const [usedIsExpanded, setUsedIsExpanded] = useOverwritableState(isExpanded, onChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Expandable,
     {
       ...props,
@@ -7694,265 +7717,6 @@ var ExpandableUncontrolled = (0, import_react5.forwardRef)(function ExpandableUn
   );
 });
 
-// src/components/user-action/Button.tsx
-var import_react6 = require("react");
-var import_clsx5 = __toESM(require("clsx"));
-var import_jsx_runtime6 = require("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 = (0, import_react6.forwardRef)(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__ */ (0, import_jsx_runtime6.jsxs)(
-    "button",
-    {
-      ref,
-      onClick,
-      className: (0, import_clsx5.default)(
-        "group font-semibold",
-        colorClasses,
-        "not-disabled:hover:brightness-90",
-        "disabled:text-disabled disabled:bg-disabled-background",
-        ButtonUtil.paddingMapping[size],
-        className
-      ),
-      ...restProps,
-      children: [
-        startIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "span",
-          {
-            className: (0, import_clsx5.default)(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "span",
-          {
-            className: (0, import_clsx5.default)(
-              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__ */ (0, import_jsx_runtime6.jsxs)(
-    "button",
-    {
-      onClick,
-      className: (0, import_clsx5.default)(
-        "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__ */ (0, import_jsx_runtime6.jsx)(
-          "span",
-          {
-            className: (0, import_clsx5.default)(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "span",
-          {
-            className: (0, import_clsx5.default)(
-              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__ */ (0, import_jsx_runtime6.jsxs)(
-    "button",
-    {
-      onClick,
-      className: (0, import_clsx5.default)(
-        "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__ */ (0, import_jsx_runtime6.jsx)(
-          "span",
-          {
-            className: (0, import_clsx5.default)(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "span",
-          {
-            className: (0, import_clsx5.default)(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: endIcon
-          }
-        )
-      ]
-    }
-  );
-};
-var IconButton = (0, import_react6.forwardRef)(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__ */ (0, import_jsx_runtime6.jsx)(
-    "button",
-    {
-      ref,
-      className: (0, import_clsx5.default)(
-        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
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var YearMonthPicker = ({
@@ -7961,7 +7725,6 @@ var YearMonthPicker = ({
   end = addDuration(/* @__PURE__ */ new Date(), { years: 50 }),
   onChange,
   className = "",
-  maxHeight = 300,
   showValueOpen = true
 }) => {
   const { locale } = useLocale();
@@ -7982,7 +7745,7 @@ var YearMonthPicker = ({
     return null;
   }
   const years = range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_clsx6.default)("flex-col-0 select-none", className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex-col-1 mr-3", children: years.map((year) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_clsx6.default)("flex-col-1 select-none overflow-y-auto", className), children: years.map((year) => {
     const selectedYear = displayedYearMonth.getFullYear() === year;
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ExpandableUncontrolled,
@@ -8001,7 +7764,7 @@ var YearMonthPicker = ({
           const isBeforeEnd = end === void 0 || firstOfMonth <= end;
           const isValid = isAfterStart && isBeforeEnd;
           return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            SolidButton,
+            Button,
             {
               disabled: !isValid,
               color: selectedMonth && isValid ? "primary" : "neutral",
@@ -8018,7 +7781,7 @@ var YearMonthPicker = ({
       },
       year
     );
-  }) }) }) });
+  }) });
 };
 var YearMonthPickerUncontrolled = ({
   displayedYearMonth,
@@ -8036,37 +7799,6 @@ var YearMonthPickerUncontrolled = ({
   );
 };
 
-// src/i18n/useHightideTranslation.ts
-var import_internationalization2 = require("@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 import_internationalization2.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 (0, import_internationalization2.combineTranslation)([
-    ...translationExtensions,
-    hightideTranslation
-  ], locale);
-}
-
 // src/components/date/DatePicker.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var DatePicker = ({
@@ -8080,17 +7812,18 @@ var DatePicker = ({
   className = ""
 }) => {
   const { locale } = useLocale();
-  const translation = useHightideTranslation();
   const [displayedMonth, setDisplayedMonth] = (0, import_react8.useState)(value);
   const [displayMode, setDisplayMode] = (0, import_react8.useState)(initialDisplay);
   (0, import_react8.useEffect)(() => {
     setDisplayedMonth(value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_clsx7.default)("flex-col-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-row-2 items-center justify-between h-7", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_clsx7.default)("flex-col-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-row-2 items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-        TextButton,
+        Button,
         {
+          size: "small",
+          coloringStyle: "text",
           className: (0, import_clsx7.default)("flex-row-1 items-center cursor-pointer select-none", {
             "text-disabled": displayMode !== "day"
           }),
@@ -8103,10 +7836,22 @@ var DatePicker = ({
       ),
       displayMode === "day" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-row-2 justify-end", children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          SolidButton,
+          Button,
+          {
+            size: "small",
+            coloringStyle: "tonal",
+            onClick: () => {
+              const newDate = /* @__PURE__ */ new Date();
+              newDate.setHours(value.getHours(), value.getMinutes());
+              onChange(newDate);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Calendar, { className: "size-5" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Button,
           {
             size: "small",
-            color: "primary",
             disabled: !isInTimeSpan(subtractDuration(displayedMonth, { months: 1 }), start, end),
             onClick: () => {
               setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
@@ -8115,10 +7860,9 @@ var DatePicker = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          SolidButton,
+          Button,
           {
             size: "small",
-            color: "primary",
             disabled: !isInTimeSpan(addDuration(displayedMonth, { months: 1 }), start, end),
             onClick: () => {
               setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
@@ -8140,33 +7884,19 @@ var DatePicker = ({
           setDisplayMode("day");
         }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        DayPicker,
-        {
-          ...dayPickerProps,
-          displayedMonth,
-          start,
-          end,
-          selected: value,
-          onChange: (date) => {
-            onChange?.(date);
-          }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        TextButton,
-        {
-          color: "primary",
-          onClick: () => {
-            const newDate = /* @__PURE__ */ new Date();
-            newDate.setHours(value.getHours(), value.getMinutes());
-            onChange(newDate);
-          },
-          children: translation("time.today")
+    ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      DayPicker,
+      {
+        ...dayPickerProps,
+        displayedMonth,
+        start,
+        end,
+        selected: value,
+        onChange: (date) => {
+          onChange?.(date);
         }
-      ) })
-    ] })
+      }
+    )
   ] });
 };
 var DatePickerUncontrolled = ({
@@ -8185,6 +7915,37 @@ var DatePickerUncontrolled = ({
   );
 };
 
+// src/i18n/useHightideTranslation.ts
+var import_internationalization2 = require("@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 import_internationalization2.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 (0, import_internationalization2.combineTranslation)([
+    ...translationExtensions,
+    hightideTranslation
+  ], locale);
+}
+
 // src/components/date/TimeDisplay.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var TimeDisplay = ({
@@ -8228,7 +7989,6 @@ var TimeDisplay = ({
 
 // src/components/date/TimePicker.tsx
 var import_react9 = require("react");
-var import_react_custom_scrollbars_22 = require("react-custom-scrollbars-2");
 var import_clsx8 = __toESM(require("clsx"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var TimePicker = ({
@@ -8236,13 +7996,13 @@ var TimePicker = ({
   onChange,
   is24HourFormat = true,
   minuteIncrement = "5min",
-  maxHeight = 300,
+  maxHeight = 280,
   className = ""
 }) => {
   const minuteRef = (0, import_react9.useRef)(null);
   const hourRef = (0, import_react9.useRef)(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);
   (0, import_react9.useEffect)(() => {
     const scrollToItem = () => {
@@ -8289,55 +8049,55 @@ var TimePicker = ({
       break;
   }
   const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - time.getMinutes()) < Math.abs(item2 - time.getMinutes()));
-  const style = (selected) => (0, import_clsx8.default)(
-    "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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_clsx8.default)("flex-row-2 w-fit min-w-[150px] select-none", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_custom_scrollbars_22.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-col-1 h-full", children: hours.map((hour) => {
-      const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_clsx8.default)("flex-row-2 w-fit min-w-[150px] select-none overflow-hidden", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime10.jsx)(
-        "button",
+        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__ */ (0, import_jsx_runtime10.jsx)(import_react_custom_scrollbars_22.Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-col-1 h-full", children: minutes.map((minute) => {
-      const currentMinute = minute === closestMinute;
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-col-1 h-full overflow-y-auto min-w-16", children: minutes.map((minute) => {
+      const isSelected = minute === closestMinute;
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        "button",
+        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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-col-1", children: [
+    }) }),
+    !is24HourFormat && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-col-1 min-w-16", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        "button",
+        Button,
         {
-          className: style(!isPM),
+          size: "small",
+          color: !isPM ? "primary" : "neutral",
           onClick: () => onChangeWrapper((newDate) => isPM && newDate.setHours(newDate.getHours() - 12)),
           children: "AM"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        "button",
+        Button,
         {
-          className: style(isPM),
+          size: "small",
+          color: isPM ? "primary" : "neutral",
           onClick: () => onChangeWrapper((newDate) => !isPM && newDate.setHours(newDate.getHours() + 12)),
           children: "PM"
         }
@@ -8365,8 +8125,8 @@ var TimePickerUncontrolled = ({
 var import_clsx10 = __toESM(require("clsx"));
 
 // src/components/dialog/Dialog.tsx
-var import_react13 = require("react");
 var import_react14 = require("react");
+var import_react15 = require("react");
 var import_clsx9 = __toESM(require("clsx"));
 var import_lucide_react3 = require("lucide-react");
 
@@ -8603,6 +8363,57 @@ var useLogOnce = (message, condition, options) => {
 
 // src/components/dialog/Dialog.tsx
 var import_react_dom = require("react-dom");
+
+// src/hooks/useZIndexRegister.ts
+var import_react13 = require("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] = (0, import_react13.useState)(0);
+  const zIndexRegistry = (0, import_react13.useMemo)(() => ZIndexRegistry.getInstance(), []);
+  (0, import_react13.useEffect)(() => {
+    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
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Dialog = ({
   children,
@@ -8618,11 +8429,11 @@ var Dialog = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const [visible, setVisible] = (0, import_react14.useState)(isOpen);
-  const generatedId = (0, import_react13.useId)();
+  const [visible, setVisible] = (0, import_react15.useState)(isOpen);
+  const generatedId = (0, import_react14.useId)();
   const id = props.id ?? generatedId;
-  const ref = (0, import_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => {
+  const ref = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
     if (isOpen) {
       setVisible(true);
     } else {
@@ -8641,6 +8452,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",
@@ -8649,83 +8461,92 @@ var Dialog = ({
   const positionStyle = positionMap[position];
   if (!visible) return;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { id: `dialog-container-${id}`, className: (0, import_clsx9.default)("fixed inset-0 h-screen w-screen", containerClassName), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "div",
-        {
-          id: `dialog-background-${id}`,
-          hidden: !visible,
-          className: (0, import_clsx9.default)(
-            "fixed inset-0 h-screen w-screen bg-overlay-shadow",
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "div",
+      {
+        id: `dialog-container-${id}`,
+        className: (0, import_clsx9.default)("fixed inset-0 h-screen w-screen", containerClassName),
+        style: { zIndex },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "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__ */ (0, import_jsx_runtime11.jsxs)(
-        "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: (0, import_clsx9.default)(
+                "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: (0, import_clsx9.default)(
-            "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__ */ (0, import_jsx_runtime11.jsx)("div", { className: "typography-title-lg mr-8", children: titleElement }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-description", children: description }),
-            isModal && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              "div",
-              {
-                className: "absolute top-0 right-0",
-                style: {
-                  paddingTop: "inherit",
-                  paddingRight: "inherit"
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            "div",
+            {
+              ...props,
+              id: `dialog-${id}`,
+              ref,
+              hidden: !visible,
+              onKeyDown: (event) => {
+                if (event.key === "Escape") {
+                  onCloseWrapper();
+                }
+              },
+              onAnimationEnd: () => {
+                if (!isOpen) {
+                  setVisible(false);
+                }
+              },
+              className: (0, import_clsx9.default)(
+                "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__ */ (0, import_jsx_runtime11.jsx)(
-                  IconButton,
+                positionStyle,
+                props.className
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "typography-title-lg mr-8", children: titleElement }),
+                description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-description", children: description }),
+                isModal && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "div",
                   {
-                    color: "neutral",
-                    size: "tiny",
-                    "aria-label": translation("close"),
-                    onClick: onCloseWrapper,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.X, {})
+                    className: "absolute top-0 right-0",
+                    style: {
+                      paddingTop: "inherit",
+                      paddingRight: "inherit"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      Button,
+                      {
+                        layout: "icon",
+                        color: "neutral",
+                        size: "tiny",
+                        "aria-label": translation("close"),
+                        onClick: onCloseWrapper,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.X, {})
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            children
-          ]
-        }
-      )
-    ] }),
+                ),
+                children
+              ]
+            }
+          )
+        ]
+      }
+    ),
     document.body
   );
 };
@@ -8753,7 +8574,7 @@ var ConfirmDialog = ({
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-col-2 grow", children }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex-row-4 mt-3 justify-end", children: [
       onCancel && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        SolidButton,
+        Button,
         {
           color: buttonOverwrites?.[0].color ?? "neutral",
           onClick: onCancel,
@@ -8762,7 +8583,7 @@ var ConfirmDialog = ({
         }
       ),
       onDecline && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        SolidButton,
+        Button,
         {
           color: buttonOverwrites?.[1].color ?? "negative",
           onClick: onDecline,
@@ -8771,7 +8592,7 @@ var ConfirmDialog = ({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        SolidButton,
+        Button,
         {
           color: buttonOverwrites?.[2].color ?? mapping[confirmType],
           onClick: onConfirm,
@@ -8811,17 +8632,16 @@ var DiscardChangesDialog = ({
 };
 
 // src/components/user-action/input/Input.tsx
-var import_react17 = require("react");
-var import_clsx11 = __toESM(require("clsx"));
+var import_react18 = require("react");
 
 // src/hooks/useDelay.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var defaultOptions2 = {
   delay: 3e3,
   disabled: false
 };
 function useDelay(options) {
-  const [timer, setTimer] = (0, import_react15.useState)(void 0);
+  const [timer, setTimer] = (0, import_react16.useState)(void 0);
   const { delay, disabled } = {
     ...defaultOptions2,
     ...options
@@ -8840,12 +8660,12 @@ function useDelay(options) {
       setTimer(void 0);
     }, delay));
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     return () => {
       clearTimeout(timer);
     };
   }, [timer]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (disabled) {
       clearTimeout(timer);
       setTimer(void 0);
@@ -8855,9 +8675,9 @@ function useDelay(options) {
 }
 
 // src/hooks/focus/useFocusManagement.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 function useFocusManagement() {
-  const getFocusableElements = (0, import_react16.useCallback)(() => {
+  const getFocusableElements = (0, import_react17.useCallback)(() => {
     return Array.from(
       document.querySelectorAll(
         'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
@@ -8866,7 +8686,7 @@ function useFocusManagement() {
       (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
     );
   }, []);
-  const getNextFocusElement = (0, import_react16.useCallback)(() => {
+  const getNextFocusElement = (0, import_react17.useCallback)(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -8878,11 +8698,11 @@ function useFocusManagement() {
     }
     return nextElement;
   }, [getFocusableElements]);
-  const focusNext = (0, import_react16.useCallback)(() => {
+  const focusNext = (0, import_react17.useCallback)(() => {
     const nextElement = getNextFocusElement();
     nextElement?.focus();
   }, [getNextFocusElement]);
-  const getPreviousFocusElement = (0, import_react16.useCallback)(() => {
+  const getPreviousFocusElement = (0, import_react17.useCallback)(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -8898,7 +8718,7 @@ function useFocusManagement() {
     }
     return previousElement;
   }, [getFocusableElements]);
-  const focusPrevious = (0, import_react16.useCallback)(() => {
+  const focusPrevious = (0, import_react17.useCallback)(() => {
     const previousElement = getPreviousFocusElement();
     if (previousElement) previousElement.focus();
   }, [getPreviousFocusElement]);
@@ -8919,7 +8739,7 @@ var defaultEditCompleteOptions = {
   afterDelay: true,
   delay: 2500
 };
-var Input = (0, import_react17.forwardRef)(function Input2({
+var Input = (0, import_react18.forwardRef)(function Input2({
   value,
   onChange,
   onChangeText,
@@ -8927,8 +8747,6 @@ var Input = (0, import_react17.forwardRef)(function Input2({
   editCompleteOptions,
   disabled = false,
   invalid = false,
-  defaultStyle = true,
-  className,
   ...props
 }, forwardedRef) {
   const {
@@ -8941,8 +8759,8 @@ var Input = (0, import_react17.forwardRef)(function Input2({
     restartTimer,
     clearTimer
   } = useDelay({ delay, disabled: !afterDelay });
-  const innerRef = (0, import_react17.useRef)(null);
-  (0, import_react17.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  const innerRef = (0, import_react18.useRef)(null);
+  (0, import_react18.useImperativeHandle)(forwardedRef, () => innerRef.current);
   const { focusNext } = useFocusManagement();
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "input",
@@ -8951,15 +8769,6 @@ var Input = (0, import_react17.forwardRef)(function Input2({
       ref: innerRef,
       value,
       disabled,
-      className: defaultStyle ? (0, import_clsx11.default)(
-        "px-3 py-2 rounded-md text-sm h-10 border-2 border-transparent focus-style-none",
-        {
-          "bg-input-background text-input-text hover:border-primary focus:border-primary": !disabled && !invalid,
-          "bg-negative/20 text-negative hover:border-negative focus-visible:border-negative": !disabled && invalid,
-          "bg-disabled-background text-disabled border-disabled-border": disabled
-        },
-        className
-      ) : className,
       onKeyDown: (event) => {
         props.onKeyDown?.(event);
         if (!allowEnterComplete) {
@@ -8988,6 +8797,10 @@ var Input = (0, import_react17.forwardRef)(function Input2({
         });
         onChangeText?.(value2);
       },
+      "data-name": props["data-name"] ?? "input",
+      "data-value": value ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0,
       "aria-invalid": props["aria-invalid"] ?? invalid,
       "aria-disabled": props["aria-disabled"] ?? disabled
     }
@@ -9026,70 +8839,46 @@ var InputDialog = ({
   );
 };
 
-// src/components/user-action/select/Select.tsx
-var import_react19 = require("react");
-var import_clsx13 = __toESM(require("clsx"));
+// src/components/user-action/Select.tsx
+var import_react20 = require("react");
+var import_clsx12 = __toESM(require("clsx"));
 
 // src/utils/match.ts
 var match = (key, values) => {
   return values[key];
 };
 
-// src/components/user-action/select/Select.tsx
+// src/components/user-action/Select.tsx
 var import_lucide_react4 = require("lucide-react");
 
 // src/components/layout/Chip.tsx
-var import_clsx12 = __toESM(require("clsx"));
+var import_clsx11 = __toESM(require("clsx"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var chipColors = ["default", "dark", "red", "yellow", "green", "blue", "pink", "orange"];
+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__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       ...restProps,
-      className: (0, import_clsx12.default)(
-        `flex-row-0 w-fit font-semibold`,
+      className: (0, import_clsx11.default)(
+        `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",
@@ -9099,7 +8888,7 @@ var Chip = ({
       ),
       children: [
         children,
-        trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: colorMappingIcon, children: trailingIcon })
+        trailingIcon
       ]
     }
   );
@@ -9108,12 +8897,12 @@ var ChipList = ({
   list,
   className = ""
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_clsx12.default)("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_clsx11.default)("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Chip,
     {
       ...value,
-      color: value.color ?? "default",
-      variant: value.variant ?? "normal",
+      color: value.color,
+      variant: value.variant,
       children: value.children
     },
     index
@@ -9121,7 +8910,7 @@ var ChipList = ({
 };
 
 // src/hooks/useFloatingElement.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/utils/math.ts
 var clamp = (value, range2 = [0, 1]) => {
@@ -9184,9 +8973,9 @@ function useFloatingElement({
   screenPadding = 16,
   gap = 4
 }) {
-  const [style, setStyle] = (0, import_react18.useState)();
+  const [style, setStyle] = (0, import_react19.useState)();
   const isMounted = useIsMounted();
-  const calculate = (0, import_react18.useCallback)(() => {
+  const calculate = (0, import_react19.useCallback)(() => {
     const containerRect = containerRef.current.getBoundingClientRect();
     const windowRect = windowRef?.current.getBoundingClientRect() ?? {
       top: 0,
@@ -9216,14 +9005,14 @@ function useFloatingElement({
   }, [anchorRef, containerRef, gap, horizontalAlignment, screenPadding, verticalAlignment, windowRef]);
   const height = containerRef.current?.getBoundingClientRect().height;
   const width = containerRef.current?.getBoundingClientRect().width;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (active && isMounted) {
       calculate();
     } else {
       setStyle(void 0);
     }
   }, [calculate, active, isMounted, height, width]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     window.addEventListener("resize", calculate);
     let timeout;
     if (isPolling) {
@@ -9239,15 +9028,15 @@ function useFloatingElement({
   return style;
 }
 
-// src/components/user-action/select/Select.tsx
+// src/components/user-action/Select.tsx
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var defaultToggleOpenOptions = {
   highlightStartPositionBehavior: "first"
 };
-var SelectContext = (0, import_react19.createContext)(null);
+var SelectContext = (0, import_react20.createContext)(null);
 function useSelectContext() {
-  const ctx = (0, import_react19.useContext)(SelectContext);
+  const ctx = (0, import_react20.useContext)(SelectContext);
   if (!ctx) {
     throw new Error("SelectContext must be used within a ListBoxPrimitive");
   }
@@ -9266,18 +9055,18 @@ var SelectRoot = ({
   isMultiSelect = false,
   iconAppearance = "left"
 }) => {
-  const triggerRef = (0, import_react19.useRef)(null);
-  const generatedId = (0, import_react19.useId)();
+  const triggerRef = (0, import_react20.useRef)(null);
+  const generatedId = (0, import_react20.useId)();
   const usedId = id ?? generatedId;
-  const [internalState, setInternalState] = (0, import_react19.useState)({
+  const [internalState, setInternalState] = (0, import_react20.useState)({
     isOpen,
     options: []
   });
-  const selectedValues = (0, import_react19.useMemo)(
+  const selectedValues = (0, import_react20.useMemo)(
     () => isMultiSelect ? values ?? [] : [value].filter(Boolean),
     [isMultiSelect, value, values]
   );
-  const selectedOptions = (0, import_react19.useMemo)(
+  const selectedOptions = (0, import_react20.useMemo)(
     () => selectedValues.map((value2) => internalState.options.find((option) => value2 === option.value)).filter(Boolean),
     [selectedValues, internalState.options]
   );
@@ -9293,7 +9082,7 @@ var SelectRoot = ({
     isMultiSelect,
     iconAppearance
   };
-  const registerItem = (0, import_react19.useCallback)((item) => {
+  const registerItem = (0, import_react20.useCallback)((item) => {
     setInternalState((prev) => {
       const updatedOptions = [...prev.options, item];
       updatedOptions.sort((a, b) => {
@@ -9308,7 +9097,7 @@ var SelectRoot = ({
       };
     });
   }, []);
-  const unregisterItem = (0, import_react19.useCallback)((value2) => {
+  const unregisterItem = (0, import_react20.useCallback)((value2) => {
     setInternalState((prev) => {
       const updatedOptions = prev.options.filter((i) => i.value !== value2);
       return {
@@ -9357,10 +9146,10 @@ var SelectRoot = ({
       highlightedValue: value2
     }));
   };
-  const registerTrigger = (0, import_react19.useCallback)((ref) => {
+  const registerTrigger = (0, import_react20.useCallback)((ref) => {
     triggerRef.current = ref.current;
   }, []);
-  const unregisterTrigger = (0, import_react19.useCallback)(() => {
+  const unregisterTrigger = (0, import_react20.useCallback)(() => {
     triggerRef.current = null;
   }, []);
   const toggleOpen = (isOpen2, toggleOpenOptions) => {
@@ -9406,7 +9195,7 @@ var SelectRoot = ({
       highlightedValue
     }));
   };
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!internalState.highlightedValue) return;
     const highlighted = internalState.options.find((value2) => value2.value === internalState.highlightedValue);
     if (highlighted) {
@@ -9434,14 +9223,14 @@ var SelectRoot = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectContext.Provider, { value: contextValue, children });
 };
-var SelectOption = (0, import_react19.forwardRef)(
+var SelectOption = (0, import_react20.forwardRef)(
   function SelectOption2({ children, value, disabled = false, iconAppearance, className, ...restProps }, ref) {
     const { state, config, item, trigger } = useSelectContext();
     const { register, unregister, toggleSelection, highlightItem } = item;
-    const itemRef = (0, import_react19.useRef)(null);
+    const itemRef = (0, import_react20.useRef)(null);
     iconAppearance ??= config.iconAppearance;
     const label = children ?? value;
-    (0, import_react19.useEffect)(() => {
+    (0, import_react20.useEffect)(() => {
       register({
         value,
         label,
@@ -9468,7 +9257,7 @@ var SelectOption = (0, import_react19.forwardRef)(
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-selected": isSelected ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: (0, import_clsx13.default)(
+        className: (0, import_clsx12.default)(
           "flex-row-1 items-center px-2 py-1 rounded-md",
           "data-highlighted:bg-primary/20",
           "data-disabled:text-disabled data-disabled:cursor-not-allowed",
@@ -9491,18 +9280,18 @@ var SelectOption = (0, import_react19.forwardRef)(
           }
         },
         children: [
-          iconAppearance === "left" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          iconAppearance === "left" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             import_lucide_react4.CheckIcon,
             {
-              className: (0, import_clsx13.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              className: (0, import_clsx12.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           ),
           label,
-          iconAppearance === "right" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          iconAppearance === "right" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             import_lucide_react4.CheckIcon,
             {
-              className: (0, import_clsx13.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              className: (0, import_clsx12.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           )
@@ -9511,13 +9300,13 @@ var SelectOption = (0, import_react19.forwardRef)(
     );
   }
 );
-var SelectButton = (0, import_react19.forwardRef)(function SelectButton2({ placeholder, selectedDisplay, ...props }, ref) {
+var SelectButton = (0, import_react20.forwardRef)(function SelectButton2({ placeholder, selectedDisplay, ...props }, ref) {
   const translation = useHightideTranslation();
   const { state, trigger } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  const innerRef = (0, import_react19.useRef)(null);
-  (0, import_react19.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react19.useEffect)(() => {
+  const innerRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react20.useEffect)(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -9550,19 +9339,8 @@ var SelectButton = (0, import_react19.forwardRef)(function SelectButton2({ place
             break;
         }
       },
-      className: (0, import_clsx13.default)(
-        "flex-row-2 items-center justify-between rounded-md px-3 py-2",
-        {
-          "bg-input-background text-placeholder": !hasValue && !disabled && !invalid,
-          "bg-input-background text-input-text": hasValue && !disabled && !invalid,
-          "bg-negative/20": !disabled && invalid,
-          "text-placeholder": !hasValue && !disabled,
-          "text-negative": hasValue && !disabled && invalid,
-          "bg-disabled-background text-disabled": disabled
-        },
-        props.className
-      ),
-      "data-placeholder": !hasValue ? "" : void 0,
+      "data-name": props["data-name"] ?? "select-button",
+      "data-value": hasValue ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
       "data-invalid": invalid ? "" : void 0,
       "aria-invalid": invalid,
@@ -9571,31 +9349,21 @@ var SelectButton = (0, import_react19.forwardRef)(function SelectButton2({ place
       "aria-expanded": state.isOpen,
       "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
       children: [
-        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_clsx13.default)("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex-row-0", children: [
+        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_clsx12.default)("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex-row-0", children: [
           label,
           index < state.value.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "," })
         ] }, value)) }) : placeholder ?? translation("clickToSelect"),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          ExpansionIcon,
-          {
-            isExpanded: state.isOpen,
-            className: (0, import_clsx13.default)({
-              "text-input-text": !disabled && !invalid,
-              "text-negative": !disabled && invalid,
-              "text-disabled": disabled
-            })
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ExpansionIcon, { isExpanded: state.isOpen })
       ]
     }
   );
 });
-var SelectChipDisplay = (0, import_react19.forwardRef)(function SelectChipDisplay2({ ...props }, ref) {
+var SelectChipDisplay = (0, import_react20.forwardRef)(function SelectChipDisplay2({ ...props }, ref) {
   const { state, trigger, item } = useSelectContext();
   const { register, unregister, toggleOpen } = trigger;
-  const innerRef = (0, import_react19.useRef)(null);
-  (0, import_react19.useImperativeHandle)(ref, () => innerRef.current);
-  (0, import_react19.useEffect)(() => {
+  const innerRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useImperativeHandle)(ref, () => innerRef.current);
+  (0, import_react20.useEffect)(() => {
     register(innerRef);
     return () => unregister();
   }, [register, unregister]);
@@ -9606,10 +9374,12 @@ var SelectChipDisplay = (0, import_react19.forwardRef)(function SelectChipDispla
     {
       ...props,
       ref: innerRef,
-      className: (0, import_clsx13.default)(
-        "flex flex-wrap flex-row gap-2 items-center bg-input-background text-input-text rounded-md px-2.5 py-2.5",
-        props.className
-      ),
+      onClick: (event) => {
+        toggleOpen();
+        props.onClick?.(event);
+      },
+      "data-name": props["data-name"] ?? "select-button-chips",
+      "data-value": state.value.length > 0 ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
       "data-invalid": invalid ? "" : void 0,
       "aria-invalid": invalid,
@@ -9618,23 +9388,27 @@ var SelectChipDisplay = (0, import_react19.forwardRef)(function SelectChipDispla
         state.selectedOptions.map(({ value, label }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Chip, { className: "gap-x-2", children: [
           label,
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            TextButton,
+            Button,
             {
               onClick: () => {
                 item.toggleSelection(value, false);
               },
-              size: "none",
+              size: "tiny",
               color: "negative",
-              className: "flex-row-0 items-center px-0.5 py-0.5 w-6 h-6 rounded",
-              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react4.XIcon, { className: "w-5 h-5" })
+              coloringStyle: "text",
+              className: "flex-row-0 items-center",
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react4.XIcon, { className: "size-5" })
             }
           )
         ] }, value)),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          IconButton,
+          Button,
           {
             id: state.id,
-            onClick: () => toggleOpen(),
+            onClick: (event) => {
+              event.stopPropagation();
+              toggleOpen();
+            },
             onKeyDown: (event) => {
               switch (event.key) {
                 case "ArrowDown":
@@ -9644,6 +9418,7 @@ var SelectChipDisplay = (0, import_react19.forwardRef)(function SelectChipDispla
                   toggleOpen(true, { highlightStartPositionBehavior: "last" });
               }
             },
+            layout: "icon",
             size: "small",
             color: "neutral",
             "aria-invalid": invalid,
@@ -9651,6 +9426,7 @@ var SelectChipDisplay = (0, import_react19.forwardRef)(function SelectChipDispla
             "aria-haspopup": "listbox",
             "aria-expanded": state.isOpen,
             "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
+            className: "size-9",
             children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react4.Plus, {})
           }
         )
@@ -9658,15 +9434,15 @@ var SelectChipDisplay = (0, import_react19.forwardRef)(function SelectChipDispla
     }
   );
 });
-var SelectContent = (0, import_react19.forwardRef)(
+var SelectContent = (0, import_react20.forwardRef)(
   function SelectContent2({
     alignment,
     orientation = "vertical",
     containerClassName,
     ...props
   }, ref) {
-    const innerRef = (0, import_react19.useRef)(null);
-    (0, import_react19.useImperativeHandle)(ref, () => innerRef.current);
+    const innerRef = (0, import_react20.useRef)(null);
+    (0, import_react20.useImperativeHandle)(ref, () => innerRef.current);
     const { trigger, state, config, item } = useSelectContext();
     const position = useFloatingElement({
       active: state.isOpen,
@@ -9678,12 +9454,14 @@ var SelectContent = (0, import_react19.forwardRef)(
       container: innerRef,
       active: state.isOpen && !!position
     });
+    const zIndex = useZIndexRegister(state.isOpen);
     return (0, import_react_dom2.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
         "div",
         {
           id: `select-container-${state.id}`,
-          className: (0, import_clsx13.default)("fixed inset-0 w-screen h-screen", containerClassName),
+          className: (0, import_clsx12.default)("fixed inset-0 w-screen h-screen", containerClassName),
+          style: { zIndex },
           hidden: !state.isOpen,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -9691,7 +9469,7 @@ var SelectContent = (0, import_react19.forwardRef)(
               {
                 id: `select-background-${state.id}`,
                 onClick: () => trigger.toggleOpen(false),
-                className: (0, import_clsx13.default)("fixed inset-0 w-screen h-screen")
+                className: (0, import_clsx12.default)("fixed inset-0 w-screen h-screen")
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -9740,7 +9518,7 @@ var SelectContent = (0, import_react19.forwardRef)(
                       break;
                   }
                 },
-                className: (0, import_clsx13.default)("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-style-within overflow-auto", props.className),
+                className: (0, import_clsx12.default)("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-outline-within overflow-auto", props.className),
                 style: {
                   opacity: position ? void 0 : 0,
                   position: "fixed",
@@ -9760,7 +9538,7 @@ var SelectContent = (0, import_react19.forwardRef)(
     );
   }
 );
-var Select = (0, import_react19.forwardRef)(function Select2({
+var Select = (0, import_react20.forwardRef)(function Select2({
   children,
   contentPanelProps,
   buttonProps,
@@ -9782,7 +9560,7 @@ var Select = (0, import_react19.forwardRef)(function Select2({
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var SelectUncontrolled = (0, import_react19.forwardRef)(function SelectUncontrolled2({
+var SelectUncontrolled = (0, import_react20.forwardRef)(function SelectUncontrolled2({
   value: initialValue,
   onValueChanged,
   ...props
@@ -9798,7 +9576,7 @@ var SelectUncontrolled = (0, import_react19.forwardRef)(function SelectUncontrol
     }
   );
 });
-var MultiSelect = (0, import_react19.forwardRef)(function MultiSelect2({
+var MultiSelect = (0, import_react20.forwardRef)(function MultiSelect2({
   children,
   contentPanelProps,
   buttonProps,
@@ -9809,7 +9587,7 @@ var MultiSelect = (0, import_react19.forwardRef)(function MultiSelect2({
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var MultiSelectUncontrolled = (0, import_react19.forwardRef)(function MultiSelectUncontrolled2({
+var MultiSelectUncontrolled = (0, import_react20.forwardRef)(function MultiSelectUncontrolled2({
   values: initialValues,
   onValuesChanged,
   ...props
@@ -9825,7 +9603,7 @@ var MultiSelectUncontrolled = (0, import_react19.forwardRef)(function MultiSelec
     }
   );
 });
-var MultiSelectChipDisplay = (0, import_react19.forwardRef)(function MultiSelectChipDisplay2({
+var MultiSelectChipDisplay = (0, import_react20.forwardRef)(function MultiSelectChipDisplay2({
   children,
   contentPanelProps,
   chipDisplayProps,
@@ -9836,7 +9614,7 @@ var MultiSelectChipDisplay = (0, import_react19.forwardRef)(function MultiSelect
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectContent, { ...contentPanelProps, children })
   ] });
 });
-var MultiSelectChipDisplayUncontrolled = (0, import_react19.forwardRef)(function MultiSelectChipDisplayUncontrolled2({
+var MultiSelectChipDisplayUncontrolled = (0, import_react20.forwardRef)(function MultiSelectChipDisplayUncontrolled2({
   values: initialValues,
   onValuesChanged,
   ...props
@@ -9876,14 +9654,13 @@ var LanguageDialog = ({
           {
             value: locale,
             onValueChanged: (language) => setLocale(language),
-            contentPanelProps: { containerClassName: "z-200" },
             buttonProps: {
               selectedDisplay: (locale2) => LocalizationUtil.languagesLocalNames[locale2]
             },
             children: LocalizationUtil.locals.map((local) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectOption, { value: local, children: LocalizationUtil.languagesLocalNames[local] }, local))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SolidButton, { color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
@@ -9891,24 +9668,24 @@ var LanguageDialog = ({
 
 // src/components/dialog/ThemeDialog.tsx
 var import_lucide_react5 = require("lucide-react");
-var import_clsx14 = __toESM(require("clsx"));
+var import_clsx13 = __toESM(require("clsx"));
 
 // src/theming/useTheme.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var themes = ["light", "dark", "system"];
 var ThemeUtil = {
   themes
 };
-var ThemeContext = (0, import_react20.createContext)(null);
+var ThemeContext = (0, import_react21.createContext)(null);
 var ThemeProvider = ({ children, theme }) => {
   const {
     value: storedTheme,
     setValue: setStoredTheme,
     deleteValue: deleteStoredTheme
   } = useLocalStorage("theme", "system");
-  const [themePreference, setThemePreference] = (0, import_react20.useState)("system");
-  const resolvedTheme = (0, import_react20.useMemo)(() => {
+  const [themePreference, setThemePreference] = (0, import_react21.useState)("system");
+  const resolvedTheme = (0, import_react21.useMemo)(() => {
     if (theme && theme !== "system") {
       return theme;
     }
@@ -9920,7 +9697,7 @@ var ThemeProvider = ({ children, theme }) => {
     }
     return "light";
   }, [storedTheme, theme, themePreference]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!theme) return;
     if (theme === "system") {
       deleteStoredTheme();
@@ -9928,18 +9705,18 @@ var ThemeProvider = ({ children, theme }) => {
       setStoredTheme(theme);
     }
   }, [theme]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     document.documentElement.setAttribute("data-theme", resolvedTheme);
   }, [resolvedTheme]);
-  const getPreference = (0, import_react20.useCallback)(() => {
+  const getPreference = (0, import_react21.useCallback)(() => {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
     setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
   }, []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     getPreference();
   }, [getPreference]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     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)");
@@ -9970,7 +9747,7 @@ var ThemeProvider = ({ children, theme }) => {
   );
 };
 var useTheme = () => {
-  const context = (0, import_react20.useContext)(ThemeContext);
+  const context = (0, import_react21.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
   }
@@ -9981,11 +9758,11 @@ var useTheme = () => {
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var ThemeIcon = ({ theme, className }) => {
   if (theme === "dark") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.MoonIcon, { className: (0, import_clsx14.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.MoonIcon, { className: (0, import_clsx13.default)("w-4 h-4", className) });
   } else if (theme === "light") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.SunIcon, { className: (0, import_clsx14.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.SunIcon, { className: (0, import_clsx13.default)("w-4 h-4", className) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.MonitorCog, { className: (0, import_clsx14.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.MonitorCog, { className: (0, import_clsx13.default)("w-4 h-4", className) });
   }
 };
 var ThemeDialog = ({
@@ -10010,9 +9787,6 @@ var ThemeDialog = ({
             value: theme,
             onValueChanged: (theme2) => setTheme(theme2),
             iconAppearance: "right",
-            contentPanelProps: {
-              containerClassName: "z-200"
-            },
             buttonProps: {
               selectedDisplay: (value) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-row-2 items-center", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ThemeIcon, { theme }),
@@ -10026,18 +9800,18 @@ var ThemeDialog = ({
             ] }) }, theme2))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SolidButton, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-row-4 mt-3 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { autoFocus: true, color: "positive", onClick: onClose, children: translation("done") }) })
       ] })
     }
   );
 };
 
 // src/components/form/FormElementWrapper.tsx
-var import_react21 = require("react");
-var import_clsx16 = require("clsx");
+var import_react22 = require("react");
+var import_clsx15 = require("clsx");
 
 // src/components/user-action/Label.tsx
-var import_clsx15 = __toESM(require("clsx"));
+var import_clsx14 = __toESM(require("clsx"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var styleMapping = {
   md: "typography-label-md color-label-text",
@@ -10049,7 +9823,7 @@ var Label = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { ...props, className: (0, import_clsx15.default)(styleMapping[size], className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { ...props, className: (0, import_clsx14.default)(styleMapping[size], className), children });
 };
 
 // src/components/form/FormElementWrapper.tsx
@@ -10071,7 +9845,7 @@ var FormElementWrapper = ({
   containerClassName
 }) => {
   const [touched, setTouched] = useOverwritableState(initialIsShowingError, onIsShowingError);
-  const generatedId = (0, import_react21.useId)();
+  const generatedId = (0, import_react22.useId)();
   const usedId = id ?? generatedId;
   const errorId = `${usedId}-description`;
   const labelId = `${usedId}-label`;
@@ -10100,7 +9874,7 @@ var FormElementWrapper = ({
     "aria-invalid": !!error,
     "aria-errormessage": error ? errorId : void 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_clsx16.clsx)("relative flex flex-col gap-y-1", containerClassName), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_clsx15.clsx)("relative flex flex-col gap-y-1", containerClassName), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       Label,
       {
@@ -10108,7 +9882,7 @@ var FormElementWrapper = ({
         id: labelId,
         htmlFor: usedId,
         size: "lg",
-        className: (0, import_clsx16.clsx)("flex-row-1 items-start", labelProps?.className),
+        className: (0, import_clsx15.clsx)("flex-row-1 items-start", labelProps?.className),
         children: [
           label,
           required && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "none", className: "bg-primary w-2 h-2 rounded-full" })
@@ -10120,7 +9894,7 @@ var FormElementWrapper = ({
       {
         ...descriptionProps,
         id: descriptionId,
-        className: (0, import_clsx16.clsx)("text-description text-sm", descriptionProps?.className),
+        className: (0, import_clsx15.clsx)("text-description text-sm", descriptionProps?.className),
         children: description
       }
     ),
@@ -10130,7 +9904,7 @@ var FormElementWrapper = ({
       {
         ...errorProps,
         id: errorId,
-        className: (0, import_clsx16.clsx)("absolute top-[calc(100%_+_0.25rem)] left-0 text-negative text-sm font-medium", errorProps?.className),
+        className: (0, import_clsx15.clsx)("absolute top-[calc(100%_+_0.25rem)] left-0 text-negative text-sm font-medium", errorProps?.className),
         role: "alert",
         "aria-hidden": !error,
         "aria-live": "polite",
@@ -10141,8 +9915,8 @@ var FormElementWrapper = ({
 };
 
 // src/components/icons-and-geometry/Avatar.tsx
-var import_clsx17 = __toESM(require("clsx"));
-var import_react22 = require("react");
+var import_clsx16 = __toESM(require("clsx"));
+var import_react23 = require("react");
 var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var avtarSizeList = ["sm", "md", "lg", "xl"];
@@ -10169,8 +9943,8 @@ var Avatar = ({
   fullyRounded,
   className = ""
 }) => {
-  const [hasError, setHasError] = (0, import_react22.useState)(false);
-  const [isLoaded, setIsLoaded] = (0, import_react22.useState)(false);
+  const [hasError, setHasError] = (0, import_react23.useState)(false);
+  const [isLoaded, setIsLoaded] = (0, import_react23.useState)(false);
   const pixels = avatarSizeMapping[size];
   const sizeStyle = {
     minWidth: pixels,
@@ -10179,7 +9953,7 @@ var Avatar = ({
     maxHeight: pixels
   };
   const textClassName = textClassNameMapping[size];
-  const displayName = (0, import_react22.useMemo)(() => {
+  const displayName = (0, import_react23.useMemo)(() => {
     const maxLetters = size === "sm" ? 1 : 2;
     return (name ?? "").split(" ").filter((_, index) => index < maxLetters).map((value) => value[0]).join("").toUpperCase();
   }, [name, size]);
@@ -10191,7 +9965,7 @@ var Avatar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
-      className: (0, import_clsx17.default)(
+      className: (0, import_clsx16.default)(
         `relative flex-row-0 items-center justify-center bg-primary text-on-primary`,
         rounding,
         className
@@ -10203,7 +9977,7 @@ var Avatar = ({
           {
             src: image?.avatarUrl,
             alt: image?.alt,
-            className: (0, import_clsx17.default)(rounding, { "absolute left-0 top-0 -translate-1/2 opacity-0 z-1 ": !isLoaded || hasError }),
+            className: (0, import_clsx16.default)(rounding, { "absolute left-0 top-0 -translate-1/2 opacity-0 z-1 ": !isLoaded || hasError }),
             onLoad: () => setIsLoaded(true),
             onError: () => setHasError(true)
           }
@@ -10237,7 +10011,7 @@ var AvatarGroup = ({
             ...avatar,
             size,
             fullyRounded,
-            className: (0, import_clsx17.default)("shadow-side shadow-r-4 shadow-hard", avatar.className)
+            className: (0, import_clsx16.default)("shadow-side shadow-r-4 shadow-hard", avatar.className)
           }
         )
       },
@@ -10246,7 +10020,7 @@ var AvatarGroup = ({
     showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
-        className: (0, import_clsx17.default)(textClassNameMapping[size], "flex-row-2 truncate items-center"),
+        className: (0, import_clsx16.default)(textClassNameMapping[size], "flex-row-2 truncate items-center"),
         children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { children: [
           "+ ",
           notDisplayedProfiles
@@ -10257,7 +10031,7 @@ var AvatarGroup = ({
 };
 
 // src/components/icons-and-geometry/Circle.tsx
-var import_clsx18 = __toESM(require("clsx"));
+var import_clsx17 = __toESM(require("clsx"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var Circle = ({
   radius = 20,
@@ -10269,7 +10043,7 @@ var Circle = ({
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
-      className: (0, import_clsx18.default)(`rounded-full`, className),
+      className: (0, import_clsx17.default)(`rounded-full`, className),
       style: {
         width: `${size}px`,
         height: `${size}px`,
@@ -10281,8 +10055,8 @@ var Circle = ({
 };
 
 // src/components/icons-and-geometry/Ring.tsx
-var import_react23 = require("react");
-var import_clsx19 = __toESM(require("clsx"));
+var import_react24 = require("react");
+var import_clsx18 = __toESM(require("clsx"));
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var Ring = ({
   innerSize = 20,
@@ -10292,7 +10066,7 @@ var Ring = ({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
-      className: (0, import_clsx19.default)(`bg-transparent rounded-full outline`, className),
+      className: (0, import_clsx18.default)(`bg-transparent rounded-full outline`, className),
       style: {
         width: `${innerSize}px`,
         height: `${innerSize}px`,
@@ -10310,9 +10084,9 @@ var AnimatedRing = ({
   onAnimationFinished,
   style
 }) => {
-  const [currentWidth, setCurrentWidth] = (0, import_react23.useState)(0);
+  const [currentWidth, setCurrentWidth] = (0, import_react24.useState)(0);
   const milliseconds = 1e3 * fillAnimationDuration;
-  const animate = (0, import_react23.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react24.useCallback)((timestamp, startTime) => {
     const progress = Math.min((timestamp - startTime) / milliseconds, 1);
     const newWidth = Math.min(width * progress, width);
     setCurrentWidth(newWidth);
@@ -10326,7 +10100,7 @@ var AnimatedRing = ({
       }
     }
   }, [milliseconds, onAnimationFinished, repeating, width]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (currentWidth < width) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -10361,10 +10135,10 @@ var RingWave = ({
   onAnimationFinished,
   style
 }) => {
-  const [currentInnerSize, setCurrentInnerSize] = (0, import_react23.useState)(startInnerSize);
+  const [currentInnerSize, setCurrentInnerSize] = (0, import_react24.useState)(startInnerSize);
   const distance = endInnerSize - startInnerSize;
   const milliseconds = 1e3 * fillAnimationDuration;
-  const animate = (0, import_react23.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react24.useCallback)((timestamp, startTime) => {
     const progress = Math.min((timestamp - startTime) / milliseconds, 1);
     const newInnerSize = Math.min(
       startInnerSize + distance * progress,
@@ -10381,7 +10155,7 @@ var RingWave = ({
       }
     }
   }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (currentInnerSize < endInnerSize) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -10416,7 +10190,7 @@ var RadialRings = ({
   sizeCircle2 = 200,
   sizeCircle3 = 300
 }) => {
-  const [currentRing, setCurrentRing] = (0, import_react23.useState)(0);
+  const [currentRing, setCurrentRing] = (0, import_react24.useState)(0);
   const size = sizeCircle3;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
@@ -10431,7 +10205,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle1 / 2,
-            className: (0, import_clsx19.default)(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
+            className: (0, import_clsx18.default)(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`
@@ -10445,7 +10219,7 @@ var RadialRings = ({
             width: (sizeCircle2 - sizeCircle1) / 2,
             onAnimationFinished: () => currentRing === 0 ? setCurrentRing(1) : null,
             repeating: true,
-            className: (0, import_clsx19.default)(
+            className: (0, import_clsx18.default)(
               circle2ClassName,
               { "opacity-5": currentRing !== 0 }
             ),
@@ -10465,7 +10239,7 @@ var RadialRings = ({
             endInnerSize: sizeCircle2,
             width: waveWidth,
             repeating: true,
-            className: (0, import_clsx19.default)(waveBaseColor, `opacity-5`),
+            className: (0, import_clsx18.default)(waveBaseColor, `opacity-5`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10479,7 +10253,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle2 / 2,
-            className: (0, import_clsx19.default)(
+            className: (0, import_clsx18.default)(
               circle2ClassName,
               { "opacity-20": currentRing < 1 },
               `absolute z-[8] -translate-y-1/2 -translate-x-1/2`
@@ -10497,7 +10271,7 @@ var RadialRings = ({
             width: (sizeCircle3 - sizeCircle2) / 2,
             onAnimationFinished: () => currentRing === 1 ? setCurrentRing(2) : null,
             repeating: true,
-            className: (0, import_clsx19.default)(circle3ClassName),
+            className: (0, import_clsx18.default)(circle3ClassName),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10514,7 +10288,7 @@ var RadialRings = ({
             endInnerSize: sizeCircle3 - waveWidth,
             width: waveWidth,
             repeating: true,
-            className: (0, import_clsx19.default)(waveBaseColor, `opacity-5`),
+            className: (0, import_clsx18.default)(waveBaseColor, `opacity-5`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10528,7 +10302,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle3 / 2,
-            className: (0, import_clsx19.default)(
+            className: (0, import_clsx18.default)(
               circle3ClassName,
               { "opacity-20": currentRing < 2 },
               `absolute z-[6] -translate-y-1/2 -translate-x-1/2`
@@ -10565,13 +10339,13 @@ var TagIcon = ({
 };
 
 // src/components/layout/Carousel.tsx
-var import_react24 = require("react");
-var import_clsx20 = __toESM(require("clsx"));
+var import_react25 = require("react");
+var import_clsx19 = __toESM(require("clsx"));
 var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var CarouselContext = (0, import_react24.createContext)(null);
+var CarouselContext = (0, import_react25.createContext)(null);
 var useCarouselContext = () => {
-  const context = (0, import_react24.useContext)(CarouselContext);
+  const context = (0, import_react25.useContext)(CarouselContext);
   if (!context) {
     console.error("useCarouselContext must be used within CarouselContext");
   }
@@ -10582,7 +10356,7 @@ function CarouselTabs({
 }) {
   const translation = useHightideTranslation();
   const { id, slideCount, currentIndex, isLooping } = useCarouselContext();
-  const tabRefs = (0, import_react24.useRef)([]);
+  const tabRefs = (0, import_react25.useRef)([]);
   const handleKeyDown = (event, index) => {
     let newIndex = index;
     if (event.key === "ArrowRight") {
@@ -10612,7 +10386,7 @@ function CarouselTabs({
             ref: (el) => tabRefs.current[index] = el,
             onClick: () => onChange(index),
             onKeyDown: (e) => handleKeyDown(e, index),
-            className: (0, import_clsx20.default)(
+            className: (0, import_clsx19.default)(
               "w-8 min-w-8 h-3 min-h-3 first:rounded-l-md last:rounded-r-md",
               {
                 "bg-carousel-dot-disabled hover:bg-carousel-dot-active": currentIndex !== index,
@@ -10632,7 +10406,7 @@ function CarouselTabs({
     }
   );
 }
-var CarouselSlide = (0, import_react24.forwardRef)(
+var CarouselSlide = (0, import_react25.forwardRef)(
   function CarouselSlide2({
     index,
     isSelected,
@@ -10646,7 +10420,7 @@ var CarouselSlide = (0, import_react24.forwardRef)(
         ...props,
         ref,
         id: `${id}-slide-${index}`,
-        className: (0, import_clsx20.default)("focus-style-none group/slide", props.className),
+        className: (0, import_clsx19.default)("focus-style-none group/slide", props.className),
         tabIndex: isSelected ? 0 : void 0,
         role: "group",
         "aria-roledescription": translation("slide"),
@@ -10677,17 +10451,17 @@ var Carousel = ({
   ...props
 }) => {
   const translation = useHightideTranslation();
-  const slideRefs = (0, import_react24.useRef)([]);
-  const [currentIndex, setCurrentIndex] = (0, import_react24.useState)(0);
-  const [hasFocus, setHasFocus] = (0, import_react24.useState)(false);
-  const [dragState, setDragState] = (0, import_react24.useState)();
+  const slideRefs = (0, import_react25.useRef)([]);
+  const [currentIndex, setCurrentIndex] = (0, import_react25.useState)(0);
+  const [hasFocus, setHasFocus] = (0, import_react25.useState)(false);
+  const [dragState, setDragState] = (0, import_react25.useState)();
   const isPaused = hasFocus;
-  const carouselContainerRef = (0, import_react24.useRef)(null);
-  const [disableClick, setDisableClick] = (0, import_react24.useState)(false);
-  const timeOut = (0, import_react24.useRef)(void 0);
-  const length = (0, import_react24.useMemo)(() => children.length, [children]);
+  const carouselContainerRef = (0, import_react25.useRef)(null);
+  const [disableClick, setDisableClick] = (0, import_react25.useState)(false);
+  const timeOut = (0, import_react25.useRef)(void 0);
+  const length = (0, import_react25.useMemo)(() => children.length, [children]);
   const paddingItemCount = 3;
-  const generatedId = "carousel" + (0, import_react24.useId)();
+  const generatedId = "carousel" + (0, import_react25.useId)();
   const id = props.id ?? generatedId;
   if (isAutoPlaying && !isLooping) {
     console.error("When isAutoLooping is true, isLooping should also be true");
@@ -10696,7 +10470,7 @@ var Carousel = ({
   autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
   animationTime = Math.max(100, animationTime);
   autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const carousel = carouselContainerRef.current;
     if (carousel) {
       let onFocus = function() {
@@ -10719,20 +10493,20 @@ var Carousel = ({
   const canGoLeft = () => {
     return isLooping || currentIndex !== 0;
   };
-  const canGoRight = (0, import_react24.useCallback)(() => {
+  const canGoRight = (0, import_react25.useCallback)(() => {
     return isLooping || currentIndex !== length - 1;
   }, [currentIndex, isLooping, length]);
   const left = () => {
     if (canGoLeft()) {
-      setCurrentIndex(currentIndex - 1);
+      setCurrentIndex((currentIndex + length - 1) % length);
     }
   };
-  const right = (0, import_react24.useCallback)(() => {
+  const right = (0, import_react25.useCallback)(() => {
     if (canGoRight()) {
       setCurrentIndex((currentIndex + length + 1) % length);
     }
   }, [canGoRight, currentIndex, length]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!timeOut.current && !isPaused) {
       if (autoLoopingTimeOut > 0) {
         timeOut.current = setTimeout(() => {
@@ -10784,10 +10558,10 @@ var Carousel = ({
     }
     setDragState(void 0);
   };
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     setDisableClick(!dragState);
   }, [dragState]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     onSlideChanged?.(currentIndex);
   }, [currentIndex]);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CarouselContext.Provider, { value: { id, currentIndex, slideCount: length, isLooping }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
@@ -10795,7 +10569,7 @@ var Carousel = ({
     {
       ref: carouselContainerRef,
       ...props,
-      className: (0, import_clsx20.default)("flex-col-2 items-center w-full", props.className),
+      className: (0, import_clsx19.default)("flex-col-2 items-center w-full", props.className),
       id,
       role: "region",
       "aria-roledescription": translation("slide"),
@@ -10804,7 +10578,7 @@ var Carousel = ({
           "div",
           {
             ...slideContainerProps,
-            className: (0, import_clsx20.default)(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
+            className: (0, import_clsx19.default)(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
             children: [
               hintNext ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
                 "div",
@@ -10813,7 +10587,7 @@ var Carousel = ({
                   onPointerMove: handlePointerMove,
                   onPointerUp: handlePointerUp,
                   onPointerLeave: handlePointerUp,
-                  className: (0, import_clsx20.default)(`flex-row-2 relative h-full`, heightClassName),
+                  className: (0, import_clsx19.default)(`flex-row-2 relative h-full`, heightClassName),
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
                       item,
@@ -10826,7 +10600,7 @@ var Carousel = ({
                           ref: isInItems ? slideRefs[index] : void 0,
                           index,
                           isSelected: isInItems && currentIndex === index,
-                          className: (0, import_clsx20.default)(
+                          className: (0, import_clsx19.default)(
                             `absolute left-[50%] h-full overflow-hidden transition-transform ease-in-out`,
                             slideClassName
                           ),
@@ -10843,13 +10617,13 @@ var Carousel = ({
                     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "div",
                       {
-                        className: (0, import_clsx20.default)(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+                        className: (0, import_clsx19.default)(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "div",
                       {
-                        className: (0, import_clsx20.default)(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+                        className: (0, import_clsx19.default)(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
                       }
                     )
                   ]
@@ -10858,7 +10632,7 @@ var Carousel = ({
                 "div",
                 {
                   ref: slideRefs[currentIndex],
-                  className: (0, import_clsx20.default)("px-16 h-full"),
+                  className: (0, import_clsx19.default)("px-16 h-full"),
                   tabIndex: 0,
                   role: "group",
                   "aria-roledescription": translation("slide"),
@@ -10871,20 +10645,22 @@ var Carousel = ({
               ),
               arrows && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  IconButton,
+                  Button,
                   {
+                    layout: "icon",
                     color: "neutral",
-                    className: (0, import_clsx20.default)("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
+                    className: (0, import_clsx19.default)("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
                     disabled: !canGoLeft(),
                     onClick: () => left(),
                     children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronLeft, { size: 24 })
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  IconButton,
+                  Button,
                   {
+                    layout: "icon",
                     color: "neutral",
-                    className: (0, import_clsx20.default)("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
+                    className: (0, import_clsx19.default)("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
                     disabled: !canGoRight(),
                     onClick: () => right(),
                     children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronRight, { size: 24 })
@@ -10901,7 +10677,7 @@ var Carousel = ({
 };
 
 // src/components/layout/DividerInserter.tsx
-var import_clsx21 = __toESM(require("clsx"));
+var import_clsx20 = __toESM(require("clsx"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var DividerInserter = ({
   children,
@@ -10919,11 +10695,11 @@ var DividerInserter = ({
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: (0, import_clsx21.default)(className), ...restProps, children: nodes });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: (0, import_clsx20.default)(className), ...restProps, children: nodes });
 };
 
 // src/components/layout/FAQSection.tsx
-var import_clsx22 = __toESM(require("clsx"));
+var import_clsx21 = __toESM(require("clsx"));
 
 // src/components/layout/MarkdownInterpreter.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
@@ -11169,7 +10945,7 @@ var FAQSection = ({
       label: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { id, className: "typography-title-md", children: title }),
       clickOnlyOnHeader: false,
       icon: (expanded) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ExpansionIcon, { isExpanded: expanded, className: "text-primary" }),
-      className: (0, import_clsx22.default)("rounded-xl", expandableClassName),
+      className: (0, import_clsx21.default)("rounded-xl", expandableClassName),
       children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MarkdownInterpreter, { text: content.value }) : content.value })
     },
     id
@@ -11177,11 +10953,11 @@ var FAQSection = ({
 };
 
 // src/components/layout/FloatingContainer.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_clsx23 = require("clsx");
+var import_clsx22 = require("clsx");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var FloatingContainer = (0, import_react25.forwardRef)(function FloatingContainer2({
+var FloatingContainer = (0, import_react26.forwardRef)(function FloatingContainer2({
   children,
   backgroundOverlay,
   anchor,
@@ -11193,8 +10969,8 @@ var FloatingContainer = (0, import_react25.forwardRef)(function FloatingContaine
   gap = 4,
   ...props
 }, forwardRef12) {
-  const innerRef = (0, import_react25.useRef)(null);
-  (0, import_react25.useImperativeHandle)(forwardRef12, () => innerRef.current);
+  const innerRef = (0, import_react26.useRef)(null);
+  (0, import_react26.useImperativeHandle)(forwardRef12, () => innerRef.current);
   const position = useFloatingElement({
     active: !props.hidden,
     containerRef: innerRef,
@@ -11224,7 +11000,7 @@ var FloatingContainer = (0, import_react25.forwardRef)(function FloatingContaine
             ...position,
             ...props.style
           },
-          className: (0, import_clsx23.clsx)("motion-safe:duration-100 motion-reduce:duration-0", props.className),
+          className: (0, import_clsx22.clsx)("motion-safe:duration-100 motion-reduce:duration-0", props.className),
           children
         }
       )
@@ -11234,18 +11010,18 @@ var FloatingContainer = (0, import_react25.forwardRef)(function FloatingContaine
 });
 
 // src/components/layout/ListBox.tsx
-var import_react26 = __toESM(require("react"));
-var import_clsx24 = require("clsx");
+var import_react27 = __toESM(require("react"));
+var import_clsx23 = require("clsx");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var ListBoxContext = (0, import_react26.createContext)(null);
+var ListBoxContext = (0, import_react27.createContext)(null);
 function useListBoxContext() {
-  const ctx = (0, import_react26.useContext)(ListBoxContext);
+  const ctx = (0, import_react27.useContext)(ListBoxContext);
   if (!ctx) {
     throw new Error("ListBoxItem must be used within a ListBoxPrimitive");
   }
   return ctx;
 }
-var ListBoxItem = (0, import_react26.forwardRef)(
+var ListBoxItem = (0, import_react27.forwardRef)(
   function ListBoxItem2({ value, disabled = false, children, className, ...rest }, ref) {
     const {
       registerItem,
@@ -11255,9 +11031,9 @@ var ListBoxItem = (0, import_react26.forwardRef)(
       onItemClick,
       isSelected
     } = useListBoxContext();
-    const itemRef = (0, import_react26.useRef)(null);
-    const id = import_react26.default.useId();
-    (0, import_react26.useEffect)(() => {
+    const itemRef = (0, import_react27.useRef)(null);
+    const id = import_react27.default.useId();
+    (0, import_react27.useEffect)(() => {
       registerItem({ id, value, disabled, ref: itemRef });
       return () => unregisterItem(id);
     }, [id, value, disabled, registerItem, unregisterItem]);
@@ -11278,7 +11054,7 @@ var ListBoxItem = (0, import_react26.forwardRef)(
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-selected": selected ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: (0, import_clsx24.clsx)(
+        className: (0, import_clsx23.clsx)(
           "flex-row-1 items-center px-2 py-1 rounded-md",
           "data-highlighted:bg-primary/20",
           "data-disabled:text-disabled data-disabled:cursor-not-allowed",
@@ -11299,7 +11075,7 @@ var ListBoxItem = (0, import_react26.forwardRef)(
     );
   }
 );
-var ListBoxPrimitive = (0, import_react26.forwardRef)(
+var ListBoxPrimitive = (0, import_react27.forwardRef)(
   function ListBoxPrimitive2({
     value,
     onSelectionChanged,
@@ -11309,9 +11085,9 @@ var ListBoxPrimitive = (0, import_react26.forwardRef)(
     orientation = "vertical",
     ...props
   }, ref) {
-    const itemsRef = (0, import_react26.useRef)([]);
-    const [highlightedIndex, setHighlightedIndex] = (0, import_react26.useState)(void 0);
-    const registerItem = (0, import_react26.useCallback)((item) => {
+    const itemsRef = (0, import_react27.useRef)([]);
+    const [highlightedIndex, setHighlightedIndex] = (0, import_react27.useState)(void 0);
+    const registerItem = (0, import_react27.useCallback)((item) => {
       itemsRef.current.push(item);
       itemsRef.current.sort((a, b) => {
         const aEl = a.ref.current;
@@ -11320,14 +11096,14 @@ var ListBoxPrimitive = (0, import_react26.forwardRef)(
         return aEl.compareDocumentPosition(bEl) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
       });
     }, []);
-    const unregisterItem = (0, import_react26.useCallback)((id) => {
+    const unregisterItem = (0, import_react27.useCallback)((id) => {
       itemsRef.current = itemsRef.current.filter((i) => i.id !== id);
     }, []);
-    const isSelected = (0, import_react26.useCallback)(
+    const isSelected = (0, import_react27.useCallback)(
       (val) => (value ?? []).includes(val),
       [value]
     );
-    const onItemClickedHandler = (0, import_react26.useCallback)(
+    const onItemClickedHandler = (0, import_react27.useCallback)(
       (id) => {
         const index = itemsRef.current.findIndex((i) => i.id === id);
         if (index === -1) {
@@ -11351,13 +11127,13 @@ var ListBoxPrimitive = (0, import_react26.forwardRef)(
       },
       [onItemClicked, isSelection, isMultiple, onSelectionChanged, isSelected, value]
     );
-    const setHighlightedId = (0, import_react26.useCallback)((id) => {
+    const setHighlightedId = (0, import_react27.useCallback)((id) => {
       const index = itemsRef.current.findIndex((i) => i.id === id);
       if (index !== -1) {
         setHighlightedIndex(index);
       }
     }, []);
-    (0, import_react26.useEffect)(() => {
+    (0, import_react27.useEffect)(() => {
       if (highlightedIndex !== void 0) {
         itemsRef.current[highlightedIndex]?.ref.current?.scrollIntoView({ block: "nearest", behavior: "auto" });
       }
@@ -11462,7 +11238,7 @@ var ListBoxMultipleUncontrolled = ({
     }
   );
 };
-var ListBox = (0, import_react26.forwardRef)(function ListBox2({
+var ListBox = (0, import_react27.forwardRef)(function ListBox2({
   value,
   onSelectionChanged,
   ...props
@@ -11497,20 +11273,20 @@ var ListBoxUncontrolled = ({
 };
 
 // src/components/layout/TabView.tsx
-var import_react27 = require("react");
 var import_react28 = require("react");
-var import_clsx25 = __toESM(require("clsx"));
+var import_react29 = require("react");
+var import_clsx24 = __toESM(require("clsx"));
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var TabContext = (0, import_react28.createContext)(null);
+var TabContext = (0, import_react29.createContext)(null);
 function useTabContext() {
-  const ctx = (0, import_react28.useContext)(TabContext);
+  const ctx = (0, import_react29.useContext)(TabContext);
   if (!ctx) throw new Error("useTabContext must be used inside a <TabView>");
   return ctx;
 }
 function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, ...props }) {
-  const [tabs, setTabs] = (0, import_react28.useState)([]);
-  const [active, setActiveState] = (0, import_react28.useState)(null);
-  const buttonRefs = (0, import_react28.useRef)({});
+  const [tabs, setTabs] = (0, import_react29.useState)([]);
+  const [active, setActiveState] = (0, import_react29.useState)(null);
+  const buttonRefs = (0, import_react29.useRef)({});
   const setActive = (id) => {
     setActiveState(id);
     onTabChanged?.(id);
@@ -11544,8 +11320,8 @@ function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, .
     buttonRefs.current[nextId]?.focus();
   };
   const value = { active, setActive, register, unregister, tabs };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TabContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...outerDivProps, className: (0, import_clsx25.default)("w-full", props.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "tablist", ...props, className: (0, import_clsx25.default)("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TabContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...outerDivProps, className: (0, import_clsx24.default)("w-full", props.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "tablist", ...props, className: (0, import_clsx24.default)("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "button",
       {
         role: "tab",
@@ -11556,8 +11332,8 @@ function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, .
         ref: (el) => buttonRefs.current[t.id] = el,
         onClick: () => setActive(t.id),
         onKeyDown: (e) => onKeyDown(e, t.id),
-        className: (0, import_clsx25.default)(
-          "flex-row-0 grow justify-center px-3 pb-1 typography-label-md border-b-2",
+        className: (0, import_clsx24.default)(
+          "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
@@ -11569,9 +11345,9 @@ function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, .
 }
 function Tab({ id: customId, label, children, ...props }) {
   const { active, register, unregister } = useTabContext();
-  const generatedId = (0, import_react27.useId)();
+  const generatedId = (0, import_react28.useId)();
   const id = customId ?? generatedId;
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     register(id, label);
     return () => unregister(id);
   }, [id, label]);
@@ -11590,7 +11366,7 @@ function Tab({ id: customId, label, children, ...props }) {
 }
 
 // src/components/layout/TextImage.tsx
-var import_clsx26 = __toESM(require("clsx"));
+var import_clsx25 = __toESM(require("clsx"));
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var TextImage = ({
   title,
@@ -11616,7 +11392,7 @@ var TextImage = ({
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
-      className: (0, import_clsx26.default)("rounded-2xl w-full", className),
+      className: (0, import_clsx25.default)("rounded-2xl w-full", className),
       style: {
         backgroundImage: `url(${imageUrl})`,
         backgroundSize: "cover"
@@ -11624,9 +11400,9 @@ var TextImage = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "div",
         {
-          className: (0, import_clsx26.default)(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          className: (0, import_clsx25.default)(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
-            badge && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: (0, import_clsx26.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
+            badge && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: (0, import_clsx25.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
             /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex-col-1 overflow-hidden", children: [
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "typography-title-lg", children: title }),
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-ellipsis overflow-hidden", children: description })
@@ -11694,31 +11470,31 @@ var VerticalDivider = ({
 
 // src/components/loading-states/ErrorComponent.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_clsx27 = __toESM(require("clsx"));
+var import_clsx26 = __toESM(require("clsx"));
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var ErrorComponent = ({
   errorText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: (0, import_clsx27.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: (0, import_clsx26.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react8.AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/components/loading-states/LoadingContainer.tsx
-var import_clsx28 = require("clsx");
+var import_clsx27 = require("clsx");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var LoadingContainer = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: (0, import_clsx28.clsx)("relative overflow-hidden shimmer bg-disabled-background rounded-md", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: (0, import_clsx27.clsx)("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-var import_clsx29 = require("clsx");
+var import_clsx28 = require("clsx");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var LoadingAndErrorComponent = ({
   children,
@@ -11729,8 +11505,8 @@ var LoadingAndErrorComponent = ({
   minimumLoadingDuration = 200,
   className
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react29.useState)(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react29.useState)(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react30.useState)(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react30.useState)(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -11739,36 +11515,35 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingContainer, { className: (0, import_clsx29.clsx)(className) });
+    return loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingContainer, { className: (0, import_clsx28.clsx)(className) });
   }
   if (hasError) {
-    return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingContainer, { className: (0, import_clsx29.clsx)("bg-negative", className) });
+    return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingContainer, { className: (0, import_clsx28.clsx)("bg-negative", className) });
   }
   return children;
 };
 
 // src/components/loading-states/LoadingAnimation.tsx
-var import_clsx30 = __toESM(require("clsx"));
+var import_clsx29 = __toESM(require("clsx"));
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var LoadingAnimation = ({
   loadingText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: (0, import_clsx30.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: (0, import_clsx29.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(HelpwaveLogo, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
 };
 
 // src/components/loading-states/LoadingButton.tsx
-var import_clsx31 = __toESM(require("clsx"));
+var import_clsx30 = __toESM(require("clsx"));
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
-  const paddingClass = ButtonUtil.paddingMapping[size];
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: (0, import_clsx31.default)("flex-row-2 absolute inset-0 items-center justify-center bg-white/40", paddingClass), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SolidButton, { ...rest, disabled: rest.disabled, onClick })
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: (0, import_clsx30.default)("flex-row-2 absolute inset-0 items-center justify-center bg-white/40"), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button, { ...rest, size, disabled: rest.disabled, onClick })
   ] });
 };
 
@@ -11830,33 +11605,39 @@ var ProgressIndicator = ({
 
 // src/components/navigation/BreadCrumb.tsx
 var import_link = __toESM(require_link2());
-var import_clsx32 = __toESM(require("clsx"));
-var import_react30 = require("react");
+var import_clsx31 = __toESM(require("clsx"));
+var import_react31 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
-  const color = "text-description";
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: (0, import_clsx32.default)("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: (0, import_clsx31.default)("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react30.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react31.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         import_link.default,
         {
           href: crumb.link,
-          className: (0, import_clsx32.default)("btn-sm hover:bg-description/20", linkClassName, { [color]: !isLast }),
+          className: (0, import_clsx31.default)(
+            "btn-sm coloring-text-hover",
+            {
+              description: !isLast,
+              neutral: isLast
+            },
+            linkClassName
+          ),
           children: crumb.display
         }
       ),
-      !isLast && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_clsx32.default)(`px-1`, color), children: "/" })
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_clsx31.default)(`px-1`, "text-description"), children: "/" })
     ] }, index);
   }) });
 };
 
 // src/components/navigation/Navigation.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_react31 = require("react");
 var import_react32 = require("react");
+var import_react33 = require("react");
 var import_link2 = __toESM(require_link2());
-var import_clsx33 = __toESM(require("clsx"));
+var import_clsx32 = __toESM(require("clsx"));
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
@@ -11867,10 +11648,10 @@ var NavigationItemWithSubItem = ({
   horizontalAlignment = "center",
   ...options
 }) => {
-  const [isOpen, setOpen] = (0, import_react32.useState)(false);
-  const containerRef = (0, import_react32.useRef)();
-  const triggerRef = (0, import_react32.useRef)(null);
-  const id = (0, import_react32.useId)();
+  const [isOpen, setOpen] = (0, import_react33.useState)(false);
+  const containerRef = (0, import_react33.useRef)();
+  const triggerRef = (0, import_react33.useRef)(null);
+  const id = (0, import_react33.useId)();
   const style = useFloatingElement({
     active: isOpen,
     containerRef,
@@ -11878,12 +11659,13 @@ var NavigationItemWithSubItem = ({
     horizontalAlignment,
     ...options
   });
-  const onBlur = (0, import_react32.useCallback)((event) => {
+  const onBlur = (0, import_react33.useCallback)((event) => {
     const nextFocus = event.relatedTarget;
     if (!containerRef.current?.contains(nextFocus) && !triggerRef.current?.contains(nextFocus)) {
       setOpen(false);
     }
   }, []);
+  const zIndex = useZIndexRegister(isOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       "button",
@@ -11918,11 +11700,11 @@ var NavigationItemWithSubItem = ({
         },
         onBlur,
         hidden: !isOpen,
-        className: (0, import_clsx33.default)(
-          "fixed flex-col-4 p-4 bg-surface text-on-surface shadow-side shadow-hw-bottom rounded-md z-2001",
+        className: (0, import_clsx32.default)(
+          "fixed flex-col-4 p-4 bg-surface text-on-surface shadow-side shadow-hw-bottom rounded-md",
           { "opacity-0": !style }
         ),
-        style,
+        style: { ...style, zIndex },
         children: items.map(({ link, label: label2, external }, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           import_link2.default,
           {
@@ -11937,27 +11719,30 @@ var NavigationItemWithSubItem = ({
   ] });
 };
 var NavigationItemList = ({ items, ...restProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { ...restProps, className: (0, import_clsx33.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { ...restProps, className: (0, import_clsx32.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
-  const [isMobileOpen, setIsMobileOpen] = (0, import_react32.useState)(false);
-  const id = (0, import_react32.useId)();
-  const menuRef = (0, import_react32.useRef)(null);
-  (0, import_react31.useEffect)(() => {
+  const [isMobileOpen, setIsMobileOpen] = (0, import_react33.useState)(false);
+  const id = (0, import_react33.useId)();
+  const menuRef = (0, import_react33.useRef)(null);
+  (0, import_react32.useEffect)(() => {
     menuRef.current?.focus();
   }, [isMobileOpen]);
+  const zIndex = useZIndexRegister(isMobileOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("nav", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       NavigationItemList,
       {
         ...props,
-        className: (0, import_clsx33.default)("hidden", { "desktop:flex": !isMobileOpen }, props.className)
+        className: (0, import_clsx32.default)("hidden", { "desktop:flex": !isMobileOpen }, props.className)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      IconButton,
+      Button,
       {
-        color: "transparent",
+        layout: "icon",
+        coloringStyle: "text",
+        color: "neutral",
         onClick: () => setIsMobileOpen(true),
         className: "desktop:hidden",
         "aria-haspopup": "true",
@@ -11979,16 +11764,26 @@ var Navigation = ({ ...props }) => {
             event.stopPropagation();
           }
         },
-        className: (0, import_clsx33.default)(
-          "flex-col-8 items-center justify-center fixed inset-0 p-8 w-screen h-screen z-2000 bg-surface text-on-surface",
+        className: (0, import_clsx32.default)(
+          "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__ */ (0, import_jsx_runtime43.jsx)(IconButton, { color: "transparent", onClick: () => setIsMobileOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react9.XIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemList, { ...props, className: (0, import_clsx33.default)("flex-col-8", props.className) })
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            Button,
+            {
+              layout: "icon",
+              coloringStyle: "text",
+              color: "neutral",
+              onClick: () => setIsMobileOpen(false),
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react9.XIcon, {})
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemList, { ...props, className: (0, import_clsx32.default)("flex-col-8", props.className) })
         ]
       }
     )
@@ -11997,8 +11792,8 @@ var Navigation = ({ ...props }) => {
 
 // src/components/navigation/Pagination.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_clsx34 = __toESM(require("clsx"));
-var import_react33 = require("react");
+var import_clsx33 = __toESM(require("clsx"));
+var import_react34 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var Pagination = ({
   pageIndex,
@@ -12008,11 +11803,11 @@ var Pagination = ({
   style
 }) => {
   const translation = useHightideTranslation();
-  const [value, setValue] = (0, import_react33.useState)((pageIndex + 1).toString());
+  const [value, setValue] = (0, import_react34.useState)((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -12022,15 +11817,35 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_clsx34.default)("flex-row-1", className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react10.ChevronFirst, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react10.ChevronLeft, {}) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_clsx33.default)("flex-row-1", className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      Button,
+      {
+        layout: "icon",
+        coloringStyle: "text",
+        color: "neutral",
+        onClick: () => changePage(0),
+        disabled: onFirstPage || noPages,
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react10.ChevronFirst, {})
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      Button,
+      {
+        layout: "icon",
+        coloringStyle: "text",
+        color: "neutral",
+        onClick: () => changePage(pageIndex - 1),
+        disabled: onFirstPage || noPages,
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react10.ChevronLeft, {})
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         Input,
         {
           value,
-          className: (0, import_clsx34.default)(
+          className: (0, import_clsx33.default)(
             "w-24 text-center font-bold input-indicator-hidden h-10"
           ),
           type: "number",
@@ -12059,14 +11874,34 @@ var Pagination = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react10.ChevronRight, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageCount - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react10.ChevronLast, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      Button,
+      {
+        layout: "icon",
+        coloringStyle: "text",
+        color: "neutral",
+        onClick: () => changePage(pageIndex + 1),
+        disabled: onLastPage || noPages,
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react10.ChevronRight, {})
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      Button,
+      {
+        layout: "icon",
+        coloringStyle: "text",
+        color: "neutral",
+        onClick: () => changePage(pageCount - 1),
+        disabled: onLastPage || noPages,
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react10.ChevronLast, {})
+      }
+    )
   ] });
 };
 
 // src/components/navigation/StepperBar.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_clsx35 = __toESM(require("clsx"));
+var import_clsx34 = __toESM(require("clsx"));
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var defaultState = {
   currentStep: 0,
@@ -12092,10 +11927,10 @@ var StepperBar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
-      className: (0, import_clsx35.default)("flex-row-2 justify-between", className),
+      className: (0, import_clsx34.default)("flex-row-2 justify-between", className),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-          SolidButton,
+          Button,
           {
             disabled: currentStep === 0 || disabledSteps.has(currentStep),
             onClick: () => {
@@ -12114,7 +11949,7 @@ var StepperBar = ({
             "div",
             {
               onClick: () => seen && update(index),
-              className: (0, import_clsx35.default)(
+              className: (0, import_clsx34.default)(
                 "rounded-full w-4 h-4",
                 {
                   "bg-stepperbar-dot-active hover:brightness-75": index === currentStep && seen && !disabledSteps.has(currentStep),
@@ -12131,7 +11966,7 @@ var StepperBar = ({
           );
         }) }),
         currentStep !== numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-          SolidButton,
+          Button,
           {
             onClick: () => update(currentStep + 1),
             className: "flex-row-1 items-center justify-center",
@@ -12143,7 +11978,7 @@ var StepperBar = ({
           }
         ) }),
         currentStep === numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-2 flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-          SolidButton,
+          Button,
           {
             disabled: disabledSteps.has(currentStep),
             onClick: onFinish,
@@ -12175,24 +12010,25 @@ var import_lucide_react14 = require("lucide-react");
 
 // src/components/user-action/Checkbox.tsx
 var import_lucide_react12 = require("lucide-react");
-var import_clsx36 = __toESM(require("clsx"));
+var import_clsx35 = __toESM(require("clsx"));
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var checkboxSizeMapping = {
-  sm: "size-5 border-1",
-  md: "size-6 border-1",
-  lg: "size-8 border-2"
+  small: "size-5 border-2",
+  medium: "size-6 border-2",
+  large: "size-8 border-2"
 };
 var checkboxIconSizeMapping = {
-  sm: "size-4 stroke-3",
-  md: "size-5 stroke-3",
-  lg: "size-7 stroke-3"
+  small: "size-3.5 stroke-3",
+  medium: "size-4.5 stroke-3",
+  large: "size-6 stroke-3"
 };
 var Checkbox = ({
   disabled,
   checked = false,
   indeterminate = false,
+  invalid = false,
   onCheckedChange,
-  size = "md",
+  size = "medium",
   className = "",
   ...props
 }) => {
@@ -12216,25 +12052,21 @@ var Checkbox = ({
           props.onKeyDown?.(event);
         }
       },
-      className: (0, import_clsx36.default)(
+      className: (0, import_clsx35.default)(
         usedSizeClass,
-        `flex-col-0 items-center justify-center rounded`,
-        {
-          "text-disabled border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
-          "hover:border-primary": !disabled,
-          "bg-input-background": !disabled && !checked,
-          "bg-primary/30 border-primary text-primary": !disabled && (checked || indeterminate)
-        },
         className
       ),
+      "data-name": props["data-name"] ?? "checkbox",
+      "data-value": !indeterminate ? checked : "indeterminate",
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0,
       role: "checkbox",
       "aria-checked": indeterminate ? "mixed" : checked,
       "aria-disabled": disabled,
       tabIndex: disabled ? -1 : 0,
       children: [
-        !checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: (0, import_clsx36.default)("bg-input-background", innerIconSize) }),
-        checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react12.Check, { className: innerIconSize }),
-        indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react12.Minus, { className: innerIconSize })
+        !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react12.Check, { className: innerIconSize, "aria-hidden": true }),
+        indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react12.Minus, { className: innerIconSize, "aria-hidden": true })
       ]
     }
   );
@@ -12257,7 +12089,7 @@ var CheckboxUncontrolled = ({
 
 // src/components/properties/PropertyBase.tsx
 var import_lucide_react13 = require("lucide-react");
-var import_clsx37 = __toESM(require("clsx"));
+var import_clsx36 = __toESM(require("clsx"));
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var PropertyBase = ({
   name,
@@ -12271,14 +12103,14 @@ var PropertyBase = ({
 }) => {
   const translation = useHightideTranslation();
   const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: (0, import_clsx37.default)("flex-row-0 group", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: (0, import_clsx36.default)("flex-row-0 group", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "div",
       {
-        className: (0, import_clsx37.default)(
+        className: (0, import_clsx36.default)(
           "flex-row-2 max-w-48 min-w-48 px-3 py-2 items-center rounded-l-xl border-2 border-r-0",
           {
-            "bg-property-title-background text-property-title-text group-hover:border-primary": !requiredAndNoValue,
+            "bg-property-title-background text-property-title-text group-hover:border-primary group-focus-within:border-primary": !requiredAndNoValue,
             "bg-warning text-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
           },
           className
@@ -12292,10 +12124,10 @@ var PropertyBase = ({
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "div",
       {
-        className: (0, import_clsx37.default)(
+        className: (0, import_clsx36.default)(
           "flex-row-2 grow px-3 py-2 justify-between items-center rounded-r-xl border-2 border-l-0 min-h-15",
           {
-            "bg-input-background text-input-text group-hover:border-primary": !requiredAndNoValue,
+            "bg-input-background text-input-text group-hover:border-primary group-focus-within:border-primary": !requiredAndNoValue,
             "bg-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
           },
           className
@@ -12304,11 +12136,12 @@ var PropertyBase = ({
           input({ softRequired, hasValue }),
           requiredAndNoValue && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-warning", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react13.AlertTriangle, { size: 24 }) }),
           onRemove && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-            TextButton,
+            Button,
             {
               onClick: onRemove,
               color: "negative",
-              className: (0, import_clsx37.default)("items-center"),
+              coloringStyle: "text",
+              className: (0, import_clsx36.default)("items-center"),
               disabled: !hasValue,
               children: translation("remove")
             }
@@ -12320,7 +12153,7 @@ var PropertyBase = ({
 };
 
 // src/components/properties/CheckboxProperty.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var CheckboxProperty = ({
   value,
@@ -12329,7 +12162,7 @@ var CheckboxProperty = ({
   ...baseProps
 }) => {
   const translation = useHightideTranslation();
-  const id = (0, import_react34.useId)();
+  const id = (0, import_react35.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     PropertyBase,
     {
@@ -12356,7 +12189,7 @@ var CheckboxProperty = ({
 
 // src/components/properties/DateProperty.tsx
 var import_lucide_react15 = require("lucide-react");
-var import_clsx38 = __toESM(require("clsx"));
+var import_clsx37 = __toESM(require("clsx"));
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var DateProperty = ({
   value,
@@ -12377,7 +12210,7 @@ var DateProperty = ({
       input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         Input,
         {
-          className: (0, import_clsx38.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
+          className: (0, import_clsx37.default)("default-style-none focus-style-none", { "bg-surface-warning": softRequired && !hasValue }),
           value: dateText,
           type: type === "dateTime" ? "datetime-local" : "date",
           readOnly,
@@ -12399,7 +12232,7 @@ var DateProperty = ({
 
 // src/components/properties/MultiSelectProperty.tsx
 var import_lucide_react16 = require("lucide-react");
-var import_clsx39 = __toESM(require("clsx"));
+var import_clsx38 = __toESM(require("clsx"));
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var MultiSelectProperty = ({
   children,
@@ -12421,14 +12254,15 @@ var MultiSelectProperty = ({
           onValuesChanged,
           disabled: props.readOnly,
           contentPanelProps: {
-            className: (0, import_clsx39.default)(
+            className: (0, import_clsx38.default)(
               "!border-none !min-h-10"
             )
           },
           chipDisplayProps: {
-            className: (0, import_clsx39.default)({
-              "!bg-warning !text-surface-warning": softRequired && !hasValue
-            })
+            className: (0, import_clsx38.default)(
+              "default-style-none flex flex-wrap gap-x-2 gap-y-2 items-center hover:cursor-pointer",
+              { "!bg-warning text-surface-warning": softRequired && !hasValue }
+            )
           },
           children
         }
@@ -12439,7 +12273,7 @@ var MultiSelectProperty = ({
 
 // src/components/properties/NumberProperty.tsx
 var import_lucide_react17 = require("lucide-react");
-var import_clsx40 = __toESM(require("clsx"));
+var import_clsx39 = __toESM(require("clsx"));
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var NumberProperty = ({
   value,
@@ -12459,40 +12293,52 @@ var NumberProperty = ({
       onRemove,
       hasValue,
       icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react17.Binary, { size: 24 }),
-      input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-        "div",
-        {
-          className: (0, import_clsx40.default)("flex-row-2 grow", { "text-warning": softRequired && !hasValue }),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              Input,
-              {
-                className: (0, import_clsx40.default)("!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);
+      input: ({ softRequired }) => (
+        // TODO this max width might be to low for some numbers
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx39.default)("relative flex-row-2 max-w-56", { "text-warning": softRequired && !hasValue }),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                Input,
+                {
+                  className: (0, import_clsx39.default)("default-style-none focus-style-none w-full pr-8", { "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__ */ (0, import_jsx_runtime51.jsx)("span", { className: (0, import_clsx40.default)("ml-1", { "bg-surface-warning": softRequired && !hasValue }), children: suffix })
-          ]
-        }
+              ),
+              suffix && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                "span",
+                {
+                  className: (0, import_clsx39.default)(
+                    "absolute top-1/2 -translate-y-1/2 right-2",
+                    { "bg-surface-warning": softRequired && !hasValue }
+                  ),
+                  children: suffix
+                }
+              )
+            ]
+          }
+        )
       )
     }
   );
@@ -12500,7 +12346,7 @@ var NumberProperty = ({
 
 // src/components/properties/SelectProperty.tsx
 var import_lucide_react18 = require("lucide-react");
-var import_clsx41 = __toESM(require("clsx"));
+var import_clsx40 = __toESM(require("clsx"));
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var SingleSelectProperty = ({
   children,
@@ -12523,8 +12369,8 @@ var SingleSelectProperty = ({
           onValueChanged,
           disabled: props.readOnly,
           buttonProps: {
-            className: (0, import_clsx41.default)(
-              "border-none w-full",
+            className: (0, import_clsx40.default)(
+              "default-style-none focus-style-none flex-row-2 w-full items-center",
               {
                 "!bg-warning !text-surface-warning": softRequired && !hasValue
               }
@@ -12540,23 +12386,21 @@ var SingleSelectProperty = ({
 
 // src/components/properties/TextProperty.tsx
 var import_lucide_react19 = require("lucide-react");
-var import_clsx43 = __toESM(require("clsx"));
+var import_clsx42 = __toESM(require("clsx"));
 
 // src/components/user-action/Textarea.tsx
-var import_react35 = require("react");
-var import_clsx42 = __toESM(require("clsx"));
+var import_react36 = require("react");
+var import_clsx41 = __toESM(require("clsx"));
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var Textarea = (0, import_react35.forwardRef)(function Textarea2({
+var Textarea = (0, import_react36.forwardRef)(function Textarea2({
   id,
   onChange,
   onChangeText,
   onBlur,
   onEditCompleted,
   saveDelayOptions,
-  defaultStyle = true,
   invalid = false,
   disabled = false,
-  className,
   ...props
 }, ref) {
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
@@ -12567,18 +12411,10 @@ var Textarea = (0, import_react35.forwardRef)(function Textarea2({
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "textarea",
     {
+      ...props,
       ref,
       id,
-      className: (0, import_clsx42.default)(
-        "resize-none w-full h-32 overflow-y-scroll",
-        "py-2 px-3 rounded-md border-2 border-transparent focus-style-none",
-        {
-          "bg-input-background text-input-text hover:border-primary focus:border-primary": !disabled && !invalid,
-          "bg-negative/20 text-negative hover:border-negative focus-visible:border-negative": invalid && !disabled && defaultStyle,
-          "text-disabled bg-disabled-background border-disabled-border": disabled && defaultStyle
-        },
-        className
-      ),
+      disabled,
       onChange: (event) => {
         const value = event.target.value;
         restartTimer(() => {
@@ -12591,8 +12427,10 @@ var Textarea = (0, import_react35.forwardRef)(function Textarea2({
         onBlur?.(event);
         onEditCompletedWrapper(event.target.value);
       },
-      disabled,
-      ...props
+      "data-name": props["data-name"] ?? "textarea",
+      "data-value": props.value ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0
     }
   );
 });
@@ -12620,12 +12458,12 @@ var TextareaWithHeadline = ({
   containerClassName,
   ...props
 }) => {
-  const genId = (0, import_react35.useId)();
+  const genId = (0, import_react36.useId)();
   const usedId = id ?? genId;
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "div",
     {
-      className: (0, import_clsx42.default)(
+      className: (0, import_clsx41.default)(
         "group flex-col-3 border-2 rounded-lg",
         {
           "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
@@ -12640,11 +12478,10 @@ var TextareaWithHeadline = ({
           {
             ...props,
             id: usedId,
-            className: (0, import_clsx42.default)(
+            className: (0, import_clsx41.default)(
               "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
               className
-            ),
-            defaultStyle: false
+            )
           }
         )
       ]
@@ -12674,11 +12511,11 @@ var TextProperty = ({
       input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         Textarea,
         {
-          className: (0, import_clsx43.default)({
-            "bg-surface-warning placeholder-warning": softRequired && !hasValue
-          }),
+          className: (0, import_clsx42.default)(
+            "default-style-none focus-style-none w-full",
+            { "bg-surface-warning placeholder-warning": softRequired && !hasValue }
+          ),
           rows: 5,
-          defaultStyle: false,
           value: value ?? "",
           readOnly,
           placeholder: `${translation("text")}...`,
@@ -12703,12 +12540,12 @@ var TextProperty = ({
 };
 
 // src/components/table/FillerRowElement.tsx
-var import_clsx44 = require("clsx");
+var import_clsx43 = require("clsx");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var FillerRowElement = ({
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: (0, import_clsx44.clsx)("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: (0, import_clsx43.clsx)("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
 };
 
 // src/components/table/Filter.ts
@@ -12726,25 +12563,24 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-var import_react41 = require("react");
-var import_clsx48 = __toESM(require("clsx"));
+var import_react42 = require("react");
+var import_clsx47 = __toESM(require("clsx"));
 var import_react_table = require("@tanstack/react-table");
-var import_react_custom_scrollbars_23 = require("react-custom-scrollbars-2");
 
 // src/components/table/TableCell.tsx
-var import_clsx45 = require("clsx");
+var import_clsx44 = require("clsx");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: (0, import_clsx45.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: (0, import_clsx44.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
 var useResizeCallbackWrapper = (callback) => {
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -12754,12 +12590,13 @@ var useResizeCallbackWrapper = (callback) => {
 
 // src/components/table/TableSortButton.tsx
 var import_lucide_react20 = require("lucide-react");
-var import_clsx46 = __toESM(require("clsx"));
+var import_clsx45 = __toESM(require("clsx"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var TableSortButton = ({
   sortDirection,
   invert = false,
   color = "neutral",
+  size = "tiny",
   className,
   ...buttonProps
 }) => {
@@ -12772,11 +12609,12 @@ var TableSortButton = ({
     icon = usedSortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react20.ChevronUp, { className: "w-full h-full" }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react20.ChevronDown, { className: "w-full h-full" });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-    IconButton,
+    Button,
     {
-      size: "tiny",
+      layout: "icon",
       color,
-      className: (0, import_clsx46.default)(className),
+      size,
+      className: (0, import_clsx45.default)(className),
       ...buttonProps,
       children: icon
     }
@@ -12787,8 +12625,8 @@ var TableSortButton = ({
 var import_lucide_react21 = require("lucide-react");
 
 // src/components/user-action/Menu.tsx
-var import_react39 = require("react");
-var import_clsx47 = __toESM(require("clsx"));
+var import_react40 = require("react");
+var import_clsx46 = __toESM(require("clsx"));
 
 // src/utils/bagFunctions.ts
 var resolve = (children, bag) => {
@@ -12859,15 +12697,15 @@ var usePopoverPosition = (trigger, options) => {
 };
 
 // src/hooks/useHoverState.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
 };
 var useHoverState = (props = void 0) => {
   const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = (0, import_react37.useState)(false);
-  const [timer, setTimer] = (0, import_react37.useState)();
+  const [isHovered, setIsHovered] = (0, import_react38.useState)(false);
+  const [timer, setTimer] = (0, import_react38.useState)();
   const onMouseEnter = () => {
     if (isDisabled) {
       return;
@@ -12883,14 +12721,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -12903,9 +12741,9 @@ var useHoverState = (props = void 0) => {
 };
 
 // src/hooks/useOutsideClick.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 var useOutsideClick = (refs, handler) => {
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -12933,7 +12771,7 @@ var MenuItem = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
   "div",
   {
-    className: (0, import_clsx47.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+    className: (0, import_clsx46.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
       "text-right": alignment === "right",
       "text-left": alignment === "left",
       "text-disabled cursor-not-allowed": isDisabled,
@@ -12963,10 +12801,10 @@ var Menu = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = (0, import_react39.useRef)(null);
-  const menuRef = (0, import_react39.useRef)(null);
+  const triggerRef = (0, import_react40.useRef)(null);
+  const menuRef = (0, import_react40.useRef)(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = (0, import_react39.useState)(true);
+  const [isHidden, setIsHidden] = (0, import_react40.useState)(true);
   const bag = {
     isOpen,
     close: () => setIsOpen(false),
@@ -12977,7 +12815,7 @@ var Menu = ({
     triggerRef.current?.getBoundingClientRect(),
     { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!isOpen) return;
     const triggerEl = triggerRef.current;
     if (!triggerEl) return;
@@ -12994,11 +12832,12 @@ var Menu = ({
       window.removeEventListener("resize", close);
     };
   }, [isOpen, setIsOpen]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (isOpen) {
       setIsHidden(false);
     }
   }, [isOpen]);
+  const zIndex = useZIndexRegister(isOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
     trigger(bag, triggerRef),
     (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
@@ -13006,7 +12845,7 @@ var Menu = ({
       {
         ref: menuRef,
         onClick: (e) => e.stopPropagation(),
-        className: (0, import_clsx47.default)(
+        className: (0, import_clsx46.default)(
           "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
           {
             "animate-pop-in": isOpen,
@@ -13021,7 +12860,8 @@ var Menu = ({
           }
         },
         style: {
-          ...menuPosition
+          ...menuPosition,
+          zIndex
         },
         children: BagFunctionUtil.resolve(children, bag)
       }
@@ -13030,7 +12870,7 @@ var Menu = ({
 };
 
 // src/components/table/TableFilterButton.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var TableFilterButton = ({
   filterType,
@@ -13038,16 +12878,25 @@ var TableFilterButton = ({
 }) => {
   const translation = useHightideTranslation();
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react40.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react41.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     Menu,
     {
       trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react21.FilterIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          Button,
+          {
+            layout: "icon",
+            color: "neutral",
+            size: "tiny",
+            onClick: toggleOpen,
+            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react21.FilterIcon, {})
+          }
+        ),
         hasFilter && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "div",
           {
@@ -13126,11 +12975,11 @@ var TableFilterButton = ({
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
-          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SolidButton, { color: "negative", size: "small", onClick: () => {
+          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();
           }, children: translation("remove") }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SolidButton, { size: "small", onClick: () => {
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { size: "small", onClick: () => {
             column.setFilterValue(filterValue);
             close();
           }, children: translation("apply") })
@@ -13149,27 +12998,28 @@ var Table = ({
   onRowClick,
   className,
   tableClassName,
+  tableContainerClassName,
   defaultColumn,
   state,
   columns,
   ...tableOptions
 }) => {
-  const ref = (0, import_react41.useRef)(null);
-  const tableRef = (0, import_react41.useRef)(null);
-  const [columnSizing, setColumnSizing] = (0, import_react41.useState)(columns.reduce((previousValue, currentValue) => {
+  const ref = (0, import_react42.useRef)(null);
+  const tableRef = (0, import_react42.useRef)(null);
+  const [columnSizing, setColumnSizing] = (0, import_react42.useState)(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react41.useState)();
-  const [pagination, setPagination] = (0, import_react41.useState)({
+  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react42.useState)();
+  const [pagination, setPagination] = (0, import_react42.useState)({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = (0, import_react41.useState)(initialState?.columnFilters);
-  const computedColumnMinWidths = (0, import_react41.useMemo)(() => {
+  const [columnFilters, setColumnFilters] = (0, import_react42.useState)(initialState?.columnFilters);
+  const computedColumnMinWidths = (0, import_react42.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -13178,7 +13028,7 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const computedColumnMaxWidths = (0, import_react41.useMemo)(() => {
+  const computedColumnMaxWidths = (0, import_react42.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -13186,12 +13036,12 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const tableMinWidth = (0, import_react41.useMemo)(() => {
+  const tableMinWidth = (0, import_react42.useMemo)(() => {
     return columns.reduce((sum, column) => {
       return sum + computedColumnMinWidths[column.id];
     }, 0);
   }, [columns, computedColumnMinWidths]);
-  const updateColumnSizes = (0, import_react41.useMemo)(() => {
+  const updateColumnSizes = (0, import_react42.useMemo)(() => {
     return (previous) => {
       const updateSizing = {
         ...columnSizing,
@@ -13308,18 +13158,18 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react41.useState)(false);
-  (0, import_react41.useEffect)(() => {
+  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react42.useState)(false);
+  (0, import_react42.useEffect)(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
     }
   }, [columnSizing, hasInitializedSizing]);
-  useResizeCallbackWrapper((0, import_react41.useCallback)(() => {
+  useResizeCallbackWrapper((0, import_react42.useCallback)(() => {
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -13335,7 +13185,7 @@ var Table = ({
       }));
     }
   }, [data, pageCount, pagination.pageSize, pagination.pageIndex]);
-  const columnSizeVars = (0, import_react41.useMemo)(() => {
+  const columnSizeVars = (0, import_react42.useMemo)(() => {
     const headers = table.getFlatHeaders();
     const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
@@ -13345,125 +13195,115 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  console.log(table.getState().sorting);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { ref, className: (0, import_clsx48.default)("flex-col-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-      import_react_custom_scrollbars_23.Scrollbars,
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { ref, className: (0, import_clsx47.default)("flex-col-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: (0, import_clsx47.default)("flex-col-0 w-full overflow-auto", tableContainerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+      "table",
       {
-        autoHeight: true,
-        autoHeightMax: tableRef.current?.offsetHeight ? tableRef.current?.offsetHeight + 2 : void 0,
-        autoHide: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
-          "table",
-          {
-            ref: tableRef,
-            className: (0, import_clsx48.default)(tableClassName),
-            style: {
-              ...columnSizeVars,
-              width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
+        ref: tableRef,
+        className: (0, import_clsx47.default)(tableClassName),
+        style: {
+          ...columnSizeVars,
+          width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
+        },
+        children: [
+          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            "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__ */ (0, import_jsx_runtime60.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                "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__ */ (0, import_jsx_runtime60.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
-                  "th",
-                  {
-                    colSpan: header.colSpan,
-                    className: (0, import_clsx48.default)("relative group", header.column.columnDef.meta?.className),
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-row-1 items-center", children: [
-                        header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                          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__ */ (0, import_jsx_runtime60.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+              "th",
+              {
+                colSpan: header.colSpan,
+                className: (0, import_clsx47.default)("relative group", header.column.columnDef.meta?.className),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                    header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                      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__ */ (0, import_jsx_runtime60.jsx)(
-                          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,
-                        (0, import_react_table.flexRender)(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )
-                      ] }) }),
-                      header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                        "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__ */ (0, import_jsx_runtime60.jsxs)("tbody", { children: [
-                table.getRowModel().rows.map((row) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                    "tr",
+                      }
+                    ),
+                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                      TableFilterButton,
+                      {
+                        column: header.column,
+                        filterType: header.column.columnDef.meta.filterType
+                      }
+                    ) : null,
+                    (0, import_react_table.flexRender)(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )
+                  ] }) }),
+                  header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                    "div",
                     {
-                      onClick: () => onRowClick?.(row, table),
-                      className: table.options.meta?.bodyRowClassName,
-                      children: row.getVisibleCells().map((cell) => {
-                        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { children: (0, import_react_table.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__ */ (0, import_jsx_runtime60.jsx)("tr", { children: columns.map((column) => {
-                    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(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__ */ (0, import_jsx_runtime60.jsxs)("tbody", { children: [
+            table.getRowModel().rows.map((row) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                "tr",
+                {
+                  onClick: () => onRowClick?.(row, table),
+                  className: table.options.meta?.bodyRowClassName,
+                  children: row.getVisibleCells().map((cell) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { children: (0, import_react_table.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__ */ (0, import_jsx_runtime60.jsx)("tr", { children: columns.map((column) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FillerRowElement, {}) }, column.id);
+              }) }, "filler-row-" + index);
+            })
+          ] })
+        ]
       }
-    ),
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       Pagination,
       {
@@ -13495,7 +13335,7 @@ var TableWithSelection = ({
   meta,
   ...props
 }) => {
-  const columnsWithSelection = (0, import_react41.useMemo)(() => {
+  const columnsWithSelection = (0, import_react42.useMemo)(() => {
     return [
       {
         id: selectionRowId,
@@ -13553,7 +13393,7 @@ var TableWithSelection = ({
       },
       meta: {
         ...meta,
-        bodyRowClassName: (0, import_clsx48.default)(
+        bodyRowClassName: (0, import_clsx47.default)(
           { "cursor-pointer": !disableClickRowClickSelection },
           meta?.bodyRowClassName
         )
@@ -13564,8 +13404,8 @@ var TableWithSelection = ({
 };
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
-var import_react42 = require("react");
-var import_clsx49 = require("clsx");
+var import_react43 = require("react");
+var import_clsx48 = require("clsx");
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -13584,8 +13424,8 @@ var CopyToClipboardWrapper = ({
   zIndex = 10
 }) => {
   const translation = useHightideTranslation();
-  const [isShowingIndication, setIsShowingIndication] = (0, import_react42.useState)(false);
-  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react42.useState)(false);
+  const [isShowingIndication, setIsShowingIndication] = (0, import_react43.useState)(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react43.useState)(false);
   const positionClasses = {
     top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
     bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
@@ -13608,7 +13448,7 @@ var CopyToClipboardWrapper = ({
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
-      className: (0, import_clsx49.clsx)("relative inline-block cursor-copy", containerClassName),
+      className: (0, import_clsx48.clsx)("relative inline-block cursor-copy", containerClassName),
       onMouseEnter: () => {
         setIsShowingIndication(true);
       },
@@ -13626,7 +13466,7 @@ var CopyToClipboardWrapper = ({
         /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
           "div",
           {
-            className: (0, import_clsx49.clsx)(
+            className: (0, import_clsx48.clsx)(
               `absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
            shadow-around-md bg-tooltip-background cursor-default pointer-events-none`,
               "transition-opacity duration-200",
@@ -13649,7 +13489,7 @@ var CopyToClipboardWrapper = ({
               /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx49.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: (0, import_clsx48.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -13662,7 +13502,7 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-var import_clsx50 = __toESM(require("clsx"));
+var import_clsx49 = __toESM(require("clsx"));
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var DateTimePicker = ({
   value = /* @__PURE__ */ new Date(),
@@ -13685,8 +13525,8 @@ var DateTimePicker = ({
       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,
@@ -13699,8 +13539,7 @@ var DateTimePicker = ({
       TimePicker,
       {
         ...timePickerProps,
-        className: (0, import_clsx50.default)("h-full", { "justify-between w-full": mode === "time" }),
-        maxHeight: 250,
+        className: (0, import_clsx49.default)("min-h-71 max-h-71", { "justify-between w-full": mode === "time" }),
         time: value,
         onChange
       }
@@ -13712,9 +13551,9 @@ var DateTimePicker = ({
       timeDisplay
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "flex-row-2 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex-row-2 mt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
       /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-        SolidButton,
+        Button,
         {
           size: "medium",
           onClick: () => onFinish?.(value),
@@ -13726,8 +13565,8 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-var import_react43 = require("react");
-var import_clsx51 = __toESM(require("clsx"));
+var import_react44 = require("react");
+var import_clsx50 = __toESM(require("clsx"));
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
@@ -13747,7 +13586,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react43.useState)({
+  }, setAnimation] = (0, import_react44.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -13763,7 +13602,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = (0, import_react43.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react44.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -13773,7 +13612,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react43.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react44.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -13846,7 +13685,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -13897,7 +13736,7 @@ var ScrollPicker = ({
             children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               "div",
               {
-                className: (0, import_clsx51.default)(
+                className: (0, import_clsx50.default)(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -13923,41 +13762,16 @@ var ScrollPicker = ({
   );
 };
 
-// src/components/user-action/SearchBar.tsx
-var import_lucide_react23 = require("lucide-react");
-var import_clsx52 = require("clsx");
-var import_jsx_runtime64 = require("react/jsx-runtime");
-var SearchBar = ({
-  placeholder,
-  onSearch,
-  disableOnSearch,
-  containerClassName,
-  ...inputProps
-}) => {
-  const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: (0, import_clsx52.clsx)("flex-row-2 justify-between items-center", containerClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-      Input,
-      {
-        ...inputProps,
-        placeholder: placeholder ?? translation("search")
-      }
-    ),
-    onSearch && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(IconButton, { color: "neutral", disabled: disableOnSearch, onClick: onSearch, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react23.Search, { className: "w-full h-full" }) })
-  ] });
-};
-
 // src/components/user-action/Tooltip.tsx
-var import_clsx53 = require("clsx");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_clsx51 = require("clsx");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var Tooltip = ({
   tooltip,
   children,
   animationDelay = 650,
   tooltipClassName = "",
   containerClassName = "",
-  position = "bottom",
-  zIndex = 10
+  position = "bottom"
 }) => {
   const { isHovered, handlers } = useHoverState();
   const positionClasses = {
@@ -13979,17 +13793,18 @@ var Tooltip = ({
     left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  const zIndex = useZIndexRegister(isHovered);
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
     "div",
     {
-      className: (0, import_clsx53.clsx)("relative inline-block", containerClassName),
+      className: (0, import_clsx51.clsx)("relative inline-block", containerClassName),
       ...handlers,
       children: [
         children,
-        isHovered && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+        isHovered && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
           "div",
           {
-            className: (0, import_clsx53.clsx)(
+            className: (0, import_clsx51.clsx)(
               `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
            animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,
               positionClasses[position],
@@ -13998,10 +13813,10 @@ var Tooltip = ({
             style: { zIndex, animationDelay: animationDelay + "ms" },
             children: [
               tooltip,
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx53.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: (0, import_clsx51.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -14014,26 +13829,26 @@ var Tooltip = ({
 };
 
 // src/components/user-action/input/InsideLabelInput.tsx
-var import_react44 = require("react");
 var import_react45 = require("react");
-var import_clsx54 = __toESM(require("clsx"));
-var import_jsx_runtime66 = require("react/jsx-runtime");
-var InsideLabelInput = (0, import_react45.forwardRef)(function InsideLabelInput2({
+var import_react46 = require("react");
+var import_clsx52 = __toESM(require("clsx"));
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var InsideLabelInput = (0, import_react46.forwardRef)(function InsideLabelInput2({
   id: customId,
   label,
   ...props
 }, forwardedRef) {
   const { value } = props;
-  const [isFocused, setIsFocused] = (0, import_react45.useState)(false);
-  const generatedId = (0, import_react44.useId)();
+  const [isFocused, setIsFocused] = (0, import_react46.useState)(false);
+  const generatedId = (0, import_react45.useId)();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: (0, import_clsx54.default)("relative"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: (0, import_clsx52.default)("relative"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       Input,
       {
         ...props,
         id,
-        className: (0, import_clsx54.default)("h-14 px-4 pb-2 py-6.5", props.className),
+        className: (0, import_clsx52.default)("h-14 px-4 pb-2 py-6.5", props.className),
         ref: forwardedRef,
         "aria-labelledby": id + "-label",
         onFocus: (event) => {
@@ -14046,13 +13861,13 @@ var InsideLabelInput = (0, import_react45.forwardRef)(function InsideLabelInput2
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: (0, import_clsx54.default)(
+        className: (0, import_clsx52.default)(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -14068,7 +13883,7 @@ var InsideLabelInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, props.onChangeText);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     InsideLabelInput,
     {
       ...props,
@@ -14078,26 +13893,62 @@ var InsideLabelInputUncontrolled = ({
   );
 };
 
+// src/components/user-action/input/SearchBar.tsx
+var import_lucide_react23 = require("lucide-react");
+var import_clsx53 = require("clsx");
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var SearchBar = ({
+  onSearch,
+  searchButtonProps,
+  containerProps,
+  ...inputProps
+}) => {
+  const translation = useHightideTranslation();
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ...containerProps, className: (0, import_clsx53.clsx)("relative", containerProps?.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      InputUncontrolled,
+      {
+        ...inputProps,
+        placeholder: inputProps.placeholder ?? translation("search"),
+        className: (0, import_clsx53.clsx)("pr-10 w-full", inputProps.className)
+      }
+    ),
+    onSearch && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      Button,
+      {
+        ...searchButtonProps,
+        size: "small",
+        layout: "icon",
+        color: "neutral",
+        coloringStyle: "text",
+        onClick: (event) => onSearch(event),
+        className: (0, import_clsx53.clsx)("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react23.Search, { className: "w-full h-full" })
+      }
+    )
+  ] });
+};
+
 // src/components/user-action/input/ToggleableInput.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_lucide_react24 = require("lucide-react");
-var import_clsx55 = __toESM(require("clsx"));
+var import_clsx54 = __toESM(require("clsx"));
 var import_jsx_runtime67 = require("react/jsx-runtime");
-var ToggleableInput = (0, import_react46.forwardRef)(function ToggleableInput2({
+var ToggleableInput = (0, import_react47.forwardRef)(function ToggleableInput2({
   value,
   initialState = "display",
   editCompleteOptions,
   ...props
 }, forwardedRef) {
-  const [isEditing, setIsEditing] = (0, import_react46.useState)(initialState !== "display");
-  const innerRef = (0, import_react46.useRef)(null);
-  (0, import_react46.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react46.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react47.useState)(initialState !== "display");
+  const innerRef = (0, import_react47.useRef)(null);
+  (0, import_react47.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react47.useEffect)(() => {
     if (isEditing) {
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: (0, import_clsx55.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: (0, import_clsx54.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       Input,
       {
@@ -14117,16 +13968,16 @@ var ToggleableInput = (0, import_react46.forwardRef)(function ToggleableInput2({
           ...editCompleteOptions,
           allowEnterComplete: true
         },
-        className: (0, import_clsx55.default)(`w-full ring-0 outline-0 decoration-primary underline-offset-4`, {
-          "underline": isEditing,
+        "data-name": props["data-name"] ?? "togglable-input",
+        "data-isEditing": isEditing ? "" : void 0,
+        className: (0, import_clsx54.default)(`w-full rounded-md`, {
           "text-transparent": !isEditing
-        }),
-        defaultStyle: false
+        })
       }
     ),
     !isEditing && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: (0, import_clsx55.default)(" truncate"), children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react24.Pencil, { className: (0, import_clsx55.default)(`size-force-4`, { "text-transparent": isEditing }) })
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: (0, import_clsx54.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react24.Pencil, { className: (0, import_clsx54.default)(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });
@@ -14147,33 +13998,33 @@ var ToggleableInputUncontrolled = ({
 };
 
 // src/components/utils/FocusTrap.tsx
-var import_react47 = require("react");
 var import_react48 = require("react");
 var import_react49 = require("react");
+var import_react50 = require("react");
 var import_jsx_runtime68 = require("react/jsx-runtime");
-var FocusTrap = (0, import_react49.forwardRef)(function FocusTrap2({
+var FocusTrap = (0, import_react50.forwardRef)(function FocusTrap2({
   active = true,
   initialFocus,
   focusFirst = false,
   ...props
 }, forwardedRef) {
-  const innerRef = (0, import_react47.useRef)(null);
-  (0, import_react48.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  const innerRef = (0, import_react48.useRef)(null);
+  (0, import_react49.useImperativeHandle)(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus, focusFirst });
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ref: innerRef, ...props });
 });
 
 // src/components/utils/Transition.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 function Transition({
   children,
   show,
   includeAnimation = true
 }) {
-  const [isOpen, setIsOpen] = (0, import_react50.useState)(show);
-  const [isTransitioning, setIsTransitioning] = (0, import_react50.useState)(!isOpen);
+  const [isOpen, setIsOpen] = (0, import_react51.useState)(show);
+  const [isTransitioning, setIsTransitioning] = (0, import_react51.useState)(!isOpen);
   const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     setIsOpen(show);
     setIsTransitioning(true);
   }, [show]);
@@ -14198,7 +14049,7 @@ function Transition({
 }
 
 // src/hooks/focus/useFocusGuards.ts
-var import_react51 = require("react");
+var import_react52 = require("react");
 var selectorName = "data-hw-focus-guard";
 function FocusGuard() {
   const element = document.createElement("div");
@@ -14236,7 +14087,7 @@ var FocusGuardsService = class _FocusGuardsService {
   }
 };
 var useFocusGuards = () => {
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     FocusGuardsService.getInstance().add();
     return () => {
       FocusGuardsService.getInstance().remove();
@@ -14245,10 +14096,10 @@ var useFocusGuards = () => {
 };
 
 // src/hooks/focus/useFocusOnceVisible.ts
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react52.default.useState(false);
-  (0, import_react52.useEffect)(() => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react53.default.useState(false);
+  (0, import_react53.useEffect)(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -14268,13 +14119,13 @@ var useFocusOnceVisible = (ref, disable = false) => {
 };
 
 // src/hooks/useRerender.ts
-var import_react53 = require("react");
+var import_react54 = require("react");
 var useRerender = () => {
-  return (0, import_react53.useReducer)(() => ({}), {})[1];
+  return (0, import_react54.useReducer)(() => ({}), {})[1];
 };
 
 // src/hooks/useSearch.ts
-var import_react54 = require("react");
+var import_react55 = require("react");
 
 // src/utils/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -14313,34 +14164,34 @@ var useSearch = ({
   filter,
   disabled = false
 }) => {
-  const [search, setSearch] = (0, import_react54.useState)(initialSearch ?? "");
-  const [result, setResult] = (0, import_react54.useState)(list);
-  const searchTags = (0, import_react54.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
-  const updateSearch = (0, import_react54.useCallback)((newSearch) => {
+  const [search, setSearch] = (0, import_react55.useState)(initialSearch ?? "");
+  const [result, setResult] = (0, import_react55.useState)(list);
+  const searchTags = (0, import_react55.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = (0, import_react55.useCallback)((newSearch) => {
     const usedSearch = newSearch ?? search;
     if (newSearch) {
       setSearch(search);
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
   }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = (0, import_react54.useMemo)(() => {
+  const filteredResult = (0, import_react55.useMemo)(() => {
     if (!filter) {
       return result;
     }
     return result.filter(filter);
   }, [result, filter]);
-  const sortedAndFilteredResult = (0, import_react54.useMemo)(() => {
+  const sortedAndFilteredResult = (0, import_react55.useMemo)(() => {
     if (!sortingFunction) {
       return filteredResult;
     }
     return filteredResult.sort(sortingFunction);
   }, [filteredResult, sortingFunction]);
-  const usedResult = (0, import_react54.useMemo)(() => {
+  const usedResult = (0, import_react55.useMemo)(() => {
     if (!disabled) {
       return sortedAndFilteredResult;
     }
@@ -14572,7 +14423,7 @@ var PromiseUtils = {
   AvatarUtil,
   BagFunctionUtil,
   BreadCrumb,
-  ButtonColorUtil,
+  Button,
   ButtonUtil,
   Carousel,
   CarouselSlide,
@@ -14606,8 +14457,6 @@ var PromiseUtils = {
   FormElementWrapper,
   HelpwaveBadge,
   HelpwaveLogo,
-  IconButton,
-  IconButtonUtil,
   Input,
   InputDialog,
   InputUncontrolled,
@@ -14643,7 +14492,6 @@ var PromiseUtils = {
   Navigation,
   NavigationItemList,
   NumberProperty,
-  OutlineButton,
   Pagination,
   ProgressIndicator,
   PromiseUtils,
@@ -14664,7 +14512,6 @@ var PromiseUtils = {
   SimpleSearch,
   SimpleSearchWithMapping,
   SingleSelectProperty,
-  SolidButton,
   StepperBar,
   StepperBarUncontrolled,
   Tab,
@@ -14677,7 +14524,6 @@ var PromiseUtils = {
   TableUncontrolled,
   TableWithSelection,
   TagIcon,
-  TextButton,
   TextImage,
   TextProperty,
   Textarea,
@@ -14709,7 +14555,6 @@ var PromiseUtils = {
   equalSizeGroups,
   formatDate,
   formatDateTime,
-  generateShadingColors,
   getBetweenDuration,
   getDaysInMonth,
   getNeighbours,
@@ -14722,7 +14567,6 @@ var PromiseUtils = {
   noop,
   range,
   resolveSetState,
-  shadingColorValues,
   subtractDuration,
   useDelay,
   useFloatingElement,
@@ -14747,6 +14591,7 @@ var PromiseUtils = {
   useTabContext,
   useTheme,
   useTranslatedValidators,
+  useZIndexRegister,
   validateEmail,
   weekDayList,
   writeToClipboard