@cwellt_software/cwellt-reactjs-lib 1.2.13 → 1.2.14

package/dist/index.cjs.js

@@ -4,14 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var client = require('react-dom/client');
 var reactDom = require('react-dom');
-var antd = require('antd');
 var Draggable = require('react-draggable');
 var moment = require('moment');
 var dateFns = require('date-fns');
 var locale = require('date-fns/locale');
 var reactDayPicker = require('react-day-picker');
 require('react-day-picker/dist/style.css');
-var lodashEs = require('lodash-es');
+var moment$1 = require('moment-timezone');
 var reactWindow = require('react-window');
 
 function _interopNamespaceDefault(e) {
@@ -83,10 +82,6 @@ function CwLabel(props) {
     return (jsxRuntime.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 (jsxRuntime.jsxs("div", { className: "cwelltTooltip", children: [jsxRuntime.jsx("div", { className: "cwelltTooltipTitle", style: CwelltTooltipProps.tooltipTitleStyle, children: jsxRuntime.jsx("span", { children: CwelltTooltipProps.tooltipTitle }) }), CwelltTooltipProps.children] }));
-}
-
 function colorToHSL(color) {
     const hexColor = colorToHEX(color);
     const hex = hexColor.replace('#', '');
@@ -238,7 +233,7 @@ const CwChip = ({ label, colorScheme = 'info', customColor, variant = 'soft', cl
         className,
         closable ? 'cw-chip-closable' : '',
     ].filter(Boolean).join(' ');
-    return (jsxRuntime.jsxs("span", { className: chipClassNames, "data-color-scheme": colorScheme, "data-variant": variant, style: chipStyle, children: [icon && jsxRuntime.jsx(CwIcon, { iconId: icon }), jsxRuntime.jsx("span", { children: label }), closable && (jsxRuntime.jsx("button", { className: "cw-chip-close-button", onClick: handleClose, "aria-label": "Remove", type: "button", children: jsxRuntime.jsx("span", { className: "cwi-icons cwi-close" }) }))] }));
+    return (jsxRuntime.jsxs("span", { className: chipClassNames, "data-color-scheme": colorScheme, "data-variant": variant, style: chipStyle, children: [icon && jsxRuntime.jsx(CwIcon, { iconId: icon }), label && jsxRuntime.jsx("span", { children: label }), closable && (jsxRuntime.jsx("button", { className: "cw-chip-close-button", onClick: handleClose, "aria-label": "Remove", type: "button", children: jsxRuntime.jsx("span", { className: "cwi-icons cwi-close" }) }))] }));
 };
 
 const CW_DEFAULT_MESSAGE_DURATION = 2000;
@@ -639,33 +634,33 @@ function CwLoadingSmall(CwelltLoadingAppointements) {
         jsxRuntime.jsx("div", {})) }));
 }
 
-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"};
+var styles$o = {"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 = 16;
+const margin$1 = 16;
 const defaultPosition = "right";
-const positionOrder = ['right', 'bottom', 'left', 'top'];
+const positionOrder$1 = ['right', 'bottom', 'left', 'top'];
 // Memoized utility functions to prevent recreation
-const calculatePositionForSide = (position, triggerRect, tooltipRect) => {
+const calculatePositionForSide$1 = (position, triggerRect, tooltipRect) => {
     switch (position) {
         case 'left':
             return {
                 top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
-                left: triggerRect.left - tooltipRect.width - margin
+                left: triggerRect.left - tooltipRect.width - margin$1
             };
         case 'right':
             return {
                 top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
-                left: triggerRect.right + margin
+                left: triggerRect.right + margin$1
             };
         case 'top':
             return {
-                top: triggerRect.top - tooltipRect.height - margin,
+                top: triggerRect.top - tooltipRect.height - margin$1,
                 left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
             };
         case 'bottom':
             return {
-                top: triggerRect.bottom + margin,
+                top: triggerRect.bottom + margin$1,
                 left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
             };
     }
@@ -706,26 +701,26 @@ const useTooltipPosition = (isVisible, containerRef, preferredPosition, tooltipC
         const triggerRect = containerRef.current.getBoundingClientRect();
         const tooltipRect = tooltipElement.getBoundingClientRect();
         // Try preferred position first
-        const position = calculatePositionForSide(preferredPosition, triggerRect, tooltipRect);
+        const position = calculatePositionForSide$1(preferredPosition, triggerRect, tooltipRect);
         const windowWidth = window.innerWidth;
         const windowHeight = window.innerHeight;
         // Quick bounds check
-        if (position.left >= margin &&
-            position.top >= margin &&
-            position.left + tooltipRect.width <= windowWidth - margin &&
-            position.top + tooltipRect.height <= windowHeight - margin) {
+        if (position.left >= margin$1 &&
+            position.top >= margin$1 &&
+            position.left + tooltipRect.width <= windowWidth - margin$1 &&
+            position.top + tooltipRect.height <= windowHeight - margin$1) {
             setTooltipState({ position, actualPosition: preferredPosition });
             return;
         }
         // Try other positions if preferred doesn't fit
-        for (const pos of positionOrder) {
+        for (const pos of positionOrder$1) {
             if (pos === preferredPosition)
                 continue;
-            const newPosition = calculatePositionForSide(pos, triggerRect, tooltipRect);
-            if (newPosition.left >= margin &&
-                newPosition.top >= margin &&
-                newPosition.left + tooltipRect.width <= windowWidth - margin &&
-                newPosition.top + tooltipRect.height <= windowHeight - margin) {
+            const newPosition = calculatePositionForSide$1(pos, triggerRect, tooltipRect);
+            if (newPosition.left >= margin$1 &&
+                newPosition.top >= margin$1 &&
+                newPosition.left + tooltipRect.width <= windowWidth - margin$1 &&
+                newPosition.top + tooltipRect.height <= windowHeight - margin$1) {
                 setTooltipState({ position: newPosition, actualPosition: pos });
                 return;
             }
@@ -743,19 +738,31 @@ const useTooltipPosition = (isVisible, containerRef, preferredPosition, tooltipC
     }, [updatePosition]);
     return tooltipState;
 };
-// Main component with optimizations
+/**
+ * Standalone tooltip component. Each instance manages its own portal,
+ * requiring no external dependencies or global setup.
+ *
+ * Suitable for low-density use cases with few tooltip instances.
+ * For high-density scenarios (e.g. schedulers, tables, lists),
+ * prefer CwTooltipNew which shares a single DOM portal for better performance.
+ *
+ * @remarks Not formally deprecated, but CwTooltipNew is now the recommended
+ * approach for new implementations. Cannot be deprecated yet due to potential use on projects such as Operon and Improve.
+ *
+ * @see CwTooltipNew
+ */
 const CwGenericTooltip = ({ children, content = null, position = defaultPosition, dissapearsWhenHover = false, hide = false, overlayStyle = {}, showDelay = 0, displayInline = false, }) => {
     const [isVisible, setIsVisible] = React.useState(false);
     const containerRef = React.useRef(null);
     const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => {
         setIsVisible(true);
     }, showDelay);
-    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$k["cw-generic-tooltip-content"]);
+    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$o["cw-generic-tooltip-content"]);
     // Memoize tooltip content creation
     const tooltipContent = React.useMemo(() => {
         if (hide || !isVisible || !content)
             return null;
-        return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$k["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, "data-inline": displayInline, style: {
+        return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$o["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, "data-inline": displayInline, style: {
                 position: 'fixed',
                 top: `${tooltipPosition.top}px`,
                 left: `${tooltipPosition.left}px`,
@@ -770,9 +777,310 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
         clearTooltipTimeout();
         setIsVisible(false);
     }, [clearTooltipTimeout]);
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$k["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, children: [tooltipContent, children] }));
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$o["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, children: [tooltipContent, children] }));
+};
+
+var styles$n = {"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 = client.createRoot(container);
+    root.render(jsxRuntime.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] = React.useState(currentState);
+    const [tooltipPosition, setTooltipPosition] = React.useState({ top: 0, left: 0 });
+    const [actualPosition, setActualPosition] = React.useState("right");
+    const [isPositioned, setIsPositioned] = React.useState(false);
+    const tooltipRef = React.useRef(null);
+    const [isMeasuring, setIsMeasuring] = React.useState(false);
+    // Register update callback
+    React.useEffect(() => {
+        const update = () => {
+            setState({ ...currentState });
+            if (!currentState.isVisible)
+                setIsMeasuring(false);
+        };
+        stateUpdateCallbacks.add(update);
+        return () => {
+            stateUpdateCallbacks.delete(update);
+        };
+    }, []);
+    // Function to calculate position
+    const calculatePosition = React.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
+    React.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)
+    React.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 reactDom.createPortal(jsxRuntime.jsx("div", { ref: tooltipRef, className: styles$n["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 = React.useRef(null);
+    const timeoutRef = React.useRef();
+    const handleMouseEnter = React.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 = React.useCallback(() => {
+        if (timeoutRef.current) {
+            window.clearTimeout(timeoutRef.current);
+        }
+        hideTooltip();
+    }, []);
+    // Cleanup on unmount to prevent memory leaks
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                window.clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    // Hide tooltip when mousedown / drag events
+    React.useEffect(() => {
+        const handleDocumentMouseDown = () => {
+            if (timeoutRef.current) {
+                window.clearTimeout(timeoutRef.current);
+            }
+            hideTooltip();
+        };
+        document.addEventListener("mousedown", handleDocumentMouseDown);
+        return () => {
+            document.removeEventListener("mousedown", handleDocumentMouseDown);
+        };
+    }, []);
+    React.useEffect(() => {
+        ensureTooltipManager();
+    }, []);
+    return (jsxRuntime.jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$n["cw-tooltip"], children: 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 = (jsxRuntime.jsx("button", { type: "button", className: buttonClass, ...buttonProps, "data-color": color, "aria-label": tooltipContent, children: variant === 'icon' ? null : (children ?? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && jsxRuntime.jsx(CwIcon, { iconId: icon }), text && jsxRuntime.jsx("strong", { children: text })] }))) }));
+    return tooltipContent ? (jsxRuntime.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.
@@ -786,10 +1094,6 @@ 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);
     };
@@ -811,13 +1115,12 @@ function CwModal(custModalProps) {
     };
     return (jsxRuntime.jsx("div", { children: custModalProps.modalState && (jsxRuntime.jsxs("div", { className: custModalProps.classNameModalOverlay + " cwelltModalOverlay", children: [jsxRuntime.jsx("div", { className: "cwelltModalOverlayBg", onClick: custModalProps.onCloseModal }), jsxRuntime.jsx(Draggable, { disabled: isModalDisabled, axis: "both", nodeRef: draggableRef, children: jsxRuntime.jsxs("div", { className: custModalProps.classNameModal + " cwelltContainerModal", ref: draggableRef, style: widthModalDef !== "40em" ? modalStyle.widthCustomStyle : modalStyle.widthDefStyle, children: [jsxRuntime.jsxs("div", { className: "cwelltModalHeader", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [jsxRuntime.jsx("div", { className: "cwelltModalTitle", children: custModalProps.titleModal }), jsxRuntime.jsx("button", { className: "cwelltBtnCloseModal", onClick: custModalProps.onCloseModal, children: jsxRuntime.jsx("span", { className: "cwelltCloseIcon" }) })] }), jsxRuntime.jsx("div", { className: "cwelltModalBody", children: jsxRuntime.jsx("div", { className: "cwelltContainerModalBody", style: { position: "relative" }, children: custModalProps.children }) }), isHide === false ? (
                             // [ false : show modal ]
-                            jsxRuntime.jsxs("div", { className: "cwelltModalFooter", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [jsxRuntime.jsx(antd.Tooltip, { placement: "bottom", title: "Save", color: "#368ee0", children: jsxRuntime.jsx("div", { className: "cwellt_flex cwellt_justify_center ", style: { width: "2em" }, children: jsxRuntime.jsx("button", { className: "cw-button-icon cwi-save", onClick: custModalProps.onSaveModal, form: custModalProps.formSaveModal, hidden: custModalProps.HideBtnModal, type: custModalProps.HtmlSubmitModal }) }) }), isShowcustButton === true ? (jsxRuntime.jsx(antd.Tooltip, { placement: "bottom", title: custModalProps.custButtonTitle, color: custModalProps.custColorButtonTooltip, children: jsxRuntime.jsx("div", { className: "cwellt_flex cwellt_justify_center", style: { width: "2em" }, children: jsxRuntime.jsx("button", { className: "cw-button-icon " +
-                                                    custModalProps.custButtonClassName, onClick: custModalProps.custButtonClick }) }) })) : (jsxRuntime.jsx("div", {}))] })) : (
+                            jsxRuntime.jsx("footer", { className: "legacy-modal-footer", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: jsxRuntime.jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: custModalProps.onSaveModal, form: custModalProps.formSaveModal, hidden: custModalProps.HideBtnModal, type: custModalProps.HtmlSubmitModal }) })) : (
                             // true [ do not show the modal ]
                             jsxRuntime.jsx("div", { style: { display: "none" } }))] }) })] })) }));
 }
 
-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"};
+var styles$m = {"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;
@@ -881,30 +1184,15 @@ function CwConfirmationPopup(props) {
             onCancel();
         }
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderChildren(), isOpen && (jsxRuntime.jsx("div", { className: styles$j.overlayPositioned, onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", { ref: popupRef, className: styles$j.popup, style: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderChildren(), isOpen && (jsxRuntime.jsx("div", { className: styles$m.overlayPositioned, onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", { ref: popupRef, className: styles$m.popup, style: {
                         position: 'absolute',
                         top: `${position.top}px`,
                         left: `${position.left}px`,
                         transform: 'none'
-                    }, children: [jsxRuntime.jsx("p", { className: styles$j.message, children: message }), jsxRuntime.jsxs("div", { className: styles$j.buttons, children: [jsxRuntime.jsx("button", { className: `${styles$j.button} ${styles$j.confirmButton}`, onClick: onConfirm, children: confirmText }), jsxRuntime.jsx("button", { className: `${styles$j.button} ${styles$j.cancelButton}`, onClick: onCancel, children: cancelText })] })] }) }))] }));
-}
-
-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 = (jsxRuntime.jsx("button", { type: "button", className: buttonClass, ...buttonProps, "data-color": color, "aria-label": tooltipContent, children: variant === 'icon' ? null : (children ?? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && jsxRuntime.jsx(CwIcon, { iconId: icon }), text && jsxRuntime.jsx("strong", { children: text })] }))) }));
-    return tooltipContent ? (jsxRuntime.jsx(CwGenericTooltip, { content: tooltipContent, position: tooltipPosition, displayInline: true, children: buttonElement })) : (buttonElement);
+                    }, children: [jsxRuntime.jsx("p", { className: styles$m.message, children: message }), jsxRuntime.jsxs("div", { className: styles$m.buttons, children: [jsxRuntime.jsx("button", { className: `${styles$m.button} ${styles$m.confirmButton}`, onClick: onConfirm, children: confirmText }), jsxRuntime.jsx("button", { className: `${styles$m.button} ${styles$m.cancelButton}`, onClick: onCancel, children: cancelText })] })] }) }))] }));
 }
 
-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"};
+var styles$l = {"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) => {
@@ -943,7 +1231,7 @@ const convertFromPx = (px, unit) => {
     }
 };
 const CwDialog = props => {
-    const { customFooter, customHeader, headline, width, height, dialogSize, scrim, onSave, onClose, hideFooter, children, open, autoReposition = false, ...domProps } = props;
+    const { customFooter, customHeader, headline, width, height, dialogSize, scrim, onSave, onClose, hideFooter, children, open, autoReposition = false, disableSave, ...domProps } = props;
     const dialogRef = React.useRef(null);
     const [isPressingScrim, setIsPressingScrim] = React.useState(false);
     const pressTimerRef = React.useRef(0);
@@ -980,9 +1268,13 @@ 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: window.document.body.clientWidth / 2 - initialWidthPx / 2,
-            y: window.document.body.clientHeight / 2 - initialEstimatedHeight / 2
+            x: Math.max(0, window.document.body.clientWidth / 2 - clampedWidth / 2),
+            y: Math.max(0, window.document.body.clientHeight / 2 - clampedHeight / 2)
         };
         return { initialDialogSize, initialPosition };
     }, [width, height, dialogSize]); // Only recalculate when these props change
