@helpwave/hightide 0.3.0 → 0.4.0

package/dist/index.mjs

@@ -7306,7 +7306,7 @@ var ButtonUtil = {
     warning: "warning",
     negative: "negative",
     neutral: "neutral",
-    none: ""
+    none: "reset-coloring-variables"
   }
 };
 var Button = forwardRef(function SolidButton({
@@ -8448,7 +8448,6 @@ var DiscardChangesDialog = ({
 
 // src/components/user-action/input/Input.tsx
 import { forwardRef as forwardRef3, useImperativeHandle, useRef as useRef5 } from "react";
-import clsx11 from "clsx";
 
 // src/hooks/useDelay.ts
 import { useEffect as useEffect12, useState as useState11 } from "react";
@@ -8563,8 +8562,6 @@ var Input = forwardRef3(function Input2({
   editCompleteOptions,
   disabled = false,
   invalid = false,
-  defaultStyle = true,
-  className,
   ...props
 }, forwardedRef) {
   const {
@@ -8587,15 +8584,6 @@ var Input = forwardRef3(function Input2({
       ref: innerRef,
       value,
       disabled,
-      className: defaultStyle ? clsx11(
-        "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) {
@@ -8624,6 +8612,10 @@ var Input = forwardRef3(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
     }
@@ -8675,7 +8667,7 @@ import {
   useRef as useRef6,
   useState as useState13
 } from "react";
-import clsx13 from "clsx";
+import clsx12 from "clsx";
 
 // src/utils/match.ts
 var match = (key, values) => {
@@ -8686,7 +8678,7 @@ var match = (key, values) => {
 import { CheckIcon, Plus, XIcon } from "lucide-react";
 
 // src/components/layout/Chip.tsx
-import clsx12 from "clsx";
+import clsx11 from "clsx";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var chipColors = ButtonUtil.colors;
 var ChipUtil = {
@@ -8706,7 +8698,7 @@ var Chip = ({
     "div",
     {
       ...restProps,
-      className: clsx12(
+      className: clsx11(
         `flex-row-0 w-fit font-semibold coloring-solid`,
         colorMapping,
         {
@@ -8731,7 +8723,7 @@ var ChipList = ({
   list,
   className = ""
 }) => {
-  return /* @__PURE__ */ jsx15("div", { className: clsx12("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx15("div", { className: clsx11("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ jsx15(
     Chip,
     {
       ...value,
@@ -9091,7 +9083,7 @@ var SelectOption = forwardRef4(
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-selected": isSelected ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: clsx13(
+        className: clsx12(
           "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",
@@ -9117,7 +9109,7 @@ var SelectOption = forwardRef4(
           iconAppearance === "left" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ jsx16(
             CheckIcon,
             {
-              className: clsx13("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              className: clsx12("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           ),
@@ -9125,7 +9117,7 @@ var SelectOption = forwardRef4(
           iconAppearance === "right" && (state.value.length > 0 || config.isMultiSelect) && /* @__PURE__ */ jsx16(
             CheckIcon,
             {
-              className: clsx13("w-4 h-4", { "opacity-0": !isSelected || disabled }),
+              className: clsx12("w-4 h-4", { "opacity-0": !isSelected || disabled }),
               "aria-hidden": true
             }
           )
@@ -9173,19 +9165,8 @@ var SelectButton = forwardRef4(function SelectButton2({ placeholder, selectedDis
             break;
         }
       },
-      className: clsx13(
-        "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,
@@ -9194,21 +9175,11 @@ var SelectButton = forwardRef4(function SelectButton2({ placeholder, selectedDis
       "aria-expanded": state.isOpen,
       "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
       children: [
-        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ jsx16("div", { className: clsx13("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ jsxs11("span", { className: "flex-row-0", children: [
+        hasValue ? selectedDisplay?.(state.value) ?? /* @__PURE__ */ jsx16("div", { className: clsx12("flex flex-wrap gap-x-1 gap-y-2"), children: state.selectedOptions.map(({ value, label }, index) => /* @__PURE__ */ jsxs11("span", { className: "flex-row-0", children: [
           label,
           index < state.value.length - 1 && /* @__PURE__ */ jsx16("span", { children: "," })
         ] }, value)) }) : placeholder ?? translation("clickToSelect"),
-        /* @__PURE__ */ jsx16(
-          ExpansionIcon,
-          {
-            isExpanded: state.isOpen,
-            className: clsx13({
-              "text-input-text": !disabled && !invalid,
-              "text-negative": !disabled && invalid,
-              "text-disabled": disabled
-            })
-          }
-        )
+        /* @__PURE__ */ jsx16(ExpansionIcon, { isExpanded: state.isOpen })
       ]
     }
   );
@@ -9229,10 +9200,12 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
     {
       ...props,
       ref: innerRef,
-      className: clsx13(
-        "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,
@@ -9246,11 +9219,11 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
               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__ */ jsx16(XIcon, { className: "w-5 h-5" })
+              className: "flex-row-0 items-center",
+              children: /* @__PURE__ */ jsx16(XIcon, { className: "size-5" })
             }
           )
         ] }, value)),
@@ -9258,7 +9231,10 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
           Button,
           {
             id: state.id,
-            onClick: () => toggleOpen(),
+            onClick: (event) => {
+              event.stopPropagation();
+              toggleOpen();
+            },
             onKeyDown: (event) => {
               switch (event.key) {
                 case "ArrowDown":
@@ -9276,6 +9252,7 @@ var SelectChipDisplay = forwardRef4(function SelectChipDisplay2({ ...props }, re
             "aria-haspopup": "listbox",
             "aria-expanded": state.isOpen,
             "aria-controls": state.isOpen ? `${state.id}-listbox` : void 0,
+            className: "size-9",
             children: /* @__PURE__ */ jsx16(Plus, {})
           }
         )
@@ -9309,7 +9286,7 @@ var SelectContent = forwardRef4(
         "div",
         {
           id: `select-container-${state.id}`,
-          className: clsx13("fixed inset-0 w-screen h-screen", containerClassName),
+          className: clsx12("fixed inset-0 w-screen h-screen", containerClassName),
           style: { zIndex },
           hidden: !state.isOpen,
           children: [
@@ -9318,7 +9295,7 @@ var SelectContent = forwardRef4(
               {
                 id: `select-background-${state.id}`,
                 onClick: () => trigger.toggleOpen(false),
-                className: clsx13("fixed inset-0 w-screen h-screen")
+                className: clsx12("fixed inset-0 w-screen h-screen")
               }
             ),
             /* @__PURE__ */ jsx16(
@@ -9367,7 +9344,7 @@ var SelectContent = forwardRef4(
                       break;
                   }
                 },
-                className: clsx13("flex-col-0 p-2 bg-menu-background text-menu-text rounded-md shadow-hw-bottom focus-style-within overflow-auto", props.className),
+                className: clsx12("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",
@@ -9517,7 +9494,7 @@ var LanguageDialog = ({
 
 // src/components/dialog/ThemeDialog.tsx
 import { MonitorCog, MoonIcon, SunIcon } from "lucide-react";
-import clsx14 from "clsx";
+import clsx13 from "clsx";
 
 // src/theming/useTheme.tsx
 import { createContext as createContext3, useCallback as useCallback7, useContext as useContext3, useEffect as useEffect15, useMemo as useMemo4, useState as useState14 } from "react";
@@ -9607,11 +9584,11 @@ var useTheme = () => {
 import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var ThemeIcon = ({ theme, className }) => {
   if (theme === "dark") {
-    return /* @__PURE__ */ jsx19(MoonIcon, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx19(MoonIcon, { className: clsx13("w-4 h-4", className) });
   } else if (theme === "light") {
-    return /* @__PURE__ */ jsx19(SunIcon, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx19(SunIcon, { className: clsx13("w-4 h-4", className) });
   } else {
-    return /* @__PURE__ */ jsx19(MonitorCog, { className: clsx14("w-4 h-4", className) });
+    return /* @__PURE__ */ jsx19(MonitorCog, { className: clsx13("w-4 h-4", className) });
   }
 };
 var ThemeDialog = ({
@@ -9657,10 +9634,10 @@ var ThemeDialog = ({
 
 // src/components/form/FormElementWrapper.tsx
 import { useId as useId5 } from "react";
-import { clsx as clsx16 } from "clsx";
+import { clsx as clsx15 } from "clsx";
 
 // src/components/user-action/Label.tsx
-import clsx15 from "clsx";
+import clsx14 from "clsx";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var styleMapping = {
   md: "typography-label-md color-label-text",
@@ -9672,7 +9649,7 @@ var Label = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx20("label", { ...props, className: clsx15(styleMapping[size], className), children });
+  return /* @__PURE__ */ jsx20("label", { ...props, className: clsx14(styleMapping[size], className), children });
 };
 
 // src/components/form/FormElementWrapper.tsx
@@ -9723,7 +9700,7 @@ var FormElementWrapper = ({
     "aria-invalid": !!error,
     "aria-errormessage": error ? errorId : void 0
   };
-  return /* @__PURE__ */ jsxs14("div", { className: clsx16("relative flex flex-col gap-y-1", containerClassName), children: [
+  return /* @__PURE__ */ jsxs14("div", { className: clsx15("relative flex flex-col gap-y-1", containerClassName), children: [
     label && /* @__PURE__ */ jsxs14(
       Label,
       {
@@ -9731,7 +9708,7 @@ var FormElementWrapper = ({
         id: labelId,
         htmlFor: usedId,
         size: "lg",
-        className: clsx16("flex-row-1 items-start", labelProps?.className),
+        className: clsx15("flex-row-1 items-start", labelProps?.className),
         children: [
           label,
           required && /* @__PURE__ */ jsx21("div", { role: "none", className: "bg-primary w-2 h-2 rounded-full" })
@@ -9743,7 +9720,7 @@ var FormElementWrapper = ({
       {
         ...descriptionProps,
         id: descriptionId,
-        className: clsx16("text-description text-sm", descriptionProps?.className),
+        className: clsx15("text-description text-sm", descriptionProps?.className),
         children: description
       }
     ),
@@ -9753,7 +9730,7 @@ var FormElementWrapper = ({
       {
         ...errorProps,
         id: errorId,
-        className: clsx16("absolute top-[calc(100%_+_0.25rem)] left-0 text-negative text-sm font-medium", errorProps?.className),
+        className: clsx15("absolute top-[calc(100%_+_0.25rem)] left-0 text-negative text-sm font-medium", errorProps?.className),
         role: "alert",
         "aria-hidden": !error,
         "aria-live": "polite",
@@ -9764,7 +9741,7 @@ var FormElementWrapper = ({
 };
 
 // src/components/icons-and-geometry/Avatar.tsx
-import clsx17 from "clsx";
+import clsx16 from "clsx";
 import { useMemo as useMemo5, useState as useState15 } from "react";
 import { UserIcon } from "lucide-react";
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -9814,7 +9791,7 @@ var Avatar = ({
   return /* @__PURE__ */ jsxs15(
     "div",
     {
-      className: clsx17(
+      className: clsx16(
         `relative flex-row-0 items-center justify-center bg-primary text-on-primary`,
         rounding,
         className
@@ -9826,7 +9803,7 @@ var Avatar = ({
           {
             src: image?.avatarUrl,
             alt: image?.alt,
-            className: clsx17(rounding, { "absolute left-0 top-0 -translate-1/2 opacity-0 z-1 ": !isLoaded || hasError }),
+            className: clsx16(rounding, { "absolute left-0 top-0 -translate-1/2 opacity-0 z-1 ": !isLoaded || hasError }),
             onLoad: () => setIsLoaded(true),
             onError: () => setHasError(true)
           }
@@ -9860,7 +9837,7 @@ var AvatarGroup = ({
             ...avatar,
             size,
             fullyRounded,
-            className: clsx17("shadow-side shadow-r-4 shadow-hard", avatar.className)
+            className: clsx16("shadow-side shadow-r-4 shadow-hard", avatar.className)
           }
         )
       },
@@ -9869,7 +9846,7 @@ var AvatarGroup = ({
     showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ jsx22(
       "div",
       {
-        className: clsx17(textClassNameMapping[size], "flex-row-2 truncate items-center"),
+        className: clsx16(textClassNameMapping[size], "flex-row-2 truncate items-center"),
         children: /* @__PURE__ */ jsxs15("span", { children: [
           "+ ",
           notDisplayedProfiles
@@ -9880,7 +9857,7 @@ var AvatarGroup = ({
 };
 
 // src/components/icons-and-geometry/Circle.tsx
-import clsx18 from "clsx";
+import clsx17 from "clsx";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var Circle = ({
   radius = 20,
@@ -9892,7 +9869,7 @@ var Circle = ({
   return /* @__PURE__ */ jsx23(
     "div",
     {
-      className: clsx18(`rounded-full`, className),
+      className: clsx17(`rounded-full`, className),
       style: {
         width: `${size}px`,
         height: `${size}px`,
@@ -9905,7 +9882,7 @@ var Circle = ({
 
 // src/components/icons-and-geometry/Ring.tsx
 import { useCallback as useCallback8, useEffect as useEffect16, useState as useState16 } from "react";
-import clsx19 from "clsx";
+import clsx18 from "clsx";
 import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 var Ring = ({
   innerSize = 20,
@@ -9915,7 +9892,7 @@ var Ring = ({
   return /* @__PURE__ */ jsx24(
     "div",
     {
-      className: clsx19(`bg-transparent rounded-full outline`, className),
+      className: clsx18(`bg-transparent rounded-full outline`, className),
       style: {
         width: `${innerSize}px`,
         height: `${innerSize}px`,
@@ -10054,7 +10031,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle1 / 2,
-            className: clsx19(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
+            className: clsx18(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`
@@ -10068,7 +10045,7 @@ var RadialRings = ({
             width: (sizeCircle2 - sizeCircle1) / 2,
             onAnimationFinished: () => currentRing === 0 ? setCurrentRing(1) : null,
             repeating: true,
-            className: clsx19(
+            className: clsx18(
               circle2ClassName,
               { "opacity-5": currentRing !== 0 }
             ),
@@ -10088,7 +10065,7 @@ var RadialRings = ({
             endInnerSize: sizeCircle2,
             width: waveWidth,
             repeating: true,
-            className: clsx19(waveBaseColor, `opacity-5`),
+            className: clsx18(waveBaseColor, `opacity-5`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10102,7 +10079,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle2 / 2,
-            className: clsx19(
+            className: clsx18(
               circle2ClassName,
               { "opacity-20": currentRing < 1 },
               `absolute z-[8] -translate-y-1/2 -translate-x-1/2`
@@ -10120,7 +10097,7 @@ var RadialRings = ({
             width: (sizeCircle3 - sizeCircle2) / 2,
             onAnimationFinished: () => currentRing === 1 ? setCurrentRing(2) : null,
             repeating: true,
-            className: clsx19(circle3ClassName),
+            className: clsx18(circle3ClassName),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10137,7 +10114,7 @@ var RadialRings = ({
             endInnerSize: sizeCircle3 - waveWidth,
             width: waveWidth,
             repeating: true,
-            className: clsx19(waveBaseColor, `opacity-5`),
+            className: clsx18(waveBaseColor, `opacity-5`),
             style: {
               left: `${size / 2}px`,
               top: `${size / 2}px`,
@@ -10151,7 +10128,7 @@ var RadialRings = ({
           Circle,
           {
             radius: sizeCircle3 / 2,
-            className: clsx19(
+            className: clsx18(
               circle3ClassName,
               { "opacity-20": currentRing < 2 },
               `absolute z-[6] -translate-y-1/2 -translate-x-1/2`
@@ -10199,7 +10176,7 @@ import {
   useRef as useRef7,
   useState as useState17
 } from "react";
-import clsx20 from "clsx";
+import clsx19 from "clsx";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Fragment, jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var CarouselContext = createContext4(null);
@@ -10245,7 +10222,7 @@ function CarouselTabs({
             ref: (el) => tabRefs.current[index] = el,
             onClick: () => onChange(index),
             onKeyDown: (e) => handleKeyDown(e, index),
-            className: clsx20(
+            className: clsx19(
               "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,
@@ -10279,7 +10256,7 @@ var CarouselSlide = forwardRef5(
         ...props,
         ref,
         id: `${id}-slide-${index}`,
-        className: clsx20("focus-style-none group/slide", props.className),
+        className: clsx19("focus-style-none group/slide", props.className),
         tabIndex: isSelected ? 0 : void 0,
         role: "group",
         "aria-roledescription": translation("slide"),
@@ -10428,7 +10405,7 @@ var Carousel = ({
     {
       ref: carouselContainerRef,
       ...props,
-      className: clsx20("flex-col-2 items-center w-full", props.className),
+      className: clsx19("flex-col-2 items-center w-full", props.className),
       id,
       role: "region",
       "aria-roledescription": translation("slide"),
@@ -10437,7 +10414,7 @@ var Carousel = ({
           "div",
           {
             ...slideContainerProps,
-            className: clsx20(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
+            className: clsx19(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
             children: [
               hintNext ? /* @__PURE__ */ jsxs17(
                 "div",
@@ -10446,7 +10423,7 @@ var Carousel = ({
                   onPointerMove: handlePointerMove,
                   onPointerUp: handlePointerUp,
                   onPointerLeave: handlePointerUp,
-                  className: clsx20(`flex-row-2 relative h-full`, heightClassName),
+                  className: clsx19(`flex-row-2 relative h-full`, heightClassName),
                   children: [
                     /* @__PURE__ */ jsx26("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
                       item,
@@ -10459,7 +10436,7 @@ var Carousel = ({
                           ref: isInItems ? slideRefs[index] : void 0,
                           index,
                           isSelected: isInItems && currentIndex === index,
-                          className: clsx20(
+                          className: clsx19(
                             `absolute left-[50%] h-full overflow-hidden transition-transform ease-in-out`,
                             slideClassName
                           ),
@@ -10476,13 +10453,13 @@ var Carousel = ({
                     /* @__PURE__ */ jsx26(
                       "div",
                       {
-                        className: clsx20(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+                        className: clsx19(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
                       }
                     ),
                     /* @__PURE__ */ jsx26(
                       "div",
                       {
-                        className: clsx20(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+                        className: clsx19(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
                       }
                     )
                   ]
@@ -10491,7 +10468,7 @@ var Carousel = ({
                 "div",
                 {
                   ref: slideRefs[currentIndex],
-                  className: clsx20("px-16 h-full"),
+                  className: clsx19("px-16 h-full"),
                   tabIndex: 0,
                   role: "group",
                   "aria-roledescription": translation("slide"),
@@ -10508,7 +10485,7 @@ var Carousel = ({
                   {
                     layout: "icon",
                     color: "neutral",
-                    className: clsx20("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
+                    className: clsx19("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
                     disabled: !canGoLeft(),
                     onClick: () => left(),
                     children: /* @__PURE__ */ jsx26(ChevronLeft, { size: 24 })
@@ -10519,7 +10496,7 @@ var Carousel = ({
                   {
                     layout: "icon",
                     color: "neutral",
-                    className: clsx20("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
+                    className: clsx19("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
                     disabled: !canGoRight(),
                     onClick: () => right(),
                     children: /* @__PURE__ */ jsx26(ChevronRight, { size: 24 })
@@ -10536,7 +10513,7 @@ var Carousel = ({
 };
 
 // src/components/layout/DividerInserter.tsx
-import clsx21 from "clsx";
+import clsx20 from "clsx";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var DividerInserter = ({
   children,
@@ -10554,11 +10531,11 @@ var DividerInserter = ({
       }
     }
   }
-  return /* @__PURE__ */ jsx27("div", { className: clsx21(className), ...restProps, children: nodes });
+  return /* @__PURE__ */ jsx27("div", { className: clsx20(className), ...restProps, children: nodes });
 };
 
 // src/components/layout/FAQSection.tsx
-import clsx22 from "clsx";
+import clsx21 from "clsx";
 
 // src/components/layout/MarkdownInterpreter.tsx
 import { Fragment as Fragment2, jsx as jsx28 } from "react/jsx-runtime";
@@ -10804,7 +10781,7 @@ var FAQSection = ({
       label: /* @__PURE__ */ jsx29("span", { id, className: "typography-title-md", children: title }),
       clickOnlyOnHeader: false,
       icon: (expanded) => /* @__PURE__ */ jsx29(ExpansionIcon, { isExpanded: expanded, className: "text-primary" }),
-      className: clsx22("rounded-xl", expandableClassName),
+      className: clsx21("rounded-xl", expandableClassName),
       children: /* @__PURE__ */ jsx29("div", { className: "mt-2", children: content.type === "markdown" ? /* @__PURE__ */ jsx29(MarkdownInterpreter, { text: content.value }) : content.value })
     },
     id
@@ -10814,7 +10791,7 @@ var FAQSection = ({
 // src/components/layout/FloatingContainer.tsx
 import { forwardRef as forwardRef6, useImperativeHandle as useImperativeHandle3, useRef as useRef8 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { clsx as clsx23 } from "clsx";
+import { clsx as clsx22 } from "clsx";
 import { Fragment as Fragment3, jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 var FloatingContainer = forwardRef6(function FloatingContainer2({
   children,
@@ -10859,7 +10836,7 @@ var FloatingContainer = forwardRef6(function FloatingContainer2({
             ...position,
             ...props.style
           },
-          className: clsx23("motion-safe:duration-100 motion-reduce:duration-0", props.className),
+          className: clsx22("motion-safe:duration-100 motion-reduce:duration-0", props.className),
           children
         }
       )
@@ -10870,7 +10847,7 @@ var FloatingContainer = forwardRef6(function FloatingContainer2({
 
 // src/components/layout/ListBox.tsx
 import React4, { createContext as createContext5, forwardRef as forwardRef7, useCallback as useCallback10, useContext as useContext5, useEffect as useEffect18, useRef as useRef9, useState as useState18 } from "react";
-import { clsx as clsx24 } from "clsx";
+import { clsx as clsx23 } from "clsx";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var ListBoxContext = createContext5(null);
 function useListBoxContext() {
@@ -10913,7 +10890,7 @@ var ListBoxItem = forwardRef7(
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-selected": selected ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: clsx24(
+        className: clsx23(
           "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",
@@ -11134,7 +11111,7 @@ var ListBoxUncontrolled = ({
 // src/components/layout/TabView.tsx
 import { useId as useId7 } from "react";
 import { createContext as createContext6, useContext as useContext6, useState as useState19, useEffect as useEffect19, useRef as useRef10 } from "react";
-import clsx25 from "clsx";
+import clsx24 from "clsx";
 import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 var TabContext = createContext6(null);
 function useTabContext() {
@@ -11179,8 +11156,8 @@ function TabView({ children, outerDivProps, onTabChanged, initialTabIndex = 0, .
     buttonRefs.current[nextId]?.focus();
   };
   const value = { active, setActive, register, unregister, tabs };
-  return /* @__PURE__ */ jsx32(TabContext.Provider, { value, children: /* @__PURE__ */ jsxs19("div", { ...outerDivProps, className: clsx25("w-full", props.className), children: [
-    /* @__PURE__ */ jsx32("div", { role: "tablist", ...props, className: clsx25("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx32(TabContext.Provider, { value, children: /* @__PURE__ */ jsxs19("div", { ...outerDivProps, className: clsx24("w-full", props.className), children: [
+    /* @__PURE__ */ jsx32("div", { role: "tablist", ...props, className: clsx24("flex-row-0"), children: tabs.map((t) => /* @__PURE__ */ jsx32(
       "button",
       {
         role: "tab",
@@ -11191,7 +11168,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: clsx25(
+        className: clsx24(
           "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"
         ),
@@ -11225,7 +11202,7 @@ function Tab({ id: customId, label, children, ...props }) {
 }
 
 // src/components/layout/TextImage.tsx
-import clsx26 from "clsx";
+import clsx25 from "clsx";
 import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 var TextImage = ({
   title,
@@ -11251,7 +11228,7 @@ var TextImage = ({
   return /* @__PURE__ */ jsx33(
     "div",
     {
-      className: clsx26("rounded-2xl w-full", className),
+      className: clsx25("rounded-2xl w-full", className),
       style: {
         backgroundImage: `url(${imageUrl})`,
         backgroundSize: "cover"
@@ -11259,9 +11236,9 @@ var TextImage = ({
       children: /* @__PURE__ */ jsxs20(
         "div",
         {
-          className: clsx26(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          className: clsx25(`flex-col-2 px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
           children: [
-            badge && /* @__PURE__ */ jsx33("div", { className: clsx26(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx33("span", { className: "text-lg font-bold", children: badge }) }),
+            badge && /* @__PURE__ */ jsx33("div", { className: clsx25(`chip-full mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx33("span", { className: "text-lg font-bold", children: badge }) }),
             /* @__PURE__ */ jsxs20("div", { className: "flex-col-1 overflow-hidden", children: [
               /* @__PURE__ */ jsx33("span", { className: "typography-title-lg", children: title }),
               /* @__PURE__ */ jsx33("span", { className: "text-ellipsis overflow-hidden", children: description })
@@ -11329,14 +11306,14 @@ var VerticalDivider = ({
 
 // src/components/loading-states/ErrorComponent.tsx
 import { AlertOctagon } from "lucide-react";
-import clsx27 from "clsx";
+import clsx26 from "clsx";
 import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 var ErrorComponent = ({
   errorText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs22("div", { className: clsx27("flex-col-4 items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ jsxs22("div", { className: clsx26("flex-col-4 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ jsx35(AlertOctagon, { size: 64, className: "text-warning" }),
     errorText ?? `${translation("errorOccurred")} :(`
   ] });
@@ -11346,14 +11323,14 @@ var ErrorComponent = ({
 import { useState as useState20 } from "react";
 
 // src/components/loading-states/LoadingContainer.tsx
-import { clsx as clsx28 } from "clsx";
+import { clsx as clsx27 } from "clsx";
 import { jsx as jsx36 } from "react/jsx-runtime";
 var LoadingContainer = ({ className }) => {
-  return /* @__PURE__ */ jsx36("div", { className: clsx28("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
+  return /* @__PURE__ */ jsx36("div", { className: clsx27("relative overflow-hidden shimmer bg-disabled/30 rounded-md", className) });
 };
 
 // src/components/loading-states/LoadingAndErrorComponent.tsx
-import { clsx as clsx29 } from "clsx";
+import { clsx as clsx28 } from "clsx";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var LoadingAndErrorComponent = ({
   children,
@@ -11374,34 +11351,34 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return loadingComponent ?? /* @__PURE__ */ jsx37(LoadingContainer, { className: clsx29(className) });
+    return loadingComponent ?? /* @__PURE__ */ jsx37(LoadingContainer, { className: clsx28(className) });
   }
   if (hasError) {
-    return errorComponent ?? /* @__PURE__ */ jsx37(LoadingContainer, { className: clsx29("bg-negative", className) });
+    return errorComponent ?? /* @__PURE__ */ jsx37(LoadingContainer, { className: clsx28("bg-negative", className) });
   }
   return children;
 };
 
 // src/components/loading-states/LoadingAnimation.tsx
-import clsx30 from "clsx";
+import clsx29 from "clsx";
 import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 var LoadingAnimation = ({
   loadingText,
   classname
 }) => {
   const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs23("div", { className: clsx30("flex-col-2 items-center justify-center w-full h-24", classname), children: [
+  return /* @__PURE__ */ jsxs23("div", { className: clsx29("flex-col-2 items-center justify-center w-full h-24", classname), children: [
     /* @__PURE__ */ jsx38(HelpwaveLogo, { animate: "loading" }),
     loadingText ?? `${translation("loading")}...`
   ] });
 };
 
 // src/components/loading-states/LoadingButton.tsx
-import clsx31 from "clsx";
+import clsx30 from "clsx";
 import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 var LoadingButton = ({ isLoading = false, size = "medium", onClick, ...rest }) => {
   return /* @__PURE__ */ jsxs24("div", { className: "inline-block relative", children: [
-    isLoading && /* @__PURE__ */ jsx39("div", { className: clsx31("flex-row-2 absolute inset-0 items-center justify-center bg-white/40"), children: /* @__PURE__ */ jsx39(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
+    isLoading && /* @__PURE__ */ jsx39("div", { className: clsx30("flex-row-2 absolute inset-0 items-center justify-center bg-white/40"), children: /* @__PURE__ */ jsx39(HelpwaveLogo, { animate: "loading", className: "text-white" }) }),
     /* @__PURE__ */ jsx39(Button, { ...rest, size, disabled: rest.disabled, onClick })
   ] });
 };
@@ -11464,18 +11441,18 @@ var ProgressIndicator = ({
 
 // src/components/navigation/BreadCrumb.tsx
 var import_link = __toESM(require_link2());
-import clsx32 from "clsx";
+import clsx31 from "clsx";
 import { Fragment as Fragment4 } from "react";
 import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
 var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
-  return /* @__PURE__ */ jsx41("div", { className: clsx32("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
+  return /* @__PURE__ */ jsx41("div", { className: clsx31("flex-row-0.5 items-center", containerClassName), children: crumbs.map((crumb, index) => {
     const isLast = index === crumbs.length - 1;
     return /* @__PURE__ */ jsxs26(Fragment4, { children: [
       /* @__PURE__ */ jsx41(
         import_link.default,
         {
           href: crumb.link,
-          className: clsx32(
+          className: clsx31(
             "btn-sm coloring-text-hover",
             {
               description: !isLast,
@@ -11486,7 +11463,7 @@ var BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
           children: crumb.display
         }
       ),
-      !isLast && /* @__PURE__ */ jsx41("span", { className: clsx32(`px-1`, "text-description"), children: "/" })
+      !isLast && /* @__PURE__ */ jsx41("span", { className: clsx31(`px-1`, "text-description"), children: "/" })
     ] }, index);
   }) });
 };
@@ -11496,7 +11473,7 @@ var import_link2 = __toESM(require_link2());
 import { Menu as MenuIcon, XIcon as XIcon2 } from "lucide-react";
 import { useEffect as useEffect20 } from "react";
 import { useCallback as useCallback11, useId as useId8, useRef as useRef11, useState as useState21 } from "react";
-import clsx33 from "clsx";
+import clsx32 from "clsx";
 import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
@@ -11559,7 +11536,7 @@ var NavigationItemWithSubItem = ({
         },
         onBlur,
         hidden: !isOpen,
-        className: clsx33(
+        className: clsx32(
           "fixed flex-col-4 p-4 bg-surface text-on-surface shadow-side shadow-hw-bottom rounded-md",
           { "opacity-0": !style }
         ),
@@ -11578,7 +11555,7 @@ var NavigationItemWithSubItem = ({
   ] });
 };
 var NavigationItemList = ({ items, ...restProps }) => {
-  return /* @__PURE__ */ jsx42("ul", { ...restProps, className: clsx33("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx42("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx42(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx42(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
+  return /* @__PURE__ */ jsx42("ul", { ...restProps, className: clsx32("flex-row-6 items-center", restProps.className), children: items.map((item, index) => /* @__PURE__ */ jsx42("li", { children: isSubItem(item) ? /* @__PURE__ */ jsx42(NavigationItemWithSubItem, { ...item }) : /* @__PURE__ */ jsx42(import_link2.default, { href: item.link, target: item.external ? "_blank" : void 0, className: "link", children: item.label }) }, index)) });
 };
 var Navigation = ({ ...props }) => {
   const [isMobileOpen, setIsMobileOpen] = useState21(false);
@@ -11593,7 +11570,7 @@ var Navigation = ({ ...props }) => {
       NavigationItemList,
       {
         ...props,
-        className: clsx33("hidden", { "desktop:flex": !isMobileOpen }, props.className)
+        className: clsx32("hidden", { "desktop:flex": !isMobileOpen }, props.className)
       }
     ),
     /* @__PURE__ */ jsx42(
@@ -11623,7 +11600,7 @@ var Navigation = ({ ...props }) => {
             event.stopPropagation();
           }
         },
-        className: clsx33(
+        className: clsx32(
           "flex-col-8 items-center justify-center fixed inset-0 p-8 w-screen h-screen bg-surface text-on-surface",
           {
             "desktop:hidden": isMobileOpen
@@ -11642,7 +11619,7 @@ var Navigation = ({ ...props }) => {
               children: /* @__PURE__ */ jsx42(XIcon2, {})
             }
           ),
-          /* @__PURE__ */ jsx42(NavigationItemList, { ...props, className: clsx33("flex-col-8", props.className) })
+          /* @__PURE__ */ jsx42(NavigationItemList, { ...props, className: clsx32("flex-col-8", props.className) })
         ]
       }
     )
@@ -11651,7 +11628,7 @@ var Navigation = ({ ...props }) => {
 
 // src/components/navigation/Pagination.tsx
 import { ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
-import clsx34 from "clsx";
+import clsx33 from "clsx";
 import { useEffect as useEffect21, useState as useState22 } from "react";
 import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
 var Pagination = ({
@@ -11676,7 +11653,7 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ jsxs28("div", { className: clsx34("flex-row-1", className), style, children: [
+  return /* @__PURE__ */ jsxs28("div", { className: clsx33("flex-row-1", className), style, children: [
     /* @__PURE__ */ jsx43(
       Button,
       {
@@ -11704,7 +11681,7 @@ var Pagination = ({
         Input,
         {
           value,
-          className: clsx34(
+          className: clsx33(
             "w-24 text-center font-bold input-indicator-hidden h-10"
           ),
           type: "number",
@@ -11760,7 +11737,7 @@ var Pagination = ({
 
 // src/components/navigation/StepperBar.tsx
 import { Check, ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "lucide-react";
-import clsx35 from "clsx";
+import clsx34 from "clsx";
 import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 var defaultState = {
   currentStep: 0,
@@ -11786,7 +11763,7 @@ var StepperBar = ({
   return /* @__PURE__ */ jsxs29(
     "div",
     {
-      className: clsx35("flex-row-2 justify-between", className),
+      className: clsx34("flex-row-2 justify-between", className),
       children: [
         /* @__PURE__ */ jsx44("div", { className: "flex-row-2 flex-[2] justify-start", children: /* @__PURE__ */ jsxs29(
           Button,
@@ -11808,7 +11785,7 @@ var StepperBar = ({
             "div",
             {
               onClick: () => seen && update(index),
-              className: clsx35(
+              className: clsx34(
                 "rounded-full w-4 h-4",
                 {
                   "bg-stepperbar-dot-active hover:brightness-75": index === currentStep && seen && !disabledSteps.has(currentStep),
@@ -11869,24 +11846,25 @@ import { Check as Check3 } from "lucide-react";
 
 // src/components/user-action/Checkbox.tsx
 import { Check as Check2, Minus } from "lucide-react";
-import clsx36 from "clsx";
+import clsx35 from "clsx";
 import { jsx as jsx45, jsxs as jsxs30 } from "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
 }) => {
@@ -11910,25 +11888,21 @@ var Checkbox = ({
           props.onKeyDown?.(event);
         }
       },
-      className: clsx36(
+      className: clsx35(
         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__ */ jsx45("div", { className: clsx36("bg-input-background", innerIconSize) }),
-        checked && !indeterminate && /* @__PURE__ */ jsx45(Check2, { className: innerIconSize }),
-        indeterminate && /* @__PURE__ */ jsx45(Minus, { className: innerIconSize })
+        !indeterminate && /* @__PURE__ */ jsx45(Check2, { className: innerIconSize, "aria-hidden": true }),
+        indeterminate && /* @__PURE__ */ jsx45(Minus, { className: innerIconSize, "aria-hidden": true })
       ]
     }
   );
@@ -11951,7 +11925,7 @@ var CheckboxUncontrolled = ({
 
 // src/components/properties/PropertyBase.tsx
 import { AlertTriangle } from "lucide-react";
-import clsx37 from "clsx";
+import clsx36 from "clsx";
 import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 var PropertyBase = ({
   name,
@@ -11965,14 +11939,14 @@ var PropertyBase = ({
 }) => {
   const translation = useHightideTranslation();
   const requiredAndNoValue = softRequired && !hasValue;
-  return /* @__PURE__ */ jsxs31("div", { className: clsx37("flex-row-0 group", className), children: [
+  return /* @__PURE__ */ jsxs31("div", { className: clsx36("flex-row-0 group", className), children: [
     /* @__PURE__ */ jsxs31(
       "div",
       {
-        className: clsx37(
+        className: clsx36(
           "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
@@ -11986,10 +11960,10 @@ var PropertyBase = ({
     /* @__PURE__ */ jsxs31(
       "div",
       {
-        className: clsx37(
+        className: clsx36(
           "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
@@ -12003,7 +11977,7 @@ var PropertyBase = ({
               onClick: onRemove,
               color: "negative",
               coloringStyle: "text",
-              className: clsx37("items-center"),
+              className: clsx36("items-center"),
               disabled: !hasValue,
               children: translation("remove")
             }
@@ -12051,7 +12025,7 @@ var CheckboxProperty = ({
 
 // src/components/properties/DateProperty.tsx
 import { CalendarDays } from "lucide-react";
-import clsx38 from "clsx";
+import clsx37 from "clsx";
 import { jsx as jsx48 } from "react/jsx-runtime";
 var DateProperty = ({
   value,
@@ -12072,7 +12046,7 @@ var DateProperty = ({
       input: ({ softRequired }) => /* @__PURE__ */ jsx48(
         Input,
         {
-          className: clsx38("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none", { "bg-surface-warning": softRequired && !hasValue }),
+          className: clsx37("default-style-none focus-style-none", { "bg-surface-warning": softRequired && !hasValue }),
           value: dateText,
           type: type === "dateTime" ? "datetime-local" : "date",
           readOnly,
@@ -12094,7 +12068,7 @@ var DateProperty = ({
 
 // src/components/properties/MultiSelectProperty.tsx
 import { List } from "lucide-react";
-import clsx39 from "clsx";
+import clsx38 from "clsx";
 import { jsx as jsx49 } from "react/jsx-runtime";
 var MultiSelectProperty = ({
   children,
@@ -12116,14 +12090,15 @@ var MultiSelectProperty = ({
           onValuesChanged,
           disabled: props.readOnly,
           contentPanelProps: {
-            className: clsx39(
+            className: clsx38(
               "!border-none !min-h-10"
             )
           },
           chipDisplayProps: {
-            className: clsx39({
-              "!bg-warning !text-surface-warning": softRequired && !hasValue
-            })
+            className: clsx38(
+              "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
         }
@@ -12134,7 +12109,7 @@ var MultiSelectProperty = ({
 
 // src/components/properties/NumberProperty.tsx
 import { Binary } from "lucide-react";
-import clsx40 from "clsx";
+import clsx39 from "clsx";
 import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 var NumberProperty = ({
   value,
@@ -12159,12 +12134,12 @@ var NumberProperty = ({
         /* @__PURE__ */ jsxs33(
           "div",
           {
-            className: clsx40("relative flex-row-2 max-w-56", { "text-warning": softRequired && !hasValue }),
+            className: clsx39("relative flex-row-2 max-w-56", { "text-warning": softRequired && !hasValue }),
             children: [
               /* @__PURE__ */ jsx50(
                 Input,
                 {
-                  className: clsx40("!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: clsx39("default-style-none focus-style-none w-full pr-8", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
                   value: value?.toString() ?? "",
                   type: "number",
                   readOnly,
@@ -12190,7 +12165,7 @@ var NumberProperty = ({
               suffix && /* @__PURE__ */ jsx50(
                 "span",
                 {
-                  className: clsx40(
+                  className: clsx39(
                     "absolute top-1/2 -translate-y-1/2 right-2",
                     { "bg-surface-warning": softRequired && !hasValue }
                   ),
@@ -12207,7 +12182,7 @@ var NumberProperty = ({
 
 // src/components/properties/SelectProperty.tsx
 import { List as List2 } from "lucide-react";
-import clsx41 from "clsx";
+import clsx40 from "clsx";
 import { jsx as jsx51 } from "react/jsx-runtime";
 var SingleSelectProperty = ({
   children,
@@ -12230,8 +12205,8 @@ var SingleSelectProperty = ({
           onValueChanged,
           disabled: props.readOnly,
           buttonProps: {
-            className: clsx41(
-              "border-none w-full",
+            className: clsx40(
+              "default-style-none focus-style-none flex-row-2 w-full items-center",
               {
                 "!bg-warning !text-surface-warning": softRequired && !hasValue
               }
@@ -12247,11 +12222,11 @@ var SingleSelectProperty = ({
 
 // src/components/properties/TextProperty.tsx
 import { Text } from "lucide-react";
-import clsx43 from "clsx";
+import clsx42 from "clsx";
 
 // src/components/user-action/Textarea.tsx
 import { forwardRef as forwardRef8, useId as useId10 } from "react";
-import clsx42 from "clsx";
+import clsx41 from "clsx";
 import { jsx as jsx52, jsxs as jsxs34 } from "react/jsx-runtime";
 var Textarea = forwardRef8(function Textarea2({
   id,
@@ -12260,10 +12235,8 @@ var Textarea = forwardRef8(function Textarea2({
   onBlur,
   onEditCompleted,
   saveDelayOptions,
-  defaultStyle = true,
   invalid = false,
   disabled = false,
-  className,
   ...props
 }, ref) {
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
@@ -12274,18 +12247,10 @@ var Textarea = forwardRef8(function Textarea2({
   return /* @__PURE__ */ jsx52(
     "textarea",
     {
+      ...props,
       ref,
       id,
-      className: clsx42(
-        "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(() => {
@@ -12298,8 +12263,10 @@ var Textarea = forwardRef8(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
     }
   );
 });
@@ -12332,7 +12299,7 @@ var TextareaWithHeadline = ({
   return /* @__PURE__ */ jsxs34(
     "div",
     {
-      className: clsx42(
+      className: clsx41(
         "group flex-col-3 border-2 rounded-lg",
         {
           "bg-input-background text-input-text hover:border-primary focus-within:border-primary": !disabled,
@@ -12347,11 +12314,10 @@ var TextareaWithHeadline = ({
           {
             ...props,
             id: usedId,
-            className: clsx42(
+            className: clsx41(
               "border-transparent focus:ring-0 focus-visible:ring-0 resize-none h-32",
               className
-            ),
-            defaultStyle: false
+            )
           }
         )
       ]
@@ -12381,11 +12347,11 @@ var TextProperty = ({
       input: ({ softRequired }) => /* @__PURE__ */ jsx53(
         Textarea,
         {
-          className: clsx43({
-            "bg-surface-warning placeholder-warning": softRequired && !hasValue
-          }),
+          className: clsx42(
+            "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")}...`,
@@ -12410,12 +12376,12 @@ var TextProperty = ({
 };
 
 // src/components/table/FillerRowElement.tsx
-import { clsx as clsx44 } from "clsx";
+import { clsx as clsx43 } from "clsx";
 import { jsx as jsx54 } from "react/jsx-runtime";
 var FillerRowElement = ({
   className
 }) => {
-  return /* @__PURE__ */ jsx54("div", { className: clsx44("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
+  return /* @__PURE__ */ jsx54("div", { className: clsx43("flex flex-row items-center w-1/2 h-4 text-disabled font-bold", className), children: "-" });
 };
 
 // src/components/table/Filter.ts
@@ -12434,7 +12400,7 @@ var TableFilters = {
 
 // src/components/table/Table.tsx
 import { useCallback as useCallback12, useEffect as useEffect27, useMemo as useMemo7, useRef as useRef13, useState as useState26 } from "react";
-import clsx48 from "clsx";
+import clsx47 from "clsx";
 import {
   flexRender,
   getCoreRowModel,
@@ -12445,13 +12411,13 @@ import {
 } from "@tanstack/react-table";
 
 // src/components/table/TableCell.tsx
-import { clsx as clsx45 } from "clsx";
+import { clsx as clsx44 } from "clsx";
 import { jsx as jsx55 } from "react/jsx-runtime";
 var TableCell = ({
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsx55("span", { className: clsx45("block max-w-full overflow-ellipsis truncate", className), children });
+  return /* @__PURE__ */ jsx55("span", { className: clsx44("block max-w-full overflow-ellipsis truncate", className), children });
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
@@ -12467,7 +12433,7 @@ var useResizeCallbackWrapper = (callback) => {
 
 // src/components/table/TableSortButton.tsx
 import { ChevronDown as ChevronDown3, ChevronsUpDown, ChevronUp } from "lucide-react";
-import clsx46 from "clsx";
+import clsx45 from "clsx";
 import { jsx as jsx56 } from "react/jsx-runtime";
 var TableSortButton = ({
   sortDirection,
@@ -12491,7 +12457,7 @@ var TableSortButton = ({
       layout: "icon",
       color,
       size,
-      className: clsx46(className),
+      className: clsx45(className),
       ...buttonProps,
       children: icon
     }
@@ -12503,7 +12469,7 @@ import { FilterIcon } from "lucide-react";
 
 // src/components/user-action/Menu.tsx
 import { useEffect as useEffect25, useRef as useRef12, useState as useState24 } from "react";
-import clsx47 from "clsx";
+import clsx46 from "clsx";
 
 // src/utils/bagFunctions.ts
 var resolve = (children, bag) => {
@@ -12648,7 +12614,7 @@ var MenuItem = ({
 }) => /* @__PURE__ */ jsx57(
   "div",
   {
-    className: clsx47("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
+    className: clsx46("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,
@@ -12722,7 +12688,7 @@ var Menu = ({
       {
         ref: menuRef,
         onClick: (e) => e.stopPropagation(),
-        className: clsx47(
+        className: clsx46(
           "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
           {
             "animate-pop-in": isOpen,
@@ -13072,12 +13038,12 @@ var Table = ({
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ jsxs37("div", { ref, className: clsx48("flex-col-4", className), children: [
-    /* @__PURE__ */ jsx59("div", { className: clsx48("flex-col-0 w-full overflow-auto", tableContainerClassName), children: /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs37("div", { ref, className: clsx47("flex-col-4", className), children: [
+    /* @__PURE__ */ jsx59("div", { className: clsx47("flex-col-0 w-full overflow-auto", tableContainerClassName), children: /* @__PURE__ */ jsxs37(
       "table",
       {
         ref: tableRef,
-        className: clsx48(tableClassName),
+        className: clsx47(tableClassName),
         style: {
           ...columnSizeVars,
           width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
@@ -13099,7 +13065,7 @@ var Table = ({
               "th",
               {
                 colSpan: header.colSpan,
-                className: clsx48("relative group", header.column.columnDef.meta?.className),
+                className: clsx47("relative group", header.column.columnDef.meta?.className),
                 children: [
                   /* @__PURE__ */ jsx59("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs37("div", { className: "flex-row-1 items-center", children: [
                     header.column.getCanSort() && /* @__PURE__ */ jsx59(
@@ -13270,7 +13236,7 @@ var TableWithSelection = ({
       },
       meta: {
         ...meta,
-        bodyRowClassName: clsx48(
+        bodyRowClassName: clsx47(
           { "cursor-pointer": !disableClickRowClickSelection },
           meta?.bodyRowClassName
         )
@@ -13282,7 +13248,7 @@ var TableWithSelection = ({
 
 // src/components/user-action/CopyToClipboardWrapper.tsx
 import { useState as useState27 } from "react";
-import { clsx as clsx49 } from "clsx";
+import { clsx as clsx48 } from "clsx";
 
 // src/utils/writeToClipboard.ts
 var writeToClipboard = (text) => {
@@ -13325,7 +13291,7 @@ var CopyToClipboardWrapper = ({
   return /* @__PURE__ */ jsxs38(
     "div",
     {
-      className: clsx49("relative inline-block cursor-copy", containerClassName),
+      className: clsx48("relative inline-block cursor-copy", containerClassName),
       onMouseEnter: () => {
         setIsShowingIndication(true);
       },
@@ -13343,7 +13309,7 @@ var CopyToClipboardWrapper = ({
         /* @__PURE__ */ jsxs38(
           "div",
           {
-            className: clsx49(
+            className: clsx48(
               `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",
@@ -13366,7 +13332,7 @@ var CopyToClipboardWrapper = ({
               /* @__PURE__ */ jsx60(
                 "div",
                 {
-                  className: clsx49(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: clsx48(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -13379,7 +13345,7 @@ var CopyToClipboardWrapper = ({
 };
 
 // src/components/user-action/DateAndTimePicker.tsx
-import clsx50 from "clsx";
+import clsx49 from "clsx";
 import { jsx as jsx61, jsxs as jsxs39 } from "react/jsx-runtime";
 var DateTimePicker = ({
   value = /* @__PURE__ */ new Date(),
@@ -13416,7 +13382,7 @@ var DateTimePicker = ({
       TimePicker,
       {
         ...timePickerProps,
-        className: clsx50("min-h-71 max-h-71", { "justify-between w-full": mode === "time" }),
+        className: clsx49("min-h-71 max-h-71", { "justify-between w-full": mode === "time" }),
         time: value,
         onChange
       }
@@ -13443,7 +13409,7 @@ var DateTimePicker = ({
 
 // src/components/user-action/ScrollPicker.tsx
 import { useCallback as useCallback13, useEffect as useEffect28, useState as useState28 } from "react";
-import clsx51 from "clsx";
+import clsx50 from "clsx";
 import { jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
@@ -13613,7 +13579,7 @@ var ScrollPicker = ({
             children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx62(
               "div",
               {
-                className: clsx51(
+                className: clsx50(
                   `flex-col-2 items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -13639,42 +13605,9 @@ var ScrollPicker = ({
   );
 };
 
-// src/components/user-action/SearchBar.tsx
-import { Search } from "lucide-react";
-import { clsx as clsx52 } from "clsx";
-import { jsx as jsx63, jsxs as jsxs41 } from "react/jsx-runtime";
-var SearchBar = ({
-  placeholder,
-  onSearch,
-  disableOnSearch,
-  containerClassName,
-  ...inputProps
-}) => {
-  const translation = useHightideTranslation();
-  return /* @__PURE__ */ jsxs41("div", { className: clsx52("flex-row-2 justify-between items-center", containerClassName), children: [
-    /* @__PURE__ */ jsx63(
-      Input,
-      {
-        ...inputProps,
-        placeholder: placeholder ?? translation("search")
-      }
-    ),
-    onSearch && /* @__PURE__ */ jsx63(
-      Button,
-      {
-        layout: "icon",
-        color: "neutral",
-        disabled: disableOnSearch,
-        onClick: onSearch,
-        children: /* @__PURE__ */ jsx63(Search, { className: "w-full h-full" })
-      }
-    )
-  ] });
-};
-
 // src/components/user-action/Tooltip.tsx
-import { clsx as clsx53 } from "clsx";
-import { jsx as jsx64, jsxs as jsxs42 } from "react/jsx-runtime";
+import { clsx as clsx51 } from "clsx";
+import { jsx as jsx63, jsxs as jsxs41 } from "react/jsx-runtime";
 var Tooltip = ({
   tooltip,
   children,
@@ -13704,17 +13637,17 @@ var Tooltip = ({
     right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
   };
   const zIndex = useZIndexRegister(isHovered);
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
-      className: clsx53("relative inline-block", containerClassName),
+      className: clsx51("relative inline-block", containerClassName),
       ...handlers,
       children: [
         children,
-        isHovered && /* @__PURE__ */ jsxs42(
+        isHovered && /* @__PURE__ */ jsxs41(
           "div",
           {
-            className: clsx53(
+            className: clsx51(
               `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],
@@ -13723,10 +13656,10 @@ var Tooltip = ({
             style: { zIndex, animationDelay: animationDelay + "ms" },
             children: [
               tooltip,
-              /* @__PURE__ */ jsx64(
+              /* @__PURE__ */ jsx63(
                 "div",
                 {
-                  className: clsx53(`absolute w-0 h-0`, triangleClasses[position]),
+                  className: clsx51(`absolute w-0 h-0`, triangleClasses[position]),
                   style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
@@ -13741,8 +13674,8 @@ var Tooltip = ({
 // src/components/user-action/input/InsideLabelInput.tsx
 import { useId as useId11 } from "react";
 import { forwardRef as forwardRef9, useState as useState29 } from "react";
-import clsx54 from "clsx";
-import { jsx as jsx65, jsxs as jsxs43 } from "react/jsx-runtime";
+import clsx52 from "clsx";
+import { jsx as jsx64, jsxs as jsxs42 } from "react/jsx-runtime";
 var InsideLabelInput = forwardRef9(function InsideLabelInput2({
   id: customId,
   label,
@@ -13752,13 +13685,13 @@ var InsideLabelInput = forwardRef9(function InsideLabelInput2({
   const [isFocused, setIsFocused] = useState29(false);
   const generatedId = useId11();
   const id = customId ?? generatedId;
-  return /* @__PURE__ */ jsxs43("div", { className: clsx54("relative"), children: [
-    /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsxs42("div", { className: clsx52("relative"), children: [
+    /* @__PURE__ */ jsx64(
       Input,
       {
         ...props,
         id,
-        className: clsx54("h-14 px-4 pb-2 py-6.5", props.className),
+        className: clsx52("h-14 px-4 pb-2 py-6.5", props.className),
         ref: forwardedRef,
         "aria-labelledby": id + "-label",
         onFocus: (event) => {
@@ -13771,13 +13704,13 @@ var InsideLabelInput = forwardRef9(function InsideLabelInput2({
         }
       }
     ),
-    /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsx64(
       "label",
       {
         id: id + "-label",
         "aria-hidden": true,
         "data-display": isFocused || !!value ? "small" : "full",
-        className: clsx54(
+        className: clsx52(
           // 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",
@@ -13793,7 +13726,7 @@ var InsideLabelInputUncontrolled = ({
   ...props
 }) => {
   const [value, setValue] = useOverwritableState(initialValue, props.onChangeText);
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx64(
     InsideLabelInput,
     {
       ...props,
@@ -13803,10 +13736,46 @@ var InsideLabelInputUncontrolled = ({
   );
 };
 
+// src/components/user-action/input/SearchBar.tsx
+import { Search } from "lucide-react";
+import { clsx as clsx53 } from "clsx";
+import { jsx as jsx65, jsxs as jsxs43 } from "react/jsx-runtime";
+var SearchBar = ({
+  onSearch,
+  searchButtonProps,
+  containerProps,
+  ...inputProps
+}) => {
+  const translation = useHightideTranslation();
+  return /* @__PURE__ */ jsxs43("div", { ...containerProps, className: clsx53("relative", containerProps?.className), children: [
+    /* @__PURE__ */ jsx65(
+      InputUncontrolled,
+      {
+        ...inputProps,
+        placeholder: inputProps.placeholder ?? translation("search"),
+        className: clsx53("pr-10 w-full", inputProps.className)
+      }
+    ),
+    onSearch && /* @__PURE__ */ jsx65(
+      Button,
+      {
+        ...searchButtonProps,
+        size: "small",
+        layout: "icon",
+        color: "neutral",
+        coloringStyle: "text",
+        onClick: (event) => onSearch(event),
+        className: clsx53("absolute right-1 top-1/2 -translate-y-1/2", searchButtonProps?.className),
+        children: /* @__PURE__ */ jsx65(Search, { className: "w-full h-full" })
+      }
+    )
+  ] });
+};
+
 // src/components/user-action/input/ToggleableInput.tsx
 import { forwardRef as forwardRef10, useEffect as useEffect29, useImperativeHandle as useImperativeHandle4, useRef as useRef14, useState as useState30 } from "react";
 import { Pencil } from "lucide-react";
-import clsx55 from "clsx";
+import clsx54 from "clsx";
 import { jsx as jsx66, jsxs as jsxs44 } from "react/jsx-runtime";
 var ToggleableInput = forwardRef10(function ToggleableInput2({
   value,
@@ -13822,7 +13791,7 @@ var ToggleableInput = forwardRef10(function ToggleableInput2({
       innerRef.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs44("div", { className: clsx55("relative flex-row-2", { "flex-1": isEditing }), children: [
+  return /* @__PURE__ */ jsxs44("div", { className: clsx54("relative flex-row-2", { "flex-1": isEditing }), children: [
     /* @__PURE__ */ jsx66(
       Input,
       {
@@ -13842,16 +13811,16 @@ var ToggleableInput = forwardRef10(function ToggleableInput2({
           ...editCompleteOptions,
           allowEnterComplete: true
         },
-        className: clsx55(`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: clsx54(`w-full rounded-md`, {
           "text-transparent": !isEditing
-        }),
-        defaultStyle: false
+        })
       }
     ),
     !isEditing && /* @__PURE__ */ jsxs44("div", { className: "absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden", children: [
-      /* @__PURE__ */ jsx66("span", { className: clsx55(" truncate"), children: value }),
-      /* @__PURE__ */ jsx66(Pencil, { className: clsx55(`size-force-4`, { "text-transparent": isEditing }) })
+      /* @__PURE__ */ jsx66("span", { className: clsx54(" truncate"), children: value }),
+      /* @__PURE__ */ jsx66(Pencil, { className: clsx54(`size-force-4`, { "text-transparent": isEditing }) })
     ] })
   ] });
 });