@cwellt_software/cwellt-reactjs-lib 1.4.2 → 1.4.4

package/dist/index.es.js

@@ -1,9 +1,11 @@
 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 React__default, { cloneElement, useEffect, useState, useCallback, useRef, useMemo, forwardRef, useLayoutEffect, useImperativeHandle, createElement, memo, Fragment as Fragment$1, Component } from 'react';
 import { createRoot } from 'react-dom/client';
 import { createPortal } from 'react-dom';
+import { Tooltip } from 'antd';
 import Draggable from 'react-draggable';
+import moment from 'moment';
 import { format } from 'date-fns';
 import { enGB } from 'date-fns/locale';
 import { DayPicker } from 'react-day-picker';
@@ -60,6 +62,10 @@ function CwLabel(props) {
     return (jsx("label", { className: "cw-label", style: { textAlign: justify, width: labelWidth, height: labelHeight, margin: margin ?? "1px 0 0 0" }, ...labelProps, children: labelProps.children ?? text }));
 }
 
+function CwTooltip(CwelltTooltipProps) {
+    return (jsxs("div", { className: "cwelltTooltip", children: [jsx("div", { className: "cwelltTooltipTitle", style: CwelltTooltipProps.tooltipTitleStyle, children: jsx("span", { children: CwelltTooltipProps.tooltipTitle }) }), CwelltTooltipProps.children] }));
+}
+
 function colorToHSL(color) {
     const hexColor = colorToHEX(color);
     const hex = hexColor.replace('#', '');
@@ -105,60 +111,36 @@ function getHSLColor(color, alpha = 1) {
     const hsl = colorToHSL(color);
     return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha})`;
 }
-function hslToLinearRgb(h, s, l) {
-    const sNorm = s / 100;
-    const lNorm = l / 100;
-    const a = sNorm * Math.min(lNorm, 1 - lNorm);
-    const f = (n) => {
-        const k = (n + h / 30) % 12;
-        return lNorm - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)));
-    };
-    return [f(0), f(8), f(4)];
-}
-function srgbLuminance(r, g, b) {
-    const lin = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
-}
-function wcagContrastRatio(lum1, lum2) {
-    const lighter = Math.max(lum1, lum2);
-    const darker = Math.min(lum1, lum2);
-    return (lighter + 0.05) / (darker + 0.05);
-}
 function getContrastColor(color) {
-    if (color === null)
+    if (color === null) {
         return '#000000';
+    }
     const hsl = colorToHSL(color);
+    // Saturated greenyellow and cyan tones need lower luminance threshold (40-35)
+    // Saturated mediumblue and blueviolet tones need higher luminance threshold (55-60)
+    // Saturated orangered tones need lower luminance threshold (45)
+    const isYellowGreen = (hsl.h >= 45 && hsl.h <= 180);
+    const isBlueViolet = (hsl.h >= 210 && hsl.h <= 300);
+    const isRedOrange = (hsl.h >= 0 && hsl.h <= 30) || (hsl.h >= 330 && hsl.h <= 360);
+    let threshold = 50;
+    if (isYellowGreen) {
+        threshold = 40;
+        if (hsl.s >= 70) {
+            threshold = 35;
+        }
+    }
+    else if (isBlueViolet) {
+        threshold = 55;
+        if (hsl.s >= 70) {
+            threshold = 60;
+        }
+    }
+    else if (isRedOrange && hsl.s >= 80) {
+        threshold = 45;
+    }
+    const contrastL = hsl.l >= threshold ? 20 : 90;
     const contrastS = Math.min(hsl.s, 90);
-    const bgRgb = hslToLinearRgb(hsl.h, hsl.s, hsl.l);
-    const bgLum = srgbLuminance(...bgRgb);
-    const darkL = 15;
-    const lightL = 90;
-    const darkLum = srgbLuminance(...hslToLinearRgb(hsl.h, contrastS, darkL));
-    const lightLum = srgbLuminance(...hslToLinearRgb(hsl.h, contrastS, lightL));
-    const darkRatio = wcagContrastRatio(bgLum, darkLum);
-    const lightRatio = wcagContrastRatio(bgLum, lightLum);
-    // On saturated backgrounds, dark-tinted text blends visually with the
-    // vibrant color even when math says it has better contrast.
-    // Prefer light text unless dark has an overwhelmingly higher ratio.
-    const saturatedBias = hsl.s >= 30 && bgLum < 0.4;
-    // Mid-grays (#777–#999): dark text "sinks" into the background while
-    // white text pops, even though dark wins on WCAG ratio.
-    const midGrayBias = hsl.s < 15 && bgLum >= 0.18 && bgLum <= 0.35;
-    const goLight = saturatedBias
-        ? darkRatio < lightRatio * 3
-        : midGrayBias || lightRatio >= darkRatio;
-    let targetL = goLight ? lightL : darkL;
-    let bestRatio = goLight ? lightRatio : darkRatio;
-    if (bestRatio < 4.5) {
-        const step = goLight ? 5 : -5;
-        const limit = goLight ? 95 : 0;
-        while (bestRatio < 4.5 && targetL !== limit) {
-            targetL = goLight ? Math.min(targetL + step, limit) : Math.max(targetL + step, limit);
-            const candidateLum = srgbLuminance(...hslToLinearRgb(hsl.h, contrastS, targetL));
-            bestRatio = wcagContrastRatio(bgLum, candidateLum);
-        }
-    }
-    return `hsl(${hsl.h}, ${contrastS}%, ${targetL}%)`;
+    return `hsl(${hsl.h}, ${contrastS}%, ${contrastL}%)`;
 }
 
 const SVG_ICONS = {
@@ -235,7 +217,7 @@ const CwChip = ({ label, colorScheme = 'info', customColor, variant = 'soft', cl
         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" }) }))] }));
+    return (jsxs("span", { className: chipClassNames, "data-color-scheme": colorScheme, "data-variant": variant, style: chipStyle, children: [icon && jsx(CwIcon, { iconId: icon }), 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;
@@ -253,7 +235,7 @@ const CwMessage = props => {
         }, 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] }));
+    return (jsxs("div", { className: "cw-message", "data-message-type": Object.keys(CwMessageType).find(key => CwMessageType[key] === props.messageType), children: [props.messageType && jsx(CwIcon, { iconId: props.messageType.toString(), size: "large" }), props.message] }));
 };
 /**
  * Hook for displaying inline messages within specific components.
@@ -316,11 +298,11 @@ class CwMessageManager {
         document.body.prepend(this.messageWrapper);
         this.root = createRoot(this.messageWrapper); // Create a root at the messageWrapper
     }
-    showMessage(message, type, duration, onClick) {
+    showMessage(message, type, duration) {
         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) }));
+        msgRoot.render(jsx(CwMessage, { message: message, messageType: type, duration: duration, onClose: () => this.closeMessage(msgRoot) }));
     }
     closeMessage(msgRoot) {
         msgRoot.unmount(); // Unmount the message root
@@ -342,8 +324,8 @@ class CwMessageManager {
  *
  * @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);
+function CwDisplayMessage(message, type, duration) {
+    CwMessageManager.getInstance().showMessage(message, type, duration);
 }
 
 /**
@@ -629,36 +611,40 @@ function CwLoading({ isLoading = false, text = '', size = 'regular', iconPositio
  * <CwLoading size="small" />
  */
 function CwLoadingSmall(CwelltLoadingAppointements) {
-    return (jsx("div", { children: CwelltLoadingAppointements.isLoading === true ? (jsx("div", { className: "cw-loading-container", children: jsx("div", { className: "cw-loading" }) })) : (jsx("div", {})) }));
+    return (jsx("div", { children: CwelltLoadingAppointements.isLoading === true ? (
+        // * Show loading appointment
+        jsx("div", { className: "cw-loading-container", children: jsx("div", { className: "cw-loading" }) })) : (
+        // Show empty div
+        jsx("div", {})) }));
 }
 
-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"};
+var styles$k = {"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,26 +685,26 @@ 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) {
+        if (position.left >= margin &&
+            position.top >= margin &&
+            position.left + tooltipRect.width <= windowWidth - margin &&
+            position.top + tooltipRect.height <= windowHeight - margin) {
             setTooltipState({ position, actualPosition: preferredPosition });
             return;
         }
         // Try other positions if preferred doesn't fit
-        for (const pos of positionOrder$1) {
+        for (const pos of positionOrder) {
             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) {
+            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;
             }
@@ -736,31 +722,19 @@ const useTooltipPosition = (isVisible, containerRef, preferredPosition, tooltipC
     }, [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
- */
+// Main component with optimizations
 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"]);
+    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$k["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: {
+        return createPortal(jsx("div", { className: styles$k["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, "data-inline": displayInline, style: {
                 position: 'fixed',
                 top: `${tooltipPosition.top}px`,
                 left: `${tooltipPosition.left}px`,
@@ -775,310 +749,9 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
         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) {
-            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$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);
-};
-
-/**
- * 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, }) => {
-    const containerRef = useRef(null);
-    const timeoutRef = useRef();
-    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]);
-    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 }));
+    return (jsxs("div", { ref: containerRef, className: styles$k["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 }) {
-    // Build CSS classes based on variant and props
-    let buttonClass = `cw-button-${variant}`;
-    // Add icon class only for icon variant without children
-    if (variant === 'icon' && icon && !children) {
-        buttonClass += ` cwi-${icon}`;
-    }
-    if (className) {
-        buttonClass += ` ${className}`;
-    }
-    const tooltipContent = title || (variant === 'icon' && text ? text : undefined);
-    const buttonElement = (jsx("button", { type: "button", className: buttonClass, ...buttonProps, "data-color": color, "aria-label": tooltipContent, children: variant === 'icon' ? null : (children ?? (jsxs(Fragment, { children: [icon && jsx(CwIcon, { iconId: icon }), text && jsx("strong", { children: text })] }))) }));
-    return tooltipContent ? (jsx(CwTooltipNew, { content: tooltipContent, position: tooltipPosition, displayInline: true, children: buttonElement })) : (buttonElement);
-}
-
 // Reference for draggable modal
 /**
  * **Note:** For new development, we recommend using {@link CwDialog} instead. CwModal remains supported for existing code.
@@ -1092,6 +765,10 @@ function CwModal(custModalProps) {
     const isHide = custModalProps.hideModalActions !== null && custModalProps.hideModalActions !== undefined
         ? custModalProps.hideModalActions
         : false;
+    // [ Show custom button === true ? show : default buttons ]
+    const isShowcustButton = custModalProps.ShowcustButton !== null && custModalProps.ShowcustButton !== undefined
+        ? custModalProps.ShowcustButton
+        : false;
     const cwelltOnMouseOverModal = () => {
         setModalDisabled(false);
     };
@@ -1111,10 +788,15 @@ function CwModal(custModalProps) {
             width: custModalProps.widthModal
         }
     };
-    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" } }))] }) })] })) }));
+    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 ? (
+                            // [ false : show modal ]
+                            jsxs("div", { className: "cwelltModalFooter", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [jsx(Tooltip, { placement: "bottom", title: "Save", color: "#368ee0", children: jsx("div", { className: "cwellt_flex cwellt_justify_center ", style: { width: "2em" }, children: jsx("button", { className: "cw-button-icon cwi-save", onClick: custModalProps.onSaveModal, form: custModalProps.formSaveModal, hidden: custModalProps.HideBtnModal, type: custModalProps.HtmlSubmitModal }) }) }), isShowcustButton === true ? (jsx(Tooltip, { placement: "bottom", title: custModalProps.custButtonTitle, color: custModalProps.custColorButtonTooltip, children: jsx("div", { className: "cwellt_flex cwellt_justify_center", style: { width: "2em" }, children: jsx("button", { className: "cw-button-icon " +
+                                                    custModalProps.custButtonClassName, onClick: custModalProps.custButtonClick }) }) })) : (jsx("div", {}))] })) : (
+                            // true [ do not show the modal ]
+                            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$j = {"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 +860,30 @@ 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$j.overlayPositioned, onClick: handleOverlayClick, children: jsxs("div", { ref: popupRef, className: styles$j.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$j.message, children: message }), jsxs("div", { className: styles$j.buttons, children: [jsx("button", { className: `${styles$j.button} ${styles$j.confirmButton}`, onClick: onConfirm, children: confirmText }), jsx("button", { className: `${styles$j.button} ${styles$j.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"};
+function CwButton({ text, variant = 'solid', color = 'primary', className = '', icon = "", title, tooltipPosition = "bottom", children, ...buttonProps }) {
+    // Build CSS classes based on variant and props
+    let buttonClass = `cw-button-${variant}`;
+    // Add icon class only for icon variant without children
+    if (variant === 'icon' && icon && !children) {
+        buttonClass += ` cwi-${icon}`;
+    }
+    if (className) {
+        buttonClass += ` ${className}`;
+    }
+    const tooltipContent = title || (variant === 'icon' && text ? text : undefined);
+    const buttonElement = (jsx("button", { type: "button", className: buttonClass, ...buttonProps, "data-color": color, "aria-label": tooltipContent, children: variant === 'icon' ? null : (children ?? (jsxs(Fragment, { children: [icon && jsx(CwIcon, { iconId: icon }), text && jsx("strong", { children: text })] }))) }));
+    return tooltipContent ? (jsx(CwGenericTooltip, { content: tooltipContent, position: tooltipPosition, displayInline: true, children: buttonElement })) : (buttonElement);
+}
+
+var styles$i = {"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) => {
@@ -1225,7 +922,7 @@ const convertFromPx = (px, unit) => {
     }
 };
 const CwDialog = props => {
-    const { customFooter, customHeader, headline, width, height, dialogSize, scrim, onSave, onClose, hideFooter, children, open, autoReposition = false, disableSave, ...domProps } = props;
+    const { customFooter, customHeader, headline, width, height, dialogSize, scrim, onSave, onClose, hideFooter, children, open, autoReposition = false, ...domProps } = props;
     const dialogRef = useRef(null);
     const [isPressingScrim, setIsPressingScrim] = useState(false);
     const pressTimerRef = useRef(0);
@@ -1262,13 +959,9 @@ const CwDialog = props => {
             heightUnit: parsedHeight.unit,
             autoHeight: isAutoHeight
         };
-        const maxWidth = window.innerWidth * 0.9;
-        const maxHeight = window.innerHeight * 0.9;
-        const clampedWidth = Math.min(initialWidthPx, maxWidth);
-        const clampedHeight = Math.min(initialEstimatedHeight, maxHeight);
         const initialPosition = {
-            x: Math.max(0, window.document.body.clientWidth / 2 - clampedWidth / 2),
-            y: Math.max(0, window.document.body.clientHeight / 2 - clampedHeight / 2)
+            x: window.document.body.clientWidth / 2 - initialWidthPx / 2,
+            y: window.document.body.clientHeight / 2 - initialEstimatedHeight / 2
         };
         return { initialDialogSize, initialPosition };
     }, [width, height, dialogSize]); // Only recalculate when these props change
@@ -1277,7 +970,6 @@ const CwDialog = props => {
     const [position, setPosition] = useState(initialSetup.initialPosition);
     const [size, setSize] = useState(initialSetup.initialDialogSize);
     const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
-    const userDraggedRef = useRef(false);
     // scrim is true by default
     const hasScrim = scrim !== false;
     // Adjust position after the dialog is rendered when using autoHeight
@@ -1317,35 +1009,6 @@ const CwDialog = props => {
             resizeObserver?.disconnect();
         };
     }, [size.autoHeight, open, autoReposition]);
