@cwellt_software/cwellt-reactjs-lib 1.3.1 → 1.3.3

package/dist/index.cjs.js

@@ -5,12 +5,10 @@ var React = require('react');
 var client = require('react-dom/client');
 var reactDom = require('react-dom');
 var Draggable = require('react-draggable');
-var moment = require('moment');
 var dateFns = require('date-fns');
 var locale = require('date-fns/locale');
 var reactDayPicker = require('react-day-picker');
 require('react-day-picker/dist/style.css');
-var moment$1 = require('moment-timezone');
 var reactWindow = require('react-window');
 
 function _interopNamespaceDefault(e) {
@@ -127,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 = {
@@ -627,11 +649,7 @@ function CwLoading({ isLoading = false, text = '', size = 'regular', iconPositio
  * <CwLoading size="small" />
  */
 function CwLoadingSmall(CwelltLoadingAppointements) {
-    return (jsxRuntime.jsx("div", { children: CwelltLoadingAppointements.isLoading === true ? (
-        // * Show loading appointment
-        jsxRuntime.jsx("div", { className: "cw-loading-container", children: jsxRuntime.jsx("div", { className: "cw-loading" }) })) : (
-        // Show empty div
-        jsxRuntime.jsx("div", {})) }));
+    return (jsxRuntime.jsx("div", { children: CwelltLoadingAppointements.isLoading === true ? (jsxRuntime.jsx("div", { className: "cw-loading-container", children: jsxRuntime.jsx("div", { className: "cw-loading" }) })) : (jsxRuntime.jsx("div", {})) }));
 }
 
 var styles$p = {"cw-generic-tooltip-content":"cw-generic-tooltip-module__cw-generic-tooltip-content__la-Si","cw-generic-tooltip":"cw-generic-tooltip-module__cw-generic-tooltip__Ij76M"};
@@ -1113,11 +1131,7 @@ function CwModal(custModalProps) {
             width: custModalProps.widthModal
         }
     };
-    return (jsxRuntime.jsx("div", { children: custModalProps.modalState && (jsxRuntime.jsxs("div", { className: custModalProps.classNameModalOverlay + " cwelltModalOverlay", children: [jsxRuntime.jsx("div", { className: "cwelltModalOverlayBg", onClick: custModalProps.onCloseModal }), jsxRuntime.jsx(Draggable, { disabled: isModalDisabled, axis: "both", nodeRef: draggableRef, children: jsxRuntime.jsxs("div", { className: custModalProps.classNameModal + " cwelltContainerModal", ref: draggableRef, style: widthModalDef !== "40em" ? modalStyle.widthCustomStyle : modalStyle.widthDefStyle, children: [jsxRuntime.jsxs("div", { className: "cwelltModalHeader", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [jsxRuntime.jsx("div", { className: "cwelltModalTitle", children: custModalProps.titleModal }), jsxRuntime.jsx("button", { className: "cwelltBtnCloseModal", onClick: custModalProps.onCloseModal, children: jsxRuntime.jsx("span", { className: "cwelltCloseIcon" }) })] }), jsxRuntime.jsx("div", { className: "cwelltModalBody", children: jsxRuntime.jsx("div", { className: "cwelltContainerModalBody", style: { position: "relative" }, children: custModalProps.children }) }), isHide === false ? (
-                            // [ false : show modal ]
-                            jsxRuntime.jsx("footer", { className: "legacy-modal-footer", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: jsxRuntime.jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: custModalProps.onSaveModal, form: custModalProps.formSaveModal, hidden: custModalProps.HideBtnModal, type: custModalProps.HtmlSubmitModal }) })) : (
-                            // true [ do not show the modal ]
-                            jsxRuntime.jsx("div", { style: { display: "none" } }))] }) })] })) }));
+    return (jsxRuntime.jsx("div", { children: custModalProps.modalState && (jsxRuntime.jsxs("div", { className: custModalProps.classNameModalOverlay + " cwelltModalOverlay", children: [jsxRuntime.jsx("div", { className: "cwelltModalOverlayBg", onClick: custModalProps.onCloseModal }), jsxRuntime.jsx(Draggable, { disabled: isModalDisabled, axis: "both", nodeRef: draggableRef, children: jsxRuntime.jsxs("div", { className: custModalProps.classNameModal + " cwelltContainerModal", ref: draggableRef, style: widthModalDef !== "40em" ? modalStyle.widthCustomStyle : modalStyle.widthDefStyle, children: [jsxRuntime.jsxs("div", { className: "cwelltModalHeader", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [jsxRuntime.jsx("div", { className: "cwelltModalTitle", children: custModalProps.titleModal }), jsxRuntime.jsx("button", { className: "cwelltBtnCloseModal", onClick: custModalProps.onCloseModal, children: jsxRuntime.jsx("span", { className: "cwelltCloseIcon" }) })] }), jsxRuntime.jsx("div", { className: "cwelltModalBody", children: jsxRuntime.jsx("div", { className: "cwelltContainerModalBody", style: { position: "relative" }, children: custModalProps.children }) }), isHide === false ? (jsxRuntime.jsx("footer", { className: "legacy-modal-footer", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: jsxRuntime.jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: custModalProps.onSaveModal, form: custModalProps.formSaveModal, hidden: custModalProps.HideBtnModal, type: custModalProps.HtmlSubmitModal }) })) : (jsxRuntime.jsx("div", { style: { display: "none" } }))] }) })] })) }));
 }
 
 var styles$n = {"overlayPositioned":"CwConfirmationPopup-module__overlayPositioned__11qYB","popup":"CwConfirmationPopup-module__popup__ahPjM","message":"CwConfirmationPopup-module__message__MnNL4","buttons":"CwConfirmationPopup-module__buttons__fGYYE","button":"CwConfirmationPopup-module__button__ugYQE","confirmButton":"CwConfirmationPopup-module__confirmButton__rTP4S","cancelButton":"CwConfirmationPopup-module__cancelButton__Ry694"};
