@cwellt_software/cwellt-reactjs-lib 1.1.6 → 1.2.0

package/dist/index.es.js

@@ -1,14 +1,17 @@
 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 lodash from 'lodash';
+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 { cloneDeep } from 'lodash-es';
 import { VariableSizeList } from 'react-window';
-import { Palette, Category, Component as Component$1, Variant } from '@react-buddy/ide-toolbox';
 
 class CwSelectList {
     type;
@@ -48,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) {
@@ -195,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
@@ -210,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}`) });
@@ -236,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();
@@ -268,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) {
@@ -689,7 +619,7 @@ function CwLoadingSmall(CwelltLoadingAppointements) {
         jsx("div", {})) }));
 }
 
-var styles$j = {"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;
@@ -794,18 +724,18 @@ 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(() => {
         setIsVisible(true);
     }, showDelay);
-    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$j["cw-generic-tooltip-content"]);
+    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$k["cw-generic-tooltip-content"]);
     // Memoize tooltip content creation
     const tooltipContent = useMemo(() => {
         if (hide || !isVisible || !content)
             return null;
-        return createPortal(jsx("div", { className: styles$j["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`,
@@ -820,10 +750,14 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
         clearTooltipTimeout();
         setIsVisible(false);
     }, [clearTooltipTimeout]);
