@cwellt_software/cwellt-reactjs-lib 1.0.8 → 1.1.0

package/dist/index.es.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useEffect, useState, useRef, useMemo, useCallback, forwardRef, useImperativeHandle, createElement, memo, Fragment as Fragment$1, Component } from 'react';
+import React__default, { 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, InputNumber, Select, Tag, Dropdown, Menu } from 'antd';
+import { Tooltip, Modal, Select, Tag, Dropdown, Menu } from 'antd';
 import Draggable from 'react-draggable';
 import moment from 'moment';
 import lodash from 'lodash';
@@ -201,13 +201,20 @@ function getContrastColor(color) {
  * <CwIcon iconId="house" source="fontawesome" /> // Uses FontAwesome
  */
 function CwIcon(props) {
-    const { iconId, source = 'cwellt', ...iconProps } = props;
+    const { iconId, source = 'cwellt', color, size, ...iconProps } = props;
+    const getClassName = (baseClass) => {
+        return [
+            baseClass,
+            color && `cw-color-${color}`,
+            size && `cw-font-size-${size}`
+        ].filter(Boolean).join(' ');
+    };
     // Return appropriate icon based on source
     if (source === 'fontawesome') {
-        return jsx("span", { ...iconProps, className: `fa fa-${iconId}` });
+        return jsx("span", { ...iconProps, className: getClassName(`fa fa-${iconId}`) });
     }
     // Use custom icon font
-    return jsx("span", { ...iconProps, className: `cwi-icons cwi-${iconId}` });
+    return jsx("span", { ...iconProps, className: getClassName(`cwi-icons cwi-${iconId}`) });
 }
 
 /**
@@ -227,7 +234,7 @@ const CwChip = ({ label, colorScheme = 'info', customColor, variant = 'soft', cl
     }
     // Calculate styles based on colorScheme, customColor and variant
     const chipStyle = React__default.useMemo(() => {
-        if (colorScheme === 'custom' && customColor) {
+        if (customColor) {
             if (variant === 'outline') {
                 // For outline, customColor is used for border and text
                 return {
@@ -266,7 +273,7 @@ const CwChip = ({ label, colorScheme = 'info', customColor, variant = 'soft', cl
 function CwTag(tagProps) {
     const hideTag = (event_clickTag) => {
         const tag = event_clickTag.currentTarget.parentElement;
-        tag?.classList.add("cwellt_display_none");
+        tag?.classList.add("tag-hidden");
     };
     const onClickClosableCustomTag = (event_clickClosableT) => {
         hideTag(event_clickClosableT);
@@ -280,10 +287,7 @@ function CwTag(tagProps) {
             tagProps.onClickTag(event_clickTag);
         }
     };
-    return (jsxs("div", { className: tagProps.closableTag
-            ? tagProps.className + " cwelltTag cwellt_flex cwellt_justify_space_between cwellt_align_items_center"
-            : tagProps.className + " cwelltTag cwellt_flex cwellt_justify_center cwellt_align_items_center", style: tagProps.styleTag, onClick: event_clickTag => onClickCustomTag(event_clickTag), id: tagProps.idTag, ref: tagProps.ref, children: [jsx("span", { className: tagProps.classNameTag_description +
-                    " cwelltTag_desc cwellt_flex cwellt_justify_flex_start cwellt_align_items_center", style: tagProps.styleTag_description, children: tagProps.children }), tagProps.closableTag && (jsx("span", { className: "cwi-icons cwi-close", onClick: event_clickClosableT => onClickClosableCustomTag(event_clickClosableT), style: tagProps.styleClosableButton }))] }));
+    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;
@@ -301,8 +305,35 @@ const CwMessage = props => {
         }, props.duration ?? CW_DEFAULT_MESSAGE_DURATION);
         return () => clearTimeout(timer);
     }, [props]);
-    return (jsx("div", { className: "cw-message", "data-message-type": Object.keys(CwMessageType).find(key => CwMessageType[key] === props.messageType), children: jsxs(CwAlign, { justifyContent: "center", alignItems: "center", children: [props.messageType && jsx(CwIcon, { iconId: props.messageType.toString() }), props.message] }) }));
+    return (jsxs("div", { className: "cw-message", "data-message-type": Object.keys(CwMessageType).find(key => CwMessageType[key] === props.messageType), children: [props.messageType && jsx(CwIcon, { iconId: props.messageType.toString(), size: "large" }), props.message] }));
 };
+/**
+ * Hook for displaying inline messages within specific components.
+ * Messages appear where you place the RenderMessage component, perfect for form validation
+ * and contextual feedback.
+ *
+ * @returns Object with showMessage function and RenderMessage component
+ *
+ * @example
+ * ```typescript
+ * const { showMessage, RenderMessage } = useCwMessage();
+ *
+ * const handleValidation = () => {
+ *   showMessage({
+ *     message: "Please fill all required fields",
+ *     messageType: CwMessageType.ERROR,
+ *     duration: 3000
+ *   });
+ * };
+ *
+ * return (
+ *   <div>
+ *     {RenderMessage}
+ *     <button onClick={handleValidation}>Submit</button>
+ *   </div>
+ * );
+ * ```
+ */
 const useCwMessage = () => {
     const [isVisible, setIsVisible] = useState(false);
     const [message, setMessage] = useState("");
@@ -322,30 +353,24 @@ const useCwMessage = () => {
 };
 class CwMessageManager {
     static instance;
-    messageContainer = null;
+    messageWrapper = null;
     root;
-    constructor() {
-        this.init();
-    }
     static getInstance() {
         if (!CwMessageManager.instance) {
             CwMessageManager.instance = new CwMessageManager();
+            CwMessageManager.instance.init();
         }
         return CwMessageManager.instance;
     }
     init() {
-        this.messageContainer = document.createElement("div");
-        this.messageContainer.style.setProperty("position", "fixed");
-        this.messageContainer.style.setProperty("pointer-events", "none");
-        this.messageContainer.style.setProperty("width", "100%");
-        this.messageContainer.style.setProperty("top", "0");
-        this.messageContainer.style.setProperty("z-index", "999999");
-        document.body.prepend(this.messageContainer);
-        this.root = createRoot(this.messageContainer); // Create a root at the messageContainer
+        this.messageWrapper = document.createElement("div");
+        this.messageWrapper.className = "cw-message-wrapper";
+        document.body.prepend(this.messageWrapper);
+        this.root = createRoot(this.messageWrapper); // Create a root at the messageWrapper
     }
     showMessage(message, type, duration) {
         const msg = document.createElement("div");
-        this.messageContainer?.prepend(msg);
+        this.messageWrapper?.prepend(msg);
         const msgRoot = createRoot(msg); // Create a root for the new message
         msgRoot.render(jsx(CwMessage, { message: message, messageType: type, duration: duration, onClose: () => this.closeMessage(msgRoot) }));
     }
@@ -353,10 +378,270 @@ class CwMessageManager {
         msgRoot.unmount(); // Unmount the message root
     }
 }
+/**
+ * Display a global TOAST message that appears floating at the top right of the screen.
+ * Perfect for system-wide notifications and cross-component alerts.
+ *
+ * @param message - Text to display in the message
+ * @param type - Message type for styling and icon (SUCCESS, ERROR, WARN, INFO)
+ * @param duration - Auto-close duration in milliseconds (default: 2000)
+ *
+ * @example
+ * ```typescript
+ * CwDisplayMessage("Data saved successfully!", CwMessageType.SUCCESS);
+ * CwDisplayMessage("Connection failed", CwMessageType.ERROR, 5000);
+ * ```
+ *
+ * @note For inline messages within components, use `CwNote` or `useCwMessage` hook instead
+ */
 function CwDisplayMessage(message, type, duration) {
     CwMessageManager.getInstance().showMessage(message, type, duration);
 }
 
+/**
+ * CwNote - Inline note component for instructions and contextual content
+ *
+ * @example
+ * <CwNote content="Use the search box to filter results" color="neutral" icon="search" />
+ * <CwNote
+ *   content="Failed to load data"
+ *   variant="solid"
+ *   color="danger"
+ *   icon="warning"
+ *   onDismiss={() => console.log('dismissed')}
+ * />
+ * <CwNote variant="outline" color="success" icon="check">
+ *   <p>Step 1: Configure your project settings</p>
+ *   <p>Step 2: Validate configuration before proceeding</p>
+ * </CwNote>
+ * <CwNote className="custom-class" icon="lightbulb">
+ *   <strong>Important information here</strong>
+ * </CwNote>
+ */
+const CwNote = ({ content, variant = 'soft', color = 'primary', customColor, fontSize = 'regular', icon, dismissible = false, autoCloseSeconds, className = '', style = {}, children, }) => {
+    const [isVisible, setIsVisible] = useState(true);
+    // Auto-close functionality
+    useEffect(() => {
+        if (autoCloseSeconds && autoCloseSeconds > 0) {
+            const timer = setTimeout(() => {
+                setIsVisible(false);
+            }, autoCloseSeconds * 1000);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [autoCloseSeconds]);
+    // Handle manual dismiss
+    const handleDismiss = (e) => {
+        e.stopPropagation();
+        setIsVisible(false);
+    };
+    // Calculate styles for custom color
+    const messageStyle = 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
+                };
+            }
+        }
+        return style;
+    }, [customColor, variant, style]);
+    // Build CSS classes
+    let noteClass = `cw-note cw-note-${fontSize}`;
+    if (dismissible) {
+        noteClass += ' cw-note-dismissible';
+    }
+    if (className) {
+        noteClass += ` ${className}`;
+    }
+    // Don't render if not visible
+    if (!isVisible) {
+        return null;
+    }
+    return (jsxs("div", { className: noteClass, "data-color": customColor ? undefined : color, "data-variant": variant, style: messageStyle, children: [icon && jsx(CwIcon, { iconId: icon }), jsx("div", { className: "cw-note-content", children: children ?? content }), dismissible && (jsx("button", { className: "cw-note-dismiss-button", onClick: handleDismiss, "aria-label": "Dismiss note", type: "button", children: jsx(CwIcon, { iconId: "close" }) }))] }));
+};
+
+/**
+ * CwImageGallery
+ *
+ * A versatile image gallery component that displays a grid of images
+ * and allows users to click on an image to view it in a larger format.
+ *
+ * @example
+ * // Basic usage
+ *	<ImageGallery
+ *		images={photos.map(p => {
+ *			return (
+ *				{
+ *					src: "base64ImageString",
+ *					alt: "Alternative text",
+ *					filename: "Filename"
+ *				}
+ *			)
+ *		})}
+ *	/>
+ */
+function CwImageGallery({ images }) {
+    const [selectedIndex, setSelectedIndex] = useState(null);
+    const handleNext = useCallback(() => {
+        if (selectedIndex === null)
+            return;
+        setSelectedIndex((selectedIndex + 1) % images.length);
+    }, [selectedIndex, images.length]);
+    const handlePrev = useCallback(() => {
+        if (selectedIndex === null)
+            return;
+        setSelectedIndex((selectedIndex - 1 + images.length) % images.length);
+    }, [selectedIndex, images.length]);
+    const handleKeyDown = useCallback((e) => {
+        if (selectedIndex === null)
+            return;
+        if (e.key === "ArrowRight")
+            handleNext();
+        else if (e.key === "ArrowLeft")
+            handlePrev();
+        else if (e.key === "Escape")
+            setSelectedIndex(null);
+    }, [selectedIndex, handleNext, handlePrev]);
+    useEffect(() => {
+        if (selectedIndex !== null) {
+            window.addEventListener("keydown", handleKeyDown);
+        }
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [selectedIndex, handleKeyDown]);
+    const selectedImage = selectedIndex !== null ? images[selectedIndex] : null;
+    return (jsxs("div", { className: "cw-grid-base-2", children: [images.map((img, idx) => (jsxs("button", { style: {
+                    background: "transparent",
+                    color: "white",
+                    border: "none",
+                    cursor: "pointer",
+                    display: "block",
+                }, onClick: () => setSelectedIndex(idx), children: [jsx("img", { src: "data:image/jpeg;base64," + img.src, alt: img.alt, style: {
+                            width: "300px",
+                            height: "auto",
+                            maxHeight: "300px",
+                            maxWidth: "300px",
+                            cursor: "pointer",
+                            borderRadius: "6px",
+                        } }), jsx("div", { style: { fontSize: "1rem", textAlign: "center" }, children: img.filename && jsx("p", { style: { color: "var(--text-on-body)" }, children: img.filename }) })] }, img.filename))), selectedImage && (jsxs("button", { onClick: () => setSelectedIndex(null), style: {
+                    position: "fixed",
+                    top: 0,
+                    left: 0,
+                    width: "100vw",
+                    height: "100vh",
+                    backgroundColor: "rgba(0, 0, 0, 0.8)",
+                    display: "grid",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    zIndex: 9999,
+                    cursor: "zoom-out",
+                }, children: [jsx("img", { src: "data:image/jpeg;base64," + selectedImage.src, alt: selectedImage.alt, style: {
+                            maxWidth: "90vw",
+                            maxHeight: "90vh",
+                            width: "auto",
+                            height: "auto",
+                            objectFit: "contain",
+                            borderRadius: "8px",
+                            boxShadow: "0 0 15px rgba(0,0,0,0.5)",
+                            zIndex: 10001,
+                        } }), jsx("div", { style: { color: "#fff", fontSize: "1rem", textAlign: "center" }, children: selectedImage.filename && jsx("p", { children: selectedImage.filename }) }), jsx("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            handlePrev();
+                        }, style: {
+                            position: "absolute",
+                            left: "30px",
+                            fontSize: "2rem",
+                            background: "transparent",
+                            color: "white",
+                            border: "none",
+                            cursor: "pointer",
+                            zIndex: 10002,
+                        }, children: "\u2039" }), jsx("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            handleNext();
+                        }, style: {
+                            position: "absolute",
+                            right: "30px",
+                            fontSize: "2rem",
+                            background: "transparent",
+                            color: "white",
+                            border: "none",
+                            cursor: "pointer",
+                            zIndex: 10002,
+                        }, children: "\u203A" })] }))] }));
+}
+
+/**
+ * CwImageGallery
+ *
+ * A image zoom component that displays an image
+ * and allows users to click to view it in a larger format.
+ *
+ * @example
+ * // Basic usage
+ *	<ImageZoom src={'base64ImageString'}
+ *		alt={'Alternative text'}/>
+ */
+function CwImageZoom(image) {
+    const [selectedImage, setSelectedImage] = useState(null);
+    const imageHeight = image.height ? image.height : "300px";
+    const imageWidth = image.width ? image.width : "300px";
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape") {
+                setSelectedImage(null);
+            }
+        };
+        if (selectedImage) {
+            document.addEventListener("keydown", handleKeyDown);
+        }
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [selectedImage]);
+    return (jsxs("div", { className: "cw-fieldset cw-grid-base-2", children: [image.src && (jsx("img", { src: "data:image/jpeg;base64," + image.src, alt: image.alt, onClick: () => setSelectedImage(image), style: {
+                    maxHeight: imageHeight,
+                    maxWidth: imageWidth,
+                    cursor: "zoom-in",
+                    borderRadius: "6px",
+                    objectFit: "cover",
+                } }, image.alt)), selectedImage && (jsxs("div", { onClick: () => setSelectedImage(null), style: {
+                    position: "fixed",
+                    top: 0,
+                    left: 0,
+                    width: "100vw",
+                    height: "100vh",
+                    backgroundColor: "rgba(0, 0, 0, 0.85)",
+                    display: "grid",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    zIndex: 9999,
+                    cursor: "zoom-out",
+                    padding: "1rem",
+                }, children: [jsx("img", { src: "data:image/jpeg;base64," + selectedImage.src, alt: selectedImage.alt, style: {
+                            maxWidth: "90vw",
+                            maxHeight: "90vh",
+                            width: "auto",
+                            height: "auto",
+                            objectFit: "contain",
+                            borderRadius: "8px",
+                            boxShadow: "0 0 15px rgba(0,0,0,0.5)",
+                        } }), jsx("div", { style: { color: "#fff", fontSize: "1rem", textAlign: "center" }, children: selectedImage.filename && jsx("div", { children: selectedImage.filename }) })] }))] }));
+}
+
 /**
  * CwLoading
  *
@@ -380,7 +665,7 @@ function CwDisplayMessage(message, type, duration) {
  */
 function CwLoading({ isLoading = false, text = '', size = 'regular', iconPosition = 'outside', iconName = 'cwi-plane-solid', animation = 'spin', children }) {
     const iconClasses = `cwi-icons ${iconName || ''}`;
-    return (jsxs("div", { "aria-busy": isLoading, className: isLoading ? 'cw-loading-container' : '', children: [isLoading && (jsxs("div", { className: "cw-loading-content", "data-size": size, "data-animation": animation, children: [jsx("div", { className: "cw-loading", "data-icon-position": iconPosition, children: jsx("span", { className: iconClasses }) }), text && (jsx("p", { children: text }))] })), jsx("div", { className: isLoading ? 'cw-loading-disabled-content' : '', children: children })] }));
+    return (jsxs("div", { "aria-busy": isLoading, className: isLoading ? 'cw-loading-container' : '', "data-children": !!children, children: [isLoading && (jsxs("div", { className: "cw-loading-content", "data-size": size, "data-animation": animation, children: [jsx("div", { className: "cw-loading", "data-icon-position": iconPosition, children: jsx("span", { className: iconClasses }) }), text && (jsx("p", { children: text }))] })), jsx("div", { className: isLoading ? 'cw-loading-disabled-content' : '', children: children })] }));
 }
 
 /**
@@ -403,7 +688,7 @@ function CwLoadingSmall(CwelltLoadingAppointements) {
         jsx("div", {})) }));
 }
 
-var styles$d = {"cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si"};
+var styles$j = {"cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si"};
 
 // Constants moved outside to prevent recreation
 const margin = 16;
@@ -514,12 +799,12 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
     const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => {
         setIsVisible(true);
     }, showDelay);
-    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$d["cw-generic-tooltip-content"]);
+    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$j["cw-generic-tooltip-content"]);
     // Memoize tooltip content creation
     const tooltipContent = useMemo(() => {
         if (hide || !isVisible || !content)
             return null;
-        return createPortal(jsx("div", { className: styles$d["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, style: {
+        return createPortal(jsx("div", { className: styles$j["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, style: {
                 position: 'fixed',
                 top: `${tooltipPosition.top}px`,
                 left: `${tooltipPosition.left}px`,
@@ -534,12 +819,12 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
         clearTooltipTimeout();
         setIsVisible(false);
     }, [clearTooltipTimeout]);
-    return (jsxs("div", { ref: containerRef, className: styles$d["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, children: [tooltipContent, children] }));
+    return (jsxs("div", { ref: containerRef, className: styles$j["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, children: [tooltipContent, children] }));
 };
 
 // Reference for draggable modal
-const draggableRef$1 = React__default.createRef();
 function CwModal(custModalProps) {
+    const draggableRef = useRef(null);
     // Hooks [ modal draggable ]
     const [isModalDisabled, setModalDisabled] = useState(true);
     // [ optional : hideFooter by default it shows the footer ]
@@ -569,7 +854,7 @@ function CwModal(custModalProps) {
             width: custModalProps.widthModal
         }
     };
-    return (jsx("div", { children: custModalProps.modalState && (jsxs("div", { className: custModalProps.classNameModalOverlay + " cwelltModalOverlay", children: [jsx("div", { className: "cwelltModalOverlayBg", onClick: custModalProps.onCloseModal }), jsx(Draggable, { disabled: isModalDisabled, axis: "both", children: jsxs("div", { className: custModalProps.classNameModal + " cwelltContainerModal", ref: draggableRef$1, 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 ? (
+    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 " +
                                                     custModalProps.custButtonClassName, onClick: custModalProps.custButtonClick }) }) })) : (jsx("div", {}))] })) : (
@@ -577,6 +862,78 @@ function CwModal(custModalProps) {
                             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"};
+
+function CwConfirmationPopup(props) {
+    const { isOpen, onConfirm, onCancel, message = "Are you sure you want to proceed?", confirmText = "Confirm", cancelText = "Cancel", placement = 'bottom', children } = props;
+    const triggerRef = useRef(null);
+    const popupRef = useRef(null);
+    const [position, setPosition] = useState({ top: 0, left: 0 });
+    // Render the children with a wrapper to get the reference
+    const renderChildren = () => {
+        if (React__default.isValidElement(children)) {
+            const ChildWrapper = forwardRef((_props, ref) => {
+                return (jsx("div", { ref: ref, style: { display: 'inline-block' }, children: children }));
+            });
+            return jsx(ChildWrapper, { ref: triggerRef });
+        }
+        return children;
+    };
+    // Effect to calculate the position of the popup
+    useEffect(() => {
+        if (isOpen && triggerRef.current && popupRef.current) {
+            const targetRect = triggerRef.current.getBoundingClientRect();
+            const popupRect = popupRef.current.getBoundingClientRect();
+            let top = 0;
+            let left = 0;
+            // Calculate position based on placement
+            switch (placement) {
+                case 'top':
+                    top = targetRect.top - popupRect.height - 10;
+                    left = targetRect.left + (targetRect.width / 2) - (popupRect.width / 2);
+                    break;
+                case 'right':
+                    top = targetRect.top + (targetRect.height / 2) - (popupRect.height / 2);
+                    left = targetRect.right + 10;
+                    break;
+                case 'bottom':
+                    top = targetRect.bottom + 10;
+                    left = targetRect.left + (targetRect.width / 2) - (popupRect.width / 2);
+                    break;
+                case 'left':
+                    top = targetRect.top + (targetRect.height / 2) - (popupRect.height / 2);
+                    left = targetRect.left - popupRect.width - 10;
+                    break;
+            }
+            // Adjustments to keep the popup within the window
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            if (left < 10)
+                left = 10;
+            if (left + popupRect.width > viewportWidth - 10) {
+                left = viewportWidth - popupRect.width - 10;
+            }
+            if (top < 10)
+                top = 10;
+            if (top + popupRect.height > viewportHeight - 10) {
+                top = viewportHeight - popupRect.height - 10;
+            }
+            setPosition({ top, left });
+        }
+    }, [isOpen, placement]);
+    const handleOverlayClick = (e) => {
+        if (popupRef.current && !popupRef.current.contains(e.target)) {
+            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: {
+                        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) {
@@ -653,7 +1010,7 @@ class CwModalIframe extends React.Component {
     }
 }
 
-var styles$c = {"cw-dialog-main":"cw-dialog-module_cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module_cw-dialog-button-close__9GRd8"};
+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"};
 
 // Helper function to parse size values
 const parseSize = (size) => {
@@ -692,7 +1049,7 @@ const convertFromPx = (px, unit) => {
     }
 };
 const CwDialog = props => {
-    const { customFooter, customHeader, headline, width, height, dialogSize, scrim, onSave, onClose, hideFooter, children, open, ...domProps } = props;
+    const { customFooter, customHeader, headline, width, height, dialogSize, scrim, onSave, onClose, hideFooter, children, open, autoReposition = false, ...domProps } = props;
     const dialogRef = useRef(null);
     const initialSetup = useMemo(() => {
         // Default width and height with units
@@ -741,19 +1098,42 @@ const CwDialog = props => {
     // scrim is true by default
     const hasScrim = scrim !== false;
     // Adjust position after the dialog is rendered when using autoHeight
-    useEffect(() => {
+    useLayoutEffect(() => {
+        let resizeObserver = null;
         if (size.autoHeight && dialogRef.current && open) {
-            // Get the actual height after rendering
-            const actualHeight = dialogRef.current.offsetHeight;
-            // Only update position if height is available
-            if (actualHeight > 0) {
-                setPosition(prevPos => ({
-                    ...prevPos,
-                    y: window.document.body.clientHeight / 2 - actualHeight / 2
-                }));
+            const recalculatePosition = () => {
+                const actualHeight = dialogRef.current?.offsetHeight;
+                if (actualHeight && actualHeight > 0) {
+                    setPosition({
+                        x: Math.max(0, window.document.body.clientWidth / 2 - size.width / 2),
+                        y: Math.max(0, window.document.body.clientHeight / 2 - actualHeight / 2)
+                    });
+                }
+            };
+            setTimeout(recalculatePosition, 0);
+            // For modals with delayed loading content (inner fetchs and similar)
+            if (autoReposition) {
+                resizeObserver = new ResizeObserver(() => {
+                    const dialog = dialogRef.current;
+                    if (!dialog)
+                        return;
+                    const dialogRect = dialog.getBoundingClientRect();
+                    const viewportHeight = window.innerHeight;
+                    const margin = 50;
+                    // Only reposition if modal tries to grow over window limits
+                    const isOverflowingTop = dialogRect.top < margin;
+                    const isOverflowingBottom = dialogRect.bottom > viewportHeight - margin;
+                    if (isOverflowingTop || isOverflowingBottom) {
+                        recalculatePosition();
+                    }
+                });
+                resizeObserver.observe(dialogRef.current);
             }
         }
-    }, [size.autoHeight, open]);
+        return () => {
+            resizeObserver?.disconnect();
+        };
+    }, [size.autoHeight, open, autoReposition]);
     useEffect(() => {
         const handleMouseMove = (e) => {
             if (isDragging) {
@@ -846,7 +1226,7 @@ const CwDialog = props => {
             onClose();
         }
     }, [onClose]);
-    const header = useMemo(() => (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: headline }), customHeader || (jsx("button", { className: styles$c["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
+    const header = useMemo(() => (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: headline }), customHeader || (jsx("button", { className: styles$h["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 resizeHandles = useMemo(() => size.autoHeight
@@ -875,12 +1255,13 @@ const CwDialog = props => {
             : `${convertFromPx(size.height, size.heightUnit)}${size.heightUnit}`;
         return { displayWidth, displayHeight };
     }, [size.width, size.height, size.widthUnit, size.heightUnit, size.autoHeight]);
-    return (open && (jsx("div", { "data-has-scrim": hasScrim, className: styles$c["cw-dialog-main"], onClick: handleScrimClick, children: jsxs("dialog", { ...domProps, ref: dialogRef, style: {
+    const dialogContent = (jsx("div", { "data-has-scrim": hasScrim, className: styles$h["cw-dialog-main"], onClick: handleScrimClick, children: jsxs("dialog", { ...domProps, ref: dialogRef, style: {
                 left: `${position.x}px`,
                 top: `${position.y}px`,
                 width: displayDimensions.displayWidth,
                 height: displayDimensions.displayHeight
-            }, children: [header, content, hideFooter !== true && footer, resizeHandles] }) })));
+            }, children: [header, content, hideFooter !== true && footer, resizeHandles] }) }));
+    return open ? createPortal(dialogContent, document.body) : null;
 };
 
 const CwModalReportFunctional = (props) => {
@@ -1038,7 +1419,7 @@ function CwButton({ text, variant = 'solid', color = 'primary', 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 })] }))) }));
 }
 
-var styles$b = {"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$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"};
 
 /**
 * CwCard - A simple card component for displaying content in a contained format
@@ -1062,11 +1443,11 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     // Construct class names using CSS modules
     const cardClassNames = [
         'cw-card',
-        styles$b.card,
+        styles$g.card,
         className,
-        clickable ? styles$b.clickable : '',
-        disabled ? styles$b.disabled : '',
-        isLoading ? styles$b.loading : '',
+        clickable ? styles$g.clickable : '',
+        disabled ? styles$g.disabled : '',
+        isLoading ? styles$g.loading : '',
     ].filter(Boolean).join(' ');
     // Handle click event when card is clickable
     const handleClick = () => {
@@ -1083,17 +1464,17 @@ 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$b.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$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;
     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$b.headerContent, "data-alignment": alignment, children: [title && jsx("h5", { children: title }), subtitle && jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), jsx("div", { className: styles$b.content, children: children }), hasFooter && (jsxs("footer", { children: [hasChips && (jsx("div", { className: styles$b.footerTags, children: chips.map((chip, index) => (jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$b.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsx("div", { className: styles$b.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (jsx("div", { className: styles$b.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$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" }) }))] }));
 };
 
-var styles$a = {"cardContainer":"cw-card-list-module_cardContainer__l3YEh","pagination":"cw-card-list-module_pagination__5Ay78","pageInfo":"cw-card-list-module_pageInfo__uiMel","emptyState":"cw-card-list-module_emptyState__RlqiS","sortControls":"cw-card-list-module_sortControls__mWgZA"};
+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"};
 
-function CwCardList({ items, renderCard, pageSize = 10, className = '', layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey }) {
+function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey, ...htmlProps }) {
     const [currentPage, setCurrentPage] = useState(1);
     const [sortKey, setSortKey] = useState(defaultSortKey || sortOptions[0]?.key || '');
     const [sortDirection, setSortDirection] = useState('asc');
@@ -1125,10 +1506,10 @@ function CwCardList({ items, renderCard, pageSize = 10, className = '', layout =
         '--card-width': `${defaultCardWidth}px`,
         '--card-gap': `${cardGap}px`
     };
-    return (jsxs("div", { className: `${className}`, children: [sortOptions.length > 0 && (jsxs("div", { className: styles$a.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$a.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$a.loading, children: jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsx("div", { className: styles$a.emptyState, children: emptyState || jsx("p", { children: "No items to display" }) })) : (jsxs(Fragment, { children: [jsx("div", { className: `${styles$a.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsx("div", { className: styles$a.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (jsxs("div", { className: styles$a.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$a.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$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" })] }))] }))] }));
 }
 
-var styles$9 = {"cw-accordion":"cw-accordion-module_cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module_cw-accordion-body__xlI8b"};
+var styles$e = {"cw-accordion":"cw-accordion-module_cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module_cw-accordion-body__xlI8b"};
 
 /**
  *
@@ -1145,7 +1526,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
         setVisible_accordionBody(!isVisible_accordionBody);
     };
     // #endregion
-    return (jsxs("div", { className: styles$9["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$9["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
+    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 })] }));
 }
 
 /**
@@ -1281,7 +1662,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
         const startX = e.clientX;
         const startWidth = e.target.parentElement?.offsetWidth || 0;
         const onMouseMove = (moveEvent) => {
-            const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50); // mínimo 50px
+            const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50); // min 50px
             setColumnWidths(prev => ({ ...prev, [key]: newWidth }));
         };
         const onMouseUp = () => {
@@ -1298,7 +1679,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                 overflowY: "auto"
             };
         }
-        return {}; // sin altura ni scroll
+        return {}; // no height or scroll
     }, [stickyHeader, scrollHeight]);
     const getColSpan = () => columns.length + (expandedRowRender ? 1 : 0);
     const hasClassNameRow = (item) => {
@@ -1334,7 +1715,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                                             }),
                                         }, 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: "number", value: currentPage, onChange: (e) => {
+                                                            : "↓" }))] }), 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);
@@ -1343,14 +1724,10 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                             if (isNaN(value) || value < 1 || value > totalPages) {
                                 handlePageChange(1);
                             }
-                        }, min: 1, max: totalPages, style: {
-                            width: "4rem",
-                            textAlign: "center",
-                            marginRight: "0.5rem"
-                        } }), "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, style: { marginLeft: "1rem" }, children: pageSizeOptions.map(size => (jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
+                        }, 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$8 = {"cw-tabs":"cw-tabs-module_cw-tabs__1pmji","cw-tabs-content":"cw-tabs-module_cw-tabs-content__HTp8d"};
+var styles$d = {"cw-tabs":"cw-tabs-module_cw-tabs__1pmji","cw-tabs-content":"cw-tabs-module_cw-tabs-content__HTp8d"};
 
 const TabIcon = ({ icon }) => {
     if (!icon)
@@ -1400,7 +1777,7 @@ function CwTabs(CwTabsProps) {
     const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
         ? { minWidth: CwTabsProps.tabsListWidth }
         : undefined;
-    return (jsxs("div", { id: CwTabsProps.id, className: styles$8['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$8['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
+    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 })] }));
 }
 
 /**
@@ -1442,10 +1819,140 @@ const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detail
  */
 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 !== ""
