@cwellt_software/cwellt-reactjs-lib 1.3.2 → 1.3.5

package/dist/index.cjs.js

@@ -125,36 +125,60 @@ function getHSLColor(color, alpha = 1) {
     const hsl = colorToHSL(color);
     return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha})`;
 }
+function hslToLinearRgb(h, s, l) {
+    const sNorm = s / 100;
+    const lNorm = l / 100;
+    const a = sNorm * Math.min(lNorm, 1 - lNorm);
+    const f = (n) => {
+        const k = (n + h / 30) % 12;
+        return lNorm - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)));
+    };
+    return [f(0), f(8), f(4)];
+}
+function srgbLuminance(r, g, b) {
+    const lin = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+function wcagContrastRatio(lum1, lum2) {
+    const lighter = Math.max(lum1, lum2);
+    const darker = Math.min(lum1, lum2);
+    return (lighter + 0.05) / (darker + 0.05);
+}
 function getContrastColor(color) {
-    if (color === null) {
+    if (color === null)
         return '#000000';
-    }
     const hsl = colorToHSL(color);
-    // Saturated greenyellow and cyan tones need lower luminance threshold (40-35)
-    // Saturated mediumblue and blueviolet tones need higher luminance threshold (55-60)
-    // Saturated orangered tones need lower luminance threshold (45)
-    const isYellowGreen = (hsl.h >= 45 && hsl.h <= 180);
-    const isBlueViolet = (hsl.h >= 210 && hsl.h <= 300);
-    const isRedOrange = (hsl.h >= 0 && hsl.h <= 30) || (hsl.h >= 330 && hsl.h <= 360);
-    let threshold = 50;
-    if (isYellowGreen) {
-        threshold = 40;
-        if (hsl.s >= 70) {
-            threshold = 35;
-        }
-    }
-    else if (isBlueViolet) {
-        threshold = 55;
-        if (hsl.s >= 70) {
-            threshold = 60;
-        }
-    }
-    else if (isRedOrange && hsl.s >= 80) {
-        threshold = 45;
-    }
-    const contrastL = hsl.l >= threshold ? 20 : 90;
     const contrastS = Math.min(hsl.s, 90);
-    return `hsl(${hsl.h}, ${contrastS}%, ${contrastL}%)`;
+    const bgRgb = hslToLinearRgb(hsl.h, hsl.s, hsl.l);
+    const bgLum = srgbLuminance(...bgRgb);
+    const darkL = 15;
+    const lightL = 90;
+    const darkLum = srgbLuminance(...hslToLinearRgb(hsl.h, contrastS, darkL));
+    const lightLum = srgbLuminance(...hslToLinearRgb(hsl.h, contrastS, lightL));
+    const darkRatio = wcagContrastRatio(bgLum, darkLum);
+    const lightRatio = wcagContrastRatio(bgLum, lightLum);
+    // On saturated backgrounds, dark-tinted text blends visually with the
+    // vibrant color even when math says it has better contrast.
+    // Prefer light text unless dark has an overwhelmingly higher ratio.
+    const saturatedBias = hsl.s >= 30 && bgLum < 0.4;
+    // Mid-grays (#777–#999): dark text "sinks" into the background while
+    // white text pops, even though dark wins on WCAG ratio.
+    const midGrayBias = hsl.s < 15 && bgLum >= 0.18 && bgLum <= 0.35;
+    const goLight = saturatedBias
+        ? darkRatio < lightRatio * 3
+        : midGrayBias || lightRatio >= darkRatio;
+    let targetL = goLight ? lightL : darkL;
+    let bestRatio = goLight ? lightRatio : darkRatio;
+    if (bestRatio < 4.5) {
+        const step = goLight ? 5 : -5;
+        const limit = goLight ? 95 : 0;
+        while (bestRatio < 4.5 && targetL !== limit) {
+            targetL = goLight ? Math.min(targetL + step, limit) : Math.max(targetL + step, limit);
+            const candidateLum = srgbLuminance(...hslToLinearRgb(hsl.h, contrastS, targetL));
+            bestRatio = wcagContrastRatio(bgLum, candidateLum);
+        }
+    }
+    return `hsl(${hsl.h}, ${contrastS}%, ${targetL}%)`;
 }
 
 const SVG_ICONS = {
@@ -249,7 +273,7 @@ const CwMessage = props => {
         }, props.duration ?? CW_DEFAULT_MESSAGE_DURATION);
         return () => clearTimeout(timer);
     }, [props]);
-    return (jsxRuntime.jsxs("div", { className: "cw-message", "data-message-type": Object.keys(exports.CwMessageType).find(key => exports.CwMessageType[key] === props.messageType), children: [props.messageType && jsxRuntime.jsx(CwIcon, { iconId: props.messageType.toString(), size: "large" }), props.message] }));
+    return (jsxRuntime.jsxs("div", { className: "cw-message", "data-message-type": Object.keys(exports.CwMessageType).find(key => exports.CwMessageType[key] === props.messageType), onClick: props.onClick, style: props.onClick ? { cursor: "pointer" } : undefined, children: [props.messageType && jsxRuntime.jsx(CwIcon, { iconId: props.messageType.toString(), size: "large" }), props.message] }));
 };
 /**
  * Hook for displaying inline messages within specific components.
@@ -312,11 +336,11 @@ class CwMessageManager {
         document.body.prepend(this.messageWrapper);
         this.root = client.createRoot(this.messageWrapper); // Create a root at the messageWrapper
     }
-    showMessage(message, type, duration) {
+    showMessage(message, type, duration, onClick) {
         const msg = document.createElement("div");
         this.messageWrapper?.prepend(msg);
         const msgRoot = client.createRoot(msg); // Create a root for the new message
-        msgRoot.render(jsxRuntime.jsx(CwMessage, { message: message, messageType: type, duration: duration, onClose: () => this.closeMessage(msgRoot) }));
+        msgRoot.render(jsxRuntime.jsx(CwMessage, { message: message, messageType: type, duration: duration, onClick: onClick, onClose: () => this.closeMessage(msgRoot) }));
     }
     closeMessage(msgRoot) {
         msgRoot.unmount(); // Unmount the message root
@@ -338,8 +362,8 @@ class CwMessageManager {
  *
  * @note For inline messages within components, use `CwNote` or `useCwMessage` hook instead
  */
-function CwDisplayMessage(message, type, duration) {
-    CwMessageManager.getInstance().showMessage(message, type, duration);
+function CwDisplayMessage(message, type, duration, onClick) {
+    CwMessageManager.getInstance().showMessage(message, type, duration, onClick);
 }
 
 /**
@@ -1864,7 +1888,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
  *
  * @returns React component
  */
-function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, rowSelection }) {
+function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, pageLabel = "page", rowSelection }) {
     const [currentPage, setCurrentPage] = React.useState(1);
     const [expandedRowKey, setExpandedRowKey] = React.useState(null);
     const [sortConfig, setSortConfig] = React.useState({
@@ -2049,16 +2073,16 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                                                             ? "sortable"
                                                             : sortConfig.direction === "asc"
                                                                 ? "sortable-asc"
-                                                                : "sortable-desc" }))] }), jsxRuntime.jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsxRuntime.jsx("tbody", { children: renderTableBody() })] }) }), pagination && data.length > pageSizeOptions[0] && (jsxRuntime.jsxs("footer", { className: "cw-table-pagination", children: [jsxRuntime.jsx("button", { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left-double", title: "First" }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left", title: "Previous" }), jsxRuntime.jsx("input", { type: "text", inputMode: "numeric", value: currentPage, onChange: (e) => {
-                            const value = parseInt(e.target.value, 10);
-                            if (!isNaN(value))
-                                handlePageChange(value);
-                        }, onBlur: (e) => {
-                            const value = parseInt(e.target.value, 10);
-                            if (isNaN(value) || value < 1 || value > totalPages) {
-                                handlePageChange(1);
-                            }
-                        }, min: 1, max: totalPages }), jsxRuntime.jsxs("span", { children: ["of ", totalPages] }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), jsxRuntime.jsx("button", { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), jsxRuntime.jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, children: pageSizeOptions.map(size => (jsxRuntime.jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
+                                                                : "sortable-desc" }))] }), jsxRuntime.jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsxRuntime.jsx("tbody", { children: renderTableBody() })] }) }), pagination && data.length > pageSizeOptions[0] && (jsxRuntime.jsxs("footer", { className: "cw-table-pagination", children: [jsxRuntime.jsxs("div", { className: "cw-table-pagination-size", children: [jsxRuntime.jsx(CwIcon, { iconId: "list" }), jsxRuntime.jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, children: pageSizeOptions.map(size => (jsxRuntime.jsx("option", { value: size, children: pageLabel ? `${size} / ${pageLabel}` : size }, size))) })] }), jsxRuntime.jsxs("div", { className: "cw-table-pagination-nav", children: [jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages === 1, variant: "icon", icon: "chevron-left-double" }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages === 1, variant: "icon", icon: "chevron-left" }), jsxRuntime.jsx("input", { type: "text", inputMode: "numeric", value: currentPage, onChange: (e) => {
+                                    const value = parseInt(e.target.value, 10);
+                                    if (!isNaN(value))
+                                        handlePageChange(value);
+                                }, onBlur: (e) => {
+                                    const value = parseInt(e.target.value, 10);
+                                    if (isNaN(value) || value < 1 || value > totalPages) {
+                                        handlePageChange(1);
+                                    }
+                                }, min: 1, max: totalPages }), jsxRuntime.jsx("span", { children: "/" }), jsxRuntime.jsx("span", { children: totalPages }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages === 1, variant: "icon", icon: "chevron-right" }), jsxRuntime.jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages === 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
 }
 
 var styles$i = {"dropIndicator":"cw-sortable-table-module__dropIndicator__ov-Jz","dragging":"cw-sortable-table-module__dragging__MrLrz","skeletonRow":"cw-sortable-table-module__skeletonRow__vyD0M","skeleton":"cw-sortable-table-module__skeleton__QGXAD","saveBar":"cw-sortable-table-module__saveBar__3OdoZ cw-flex-row cw-align-center-center cw-gap-small"};
@@ -2815,10 +2839,26 @@ function CwFileUpload(fileUploadProps) {
 
 var styles$e = {"fileUploadContainer":"cw-file-upload-multiple-module__fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module__hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module__uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module__uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module__uploadTitle__gjRk8","uploadSubtitle":"cw-file-upload-multiple-module__uploadSubtitle__Z0S5t","filesContainer":"cw-file-upload-multiple-module__filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module__fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module__fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module__fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module__fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module__fileName__DjepK","fileSize":"cw-file-upload-multiple-module__fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module__smallButton__siUAh"};
 
+const DEFAULT_LABELS = {
+    uploadDisabled: 'Upload disabled',
+    clickToUpload: 'Click to upload or drag and drop',
+    acceptedFiles: (accept) => `Accepted files: ${accept}`,
+    singleFileOnly: '(Single file only)',
+    allTypesAccepted: 'All file types accepted',
+    changeFile: 'Change File',
+    clearAll: 'Clear all',
+    addMoreFiles: 'Add More Files',
+    filesSelected: (count) => `${count} file${count !== 1 ? 's' : ''} selected`,
+    fileTooLarge: (name, maxSize) => `File "${name}" is too large. Maximum size allowed is ${maxSize}MB.`,
+    invalidFormat: (name, accepted) => `File "${name}" has an invalid format. Allowed formats: ${accepted}`,
+    invalidMimeType: (name, types) => `File "${name}" has an invalid MIME type. Allowed types: ${types}`,
+    alreadySelected: (name) => `File "${name}" is already selected.`,
+};
 function CwFileUploadMultiple(fileUploadProps) {
     const fileInputRef = React.useRef(null);
     const [selectedFiles, setSelectedFiles] = React.useState([]);
     const [existingFile, setExistingFile] = React.useState(fileUploadProps.initialFileName);
+    const labels = { ...DEFAULT_LABELS, ...fileUploadProps.labels };
     React.useEffect(() => {
         setExistingFile(fileUploadProps.initialFileName);
     }, [fileUploadProps.initialFileName]);
@@ -2832,7 +2872,7 @@ function CwFileUploadMultiple(fileUploadProps) {
             if (fileSizeInMB > fileUploadProps.maxFileSize) {
                 return {
                     isValid: false,
-                    error: `File "${file.name}" is too large. Maximum size allowed is ${fileUploadProps.maxFileSize}MB.`
+                    error: labels.fileTooLarge(file.name, fileUploadProps.maxFileSize)
                 };
             }
         }
@@ -2849,7 +2889,7 @@ function CwFileUploadMultiple(fileUploadProps) {
             if (!isExtensionValid) {
                 return {
                     isValid: false,
-                    error: `File "${file.name}" has an invalid format. Allowed formats: ${fileUploadProps.accept}`
+                    error: labels.invalidFormat(file.name, fileUploadProps.accept)
                 };
             }
         }
@@ -2859,7 +2899,7 @@ function CwFileUploadMultiple(fileUploadProps) {
             if (!isMimeTypeValid) {
                 return {
                     isValid: false,
-                    error: `File "${file.name}" has an invalid MIME type. Allowed types: ${fileUploadProps.allowedTypes.join(', ')}`
+                    error: labels.invalidMimeType(file.name, fileUploadProps.allowedTypes.join(', '))
                 };
             }
         }
@@ -2873,7 +2913,7 @@ function CwFileUploadMultiple(fileUploadProps) {
             // Check if the file already exists (by name and size)
             const isDuplicate = existingFiles.some(existingFile => existingFile.name === file.name && existingFile.size === file.size);
             if (isDuplicate) {
-                errors.push(`File "${file.name}" is already selected.`);
+                errors.push(labels.alreadySelected(file.name));
                 continue;
             }
             const validation = validateFile(file);
@@ -2964,12 +3004,12 @@ function CwFileUploadMultiple(fileUploadProps) {
             }
         }
     };
-    return (jsxRuntime.jsxs("div", { className: `${styles$e.fileUploadContainer} ${fileUploadProps.className}`, children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelectInternal, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles$e.hiddenInput }), selectedFiles.length === 0 && !existingFile ? (jsxRuntime.jsxs("div", { className: `${styles$e.uploadArea} ${fileUploadProps.disabled ? styles$e.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsxRuntime.jsx(CwIcon, { iconId: "upload" }), jsxRuntime.jsx("p", { className: `${styles$e.uploadTitle}`, children: fileUploadProps.disabled ? 'Upload disabled' : 'Click to upload or drag and drop' }), jsxRuntime.jsxs("p", { className: `${styles$e.uploadSubtitle}`, children: [fileUploadProps.accept ? `Accepted files: ${fileUploadProps.accept}` : 'All file types accepted', !fileUploadProps.multiple && ' (Single file only)'] })] })) : selectedFiles.length === 0 && existingFile ? (jsxRuntime.jsxs("div", { className: styles$e.filesContainer, children: [jsxRuntime.jsxs("div", { className: styles$e.fileItem, children: [jsxRuntime.jsxs("div", { className: styles$e.fileIcon, children: [jsxRuntime.jsx(CwIcon, { iconId: "page" }), jsxRuntime.jsx("span", { className: styles$e.fileExtension, children: getFileExtension(existingFile) })] }), jsxRuntime.jsx("div", { className: styles$e.fileInfo, children: jsxRuntime.jsx("p", { className: styles$e.fileName, children: existingFile }) }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => {
+    return (jsxRuntime.jsxs("div", { className: `${styles$e.fileUploadContainer} ${fileUploadProps.className}`, children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelectInternal, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles$e.hiddenInput }), selectedFiles.length === 0 && !existingFile ? (jsxRuntime.jsxs("div", { className: `${styles$e.uploadArea} ${fileUploadProps.disabled ? styles$e.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsxRuntime.jsx(CwIcon, { iconId: "upload" }), jsxRuntime.jsx("p", { className: `${styles$e.uploadTitle}`, children: fileUploadProps.disabled ? labels.uploadDisabled : labels.clickToUpload }), jsxRuntime.jsxs("p", { className: `${styles$e.uploadSubtitle}`, children: [fileUploadProps.accept ? labels.acceptedFiles(fileUploadProps.accept) : labels.allTypesAccepted, !fileUploadProps.multiple && ` ${labels.singleFileOnly}`] })] })) : selectedFiles.length === 0 && existingFile ? (jsxRuntime.jsxs("div", { className: styles$e.filesContainer, children: [jsxRuntime.jsxs("div", { className: styles$e.fileItem, children: [jsxRuntime.jsxs("div", { className: styles$e.fileIcon, children: [jsxRuntime.jsx(CwIcon, { iconId: "page" }), jsxRuntime.jsx("span", { className: styles$e.fileExtension, children: getFileExtension(existingFile) })] }), jsxRuntime.jsx("div", { className: styles$e.fileInfo, children: jsxRuntime.jsx("p", { className: styles$e.fileName, children: existingFile }) }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => {
                                     setExistingFile(undefined);
                                     if (fileUploadProps.onSelect) {
                                         fileUploadProps.onSelect(null);
                                     }
-                                }, disabled: fileUploadProps.disabled, className: styles$e.smallButton })] }), jsxRuntime.jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxRuntime.jsxs("div", { className: styles$e.filesContainer, children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxRuntime.jsxs("small", { className: styles$e.filesCount, children: [selectedFiles.length, " file", selectedFiles.length !== 1 ? 's' : '', " selected"] }), jsxRuntime.jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: "Clear all" })] }), selectedFiles.map((file, index) => (jsxRuntime.jsxs("div", { className: styles$e.fileItem, children: [jsxRuntime.jsxs("div", { className: styles$e.fileIcon, children: [jsxRuntime.jsx(CwIcon, { iconId: "page" }), jsxRuntime.jsx("span", { className: styles$e.fileExtension, children: getFileExtension(file.name) })] }), jsxRuntime.jsxs("div", { className: styles$e.fileInfo, children: [jsxRuntime.jsx("p", { className: styles$e.fileName, children: file.name }), jsxRuntime.jsxs("p", { className: styles$e.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$e.smallButton })] }, index))), fileUploadProps.multiple && (jsxRuntime.jsx(CwButton, { text: "Add More Files", icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsxRuntime.jsx(CwButton, { text: "Change File", icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
+                                }, disabled: fileUploadProps.disabled, className: styles$e.smallButton })] }), jsxRuntime.jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxRuntime.jsxs("div", { className: styles$e.filesContainer, children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxRuntime.jsx("small", { className: styles$e.filesCount, children: labels.filesSelected(selectedFiles.length) }), jsxRuntime.jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: labels.clearAll })] }), selectedFiles.map((file, index) => (jsxRuntime.jsxs("div", { className: styles$e.fileItem, children: [jsxRuntime.jsxs("div", { className: styles$e.fileIcon, children: [jsxRuntime.jsx(CwIcon, { iconId: "page" }), jsxRuntime.jsx("span", { className: styles$e.fileExtension, children: getFileExtension(file.name) })] }), jsxRuntime.jsxs("div", { className: styles$e.fileInfo, children: [jsxRuntime.jsx("p", { className: styles$e.fileName, children: file.name }), jsxRuntime.jsxs("p", { className: styles$e.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$e.smallButton })] }, index))), fileUploadProps.multiple && (jsxRuntime.jsx(CwButton, { text: labels.addMoreFiles, icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsxRuntime.jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
 }
 
 function CwInput(CwInputProps) {
@@ -4329,7 +4369,7 @@ const CwMultiFilterTag = props => {
             } : undefined }) }));
 };
 
-var styles$7 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module__cw-multi-filter-catalog-container__S3nsq","cw-multi-filter":"cw-multi-filter-module__cw-multi-filter__zipBK","cw-multi-filter-search":"cw-multi-filter-module__cw-multi-filter-search__eyHr0"};
+var styles$7 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module__cw-multi-filter-catalog-container__S3nsq","cw-multi-filter":"cw-multi-filter-module__cw-multi-filter__zipBK","category-selected":"cw-multi-filter-module__category-selected__eYbes","cw-multi-filter-search":"cw-multi-filter-module__cw-multi-filter-search__eyHr0"};
 
 /**
  * A multiple filter selector, a MULTI-SELECT even. Allows users to select and filter items based on tags.
@@ -4470,7 +4510,7 @@ var styles$7 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module__cw-
  * @param {CwMultiFilterProps} props
  * @returns Set the `onChange` callback to a function to check for changes in the selected filters
  */
-const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style }) => {
+const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeholder = "Write to filter", allCategoriesLabel = "ALL CATEGORIES", className, style }) => {
     const [filteredTags, setFilteredTags] = React.useState(new Set());
     const [inputTextValue, setInputTextValue] = React.useState("");
     const [isPanelOpen, setIsPanelOpen] = React.useState(false);
@@ -4572,9 +4612,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
             inputRef.current?.focus();
         }
     };
-    return (jsxRuntime.jsxs("form", { ref: componentRef, id: id, className: styles$7["cw-multi-filter"], style: style, onSubmit: (e) => {
+    return (jsxRuntime.jsxs("form", { ref: componentRef, id: id, className: `${styles$7["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
             e.preventDefault();
-        }, children: [jsxRuntime.jsxs("div", { onClick: handleDivClick, className: styles$7["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-primary)", outlineOffset: "-2px" } : {}, children: [jsxRuntime.jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (React.createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsxRuntime.jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.target.value), autoComplete: "off", placeholder: "Write to filter", onKeyDown: e => {
+        }, children: [jsxRuntime.jsxs("div", { onClick: handleDivClick, className: styles$7["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-color-primary)", outlineOffset: "-2px" } : {}, children: [jsxRuntime.jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (React.createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsxRuntime.jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.target.value), autoComplete: "off", placeholder: placeholder, onKeyDown: e => {
                                     switch (e.key) {
                                         case "Enter":
                                         case "Tab": {
@@ -4604,15 +4644,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$7["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)",
-                                        outline: "2px solid var(--cw-color-primary)",
-                                        outlineOffset: "-2px",
-                                        fontWeight: 400
-                                    }
-                                    : {}, onClick: () => handleClickCategory("All"), children: "SEARCH IN ALL CATEGORIES" }), Array.from(categoriesMappedToTags().keys()).map(category => (jsxRuntime.jsx("button", { style: selectedCategory === category
+                        } })) : null] }), jsxRuntime.jsxs("section", { className: styles$7["cw-multi-filter-catalog-container"], "data-display-none": !isPanelOpen, children: [jsxRuntime.jsxs("nav", { children: [jsxRuntime.jsx("button", { className: selectedCategory === "All" ? styles$7["category-selected"] : undefined, onClick: () => handleClickCategory("All"), children: allCategoriesLabel }), Array.from(categoriesMappedToTags().keys()).map(category => (jsxRuntime.jsx("button", { style: selectedCategory === category
                                     ? {
                                         backgroundColor: getColor(category).primary,
                                         color: getColor(category).onPrimary,
@@ -5162,10 +5194,13 @@ function usePickerPopup({ anchorRef, isOpen, onClose, position = "left-bottom" }
     return { popupRef, popupStyle: style, renderPopup };
 }
 
-function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, defaultMonth, labelProps, alignProps, placeholder = "Select a date", displayFormat = "dd.MM.yyyy", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, }) {
+function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, defaultMonth, labelProps, alignProps, placeholder = "Select a date", displayFormat = "dd.MM.yyyy", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, locale: locale$1 = locale.enGB, todayLabel = "Today", feedback, }) {
     const [isOpen, setIsOpen] = React.useState(false);
     const [inputValue, setInputValue] = React.useState("");
     const containerRef = React.useRef(null);
+    const feedbackMessages = feedback
+        ? Array.isArray(feedback) ? feedback : [feedback]
+        : [];
     const wrapperRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const prevValueRef = React.useRef(undefined);
@@ -5333,11 +5368,11 @@ function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabl
         ...(maxDate ? [{ after: maxDate }] : []),
         ...(disabledMatcher ? [disabledMatcher] : []),
     ], [disabledDates, minDate, maxDate, disabledMatcher]);
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "single", selected: value || undefined, defaultMonth: defaultMonth || value || undefined, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, modifiers: {
-                                        today: new Date(),
-                                    }, modifiersClassNames: {
-                                        today: "rdp-day-today",
-                                    } }), showTodayButton && (jsxRuntime.jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: "Today" }) }))] }))] })] }) }));
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "single", selected: value || undefined, defaultMonth: defaultMonth || value || undefined, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale$1, modifiers: {
+                                            today: new Date(),
+                                        }, modifiersClassNames: {
+                                            today: "rdp-day-today",
+                                        } }), showTodayButton && (jsxRuntime.jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: todayLabel }) }))] }))] })] }), feedbackMessages.map((feedbackItem, index) => (jsxRuntime.jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
 }
 
 var rangeStyles = {"rangeWrapper":"cw-range-picker-module__rangeWrapper__1nIVs","rangePopup":"cw-range-picker-module__rangePopup__E5jd1","presetList":"cw-range-picker-module__presetList__INiLo"};
@@ -6185,7 +6220,7 @@ function combineDateTimeInOffset(date, hours, minutes, timezoneOffset) {
     return new Date(zdt.epochMilliseconds);
 }
 
-function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval = 15, minTime, maxTime, labelProps, alignProps, datePlaceholder = "dd.MM.yyyy", timePlaceholder = "HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showNowButton = false, timezoneOffset, }) {
+function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval = 15, minTime, maxTime, labelProps, alignProps, datePlaceholder = "dd.MM.yyyy", timePlaceholder = "HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showNowButton = false, nowLabel = "Now", locale: locale$1 = locale.enGB, timezoneOffset, }) {
     // ========================================
     // PROPS NORMALIZATION
     // ========================================
@@ -6425,12 +6460,12 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
     const displayMaxDate = React.useMemo(() => normalizedMaxDateTime && timezoneOffset !== undefined
         ? getDateInOffset(normalizedMaxDateTime, timezoneOffset)
         : normalizedMaxDateTime, [normalizedMaxDateTime, timezoneOffset]);
-    return jsxRuntime.jsx("div", { className: `cw-datetimepicker cw-datetimepicker-separate ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [jsxRuntime.jsx(CwDatePicker, { value: selectedDate, onChange: handleDateChange, minDate: displayMinDate, maxDate: displayMaxDate, disabledDates: disabledDates, disabledMatcher: disabledMatcher, placeholder: datePlaceholder, disabled: disabled, required: required, showClear: showClear, numberOfMonths: numberOfMonths, popupPosition: popupPosition }), jsxRuntime.jsx(CwTimePicker, { value: selectedTime, onChange: handleTimeChange, interval: timeInterval, minTime: timeRestrictions.minTime, maxTime: timeRestrictions.maxTime, placeholder: timePlaceholder, disabled: disabled, required: required, showClear: showClear, popupPosition: popupPosition }), showNowButton && (jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", onClick: handleNowClick, disabled: disabled, title: "Set to current date and time", text: "Now" }))] })] }) });
+    return jsxRuntime.jsx("div", { className: `cw-datetimepicker cw-datetimepicker-separate ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [jsxRuntime.jsx(CwDatePicker, { value: selectedDate, onChange: handleDateChange, minDate: displayMinDate, maxDate: displayMaxDate, disabledDates: disabledDates, disabledMatcher: disabledMatcher, placeholder: datePlaceholder, disabled: disabled, required: required, showClear: showClear, numberOfMonths: numberOfMonths, popupPosition: popupPosition, locale: locale$1 }), jsxRuntime.jsx(CwTimePicker, { value: selectedTime, onChange: handleTimeChange, interval: timeInterval, minTime: timeRestrictions.minTime, maxTime: timeRestrictions.maxTime, placeholder: timePlaceholder, disabled: disabled, required: required, showClear: showClear, popupPosition: popupPosition }), showNowButton && (jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", onClick: handleNowClick, disabled: disabled, text: nowLabel }))] })] }) });
 }
 
 var compactStyles = {"compactPopup":"cw-datetime-compact-module__compactPopup__GiuNY","calendarWrapper":"cw-datetime-compact-module__calendarWrapper__P4Nlq","timeWrapper":"cw-datetime-compact-module__timeWrapper__uMe-A","compactTimeList":"cw-datetime-compact-module__compactTimeList__MzSQT"};
 
-function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval = 15, minTime, maxTime, labelProps, alignProps, placeholder = "dd.mm.yyyy HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, }) {
+function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval = 15, minTime, maxTime, labelProps, alignProps, placeholder = "dd.mm.yyyy HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, nowLabel = "Now", timeLabel = "Time", locale: locale$1 = locale.enGB, }) {
     const [isOpen, setIsOpen] = React.useState(false);
     const [inputValue, setInputValue] = React.useState("");
     const [selectedDate, setSelectedDate] = React.useState(value);
@@ -6661,11 +6696,11 @@ function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, di
         ...(maxDateTime ? [{ after: maxDateTime }] : []),
         ...(disabledMatcher ? [disabledMatcher] : []),
     ], [disabledDates, minDateTime, maxDateTime, disabledMatcher]);
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-datetimepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required, maxLength: 16, style: { width: "24ch" } }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear datetime" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar-time" })) }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${compactStyles.compactPopup}`, style: popupStyle, children: [jsxRuntime.jsxs("div", { className: compactStyles.calendarWrapper, children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, defaultMonth: selectedDate, disabled: disabledDays, numberOfMonths: numberOfMonths, modifiers: {
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-datetimepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required, maxLength: 16 }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear datetime" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar-time" })) }), renderPopup(jsxRuntime.jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${compactStyles.compactPopup}`, style: popupStyle, children: [jsxRuntime.jsxs("div", { className: compactStyles.calendarWrapper, children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, defaultMonth: selectedDate, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale$1, modifiers: {
                                                 today: new Date(),
                                             }, modifiersClassNames: {
                                                 today: "rdp-day-today",
-                                            } }), showTodayButton && (jsxRuntime.jsx("footer", { className: "cw-flex-row cw-align-center-center", children: jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", icon: "check-big", onClick: handleNowClick, text: "Now" }) }))] }), jsxRuntime.jsxs("div", { className: compactStyles.timeWrapper, children: [jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx(CwIcon, { iconId: "clock", size: "medium" }), jsxRuntime.jsx("span", { children: "Time" })] }), jsxRuntime.jsx("div", { ref: timeListRef, className: `${timeStyles.timePickerList} ${compactStyles.compactTimeList}`, children: timeOptions.map((time) => {
+                                            } }), showTodayButton && (jsxRuntime.jsx("footer", { className: "cw-flex-row cw-align-center-center", children: jsxRuntime.jsx(CwButton, { type: "button", variant: "outline", icon: "check-big", onClick: handleNowClick, text: nowLabel }) }))] }), jsxRuntime.jsxs("div", { className: compactStyles.timeWrapper, children: [jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx(CwIcon, { iconId: "clock", size: "medium" }), jsxRuntime.jsx("span", { children: timeLabel })] }), jsxRuntime.jsx("div", { ref: timeListRef, className: `${timeStyles.timePickerList} ${compactStyles.compactTimeList}`, children: timeOptions.map((time) => {
                                                 const isSelected = time === selectedTime;
                                                 return (jsxRuntime.jsx("button", { type: "button", className: isSelected ? timeStyles.selected : "", onClick: () => handleTimeSelect(time), children: time }, time));
                                             }) })] })] }))] })] }) }));
