@cwellt_software/cwellt-reactjs-lib 1.4.5 → 1.4.7

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,184 +166,498 @@ 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" })] })),
 };
 
-/**
- * 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
- */
-function CwIcon(props) {
-    const { iconId, source = 'cwellt', color, size, ...iconProps } = props;
-    const getClassName = (baseClass) => {
-        return [
-            baseClass,
-            color && `cw-color-${color}`,
-            size && `cw-font-size-${size}`
-        ].filter(Boolean).join(' ');
-    };
-    // Check if it's a special SVG icon
-    if (iconId in SVG_ICONS) {
-        const svgElement = SVG_ICONS[iconId];
-        const className = getClassName('cw-icon-svg');
-        return cloneElement(svgElement, { className });
-    }
-    // Return appropriate icon based on source
-    if (source === 'fontawesome') {
-        return jsx("span", { ...iconProps, className: getClassName(`fa fa-${iconId}`) });
-    }
-    // Use custom icon font
-    return jsx("span", { ...iconProps, className: getClassName(`cwi-icons cwi-${iconId}`) });
-}
+var styles$r = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
 
-/**
-* CwChip - A simple chip/tag component for displaying labels or categories
-*
-* @example
-* <CwChip label="Active" colorScheme="success" />
-* <CwChip label="High Priority" colorScheme="danger" variant="solid" />
-* <CwChip label="Custom" colorScheme="custom" customColor="#8a2be2" />
-* <CwChip label="Outlined" colorScheme="info" variant="outline" />
-* <CwChip label="Removable" closable onClose={() => console.log('closed')} />
-**/
-const CwChip = ({ label, colorScheme = 'info', customColor, variant = 'soft', className = '', closable = false, onClose, icon, style = {}, }) => {
-    // Basic validation
-    if (closable && !onClose) {
-        console.warn('CwChip: onClose prop is required when closable is true');
+// 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;
     }
-    // Calculate styles based on colorScheme, customColor and variant
-    const chipStyle = React__default.useMemo(() => {
-        if (customColor) {
-            // Simply set the CSS custom properties, CSS handles the rest
+    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 {
-                '--chip-accent': customColor,
-                '--chip-text': getContrastColor(customColor),
-                ...style
+                top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
+                left: triggerRect.left - tooltipRect.width - margin$1
             };
-        }
-        return style;
-    }, [customColor, style]);
-    // Handle click on close icon
-    const handleClose = (e) => {
-        e.stopPropagation();
-        if (onClose) {
-            onClose();
-        }
-    };
-    // CSS classes
-    const chipClassNames = [
-        'cw-chip',
-        className,
-        closable ? 'cw-chip-closable' : '',
-    ].filter(Boolean).join(' ');
-    return (jsxs("span", { className: chipClassNames, "data-color-scheme": colorScheme, "data-variant": variant, style: chipStyle, children: [icon && jsx(CwIcon, { iconId: icon }), label && jsx("span", { children: label }), closable && (jsx("button", { className: "cw-chip-close-button", onClick: handleClose, "aria-label": "Remove", type: "button", children: jsx("span", { className: "cwi-icons cwi-close" }) }))] }));
+        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 CW_DEFAULT_MESSAGE_DURATION = 2000;
-var CwMessageType;
-(function (CwMessageType) {
-    CwMessageType["ERROR"] = "close-circle";
-    CwMessageType["WARN"] = "warning";
-    CwMessageType["INFO"] = "info-bubble";
-    CwMessageType["SUCCESS"] = "check-circle";
-})(CwMessageType || (CwMessageType = {}));
-const CwMessage = props => {
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            props.onClose?.();
-        }, props.duration ?? CW_DEFAULT_MESSAGE_DURATION);
-        return () => clearTimeout(timer);
-    }, [props]);
-    return (jsxs("div", { className: "cw-message", "data-message-type": Object.keys(CwMessageType).find(key => CwMessageType[key] === props.messageType), onClick: props.onClick, style: props.onClick ? { cursor: "pointer" } : undefined, children: [props.messageType && jsx(CwIcon, { iconId: props.messageType.toString(), size: "large" }), props.message] }));
+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
 /**
- * Hook for displaying inline messages within specific components.
- * Messages appear where you place the RenderMessage component, perfect for form validation
- * and contextual feedback.
- *
- * @returns Object with showMessage function and RenderMessage component
- *
- * @example
- * ```typescript
- * const { showMessage, RenderMessage } = useCwMessage();
+ * Global tooltip renderer. Manages a single portal instance in the DOM,
+ * shared across all CwTooltipNew instances for optimal performance.
  *
- * const handleValidation = () => {
- *   showMessage({
- *     message: "Please fill all required fields",
- *     messageType: CwMessageType.ERROR,
- *     duration: 3000
- *   });
- * };
+ * Mount once at the app root, or let CwTooltipNew handle it automatically
+ * via ensureTooltipManager().
  *
- * return (
- *   <div>
- *     {RenderMessage}
- *     <button onClick={handleValidation}>Submit</button>
- *   </div>
- * );
- * ```
+ * @see CwTooltipNew
+ * @see showTooltip
+ * @see hideTooltip
  */