-    return (jsxs("div", { ref: containerRef, className: styles$j["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 ]
@@ -857,13 +791,13 @@ 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" } }))] }) })] })) }));
 }
 
-var styles$i = {"overlayPositioned":"CwConfirmationPopup-module_overlayPositioned__11qYB","popup":"CwConfirmationPopup-module_popup__ahPjM","message":"CwConfirmationPopup-module_message__MnNL4","buttons":"CwConfirmationPopup-module_buttons__fGYYE","button":"CwConfirmationPopup-module_button__ugYQE","confirmButton":"CwConfirmationPopup-module_confirmButton__rTP4S","cancelButton":"CwConfirmationPopup-module_cancelButton__Ry694"};
+var styles$j = {"overlayPositioned":"CwConfirmationPopup-module_overlayPositioned__11qYB","popup":"CwConfirmationPopup-module_popup__ahPjM","message":"CwConfirmationPopup-module_message__MnNL4","buttons":"CwConfirmationPopup-module_buttons__fGYYE","button":"CwConfirmationPopup-module_button__ugYQE","confirmButton":"CwConfirmationPopup-module_confirmButton__rTP4S","cancelButton":"CwConfirmationPopup-module_cancelButton__Ry694"};
 
 function CwConfirmationPopup(props) {
     const { isOpen, onConfirm, onCancel, message = "Are you sure you want to proceed?", confirmText = "Confirm", cancelText = "Cancel", placement = 'bottom', children } = props;
@@ -927,91 +861,30 @@ function CwConfirmationPopup(props) {
             onCancel();
         }
     };
-    return (jsxs(Fragment, { children: [renderChildren(), isOpen && (jsx("div", { className: styles$i.overlayPositioned, onClick: handleOverlayClick, children: jsxs("div", { ref: popupRef, className: styles$i.popup, style: {
+    return (jsxs(Fragment, { children: [renderChildren(), isOpen && (jsx("div", { className: styles$j.overlayPositioned, onClick: handleOverlayClick, children: jsxs("div", { ref: popupRef, className: styles$j.popup, style: {
                         position: 'absolute',
                         top: `${position.top}px`,
                         left: `${position.left}px`,
                         transform: 'none'
-                    }, children: [jsx("p", { className: styles$i.message, children: message }), jsxs("div", { className: styles$i.buttons, children: [jsx("button", { className: `${styles$i.button} ${styles$i.confirmButton}`, onClick: onConfirm, children: confirmText }), jsx("button", { className: `${styles$i.button} ${styles$i.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 }) }) }) })] }) }) })) }));
+                    }, 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 })] })] }) }))] }));
 }
 
-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$h = {"cw-dialog-main":"cw-dialog-module_cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module_cw-dialog-button-close__9GRd8"};
+var styles$i = {"cw-dialog-main":"cw-dialog-module_cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module_cw-dialog-button-close__9GRd8"};
 
 // Helper function to parse size values
 const parseSize = (size) => {
@@ -1052,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;
@@ -1222,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 header = useMemo(() => (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: headline }), customHeader || (jsx("button", { className: styles$h["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, 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
@@ -1256,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$h["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,
@@ -1283,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 {
@@ -1303,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, 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: "600px" })), 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"] }))] })) }));
     }
 }
 
@@ -1407,20 +1302,61 @@ 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$g = {"card":"cw-card-module_card__HJUT0","clickable":"cw-card-module_clickable__Y-V3X","disabled":"cw-card-module_disabled__0wHh1","loading":"cw-card-module_loading__-fzlx","content":"cw-card-module_content__ma9qy","headerContent":"cw-card-module_headerContent__x4Jfl","footerTags":"cw-card-module_footerTags__80sSW","loadingOverlay":"cw-card-module_loadingOverlay__8-zVV"};
+var styles$h = {"card":"cw-card-module_card__HJUT0","clickable":"cw-card-module_clickable__Y-V3X","disabled":"cw-card-module_disabled__0wHh1","loading":"cw-card-module_loading__-fzlx","content":"cw-card-module_content__ma9qy","headerContent":"cw-card-module_headerContent__x4Jfl","footerTags":"cw-card-module_footerTags__80sSW","loadingOverlay":"cw-card-module_loadingOverlay__8-zVV"};
 
 /**
 * CwCard - A simple card component for displaying content in a contained format
@@ -1444,11 +1380,11 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     // Construct class names using CSS modules
     const cardClassNames = [
         'cw-card',
-        styles$g.card,
+        styles$h.card,
         className,
-        clickable ? styles$g.clickable : '',
-        disabled ? styles$g.disabled : '',
-        isLoading ? styles$g.loading : '',
+        clickable ? styles$h.clickable : '',
+        disabled ? styles$h.disabled : '',
+        isLoading ? styles$h.loading : '',
     ].filter(Boolean).join(' ');
     // Handle click event when card is clickable
     const handleClick = () => {
@@ -1465,15 +1401,15 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     // Determine if footer should be rendered
     const hasFooter = hasChips || footer || (hasActions && direction === "row");
     // Actions component to reuse
-    const ActionsComponent = hasActions && !disabled ? (jsxs("div", { className: styles$g.actions, children: [extraActions ?? null, onEdit && jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
+    const ActionsComponent = hasActions && !disabled ? (jsxs("div", { className: styles$h.actions, children: [extraActions ?? null, onEdit && jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
     return (jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && {
             role: 'button',
             tabIndex: 0,
             onClick: handleClick,
-        }), "data-variant": variant, "data-direction": direction, children: [hasHeader && (jsxs("header", { children: [(title || subtitle) && (jsxs("div", { className: styles$g.headerContent, "data-alignment": alignment, children: [title && jsx("h5", { children: title }), subtitle && jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), jsx("div", { className: styles$g.content, children: children }), hasFooter && (jsxs("footer", { children: [hasChips && (jsx("div", { className: styles$g.footerTags, children: chips.map((chip, index) => (jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$g.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsx("div", { className: styles$g.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (jsx("div", { className: styles$g.loadingOverlay, children: jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
+        }), "data-variant": variant, "data-direction": direction, children: [hasHeader && (jsxs("header", { children: [(title || subtitle) && (jsxs("div", { className: styles$h.headerContent, "data-alignment": alignment, children: [title && jsx("h5", { children: title }), subtitle && jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), jsx("div", { className: styles$h.content, children: children }), hasFooter && (jsxs("footer", { children: [hasChips && (jsx("div", { className: styles$h.footerTags, children: chips.map((chip, index) => (jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$h.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsx("div", { className: styles$h.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (jsx("div", { className: styles$h.loadingOverlay, children: jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
 };
 
-var styles$f = {"cardContainer":"cw-card-list-module_cardContainer__l3YEh","pagination":"cw-card-list-module_pagination__5Ay78","pageInfo":"cw-card-list-module_pageInfo__uiMel","loading":"cw-card-list-module_loading__cYpND","emptyState":"cw-card-list-module_emptyState__RlqiS","sortControls":"cw-card-list-module_sortControls__mWgZA"};
+var styles$g = {"cardContainer":"cw-card-list-module_cardContainer__l3YEh","pagination":"cw-card-list-module_pagination__5Ay78","pageInfo":"cw-card-list-module_pageInfo__uiMel","loading":"cw-card-list-module_loading__cYpND","emptyState":"cw-card-list-module_emptyState__RlqiS","sortControls":"cw-card-list-module_sortControls__mWgZA"};
 
 function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey, ...htmlProps }) {
     const [currentPage, setCurrentPage] = useState(1);
@@ -1507,10 +1443,10 @@ function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', default
         '--card-width': `${defaultCardWidth}px`,
         '--card-gap': `${cardGap}px`
     };
-    return (jsxs("div", { ...htmlProps, children: [sortOptions.length > 0 && (jsxs("div", { className: styles$f.sortControls, children: [jsx("label", { htmlFor: "cardlist-sort-select", children: "Sort by:" }), jsx("select", { id: "cardlist-sort-select", value: sortKey, onChange: (e) => handleSortChange(e.target.value), className: styles$f.sortSelect, children: sortOptions.map(option => (jsx("option", { value: option.key, children: option.label }, option.key))) }), jsx("button", { onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'), className: `cw-button-icon ${sortDirection === 'asc' ? 'cwi-arrow-up' : 'cwi-arrow-down'}`, title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}` })] })), isLoading ? (jsx("div", { className: styles$f.loading, children: jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsx("div", { className: styles$f.emptyState, children: emptyState || jsx("p", { children: "No items to display" }) })) : (jsxs(Fragment, { children: [jsx("div", { className: `${styles$f.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsx("div", { className: styles$f.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (jsxs("div", { className: styles$f.pagination, children: [jsx("button", { disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)), className: "cw-button-icon cwi-chevron-left" }), jsxs("span", { className: styles$f.pageInfo, children: [currentPage, " of ", totalPages] }), jsx("button", { disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), className: "cw-button-icon cwi-chevron-right" })] }))] }))] }));
+    return (jsxs("div", { ...htmlProps, children: [sortOptions.length > 0 && (jsxs("div", { className: styles$g.sortControls, children: [jsx("label", { htmlFor: "cardlist-sort-select", children: "Sort by:" }), jsx("select", { id: "cardlist-sort-select", value: sortKey, onChange: (e) => handleSortChange(e.target.value), className: styles$g.sortSelect, children: sortOptions.map(option => (jsx("option", { value: option.key, children: option.label }, option.key))) }), jsx("button", { onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'), className: `cw-button-icon ${sortDirection === 'asc' ? 'cwi-arrow-up' : 'cwi-arrow-down'}`, title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}` })] })), isLoading ? (jsx("div", { className: styles$g.loading, children: jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsx("div", { className: styles$g.emptyState, children: emptyState || jsx("p", { children: "No items to display" }) })) : (jsxs(Fragment, { children: [jsx("div", { className: `${styles$g.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsx("div", { className: styles$g.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (jsxs("div", { className: styles$g.pagination, children: [jsx("button", { disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)), className: "cw-button-icon cwi-chevron-left" }), jsxs("span", { className: styles$g.pageInfo, children: [currentPage, " of ", totalPages] }), jsx("button", { disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), className: "cw-button-icon cwi-chevron-right" })] }))] }))] }));
 }
 
-var styles$e = {"cw-accordion":"cw-accordion-module_cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module_cw-accordion-body__xlI8b"};
+var styles$f = {"cw-accordion":"cw-accordion-module_cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module_cw-accordion-body__xlI8b"};
 
 /**
  *
@@ -1527,7 +1463,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
         setVisible_accordionBody(!isVisible_accordionBody);
     };
     // #endregion
-    return (jsxs("div", { className: styles$e["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxs("header", { onClick: () => showAccordionBody(), children: [jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsx("button", { className: "cw-button-icon" })] }), jsx("div", { className: styles$e["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
+    return (jsxs("div", { className: styles$f["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxs("header", { onClick: () => showAccordionBody(), children: [jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsx("button", { className: "cw-button-icon" })] }), jsx("div", { className: styles$f["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
 }
 
 /**
@@ -1538,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}
@@ -1564,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) => (
@@ -1584,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
@@ -1594,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({
@@ -1612,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);
@@ -1638,11 +1581,62 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
             dataCopy.sort((a, b) => {
                 const aVal = a[sortConfig.key];
                 const bVal = b[sortConfig.key];
+                // Handle null/undefined
+                if (aVal == null && bVal == null)
+                    return 0;
+                if (aVal == null)
+                    return 1;
+                if (bVal == null)
+                    return -1;
+                // Handle strings (case-insensitive)
+                if (typeof aVal === "string" && typeof bVal === "string") {
+                    const comparison = aVal.localeCompare(bVal, undefined, {
+                        sensitivity: "base",
+                        numeric: true
+                    });
+                    return comparison * (sortConfig.direction === "asc" ? 1 : -1);
+                }
+                // Handle numbers and other types
                 return (aVal < bVal ? -1 : aVal > bVal ? 1 : 0) * (sortConfig.direction === "asc" ? 1 : -1);
             });
         }
         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 [];
@@ -1684,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) {
@@ -1697,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)));
         });
@@ -1714,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);
@@ -1728,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$d = {"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)
@@ -1778,7 +1782,7 @@ function CwTabs(CwTabsProps) {
     const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
         ? { minWidth: CwTabsProps.tabsListWidth }
         : undefined;
-    return (jsxs("div", { id: CwTabsProps.id, className: styles$d['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$d['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 })] }));
 }
 
 /**
@@ -1818,15 +1822,15 @@ const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detail
  *   emptyValue="N/A"
  * />
  */
-const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "row" }) => {
-    return (jsx("dl", { className: `cw-keyvalue-list ${className}`, children: items.map(item => (jsxs("div", { className: `cw-keyvalue-list-item cw-flex-${direction}`, children: [jsx("dt", { children: item.label }), jsx("dd", { children: item.value !== undefined && item.value !== null && item.value !== ""
+const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "row", ...htmlProps }) => {
+    return (jsx("dl", { className: `cw-keyvalue-list ${className}`, ...htmlProps, children: items.map(item => (jsxs("div", { className: `cw-keyvalue-list-item cw-flex-${direction}`, children: [jsx("dt", { children: item.label }), jsx("dd", { children: item.value !== undefined && item.value !== null && item.value !== ""
                         ? (React__default.isValidElement(item.value)
                             ? item.value
                             : `${item.value}${item.suffix ? ` ${item.suffix}` : ''}`)
                         : emptyValue })] }, item.key))) }));
 };
 
-var styles$c = {"sortableList":"cw-sortable-list-module_sortableList__PyLO-","sortableItem":"cw-sortable-list-module_sortableItem__FAnn2","readOnly":"cw-sortable-list-module_readOnly__r7GcH","dragging":"cw-sortable-list-module_dragging__MD715","moved":"cw-sortable-list-module_moved__sE6-N","expandedContent":"cw-sortable-list-module_expandedContent__Kocna","sortableHandle":"cw-sortable-list-module_sortableHandle__HvYBK","sortableContent":"cw-sortable-list-module_sortableContent__C6JhR","sortableTitle":"cw-sortable-list-module_sortableTitle__EgWXr","sortableExtraContent":"cw-sortable-list-module_sortableExtraContent__s4LSv","sortableActions":"cw-sortable-list-module_sortableActions__gwQOU","dropIndicator":"cw-sortable-list-module_dropIndicator__MNSF-","emptyMessage":"cw-sortable-list-module_emptyMessage__gMpaL"};
+var styles$d = {"sortableList":"cw-sortable-list-module_sortableList__PyLO-","sortableItem":"cw-sortable-list-module_sortableItem__FAnn2","readOnly":"cw-sortable-list-module_readOnly__r7GcH","dragging":"cw-sortable-list-module_dragging__MD715","moved":"cw-sortable-list-module_moved__sE6-N","expandedContent":"cw-sortable-list-module_expandedContent__Kocna","sortableHandle":"cw-sortable-list-module_sortableHandle__HvYBK","sortableContent":"cw-sortable-list-module_sortableContent__C6JhR","sortableTitle":"cw-sortable-list-module_sortableTitle__EgWXr","sortableExtraContent":"cw-sortable-list-module_sortableExtraContent__s4LSv","sortableActions":"cw-sortable-list-module_sortableActions__gwQOU","dropIndicator":"cw-sortable-list-module_dropIndicator__MNSF-","emptyMessage":"cw-sortable-list-module_emptyMessage__gMpaL"};
 
 function CwSortableList({ items, onReorder, renderItem, className = '', movedItems = new Set(), emptyMessage = "No elements to show", readOnly = false, }) {
     const [draggedItem, setDraggedItem] = useState(null);
@@ -1889,15 +1893,15 @@ function CwSortableList({ items, onReorder, renderItem, className = '', movedIte
         }
     };
     if (items.length === 0) {
-        return (jsx("div", { className: `${styles$c.sortableList} ${styles$c.emptyState} ${className}`, children: jsx("div", { className: styles$c.emptyMessage, children: emptyMessage }) }));
+        return (jsx("div", { className: `${styles$d.sortableList} ${styles$d.emptyState} ${className}`, children: jsx("div", { className: styles$d.emptyMessage, children: emptyMessage }) }));
     }
-    return (jsx("div", { className: `${styles$c.sortableList} ${className}`, children: items.map((item, index) => {
+    return (jsx("div", { className: `${styles$d.sortableList} ${className}`, children: items.map((item, index) => {
             const { title, extraContent, actions, showHandle = true, expandedContent } = renderItem(item);
             const isDragging = draggedItem?.id === item.id;
             const isMoved = movedItems.has(item.id);
             const canExpand = Boolean(expandedContent);
             const isExpanded = expandedItems.has(item.id);
-            return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && jsx("div", { className: styles$c.dropIndicator }), jsxs("div", { className: `${styles$c.sortableItem} ${isDragging ? styles$c.dragging : ''} ${isMoved ? styles$c.moved : ''} ${readOnly ? styles$c.readOnly : ''}`, draggable: !readOnly, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [jsxs("header", { children: [canExpand ? (jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsx("div", { className: styles$c.sortableHandle, children: jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxs("div", { className: styles$c.sortableContent, children: [jsx("div", { className: styles$c.sortableTitle, children: title }), extraContent && jsx("div", { className: styles$c.sortableExtraContent, children: extraContent })] }), jsx("div", { className: styles$c.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsx("div", { className: styles$c.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsx("div", { className: styles$c.dropIndicator }))] }, item.id));
+            return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && jsx("div", { className: styles$d.dropIndicator }), jsxs("div", { className: `${styles$d.sortableItem} ${isDragging ? styles$d.dragging : ''} ${isMoved ? styles$d.moved : ''} ${readOnly ? styles$d.readOnly : ''}`, draggable: !readOnly, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [jsxs("header", { children: [canExpand ? (jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsx("div", { className: styles$d.sortableHandle, children: jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxs("div", { className: styles$d.sortableContent, children: [jsx("div", { className: styles$d.sortableTitle, children: title }), extraContent && jsx("div", { className: styles$d.sortableExtraContent, children: extraContent })] }), jsx("div", { className: styles$d.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsx("div", { className: styles$d.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsx("div", { className: styles$d.dropIndicator }))] }, item.id));
         }) }));
 }
 
@@ -2074,11 +2078,15 @@ function CwFileUpload(fileUploadProps) {
     return (jsxs("div", { children: [jsxs("div", { className: "row", children: [jsx("input", { className: "cw-button", type: "file", accept: fileUploadProps.accept, readOnly: true, placeholder: "No file selected...", onChange: handleFileChange }), previewURL && (jsx("div", { className: "row", children: jsx("img", { src: previewURL, alt: "Preview", style: { maxWidth: "200px", maxHeight: "200px" } }) }))] }), error && jsx("div", { className: "row error", children: error }), jsx("div", { className: "row", children: jsxs("label", { children: ["Please note: File/image has to be in ", fileUploadProps.acceptString, " format", fileUploadProps.sizeString && `, ${fileUploadProps.sizeString}`] }) })] }));
 }
 
-var styles$b = {"fileUploadContainer":"cw-file-upload-multiple-module_fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module_hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module_uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module_uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module_uploadTitle__gjRk8","uploadSubtitle":"cw-file-upload-multiple-module_uploadSubtitle__Z0S5t","filesContainer":"cw-file-upload-multiple-module_filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module_fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module_fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module_fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module_fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module_fileName__DjepK","fileSize":"cw-file-upload-multiple-module_fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module_smallButton__siUAh"};
+var styles$c = {"fileUploadContainer":"cw-file-upload-multiple-module_fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module_hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module_uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module_uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module_uploadTitle__gjRk8","uploadSubtitle":"cw-file-upload-multiple-module_uploadSubtitle__Z0S5t","filesContainer":"cw-file-upload-multiple-module_filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module_fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module_fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module_fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module_fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module_fileName__DjepK","fileSize":"cw-file-upload-multiple-module_fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module_smallButton__siUAh"};
 
 function CwFileUploadMultiple(fileUploadProps) {
     const fileInputRef = useRef(null);
     const [selectedFiles, setSelectedFiles] = useState([]);
+    const [existingFile, setExistingFile] = useState(fileUploadProps.initialFileName);
+    React__default.useEffect(() => {
+        setExistingFile(fileUploadProps.initialFileName);
+    }, [fileUploadProps.initialFileName]);
     const getFileExtension = (filename) => {
         return filename.split('.').pop()?.toUpperCase() || '';
     };
@@ -2183,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);
@@ -2209,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);
@@ -2216,7 +2229,12 @@ function CwFileUploadMultiple(fileUploadProps) {
             }
         }
     };
-    return (jsxs("div", { className: `${styles$b.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$b.hiddenInput }), selectedFiles.length === 0 ? (jsxs("div", { className: `${styles$b.uploadArea} ${fileUploadProps.disabled ? styles$b.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsx(CwIcon, { iconId: "upload" }), jsx("p", { className: `${styles$b.uploadTitle}`, children: fileUploadProps.disabled ? 'Upload disabled' : 'Click to upload or drag and drop' }), jsxs("p", { className: `${styles$b.uploadSubtitle}`, children: [fileUploadProps.accept ? `Accepted files: ${fileUploadProps.accept}` : 'All file types accepted', !fileUploadProps.multiple && ' (Single file only)'] })] })) : (jsxs("div", { className: styles$b.filesContainer, children: [jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxs("small", { className: styles$b.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$b.fileItem, children: [jsxs("div", { className: styles$b.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$b.fileExtension, children: getFileExtension(file.name) })] }), jsxs("div", { className: styles$b.fileInfo, children: [jsx("p", { className: styles$b.fileName, children: file.name }), jsxs("p", { className: styles$b.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$b.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) {
@@ -2259,7 +2277,7 @@ function CwDigit(props) {
     return (jsx("div", { className: "cw-input-text", children: jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsx("input", { type: "number", ...inputProps }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
 }
 
-var styles$a = {"colorPreview":"cw-color-picker-module_colorPreview__ylJcD","hueBar":"cw-color-picker-module_hueBar__bFhyC","hueBarSlider":"cw-color-picker-module_hueBarSlider__D53IV","colorPickerInteractiveArea":"cw-color-picker-module_colorPickerInteractiveArea__KZFR1","colorArea":"cw-color-picker-module_colorArea__xgpSE","colorAreaOverlay":"cw-color-picker-module_colorAreaOverlay__pmgOc","hueBackground":"cw-color-picker-module_hueBackground__Mks78","whiteGradient":"cw-color-picker-module_whiteGradient__Bt-fU","blackGradient":"cw-color-picker-module_blackGradient__VnEKJ","colorAreaCursor":"cw-color-picker-module_colorAreaCursor__lotg3"};
+var styles$b = {"colorPreview":"cw-color-picker-module_colorPreview__ylJcD","hueBar":"cw-color-picker-module_hueBar__bFhyC","hueBarSlider":"cw-color-picker-module_hueBarSlider__D53IV","colorPickerInteractiveArea":"cw-color-picker-module_colorPickerInteractiveArea__KZFR1","colorArea":"cw-color-picker-module_colorArea__xgpSE","colorAreaOverlay":"cw-color-picker-module_colorAreaOverlay__pmgOc","hueBackground":"cw-color-picker-module_hueBackground__Mks78","whiteGradient":"cw-color-picker-module_whiteGradient__Bt-fU","blackGradient":"cw-color-picker-module_blackGradient__VnEKJ","colorAreaCursor":"cw-color-picker-module_colorAreaCursor__lotg3"};
 
 const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }) => {
     const [rgb, setRgb] = useState({ r: 255, g: 255, b: 255 });
@@ -2462,13 +2480,13 @@ const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }
     // Calculate background color for the main area based on current hue
     const hueColor = hsvToRgb(hsv.h, 100, 100);
     const hueHex = rgbToHex(hueColor.r, hueColor.g, hueColor.b);
-    return (jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsx("div", { className: styles$a.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxs("div", { children: [jsx("label", { children: "R:" }), jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "G:" }), jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "B:" }), jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxs("div", { className: styles$a.colorPickerInteractiveArea, children: [jsx("div", { className: styles$a.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsx("div", { className: styles$a.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxs("div", { className: styles$a.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxs("div", { className: styles$a.colorAreaOverlay, children: [jsx("div", { className: styles$a.hueBackground, style: { backgroundColor: hueHex } }), jsx("div", { className: styles$a.whiteGradient }), jsx("div", { className: styles$a.blackGradient })] }), jsx("div", { className: styles$a.colorAreaCursor, style: {
+    return (jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsx("div", { className: styles$b.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxs("div", { children: [jsx("label", { children: "R:" }), jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "G:" }), jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "B:" }), jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxs("div", { className: styles$b.colorPickerInteractiveArea, children: [jsx("div", { className: styles$b.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsx("div", { className: styles$b.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxs("div", { className: styles$b.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxs("div", { className: styles$b.colorAreaOverlay, children: [jsx("div", { className: styles$b.hueBackground, style: { backgroundColor: hueHex } }), jsx("div", { className: styles$b.whiteGradient }), jsx("div", { className: styles$b.blackGradient })] }), jsx("div", { className: styles$b.colorAreaCursor, style: {
                                     left: `${hsv.s}%`,
                                     top: `${100 - hsv.v}%`
                                 } })] })] })] }));
 };
 
-var styles$9 = {"selectColor":"cw-input-color-module_selectColor__DTo3V","disabled":"cw-input-color-module_disabled__O1fK5","colorDropdown":"cw-input-color-module_colorDropdown__pX2bc"};
+var styles$a = {"selectColor":"cw-input-color-module_selectColor__DTo3V","disabled":"cw-input-color-module_disabled__O1fK5","colorDropdown":"cw-input-color-module_colorDropdown__pX2bc"};
 
 const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, width = '4rem', height = '2rem' }) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -2601,11 +2619,11 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
                 break;
         }
     };
-    return (jsxs(Fragment, { children: [jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$9.selectColor} ${disabled ? styles$9.disabled : ''}`, style: {
+    return (jsxs(Fragment, { children: [jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$a.selectColor} ${disabled ? styles$a.disabled : ''}`, style: {
                     width,
                     height,
                     backgroundColor: value,
-                }, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && createPortal(jsx("div", { ref: dropdownRef, className: styles$9.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
+                }, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && createPortal(jsx("div", { ref: dropdownRef, className: styles$a.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
 };
 
 /**
@@ -2632,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 })] })] }) }));
 }
 
 /**
@@ -3098,7 +3116,7 @@ const CwImageArea = forwardRef((props, ref) => {
 });
 CwImageArea.displayName = "CwImageArea";
 
-var styles$8 = {"cw-weekday-selector":"cw-weekday-selector-module_cw-weekday-selector__Iz4GZ"};
+var styles$9 = {"cw-weekday-selector":"cw-weekday-selector-module_cw-weekday-selector__Iz4GZ"};
 
 /**
  * This class represents a week where days can be selected or unselected
@@ -3238,7 +3256,7 @@ const CwWeekdaySelector = ({ value = "", onChange, disabled = false }) => {
         setSelectedDays(newWeekdays);
         onChange?.(newWeekdays.toString());
     };
-    return (jsx("div", { className: styles$8["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
+    return (jsx("div", { className: styles$9["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
 };
 
 function CwCheckbox(CwCheckboxProps) {
@@ -3257,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 })] }) }));
 }
@@ -3305,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) {
@@ -3375,634 +3339,38 @@ 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) => {
-        result.add({
-            ID: `${category}_${index}`,
-            Name: item[nameKey] || index,
-            Value: item[valueKey] || index,
-            Category: category || "Missing Category",
-            PrimaryColor: primaryColor || { r: 0, g: 0, b: 0 },
-            OnPrimaryColor: onPrimaryColor || { r: 255, g: 255, b: 255 }
+function itemsToMultiFilterTags(items, nameKey, valueKey, category, primaryColor, onPrimaryColor) {
+    const result = new Set();
+    items.forEach((item, index) => {
+        result.add({
+            ID: `${category}_${index}`,
+            Name: item[nameKey] || index,
+            Value: item[valueKey] || index,
+            Category: category || "Missing Category",
+            PrimaryColor: primaryColor || { r: 0, g: 0, b: 0 },
+            OnPrimaryColor: onPrimaryColor || { r: 255, g: 255, b: 255 }
         });
     });
     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$7 = {"cw-multifilter-tag":"cw-multi-filter-tag-module_cw-multifilter-tag__Epda-"};
+var styles$8 = {"cw-multifilter-tag":"cw-multi-filter-tag-module_cw-multifilter-tag__Epda-"};
 
 const CwMultiFilterTag = props => {
-    const { ID, Name, Value, Category, Removable, PrimaryColor, 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$7["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$6 = {"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"};
+var styles$7 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-multi-filter-catalog-container__S3nsq","cw-multi-filter":"cw-multi-filter-module_cw-multi-filter__zipBK","cw-multi-filter-search":"cw-multi-filter-module_cw-multi-filter-search__eyHr0"};
 
 /**
  * A multiple filter selector, a MULTI-SELECT even. Allows users to select and filter items based on tags.
@@ -4017,7 +3385,7 @@ var styles$6 = {"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
  *
  * ```
  * ╭───────────────────────────────────────────────────────────────╮
@@ -4059,7 +3427,6 @@ var styles$6 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-m
  *       Value: "admin",
  *       Category: "Roles",
  *       ID: "Roles_admin",
- *       OnPrimaryColor: hexToRGB("#2050a8"),
  *       PrimaryColor: hexToRGB("#cedcff")
  *     },
  *     {
@@ -4067,7 +3434,6 @@ var styles$6 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-m
  *       Value: "user",
  *       Category: "Roles",
  *       ID: "Roles_user",
- *       OnPrimaryColor: hexToRGB("#2050a8"),
  *       PrimaryColor: hexToRGB("#cedcff")
  *     },
  *     {
@@ -4075,7 +3441,6 @@ var styles$6 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-m
  *       Value: "IT",
  *       Category: "Departments",
  *       ID: "Departments_IT",
- *       OnPrimaryColor: hexToRGB("#a82037"),
  *       PrimaryColor: hexToRGB("#ffceda")
  *     },
  *     {
@@ -4083,7 +3448,6 @@ var styles$6 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-m
  *       Value: "HR",
  *       Category: "Departments",
  *       ID: "Departments_HR",
- *       OnPrimaryColor: hexToRGB("#a82037"),
  *       PrimaryColor: hexToRGB("#ffceda")
  *     }
  *   ]);
@@ -4187,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 {
@@ -4248,9 +3613,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
             inputRef.current?.focus();
         }
     };
-    return (jsxs("form", { ref: componentRef, id: id, className: styles$6["cw-multi-filter"], style: style, onSubmit: (e) => {
+    return (jsxs("form", { ref: componentRef, id: id, className: styles$7["cw-multi-filter"], style: style, onSubmit: (e) => {
             e.preventDefault();
-        }, children: [jsxs("div", { onClick: handleDivClick, className: styles$6["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-primary)", outlineOffset: "-2px" } : {}, children: [jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.target.value), autoComplete: "off", placeholder: "Write to filter", onKeyDown: e => {
+        }, children: [jsxs("div", { onClick: handleDivClick, className: styles$7["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-primary)", outlineOffset: "-2px" } : {}, children: [jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.target.value), autoComplete: "off", placeholder: "Write to filter", onKeyDown: e => {
                                     switch (e.key) {
                                         case "Enter":
                                         case "Tab":
@@ -4271,7 +3636,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
                                 } })] }), selectedTags.size > 0 ? (jsx("input", { type: "reset", value: "\u00D7", onClick: e => {
                             e.preventDefault();
                             onChangeSelectedTags(new Set());
-                        } })) : null] }), jsxs("section", { className: styles$6["cw-multi-filter-catalog-container"], "data-display-none": !isPanelOpen, children: [jsxs("nav", { children: [jsx("button", { style: selectedCategory === "All"
+                        } })) : null] }), jsxs("section", { className: styles$7["cw-multi-filter-catalog-container"], "data-display-none": !isPanelOpen, children: [jsxs("nav", { children: [jsx("button", { style: selectedCategory === "All"
                                     ? {
                                         backgroundColor: "var(--cw-color-primary-container)",
                                         color: "var(--cw-color-primary)",
@@ -4298,7 +3663,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
                             } }, props.ID))) })] })] }));
 };
 
-var styles$5 = {"tree-container":"cw-tree-view-module_tree-container__NN-HJ","tree-wrapper":"cw-tree-view-module_tree-wrapper__keBZI","tree-item":"cw-tree-view-module_tree-item__prE9N","tree-node":"cw-tree-view-module_tree-node__wfro9","selected":"cw-tree-view-module_selected__XJQ0w","non-selectable":"cw-tree-view-module_non-selectable__YuPSx","tree-children":"cw-tree-view-module_tree-children__ji8CZ","empty-state":"cw-tree-view-module_empty-state__yvRjo","tree-label":"cw-tree-view-module_tree-label__ss3Nf","tree-spacer":"cw-tree-view-module_tree-spacer__E9Ud2"};
+var styles$6 = {"tree-container":"cw-tree-view-module_tree-container__NN-HJ","tree-wrapper":"cw-tree-view-module_tree-wrapper__keBZI","tree-item":"cw-tree-view-module_tree-item__prE9N","tree-node":"cw-tree-view-module_tree-node__wfro9","selected":"cw-tree-view-module_selected__XJQ0w","non-selectable":"cw-tree-view-module_non-selectable__YuPSx","tree-children":"cw-tree-view-module_tree-children__ji8CZ","empty-state":"cw-tree-view-module_empty-state__yvRjo","tree-label":"cw-tree-view-module_tree-label__ss3Nf","tree-spacer":"cw-tree-view-module_tree-spacer__E9Ud2"};
 
 function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId: initialSelectedId = null }) {
     const [expanded, setExpanded] = useState(new Set());
@@ -4365,10 +3730,10 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
         const isLeaf = !hasChildren;
         const isSelected = selectedId?.toString().toLowerCase() === node.id.toString().toLowerCase();
         const selectable = allowParentSelection || isLeaf;
-        return (jsxs("div", { className: styles$5["tree-item"], children: [jsxs("div", { className: [
-                        styles$5["tree-node"],
-                        isSelected && styles$5["selected"],
-                        !selectable && styles$5["non-selectable"]
+        return (jsxs("div", { className: styles$6["tree-item"], children: [jsxs("div", { className: [
+                        styles$6["tree-node"],
+                        isSelected && styles$6["selected"],
+                        !selectable && styles$6["non-selectable"]
                     ].filter(Boolean).join(' '), style: { paddingLeft: `${depth * 24 + 8}px` }, onClick: () => {
                         if (selectable) {
                             setSelectedId(node.id);
@@ -4377,7 +3742,7 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
                         else {
                             toggleExpand(node.id);
                         }
-                    }, children: [hasChildren && (jsx(CwIcon, { size: "large", iconId: isExpanded ? "chevron-down" : "chevron-right" })), jsx("div", { className: `${styles$5["tree-label"]} ${!hasChildren ? styles$5["tree-spacer"] : ''}`, children: node.label })] }), hasChildren && isExpanded && (jsx("div", { className: styles$5["tree-children"], children: node.children.map((child) => renderNode(child, depth + 1)) }))] }, node.id));
+                    }, children: [hasChildren && (jsx(CwIcon, { size: "large", iconId: isExpanded ? "chevron-down" : "chevron-right" })), jsx("div", { className: `${styles$6["tree-label"]} ${!hasChildren ? styles$6["tree-spacer"] : ''}`, children: node.label })] }), hasChildren && isExpanded && (jsx("div", { className: styles$6["tree-children"], children: node.children.map((child) => renderNode(child, depth + 1)) }))] }, node.id));
     };
     // Function to search for nodes that match the search term
     const searchInTree = (nodes, searchTerm) => {
@@ -4401,7 +3766,7 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
         return results;
     };
     const filteredData = searchInTree(data, search);
-    return (jsxs("div", { className: `cw-tree-view ${styles$5["tree-container"]}`, children: [jsxs("header", { children: [jsx("input", { type: "text", placeholder: "Search in tree...", value: search, onChange: (e) => setSearch(e.target.value) }), search && (jsx(CwButton, { onClick: () => setSearch(""), type: "button", icon: "close", variant: "icon", color: "neutral" }))] }), jsx("div", { className: styles$5["tree-wrapper"], children: filteredData.length > 0 ? (filteredData.map((node) => renderNode(node))) : (jsxs("div", { className: styles$5["empty-state"], children: [jsx(CwIcon, { iconId: "comment" }), search ? "No results found" : "There are no items"] })) })] }));
+    return (jsxs("div", { className: `cw-tree-view ${styles$6["tree-container"]}`, children: [jsxs("header", { children: [jsx("input", { type: "text", placeholder: "Search in tree...", value: search, onChange: (e) => setSearch(e.target.value) }), search && (jsx(CwButton, { onClick: () => setSearch(""), type: "button", icon: "close", variant: "icon", color: "neutral" }))] }), jsx("div", { className: styles$6["tree-wrapper"], children: filteredData.length > 0 ? (filteredData.map((node) => renderNode(node))) : (jsxs("div", { className: styles$6["empty-state"], children: [jsx(CwIcon, { iconId: "comment" }), search ? "No results found" : "There are no items"] })) })] }));
 }
 
 function CwSearchInput(optionsProps) {
@@ -4409,363 +3774,1810 @@ 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 {
+            setIsLoading(true);
+            const filtered = selectList.filter((option) => {
+                return Object.keys(option).some(key => {
+                    const value = option[key];
+                    return (typeof value === 'string' || typeof value === 'number') &&
+                        String(value).toLowerCase().includes(text.toLowerCase());
+                });
+            });
+            setFilteredOptions(filtered);
+            setIsLoading(false);
+        }
+    };
+    const handleInputFocus = () => {
+        setShowDropdown(true);
+        if (searchText === "") {
+            setFilteredOptions(selectList);
+        }
+    };
+    const handleInputBlur = () => {
+        setTimeout(() => {
+            setShowDropdown(false);
+        }, 150);
+    };
+    const handleOptionSelect = (option) => {
+        setSearchText(option.description);
+        setSelectedOption(option);
+        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';
+        }
+    };
+    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);
+    };
+    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.
+ * @author NVS
+ * @example
+ * <ContextMenu
+ *  options={['Option 1', 'Option 2', 'Option 3']}
+ *  onSelect={(option) => console.log(`Selected: ${option}`)}
+ * >
+ *   <div>Right-click me!</div>
+ * </ContextMenu>
+ */
+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);
+        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);
+            }
+        };
+        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);
+        };
+    }, [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)] }));
+};
+
+/**
+ * Save button wrapper
+ * @deprecated Use <CwButton variant="icon" icon="save" onClick={...} /> instead
+ */
+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 }));
+}
+/**
+ * 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 }));
+}
+/**
+ * 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"};
+
+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, 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(undefined);
+    // Parse date from string based on format
+    const parseDate = useCallback((dateString, formatStr) => {
+        try {
+            const cleanString = dateString.trim();
+            const parts = cleanString.split(/[\/\-\.]/);
+            if (parts.length !== 3)
+                return undefined;
+            let day;
+            let month;
+            let year;
+            const formatLower = formatStr.toLowerCase();
+            const dayIndex = formatLower.indexOf('dd');
+            const monthIndex = formatLower.indexOf('mm');
+            const yearIndex = formatLower.indexOf('yyyy') !== -1
+                ? formatLower.indexOf('yyyy')
+                : formatLower.indexOf('yy');
+            const positions = [
+                { type: 'day', index: dayIndex },
+                { type: 'month', index: monthIndex },
+                { type: 'year', index: yearIndex }
+            ].sort((a, b) => a.index - b.index);
+            positions.forEach((pos, idx) => {
+                const value = parseInt(parts[idx], 10);
+                if (pos.type === 'day')
+                    day = value;
+                else if (pos.type === 'month')
+                    month = value - 1;
+                else if (pos.type === 'year')
+                    year = value;
+            });
+            if (day === undefined || month === undefined || year === undefined)
+                return undefined;
+            if (isNaN(day) || isNaN(month) || isNaN(year))
+                return undefined;
+            if (year < 100) {
+                year = year < 50 ? 2000 + year : 1900 + year;
+            }
+            const parsed = new Date(year, month, day);
+            if (parsed.getDate() === day &&
+                parsed.getMonth() === month &&
+                parsed.getFullYear() === year) {
+                return parsed;
+            }
+            return undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }, []);
+    const normalizeDateForComparison = useCallback((date) => {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }, []);
+    // Validate and set date - shared logic
+    const validateAndSetDate = useCallback((dateString) => {
+        const parsed = parseDate(dateString, displayFormat);
+        if (parsed && !isNaN(parsed.getTime())) {
+            const normalizedParsed = normalizeDateForComparison(parsed);
+            const normalizedMin = minDate ? normalizeDateForComparison(minDate) : undefined;
+            const normalizedMax = maxDate ? normalizeDateForComparison(maxDate) : undefined;
+            const isValid = (!normalizedMin || normalizedParsed >= normalizedMin) &&
+                (!normalizedMax || normalizedParsed <= normalizedMax);
+            if (isValid) {
+                onChange(parsed);
+                return true;
+            }
+        }
+        return false;
+    }, [parseDate, displayFormat, minDate, maxDate, onChange, normalizeDateForComparison]);
+    // Sync input value with prop value - only when changed externally
+    useEffect(() => {
+        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("");
+            }
+        }
+    }, [value, displayFormat]);
+    // Close calendar when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleDaySelect = useCallback((date) => {
+        onChange(date);
+        setIsOpen(false);
+        inputRef.current?.blur();
+    }, [onChange]);
+    const handleClear = useCallback((e) => {
+        e.stopPropagation();
+        onChange(undefined);
+        setInputValue("");
+    }, [onChange]);
+    const handleInputClick = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    }, [disabled]);
+    const handleInputChange = useCallback((e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (newValue.length >= 10) {
+            validateAndSetDate(newValue);
+        }
+        else if (newValue === "") {
+            onChange(undefined);
+        }
+    }, [validateAndSetDate, onChange]);
+    const handleInputBlur = useCallback(() => {
+        if (inputValue && inputValue.trim() !== "") {
+            const parsed = parseDate(inputValue, displayFormat);
+            if (parsed && !isNaN(parsed.getTime())) {
+                const normalizedParsed = normalizeDateForComparison(parsed);
+                const normalizedMin = minDate ? normalizeDateForComparison(minDate) : undefined;
+                const normalizedMax = maxDate ? normalizeDateForComparison(maxDate) : undefined;
+                const isValid = (!normalizedMin || normalizedParsed >= normalizedMin) &&
+                    (!normalizedMax || normalizedParsed <= normalizedMax);
+                if (isValid) {
+                    onChange(parsed);
+                    setInputValue(format(parsed, displayFormat, { locale: enGB }));
+                    return;
+                }
+            }
+        }
+        if (!value) {
+            setInputValue("");
+        }
+        else {
+            setInputValue(format(value, displayFormat, { locale: enGB }));
+        }
+    }, [inputValue, parseDate, displayFormat, minDate, maxDate, onChange, value, normalizeDateForComparison]);
+    const handleInputKeyDown = useCallback((e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            inputRef.current?.blur();
+            setIsOpen(false);
+        }
+        else if (e.key === "Escape") {
+            setIsOpen(false);
+            inputRef.current?.blur();
+        }
+    }, []);
+    const handleTodayClick = useCallback(() => {
+        const today = new Date();
+        const isTodayValid = (!minDate || today >= minDate) &&
+            (!maxDate || today <= maxDate);
+        if (isTodayValid) {
+            onChange(today);
+            setIsOpen(false);
+        }
+    }, [minDate, maxDate, onChange]);
+    // Memoize formatters
+    const formatters = useMemo(() => ({
+        formatCaption: (date) => format(date, "MMMM yyyy", { locale: enGB }),
+        formatWeekdayName: (date) => format(date, "EEEEEE", { locale: enGB })
+    }), []);
+    // Memoize disabled days
+    const disabledDays = useMemo(() => [
+        ...(disabledDates || []),
+        ...(minDate ? [{ before: minDate }] : []),
+        ...(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: defaultMonth || value || undefined, onSelect: handleDaySelect, disabled: disabledDays, locale: enGB, numberOfMonths: numberOfMonths, formatters: formatters, components: {
+                                        Caption: (props) => (jsx(CustomCaption$2, { ...props })),
+                                    }, modifiers: {
+                                        today: new Date(),
+                                    }, modifiersClassNames: {
+                                        today: "rdp-day_today",
+                                    } }), showTodayButton && (jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: "Today" }) }))] }))] })] }) }));
+}
+
+var rangeStyles = {"rangeWrapper":"cw-range-picker-module_rangeWrapper__1nIVs","rangePopup":"cw-range-picker-module_rangePopup__E5jd1","presetList":"cw-range-picker-module_presetList__INiLo"};
+
+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',
+        getValue: () => {
+            const today = new Date();
+            const past = new Date(today);
+            past.setDate(today.getDate() - 7);
+            return { from: past, to: today };
+        }
+    },
+    past14Days: {
+        key: 'past14Days',
+        label: 'Past 14 days',
+        getValue: () => {
+            const today = new Date();
+            const past = new Date(today);
+            past.setDate(today.getDate() - 14);
+            return { from: past, to: today };
+        }
+    },
+    past30Days: {
+        key: 'past30Days',
+        label: 'Past 30 days',
+        getValue: () => {
+            const today = new Date();
+            const past = new Date(today);
+            past.setDate(today.getDate() - 30);
+            return { from: past, to: today };
+        }
+    },
+    past90Days: {
+        key: 'past90Days',
+        label: 'Past 90 days',
+        getValue: () => {
+            const today = new Date();
+            const past = new Date(today);
+            past.setDate(today.getDate() - 90);
+            return { from: past, to: today };
+        }
+    },
+    // === NEXT DAYS ===
+    next7Days: {
+        key: 'next7Days',
+        label: 'Next 7 days',
+        getValue: () => {
+            const today = new Date();
+            const next = new Date(today);
+            next.setDate(today.getDate() + 7);
+            return { from: today, to: next };
+        }
+    },
+    next14Days: {
+        key: 'next14Days',
+        label: 'Next 14 days',
+        getValue: () => {
+            const today = new Date();
+            const next = new Date(today);
+            next.setDate(today.getDate() + 14);
+            return { from: today, to: next };
+        }
+    },
+    next30Days: {
+        key: 'next30Days',
+        label: 'Next 30 days',
+        getValue: () => {
+            const today = new Date();
+            const next = new Date(today);
+            next.setDate(today.getDate() + 30);
+            return { from: today, to: next };
+        }
+    },
+    // === WEEKS ===
+    thisWeek: {
+        key: 'thisWeek',
+        label: 'This week',
+        getValue: () => {
+            const today = new Date();
+            const firstDay = new Date(today);
+            const lastDay = new Date(today);
+            const day = today.getDay();
+            const diff = day === 0 ? -6 : 1 - day; // Monday as first day
+            firstDay.setDate(today.getDate() + diff);
+            lastDay.setDate(firstDay.getDate() + 6); // Sunday
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    lastWeek: {
+        key: 'lastWeek',
+        label: 'Last week',
+        getValue: () => {
+            const today = new Date();
+            const lastWeekEnd = new Date(today);
+            const day = today.getDay();
+            const diff = day === 0 ? -6 : 1 - day;
+            lastWeekEnd.setDate(today.getDate() + diff - 1);
+            const lastWeekStart = new Date(lastWeekEnd);
+            lastWeekStart.setDate(lastWeekEnd.getDate() - 6);
+            return { from: lastWeekStart, to: lastWeekEnd };
+        }
+    },
+    nextWeek: {
+        key: 'nextWeek',
+        label: 'Next week',
+        getValue: () => {
+            const today = new Date();
+            const nextWeekStart = new Date(today);
+            const day = today.getDay();
+            const diff = day === 0 ? 1 : 8 - day;
+            nextWeekStart.setDate(today.getDate() + diff);
+            const nextWeekEnd = new Date(nextWeekStart);
+            nextWeekEnd.setDate(nextWeekStart.getDate() + 6);
+            return { from: nextWeekStart, to: nextWeekEnd };
+        }
+    },
+    // === MONTHS ===
+    thisMonth: {
+        key: 'thisMonth',
+        label: 'This month',
+        getValue: () => {
+            const today = new Date();
+            const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
+            const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    lastMonth: {
+        key: 'lastMonth',
+        label: 'Last month',
+        getValue: () => {
+            const today = new Date();
+            const firstDay = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+            const lastDay = new Date(today.getFullYear(), today.getMonth(), 0);
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    nextMonth: {
+        key: 'nextMonth',
+        label: 'Next month',
+        getValue: () => {
+            const today = new Date();
+            const firstDay = new Date(today.getFullYear(), today.getMonth() + 1, 1);
+            const lastDay = new Date(today.getFullYear(), today.getMonth() + 2, 0);
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    // === QUARTERS ===
+    thisQuarter: {
+        key: 'thisQuarter',
+        label: 'This quarter',
+        getValue: () => {
+            const today = new Date();
+            const quarter = Math.floor(today.getMonth() / 3);
+            const firstDay = new Date(today.getFullYear(), quarter * 3, 1);
+            const lastDay = new Date(today.getFullYear(), quarter * 3 + 3, 0);
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    lastQuarter: {
+        key: 'lastQuarter',
+        label: 'Last quarter',
+        getValue: () => {
+            const today = new Date();
+            const currentQuarter = Math.floor(today.getMonth() / 3);
+            const lastQuarter = currentQuarter === 0 ? 3 : currentQuarter - 1;
+            const year = currentQuarter === 0 ? today.getFullYear() - 1 : today.getFullYear();
+            const firstDay = new Date(year, lastQuarter * 3, 1);
+            const lastDay = new Date(year, lastQuarter * 3 + 3, 0);
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    nextQuarter: {
+        key: 'nextQuarter',
+        label: 'Next quarter',
+        getValue: () => {
+            const today = new Date();
+            const currentQuarter = Math.floor(today.getMonth() / 3);
+            const nextQuarter = (currentQuarter + 1) % 4;
+            const year = nextQuarter === 0 ? today.getFullYear() + 1 : today.getFullYear();
+            const firstDay = new Date(year, nextQuarter * 3, 1);
+            const lastDay = new Date(year, nextQuarter * 3 + 3, 0);
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    // === YEAR ===
+    thisYear: {
+        key: 'thisYear',
+        label: 'This year',
+        getValue: () => {
+            const today = new Date();
+            const firstDay = new Date(today.getFullYear(), 0, 1);
+            const lastDay = new Date(today.getFullYear(), 11, 31);
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    lastYear: {
+        key: 'lastYear',
+        label: 'Last year',
+        getValue: () => {
+            const today = new Date();
+            const firstDay = new Date(today.getFullYear() - 1, 0, 1);
+            const lastDay = new Date(today.getFullYear() - 1, 11, 31);
+            return { from: firstDay, to: lastDay };
+        }
+    }
+};
+/**
+ * Helper function to get presets by their keys
+ * @param keys - Array of preset keys from PRESET_LIBRARY
+ * @returns Array of DateRangePreset objects
+ *
+ * @example
+ * const presets = getPresetsByKeys(['thisWeek', 'past7Days', 'past30Days']);
+ */
+const getPresetsByKeys = (keys) => {
+    return keys
+        .map(key => PRESET_LIBRARY[key])
+        .filter(preset => preset !== undefined);
+};
+
+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, 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("");
+    const [focusedInput, setFocusedInput] = useState();
+    const containerRef = useRef(null);
+    const inputFromRef = useRef(null);
+    const inputToRef = useRef(null);
+    const prevValueRef = useRef(undefined);
+    // Calculate presets to render
+    const presetsToRender = useMemo(() => {
+        let presets = [];
+        // If presetKeys provided, use those from library
+        if (presetKeys && presetKeys.length > 0) {
+            presets = getPresetsByKeys(presetKeys);
+        }
+        // Add custom presets if provided
+        if (customPresets && customPresets.length > 0) {
+            presets = [...presets, ...customPresets];
+        }
+        return presets;
+    }, [presetKeys, customPresets]);
+    // Parse date from string based on format
+    const parseDate = useCallback((dateString, formatStr) => {
+        try {
+            const cleanString = dateString.trim();
+            const parts = cleanString.split(/[\/\-\.]/);
+            if (parts.length !== 3)
+                return undefined;
+            let day;
+            let month;
+            let year;
+            const formatLower = formatStr.toLowerCase();
+            const dayIndex = formatLower.indexOf('dd');
+            const monthIndex = formatLower.indexOf('mm');
+            const yearIndex = formatLower.indexOf('yyyy') !== -1
+                ? formatLower.indexOf('yyyy')
+                : formatLower.indexOf('yy');
+            const positions = [
+                { type: 'day', index: dayIndex },
+                { type: 'month', index: monthIndex },
+                { type: 'year', index: yearIndex }
+            ].sort((a, b) => a.index - b.index);
+            positions.forEach((pos, idx) => {
+                const value = parseInt(parts[idx], 10);
+                if (pos.type === 'day')
+                    day = value;
+                else if (pos.type === 'month')
+                    month = value - 1;
+                else if (pos.type === 'year')
+                    year = value;
+            });
+            if (day === undefined || month === undefined || year === undefined)
+                return undefined;
+            if (isNaN(day) || isNaN(month) || isNaN(year))
+                return undefined;
+            if (year < 100) {
+                year = year < 50 ? 2000 + year : 1900 + year;
+            }
+            const parsed = new Date(year, month, day);
+            if (parsed.getDate() === day &&
+                parsed.getMonth() === month &&
+                parsed.getFullYear() === year) {
+                return parsed;
+            }
+            return undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }, []);
+    const normalizeDateForComparison = useCallback((date) => {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }, []);
+    // Validate date range
+    const validateRange = useCallback((from, to) => {
+        if (!from || !to)
+            return true; // Partial ranges are OK during selection
+        // Check if "from" is before "to"
+        if (from > to)
+            return false;
+        // Check max range days
+        if (maxRangeDays) {
+            const daysDiff = Math.floor((to.getTime() - from.getTime()) / (1000 * 60 * 60 * 24));
+            if (daysDiff > maxRangeDays)
+                return false;
+        }
+        return true;
+    }, [maxRangeDays]);
+    // Sync input values with prop value
+    useEffect(() => {
+        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("");
+            }
+            // Update "to" input
+            if (value?.to) {
+                setInputToValue(format(value.to, displayFormat, { locale: enGB }));
+            }
+            else {
+                setInputToValue("");
+            }
+        }
+    }, [value, displayFormat]);
+    // Close calendar when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setFocusedInput(undefined);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleRangeSelect = useCallback((range, // El rango sugerido por react-day-picker
+    selectedDay) => {
+        let newRange;
+        if (focusedInput === 'from') {
+            newRange = { from: selectedDay, to: value?.to };
+            if (newRange.to && selectedDay > newRange.to) {
+                newRange.to = undefined;
+                setFocusedInput('to');
+            }
+            else if (newRange.to) {
+                setIsOpen(false);
+                setFocusedInput(undefined);
+            }
+            else {
+                setFocusedInput('to');
+            }
+        }
+        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;
+        }
+        onChange(newRange);
+    }, [onChange, validateRange, value, focusedInput]);
+    const handleClearFrom = useCallback((e) => {
+        e.stopPropagation();
+        onChange({ from: undefined, to: value?.to });
+        setInputFromValue("");
+    }, [onChange, value]);
+    const handleClearTo = useCallback((e) => {
+        e.stopPropagation();
+        onChange({ from: value?.from, to: undefined });
+        setInputToValue("");
+    }, [onChange, value]);
+    const handleInputFromClick = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+            setFocusedInput('from');
+        }
+    }, [disabled]);
+    const handleInputToClick = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+            setFocusedInput('to');
+        }
+    }, [disabled]);
+    const handleInputFromChange = useCallback((e) => {
+        const newValue = e.target.value;
+        setInputFromValue(newValue);
+        if (newValue.length >= 10) {
+            const parsed = parseDate(newValue, displayFormat);
+            if (parsed && !isNaN(parsed.getTime())) {
+                const normalizedParsed = normalizeDateForComparison(parsed);
+                const normalizedMin = minDate ? normalizeDateForComparison(minDate) : undefined;
+                const normalizedMax = maxDate ? normalizeDateForComparison(maxDate) : undefined;
+                const isValid = (!normalizedMin || normalizedParsed >= normalizedMin) &&
+                    (!normalizedMax || normalizedParsed <= normalizedMax);
+                if (isValid) {
+                    onChange({ from: parsed, to: value?.to });
+                }
+            }
+        }
+        else if (newValue === "") {
+            onChange({ from: undefined, to: value?.to });
+        }
+    }, [parseDate, displayFormat, minDate, maxDate, normalizeDateForComparison, onChange, value]);
+    const handleInputToChange = useCallback((e) => {
+        const newValue = e.target.value;
+        setInputToValue(newValue);
+        if (newValue.length >= 10) {
+            const parsed = parseDate(newValue, displayFormat);
+            if (parsed && !isNaN(parsed.getTime())) {
+                const normalizedParsed = normalizeDateForComparison(parsed);
+                const normalizedMin = minDate ? normalizeDateForComparison(minDate) : undefined;
+                const normalizedMax = maxDate ? normalizeDateForComparison(maxDate) : undefined;
+                const isValid = (!normalizedMin || normalizedParsed >= normalizedMin) &&
+                    (!normalizedMax || normalizedParsed <= normalizedMax);
+                if (isValid && validateRange(value?.from, parsed)) {
+                    onChange({ from: value?.from, to: parsed });
+                }
+            }
+        }
+        else if (newValue === "") {
+            onChange({ from: value?.from, to: undefined });
+        }
+    }, [parseDate, displayFormat, minDate, maxDate, normalizeDateForComparison, validateRange, onChange, value]);
+    const handleInputBlur = useCallback((type) => {
+        const inputValue = type === 'from' ? inputFromValue : inputToValue;
+        const currentValue = type === 'from' ? value?.from : value?.to;
+        if (inputValue && inputValue.trim() !== "") {
+            const parsed = parseDate(inputValue, displayFormat);
+            if (parsed && !isNaN(parsed.getTime())) {
+                const normalizedParsed = normalizeDateForComparison(parsed);
+                const normalizedMin = minDate ? normalizeDateForComparison(minDate) : undefined;
+                const normalizedMax = maxDate ? normalizeDateForComparison(maxDate) : undefined;
+                const isValid = (!normalizedMin || normalizedParsed >= normalizedMin) &&
+                    (!normalizedMax || normalizedParsed <= normalizedMax);
+                if (isValid) {
+                    const newRange = type === 'from'
+                        ? { from: parsed, to: value?.to }
+                        : { from: value?.from, to: parsed };
+                    if (validateRange(newRange.from, newRange.to)) {
+                        onChange(newRange);
+                        if (type === 'from') {
+                            setInputFromValue(format(parsed, displayFormat, { locale: enGB }));
+                        }
+                        else {
+                            setInputToValue(format(parsed, displayFormat, { locale: enGB }));
+                        }
+                        return;
+                    }
+                }
+            }
+        }
+        // Reset to current value if invalid
+        if (type === 'from') {
+            setInputFromValue(currentValue ? format(currentValue, displayFormat, { locale: enGB }) : "");
+        }
+        else {
+            setInputToValue(currentValue ? format(currentValue, displayFormat, { locale: enGB }) : "");
+        }
+    }, [inputFromValue, inputToValue, value, parseDate, displayFormat, minDate, maxDate, normalizeDateForComparison, validateRange, onChange]);
+    const handleInputKeyDown = useCallback((e, type) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            if (type === 'from') {
+                inputFromRef.current?.blur();
+                inputToRef.current?.focus();
+            }
+            else {
+                inputToRef.current?.blur();
+                setIsOpen(false);
+            }
+        }
+        else if (e.key === "Escape") {
+            setIsOpen(false);
+            if (type === 'from') {
+                inputFromRef.current?.blur();
+            }
+            else {
+                inputToRef.current?.blur();
+            }
+        }
+    }, []);
+    // Handle preset click
+    const handlePresetClick = useCallback((preset, e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onChange(preset.getValue());
+        setIsOpen(false);
+    }, [onChange]);
+    // Memoize formatters
+    const formatters = useMemo(() => ({
+        formatCaption: (date) => format(date, "MMMM yyyy", { locale: enGB }),
+        formatWeekdayName: (date) => format(date, "EEEEEE", { locale: enGB })
+    }), []);
+    // Memoize disabled days
+    const disabledDays = useMemo(() => {
+        const baseDisabled = [
+            ...(disabledDates || []),
+            ...(minDate ? [{ before: minDate }] : []),
+            ...(maxDate ? [{ after: maxDate }] : []),
+            ...(disabledMatcher ? [disabledMatcher] : []),
+        ];
+        // If maxRangeDays is set and we have a "from" date, disable dates beyond the range
+        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]);
+    const selectedRange = useMemo(() => {
+        if (value?.from || value?.to) {
+            return {
+                from: value?.from || undefined,
+                to: value?.to || undefined
+            };
+        }
+        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: (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(),
+                                    }, modifiersClassNames: {
+                                        today: "rdp-day_today",
+                                    } })] }))] })] }) }));
+}
+
+var timeStyles = {"timePickerPopup":"cw-time-picker-module_timePickerPopup__BN63t","timePickerList":"cw-time-picker-module_timePickerList__E88pr","selected":"cw-time-picker-module_selected__qVnfL","hasIcons":"cw-time-picker-module_hasIcons__ZiGUf","notIcons":"cw-time-picker-module_notIcons__3icu1"};
+
+const isMobileDevice = () => {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+};
+function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelProps, alignProps, placeholder = "HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", useNative = isMobileDevice(), }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [inputValue, setInputValue] = useState("");
+    const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    const selectedItemRef = useRef(null);
+    // Sync input value with prop value
+    useEffect(() => {
+        if (value) {
+            setInputValue(value);
+        }
+        else {
+            setInputValue("");
+        }
+    }, [value]);
+    // Generate time options based on interval
+    const generateTimeOptions = () => {
+        const options = [];
+        const totalMinutes = 24 * 60; // Total minutes in a day
+        for (let minutes = 0; minutes < totalMinutes; minutes += interval) {
+            const hours = Math.floor(minutes / 60);
+            const mins = minutes % 60;
+            const timeString = `${hours.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}`;
+            // Filter by min/max time if provided
+            if (minTime && timeString < minTime)
+                continue;
+            if (maxTime && timeString > maxTime)
+                continue;
+            options.push(timeString);
+        }
+        return options;
+    };
+    const timeOptions = generateTimeOptions();
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    // Scroll to selected time when opening dropdown
+    useEffect(() => {
+        if (isOpen && selectedItemRef.current) {
+            selectedItemRef.current.scrollIntoView({
+                block: "center",
+                behavior: "smooth",
+            });
+        }
+    }, [isOpen]);
+    const handleTimeSelect = (time) => {
+        onChange(time);
+        setInputValue(time);
+        setIsOpen(false);
+        inputRef.current?.blur();
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        onChange(undefined);
+        setInputValue("");
+    };
+    const handleInputClick = () => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    };
+    const handleInputChange = (e) => {
+        let newValue = e.target.value;
+        setInputValue(newValue);
+        // Auto-format as user types
+        // Remove non-numeric characters except colon
+        newValue = newValue.replace(/[^\d:]/g, "");
+        // Auto-add colon after 2 digits
+        if (newValue.length === 2 && !newValue.includes(":")) {
+            newValue = newValue + ":";
+            setInputValue(newValue);
+        }
+        // Limit to HH:mm format
+        if (newValue.length > 5) {
+            newValue = newValue.slice(0, 5);
+            setInputValue(newValue);
+        }
+        // Validate and set time when complete
+        if (newValue.length === 5 && newValue.includes(":")) {
+            const [hours, minutes] = newValue.split(":");
+            const h = parseInt(hours, 10);
+            const m = parseInt(minutes, 10);
+            if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
+                const formattedTime = `${hours.padStart(2, "0")}:${minutes.padStart(2, "0")}`;
+                // Check min/max time restrictions
+                const isValid = (!minTime || formattedTime >= minTime) &&
+                    (!maxTime || formattedTime <= maxTime);
+                if (isValid) {
+                    onChange(formattedTime);
+                    setInputValue(formattedTime);
+                }
+            }
+        }
+        else if (newValue === "") {
+            onChange(undefined);
+        }
+    };
+    const handleInputBlur = () => {
+        // On blur, sync input with actual value or clear if invalid
+        if (value) {
+            setInputValue(value);
+        }
+        else if (inputValue && inputValue.length === 5) {
+            // Try to validate one more time
+            const [hours, minutes] = inputValue.split(":");
+            const h = parseInt(hours, 10);
+            const m = parseInt(minutes, 10);
+            if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
+                const formattedTime = `${hours.padStart(2, "0")}:${minutes.padStart(2, "0")}`;
+                onChange(formattedTime);
+                setInputValue(formattedTime);
+            }
+            else {
+                setInputValue("");
+            }
+        }
+        else {
+            setInputValue("");
+        }
+    };
+    const handleInputKeyDown = (e) => {
+        if (e.key === "Enter") {
+            setIsOpen(!isOpen);
+        }
+        else if (e.key === "Escape") {
+            setIsOpen(false);
+        }
+        else if (e.key === "ArrowDown" && isOpen && timeOptions.length > 0) {
+            e.preventDefault();
+            // Focus first option in dropdown
+            const firstOption = document.querySelector(".cw-timepicker-option");
+            firstOption?.focus();
+        }
+    };
+    const handleNativeChange = (e) => {
+        const newValue = e.target.value;
+        onChange(newValue);
+        setInputValue(newValue);
+    };
+    // Format time for display (optional: could add 12h format here)
+    const displayValue = inputValue;
+    // If using native time input
+    if (useNative) {
+        return (jsx("div", { className: `cw-timepicker cw-timepicker-native ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsx("div", { className: styles$4.pickerWrapper, children: jsx("input", { type: "time", value: displayValue, onChange: handleNativeChange, min: minTime, max: maxTime, step: interval * 60, disabled: disabled, required: required, placeholder: placeholder, className: "cw-timepicker-native" }) })] }) }));
+    }
+    // Custom time picker
+    return (jsx("div", { ref: containerRef, className: `cw-timepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required, maxLength: 5, className: showClear ? timeStyles.hasIcons : timeStyles.notIcons }), showClear && (jsx("div", { className: styles$4.pickerIcons, children: value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", icon: "close", color: "neutral", onClick: handleClear, tabIndex: -1, "aria-label": "Clear time" })) : (jsx(CwIcon, { iconId: "clock" })) })), isOpen && (jsx("div", { className: `${styles$4.pickerPopup} ${timeStyles.timePickerPopup}`, "data-position": popupPosition, children: jsx("div", { className: timeStyles.timePickerList, children: timeOptions.map((time) => {
+                                    const isSelected = time === value;
+                                    return (jsx("button", { ref: isSelected ? selectedItemRef : null, type: "button", className: isSelected ? timeStyles.selected : "", onClick: () => handleTimeSelect(time), children: time }, time));
+                                }) }) }))] })] }) }));
+}
+
+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);
+    // 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;
+        // If no time is selected, use 00:00
+        if (!time) {
+            const combined = new Date(date);
+            combined.setHours(0, 0, 0, 0);
+            // Validate against min/max datetime
+            if (normalizedMinDateTime && combined < normalizedMinDateTime)
+                return undefined;
+            if (normalizedMaxDateTime && combined > normalizedMaxDateTime)
+                return undefined;
+            return combined;
+        }
+        // Parse time and combine with date
+        const [hours, minutes] = time.split(':').map(Number);
+        const combined = new Date(date);
+        combined.setHours(hours, minutes, 0, 0);
+        // Validate against min/max datetime
+        if (normalizedMinDateTime && combined < normalizedMinDateTime)
+            return undefined;
+        if (normalizedMaxDateTime && combined > normalizedMaxDateTime)
+            return undefined;
+        return combined;
+    }, [normalizedMinDateTime, normalizedMaxDateTime]);
+    /**
+     * 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 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);
+                setSelectedTime(undefined);
+            }
+        }
+    }, [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);
+        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);
+        // 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 = (!normalizedMinDateTime || now >= normalizedMinDateTime) &&
+            (!normalizedMaxDateTime || now <= normalizedMaxDateTime);
+        if (isNowValid) {
+            onChange(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"};
+
+function CustomCaption({ 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 CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval = 15, minTime, maxTime, labelProps, alignProps, placeholder = "dd.mm.yyyy HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [inputValue, setInputValue] = useState("");
+    const [selectedDate, setSelectedDate] = useState(value);
+    const [selectedTime, setSelectedTime] = useState("");
+    const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    const timeListRef = useRef(null);
+    const prevValueRef = useRef(value);
+    // Generate time options based on interval - memoized
+    const timeOptions = useMemo(() => {
+        const options = [];
+        const totalMinutes = 24 * 60;
+        for (let minutes = 0; minutes < totalMinutes; minutes += timeInterval) {
+            const hours = Math.floor(minutes / 60);
+            const mins = minutes % 60;
+            const timeString = `${hours.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}`;
+            if (minTime && timeString < minTime)
+                continue;
+            if (maxTime && timeString > maxTime)
+                continue;
+            options.push(timeString);
+        }
+        return options;
+    }, [timeInterval, minTime, maxTime]);
+    // Parse datetime from string: dd.MM.yyyy HH:mm
+    const parseDateTime = useCallback((dateTimeString) => {
+        try {
+            const parts = dateTimeString.trim().split(' ');
+            if (parts.length !== 2)
+                return undefined;
+            const [dateStr, timeStr] = parts;
+            // Parse date part
+            const dateParts = dateStr.split(/[\/\-\.]/);
+            if (dateParts.length !== 3)
+                return undefined;
+            const day = parseInt(dateParts[0], 10);
+            const month = parseInt(dateParts[1], 10) - 1;
+            const year = parseInt(dateParts[2], 10);
+            // Parse time part
+            const timeParts = timeStr.split(':');
+            if (timeParts.length !== 2)
+                return undefined;
+            const hours = parseInt(timeParts[0], 10);
+            const minutes = parseInt(timeParts[1], 10);
+            // Validate ranges
+            if (isNaN(day) || isNaN(month) || isNaN(year) ||
+                isNaN(hours) || isNaN(minutes) ||
+                hours < 0 || hours > 23 ||
+                minutes < 0 || minutes > 59) {
+                return undefined;
+            }
+            const parsed = new Date(year, month, day, hours, minutes, 0, 0);
+            // Validate the date is real
+            if (parsed.getDate() === day &&
+                parsed.getMonth() === month &&
+                parsed.getFullYear() === year &&
+                parsed.getHours() === hours &&
+                parsed.getMinutes() === minutes) {
+                return parsed;
             }
+            return undefined;
         }
-        else {
-            // Filter options based on search text in any text property
-            const filtered = optionsProps.selectList.filter((option) => {
-                // Search all properties of the object
-                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);
+        catch {
+            return undefined;
         }
-    };
-    const handleInputFocus = () => {
-        setShowDropdown(true);
-        if (searchText === "") {
-            setFilteredOptions(optionsProps.selectList);
+    }, []);
+    // Validate and set datetime - with proper datetime comparison
+    const validateAndSetDateTime = useCallback((dateTimeString) => {
+        const parsed = parseDateTime(dateTimeString);
+        if (parsed && !isNaN(parsed.getTime())) {
+            const isValid = (!minDateTime || parsed >= minDateTime) &&
+                (!maxDateTime || parsed <= maxDateTime);
+            if (isValid) {
+                onChange(parsed);
+                setSelectedDate(parsed);
+                setSelectedTime(format(parsed, "HH:mm"));
+                return true;
+            }
         }
-    };
-    const handleInputBlur = () => {
-        setTimeout(() => {
-            setShowDropdown(false);
-        }, 150);
-    };
-    const handleOptionSelect = (option) => {
-        setSearchText(option.description);
-        setSelectedOption(option);
-        if (optionsProps.handleChange) {
-            optionsProps.handleChange(option.id);
+        return false;
+    }, [parseDateTime, minDateTime, maxDateTime, onChange]);
+    // Sync input value with prop value - only when changed externally
+    useEffect(() => {
+        const currentValue = value;
+        if (currentValue !== prevValueRef.current) {
+            prevValueRef.current = currentValue;
+            if (currentValue) {
+                const dateStr = format(currentValue, "dd.MM.yyyy", { locale: enGB });
+                const timeStr = format(currentValue, "HH:mm", { locale: enGB });
+                setInputValue(`${dateStr} ${timeStr}`);
+                setSelectedDate(currentValue);
+                setSelectedTime(timeStr);
+            }
+            else {
+                setInputValue("");
+                setSelectedDate(undefined);
+                setSelectedTime("");
+            }
         }
-        // Remove the filtered options when selecting one
-        setFilteredOptions([]);
-    };
-    const handleClearClick = () => {
-        setSearchText("");
-        setFilteredOptions([]);
-        setSelectedOption(null);
-    };
-    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$4 = {"context-menu":"cw-context-menu-module_context-menu__dbxnO","context-menu-item":"cw-context-menu-module_context-menu-item__B2W-Q"};
-
-/**
- * A context menu that is rendered when the user clicks on a button.
- * @author NVS
- * @example
- * <ContextMenu
- *  options={['Option 1', 'Option 2', 'Option 3']}
- *  onSelect={(option) => console.log(`Selected: ${option}`)}
- * >
- *   <div>Right-click me!</div>
- * </ContextMenu>
- */
-const CwContextMenu = ({ children, options, 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 handleOptionClick = (option) => {
-        onSelect(option);
-        setIsOpen(false);
-    };
+    }, [value]);
+    // Close popup when clicking outside
     useEffect(() => {
-        const handleOutsideClick = (event) => {
-            if (menuRef.current && !menuRef.current.contains(event.target)) {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
                 setIsOpen(false);
             }
         };
-        document.addEventListener("mousedown", handleOutsideClick);
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
         return () => {
-            document.removeEventListener("mousedown", handleOutsideClick);
+            document.removeEventListener("mousedown", handleClickOutside);
         };
+    }, [isOpen]);
+    // Scroll to selected time when opening
+    useEffect(() => {
+        if (isOpen && selectedTime && timeListRef.current) {
+            const selectedElement = timeListRef.current.querySelector('.selected');
+            if (selectedElement) {
+                selectedElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
+            }
+        }
+    }, [isOpen, selectedTime]);
+    const combineDateTime = useCallback((date, time) => {
+        if (!date || !time)
+            return undefined;
+        const [hours, minutes] = time.split(':').map(Number);
+        const combined = new Date(date);
+        combined.setHours(hours, minutes, 0, 0);
+        return combined;
     }, []);