@@ -8005,30 +8040,95 @@ const BackgroundEvent = ({ value, heightRem }) => {
                                 }, children: value.icons }) : null, jsxRuntime.jsx("span", { className: styles$2["scheduler-event-text"], children: value.name })] }) }) }) }) })) : null;
 };
 
+const eventIsVisible = (startDate, endDate, selectedDate, visibleDays) => {
+    const schedulerEnd = Temporal.PlainDate.from({
+        year: selectedDate.getFullYear(),
+        month: selectedDate.getMonth() + 1,
+        day: selectedDate.getDate(),
+    }).add({ days: visibleDays });
+    const schedulerEndDate = new Date(schedulerEnd.year, schedulerEnd.month - 1, schedulerEnd.day);
+    const isBefore = selectedDate > startDate && selectedDate > endDate;
+    const isAfter = schedulerEndDate < startDate && schedulerEndDate < endDate;
+    return !isBefore && !isAfter;
+};
+
+const hoursBetween = (date1, date2) => {
+    const oneHourInMillis = 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
+    const timeDiff = date2.getTime() - date1.getTime();
+    return timeDiff / oneHourInMillis;
+};
+const getEventSizes = (schedulerDate, totalDays, startDate, endDate) => {
+    if (!eventIsVisible(startDate, endDate, schedulerDate, totalDays)) {
+        return {
+            left: 0,
+            width: 0,
+        };
+    }
+    const totalHours = totalDays * 24;
+    // const dateString = schedulerDate.toISOString().split('T')[0];
+    //const schedulerDateAtZero = new Date(dateString)
+    let startHours = hoursBetween(schedulerDate, startDate);
+    let durationHours = hoursBetween(startDate, endDate);
+    const startOutOfScheduler = startHours < 0;
+    if (startOutOfScheduler) {
+        durationHours += startHours;
+        startHours = 0;
+    }
+    const left = (startHours / totalHours) * 100;
+    // Minimum width equivalent to 15 minutes so zero/near-zero duration events stay visible
+    const MIN_WIDTH_HOURS = 0.25;
+    const minWidth = (MIN_WIDTH_HOURS * 100) / totalHours;
+    const width = Math.max((durationHours * 100) / totalHours, minWidth);
+    return {
+        left,
+        width,
+    };
+};
+
+const INDICATOR_HEIGHT_REM = 0.25;
+const IndicatorRow = ({ indicators, selectedDate, visibleDays }) => {
+    return (jsxRuntime.jsx("div", { style: {
+            position: "relative",
+            height: `${INDICATOR_HEIGHT_REM}rem`,
+            pointerEvents: "none",
+        }, "data-name": "indicator-row", children: indicators.map((indicator) => {
+            const { left, width } = getEventSizes(selectedDate, visibleDays, indicator.start, indicator.end);
+            if (width <= 0)
+                return null;
+            const bar = (jsxRuntime.jsx("div", { style: {
+                    position: "absolute",
+                    left: `${left}%`,
+                    width: `${width}%`,
+                    height: `${INDICATOR_HEIGHT_REM}rem`,
+                    backgroundColor: indicator.color,
+                    borderRadius: "1px",
+                    pointerEvents: "auto",
+                } }, indicator.id));
+            if (indicator.tooltip) {
+                return (jsxRuntime.jsx(CwTooltipNew, { content: indicator.tooltip, position: "bottom", dissapearsWhenHover: true, showDelay: 200, children: bar }, indicator.id));
+            }
+            return bar;
+        }) }));
+};
+
+// Fires onClick on the first click of a sequence (detail === 1) and
+// onDoubleClick on the native dblclick event. Subsequent clicks of a
+// double-click sequence (detail > 1) are suppressed so the same logical
+// interaction does not fire onClick twice. Selection therefore appears
+// within one paint frame instead of being delayed by an artificial timer.
 function useSingleAndDoubleClicks(onClick, onDoubleClick) {
-    const timer = React.useRef(null);
-    const cancelPendingClick = React.useCallback(() => {
-        if (timer.current) {
-            clearTimeout(timer.current);
-            timer.current = null;
-        }
-    }, [timer]);
     const handleClick = React.useCallback((e) => {
-        // We only cache the most recent click event, so cancel any pending clicks
         e.stopPropagation();
         e.preventDefault();
-        cancelPendingClick();
-        timer.current = setTimeout(() => {
-            timer.current = null;
-            onClick(e);
-        }, 500);
-    }, [timer, cancelPendingClick, onClick]);
+        if (e.detail > 1)
+            return;
+        onClick(e);
+    }, [onClick]);
     const handleDoubleClick = React.useCallback((e) => {
         e.stopPropagation();
         e.preventDefault();
-        cancelPendingClick();
         onDoubleClick(e);
-    }, [cancelPendingClick, onDoubleClick]);
+    }, [onDoubleClick]);
     return { handleClick, handleDoubleClick };
 }
 
@@ -8202,7 +8302,7 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
 
 const SchedulerRow = React.memo((props) => {
     const [isContextMenuOpen, setIsContextMenuOpen] = React.useState(false);
-    const { events, backgroundEvents, rowHeader, contextMenuItems, RowTitleComp, EventComp, BackgroundEventComp, weekendLines, divisionLines, timeLinePercentage, selectedDate, visibleDays, onEvent, } = props;
+    const { events, backgroundEvents, indicatorRows, rowHeader, contextMenuItems, RowTitleComp, EventComp, BackgroundEventComp, weekendLines, divisionLines, timeLinePercentage, selectedDate, visibleDays, onEvent, } = props;
     const internalRows = separateEventsToInnerRows(events);
     const schedulerDivRef = React.useRef(null);
     const { handleClick, handleDoubleClick } = useSingleAndDoubleClicks((e) => {
@@ -8259,7 +8359,7 @@ const SchedulerRow = React.memo((props) => {
                                     height: props.rowHeightInRem + "rem",
                                     pointerEvents: "none"
                                 }, children: internalRow.map((event) => (jsxRuntime.jsx(EventComp, { value: event, heightRem: props.rowHeightInRem, onEvent: onEvent }, event.id))) }, index));
-                        }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (jsxRuntime.jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "0px", height: `100%` }))] }) })] }));
+                        }), indicatorRows.length > 0 && (jsxRuntime.jsx(IndicatorRow, { indicators: indicatorRows, selectedDate: selectedDate, visibleDays: visibleDays })), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (jsxRuntime.jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "0px", height: `100%` }))] }) })] }));
 }, (prevProps, nextProps) => {
     // This memo is necessary to prevent re-render all the rows when a user makes drag and drop
     const getEventKey = (event) => {
@@ -8285,6 +8385,9 @@ const SchedulerRow = React.memo((props) => {
             return false;
         }
     }
+    if (prevProps.indicatorRows.length !== nextProps.indicatorRows.length) {
+        return false;
+    }
     // If we got here, the events are the same
     return true;
 });
