@cwellt_software/cwellt-reactjs-lib 1.1.7 → 1.2.1

package/dist/index.es.js

@@ -1,16 +1,16 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useEffect, useState, useCallback, useRef, useMemo, forwardRef, useLayoutEffect, useImperativeHandle, createElement, memo, Fragment as Fragment$1, Component } from 'react';
+import React__default, { cloneElement, useEffect, useState, useCallback, useRef, useMemo, forwardRef, useLayoutEffect, useImperativeHandle, createElement, memo, Fragment as Fragment$1, Component } from 'react';
 import { createRoot } from 'react-dom/client';
 import { createPortal } from 'react-dom';
-import { Tooltip, Modal, Select, Tag, Dropdown, Menu } from 'antd';
+import { Tooltip, Dropdown, Menu } from 'antd';
 import Draggable from 'react-draggable';
 import moment from 'moment';
 import { format } from 'date-fns';
 import { enGB } from 'date-fns/locale';
 import { DayPicker, useNavigation } from 'react-day-picker';
 import 'react-day-picker/dist/style.css';
-import lodash from 'lodash';
+import { cloneDeep } from 'lodash-es';
 import { VariableSizeList } from 'react-window';
 
 class CwSelectList {
@@ -51,70 +51,16 @@ function CwHeadingSecond(props) {
     return (jsx("div", { className: "cw-heading", children: jsx("h3", { className: "cwHeading_desc", ...headingProps, children: children }) }));
 }
 
-/**
- * General purpose aligner flex container, useful for column or row view.
- * @remarks
- * ```txt
- * flexDirection="row" (default):
- *
- * <Row A> | - item 1 - item 2 - item 3 |
- * <Row B> | - item 1 - item 2 - item 3 |
- *
- * flexDirection="column":
- *
- *   <Col A>    <Col B>
- * | - item 1 | - item 1 |
- * | - item 2 | - item 2 |
- * | - item 3 | - item 3 |
- *
- * ```
- * @example
- * <CwAlign flexDirection="column">
- *   <div>
- *     <h2>ColumnA</h2>
- *   </div>
- *   <div>
- *     <h2>ColumnB</h2>
- *   </div>
- * </CwAlign>
- */
-function CwAlign(props) {
-    const { alignContent, alignItems, alignSelf, bottom, display, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, cssHeight, justifyContent, left, margin, order, padding, position, right, top, cssWidth, gap, ...divProps } = props;
-    return (jsx("div", { className: "cw-align", ...divProps, style: {
-            alignContent: alignContent,
-            alignItems: alignItems,
-            alignSelf: alignSelf,
-            bottom: bottom,
-            display: display ?? "flex",
-            flexBasis: flexBasis,
-            flexDirection: flexDirection,
-            flexGrow: flexGrow,
-            flexShrink: flexShrink,
-            flexWrap: flexWrap,
-            height: cssHeight,
-            justifyContent: justifyContent,
-            left: left,
-            margin: margin,
-            order: order,
-            padding: padding,
-            position: position,
-            right: right,
-            top: top,
-            width: cssWidth,
-            gap: gap
-        }, children: props.children }));
-}
-
 /**
  * Label for form controls.
  * @example
  * ```tsx
- * <CwLabelForm justify="right" >Username:</CwLabelForm>
+ * <CwLabel justify="right" >Username:</CwLabel>
  * ```
  */
 function CwLabel(props) {
-    const { justify, text, labelHeight, labelWidth, alignProps, margin, ...labelProps } = props;
-    return (jsx("span", { className: "cw-label", children: jsx(CwAlign, { ...alignProps, children: jsx("label", { style: { textAlign: justify, width: labelWidth, height: labelHeight, margin: margin ?? "1px 0 0 0" }, ...labelProps, children: labelProps.children ?? text }) }) }));
+    const { justify, text, labelHeight, labelWidth, margin, ...labelProps } = props;
+    return (jsx("label", { className: "cw-label", style: { textAlign: justify, width: labelWidth, height: labelHeight, margin: margin ?? "1px 0 0 0" }, ...labelProps, children: labelProps.children ?? text }));
 }
 
 function CwTooltip(CwelltTooltipProps) {
@@ -198,6 +144,11 @@ function getContrastColor(color) {
     return `hsl(${hsl.h}, ${contrastS}%, ${contrastL}%)`;
 }
 
+const SVG_ICONS = {
+    'sortable-asc': (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 128 128", fill: "currentColor", children: [jsx("path", { d: "M93.1675 73.1739C94.5691 74.5758 94.7323 76.7924 93.5515 78.3846L93.1675 78.8326L63.6741 108.326L34.1755 78.8326C32.6908 77.3518 32.6014 74.9761 33.9708 73.3881C35.3401 71.8001 37.7033 71.5391 39.3861 72.7899L39.8341 73.1739L63.6741 97.0137L87.5088 73.1739C88.9104 71.7726 91.1274 71.6092 92.7194 72.7899L93.1674 73.1739H93.1675Z", opacity: "0.3" }), jsx("path", { d: "M34.1714 55.1518C32.7697 53.7499 32.6066 51.5333 33.7874 49.9411L34.1714 49.4931L63.6647 20L93.1634 49.4931C94.6481 50.9739 94.7375 53.3496 93.3681 54.9376C91.9987 56.5256 89.6356 56.7866 87.9527 55.5358L87.5047 55.1517L63.6647 31.312L39.8301 55.1518C38.4285 56.5531 36.2115 56.7165 34.6195 55.5358L34.1715 55.1518L34.1714 55.1518Z", opacity: "1" })] })),
+    'sortable-desc': (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 128 128", fill: "currentColor", children: [jsx("path", { d: "M93.1675 73.1739C94.5691 74.5758 94.7323 76.7924 93.5515 78.3846L93.1675 78.8326L63.6741 108.326L34.1755 78.8326C32.6908 77.3518 32.6014 74.9761 33.9708 73.3881C35.3401 71.8001 37.7033 71.5391 39.3861 72.7899L39.8341 73.1739L63.6741 97.0137L87.5088 73.1739C88.9104 71.7726 91.1274 71.6092 92.7194 72.7899L93.1674 73.1739H93.1675Z", opacity: "1" }), jsx("path", { d: "M34.1714 55.1518C32.7697 53.7499 32.6066 51.5333 33.7874 49.9411L34.1714 49.4931L63.6647 20L93.1634 49.4931C94.6481 50.9739 94.7375 53.3496 93.3681 54.9376C91.9987 56.5256 89.6356 56.7866 87.9527 55.5358L87.5047 55.1517L63.6647 31.312L39.8301 55.1518C38.4285 56.5531 36.2115 56.7165 34.6195 55.5358L34.1715 55.1518L34.1714 55.1518Z", opacity: "0.3" })] })),
+};
+
 /**
  * Icon component that supports both FontAwesome 4 and cwellt icon font
  * @example
@@ -213,6 +164,12 @@ function CwIcon(props) {
             size && `cw-font-size-${size}`
         ].filter(Boolean).join(' ');
     };
+    // Check if it's a special SVG icon
+    if (iconId in SVG_ICONS) {
+        const svgElement = SVG_ICONS[iconId];
+        const className = getClassName('cw-icon-svg');
+        return cloneElement(svgElement, { className });
+    }
     // Return appropriate icon based on source
     if (source === 'fontawesome') {
         return jsx("span", { ...iconProps, className: getClassName(`fa fa-${iconId}`) });
@@ -239,25 +196,15 @@ const CwChip = ({ label, colorScheme = 'info', customColor, variant = 'soft', cl
     // Calculate styles based on colorScheme, customColor and variant
     const chipStyle = React__default.useMemo(() => {
         if (customColor) {
-            if (variant === 'outline') {
-                // For outline, customColor is used for border and text
-                return {
-                    color: customColor,
-                    borderColor: customColor,
-                    ...style
-                };
-            }
-            else {
-                // For soft/solid, customColor is used for background and we calculate contrast
-                return {
-                    backgroundColor: customColor,
-                    color: getContrastColor(customColor),
-                    ...style
-                };
-            }
+            // Simply set the CSS custom properties, CSS handles the rest
+            return {
+                '--chip-accent': customColor,
+                '--chip-text': getContrastColor(customColor),
+                ...style
+            };
         }
         return style;
-    }, [colorScheme, customColor, variant, style]);
+    }, [customColor, style]);
     // Handle click on close icon
     const handleClose = (e) => {
         e.stopPropagation();
@@ -271,29 +218,9 @@ const CwChip = ({ label, colorScheme = 'info', customColor, variant = 'soft', cl
         className,
         closable ? 'cw-chip-closable' : '',
     ].filter(Boolean).join(' ');
-    return (jsxs("span", { className: chipClassNames, "data-color-scheme": colorScheme, "data-variant": variant, style: chipStyle, children: [icon && jsx(CwIcon, { iconId: icon }), label, closable && (jsx("button", { className: "cw-chip-close-button", onClick: handleClose, "aria-label": "Remove", type: "button", children: jsx("span", { className: "cwi-icons cwi-close" }) }))] }));
+    return (jsxs("span", { className: chipClassNames, "data-color-scheme": colorScheme, "data-variant": variant, style: chipStyle, children: [icon && jsx(CwIcon, { iconId: icon }), jsx("span", { children: label }), closable && (jsx("button", { className: "cw-chip-close-button", onClick: handleClose, "aria-label": "Remove", type: "button", children: jsx("span", { className: "cwi-icons cwi-close" }) }))] }));
 };
 
-function CwTag(tagProps) {
-    const hideTag = (event_clickTag) => {
-        const tag = event_clickTag.currentTarget.parentElement;
-        tag?.classList.add("tag-hidden");
-    };
-    const onClickClosableCustomTag = (event_clickClosableT) => {
-        hideTag(event_clickClosableT);
-        if (tagProps.onClickClosableTag != undefined) {
-            tagProps.onClickClosableTag(event_clickClosableT);
-        }
-    };
-    const onClickCustomTag = (event_clickTag) => {
-        // click option interface
-        if (tagProps.onClickTag !== undefined) {
-            tagProps.onClickTag(event_clickTag);
-        }
-    };
-    return (jsxs("div", { className: "cw-tag", style: tagProps.styleTag, onClick: event_clickTag => onClickCustomTag(event_clickTag), id: tagProps.idTag, ref: tagProps.ref, children: [jsx("strong", { style: tagProps.styleTag_description, children: tagProps.children }), tagProps.closableTag && (jsx(CwIcon, { iconId: "close", onClick: event_clickClosableT => onClickClosableCustomTag(event_clickClosableT) }))] }));
-}
-
 const CW_DEFAULT_MESSAGE_DURATION = 2000;
 var CwMessageType;
 (function (CwMessageType) {
@@ -692,7 +619,7 @@ function CwLoadingSmall(CwelltLoadingAppointements) {
         jsx("div", {})) }));
 }
 
-var styles$k = {"cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si"};
+var styles$k = {"cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si","cw-generic-tooltip":"cw-generic-tooltip-module_cw-generic-tooltip__Ij76M"};
 
 // Constants moved outside to prevent recreation
 const margin = 16;
@@ -797,7 +724,7 @@ const useTooltipPosition = (isVisible, containerRef, preferredPosition, tooltipC
     return tooltipState;
 };
 // Main component with optimizations
-const CwGenericTooltip = ({ children, content = null, position = defaultPosition, dissapearsWhenHover = false, hide = false, overlayStyle = {}, showDelay = 0, }) => {
+const CwGenericTooltip = ({ children, content = null, position = defaultPosition, dissapearsWhenHover = false, hide = false, overlayStyle = {}, showDelay = 0, displayInline = false, }) => {
     const [isVisible, setIsVisible] = useState(false);
     const containerRef = useRef(null);
     const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => {
@@ -808,7 +735,7 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
     const tooltipContent = useMemo(() => {
         if (hide || !isVisible || !content)
             return null;
-        return createPortal(jsx("div", { className: styles$k["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, style: {
+        return createPortal(jsx("div", { className: styles$k["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, "data-inline": displayInline, style: {
                 position: 'fixed',
                 top: `${tooltipPosition.top}px`,
                 left: `${tooltipPosition.left}px`,
@@ -823,10 +750,14 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
         clearTooltipTimeout();
         setIsVisible(false);
     }, [clearTooltipTimeout]);
-    return (jsxs("div", { ref: containerRef, className: styles$k["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, children: [tooltipContent, children] }));
+    return (jsxs("div", { ref: containerRef, className: styles$k["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, children: [tooltipContent, children] }));
 };
 
 // Reference for draggable modal
+/**
+ * **Note:** For new development, we recommend using {@link CwDialog} instead. CwModal remains supported for existing code.
+ * @see {@link CwDialog}
+ */
 function CwModal(custModalProps) {
     const draggableRef = useRef(null);
     // Hooks [ modal draggable ]
@@ -860,7 +791,7 @@ function CwModal(custModalProps) {
     };
     return (jsx("div", { children: custModalProps.modalState && (jsxs("div", { className: custModalProps.classNameModalOverlay + " cwelltModalOverlay", children: [jsx("div", { className: "cwelltModalOverlayBg", onClick: custModalProps.onCloseModal }), jsx(Draggable, { disabled: isModalDisabled, axis: "both", nodeRef: draggableRef, children: jsxs("div", { className: custModalProps.classNameModal + " cwelltContainerModal", ref: draggableRef, style: widthModalDef !== "40em" ? modalStyle.widthCustomStyle : modalStyle.widthDefStyle, children: [jsxs("div", { className: "cwelltModalHeader", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [jsx("div", { className: "cwelltModalTitle", children: custModalProps.titleModal }), jsx("button", { className: "cwelltBtnCloseModal", onClick: custModalProps.onCloseModal, children: jsx("span", { className: "cwelltCloseIcon" }) })] }), jsx("div", { className: "cwelltModalBody", children: jsx("div", { className: "cwelltContainerModalBody", style: { position: "relative" }, children: custModalProps.children }) }), isHide === false ? (
                             // [ false : show modal ]
-                            jsxs("div", { className: "cwelltModalFooter", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [jsx(Tooltip, { placement: "bottom", title: "Save", color: "#368ee0", children: jsx("div", { className: "cwellt_flex cwellt_justify_center cwelltModalFooterContButton", style: { width: "2em" }, children: jsx("button", { className: "btnModalFooterAction cwellt_btn_act cwellt_btn_act_df cwellt_btn_Nbg cwellt_btn_save ", onClick: custModalProps.onSaveModal, form: custModalProps.formSaveModal, hidden: custModalProps.HideBtnModal, type: custModalProps.HtmlSubmitModal }) }) }), isShowcustButton === true ? (jsx(Tooltip, { placement: "bottom", title: custModalProps.custButtonTitle, color: custModalProps.custColorButtonTooltip, children: jsx("div", { className: "cwellt_flex cwellt_justify_center cwelltModalFooterContButton", style: { width: "2em" }, children: jsx("button", { className: "btnModalFooterAction cwellt_btn_act cwellt_btn_act_df cwellt_btn_Nbg " +
+                            jsxs("div", { className: "cwelltModalFooter", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [jsx(Tooltip, { placement: "bottom", title: "Save", color: "#368ee0", children: jsx("div", { className: "cwellt_flex cwellt_justify_center ", style: { width: "2em" }, children: jsx("button", { className: "cw-button-icon cwi-save", onClick: custModalProps.onSaveModal, form: custModalProps.formSaveModal, hidden: custModalProps.HideBtnModal, type: custModalProps.HtmlSubmitModal }) }) }), isShowcustButton === true ? (jsx(Tooltip, { placement: "bottom", title: custModalProps.custButtonTitle, color: custModalProps.custColorButtonTooltip, children: jsx("div", { className: "cwellt_flex cwellt_justify_center", style: { width: "2em" }, children: jsx("button", { className: "cw-button-icon " +
                                                     custModalProps.custButtonClassName, onClick: custModalProps.custButtonClick }) }) })) : (jsx("div", {}))] })) : (
                             // true [ do not show the modal ]
                             jsx("div", { style: { display: "none" } }))] }) })] })) }));
@@ -938,80 +869,19 @@ function CwConfirmationPopup(props) {
                     }, children: [jsx("p", { className: styles$j.message, children: message }), jsxs("div", { className: styles$j.buttons, children: [jsx("button", { className: `${styles$j.button} ${styles$j.confirmButton}`, onClick: onConfirm, children: confirmText }), jsx("button", { className: `${styles$j.button} ${styles$j.cancelButton}`, onClick: onCancel, children: cancelText })] })] }) }))] }));
 }
 
-// Reference for draggable modal
-const draggableRef = React__default.createRef();
-function CwModalConfirm(custModalProps) {
-    const classNameOverlay = custModalProps.classNameModalOverlay !== null || custModalProps.classNameModalOverlay !== undefined
-        ? ""
-        : custModalProps.classNameModalOverlay;
-    // Default size of modal
-    const widthModalDef = custModalProps.widthModalConfirm !== null && custModalProps.widthModalConfirm !== undefined
-        ? custModalProps.widthModalConfirm
-        : "17em";
-    const modalStyle = {
-        // width default
-        widthDefStyle: {
-            width: "17em"
-        },
-        // width customizable
-        widthCustomStyle: {
-            width: custModalProps.widthModalConfirm
-        }
-    };
-    // Hooks [ modal draggable ]
-    const [ismodalDisabled, setModalDisabled] = useState(true);
-    // [ onMouseOver ]
-    const cwelltOnMouseOverModal = () => {
-        setModalDisabled(false);
-    };
-    // [ OnMouseOut ]
-    const cwelltOnMouseOutModal = () => {
-        setModalDisabled(true);
-        // finding parent element
-    };
-    return (jsx("div", { children: custModalProps.modalStateConfirm && (jsx("div", { className: classNameOverlay !== undefined ? custModalProps.classNameModalOverlay + " cwelltModalOverlay" : "", children: jsx(Draggable, { disabled: ismodalDisabled, children: jsxs("div", { className: " cwelltContainerModal", ref: draggableRef, style: widthModalDef !== "17em" ? modalStyle.widthCustomStyle : modalStyle.widthDefStyle, children: [jsxs("div", { className: "cwelltModalHeader", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [jsx("div", { className: "cwelltModalTitle", children: custModalProps.headerTextConfirm }), jsx("button", { className: "cwelltBtnCloseModal", onClick: custModalProps.onCloseModalConfirm, children: jsx("span", { className: "cwelltCloseIcon" }) })] }), jsx("div", { className: "cwelltModalBody", children: jsxs("div", { className: "cwelltContainerModalBody", children: [jsx("div", { className: "cwellt_content_r_df_align", children: jsx("label", { className: "cwellt_modalConfirmDesc", children: custModalProps.descriptionModalConfirm }) }), jsx("div", { style: { display: "none" }, children: custModalProps.children })] }) }), jsx("div", { className: "cwelltModalFooter", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: jsx(Tooltip, { placement: "bottom", title: custModalProps.confirmText, color: "#368ee0", children: jsx("div", { className: "cwellt_flex cwellt_justify_center", style: { width: "2em" }, children: jsx("button", { className: "btnModalFooterAction cwellt_btn_act cwellt_btn_act_df cwellt_btn_Nbg  " +
-                                            custModalProps.confirmClassName, onClick: custModalProps.onClickActionModalConfirm }) }) }) })] }) }) })) }));
-}
-
-class CwModalIframe extends React.Component {
-    constructor(Props) {
-        super(Props);
-        this.state = {
-            disabled: true
-        };
+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}`;
     }
-    // For draggable modal
-    draggableRef = React.createRef();
-    handleCancel = () => {
-        this.props.SET_IFRAME_VISIBLE(false);
-    };
-    render() {
-        const { disabled } = this.state;
-        return (jsx(Modal
-        // title={this.props.title}
-        , { 
-            // title={this.props.title}
-            title: jsx("div", { style: {
-                    width: "100%",
-                    cursor: "move"
-                }, onMouseOver: () => {
-                    if (this.state.disabled) {
-                        this.setState({
-                            disabled: false
-                        });
-                    }
-                }, onMouseOut: () => {
-                    this.setState({
-                        disabled: true
-                    });
-                }, children: this.props.title }), visible: this.props.visible, width: this.props.width, footer: null, bodyStyle: {
-                padding: 0,
-                width: this.props.width + "px",
-                height: this.props.height + "px"
-            }, onCancel: () => {
-                this.handleCancel();
-            }, destroyOnClose: true, modalRender: modal => (jsx(Draggable, { disabled: disabled, children: jsxs("div", { ref: this.draggableRef, children: [" ", modal] }) })), children: jsx("div", { className: "videoWrapper", children: jsx("iframe", { id: "iframeAspx", title: this.props.title, src: this.props.cblConfig + "/SSO/SSORedirect?url=" + encodeURIComponent(this.props.url) }) }) }));
+    if (className) {
+        buttonClass += ` ${className}`;
     }
+    const tooltipContent = title || (variant === 'icon' && text ? text : undefined);
+    const buttonElement = (jsx("button", { type: "button", className: buttonClass, ...buttonProps, "data-color": color, "aria-label": tooltipContent, children: variant === 'icon' ? null : (children ?? (jsxs(Fragment, { children: [icon && jsx(CwIcon, { iconId: icon }), text && jsx("strong", { children: text })] }))) }));
+    return tooltipContent ? (jsx(CwGenericTooltip, { content: tooltipContent, position: tooltipPosition, displayInline: true, children: buttonElement })) : (buttonElement);
 }
 
 var styles$i = {"cw-dialog-main":"cw-dialog-module_cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module_cw-dialog-button-close__9GRd8"};
@@ -1055,6 +925,8 @@ 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 dialogRef = useRef(null);
+    const [isPressingScrim, setIsPressingScrim] = useState(false);
+    const pressTimerRef = useRef(0);
     const initialSetup = useMemo(() => {
         // Default width and height with units
         const defaultWidth = 800;
@@ -1225,14 +1097,34 @@ const CwDialog = props => {
         e.stopPropagation();
         setResizeDirection(direction);
     }, []);
-    const handleScrimClick = useCallback((e) => {
-        if (e.target === e.currentTarget && onClose) {
-            onClose();
-        }
+    // Click on scrim
+    const handleScrimMouseDown = useCallback((e) => {
+        if (e.target !== e.currentTarget)
+            return;
+        setIsPressingScrim(true);
+        pressTimerRef.current = window.setTimeout(() => {
+            if (onClose) {
+                onClose();
+            }
+        }, 500);
     }, [onClose]);
+    const handleScrimMouseUpOrLeave = useCallback(() => {
+        if (pressTimerRef.current) {
+            window.clearTimeout(pressTimerRef.current);
+        }
+        setIsPressingScrim(false);
+    }, []);
+    useEffect(() => {
+        if (!open) {
+            setIsPressingScrim(false);
+            if (pressTimerRef.current) {
+                window.clearTimeout(pressTimerRef.current);
+            }
+        }
+    }, [open]);
     const header = useMemo(() => (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: headline }), customHeader || (jsx("button", { className: styles$i["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
     const content = useMemo(() => (jsx("section", { children: children })), [children]);
-    const footer = useMemo(() => (jsx("footer", { children: customFooter || (jsx("button", { className: "cw-button-icon cwi-save", onClick: onSave })) })), [customFooter, onSave]);
+    const footer = useMemo(() => (jsx("footer", { children: customFooter || (jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: onSave, tooltipPosition: "top" })) })), [customFooter, onSave]);
     const resizeHandles = useMemo(() => size.autoHeight
         ? [
             // Only horizontal handles if autoHeight is true
@@ -1259,7 +1151,7 @@ const CwDialog = props => {
             : `${convertFromPx(size.height, size.heightUnit)}${size.heightUnit}`;
         return { displayWidth, displayHeight };
     }, [size.width, size.height, size.widthUnit, size.heightUnit, size.autoHeight]);
-    const dialogContent = (jsx("div", { "data-has-scrim": hasScrim, className: styles$i["cw-dialog-main"], onClick: handleScrimClick, children: jsxs("dialog", { ...domProps, ref: dialogRef, style: {
+    const dialogContent = (jsx("div", { "data-has-scrim": hasScrim, className: styles$i["cw-dialog-main"], onMouseDown: handleScrimMouseDown, onMouseUp: handleScrimMouseUpOrLeave, onMouseLeave: handleScrimMouseUpOrLeave, "data-pressing": isPressingScrim, children: jsxs("dialog", { ...domProps, ref: dialogRef, style: {
                 left: `${position.x}px`,
                 top: `${position.y}px`,
                 width: displayDimensions.displayWidth,
@@ -1286,7 +1178,7 @@ const CwModalReportFunctional = (props) => {
             return (jsxs("div", { children: ["Please add a(n) ", props.reportName, " report in ", props.moduleSettings, " Settings"] }));
         }
     };
-    return (jsx("div", { id: "cwelltModalReportContent", children: isModal ? (jsx(CwDialog, { open: props.visible, width: props.width, height: props.height, headline: props.title, onClose: props.onCloseModal, hideFooter: true, children: renderContentModal() })) : (jsx("div", { children: renderContentNotModal() })) }));
+    return (jsx("div", { id: "modal-report-content", children: isModal ? (jsx(CwDialog, { open: props.visible, width: props.width, height: props.height, headline: props.title, onClose: props.onCloseModal, hideFooter: true, className: "modal-report-content", children: renderContentModal() })) : (jsx("div", { children: renderContentNotModal() })) }));
 };
 
 class CwReportModal extends React.Component {
@@ -1306,10 +1198,10 @@ class CwReportModal extends React.Component {
         };
     }
     render() {
-        return (jsx("div", { id: "cwelltModalReportContent", children: this.state.isModal === true ? (jsxs(CwDialog, { open: this.props.visible, width: this.props.width, height: this.props.height, headline: this.props.title, customFooter: new Array(jsx("div", {})), onClose: () => {
+        return (jsx("div", { id: "modal-report-content", children: this.state.isModal === true ? (jsxs(CwDialog, { open: this.props.visible, width: this.props.width, height: this.props.height, headline: this.props.title, onClose: () => {
                     this.formRef?.current?.resetFields();
                     this.props.SET_MODAL_REPORT_VISIBLE(false);
-                }, hideFooter: true, children: [this.props.name !== "Empty.pdf" && (jsx("div", { style: { width: "100%", height: "100%", overflowX: "auto", overflowY: "auto" }, children: jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", style: { width: "100%", height: "100%", display: "block" } }) })), this.props.name === "Empty.pdf" && (jsx("div", { children: jsxs("h1", { style: { marginLeft: "2em" }, children: [" ", "Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }) }))] })) : (jsxs("div", { children: [this.props.name !== "Empty.pdf" && (jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", width: "100%", height: "800px" })), this.props.name === "Empty.pdf" && (jsxs("div", { children: ["Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }))] })) }));
+                }, hideFooter: true, className: "modal-report-content", children: [this.props.name !== "Empty.pdf" && (jsx("div", { style: { width: "100%", height: "100%", overflowX: "auto", overflowY: "auto" }, children: jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", style: { width: "100%", height: "100%", display: "block" } }) })), this.props.name === "Empty.pdf" && (jsx("div", { children: jsxs("h1", { style: { marginLeft: "2em" }, children: [" ", "Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }) }))] })) : (jsxs("div", { children: [this.props.name !== "Empty.pdf" && (jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", width: "100%", height: "800px" })), this.props.name === "Empty.pdf" && (jsxs("div", { children: ["Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }))] })) }));
     }
 }
 
@@ -1410,17 +1302,58 @@ class CwDialogManager {
     }
 }
 
-function CwButton({ text, variant = 'solid', color = 'primary', className = '', icon = "", 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}`;
-    }
-    return (jsx("button", { type: "button", className: buttonClass, ...buttonProps, "data-color": color, children: variant === 'icon' ? null : (children ?? (jsxs(Fragment, { children: [icon && jsx("span", { className: `cwi-icons cwi-${icon}` }), text && jsx("strong", { children: text })] }))) }));
+/**
+ * General purpose aligner flex container, useful for column or row view.
+ * @remarks
+ * ```txt
+ * flexDirection="row" (default):
+ *
+ * <Row A> | - item 1 - item 2 - item 3 |
+ * <Row B> | - item 1 - item 2 - item 3 |
+ *
+ * flexDirection="column":
+ *
+ *   <Col A>    <Col B>
+ * | - item 1 | - item 1 |
+ * | - item 2 | - item 2 |
+ * | - item 3 | - item 3 |
+ *
+ * ```
+ * @example
+ * <CwAlign flexDirection="column">
+ *   <div>
+ *     <h2>ColumnA</h2>
+ *   </div>
+ *   <div>
+ *     <h2>ColumnB</h2>
+ *   </div>
+ * </CwAlign>
+ */
+function CwAlign(props) {
+    const { alignContent, alignItems, alignSelf, bottom, display, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, cssHeight, justifyContent, left, margin, order, padding, position, right, top, cssWidth, gap, ...divProps } = props;
+    return (jsx("div", { className: "cw-align", ...divProps, style: {
+            alignContent: alignContent,
+            alignItems: alignItems,
+            alignSelf: alignSelf,
+            bottom: bottom,
+            display: display ?? "flex",
+            flexBasis: flexBasis,
+            flexDirection: flexDirection,
+            flexGrow: flexGrow,
+            flexShrink: flexShrink,
+            flexWrap: flexWrap,
+            height: cssHeight,
+            justifyContent: justifyContent,
+            left: left,
+            margin: margin,
+            order: order,
+            padding: padding,
+            position: position,
+            right: right,
+            top: top,
+            width: cssWidth,
+            gap: gap
+        }, 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"};
@@ -1541,23 +1474,23 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  * @example
  * const columns: Column<User>[] = [
  *   {
- *     title: 'Name',
- *     dataIndex: 'name',
- *     key: 'name',
+ *     title: "Name",
+ *     dataIndex: "name",
+ *     key: "name",
  *     sortable: true, // Column is sortable
  *     width: 100 // You can define the width of the column
  *   },
  *   {
- *     title: 'Age',
- *     dataIndex: 'age',
- *     key: 'age',
+ *     title: "Age",
+ *     dataIndex: "age",
+ *     key: "age",
  *     sortable: true,
  *     render: (item) => <span>{item.age} years</span> // Custom rendering
  *   },
  *   {
- *     title: 'Address',
- *     dataIndex: 'address',
- *     key: 'address',
+ *     title: "Address",
+ *     dataIndex: "address",
+ *     key: "address",
  *     render: (item) => (
  *       <a href={`https://maps.google.com/?q=${encodeURIComponent(item.address)}`} target="_blank" rel="noreferrer">
  *         {item.address}
@@ -1567,12 +1500,12 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  * ];
  *
  * const data:User[] = [
- *   { key: '1', name: 'Mike', age: 32, address: '10 Downing Street' },
- *   { key: '2', name: 'John', age: 42, address: '11 Downing Street' },
- *   { key: '3', name: 'Andres', age: 33, address: '12 Downing Street' },
- *   { key: '4', name: 'Gabriel', age: 22, address: '13 Downing Street' },
- *   { key: '5', name: 'Sergio', age: 47, address: '14 Downing Street' },
- *   { key: '6', name: 'Zacarias', age: 61, address: '15 Downing Street' }
+ *   { key: "1", name: "Mike", age: 32, address: "10 Downing Street" },
+ *   { key: "2", name: "John", age: 42, address: "11 Downing Street" },
+ *   { key: "3", name: "Andres", age: 33, address: "12 Downing Street" },
+ *   { key: "4", name: "Gabriel", age: 22, address: "13 Downing Street" },
+ *   { key: "5", name: "Sergio", age: 47, address: "14 Downing Street" },
+ *   { key: "6", name: "Zacarias", age: 61, address: "15 Downing Street" }
  * ];
  *
  * const generateExpandedContent = (record) => (
@@ -1587,8 +1520,8 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *   pagination={true}
  *   pageSizeOptions={[3, 5, 10]} // Optional, defaults to [5, 10, 20, 50]
  *   expandedRowRender={generateExpandedContent}
- *   onExpand={(item) => console.log('Expanded:', item)}
- *   rowKey="key" // Optional, defaults to 'key'
+ *   onExpand={(item) => console.log("Expanded:", item)}
+ *   rowKey="key" // Optional, defaults to "key"
  *   textNoData="No data available" // Optional message when no data
  *   loading={false} // Optional, shows loading indicator
  *   scrollHeight={300} // Optional scroll height, defaults to 300
@@ -1597,12 +1530,12 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *   className="my-table" // Optional table class
  *   classNameRow="my-table-row" // Optional class for each row
  *   id="custom-table-id" // Optional ID for the container
- *   style={{ border: '1px solid #ccc' }} // Optional inline styles
+ *   style={{ border: "1px solid #ccc" }} // Optional inline styles
  * />
  *
  * @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, }) {
+function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, rowSelection }) {
     const [currentPage, setCurrentPage] = useState(1);
     const [expandedRowKey, setExpandedRowKey] = useState(null);
     const [sortConfig, setSortConfig] = useState({
@@ -1615,6 +1548,13 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
             acc[col.key] = col.width;
         return acc;
     }, {}));
+    const [selectedKeys, setSelectedKeys] = useState(new Set(rowSelection?.selectedRowKeys || []));
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [data]);
+    useEffect(() => {
+        setSelectedKeys(new Set(rowSelection?.selectedRowKeys || []));
+    }, [rowSelection?.selectedRowKeys]);
     const handleItemsPerPageChange = useCallback((e) => {
         setLocalItemsPerPage(parseInt(e.target.value, 10));
         setCurrentPage(1);
@@ -1649,9 +1589,9 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                 if (bVal == null)
                     return -1;
                 // Handle strings (case-insensitive)
-                if (typeof aVal === 'string' && typeof bVal === 'string') {
+                if (typeof aVal === "string" && typeof bVal === "string") {
                     const comparison = aVal.localeCompare(bVal, undefined, {
-                        sensitivity: 'base',
+                        sensitivity: "base",
                         numeric: true
                     });
                     return comparison * (sortConfig.direction === "asc" ? 1 : -1);
@@ -1662,6 +1602,41 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
         }
         return dataCopy;
     }, [data, sortConfig]);
+    const handleRowClick = useCallback((item, e) => {
+        // Prevent selection if the expand button is clicked
+        if (e.target.closest(".cw-table-col-expand")) {
+            return;
+        }
+        const itemKey = item[rowKey];
+        setSelectedKeys(prev => {
+            const newSet = new Set(prev);
+            if (rowSelection?.type === "single") {
+                // Single mode: only one row selected
+                if (newSet.has(itemKey)) {
+                    newSet.clear(); // Deselect if already selected
+                }
+                else {
+                    newSet.clear();
+                    newSet.add(itemKey);
+                }
+            }
+            else {
+                // Multiple mode: several rows
+                if (newSet.has(itemKey)) {
+                    newSet.delete(itemKey);
+                }
+                else {
+                    newSet.add(itemKey);
+                }
+            }
+            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);
+            }, 0);
+            return newSet;
+        });
+    }, [rowSelection, rowKey, sortedData]);
     const paginatedData = useMemo(() => {
         if (!sortedData)
             return [];
@@ -1703,7 +1678,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
     }, [stickyHeader, scrollHeight]);
     const getColSpan = () => columns.length + (expandedRowRender ? 1 : 0);
     const hasClassNameRow = (item) => {
-        return typeof item === 'object' && item !== null && 'classNameRow' in item;
+        return typeof item === "object" && item !== null && "classNameRow" in item;
     };
     const renderTableBody = () => {
         if (loading) {
@@ -1716,7 +1691,15 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
             const itemKey = item[rowKey];
             if (!itemKey)
                 console.warn("Missing row key for item", item);
-            return (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: `${classNameRow ?? ""} ${hasClassNameRow(item) ? item.classNameRow : ""}`, children: [expandedRowRender && (jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey
+            const isSelected = selectedKeys.has(itemKey);
+            const dynamicClassName = typeof classNameRow === "function"
+                ? classNameRow(item)
+                : classNameRow ?? "";
+            return (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: `${dynamicClassName} ${hasClassNameRow(item) ? item.classNameRow : ""} ${isSelected ? "cw-table-row-selected" : ""}`, onClick: (e) => rowSelection && handleRowClick(item, e), style: {
+                            cursor: rowSelection ? "pointer" : "default",
+                            backgroundColor: isSelected ? "var(--cw-color-info-container)" : undefined,
+                            transition: "background-color 0.2s ease",
+                        }, children: [expandedRowRender && (jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey
                                         ? "cwi-chevron-down"
                                         : "cwi-chevron-right"}` }) })), columns.map(col => (jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex]) : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (jsx("tr", { className: "cw-table-row-expanded", children: jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
         });
@@ -1733,9 +1716,11 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                                                 minWidth: 50,
                                                 maxWidth: columnWidths[col.key] ?? col.width
                                             }),
-                                        }, children: [jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [jsx("span", { children: col.title }), col.sortable && col.dataIndex && (jsx("span", { style: { fontSize: "12px", marginLeft: "6px" }, children: sortConfig.key !== col.dataIndex ? "↕" : sortConfig.direction === "asc"
-                                                            ? "↑"
-                                                            : "↓" }))] }), jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsx("tbody", { children: renderTableBody() })] }) }), pagination && totalPages > 1 && (jsxs("footer", { className: "cw-table-pagination", children: [jsx("button", { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left-double", title: "First" }), jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left", title: "Previous" }), jsx("input", { type: "text", inputMode: "numeric", value: currentPage, onChange: (e) => {
+                                        }, children: [jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsx("span", { children: col.title }), col.sortable && col.dataIndex && (jsx(CwIcon, { size: "large", iconId: sortConfig.key !== col.dataIndex
+                                                            ? "sortable"
+                                                            : sortConfig.direction === "asc"
+                                                                ? "sortable-asc"
+                                                                : "sortable-desc" }))] }), jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsx("tbody", { children: renderTableBody() })] }) }), pagination && totalPages > 1 && (jsxs("footer", { className: "cw-table-pagination", children: [jsx("button", { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left-double", title: "First" }), jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left", title: "Previous" }), jsx("input", { type: "text", inputMode: "numeric", value: currentPage, onChange: (e) => {
                             const value = parseInt(e.target.value, 10);
                             if (!isNaN(value))
                                 handlePageChange(value);
@@ -1747,7 +1732,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                         }, min: 1, max: totalPages }), jsxs("span", { children: ["of ", totalPages] }), jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsx("button", { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, children: pageSizeOptions.map(size => (jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
 }
 
-var styles$e = {"cw-tabs":"cw-tabs-module_cw-tabs__1pmji","cw-tabs-content":"cw-tabs-module_cw-tabs-content__HTp8d"};
+var styles$e = {"cw-tabs":"cw-tabs-module_cw-tabs__1pmji","badge":"cw-tabs-module_badge__AmVxW","cw-tabs-content":"cw-tabs-module_cw-tabs-content__HTp8d"};
 
 const TabIcon = ({ icon }) => {
     if (!icon)
@@ -1797,7 +1782,7 @@ function CwTabs(CwTabsProps) {
     const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
         ? { minWidth: CwTabsProps.tabsListWidth }
         : undefined;
-    return (jsxs("div", { id: CwTabsProps.id, className: styles$e['cw-tabs'], style: CwTabsProps.style, "data-tabs-position": position, children: [jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, children: [jsx(TabIcon, { icon: tab.icon }), tab.title] }, tab.key))) }), jsx("div", { className: styles$e['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
+    return (jsxs("div", { id: CwTabsProps.id, className: styles$e['cw-tabs'], style: CwTabsProps.style, "data-tabs-position": position, children: [jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, children: [jsx(TabIcon, { icon: tab.icon }), tab.title, tab.badge !== undefined && (jsx("span", { className: styles$e['badge'], style: tab.badgeColor ? { backgroundColor: tab.badgeColor, color: getContrastColor(tab.badgeColor) } : undefined, children: tab.badge }))] }, tab.key))) }), jsx("div", { className: styles$e['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
 }
 
 /**
@@ -2098,6 +2083,10 @@ var styles$c = {"fileUploadContainer":"cw-file-upload-multiple-module_fileUpload
 function CwFileUploadMultiple(fileUploadProps) {
     const fileInputRef = useRef(null);
     const [selectedFiles, setSelectedFiles] = useState([]);
+    const [existingFile, setExistingFile] = useState(fileUploadProps.initialFileName);
+    React__default.useEffect(() => {
+        setExistingFile(fileUploadProps.initialFileName);
+    }, [fileUploadProps.initialFileName]);
     const getFileExtension = (filename) => {
         return filename.split('.').pop()?.toUpperCase() || '';
     };
@@ -2202,6 +2191,10 @@ function CwFileUploadMultiple(fileUploadProps) {
             }
         }
     };
+    const handleFileSelectInternal = (event) => {
+        setExistingFile(undefined);
+        handleFileSelect(event);
+    };
     const removeFile = (indexToRemove) => {
         const newFiles = selectedFiles.filter((_, index) => index !== indexToRemove);
         setSelectedFiles(newFiles);
@@ -2228,6 +2221,7 @@ function CwFileUploadMultiple(fileUploadProps) {
         event.stopPropagation();
         const files = event.dataTransfer.files;
         if (files && files.length > 0) {
+            setExistingFile(undefined);
             const updatedFiles = processFiles(files, selectedFiles);
             if (updatedFiles.length > selectedFiles.length || !fileUploadProps.multiple) {
                 setSelectedFiles(updatedFiles);
@@ -2235,7 +2229,12 @@ function CwFileUploadMultiple(fileUploadProps) {
             }
         }
     };
-    return (jsxs("div", { className: `${styles$c.fileUploadContainer} ${fileUploadProps.className}`, children: [jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelect, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles$c.hiddenInput }), selectedFiles.length === 0 ? (jsxs("div", { className: `${styles$c.uploadArea} ${fileUploadProps.disabled ? styles$c.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsx(CwIcon, { iconId: "upload" }), jsx("p", { className: `${styles$c.uploadTitle}`, children: fileUploadProps.disabled ? 'Upload disabled' : 'Click to upload or drag and drop' }), jsxs("p", { className: `${styles$c.uploadSubtitle}`, children: [fileUploadProps.accept ? `Accepted files: ${fileUploadProps.accept}` : 'All file types accepted', !fileUploadProps.multiple && ' (Single file only)'] })] })) : (jsxs("div", { className: styles$c.filesContainer, children: [jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxs("small", { className: styles$c.filesCount, children: [selectedFiles.length, " file", selectedFiles.length !== 1 ? 's' : '', " selected"] }), jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: "Clear all" })] }), selectedFiles.map((file, index) => (jsxs("div", { className: styles$c.fileItem, children: [jsxs("div", { className: styles$c.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$c.fileExtension, children: getFileExtension(file.name) })] }), jsxs("div", { className: styles$c.fileInfo, children: [jsx("p", { className: styles$c.fileName, children: file.name }), jsxs("p", { className: styles$c.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$c.smallButton })] }, index))), fileUploadProps.multiple && (jsx(CwButton, { text: "Add More Files", icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
+    return (jsxs("div", { className: `${styles$c.fileUploadContainer} ${fileUploadProps.className}`, children: [jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelectInternal, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles$c.hiddenInput }), selectedFiles.length === 0 && !existingFile ? (jsxs("div", { className: `${styles$c.uploadArea} ${fileUploadProps.disabled ? styles$c.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsx(CwIcon, { iconId: "upload" }), jsx("p", { className: `${styles$c.uploadTitle}`, children: fileUploadProps.disabled ? 'Upload disabled' : 'Click to upload or drag and drop' }), jsxs("p", { className: `${styles$c.uploadSubtitle}`, children: [fileUploadProps.accept ? `Accepted files: ${fileUploadProps.accept}` : 'All file types accepted', !fileUploadProps.multiple && ' (Single file only)'] })] })) : selectedFiles.length === 0 && existingFile ? (jsxs("div", { className: styles$c.filesContainer, children: [jsxs("div", { className: styles$c.fileItem, children: [jsxs("div", { className: styles$c.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$c.fileExtension, children: getFileExtension(existingFile) })] }), jsx("div", { className: styles$c.fileInfo, children: jsx("p", { className: styles$c.fileName, children: existingFile }) }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => {
+                                    setExistingFile(undefined);
+                                    if (fileUploadProps.onSelect) {
+                                        fileUploadProps.onSelect(null);
+                                    }
+                                }, disabled: fileUploadProps.disabled, className: styles$c.smallButton })] }), jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxs("div", { className: styles$c.filesContainer, children: [jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxs("small", { className: styles$c.filesCount, children: [selectedFiles.length, " file", selectedFiles.length !== 1 ? 's' : '', " selected"] }), jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: "Clear all" })] }), selectedFiles.map((file, index) => (jsxs("div", { className: styles$c.fileItem, children: [jsxs("div", { className: styles$c.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$c.fileExtension, children: getFileExtension(file.name) })] }), jsxs("div", { className: styles$c.fileInfo, children: [jsx("p", { className: styles$c.fileName, children: file.name }), jsxs("p", { className: styles$c.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$c.smallButton })] }, index))), fileUploadProps.multiple && (jsx(CwButton, { text: "Add More Files", icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
 }
 
 function CwInput(CwInputProps) {
@@ -2651,7 +2650,7 @@ function CwInputText(props) {
     const containerClassName = className
         ? `cw-input-text ${className}`
         : "cw-input-text";
-    return (jsx("div", { className: containerClassName, children: jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsx("input", { type: props.type ?? "text", ...inputProps }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
+    return (jsx("div", { className: containerClassName, children: jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: "cw-input-button", children: [jsx("input", { type: props.type ?? "text", ...inputProps }), buttonProps && jsx(CwButton, { ...buttonProps })] })] }) }));
 }
 
 /**
@@ -3276,9 +3275,9 @@ function CwCheckbox(CwCheckboxProps) {
 }
 
 function CwToggle(props) {
-    const { labelProps, labelText, iconProps, alignment = "row", className, ...inputProps } = props;
+    const { labelProps, labelText, iconProps, alignment = "row", className, style, ...inputProps } = props;
     const displayText = labelText || labelProps?.text;
-    return (jsx("div", { className: `cw-toggle${className ? ` ${className}` : ''}`, children: jsxs("label", { className: "cw-toggle-label", "data-direction": alignment, children: [displayText && (jsxs("span", { className: "cw-icon-text", children: [iconProps && jsx(CwIcon, { ...iconProps }), displayText] })), jsx("input", { 
+    return (jsx("div", { className: `cw-toggle ${className ? ` ${className}` : ''}`, style: style, children: jsxs("label", { className: "cw-toggle-label", "data-direction": alignment, children: [displayText && (jsxs("span", { className: "cw-icon-text", children: [iconProps && jsx(CwIcon, { ...iconProps }), displayText] })), jsx("input", { 
                     //data-color={color}
                     type: "checkbox", ...inputProps })] }) }));
 }
@@ -3324,64 +3323,10 @@ function CwOption(props) {
  * </CwSelect>
  */
 function CwSelect(props) {
-    const { alignProps, labelProps, buttonProps, iconProps, placeholder, children, ...selectProps } = props;
+    const { alignProps, labelProps, buttonProps, iconProps, placeholder, children, style, ...selectProps } = props;
     const flexDirection = alignProps?.flexDirection;
     const dataDirection = flexDirection ? { 'data-direction': flexDirection } : {};
-    return (jsx("div", { className: "cw-select", ...dataDirection, children: jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("select", { ...selectProps, children: [placeholder && jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
-}
-
-function CwDropdown(optionsProps) {
-    const [selectedOption, setSelectedOption] = useState(optionsProps.defaultSelected || "");
-    useEffect(() => {
-        if (optionsProps.defaultSelected !== undefined && optionsProps.defaultSelected !== selectedOption) {
-            setSelectedOption(optionsProps.defaultSelected);
-            if (optionsProps.handleChange) {
-                optionsProps.handleChange(optionsProps.defaultSelected);
-            }
-        }
-    }, [optionsProps.defaultSelected, selectedOption, optionsProps.handleChange]);
-    const handleOptionSelect = (event) => {
-        const selectedValue = event.target.value;
-        setSelectedOption(selectedValue);
-        if (optionsProps.handleChange) {
-            optionsProps.handleChange(selectedValue);
-        }
-    };
-    return (jsxs("div", { className: optionsProps.labelPosition === "inline"
-            ? "cwellt_flex cwellt_flex_row cwellt_align_items_center cwDropDownComp" + " " + optionsProps.className
-            : optionsProps.labelPosition === "column"
-                ? "cwellt_flex cwellt_flex_column cwellt_align-items_baseline cwDropDownComp" + " " + optionsProps.className
-                : "cwellt_flex cwellt_flex_row cwellt_align_items_center cwDropDownComp" + " " + optionsProps.className, style: optionsProps.style, id: optionsProps.id, children: [jsx("label", { className: optionsProps.disabled === true
-                    ? "cw_label_text cw_label_text_disabled" + " " + optionsProps.labelClassName
-                    : "cw_label_text" + " " + optionsProps.labelClassName, children: optionsProps.labelName }), jsx("select", { value: selectedOption, onChange: handleOptionSelect, className: "cw_select", style: optionsProps.styleSelect, disabled: optionsProps.disabled || optionsProps.selectList.length === 0, children: optionsProps.selectList.length === 0 ? (jsx("option", { value: "", className: "cw_option", disabled: true, children: "No data" })) : (jsxs(Fragment, { children: [jsx("option", { value: "", className: "cw_option", children: optionsProps.placeholder }), optionsProps.selectList.map(option => (jsx("option", { value: option.id, className: "cw_option", style: optionsProps.styleOption, children: option.description }, option.id)))] })) })] }));
-}
-
-function CwDropdownContainer(dropDownContainerProps) {
-    // #region
-    // - Ref dropDownContainer
-    const dropDownContainer_ref = React.createRef();
-    // - Ref list container
-    const dropDown_listContainer = React.createRef();
-    // #endregion
-    // #region Functions
-    const onKeyPressDropDownContainer = (event_keyDown) => {
-        dropDownContainerProps.onKeyDownDropDownContainer(event_keyDown);
-    };
-    const onMouseLeaveDropDownContainer = (event_onMouseLeave) => {
-        if (typeof dropDownContainerProps.onMouseLeaveDropDownContainer === "function") {
-            dropDownContainerProps.onMouseLeaveDropDownContainer(event_onMouseLeave);
-        }
-    };
-    // #endregion
-    // #region UseEffect
-    useEffect(() => {
-        window.addEventListener("keydown", onKeyPressDropDownContainer);
-        return () => {
-            window.removeEventListener("keydown", onKeyPressDropDownContainer);
-        };
-    }, []);
-    // #endregion
-    return (jsx("div", { className: `cw-dropdown-container ${dropDownContainerProps.className || ''}`, onKeyDown: onKeyPressDropDownContainer, onMouseLeave: onMouseLeaveDropDownContainer, tabIndex: 0, hidden: !dropDownContainerProps.dropDownState, children: jsx("div", { className: "cw-dropdown-list", id: dropDownContainerProps.idDropDownContainer, ref: dropDownContainer_ref, children: jsx("div", { ref: dropDown_listContainer, children: dropDownContainerProps.children }) }) }));
+    return (jsx("div", { className: "cw-select", ...dataDirection, style: style, children: jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("select", { ...selectProps, children: [placeholder && jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
 }
 
 function CwDropdownFilter(props) {
@@ -3394,103 +3339,6 @@ function CwDropdownFilter(props) {
     return (jsxs("div", { id: props.IdContent, className: containerClassName, children: [props.children, isVisible && (jsx("nav", { className: "cw-dropdown-menu", style: inlineStyles, onMouseLeave: props.onMouseLeave, id: props.idDropDownFilter, role: "menu", children: jsx("ul", { role: "none", children: props.DataSourceDropDownItem?.map((item) => (jsx("li", { id: item.IdDropDown_filter, role: "menuitem", children: item.dropDownFilter_desc }, item.IdDropDown_filter))) }) }))] }));
 }
 
-const { Option, OptGroup } = Select;
-class MultiSelect extends React.Component {
-    constructor(Props) {
-        super(Props);
-        this.state = {
-            selected: null,
-            isVisibleDropDown: false,
-            activeClassName: ""
-        };
-    }
-    componentDidMount() {
-        this.setState({
-            selected: this.props.selectedItems?.map((s) => ({
-                type: s.type,
-                id: s.id,
-                despription: s.despription,
-                color: s.color
-            }))
-        });
-        this.onClickSelect = this.onClickSelect.bind(this);
-    }
-    onClickSelect = () => {
-        this.setState({
-            isVisibleDropDown: !this.state.isVisibleDropDown
-        });
-        this.setState({
-            activeClassName: "cwelltSelectDropDown_active"
-        });
-    };
-    handleOnDropDownVisibleChange = () => {
-        const dropDown_content = document.getElementsByClassName("cwelltSelectDropDown");
-        for (let i = 0; i <= dropDown_content.length; i++) {
-            dropDown_content[i]?.addEventListener("mouseleave", () => {
-                this.setState({
-                    isVisibleDropDown: false
-                });
-            });
-        }
-    };
-    onKeyUpSelect = (e_KeyUp_select) => {
-        if (e_KeyUp_select.key === "Enter" || e_KeyUp_select.key === "Escape") {
-            this.setState({
-                isVisibleDropDown: false
-            });
-        }
-        else {
-            this.setState({
-                isVisibleDropDown: true
-            });
-        }
-    };
-    // mouseHover dropDown active
-    onMouseHoverDropDownActive = () => {
-        const dropDown_active = document.getElementsByClassName("cwelltSelectDropDown_active");
-        const itemArray = () => {
-            Array.from(dropDown_active).forEach(index => {
-                const dropDown = index;
-                dropDown.addEventListener("mouseover", () => { });
-            });
-            return true;
-        };
-        if (dropDown_active.length > 0 && itemArray()) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    };
-    //  clicl cwelltDropDown
-    onMouseLeaveMultiSelect = (event_mouseLeave) => {
-        const post = event_mouseLeave.currentTarget.getBoundingClientRect();
-        const posCursorY = event_mouseLeave.clientY;
-        if (posCursorY > post.bottom && this.state.isVisibleDropDown === true) {
-            this.setState({
-                isVisibleDropDown: true
-            });
-        }
-        else {
-            this.setState({
-                isVisibleDropDown: false
-            });
-        }
-    };
-    render() {
-        return (jsx("div", { style: {
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "flexStart",
-                width: "100%"
-            }, id: "contentMultiSelect", onMouseLeave: e => this.onMouseLeaveMultiSelect(e), children: jsx("div", { style: { flex: 1 }, children: jsx(Select, { autoClearSearchValue: true, mode: "multiple", allowClear: true, style: { width: "100%" }, onChange: this.props.handleChange, optionFilterProp: "description", virtual: true, showArrow: true, size: "middle", className: this.props.selectedItems?.length === 0
-                        ? "cwelltMultiSelect cwelltSelect cwelltSelectSimple cwelltMultiSelect_searchIcon"
-                        : "cwelltMultiSelect cwelltSelect cwelltSelectSimple", placeholder: "Search or filter...", dropdownClassName: this.state.isVisibleDropDown
-                        ? " cwelltSelectDropDown cwelltSelectDropDown_active"
-                        : "cwelltSelectDropDown", value: this.props.selectedItems?.map(s => s.type + "_" + s.id), onClick: () => this.onClickSelect(), open: this.state.isVisibleDropDown, onDropdownVisibleChange: () => this.handleOnDropDownVisibleChange(), onKeyUp: e_KeyUp_select => this.onKeyUpSelect(e_KeyUp_select), children: this.props.selectLists.map((slArray, i) => (jsx(OptGroup, { label: slArray.length > 0 ? slArray[0]?.type : "", children: slArray.map(sl => (jsx(Option, { value: sl.type + "_" + sl.id, type: sl.type, description: sl.description, val: sl.id, children: jsx(Tag, { color: sl.color, children: sl.description }) }, sl.type + "_" + sl.id))) }, "_" + i))) }) }) }));
-    }
-}
-
 function itemsToMultiFilterTags(items, nameKey, valueKey, category, primaryColor, onPrimaryColor) {
     const result = new Set();
     items.forEach((item, index) => {
@@ -3506,519 +3354,20 @@ function itemsToMultiFilterTags(items, nameKey, valueKey, category, primaryColor
     return result;
 }
 
-function CwHeadFilter(cwelltFilterTabMultiSelectProps) {
-    // - Reference div content input search
-    const headContent_ref = React.createRef();
-    const optionList = document.getElementsByClassName("cw-multiselect-option-list");
-    const refContent = useRef(null);
-    // - Hooks show clear button
-    const [_isShowClearButton, setShowClearButton] = useState(false);
-    // - Hooks value of input search
-    const [inputValue, setInputValue] = useState("");
-    // Ref [ input ] ( cwellt_headFilterTab )
-    const headInputFitlerTab_ref = useRef(null);
-    const headFilter_content_tags_ref = useRef(null);
-    // cwellt_headFilterTab [ onclick ( show dropDown and enable input .focus() )]
-    const onClickHeaderFilterTab = () => {
-        // Show and hide dropDownContainer - onShowDropDown [ interface ]
-        cwelltFilterTabMultiSelectProps.onShowDropDown();
-        // Click on dropDown enable input - [ ref : headFitlerTab_ref ] and evaluating not null
-        if (headInputFitlerTab_ref.current) {
-            headInputFitlerTab_ref.current.focus();
-        }
-    };
-    // - on change input search
-    const onChangeInputSearch = (event_onChangeInput) => {
-        // let searchInput_length = event_onChangeInput.currentTarget.value.length;
-        // if (searchInput_length > 0) {
-        // 	setShowClearButton(true);
-        // } else {
-        // 	setShowClearButton(false);
-        // }
-        setInputValue(event_onChangeInput.currentTarget.value);
-        // - onChangeSearch
-        cwelltFilterTabMultiSelectProps.onChangeSearch(event_onChangeInput);
-    };
-    // - clear input value
-    const onClearInputValue = (e) => {
-        setInputValue("");
-        setShowClearButton(false);
-        // onClearValue
-        cwelltFilterTabMultiSelectProps.onClearValue(e);
-    };
-    // - onKeyPress
-    const onKeyPressInput = (event_keyPress) => {
-        if (typeof cwelltFilterTabMultiSelectProps.onKeypressInput === "function") {
-            cwelltFilterTabMultiSelectProps.onKeypressInput(event_keyPress);
-            // clear input field
-            if (event_keyPress.key === "Enter") {
-                setInputValue("");
-            }
-        }
-    };
-    const handleBlur = (event) => {
-        if (typeof cwelltFilterTabMultiSelectProps.onBlur === "function") {
-            cwelltFilterTabMultiSelectProps.onBlur(event);
-        }
-    };
-    const clickOptionList = () => {
-        if (optionList.length > 0) {
-            Array.from(optionList).forEach(index => {
-                const optionListItem = index;
-                optionListItem.addEventListener("click", () => {
-                    setInputValue("");
-                });
-            });
-        }
-    };
-    //#region useEffect
-    useEffect(() => {
-        window.addEventListener("keypress", onKeyPressInput);
-        clickOptionList();
-        return () => {
-            window.removeEventListener("keypress", onKeyPressInput);
-        };
-    });
-    //#endregion
-    return (jsxs("div", { className: cwelltFilterTabMultiSelectProps.className + " cw-headfilter", style: cwelltFilterTabMultiSelectProps.style, id: cwelltFilterTabMultiSelectProps.Id, onMouseLeave: cwelltFilterTabMultiSelectProps.onMouseLeave, ref: refContent, children: [jsxs("div", { className: "cw-headfilter-wrapper", onClick: () => onClickHeaderFilterTab(), children: [jsx(CwIcon, { iconId: "search", size: "large" }), jsxs("div", { className: "cw-headfilter-content", children: [jsx("div", { className: "cw-flex-row cw-gap-small cw-align-left-center cw-flex-wrap", ref: headFilter_content_tags_ref, children: cwelltFilterTabMultiSelectProps.tagValueContent }), jsx("div", { className: "headFilter_search_content", ref: headContent_ref, children: jsx("input", { id: "headFilter_inputSearch", value: inputValue, onKeyPress: event_keyPress => onKeyPressInput(event_keyPress), onBlur: handleBlur, type: "search", onChange: event_onChangeInput => onChangeInputSearch(event_onChangeInput), placeholder: cwelltFilterTabMultiSelectProps.placeholder_desc, ref: headInputFitlerTab_ref }) })] }), jsx(CwIcon, { iconId: "close-circle", onClick: (e) => onClearInputValue(e) })] }), cwelltFilterTabMultiSelectProps.children] }));
-}
-
-function CwOptionList(optionListProps) {
-    //#region References
-    // - Ref : optionList
-    const optionListSelected_ref = React.createRef();
-    const optionListSelected_input_ref = React.createRef();
-    //#endregion
-    //#region Hooks
-    // - Hooks : selected optionList
-    // const [isSelectedOptionList, setIsSelectedOptionList] = useState(optionListProps.isSelected || false);
-    //#endregion
-    //#region Functions
-    const onClickSelectOptionList = (event_click) => {
-        // - click of custom component
-        // onSelectedOptionList();
-        // - click of property interface
-        optionListProps.onClick(event_click);
-    };
-    const onKeyPressOptionList = (event_onKeyPress) => {
-        if (typeof optionListProps.onKeyPress === "function") {
-            optionListProps.onKeyPress(event_onKeyPress);
-        }
-    };
-    //#endregion
-    //#region Useffect
-    useEffect(() => {
-        window.addEventListener("keypress", onKeyPressOptionList);
-        return () => {
-            window.removeEventListener("keypress", onKeyPressOptionList);
-        };
-    }, []);
-    //#endregion
-    return (jsxs("div", { className: `cw-multiselect-option-list${optionListProps.isSelected ? ' option-active' : ''}`, onClick: event_click => onClickSelectOptionList(event_click), id: optionListProps.idOptionList, ref: optionListSelected_ref, "aria-value-text": optionListProps.value, onKeyPress: event_onKeyPress => onKeyPressOptionList(event_onKeyPress), style: optionListProps.style, children: [jsx("label", { htmlFor: optionListProps.idOptionList, children: optionListProps.children }), jsx("input", { type: "checkbox", value: optionListProps.value, ref: optionListSelected_input_ref, id: optionListProps.idOptionList, onClick: optionListProps.onChangeOptionList })] }));
-}
-
-//#endregion
-function CwMultiselect(CwelltCustomFilterTabProps) {
-    //#region Reference
-    const refOptionListContent = useRef(null);
-    const containerRef = useRef(null);
-    //#endregion
-    //#region Hooks
-    const [isShowDropDownfiltered, setShowDropDownfiltered] = useState(false);
-    // const [tagValue, setTagValue] = useState<{
-    // 	tagDesc: string;
-    // 	bgContent: string;
-    // 	bgTag: string;
-    // 	color: string;
-    // }[]>([]);
-    // Hook active label filter item tab [ All ]
-    const [isActive_filter_item_all, setActive_filter_item_all] = useState(true);
-    // Hook active laberl fitler item tab [ e.g.: Duty ]
-    const [isActive_filter_item, setActive_filter_item] = useState(null);
-    // Hook isSelected option list
-    //const [isSelected_optionList, setSelected_optionList] = useState<{ [key: string]: boolean }>({});
-    //#endregion
-    //#region Functions
-    //#region CwelltFilterTabMultiSelect [ properties functions ]
-    //#region onClearValue
-    const clearValue = (e_clear) => {
-        // List items to remove class and be visible
-        // Item searched
-        const itemSearched = document.getElementsByClassName("item-search");
-        // Item hidden
-        const itemHidden = document.getElementsByClassName("hidden-item");
-        // Item searcched
-        if (itemSearched.length > 0) {
-            for (let i = 0; i <= itemSearched.length; i++) {
-                itemSearched[i]?.classList.remove("item-search");
-            }
-        }
-        // Item hidden
-        if (itemHidden.length > 0) {
-            for (let i = 0; i <= itemHidden.length; i++) {
-                itemHidden[i]?.classList.remove("hidden-item");
-            }
-        }
-        // optionList [ disbaled active className according their text ]
-        const parent = e_clear.currentTarget.parentElement.parentElement;
-        const optionActive = parent.getElementsByClassName("option-active");
-        const valueIds = [];
-        const resultList = [];
-        if (optionActive.length > 0) {
-            CwelltCustomFilterTabProps.onclickHandleChange(valueIds, resultList);
-            Array.from(optionActive).forEach(index => {
-                const optionActive_array = index;
-                optionActive_array.classList.remove("option-active");
-            });
-        }
-    };
-    //#endregion
-    //#region onChangeSearch
-    const onChangeSearch = (e_onchange) => {
-        const filterText_lowerCase = e_onchange.currentTarget.value.toLowerCase();
-        // Tags for filtering
-        const listTag = document.getElementsByClassName("cw-multiselect-option-list");
-        for (let i = 0; i <= listTag.length; i++) {
-            if (listTag[i] !== undefined) {
-                const textTagValue = listTag[i].textContent;
-                // Writting
-                if (textTagValue?.toLowerCase().includes(filterText_lowerCase)) {
-                    listTag[i].classList.add("item-search");
-                }
-                else {
-                    listTag[i].classList.add("hidden-item");
-                }
-                // remove written
-                if (!textTagValue?.toLowerCase().includes(filterText_lowerCase)) {
-                    listTag[i].classList.remove("item-search");
-                }
-                else {
-                    listTag[i].classList.remove("hidden-item");
-                }
-                if (filterText_lowerCase === "") {
-                    listTag[i].classList.remove("item-search");
-                }
-            }
-        }
-        // Length of string > 0 show dropDownContainerComp
-        if (e_onchange.currentTarget.value.length > 0) {
-            setShowDropDownfiltered(true);
-        }
-    };
-    //#endregion
-    //#region onKeyPressInput
-    const onKeyPressSearch = (event_onKeypress) => {
-        //#region Variables
-        const keyPressed = event_onKeypress.key;
-        const optionSearched = document.getElementsByClassName("item-search");
-        //#endregion
-        // first item selected or same text
-        const optionArray = Array.from(optionSearched);
-        if (optionArray.length > 0 && keyPressed === "Enter" && event_onKeypress.currentTarget.value !== "") {
-            const firstElement_optionList = optionArray[0];
-            const textContent = firstElement_optionList.textContent;
-            const elementList = CwelltCustomFilterTabProps.selectListsItems?.find(e => e.find(el => el.description === textContent));
-            const element = elementList?.find(el => el.description === textContent);
-            if (element !== undefined) {
-                const exist = CwelltCustomFilterTabProps.selectedListsItems?.some(s => s.description === textContent);
-                if (exist === false) {
-                    handleClickTag(element);
-                }
-            }
-            const optionList_item_hidden = document.getElementsByClassName("hidden-item");
-            if (optionList_item_hidden.length > 0) {
-                Array.from(optionList_item_hidden).forEach(index => {
-                    const optionList_hidden_array = index;
-                    if (optionList_hidden_array.classList.contains("hidden-item")) {
-                        optionList_hidden_array.classList.remove("hidden-item");
-                    }
-                });
-            }
-        }
-    };
-    //#endregion
-    //#region ShowDropDownFilter
-    const showDropDownfiltered = () => {
-        setShowDropDownfiltered(!isShowDropDownfiltered);
-    };
-    //#endregion
-    class SelectListTest {
-        description;
-        key;
-        type;
-        typeName;
-        val;
-        value;
-        active;
-    }
-    const handleClickTag = (e) => {
-        const preList = CwelltCustomFilterTabProps.selectedListsItems || [];
-        const valueIds = [];
-        const resultList = preList?.map(s => {
-            const item = new SelectListTest();
-            item.description = s.description;
-            item.key = s.type + "_" + s.id;
-            item.type = s.type;
-            item.val = s.id;
-            item.value = item.key;
-            item.active = s.active ?? false;
-            valueIds.push(item.key);
-            return item;
-        });
-        const a = new SelectListTest();
-        a.description = e.description;
-        a.key = e.type + "_" + e.id;
-        a.type = e.type;
-        a.val = e.id;
-        a.value = a.key;
-        a.active = e.active;
-        const exist = resultList?.some(item => item.key === a.key);
-        if (exist) {
-            a.active = false;
-            const list = resultList?.filter(item => item.key !== a.key);
-            const values = valueIds.filter(v => v !== a.key);
-            CwelltCustomFilterTabProps.onclickHandleChange(values, list);
-        }
-        else {
-            a.active = true;
-            resultList?.push(a);
-            valueIds.push(a.key);
-            CwelltCustomFilterTabProps.onclickHandleChange(valueIds, resultList);
-        }
-        // // Selected item option list
-        // setSelected_optionList((prevSelectedStates) => ({
-        // 	...prevSelectedStates,
-        // 	[a.key]: !prevSelectedStates[a.key],
-        // }));
-        // clear filter by text after clicked in option list
-        const optionList_item_hidden = document.getElementsByClassName("hidden-item");
-        if (optionList_item_hidden.length > 0) {
-            Array.from(optionList_item_hidden).forEach(index => {
-                const optionList_hidden_array = index;
-                if (optionList_hidden_array.classList.contains("hidden-item")) {
-                    optionList_hidden_array.classList.remove("hidden-item");
-                }
-            });
-        }
-        // Check click from option list has custom tag header of custom filter tab
-        const tagActive = document.getElementsByClassName("multiselect-active-tag");
-        const optionList = document.getElementsByClassName("cw-multiselect-option-list");
-        if (tagActive.length > 0 && optionList.length > 0) {
-            Array.from(tagActive).forEach(_index => {
-                Array.from(optionList).forEach(index => {
-                    const optionList_array = index;
-                    const optionId = optionList_array.getAttribute('data-id');
-                    if (optionId === (e.type + "_" + e.id)) {
-                        optionList_array.classList.remove("option-active");
-                    }
-                });
-            });
-        }
-        const optionList_desc = document.getElementsByClassName("option-active");
-        if (optionList_desc.length > 0) {
-            Array.from(optionList_desc).forEach(index => {
-                const optionList_desc_array = index;
-                if (optionList_desc_array.innerText === a.description) {
-                    optionList_desc_array.classList.remove("option-active");
-                }
-            });
-        }
-        //  Click to  hide dropDownContainer
-        setShowDropDownfiltered(false);
-    };
-    // [ click custom tag ]
-    const closeTagHandle = (e) => {
-        const preList = CwelltCustomFilterTabProps.selectedListsItems;
-        const valueIds = [];
-        const resultList = preList?.map(s => {
-            const item = new SelectListTest();
-            item.description = s.description;
-            item.key = s.type + "_" + s.id;
-            item.type = s.type;
-            item.val = s.id;
-            item.value = item.key;
-            valueIds.push(item.key);
-            return item;
-        });
-        const a = new SelectListTest();
-        a.description = e.description;
-        a.key = e.type + "_" + e.id;
-        a.type = e.type;
-        a.val = e.id;
-        a.value = a.key;
-        const resultListFilter = resultList?.filter(item => item.key !== a.key);
-        const valueIdsFilter = valueIds.filter(item => item !== a.key);
-        CwelltCustomFilterTabProps.onclickHandleChange(valueIdsFilter, resultListFilter);
-        // // Selected item option list - remove active option list
-        // setSelected_optionList((prevSelectedStates) => ({
-        // 	...prevSelectedStates,
-        // 	[a.key]: false[a.key],
-        // }));
-        const optionList_active = document.getElementsByClassName("option-active");
-        if (optionList_active.length > 0) {
-            Array.from(optionList_active).forEach(index => {
-                const optionList_active_array = index;
-                const optionId = optionList_active_array.getAttribute('data-id');
-                if (optionId === (e.type + "_" + e.id)) {
-                    optionList_active_array.classList.remove("option-active");
-                }
-            });
-        }
-    };
-    //#endregion
-    //#region DropDownContainer [ properties functions ]
-    //#region onKeyDownDropDownContainer [  press ESC dropDownContainer dissapear - ArrowUp && ArrowDown ]
-    const onKeyDownDropDownContent = (event_onKeyDown) => {
-        const items = document.querySelectorAll(".cw-multiselect-option-list");
-        let optionIndex = Array.from(items).findIndex(item => item.classList.contains("keyboard-focus"));
-        if (event_onKeyDown.key === "Escape") {
-            // DropDown disappear
-            setShowDropDownfiltered(false);
-        }
-        // KeyDown
-        if (event_onKeyDown.key === "ArrowDown") {
-            event_onKeyDown.preventDefault();
-            removeHighlight();
-            optionIndex = getNextIndex(optionIndex, items.length);
-            highlightOption(optionIndex);
-        }
-        // KeyUp
-        if (event_onKeyDown.key === "ArrowUp") {
-            event_onKeyDown.preventDefault();
-            removeHighlight();
-            optionIndex = getPreviousIndex(optionIndex, items.length);
-            highlightOption(optionIndex);
-        }
-    };
-    const removeHighlight = () => {
-        const highlightedItem = document.querySelector(".keyboard-focus");
-        if (highlightedItem) {
-            highlightedItem.classList.remove("keyboard-focus");
-        }
-    };
-    const getNextIndex = (currentIndex, length) => {
-        return (currentIndex + 1) % length;
-    };
-    const getPreviousIndex = (currentIndex, length) => {
-        return (currentIndex - 1 + length) % length;
-    };
-    const highlightOption = (index) => {
-        const items = document.querySelectorAll(".cw-multiselect-option-list");
-        const item = items[index];
-        item.classList.add("keyboard-focus");
-    };
-    //#endregion
-    //#region onMouseLeave
-    const handleInputBlur = () => {
-        setTimeout(() => {
-            if (!containerRef.current?.contains(document.activeElement)) {
-                setShowDropDownfiltered(false);
-            }
-        }, 150);
-    };
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
-                setShowDropDownfiltered(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, []);
-    //#endregion
-    // Click filter item button
-    const clickFilter_item = (id) => {
-        // content items - looking for className by it - corresponded by their current group
-        const contentItems = document.getElementsByClassName(id);
-        const contentAll = document.getElementsByClassName("multiselect-tag-group");
-        if (contentAll.length > 0) {
-            Array.from(contentAll).forEach(index => {
-                const contentAll_array = index;
-                contentAll_array.classList.add("hidden-group");
-            });
-        }
-        if (contentItems.length > 0) {
-            Array.from(contentItems).forEach(index => {
-                const contentItems_array = index;
-                contentItems_array.classList.remove("hidden-group");
-            });
-        }
-        // Adding custom className acitive
-        setActive_filter_item(id);
-        // Remove active className [ label tab : ( ALL ) ]
-        setActive_filter_item_all(false);
-    };
-    const showAllItem = () => {
-        //let currentBtn = e.currentTarget;
-        const contentAll = document.getElementsByClassName("multiselect-tag-group");
-        if (contentAll.length > 0) {
-            Array.from(contentAll).forEach(index => {
-                const contentAll_array = index;
-                contentAll_array.classList.remove("hidden-group");
-                // active className - all
-                setActive_filter_item_all(true);
-                setActive_filter_item("");
-            });
-        }
-    };
-    //#endregion
-    useEffect(() => {
-        if (CwelltCustomFilterTabProps.selectedListsItems) {
-            const allOptions = document.getElementsByClassName("cw-multiselect-option-list");
-            Array.from(allOptions).forEach(option => {
-                option.classList.remove("option-active");
-            });
-            CwelltCustomFilterTabProps.selectedListsItems.forEach(selectedItem => {
-                Array.from(allOptions).forEach(option => {
-                    const optionElement = option;
-                    if (optionElement.innerText === selectedItem.description) {
-                        optionElement.classList.add("option-active");
-                    }
-                });
-            });
-        }
-    }, [CwelltCustomFilterTabProps.selectedListsItems]);
-    return (jsx("div", { ref: containerRef, children: jsx(CwHeadFilter, { Id: CwelltCustomFilterTabProps.id, onChangeSearch: (e_onchange) => onChangeSearch(e_onchange), onClearValue: (e_clear) => clearValue(e_clear), onKeypressInput: onKeyPressSearch, onShowDropDown: showDropDownfiltered, placeholder_desc: CwelltCustomFilterTabProps.placeholder, style: CwelltCustomFilterTabProps.style, onBlur: handleInputBlur, 
-            // onMouseLeave={onMouseLeave_dropDownContainer}
-            className: CwelltCustomFilterTabProps.selectedListsItems?.length === 0
-                ? "cw-filter-tab-multi-select-show-icon"
-                : "cw-filter-tab-multi-select-hidden-icon", tagValueContent: jsx("div", { className: "cw-flex-row cw-gap-small", children: CwelltCustomFilterTabProps.selectedListsItems?.map((s, index) => {
-                    return s.type !== undefined ? (jsx(CwTag, { styleTag: {
-                            background: s.color,
-                            color: getContrastColor(s.color),
-                        }, idTag: s.type + "_" + s.id, closableTag: true, onClickClosableTag: () => closeTagHandle(s), "data-id": s.type + "_" + s.id, className: "multiselect-active-tag", children: s.description }, index)) : (jsx("div", {}));
-                }) }), children: jsx(CwDropdownContainer, { dropDownState: isShowDropDownfiltered, idDropDownContainer: CwelltCustomFilterTabProps.idDropDownContainer, onKeyDownDropDownContainer: (event_onKeyDown) => onKeyDownDropDownContent(event_onKeyDown), children: jsxs("div", { className: "cw-multiselect-dropdown", children: [jsxs("header", { children: [jsx("label", { "data-active": isActive_filter_item_all, onClick: showAllItem, children: "ALL" }), CwelltCustomFilterTabProps.selectListsItems?.map((slArray, i) => (jsx("label", { "data-active": isActive_filter_item === 'content_' + i, 
-                                    // todo : giving parameter by id to search by their corresponding group it list options and className content with their id in this case key ( i ) by .map function
-                                    onClick: () => clickFilter_item("content_" + i), id: "content_" + i, children: slArray.length > 0 && slArray[0].typeName !== undefined
-                                        ? slArray[0].typeName
-                                        : slArray.length > 0
-                                            ? slArray[0].type
-                                            : "" }, i)))] }), jsx("div", { className: "cw-multiselect-tags-container", children: CwelltCustomFilterTabProps.selectListsItems?.map((slArray, i) => (jsx("div", { id: "content_" + i, className: `multiselect-tag-group content_${i}`, ref: refOptionListContent, children: slArray.map(sl => {
-                                    const isSelected = CwelltCustomFilterTabProps.selectedListsItems?.some(selected => selected.type === sl.type && selected.id === sl.id) || false;
-                                    return (jsx(CwOptionList, { idOptionList: sl.type + "_" + sl.id, value: sl.type + "_" + sl.id, title: sl.description, onClick: () => handleClickTag(sl), isSelected: sl.active, "data-id": sl.type + "_" + sl.id, children: jsx(CwTag, { styleTag: {
-                                                background: sl.color,
-                                                color: getContrastColor(sl.color),
-                                            }, closableTag: isSelected, children: sl.description }) }, sl.type + "_" + sl.id));
-                                }) }, "group" + i))) })] }) }) }) }));
-}
-
 var styles$8 = {"cw-multifilter-tag":"cw-multi-filter-tag-module_cw-multifilter-tag__Epda-"};
 
 const CwMultiFilterTag = props => {
-    const { ID, Name, Value, Category, Removable, PrimaryColor, OnPrimaryColor, Selectable, Selected, OnSelect } = props;
-    const BackgroundColor = `rgb(${PrimaryColor.r},${PrimaryColor.g},${PrimaryColor.b})`;
-    const TextColor = `rgb(${OnPrimaryColor.r},${OnPrimaryColor.g},${OnPrimaryColor.b})`;
-    return (jsxs("li", { className: styles$8["cw-multifilter-tag"], "data-selected": !!props.Selected, "data-removable": !!props.Removable, style: {
-            color: TextColor,
-            backgroundColor: BackgroundColor,
-            opacity: Selected && !Removable ? "0.5" : "1",
-            outlineColor: TextColor
-        }, onClick: () => {
+    const { ID, Name, Value, Category, Removable, PrimaryColor, Selectable, Selected } = props;
+    const backgroundColor = `rgb(${PrimaryColor.r},${PrimaryColor.g},${PrimaryColor.b})`;
+    const isOutlineMode = Selected && !Removable;
+    return (jsx("li", { className: styles$8["cw-multifilter-tag"], id: ID, "data-value": Value, "data-category": Category, "data-selected": !!Selected, title: Name, onClick: () => {
             if (Selectable)
-                OnSelect?.(props);
-        }, children: [jsx("span", { id: ID, "data-value": Value, "data-category": Category, children: Name }), Removable && (jsx("span", { onClick: () => props.OnRemove?.(props), children: jsx(CwIcon, { iconId: "close" }) }))] }));
+                props.OnSelect?.(props);
+        }, children: jsx(CwChip, { label: Name, colorScheme: "custom", customColor: backgroundColor, variant: isOutlineMode ? "outline" : "soft", closable: Removable, onClose: () => props.OnRemove?.(props), 
+            // This style ensures the chip color is accessible over white background
+            style: isOutlineMode ? {
+                '--chip-accent': `hsl(from ${backgroundColor} h s 40)`
+            } : undefined }) }));
 };
 
 var styles$7 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-multi-filter-catalog-container__S3nsq","cw-multi-filter":"cw-multi-filter-module_cw-multi-filter__zipBK","cw-multi-filter-search":"cw-multi-filter-module_cw-multi-filter-search__eyHr0"};
@@ -4036,7 +3385,7 @@ var styles$7 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-m
  * - `Category`: Group the filter belongs to
  * - `ID`: Unique identifier for the filter
  * - `PrimaryColor`: Background color of the tag
- * - `OnPrimaryColor`: Text color of the tag
+ * - `OnPrimaryColor`: (Optional, deprecated) Text color of the tag - contrast is now calculated automatically
  *
  * ```
  * ╭───────────────────────────────────────────────────────────────╮
@@ -4078,7 +3427,6 @@ var styles$7 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-m
  *       Value: "admin",
  *       Category: "Roles",
  *       ID: "Roles_admin",
- *       OnPrimaryColor: hexToRGB("#2050a8"),
  *       PrimaryColor: hexToRGB("#cedcff")
  *     },
  *     {
@@ -4086,7 +3434,6 @@ var styles$7 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-m
  *       Value: "user",
  *       Category: "Roles",
  *       ID: "Roles_user",
- *       OnPrimaryColor: hexToRGB("#2050a8"),
  *       PrimaryColor: hexToRGB("#cedcff")
  *     },
  *     {
@@ -4094,7 +3441,6 @@ var styles$7 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-m
  *       Value: "IT",
  *       Category: "Departments",
  *       ID: "Departments_IT",
- *       OnPrimaryColor: hexToRGB("#a82037"),
  *       PrimaryColor: hexToRGB("#ffceda")
  *     },
  *     {
@@ -4102,7 +3448,6 @@ var styles$7 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-m
  *       Value: "HR",
  *       Category: "Departments",
  *       ID: "Departments_HR",
- *       OnPrimaryColor: hexToRGB("#a82037"),
  *       PrimaryColor: hexToRGB("#ffceda")
  *     }
  *   ]);
@@ -4206,9 +3551,10 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
     const getColor = (category) => {
         const test = categoriesMappedToTags().get(category)?.values().next().value;
         if (test !== undefined) {
+            const primaryColor = rgbAString(test.PrimaryColor.r, test.PrimaryColor.g, test.PrimaryColor.b);
             return {
-                onPrimary: rgbAString(test.OnPrimaryColor.r, test.OnPrimaryColor.g, test.OnPrimaryColor.b),
-                primary: rgbAString(test.PrimaryColor.r, test.PrimaryColor.g, test.PrimaryColor.b),
+                onPrimary: getContrastColor(primaryColor),
+                primary: primaryColor,
             };
         }
         else {
@@ -4428,50 +3774,54 @@ function CwSearchInput(optionsProps) {
     const [filteredOptions, setFilteredOptions] = useState([]);
     const [_selectedOption, setSelectedOption] = useState(null);
     const [showDropdown, setShowDropdown] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    // Extract props
+    const { labelProps, iconProps, alignProps, selectList, handleChange, placeholder = "Search…", disabled, renderOption, style, id, className, defaultValue, ...otherProps } = optionsProps;
+    // Get direction for data attribute
+    const direction = alignProps?.flexDirection || "row";
     // Make default value selection when loading the component
     useEffect(() => {
-        if (optionsProps.defaultValue && optionsProps.selectList && optionsProps.selectList.length > 0) {
-            const defaultOption = optionsProps.selectList.find(option => option.id === optionsProps.defaultValue?.toString());
+        if (defaultValue && selectList && selectList.length > 0) {
+            setIsLoading(true);
+            const defaultOption = selectList.find(option => option.id === defaultValue?.toString());
             if (defaultOption) {
                 setSearchText(defaultOption.description);
                 setSelectedOption(defaultOption);
-                // Notify the parent component if there is a handleChange
-                if (optionsProps.handleChange) {
-                    optionsProps.handleChange(defaultOption.id);
+                if (handleChange) {
+                    handleChange(defaultOption.id);
                 }
             }
+            setIsLoading(false);
         }
-    }, [optionsProps.defaultValue, optionsProps.selectList]);
+    }, [defaultValue, selectList]);
     const handleInputChange = (event) => {
         const text = event.target.value;
         setSearchText(text);
         setShowDropdown(true);
         if (text === "") {
-            setFilteredOptions(optionsProps.selectList);
+            setFilteredOptions(selectList);
             setSelectedOption(null);
-            // Notify that there is no selection
-            if (optionsProps.handleChange) {
-                optionsProps.handleChange("");
+            if (handleChange) {
+                handleChange("");
             }
         }
         else {
-            // Filter options based on search text in any text property
-            const filtered = optionsProps.selectList.filter((option) => {
-                // Search all properties of the object
+            setIsLoading(true);
+            const filtered = selectList.filter((option) => {
                 return Object.keys(option).some(key => {
                     const value = option[key];
-                    // Verify that the value is a string or number and contains the search text
                     return (typeof value === 'string' || typeof value === 'number') &&
                         String(value).toLowerCase().includes(text.toLowerCase());
                 });
             });
             setFilteredOptions(filtered);
+            setIsLoading(false);
         }
     };
     const handleInputFocus = () => {
         setShowDropdown(true);
         if (searchText === "") {
-            setFilteredOptions(optionsProps.selectList);
+            setFilteredOptions(selectList);
         }
     };
     const handleInputBlur = () => {
@@ -4482,27 +3832,172 @@ function CwSearchInput(optionsProps) {
     const handleOptionSelect = (option) => {
         setSearchText(option.description);
         setSelectedOption(option);
-        if (optionsProps.handleChange) {
-            optionsProps.handleChange(option.id);
+        if (handleChange) {
+            handleChange(option.id);
+        }
+        setFilteredOptions([]);
+    };
+    const handleClearClick = () => {
+        setSearchText("");
+        setFilteredOptions([]);
+        setSelectedOption(null);
+        if (handleChange) {
+            handleChange("");
+        }
+    };
+    return (jsxs("div", { className: `cw-search-input ${className || ""}`, style: style, id: id, ...otherProps, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", children: [jsx("input", { type: "text", value: searchText, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: placeholder, className: "cw-input-search", disabled: disabled }), isLoading && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: searchText && !disabled && !isLoading ? (jsx(CwButton, { type: "button", onClick: handleClearClick, "aria-label": "Clear search", variant: "icon", icon: "close", color: "neutral" })) : (iconProps ? jsx(CwIcon, { ...iconProps }) : jsx(CwIcon, { iconId: "search" })) })] })] }), showDropdown && filteredOptions.length > 0 && (jsx("div", { className: "cw-input-search-dropdown", children: jsx("ul", { children: filteredOptions.map((option) => (jsx("li", { onClick: () => handleOptionSelect(option), onMouseDown: (e) => e.preventDefault(), children: renderOption ? renderOption(option) : option.description }, option.id))) }) }))] }));
+}
+
+var styles$5 = {"menu":"cw-context-menu-module_menu__tXmun","item":"cw-context-menu-module_item__-ko8L","arrow":"cw-context-menu-module_arrow__LHZmQ"};
+
+const ARROW_SIZE = 8;
+const SAFETY_MARGIN = 8;
+const VIEWPORT_PADDING = 10;
+const CwAnchoredMenu = ({ children, options, onSelect, placement = 'bottom', open: controlledOpen, onOpenChange, onContextMenu: onContextMenuCallback }) => {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const menuRef = useRef(null);
+    const triggerRef = useRef(null);
+    const arrowRef = useRef(null);
+    const isControlled = controlledOpen !== undefined;
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+    const setIsOpen = (value) => {
+        isControlled ? onOpenChange?.(value) : setInternalOpen(value);
+    };
+    const normalizedOptions = options.map(opt => typeof opt === 'string' ? { key: opt, label: opt } : opt);
+    const getActualTriggerElement = () => {
+        let element = triggerRef.current;
+        if (element.offsetHeight === 0 && element.children.length > 0) {
+            element = element.children[0];
+        }
+        return element;
+    };
+    const calculateInitialPosition = (event, rect) => {
+        const totalOffset = ARROW_SIZE + SAFETY_MARGIN;
+        switch (placement) {
+            case 'bottom':
+                return { x: event.clientX, y: rect.bottom + totalOffset };
+            case 'top':
+                return { x: event.clientX, y: rect.top - totalOffset };
+            case 'right':
+                return { x: rect.right + totalOffset, y: event.clientY };
+            case 'left':
+                return { x: rect.left - totalOffset, y: event.clientY };
+        }
+    };
+    const shouldFlipVertical = (currentPlacement, rect, menuHeight) => {
+        const totalOffset = ARROW_SIZE + SAFETY_MARGIN;
+        if (currentPlacement === 'bottom') {
+            const spaceBelow = window.innerHeight - rect.bottom - totalOffset;
+            const spaceAbove = rect.top - totalOffset;
+            return spaceBelow < menuHeight && spaceAbove > spaceBelow ? 'top' : 'bottom';
+        }
+        else {
+            const spaceAbove = rect.top - totalOffset;
+            const spaceBelow = window.innerHeight - rect.bottom - totalOffset;
+            return spaceAbove < menuHeight && spaceBelow > spaceAbove ? 'bottom' : 'top';
+        }
+    };
+    const shouldFlipHorizontal = (currentPlacement, rect, menuWidth) => {
+        const totalOffset = ARROW_SIZE + SAFETY_MARGIN;
+        if (currentPlacement === 'right') {
+            const spaceRight = window.innerWidth - rect.right - totalOffset;
+            const spaceLeft = rect.left - totalOffset;
+            return spaceRight < menuWidth && spaceLeft > spaceRight ? 'left' : 'right';
+        }
+        else {
+            const spaceLeft = rect.left - totalOffset;
+            const spaceRight = window.innerWidth - rect.right - totalOffset;
+            return spaceLeft < menuWidth && spaceRight > spaceLeft ? 'right' : 'left';
         }
-        // Remove the filtered options when selecting one
-        setFilteredOptions([]);
     };
-    const handleClearClick = () => {
-        setSearchText("");
-        setFilteredOptions([]);
-        setSelectedOption(null);
+    const handleContextMenu = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onContextMenuCallback?.(event);
+        setIsOpen(true);
+        const actualElement = getActualTriggerElement();
+        const rect = actualElement.getBoundingClientRect();
+        const pos = calculateInitialPosition(event, rect);
+        setPosition(pos);
     };
-    return (jsxs("div", { className: "cwSearchInputComp", style: optionsProps.style, id: optionsProps.id, children: [jsxs("div", { className: optionsProps.labelPosition === "inline"
-                    ? "cw-flex-row cw-align-left-center"
-                    : optionsProps.labelPosition === "column"
-                        ? "cw-label-input-column"
-                        : "cw-flex-row cw-align-left-center", children: [optionsProps.labelName && (jsx("label", { children: optionsProps.labelName })), jsx("input", { type: "text", value: searchText, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: "Search...", className: "cw_input_search", disabled: optionsProps.disabled }), searchText && (jsx("button", { className: "cw-button-icon cwi-close cw-input-search-clear", onClick: handleClearClick }))] }), showDropdown && filteredOptions.length > 0 && (jsx("div", { className: "cw-input-search-dropdown", children: jsx("ul", { children: filteredOptions.map((option) => (jsx("li", { onClick: () => handleOptionSelect(option), onMouseDown: (e) => e.preventDefault(), children: optionsProps.renderOption
-                            ? optionsProps.renderOption(option)
-                            : option.description }, option.id))) }) }))] }));
-}
-
-var styles$5 = {"context-menu":"cw-context-menu-module_context-menu__dbxnO","context-menu-item":"cw-context-menu-module_context-menu-item__B2W-Q"};
+    const handleOptionClick = (option) => {
+        if (option.disabled)
+            return;
+        onSelect(option.key);
+        setIsOpen(false);
+    };
+    // Calculate position before the browser paints the element
+    useLayoutEffect(() => {
+        if (!isOpen || !menuRef.current || !triggerRef.current)
+            return;
+        const actualElement = getActualTriggerElement();
+        const rect = actualElement.getBoundingClientRect();
+        const menuRect = menuRef.current.getBoundingClientRect();
+        let { x, y } = position;
+        let finalPlacement = placement;
+        const totalOffset = ARROW_SIZE + SAFETY_MARGIN;
+        // Calculate position based on placement and check for flips
+        if (placement === 'bottom' || placement === 'top') {
+            x = x - (menuRect.width / 2); // Center on click
+            finalPlacement = shouldFlipVertical(placement, rect, menuRect.height);
+            if (finalPlacement === 'top') {
+                y = rect.top - totalOffset - menuRect.height;
+            }
+            else {
+                y = rect.bottom + totalOffset;
+            }
+        }
+        else { // left or right
+            y = y - (menuRect.height / 2); // Center on click
+            finalPlacement = shouldFlipHorizontal(placement, rect, menuRect.width);
+            if (finalPlacement === 'left') {
+                x = rect.left - totalOffset - menuRect.width;
+            }
+            else {
+                x = rect.right + totalOffset;
+            }
+        }
+        // Keep in viewport (fallback)
+        x = Math.max(VIEWPORT_PADDING, Math.min(x, window.innerWidth - menuRect.width - VIEWPORT_PADDING));
+        y = Math.max(VIEWPORT_PADDING, Math.min(y, window.innerHeight - menuRect.height - VIEWPORT_PADDING));
+        // Position arrow
+        if (arrowRef.current) {
+            arrowRef.current.setAttribute('data-placement', finalPlacement);
+        }
+        if (x !== position.x || y !== position.y) {
+            setPosition({ x, y });
+        }
+    }, [isOpen]);
+    // Close handlers
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleOutsideClick = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        const handleEscape = (event) => {
+            if (event.key === "Escape")
+                setIsOpen(false);
+        };
+        document.addEventListener("mousedown", handleOutsideClick);
+        document.addEventListener("keydown", handleEscape);
+        return () => {
+            document.removeEventListener("mousedown", handleOutsideClick);
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [isOpen]);
+    return (jsxs(Fragment, { children: [jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, style: { display: "contents" }, children: children }), isOpen && normalizedOptions.length > 0 && createPortal(jsxs("div", { ref: menuRef, className: styles$5["menu"], style: {
+                    top: `${position.y}px`,
+                    left: `${position.x}px`,
+                }, "data-has-arrow": "true", children: [jsx("div", { ref: arrowRef, className: styles$5["arrow"], "data-placement": placement }), normalizedOptions.map(option => (jsxs("div", { onClick: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            handleOptionClick(option);
+                        }, className: `${styles$5["item"]} ${option.disabled ? styles$5["disabled"] : ""}`, "data-disabled": option.disabled, children: [option.icon && jsx("span", { className: styles$5["icon"], children: option.icon }), option.label] }, option.key)))] }), document.body)] }));
+};
 
 /**
  * A context menu that is rendered when the user clicks on a button.
@@ -4515,276 +4010,91 @@ var styles$5 = {"context-menu":"cw-context-menu-module_context-menu__dbxnO","con
  *   <div>Right-click me!</div>
  * </ContextMenu>
  */
-const CwContextMenu = ({ children, options, offset, onSelect }) => {
+const DEFAULT_OFFSET = { x: 4, y: 4 };
+const CwContextMenu = ({ children, options, offset = DEFAULT_OFFSET, onSelect }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [position, setPosition] = useState({ x: 0, y: 0 });
     const menuRef = useRef(null);
     const handleContextMenu = (event) => {
         event.preventDefault();
         setIsOpen(true);
-        setPosition({ x: event.clientX, y: event.clientY });
+        const x = event.clientX + offset.x;
+        const y = event.clientY + offset.y;
+        setPosition({ x, y });
     };
     const handleOptionClick = (option) => {
         onSelect(option);
         setIsOpen(false);
     };
+    // Position handler for when is too close to window edges
+    useEffect(() => {
+        if (isOpen && menuRef.current) {
+            const rect = menuRef.current.getBoundingClientRect();
+            const padding = 16;
+            let { x, y } = position;
+            if (rect.right > window.innerWidth) {
+                x = window.innerWidth - rect.width - padding;
+            }
+            if (rect.bottom > window.innerHeight) {
+                y = window.innerHeight - rect.height - padding;
+            }
+            if (x < padding) {
+                x = padding;
+            }
+            if (y < padding) {
+                y = padding;
+            }
+            if (x !== position.x || y !== position.y) {
+                setPosition({ x, y });
+            }
+        }
+    }, [isOpen, position.x, position.y]);
     useEffect(() => {
         const handleOutsideClick = (event) => {
             if (menuRef.current && !menuRef.current.contains(event.target)) {
                 setIsOpen(false);
             }
         };
-        document.addEventListener("mousedown", handleOutsideClick);
+        const handleEscape = (event) => {
+            if (event.key === "Escape") {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleOutsideClick);
+            document.addEventListener("keydown", handleEscape);
+        }
         return () => {
             document.removeEventListener("mousedown", handleOutsideClick);
+            document.removeEventListener("keydown", handleEscape);
         };
-    }, []);
-    return (jsxs("div", { onContextMenu: handleContextMenu, children: [children, isOpen && (jsx("div", { ref: menuRef, className: styles$5["context-menu"], style: {
-                    top: position.y + (offset?.y || 0),
-                    left: position.x + (offset?.x || 0),
-                }, children: options.map(option => (jsx("div", { onClick: () => handleOptionClick(option), className: styles$5["context-menu-item"], children: option }, option))) }))] }));
+    }, [isOpen]);
+    return (jsxs(Fragment, { children: [jsx("div", { onContextMenu: handleContextMenu, children: children }), isOpen && createPortal(jsx("div", { ref: menuRef, className: styles$5["menu"], style: {
+                    top: `${position.y}px`,
+                    left: `${position.x}px`,
+                }, children: options.map(option => (jsx("div", { onClick: () => handleOptionClick(option), className: styles$5["item"], children: option }, option))) }), document.body)] }));
 };
 
-function CwDataItem(cwBoxItemsProps) {
-    return (jsx("div", { id: cwBoxItemsProps.id, className: "cwelltBoxItems", style: cwBoxItemsProps.style, children: jsx("span", { className: "cwelltBoxItemsText cwelltFont1em_required", style: cwBoxItemsProps.styleDataItem, children: cwBoxItemsProps.children }) }));
-}
-function CwContextualMenu(CwelltRightClickProps) {
-    //#region Hooks
-    const [isVisibleContextMenu, setVisibleContextMenu] = useState(false);
-    const [resetClassName, setResetClassName] = useState("");
-    const [positionRightClick, setpositionRightClick] = useState({ x: 0, y: 0 });
-    //#endregion
-    //#region Functions
-    const onShowContextMenu = (e) => {
-        e.preventDefault();
-        setVisibleContextMenu(true);
-        const newPosition = {
-            x: e.clientX - e.currentTarget.getBoundingClientRect().left,
-            y: e.clientY - e.currentTarget.getBoundingClientRect().top
-        };
-        setpositionRightClick(newPosition);
-        toggleClassName();
-    };
-    const toggleClassName = () => {
-        setTimeout(() => {
-            setResetClassName("cwellt_fade_out");
-        });
-        setTimeout(() => {
-            setResetClassName("cwellt_fade_in");
-        }, 500);
-    };
-    const onMouseLeaveContextMenuContainer = () => {
-        setVisibleContextMenu(false);
-    };
-    const onClickContextMenuContainer = () => {
-        setVisibleContextMenu(false);
-        CwelltRightClickProps.onClick;
-    };
-    const onKeyUpContextMenu = (e) => {
-        if (e.key === "Escape") {
-            // context menu dissapear
-            setVisibleContextMenu(false);
-        }
-        if (e.key === "Enter") {
-            // context menu dissapear
-            setVisibleContextMenu(false);
-        }
-    };
-    //#endregion
-    return (jsxs("div", { className: "cwelltContextMenu_container", onContextMenu: onShowContextMenu, onMouseLeave: onMouseLeaveContextMenuContainer, onClick: onClickContextMenuContainer, style: { position: "relative" }, onKeyUp: e => onKeyUpContextMenu(e), tabIndex: 0, children: [CwelltRightClickProps.children, jsx("div", { id: "contextMenu", className: isVisibleContextMenu ? "cwelltContextMenu " + resetClassName : "cwelltContextMenuHide " + resetClassName, style: {
-                    top: positionRightClick.y,
-                    left: positionRightClick.x
-                }, children: CwelltRightClickProps.dataSourceContextMenu?.map(indexDataItem => {
-                    return (jsx(CwDataItem, { id: indexDataItem.idDataItem, style: indexDataItem.style, styleDataItem: indexDataItem.styleDataItem, children: indexDataItem.dataItemContent }));
-                }) })] }));
-}
-
-// Buttons components
 /**
- * A floating button.
- * @identifier cw_btnFloatingButton
- * @classes cw_btnFloatingButtonActive
- * @dependencies #CwScheduler #CwSchedulerActive #cwelltContentDuty #cwelltContentDutyActive
+ * Save button wrapper
+ * @deprecated Use <CwButton variant="icon" icon="save" onClick={...} /> instead
  */
-// Floating button
-function CwFloatingButton() {
-    const cwShowElement = () => {
-        // Content of List Duties
-        const cwContentDuty = document.getElementById("cwelltContentDuty");
-        cwContentDuty?.classList.toggle("cwelltContentDutyActive");
-        //  Floating button
-        const cw_btnFloatingButton = document.getElementById("cw_btnFloatingButton");
-        cw_btnFloatingButton?.classList.toggle("cw_btnFloatingButtonActive");
-        // #CwScheduler [ scheduler container]
-        const cwScheduler = document.getElementById("CwelltScheduler");
-        cwScheduler?.classList.toggle("CwelltSchedulerActive");
-    };
-    return jsx("button", { className: "cw_btnFloatingButton", onClick: cwShowElement, id: "cw_btnFloatingButton" });
-}
-// Primary button => CwButtonDef
-// CwButtonDef
-function CwButtonDef({ cw_btn_desc, cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { className: "cw-button cw_btn_primary", onClick: cw_btnOnclick, disabled: cw_btn_disabled, children: cw_btn_desc }));
-}
-// Cw add button
-function CwBtnAdd({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-plus", disabled: cw_btn_disabled });
-}
-// Cw Save button
-function CwBtnSave({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-save", disabled: cw_btn_disabled });
-}
-// Cw edit button
-function CwBtnEdit({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-edit", disabled: cw_btn_disabled });
-}
-// Cw search button
-function CwBtnSearch({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-search", disabled: cw_btn_disabled });
-}
-// Cw download button
-function CwBtnDownload({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-download", disabled: cw_btn_disabled });
-}
-// Cw view button
-function CwBtnView({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-eye-show", disabled: cw_btn_disabled });
-}
-// Cw Print button
-function CwBtnPrint({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-print", disabled: cw_btn_disabled });
-}
-// Cw cancel button
-function CwBtnCancel({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-cancel", disabled: cw_btn_disabled, "data-color": "danger" });
-}
-// Cw Delete button
-function CwBtnDelete({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-delete", disabled: cw_btn_disabled, "data-color": "danger" });
-}
-// CwRefresh
-function CwBtnRefresh({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-refresh", disabled: cw_btn_disabled });
-}
-// Cw hide
-function CwBtnHide({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-eye-hide", disabled: cw_btn_disabled });
-}
-// Cw Select
-function CwBtnSelect({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_select", disabled: cw_btn_disabled });
-}
-// Cw Share
-function CwBtnShare({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-share", disabled: cw_btn_disabled });
-}
-// Cw Files
-function CwBtnFiles({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_files", disabled: cw_btn_disabled });
-}
-// Cw Airport
-function CwBtnAirport({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btn_airport", disabled: cw_btn_disabled });
+function CwBtnSave({ cw_btnOnclick, cw_btn_disabled, onClick, disabled, ...rest }) {
+    return (jsx(CwButton, { ...rest, variant: "icon", icon: "save", onClick: onClick ?? cw_btnOnclick, disabled: disabled ?? cw_btn_disabled }));
 }
-// DownLoadAllInfo
-function CwBtnDownLoadAllInfo({ cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-folder-download", disabled: cw_btn_disabled }));
-}
-// PropertyFolder
-function CwBtnPropertyFolder({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-directory", disabled: cw_btn_disabled });
-}
-// AddFolder
-function CwBtnAddFolder({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-folder-add", disabled: cw_btn_disabled });
-}
-// EditFolder
-function CwBtnEditFolder({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-folder-edit", disabled: cw_btn_disabled });
-}
-// UploadFiles
-function CwBtnUploadFiles({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-upload", disabled: cw_btn_disabled });
-}
-// GoBackSection [ Emanual ]
-function CwBtnGoBackFolder({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cwBtnGoBackFolder", disabled: cw_btn_disabled });
-}
-// BookMark [ Emanual ]
-function CwBtnBookMark({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-star", disabled: cw_btn_disabled });
-}
-// Publish
-function CwBtnPublish({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnPublish", disabled: cw_btn_disabled });
-}
-// Approve
-function CwBtnApprove({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnApprove", disabled: cw_btn_disabled });
-}
-// Bulk duty
-function CwBtnBulkDuty({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnBulkDuty", disabled: cw_btn_disabled });
-}
-// DropDownButtonCrewControl
-function CwBtnDropDownMenu({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnDropDownMenu", disabled: cw_btn_disabled });
-}
-// DropDownButtonCrewControl
-function CwBtnAlert({ cw_btnOnclick, cw_btn_disabled, cw_name }) {
-    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-alert", disabled: cw_btn_disabled, id: cw_name }));
-}
-// BtnNavFirstItemView
-function CwBtnNavFirstItemView({ cw_btnOnclick, cw_btn_disabled }) {
-    return (jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnNavFirstItemView", disabled: cw_btn_disabled }));
-}
-// BtnNavLastItemView
-function CwBtnNavLastItemView({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnNavLastItemView", disabled: cw_btn_disabled });
-}
-// BtnNavbreviewItem
-function CwBtnNavPreviewItem({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnNavPreviewItem", disabled: cw_btn_disabled });
-}
-// BtnNavNextDay
-function CwBtnNavNextDay({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnNavNextDay", disabled: cw_btn_disabled });
-}
-// BtnNavNextDay
-function CwBtnStatistic({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-file-report", disabled: cw_btn_disabled });
-}
-// BtnNavNextDay
-function CwBtnCrewPlanning({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-calendar-view", disabled: cw_btn_disabled });
-}
-// BtnReleasePeriod
-function CwBtnReleasePeriod({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnReleasePeriod", disabled: cw_btn_disabled });
-}
-// BtnReleasePeriod
-function CwBtnGeneratePairing({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-plane-pairing", disabled: cw_btn_disabled });
-}
-// BtnImportRequests
-function CwBtnImportRequests({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cw_btnImportRequests", disabled: cw_btn_disabled });
-}
-// BtnPairing
-function CwBtnPairing({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-calendar-plane", disabled: cw_btn_disabled });
-}
-// BtnVacations
-function CwBtnVacations({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-luggage", disabled: cw_btn_disabled });
-}
-// BtnMVT
-function CwBtnMVT({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-plane-movement", disabled: cw_btn_disabled });
+/**
+ * Edit button wrapper
+ * @deprecated Use <CwButton variant="icon" icon="edit" onClick={...} /> instead
+ */
+function CwBtnEdit({ cw_btnOnclick, cw_btn_disabled, onClick, disabled, ...rest }) {
+    return (jsx(CwButton, { ...rest, variant: "icon", icon: "edit", onClick: onClick ?? cw_btnOnclick, disabled: disabled ?? cw_btn_disabled }));
 }
-// BtnDelay
-function CwBtnDelay({ cw_btnOnclick, cw_btn_disabled }) {
-    return jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-plane-delay", disabled: cw_btn_disabled });
+/**
+ * Delete button wrapper
+ * @deprecated Use <CwButton variant="icon" icon="delete" color="danger" onClick={...} /> instead
+ */
+function CwBtnDelete({ cw_btnOnclick, cw_btn_disabled, onClick, disabled, ...rest }) {
+    return (jsx(CwButton, { ...rest, variant: "icon", icon: "delete", color: "danger", onClick: onClick ?? cw_btnOnclick, disabled: disabled ?? cw_btn_disabled }));
 }
 
 var styles$4 = {"pickerWrapper":"cw-pickers-base-module_pickerWrapper__Fb9Zo","pickerIcons":"cw-pickers-base-module_pickerIcons__dyd2-","pickerPopup":"cw-pickers-base-module_pickerPopup__dkxJo","title":"cw-pickers-base-module_title__cE7qI"};
@@ -4793,12 +4103,12 @@ function CustomCaption$2({ displayMonth }) {
     const { goToMonth, nextMonth, previousMonth } = useNavigation();
     return (jsxs("header", { children: [jsx(CwButton, { type: "button", variant: "icon", icon: "chevron-left", onClick: () => previousMonth && goToMonth(previousMonth), disabled: !previousMonth, "aria-label": "Previous month" }), jsx("div", { className: styles$4.title, children: format(displayMonth, "MMMM yyyy", { locale: enGB }) }), jsx(CwButton, { type: "button", variant: "icon", icon: "chevron-right", onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, "aria-label": "Next month" })] }));
 }
-function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, labelProps, alignProps, placeholder = "Select a date", displayFormat = "dd.MM.yyyy", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, }) {
+function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, defaultMonth, labelProps, alignProps, placeholder = "Select a date", displayFormat = "dd.MM.yyyy", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, }) {
     const [isOpen, setIsOpen] = useState(false);
     const [inputValue, setInputValue] = useState("");
     const containerRef = useRef(null);
     const inputRef = useRef(null);
-    const prevValueRef = useRef(value);
+    const prevValueRef = useRef(undefined);
     // Parse date from string based on format
     const parseDate = useCallback((dateString, formatStr) => {
         try {
@@ -4869,11 +4179,12 @@ function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabl
     }, [parseDate, displayFormat, minDate, maxDate, onChange, normalizeDateForComparison]);
     // Sync input value with prop value - only when changed externally
     useEffect(() => {
-        const currentValue = value;
-        if (currentValue !== prevValueRef.current) {
-            prevValueRef.current = currentValue;
-            if (currentValue) {
-                setInputValue(format(currentValue, displayFormat, { locale: enGB }));
+        const currentTime = value?.getTime();
+        const prevTime = prevValueRef.current?.getTime();
+        if (currentTime !== prevTime) {
+            prevValueRef.current = value;
+            if (value) {
+                setInputValue(format(value, displayFormat, { locale: enGB }));
             }
             else {
                 setInputValue("");
@@ -4974,7 +4285,7 @@ function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabl
         ...(maxDate ? [{ after: maxDate }] : []),
         ...(disabledMatcher ? [disabledMatcher] : []),
     ], [disabledDates, minDate, maxDate, disabledMatcher]);
-    return (jsx("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsx(CwIcon, { iconId: "calendar" })) }), isOpen && (jsxs("div", { className: styles$4.pickerPopup, "data-position": popupPosition, children: [jsx(DayPicker, { mode: "single", selected: value || undefined, defaultMonth: value || undefined, onSelect: handleDaySelect, disabled: disabledDays, locale: enGB, numberOfMonths: numberOfMonths, formatters: formatters, components: {
+    return (jsx("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsx(CwIcon, { iconId: "calendar" })) }), isOpen && (jsxs("div", { className: styles$4.pickerPopup, "data-position": popupPosition, children: [jsx(DayPicker, { mode: "single", selected: value || undefined, defaultMonth: defaultMonth || value || undefined, onSelect: handleDaySelect, disabled: disabledDays, locale: enGB, numberOfMonths: numberOfMonths, formatters: formatters, components: {
                                         Caption: (props) => (jsx(CustomCaption$2, { ...props })),
                                     }, modifiers: {
                                         today: new Date(),
@@ -4987,6 +4298,54 @@ var rangeStyles = {"rangeWrapper":"cw-range-picker-module_rangeWrapper__1nIVs","
 
 const PRESET_LIBRARY = {
     // === PAST DAYS ===
+    today: {
+        key: 'today',
+        label: 'Today',
+        getValue: () => {
+            const from = new Date();
+            from.setHours(0, 0, 0, 0);
+            const to = new Date();
+            to.setHours(23, 59, 59, 999);
+            return { from, to };
+        }
+    },
+    yesterday: {
+        key: 'yesterday',
+        label: 'Yesterday',
+        getValue: () => {
+            const from = new Date();
+            from.setDate(from.getDate() - 1);
+            from.setHours(0, 0, 0, 0);
+            const to = new Date();
+            to.setDate(to.getDate() - 1);
+            to.setHours(23, 59, 59, 999);
+            return { from, to };
+        }
+    },
+    past2Days: {
+        key: 'past2Days',
+        label: 'Past 2 Days',
+        getValue: () => {
+            const today = new Date();
+            today.setHours(23, 59, 59, 999);
+            const twoDaysAgo = new Date();
+            twoDaysAgo.setDate(today.getDate() - 2);
+            twoDaysAgo.setHours(0, 0, 0, 0);
+            return { from: twoDaysAgo, to: today };
+        }
+    },
+    past3Days: {
+        key: 'past3Days',
+        label: 'Past 3 Days',
+        getValue: () => {
+            const today = new Date();
+            today.setHours(23, 59, 59, 999);
+            const threeDaysAgo = new Date();
+            threeDaysAgo.setDate(today.getDate() - 3);
+            threeDaysAgo.setHours(0, 0, 0, 0);
+            return { from: threeDaysAgo, to: today };
+        }
+    },
     past7Days: {
         key: 'past7Days',
         label: 'Past 7 days',
@@ -5210,7 +4569,7 @@ function CustomCaption$1({ displayMonth }) {
     const { goToMonth, nextMonth, previousMonth } = useNavigation();
     return (jsxs("header", { children: [jsx(CwButton, { type: "button", variant: "icon", icon: "chevron-left", onClick: () => previousMonth && goToMonth(previousMonth), disabled: !previousMonth, "aria-label": "Previous month" }), jsx("div", { className: styles$4.title, children: format(displayMonth, "MMMM yyyy", { locale: enGB }) }), jsx(CwButton, { type: "button", variant: "icon", icon: "chevron-right", onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, "aria-label": "Next month" })] }));
 }
-function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, maxRangeDays, labelProps, alignProps, placeholderFrom = "From date", placeholderTo = "To date", displayFormat = "dd.MM.yyyy", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 2, showPresets = false, presetKeys, customPresets, }) {
+function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, maxRangeDays, defaultMonth, labelProps, alignProps, placeholderFrom = "From date", placeholderTo = "To date", displayFormat = "dd.MM.yyyy", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 2, showPresets = false, presetKeys, customPresets, }) {
     const [isOpen, setIsOpen] = useState(false);
     const [inputFromValue, setInputFromValue] = useState("");
     const [inputToValue, setInputToValue] = useState("");
@@ -5218,7 +4577,7 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
     const containerRef = useRef(null);
     const inputFromRef = useRef(null);
     const inputToRef = useRef(null);
-    const prevValueRef = useRef(value ?? null);
+    const prevValueRef = useRef(undefined);
     // Calculate presets to render
     const presetsToRender = useMemo(() => {
         let presets = [];
@@ -5301,17 +4660,26 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
     }, [maxRangeDays]);
     // Sync input values with prop value
     useEffect(() => {
-        const currentValue = value ?? undefined;
-        if (currentValue !== prevValueRef.current) {
-            prevValueRef.current = currentValue ?? null;
-            if (currentValue?.from) {
-                setInputFromValue(format(currentValue.from, displayFormat, { locale: enGB }));
+        const currentFromTime = value?.from?.getTime();
+        const currentToTime = value?.to?.getTime();
+        const prevFromTime = prevValueRef.current?.fromTime;
+        const prevToTime = prevValueRef.current?.toTime;
+        // Only update if times have actually changed
+        if (currentFromTime !== prevFromTime || currentToTime !== prevToTime) {
+            prevValueRef.current = {
+                fromTime: currentFromTime,
+                toTime: currentToTime
+            };
+            // Update "from" input
+            if (value?.from) {
+                setInputFromValue(format(value.from, displayFormat, { locale: enGB }));
             }
             else {
                 setInputFromValue("");
             }
-            if (currentValue?.to) {
-                setInputToValue(format(currentValue.to, displayFormat, { locale: enGB }));
+            // Update "to" input
+            if (value?.to) {
+                setInputToValue(format(value.to, displayFormat, { locale: enGB }));
             }
             else {
                 setInputToValue("");
@@ -5333,26 +4701,60 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    const handleRangeSelect = useCallback((range) => {
-        if (!range) {
-            onChange(undefined);
-            return;
+    const handleRangeSelect = useCallback((range, // El rango sugerido por react-day-picker
+    selectedDay) => {
+        let newRange;
+        if (focusedInput === 'from') {
+            newRange = { from: selectedDay, to: value?.to };
+            if (newRange.to && selectedDay > newRange.to) {
+                newRange.to = undefined;
+                setFocusedInput('to');
+            }
+            else if (newRange.to) {
+                setIsOpen(false);
+                setFocusedInput(undefined);
+            }
+            else {
+                setFocusedInput('to');
+            }
         }
-        const newRange = {
-            from: range.from,
-            to: range.to
-        };
-        // Validate range
+        else if (focusedInput === 'to') {
+            newRange = { from: value?.from, to: selectedDay };
+            if (newRange.from && selectedDay < newRange.from) {
+                newRange.from = undefined;
+                setFocusedInput('from');
+            }
+            else if (newRange.from) {
+                setIsOpen(false);
+                setFocusedInput(undefined);
+            }
+            else {
+                setFocusedInput('from');
+            }
+        }
+        else {
+            if (!range) {
+                onChange(undefined);
+                return;
+            }
+            newRange = { from: range.from, to: range.to };
+            if (range.from && range.to) {
+                setIsOpen(false);
+                setFocusedInput(undefined);
+            }
+            else if (range.from) {
+                setFocusedInput('to');
+            }
+            else {
+                setFocusedInput('from');
+            }
+        }
+        // Validate range before sending
         if (newRange.from && newRange.to && !validateRange(newRange.from, newRange.to)) {
-            return; // Don't update if invalid
+            return;
         }
         onChange(newRange);
-        // Close if both dates are selected
-        if (range.from && range.to) {
-            setIsOpen(false);
-            setFocusedInput(undefined);
-        }
-    }, [onChange, validateRange]);
+    }, [onChange, validateRange, value, focusedInput]);
     const handleClearFrom = useCallback((e) => {
         e.stopPropagation();
         onChange({ from: undefined, to: value?.to });
@@ -5474,7 +4876,9 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
         }
     }, []);
     // Handle preset click
-    const handlePresetClick = useCallback((preset) => {
+    const handlePresetClick = useCallback((preset, e) => {
+        e.preventDefault();
+        e.stopPropagation();
         onChange(preset.getValue());
         setIsOpen(false);
     }, [onChange]);
@@ -5492,10 +4896,24 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
             ...(disabledMatcher ? [disabledMatcher] : []),
         ];
         // If maxRangeDays is set and we have a "from" date, disable dates beyond the range
-        if (maxRangeDays && value?.from && !value?.to) {
-            const maxDate = new Date(value.from);
-            maxDate.setDate(maxDate.getDate() + maxRangeDays);
-            baseDisabled.push({ after: maxDate });
+        if (maxRangeDays) {
+            if (value?.from) {
+                const maxAllowedDate = new Date(value.from);
+                maxAllowedDate.setDate(maxAllowedDate.getDate() + maxRangeDays);
+                if (focusedInput !== 'from') {
+                    baseDisabled.push({ after: maxAllowedDate });
+                }
+                if (focusedInput === 'to' && !value?.to) {
+                    const minAllowedDate = new Date(value.from);
+                    minAllowedDate.setDate(minAllowedDate.getDate() - maxRangeDays);
+                    baseDisabled.push({ before: minAllowedDate });
+                }
+            }
+            if (value?.to && !value?.from && focusedInput === 'from') {
+                const minAllowedDate = new Date(value.to);
+                minAllowedDate.setDate(minAllowedDate.getDate() - maxRangeDays);
+                baseDisabled.push({ before: minAllowedDate });
+            }
         }
         return baseDisabled;
     }, [disabledDates, minDate, maxDate, disabledMatcher, maxRangeDays, value]);
@@ -5508,7 +4926,7 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
         }
         return undefined;
     }, [value]);
-    return (jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: rangeStyles.rangeWrapper, children: [jsxs("div", { className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputFromRef, type: "text", value: inputFromValue, placeholder: placeholderFrom, onChange: handleInputFromChange, onBlur: () => handleInputBlur('from'), onClick: handleInputFromClick, onKeyDown: (e) => handleInputKeyDown(e, 'from'), disabled: disabled, required: required, "data-focused": focusedInput === 'from' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxs("div", { className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputToRef, type: "text", value: inputToValue, placeholder: placeholderTo, onChange: handleInputToChange, onBlur: () => handleInputBlur('to'), onClick: handleInputToClick, onKeyDown: (e) => handleInputKeyDown(e, 'to'), disabled: disabled, required: required, "data-focused": focusedInput === 'to' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), isOpen && (jsxs("div", { className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, "data-position": popupPosition, children: [showPresets && presetsToRender.length > 0 && (jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsx("button", { type: "button", onClick: () => handlePresetClick(preset), children: preset.label }, preset.key))) })), jsx(DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, locale: enGB, numberOfMonths: numberOfMonths, formatters: formatters, components: {
+    return (jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: rangeStyles.rangeWrapper, children: [jsxs("div", { className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputFromRef, type: "text", value: inputFromValue, placeholder: placeholderFrom, onChange: handleInputFromChange, onBlur: () => handleInputBlur('from'), onClick: handleInputFromClick, onKeyDown: (e) => handleInputKeyDown(e, 'from'), disabled: disabled, required: required, "data-focused": focusedInput === 'from' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxs("div", { className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputToRef, type: "text", value: inputToValue, placeholder: placeholderTo, onChange: handleInputToChange, onBlur: () => handleInputBlur('to'), onClick: handleInputToClick, onKeyDown: (e) => handleInputKeyDown(e, 'to'), disabled: disabled, required: required, "data-focused": focusedInput === 'to' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), isOpen && (jsxs("div", { className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, "data-position": popupPosition, children: [showPresets && presetsToRender.length > 0 && (jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsx(DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, locale: enGB, numberOfMonths: numberOfMonths, defaultMonth: defaultMonth || value?.from || undefined, formatters: formatters, components: {
                                         Caption: (props) => jsx(CustomCaption$1, { ...props }),
                                     }, modifiers: {
                                         today: new Date(),
@@ -5686,10 +5104,52 @@ function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelP
 }
 
 function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval = 15, minTime, maxTime, labelProps, alignProps, datePlaceholder = "dd.MM.yyyy", timePlaceholder = "HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showNowButton = false, }) {
+    // ========================================
+    // PROPS NORMALIZATION
+    // ========================================
+    /**
+     * Normalize datetime prop to valid Date object
+     * @returns Valid Date object or undefined if invalid
+     */
+    const normalizeDateTime = useCallback((dateTime, propName) => {
+        if (!dateTime)
+            return undefined;
+        try {
+            // Convert to Date object if not already
+            const date = dateTime instanceof Date
+                ? dateTime
+                : new Date(dateTime);
+            // Validate the Date object is valid
+            if (isNaN(date.getTime())) {
+                console.warn(`[CwDateTimePicker] Invalid ${propName} provided:`, dateTime);
+                return undefined;
+            }
+            return date;
+        }
+        catch (error) {
+            console.warn(`[CwDateTimePicker] Error parsing ${propName}:`, dateTime, error);
+            return undefined;
+        }
+    }, []);
+    // Normalize min/max datetime props using the helper
+    const normalizedMinDateTime = useMemo(() => normalizeDateTime(minDateTime, 'minDateTime'), [minDateTime, normalizeDateTime]);
+    const normalizedMaxDateTime = useMemo(() => normalizeDateTime(maxDateTime, 'maxDateTime'), [maxDateTime, normalizeDateTime]);
+    // ========================================
+    // INTERNAL STATE
+    // ========================================
     const [selectedDate, setSelectedDate] = useState(value);
     const [selectedTime, setSelectedTime] = useState(value ? `${value.getHours().toString().padStart(2, "0")}:${value.getMinutes().toString().padStart(2, "0")}` : undefined);
-    const prevValueRef = useRef(value);
-    // Combine date and time into a single Date object
+    // Track previous value to detect external changes
+    const prevValueRef = useRef(undefined);
+    // ========================================
+    // COMBINATION AND VALIDATION LOGIC
+    // ========================================
+    /**
+     * Combine date and time into a single Date object
+     * Validates the combined datetime against min/max constraints
+     *
+     * @returns Combined Date object or undefined if invalid
+     */
     const combineDateTime = useCallback((date, time) => {
         if (!date)
             return undefined;
@@ -5697,21 +5157,85 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
         if (!time) {
             const combined = new Date(date);
             combined.setHours(0, 0, 0, 0);
+            // Validate against min/max datetime
+            if (normalizedMinDateTime && combined < normalizedMinDateTime)
+                return undefined;
+            if (normalizedMaxDateTime && combined > normalizedMaxDateTime)
+                return undefined;
             return combined;
         }
+        // Parse time and combine with date
         const [hours, minutes] = time.split(':').map(Number);
         const combined = new Date(date);
         combined.setHours(hours, minutes, 0, 0);
+        // Validate against min/max datetime
+        if (normalizedMinDateTime && combined < normalizedMinDateTime)
+            return undefined;
+        if (normalizedMaxDateTime && combined > normalizedMaxDateTime)
+            return undefined;
         return combined;
-    }, []);
-    // Sync internal state with prop value - only when changed externally
+    }, [normalizedMinDateTime, normalizedMaxDateTime]);
+    /**
+     * Calculate dynamic time restrictions based on selected date
+     *
+     * If the selected date matches the min/max date boundary, restrict times accordingly.
+     * Allows users to manually type any valid time, not just interval-aligned times.
+     * The timeInterval prop only affects the dropdown options, not manual input validation.
+     *
+     * @param selectedDate - Currently selected date
+     * @returns Object with minTime and maxTime strings in "HH:mm" format
+     */
+    const calculateTimeRestrictions = 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());
+        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}`;
+            }
+        }
+        // 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}`;
+            }
+        }
+        return {
+            minTime: calculatedMinTime,
+            maxTime: calculatedMaxTime
+        };
+    }, [normalizedMinDateTime, normalizedMaxDateTime, minTime, maxTime]);
+    // Calculate current time restrictions based on selected date
+    // Recalculates whenever selectedDate or the calculation function changes
+    const timeRestrictions = useMemo(() => calculateTimeRestrictions(selectedDate), [selectedDate, calculateTimeRestrictions]);
+    // ========================================
+    // SYNC WITH EXTERNAL VALUE PROP
+    // ========================================
+    /**
+     * Sync internal state with prop value - only when changed externally
+     * Uses prevValueRef to detect if the change came from outside
+     * (e.g., parent component updated the value programmatically)
+     * vs. internal changes (user interaction)
+     */
     useEffect(() => {
-        const currentValue = value ?? undefined;
-        if (currentValue !== prevValueRef.current) {
-            prevValueRef.current = currentValue;
-            if (currentValue) {
-                setSelectedDate(currentValue);
-                setSelectedTime(`${currentValue.getHours().toString().padStart(2, "0")}:${currentValue.getMinutes().toString().padStart(2, "0")}`);
+        const currentTime = value?.getTime();
+        const prevTime = prevValueRef.current?.getTime();
+        // Only update if value actually changed
+        if (currentTime !== prevTime) {
+            prevValueRef.current = value;
+            if (value) {
+                setSelectedDate(value);
+                setSelectedTime(`${value.getHours().toString().padStart(2, "0")}:${value.getMinutes().toString().padStart(2, "0")}`);
             }
             else {
                 setSelectedDate(undefined);
@@ -5719,29 +5243,81 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
             }
         }
     }, [value]);
+    // ========================================
+    // EVENT HANDLERS
+    // ========================================
+    /**
+     * Handle date selection change
+     *
+     * When date changes, validates if the currently selected time is still valid.
+     * If time becomes invalid (e.g., user switched from Mar 14 to Mar 15 with maxTime=16:27,
+     * and had 18:00 selected), it resets the time to undefined.
+     */
     const handleDateChange = useCallback((date) => {
         setSelectedDate(date);
-        const combined = combineDateTime(date, selectedTime);
-        onChange(combined);
-    }, [selectedTime, combineDateTime, onChange]);
+        if (date && selectedTime) {
+            const combined = combineDateTime(date, selectedTime);
+            if (!combined) {
+                // Time is no longer valid for this date
+                // Auto-set to first valid time (minTime)
+                const restrictions = calculateTimeRestrictions(date);
+                const newTime = restrictions.minTime || undefined;
+                setSelectedTime(newTime);
+                onChange(combineDateTime(date, newTime));
+                return;
+            }
+            onChange(combined);
+        }
+        else if (date) {
+            // Just date selected, no time yet
+            // Auto-set to minTime if available for better UX
+            const restrictions = calculateTimeRestrictions(date);
+            if (restrictions.minTime) {
+                setSelectedTime(restrictions.minTime);
+                onChange(combineDateTime(date, restrictions.minTime));
+            }
+            else {
+                onChange(undefined);
+            }
+        }
+        else {
+            onChange(undefined);
+        }
+    }, [selectedTime, combineDateTime, onChange, calculateTimeRestrictions]);
+    /**
+     * Handle time selection change
+     *
+     * Combines the new time with the selected date and validates.
+     * Only calls onChange if the combination is valid.
+     */
     const handleTimeChange = useCallback((time) => {
         setSelectedTime(time);
         const combined = combineDateTime(selectedDate, time);
-        onChange(combined);
+        // Only update if the combination is valid
+        if (combined !== undefined || !time) {
+            onChange(combined);
+        }
     }, [selectedDate, combineDateTime, onChange]);
+    /**
+     * Handle "Now" button click
+     * Sets the datetime to the current moment, if it's within the allowed min/max datetime range.
+     */
     const handleNowClick = useCallback(() => {
         const now = new Date();
         // Check if now is within allowed range
-        const isNowValid = (!minDateTime || now >= minDateTime) &&
-            (!maxDateTime || now <= maxDateTime);
+        const isNowValid = (!normalizedMinDateTime || now >= normalizedMinDateTime) &&
+            (!normalizedMaxDateTime || now <= normalizedMaxDateTime);
         if (isNowValid) {
             onChange(now);
         }
-    }, [minDateTime, maxDateTime, onChange]);
-    // Extract min/max date from minDateTime/maxDateTime
-    const minDate = minDateTime;
-    const maxDate = maxDateTime;
-    return (jsx("div", { className: `cw-datetimepicker cw-datetimepicker-separate ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [jsx(CwDatePicker, { value: selectedDate, onChange: handleDateChange, minDate: minDate, maxDate: maxDate, disabledDates: disabledDates, disabledMatcher: disabledMatcher, placeholder: datePlaceholder, disabled: disabled, required: required, showClear: showClear, numberOfMonths: numberOfMonths, popupPosition: popupPosition }), jsx(CwTimePicker, { value: selectedTime, onChange: handleTimeChange, interval: timeInterval, minTime: minTime, maxTime: maxTime, placeholder: timePlaceholder, disabled: disabled, required: required, showClear: showClear, popupPosition: popupPosition }), showNowButton && (jsx(CwButton, { type: "button", variant: "outline", onClick: handleNowClick, disabled: disabled, title: "Set to current date and time", text: "Now" }))] })] }) }));
+    }, [normalizedMinDateTime, normalizedMaxDateTime, onChange]);
+    // Extract min/max date from normalized datetime for DatePicker
+    const minDate = normalizedMinDateTime;
+    const maxDate = normalizedMaxDateTime;
+    // ========================================
+    // RENDER
+    // ========================================
+    return (jsx("div", { className: `cw-datetimepicker cw-datetimepicker-separate ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [jsx(CwDatePicker, { value: selectedDate, onChange: handleDateChange, minDate: minDate, maxDate: maxDate, disabledDates: disabledDates, disabledMatcher: disabledMatcher, placeholder: datePlaceholder, disabled: disabled, required: required, showClear: showClear, numberOfMonths: numberOfMonths, popupPosition: popupPosition }), jsx(CwTimePicker, { value: selectedTime, onChange: handleTimeChange, interval: timeInterval, minTime: timeRestrictions.minTime, maxTime: timeRestrictions.maxTime, placeholder: timePlaceholder, disabled: disabled, required: required, showClear: showClear, popupPosition: popupPosition }), showNowButton && (jsx(CwButton, { type: "button", variant: "outline", onClick: handleNowClick, disabled: disabled, title: "Set to current date and time", text: "Now" }))] })] }) }));
 }
 
 var compactStyles = {"compactPopup":"cw-datetime-compact-module_compactPopup__GiuNY","calendarWrapper":"cw-datetime-compact-module_calendarWrapper__P4Nlq","timeWrapper":"cw-datetime-compact-module_timeWrapper__uMe-A","compactTimeList":"cw-datetime-compact-module_compactTimeList__MzSQT"};
@@ -7046,8 +6622,8 @@ class CwScheduler2 extends Component {
             this.handleResize();
         }
         if (dateChange) {
-            const events = lodash.cloneDeep(this.props.events);
-            const resources = lodash.cloneDeep(this.props.resources);
+            const events = cloneDeep(this.props.events);
+            const resources = 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());
@@ -7170,6 +6746,12 @@ const PinButton = ({ canBePinned, resource, onCrewPinning }) => {
     return jsx("button", { className: "cw-button-icon cw-icon-pin", ...buttonProps });
 };
 
+const addMinutesToDateFromPx = (originalDate, leftPx, minutesPerPx) => {
+    const minutes = leftPx / minutesPerPx;
+    const datePlusMinutes = new Date(originalDate.getTime() + minutes * 60000);
+    return datePlusMinutes;
+};
+
 const doubleClickOnResource = (props, resource) => {
     if (props.scheduler_handleDblClickOnResourceInScheduler) {
         props.scheduler_handleDblClickOnResourceInScheduler(resource);
@@ -7336,12 +6918,6 @@ const EventRender = ({ event, schedulerProps }) => {
     return render;
 };
 
-const addMinutesToDateFromPx = (originalDate, leftPx, minutesPerPx) => {
-    const minutes = leftPx / minutesPerPx;
-    const datePlusMinutes = new Date(originalDate.getTime() + minutes * 60000);
-    return datePlusMinutes;
-};
-
 const onDropEventToResource = (props, cblDragNDrop, resource) => {
     props.scheduler_handleOnDropCblEventsOnResource.call(props.parent, cblDragNDrop, resource);
 };
@@ -7441,12 +7017,25 @@ const ResourceRender = memo(({ res, schedulerProps, contentArea, state }) => {
         }, className: "cwellt_divRow_schContent", children: res.events.map((evnt) => (jsx(EventRender, { event: evnt, schedulerProps: schedulerProps }, evnt.id))) }, res.id));
 }, arePropsEqual);
 
-const ResourceListRender = ({ resources, schedulerProps, state, contentArea, onClickContextMenu, crewAssignmentSchedulerContextMenu, }) => {
-    return (jsx(Fragment$1, { children: resources.map((r, _i) => (jsx(Dropdown, { placement: "topLeft", dropdownRender: () => {
-                return (jsx(Menu, { style: { pointerEvents: "auto" }, onClick: (e) => {
-                        onClickContextMenu(e, r);
-                    }, children: crewAssignmentSchedulerContextMenu?.map((m) => (jsxs(Menu.Item, { children: [jsx("span", { className: m.icon, style: { color: m.color } }), jsx("span", { className: "cwellt_contextMenu", children: m.text })] }, m.key))) }));
-            }, trigger: ["contextMenu"], children: jsx("span", { onDoubleClick: () => doubleClickOnResource(schedulerProps, r), id: schedulerProps.id + "_" + r.id, children: jsx(ResourceRender, { res: r, schedulerProps: schedulerProps, contentArea: contentArea, state: state, isInViewport: r.isInViewport }, r.id) }) }, r.id))) }));
+const ResourceListRender = ({ resources, schedulerProps, state, contentArea, 
+// onClickContextMenu,
+crewAssignmentSchedulerContextMenu, }) => {
+    return (jsx(Fragment$1, { children: resources.map((r, _i) => (jsx(CwAnchoredMenu, { placement: "bottom", onContextMenu: (e) => {
+                // Dirty temporal solution to remove ANT design, this can be killed when this scheduler is deprecated
+                const leftPos = e.currentTarget.getBoundingClientRect().left -
+                    (contentArea?.getBoundingClientRect()?.left ?? 0) -
+                    window.scrollX;
+                const calculatedDatetime = addMinutesToDateFromPx(schedulerProps.startDate, leftPos, state.minutePx);
+                r.__contextMenuDatetime = calculatedDatetime;
+            }, options: crewAssignmentSchedulerContextMenu?.map(m => ({
+                key: m.key,
+                label: (jsxs(Fragment, { children: [jsx("span", { className: m.icon, style: { color: m.color } }), jsx("span", { children: m.text })] }))
+            })) ?? [], onSelect: (key) => {
+                const datetime = r.__contextMenuDatetime ?? new Date();
+                if (schedulerProps.scheduler_handleOnClickContextMenuResource) {
+                    schedulerProps.scheduler_handleOnClickContextMenuResource(datetime, r, key, schedulerProps.id);
+                }
+            }, children: jsx("span", { onDoubleClick: () => doubleClickOnResource(schedulerProps, r), id: schedulerProps.id + "_" + r.id, children: jsx(ResourceRender, { res: r, schedulerProps: schedulerProps, contentArea: contentArea, state: state, isInViewport: r.isInViewport }, r.id) }) }, r.id))) }));
 };
 
 const TimeLine$1 = ({ id, toolTipTitle, marginLeft, color = "rgba(255,0,0,.6)", pixels = 2, height = "100%", zIndex = 1, }) => {
@@ -8201,6 +7790,13 @@ function getPercentageFromMouseEvent(event) {
     const clickPercentage = x / totalWidth;
     return clickPercentage;
 }
+function getPercentageFromElement(clientX, element) {
+    const rect = element.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const totalWidth = rect.width;
+    const clickPercentage = x / totalWidth;
+    return clickPercentage;
+}
 
 class OnClickEvent {
     id;
@@ -8437,15 +8033,13 @@ const BackgroundEvent = ({ value, heightRem }) => {
 
 var styles$1 = {"scheduler-row-header":"scheduler-row-module_scheduler-row-header__S-iv4"};
 
-var styles = {"super-scheduler-row-header":"super-scheduler-module_super-scheduler-row-header__TTs4e","indicators":"super-scheduler-module_indicators__f4lIT","scheduler-crewmember-functions":"super-scheduler-module_scheduler-crewmember-functions__BS2hs"};
-
 const DefaultRowHeader = ({ value, width, onEvent }) => {
     return (jsxs("div", { style: {
             width: width,
             // background: color,
         }, onClick: (_) => {
             onEvent(new OnClickRowHeader(value.rowId));
-        }, className: styles$1["scheduler-row-header"], children: [jsxs("div", { children: [jsx("strong", { children: value.title }), value.title2 && jsxs("span", { children: ["-", value.title2] }), " ", jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 && jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxs("span", { children: ["-", value.subtitle2] })] })] }));
+        }, className: styles$1["scheduler-row-header"], children: [jsxs("div", { children: [jsx("strong", { children: value.title }), value.title2 && jsxs("span", { children: ["-", value.title2] }), " ", jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 && jsxs("span", { className: styles$1["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxs("span", { children: ["-", value.subtitle2] })] })] }));
 };
 
 function useSingleAndDoubleClicks(onClick, onDoubleClick) {
@@ -8490,7 +8084,7 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
     const [isOnDrag, setIsOnDrag] = useState(false);
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     // Calculate colors of the event
-    const backColor = getHSLColor(value.color, value.alpha ?? 0.75);
+    const backColor = getHSLColor(value.color, value.alpha ?? 1);
     const textColor = getContrastColor(value.color);
     const eventTransparent = value.alpha ? value.alpha < 0.7 : false;
     const canClick = value.isDraggable || value.isClickable === true;
@@ -8518,18 +8112,12 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
         e.preventDefault();
         onEvent(new OnDoubleClickEvent(value.id));
     });
-    return (jsx(Dropdown, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottom", menu: {
-            items: value.contextMenuItems,
-            onClick: (e) => {
-                e.domEvent.nativeEvent.preventDefault();
-                e.domEvent.nativeEvent.stopPropagation();
-                e.domEvent.nativeEvent.stopImmediatePropagation();
-                e.domEvent.preventDefault();
-                e.domEvent.stopPropagation();
-                onEvent(new OnClickContextMenu(value.id, e.key));
-            },
-            onMouseLeave: () => setIsContextMenuOpen(false),
-        }, trigger: ["contextMenu"], overlayStyle: { animationDuration: "0" }, arrow: (value.contextMenuItems?.length ?? 0) > 0, children: jsx("div", { style: {
+    return (jsx(CwAnchoredMenu, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, onContextMenu: (e) => {
+            e.stopPropagation();
+            // 	onEvent(new OnRightClickEvent(value.id));
+        }, placement: "bottom", options: value.contextMenuItems ?? [], onSelect: (key) => {
+            onEvent(new OnClickContextMenu(value.id, key));
+        }, children: jsx("div", { style: {
                 top: "2px",
                 left: `${value.left}%`,
                 width: `${value.width}%`,
@@ -8549,10 +8137,6 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
             }, onDragEnd: (_) => {
                 if (value.isDraggable)
                     setIsOnDrag(false);
-            }, onContextMenu: (e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                onEvent(new OnRightClickEvent(value.id));
             }, children: jsx(CwGenericTooltip, { content: value.tooltip, position: "bottom", hide: isOnDrag, dissapearsWhenHover: true, showDelay: 200, children: jsxs("div", { style: {
                         border: value.selected ? "2px solid black" : "none",
                         backgroundColor: backColor,
@@ -8595,7 +8179,7 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
                                 backgroundColor: value.primaryTimeMarkerColor,
                             } })), value.secondaryTimeMarkerColor && (jsx("div", { className: styles$2["time-marker"], style: {
                                 backgroundColor: value.secondaryTimeMarkerColor,
-                            } }))] }) }) }, value.id) }, value.id));
+                            } }))] }) }) }, value.id) }));
 };
 
 const eventsCollide = (event1, event2) => {
@@ -8639,18 +8223,11 @@ const WeekEndLine = ({ left, top = "0px", height, widthPercentage }) => {
     return (jsx(TimeLine, { color: "rgba(0,0,0,0.05)", left: left + "%", height: height, width: widthPercentage + "%", top: top }));
 };
 
-const onClickMenuItem$1 = (e, event) => {
-    e.domEvent.nativeEvent.preventDefault();
-    e.domEvent.nativeEvent.stopPropagation();
-    e.domEvent.nativeEvent.stopImmediatePropagation();
-    e.domEvent.preventDefault();
-    e.domEvent.stopPropagation();
-    event();
-};
 const SchedulerRow = memo((props) => {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const { events, backgroundEvents, rowHeader, contextMenuItems, RowTitleComp, EventComp, BackgroundEventComp, weekendLines, divisionLines, timeLinePercentage, selectedDate, visibleDays, onEvent, } = props;
     const internalRows = separateEventsToInnerRows(events);
+    const schedulerDivRef = useRef(null);
     const { handleClick, handleDoubleClick } = useSingleAndDoubleClicks((e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -8663,15 +8240,17 @@ const SchedulerRow = memo((props) => {
     return (jsxs("div", { style: {
             display: "flex",
             minHeight: props.rowHeightInRem + "rem",
-        }, children: [jsx(RowTitleComp, { ...rowHeader }), jsx(Dropdown, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottom", menu: {
-                    items: contextMenuItems,
-                    onClick: (e) => {
-                        onClickMenuItem$1(e, () => {
-                            onEvent(new OnClickContextMenu(rowHeader.value.rowId, e.key));
-                        });
-                    },
-                    onMouseLeave: () => setIsContextMenuOpen(false),
-                }, trigger: ["contextMenu"], overlayStyle: { animationDuration: "0" }, arrow: (contextMenuItems?.length ?? 0) > 0, children: jsxs("div", { style: {
+        }, "data-name": "scheduler-row", children: [jsx(RowTitleComp, { ...rowHeader }), jsx(CwAnchoredMenu, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottom", options: contextMenuItems ?? [], onSelect: (key) => {
+                    onEvent(new OnClickContextMenu(rowHeader.value.rowId, key));
+                }, onContextMenu: (e) => {
+                    // e.preventDefault();
+                    e.stopPropagation();
+                    if (!schedulerDivRef.current)
+                        return;
+                    const percentage = getPercentageFromElement(e.clientX, schedulerDivRef.current);
+                    const date = dateFromPercentage(selectedDate, visibleDays, percentage);
+                    onEvent(new OnRightClickRow(rowHeader.value.rowId, date));
+                }, children: jsxs("div", { ref: schedulerDivRef, style: {
                         flex: 1,
                         display: "flex",
                         flexDirection: "column",
@@ -8680,8 +8259,6 @@ const SchedulerRow = memo((props) => {
                         e.preventDefault();
                         const percentage = getPercentageFromMouseEvent(e);
                         const date = dateFromPercentage(selectedDate, visibleDays, percentage);
-                        // https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/platform
-                        // change for navigator.userAgentData.platform when acepted in all browsers
                         const isMac = navigator.platform.toUpperCase().includes("MAC");
                         const isCtrlOrAltPressed = isMac ? e.altKey : e.ctrlKey;
                         if (isCtrlOrAltPressed) {
@@ -8692,13 +8269,7 @@ const SchedulerRow = memo((props) => {
                         }
                     }, onDragOver: (e) => {
                         e.preventDefault();
-                    }, onClick: handleClick, onDoubleClick: handleDoubleClick, onContextMenu: (e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        const percentage = getPercentageFromMouseEvent(e);
-                        const date = dateFromPercentage(selectedDate, visibleDays, percentage);
-                        onEvent(new OnRightClickRow(rowHeader.value.rowId, date));
-                    }, children: [weekendLines.map((weekend) => (jsx(WeekEndLine, { height: "100%", left: weekend.left, widthPercentage: weekend.width }, weekend.left))), divisionLines.map((division) => (jsx(DivisionLine, { height: "100%", left: division.left }, division.left))), backgroundEvents.length > 0 && backgroundEvents.some((e) => e.isVisible) && (jsx("div", { style: {
+                    }, onClick: handleClick, onDoubleClick: handleDoubleClick, children: [weekendLines.map((weekend) => (jsx(WeekEndLine, { height: "100%", left: weekend.left, widthPercentage: weekend.width }, weekend.left))), divisionLines.map((division) => (jsx(DivisionLine, { height: "100%", left: division.left }, division.left))), backgroundEvents.length > 0 && backgroundEvents.some((e) => e.isVisible) && (jsx("div", { style: {
                                 height: "100%",
                                 position: internalRows.length > 0 ? "absolute" : "relative",
                                 width: "100%",
@@ -8711,7 +8282,7 @@ const SchedulerRow = memo((props) => {
                                     height: props.rowHeightInRem + "rem",
                                     pointerEvents: "none"
                                 }, children: internalRow.map((event) => (jsx(EventComp, { value: event, heightRem: props.rowHeightInRem, onEvent: onEvent }, event.id))) }, index));
-                        }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "0px", height: `100%` }))] }) }, rowHeader.value.rowId)] }));
+                        }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "0px", height: `100%` }))] }) })] }));
 }, (prevProps, nextProps) => {
     // This memo is necessary to prevent re-render all the rows when a user makes drag and drop
     const getEventKey = (event) => {
@@ -8971,6 +8542,8 @@ 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 BackgroundEventComp = props.BackgroundEventComp ?? BackgroundEvent;
@@ -9014,7 +8587,7 @@ const Scheduler = (props) => {
             setTimeLinePercentage(percentage);
         };
         updateTimeLinePercentage();
-        const interval = setInterval(updateTimeLinePercentage, 10_000);
+        const interval = setInterval(updateTimeLinePercentage, refreshMilliSeconds);
         return () => clearInterval(interval);
     }, [selectedDate, isUtc, totalHours]);
     // Memoized Row Component
@@ -9382,6 +8955,8 @@ class Resource {
     }
 }
 
+var styles = {"super-scheduler-row-header":"super-scheduler-module_super-scheduler-row-header__TTs4e","indicators":"super-scheduler-module_indicators__f4lIT","scheduler-crewmember-functions":"super-scheduler-module_scheduler-crewmember-functions__BS2hs"};
+
 class OnPinRow {
     id;
     constructor(id) {
@@ -9398,37 +8973,23 @@ class OnClearPinned {
     constructor() { }
 }
 
-const onClickMenuItem = (e, event) => {
-    e.domEvent.nativeEvent.preventDefault();
-    e.domEvent.nativeEvent.stopPropagation();
-    e.domEvent.nativeEvent.stopImmediatePropagation();
-    e.domEvent.preventDefault();
-    e.domEvent.stopPropagation();
-    event();
-};
 const PinRowHeader = ({ value, width, onEvent }) => {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const { highlightColor, isLoading } = value;
-    return (jsx(Dropdown, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottom", menu: {
-            items: value.contextMenuItems,
-            onClick: (e) => {
-                onClickMenuItem(e, () => {
-                    onEvent(new OnClickContextMenu(value.rowId, e.key));
-                });
-            },
-            onMouseLeave: () => setIsContextMenuOpen(false),
-        }, trigger: ["contextMenu"], overlayStyle: { animationDuration: "0" }, arrow: (value.contextMenuItems?.length ?? 0) > 0, children: jsx("div", { children: jsx(CwGenericTooltip, { content: value.tooltip, position: "right", dissapearsWhenHover: true, overlayStyle: value.overlayTooltipStyle, children: jsxs("div", { style: {
-                        width: width,
-                        background: highlightColor,
-                    }, className: styles["super-scheduler-row-header"], children: [jsx("button", { className: "cw-button-icon cwi-pin", "data-pinned": value.isPinned, onClick: (_) => {
-                                onEvent(value.isPinned ? new OnUnpinRow(value.rowId) : new OnPinRow(value.rowId));
-                            } }), jsx("div", { className: styles["indicators"], children: value.indicators ?? undefined }), jsxs("div", { style: {
-                                display: "flex",
-                                flexDirection: "column",
-                                justifyContent: "center",
-                                alignItems: "flex-start",
-                            }, children: [jsxs("div", { children: [jsx("strong", { children: value.title }), value.title2 && jsxs("span", { children: ["-", value.title2] }), " ", jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 &&
-                                            jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxs("span", { children: ["-", value.subtitle2] })] })] }), isLoading ? jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }) }, value.rowId) }) }, value.rowId));
+    return (jsx(CwAnchoredMenu, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "right", options: value.contextMenuItems ?? [], onSelect: (key) => {
+            onEvent(new OnClickContextMenu(value.rowId, key));
+        }, children: jsx(CwGenericTooltip, { content: value.tooltip, position: "right", dissapearsWhenHover: true, overlayStyle: value.overlayTooltipStyle, children: jsxs("div", { style: {
+                    width: width,
+                    background: highlightColor,
+                }, className: styles["super-scheduler-row-header"], children: [jsx("button", { className: "cw-button-icon cwi-pin", "data-pinned": value.isPinned, onClick: (_) => {
+                            onEvent(value.isPinned ? new OnUnpinRow(value.rowId) : new OnPinRow(value.rowId));
+                        } }), jsx("div", { className: styles["indicators"], children: value.indicators ?? undefined }), jsxs("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: "center",
+                            alignItems: "flex-start",
+                        }, children: [jsxs("div", { children: [jsx("strong", { children: value.title }), value.title2 && jsxs("span", { children: ["-", value.title2] }), " ", jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 &&
+                                        jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxs("span", { children: ["-", value.subtitle2] })] })] }), isLoading ? jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }) }, value.rowId) }, value.rowId));
 };
 
 const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory, unPinnedOrderCategory, backgroundEvents, contextMenuItems, onEvent }) => {
@@ -9440,7 +9001,7 @@ const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory,
                             }, children: "Clear pinned" }) })] })), jsx(Scheduler, { id: `${id}-notPinned`, state: { ...state, isHeaderVisible: !isFirstVisible }, header: header, rows: notPinnedRows, events: events, backgroundEvents: backgroundEvents, contextMenuItems: contextMenuItems, orderCategories: unPinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader })] }));
 };
 
-const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder = "Search airport…", required = false, cblConfig, className = "", value, disabled = false, displayMode, width }) => {
+const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder = "Search airport…", required = false, cblConfig, className = "", value, disabled = false, displayMode, labelProps, alignProps, width }) => {
     // State
     const [inputValue, setInputValue] = useState("");
     const [options, setOptions] = useState([]);
@@ -9673,7 +9234,12 @@ const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder
         handleChange(0); // or -1, depending on API expectations
         inputRef.current?.focus();
     };
-    return (jsxs("div", { className: `cw-find-airport ${className}`, style: width ? { width } : undefined, children: [jsxs("div", { className: "cw-find-airport-input-wrapper", children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (jsx("div", { className: "cw-find-airport-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), inputValue && !disabled && !isInitialLoading && (jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected airport", variant: "icon", icon: "close", color: "neutral" }))] }), showDropdown && options.length > 0 && (jsx("div", { ref: dropdownRef, className: "cw-find-airport-dropdown", role: "listbox", children: options.map((option, index) => (jsx("div", { className: `cw-find-airport-option ${index === highlightedIndex ? "highlighted" : ""}`, onClick: () => handleOptionSelect(option.value), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }))] }));
+    // Get direction for data attribute
+    const direction = alignProps?.flexDirection || "row";
+    return (jsxs("div", { className: `cw-search-input ${className}`, style: {
+            ...(width ? { width } : {}),
+            ...(labelProps?.labelWidth ? { '--label-width': labelProps.labelWidth } : {})
+        }, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected airport", variant: "icon", icon: "close", color: "neutral" })) : (jsx(CwIcon, { iconId: "control-tower" })) })] })] }), showDropdown && options.length > 0 && (jsx("div", { ref: dropdownRef, className: "cw-input-search-dropdown", role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { className: index === highlightedIndex ? "highlighted" : "", onClick: () => handleOptionSelect(option.value), onMouseDown: (e) => e.preventDefault(), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }) }))] }));
 };
 
-export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwBtnAdd, CwBtnAddFolder, CwBtnAirport, CwBtnAlert, CwBtnApprove, CwBtnBookMark, CwBtnBulkDuty, CwBtnCancel, CwBtnCrewPlanning, CwBtnDelay, CwBtnDelete, CwBtnDownLoadAllInfo, CwBtnDownload, CwBtnDropDownMenu, CwBtnEdit, CwBtnEditFolder, CwBtnFiles, CwBtnGeneratePairing, CwBtnGoBackFolder, CwBtnHide, CwBtnImportRequests, CwBtnMVT, CwBtnNavFirstItemView, CwBtnNavLastItemView, CwBtnNavNextDay, CwBtnNavPreviewItem, CwBtnPairing, CwBtnPrint, CwBtnPropertyFolder, CwBtnPublish, CwBtnRefresh, CwBtnReleasePeriod, CwBtnSave, CwBtnSearch, CwBtnSelect, CwBtnShare, CwBtnStatistic, CwBtnUploadFiles, CwBtnVacations, CwBtnView, CwButton, CwButtonDef, CwCard, CwCardList, CwCheckbox, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwContextualMenu, CwDatePicker, CwDateRangePicker, CwDateTimePicker, CwDateTimePickerCompact, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownContainer, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwFloatingButton, CwGenericTooltip, CwHeadFilter, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalConfirm, CwModalHover, CwModalIframe, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwMultiselect, CwNote, CwOption, CwOptionList, CwReportModal, CwScheduler, CwScheduler2, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSuperScheduler, CwTable, CwTableGrouped, CwTabs, CwTag, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltip, CwTreeView, CwWeekdaySelector, DefaultRowHeader, MultiSelect, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, UiEvent, Weekdays, cblEvent, eventIsVisible, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage, useSortableList };
+export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwCard, CwCardList, CwCheckbox, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDateRangePicker, CwDateTimePicker, CwDateTimePickerCompact, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdownFilter, CwExpandable, CwFileUpload, CwFileUploadMultiple, CwFindAirport, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNote, CwOption, CwReportModal, CwScheduler, CwScheduler2, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSuperScheduler, CwTable, CwTableGrouped, CwTabs, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltip, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, UiEvent, Weekdays, cblEvent, eventIsVisible, getDefaultDivisions, getEventSizes, itemsToMultiFilterTags, useCwMessage, useSortableList };