@@ -1470,12 +1484,10 @@ const CwDialog = props => {
     const footer = React.useMemo(() => (jsxRuntime.jsx("footer", { children: customFooter || (jsxRuntime.jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: onSave, tooltipPosition: "top", disabled: disableSave })) })), [customFooter, onSave, disableSave]);
     const resizeHandles = React.useMemo(() => size.autoHeight
         ? [
-            // Only horizontal handles if autoHeight is true
             jsxRuntime.jsx("div", { "data-handle-e": true, onMouseDown: handleResizeMouseDown("e") }, "handle-e"),
             jsxRuntime.jsx("div", { "data-handle-w": true, onMouseDown: handleResizeMouseDown("w") }, "handle-w")
         ]
         : [
-            // All handles if autoHeight is false
             jsxRuntime.jsx("div", { "data-handle-n": true, onMouseDown: handleResizeMouseDown("n") }, "handle-n"),
             jsxRuntime.jsx("div", { "data-handle-s": true, onMouseDown: handleResizeMouseDown("s") }, "handle-s"),
             jsxRuntime.jsx("div", { "data-handle-e": true, onMouseDown: handleResizeMouseDown("e") }, "handle-e"),
@@ -1876,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({
@@ -2061,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"};
@@ -2827,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]);
@@ -2844,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)
                 };
             }
         }
@@ -2861,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)
                 };
             }
         }
@@ -2871,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(', '))
                 };
             }
         }