-const useCwMessage = () => {
-    const [isVisible, setIsVisible] = useState(false);
-    const [message, setMessage] = useState("");
-    const [duration, setDuration] = useState();
-    const [type, setType] = useState();
-    const showMessage = (props) => {
-        setMessage(props.message);
-        setDuration(props.duration);
-        setType(props.messageType);
-        setIsVisible(true);
-    };
-    const closeMessage = () => {
-        setIsVisible(false);
-    };
-    const RenderMessage = isVisible ? (jsx(CwMessage, { message: message, duration: duration, messageType: type, onClose: closeMessage })) : null;
-    return { showMessage, RenderMessage };
-};
-class CwMessageManager {
-    static instance;
-    messageWrapper = null;
-    root;
-    static getInstance() {
-        if (!CwMessageManager.instance) {
-            CwMessageManager.instance = new CwMessageManager();
-            CwMessageManager.instance.init();
+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;
         }
-        return CwMessageManager.instance;
-    }
-    init() {
-        this.messageWrapper = document.createElement("div");
-        this.messageWrapper.className = "cw-message-wrapper";
-        document.body.prepend(this.messageWrapper);
-        this.root = createRoot(this.messageWrapper); // Create a root at the messageWrapper
-    }
-    showMessage(message, type, duration, onClick) {
-        const msg = document.createElement("div");
-        this.messageWrapper?.prepend(msg);
-        const msgRoot = createRoot(msg); // Create a root for the new message
-        msgRoot.render(jsx(CwMessage, { message: message, messageType: type, duration: duration, onClick: onClick, onClose: () => this.closeMessage(msgRoot) }));
-    }
-    closeMessage(msgRoot) {
-        msgRoot.unmount(); // Unmount the message root
-    }
-}
-/**
- * Display a global TOAST message that appears floating at the top right of the screen.
- * Perfect for system-wide notifications and cross-component alerts.
- *
- * @param message - Text to display in the message
- * @param type - Message type for styling and icon (SUCCESS, ERROR, WARN, INFO)
- * @param duration - Auto-close duration in milliseconds (default: 2000)
- *
- * @example
- * ```typescript
- * CwDisplayMessage("Data saved successfully!", CwMessageType.SUCCESS);
- * CwDisplayMessage("Connection failed", CwMessageType.ERROR, 5000);
- * ```
- *
- * @note For inline messages within components, use `CwNote` or `useCwMessage` hook instead
- */
-function CwDisplayMessage(message, type, duration, onClick) {
-    CwMessageManager.getInstance().showMessage(message, type, duration, onClick);
+        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, color, size, title, tooltipPosition = 'bottom', ...iconProps } = props;
+    const getClassName = (baseClass) => {
+        return [
+            baseClass,
+            color && `cw-color-${color}`,
+            size && `cw-font-size-${size}`
+        ].filter(Boolean).join(' ');
+    };
+    let iconElement;
+    if (iconId in SVG_ICONS) {
+        const svgElement = SVG_ICONS[iconId];
+        iconElement = cloneElement(svgElement, {
+            ...iconProps,
+            className: [getClassName('cw-icon-svg'), svgElement.props?.className].filter(Boolean).join(' '),
+        });
+    }
+    else {
+        iconElement = jsx("span", { ...iconProps, className: getClassName(`cwi-icons cwi-${iconId}`) });
+    }
+    return title ? (jsx(CwTooltipNew, { content: title, position: tooltipPosition, displayInline: true, children: iconElement })) : (iconElement);
+}
+
+/**
+* CwChip - A simple chip/tag component for displaying labels or categories
+*
+* @example
+* <CwChip label="Active" colorScheme="success" />
+* <CwChip label="High Priority" colorScheme="danger" variant="solid" />
+* <CwChip label="Custom" colorScheme="custom" customColor="#8a2be2" />
+* <CwChip label="Outlined" colorScheme="info" variant="outline" />
+* <CwChip label="Removable" closable onClose={() => console.log('closed')} />
+**/
+const CwChip = ({ label, colorScheme = 'info', customColor, variant = 'soft', className = '', closable = false, onClose, icon, style = {}, }) => {
+    // Basic validation
+    if (closable && !onClose) {
+        console.warn('CwChip: onClose prop is required when closable is true');
+    }
+    // Calculate styles based on colorScheme, customColor and variant
+    const chipStyle = React__default.useMemo(() => {
+        if (customColor) {
+            // Simply set the CSS custom properties, CSS handles the rest
+            return {
+                '--chip-accent': customColor,
+                '--chip-text': getContrastColor(customColor),
+                ...style
+            };
+        }
+        return style;
+    }, [customColor, style]);
+    // Handle click on close icon
+    const handleClose = (e) => {
+        e.stopPropagation();
+        if (onClose) {
+            onClose();
+        }
+    };
+    // CSS classes
+    const chipClassNames = [
+        'cw-chip',
+        className,
+        closable ? 'cw-chip-closable' : '',
+    ].filter(Boolean).join(' ');
+    return (jsxs("span", { className: chipClassNames, "data-color-scheme": colorScheme, "data-variant": variant, style: chipStyle, children: [icon && jsx(CwIcon, { iconId: icon }), label && jsx("span", { children: label }), closable && (jsx("button", { className: "cw-chip-close-button", onClick: handleClose, "aria-label": "Remove", type: "button", children: jsx("span", { className: "cwi-icons cwi-close" }) }))] }));
+};
+
+const CW_DEFAULT_MESSAGE_DURATION = 2000;
+var CwMessageType;
+(function (CwMessageType) {
+    CwMessageType["ERROR"] = "close-circle";
+    CwMessageType["WARN"] = "warning";
+    CwMessageType["INFO"] = "info-bubble";
+    CwMessageType["SUCCESS"] = "check-circle";
+})(CwMessageType || (CwMessageType = {}));
+const CwMessage = props => {
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            props.onClose?.();
+        }, props.duration ?? CW_DEFAULT_MESSAGE_DURATION);
+        return () => clearTimeout(timer);
+    }, [props]);
+    return (jsxs("div", { className: "cw-message", "data-message-type": Object.keys(CwMessageType).find(key => CwMessageType[key] === props.messageType), onClick: props.onClick, style: props.onClick ? { cursor: "pointer" } : undefined, children: [props.messageType && jsx(CwIcon, { iconId: props.messageType.toString(), size: "large" }), props.message] }));
+};
+/**
+ * Hook for displaying inline messages within specific components.
+ * Messages appear where you place the RenderMessage component, perfect for form validation
+ * and contextual feedback.
+ *
+ * @returns Object with showMessage function and RenderMessage component
+ *
+ * @example
+ * ```typescript
+ * const { showMessage, RenderMessage } = useCwMessage();
+ *
+ * const handleValidation = () => {
+ *   showMessage({
+ *     message: "Please fill all required fields",
+ *     messageType: CwMessageType.ERROR,
+ *     duration: 3000
+ *   });
+ * };
+ *
+ * return (
+ *   <div>
+ *     {RenderMessage}
+ *     <button onClick={handleValidation}>Submit</button>
+ *   </div>
+ * );
+ * ```
+ */
+const useCwMessage = () => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [message, setMessage] = useState("");
+    const [duration, setDuration] = useState();
+    const [type, setType] = useState();
+    const showMessage = (props) => {
+        setMessage(props.message);
+        setDuration(props.duration);
+        setType(props.messageType);
+        setIsVisible(true);
+    };
+    const closeMessage = () => {
+        setIsVisible(false);
+    };
+    const RenderMessage = isVisible ? (jsx(CwMessage, { message: message, duration: duration, messageType: type, onClose: closeMessage })) : null;
+    return { showMessage, RenderMessage };
+};
+class CwMessageManager {
+    static instance;
+    messageWrapper = null;
+    root;
+    static getInstance() {
+        if (!CwMessageManager.instance) {
+            CwMessageManager.instance = new CwMessageManager();
+            CwMessageManager.instance.init();
+        }
+        return CwMessageManager.instance;
+    }
+    init() {
+        this.messageWrapper = document.createElement("div");
+        this.messageWrapper.className = "cw-message-wrapper";
+        document.body.prepend(this.messageWrapper);
+        this.root = createRoot(this.messageWrapper); // Create a root at the messageWrapper
+    }
+    showMessage(message, type, duration, onClick) {
+        const msg = document.createElement("div");
+        this.messageWrapper?.prepend(msg);
+        const msgRoot = createRoot(msg); // Create a root for the new message
+        msgRoot.render(jsx(CwMessage, { message: message, messageType: type, duration: duration, onClick: onClick, onClose: () => this.closeMessage(msgRoot) }));
+    }
+    closeMessage(msgRoot) {
+        msgRoot.unmount(); // Unmount the message root
+    }
+}
+/**
+ * Display a global TOAST message that appears floating at the top right of the screen.
+ * Perfect for system-wide notifications and cross-component alerts.
+ *
+ * @param message - Text to display in the message
+ * @param type - Message type for styling and icon (SUCCESS, ERROR, WARN, INFO)
+ * @param duration - Auto-close duration in milliseconds (default: 2000)
+ *
+ * @example
+ * ```typescript
+ * CwDisplayMessage("Data saved successfully!", CwMessageType.SUCCESS);
+ * CwDisplayMessage("Connection failed", CwMessageType.ERROR, 5000);
+ * ```
+ *
+ * @note For inline messages within components, use `CwNote` or `useCwMessage` hook instead
+ */
+function CwDisplayMessage(message, type, duration, onClick) {
+    CwMessageManager.getInstance().showMessage(message, type, duration, onClick);
 }
 
 /**
@@ -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,30 +949,30 @@ 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 margin = 16;
 const defaultPosition = "right";
-const positionOrder$1 = ['right', 'bottom', 'left', 'top'];
+const positionOrder = ['right', 'bottom', 'left', 'top'];
 // Memoized utility functions to prevent recreation
-const calculatePositionForSide$1 = (position, triggerRect, tooltipRect) => {
+const calculatePositionForSide = (position, triggerRect, tooltipRect) => {
     switch (position) {
         case 'left':
             return {
                 top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
-                left: triggerRect.left - tooltipRect.width - margin$1
+                left: triggerRect.left - tooltipRect.width - margin
             };
         case 'right':
             return {
                 top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
-                left: triggerRect.right + margin$1
+                left: triggerRect.right + margin
             };
         case 'top':
             return {
-                top: triggerRect.top - tooltipRect.height - margin$1,
+                top: triggerRect.top - tooltipRect.height - margin,
                 left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
             };
         case 'bottom':
             return {
-                top: triggerRect.bottom + margin$1,
+                top: triggerRect.bottom + margin,
                 left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
             };
     }
@@ -699,369 +1013,83 @@ const useTooltipPosition = (isVisible, containerRef, preferredPosition, tooltipC
         const triggerRect = containerRef.current.getBoundingClientRect();
         const tooltipRect = tooltipElement.getBoundingClientRect();
         // Try preferred position first
-        const position = calculatePositionForSide$1(preferredPosition, triggerRect, tooltipRect);
+        const position = calculatePositionForSide(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 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
-const calculatePositionForSide = (position, triggerRect, tooltipRect) => {
-    switch (position) {
-        case 'left':
-            return {
-                top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
-                left: triggerRect.left - tooltipRect.width - margin
-            };
-        case 'right':
-            return {
-                top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
-                left: triggerRect.right + margin
-            };
-        case 'top':
-            return {
-                top: triggerRect.top - tooltipRect.height - margin,
-                left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
-            };
-        case 'bottom':
-            return {
-                top: triggerRect.bottom + margin,
-                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
-/**
- * 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;
-        // Try preferred position first
-        let position = calculatePositionForSide(state.position, state.triggerRect, tooltipRect);
-        // Check if it fits
         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);
-            return;
-        }
-        // Try other positions
-        for (const pos of positionOrder) {
-            if (pos === state.position)
-                continue;
-            const newPosition = calculatePositionForSide(pos, state.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);
-                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) {
+            setTooltipState({ position, actualPosition: preferredPosition });
             return;
         }
-        const resizeObserver = new ResizeObserver(() => {
-            setIsMeasuring(true);
-            setIsPositioned(false);
-            calculatePosition();
-        });
-        resizeObserver.observe(tooltipRef.current);
+        // Try other positions if preferred doesn't fit
+        for (const pos of positionOrder) {
+            if (pos === preferredPosition)
+                continue;
+            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) {
+                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 () => {
-            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
@@ -1709,15 +1737,17 @@ var styles$m = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module
 *   <p>This is the main content of the card.</p>
 * </CwCard>
 **/