-    // Keep dialog visible when viewport is resized; re-center only if user hasn't dragged
-    const originalWidthPx = initialSetup.initialDialogSize.width;
-    useEffect(() => {
-        if (!open)
-            return;
-        userDraggedRef.current = false;
-        const handleWindowResize = () => {
-            const vw = window.innerWidth;
-            const vh = window.innerHeight;
-            const w = Math.min(originalWidthPx, vw * 0.9);
-            setSize(prev => w !== prev.width ? { ...prev, width: w } : prev);
-            if (!userDraggedRef.current) {
-                const dh = dialogRef.current?.offsetHeight ?? 300;
-                setPosition({
-                    x: Math.max(0, (vw - w) / 2),
-                    y: Math.max(0, (vh - dh) / 2),
-                });
-            }
-            else {
-                // Clamp so dialog stays on screen
-                setPosition(prev => ({
-                    x: Math.max(0, Math.min(prev.x, vw - w - 8)),
-                    y: Math.max(0, Math.min(prev.y, vh - (dialogRef.current?.offsetHeight ?? 300) - 8)),
-                }));
-            }
-        };
-        window.addEventListener("resize", handleWindowResize);
-        return () => window.removeEventListener("resize", handleWindowResize);
-    }, [open]);
     useEffect(() => {
         const handleMouseMove = (e) => {
             if (isDragging) {
@@ -1427,7 +1090,6 @@ const CwDialog = props => {
     }, [isDragging, resizeDirection, dragStart, position, size]);
     const handleMouseDown = useCallback((e) => {
         setIsDragging(true);
-        userDraggedRef.current = true;
         setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
     }, [position]);
     const handleResizeMouseDown = useCallback((direction) => (e) => {
@@ -1459,15 +1121,17 @@ 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$i["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 footer = useMemo(() => (jsx("footer", { children: customFooter || (jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: onSave, tooltipPosition: "top" })) })), [customFooter, onSave]);
     const resizeHandles = useMemo(() => size.autoHeight
         ? [
+            // Only horizontal handles if autoHeight is true
             jsx("div", { "data-handle-e": true, onMouseDown: handleResizeMouseDown("e") }, "handle-e"),
             jsx("div", { "data-handle-w": true, onMouseDown: handleResizeMouseDown("w") }, "handle-w")
         ]
         : [
+            // All handles if autoHeight is false
             jsx("div", { "data-handle-n": true, onMouseDown: handleResizeMouseDown("n") }, "handle-n"),
             jsx("div", { "data-handle-s": true, onMouseDown: handleResizeMouseDown("s") }, "handle-s"),
             jsx("div", { "data-handle-e": true, onMouseDown: handleResizeMouseDown("e") }, "handle-e"),
@@ -1486,7 +1150,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$i["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,
@@ -1517,6 +1181,7 @@ const CwModalReportFunctional = (props) => {
 };
 
 class CwReportModal extends React.Component {
+    formRef = React.createRef();
     constructor(props) {
         super(props);
         this.state = {
@@ -1533,6 +1198,7 @@ class CwReportModal extends React.Component {
     }
     render() {
         return (jsx("div", { id: "modal-report-content", children: this.state.isModal === true ? (jsxs(CwDialog, { open: this.props.visible, width: this.props.width, height: this.props.height, headline: this.props.title, onClose: () => {
+                    this.formRef?.current?.resetFields();
                     this.props.SET_MODAL_REPORT_VISIBLE(false);
                 }, hideFooter: true, className: "modal-report-content", children: [this.props.name !== "Empty.pdf" && (jsx("div", { style: { width: "100%", height: "100%", overflowX: "auto", overflowY: "auto" }, children: jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", style: { width: "100%", height: "100%", display: "block" } }) })), this.props.name === "Empty.pdf" && (jsx("div", { children: jsxs("h1", { style: { marginLeft: "2em" }, children: [" ", "Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }) }))] })) : (jsxs("div", { children: [this.props.name !== "Empty.pdf" && (jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", width: "100%", height: "800px" })), this.props.name === "Empty.pdf" && (jsxs("div", { children: ["Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }))] })) }));
     }
@@ -1689,7 +1355,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$h = {"card":"cw-card-module_card__HJUT0","clickable":"cw-card-module_clickable__Y-V3X","disabled":"cw-card-module_disabled__0wHh1","loading":"cw-card-module_loading__-fzlx","content":"cw-card-module_content__ma9qy","headerContent":"cw-card-module_headerContent__x4Jfl","footerTags":"cw-card-module_footerTags__80sSW","loadingOverlay":"cw-card-module_loadingOverlay__8-zVV"};
 
 /**
 * CwCard - A simple card component for displaying content in a contained format
@@ -1713,11 +1379,11 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     // Construct class names using CSS modules
     const cardClassNames = [
         'cw-card',
-        styles$m.card,
+        styles$h.card,
         className,
-        clickable ? styles$m.clickable : '',
-        disabled ? styles$m.disabled : '',
-        isLoading ? styles$m.loading : '',
+        clickable ? styles$h.clickable : '',
+        disabled ? styles$h.disabled : '',
+        isLoading ? styles$h.loading : '',
     ].filter(Boolean).join(' ');
     // Handle click event when card is clickable
     const handleClick = () => {
@@ -1734,15 +1400,15 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     // Determine if footer should be rendered
     const hasFooter = hasChips || footer || (hasActions && direction === "row");
     // Actions component to reuse
-    const ActionsComponent = hasActions && !disabled ? (jsxs("div", { className: styles$m.actions, children: [extraActions ?? null, onEdit && jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
+    const ActionsComponent = hasActions && !disabled ? (jsxs("div", { className: styles$h.actions, children: [extraActions ?? null, onEdit && jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
     return (jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && {
             role: 'button',
             tabIndex: 0,
             onClick: handleClick,
-        }), "data-variant": variant, "data-direction": direction, children: [hasHeader && (jsxs("header", { children: [(title || subtitle) && (jsxs("div", { className: styles$m.headerContent, "data-alignment": alignment, children: [title && jsx("h5", { children: title }), subtitle && jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), jsx("div", { className: styles$m.content, children: children }), hasFooter && (jsxs("footer", { children: [hasChips && (jsx("div", { className: styles$m.footerTags, children: chips.map((chip, index) => (jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$m.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsx("div", { className: styles$m.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (jsx("div", { className: styles$m.loadingOverlay, children: jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
+        }), "data-variant": variant, "data-direction": direction, children: [hasHeader && (jsxs("header", { children: [(title || subtitle) && (jsxs("div", { className: styles$h.headerContent, "data-alignment": alignment, children: [title && jsx("h5", { children: title }), subtitle && jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), jsx("div", { className: styles$h.content, children: children }), hasFooter && (jsxs("footer", { children: [hasChips && (jsx("div", { className: styles$h.footerTags, children: chips.map((chip, index) => (jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$h.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsx("div", { className: styles$h.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (jsx("div", { className: styles$h.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$g = {"cardContainer":"cw-card-list-module_cardContainer__l3YEh","pagination":"cw-card-list-module_pagination__5Ay78","pageInfo":"cw-card-list-module_pageInfo__uiMel","loading":"cw-card-list-module_loading__cYpND","emptyState":"cw-card-list-module_emptyState__RlqiS","sortControls":"cw-card-list-module_sortControls__mWgZA"};
 
 function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey, ...htmlProps }) {
     const [currentPage, setCurrentPage] = useState(1);
@@ -1776,10 +1442,10 @@ function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', default
         '--card-width': `${defaultCardWidth}px`,
         '--card-gap': `${cardGap}px`
     };
-    return (jsxs("div", { ...htmlProps, children: [sortOptions.length > 0 && (jsxs("div", { className: styles$l.sortControls, children: [jsx("label", { htmlFor: "cardlist-sort-select", children: "Sort by:" }), jsx("select", { id: "cardlist-sort-select", value: sortKey, onChange: (e) => handleSortChange(e.target.value), className: styles$l.sortSelect, children: sortOptions.map(option => (jsx("option", { value: option.key, children: option.label }, option.key))) }), jsx("button", { onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'), className: `cw-button-icon ${sortDirection === 'asc' ? 'cwi-arrow-up' : 'cwi-arrow-down'}`, title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}` })] })), isLoading ? (jsx("div", { className: styles$l.loading, children: jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsx("div", { className: styles$l.emptyState, children: emptyState || jsx("p", { children: "No items to display" }) })) : (jsxs(Fragment, { children: [jsx("div", { className: `${styles$l.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsx("div", { className: styles$l.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (jsxs("div", { className: styles$l.pagination, children: [jsx("button", { disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)), className: "cw-button-icon cwi-chevron-left" }), jsxs("span", { className: styles$l.pageInfo, children: [currentPage, " of ", totalPages] }), jsx("button", { disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), className: "cw-button-icon cwi-chevron-right" })] }))] }))] }));
+    return (jsxs("div", { ...htmlProps, children: [sortOptions.length > 0 && (jsxs("div", { className: styles$g.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$g.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$g.loading, children: jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsx("div", { className: styles$g.emptyState, children: emptyState || jsx("p", { children: "No items to display" }) })) : (jsxs(Fragment, { children: [jsx("div", { className: `${styles$g.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsx("div", { className: styles$g.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (jsxs("div", { className: styles$g.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$g.pageInfo, children: [currentPage, " of ", totalPages] }), jsx("button", { disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), className: "cw-button-icon cwi-chevron-right" })] }))] }))] }));
 }
 
-var styles$k = {"cw-accordion":"cw-accordion-module__cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module__cw-accordion-body__xlI8b"};
+var styles$f = {"cw-accordion":"cw-accordion-module_cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module_cw-accordion-body__xlI8b"};
 
 /**
  *
@@ -1796,7 +1462,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$f["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$f["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
 }
 
 /**
@@ -1868,7 +1534,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *
  * @returns React component
  */
-function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, pageLabel = "page", rowSelection }) {
+function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, rowSelection }) {
     const [currentPage, setCurrentPage] = useState(1);
     const [expandedRowKey, setExpandedRowKey] = useState(null);
     const [sortConfig, setSortConfig] = useState({
@@ -2000,6 +1666,15 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
         window.addEventListener("mousemove", onMouseMove);
         window.addEventListener("mouseup", onMouseUp);
     };
+    const scrollContainerStyle = useMemo(() => {
+        if (stickyHeader || scrollHeight) {
+            return {
+                maxHeight: scrollHeight ?? 300,
+                overflowY: "auto"
+            };
+        }
+        return {}; // no height or scroll
+    }, [stickyHeader, scrollHeight]);
     const getColSpan = () => columns.length + (expandedRowRender ? 1 : 0);
     const hasClassNameRow = (item) => {
         return typeof item === "object" && item !== null && "classNameRow" in item;
@@ -2019,441 +1694,79 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
             const dynamicClassName = typeof classNameRow === "function"
                 ? classNameRow(item)
                 : classNameRow ?? "";
-            return (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: `${dynamicClassName} ${hasClassNameRow(item) ? item.classNameRow : ""} ${isSelected ? "cw-table-row-selected" : ""}`, onClick: (e) => rowSelection && handleRowClick(item, e), "data-row-key": itemKey != null ? String(itemKey) : undefined, style: {
+            return (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: `${dynamicClassName} ${hasClassNameRow(item) ? item.classNameRow : ""} ${isSelected ? "cw-table-row-selected" : ""}`, onClick: (e) => rowSelection && handleRowClick(item, e), style: {
                             cursor: rowSelection ? "pointer" : "default",
                             backgroundColor: isSelected ? "var(--cw-color-info-container)" : undefined,
                             transition: "background-color 0.2s ease",
                         }, children: [expandedRowRender && (jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey
                                         ? "cwi-chevron-down"
-                                        : "cwi-chevron-right"}` }) })), columns.map(col => (jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex] ?? "") : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsx("tr", { className: "cw-table-row-expanded", children: jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
+                                        : "cwi-chevron-right"}` }) })), columns.map(col => (jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex]) : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsx("tr", { className: "cw-table-row-expanded", children: jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
         });
     };
-    return (jsxs("div", { id: id, "data-testid": testId, className: `cw-table-container${stickyHeader || scrollHeight ? " cw-table-scroll" : ""} ${classNameContainer ?? ""}`, style: { ...(scrollHeight ? { "--table-height": typeof scrollHeight === "number" ? `${scrollHeight}px` : scrollHeight } : {}), ...style }, children: [jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsx("thead", { children: jsxs("tr", { children: [expandedRowRender && jsx("th", {}), columns.map(col => (jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${sortConfig.key === col.dataIndex
-                                        ? sortConfig.direction
-                                        : ""}`.trim(), style: {
-                                        cursor: col.sortable ? "pointer" : "default",
-                                        userSelect: "none",
-                                        width: columnWidths[col.key] ?? col.width,
-                                        ...((col.width || columnWidths[col.key]) && {
-                                            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
-                                                        ? "sortable"
-                                                        : sortConfig.direction === "asc"
-                                                            ? "sortable-asc"
-                                                            : "sortable-desc" }))] }), jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsx("tbody", { children: renderTableBody() })] }), pagination && data.length > pageSizeOptions[0] && (jsxs("footer", { className: "cw-table-pagination", children: [jsxs("div", { className: "cw-table-pagination-size", children: [jsx(CwIcon, { iconId: "list" }), jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, children: pageSizeOptions.map(size => (jsx("option", { value: size, children: pageLabel ? `${size} / ${pageLabel}` : size }, size))) })] }), jsxs("div", { className: "cw-table-pagination-nav", children: [jsx(CwButton, { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages === 1, variant: "icon", icon: "chevron-left-double" }), jsx(CwButton, { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages === 1, variant: "icon", icon: "chevron-left" }), jsx("input", { type: "text", inputMode: "numeric", value: currentPage, onChange: (e) => {
-                                    const value = parseInt(e.target.value, 10);
-                                    if (!isNaN(value))
-                                        handlePageChange(value);
-                                }, onBlur: (e) => {
-                                    const value = parseInt(e.target.value, 10);
-                                    if (isNaN(value) || value < 1 || value > totalPages) {
-                                        handlePageChange(1);
-                                    }
-                                }, 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" })] })] }))] }));
+    return (jsxs("div", { id: id, className: `cw-table-container ${classNameContainer ?? ""}`, style: style, children: [jsx("div", { style: scrollContainerStyle, children: jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsx("thead", { style: stickyHeader
+                                ? { position: "sticky", top: 0, background: "white", zIndex: 2 }
+                                : undefined, children: jsxs("tr", { children: [expandedRowRender && jsx("th", {}), columns.map(col => (jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${sortConfig.key === col.dataIndex
+                                            ? sortConfig.direction
+                                            : ""}`.trim(), style: {
+                                            cursor: col.sortable ? "pointer" : "default",
+                                            userSelect: "none",
+                                            width: columnWidths[col.key] ?? col.width,
+                                            ...((col.width || columnWidths[col.key]) && {
+                                                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, { size: "large", iconId: sortConfig.key !== col.dataIndex
+                                                            ? "sortable"
+                                                            : sortConfig.direction === "asc"
+                                                                ? "sortable-asc"
+                                                                : "sortable-desc" }))] }), jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsx("tbody", { children: renderTableBody() })] }) }), pagination && totalPages > 1 && (jsxs("footer", { className: "cw-table-pagination", children: [jsx("button", { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left-double", title: "First" }), jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left", title: "Previous" }), jsx("input", { type: "text", inputMode: "numeric", value: currentPage, onChange: (e) => {
+                            const value = parseInt(e.target.value, 10);
+                            if (!isNaN(value))
+                                handlePageChange(value);
+                        }, onBlur: (e) => {
+                            const value = parseInt(e.target.value, 10);
+                            if (isNaN(value) || value < 1 || value > totalPages) {
+                                handlePageChange(1);
+                            }
+                        }, min: 1, max: totalPages }), jsxs("span", { children: ["of ", totalPages] }), jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsx("button", { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, children: pageSizeOptions.map(size => (jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
 }
 
-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$e = {"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)
+        return null;
+    // If icon is a string, treat it as a class name
+    if (typeof icon === 'string') {
+        return (jsx("span", { className: `cwi-icons ${icon}` }));
+    }
+    // If icon is a ReactNode, return it directly
+    return icon;
+};
 /**
- * Hook that provides state management for CwSortableTable.
+ * CwTabs component for displaying tabbed content.
+ * @param CwTabsProps
+ * @example
+ The way to use the tab component:
+ *  const [activeTab, setActiveTab] = useState("1");
  *
- * Follows the same pattern as useSortableList:
- * - The hook only manages STATE (items, hasChanges, save, discard)
- * - The component manages INTERACTION (drag, drop, calculating new order)
- * - handleReorder receives the already-reordered array and just stores it
- * - Changes are only persisted when handleSave is called
- * - handleDiscard restores the original order
+ *  const handleTabChange = (tab) => {
+ *    setActiveTab(tab.key);
+ *  };
  *
- * @param initialItems - The initial array of items to display
+ *  const tabs = [
+ *    { key: "1", title: 'Tab 1', icon: 'iconClassname', content: <div>Content for tab 1</div> },
+ *    { key: "2", title: 'Tab 2', icon: 'iconClassname', content: <div>Content for tab 2</div> },
+ *    { key: "3", title: 'Tab 3', icon: 'iconClassname', content: <div>Content for tab 3</div> },
+ *  ];
  *
- * @example
- * ```tsx
- * const { items, hasChanges, handleReorder, handleSave, handleDiscard } = useSortableTable(data);
- * ```
- */
-function useSortableTable(initialItems) {
-    const [items, setItems] = useState(initialItems);
-    const [originalItems, setOriginalItems] = useState(initialItems);
-    const [hasChanges, setHasChanges] = useState(false);
-    // Sync items only when initialItems changes from outside (e.g. after initial fetch).
-    // We skip the sync when there are local unsaved changes to avoid
-    // overwriting the user's reordering work.
-    const prevInitialRef = useRef(initialItems);
-    useEffect(() => {
-        if (prevInitialRef.current === initialItems)
-            return;
-        prevInitialRef.current = initialItems;
-        if (!hasChanges) {
-            setItems(initialItems);
-            setOriginalItems(initialItems);
-        }
-    }, [initialItems, hasChanges]);
-    // Receives the already-reordered array from the component and stores it.
-    // No splice logic here — same pattern as useSortableList.handleReorder.
-    const handleReorder = useCallback((newItems) => {
-        setItems(newItems);
-        setHasChanges(true);
-    }, []);
-    const handleSave = async (onSave) => {
-        await onSave(items);
-        setOriginalItems(items);
-        setHasChanges(false);
-    };
-    const handleDiscard = useCallback(() => {
-        setItems(originalItems);
-        setHasChanges(false);
-    }, [originalItems]);
-    return {
-        items,
-        hasChanges,
-        handleReorder,
-        handleSave,
-        handleDiscard,
-        // dragState is managed in the component, same as CwSortableList
-        dragState: { dragSourceIndex: -1, dropTargetIndex: -1 },
-    };
-}
-
-// ─── Drop indicator row ───────────────────────────────────────────────────────
-const DropIndicatorRow = ({ colSpan }) => (jsx("tr", { className: styles$j.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))) }));
-// ─── Component ────────────────────────────────────────────────────────────────
-/**
- * CwSortableTable
- *
- * A table with drag-and-drop row reordering and save/discard support.
- * Shares visual styles with CwTable but is intentionally simpler:
- * no column sorting, no pagination.
- *
- * When the user reorders rows, changes are held locally until they
- * click Save. A save bar appears automatically when there are pending changes.
- *
- * Follows the same pattern as CwSortableList:
- * - All rows are draggable — the handle is visual only
- * - Reorder is calculated in onDragEnd using lastValidDropIndex
- * - draggedItem is tracked in state, not via dataTransfer
- */
-function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = false, textNoData = "No data available", className, tableClassName, maxHeight, showHandle = true, style, saveLabel = "Save order", discardLabel = "Discard", }) {
-    const { items, hasChanges, handleReorder, handleSave, handleDiscard, } = useSortableTable(data);
-    // Drag state lives in the component, same as CwSortableList
-    const [draggedItem, setDraggedItem] = useState(null);
-    const [dropIndicatorIndex, setDropIndicatorIndex] = useState(null);
-    const [lastValidDropIndex, setLastValidDropIndex] = useState(null);
-    // Total columns = handle column (optional) + user columns
-    const totalCols = columns.length + (showHandle ? 1 : 0);
-    const containerStyle = {
-        ...style,
-        ...(maxHeight ? { maxHeight, overflowY: "auto" } : {}),
-    };
-    // ── Drag handlers — replicating CwSortableList pattern exactly ──────────
-    const cleanupDragState = () => {
-        setDraggedItem(null);
-        setDropIndicatorIndex(null);
-        setLastValidDropIndex(null);
-    };
-    const handleDragStart = (e, item) => {
-        setDraggedItem(item);
-        setLastValidDropIndex(null);
-        e.dataTransfer.effectAllowed = "move";
-    };
-    const handleDragOver = (e, index) => {
-        e.preventDefault();
-        if (!draggedItem)
-            return;
-        const rect = e.currentTarget.getBoundingClientRect();
-        const elementCenterY = rect.top + rect.height / 2;
-        const dropIndex = e.clientY < elementCenterY ? index : index + 1;
-        if (dropIndicatorIndex !== dropIndex) {
-            setDropIndicatorIndex(dropIndex);
-            setLastValidDropIndex(dropIndex);
-        }
-    };
-    const handleDragEnd = () => {
-        if (draggedItem && lastValidDropIndex !== null) {
-            const dragIndex = items.findIndex(item => item[rowKey] === draggedItem[rowKey]);
-            if (dragIndex !== lastValidDropIndex && dragIndex !== lastValidDropIndex - 1) {
-                const newItems = [...items];
-                const [draggedElement] = newItems.splice(dragIndex, 1);
-                let finalIndex = lastValidDropIndex;
-                if (dragIndex < finalIndex)
-                    finalIndex -= 1;
-                newItems.splice(finalIndex, 0, draggedElement);
-                handleReorder(newItems);
-            }
-        }
-        cleanupDragState();
-    };
-    // ── Render helpers ──────────────────────────────────────────────────────
-    const renderCell = (item, col) => {
-        if (col.render)
-            return col.render(item);
-        if (col.dataIndex) {
-            const value = item[col.dataIndex];
-            return value != null ? String(value) : "";
-        }
-        return "";
-    };
-    const renderBody = () => {
-        if (loading) {
-            return jsx(LoadingRows, { colSpan: totalCols });
-        }
-        if (!items || items.length === 0) {
-            return (jsx("tr", { children: jsx("td", { colSpan: totalCols, className: "cw-table-cell-empty", style: { textAlign: "center" }, children: textNoData }) }));
-        }
-        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)));
-        });
-    };
-    // ── 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) })] }))] }));
-}
-
-/**
- * A reusable and customizable table component (server-side pagination and sorting).
- *
- * @param props - Component props to configure columns, data, styles, pagination, expanded rows, and more.
- *
- * @example
- * // --- Component ---
- * const columns: Column<User>[] = [
- *   { title: "Name", dataIndex: "name", key: "name", sortable: true },
- *   { title: "Age", dataIndex: "age", key: "age", sortable: true },
- *   { title: "Address", dataIndex: "address", key: "address" }
- * ];
- *
- *
- * const [tableState, setTableState] = useState<ServerSideTableState<User>>({
- *   page: 1,
- *   pageSize: 5,
- *   sortKey: null,
- *   sortDirection: null
- * });
- * const [data, setData] = useState<User[]>([]);
- * const [totalItems, setTotalItems] = useState(0);
- * const [loading, setLoading] = useState(false);
- *
- * // Fetch simulation on table state change
- * useEffect(() => {
- *   setLoading(true);
- *   fetch(`/api/users?page=${tableState.page}&pageSize=${tableState.pageSize}` +
- *     (tableState.sortKey ? `&sortKey=${tableState.sortKey}&sortDirection=${tableState.sortDirection}` : "")
- *   )
- *     .then(res => res.json())
- *     .then(({ items, total }) => {
- *       setData(items);
- *       setTotalItems(total);
- *     })
- *     .finally(() => setLoading(false));
- * }, [tableState]);
- *
- * <CwTableServerSide<User>
- *   columns={columns}
- *   data={data}
- *   totalItems={totalItems}
- *   pagination={true}
- *   pageSizeOptions={[5, 10, 20]}
- *   loading={loading}
- *   serverState={tableState}
- *   onChange={setTableState}
- *   rowKey="id"
- *   textNoData="No data available"
- * />
- *
- * @returns React component
- */
-function CwTableServerSide({ columns, data, totalItems, pagination = false, pageSizeOptions = [5, 10, 20, 50], pageLabel = "page", expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, testId, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, rowSelection, onChange, serverState, }) {
-    const [internalState, setInternalState] = useState({
-        page: 1,
-        pageSize: pageSizeOptions[0],
-        sortKey: null,
-        sortDirection: null,
-    });
-    const [expandedRowKey, setExpandedRowKey] = useState(null);
-    const [columnWidths, setColumnWidths] = useState(() => columns.reduce((acc, col) => {
-        if (col.width)
-            acc[col.key] = col.width;
-        return acc;
-    }, {}));
-    const [selectedKeys, setSelectedKeys] = useState(new Set(rowSelection?.selectedRowKeys || []));
-    useEffect(() => {
-        setSelectedKeys(new Set(rowSelection?.selectedRowKeys || []));
-    }, [rowSelection?.selectedRowKeys]);
-    const state = serverState ?? internalState;
-    const triggerChange = useCallback((next) => {
-        const newState = { ...state, ...next };
-        if (!serverState)
-            setInternalState(newState);
-        onChange?.(newState);
-    }, [state, serverState, onChange]);
-    const handleItemsPerPageChange = useCallback((e) => {
-        triggerChange({ pageSize: parseInt(e.target.value, 10), page: 1 });
-    }, [triggerChange]);
-    const handleRowExpand = useCallback((item) => {
-        const itemKey = item[rowKey];
-        setExpandedRowKey((prev) => (prev === itemKey ? null : itemKey));
-        onExpand?.(item);
-    }, [rowKey, onExpand]);
-    const handleSort = useCallback((columnKey) => {
-        let nextSortKey = columnKey;
-        let nextSortDirection = "asc";
-        if (state.sortKey === columnKey) {
-            nextSortDirection = state.sortDirection === "asc" ? "desc" : state.sortDirection === "desc" ? null : "asc";
-            if (nextSortDirection === null)
-                nextSortKey = null;
-        }
-        triggerChange({ sortKey: nextSortKey, sortDirection: nextSortDirection, page: 1 });
-    }, [state, triggerChange]);
-    const handleRowClick = useCallback((item, e) => {
-        if (e.target.closest(".cw-table-col-expand")) {
-            return;
-        }
-        const itemKey = item[rowKey];
-        setSelectedKeys((prev) => {
-            const newSet = new Set(prev);
-            if (rowSelection?.type === "single") {
-                if (newSet.has(itemKey)) {
-                    newSet.clear();
-                }
-                else {
-                    newSet.clear();
-                    newSet.add(itemKey);
-                }
-            }
-            else {
-                if (newSet.has(itemKey)) {
-                    newSet.delete(itemKey);
-                }
-                else {
-                    newSet.add(itemKey);
-                }
-            }
-            const selectedRows = data.filter((item) => newSet.has(item[rowKey]));
-            setTimeout(() => {
-                rowSelection?.onChange?.(Array.from(newSet), selectedRows);
-            }, 0);
-            return newSet;
-        });
-    }, [rowSelection, rowKey, data]);
-    const totalPages = useMemo(() => {
-        return pagination ? Math.ceil(totalItems / state.pageSize) : 1;
-    }, [totalItems, state.pageSize, pagination]);
-    const handlePageChange = (page) => {
-        if (page >= 1 && page <= totalPages)
-            triggerChange({ page });
-    };
-    const startResize = (e, key) => {
-        e.preventDefault();
-        const startX = e.clientX;
-        const startWidth = e.target.parentElement?.offsetWidth || 0;
-        const onMouseMove = (moveEvent) => {
-            const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);
-            setColumnWidths((prev) => ({ ...prev, [key]: newWidth }));
-        };
-        const onMouseUp = () => {
-            window.removeEventListener("mousemove", onMouseMove);
-            window.removeEventListener("mouseup", onMouseUp);
-        };
-        window.addEventListener("mousemove", onMouseMove);
-        window.addEventListener("mouseup", onMouseUp);
-    };
-    const scrollContainerStyle = useMemo(() => {
-        if (stickyHeader || scrollHeight) {
-            return {
-                maxHeight: scrollHeight ?? 300,
-                overflowY: "auto",
-            };
-        }
-        return {};
-    }, [stickyHeader, scrollHeight]);
-    const getColSpan = () => columns.length + (expandedRowRender ? 1 : 0);
-    const hasClassNameRow = (item) => {
-        return typeof item === "object" && item !== null && "classNameRow" in item;
-    };
-    const renderTableBody = () => {
-        if (loading) {
-            return (jsx("tr", { children: jsx("td", { colSpan: getColSpan(), children: jsx("div", { children: "Loading data..." }) }) }));
-        }
-        if (!data || data.length === 0) {
-            return (jsx("tr", { children: jsx("td", { colSpan: getColSpan(), className: "cw-table-cell-empty", style: { textAlign: "center" }, children: textNoData }) }));
-        }
-        return data.map((item) => {
-            const itemKey = item[rowKey];
-            if (!itemKey)
-                console.warn("Missing row key for item", item);
-            const isSelected = selectedKeys.has(itemKey);
-            const dynamicClassName = typeof classNameRow === "function" ? classNameRow(item) : (classNameRow ?? "");
-            return (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: `${dynamicClassName} ${hasClassNameRow(item) ? item.classNameRow : ""} ${isSelected ? "cw-table-row-selected" : ""}`, onClick: (e) => rowSelection && handleRowClick(item, e), style: {
-                            cursor: rowSelection ? "pointer" : "default",
-                            backgroundColor: isSelected ? "var(--cw-color-info-container)" : undefined,
-                            transition: "background-color 0.2s ease",
-                        }, children: [expandedRowRender && (jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey ? "cwi-chevron-down" : "cwi-chevron-right"}` }) })), columns.map((col) => (jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex]) : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsx("tr", { className: "cw-table-row-expanded", children: jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
-        });
-    };
-    return (jsxs("div", { id: id, "data-testid": testId, className: `cw-table-container ${classNameContainer ?? ""}`, style: style, children: [jsx("div", { style: scrollContainerStyle, children: jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsx("thead", { style: stickyHeader ? { position: "sticky", top: 0, background: "white", zIndex: 2 } : undefined, children: jsxs("tr", { children: [expandedRowRender && jsx("th", {}), columns.map((col) => (jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${state.sortKey === col.dataIndex ? state.sortDirection : ""}`.trim(), style: {
-                                            cursor: col.sortable ? "pointer" : "default",
-                                            userSelect: "none",
-                                            width: columnWidths[col.key] ?? col.width,
-                                            ...((col.width || columnWidths[col.key]) && {
-                                                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, { size: "large", iconId: state.sortKey !== col.dataIndex
-                                                            ? "sortable"
-                                                            : state.sortDirection === "asc"
-                                                                ? "sortable-asc"
-                                                                : "sortable-desc" }))] }), jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsx("tbody", { children: renderTableBody() })] }) }), pagination && (jsxs("footer", { className: "cw-table-pagination", children: [jsx("button", { onClick: () => handlePageChange(1), disabled: state.page === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left-double", title: "First" }), jsx("button", { onClick: () => handlePageChange(state.page - 1), disabled: state.page === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left", title: "Previous" }), jsx("input", { type: "text", inputMode: "numeric", value: state.page, onChange: (e) => {
-                            const value = parseInt(e.target.value, 10);
-                            if (!isNaN(value))
-                                handlePageChange(value);
-                        }, onBlur: (e) => {
-                            const value = parseInt(e.target.value, 10);
-                            if (isNaN(value) || value < 1 || value > totalPages) {
-                                handlePageChange(1);
-                            }
-                        }, min: 1, max: totalPages }), jsxs("span", { children: ["of ", totalPages] }), jsx("button", { onClick: () => handlePageChange(state.page + 1), disabled: state.page === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsx("button", { onClick: () => handlePageChange(totalPages), disabled: state.page === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsx("select", { value: state.pageSize, onChange: handleItemsPerPageChange, children: pageSizeOptions.map((size) => (jsx("option", { value: size, children: pageLabel ? `${size} / ${pageLabel}` : size }, size))) })] }))] }));
-}
-
-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"};
-
-const TabIcon = ({ icon }) => {
-    if (!icon)
-        return null;
-    // If icon is a string, treat it as a class name
-    if (typeof icon === 'string') {
-        return (jsx("span", { className: `cwi-icons ${icon}` }));
-    }
-    // If icon is a ReactNode, return it directly
-    return icon;
-};
-/**
- * CwTabs component for displaying tabbed content.
- * @param CwTabsProps
- * @example
- The way to use the tab component:
- *  const [activeTab, setActiveTab] = useState("1");
- *
- *  const handleTabChange = (tab) => {
- *    setActiveTab(tab.key);
- *  };
- *
- *  const tabs = [
- *    { key: "1", title: 'Tab 1', icon: 'iconClassname', content: <div>Content for tab 1</div> },
- *    { key: "2", title: 'Tab 2', icon: 'iconClassname', content: <div>Content for tab 2</div> },
- *    { key: "3", title: 'Tab 3', icon: 'iconClassname', content: <div>Content for tab 3</div> },
- *  ];
- *
- *  <CwTabs
- *    tabs={tabs}
- *    tabsPosition="top"
- *    defaultActiveKey={activeTab}  // Use the current state for defaultActiveKey
- *    onTabClick={handleTabChange}
- *  />
- * @returns A tab
+ *  <CwTabs
+ *    tabs={tabs}
+ *    tabsPosition="top"
+ *    defaultActiveKey={activeTab}  // Use the current state for defaultActiveKey
+ *    onTabClick={handleTabChange}
+ *  />
+ * @returns A tab
  */
 function CwTabs(CwTabsProps) {
     // const [activeTab, setActiveTab] = useState<string | null>(null);
@@ -2468,7 +1781,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, className: styles$e['cw-tabs'], 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, children: [jsx(TabIcon, { icon: tab.icon }), tab.title, tab.badge !== undefined && (jsx("span", { className: styles$e['badge'], style: tab.badgeColor ? { backgroundColor: tab.badgeColor, color: getContrastColor(tab.badgeColor) } : undefined, children: tab.badge }))] }, tab.key))) }), jsx("div", { className: styles$e['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
 }
 
 /**
@@ -2492,49 +1805,7 @@ const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detail
                 onClose?.(ev);
         });
     }, [onClose, onOpen, onToggle]);
-    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"};
-
-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);
-    const [isResizing, setIsResizing] = useState(false);
-    const containerRef = useRef(null);
-    const handleMouseDown = useCallback((e) => {
-        if (!resizable)
-            return;
-        e.preventDefault();
-        setIsResizing(true);
-    }, [resizable]);
-    useEffect(() => {
-        if (!isResizing)
-            return;
-        const handleMouseMove = (e) => {
-            if (!containerRef.current)
-                return;
-            const rect = containerRef.current.getBoundingClientRect();
-            const newWidth = Math.max(minMasterWidth, Math.min(maxMasterWidth, e.clientX - rect.left));
-            setMasterWidth(newWidth);
-        };
-        const handleMouseUp = () => {
-            setIsResizing(false);
-        };
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-        document.body.style.cursor = 'col-resize';
-        document.body.style.userSelect = 'none';
-        return () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-            document.body.style.cursor = '';
-            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
-                    ? detailContent
-                    : (jsx("div", { className: styles$h['detail-empty'], children: emptyDetail ?? 'Select an item to view details' })) })] }));
+    return (jsx("div", { className: "cw-expandable", children: jsxs("details", { ref: myRef, ...detailsProps, children: [jsx("summary", { children: briefing }), children && jsx("section", { children: children })] }) }));
 };
 
 /**
@@ -2558,9 +1829,9 @@ const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "
                         : 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$d = {"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", }) {
+function CwSortableList({ items, onReorder, renderItem, className = '', movedItems = new Set(), emptyMessage = "No elements to show", readOnly = false, }) {
     const [draggedItem, setDraggedItem] = useState(null);
     const [dropIndicatorIndex, setDropIndicatorIndex] = useState(null);
     const [lastValidDropIndex, setLastValidDropIndex] = useState(null);
@@ -2621,15 +1892,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$d.sortableList} ${styles$d.emptyState} ${className}`, children: jsx("div", { className: styles$d.emptyMessage, children: emptyMessage }) }));
     }
-    return (jsx("div", { className: `${styles$g.sortableList} ${className}`, style: { maxHeight }, children: items.map((item, index) => {
+    return (jsx("div", { className: `${styles$d.sortableList} ${className}`, 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$d.dropIndicator }), jsxs("div", { className: `${styles$d.sortableItem} ${isDragging ? styles$d.dragging : ''} ${isMoved ? styles$d.moved : ''} ${readOnly ? styles$d.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$d.sortableHandle, children: jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxs("div", { className: styles$d.sortableContent, children: [jsx("div", { className: styles$d.sortableTitle, children: title }), extraContent && jsx("div", { className: styles$d.sortableExtraContent, children: extraContent })] }), jsx("div", { className: styles$d.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsx("div", { className: styles$d.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsx("div", { className: styles$d.dropIndicator }))] }, item.id));
         }) }));
 }
 
@@ -2751,7 +2022,7 @@ const CwTableGrouped = props => {
             [index]: !prev[index]
         }));
     };
-    return (jsx("div", { className: "cw-table-grouped", "data-testid": props.testId, style: { width: "100%" }, children: jsxs("table", { style: { width: "100%" }, children: [jsx("colgroup", { children: props.tableData.head.map((head, i) => (jsx("col", { span: 1, style: { width: head.expandSize } }, i))) }), jsx("thead", { children: jsx("tr", { children: props.tableData.head.map((head, i) => (jsx("th", { children: head.title }, i))) }) }), jsx("tbody", { children: props.tableData.groups.map((group, i) => (jsxs(React__default.Fragment, { children: [jsx("tr", { "data-group": true, "data-expanded": !!expandedGroups[i], onClick: () => handleToggle(i), children: jsx("td", { colSpan: props.tableData.head.length, children: group.title }) }), expandedGroups[i] &&
+    return (jsx("div", { className: "cw-table-grouped", style: { width: "100%" }, children: jsxs("table", { style: { width: "100%" }, children: [jsx("colgroup", { children: props.tableData.head.map((head, i) => (jsx("col", { span: 1, style: { width: head.expandSize } }, i))) }), jsx("thead", { children: jsx("tr", { children: props.tableData.head.map((head, i) => (jsx("th", { children: head.title }, i))) }) }), jsx("tbody", { children: props.tableData.groups.map((group, i) => (jsxs(React__default.Fragment, { children: [jsx("tr", { "data-group": true, "data-expanded": !!expandedGroups[i], onClick: () => handleToggle(i), children: jsx("td", { colSpan: props.tableData.head.length, children: group.title }) }), expandedGroups[i] &&
                                 group.rows.map((child, j) => (jsx("tr", { "data-row": true, "data-row-last-of-group": j == group.rows.length - 1, children: child.cells.map((cell, k) => (jsx("td", { children: cell.content }, k))) }, j)))] }, i))) }), jsx("tfoot", {})] }) }));
 };
 
@@ -2806,28 +2077,12 @@ 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"};
-
-const DEFAULT_LABELS = {
-    uploadDisabled: 'Upload disabled',
-    clickToUpload: 'Click to upload or drag and drop',
-    acceptedFiles: (accept) => `Accepted files: ${accept}`,
-    singleFileOnly: '(Single file only)',
-    allTypesAccepted: 'All file types accepted',
-    changeFile: 'Change File',
-    clearAll: 'Clear all',
-    addMoreFiles: 'Add More Files',
-    filesSelected: (count) => `${count} file${count !== 1 ? 's' : ''} selected`,
-    fileTooLarge: (name, maxSize) => `File "${name}" is too large. Maximum size allowed is ${maxSize}MB.`,
-    invalidFormat: (name, accepted) => `File "${name}" has an invalid format. Allowed formats: ${accepted}`,
-    invalidMimeType: (name, types) => `File "${name}" has an invalid MIME type. Allowed types: ${types}`,
-    alreadySelected: (name) => `File "${name}" is already selected.`,
-};
+var styles$c = {"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"};
+
 function CwFileUploadMultiple(fileUploadProps) {
     const fileInputRef = useRef(null);
     const [selectedFiles, setSelectedFiles] = useState([]);
     const [existingFile, setExistingFile] = useState(fileUploadProps.initialFileName);
-    const labels = { ...DEFAULT_LABELS, ...fileUploadProps.labels };
     React__default.useEffect(() => {
         setExistingFile(fileUploadProps.initialFileName);
     }, [fileUploadProps.initialFileName]);
@@ -2841,7 +2096,7 @@ function CwFileUploadMultiple(fileUploadProps) {
             if (fileSizeInMB > fileUploadProps.maxFileSize) {
                 return {
                     isValid: false,
-                    error: labels.fileTooLarge(file.name, fileUploadProps.maxFileSize)
+                    error: `File "${file.name}" is too large. Maximum size allowed is ${fileUploadProps.maxFileSize}MB.`
                 };
             }
         }
@@ -2858,7 +2113,7 @@ function CwFileUploadMultiple(fileUploadProps) {
             if (!isExtensionValid) {
                 return {
                     isValid: false,
-                    error: labels.invalidFormat(file.name, fileUploadProps.accept)
+                    error: `File "${file.name}" has an invalid format. Allowed formats: ${fileUploadProps.accept}`
                 };
             }
         }
@@ -2868,7 +2123,7 @@ function CwFileUploadMultiple(fileUploadProps) {
             if (!isMimeTypeValid) {
                 return {
                     isValid: false,
-                    error: labels.invalidMimeType(file.name, fileUploadProps.allowedTypes.join(', '))
+                    error: `File "${file.name}" has an invalid MIME type. Allowed types: ${fileUploadProps.allowedTypes.join(', ')}`
                 };
             }
         }
@@ -2882,7 +2137,7 @@ function CwFileUploadMultiple(fileUploadProps) {
             // Check if the file already exists (by name and size)
             const isDuplicate = existingFiles.some(existingFile => existingFile.name === file.name && existingFile.size === file.size);
             if (isDuplicate) {
-                errors.push(labels.alreadySelected(file.name));
+                errors.push(`File "${file.name}" is already selected.`);
                 continue;
             }
             const validation = validateFile(file);
@@ -2973,12 +2228,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$c.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$c.hiddenInput }), selectedFiles.length === 0 && !existingFile ? (jsxs("div", { className: `${styles$c.uploadArea} ${fileUploadProps.disabled ? styles$c.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsx(CwIcon, { iconId: "upload" }), jsx("p", { className: `${styles$c.uploadTitle}`, children: fileUploadProps.disabled ? 'Upload disabled' : 'Click to upload or drag and drop' }), jsxs("p", { className: `${styles$c.uploadSubtitle}`, children: [fileUploadProps.accept ? `Accepted files: ${fileUploadProps.accept}` : 'All file types accepted', !fileUploadProps.multiple && ' (Single file only)'] })] })) : selectedFiles.length === 0 && existingFile ? (jsxs("div", { className: styles$c.filesContainer, children: [jsxs("div", { className: styles$c.fileItem, children: [jsxs("div", { className: styles$c.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$c.fileExtension, children: getFileExtension(existingFile) })] }), jsx("div", { className: styles$c.fileInfo, children: jsx("p", { className: styles$c.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) }), 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$c.smallButton })] }), jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxs("div", { className: styles$c.filesContainer, children: [jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxs("small", { className: styles$c.filesCount, children: [selectedFiles.length, " file", selectedFiles.length !== 1 ? 's' : '', " selected"] }), jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: "Clear all" })] }), selectedFiles.map((file, index) => (jsxs("div", { className: styles$c.fileItem, children: [jsxs("div", { className: styles$c.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$c.fileExtension, children: getFileExtension(file.name) })] }), jsxs("div", { className: styles$c.fileInfo, children: [jsx("p", { className: styles$c.fileName, children: file.name }), jsxs("p", { className: styles$c.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$c.smallButton })] }, index))), fileUploadProps.multiple && (jsx(CwButton, { text: "Add More Files", icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
 }
 
 function CwInput(CwInputProps) {
@@ -2992,7 +2247,9 @@ function CwInput(CwInputProps) {
             ? "cw-flex-column"
             : "cw-flex-row ", children: [jsx("label", { className: CwInputProps.disabled === true
                     ? CwInputProps.labelClassName + " " + "cw_label_text cw_label_text_disabled"
-                    : CwInputProps.labelClassName + " " + "cw_label_text", children: CwInputProps.labelName }), jsx("input", { id: CwInputProps.id, type: "text", value: CwInputProps.value, onChange: e => handleChange(e), className: CwInputProps.className + " " + "cw_input", placeholder: CwInputProps.placeholder === undefined ? "Write a text please" : CwInputProps.placeholder, style: CwInputProps.style, disabled: CwInputProps.disabled, required: CwInputProps.required }), CwInputProps.value && (jsx("button", { className: "cw_button_clear cwellt_flex cwellt_justify_center cwellt_align_items_center", onClick: handleClearClick }))] }));
+                    : CwInputProps.labelClassName + " " + "cw_label_text", children: CwInputProps.labelName }), jsx("input", { id: CwInputProps.id, type: "text", value: CwInputProps.value, onChange: e => handleChange(e), className: CwInputProps.className + " " + "cw_input", placeholder: CwInputProps.placeholder === undefined ? "Write a text please" : CwInputProps.placeholder, style: CwInputProps.style, disabled: CwInputProps.disabled, required: CwInputProps.required }), CwInputProps.value && (
+            // if the component is disabled do not show clear button
+            jsx("button", { className: "cw_button_clear cwellt_flex cwellt_justify_center cwellt_align_items_center", onClick: handleClearClick }))] }));
 }
 
 /**
@@ -3019,7 +2276,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$b = {"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 });
@@ -3222,15 +2479,15 @@ 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$b.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$b.colorPickerInteractiveArea, children: [jsx("div", { className: styles$b.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsx("div", { className: styles$b.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxs("div", { className: styles$b.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxs("div", { className: styles$b.colorAreaOverlay, children: [jsx("div", { className: styles$b.hueBackground, style: { backgroundColor: hueHex } }), jsx("div", { className: styles$b.whiteGradient }), jsx("div", { className: styles$b.blackGradient })] }), jsx("div", { className: styles$b.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$a = {"selectColor":"cw-input-color-module_selectColor__DTo3V","disabled":"cw-input-color-module_disabled__O1fK5","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 CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, width = '4rem', height = '2rem' }) => {
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useRef(null);
     const dropdownRef = useRef(null);
@@ -3279,7 +2536,7 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
         };
     }, [isOpen]);
     const handleToggle = () => {
-        if (disabled || readOnly)
+        if (disabled)
             return;
         setIsOpen(prev => !prev);
     };
@@ -3361,11 +2618,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(Fragment, { children: [jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$a.selectColor} ${disabled ? styles$a.disabled : ''}`, 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", role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && createPortal(jsx("div", { ref: dropdownRef, className: styles$a.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
 };
 
 /**
@@ -3384,20 +2641,15 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
  *   iconProps={{ id: "home" }}
  *   labelProps={{ children: "Name", width: "100px" }}
  *   buttonProps={{ children: "Ok", onclick:()=>{alert("hi")} }}
- *   feedback={{ type: "danger", message: "This field is required" }}
  * />
  * ```
  */
 function CwInputText(props) {
-    const { alignProps, buttonProps, iconProps, labelProps, className, feedback, ...inputProps } = props;
-    const feedbackMessages = feedback
-        ? Array.isArray(feedback) ? feedback : [feedback]
-        : [];
+    const { alignProps, buttonProps, iconProps, labelProps, className, ...inputProps } = props;
     const containerClassName = className
         ? `cw-input-text ${className}`
         : "cw-input-text";
-    const flexDirection = alignProps?.flexDirection ?? "row";
-    return (jsxs("div", { className: containerClassName, "data-direction": flexDirection, children: [jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: "cw-input-button", children: [jsx("input", { type: props.type ?? "text", ...inputProps }), buttonProps && jsx(CwButton, { ...buttonProps })] })] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+    return (jsx("div", { className: containerClassName, children: jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: "cw-input-button", children: [jsx("input", { type: props.type ?? "text", ...inputProps }), buttonProps && jsx(CwButton, { ...buttonProps })] })] }) }));
 }
 
 /**
@@ -3432,13 +2684,8 @@ function CwInputNumber(CwInputNumberProps) {
 }
 
 function CwTextArea(props) {
-    const { alignProps, buttonProps, iconProps, labelProps, resize, feedback, style, ...textareaProps } = props;
-    const feedbackMessages = feedback
-        ? Array.isArray(feedback) ? feedback : [feedback]
-        : [];
-    const flexDirection = alignProps?.flexDirection ?? "row";
-    const dataDirection = { 'data-direction': flexDirection };
-    return (jsxs("div", { className: "cw-text-area", ...dataDirection, style: style, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsx("textarea", { ...textareaProps, itemProp: textareaProps.required === true ? "required" : "", style: { resize: resize } }), buttonProps && jsx(CwButton, { ...buttonProps })] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+    const { alignProps, buttonProps, iconProps, labelProps, resize, ...textareaProps } = props;
+    return (jsx("div", { className: "cw-text-area", children: jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsx("textarea", { ...textareaProps, itemProp: textareaProps.required === true ? "required" : "", style: { ...textareaProps.style, resize: resize } }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
 }
 
 /**
@@ -3466,115 +2713,7 @@ function CwInputDate(props) {
     return (jsx("div", { className: "cw-input-date", children: jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsx("input", { type: "date", ...inputProps }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
 }
 
-var classes = {"datePicker":"cw-input-date-picker-module__datePicker__jogOq","input":"cw-input-date-picker-module__input__uQshH","calendar":"cw-input-date-picker-module__calendar__q39ic","calendarHeader":"cw-input-date-picker-module__calendarHeader__1btPK","arrowButton":"cw-input-date-picker-module__arrowButton__23tNc","calendarTitle":"cw-input-date-picker-module__calendarTitle__oOODw","calendarBody":"cw-input-date-picker-module__calendarBody__-711a","calendarDay":"cw-input-date-picker-module__calendarDay__z-Mmv","selected":"cw-input-date-picker-module__selected__XQgR7","todayButton":"cw-input-date-picker-module__todayButton__oYamC","emptyDay":"cw-input-date-picker-module__emptyDay__lbI5B"};
-
-/**
- * Converts a Date or ISO string to a Temporal.PlainDate.
- */
-function toPlainDate$1(dateString) {
-    if (dateString instanceof Date) {
-        return Temporal.PlainDate.from({
-            year: dateString.getFullYear(),
-            month: dateString.getMonth() + 1,
-            day: dateString.getDate(),
-        });
-    }
-    // ISO "YYYY-MM-DD" → direct parse
-    return Temporal.PlainDate.from(dateString);
-}
-/**
- * Formats a date as DD.MM.YYYY (German locale).
- */
-function toGermanDate(dateString) {
-    const pd = toPlainDate$1(dateString);
-    const day = String(pd.day).padStart(2, "0");
-    const month = String(pd.month).padStart(2, "0");
-    return `${day}.${month}.${pd.year}`;
-}
-/**
- * Formats a date as YYYY-MM-DD (ISO).
- */
-function toISODate(dateString) {
-    return toPlainDate$1(dateString).toString();
-}
-/**
- * Validates whether a string is a valid DD.MM.YYYY date.
- */
-function isValidGermanDate(textDate) {
-    return parseGermanDate(textDate) !== null;
-}
-/**
- * Converts a DD.MM.YYYY string to YYYY-MM-DD, or null if invalid.
- */
-function germanDateToISO(textDate) {
-    const pd = parseGermanDate(textDate);
-    return pd ? pd.toString() : null;
-}
-/**
- * Converts a DD.MM.YYYY string to a Date object, or null if invalid.
- */
-function germanDateToDate(textDate) {
-    const pd = parseGermanDate(textDate);
-    if (!pd)
-        return null;
-    return new Date(pd.year, pd.month - 1, pd.day);
-}
-/**
- * Returns the number of days in the month and the Monday-based
- * weekday offset (0 = Monday) for the 1st of the month.
- */
-function computeCalendarGrid(internalDate) {
-    const pd = Temporal.PlainDate.from({
-        year: internalDate.getFullYear(),
-        month: internalDate.getMonth() + 1,
-        day: 1,
-    });
-    const daysInMonth = pd.daysInMonth;
-    const startDay = pd.dayOfWeek - 1; // Temporal: 1=Mon … 7=Sun → 0-based Mon
-    return { daysInMonth, startDay };
-}
-/**
- * Returns true when the given day in the internalDate's month/year
- * matches the selected ISO value string.
- */
-function isSelectedDay(internalDate, day, value) {
-    const pd = Temporal.PlainDate.from({
-        year: internalDate.getFullYear(),
-        month: internalDate.getMonth() + 1,
-        day,
-    });
-    return pd.toString() === value;
-}
-/**
- * Returns a new Date set to the 1st of the month offset by `direction` months.
- */
-function computeNextMonthDate(currentDate, direction) {
-    const pd = Temporal.PlainDate.from({
-        year: currentDate.getFullYear(),
-        month: currentDate.getMonth() + 1,
-        day: 1,
-    });
-    const moved = pd.add({ months: direction });
-    return new Date(moved.year, moved.month - 1, moved.day);
-}
-// ── internal helper ────────────────────────────────────────────────────
-/**
- * Strictly parses a DD.MM.YYYY string into a Temporal.PlainDate, or null.
- */
-function parseGermanDate(text) {
-    const match = /^(\d{2})\.(\d{2})\.(\d{4})$/.exec(text);
-    if (!match)
-        return null;
-    const day = Number(match[1]);
-    const month = Number(match[2]);
-    const year = Number(match[3]);
-    try {
-        return Temporal.PlainDate.from({ year, month, day }, { overflow: "reject" });
-    }
-    catch {
-        return null;
-    }
-}
+var classes = {"datePicker":"cw-input-date-picker-module_datePicker__jogOq","input":"cw-input-date-picker-module_input__uQshH","calendar":"cw-input-date-picker-module_calendar__q39ic","calendarHeader":"cw-input-date-picker-module_calendarHeader__1btPK","arrowButton":"cw-input-date-picker-module_arrowButton__23tNc","calendarTitle":"cw-input-date-picker-module_calendarTitle__oOODw","calendarBody":"cw-input-date-picker-module_calendarBody__-711a","calendarDay":"cw-input-date-picker-module_calendarDay__z-Mmv","selected":"cw-input-date-picker-module_selected__XQgR7","todayButton":"cw-input-date-picker-module_todayButton__oYamC","emptyDay":"cw-input-date-picker-module_emptyDay__lbI5B"};
 
 const CwInputDatePicker = ({ value, onChange }) => {
     const [isCalendarOpen, setIsCalendarOpen] = useState(false);
@@ -3599,13 +2738,21 @@ const CwInputDatePicker = ({ value, onChange }) => {
     useEffect(() => {
         setTextDate(toGermanDate(value));
     }, [value]);
+    function toGermanDate(dateString) {
+        return moment(dateString).format("DD.MM.YYYY");
+    }
+    function toISODate(dateString) {
+        return moment(dateString).format("YYYY-MM-DD");
+    }
     const submitInput = () => {
-        if (isValidGermanDate(textDate)) {
-            const newDateString = germanDateToISO(textDate);
-            const newDate = germanDateToDate(textDate);
-            if (newDateString && newDate) {
+        if (moment(textDate, "DD.MM.YYYY", true).isValid()) {
+            const inputValue = textDate;
+            const momentDate = moment(inputValue, "DD.MM.YYYY", true);
+            if (momentDate.isValid()) {
+                const newDateString = momentDate.format("YYYY-MM-DD");
                 if (newDateString !== value) {
-                    setInternalDate(newDate);
+                    const newDateString = momentDate.format("YYYY-MM-DD");
+                    setInternalDate(momentDate.toDate());
                     onChange?.(newDateString);
                 }
                 setIsCalendarOpen(false);
@@ -3642,7 +2789,7 @@ const CwInputDatePicker = ({ value, onChange }) => {
         setIsCalendarOpen(false);
     };
     const handleClickMonthArrow = (direction) => {
-        setInternalDate(prevDate => computeNextMonthDate(prevDate, direction));
+        setInternalDate(prevDate => new Date(prevDate.getFullYear(), prevDate.getMonth() + direction, 1));
     };
     const handlePressEnter = (event) => {
         if (event.key === "Enter" && submitInput()) {
@@ -3655,21 +2802,23 @@ const CwInputDatePicker = ({ value, onChange }) => {
         }
     };
     const generateCalendarDays = () => {
-        const { daysInMonth, startDay } = computeCalendarGrid(internalDate);
+        const daysInMonth = new Date(internalDate.getFullYear(), internalDate.getMonth() + 1, 0).getDate();
+        const startDay = new Date(internalDate.getFullYear(), internalDate.getMonth(), 1).getDay() - 1;
         const calendarDays = new Array;
         for (let i = 0; i < startDay; i++) {
             calendarDays.push(jsx("div", { className: classes.emptyDay }, `empty-${i}`));
         }
         for (let day = 1; day <= daysInMonth; day++) {
-            const selected = isSelectedDay(internalDate, day, value);
-            calendarDays.push(jsx("div", { className: `${classes.calendarDay}${selected ? ` ${classes.selected}` : ""}`, onClick: () => handleClickDay(day), children: day }, day));
+            const currentDate = new Date(internalDate.getFullYear(), internalDate.getMonth(), day);
+            const isSelected = moment(currentDate).format("YYYY-MM-DD") === value;
+            calendarDays.push(jsx("div", { className: `${classes.calendarDay}${isSelected ? ` ${classes.selected}` : ""}`, onClick: () => handleClickDay(day), children: day }, day));
         }
         return calendarDays;
     };
     return (jsxs("div", { className: classes.datePicker, children: [jsx("input", { type: "text", value: textDate, onChange: e => setTextDate(e.currentTarget.value), onFocus: () => {
                     setInternalDate(new Date(value));
                     setIsCalendarOpen(true);
-                }, onBlur: handleBlurInput, onKeyDown: handlePressEnter, "data-valid": isValidGermanDate(textDate), ref: inputRef, className: classes.input }), isCalendarOpen && (jsxs("div", { className: classes.calendar, ref: calendarRef, children: [jsxs("div", { className: classes.calendarHeader, children: [jsx("button", { className: classes.arrowButton, onClick: () => handleClickMonthArrow(-1), children: "<" }), jsxs("span", { className: classes.calendarTitle, children: [internalDate.toLocaleString("default", { month: "long" }), " ", internalDate.getFullYear()] }), jsx("button", { className: classes.arrowButton, onClick: () => handleClickMonthArrow(1), children: ">" })] }), jsx("div", { className: classes.calendarBody, children: generateCalendarDays() }), jsx("button", { className: classes.todayButton, onClick: handleClickToday, children: "Today" })] }))] }));
+                }, onBlur: handleBlurInput, onKeyDown: handlePressEnter, "data-valid": moment(textDate, "DD.MM.YYYY", true).isValid(), ref: inputRef, className: classes.input }), isCalendarOpen && (jsxs("div", { className: classes.calendar, ref: calendarRef, children: [jsxs("div", { className: classes.calendarHeader, children: [jsx("button", { className: classes.arrowButton, onClick: () => handleClickMonthArrow(-1), children: "<" }), jsxs("span", { className: classes.calendarTitle, children: [internalDate.toLocaleString("default", { month: "long" }), " ", internalDate.getFullYear()] }), jsx("button", { className: classes.arrowButton, onClick: () => handleClickMonthArrow(1), children: ">" })] }), jsx("div", { className: classes.calendarBody, children: generateCalendarDays() }), jsx("button", { className: classes.todayButton, onClick: handleClickToday, children: "Today" })] }))] }));
 };
 
 /**
@@ -3722,47 +2871,6 @@ function CwTime(props) {
     return (jsx("div", { className: "cw-input-date", children: jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsx("input", { type: "time", ...inputProps }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
 }
 
-function parseDateParts(dateStr, format) {
-    const parts = dateStr.split(/[.\-\/]/);
-    if (parts.length !== 3)
-        return null;
-    let year, month, day;
-    switch (format) {
-        case "DD.MM.YYYY":
-        case "DD/MM/YYYY":
-            day = Number(parts[0]);
-            month = Number(parts[1]);
-            year = Number(parts[2]);
-            break;
-        case "MM/DD/YYYY":
-            month = Number(parts[0]);
-            day = Number(parts[1]);
-            year = Number(parts[2]);
-            break;
-        case "YYYY-MM-DD":
-            year = Number(parts[0]);
-            month = Number(parts[1]);
-            day = Number(parts[2]);
-            break;
-    }
-    try {
-        return Temporal.PlainDate.from({ year, month, day });
-    }
-    catch {
-        return null;
-    }
-}
-function formatPlainDate(pd, format) {
-    const dd = pd.day.toString().padStart(2, "0");
-    const mm = pd.month.toString().padStart(2, "0");
-    const yyyy = pd.year.toString().padStart(4, "0");
-    switch (format) {
-        case "DD.MM.YYYY": return `${dd}.${mm}.${yyyy}`;
-        case "DD/MM/YYYY": return `${dd}/${mm}/${yyyy}`;
-        case "MM/DD/YYYY": return `${mm}/${dd}/${yyyy}`;
-        case "YYYY-MM-DD": return `${yyyy}-${mm}-${dd}`;
-    }
-}
 /**
  * Input for entering a string of text as a date
  * @remarks
@@ -3792,8 +2900,11 @@ function CwInputDateText(props) {
     const format = dateFormat ?? displayFormat;
     const width = size ?? 12;
     const formattedDate = (date, inFormat, outFormat) => {
-        const pd = parseDateParts(date, inFormat);
-        return pd ? formatPlainDate(pd, outFormat) : "";
+        if (moment(date, inFormat, true).isValid()) {
+            return moment(date, inFormat).format(outFormat);
+        }
+        else
+            return "";
     };
     const [date, setDate] = useState("");
     const [displayedDate, setDisplayedDate] = useState("");
@@ -3812,9 +2923,8 @@ function CwInputDateText(props) {
     const onChangeInputText = (e) => {
         const newDate = e.target.value;
         setDisplayedDate(newDate);
-        const pd = parseDateParts(newDate, format);
-        if (pd) {
-            setDate(formatPlainDate(pd, internalFormat));
+        if (moment(newDate, format, true).isValid()) {
+            setDate(moment(newDate, format).format(internalFormat));
         }
         else {
             setDate("");
@@ -3823,9 +2933,8 @@ function CwInputDateText(props) {
     const onChangeInputDate = (e) => {
         const newDate = e.target.value;
         setDate(newDate);
-        const pd = parseDateParts(newDate, internalFormat);
-        if (pd)
-            setDisplayedDate(formatPlainDate(pd, format));
+        if (moment(newDate, internalFormat, true).isValid())
+            setDisplayedDate(moment(newDate, internalFormat).format(format));
         else
             setDisplayedDate("");
     };
@@ -4006,7 +3115,7 @@ const CwImageArea = forwardRef((props, ref) => {
 });
 CwImageArea.displayName = "CwImageArea";
 
-var styles$c = {"cw-weekday-selector":"cw-weekday-selector-module__cw-weekday-selector__Iz4GZ"};
+var styles$9 = {"cw-weekday-selector":"cw-weekday-selector-module_cw-weekday-selector__Iz4GZ"};
 
 /**
  * This class represents a week where days can be selected or unselected
@@ -4146,17 +3255,9 @@ const CwWeekdaySelector = ({ value = "", onChange, disabled = false }) => {
         setSelectedDays(newWeekdays);
         onChange?.(newWeekdays.toString());
     };
-    return (jsx("div", { className: styles$c["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
+    return (jsx("div", { className: styles$9["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
 };
 
-var styles$b = {"check-container":"cw-check-module__check-container__4nscZ","checkbox-group-container":"cw-check-module__checkbox-group-container__WMNbG"};
-
-function CwCheck(props) {
-    const { labelProps, labelText, iconProps, alignment = "row", className, ...inputProps } = props;
-    const displayText = labelText || labelProps?.text;
-    return (jsx("div", { className: `cw-check ${styles$b["check-container"]}${className ? ` ${className}` : ''}`, children: jsxs("label", { "data-direction": alignment, children: [jsx("input", { type: "checkbox", ...inputProps }), displayText && (jsxs("span", { className: "cw-icon-text", children: [iconProps && jsx(CwIcon, { ...iconProps }), displayText] }))] }) }));
-}
-
 function CwCheckbox(CwCheckboxProps) {
     const handleChange = (e) => {
         CwCheckboxProps.onChange?.(e.target.checked);
@@ -4172,23 +3273,6 @@ function CwCheckbox(CwCheckboxProps) {
                 : "cw_checkboxContent cwellt_flex_row" + " " + CwCheckboxProps.classNameContainer, style: CwCheckboxProps.styleContainer, children: [inputElement, CwCheckboxProps.labelName ? (jsx("label", { htmlFor: CwCheckboxProps.id, className: CwCheckboxProps.labelClassName, children: CwCheckboxProps.labelName })) : null] }));
 }
 
-function CwCheckboxGroup({ options, value = [], onChange, labelProps, alignProps, required, disabled, optionsAlignment = "row", className, feedback, }) {
-    const handleChange = (optionValue, checked) => {
-        if (checked) {
-            onChange([...value, optionValue]);
-        }
-        else {
-            onChange(value.filter(v => v !== optionValue));
-        }
-    };
-    const feedbackMessages = feedback
-        ? Array.isArray(feedback) ? feedback : [feedback]
-        : [];
-    const flexDirection = alignProps?.flexDirection ?? "row";
-    const dataDirection = { 'data-direction': flexDirection };
-    return (jsxs("div", { className: `cw-checkbox-group ${styles$b["checkbox-group-container"]}${className ? ` ${className}` : ''}`, ...dataDirection, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsx("div", { className: `${optionsAlignment === "row" ? "cw-flex-column cw-gap-small" : "cw-flex-row cw-flex-wrap"}`, children: options.map((option) => (jsx(CwCheck, { labelText: option.label, checked: value.includes(option.value), disabled: disabled || option.disabled, alignment: optionsAlignment, onChange: (e) => handleChange(option.value, e.target.checked) }, option.value))) })] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
-}
-
 function CwToggle(props) {
     const { labelProps, labelText, iconProps, alignment = "row", className, style, ...inputProps } = props;
     const displayText = labelText || labelProps?.text;
@@ -4204,16 +3288,13 @@ function CwToggle(props) {
  * @example
  * <CwSelect>
  *   <CwOption>A</CwOption>
- *   <CwOption color="#4a90d9">Blue option</CwOption>
+ *   <CwOption>B</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 }));
+    const { text, ...optionProps } = props;
+    return (jsx("option", { className: "cw-option", ...optionProps, children: optionProps.children ?? text }));
 }
 
 /**
@@ -4241,254 +3322,10 @@ function CwOption(props) {
  * </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;
-    const spaceBelow = window.innerHeight - anchorRect.bottom;
-    const top = spaceBelow >= panelH + 4
-        ? anchorRect.bottom + 4
-        : Math.max(4, anchorRect.top - panelH);
-    const width = anchorRect.width;
-    const left = Math.max(4, Math.min(anchorRect.left, window.innerWidth - width - 4));
-    return { top, left, width };
-}
-// ─── Hook ─────────────────────────────────────────────────────────────────────
-/**
- * Generic portal-based dropdown panel hook.
- *
- * Renders the panel as a direct child of `<body>` via `createPortal` so it
- * escapes any `overflow: hidden/auto` ancestor (dialogs, tabs, cards, etc.).
- * Positions the panel with `position: fixed` computed from the anchor element's
- * `getBoundingClientRect()`, and repositions on scroll and resize.
- *
- * The fix pattern is the same as {@link usePickerPopup} used by `CwDatePicker`.
- *
- * > **Future migration note:** Once the project's minimum browser baseline
- * > reaches Firefox 147 / Safari 26 (CSS Anchor Positioning — Baseline 2026),
- * > this hook can be replaced with `popover="manual"` + CSS `anchor()` with
- * > zero JS positioning.
- *
- * @example
- * ```tsx
- * const wrapperRef = useRef<HTMLDivElement>(null);
- * const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
- *   anchorRef: wrapperRef,
- *   isOpen,
- *   onClose: () => setIsOpen(false),
- * });
- *
- * return (
- *   <div ref={wrapperRef}>
- *     <input ... />
- *     {renderPanel(
- *       <div ref={panelRef} style={panelStyle} className={styles.dropdown}>
- *         {options}
- *       </div>
- *     )}
- *   </div>
- * );
- * ```
- */
-function useDropdownPortal({ anchorRef, isOpen, onClose, positionStrategy = defaultPositionStrategy, }) {
-    const panelRef = useRef(null);
-    const [style, setStyle] = useState({
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "auto",
-        zIndex: 1000,
-        right: "auto",
-        marginLeft: 0,
-    });
-    const reposition = useCallback(() => {
-        const anchor = anchorRef.current;
-        if (!anchor)
-            return;
-        const anchorRect = anchor.getBoundingClientRect();
-        const panelRect = panelRef.current?.getBoundingClientRect() ?? null;
-        const { top, left, width } = positionStrategy(anchorRect, panelRect);
-        setStyle({
-            position: "fixed",
-            top,
-            left,
-            width: width ?? "auto",
-            zIndex: 1000,
-            right: "auto",
-            marginLeft: 0,
-        });
-    }, [anchorRef, positionStrategy]);
-    // Reposition when opened; re-measure after first paint to get real panel size
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        reposition();
-        const raf = requestAnimationFrame(reposition);
-        const handleUpdate = () => reposition();
-        window.addEventListener("resize", handleUpdate);
-        // Capture phase catches scroll on all scrollable ancestors
-        window.addEventListener("scroll", handleUpdate, true);
-        return () => {
-            cancelAnimationFrame(raf);
-            window.removeEventListener("resize", handleUpdate);
-            window.removeEventListener("scroll", handleUpdate, true);
-        };
-    }, [isOpen, reposition]);
-    // Close when the anchor scrolls out of view in any overflow container
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const anchor = anchorRef.current;
-        if (!anchor)
-            return;
-        const observer = new IntersectionObserver(([entry]) => { if (!entry.isIntersecting)
-            onClose(); }, { threshold: 0 });
-        observer.observe(anchor);
-        return () => observer.disconnect();
-    }, [isOpen, anchorRef, onClose]);
-    // Close on outside click (anchor + panel are both considered "inside")
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const handleMouseDown = (e) => {
-            const target = e.target;
-            if (anchorRef.current?.contains(target) || panelRef.current?.contains(target))
-                return;
-            onClose();
-        };
-        document.addEventListener("mousedown", handleMouseDown);
-        return () => document.removeEventListener("mousedown", handleMouseDown);
-    }, [isOpen, onClose, anchorRef, panelRef]);
-    const renderPanel = useCallback((children) => {
-        if (!isOpen)
-            return null;
-        return createPortal(children, document.body);
-    }, [isOpen]);
-    return { panelRef, panelStyle: style, renderPanel };
-}
-
-var dropdownStyles = {"dropdown":"cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-choice-dropdown-module__optionFocused__BYMxj","optionSelected":"cw-choice-dropdown-module__optionSelected__Lt8Xg","optionDisabled":"cw-choice-dropdown-module__optionDisabled__n3scM","searchBox":"cw-choice-dropdown-module__searchBox__0gox7","searchInput":"cw-choice-dropdown-module__searchInput__G5oRs","emptyState":"cw-choice-dropdown-module__emptyState__HO0Y7","colorCircle":"cw-choice-dropdown-module__colorCircle__x7mI9"};
-
-/**
- * Custom dropdown component with colour-coded options, optional search filter, and full
- * keyboard navigation (↑ ↓ Enter Esc Tab).
- *
- * Use `CwDropdown` instead of the native `<select>` when options need colour indicators or
- * when inline search filtering is required.
- *
- * @example
- * <CwDropdown
- *   options={[{ value: 'a', label: 'Option A', color: '#1976D2' }]}
- *   value={selected}
- *   onChange={setSelected}
- *   labelProps={{ text: 'My Label' }}
- * />
- */
-function CwDropdown({ options, value, onChange, labelProps, alignProps, placeholder = "Select...", allowSearch = false, disabled = false, required = false, feedback, className, style, ...otherProps }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [searchText, setSearchText] = useState("");
-    const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    const containerRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const inputRef = useRef(null);
-    const highlightedItemRef = useRef(null);
-    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
-        anchorRef: wrapperRef,
-        isOpen,
-        onClose: () => { setIsOpen(false); setSearchText(""); setHighlightedIndex(-1); },
-    });
-    const selectedOption = options.find(opt => opt.value === value);
-    // Filter options based on search
-    const filteredOptions = searchText
-        ? options.filter(opt => opt.label.toLowerCase().includes(searchText.toLowerCase()))
-        : options;
-    // Feedback handling
-    const feedbackMessages = feedback
-        ? Array.isArray(feedback) ? feedback : [feedback]
-        : [];
-    // Scroll highlighted item into view
-    useEffect(() => {
-        if (isOpen && highlightedItemRef.current) {
-            highlightedItemRef.current.scrollIntoView({
-                block: "nearest",
-                behavior: "smooth",
-            });
-        }
-    }, [highlightedIndex, isOpen]);
-    const handleTriggerClick = useCallback(() => {
-        if (!disabled) {
-            setIsOpen(!isOpen);
-            setHighlightedIndex(-1);
-            if (!isOpen && allowSearch) {
-                setTimeout(() => inputRef.current?.focus(), 0);
-            }
-        }
-    }, [isOpen, disabled, allowSearch]);
-    const handleOptionSelect = useCallback((optionValue) => {
-        const selected = options.find(opt => opt.value === optionValue);
-        if (selected && !selected.disabled) {
-            onChange?.(optionValue);
-            setIsOpen(false);
-            setSearchText("");
-            setHighlightedIndex(-1);
-        }
-    }, [options, onChange]);
-    const handleSearchChange = useCallback((e) => {
-        setSearchText(e.target.value);
-        setHighlightedIndex(-1);
-    }, []);
-    const handleKeyDown = useCallback((e) => {
-        if (!isOpen) {
-            if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
-                e.preventDefault();
-                setIsOpen(true);
-            }
-            return;
-        }
-        switch (e.key) {
-            case "ArrowDown":
-                e.preventDefault();
-                setHighlightedIndex(prev => prev < filteredOptions.length - 1 ? prev + 1 : 0);
-                break;
-            case "ArrowUp":
-                e.preventDefault();
-                setHighlightedIndex(prev => prev > 0 ? prev - 1 : filteredOptions.length - 1);
-                break;
-            case "Enter":
-                e.preventDefault();
-                if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
-                    handleOptionSelect(filteredOptions[highlightedIndex].value);
-                }
-                break;
-            case "Escape":
-                e.preventDefault();
-                setIsOpen(false);
-                setSearchText("");
-                setHighlightedIndex(-1);
-                break;
-            case "Tab":
-                setIsOpen(false);
-                setSearchText("");
-                setHighlightedIndex(-1);
-                break;
-        }
-    }, [isOpen, highlightedIndex, filteredOptions, handleOptionSelect]);
-    const flexDirection = alignProps?.flexDirection ?? "row";
-    return (jsxs("div", { ref: containerRef, className: `cw-dropdown${className ? ` ${className}` : ""}`, "data-direction": flexDirection, style: style, ...otherProps, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-dropdown-wrapper", ref: wrapperRef, children: [jsx("button", { type: "button", className: "cw-dropdown-trigger", onClick: handleTriggerClick, onKeyDown: handleKeyDown, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-label": selectedOption?.label || placeholder, children: jsx("div", { className: "cw-dropdown-trigger-content", children: selectedOption ? (jsxs(Fragment, { children: [selectedOption.color && (jsx("span", { className: dropdownStyles.colorCircle, style: { backgroundColor: selectedOption.color } })), jsx("span", { children: selectedOption.label })] })) : (jsx("span", { className: "cw-dropdown-placeholder", children: placeholder })) }) }), jsx("div", { style: { display: "flex", alignItems: "center", paddingRight: "0.5rem", flexShrink: 0, cursor: disabled ? "not-allowed" : "pointer" }, onClick: handleTriggerClick, children: jsx(CwIcon, { iconId: "chevron-down", size: "small" }) }), renderPanel(jsxs("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", onKeyDown: handleKeyDown, children: [allowSearch && (jsx("div", { className: dropdownStyles.searchBox, children: jsx("input", { ref: inputRef, type: "text", placeholder: "Search...", value: searchText, onChange: handleSearchChange, onKeyDown: handleKeyDown, className: dropdownStyles.searchInput, autoComplete: "off" }) })), jsx("ul", { children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => (jsxs("li", { ref: highlightedIndex === index ? highlightedItemRef : null, className: [
-                                                dropdownStyles.option,
-                                                value === option.value ? dropdownStyles.optionSelected : "",
-                                                highlightedIndex === index ? dropdownStyles.optionFocused : "",
-                                                option.disabled ? dropdownStyles.optionDisabled : "",
-                                            ].filter(Boolean).join(" "), onClick: () => !option.disabled && handleOptionSelect(option.value), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": value === option.value, "aria-disabled": option.disabled, children: [option.color && (jsx("span", { className: dropdownStyles.colorCircle, style: { backgroundColor: option.color } })), jsx("span", { children: option.label })] }, option.value)))) : (jsx("li", { className: dropdownStyles.emptyState, children: "No options available" })) })] }))] })] }), feedbackMessages.map((item, index) => (jsx("p", { className: "cw-input-info", "data-color": item.type, children: item.message }, index)))] }));
+    const { alignProps, labelProps, buttonProps, iconProps, placeholder, children, style, ...selectProps } = props;
+    const flexDirection = alignProps?.flexDirection;
+    const dataDirection = flexDirection ? { 'data-direction': flexDirection } : {};
+    return (jsx("div", { className: "cw-select", ...dataDirection, style: style, children: jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("select", { ...selectProps, children: [placeholder && jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
 }
 
 function CwDropdownFilter(props) {
@@ -4501,56 +3338,6 @@ function CwDropdownFilter(props) {
     return (jsxs("div", { id: props.IdContent, className: containerClassName, children: [props.children, isVisible && (jsx("nav", { className: "cw-dropdown-menu", style: inlineStyles, onMouseLeave: props.onMouseLeave, id: props.idDropDownFilter, role: "menu", children: jsx("ul", { role: "none", children: props.DataSourceDropDownItem?.map((item) => (jsx("li", { id: item.IdDropDown_filter, role: "menuitem", children: item.dropDownFilter_desc }, item.IdDropDown_filter))) }) }))] }));
 }
 
-var styles$a = {"container":"cw-popover-button-module__container__YSWQU","panel":"cw-popover-button-module__panel__C-BTn"};
-
-/**
- * Button that toggles a floating panel with arbitrary children.
- * Uses the native Popover API — panel renders in the browser's top layer,
- * escaping all overflow/stacking contexts. Light dismiss (click outside)
- * and Escape key are handled natively by the browser.
- *
- * Designed as a composable primitive:
- * - Column picker: put `<CwCheckboxGroup>` inside
- * - Options menu: put toggles / links inside
- * - Future CwTable integration: use internally for column visibility
- *
- * @example
- * <CwPopoverButton text="Columns" icon="table" variant="outline">
- *     <CwCheckboxGroup options={opts} value={val} onChange={setVal} />
- * </CwPopoverButton>
- *
- * @example
- * <CwPopoverButton text="Options" icon="options" variant="outline" placement="bottom-end">
- *     <CwToggle labelText="Show assigned" checked={v} onChange={setV} />
- * </CwPopoverButton>
- */
-function CwPopoverButton({ children, panelWidth = "auto", placement = "bottom-start", panelClassName, ...buttonProps }) {
-    const containerRef = useRef(null);
-    const panelRef = useRef(null);
-    const panelCallbackRef = useCallback((node) => {
-        panelRef.current = node;
-        node?.setAttribute("popover", "auto");
-    }, []);
-    const handleClick = useCallback(() => {
-        const panel = panelRef.current;
-        const container = containerRef.current;
-        if (!panel || !container)
-            return;
-        const rect = container.getBoundingClientRect();
-        panel.style.top = `${rect.bottom + 4}px`;
-        if (placement === "bottom-start") {
-            panel.style.left = `${rect.left}px`;
-            panel.style.right = "auto";
-        }
-        else {
-            panel.style.right = `${window.innerWidth - rect.right}px`;
-            panel.style.left = "auto";
-        }
-        panel.togglePopover();
-    }, [placement]);
-    return (jsxs("div", { ref: containerRef, className: styles$a.container, children: [jsx(CwButton, { ...buttonProps, onClick: handleClick }), jsx("div", { ref: panelCallbackRef, className: `${styles$a.panel}${panelClassName ? ` ${panelClassName}` : ""}`, style: { width: panelWidth }, children: children })] }));
-}
-
 function itemsToMultiFilterTags(items, nameKey, valueKey, category, primaryColor, onPrimaryColor) {
     const result = new Set();
     items.forEach((item, index) => {
@@ -4566,13 +3353,13 @@ function itemsToMultiFilterTags(items, nameKey, valueKey, category, primaryColor
     return result;
 }
 
-var styles$9 = {"cw-multifilter-tag":"cw-multi-filter-tag-module__cw-multifilter-tag__Epda-"};
+var styles$8 = {"cw-multifilter-tag":"cw-multi-filter-tag-module_cw-multifilter-tag__Epda-"};
 
 const CwMultiFilterTag = props => {
     const { ID, Name, Value, Category, Removable, PrimaryColor, Selectable, Selected } = props;
     const backgroundColor = `rgb(${PrimaryColor.r},${PrimaryColor.g},${PrimaryColor.b})`;
     const isOutlineMode = Selected && !Removable;
-    return (jsx("li", { className: styles$9["cw-multifilter-tag"], id: ID, "data-value": Value, "data-category": Category, "data-selected": !!Selected, title: props.tooltip ?? Name, onClick: () => {
+    return (jsx("li", { className: styles$8["cw-multifilter-tag"], id: ID, "data-value": Value, "data-category": Category, "data-selected": !!Selected, title: Name, onClick: () => {
             if (Selectable)
                 props.OnSelect?.(props);
         }, children: jsx(CwChip, { label: Name, colorScheme: "custom", customColor: backgroundColor, variant: isOutlineMode ? "outline" : "soft", closable: Removable, onClose: () => props.OnRemove?.(props), 
@@ -4582,7 +3369,7 @@ const CwMultiFilterTag = props => {
             } : undefined }) }));
 };
 
-var styles$8 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module__cw-multi-filter-catalog-container__S3nsq","cw-multi-filter":"cw-multi-filter-module__cw-multi-filter__zipBK","category-selected":"cw-multi-filter-module__category-selected__eYbes","cw-multi-filter-search":"cw-multi-filter-module__cw-multi-filter-search__eyHr0 cw-choice-input-box-module__inputBox__gHY9d"};
+var styles$7 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-multi-filter-catalog-container__S3nsq","cw-multi-filter":"cw-multi-filter-module_cw-multi-filter__zipBK","cw-multi-filter-search":"cw-multi-filter-module_cw-multi-filter-search__eyHr0"};
 
 /**
  * A multiple filter selector, a MULTI-SELECT even. Allows users to select and filter items based on tags.
@@ -4723,21 +3510,26 @@ var styles$8 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module__cw-
  * @param {CwMultiFilterProps} props
  * @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 CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style }) => {
     const [filteredTags, setFilteredTags] = useState(new Set());
     const [inputTextValue, setInputTextValue] = useState("");
     const [isPanelOpen, setIsPanelOpen] = useState(false);
     const [selectedCategory, setSelectedCategory] = useState("All");
     const componentRef = useRef(null);
     const inputRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
-        anchorRef: wrapperRef,
-        isOpen: isPanelOpen,
-        onClose: () => { setIsPanelOpen(false); setFilteredTags(getUnselectedAll()); setSelectedCategory("All"); setInputTextValue(""); },
-    });
     useEffect(() => {
-        // Outside-click is now handled by useDropdownPortal
+        function handleClickOutside(event) {
+            if (componentRef.current && !componentRef.current.contains(event.target)) {
+                setIsPanelOpen(false);
+                setFilteredTags(new Set());
+                setSelectedCategory("All");
+                setInputTextValue("");
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
     }, []);
     const categoriesMappedToTags = () => {
         const categoriesMap = new Map();
@@ -4748,10 +3540,9 @@ 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 handleClickCategory = (category) => {
         setSelectedCategory(category);
-        setFilteredTags(category !== "All" ? (categoriesMappedToTags().get(category) ?? new Set()) : getUnselectedAll());
+        setFilteredTags(category != "All" ? (categoriesMappedToTags().get(category) ?? new Set()) : new Set());
     };
     const rgbAString = (r, g, b) => {
         return `rgb(${r}, ${g}, ${b})`;
@@ -4783,7 +3574,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
             setFilteredTags(new Set(newFilterTags));
         }
         else {
-            setFilteredTags(getUnselectedAll());
+            setFilteredTags(new Set());
         }
     };
     const addTag = (newTag) => {
@@ -4797,13 +3588,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
             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;
-            });
+            //setFilteredTags(allTags);
         }
     };
     const removeTag = (id) => {
@@ -4827,9 +3612,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
             inputRef.current?.focus();
         }
     };
-    return (jsxs("form", { ref: componentRef, id: id, className: `${styles$8["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
+    return (jsxs("form", { ref: componentRef, id: id, className: styles$7["cw-multi-filter"], style: style, onSubmit: (e) => {
             e.preventDefault();
-        }, children: [jsxs("div", { onClick: handleDivClick, ref: wrapperRef, className: styles$8["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-outline-variant)" } : {}, children: [jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.currentTarget.value), autoComplete: "off", placeholder: selectedTags.size === 0 ? placeholder : "", onKeyDown: e => {
+        }, children: [jsxs("div", { onClick: handleDivClick, className: styles$7["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-primary)", outlineOffset: "-2px" } : {}, children: [jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.target.value), autoComplete: "off", placeholder: "Write to filter", onKeyDown: e => {
                                     switch (e.key) {
                                         case "Enter":
                                         case "Tab": {
@@ -4856,10 +3641,29 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
                                             break;
                                         }
                                     }
-                                } })] }), 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)
+                                } })] }), selectedTags.size > 0 ? (jsx("input", { type: "reset", value: "\u00D7", onClick: e => {
+                            e.preventDefault();
+                            onChangeSelectedTags(new Set());
+                        } })) : null] }), jsxs("section", { className: styles$7["cw-multi-filter-catalog-container"], "data-display-none": !isPanelOpen, children: [jsxs("nav", { children: [jsx("button", { style: selectedCategory === "All"
+                                    ? {
+                                        backgroundColor: "var(--cw-color-primary-container)",
+                                        color: "var(--cw-color-primary)",
+                                        outline: "2px solid var(--cw-color-primary)",
+                                        outlineOffset: "-2px",
+                                        fontWeight: 400
+                                    }
+                                    : {}, onClick: () => handleClickCategory("All"), children: "SEARCH IN ALL CATEGORIES" }), Array.from(categoriesMappedToTags().keys()).map(category => (jsx("button", { style: selectedCategory === category
+                                    ? {
+                                        backgroundColor: getColor(category).primary,
+                                        color: getColor(category).onPrimary,
+                                        outline: "2px solid " + getColor(category).onPrimary,
+                                        outlineOffset: "-2px",
+                                        fontWeight: 400
+                                    }
+                                    : {
+                                        backgroundColor: getColor(category).primary,
+                                        color: getColor(category).onPrimary,
+                                    }, onClick: () => handleClickCategory(category), children: category }, category)))] }), jsx("ul", { children: Array.from(filteredTags)
                             .sort((a, b) => {
                             const input = inputTextValue.trim().toLowerCase();
                             const aName = a.Name.trim().toLowerCase();
@@ -4879,149 +3683,10 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
                                     removeTag(props.ID);
                                 else
                                     addTag(props);
-                            } }, props.ID))) })] }))] }));
+                            } }, props.ID))) })] })] }));
 };
 
-var styles$7 = {"container":"cw-tag-selector-module__container__-do8i","inputBox":"cw-tag-selector-module__inputBox__3NGz9 cw-choice-input-box-module__inputBox__gHY9d","disabled":"cw-tag-selector-module__disabled__vbud9 cw-choice-input-box-module__disabled__TFAnC","dropdown":"cw-tag-selector-module__dropdown__X6Dob cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-tag-selector-module__option__2UQ7g cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-tag-selector-module__optionFocused__8-lv8 cw-choice-dropdown-module__optionFocused__BYMxj","optionDot":"cw-tag-selector-module__optionDot__CdFlG cw-choice-dropdown-module__colorCircle__x7mI9","selectAll":"cw-tag-selector-module__selectAll__HyvMA"};
-
-/**
- * Multi-select input with chip tags and searchable dropdown.
- * Works like a Kendo MultiSelect: selected items appear as removable chips
- * inside the input area, and a filtered dropdown lets the user pick more.
- *
- * @example
- * ```tsx
- * const options = [
- *   { value: "1", label: "Alpha" },
- *   { value: "2", label: "Bravo" },
- *   { value: "3", label: "Charlie" },
- * ];
- * const [selected, setSelected] = useState<string[]>([]);
- *
- * <CwTagSelector
- *   labelProps={{ text: "Tags" }}
- *   options={options}
- *   value={selected}
- *   onChange={setSelected}
- *   placeholder="Select items…"
- * />
- * ```
- */
-function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, alignProps, placeholder = "Select…", disabled = false, showSelectAll = false, feedback, className, style, }) {
-    const [search, setSearch] = useState("");
-    const [open, setOpen] = useState(false);
-    const [focusedIndex, setFocusedIndex] = useState(-1);
-    const containerRef = useRef(null);
-    const inputBoxRef = useRef(null);
-    const inputRef = useRef(null);
-    const listRef = useRef(null);
-    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
-        anchorRef: inputBoxRef,
-        isOpen: open,
-        onClose: () => { setOpen(false); setFocusedIndex(-1); },
-    });
-    const selectedSet = useMemo(() => new Set(value), [value]);
-    const filtered = useMemo(() => {
-        if (!search)
-            return options.filter(o => !selectedSet.has(o.value));
-        const lower = search.toLowerCase();
-        return options.filter(o => !selectedSet.has(o.value) && o.label.toLowerCase().includes(lower));
-    }, [options, selectedSet, search]);
-    const selectedOptions = useMemo(() => value.map(v => options.find(o => o.value === v)).filter(Boolean), [value, options]);
-    const handleSelect = useCallback((optionValue) => {
-        onChange([...value, optionValue]);
-        setSearch("");
-        setFocusedIndex(-1);
-        inputRef.current?.focus();
-    }, [value, onChange]);
-    const handleRemove = useCallback((optionValue) => {
-        onChange(value.filter(v => v !== optionValue));
-        inputRef.current?.focus();
-    }, [value, onChange]);
-    const allSelected = options.length > 0 && options.every(o => selectedSet.has(o.value));
-    const handleToggleAll = useCallback(() => {
-        if (allSelected) {
-            onChange([]);
-        }
-        else {
-            onChange(options.map(o => o.value));
-        }
-        setSearch("");
-        setFocusedIndex(-1);
-        inputRef.current?.focus();
-    }, [allSelected, options, onChange]);
-    const handleInputChange = useCallback((e) => {
-        setSearch(e.currentTarget.value);
-        if (!open)
-            setOpen(true);
-        setFocusedIndex(-1);
-    }, [open]);
-    const handleInputFocus = useCallback(() => {
-        if (!disabled)
-            setOpen(true);
-    }, [disabled]);
-    const handleKeyDown = useCallback((e) => {
-        if (e.key === "Backspace" && !search && value.length > 0) {
-            onChange(value.slice(0, -1));
-            return;
-        }
-        if (e.key === "Escape") {
-            setOpen(false);
-            setFocusedIndex(-1);
-            return;
-        }
-        if (e.key === "Enter") {
-            e.preventDefault();
-            if (focusedIndex >= 0 && focusedIndex < filtered.length) {
-                handleSelect(filtered[focusedIndex].value);
-            }
-            else if (search.trim().length > 0 && filtered.length > 0) {
-                const lower = search.trim().toLowerCase();
-                const match = filtered.find(o => o.label.trim().toLowerCase() === lower) ??
-                    filtered.find(o => o.label.trim().toLowerCase().startsWith(lower)) ??
-                    filtered[0];
-                if (match)
-                    handleSelect(match.value);
-            }
-            else if (!open) {
-                setOpen(true);
-                setFocusedIndex(0);
-            }
-            return;
-        }
-        if (!open) {
-            if (e.key === "ArrowDown") {
-                setOpen(true);
-                setFocusedIndex(0);
-                e.preventDefault();
-            }
-            return;
-        }
-        if (e.key === "ArrowDown") {
-            e.preventDefault();
-            setFocusedIndex(prev => (prev < filtered.length - 1 ? prev + 1 : prev));
-        }
-        else if (e.key === "ArrowUp") {
-            e.preventDefault();
-            setFocusedIndex(prev => (prev > 0 ? prev - 1 : 0));
-        }
-    }, [open, search, value, filtered, focusedIndex, onChange, handleSelect]);
-    // Scroll focused item into view
-    useEffect(() => {
-        if (focusedIndex >= 0 && listRef.current) {
-            const item = listRef.current.children[focusedIndex];
-            item?.scrollIntoView({ block: "nearest" });
-        }
-    }, [focusedIndex]);
-    // Close on outside click — now handled by useDropdownPortal
-    // Keeping containerRef for any other potential use
-    const direction = alignProps?.flexDirection ?? "row";
-    const feedbackMessages = feedback ? (Array.isArray(feedback) ? feedback : [feedback]) : [];
-    return (jsxs("div", { ref: containerRef, className: `${styles$7.container}${className ? ` ${className}` : ""}`, style: style, id: id, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: `${styles$7.inputBox}${disabled ? ` ${styles$7.disabled}` : ""}`, ref: inputBoxRef, onClick: () => { if (!disabled)
-                            inputRef.current?.focus(); }, children: [selectedOptions.map(opt => (jsx(CwChip, { label: opt.label, colorScheme: opt.color ? "custom" : "info", customColor: opt.color, closable: !disabled, onClose: () => handleRemove(opt.value) }, opt.value))), jsx("input", { ref: inputRef, type: "text", value: search, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: selectedOptions.length === 0 ? placeholder : "", disabled: disabled, autoComplete: "off" }), value.length > 0 && !disabled && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: (e) => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChange([]); setSearch(""); setOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] })] }), feedbackMessages.map((fb, i) => (jsx("p", { className: "cw-input-info", "data-color": fb.type, children: fb.message }, i))), renderPanel((showSelectAll || filtered.length > 0) ? (jsxs("div", { ref: panelRef, className: styles$7.dropdown, style: panelStyle, children: [showSelectAll && !search && (jsxs("div", { className: styles$7.selectAll, onMouseDown: (e) => e.preventDefault(), onClick: handleToggleAll, children: [jsx("input", { type: "checkbox", checked: allSelected, readOnly: true, tabIndex: -1 }), allSelected ? "Deselect all" : "Select all"] })), jsx("ul", { ref: listRef, children: filtered.map((opt, idx) => (jsxs("li", { className: `${styles$7.option}${idx === focusedIndex ? ` ${styles$7.optionFocused}` : ""}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelect(opt.value), onMouseEnter: () => setFocusedIndex(idx), title: opt.tooltip, children: [opt.color && jsx("span", { className: styles$7.optionDot, style: { backgroundColor: opt.color } }), opt.label] }, opt.value))) })] })) : null)] }));
-}
-
-var styles$6 = {"tree-container":"cw-tree-view-module__tree-container__NN-HJ","tree-wrapper":"cw-tree-view-module__tree-wrapper__keBZI","tree-item":"cw-tree-view-module__tree-item__prE9N","tree-node":"cw-tree-view-module__tree-node__wfro9","selected":"cw-tree-view-module__selected__XJQ0w","non-selectable":"cw-tree-view-module__non-selectable__YuPSx","tree-children":"cw-tree-view-module__tree-children__ji8CZ","empty-state":"cw-tree-view-module__empty-state__yvRjo","tree-label":"cw-tree-view-module__tree-label__ss3Nf","tree-spacer":"cw-tree-view-module__tree-spacer__E9Ud2"};
+var styles$6 = {"tree-container":"cw-tree-view-module_tree-container__NN-HJ","tree-wrapper":"cw-tree-view-module_tree-wrapper__keBZI","tree-item":"cw-tree-view-module_tree-item__prE9N","tree-node":"cw-tree-view-module_tree-node__wfro9","selected":"cw-tree-view-module_selected__XJQ0w","non-selectable":"cw-tree-view-module_non-selectable__YuPSx","tree-children":"cw-tree-view-module_tree-children__ji8CZ","empty-state":"cw-tree-view-module_empty-state__yvRjo","tree-label":"cw-tree-view-module_tree-label__ss3Nf","tree-spacer":"cw-tree-view-module_tree-spacer__E9Ud2"};
 
 function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId: initialSelectedId = null }) {
     const [expanded, setExpanded] = useState(new Set());
@@ -5127,30 +3792,12 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
     return (jsxs("div", { className: `cw-tree-view ${styles$6["tree-container"]}`, children: [jsxs("header", { children: [jsx("input", { type: "text", placeholder: "Search in tree...", value: search, onChange: (e) => setSearch(e.target.value) }), search && (jsx(CwButton, { onClick: () => setSearch(""), type: "button", icon: "close", variant: "icon", color: "neutral" }))] }), jsx("div", { className: styles$6["tree-wrapper"], children: filteredData.length > 0 ? (filteredData.map((node) => renderNode(node))) : (jsxs("div", { className: styles$6["empty-state"], children: [jsx(CwIcon, { iconId: "comment" }), search ? "No results found" : "There are no items"] })) })] }));
 }
 
-/**
- * Text input with a live-filtered suggestion dropdown backed by a local `CwSelectList` array.
- * Use `CwFindAirport` or `CwFindCrewmember` for API-backed search inputs.
- *
- * @example
- * <CwSearchInput
- *   selectList={myItems}
- *   handleChange={(id) => console.log('selected', id)}
- *   labelProps={{ text: 'Employee' }}
- *   placeholder="Search by name…"
- * />
- */
 function CwSearchInput(optionsProps) {
     const [searchText, setSearchText] = useState("");
     const [filteredOptions, setFilteredOptions] = useState([]);
     const [_selectedOption, setSelectedOption] = useState(null);
     const [showDropdown, setShowDropdown] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
-    const wrapperRef = useRef(null);
-    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
-        anchorRef: wrapperRef,
-        isOpen: showDropdown && filteredOptions.length > 0,
-        onClose: () => setShowDropdown(false),
-    });
     // Extract props
     const { labelProps, iconProps, alignProps, selectList, handleChange, placeholder = "Search…", disabled, renderOption, style, id, className, defaultValue, ...otherProps } = optionsProps;
     // Get direction for data attribute
@@ -5201,8 +3848,9 @@ function CwSearchInput(optionsProps) {
         }
     };
     const handleInputBlur = () => {
-        // Dropdown is closed by useDropdownPortal's outside-click handler.
-        // Blur alone must not close it — clicking an option would lose focus before the click fires.
+        setTimeout(() => {
+            setShowDropdown(false);
+        }, 150);
     };
     const handleOptionSelect = (option) => {
         setSearchText(option.description);
@@ -5220,10 +3868,10 @@ function CwSearchInput(optionsProps) {
             handleChange("");
         }
     };
-    return (jsxs("div", { className: `cw-search-input ${className || ""}`, style: style, id: id, ...otherProps, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsx("input", { type: "text", value: searchText, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: placeholder, className: "cw-input-search", disabled: disabled }), isLoading && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: searchText && !disabled && !isLoading ? (jsx(CwButton, { type: "button", onClick: handleClearClick, "aria-label": "Clear search", variant: "icon", icon: "close", color: "neutral" })) : (iconProps ? jsx(CwIcon, { ...iconProps }) : jsx(CwIcon, { iconId: "search" })) })] })] }), renderPanel(jsx("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, children: jsx("ul", { children: filteredOptions.map((option) => (jsx("li", { className: dropdownStyles.option, onClick: () => handleOptionSelect(option), onMouseDown: (e) => e.preventDefault(), children: renderOption ? renderOption(option) : option.description }, option.id))) }) }))] }));
+    return (jsxs("div", { className: `cw-search-input ${className || ""}`, style: style, id: id, ...otherProps, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", children: [jsx("input", { type: "text", value: searchText, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: placeholder, className: "cw-input-search", disabled: disabled }), isLoading && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: searchText && !disabled && !isLoading ? (jsx(CwButton, { type: "button", onClick: handleClearClick, "aria-label": "Clear search", variant: "icon", icon: "close", color: "neutral" })) : (iconProps ? jsx(CwIcon, { ...iconProps }) : jsx(CwIcon, { iconId: "search" })) })] })] }), showDropdown && filteredOptions.length > 0 && (jsx("div", { className: "cw-input-search-dropdown", children: jsx("ul", { children: filteredOptions.map((option) => (jsx("li", { onClick: () => handleOptionSelect(option), onMouseDown: (e) => e.preventDefault(), children: renderOption ? renderOption(option) : option.description }, option.id))) }) }))] }));
 }
 
-var styles$5 = {"menu":"cw-context-menu-module__menu__tXmun","item":"cw-context-menu-module__item__-ko8L","arrow":"cw-context-menu-module__arrow__LHZmQ"};
+var styles$5 = {"menu":"cw-context-menu-module_menu__tXmun","item":"cw-context-menu-module_item__-ko8L","arrow":"cw-context-menu-module_arrow__LHZmQ"};
 
 const ARROW_SIZE = 8;
 const SAFETY_MARGIN = 8;
@@ -5472,73 +4120,14 @@ function CwBtnDelete({ cw_btnOnclick, cw_btn_disabled, onClick, disabled, ...res
     return (jsx(CwButton, { ...rest, variant: "icon", icon: "delete", color: "danger", onClick: onClick ?? cw_btnOnclick, disabled: disabled ?? cw_btn_disabled }));
 }
 
-var styles$4 = {"pickerWrapper":"cw-pickers-base-module__pickerWrapper__Fb9Zo","pickerIcons":"cw-pickers-base-module__pickerIcons__dyd2-","pickerPopup":"cw-pickers-base-module__pickerPopup__dkxJo"};
-
-/**
- * Renders a picker popup in a portal so it escapes overflow containers.
- * Positions itself relative to the anchor element.
- *
- * Thin wrapper around {@link useDropdownPortal} that adds directional
- * preference logic ("left-bottom", "right-top", etc.) for calendar popups.
- * The public API is unchanged — existing callers (`CwDatePicker`, etc.) need
- * no modifications.
- */
-function usePickerPopup({ anchorRef, isOpen, onClose, position = "left-bottom" }) {
-    const pickerStrategy = useCallback((anchorRect, panelRect) => {
-        const popupH = panelRect?.height ?? 300;
-        const popupW = panelRect?.width ?? 300;
-        const preferTop = position.includes("top");
-        const spaceBelow = window.innerHeight - anchorRect.bottom;
-        const spaceAbove = anchorRect.top;
-        let top;
-        if (preferTop && spaceAbove >= popupH) {
-            top = anchorRect.top - popupH;
-        }
-        else if (!preferTop && spaceBelow >= popupH + 4) {
-            top = anchorRect.bottom + 4;
-        }
-        else {
-            top = spaceBelow >= popupH + 4 ? anchorRect.bottom + 4 : anchorRect.top - popupH;
-        }
-        let left;
-        if (position.includes("right")) {
-            left = anchorRect.right - popupW;
-        }
-        else {
-            left = anchorRect.left;
-        }
-        left = Math.max(4, Math.min(left, window.innerWidth - popupW - 4));
-        top = Math.max(4, top);
-        // No width override — the calendar has its own intrinsic size
-        return { top, left };
-    }, [position]);
-    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
-        anchorRef,
-        isOpen,
-        onClose,
-        positionStrategy: pickerStrategy,
-    });
-    // Expose original API names so CwDatePicker needs zero changes
-    return { popupRef: panelRef, popupStyle: panelStyle, renderPopup: renderPanel };
-}
+var styles$4 = {"pickerWrapper":"cw-pickers-base-module_pickerWrapper__Fb9Zo","pickerIcons":"cw-pickers-base-module_pickerIcons__dyd2-","pickerPopup":"cw-pickers-base-module_pickerPopup__dkxJo"};
 
-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, }) {
     const [isOpen, setIsOpen] = useState(false);
     const [inputValue, setInputValue] = useState("");
     const containerRef = useRef(null);
-    const feedbackMessages = feedback
-        ? Array.isArray(feedback) ? feedback : [feedback]
-        : [];
-    const wrapperRef = useRef(null);
     const inputRef = useRef(null);
     const prevValueRef = useRef(undefined);
-    const handleClose = useCallback(() => setIsOpen(false), []);
-    const { popupRef, popupStyle, renderPopup } = usePickerPopup({
-        anchorRef: wrapperRef,
-        isOpen,
-        onClose: handleClose,
-        position: popupPosition,
-    });
     // Parse date from string based on format
     const parseDate = useCallback((dateString, formatStr) => {
         try {
@@ -5621,6 +4210,20 @@ function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabl
             }
         }
     }, [value, displayFormat]);
+    // Close calendar when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
     const handleDaySelect = useCallback((date) => {
         onChange(date);
         setIsOpen(false);
@@ -5696,14 +4299,14 @@ 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: {
-                                            today: new Date(),
-                                        }, modifiersClassNames: {
-                                            today: "rdp-day-today",
-                                        } }), showTodayButton && (jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: todayLabel }) }))] }))] })] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+    return (jsx("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { 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" })) }), isOpen && (jsxs("div", { className: styles$4.pickerPopup, "data-position": popupPosition, children: [jsx(DayPicker, { mode: "single", selected: value || undefined, defaultMonth: defaultMonth || value || undefined, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, modifiers: {
+                                        today: new Date(),
+                                    }, modifiersClassNames: {
+                                        today: "rdp-day-today",
+                                    } }), showTodayButton && (jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: "Today" }) }))] }))] })] }) }));
 }
 
-var rangeStyles = {"rangeWrapper":"cw-range-picker-module__rangeWrapper__1nIVs","rangePopup":"cw-range-picker-module__rangePopup__E5jd1","presetList":"cw-range-picker-module__presetList__INiLo"};
+var rangeStyles = {"rangeWrapper":"cw-range-picker-module_rangeWrapper__1nIVs","rangePopup":"cw-range-picker-module_rangePopup__E5jd1","presetList":"cw-range-picker-module_presetList__INiLo"};
 
 const PRESET_LIBRARY = {
     // === PAST DAYS ===
@@ -5980,20 +4583,9 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
     const [inputToValue, setInputToValue] = useState("");
     const [focusedInput, setFocusedInput] = useState();
     const containerRef = useRef(null);
-    const wrapperRef = useRef(null);
     const inputFromRef = useRef(null);
     const inputToRef = useRef(null);
     const prevValueRef = useRef(undefined);
-    const handleClose = useCallback(() => {
-        setIsOpen(false);
-        setFocusedInput(undefined);
-    }, []);
-    const { popupRef, popupStyle, renderPopup } = usePickerPopup({
-        anchorRef: wrapperRef,
-        isOpen,
-        onClose: handleClose,
-        position: popupPosition,
-    });
     // Calculate presets to render
     const presetsToRender = useMemo(() => {
         let presets = [];
@@ -6102,8 +4694,23 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
             }
         }
     }, [value, displayFormat]);
-    const handleRangeSelect = useCallback((range, // El rango sugerido por react-day-picker
-    selectedDay) => {
+    // Close calendar when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setFocusedInput(undefined);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleRangeSelect = useCallback((range, // El rango sugerido por react-day-picker
+    selectedDay) => {
         let newRange;
         if (focusedInput === 'from') {
             newRange = { from: selectedDay, to: value?.to };
@@ -6322,14 +4929,14 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
         }
         return undefined;
     }, [value]);
-    return (jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxs("div", { className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputFromRef, type: "text", value: inputFromValue, placeholder: placeholderFrom, onChange: handleInputFromChange, onBlur: () => handleInputBlur('from'), onClick: handleInputFromClick, onKeyDown: (e) => handleInputKeyDown(e, 'from'), disabled: disabled, required: required, "data-focused": focusedInput === 'from' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxs("div", { className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputToRef, type: "text", value: inputToValue, placeholder: placeholderTo, onChange: handleInputToChange, onBlur: () => handleInputBlur('to'), onClick: handleInputToClick, onKeyDown: (e) => handleInputKeyDown(e, 'to'), disabled: disabled, required: required, "data-focused": focusedInput === 'to' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), renderPopup(jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, style: popupStyle, children: [showPresets && presetsToRender.length > 0 && (jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsx(DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, numberOfMonths: numberOfMonths, defaultMonth: defaultMonth || value?.from || undefined, modifiers: {
+    return (jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: rangeStyles.rangeWrapper, children: [jsxs("div", { className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputFromRef, type: "text", value: inputFromValue, placeholder: placeholderFrom, onChange: handleInputFromChange, onBlur: () => handleInputBlur('from'), onClick: handleInputFromClick, onKeyDown: (e) => handleInputKeyDown(e, 'from'), disabled: disabled, required: required, "data-focused": focusedInput === 'from' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxs("div", { className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputToRef, type: "text", value: inputToValue, placeholder: placeholderTo, onChange: handleInputToChange, onBlur: () => handleInputBlur('to'), onClick: handleInputToClick, onKeyDown: (e) => handleInputKeyDown(e, 'to'), disabled: disabled, required: required, "data-focused": focusedInput === 'to' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), isOpen && (jsxs("div", { className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, "data-position": popupPosition, children: [showPresets && presetsToRender.length > 0 && (jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsx(DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, numberOfMonths: numberOfMonths, defaultMonth: defaultMonth || value?.from || undefined, modifiers: {
                                         today: new Date(),
                                     }, modifiersClassNames: {
                                         today: "rdp-day-today",
                                     } })] }))] })] }) }));
 }
 
-var timeStyles = {"timePickerPopup":"cw-time-picker-module__timePickerPopup__BN63t","timePickerList":"cw-time-picker-module__timePickerList__E88pr","selected":"cw-time-picker-module__selected__qVnfL","hasIcons":"cw-time-picker-module__hasIcons__ZiGUf","notIcons":"cw-time-picker-module__notIcons__3icu1"};
+var timeStyles = {"timePickerPopup":"cw-time-picker-module_timePickerPopup__BN63t","timePickerList":"cw-time-picker-module_timePickerList__E88pr","selected":"cw-time-picker-module_selected__qVnfL","hasIcons":"cw-time-picker-module_hasIcons__ZiGUf","notIcons":"cw-time-picker-module_notIcons__3icu1"};
 
 const isMobileDevice = () => {
     return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
@@ -6338,16 +4945,8 @@ function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelP
     const [isOpen, setIsOpen] = useState(false);
     const [inputValue, setInputValue] = useState("");
     const containerRef = useRef(null);
-    const wrapperRef = useRef(null);
     const inputRef = useRef(null);
     const selectedItemRef = useRef(null);
-    const handleClose = useCallback(() => setIsOpen(false), []);
-    const { popupRef, popupStyle, renderPopup } = usePickerPopup({
-        anchorRef: wrapperRef,
-        isOpen,
-        onClose: handleClose,
-        position: popupPosition,
-    });
     // Sync input value with prop value
     useEffect(() => {
         if (value) {
@@ -6375,6 +4974,20 @@ function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelP
         return options;
     };
     const timeOptions = generateTimeOptions();
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
     // Scroll to selected time when opening dropdown
     useEffect(() => {
         if (isOpen && selectedItemRef.current) {
@@ -6485,70 +5098,13 @@ function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelP
         return (jsx("div", { className: `cw-timepicker cw-timepicker-native ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsx("div", { className: styles$4.pickerWrapper, children: jsx("input", { type: "time", value: displayValue, onChange: handleNativeChange, min: minTime, max: maxTime, step: interval * 60, disabled: disabled, required: required, placeholder: placeholder, className: "cw-timepicker-native" }) })] }) }));
     }
     // Custom time picker
-    return (jsx("div", { ref: containerRef, className: `cw-timepicker ${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: 5, className: showClear ? timeStyles.hasIcons : timeStyles.notIcons }), showClear && (jsx("div", { className: styles$4.pickerIcons, children: value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", icon: "close", color: "neutral", onClick: handleClear, tabIndex: -1, "aria-label": "Clear time" })) : (jsx(CwIcon, { iconId: "clock" })) })), renderPopup(jsx("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${timeStyles.timePickerPopup}`, style: popupStyle, children: jsx("div", { className: timeStyles.timePickerList, children: timeOptions.map((time) => {
+    return (jsx("div", { ref: containerRef, className: `cw-timepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { 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: 5, className: showClear ? timeStyles.hasIcons : timeStyles.notIcons }), showClear && (jsx("div", { className: styles$4.pickerIcons, children: value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", icon: "close", color: "neutral", onClick: handleClear, tabIndex: -1, "aria-label": "Clear time" })) : (jsx(CwIcon, { iconId: "clock" })) })), isOpen && (jsx("div", { className: `${styles$4.pickerPopup} ${timeStyles.timePickerPopup}`, "data-position": popupPosition, children: jsx("div", { className: timeStyles.timePickerList, children: timeOptions.map((time) => {
                                     const isSelected = time === value;
                                     return (jsx("button", { ref: isSelected ? selectedItemRef : null, type: "button", className: isSelected ? timeStyles.selected : "", onClick: () => handleTimeSelect(time), children: time }, time));
                                 }) }) }))] })] }) }));
 }
 
-/**
- * Converts a numeric offset in hours (e.g. 0, 1, -5, 5.5) to a
- * Temporal-compatible offset string like "+00:00", "+01:00", "-05:00", "+05:30".
- */
-function offsetHoursToString(offset) {
-    const sign = offset >= 0 ? "+" : "-";
-    const abs = Math.abs(offset);
-    const hours = Math.floor(abs);
-    const minutes = Math.round((abs - hours) * 60);
-    return `${sign}${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
-}
-/**
- * Converts a Date to a new Date whose local year/month/day
- * reflect the date in the given UTC offset.
- *
- * This is necessary because date-fns format() and DayPicker
- * always use the browser's local timezone. By "shifting" the date,
- * we ensure the correct date displays regardless of browser timezone.
- *
- * @param date - The original Date object
- * @param timezoneOffset - Numeric offset in hours (e.g., 0 for UTC, 1 for CET, -5 for EST, 5.5 for IST)
- * @returns A new Date with local fields matching the target timezone's date
- */
-function getDateInOffset(date, timezoneOffset) {
-    const instant = Temporal.Instant.fromEpochMilliseconds(date.getTime());
-    const zdt = instant.toZonedDateTimeISO(offsetHoursToString(timezoneOffset));
-    return new Date(zdt.year, zdt.month - 1, zdt.day);
-}
-/**
- * Gets the time string (HH:mm) for a Date in the given UTC offset.
- *
- * @param date - The original Date object
- * @param timezoneOffset - Numeric offset in hours (e.g., 0 for UTC, 1 for CET, -5 for EST, 5.5 for IST)
- * @returns Time string in "HH:mm" format for the given offset
- */
-function getTimeInOffset(date, timezoneOffset) {
-    const instant = Temporal.Instant.fromEpochMilliseconds(date.getTime());
-    const zdt = instant.toZonedDateTimeISO(offsetHoursToString(timezoneOffset));
-    return `${String(zdt.hour).padStart(2, "0")}:${String(zdt.minute).padStart(2, "0")}`;
-}
-/**
- * Combines a display date (local fields) and time components into a real Date
- * by interpreting them in the given UTC offset.
- *
- * @param date - Date whose local year/month/day are the "display" values
- * @param hours - Hour component (0-23)
- * @param minutes - Minute component (0-59)
- * @param timezoneOffset - Numeric offset in hours
- * @returns A Date representing the UTC instant of that date+time in the given offset
- */
-function combineDateTimeInOffset(date, hours, minutes, timezoneOffset) {
-    const offsetStr = offsetHoursToString(timezoneOffset);
-    const pdt = new Temporal.PlainDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), hours, minutes);
-    const zdt = pdt.toZonedDateTime(offsetStr);
-    return new Date(zdt.epochMilliseconds);
-}
-
-function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval = 15, minTime, maxTime, labelProps, alignProps, datePlaceholder = "dd.MM.yyyy", timePlaceholder = "HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showNowButton = false, nowLabel = "Now", locale = enGB, timezoneOffset, }) {
+function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval = 15, minTime, maxTime, labelProps, alignProps, datePlaceholder = "dd.MM.yyyy", timePlaceholder = "HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showNowButton = false, }) {
     // ========================================
     // PROPS NORMALIZATION
     // ========================================
@@ -6580,32 +5136,10 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
     const normalizedMinDateTime = useMemo(() => normalizeDateTime(minDateTime, 'minDateTime'), [minDateTime, normalizeDateTime]);
     const normalizedMaxDateTime = useMemo(() => normalizeDateTime(maxDateTime, 'maxDateTime'), [maxDateTime, normalizeDateTime]);
     // ========================================
-    // HELPERS CON MOMENT
-    // ========================================
-    /**
-     * Convert a Date to a "display date" whose local year/month/day
-     * reflect the date in the target timezone offset.
-     * When timezoneOffset is undefined, returns the date as-is.
-     */
-    const toDisplayDate = useCallback((date) => {
-        return timezoneOffset !== undefined
-            ? getDateInOffset(date, timezoneOffset)
-            : date;
-    }, [timezoneOffset]);
-    /**
-     * Get the time string (HH:mm) for a Date, adjusted for timezone offset.
-     * When timezoneOffset is undefined, uses local time.
-     */
-    const toDisplayTime = useCallback((date) => {
-        return timezoneOffset !== undefined
-            ? getTimeInOffset(date, timezoneOffset)
-            : `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
-    }, [timezoneOffset]);
-    // ========================================
     // INTERNAL STATE
     // ========================================
-    const [selectedDate, setSelectedDate] = useState(value ? toDisplayDate(value) : undefined);
-    const [selectedTime, setSelectedTime] = useState(value ? toDisplayTime(value) : undefined);
+    const [selectedDate, setSelectedDate] = useState(value);
+    const [selectedTime, setSelectedTime] = useState(value ? `${value.getHours().toString().padStart(2, "0")}:${value.getMinutes().toString().padStart(2, "0")}` : undefined);
     // Track previous value to detect external changes
     const prevValueRef = useRef(undefined);
     // ========================================
@@ -6620,22 +5154,28 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
     const combineDateTime = useCallback((date, time) => {
         if (!date)
             return undefined;
-        const [hours, minutes] = (time ?? "00:00").split(':').map(Number);
-        let combined;
-        if (timezoneOffset !== undefined) {
-            // Interpret the display date+time as belonging to the specified offset
-            combined = combineDateTimeInOffset(date, hours, minutes, timezoneOffset);
-        }
-        else {
-            combined = new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours, minutes, 0, 0);
+        // If no time is selected, use 00:00
+        if (!time) {
+            const combined = new Date(date);
+            combined.setHours(0, 0, 0, 0);
+            // Validate against min/max datetime
+            if (normalizedMinDateTime && combined < normalizedMinDateTime)
+                return undefined;
+            if (normalizedMaxDateTime && combined > normalizedMaxDateTime)
+                return undefined;
+            return combined;
         }
+        // Parse time and combine with date
+        const [hours, minutes] = time.split(':').map(Number);
+        const combined = new Date(date);
+        combined.setHours(hours, minutes, 0, 0);
         // Validate against min/max datetime
         if (normalizedMinDateTime && combined < normalizedMinDateTime)
             return undefined;
         if (normalizedMaxDateTime && combined > normalizedMaxDateTime)
             return undefined;
         return combined;
-    }, [normalizedMinDateTime, normalizedMaxDateTime, timezoneOffset]);
+    }, [normalizedMinDateTime, normalizedMaxDateTime]);
     /**
      * Calculate dynamic time restrictions based on selected date
      *
@@ -6649,39 +5189,33 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
     const calculateTimeRestrictions = useCallback((selectedDate) => {
         if (!selectedDate)
             return { minTime, maxTime };
-        const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() &&
-            a.getMonth() === b.getMonth() &&
-            a.getDate() === b.getDate();
-        const formatLocalTime = (d) => `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+        // Normalize selected date to date-only (ignore time component)
+        const selectedDateOnly = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate());
         let calculatedMinTime = minTime;
         let calculatedMaxTime = maxTime;
         // If selected date matches minDateTime date, restrict minimum time
         if (normalizedMinDateTime) {
-            const minDisplay = timezoneOffset !== undefined
-                ? getDateInOffset(normalizedMinDateTime, timezoneOffset)
-                : normalizedMinDateTime;
-            if (isSameDay(selectedDate, minDisplay)) {
-                calculatedMinTime = timezoneOffset !== undefined
-                    ? getTimeInOffset(normalizedMinDateTime, timezoneOffset)
-                    : formatLocalTime(normalizedMinDateTime);
+            const minDateOnly = new Date(normalizedMinDateTime.getFullYear(), normalizedMinDateTime.getMonth(), normalizedMinDateTime.getDate());
+            if (selectedDateOnly.getTime() === minDateOnly.getTime()) {
+                const hours = normalizedMinDateTime.getHours().toString().padStart(2, "0");
+                const minutes = normalizedMinDateTime.getMinutes().toString().padStart(2, "0");
+                calculatedMinTime = `${hours}:${minutes}`;
             }
         }
         // If selected date matches maxDateTime date, restrict maximum time
         if (normalizedMaxDateTime) {
-            const maxDisplay = timezoneOffset !== undefined
-                ? getDateInOffset(normalizedMaxDateTime, timezoneOffset)
-                : normalizedMaxDateTime;
-            if (isSameDay(selectedDate, maxDisplay)) {
-                calculatedMaxTime = timezoneOffset !== undefined
-                    ? getTimeInOffset(normalizedMaxDateTime, timezoneOffset)
-                    : formatLocalTime(normalizedMaxDateTime);
+            const maxDateOnly = new Date(normalizedMaxDateTime.getFullYear(), normalizedMaxDateTime.getMonth(), normalizedMaxDateTime.getDate());
+            if (selectedDateOnly.getTime() === maxDateOnly.getTime()) {
+                const hours = normalizedMaxDateTime.getHours().toString().padStart(2, "0");
+                const minutes = normalizedMaxDateTime.getMinutes().toString().padStart(2, "0");
+                calculatedMaxTime = `${hours}:${minutes}`;
             }
         }
         return {
             minTime: calculatedMinTime,
             maxTime: calculatedMaxTime
         };
-    }, [normalizedMinDateTime, normalizedMaxDateTime, minTime, maxTime, timezoneOffset]);
+    }, [normalizedMinDateTime, normalizedMaxDateTime, minTime, maxTime]);
     // Calculate current time restrictions based on selected date
     // Recalculates whenever selectedDate or the calculation function changes
     const timeRestrictions = useMemo(() => calculateTimeRestrictions(selectedDate), [selectedDate, calculateTimeRestrictions]);
@@ -6701,15 +5235,15 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
         if (currentTime !== prevTime) {
             prevValueRef.current = value;
             if (value) {
-                setSelectedDate(toDisplayDate(value));
-                setSelectedTime(toDisplayTime(value));
+                setSelectedDate(value);
+                setSelectedTime(`${value.getHours().toString().padStart(2, "0")}:${value.getMinutes().toString().padStart(2, "0")}`);
             }
             else {
                 setSelectedDate(undefined);
                 setSelectedTime(undefined);
             }
         }
-    }, [value, toDisplayDate, toDisplayTime]);
+    }, [value]);
     // ========================================
     // EVENT HANDLERS
     // ========================================
@@ -6778,38 +5312,26 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
             onChange(now);
         }
     }, [normalizedMinDateTime, normalizedMaxDateTime, onChange]);
+    // Extract min/max date from normalized datetime for DatePicker
+    const minDate = normalizedMinDateTime;
+    const maxDate = normalizedMaxDateTime;
     // ========================================
     // RENDER
     // ========================================
-    // Shift min/max dates for CwDatePicker display (it uses local timezone internally)
-    const displayMinDate = useMemo(() => normalizedMinDateTime && timezoneOffset !== undefined
-        ? getDateInOffset(normalizedMinDateTime, timezoneOffset)
-        : normalizedMinDateTime, [normalizedMinDateTime, timezoneOffset]);
-    const displayMaxDate = useMemo(() => normalizedMaxDateTime && timezoneOffset !== undefined
-        ? getDateInOffset(normalizedMaxDateTime, timezoneOffset)
-        : normalizedMaxDateTime, [normalizedMaxDateTime, timezoneOffset]);
-    return jsx("div", { className: `cw-datetimepicker cw-datetimepicker-separate ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [jsx(CwDatePicker, { value: selectedDate, onChange: handleDateChange, minDate: displayMinDate, maxDate: displayMaxDate, disabledDates: disabledDates, disabledMatcher: disabledMatcher, placeholder: datePlaceholder, disabled: disabled, required: required, showClear: showClear, numberOfMonths: numberOfMonths, popupPosition: popupPosition, locale: locale }), jsx(CwTimePicker, { value: selectedTime, onChange: handleTimeChange, interval: timeInterval, minTime: timeRestrictions.minTime, maxTime: timeRestrictions.maxTime, placeholder: timePlaceholder, disabled: disabled, required: required, showClear: showClear, popupPosition: popupPosition }), showNowButton && (jsx(CwButton, { type: "button", variant: "outline", onClick: handleNowClick, disabled: disabled, text: nowLabel }))] })] }) });
+    return (jsx("div", { className: `cw-datetimepicker cw-datetimepicker-separate ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [jsx(CwDatePicker, { value: selectedDate, onChange: handleDateChange, minDate: minDate, maxDate: maxDate, disabledDates: disabledDates, disabledMatcher: disabledMatcher, placeholder: datePlaceholder, disabled: disabled, required: required, showClear: showClear, numberOfMonths: numberOfMonths, popupPosition: popupPosition }), jsx(CwTimePicker, { value: selectedTime, onChange: handleTimeChange, interval: timeInterval, minTime: timeRestrictions.minTime, maxTime: timeRestrictions.maxTime, placeholder: timePlaceholder, disabled: disabled, required: required, showClear: showClear, popupPosition: popupPosition }), showNowButton && (jsx(CwButton, { type: "button", variant: "outline", onClick: handleNowClick, disabled: disabled, title: "Set to current date and time", text: "Now" }))] })] }) }));
 }
 
-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"};
+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, }) {
     const [isOpen, setIsOpen] = useState(false);
     const [inputValue, setInputValue] = useState("");
     const [selectedDate, setSelectedDate] = useState(value);
     const [selectedTime, setSelectedTime] = useState("");
     const containerRef = useRef(null);
-    const wrapperRef = useRef(null);
     const inputRef = useRef(null);
     const timeListRef = useRef(null);
     const prevValueRef = useRef(value);
-    const handleClose = useCallback(() => setIsOpen(false), []);
-    const { popupRef, popupStyle, renderPopup } = usePickerPopup({
-        anchorRef: wrapperRef,
-        isOpen,
-        onClose: handleClose,
-        position: popupPosition,
-    });
     // Generate time options based on interval - memoized
     const timeOptions = useMemo(() => {
         const options = [];
@@ -6902,6 +5424,20 @@ function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, di
             }
         }
     }, [value]);
+    // Close popup when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
     // Scroll to selected time when opening
     useEffect(() => {
         if (isOpen && selectedTime && timeListRef.current) {
@@ -7024,11 +5560,11 @@ 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", { 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, style: { width: "24ch" } }), 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" })) }), isOpen && (jsxs("div", { className: `${styles$4.pickerPopup} ${compactStyles.compactPopup}`, "data-position": popupPosition, children: [jsxs("div", { className: compactStyles.calendarWrapper, children: [jsx(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, defaultMonth: selectedDate, disabled: disabledDays, numberOfMonths: numberOfMonths, modifiers: {
                                                 today: new Date(),
                                             }, modifiersClassNames: {
                                                 today: "rdp-day-today",
-                                            } }), showTodayButton && (jsx("footer", { className: "cw-flex-row cw-align-center-center", children: jsx(CwButton, { type: "button", variant: "outline", icon: "check-big", onClick: handleNowClick, text: nowLabel }) }))] }), jsxs("div", { className: compactStyles.timeWrapper, children: [jsxs("header", { children: [jsx(CwIcon, { iconId: "clock", size: "medium" }), jsx("span", { children: timeLabel })] }), jsx("div", { ref: timeListRef, className: `${timeStyles.timePickerList} ${compactStyles.compactTimeList}`, children: timeOptions.map((time) => {
+                                            } }), showTodayButton && (jsx("footer", { className: "cw-flex-row cw-align-center-center", children: jsx(CwButton, { type: "button", variant: "outline", icon: "check-big", onClick: handleNowClick, text: "Now" }) }))] }), jsxs("div", { className: compactStyles.timeWrapper, children: [jsxs("header", { children: [jsx(CwIcon, { iconId: "clock", size: "medium" }), jsx("span", { children: "Time" })] }), jsx("div", { ref: timeListRef, className: `${timeStyles.timePickerList} ${compactStyles.compactTimeList}`, children: timeOptions.map((time) => {
                                                 const isSelected = time === selectedTime;
                                                 return (jsx("button", { type: "button", className: isSelected ? timeStyles.selected : "", onClick: () => handleTimeSelect(time), children: time }, time));
                                             }) })] })] }))] })] }) }));