-    return (jsxs("div", { onContextMenu: handleContextMenu, children: [children, isOpen && (jsx("div", { ref: menuRef, className: styles$4["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$4["context-menu-item"], children: option }, option))) }))] }));
-};
-
-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);
+    const handleDaySelect = useCallback((date) => {
+        if (!date)
+            return;
+        setSelectedDate(date);
+        // If time is already selected, combine and update
+        if (selectedTime) {
+            const combined = combineDateTime(date, selectedTime);
+            if (combined) {
+                onChange(combined);
+            }
+        }
+    }, [selectedTime, combineDateTime, onChange]);
+    const handleTimeSelect = useCallback((time) => {
+        setSelectedTime(time);
+        // If date is already selected, combine and update
+        if (selectedDate) {
+            const combined = combineDateTime(selectedDate, time);
+            if (combined) {
+                onChange(combined);
+                setIsOpen(false);
+                inputRef.current?.blur();
+            }
+        }
+    }, [selectedDate, combineDateTime, onChange]);
+    const handleClear = useCallback((e) => {
+        e.stopPropagation();
+        onChange(undefined);
+        setInputValue("");
+        setSelectedDate(undefined);
+        setSelectedTime("");
+    }, [onChange]);
+    const handleInputClick = useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    }, [disabled]);
+    const handleInputChange = useCallback((e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        // Try to parse the full datetime string: dd.MM.yyyy HH:mm
+        if (newValue.length >= 16) {
+            validateAndSetDateTime(newValue);
+        }
+        else if (newValue === "") {
+            onChange(undefined);
+            setSelectedDate(undefined);
+            setSelectedTime("");
+        }
+    }, [validateAndSetDateTime, onChange]);
+    const handleInputBlur = useCallback(() => {
+        // Try to parse if there's text
+        if (inputValue && inputValue.trim() !== "") {
+            const parsed = parseDateTime(inputValue);
+            if (parsed && !isNaN(parsed.getTime())) {
+                const isValid = (!minDateTime || parsed >= minDateTime) &&
+                    (!maxDateTime || parsed <= maxDateTime);
+                if (isValid) {
+                    onChange(parsed);
+                    const dateStr = format(parsed, "dd.MM.yyyy", { locale: enGB });
+                    const timeStr = format(parsed, "HH:mm", { locale: enGB });
+                    setInputValue(`${dateStr} ${timeStr}`);
+                    setSelectedDate(parsed);
+                    setSelectedTime(timeStr);
+                    return;
+                }
+            }
+        }
+        // Sync with current value
+        if (value) {
+            const dateStr = format(value, "dd.MM.yyyy", { locale: enGB });
+            const timeStr = format(value, "HH:mm", { locale: enGB });
+            setInputValue(`${dateStr} ${timeStr}`);
         }
+        else {
+            setInputValue("");
+        }
+    }, [inputValue, parseDateTime, minDateTime, maxDateTime, onChange, value]);
+    const handleInputKeyDown = useCallback((e) => {
         if (e.key === "Enter") {
-            // context menu dissapear
-            setVisibleContextMenu(false);
+            e.preventDefault();
+            inputRef.current?.blur();
+            setIsOpen(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
- */
-// 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 });
-}
-// 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 });
-}
-// 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 });
+        else if (e.key === "Escape") {
+            setIsOpen(false);
+            inputRef.current?.blur();
+        }
+    }, []);
+    const handleNowClick = useCallback(() => {
+        const now = new Date();
+        // Check if now is within allowed range
+        const isNowValid = (!minDateTime || now >= minDateTime) &&
+            (!maxDateTime || now <= maxDateTime);
+        if (isNowValid) {
+            onChange(now);
+            setIsOpen(false);
+        }
+    }, [minDateTime, maxDateTime, onChange]);
+    // Memoize formatters
+    const formatters = useMemo(() => ({
+        formatCaption: (date) => format(date, "MMMM yyyy", { locale: enGB }),
+        formatWeekdayName: (date) => format(date, "EEEEEE", { locale: enGB })
+    }), []);
+    // Memoize disabled days
+    const disabledDays = useMemo(() => [
+        ...(disabledDates || []),
+        ...(minDateTime ? [{ before: minDateTime }] : []),
+        ...(maxDateTime ? [{ after: maxDateTime }] : []),
+        ...(disabledMatcher ? [disabledMatcher] : []),
+    ], [disabledDates, minDateTime, maxDateTime, disabledMatcher]);
+    return (jsx("div", { ref: containerRef, className: `cw-datetimepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required, maxLength: 16, style: { width: "24ch" } }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear datetime" })) : (jsx(CwIcon, { iconId: "calendar-time" })) }), isOpen && (jsxs("div", { className: `${styles$4.pickerPopup} ${compactStyles.compactPopup}`, "data-position": popupPosition, children: [jsxs("div", { className: compactStyles.calendarWrapper, children: [jsx(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, defaultMonth: selectedDate, disabled: disabledDays, locale: enGB, numberOfMonths: numberOfMonths, formatters: formatters, components: {
+                                                Caption: (props) => jsx(CustomCaption, { ...props }),
+                                            }, modifiers: {
+                                                today: new Date(),
+                                            }, modifiersClassNames: {
+                                                today: "rdp-day_today",
+                                            } }), showTodayButton && (jsx("footer", { className: "cw-flex-row cw-align-center-center", children: jsx(CwButton, { type: "button", variant: "outline", icon: "check-big", onClick: handleNowClick, text: "Now" }) }))] }), jsxs("div", { className: compactStyles.timeWrapper, children: [jsxs("header", { children: [jsx(CwIcon, { iconId: "clock", size: "medium" }), jsx("span", { children: "Time" })] }), jsx("div", { ref: timeListRef, className: `${timeStyles.timePickerList} ${compactStyles.compactTimeList}`, children: timeOptions.map((time) => {
+                                                const isSelected = time === selectedTime;
+                                                return (jsx("button", { type: "button", className: isSelected ? timeStyles.selected : "", onClick: () => handleTimeSelect(time), children: time }, time));
+                                            }) })] })] }))] })] }) }));
 }
 
 const ResourcesTitleList$1 = ({ resources, canBePinned, includesPinned, onCrewPinning, onClickResourceContextMenu, ResourceTitleComponent }) => {
@@ -5810,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());
@@ -5934,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);
@@ -6100,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);
 };
@@ -6205,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, }) => {
@@ -6965,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;
@@ -6992,8 +7824,10 @@ class OnDoubleClickEvent {
 }
 class OnDragEvent {
     id;
-    constructor(id) {
+    crewId;
+    constructor(id, crewId) {
         this.id = id;
+        this.crewId = crewId;
     }
 }
 class OnDropEvent {
@@ -7068,10 +7902,6 @@ class OnClickRowHeader {
         this.id = id;
     }
 }
-class UpdateApi {
-    constructor() {
-    }
-}
 class OnClickUtc {
     constructor() {
     }
@@ -7203,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) {
@@ -7256,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;
@@ -7284,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}%`,
@@ -7311,14 +8133,10 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
                     setIsOnDrag(false);
             }, onDragStart: (_) => {
                 if (value.isDraggable)
-                    onEvent(new OnDragEvent(value.id));
+                    onEvent(new OnDragEvent(value.id, value.rowId));
             }, 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,
@@ -7361,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) => {
@@ -7405,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();
@@ -7429,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",
@@ -7446,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) {
@@ -7458,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%",
@@ -7477,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) => {
@@ -7728,205 +8533,6 @@ const getWeekendsDaysInDateRange = (initialDate, visibleDays) => {
 
 class UiEvent {
 }
-function when(event) {
-    let found = false;
-    const actions = {
-        case(eventType, action) {
-            if (!found && event instanceof eventType) {
-                action(event);
-                found = true;
-            }
-            return actions;
-        },
-        else(action) {
-            if (!found) {
-                action(event);
-            }
-        }
-    };
-    return actions;
-}
-
-const getListOfNumbers = (len) => Array(len)
-    .fill(0)
-    .map((_, idx) => idx);
-const getRandomColor = () => {
-    return "#" + (0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6);
-};
-const getRandomEvents = (date, visibleDays, resourceId) => {
-    return getListOfNumbers(visibleDays).map((e) => {
-        const len1 = Math.floor(Math.random() * 24) + 1;
-        const moment1 = moment(date).add(e, "days").add(e, "minutes");
-        const len2 = Math.floor(Math.random() * 25) + 1;
-        return {
-            id: crypto.randomUUID(),
-            rowId: resourceId.toString(),
-            name: "API Design",
-            color: getRandomColor(),
-            startDate: moment1.add(-len1, "hour").toDate(),
-            endDate: moment1.add(len2, "hour").toDate(),
-        };
-    });
-};
-
-const eventToUiState = (it, selectedDate, visibleDays, tooltip) => {
-    const { left, width } = getEventSizes(selectedDate, visibleDays, it.startDate, it.endDate);
-    const eventState = {
-        ...it,
-        left,
-        width,
-        tooltip: tooltip,
-        selected: false,
-        isResizable: false,
-        isDraggable: false,
-    };
-    return eventState;
-};
-const SchedulerPresenter = () => {
-    const [events, setEvents] = useState([]);
-    const [backgroundEvents, setBackgroundEvents] = useState([]);
-    const [uiState, setUiState] = useState(() => {
-        const visibleDays = 1;
-        const selectedDate = new Date("2024-12-03");
-        const isHeaderVisible = true;
-        return {
-            isUtc: false,
-            selectedDate: selectedDate,
-            isHeaderVisible: isHeaderVisible,
-            visibleDays: visibleDays,
-            rowsHeight: 2,
-            visibleRows: 8,
-        };
-    });
-    const [resources, setResources] = useState([]);
-    const selectedEventRef = useRef("");
-    useEffect(() => {
-        updateDataFromApi();
-    }, []);
-    const updateDataFromApi = () => {
-        const rows = 1;
-        // api call here to events
-        const apiEvents = getListOfNumbers(rows).flatMap((e) => {
-            return getRandomEvents(uiState.selectedDate, uiState.visibleDays * 3, e);
-        });
-        const eventsWithSizes = apiEvents.map((it) => {
-            return eventToUiState(it, uiState.selectedDate, uiState.visibleDays, jsxs("div", { children: [it.startDate.getHours() + ":" + it.startDate.getMinutes(), " -", it.endDate.getHours() + ":" + it.endDate.getMinutes()] }));
-        });
-        const visibleEvents = eventsWithSizes.filter((event) => {
-            return eventIsVisible(event.startDate, event.endDate, uiState.selectedDate, uiState.visibleDays);
-        });
-        setEvents(visibleEvents);
-        const apiBackgroundEvents = getListOfNumbers(1).map((e) => {
-            const backgroundEvent = {
-                id: e.toString(),
-                rowId: e.toString(),
-                color: "orange",
-                isResizable: false,
-                isDraggable: false,
-                width: 100 / uiState.visibleDays,
-                name: "Birthday",
-                icons: jsx(CwIcon, { iconId: "house", style: { padding: "0.5rem" } }, "cosa"),
-                startDate: new Date(),
-                left: 0,
-                endDate: new Date(),
-                isVisible: true,
-                selected: false,
-            };
-            return backgroundEvent;
-        });
-        setBackgroundEvents(apiBackgroundEvents);
-        // api call here to rows
-        const apiRows = getListOfNumbers(rows).map((e) => {
-            return {
-                resourceId: e.toString(),
-                title: "JAC" + e,
-            };
-        });
-        const headerProps = apiRows.map((row) => {
-            return {
-                rowId: row.resourceId,
-                title: row.title,
-            };
-        });
-        setResources(headerProps);
-    };
-    const onEvent = (event) => {
-        when(event)
-            .case(OnClickEvent, (event) => {
-            console.log("onClick event: " + event.id);
-        })
-            .case(OnDoubleClickEvent, (event) => {
-            const eventData = resources
-                .map((resource) => {
-                const element = events
-                    .filter((it) => {
-                    return it.rowId === resource.rowId;
-                })
-                    .find((it) => it.id == event.id);
-                return element;
-            })
-                .filter((it) => it !== undefined)[0];
-            console.log("found", eventData?.startDate, eventData?.endDate);
-        })
-            .case(OnDragEvent, (event) => {
-            console.log("onDrag event: " + event.id);
-            selectedEventRef.current = event.id;
-            console.log("selectedEvent set to: " + selectedEventRef.current);
-        })
-            .case(OnDropEvent, (event) => {
-            console.log("onDrop event: " + selectedEventRef.current + " to row: " + event.id);
-            setEvents((prevEvents) => {
-                // Find the index of the event to be updated
-                const eventIndex = prevEvents.findIndex((e) => e.id === selectedEventRef.current);
-                // If event is found, create a new array with the updated event
-                const updatedEvents = [...prevEvents];
-                updatedEvents[eventIndex] = {
-                    ...updatedEvents[eventIndex],
-                    rowId: event.id,
-                };
-                return updatedEvents;
-            });
-            console.log("drop on");
-            selectedEventRef.current = ""; // Reset the selected event ref
-        })
-            .case(OnDropCtrlEvent, (event) => {
-            alert(`Clicked row is ${event.id}`);
-        })
-            .case(OnClickRowEvent, (event) => {
-            alert(`Clicked row is ${event.id}`);
-        })
-            .case(OnRightClickEvent, (event) => {
-            alert(`RightClick event ${event.id}`);
-        })
-            .case(OnRightClickRow, (event) => {
-            alert(`RightClick row ${event.id}`);
-        })
-            .case(OnLeftDragStart, (event) => {
-            alert(`Start left Drag ${event.id}`);
-        })
-            .case(OnRightDragStart, (event) => {
-            alert(`Start Right Drag ${event.id}`);
-        })
-            .case(UpdateApi, () => {
-            updateDataFromApi();
-        })
-            .case(OnClickRowHeader, (event) => {
-            console.log(`Clicked row ${event.id}`);
-        })
-            .case(OnClickUtc, () => {
-            setUiState((old) => {
-                return { ...old, isUtc: !old.isUtc };
-            });
-        });
-    };
-    return {
-        state: uiState,
-        resources: resources,
-        events,
-        backgroundEvents,
-        onEvent: onEvent,
-    };
-};
 
 const getNow = (isUtc) => {
     let now = new Date();
@@ -7936,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;
@@ -7979,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
@@ -8027,10 +8635,6 @@ const height = (events, rows, rowsNumber) => {
     });
     return flatMapped.length;
 };
-const SchedulerPreview = () => {
-    const { state, resources, events, backgroundEvents, onEvent } = SchedulerPresenter();
-    return (jsxs("div", { children: [jsx("button", { onClick: (_) => onEvent(new UpdateApi()), children: "update" }), jsx("button", { onClick: (_) => onEvent(new OnClickUtc()), children: state.isUtc ? "set Local" : "set UTC" }), jsx(Scheduler, { id: "test", state: state, header: { title: "Flights", classification: "ACFT" }, rows: resources, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: DefaultRowHeader, events: events, backgroundEvents: backgroundEvents, contextMenuItems: [] })] }));
-};
 
 let topsCounter = 0;
 class CwSuperScheduler extends React.Component {
@@ -8351,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) {
@@ -8367,26 +8973,12 @@ 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(CwGenericTooltip, { content: value.tooltip, position: "right", dissapearsWhenHover: true, overlayStyle: value.overlayTooltipStyle, children: jsxs("div", { style: {
+    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: (_) => {
@@ -8409,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([]);
@@ -8642,44 +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))) }))] }));
-};
-
-const CwPaletteTree = () => (jsxs(Palette, { children: [jsx(Category, { name: "buttons", children: jsxs(Component$1, { name: "CwButton", children: [jsx(Variant, { name: "solid", children: jsx(CwButton, { variant: "solid", text: "Button" }) }), jsx(Variant, { name: "outline", children: jsx(CwButton, { variant: "outline", text: "Button" }) }), jsx(Variant, { name: "Icon", children: jsx(CwButton, { variant: "icon", icon: "save" }) }), jsx(Variant, { name: "Example", children: jsxs(CwButton, { variant: "solid", color: "danger", children: [jsx("span", { children: "Example" }), jsx("span", { children: "texmple 2" })] }) })] }) }), jsx(Category, { name: "search", children: jsx(Component$1, { name: "CwSearchInput", children: jsx(Variant, { children: jsx(CwSearchInput, { placeholder: "Search", selectList: [
-                            new CwSelectList("Search", "1", "Search something", "red")
-                        ] }) }) }) }), jsxs(Category, { name: "Scheduler-headers", children: [jsx(Component$1, { name: "DefaultRowHeader", children: jsx(Variant, { children: jsx(DefaultRowHeader, { value: {
-                                rowId: "1",
-                                title: "JAC",
-                                title2: "CMD",
-                                subtitle: "ICAO",
-                                subtitle2: "IATA"
-                            }, 
-                            // color={"red"}
-                            width: 180, onEvent: () => {
-                            } }) }) }), jsxs(Component$1, { name: "PinRowHeader", children: [jsx(Variant, { children: jsx(PinRowHeader, { value: {
-                                    rowId: "1",
-                                    title: "JAC",
-                                    title2: "CMD",
-                                    subtitle: "ICAO",
-                                    subtitle2: "IATA",
-                                    isPinned: true,
-                                    contextMenuItems: [],
-                                    isLoading: false,
-                                }, 
-                                // color={"red"}
-                                width: 180, onEvent: () => {
-                                } }) }), jsx(Variant, { name: "pinned", children: jsx(PinRowHeader, { value: {
-                                    rowId: "1",
-                                    title: "JAC",
-                                    title2: "CMD",
-                                    subtitle: "ICAO",
-                                    subtitle2: "IATA",
-                                    isPinned: true,
-                                    contextMenuItems: [],
-                                    isLoading: false,
-                                }, 
-                                // color={"red"}
-                                width: 180, onEvent: () => {
-                                } }) })] })] }), jsx(Category, { name: "Scheduler", children: jsx(Component$1, { name: "Scheduler", children: jsx(Variant, { children: jsx(SchedulerPreview, {}) }) }) })] }));
-
-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, 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, CwPaletteTree, CwReportModal, CwScheduler, CwScheduler2, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSortableList, CwSuperScheduler, CwTable, CwTableGrouped, CwTabs, CwTag, CwTextArea, CwTime, 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 };
+    // 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, 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 };