@cwellt_software/cwellt-reactjs-lib 1.4.5 → 1.4.6

package/dist/index.es.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { cloneElement, useEffect, useState, useCallback, useRef, useMemo, useLayoutEffect, forwardRef, useImperativeHandle, createElement, memo, Fragment as Fragment$1, Component } from 'react';
-import { createRoot } from 'react-dom/client';
+import React__default, { useState, useRef, useEffect, useCallback, useLayoutEffect, createContext, useContext, cloneElement, useMemo, forwardRef, useImperativeHandle, createElement, memo, Fragment as Fragment$1, Component } from 'react';
 import { createPortal } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import Draggable from 'react-draggable';
 import { format } from 'date-fns';
 import { enGB } from 'date-fns/locale';
@@ -166,14 +166,328 @@ const SVG_ICONS = {
     'sortable-desc': (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 128 128", fill: "currentColor", children: [jsx("path", { d: "M93.1675 73.1739C94.5691 74.5758 94.7323 76.7924 93.5515 78.3846L93.1675 78.8326L63.6741 108.326L34.1755 78.8326C32.6908 77.3518 32.6014 74.9761 33.9708 73.3881C35.3401 71.8001 37.7033 71.5391 39.3861 72.7899L39.8341 73.1739L63.6741 97.0137L87.5088 73.1739C88.9104 71.7726 91.1274 71.6092 92.7194 72.7899L93.1674 73.1739H93.1675Z", opacity: "1" }), jsx("path", { d: "M34.1714 55.1518C32.7697 53.7499 32.6066 51.5333 33.7874 49.9411L34.1714 49.4931L63.6647 20L93.1634 49.4931C94.6481 50.9739 94.7375 53.3496 93.3681 54.9376C91.9987 56.5256 89.6356 56.7866 87.9527 55.5358L87.5047 55.1517L63.6647 31.312L39.8301 55.1518C38.4285 56.5531 36.2115 56.7165 34.6195 55.5358L34.1715 55.1518L34.1714 55.1518Z", opacity: "0.3" })] })),
 };
 
+var styles$r = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
+
+// Constants
+const margin$1 = 16;
+const positionOrder$1 = ['right', 'bottom', 'left', 'top'];
+// Singleton state
+let currentState = {
+    isVisible: false,
+    content: null,
+    triggerRect: null,
+    position: "right",
+    dissapearsWhenHover: false,
+    displayInline: false,
+    constraintRect: undefined
+};
+const stateUpdateCallbacks = new Set();
+let hideTimeout;
+// Public API
+const showTooltip = (content, triggerElement, position = "right", dissapearsWhenHover = false, displayInline = false, constraintElement) => {
+    if (hideTimeout !== undefined) {
+        window.clearTimeout(hideTimeout);
+        hideTimeout = undefined;
+    }
+    currentState = {
+        isVisible: true,
+        content,
+        triggerRect: triggerElement.getBoundingClientRect(),
+        position,
+        dissapearsWhenHover,
+        displayInline,
+        constraintRect: constraintElement?.getBoundingClientRect()
+    };
+    stateUpdateCallbacks.forEach((cb) => cb());
+};
+const hideTooltip = (delay = 100) => {
+    if (hideTimeout !== undefined) {
+        window.clearTimeout(hideTimeout);
+    }
+    hideTimeout = window.setTimeout(() => {
+        hideTimeout = undefined;
+        currentState = {
+            ...currentState,
+            isVisible: false
+        };
+        stateUpdateCallbacks.forEach((cb) => cb());
+    }, delay);
+};
+// Position calculation
+const calculatePositionForSide$1 = (position, triggerRect, tooltipRect) => {
+    switch (position) {
+        case 'left':
+            return {
+                top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
+                left: triggerRect.left - tooltipRect.width - margin$1
+            };
+        case 'right':
+            return {
+                top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
+                left: triggerRect.right + margin$1
+            };
+        case 'top':
+            return {
+                top: triggerRect.top - tooltipRect.height - margin$1,
+                left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
+            };
+        case 'bottom':
+            return {
+                top: triggerRect.bottom + margin$1,
+                left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
+            };
+    }
+};
+const MANAGER_CONTAINER_CLASS = "cw-tooltip-manager";
+const ensureTooltipManager = () => {
+    if (document.querySelector(`.${MANAGER_CONTAINER_CLASS}`))
+        return;
+    const container = document.createElement("div");
+    container.className = MANAGER_CONTAINER_CLASS;
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    root.render(jsx(CwTooltipManager, {}));
+};
+// Main component
 /**
- * Icon component that supports both FontAwesome 4 and cwellt icon font
- * @example
- * <CwIcon iconId="house" /> // Uses cwellt icon font
- * <CwIcon iconId="house" source="fontawesome" /> // Uses FontAwesome
+ * Global tooltip renderer. Manages a single portal instance in the DOM,
+ * shared across all CwTooltipNew instances for optimal performance.
+ *
+ * Mount once at the app root, or let CwTooltipNew handle it automatically
+ * via ensureTooltipManager().
+ *
+ * @see CwTooltipNew
+ * @see showTooltip
+ * @see hideTooltip
+ */
+const CwTooltipManager = () => {
+    const [state, setState] = useState(currentState);
+    const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+    const [actualPosition, setActualPosition] = useState("right");
+    const [isPositioned, setIsPositioned] = useState(false);
+    const tooltipRef = useRef(null);
+    const [isMeasuring, setIsMeasuring] = useState(false);
+    // Register update callback
+    useEffect(() => {
+        const update = () => {
+            setState({ ...currentState });
+            if (!currentState.isVisible)
+                setIsMeasuring(false);
+        };
+        stateUpdateCallbacks.add(update);
+        return () => {
+            stateUpdateCallbacks.delete(update);
+        };
+    }, []);
+    // Function to calculate position
+    const calculatePosition = useCallback(() => {
+        if (!state.isVisible || !state.triggerRect || !tooltipRef.current) {
+            return;
+        }
+        const tooltipRect = tooltipRef.current.getBoundingClientRect();
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        // When a constraint is provided, clip the trigger rect to its visible portion
+        // so centering is based on what the user can actually see (e.g. event clipped by a sidebar).
+        // The boundary check still uses the full window so the tooltip itself is never over-constrained.
+        const cr = state.constraintRect;
+        let triggerRect = state.triggerRect;
+        if (cr) {
+            const left = Math.max(state.triggerRect.left, cr.left);
+            const top = Math.max(state.triggerRect.top, cr.top);
+            const right = Math.min(state.triggerRect.right, cr.right);
+            const bottom = Math.min(state.triggerRect.bottom, cr.bottom);
+            if (right <= left || bottom <= top) {
+                // Rects don't overlap — fall back to full trigger rect to avoid negative dimensions
+                triggerRect = state.triggerRect;
+            }
+            else {
+                triggerRect = new DOMRect(left, top, right - left, bottom - top);
+            }
+        }
+        // Try preferred position first
+        let position = calculatePositionForSide$1(state.position, triggerRect, tooltipRect);
+        // Check if it fits
+        if (position.left >= margin$1 &&
+            position.top >= margin$1 &&
+            position.left + tooltipRect.width <= windowWidth - margin$1 &&
+            position.top + tooltipRect.height <= windowHeight - margin$1) {
+            setTooltipPosition(position);
+            setActualPosition(state.position);
+            setIsPositioned(true);
+            setIsMeasuring(false);
+            return;
+        }
+        // Try other positions
+        for (const pos of positionOrder$1) {
+            if (pos === state.position)
+                continue;
+            const newPosition = calculatePositionForSide$1(pos, triggerRect, tooltipRect);
+            if (newPosition.left >= margin$1 &&
+                newPosition.top >= margin$1 &&
+                newPosition.left + tooltipRect.width <= windowWidth - margin$1 &&
+                newPosition.top + tooltipRect.height <= windowHeight - margin$1) {
+                setTooltipPosition(newPosition);
+                setActualPosition(pos);
+                setIsPositioned(true);
+                setIsMeasuring(false);
+                return;
+            }
+        }
+        // Fallback if none fit - adjust to fit within viewport
+        // Calculate available space around the (clipped) trigger element
+        const spaceTop = triggerRect.top;
+        const spaceBottom = windowHeight - triggerRect.bottom;
+        const spaceLeft = triggerRect.left;
+        const spaceRight = windowWidth - triggerRect.right;
+        // Find the side with the most space
+        let bestPosition;
+        const maxSpace = Math.max(spaceTop, spaceBottom, spaceLeft, spaceRight);
+        if (maxSpace === spaceRight) {
+            bestPosition = 'right';
+        }
+        else if (maxSpace === spaceBottom) {
+            bestPosition = 'bottom';
+        }
+        else if (maxSpace === spaceLeft) {
+            bestPosition = 'left';
+        }
+        else {
+            bestPosition = 'top';
+        }
+        // Find the coordinates for the best position
+        let bestPositionCoords = calculatePositionForSide$1(bestPosition, triggerRect, tooltipRect);
+        // Adjust to fit within the viewport (but without covering the trigger element)
+        if (bestPositionCoords.left < margin$1) {
+            bestPositionCoords.left = margin$1;
+        }
+        else if (bestPositionCoords.left + tooltipRect.width > windowWidth - margin$1) {
+            bestPositionCoords.left = windowWidth - tooltipRect.width - margin$1;
+        }
+        if (bestPositionCoords.top < margin$1) {
+            bestPositionCoords.top = margin$1;
+        }
+        else if (bestPositionCoords.top + tooltipRect.height > windowHeight - margin$1) {
+            bestPositionCoords.top = windowHeight - tooltipRect.height - margin$1;
+        }
+        setTooltipPosition(bestPositionCoords);
+        setActualPosition(bestPosition);
+        setIsPositioned(true);
+        setIsMeasuring(false);
+    }, [state]);
+    // Reset isPositioned when state changes (new tooltip)
+    // useLayouteffect is used to ensure it runs before the browser paints, preventing flashes of incorrectly positioned tooltips
+    useLayoutEffect(() => {
+        if (state.isVisible) {
+            setIsPositioned(false);
+            // Calculate position in next frame
+            calculatePosition();
+        }
+    }, [state.isVisible, state.triggerRect, state.content, calculatePosition]);
+    // ResizeObserver to reposition when content size changes (e.g., data loads)
+    useLayoutEffect(() => {
+        if (!state.isVisible || !tooltipRef.current) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            setIsMeasuring(true);
+            setIsPositioned(false);
+            calculatePosition();
+        });
+        resizeObserver.observe(tooltipRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [state.isVisible, calculatePosition]);
+    if (!state.isVisible || !state.content) {
+        return null;
+    }
+    return createPortal(jsx("div", { ref: tooltipRef, className: styles$r["cw-tooltip-content"], "data-position": actualPosition, "data-visible": state.isVisible, "data-inline": state.displayInline, style: {
+            top: `${tooltipPosition.top}px`,
+            left: `${tooltipPosition.left}px`,
+            opacity: (isPositioned && !isMeasuring) ? 1 : 0,
+        }, onMouseEnter: () => state.dissapearsWhenHover && hideTooltip(), children: state.content }), document.body);
+};
+
+/**
+ * Provides a constraint element for tooltip positioning within a container.
+ * When set, CwTooltipNew will keep tooltips within the container's bounds
+ * instead of the full window — useful when a sidebar or panel reduces the
+ * visible area (e.g. the OpsTool right sidebar next to the scheduler).
+ *
+ * NewScheduler automatically provides its own container via this context.
  */
+const TooltipConstraintContext = createContext(null);
+const useTooltipConstraint = () => useContext(TooltipConstraintContext);
+
+/**
+ * Tooltip component backed by the global CwTooltipManager singleton.
+ * More performant than CwGenericTooltip for high-density scenarios (e.g. schedulers)
+ * as it shares a single DOM portal across all instances.
+ *
+ * Self-initializes the Manager if not already mounted via ensureTooltipManager().
+ * Drop-in replacement for CwGenericTooltip with the same API.
+ *
+ * @see CwTooltipManager
+ * @see CwGenericTooltip
+ */
+const CwTooltipNew = ({ children, content = null, position = "right", dissapearsWhenHover = false, hide = false, showDelay = 0, overlayStyle = {}, displayInline = false, constraintElement, }) => {
+    const containerRef = useRef(null);
+    const timeoutRef = useRef();
+    const contextConstraint = useTooltipConstraint();
+    const effectiveConstraint = constraintElement !== undefined ? constraintElement : contextConstraint;
+    const handleMouseEnter = useCallback(() => {
+        if (hide || !content || !containerRef.current)
+            return;
+        if (timeoutRef.current) {
+            window.clearTimeout(timeoutRef.current);
+        }
+        if (showDelay > 0) {
+            timeoutRef.current = window.setTimeout(() => {
+                if (containerRef.current) {
+                    showTooltip(content, containerRef.current, position, dissapearsWhenHover, displayInline, effectiveConstraint);
+                }
+            }, showDelay);
+        }
+        else {
+            showTooltip(content, containerRef.current, position, dissapearsWhenHover, displayInline, effectiveConstraint);
+        }
+    }, [content, position, showDelay, hide, dissapearsWhenHover, displayInline, effectiveConstraint]);
+    const handleMouseLeave = useCallback(() => {
+        if (timeoutRef.current) {
+            window.clearTimeout(timeoutRef.current);
+        }
+        hideTooltip();
+    }, []);
+    // Cleanup on unmount to prevent memory leaks
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                window.clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    // Hide tooltip when mousedown / drag events
+    useEffect(() => {
+        const handleDocumentMouseDown = () => {
+            if (timeoutRef.current) {
+                window.clearTimeout(timeoutRef.current);
+            }
+            hideTooltip();
+        };
+        document.addEventListener("mousedown", handleDocumentMouseDown);
+        return () => {
+            document.removeEventListener("mousedown", handleDocumentMouseDown);
+        };
+    }, []);
+    useEffect(() => {
+        ensureTooltipManager();
+    }, []);
+    return (jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$r["cw-tooltip"], children: children }));
+};
+
 function CwIcon(props) {
-    const { iconId, source = 'cwellt', color, size, ...iconProps } = props;
+    const { iconId, color, size, title, tooltipPosition = 'bottom', ...iconProps } = props;
     const getClassName = (baseClass) => {
         return [
             baseClass,
@@ -181,18 +495,18 @@ function CwIcon(props) {
             size && `cw-font-size-${size}`
         ].filter(Boolean).join(' ');
     };
-    // Check if it's a special SVG icon
+    let iconElement;
     if (iconId in SVG_ICONS) {
         const svgElement = SVG_ICONS[iconId];
-        const className = getClassName('cw-icon-svg');
-        return cloneElement(svgElement, { className });
+        iconElement = cloneElement(svgElement, {
+            ...iconProps,
+            className: [getClassName('cw-icon-svg'), svgElement.props?.className].filter(Boolean).join(' '),
+        });
     }
-    // Return appropriate icon based on source
-    if (source === 'fontawesome') {
-        return jsx("span", { ...iconProps, className: getClassName(`fa fa-${iconId}`) });
+    else {
+        iconElement = jsx("span", { ...iconProps, className: getClassName(`cwi-icons cwi-${iconId}`) });
     }
-    // Use custom icon font
-    return jsx("span", { ...iconProps, className: getClassName(`cwi-icons cwi-${iconId}`) });
+    return title ? (jsx(CwTooltipNew, { content: title, position: tooltipPosition, displayInline: true, children: iconElement })) : (iconElement);
 }
 
 /**
@@ -366,7 +680,7 @@ function CwDisplayMessage(message, type, duration, onClick) {
  *   <strong>Important information here</strong>
  * </CwNote>
  */
-const CwNote = ({ content, variant = 'soft', color = 'primary', customColor, fontSize = 'regular', icon, dismissible = false, autoCloseSeconds, className = '', style = {}, children, }) => {
+const CwNote = ({ content, variant = 'soft', color = 'primary', customColor, fontSize = 'regular', icon, dismissible = false, autoCloseSeconds, className = '', style = {}, children, layout, }) => {
     const [isVisible, setIsVisible] = useState(true);
     // Auto-close functionality
     useEffect(() => {
@@ -417,7 +731,7 @@ const CwNote = ({ content, variant = 'soft', color = 'primary', customColor, fon
     if (!isVisible) {
         return null;
     }
-    return (jsxs("div", { className: noteClass, "data-color": customColor ? undefined : color, "data-variant": variant, style: messageStyle, children: [icon && jsx(CwIcon, { iconId: icon }), jsx("div", { className: "cw-note-content", children: children ?? content }), dismissible && (jsx("button", { className: "cw-note-dismiss-button", onClick: handleDismiss, "aria-label": "Dismiss note", type: "button", children: jsx(CwIcon, { iconId: "close" }) }))] }));
+    return (jsxs("div", { className: noteClass, "data-color": customColor ? undefined : color, "data-variant": variant, "data-direction": layout?.direction, "data-align": layout?.align, "data-justify": layout?.justify, "data-gap": layout?.gap, style: messageStyle, children: [icon && jsx(CwIcon, { iconId: icon }), jsx("div", { className: "cw-note-content", children: children ?? content }), dismissible && (jsx("button", { className: "cw-note-dismiss-button", onClick: handleDismiss, "aria-label": "Dismiss note", type: "button", children: jsx(CwIcon, { iconId: "close" }) }))] }));
 };
 
 /**
@@ -635,193 +949,10 @@ function CwLoadingSmall(CwelltLoadingAppointements) {
 var styles$q = {"cw-generic-tooltip-content":"cw-generic-tooltip-module__cw-generic-tooltip-content__la-Si","cw-generic-tooltip":"cw-generic-tooltip-module__cw-generic-tooltip__Ij76M"};
 
 // Constants moved outside to prevent recreation
-const margin$1 = 16;
-const defaultPosition = "right";
-const positionOrder$1 = ['right', 'bottom', 'left', 'top'];
-// Memoized utility functions to prevent recreation
-const calculatePositionForSide$1 = (position, triggerRect, tooltipRect) => {
-    switch (position) {
-        case 'left':
-            return {
-                top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
-                left: triggerRect.left - tooltipRect.width - margin$1
-            };
-        case 'right':
-            return {
-                top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
-                left: triggerRect.right + margin$1
-            };
-        case 'top':
-            return {
-                top: triggerRect.top - tooltipRect.height - margin$1,
-                left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
-            };
-        case 'bottom':
-            return {
-                top: triggerRect.bottom + margin$1,
-                left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
-            };
-    }
-};
-// Optimized hooks
-const useTooltipDelay = (callback, delay) => {
-    const timeoutRef = useRef();
-    const clearTooltipTimeout = useCallback(() => {
-        if (timeoutRef.current) {
-            window.clearTimeout(timeoutRef.current);
-            timeoutRef.current = undefined;
-        }
-    }, []);
-    const setTooltipTimeout = useCallback(() => {
-        clearTooltipTimeout();
-        if (delay) {
-            timeoutRef.current = window.setTimeout(callback, delay);
-        }
-        else {
-            callback();
-        }
-    }, [callback, delay, clearTooltipTimeout]);
-    useEffect(() => clearTooltipTimeout, [clearTooltipTimeout]);
-    return { setTooltipTimeout, clearTooltipTimeout };
-};
-const useTooltipPosition = (isVisible, containerRef, preferredPosition, tooltipClassName) => {
-    const [tooltipState, setTooltipState] = useState({
-        position: { top: 0, left: 0 },
-        actualPosition: preferredPosition
-    });
-    const frameRef = useRef();
-    const updatePosition = useCallback(() => {
-        if (!isVisible || !containerRef.current)
-            return;
-        const tooltipElement = document.querySelector(`.${tooltipClassName}`);
-        if (!tooltipElement)
-            return;
-        const triggerRect = containerRef.current.getBoundingClientRect();
-        const tooltipRect = tooltipElement.getBoundingClientRect();
-        // Try preferred position first
-        const position = calculatePositionForSide$1(preferredPosition, triggerRect, tooltipRect);
-        const windowWidth = window.innerWidth;
-        const windowHeight = window.innerHeight;
-        // Quick bounds check
-        if (position.left >= margin$1 &&
-            position.top >= margin$1 &&
-            position.left + tooltipRect.width <= windowWidth - margin$1 &&
-            position.top + tooltipRect.height <= windowHeight - margin$1) {
-            setTooltipState({ position, actualPosition: preferredPosition });
-            return;
-        }
-        // Try other positions if preferred doesn't fit
-        for (const pos of positionOrder$1) {
-            if (pos === preferredPosition)
-                continue;
-            const newPosition = calculatePositionForSide$1(pos, triggerRect, tooltipRect);
-            if (newPosition.left >= margin$1 &&
-                newPosition.top >= margin$1 &&
-                newPosition.left + tooltipRect.width <= windowWidth - margin$1 &&
-                newPosition.top + tooltipRect.height <= windowHeight - margin$1) {
-                setTooltipState({ position: newPosition, actualPosition: pos });
-                return;
-            }
-        }
-        // Fallback to preferred position if none fit
-        setTooltipState({ position, actualPosition: preferredPosition });
-    }, [isVisible, preferredPosition, tooltipClassName]);
-    useEffect(() => {
-        frameRef.current = requestAnimationFrame(updatePosition);
-        return () => {
-            if (frameRef.current) {
-                cancelAnimationFrame(frameRef.current);
-            }
-        };
-    }, [updatePosition]);
-    return tooltipState;
-};
-/**
- * Standalone tooltip component. Each instance manages its own portal,
- * requiring no external dependencies or global setup.
- *
- * Suitable for low-density use cases with few tooltip instances.
- * For high-density scenarios (e.g. schedulers, tables, lists),
- * prefer CwTooltipNew which shares a single DOM portal for better performance.
- *
- * @remarks Not formally deprecated, but CwTooltipNew is now the recommended
- * approach for new implementations. Cannot be deprecated yet due to potential use on projects such as Operon and Improve.
- *
- * @see CwTooltipNew
- */
-const CwGenericTooltip = ({ children, content = null, position = defaultPosition, dissapearsWhenHover = false, hide = false, overlayStyle = {}, showDelay = 0, displayInline = false, }) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const containerRef = useRef(null);
-    const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => {
-        setIsVisible(true);
-    }, showDelay);
-    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$q["cw-generic-tooltip-content"]);
-    // Memoize tooltip content creation
-    const tooltipContent = useMemo(() => {
-        if (hide || !isVisible || !content)
-            return null;
-        return createPortal(jsx("div", { className: styles$q["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, "data-inline": displayInline, style: {
-                position: 'fixed',
-                top: `${tooltipPosition.top}px`,
-                left: `${tooltipPosition.left}px`,
-                visibility: tooltipPosition.top === 0 && tooltipPosition.left === 0 ? 'hidden' : 'visible',
-                ...overlayStyle
-            }, onMouseEnter: () => dissapearsWhenHover && setIsVisible(false), children: content }), document.body);
-    }, [isVisible, content, actualPosition, tooltipPosition, dissapearsWhenHover, overlayStyle, hide]);
-    const handleMouseEnter = useCallback(() => {
-        setTooltipTimeout();
-    }, [setTooltipTimeout]);
-    const handleMouseLeave = useCallback(() => {
-        clearTooltipTimeout();
-        setIsVisible(false);
-    }, [clearTooltipTimeout]);
-    return (jsxs("div", { ref: containerRef, className: styles$q["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, children: [tooltipContent, children] }));
-};
-
-var styles$p = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
-
-// Constants
 const margin = 16;
+const defaultPosition = "right";
 const positionOrder = ['right', 'bottom', 'left', 'top'];
-// Singleton state
-let currentState = {
-    isVisible: false,
-    content: null,
-    triggerRect: null,
-    position: "right",
-    dissapearsWhenHover: false
-};
-const stateUpdateCallbacks = new Set();
-let hideTimeout;
-// Public API
-const showTooltip = (content, triggerElement, position = "right", dissapearsWhenHover = false) => {
-    if (hideTimeout !== undefined) {
-        window.clearTimeout(hideTimeout);
-        hideTimeout = undefined;
-    }
-    currentState = {
-        isVisible: true,
-        content,
-        triggerRect: triggerElement.getBoundingClientRect(),
-        position,
-        dissapearsWhenHover
-    };
-    stateUpdateCallbacks.forEach((cb) => cb());
-};
-const hideTooltip = (delay = 100) => {
-    if (hideTimeout !== undefined) {
-        window.clearTimeout(hideTimeout);
-    }
-    hideTimeout = window.setTimeout(() => {
-        hideTimeout = undefined;
-        currentState = {
-            ...currentState,
-            isVisible: false
-        };
-        stateUpdateCallbacks.forEach((cb) => cb());
-    }, delay);
-};
-// Position calculation
+// Memoized utility functions to prevent recreation
 const calculatePositionForSide = (position, triggerRect, tooltipRect) => {
     switch (position) {
         case 'left':
@@ -846,222 +977,119 @@ const calculatePositionForSide = (position, triggerRect, tooltipRect) => {
             };
     }
 };
-const MANAGER_CONTAINER_CLASS = "cw-tooltip-manager";
-const ensureTooltipManager = () => {
-    if (document.querySelector(`.${MANAGER_CONTAINER_CLASS}`))
-        return;
-    const container = document.createElement("div");
-    container.className = MANAGER_CONTAINER_CLASS;
-    document.body.appendChild(container);
-    const root = createRoot(container);
-    root.render(jsx(CwTooltipManager, {}));
-};
-// Main component
-/**
- * Global tooltip renderer. Manages a single portal instance in the DOM,
- * shared across all CwTooltipNew instances for optimal performance.
- *
- * Mount once at the app root, or let CwTooltipNew handle it automatically
- * via ensureTooltipManager().
- *
- * @see CwTooltipNew
- * @see showTooltip
- * @see hideTooltip
- */
-const CwTooltipManager = () => {
-    const [state, setState] = useState(currentState);
-    const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
-    const [actualPosition, setActualPosition] = useState("right");
-    const [isPositioned, setIsPositioned] = useState(false);
-    const tooltipRef = useRef(null);
-    const [isMeasuring, setIsMeasuring] = useState(false);
-    // Register update callback
-    useEffect(() => {
-        const update = () => {
-            setState({ ...currentState });
-            if (!currentState.isVisible)
-                setIsMeasuring(false);
-        };
-        stateUpdateCallbacks.add(update);
-        return () => {
-            stateUpdateCallbacks.delete(update);
-        };
+// Optimized hooks
+const useTooltipDelay = (callback, delay) => {
+    const timeoutRef = useRef();
+    const clearTooltipTimeout = useCallback(() => {
+        if (timeoutRef.current) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = undefined;
+        }
     }, []);
-    // Function to calculate position
-    const calculatePosition = useCallback(() => {
-        if (!state.isVisible || !state.triggerRect || !tooltipRef.current) {
-            return;
+    const setTooltipTimeout = useCallback(() => {
+        clearTooltipTimeout();
+        if (delay) {
+            timeoutRef.current = window.setTimeout(callback, delay);
         }
-        const tooltipRect = tooltipRef.current.getBoundingClientRect();
+        else {
+            callback();
+        }
+    }, [callback, delay, clearTooltipTimeout]);
+    useEffect(() => clearTooltipTimeout, [clearTooltipTimeout]);
+    return { setTooltipTimeout, clearTooltipTimeout };
+};
+const useTooltipPosition = (isVisible, containerRef, preferredPosition, tooltipClassName) => {
+    const [tooltipState, setTooltipState] = useState({
+        position: { top: 0, left: 0 },
+        actualPosition: preferredPosition
+    });
+    const frameRef = useRef();
+    const updatePosition = useCallback(() => {
+        if (!isVisible || !containerRef.current)
+            return;
+        const tooltipElement = document.querySelector(`.${tooltipClassName}`);
+        if (!tooltipElement)
+            return;
+        const triggerRect = containerRef.current.getBoundingClientRect();
+        const tooltipRect = tooltipElement.getBoundingClientRect();
+        // Try preferred position first
+        const position = calculatePositionForSide(preferredPosition, triggerRect, tooltipRect);
         const windowWidth = window.innerWidth;
         const windowHeight = window.innerHeight;
-        // Try preferred position first
-        let position = calculatePositionForSide(state.position, state.triggerRect, tooltipRect);
-        // Check if it fits
+        // Quick bounds check
         if (position.left >= margin &&
             position.top >= margin &&
             position.left + tooltipRect.width <= windowWidth - margin &&
             position.top + tooltipRect.height <= windowHeight - margin) {
-            setTooltipPosition(position);
-            setActualPosition(state.position);
-            setIsPositioned(true);
-            setIsMeasuring(false);
+            setTooltipState({ position, actualPosition: preferredPosition });
             return;
         }
-        // Try other positions
+        // Try other positions if preferred doesn't fit
         for (const pos of positionOrder) {
-            if (pos === state.position)
+            if (pos === preferredPosition)
                 continue;
-            const newPosition = calculatePositionForSide(pos, state.triggerRect, tooltipRect);
+            const newPosition = calculatePositionForSide(pos, triggerRect, tooltipRect);
             if (newPosition.left >= margin &&
                 newPosition.top >= margin &&
                 newPosition.left + tooltipRect.width <= windowWidth - margin &&
                 newPosition.top + tooltipRect.height <= windowHeight - margin) {
-                setTooltipPosition(newPosition);
-                setActualPosition(pos);
-                setIsPositioned(true);
-                setIsMeasuring(false);
+                setTooltipState({ position: newPosition, actualPosition: pos });
                 return;
             }
         }
-        // Fallback if none fit - adjust to fit within viewport
-        const triggerRect = state.triggerRect;
-        // Calculate available space around the trigger element
-        const spaceTop = triggerRect.top;
-        const spaceBottom = windowHeight - triggerRect.bottom;
-        const spaceLeft = triggerRect.left;
-        const spaceRight = windowWidth - triggerRect.right;
-        // Find the side with the most space
-        let bestPosition;
-        const maxSpace = Math.max(spaceTop, spaceBottom, spaceLeft, spaceRight);
-        if (maxSpace === spaceRight) {
-            bestPosition = 'right';
-        }
-        else if (maxSpace === spaceBottom) {
-            bestPosition = 'bottom';
-        }
-        else if (maxSpace === spaceLeft) {
-            bestPosition = 'left';
-        }
-        else {
-            bestPosition = 'top';
-        }
-        // Find the coordinates for the best position
-        let bestPositionCoords = calculatePositionForSide(bestPosition, triggerRect, tooltipRect);
-        // Adjust to fit within the viewport (but without covering the trigger element)
-        if (bestPositionCoords.left < margin) {
-            bestPositionCoords.left = margin;
-        }
-        else if (bestPositionCoords.left + tooltipRect.width > windowWidth - margin) {
-            bestPositionCoords.left = windowWidth - tooltipRect.width - margin;
-        }
-        if (bestPositionCoords.top < margin) {
-            bestPositionCoords.top = margin;
-        }
-        else if (bestPositionCoords.top + tooltipRect.height > windowHeight - margin) {
-            bestPositionCoords.top = windowHeight - tooltipRect.height - margin;
-        }
-        setTooltipPosition(bestPositionCoords);
-        setActualPosition(bestPosition);
-        setIsPositioned(true);
-        setIsMeasuring(false);
-    }, [state]);
-    // Reset isPositioned when state changes (new tooltip)
-    // useLayouteffect is used to ensure it runs before the browser paints, preventing flashes of incorrectly positioned tooltips
-    useLayoutEffect(() => {
-        if (state.isVisible) {
-            setIsPositioned(false);
-            // Calculate position in next frame
-            calculatePosition();
-        }
-    }, [state.isVisible, state.triggerRect, state.content, calculatePosition]);
-    // ResizeObserver to reposition when content size changes (e.g., data loads)
-    useLayoutEffect(() => {
-        if (!state.isVisible || !tooltipRef.current) {
-            return;
-        }
-        const resizeObserver = new ResizeObserver(() => {
-            setIsMeasuring(true);
-            setIsPositioned(false);
-            calculatePosition();
-        });
-        resizeObserver.observe(tooltipRef.current);
+        // Fallback to preferred position if none fit
+        setTooltipState({ position, actualPosition: preferredPosition });
+    }, [isVisible, preferredPosition, tooltipClassName]);
+    useEffect(() => {
+        frameRef.current = requestAnimationFrame(updatePosition);
         return () => {
-            resizeObserver.disconnect();
+            if (frameRef.current) {
+                cancelAnimationFrame(frameRef.current);
+            }
         };
-    }, [state.isVisible, calculatePosition]);
-    if (!state.isVisible || !state.content) {
-        return null;
-    }
-    return createPortal(jsx("div", { ref: tooltipRef, className: styles$p["cw-tooltip-content"], "data-position": actualPosition, "data-visible": state.isVisible, style: {
-            top: `${tooltipPosition.top}px`,
-            left: `${tooltipPosition.left}px`,
-            opacity: (isPositioned && !isMeasuring) ? 1 : 0,
-        }, onMouseEnter: () => state.dissapearsWhenHover && hideTooltip(), children: state.content }), document.body);
+    }, [updatePosition]);
+    return tooltipState;
 };
-
 /**
- * Tooltip component backed by the global CwTooltipManager singleton.
- * More performant than CwGenericTooltip for high-density scenarios (e.g. schedulers)
- * as it shares a single DOM portal across all instances.
+ * Standalone tooltip component. Each instance manages its own portal,
+ * requiring no external dependencies or global setup.
  *
- * Self-initializes the Manager if not already mounted via ensureTooltipManager().
- * Drop-in replacement for CwGenericTooltip with the same API.
+ * Suitable for low-density use cases with few tooltip instances.
+ * For high-density scenarios (e.g. schedulers, tables, lists),
+ * prefer CwTooltipNew which shares a single DOM portal for better performance.
  *
- * @see CwTooltipManager
- * @see CwGenericTooltip
+ * @remarks Not formally deprecated, but CwTooltipNew is now the recommended
+ * approach for new implementations. Cannot be deprecated yet due to potential use on projects such as Operon and Improve.
+ *
+ * @see CwTooltipNew
  */
-const CwTooltipNew = ({ children, content = null, position = "right", dissapearsWhenHover = false, hide = false, showDelay = 0, overlayStyle = {}, displayInline = false, }) => {
+const CwGenericTooltip = ({ children, content = null, position = defaultPosition, dissapearsWhenHover = false, hide = false, overlayStyle = {}, showDelay = 0, displayInline = false, }) => {
+    const [isVisible, setIsVisible] = useState(false);
     const containerRef = useRef(null);
-    const timeoutRef = useRef();
+    const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => {
+        setIsVisible(true);
+    }, showDelay);
+    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$q["cw-generic-tooltip-content"]);
+    // Memoize tooltip content creation
+    const tooltipContent = useMemo(() => {
+        if (hide || !isVisible || !content)
+            return null;
+        return createPortal(jsx("div", { className: styles$q["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, "data-inline": displayInline, style: {
+                position: 'fixed',
+                top: `${tooltipPosition.top}px`,
+                left: `${tooltipPosition.left}px`,
+                visibility: tooltipPosition.top === 0 && tooltipPosition.left === 0 ? 'hidden' : 'visible',
+                ...overlayStyle
+            }, onMouseEnter: () => dissapearsWhenHover && setIsVisible(false), children: content }), document.body);
+    }, [isVisible, content, actualPosition, tooltipPosition, dissapearsWhenHover, overlayStyle, hide]);
     const handleMouseEnter = useCallback(() => {
-        if (hide || !content || !containerRef.current)
-            return;
-        if (timeoutRef.current) {
-            window.clearTimeout(timeoutRef.current);
-        }
-        if (showDelay > 0) {
-            timeoutRef.current = window.setTimeout(() => {
-                if (containerRef.current) {
-                    showTooltip(content, containerRef.current, position, dissapearsWhenHover);
-                }
-            }, showDelay);
-        }
-        else {
-            showTooltip(content, containerRef.current, position, dissapearsWhenHover);
-        }
-    }, [content, position, showDelay, hide, dissapearsWhenHover]);
+        setTooltipTimeout();
+    }, [setTooltipTimeout]);
     const handleMouseLeave = useCallback(() => {
-        if (timeoutRef.current) {
-            window.clearTimeout(timeoutRef.current);
-        }
-        hideTooltip();
-    }, []);
-    // Cleanup on unmount to prevent memory leaks
-    useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                window.clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-    // Hide tooltip when mousedown / drag events
-    useEffect(() => {
-        const handleDocumentMouseDown = () => {
-            if (timeoutRef.current) {
-                window.clearTimeout(timeoutRef.current);
-            }
-            hideTooltip();
-        };
-        document.addEventListener("mousedown", handleDocumentMouseDown);
-        return () => {
-            document.removeEventListener("mousedown", handleDocumentMouseDown);
-        };
-    }, []);
-    useEffect(() => {
-        ensureTooltipManager();
-    }, []);
-    return (jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$p["cw-tooltip"], children: children }));
+        clearTooltipTimeout();
+        setIsVisible(false);
+    }, [clearTooltipTimeout]);
+    return (jsxs("div", { ref: containerRef, className: styles$q["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, children: [tooltipContent, children] }));
 };
 
 function CwButton({ text, variant = 'solid', color = 'primary', className = '', icon = "", title, tooltipPosition = "bottom", children, ...buttonProps }) {
@@ -1114,7 +1142,7 @@ function CwModal(custModalProps) {
     return (jsx("div", { children: custModalProps.modalState && (jsxs("div", { className: custModalProps.classNameModalOverlay + " cwelltModalOverlay", children: [jsx("div", { className: "cwelltModalOverlayBg", onClick: custModalProps.onCloseModal }), jsx(Draggable, { disabled: isModalDisabled, axis: "both", nodeRef: draggableRef, children: jsxs("div", { className: custModalProps.classNameModal + " cwelltContainerModal", ref: draggableRef, style: widthModalDef !== "40em" ? modalStyle.widthCustomStyle : modalStyle.widthDefStyle, children: [jsxs("div", { className: "cwelltModalHeader", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [jsx("div", { className: "cwelltModalTitle", children: custModalProps.titleModal }), jsx("button", { className: "cwelltBtnCloseModal", onClick: custModalProps.onCloseModal, children: jsx("span", { className: "cwelltCloseIcon" }) })] }), jsx("div", { className: "cwelltModalBody", children: jsx("div", { className: "cwelltContainerModalBody", style: { position: "relative" }, children: custModalProps.children }) }), isHide === false ? (jsx("footer", { className: "legacy-modal-footer", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: custModalProps.onSaveModal, form: custModalProps.formSaveModal, hidden: custModalProps.HideBtnModal, type: custModalProps.HtmlSubmitModal }) })) : (jsx("div", { style: { display: "none" } }))] }) })] })) }));
 }
 
-var styles$o = {"overlayPositioned":"CwConfirmationPopup-module__overlayPositioned__11qYB","popup":"CwConfirmationPopup-module__popup__ahPjM","message":"CwConfirmationPopup-module__message__MnNL4","buttons":"CwConfirmationPopup-module__buttons__fGYYE","button":"CwConfirmationPopup-module__button__ugYQE","confirmButton":"CwConfirmationPopup-module__confirmButton__rTP4S","cancelButton":"CwConfirmationPopup-module__cancelButton__Ry694"};
+var styles$p = {"overlayPositioned":"CwConfirmationPopup-module__overlayPositioned__11qYB","popup":"CwConfirmationPopup-module__popup__ahPjM","message":"CwConfirmationPopup-module__message__MnNL4","buttons":"CwConfirmationPopup-module__buttons__fGYYE","button":"CwConfirmationPopup-module__button__ugYQE","confirmButton":"CwConfirmationPopup-module__confirmButton__rTP4S","cancelButton":"CwConfirmationPopup-module__cancelButton__Ry694"};
 
 function CwConfirmationPopup(props) {
     const { isOpen, onConfirm, onCancel, message = "Are you sure you want to proceed?", confirmText = "Confirm", cancelText = "Cancel", placement = 'bottom', children } = props;
@@ -1178,15 +1206,15 @@ function CwConfirmationPopup(props) {
             onCancel();
         }
     };
-    return (jsxs(Fragment, { children: [renderChildren(), isOpen && (jsx("div", { className: styles$o.overlayPositioned, onClick: handleOverlayClick, children: jsxs("div", { ref: popupRef, className: styles$o.popup, style: {
+    return (jsxs(Fragment, { children: [renderChildren(), isOpen && (jsx("div", { className: styles$p.overlayPositioned, onClick: handleOverlayClick, children: jsxs("div", { ref: popupRef, className: styles$p.popup, style: {
                         position: 'absolute',
                         top: `${position.top}px`,
                         left: `${position.left}px`,
                         transform: 'none'
-                    }, children: [jsx("p", { className: styles$o.message, children: message }), jsxs("div", { className: styles$o.buttons, children: [jsx("button", { className: `${styles$o.button} ${styles$o.confirmButton}`, onClick: onConfirm, children: confirmText }), jsx("button", { className: `${styles$o.button} ${styles$o.cancelButton}`, onClick: onCancel, children: cancelText })] })] }) }))] }));
+                    }, children: [jsx("p", { className: styles$p.message, children: message }), jsxs("div", { className: styles$p.buttons, children: [jsx("button", { className: `${styles$p.button} ${styles$p.confirmButton}`, onClick: onConfirm, children: confirmText }), jsx("button", { className: `${styles$p.button} ${styles$p.cancelButton}`, onClick: onCancel, children: cancelText })] })] }) }))] }));
 }
 
-var styles$n = {"cw-dialog-main":"cw-dialog-module__cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module__cw-dialog-button-close__9GRd8"};
+var styles$o = {"cw-dialog-main":"cw-dialog-module__cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module__cw-dialog-button-close__9GRd8"};
 
 // Helper function to parse size values
 const parseSize = (size) => {
@@ -1459,7 +1487,7 @@ const CwDialog = props => {
             }
         }
     }, [open]);
-    const header = useMemo(() => (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: headline }), customHeader || (jsx("button", { className: styles$n["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
+    const header = useMemo(() => (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: headline }), customHeader || (jsx("button", { className: styles$o["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
     const content = useMemo(() => (jsx("section", { children: children })), [children]);
     const footer = useMemo(() => (jsx("footer", { children: customFooter || (jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: onSave, tooltipPosition: "top", disabled: disableSave, "data-testid": "cw-dialog-save" })) })), [customFooter, onSave, disableSave]);
     const resizeHandles = useMemo(() => size.autoHeight
@@ -1486,7 +1514,7 @@ const CwDialog = props => {
             : `${convertFromPx(size.height, size.heightUnit)}${size.heightUnit}`;
         return { displayWidth, displayHeight };
     }, [size.width, size.height, size.widthUnit, size.heightUnit, size.autoHeight]);
-    const dialogContent = (jsx("div", { "data-has-scrim": hasScrim, className: styles$n["cw-dialog-main"], onMouseDown: handleScrimMouseDown, onMouseUp: handleScrimMouseUpOrLeave, onMouseLeave: handleScrimMouseUpOrLeave, "data-pressing": isPressingScrim, children: jsxs("dialog", { ...domProps, ref: dialogRef, style: {
+    const dialogContent = (jsx("div", { "data-has-scrim": hasScrim, className: styles$o["cw-dialog-main"], onMouseDown: handleScrimMouseDown, onMouseUp: handleScrimMouseUpOrLeave, onMouseLeave: handleScrimMouseUpOrLeave, "data-pressing": isPressingScrim, children: jsxs("dialog", { ...domProps, ref: dialogRef, style: {
                 left: `${position.x}px`,
                 top: `${position.y}px`,
                 width: displayDimensions.displayWidth,
@@ -1689,7 +1717,7 @@ function CwAlign(props) {
         }, children: props.children }));
 }
 
-var styles$m = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module__clickable__Y-V3X","disabled":"cw-card-module__disabled__0wHh1","loading":"cw-card-module__loading__-fzlx","content":"cw-card-module__content__ma9qy","headerContent":"cw-card-module__headerContent__x4Jfl","footerTags":"cw-card-module__footerTags__80sSW","loadingOverlay":"cw-card-module__loadingOverlay__8-zVV"};
+var styles$n = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module__clickable__Y-V3X","disabled":"cw-card-module__disabled__0wHh1","loading":"cw-card-module__loading__-fzlx","content":"cw-card-module__content__ma9qy","headerContent":"cw-card-module__headerContent__x4Jfl","footerTags":"cw-card-module__footerTags__80sSW","loadingOverlay":"cw-card-module__loadingOverlay__8-zVV"};
 
 /**
 * CwCard - A simple card component for displaying content in a contained format
@@ -1713,11 +1741,11 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     // Construct class names using CSS modules
     const cardClassNames = [
         'cw-card',
-        styles$m.card,
+        styles$n.card,
         className,
-        clickable ? styles$m.clickable : '',
-        disabled ? styles$m.disabled : '',
-        isLoading ? styles$m.loading : '',
+        clickable ? styles$n.clickable : '',
+        disabled ? styles$n.disabled : '',
+        isLoading ? styles$n.loading : '',
     ].filter(Boolean).join(' ');
     // Handle click event when card is clickable
     const handleClick = () => {
@@ -1734,15 +1762,15 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     // Determine if footer should be rendered
     const hasFooter = hasChips || footer || (hasActions && direction === "row");
     // Actions component to reuse
-    const ActionsComponent = hasActions && !disabled ? (jsxs("div", { className: styles$m.actions, children: [extraActions ?? null, onEdit && jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
+    const ActionsComponent = hasActions && !disabled ? (jsxs("div", { className: styles$n.actions, children: [extraActions ?? null, onEdit && jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
     return (jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && {
             role: 'button',
             tabIndex: 0,
             onClick: handleClick,
-        }), "data-variant": variant, "data-direction": direction, children: [hasHeader && (jsxs("header", { children: [(title || subtitle) && (jsxs("div", { className: styles$m.headerContent, "data-alignment": alignment, children: [title && jsx("h5", { children: title }), subtitle && jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), jsx("div", { className: styles$m.content, children: children }), hasFooter && (jsxs("footer", { children: [hasChips && (jsx("div", { className: styles$m.footerTags, children: chips.map((chip, index) => (jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$m.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsx("div", { className: styles$m.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (jsx("div", { className: styles$m.loadingOverlay, children: jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
+        }), "data-variant": variant, "data-direction": direction, children: [hasHeader && (jsxs("header", { children: [(title || subtitle) && (jsxs("div", { className: styles$n.headerContent, "data-alignment": alignment, children: [title && jsx("h5", { children: title }), subtitle && jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), jsx("div", { className: styles$n.content, children: children }), hasFooter && (jsxs("footer", { children: [hasChips && (jsx("div", { className: styles$n.footerTags, children: chips.map((chip, index) => (jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$n.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsx("div", { className: styles$n.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (jsx("div", { className: styles$n.loadingOverlay, children: jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
 };
 
-var styles$l = {"cardContainer":"cw-card-list-module__cardContainer__l3YEh","pagination":"cw-card-list-module__pagination__5Ay78","pageInfo":"cw-card-list-module__pageInfo__uiMel","loading":"cw-card-list-module__loading__cYpND","emptyState":"cw-card-list-module__emptyState__RlqiS","sortControls":"cw-card-list-module__sortControls__mWgZA"};
+var styles$m = {"cardContainer":"cw-card-list-module__cardContainer__l3YEh","pagination":"cw-card-list-module__pagination__5Ay78","pageInfo":"cw-card-list-module__pageInfo__uiMel","loading":"cw-card-list-module__loading__cYpND","emptyState":"cw-card-list-module__emptyState__RlqiS","sortControls":"cw-card-list-module__sortControls__mWgZA"};
 
 function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey, ...htmlProps }) {
     const [currentPage, setCurrentPage] = useState(1);
@@ -1776,10 +1804,10 @@ function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', default
         '--card-width': `${defaultCardWidth}px`,
         '--card-gap': `${cardGap}px`
     };
-    return (jsxs("div", { ...htmlProps, children: [sortOptions.length > 0 && (jsxs("div", { className: styles$l.sortControls, children: [jsx("label", { htmlFor: "cardlist-sort-select", children: "Sort by:" }), jsx("select", { id: "cardlist-sort-select", value: sortKey, onChange: (e) => handleSortChange(e.target.value), className: styles$l.sortSelect, children: sortOptions.map(option => (jsx("option", { value: option.key, children: option.label }, option.key))) }), jsx("button", { onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'), className: `cw-button-icon ${sortDirection === 'asc' ? 'cwi-arrow-up' : 'cwi-arrow-down'}`, title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}` })] })), isLoading ? (jsx("div", { className: styles$l.loading, children: jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsx("div", { className: styles$l.emptyState, children: emptyState || jsx("p", { children: "No items to display" }) })) : (jsxs(Fragment, { children: [jsx("div", { className: `${styles$l.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsx("div", { className: styles$l.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (jsxs("div", { className: styles$l.pagination, children: [jsx("button", { disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)), className: "cw-button-icon cwi-chevron-left" }), jsxs("span", { className: styles$l.pageInfo, children: [currentPage, " of ", totalPages] }), jsx("button", { disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), className: "cw-button-icon cwi-chevron-right" })] }))] }))] }));
+    return (jsxs("div", { ...htmlProps, children: [sortOptions.length > 0 && (jsxs("div", { className: styles$m.sortControls, children: [jsx("label", { htmlFor: "cardlist-sort-select", children: "Sort by:" }), jsx("select", { id: "cardlist-sort-select", value: sortKey, onChange: (e) => handleSortChange(e.target.value), className: styles$m.sortSelect, children: sortOptions.map(option => (jsx("option", { value: option.key, children: option.label }, option.key))) }), jsx("button", { onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'), className: `cw-button-icon ${sortDirection === 'asc' ? 'cwi-arrow-up' : 'cwi-arrow-down'}`, title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}` })] })), isLoading ? (jsx("div", { className: styles$m.loading, children: jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsx("div", { className: styles$m.emptyState, children: emptyState || jsx("p", { children: "No items to display" }) })) : (jsxs(Fragment, { children: [jsx("div", { className: `${styles$m.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsx("div", { className: styles$m.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (jsxs("div", { className: styles$m.pagination, children: [jsx("button", { disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)), className: "cw-button-icon cwi-chevron-left" }), jsxs("span", { className: styles$m.pageInfo, children: [currentPage, " of ", totalPages] }), jsx("button", { disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), className: "cw-button-icon cwi-chevron-right" })] }))] }))] }));
 }
 
-var styles$k = {"cw-accordion":"cw-accordion-module__cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module__cw-accordion-body__xlI8b"};
+var styles$l = {"cw-accordion":"cw-accordion-module__cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module__cw-accordion-body__xlI8b"};
 
 /**
  *
@@ -1796,7 +1824,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
         setVisible_accordionBody(!isVisible_accordionBody);
     };
     // #endregion
-    return (jsxs("div", { className: styles$k["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxs("header", { onClick: () => showAccordionBody(), children: [jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsx("button", { className: "cw-button-icon" })] }), jsx("div", { className: styles$k["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
+    return (jsxs("div", { className: styles$l["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxs("header", { onClick: () => showAccordionBody(), children: [jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsx("button", { className: "cw-button-icon" })] }), jsx("div", { className: styles$l["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
 }
 
 /**
@@ -2038,7 +2066,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                                             minWidth: 50,
                                             maxWidth: columnWidths[col.key] ?? col.width
                                         }),
-                                    }, children: [jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsx("span", { children: col.title }), col.sortable && col.dataIndex && (jsx(CwIcon, { style: { fontSize: "1.25em" }, iconId: sortConfig.key !== col.dataIndex
+                                    }, children: [jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsx("span", { children: col.title }), col.sortable && col.dataIndex && (jsx(CwIcon, { iconId: sortConfig.key !== col.dataIndex
                                                         ? "sortable"
                                                         : sortConfig.direction === "asc"
                                                             ? "sortable-asc"
@@ -2054,7 +2082,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                                 }, min: 1, max: totalPages }), jsx("span", { children: "/" }), jsx("span", { children: totalPages }), jsx(CwButton, { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
 }
 
-var styles$j = {"dropIndicator":"cw-sortable-table-module__dropIndicator__ov-Jz","dragging":"cw-sortable-table-module__dragging__MrLrz","skeletonRow":"cw-sortable-table-module__skeletonRow__vyD0M","skeleton":"cw-sortable-table-module__skeleton__QGXAD","saveBar":"cw-sortable-table-module__saveBar__3OdoZ cw-flex-row cw-align-center-center cw-gap-small"};
+var styles$k = {"dropIndicator":"cw-sortable-table-module__dropIndicator__ov-Jz","dragging":"cw-sortable-table-module__dragging__MrLrz","skeletonRow":"cw-sortable-table-module__skeletonRow__vyD0M","skeleton":"cw-sortable-table-module__skeleton__QGXAD","saveBar":"cw-sortable-table-module__saveBar__3OdoZ cw-flex-row cw-align-center-center cw-gap-small"};
 
 /**
  * Hook that provides state management for CwSortableTable.
@@ -2117,9 +2145,9 @@ function useSortableTable(initialItems) {
 }
 
 // ─── Drop indicator row ───────────────────────────────────────────────────────
-const DropIndicatorRow = ({ colSpan }) => (jsx("tr", { className: styles$j.dropIndicator, "aria-hidden": true, children: jsx("td", { colSpan: colSpan, children: jsx("div", {}) }) }));
+const DropIndicatorRow = ({ colSpan }) => (jsx("tr", { className: styles$k.dropIndicator, "aria-hidden": true, children: jsx("td", { colSpan: colSpan, children: jsx("div", {}) }) }));
 // ─── Loading skeleton ─────────────────────────────────────────────────────────
-const LoadingRows = ({ colSpan }) => (jsx(Fragment, { children: Array.from({ length: 4 }).map((_, i) => (jsx("tr", { className: styles$j.skeletonRow, children: jsx("td", { colSpan: colSpan, children: jsx("div", { className: styles$j.skeleton }) }) }, i))) }));
+const LoadingRows = ({ colSpan }) => (jsx(Fragment, { children: Array.from({ length: 4 }).map((_, i) => (jsx("tr", { className: styles$k.skeletonRow, children: jsx("td", { colSpan: colSpan, children: jsx("div", { className: styles$k.skeleton }) }) }, i))) }));
 // ─── Component ────────────────────────────────────────────────────────────────
 /**
  * CwSortableTable
@@ -2206,11 +2234,11 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
         return items.map((item, index) => {
             const key = item[rowKey];
             const isDragging = draggedItem?.[rowKey] === key;
-            return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && (jsx(DropIndicatorRow, { colSpan: totalCols })), jsxs("tr", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, className: isDragging ? styles$j.dragging : "", children: [showHandle && (jsx("td", { className: "cw-table-col-action", children: jsx(CwIcon, { iconId: "grip-dots", color: "neutral", style: { opacity: 0.75 } }) })), columns.map(col => (jsx("td", { className: col.className ?? "", style: col.width ? { width: col.width } : undefined, children: renderCell(item, col) }, `${String(key)}_${col.key}`)))] }), index === items.length - 1 && dropIndicatorIndex === items.length && (jsx(DropIndicatorRow, { colSpan: totalCols }))] }, String(key)));
+            return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && (jsx(DropIndicatorRow, { colSpan: totalCols })), jsxs("tr", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, className: isDragging ? styles$k.dragging : "", children: [showHandle && (jsx("td", { className: "cw-table-col-action", children: jsx(CwIcon, { iconId: "grip-dots", color: "neutral", style: { opacity: 0.75 } }) })), columns.map(col => (jsx("td", { className: col.className ?? "", style: col.width ? { width: col.width } : undefined, children: renderCell(item, col) }, `${String(key)}_${col.key}`)))] }), index === items.length - 1 && dropIndicatorIndex === items.length && (jsx(DropIndicatorRow, { colSpan: totalCols }))] }, String(key)));
         });
     };
     // ── Render ──────────────────────────────────────────────────────────────
-    return (jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, children: [jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsx("thead", { children: jsxs("tr", { children: [showHandle && jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsx("tbody", { children: renderBody() })] }), hasChanges && (jsxs("footer", { className: styles$j.saveBar, children: [jsx(CwButton, { variant: "outline", color: "neutral", icon: "undo", text: discardLabel, onClick: handleDiscard }), jsx(CwButton, { variant: "solid", color: "primary", icon: "save", text: saveLabel, onClick: () => handleSave(onReorder) })] }))] }));
+    return (jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, children: [jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsx("thead", { children: jsxs("tr", { children: [showHandle && jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsx("tbody", { children: renderBody() })] }), hasChanges && (jsxs("footer", { className: styles$k.saveBar, children: [jsx(CwButton, { variant: "outline", color: "neutral", icon: "undo", text: discardLabel, onClick: handleDiscard }), jsx(CwButton, { variant: "solid", color: "primary", icon: "save", text: saveLabel, onClick: () => handleSave(onReorder) })] }))] }));
 }
 
 /**
@@ -2409,7 +2437,7 @@ function CwTableServerSide({ columns, data, totalItems, pagination = false, page
                                 }, min: 1, max: totalPages }), jsx("span", { children: "/" }), jsx("span", { children: totalPages }), jsx(CwButton, { onClick: () => handlePageChange(state.page + 1), disabled: state.page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: state.page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
 }
 
-var styles$i = {"cw-tabs":"cw-tabs-module__cw-tabs__1pmji","badge":"cw-tabs-module__badge__AmVxW","cw-tabs-content":"cw-tabs-module__cw-tabs-content__HTp8d"};
+var styles$j = {"cw-tabs":"cw-tabs-module__cw-tabs__1pmji","badge":"cw-tabs-module__badge__AmVxW","cw-tabs-content":"cw-tabs-module__cw-tabs-content__HTp8d"};
 
 const TabIcon = ({ icon }) => {
     if (!icon)
@@ -2459,7 +2487,7 @@ function CwTabs(CwTabsProps) {
     const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
         ? { minWidth: CwTabsProps.tabsListWidth }
         : undefined;
-    return (jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$i['cw-tabs'] + (CwTabsProps.className ? ` ${CwTabsProps.className}` : "") + "", style: CwTabsProps.style, "data-tabs-position": position, children: [jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, "data-tab-key": tab.key, children: [jsx(TabIcon, { icon: tab.icon }), tab.title, (tab.badge !== undefined || tab.badgeColor) && (jsx("span", { className: styles$i['badge'], style: tab.badgeColor ? { backgroundColor: tab.badgeColor, color: getContrastColor(tab.badgeColor) } : undefined, children: tab.badge }))] }, tab.key))) }), jsx("div", { className: styles$i['cw-tabs-content'], "data-active-tab-key": activeTab ?? undefined, children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
+    return (jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$j['cw-tabs'] + (CwTabsProps.className ? ` ${CwTabsProps.className}` : "") + "", style: CwTabsProps.style, "data-tabs-position": position, children: [jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, "data-tab-key": tab.key, children: [jsx(TabIcon, { icon: tab.icon }), tab.title, (tab.badge !== undefined || tab.badgeColor) && (jsx("span", { className: styles$j['badge'], style: tab.badgeColor ? { backgroundColor: tab.badgeColor, color: getContrastColor(tab.badgeColor) } : undefined, children: tab.badge }))] }, tab.key))) }), jsx("div", { className: styles$j['cw-tabs-content'], "data-active-tab-key": activeTab ?? undefined, children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
 }
 
 /**
@@ -2486,7 +2514,7 @@ const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detail
     return (jsxs("details", { ref: myRef, ...detailsProps, className: "cw-expandable", children: [jsx("summary", { children: briefing }), children && jsx("section", { children: children })] }));
 };
 
-var styles$h = {"cw-master-detail":"cw-master-detail-module__cw-master-detail__O8-FA","resizer":"cw-master-detail-module__resizer__hvGhL","detail":"cw-master-detail-module__detail__BG4Dm","detail-empty":"cw-master-detail-module__detail-empty__KFScK"};
+var styles$i = {"cw-master-detail":"cw-master-detail-module__cw-master-detail__O8-FA","resizer":"cw-master-detail-module__resizer__hvGhL","detail":"cw-master-detail-module__detail__BG4Dm","detail-empty":"cw-master-detail-module__detail-empty__KFScK"};
 
 const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, detailContent, emptyDetail, searchPlaceholder = 'Search...', onSearch, masterHeader, masterFooter, masterWidth: initialWidth = 320, minMasterWidth = 240, maxMasterWidth = 500, resizable = true, showSearch = true, }) => {
     const [masterWidth, setMasterWidth] = useState(initialWidth);
@@ -2522,10 +2550,10 @@ const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, de
             document.body.style.userSelect = '';
         };
     }, [isResizing, minMasterWidth, maxMasterWidth]);
-    const rootClassName = [styles$h['cw-master-detail'], className].filter(Boolean).join(' ');
-    return (jsxs("div", { id: id, ref: containerRef, className: rootClassName, style: style, children: [jsxs("aside", { style: { width: masterWidth, minWidth: masterWidth }, children: [showSearch && (jsx("search", { children: jsx("input", { type: "text", placeholder: searchPlaceholder, onChange: (e) => onSearch?.(e.target.value) }) })), masterHeader && (jsx("header", { children: masterHeader })), jsx("ul", { children: items.map((item) => (jsx("li", { "data-master-key": item.key, "data-selected": item.key === selectedKey, "data-disabled": item.disabled, onClick: () => onSelect?.(item.key), children: item.content }, item.key))) }), masterFooter && (jsx("footer", { children: masterFooter }))] }), resizable && (jsx("div", { className: styles$h.resizer, "data-resizing": isResizing, onMouseDown: handleMouseDown })), jsx("section", { className: styles$h.detail, children: selectedKey && detailContent
+    const rootClassName = [styles$i['cw-master-detail'], className].filter(Boolean).join(' ');
+    return (jsxs("div", { id: id, ref: containerRef, className: rootClassName, style: style, children: [jsxs("aside", { style: { width: masterWidth, minWidth: masterWidth }, children: [showSearch && (jsx("search", { children: jsx("input", { type: "text", placeholder: searchPlaceholder, onChange: (e) => onSearch?.(e.target.value) }) })), masterHeader && (jsx("header", { children: masterHeader })), jsx("ul", { children: items.map((item) => (jsx("li", { "data-master-key": item.key, "data-selected": item.key === selectedKey, "data-disabled": item.disabled, onClick: () => onSelect?.(item.key), children: item.content }, item.key))) }), masterFooter && (jsx("footer", { children: masterFooter }))] }), resizable && (jsx("div", { className: styles$i.resizer, "data-resizing": isResizing, onMouseDown: handleMouseDown })), jsx("section", { className: styles$i.detail, children: selectedKey && detailContent
                     ? detailContent
-                    : (jsx("div", { className: styles$h['detail-empty'], children: emptyDetail ?? 'Select an item to view details' })) })] }));
+                    : (jsx("div", { className: styles$i['detail-empty'], children: emptyDetail ?? 'Select an item to view details' })) })] }));
 };
 
 /**
@@ -2541,15 +2569,16 @@ const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, de
  *   emptyValue="N/A"
  * />
  */
-const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "row", ...htmlProps }) => {
-    return (jsx("dl", { className: `cw-keyvalue-list ${className}`, ...htmlProps, children: items.map(item => (jsxs("div", { className: `cw-keyvalue-list-item cw-flex-${direction}`, children: [jsx("dt", { children: item.label }), jsx("dd", { children: item.value !== undefined && item.value !== null && item.value !== ""
+const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "row", groupLayout, itemLayout, ...htmlProps }) => {
+    const itemDirection = itemLayout?.direction ?? direction;
+    return (jsx("dl", { className: `cw-keyvalue-list ${className}`, "data-direction": groupLayout?.direction, "data-align": groupLayout?.align, "data-justify": groupLayout?.justify, "data-gap": groupLayout?.gap, ...htmlProps, children: items.map(item => (jsxs("div", { className: `cw-keyvalue-list-item cw-flex-${itemDirection}`, "data-align": itemLayout?.align, "data-justify": itemLayout?.justify, "data-gap": itemLayout?.gap, children: [jsx("dt", { children: item.label }), jsx("dd", { children: item.value !== undefined && item.value !== null && item.value !== ""
                         ? (React__default.isValidElement(item.value)
                             ? item.value
                             : `${item.value}${item.suffix ? ` ${item.suffix}` : ''}`)
                         : emptyValue })] }, item.key))) }));
 };
 
-var styles$g = {"sortableList":"cw-sortable-list-module__sortableList__PyLO-","sortableItem":"cw-sortable-list-module__sortableItem__FAnn2","readOnly":"cw-sortable-list-module__readOnly__r7GcH","dragging":"cw-sortable-list-module__dragging__MD715","moved":"cw-sortable-list-module__moved__sE6-N","expandedContent":"cw-sortable-list-module__expandedContent__Kocna","sortableHandle":"cw-sortable-list-module__sortableHandle__HvYBK","sortableContent":"cw-sortable-list-module__sortableContent__C6JhR","sortableTitle":"cw-sortable-list-module__sortableTitle__EgWXr","sortableExtraContent":"cw-sortable-list-module__sortableExtraContent__s4LSv","sortableActions":"cw-sortable-list-module__sortableActions__gwQOU","dropIndicator":"cw-sortable-list-module__dropIndicator__MNSF-","emptyMessage":"cw-sortable-list-module__emptyMessage__gMpaL"};
+var styles$h = {"sortableList":"cw-sortable-list-module__sortableList__PyLO-","sortableItem":"cw-sortable-list-module__sortableItem__FAnn2","readOnly":"cw-sortable-list-module__readOnly__r7GcH","dragging":"cw-sortable-list-module__dragging__MD715","moved":"cw-sortable-list-module__moved__sE6-N","expandedContent":"cw-sortable-list-module__expandedContent__Kocna","sortableHandle":"cw-sortable-list-module__sortableHandle__HvYBK","sortableContent":"cw-sortable-list-module__sortableContent__C6JhR","sortableTitle":"cw-sortable-list-module__sortableTitle__EgWXr","sortableExtraContent":"cw-sortable-list-module__sortableExtraContent__s4LSv","sortableActions":"cw-sortable-list-module__sortableActions__gwQOU","dropIndicator":"cw-sortable-list-module__dropIndicator__MNSF-","emptyMessage":"cw-sortable-list-module__emptyMessage__gMpaL"};
 
 function CwSortableList({ items, onReorder, renderItem, className = '', movedItems = new Set(), emptyMessage = "No elements to show", readOnly = false, maxHeight = "300px", }) {
     const [draggedItem, setDraggedItem] = useState(null);
@@ -2612,15 +2641,15 @@ function CwSortableList({ items, onReorder, renderItem, className = '', movedIte
         }
     };
     if (items.length === 0) {
-        return (jsx("div", { className: `${styles$g.sortableList} ${styles$g.emptyState} ${className}`, children: jsx("div", { className: styles$g.emptyMessage, children: emptyMessage }) }));
+        return (jsx("div", { className: `${styles$h.sortableList} ${styles$h.emptyState} ${className}`, children: jsx("div", { className: styles$h.emptyMessage, children: emptyMessage }) }));
     }
-    return (jsx("div", { className: `${styles$g.sortableList} ${className}`, style: { maxHeight }, children: items.map((item, index) => {
+    return (jsx("div", { className: `${styles$h.sortableList} ${className}`, style: { maxHeight }, children: items.map((item, index) => {
             const { title, extraContent, actions, showHandle = true, expandedContent } = renderItem(item);
             const isDragging = draggedItem?.id === item.id;
             const isMoved = movedItems.has(item.id);
             const canExpand = Boolean(expandedContent);
             const isExpanded = expandedItems.has(item.id);
-            return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && jsx("div", { className: styles$g.dropIndicator }), jsxs("div", { className: `${styles$g.sortableItem} ${isDragging ? styles$g.dragging : ''} ${isMoved ? styles$g.moved : ''} ${readOnly ? styles$g.readOnly : ''}`, draggable: !readOnly, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [jsxs("header", { children: [canExpand ? (jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsx("div", { className: styles$g.sortableHandle, children: jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxs("div", { className: styles$g.sortableContent, children: [jsx("div", { className: styles$g.sortableTitle, children: title }), extraContent && jsx("div", { className: styles$g.sortableExtraContent, children: extraContent })] }), jsx("div", { className: styles$g.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsx("div", { className: styles$g.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsx("div", { className: styles$g.dropIndicator }))] }, item.id));
+            return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && jsx("div", { className: styles$h.dropIndicator }), jsxs("div", { className: `${styles$h.sortableItem} ${isDragging ? styles$h.dragging : ''} ${isMoved ? styles$h.moved : ''} ${readOnly ? styles$h.readOnly : ''}`, draggable: !readOnly, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [jsxs("header", { children: [canExpand ? (jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsx("div", { className: styles$h.sortableHandle, children: jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxs("div", { className: styles$h.sortableContent, children: [jsx("div", { className: styles$h.sortableTitle, children: title }), extraContent && jsx("div", { className: styles$h.sortableExtraContent, children: extraContent })] }), jsx("div", { className: styles$h.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsx("div", { className: styles$h.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsx("div", { className: styles$h.dropIndicator }))] }, item.id));
         }) }));
 }
 
@@ -2797,7 +2826,7 @@ function CwFileUpload(fileUploadProps) {
     return (jsxs("div", { children: [jsxs("div", { className: "row", children: [jsx("input", { className: "cw-button", type: "file", accept: fileUploadProps.accept, readOnly: true, placeholder: "No file selected...", onChange: handleFileChange }), previewURL && (jsx("div", { className: "row", children: jsx("img", { src: previewURL, alt: "Preview", style: { maxWidth: "200px", maxHeight: "200px" } }) }))] }), error && jsx("div", { className: "row error", children: error }), jsx("div", { className: "row", children: jsxs("label", { children: ["Please note: File/image has to be in ", fileUploadProps.acceptString, " format", fileUploadProps.sizeString && `, ${fileUploadProps.sizeString}`] }) })] }));
 }
 
-var styles$f = {"fileUploadContainer":"cw-file-upload-multiple-module__fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module__hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module__uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module__uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module__uploadTitle__gjRk8","uploadSubtitle":"cw-file-upload-multiple-module__uploadSubtitle__Z0S5t","filesContainer":"cw-file-upload-multiple-module__filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module__fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module__fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module__fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module__fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module__fileName__DjepK","fileSize":"cw-file-upload-multiple-module__fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module__smallButton__siUAh"};
+var styles$g = {"fileUploadContainer":"cw-file-upload-multiple-module__fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module__hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module__uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module__uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module__uploadTitle__gjRk8","uploadSubtitle":"cw-file-upload-multiple-module__uploadSubtitle__Z0S5t","filesContainer":"cw-file-upload-multiple-module__filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module__fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module__fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module__fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module__fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module__fileName__DjepK","fileSize":"cw-file-upload-multiple-module__fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module__smallButton__siUAh"};
 
 const DEFAULT_LABELS = {
     uploadDisabled: 'Upload disabled',
@@ -2964,12 +2993,12 @@ function CwFileUploadMultiple(fileUploadProps) {
             }
         }
     };
-    return (jsxs("div", { className: `${styles$f.fileUploadContainer} ${fileUploadProps.className}`, children: [jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelectInternal, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles$f.hiddenInput }), selectedFiles.length === 0 && !existingFile ? (jsxs("div", { className: `${styles$f.uploadArea} ${fileUploadProps.disabled ? styles$f.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsx(CwIcon, { iconId: "upload" }), jsx("p", { className: `${styles$f.uploadTitle}`, children: fileUploadProps.disabled ? labels.uploadDisabled : labels.clickToUpload }), jsxs("p", { className: `${styles$f.uploadSubtitle}`, children: [fileUploadProps.accept ? labels.acceptedFiles(fileUploadProps.accept) : labels.allTypesAccepted, !fileUploadProps.multiple && ` ${labels.singleFileOnly}`] })] })) : selectedFiles.length === 0 && existingFile ? (jsxs("div", { className: styles$f.filesContainer, children: [jsxs("div", { className: styles$f.fileItem, children: [jsxs("div", { className: styles$f.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$f.fileExtension, children: getFileExtension(existingFile) })] }), jsx("div", { className: styles$f.fileInfo, children: jsx("p", { className: styles$f.fileName, children: existingFile }) }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => {
+    return (jsxs("div", { className: `${styles$g.fileUploadContainer} ${fileUploadProps.className}`, children: [jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelectInternal, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles$g.hiddenInput }), selectedFiles.length === 0 && !existingFile ? (jsxs("div", { className: `${styles$g.uploadArea} ${fileUploadProps.disabled ? styles$g.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsx(CwIcon, { iconId: "upload" }), jsx("p", { className: `${styles$g.uploadTitle}`, children: fileUploadProps.disabled ? labels.uploadDisabled : labels.clickToUpload }), jsxs("p", { className: `${styles$g.uploadSubtitle}`, children: [fileUploadProps.accept ? labels.acceptedFiles(fileUploadProps.accept) : labels.allTypesAccepted, !fileUploadProps.multiple && ` ${labels.singleFileOnly}`] })] })) : selectedFiles.length === 0 && existingFile ? (jsxs("div", { className: styles$g.filesContainer, children: [jsxs("div", { className: styles$g.fileItem, children: [jsxs("div", { className: styles$g.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$g.fileExtension, children: getFileExtension(existingFile) })] }), jsx("div", { className: styles$g.fileInfo, children: jsx("p", { className: styles$g.fileName, children: existingFile }) }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => {
                                     setExistingFile(undefined);
                                     if (fileUploadProps.onSelect) {
                                         fileUploadProps.onSelect(null);
                                     }
-                                }, disabled: fileUploadProps.disabled, className: styles$f.smallButton })] }), jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxs("div", { className: styles$f.filesContainer, children: [jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsx("small", { className: styles$f.filesCount, children: labels.filesSelected(selectedFiles.length) }), !fileUploadProps.hideClearAll && (jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: labels.clearAll }))] }), selectedFiles.map((file, index) => (jsxs("div", { className: styles$f.fileItem, children: [jsxs("div", { className: styles$f.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$f.fileExtension, children: getFileExtension(file.name) })] }), jsxs("div", { className: styles$f.fileInfo, children: [jsx("p", { className: styles$f.fileName, children: file.name }), jsxs("p", { className: styles$f.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$f.smallButton })] }, index))), fileUploadProps.multiple && (jsx(CwButton, { text: labels.addMoreFiles, icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
+                                }, disabled: fileUploadProps.disabled, className: styles$g.smallButton })] }), jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxs("div", { className: styles$g.filesContainer, children: [jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsx("small", { className: styles$g.filesCount, children: labels.filesSelected(selectedFiles.length) }), !fileUploadProps.hideClearAll && (jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: labels.clearAll }))] }), selectedFiles.map((file, index) => (jsxs("div", { className: styles$g.fileItem, children: [jsxs("div", { className: styles$g.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$g.fileExtension, children: getFileExtension(file.name) })] }), jsxs("div", { className: styles$g.fileInfo, children: [jsx("p", { className: styles$g.fileName, children: file.name }), jsxs("p", { className: styles$g.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$g.smallButton })] }, index))), fileUploadProps.multiple && (jsx(CwButton, { text: labels.addMoreFiles, icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
 }
 
 function CwInput(CwInputProps) {
@@ -3010,7 +3039,7 @@ function CwDigit(props) {
     return (jsx("div", { className: "cw-input-text", children: jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsx("input", { type: "number", ...inputProps }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
 }
 
-var styles$e = {"colorPreview":"cw-color-picker-module__colorPreview__ylJcD","hueBar":"cw-color-picker-module__hueBar__bFhyC","hueBarSlider":"cw-color-picker-module__hueBarSlider__D53IV","colorPickerInteractiveArea":"cw-color-picker-module__colorPickerInteractiveArea__KZFR1","colorArea":"cw-color-picker-module__colorArea__xgpSE","colorAreaOverlay":"cw-color-picker-module__colorAreaOverlay__pmgOc","hueBackground":"cw-color-picker-module__hueBackground__Mks78","whiteGradient":"cw-color-picker-module__whiteGradient__Bt-fU","blackGradient":"cw-color-picker-module__blackGradient__VnEKJ","colorAreaCursor":"cw-color-picker-module__colorAreaCursor__lotg3"};
+var styles$f = {"colorPreview":"cw-color-picker-module__colorPreview__ylJcD","hueBar":"cw-color-picker-module__hueBar__bFhyC","hueBarSlider":"cw-color-picker-module__hueBarSlider__D53IV","colorPickerInteractiveArea":"cw-color-picker-module__colorPickerInteractiveArea__KZFR1","colorArea":"cw-color-picker-module__colorArea__xgpSE","colorAreaOverlay":"cw-color-picker-module__colorAreaOverlay__pmgOc","hueBackground":"cw-color-picker-module__hueBackground__Mks78","whiteGradient":"cw-color-picker-module__whiteGradient__Bt-fU","blackGradient":"cw-color-picker-module__blackGradient__VnEKJ","colorAreaCursor":"cw-color-picker-module__colorAreaCursor__lotg3"};
 
 const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }) => {
     const [rgb, setRgb] = useState({ r: 255, g: 255, b: 255 });
@@ -3213,13 +3242,13 @@ const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }
     // Calculate background color for the main area based on current hue
     const hueColor = hsvToRgb(hsv.h, 100, 100);
     const hueHex = rgbToHex(hueColor.r, hueColor.g, hueColor.b);
-    return (jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsx("div", { className: styles$e.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxs("div", { children: [jsx("label", { children: "R:" }), jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "G:" }), jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "B:" }), jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxs("div", { className: styles$e.colorPickerInteractiveArea, children: [jsx("div", { className: styles$e.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsx("div", { className: styles$e.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxs("div", { className: styles$e.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxs("div", { className: styles$e.colorAreaOverlay, children: [jsx("div", { className: styles$e.hueBackground, style: { backgroundColor: hueHex } }), jsx("div", { className: styles$e.whiteGradient }), jsx("div", { className: styles$e.blackGradient })] }), jsx("div", { className: styles$e.colorAreaCursor, style: {
+    return (jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsx("div", { className: styles$f.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxs("div", { children: [jsx("label", { children: "R:" }), jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "G:" }), jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "B:" }), jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxs("div", { className: styles$f.colorPickerInteractiveArea, children: [jsx("div", { className: styles$f.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsx("div", { className: styles$f.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxs("div", { className: styles$f.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxs("div", { className: styles$f.colorAreaOverlay, children: [jsx("div", { className: styles$f.hueBackground, style: { backgroundColor: hueHex } }), jsx("div", { className: styles$f.whiteGradient }), jsx("div", { className: styles$f.blackGradient })] }), jsx("div", { className: styles$f.colorAreaCursor, style: {
                                     left: `${hsv.s}%`,
                                     top: `${100 - hsv.v}%`
                                 } })] })] })] }));
 };
 
-var styles$d = {"container":"cw-input-color-module__container__x7gpk","selectColor":"cw-input-color-module__selectColor__DTo3V","disabled":"cw-input-color-module__disabled__O1fK5","readOnly":"cw-input-color-module__readOnly__HL-Bz","colorDropdown":"cw-input-color-module__colorDropdown__pX2bc"};
+var styles$e = {"container":"cw-input-color-module__container__x7gpk","selectColor":"cw-input-color-module__selectColor__DTo3V","disabled":"cw-input-color-module__disabled__O1fK5","readOnly":"cw-input-color-module__readOnly__HL-Bz","colorDropdown":"cw-input-color-module__colorDropdown__pX2bc"};
 
 const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, readOnly = false, width = '4rem', height = '2rem', labelProps, layoutProps, }) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -3352,11 +3381,11 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
                 break;
         }
     };
-    return (jsxs("div", { className: `cw-input-color ${styles$d.container}`, "data-direction": layoutProps?.direction ?? "row", "data-align": layoutProps?.align, children: [labelProps && (jsx(CwLabel, { ...labelProps })), jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$d.selectColor} ${disabled ? styles$d.disabled : ''} ${readOnly ? styles$d.readOnly : ''}`, style: {
+    return (jsxs("div", { className: `cw-input-color ${styles$e.container}`, "data-direction": layoutProps?.direction ?? "row", "data-align": layoutProps?.align, children: [labelProps && (jsx(CwLabel, { ...labelProps })), jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$e.selectColor} ${disabled ? styles$e.disabled : ''} ${readOnly ? styles$e.readOnly : ''}`, style: {
                     width,
                     height,
                     backgroundColor: value,
-                }, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-readonly": readOnly, role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && createPortal(jsx("div", { ref: dropdownRef, className: styles$d.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
+                }, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-readonly": readOnly, role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && createPortal(jsx("div", { ref: dropdownRef, className: styles$e.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
 };
 
 /**
@@ -3837,6 +3866,8 @@ function CwInputDateText(props) {
     return (jsx("div", { className: "cw-input-date-text", children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { children: [jsx("input", { type: "text", disabled: disabled, maxLength: 10, onChange: onChangeInputText, pattern: "^$ --|[.0-9\\/\\-]{10}", placeholder: format.toLowerCase(), readOnly: readOnly, ref: textInputRef, required: required, size: width, tabIndex: tabIndex, value: displayedDate }), jsxs("span", { children: [jsx(CwIcon, { iconId: "calendar" }), jsx("input", { type: "date", disabled: disabled, onChange: onChangeInputDate, readOnly: readOnly, ref: dateInputRef, tabIndex: -1, value: date, ...inputProps })] })] }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
 }
 
+var styles$d = {"dropZone":"cw-input-image-module__dropZone__ygrGu"};
+
 function CwInputImage(props) {
     const [_uploadedImage, setUploadedImage] = useState(null);
     const inputRef = useRef(null);
@@ -3883,7 +3914,7 @@ function CwInputImage(props) {
         const file = e.target.files?.[0];
         handleFile(file ?? null);
     };
-    return (jsxs("div", { className: "cw-input-image", children: [jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, style: { border: "2px dashed #ccc", padding: "20px", textAlign: "center" }, children: [jsx("p", { children: "Drop image here" }), jsxs("small", { children: ["(", allowedFormats.join(", ").replace(/image\//g, ""), ")"] })] }), jsxs("div", { style: { display: "flex", justifyContent: "center" }, children: [jsxs(CwButton, { style: { margin: "2px" }, onClick: onPasteButtonClick, children: [jsx(CwIcon, { iconId: "paste" }), "\u2002Paste"] }), jsxs(CwButton, { style: { margin: "2px" }, onClick: () => inputRef.current?.click(), children: [jsx(CwIcon, { iconId: "folder-open" }), "\u2002Browse"] })] }), jsx("input", { ref: inputRef, type: "file", accept: allowedFormats.join(","), onChange: handleFileChange, style: { display: "none" }, ...inputProps })] }));
+    return (jsxs("div", { className: "cw-input-image", children: [jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, className: styles$d.dropZone, children: [jsx("p", { children: "Drop image here" }), jsxs("small", { children: ["(", allowedFormats.join(", ").replace(/image\//g, ""), ")"] })] }), jsxs("div", { className: "cw-flex-row cw-align-center-center cw-gap-small", children: [jsx(CwButton, { onClick: onPasteButtonClick, icon: "paste", text: "Paste" }), jsx(CwButton, { onClick: () => inputRef.current?.click(), icon: "folder-open", text: "Browse" })] }), jsx("input", { ref: inputRef, type: "file", accept: allowedFormats.join(","), onChange: handleFileChange, style: { display: "none" }, ...inputProps })] }));
 }
 
 /**
@@ -3915,7 +3946,11 @@ function CwInputImage(props) {
  * <CwImageArea src="path/to/image.png" _onSelectionSuccess={img => setImage(img)} />
  */
 const CwImageArea = forwardRef((props, ref) => {
-    const { alignProps: alignProps, initialSelectionArea: initialSelectionArea, onSelectionEnd, onSelectionStart, onSelectionSuccess, selectionAreaAttenuation: selectionAreaAttenuation, selectionAreaStyle: selectionAreaStyle, ...imgProps } = props;
+    const { alignProps: alignProps, aspectratio, initialSelectionArea: initialSelectionArea, onSelectionEnd, onSelectionStart, onSelectionSuccess, selectionAreaAttenuation: selectionAreaAttenuation, selectionAreaStyle: selectionAreaStyle, ...imgProps } = props;
+    // Validate aspectratio: must be a finite positive number; fall back to free-form sizing if invalid
+    const effectiveAspectRatio = typeof aspectratio === 'number' && isFinite(aspectratio) && aspectratio > 0
+        ? aspectratio
+        : undefined;
     // Default no-op functions for selection callbacks
     const onSelectionStartHandler = onSelectionStart || (() => true);
     const onSelectionEndHandler = onSelectionEnd || (() => true);
@@ -3929,8 +3964,14 @@ const CwImageArea = forwardRef((props, ref) => {
     const [selectedArea, setSelectedArea] = useState(initialSelectionArea ?? null);
     // Expose component methods using ref
     useImperativeHandle(ref, () => ({
-        getSelectedImage: () => selectedImage
+        getSelectedImage: () => selectedImage,
+        clearSelection
     }));
+    const clearSelection = useCallback(() => {
+        setSelectedArea(null);
+        setSelectedImage(undefined);
+        setDragStart(null);
+    }, []);
     // Handle mouse down event to initiate selection
     const onMouseDown = useCallback((event) => {
         const rect = imageRef.current?.getBoundingClientRect();
@@ -3951,24 +3992,12 @@ const CwImageArea = forwardRef((props, ref) => {
             const currentX = event.clientX - rect.left;
             const currentY = event.clientY - rect.top;
             const width = Math.abs(currentX - dragStart.x);
-            const height = Math.abs(currentY - dragStart.y);
+            const height = effectiveAspectRatio ? width / effectiveAspectRatio : Math.abs(currentY - dragStart.y);
             setSelectedArea(new DOMRect(Math.min(dragStart.x, currentX), Math.min(dragStart.y, currentY), width, height));
         }
-    }, [dragStart]);
-    // Finalize selection on mouse up
-    const onMouseUp = useCallback(() => {
-        if (selectedArea && imageRef.current) {
-            // Calculate and scale the selected area to the image's natural size
-            const rect = imageRef.current.getBoundingClientRect();
-            const scaleX = imageRef.current.naturalWidth / rect.width;
-            const scaleY = imageRef.current.naturalHeight / rect.height;
-            const scaledArea = new DOMRect(selectedArea.x * scaleX, selectedArea.y * scaleY, selectedArea.width * scaleX, selectedArea.height * scaleY);
-            if (onSelectionEndHandler(scaledArea))
-                createSelectedImage(scaledArea);
-            setOpacity(selectionAreaAttenuation ?? selectionAreaStyle?.opacity ?? 1);
-            setDragStart(null);
-        }
-    }, [selectedArea, onSelectionEndHandler]);
+    }, [dragStart, effectiveAspectRatio]);
+    // A drag smaller than this (in CSS pixels) is treated as a clear-click
+    const MIN_DRAG_PX = 5;
     // Create an image from the selected area
     const createSelectedImage = useCallback((scaledArea) => {
         const canvas = document.createElement("canvas");
@@ -3982,8 +4011,28 @@ const CwImageArea = forwardRef((props, ref) => {
             onSelectionSuccessHandler(selectedImageURL);
         }
     }, [onSelectionSuccessHandler]);
+    // Finalize selection on mouse up
+    const onMouseUp = useCallback(() => {
+        setDragStart(null);
+        if (!selectedArea || !imageRef.current)
+            return;
+        // Plain click or accidental tiny drag → clear the selection
+        if (selectedArea.width < MIN_DRAG_PX || selectedArea.height < MIN_DRAG_PX) {
+            setSelectedArea(null);
+            setSelectedImage(undefined);
+            return;
+        }
+        // Calculate and scale the selected area to the image's natural size
+        const rect = imageRef.current.getBoundingClientRect();
+        const scaleX = imageRef.current.naturalWidth / rect.width;
+        const scaleY = imageRef.current.naturalHeight / rect.height;
+        const scaledArea = new DOMRect(selectedArea.x * scaleX, selectedArea.y * scaleY, selectedArea.width * scaleX, selectedArea.height * scaleY);
+        if (onSelectionEndHandler(scaledArea))
+            createSelectedImage(scaledArea);
+        setOpacity(selectionAreaAttenuation ?? selectionAreaStyle?.opacity ?? 1);
+    }, [selectedArea, onSelectionEndHandler, createSelectedImage, selectionAreaAttenuation, selectionAreaStyle]);
     // Render the component UI
-    return (jsx("div", { className: "cw-image-area", children: jsxs(CwAlign, { position: "relative", ...alignProps, children: [jsx("img", { ref: imageRef, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, onDragStart: e => e.preventDefault(), ...imgProps }), selectedArea && (jsx("section", { style: {
+    return (jsx("div", { className: "cw-image-area", tabIndex: 0, onKeyDown: e => e.key === 'Escape' && clearSelection(), style: { outline: 'none' }, children: jsxs(CwAlign, { position: "relative", ...alignProps, children: [jsx("img", { ref: imageRef, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, onDragStart: e => e.preventDefault(), ...imgProps }), selectedArea && (jsx("section", { style: {
                         ...selectionAreaStyle,
                         height: `${selectedArea.height}px`,
                         left: `${selectedArea.x}px`,
@@ -5513,7 +5562,7 @@ function usePickerPopup({ anchorRef, isOpen, onClose, position = "left-bottom" }
     return { popupRef: panelRef, popupStyle: panelStyle, renderPopup: renderPanel };
 }
 
-function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, defaultMonth, labelProps, alignProps, placeholder = "Select a date", displayFormat = "dd.MM.yyyy", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, locale = enGB, todayLabel = "Today", feedback, }) {
+function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, defaultMonth, labelProps, alignProps, placeholder = "Select a date", displayFormat = "dd.MM.yyyy", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, locale = enGB, todayLabel = "Today", yearRangeStart, yearRangeEnd, feedback, }) {
     const [isOpen, setIsOpen] = useState(false);
     const [inputValue, setInputValue] = useState("");
     const containerRef = useRef(null);
@@ -5680,6 +5729,19 @@ function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabl
             setIsOpen(false);
         }
     }, [minDate, maxDate, onChange]);
+    // Derive start/end months for the year dropdown range, guarding against inverted yearRange props
+    const dropdownStartMonth = useMemo(() => {
+        const inferredStart = minDate ? minDate.getFullYear() : new Date().getFullYear() - 10;
+        const inferredEnd = yearRangeEnd ?? (maxDate ? maxDate.getFullYear() : new Date().getFullYear() + 5);
+        const year = Math.min(yearRangeStart ?? inferredStart, inferredEnd);
+        return new Date(year, 0, 1);
+    }, [yearRangeStart, yearRangeEnd, minDate, maxDate]);
+    const dropdownEndMonth = useMemo(() => {
+        const inferredEnd = maxDate ? maxDate.getFullYear() : new Date().getFullYear() + 5;
+        const inferredStart = yearRangeStart ?? (minDate ? minDate.getFullYear() : new Date().getFullYear() - 10);
+        const year = Math.max(yearRangeEnd ?? inferredEnd, inferredStart);
+        return new Date(year, 11, 31);
+    }, [yearRangeStart, yearRangeEnd, minDate, maxDate]);
     // Memoize disabled days
     const disabledDays = useMemo(() => [
         ...(disabledDates || []),
@@ -5687,7 +5749,7 @@ function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabl
         ...(maxDate ? [{ after: maxDate }] : []),
         ...(disabledMatcher ? [disabledMatcher] : []),
     ], [disabledDates, minDate, maxDate, disabledMatcher]);
-    return (jsxs("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsx(DayPicker, { mode: "single", selected: value || undefined, defaultMonth: defaultMonth || value || undefined, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale, modifiers: {
+    return (jsxs("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsx(DayPicker, { mode: "single", selected: value || undefined, defaultMonth: defaultMonth || value || undefined, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
                                             today: new Date(),
                                         }, modifiersClassNames: {
                                             today: "rdp-day-today",
@@ -6784,7 +6846,7 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
 
 var compactStyles = {"compactPopup":"cw-datetime-compact-module__compactPopup__GiuNY","calendarWrapper":"cw-datetime-compact-module__calendarWrapper__P4Nlq","timeWrapper":"cw-datetime-compact-module__timeWrapper__uMe-A","compactTimeList":"cw-datetime-compact-module__compactTimeList__MzSQT"};
 
-function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval = 15, minTime, maxTime, labelProps, alignProps, placeholder = "dd.mm.yyyy HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, nowLabel = "Now", timeLabel = "Time", locale = enGB, }) {
+function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval = 15, minTime, maxTime, labelProps, alignProps, placeholder = "dd.mm.yyyy HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, nowLabel = "Now", timeLabel = "Time", locale = enGB, yearRangeStart, yearRangeEnd, }) {
     const [isOpen, setIsOpen] = useState(false);
     const [inputValue, setInputValue] = useState("");
     const [selectedDate, setSelectedDate] = useState(value);
@@ -7008,6 +7070,20 @@ function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, di
             setIsOpen(false);
         }
     }, [minDateTime, maxDateTime, onChange]);
+    // Derive start/end months for the year dropdown range
+    // Derive start/end months for the year dropdown range, guarding against inverted yearRange props
+    const dropdownStartMonth = useMemo(() => {
+        const inferredStart = minDateTime ? minDateTime.getFullYear() : new Date().getFullYear() - 10;
+        const inferredEnd = yearRangeEnd ?? (maxDateTime ? maxDateTime.getFullYear() : new Date().getFullYear() + 5);
+        const year = Math.min(yearRangeStart ?? inferredStart, inferredEnd);
+        return new Date(year, 0, 1);
+    }, [yearRangeStart, yearRangeEnd, minDateTime, maxDateTime]);
+    const dropdownEndMonth = useMemo(() => {
+        const inferredEnd = maxDateTime ? maxDateTime.getFullYear() : new Date().getFullYear() + 5;
+        const inferredStart = yearRangeStart ?? (minDateTime ? minDateTime.getFullYear() : new Date().getFullYear() - 10);
+        const year = Math.max(yearRangeEnd ?? inferredEnd, inferredStart);
+        return new Date(year, 11, 31);
+    }, [yearRangeStart, yearRangeEnd, minDateTime, maxDateTime]);
     // Memoize disabled days
     const disabledDays = useMemo(() => [
         ...(disabledDates || []),
@@ -7015,7 +7091,7 @@ function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, di
         ...(maxDateTime ? [{ after: maxDateTime }] : []),
         ...(disabledMatcher ? [disabledMatcher] : []),
     ], [disabledDates, minDateTime, maxDateTime, disabledMatcher]);
-    return (jsx("div", { ref: containerRef, className: `cw-datetimepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required, maxLength: 16 }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear datetime" })) : (jsx(CwIcon, { iconId: "calendar-time" })) }), renderPopup(jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${compactStyles.compactPopup}`, style: popupStyle, children: [jsxs("div", { className: compactStyles.calendarWrapper, children: [jsx(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, defaultMonth: selectedDate, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale, modifiers: {
+    return (jsx("div", { ref: containerRef, className: `cw-datetimepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required, maxLength: 16 }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear datetime" })) : (jsx(CwIcon, { iconId: "calendar-time" })) }), renderPopup(jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${compactStyles.compactPopup}`, style: popupStyle, children: [jsxs("div", { className: compactStyles.calendarWrapper, children: [jsx(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, defaultMonth: selectedDate, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
                                                 today: new Date(),
                                             }, modifiersClassNames: {
                                                 today: "rdp-day-today",
@@ -8780,6 +8856,7 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
                         backgroundColor: backColor,
                         height: `calc(${effectiveHeight}rem - 4px)`,
                         opacity: eventTransparent ? 0.5 : 1,
+                        ...value.style,
                     }, className: styles$2["scheduler-event"], children: [jsxs("div", { style: {
                                 display: "flex",
                                 flexDirection: "row",
@@ -8839,6 +8916,7 @@ const SchedulerRow = memo((props) => {
     return (jsxs("div", { style: {
             display: "flex",
             minHeight: props.rowHeightInRem + "rem",
+            height: "100%",
         }, "data-name": "scheduler-row", children: [jsx(RowTitleComp, { ...rowHeader }), jsx(CwAnchoredMenu, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottom", options: contextMenuItems ?? [], onSelect: (key) => {
                     onEvent(new OnClickContextMenu(rowHeader.value.rowId, key));
                 }, onContextMenu: (e) => {
@@ -8874,7 +8952,7 @@ const SchedulerRow = memo((props) => {
                                 width: "100%",
                                 pointerEvents: "none",
                             }, children: backgroundEvents.map((event) => {
-                                return jsx(BackgroundEventComp, { value: { ...event }, onEvent: onEvent, heightRem: props.rowHeightInRem * Math.max(1, internalRows.length) }, event.id);
+                                return jsx(BackgroundEventComp, { value: { ...event }, onEvent: onEvent, heightRem: props.rowHeightInRem * Math.max(1, internalRows.length) + (indicatorRows.length > 0 ? INDICATOR_HEIGHT_REM : 0) }, event.id);
                             }) })), backgroundEvents.length === 0 && internalRows.length === 0 && (jsx("div", { style: { position: "relative", height: props.rowHeightInRem + "rem" } })), internalRows.map((internalRow, index) => {
                             return (jsx("div", { style: {
                                     position: "relative",
@@ -9210,6 +9288,7 @@ const groupByRowIdStable = (items, prev) => {
 const Scheduler = (props) => {
     const { header: headerContent, id, events: eventsState, backgroundEvents, indicatorRows: allIndicatorRows = [], contextMenuItems, EventComp, RowTitleComp, orderCategories = ["title"], useOrderCategory, onEvent, groupRowColors, rowHeaderWidth = 180, rowHeightRem = 1.75, } = props;
     const BackgroundEventComp = props.BackgroundEventComp ?? BackgroundEvent;
+    const [constraintElement, setConstraintElement] = useState(null);
     const rows = useOrderCategory === false
         ? props.rows
         : props.rows.sort((a, b) => sortByCategoryAndTitle(a, b, orderCategories));
@@ -9332,16 +9411,16 @@ const Scheduler = (props) => {
         return rowsNumber * effectiveRowHeight * pixelsInRem + indicatorPixels;
     }, [rows, eventsByRow, indicatorRowsByRow, rowHeightRem]);
     // Render
-    return (jsxs("div", { id: id, style: {
-            position: "relative",
-            height: `${schedulerContentHeight + 4}rem`,
-            overflowY: "auto",
-            scrollbarWidth: "thin",
-        }, children: [isHeaderVisible && (jsx("div", { style: {
-                    position: "sticky",
-                    top: 0,
-                    zIndex: 1,
-                }, children: jsx(SchedulerHeader, { ...header }) })), jsx(VariableSizeList, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, itemData: itemData, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: styles$2["hide-scrollbar"], children: Row })] }));
+    return (jsx(TooltipConstraintContext.Provider, { value: constraintElement, children: jsxs("div", { ref: setConstraintElement, id: id, style: {
+                position: "relative",
+                height: `${schedulerContentHeight + 4}rem`,
+                overflowY: "auto",
+                scrollbarWidth: "thin",
+            }, children: [isHeaderVisible && (jsx("div", { style: {
+                        position: "sticky",
+                        top: 0,
+                        zIndex: 1,
+                    }, children: jsx(SchedulerHeader, { ...header }) })), jsx(VariableSizeList, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, itemData: itemData, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: styles$2["hide-scrollbar"], children: Row })] }) }));
 };
 
 class UiEvent {
@@ -10147,4 +10226,4 @@ const CwFindCrewmember = ({ handleChange, placeHolder = "Search crew…", requir
         }, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected crewmember", variant: "icon", icon: "close", color: "neutral" })) : (jsx(CwIcon, { iconId: "person" })) })] })] }), renderPanel(jsx("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { className: `${dropdownStyles.option}${index === highlightedIndex ? ` ${dropdownStyles.optionFocused}` : ""}`, onClick: () => handleOptionSelect(option.value), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }) }))] }));
 };
 
-export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDatePickerTemporal, CwDateRangePicker, CwDateTimePicker, CwDateTimePickerCompact, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwPopoverButton, CwReportModal, CwScheduler, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, UiEvent, Weekdays, cblEvent, eventIsVisible, filterVisibleEvents, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage, useSortableList, useSortableTable };
+export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDatePickerTemporal, CwDateRangePicker, CwDateTimePicker, CwDateTimePickerCompact, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwPopoverButton, CwReportModal, CwScheduler, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, TooltipConstraintContext, UiEvent, Weekdays, cblEvent, eventIsVisible, filterVisibleEvents, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage, useSortableList, useSortableTable, useTooltipConstraint };