@helpwave/hightide 0.1.23 → 0.1.25

package/dist/index.mjs

@@ -5805,14 +5805,14 @@ var HelpwaveBadge = ({
 };
 
 // src/components/date/DatePicker.tsx
-import { useEffect as useEffect6, useState as useState6 } from "react";
+import { useEffect as useEffect5, useState as useState6 } from "react";
 import { ArrowDown, ArrowUp, ChevronDown as ChevronDown2 } from "lucide-react";
 
 // src/localization/LanguageProvider.tsx
-import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
+import { createContext, useContext, useEffect, useState as useState2 } from "react";
 
 // src/hooks/useLocalStorage.ts
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 
 // src/util/storage.ts
 var StorageService = class {
@@ -5870,9 +5870,6 @@ var useLocalStorage = (key, initValue) => {
     storageService.set(key, newValue);
     setStoredValue(newValue);
   }, [storedValue, setStoredValue, key]);
-  useEffect(() => {
-    setStoredValue(get());
-  }, []);
   return [storedValue, setValue];
 };
 
@@ -5907,17 +5904,17 @@ var useLocale = (overWriteLanguage) => {
 var LanguageProvider = ({ initialLanguage, children }) => {
   const [language, setLanguage] = useState2(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE);
   const [storedLanguage, setStoredLanguage] = useLocalStorage("language", initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE);
-  useEffect2(() => {
+  useEffect(() => {
     if (language !== initialLanguage && initialLanguage) {
       console.warn("LanguageProvider initial state changed: Prefer using languageProvider's setLanguage instead");
       setLanguage(initialLanguage);
     }
   }, [initialLanguage]);
-  useEffect2(() => {
+  useEffect(() => {
     document.documentElement.setAttribute("lang", language);
     setStoredLanguage(language);
   }, [language]);
-  useEffect2(() => {
+  useEffect(() => {
     if (storedLanguage !== null) {
       setLanguage(storedLanguage);
       return;
@@ -6269,7 +6266,6 @@ var ButtonUtil = {
 };
 var SolidButton = forwardRef(function SolidButton2({
   children,
-  disabled = false,
   color = "primary",
   size = "medium",
   startIcon,
@@ -6279,35 +6275,33 @@ var SolidButton = forwardRef(function SolidButton2({
   ...restProps
 }, ref) {
   const colorClasses = {
-    primary: "bg-button-solid-primary-background text-button-solid-primary-text",
-    secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
-    tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
-    positive: "bg-button-solid-positive-background text-button-solid-positive-text",
-    warning: "bg-button-solid-warning-background text-button-solid-warning-text",
-    negative: "bg-button-solid-negative-background text-button-solid-negative-text",
-    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text"
+    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: "text-button-solid-primary-icon",
-    secondary: "text-button-solid-secondary-icon",
-    tertiary: "text-button-solid-tertiary-icon",
-    positive: "text-button-solid-positive-icon",
-    warning: "text-button-solid-warning-icon",
-    negative: "text-button-solid-negative-icon",
-    neutral: "text-button-solid-neutral-icon"
+    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__ */ jsxs3(
     "button",
     {
       ref,
       onClick,
-      disabled,
       className: clsx4(
-        "font-semibold",
-        {
-          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
-          [clsx4(colorClasses, "hover:brightness-90")]: !disabled
-        },
+        "group font-semibold",
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text disabled:bg-disabled-background",
         ButtonUtil.paddingMapping[size],
         className
       ),
@@ -6316,10 +6310,10 @@ var SolidButton = forwardRef(function SolidButton2({
         startIcon && /* @__PURE__ */ jsx5(
           "span",
           {
-            className: clsx4({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: clsx4(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: startIcon
           }
         ),
@@ -6327,10 +6321,10 @@ var SolidButton = forwardRef(function SolidButton2({
         endIcon && /* @__PURE__ */ jsx5(
           "span",
           {
-            className: clsx4({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: clsx4(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: endIcon
           }
         )
@@ -6340,7 +6334,6 @@ var SolidButton = forwardRef(function SolidButton2({
 });
 var OutlineButton = ({
   children,
-  disabled = false,
   color = "primary",
   size = "medium",
   startIcon,
@@ -6350,22 +6343,20 @@ var OutlineButton = ({
   ...restProps
 }) => {
   const colorClasses = {
-    primary: "bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text"
+    primary: "not-disabled:border-button-outline-primary-text not-disabled:text-button-outline-primary-text"
   }[color];
   const iconColorClasses = {
-    primary: "text-button-outline-primary-icon"
+    primary: "not-group-disabled:text-button-outline-primary-icon"
   }[color];
   return /* @__PURE__ */ jsxs3(
     "button",
     {
       onClick,
-      disabled,
       className: clsx4(
-        "font-semibold",
-        {
-          "text-disabled-text border-disabled-outline cursor-not-allowed": disabled,
-          [clsx4(colorClasses, "hover:brightness-80")]: !disabled
-        },
+        "group font-semibold bg-transparent border-2 ",
+        "not-disabled:hover:brightness-80",
+        colorClasses,
+        "disabled:text-disabled-text disabled:border-disabled-outline",
         ButtonUtil.paddingMapping[size],
         className
       ),
@@ -6374,10 +6365,10 @@ var OutlineButton = ({
         startIcon && /* @__PURE__ */ jsx5(
           "span",
           {
-            className: clsx4({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: clsx4(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: startIcon
           }
         ),
@@ -6385,10 +6376,10 @@ var OutlineButton = ({
         endIcon && /* @__PURE__ */ jsx5(
           "span",
           {
-            className: clsx4({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: clsx4(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: endIcon
           }
         )
@@ -6398,7 +6389,6 @@ var OutlineButton = ({
 };
 var TextButton = ({
   children,
-  disabled = false,
   color = "neutral",
   size = "medium",
   startIcon,
@@ -6409,32 +6399,31 @@ var TextButton = ({
   ...restProps
 }) => {
   const colorClasses = {
-    primary: "bg-transparent text-button-text-primary-text",
-    negative: "bg-transparent text-button-text-negative-text",
-    neutral: "bg-transparent text-button-text-neutral-text"
+    primary: "not-disabled:bg-transparent not-disabled:text-button-text-primary-text",
+    negative: "not-disabled:bg-transparent not-disabled:text-button-text-negative-text",
+    neutral: "not-disabled:bg-transparent not-disabled:text-button-text-neutral-text"
   }[color];
   const backgroundColor = {
-    primary: "hover:bg-button-text-primary-text/20",
-    negative: "hover:bg-button-text-negative-text/20",
-    neutral: "hover:bg-button-text-neutral-text/20"
+    primary: "not-disabled:hover:bg-button-text-primary-text/20",
+    negative: "not-disabled:hover:bg-button-text-negative-text/20",
+    neutral: "not-disabled:hover:bg-button-text-neutral-text/20"
   }[color];
   const iconColorClasses = {
-    primary: "text-button-text-primary-icon",
-    negative: "text-button-text-negative-icon",
-    neutral: "text-button-text-neutral-icon"
+    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__ */ jsxs3(
     "button",
     {
       onClick,
-      disabled,
       className: clsx4(
-        "font-semibold",
+        "group font-semibold",
+        "disabled:text-disabled-text",
+        colorClasses,
         {
-          "text-disabled-text cursor-not-allowed": disabled,
-          [colorClasses]: !disabled,
-          [backgroundColor]: !disabled && coloredHoverBackground,
-          "hover:bg-button-text-hover-background": !disabled && !coloredHoverBackground
+          [backgroundColor]: coloredHoverBackground,
+          "not-disabled:hover:bg-button-text-hover-background": !coloredHoverBackground
         },
         ButtonUtil.paddingMapping[size],
         className
@@ -6444,10 +6433,10 @@ var TextButton = ({
         startIcon && /* @__PURE__ */ jsx5(
           "span",
           {
-            className: clsx4({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: clsx4(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: startIcon
           }
         ),
@@ -6455,10 +6444,10 @@ var TextButton = ({
         endIcon && /* @__PURE__ */ jsx5(
           "span",
           {
-            className: clsx4({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: clsx4(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: endIcon
           }
         )
@@ -6468,32 +6457,32 @@ var TextButton = ({
 };
 var IconButton = ({
   children,
-  disabled = false,
   color = "primary",
   size = "medium",
   className,
   ...restProps
 }) => {
   const colorClasses = {
-    primary: "bg-button-solid-primary-background text-button-solid-primary-text",
-    secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
-    tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
-    positive: "bg-button-solid-positive-background text-button-solid-positive-text",
-    warning: "bg-button-solid-warning-background text-button-solid-warning-text",
-    negative: "bg-button-solid-negative-background text-button-solid-negative-text",
-    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text",
-    transparent: "bg-transparent"
+    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__ */ jsx5(
     "button",
     {
-      disabled,
       className: clsx4(
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text",
         {
-          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled && color !== "transparent",
-          "text-disabled-text cursor-not-allowed opacity-70": disabled && color === "transparent",
-          "hover:bg-button-text-hover-background": !disabled && color === "transparent",
-          [clsx4(colorClasses, "hover:brightness-90")]: !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
@@ -6505,12 +6494,12 @@ var IconButton = ({
 };
 
 // src/components/date/YearMonthPicker.tsx
-import { useEffect as useEffect4, useRef, useState as useState4 } from "react";
+import { useEffect as useEffect3, 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 as forwardRef2, useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
+import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect2, useState as useState3 } from "react";
 import { ChevronDown } from "lucide-react";
 import clsx5 from "clsx";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -6591,7 +6580,7 @@ var ExpandableUncontrolled = forwardRef2(function ExpandableUncontrolled2({
   ...props
 }, ref) {
   const [usedIsExpanded, setUsedIsExpanded] = useState3(isExpanded);
-  useEffect3(() => {
+  useEffect2(() => {
     setUsedIsExpanded(isExpanded);
   }, [isExpanded]);
   return /* @__PURE__ */ jsx6(
@@ -6621,7 +6610,7 @@ var YearMonthPicker = ({
 }) => {
   const locale = useLocale();
   const ref = useRef(null);
-  useEffect4(() => {
+  useEffect3(() => {
     const scrollToItem = () => {
       if (ref.current) {
         ref.current.scrollIntoView({
@@ -6681,7 +6670,7 @@ var YearMonthPickerUncontrolled = ({
   ...props
 }) => {
   const [yearMonth, setYearMonth] = useState4(displayedYearMonth ?? /* @__PURE__ */ new Date());
-  useEffect4(() => setYearMonth(displayedYearMonth), [displayedYearMonth]);
+  useEffect3(() => setYearMonth(displayedYearMonth), [displayedYearMonth]);
   return /* @__PURE__ */ jsx7(
     YearMonthPicker,
     {
@@ -6697,7 +6686,7 @@ var YearMonthPickerUncontrolled = ({
 
 // src/components/date/DayPicker.tsx
 import clsx7 from "clsx";
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var DayPicker = ({
   displayedMonth,
@@ -6751,7 +6740,7 @@ var DayPickerUncontrolled = ({
 }) => {
   const [date, setDate] = useState5(selected);
   const [usedDisplayedMonth, setUsedDDisplayedMonth] = useState5(displayedMonth);
-  useEffect5(() => {
+  useEffect4(() => {
     setDate(selected);
     setUsedDDisplayedMonth(selected);
   }, [selected]);
@@ -6859,7 +6848,7 @@ var DatePicker = ({
   const translation = useTranslation([timeTranslation], overwriteTranslation);
   const [displayedMonth, setDisplayedMonth] = useState6(value);
   const [displayMode, setDisplayMode] = useState6(initialDisplay);
-  useEffect6(() => {
+  useEffect5(() => {
     setDisplayedMonth(value);
   }, [value]);
   return /* @__PURE__ */ jsxs6("div", { className: clsx8("flex-col-4", className), children: [
@@ -6951,7 +6940,7 @@ var DatePickerUncontrolled = ({
   ...props
 }) => {
   const [date, setDate] = useState6(value);
-  useEffect6(() => setDate(value), [value]);
+  useEffect5(() => setDate(value), [value]);
   return /* @__PURE__ */ jsx9(
     DatePicker,
     {
@@ -7020,7 +7009,7 @@ var TimeDisplay = ({
 };
 
 // src/components/date/TimePicker.tsx
-import { useEffect as useEffect7, useRef as useRef2, useState as useState7 } from "react";
+import { useEffect as useEffect6, 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";
@@ -7037,7 +7026,7 @@ var TimePicker = ({
   const isPM = time.getHours() >= 11;
   const hours = is24HourFormat ? range(24) : range([1, 12], { exclusiveEnd: false });
   let minutes = range(60);
-  useEffect7(() => {
+  useEffect6(() => {
     const scrollToItem = () => {
       if (minuteRef.current) {
         const container = minuteRef.current.parentElement;
@@ -7052,7 +7041,7 @@ var TimePicker = ({
     };
     scrollToItem();
   }, [minuteRef, minuteRef.current]);
-  useEffect7(() => {
+  useEffect6(() => {
     const scrollToItem = () => {
       if (hourRef.current) {
         const container = hourRef.current.parentElement;
@@ -7144,7 +7133,7 @@ var TimePickerUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useState7(time);
-  useEffect7(() => setValue(time), [time]);
+  useEffect6(() => setValue(time), [time]);
   return /* @__PURE__ */ jsx11(
     TimePicker,
     {
@@ -7162,12 +7151,12 @@ var TimePickerUncontrolled = ({
 import clsx12 from "clsx";
 
 // src/components/layout-and-navigation/Overlay.tsx
-import { useEffect as useEffect9, useRef as useRef3, useState as useState9 } from "react";
+import { useEffect as useEffect8, useRef as useRef3, useState as useState9 } from "react";
 import ReactDOM from "react-dom";
 import clsx11 from "clsx";
 
 // src/hooks/useHoverState.ts
-import { useEffect as useEffect8, useState as useState8 } from "react";
+import { useEffect as useEffect7, useState as useState8 } from "react";
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
@@ -7191,14 +7180,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  useEffect8(() => {
+  useEffect7(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  useEffect8(() => {
+  useEffect7(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -7404,7 +7393,7 @@ var Overlay = ({
   backgroundClassName
 }) => {
   const [root, setRoot] = useState9();
-  useEffect9(() => {
+  useEffect8(() => {
     setRoot(document.body);
   }, []);
   if (!root || !isOpen) return null;
@@ -7467,7 +7456,7 @@ var Modal = ({
   headerProps
 }) => {
   const ref = useRef3(null);
-  useEffect9(() => {
+  useEffect8(() => {
     if (!isOpen) return;
     const modal = ref.current;
     if (!modal) {
@@ -7538,7 +7527,7 @@ var Dialog = ({
   headerProps
 }) => {
   const ref = useRef3(null);
-  useEffect9(() => {
+  useEffect8(() => {
     if (!isOpen) return;
     const dialog = ref.current;
     if (!dialog) {
@@ -7787,7 +7776,7 @@ var Circle = ({
 };
 
 // src/components/icons-and-geometry/Ring.tsx
-import { useCallback as useCallback3, useEffect as useEffect10, useState as useState11 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect9, useState as useState11 } from "react";
 import clsx15 from "clsx";
 import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var Ring = ({
@@ -7832,7 +7821,7 @@ var AnimatedRing = ({
       }
     }
   }, [milliseconds, onAnimationFinished, repeating, width]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (currentWidth < width) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -7887,7 +7876,7 @@ var RingWave = ({
       }
     }
   }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (currentInnerSize < endInnerSize) {
       requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
     }
@@ -8094,7 +8083,7 @@ var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
 };
 
 // src/components/layout-and-navigation/Carousel.tsx
-import { useCallback as useCallback4, useEffect as useEffect11, useMemo as useMemo2, useRef as useRef4, useState as useState12 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect10, useMemo as useMemo2, useRef as useRef4, useState as useState12 } from "react";
 import clsx17 from "clsx";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
@@ -8287,7 +8276,7 @@ var Carousel = ({
       animationId.current = requestAnimationFrame((time1) => animation(time1));
     }
   }, [animationTime, autoLoopAnimationTime, util]);
-  useEffect11(() => {
+  useEffect10(() => {
     if (animationState) {
       animationId.current = requestAnimationFrame(animation);
     }
@@ -8309,7 +8298,7 @@ var Carousel = ({
       isAutoLooping: true
     }
   }));
-  useEffect11(() => {
+  useEffect10(() => {
     if (!animationId.current && !animationState && !dragState && !timeOut.current) {
       if (autoLoopingTimeOut > 0) {
         timeOut.current = setTimeout(() => {
@@ -8704,7 +8693,7 @@ var inserterIdentifierMapping = [
   { id: "helpwave", name: "helpwave" },
   { id: "newline", name: "newline" }
 ];
-var parseMarkdown = (text, commandStart = "\\", open2 = "{", close = "}") => {
+var parseMarkdown = (text, commandStart = "\\", open = "{", close = "}") => {
   let start = text.indexOf(commandStart);
   const children = [];
   while (text !== "") {
@@ -8725,7 +8714,7 @@ var parseMarkdown = (text, commandStart = "\\", open2 = "{", close = "}") => {
       text = "";
       continue;
     }
-    const simpleReplace = [commandStart, open2, close];
+    const simpleReplace = [commandStart, open, close];
     if (simpleReplace.some((value) => text[1] === value)) {
       children.push({
         type: "text",
@@ -8746,7 +8735,7 @@ var parseMarkdown = (text, commandStart = "\\", open2 = "{", close = "}") => {
     }
     const modifier = modifierIdentifierMapping.find((value) => text.substring(1).startsWith(value.id));
     if (modifier) {
-      if (text[modifier.id.length + 1] !== open2) {
+      if (text[modifier.id.length + 1] !== open) {
         children.push({
           type: "text",
           text: text.substring(0, modifier.id.length + 1)
@@ -8760,7 +8749,7 @@ var parseMarkdown = (text, commandStart = "\\", open2 = "{", close = "}") => {
       let counter = 1;
       let escaping = false;
       while (index < text.length) {
-        if (text[index] === open2 && !escaping) {
+        if (text[index] === open && !escaping) {
           counter++;
         }
         if (text[index] === close && !escaping) {
@@ -8864,11 +8853,11 @@ import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as
 import clsx23 from "clsx";
 
 // src/components/user-action/Input.tsx
-import { forwardRef as forwardRef3, useEffect as useEffect14, useImperativeHandle, useRef as useRef5, useState as useState14 } from "react";
+import { forwardRef as forwardRef3, useEffect as useEffect13, useImperativeHandle, useRef as useRef5, useState as useState14 } from "react";
 import clsx22 from "clsx";
 
 // src/hooks/useDelay.ts
-import { useEffect as useEffect12, useState as useState13 } from "react";
+import { useEffect as useEffect11, useState as useState13 } from "react";
 var defaultOptions = {
   delay: 3e3,
   disabled: false
@@ -8893,12 +8882,12 @@ function useDelay(options) {
       setTimer(void 0);
     }, delay));
   };
-  useEffect12(() => {
+  useEffect11(() => {
     return () => {
       clearTimeout(timer);
     };
   }, [timer]);
-  useEffect12(() => {
+  useEffect11(() => {
     if (disabled) {
       clearTimeout(timer);
       setTimer(void 0);
@@ -8983,10 +8972,10 @@ function useFocusManagement() {
 }
 
 // src/hooks/useFocusOnceVisible.ts
-import React2, { useEffect as useEffect13 } from "react";
+import React2, { useEffect as useEffect12 } from "react";
 var useFocusOnceVisible = (ref, disable = false) => {
   const [hasUsedFocus, setHasUsedFocus] = React2.useState(false);
-  useEffect13(() => {
+  useEffect12(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -9103,7 +9092,7 @@ var InputUncontrolled = ({
   ...props
 }) => {
   const [usedValue, setUsedValue] = useState14(value);
-  useEffect14(() => {
+  useEffect13(() => {
     setUsedValue(value);
   }, [value]);
   return /* @__PURE__ */ jsx26(
@@ -9154,7 +9143,7 @@ var FormInput = forwardRef3(function FormInput2({
 });
 
 // src/components/layout-and-navigation/Pagination.tsx
-import { useEffect as useEffect15, useState as useState15 } from "react";
+import { useEffect as useEffect14, useState as useState15 } from "react";
 import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var Pagination = ({
   overwriteTranslation,
@@ -9169,7 +9158,7 @@ var Pagination = ({
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  useEffect15(() => {
+  useEffect14(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -9227,7 +9216,7 @@ import { Search } from "lucide-react";
 import clsx24 from "clsx";
 
 // src/hooks/useSearch.ts
-import { useCallback as useCallback6, useEffect as useEffect16, useMemo as useMemo3, useState as useState16 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect15, useMemo as useMemo3, useState as useState16 } from "react";
 
 // src/util/simpleSearch.ts
 var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
@@ -9276,7 +9265,7 @@ var useSearch = ({
     }
     setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
   }, [searchTags, list, search, searchMapping]);
-  useEffect16(() => {
+  useEffect15(() => {
     if (isSearchInstant) {
       setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
     }
@@ -9353,7 +9342,7 @@ var SearchableList = ({
 // src/components/layout-and-navigation/StepperBar.tsx
 import { Check as Check2, ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "lucide-react";
 import clsx25 from "clsx";
-import { useEffect as useEffect17, useState as useState17 } from "react";
+import { useEffect as useEffect16, useState as useState17 } from "react";
 import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var defaultState = {
   currentStep: 0,
@@ -9448,7 +9437,7 @@ var StepperBar = ({
 };
 var StepperBarUncontrolled = ({ state, onChange, ...props }) => {
   const [usedState, setUsedState] = useState17(state ?? defaultState);
-  useEffect17(() => {
+  useEffect16(() => {
     setUsedState(state ?? defaultState);
   }, [state]);
   return /* @__PURE__ */ jsx29(
@@ -9819,17 +9808,17 @@ var InputModal = ({
 
 // src/components/user-action/Select.tsx
 import { useCallback as useCallback7 } from "react";
-import { useEffect as useEffect20, useState as useState20 } from "react";
+import { useEffect as useEffect19, useState as useState20 } from "react";
 import clsx35 from "clsx";
 
 // src/components/user-action/Menu.tsx
-import { useEffect as useEffect19, useRef as useRef6, useState as useState19 } from "react";
+import { useEffect as useEffect18, useRef as useRef6, useState as useState19 } from "react";
 import clsx33 from "clsx";
 
 // src/hooks/useOutsideClick.ts
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect17 } from "react";
 var useOutsideClick = (refs, handler) => {
-  useEffect18(() => {
+  useEffect17(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -9967,7 +9956,7 @@ var Menu = ({
     triggerRef.current?.getBoundingClientRect(),
     { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
   );
-  useEffect19(() => {
+  useEffect18(() => {
     if (!isOpen) return;
     const triggerEl = triggerRef.current;
     if (!triggerEl) return;
@@ -9984,7 +9973,7 @@ var Menu = ({
       window.removeEventListener("resize", close);
     };
   }, [isOpen, setIsOpen]);
-  useEffect19(() => {
+  useEffect18(() => {
     if (isOpen) {
       setIsHidden(false);
     }
@@ -10070,7 +10059,7 @@ var Select = ({
     ...searchOptions
   });
   return /* @__PURE__ */ jsxs29("div", { className: clsx35(className), children: [
-    label && /* @__PURE__ */ jsx43(Label, { ...label, labelType: label.labelType ?? "labelBig", className: clsx35("mb-1", label.className) }),
+    label && /* @__PURE__ */ jsx43(Label, { ...label, labelType: label.labelType ?? "labelSmall", className: clsx35("mb-1", label.className) }),
     /* @__PURE__ */ jsx43(
       Menu,
       {
@@ -10081,11 +10070,8 @@ var Select = ({
             ref,
             className: clsx35(
               "btn-md justify-between w-full border-2",
-              {
-                "rounded-b-lg": !open,
-                "bg-input-background text-input-text hover:border-primary": !disabled,
-                "bg-disabled-background text-disabled-text border-disabled-background cursor-not-allowed": disabled
-              },
+              "not-disabled:bg-input-background not-disabled:text-input-text not-disabled:hover:border-primary",
+              "disabled:bg-disabled-background disabled:text-disabled-text disabled:border-disabled-border",
               triggerClassName
             ),
             onClick: toggleOpen,
@@ -10139,7 +10125,7 @@ var SelectUncontrolled = ({
   ...props
 }) => {
   const [selected, setSelected] = useState20(value);
-  useEffect20(() => {
+  useEffect19(() => {
     if (options.find((options2) => options2.value === value)) {
       setSelected(value);
     }
@@ -10212,7 +10198,7 @@ var LanguageModal = ({
 
 // src/theming/useTheme.tsx
 import { useMemo as useMemo4 } from "react";
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect21, useState as useState21 } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect20, useState as useState21 } from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
 var themes = ["light", "dark", "system"];
 var defaultThemeTypeTranslation = {
@@ -10243,20 +10229,20 @@ var ThemeContext = createContext2({
   theme: "light",
   setTheme: noop
 });
-var ThemeProvider = ({ children, initialTheme = "system" }) => {
-  const [storedTheme, setStoredTheme] = useLocalStorage("theme", initialTheme);
+var ThemeProvider = ({ children, initialTheme }) => {
+  const [storedTheme, setStoredTheme] = useLocalStorage("theme", initialTheme ?? "system");
   const [userTheme, setUserTheme] = useState21();
-  useEffect21(() => {
-    if (storedTheme !== initialTheme) {
+  useEffect20(() => {
+    if (!!initialTheme && storedTheme !== initialTheme) {
       console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
       setStoredTheme(initialTheme);
     }
   }, [initialTheme]);
   const usedTheme = useMemo4(() => storedTheme !== "system" ? storedTheme : userTheme, [storedTheme, userTheme]);
-  useEffect21(() => {
+  useEffect20(() => {
     document.documentElement.setAttribute("data-theme", usedTheme);
   }, [usedTheme]);
-  useEffect21(() => {
+  useEffect20(() => {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     setUserTheme(prefersDark ? "dark" : "light");
   }, []);
@@ -10350,31 +10336,57 @@ var Checkbox = ({
     }
   };
   const changeValue = () => {
+    if (disabled) {
+      return;
+    }
     const newValue = checked === "indeterminate" ? false : !checked;
     propagateChange(newValue);
   };
-  return /* @__PURE__ */ jsxs32("div", { className: clsx36("group flex-row-2 items-center cursor-pointer", containerClassName), onClick: changeValue, children: [
-    /* @__PURE__ */ jsx47(
-      CheckboxPrimitive.Root,
-      {
-        onCheckedChange: propagateChange,
-        checked,
-        disabled,
-        id,
-        className: clsx36(usedSizeClass, `items-center border-2 rounded outline-none `, {
-          "text-disabled-text border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
-          "focus:border-primary group-hover:border-primary ": !disabled,
-          "bg-input-background": !disabled && !checked,
-          "bg-primary/30 border-primary text-primary": !disabled && checked === true || checked === "indeterminate"
-        }, className),
-        children: /* @__PURE__ */ jsxs32(CheckboxPrimitive.Indicator, { children: [
-          checked === true && /* @__PURE__ */ jsx47(Check3, { className: innerIconSize }),
-          checked === "indeterminate" && /* @__PURE__ */ jsx47(Minus, { className: innerIconSize })
-        ] })
-      }
-    ),
-    label && /* @__PURE__ */ jsx47(Label, { ...label, className: clsx36(label.className), htmlFor: id })
-  ] });
+  return /* @__PURE__ */ jsxs32(
+    "div",
+    {
+      className: clsx36("group flex-row-2 items-center", {
+        "cursor-pointer": !disabled,
+        "cursor-not-allowed": disabled
+      }, containerClassName),
+      onClick: changeValue,
+      children: [
+        /* @__PURE__ */ jsx47(
+          CheckboxPrimitive.Root,
+          {
+            onCheckedChange: propagateChange,
+            checked,
+            disabled,
+            id,
+            className: clsx36(usedSizeClass, `items-center border-2 rounded outline-none `, {
+              "text-disabled-text border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
+              "focus:border-primary group-hover:border-primary ": !disabled,
+              "bg-input-background": !disabled && !checked,
+              "bg-primary/30 border-primary text-primary": !disabled && checked === true || checked === "indeterminate"
+            }, className),
+            children: /* @__PURE__ */ jsxs32(CheckboxPrimitive.Indicator, { children: [
+              checked === true && /* @__PURE__ */ jsx47(Check3, { className: innerIconSize }),
+              checked === "indeterminate" && /* @__PURE__ */ jsx47(Minus, { className: innerIconSize })
+            ] })
+          }
+        ),
+        label && /* @__PURE__ */ jsx47(
+          Label,
+          {
+            ...label,
+            className: clsx36(
+              label.className,
+              {
+                "cursor-pointer": !disabled,
+                "cursor-not-allowed": disabled
+              }
+            ),
+            htmlFor: id
+          }
+        )
+      ]
+    }
+  );
 };
 var CheckboxUncontrolled = ({
   onChange,
@@ -10547,7 +10559,7 @@ import clsx40 from "clsx";
 
 // src/components/user-action/MultiSelect.tsx
 import { useCallback as useCallback8 } from "react";
-import { useEffect as useEffect22, useState as useState23 } from "react";
+import { useEffect as useEffect21, useState as useState23 } from "react";
 import clsx39 from "clsx";
 import { Plus } from "lucide-react";
 import { Fragment as Fragment6, jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
@@ -10589,7 +10601,7 @@ var MultiSelect = ({
         ...label,
         htmlFor: label.name,
         className: clsx39(" mb-1", label.className),
-        labelType: label.labelType ?? "labelBig"
+        labelType: label.labelType ?? "labelSmall"
       }
     ),
     /* @__PURE__ */ jsx51(
@@ -10602,10 +10614,10 @@ var MultiSelect = ({
             ref,
             className: clsx39(
               "group btn-md justify-between w-full border-2 h-auto",
+              "not-disabled:bg-input-background not-disabled:text-input-text not-disabled:hover:border-primary",
+              "disabled:bg-disabled-background disabled:text-disabled-text disabled:border-disabled-border",
               {
-                "min-h-14": useChipDisplay,
-                "bg-input-background text-input-text hover:border-primary": !disabled,
-                "bg-disabled-background text-disabled-text border-disabled-background cursor-not-allowed": disabled
+                "min-h-14": useChipDisplay
               },
               triggerClassName
             ),
@@ -10717,7 +10729,7 @@ var MultiSelectUncontrolled = ({
   ...props
 }) => {
   const [usedOptions, setUsedOptions] = useState23(options);
-  useEffect22(() => {
+  useEffect21(() => {
     setUsedOptions(options);
   }, [options]);
   return /* @__PURE__ */ jsx51(
@@ -10945,7 +10957,7 @@ import { Text } from "lucide-react";
 import clsx44 from "clsx";
 
 // src/components/user-action/Textarea.tsx
-import { useEffect as useEffect23, useState as useState24 } from "react";
+import { useEffect as useEffect22, useState as useState24 } from "react";
 import clsx43 from "clsx";
 import { jsx as jsx55, jsxs as jsxs36 } from "react/jsx-runtime";
 var Textarea = ({
@@ -10984,11 +10996,11 @@ var Textarea = ({
       "div",
       {
         className: clsx43(
-          "bg-input-background text-input-text relative",
+          "relative",
           {
             "border-2 rounded-lg": defaultStyle,
-            "hover:border-primary focus-within:border-primary": defaultStyle && !disabled,
-            "border-disabled-border cursor-not-allowed": defaultStyle && disabled
+            "bg-input-background text-input-text hover:border-primary focus-within:border-primary": defaultStyle && !disabled,
+            "border-disabled-border bg-disabled-background cursor-not-allowed": defaultStyle && disabled
           }
         ),
         children: [
@@ -11035,7 +11047,7 @@ var TextareaUncontrolled = ({
   ...props
 }) => {
   const [text, setText] = useState24(value);
-  useEffect23(() => {
+  useEffect22(() => {
     setText(value);
   }, [value]);
   return /* @__PURE__ */ jsx55(
@@ -11132,7 +11144,7 @@ var TableFilters = {
 };
 
 // src/components/table/Table.tsx
-import { useCallback as useCallback9, useEffect as useEffect26, useMemo as useMemo5, useRef as useRef7, useState as useState26 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect25, useMemo as useMemo5, useRef as useRef7, useState as useState26 } from "react";
 import clsx48 from "clsx";
 import {
   flexRender,
@@ -11146,7 +11158,7 @@ import { Scrollbars as Scrollbars3 } from "react-custom-scrollbars-2";
 
 // src/components/table/TableFilterButton.tsx
 import { FilterIcon } from "lucide-react";
-import { useEffect as useEffect24, useState as useState25 } from "react";
+import { useEffect as useEffect23, useState as useState25 } from "react";
 import { Fragment as Fragment7, jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
 var defaultTableFilterTranslation = {
   en: {
@@ -11174,7 +11186,7 @@ var TableFilterButton = ({
   const columnFilterValue = column.getFilterValue();
   const [filterValue, setFilterValue] = useState25(columnFilterValue);
   const hasFilter = !!filterValue;
-  useEffect24(() => {
+  useEffect23(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   return /* @__PURE__ */ jsx58(
@@ -11306,9 +11318,9 @@ var TableSortButton = ({
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-import { useEffect as useEffect25 } from "react";
+import { useEffect as useEffect24 } from "react";
 var useResizeCallbackWrapper = (callback) => {
-  useEffect25(() => {
+  useEffect24(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -11495,7 +11507,7 @@ var Table = ({
     ...tableOptions
   });
   const [hasInitializedSizing, setHasInitializedSizing] = useState26(false);
-  useEffect26(() => {
+  useEffect25(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
@@ -11505,7 +11517,7 @@ var Table = ({
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  useEffect26(() => {
+  useEffect25(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -11637,7 +11649,7 @@ var Table = ({
 };
 var TableUncontrolled = ({ data, ...props }) => {
   const [usedDate, setUsedData] = useState26(data);
-  useEffect26(() => {
+  useEffect25(() => {
     setUsedData(data);
   }, [data]);
   return /* @__PURE__ */ jsx61(
@@ -11892,7 +11904,7 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-import { useCallback as useCallback10, useEffect as useEffect27, useState as useState28 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect26, useState as useState28 } from "react";
 import clsx51 from "clsx";
 import { jsx as jsx64, jsxs as jsxs41 } from "react/jsx-runtime";
 var up = 1;
@@ -12012,7 +12024,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  useEffect27(() => {
+  useEffect26(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -12089,7 +12101,7 @@ var ScrollPicker = ({
 };
 
 // src/components/user-action/ToggleableInput.tsx
-import { useEffect as useEffect28, useRef as useRef8, useState as useState29 } from "react";
+import { useEffect as useEffect27, useRef as useRef8, useState as useState29 } from "react";
 import { Pencil } from "lucide-react";
 import clsx52 from "clsx";
 import { jsx as jsx65, jsxs as jsxs42 } from "react/jsx-runtime";
@@ -12114,7 +12126,7 @@ var ToggleableInput = ({
     onEditCompleted(text);
     clearTimer();
   };
-  useEffect28(() => {
+  useEffect27(() => {
     if (isEditing) {
       ref.current?.focus();
     }
@@ -12180,7 +12192,7 @@ var ToggleableInputUncontrolled = ({
   ...restProps
 }) => {
   const [value, setValue] = useState29(initialValue);
-  useEffect28(() => {
+  useEffect27(() => {
     setValue(initialValue);
   }, [initialValue]);
   return /* @__PURE__ */ jsx65(
@@ -12197,14 +12209,14 @@ var ToggleableInputUncontrolled = ({
 };
 
 // src/hooks/useLogOnce.ts
-import { useEffect as useEffect29, useState as useState30 } from "react";
+import { useEffect as useEffect28, useState as useState30 } from "react";
 var useLogOnce = ({
   message,
   condition,
   type = "warning"
 }) => {
   const [hasLogged, setHasLogged] = useState30(false);
-  useEffect29(() => {
+  useEffect28(() => {
     if (!hasLogged && condition) {
       switch (type) {
         case "info":