@@ -7350,7 +5886,7 @@ crewAssignmentSchedulerContextMenu, }) => {
 };
 
 const TimeLine$1 = ({ id, toolTipTitle, marginLeft, color = "rgba(255,0,0,.6)", pixels = 2, height = "100%", zIndex = 1, }) => {
-    return (jsx(CwGenericTooltip, { content: toolTipTitle, position: "top", children: jsx("div", { id: id, style: {
+    return (jsx(Tooltip, { title: toolTipTitle, children: jsx("div", { id: id, style: {
                 borderLeft: `${pixels}px solid ${color}`,
                 marginLeft: marginLeft,
                 width: "0px",
@@ -7365,10 +5901,7 @@ const SchedulerContentArea = ({ now, showTimeline, timeLineLeftPx, timeSeparator
             if (reference) {
                 setContentArea(reference);
             }
-        }, children: [showTimeline && (jsx(TimeLine$1, { id: scheduler.props.id + "_timeline", marginLeft: timeLineLeftPx, zIndex: 8, toolTipTitle: Temporal.PlainTime.from({
-                    hour: now.getHours(),
-                    minute: now.getMinutes(),
-                }).toString({ smallestUnit: "minute" }) })), timeSeparatorLeftPx.map((pixels) => {
+        }, children: [showTimeline && (jsx(TimeLine$1, { id: scheduler.props.id + "_timeline", marginLeft: timeLineLeftPx, zIndex: 8, toolTipTitle: moment(now).format("HH:mm") })), timeSeparatorLeftPx.map((pixels) => {
                 return jsx(TimeLine$1, { marginLeft: pixels, color: "rgba(255,255,255,0.7)" });
             }), jsx("span", { onClick: () => {
                     if (onEmptyClick) {
@@ -7582,11 +6115,6 @@ const DaysHeader = ({ days, divisionType, maxWidth, headerType }) => {
     return jsx("tr", { className: "cwelltSchRowDate", children: headerToDraw });
 };
 
-function formatHHmm(date) {
-    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    const zdt = Temporal.Instant.fromEpochMilliseconds(date.getTime()).toZonedDateTimeISO(timeZone);
-    return `${zdt.hour.toString().padStart(2, "0")}:${zdt.minute.toString().padStart(2, "0")}`;
-}
 const getFormattedTimeForHeader = (calculatedDivType, calculatedDivision, timeHeader) => {
     let showDate = "";
     switch (calculatedDivType) {
@@ -7602,18 +6130,18 @@ const getFormattedTimeForHeader = (calculatedDivType, calculatedDivision, timeHe
                             timeHeader.getHours() === 15 ||
                             timeHeader.getHours() === 18 ||
                             timeHeader.getHours() === 21
-                            ? formatHHmm(timeHeader)
+                            ? moment(timeHeader).format("HH:mm")
                             : "";
                     break;
                 case 3:
                     showDate =
                         timeHeader.getHours() === 0 || timeHeader.getHours() === 8 || timeHeader.getHours() === 16
-                            ? formatHHmm(timeHeader)
+                            ? moment(timeHeader).format("HH:mm")
                             : "";
                     break;
                 case 2:
                     showDate =
-                        timeHeader.getHours() === 0 || timeHeader.getHours() === 12 ? formatHHmm(timeHeader) : "";
+                        timeHeader.getHours() === 0 || timeHeader.getHours() === 12 ? moment(timeHeader).format("HH:mm") : "";
                     break;
             }
             break;
@@ -7765,7 +6293,8 @@ const compareStrings = (str1, str2) => {
 const filterResources = (module, resourceName, resources, groupByFunction, endDate, startDate, scheduleName) => {
     if ((module === "CrewControl" || module === "CrewScheduling" || module === "CrewSchedulingVacations") &&
         resourceName === "Employees") {
-        resources = resources.filter(c => (c.data.Eintritt === null || (new Date(c.data.Eintritt) <= endDate)) && (c.data.Austritt === null || (new Date(c.data.Austritt) >= startDate)));
+        resources = resources.filter(c => (c.data.Eintritt === null || (c.data.Eintritt !== null && moment(c.data.Eintritt).toDate() <= endDate)) &&
+            (c.data.Austritt === null || (c.data.Austritt !== null && moment(c.data.Austritt).toDate() >= startDate)));
     }
     if (scheduleName === "crewPinnedScheduler" || (module === "CrewControl" || module === "CrewScheduling") && resourceName === "Employees") {
         const sortKey = (groupByFunction || scheduleName === "crewPinnedScheduler") ? "mainFunction" : "C3_LC";
@@ -7959,8 +6488,8 @@ class CwScheduler extends Component {
     arraysEqual = (a1, a2) => a1.length === a2.length && a1.every((o, idx) => this.objectsEqualDeep(o, a2[idx]));
     componentWillReceiveProps(_nextProps) {
         if (this.state.showConsoleLogs) {
-            console.log("Schedule - componentWillReceiveProps, start: ", new Date());
-            console.log("Schedule - componentWillReceiveProps - has changes, start: ", new Date());
+            console.log("Schedule - componentWillReceiveProps, start: ", moment(new Date()).toString());
+            console.log("Schedule - componentWillReceiveProps - has changes, start: ", moment(new Date()).toString());
         }
         const dateChange = _nextProps.startDate.toISOString() !== this.props.startDate.toISOString() ||
             _nextProps.endDate.toISOString() !== this.props.endDate.toISOString();
@@ -8001,8 +6530,8 @@ class CwScheduler extends Component {
                 pinnedResources: this.props.pinnedResources ?? [],
             });
             if (this.state.showConsoleLogs) {
-                console.log("Schedule - componentWillReceiveProps - print on schedule, end: ", new Date());
-                console.log("Schedule - componentWillReceiveProps, end: ", new Date());
+                console.log("Schedule - componentWillReceiveProps - print on schedule, end: ", moment(new Date()).toString());
+                console.log("Schedule - componentWillReceiveProps, end: ", moment(new Date()).toString());
             }
             return;
         }
@@ -8095,11 +6624,10 @@ class CwScheduler extends Component {
 }
 
 function dateFromPercentage(startDate, visibleDays, percentage) {
-    const start = Temporal.Instant.fromEpochMilliseconds(startDate.getTime());
-    const spanMs = Math.round(visibleDays) * 24 * 60 * 60 * 1000;
-    const offsetMs = Math.round(spanMs * percentage);
-    const result = start.add({ milliseconds: offsetMs });
-    return new Date(result.epochMilliseconds);
+    const endTime = moment(startDate).add(visibleDays, "day").toDate();
+    const timeSpan = endTime.getTime() - startDate.getTime();
+    const clickedDate = new Date(startDate.getTime() + (timeSpan * percentage));
+    return clickedDate;
 }
 
 function getPercentageFromMouseEvent(event) {
@@ -8234,7 +6762,7 @@ class OnClickContextMenu {
     }
 }
 
-var styles$3 = {"scheduler-header-divisions":"scheduler-header-module__scheduler-header-divisions__1JrNe","scheduler-timeline-now":"scheduler-header-module__scheduler-timeline-now__naREv","scheduler-timeline-label":"scheduler-header-module__scheduler-timeline-label__mLVAp","scheduler-header-title":"scheduler-header-module__scheduler-header-title__Jzy94","scheduler-dates":"scheduler-header-module__scheduler-dates__O7ePQ","current-day":"scheduler-header-module__current-day__FpHiv","scheduler-hours":"scheduler-header-module__scheduler-hours__ZDCVj"};
+var styles$3 = {"scheduler-header-divisions":"scheduler-header-module_scheduler-header-divisions__1JrNe","scheduler-timeline-now":"scheduler-header-module_scheduler-timeline-now__naREv","scheduler-timeline-label":"scheduler-header-module_scheduler-timeline-label__mLVAp","scheduler-header-title":"scheduler-header-module_scheduler-header-title__Jzy94","scheduler-dates":"scheduler-header-module_scheduler-dates__O7ePQ","current-day":"scheduler-header-module_current-day__FpHiv","scheduler-hours":"scheduler-header-module_scheduler-hours__ZDCVj"};
 
 const getNow$1 = (isUtc) => {
     let now = new Date();
@@ -8270,27 +6798,20 @@ const TimeLine = ({ left, top = "0px", height, color, width = "2px", zIndexNumbe
             }, className: styles$3["scheduler-timeline-label"], children: timeString })) }));
 };
 
-function isToday(startDate, endDate) {
-    if (!startDate)
-        return false;
-    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    const today = Temporal.Now.plainDateISO();
-    const start = Temporal.Instant.fromEpochMilliseconds(startDate.getTime())
-        .toZonedDateTimeISO(timeZone).toPlainDate();
-    if (endDate) {
-        const end = Temporal.Instant.fromEpochMilliseconds(endDate.getTime())
-            .toZonedDateTimeISO(timeZone).toPlainDate();
-        return Temporal.PlainDate.compare(today, start) >= 0
-            && Temporal.PlainDate.compare(today, end) <= 0;
-    }
-    return today.equals(start);
-}
-
 const SchedulerHeaderDivision = ({ topDivisions, bottomDivisions, classification, topWidth, startDate, endDate }) => {
+    const isToday = () => {
+        if (!startDate)
+            return false;
+        const today = moment();
+        if (endDate) {
+            return today.isBetween(startDate, endDate, 'day', '[]');
+        }
+        return today.isSame(startDate, 'day');
+    };
     return (jsxs("div", { style: {
             width: topWidth,
             cursor: "pointer"
-        }, children: [jsx("div", { className: `${styles$3["scheduler-dates"]} ${isToday(startDate, endDate) ? styles$3["current-day"] : ""}`, children: jsx("span", { children: topDivisions }) }), jsx("div", { style: { display: "flex", justifyContent: "space-between", flex: 1 }, children: bottomDivisions.map((element) => (jsx("div", { className: styles$3["scheduler-hours"], children: jsx("span", { children: element }) }, classification + element + topDivisions))) })] }));
+        }, children: [jsx("div", { className: `${styles$3["scheduler-dates"]} ${isToday() ? styles$3["current-day"] : ""}`, children: jsx("span", { children: topDivisions }) }), jsx("div", { style: { display: "flex", justifyContent: "space-between", flex: 1 }, children: bottomDivisions.map((element) => (jsx("div", { className: styles$3["scheduler-hours"], children: jsx("span", { children: element }) }, classification + element + topDivisions))) })] }));
 };
 
 const HeaderTitle = ({ title, dividerText, width }) => {
@@ -8314,25 +6835,14 @@ const SchedulerHeader = ({ content, divisions, visibleDays, selectedDate, width,
                         const thisTopWidth = visibleDays > 15
                             ? topWidth * day.bottom.length
                             : topWidth;
-                        const { start, end } = getStartEnd(day);
-                        return (jsx(SchedulerHeaderDivision, { topDivisions: day.top, bottomDivisions: day.bottom, classification: classification, topWidth: thisTopWidth + "%", startDate: start, endDate: end }, day.top + classification));
+                        const dateStr = day.startDate ? moment(day.startDate) : moment(day.top, "DD.MM.YYYY");
+                        const startDate = dateStr.toDate();
+                        const endDate = day.endDate ? moment(day.endDate).toDate() : undefined;
+                        return (jsx(SchedulerHeaderDivision, { topDivisions: day.top, bottomDivisions: day.bottom, classification: classification, topWidth: thisTopWidth + "%", startDate: startDate, endDate: endDate }, day.top + classification));
                     }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "50%", height: "50%", isHeader: true, isUtc: isUtc }))] })] }));
 };
-function getStartEnd(day) {
-    const startDate = day.startDate
-        ? new Date(day.startDate)
-        : (() => {
-            const [dd, mm, yyyy] = day.top.split(".");
-            return new Date(Number(yyyy), Number(mm) - 1, Number(dd));
-        })();
-    const endDate = day.endDate ? new Date(day.endDate) : undefined;
-    return {
-        start: startDate,
-        end: endDate
-    };
-}
 
-var styles$2 = {"hide-scrollbar":"new-scheduler-module__hide-scrollbar__33GG9","scheduler-event":"new-scheduler-module__scheduler-event__gphwn","scheduler-event-container":"new-scheduler-module__scheduler-event-container__-h1xm","time-marker":"new-scheduler-module__time-marker__2BejU","scheduler-event-text":"new-scheduler-module__scheduler-event-text__zjvd7"};
+var styles$2 = {"hide-scrollbar":"new-scheduler-module_hide-scrollbar__33GG9","scheduler-event":"new-scheduler-module_scheduler-event__gphwn","scheduler-event-container":"new-scheduler-module_scheduler-event-container__-h1xm","time-marker":"new-scheduler-module_time-marker__2BejU","scheduler-event-text":"new-scheduler-module_scheduler-event-text__zjvd7"};
 
 const BackgroundEvent = ({ value, heightRem }) => {
     const backColor = getHSLColor(value.color, value.alpha ?? 0.5);
@@ -8358,7 +6868,7 @@ const BackgroundEvent = ({ value, heightRem }) => {
                             fontSize: "var(--cw-font-size-smallest)",
                             padding: "0.25rem",
                             color: textColor,
-                            alignItems: value.contentAlign ?? "center"
+                            alignItems: "flex-end"
                         }, className: styles$2["scheduler-event-container"], children: [value.icons ? jsx("div", { style: {
                                     display: "flex",
                                     flexDirection: "row",
@@ -8368,147 +6878,44 @@ const BackgroundEvent = ({ value, heightRem }) => {
                                 }, children: value.icons }) : null, jsx("span", { className: styles$2["scheduler-event-text"], children: value.name })] }) }) }) }) })) : null;
 };
 
