@helpwave/hightide 0.3.0 → 0.4.0

package/dist/index.js

@@ -7491,7 +7491,7 @@ var ButtonUtil = {
     warning: "warning",
     negative: "negative",
     neutral: "neutral",
-    none: ""
+    none: "reset-coloring-variables"
   }
 };
 var Button = (0, import_react4.forwardRef)(function SolidButton({
@@ -8633,7 +8633,6 @@ var DiscardChangesDialog = ({
 
 // src/components/user-action/input/Input.tsx
 var import_react18 = require("react");
-var import_clsx11 = __toESM(require("clsx"));
 
 // src/hooks/useDelay.ts
 var import_react16 = require("react");
@@ -8748,8 +8747,6 @@ var Input = (0, import_react18.forwardRef)(function Input2({
   editCompleteOptions,
   disabled = false,
   invalid = false,
-  defaultStyle = true,
-  className,
   ...props
 }, forwardedRef) {
   const {
@@ -8772,15 +8769,6 @@ var Input = (0, import_react18.forwardRef)(function Input2({
       ref: innerRef,
       value,
       disabled,
-      className: defaultStyle ? (0, import_clsx11.default)(
-        "px-3 py-2 rounded-md text-sm h-10 border-2 border-transparent focus-style-none",
-        {
-          "bg-input-background text-input-text hover:border-primary focus:border-primary": !disabled && !invalid,
-          "bg-negative/20 text-negative hover:border-negative focus-visible:border-negative": !disabled && invalid,
-          "bg-disabled-background text-disabled border-disabled-border": disabled
-        },
-        className
-      ) : className,
       onKeyDown: (event) => {
         props.onKeyDown?.(event);
         if (!allowEnterComplete) {
@@ -8809,6 +8797,10 @@ var Input = (0, import_react18.forwardRef)(function Input2({
         });
         onChangeText?.(value2);
       },
+      "data-name": props["data-name"] ?? "input",
+      "data-value": value ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0,
       "aria-invalid": props["aria-invalid"] ?? invalid,
       "aria-disabled": props["aria-disabled"] ?? disabled
     }
@@ -8849,7 +8841,7 @@ var InputDialog = ({
 
 // src/components/user-action/Select.tsx
 var import_react20 = require("react");
-var import_clsx13 = __toESM(require("clsx"));
+var import_clsx12 = __toESM(require("clsx"));
 
 // src/utils/match.ts
 var match = (key, values) => {
@@ -8860,7 +8852,7 @@ var match = (key, values) => {
 var import_lucide_react4 = require("lucide-react");
 
 // src/components/layout/Chip.tsx
-var import_clsx12 = __toESM(require("clsx"));
+var import_clsx11 = __toESM(require("clsx"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var chipColors = ButtonUtil.colors;
 var ChipUtil = {
@@ -8880,7 +8872,7 @@ var Chip = ({
     "div",
     {
       ...restProps,
-      className: (0, import_clsx12.default)(
+      className: (0, import_clsx11.default)(
         `flex-row-0 w-fit font-semibold coloring-solid`,
         colorMapping,
         {
@@ -8905,7 +8897,7 @@ var ChipList = ({
   list,
   className = ""
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_clsx12.default)("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_clsx11.default)("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Chip,
     {
       ...value,
@@ -9265,7 +9257,7 @@ var SelectOption = (0, import_react20.forwardRef)(
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-selected": isSelected ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: (0, import_clsx13.default)(
+        className: (0, import_clsx12.default)(
           "flex-row-1 items-center px-2 py-1 rounded-md",
           "data-highlighted:bg-primary/20",
           "data-disabled:text-disabled data-disabled:cursor-not-allowed",
@@ -9291,7 +9283,7 @@ var SelectOption = (0, import_react20.forwardRef)(
           iconAppearance === "left" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             import_lucide_react4.CheckIcon,
             {
-              className: (0, import_clsx13.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              className: (0, import_clsx12.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           ),
@@ -9299,7 +9291,7 @@ var SelectOption = (0, import_react20.forwardRef)(
           iconAppearance === "right" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             import_lucide_react4.CheckIcon,
             {
-              className: (0, import_clsx13.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              className: (0, import_clsx12.default)("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           )
@@ -9347,19 +9339,8 @@ var SelectButton = (0, import_react20.forwardRef)(function SelectButton2({ place
             break;
         }
       },
-      className: (0, import_clsx13.default)(
-        "flex-row-2 items-center justify-between rounded-md px-3 py-2",
-        {
-          "bg-input-background text-placeholder": !hasValue && !disabled && !invalid,
-          "bg-input-background text-input-text": hasValue && !disabled && !invalid,
-          "bg-negative/20": !disabled && invalid,
-          "text-placeholder": !hasValue && !disabled,
-          "text-negative": hasValue && !disabled && invalid,
-          "bg-disabled-background text-disabled": disabled
-        },
-        props.className
-      ),
-      "data-placeholder": !hasValue ? "" : void 0,
+      "data-name": props["data-name"] ?? "select-button",
+      "data-value": hasValue ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
       "data-invalid": invalid ? "" : void 0,
       "aria-invalid": invalid,
@@ -9368,21 +9349,11 @@ var SelectButton = (0, import_react20.forwardRef)(function SelectButton2({ place
       "aria-expanded": state.isOpen,
       "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
       children: [
-        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_clsx13.default)("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex-row-0", children: [
+        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: (0, import_clsx12.default)("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex-row-0", children: [
           label,
           index < state.value.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "," })
         ] }, value)) }) : placeholder ?? translation("clickToSelect"),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          ExpansionIcon,
-          {
-            isExpanded: state.isOpen,
-            className: (0, import_clsx13.default)({
-              "text-input-text": !disabled && !invalid,
-              "text-negative": !disabled && invalid,
-              "text-disabled": disabled
-            })
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ExpansionIcon, { isExpanded: state.isOpen })
       ]
     }
   );
@@ -9403,10 +9374,12 @@ var SelectChipDisplay = (0, import_react20.forwardRef)(function SelectChipDispla
     {
       ...props,
       ref: innerRef,
-      className: (0, import_clsx13.default)(
-        "flex flex-wrap flex-row gap-2 items-center bg-input-background text-input-text rounded-md px-2.5 py-2.5",
-        props.className
-      ),
+      onClick: (event) => {
+        toggleOpen();
+        props.onClick?.(event);
+      },
+      "data-name": props["data-name"] ?? "select-button-chips",
+      "data-value": state.value.length > 0 ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
       "data-invalid": invalid ? "" : void 0,
       "aria-invalid": invalid,
@@ -9420,11 +9393,11 @@ var SelectChipDisplay = (0, import_react20.forwardRef)(function SelectChipDispla
               onClick: () => {
                 item.toggleSelection(value, false);
               },
-              size: "none",
+              size: "tiny",
               color: "negative",
               coloringStyle: "text",
-              className: "flex-row-0 items-center px-0.5 py-0.5 w-6 h-6 rounded",
-              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react4.XIcon, { className: "w-5 h-5" })
+              className: "flex-row-0 items-center",
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react4.XIcon, { className: "size-5" })
             }
           )
         ] }, value)),
@@ -9432,7 +9405,10 @@ var SelectChipDisplay = (0, import_react20.forwardRef)(function SelectChipDispla
           Button,
           {
             id: state.id,
-            onClick: () => toggleOpen(),
+            onClick: (event) => {
+              event.stopPropagation();
+              toggleOpen();
+            },
             onKeyDown: (event) => {
               switch (event.key) {
                 case "ArrowDown":
@@ -9450,6 +9426,7 @@ var SelectChipDisplay = (0, import_react20.forwardRef)(function SelectChipDispla
             "aria-haspopup": "listbox",
             "aria-expanded": state.isOpen,
             "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
+            className: "size-9",
             children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react4.Plus, {})
           }
         )
@@ -9483,7 +9460,7 @@ var SelectContent = (0, import_react20.forwardRef)(
         "div",
         {
           id: `select-container-${state.id}`,
-          className: (0, import_clsx13.default)("fixed inset-0 w-screen h-screen", containerClassName),
+          className: (0, import_clsx12.default)("fixed inset-0 w-screen h-screen", containerClassName),
           style: { zIndex },
           hidden: !state.isOpen,
           children: [
@@ -9492,7 +9469,7 @@ var SelectContent = (0, import_react20.forwardRef)(
               {
                 id: `select-background-${state.id}`,
                 onClick: () => trigger.toggleOpen(false),
-                className: (0, import_clsx13.default)("fixed inset-0 w-screen h-screen")
+                className: (0, import_clsx12.default)("fixed inset-0 w-screen h-screen")
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -9541,7 +9518,7 @@ var SelectContent = (0, import_react20.forwardRef)(
                       break;
                   }
                 },
-                className: (0, import_clsx13.default)("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-style-within overflow-auto", props.className),
+                className: (0, import_clsx12.default)("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-outline-within overflow-auto", props.className),
                 style: {
                   opacity: position ? void 0 : 0,
                   position: "fixed",
@@ -9691,7 +9668,7 @@ var LanguageDialog = ({
 
 // src/components/dialog/ThemeDialog.tsx
 var import_lucide_react5 = require("lucide-react");
-var import_clsx14 = __toESM(require("clsx"));
+var import_clsx13 = __toESM(require("clsx"));
 
 // src/theming/useTheme.tsx
 var import_react21 = require("react");
@@ -9781,11 +9758,11 @@ var useTheme = () => {
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var ThemeIcon = ({ theme, className }) => {
   if (theme === "dark") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.MoonIcon, { className: (0, import_clsx14.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.MoonIcon, { className: (0, import_clsx13.default)("w-4 h-4", className) });
   } else if (theme === "light") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.SunIcon, { className: (0, import_clsx14.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.SunIcon, { className: (0, import_clsx13.default)("w-4 h-4", className) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.MonitorCog, { className: (0, import_clsx14.default)("w-4 h-4", className) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.MonitorCog, { className: (0, import_clsx13.default)("w-4 h-4", className) });
   }
 };
 var ThemeDialog = ({
@@ -9831,10 +9808,10 @@ var ThemeDialog = ({
 
 // src/components/form/FormElementWrapper.tsx
 var import_react22 = require("react");
-var import_clsx16 = require("clsx");
+var import_clsx15 = require("clsx");
 
 // src/components/user-action/Label.tsx
-var import_clsx15 = __toESM(require("clsx"));
+var import_clsx14 = __toESM(require("clsx"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var styleMapping = {
   md: "typography-label-md color-label-text",
@@ -9846,7 +9823,7 @@ var Label = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { ...props, className: (0, import_clsx15.default)(styleMapping[size], className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { ...props, className: (0, import_clsx14.default)(styleMapping[size], className), children });
 };
 
 // src/components/form/FormElementWrapper.tsx
@@ -9897,7 +9874,7 @@ var FormElementWrapper = ({
     "aria-invalid": !!error,
     "aria-errormessage": error ? errorId : void 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_clsx16.clsx)("relative flex flex-col gap-y-1", containerClassName), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_clsx15.clsx)("relative flex flex-col gap-y-1", containerClassName), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       Label,
       {
@@ -9905,7 +9882,7 @@ var FormElementWrapper = ({
         id: labelId,
         htmlFor: usedId,
         size: "lg",
-        className: (0, import_clsx16.clsx)("flex-row-1 items-start", labelProps?.className),
+        className: (0, import_clsx15.clsx)("flex-row-1 items-start", labelProps?.className),
         children: [
           label,
           required && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "none", className: "bg-primary w-2 h-2 rounded-full" })
@@ -9917,7 +9894,7 @@ var FormElementWrapper = ({
       {
         ...descriptionProps,
         id: descriptionId,
-        className: (0, import_clsx16.clsx)("text-description text-sm", descriptionProps?.className),
+        className: (0, import_clsx15.clsx)("text-description text-sm", descriptionProps?.className),
         children: description
       }
     ),
@@ -9927,7 +9904,7 @@ var FormElementWrapper = ({
       {
         ...errorProps,
         id: errorId,
-        className: (0, import_clsx16.clsx)("absolute top-[calc(100%_+_0.25rem)] left-0 text-negative text-sm font-medium", errorProps?.className),
+        className: (0, import_clsx15.clsx)("absolute top-[calc(100%_+_0.25rem)] left-0 text-negative text-sm font-medium", errorProps?.className),
         role: "alert",
         "aria-hidden": !error,
         "aria-live": "polite",
@@ -9938,7 +9915,7 @@ var FormElementWrapper = ({
 };
 
 // src/components/icons-and-geometry/Avatar.tsx
-var import_clsx17 = __toESM(require("clsx"));
+var import_clsx16 = __toESM(require("clsx"));
 var import_react23 = require("react");
 var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -9988,7 +9965,7 @@ var Avatar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
-      className: (0, import_clsx17.default)(
+      className: (0, import_clsx16.default)(
         `relative flex-row-0 items-center justify-center bg-primary text-on-primary`,
         rounding,
         className
@@ -10000,7 +9977,7 @@ var Avatar = ({
           {
             src: image?.avatarUrl,
             alt: image?.alt,
-            className: (0, import_clsx17.default)(rounding, { "absolute left-0 top-0 -translate-1/2 opacity-0 z-1 ": !isLoaded || hasError }),
+            className: (0, import_clsx16.default)(rounding, { "absolute left-0 top-0 -translate-1/2 opacity-0 z-1 ": !isLoaded || hasError }),
             onLoad: () => setIsLoaded(true),
             onError: () => setHasError(true)
           }
@@ -10034,7 +10011,7 @@ var AvatarGroup = ({
             ...avatar,
             size,
             fullyRounded,
-            className: (0, import_clsx17.default)("shadow-side shadow-r-4 shadow-hard", avatar.className)
+            className: (0, import_clsx16.default)("shadow-side shadow-r-4 shadow-hard", avatar.className)
           }
         )
       },
@@ -10043,7 +10020,7 @@ var AvatarGroup = ({
     showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
-        className: (0, import_clsx17.default)(textClassNameMapping[size], "flex-row-2 truncate items-center"),
+        className: (0, import_clsx16.default)(textClassNameMapping[size], "flex-row-2 truncate items-center"),
         children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { children: [
           "+ ",
           notDisplayedProfiles
@@ -10054,7 +10031,7 @@ var AvatarGroup = ({
 };
 
 // src/components/icons-and-geometry/Circle.tsx
-var import_clsx18 = __toESM(require("clsx"));
+var import_clsx17 = __toESM(require("clsx"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var Circle = ({
   radius = 20,
@@ -10066,7 +10043,7 @@ var Circle = ({
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
-      className: (0, import_clsx18.default)(`rounded-full`, className),
+      className: (0, import_clsx17.default)(`rounded-full`, className),
       style: {
         width: `${size}px`,
         height: `${size}px`,
@@ -10079,7 +10056,7 @@ var Circle = ({
 
 // src/components/icons-and-geometry/Ring.tsx
 var import_react24 = require("react");
-var import_clsx19 = __toESM(require("clsx"));
+var import_clsx18 = __toESM(require("clsx"));
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var Ring = ({
   innerSize = 20,
@@ -10089,7 +10066,7 @@ var Ring = ({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
-      className: (0, import_clsx19.default)(`bg-transparent rounded-full outline`, className),
+      className: (0, import_clsx18.default)(`bg-transparent rounded-full outline`, className),
       style: {
         width: `${innerSize}px`,
         height: `${innerSize}px`,
@@ -10228,7 +10205,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle1 / 2,
-            className: (0, import_clsx19.default)(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
+            className: (0, import_clsx18.default)(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`
@@ -10242,7 +10219,7 @@ var RadialRings = ({
             width: (sizeCircle2 - sizeCircle1) / 2,
             onAnimationFinished: () => currentRing === 0 ? setCurrentRing(1) : null,
             repeating: true,
-            className: (0, import_clsx19.default)(
+            className: (0, import_clsx18.default)(
               circle2ClassName,
               { "opacity-5": currentRing !== 0 }
             ),
@@ -10262,7 +10239,7 @@ var RadialRings = ({
             endInnerSize: sizeCircle2,
             width: waveWidth,
             repeating: true,
-            className: (0, import_clsx19.default)(waveBaseColor, `opacity-5`),
+            className: (0, import_clsx18.default)(waveBaseColor, `opacity-5`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10276,7 +10253,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle2 / 2,
-            className: (0, import_clsx19.default)(
+            className: (0, import_clsx18.default)(
               circle2ClassName,
               { "opacity-20": currentRing < 1 },
               `absolute z-[8] -translate-y-1/2 -translate-x-1/2`
@@ -10294,7 +10271,7 @@ var RadialRings = ({
             width: (sizeCircle3 - sizeCircle2) / 2,
             onAnimationFinished: () => currentRing === 1 ? setCurrentRing(2) : null,
             repeating: true,
-            className: (0, import_clsx19.default)(circle3ClassName),
+            className: (0, import_clsx18.default)(circle3ClassName),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10311,7 +10288,7 @@ var RadialRings = ({
             endInnerSize: sizeCircle3 - waveWidth,
             width: waveWidth,
             repeating: true,
-            className: (0, import_clsx19.default)(waveBaseColor, `opacity-5`),
+            className: (0, import_clsx18.default)(waveBaseColor, `opacity-5`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10325,7 +10302,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle3 / 2,
-            className: (0, import_clsx19.default)(
+            className: (0, import_clsx18.default)(
               circle3ClassName,
               { "opacity-20": currentRing < 2 },
               `absolute z-[6] -translate-y-1/2 -translate-x-1/2`
@@ -10363,7 +10340,7 @@ var TagIcon = ({
 
 // src/components/layout/Carousel.tsx
 var import_react25 = require("react");
-var import_clsx20 = __toESM(require("clsx"));
+var import_clsx19 = __toESM(require("clsx"));
 var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var CarouselContext = (0, import_react25.createContext)(null);
@@ -10409,7 +10386,7 @@ function CarouselTabs({
             ref: (el) => tabRefs.current[index] = el,
             onClick: () => onChange(index),
             onKeyDown: (e) => handleKeyDown(e, index),
-            className: (0, import_clsx20.default)(
+            className: (0, import_clsx19.default)(
               "w-8 min-w-8 h-3 min-h-3 first:rounded-l-md last:rounded-r-md",
               {
                 "bg-carousel-dot-disabled hover:bg-carousel-dot-active": currentIndex !== index,
@@ -10443,7 +10420,7 @@ var CarouselSlide = (0, import_react25.forwardRef)(
         ...props,
         ref,
         id: `${id}-slide-${index}`,
-        className: (0, import_clsx20.default)("focus-style-none group/slide", props.className),
+        className: (0, import_clsx19.default)("focus-style-none group/slide", props.className),
         tabIndex: isSelected ? 0 : void 0,
         role: "group",
         "aria-roledescription": translation("slide"),
@@ -10592,7 +10569,7 @@ var Carousel = ({
     {
       ref: carouselContainerRef,
       ...props,
-      className: (0, import_clsx20.default)("flex-col-2 items-center w-full", props.className),
+      className: (0, import_clsx19.default)("flex-col-2 items-center w-full", props.className),
       id,
       role: "region",
       "aria-roledescription": translation("slide"),
@@ -10601,7 +10578,7 @@ var Carousel = ({
           "div",
           {
             ...slideContainerProps,
-            className: (0, import_clsx20.default)(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
+            className: (0, import_clsx19.default)(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
             children: [
               hintNext ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
                 "div",
@@ -10610,7 +10587,7 @@ var Carousel = ({
                   onPointerMove: handlePointerMove,
                   onPointerUp: handlePointerUp,
                   onPointerLeave: handlePointerUp,
-                  className: (0, import_clsx20.default)(`flex-row-2 relative h-full`, heightClassName),
+                  className: (0, import_clsx19.default)(`flex-row-2 relative h-full`, heightClassName),
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
                       item,
@@ -10623,7 +10600,7 @@ var Carousel = ({
                           ref: isInItems ? slideRefs[index] : void 0,
                           index,
                           isSelected: isInItems && currentIndex === index,
-                          className: (0, import_clsx20.default)(
+                          className: (0, import_clsx19.default)(
                             `absolute left-[50%] h-full overflow-hidden transition-transform ease-in-out`,
                             slideClassName
                           ),
@@ -10640,13 +10617,13 @@ var Carousel = ({
                     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "div",
                       {
-                        className: (0, import_clsx20.default)(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+                        className: (0, import_clsx19.default)(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "div",
                       {
-                        className: (0, import_clsx20.default)(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+                        className: (0, import_clsx19.default)(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
                       }
                     )
                   ]
@@ -10655,7 +10632,7 @@ var Carousel = ({
                 "div",
                 {
                   ref: slideRefs[currentIndex],
-                  className: (0, import_clsx20.default)("px-16 h-full"),
+                  className: (0, import_clsx19.default)("px-16 h-full"),
                   tabIndex: 0,
                   role: "group",
                   "aria-roledescription": translation("slide"),
@@ -10672,7 +10649,7 @@ var Carousel = ({
                   {
                     layout: "icon",
                     color: "neutral",
-                    className: (0, import_clsx20.default)("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
+                    className: (0, import_clsx19.default)("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
                     disabled: !canGoLeft(),
                     onClick: () => left(),
                     children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronLeft, { size: 24 })
@@ -10683,7 +10660,7 @@ var Carousel = ({
                   {
                     layout: "icon",
                     color: "neutral",
-                    className: (0, import_clsx20.default)("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
+                    className: (0, import_clsx19.default)("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
                     disabled: !canGoRight(),
                     onClick: () => right(),
                     children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react7.ChevronRight, { size: 24 })
@@ -10700,7 +10677,7 @@ var Carousel = ({
 };
 
 // src/components/layout/DividerInserter.tsx
-var import_clsx21 = __toESM(require("clsx"));
+var import_clsx20 = __toESM(require("clsx"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var DividerInserter = ({
   children,
@@ -10718,11 +10695,11 @@ var DividerInserter = ({
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: (0, import_clsx21.default)(className), ...restProps, children: nodes });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: (0, import_clsx20.default)(className), ...restProps, children: nodes });
 };
 
 // src/components/layout/FAQSection.tsx
-var import_clsx22 = __toESM(require("clsx"));
+var import_clsx21 = __toESM(require("clsx"));
 
 // src/components/layout/MarkdownInterpreter.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
@@ -10968,7 +10945,7 @@ var FAQSection = ({
       label: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { id, className: "typography-title-md", children: title }),
       clickOnlyOnHeader: false,
       icon: (expanded) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ExpansionIcon, { isExpanded: expanded, className: "text-primary" }),
-      className: (0, import_clsx22.default)("rounded-xl", expandableClassName),
+      className: (0, import_clsx21.default)("rounded-xl", expandableClassName),
       children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MarkdownInterpreter, { text: content.value }) : content.value })
     },
     id
@@ -10978,7 +10955,7 @@ var FAQSection = ({
 // src/components/layout/FloatingContainer.tsx
 var import_react26 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_clsx23 = require("clsx");
+var import_clsx22 = require("clsx");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var FloatingContainer = (0, import_react26.forwardRef)(function FloatingContainer2({
   children,
@@ -11023,7 +11000,7 @@ var FloatingContainer = (0, import_react26.forwardRef)(function FloatingContaine
             ...position,
             ...props.style
           },
-          className: (0, import_clsx23.clsx)("motion-safe:duration-100 motion-reduce:duration-0", props.className),
+          className: (0, import_clsx22.clsx)("motion-safe:duration-100 motion-reduce:duration-0", props.className),
           children
         }
       )
@@ -11034,7 +11011,7 @@ var FloatingContainer = (0, import_react26.forwardRef)(function FloatingContaine
 
 // src/components/layout/ListBox.tsx
 var import_react27 = __toESM(require("react"));
-var import_clsx24 = require("clsx");
+var import_clsx23 = require("clsx");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var ListBoxContext = (0, import_react27.createContext)(null);
 function useListBoxContext() {
@@ -11077,7 +11054,7 @@ var ListBoxItem = (0, import_react27.forwardRef)(
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-selected": selected ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: (0, import_clsx24.clsx)(
+        className: (0, import_clsx23.clsx)(
           "flex-row-1 items-center px-2 py-1 rounded-md",
           "data-highlighted:bg-primary/20",
           "data-disabled:text-disabled data-disabled:cursor-not-allowed",
@@ -11298,7 +11275,7 @@ var ListBoxUncontrolled = ({
 // src/components/layout/TabView.tsx
 var import_react28 = require("react");
 var import_react29 = require("react");
-var import_clsx25 = __toESM(require("clsx"));
+var import_clsx24 = __toESM(require("clsx"));
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var TabContext = (0, import_react29.createContext)(null);
 function useTabContext() {
@@ -11343,8 +11320,8 @@ function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, .
     buttonRefs.current[nextId]?.focus();
   };
   const value = { active, setActive, register, unregister, tabs };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TabContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...outerDivProps, className: (0, import_clsx25.default)("w-full", props.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "tablist", ...props, className: (0, import_clsx25.default)("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TabContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...outerDivProps, className: (0, import_clsx24.default)("w-full", props.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "tablist", ...props, className: (0, import_clsx24.default)("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "button",
       {
         role: "tab",
@@ -11355,7 +11332,7 @@ function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, .
         ref: (el) => buttonRefs.current[t.id] = el,
         onClick: () => setActive(t.id),
         onKeyDown: (e) => onKeyDown(e, t.id),
-        className: (0, import_clsx25.default)(
+        className: (0, import_clsx24.default)(
           "flex-row-0 grow justify-center px-3 pb-2.25 typography-label-md font-bold border-b-2",
           active === t.id ? "border-primary" : "text-description hover:text-on-background"
         ),
@@ -11389,7 +11366,7 @@ function Tab({ id: customId, label, children, ...props }) {
 }
 
 // src/components/layout/TextImage.tsx
-var import_clsx26 = __toESM(require("clsx"));
+var import_clsx25 = __toESM(require("clsx"));
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var TextImage = ({
   title,
@@ -11415,7 +11392,7 @@ var TextImage = ({
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
-      className: (0, import_clsx26.default)("rounded-2xl w-full", className),
+      className: (0, import_clsx25.default)("rounded-2xl w-full", className),
       style: {
         backgroundImage: `url(${imageUrl})`,
         backgroundSize: "cover"
@@ -11423,9 +11400,9 @@ var TextImage = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "div",
         {
-          className: (0, import_clsx26.default)(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          className: (0, import_clsx25.default)(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
-            badge && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: (0, import_clsx26.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
+            badge && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: (0, import_clsx25.default)(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
             /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex-col-1 overflow-hidden", children: [
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "typography-title-lg", children: title }),
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-ellipsis overflow-hidden", children: description })
@@ -11493,14 +11470,14 @@ var VerticalDivider = ({
 
 // src/components/loading-states/ErrorComponent.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_clsx27 = __toESM(require("clsx"));
+var import_clsx26 = __toESM(require("clsx"));
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var ErrorComponent = ({
   errorText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: (0, import_clsx27.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: (0, import_clsx26.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react8.AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
@@ -11510,14 +11487,14 @@ var ErrorComponent = ({
 var import_react30 = require("react");
 
 // src/components/loading-states/LoadingContainer.tsx
-var import_clsx28 = require("clsx");
+var import_clsx27 = require("clsx");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var LoadingContainer = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: (0, import_clsx28.clsx)("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: (0, import_clsx27.clsx)("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-var import_clsx29 = require("clsx");
+var import_clsx28 = require("clsx");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var LoadingAndErrorComponent = ({
   children,
@@ -11538,34 +11515,34 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingContainer, { className: (0, import_clsx29.clsx)(className) });
+    return loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingContainer, { className: (0, import_clsx28.clsx)(className) });
   }
   if (hasError) {
-    return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingContainer, { className: (0, import_clsx29.clsx)("bg-negative", className) });
+    return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingContainer, { className: (0, import_clsx28.clsx)("bg-negative", className) });
   }
   return children;
 };
 
 // src/components/loading-states/LoadingAnimation.tsx
-var import_clsx30 = __toESM(require("clsx"));
+var import_clsx29 = __toESM(require("clsx"));
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var LoadingAnimation = ({
   loadingText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: (0, import_clsx30.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: (0, import_clsx29.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(HelpwaveLogo, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
 };
 
 // src/components/loading-states/LoadingButton.tsx
-var import_clsx31 = __toESM(require("clsx"));
+var import_clsx30 = __toESM(require("clsx"));
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: (0, import_clsx31.default)("flex-row-2 absolute inset-0 items-center justify-center bg-white/40"), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: (0, import_clsx30.default)("flex-row-2 absolute inset-0 items-center justify-center bg-white/40"), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button, { ...rest, size, disabled: rest.disabled, onClick })
   ] });
 };
@@ -11628,18 +11605,18 @@ var ProgressIndicator = ({
 
 // src/components/navigation/BreadCrumb.tsx
 var import_link = __toESM(require_link2());
-var import_clsx32 = __toESM(require("clsx"));
+var import_clsx31 = __toESM(require("clsx"));
 var import_react31 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: (0, import_clsx32.default)("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: (0, import_clsx31.default)("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react31.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         import_link.default,
         {
           href: crumb.link,
-          className: (0, import_clsx32.default)(
+          className: (0, import_clsx31.default)(
             "btn-sm coloring-text-hover",
             {
               description: !isLast,
@@ -11650,7 +11627,7 @@ var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
           children: crumb.display
         }
       ),
-      !isLast && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_clsx32.default)(`px-1`, "text-description"), children: "/" })
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_clsx31.default)(`px-1`, "text-description"), children: "/" })
     ] }, index);
   }) });
 };
@@ -11660,7 +11637,7 @@ var import_lucide_react9 = require("lucide-react");
 var import_react32 = require("react");
 var import_react33 = require("react");
 var import_link2 = __toESM(require_link2());
-var import_clsx33 = __toESM(require("clsx"));
+var import_clsx32 = __toESM(require("clsx"));
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
@@ -11723,7 +11700,7 @@ var NavigationItemWithSubItem = ({
         },
         onBlur,
         hidden: !isOpen,
-        className: (0, import_clsx33.default)(
+        className: (0, import_clsx32.default)(
           "fixed flex-col-4 p-4 bg-surface text-on-surface shadow-side shadow-hw-bottom rounded-md",
           { "opacity-0": !style }
         ),
@@ -11742,7 +11719,7 @@ var NavigationItemWithSubItem = ({
   ] });
 };
 var NavigationItemList = ({ items, ...restProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { ...restProps, className: (0, import_clsx33.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { ...restProps, className: (0, import_clsx32.default)("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: isSubItem(item) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
   const [isMobileOpen, setIsMobileOpen] = (0, import_react33.useState)(false);
@@ -11757,7 +11734,7 @@ var Navigation = ({ ...props }) => {
       NavigationItemList,
       {
         ...props,
-        className: (0, import_clsx33.default)("hidden", { "desktop:flex": !isMobileOpen }, props.className)
+        className: (0, import_clsx32.default)("hidden", { "desktop:flex": !isMobileOpen }, props.className)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -11787,7 +11764,7 @@ var Navigation = ({ ...props }) => {
             event.stopPropagation();
           }
         },
-        className: (0, import_clsx33.default)(
+        className: (0, import_clsx32.default)(
           "flex-col-8 items-center justify-center fixed inset-0 p-8 w-screen h-screen bg-surface text-on-surface",
           {
             "desktop:hidden": isMobileOpen
@@ -11806,7 +11783,7 @@ var Navigation = ({ ...props }) => {
               children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react9.XIcon, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemList, { ...props, className: (0, import_clsx33.default)("flex-col-8", props.className) })
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NavigationItemList, { ...props, className: (0, import_clsx32.default)("flex-col-8", props.className) })
         ]
       }
     )
@@ -11815,7 +11792,7 @@ var Navigation = ({ ...props }) => {
 
 // src/components/navigation/Pagination.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_clsx34 = __toESM(require("clsx"));
+var import_clsx33 = __toESM(require("clsx"));
 var import_react34 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var Pagination = ({
@@ -11840,7 +11817,7 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_clsx34.default)("flex-row-1", className), style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_clsx33.default)("flex-row-1", className), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Button,
       {
@@ -11868,7 +11845,7 @@ var Pagination = ({
         Input,
         {
           value,
-          className: (0, import_clsx34.default)(
+          className: (0, import_clsx33.default)(
             "w-24 text-center font-bold input-indicator-hidden h-10"
           ),
           type: "number",
@@ -11924,7 +11901,7 @@ var Pagination = ({
 
 // src/components/navigation/StepperBar.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_clsx35 = __toESM(require("clsx"));
+var import_clsx34 = __toESM(require("clsx"));
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var defaultState = {
   currentStep: 0,
@@ -11950,7 +11927,7 @@ var StepperBar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
-      className: (0, import_clsx35.default)("flex-row-2 justify-between", className),
+      className: (0, import_clsx34.default)("flex-row-2 justify-between", className),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           Button,
@@ -11972,7 +11949,7 @@ var StepperBar = ({
             "div",
             {
               onClick: () => seen && update(index),
-              className: (0, import_clsx35.default)(
+              className: (0, import_clsx34.default)(
                 "rounded-full w-4 h-4",
                 {
                   "bg-stepperbar-dot-active hover:brightness-75": index === currentStep && seen && !disabledSteps.has(currentStep),
@@ -12033,24 +12010,25 @@ var import_lucide_react14 = require("lucide-react");
 
 // src/components/user-action/Checkbox.tsx
 var import_lucide_react12 = require("lucide-react");
-var import_clsx36 = __toESM(require("clsx"));
+var import_clsx35 = __toESM(require("clsx"));
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var checkboxSizeMapping = {
-  sm: "size-5 border-1",
-  md: "size-6 border-1",
-  lg: "size-8 border-2"
+  small: "size-5 border-2",
+  medium: "size-6 border-2",
+  large: "size-8 border-2"
 };
 var checkboxIconSizeMapping = {
-  sm: "size-4 stroke-3",
-  md: "size-5 stroke-3",
-  lg: "size-7 stroke-3"
+  small: "size-3.5 stroke-3",
+  medium: "size-4.5 stroke-3",
+  large: "size-6 stroke-3"
 };
 var Checkbox = ({
   disabled,
   checked = false,
   indeterminate = false,
+  invalid = false,
   onCheckedChange,
-  size = "md",
+  size = "medium",
   className = "",
   ...props
 }) => {
@@ -12074,25 +12052,21 @@ var Checkbox = ({
           props.onKeyDown?.(event);
         }
       },
-      className: (0, import_clsx36.default)(
+      className: (0, import_clsx35.default)(
         usedSizeClass,
-        `flex-col-0 items-center justify-center rounded`,
-        {
-          "text-disabled border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
-          "hover:border-primary": !disabled,
-          "bg-input-background": !disabled && !checked,
-          "bg-primary/30 border-primary text-primary": !disabled && (checked || indeterminate)
-        },
         className
       ),
+      "data-name": props["data-name"] ?? "checkbox",
+      "data-value": !indeterminate ? checked : "indeterminate",
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0,
       role: "checkbox",
       "aria-checked": indeterminate ? "mixed" : checked,
       "aria-disabled": disabled,
       tabIndex: disabled ? -1 : 0,
       children: [
-        !checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: (0, import_clsx36.default)("bg-input-background", innerIconSize) }),
-        checked && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react12.Check, { className: innerIconSize }),
-        indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react12.Minus, { className: innerIconSize })
+        !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react12.Check, { className: innerIconSize, "aria-hidden": true }),
+        indeterminate && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react12.Minus, { className: innerIconSize, "aria-hidden": true })
       ]
     }
   );
@@ -12115,7 +12089,7 @@ var CheckboxUncontrolled = ({
 
 // src/components/properties/PropertyBase.tsx
 var import_lucide_react13 = require("lucide-react");
-var import_clsx37 = __toESM(require("clsx"));
+var import_clsx36 = __toESM(require("clsx"));
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var PropertyBase = ({
   name,
@@ -12129,14 +12103,14 @@ var PropertyBase = ({
 }) => {
   const translation = useHightideTranslation();
   const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: (0, import_clsx37.default)("flex-row-0 group", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: (0, import_clsx36.default)("flex-row-0 group", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "div",
       {
-        className: (0, import_clsx37.default)(
+        className: (0, import_clsx36.default)(
           "flex-row-2 max-w-48 min-w-48 px-3 py-2 items-center rounded-l-xl border-2 border-r-0",
           {
-            "bg-property-title-background text-property-title-text group-hover:border-primary": !requiredAndNoValue,
+            "bg-property-title-background text-property-title-text group-hover:border-primary group-focus-within:border-primary": !requiredAndNoValue,
             "bg-warning text-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
           },
           className
@@ -12150,10 +12124,10 @@ var PropertyBase = ({
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "div",
       {
-        className: (0, import_clsx37.default)(
+        className: (0, import_clsx36.default)(
           "flex-row-2 grow px-3 py-2 justify-between items-center rounded-r-xl border-2 border-l-0 min-h-15",
           {
-            "bg-input-background text-input-text group-hover:border-primary": !requiredAndNoValue,
+            "bg-input-background text-input-text group-hover:border-primary group-focus-within:border-primary": !requiredAndNoValue,
             "bg-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
           },
           className
@@ -12167,7 +12141,7 @@ var PropertyBase = ({
               onClick: onRemove,
               color: "negative",
               coloringStyle: "text",
-              className: (0, import_clsx37.default)("items-center"),
+              className: (0, import_clsx36.default)("items-center"),
               disabled: !hasValue,
               children: translation("remove")
             }
@@ -12215,7 +12189,7 @@ var CheckboxProperty = ({
 
 // src/components/properties/DateProperty.tsx
 var import_lucide_react15 = require("lucide-react");
-var import_clsx38 = __toESM(require("clsx"));
+var import_clsx37 = __toESM(require("clsx"));
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var DateProperty = ({
   value,
@@ -12236,7 +12210,7 @@ var DateProperty = ({
       input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         Input,
         {
-          className: (0, import_clsx38.default)("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
+          className: (0, import_clsx37.default)("default-style-none focus-style-none", { "bg-surface-warning": softRequired && !hasValue }),
           value: dateText,
           type: type === "dateTime" ? "datetime-local" : "date",
           readOnly,
@@ -12258,7 +12232,7 @@ var DateProperty = ({
 
 // src/components/properties/MultiSelectProperty.tsx
 var import_lucide_react16 = require("lucide-react");
-var import_clsx39 = __toESM(require("clsx"));
+var import_clsx38 = __toESM(require("clsx"));
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var MultiSelectProperty = ({
   children,
@@ -12280,14 +12254,15 @@ var MultiSelectProperty = ({
           onValuesChanged,
           disabled: props.readOnly,
           contentPanelProps: {
-            className: (0, import_clsx39.default)(
+            className: (0, import_clsx38.default)(
               "!border-none !min-h-10"
             )
           },
           chipDisplayProps: {
-            className: (0, import_clsx39.default)({
-              "!bg-warning !text-surface-warning": softRequired && !hasValue
-            })
+            className: (0, import_clsx38.default)(
+              "default-style-none flex flex-wrap gap-x-2 gap-y-2 items-center hover:cursor-pointer",
+              { "!bg-warning text-surface-warning": softRequired && !hasValue }
+            )
           },
           children
         }
@@ -12298,7 +12273,7 @@ var MultiSelectProperty = ({
 
 // src/components/properties/NumberProperty.tsx
 var import_lucide_react17 = require("lucide-react");
-var import_clsx40 = __toESM(require("clsx"));
+var import_clsx39 = __toESM(require("clsx"));
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var NumberProperty = ({
   value,
@@ -12323,12 +12298,12 @@ var NumberProperty = ({
         /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           "div",
           {
-            className: (0, import_clsx40.default)("relative flex-row-2 max-w-56", { "text-warning": softRequired && !hasValue }),
+            className: (0, import_clsx39.default)("relative flex-row-2 max-w-56", { "text-warning": softRequired && !hasValue }),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 Input,
                 {
-                  className: (0, import_clsx40.default)("!ring-0 !border-0 !outline-0 !py-0 pl-0 pr-8 !m-0 !shadow-none !rounded-none w-full", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
+                  className: (0, import_clsx39.default)("default-style-none focus-style-none w-full pr-8", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
                   value: value?.toString() ?? "",
                   type: "number",
                   readOnly,
@@ -12354,7 +12329,7 @@ var NumberProperty = ({
               suffix && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 "span",
                 {
-                  className: (0, import_clsx40.default)(
+                  className: (0, import_clsx39.default)(
                     "absolute top-1/2 -translate-y-1/2 right-2",
                     { "bg-surface-warning": softRequired && !hasValue }
                   ),
@@ -12371,7 +12346,7 @@ var NumberProperty = ({
 
 // src/components/properties/SelectProperty.tsx
 var import_lucide_react18 = require("lucide-react");
-var import_clsx41 = __toESM(require("clsx"));
+var import_clsx40 = __toESM(require("clsx"));
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var SingleSelectProperty = ({
   children,
@@ -12394,8 +12369,8 @@ var SingleSelectProperty = ({
           onValueChanged,
           disabled: props.readOnly,
           buttonProps: {
-            className: (0, import_clsx41.default)(
-              "border-none w-full",
+            className: (0, import_clsx40.default)(
+              "default-style-none focus-style-none flex-row-2 w-full items-center",
               {
                 "!bg-warning !text-surface-warning": softRequired && !hasValue
               }
@@ -12411,11 +12386,11 @@ var SingleSelectProperty = ({
 
 // src/components/properties/TextProperty.tsx
 var import_lucide_react19 = require("lucide-react");
-var import_clsx43 = __toESM(require("clsx"));
+var import_clsx42 = __toESM(require("clsx"));
 
 // src/components/user-action/Textarea.tsx
 var import_react36 = require("react");
-var import_clsx42 = __toESM(require("clsx"));
+var import_clsx41 = __toESM(require("clsx"));
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var Textarea = (0, import_react36.forwardRef)(function Textarea2({
   id,
@@ -12424,10 +12399,8 @@ var Textarea = (0, import_react36.forwardRef)(function Textarea2({
   onBlur,
   onEditCompleted,
   saveDelayOptions,
-  defaultStyle = true,
   invalid = false,
   disabled = false,
-  className,
   ...props
 }, ref) {
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
@@ -12438,18 +12411,10 @@ var Textarea = (0, import_react36.forwardRef)(function Textarea2({
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "textarea",
     {
+      ...props,
       ref,
       id,
-      className: (0, import_clsx42.default)(
-        "resize-none w-full h-32 overflow-y-scroll",
-        "py-2 px-3 rounded-md border-2 border-transparent focus-style-none",
-        {
-          "bg-input-background text-input-text hover:border-primary focus:border-primary": !disabled && !invalid,
-          "bg-negative/20 text-negative hover:border-negative focus-visible:border-negative": invalid && !disabled && defaultStyle,
-          "text-disabled bg-disabled-background border-disabled-border": disabled && defaultStyle
-        },
-        className
-      ),
+      disabled,
       onChange: (event) => {
         const value = event.target.value;
         restartTimer(() => {
@@ -12462,8 +12427,10 @@ var Textarea = (0, import_react36.forwardRef)(function Textarea2({
         onBlur?.(event);
         onEditCompletedWrapper(event.target.value);
       },
-      disabled,
-      ...props
+      "data-name": props["data-name"] ?? "textarea",
+      "data-value": props.value ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0
     }
   );
 });
@@ -12496,7 +12463,7 @@ var TextareaWithHeadline = ({
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "div",
     {
-      className: (0, import_clsx42.default)(
+      className: (0, import_clsx41.default)(
         "group flex-col-3 border-2 rounded-lg",
         {
           "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
@@ -12511,11 +12478,10 @@ var TextareaWithHeadline = ({
           {
             ...props,
             id: usedId,
-            className: (0, import_clsx42.default)(
+            className: (0, import_clsx41.default)(
               "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
               className
-            ),
-            defaultStyle: false
+            )
           }
         )
       ]
@@ -12545,11 +12511,11 @@ var TextProperty = ({
       input: ({ softRequired }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         Textarea,
         {
-          className: (0, import_clsx43.default)({
-            "bg-surface-warning placeholder-warning": softRequired && !hasValue
-          }),
+          className: (0, import_clsx42.default)(
+            "default-style-none focus-style-none w-full",
+            { "bg-surface-warning placeholder-warning": softRequired && !hasValue }
+          ),
           rows: 5,
-          defaultStyle: false,
           value: value ?? "",
           readOnly,
           placeholder: `${translation("text")}...`,
@@ -12574,12 +12540,12 @@ var TextProperty = ({
 };
 
 // src/components/table/FillerRowElement.tsx
-var import_clsx44 = require("clsx");
+var import_clsx43 = require("clsx");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var FillerRowElement = ({
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: (0, import_clsx44.clsx)("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: (0, import_clsx43.clsx)("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
 };
 
 // src/components/table/Filter.ts
@@ -12598,17 +12564,17 @@ var TableFilters = {
 
 // src/components/table/Table.tsx
 var import_react42 = require("react");
-var import_clsx48 = __toESM(require("clsx"));
+var import_clsx47 = __toESM(require("clsx"));
 var import_react_table = require("@tanstack/react-table");
 
 // src/components/table/TableCell.tsx
-var import_clsx45 = require("clsx");
+var import_clsx44 = require("clsx");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: (0, import_clsx45.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: (0, import_clsx44.clsx)("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
@@ -12624,7 +12590,7 @@ var useResizeCallbackWrapper = (callback) => {
 
 // src/components/table/TableSortButton.tsx
 var import_lucide_react20 = require("lucide-react");
-var import_clsx46 = __toESM(require("clsx"));
+var import_clsx45 = __toESM(require("clsx"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var TableSortButton = ({
   sortDirection,
@@ -12648,7 +12614,7 @@ var TableSortButton = ({
       layout: "icon",
       color,
       size,
-      className: (0, import_clsx46.default)(className),
+      className: (0, import_clsx45.default)(className),
       ...buttonProps,
       children: icon
     }
@@ -12660,7 +12626,7 @@ var import_lucide_react21 = require("lucide-react");
 
 // src/components/user-action/Menu.tsx
 var import_react40 = require("react");
-var import_clsx47 = __toESM(require("clsx"));
+var import_clsx46 = __toESM(require("clsx"));
 
 // src/utils/bagFunctions.ts
 var resolve = (children, bag) => {
@@ -12805,7 +12771,7 @@ var MenuItem = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
   "div",
   {
-    className: (0, import_clsx47.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+    className: (0, import_clsx46.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
       "text-right": alignment === "right",
       "text-left": alignment === "left",
       "text-disabled cursor-not-allowed": isDisabled,
@@ -12879,7 +12845,7 @@ var Menu = ({
       {
         ref: menuRef,
         onClick: (e) => e.stopPropagation(),
-        className: (0, import_clsx47.default)(
+        className: (0, import_clsx46.default)(
           "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
           {
             "animate-pop-in": isOpen,
@@ -13229,12 +13195,12 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { ref, className: (0, import_clsx48.default)("flex-col-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: (0, import_clsx48.default)("flex-col-0 w-full overflow-auto", tableContainerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { ref, className: (0, import_clsx47.default)("flex-col-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: (0, import_clsx47.default)("flex-col-0 w-full overflow-auto", tableContainerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
       "table",
       {
         ref: tableRef,
-        className: (0, import_clsx48.default)(tableClassName),
+        className: (0, import_clsx47.default)(tableClassName),
         style: {
           ...columnSizeVars,
           width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
@@ -13256,7 +13222,7 @@ var Table = ({
               "th",
               {
                 colSpan: header.colSpan,
-                className: (0, import_clsx48.default)("relative group", header.column.columnDef.meta?.className),
+                className: (0, import_clsx47.default)("relative group", header.column.columnDef.meta?.className),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex-row-1 items-center", children: [
                     header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
@@ -13427,7 +13393,7 @@ var TableWithSelection = ({
       },
       meta: {
         ...meta,
-        bodyRowClassName: (0, import_clsx48.default)(
+        bodyRowClassName: (0, import_clsx47.default)(
           { "cursor-pointer": !disableClickRowClickSelection },
           meta?.bodyRowClassName
         )
@@ -13439,7 +13405,7 @@ var TableWithSelection = ({
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
 var import_react43 = require("react");
-var import_clsx49 = require("clsx");
+var import_clsx48 = require("clsx");
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -13482,7 +13448,7 @@ var CopyToClipboardWrapper = ({
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
-      className: (0, import_clsx49.clsx)("relative inline-block cursor-copy", containerClassName),
+      className: (0, import_clsx48.clsx)("relative inline-block cursor-copy", containerClassName),
       onMouseEnter: () => {
         setIsShowingIndication(true);
       },
@@ -13500,7 +13466,7 @@ var CopyToClipboardWrapper = ({
         /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
           "div",
           {
-            className: (0, import_clsx49.clsx)(
+            className: (0, import_clsx48.clsx)(
               `absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
            shadow-around-md bg-tooltip-background cursor-default pointer-events-none`,
               "transition-opacity duration-200",
@@ -13523,7 +13489,7 @@ var CopyToClipboardWrapper = ({
               /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx49.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: (0, import_clsx48.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -13536,7 +13502,7 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-var import_clsx50 = __toESM(require("clsx"));
+var import_clsx49 = __toESM(require("clsx"));
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var DateTimePicker = ({
   value = /* @__PURE__ */ new Date(),
@@ -13573,7 +13539,7 @@ var DateTimePicker = ({
       TimePicker,
       {
         ...timePickerProps,
-        className: (0, import_clsx50.default)("min-h-71 max-h-71", { "justify-between w-full": mode === "time" }),
+        className: (0, import_clsx49.default)("min-h-71 max-h-71", { "justify-between w-full": mode === "time" }),
         time: value,
         onChange
       }
@@ -13600,7 +13566,7 @@ var DateTimePicker = ({
 
 // src/components/user-action/ScrollPicker.tsx
 var import_react44 = require("react");
-var import_clsx51 = __toESM(require("clsx"));
+var import_clsx50 = __toESM(require("clsx"));
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
@@ -13770,7 +13736,7 @@ var ScrollPicker = ({
             children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               "div",
               {
-                className: (0, import_clsx51.default)(
+                className: (0, import_clsx50.default)(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -13796,42 +13762,9 @@ var ScrollPicker = ({
   );
 };
 
-// src/components/user-action/SearchBar.tsx
-var import_lucide_react23 = require("lucide-react");
-var import_clsx52 = require("clsx");
-var import_jsx_runtime64 = require("react/jsx-runtime");
-var SearchBar = ({
-  placeholder,
-  onSearch,
-  disableOnSearch,
-  containerClassName,
-  ...inputProps
-}) => {
-  const translation = useHightideTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: (0, import_clsx52.clsx)("flex-row-2 justify-between items-center", containerClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-      Input,
-      {
-        ...inputProps,
-        placeholder: placeholder ?? translation("search")
-      }
-    ),
-    onSearch && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-      Button,
-      {
-        layout: "icon",
-        color: "neutral",
-        disabled: disableOnSearch,
-        onClick: onSearch,
-        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react23.Search, { className: "w-full h-full" })
-      }
-    )
-  ] });
-};
-
 // src/components/user-action/Tooltip.tsx
-var import_clsx53 = require("clsx");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_clsx51 = require("clsx");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var Tooltip = ({
   tooltip,
   children,
@@ -13861,17 +13794,17 @@ var Tooltip = ({
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
   const zIndex = useZIndexRegister(isHovered);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
     "div",
     {
-      className: (0, import_clsx53.clsx)("relative inline-block", containerClassName),
+      className: (0, import_clsx51.clsx)("relative inline-block", containerClassName),
       ...handlers,
       children: [
         children,
-        isHovered && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+        isHovered && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
           "div",
           {
-            className: (0, import_clsx53.clsx)(
+            className: (0, import_clsx51.clsx)(
               `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
            animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,
               positionClasses[position],
@@ -13880,10 +13813,10 @@ var Tooltip = ({
             style: { zIndex, animationDelay: animationDelay + "ms" },
             children: [
               tooltip,
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx53.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: (0, import_clsx51.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -13898,8 +13831,8 @@ var Tooltip = ({
 // src/components/user-action/input/InsideLabelInput.tsx
 var import_react45 = require("react");
 var import_react46 = require("react");
-var import_clsx54 = __toESM(require("clsx"));
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_clsx52 = __toESM(require("clsx"));
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var InsideLabelInput = (0, import_react46.forwardRef)(function InsideLabelInput2({
   id: customId,
   label,
@@ -13909,13 +13842,13 @@ var InsideLabelInput = (0, import_react46.forwardRef)(function InsideLabelInput2
   const [isFocused, setIsFocused] = (0, import_react46.useState)(false);
   const generatedId = (0, import_react45.useId)();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: (0, import_clsx54.default)("relative"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: (0, import_clsx52.default)("relative"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       Input,
       {
         ...props,
         id,
-        className: (0, import_clsx54.default)("h-14 px-4 pb-2 py-6.5", props.className),
+        className: (0, import_clsx52.default)("h-14 px-4 pb-2 py-6.5", props.className),
         ref: forwardedRef,
         "aria-labelledby": id + "-label",
         onFocus: (event) => {
@@ -13928,13 +13861,13 @@ var InsideLabelInput = (0, import_react46.forwardRef)(function InsideLabelInput2
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: (0, import_clsx54.default)(
+        className: (0, import_clsx52.default)(
           // margin left to account for the border which is ignored for absolute positions
           "absolute left-4 ml-0.5 top-2 transition-all delay-25 pointer-events-none touch-none",
           "data-[display=small]:top-2 data-[display=small]:h-force-4.5 data-[display=small]:typography-caption-sm data-[display=small]:overflow-y-hidden",
@@ -13950,7 +13883,7 @@ var InsideLabelInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, props.onChangeText);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     InsideLabelInput,
     {
       ...props,
@@ -13960,10 +13893,46 @@ var InsideLabelInputUncontrolled = ({
   );
 };
 
+// src/components/user-action/input/SearchBar.tsx
+var import_lucide_react23 = require("lucide-react");
+var import_clsx53 = require("clsx");
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var SearchBar = ({
+  onSearch,
+  searchButtonProps,
+  containerProps,
+  ...inputProps
+}) => {
+  const translation = useHightideTranslation();
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ...containerProps, className: (0, import_clsx53.clsx)("relative", containerProps?.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      InputUncontrolled,
+      {
+        ...inputProps,
+        placeholder: inputProps.placeholder ?? translation("search"),
+        className: (0, import_clsx53.clsx)("pr-10 w-full", inputProps.className)
+      }
+    ),
+    onSearch && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      Button,
+      {
+        ...searchButtonProps,
+        size: "small",
+        layout: "icon",
+        color: "neutral",
+        coloringStyle: "text",
+        onClick: (event) => onSearch(event),
+        className: (0, import_clsx53.clsx)("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_lucide_react23.Search, { className: "w-full h-full" })
+      }
+    )
+  ] });
+};
+
 // src/components/user-action/input/ToggleableInput.tsx
 var import_react47 = require("react");
 var import_lucide_react24 = require("lucide-react");
-var import_clsx55 = __toESM(require("clsx"));
+var import_clsx54 = __toESM(require("clsx"));
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var ToggleableInput = (0, import_react47.forwardRef)(function ToggleableInput2({
   value,
@@ -13979,7 +13948,7 @@ var ToggleableInput = (0, import_react47.forwardRef)(function ToggleableInput2({
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: (0, import_clsx55.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: (0, import_clsx54.default)("relative flex-row-2", { "flex-1": isEditing }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       Input,
       {
@@ -13999,16 +13968,16 @@ var ToggleableInput = (0, import_react47.forwardRef)(function ToggleableInput2({
           ...editCompleteOptions,
           allowEnterComplete: true
         },
-        className: (0, import_clsx55.default)(`w-full ring-0 outline-0 decoration-primary underline-offset-4`, {
-          "underline": isEditing,
+        "data-name": props["data-name"] ?? "togglable-input",
+        "data-isEditing": isEditing ? "" : void 0,
+        className: (0, import_clsx54.default)(`w-full rounded-md`, {
           "text-transparent": !isEditing
-        }),
-        defaultStyle: false
+        })
       }
     ),
     !isEditing && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: (0, import_clsx55.default)(" truncate"), children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react24.Pencil, { className: (0, import_clsx55.default)(`size-force-4`, { "text-transparent": isEditing }) })
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: (0, import_clsx54.default)(" truncate"), children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_lucide_react24.Pencil, { className: (0, import_clsx54.default)(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });