@cwellt_software/cwellt-reactjs-lib 1.0.0 → 1.0.3

package/dist/index.cjs.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var client = require('react-dom/client');
+var reactDom = require('react-dom');
 var antd = require('antd');
 var Draggable = require('react-draggable');
 var moment = require('moment');
@@ -70,12 +71,12 @@ function CwHeadingSecond(props) {
  * General purpose aligner flex container, useful for column or row view.
  * @remarks
  * ```txt
- * $flexDirection="row" (default):
+ * flexDirection="row" (default):
  *
  * <Row A> | - item 1 - item 2 - item 3 |
  * <Row B> | - item 1 - item 2 - item 3 |
  *
- * $flexDirection="column":
+ * flexDirection="column":
  *
  *   <Col A>    <Col B>
  * | - item 1 | - item 1 |
@@ -84,7 +85,7 @@ function CwHeadingSecond(props) {
  *
  * ```
  * @example
- * <CwAlign $flexDirection="column">
+ * <CwAlign flexDirection="column">
  *   <div>
  *     <h2>ColumnA</h2>
  *   </div>
@@ -94,29 +95,29 @@ function CwHeadingSecond(props) {
  * </CwAlign>
  */
 function CwAlign(props) {
-    const { $alignContent, $alignItems, $alignSelf, $bottom, $display, $flexBasis, $flexDirection, $flexGrow, $flexShrink, $flexWrap, $height, $justifyContent, $left, $margin, $order, $padding, $position, $right, $top, $width, $gap, ...divProps } = props;
+    const { alignContent, alignItems, alignSelf, bottom, display, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, cssHeight, justifyContent, left, margin, order, padding, position, right, top, cssWidth, gap, ...divProps } = props;
     return (jsxRuntime.jsx("div", { className: "cw-align", ...divProps, style: {
-            alignContent: $alignContent,
-            alignItems: $alignItems,
-            alignSelf: $alignSelf,
-            bottom: $bottom,
-            display: $display ?? "flex",
-            flexBasis: $flexBasis,
-            flexDirection: $flexDirection,
-            flexGrow: $flexGrow,
-            flexShrink: $flexShrink,
-            flexWrap: $flexWrap,
-            height: $height,
-            justifyContent: $justifyContent,
-            left: $left,
-            margin: $margin,
-            order: $order,
-            padding: $padding,
-            position: $position,
-            right: $right,
-            top: $top,
-            width: $width,
-            gap: $gap
+            alignContent: alignContent,
+            alignItems: alignItems,
+            alignSelf: alignSelf,
+            bottom: bottom,
+            display: display ?? "flex",
+            flexBasis: flexBasis,
+            flexDirection: flexDirection,
+            flexGrow: flexGrow,
+            flexShrink: flexShrink,
+            flexWrap: flexWrap,
+            height: cssHeight,
+            justifyContent: justifyContent,
+            left: left,
+            margin: margin,
+            order: order,
+            padding: padding,
+            position: position,
+            right: right,
+            top: top,
+            width: cssWidth,
+            gap: gap
         }, children: props.children }));
 }
 
@@ -124,12 +125,12 @@ function CwAlign(props) {
  * Label for form controls.
  * @example
  * ```tsx
- * <CwLabelForm $justify="right" >Username:</CwLabelForm>
+ * <CwLabelForm justify="right" >Username:</CwLabelForm>
  * ```
  */
 function CwLabel(props) {
-    const { $justify, $text, $height, $width, $alignProps, $margin, ...$labelProps } = props;
-    return (jsxRuntime.jsx("span", { className: "cw-label", children: jsxRuntime.jsx(CwAlign, { ...$alignProps, children: jsxRuntime.jsx("label", { style: { textAlign: $justify, width: $width, height: $height, margin: $margin ?? "1px 0 0 0" }, ...$labelProps, children: $labelProps.children ?? $text }) }) }));
+    const { justify, text, labelHeight, labelWidth, alignProps, margin, ...labelProps } = props;
+    return (jsxRuntime.jsx("span", { className: "cw-label", children: jsxRuntime.jsx(CwAlign, { ...alignProps, children: jsxRuntime.jsx("label", { style: { textAlign: justify, width: labelWidth, height: labelHeight, margin: margin ?? "1px 0 0 0" }, ...labelProps, children: labelProps.children ?? text }) }) }));
 }
 
 function CwTooltip(CwelltTooltipProps) {
@@ -162,11 +163,12 @@ function CwTag(tagProps) {
 /**
  * An icon from fontawesome4. Find them here: [fontawesome.com/v4](https://fontawesome.com/v4/icons/)
  * @example
- * <CwIcon $id="house" />
+ * <CwIcon id="house" />
  */
 function CwIcon(props) {
+    const { iconId, ...iconProps } = props;
     // if you wrap this inside a div I WILL find you 🔪
-    return jsxRuntime.jsx("i", { ...props, className: `fa fa-${props.$id}` });
+    return jsxRuntime.jsx("i", { ...iconProps, className: `fa fa-${iconId}` });
 }
 
 const CW_DEFAULT_MESSAGE_DURATION = 2000;
@@ -180,27 +182,27 @@ exports.CwMessageType = void 0;
 const CwMessage = props => {
     React.useEffect(() => {
         const timer = setTimeout(() => {
-            props.$onClose?.();
-        }, props.$duration ?? CW_DEFAULT_MESSAGE_DURATION);
+            props.onClose?.();
+        }, props.duration ?? CW_DEFAULT_MESSAGE_DURATION);
         return () => clearTimeout(timer);
     }, [props]);
-    return (jsxRuntime.jsx("div", { className: "cw-message", "data-message-type": Object.keys(exports.CwMessageType).find(key => exports.CwMessageType[key] === props.$type), children: jsxRuntime.jsxs(CwAlign, { "$justifyContent": "center", "$alignItems": "center", children: [props.$type && jsxRuntime.jsx(CwIcon, { "$id": props.$type.toString() }), props.$message] }) }));
+    return (jsxRuntime.jsx("div", { className: "cw-message", "data-message-type": Object.keys(exports.CwMessageType).find(key => exports.CwMessageType[key] === props.messageType), children: jsxRuntime.jsxs(CwAlign, { justifyContent: "center", alignItems: "center", children: [props.messageType && jsxRuntime.jsx(CwIcon, { iconId: props.messageType.toString() }), props.message] }) }));
 };
 const useCwMessage = () => {
     const [isVisible, setIsVisible] = React.useState(false);
     const [message, setMessage] = React.useState("");
     const [duration, setDuration] = React.useState();
     const [type, setType] = React.useState();
-    const showMessage = ($props) => {
-        setMessage($props.$message);
-        setDuration($props.$duration);
-        setType($props.$type);
+    const showMessage = (props) => {
+        setMessage(props.message);
+        setDuration(props.duration);
+        setType(props.messageType);
         setIsVisible(true);
     };
     const closeMessage = () => {
         setIsVisible(false);
     };
-    const RenderMessage = isVisible ? (jsxRuntime.jsx(CwMessage, { "$message": message, "$duration": duration, "$type": type, "$onClose": closeMessage })) : null;
+    const RenderMessage = isVisible ? (jsxRuntime.jsx(CwMessage, { message: message, duration: duration, messageType: type, onClose: closeMessage })) : null;
     return { showMessage, RenderMessage };
 };
 class CwMessageManager {
@@ -230,7 +232,7 @@ class CwMessageManager {
         const msg = document.createElement("div");
         this.messageContainer?.prepend(msg);
         const msgRoot = client.createRoot(msg); // Create a root for the new message
-        msgRoot.render(jsxRuntime.jsx(CwMessage, { "$message": message, "$type": type, "$duration": duration, "$onClose": () => this.closeMessage(msgRoot) }));
+        msgRoot.render(jsxRuntime.jsx(CwMessage, { message: message, messageType: type, duration: duration, onClose: () => this.closeMessage(msgRoot) }));
     }
     closeMessage(msgRoot) {
         msgRoot.unmount(); // Unmount the message root
@@ -263,14 +265,136 @@ function CwLoadingSmall(CwelltLoadingAppointements) {
         jsxRuntime.jsx("div", { className: "cwellt_d_none" })) }));
 }
 
-var styles$6 = {"cw-generic-tooltip":"cw-generic-tooltip-module_cw-generic-tooltip__Ij76M","cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si"};
+var styles$a = {"cw-generic-tooltip":"cw-generic-tooltip-module_cw-generic-tooltip__Ij76M","cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si"};
 
-const CwGenericTooltip = ({ children, content = null, position = "right", dissapearsWhenHover = false, overlayStyle = {}, }) => {
+// Constants moved outside to prevent recreation
+const margin = 16;
+const defaultPosition = "right";
+const positionOrder = ['right', 'bottom', 'left', 'top'];
+// Memoized utility functions to prevent recreation
+const calculatePositionForSide = (position, triggerRect, tooltipRect) => {
+    switch (position) {
+        case 'left':
+            return {
+                top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
+                left: triggerRect.left - tooltipRect.width - margin
+            };
+        case 'right':
+            return {
+                top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
+                left: triggerRect.right + margin
+            };
+        case 'top':
+            return {
+                top: triggerRect.top - tooltipRect.height - margin,
+                left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
+            };
+        case 'bottom':
+            return {
+                top: triggerRect.bottom + margin,
+                left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
+            };
+    }
+};
+// Optimized hooks
+const useTooltipDelay = (callback, delay) => {
+    const timeoutRef = React.useRef();
+    const clearTooltipTimeout = React.useCallback(() => {
+        if (timeoutRef.current) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = undefined;
+        }
+    }, []);
+    const setTooltipTimeout = React.useCallback(() => {
+        clearTooltipTimeout();
+        if (delay) {
+            timeoutRef.current = window.setTimeout(callback, delay);
+        }
+        else {
+            callback();
+        }
+    }, [callback, delay, clearTooltipTimeout]);
+    React.useEffect(() => clearTooltipTimeout, [clearTooltipTimeout]);
+    return { setTooltipTimeout, clearTooltipTimeout };
+};
+const useTooltipPosition = (isVisible, containerRef, preferredPosition, tooltipClassName) => {
+    const [tooltipState, setTooltipState] = React.useState({
+        position: { top: 0, left: 0 },
+        actualPosition: preferredPosition
+    });
+    const frameRef = React.useRef();
+    const updatePosition = React.useCallback(() => {
+        if (!isVisible || !containerRef.current)
+            return;
+        const tooltipElement = document.querySelector(`.${tooltipClassName}`);
+        if (!tooltipElement)
+            return;
+        const triggerRect = containerRef.current.getBoundingClientRect();
+        const tooltipRect = tooltipElement.getBoundingClientRect();
+        // Try preferred position first
+        const position = calculatePositionForSide(preferredPosition, triggerRect, tooltipRect);
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        // Quick bounds check
+        if (position.left >= margin &&
+            position.top >= margin &&
+            position.left + tooltipRect.width <= windowWidth - margin &&
+            position.top + tooltipRect.height <= windowHeight - margin) {
+            setTooltipState({ position, actualPosition: preferredPosition });
+            return;
+        }
+        // Try other positions if preferred doesn't fit
+        for (const pos of positionOrder) {
+            if (pos === preferredPosition)
+                continue;
+            const newPosition = calculatePositionForSide(pos, triggerRect, tooltipRect);
+            if (newPosition.left >= margin &&
+                newPosition.top >= margin &&
+                newPosition.left + tooltipRect.width <= windowWidth - margin &&
+                newPosition.top + tooltipRect.height <= windowHeight - margin) {
+                setTooltipState({ position: newPosition, actualPosition: pos });
+                return;
+            }
+        }
+        // Fallback to preferred position if none fit
+        setTooltipState({ position, actualPosition: preferredPosition });
+    }, [isVisible, preferredPosition, tooltipClassName]);
+    React.useEffect(() => {
+        frameRef.current = requestAnimationFrame(updatePosition);
+        return () => {
+            if (frameRef.current) {
+                cancelAnimationFrame(frameRef.current);
+            }
+        };
+    }, [updatePosition]);
+    return tooltipState;
+};
+// Main component with optimizations
+const CwGenericTooltip = ({ children, content = null, position = defaultPosition, dissapearsWhenHover = false, overlayStyle = {}, showDelay = 0, }) => {
     const [isVisible, setIsVisible] = React.useState(false);
-    return (jsxRuntime.jsxs("div", { className: styles$6["cw-generic-tooltip"], onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), style: overlayStyle, children: [isVisible && content && (jsxRuntime.jsx("div", { className: styles$6["cw-generic-tooltip-content"], "data-position": position, onMouseEnter: () => {
-                    if (dissapearsWhenHover)
-                        setIsVisible(false);
-                }, children: content })), children] }));
+    const containerRef = React.useRef(null);
+    const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => setIsVisible(true), showDelay);
+    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$a["cw-generic-tooltip-content"]);
+    // Memoize tooltip content creation
+    const tooltipContent = React.useMemo(() => {
+        if (!isVisible || !content)
+            return null;
+        return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$a["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, style: {
+                position: 'fixed',
+                top: `${tooltipPosition.top}px`,
+                left: `${tooltipPosition.left}px`,
+                visibility: tooltipPosition.top === 0 && tooltipPosition.left === 0 ? 'hidden' : 'visible',
+                ...overlayStyle
+            }, onMouseEnter: () => dissapearsWhenHover && setIsVisible(false), children: content }), document.body);
+    }, [isVisible, content, actualPosition, tooltipPosition, dissapearsWhenHover, overlayStyle]);
+    const handleMouseEnter = React.useCallback(() => {
+        setTooltipTimeout();
+    }, [setTooltipTimeout]);
+    const handleMouseLeave = React.useCallback(() => {
+        clearTooltipTimeout();
+        setIsVisible(false);
+    }, [clearTooltipTimeout]);
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$a["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, children: [tooltipContent, children] }));
 };
 
 // Reference for draggable modal
@@ -389,11 +513,11 @@ class CwModalIframe extends React__namespace.Component {
     }
 }
 