-const eventIsVisible = (startDate, endDate, selectedDate, visibleDays) => {
-    const schedulerEndDate = new Date(selectedDate.getTime() + visibleDays * 24 * 60 * 60 * 1000);
-    const isBefore = selectedDate > startDate && selectedDate > endDate;
-    const isAfter = schedulerEndDate < startDate && schedulerEndDate < endDate;
-    return !isBefore && !isAfter;
-};
-
-const hoursBetween = (date1, date2) => {
-    const oneHourInMillis = 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
-    const timeDiff = date2.getTime() - date1.getTime();
-    return timeDiff / oneHourInMillis;
-};
-const getEventSizes = (schedulerDate, totalDays, startDate, endDate) => {
-    if (!eventIsVisible(startDate, endDate, schedulerDate, totalDays)) {
-        return {
-            left: 0,
-            width: 0,
-        };
-    }
-    const totalHours = totalDays * 24;
-    // const dateString = schedulerDate.toISOString().split('T')[0];
-    //const schedulerDateAtZero = new Date(dateString)
-    let startHours = hoursBetween(schedulerDate, startDate);
-    let durationHours = hoursBetween(startDate, endDate);
-    const startOutOfScheduler = startHours < 0;
-    if (startOutOfScheduler) {
-        durationHours += startHours;
-        startHours = 0;
-    }
-    const left = (startHours / totalHours) * 100;
-    // Minimum width equivalent to 15 minutes so zero/near-zero duration events stay visible
-    const MIN_WIDTH_HOURS = 0.25;
-    const minWidth = (MIN_WIDTH_HOURS * 100) / totalHours;
-    const width = Math.max((durationHours * 100) / totalHours, minWidth);
-    return {
-        left,
-        width,
-    };
-};
+var styles$1 = {"scheduler-row-header":"scheduler-row-module_scheduler-row-header__S-iv4"};
 