@@ -2885,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);
@@ -2976,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) {
@@ -2995,9 +3023,7 @@ function CwInput(CwInputProps) {
             ? "cw-flex-column"
             : "cw-flex-row ", children: [jsxRuntime.jsx("label", { className: CwInputProps.disabled === true
                     ? CwInputProps.labelClassName + " " + "cw_label_text cw_label_text_disabled"
-                    : CwInputProps.labelClassName + " " + "cw_label_text", children: CwInputProps.labelName }), jsxRuntime.jsx("input", { id: CwInputProps.id, type: "text", value: CwInputProps.value, onChange: e => handleChange(e), className: CwInputProps.className + " " + "cw_input", placeholder: CwInputProps.placeholder === undefined ? "Write a text please" : CwInputProps.placeholder, style: CwInputProps.style, disabled: CwInputProps.disabled, required: CwInputProps.required }), CwInputProps.value && (
-            // if the component is disabled do not show clear button
-            jsxRuntime.jsx("button", { className: "cw_button_clear cwellt_flex cwellt_justify_center cwellt_align_items_center", onClick: handleClearClick }))] }));
+                    : CwInputProps.labelClassName + " " + "cw_label_text", children: CwInputProps.labelName }), jsxRuntime.jsx("input", { id: CwInputProps.id, type: "text", value: CwInputProps.value, onChange: e => handleChange(e), className: CwInputProps.className + " " + "cw_input", placeholder: CwInputProps.placeholder === undefined ? "Write a text please" : CwInputProps.placeholder, style: CwInputProps.style, disabled: CwInputProps.disabled, required: CwInputProps.required }), CwInputProps.value && (jsxRuntime.jsx("button", { className: "cw_button_clear cwellt_flex cwellt_justify_center cwellt_align_items_center", onClick: handleClearClick }))] }));
 }
 
 /**
@@ -3473,6 +3499,114 @@ function CwInputDate(props) {
 
 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"};
 
+/**
+ * Converts a Date or ISO string to a Temporal.PlainDate.
+ */
+function toPlainDate$1(dateString) {
+    if (dateString instanceof Date) {
+        return Temporal.PlainDate.from({
+            year: dateString.getFullYear(),
+            month: dateString.getMonth() + 1,
+            day: dateString.getDate(),
+        });
+    }
+    // ISO "YYYY-MM-DD" → direct parse
+    return Temporal.PlainDate.from(dateString);
+}
+/**
+ * Formats a date as DD.MM.YYYY (German locale).
+ */
+function toGermanDate(dateString) {
+    const pd = toPlainDate$1(dateString);
+    const day = String(pd.day).padStart(2, "0");
+    const month = String(pd.month).padStart(2, "0");
+    return `${day}.${month}.${pd.year}`;
+}
+/**
+ * Formats a date as YYYY-MM-DD (ISO).
+ */
+function toISODate(dateString) {
+    return toPlainDate$1(dateString).toString();
+}
+/**
+ * Validates whether a string is a valid DD.MM.YYYY date.
+ */
+function isValidGermanDate(textDate) {
+    return parseGermanDate(textDate) !== null;
+}
+/**
+ * Converts a DD.MM.YYYY string to YYYY-MM-DD, or null if invalid.
+ */
+function germanDateToISO(textDate) {
+    const pd = parseGermanDate(textDate);
+    return pd ? pd.toString() : null;
+}
+/**
+ * Converts a DD.MM.YYYY string to a Date object, or null if invalid.
+ */
+function germanDateToDate(textDate) {
+    const pd = parseGermanDate(textDate);
+    if (!pd)
+        return null;
+    return new Date(pd.year, pd.month - 1, pd.day);
+}
+/**
+ * Returns the number of days in the month and the Monday-based
+ * weekday offset (0 = Monday) for the 1st of the month.
+ */
+function computeCalendarGrid(internalDate) {
+    const pd = Temporal.PlainDate.from({
+        year: internalDate.getFullYear(),
+        month: internalDate.getMonth() + 1,
+        day: 1,
+    });
+    const daysInMonth = pd.daysInMonth;
+    const startDay = pd.dayOfWeek - 1; // Temporal: 1=Mon … 7=Sun → 0-based Mon
+    return { daysInMonth, startDay };
+}
+/**
+ * Returns true when the given day in the internalDate's month/year
+ * matches the selected ISO value string.
+ */
+function isSelectedDay(internalDate, day, value) {
+    const pd = Temporal.PlainDate.from({
+        year: internalDate.getFullYear(),
+        month: internalDate.getMonth() + 1,
+        day,
+    });
+    return pd.toString() === value;
+}
+/**
+ * Returns a new Date set to the 1st of the month offset by `direction` months.
+ */
+function computeNextMonthDate(currentDate, direction) {
+    const pd = Temporal.PlainDate.from({
+        year: currentDate.getFullYear(),
+        month: currentDate.getMonth() + 1,
+        day: 1,
+    });
+    const moved = pd.add({ months: direction });
+    return new Date(moved.year, moved.month - 1, moved.day);
+}
+// ── internal helper ────────────────────────────────────────────────────
+/**
+ * Strictly parses a DD.MM.YYYY string into a Temporal.PlainDate, or null.
+ */
+function parseGermanDate(text) {
+    const match = /^(\d{2})\.(\d{2})\.(\d{4})$/.exec(text);
+    if (!match)
+        return null;
+    const day = Number(match[1]);
+    const month = Number(match[2]);
+    const year = Number(match[3]);
+    try {
+        return Temporal.PlainDate.from({ year, month, day }, { overflow: "reject" });
+    }
+    catch {
+        return null;
+    }
+}
+
 const CwInputDatePicker = ({ value, onChange }) => {
     const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
     const [internalDate, setInternalDate] = React.useState(new Date(value || new Date().toISOString()));
@@ -3496,21 +3630,13 @@ const CwInputDatePicker = ({ value, onChange }) => {
     React.useEffect(() => {
         setTextDate(toGermanDate(value));
     }, [value]);
-    function toGermanDate(dateString) {
-        return moment(dateString).format("DD.MM.YYYY");
-    }
-    function toISODate(dateString) {
-        return moment(dateString).format("YYYY-MM-DD");
-    }
     const submitInput = () => {
-        if (moment(textDate, "DD.MM.YYYY", true).isValid()) {
-            const inputValue = textDate;
-            const momentDate = moment(inputValue, "DD.MM.YYYY", true);
-            if (momentDate.isValid()) {
-                const newDateString = momentDate.format("YYYY-MM-DD");
+        if (isValidGermanDate(textDate)) {
+            const newDateString = germanDateToISO(textDate);
+            const newDate = germanDateToDate(textDate);
+            if (newDateString && newDate) {
                 if (newDateString !== value) {
-                    const newDateString = momentDate.format("YYYY-MM-DD");
-                    setInternalDate(momentDate.toDate());
+                    setInternalDate(newDate);
                     onChange?.(newDateString);
                 }
                 setIsCalendarOpen(false);
@@ -3547,7 +3673,7 @@ const CwInputDatePicker = ({ value, onChange }) => {
         setIsCalendarOpen(false);
     };
     const handleClickMonthArrow = (direction) => {
-        setInternalDate(prevDate => new Date(prevDate.getFullYear(), prevDate.getMonth() + direction, 1));
+        setInternalDate(prevDate => computeNextMonthDate(prevDate, direction));
     };
     const handlePressEnter = (event) => {
         if (event.key === "Enter" && submitInput()) {
@@ -3560,23 +3686,21 @@ const CwInputDatePicker = ({ value, onChange }) => {
         }
     };
     const generateCalendarDays = () => {
-        const daysInMonth = new Date(internalDate.getFullYear(), internalDate.getMonth() + 1, 0).getDate();
-        const startDay = new Date(internalDate.getFullYear(), internalDate.getMonth(), 1).getDay() - 1;
+        const { daysInMonth, startDay } = computeCalendarGrid(internalDate);
         const calendarDays = new Array;
         for (let i = 0; i < startDay; i++) {
             calendarDays.push(jsxRuntime.jsx("div", { className: classes.emptyDay }, `empty-${i}`));
         }
         for (let day = 1; day <= daysInMonth; day++) {
-            const currentDate = new Date(internalDate.getFullYear(), internalDate.getMonth(), day);
-            const isSelected = moment(currentDate).format("YYYY-MM-DD") === value;
-            calendarDays.push(jsxRuntime.jsx("div", { className: `${classes.calendarDay}${isSelected ? ` ${classes.selected}` : ""}`, onClick: () => handleClickDay(day), children: day }, day));
+            const selected = isSelectedDay(internalDate, day, value);
+            calendarDays.push(jsxRuntime.jsx("div", { className: `${classes.calendarDay}${selected ? ` ${classes.selected}` : ""}`, onClick: () => handleClickDay(day), children: day }, day));
         }
         return calendarDays;
     };
     return (jsxRuntime.jsxs("div", { className: classes.datePicker, children: [jsxRuntime.jsx("input", { type: "text", value: textDate, onChange: e => setTextDate(e.currentTarget.value), onFocus: () => {
                     setInternalDate(new Date(value));
                     setIsCalendarOpen(true);
-                }, onBlur: handleBlurInput, onKeyDown: handlePressEnter, "data-valid": moment(textDate, "DD.MM.YYYY", true).isValid(), ref: inputRef, className: classes.input }), isCalendarOpen && (jsxRuntime.jsxs("div", { className: classes.calendar, ref: calendarRef, children: [jsxRuntime.jsxs("div", { className: classes.calendarHeader, children: [jsxRuntime.jsx("button", { className: classes.arrowButton, onClick: () => handleClickMonthArrow(-1), children: "<" }), jsxRuntime.jsxs("span", { className: classes.calendarTitle, children: [internalDate.toLocaleString("default", { month: "long" }), " ", internalDate.getFullYear()] }), jsxRuntime.jsx("button", { className: classes.arrowButton, onClick: () => handleClickMonthArrow(1), children: ">" })] }), jsxRuntime.jsx("div", { className: classes.calendarBody, children: generateCalendarDays() }), jsxRuntime.jsx("button", { className: classes.todayButton, onClick: handleClickToday, children: "Today" })] }))] }));
+                }, onBlur: handleBlurInput, onKeyDown: handlePressEnter, "data-valid": isValidGermanDate(textDate), ref: inputRef, className: classes.input }), isCalendarOpen && (jsxRuntime.jsxs("div", { className: classes.calendar, ref: calendarRef, children: [jsxRuntime.jsxs("div", { className: classes.calendarHeader, children: [jsxRuntime.jsx("button", { className: classes.arrowButton, onClick: () => handleClickMonthArrow(-1), children: "<" }), jsxRuntime.jsxs("span", { className: classes.calendarTitle, children: [internalDate.toLocaleString("default", { month: "long" }), " ", internalDate.getFullYear()] }), jsxRuntime.jsx("button", { className: classes.arrowButton, onClick: () => handleClickMonthArrow(1), children: ">" })] }), jsxRuntime.jsx("div", { className: classes.calendarBody, children: generateCalendarDays() }), jsxRuntime.jsx("button", { className: classes.todayButton, onClick: handleClickToday, children: "Today" })] }))] }));
 };
 
 /**
@@ -3629,6 +3753,47 @@ function CwTime(props) {
     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 })] }) }));
 }
 
+function parseDateParts(dateStr, format) {
+    const parts = dateStr.split(/[.\-\/]/);
+    if (parts.length !== 3)
+        return null;
+    let year, month, day;
+    switch (format) {
+        case "DD.MM.YYYY":
+        case "DD/MM/YYYY":
+            day = Number(parts[0]);
+            month = Number(parts[1]);
+            year = Number(parts[2]);
+            break;
+        case "MM/DD/YYYY":
+            month = Number(parts[0]);
+            day = Number(parts[1]);
+            year = Number(parts[2]);
+            break;
+        case "YYYY-MM-DD":
+            year = Number(parts[0]);
+            month = Number(parts[1]);
+            day = Number(parts[2]);
+            break;
+    }
+    try {
+        return Temporal.PlainDate.from({ year, month, day });
+    }
+    catch {
+        return null;
+    }
+}
+function formatPlainDate(pd, format) {
+    const dd = pd.day.toString().padStart(2, "0");
+    const mm = pd.month.toString().padStart(2, "0");
+    const yyyy = pd.year.toString().padStart(4, "0");
+    switch (format) {
+        case "DD.MM.YYYY": return `${dd}.${mm}.${yyyy}`;
+        case "DD/MM/YYYY": return `${dd}/${mm}/${yyyy}`;
+        case "MM/DD/YYYY": return `${mm}/${dd}/${yyyy}`;
+        case "YYYY-MM-DD": return `${yyyy}-${mm}-${dd}`;
+    }
+}
 /**
  * Input for entering a string of text as a date
  * @remarks
@@ -3658,11 +3823,8 @@ function CwInputDateText(props) {
     const format = dateFormat ?? displayFormat;
     const width = size ?? 12;
     const formattedDate = (date, inFormat, outFormat) => {
-        if (moment(date, inFormat, true).isValid()) {
-            return moment(date, inFormat).format(outFormat);
-        }
-        else
-            return "";
+        const pd = parseDateParts(date, inFormat);
+        return pd ? formatPlainDate(pd, outFormat) : "";
     };
     const [date, setDate] = React.useState("");
     const [displayedDate, setDisplayedDate] = React.useState("");
@@ -3681,8 +3843,9 @@ function CwInputDateText(props) {
     const onChangeInputText = (e) => {
         const newDate = e.target.value;
         setDisplayedDate(newDate);
-        if (moment(newDate, format, true).isValid()) {
-            setDate(moment(newDate, format).format(internalFormat));
+        const pd = parseDateParts(newDate, format);
+        if (pd) {
+            setDate(formatPlainDate(pd, internalFormat));
         }
         else {
             setDate("");
@@ -3691,8 +3854,9 @@ function CwInputDateText(props) {
     const onChangeInputDate = (e) => {
         const newDate = e.target.value;
         setDate(newDate);
-        if (moment(newDate, internalFormat, true).isValid())
-            setDisplayedDate(moment(newDate, internalFormat).format(format));
+        const pd = parseDateParts(newDate, internalFormat);
+        if (pd)
+            setDisplayedDate(formatPlainDate(pd, format));
         else
             setDisplayedDate("");
     };
@@ -4205,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.
@@ -4346,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);
@@ -4448,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": {
@@ -4480,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,
@@ -5038,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);
@@ -5209,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"};
@@ -6004,6 +6163,17 @@ function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelP
                                 }) }) }))] })] }) }));
 }
 
+/**
+ * Converts a numeric offset in hours (e.g. 0, 1, -5, 5.5) to a
+ * Temporal-compatible offset string like "+00:00", "+01:00", "-05:00", "+05:30".
+ */
+function offsetHoursToString(offset) {
+    const sign = offset >= 0 ? "+" : "-";
+    const abs = Math.abs(offset);
+    const hours = Math.floor(abs);
+    const minutes = Math.round((abs - hours) * 60);
+    return `${sign}${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+}
 /**
  * Converts a Date to a new Date whose local year/month/day
  * reflect the date in the given UTC offset.
@@ -6017,8 +6187,9 @@ function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelP
  * @returns A new Date with local fields matching the target timezone's date
  */
 function getDateInOffset(date, timezoneOffset) {
-    const m = moment$1(date).utcOffset(timezoneOffset * 60);
-    return new Date(m.year(), m.month(), m.date());
+    const instant = Temporal.Instant.fromEpochMilliseconds(date.getTime());
+    const zdt = instant.toZonedDateTimeISO(offsetHoursToString(timezoneOffset));
+    return new Date(zdt.year, zdt.month - 1, zdt.day);
 }
 /**
  * Gets the time string (HH:mm) for a Date in the given UTC offset.
@@ -6028,10 +6199,28 @@ function getDateInOffset(date, timezoneOffset) {
  * @returns Time string in "HH:mm" format for the given offset
  */
 function getTimeInOffset(date, timezoneOffset) {
-    return moment$1(date).utcOffset(timezoneOffset * 60).format("HH:mm");
+    const instant = Temporal.Instant.fromEpochMilliseconds(date.getTime());
+    const zdt = instant.toZonedDateTimeISO(offsetHoursToString(timezoneOffset));
+    return `${String(zdt.hour).padStart(2, "0")}:${String(zdt.minute).padStart(2, "0")}`;
+}
+/**
+ * Combines a display date (local fields) and time components into a real Date
+ * by interpreting them in the given UTC offset.
+ *
+ * @param date - Date whose local year/month/day are the "display" values
+ * @param hours - Hour component (0-23)
+ * @param minutes - Minute component (0-59)
+ * @param timezoneOffset - Numeric offset in hours
+ * @returns A Date representing the UTC instant of that date+time in the given offset
+ */
+function combineDateTimeInOffset(date, hours, minutes, timezoneOffset) {
+    const offsetStr = offsetHoursToString(timezoneOffset);
+    const pdt = new Temporal.PlainDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), hours, minutes);
+    const zdt = pdt.toZonedDateTime(offsetStr);
+    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
     // ========================================
@@ -6104,16 +6293,14 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
         if (!date)
             return undefined;
         const [hours, minutes] = (time ?? "00:00").split(':').map(Number);
-        let m;
+        let combined;
         if (timezoneOffset !== undefined) {
-            // Interpretamos los valores como pertenecientes al offset especificado
-            m = moment$1.utc([date.getFullYear(), date.getMonth(), date.getDate(), hours, minutes]);
-            m.utcOffset(timezoneOffset * 60, true);
+            // Interpret the display date+time as belonging to the specified offset
+            combined = combineDateTimeInOffset(date, hours, minutes, timezoneOffset);
         }
         else {
-            m = moment$1(date).hours(hours).minutes(minutes).seconds(0).milliseconds(0);
+            combined = new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours, minutes, 0, 0);
         }
-        const combined = m.toDate();
         // Validate against min/max datetime
         if (normalizedMinDateTime && combined < normalizedMinDateTime)
             return undefined;
@@ -6134,31 +6321,32 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
     const calculateTimeRestrictions = React.useCallback((selectedDate) => {
         if (!selectedDate)
             return { minTime, maxTime };
-        // selectedDate is already a "display date" (shifted for timezone),
-        // so we compare using local date fields via moment (no utcOffset needed here)
-        const mSelected = moment$1(selectedDate);
+        const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() &&
+            a.getMonth() === b.getMonth() &&
+            a.getDate() === b.getDate();
+        const formatLocalTime = (d) => `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
         let calculatedMinTime = minTime;
         let calculatedMaxTime = maxTime;
         // If selected date matches minDateTime date, restrict minimum time
         if (normalizedMinDateTime) {
-            const mMin = timezoneOffset !== undefined
-                ? moment$1(getDateInOffset(normalizedMinDateTime, timezoneOffset))
-                : moment$1(normalizedMinDateTime);
-            if (mSelected.isSame(mMin, 'day')) {
+            const minDisplay = timezoneOffset !== undefined
+                ? getDateInOffset(normalizedMinDateTime, timezoneOffset)
+                : normalizedMinDateTime;
+            if (isSameDay(selectedDate, minDisplay)) {
                 calculatedMinTime = timezoneOffset !== undefined
                     ? getTimeInOffset(normalizedMinDateTime, timezoneOffset)
-                    : moment$1(normalizedMinDateTime).format("HH:mm");
+                    : formatLocalTime(normalizedMinDateTime);
             }
         }
         // If selected date matches maxDateTime date, restrict maximum time
         if (normalizedMaxDateTime) {
-            const mMax = timezoneOffset !== undefined
-                ? moment$1(getDateInOffset(normalizedMaxDateTime, timezoneOffset))
-                : moment$1(normalizedMaxDateTime);
-            if (mSelected.isSame(mMax, 'day')) {
+            const maxDisplay = timezoneOffset !== undefined
+                ? getDateInOffset(normalizedMaxDateTime, timezoneOffset)
+                : normalizedMaxDateTime;
+            if (isSameDay(selectedDate, maxDisplay)) {
                 calculatedMaxTime = timezoneOffset !== undefined
                     ? getTimeInOffset(normalizedMaxDateTime, timezoneOffset)
-                    : moment$1(normalizedMaxDateTime).format("HH:mm");
+                    : formatLocalTime(normalizedMaxDateTime);
             }
         }
         return {
@@ -6272,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);
@@ -6508,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));
                                             }) })] })] }))] })] }) }));