@@ -991,6 +1283,7 @@ const CwDialog = props => {
     const [position, setPosition] = React.useState(initialSetup.initialPosition);
     const [size, setSize] = React.useState(initialSetup.initialDialogSize);
     const [dragStart, setDragStart] = React.useState({ x: 0, y: 0 });
+    const userDraggedRef = React.useRef(false);
     // scrim is true by default
     const hasScrim = scrim !== false;
     // Adjust position after the dialog is rendered when using autoHeight
@@ -1030,6 +1323,35 @@ 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;
+    React.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]);
     React.useEffect(() => {
         const handleMouseMove = (e) => {
             if (isDragging) {
@@ -1111,6 +1433,7 @@ const CwDialog = props => {
     }, [isDragging, resizeDirection, dragStart, position, size]);
     const handleMouseDown = React.useCallback((e) => {
         setIsDragging(true);
+        userDraggedRef.current = true;
         setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
     }, [position]);
     const handleResizeMouseDown = React.useCallback((direction) => (e) => {
@@ -1142,9 +1465,9 @@ const CwDialog = props => {
             }
         }
     }, [open]);
-    const header = React.useMemo(() => (jsxRuntime.jsxs("header", { onMouseDown: handleMouseDown, children: [jsxRuntime.jsx("span", { children: headline }), customHeader || (jsxRuntime.jsx("button", { className: styles$i["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
+    const header = React.useMemo(() => (jsxRuntime.jsxs("header", { onMouseDown: handleMouseDown, children: [jsxRuntime.jsx("span", { children: headline }), customHeader || (jsxRuntime.jsx("button", { className: styles$l["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
     const content = React.useMemo(() => (jsxRuntime.jsx("section", { children: children })), [children]);
-    const footer = React.useMemo(() => (jsxRuntime.jsx("footer", { children: customFooter || (jsxRuntime.jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: onSave, tooltipPosition: "top" })) })), [customFooter, onSave]);
+    const footer = React.useMemo(() => (jsxRuntime.jsx("footer", { children: customFooter || (jsxRuntime.jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: onSave, tooltipPosition: "top", disabled: disableSave })) })), [customFooter, onSave, disableSave]);
     const resizeHandles = React.useMemo(() => size.autoHeight
         ? [
             // Only horizontal handles if autoHeight is true
@@ -1171,7 +1494,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 = (jsxRuntime.jsx("div", { "data-has-scrim": hasScrim, className: styles$i["cw-dialog-main"], onMouseDown: handleScrimMouseDown, onMouseUp: handleScrimMouseUpOrLeave, onMouseLeave: handleScrimMouseUpOrLeave, "data-pressing": isPressingScrim, children: jsxRuntime.jsxs("dialog", { ...domProps, ref: dialogRef, style: {
+    const dialogContent = (jsxRuntime.jsx("div", { "data-has-scrim": hasScrim, className: styles$l["cw-dialog-main"], onMouseDown: handleScrimMouseDown, onMouseUp: handleScrimMouseUpOrLeave, onMouseLeave: handleScrimMouseUpOrLeave, "data-pressing": isPressingScrim, children: jsxRuntime.jsxs("dialog", { ...domProps, ref: dialogRef, style: {
                 left: `${position.x}px`,
                 top: `${position.y}px`,
                 width: displayDimensions.displayWidth,
@@ -1202,7 +1525,6 @@ const CwModalReportFunctional = (props) => {
 };
 
 class CwReportModal extends React__namespace.Component {
-    formRef = React__namespace.createRef();
     constructor(props) {
         super(props);
         this.state = {
@@ -1219,7 +1541,6 @@ class CwReportModal extends React__namespace.Component {
     }
     render() {
         return (jsxRuntime.jsx("div", { id: "modal-report-content", children: this.state.isModal === true ? (jsxRuntime.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" && (jsxRuntime.jsx("div", { style: { width: "100%", height: "100%", overflowX: "auto", overflowY: "auto" }, children: jsxRuntime.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" && (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("h1", { style: { marginLeft: "2em" }, children: [" ", "Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }) }))] })) : (jsxRuntime.jsxs("div", { children: [this.props.name !== "Empty.pdf" && (jsxRuntime.jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", width: "100%", height: "800px" })), this.props.name === "Empty.pdf" && (jsxRuntime.jsxs("div", { children: ["Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }))] })) }));
     }
@@ -1376,7 +1697,7 @@ function CwAlign(props) {
         }, children: props.children }));
 }
 
-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"};
+var styles$k = {"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
@@ -1400,11 +1721,11 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     // Construct class names using CSS modules
     const cardClassNames = [
         'cw-card',
-        styles$h.card,
+        styles$k.card,
         className,
-        clickable ? styles$h.clickable : '',
-        disabled ? styles$h.disabled : '',
-        isLoading ? styles$h.loading : '',
+        clickable ? styles$k.clickable : '',
+        disabled ? styles$k.disabled : '',
+        isLoading ? styles$k.loading : '',
     ].filter(Boolean).join(' ');
     // Handle click event when card is clickable
     const handleClick = () => {
@@ -1421,15 +1742,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 ? (jsxRuntime.jsxs("div", { className: styles$h.actions, children: [extraActions ?? null, onEdit && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
+    const ActionsComponent = hasActions && !disabled ? (jsxRuntime.jsxs("div", { className: styles$k.actions, children: [extraActions ?? null, onEdit && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
     return (jsxRuntime.jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && {
             role: 'button',
             tabIndex: 0,
             onClick: handleClick,
-        }), "data-variant": variant, "data-direction": direction, children: [hasHeader && (jsxRuntime.jsxs("header", { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: styles$h.headerContent, "data-alignment": alignment, children: [title && jsxRuntime.jsx("h5", { children: title }), subtitle && jsxRuntime.jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), jsxRuntime.jsx("div", { className: styles$h.content, children: children }), hasFooter && (jsxRuntime.jsxs("footer", { children: [hasChips && (jsxRuntime.jsx("div", { className: styles$h.footerTags, children: chips.map((chip, index) => (jsxRuntime.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 && (jsxRuntime.jsx("div", { className: styles$h.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (jsxRuntime.jsx("div", { className: styles$h.loadingOverlay, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
+        }), "data-variant": variant, "data-direction": direction, children: [hasHeader && (jsxRuntime.jsxs("header", { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: styles$k.headerContent, "data-alignment": alignment, children: [title && jsxRuntime.jsx("h5", { children: title }), subtitle && jsxRuntime.jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), jsxRuntime.jsx("div", { className: styles$k.content, children: children }), hasFooter && (jsxRuntime.jsxs("footer", { children: [hasChips && (jsxRuntime.jsx("div", { className: styles$k.footerTags, children: chips.map((chip, index) => (jsxRuntime.jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$k.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsxRuntime.jsx("div", { className: styles$k.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (jsxRuntime.jsx("div", { className: styles$k.loadingOverlay, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
 };
 
-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"};
+var styles$j = {"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] = React.useState(1);
@@ -1463,10 +1784,10 @@ function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', default
         '--card-width': `${defaultCardWidth}px`,
         '--card-gap': `${cardGap}px`
     };
-    return (jsxRuntime.jsxs("div", { ...htmlProps, children: [sortOptions.length > 0 && (jsxRuntime.jsxs("div", { className: styles$g.sortControls, children: [jsxRuntime.jsx("label", { htmlFor: "cardlist-sort-select", children: "Sort by:" }), jsxRuntime.jsx("select", { id: "cardlist-sort-select", value: sortKey, onChange: (e) => handleSortChange(e.target.value), className: styles$g.sortSelect, children: sortOptions.map(option => (jsxRuntime.jsx("option", { value: option.key, children: option.label }, option.key))) }), jsxRuntime.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 ? (jsxRuntime.jsx("div", { className: styles$g.loading, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsxRuntime.jsx("div", { className: styles$g.emptyState, children: emptyState || jsxRuntime.jsx("p", { children: "No items to display" }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `${styles$g.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsxRuntime.jsx("div", { className: styles$g.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles$g.pagination, children: [jsxRuntime.jsx("button", { disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)), className: "cw-button-icon cwi-chevron-left" }), jsxRuntime.jsxs("span", { className: styles$g.pageInfo, children: [currentPage, " of ", totalPages] }), jsxRuntime.jsx("button", { disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), className: "cw-button-icon cwi-chevron-right" })] }))] }))] }));
+    return (jsxRuntime.jsxs("div", { ...htmlProps, children: [sortOptions.length > 0 && (jsxRuntime.jsxs("div", { className: styles$j.sortControls, children: [jsxRuntime.jsx("label", { htmlFor: "cardlist-sort-select", children: "Sort by:" }), jsxRuntime.jsx("select", { id: "cardlist-sort-select", value: sortKey, onChange: (e) => handleSortChange(e.target.value), className: styles$j.sortSelect, children: sortOptions.map(option => (jsxRuntime.jsx("option", { value: option.key, children: option.label }, option.key))) }), jsxRuntime.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 ? (jsxRuntime.jsx("div", { className: styles$j.loading, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsxRuntime.jsx("div", { className: styles$j.emptyState, children: emptyState || jsxRuntime.jsx("p", { children: "No items to display" }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `${styles$j.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsxRuntime.jsx("div", { className: styles$j.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles$j.pagination, children: [jsxRuntime.jsx("button", { disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)), className: "cw-button-icon cwi-chevron-left" }), jsxRuntime.jsxs("span", { className: styles$j.pageInfo, children: [currentPage, " of ", totalPages] }), jsxRuntime.jsx("button", { disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), className: "cw-button-icon cwi-chevron-right" })] }))] }))] }));
 }
 
-var styles$f = {"cw-accordion":"cw-accordion-module_cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module_cw-accordion-body__xlI8b"};
+var styles$i = {"cw-accordion":"cw-accordion-module_cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module_cw-accordion-body__xlI8b"};
 
 /**
  *
@@ -1483,7 +1804,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
         setVisible_accordionBody(!isVisible_accordionBody);
     };
     // #endregion
-    return (jsxRuntime.jsxs("div", { className: styles$f["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxRuntime.jsxs("header", { onClick: () => showAccordionBody(), children: [jsxRuntime.jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsxRuntime.jsx("button", { className: "cw-button-icon" })] }), jsxRuntime.jsx("div", { className: styles$f["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
+    return (jsxRuntime.jsxs("div", { className: styles$i["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxRuntime.jsxs("header", { onClick: () => showAccordionBody(), children: [jsxRuntime.jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsxRuntime.jsx("button", { className: "cw-button-icon" })] }), jsxRuntime.jsx("div", { className: styles$i["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
 }
 
 /**
@@ -1555,12 +1876,12 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *
  * @returns React component
  */
-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, }) {
+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] = React.useState(1);
     const [expandedRowKey, setExpandedRowKey] = React.useState(null);
     const [sortConfig, setSortConfig] = React.useState({
         key: null,
-        direction: "asc",
+        direction: "asc"
     });
     const [localItemsPerPage, setLocalItemsPerPage] = React.useState(pageSizeOptions[0]);
     const [columnWidths, setColumnWidths] = React.useState(() => columns.reduce((acc, col) => {
@@ -1585,7 +1906,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
         onExpand?.(item);
     }, [rowKey, onExpand]);
     const handleSort = React.useCallback((columnKey) => {
-        setSortConfig((prev) => {
+        setSortConfig(prev => {
             if (prev.key !== columnKey)
                 return { key: columnKey, direction: "asc" };
             if (prev.direction === "asc")
@@ -1612,7 +1933,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                 if (typeof aVal === "string" && typeof bVal === "string") {
                     const comparison = aVal.localeCompare(bVal, undefined, {
                         sensitivity: "base",
-                        numeric: true,
+                        numeric: true
                     });
                     return comparison * (sortConfig.direction === "asc" ? 1 : -1);
                 }
@@ -1628,7 +1949,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
             return;
         }
         const itemKey = item[rowKey];
-        setSelectedKeys((prev) => {
+        setSelectedKeys(prev => {
             const newSet = new Set(prev);
             if (rowSelection?.type === "single") {
                 // Single mode: only one row selected
@@ -1649,7 +1970,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                     newSet.add(itemKey);
                 }
             }
-            const selectedRows = sortedData.filter((item) => newSet.has(item[rowKey]));
+            const selectedRows = sortedData.filter(item => newSet.has(item[rowKey]));
             // Run after render to avoid "Cannot update a component while rendering another component"
             setTimeout(() => {
                 rowSelection?.onChange?.(Array.from(newSet), selectedRows);
@@ -1678,7 +1999,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
         const startWidth = e.target.parentElement?.offsetWidth || 0;
         const onMouseMove = (moveEvent) => {
             const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50); // min 50px
-            setColumnWidths((prev) => ({ ...prev, [key]: newWidth }));
+            setColumnWidths(prev => ({ ...prev, [key]: newWidth }));
         };
         const onMouseUp = () => {
             window.removeEventListener("mousemove", onMouseMove);
@@ -1691,7 +2012,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
         if (stickyHeader || scrollHeight) {
             return {
                 maxHeight: scrollHeight ?? 300,
-                overflowY: "auto",
+                overflowY: "auto"
             };
         }
         return {}; // no height or scroll
@@ -1707,32 +2028,40 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
         if (!paginatedData || paginatedData.length === 0) {
             return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: getColSpan(), className: "cw-table-cell-empty", style: { textAlign: "center" }, children: textNoData }) }));
         }
-        return paginatedData.map((item) => {
+        return paginatedData.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 ?? "");
+            const dynamicClassName = typeof classNameRow === "function"
+                ? classNameRow(item)
+                : classNameRow ?? "";
             return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.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 && (jsxRuntime.jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsxRuntime.jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey ? "cwi-chevron-down" : "cwi-chevron-right"}` }) })), columns.map((col) => (jsxRuntime.jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex]) : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsxRuntime.jsx("tr", { className: "cw-table-row-expanded", children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
+                        }, children: [expandedRowRender && (jsxRuntime.jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsxRuntime.jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey
+                                        ? "cwi-chevron-down"
+                                        : "cwi-chevron-right"}` }) })), columns.map(col => (jsxRuntime.jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex] ?? "") : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsxRuntime.jsx("tr", { className: "cw-table-row-expanded", children: jsxRuntime.jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
         });
     };
-    return (jsxRuntime.jsxs("div", { id: id, className: `cw-table-container ${classNameContainer ?? ""}`, style: style, children: [jsxRuntime.jsx("div", { style: scrollContainerStyle, children: jsxRuntime.jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { style: stickyHeader ? { position: "sticky", top: 0, background: "white", zIndex: 2 } : undefined, children: jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("th", {}), columns.map((col) => (jsxRuntime.jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${sortConfig.key === col.dataIndex ? sortConfig.direction : ""}`.trim(), style: {
+    return (jsxRuntime.jsxs("div", { id: id, className: `cw-table-container ${classNameContainer ?? ""}`, style: style, children: [jsxRuntime.jsx("div", { style: scrollContainerStyle, children: jsxRuntime.jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { style: stickyHeader
+                                ? { position: "sticky", top: 0, background: "white", zIndex: 2 }
+                                : undefined, children: jsxRuntime.jsxs("tr", { children: [expandedRowRender && jsxRuntime.jsx("th", {}), columns.map(col => (jsxRuntime.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,
+                                                maxWidth: columnWidths[col.key] ?? col.width
                                             }),
-                                        }, children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxRuntime.jsx("span", { children: col.title }), col.sortable && col.dataIndex && (jsxRuntime.jsx(CwIcon, { size: "large", iconId: sortConfig.key !== col.dataIndex
+                                        }, children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxRuntime.jsx("span", { children: col.title }), col.sortable && col.dataIndex && (jsxRuntime.jsx(CwIcon, { style: { fontSize: "1.25em" }, iconId: sortConfig.key !== col.dataIndex
                                                             ? "sortable"
                                                             : sortConfig.direction === "asc"
                                                                 ? "sortable-asc"
-                                                                : "sortable-desc" }))] }), jsxRuntime.jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsxRuntime.jsx("tbody", { children: renderTableBody() })] }) }), pagination && totalPages > 1 && (jsxRuntime.jsxs("footer", { className: "cw-table-pagination", children: [jsxRuntime.jsx("button", { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left-double", title: "First" }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left", title: "Previous" }), jsxRuntime.jsx("input", { type: "text", inputMode: "numeric", value: currentPage, onChange: (e) => {
+                                                                : "sortable-desc" }))] }), jsxRuntime.jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsxRuntime.jsx("tbody", { children: renderTableBody() })] }) }), pagination && data.length > pageSizeOptions[0] && (jsxRuntime.jsxs("footer", { className: "cw-table-pagination", children: [jsxRuntime.jsx("button", { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left-double", title: "First" }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left", title: "Previous" }), jsxRuntime.jsx("input", { type: "text", inputMode: "numeric", value: currentPage, onChange: (e) => {
                             const value = parseInt(e.target.value, 10);
                             if (!isNaN(value))
                                 handlePageChange(value);
@@ -1741,66 +2070,225 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                             if (isNaN(value) || value < 1 || value > totalPages) {
                                 handlePageChange(1);
                             }
-                        }, min: 1, max: totalPages }), jsxRuntime.jsxs("span", { children: ["of ", totalPages] }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsxRuntime.jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, children: pageSizeOptions.map((size) => (jsxRuntime.jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
+                        }, min: 1, max: totalPages }), jsxRuntime.jsxs("span", { children: ["of ", totalPages] }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsxRuntime.jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, children: pageSizeOptions.map(size => (jsxRuntime.jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
 }
 
+var styles$h = {"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"};
+
 /**
- * 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.
+ * Hook that provides state management for CwSortableTable.
  *
- * @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" }
- * ];
+ * 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
  *
+ * @param initialItems - The initial array of items to display
  *
- * 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);
+ * @example
+ * ```tsx
+ * const { items, hasChanges, handleReorder, handleSave, handleDiscard } = useSortableTable(data);
+ * ```
+ */
+function useSortableTable(initialItems) {
+    const [items, setItems] = React.useState(initialItems);
+    const [originalItems, setOriginalItems] = React.useState(initialItems);
+    const [hasChanges, setHasChanges] = React.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 = React.useRef(initialItems);
+    React.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 = React.useCallback((newItems) => {
+        setItems(newItems);
+        setHasChanges(true);
+    }, []);
+    const handleSave = async (onSave) => {
+        await onSave(items);
+        setOriginalItems(items);
+        setHasChanges(false);
+    };
+    const handleDiscard = React.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 }) => (jsxRuntime.jsx("tr", { className: styles$h.dropIndicator, "aria-hidden": true, children: jsxRuntime.jsx("td", { colSpan: colSpan, children: jsxRuntime.jsx("div", {}) }) }));
+// ─── Loading skeleton ─────────────────────────────────────────────────────────
+const LoadingRows = ({ colSpan }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 4 }).map((_, i) => (jsxRuntime.jsx("tr", { className: styles$h.skeletonRow, children: jsxRuntime.jsx("td", { colSpan: colSpan, children: jsxRuntime.jsx("div", { className: styles$h.skeleton }) }) }, i))) }));
+// ─── Component ────────────────────────────────────────────────────────────────
+/**
+ * CwSortableTable
  *
- * // 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]);
+ * 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.
  *
- * <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"
- * />
+ * When the user reorders rows, changes are held locally until they
+ * click Save. A save bar appears automatically when there are pending changes.
  *
- * @returns React component
+ * 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 CwTableServerSide({ columns, data, totalItems, 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, onChange, serverState, }) {
-    const [internalState, setInternalState] = React.useState({
-        page: 1,
-        pageSize: pageSizeOptions[0],
+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] = React.useState(null);
+    const [dropIndicatorIndex, setDropIndicatorIndex] = React.useState(null);
+    const [lastValidDropIndex, setLastValidDropIndex] = React.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 jsxRuntime.jsx(LoadingRows, { colSpan: totalCols });
+        }
+        if (!items || items.length === 0) {
+            return (jsxRuntime.jsx("tr", { children: jsxRuntime.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 (jsxRuntime.jsxs(React.Fragment, { children: [dropIndicatorIndex === index && (jsxRuntime.jsx(DropIndicatorRow, { colSpan: totalCols })), jsxRuntime.jsxs("tr", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, className: isDragging ? styles$h.dragging : "", children: [showHandle && (jsxRuntime.jsx("td", { className: "cw-table-col-action", children: jsxRuntime.jsx(CwIcon, { iconId: "grip-dots", color: "neutral", style: { opacity: 0.75 } }) })), columns.map(col => (jsxRuntime.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 && (jsxRuntime.jsx(DropIndicatorRow, { colSpan: totalCols }))] }, String(key)));
+        });
+    };
+    // ── Render ──────────────────────────────────────────────────────────────
+    return (jsxRuntime.jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, children: [jsxRuntime.jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [showHandle && jsxRuntime.jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsxRuntime.jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsxRuntime.jsx("tbody", { children: renderBody() })] }), hasChanges && (jsxRuntime.jsxs("footer", { className: styles$h.saveBar, children: [jsxRuntime.jsx(CwButton, { variant: "outline", color: "neutral", icon: "undo", text: discardLabel, onClick: handleDiscard }), jsxRuntime.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], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, rowSelection, onChange, serverState, }) {
+    const [internalState, setInternalState] = React.useState({
+        page: 1,
+        pageSize: pageSizeOptions[0],
         sortKey: null,
         sortDirection: null,
     });
@@ -1949,7 +2437,7 @@ function CwTableServerSide({ columns, data, totalItems, pagination = false, page
                         }, min: 1, max: totalPages }), jsxRuntime.jsxs("span", { children: ["of ", totalPages] }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(state.page + 1), disabled: state.page === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(totalPages), disabled: state.page === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsxRuntime.jsx("select", { value: state.pageSize, onChange: handleItemsPerPageChange, children: pageSizeOptions.map((size) => (jsxRuntime.jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
 }
 
-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"};
+var styles$g = {"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)
@@ -1999,7 +2487,7 @@ function CwTabs(CwTabsProps) {
     const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
         ? { minWidth: CwTabsProps.tabsListWidth }
         : undefined;
-    return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, className: styles$e['cw-tabs'], style: CwTabsProps.style, "data-tabs-position": position, children: [jsxRuntime.jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (jsxRuntime.jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, children: [jsxRuntime.jsx(TabIcon, { icon: tab.icon }), tab.title, tab.badge !== undefined && (jsxRuntime.jsx("span", { className: styles$e['badge'], style: tab.badgeColor ? { backgroundColor: tab.badgeColor, color: getContrastColor(tab.badgeColor) } : undefined, children: tab.badge }))] }, tab.key))) }), jsxRuntime.jsx("div", { className: styles$e['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
+    return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, className: styles$g['cw-tabs'] + (CwTabsProps.className ? ` ${CwTabsProps.className}` : "") + "", style: CwTabsProps.style, "data-tabs-position": position, children: [jsxRuntime.jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (jsxRuntime.jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, children: [jsxRuntime.jsx(TabIcon, { icon: tab.icon }), tab.title, tab.badge !== undefined && (jsxRuntime.jsx("span", { className: styles$g['badge'], style: tab.badgeColor ? { backgroundColor: tab.badgeColor, color: getContrastColor(tab.badgeColor) } : undefined, children: tab.badge }))] }, tab.key))) }), jsxRuntime.jsx("div", { className: styles$g['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
 }
 
 /**
@@ -2026,6 +2514,48 @@ const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detail
     return (jsxRuntime.jsx("div", { className: "cw-expandable", children: jsxRuntime.jsxs("details", { ref: myRef, ...detailsProps, children: [jsxRuntime.jsx("summary", { children: briefing }), children && jsxRuntime.jsx("section", { children: children })] }) }));
 };
 
+var styles$f = {"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] = React.useState(initialWidth);
+    const [isResizing, setIsResizing] = React.useState(false);
+    const containerRef = React.useRef(null);
+    const handleMouseDown = React.useCallback((e) => {
+        if (!resizable)
+            return;
+        e.preventDefault();
+        setIsResizing(true);
+    }, [resizable]);
+    React.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$f['cw-master-detail'], className].filter(Boolean).join(' ');
+    return (jsxRuntime.jsxs("div", { id: id, ref: containerRef, className: rootClassName, style: style, children: [jsxRuntime.jsxs("aside", { style: { width: masterWidth, minWidth: masterWidth }, children: [showSearch && (jsxRuntime.jsx("search", { children: jsxRuntime.jsx("input", { type: "text", placeholder: searchPlaceholder, onChange: (e) => onSearch?.(e.target.value) }) })), masterHeader && (jsxRuntime.jsx("header", { children: masterHeader })), jsxRuntime.jsx("ul", { children: items.map((item) => (jsxRuntime.jsx("li", { "data-selected": item.key === selectedKey, "data-disabled": item.disabled, onClick: () => onSelect?.(item.key), children: item.content }, item.key))) }), masterFooter && (jsxRuntime.jsx("footer", { children: masterFooter }))] }), resizable && (jsxRuntime.jsx("div", { className: styles$f.resizer, "data-resizing": isResizing, onMouseDown: handleMouseDown })), jsxRuntime.jsx("section", { className: styles$f.detail, children: selectedKey && detailContent
+                    ? detailContent
+                    : (jsxRuntime.jsx("div", { className: styles$f['detail-empty'], children: emptyDetail ?? 'Select an item to view details' })) })] }));
+};
+
 /**
  * A component for displaying key-value pairs in a definition list format
  * Used for read-only display of structured data
@@ -2047,9 +2577,9 @@ const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "
                         : emptyValue })] }, item.key))) }));
 };
 
-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"};
+var styles$e = {"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, }) {
+function CwSortableList({ items, onReorder, renderItem, className = '', movedItems = new Set(), emptyMessage = "No elements to show", readOnly = false, maxHeight = "300px", }) {
     const [draggedItem, setDraggedItem] = React.useState(null);
     const [dropIndicatorIndex, setDropIndicatorIndex] = React.useState(null);
     const [lastValidDropIndex, setLastValidDropIndex] = React.useState(null);
@@ -2110,15 +2640,15 @@ function CwSortableList({ items, onReorder, renderItem, className = '', movedIte
         }
     };
     if (items.length === 0) {
-        return (jsxRuntime.jsx("div", { className: `${styles$d.sortableList} ${styles$d.emptyState} ${className}`, children: jsxRuntime.jsx("div", { className: styles$d.emptyMessage, children: emptyMessage }) }));
+        return (jsxRuntime.jsx("div", { className: `${styles$e.sortableList} ${styles$e.emptyState} ${className}`, children: jsxRuntime.jsx("div", { className: styles$e.emptyMessage, children: emptyMessage }) }));
     }
-    return (jsxRuntime.jsx("div", { className: `${styles$d.sortableList} ${className}`, children: items.map((item, index) => {
+    return (jsxRuntime.jsx("div", { className: `${styles$e.sortableList} ${className}`, style: { maxHeight }, children: items.map((item, index) => {
             const { title, extraContent, actions, showHandle = true, expandedContent } = renderItem(item);
             const isDragging = draggedItem?.id === item.id;
             const isMoved = movedItems.has(item.id);
             const canExpand = Boolean(expandedContent);
             const isExpanded = expandedItems.has(item.id);
-            return (jsxRuntime.jsxs(React.Fragment, { children: [dropIndicatorIndex === index && jsxRuntime.jsx("div", { className: styles$d.dropIndicator }), jsxRuntime.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: [jsxRuntime.jsxs("header", { children: [canExpand ? (jsxRuntime.jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsxRuntime.jsx("div", { className: styles$d.sortableHandle, children: jsxRuntime.jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxRuntime.jsxs("div", { className: styles$d.sortableContent, children: [jsxRuntime.jsx("div", { className: styles$d.sortableTitle, children: title }), extraContent && jsxRuntime.jsx("div", { className: styles$d.sortableExtraContent, children: extraContent })] }), jsxRuntime.jsx("div", { className: styles$d.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsxRuntime.jsx("div", { className: styles$d.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsxRuntime.jsx("div", { className: styles$d.dropIndicator }))] }, item.id));
+            return (jsxRuntime.jsxs(React.Fragment, { children: [dropIndicatorIndex === index && jsxRuntime.jsx("div", { className: styles$e.dropIndicator }), jsxRuntime.jsxs("div", { className: `${styles$e.sortableItem} ${isDragging ? styles$e.dragging : ''} ${isMoved ? styles$e.moved : ''} ${readOnly ? styles$e.readOnly : ''}`, draggable: !readOnly, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [jsxRuntime.jsxs("header", { children: [canExpand ? (jsxRuntime.jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsxRuntime.jsx("div", { className: styles$e.sortableHandle, children: jsxRuntime.jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxRuntime.jsxs("div", { className: styles$e.sortableContent, children: [jsxRuntime.jsx("div", { className: styles$e.sortableTitle, children: title }), extraContent && jsxRuntime.jsx("div", { className: styles$e.sortableExtraContent, children: extraContent })] }), jsxRuntime.jsx("div", { className: styles$e.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsxRuntime.jsx("div", { className: styles$e.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsxRuntime.jsx("div", { className: styles$e.dropIndicator }))] }, item.id));
         }) }));
 }
 
@@ -2295,7 +2825,7 @@ function CwFileUpload(fileUploadProps) {
     return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "row", children: [jsxRuntime.jsx("input", { className: "cw-button", type: "file", accept: fileUploadProps.accept, readOnly: true, placeholder: "No file selected...", onChange: handleFileChange }), previewURL && (jsxRuntime.jsx("div", { className: "row", children: jsxRuntime.jsx("img", { src: previewURL, alt: "Preview", style: { maxWidth: "200px", maxHeight: "200px" } }) }))] }), error && jsxRuntime.jsx("div", { className: "row error", children: error }), jsxRuntime.jsx("div", { className: "row", children: jsxRuntime.jsxs("label", { children: ["Please note: File/image has to be in ", fileUploadProps.acceptString, " format", fileUploadProps.sizeString && `, ${fileUploadProps.sizeString}`] }) })] }));
 }
 
-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"};
+var styles$d = {"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 = React.useRef(null);
@@ -2446,12 +2976,12 @@ function CwFileUploadMultiple(fileUploadProps) {
             }
         }
     };
-    return (jsxRuntime.jsxs("div", { className: `${styles$c.fileUploadContainer} ${fileUploadProps.className}`, children: [jsxRuntime.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 ? (jsxRuntime.jsxs("div", { className: `${styles$c.uploadArea} ${fileUploadProps.disabled ? styles$c.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsxRuntime.jsx(CwIcon, { iconId: "upload" }), jsxRuntime.jsx("p", { className: `${styles$c.uploadTitle}`, children: fileUploadProps.disabled ? 'Upload disabled' : 'Click to upload or drag and drop' }), jsxRuntime.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 ? (jsxRuntime.jsxs("div", { className: styles$c.filesContainer, children: [jsxRuntime.jsxs("div", { className: styles$c.fileItem, children: [jsxRuntime.jsxs("div", { className: styles$c.fileIcon, children: [jsxRuntime.jsx(CwIcon, { iconId: "page" }), jsxRuntime.jsx("span", { className: styles$c.fileExtension, children: getFileExtension(existingFile) })] }), jsxRuntime.jsx("div", { className: styles$c.fileInfo, children: jsxRuntime.jsx("p", { className: styles$c.fileName, children: existingFile }) }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => {
+    return (jsxRuntime.jsxs("div", { className: `${styles$d.fileUploadContainer} ${fileUploadProps.className}`, children: [jsxRuntime.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$d.hiddenInput }), selectedFiles.length === 0 && !existingFile ? (jsxRuntime.jsxs("div", { className: `${styles$d.uploadArea} ${fileUploadProps.disabled ? styles$d.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsxRuntime.jsx(CwIcon, { iconId: "upload" }), jsxRuntime.jsx("p", { className: `${styles$d.uploadTitle}`, children: fileUploadProps.disabled ? 'Upload disabled' : 'Click to upload or drag and drop' }), jsxRuntime.jsxs("p", { className: `${styles$d.uploadSubtitle}`, children: [fileUploadProps.accept ? `Accepted files: ${fileUploadProps.accept}` : 'All file types accepted', !fileUploadProps.multiple && ' (Single file only)'] })] })) : selectedFiles.length === 0 && existingFile ? (jsxRuntime.jsxs("div", { className: styles$d.filesContainer, children: [jsxRuntime.jsxs("div", { className: styles$d.fileItem, children: [jsxRuntime.jsxs("div", { className: styles$d.fileIcon, children: [jsxRuntime.jsx(CwIcon, { iconId: "page" }), jsxRuntime.jsx("span", { className: styles$d.fileExtension, children: getFileExtension(existingFile) })] }), jsxRuntime.jsx("div", { className: styles$d.fileInfo, children: jsxRuntime.jsx("p", { className: styles$d.fileName, children: existingFile }) }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => {
                                     setExistingFile(undefined);
                                     if (fileUploadProps.onSelect) {
                                         fileUploadProps.onSelect(null);
                                     }
-                                }, disabled: fileUploadProps.disabled, className: styles$c.smallButton })] }), jsxRuntime.jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxRuntime.jsxs("div", { className: styles$c.filesContainer, children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxRuntime.jsxs("small", { className: styles$c.filesCount, children: [selectedFiles.length, " file", selectedFiles.length !== 1 ? 's' : '', " selected"] }), jsxRuntime.jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: "Clear all" })] }), selectedFiles.map((file, index) => (jsxRuntime.jsxs("div", { className: styles$c.fileItem, children: [jsxRuntime.jsxs("div", { className: styles$c.fileIcon, children: [jsxRuntime.jsx(CwIcon, { iconId: "page" }), jsxRuntime.jsx("span", { className: styles$c.fileExtension, children: getFileExtension(file.name) })] }), jsxRuntime.jsxs("div", { className: styles$c.fileInfo, children: [jsxRuntime.jsx("p", { className: styles$c.fileName, children: file.name }), jsxRuntime.jsxs("p", { className: styles$c.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$c.smallButton })] }, index))), fileUploadProps.multiple && (jsxRuntime.jsx(CwButton, { text: "Add More Files", icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsxRuntime.jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
+                                }, disabled: fileUploadProps.disabled, className: styles$d.smallButton })] }), jsxRuntime.jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxRuntime.jsxs("div", { className: styles$d.filesContainer, children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxRuntime.jsxs("small", { className: styles$d.filesCount, children: [selectedFiles.length, " file", selectedFiles.length !== 1 ? 's' : '', " selected"] }), jsxRuntime.jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: "Clear all" })] }), selectedFiles.map((file, index) => (jsxRuntime.jsxs("div", { className: styles$d.fileItem, children: [jsxRuntime.jsxs("div", { className: styles$d.fileIcon, children: [jsxRuntime.jsx(CwIcon, { iconId: "page" }), jsxRuntime.jsx("span", { className: styles$d.fileExtension, children: getFileExtension(file.name) })] }), jsxRuntime.jsxs("div", { className: styles$d.fileInfo, children: [jsxRuntime.jsx("p", { className: styles$d.fileName, children: file.name }), jsxRuntime.jsxs("p", { className: styles$d.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$d.smallButton })] }, index))), fileUploadProps.multiple && (jsxRuntime.jsx(CwButton, { text: "Add More Files", icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsxRuntime.jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
 }
 
 function CwInput(CwInputProps) {
@@ -2494,7 +3024,7 @@ function CwDigit(props) {
     return (jsxRuntime.jsx("div", { className: "cw-input-text", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("input", { type: "number", ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
 }
 
-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"};
+var styles$c = {"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] = React.useState({ r: 255, g: 255, b: 255 });
@@ -2697,15 +3227,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 (jsxRuntime.jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsxRuntime.jsx("div", { className: styles$b.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsxRuntime.jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsxRuntime.jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsxRuntime.jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxRuntime.jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "R:" }), jsxRuntime.jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "G:" }), jsxRuntime.jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "B:" }), jsxRuntime.jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxRuntime.jsxs("div", { className: styles$b.colorPickerInteractiveArea, children: [jsxRuntime.jsx("div", { className: styles$b.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsxRuntime.jsx("div", { className: styles$b.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxRuntime.jsxs("div", { className: styles$b.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxRuntime.jsxs("div", { className: styles$b.colorAreaOverlay, children: [jsxRuntime.jsx("div", { className: styles$b.hueBackground, style: { backgroundColor: hueHex } }), jsxRuntime.jsx("div", { className: styles$b.whiteGradient }), jsxRuntime.jsx("div", { className: styles$b.blackGradient })] }), jsxRuntime.jsx("div", { className: styles$b.colorAreaCursor, style: {
+    return (jsxRuntime.jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsxRuntime.jsx("div", { className: styles$c.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsxRuntime.jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsxRuntime.jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsxRuntime.jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxRuntime.jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "R:" }), jsxRuntime.jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "G:" }), jsxRuntime.jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "B:" }), jsxRuntime.jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxRuntime.jsxs("div", { className: styles$c.colorPickerInteractiveArea, children: [jsxRuntime.jsx("div", { className: styles$c.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsxRuntime.jsx("div", { className: styles$c.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxRuntime.jsxs("div", { className: styles$c.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxRuntime.jsxs("div", { className: styles$c.colorAreaOverlay, children: [jsxRuntime.jsx("div", { className: styles$c.hueBackground, style: { backgroundColor: hueHex } }), jsxRuntime.jsx("div", { className: styles$c.whiteGradient }), jsxRuntime.jsx("div", { className: styles$c.blackGradient })] }), jsxRuntime.jsx("div", { className: styles$c.colorAreaCursor, style: {
                                     left: `${hsv.s}%`,
                                     top: `${100 - hsv.v}%`
                                 } })] })] })] }));
 };
 
-var styles$a = {"selectColor":"cw-input-color-module_selectColor__DTo3V","disabled":"cw-input-color-module_disabled__O1fK5","colorDropdown":"cw-input-color-module_colorDropdown__pX2bc"};
+var styles$b = {"container":"cw-input-color-module_container__x7gpk","selectColor":"cw-input-color-module_selectColor__DTo3V","disabled":"cw-input-color-module_disabled__O1fK5","readOnly":"cw-input-color-module_readOnly__HL-Bz","colorDropdown":"cw-input-color-module_colorDropdown__pX2bc"};
 
-const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, width = '4rem', height = '2rem' }) => {
+const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, readOnly = false, width = '4rem', height = '2rem', labelProps, layoutProps, }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const containerRef = React.useRef(null);
     const dropdownRef = React.useRef(null);
@@ -2754,7 +3284,7 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
         };
     }, [isOpen]);
     const handleToggle = () => {
-        if (disabled)
+        if (disabled || readOnly)
             return;
         setIsOpen(prev => !prev);
     };
@@ -2836,11 +3366,11 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
                 break;
         }
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$a.selectColor} ${disabled ? styles$a.disabled : ''}`, style: {
+    return (jsxRuntime.jsxs("div", { className: `cw-input-color ${styles$b.container}`, "data-direction": layoutProps?.direction ?? "row", "data-align": layoutProps?.align, children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps })), jsxRuntime.jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$b.selectColor} ${disabled ? styles$b.disabled : ''} ${readOnly ? styles$b.readOnly : ''}`, style: {
                     width,
                     height,
                     backgroundColor: value,
-                }, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && reactDom.createPortal(jsxRuntime.jsx("div", { ref: dropdownRef, className: styles$a.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsxRuntime.jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
+                }, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-readonly": readOnly, role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && reactDom.createPortal(jsxRuntime.jsx("div", { ref: dropdownRef, className: styles$b.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsxRuntime.jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
 };
 
 /**
@@ -2859,15 +3389,20 @@ 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, ...inputProps } = props;
+    const { alignProps, buttonProps, iconProps, labelProps, className, feedback, ...inputProps } = props;
+    const feedbackMessages = feedback
+        ? Array.isArray(feedback) ? feedback : [feedback]
+        : [];
     const containerClassName = className
         ? `cw-input-text ${className}`
         : "cw-input-text";
-    return (jsxRuntime.jsx("div", { className: containerClassName, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("div", { className: "cw-input-button", children: [jsxRuntime.jsx("input", { type: props.type ?? "text", ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] })] }) }));
+    const flexDirection = alignProps?.flexDirection ?? "row";
+    return (jsxRuntime.jsxs("div", { className: containerClassName, "data-direction": flexDirection, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("div", { className: "cw-input-button", children: [jsxRuntime.jsx("input", { type: props.type ?? "text", ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
 }
 
 /**
@@ -2902,8 +3437,13 @@ function CwInputNumber(CwInputNumberProps) {
 }
 
 function CwTextArea(props) {
-    const { alignProps, buttonProps, iconProps, labelProps, resize, ...textareaProps } = props;
-    return (jsxRuntime.jsx("div", { className: "cw-text-area", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("textarea", { ...textareaProps, itemProp: textareaProps.required === true ? "required" : "", style: { ...textareaProps.style, resize: resize } }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
+    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 (jsxRuntime.jsxs("div", { className: "cw-text-area", ...dataDirection, style: style, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("textarea", { ...textareaProps, itemProp: textareaProps.required === true ? "required" : "", style: { resize: resize } }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
 }
 
 /**
@@ -3333,7 +3873,7 @@ const CwImageArea = React.forwardRef((props, ref) => {
 });
 CwImageArea.displayName = "CwImageArea";
 
-var styles$9 = {"cw-weekday-selector":"cw-weekday-selector-module_cw-weekday-selector__Iz4GZ"};
+var styles$a = {"cw-weekday-selector":"cw-weekday-selector-module_cw-weekday-selector__Iz4GZ"};
 
 /**
  * This class represents a week where days can be selected or unselected
@@ -3473,9 +4013,17 @@ const CwWeekdaySelector = ({ value = "", onChange, disabled = false }) => {
         setSelectedDays(newWeekdays);
         onChange?.(newWeekdays.toString());
     };
-    return (jsxRuntime.jsx("div", { className: styles$9["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsxRuntime.jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
+    return (jsxRuntime.jsx("div", { className: styles$a["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsxRuntime.jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
 };
 
+var styles$9 = {"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 (jsxRuntime.jsx("div", { className: `cw-check ${styles$9["check-container"]}${className ? ` ${className}` : ''}`, children: jsxRuntime.jsxs("label", { "data-direction": alignment, children: [jsxRuntime.jsx("input", { type: "checkbox", ...inputProps }), displayText && (jsxRuntime.jsxs("span", { className: "cw-icon-text", children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), displayText] }))] }) }));
+}
+
 function CwCheckbox(CwCheckboxProps) {
     const handleChange = (e) => {
         CwCheckboxProps.onChange?.(e.target.checked);
@@ -3491,6 +4039,23 @@ function CwCheckbox(CwCheckboxProps) {
                 : "cw_checkboxContent cwellt_flex_row" + " " + CwCheckboxProps.classNameContainer, style: CwCheckboxProps.styleContainer, children: [inputElement, CwCheckboxProps.labelName ? (jsxRuntime.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 (jsxRuntime.jsxs("div", { className: `cw-checkbox-group ${styles$9["checkbox-group-container"]}${className ? ` ${className}` : ''}`, ...dataDirection, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsx("div", { className: `${optionsAlignment === "row" ? "cw-flex-column cw-gap-small" : "cw-flex-row cw-flex-wrap"}`, children: options.map((option) => (jsxRuntime.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) => (jsxRuntime.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;
@@ -3540,10 +4105,13 @@ function CwOption(props) {
  * </CwSelect>
  */
 function CwSelect(props) {
-    const { alignProps, labelProps, buttonProps, iconProps, placeholder, children, style, ...selectProps } = props;
-    const flexDirection = alignProps?.flexDirection;
-    const dataDirection = flexDirection ? { 'data-direction': flexDirection } : {};
-    return (jsxRuntime.jsx("div", { className: "cw-select", ...dataDirection, style: style, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("select", { ...selectProps, children: [placeholder && jsxRuntime.jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
+    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 };
+    return (jsxRuntime.jsxs("div", { className: `cw-select${className ? ` ${className}` : ''}`, ...dataDirection, style: style, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("div", { className: "cw-flex-row cw-gap-small cw-flex-grow", children: [jsxRuntime.jsxs("select", { ...selectProps, children: [placeholder && jsxRuntime.jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-type": feedbackItem.type, children: feedbackItem.message }, index)))] }));
 }
 
 function CwDropdownFilter(props) {
@@ -3577,7 +4145,7 @@ 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 (jsxRuntime.jsx("li", { className: styles$8["cw-multifilter-tag"], id: ID, "data-value": Value, "data-category": Category, "data-selected": !!Selected, title: Name, onClick: () => {
+    return (jsxRuntime.jsx("li", { className: styles$8["cw-multifilter-tag"], id: ID, "data-value": Value, "data-category": Category, "data-selected": !!Selected, title: props.tooltip ?? Name, onClick: () => {
             if (Selectable)
                 props.OnSelect?.(props);
         }, children: jsxRuntime.jsx(CwChip, { label: Name, colorScheme: "custom", customColor: backgroundColor, variant: isOutlineMode ? "outline" : "soft", closable: Removable, onClose: () => props.OnRemove?.(props), 
@@ -3835,14 +4403,23 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
         }, children: [jsxRuntime.jsxs("div", { onClick: handleDivClick, className: styles$7["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-primary)", outlineOffset: "-2px" } : {}, children: [jsxRuntime.jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (React.createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsxRuntime.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":
+                                        case "Tab": {
                                             if (inputTextValue.trim().length > 0 && filteredTags.size > 0) {
-                                                const foundTag = Array.from(filteredTags)[0];
+                                                const input = inputTextValue.trim().toLowerCase();
+                                                const tagsArr = Array.from(filteredTags);
+                                                let foundTag = tagsArr.find(tag => tag.Name.trim().toLowerCase() === input);
+                                                if (!foundTag) {
+                                                    foundTag = tagsArr.find(tag => tag.Name.trim().toLowerCase().startsWith(input));
+                                                }
+                                                if (!foundTag) {
+                                                    foundTag = tagsArr[0];
+                                                }
                                                 if (foundTag) {
                                                     addTag(foundTag);
                                                 }
                                             }
                                             break;
+                                        }
                                         case "Backspace": {
                                             if (inputTextValue === "" && selectedTags.size > 0) {
                                                 removeTag(Array.from(selectedTags).toReversed()[0].ID);
@@ -3872,7 +4449,22 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
                                     : {
                                         backgroundColor: getColor(category).primary,
                                         color: getColor(category).onPrimary,
-                                    }, onClick: () => handleClickCategory(category), children: category }, category)))] }), jsxRuntime.jsx("ul", { children: Array.from(filteredTags).map((props) => (jsxRuntime.jsx(CwMultiFilterTag, { ...props, Selectable: true, Removable: false, Selected: Array.from(selectedTags).some(p => p.ID === props.ID), OnSelect: () => {
+                                    }, onClick: () => handleClickCategory(category), children: category }, category)))] }), jsxRuntime.jsx("ul", { children: Array.from(filteredTags)
+                            .sort((a, b) => {
+                            const input = inputTextValue.trim().toLowerCase();
+                            const aName = a.Name.trim().toLowerCase();
+                            const bName = b.Name.trim().toLowerCase();
+                            if (aName === input && bName !== input)
+                                return -1;
+                            if (bName === input && aName !== input)
+                                return 1;
+                            if (aName.startsWith(input) && !bName.startsWith(input))
+                                return -1;
+                            if (bName.startsWith(input) && !aName.startsWith(input))
+                                return 1;
+                            return 0;
+                        })
+                            .map((props) => (jsxRuntime.jsx(CwMultiFilterTag, { ...props, Selectable: true, Removable: false, Selected: Array.from(selectedTags).some(p => p.ID === props.ID), OnSelect: () => {
                                 if (Array.from(selectedTags).some(p => p.ID === props.ID))
                                     removeTag(props.ID);
                                 else
@@ -4316,12 +4908,100 @@ function CwBtnDelete({ cw_btnOnclick, cw_btn_disabled, onClick, disabled, ...res
 
 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.
+ */
+function usePickerPopup({ anchorRef, isOpen, onClose, position = "left-bottom" }) {
+    const popupRef = React.useRef(null);
+    const [style, setStyle] = React.useState({ position: "fixed", top: 0, left: 0, zIndex: 1000 });
+    const reposition = React.useCallback(() => {
+        const anchor = anchorRef.current;
+        const popup = popupRef.current;
+        if (!anchor || !popup)
+            return;
+        const rect = anchor.getBoundingClientRect();
+        const popupRect = popup.getBoundingClientRect();
+        // Determine vertical placement
+        const preferTop = position.includes("top");
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const popupH = popupRect.height || 300; // fallback for first render
+        let top;
+        if (preferTop && spaceAbove >= popupH) {
+            top = rect.top - popupH;
+        }
+        else if (!preferTop && spaceBelow >= popupH + 4) {
+            top = rect.bottom + 4;
+        }
+        else {
+            // Flip if preferred side doesn't fit
+            top = spaceBelow >= popupH + 4 ? rect.bottom + 4 : rect.top - popupH;
+        }
+        // Determine horizontal placement
+        let left;
+        if (position.includes("right")) {
+            left = rect.right - (popupRect.width || rect.width);
+        }
+        else {
+            left = rect.left;
+        }
+        // Clamp to viewport
+        left = Math.max(4, Math.min(left, window.innerWidth - (popupRect.width || 200) - 4));
+        top = Math.max(4, top);
+        setStyle({ position: "fixed", top, left, zIndex: 1000 });
+    }, [anchorRef, position]);
+    // Reposition on open + observe scroll/resize on all ancestors
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        reposition();
+        // Re-measure after the popup renders to get its actual size
+        requestAnimationFrame(reposition);
+        const handleUpdate = () => reposition();
+        window.addEventListener("resize", handleUpdate);
+        window.addEventListener("scroll", handleUpdate, true); // capture phase catches all scrollable ancestors
+        return () => {
+            window.removeEventListener("resize", handleUpdate);
+            window.removeEventListener("scroll", handleUpdate, true);
+        };
+    }, [isOpen, reposition]);
+    // Close on outside click — checks both anchor and popup
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleMouseDown = (e) => {
+            const target = e.target;
+            if (anchorRef.current?.contains(target) ||
+                popupRef.current?.contains(target))
+                return;
+            onClose();
+        };
+        document.addEventListener("mousedown", handleMouseDown);
+        return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [isOpen, onClose, anchorRef]);
+    const renderPopup = React.useCallback((children) => {
+        if (!isOpen)
+            return null;
+        return reactDom.createPortal(children, document.body);
+    }, [isOpen]);
+    return { popupRef, popupStyle: style, renderPopup };
+}
+
 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] = React.useState(false);
     const [inputValue, setInputValue] = React.useState("");
     const containerRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const prevValueRef = React.useRef(undefined);
+    const handleClose = React.useCallback(() => setIsOpen(false), []);
+    const { popupRef, popupStyle, renderPopup } = usePickerPopup({
+        anchorRef: wrapperRef,
+        isOpen,
+        onClose: handleClose,
+        position: popupPosition,
+    });
     // Parse date from string based on format
     const parseDate = React.useCallback((dateString, formatStr) => {
         try {
@@ -4404,20 +5084,6 @@ function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabl
             }
         }
     }, [value, displayFormat]);
-    // Close calendar when clicking outside
-    React.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 = React.useCallback((date) => {
         onChange(date);
         setIsOpen(false);
@@ -4493,7 +5159,7 @@ function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabl
         ...(maxDate ? [{ after: maxDate }] : []),
         ...(disabledMatcher ? [disabledMatcher] : []),
     ], [disabledDates, minDate, maxDate, disabledMatcher]);
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) }), isOpen && (jsxRuntime.jsxs("div", { className: styles$4.pickerPopup, "data-position": popupPosition, children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "single", selected: value || undefined, defaultMonth: defaultMonth || value || undefined, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, modifiers: {
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsxRuntime.jsx(reactDayPicker.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",
@@ -4777,9 +5443,20 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
     const [inputToValue, setInputToValue] = React.useState("");
     const [focusedInput, setFocusedInput] = React.useState();
     const containerRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
     const inputFromRef = React.useRef(null);
     const inputToRef = React.useRef(null);
     const prevValueRef = React.useRef(undefined);
+    const handleClose = React.useCallback(() => {
+        setIsOpen(false);
+        setFocusedInput(undefined);
+    }, []);
+    const { popupRef, popupStyle, renderPopup } = usePickerPopup({
+        anchorRef: wrapperRef,
+        isOpen,
+        onClose: handleClose,
+        position: popupPosition,
+    });
     // Calculate presets to render
     const presetsToRender = React.useMemo(() => {
         let presets = [];
@@ -4888,21 +5565,6 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
             }
         }
     }, [value, displayFormat]);
-    // Close calendar when clicking outside
-    React.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 = React.useCallback((range, // El rango sugerido por react-day-picker
     selectedDay) => {
         let newRange;
@@ -5123,7 +5785,7 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
         }
         return undefined;
     }, [value]);
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: rangeStyles.rangeWrapper, children: [jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.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' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), jsxRuntime.jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.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' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), isOpen && (jsxRuntime.jsxs("div", { className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, "data-position": popupPosition, children: [showPresets && presetsToRender.length > 0 && (jsxRuntime.jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsxRuntime.jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, numberOfMonths: numberOfMonths, defaultMonth: defaultMonth || value?.from || undefined, modifiers: {
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.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' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), jsxRuntime.jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.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' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, style: popupStyle, children: [showPresets && presetsToRender.length > 0 && (jsxRuntime.jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsxRuntime.jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsxRuntime.jsx(reactDayPicker.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",
@@ -5139,8 +5801,16 @@ function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelP
     const [isOpen, setIsOpen] = React.useState(false);
     const [inputValue, setInputValue] = React.useState("");
     const containerRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const selectedItemRef = React.useRef(null);
+    const handleClose = React.useCallback(() => setIsOpen(false), []);
+    const { popupRef, popupStyle, renderPopup } = usePickerPopup({
+        anchorRef: wrapperRef,
+        isOpen,
+        onClose: handleClose,
+        position: popupPosition,
+    });
     // Sync input value with prop value
     React.useEffect(() => {
         if (value) {
@@ -5168,20 +5838,6 @@ function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelP
         return options;
     };
     const timeOptions = generateTimeOptions();
-    // Close dropdown when clicking outside
-    React.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
     React.useEffect(() => {
         if (isOpen && selectedItemRef.current) {
@@ -5292,13 +5948,40 @@ function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelP
         return (jsxRuntime.jsx("div", { className: `cw-timepicker cw-timepicker-native ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsx("div", { className: styles$4.pickerWrapper, children: jsxRuntime.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 (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-timepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.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 && (jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", icon: "close", color: "neutral", onClick: handleClear, tabIndex: -1, "aria-label": "Clear time" })) : (jsxRuntime.jsx(CwIcon, { iconId: "clock" })) })), isOpen && (jsxRuntime.jsx("div", { className: `${styles$4.pickerPopup} ${timeStyles.timePickerPopup}`, "data-position": popupPosition, children: jsxRuntime.jsx("div", { className: timeStyles.timePickerList, children: timeOptions.map((time) => {
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-timepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsxRuntime.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 && (jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", icon: "close", color: "neutral", onClick: handleClear, tabIndex: -1, "aria-label": "Clear time" })) : (jsxRuntime.jsx(CwIcon, { iconId: "clock" })) })), renderPopup(jsxRuntime.jsx("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${timeStyles.timePickerPopup}`, style: popupStyle, children: jsxRuntime.jsx("div", { className: timeStyles.timePickerList, children: timeOptions.map((time) => {
                                     const isSelected = time === value;
                                     return (jsxRuntime.jsx("button", { ref: isSelected ? selectedItemRef : null, type: "button", className: isSelected ? timeStyles.selected : "", onClick: () => handleTimeSelect(time), children: time }, time));
                                 }) }) }))] })] }) }));
 }
 
-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, }) {
+/**
+ * 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 m = moment$1(date).utcOffset(timezoneOffset * 60);
+    return new Date(m.year(), m.month(), m.date());
+}
+/**
+ * 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) {
+    return moment$1(date).utcOffset(timezoneOffset * 60).format("HH:mm");
+}
+
+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, timezoneOffset, }) {
     // ========================================
     // PROPS NORMALIZATION
     // ========================================
@@ -5330,10 +6013,32 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
     const normalizedMinDateTime = React.useMemo(() => normalizeDateTime(minDateTime, 'minDateTime'), [minDateTime, normalizeDateTime]);
     const normalizedMaxDateTime = React.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 = React.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 = React.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] = React.useState(value);
-    const [selectedTime, setSelectedTime] = React.useState(value ? `${value.getHours().toString().padStart(2, "0")}:${value.getMinutes().toString().padStart(2, "0")}` : undefined);
+    const [selectedDate, setSelectedDate] = React.useState(value ? toDisplayDate(value) : undefined);
+    const [selectedTime, setSelectedTime] = React.useState(value ? toDisplayTime(value) : undefined);
     // Track previous value to detect external changes
     const prevValueRef = React.useRef(undefined);
     // ========================================
@@ -5348,28 +6053,24 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
     const combineDateTime = React.useCallback((date, time) => {
         if (!date)
             return undefined;
-        // 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;
+        const [hours, minutes] = (time ?? "00:00").split(':').map(Number);
+        let m;
+        if (timezoneOffset !== undefined) {
+            // Interpretamos los valores como pertenecientes al offset especificado
+            m = moment$1.utc([date.getFullYear(), date.getMonth(), date.getDate(), hours, minutes]);
+            m.utcOffset(timezoneOffset * 60, true);
         }
-        // Parse time and combine with date
-        const [hours, minutes] = time.split(':').map(Number);
-        const combined = new Date(date);
-        combined.setHours(hours, minutes, 0, 0);
+        else {
+            m = moment$1(date).hours(hours).minutes(minutes).seconds(0).milliseconds(0);
+        }
+        const combined = m.toDate();
         // Validate against min/max datetime
         if (normalizedMinDateTime && combined < normalizedMinDateTime)
             return undefined;
         if (normalizedMaxDateTime && combined > normalizedMaxDateTime)
             return undefined;
         return combined;
-    }, [normalizedMinDateTime, normalizedMaxDateTime]);
+    }, [normalizedMinDateTime, normalizedMaxDateTime, timezoneOffset]);
     /**
      * Calculate dynamic time restrictions based on selected date
      *
@@ -5383,33 +6084,38 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
     const calculateTimeRestrictions = React.useCallback((selectedDate) => {
         if (!selectedDate)
             return { minTime, maxTime };
-        // Normalize selected date to date-only (ignore time component)
-        const selectedDateOnly = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate());
+        // selectedDate is already a "display date" (shifted for timezone),
+        // so we compare using local date fields via moment (no utcOffset needed here)
+        const mSelected = moment$1(selectedDate);
         let calculatedMinTime = minTime;
         let calculatedMaxTime = maxTime;
         // If selected date matches minDateTime date, restrict minimum time
         if (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}`;
+            const mMin = timezoneOffset !== undefined
+                ? moment$1(getDateInOffset(normalizedMinDateTime, timezoneOffset))
+                : moment$1(normalizedMinDateTime);
+            if (mSelected.isSame(mMin, 'day')) {
+                calculatedMinTime = timezoneOffset !== undefined
+                    ? getTimeInOffset(normalizedMinDateTime, timezoneOffset)
+                    : moment$1(normalizedMinDateTime).format("HH:mm");
             }
         }
         // If selected date matches maxDateTime date, restrict maximum time
         if (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}`;
+            const mMax = timezoneOffset !== undefined
+                ? moment$1(getDateInOffset(normalizedMaxDateTime, timezoneOffset))
+                : moment$1(normalizedMaxDateTime);
+            if (mSelected.isSame(mMax, 'day')) {
+                calculatedMaxTime = timezoneOffset !== undefined
+                    ? getTimeInOffset(normalizedMaxDateTime, timezoneOffset)
+                    : moment$1(normalizedMaxDateTime).format("HH:mm");
             }
         }
         return {
             minTime: calculatedMinTime,
             maxTime: calculatedMaxTime
         };
-    }, [normalizedMinDateTime, normalizedMaxDateTime, minTime, maxTime]);
+    }, [normalizedMinDateTime, normalizedMaxDateTime, minTime, maxTime, timezoneOffset]);
     // Calculate current time restrictions based on selected date
     // Recalculates whenever selectedDate or the calculation function changes
     const timeRestrictions = React.useMemo(() => calculateTimeRestrictions(selectedDate), [selectedDate, calculateTimeRestrictions]);
@@ -5429,15 +6135,15 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
         if (currentTime !== prevTime) {
             prevValueRef.current = value;
             if (value) {
-                setSelectedDate(value);
-                setSelectedTime(`${value.getHours().toString().padStart(2, "0")}:${value.getMinutes().toString().padStart(2, "0")}`);
+                setSelectedDate(toDisplayDate(value));
+                setSelectedTime(toDisplayTime(value));
             }
             else {
                 setSelectedDate(undefined);
                 setSelectedTime(undefined);
             }
         }
-    }, [value]);
+    }, [value, toDisplayDate, toDisplayTime]);
     // ========================================
     // EVENT HANDLERS
     // ========================================
@@ -5506,13 +6212,17 @@ 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
     // ========================================
-    return (jsxRuntime.jsx("div", { className: `cw-datetimepicker cw-datetimepicker-separate ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [jsxRuntime.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 }), jsxRuntime.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 && (jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", onClick: handleNowClick, disabled: disabled, title: "Set to current date and time", text: "Now" }))] })] }) }));
+    // Shift min/max dates for CwDatePicker display (it uses local timezone internally)
+    const displayMinDate = React.useMemo(() => normalizedMinDateTime && timezoneOffset !== undefined
+        ? getDateInOffset(normalizedMinDateTime, timezoneOffset)
+        : normalizedMinDateTime, [normalizedMinDateTime, timezoneOffset]);
+    const displayMaxDate = React.useMemo(() => normalizedMaxDateTime && timezoneOffset !== undefined
+        ? getDateInOffset(normalizedMaxDateTime, timezoneOffset)
+        : normalizedMaxDateTime, [normalizedMaxDateTime, timezoneOffset]);
+    return jsxRuntime.jsx("div", { className: `cw-datetimepicker cw-datetimepicker-separate ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [jsxRuntime.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 }), jsxRuntime.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 && (jsxRuntime.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"};
@@ -5523,9 +6233,17 @@ function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, di
     const [selectedDate, setSelectedDate] = React.useState(value);
     const [selectedTime, setSelectedTime] = React.useState("");
     const containerRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const timeListRef = React.useRef(null);
     const prevValueRef = React.useRef(value);
+    const handleClose = React.useCallback(() => setIsOpen(false), []);
+    const { popupRef, popupStyle, renderPopup } = usePickerPopup({
+        anchorRef: wrapperRef,
+        isOpen,
+        onClose: handleClose,
+        position: popupPosition,
+    });
     // Generate time options based on interval - memoized
     const timeOptions = React.useMemo(() => {
         const options = [];
@@ -5618,20 +6336,6 @@ function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, di
             }
         }
     }, [value]);
-    // Close popup when clicking outside
-    React.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
     React.useEffect(() => {
         if (isOpen && selectedTime && timeListRef.current) {
@@ -5680,1231 +6384,88 @@ function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, di
         setSelectedDate(undefined);
         setSelectedTime("");
     }, [onChange]);
-    const handleInputClick = React.useCallback(() => {
-        if (!disabled) {
-            setIsOpen(true);
-        }
-    }, [disabled]);
-    const handleInputChange = React.useCallback((e) => {
-        const newValue = e.target.value;
-        setInputValue(newValue);
-        // Try to parse the full datetime string: dd.MM.yyyy HH:mm
-        if (newValue.length >= 16) {
-            validateAndSetDateTime(newValue);
-        }
-        else if (newValue === "") {
-            onChange(undefined);
-            setSelectedDate(undefined);
-            setSelectedTime("");
-        }
-    }, [validateAndSetDateTime, onChange]);
-    const handleInputBlur = React.useCallback(() => {
-        // Try to parse if there's text
-        if (inputValue && inputValue.trim() !== "") {
-            const parsed = parseDateTime(inputValue);
-            if (parsed && !isNaN(parsed.getTime())) {
-                const isValid = (!minDateTime || parsed >= minDateTime) &&
-                    (!maxDateTime || parsed <= maxDateTime);
-                if (isValid) {
-                    onChange(parsed);
-                    const dateStr = dateFns.format(parsed, "dd.MM.yyyy", { locale: locale.enGB });
-                    const timeStr = dateFns.format(parsed, "HH:mm", { locale: locale.enGB });
-                    setInputValue(`${dateStr} ${timeStr}`);
-                    setSelectedDate(parsed);
-                    setSelectedTime(timeStr);
-                    return;
-                }
-            }
-        }
-        // Sync with current value
-        if (value) {
-            const dateStr = dateFns.format(value, "dd.MM.yyyy", { locale: locale.enGB });
-            const timeStr = dateFns.format(value, "HH:mm", { locale: locale.enGB });
-            setInputValue(`${dateStr} ${timeStr}`);
-        }
-        else {
-            setInputValue("");
-        }
-    }, [inputValue, parseDateTime, minDateTime, maxDateTime, onChange, value]);
-    const handleInputKeyDown = React.useCallback((e) => {
-        if (e.key === "Enter") {
-            e.preventDefault();
-            inputRef.current?.blur();
-            setIsOpen(false);
-        }
-        else if (e.key === "Escape") {
-            setIsOpen(false);
-            inputRef.current?.blur();
-        }
-    }, []);
-    const handleNowClick = React.useCallback(() => {
-        const now = new Date();
-        // Check if now is within allowed range
-        const isNowValid = (!minDateTime || now >= minDateTime) &&
-            (!maxDateTime || now <= maxDateTime);
-        if (isNowValid) {
-            onChange(now);
-            setIsOpen(false);
-        }
-    }, [minDateTime, maxDateTime, onChange]);
-    // Memoize disabled days
-    const disabledDays = React.useMemo(() => [
-        ...(disabledDates || []),
-        ...(minDateTime ? [{ before: minDateTime }] : []),
-        ...(maxDateTime ? [{ after: maxDateTime }] : []),
-        ...(disabledMatcher ? [disabledMatcher] : []),
-    ], [disabledDates, minDateTime, maxDateTime, disabledMatcher]);
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-datetimepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.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" } }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear datetime" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar-time" })) }), isOpen && (jsxRuntime.jsxs("div", { className: `${styles$4.pickerPopup} ${compactStyles.compactPopup}`, "data-position": popupPosition, children: [jsxRuntime.jsxs("div", { className: compactStyles.calendarWrapper, children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, defaultMonth: selectedDate, disabled: disabledDays, numberOfMonths: numberOfMonths, modifiers: {
-                                                today: new Date(),
-                                            }, modifiersClassNames: {
-                                                today: "rdp-day-today",
-                                            } }), showTodayButton && (jsxRuntime.jsx("footer", { className: "cw-flex-row cw-align-center-center", children: jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", icon: "check-big", onClick: handleNowClick, text: "Now" }) }))] }), jsxRuntime.jsxs("div", { className: compactStyles.timeWrapper, children: [jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx(CwIcon, { iconId: "clock", size: "medium" }), jsxRuntime.jsx("span", { children: "Time" })] }), jsxRuntime.jsx("div", { ref: timeListRef, className: `${timeStyles.timePickerList} ${compactStyles.compactTimeList}`, children: timeOptions.map((time) => {
-                                                const isSelected = time === selectedTime;
-                                                return (jsxRuntime.jsx("button", { type: "button", className: isSelected ? timeStyles.selected : "", onClick: () => handleTimeSelect(time), children: time }, time));
-                                            }) })] })] }))] })] }) }));
-}
-
-const ResourcesTitleList$1 = ({ resources, canBePinned, includesPinned, onCrewPinning, onClickResourceContextMenu, ResourceTitleComponent }) => {
-    return (jsxRuntime.jsx("td", { className: "resourceArea", style: { width: "100px" }, children: resources.map((r, _i) => (jsxRuntime.jsxs("div", { className: "resource CwelltFunctionDescription", style: { height: r.maxTop }, children: [(canBePinned || includesPinned) && (jsxRuntime.jsx(PinButton$1, { canBePinned: canBePinned, resource: r, onCrewPinning: onCrewPinning })), jsxRuntime.jsx(ResourceTitleComponent, { resource: r, handleOnClickResourceContextMenu: (e) => {
-                        if (onClickResourceContextMenu) {
-                            onClickResourceContextMenu(e, r);
-                        }
-                    } })] }, r.id.toString()))) }));
-};
-const PinButton$1 = ({ canBePinned, resource, onCrewPinning }) => {
-    const buttonProps = canBePinned
-        ? {
-            id: "cbl_pinL",
-            onClick: () => onCrewPinning(resource, ""),
-            children: jsxRuntime.jsx("span", { className: "cbl_pin", style: { visibility: "visible" } })
-        }
-        : {
-            id: "cbl_pinLess45deg",
-            onClick: () => onCrewPinning(resource, "remove"),
-            children: jsxRuntime.jsx("span", { className: "cbl_pinLess45deg cbl_pin", style: { color: "black", visibility: "visible" } })
-        };
-    return jsxRuntime.jsx("button", { className: "cw-button-icon cw-icon-pin", ...buttonProps });
-};
-
-const doubleClickOnResource$1 = (props, resource) => {
-    if (props.scheduler_handleDblClickOnResourceInScheduler) {
-        props.scheduler_handleDblClickOnResourceInScheduler(resource);
-    }
-};
-
-let CblDragAndDrop$2 = class CblDragAndDrop {
-    fromId;
-    toId;
-    data;
-    droppedOnDate;
-    resizeFromStart;
-    resizeFromEnd;
-    isCtrlKey;
-    constructor(fromId, toId, data, droppedOnDate = null, resizeFromStart = null, resizeFromEnd = null, isCtrlKey = null) {
-        this.fromId = fromId;
-        this.toId = toId;
-        this.data = data;
-        this.droppedOnDate = droppedOnDate;
-        this.resizeFromStart = resizeFromStart;
-        this.resizeFromEnd = resizeFromEnd;
-        this.isCtrlKey = isCtrlKey;
-    }
-};
-
-const BIRTHDATE$1 = 15;
-const NOT_WORKING$1 = 16;
-const REST_TIME$1 = 10;
-const MAX_FLIGHT_DUTY_PERIOD$1 = 11;
-const DUTY_REGULATION$1 = 20;
-const unHandleableEvents$1 = [REST_TIME$1, MAX_FLIGHT_DUTY_PERIOD$1, NOT_WORKING$1, DUTY_REGULATION$1];
-const getEventStyle$1 = (event, reslTime) => {
-    const baseStyle = {
-        left: event.leftPx,
-        width: event.width,
-        top: event.top,
-        overflow: "hidden",
-        zIndex: event.isFullHeight ? 4 : 5,
-    };
-    if (event.data.eventType === BIRTHDATE$1) {
-        return {
-            ...baseStyle,
-            height: event.isFullHeight ? "100%" : "auto",
-            marginTop: event.isFullHeight ? -1 * event.top : 0,
-            pointerEvents: "none",
-            borderBottom: "solid 1px rgba(0, 0, 0, 0.4)",
-            backgroundColor: event.data.category.color || "orange",
-            display: "flex",
-            opacity: 0.3,
-            alignItems: "flex-end",
-        };
-    }
-    if ([REST_TIME$1, MAX_FLIGHT_DUTY_PERIOD$1, DUTY_REGULATION$1].includes(event.data.eventType)) {
-        return {
-            ...baseStyle,
-            zIndex: event.isFullHeight ? 4 : 6,
-            marginTop: event.isFullHeight ? -1 * event.top : 0,
-            borderRadius: "0px",
-            backgroundColor: event.data.category.color || "grey",
-            opacity: 0.3,
-            borderBottom: event.data.eventType === DUTY_REGULATION$1 ? "solid 1px rgba(0, 0, 0, 0.4)" : "",
-        };
-    }
-    return {
-        ...baseStyle,
-        height: event.isFullHeight ? "100%" : "auto",
-        marginTop: event.isFullHeight ? -1 * event.top : 0,
-        borderRadius: reslTime <= 0.99 ? "3px" : "5px",
-        minWidth: reslTime <= 1.5 ? "5px" : "",
-        maxWidth: reslTime <= 1.5 ? "25px" : "",
-    };
-};
-const EventRender$1 = ({ event, schedulerProps }) => {
-    const dateStart = new Date(event.data.start);
-    const dateEnd = new Date(event.data.end);
-    const reslTime = (dateEnd.getTime() - dateStart.getTime()) / 3600000;
-    const eventStyle = getEventStyle$1(event, reslTime);
-    const onClickEvent = (e) => {
-        if (!unHandleableEvents$1.includes(event.data.eventType)) {
-            e.stopPropagation();
-            const props = schedulerProps;
-            props.scheduler_handleCblEventClick.call(props.parent, event, schedulerProps.id);
-        }
-    };
-    const onRightClickEvent = (e) => {
-        if (!unHandleableEvents$1.includes(event.data.eventType)) {
-            e.stopPropagation();
-            const props = schedulerProps;
-            if (props.scheduler_handleCblEventClickRight) {
-                props.scheduler_handleCblEventClickRight.call(props.parent, event, schedulerProps.id);
-            }
-        }
-    };
-    const safeHandleDragStart = (e, isLeft, isRight) => {
-        if (!unHandleableEvents$1.includes(event.data.eventType)) {
-            handleDragStart(e, isLeft, isRight);
-        }
-    };
-    const handleDragStart = (e, isResizeFromStart, isResizeFromEnd) => {
-        if (!unHandleableEvents$1.includes(event.data.eventType)) {
-            [].forEach.call(document.querySelectorAll(".ant-tooltip"), function (el) {
-                el.style.visibility = "hidden";
-            });
-            // We don't know in which case is necessary
-            if (e.target !== e.currentTarget) {
-                // e.preventDefault();
-                return;
-            }
-            const isResize = isResizeFromStart || isResizeFromEnd;
-            const isAllowed = !event.isReadOnly && (isResize ? event.isResizable : event.isDraggable);
-            if (!isAllowed) {
-                e.preventDefault();
-                return;
-            }
-            const cblDragNDrop = new CblDragAndDrop$2(schedulerProps.id, null, [event], null, isResizeFromStart, isResizeFromEnd);
-            if (!isResize) {
-                e.dataTransfer.dropEffect = e.ctrlKey ? "copy" : "link";
-            }
-            e.dataTransfer.setData("data", JSON.stringify(cblDragNDrop));
-        }
-    };
-    const handleDoubleClick = (e) => {
-        if (!unHandleableEvents$1.includes(event.data.eventType)) {
-            e.preventDefault();
-            e.stopPropagation();
-            const props = schedulerProps;
-            props.scheduler_handleCblEventDoubleClick.call(props.parent, event, schedulerProps.id);
-        }
-    };
-    const onClickContextMenu = (e) => {
-        if (!unHandleableEvents$1.includes(event.data.eventType)) {
-            const props = schedulerProps;
-            if (props.scheduler_handleOnClickEventContextMenu) {
-                props.scheduler_handleOnClickEventContextMenu(e, event);
-            }
-        }
-    };
-    const renderBirthdayEvent = () => (jsxRuntime.jsxs("div", { className: `fc-timeline-event cwellt_timeline_event cwellt_event_bday ${event.selected ? "cblEventSelected" : ""}`, style: eventStyle, children: [jsxRuntime.jsx("span", { className: "cwi-icons cwi-birthday", style: { visibility: "visible" } }), event.data.subject && jsxRuntime.jsx("span", { style: { lineHeight: "1em" }, children: event.data.subject })] }, event.id));
-    const renderRegularEvent = () => (jsxRuntime.jsxs("div", { draggable: ![10, 11, 16, 20, 21].includes(event.data.eventType), className: "fc-timeline-event cwellt_timeline_event cwellt_timeline_event_opstool " +
-            (event.selected === true ? "cblEventSelected " : "") +
-            (event.data.eventType === REST_TIME$1 ||
-                event.data.eventType === MAX_FLIGHT_DUTY_PERIOD$1 ||
-                event.data.eventType === DUTY_REGULATION$1
-                ? " cwellt_event_bhnd_appt "
-                : " "), style: eventStyle, onClick: onClickEvent, onContextMenu: onRightClickEvent, onDragStart: (e) => safeHandleDragStart(e, false, false), onDoubleClick: handleDoubleClick, children: [schedulerProps.scheduler_handleCblEventResize &&
-                !event.isReadOnly &&
-                !unHandleableEvents$1.includes(event.data.eventType) && (jsxRuntime.jsx("span", { draggable: true, onDragStart: (e) => handleDragStart(e, true, false), style: {
-                    position: "absolute",
-                    cursor: "e-resize",
-                    zIndex: 10,
-                    left: "0",
-                    border: "solid 1px rgba(46,49,49,0.5)",
-                }, children: "\u200B" })), jsxRuntime.jsx(schedulerProps.cblEventComp, { cblEvent: event, handleOnClickEventContextMenu: onClickContextMenu }, event.id), schedulerProps.scheduler_handleCblEventResize &&
-                !event.isReadOnly &&
-                !unHandleableEvents$1.includes(event.data.eventType) && (jsxRuntime.jsx("span", { draggable: true, onDragStart: (e) => handleDragStart(e, false, true), style: {
-                    position: "absolute",
-                    right: "0",
-                    cursor: "e-resize",
-                    zIndex: 10,
-                    border: "solid 1px rgba(46,49,49,0.5)",
-                    marginTop: "-25px",
-                }, children: "\u200B" }))] }, event.id));
-    const render = event.data.eventType === BIRTHDATE$1 ? renderBirthdayEvent() : renderRegularEvent();
-    return render;
-};
-
-const addMinutesToDateFromPx$1 = (originalDate, leftPx, minutesPerPx) => {
-    const minutes = leftPx / minutesPerPx;
-    const datePlusMinutes = new Date(originalDate.getTime() + minutes * 60000);
-    return datePlusMinutes;
-};
-
-const onDropEventToResource$1 = (props, cblDragNDrop, resource) => {
-    props.scheduler_handleOnDropCblEventsOnResource.call(props.parent, cblDragNDrop, resource);
-};
-
-const handleOnResize = (props, cblDragNDrop) => {
-    props.scheduler_handleCblEventResize?.call(props.parent, cblDragNDrop);
-};
-
-const isAllowedToMove$1 = (data, resData, cblDragNDrop) => {
-    if (data?.eventType !== 1) {
-        return true;
-    }
-    const allowedMoves = [
-        { from: "acftsScheduler", to: "flightsPairingsScheduler" },
-        { from: "flightsScheduler", to: "crewAssignmentsScheduler" },
-        { from: "opstoolScheduler", to: "opstoolScheduler" },
-        { from: "opstoolScheduler", to: "opstoolSchedulerVirtual" },
-        { from: "opstoolSchedulerVirtual", to: "opstoolScheduler" },
-        { from: "opstoolSchedulerVirtual", to: "opstoolSchedulerVirtual" },
-        { from: "vacationsScheduler", to: "vacationsScheduler" }
-    ];
-    const crewControllAllowedMove = allowedMoves.some(move => move.from === cblDragNDrop.fromId && move.to === cblDragNDrop.toId);
-    if (crewControllAllowedMove) {
-        return true;
-    }
-    return data.Crew !== resData.Crewmember_Id;
-};
-
-const OnDrop$1 = ({ e, resource, id, contentArea, state, schedulerProps }) => {
-    e.dataTransfer.dropEffect = "move";
-    const cblDragNDrop = JSON.parse(e.dataTransfer.getData("data"));
-    if (!cblDragNDrop.data || !cblDragNDrop.data[0]) {
-        return;
-    }
-    cblDragNDrop.toId = id;
-    const obj = cblDragNDrop.data[0];
-    cblDragNDrop.isCtrlKey = e.ctrlKey;
-    const isResizeEvent = cblDragNDrop.resizeFromStart === true || cblDragNDrop.resizeFromEnd === true;
-    if (isResizeEvent) {
-        // Resize
-        if (obj.data === undefined || obj.data.eventType === 1) {
-            return;
-        }
-        const _eventX = e.clientX;
-        const _caLeft = contentArea?.getBoundingClientRect()?.left ?? 0;
-        const leftPos = _eventX - _caLeft;
-        const datetime = addMinutesToDateFromPx$1(state.startDate, leftPos, state.minutePx);
-        cblDragNDrop.droppedOnDate = datetime;
-        handleOnResize(schedulerProps, cblDragNDrop);
-        return;
-    }
-    // Drag & Drop
-    if (!isAllowedToMove$1(obj.data, resource.data, cblDragNDrop)) {
-        return;
-    }
-    const d = e.clientX - (contentArea?.getBoundingClientRect()?.left ?? 0);
-    const date = new Date(state.startDate.getTime() + (d / state.minutePx) * 60000);
-    cblDragNDrop.droppedOnDate = date;
-    onDropEventToResource$1(schedulerProps, cblDragNDrop, resource);
-};
-
-const onDragOver$1 = (e) => {
-    if (e.ctrlKey === true) {
-        e.dataTransfer.dropEffect = "copy";
-    }
-    else {
-        e.dataTransfer.dropEffect = "link";
-    }
-    e.preventDefault();
-};
-
-const arePropsEqual$1 = (prevProps, nextProps) => {
-    return prevProps.res.events === nextProps.res.events && prevProps.isInViewport === nextProps.isInViewport;
-};
-const ResourceRender$1 = React.memo(({ res, schedulerProps, contentArea, state }) => {
-    return (jsxRuntime.jsx("div", { style: {
-            backgroundColor: "#F9F8F8",
-            height: res.maxTop,
-            width: "100%",
-            position: "relative",
-            borderBottom: "1px solid rgb(255,255,255)",
-        }, onDragOver: (e) => onDragOver$1(e), onDrop: (e) => {
-            OnDrop$1({
-                e,
-                resource: res,
-                id: schedulerProps.id,
-                contentArea,
-                state,
-                schedulerProps,
-            });
-        }, className: "cwellt_divRow_schContent", children: res.events.map((evnt) => (jsxRuntime.jsx(EventRender$1, { event: evnt, schedulerProps: schedulerProps }, evnt.id))) }, res.id));
-}, arePropsEqual$1);
-
-const ResourceListRender$1 = ({ resources, schedulerProps, state, contentArea, onClickContextMenu, crewAssignmentSchedulerContextMenu, }) => {
-    return (jsxRuntime.jsx(React.Fragment, { children: resources.map((r, _i) => (jsxRuntime.jsx(antd.Dropdown, { placement: "topLeft", dropdownRender: () => {
-                return (jsxRuntime.jsx(antd.Menu, { style: { pointerEvents: "auto" }, onClick: (e) => {
-                        onClickContextMenu(e, r);
-                    }, children: crewAssignmentSchedulerContextMenu?.map((m) => (jsxRuntime.jsxs(antd.Menu.Item, { children: [jsxRuntime.jsx("span", { className: m.icon, style: { color: m.color } }), jsxRuntime.jsx("span", { className: "cwellt_contextMenu", children: m.text })] }, m.key))) }));
-            }, trigger: ["contextMenu"], children: jsxRuntime.jsx("span", { onDoubleClick: () => doubleClickOnResource$1(schedulerProps, r), id: schedulerProps.id + "_" + r.id, children: jsxRuntime.jsx(ResourceRender$1, { res: r, schedulerProps: schedulerProps, contentArea: contentArea, state: state, isInViewport: r.isInViewport }, r.id) }) }, r.id))) }));
-};
-
-const TimeLine$2 = ({ id, toolTipTitle, marginLeft, color = "rgba(255,0,0,.6)", pixels = 2, height = "100%", zIndex = 1, }) => {
-    return (jsxRuntime.jsx(antd.Tooltip, { title: toolTipTitle, children: jsxRuntime.jsx("div", { id: id, style: {
-                borderLeft: `${pixels}px solid ${color}`,
-                marginLeft: marginLeft,
-                width: "0px",
-                height: height,
-                position: "absolute",
-                zIndex: zIndex,
-            } }) }));
-};
-
-const SchedulerContentArea$1 = ({ now, showTimeline, timeLineLeftPx, timeSeparatorLeftPx, resources, scheduler, contextMenuContents, onEmptyClick, setContentArea, onClickContextMenu, }) => {
-    return (jsxRuntime.jsxs("td", { className: "contentArea", style: { width: "100%", overflow: "hidden", position: "relative" }, ref: (reference) => {
-            if (reference) {
-                setContentArea(reference);
-            }
-        }, children: [showTimeline && (jsxRuntime.jsx(TimeLine$2, { id: scheduler.props.id + "_timeline", marginLeft: timeLineLeftPx, zIndex: 8, toolTipTitle: moment(now).format("HH:mm") })), timeSeparatorLeftPx.map((pixels) => {
-                return jsxRuntime.jsx(TimeLine$2, { marginLeft: pixels, color: "rgba(255,255,255,0.7)" });
-            }), jsxRuntime.jsx("span", { onClick: () => {
-                    if (onEmptyClick) {
-                        onEmptyClick(scheduler.props.id);
-                    }
-                }, children: jsxRuntime.jsx(ResourceListRender$1, { resources: resources, state: scheduler.state, schedulerProps: scheduler.props, contentArea: scheduler.contentArea, onClickContextMenu: onClickContextMenu, crewAssignmentSchedulerContextMenu: contextMenuContents }) })] }));
-};
-
-const daysBetweenTwoDates$1 = (date1, date2) => {
-    const diff = Math.abs(date1.getTime() - date2.getTime());
-    let diffDays = 0;
-    const startOffset = Math.abs(date1.getTimezoneOffset());
-    const endOffset = Math.abs(date2.getTimezoneOffset());
-    // Summer: +1 -> +2, true
-    // Winter: +2 -> -1, false
-    if (startOffset > endOffset) {
-        diffDays = Math.floor(diff / (1000 * 3600 * 24));
-    }
-    else {
-        diffDays = Math.ceil(diff / (1000 * 3600 * 24));
-    }
-    return diffDays;
-};
-
-const calculateDivisionType$1 = (start, end) => {
-    const diffDays = daysBetweenTwoDates$1(start, end);
-    if (diffDays <= 15) {
-        return "d";
-    }
-    else if (diffDays <= 30) {
-        return "w";
-    }
-    else {
-        return "m";
-    }
-};
-
-const getMonthHeaderData$1 = (dates, maxWidth) => {
-    if (dates.length === 0)
-        return [];
-    const dayWidth = maxWidth / dates.length;
-    const ranges = getMonthRanges$1(dates);
-    return ranges.map((range) => {
-        return {
-            monthFormatted: range.start.getMonth() + 1 + "." + range.start.getFullYear(),
-            width: dayWidth * range.daysLong,
-        };
-    });
-};
-const getMonthRanges$1 = (dates) => {
-    const firstDay = dates[0];
-    const lastDay = dates[dates.length - 1];
-    let currentDate = new Date(firstDay);
-    const ranges = [];
-    while (currentDate <= lastDay) {
-        const rangeStart = new Date(currentDate);
-        let rangeEnd = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
-        if (rangeEnd >= lastDay) {
-            rangeEnd = lastDay;
-        }
-        ranges.push({
-            start: rangeStart,
-            daysLong: getDaysBetweenDates$1(rangeStart, rangeEnd),
-        });
-        currentDate = new Date(rangeEnd.getFullYear(), rangeEnd.getMonth() + 1, 1);
-    }
-    return ranges;
-};
-const getDaysBetweenDates$1 = (startDate, endDate) => {
-    const timeDifference = endDate.getTime() - startDate.getTime();
-    return Math.floor(timeDifference / (1000 * 60 * 60 * 24)) + 1;
-};
-
-const getWeekHeaderDataFromWeekRange$1 = (weekRange, maxWidth, dateFormatter) => weekRange.map(week => {
-    const numberOfDaysInScheduler = weekRange
-        .flatMap(element => {
-        return element.days;
-    })
-        .reduce((el1, el2) => {
-        return el1 + el2;
-    });
-    return {
-        formattedString: getStringForWeekRange$1(week, dateFormatter),
-        width: getWidthForWeekRange$1(maxWidth, week.days, numberOfDaysInScheduler)
-    };
-});
-const getStringForWeekRange$1 = (weekRange, dateFormatter) => weekRange.days == 1
-    ? dateFormatter(weekRange.start)
-    : `${dateFormatter(weekRange.start)} - ${dateFormatter(weekRange.end)}`;
-const getWidthForWeekRange$1 = (maxWidth, weekDays, monthDays) => {
-    const dayWidth = maxWidth / monthDays;
-    return dayWidth * weekDays;
-};
-
-// stringRange: `${formatter(date)} - ${formatter(end)}`,
-const listOfDatesToWeekRangeList$1 = (dates) => {
-    if (dates.length === 0) {
-        return [];
-    }
-    const datesToReturn = [];
-    dates.forEach((date, index) => {
-        const dayOfWeek = date.getDay();
-        const isFirstDay = index === 0;
-        const isLastDay = index === dates.length - 1;
-        const isSunday = dayOfWeek === 0;
-        const isMonday = dayOfWeek === 1;
-        if (isFirstDay && !isSunday) {
-            datesToReturn.push(createWeekRange$1(date, 8 - dayOfWeek));
-            return;
-        }
-        if (isLastDay && !isSunday) {
-            if (!isMonday) {
-                datesToReturn.pop();
-            }
-            const firstOfWeek = getFirstDayOfWeek$1(date);
-            datesToReturn.push(createWeekRange$1(firstOfWeek, dayOfWeek));
-            return;
-        }
-        if (isMonday) {
-            datesToReturn.push(createWeekRange$1(date, 7));
-            return;
-        }
-        // this is because sunday is 0
-        if (isFirstDay && isSunday) {
-            datesToReturn.push(createWeekRange$1(date, 1));
-            return;
-        }
-    });
-    return datesToReturn;
-};
-const createWeekRange$1 = (start, days) => {
-    const end = new Date(start);
-    end.setDate(end.getDate() + days - 1);
-    return {
-        days,
-        start,
-        end,
-        isShortWeek: days < 7
-    };
-};
-const getFirstDayOfWeek$1 = (date) => {
-    const currentDate = new Date(date);
-    const dayOfWeek = currentDate.getDay();
-    // dayOfWeek 0 == (Sunday)
-    const diffToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-    // Set the date to the first day of the week
-    currentDate.setDate(currentDate.getDate() - diffToMonday);
-    return currentDate;
-};
-
-const DayHeader$1 = ({ index, text, width, headerType }) => {
-    const isFirstDay = index == 0;
-    return (jsxRuntime.jsx("td", { style: {
-            display: "inline-block",
-            fontSize: "10px",
-            width: width,
-            maxWidth: width,
-        }, id: headerType + index, children: jsxRuntime.jsx("span", { className: isFirstDay ? "cwelltFirstDate_desc" : "", children: text }) }));
-};
-
-const MonthHeader$1 = ({ index, text, width, headerType }) => {
-    return (jsxRuntime.jsx("td", { style: {
-            display: "inline-block",
-            fontSize: "10px",
-            width: width,
-            maxWidth: width,
-        }, id: headerType + index, children: jsxRuntime.jsx("span", { children: text }) }));
-};
-
-const WeekHeader$1 = ({ index, text, width, headerType }) => {
-    const isFirstDay = index == 0;
-    return (jsxRuntime.jsx("td", { style: {
-            display: "inline-block",
-            fontSize: "10px",
-            width: width,
-            maxWidth: width,
-        }, id: headerType + index, children: jsxRuntime.jsx("span", { className: isFirstDay ? "cwelltFirstDate_desc" : "", style: { whiteSpace: "nowrap" }, children: text }) }));
-};
-
-const DaysHeader$1 = ({ days, divisionType, maxWidth, headerType }) => {
-    let headerToDraw = [];
-    const filteredDays = days.filter((date) => {
-        return date.getHours() === 0;
-    });
-    const dateFormatter = (date) => {
-        return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
-    };
-    switch (divisionType) {
-        case "d":
-            {
-                headerToDraw = filteredDays.map((date, index) => {
-                    return (jsxRuntime.jsx(DayHeader$1, { text: dateFormatter(date), index: index, width: maxWidth / filteredDays.length, headerType: headerType }, index));
-                });
-            }
-            break;
-        case "w":
-            {
-                const weekRanges = listOfDatesToWeekRangeList$1(filteredDays);
-                headerToDraw = getWeekHeaderDataFromWeekRange$1(weekRanges, maxWidth, dateFormatter).map((week, index) => {
-                    return (jsxRuntime.jsx(WeekHeader$1, { index: index, text: week.formattedString, width: week.width, headerType: headerType }, index));
-                });
-            }
-            break;
-        case "m":
-            {
-                const monthData = getMonthHeaderData$1(filteredDays, maxWidth);
-                headerToDraw = monthData.map(({ monthFormatted, width }, index) => (jsxRuntime.jsx(MonthHeader$1, { index: index, text: monthFormatted, width: width, headerType: headerType }, index)));
-            }
-            break;
-    }
-    return jsxRuntime.jsx("tr", { className: "cwelltSchRowDate", children: headerToDraw });
-};
-
-const getFormattedTimeForHeader$1 = (calculatedDivType, calculatedDivision, timeHeader) => {
-    let showDate = "";
-    switch (calculatedDivType) {
-        case "d":
-            switch (calculatedDivision) {
-                case 8:
-                    showDate =
-                        timeHeader.getHours() === 0 ||
-                            timeHeader.getHours() === 3 ||
-                            timeHeader.getHours() === 6 ||
-                            timeHeader.getHours() === 9 ||
-                            timeHeader.getHours() === 12 ||
-                            timeHeader.getHours() === 15 ||
-                            timeHeader.getHours() === 18 ||
-                            timeHeader.getHours() === 21
-                            ? moment(timeHeader).format("HH:mm")
-                            : "";
-                    break;
-                case 3:
-                    showDate =
-                        timeHeader.getHours() === 0 || timeHeader.getHours() === 8 || timeHeader.getHours() === 16
-                            ? moment(timeHeader).format("HH:mm")
-                            : "";
-                    break;
-                case 2:
-                    showDate =
-                        timeHeader.getHours() === 0 || timeHeader.getHours() === 12 ? moment(timeHeader).format("HH:mm") : "";
-                    break;
-            }
-            break;
-        case "m":
-            showDate = timeHeader.getHours() === 0 ? timeHeader.getDate().toString() : "";
-            break;
-        case "w":
-            showDate = timeHeader.getHours() === 0 ? timeHeader.getDate().toString() : "";
-            break;
-    }
-    return {
-        text: showDate,
-        isWeekend: timeHeader.getDay() === 6 || timeHeader.getDay() === 0,
-    };
-};
-
-const calculateDivisions$1 = (start, end) => {
-    const diffDays = daysBetweenTwoDates$1(start, end);
-    if (diffDays <= 3) {
-        return 8;
-    }
-    else if (diffDays < 8) {
-        return 3;
-    }
-    else if (diffDays <= 15) {
-        return 2;
-    }
-    else {
-        return 1;
-    }
-};
-
-const TimeHeader$1 = ({ isWeekend, index, text, width, header }) => {
-    if (text === "") {
-        return;
-    }
-    const commonStyles = {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "left",
-        fontSize: "10px",
-        width: width,
-        maxWidth: width,
-        height: "2rem",
-        borderLeft: "1px solid white",
-        background: isWeekend ? "#cbc9c9" : "",
-        color: "#000000d9",
-        fontWeight: 700,
-    };
-    return (jsxRuntime.jsx("td", { style: commonStyles, id: `${header}Time${index}`, children: jsxRuntime.jsx("span", { style: { paddingLeft: "8px" }, children: text }) }, `t${index}`));
-};
-
-const TimeHeaderRow$1 = ({ timeHeaders, startDate, endDate, maxWidth, header }) => {
-    const calculatedDivision = calculateDivisions$1(startDate, endDate);
-    const calculatedDivType = calculateDivisionType$1(startDate, endDate);
-    const formattedHeaders = timeHeaders.map((th) => {
-        return getFormattedTimeForHeader$1(calculatedDivType, calculatedDivision, th);
-    });
-    const filteredHeaders = formattedHeaders.filter((element) => element.text !== "");
-    return (jsxRuntime.jsx("tr", { className: "cwelltSchRowTime", style: { height: "30px" }, children: filteredHeaders.map(({ text, isWeekend }, index) => {
-            return (jsxRuntime.jsx(TimeHeader$1, { isWeekend: isWeekend, index: index, text: text, width: maxWidth / filteredHeaders.length, header: header }, index));
-        }) }));
-};
-
-const SchedulerTimeLine$1 = ({ maxPx, hoursList, startDate, endDate, pxPerHour, headerName, }) => {
-    return (jsxRuntime.jsx("table", { className: "content-area cwelltSchTable", style: { width: maxPx }, children: jsxRuntime.jsxs("tbody", { style: { width: "100%", borderSpacing: 0 }, className: "content-area cwelltSchTbody", children: [jsxRuntime.jsx(DaysHeader$1, { days: hoursList, divisionType: calculateDivisionType$1(startDate, endDate), maxWidth: pxPerHour * hoursList.length, headerType: headerName ?? "schedulerDateHeader" }), jsxRuntime.jsx(TimeHeaderRow$1, { timeHeaders: hoursList, startDate: startDate, endDate: endDate, maxWidth: pxPerHour * hoursList.length, header: headerName ?? "schedulerTimeHeader" })] }) }));
-};
-
-const SchedulerHeader$2 = ({ timelineProps, descriptionColumn }) => {
-    const { maxPx, hoursList, startDate, endDate, pxPerHour, headerName } = timelineProps;
-    return (jsxRuntime.jsx("thead", { className: "cwellt_fc_header_scheduler", style: { position: "sticky", zIndex: 9 }, children: jsxRuntime.jsxs("tr", { className: "cwellt_fc_header_row", children: [jsxRuntime.jsxs("td", { className: "border", style: {
-                        position: "sticky",
-                        top: 0,
-                        backgroundColor: "white",
-                        width: "100px",
-                    }, children: [jsxRuntime.jsx("div", { style: {
-                                display: "flex",
-                                height: "30px",
-                                alignItems: "center",
-                                width: "150px",
-                            }, children: jsxRuntime.jsx("label", { children: headerName }) }), jsxRuntime.jsx("div", { style: {
-                                display: "flex",
-                                height: "30px",
-                                alignItems: "center",
-                                background: "rgba(0, 0, 0, 0.04)",
-                            }, children: jsxRuntime.jsx("span", { children: descriptionColumn }) })] }), jsxRuntime.jsx("td", { style: {
-                        position: "sticky",
-                        top: 0,
-                        zIndex: 6,
-                        backgroundColor: "white",
-                    }, children: jsxRuntime.jsx(SchedulerTimeLine$1, { maxPx: maxPx, hoursList: hoursList, pxPerHour: pxPerHour, startDate: startDate, endDate: endDate, headerName: headerName }) })] }) }));
-};
-
-const daysBetweenTwoDatesIncludingBoth$1 = (date1, date2) => {
-    const diff = Math.abs(date1.getTime() - date2.getTime());
-    const diffDays = diff / (1000 * 3600 * 24);
-    return diffDays;
-};
-
-const getUtcToday$1 = () => {
-    const now = new Date();
-    const userTimezoneOffset = now.getTimezoneOffset() * 60000;
-    const nowUtc = new Date(now.getTime() + userTimezoneOffset);
-    return nowUtc;
-};
-
-const filterEvents$1 = (events, start, end, id, resId, module = undefined) => {
-    const hasSameResourceId = (event) => event.resourceId === resId;
-    const datesCollide = (event) => event.start <= end && event.end >= start;
-    let eventsFiltered = events.filter(event => hasSameResourceId(event) && datesCollide(event));
-    if (id !== "flightWatchScheduler") {
-        eventsFiltered = sortByDate$1(eventsFiltered);
-    }
-    if (id !== "crewAssignmentsScheduler" && id !== "vacationsScheduler") {
-        return eventsFiltered;
-    }
-    eventsFiltered = setNotFullHeightEventsFirst$1(eventsFiltered);
-    if (module === "CrewControl") {
-        eventsFiltered = removeDuplicated$1(eventsFiltered, "Crew_Id");
-    }
-    if (module === "CrewScheduling") {
-        eventsFiltered = removeDuplicated$1(eventsFiltered, "AssignmentID");
-    }
-    if (module === "CrewSchedulingVacations") {
-        eventsFiltered = removeDuplicated$1(eventsFiltered, "ID");
-    }
-    return eventsFiltered;
-};
-const sortByDate$1 = (events) => events.sort((a, b) => +new Date(a.start) - +new Date(b.start));
-const removeDuplicated$1 = (events, key) => {
-    return events.filter((obj, index, self) => index === self.findIndex(o => o.data[key] === obj.data[key] && o.data.subject === obj.data.subject));
-};
-const setNotFullHeightEventsFirst$1 = (events) => {
-    const notFullHeight = [];
-    const isFullHeight = [];
-    events.forEach(element => {
-        element.isFullHeight ? notFullHeight.push(element) : isFullHeight.push(element);
-    });
-    return notFullHeight.concat(isFullHeight);
-};
-
-const getLeftPixels$1 = (eventStart, scheduleStart, dayPx) => {
-    if (scheduleStart >= eventStart)
-        return 0;
-    return daysBetweenTwoDatesIncludingBoth$1(scheduleStart, eventStart) * dayPx;
-};
-const getEventWithSize$1 = (event, schedulerStart, dayPx) => {
-    const eventStartBeforeScheduleStart = event.start.getTime() < schedulerStart.getTime();
-    const lengthOfEvent = daysBetweenTwoDatesIncludingBoth$1(event.start, event.end);
-    const daysUntilSchedulerStart = daysBetweenTwoDatesIncludingBoth$1(event.start, schedulerStart);
-    const daysLong = eventStartBeforeScheduleStart ? lengthOfEvent - daysUntilSchedulerStart : lengthOfEvent;
-    // we want minimum of 8 px
-    const eventMinSize = 8;
-    const newEvent = {
-        ...event,
-        leftPx: getLeftPixels$1(event.start, schedulerStart, dayPx),
-        width: Math.max(daysLong * dayPx, eventMinSize),
-    };
-    return newEvent;
-};
-
-const checkIfSlotAvailable$1 = (events, event) => {
-    const lastElement = events.length - 1;
-    if (events.length == 0)
-        return true;
-    const collide = events.some(existent => {
-        return !(existent.end <= event.start || event.end <= existent.start);
-    });
-    return !collide || events[lastElement].isFullHeight;
-};
-
-const getEventsOfResource = (res, events, state, id, module, start, end) => {
-    let maxTop = 0;
-    const tops = [];
-    tops[0] = new Array();
-    const eventsOrdered = filterEvents$1(events, start ?? state.startDate, end ?? state.endDate, id, res.id, module);
-    eventsOrdered.forEach((event, i) => {
-        if (i === 0 || event.isFullHeight) {
-            event.top = 0;
-            tops[0].push(event);
-        }
-        else {
-            let found = false;
-            for (let j = 0; j < tops.length && found === false; j++) {
-                found = checkIfSlotAvailable$1(tops[j], event);
-                if (found === true || event.isFullHeight) {
-                    event.top = j * state.eventHeight;
-                    tops[j].push(event);
-                }
-            }
-            if (found === false && !event.isFullHeight) {
-                maxTop++;
-                tops[maxTop] = new Array();
-                event.top = maxTop * state.eventHeight;
-                tops[maxTop].push(event);
-            }
-            else {
-                // This is for flightwatch
-                if (found === true && event.data.order === 2 && maxTop < 1) {
-                    maxTop++;
-                    tops[maxTop] = new Array();
-                    event.top = maxTop * state.eventHeight;
-                    tops[maxTop].push(event);
-                    maxTop--;
-                }
-            }
-        }
-        event = getEventWithSize$1(event, start, state.dayPx);
-    });
-    let OrderedArray = new Array();
-    for (let h = 0; h < tops.length; h++) {
-        if (tops.length === 0) {
-            res.maxTop = state.eventHeight;
-        }
-        else {
-            res.maxTop = tops.length * state.eventHeight;
-        }
-        OrderedArray = OrderedArray.concat(tops[h]);
-    }
-    return OrderedArray;
-};
-const getEventsInInnerRows$1 = (res, state, start) => {
-    let maxTop = 0;
-    const tops = [];
-    tops[0] = new Array();
-    res.events.forEach((event, i) => {
-        if (i === 0 || event.isFullHeight) {
-            event.top = 0;
-            tops[0].push(event);
-        }
-        else {
-            let found = false;
-            for (let j = 0; j < tops.length && found === false; j++) {
-                found = checkIfSlotAvailable$1(tops[j], event);
-                if (found === true || event.isFullHeight) {
-                    event.top = j * state.eventHeight;
-                    tops[j].push(event);
-                }
-            }
-            if (found === false && !event.isFullHeight) {
-                maxTop++;
-                tops[maxTop] = new Array();
-                event.top = maxTop * state.eventHeight;
-                tops[maxTop].push(event);
-            }
-            else {
-                // This is for flightwatch
-                if (found === true && event.data.order === 2 && maxTop < 1) {
-                    maxTop++;
-                    tops[maxTop] = new Array();
-                    event.top = maxTop * state.eventHeight;
-                    tops[maxTop].push(event);
-                    maxTop--;
-                }
-            }
-        }
-        event = getEventWithSize$1(event, start, state.dayPx);
-    });
-    return tops;
-};
-
-const compareStrings$1 = (str1, str2) => {
-    if (str1 > str2)
-        return 1;
-    if (str1 < str2)
-        return -1;
-    return 0;
-};
-
-const filterResources$1 = (module, resourceName, resources, groupByFunction, endDate, startDate) => {
-    if ((module === "CrewControl" || module === "CrewScheduling" || module === "CrewSchedulingVacations") &&
-        resourceName === "Employees") {
-        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 (module === "CrewScheduling" && resourceName === "Employees") {
-        const sortKey = groupByFunction ? "mainFunction" : "C3_LC";
-        resources = resources.sort((a, b) => compareStrings$1(a.data[sortKey], b.data[sortKey]));
-    }
-    return resources;
-};
-
-const filterAndProcessResources = (props, state) => {
-    const events = [...props.events];
-    const filteredResources = filterResources$1(props.module, props.resourceName, [...props.resources], props.groupByFunction, props.endDate, props.startDate);
-    return filteredResources.map(r => ({
-        ...r,
-        events: getEventsOfResource(r, events, state, props.id, props.module, props.startDate, props.endDate)
-    }));
-};
-
-const heightScheduler$1 = (resources, visibleRows, isPinnerScheduler) => {
-    if (resources.length <= 0) {
-        return 100;
-    }
-    const realVisibleRows = visibleRows > resources.length ? resources.length : visibleRows;
-    const rowsHeight = resources.slice(0, realVisibleRows).map((row) => {
-        return row.maxTop;
-    });
-    const height = rowsHeight.reduce((sum, row) => {
-        return sum + row;
-    }, 0);
-    const headerHeight = isPinnerScheduler ? 0 : 60;
-    return height + headerHeight;
-};
-
-const getTimeHeaders$1 = (startDate, endDate) => {
-    const dateArray = new Array();
-    const currentDate = new Date(startDate);
-    const startOffset = Math.abs(startDate.getTimezoneOffset());
-    const endOffset = Math.abs(endDate.getTimezoneOffset());
-    // Summer: +1 -> +2, true
-    // Winter: +2 -> -1, false
-    const offsetSummerWinter = startOffset < endOffset;
-    if (offsetSummerWinter === true) {
-        while (currentDate < endDate) {
-            if (dateArray.length > 0) {
-                const lastPosition = dateArray[dateArray.length - 1];
-                const differenceHours = currentDate.getHours() - lastPosition.getHours();
-                if (differenceHours === 1 || differenceHours < 0) {
-                    dateArray.push(new Date(currentDate));
-                }
-                else if (differenceHours > 1) {
-                    dateArray.push(new Date(currentDate.getHours() - 1));
-                    dateArray.push(new Date(currentDate));
-                }
-            }
-            else {
-                dateArray.push(new Date(currentDate));
-            }
-            currentDate.setHours(currentDate.getHours() + 1);
-        }
-    }
-    else {
-        while (currentDate < endDate) {
-            dateArray.push(new Date(currentDate));
-            currentDate.setHours(currentDate.getHours() + 1);
-        }
-    }
-    return dateArray;
-};
-
-class CwScheduler2 extends React.Component {
-    contentArea;
-    constructor(Props) {
-        super(Props);
-        this.init(this.props);
-    }
-    resizeObserver;
-    calculateMaxPx = () => {
-        const mainElement = document.querySelector(".cw-scheduler-main-wrapper");
-        if (!mainElement)
-            return window.innerWidth - 402; // sidebar + first column + padding
-        const mainRect = mainElement.getBoundingClientRect();
-        return Math.floor(mainRect.width - 162); // first column + padding
-    };
-    init = (props) => {
-        const maxPx = this.calculateMaxPx();
-        const timeHeaders = getTimeHeaders$1(props.startDate, props.endDate);
-        const dayPx = maxPx / Math.floor(daysBetweenTwoDates$1(props.startDate, props.endDate));
-        const hourPx = dayPx / 24;
-        const minutePx = dayPx / 1440;
-        this.state = {
-            startDate: props.startDate,
-            endDate: props.endDate,
-            maxPx: maxPx,
-            dayPx: dayPx,
-            hourPx: hourPx,
-            minutePx: minutePx,
-            timeHeaders: timeHeaders,
-            eventHeight: 30,
-            events: props.events,
-            resources: props.resources,
-            top: 0,
-            bottom: 1000,
-            lineStyle: 0,
-            nowUtc: getUtcToday$1(),
-            division: 0,
-            divisionType: "",
-            pinnedResources: props.pinnedResources ? props.pinnedResources : [],
-            selectedEvents: [],
-            showConsoleLogs: false, // Change to false to not show the console.log(...)
-            groupByFunction: props.groupByFunction ?? false,
-        };
-    };
-    initOutside = (events, resources, _nextProps, startDate, endDate) => {
-        // const maxPx: number = (document.getElementById("root")?.clientWidth ?? window.innerWidth) - 150;
-        const maxPx = this.calculateMaxPx();
-        const timeHeaders = getTimeHeaders$1(startDate, endDate);
-        const days = Math.floor(daysBetweenTwoDates$1(startDate, endDate));
-        const dayPx = maxPx / days;
-        const hourPx = dayPx / 24;
-        const minutePx = dayPx / 1440;
-        const eventHeight = 30;
-        resources = filterResources$1(this.props.module, this.props.resourceName, this.props.resources, this.props.groupByFunction, endDate, startDate);
-        resources = resources.map((resource) => {
-            return {
-                ...resource,
-                events: getEventsOfResource(resource, events, this.state, this.props.id, this.props.module, startDate, endDate),
-            };
-        });
-        const groupByFunction = this.props.groupByFunction ?? false;
-        const now = getUtcToday$1();
-        const isInDateRange = now >= startDate && now <= endDate && this.contentArea !== undefined;
-        const lineStyle = isInDateRange ? daysBetweenTwoDatesIncludingBoth$1(startDate, now) * dayPx : 0;
-        this.setState({
-            startDate: startDate,
-            endDate: endDate,
-            maxPx: maxPx,
-            dayPx: dayPx,
-            hourPx: hourPx,
-            minutePx: minutePx,
-            timeHeaders: timeHeaders,
-            eventHeight: eventHeight,
-            events: [...events],
-            resources: [...resources],
-            top: 0,
-            bottom: 1000,
-            lineStyle: lineStyle,
-            nowUtc: now,
-            division: 0,
-            divisionType: "",
-            pinnedResources: this.props.pinnedResources ?? [],
-            groupByFunction: groupByFunction,
-        });
-    };
-    componentDidMount() {
-        const eventsCopy = [...this.props.events];
-        const filteredResources = filterAndProcessResources(this.props, this.state);
-        const divisions = calculateDivisions$1(this.state.startDate, this.state.endDate);
-        const divisionType = calculateDivisionType$1(this.state.startDate, this.state.endDate);
-        this.setState({
-            events: eventsCopy,
-            resources: filteredResources,
-            division: divisions,
-            divisionType: divisionType,
-        });
-        // Añadir ResizeObserver
-        const mainElement = document.querySelector(".cw-scheduler-main-wrapper");
-        if (mainElement) {
-            this.resizeObserver = new ResizeObserver(() => {
-                this.handleResize();
-            });
-            this.resizeObserver.observe(mainElement);
-        }
-        window?.addEventListener("resize", this.handleResize);
-    }
-    componentWillUnmount() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-        window?.removeEventListener("resize", this.handleResize);
-    }
-    recalculateEventPositions = (events, dayPx, startDate) => {
-        return events.map(event => getEventWithSize$1(event, startDate, dayPx));
-    };
-    updateResourcesWithEvents = (resources, events) => {
-        return resources.map(resource => ({
-            ...resource,
-            events: events.filter(event => event.resourceId === resource.id)
-        }));
-    };
-    handleResize = () => {
-        const maxPx = this.calculateMaxPx();
-        const days = Math.floor(daysBetweenTwoDates$1(this.state.startDate, this.state.endDate));
-        const dayPx = maxPx / days;
-        const hourPx = dayPx / 24;
-        const minutePx = dayPx / 1440;
-        const recalculatedEvents = this.recalculateEventPositions(this.state.events, dayPx, this.state.startDate);
-        const updatedResources = this.updateResourcesWithEvents(this.state.resources, recalculatedEvents);
-        this.setState({
-            maxPx,
-            dayPx,
-            hourPx,
-            minutePx,
-            events: recalculatedEvents,
-            resources: updatedResources
-        });
-    };
-    componentWillReceiveProps(_nextProps) {
-        if (this.state.showConsoleLogs) {
-            console.log("Schedule - componentWillReceiveProps, start: ", moment(new Date()).toString());
-            console.log("Schedule - componentWillReceiveProps - has changes, start: ", moment(new Date()).toString());
+    const handleInputClick = React.useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
         }
-        const dateChange = _nextProps.startDate.toISOString() !== this.state.startDate.toISOString() ||
-            _nextProps.endDate.toISOString() !== this.state.endDate.toISOString();
-        if (document.getElementById("root") !== null) {
-            this.handleResize();
+    }, [disabled]);
+    const handleInputChange = React.useCallback((e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        // Try to parse the full datetime string: dd.MM.yyyy HH:mm
+        if (newValue.length >= 16) {
+            validateAndSetDateTime(newValue);
         }
-        if (dateChange) {
-            const events = lodashEs.cloneDeep(this.props.events);
-            const resources = lodashEs.cloneDeep(this.props.resources);
-            this.initOutside(events, resources, _nextProps, _nextProps.startDate, _nextProps.endDate);
-            if (this.state.showConsoleLogs) {
-                console.log("Schedule - componentWillReceiveProps - print on schedule, end: ", moment(new Date()).toString());
-                console.log("Schedule - componentWillReceiveProps, end: ", moment(new Date()).toString());
-            }
-            return;
+        else if (newValue === "") {
+            onChange(undefined);
+            setSelectedDate(undefined);
+            setSelectedTime("");
         }
-        const mappedEvents = _nextProps.events
-            .map((event) => {
-            return getEventWithSize$1(event, _nextProps.startDate, this.state.dayPx);
-        })
-            .filter((event) => {
-            const outOfRange = event.end <= this.props.startDate || event.start >= this.props.endDate;
-            return !outOfRange;
-        });
-        const newResources = _nextProps.resources
-            .map((resource) => {
-            return {
-                ...resource,
-                events: mappedEvents.filter((event) => event.resourceId === resource.id),
-            };
-        })
-            .map((resource) => {
-            const tops = getEventsInInnerRows$1(resource, this.state, _nextProps.startDate);
-            const height = tops.length === 0 ? this.state.eventHeight : tops.length * this.state.eventHeight;
-            let flatMapEvents = [];
-            for (let h = 0; h < tops.length; h++) {
-                flatMapEvents = flatMapEvents.concat(tops[h]);
+    }, [validateAndSetDateTime, onChange]);
+    const handleInputBlur = React.useCallback(() => {
+        // Try to parse if there's text
+        if (inputValue && inputValue.trim() !== "") {
+            const parsed = parseDateTime(inputValue);
+            if (parsed && !isNaN(parsed.getTime())) {
+                const isValid = (!minDateTime || parsed >= minDateTime) &&
+                    (!maxDateTime || parsed <= maxDateTime);
+                if (isValid) {
+                    onChange(parsed);
+                    const dateStr = dateFns.format(parsed, "dd.MM.yyyy", { locale: locale.enGB });
+                    const timeStr = dateFns.format(parsed, "HH:mm", { locale: locale.enGB });
+                    setInputValue(`${dateStr} ${timeStr}`);
+                    setSelectedDate(parsed);
+                    setSelectedTime(timeStr);
+                    return;
+                }
             }
-            return {
-                ...resource,
-                maxTop: height,
-                events: flatMapEvents,
-            };
-        });
-        this.setState({
-            events: mappedEvents,
-            resources: newResources,
-        });
-    }
-    handleOnClickContextMenuResourceScheduler = (_clickEvent, _resource) => {
-        let datetime = new Date();
-        const _ca = this.contentArea;
-        if (_clickEvent.domEvent.currentTarget !== undefined) {
-            const leftPos = _clickEvent.domEvent.currentTarget.parentElement.getBoundingClientRect().left -
-                (_ca?.getBoundingClientRect()?.left ?? 0) -
-                window.scrollX;
-            datetime = addMinutesToDateFromPx$1(this.state.startDate, leftPos, this.state.minutePx);
         }
-        if (this.props.scheduler_handleOnClickContextMenuResource) {
-            this.props.scheduler_handleOnClickContextMenuResource(datetime, _resource, _clickEvent.key, this.props.id);
+        // Sync with current value
+        if (value) {
+            const dateStr = dateFns.format(value, "dd.MM.yyyy", { locale: locale.enGB });
+            const timeStr = dateFns.format(value, "HH:mm", { locale: locale.enGB });
+            setInputValue(`${dateStr} ${timeStr}`);
         }
-    };
-    handleOnClickResourceContextMenu = (_e, resource) => {
-        if (this.props.scheduler_handleOnClickResourceContextMenu) {
-            this.props.scheduler_handleOnClickResourceContextMenu(_e, resource);
+        else {
+            setInputValue("");
         }
-    };
-    handleCrewPinning = (resource, text) => {
-        if (this.props.scheduler_handlePinned) {
-            this.props.scheduler_handlePinned.call(this.props.parent, resource.id, text, this.props.id);
+    }, [inputValue, parseDateTime, minDateTime, maxDateTime, onChange, value]);
+    const handleInputKeyDown = React.useCallback((e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            inputRef.current?.blur();
+            setIsOpen(false);
         }
-    };
-    render() {
-        const isInDateRange = this.state.nowUtc >= this.state.startDate &&
-            this.state.nowUtc <= this.state.endDate &&
-            this.contentArea !== undefined;
-        const showTimeline = isInDateRange && this.state.lineStyle < this.state.maxPx;
-        const isPinnedTable = this.props.id.toLowerCase().includes("pinned");
-        const schedulerHeight = heightScheduler$1(this.state.resources, this.props.height, this.props.id === "crewAssignmentsScheduler");
-        const timeHeaders = this.state.timeHeaders;
-        const referenceDate = timeHeaders[0];
-        const divisions = 24 / calculateDivisions$1(timeHeaders[0], timeHeaders[timeHeaders.length - 1]);
-        const hoursPixels = timeHeaders
-            .filter((_, index) => {
-            return index != 0 && index % divisions == 0;
-        })
-            .map((date) => {
-            const daysDiff = daysBetweenTwoDatesIncludingBoth$1(date, referenceDate);
-            const pixels = daysDiff * 24 * this.state.hourPx;
-            return pixels;
-        });
-        return (jsxRuntime.jsx("div", { id: this.props.id, style: {
-                overflowY: "auto",
-                maxHeight: isPinnedTable ? "auto" : schedulerHeight
-            }, className: this.state.resources.length > 0 ? "cwellt_tb_con" : "cwellt_tb_con cw_tb_con_emptyValues", children: jsxRuntime.jsxs("table", { id: "cwelltTableScheduler", children: [this.props.id !== "crewAssignmentsScheduler" && (jsxRuntime.jsx(SchedulerHeader$2, { timelineProps: {
-                            maxPx: this.state.maxPx,
-                            hoursList: this.state.timeHeaders,
-                            pxPerHour: this.state.hourPx,
-                            startDate: this.state.startDate,
-                            endDate: this.state.endDate,
-                            headerName: this.props.resourceName,
-                        }, descriptionColumn: this.props.descriptionColumn })), jsxRuntime.jsx("tbody", { style: {
-                            overflow: "visible",
-                            width: this.state.maxPx + 150
-                        }, className: isPinnedTable ? "fc-body cw-fc-body-pinned" : "fc-body", children: jsxRuntime.jsxs("tr", { className: "fc_body_row", children: [jsxRuntime.jsx(ResourcesTitleList$1, { resources: this.state.resources, canBePinned: this.props.canBePinned ?? false, includesPinned: this.props.id.toLowerCase().includes("pinned"), onCrewPinning: this.handleCrewPinning, onClickResourceContextMenu: this.handleOnClickResourceContextMenu, ResourceTitleComponent: this.props.resourceComp }), jsxRuntime.jsx("td", { className: "dividerArea" }), jsxRuntime.jsx(SchedulerContentArea$1, { now: this.state.nowUtc, showTimeline: showTimeline, timeSeparatorLeftPx: hoursPixels, timeLineLeftPx: this.state.lineStyle, resources: this.state.resources, contextMenuContents: this.props.resourceContextMenuContents, scheduler: this, onEmptyClick: this.props.scheduler_handleEmptyClick, setContentArea: (n) => (this.contentArea = n), onClickContextMenu: this.handleOnClickContextMenuResourceScheduler })] }) })] }) }));
-    }
+        else if (e.key === "Escape") {
+            setIsOpen(false);
+            inputRef.current?.blur();
+        }
+    }, []);
+    const handleNowClick = React.useCallback(() => {
+        const now = new Date();
+        // Check if now is within allowed range
+        const isNowValid = (!minDateTime || now >= minDateTime) &&
+            (!maxDateTime || now <= maxDateTime);
+        if (isNowValid) {
+            onChange(now);
+            setIsOpen(false);
+        }
+    }, [minDateTime, maxDateTime, onChange]);
+    // Memoize disabled days
+    const disabledDays = React.useMemo(() => [
+        ...(disabledDates || []),
+        ...(minDateTime ? [{ before: minDateTime }] : []),
+        ...(maxDateTime ? [{ after: maxDateTime }] : []),
+        ...(disabledMatcher ? [disabledMatcher] : []),
+    ], [disabledDates, minDateTime, maxDateTime, disabledMatcher]);
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-datetimepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsxRuntime.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" } }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear datetime" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar-time" })) }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${compactStyles.compactPopup}`, style: popupStyle, children: [jsxRuntime.jsxs("div", { className: compactStyles.calendarWrapper, children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, defaultMonth: selectedDate, disabled: disabledDays, numberOfMonths: numberOfMonths, modifiers: {
+                                                today: new Date(),
+                                            }, modifiersClassNames: {
+                                                today: "rdp-day-today",
+                                            } }), showTodayButton && (jsxRuntime.jsx("footer", { className: "cw-flex-row cw-align-center-center", children: jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", icon: "check-big", onClick: handleNowClick, text: "Now" }) }))] }), jsxRuntime.jsxs("div", { className: compactStyles.timeWrapper, children: [jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx(CwIcon, { iconId: "clock", size: "medium" }), jsxRuntime.jsx("span", { children: "Time" })] }), jsxRuntime.jsx("div", { ref: timeListRef, className: `${timeStyles.timePickerList} ${compactStyles.compactTimeList}`, children: timeOptions.map((time) => {
+                                                const isSelected = time === selectedTime;
+                                                return (jsxRuntime.jsx("button", { type: "button", className: isSelected ? timeStyles.selected : "", onClick: () => handleTimeSelect(time), children: time }, time));
+                                            }) })] })] }))] })] }) }));
 }
 
 const ResourcesTitleList = ({ resources, canBePinned, includesPinned, onCrewPinning, onClickResourceContextMenu, ResourceTitleComponent, }) => {
@@ -7223,7 +6784,7 @@ crewAssignmentSchedulerContextMenu, }) => {
 };
 
 const TimeLine$1 = ({ id, toolTipTitle, marginLeft, color = "rgba(255,0,0,.6)", pixels = 2, height = "100%", zIndex = 1, }) => {
-    return (jsxRuntime.jsx(antd.Tooltip, { title: toolTipTitle, children: jsxRuntime.jsx("div", { id: id, style: {
+    return (jsxRuntime.jsx(CwGenericTooltip, { content: toolTipTitle, position: "top", children: jsxRuntime.jsx("div", { id: id, style: {
                 borderLeft: `${pixels}px solid ${color}`,
                 marginLeft: marginLeft,
                 width: "0px",
@@ -8215,17 +7776,6 @@ const BackgroundEvent = ({ value, heightRem }) => {
                                 }, children: value.icons }) : null, jsxRuntime.jsx("span", { className: styles$2["scheduler-event-text"], children: value.name })] }) }) }) }) })) : null;
 };
 
-var styles$1 = {"scheduler-row-header":"scheduler-row-module_scheduler-row-header__S-iv4"};
-
-const DefaultRowHeader = ({ value, width, onEvent }) => {
-    return (jsxRuntime.jsxs("div", { style: {
-            width: width,
-            // background: color,
-        }, onClick: (_) => {
-            onEvent(new OnClickRowHeader(value.rowId));
-        }, className: styles$1["scheduler-row-header"], children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: value.title }), value.title2 && jsxRuntime.jsxs("span", { children: ["-", value.title2] }), " ", jsxRuntime.jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxRuntime.jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 && jsxRuntime.jsxs("span", { className: styles$1["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }));
-};
-
 function useSingleAndDoubleClicks(onClick, onDoubleClick) {
     const timer = React.useRef(null);
     const cancelPendingClick = React.useCallback(() => {
@@ -8253,6 +7803,60 @@ function useSingleAndDoubleClicks(onClick, 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 (jsxRuntime.jsx(TimeLine, { color: color, left: left + "%", height: height, width: width, top: top }));
+};
+
+const WeekEndLine = ({ left, top = "0px", height, widthPercentage }) => {
+    return (jsxRuntime.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 (jsxRuntime.jsxs("div", { style: {
+            width: width,
+            // background: color,
+        }, onClick: (_) => {
+            onEvent(new OnClickRowHeader(value.rowId));
+        }, className: styles$1["scheduler-row-header"], children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: value.title }), value.title2 && jsxRuntime.jsxs("span", { children: ["-", value.title2] }), " ", jsxRuntime.jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxRuntime.jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 && jsxRuntime.jsxs("span", { className: styles$1["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }));
+};
+
 const EventSideDrag = ({ left = false, heightRem, onStartEvent }) => {
     return (jsxRuntime.jsx("span", { draggable: true, onDragStart: (e) => {
             e.stopPropagation();
@@ -8305,6 +7909,7 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
                 top: "2px",
                 left: `${value.left}%`,
                 width: `${value.width}%`,
+                minWidth: "5px",
                 position: "absolute",
                 zIndex: isOnDrag ? 999 : undefined,
                 contentVisibility: "auto",
@@ -8321,7 +7926,7 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
             }, onDragEnd: (_) => {
                 if (value.isDraggable)
                     setIsOnDrag(false);
-            }, children: jsxRuntime.jsx(CwGenericTooltip, { content: value.tooltip, position: "bottom", hide: isOnDrag, dissapearsWhenHover: true, showDelay: 200, children: jsxRuntime.jsxs("div", { style: {
+            }, children: jsxRuntime.jsx(CwTooltipNew, { content: value.tooltip, position: "bottom", hide: isOnDrag, showDelay: 200, children: jsxRuntime.jsxs("div", { style: {
                         border: value.selected ? "2px solid black" : "none",
                         backgroundColor: backColor,
                         height: `calc(${heightRem}rem - 4px)`,
@@ -8366,47 +7971,6 @@ 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 (jsxRuntime.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 (jsxRuntime.jsx(TimeLine, { color: "rgba(0,0,0,0.05)", left: left + "%", height: height, width: widthPercentage + "%", top: top }));
-};
-
 const SchedulerRow = React.memo((props) => {
     const [isContextMenuOpen, setIsContextMenuOpen] = React.useState(false);
     const { events, backgroundEvents, rowHeader, contextMenuItems, RowTitleComp, EventComp, BackgroundEventComp, weekendLines, divisionLines, timeLinePercentage, selectedDate, visibleDays, onEvent, } = props;
@@ -8453,7 +8017,7 @@ const SchedulerRow = React.memo((props) => {
                         }
                     }, onDragOver: (e) => {
                         e.preventDefault();
-                    }, onClick: handleClick, onDoubleClick: handleDoubleClick, children: [weekendLines.map((weekend) => (jsxRuntime.jsx(WeekEndLine, { height: "100%", left: weekend.left, widthPercentage: weekend.width }, weekend.left))), divisionLines.map((division) => (jsxRuntime.jsx(DivisionLine, { height: "100%", left: division.left }, division.left))), backgroundEvents.length > 0 && backgroundEvents.some((e) => e.isVisible) && (jsxRuntime.jsx("div", { style: {
+                    }, onClick: handleClick, onDoubleClick: handleDoubleClick, children: [weekendLines.map((weekend) => (jsxRuntime.jsx(WeekEndLine, { height: "100%", left: weekend.left, widthPercentage: weekend.width }, weekend.left))), divisionLines.map((division) => (jsxRuntime.jsx(DivisionLine, { height: "100%", left: division.left, isDayBoundary: division.isDayBoundary }, division.left))), backgroundEvents.length > 0 && backgroundEvents.some((e) => e.isVisible) && (jsxRuntime.jsx("div", { style: {
                                 height: "100%",
                                 position: internalRows.length > 0 ? "absolute" : "relative",
                                 width: "100%",
@@ -8496,22 +8060,26 @@ const SchedulerRow = React.memo((props) => {
     return true;
 });
 
+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) => {
-    if (days <= 3) {
-        return 8;
-    }
-    if (days <= 7) {
-        return 3;
-    }
-    return 2;
+    const rule = DIVISION_RULES.find((it) => days <= it.maxDays);
+    return rule?.divisions ?? DEFAULT_DIVISIONS;
 };
-const getHoursFromDivisions = (divisions) => {
+const getHoursFromDivisions = (divisions, useCompactHourFormat = false) => {
     const hoursInterval = 24 / divisions;
+    const hourFormat = useCompactHourFormat ? "HH[h]" : "HH:mm";
     const array = [];
     for (let i = 0; i < divisions; i++) {
         const newHour = moment(new Date(1, 1, 1))
             .add(hoursInterval * i, "hours")
-            .format("HH:mm");
+            .format(hourFormat);
         array.push(newHour);
     }
     return array;
@@ -8529,12 +8097,16 @@ const getDefaultDivisions = (visibleDays, selectedDate) => {
 };
 const getDayDivisions = (visibleDays, selectedDate) => {
     const divisionsNumber = calculateDivisionsByDays(visibleDays);
-    const divisions = getHoursFromDivisions(divisionsNumber);
+    const divisions = getHoursFromDivisions(divisionsNumber, visibleDays < 3);
     const calculatedDivision = [];
     for (let i = 0; i < visibleDays; i++) {
         const currentDate = moment(selectedDate).add(i, "days");
+        const weekdayShort = currentDate.format("ddd");
+        const weekdayLabel = visibleDays < 8
+            ? weekdayShort
+            : weekdayShort.charAt(0).toUpperCase();
         calculatedDivision.push({
-            top: currentDate.format("DD.MM.YYYY"),
+            top: `${weekdayLabel} ${currentDate.format("DD.MM")}`,
             bottom: divisions,
             startDate: currentDate.toDate(),
             endDate: currentDate.toDate()
@@ -8659,7 +8231,10 @@ const getEventSizes = (schedulerDate, totalDays, startDate, endDate) => {
         startHours = 0;
     }
     const left = (startHours / totalHours) * 100;
-    const width = (durationHours * 100) / totalHours;
+    // 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,
@@ -8667,16 +8242,13 @@ const getEventSizes = (schedulerDate, totalDays, startDate, endDate) => {
 };
 
 function getLinesByDivisions(headerDivision, _) {
-    const lines = headerDivision.flatMap((division) => {
-        return division.bottom;
-    });
+    const lines = headerDivision.flatMap((division) => division.bottom.map((_, i) => ({ isDayBoundary: i === 0 })));
     const left = 100 / lines.length;
-    const finalLines = lines.map((_, index) => {
-        return {
-            left: left * index,
-            width: 1,
-        };
-    }).filter((_, index) => index !== 0);
+    const finalLines = lines.map((line, index) => ({
+        left: left * index,
+        width: 1,
+        isDayBoundary: line.isDayBoundary,
+    })).filter((_, index) => index !== 0);
     return finalLines;
 }
 
@@ -8715,9 +8287,6 @@ const getWeekendsDaysInDateRange = (initialDate, visibleDays) => {
     return weekends;
 };
 
-class UiEvent {
-}
-
 const getNow = (isUtc) => {
     let now = new Date();
     if (!isUtc) {
@@ -8725,11 +8294,10 @@ const getNow = (isUtc) => {
     }
     return now;
 };
-const rowsHeight = 1.75; // rem
 const milliSecondsInSecond = 1000;
 const refreshMilliSeconds = 45 * milliSecondsInSecond;
 const Scheduler = (props) => {
-    const { header: headerContent, id, events: eventsState, backgroundEvents, contextMenuItems, EventComp, RowTitleComp, orderCategories = ["title"], useOrderCategory, onEvent, groupRowColors, rowHeaderWidth = 180, } = props;
+    const { header: headerContent, id, events: eventsState, backgroundEvents, contextMenuItems, EventComp, RowTitleComp, orderCategories = ["title"], useOrderCategory, onEvent, groupRowColors, rowHeaderWidth = 180, rowHeightRem = 1.75, } = props;
     const BackgroundEventComp = props.BackgroundEventComp ?? BackgroundEvent;
     const rows = useOrderCategory === false
         ? props.rows
@@ -8745,8 +8313,12 @@ const Scheduler = (props) => {
     React.useEffect(() => {
         instanceRef.current?.resetAfterIndex(0);
     }, [orderCategories, props.rows.length, events]);
-    const notEmptyRows = stateVisibleRows ?? rows.length;
-    const visibleRows = height(events, rows, notEmptyRows);
+    const totalSubRows = rows.reduce((acc, row) => {
+        const filteredEvents = events.filter((it) => it.rowId === row.rowId);
+        const innerRows = separateEventsToInnerRows(filteredEvents);
+        return acc + Math.max(innerRows.length, 1);
+    }, 0);
+    const visibleRows = Math.min(stateVisibleRows ?? totalSubRows, totalSubRows);
     const totalHours = visibleDays * 24;
     const [timeLinePercentage, setTimeLinePercentage] = React.useState(0);
     const header = {
@@ -8761,7 +8333,7 @@ const Scheduler = (props) => {
     };
     const evenColor = "var(--cw-color-surface-container-low)";
     const oddColor = "var(--cw-color-surface-container)";
-    const schedulerContentHeight = rowsHeight * visibleRows;
+    const schedulerContentHeight = rowHeightRem * Math.max(visibleRows, 1);
     const weekendsLines = getWeekendLinesByDatesVisible(selectedDate, visibleDays);
     const divisionLines = getLinesByDivisions(header.divisions);
     // Timeline percentage calculation
@@ -8788,7 +8360,7 @@ const Scheduler = (props) => {
         return (jsxRuntime.jsx("div", { style: {
                 ...style,
                 backgroundColor: rowColor
-            }, children: jsxRuntime.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));
+            }, children: jsxRuntime.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: rowHeightRem, onEvent: onEvent, contextMenuItems: contextMenuItems, visibleDays: visibleDays, selectedDate: selectedDate }) }, row.rowId));
     });
     const getItemSize = React.useCallback((index) => {
         const row = rows[index];
@@ -8796,7 +8368,7 @@ const Scheduler = (props) => {
         const innerRows = separateEventsToInnerRows(filteredEvents);
         const rowsNumber = innerRows.length > 0 ? innerRows.length : 1;
         const pixelsInRem = 16;
-        return rowsNumber * rowsHeight * pixelsInRem;
+        return rowsNumber * rowHeightRem * pixelsInRem;
     }, [rows, events]);
     // Render
     return (jsxRuntime.jsxs("div", { id: id, style: {
@@ -8810,15 +8382,9 @@ const Scheduler = (props) => {
                     zIndex: 1,
                 }, children: jsxRuntime.jsx(SchedulerHeader, { ...header }) })), jsxRuntime.jsx(reactWindow.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__namespace.Component {
@@ -9160,11 +8726,12 @@ class OnClearPinned {
 const PinRowHeader = ({ value, width, onEvent }) => {
     const [isContextMenuOpen, setIsContextMenuOpen] = React.useState(false);
     const { highlightColor, isLoading } = value;
-    return (jsxRuntime.jsx(CwAnchoredMenu, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "right", options: value.contextMenuItems ?? [], onSelect: (key) => {
+    return jsxRuntime.jsx(CwAnchoredMenu, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "right", options: value.contextMenuItems ?? [], onSelect: (key) => {
             onEvent(new OnClickContextMenu(value.rowId, key));
-        }, children: jsxRuntime.jsx(CwGenericTooltip, { content: value.tooltip, position: "right", dissapearsWhenHover: true, overlayStyle: value.overlayTooltipStyle, children: jsxRuntime.jsxs("div", { style: {
+        }, children: jsxRuntime.jsx(CwTooltipNew, { content: value.tooltip, position: "right", dissapearsWhenHover: true, children: jsxRuntime.jsxs("div", { style: {
                     width: width,
-                    background: highlightColor,
+                    height: "100%",
+                    background: highlightColor
                 }, className: styles["super-scheduler-row-header"], children: [jsxRuntime.jsx("button", { className: "cw-button-icon cwi-pin", "data-pinned": value.isPinned, onClick: (_) => {
                             onEvent(value.isPinned ? new OnUnpinRow(value.rowId) : new OnPinRow(value.rowId));
                         } }), jsxRuntime.jsx("div", { className: styles["indicators"], children: value.indicators ?? undefined }), jsxRuntime.jsxs("div", { style: {
@@ -9173,19 +8740,19 @@ const PinRowHeader = ({ value, width, onEvent }) => {
                             justifyContent: "center",
                             alignItems: "flex-start",
                         }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: value.title }), value.title2 && jsxRuntime.jsxs("span", { children: ["-", value.title2] }), " ", jsxRuntime.jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxRuntime.jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 &&
-                                        jsxRuntime.jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }), isLoading ? jsxRuntime.jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }) }, value.rowId) }, value.rowId));
+                                        jsxRuntime.jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }), isLoading ? jsxRuntime.jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }) }, value.rowId) }, value.rowId);
 };
 
-const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory, unPinnedOrderCategory, backgroundEvents, contextMenuItems, onEvent }) => {
+const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory, unPinnedOrderCategory, backgroundEvents, contextMenuItems, onEvent, rowHeightRem = 1.75 }) => {
     const pinnedRows = rows.filter((it) => it.isPinned);
     const notPinnedRows = rows.filter((it) => !it.isPinned);
     const isFirstVisible = pinnedRows.length > 0;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFirstVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CwButton, { onClick: () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFirstVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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, rowHeightRem: rowHeightRem }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CwButton, { onClick: () => {
                                 onEvent(new OnClearPinned());
-                            }, children: "Clear pinned" }) })] })), jsxRuntime.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 })] }));
+                            }, children: "Clear pinned" }) })] })), jsxRuntime.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, rowHeightRem: rowHeightRem })] }));
 };
 
-const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder = "Search airport…", required = false, cblConfig, className = "", value, disabled = false, displayMode, labelProps, alignProps, width }) => {
+const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder = "Search airport…", required = false, cblConfig, className = "", value, disabled = false, displayMode, initialDisplayText, labelProps, alignProps, width }) => {
     // State
     const [inputValue, setInputValue] = React.useState("");
     const [options, setOptions] = React.useState([]);
@@ -9391,9 +8958,15 @@ const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder
     // Load initial value
     React.useEffect(() => {
         if (value && value !== 0 && value !== -1) {
-            fetchAirportData(value);
+            if (initialDisplayText) {
+                setInputValue(initialDisplayText);
+                setTooltipText(initialDisplayText);
+            }
+            else {
+                fetchAirportData(value);
+            }
         }
-    }, [value, fetchAirportData]);
+    }, [value, fetchAirportData, initialDisplayText]);
     React.useEffect(() => {
         if (!value || value === 0 || value === -1) {
             setInputValue("");
@@ -9436,7 +9009,9 @@ exports.CwBtnSave = CwBtnSave;
 exports.CwButton = CwButton;
 exports.CwCard = CwCard;
 exports.CwCardList = CwCardList;
+exports.CwCheck = CwCheck;
 exports.CwCheckbox = CwCheckbox;
+exports.CwCheckboxGroup = CwCheckboxGroup;
 exports.CwChip = CwChip;
 exports.CwColorPicker = CwColorPicker;
 exports.CwConfirmationPopup = CwConfirmationPopup;
@@ -9475,6 +9050,7 @@ exports.CwKeyValueList = CwKeyValueList;
 exports.CwLabel = CwLabel;
 exports.CwLoading = CwLoading;
 exports.CwLoadingSmall = CwLoadingSmall;
+exports.CwMasterDetail = CwMasterDetail;
 exports.CwMessage = CwMessage;
 exports.CwMessageManager = CwMessageManager;
 exports.CwModal = CwModal;
@@ -9486,12 +9062,12 @@ exports.CwNote = CwNote;
 exports.CwOption = CwOption;
 exports.CwReportModal = CwReportModal;
 exports.CwScheduler = CwScheduler;
-exports.CwScheduler2 = CwScheduler2;
 exports.CwSearchInput = CwSearchInput;
 exports.CwSelect = CwSelect;
 exports.CwSelectList = CwSelectList;
 exports.CwSelectListItems = CwSelectListItems;
 exports.CwSortableList = CwSortableList;
+exports.CwSortableTable = CwSortableTable;
 exports.CwSuperScheduler = CwSuperScheduler;
 exports.CwTable = CwTable;
 exports.CwTableGrouped = CwTableGrouped;
@@ -9501,7 +9077,8 @@ exports.CwTextArea = CwTextArea;
 exports.CwTime = CwTime;
 exports.CwTimePicker = CwTimePicker;
 exports.CwToggle = CwToggle;
-exports.CwTooltip = CwTooltip;
+exports.CwTooltipManager = CwTooltipManager;
+exports.CwTooltipNew = CwTooltipNew;
 exports.CwTreeView = CwTreeView;
 exports.CwWeekdaySelector = CwWeekdaySelector;
 exports.DefaultRowHeader = DefaultRowHeader;
@@ -9540,3 +9117,4 @@ exports.getEventSizes = getEventSizes;
 exports.itemsToMultiFilterTags = itemsToMultiFilterTags;
 exports.useCwMessage = useCwMessage;
 exports.useSortableList = useSortableList;
+exports.useSortableTable = useSortableTable;