-const INDICATOR_HEIGHT_REM = 0.25;
-const IndicatorRow = ({ indicators, selectedDate, visibleDays }) => {
-    return (jsx("div", { style: {
-            position: "relative",
-            height: `${INDICATOR_HEIGHT_REM}rem`,
-            pointerEvents: "none",
-        }, "data-name": "indicator-row", children: indicators.map((indicator) => {
-            const { left, width } = getEventSizes(selectedDate, visibleDays, indicator.start, indicator.end);
-            if (width <= 0)
-                return null;
-            const bar = (jsx("div", { style: {
-                    position: "absolute",
-                    left: `${left}%`,
-                    width: `${width}%`,
-                    height: `${INDICATOR_HEIGHT_REM}rem`,
-                    backgroundColor: indicator.color,
-                    borderRadius: "1px",
-                    pointerEvents: "auto",
-                } }, indicator.id));
-            if (indicator.tooltip) {
-                return (jsx(CwTooltipNew, { content: indicator.tooltip, position: "bottom", dissapearsWhenHover: true, showDelay: 200, children: bar }, indicator.id));
-            }
-            return bar;
-        }) }));
+const DefaultRowHeader = ({ value, width, onEvent }) => {
+    return (jsxs("div", { style: {
+            width: width,
+            // background: color,
+        }, onClick: (_) => {
+            onEvent(new OnClickRowHeader(value.rowId));
+        }, className: styles$1["scheduler-row-header"], children: [jsxs("div", { children: [jsx("strong", { children: value.title }), value.title2 && jsxs("span", { children: ["-", value.title2] }), " ", jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 && jsxs("span", { className: styles$1["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxs("span", { children: ["-", value.subtitle2] })] })] }));
 };
 
-// Fires onClick on the first click of a sequence (detail === 1) and
-// onDoubleClick on the native dblclick event. Subsequent clicks of a
-// double-click sequence (detail > 1) are suppressed so the same logical
-// interaction does not fire onClick twice. Selection therefore appears
-// within one paint frame instead of being delayed by an artificial timer.
 function useSingleAndDoubleClicks(onClick, onDoubleClick) {
+    const timer = useRef(null);
+    const cancelPendingClick = useCallback(() => {
+        if (timer.current) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+    }, [timer]);
     const handleClick = useCallback((e) => {
+        // We only cache the most recent click event, so cancel any pending clicks
         e.stopPropagation();
         e.preventDefault();
-        if (e.detail > 1)
-            return;
-        onClick(e);
-    }, [onClick]);
+        cancelPendingClick();
+        timer.current = setTimeout(() => {
+            timer.current = null;
+            onClick(e);
+        }, 500);
+    }, [timer, cancelPendingClick, onClick]);
     const handleDoubleClick = useCallback((e) => {
         e.stopPropagation();
         e.preventDefault();
+        cancelPendingClick();
         onDoubleClick(e);
-    }, [onDoubleClick]);
+    }, [cancelPendingClick, onDoubleClick]);
     return { handleClick, handleDoubleClick };
 }
 
-const eventsCollide = (event1, event2) => {
-    const eventInsideOther = event1.startDate <= event2.startDate && event1.endDate >= event2.endDate;
-    const eventCollideStart = event1.endDate > event2.startDate && event1.endDate < event2.endDate;
-    const eventCollideEnd = event2.endDate > event1.startDate && event2.endDate < event1.endDate;
-    return eventInsideOther || eventCollideStart || eventCollideEnd;
-};
-// Function to separate events into non-colliding rows
-const separateEventsToInnerRows = (events) => {
-    const sortedEvents = [...events].sort((a, b) => {
-        const aOrder = a.order ?? Number.MAX_SAFE_INTEGER;
-        const bOrder = b.order ?? Number.MAX_SAFE_INTEGER;
-        if (aOrder !== bOrder) {
-            return aOrder - bOrder; // Prioridad al order si ambos están definidos
-        }
-        return a.startDate.getTime() - b.startDate.getTime();
-    });
-    const rows = [];
-    for (const event of sortedEvents) {
-        let placed = false;
-        for (const row of rows) {
-            if (!row.some((existingEvent) => eventsCollide(existingEvent, event))) {
-                row.push(event);
-                placed = true;
-                break;
-            }
-        }
-        if (!placed) {
-            rows.push([event]);
-        }
-    }
-    return rows;
-};
-
-const DivisionLine = ({ left, top = "0px", height, isDayBoundary }) => {
-    const color = isDayBoundary ? "rgba(255,255,255,1)" : "rgba(255,255,255,0.8)";
-    const width = isDayBoundary ? "2px" : "1px";
-    return (jsx(TimeLine, { color: color, left: left + "%", height: height, width: width, top: top }));
-};
-
-const WeekEndLine = ({ left, top = "0px", height, widthPercentage }) => {
-    return (jsx(TimeLine, { color: "rgba(0,0,0,0.05)", left: left + "%", height: height, width: widthPercentage + "%", top: top }));
-};
-
-var styles$1 = {"scheduler-row-header":"scheduler-row-module__scheduler-row-header__S-iv4"};
-
-const DefaultRowHeader = ({ value, width, onEvent }) => {
-    return (jsxs("div", { style: {
-            width: width,
-            // background: color,
-        }, onClick: (_) => {
-            onEvent(new OnClickRowHeader(value.rowId));
-        }, className: styles$1["scheduler-row-header"], children: [jsxs("div", { children: [jsx("strong", { children: value.title }), value.title2 && jsxs("span", { children: ["-", value.title2] }), " ", jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 && jsxs("span", { className: styles$1["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxs("span", { children: ["-", value.subtitle2] })] })] }));
-};
-
 const EventSideDrag = ({ left = false, heightRem, onStartEvent }) => {
     return (jsx("span", { draggable: true, onDragStart: (e) => {
             e.stopPropagation();
@@ -8520,13 +6927,9 @@ const EventSideDrag = ({ left = false, heightRem, onStartEvent }) => {
         } }));
 };
 
-const MAX_EVENT_HEIGHT_REM = 1.5;
 const SchedulerEvent = ({ value, heightRem, onEvent }) => {
     const [isOnDrag, setIsOnDrag] = useState(false);
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
-    const effectiveHeight = Math.min(heightRem, MAX_EVENT_HEIGHT_REM);
-    const topOffsetRem = (heightRem - effectiveHeight) / 2;
-    const topOffsetPx = Math.round(topOffsetRem * 16) + 1;
     // Calculate colors of the event
     const backColor = getHSLColor(value.color, value.alpha ?? 1);
     const textColor = getContrastColor(value.color);
@@ -8562,10 +6965,9 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
         }, placement: "bottom", options: value.contextMenuItems ?? [], onSelect: (key) => {
             onEvent(new OnClickContextMenu(value.id, key));
         }, children: jsx("div", { style: {
-                top: `${topOffsetPx}px`,
+                top: "2px",
                 left: `${value.left}%`,
                 width: `${value.width}%`,
-                minWidth: "5px",
                 position: "absolute",
                 zIndex: isOnDrag ? 999 : undefined,
                 contentVisibility: "auto",
@@ -8582,21 +6984,19 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
             }, onDragEnd: (_) => {
                 if (value.isDraggable)
                     setIsOnDrag(false);
-            }, children: jsx(CwTooltipNew, { content: value.tooltip, position: "bottom", hide: isOnDrag, showDelay: 200, children: jsxs("div", { style: {
+            }, children: jsx(CwGenericTooltip, { content: value.tooltip, position: "bottom", hide: isOnDrag, dissapearsWhenHover: true, showDelay: 200, children: jsxs("div", { style: {
                         border: value.selected ? "2px solid black" : "none",
                         backgroundColor: backColor,
-                        height: `calc(${effectiveHeight}rem - 4px)`,
+                        height: `calc(${heightRem}rem - 4px)`,
                         opacity: eventTransparent ? 0.5 : 1,
                     }, className: styles$2["scheduler-event"], children: [jsxs("div", { style: {
                                 display: "flex",
                                 flexDirection: "row",
                                 alignItems: "stretch",
                                 width: "100%",
-                                padding: "0 2px",
                                 cursor: value.isDraggable ? "pointer" : "default",
-                                // height: `calc(${effectiveHeight}rem - 8px)`,
-                                height: "100%",
-                            }, children: [value.isResizable && (jsx(EventSideDrag, { left: true, heightRem: effectiveHeight * 0.7, onStartEvent: () => {
+                                height: `calc(${heightRem}rem - 10px)`,
+                            }, children: [value.isResizable && (jsx(EventSideDrag, { left: true, heightRem: heightRem * 0.7, onStartEvent: () => {
                                         onEvent(new OnLeftDragStart(value.id));
                                     } })), jsxs("div", { className: styles$2["scheduler-event-container"], children: [jsx("div", { style: {
                                                 display: "flex",
@@ -8620,7 +7020,7 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
                                                         height: "8px",
                                                         margin: 0,
                                                         padding: 0,
-                                                    } }, value.id + "_" + i))) })) : (value.name) })] }), value.isResizable && (jsx(EventSideDrag, { heightRem: effectiveHeight * 0.7, onStartEvent: () => {
+                                                    } }, value.id + "_" + i))) })) : (value.name) })] }), value.isResizable && (jsx(EventSideDrag, { heightRem: heightRem * 0.7, onStartEvent: () => {
                                         onEvent(new OnRightDragStart(value.id));
                                     } }))] }), value.primaryTimeMarkerColor && (jsx("div", { className: styles$2["time-marker"], style: {
                                 backgroundColor: value.primaryTimeMarkerColor,
@@ -8629,9 +7029,50 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
                             } }))] }) }) }, value.id) }));
 };
 
+const eventsCollide = (event1, event2) => {
+    const eventInsideOther = event1.startDate <= event2.startDate && event1.endDate >= event2.endDate;
+    const eventCollideStart = event1.endDate > event2.startDate && event1.endDate < event2.endDate;
+    const eventCollideEnd = event2.endDate > event1.startDate && event2.endDate < event1.endDate;
+    return eventInsideOther || eventCollideStart || eventCollideEnd;
+};
+// Function to separate events into non-colliding rows
+const separateEventsToInnerRows = (events) => {
+    const sortedEvents = [...events].sort((a, b) => {
+        const aOrder = a.order ?? Number.MAX_SAFE_INTEGER;
+        const bOrder = b.order ?? Number.MAX_SAFE_INTEGER;
+        if (aOrder !== bOrder) {
+            return aOrder - bOrder; // Prioridad al order si ambos están definidos
+        }
+        return a.startDate.getTime() - b.startDate.getTime();
+    });
+    const rows = [];
+    for (const event of sortedEvents) {
+        let placed = false;
+        for (const row of rows) {
+            if (!row.some((existingEvent) => eventsCollide(existingEvent, event))) {
+                row.push(event);
+                placed = true;
+                break;
+            }
+        }
+        if (!placed) {
+            rows.push([event]);
+        }
+    }
+    return rows;
+};
+
+const DivisionLine = ({ left, top = "0px", height }) => {
+    return (jsx(TimeLine, { color: "rgba(255,255,255,1)", left: left + "%", height: height, width: 1 + "px", top: top }));
+};
+
+const WeekEndLine = ({ left, top = "0px", height, widthPercentage }) => {
+    return (jsx(TimeLine, { color: "rgba(0,0,0,0.05)", left: left + "%", height: height, width: widthPercentage + "%", top: top }));
+};
+
 const SchedulerRow = memo((props) => {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
-    const { events, backgroundEvents, indicatorRows, rowHeader, contextMenuItems, RowTitleComp, EventComp, BackgroundEventComp, weekendLines, divisionLines, timeLinePercentage, selectedDate, visibleDays, onEvent, } = props;
+    const { events, backgroundEvents, rowHeader, contextMenuItems, RowTitleComp, EventComp, BackgroundEventComp, weekendLines, divisionLines, timeLinePercentage, selectedDate, visibleDays, onEvent, } = props;
     const internalRows = separateEventsToInnerRows(events);
     const schedulerDivRef = useRef(null);
     const { handleClick, handleDoubleClick } = useSingleAndDoubleClicks((e) => {
@@ -8675,7 +7116,7 @@ const SchedulerRow = memo((props) => {
                         }
                     }, onDragOver: (e) => {
                         e.preventDefault();
-                    }, onClick: handleClick, onDoubleClick: handleDoubleClick, children: [weekendLines.map((weekend) => (jsx(WeekEndLine, { height: "100%", left: weekend.left, widthPercentage: weekend.width }, weekend.left))), divisionLines.map((division) => (jsx(DivisionLine, { height: "100%", left: division.left, isDayBoundary: division.isDayBoundary }, division.left))), backgroundEvents.length > 0 && backgroundEvents.some((e) => e.isVisible) && (jsx("div", { style: {
+                    }, onClick: handleClick, onDoubleClick: handleDoubleClick, children: [weekendLines.map((weekend) => (jsx(WeekEndLine, { height: "100%", left: weekend.left, widthPercentage: weekend.width }, weekend.left))), divisionLines.map((division) => (jsx(DivisionLine, { height: "100%", left: division.left }, division.left))), backgroundEvents.length > 0 && backgroundEvents.some((e) => e.isVisible) && (jsx("div", { style: {
                                 height: "100%",
                                 position: internalRows.length > 0 ? "absolute" : "relative",
                                 width: "100%",
@@ -8688,7 +7129,7 @@ const SchedulerRow = memo((props) => {
                                     height: props.rowHeightInRem + "rem",
                                     pointerEvents: "none"
                                 }, children: internalRow.map((event) => (jsx(EventComp, { value: event, heightRem: props.rowHeightInRem, onEvent: onEvent }, event.id))) }, index));
-                        }), indicatorRows.length > 0 && (jsx(IndicatorRow, { indicators: indicatorRows, selectedDate: selectedDate, visibleDays: visibleDays })), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "0px", height: `100%` }))] }) })] }));
+                        }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "0px", height: `100%` }))] }) })] }));
 }, (prevProps, nextProps) => {
     // This memo is necessary to prevent re-render all the rows when a user makes drag and drop
     const getEventKey = (event) => {
@@ -8714,78 +7155,31 @@ const SchedulerRow = memo((props) => {
             return false;
         }
     }
-    if (prevProps.indicatorRows.length !== nextProps.indicatorRows.length) {
-        return false;
-    }
     // If we got here, the events are the same
     return true;
 });
 
