@helpwave/hightide 0.1.2 → 0.1.4

package/dist/index.js

@@ -56,8 +56,8 @@ var Tile = ({
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: clsx("row gap-x-4 w-full items-center", className), children: [
     prefix,
-    /* @__PURE__ */ jsxs("div", { className: "col w-full", children: [
-      /* @__PURE__ */ jsx("span", { className: clsx(title.className), children: title.value }),
+    /* @__PURE__ */ jsxs("div", { className: "col gap-y-0 w-full", children: [
+      /* @__PURE__ */ jsx("h4", { className: clsx(title.className ?? "textstyle-title-normal"), children: title.value }),
       !!description && /* @__PURE__ */ jsx("span", { className: clsx(description.className ?? "textstyle-description"), children: description.value })
     ] }),
     suffix
@@ -178,7 +178,7 @@ var HelpwaveBadge = ({
 };
 
 // src/components/date/DatePicker.tsx
-import { useEffect as useEffect5, useState as useState6 } from "react";
+import { useEffect as useEffect6, useState as useState6 } from "react";
 import { ArrowDown, ArrowUp, ChevronDown as ChevronDown2 } from "lucide-react";
 
 // src/localization/LanguageProvider.tsx
@@ -595,12 +595,12 @@ var SolidButton = ({
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
       className: clsx4(
-        className,
         {
-          "text-disabled-text bg-disabled-background": disabled,
+          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
           [clsx4(colorClasses, "hover:brightness-90")]: !disabled
         },
-        ButtonUtil.paddingMapping[size]
+        ButtonUtil.paddingMapping[size],
+        className
       ),
       ...restProps,
       children: [
@@ -652,12 +652,12 @@ var OutlineButton = ({
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
       className: clsx4(
-        className,
         {
-          "text-disabled-text border-disabled-outline": disabled,
+          "text-disabled-text border-disabled-outline cursor-not-allowed": disabled,
           [clsx4(colorClasses, "hover:brightness-80")]: !disabled
         },
-        ButtonUtil.paddingMapping[size]
+        ButtonUtil.paddingMapping[size],
+        className
       ),
       ...restProps,
       children: [
@@ -713,12 +713,12 @@ var TextButton = ({
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
       className: clsx4(
-        className,
         {
-          "text-disabled-text": disabled,
+          "text-disabled-text cursor-not-allowed": disabled,
           [clsx4(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
         },
-        ButtonUtil.paddingMapping[size]
+        ButtonUtil.paddingMapping[size],
+        className
       ),
       ...restProps,
       children: [
@@ -771,12 +771,12 @@ var IconButton = ({
       onClick: disabled ? void 0 : onClick,
       disabled: disabled || onClick === void 0,
       className: clsx4(
-        className,
         {
-          "text-disabled-text bg-disabled-background": disabled,
+          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
           [clsx4(colorClasses, "hover:brightness-90")]: !disabled
         },
-        ButtonUtil.iconPaddingMapping[size]
+        ButtonUtil.iconPaddingMapping[size],
+        className
       ),
       ...restProps,
       children
@@ -785,34 +785,34 @@ var IconButton = ({
 };
 
 // src/components/date/YearMonthPicker.tsx
-import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
+import { useEffect as useEffect4, useRef, useState as useState4 } from "react";
 import { Scrollbars } from "react-custom-scrollbars-2";
 import clsx6 from "clsx";
 
 // src/components/layout-and-navigation/Expandable.tsx
-import { forwardRef, useState as useState3 } from "react";
+import { forwardRef, useEffect as useEffect3, useState as useState3 } from "react";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import clsx5 from "clsx";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ jsx6(ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ jsx6(ChevronDown, { size: 16, className: "min-w-[16px]" });
-var Expandable = forwardRef(({
+var Expandable = forwardRef(function Expandable2({
   children,
   label,
   icon,
-  initialExpansion = false,
+  isExpanded = false,
+  onChange = noop,
   clickOnlyOnHeader = true,
   disabled = false,
   className = "",
   headerClassName = ""
-}, ref) => {
-  const [isExpanded, setIsExpanded] = useState3(initialExpansion);
+}, ref) {
   icon ??= DefaultIcon;
   return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref,
       className: clsx5("col gap-y-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
-      onClick: () => !clickOnlyOnHeader && !disabled && setIsExpanded(!isExpanded),
+      onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
       children: [
         /* @__PURE__ */ jsxs4(
           "div",
@@ -826,7 +826,7 @@ var Expandable = forwardRef(({
               },
               headerClassName
             ),
-            onClick: () => clickOnlyOnHeader && !disabled && setIsExpanded(!isExpanded),
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
             children: [
               label,
               icon(isExpanded)
@@ -838,7 +838,28 @@ var Expandable = forwardRef(({
     }
   );
 });
-Expandable.displayName = "Expandable";
+var ExpandableUncontrolled = forwardRef(function ExpandableUncontrolled2({
+  isExpanded,
+  onChange = noop,
+  ...props
+}, ref) {
+  const [usedIsExpanded, setUsedIsExpanded] = useState3(isExpanded);
+  useEffect3(() => {
+    setUsedIsExpanded(isExpanded);
+  }, [isExpanded]);
+  return /* @__PURE__ */ jsx6(
+    Expandable,
+    {
+      ...props,
+      ref,
+      isExpanded: usedIsExpanded,
+      onChange: (value) => {
+        onChange(value);
+        setUsedIsExpanded(value);
+      }
+    }
+  );
+});
 
 // src/components/date/YearMonthPicker.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
@@ -853,7 +874,7 @@ var YearMonthPicker = ({
 }) => {
   const locale = useLocale();
   const ref = useRef(null);
-  useEffect3(() => {
+  useEffect4(() => {
     const scrollToItem = () => {
       if (ref.current) {
         ref.current.scrollIntoView({
@@ -872,11 +893,11 @@ var YearMonthPicker = ({
   return /* @__PURE__ */ jsx7("div", { className: clsx6("col select-none", className), children: /* @__PURE__ */ jsx7(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: "100%" }, children: /* @__PURE__ */ jsx7("div", { className: "col gap-y-1 mr-3", children: years.map((year) => {
     const selectedYear = displayedYearMonth.getFullYear() === year;
     return /* @__PURE__ */ jsx7(
-      Expandable,
+      ExpandableUncontrolled,
       {
         ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
         label: /* @__PURE__ */ jsx7("span", { className: clsx6({ "text-primary font-bold": selectedYear }), children: year }),
-        initialExpansion: showValueOpen && selectedYear,
+        isExpanded: showValueOpen && selectedYear,
         children: /* @__PURE__ */ jsx7("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ jsx7("div", { className: "row", children: monthList.map((month) => {
           const monthIndex = monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
@@ -917,7 +938,7 @@ var YearMonthPickerUncontrolled = ({
   ...props
 }) => {
   const [yearMonth, setYearMonth] = useState4(displayedYearMonth);
-  useEffect3(() => setYearMonth(displayedYearMonth), [displayedYearMonth]);
+  useEffect4(() => setYearMonth(displayedYearMonth), [displayedYearMonth]);
   return /* @__PURE__ */ jsx7(
     YearMonthPicker,
     {
@@ -933,7 +954,7 @@ var YearMonthPickerUncontrolled = ({
 
 // src/components/date/DayPicker.tsx
 import clsx7 from "clsx";
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var DayPicker = ({
   displayedMonth,
@@ -980,7 +1001,7 @@ var DayPicker = ({
 };
 var DayPickerUncontrolled = ({ displayedMonth, onChange = noop, ...restProps }) => {
   const [date, setDate] = useState5(displayedMonth);
-  useEffect4(() => setDate(displayedMonth), [displayedMonth]);
+  useEffect5(() => setDate(displayedMonth), [displayedMonth]);
   return /* @__PURE__ */ jsx8(
     DayPicker,
     {
@@ -1019,7 +1040,7 @@ var DatePicker = ({
   const translation = useTranslation(defaultDatePickerTranslation, overwriteTranslation);
   const [displayedMonth, setDisplayedMonth] = useState6(value);
   const [displayMode, setDisplayMode] = useState6(initialDisplay);
-  useEffect5(() => {
+  useEffect6(() => {
     setDisplayedMonth(value);
   }, [value]);
   return /* @__PURE__ */ jsxs6("div", { className: clsx8("col gap-y-4", className), children: [
@@ -1110,7 +1131,7 @@ var DatePickerUncontrolled = ({
   ...props
 }) => {
   const [date, setDate] = useState6(value);
-  useEffect5(() => setDate(value), [value]);
+  useEffect6(() => setDate(value), [value]);
   return /* @__PURE__ */ jsx9(
     DatePicker,
     {
@@ -1207,7 +1228,7 @@ var TimeDisplay = ({
 };
 
 // src/components/date/TimePicker.tsx
-import { useEffect as useEffect6, useRef as useRef2, useState as useState7 } from "react";
+import { useEffect as useEffect7, useRef as useRef2, useState as useState7 } from "react";
 import { Scrollbars as Scrollbars2 } from "react-custom-scrollbars-2";
 import clsx9 from "clsx";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -1224,7 +1245,7 @@ var TimePicker = ({
   const isPM = time.getHours() >= 11;
   const hours = is24HourFormat ? range(0, 23) : range(1, 12);
   let minutes = range(0, 59);
-  useEffect6(() => {
+  useEffect7(() => {
     const scrollToItem = () => {
       if (minuteRef.current) {
         const container = minuteRef.current.parentElement;
@@ -1239,7 +1260,7 @@ var TimePicker = ({
     };
     scrollToItem();
   }, [minuteRef, minuteRef.current]);
-  useEffect6(() => {
+  useEffect7(() => {
     const scrollToItem = () => {
       if (hourRef.current) {
         const container = hourRef.current.parentElement;
@@ -1331,7 +1352,7 @@ var TimePickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useState7(time);
-  useEffect6(() => setValue(time), [time]);
+  useEffect7(() => setValue(time), [time]);
   return /* @__PURE__ */ jsx11(
     TimePicker,
     {
@@ -1349,12 +1370,12 @@ var TimePickerUncontrolled = ({
 import clsx12 from "clsx";
 
 // src/components/layout-and-navigation/Overlay.tsx
-import { useEffect as useEffect8, useRef as useRef3, useState as useState9 } from "react";
+import { useEffect as useEffect9, useRef as useRef3, useState as useState9 } from "react";
 import ReactDOM from "react-dom";
 import clsx11 from "clsx";
 
 // src/hooks/useHoverState.ts
-import { useEffect as useEffect7, useState as useState8 } from "react";
+import { useEffect as useEffect8, useState as useState8 } from "react";
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
@@ -1378,14 +1399,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  useEffect7(() => {
+  useEffect8(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -1473,7 +1494,7 @@ var Overlay = ({
   backgroundClassName
 }) => {
   const [root, setRoot] = useState9();
-  useEffect8(() => {
+  useEffect9(() => {
     setRoot(document.body);
   }, []);
   if (!root || !isOpen) return null;
@@ -1536,7 +1557,7 @@ var Modal = ({
   headerProps
 }) => {
   const ref = useRef3(null);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!isOpen) return;
     const modal = ref.current;
     if (!modal) {
@@ -1607,7 +1628,7 @@ var Dialog = ({
   headerProps
 }) => {
   const ref = useRef3(null);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!isOpen) return;
     const dialog = ref.current;
     if (!dialog) {
@@ -1825,7 +1846,7 @@ var Circle = ({
 };
 
 // src/components/icons-and-geometry/Ring.tsx
-import { useCallback as useCallback2, useEffect as useEffect9, useState as useState10 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect10, useState as useState10 } from "react";
 import clsx15 from "clsx";
 import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var Ring = ({
@@ -1870,7 +1891,7 @@ var AnimatedRing = ({
       }
     }
   }, [milliseconds, onAnimationFinished, repeating, width]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (currentWidth < width) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -1925,7 +1946,7 @@ var RingWave = ({
       }
     }
   }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (currentInnerSize < endInnerSize) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -2116,7 +2137,7 @@ import clsx16 from "clsx";
 import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
   const color = "text-description";
-  return /* @__PURE__ */ jsx19("div", { className: clsx16("row", containerClassName), children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs13("div", { children: [
+  return /* @__PURE__ */ jsx19("div", { className: clsx16("row gap-x-0", containerClassName), children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs13("div", { children: [
     /* @__PURE__ */ jsx19(
       Link,
       {
@@ -2130,7 +2151,7 @@ var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
 };
 
 // src/components/layout-and-navigation/Carousel.tsx
-import { useCallback as useCallback3, useEffect as useEffect10, useMemo, useRef as useRef4, useState as useState11 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect11, useMemo, useRef as useRef4, useState as useState11 } from "react";
 import clsx17 from "clsx";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
@@ -2323,7 +2344,7 @@ var Carousel = ({
       animationId.current = requestAnimationFrame((time1) => animation(time1));
     }
   }, [animationTime, autoLoopAnimationTime, util]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (animationState) {
       animationId.current = requestAnimationFrame(animation);
     }
@@ -2345,7 +2366,7 @@ var Carousel = ({
       isAutoLooping: true
     }
   }));
-  useEffect10(() => {
+  useEffect11(() => {
     if (!animationId.current && !animationState && !dragState && !timeOut.current) {
       if (autoLoopingTimeOut > 0) {
         timeOut.current = setTimeout(() => {
@@ -2876,7 +2897,7 @@ var FAQSection = ({
 }) => {
   const chevronSize = 28;
   return /* @__PURE__ */ jsx24("div", { className: "col gap-y-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ jsx24(
-    Expandable,
+    ExpandableUncontrolled,
     {
       ...restProps,
       label: /* @__PURE__ */ jsx24("h3", { id, className: "textstyle-title-md", children: title }),
@@ -2928,7 +2949,7 @@ var Pagination = ({
 };
 
 // src/components/layout-and-navigation/SearchableList.tsx
-import { useEffect as useEffect13, useMemo as useMemo2, useState as useState14 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo2, useState as useState14 } from "react";
 import { Search } from "lucide-react";
 import clsx24 from "clsx";
 
@@ -2953,11 +2974,11 @@ var SimpleSearch = (search, objects) => {
 };
 
 // src/components/user-action/Input.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect12, useRef as useRef5, useState as useState13 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect13, useRef as useRef5, useState as useState13 } from "react";
 import clsx23 from "clsx";
 
 // src/hooks/useSaveDelay.ts
-import { useEffect as useEffect11, useState as useState12 } from "react";
+import { useEffect as useEffect12, useState as useState12 } from "react";
 function useSaveDelay(setNotificationStatus, delay) {
   const [updateTimer, setUpdateTimer] = useState12(void 0);
   const [notificationTimer, setNotificationTimer] = useState12(void 0);
@@ -2987,7 +3008,7 @@ function useSaveDelay(setNotificationStatus, delay) {
       setNotificationStatus(false);
     }
   };
-  useEffect11(() => {
+  useEffect12(() => {
     return () => {
       clearTimeout(updateTimer);
       clearTimeout(notificationTimer);
@@ -3036,7 +3057,7 @@ var Input = ({
     clearUpdateTimer
   } = useSaveDelay(() => void 0, 3e3);
   const ref = useRef5(null);
-  useEffect12(() => {
+  useEffect13(() => {
     if (autoFocus) {
       ref.current?.focus();
     }
@@ -3152,7 +3173,7 @@ var SearchableList = ({
 }) => {
   const translation = useTranslation(defaultSearchableListTranslation, overwriteTranslation);
   const [search, setSearch] = useState14(initialSearch);
-  useEffect13(() => setSearch(initialSearch), [initialSearch]);
+  useEffect14(() => setSearch(initialSearch), [initialSearch]);
   const filteredEntries = useMemo2(() => MultiSearchWithMapping(search, list, searchMapping), [search, list, searchMapping]);
   return /* @__PURE__ */ jsxs18("div", { className: clsx24("col gap-y-2", className), children: [
     /* @__PURE__ */ jsxs18("div", { className: "row justify-between gap-x-2 items-center", children: [
@@ -3167,6 +3188,7 @@ var SearchableList = ({
 // src/components/layout-and-navigation/StepperBar.tsx
 import { Check, ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "lucide-react";
 import clsx25 from "clsx";
+import { useEffect as useEffect15, useState as useState15 } from "react";
 import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var defaultStepperBarTranslation = {
   en: {
@@ -3180,32 +3202,39 @@ var defaultStepperBarTranslation = {
     confirm: "Erstellen"
   }
 };
+var defaultState = {
+  currentStep: 0,
+  seenSteps: /* @__PURE__ */ new Set([0])
+};
 var StepperBar = ({
   overwriteTranslation,
-  stepper,
+  state,
+  numberOfSteps,
+  disabledSteps = /* @__PURE__ */ new Set(),
   onChange,
   onFinish,
+  finishText,
   showDots = true,
   className = ""
 }) => {
   const translation = useTranslation(defaultStepperBarTranslation, overwriteTranslation);
-  const dots = range(0, stepper.lastStep);
-  const { step, seenSteps, lastStep } = stepper;
+  const dots = range(0, numberOfSteps);
+  const { currentStep, seenSteps } = state ?? defaultState;
   const update = (newStep) => {
     seenSteps.add(newStep);
-    onChange({ step: newStep, seenSteps, lastStep });
+    onChange({ currentStep: newStep, seenSteps });
   };
   return /* @__PURE__ */ jsxs19(
     "div",
     {
-      className: clsx25("sticky row p-2 border-2 justify-between rounded-lg shadow-lg", className),
+      className: clsx25("row justify-between", className),
       children: [
-        /* @__PURE__ */ jsx29("div", { className: "flex-[2] justify-start", children: /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsx29("div", { className: "row flex-[2] justify-start", children: /* @__PURE__ */ jsxs19(
           SolidButton,
           {
-            disabled: step === 0,
+            disabled: currentStep === 0 || disabledSteps.has(currentStep),
             onClick: () => {
-              update(step - 1);
+              update(currentStep - 1);
             },
             className: "row gap-x-1 items-center justify-center",
             children: [
@@ -3223,39 +3252,40 @@ var StepperBar = ({
               className: clsx25(
                 "rounded-full w-4 h-4",
                 {
-                  "bg-primary hover:brightness-75": index === step && seen,
-                  "bg-primary/40 hover:bg-primary": index !== step && seen,
-                  "bg-gray-200 outline-transparent": !seen
+                  "bg-primary hover:brightness-75": index === currentStep && seen && !disabledSteps.has(currentStep),
+                  "bg-primary/40 hover:bg-primary": index !== currentStep && seen && !disabledSteps.has(currentStep),
+                  "bg-gray-200 outline-transparent": !seen || disabledSteps.has(currentStep)
                 },
                 {
                   "cursor-pointer": seen,
-                  "cursor-not-allowed": !seen
+                  "cursor-not-allowed": !seen || disabledSteps.has(currentStep)
                 }
               )
             },
             index
           );
         }) }),
-        step !== lastStep && /* @__PURE__ */ jsx29("div", { className: "flex-[2] justify-end", children: /* @__PURE__ */ jsxs19(
+        currentStep !== numberOfSteps && /* @__PURE__ */ jsx29("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ jsxs19(
           SolidButton,
           {
-            onClick: () => update(step + 1),
+            onClick: () => update(currentStep + 1),
             className: "row gap-x-1 items-center justify-center",
+            disabled: disabledSteps.has(currentStep),
             children: [
               translation.next,
               /* @__PURE__ */ jsx29(ChevronRight3, { size: 14 })
             ]
           }
         ) }),
-        step === lastStep && /* @__PURE__ */ jsx29("div", { className: "flex-[2] justify-end", children: /* @__PURE__ */ jsxs19(
+        currentStep === numberOfSteps && /* @__PURE__ */ jsx29("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ jsxs19(
           SolidButton,
           {
-            disabled: false,
+            disabled: disabledSteps.has(currentStep),
             onClick: onFinish,
             className: "row gap-x-1 items-center justify-center",
             children: [
               /* @__PURE__ */ jsx29(Check, { size: 14 }),
-              translation.confirm
+              finishText ?? translation.confirm
             ]
           }
         ) })
@@ -3263,13 +3293,30 @@ var StepperBar = ({
     }
   );
 };
+var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
+  const [usedState, setUsedState] = useState15(state ?? defaultState);
+  useEffect15(() => {
+    setUsedState(state ?? defaultState);
+  }, [state]);
+  return /* @__PURE__ */ jsx29(
+    StepperBar,
+    {
+      ...props,
+      state: usedState,
+      onChange: (newState) => {
+        setUsedState(newState);
+        onChange(newState);
+      }
+    }
+  );
+};
 
 // src/components/layout-and-navigation/Table.tsx
-import { useEffect as useEffect14, useRef as useRef6, useState as useState16 } from "react";
+import { useEffect as useEffect16, useRef as useRef6, useState as useState17 } from "react";
 import { Scrollbars as Scrollbars3 } from "react-custom-scrollbars-2";
 
 // src/components/user-action/Checkbox.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check as Check2, Minus } from "lucide-react";
 import clsx26 from "clsx";
@@ -3346,7 +3393,7 @@ var CheckboxUncontrolled = ({
   defaultValue = false,
   ...props
 }) => {
-  const [checked, setChecked] = useState15(defaultValue);
+  const [checked, setChecked] = useState16(defaultValue);
   const handleChange = (checked2) => {
     if (onChangeTristate) {
       onChangeTristate(checked2);
@@ -3521,7 +3568,7 @@ var Table = ({
   const headerPaddingHead = "pb-2";
   const headerPaddingBody = "pt-2";
   const cellPadding = "py-1 px-2";
-  const [scrollbarsAutoHeightMin, setScrollbarsAutoHeightMin] = useState16(0);
+  const [scrollbarsAutoHeightMin, setScrollbarsAutoHeightMin] = useState17(0);
   const tableRef = useRef6(null);
   const calculateHeight = () => {
     if (tableRef.current) {
@@ -3530,7 +3577,7 @@ var Table = ({
       setScrollbarsAutoHeightMin(tableHeight + offset);
     }
   };
-  useEffect14(() => {
+  useEffect16(() => {
     calculateHeight();
     const handleResize = () => {
       calculateHeight();
@@ -3736,7 +3783,7 @@ var ErrorComponent = ({
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-import { useState as useState17 } from "react";
+import { useState as useState18 } from "react";
 
 // src/components/loading-states/LoadingAnimation.tsx
 import clsx30 from "clsx";
@@ -3771,8 +3818,8 @@ var LoadingAndErrorComponent = ({
   loadingProps,
   minimumLoadingDuration
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = useState17(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState17(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = useState18(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState18(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -3978,7 +4025,7 @@ var InputModal = ({
   ...restProps
 }) => {
   return /* @__PURE__ */ jsx41(
-    ConfirmDialog,
+    ConfirmModal,
     {
       buttonOverwrites,
       ...restProps,
@@ -3990,7 +4037,7 @@ var InputModal = ({
 // src/components/user-action/Select.tsx
 import { Menu } from "@headlessui/react";
 import { ChevronDown as ChevronDown5, ChevronUp as ChevronUp4, Search as Search2 } from "lucide-react";
-import { useEffect as useEffect15, useState as useState18 } from "react";
+import { useEffect as useEffect17, useState as useState19 } from "react";
 import clsx33 from "clsx";
 import { Fragment as Fragment3, jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
 var Select = ({
@@ -4091,8 +4138,8 @@ var SelectUncontrolled = ({
   hintText,
   ...props
 }) => {
-  const [selected, setSelected] = useState18(value);
-  useEffect15(() => {
+  const [selected, setSelected] = useState19(value);
+  useEffect17(() => {
     if (options.find((options2) => options2.value === value)) {
       setSelected(value);
     }
@@ -4117,7 +4164,7 @@ var SearchableSelect = ({
   searchMapping,
   ...selectProps
 }) => {
-  const [search, setSearch] = useState18("");
+  const [search, setSearch] = useState19("");
   const filteredOptions = MultiSearchWithMapping(search, options, searchMapping);
   return /* @__PURE__ */ jsx42(
     Select,
@@ -4184,7 +4231,7 @@ var LanguageModal = ({
 };
 
 // src/theming/useTheme.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect16, useState as useState19 } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect18, useState as useState20 } from "react";
 import { jsx as jsx44 } from "react/jsx-runtime";
 var themes = ["light", "dark"];
 var defaultThemeTypeTranslation = {
@@ -4206,14 +4253,14 @@ var ThemeContext = createContext2({
   setTheme: noop
 });
 var ThemeProvider = ({ children, initialTheme = "light" }) => {
-  const [theme, setTheme] = useState19(initialTheme);
-  useEffect16(() => {
+  const [theme, setTheme] = useState20(initialTheme);
+  useEffect18(() => {
     if (theme !== initialTheme) {
       console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
       setTheme(initialTheme);
     }
   }, [initialTheme]);
-  useEffect16(() => {
+  useEffect18(() => {
     document.documentElement.setAttribute("data-theme", theme);
   }, [theme]);
   return /* @__PURE__ */ jsx44(ThemeContext.Provider, { value: { theme, setTheme }, children });
@@ -4432,7 +4479,7 @@ import { List } from "lucide-react";
 import clsx38 from "clsx";
 
 // src/components/user-action/MultiSelect.tsx
-import { useState as useState20 } from "react";
+import { useState as useState21 } from "react";
 import { Search as Search3 } from "lucide-react";
 import clsx37 from "clsx";
 
@@ -4441,9 +4488,9 @@ import { useRef as useRef7 } from "react";
 import clsx36 from "clsx";
 
 // src/hooks/useOutsideClick.ts
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect19 } from "react";
 var useOutsideClick = (refs, handler) => {
-  useEffect17(() => {
+  useEffect19(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -4543,7 +4590,7 @@ var MultiSelect = ({
   triggerClassName = ""
 }) => {
   const translation = useTranslation(defaultMultiSelectTranslation, overwriteTranslation);
-  const [searchText, setSearchText] = useState20(search?.initialSearch ?? "");
+  const [searchText, setSearchText] = useState21(search?.initialSearch ?? "");
   let filteredOptions = options;
   const enableSearch = !!search;
   if (enableSearch && !!searchText) {
@@ -4826,7 +4873,7 @@ import { Text } from "lucide-react";
 import clsx42 from "clsx";
 
 // src/components/user-action/Textarea.tsx
-import { useEffect as useEffect18, useState as useState21 } from "react";
+import { useEffect as useEffect20, useState as useState22 } from "react";
 import clsx41 from "clsx";
 import { jsx as jsx54, jsxs as jsxs36 } from "react/jsx-runtime";
 var Textarea = ({
@@ -4843,7 +4890,7 @@ var Textarea = ({
   className,
   ...props
 }) => {
-  const [hasFocus, setHasFocus] = useState21(false);
+  const [hasFocus, setHasFocus] = useState22(false);
   const { restartTimer, clearUpdateTimer } = useSaveDelay(() => void 0, 3e3);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
@@ -4904,8 +4951,8 @@ var TextareaUncontrolled = ({
   onChangeText = noop,
   ...props
 }) => {
-  const [text, setText] = useState21(value);
-  useEffect18(() => {
+  const [text, setText] = useState22(value);
+  useEffect20(() => {
     setText(value);
   }, [value]);
   return /* @__PURE__ */ jsx54(
@@ -5090,7 +5137,7 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-import { useCallback as useCallback4, useEffect as useEffect19, useState as useState22 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect21, useState as useState23 } from "react";
 import clsx44 from "clsx";
 import { jsx as jsx57, jsxs as jsxs38 } from "react/jsx-runtime";
 var up = 1;
@@ -5111,7 +5158,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState22({
+  }, setAnimation] = useState23({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -5210,7 +5257,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect19(() => {
+  useEffect21(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -5287,7 +5334,7 @@ var ScrollPicker = ({
 };
 
 // src/components/user-action/ToggleableInput.tsx
-import { useEffect as useEffect20, useRef as useRef8, useState as useState23 } from "react";
+import { useEffect as useEffect22, useRef as useRef8, useState as useState24 } from "react";
 import { Pencil } from "lucide-react";
 import clsx45 from "clsx";
 import { jsx as jsx58, jsxs as jsxs39 } from "react/jsx-runtime";
@@ -5304,14 +5351,14 @@ var ToggleableInput = ({
   onBlur,
   ...restProps
 }) => {
-  const [isEditing, setIsEditing] = useState23(initialState !== "display");
+  const [isEditing, setIsEditing] = useState24(initialState !== "display");
   const { restartTimer, clearUpdateTimer } = useSaveDelay(() => void 0, 3e3);
   const ref = useRef8(null);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
     clearUpdateTimer();
   };
-  useEffect20(() => {
+  useEffect22(() => {
     if (isEditing) {
       ref.current?.focus();
     }
@@ -5376,8 +5423,8 @@ var ToggleableInputUncontrolled = ({
   onChangeText = noop,
   ...restProps
 }) => {
-  const [value, setValue] = useState23(initialValue);
-  useEffect20(() => {
+  const [value, setValue] = useState24(initialValue);
+  useEffect22(() => {
     setValue(initialValue);
   }, [initialValue]);
   return /* @__PURE__ */ jsx58(
@@ -5461,6 +5508,7 @@ export {
   EaseFunctions,
   ErrorComponent,
   Expandable,
+  ExpandableUncontrolled,
   FAQSection,
   FormInput,
   Helpwave,
@@ -5509,6 +5557,7 @@ export {
   SolidButton,
   SortButton,
   StepperBar,
+  StepperBarUncontrolled,
   Table,
   TagIcon,
   TextButton,