@helpwave/hightide 0.12.6 → 0.12.7

package/dist/index.mjs

@@ -6998,6 +6998,125 @@ function Visibility({ children, isVisible }) {
   return /* @__PURE__ */ jsx3(Fragment, { children: isVisible && children });
 }
 
+// src/components/display-and-visualization/Avatar.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { createElement } from "react";
+var Avatar = ({
+  image: initialImage,
+  name,
+  size = "md",
+  ...props
+}) => {
+  const [hasError, setHasError] = useState(false);
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const [image, setImage] = useState(initialImage);
+  const displayName = useMemo(() => {
+    const maxLetters = size === "sm" ? 1 : 2;
+    return (name ?? "").split(" ").filter((_, index) => index < maxLetters).map((value) => value[0]).join("").toUpperCase();
+  }, [name, size]);
+  const isShowingImage = !!image && (!hasError || !hasLoaded);
+  useEffect(() => {
+    if (initialImage?.avatarUrl !== image?.avatarUrl) {
+      setHasError(false);
+      setHasLoaded(false);
+    }
+    setImage(initialImage);
+  }, [image?.avatarUrl, initialImage]);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ...props,
+      "data-name": "avatar",
+      "data-size": size ?? void 0,
+      children: [
+        /* @__PURE__ */ jsx4(Visibility, { isVisible: isShowingImage, children: /* @__PURE__ */ jsx4(
+          "img",
+          {
+            src: image?.avatarUrl,
+            alt: image?.alt,
+            "data-name": "avatar-image",
+            onLoad: () => setHasLoaded(true),
+            onError: () => setHasError(true),
+            "data-error": hasError ? "" : void 0,
+            "data-loaded": hasLoaded ? "" : void 0
+          },
+          image?.avatarUrl
+        ) }),
+        name ? displayName : /* @__PURE__ */ jsx4(UserIcon, {})
+      ]
+    }
+  );
+};
+var AvatarGroup = ({
+  avatars,
+  showTotalNumber = true,
+  size = "md",
+  ...props
+}) => {
+  const maxShownProfiles = 5;
+  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles);
+  const notDisplayedProfiles = avatars.length - maxShownProfiles;
+  const group = /* @__PURE__ */ jsx4("div", { className: "avatar-group-container", children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ createElement(
+    Avatar,
+    {
+      ...avatar,
+      key: index,
+      size,
+      "data-group": ""
+    }
+  )) });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ...props,
+      "data-name": props["data-name"] ?? "avatar-group",
+      "data-size": size ?? void 0,
+      children: [
+        group,
+        showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ jsx4(
+          "span",
+          {
+            "data-name": "avatar-group-more",
+            "data-size": size,
+            children: `+ ${notDisplayedProfiles}`
+          }
+        )
+      ]
+    }
+  );
+};
+var AvatarWithStatus = ({
+  status = "unknown",
+  className,
+  size = "md",
+  ...avatarProps
+}) => {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: clsx3(className),
+      "data-name": "avatar-with-status",
+      "data-size": size ?? void 0,
+      children: [
+        /* @__PURE__ */ jsx4(Avatar, { ...avatarProps, size }),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "data-name": "avatar-with-status-dot",
+            "data-size": size ?? void 0,
+            "data-status": status
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/display-and-visualization/Card.tsx
+import { forwardRef, useCallback } from "react";
+import clsx4 from "clsx";
+import { ChevronRight, ExternalLink } from "lucide-react";
+
 // src/utils/array.ts
 var equalSizeGroups = (array, groupSize) => {
   if (groupSize <= 0) {
@@ -7263,130 +7382,24 @@ var PropsUtil = {
   mergeProps
 };
 
-// src/components/display-and-visualization/Avatar.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-import { createElement } from "react";
-var Avatar = ({
-  image: initialImage,
-  name,
-  size = "md",
-  ...props
-}) => {
-  const [hasError, setHasError] = useState(false);
-  const [hasLoaded, setHasLoaded] = useState(false);
-  const [image, setImage] = useState(initialImage);
-  const displayName = useMemo(() => {
-    const maxLetters = size === "sm" ? 1 : 2;
-    return (name ?? "").split(" ").filter((_, index) => index < maxLetters).map((value) => value[0]).join("").toUpperCase();
-  }, [name, size]);
-  const isShowingImage = !!image && (!hasError || !hasLoaded);
-  useEffect(() => {
-    if (initialImage?.avatarUrl !== image?.avatarUrl) {
-      setHasError(false);
-      setHasLoaded(false);
-    }
-    setImage(initialImage);
-  }, [image?.avatarUrl, initialImage]);
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      ...props,
-      "data-name": props["data-name"] ?? "avatar",
-      "data-size": props["data-size"] ?? size ?? void 0,
-      children: [
-        /* @__PURE__ */ jsx4(Visibility, { isVisible: isShowingImage, children: /* @__PURE__ */ jsx4(
-          "img",
-          {
-            src: image?.avatarUrl,
-            alt: image?.alt,
-            "data-name": "avatar-image",
-            onLoad: () => setHasLoaded(true),
-            onError: () => setHasError(true),
-            "data-error": hasError ? "" : void 0,
-            "data-loaded": hasLoaded ? "" : void 0
-          },
-          image?.avatarUrl
-        ) }),
-        name ? displayName : /* @__PURE__ */ jsx4(UserIcon, {})
-      ]
-    }
-  );
-};
-var AvatarGroup = ({
-  avatars,
-  showTotalNumber = true,
-  size = "md",
-  ...props
-}) => {
-  const maxShownProfiles = 5;
-  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles);
-  const notDisplayedProfiles = avatars.length - maxShownProfiles;
-  const group = /* @__PURE__ */ jsx4("div", { className: "avatar-group-container", children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ createElement(
-    Avatar,
-    {
-      ...avatar,
-      key: index,
-      size,
-      "data-group": ""
-    }
-  )) });
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      ...props,
-      "data-name": props["data-name"] ?? "avatar-group",
-      "data-size": size ?? void 0,
-      children: [
-        group,
-        showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ jsx4(
-          "span",
-          {
-            "data-name": "avatar-group-more",
-            "data-size": size,
-            children: `+ ${notDisplayedProfiles}`
-          }
-        )
-      ]
-    }
-  );
-};
-var AvatarWithStatus = ({
-  isOnline,
-  className,
-  size = "md",
-  ...avatarProps
-}) => {
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      className: clsx3(className),
-      "data-name": "avatar-with-status",
-      "data-size": size ?? void 0,
-      children: [
-        /* @__PURE__ */ jsx4(Avatar, { ...avatarProps, size }),
-        /* @__PURE__ */ jsx4(
-          "div",
-          {
-            "data-name": "avatar-with-status-dot",
-            "data-size": size ?? void 0,
-            "data-online": PropsUtil.dataAttributes.bool(isOnline),
-            "aria-label": isOnline ? "Online" : "Offline"
-          }
-        )
-      ]
-    }
-  );
-};
-
 // src/components/display-and-visualization/Card.tsx