@@ -8475,51 +8578,6 @@ const getWeeksByDays = (visibleDays, selectedDate) => {
     return weeks;
 };
 
-const eventIsVisible = (startDate, endDate, selectedDate, visibleDays) => {
-    const schedulerEnd = Temporal.PlainDate.from({
-        year: selectedDate.getFullYear(),
-        month: selectedDate.getMonth() + 1,
-        day: selectedDate.getDate(),
-    }).add({ days: visibleDays });
-    const schedulerEndDate = new Date(schedulerEnd.year, schedulerEnd.month - 1, schedulerEnd.day);
-    const isBefore = selectedDate > startDate && selectedDate > endDate;
-    const isAfter = schedulerEndDate < startDate && schedulerEndDate < endDate;
-    return !isBefore && !isAfter;
-};
-
-const hoursBetween = (date1, date2) => {
-    const oneHourInMillis = 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
-    const timeDiff = date2.getTime() - date1.getTime();
-    return timeDiff / oneHourInMillis;
-};
-const getEventSizes = (schedulerDate, totalDays, startDate, endDate) => {
-    if (!eventIsVisible(startDate, endDate, schedulerDate, totalDays)) {
-        return {
-            left: 0,
-            width: 0,
-        };
-    }
-    const totalHours = totalDays * 24;
-    // const dateString = schedulerDate.toISOString().split('T')[0];
-    //const schedulerDateAtZero = new Date(dateString)
-    let startHours = hoursBetween(schedulerDate, startDate);
-    let durationHours = hoursBetween(startDate, endDate);
-    const startOutOfScheduler = startHours < 0;
-    if (startOutOfScheduler) {
-        durationHours += startHours;
-        startHours = 0;
-    }
-    const left = (startHours / totalHours) * 100;
-    // Minimum width equivalent to 15 minutes so zero/near-zero duration events stay visible
-    const MIN_WIDTH_HOURS = 0.25;
-    const minWidth = (MIN_WIDTH_HOURS * 100) / totalHours;
-    const width = Math.max((durationHours * 100) / totalHours, minWidth);
-    return {
-        left,
-        width,
-    };
-};
-
 function getLinesByDivisions(headerDivision, _) {
     const lines = headerDivision.flatMap((division) => division.bottom.map((_, i) => ({ isDayBoundary: i === 0 })));
     const left = 100 / lines.length;
@@ -8575,8 +8633,65 @@ const getNow = (isUtc) => {
 };
 const milliSecondsInSecond = 1000;
 const refreshMilliSeconds = 45 * milliSecondsInSecond;
+const EMPTY_EVENTS = [];
+const EMPTY_BG_EVENTS = [];
+const EMPTY_INDICATORS = [];
+// Memoised row body. Receives flat props (the per-row buckets are looked up
+// by the outer Row wrapper). As long as those bucket arrays keep their
+// reference (see `groupByRowIdStable`) and the rest of the render-context
+// values are stable, this row will skip re-rendering on selection clicks
+// that don't affect it.
+const RowContent = React.memo(function RowContent(props) {
+    const header = {
+        value: props.row,
+        width: props.rowHeaderWidth,
+        onEvent: props.onEvent,
+    };
+    return (jsxRuntime.jsx("div", { style: {
+            ...props.style,
+            backgroundColor: props.rowColor
+        }, children: jsxRuntime.jsx(SchedulerRow, { events: props.events, backgroundEvents: props.backgroundEvents, indicatorRows: props.indicatorRows, rowHeader: header, EventComp: props.EventComp, BackgroundEventComp: props.BackgroundEventComp, RowTitleComp: props.RowTitleComp, weekendLines: props.weekendLines, divisionLines: props.divisionLines, timeLinePercentage: props.timeLinePercentage, rowHeightInRem: props.rowHeightRem, onEvent: props.onEvent, contextMenuItems: props.contextMenuItems, visibleDays: props.visibleDays, selectedDate: props.selectedDate }) }, props.row.rowId));
+});
+// Outer (unmemoised) row: looks up per-row buckets from the shared `data`
+// object and forwards them as flat props to `RowContent`. Because the
+// referenced arrays are reused when their contents are unchanged
+// (see `groupByRowIdStable`), `RowContent.memo` will skip the work.
+const Row = ({ index, style, data }) => {
+    const row = data.rows[index];
+    const rowColor = data.groupRowColors
+        ? Math.floor(index / 2) % 2 === 0 ? data.evenColor : data.oddColor
+        : index % 2 === 0 ? data.evenColor : data.oddColor;
+    return (jsxRuntime.jsx(RowContent, { style: style, row: row, rowColor: rowColor, events: data.eventsByRow.get(row.rowId) ?? EMPTY_EVENTS, backgroundEvents: data.backgroundEventsByRow.get(row.rowId) ?? EMPTY_BG_EVENTS, indicatorRows: data.indicatorRowsByRow.get(row.rowId) ?? EMPTY_INDICATORS, EventComp: data.EventComp, BackgroundEventComp: data.BackgroundEventComp, RowTitleComp: data.RowTitleComp, rowHeaderWidth: data.rowHeaderWidth, rowHeightRem: data.rowHeightRem, weekendLines: data.weekendLines, divisionLines: data.divisionLines, timeLinePercentage: data.timeLinePercentage, selectedDate: data.selectedDate, visibleDays: data.visibleDays, contextMenuItems: data.contextMenuItems, onEvent: data.onEvent }));
+};
+// Bucket items by rowId, but reuse previous bucket arrays whenever a row's
+// contents have not changed. Keeping bucket references stable is essential
+// for `RowContent.memo` to skip work when only one row's events change
+// (e.g. on selection clicks).
+const groupByRowIdStable = (items, prev) => {
+    const next = new Map();
+    for (const item of items) {
+        const bucket = next.get(item.rowId);
+        if (bucket) {
+            bucket.push(item);
+        }
+        else {
+            next.set(item.rowId, [item]);
+        }
+    }
+    if (!prev)
+        return next;
+    for (const [rowId, bucket] of next) {
+        const prevBucket = prev.get(rowId);
+        if (prevBucket
+            && prevBucket.length === bucket.length
+            && prevBucket.every((v, i) => v === bucket[i])) {
+            next.set(rowId, prevBucket);
+        }
+    }
+    return next;
+};
 const Scheduler = (props) => {
-    const { header: headerContent, id, events: eventsState, backgroundEvents, contextMenuItems, EventComp, RowTitleComp, orderCategories = ["title"], useOrderCategory, onEvent, groupRowColors, rowHeaderWidth = 180, rowHeightRem = 1.75, } = props;
+    const { header: headerContent, id, events: eventsState, backgroundEvents, indicatorRows: allIndicatorRows = [], contextMenuItems, EventComp, RowTitleComp, orderCategories = ["title"], useOrderCategory, onEvent, groupRowColors, rowHeaderWidth = 180, rowHeightRem = 1.75, } = props;
     const BackgroundEventComp = props.BackgroundEventComp ?? BackgroundEvent;
     const rows = useOrderCategory === false
         ? props.rows
@@ -8584,21 +8699,49 @@ const Scheduler = (props) => {
     const instanceRef = React.useRef(null);
     // const rowHeaderWidth = "180px";
     const { selectedDate, visibleDays, isUtc, isHeaderVisible, visibleRows: stateVisibleRows } = props.state;
-    const events = filterVisibleEvents(eventsState, selectedDate, visibleDays);
+    const events = React.useMemo(() => filterVisibleEvents(eventsState, selectedDate, visibleDays), [eventsState, selectedDate, visibleDays]);
     React.useEffect(() => {
         instanceRef.current?.resetAfterIndex(0);
-    }, [orderCategories, props.rows.length, events]);
-    const totalSubRows = rows.reduce((acc, row) => {
-        const filteredEvents = events.filter((it) => it.rowId === row.rowId);
+    }, [orderCategories, props.rows.length, events, allIndicatorRows]);
+    // Bucket events / backgroundEvents / indicatorRows by rowId once per render
+    // instead of running events.filter() per row inside the row renderer.
+    // Reuse previous bucket arrays when their contents are unchanged so the
+    // memoised RowContent below can skip work (essential for selection clicks
+    // to be cheap).
+    const eventsByRowRef = React.useRef();
+    const backgroundEventsByRowRef = React.useRef();
+    const indicatorRowsByRowRef = React.useRef();
+    const eventsByRow = React.useMemo(() => {
+        const next = groupByRowIdStable(events, eventsByRowRef.current);
+        eventsByRowRef.current = next;
+        return next;
+    }, [events]);
+    const backgroundEventsByRow = React.useMemo(() => {
+        const next = groupByRowIdStable(backgroundEvents, backgroundEventsByRowRef.current);
+        backgroundEventsByRowRef.current = next;
+        return next;
+    }, [backgroundEvents]);
+    const indicatorRowsByRow = React.useMemo(() => {
+        const next = groupByRowIdStable(allIndicatorRows, indicatorRowsByRowRef.current);
+        indicatorRowsByRowRef.current = next;
+        return next;
+    }, [allIndicatorRows]);
+    const totalHeightRem = rows.reduce((acc, row) => {
+        const filteredEvents = eventsByRow.get(row.rowId) ?? [];
         const innerRows = separateEventsToInnerRows(filteredEvents);
-        return acc + Math.max(innerRows.length, 1);
+        const eventHeight = Math.max(innerRows.length, 1) * rowHeightRem;
+        const hasIndicators = indicatorRowsByRow.has(row.rowId);
+        return acc + eventHeight + (hasIndicators ? INDICATOR_HEIGHT_REM : 0);
     }, 0);
-    const visibleRows = Math.min(stateVisibleRows ?? totalSubRows, totalSubRows);
+    const schedulerContentHeight = stateVisibleRows != null
+        ? Math.min(totalHeightRem, stateVisibleRows * rowHeightRem)
+        : Math.max(totalHeightRem, rowHeightRem);
     const totalHours = visibleDays * 24;
     const [timeLinePercentage, setTimeLinePercentage] = React.useState(0);
+    const divisions = React.useMemo(() => getDefaultDivisions(visibleDays, selectedDate), [visibleDays, selectedDate]);
     const header = {
         content: headerContent,
-        divisions: getDefaultDivisions(visibleDays, selectedDate),
+        divisions,
         visibleDays: visibleDays,
         width: rowHeaderWidth,
         selectedDate,
@@ -8608,9 +8751,8 @@ const Scheduler = (props) => {
     };
     const evenColor = "var(--cw-color-surface-container-low)";
     const oddColor = "var(--cw-color-surface-container)";
-    const schedulerContentHeight = rowHeightRem * Math.max(visibleRows, 1);
-    const weekendsLines = getWeekendLinesByDatesVisible(selectedDate, visibleDays);
-    const divisionLines = getLinesByDivisions(header.divisions);
+    const weekendsLines = React.useMemo(() => getWeekendLinesByDatesVisible(selectedDate, visibleDays), [selectedDate, visibleDays]);
+    const divisionLines = React.useMemo(() => getLinesByDivisions(divisions), [divisions, visibleDays]);
     // Timeline percentage calculation
     React.useEffect(() => {
         const updateTimeLinePercentage = () => {
@@ -8621,30 +8763,55 @@ const Scheduler = (props) => {
         const interval = setInterval(updateTimeLinePercentage, refreshMilliSeconds);
         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,
-            width: rowHeaderWidth,
-            onEvent: onEvent,
-        };
-        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: rowHeightRem, onEvent: onEvent, contextMenuItems: contextMenuItems, visibleDays: visibleDays, selectedDate: selectedDate }) }, row.rowId));
-    });
+    const itemData = React.useMemo(() => ({
+        rows,
+        eventsByRow,
+        backgroundEventsByRow,
+        indicatorRowsByRow,
+        EventComp: EventComp,
+        BackgroundEventComp,
+        RowTitleComp: RowTitleComp,
+        rowHeaderWidth,
+        rowHeightRem,
+        weekendLines: weekendsLines,
+        divisionLines,
+        timeLinePercentage,
+        selectedDate,
+        visibleDays,
+        contextMenuItems,
+        onEvent,
+        groupRowColors,
+        evenColor,
+        oddColor,
+    }), [
+        rows,
+        eventsByRow,
+        backgroundEventsByRow,
+        indicatorRowsByRow,
+        EventComp,
+        BackgroundEventComp,
+        RowTitleComp,
+        rowHeaderWidth,
+        rowHeightRem,
+        weekendsLines,
+        divisionLines,
+        timeLinePercentage,
+        selectedDate,
+        visibleDays,
+        contextMenuItems,
+        onEvent,
+        groupRowColors,
+    ]);
     const getItemSize = React.useCallback((index) => {
         const row = rows[index];
-        const filteredEvents = events.filter((it) => it.rowId === row.rowId);
+        const filteredEvents = eventsByRow.get(row.rowId) ?? [];
         const innerRows = separateEventsToInnerRows(filteredEvents);
         const rowsNumber = innerRows.length > 0 ? innerRows.length : 1;
         const pixelsInRem = 16;
-        return rowsNumber * rowHeightRem * pixelsInRem;
-    }, [rows, events]);
+        const hasIndicators = indicatorRowsByRow.has(row.rowId);
+        const indicatorPixels = hasIndicators ? INDICATOR_HEIGHT_REM * pixelsInRem : 0;
+        return rowsNumber * rowHeightRem * pixelsInRem + indicatorPixels;
+    }, [rows, eventsByRow, indicatorRowsByRow, rowHeightRem]);
     // Render
     return (jsxRuntime.jsxs("div", { id: id, style: {
             position: "relative",
@@ -8655,7 +8822,7 @@ const Scheduler = (props) => {
                     position: "sticky",
                     top: 0,
                     zIndex: 1,
-                }, children: jsxRuntime.jsx(SchedulerHeader, { ...header }) })), jsxRuntime.jsx(reactWindow.VariableSizeList, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: styles$2["hide-scrollbar"], children: Row })] }));
+                }, children: jsxRuntime.jsx(SchedulerHeader, { ...header }) })), jsxRuntime.jsx(reactWindow.VariableSizeList, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, itemData: itemData, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: styles$2["hide-scrollbar"], children: Row })] }));
 };
 
 class UiEvent {
@@ -9018,13 +9185,13 @@ const PinRowHeader = ({ value, width, onEvent }) => {
                                         jsxRuntime.jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }), isLoading ? jsxRuntime.jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }) }, value.rowId) }, value.rowId);
 };
 