-const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, onEdit, onDelete, extraActions, className = '', clickable = false, onClick, isLoading = false, disabled = false, style, chips = [], variant = "border", direction = "column", }) => {
+const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, onEdit, onDelete, extraActions, className = '', clickable = false, onClick, isLoading = false, disabled = false, style, chips = [], variant = "border", direction = "column", layout, }) => {
+    const resolvedDirection = layout?.direction ?? direction;
+    const resolvedAlign = layout?.align ?? (alignment === 'left' ? 'start' : 'center');
     // 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 = () => {
@@ -1728,23 +1758,77 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     // Determine if actions should be rendered
     const hasActions = onEdit || onDelete || extraActions;
     // Determine if header should be rendered
-    const hasHeader = title || subtitle || (hasActions && direction === "column");
+    const hasHeader = title || subtitle || (hasActions && resolvedDirection === "column");
     // Determine if chips should be rendered
     const hasChips = chips.length > 0;
     // Determine if footer should be rendered
-    const hasFooter = hasChips || footer || (hasActions && direction === "row");
+    const hasFooter = hasChips || footer || (hasActions && resolvedDirection === "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": resolvedDirection, children: [hasHeader && (jsxs("header", { children: [(title || subtitle) && (jsxs("div", { className: styles$n.headerContent, "data-align": resolvedAlign, children: [title && jsx("h5", { children: title }), subtitle && jsx("strong", { children: subtitle })] })), resolvedDirection === "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 }))] })), resolvedDirection === "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"};
+
+/**
+ * Option to display in the CwSelect
+ * @remarks
+ * Must be child of CwSelect
+ * @example
+ * <CwSelect>
+ *   <CwOption>A</CwOption>
+ *   <CwOption color="#4a90d9">Blue option</CwOption>
+ *   <CwOption>C</CwOption>
+ * </CwSelect>
+ */
+function CwOption(props) {
+    const { text, color, style, ...optionProps } = props;
+    const mergedStyle = color
+        ? { ...style, backgroundColor: color, color: getContrastColor(color) }
+        : style;
+    return (jsx("option", { className: "cw-option", style: mergedStyle, ...optionProps, children: optionProps.children ?? text }));
+}
+
+/**
+ * Input for selecting an option from a list
+ * @remarks
+ * ```txt
+ * CwIcon  CwLabel     CwSelect        CwButton
+ *  ↑      ↑           ↑               ↑
+ *              ╭────────────────────╮╭════╮
+ *  ⌂   Cat:    │  Choose a cat   ╲╱ │║ Ok ║
+ *              ╰────────────────────╯╰════╯
+ *              │ Orange             │ ← CwOption
+ *              ├────────────────────┤
+ *              │ Black              │ ← CwOption
+ *              ├────────────────────┤
+ *              │ White              │ ← CwOption
+ *              ╰────────────────────╯
+ * ```
+ * @example
+ * <CwSelect name="cat" iconProps={{iconId:"pet"}} labelProps={{children:"Cat:"}}>
+ *   <CwOption value="" > - Choose a cat - </CwOption>
+ *   <CwOption value="o" >Orange</CwOption>
+ *   <CwOption value="b" >Black</CwOption>
+ *   <CwOption value="w" >White</CwOption>
+ * </CwSelect>
+ */
+function CwSelect(props) {
+    const { alignProps, labelProps, buttonProps, iconProps, placeholder, feedback, children, style, className, ...selectProps } = props;
+    const feedbackMessages = feedback
+        ? Array.isArray(feedback) ? feedback : [feedback]
+        : [];
+    const flexDirection = alignProps?.flexDirection ?? "row";
+    const dataDirection = { 'data-direction': flexDirection };
+    const { backgroundColor, color: textColor, ...wrapperStyle } = style ?? {};
+    return (jsxs("div", { className: `cw-select${className ? ` ${className}` : ''}`, ...dataDirection, style: wrapperStyle, children: [jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: "cw-flex-row cw-gap-small cw-flex-grow", children: [jsxs("select", { ...selectProps, style: backgroundColor ? { backgroundColor, color: textColor } : undefined, children: [placeholder && jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && jsx(CwButton, { ...buttonProps })] })] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+}
 
-function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey, ...htmlProps }) {
+function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey, keyExtractor, ...htmlProps }) {
     const [currentPage, setCurrentPage] = useState(1);
     const [sortKey, setSortKey] = useState(defaultSortKey || sortOptions[0]?.key || '');
     const [sortDirection, setSortDirection] = useState('asc');
@@ -1776,10 +1860,15 @@ 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 && (jsx("header", { className: "cw-flex-row cw-align-right-center cw-margin-bottom-small", children: jsx(CwSelect, { labelProps: { text: 'Sort by:', labelWidth: "4rem" }, alignProps: { alignItems: 'center' }, buttonProps: {
+                        variant: 'icon',
+                        icon: sortDirection === 'asc' ? 'arrow-up' : 'arrow-down',
+                        onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'),
+                        title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}`,
+                    }, value: sortKey, onChange: (e) => handleSortChange(e.target.value), children: sortOptions.map(option => (jsx(CwOption, { value: option.key, children: option.label }, option.key))) }) })), 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(React__default.Fragment, { children: renderCard(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }), totalPages > 1 && (jsxs("div", { className: styles$m.pagination, children: [jsx(CwButton, { variant: "icon", icon: "chevron-left", disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)) }), jsxs("span", { className: styles$m.pageInfo, children: [currentPage, " / ", totalPages] }), jsx(CwButton, { variant: "icon", icon: "chevron-right", disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)) })] }))] }))] }));
 }
 
-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 +1885,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 +2127,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 +2143,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 +2206,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 +2295,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 +2498,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 +2548,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 +2575,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 +2611,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 +2630,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 +2702,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 +2887,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 +3054,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 +3100,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 +3303,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 +3442,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 +3927,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 +3975,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 +4007,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 +4025,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 +4053,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 +4072,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`,
@@ -4188,60 +4298,6 @@ function CwToggle(props) {
                     type: "checkbox", ...inputProps })] }) }));
 }
 
-/**
- * Option to display in the CwSelect
- * @remarks
- * Must be child of CwSelect
- * @example
- * <CwSelect>
- *   <CwOption>A</CwOption>
- *   <CwOption color="#4a90d9">Blue option</CwOption>
- *   <CwOption>C</CwOption>
- * </CwSelect>
- */
-function CwOption(props) {
-    const { text, color, style, ...optionProps } = props;
-    const mergedStyle = color
-        ? { ...style, backgroundColor: color, color: getContrastColor(color) }
-        : style;
-    return (jsx("option", { className: "cw-option", style: mergedStyle, ...optionProps, children: optionProps.children ?? text }));
-}
-
-/**
- * Input for selecting an option from a list
- * @remarks
- * ```txt
- * CwIcon  CwLabel     CwSelect        CwButton
- *  ↑      ↑           ↑               ↑
- *              ╭────────────────────╮╭════╮
- *  ⌂   Cat:    │  Choose a cat   ╲╱ │║ Ok ║
- *              ╰────────────────────╯╰════╯
- *              │ Orange             │ ← CwOption
- *              ├────────────────────┤
- *              │ Black              │ ← CwOption
- *              ├────────────────────┤
- *              │ White              │ ← CwOption
- *              ╰────────────────────╯
- * ```
- * @example
- * <CwSelect name="cat" iconProps={{iconId:"pet"}} labelProps={{children:"Cat:"}}>
- *   <CwOption value="" > - Choose a cat - </CwOption>
- *   <CwOption value="o" >Orange</CwOption>
- *   <CwOption value="b" >Black</CwOption>
- *   <CwOption value="w" >White</CwOption>
- * </CwSelect>
- */
-function CwSelect(props) {
-    const { alignProps, labelProps, buttonProps, iconProps, placeholder, feedback, children, style, className, ...selectProps } = props;
-    const feedbackMessages = feedback
-        ? Array.isArray(feedback) ? feedback : [feedback]
-        : [];
-    const flexDirection = alignProps?.flexDirection ?? "row";
-    const dataDirection = { 'data-direction': flexDirection };
-    const { backgroundColor, color: textColor, ...wrapperStyle } = style ?? {};
-    return (jsxs("div", { className: `cw-select${className ? ` ${className}` : ''}`, ...dataDirection, style: wrapperStyle, children: [jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: "cw-flex-row cw-gap-small cw-flex-grow", children: [jsxs("select", { ...selectProps, style: backgroundColor ? { backgroundColor, color: textColor } : undefined, children: [placeholder && jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && jsx(CwButton, { ...buttonProps })] })] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
-}
-
 // ─── Default strategy: below anchor, match width, flip above if needed ────────
 function defaultPositionStrategy(anchorRect, panelRect) {
     const panelH = panelRect?.height ?? 200;
@@ -4715,7 +4771,6 @@ var styles$8 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module__cw-
  * @returns Set the `onChange` callback to a function to check for changes in the selected filters
  */
 const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeholder = "Write to filter", allCategoriesLabel = "ALL CATEGORIES", className, style }) => {
-    const [filteredTags, setFilteredTags] = useState(new Set());
     const [inputTextValue, setInputTextValue] = useState("");
     const [isPanelOpen, setIsPanelOpen] = useState(false);
     const [selectedCategory, setSelectedCategory] = useState("All");
@@ -4725,7 +4780,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
     const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
         anchorRef: wrapperRef,
         isOpen: isPanelOpen,
-        onClose: () => { setIsPanelOpen(false); setFilteredTags(getUnselectedAll()); setSelectedCategory("All"); setInputTextValue(""); },
+        onClose: () => { setIsPanelOpen(false); setSelectedCategory("All"); setInputTextValue(""); },
     });
     useEffect(() => {
         // Outside-click is now handled by useDropdownPortal
@@ -4739,10 +4794,19 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
         });
         return categoriesMap;
     };
-    const getUnselectedAll = (excluded = selectedTags) => new Set(Array.from(allTags).filter(tag => !Array.from(excluded).some(t => t.ID === tag.ID)));
+    const displayTags = useMemo(() => {
+        let tags = Array.from(allTags);
+        if (selectedCategory !== "All") {
+            tags = tags.filter(t => t.Category === selectedCategory);
+        }
+        if (inputTextValue.trim() !== "") {
+            const input = inputTextValue.trim().replaceAll(" ", "").toLowerCase();
+            tags = tags.filter(t => t.Name.replaceAll(" ", "").toLowerCase().includes(input));
+        }
+        return tags;
+    }, [allTags, selectedCategory, inputTextValue]);
     const handleClickCategory = (category) => {
         setSelectedCategory(category);
-        setFilteredTags(category !== "All" ? (categoriesMappedToTags().get(category) ?? new Set()) : getUnselectedAll());
     };
     const rgbAString = (r, g, b) => {
         return `rgb(${r}, ${g}, ${b})`;
@@ -4766,36 +4830,15 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
     const handleInputText = (input) => {
         if (selectedCategory !== "All")
             setSelectedCategory("All");
-        input = input.trimStart();
-        setInputTextValue(input);
-        if (input !== "") {
-            const newFilterTags = Array.from(allTags).filter(tag => !Array.from(selectedTags).some(t => t.ID === tag.ID) &&
-                tag.Name.replaceAll(" ", "").toLowerCase().includes(input.replaceAll(" ", "").toLowerCase()));
-            setFilteredTags(new Set(newFilterTags));
-        }
-        else {
-            setFilteredTags(getUnselectedAll());
-        }
+        setInputTextValue(input.trimStart());
     };
     const addTag = (newTag) => {
-        newTag.Selected = true;
-        newTag.Removable = true;
-        newTag.Selectable = false;
         if (selectedTags.has(newTag) || Array.from(selectedTags).some(t => t.ID === newTag.ID)) {
             return;
         }
-        else {
-            const updatedTags = new Set(selectedTags).add(newTag);
-            onChangeSelectedTags(updatedTags);
-            setInputTextValue("");
-            setFilteredTags(selectedCategory === "All" ? getUnselectedAll(updatedTags) : prev => {
-                const next = new Set(prev);
-                const toRemove = Array.from(next).find(t => t.ID === newTag.ID);
-                if (toRemove)
-                    next.delete(toRemove);
-                return next;
-            });
-        }
+        const updatedTags = new Set(selectedTags).add(newTag);
+        onChangeSelectedTags(updatedTags);
+        setInputTextValue("");
     };
     const removeTag = (id) => {
         const updatedTags = new Set(selectedTags);
@@ -4808,11 +4851,6 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
         }
         onChangeSelectedTags(updatedTags);
     };
-    useEffect(() => {
-        // force to load all tags on first render
-        if (selectedCategory === "All" && filteredTags.size === 0)
-            setFilteredTags(new Set());
-    }, [allTags]);
     const handleDivClick = () => {
         if (inputRef !== null) {
             inputRef.current?.focus();
@@ -4824,9 +4862,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
                                     switch (e.key) {
                                         case "Enter":
                                         case "Tab": {
-                                            if (inputTextValue.trim().length > 0 && filteredTags.size > 0) {
+                                            if (inputTextValue.trim().length > 0 && displayTags.length > 0) {
                                                 const input = inputTextValue.trim().toLowerCase();
-                                                const tagsArr = Array.from(filteredTags);
+                                                const tagsArr = displayTags;
                                                 let foundTag = tagsArr.find(tag => tag.Name.trim().toLowerCase() === input);
                                                 if (!foundTag) {
                                                     foundTag = tagsArr.find(tag => tag.Name.trim().toLowerCase().startsWith(input));
@@ -4850,7 +4888,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
                                 } })] }), selectedTags.size > 0 && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: e => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChangeSelectedTags(new Set()); setIsPanelOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] }), renderPanel(jsxs("section", { ref: panelRef, className: styles$8["cw-multi-filter-catalog-container"], style: panelStyle, children: [jsxs("nav", { children: [jsx("button", { className: selectedCategory === "All" ? styles$8["category-selected"] : undefined, onClick: () => handleClickCategory("All"), children: allCategoriesLabel }), Array.from(categoriesMappedToTags().keys()).map(category => (jsx("button", { className: selectedCategory === category ? styles$8["category-selected"] : undefined, style: {
                                     backgroundColor: getColor(category).primary,
                                     color: getColor(category).onPrimary,
-                                }, onClick: () => handleClickCategory(category), children: category }, category)))] }), jsx("ul", { children: Array.from(filteredTags)
+                                }, onClick: () => handleClickCategory(category), children: category }, category)))] }), jsx("ul", { children: displayTags
                             .sort((a, b) => {
                             const input = inputTextValue.trim().toLowerCase();
                             const aName = a.Name.trim().toLowerCase();
@@ -5513,7 +5551,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 +5718,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 +5738,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 +6835,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 +7059,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 +7080,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 +8845,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 +8905,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 +8941,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 +9277,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 +9400,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 +10215,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 };