-import { forwardRef, useCallback } from "react";
-import clsx4 from "clsx";
-import { ChevronRight, ExternalLink } from "lucide-react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function CardHeaderContent({ title, description, leading, trailing }) {
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    leading != null && /* @__PURE__ */ jsx5("span", { "data-name": "card-leading", children: leading }),
+    /* @__PURE__ */ jsxs4("div", { "data-name": "card-content", children: [
+      /* @__PURE__ */ jsx5("span", { "data-name": "card-title", children: title }),
+      /* @__PURE__ */ jsx5(Visibility, { isVisible: !!description, children: /* @__PURE__ */ jsx5("span", { "data-name": "card-description", children: description }) })
+    ] }),
+    trailing != null && /* @__PURE__ */ jsx5("span", { "data-name": "card-trailing", children: trailing })
+  ] });
+}
 var Card = ({
   title,
   description,
   size = "md",
+  leading,
+  trailing,
   children,
   className,
   ...props
@@ -7399,8 +7412,15 @@ var Card = ({
       "data-name": props["data-name"] ?? "card",
       "data-size": size,
       children: [
-        /* @__PURE__ */ jsx5("span", { "data-name": "card-title", children: title }),
-        /* @__PURE__ */ jsx5(Visibility, { isVisible: !!description, children: /* @__PURE__ */ jsx5("span", { "data-name": "card-description", children: description }) }),
+        /* @__PURE__ */ jsx5("div", { "data-name": "card-header", children: /* @__PURE__ */ jsx5(
+          CardHeaderContent,
+          {
+            title,
+            description,
+            leading,
+            trailing
+          }
+        ) }),
         children
       ]
     }
@@ -7410,7 +7430,8 @@ var ActionCard = forwardRef(function ActionCard2({
   title,
   description,
   size = "md",
-  action,
+  leading,
+  trailing,
   disabled = false,
   children,
   className,
@@ -7446,13 +7467,15 @@ var ActionCard = forwardRef(function ActionCard2({
       role: onClick ? "button" : void 0,
       tabIndex: onClick && !disabled ? 0 : void 0,
       children: [
-        /* @__PURE__ */ jsxs4("div", { "data-name": "card-header", children: [
-          /* @__PURE__ */ jsxs4("div", { "data-name": "card-content", children: [
-            /* @__PURE__ */ jsx5("span", { "data-name": "card-title", children: title }),
-            /* @__PURE__ */ jsx5(Visibility, { isVisible: !!description, children: /* @__PURE__ */ jsx5("span", { "data-name": "card-description", children: description }) })
-          ] }),
-          action != null && /* @__PURE__ */ jsx5("div", { "data-name": "card-action", children: action })
-        ] }),
+        /* @__PURE__ */ jsx5("div", { "data-name": "card-header", children: /* @__PURE__ */ jsx5(
+          CardHeaderContent,
+          {
+            title,
+            description,
+            leading,
+            trailing
+          }
+        ) }),
         children
       ]
     }
@@ -7462,6 +7485,7 @@ var NavigationCard = forwardRef(function NavigationCard2({
   title,
   description,
   size = "md",
+  leading,
   href,
   isExternal = false,
   children,
@@ -7507,10 +7531,14 @@ var NavigationCard = forwardRef(function NavigationCard2({
       tabIndex: 0,
       children: [
         /* @__PURE__ */ jsxs4("div", { "data-name": "card-header", children: [
-          /* @__PURE__ */ jsxs4("div", { "data-name": "card-content", children: [
-            /* @__PURE__ */ jsx5("span", { "data-name": "card-title", children: title }),
-            /* @__PURE__ */ jsx5(Visibility, { isVisible: !!description, children: /* @__PURE__ */ jsx5("span", { "data-name": "card-description", children: description }) })
-          ] }),
+          /* @__PURE__ */ jsx5(
+            CardHeaderContent,
+            {
+              title,
+              description,
+              leading
+            }
+          ),
           /* @__PURE__ */ jsx5(
             "a",
             {
@@ -8126,7 +8154,7 @@ var ProcessModelTerminalNode = ({
 };
 
 // src/components/display-and-visualization/process-model/ProcessModelCanvas.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function defaultRenderActivityIcon(node) {
   if (node.activityIcon === "check") {
     return /* @__PURE__ */ jsx13(Check, { size: 15, strokeWidth: 2, className: "process-model-activity-node-icon-svg" });
@@ -8186,7 +8214,7 @@ var ProcessModelCanvas = ({
             "data-base-sw": String(sw)
           }
         ),
-        edge.label ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+        edge.label ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
           /* @__PURE__ */ jsx13(
             "rect",
             {
@@ -12944,7 +12972,7 @@ var IconButton = forwardRef13(function IconButton2({
 });
 
 // src/components/layout/Carousel.tsx
-import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 var CarouselContext = createContext8(null);
 var useCarouselContext = () => {
   const context = useContext9(CarouselContext);
@@ -13249,7 +13277,7 @@ var Carousel = ({
                   children: children[currentIndex]
                 }
               ),
-              arrows && /* @__PURE__ */ jsxs17(Fragment3, { children: [
+              arrows && /* @__PURE__ */ jsxs17(Fragment4, { children: [
                 /* @__PURE__ */ jsx31(
                   IconButton,
                   {
@@ -13567,7 +13595,7 @@ function InfiniteScroll({
 }
 
 // src/components/layout/MarkdownInterpreter.tsx
-import { Fragment as Fragment4, jsx as jsx36 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx36 } from "react/jsx-runtime";
 var astNodeInserterType = ["helpwave", "newline"];
 var ASTNodeInterpreter = ({
   node,
@@ -13588,7 +13616,7 @@ var ASTNodeInterpreter = ({
           node: value
         },
         index
-      )) }) : /* @__PURE__ */ jsx36(Fragment4, { children: node.children.map((value, index) => /* @__PURE__ */ jsx36(ASTNodeInterpreter, { node: value }, index)) });
+      )) }) : /* @__PURE__ */ jsx36(Fragment5, { children: node.children.map((value, index) => /* @__PURE__ */ jsx36(ASTNodeInterpreter, { node: value }, index)) });
     case "bold":
       return /* @__PURE__ */ jsx36("b", { children: node.children.map((value, index) => /* @__PURE__ */ jsx36(ASTNodeInterpreter, { node: value }, index)) });
     case "italic":
@@ -14588,32 +14616,19 @@ function VerticalNavigationItem({
   const handleHeaderActivate = useCallback27(() => {
     toggleExpansion(id, { isFocusing: true });
   }, [id, toggleExpansion]);
-  const handleLeafActivate = useCallback27((event) => {
-    if (event.target.closest('[data-name="vertical-navigation-item-link"]')) return;
+  const handleLeafActivate = useCallback27(() => {
     navigateTo(id);
-  }, [id, navigateTo]);
-  const labelContent = url == null ? label : external ? /* @__PURE__ */ jsxs23(
-    "a",
-    {
-      href: url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      "data-name": "vertical-navigation-item-link",
-      tabIndex: -1,
-      children: [
-        label,
-        /* @__PURE__ */ jsx41(ExternalLink2, { className: "vertical-navigation-item-link-external-icon" })
-      ]
-    }
-  ) : /* @__PURE__ */ jsx41(
-    "a",
-    {
-      href: url,
-      "data-name": "vertical-navigation-item-link",
-      tabIndex: -1,
-      children: label
+    if (url == null) return;
+    if (external) {
+      window.open(url, "_blank", "noopener,noreferrer");
+      return;
     }
-  );
+    window.location.assign(url);
+  }, [external, id, navigateTo, url]);
+  const labelContent = url == null ? label : external ? /* @__PURE__ */ jsxs23("span", { "data-name": "vertical-navigation-item-link", children: [
+    label,
+    /* @__PURE__ */ jsx41(ExternalLink2, { className: "vertical-navigation-item-link-external-icon" })
+  ] }) : /* @__PURE__ */ jsx41("span", { "data-name": "vertical-navigation-item-link", children: label });
   if (!hasChildren) {
     return /* @__PURE__ */ jsx41(
       "li",
@@ -14691,12 +14706,12 @@ function VerticalNavigationTree({
 }
 
 // src/components/layout/app/AppPage.tsx
-import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
 var AppSidebar = ({ isOpen = false, onClose, children, ...props }) => {
   const translation = useHightideTranslation();
   const { zIndex } = useOverlayRegistry({ isActive: isOpen });
   const ref = useRef25(null);
-  return /* @__PURE__ */ jsxs24(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs24(Fragment6, { children: [
     isOpen && /* @__PURE__ */ jsx43(
       "div",
       {
@@ -15529,7 +15544,7 @@ var LoadingContainer = ({ className }) => {
 
 // src/components/layout/loading/LoadingAndErrorComponent.tsx
 import { clsx as clsx21 } from "clsx";
-import { Fragment as Fragment6, jsx as jsx58 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx58 } from "react/jsx-runtime";
 var LoadingAndErrorComponent = ({
   children,
   isLoading = false,
@@ -15549,12 +15564,12 @@ var LoadingAndErrorComponent = ({
     }, minimumLoadingDuration);
   }
   if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
-    return /* @__PURE__ */ jsx58(Fragment6, { children: loadingComponent ?? /* @__PURE__ */ jsx58(LoadingContainer, { className }) });
+    return /* @__PURE__ */ jsx58(Fragment7, { children: loadingComponent ?? /* @__PURE__ */ jsx58(LoadingContainer, { className }) });
   }
   if (hasError) {
-    return /* @__PURE__ */ jsx58(Fragment6, { children: errorComponent ?? /* @__PURE__ */ jsx58(LoadingContainer, { className: clsx21("bg-negative", className) }) });
+    return /* @__PURE__ */ jsx58(Fragment7, { children: errorComponent ?? /* @__PURE__ */ jsx58(LoadingContainer, { className: clsx21("bg-negative", className) }) });
   }
-  return /* @__PURE__ */ jsx58(Fragment6, { children });
+  return /* @__PURE__ */ jsx58(Fragment7, { children });
 };
 
 // src/components/layout/loading/LoadingAnimation.tsx
@@ -15607,7 +15622,7 @@ import { Menu as MenuIcon2, XIcon } from "lucide-react";
 import { useEffect as useEffect30 } from "react";
 import { useCallback as useCallback31, useId as useId14, useRef as useRef28, useState as useState26 } from "react";
 import clsx23 from "clsx";
-import { Fragment as Fragment7, jsx as jsx61, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx61, jsxs as jsxs34 } from "react/jsx-runtime";
 function isSubItem(item) {
   return "items" in item && Array.isArray(item.items);
 }
@@ -15635,7 +15650,7 @@ var NavigationItemWithSubItem = ({
     }
   }, []);
   const { zIndex } = useOverlayRegistry();
-  return /* @__PURE__ */ jsxs34(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs34(Fragment8, { children: [
     /* @__PURE__ */ jsxs34(
       "button",
       {
@@ -15712,7 +15727,7 @@ var Navigation = ({ ...props }) => {
     /* @__PURE__ */ jsx61(
       IconButton,
       {
-        tooltip: translation("openNavigation"),
+        tooltip: translation("menu"),
         coloringStyle: "text",
         color: "neutral",
         onClick: () => setIsMobileOpen(true),
@@ -18057,7 +18072,7 @@ var DatePicker = ({
         Button,
         {
           size: "sm",
-          coloringStyle: "text",
+          color: "neutral",
           className: clsx29("flex-row-1 items-center cursor-pointer select-none", {
             "text-disabled": displayMode !== "day"
           }),
@@ -18213,7 +18228,7 @@ var DateTimePicker = ({
 
 // src/components/user-interaction/date/DateTimePickerDialog.tsx
 import { useEffect as useEffect37, useState as useState32 } from "react";
-import { Fragment as Fragment8, jsx as jsx76, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx76, jsxs as jsxs45 } from "react/jsx-runtime";
 var DateTimePickerDialog = ({
   initialValue = null,
   value,
@@ -18244,7 +18259,7 @@ var DateTimePickerDialog = ({
   useEffect37(() => {
     setPickerState(state ?? /* @__PURE__ */ new Date());
   }, [state]);
-  return /* @__PURE__ */ jsxs45(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs45(Fragment9, { children: [
     /* @__PURE__ */ jsx76("div", { className: "flex-row-2 justify-center w-full py-1", children: /* @__PURE__ */ jsx76(
       "span",
       {
@@ -18907,6 +18922,9 @@ var DateTimeInput = forwardRef20(function DateTimeInput2({
   const focusField = () => {
     fieldRef.current?.querySelector('[data-name="date-time-segment"]')?.focus();
   };
+  const hasClear = !required && allowClear && !readOnly && !disabled && state !== null;
+  const hasTimePicker = !readOnly;
+  const hasActions = hasClear || hasTimePicker || actions.length > 0;
   return /* @__PURE__ */ jsxs46("div", { ...containerProps, className: clsx31("relative w-full", containerProps?.className), children: [
     /* @__PURE__ */ jsxs46(
       "div",
@@ -18924,6 +18942,7 @@ var DateTimeInput = forwardRef20(function DateTimeInput2({
         className: clsx31("cursor-text", props.className),
         "data-name": props["data-name"] ?? "date-time-input",
         "data-value": PropsUtil.dataAttributes.bool(!!state),
+        "data-has-actions": PropsUtil.dataAttributes.bool(hasActions),
         ...PropsUtil.dataAttributes.interactionStates({ disabled, readOnly, invalid, required }),
         ...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props),
         children: [
@@ -18942,13 +18961,12 @@ var DateTimeInput = forwardRef20(function DateTimeInput2({
               onValueChange: (next) => setState(fromZoned(next)),
               onEditComplete: (next) => onEditComplete?.(fromZoned(next)),
               "aria-labelledby": props["aria-labelledby"],
-              "aria-describedby": props["aria-describedby"],
-              className: "grow"
+              "aria-describedby": props["aria-describedby"]
             }
           ),
           /* @__PURE__ */ jsxs46("div", { className: "flex-row-1 items-center", children: [
             actions,
-            /* @__PURE__ */ jsx78(Visibility, { isVisible: !required && allowClear && !readOnly && !disabled && state !== null, children: /* @__PURE__ */ jsx78(
+            /* @__PURE__ */ jsx78(Visibility, { isVisible: hasClear, children: /* @__PURE__ */ jsx78(
               IconButton,
               {
                 tooltip: translation("clearValue"),
@@ -18962,7 +18980,7 @@ var DateTimeInput = forwardRef20(function DateTimeInput2({
                 children: /* @__PURE__ */ jsx78(X4, { className: "size-5" })
               }
             ) }),
-            /* @__PURE__ */ jsx78(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ jsx78(
+            /* @__PURE__ */ jsx78(Visibility, { isVisible: hasTimePicker, children: /* @__PURE__ */ jsx78(
               IconButton,
               {
                 tooltip: translation("sDateTimeSelect", { datetimeMode: mode }),
@@ -20485,7 +20503,7 @@ var FilterPopUp = forwardRef25(function FilterPopUp2({
 });
 
 // src/components/layout/table/TableFilterButton.tsx
-import { Fragment as Fragment9, jsx as jsx85, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx85, jsxs as jsxs53 } from "react/jsx-runtime";
 var TableFilterButton = ({
   filterType,
   header
@@ -20512,7 +20530,7 @@ var TableFilterButton = ({
   if (isTagsFilter && !hasTagsMetaData) {
     return null;
   }
-  return /* @__PURE__ */ jsxs53(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs53(Fragment10, { children: [
     /* @__PURE__ */ jsxs53(
       IconButton,
       {
@@ -20626,7 +20644,7 @@ var DataTypeUtils = {
 };
 
 // src/components/layout/table/TableHeader.tsx
-import { Fragment as Fragment10, jsx as jsx87, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx87, jsxs as jsxs54 } from "react/jsx-runtime";
 var TableHeader = ({ isSticky = false }) => {
   const { table } = useTableStateWithoutSizingContext();
   const handleResizeMove = useCallback41((e) => {
@@ -20671,7 +20689,7 @@ var TableHeader = ({ isSticky = false }) => {
       window.removeEventListener("pointerup", handleResizeEnd);
     };
   }, [handleResizeEnd, handleResizeMove, table]);
-  return /* @__PURE__ */ jsxs54(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs54(Fragment11, { children: [
     table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx87(TableStateContext.Consumer, { children: ({ sizeVars }) => /* @__PURE__ */ jsx87("colgroup", { style: sizeVars, children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx87(
       "col",
       {
@@ -20692,7 +20710,7 @@ var TableHeader = ({ isSticky = false }) => {
           "data-name": "table-header-cell",
           className: clsx35("group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
-            /* @__PURE__ */ jsx87(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs54("div", { className: "flex-row-1 items-center truncate", children: [
+            /* @__PURE__ */ jsx87(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ jsxs54("div", { className: "table-header-cell-content", children: [
               /* @__PURE__ */ jsx87(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ jsx87(
                 TableSortButton,
                 {
@@ -21129,7 +21147,7 @@ var TableColumn = (props) => {
 // src/components/layout/table/TableColumnSwitcher.tsx
 import { useMemo as useMemo42, useRef as useRef41, useId as useId21 } from "react";
 import { ChevronUp as ChevronUp3, ChevronDown as ChevronDown5, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight6, Eye, EyeOff, Pin, PinOff, Columns3Cog } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx95, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx95, jsxs as jsxs60 } from "react/jsx-runtime";
 var TableColumnSwitcherPopUp = ({ ...props }) => {
   const { table } = useTableStateWithoutSizingContext();
   const translation = useHightideTranslation();
@@ -21292,7 +21310,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
           const canMoveUp = index > 0 && !isPinned && !prevIsPinned;
           const canMoveDown = index < columns.length - 1 && !isPinned && !nextIsPinned;
           return /* @__PURE__ */ jsxs60("div", { className: "flex-row-2 items-center justify-between gap-2 w-full", children: [
-            /* @__PURE__ */ jsx95("div", { className: "flex-row-2 gap-1", children: isPinned ? /* @__PURE__ */ jsxs60(Fragment11, { children: [
+            /* @__PURE__ */ jsx95("div", { className: "flex-row-2 gap-1", children: isPinned ? /* @__PURE__ */ jsxs60(Fragment12, { children: [
               /* @__PURE__ */ jsx95(
                 IconButton,
                 {
@@ -21317,7 +21335,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
                   children: /* @__PURE__ */ jsx95(ChevronRight6, { className: "size-4" })
                 }
               )
-            ] }) : /* @__PURE__ */ jsxs60(Fragment11, { children: [
+            ] }) : /* @__PURE__ */ jsxs60(Fragment12, { children: [
               /* @__PURE__ */ jsx95(
                 IconButton,
                 {
@@ -21344,7 +21362,7 @@ var TableColumnSwitcherPopUp = ({ ...props }) => {
               )
             ] }) }),
             /* @__PURE__ */ jsx95("div", { className: "flex-1 typography-label-lg", children: getColumnHeader(columnId) }),
-            /* @__PURE__ */ jsxs60(Fragment11, { children: [
+            /* @__PURE__ */ jsxs60(Fragment12, { children: [
               /* @__PURE__ */ jsx95(Visibility, { isVisible: enableHiding, children: /* @__PURE__ */ jsx95(
                 IconButton,
                 {
@@ -21876,7 +21894,7 @@ var CopyToClipboardWrapper = ({
 // src/components/user-interaction/Menu.tsx
 import { useCallback as useCallback47, useRef as useRef44, useState as useState43 } from "react";
 import clsx42 from "clsx";
-import { Fragment as Fragment12, jsx as jsx102, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx102, jsxs as jsxs64 } from "react/jsx-runtime";
 var MenuItem = ({
   children,
   onClick,
@@ -21908,7 +21926,7 @@ var Menu = ({
     toggleOpen: () => setIsOpen((prevState) => !prevState),
     disabled
   };
-  return /* @__PURE__ */ jsxs64(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs64(Fragment13, { children: [
     trigger(bag, useCallback47((el) => triggerRef.current = el, [])),
     /* @__PURE__ */ jsx102(
       PopUp,
@@ -22388,7 +22406,7 @@ var TextareaWithHeadline = ({
 // src/components/user-interaction/data/FilterList.tsx
 import { useMemo as useMemo45, useState as useState45 } from "react";
 import { PlusIcon } from "lucide-react";
-import { Fragment as Fragment13, jsx as jsx107, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx107, jsxs as jsxs68 } from "react/jsx-runtime";
 var FilterList = ({ value, onValueChange, availableItems }) => {
   const translation = useHightideTranslation();
   const filterValueToLabel = useFilterValueTranslation();
@@ -22463,7 +22481,7 @@ var FilterList = ({ value, onValueChange, availableItems }) => {
             }
           },
           children: [
-            /* @__PURE__ */ jsx107(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsx107(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "sm", children: item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : /* @__PURE__ */ jsxs68(Fragment13, { children: [
+            /* @__PURE__ */ jsx107(PopUpOpener, { children: ({ toggleOpen, props }) => /* @__PURE__ */ jsx107(Button, { ...props, onClick: toggleOpen, color: "primary", coloringStyle: "tonal-outline", size: "sm", children: item.activeLabelBuilder ? item.activeLabelBuilder(columnFilter.value) : /* @__PURE__ */ jsxs68(Fragment14, { children: [
               /* @__PURE__ */ jsx107("span", { className: "font-bold", children: item.label }),
               filterValueToLabel(columnFilter.value, { tags: item.tags })
             ] }) }) }),
@@ -22936,7 +22954,7 @@ import { Check as Check6 } from "lucide-react";
 // src/components/user-interaction/properties/PropertyBase.tsx
 import clsx49 from "clsx";
 import { AlertTriangle, Trash, X as X5 } from "lucide-react";
-import { Fragment as Fragment14, jsx as jsx114, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx114, jsxs as jsxs73 } from "react/jsx-runtime";
 var PropertyBase = ({
   name,
   children,
@@ -22955,7 +22973,7 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  const renderActionButtons = () => /* @__PURE__ */ jsxs73(Fragment14, { children: [
+  const renderActionButtons = () => /* @__PURE__ */ jsxs73(Fragment15, { children: [
     isClearEnabled && /* @__PURE__ */ jsx114(
       IconButton,
       {
@@ -23116,6 +23134,7 @@ var DateProperty = ({
           onValueChange,
           onEditComplete,
           "data-name": "property-input",
+          className: "flex-row-4 pr-0",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid)
         }
       )