-const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory, unPinnedOrderCategory, backgroundEvents, contextMenuItems, onEvent, rowHeightRem = 1.75 }) => {
+const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory, unPinnedOrderCategory, backgroundEvents, indicatorRows = [], contextMenuItems, onEvent, rowHeightRem = 1.75 }) => {
     const pinnedRows = rows.filter((it) => it.isPinned);
     const notPinnedRows = rows.filter((it) => !it.isPinned);
     const isFirstVisible = pinnedRows.length > 0;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFirstVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Scheduler, { id: `${id}-pinned`, state: state, header: header, rows: pinnedRows, events: events, backgroundEvents: backgroundEvents, contextMenuItems: contextMenuItems, orderCategories: pinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader, rowHeightRem: rowHeightRem }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CwButton, { onClick: () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFirstVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Scheduler, { id: `${id}-pinned`, state: state, header: header, rows: pinnedRows, events: events, backgroundEvents: backgroundEvents, indicatorRows: indicatorRows, contextMenuItems: contextMenuItems, orderCategories: pinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader, rowHeightRem: rowHeightRem }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CwButton, { onClick: () => {
                                 onEvent(new OnClearPinned());
-                            }, children: "Clear pinned" }) })] })), jsxRuntime.jsx(Scheduler, { id: `${id}-notPinned`, state: { ...state, isHeaderVisible: !isFirstVisible }, header: header, rows: notPinnedRows, events: events, backgroundEvents: backgroundEvents, contextMenuItems: contextMenuItems, orderCategories: unPinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader, rowHeightRem: rowHeightRem })] }));
+                            }, children: "Clear pinned" }) })] })), jsxRuntime.jsx(Scheduler, { id: `${id}-notPinned`, state: { ...state, isHeaderVisible: !isFirstVisible }, header: header, rows: notPinnedRows, events: events, backgroundEvents: backgroundEvents, indicatorRows: indicatorRows, contextMenuItems: contextMenuItems, orderCategories: unPinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader, rowHeightRem: rowHeightRem })] }));
 };
 
 const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder = "Search airport…", required = false, cblConfig, className = "", value, disabled = false, displayMode, initialDisplayText, labelProps, alignProps, width }) => {