@@ -6849,7 +7037,10 @@ const SchedulerContentArea = ({ now, showTimeline, timeLineLeftPx, timeSeparator
             if (reference) {
                 setContentArea(reference);
             }
-        }, children: [showTimeline && (jsxRuntime.jsx(TimeLine$1, { id: scheduler.props.id + "_timeline", marginLeft: timeLineLeftPx, zIndex: 8, toolTipTitle: moment(now).format("HH:mm") })), timeSeparatorLeftPx.map((pixels) => {
+        }, children: [showTimeline && (jsxRuntime.jsx(TimeLine$1, { id: scheduler.props.id + "_timeline", marginLeft: timeLineLeftPx, zIndex: 8, toolTipTitle: Temporal.PlainTime.from({
+                    hour: now.getHours(),
+                    minute: now.getMinutes(),
+                }).toString({ smallestUnit: "minute" }) })), timeSeparatorLeftPx.map((pixels) => {
                 return jsxRuntime.jsx(TimeLine$1, { marginLeft: pixels, color: "rgba(255,255,255,0.7)" });
             }), jsxRuntime.jsx("span", { onClick: () => {
                     if (onEmptyClick) {
@@ -7063,6 +7254,11 @@ const DaysHeader = ({ days, divisionType, maxWidth, headerType }) => {
     return jsxRuntime.jsx("tr", { className: "cwelltSchRowDate", children: headerToDraw });
 };
 
+function formatHHmm(date) {
+    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const zdt = Temporal.Instant.fromEpochMilliseconds(date.getTime()).toZonedDateTimeISO(timeZone);
+    return `${zdt.hour.toString().padStart(2, "0")}:${zdt.minute.toString().padStart(2, "0")}`;
+}
 const getFormattedTimeForHeader = (calculatedDivType, calculatedDivision, timeHeader) => {
     let showDate = "";
     switch (calculatedDivType) {
@@ -7078,18 +7274,18 @@ const getFormattedTimeForHeader = (calculatedDivType, calculatedDivision, timeHe
                             timeHeader.getHours() === 15 ||
                             timeHeader.getHours() === 18 ||
                             timeHeader.getHours() === 21
-                            ? moment(timeHeader).format("HH:mm")
+                            ? formatHHmm(timeHeader)
                             : "";
                     break;
                 case 3:
                     showDate =
                         timeHeader.getHours() === 0 || timeHeader.getHours() === 8 || timeHeader.getHours() === 16
-                            ? moment(timeHeader).format("HH:mm")
+                            ? formatHHmm(timeHeader)
                             : "";
                     break;
                 case 2:
                     showDate =
-                        timeHeader.getHours() === 0 || timeHeader.getHours() === 12 ? moment(timeHeader).format("HH:mm") : "";
+                        timeHeader.getHours() === 0 || timeHeader.getHours() === 12 ? formatHHmm(timeHeader) : "";
                     break;
             }
             break;
@@ -7241,8 +7437,7 @@ const compareStrings = (str1, str2) => {
 const filterResources = (module, resourceName, resources, groupByFunction, endDate, startDate, scheduleName) => {
     if ((module === "CrewControl" || module === "CrewScheduling" || module === "CrewSchedulingVacations") &&
         resourceName === "Employees") {
-        resources = resources.filter(c => (c.data.Eintritt === null || (c.data.Eintritt !== null && moment(c.data.Eintritt).toDate() <= endDate)) &&
-            (c.data.Austritt === null || (c.data.Austritt !== null && moment(c.data.Austritt).toDate() >= startDate)));
+        resources = resources.filter(c => (c.data.Eintritt === null || (new Date(c.data.Eintritt) <= endDate)) && (c.data.Austritt === null || (new Date(c.data.Austritt) >= startDate)));
     }
     if (scheduleName === "crewPinnedScheduler" || (module === "CrewControl" || module === "CrewScheduling") && resourceName === "Employees") {
         const sortKey = (groupByFunction || scheduleName === "crewPinnedScheduler") ? "mainFunction" : "C3_LC";
@@ -7436,8 +7631,8 @@ class CwScheduler extends React.Component {
     arraysEqual = (a1, a2) => a1.length === a2.length && a1.every((o, idx) => this.objectsEqualDeep(o, a2[idx]));
     componentWillReceiveProps(_nextProps) {
         if (this.state.showConsoleLogs) {
-            console.log("Schedule - componentWillReceiveProps, start: ", moment(new Date()).toString());
-            console.log("Schedule - componentWillReceiveProps - has changes, start: ", moment(new Date()).toString());
+            console.log("Schedule - componentWillReceiveProps, start: ", new Date());
+            console.log("Schedule - componentWillReceiveProps - has changes, start: ", new Date());
         }
         const dateChange = _nextProps.startDate.toISOString() !== this.props.startDate.toISOString() ||
             _nextProps.endDate.toISOString() !== this.props.endDate.toISOString();
@@ -7478,8 +7673,8 @@ class CwScheduler extends React.Component {
                 pinnedResources: this.props.pinnedResources ?? [],
             });
             if (this.state.showConsoleLogs) {
-                console.log("Schedule - componentWillReceiveProps - print on schedule, end: ", moment(new Date()).toString());
-                console.log("Schedule - componentWillReceiveProps, end: ", moment(new Date()).toString());
+                console.log("Schedule - componentWillReceiveProps - print on schedule, end: ", new Date());
+                console.log("Schedule - componentWillReceiveProps, end: ", new Date());
             }
             return;
         }
@@ -7572,10 +7767,11 @@ class CwScheduler extends React.Component {
 }
 
 function dateFromPercentage(startDate, visibleDays, percentage) {
-    const endTime = moment(startDate).add(visibleDays, "day").toDate();
-    const timeSpan = endTime.getTime() - startDate.getTime();
-    const clickedDate = new Date(startDate.getTime() + (timeSpan * percentage));
-    return clickedDate;
+    const start = Temporal.Instant.fromEpochMilliseconds(startDate.getTime());
+    const spanMs = Math.round(visibleDays) * 24 * 60 * 60 * 1000;
+    const offsetMs = Math.round(spanMs * percentage);
+    const result = start.add({ milliseconds: offsetMs });
+    return new Date(result.epochMilliseconds);
 }
 
 function getPercentageFromMouseEvent(event) {
@@ -7746,20 +7942,27 @@ const TimeLine = ({ left, top = "0px", height, color, width = "2px", zIndexNumbe
             }, className: styles$3["scheduler-timeline-label"], children: timeString })) }));
 };
 
+function isToday(startDate, endDate) {
+    if (!startDate)
+        return false;
+    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const today = Temporal.Now.plainDateISO();
+    const start = Temporal.Instant.fromEpochMilliseconds(startDate.getTime())
+        .toZonedDateTimeISO(timeZone).toPlainDate();
+    if (endDate) {
+        const end = Temporal.Instant.fromEpochMilliseconds(endDate.getTime())
+            .toZonedDateTimeISO(timeZone).toPlainDate();
+        return Temporal.PlainDate.compare(today, start) >= 0
+            && Temporal.PlainDate.compare(today, end) <= 0;
+    }
+    return today.equals(start);
+}
+
 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))) })] }));