-var styles$5 = {"cw-dialog-main":"cw-dialog-module_cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module_cw-dialog-button-close__9GRd8","cw-dialog-button-save":"cw-dialog-module_cw-dialog-button-save__eZ9SI"};
+var styles$9 = {"cw-dialog-main":"cw-dialog-module_cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module_cw-dialog-button-close__9GRd8","cw-dialog-button-save":"cw-dialog-module_cw-dialog-button-save__eZ9SI"};
 
 const CwDialog = props => {
     const dialogRef = React.useRef(null);
-    const initialDialogSize = { width: props.$size?.width ?? 800, height: props.$size?.height ?? 600 };
+    const initialDialogSize = { width: props.dialogSize?.width ?? 800, height: props.dialogSize?.height ?? 600 };
     const [isDragging, setIsDragging] = React.useState(false);
     const [resizeDirection, setResizeDirection] = React.useState(null);
     const [position, setPosition] = React.useState({
@@ -475,9 +599,9 @@ const CwDialog = props => {
         e.stopPropagation();
         setResizeDirection(direction);
     };
-    const header = (jsxRuntime.jsxs("header", { onMouseDown: handleMouseDown, children: [jsxRuntime.jsx("span", { children: props.$headline }), props.$customHeader || (jsxRuntime.jsx("button", { className: styles$5["cw-dialog-button-close"], onClick: props.$onClose, children: "\u2A2F" }))] }));
+    const header = (jsxRuntime.jsxs("header", { onMouseDown: handleMouseDown, children: [jsxRuntime.jsx("span", { children: props.headline }), props.customHeader || (jsxRuntime.jsx("button", { className: styles$9["cw-dialog-button-close"], onClick: props.onClose, children: "\u2A2F" }))] }));
     const content = (jsxRuntime.jsx("section", { style: { flex: 1, overflowX: "auto", overflowY: "auto", width: "100%" }, children: props.children }));
-    const footer = (jsxRuntime.jsx("footer", { style: { width: "100%" }, children: props.$customFooter || (jsxRuntime.jsx("button", { className: styles$5["cw-dialog-button-save"], onClick: props.$onSave, children: "\uD83D\uDDAB" })) }));
+    const footer = (jsxRuntime.jsx("footer", { style: { width: "100%" }, children: props.customFooter || (jsxRuntime.jsx("button", { className: styles$9["cw-dialog-button-save"], onClick: props.onSave, children: "\uD83D\uDDAB" })) }));
     const resizeHandles = [
         jsxRuntime.jsx("div", { "data-handle-n": true, onMouseDown: handleResizeMouseDown("n") }, "handle-n"),
         jsxRuntime.jsx("div", { "data-handle-s": true, onMouseDown: handleResizeMouseDown("s") }, "handle-s"),
@@ -488,12 +612,12 @@ const CwDialog = props => {
         jsxRuntime.jsx("div", { "data-handle-se": true, onMouseDown: handleResizeMouseDown("se") }, "handle-se"),
         jsxRuntime.jsx("div", { "data-handle-sw": true, onMouseDown: handleResizeMouseDown("sw") }, "handle-sw")
     ];
-    return (props.open && (jsxRuntime.jsx("div", { "data-has-scrim": props.$scrim, className: styles$5["cw-dialog-main"], children: jsxRuntime.jsxs("dialog", { ...props, ref: dialogRef, style: {
+    return (props.open && (jsxRuntime.jsx("div", { "data-has-scrim": props.scrim, className: styles$9["cw-dialog-main"], children: jsxRuntime.jsxs("dialog", { ...props, ref: dialogRef, style: {
                 left: `${position.x}px`,
                 top: `${position.y}px`,
                 width: `${size.width}px`,
                 height: `${size.height}px`,
-                zIndex: props.$zIndex,
+                zIndex: props.zIndex,
                 minWidth: "200px", // Set an appropriate minimum size
                 minHeight: "200px", // Set an appropriate minimum size
                 display: "flex",
@@ -519,7 +643,7 @@ const CwModalReportFunctional = (props) => {
             return (jsxRuntime.jsxs("div", { children: ["Please add a(n) ", props.reportName, " report in ", props.moduleSettings, " Settings"] }));
         }
     };
-    return (jsxRuntime.jsx("div", { id: "cwelltModalReportContent", children: isModal ? (jsxRuntime.jsx(CwDialog, { open: props.visible, "$size": { width: props.width, height: props.height }, "$headline": props.title, "$customFooter": [jsxRuntime.jsx("div", {}, "footer")], "$onClose": props.onCloseModal, isReport: true, children: renderContentModal() })) : (jsxRuntime.jsx("div", { children: renderContentNotModal() })) }));
+    return (jsxRuntime.jsx("div", { id: "cwelltModalReportContent", children: isModal ? (jsxRuntime.jsx(CwDialog, { open: props.visible, dialogSize: { width: props.width, height: props.height }, headline: props.title, customFooter: [jsxRuntime.jsx("div", {}, "footer")], onClose: props.onCloseModal, isReport: true, children: renderContentModal() })) : (jsxRuntime.jsx("div", { children: renderContentNotModal() })) }));
 };
 
 class CwReportModal extends React__namespace.Component {
@@ -539,7 +663,7 @@ class CwReportModal extends React__namespace.Component {
         };
     }
     render() {
-        return (jsxRuntime.jsx("div", { id: "cwelltModalReportContent", children: this.state.isModal === true ? (jsxRuntime.jsxs(CwDialog, { open: this.props.visible, "$size": { width: this.props.width, height: this.props.height }, "$headline": this.props.title, "$customFooter": new Array(jsxRuntime.jsx("div", {})), "$onClose": () => {
+        return (jsxRuntime.jsx("div", { id: "cwelltModalReportContent", children: this.state.isModal === true ? (jsxRuntime.jsxs(CwDialog, { open: this.props.visible, dialogSize: { width: this.props.width, height: this.props.height }, headline: this.props.title, customFooter: new Array(jsxRuntime.jsx("div", {})), onClose: () => {
                     this.formRef?.current?.resetFields();
                     this.props.SET_MODAL_REPORT_VISIBLE(false);
                 }, isReport: true, children: [this.props.name !== "Empty.pdf" && (jsxRuntime.jsx("div", { style: { width: "100%", height: "100%", overflowX: "auto", overflowY: "auto" }, children: jsxRuntime.jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", style: { width: "100%", height: "100%", display: "block" } }) })), this.props.name === "Empty.pdf" && (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("h1", { style: { marginLeft: "2em" }, children: [" ", "Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }) }))] })) : (jsxRuntime.jsxs("div", { children: [this.props.name !== "Empty.pdf" && (jsxRuntime.jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", width: "100%", height: "600px" })), this.props.name === "Empty.pdf" && (jsxRuntime.jsxs("div", { children: ["Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }))] })) }));
@@ -549,14 +673,14 @@ class CwReportModal extends React__namespace.Component {
 /**
  * A modal that appears when an element is hovered
  * @param children Contents of the modal
- * @param $hovereable Element to hover to display the modal
- * @param $onFirstOpened Function to run only once when the modal opens for the first time
+ * @param hovereable Element to hover to display the modal
+ * @param onFirstOpened Function to run only once when the modal opens for the first time
  * @example
- * <CwModalHover $hovereable={<span>Hover me!</span>}>
+ * <CwModalHover hovereable={<span>Hover me!</span>}>
  *   <p>Hello there</p>
  * </CwModalHover>
  */
-const CwModalHover = ({ children, $hovereable, $onFirstOpened, ...dialogProps }) => {
+const CwModalHover = ({ children, hovereable, onFirstOpened, ...dialogProps }) => {
     // Do not turn these into useState, it will break it.
     const mouseDialogState = { isInsideDialog: false };
     const mouseHoverState = { isInsideHover: false };
@@ -592,7 +716,7 @@ const CwModalHover = ({ children, $hovereable, $onFirstOpened, ...dialogProps })
             };
         }
     }, [hoverRef]);
-    return (jsxRuntime.jsxs("div", { ref: hoverRef, className: "cw-modal-hover", children: [jsxRuntime.jsx("div", { "data-hovereable-icon": true, children: $hovereable }), jsxRuntime.jsx("dialog", { ...dialogProps, ref: dialogRef, onMouseEnter: () => {
+    return (jsxRuntime.jsxs("div", { ref: hoverRef, className: "cw-modal-hover", children: [jsxRuntime.jsx("div", { "data-hovereable-icon": true, children: hovereable }), jsxRuntime.jsx("dialog", { ...dialogProps, ref: dialogRef, onMouseEnter: () => {
                     mouseDialogState.isInsideDialog = true;
                     tryOpeningDialog();
                 }, onMouseLeave: () => {
@@ -823,7 +947,7 @@ function CwTable({ columns, data, pagination, itemsPerPage, expandedRowRender, o
     return (jsxRuntime.jsxs("div", { id: id, className: classNameContainer + " " + "cwTableComp", children: [jsxRuntime.jsxs("table", { className: className + " " + "cw_table", style: style, children: [jsxRuntime.jsx("thead", { className: `${classNameHeader} cw_thead`, children: jsxRuntime.jsxs("tr", { className: "cw_thead_tr", children: [expandedRowRender && jsxRuntime.jsx("th", { className: "cw_thead_th cw_thead_th_expand" }), columns.map(column => (jsxRuntime.jsx("th", { onClick: () => handleSort(column.dataIndex), className: `cw_thead_th ${column.className} ${sortConfig.key === column.dataIndex ? sortConfig.direction : ""}`, children: column.title }, column.key)))] }) }), jsxRuntime.jsx("tbody", { className: "cw_tbody", children: !paginatedData || paginatedData.length === 0 ? (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: columns.length + (expandedRowRender ? 1 : 0), style: { textAlign: "center" }, children: textNoData !== undefined && textNoData !== "" ? textNoData : "No data" }) })) : (paginatedData.map(item => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("tr", { className: `${classNameTr_row} cw_tbody_tr`, children: [expandedRowRender && (jsxRuntime.jsx("td", { className: "cw_tbody_td", children: jsxRuntime.jsx("button", { onClick: () => handleRowExpand(item), className: `cwellt_flex cwellt_justify_center cwellt_align_items_center cw_button_expanded_collapse ${expandedRowKey === item.key ? "cw_button_expanded" : "cw_button_collapse"}` }) })), columns.map(column => (jsxRuntime.jsx("td", { className: "cw_tbody_td", children: column.render ? column.render(item) : item[column.dataIndex] }, `${item.key}_${column.key}`)))] }), expandedRowKey === item.key && expandedRowRender && (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: columns.length + 1, children: expandedRowRender(item) }) }))] }, item.key)))) })] }), pagination && totalPages > 1 && (jsxRuntime.jsxs("div", { className: "cw_table_pagination cwellt_flex cwellt_align-items-start cwellt_align_items_center", children: [jsxRuntime.jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1, className: "cw_tb_button_pag cw_tb_button_prev cwellt_flex cwellt_justify_center cwellt_align_items_center" }), jsxRuntime.jsxs("span", { className: "cw_table_pag_desc", children: ["Page ", currentPage, " of ", totalPages] }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages, className: "cw_tb_button_pag cw_tb_button_next cwellt_flex cwellt_justify_center cwellt_align_items_center" })] }))] }));
 }
 
-var styles$4 = {"cw-tabs":"cw-tabs-module_cw-tabs__1pmji","cw-tabs-content":"cw-tabs-module_cw-tabs-content__HTp8d"};
+var styles$8 = {"cw-tabs":"cw-tabs-module_cw-tabs__1pmji","cw-tabs-content":"cw-tabs-module_cw-tabs-content__HTp8d"};
 
 const TabIcon = ({ icon }) => {
     if (!icon)
@@ -863,31 +987,31 @@ function CwTabs(CwTabsProps) {
         }
     };
     const position = CwTabsProps.tabsPosition || 'top';
-    return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, className: styles$4['cw-tabs'], "data-tabs-position": position, children: [jsxRuntime.jsx("ul", { children: CwTabsProps.tabs.map(tab => (jsxRuntime.jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, children: [jsxRuntime.jsx(TabIcon, { icon: tab.icon }), tab.title] }, tab.key))) }), jsxRuntime.jsx("div", { className: styles$4['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
+    return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, className: styles$8['cw-tabs'], "data-tabs-position": position, children: [jsxRuntime.jsx("ul", { children: CwTabsProps.tabs.map(tab => (jsxRuntime.jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, children: [jsxRuntime.jsx(TabIcon, { icon: tab.icon }), tab.title] }, tab.key))) }), jsxRuntime.jsx("div", { className: styles$8['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
 }
 
 /**
  * An expandable element with briefing and children displayed when clicked
- * @param $briefing Title of the expandable
- * @param $onToggle Function to run when expandable is toggled open/closed
- * @param $onClose Function to run when expandable is closed
- * @param $onOpen Function to run when expandable is opened
+ * @param briefing Title of the expandable
+ * @param onToggle Function to run when expandable is toggled open/closed
+ * @param onClose Function to run when expandable is closed
+ * @param onOpen Function to run when expandable is opened
  * @example
- * <CwExpandable $briefing="Title here">Contents here</CwExpandable>
+ * <CwExpandable briefing="Title here">Contents here</CwExpandable>
  */
-const CwExpandable = ({ $briefing, $onToggle, $onOpen, $onClose, children, ...detailsProps }) => {
+const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detailsProps }) => {
     const myRef = React.useRef(null);
     React.useEffect(() => {
         myRef.current?.addEventListener("click", ev => {
             const isOpen = ev.currentTarget.open;
-            $onToggle?.(!isOpen);
+            onToggle?.(!isOpen);
             if (!isOpen)
-                $onOpen?.(ev);
+                onOpen?.(ev);
             else
-                $onClose?.(ev);
+                onClose?.(ev);
         });
-    }, [$onClose, $onOpen, $onToggle]);
-    return (jsxRuntime.jsx("div", { className: "cw-expandable", children: jsxRuntime.jsxs("details", { ref: myRef, ...detailsProps, children: [jsxRuntime.jsx("summary", { children: $briefing }), children && jsxRuntime.jsx("section", { children: children })] }) }));
+    }, [onClose, onOpen, onToggle]);
+    return (jsxRuntime.jsx("div", { className: "cw-expandable", children: jsxRuntime.jsxs("details", { ref: myRef, ...detailsProps, children: [jsxRuntime.jsx("summary", { children: briefing }), children && jsxRuntime.jsx("section", { children: children })] }) }));
 };
 
 /**
@@ -985,12 +1109,6 @@ function CwFileUpload(fileUploadProps) {
                     if (typeof reader.result === "string") {
                         const hexContent = arrayBufferToHex(reader.result);
                         setCurrentHexContent(hexContent);
-                        debugger;
-                        // fileUploadProps.onChange({
-                        // 	...file,
-                        // 	Value:
-                        // 	Bindata: hexContent // Replace Bindata with the new hexadecimal content
-                        // });
                         setPreviewURL(reader.result);
                         setCurrentHexContent(arrayBufferToHex(reader.result));
                         // Llama a la función para guardar el contenido hexadecimal
@@ -1031,8 +1149,8 @@ function CwInput(CwInputProps) {
 }
 
 function CwButton(props) {
-    const { $text, ...buttonProps } = props;
-    return (jsxRuntime.jsx("button", { type: "button", className: "cw-button", ...buttonProps, children: buttonProps.children ?? $text }));
+    const { text, ...buttonProps } = props;
+    return (jsxRuntime.jsx("button", { type: "button", className: "cw-button", ...buttonProps, children: buttonProps.children ?? text }));
 }
 
 /**
@@ -1048,15 +1166,15 @@ function CwButton(props) {
  * @example
  * ```tsx
  * <CwDigit
- *   $iconProps={{ $id: "home" }}
- *   $labelProps={{ children: "Name", width: "100px" }}
- *   $buttonProps={{ children: "Ok", onclick:()=>{alert("hi")} }}
+ *   iconProps={{ id: "home" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onclick:()=>{alert("hi")} }}
  * />
  * ```
  */
 function CwDigit(props) {
-    const { $alignProps, $buttonProps, $iconProps, $labelProps, ...$inputProps } = props;
-    return (jsxRuntime.jsx("div", { className: "cw-input-text", children: jsxRuntime.jsxs(CwAlign, { ...$alignProps, itemProp: $inputProps.required === true ? "required" : "", children: [$labelProps && (jsxRuntime.jsxs(CwLabel, { ...$labelProps, children: [$iconProps && jsxRuntime.jsx(CwIcon, { ...$iconProps }), $labelProps.$text] })), jsxRuntime.jsx("input", { type: "number", ...$inputProps }), $buttonProps && jsxRuntime.jsx(CwButton, { ...$buttonProps })] }) }));
+    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
+    return (jsxRuntime.jsx("div", { className: "cw-input-text", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("input", { type: "number", ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
 }
 
 /**
@@ -1072,15 +1190,15 @@ function CwDigit(props) {
  * @example
  * ```tsx
  * <CwInputText
- *   $iconProps={{ $id: "home" }}
- *   $labelProps={{ children: "Name", width: "100px" }}
- *   $buttonProps={{ children: "Ok", onclick:()=>{alert("hi")} }}
+ *   iconProps={{ id: "home" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onclick:()=>{alert("hi")} }}
  * />
  * ```
  */
 function CwInputText(props) {
-    const { $alignProps, $buttonProps, $iconProps, $labelProps, ...inputProps } = props;
-    return (jsxRuntime.jsx("div", { className: "cw-input-text", children: jsxRuntime.jsxs(CwAlign, { ...$alignProps, itemProp: inputProps.required === true ? "required" : "", children: [$labelProps && (jsxRuntime.jsxs(CwLabel, { ...$labelProps, children: [$iconProps && jsxRuntime.jsx(CwIcon, { ...$iconProps }), $labelProps.$text] })), jsxRuntime.jsx("input", { type: props.type ?? "text", ...inputProps }), $buttonProps && jsxRuntime.jsx(CwButton, { ...$buttonProps })] }) }));
+    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
+    return (jsxRuntime.jsx("div", { className: "cw-input-text", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("input", { type: props.type ?? "text", ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
 }
 
 /**
@@ -1095,12 +1213,12 @@ function CwInputText(props) {
  * ```
  * @example
  * ```tsx
- * <CwInputPhone $iconProps={{_id:"phone"}} $labelProps={{children:"Phone"}} />
+ * <CwInputPhone iconProps={{iconId:"phone"}} labelProps={{children:"Phone"}} />
  * ```
  */
 function CwInputPhone(props) {
-    const { $alignProps, $buttonProps, $iconProps, $labelProps, ...inputProps } = props;
-    return (jsxRuntime.jsx("div", { className: "cw-input-phone", children: jsxRuntime.jsxs(CwAlign, { ...$alignProps, itemProp: inputProps.required === true ? "required" : "", children: [$labelProps && (jsxRuntime.jsxs(CwLabel, { ...$labelProps, children: [$iconProps && jsxRuntime.jsx(CwIcon, { ...$iconProps }), $labelProps.$text] })), jsxRuntime.jsx("input", { type: "tel", placeholder: "+## ### ### ###", pattern: "[+0-9 ]*", maxLength: 16, ...inputProps }), $buttonProps && jsxRuntime.jsx(CwButton, { ...$buttonProps })] }) }));
+    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
+    return (jsxRuntime.jsx("div", { className: "cw-input-phone", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("input", { type: "tel", placeholder: "+## ### ### ###", pattern: "[+0-9 ]*", maxLength: 16, ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
 }
 
 function CwInputNumber(CwInputNumberProps) {
@@ -1117,8 +1235,8 @@ function CwInputNumber(CwInputNumberProps) {
 }
 
 function CwTextArea(props) {
-    const { $alignProps, $buttonProps, $iconProps, $labelProps, $resize, ...textareaProps } = props;
-    return (jsxRuntime.jsx("div", { className: "cw-text-area", children: jsxRuntime.jsxs(CwAlign, { ...$alignProps, children: [$labelProps && (jsxRuntime.jsxs(CwLabel, { ...$labelProps, children: [$iconProps && jsxRuntime.jsx(CwIcon, { ...$iconProps }), $labelProps.$text] })), jsxRuntime.jsx("textarea", { ...textareaProps, itemProp: textareaProps.required === true ? "required" : "", style: { ...textareaProps.style, resize: $resize } }), $buttonProps && jsxRuntime.jsx(CwButton, { ...$buttonProps })] }) }));
+    const { alignProps, buttonProps, iconProps, labelProps, resize, ...textareaProps } = props;
+    return (jsxRuntime.jsx("div", { className: "cw-text-area", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("textarea", { ...textareaProps, itemProp: textareaProps.required === true ? "required" : "", style: { ...textareaProps.style, resize: resize } }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
 }
 
 /**
@@ -1134,16 +1252,16 @@ function CwTextArea(props) {
  * @example
  * ```tsx
  * <CwInputDate
- *   $iconProps={{ $id: "Birthdate" }}
- *   $labelProps={{ children: "Name", width: "100px" }}
- *   $buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
+ *   iconProps={{ iconId: "Birthdate" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
  * />
  * ```
  */
 function CwInputDate(props) {
-    const { $alignProps, $buttonProps, $iconProps, $labelProps, ...$inputProps } = props;
-    $inputProps.max = $inputProps.max ?? "9999-01-01";
-    return (jsxRuntime.jsx("div", { className: "cw-input-date", children: jsxRuntime.jsxs(CwAlign, { ...$alignProps, itemProp: $inputProps.required === true ? "required" : "", children: [$labelProps && (jsxRuntime.jsxs(CwLabel, { ...$labelProps, children: [$iconProps && jsxRuntime.jsx(CwIcon, { ...$iconProps }), $labelProps.$text] })), jsxRuntime.jsx("input", { type: "date", ...$inputProps }), $buttonProps && jsxRuntime.jsx(CwButton, { ...$buttonProps })] }) }));
+    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
+    inputProps.max = inputProps.max ?? "9999-01-01";
+    return (jsxRuntime.jsx("div", { className: "cw-input-date", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("input", { type: "date", ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
 }
 
 var classes = {"datePicker":"cw-input-date-picker-module_datePicker__jogOq","input":"cw-input-date-picker-module_input__uQshH","calendar":"cw-input-date-picker-module_calendar__q39ic","calendarHeader":"cw-input-date-picker-module_calendarHeader__1btPK","arrowButton":"cw-input-date-picker-module_arrowButton__23tNc","calendarTitle":"cw-input-date-picker-module_calendarTitle__oOODw","calendarBody":"cw-input-date-picker-module_calendarBody__-711a","calendarDay":"cw-input-date-picker-module_calendarDay__z-Mmv","selected":"cw-input-date-picker-module_selected__XQgR7","todayButton":"cw-input-date-picker-module_todayButton__oYamC","emptyDay":"cw-input-date-picker-module_emptyDay__lbI5B"};
@@ -1267,16 +1385,16 @@ const CwInputDatePicker = ({ value, onChange }) => {
  * @example
  * ```tsx
  * <CwInputDate
- *   $iconProps={{ $id: "Birthdate" }}
- *   $labelProps={{ children: "Name", width: "100px" }}
- *   $buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
+ *   iconProps={{ id: "Birthdate" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
  * />
  * ```
  */
 function CwInputDatetime(props) {
-    const { $alignProps, $buttonProps, $iconProps, $labelProps, ...inputProps } = props;
+    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
     inputProps.max = inputProps.max ?? "9999-01-01";
-    return (jsxRuntime.jsx("div", { className: "cw-input-date", children: jsxRuntime.jsxs(CwAlign, { ...$alignProps, itemProp: inputProps.required === true ? "required" : "", children: [$labelProps && (jsxRuntime.jsxs(CwLabel, { ...$labelProps, children: [$iconProps && jsxRuntime.jsx(CwIcon, { ...$iconProps }), $labelProps.$text] })), jsxRuntime.jsx("input", { type: "datetime-local", ...inputProps }), $buttonProps && jsxRuntime.jsx(CwButton, { ...$buttonProps })] }) }));
+    return (jsxRuntime.jsx("div", { className: "cw-input-date", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("input", { type: "datetime-local", ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
 }
 
 /**
@@ -1292,16 +1410,16 @@ function CwInputDatetime(props) {
  * @example
  * ```tsx
  * <CwTime
- *   $iconProps={{ $id: "Birthdate" }}
- *   $labelProps={{ children: "Name", width: "100px" }}
- *   $buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
+ *   iconProps={{ iconId: "Birthdate" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
  * />
  * ```
  */
 function CwTime(props) {
-    const { $alignProps, $buttonProps, $iconProps, $labelProps, ...inputProps } = props;
+    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
     inputProps.max = inputProps.max ?? "9999-01-01";
-    return (jsxRuntime.jsx("div", { className: "cw-input-date", children: jsxRuntime.jsxs(CwAlign, { ...$alignProps, itemProp: inputProps.required === true ? "required" : "", children: [$labelProps && (jsxRuntime.jsxs(CwLabel, { ...$labelProps, children: [$iconProps && jsxRuntime.jsx(CwIcon, { ...$iconProps }), $labelProps.$text] })), jsxRuntime.jsx("input", { type: "time", ...inputProps }), $buttonProps && jsxRuntime.jsx(CwButton, { ...$buttonProps })] }) }));
+    return (jsxRuntime.jsx("div", { className: "cw-input-date", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("input", { type: "time", ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
 }
 
 /**
@@ -1320,17 +1438,17 @@ function CwTime(props) {
  * @example
  * ```tsx
  * <CwInputDateText
- *   $iconProps={{ $id: "Birthdate" }}
- *   $labelProps={{ children: "Name", width: "100px" }}
- *   $buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
+ *   iconProps={{ id: "Birthdate" }}
+ *   labelProps={{ children: "Name", width: "100px" }}
+ *   buttonProps={{ children: "Ok", onClick:()=>{alert("happy happy joy joy")} }}
  * />
  * ```
  */
 function CwInputDateText(props) {
     const displayFormat = "DD.MM.YYYY";
     const internalFormat = "YYYY-MM-DD";
-    const { $alignProps, $buttonProps, $iconProps, $labelProps, $format, value, size, onChange, name, required, tabIndex, disabled, readOnly, ...inputProps } = props;
-    const format = $format ?? displayFormat;
+    const { alignProps, buttonProps, iconProps, labelProps, dateFormat, value, size, onChange, name, required, tabIndex, disabled, readOnly, ...inputProps } = props;
+    const format = dateFormat ?? displayFormat;
     const width = size ?? 12;
     const formattedDate = (date, inFormat, outFormat) => {
         if (moment(date, inFormat, true).isValid()) {
@@ -1385,15 +1503,15 @@ function CwInputDateText(props) {
             onChange?.({ target: { value: date, name: name } });
         }
     }, [date]);
-    return (jsxRuntime.jsx("div", { className: "cw-input-date-text", children: jsxRuntime.jsxs(CwAlign, { ...$alignProps, itemProp: required ? "required" : "", children: [$labelProps && (jsxRuntime.jsxs(CwLabel, { ...$labelProps, children: [$iconProps && jsxRuntime.jsx(CwIcon, { ...$iconProps }), $labelProps.$text] })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("input", { type: "text", disabled: disabled, maxLength: 10, onChange: onChangeInputText, pattern: "^$ --|[.0-9\\/\\-]{10}", placeholder: format.toLowerCase(), readOnly: readOnly, ref: textInputRef, required: required, size: width, tabIndex: tabIndex, value: displayedDate }), jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx(CwIcon, { "$id": "calendar" }), jsxRuntime.jsx("input", { type: "date", disabled: disabled, onChange: onChangeInputDate, readOnly: readOnly, ref: dateInputRef, tabIndex: -1, value: date, ...inputProps })] })] }), $buttonProps && jsxRuntime.jsx(CwButton, { ...$buttonProps })] }) }));
+    return (jsxRuntime.jsx("div", { className: "cw-input-date-text", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("input", { type: "text", disabled: disabled, maxLength: 10, onChange: onChangeInputText, pattern: "^$ --|[.0-9\\/\\-]{10}", placeholder: format.toLowerCase(), readOnly: readOnly, ref: textInputRef, required: required, size: width, tabIndex: tabIndex, value: displayedDate }), jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx(CwIcon, { iconId: "calendar" }), jsxRuntime.jsx("input", { type: "date", disabled: disabled, onChange: onChangeInputDate, readOnly: readOnly, ref: dateInputRef, tabIndex: -1, value: date, ...inputProps })] })] }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
 }
 
 function CwInputImage(props) {
     const [_uploadedImage, setUploadedImage] = React.useState(null);
     const inputRef = React.useRef(null);
-    const { $allowedImageFormats, onChange, ...inputProps } = props;
-    const allowedImageFormats = $allowedImageFormats || ["image/jpeg", "image/png", "image/gif"];
-    const isValidFileType = (type) => allowedImageFormats.includes(type);
+    const { allowedImageFormats, onChange, ...inputProps } = props;
+    const allowedFormats = allowedImageFormats || ["image/jpeg", "image/png", "image/gif"];
+    const isValidFileType = (type) => allowedFormats.includes(type);
     const handleFile = (file) => {
         if (file && isValidFileType(file.type)) {
             const imgURL = URL.createObjectURL(file);
@@ -1434,7 +1552,7 @@ function CwInputImage(props) {
         const file = e.target.files?.[0];
         handleFile(file ?? null);
     };
-    return (jsxRuntime.jsxs("div", { className: "cw-input-image", children: [jsxRuntime.jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, style: { border: "2px dashed #ccc", padding: "20px", textAlign: "center" }, children: [jsxRuntime.jsx("p", { children: "Drop image here" }), jsxRuntime.jsxs("small", { children: ["(", allowedImageFormats.join(", ").replace(/image\//g, ""), ")"] })] }), jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "center" }, children: [jsxRuntime.jsxs(CwButton, { style: { margin: "2px" }, onClick: onPasteButtonClick, children: [jsxRuntime.jsx(CwIcon, { "$id": "clipboard" }), "\u2002Paste"] }), jsxRuntime.jsxs(CwButton, { style: { margin: "2px" }, onClick: () => inputRef.current?.click(), children: [jsxRuntime.jsx(CwIcon, { "$id": "folder" }), "\u2002Browse"] })] }), jsxRuntime.jsx("input", { ref: inputRef, type: "file", accept: allowedImageFormats.join(","), onChange: handleFileChange, style: { display: "none" }, ...inputProps })] }));
+    return (jsxRuntime.jsxs("div", { className: "cw-input-image", children: [jsxRuntime.jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, style: { border: "2px dashed #ccc", padding: "20px", textAlign: "center" }, children: [jsxRuntime.jsx("p", { children: "Drop image here" }), jsxRuntime.jsxs("small", { children: ["(", allowedFormats.join(", ").replace(/image\//g, ""), ")"] })] }), jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "center" }, children: [jsxRuntime.jsxs(CwButton, { style: { margin: "2px" }, onClick: onPasteButtonClick, children: [jsxRuntime.jsx(CwIcon, { iconId: "clipboard" }), "\u2002Paste"] }), jsxRuntime.jsxs(CwButton, { style: { margin: "2px" }, onClick: () => inputRef.current?.click(), children: [jsxRuntime.jsx(CwIcon, { iconId: "folder" }), "\u2002Browse"] })] }), jsxRuntime.jsx("input", { ref: inputRef, type: "file", accept: allowedFormats.join(","), onChange: handleFileChange, style: { display: "none" }, ...inputProps })] }));
 }
 
 /**
@@ -1466,18 +1584,18 @@ function CwInputImage(props) {
  * <CwImageArea src="path/to/image.png" _onSelectionSuccess={img => setImage(img)} />
  */
 const CwImageArea = React.forwardRef((props, ref) => {
-    const { $alignProps, $initialSelectionArea, $onSelectionEnd, $onSelectionStart, $onSelectionSuccess, $selectionAreaAttenuation, $selectionAreaStyle, ...imgProps } = props;
+    const { alignProps: alignProps, initialSelectionArea: initialSelectionArea, onSelectionEnd, onSelectionStart, onSelectionSuccess, selectionAreaAttenuation: selectionAreaAttenuation, selectionAreaStyle: selectionAreaStyle, ...imgProps } = props;
     // Default no-op functions for selection callbacks
-    const onSelectionStart = $onSelectionStart || (() => true);
-    const onSelectionEnd = $onSelectionEnd || (() => true);
-    const onSelectionSuccess = $onSelectionSuccess || (() => { });
+    const onSelectionStartHandler = onSelectionStart || (() => true);
+    const onSelectionEndHandler = onSelectionEnd || (() => true);
+    const onSelectionSuccessHandler = onSelectionSuccess || (() => { });
     // Ref to the image element and state management hooks
     const imageRef = React.useRef(null);
     const [selectedImage, setSelectedImage] = React.useState();
-    const [opacity, setOpacity] = React.useState($selectionAreaAttenuation ?? $selectionAreaStyle?.opacity ?? "1.0");
+    const [opacity, setOpacity] = React.useState(selectionAreaAttenuation ?? selectionAreaStyle?.opacity ?? "1.0");
     // Track drag start position and selected area
     const [dragStart, setDragStart] = React.useState(null);
-    const [selectedArea, setSelectedArea] = React.useState($initialSelectionArea ?? null);
+    const [selectedArea, setSelectedArea] = React.useState(initialSelectionArea ?? null);
     // Expose component methods using ref
     React.useImperativeHandle(ref, () => ({
         getSelectedImage: () => selectedImage
@@ -1488,13 +1606,13 @@ const CwImageArea = React.forwardRef((props, ref) => {
         if (rect) {
             const x = event.clientX - rect.left;
             const y = event.clientY - rect.top;
-            if (onSelectionStart(x, y)) {
+            if (onSelectionStartHandler(x, y)) {
                 setDragStart({ x, y });
             }
             setSelectedArea(null);
-            setOpacity($selectionAreaStyle?.opacity ?? 1);
+            setOpacity(selectionAreaStyle?.opacity ?? 1);
         }
-    }, [onSelectionStart]);
+    }, [onSelectionStartHandler]);
     // Update selection area as mouse moves
     const onMouseMove = React.useCallback((event) => {
         if (dragStart && imageRef.current) {
@@ -1514,12 +1632,12 @@ const CwImageArea = React.forwardRef((props, ref) => {
             const scaleX = imageRef.current.naturalWidth / rect.width;
             const scaleY = imageRef.current.naturalHeight / rect.height;
             const scaledArea = new DOMRect(selectedArea.x * scaleX, selectedArea.y * scaleY, selectedArea.width * scaleX, selectedArea.height * scaleY);
-            if (onSelectionEnd(scaledArea))
+            if (onSelectionEndHandler(scaledArea))
                 createSelectedImage(scaledArea);
-            setOpacity($selectionAreaAttenuation ?? $selectionAreaStyle?.opacity ?? 1);
+            setOpacity(selectionAreaAttenuation ?? selectionAreaStyle?.opacity ?? 1);
             setDragStart(null);
         }
-    }, [selectedArea, $onSelectionEnd]);
+    }, [selectedArea, onSelectionEndHandler]);
     // Create an image from the selected area
     const createSelectedImage = React.useCallback((scaledArea) => {
         const canvas = document.createElement("canvas");
@@ -1530,12 +1648,12 @@ const CwImageArea = React.forwardRef((props, ref) => {
             ctx.drawImage(imageRef.current, scaledArea.x, scaledArea.y, scaledArea.width, scaledArea.height, 0, 0, canvas.width, canvas.height);
             const selectedImageURL = canvas.toDataURL("image/png");
             setSelectedImage(selectedImageURL);
-            onSelectionSuccess(selectedImageURL);
+            onSelectionSuccessHandler(selectedImageURL);
         }
-    }, [onSelectionSuccess]);
+    }, [onSelectionSuccessHandler]);
     // Render the component UI
-    return (jsxRuntime.jsx("div", { className: "cw-image-area", children: jsxRuntime.jsxs(CwAlign, { "$position": "relative", ...$alignProps, children: [jsxRuntime.jsx("img", { ref: imageRef, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, onDragStart: e => e.preventDefault(), ...imgProps }), selectedArea && (jsxRuntime.jsx("section", { style: {
-                        ...$selectionAreaStyle,
+    return (jsxRuntime.jsx("div", { className: "cw-image-area", children: jsxRuntime.jsxs(CwAlign, { position: "relative", ...alignProps, children: [jsxRuntime.jsx("img", { ref: imageRef, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, onDragStart: e => e.preventDefault(), ...imgProps }), selectedArea && (jsxRuntime.jsx("section", { style: {
+                        ...selectionAreaStyle,
                         height: `${selectedArea.height}px`,
                         left: `${selectedArea.x}px`,
                         opacity: opacity,
@@ -1548,7 +1666,7 @@ const CwImageArea = React.forwardRef((props, ref) => {
 });
 CwImageArea.displayName = "CwImageArea";
 
-var styles$3 = {"cw-weekday-selector":"cw-weekday-selector-module_cw-weekday-selector__Iz4GZ"};
+var styles$7 = {"cw-weekday-selector":"cw-weekday-selector-module_cw-weekday-selector__Iz4GZ"};
 
 /**
  * This class represents a week where days can be selected or unselected
@@ -1688,7 +1806,7 @@ const CwWeekdaySelector = ({ value = "", onChange, disabled = false }) => {
         setSelectedDays(newWeekdays);
         onChange?.(newWeekdays.toString());
     };
-    return (jsxRuntime.jsx("div", { className: styles$3["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsxRuntime.jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
+    return (jsxRuntime.jsx("div", { className: styles$7["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsxRuntime.jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
 };
 
 function CwCheckbox(CwCheckboxProps) {
@@ -1714,8 +1832,8 @@ function CwCheckbox(CwCheckboxProps) {
  * <CwToggle checked/>
  */
 function CwToggle(props) {
-    const { $alignProps, $labelProps, $buttonProps, $iconProps, ...$inputProps } = props;
-    return (jsxRuntime.jsx("div", { className: "cw-toggle", children: jsxRuntime.jsxs(CwAlign, { ...$alignProps, children: [$labelProps && (jsxRuntime.jsxs(CwLabel, { ...$labelProps, children: [$iconProps && jsxRuntime.jsx(CwIcon, { ...$iconProps }), $labelProps.$text] })), jsxRuntime.jsx("input", { className: "cw-toggle", type: "checkbox", ...$inputProps }), $buttonProps && jsxRuntime.jsx(CwButton, { ...$buttonProps })] }) }));
+    const { alignProps, labelProps, buttonProps, iconProps, ...inputProps } = props;
+    return (jsxRuntime.jsx("div", { className: "cw-toggle", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("input", { className: "cw-toggle", type: "checkbox", ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
 }
 
 /**
@@ -1730,8 +1848,8 @@ function CwToggle(props) {
  * </CwSelect>
  */
 function CwOption(props) {
-    const { $text, ...optionProps } = props;
-    return (jsxRuntime.jsx("option", { className: "cw-option", ...optionProps, children: optionProps.children ?? $text }));
+    const { text, ...optionProps } = props;
+    return (jsxRuntime.jsx("option", { className: "cw-option", ...optionProps, children: optionProps.children ?? text }));
 }
 
 /**
@@ -1751,7 +1869,7 @@ function CwOption(props) {
  *              ╰────────────────────╯
  * ```
  * @example
- * <CwSelect name="cat" $iconProps={{_id:"pet"}} $labelProps={{children:"Cat:"}}>
+ * <CwSelect name="cat" iconProps={{iconId:"pet"}} labelProps={{children:"Cat:"}}>
  *   <CwOption value="" > - Choose a cat - </CwOption>
  *   <CwOption value="o" >Orange</CwOption>
  *   <CwOption value="b" >Black</CwOption>
@@ -1759,8 +1877,8 @@ function CwOption(props) {
  * </CwSelect>
  */
 function CwSelect(props) {
-    const { $alignProps, $labelProps, $buttonProps, $iconProps, $placeholder, children, ...$selectProps } = props;
-    return (jsxRuntime.jsx("div", { className: "cw-select", children: jsxRuntime.jsxs(CwAlign, { ...$alignProps, itemProp: $selectProps.required === true ? "required" : "", children: [$labelProps && (jsxRuntime.jsxs(CwLabel, { ...$labelProps, children: [$iconProps && jsxRuntime.jsx(CwIcon, { ...$iconProps }), $labelProps.$text] })), jsxRuntime.jsxs("select", { ...$selectProps, children: [$placeholder && jsxRuntime.jsx(CwOption, { value: "", children: $placeholder }), children] }), $buttonProps && jsxRuntime.jsx(CwButton, { ...$buttonProps })] }) }));
+    const { alignProps, labelProps, buttonProps, iconProps, placeholder, children, ...selectProps } = props;
+    return (jsxRuntime.jsx("div", { className: "cw-select", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: selectProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsxs("select", { ...selectProps, children: [placeholder && jsxRuntime.jsx(CwOption, { value: "", children: placeholder }), children] }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
 }
 
 function CwDropdown(optionsProps) {
@@ -2656,13 +2774,13 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
                                 }) }) }, "_" + i))) })] }) }) }));
 }
 
-var styles$2 = {"cw-multifilter-tag":"cw-multi-filter-tag-module_cw-multifilter-tag__Epda-"};
+var styles$6 = {"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 (jsxRuntime.jsxs("li", { className: styles$2["cw-multifilter-tag"], "data-selected": !!props.Selected, "data-removable": !!props.Removable, style: {
+    return (jsxRuntime.jsxs("li", { className: styles$6["cw-multifilter-tag"], "data-selected": !!props.Selected, "data-removable": !!props.Removable, style: {
             color: TextColor,
             backgroundColor: BackgroundColor,
             opacity: Selected && !Removable ? "0.5" : "1",
@@ -2670,10 +2788,10 @@ const CwMultiFilterTag = props => {
         }, onClick: () => {
             if (Selectable)
                 OnSelect?.(props);
-        }, children: [jsxRuntime.jsx("span", { id: ID, "data-value": Value, "data-category": Category, children: Name }), Removable && (jsxRuntime.jsx("span", { onClick: () => props.OnRemove?.(props), children: jsxRuntime.jsx(CwIcon, { "$id": "xmark" }) }))] }));
+        }, children: [jsxRuntime.jsx("span", { id: ID, "data-value": Value, "data-category": Category, children: Name }), Removable && (jsxRuntime.jsx("span", { onClick: () => props.OnRemove?.(props), children: jsxRuntime.jsx(CwIcon, { iconId: "xmark" }) }))] }));
 };
 
-var styles$1 = {"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$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"};
 
 /**
  * A multiple filter selector, a MULTI-SELECT even.
@@ -2698,14 +2816,14 @@ var styles$1 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-m
  * const [selectedCategory, setSelectedCategory] = useState("");
  *
  * <CwMultiFilter
- *  $id="multifilter"
- *  $onChange={tags => { // Collection of currently active tags
+ *  id="multifilter"
+ *  onChange={tags => { // Collection of currently active tags
  *    console.log("This will get called every time the selected filters change");
  *  }}
- *  $selectedTags={selectedTags} // Selected filters, in case you want to modify them manually
+ *  selectedTags={selectedTags} // Selected filters, in case you want to modify them manually
  *  selectedCategory={selectedCategory}
  *  onChangeCategory={setSelectedCategory}
- *  $allTags={
+ *  allTags={
  *    new Set([
  *      {
  *        Name: "DEF", // The text displayed on the tag/filter/chip
@@ -2727,7 +2845,7 @@ var styles$1 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-m
  *  }
  * ```
  * @param {CwMultiFilterProps} props
- * @returns Set the `$onChange` callback to a function to check for changes in the selected filters
+ * @returns Set the `onChange` callback to a function to check for changes in the selected filters
  */
 const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style }) => {
     const [filteredTags, setFilteredTags] = React.useState(new Set());
@@ -2830,9 +2948,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
             inputRef.current?.focus();
         }
     };
-    return (jsxRuntime.jsxs("form", { ref: componentRef, id: id, className: styles$1["cw-multi-filter"], style: style, onSubmit: (e) => {
+    return (jsxRuntime.jsxs("form", { ref: componentRef, id: id, className: styles$5["cw-multi-filter"], style: style, onSubmit: (e) => {
             e.preventDefault();
-        }, children: [jsxRuntime.jsxs("div", { onClick: handleDivClick, className: styles$1["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-primary)", outlineOffset: "-2px" } : {}, children: [jsxRuntime.jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (React.createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsxRuntime.jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.target.value), autoComplete: "off", onKeyDown: e => {
+        }, children: [jsxRuntime.jsxs("div", { onClick: handleDivClick, className: styles$5["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-primary)", outlineOffset: "-2px" } : {}, children: [jsxRuntime.jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (React.createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsxRuntime.jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.target.value), autoComplete: "off", onKeyDown: e => {
                                     switch (e.key) {
                                         case "Enter":
                                         case "Tab":
@@ -2853,7 +2971,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
                                 } })] }), selectedTags.size > 0 ? (jsxRuntime.jsx("input", { type: "reset", value: "\u00D7", onClick: e => {
                             e.preventDefault();
                             onChangeSelectedTags?.(new Set());
-                        } })) : null] }), jsxRuntime.jsxs("section", { className: styles$1["cw-multi-filter-catalog-container"], "data-display-none": !isPanelOpen, children: [jsxRuntime.jsxs("nav", { children: [jsxRuntime.jsx("button", { style: selectedCategory === "All"
+                        } })) : null] }), jsxRuntime.jsxs("section", { className: styles$5["cw-multi-filter-catalog-container"], "data-display-none": !isPanelOpen, children: [jsxRuntime.jsxs("nav", { children: [jsxRuntime.jsx("button", { style: selectedCategory === "All"
                                     ? {
                                         backgroundColor: "var(--cw-color-primary-container)",
                                         color: "var(--cw-color-primary)",
@@ -2916,7 +3034,7 @@ function CwSearchInput(optionsProps) {
                             : "cw_label_text" + " " + optionsProps.labelClassName, children: optionsProps.labelName }), jsxRuntime.jsx("input", { type: "text", value: searchText, onChange: handleInputChange, placeholder: "Search...", className: "cw_input_search", disabled: optionsProps.disabled }), searchText && (jsxRuntime.jsx("button", { className: "cw_button_search_clear cwelt_flex cwellt_justify_center cwellt_align_items_center cwellt_p_abs", onClick: handleClearClick }))] }), filteredOptions.length > 0 && (jsxRuntime.jsx("div", { className: "cw_searchInput_dropDown cwellt_p_abs", children: jsxRuntime.jsx("ul", { className: "cw_searchInput_listContainer", children: filteredOptions.map((option) => (jsxRuntime.jsx("li", { onClick: () => handleOptionSelect(option), className: "cw_searchInput_list cwellt_flex cwellt_align_items_center", children: option.description }, option.id))) }) }))] }));
 }
 
-var styles = {"context-menu":"cw-context-menu-module_context-menu__dbxnO","context-menu-item":"cw-context-menu-module_context-menu-item__B2W-Q"};
+var styles$4 = {"context-menu":"cw-context-menu-module_context-menu__dbxnO","context-menu-item":"cw-context-menu-module_context-menu-item__B2W-Q"};
 
 /**
  * A context menu that is rendered when the user clicks on a button.
@@ -2953,10 +3071,10 @@ const CwContextMenu = ({ children, options, onSelect }) => {
             document.removeEventListener("mousedown", handleOutsideClick);
         };
     }, []);
-    return (jsxRuntime.jsxs("div", { onContextMenu: handleContextMenu, children: [children, isOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: styles["context-menu"], style: {
+    return (jsxRuntime.jsxs("div", { onContextMenu: handleContextMenu, children: [children, isOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: styles$4["context-menu"], style: {
                     top: position.y,
                     left: position.x
-                }, children: options.map(option => (jsxRuntime.jsx("div", { onClick: () => handleOptionClick(option), className: styles["context-menu-item"], children: option }, option))) }))] }));
+                }, children: options.map(option => (jsxRuntime.jsx("div", { onClick: () => handleOptionClick(option), className: styles$4["context-menu-item"], children: option }, option))) }))] }));
 };
 
 function CwDataItem(cwBoxItemsProps) {
@@ -4165,8 +4283,16 @@ class CwScheduler2 extends React.Component {
         super(Props);
         this.init(this.props);
     }
+    resizeObserver;
+    calculateMaxPx = () => {
+        const mainElement = document.querySelector(".cw-scheduler-main-wrapper");
+        if (!mainElement)
+            return window.innerWidth - 402; // sidebar + first column + padding
+        const mainRect = mainElement.getBoundingClientRect();
+        return Math.floor(mainRect.width - 162); // first column + padding
+    };
     init = (props) => {
-        const maxPx = (document.getElementById("root")?.clientWidth ?? window.innerWidth) - 150;
+        const maxPx = this.calculateMaxPx();
         const timeHeaders = getTimeHeaders$1(props.startDate, props.endDate);
         const dayPx = maxPx / Math.floor(daysBetweenTwoDates$1(props.startDate, props.endDate));
         const hourPx = dayPx / 24;
@@ -4195,7 +4321,8 @@ class CwScheduler2 extends React.Component {
         };
     };
     initOutside = (events, resources, _nextProps, startDate, endDate) => {
-        const maxPx = (document.getElementById("root")?.clientWidth ?? window.innerWidth) - 150;
+        // const maxPx: number = (document.getElementById("root")?.clientWidth ?? window.innerWidth) - 150;
+        const maxPx = this.calculateMaxPx();
         const timeHeaders = getTimeHeaders$1(startDate, endDate);
         const days = Math.floor(daysBetweenTwoDates$1(startDate, endDate));
         const dayPx = maxPx / days;
@@ -4216,7 +4343,7 @@ class CwScheduler2 extends React.Component {
         this.setState({
             startDate: startDate,
             endDate: endDate,
-            maxPx: maxPx, // window.screen.width * 0.9,
+            maxPx: maxPx,
             dayPx: dayPx,
             hourPx: hourPx,
             minutePx: minutePx,
@@ -4245,15 +4372,47 @@ class CwScheduler2 extends React.Component {
             division: divisions,
             divisionType: divisionType,
         });
+        // Añadir ResizeObserver
+        const mainElement = document.querySelector(".cw-scheduler-main-wrapper");
+        if (mainElement) {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.handleResize();
+            });
+            this.resizeObserver.observe(mainElement);
+        }
         window?.addEventListener("resize", this.handleResize);
     }
+    componentWillUnmount() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        window?.removeEventListener("resize", this.handleResize);
+    }
+    recalculateEventPositions = (events, dayPx, startDate) => {
+        return events.map(event => getEventWithSize$1(event, startDate, dayPx));
+    };
+    updateResourcesWithEvents = (resources, events) => {
+        return resources.map(resource => ({
+            ...resource,
+            events: events.filter(event => event.resourceId === resource.id)
+        }));
+    };
     handleResize = () => {
-        const maxPx = (document.getElementById("root")?.clientWidth ?? window.innerWidth) - 150;
+        const maxPx = this.calculateMaxPx();
         const days = Math.floor(daysBetweenTwoDates$1(this.state.startDate, this.state.endDate));
         const dayPx = maxPx / days;
         const hourPx = dayPx / 24;
-        const updated = { ...this.state, maxPx: maxPx, hourPx: hourPx, dayPx: dayPx };
-        this.setState(updated);
+        const minutePx = dayPx / 1440;
+        const recalculatedEvents = this.recalculateEventPositions(this.state.events, dayPx, this.state.startDate);
+        const updatedResources = this.updateResourcesWithEvents(this.state.resources, recalculatedEvents);
+        this.setState({
+            maxPx,
+            dayPx,
+            hourPx,
+            minutePx,
+            events: recalculatedEvents,
+            resources: updatedResources
+        });
     };
     componentWillReceiveProps(_nextProps) {
         if (this.state.showConsoleLogs) {
@@ -4351,8 +4510,8 @@ class CwScheduler2 extends React.Component {
             return pixels;
         });
         return (jsxRuntime.jsx("div", { id: this.props.id, style: {
-                overflowY: "scroll",
-                maxHeight: isPinnedTable ? "auto" : schedulerHeight,
+                overflowY: "auto",
+                maxHeight: isPinnedTable ? "auto" : schedulerHeight
             }, className: this.state.resources.length > 0 ? "cwellt_tb_con" : "cwellt_tb_con cw_tb_con_emptyValues", children: jsxRuntime.jsxs("table", { id: "cwelltTableScheduler", children: [this.props.id !== "crewAssignmentsScheduler" && (jsxRuntime.jsx(SchedulerHeader$2, { timelineProps: {
                             maxPx: this.state.maxPx,
                             hoursList: this.state.timeHeaders,
@@ -5213,9 +5372,13 @@ const getTimeHeaders = (startDate, endDate) => {
 
 class CwScheduler extends React.Component {
     contentArea;
+    calculateMaxPx = () => {
+        const mainRect = document.body.getBoundingClientRect();
+        return Math.floor(mainRect.width - 200);
+    };
     constructor(props) {
         super(props);
-        const maxPx = (document.getElementsByTagName("main")[0]?.clientWidth ?? window.innerWidth) - 150;
+        const maxPx = this.calculateMaxPx();
         const timeHeaders = getTimeHeaders(props.startDate, props.endDate);
         const dayPx = maxPx / Math.floor(daysBetweenTwoDates(props.startDate, props.endDate));
         const hourPx = dayPx / 24;
@@ -5250,7 +5413,7 @@ class CwScheduler extends React.Component {
         };
     }
     handleResize = () => {
-        const maxPx = (document.getElementsByTagName("main")[0]?.clientWidth ?? window.innerWidth) - 150;
+        const maxPx = this.calculateMaxPx();
         const days = Math.floor(daysBetweenTwoDates(this.props.startDate, this.props.endDate));
         const dayPx = maxPx / days;
         const hourPx = dayPx / 24;
@@ -5275,7 +5438,7 @@ class CwScheduler extends React.Component {
         if (dateChange) {
             const startDate = _nextProps.startDate;
             const endDate = _nextProps.endDate;
-            const maxPx = (document.getElementsByTagName("main")[0]?.clientWidth ?? window.innerWidth) - 150;
+            const maxPx = this.calculateMaxPx();
             const timeHeaders = getTimeHeaders(startDate, endDate);
             const days = Math.floor(daysBetweenTwoDates(startDate, endDate));
             const dayPx = maxPx / days;
@@ -5319,7 +5482,7 @@ class CwScheduler extends React.Component {
         if (!areSameEvents || !areSameRows) {
             const startDate = _nextProps.startDate;
             const endDate = _nextProps.endDate;
-            const maxPx = (document.getElementsByTagName("main")[0]?.clientWidth ?? window.innerWidth) - 150;
+            const maxPx = this.calculateMaxPx();
             const days = Math.floor(daysBetweenTwoDates(startDate, endDate));
             const dayPx = maxPx / days;
             this.setState({
@@ -5385,6 +5548,7 @@ class CwScheduler extends React.Component {
         return (jsxRuntime.jsx("div", { id: this.props.id, style: {
                 overflowY: "scroll",
                 maxHeight: isPinnedTable ? "auto" : schedulerHeight,
+                minHeight: (this.state.resources.length === 1 || this.state.resources.length === 2) ? schedulerHeight + 10 : 0
             }, className: this.state.resources.length > 0 ? "cwellt_tb_con" : "cwellt_tb_con cw_tb_con_emptyValues", children: jsxRuntime.jsxs("table", { id: "cwelltTableScheduler", children: [this.props.id !== "crewAssignmentsScheduler" && (jsxRuntime.jsx(SchedulerHeader$1, { timelineProps: {
                             maxPx: this.state.maxPx,
                             hoursList: this.state.timeHeaders,
@@ -5394,6 +5558,7 @@ class CwScheduler extends React.Component {
                             headerName: this.props.resourceName,
                         }, descriptionColumn: this.props.descriptionColumn })), jsxRuntime.jsx("tbody", { style: {
                             overflow: "visible",
+                            width: this.state.maxPx + 150
                         }, className: isPinnedTable ? "fc-body cw-fc-body-pinned" : "fc-body", children: jsxRuntime.jsxs("tr", { className: "fc_body_row", children: [jsxRuntime.jsx(ResourcesTitleList, { resources: this.state.resources, canBePinned: this.props.canBePinned ?? false, includesPinned: this.props.id.toLowerCase().includes("pinned"), onCrewPinning: this.handleCrewPinning, onClickResourceContextMenu: (_e, resource) => {
                                         if (this.props.scheduler_handleOnClickResourceContextMenu) {
                                             this.props.scheduler_handleOnClickResourceContextMenu(_e, resource);
@@ -5402,32 +5567,6 @@ class CwScheduler extends React.Component {
     }
 }
 
-const SchedulerHeaderDivision = ({ topDivisions, bottomDivisions, classification, topWidth }) => {
-    return (jsxRuntime.jsxs("div", { style: {
-            width: topWidth,
-            cursor: "pointer"
-        }, children: [jsxRuntime.jsx("div", { className: "scheduler-dates", style: {
-                    background: "#e6e6e6",
-                    borderLeft: "1px white solid",
-                    display: "flex",
-                    overflow: "hidden",
-                    alignItems: "center",
-                    justifyContent: "center",
-                }, children: jsxRuntime.jsx("span", { style: { textAlign: "center", height: "2rem", padding: "2px" }, children: topDivisions }) }), jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "space-between", flex: 1 }, children: bottomDivisions.map((element) => (jsxRuntime.jsx("div", { style: {
-                        background: "#cacaca",
-                        display: "flex",
-                        flex: 1,
-                        height: "2rem",
-                        justifyContent: "center",
-                        borderLeft: "white 1px solid",
-                        overflow: "hidden"
-                    }, children: jsxRuntime.jsx("span", { children: element }) }, classification + element + topDivisions))) })] }));
-};
-
-const HeaderTitle = ({ title, dividerText, width }) => {
-    return (jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", width: width }, children: [jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", background: "white", height: "2rem" }, children: jsxRuntime.jsx("span", { children: title }) }), jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", background: "#e6e6e6", height: "2rem" }, children: jsxRuntime.jsx("span", { children: dividerText }) })] }));
-};
-
 function dateFromPercentage(startDate, visibleDays, percentage) {
     const endTime = moment(startDate).add(visibleDays, "day").toDate();
     const timeSpan = endTime.getTime() - startDate.getTime();
@@ -5435,6 +5574,14 @@ function dateFromPercentage(startDate, visibleDays, percentage) {
     return clickedDate;
 }
 
+function getPercentageFromMouseEvent(event) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const totalWidth = rect.width;
+    const clickPercentage = x / totalWidth;
+    return clickPercentage;
+}
+
 class OnClickEvent {
     id;
     constructor(id) {
@@ -5550,22 +5697,66 @@ class OnClickContextMenu {
     }
 }
 
-function getPercentageFromMouseEvent(event) {
-    const rect = event.currentTarget.getBoundingClientRect();
-    const x = event.clientX - rect.left;
-    const totalWidth = rect.width;
-    const clickPercentage = x / totalWidth;
-    return clickPercentage;
-}
+var styles$3 = {"scheduler-header-divisions":"scheduler-header-module_scheduler-header-divisions__1JrNe","scheduler-timeline-now":"scheduler-header-module_scheduler-timeline-now__naREv","scheduler-timeline-label":"scheduler-header-module_scheduler-timeline-label__mLVAp","scheduler-header-title":"scheduler-header-module_scheduler-header-title__Jzy94","scheduler-dates":"scheduler-header-module_scheduler-dates__O7ePQ","current-day":"scheduler-header-module_current-day__FpHiv","scheduler-hours":"scheduler-header-module_scheduler-hours__ZDCVj"};
 
-const SchedulerHeader = ({ content, divisions, visibleDays, selectedDate, width, onEvent }) => {
+const getNow$1 = (isUtc) => {
+    let now = new Date();
+    if (isUtc) {
+        now = new Date(now.getTime() + now.getTimezoneOffset() * 60_000);
+    }
+    return now;
+};
+const TimeLine = ({ left, top = "0px", height, color, width = "2px", zIndexNumber = 0, isHeader, isUtc = false }) => {
+    const [currentTime, setCurrentTime] = React.useState(getNow$1(isUtc));
+    React.useEffect(() => {
+        const interval = setInterval(() => {
+            setCurrentTime(getNow$1(isUtc));
+        }, 60000); // Actualiza cada minuto
+        return () => clearInterval(interval);
+    }, [isUtc]);
+    const timeString = currentTime.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false
+    });
+    return (jsxRuntime.jsx("div", { style: {
+            position: "absolute",
+            top: top,
+            height: height,
+            left: left,
+            width: width,
+            background: color,
+            pointerEvents: "none",
+            zIndex: zIndexNumber,
+        }, className: styles$3["scheduler-timeline-now"], children: isHeader && (jsxRuntime.jsx("span", { style: {
+                color: color,
+            }, className: styles$3["scheduler-timeline-label"], children: timeString })) }));
+};
+
+const SchedulerHeaderDivision = ({ topDivisions, bottomDivisions, classification, topWidth, startDate, endDate }) => {
+    const isToday = () => {
+        if (!startDate)
+            return false;
+        const today = moment();
+        if (endDate) {
+            return today.isBetween(startDate, endDate, 'day', '[]');
+        }
+        return today.isSame(startDate, 'day');
+    };
+    return (jsxRuntime.jsxs("div", { style: {
+            width: topWidth,
+            cursor: "pointer"
+        }, children: [jsxRuntime.jsx("div", { className: `${styles$3["scheduler-dates"]} ${isToday() ? styles$3["current-day"] : ""}`, children: jsxRuntime.jsx("span", { children: topDivisions }) }), jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "space-between", flex: 1 }, children: bottomDivisions.map((element) => (jsxRuntime.jsx("div", { className: styles$3["scheduler-hours"], children: jsxRuntime.jsx("span", { children: element }) }, classification + element + topDivisions))) })] }));
+};
+
+const HeaderTitle = ({ title, dividerText, width }) => {
+    return (jsxRuntime.jsxs("div", { className: styles$3["scheduler-header-title"], style: { width: width }, children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("h5", { children: title }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("span", { children: dividerText }) })] }));
+};
+
+const SchedulerHeader = ({ content, divisions, visibleDays, selectedDate, width, onEvent, timeLinePercentage, isUtc }) => {
     const topWidth = (100 / visibleDays);
     const { title, classification } = content;
-    return (jsxRuntime.jsxs("div", { style: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-        }, children: [jsxRuntime.jsx(HeaderTitle, { title: title, dividerText: classification, width: width }), jsxRuntime.jsx("div", { style: { flex: 1, display: "flex" }, onMouseDown: (e) => {
+    return (jsxRuntime.jsxs("div", { style: { display: "flex" }, children: [jsxRuntime.jsx(HeaderTitle, { title: title, dividerText: classification, width: width }), jsxRuntime.jsxs("div", { className: styles$3["scheduler-header-divisions"], style: { flex: 1, display: "flex", position: "relative" }, onMouseDown: (e) => {
                     e.preventDefault();
                     const clickPercentage = getPercentageFromMouseEvent(e);
                     const date = dateFromPercentage(selectedDate, visibleDays, clickPercentage);
@@ -5575,29 +5766,118 @@ const SchedulerHeader = ({ content, divisions, visibleDays, selectedDate, width,
                     const clickPercentage = getPercentageFromMouseEvent(e);
                     const date = dateFromPercentage(selectedDate, visibleDays, clickPercentage);
                     onEvent(new OnEndClickHeaderEvent(date));
-                }, children: divisions.map((day) => {
-                    const thisTopWidth = visibleDays > 15
-                        ? topWidth * day.bottom.length
-                        : topWidth;
-                    return (jsxRuntime.jsx(SchedulerHeaderDivision, { topDivisions: day.top, bottomDivisions: day.bottom, classification: classification, topWidth: thisTopWidth + "%" }, day.top + classification));
-                }) })] }));
+                }, children: [divisions.map((day) => {
+                        const thisTopWidth = visibleDays > 15
+                            ? topWidth * day.bottom.length
+                            : topWidth;
+                        const dateStr = day.startDate ? moment(day.startDate) : moment(day.top, "DD.MM.YYYY");
+                        const startDate = dateStr.toDate();
+                        const endDate = day.endDate ? moment(day.endDate).toDate() : undefined;
+                        return (jsxRuntime.jsx(SchedulerHeaderDivision, { topDivisions: day.top, bottomDivisions: day.bottom, classification: classification, topWidth: thisTopWidth + "%", startDate: startDate, endDate: endDate }, day.top + classification));
+                    }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (jsxRuntime.jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "50%", height: "50%", isHeader: true, isUtc: isUtc }))] })] }));
+};
+
+function colorToHSL(color) {
+    const hexColor = colorToHEX(color);
+    const hex = hexColor.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16) / 255;
+    const g = parseInt(hex.substring(2, 4), 16) / 255;
+    const b = parseInt(hex.substring(4, 6), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        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),
+        l: Math.round(l * 100)
+    };
+}
+function colorToHEX(color) {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (!context)
+        throw new Error('Could not create canvas context');
+    context.fillStyle = color;
+    return context.fillStyle;
+}
+function getHSLColor(color, alpha = 1) {
+    const hsl = colorToHSL(color);
+    return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha})`;
+}
+function getContrastColor(color) {
+    const hsl = colorToHSL(color);
+    const contrastL = hsl.l > 50 ? 20 : 90;
+    return `hsl(${hsl.h}, ${hsl.s}%, ${contrastL}%)`;
+}
+
+const BackgroundEvent = ({ value, heightRem }) => {
+    const isVerticalText = value.isVerticalText ?? false;
+    const backColor = getHSLColor(value.color, value.alpha ?? 0.5);
+    const textColor = getContrastColor(value.color);
+    return value.isVisible ? (jsxRuntime.jsx("div", { style: {
+            left: `${value.left}%`,
+            width: `${value.width}%`,
+            position: "absolute",
+            height: `${heightRem}rem`,
+        }, children: jsxRuntime.jsx(CwGenericTooltip, { content: value.tooltip, position: "bottom", dissapearsWhenHover: true, showDelay: 200, children: jsxRuntime.jsx("div", { style: {
+                    overflow: "hidden",
+                    backgroundColor: backColor,
+                    height: `${heightRem}rem`,
+                }, children: jsxRuntime.jsx("div", { style: {
+                        display: "flex",
+                        flexDirection: "row",
+                        width: "100%",
+                        contentVisibility: "auto",
+                        height: `${heightRem}rem`,
+                    }, children: jsxRuntime.jsxs("div", { style: {
+                            flex: 1,
+                            display: "flex",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            width: value.width + "%",
+                            fontSize: "var(--cw-font-size-smallest)"
+                        }, children: [value.icons ? jsxRuntime.jsx("div", { style: {
+                                    display: "flex",
+                                    flexDirection: "row",
+                                    alignItems: "center",
+                                    whiteSpace: "nowrap",
+                                    color: textColor,
+                                }, children: value.icons }) : null, jsxRuntime.jsx("span", { style: {
+                                    color: textColor,
+                                    writingMode: isVerticalText ? "vertical-lr" : "initial",
+                                    textOrientation: isVerticalText ? "upright" : "initial"
+                                }, children: value.name })] }) }) }) }) })) : null;
 };
 
-const DefaultRowHeader = ({ value, width, color, onEvent }) => {
-    return (jsxRuntime.jsx("div", { style: {
+var styles$2 = {"scheduler-row-header":"scheduler-row-module_scheduler-row-header__S-iv4"};
+
+const DefaultRowHeader = ({ value, width, onEvent }) => {
+    return (jsxRuntime.jsxs("div", { style: {
             width: width,
-            background: color,
-            cursor: "pointer",
-            padding: "8px",
-            boxSizing: "border-box"
+            // background: color,
         }, onClick: (_) => {
-            onEvent(new OnClickRowHeader(value.resourceId));
-        }, children: jsxRuntime.jsxs("div", { style: {
-                display: "flex",
-                flexDirection: "column",
-                justifyContent: "center",
-                alignItems: "center",
-            }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "row", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { fontWeight: "bold" }, children: value.title }), value.title2 && jsxRuntime.jsxs("span", { children: ["-", value.title2] })] }), jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", color: "gray" }, children: [value.subtitle && jsxRuntime.jsx("span", { style: { fontWeight: "bold" }, children: value.subtitle }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }) }));
+            onEvent(new OnClickRowHeader(value.rowId));
+        }, className: styles$2["scheduler-row-header"], children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: value.title }), value.title2 && jsxRuntime.jsxs("span", { children: ["-", value.title2] }), value.title3 && jsxRuntime.jsxs("span", { className: styles$2["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] })] }), value.subtitle && jsxRuntime.jsxs("div", { style: { opacity: 0.5 }, children: [jsxRuntime.jsx("strong", { children: value.subtitle }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }));
 };
 
 function useSingleAndDoubleClicks(onClick, onDoubleClick) {
@@ -5616,7 +5896,7 @@ function useSingleAndDoubleClicks(onClick, onDoubleClick) {
         timer.current = setTimeout(() => {
             timer.current = null;
             onClick(e);
-        }, 300);
+        }, 500);
     }, [timer, cancelPendingClick, onClick]);
     const handleDoubleClick = React.useCallback((e) => {
         e.stopPropagation();
@@ -5627,6 +5907,8 @@ function useSingleAndDoubleClicks(onClick, onDoubleClick) {
     return { handleClick, handleDoubleClick };
 }
 
+var styles$1 = {"hide-scrollbar":"new-scheduler-module_hide-scrollbar__33GG9","scheduler-event":"new-scheduler-module_scheduler-event__gphwn","scheduler-event-container":"new-scheduler-module_scheduler-event-container__-h1xm","time-marker":"new-scheduler-module_time-marker__2BejU"};
+
 const EventSideDrag = ({ left = false, heightRem, onStartEvent }) => {
     return (jsxRuntime.jsx("span", { draggable: true, onDragStart: (e) => {
             e.stopPropagation();
@@ -5641,16 +5923,24 @@ const EventSideDrag = ({ left = false, heightRem, onStartEvent }) => {
 const SchedulerEvent = ({ value, heightRem, onEvent }) => {
     const [isOnDrag, setIsOnDrag] = React.useState(false);
     const [isContextMenuOpen, setIsContextMenuOpen] = React.useState(false);
+    // Calculate colors of the event
+    const backColor = getHSLColor(value.color, value.alpha ?? 0.75);
+    const textColor = getContrastColor(value.color);
+    const eventTransparent = value.alpha ? value.alpha < 0.7 : false;
     const { handleClick, handleDoubleClick } = useSingleAndDoubleClicks((e) => {
         e.stopPropagation();
         e.preventDefault();
         if (!value.isDraggable) {
             return;
         }
+        // https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/platform
+        // change for navigator.userAgentData.platform when acepted in all browsers
+        const isMac = navigator.platform.toUpperCase().includes("MAC");
+        const isCtrlOrAltPressed = isMac ? e.altKey : e.ctrlKey;
         if (e.shiftKey) {
             onEvent(new OnRangeClickEvent(value.id));
         }
-        else if (e.ctrlKey) {
+        else if (isCtrlOrAltPressed) {
             onEvent(new OnMultiClickEvent(value.id));
         }
         else {
@@ -5661,83 +5951,71 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
         e.preventDefault();
         onEvent(new OnDoubleClickEvent(value.id));
     });
-    return (jsxRuntime.jsx(CwGenericTooltip, { content: value.tooltip, position: "bottom", dissapearsWhenHover: true, children: jsxRuntime.jsx(antd.Dropdown, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottomCenter", menu: {
-                items: value.contextMenuItems,
-                onClick: (e) => {
-                    e.domEvent.nativeEvent.preventDefault();
-                    e.domEvent.nativeEvent.stopPropagation();
-                    e.domEvent.nativeEvent.stopImmediatePropagation();
-                    e.domEvent.preventDefault();
-                    e.domEvent.stopPropagation();
-                    onEvent(new OnClickContextMenu(value.id, e.key));
-                },
-                onMouseLeave: () => setIsContextMenuOpen(false),
-            }, trigger: ["contextMenu"], overlayStyle: { animationDuration: "0" }, arrow: (value.contextMenuItems?.length ?? 0) > 0, children: jsxRuntime.jsx("div", { style: {
-                    left: `${value.left}%`,
-                    width: `${value.width}%`,
-                    position: "absolute",
-                    zIndex: isOnDrag ? 999 : undefined,
-                    contentVisibility: "auto",
-                }, onClick: handleClick, onDoubleClick: handleDoubleClick, draggable: value.isDraggable, onMouseDown: (_) => {
-                    if (value.isDraggable)
-                        setIsOnDrag(true);
-                }, onMouseLeave: (_) => {
-                    if (value.isDraggable)
-                        setIsOnDrag(false);
-                }, onDragStart: (_) => {
-                    if (value.isDraggable)
-                        onEvent(new OnDragEvent(value.id));
-                }, onDragEnd: (_) => {
-                    if (value.isDraggable)
-                        setIsOnDrag(false);
-                }, onContextMenu: (e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    onEvent(new OnRightClickEvent(value.id));
-                }, children: jsxRuntime.jsxs("div", { style: {
-                        borderRadius: "0.5rem",
-                        border: value.selected ? "1px solid black" : "none",
-                        overflow: "hidden",
-                        backgroundColor: value.color,
-                        height: `${heightRem}rem`,
-                        display: "flex",
-                        flexDirection: "column",
-                    }, children: [jsxRuntime.jsxs("div", { style: {
+    return (jsxRuntime.jsx(antd.Dropdown, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottomCenter", menu: {
+            items: value.contextMenuItems,
+            onClick: (e) => {
+                e.domEvent.nativeEvent.preventDefault();
+                e.domEvent.nativeEvent.stopPropagation();
+                e.domEvent.nativeEvent.stopImmediatePropagation();
+                e.domEvent.preventDefault();
+                e.domEvent.stopPropagation();
+                onEvent(new OnClickContextMenu(value.id, e.key));
+            },
+            onMouseLeave: () => setIsContextMenuOpen(false),
+        }, trigger: ["contextMenu"], overlayStyle: { animationDuration: "0" }, arrow: (value.contextMenuItems?.length ?? 0) > 0, children: jsxRuntime.jsx("div", { style: {
+                top: "2px",
+                left: `${value.left}%`,
+                width: `${value.width}%`,
+                position: "absolute",
+                zIndex: isOnDrag ? 999 : undefined,
+                contentVisibility: "auto",
+                pointerEvents: "auto",
+            }, onClick: handleClick, onDoubleClick: handleDoubleClick, draggable: value.isDraggable, onMouseDown: (_) => {
+                if (value.isDraggable)
+                    setIsOnDrag(true);
+            }, onMouseLeave: (_) => {
+                if (value.isDraggable)
+                    setIsOnDrag(false);
+            }, onDragStart: (_) => {
+                if (value.isDraggable)
+                    onEvent(new OnDragEvent(value.id));
+            }, onDragEnd: (_) => {
+                if (value.isDraggable)
+                    setIsOnDrag(false);
+            }, onContextMenu: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                onEvent(new OnRightClickEvent(value.id));
+            }, children: jsxRuntime.jsx(CwGenericTooltip, { content: value.tooltip, position: "bottom", dissapearsWhenHover: true, showDelay: 200, children: jsxRuntime.jsxs("div", { style: {
+                        border: value.selected ? "2px solid black" : "none",
+                        backgroundColor: backColor,
+                        height: `calc(${heightRem}rem - 4px)`,
+                        opacity: eventTransparent ? 0.5 : 1,
+                    }, className: styles$1["scheduler-event"], children: [jsxRuntime.jsxs("div", { style: {
                                 display: "flex",
                                 flexDirection: "row",
                                 alignItems: "stretch",
                                 width: "100%",
                                 cursor: value.isDraggable ? "pointer" : "default",
-                                height: `${heightRem * 0.8}rem`,
-                            }, children: [value.isResizable && (jsxRuntime.jsx(EventSideDrag, { left: true, heightRem: heightRem * 0.8, onStartEvent: () => {
+                                height: `calc(${heightRem}rem - 10px)`,
+                            }, children: [value.isResizable && (jsxRuntime.jsx(EventSideDrag, { left: true, heightRem: heightRem * 0.7, onStartEvent: () => {
                                         onEvent(new OnLeftDragStart(value.id));
-                                    } })), jsxRuntime.jsxs("div", { style: {
-                                        flex: 1,
-                                        display: "flex",
-                                        flexDirection: "row",
-                                        alignItems: "center",
-                                        whiteSpace: "nowrap",
-                                        overflow: "hidden",
-                                    }, children: [jsxRuntime.jsx("div", { style: {
+                                    } })), jsxRuntime.jsxs("div", { className: styles$1["scheduler-event-container"], children: [jsxRuntime.jsx("div", { style: {
                                                 display: "flex",
                                                 flexDirection: "row",
                                                 alignItems: "center",
                                                 whiteSpace: "nowrap",
-                                                color: value.isLightColor ? "black" : "white",
+                                                color: textColor,
                                             }, children: value.icons }), jsxRuntime.jsx("span", { style: {
                                                 padding: "0.1rem",
-                                                color: value.isLightColor ? "black" : "white",
-                                            }, children: value.name })] }), value.isResizable && (jsxRuntime.jsx(EventSideDrag, { heightRem: heightRem * 0.8, onStartEvent: () => {
+                                                color: textColor,
+                                            }, children: value.name })] }), value.isResizable && (jsxRuntime.jsx(EventSideDrag, { heightRem: heightRem * 0.7, onStartEvent: () => {
                                         onEvent(new OnRightDragStart(value.id));
-                                    } }))] }), value.primaryTimeMarkerColor && (jsxRuntime.jsx("div", { style: {
+                                    } }))] }), value.primaryTimeMarkerColor && (jsxRuntime.jsx("div", { className: styles$1["time-marker"], style: {
                                 backgroundColor: value.primaryTimeMarkerColor,
-                                height: "4px",
-                                width: "100%",
-                            } })), value.secondaryTimeMarkerColor && (jsxRuntime.jsx("div", { style: {
+                            } })), value.secondaryTimeMarkerColor && (jsxRuntime.jsx("div", { className: styles$1["time-marker"], style: {
                                 backgroundColor: value.secondaryTimeMarkerColor,
-                                height: "4px",
-                                width: "100%",
-                            } }))] }) }, value.id) }, value.id) }));
+                            } }))] }) }) }, value.id) }, value.id));
 };
 
 const eventsCollide = (event1, event2) => {
@@ -5748,7 +6026,14 @@ const eventsCollide = (event1, event2) => {
 };
 // Function to separate events into non-colliding rows
 const separateEventsToInnerRows = (events) => {
-    const sortedEvents = [...events].sort((a, b) => a.startDate.getTime() - b.startDate.getTime());
+    const sortedEvents = [...events].sort((a, b) => {
+        const aOrder = a.order ?? Number.MAX_SAFE_INTEGER;
+        const bOrder = b.order ?? Number.MAX_SAFE_INTEGER;
+        if (aOrder !== bOrder) {
+            return aOrder - bOrder; // Prioridad al order si ambos están definidos
+        }
+        return a.startDate.getTime() - b.startDate.getTime();
+    });
     const rows = [];
     for (const event of sortedEvents) {
         let placed = false;
@@ -5766,61 +6051,12 @@ const separateEventsToInnerRows = (events) => {
     return rows;
 };
 
-const TimeLine = ({ left, top = "0px", height, color, width = "2px", zIndexNumber = 0 }) => {
-    return (jsxRuntime.jsx("div", { style: {
-            position: "absolute",
-            top: top,
-            height: height,
-            left: left,
-            width: width,
-            background: color,
-            pointerEvents: "none",
-            zIndex: zIndexNumber,
-        } }));
+const DivisionLine = ({ left, top = "0px", height }) => {
+    return (jsxRuntime.jsx(TimeLine, { color: "rgba(255,255,255,1)", left: left + "%", height: height, width: 1 + "px", top: top }));
 };
 
 const WeekEndLine = ({ left, top = "0px", height, widthPercentage }) => {
-    return (jsxRuntime.jsx(TimeLine, { color: "rgba(0,0,0,0.08)", left: left + "%", height: height, width: widthPercentage + "%", top: top }));
-};
-
-const BackgroundEvent = ({ value, }) => {
-    return value.isVisible ? (jsxRuntime.jsx("div", { style: {
-            left: `${value.left}%`,
-            width: `${value.width}%`,
-            position: "absolute",
-            height: "100%",
-        }, children: jsxRuntime.jsx("div", { style: {
-                overflow: "hidden",
-                backgroundColor: value.color,
-                height: "100%",
-            }, children: jsxRuntime.jsx("div", { style: {
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "stretch",
-                    width: "100%",
-                    contentVisibility: "auto",
-                }, children: jsxRuntime.jsxs("div", { style: {
-                        flex: 1,
-                        display: "flex",
-                        flexDirection: "row",
-                        alignItems: "center",
-                        whiteSpace: "nowrap",
-                        overflow: "hidden",
-                        width: value.width + "%",
-                    }, children: [jsxRuntime.jsx("div", { style: {
-                                display: "flex",
-                                flexDirection: "row",
-                                alignItems: "center",
-                                whiteSpace: "nowrap",
-                                color: value.isLightColor ? "black" : "white",
-                            }, children: value.icons }), jsxRuntime.jsx("span", { style: {
-                                padding: "0.2rem",
-                                color: value.isLightColor ? "black" : "white"
-                            }, children: value.name })] }) }) }) })) : null;
-};
-
-const DivisionLine = ({ left, top = "0px", height }) => {
-    return (jsxRuntime.jsx(TimeLine, { color: "rgba(255,255,255,1)", left: left + "%", height: height, width: 1 + "px", top: top }));
+    return (jsxRuntime.jsx(TimeLine, { color: "rgba(0,0,0,0.05)", left: left + "%", height: height, width: widthPercentage + "%", top: top }));
 };
 
 const onClickMenuItem$1 = (e, event) => {
@@ -5833,33 +6069,30 @@ const onClickMenuItem$1 = (e, event) => {
 };
 const SchedulerRow = React.memo((props) => {
     const [isContextMenuOpen, setIsContextMenuOpen] = React.useState(false);
-    const { events, backgroundEvents, rowHeader, contextMenuItems, RowTitleComp, EventComp, weekendLines, divisionLines, timeLinePercentage, selectedDate, visibleDays, onEvent, } = props;
+    const { events, backgroundEvents, rowHeader, contextMenuItems, RowTitleComp, EventComp, BackgroundEventComp, weekendLines, divisionLines, timeLinePercentage, selectedDate, visibleDays, onEvent, } = props;
     const internalRows = separateEventsToInnerRows(events);
     const { handleClick, handleDoubleClick } = useSingleAndDoubleClicks((e) => {
         e.stopPropagation();
         e.preventDefault();
-        onEvent(new OnClickRowEvent(rowHeader.value.resourceId));
+        onEvent(new OnClickRowEvent(rowHeader.value.rowId));
     }, (e) => {
         e.stopPropagation();
         e.preventDefault();
-        onEvent(new OnDoubleClickRowEvent(rowHeader.value.resourceId));
+        onEvent(new OnDoubleClickRowEvent(rowHeader.value.rowId));
     });
     return (jsxRuntime.jsxs("div", { style: {
             display: "flex",
-            // contentVisibility: "auto",
-            // containIntrinsicSize: "auto auto"
+            minHeight: props.rowHeightInRem + "rem",
         }, children: [jsxRuntime.jsx(RowTitleComp, { ...rowHeader }), jsxRuntime.jsx(antd.Dropdown, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottomCenter", menu: {
                     items: contextMenuItems,
                     onClick: (e) => {
                         onClickMenuItem$1(e, () => {
-                            onEvent(new OnClickContextMenu(rowHeader.value.resourceId, e.key));
+                            onEvent(new OnClickContextMenu(rowHeader.value.rowId, e.key));
                         });
                     },
                     onMouseLeave: () => setIsContextMenuOpen(false),
                 }, trigger: ["contextMenu"], overlayStyle: { animationDuration: "0" }, arrow: (contextMenuItems?.length ?? 0) > 0, children: jsxRuntime.jsxs("div", { style: {
                         flex: 1,
-                        background: rowHeader.color,
-                        borderLeft: "1px white solid",
                         display: "flex",
                         flexDirection: "column",
                         position: "relative",
@@ -5867,11 +6100,15 @@ const SchedulerRow = React.memo((props) => {
                         e.preventDefault();
                         const percentage = getPercentageFromMouseEvent(e);
                         const date = dateFromPercentage(selectedDate, visibleDays, percentage);
-                        if (e.ctrlKey) {
-                            onEvent(new OnDropCtrlEvent(rowHeader.value.resourceId, date));
+                        // https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/platform
+                        // change for navigator.userAgentData.platform when acepted in all browsers
+                        const isMac = navigator.platform.toUpperCase().includes("MAC");
+                        const isCtrlOrAltPressed = isMac ? e.altKey : e.ctrlKey;
+                        if (isCtrlOrAltPressed) {
+                            onEvent(new OnDropCtrlEvent(rowHeader.value.rowId, date));
                         }
                         else {
-                            onEvent(new OnDropEvent(rowHeader.value.resourceId, date));
+                            onEvent(new OnDropEvent(rowHeader.value.rowId, date));
                         }
                     }, onDragOver: (e) => {
                         e.preventDefault();
@@ -5880,16 +6117,21 @@ const SchedulerRow = React.memo((props) => {
                         e.stopPropagation();
                         const percentage = getPercentageFromMouseEvent(e);
                         const date = dateFromPercentage(selectedDate, visibleDays, percentage);
-                        onEvent(new OnRightClickRow(rowHeader.value.resourceId, date));
+                        onEvent(new OnRightClickRow(rowHeader.value.rowId, date));
                     }, children: [weekendLines.map((weekend) => (jsxRuntime.jsx(WeekEndLine, { height: "100%", left: weekend.left, widthPercentage: weekend.width }))), divisionLines.map((division) => (jsxRuntime.jsx(DivisionLine, { height: "100%", left: division.left }))), backgroundEvents.length > 0 && backgroundEvents.some((e) => e.isVisible) && (jsxRuntime.jsx("div", { style: {
                                 height: "100%",
                                 position: internalRows.length > 0 ? "absolute" : "relative",
                                 width: "100%",
+                                pointerEvents: "none",
                             }, children: backgroundEvents.map((event) => {
-                                return jsxRuntime.jsx(BackgroundEvent, { value: { ...event }, onEvent: onEvent, heightRem: props.remHeight });
-                            }) })), backgroundEvents.length === 0 && internalRows.length === 0 && (jsxRuntime.jsx("div", { style: { position: "relative", height: props.remHeight + "rem" } })), internalRows.map((internalRow, index) => {
-                            return (jsxRuntime.jsx("div", { style: { position: "relative", height: props.remHeight + "rem" }, children: internalRow.map((event, index) => (jsxRuntime.jsx(EventComp, { value: event, heightRem: props.remHeight, onEvent: onEvent }, index))) }, index));
-                        }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (jsxRuntime.jsx(TimeLine, { color: "red", left: timeLinePercentage + "%", top: "0px", height: `100%` }))] }) }, rowHeader.value.resourceId)] }));
+                                return jsxRuntime.jsx(BackgroundEventComp, { value: { ...event }, onEvent: onEvent, heightRem: props.rowHeightInRem * Math.max(1, internalRows.length) });
+                            }) })), backgroundEvents.length === 0 && internalRows.length === 0 && (jsxRuntime.jsx("div", { style: { position: "relative", height: props.rowHeightInRem + "rem" } })), internalRows.map((internalRow, index) => {
+                            return (jsxRuntime.jsx("div", { style: {
+                                    position: "relative",
+                                    height: props.rowHeightInRem + "rem",
+                                    pointerEvents: "none"
+                                }, children: internalRow.map((event, index) => (jsxRuntime.jsx(EventComp, { value: event, heightRem: props.rowHeightInRem, onEvent: onEvent }, index))) }, index));
+                        }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (jsxRuntime.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
     const getEventKey = (event) => {
@@ -5955,9 +6197,12 @@ const getDayDivisions = (visibleDays, selectedDate) => {
     const divisions = getHoursFromDivisions(divisionsNumber);
     const calculatedDivision = [];
     for (let i = 0; i < visibleDays; i++) {
+        const currentDate = moment(selectedDate).add(i, "days");
         calculatedDivision.push({
-            top: moment(selectedDate).add(i, "days").format("DD.MM.YYYY"),
+            top: currentDate.format("DD.MM.YYYY"),
             bottom: divisions,
+            startDate: currentDate.toDate(),
+            endDate: currentDate.toDate()
         });
     }
     return calculatedDivision;
@@ -5966,12 +6211,15 @@ const getWeekDivisions = (visibleDays, selectedDate) => {
     const weeks = getWeeksByDays(visibleDays, selectedDate);
     const divisions = weeks.map((week) => {
         const days = Array.from({ length: week.days }, (_, i) => moment(week.start).add(i, "days").date().toString());
+        const weekEnd = moment(week.start).add(week.days - 1, "days");
         const top = days.length > 2
             ? moment(week.start).format("DD.MM.YYYY") + " - " + moment(week.start).add(week.days - 1, "days").format("DD.MM.YYYY")
             : moment(week.start).format("DD.MM.YYYY");
         const division = {
             top: top,
             bottom: days,
+            startDate: moment(week.start).toDate(),
+            endDate: weekEnd.toDate()
         };
         return division;
     });
@@ -5981,9 +6229,12 @@ const getMonthDivisions = (visibleDays, selectedDate) => {
     const months = getMonthsByDays(visibleDays, selectedDate);
     const divisions = months.map((month) => {
         const days = Array.from({ length: month.days }, (_, i) => moment(month.start).add(i, "days").date().toString());
+        const monthEnd = moment(month.start).add(month.days - 1, "days");
         const division = {
             top: moment(month.start).format("MM.YYYY"),
             bottom: days,
+            startDate: moment(month.start).toDate(), // Añadir fecha de inicio
+            endDate: monthEnd.toDate()
         };
         return division;
     });
@@ -6094,6 +6345,19 @@ function getLinesByDivisions(headerDivision, _) {
     return finalLines;
 }
 
+const sortByCategoryAndTitle = (previous, next, orderCategories) => {
+    for (const orderCategory of orderCategories) {
+        const prevOrder = previous[orderCategory];
+        const nextOrder = next[orderCategory];
+        if (prevOrder !== nextOrder) {
+            return prevOrder > nextOrder ? 1 : -1;
+        }
+    }
+    const prevTitle = previous["title"];
+    const nextTitle = next["title"];
+    return prevTitle > nextTitle ? 1 : -1;
+};
+
 const getWeekendLinesByDatesVisible = (initialDate, visibleDays) => {
     const dateString = initialDate.toISOString().split('T')[0];
     const todayAtO = new Date(dateString);
@@ -6120,35 +6384,6 @@ const getWeekendsDaysInDateRange = (initialDate, visibleDays) => {
 
 class UiEvent {
 }
-function when(event) {
-    let found = false;
-    const actions = {
-        case(eventType, action) {
-            if (!found && event instanceof eventType) {
-                action(event);
-                found = true;
-            }
-            return actions;
-        },
-        else(action) {
-            if (!found) {
-                action(event);
-            }
-        }
-    };
-    return actions;
-}
-
-const sortByCategoryAndTitle = (previous, next, orderCategory) => {
-    const prevOrder = previous[orderCategory] ?? "";
-    const nextOrder = next[orderCategory] ?? "";
-    if (prevOrder === nextOrder) {
-        const prevTitle = previous["title"] ?? "";
-        const nextTitle = next["title"] ?? "";
-        return prevTitle > nextTitle ? 1 : -1;
-    }
-    return prevOrder > nextOrder ? 1 : -1;
-};
 
 const getNow = (isUtc) => {
     let now = new Date();
@@ -6158,32 +6393,39 @@ const getNow = (isUtc) => {
     return now;
 };
 const Scheduler = (props) => {
-    const { header: headerContent, id, events, backgroundEvents, contextMenuItems, EventComp, RowTitleComp, orderCategory = "title", useOrderCategory, onEvent, } = props;
+    const { header: headerContent, id, events: eventsState, backgroundEvents, contextMenuItems, EventComp, RowTitleComp, orderCategories = ["title"], useOrderCategory, onEvent, groupRowColors, rowHeaderWidth = 180, } = props;
+    const BackgroundEventComp = props.BackgroundEventComp ?? BackgroundEvent;
     const rows = useOrderCategory === false
         ? props.rows
-        : props.rows.sort((a, b) => sortByCategoryAndTitle(a, b, orderCategory));
+        : props.rows.sort((a, b) => sortByCategoryAndTitle(a, b, orderCategories));
     const instanceRef = React.useRef(null);
+    // const rowHeaderWidth = "180px";
+    const { selectedDate, visibleDays, isUtc, isHeaderVisible, visibleRows: stateVisibleRows } = props.state;
+    const events = eventsState.filter((event) => {
+        const lastDayOfScheduler = moment(selectedDate).add(visibleDays, "days");
+        return (moment(event.endDate).isAfter(selectedDate) &&
+            moment(event.startDate).isBefore(lastDayOfScheduler));
+    });
     React.useEffect(() => {
-        console.debug("scheduler");
         instanceRef.current?.resetAfterIndex(0);
-    }, [orderCategory, props.rows.length]);
-    const rowHeaderWidth = "150px";
-    const { selectedDate, visibleDays, isUtc, isHeaderVisible, visibleRows: stateVisibleRows } = props.state;
+    }, [orderCategories, props.rows.length, events]);
+    const notEmptyRows = stateVisibleRows ?? rows.length;
+    const visibleRows = height(events, rows, notEmptyRows);
+    const totalHours = visibleDays * 24;
+    const [timeLinePercentage, setTimeLinePercentage] = React.useState(0);
     const header = {
         content: headerContent,
-        divisions: isHeaderVisible ? getDefaultDivisions(visibleDays, selectedDate) : [],
+        divisions: getDefaultDivisions(visibleDays, selectedDate),
         visibleDays: visibleDays,
         width: rowHeaderWidth,
         selectedDate,
         onEvent,
+        timeLinePercentage: timeLinePercentage,
+        isUtc: isUtc
     };
-    const notEmptyRows = stateVisibleRows ?? rows.length;
-    const visibleRows = notEmptyRows > rows.length ? rows.length : notEmptyRows;
-    const totalHours = visibleDays * 24;
-    const [timeLinePercentage, setTimeLinePercentage] = React.useState(0);
-    const evenColor = "#EEEEEE";
-    const oddColor = "#E0E0EF";
-    const rowsHeight = 2.5; // rem
+    const evenColor = "var(--cw-color-surface-container-low)";
+    const oddColor = "var(--cw-color-surface-container)";
+    const rowsHeight = 1.75; // rem
     const schedulerContentHeight = rowsHeight * visibleRows;
     const weekendsLines = getWeekendLinesByDatesVisible(selectedDate, visibleDays);
     const divisionLines = getLinesByDivisions(header.divisions);
@@ -6194,35 +6436,33 @@ const Scheduler = (props) => {
             setTimeLinePercentage(percentage);
         };
         updateTimeLinePercentage();
-        const interval = setInterval(updateTimeLinePercentage, 60_000);
+        const interval = setInterval(updateTimeLinePercentage, 10_000);
         return () => clearInterval(interval);
     }, [selectedDate, isUtc, totalHours]);
     // Memoized Row Component
     const Row = React.memo(({ index, style }) => {
         const row = rows[index];
+        const rowColor = groupRowColors
+            ? Math.floor(index / 2) % 2 === 0 ? evenColor : oddColor
+            : index % 2 === 0 ? evenColor : oddColor;
         const header = {
             value: row,
-            color: index % 2 === 0 ? evenColor : oddColor,
             width: rowHeaderWidth,
             onEvent: onEvent,
         };
-        return (jsxRuntime.jsx("div", { style: style, children: jsxRuntime.jsx(SchedulerRow, { events: events.filter((it) => it.resourceId === row.resourceId), backgroundEvents: backgroundEvents.filter((it) => it.resourceId === row.resourceId), rowHeader: header, EventComp: EventComp, RowTitleComp: RowTitleComp, weekendLines: weekendsLines, divisionLines: divisionLines, timeLinePercentage: timeLinePercentage, remHeight: rowsHeight, onEvent: onEvent, contextMenuItems: contextMenuItems, visibleDays: visibleDays, selectedDate: selectedDate }) }));
+        return (jsxRuntime.jsx("div", { style: {
+                ...style,
+                backgroundColor: rowColor
+            }, children: jsxRuntime.jsx(SchedulerRow, { events: events.filter((it) => it.rowId === row.rowId), backgroundEvents: backgroundEvents.filter((it) => it.rowId === row.rowId), rowHeader: header, EventComp: EventComp, BackgroundEventComp: BackgroundEventComp, RowTitleComp: RowTitleComp, weekendLines: weekendsLines, divisionLines: divisionLines, timeLinePercentage: timeLinePercentage, rowHeightInRem: rowsHeight, onEvent: onEvent, contextMenuItems: contextMenuItems, visibleDays: visibleDays, selectedDate: selectedDate }) }));
     });
-    const getItemSize = (index) => {
+    const getItemSize = React.useCallback((index) => {
         const row = rows[index];
-        const filteredEvents = events
-            .filter((it) => {
-            return it.resourceId === row.resourceId;
-        })
-            .filter((event) => {
-            return (event.endDate > selectedDate &&
-                moment(event.startDate).isBefore(moment(selectedDate).add(visibleDays, "days")));
-        });
+        const filteredEvents = events.filter((it) => it.rowId === row.rowId);
         const innerRows = separateEventsToInnerRows(filteredEvents);
         const rowsNumber = innerRows.length > 0 ? innerRows.length : 1;
         const pixelsInRem = 16;
         return rowsNumber * rowsHeight * pixelsInRem;
-    };
+    }, [rows, events, selectedDate, visibleDays, rowsHeight]);
     // Render
     return (jsxRuntime.jsxs("div", { id: id, style: {
             position: "relative",
@@ -6233,15 +6473,16 @@ const Scheduler = (props) => {
                     position: "sticky",
                     top: 0,
                     zIndex: 1,
-                }, children: jsxRuntime.jsx(SchedulerHeader, { ...header }) })), jsxRuntime.jsx("style", { children: `
-          .hide-scrollbar::-webkit-scrollbar {
-            display: none;
-          }
-          .hide-scrollbar {
-            -ms-overflow-style: none;
-            scrollbar-width: none;
-          }
-        ` }), jsxRuntime.jsx(reactWindow.VariableSizeList, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: "hide-scrollbar", children: Row })] }));
+                }, children: jsxRuntime.jsx(SchedulerHeader, { ...header }) })), jsxRuntime.jsx(reactWindow.VariableSizeList, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: styles$1["hide-scrollbar"], children: Row })] }));
+};
+const height = (events, rows, rowsNumber) => {
+    const selectedRows = rows.slice(0, rowsNumber);
+    const flatMapped = selectedRows.flatMap(row => {
+        const newEvents = events.filter(it => it.rowId === row.rowId);
+        const innerRows = separateEventsToInnerRows(newEvents);
+        return innerRows.length > 0 ? innerRows : [[]];
+    });
+    return flatMapped.length;
 };
 
 let topsCounter = 0;
@@ -6485,7 +6726,7 @@ class CwSuperScheduler extends React__namespace.Component {
             ? this.props.pinnedEvents.filter(x => this.state.pinnedResources.includes(x.resourceId))
             : new Array();
         const notPinnedEvents = this.props.events.filter(x => !this.props.pinnedResources?.includes(x.resourceId));
-        return (jsxRuntime.jsxs("div", { className: "cwelltSuperScheduler_content", children: [jsxRuntime.jsx(CwScheduler, { id: "crewPinnedScheduler", events: pinnedEvents, resources: firstSchedulerResources, height: this.state.height, startDate: this.props.startDate, endDate: this.props.endDate, scheduler_handleCblEventClick: this.props.scheduler_handleCblEventClick, scheduler_handleCblEventClickRight: this.props.scheduler_handleCblEventClickRight, scheduler_handleCblEventDoubleClick: this.props.scheduler_handleCblEventDoubleClick, scheduler_handleOnDropCblEventsOnResource: this.props.scheduler_handleOnDropCblEventsOnResource, parent: this.props.parent, cblEventComp: this.props.cblEventComp, scheduler_handleOnClickEventContextMenu: this.props.scheduler_handleOnClickEventContextMenu, resourceComp: this.props.resourceComp, scheduler_handleOnClickContextMenuResource: this.props.scheduler_handleOnClickContextMenuResource, resourceContextMenuContents: this.props.resourceContextMenuContents, scheduler_handleDblClickOnResourceInScheduler: this.props.scheduler_handleDblClickOnResourceInScheduler, scheduler_handleEmptyClick: this.props.scheduler_handleEmptyClick, canBePinned: false, scheduler_handlePinned: this.scheduler_handlePinnedClick, resourceName: this.props.resourceName, descriptionColumn: this.props.descriptionColumn, scheduler_handleOnClickResourceContextMenu: this.props.scheduler_handleOnClickResourceContextMenu, groupByFunction: this.props.groupByFunction }), havePinnedResources && (jsxRuntime.jsx("div", { style: { padding: "0.5rem" }, children: jsxRuntime.jsx(CwButton, { "$text": "Clear", onClick: () => {
+        return (jsxRuntime.jsxs("div", { className: "cwelltSuperScheduler_content", children: [jsxRuntime.jsx(CwScheduler, { id: "crewPinnedScheduler", events: pinnedEvents, resources: firstSchedulerResources, height: this.state.height, startDate: this.props.startDate, endDate: this.props.endDate, scheduler_handleCblEventClick: this.props.scheduler_handleCblEventClick, scheduler_handleCblEventClickRight: this.props.scheduler_handleCblEventClickRight, scheduler_handleCblEventDoubleClick: this.props.scheduler_handleCblEventDoubleClick, scheduler_handleOnDropCblEventsOnResource: this.props.scheduler_handleOnDropCblEventsOnResource, parent: this.props.parent, cblEventComp: this.props.cblEventComp, scheduler_handleOnClickEventContextMenu: this.props.scheduler_handleOnClickEventContextMenu, resourceComp: this.props.resourceComp, scheduler_handleOnClickContextMenuResource: this.props.scheduler_handleOnClickContextMenuResource, resourceContextMenuContents: this.props.resourceContextMenuContents, scheduler_handleDblClickOnResourceInScheduler: this.props.scheduler_handleDblClickOnResourceInScheduler, scheduler_handleEmptyClick: this.props.scheduler_handleEmptyClick, canBePinned: false, scheduler_handlePinned: this.scheduler_handlePinnedClick, resourceName: this.props.resourceName, descriptionColumn: this.props.descriptionColumn, scheduler_handleOnClickResourceContextMenu: this.props.scheduler_handleOnClickResourceContextMenu, groupByFunction: this.props.groupByFunction }), havePinnedResources && (jsxRuntime.jsx("div", { style: { padding: "0.5rem" }, children: jsxRuntime.jsx(CwButton, { text: "Clear", onClick: () => {
                             this.props.scheduler_handleClearPinnedOnParent();
                         } }) })), jsxRuntime.jsx(CwScheduler, { id: "crewAssignmentsScheduler", events: notPinnedEvents, resources: secondSchedulerResources, height: this.props.height, startDate: this.props.startDate, endDate: this.props.endDate, scheduler_handleCblEventClick: this.props.scheduler_handleCblEventClick, scheduler_handleCblEventClickRight: this.props.scheduler_handleCblEventClickRight, scheduler_handleCblEventDoubleClick: this.props.scheduler_handleCblEventDoubleClick, scheduler_handleOnDropCblEventsOnResource: this.props.scheduler_handleOnDropCblEventsOnResource, parent: this.props.parent, cblEventComp: this.props.cblEventComp, scheduler_handleOnClickEventContextMenu: this.props.scheduler_handleOnClickEventContextMenu, resourceComp: this.props.resourceComp, scheduler_handleOnClickContextMenuResource: this.handleOnClickContextMenuResource, resourceContextMenuContents: this.props.resourceContextMenuContents, scheduler_handleDblClickOnResourceInScheduler: this.props.scheduler_handleDblClickOnResourceInScheduler, scheduler_handleEmptyClick: this.props.scheduler_handleEmptyClick, canBePinned: true, scheduler_handlePinned: this.scheduler_handlePinnedClick, scheduler_handleCblEventResize: this.props.scheduler_handleCblEventResize, resourceName: this.props.resourceName, descriptionColumn: this.props.descriptionColumn, scheduler_handleOnClickResourceContextMenu: this.props.scheduler_handleOnClickResourceContextMenu, airportSelected: this.props.airportSelected, module: this.props.module, groupByFunction: this.props.groupByFunction })] }));
     }
@@ -6564,6 +6805,8 @@ class Resource {
     }
 }
 
+var styles = {"super-scheduler-row-header":"super-scheduler-module_super-scheduler-row-header__TTs4e","indicators":"super-scheduler-module_indicators__f4lIT","scheduler-crewmember-functions":"super-scheduler-module_scheduler-crewmember-functions__BS2hs"};
+
 class OnPinRow {
     id;
     constructor(id) {
@@ -6588,107 +6831,37 @@ const onClickMenuItem = (e, event) => {
     e.domEvent.stopPropagation();
     event();
 };
-const PinRowHeader = ({ value, color, width, onEvent }) => {
+const PinRowHeader = ({ value, width, onEvent }) => {
     const [isContextMenuOpen, setIsContextMenuOpen] = React.useState(false);
     const { highlightColor, isLoading } = value;
     return (jsxRuntime.jsxs("div", { style: {
-            display: "flex",
-            justifyContent: "space-around",
-            alignItems: "center",
             width: width,
-            background: highlightColor ?? color,
-        }, children: [jsxRuntime.jsx("button", { className: "cw-button-icon", onClick: (_) => {
-                    onEvent(value.isPinned ? new OnUnpinRow(value.resourceId) : new OnPinRow(value.resourceId));
-                }, children: jsxRuntime.jsx("div", { style: {
-                        transform: value.isPinned ? undefined : "rotateY(0deg) rotate(45deg)",
-                        alignSelf: "center",
-                    }, children: jsxRuntime.jsx(CwIcon, { "$id": "thumbtack fa-xs" }) }) }), value.indicators ?? undefined, jsxRuntime.jsx(CwGenericTooltip, { content: value.tooltip, position: "bottom", dissapearsWhenHover: true, overlayStyle: value.overlayTooltipStyle, children: jsxRuntime.jsx(antd.Dropdown, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottomCenter", menu: {
+            background: highlightColor,
+        }, className: styles["super-scheduler-row-header"], children: [jsxRuntime.jsx("button", { className: "cw-button-icon cwi-pin", "data-pinned": value.isPinned, onClick: (_) => {
+                    onEvent(value.isPinned ? new OnUnpinRow(value.rowId) : new OnPinRow(value.rowId));
+                } }), jsxRuntime.jsx("div", { className: styles["indicators"], children: value.indicators ?? undefined }), jsxRuntime.jsx(CwGenericTooltip, { content: value.tooltip, position: "right", dissapearsWhenHover: true, overlayStyle: value.overlayTooltipStyle, children: jsxRuntime.jsx(antd.Dropdown, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottomCenter", menu: {
                         items: value.contextMenuItems,
                         onClick: (e) => {
                             onClickMenuItem(e, () => {
-                                onEvent(new OnClickContextMenu(value.resourceId, e.key));
+                                onEvent(new OnClickContextMenu(value.rowId, e.key));
                             });
                         },
                         onMouseLeave: () => setIsContextMenuOpen(false),
-                    }, trigger: ["contextMenu"], overlayStyle: { animationDuration: "0" }, arrow: (value.contextMenuItems?.length ?? 0) > 0, children: jsxRuntime.jsxs("div", { style: {
+                    }, trigger: ["contextMenu"], overlayStyle: { animationDuration: "0" }, arrow: (value.contextMenuItems?.length ?? 0) > 0, children: jsxRuntime.jsxs("div", { className: styles["scheduler-row-header"], style: {
                             display: "flex",
                             flexDirection: "column",
                             justifyContent: "center",
-                            alignItems: "center",
-                        }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "row", alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { fontWeight: "bold" }, children: value.title }), value.title2 && jsxRuntime.jsxs("span", { children: ["-", value.title2] })] }), jsxRuntime.jsxs("div", { style: {
-                                    display: "flex",
-                                    flexDirection: "row",
-                                    alignItems: "center",
-                                    color: "lightgray"
-                                }, children: [value.subtitle && jsxRuntime.jsx("span", { style: { fontWeight: "bold" }, children: value.subtitle }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }) }, value.resourceId) }, value.resourceId), isLoading ? jsxRuntime.jsx(CwIcon, { "$id": "spinner fa-spin" }) : undefined] }));
+                            alignItems: "flex-start",
+                        }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: value.title }), value.title2 && jsxRuntime.jsxs("span", { children: ["-", value.title2] }), value.title3 && jsxRuntime.jsxs("span", { className: styles["scheduler-crewmember-functions"], children: [" (", value.title3, ")"] })] }), value.subtitle && jsxRuntime.jsxs("div", { style: { opacity: 0.5 }, children: [jsxRuntime.jsx("strong", { children: value.subtitle }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }) }, value.rowId) }, value.rowId), isLoading ? jsxRuntime.jsx(CwIcon, { iconId: "spinner fa-spin" }) : undefined] }));
 };
 
 const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory, unPinnedOrderCategory, backgroundEvents, contextMenuItems, onEvent }) => {
-    React.useEffect(() => {
-        setNotPinnedRows(rows.filter((it) => !it.isPinned));
-        setPinnedRows(rows.filter((it) => it.isPinned));
-    }, [rows, events]);
-    const [pinnedRows, setPinnedRows] = React.useState([]);
-    const [notPinnedRows, setNotPinnedRows] = React.useState([]);
-    const customOnEvent = (event) => {
-        when(event)
-            .case(OnClearPinned, () => {
-            setPinnedRows((old) => {
-                const oldPinned = old.map((it) => {
-                    return { ...it, isPinned: false };
-                });
-                setNotPinnedRows((oldNotPinned) => {
-                    return [...oldPinned, ...oldNotPinned];
-                });
-                return [];
-            });
-        })
-            .case(OnPinRow, (event) => {
-            setNotPinnedRows((oldNotPinned) => {
-                const newNotPinned = [...oldNotPinned];
-                const rowToModifyIndex = oldNotPinned.findIndex((it) => it.resourceId == event.id);
-                const rowToModify = oldNotPinned[rowToModifyIndex];
-                newNotPinned.splice(rowToModifyIndex, 1);
-                const modifiedRow = {
-                    ...rowToModify,
-                    isPinned: true,
-                };
-                setPinnedRows((oldPinned) => {
-                    const modifiedResources = [...oldPinned];
-                    modifiedResources.push(modifiedRow);
-                    return modifiedResources;
-                });
-                return newNotPinned;
-            });
-        })
-            .case(OnUnpinRow, (event) => {
-            setPinnedRows((oldPinned) => {
-                const modifiedPinnedRows = [...oldPinned];
-                const rowToModifyIndex = oldPinned.findIndex((it) => it.resourceId == event.id);
-                const rowToModify = oldPinned[rowToModifyIndex];
-                modifiedPinnedRows.splice(rowToModifyIndex, 1);
-                const modifiedRow = {
-                    ...rowToModify,
-                    isPinned: false,
-                };
-                setNotPinnedRows((oldNotPinned) => {
-                    const modifiedResources = [...oldNotPinned];
-                    modifiedResources.push(modifiedRow);
-                    return modifiedResources;
-                });
-                return modifiedPinnedRows;
-            });
-        })
-            .else((event) => {
-            onEvent(event);
-        });
-    };
+    const pinnedRows = rows.filter((it) => it.isPinned);
+    const notPinnedRows = rows.filter((it) => !it.isPinned);
     const isFirstVisible = pinnedRows.length > 0;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFirstVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Scheduler, { id: `${id}-pinned`, state: state, header: header, rows: pinnedRows, events: events, backgroundEvents: backgroundEvents, contextMenuItems: contextMenuItems, orderCategory: pinnedOrderCategory, onEvent: customOnEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader }), jsxRuntime.jsx("div", { style: { padding: "1rem 0" }, children: jsxRuntime.jsx("button", { onClick: () => {
-                                customOnEvent(new OnClearPinned());
-                            }, children: "Clear pinned" }) })] })), jsxRuntime.jsx(Scheduler, { id: `${id}-notPinned`, state: { ...state, isHeaderVisible: !isFirstVisible }, header: header, rows: notPinnedRows, events: events, backgroundEvents: backgroundEvents, contextMenuItems: contextMenuItems, orderCategory: unPinnedOrderCategory, onEvent: (it) => {
-                    customOnEvent(it);
-                }, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFirstVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Scheduler, { id: `${id}-pinned`, state: state, header: header, rows: pinnedRows, events: events, backgroundEvents: backgroundEvents, contextMenuItems: contextMenuItems, orderCategories: pinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CwButton, { onClick: () => {
+                                onEvent(new OnClearPinned());
+                            }, children: "Clear pinned" }) })] })), jsxRuntime.jsx(Scheduler, { id: `${id}-notPinned`, state: { ...state, isHeaderVisible: !isFirstVisible }, header: header, rows: notPinnedRows, events: events, backgroundEvents: backgroundEvents, contextMenuItems: contextMenuItems, orderCategories: unPinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader })] }));
 };
 
 const { Option } = antd.Select;