@helpwave/hightide 0.1.3 → 0.1.4

package/dist/index.cjs

@@ -59,6 +59,7 @@ __export(index_exports, {
   EaseFunctions: () => EaseFunctions,
   ErrorComponent: () => ErrorComponent,
   Expandable: () => Expandable,
+  ExpandableUncontrolled: () => ExpandableUncontrolled,
   FAQSection: () => FAQSection,
   FormInput: () => FormInput,
   Helpwave: () => Helpwave,
@@ -107,6 +108,7 @@ __export(index_exports, {
   SolidButton: () => SolidButton,
   SortButton: () => SortButton,
   StepperBar: () => StepperBar,
+  StepperBarUncontrolled: () => StepperBarUncontrolled,
   Table: () => Table,
   TagIcon: () => TagIcon,
   TextButton: () => TextButton,
@@ -236,8 +238,8 @@ var Tile = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)("row gap-x-4 w-full items-center", className), children: [
     prefix,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "col w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_clsx.default)(title.className), children: title.value }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "col gap-y-0 w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: (0, import_clsx.default)(title.className ?? "textstyle-title-normal"), children: title.value }),
       !!description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_clsx.default)(description.className ?? "textstyle-description"), children: description.value })
     ] }),
     suffix
@@ -975,24 +977,24 @@ var import_lucide_react = require("lucide-react");
 var import_clsx5 = __toESM(require("clsx"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.ChevronDown, { size: 16, className: "min-w-[16px]" });
-var Expandable = (0, import_react3.forwardRef)(({
+var Expandable = (0, import_react3.forwardRef)(function Expandable2({
   children,
   label,
   icon,
-  initialExpansion = false,
+  isExpanded = false,
+  onChange = noop,
   clickOnlyOnHeader = true,
   disabled = false,
   className = "",
   headerClassName = ""
-}, ref) => {
-  const [isExpanded, setIsExpanded] = (0, import_react3.useState)(initialExpansion);
+}, ref) {
   icon ??= DefaultIcon;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       ref,
       className: (0, import_clsx5.default)("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__ */ (0, import_jsx_runtime6.jsxs)(
           "div",
@@ -1006,7 +1008,7 @@ var Expandable = (0, import_react3.forwardRef)(({
               },
               headerClassName
             ),
-            onClick: () => clickOnlyOnHeader && !disabled && setIsExpanded(!isExpanded),
+            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
             children: [
               label,
               icon(isExpanded)
@@ -1018,7 +1020,28 @@ var Expandable = (0, import_react3.forwardRef)(({
     }
   );
 });
-Expandable.displayName = "Expandable";
+var ExpandableUncontrolled = (0, import_react3.forwardRef)(function ExpandableUncontrolled2({
+  isExpanded,
+  onChange = noop,
+  ...props
+}, ref) {
+  const [usedIsExpanded, setUsedIsExpanded] = (0, import_react3.useState)(isExpanded);
+  (0, import_react3.useEffect)(() => {
+    setUsedIsExpanded(isExpanded);
+  }, [isExpanded]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Expandable,
+    {
+      ...props,
+      ref,
+      isExpanded: usedIsExpanded,
+      onChange: (value) => {
+        onChange(value);
+        setUsedIsExpanded(value);
+      }
+    }
+  );
+});
 
 // src/components/date/YearMonthPicker.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -1052,11 +1075,11 @@ var YearMonthPicker = ({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_clsx6.default)("col 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: "col gap-y-1 mr-3", children: years.map((year) => {
     const selectedYear = displayedYearMonth.getFullYear() === year;
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      Expandable,
+      ExpandableUncontrolled,
       {
         ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
         label: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: (0, import_clsx6.default)({ "text-primary font-bold": selectedYear }), children: year }),
-        initialExpansion: showValueOpen && selectedYear,
+        isExpanded: showValueOpen && selectedYear,
         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "row", children: monthList.map((month) => {
           const monthIndex = monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
@@ -3056,7 +3079,7 @@ var FAQSection = ({
 }) => {
   const chevronSize = 28;
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "col gap-y-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    Expandable,
+    ExpandableUncontrolled,
     {
       ...restProps,
       label: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { id, className: "textstyle-title-md", children: title }),
@@ -3347,6 +3370,7 @@ var SearchableList = ({
 // src/components/layout-and-navigation/StepperBar.tsx
 var import_lucide_react8 = require("lucide-react");
 var import_clsx25 = __toESM(require("clsx"), 1);
+var import_react15 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var defaultStepperBarTranslation = {
   en: {
@@ -3360,32 +3384,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__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
-      className: (0, import_clsx25.default)("sticky row p-2 border-2 justify-between rounded-lg shadow-lg", className),
+      className: (0, import_clsx25.default)("row justify-between", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "row flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           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: [
@@ -3403,39 +3434,40 @@ var StepperBar = ({
               className: (0, import_clsx25.default)(
                 "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__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        currentStep !== numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           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__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react8.ChevronRight, { size: 14 })
             ]
           }
         ) }),
-        step === lastStep && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        currentStep === numberOfSteps && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "row flex-[2] justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           SolidButton,
           {
-            disabled: false,
+            disabled: disabledSteps.has(currentStep),
             onClick: onFinish,
             className: "row gap-x-1 items-center justify-center",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react8.Check, { size: 14 }),
-              translation.confirm
+              finishText ?? translation.confirm
             ]
           }
         ) })
@@ -3443,13 +3475,30 @@ var StepperBar = ({
     }
   );
 };
+var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
+  const [usedState, setUsedState] = (0, import_react15.useState)(state ?? defaultState);
+  (0, import_react15.useEffect)(() => {
+    setUsedState(state ?? defaultState);
+  }, [state]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    StepperBar,
+    {
+      ...props,
+      state: usedState,
+      onChange: (newState) => {
+        setUsedState(newState);
+        onChange(newState);
+      }
+    }
+  );
+};
 
 // src/components/layout-and-navigation/Table.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_react_custom_scrollbars_23 = require("react-custom-scrollbars-2");
 
 // src/components/user-action/Checkbox.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
 var import_lucide_react9 = require("lucide-react");
 var import_clsx26 = __toESM(require("clsx"), 1);
@@ -3526,7 +3575,7 @@ var CheckboxUncontrolled = ({
   defaultValue = false,
   ...props
 }) => {
-  const [checked, setChecked] = (0, import_react15.useState)(defaultValue);
+  const [checked, setChecked] = (0, import_react16.useState)(defaultValue);
   const handleChange = (checked2) => {
     if (onChangeTristate) {
       onChangeTristate(checked2);
@@ -3701,8 +3750,8 @@ var Table = ({
   const headerPaddingHead = "pb-2";
   const headerPaddingBody = "pt-2";
   const cellPadding = "py-1 px-2";
-  const [scrollbarsAutoHeightMin, setScrollbarsAutoHeightMin] = (0, import_react16.useState)(0);
-  const tableRef = (0, import_react16.useRef)(null);
+  const [scrollbarsAutoHeightMin, setScrollbarsAutoHeightMin] = (0, import_react17.useState)(0);
+  const tableRef = (0, import_react17.useRef)(null);
   const calculateHeight = () => {
     if (tableRef.current) {
       const tableHeight = tableRef.current.offsetHeight;
@@ -3710,7 +3759,7 @@ var Table = ({
       setScrollbarsAutoHeightMin(tableHeight + offset);
     }
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     calculateHeight();
     const handleResize = () => {
       calculateHeight();
@@ -3916,7 +3965,7 @@ var ErrorComponent = ({
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/loading-states/LoadingAnimation.tsx
 var import_clsx30 = __toESM(require("clsx"), 1);
@@ -3951,8 +4000,8 @@ var LoadingAndErrorComponent = ({
   loadingProps,
   minimumLoadingDuration
 }) => {
-  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react17.useState)(false);
-  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react17.useState)(false);
+  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react18.useState)(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react18.useState)(false);
   if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
     setIsInMinimumLoading(true);
     setTimeout(() => {
@@ -4168,9 +4217,9 @@ var InputModal = ({
 };
 
 // src/components/user-action/Select.tsx
-var import_react18 = require("@headlessui/react");
+var import_react19 = require("@headlessui/react");
 var import_lucide_react12 = require("lucide-react");
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_clsx33 = __toESM(require("clsx"), 1);
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var Select = ({
@@ -4199,9 +4248,9 @@ var Select = ({
   const borderColor = "border-menu-border";
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: (0, import_clsx33.default)(className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { ...label, labelType: label.labelType ?? "labelBig", className: (0, import_clsx33.default)("mb-1", label.className) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react18.Menu, { as: "div", className: "relative text-menu-text", children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react19.Menu, { as: "div", className: "relative text-menu-text", children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-        import_react18.Menu.Button,
+        import_react19.Menu.Button,
         {
           className: (0, import_clsx33.default)(
             "inline-flex w-full justify-between items-center rounded-t-lg border-2 px-4 py-2 font-medium bg-menu-background text-menu-text",
@@ -4221,7 +4270,7 @@ var Select = ({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-        import_react18.Menu.Items,
+        import_react19.Menu.Items,
         {
           className: "absolute w-full z-10 rounded-b-lg bg-menu-background text-menu-text shadow-lg max-h-[500px] overflow-y-auto",
           children: [
@@ -4235,7 +4284,7 @@ var Select = ({
               },
               `additionalItems${index}`
             )),
-            filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react18.Menu.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react19.Menu.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               "div",
               {
                 className: (0, import_clsx33.default)(
@@ -4271,8 +4320,8 @@ var SelectUncontrolled = ({
   hintText,
   ...props
 }) => {
-  const [selected, setSelected] = (0, import_react19.useState)(value);
-  (0, import_react19.useEffect)(() => {
+  const [selected, setSelected] = (0, import_react20.useState)(value);
+  (0, import_react20.useEffect)(() => {
     if (options.find((options2) => options2.value === value)) {
       setSelected(value);
     }
@@ -4297,7 +4346,7 @@ var SearchableSelect = ({
   searchMapping,
   ...selectProps
 }) => {
-  const [search, setSearch] = (0, import_react19.useState)("");
+  const [search, setSearch] = (0, import_react20.useState)("");
   const filteredOptions = MultiSearchWithMapping(search, options, searchMapping);
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Select,
@@ -4364,7 +4413,7 @@ var LanguageModal = ({
 };
 
 // src/theming/useTheme.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var themes = ["light", "dark"];
 var defaultThemeTypeTranslation = {
@@ -4381,24 +4430,24 @@ var ThemeUtil = {
   themes,
   translation: defaultThemeTypeTranslation
 };
-var ThemeContext = (0, import_react20.createContext)({
+var ThemeContext = (0, import_react21.createContext)({
   theme: "light",
   setTheme: noop
 });
 var ThemeProvider = ({ children, initialTheme = "light" }) => {
-  const [theme, setTheme] = (0, import_react20.useState)(initialTheme);
-  (0, import_react20.useEffect)(() => {
+  const [theme, setTheme] = (0, import_react21.useState)(initialTheme);
+  (0, import_react21.useEffect)(() => {
     if (theme !== initialTheme) {
       console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
       setTheme(initialTheme);
     }
   }, [initialTheme]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     document.documentElement.setAttribute("data-theme", theme);
   }, [theme]);
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ThemeContext.Provider, { value: { theme, setTheme }, children });
 };
-var useTheme = () => (0, import_react20.useContext)(ThemeContext);
+var useTheme = () => (0, import_react21.useContext)(ThemeContext);
 
 // src/components/modals/ThemeModal.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
@@ -4612,18 +4661,18 @@ var import_lucide_react17 = require("lucide-react");
 var import_clsx38 = __toESM(require("clsx"), 1);
 
 // src/components/user-action/MultiSelect.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_lucide_react16 = require("lucide-react");
 var import_clsx37 = __toESM(require("clsx"), 1);
 
 // src/components/user-action/Menu.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_clsx36 = __toESM(require("clsx"), 1);
 
 // src/hooks/useOutsideClick.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 var useOutsideClick = (refs, handler) => {
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -4666,8 +4715,8 @@ var Menu2 = ({
   menuClassName = ""
 }) => {
   const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover });
-  const triggerRef = (0, import_react22.useRef)(null);
-  const menuRef = (0, import_react22.useRef)(null);
+  const triggerRef = (0, import_react23.useRef)(null);
+  const menuRef = (0, import_react23.useRef)(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
@@ -4723,7 +4772,7 @@ var MultiSelect = ({
   triggerClassName = ""
 }) => {
   const translation = useTranslation(defaultMultiSelectTranslation, overwriteTranslation);
-  const [searchText, setSearchText] = (0, import_react23.useState)(search?.initialSearch ?? "");
+  const [searchText, setSearchText] = (0, import_react24.useState)(search?.initialSearch ?? "");
   let filteredOptions = options;
   const enableSearch = !!search;
   if (enableSearch && !!searchText) {
@@ -5006,7 +5055,7 @@ var import_lucide_react20 = require("lucide-react");
 var import_clsx42 = __toESM(require("clsx"), 1);
 
 // src/components/user-action/Textarea.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_clsx41 = __toESM(require("clsx"), 1);
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var Textarea = ({
@@ -5023,7 +5072,7 @@ var Textarea = ({
   className,
   ...props
 }) => {
-  const [hasFocus, setHasFocus] = (0, import_react24.useState)(false);
+  const [hasFocus, setHasFocus] = (0, import_react25.useState)(false);
   const { restartTimer, clearUpdateTimer } = useSaveDelay(() => void 0, 3e3);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
@@ -5084,8 +5133,8 @@ var TextareaUncontrolled = ({
   onChangeText = noop,
   ...props
 }) => {
-  const [text, setText] = (0, import_react24.useState)(value);
-  (0, import_react24.useEffect)(() => {
+  const [text, setText] = (0, import_react25.useState)(value);
+  (0, import_react25.useEffect)(() => {
     setText(value);
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
@@ -5270,7 +5319,7 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_clsx44 = __toESM(require("clsx"), 1);
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var up = 1;
@@ -5291,7 +5340,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react25.useState)({
+  }, setAnimation] = (0, import_react26.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -5307,7 +5356,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = (0, import_react25.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react26.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -5317,7 +5366,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react25.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react26.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -5390,7 +5439,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -5467,7 +5516,7 @@ var ScrollPicker = ({
 };
 
 // src/components/user-action/ToggleableInput.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_lucide_react21 = require("lucide-react");
 var import_clsx45 = __toESM(require("clsx"), 1);
 var import_jsx_runtime58 = require("react/jsx-runtime");
@@ -5484,14 +5533,14 @@ var ToggleableInput = ({
   onBlur,
   ...restProps
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react26.useState)(initialState !== "display");
+  const [isEditing, setIsEditing] = (0, import_react27.useState)(initialState !== "display");
   const { restartTimer, clearUpdateTimer } = useSaveDelay(() => void 0, 3e3);
-  const ref = (0, import_react26.useRef)(null);
+  const ref = (0, import_react27.useRef)(null);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
     clearUpdateTimer();
   };
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (isEditing) {
       ref.current?.focus();
     }
@@ -5556,8 +5605,8 @@ var ToggleableInputUncontrolled = ({
   onChangeText = noop,
   ...restProps
 }) => {
-  const [value, setValue] = (0, import_react26.useState)(initialValue);
-  (0, import_react26.useEffect)(() => {
+  const [value, setValue] = (0, import_react27.useState)(initialValue);
+  (0, import_react27.useEffect)(() => {
     setValue(initialValue);
   }, [initialValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
@@ -5642,6 +5691,7 @@ var filterNews = (localizedNews, requiredKeys) => {
   EaseFunctions,
   ErrorComponent,
   Expandable,
+  ExpandableUncontrolled,
   FAQSection,
   FormInput,
   Helpwave,
@@ -5690,6 +5740,7 @@ var filterNews = (localizedNews, requiredKeys) => {
   SolidButton,
   SortButton,
   StepperBar,
+  StepperBarUncontrolled,
   Table,
   TagIcon,
   TextButton,