-                        ? `${item.value}${item.suffix ? ` ${item.suffix}` : ''}`
+                        ? (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"};
+
+function CwSortableList({ items, onReorder, renderItem, className = '', movedItems = new Set(), emptyMessage = "No elements to show", readOnly = false, }) {
+    const [draggedItem, setDraggedItem] = useState(null);
+    const [dropIndicatorIndex, setDropIndicatorIndex] = useState(null);
+    const [lastValidDropIndex, setLastValidDropIndex] = useState(null);
+    const [expandedItems, setExpandedItems] = useState(new Set());
+    const toggleExpanded = (itemId) => {
+        setExpandedItems(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(itemId)) {
+                newSet.delete(itemId);
+            }
+            else {
+                newSet.add(itemId);
+            }
+            return newSet;
+        });
+    };
+    const cleanupDragState = () => {
+        setDraggedItem(null);
+        setDropIndicatorIndex(null);
+        setLastValidDropIndex(null);
+    };
+    const handleDragStart = (e, item) => {
+        if (readOnly) {
+            e.preventDefault();
+            return;
+        }
+        setDraggedItem(item);
+        setLastValidDropIndex(null);
+        e.dataTransfer.effectAllowed = 'move';
+    };
+    const handleDragEnd = () => {
+        if (draggedItem && lastValidDropIndex !== null) {
+            const dragIndex = items.findIndex(item => item.id === draggedItem.id);
+            if (dragIndex !== lastValidDropIndex && dragIndex !== lastValidDropIndex - 1) {
+                const newItems = [...items];
+                const [draggedElement] = newItems.splice(dragIndex, 1);
+                let finalIndex = lastValidDropIndex;
+                if (dragIndex < finalIndex)
+                    finalIndex -= 1;
+                newItems.splice(finalIndex, 0, draggedElement);
+                // Ahora pasamos el id del elemento movido al callback
+                onReorder(newItems, draggedItem.id);
+            }
+        }
+        cleanupDragState();
+    };
+    const handleDragOver = (e, index) => {
+        e.preventDefault();
+        if (!draggedItem || readOnly)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const mouseY = e.clientY;
+        const elementCenterY = rect.top + (rect.height / 2);
+        const dropIndex = mouseY < elementCenterY ? index : index + 1;
+        setLastValidDropIndex(dropIndex);
+        if (dropIndicatorIndex !== dropIndex) {
+            setDropIndicatorIndex(dropIndex);
+        }
+    };
+    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$c.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));
+        }) }));
+}
+
+function useSortableList(initialItems) {
+    const [items, setItems] = useState(initialItems);
+    const [originalItems, setOriginalItems] = useState(initialItems);
+    const [hasChanges, setHasChanges] = useState(false);
+    const [movedItems, setMovedItems] = useState(new Set());
+    const [resetKey, setResetKey] = useState(0);
+    const handleReorder = useCallback((newItems, movedId) => {
+        setItems(newItems);
+        if (movedId !== undefined) {
+            setMovedItems(prev => new Set(prev).add(movedId));
+        }
+        setHasChanges(true);
+    }, []);
+    const addItem = (newItem) => {
+        setItems(prev => [...prev, newItem]);
+        setHasChanges(true);
+    };
+    const removeItem = (id) => {
+        setItems(prev => prev.filter(item => item.id !== id));
+        setHasChanges(true);
+    };
+    const handleSave = async (onSave) => {
+        await onSave(items);
+        setOriginalItems(items);
+        setMovedItems(new Set());
+        setHasChanges(false);
+        setResetKey(prev => prev + 1);
+    };
+    const updateItems = (newItems) => {
+        setItems(newItems);
+        setOriginalItems(newItems); // Keep original items in sync
+        setHasChanges(true);
+    };
+    const handleDiscard = () => {
+        setItems(originalItems);
+        setMovedItems(new Set());
+        setHasChanges(false);
+        setResetKey(prev => prev + 1);
+    };
+    return {
+        items,
+        setItems: updateItems,
+        handleReorder,
+        handleSave,
+        handleDiscard,
+        addItem,
+        movedItems,
+        removeItem,
+        hasChanges,
+        resetKey,
+    };
+}
+
 /**
  * A table with expandable row groups.
  * @param props The data to display
@@ -1518,7 +2025,7 @@ const CwTableGrouped = props => {
 function CwFileUpload(fileUploadProps) {
     const [previewURL, setPreviewURL] = useState("");
     const [error, setError] = useState(null);
-    const [selectedFileName, setSelectedFileName] = useState("");
+    const [_selectedFileName, setSelectedFileName] = useState("");
     const [_currentHexContent, setCurrentHexContent] = useState("");
     useEffect(() => {
         // If there is hexadecimal preview content, set the Preview URL
@@ -1530,36 +2037,185 @@ function CwFileUpload(fileUploadProps) {
         const file = event.target.files?.[0];
         setSelectedFileName(file?.name ?? "");
         if (file) {
-            if (!file.type.startsWith(fileUploadProps.accept)) {
+            const allowedExts = fileUploadProps.accept.split(',').map(ext => ext.trim().replace('.', '').toLowerCase());
+            const fileExt = file.name.split('.').pop()?.toLowerCase() ?? "";
+            if (!allowedExts.includes(fileExt)) {
                 setError(`Invalid file type. Only ${fileUploadProps.acceptString} files are allowed.`);
                 setPreviewURL("");
+                return;
             }
-            else {
-                setError(null);
-                const reader = new FileReader();
-                reader.onloadend = () => {
-                    if (typeof reader.result === "string") {
-                        const hexContent = arrayBufferToHex(reader.result);
-                        setCurrentHexContent(hexContent);
-                        setPreviewURL(reader.result);
-                        setCurrentHexContent(arrayBufferToHex(reader.result));
-                        // Llama a la función para guardar el contenido hexadecimal
-                        fileUploadProps.onSaveHexContent(arrayBufferToHex(reader.result));
-                    }
+            setError(null);
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                if (typeof reader.result === "string") {
+                    const hexContent = arrayBufferToHex(reader.result);
+                    setCurrentHexContent(hexContent);
+                    setPreviewURL(reader.result);
+                    setCurrentHexContent(arrayBufferToHex(reader.result));
+                    // Call function to store hexadecimal content
+                    fileUploadProps.onSaveHexContent(arrayBufferToHex(reader.result));
+                }
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+    // Function to convert the image buffer into hexadecimal content
+    const arrayBufferToHex = (dataUrl) => {
+        // Decodes the base64 of the URL data
+        const base64 = dataUrl.split(",")[1];
+        const binary = atob(base64);
+        let hex = "";
+        for (let i = 0; i < binary.length; i++) {
+            hex += binary.charCodeAt(i).toString(16).padStart(2, "0");
+        }
+        return hex;
+    };
+    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"};
+
+function CwFileUploadMultiple(fileUploadProps) {
+    const fileInputRef = useRef(null);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const getFileExtension = (filename) => {
+        return filename.split('.').pop()?.toUpperCase() || '';
+    };
+    const validateFile = (file) => {
+        // Validate the size of the file
+        if (fileUploadProps.maxFileSize) {
+            const fileSizeInMB = file.size / (1024 * 1024);
+            if (fileSizeInMB > fileUploadProps.maxFileSize) {
+                return {
+                    isValid: false,
+                    error: `File "${file.name}" is too large. Maximum size allowed is ${fileUploadProps.maxFileSize}MB.`
                 };
-                reader.readAsDataURL(file);
             }
         }
+        // Validate file type by extension (based in accept)
+        if (fileUploadProps.accept) {
+            const acceptedExtensions = fileUploadProps.accept.split(',').map(ext => ext.trim().toLowerCase());
+            const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
+            const isExtensionValid = acceptedExtensions.some(ext => {
+                if (ext.startsWith('.')) {
+                    return ext === fileExtension;
+                }
+                return false;
+            });
+            if (!isExtensionValid) {
+                return {
+                    isValid: false,
+                    error: `File "${file.name}" has an invalid format. Allowed formats: ${fileUploadProps.accept}`
+                };
+            }
+        }
+        // Validate MIME type if specified
+        if (fileUploadProps.allowedTypes && fileUploadProps.allowedTypes.length > 0) {
+            const isMimeTypeValid = fileUploadProps.allowedTypes.includes(file.type);
+            if (!isMimeTypeValid) {
+                return {
+                    isValid: false,
+                    error: `File "${file.name}" has an invalid MIME type. Allowed types: ${fileUploadProps.allowedTypes.join(', ')}`
+                };
+            }
+        }
+        return { isValid: true };
+    };
+    const processFiles = (files, existingFiles = []) => {
+        const fileArray = Array.from(files);
+        const validFiles = [...existingFiles]; // Start with existing files
+        const errors = [];
+        for (const file of fileArray) {
+            // Check if the file already exists (by name and size)
+            const isDuplicate = existingFiles.some(existingFile => existingFile.name === file.name && existingFile.size === file.size);
+            if (isDuplicate) {
+                errors.push(`File "${file.name}" is already selected.`);
+                continue;
+            }
+            const validation = validateFile(file);
+            if (!validation.isValid) {
+                errors.push(validation.error);
+                continue;
+            }
+            validFiles.push(file);
+        }
+        // Show errors if any
+        if (errors.length > 0) {
+            if (fileUploadProps.onError) {
+                fileUploadProps.onError(errors.join('\n'));
+            }
+            else {
+                console.error(errors.join('\n'));
+                alert(errors.join('\n')); // Fallback if there is no onError
+            }
+        }
+        // If not multiple, only take the first valid file (replace)
+        if (!fileUploadProps.multiple && validFiles.length > 1) {
+            return [validFiles[validFiles.length - 1]]; // Take the last file added
+        }
+        return validFiles;
     };
-    // Function to convert the image buffer into hexadecimal content
-    const arrayBufferToHex = (buffer) => {
-        const bytes = new Uint8Array(buffer.length);
-        for (let i = 0; i < buffer.length; i++) {
-            bytes[i] = buffer.charCodeAt(i);
+    const updateFileInput = (files) => {
+        // Create FileList with all files
+        const dataTransfer = new DataTransfer();
+        files.forEach(file => dataTransfer.items.add(file));
+        if (fileInputRef.current) {
+            fileInputRef.current.files = dataTransfer.files;
         }
-        return globalThis.Buffer.from(bytes).toString("hex");
+        if (fileUploadProps.onSelect) {
+            fileUploadProps.onSelect(dataTransfer.files);
+        }
+    };
+    const handleFileSelect = (event) => {
+        const files = event.target.files;
+        if (files && files.length > 0) {
+            const updatedFiles = processFiles(files, selectedFiles);
+            if (updatedFiles.length > selectedFiles.length || !fileUploadProps.multiple) {
+                setSelectedFiles(updatedFiles);
+                updateFileInput(updatedFiles);
+            }
+            else {
+                // Clear input if no new valid files were added
+                if (fileInputRef.current) {
+                    fileInputRef.current.value = '';
+                }
+            }
+        }
+    };
+    const removeFile = (indexToRemove) => {
+        const newFiles = selectedFiles.filter((_, index) => index !== indexToRemove);
+        setSelectedFiles(newFiles);
+        updateFileInput(newFiles);
     };
-    return (jsxs("div", { children: [previewURL && (jsx("div", { className: "row", children: jsx("img", { src: previewURL, alt: "Preview", style: { maxWidth: "200px", maxHeight: "200px" } }) })), jsx("div", { className: "row", children: jsx("input", { type: "file", accept: fileUploadProps.accept, value: selectedFileName, readOnly: true, placeholder: "No file selected...", onChange: handleFileChange }) }), 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}`] }) })] }));
+    const removeAllFiles = () => {
+        setSelectedFiles([]);
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+        if (fileUploadProps.onSelect) {
+            fileUploadProps.onSelect(null);
+        }
+    };
+    const handleButtonClick = () => {
+        fileInputRef.current?.click();
+    };
+    const handleDragOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const files = event.dataTransfer.files;
+        if (files && files.length > 0) {
+            const updatedFiles = processFiles(files, selectedFiles);
+            if (updatedFiles.length > selectedFiles.length || !fileUploadProps.multiple) {
+                setSelectedFiles(updatedFiles);
+                updateFileInput(updatedFiles);
+            }
+        }
+    };
+    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 }))] }))] }));
 }
 
 function CwInput(CwInputProps) {
@@ -1602,6 +2258,355 @@ 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"};
+
+const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }) => {
+    const [rgb, setRgb] = useState({ r: 255, g: 255, b: 255 });
+    const [hsv, setHsv] = useState({ h: 0, s: 0, v: 100 });
+    const [hexColor, setHexColor] = useState(initialColor || '#FFFFFF');
+    const [initialized, setInitialized] = useState(false);
+    const [inputMode, setInputMode] = useState('hex');
+    // Prevent infinite update loops
+    const isUpdatingRef = useRef(false);
+    const hueBarRef = useRef(null);
+    const colorAreaRef = useRef(null);
+    // Convert HSV to RGB
+    const hsvToRgb = (h, s, v) => {
+        h = h / 360;
+        s = s / 100;
+        v = v / 100;
+        let r = 0, g = 0, b = 0;
+        if (s === 0) {
+            r = g = b = v;
+        }
+        else {
+            const i = Math.floor(h * 6);
+            const f = h * 6 - i;
+            const p = v * (1 - s);
+            const q = v * (1 - f * s);
+            const t = v * (1 - (1 - f) * s);
+            switch (i % 6) {
+                case 0:
+                    r = v;
+                    g = t;
+                    b = p;
+                    break;
+                case 1:
+                    r = q;
+                    g = v;
+                    b = p;
+                    break;
+                case 2:
+                    r = p;
+                    g = v;
+                    b = t;
+                    break;
+                case 3:
+                    r = p;
+                    g = q;
+                    b = v;
+                    break;
+                case 4:
+                    r = t;
+                    g = p;
+                    b = v;
+                    break;
+                case 5:
+                    r = v;
+                    g = p;
+                    b = q;
+                    break;
+            }
+        }
+        return {
+            r: Math.round(r * 255),
+            g: Math.round(g * 255),
+            b: Math.round(b * 255)
+        };
+    };
+    // Convert RGB to HSV
+    const rgbToHsv = (r, g, b) => {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h = 0;
+        const v = max;
+        const d = max - min;
+        const s = max === 0 ? 0 : d / max;
+        if (max === min) {
+            h = 0;
+        }
+        else {
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h /= 6;
+        }
+        return {
+            h: Math.round(h * 360),
+            s: Math.round(s * 100),
+            v: Math.round(v * 100)
+        };
+    };
+    // Convert RGB to HEX
+    const rgbToHex = (r, g, b) => {
+        return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase();
+    };
+    // Initialize color values from initial color prop
+    useEffect(() => {
+        if (!initialized && initialColor) {
+            const hexToRgb = (hex) => {
+                const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+                return result ? {
+                    r: parseInt(result[1], 16),
+                    g: parseInt(result[2], 16),
+                    b: parseInt(result[3], 16)
+                } : { r: 255, g: 255, b: 255 };
+            };
+            const initialRgb = hexToRgb(initialColor);
+            setRgb(initialRgb);
+            setHexColor(initialColor);
+            const initialHsv = rgbToHsv(initialRgb.r, initialRgb.g, initialRgb.b);
+            setHsv(initialHsv);
+            setInitialized(true);
+        }
+    }, [initialColor, initialized]);
+    // Update color state and notify parent component of changes
+    const updateColorState = useCallback((newRgb, newHsv) => {
+        if (isUpdatingRef.current)
+            return;
+        isUpdatingRef.current = true;
+        // Update RGB and HSV
+        setRgb(newRgb);
+        setHsv(newHsv);
+        // Calculate and update HEX
+        const newHex = rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+        setHexColor(newHex);
+        // Notify changes after render cycle
+        requestAnimationFrame(() => {
+            onChange(newHex, newRgb, newHsv);
+            isUpdatingRef.current = false;
+        });
+    }, [onChange]);
+    const handleRgbChange = (e) => {
+        const { name, value } = e.target;
+        const numValue = Math.min(255, Math.max(0, parseInt(value, 10) || 0));
+        const newRgb = { ...rgb, [name]: numValue };
+        const newHsv = rgbToHsv(newRgb.r, newRgb.g, newRgb.b);
+        updateColorState(newRgb, newHsv);
+    };
+    const toggleInputMode = () => {
+        setInputMode(inputMode === 'hex' ? 'rgb' : 'hex');
+    };
+    const handleHexChange = (e) => {
+        const { value } = e.target;
+        setHexColor(value);
+        // Validate and convert HEX to RGB
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(value);
+        if (result) {
+            const newRgb = {
+                r: parseInt(result[1], 16),
+                g: parseInt(result[2], 16),
+                b: parseInt(result[3], 16)
+            };
+            const newHsv = rgbToHsv(newRgb.r, newRgb.g, newRgb.b);
+            // Update RGB and HSV without triggering full cycle
+            setRgb(newRgb);
+            setHsv(newHsv);
+            // Notify changes
+            requestAnimationFrame(() => {
+                onChange(value, newRgb, newHsv);
+            });
+        }
+    };
+    // Handle hue bar click
+    const handleHueBarClick = (e) => {
+        if (!hueBarRef.current)
+            return;
+        const rect = hueBarRef.current.getBoundingClientRect();
+        const height = rect.height;
+        const y = e.clientY - rect.top;
+        // Calculate hue value based on vertical position (0-360)
+        const newHue = Math.round(360 * (1 - Math.min(1, Math.max(0, y / height))));
+        const newHsv = { ...hsv, h: newHue };
+        const newRgb = hsvToRgb(newHue, hsv.s, hsv.v);
+        updateColorState(newRgb, newHsv);
+    };
+    // Handle color area click (saturation/value)
+    const handleColorAreaClick = (e) => {
+        if (!colorAreaRef.current)
+            return;
+        const rect = colorAreaRef.current.getBoundingClientRect();
+        const width = rect.width;
+        const height = rect.height;
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        // Calculate saturation and value based on position
+        const newSaturation = Math.round(100 * Math.min(1, Math.max(0, x / width)));
+        const newValue = Math.round(100 * (1 - Math.min(1, Math.max(0, y / height))));
+        const newHsv = { ...hsv, s: newSaturation, v: newValue };
+        const newRgb = hsvToRgb(hsv.h, newSaturation, newValue);
+        updateColorState(newRgb, newHsv);
+    };
+    // 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: {
+                                    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"};
+
+const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, width = '4rem', height = '2rem' }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const DROPDOWN_WIDTH = 280;
+    const DROPDOWN_HEIGHT = 250;
+    const MARGIN = 8;
+    // Calculate dropdown position
+    const dropdownStyle = useMemo(() => {
+        if (!isOpen || !containerRef.current) {
+            return { display: 'none' };
+        }
+        const rect = containerRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Calculate initial positions
+        let top = rect.bottom + MARGIN;
+        let left = rect.left;
+        // Adjust horizontal position if needed
+        if (left + DROPDOWN_WIDTH > viewportWidth - MARGIN) {
+            // Try to align with right edge of trigger
+            left = rect.right - DROPDOWN_WIDTH;
+            // If still out of bounds, stick to right edge of viewport
+            if (left < MARGIN) {
+                left = viewportWidth - DROPDOWN_WIDTH - MARGIN;
+            }
+        }
+        // Adjust vertical position if needed
+        if (top + DROPDOWN_HEIGHT > viewportHeight - MARGIN) {
+            // Try to show above the trigger
+            const topPosition = rect.top - DROPDOWN_HEIGHT - MARGIN;
+            // Only use top position if there's enough space
+            if (topPosition > MARGIN) {
+                top = topPosition;
+            }
+            else {
+                // Keep at bottom but ensure some visibility
+                top = Math.min(top, viewportHeight - DROPDOWN_HEIGHT - MARGIN);
+            }
+        }
+        return {
+            position: 'fixed',
+            top: `${Math.max(MARGIN, top)}px`,
+            left: `${Math.max(MARGIN, left)}px`,
+            zIndex: 1000,
+            width: `${DROPDOWN_WIDTH}px`
+        };
+    }, [isOpen]);
+    const handleToggle = () => {
+        if (disabled)
+            return;
+        setIsOpen(prev => !prev);
+    };
+    // Recalculate position on scroll/resize
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handlePositionUpdate = () => {
+            // Force re-render to recalculate position
+            setIsOpen(false);
+            requestAnimationFrame(() => setIsOpen(true));
+        };
+        // Debounced handlers
+        let resizeTimeout;
+        let scrollTimeout;
+        const handleResize = () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(handlePositionUpdate, 100);
+        };
+        const handleScroll = () => {
+            clearTimeout(scrollTimeout);
+            scrollTimeout = setTimeout(handlePositionUpdate, 50);
+        };
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleScroll, true);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleScroll, true);
+            clearTimeout(resizeTimeout);
+            clearTimeout(scrollTimeout);
+        };
+    }, [isOpen]);
+    // Handle outside clicks and escape
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            // Check if click is outside both container and dropdown
+            if (containerRef.current &&
+                !containerRef.current.contains(target) &&
+                dropdownRef.current &&
+                !dropdownRef.current.contains(target)) {
+                setIsOpen(false);
+            }
+        };
+        const handleEscape = (event) => {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+                // Return focus to trigger
+                containerRef.current?.focus();
+            }
+        };
+        // Use capture phase for better event handling
+        document.addEventListener('click', handleClickOutside, true);
+        document.addEventListener('keydown', handleEscape);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isOpen]);
+    const handleColorChange = (color) => {
+        onChange(color);
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                handleToggle();
+                break;
+            case 'Escape':
+                if (isOpen) {
+                    e.preventDefault();
+                    setIsOpen(false);
+                }
+                break;
+        }
+    };
+    return (jsxs(Fragment, { children: [jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$9.selectColor} ${disabled ? styles$9.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)] }));
+};
+
 /**
  * Input for entering a string of text.
  * @remarks
@@ -1622,8 +2627,11 @@ function CwDigit(props) {
  * ```
  */
 function CwInputText(props) {
-    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = 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: props.type ?? "text", ...inputProps }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
+    const { alignProps, buttonProps, iconProps, labelProps, className, ...inputProps } = 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 })] }) }));
 }
 
 /**
@@ -1651,7 +2659,7 @@ function CwInputNumber(CwInputNumberProps) {
         CwInputNumberProps.onChange(e.target.value);
     };
     return (jsxs("div", { className: CwInputNumberProps.labelPosition == "column"
-            ? "cw-flex-column"
+            ? "cw-flex-column cw-gap-none"
             : "cw-flex-row", children: [jsx("label", { className: CwInputNumberProps.disabled === true
                     ? CwInputNumberProps.labelClassName + " " + "cw_label_text cw_label_text_disabled"
                     : CwInputNumberProps.labelClassName + " " + "cw_label_text", children: CwInputNumberProps.labelName }), jsx("input", { id: CwInputNumberProps.id, type: "number", value: CwInputNumberProps.value, onChange: e => handleChange(e), className: CwInputNumberProps.className + " " + " cw-input-number", placeholder: CwInputNumberProps.placeholder == undefined ? "Write a number please" : CwInputNumberProps.placeholder, style: CwInputNumberProps.style, disabled: CwInputNumberProps.disabled, required: CwInputNumberProps.required, step: CwInputNumberProps.step, min: CwInputNumberProps.min, max: CwInputNumberProps.max })] }));
@@ -2089,7 +3097,7 @@ const CwImageArea = forwardRef((props, ref) => {
 });
 CwImageArea.displayName = "CwImageArea";
 
-var styles$7 = {"cw-weekday-selector":"cw-weekday-selector-module_cw-weekday-selector__Iz4GZ"};
+var styles$8 = {"cw-weekday-selector":"cw-weekday-selector-module_cw-weekday-selector__Iz4GZ"};
 
 /**
  * This class represents a week where days can be selected or unselected
@@ -2229,34 +3237,30 @@ const CwWeekdaySelector = ({ value = "", onChange, disabled = false }) => {
         setSelectedDays(newWeekdays);
         onChange?.(newWeekdays.toString());
     };
-    return (jsx("div", { className: styles$7["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$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))) }));
 };
 
 function CwCheckbox(CwCheckboxProps) {
     const handleChange = (e) => {
-        CwCheckboxProps.onChange(e.target.checked);
+        CwCheckboxProps.onChange?.(e.target.checked);
     };
+    const inputElement = (jsx("input", { id: CwCheckboxProps.id, type: "checkbox", checked: CwCheckboxProps.checked, onChange: e => handleChange(e), className: CwCheckboxProps.className ?? '', style: CwCheckboxProps.style, disabled: CwCheckboxProps.disabled }));
+    if (!CwCheckboxProps.labelName) {
+        return inputElement;
+    }
     return (jsxs("div", { className: CwCheckboxProps.labelPosition === "inline"
             ? "cw_checkboxContent cwellt_flex_row" + " " + CwCheckboxProps.classNameContainer
             : CwCheckboxProps.labelPosition === "column"
                 ? "cw_checkboxContent cwellt_flex_column" + " " + CwCheckboxProps.classNameContainer
-                : "cw_checkboxContent cwellt_flex_row" + " " + CwCheckboxProps.classNameContainer, style: CwCheckboxProps.styleContainer, children: [jsx("input", { id: CwCheckboxProps.id, type: "checkbox", checked: CwCheckboxProps.checked, onChange: e => handleChange(e), className: "cw_checkbox " + (CwCheckboxProps.className ?? ''), style: CwCheckboxProps.style, disabled: CwCheckboxProps.disabled }), CwCheckboxProps.labelName ? (jsx("label", { htmlFor: CwCheckboxProps.id, className: CwCheckboxProps.labelClassName, children: CwCheckboxProps.labelName })) : null] }));
+                : "cw_checkboxContent cwellt_flex_row" + " " + CwCheckboxProps.classNameContainer, style: CwCheckboxProps.styleContainer, children: [inputElement, CwCheckboxProps.labelName ? (jsx("label", { htmlFor: CwCheckboxProps.id, className: CwCheckboxProps.labelClassName, children: CwCheckboxProps.labelName })) : null] }));
 }
 
-/**
- * Toggle-styled checkbox
- * @remarks
- * ```txt
- *   ▁▁▁▁
- *  (  ⦿)
- *   ▔▔▔▔
- * ```
- * @example
- * <CwToggle checked/>
- */
 function CwToggle(props) {
-    const { labelProps, buttonProps, iconProps, ...inputProps } = props;
-    return (jsxs("div", { className: "cw-toggle", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsx("input", { className: "cw-toggle", type: "checkbox", ...inputProps }), buttonProps && jsx(CwButton, { ...buttonProps })] }));
+    const { labelProps, labelText, iconProps, alignment = "row", className, ...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", { 
+                    //data-color={color}
+                    type: "checkbox", ...inputProps })] }) }));
 }
 
 /**
@@ -2357,179 +3361,20 @@ function CwDropdownContainer(dropDownContainerProps) {
         };
     }, []);
     // #endregion
-    return (jsx("div", { className: dropDownContainerProps.dropDownState
-            ? "cwellt_flex cwellt_justify_center cwellt_align_items_center cwellt_p_rel" +
-                " " +
-                dropDownContainerProps.className
-            : "cwellt_display_none", onKeyDown: event_keyDown => onKeyPressDropDownContainer(event_keyDown), onMouseLeave: event_onMouseLeave => onMouseLeaveDropDownContainer(event_onMouseLeave), tabIndex: 0, children: jsx("div", { className: "cwellt_dropDownContainer", id: dropDownContainerProps.idDropDownContainer, ref: dropDownContainer_ref, children: jsx("div", { className: "cwellt_dropDown_listContainer", ref: dropDown_listContainer, children: dropDownContainerProps.children }) }) }));
-}
-
-function CwDropdownFilter(CwelltDropDownFilterProps) {
-    // * Initializing by default false
-    const isVisibleDropDownFilter = CwelltDropDownFilterProps.DropDownFilterState !== null &&
-        CwelltDropDownFilterProps.DropDownFilterState !== undefined
-        ? CwelltDropDownFilterProps.DropDownFilterState
-        : false;
-    // * Click on content item
-    const hideDropDown = () => {
-    };
-    return (jsxs("div", { id: CwelltDropDownFilterProps.IdContent, className: CwelltDropDownFilterProps.ContentClassName + " " + "cwelltDropDownFilterContent", onClick: hideDropDown, style: CwelltDropDownFilterProps.StyleContent, children: [CwelltDropDownFilterProps.children, jsx("div", { className: isVisibleDropDownFilter
-                    ? // * custom className
-                        CwelltDropDownFilterProps.DropDownClassName + " " + "cwelltDropDownFilter"
-                    : // * custom className
-                        CwelltDropDownFilterProps.DropDownClassName + " " + "cwellt_display_none", style: CwelltDropDownFilterProps.StyleDropDownFilter, onMouseLeave: CwelltDropDownFilterProps.onMouseLeave, id: CwelltDropDownFilterProps.idDropDownFilter, children: jsx("div", { className: "cwelltDrop_filterItem", children: CwelltDropDownFilterProps?.DataSourceDropDownItem?.map(indexItem => {
-                        return (jsx("span", { id: indexItem.IdDropDown_filter, className: "cwelltDropDownItem", children: indexItem.dropDownFilter_desc }));
-                    }) }) })] }));
-}
-
-function CwDropdownNavigation(CwelltDropDownNavigationProps) {
-    const [isButtonExpanded, setButtonExpanded] = useState(false);
-    const [isShowDropDownFilter, setShowDropDownFilter] = useState(false);
-    const buttonDropDownFilter = () => {
-        setButtonExpanded(!isButtonExpanded);
-        setShowDropDownFilter(!isShowDropDownFilter);
-    };
-    const clickItemHideDropDownFilter = () => {
-        setShowDropDownFilter(false);
-    };
-    const clickSubItemHideDropDownsFilter = () => {
-        // * Main dropDown
-        setShowDropDownFilter(false);
-        // * Item with subMenu
-        setFilterItem_descExpanded(false);
-        // * Submenu dropDown
-        setShowSubMenu(false);
-    };
-    const [isShowSubMenu, setShowSubMenu] = useState(false);
-    const [isFilterItem_descExpanded, setFilterItem_descExpanded] = useState(false);
-    const cwelltSubMenu = () => {
-        setShowSubMenu(!isShowSubMenu);
-        setFilterItem_descExpanded(!isFilterItem_descExpanded);
-    };
-    const hideDropDownContent = () => {
-        // * DropDownFilterCrewControl
-        const dropDownFilterCrewControl = document.getElementById("DropDownFilterCrewControl");
-        // * onMouseLeave [ dropDownFilterCrewControl ]
-        dropDownFilterCrewControl?.addEventListener("mouseleave", () => {
-            // * button className
-            setButtonExpanded(false);
-            // * DropDownFilterCrewControl
-            setShowDropDownFilter(false); // todo: Add animation to high content
-            // * Item with subMenu
-            setFilterItem_descExpanded(false);
-            // * SubMenu
-            setShowSubMenu(false);
-        });
-    };
-    // List subMenu
-    const dataSubMenu = [
-        {
-            IdDropDown_filter: 1,
-            dropDownFilter_desc: (jsx("span", { className: CwelltDropDownNavigationProps.onShowAsignedActive + " " + "cwelltFilterItem_desc", onClick: () => {
-                    CwelltDropDownNavigationProps.onShowAsigned();
-                    clickSubItemHideDropDownsFilter();
-                }, children: "Show asigned" }))
-        },
-        {
-            IdDropDown_filter: 2,
-            dropDownFilter_desc: (jsx("span", { className: "cwelltFilterItem_desc", onClick: () => {
-                    CwelltDropDownNavigationProps.onShowHotel();
-                    clickSubItemHideDropDownsFilter();
-                }, children: "Show hotel" }))
-        },
-        {
-            IdDropDown_filter: 3,
-            dropDownFilter_desc: (jsx("span", { className: "cwelltFilterItem_desc", onClick: () => {
-                    CwelltDropDownNavigationProps.onShowWishes();
-                    clickSubItemHideDropDownsFilter();
-                }, children: "Show wishes" }))
-        },
-        {
-            IdDropDown_filter: 4,
-            dropDownFilter_desc: jsx("span", { className: "cwelltLineDivider" })
-        },
-        {
-            IdDropDown_filter: 5,
-            dropDownFilter_desc: (jsx("span", { className: "cwelltFilterItem_desc", onClick: () => {
-                    CwelltDropDownNavigationProps.onShowTrainingAlerts();
-                    clickSubItemHideDropDownsFilter();
-                }, children: "Show training alerts" }))
-        },
-        {
-            IdDropDown_filter: 6,
-            dropDownFilter_desc: jsx("span", { className: "cwelltLineDivider" })
-        },
-        {
-            IdDropDown_filter: 7,
-            dropDownFilter_desc: (jsx("span", { className: "cwelltFilterItem_desc", onClick: () => {
-                    CwelltDropDownNavigationProps.onSmartFilteringFlight();
-                    clickSubItemHideDropDownsFilter();
-                }, children: "Smart filtering flight" }))
-        },
-        {
-            IdDropDown_filter: 7,
-            dropDownFilter_desc: (jsx("span", { className: "cwelltFilterItem_desc", onClick: () => {
-                    CwelltDropDownNavigationProps.onSmartFilteringEmployee();
-                    clickSubItemHideDropDownsFilter();
-                }, children: "Smart filtering employee" }))
-        },
-        {
-            IdDropDown_filter: 8,
-            dropDownFilter_desc: jsx("span", { className: "cwelltLineDivider" })
-        },
-        {
-            IdDropDown_filter: 9,
-            dropDownFilter_desc: (jsxs("div", { className: "cwelltDropDownContentForm cwellt_content_r_spaceBetween_center", children: [jsx("span", { children: "Flight rows" }), jsx(InputNumber, { className: "cwellt_inputdf cwellt_inputdf_number", min: 1, max: 10, style: { width: "4em", marginRight: ".5em" } })] }))
-        },
-        {
-            IdDropDown_filter: 10,
-            dropDownFilter_desc: (jsxs("div", { className: "cwelltDropDownContentForm cwellt_content_r_spaceBetween_center", children: [jsx("span", { children: "Employee rows" }), jsx(InputNumber, { className: "cwellt_inputdf cwellt_inputdf_number", min: 1, max: 10, style: { width: "4em", marginRight: ".5em" } })] }))
-        }
-    ];
-    // * DataSource items
-    const dataSourceItemDropDown = [
-        {
-            IdDropDown_filter: 1,
-            dropDownFilter_desc: (jsx("span", { className: "cwelltFilterItem_desc", onClick: () => {
-                    CwelltDropDownNavigationProps.onShowChanges;
-                    // clickItemHideDropDownFilter();
-                }, children: "Show changes" }))
-        },
-        {
-            IdDropDown_filter: 2,
-            dropDownFilter_desc: (jsx("span", { className: "cwelltFilterItem_desc", onClick: () => {
-                    CwelltDropDownNavigationProps.onShowVisibleChanges;
-                    clickItemHideDropDownFilter();
-                }, children: "Save visible changes" }))
-        },
-        {
-            IdDropDown_filter: 3,
-            dropDownFilter_desc: (jsx("span", { className: "cwelltFilterItem_desc", onClick: () => {
-                    CwelltDropDownNavigationProps.onShowSkip;
-                    clickItemHideDropDownFilter();
-                }, children: "Skip" }))
-        },
-        {
-            IdDropDown_filter: 4,
-            dropDownFilter_desc: (jsx("span", { className: "cwelltFilterItem_desc", onClick: () => {
-                    CwelltDropDownNavigationProps.onShowBulkDuties;
-                    clickItemHideDropDownFilter();
-                }, children: "BulkDuties" }))
-        },
-        // View options
-        {
-            IdDropDown_filter: 6,
-            dropDownFilter_desc: (jsxs("div", { style: { width: "100%" }, children: [jsx("span", { className: isFilterItem_descExpanded
-                            ? "cwelltFilterItem_desc FilterItem_descExpanded cwellt_justify_space_between"
-                            : "cwelltFilterItem_desc FilterItem_descCollapsed cwellt_justify_space_between", onClick: cwelltSubMenu, children: "Show options" }), jsx(CwDropdownFilter, { DropDownFilterState: isShowSubMenu, DataSourceDropDownItem: dataSubMenu, StyleContent: { position: "absolute", right: "13em", top: "-9.5em" }, StyleDropDownFilter: { width: "16.9375em" } })] }))
-        }
-    ];
-    return (jsx(CwDropdownFilter, { IdContent: "DropDownFilterCrewControl", DropDownFilterState: isShowDropDownFilter, DataSourceDropDownItem: dataSourceItemDropDown, ContentClassName: "TestClassNameContent", DropDownClassName: "TestClassNameDropDown", StyleContent: { zIndex: 1000 }, StyleDropDownFilter: { width: "13.75em", position: "absolute", left: "-10em" }, children: jsx("button", { className: isButtonExpanded
-                ? "cwellt_btn_act cwellt_btn_act_df cwellt_btn_Nbg cwellt_btnDropDownMenuExpanded"
-                : "cwellt_btn_act cwellt_btn_act_df cwellt_btn_Nbg cwellt_btnDropDownMenu", onClick: buttonDropDownFilter, onMouseLeave: hideDropDownContent }) }));
+    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 }) }) }));
+}
+
+function CwDropdownFilter(props) {
+    // Determine visibility state
+    const isVisible = props.DropDownFilterState ?? false;
+    // Generate CSS classes
+    const containerClassName = `cw-dropdown-filter ${props.isNested ? 'dropdown-nested' : ''}`.trim();
+    // Only apply inline styles for width override if provided
+    const inlineStyles = props.width ? { width: props.width } : undefined;
+    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: Option$1, OptGroup } = Select;
+const { Option, OptGroup } = Select;
 class MultiSelect extends React.Component {
     constructor(Props) {
         super(Props);
@@ -2622,7 +3467,7 @@ class MultiSelect extends React.Component {
                         ? "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$1, { 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))) }) }) }));
+                        : "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))) }) }) }));
     }
 }
 
@@ -2644,7 +3489,7 @@ function itemsToMultiFilterTags(items, nameKey, valueKey, category, primaryColor
 function CwHeadFilter(cwelltFilterTabMultiSelectProps) {
     // - Reference div content input search
     const headContent_ref = React.createRef();
-    const optionList = document.getElementsByClassName("cwelltOptionList");
+    const optionList = document.getElementsByClassName("cw-multiselect-option-list");
     const refContent = useRef(null);
     // - Hooks show clear button
     const [_isShowClearButton, setShowClearButton] = useState(false);
@@ -2691,6 +3536,11 @@ function CwHeadFilter(cwelltFilterTabMultiSelectProps) {
             }
         }
     };
+    const handleBlur = (event) => {
+        if (typeof cwelltFilterTabMultiSelectProps.onBlur === "function") {
+            cwelltFilterTabMultiSelectProps.onBlur(event);
+        }
+    };
     const clickOptionList = () => {
         if (optionList.length > 0) {
             Array.from(optionList).forEach(index => {
@@ -2710,11 +3560,7 @@ function CwHeadFilter(cwelltFilterTabMultiSelectProps) {
         };
     });
     //#endregion
-    return (jsxs("div", { className: cwelltFilterTabMultiSelectProps.className + " cwelltFilterTabContainer", style: cwelltFilterTabMultiSelectProps.style, id: cwelltFilterTabMultiSelectProps.Id, onMouseLeave: cwelltFilterTabMultiSelectProps.onMouseLeave, ref: refContent, children: [jsxs("div", { className: "cwellt_headFilterTab cwellt_flex cwellt_justify_flex_start cwellt_align_items_center cwellt_flex_wrap cwellt_p_rel", onClick: () => onClickHeaderFilterTab(), children: [jsx("span", { className: "cw-head-filter-search-icon cwellt_flex cwellt_justify_center cwellt_align_items_center" }), jsxs("div", { className: "headFilter_content cwellt_flex cwellt_justify_flex_start cwellt_align_items_center cwellt_flex_wrap", children: [jsx("div", { className: "headFilter_content_tags cwellt_flex cwellt_align_items_center cwellt_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), type: "search", className: "headFilter_inputSearch", onChange: event_onChangeInput => onChangeInputSearch(event_onChangeInput), placeholder: cwelltFilterTabMultiSelectProps.placeholder_desc, ref: headInputFitlerTab_ref }) })] }), jsx("span", { className: 
-                        // isShowClearButton
-                        // 	? "headClearIcon cwellt_flex cwellt_justify_center cwellt_align_items_center cwellt_p_abs"
-                        // 	:
-                        "headClearIcon", onClick: (e) => onClearInputValue(e) })] }), cwelltFilterTabMultiSelectProps.children] }));
+    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) {
@@ -2725,15 +3571,12 @@ function CwOptionList(optionListProps) {
     //#endregion
     //#region Hooks
     // - Hooks : selected optionList
-    const [isSelectedOptionList, setIsSelectedOptionList] = useState(optionListProps.isSelected || false);
+    // const [isSelectedOptionList, setIsSelectedOptionList] = useState(optionListProps.isSelected || false);
     //#endregion
     //#region Functions
-    const onSelectedOptionList = () => {
-        setIsSelectedOptionList(!isSelectedOptionList);
-    };
     const onClickSelectOptionList = (event_click) => {
         // - click of custom component
-        onSelectedOptionList();
+        // onSelectedOptionList();
         // - click of property interface
         optionListProps.onClick(event_click);
     };
@@ -2746,26 +3589,19 @@ function CwOptionList(optionListProps) {
     //#region Useffect
     useEffect(() => {
         window.addEventListener("keypress", onKeyPressOptionList);
-        // selected option list
-        setIsSelectedOptionList(optionListProps.isSelected || false);
         return () => {
             window.removeEventListener("keypress", onKeyPressOptionList);
         };
-    }, [optionListProps.isSelected, isSelectedOptionList]);
+    }, []);
     //#endregion
-    return (jsxs("div", { className: isSelectedOptionList
-            ? optionListProps.className +
-                " cwelltOptionList cwelltOptionList_active cwellt_flex cwellt_justify_space_between cwellt_align_items_center"
-            : optionListProps.className +
-                "  cwelltOptionList cwellt_flex cwellt_justify_space_between cwellt_align_items_center", 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", { className: "cwelltOptionList_desc cwellt_flex cwellt_align_items_center", htmlFor: optionListProps.idOptionList, children: optionListProps.children }), jsx("input", { type: "checkbox", className: "cwellt_display_none", value: optionListProps.value, ref: optionListSelected_input_ref, id: optionListProps.idOptionList, onClick: optionListProps.onChangeOptionList }), jsx("span", { className: isSelectedOptionList
-                    ? "cwelltOptionList_desc_icon cwellt_flex cwellt_justify_center cwellt_align_items_center"
-                    : "cwelltOptionList_desc_icon cwellt_flex cwellt_justify_center cwellt_align_items_center" })] }));
+    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);
@@ -2776,7 +3612,7 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
     // 	color: string;
     // }[]>([]);
     // Hook active label filter item tab [ All ]
-    const [isActive_fitler_item_all, setActive_filter_item_all] = useState(true);
+    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
@@ -2788,31 +3624,31 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
     const clearValue = (e_clear) => {
         // List items to remove class and be visible
         // Item searched
-        const itemSearched = document.getElementsByClassName("cwellt_show_itemSearched");
+        const itemSearched = document.getElementsByClassName("item-search");
         // Item hidden
-        const itemHidden = document.getElementsByClassName("cwellt_itemHidden");
+        const itemHidden = document.getElementsByClassName("hidden-item");
         // Item searcched
         if (itemSearched.length > 0) {
             for (let i = 0; i <= itemSearched.length; i++) {
-                itemSearched[i]?.classList.remove("cwellt_show_itemSearched");
+                itemSearched[i]?.classList.remove("item-search");
             }
         }
         // Item hidden
         if (itemHidden.length > 0) {
             for (let i = 0; i <= itemHidden.length; i++) {
-                itemHidden[i]?.classList.remove("cwellt_itemHidden");
+                itemHidden[i]?.classList.remove("hidden-item");
             }
         }
         // optionList [ disbaled active className according their text ]
         const parent = e_clear.currentTarget.parentElement.parentElement;
-        const optionActive = parent.getElementsByClassName("cwelltOptionList_active");
+        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("cwelltOptionList_active");
+                optionActive_array.classList.remove("option-active");
             });
         }
     };
@@ -2821,26 +3657,26 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
     const onChangeSearch = (e_onchange) => {
         const filterText_lowerCase = e_onchange.currentTarget.value.toLowerCase();
         // Tags for filtering
-        const listTag = document.getElementsByClassName("cwelltOptionList");
+        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("cwellt_show_itemSearched");
+                    listTag[i].classList.add("item-search");
                 }
                 else {
-                    listTag[i].classList.add("cwellt_itemHidden");
+                    listTag[i].classList.add("hidden-item");
                 }
                 // remove written
                 if (!textTagValue?.toLowerCase().includes(filterText_lowerCase)) {
-                    listTag[i].classList.remove("cwellt_show_itemSearched");
+                    listTag[i].classList.remove("item-search");
                 }
                 else {
-                    listTag[i].classList.remove("cwellt_itemHidden");
+                    listTag[i].classList.remove("hidden-item");
                 }
                 if (filterText_lowerCase === "") {
-                    listTag[i].classList.remove("cwellt_show_itemSearched");
+                    listTag[i].classList.remove("item-search");
                 }
             }
         }
@@ -2854,7 +3690,7 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
     const onKeyPressSearch = (event_onKeypress) => {
         //#region Variables
         const keyPressed = event_onKeypress.key;
-        const optionSearched = document.getElementsByClassName("cwellt_show_itemSearched");
+        const optionSearched = document.getElementsByClassName("item-search");
         //#endregion
         // first item selected or same text
         const optionArray = Array.from(optionSearched);
@@ -2869,12 +3705,12 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
                     handleClickTag(element);
                 }
             }
-            const optionList_item_hidden = document.getElementsByClassName("cwellt_itemHidden");
+            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("cwellt_itemHidden")) {
-                        optionList_hidden_array.classList.remove("cwellt_itemHidden");
+                    if (optionList_hidden_array.classList.contains("hidden-item")) {
+                        optionList_hidden_array.classList.remove("hidden-item");
                     }
                 });
             }
@@ -2896,7 +3732,7 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
         active;
     }
     const handleClickTag = (e) => {
-        const preList = CwelltCustomFilterTabProps.selectedListsItems;
+        const preList = CwelltCustomFilterTabProps.selectedListsItems || [];
         const valueIds = [];
         const resultList = preList?.map(s => {
             const item = new SelectListTest();
@@ -2935,36 +3771,35 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
         // 	[a.key]: !prevSelectedStates[a.key],
         // }));
         // clear filter by text after clicked in option list
-        const optionList_item_hidden = document.getElementsByClassName("cwellt_itemHidden");
+        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("cwellt_itemHidden")) {
-                    optionList_hidden_array.classList.remove("cwellt_itemHidden");
+                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("cwellt_TagActive");
-        const optionList = document.getElementsByClassName("cwelltOptionList");
+        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 => {
-                const tagActive_array = index;
+            Array.from(tagActive).forEach(_index => {
                 Array.from(optionList).forEach(index => {
                     const optionList_array = index;
-                    if (tagActive_array.innerText === e.description && optionList_array.innerText === e.description) {
-                        // remove className optionlist active loaded
-                        optionList_array.classList.remove("cwelltOptionList_active");
+                    const optionId = optionList_array.getAttribute('data-id');
+                    if (optionId === (e.type + "_" + e.id)) {
+                        optionList_array.classList.remove("option-active");
                     }
                 });
             });
         }
-        const optionList_desc = document.getElementsByClassName("cwelltOptionList_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("cwelltOptionList_active");
+                    optionList_desc_array.classList.remove("option-active");
                 }
             });
         }
@@ -2999,12 +3834,13 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
         // 	...prevSelectedStates,
         // 	[a.key]: false[a.key],
         // }));
-        const optionList_active = document.getElementsByClassName("cwelltOptionList_active");
+        const optionList_active = document.getElementsByClassName("option-active");
         if (optionList_active.length > 0) {
             Array.from(optionList_active).forEach(index => {
                 const optionList_active_array = index;
-                if (optionList_active_array.innerText === e.description) {
-                    optionList_active_array.classList.remove("cwelltOptionList_active");
+                const optionId = optionList_active_array.getAttribute('data-id');
+                if (optionId === (e.type + "_" + e.id)) {
+                    optionList_active_array.classList.remove("option-active");
                 }
             });
         }
@@ -3013,8 +3849,8 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
     //#region DropDownContainer [ properties functions ]
     //#region onKeyDownDropDownContainer [  press ESC dropDownContainer dissapear - ArrowUp && ArrowDown ]
     const onKeyDownDropDownContent = (event_onKeyDown) => {
-        const items = document.querySelectorAll(".cwelltOptionList");
-        let optionIndex = Array.from(items).findIndex(item => item.classList.contains("Test_active"));
+        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);
@@ -3035,9 +3871,9 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
         }
     };
     const removeHighlight = () => {
-        const highlightedItem = document.querySelector(".Test_active");
+        const highlightedItem = document.querySelector(".keyboard-focus");
         if (highlightedItem) {
-            highlightedItem.classList.remove("Test_active");
+            highlightedItem.classList.remove("keyboard-focus");
         }
     };
     const getNextIndex = (currentIndex, length) => {
@@ -3047,57 +3883,46 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
         return (currentIndex - 1 + length) % length;
     };
     const highlightOption = (index) => {
-        const items = document.querySelectorAll(".cwelltOptionList");
+        const items = document.querySelectorAll(".cw-multiselect-option-list");
         const item = items[index];
-        item.classList.add("Test_active");
+        item.classList.add("keyboard-focus");
     };
     //#endregion
-    //#region onMouseLeave_dropDownContainer [ mouseleave of droDownContainer dissapear others axis like up and horizontal way if the user does not hover the dropDown container ]
-    const onMouseLeave_dropDownContainer = (event_mouseLeave) => {
-        // Get position of element inside a div [ height ]
-        const pos = event_mouseLeave.currentTarget.getBoundingClientRect();
-        // Get position of screen
-        const posCursor_y = event_mouseLeave.clientY;
-        // current item
-        const currentItem = event_mouseLeave.currentTarget;
-        // cwSelectDropDownContainer_active
-        const dropDownContainer_active = currentItem.getElementsByClassName("cwSelectDropDownContainer_active");
-        // Evaluating if the position of the cursor is higher than the positon of component and if dropDownContainer state is true keep state of dropDown
-        if (posCursor_y > pos.bottom && isShowDropDownfiltered === true) {
-            setShowDropDownfiltered(true);
-            // Mouse leave of drpoDownContainer
-            if (dropDownContainer_active.length > 0) {
-                Array.from(dropDownContainer_active).forEach(index => {
-                    const dropDown_active_array = index;
-                    // Adding setShowDropDownfiltered ( false ) to hide dropDownContainer
-                    dropDown_active_array.addEventListener("mouseleave", () => {
-                        setShowDropDownfiltered(false);
-                    });
-                });
+    //#region onMouseLeave
+    const handleInputBlur = () => {
+        setTimeout(() => {
+            if (!containerRef.current?.contains(document.activeElement)) {
+                setShowDropDownfiltered(false);
             }
-        }
-        else {
-            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
-    //#endregion
-    // clikc filert item button
+    // 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("content_all");
+        const contentAll = document.getElementsByClassName("multiselect-tag-group");
         if (contentAll.length > 0) {
             Array.from(contentAll).forEach(index => {
                 const contentAll_array = index;
-                contentAll_array.classList.add("cwellt_contentHide_item");
+                contentAll_array.classList.add("hidden-group");
             });
         }
         if (contentItems.length > 0) {
             Array.from(contentItems).forEach(index => {
                 const contentItems_array = index;
-                contentItems_array.classList.add("cwellt_contentShow_item");
-                contentItems_array.classList.remove("cwellt_contentHide_item");
+                contentItems_array.classList.remove("hidden-group");
             });
         }
         // Adding custom className acitive
@@ -3107,105 +3932,65 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
     };
     const showAllItem = () => {
         //let currentBtn = e.currentTarget;
-        const contentAll = document.getElementsByClassName("content_all");
+        const contentAll = document.getElementsByClassName("multiselect-tag-group");
         if (contentAll.length > 0) {
             Array.from(contentAll).forEach(index => {
                 const contentAll_array = index;
-                contentAll_array.classList.remove("cwellt_contentHide_item");
-                contentAll_array.classList.remove("cwellt_contentShow_item");
+                contentAll_array.classList.remove("hidden-group");
                 // active className - all
                 setActive_filter_item_all(true);
-                // removing active className [ cwelltFilter_item_active ]
                 setActive_filter_item("");
             });
         }
     };
     //#endregion
-    const loadadData = (s, index) => {
-        const optionList = document.getElementsByClassName("cwelltOptionList");
-        if (optionList.length > 0) {
-            Array.from(optionList).forEach(index => {
-                const optionList_array = index;
-                if (s.description === optionList_array.innerText) {
-                    optionList_array.classList.add("cwelltOptionList_active");
-                }
+    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");
+                    }
+                });
             });
         }
-    };
-    // #region [ Select items loaded previosly from database ]
-    useEffect(() => { }, []);
-    // #endregion
-    // #region  [ convert color tone of background ]
-    const convertHexToRgb_custom_tag = (bg_color_custom_tag) => {
-        bg_color_custom_tag = (bg_color_custom_tag || "").replace("#", "");
-        const red_color_custom_tag = parseInt(bg_color_custom_tag.substring(0, 2), 16);
-        const green_color_custom_tag = parseInt(bg_color_custom_tag.substring(2, 4), 16);
-        const blue_color_custom_tag = parseInt(bg_color_custom_tag.substring(4, 6), 16);
-        return "rgb(" + red_color_custom_tag + "," + green_color_custom_tag + "," + blue_color_custom_tag + ")";
-    };
-    // #endregion
-    return (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, onMouseLeave: (event_mouseLeave) => onMouseLeave_dropDownContainer(event_mouseLeave), className: CwelltCustomFilterTabProps.selectedListsItems?.length === 0
-            ? "cw-filter-tab-multi-select-show-icon"
-            : "cw-filter-tab-multi-select-hidden-icon", tagValueContent: jsx("div", { className: "cwellt_flex cwellt_flex_wrap", children: CwelltCustomFilterTabProps.selectedListsItems?.map((s, index) => {
-                loadadData(s);
-                const bgColor_custom_tag_selected_list = convertHexToRgb_custom_tag(s.color);
-                // Inicializa las variables con un valor por defecto de 0
-                let redBgColor_custom_tag_selected_list = 0;
-                let greenBgColor_custom_tag_selected_list = 0;
-                let blueBgColor_custom_tag_selected_list = 0;
-                const bgColor_custom_tag_array = bgColor_custom_tag_selected_list.match(/\d+/g);
-                if (bgColor_custom_tag_array && bgColor_custom_tag_array.length >= 3) {
-                    redBgColor_custom_tag_selected_list = parseInt(bgColor_custom_tag_array[0], 10);
-                    greenBgColor_custom_tag_selected_list = parseInt(bgColor_custom_tag_array[1], 10);
-                    blueBgColor_custom_tag_selected_list = parseInt(bgColor_custom_tag_array[2], 10);
-                }
-                const luminance = 0.299 * redBgColor_custom_tag_selected_list +
-                    0.587 * greenBgColor_custom_tag_selected_list +
-                    0.114 * blueBgColor_custom_tag_selected_list;
-                return s.type !== undefined ? (jsx("div", { id: "cwContent_tag", "data-id": s.type + "_" + s.id, className: "cwellt_flex cwellt_align_items_center", children: jsx(CwTag, { styleTag: {
-                            background: s.color
-                        }, styleTag_description: {
+    }, [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: luminance > 128 ? "#000000" : "#ffffff"
-                        }, idTag: s.type + "_" + s.id, closableTag: true, onClickClosableTag: () => closeTagHandle(s), className: "cwellt_TagActive", styleClosableButton: { color: luminance > 128 ? "#000000" : "#ffffff" }, children: s.description }) }, index)) : (jsx("div", {}));
-            }) }), children: jsx(CwDropdownContainer, { dropDownState: isShowDropDownfiltered, idDropDownContainer: CwelltCustomFilterTabProps.idDropDownContainer, onKeyDownDropDownContainer: (event_onKeyDown) => onKeyDownDropDownContent(event_onKeyDown), className: isShowDropDownfiltered ? "cwSelectDropDownContainer_active" : "", children: jsxs("div", { className: "cwellt_content_filtertab cwellt_content_listComp", children: [jsxs("div", { className: "cwellt_flex cwellt_contentFilter_list", children: [jsx("label", { className: isActive_fitler_item_all ? "cwelltFilter_item cwelltFilter_item_active_all" : "cwelltFilter_item", onClick: showAllItem, children: "ALL" }), CwelltCustomFilterTabProps.selectListsItems?.map((slArray, i) => (jsx("div", { className: "cwellt_flex cwFilter_itemContent", children: jsx("label", { className: isActive_filter_item === "content_" + i
-                                        ? "cwelltFilter_item cwelltFilter_item_active"
-                                        : "cwelltFilter_item", 
+                            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", { children: CwelltCustomFilterTabProps.selectListsItems?.map((slArray, i) => (jsx("div", { id: "content_" + i, className: "content_" + i + " content_all", children: jsx("div", { id: "content_" + i, className: "content_" + i + " content_item_option", ref: refOptionListContent, children: slArray.map(sl => {
-                                    const bgColor_custom_tag_select_list = convertHexToRgb_custom_tag(sl.color);
-                                    let redBgColor_custom_tag_select_list = 0;
-                                    let greenBgColor_appointment = 0;
-                                    let blueBgColor_custom_tag_select_list = 0;
-                                    const bgColor_custom_tag_select_list_array = bgColor_custom_tag_select_list.match(/\d+/g);
-                                    if (bgColor_custom_tag_select_list_array && bgColor_custom_tag_select_list_array.length >= 3) {
-                                        redBgColor_custom_tag_select_list = parseInt(bgColor_custom_tag_select_list_array[0], 10);
-                                        greenBgColor_appointment = parseInt(bgColor_custom_tag_select_list_array[1], 10);
-                                        blueBgColor_custom_tag_select_list = parseInt(bgColor_custom_tag_select_list_array[2], 10);
-                                    }
-                                    const luminance = 0.299 * redBgColor_custom_tag_select_list +
-                                        0.587 * greenBgColor_appointment +
-                                        0.114 * blueBgColor_custom_tag_select_list;
-                                    return (jsx(CwOptionList, { idOptionList: sl.type + "_" + sl.id, value: sl.type + "_" + sl.id, title: sl.description, onClick: () => handleClickTag(sl), isSelected: sl.active, children: jsx(CwTag, { styleTag: {
-                                                background: "#E0E0E0"
-                                            }, styleTag_description: {
+                                            : "" }, 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: luminance > 128 ? "#000000" : "#ffffff"
-                                            }, children: sl.description }) }, sl.type + "_" + sl.id));
-                                }) }) }, "_" + i))) })] }) }) }));
+                                                color: getContrastColor(sl.color),
+                                            }, closableTag: isSelected, children: sl.description }) }, sl.type + "_" + sl.id));
+                                }) }, "group" + i))) })] }) }) }) }));
 }
 
-var styles$6 = {"cw-multifilter-tag":"cw-multi-filter-tag-module_cw-multifilter-tag__Epda-"};
+var styles$7 = {"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$6["cw-multifilter-tag"], "data-selected": !!props.Selected, "data-removable": !!props.Removable, style: {
+    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",
@@ -3216,7 +4001,7 @@ const CwMultiFilterTag = 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" }) }))] }));
 };
 
-var styles$5 = {"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$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"};
 
 /**
  * A multiple filter selector, a MULTI-SELECT even. Allows users to select and filter items based on tags.
@@ -3436,7 +4221,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
         }
         else {
             const updatedTags = new Set(selectedTags).add(newTag);
-            onChangeSelectedTags?.(updatedTags);
+            onChangeSelectedTags(updatedTags);
             setInputTextValue("");
             //setFilteredTags(allTags);
         }
@@ -3450,7 +4235,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
             toDelete.Removable = false;
             updatedTags.delete(toDelete);
         }
-        onChangeSelectedTags?.(updatedTags);
+        onChangeSelectedTags(updatedTags);
     };
     useEffect(() => {
         // force to load all tags on first render
@@ -3462,9 +4247,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
             inputRef.current?.focus();
         }
     };
-    return (jsxs("form", { ref: componentRef, id: id, className: styles$5["cw-multi-filter"], style: style, onSubmit: (e) => {
+    return (jsxs("form", { ref: componentRef, id: id, className: styles$6["cw-multi-filter"], style: style, onSubmit: (e) => {
             e.preventDefault();
-        }, children: [jsxs("div", { onClick: handleDivClick, className: styles$5["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$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 => {
                                     switch (e.key) {
                                         case "Enter":
                                         case "Tab":
@@ -3484,8 +4269,8 @@ 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$5["cw-multi-filter-catalog-container"], "data-display-none": !isPanelOpen, children: [jsxs("nav", { children: [jsx("button", { style: selectedCategory === "All"
+                            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"
                                     ? {
                                         backgroundColor: "var(--cw-color-primary-container)",
                                         color: "var(--cw-color-primary)",
@@ -3512,10 +4297,117 @@ 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"};
+
+function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId: initialSelectedId = null }) {
+    const [expanded, setExpanded] = useState(new Set());
+    // const [selectedId, setSelectedId] = useState<string | number | null>(initialSelectedId);
+    const [selectedId, setSelectedId] = useState(null);
+    const [search, setSearch] = useState("");
+    // Function to find a node by ID in the tree
+    const findNodeById = (nodes, id) => {
+        for (const node of nodes) {
+            if (node.id.toString().toLowerCase() === id.toString().toLowerCase()) {
+                return node;
+            }
+            if (node.children) {
+                const found = findNodeById(node.children, id);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    };
+    // Function to expand all parent nodes of a specific node
+    const expandPathToNode = (nodes, targetId, path = []) => {
+        for (const node of nodes) {
+            const currentPath = [...path, node.id];
+            if (node.id.toString().toLowerCase() === targetId.toString().toLowerCase()) {
+                // We find the node, expand all nodes along the way
+                path.forEach(id => {
+                    setExpanded(prev => new Set(prev).add(id));
+                });
+                return true;
+            }
+            if (node.children) {
+                if (expandPathToNode(node.children, targetId, currentPath)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+    // Effect for handling the initial selection
+    useEffect(() => {
+        if (!selectedId && initialSelectedId && data.length > 0) {
+            const nodeToSelect = findNodeById(data, initialSelectedId);
+            if (nodeToSelect) {
+                setSelectedId(initialSelectedId);
+                // Expand the path to the selected node
+                expandPathToNode(data, initialSelectedId);
+                // Call the onSelect callback
+                onSelect(nodeToSelect);
+            }
+        }
+    }, [initialSelectedId, data, onSelect, selectedId]);
+    const toggleExpand = (id) => {
+        const newSet = new Set(expanded);
+        if (newSet.has(id))
+            newSet.delete(id);
+        else
+            newSet.add(id);
+        setExpanded(newSet);
+    };
+    const renderNode = (node, depth = 0) => {
+        const isExpanded = expanded.has(node.id);
+        const hasChildren = node.children && node.children.length > 0;
+        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"]
+                    ].filter(Boolean).join(' '), style: { paddingLeft: `${depth * 24 + 8}px` }, onClick: () => {
+                        if (selectable) {
+                            setSelectedId(node.id);
+                            onSelect(node);
+                        }
+                        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));
+    };
+    // Function to search for nodes that match the search term
+    const searchInTree = (nodes, searchTerm) => {
+        if (!searchTerm)
+            return nodes;
+        const results = [];
+        for (const node of nodes) {
+            const nodeMatches = node.label.toLowerCase().includes(searchTerm.toLowerCase());
+            let childMatches = [];
+            if (node.children) {
+                childMatches = searchInTree(node.children, searchTerm);
+            }
+            // Include node if he or his children match
+            if (nodeMatches || childMatches.length > 0) {
+                results.push({
+                    ...node,
+                    children: childMatches.length > 0 ? childMatches : node.children
+                });
+            }
+        }
+        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"] })) })] }));
+}
+
 function CwSearchInput(optionsProps) {
     const [searchText, setSearchText] = useState("");
     const [filteredOptions, setFilteredOptions] = useState([]);
     const [_selectedOption, setSelectedOption] = useState(null);
+    const [showDropdown, setShowDropdown] = useState(false);
     // Make default value selection when loading the component
     useEffect(() => {
         if (optionsProps.defaultValue && optionsProps.selectList && optionsProps.selectList.length > 0) {
@@ -3533,8 +4425,9 @@ function CwSearchInput(optionsProps) {
     const handleInputChange = (event) => {
         const text = event.target.value;
         setSearchText(text);
+        setShowDropdown(true);
         if (text === "") {
-            setFilteredOptions([]);
+            setFilteredOptions(optionsProps.selectList);
             setSelectedOption(null);
             // Notify that there is no selection
             if (optionsProps.handleChange) {
@@ -3555,6 +4448,17 @@ function CwSearchInput(optionsProps) {
             setFilteredOptions(filtered);
         }
     };
+    const handleInputFocus = () => {
+        setShowDropdown(true);
+        if (searchText === "") {
+            setFilteredOptions(optionsProps.selectList);
+        }
+    };
+    const handleInputBlur = () => {
+        setTimeout(() => {
+            setShowDropdown(false);
+        }, 150);
+    };
     const handleOptionSelect = (option) => {
         setSearchText(option.description);
         setSelectedOption(option);
@@ -3570,12 +4474,12 @@ function CwSearchInput(optionsProps) {
         setSelectedOption(null);
     };
     return (jsxs("div", { className: "cwSearchInputComp", style: optionsProps.style, id: optionsProps.id, children: [jsxs("div", { className: optionsProps.labelPosition === "inline"
-                    ? "cw-flex-row "
+                    ? "cw-flex-row cw-align-left-center"
                     : optionsProps.labelPosition === "column"
-                        ? "cw-flex-column"
-                        : "cw-flex-row ", children: [optionsProps.labelName && (jsx("label", { className: optionsProps.disabled === true
-                            ? "cw_label_text cw_label_text_disabled" + " " + optionsProps.labelClassName
-                            : "cw_label_text" + " " + optionsProps.labelClassName, children: optionsProps.labelName })), jsx("input", { type: "text", value: searchText, onChange: handleInputChange, placeholder: "Search...", className: "cw_input_search", disabled: optionsProps.disabled }), searchText && (jsx("button", { className: "cw-button-icon cwi-close cw-input-search-clear", onClick: handleClearClick }))] }), filteredOptions.length > 0 && (jsx("div", { className: "cw-input-search-dropdown", children: jsx("ul", { children: filteredOptions.map((option) => (jsx("li", { onClick: () => handleOptionSelect(option), children: option.description }, option.id))) }) }))] }));
+                        ? "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"};
@@ -6373,7 +7277,7 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
         e.preventDefault();
         onEvent(new OnDoubleClickEvent(value.id));
     });
-    return (jsx(Dropdown, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottomCenter", menu: {
+    return (jsx(Dropdown, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottom", menu: {
             items: value.contextMenuItems,
             onClick: (e) => {
                 e.domEvent.nativeEvent.preventDefault();
@@ -6518,7 +7422,7 @@ 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: "bottomCenter", menu: {
+        }, children: [jsx(RowTitleComp, { ...rowHeader }), jsx(Dropdown, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottom", menu: {
                     items: contextMenuItems,
                     onClick: (e) => {
                         onClickMenuItem$1(e, () => {
@@ -6553,19 +7457,19 @@ const SchedulerRow = memo((props) => {
                         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 }))), divisionLines.map((division) => (jsx(DivisionLine, { height: "100%", left: division.left }))), backgroundEvents.length > 0 && backgroundEvents.some((e) => e.isVisible) && (jsx("div", { style: {
+                    }, 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%",
                                 pointerEvents: "none",
                             }, children: backgroundEvents.map((event) => {
-                                return jsx(BackgroundEventComp, { value: { ...event }, onEvent: onEvent, heightRem: props.rowHeightInRem * Math.max(1, internalRows.length) });
+                                return jsx(BackgroundEventComp, { value: { ...event }, onEvent: onEvent, heightRem: props.rowHeightInRem * Math.max(1, internalRows.length) }, event.id);
                             }) })), backgroundEvents.length === 0 && internalRows.length === 0 && (jsx("div", { style: { position: "relative", height: props.rowHeightInRem + "rem" } })), internalRows.map((internalRow, index) => {
                             return (jsx("div", { style: {
                                     position: "relative",
                                     height: props.rowHeightInRem + "rem",
                                     pointerEvents: "none"
-                                }, children: internalRow.map((event, index) => (jsx(EventComp, { value: event, heightRem: props.rowHeightInRem, onEvent: onEvent }, index))) }, index));
+                                }, 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)] }));
 }, (prevProps, nextProps) => {
     // This memo is necessary to prevent re-render all the rows when a user makes drag and drop
@@ -6749,9 +7653,9 @@ const getEventSizes = (schedulerDate, totalDays, startDate, endDate) => {
         };
     }
     const totalHours = totalDays * 24;
-    const dateString = schedulerDate.toISOString().split('T')[0];
-    const schedulerDateAtZero = new Date(dateString);
-    let startHours = hoursBetween(schedulerDateAtZero, startDate);
+    // const dateString = schedulerDate.toISOString().split('T')[0];
+    //const schedulerDateAtZero = new Date(dateString)
+    let startHours = hoursBetween(schedulerDate, startDate);
     let durationHours = hoursBetween(startDate, endDate);
     const startOutOfScheduler = startHours < 0;
     if (startOutOfScheduler) {
@@ -6794,9 +7698,7 @@ const sortByCategoryAndTitle = (previous, next, orderCategories) => {
 };
 
 const getWeekendLinesByDatesVisible = (initialDate, visibleDays) => {
-    const dateString = initialDate.toISOString().split('T')[0];
-    const todayAtO = new Date(dateString);
-    const days = getWeekendsDaysInDateRange(todayAtO, visibleDays);
+    const days = getWeekendsDaysInDateRange(initialDate, visibleDays);
     return days.map(it => {
         const endDate = new Date(it);
         endDate.setDate(it.getDate() + 1);
@@ -6888,7 +7790,7 @@ const Scheduler = (props) => {
         return (jsx("div", { style: {
                 ...style,
                 backgroundColor: rowColor
-            }, children: jsx(SchedulerRow, { events: events.filter((it) => it.rowId === row.rowId), backgroundEvents: backgroundEvents.filter((it) => it.rowId === row.rowId), rowHeader: header, EventComp: EventComp, BackgroundEventComp: BackgroundEventComp, RowTitleComp: RowTitleComp, weekendLines: weekendsLines, divisionLines: divisionLines, timeLinePercentage: timeLinePercentage, rowHeightInRem: rowsHeight, onEvent: onEvent, contextMenuItems: contextMenuItems, visibleDays: visibleDays, selectedDate: selectedDate }) }));
+            }, children: jsx(SchedulerRow, { events: events.filter((it) => it.rowId === row.rowId), backgroundEvents: backgroundEvents.filter((it) => it.rowId === row.rowId), rowHeader: header, EventComp: EventComp, BackgroundEventComp: BackgroundEventComp, RowTitleComp: RowTitleComp, weekendLines: weekendsLines, divisionLines: divisionLines, timeLinePercentage: timeLinePercentage, rowHeightInRem: rowsHeight, onEvent: onEvent, contextMenuItems: contextMenuItems, visibleDays: visibleDays, selectedDate: selectedDate }) }, row.rowId));
     });
     const getItemSize = useCallback((index) => {
         const row = rows[index];
@@ -6937,8 +7839,7 @@ class CwSuperScheduler extends React.Component {
             let returnedHeight = 50;
             let data;
             if (this.props.pinnedResources) {
-                let pinned = [...this.props.pinnedResources];
-                pinned = lodash.uniq(pinned);
+                const pinned = [...new Set(this.props.pinnedResources)];
                 for (let i = 0; i < pinned.length; i++) {
                     data = this.returnDynamicHeight(pinned[i], returnedTops);
                     returnedTops = data.topsCalculated;
@@ -7269,25 +8170,26 @@ const onClickMenuItem = (e, event) => {
 const PinRowHeader = ({ value, width, onEvent }) => {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const { highlightColor, isLoading } = value;
-    return (jsxs("div", { style: {
-            width: width,
-            background: highlightColor,
-        }, className: styles["super-scheduler-row-header"], children: [jsx("button", { className: "cw-button-icon cwi-pin", "data-pinned": value.isPinned, onClick: (_) => {
-                    onEvent(value.isPinned ? new OnUnpinRow(value.rowId) : new OnPinRow(value.rowId));
-                } }), jsx("div", { className: styles["indicators"], children: value.indicators ?? undefined }), jsx(CwGenericTooltip, { content: value.tooltip, position: "right", dissapearsWhenHover: true, overlayStyle: value.overlayTooltipStyle, children: jsx(Dropdown, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottomCenter", 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: jsxs("div", { className: styles["scheduler-row-header"], style: {
+    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: {
+                    width: width,
+                    background: highlightColor,
+                }, className: styles["super-scheduler-row-header"], children: [jsx("button", { className: "cw-button-icon cwi-pin", "data-pinned": value.isPinned, onClick: (_) => {
+                            onEvent(value.isPinned ? new OnUnpinRow(value.rowId) : new OnPinRow(value.rowId));
+                        } }), jsx("div", { className: styles["indicators"], children: value.indicators ?? undefined }), jsxs("div", { style: {
                             display: "flex",
                             flexDirection: "column",
                             justifyContent: "center",
                             alignItems: "flex-start",
-                        }, children: [jsxs("div", { children: [jsx("strong", { children: value.title }), value.title2 && jsxs("span", { children: ["-", value.title2] }), " ", jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 && jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxs("span", { children: ["-", value.subtitle2] })] })] }) }, value.rowId) }, value.rowId), isLoading ? jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }));
+                        }, children: [jsxs("div", { children: [jsx("strong", { children: value.title }), value.title2 && jsxs("span", { children: ["-", value.title2] }), " ", jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 &&
+                                        jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxs("span", { children: ["-", value.subtitle2] })] })] }), isLoading ? jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }) }, value.rowId) }, value.rowId));
 };
 
 const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory, unPinnedOrderCategory, backgroundEvents, contextMenuItems, onEvent }) => {
@@ -7299,167 +8201,240 @@ 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 { Option } = Select;
-class CwFindAirport extends React.Component {
-    constructor(Props) {
-        super(Props);
-        this.state = {
-            data: [],
-            valueId: undefined,
-            valueText: "",
-            searchingAtProviders: false,
-            searchType: "",
-            airports: [],
-        };
-        this.handleSelect = this.handleSelect.bind(this);
-    }
-    componentDidMount() {
-        // OnlyDatabase = 0
-        // DatabaseAndProviders = 1
-        // OnlyProviders = 2
-        this.setState({
-            searchType: this.props.searchType === undefined ? "OnlyDatabase" : this.props.searchType,
-        });
-        if (this.props.value !== undefined && this.props.value !== 0 && this.props.value !== -1) {
-            this.setState({
-                valueId: this.props.value,
-            });
-            this.fetchAirportData(this.props.value);
+const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder = "Search airport…", required = false, cblConfig, className = "", value, disabled = false, displayMode, width }) => {
+    // State
+    const [inputValue, setInputValue] = useState("");
+    const [options, setOptions] = useState([]);
+    const [airports, setAirports] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isInitialLoading, setIsInitialLoading] = useState(false);
+    const [showDropdown, setShowDropdown] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [tooltipText, setTooltipText] = useState("");
+    // Refs
+    const inputRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const searchTimeoutRef = useRef();
+    // Utility function to extract ICAO from DisplayAirportText
+    const extractIcao = useCallback((displayText) => {
+        const match = displayText.match(/^([A-Z]{4})\(/);
+        return match ? match[1] : displayText;
+    }, []);
+    // Utility function to extract IATA from DisplayAirportText
+    const extractIata = useCallback((displayText) => {
+        const match = displayText.match(/\(([A-Z]{3})\)/);
+        return match ? match[1] : displayText;
+    }, []);
+    // Utility function to get short code (ICAO(IATA) format - original behavior)
+    const getShortCode = useCallback((displayText) => {
+        const match = displayText.match(/([A-Z]{4})\(([A-Z]{3})\)/);
+        if (match && match.length >= 3) {
+            return `${match[1]}(${match[2]})`;
         }
-    }
-    componentDidUpdate(_previousProps, _previousState) {
-        if (this.props.value !== undefined &&
-            this.props.value !== 0 &&
-            this.props.value !== -1 &&
-            _previousProps.value !== _previousState.valueId) {
-            this.setState({
-                valueId: this.props.value,
-            });
-            this.fetchAirportData(this.props.value);
-        }
-    }
-    fetchAirportData(airportId) {
-        fetch(this.props.cblConfig + "api/data/airport?airportId=" + airportId)
-            .then((res) => res.json())
-            .then((result) => {
-            const data2 = [];
-            const airports2 = [];
-            data2.push({
-                value: result.AptKey,
-                text: this.props.icaoText === true ? result.AptIcao : result.DisplayAirportText,
-            });
-            airports2.push(result);
-            this.setState({
-                data: data2,
-                airports: airports2,
-                searchingAtProviders: false,
-            });
-            // this.handleSearch(result.AptIata);
-        });
-    }
-    handleSearch(value) {
-        if (value !== undefined && value !== null && value.length >= 3 && this.state.searchingAtProviders === false) {
-            this.setState({
-                valueText: value,
-                searchingAtProviders: true,
-            });
-            fetch(this.props.cblConfig +
-                "controls/cblFindAirport/cblFindAirport/SearchAirportCodeName?text=" +
-                value +
-                "&searchType=0")
-                .then((res) => res.json())
-                .then((result) => {
-                const data2 = [];
-                const airports2 = [];
-                result.forEach((r) => {
-                    data2.push({
-                        value: r.AptKey,
-                        text: this.props.icaoText === true ? r.AptIcao : r.DisplayAirportText,
-                    });
-                    airports2.push(r);
-                    this.setState({
-                        data: data2,
-                        airports: airports2,
-                        searchingAtProviders: false,
-                    });
-                });
+        return displayText;
+    }, []);
+    // Utility function to get display text for INPUT based on mode
+    const getInputDisplayText = useCallback((airport) => {
+        const fullText = airport.DisplayAirportText;
+        switch (displayMode) {
+            case "icao-only":
+                return extractIcao(fullText);
+            case "iata-only":
+                return extractIata(fullText);
+            case "full-text":
+                return fullText;
+            case "default":
+            default:
+                // Default: ICAO(IATA) - same as original getShortCode behavior
+                return getShortCode(fullText);
+        }
+    }, [displayMode, extractIcao, extractIata, getShortCode]);
+    // Utility function to get display text for DROPDOWN (always full text)
+    const getDropdownDisplayText = useCallback((airport) => {
+        return airport.DisplayAirportText;
+    }, []);
+    // Fetch airport data by ID
+    const fetchAirportData = useCallback(async (airportId) => {
+        setIsInitialLoading(true);
+        try {
+            const response = await fetch(`${cblConfig}api/data/airport?airportId=${airportId}`);
+            const result = await response.json();
+            const airport = result;
+            const inputText = getInputDisplayText(airport);
+            const dropdownText = getDropdownDisplayText(airport);
+            setAirports([airport]);
+            setOptions([{ value: airport.AptKey, text: dropdownText }]);
+            setInputValue(inputText);
+            setTooltipText(airport.DisplayAirportText);
+        }
+        catch (error) {
+            console.error("Error fetching airport data:", error);
+        }
+        finally {
+            setIsInitialLoading(false);
+        }
+    }, [cblConfig, getInputDisplayText, getDropdownDisplayText]);
+    // Map searchType string to number for API
+    const getSearchTypeNumber = useCallback((type) => {
+        switch (type) {
+            case "OnlyDatabase": return 0;
+            case "DatabaseAndProviders": return 1;
+            case "OnlyProviders": return 2;
+            default: return 0;
+        }
+    }, []);
+    // Search airports
+    const searchAirports = useCallback(async (searchText) => {
+        if (searchText.length < 2) {
+            setOptions([]);
+            setAirports([]);
+            setShowDropdown(false);
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const searchTypeNumber = getSearchTypeNumber(searchType);
+            const response = await fetch(`${cblConfig}controls/cblFindAirport/cblFindAirport/SearchAirportCodeName?text=${searchText}&searchType=${searchTypeNumber}`);
+            const results = await response.json();
+            const newOptions = [];
+            const newAirports = [];
+            results.forEach((airport) => {
+                const displayText = getDropdownDisplayText(airport);
+                newOptions.push({ value: airport.AptKey, text: displayText });
+                newAirports.push(airport);
             });
+            setOptions(newOptions);
+            setAirports(newAirports);
+            setShowDropdown(newOptions.length > 0);
+            setHighlightedIndex(-1);
+        }
+        catch (error) {
+            console.error("Error searching airports:", error);
+            setOptions([]);
+            setAirports([]);
+            setShowDropdown(false);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [cblConfig, getDropdownDisplayText, searchType, getSearchTypeNumber]);
+    // Debounced search
+    const debouncedSearch = useCallback((searchText) => {
+        if (searchTimeoutRef.current) {
+            window.clearTimeout(searchTimeoutRef.current);
+        }
+        searchTimeoutRef.current = window.setTimeout(() => {
+            searchAirports(searchText);
+        }, 300); // 300ms debounce
+    }, [searchAirports]);
+    // Handle input change
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (newValue !== inputValue) {
+            debouncedSearch(newValue);
+        }
+    };
+    // Handle option selection
+    const handleOptionSelect = async (optionValue) => {
+        const selectedAirport = airports.find(apt => apt.AptKey === optionValue);
+        if (!selectedAirport)
+            return;
+        setShowDropdown(false);
+        // Handle provider airports (keeping original logic)
+        if (selectedAirport.isAirportFromProvider) {
+            try {
+                const response = await fetch(`${cblConfig}controls/cblFindAirport/cblFindAirport/GetCblAirport?IATAICAO=${selectedAirport.AptIcao}&update=false`);
+                const result = await response.json();
+                const resultAirport = result;
+                const inputText = getInputDisplayText(resultAirport);
+                const dropdownText = getDropdownDisplayText(resultAirport);
+                setInputValue(inputText);
+                setTooltipText(result.DisplayAirportText);
+                setAirports([result]);
+                setOptions([{ value: result.AptKey, text: dropdownText }]);
+                handleChange(result.AptKey);
+            }
+            catch (error) {
+                console.error("Error fetching provider airport:", error);
+            }
         }
         else {
-            this.setState({
-                data: [],
-                airports: [],
-                searchingAtProviders: false,
-            });
+            const inputText = getInputDisplayText(selectedAirport);
+            setInputValue(inputText);
+            setTooltipText(getDropdownDisplayText(selectedAirport));
+            handleChange(optionValue);
         }
-    }
-    handleChange(value) {
-        this.setState({ valueId: value });
-        this.props.handleChange(value);
-    }
-    handleSelect(value) {
-        this.setState({ valueId: value });
-        const apt = this.state.airports.find((x) => x.AptKey === value);
-        if (apt.isAirportFromProvider) {
-            fetch(this.props.cblConfig +
-                "controls/cblFindAirport/cblFindAirport/GetCblAirport?IATAICAO=" +
-                apt.AptIcao +
-                "&update=false")
-                .then((res) => res.json())
-                .then((result) => {
-                const data2 = [];
-                const airports2 = [];
-                data2.push({
-                    value: result.AptKey,
-                    text: result.DisplayAirportText,
-                });
-                airports2.push(result);
-                this.setState({
-                    data: data2,
-                    airports: airports2,
-                    searchingAtProviders: false,
-                });
-            });
+    };
+    // Handle keyboard navigation
+    const handleKeyDown = (e) => {
+        if (!showDropdown || options.length === 0)
+            return;
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                setHighlightedIndex(prev => prev < options.length - 1 ? prev + 1 : 0);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                setHighlightedIndex(prev => prev > 0 ? prev - 1 : options.length - 1);
+                break;
+            case "Enter":
+                e.preventDefault();
+                if (highlightedIndex >= 0 && highlightedIndex < options.length) {
+                    handleOptionSelect(options[highlightedIndex].value);
+                }
+                break;
+            case "Escape":
+                setShowDropdown(false);
+                setHighlightedIndex(-1);
+                break;
         }
-    }
-    //this next call is the one to update the data paying for a call in the api
-    onClick() {
-        fetch(this.props.cblConfig +
-            "controls/cblFindAirport/cblFindAirport/SearchAirportCodeNameonProvider?text=" +
-            this.state.valueText +
-            "&searchType=" +
-            this.state.searchType)
-            .then((res) => res.json())
-            .then((result) => {
-            const data2 = [];
-            const airports2 = [];
-            result.forEach((r) => {
-                data2.push({
-                    value: r.AptKey,
-                    text: r.DisplayAirportText,
-                });
-                airports2.push(r);
-            });
-            this.setState({
-                data: data2,
-                airports: airports2,
-                searchingAtProviders: false,
-            });
-        });
-    }
-    getShortCode(text) {
-        const match = text.match(/([A-Z]{4})\(([A-Z]{3})\)/);
-        if (match && match.length >= 3) {
-            return `${match[1]}(${match[2]})`;
+    };
+    // Handle clicks outside dropdown
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target) &&
+                !inputRef.current?.contains(event.target)) {
+                setShowDropdown(false);
+                setHighlightedIndex(-1);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    // Load initial value
+    useEffect(() => {
+        if (value && value !== 0 && value !== -1) {
+            fetchAirportData(value);
         }
-        return text;
-    }
-    render() {
-        const options = this.state.data.map((sl) => (jsxs(Option, { value: sl.value, title: sl.text, label: this.getShortCode(sl.text), children: [(sl.text), " "] }, sl.value)));
-        return (jsx("div", { children: jsxs("div", { className: "cw-flex-row cw-align-left-center", style: { gap: "0.25rem" }, children: [jsx(Select, { id: "InputID", 
-                        // this.required === "true" ? "required" : ""
-                        showSearch: true, allowClear: true, "aria-required": true, value: this.state.valueId, placeholder: this.props.placeHolder, defaultActiveFirstOption: false, showArrow: true, filterOption: false, onSearch: this.handleSearch.bind(this), onChange: this.handleChange.bind(this), onSelect: this.handleSelect.bind(this), notFoundContent: null, popupClassName: "cwelltItemFindAirport", className: this.props.className, labelInValue: false, optionLabelProp: "label", disabled: !!(this.props.disabled !== undefined && this.props.disabled !== null && this.props.disabled === true), style: { flexGrow: 1 }, children: options }, JSON.stringify(this.state.valueId)), jsx("button", { id: "findAirportInProviderButtonID", className: "cw-button-icon cwi-airport", title: "Search external airport", hidden: this.props.searchType === "OnlyDatabase" || this.props.disabled, onClick: this.onClick.bind(this), disabled: !!(this.props.disabled !== undefined && this.props.disabled !== null && this.props.disabled === true) })] }) }));
-    }
-}
+    }, [value, fetchAirportData]);
+    useEffect(() => {
+        if (!value || value === 0 || value === -1) {
+            setInputValue("");
+            setTooltipText("");
+            setOptions([]);
+            setAirports([]);
+        }
+    }, [value]);
+    // Handle input focus
+    const handleInputFocus = () => {
+        if (options.length > 0) {
+            setShowDropdown(true);
+        }
+    };
+    // Clear selection
+    const handleClear = () => {
+        setInputValue("");
+        setTooltipText("");
+        setOptions([]);
+        setAirports([]);
+        setShowDropdown(false);
+        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))) }))] }));
+};
 
-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, CwContextMenu, CwContextualMenu, CwDialog, CwDialogManager, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownContainer, CwDropdownFilter, CwDropdownNavigation, CwExpandable, CwFileUpload, CwFindAirport, CwFloatingButton, CwGenericTooltip, CwHeadFilter, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwInput, CwInputDate, CwInputDatePicker, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwLoadingSmall, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalConfirm, CwModalHover, CwModalIframe, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwMultiselect, CwOption, CwOptionList, CwReportModal, CwScheduler, CwScheduler2, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSuperScheduler, CwTable, CwTableGrouped, CwTabs, CwTag, CwTextArea, CwTime, CwToggle, CwTooltip, 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 };
+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, 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 };