+        }, children: [jsxRuntime.jsx("div", { className: `${styles$3["scheduler-dates"]} ${isToday(startDate, endDate) ? 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 }) => {
@@ -7783,12 +7986,23 @@ const SchedulerHeader = ({ content, divisions, visibleDays, selectedDate, width,
                         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));
+                        const { start, end } = getStartEnd(day);
+                        return (jsxRuntime.jsx(SchedulerHeaderDivision, { topDivisions: day.top, bottomDivisions: day.bottom, classification: classification, topWidth: thisTopWidth + "%", startDate: start, endDate: end }, day.top + classification));
                     }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (jsxRuntime.jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "50%", height: "50%", isHeader: true, isUtc: isUtc }))] })] }));
 };
+function getStartEnd(day) {
+    const startDate = day.startDate
+        ? new Date(day.startDate)
+        : (() => {
+            const [dd, mm, yyyy] = day.top.split(".");
+            return new Date(Number(yyyy), Number(mm) - 1, Number(dd));
+        })();
+    const endDate = day.endDate ? new Date(day.endDate) : undefined;
+    return {
+        start: startDate,
+        end: endDate
+    };
+}
 
 var styles$2 = {"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","scheduler-event-text":"new-scheduler-module__scheduler-event-text__zjvd7"};
 
@@ -8110,6 +8324,16 @@ const SchedulerRow = React.memo((props) => {
     return true;
 });
 
+const filterVisibleEvents = (events, selectedDate, visibleDays) => {
+    const schedulerEnd = Temporal.PlainDate.from({
+        year: selectedDate.getFullYear(),
+        month: selectedDate.getMonth() + 1,
+        day: selectedDate.getDate(),
+    }).add({ days: visibleDays });
+    const lastDayOfScheduler = new Date(schedulerEnd.year, schedulerEnd.month - 1, schedulerEnd.day);
+    return events.filter((event) => event.endDate > selectedDate && event.startDate < lastDayOfScheduler);
+};
+
 const DIVISION_RULES = [
     { maxDays: 2, divisions: 24 },
     { maxDays: 3, divisions: 12 },
@@ -8124,17 +8348,52 @@ const calculateDivisionsByDays = (days) => {
 };
 const getHoursFromDivisions = (divisions, useCompactHourFormat = false) => {
     const hoursInterval = 24 / divisions;
-    const hourFormat = useCompactHourFormat ? "HH[h]" : "HH:mm";
     const array = [];
     for (let i = 0; i < divisions; i++) {
-        const newHour = moment(new Date(1, 1, 1))
-            .add(hoursInterval * i, "hours")
-            .format(hourFormat);
-        array.push(newHour);
+        const totalMinutes = Math.round(hoursInterval * i * 60);
+        const hours = Math.floor(totalMinutes / 60);
+        const minutes = totalMinutes % 60;
+        const hh = hours.toString().padStart(2, "0");
+        const mm = minutes.toString().padStart(2, "0");
+        array.push(useCompactHourFormat ? `${hh}h` : `${hh}:${mm}`);
     }
     return array;
 };
 
+const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+function toPlainDate(date) {
+    return Temporal.Instant.fromEpochMilliseconds(date.getTime())
+        .toZonedDateTimeISO(timeZone).toPlainDate();
+}
+function addDays(date, days) {
+    const result = new Date(date);
+    result.setDate(result.getDate() + days);
+    return result;
+}
+function formatDD_MM(date) {
+    const pd = toPlainDate(date);
+    return `${pd.day.toString().padStart(2, "0")}.${pd.month.toString().padStart(2, "0")}`;
+}
+function formatDD_MM_YYYY(date) {
+    const pd = toPlainDate(date);
+    return `${pd.day.toString().padStart(2, "0")}.${pd.month.toString().padStart(2, "0")}.${pd.year}`;
+}
+function formatMM_YYYY(date) {
+    const pd = toPlainDate(date);
+    return `${pd.month.toString().padStart(2, "0")}.${pd.year}`;
+}
+function getShortWeekday(date) {
+    return date.toLocaleDateString("en-US", { weekday: "short" });
+}
+function daysBetween(a, b) {
+    const aPlain = toPlainDate(a);
+    const bPlain = toPlainDate(b);
+    return Math.abs(aPlain.until(bPlain).days);
+}
+function daysInMonth(date) {
+    const pd = toPlainDate(date);
+    return pd.daysInMonth;
+}
 const getDefaultDivisions = (visibleDays, selectedDate) => {
     if (visibleDays <= 15) {
         return getDayDivisions(visibleDays, selectedDate);
@@ -8150,16 +8409,16 @@ const getDayDivisions = (visibleDays, selectedDate) => {
     const divisions = getHoursFromDivisions(divisionsNumber, visibleDays < 3);
     const calculatedDivision = [];
     for (let i = 0; i < visibleDays; i++) {
-        const currentDate = moment(selectedDate).add(i, "days");
-        const weekdayShort = currentDate.format("ddd");
+        const currentDate = addDays(selectedDate, i);
+        const weekdayShort = getShortWeekday(currentDate);
         const weekdayLabel = visibleDays < 8
             ? weekdayShort
             : weekdayShort.charAt(0).toUpperCase();
         calculatedDivision.push({
-            top: `${weekdayLabel} ${currentDate.format("DD.MM")}`,
+            top: `${weekdayLabel} ${formatDD_MM(currentDate)}`,
             bottom: divisions,
-            startDate: currentDate.toDate(),
-            endDate: currentDate.toDate()
+            startDate: currentDate,
+            endDate: currentDate
         });
     }
     return calculatedDivision;
@@ -8167,16 +8426,16 @@ const getDayDivisions = (visibleDays, selectedDate) => {
 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 days = Array.from({ length: week.days }, (_, i) => addDays(week.start, i).getDate().toString());
+        const weekEnd = addDays(week.start, week.days - 1);
         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");
+            ? formatDD_MM_YYYY(week.start) + " - " + formatDD_MM_YYYY(weekEnd)
+            : formatDD_MM_YYYY(week.start);
         const division = {
             top: top,
             bottom: days,
-            startDate: moment(week.start).toDate(),
-            endDate: weekEnd.toDate()
+            startDate: new Date(week.start),
+            endDate: weekEnd
         };
         return division;
     });
@@ -8185,13 +8444,13 @@ const getWeekDivisions = (visibleDays, selectedDate) => {
 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 days = Array.from({ length: month.days }, (_, i) => addDays(month.start, i).getDate().toString());
+        const monthEnd = addDays(month.start, month.days - 1);
         const division = {
-            top: moment(month.start).format("MM.YYYY"),
+            top: formatMM_YYYY(month.start),
             bottom: days,
-            startDate: moment(month.start).toDate(), // Añadir fecha de inicio
-            endDate: monthEnd.toDate()
+            startDate: new Date(month.start),
+            endDate: monthEnd
         };
         return division;
     });
@@ -8202,23 +8461,23 @@ const getMonthsByDays = (visibleDays, selectedDate) => {
         return [];
     }
     const month = [];
-    let temporalDay = moment(selectedDate);
+    let rangeStart = new Date(selectedDate);
     for (let i = 0; i < visibleDays; i++) {
-        const currentDay = moment(selectedDate).add(i, "days");
+        const currentDay = addDays(selectedDate, i);
         const isLastLoop = i + 1 === visibleDays;
         if (isLastLoop) {
             month.push({
-                start: temporalDay.toDate(),
-                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
+                start: rangeStart,
+                days: daysBetween(rangeStart, currentDay) + 1,
             });
             break;
         }
-        if (currentDay.date() === currentDay.daysInMonth()) {
+        if (currentDay.getDate() === daysInMonth(currentDay)) {
             month.push({
-                start: temporalDay.toDate(),
-                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
+                start: rangeStart,
+                days: daysBetween(rangeStart, currentDay) + 1,
             });
-            temporalDay = currentDay.add(1, "days");
+            rangeStart = addDays(currentDay, 1);
         }
     }
     return month;
@@ -8229,32 +8488,37 @@ const getWeeksByDays = (visibleDays, selectedDate) => {
         return [];
     }
     const weeks = [];
-    let temporalDay = moment(selectedDate);
+    let rangeStart = new Date(selectedDate);
     for (let i = 0; i < visibleDays; i++) {
-        const currentDay = moment(selectedDate).add(i, "days");
+        const currentDay = addDays(selectedDate, i);
         const isLastLoop = i + 1 === visibleDays;
         if (isLastLoop) {
             weeks.push({
-                start: temporalDay.toDate(),
-                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
+                start: rangeStart,
+                days: daysBetween(rangeStart, currentDay) + 1,
             });
             break;
         }
-        if (currentDay.day() === SUNDAY) {
+        if (currentDay.getDay() === SUNDAY) {
             weeks.push({
-                start: temporalDay.toDate(),
-                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
+                start: rangeStart,
+                days: daysBetween(rangeStart, currentDay) + 1,
             });
-            temporalDay = currentDay.add(1, "days");
+            rangeStart = addDays(currentDay, 1);
         }
     }
     return weeks;
 };
 
 const eventIsVisible = (startDate, endDate, selectedDate, visibleDays) => {
-    const schedulerEnd = moment(selectedDate).add(visibleDays, "days").toDate();
+    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 = schedulerEnd < startDate && schedulerEnd < endDate;
+    const isAfter = schedulerEndDate < startDate && schedulerEndDate < endDate;
     return !isBefore && !isAfter;
 };
 
@@ -8355,11 +8619,7 @@ const Scheduler = (props) => {
     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));
-    });
+    const events = filterVisibleEvents(eventsState, selectedDate, visibleDays);
     React.useEffect(() => {
         instanceRef.current?.resetAfterIndex(0);
     }, [orderCategories, props.rows.length, events]);
@@ -9328,6 +9588,7 @@ exports.UiEvent = UiEvent;
 exports.Weekdays = Weekdays;
 exports.cblEvent = cblEvent;
 exports.eventIsVisible = eventIsVisible;
+exports.filterVisibleEvents = filterVisibleEvents;
 exports.getDefaultDivisions = getDefaultDivisions;
 exports.getEventSizes = getEventSizes;
 exports.itemsToMultiFilterTags = itemsToMultiFilterTags;