-const filterVisibleEvents = (events, selectedDate, visibleDays) => {
-    const lastDayOfScheduler = new Date(selectedDate.getTime() + visibleDays * 24 * 60 * 60 * 1000);
-    return events.filter((event) => event.endDate > selectedDate && event.startDate < lastDayOfScheduler);
-};
-
-const DIVISION_RULES = [
-    { maxDays: 2, divisions: 24 },
-    { maxDays: 3, divisions: 12 },
-    { maxDays: 4, divisions: 8 },
-    { maxDays: 5, divisions: 6 },
-    { maxDays: 7, divisions: 3 },
-];
-const DEFAULT_DIVISIONS = 2;
 const calculateDivisionsByDays = (days) => {
-    const rule = DIVISION_RULES.find((it) => days <= it.maxDays);
-    return rule?.divisions ?? DEFAULT_DIVISIONS;
+    if (days <= 3) {
+        return 8;
+    }
+    if (days <= 7) {
+        return 3;
+    }
+    return 2;
 };
-const getHoursFromDivisions = (divisions, useCompactHourFormat = false) => {
+const getHoursFromDivisions = (divisions) => {
     const hoursInterval = 24 / divisions;
     const array = [];
     for (let i = 0; i < divisions; i++) {
-        const totalMinutes = Math.round(hoursInterval * i * 60);
-        const hours = Math.floor(totalMinutes / 60);
-        const minutes = totalMinutes % 60;
-        const hh = hours.toString().padStart(2, "0");
-        const mm = minutes.toString().padStart(2, "0");
-        array.push(useCompactHourFormat ? `${hh}h` : `${hh}:${mm}`);
+        const newHour = moment(new Date(1, 1, 1))
+            .add(hoursInterval * i, "hours")
+            .format("HH:mm");
+        array.push(newHour);
     }
     return array;
 };
 
-const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-function toPlainDate(date) {
-    return Temporal.Instant.fromEpochMilliseconds(date.getTime())
-        .toZonedDateTimeISO(timeZone).toPlainDate();
-}
-function addDays(date, days) {
-    const result = new Date(date);
-    result.setDate(result.getDate() + days);
-    return result;
-}
-function formatDD_MM(date) {
-    const pd = toPlainDate(date);
-    return `${pd.day.toString().padStart(2, "0")}.${pd.month.toString().padStart(2, "0")}`;
-}
-function formatDD_MM_YYYY(date) {
-    const pd = toPlainDate(date);
-    return `${pd.day.toString().padStart(2, "0")}.${pd.month.toString().padStart(2, "0")}.${pd.year}`;
-}
-function formatMM_YYYY(date) {
-    const pd = toPlainDate(date);
-    return `${pd.month.toString().padStart(2, "0")}.${pd.year}`;
-}
-function getShortWeekday(date) {
-    return date.toLocaleDateString("en-US", { weekday: "short" });
-}
-function daysBetween(a, b) {
-    const aPlain = toPlainDate(a);
-    const bPlain = toPlainDate(b);
-    return Math.abs(aPlain.until(bPlain).days);
-}
-function daysInMonth(date) {
-    const pd = toPlainDate(date);
-    return pd.daysInMonth;
-}
 const getDefaultDivisions = (visibleDays, selectedDate) => {
     if (visibleDays <= 15) {
         return getDayDivisions(visibleDays, selectedDate);
@@ -8798,19 +7192,15 @@ const getDefaultDivisions = (visibleDays, selectedDate) => {
 };
 const getDayDivisions = (visibleDays, selectedDate) => {
     const divisionsNumber = calculateDivisionsByDays(visibleDays);
-    const divisions = getHoursFromDivisions(divisionsNumber, visibleDays < 3);
+    const divisions = getHoursFromDivisions(divisionsNumber);
     const calculatedDivision = [];
     for (let i = 0; i < visibleDays; i++) {
-        const currentDate = addDays(selectedDate, i);
-        const weekdayShort = getShortWeekday(currentDate);
-        const weekdayLabel = visibleDays < 8
-            ? weekdayShort
-            : weekdayShort.charAt(0).toUpperCase();
+        const currentDate = moment(selectedDate).add(i, "days");
         calculatedDivision.push({
-            top: `${weekdayLabel} ${formatDD_MM(currentDate)}`,
+            top: currentDate.format("DD.MM.YYYY"),
             bottom: divisions,
-            startDate: currentDate,
-            endDate: currentDate
+            startDate: currentDate.toDate(),
+            endDate: currentDate.toDate()
         });
     }
     return calculatedDivision;
@@ -8818,16 +7208,16 @@ const getDayDivisions = (visibleDays, selectedDate) => {
 const getWeekDivisions = (visibleDays, selectedDate) => {
     const weeks = getWeeksByDays(visibleDays, selectedDate);
     const divisions = weeks.map((week) => {
-        const days = Array.from({ length: week.days }, (_, i) => addDays(week.start, i).getDate().toString());
-        const weekEnd = addDays(week.start, week.days - 1);
+        const days = Array.from({ length: week.days }, (_, i) => moment(week.start).add(i, "days").date().toString());
+        const weekEnd = moment(week.start).add(week.days - 1, "days");
         const top = days.length > 2
-            ? formatDD_MM_YYYY(week.start) + " - " + formatDD_MM_YYYY(weekEnd)
-            : formatDD_MM_YYYY(week.start);
+            ? moment(week.start).format("DD.MM.YYYY") + " - " + moment(week.start).add(week.days - 1, "days").format("DD.MM.YYYY")
+            : moment(week.start).format("DD.MM.YYYY");
         const division = {
             top: top,
             bottom: days,
-            startDate: new Date(week.start),
-            endDate: weekEnd
+            startDate: moment(week.start).toDate(),
+            endDate: weekEnd.toDate()
         };
         return division;
     });
@@ -8836,13 +7226,13 @@ const getWeekDivisions = (visibleDays, selectedDate) => {
 const getMonthDivisions = (visibleDays, selectedDate) => {
     const months = getMonthsByDays(visibleDays, selectedDate);
     const divisions = months.map((month) => {
-        const days = Array.from({ length: month.days }, (_, i) => addDays(month.start, i).getDate().toString());
-        const monthEnd = addDays(month.start, month.days - 1);
+        const days = Array.from({ length: month.days }, (_, i) => moment(month.start).add(i, "days").date().toString());
+        const monthEnd = moment(month.start).add(month.days - 1, "days");
         const division = {
-            top: formatMM_YYYY(month.start),
+            top: moment(month.start).format("MM.YYYY"),
             bottom: days,
-            startDate: new Date(month.start),
-            endDate: monthEnd
+            startDate: moment(month.start).toDate(), // Añadir fecha de inicio
+            endDate: monthEnd.toDate()
         };
         return division;
     });
@@ -8853,23 +7243,23 @@ const getMonthsByDays = (visibleDays, selectedDate) => {
         return [];
     }
     const month = [];
-    let rangeStart = new Date(selectedDate);
+    let temporalDay = moment(selectedDate);
     for (let i = 0; i < visibleDays; i++) {
-        const currentDay = addDays(selectedDate, i);
+        const currentDay = moment(selectedDate).add(i, "days");
         const isLastLoop = i + 1 === visibleDays;
         if (isLastLoop) {
             month.push({
-                start: rangeStart,
-                days: daysBetween(rangeStart, currentDay) + 1,
+                start: temporalDay.toDate(),
+                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
             });
             break;
         }
-        if (currentDay.getDate() === daysInMonth(currentDay)) {
+        if (currentDay.date() === currentDay.daysInMonth()) {
             month.push({
-                start: rangeStart,
-                days: daysBetween(rangeStart, currentDay) + 1,
+                start: temporalDay.toDate(),
+                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
             });
-            rangeStart = addDays(currentDay, 1);
+            temporalDay = currentDay.add(1, "days");
         }
     }
     return month;
@@ -8880,36 +7270,76 @@ const getWeeksByDays = (visibleDays, selectedDate) => {
         return [];
     }
     const weeks = [];
-    let rangeStart = new Date(selectedDate);
+    let temporalDay = moment(selectedDate);
     for (let i = 0; i < visibleDays; i++) {
-        const currentDay = addDays(selectedDate, i);
+        const currentDay = moment(selectedDate).add(i, "days");
         const isLastLoop = i + 1 === visibleDays;
         if (isLastLoop) {
             weeks.push({
-                start: rangeStart,
-                days: daysBetween(rangeStart, currentDay) + 1,
+                start: temporalDay.toDate(),
+                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
             });
             break;
         }
-        if (currentDay.getDay() === SUNDAY) {
+        if (currentDay.day() === SUNDAY) {
             weeks.push({
-                start: rangeStart,
-                days: daysBetween(rangeStart, currentDay) + 1,
+                start: temporalDay.toDate(),
+                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
             });
-            rangeStart = addDays(currentDay, 1);
+            temporalDay = currentDay.add(1, "days");
         }
     }
     return weeks;
 };
 
+const eventIsVisible = (startDate, endDate, selectedDate, visibleDays) => {
+    const schedulerEnd = moment(selectedDate).add(visibleDays, "days").toDate();
+    const isBefore = selectedDate > startDate && selectedDate > endDate;
+    const isAfter = schedulerEnd < startDate && schedulerEnd < endDate;
+    return !isBefore && !isAfter;
+};
+
+const hoursBetween = (date1, date2) => {
+    const oneHourInMillis = 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
+    const timeDiff = date2.getTime() - date1.getTime();
+    return timeDiff / oneHourInMillis;
+};
+const getEventSizes = (schedulerDate, totalDays, startDate, endDate) => {
+    if (!eventIsVisible(startDate, endDate, schedulerDate, totalDays)) {
+        return {
+            left: 0,
+            width: 0,
+        };
+    }
+    const totalHours = totalDays * 24;
+    // const dateString = schedulerDate.toISOString().split('T')[0];
+    //const schedulerDateAtZero = new Date(dateString)
+    let startHours = hoursBetween(schedulerDate, startDate);
+    let durationHours = hoursBetween(startDate, endDate);
+    const startOutOfScheduler = startHours < 0;
+    if (startOutOfScheduler) {
+        durationHours += startHours;
+        startHours = 0;
+    }
+    const left = (startHours / totalHours) * 100;
+    const width = (durationHours * 100) / totalHours;
+    return {
+        left,
+        width,
+    };
+};
+
 function getLinesByDivisions(headerDivision, _) {
-    const lines = headerDivision.flatMap((division) => division.bottom.map((_, i) => ({ isDayBoundary: i === 0 })));
+    const lines = headerDivision.flatMap((division) => {
+        return division.bottom;
+    });
     const left = 100 / lines.length;
-    const finalLines = lines.map((line, index) => ({
-        left: left * index,
-        width: 1,
-        isDayBoundary: line.isDayBoundary,
-    })).filter((_, index) => index !== 0);
+    const finalLines = lines.map((_, index) => {
+        return {
+            left: left * index,
+            width: 1,
+        };
+    }).filter((_, index) => index !== 0);
     return finalLines;
 }
 
@@ -8948,6 +7378,9 @@ const getWeekendsDaysInDateRange = (initialDate, visibleDays) => {
     return weekends;
 };
 
+class UiEvent {
+}
+
 const getNow = (isUtc) => {
     let now = new Date();
     if (!isUtc) {
@@ -8955,67 +7388,11 @@ const getNow = (isUtc) => {
     }
     return now;
 };
+const rowsHeight = 1.75; // rem
 const milliSecondsInSecond = 1000;
 const refreshMilliSeconds = 45 * milliSecondsInSecond;
-const EMPTY_EVENTS = [];
-const EMPTY_BG_EVENTS = [];
-const EMPTY_INDICATORS = [];
-// Memoised row body. Receives flat props (the per-row buckets are looked up
-// by the outer Row wrapper). As long as those bucket arrays keep their
-// reference (see `groupByRowIdStable`) and the rest of the render-context
-// values are stable, this row will skip re-rendering on selection clicks
-// that don't affect it.
-const RowContent = React__default.memo(function RowContent(props) {
-    const header = {
-        value: props.row,
-        width: props.rowHeaderWidth,
-        onEvent: props.onEvent,
-    };
-    return (jsx("div", { style: {
-            ...props.style,
-            backgroundColor: props.rowColor
-        }, children: jsx(SchedulerRow, { events: props.events, backgroundEvents: props.backgroundEvents, indicatorRows: props.indicatorRows, rowHeader: header, EventComp: props.EventComp, BackgroundEventComp: props.BackgroundEventComp, RowTitleComp: props.RowTitleComp, weekendLines: props.weekendLines, divisionLines: props.divisionLines, timeLinePercentage: props.timeLinePercentage, rowHeightInRem: props.rowHeightRem, onEvent: props.onEvent, contextMenuItems: props.contextMenuItems, visibleDays: props.visibleDays, selectedDate: props.selectedDate }) }, props.row.rowId));
-});
-// Outer (unmemoised) row: looks up per-row buckets from the shared `data`
-// object and forwards them as flat props to `RowContent`. Because the
-// referenced arrays are reused when their contents are unchanged
-// (see `groupByRowIdStable`), `RowContent.memo` will skip the work.
-const Row = ({ index, style, data }) => {
-    const row = data.rows[index];
-    const rowColor = data.groupRowColors
-        ? Math.floor(index / 2) % 2 === 0 ? data.evenColor : data.oddColor
-        : index % 2 === 0 ? data.evenColor : data.oddColor;
-    return (jsx(RowContent, { style: style, row: row, rowColor: rowColor, events: data.eventsByRow.get(row.rowId) ?? EMPTY_EVENTS, backgroundEvents: data.backgroundEventsByRow.get(row.rowId) ?? EMPTY_BG_EVENTS, indicatorRows: data.indicatorRowsByRow.get(row.rowId) ?? EMPTY_INDICATORS, EventComp: data.EventComp, BackgroundEventComp: data.BackgroundEventComp, RowTitleComp: data.RowTitleComp, rowHeaderWidth: data.rowHeaderWidth, rowHeightRem: row.rowHeightRem ?? data.rowHeightRem, weekendLines: data.weekendLines, divisionLines: data.divisionLines, timeLinePercentage: data.timeLinePercentage, selectedDate: data.selectedDate, visibleDays: data.visibleDays, contextMenuItems: data.contextMenuItems, onEvent: data.onEvent }));
-};
-// Bucket items by rowId, but reuse previous bucket arrays whenever a row's
-// contents have not changed. Keeping bucket references stable is essential
-// for `RowContent.memo` to skip work when only one row's events change
-// (e.g. on selection clicks).
-const groupByRowIdStable = (items, prev) => {
-    const next = new Map();
-    for (const item of items) {
-        const bucket = next.get(item.rowId);
-        if (bucket) {
-            bucket.push(item);
-        }
-        else {
-            next.set(item.rowId, [item]);
-        }
-    }
-    if (!prev)
-        return next;
-    for (const [rowId, bucket] of next) {
-        const prevBucket = prev.get(rowId);
-        if (prevBucket
-            && prevBucket.length === bucket.length
-            && prevBucket.every((v, i) => v === bucket[i])) {
-            next.set(rowId, prevBucket);
-        }
-    }
-    return next;
-};
 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 { header: headerContent, id, events: eventsState, backgroundEvents, contextMenuItems, EventComp, RowTitleComp, orderCategories = ["title"], useOrderCategory, onEvent, groupRowColors, rowHeaderWidth = 180, } = props;
     const BackgroundEventComp = props.BackgroundEventComp ?? BackgroundEvent;
     const rows = useOrderCategory === false
         ? props.rows
@@ -9023,50 +7400,21 @@ const Scheduler = (props) => {
     const instanceRef = useRef(null);
     // const rowHeaderWidth = "180px";
     const { selectedDate, visibleDays, isUtc, isHeaderVisible, visibleRows: stateVisibleRows } = props.state;
-    const events = useMemo(() => filterVisibleEvents(eventsState, selectedDate, visibleDays), [eventsState, selectedDate, visibleDays]);
+    const events = eventsState.filter((event) => {
+        const lastDayOfScheduler = moment(selectedDate).add(visibleDays, "days");
+        return (moment(event.endDate).isAfter(selectedDate) &&
+            moment(event.startDate).isBefore(lastDayOfScheduler));
+    });
     useEffect(() => {
         instanceRef.current?.resetAfterIndex(0);
-    }, [orderCategories, props.rows.length, events, allIndicatorRows]);
-    // Bucket events / backgroundEvents / indicatorRows by rowId once per render
-    // instead of running events.filter() per row inside the row renderer.
-    // Reuse previous bucket arrays when their contents are unchanged so the
-    // memoised RowContent below can skip work (essential for selection clicks
-    // to be cheap).
-    const eventsByRowRef = useRef();
-    const backgroundEventsByRowRef = useRef();
-    const indicatorRowsByRowRef = useRef();
-    const eventsByRow = useMemo(() => {
-        const next = groupByRowIdStable(events, eventsByRowRef.current);
-        eventsByRowRef.current = next;
-        return next;
-    }, [events]);
-    const backgroundEventsByRow = useMemo(() => {
-        const next = groupByRowIdStable(backgroundEvents, backgroundEventsByRowRef.current);
-        backgroundEventsByRowRef.current = next;
-        return next;
-    }, [backgroundEvents]);
-    const indicatorRowsByRow = useMemo(() => {
-        const next = groupByRowIdStable(allIndicatorRows, indicatorRowsByRowRef.current);
-        indicatorRowsByRowRef.current = next;
-        return next;
-    }, [allIndicatorRows]);
-    const totalHeightRem = rows.reduce((acc, row) => {
-        const filteredEvents = eventsByRow.get(row.rowId) ?? [];
-        const innerRows = separateEventsToInnerRows(filteredEvents);
-        const effectiveRowHeight = row.rowHeightRem ?? rowHeightRem;
-        const eventHeight = Math.max(innerRows.length, 1) * effectiveRowHeight;
-        const hasIndicators = indicatorRowsByRow.has(row.rowId);
-        return acc + eventHeight + (hasIndicators ? INDICATOR_HEIGHT_REM : 0);
-    }, 0);
-    const schedulerContentHeight = stateVisibleRows != null
-        ? Math.min(totalHeightRem, stateVisibleRows * rowHeightRem)
-        : Math.max(totalHeightRem, rowHeightRem);
+    }, [orderCategories, props.rows.length, events]);
+    const notEmptyRows = stateVisibleRows ?? rows.length;
+    const visibleRows = height(events, rows, notEmptyRows);
     const totalHours = visibleDays * 24;
     const [timeLinePercentage, setTimeLinePercentage] = useState(0);
-    const divisions = useMemo(() => getDefaultDivisions(visibleDays, selectedDate), [visibleDays, selectedDate]);
     const header = {
         content: headerContent,
-        divisions,
+        divisions: getDefaultDivisions(visibleDays, selectedDate),
         visibleDays: visibleDays,
         width: rowHeaderWidth,
         selectedDate,
@@ -9076,8 +7424,9 @@ const Scheduler = (props) => {
     };
     const evenColor = "var(--cw-color-surface-container-low)";
     const oddColor = "var(--cw-color-surface-container)";
-    const weekendsLines = useMemo(() => getWeekendLinesByDatesVisible(selectedDate, visibleDays), [selectedDate, visibleDays]);
-    const divisionLines = useMemo(() => getLinesByDivisions(divisions), [divisions, visibleDays]);
+    const schedulerContentHeight = rowsHeight * visibleRows;
+    const weekendsLines = getWeekendLinesByDatesVisible(selectedDate, visibleDays);
+    const divisionLines = getLinesByDivisions(header.divisions);
     // Timeline percentage calculation
     useEffect(() => {
         const updateTimeLinePercentage = () => {
@@ -9088,56 +7437,30 @@ const Scheduler = (props) => {
         const interval = setInterval(updateTimeLinePercentage, refreshMilliSeconds);
         return () => clearInterval(interval);
     }, [selectedDate, isUtc, totalHours]);
-    const itemData = useMemo(() => ({
-        rows,
-        eventsByRow,
-        backgroundEventsByRow,
-        indicatorRowsByRow,
-        EventComp: EventComp,
-        BackgroundEventComp,
-        RowTitleComp: RowTitleComp,
-        rowHeaderWidth,
-        rowHeightRem,
-        weekendLines: weekendsLines,
-        divisionLines,
-        timeLinePercentage,
-        selectedDate,
-        visibleDays,
-        contextMenuItems,
-        onEvent,
-        groupRowColors,
-        evenColor,
-        oddColor,
-    }), [
-        rows,
-        eventsByRow,
-        backgroundEventsByRow,
-        indicatorRowsByRow,
-        EventComp,
-        BackgroundEventComp,
-        RowTitleComp,
-        rowHeaderWidth,
-        rowHeightRem,
-        weekendsLines,
-        divisionLines,
-        timeLinePercentage,
-        selectedDate,
-        visibleDays,
-        contextMenuItems,
-        onEvent,
-        groupRowColors,
-    ]);
+    // Memoized Row Component
+    const Row = React__default.memo(({ index, style }) => {
+        const row = rows[index];
+        const rowColor = groupRowColors
+            ? Math.floor(index / 2) % 2 === 0 ? evenColor : oddColor
+            : index % 2 === 0 ? evenColor : oddColor;
+        const header = {
+            value: row,
+            width: rowHeaderWidth,
+            onEvent: onEvent,
+        };
+        return (jsx("div", { style: {
+                ...style,
+                backgroundColor: rowColor
+            }, children: jsx(SchedulerRow, { events: events.filter((it) => it.rowId === row.rowId), backgroundEvents: backgroundEvents.filter((it) => it.rowId === row.rowId), rowHeader: header, EventComp: EventComp, BackgroundEventComp: BackgroundEventComp, RowTitleComp: RowTitleComp, weekendLines: weekendsLines, divisionLines: divisionLines, timeLinePercentage: timeLinePercentage, rowHeightInRem: rowsHeight, onEvent: onEvent, contextMenuItems: contextMenuItems, visibleDays: visibleDays, selectedDate: selectedDate }) }, row.rowId));
+    });
     const getItemSize = useCallback((index) => {
         const row = rows[index];
-        const filteredEvents = eventsByRow.get(row.rowId) ?? [];
+        const filteredEvents = events.filter((it) => it.rowId === row.rowId);
         const innerRows = separateEventsToInnerRows(filteredEvents);
         const rowsNumber = innerRows.length > 0 ? innerRows.length : 1;
         const pixelsInRem = 16;
-        const effectiveRowHeight = row.rowHeightRem ?? rowHeightRem;
-        const hasIndicators = indicatorRowsByRow.has(row.rowId);
-        const indicatorPixels = hasIndicators ? INDICATOR_HEIGHT_REM * pixelsInRem : 0;
-        return rowsNumber * effectiveRowHeight * pixelsInRem + indicatorPixels;
-    }, [rows, eventsByRow, indicatorRowsByRow, rowHeightRem]);
+        return rowsNumber * rowsHeight * pixelsInRem;
+    }, [rows, events]);
     // Render
     return (jsxs("div", { id: id, style: {
             position: "relative",
@@ -9148,11 +7471,17 @@ const Scheduler = (props) => {
                     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 })] }));
+                }, children: jsx(SchedulerHeader, { ...header }) })), jsx(VariableSizeList, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: styles$2["hide-scrollbar"], children: Row })] }));
+};
+const height = (events, rows, rowsNumber) => {
+    const selectedRows = rows.slice(0, rowsNumber);
+    const flatMapped = selectedRows.flatMap(row => {
+        const newEvents = events.filter(it => it.rowId === row.rowId);
+        const innerRows = separateEventsToInnerRows(newEvents);
+        return innerRows.length > 0 ? innerRows : [[]];
+    });
+    return flatMapped.length;
 };
-
-class UiEvent {
-}
 
 let topsCounter = 0;
 class CwSuperScheduler extends React.Component {
@@ -9473,7 +7802,7 @@ class Resource {
     }
 }
 
-var styles = {"super-scheduler-row-header":"super-scheduler-module__super-scheduler-row-header__TTs4e","indicators":"super-scheduler-module__indicators__f4lIT","scheduler-crewmember-functions":"super-scheduler-module__scheduler-crewmember-functions__BS2hs"};
+var styles = {"super-scheduler-row-header":"super-scheduler-module_super-scheduler-row-header__TTs4e","indicators":"super-scheduler-module_indicators__f4lIT","scheduler-crewmember-functions":"super-scheduler-module_scheduler-crewmember-functions__BS2hs"};
 
 class OnPinRow {
     id;
@@ -9494,12 +7823,11 @@ class OnClearPinned {
 const PinRowHeader = ({ value, width, onEvent }) => {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const { highlightColor, isLoading } = value;
-    return jsx(CwAnchoredMenu, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "right", options: value.contextMenuItems ?? [], onSelect: (key) => {
+    return (jsx(CwAnchoredMenu, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "right", options: value.contextMenuItems ?? [], onSelect: (key) => {
             onEvent(new OnClickContextMenu(value.rowId, key));
-        }, children: jsx(CwTooltipNew, { content: value.tooltip, position: "right", dissapearsWhenHover: true, children: jsxs("div", { style: {
+        }, children: jsx(CwGenericTooltip, { content: value.tooltip, position: "right", dissapearsWhenHover: true, overlayStyle: value.overlayTooltipStyle, children: jsxs("div", { style: {
                     width: width,
-                    height: "100%",
-                    background: highlightColor
+                    background: highlightColor,
                 }, className: styles["super-scheduler-row-header"], children: [jsx("button", { className: "cw-button-icon cwi-pin", "data-pinned": value.isPinned, onClick: (_) => {
                             onEvent(value.isPinned ? new OnUnpinRow(value.rowId) : new OnPinRow(value.rowId));
                         } }), jsx("div", { className: styles["indicators"], children: value.indicators ?? undefined }), jsxs("div", { style: {
@@ -9508,37 +7836,19 @@ const PinRowHeader = ({ value, width, onEvent }) => {
                             justifyContent: "center",
                             alignItems: "flex-start",
                         }, children: [jsxs("div", { children: [jsx("strong", { children: value.title }), value.title2 && jsxs("span", { children: ["-", value.title2] }), " ", jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 &&
-                                        jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxs("span", { children: ["-", value.subtitle2] })] })] }), isLoading ? jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }) }, value.rowId) }, value.rowId);
+                                        jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxs("span", { children: ["-", value.subtitle2] })] })] }), isLoading ? jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }) }, value.rowId) }, value.rowId));
 };
 
-const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory, unPinnedOrderCategory, backgroundEvents, indicatorRows = [], contextMenuItems, onEvent, rowHeightRem = 1.75 }) => {
+const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory, unPinnedOrderCategory, backgroundEvents, contextMenuItems, onEvent }) => {
     const pinnedRows = rows.filter((it) => it.isPinned);
     const notPinnedRows = rows.filter((it) => !it.isPinned);
     const isFirstVisible = pinnedRows.length > 0;
-    return (jsxs(Fragment, { children: [isFirstVisible && (jsxs(Fragment, { children: [jsx(Scheduler, { id: `${id}-pinned`, state: state, header: header, rows: pinnedRows, events: events, backgroundEvents: backgroundEvents, indicatorRows: indicatorRows, contextMenuItems: contextMenuItems, orderCategories: pinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader, rowHeightRem: rowHeightRem }), jsx("div", { children: jsx(CwButton, { onClick: () => {
+    return (jsxs(Fragment, { children: [isFirstVisible && (jsxs(Fragment, { children: [jsx(Scheduler, { id: `${id}-pinned`, state: state, header: header, rows: pinnedRows, events: events, backgroundEvents: backgroundEvents, contextMenuItems: contextMenuItems, orderCategories: pinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader }), jsx("div", { children: jsx(CwButton, { onClick: () => {
                                 onEvent(new OnClearPinned());
-                            }, children: "Clear pinned" }) })] })), jsx(Scheduler, { id: `${id}-notPinned`, state: { ...state, isHeaderVisible: !isFirstVisible }, header: header, rows: notPinnedRows, events: events, backgroundEvents: backgroundEvents, indicatorRows: indicatorRows, contextMenuItems: contextMenuItems, orderCategories: unPinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader, rowHeightRem: rowHeightRem })] }));
+                            }, children: "Clear pinned" }) })] })), jsx(Scheduler, { id: `${id}-notPinned`, state: { ...state, isHeaderVisible: !isFirstVisible }, header: header, rows: notPinnedRows, events: events, backgroundEvents: backgroundEvents, contextMenuItems: contextMenuItems, orderCategories: unPinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader })] }));
 };
 
-/**
- * API-backed airport search input for WinOps.
- *
- * Fetches matching airports from the WinOps backend as the user types (debounced).
- * Renders results in a shared `cw-choice-dropdown` styled panel with keyboard navigation.
- * Supports pre-selecting an airport by `value` (AptKey) and customising the displayed text
- * format via `displayMode`.
- *
- * Requires a running WinOps backend — set `cblConfig` to its base URL.
- *
- * @example
- * <CwFindAirport
- *   cblConfig="https://localhost:44300"
- *   handleChange={(key) => setAirportKey(key)}
- *   labelProps={{ text: 'Departure Airport' }}
- *   displayMode="iata-only"
- * />
- */
-const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder = "Search airport…", required = false, cblConfig, className = "", value, disabled = false, displayMode, initialDisplayText, labelProps, alignProps, width }) => {
+const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder = "Search airport…", required = false, cblConfig, className = "", value, disabled = false, displayMode, labelProps, alignProps, width }) => {
     // State
     const [inputValue, setInputValue] = useState("");
     const [options, setOptions] = useState([]);
@@ -9550,13 +7860,8 @@ const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder
     const [tooltipText, setTooltipText] = useState("");
     // Refs
     const inputRef = useRef(null);
-    const wrapperRef = useRef(null);
+    const dropdownRef = useRef(null);
     const searchTimeoutRef = useRef();
-    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
-        anchorRef: wrapperRef,
-        isOpen: showDropdown && options.length > 0,
-        onClose: () => { setShowDropdown(false); setHighlightedIndex(-1); },
-    });
     // Utility function to extract ICAO from DisplayAirportText
     const extractIcao = useCallback((displayText) => {
         const match = displayText.match(/^([A-Z]{4})\(/);
@@ -9733,19 +8038,25 @@ const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder
                 break;
         }
     };
-    // Handle clicks outside dropdown — now handled by useDropdownPortal
+    // Handle clicks outside dropdown
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target) &&
+                !inputRef.current?.contains(event.target)) {
+                setShowDropdown(false);
+                setHighlightedIndex(-1);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
     // Load initial value
     useEffect(() => {
         if (value && value !== 0 && value !== -1) {
-            if (initialDisplayText) {
-                setInputValue(initialDisplayText);
-                setTooltipText(initialDisplayText);
-            }
-            else {
-                fetchAirportData(value);
-            }
+            fetchAirportData(value);
         }
-    }, [value, fetchAirportData, initialDisplayText]);
+    }, [value, fetchAirportData]);
     useEffect(() => {
         if (!value || value === 0 || value === -1) {
             setInputValue("");
@@ -9775,183 +8086,7 @@ const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder
     return (jsxs("div", { className: `cw-search-input ${className}`, style: {
             ...(width ? { width } : {}),
             ...(labelProps?.labelWidth ? { '--label-width': labelProps.labelWidth } : {})
-        }, "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 airport", variant: "icon", icon: "close", color: "neutral" })) : (jsx(CwIcon, { iconId: "control-tower" })) })] })] }), 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))) }) }))] }));
-};
-
-/**
- * API-backed crewmember search input for WinOps.
- *
- * Fetches matching crewmembers from the WinOps backend as the user types (debounced).
- * Renders results in a shared `cw-choice-dropdown` styled panel with keyboard navigation.
- * Supports pre-selecting a crewmember by numeric `value` (ID).
- *
- * Requires a running WinOps backend — set `cblConfig` to its base URL.
- *
- * @example
- * <CwFindCrewmember
- *   cblConfig="https://localhost:44300"
- *   handleChange={(id) => setCrewId(id)}
- *   labelProps={{ text: 'Crew Member' }}
- * />
- */
-const CwFindCrewmember = ({ handleChange, placeHolder = "Search crew…", required = false, cblConfig, className = "", value, disabled = false, initialDisplayText, labelProps, alignProps, width }) => {
-    const [inputValue, setInputValue] = useState("");
-    const [options, setOptions] = useState([]);
-    const [crewmembers, setCrewmembers] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
-    const [isInitialLoading, setIsInitialLoading] = useState(false);
-    const [showDropdown, setShowDropdown] = useState(false);
-    const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    const [tooltipText, setTooltipText] = useState("");
-    const inputRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const searchTimeoutRef = useRef();
-    const { panelRef, panelStyle, renderPanel } = useDropdownPortal({
-        anchorRef: wrapperRef,
-        isOpen: showDropdown && options.length > 0,
-        onClose: () => { setShowDropdown(false); setHighlightedIndex(-1); },
-    });
-    const getDisplayText = useCallback((crew) => {
-        return `${crew.threeLetterCode} - ${crew.lastName} ${crew.firstName}`;
-    }, []);
-    const fetchCrewmemberData = useCallback(async (crewmemberId) => {
-        setIsInitialLoading(true);
-        try {
-            const response = await fetch(`${cblConfig}controls/cblFindCrew/cblFindCrew/GetCrewmember?crewmemberId=${crewmemberId}`);
-            const result = await response.json();
-            const display = getDisplayText(result);
-            setCrewmembers([result]);
-            setOptions([{ value: result.id, text: display }]);
-            setInputValue(display);
-            setTooltipText(display);
-        }
-        catch (error) {
-            console.error("Error fetching crewmember data:", error);
-        }
-        finally {
-            setIsInitialLoading(false);
-        }
-    }, [cblConfig, getDisplayText]);
-    const searchCrewmembers = useCallback(async (searchText) => {
-        if (searchText.length < 2) {
-            setOptions([]);
-            setCrewmembers([]);
-            setShowDropdown(false);
-            return;
-        }
-        setIsLoading(true);
-        try {
-            const response = await fetch(`${cblConfig}controls/cblFindCrew/cblFindCrew/SearchCrewCodeName?text=${encodeURIComponent(searchText)}`);
-            const results = await response.json();
-            const newOptions = results.map(crew => ({
-                value: crew.id,
-                text: getDisplayText(crew)
-            }));
-            setOptions(newOptions);
-            setCrewmembers(results);
-            setShowDropdown(newOptions.length > 0);
-            setHighlightedIndex(-1);
-        }
-        catch (error) {
-            console.error("Error searching crewmembers:", error);
-            setOptions([]);
-            setCrewmembers([]);
-            setShowDropdown(false);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [cblConfig, getDisplayText]);
-    const debouncedSearch = useCallback((searchText) => {
-        if (searchTimeoutRef.current) {
-            window.clearTimeout(searchTimeoutRef.current);
-        }
-        searchTimeoutRef.current = window.setTimeout(() => {
-            searchCrewmembers(searchText);
-        }, 300);
-    }, [searchCrewmembers]);
-    const handleInputChange = (e) => {
-        const newValue = e.target.value;
-        setInputValue(newValue);
-        if (newValue !== inputValue) {
-            debouncedSearch(newValue);
-        }
-    };
-    const handleOptionSelect = (optionValue) => {
-        const selectedCrew = crewmembers.find(c => c.id === optionValue);
-        if (!selectedCrew)
-            return;
-        setShowDropdown(false);
-        const display = getDisplayText(selectedCrew);
-        setInputValue(display);
-        setTooltipText(display);
-        handleChange(optionValue);
-    };
-    const handleKeyDown = (e) => {
-        if (!showDropdown || options.length === 0)
-            return;
-        switch (e.key) {
-            case "ArrowDown":
-                e.preventDefault();
-                setHighlightedIndex(prev => prev < options.length - 1 ? prev + 1 : 0);
-                break;
-            case "ArrowUp":
-                e.preventDefault();
-                setHighlightedIndex(prev => prev > 0 ? prev - 1 : options.length - 1);
-                break;
-            case "Enter":
-                e.preventDefault();
-                if (highlightedIndex >= 0 && highlightedIndex < options.length) {
-                    handleOptionSelect(options[highlightedIndex].value);
-                }
-                break;
-            case "Escape":
-                setShowDropdown(false);
-                setHighlightedIndex(-1);
-                break;
-        }
-    };
-    useEffect(() => {
-        // Outside-click is now handled by useDropdownPortal
-    }, []);
-    useEffect(() => {
-        if (value && value !== 0 && value !== -1) {
-            if (initialDisplayText) {
-                setInputValue(initialDisplayText);
-                setTooltipText(initialDisplayText);
-            }
-            else {
-                fetchCrewmemberData(value);
-            }
-        }
-    }, [value, fetchCrewmemberData, initialDisplayText]);
-    useEffect(() => {
-        if (!value || value === 0 || value === -1) {
-            setInputValue("");
-            setTooltipText("");
-            setOptions([]);
-            setCrewmembers([]);
-        }
-    }, [value]);
-    const handleInputFocus = () => {
-        if (options.length > 0) {
-            setShowDropdown(true);
-        }
-    };
-    const handleClear = () => {
-        setInputValue("");
-        setTooltipText("");
-        setOptions([]);
-        setCrewmembers([]);
-        setShowDropdown(false);
-        handleChange(0);
-        inputRef.current?.focus();
-    };
-    const direction = alignProps?.flexDirection || "row";
-    return (jsxs("div", { className: `cw-search-input ${className}`, style: {
-            ...(width ? { width } : {}),
-            ...(labelProps?.labelWidth ? { '--label-width': labelProps.labelWidth } : {})
-        }, "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))) }) }))] }));
+        }, "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", 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 airport", variant: "icon", icon: "close", color: "neutral" })) : (jsx(CwIcon, { iconId: "control-tower" })) })] })] }), showDropdown && options.length > 0 && (jsx("div", { ref: dropdownRef, className: "cw-input-search-dropdown", role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { className: index === highlightedIndex ? "highlighted" : "", onClick: () => handleOptionSelect(option.value), onMouseDown: (e) => e.preventDefault(), 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, 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, CwCheckbox, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDateRangePicker, CwDateTimePicker, CwDateTimePickerCompact, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwReportModal, CwScheduler, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSuperScheduler, CwTable, CwTableGrouped, CwTabs, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltip, 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, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage, useSortableList };