@cwellt_software/cwellt-reactjs-lib 1.1.5 → 1.1.7

package/dist/index.cjs.js

@@ -7,6 +7,10 @@ var reactDom = require('react-dom');
 var antd = require('antd');
 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 lodash = require('lodash');
 var reactWindow = require('react-window');
 
@@ -708,7 +712,7 @@ function CwLoadingSmall(CwelltLoadingAppointements) {
         jsxRuntime.jsx("div", {})) }));
 }
 
-var styles$j = {"cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si","cwi-icons":"cw-generic-tooltip-module_cwi-icons__0-vzj"};
+var styles$k = {"cw-generic-tooltip-content":"cw-generic-tooltip-module_cw-generic-tooltip-content__la-Si"};
 
 // Constants moved outside to prevent recreation
 const margin = 16;
@@ -819,12 +823,12 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
     const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => {
         setIsVisible(true);
     }, showDelay);
-    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$j["cw-generic-tooltip-content"]);
+    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$k["cw-generic-tooltip-content"]);
     // Memoize tooltip content creation
     const tooltipContent = React.useMemo(() => {
         if (hide || !isVisible || !content)
             return null;
-        return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$j["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, style: {
+        return reactDom.createPortal(jsxRuntime.jsx("div", { className: styles$k["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, style: {
                 position: 'fixed',
                 top: `${tooltipPosition.top}px`,
                 left: `${tooltipPosition.left}px`,
@@ -839,7 +843,7 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
         clearTooltipTimeout();
         setIsVisible(false);
     }, [clearTooltipTimeout]);
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$j["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, children: [tooltipContent, children] }));
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: styles$k["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, children: [tooltipContent, children] }));
 };
 
 // Reference for draggable modal
@@ -882,7 +886,7 @@ function CwModal(custModalProps) {
                             jsxRuntime.jsx("div", { style: { display: "none" } }))] }) })] })) }));
 }
 
-var styles$i = {"overlayPositioned":"CwConfirmationPopup-module_overlayPositioned__11qYB","popup":"CwConfirmationPopup-module_popup__ahPjM","message":"CwConfirmationPopup-module_message__MnNL4","buttons":"CwConfirmationPopup-module_buttons__fGYYE","button":"CwConfirmationPopup-module_button__ugYQE","confirmButton":"CwConfirmationPopup-module_confirmButton__rTP4S","cancelButton":"CwConfirmationPopup-module_cancelButton__Ry694"};
+var styles$j = {"overlayPositioned":"CwConfirmationPopup-module_overlayPositioned__11qYB","popup":"CwConfirmationPopup-module_popup__ahPjM","message":"CwConfirmationPopup-module_message__MnNL4","buttons":"CwConfirmationPopup-module_buttons__fGYYE","button":"CwConfirmationPopup-module_button__ugYQE","confirmButton":"CwConfirmationPopup-module_confirmButton__rTP4S","cancelButton":"CwConfirmationPopup-module_cancelButton__Ry694"};
 
 function CwConfirmationPopup(props) {
     const { isOpen, onConfirm, onCancel, message = "Are you sure you want to proceed?", confirmText = "Confirm", cancelText = "Cancel", placement = 'bottom', children } = props;
@@ -946,12 +950,12 @@ function CwConfirmationPopup(props) {
             onCancel();
         }
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderChildren(), isOpen && (jsxRuntime.jsx("div", { className: styles$i.overlayPositioned, onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", { ref: popupRef, className: styles$i.popup, style: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderChildren(), isOpen && (jsxRuntime.jsx("div", { className: styles$j.overlayPositioned, onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", { ref: popupRef, className: styles$j.popup, style: {
                         position: 'absolute',
                         top: `${position.top}px`,
                         left: `${position.left}px`,
                         transform: 'none'
-                    }, children: [jsxRuntime.jsx("p", { className: styles$i.message, children: message }), jsxRuntime.jsxs("div", { className: styles$i.buttons, children: [jsxRuntime.jsx("button", { className: `${styles$i.button} ${styles$i.confirmButton}`, onClick: onConfirm, children: confirmText }), jsxRuntime.jsx("button", { className: `${styles$i.button} ${styles$i.cancelButton}`, onClick: onCancel, children: cancelText })] })] }) }))] }));
+                    }, children: [jsxRuntime.jsx("p", { className: styles$j.message, children: message }), jsxRuntime.jsxs("div", { className: styles$j.buttons, children: [jsxRuntime.jsx("button", { className: `${styles$j.button} ${styles$j.confirmButton}`, onClick: onConfirm, children: confirmText }), jsxRuntime.jsx("button", { className: `${styles$j.button} ${styles$j.cancelButton}`, onClick: onCancel, children: cancelText })] })] }) }))] }));
 }
 
 // Reference for draggable modal
@@ -1030,7 +1034,7 @@ class CwModalIframe extends React__namespace.Component {
     }
 }
 
-var styles$h = {"cw-dialog-main":"cw-dialog-module_cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module_cw-dialog-button-close__9GRd8"};
+var styles$i = {"cw-dialog-main":"cw-dialog-module_cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module_cw-dialog-button-close__9GRd8"};
 
 // Helper function to parse size values
 const parseSize = (size) => {
@@ -1246,7 +1250,7 @@ const CwDialog = props => {
             onClose();
         }
     }, [onClose]);
-    const header = React.useMemo(() => (jsxRuntime.jsxs("header", { onMouseDown: handleMouseDown, children: [jsxRuntime.jsx("span", { children: headline }), customHeader || (jsxRuntime.jsx("button", { className: styles$h["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
+    const header = React.useMemo(() => (jsxRuntime.jsxs("header", { onMouseDown: handleMouseDown, children: [jsxRuntime.jsx("span", { children: headline }), customHeader || (jsxRuntime.jsx("button", { className: styles$i["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
     const content = React.useMemo(() => (jsxRuntime.jsx("section", { children: children })), [children]);
     const footer = React.useMemo(() => (jsxRuntime.jsx("footer", { children: customFooter || (jsxRuntime.jsx("button", { className: "cw-button-icon cwi-save", onClick: onSave })) })), [customFooter, onSave]);
     const resizeHandles = React.useMemo(() => size.autoHeight
@@ -1275,7 +1279,7 @@ const CwDialog = props => {
             : `${convertFromPx(size.height, size.heightUnit)}${size.heightUnit}`;
         return { displayWidth, displayHeight };
     }, [size.width, size.height, size.widthUnit, size.heightUnit, size.autoHeight]);
-    const dialogContent = (jsxRuntime.jsx("div", { "data-has-scrim": hasScrim, className: styles$h["cw-dialog-main"], onClick: handleScrimClick, children: jsxRuntime.jsxs("dialog", { ...domProps, ref: dialogRef, style: {
+    const dialogContent = (jsxRuntime.jsx("div", { "data-has-scrim": hasScrim, className: styles$i["cw-dialog-main"], onClick: handleScrimClick, children: jsxRuntime.jsxs("dialog", { ...domProps, ref: dialogRef, style: {
                 left: `${position.x}px`,
                 top: `${position.y}px`,
                 width: displayDimensions.displayWidth,
@@ -1322,10 +1326,10 @@ class CwReportModal extends React__namespace.Component {
         };
     }
     render() {
-        return (jsxRuntime.jsx("div", { id: "cwelltModalReportContent", children: this.state.isModal === true ? (jsxRuntime.jsxs(CwDialog, { open: this.props.visible, width: this.props.width, headline: this.props.title, customFooter: new Array(jsxRuntime.jsx("div", {})), onClose: () => {
+        return (jsxRuntime.jsx("div", { id: "cwelltModalReportContent", children: this.state.isModal === true ? (jsxRuntime.jsxs(CwDialog, { open: this.props.visible, width: this.props.width, height: this.props.height, headline: this.props.title, customFooter: new Array(jsxRuntime.jsx("div", {})), onClose: () => {
                     this.formRef?.current?.resetFields();
                     this.props.SET_MODAL_REPORT_VISIBLE(false);
-                }, hideFooter: true, children: [this.props.name !== "Empty.pdf" && (jsxRuntime.jsx("div", { style: { width: "100%", height: "100%", overflowX: "auto", overflowY: "auto" }, children: jsxRuntime.jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", style: { width: "100%", height: "100%", display: "block" } }) })), this.props.name === "Empty.pdf" && (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("h1", { style: { marginLeft: "2em" }, children: [" ", "Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }) }))] })) : (jsxRuntime.jsxs("div", { children: [this.props.name !== "Empty.pdf" && (jsxRuntime.jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", width: "100%", height: "600px" })), this.props.name === "Empty.pdf" && (jsxRuntime.jsxs("div", { children: ["Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }))] })) }));
+                }, hideFooter: true, children: [this.props.name !== "Empty.pdf" && (jsxRuntime.jsx("div", { style: { width: "100%", height: "100%", overflowX: "auto", overflowY: "auto" }, children: jsxRuntime.jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", style: { width: "100%", height: "100%", display: "block" } }) })), this.props.name === "Empty.pdf" && (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("h1", { style: { marginLeft: "2em" }, children: [" ", "Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }) }))] })) : (jsxRuntime.jsxs("div", { children: [this.props.name !== "Empty.pdf" && (jsxRuntime.jsx("embed", { src: "data:application/pdf;base64," + this.props.content, type: "application/pdf", width: "100%", height: "800px" })), this.props.name === "Empty.pdf" && (jsxRuntime.jsxs("div", { children: ["Please add a(n) ", this.props.reportName, " report in ", this.props.moduleSettings, " Settings"] }))] })) }));
     }
 }
 
@@ -1439,7 +1443,7 @@ function CwButton({ text, variant = 'solid', color = 'primary', className = '',
     return (jsxRuntime.jsx("button", { type: "button", className: buttonClass, ...buttonProps, "data-color": color, children: variant === 'icon' ? null : (children ?? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && jsxRuntime.jsx("span", { className: `cwi-icons cwi-${icon}` }), text && jsxRuntime.jsx("strong", { children: text })] }))) }));
 }
 
-var styles$g = {"card":"cw-card-module_card__HJUT0","clickable":"cw-card-module_clickable__Y-V3X","disabled":"cw-card-module_disabled__0wHh1","loading":"cw-card-module_loading__-fzlx","content":"cw-card-module_content__ma9qy","headerContent":"cw-card-module_headerContent__x4Jfl","footerTags":"cw-card-module_footerTags__80sSW","loadingOverlay":"cw-card-module_loadingOverlay__8-zVV"};
+var styles$h = {"card":"cw-card-module_card__HJUT0","clickable":"cw-card-module_clickable__Y-V3X","disabled":"cw-card-module_disabled__0wHh1","loading":"cw-card-module_loading__-fzlx","content":"cw-card-module_content__ma9qy","headerContent":"cw-card-module_headerContent__x4Jfl","footerTags":"cw-card-module_footerTags__80sSW","loadingOverlay":"cw-card-module_loadingOverlay__8-zVV"};
 
 /**
 * CwCard - A simple card component for displaying content in a contained format
@@ -1463,11 +1467,11 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     // Construct class names using CSS modules
     const cardClassNames = [
         'cw-card',
-        styles$g.card,
+        styles$h.card,
         className,
-        clickable ? styles$g.clickable : '',
-        disabled ? styles$g.disabled : '',
-        isLoading ? styles$g.loading : '',
+        clickable ? styles$h.clickable : '',
+        disabled ? styles$h.disabled : '',
+        isLoading ? styles$h.loading : '',
     ].filter(Boolean).join(' ');
     // Handle click event when card is clickable
     const handleClick = () => {
@@ -1484,15 +1488,15 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     // Determine if footer should be rendered
     const hasFooter = hasChips || footer || (hasActions && direction === "row");
     // Actions component to reuse
-    const ActionsComponent = hasActions && !disabled ? (jsxRuntime.jsxs("div", { className: styles$g.actions, children: [extraActions ?? null, onEdit && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
+    const ActionsComponent = hasActions && !disabled ? (jsxRuntime.jsxs("div", { className: styles$h.actions, children: [extraActions ?? null, onEdit && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsxRuntime.jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
     return (jsxRuntime.jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && {
             role: 'button',
             tabIndex: 0,
             onClick: handleClick,
-        }), "data-variant": variant, "data-direction": direction, children: [hasHeader && (jsxRuntime.jsxs("header", { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: styles$g.headerContent, "data-alignment": alignment, children: [title && jsxRuntime.jsx("h5", { children: title }), subtitle && jsxRuntime.jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), jsxRuntime.jsx("div", { className: styles$g.content, children: children }), hasFooter && (jsxRuntime.jsxs("footer", { children: [hasChips && (jsxRuntime.jsx("div", { className: styles$g.footerTags, children: chips.map((chip, index) => (jsxRuntime.jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$g.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsxRuntime.jsx("div", { className: styles$g.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (jsxRuntime.jsx("div", { className: styles$g.loadingOverlay, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
+        }), "data-variant": variant, "data-direction": direction, children: [hasHeader && (jsxRuntime.jsxs("header", { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: styles$h.headerContent, "data-alignment": alignment, children: [title && jsxRuntime.jsx("h5", { children: title }), subtitle && jsxRuntime.jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), jsxRuntime.jsx("div", { className: styles$h.content, children: children }), hasFooter && (jsxRuntime.jsxs("footer", { children: [hasChips && (jsxRuntime.jsx("div", { className: styles$h.footerTags, children: chips.map((chip, index) => (jsxRuntime.jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$h.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsxRuntime.jsx("div", { className: styles$h.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (jsxRuntime.jsx("div", { className: styles$h.loadingOverlay, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
 };
 
-var styles$f = {"cardContainer":"cw-card-list-module_cardContainer__l3YEh","pagination":"cw-card-list-module_pagination__5Ay78","pageInfo":"cw-card-list-module_pageInfo__uiMel","loading":"cw-card-list-module_loading__cYpND","emptyState":"cw-card-list-module_emptyState__RlqiS","sortControls":"cw-card-list-module_sortControls__mWgZA"};
+var styles$g = {"cardContainer":"cw-card-list-module_cardContainer__l3YEh","pagination":"cw-card-list-module_pagination__5Ay78","pageInfo":"cw-card-list-module_pageInfo__uiMel","loading":"cw-card-list-module_loading__cYpND","emptyState":"cw-card-list-module_emptyState__RlqiS","sortControls":"cw-card-list-module_sortControls__mWgZA"};
 
 function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey, ...htmlProps }) {
     const [currentPage, setCurrentPage] = React.useState(1);
@@ -1526,10 +1530,10 @@ function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', default
         '--card-width': `${defaultCardWidth}px`,
         '--card-gap': `${cardGap}px`
     };
-    return (jsxRuntime.jsxs("div", { ...htmlProps, children: [sortOptions.length > 0 && (jsxRuntime.jsxs("div", { className: styles$f.sortControls, children: [jsxRuntime.jsx("label", { htmlFor: "cardlist-sort-select", children: "Sort by:" }), jsxRuntime.jsx("select", { id: "cardlist-sort-select", value: sortKey, onChange: (e) => handleSortChange(e.target.value), className: styles$f.sortSelect, children: sortOptions.map(option => (jsxRuntime.jsx("option", { value: option.key, children: option.label }, option.key))) }), jsxRuntime.jsx("button", { onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'), className: `cw-button-icon ${sortDirection === 'asc' ? 'cwi-arrow-up' : 'cwi-arrow-down'}`, title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}` })] })), isLoading ? (jsxRuntime.jsx("div", { className: styles$f.loading, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsxRuntime.jsx("div", { className: styles$f.emptyState, children: emptyState || jsxRuntime.jsx("p", { children: "No items to display" }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `${styles$f.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsxRuntime.jsx("div", { className: styles$f.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles$f.pagination, children: [jsxRuntime.jsx("button", { disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)), className: "cw-button-icon cwi-chevron-left" }), jsxRuntime.jsxs("span", { className: styles$f.pageInfo, children: [currentPage, " of ", totalPages] }), jsxRuntime.jsx("button", { disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), className: "cw-button-icon cwi-chevron-right" })] }))] }))] }));
+    return (jsxRuntime.jsxs("div", { ...htmlProps, children: [sortOptions.length > 0 && (jsxRuntime.jsxs("div", { className: styles$g.sortControls, children: [jsxRuntime.jsx("label", { htmlFor: "cardlist-sort-select", children: "Sort by:" }), jsxRuntime.jsx("select", { id: "cardlist-sort-select", value: sortKey, onChange: (e) => handleSortChange(e.target.value), className: styles$g.sortSelect, children: sortOptions.map(option => (jsxRuntime.jsx("option", { value: option.key, children: option.label }, option.key))) }), jsxRuntime.jsx("button", { onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'), className: `cw-button-icon ${sortDirection === 'asc' ? 'cwi-arrow-up' : 'cwi-arrow-down'}`, title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}` })] })), isLoading ? (jsxRuntime.jsx("div", { className: styles$g.loading, children: jsxRuntime.jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (jsxRuntime.jsx("div", { className: styles$g.emptyState, children: emptyState || jsxRuntime.jsx("p", { children: "No items to display" }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: `${styles$g.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsxRuntime.jsx("div", { className: styles$g.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles$g.pagination, children: [jsxRuntime.jsx("button", { disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)), className: "cw-button-icon cwi-chevron-left" }), jsxRuntime.jsxs("span", { className: styles$g.pageInfo, children: [currentPage, " of ", totalPages] }), jsxRuntime.jsx("button", { disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), className: "cw-button-icon cwi-chevron-right" })] }))] }))] }));
 }
 
-var styles$e = {"cw-accordion":"cw-accordion-module_cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module_cw-accordion-body__xlI8b"};
+var styles$f = {"cw-accordion":"cw-accordion-module_cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module_cw-accordion-body__xlI8b"};
 
 /**
  *
@@ -1546,7 +1550,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
         setVisible_accordionBody(!isVisible_accordionBody);
     };
     // #endregion
-    return (jsxRuntime.jsxs("div", { className: styles$e["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxRuntime.jsxs("header", { onClick: () => showAccordionBody(), children: [jsxRuntime.jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsxRuntime.jsx("button", { className: "cw-button-icon" })] }), jsxRuntime.jsx("div", { className: styles$e["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
+    return (jsxRuntime.jsxs("div", { className: styles$f["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxRuntime.jsxs("header", { onClick: () => showAccordionBody(), children: [jsxRuntime.jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsxRuntime.jsx("button", { className: "cw-button-icon" })] }), jsxRuntime.jsx("div", { className: styles$f["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
 }
 
 /**
@@ -1657,6 +1661,22 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
             dataCopy.sort((a, b) => {
                 const aVal = a[sortConfig.key];
                 const bVal = b[sortConfig.key];
+                // Handle null/undefined
+                if (aVal == null && bVal == null)
+                    return 0;
+                if (aVal == null)
+                    return 1;
+                if (bVal == null)
+                    return -1;
+                // Handle strings (case-insensitive)
+                if (typeof aVal === 'string' && typeof bVal === 'string') {
+                    const comparison = aVal.localeCompare(bVal, undefined, {
+                        sensitivity: 'base',
+                        numeric: true
+                    });
+                    return comparison * (sortConfig.direction === "asc" ? 1 : -1);
+                }
+                // Handle numbers and other types
                 return (aVal < bVal ? -1 : aVal > bVal ? 1 : 0) * (sortConfig.direction === "asc" ? 1 : -1);
             });
         }
@@ -1747,7 +1767,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                         }, 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))) })] }))] }));
 }
 
-var styles$d = {"cw-tabs":"cw-tabs-module_cw-tabs__1pmji","cw-tabs-content":"cw-tabs-module_cw-tabs-content__HTp8d"};
+var styles$e = {"cw-tabs":"cw-tabs-module_cw-tabs__1pmji","cw-tabs-content":"cw-tabs-module_cw-tabs-content__HTp8d"};
 
 const TabIcon = ({ icon }) => {
     if (!icon)
@@ -1797,7 +1817,7 @@ function CwTabs(CwTabsProps) {
     const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
         ? { minWidth: CwTabsProps.tabsListWidth }
         : undefined;
-    return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, className: styles$d['cw-tabs'], style: CwTabsProps.style, "data-tabs-position": position, children: [jsxRuntime.jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (jsxRuntime.jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, children: [jsxRuntime.jsx(TabIcon, { icon: tab.icon }), tab.title] }, tab.key))) }), jsxRuntime.jsx("div", { className: styles$d['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
+    return (jsxRuntime.jsxs("div", { id: CwTabsProps.id, className: styles$e['cw-tabs'], style: CwTabsProps.style, "data-tabs-position": position, children: [jsxRuntime.jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (jsxRuntime.jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, children: [jsxRuntime.jsx(TabIcon, { icon: tab.icon }), tab.title] }, tab.key))) }), jsxRuntime.jsx("div", { className: styles$e['cw-tabs-content'], children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
 }
 
 /**
@@ -1837,15 +1857,15 @@ const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detail
  *   emptyValue="N/A"
  * />
  */
-const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "row" }) => {
-    return (jsxRuntime.jsx("dl", { className: `cw-keyvalue-list ${className}`, children: items.map(item => (jsxRuntime.jsxs("div", { className: `cw-keyvalue-list-item cw-flex-${direction}`, children: [jsxRuntime.jsx("dt", { children: item.label }), jsxRuntime.jsx("dd", { children: item.value !== undefined && item.value !== null && item.value !== ""
+const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "row", ...htmlProps }) => {
+    return (jsxRuntime.jsx("dl", { className: `cw-keyvalue-list ${className}`, ...htmlProps, children: items.map(item => (jsxRuntime.jsxs("div", { className: `cw-keyvalue-list-item cw-flex-${direction}`, children: [jsxRuntime.jsx("dt", { children: item.label }), jsxRuntime.jsx("dd", { children: item.value !== undefined && item.value !== null && item.value !== ""
                         ? (React.isValidElement(item.value)
                             ? item.value
                             : `${item.value}${item.suffix ? ` ${item.suffix}` : ''}`)
                         : emptyValue })] }, item.key))) }));
 };
 
-var styles$c = {"sortableList":"cw-sortable-list-module_sortableList__PyLO-","sortableItem":"cw-sortable-list-module_sortableItem__FAnn2","readOnly":"cw-sortable-list-module_readOnly__r7GcH","dragging":"cw-sortable-list-module_dragging__MD715","moved":"cw-sortable-list-module_moved__sE6-N","expandedContent":"cw-sortable-list-module_expandedContent__Kocna","sortableHandle":"cw-sortable-list-module_sortableHandle__HvYBK","sortableContent":"cw-sortable-list-module_sortableContent__C6JhR","sortableTitle":"cw-sortable-list-module_sortableTitle__EgWXr","sortableExtraContent":"cw-sortable-list-module_sortableExtraContent__s4LSv","sortableActions":"cw-sortable-list-module_sortableActions__gwQOU","dropIndicator":"cw-sortable-list-module_dropIndicator__MNSF-","emptyMessage":"cw-sortable-list-module_emptyMessage__gMpaL"};
+var styles$d = {"sortableList":"cw-sortable-list-module_sortableList__PyLO-","sortableItem":"cw-sortable-list-module_sortableItem__FAnn2","readOnly":"cw-sortable-list-module_readOnly__r7GcH","dragging":"cw-sortable-list-module_dragging__MD715","moved":"cw-sortable-list-module_moved__sE6-N","expandedContent":"cw-sortable-list-module_expandedContent__Kocna","sortableHandle":"cw-sortable-list-module_sortableHandle__HvYBK","sortableContent":"cw-sortable-list-module_sortableContent__C6JhR","sortableTitle":"cw-sortable-list-module_sortableTitle__EgWXr","sortableExtraContent":"cw-sortable-list-module_sortableExtraContent__s4LSv","sortableActions":"cw-sortable-list-module_sortableActions__gwQOU","dropIndicator":"cw-sortable-list-module_dropIndicator__MNSF-","emptyMessage":"cw-sortable-list-module_emptyMessage__gMpaL"};
 
 function CwSortableList({ items, onReorder, renderItem, className = '', movedItems = new Set(), emptyMessage = "No elements to show", readOnly = false, }) {
     const [draggedItem, setDraggedItem] = React.useState(null);
@@ -1908,15 +1928,15 @@ function CwSortableList({ items, onReorder, renderItem, className = '', movedIte
         }
     };
     if (items.length === 0) {
-        return (jsxRuntime.jsx("div", { className: `${styles$c.sortableList} ${styles$c.emptyState} ${className}`, children: jsxRuntime.jsx("div", { className: styles$c.emptyMessage, children: emptyMessage }) }));
+        return (jsxRuntime.jsx("div", { className: `${styles$d.sortableList} ${styles$d.emptyState} ${className}`, children: jsxRuntime.jsx("div", { className: styles$d.emptyMessage, children: emptyMessage }) }));
     }
-    return (jsxRuntime.jsx("div", { className: `${styles$c.sortableList} ${className}`, children: items.map((item, index) => {
+    return (jsxRuntime.jsx("div", { className: `${styles$d.sortableList} ${className}`, children: items.map((item, index) => {
             const { title, extraContent, actions, showHandle = true, expandedContent } = renderItem(item);
             const isDragging = draggedItem?.id === item.id;
             const isMoved = movedItems.has(item.id);
             const canExpand = Boolean(expandedContent);
             const isExpanded = expandedItems.has(item.id);
-            return (jsxRuntime.jsxs(React.Fragment, { children: [dropIndicatorIndex === index && jsxRuntime.jsx("div", { className: styles$c.dropIndicator }), jsxRuntime.jsxs("div", { className: `${styles$c.sortableItem} ${isDragging ? styles$c.dragging : ''} ${isMoved ? styles$c.moved : ''} ${readOnly ? styles$c.readOnly : ''}`, draggable: !readOnly, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [jsxRuntime.jsxs("header", { children: [canExpand ? (jsxRuntime.jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsxRuntime.jsx("div", { className: styles$c.sortableHandle, children: jsxRuntime.jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxRuntime.jsxs("div", { className: styles$c.sortableContent, children: [jsxRuntime.jsx("div", { className: styles$c.sortableTitle, children: title }), extraContent && jsxRuntime.jsx("div", { className: styles$c.sortableExtraContent, children: extraContent })] }), jsxRuntime.jsx("div", { className: styles$c.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsxRuntime.jsx("div", { className: styles$c.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsxRuntime.jsx("div", { className: styles$c.dropIndicator }))] }, item.id));
+            return (jsxRuntime.jsxs(React.Fragment, { children: [dropIndicatorIndex === index && jsxRuntime.jsx("div", { className: styles$d.dropIndicator }), jsxRuntime.jsxs("div", { className: `${styles$d.sortableItem} ${isDragging ? styles$d.dragging : ''} ${isMoved ? styles$d.moved : ''} ${readOnly ? styles$d.readOnly : ''}`, draggable: !readOnly, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [jsxRuntime.jsxs("header", { children: [canExpand ? (jsxRuntime.jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsxRuntime.jsx("div", { className: styles$d.sortableHandle, children: jsxRuntime.jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxRuntime.jsxs("div", { className: styles$d.sortableContent, children: [jsxRuntime.jsx("div", { className: styles$d.sortableTitle, children: title }), extraContent && jsxRuntime.jsx("div", { className: styles$d.sortableExtraContent, children: extraContent })] }), jsxRuntime.jsx("div", { className: styles$d.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsxRuntime.jsx("div", { className: styles$d.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsxRuntime.jsx("div", { className: styles$d.dropIndicator }))] }, item.id));
         }) }));
 }
 
@@ -2093,7 +2113,7 @@ function CwFileUpload(fileUploadProps) {
     return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "row", children: [jsxRuntime.jsx("input", { className: "cw-button", type: "file", accept: fileUploadProps.accept, readOnly: true, placeholder: "No file selected...", onChange: handleFileChange }), previewURL && (jsxRuntime.jsx("div", { className: "row", children: jsxRuntime.jsx("img", { src: previewURL, alt: "Preview", style: { maxWidth: "200px", maxHeight: "200px" } }) }))] }), error && jsxRuntime.jsx("div", { className: "row error", children: error }), jsxRuntime.jsx("div", { className: "row", children: jsxRuntime.jsxs("label", { children: ["Please note: File/image has to be in ", fileUploadProps.acceptString, " format", fileUploadProps.sizeString && `, ${fileUploadProps.sizeString}`] }) })] }));
 }
 
-var styles$b = {"fileUploadContainer":"cw-file-upload-multiple-module_fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module_hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module_uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module_uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module_uploadTitle__gjRk8","uploadTitleDisabled":"cw-file-upload-multiple-module_uploadTitleDisabled__tNwSZ","uploadSubtitle":"cw-file-upload-multiple-module_uploadSubtitle__Z0S5t","uploadSubtitleDisabled":"cw-file-upload-multiple-module_uploadSubtitleDisabled__ibxhc","filesContainer":"cw-file-upload-multiple-module_filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module_fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module_fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module_fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module_fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module_fileName__DjepK","fileSize":"cw-file-upload-multiple-module_fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module_smallButton__siUAh"};
+var styles$c = {"fileUploadContainer":"cw-file-upload-multiple-module_fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module_hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module_uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module_uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module_uploadTitle__gjRk8","uploadSubtitle":"cw-file-upload-multiple-module_uploadSubtitle__Z0S5t","filesContainer":"cw-file-upload-multiple-module_filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module_fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module_fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module_fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module_fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module_fileName__DjepK","fileSize":"cw-file-upload-multiple-module_fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module_smallButton__siUAh"};
 
 function CwFileUploadMultiple(fileUploadProps) {
     const fileInputRef = React.useRef(null);
@@ -2235,7 +2255,7 @@ function CwFileUploadMultiple(fileUploadProps) {
             }
         }
     };
-    return (jsxRuntime.jsxs("div", { className: `${styles$b.fileUploadContainer} ${fileUploadProps.className}`, children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelect, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles$b.hiddenInput }), selectedFiles.length === 0 ? (jsxRuntime.jsxs("div", { className: `${styles$b.uploadArea} ${fileUploadProps.disabled ? styles$b.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsxRuntime.jsx(CwIcon, { iconId: "upload" }), jsxRuntime.jsx("p", { className: `${styles$b.uploadTitle}`, children: fileUploadProps.disabled ? 'Upload disabled' : 'Click to upload or drag and drop' }), jsxRuntime.jsxs("p", { className: `${styles$b.uploadSubtitle}`, children: [fileUploadProps.accept ? `Accepted files: ${fileUploadProps.accept}` : 'All file types accepted', !fileUploadProps.multiple && ' (Single file only)'] })] })) : (jsxRuntime.jsxs("div", { className: styles$b.filesContainer, children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxRuntime.jsxs("small", { className: styles$b.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$b.fileItem, children: [jsxRuntime.jsxs("div", { className: styles$b.fileIcon, children: [jsxRuntime.jsx(CwIcon, { iconId: "page" }), jsxRuntime.jsx("span", { className: styles$b.fileExtension, children: getFileExtension(file.name) })] }), jsxRuntime.jsxs("div", { className: styles$b.fileInfo, children: [jsxRuntime.jsx("p", { className: styles$b.fileName, children: file.name }), jsxRuntime.jsxs("p", { className: styles$b.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$b.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 }))] }))] }));
+    return (jsxRuntime.jsxs("div", { className: `${styles$c.fileUploadContainer} ${fileUploadProps.className}`, children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelect, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles$c.hiddenInput }), selectedFiles.length === 0 ? (jsxRuntime.jsxs("div", { className: `${styles$c.uploadArea} ${fileUploadProps.disabled ? styles$c.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsxRuntime.jsx(CwIcon, { iconId: "upload" }), jsxRuntime.jsx("p", { className: `${styles$c.uploadTitle}`, children: fileUploadProps.disabled ? 'Upload disabled' : 'Click to upload or drag and drop' }), jsxRuntime.jsxs("p", { className: `${styles$c.uploadSubtitle}`, children: [fileUploadProps.accept ? `Accepted files: ${fileUploadProps.accept}` : 'All file types accepted', !fileUploadProps.multiple && ' (Single file only)'] })] })) : (jsxRuntime.jsxs("div", { className: styles$c.filesContainer, children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center", children: [jsxRuntime.jsxs("small", { className: styles$c.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$c.fileItem, children: [jsxRuntime.jsxs("div", { className: styles$c.fileIcon, children: [jsxRuntime.jsx(CwIcon, { iconId: "page" }), jsxRuntime.jsx("span", { className: styles$c.fileExtension, children: getFileExtension(file.name) })] }), jsxRuntime.jsxs("div", { className: styles$c.fileInfo, children: [jsxRuntime.jsx("p", { className: styles$c.fileName, children: file.name }), jsxRuntime.jsxs("p", { className: styles$c.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsxRuntime.jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$c.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 }))] }))] }));
 }
 
 function CwInput(CwInputProps) {
@@ -2278,7 +2298,7 @@ function CwDigit(props) {
     return (jsxRuntime.jsx("div", { className: "cw-input-text", children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxRuntime.jsxs(CwLabel, { ...labelProps, children: [iconProps && jsxRuntime.jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxRuntime.jsx("input", { type: "number", ...inputProps }), buttonProps && jsxRuntime.jsx(CwButton, { ...buttonProps })] }) }));
 }
 
-var styles$a = {"colorPreview":"cw-color-picker-module_colorPreview__ylJcD","hueBar":"cw-color-picker-module_hueBar__bFhyC","hueBarSlider":"cw-color-picker-module_hueBarSlider__D53IV","colorPickerInteractiveArea":"cw-color-picker-module_colorPickerInteractiveArea__KZFR1","colorArea":"cw-color-picker-module_colorArea__xgpSE","colorAreaOverlay":"cw-color-picker-module_colorAreaOverlay__pmgOc","hueBackground":"cw-color-picker-module_hueBackground__Mks78","whiteGradient":"cw-color-picker-module_whiteGradient__Bt-fU","blackGradient":"cw-color-picker-module_blackGradient__VnEKJ","colorAreaCursor":"cw-color-picker-module_colorAreaCursor__lotg3"};
+var styles$b = {"colorPreview":"cw-color-picker-module_colorPreview__ylJcD","hueBar":"cw-color-picker-module_hueBar__bFhyC","hueBarSlider":"cw-color-picker-module_hueBarSlider__D53IV","colorPickerInteractiveArea":"cw-color-picker-module_colorPickerInteractiveArea__KZFR1","colorArea":"cw-color-picker-module_colorArea__xgpSE","colorAreaOverlay":"cw-color-picker-module_colorAreaOverlay__pmgOc","hueBackground":"cw-color-picker-module_hueBackground__Mks78","whiteGradient":"cw-color-picker-module_whiteGradient__Bt-fU","blackGradient":"cw-color-picker-module_blackGradient__VnEKJ","colorAreaCursor":"cw-color-picker-module_colorAreaCursor__lotg3"};
 
 const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }) => {
     const [rgb, setRgb] = React.useState({ r: 255, g: 255, b: 255 });
@@ -2481,13 +2501,13 @@ const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }
     // Calculate background color for the main area based on current hue
     const hueColor = hsvToRgb(hsv.h, 100, 100);
     const hueHex = rgbToHex(hueColor.r, hueColor.g, hueColor.b);
-    return (jsxRuntime.jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsxRuntime.jsx("div", { className: styles$a.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsxRuntime.jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsxRuntime.jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsxRuntime.jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxRuntime.jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "R:" }), jsxRuntime.jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "G:" }), jsxRuntime.jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "B:" }), jsxRuntime.jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxRuntime.jsxs("div", { className: styles$a.colorPickerInteractiveArea, children: [jsxRuntime.jsx("div", { className: styles$a.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsxRuntime.jsx("div", { className: styles$a.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxRuntime.jsxs("div", { className: styles$a.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxRuntime.jsxs("div", { className: styles$a.colorAreaOverlay, children: [jsxRuntime.jsx("div", { className: styles$a.hueBackground, style: { backgroundColor: hueHex } }), jsxRuntime.jsx("div", { className: styles$a.whiteGradient }), jsxRuntime.jsx("div", { className: styles$a.blackGradient })] }), jsxRuntime.jsx("div", { className: styles$a.colorAreaCursor, style: {
+    return (jsxRuntime.jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxRuntime.jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsxRuntime.jsx("div", { className: styles$b.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsxRuntime.jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsxRuntime.jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsxRuntime.jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxRuntime.jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "R:" }), jsxRuntime.jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "G:" }), jsxRuntime.jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "B:" }), jsxRuntime.jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxRuntime.jsxs("div", { className: styles$b.colorPickerInteractiveArea, children: [jsxRuntime.jsx("div", { className: styles$b.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsxRuntime.jsx("div", { className: styles$b.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxRuntime.jsxs("div", { className: styles$b.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxRuntime.jsxs("div", { className: styles$b.colorAreaOverlay, children: [jsxRuntime.jsx("div", { className: styles$b.hueBackground, style: { backgroundColor: hueHex } }), jsxRuntime.jsx("div", { className: styles$b.whiteGradient }), jsxRuntime.jsx("div", { className: styles$b.blackGradient })] }), jsxRuntime.jsx("div", { className: styles$b.colorAreaCursor, style: {
                                     left: `${hsv.s}%`,
                                     top: `${100 - hsv.v}%`
                                 } })] })] })] }));
 };
 
-var styles$9 = {"selectColor":"cw-input-color-module_selectColor__DTo3V","disabled":"cw-input-color-module_disabled__O1fK5","colorDropdown":"cw-input-color-module_colorDropdown__pX2bc"};
+var styles$a = {"selectColor":"cw-input-color-module_selectColor__DTo3V","disabled":"cw-input-color-module_disabled__O1fK5","colorDropdown":"cw-input-color-module_colorDropdown__pX2bc"};
 
 const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, width = '4rem', height = '2rem' }) => {
     const [isOpen, setIsOpen] = React.useState(false);
@@ -2620,11 +2640,11 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
                 break;
         }
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$9.selectColor} ${disabled ? styles$9.disabled : ''}`, style: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$a.selectColor} ${disabled ? styles$a.disabled : ''}`, style: {
                     width,
                     height,
                     backgroundColor: value,
-                }, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && reactDom.createPortal(jsxRuntime.jsx("div", { ref: dropdownRef, className: styles$9.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsxRuntime.jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
+                }, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && reactDom.createPortal(jsxRuntime.jsx("div", { ref: dropdownRef, className: styles$a.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsxRuntime.jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
 };
 
 /**
@@ -3117,7 +3137,7 @@ const CwImageArea = React.forwardRef((props, ref) => {
 });
 CwImageArea.displayName = "CwImageArea";
 
-var styles$8 = {"cw-weekday-selector":"cw-weekday-selector-module_cw-weekday-selector__Iz4GZ"};
+var styles$9 = {"cw-weekday-selector":"cw-weekday-selector-module_cw-weekday-selector__Iz4GZ"};
 
 /**
  * This class represents a week where days can be selected or unselected
@@ -3257,7 +3277,7 @@ const CwWeekdaySelector = ({ value = "", onChange, disabled = false }) => {
         setSelectedDays(newWeekdays);
         onChange?.(newWeekdays.toString());
     };
-    return (jsxRuntime.jsx("div", { className: styles$8["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsxRuntime.jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
+    return (jsxRuntime.jsx("div", { className: styles$9["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsxRuntime.jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
 };
 
 function CwCheckbox(CwCheckboxProps) {
@@ -4004,13 +4024,13 @@ function CwMultiselect(CwelltCustomFilterTabProps) {
                                 }) }, "group" + i))) })] }) }) }) }));
 }
 
-var styles$7 = {"cw-multifilter-tag":"cw-multi-filter-tag-module_cw-multifilter-tag__Epda-"};
+var styles$8 = {"cw-multifilter-tag":"cw-multi-filter-tag-module_cw-multifilter-tag__Epda-"};
 
 const CwMultiFilterTag = props => {
     const { ID, Name, Value, Category, Removable, PrimaryColor, OnPrimaryColor, Selectable, Selected, OnSelect } = props;
     const BackgroundColor = `rgb(${PrimaryColor.r},${PrimaryColor.g},${PrimaryColor.b})`;
     const TextColor = `rgb(${OnPrimaryColor.r},${OnPrimaryColor.g},${OnPrimaryColor.b})`;
-    return (jsxRuntime.jsxs("li", { className: styles$7["cw-multifilter-tag"], "data-selected": !!props.Selected, "data-removable": !!props.Removable, style: {
+    return (jsxRuntime.jsxs("li", { className: styles$8["cw-multifilter-tag"], "data-selected": !!props.Selected, "data-removable": !!props.Removable, style: {
             color: TextColor,
             backgroundColor: BackgroundColor,
             opacity: Selected && !Removable ? "0.5" : "1",
@@ -4021,7 +4041,7 @@ const CwMultiFilterTag = props => {
         }, children: [jsxRuntime.jsx("span", { id: ID, "data-value": Value, "data-category": Category, children: Name }), Removable && (jsxRuntime.jsx("span", { onClick: () => props.OnRemove?.(props), children: jsxRuntime.jsx(CwIcon, { iconId: "close" }) }))] }));
 };
 
-var styles$6 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-multi-filter-catalog-container__S3nsq","cw-multi-filter":"cw-multi-filter-module_cw-multi-filter__zipBK","cw-multi-filter-search":"cw-multi-filter-module_cw-multi-filter-search__eyHr0"};
+var styles$7 = {"cw-multi-filter-catalog-container":"cw-multi-filter-module_cw-multi-filter-catalog-container__S3nsq","cw-multi-filter":"cw-multi-filter-module_cw-multi-filter__zipBK","cw-multi-filter-search":"cw-multi-filter-module_cw-multi-filter-search__eyHr0"};
 
 /**
  * A multiple filter selector, a MULTI-SELECT even. Allows users to select and filter items based on tags.
@@ -4267,9 +4287,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
             inputRef.current?.focus();
         }
     };
-    return (jsxRuntime.jsxs("form", { ref: componentRef, id: id, className: styles$6["cw-multi-filter"], style: style, onSubmit: (e) => {
+    return (jsxRuntime.jsxs("form", { ref: componentRef, id: id, className: styles$7["cw-multi-filter"], style: style, onSubmit: (e) => {
             e.preventDefault();
-        }, children: [jsxRuntime.jsxs("div", { onClick: handleDivClick, className: styles$6["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: "Write to filter", onKeyDown: e => {
                                     switch (e.key) {
                                         case "Enter":
                                         case "Tab":
@@ -4290,7 +4310,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$6["cw-multi-filter-catalog-container"], "data-display-none": !isPanelOpen, children: [jsxRuntime.jsxs("nav", { children: [jsxRuntime.jsx("button", { style: selectedCategory === "All"
+                        } })) : null] }), jsxRuntime.jsxs("section", { className: styles$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)",
@@ -4317,7 +4337,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, style
                             } }, props.ID))) })] })] }));
 };
 
-var styles$5 = {"tree-container":"cw-tree-view-module_tree-container__NN-HJ","tree-wrapper":"cw-tree-view-module_tree-wrapper__keBZI","tree-item":"cw-tree-view-module_tree-item__prE9N","tree-node":"cw-tree-view-module_tree-node__wfro9","selected":"cw-tree-view-module_selected__XJQ0w","non-selectable":"cw-tree-view-module_non-selectable__YuPSx","tree-children":"cw-tree-view-module_tree-children__ji8CZ","empty-state":"cw-tree-view-module_empty-state__yvRjo","tree-label":"cw-tree-view-module_tree-label__ss3Nf","tree-spacer":"cw-tree-view-module_tree-spacer__E9Ud2"};
+var styles$6 = {"tree-container":"cw-tree-view-module_tree-container__NN-HJ","tree-wrapper":"cw-tree-view-module_tree-wrapper__keBZI","tree-item":"cw-tree-view-module_tree-item__prE9N","tree-node":"cw-tree-view-module_tree-node__wfro9","selected":"cw-tree-view-module_selected__XJQ0w","non-selectable":"cw-tree-view-module_non-selectable__YuPSx","tree-children":"cw-tree-view-module_tree-children__ji8CZ","empty-state":"cw-tree-view-module_empty-state__yvRjo","tree-label":"cw-tree-view-module_tree-label__ss3Nf","tree-spacer":"cw-tree-view-module_tree-spacer__E9Ud2"};
 
 function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId: initialSelectedId = null }) {
     const [expanded, setExpanded] = React.useState(new Set());
@@ -4384,10 +4404,10 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
         const isLeaf = !hasChildren;
         const isSelected = selectedId?.toString().toLowerCase() === node.id.toString().toLowerCase();
         const selectable = allowParentSelection || isLeaf;
-        return (jsxRuntime.jsxs("div", { className: styles$5["tree-item"], children: [jsxRuntime.jsxs("div", { className: [
-                        styles$5["tree-node"],
-                        isSelected && styles$5["selected"],
-                        !selectable && styles$5["non-selectable"]
+        return (jsxRuntime.jsxs("div", { className: styles$6["tree-item"], children: [jsxRuntime.jsxs("div", { className: [
+                        styles$6["tree-node"],
+                        isSelected && styles$6["selected"],
+                        !selectable && styles$6["non-selectable"]
                     ].filter(Boolean).join(' '), style: { paddingLeft: `${depth * 24 + 8}px` }, onClick: () => {
                         if (selectable) {
                             setSelectedId(node.id);
@@ -4396,7 +4416,7 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
                         else {
                             toggleExpand(node.id);
                         }
-                    }, children: [hasChildren && (jsxRuntime.jsx(CwIcon, { size: "large", iconId: isExpanded ? "chevron-down" : "chevron-right" })), jsxRuntime.jsx("div", { className: `${styles$5["tree-label"]} ${!hasChildren ? styles$5["tree-spacer"] : ''}`, children: node.label })] }), hasChildren && isExpanded && (jsxRuntime.jsx("div", { className: styles$5["tree-children"], children: node.children.map((child) => renderNode(child, depth + 1)) }))] }, node.id));
+                    }, children: [hasChildren && (jsxRuntime.jsx(CwIcon, { size: "large", iconId: isExpanded ? "chevron-down" : "chevron-right" })), jsxRuntime.jsx("div", { className: `${styles$6["tree-label"]} ${!hasChildren ? styles$6["tree-spacer"] : ''}`, children: node.label })] }), hasChildren && isExpanded && (jsxRuntime.jsx("div", { className: styles$6["tree-children"], children: node.children.map((child) => renderNode(child, depth + 1)) }))] }, node.id));
     };
     // Function to search for nodes that match the search term
     const searchInTree = (nodes, searchTerm) => {
@@ -4420,7 +4440,7 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
         return results;
     };
     const filteredData = searchInTree(data, search);
-    return (jsxRuntime.jsxs("div", { className: `cw-tree-view ${styles$5["tree-container"]}`, children: [jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx("input", { type: "text", placeholder: "Search in tree...", value: search, onChange: (e) => setSearch(e.target.value) }), search && (jsxRuntime.jsx(CwButton, { onClick: () => setSearch(""), type: "button", icon: "close", variant: "icon", color: "neutral" }))] }), jsxRuntime.jsx("div", { className: styles$5["tree-wrapper"], children: filteredData.length > 0 ? (filteredData.map((node) => renderNode(node))) : (jsxRuntime.jsxs("div", { className: styles$5["empty-state"], children: [jsxRuntime.jsx(CwIcon, { iconId: "comment" }), search ? "No results found" : "There are no items"] })) })] }));
+    return (jsxRuntime.jsxs("div", { className: `cw-tree-view ${styles$6["tree-container"]}`, children: [jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx("input", { type: "text", placeholder: "Search in tree...", value: search, onChange: (e) => setSearch(e.target.value) }), search && (jsxRuntime.jsx(CwButton, { onClick: () => setSearch(""), type: "button", icon: "close", variant: "icon", color: "neutral" }))] }), jsxRuntime.jsx("div", { className: styles$6["tree-wrapper"], children: filteredData.length > 0 ? (filteredData.map((node) => renderNode(node))) : (jsxRuntime.jsxs("div", { className: styles$6["empty-state"], children: [jsxRuntime.jsx(CwIcon, { iconId: "comment" }), search ? "No results found" : "There are no items"] })) })] }));
 }
 
 function CwSearchInput(optionsProps) {
@@ -4502,7 +4522,7 @@ function CwSearchInput(optionsProps) {
                             : option.description }, option.id))) }) }))] }));
 }
 
-var styles$4 = {"context-menu":"cw-context-menu-module_context-menu__dbxnO","context-menu-item":"cw-context-menu-module_context-menu-item__B2W-Q"};
+var styles$5 = {"context-menu":"cw-context-menu-module_context-menu__dbxnO","context-menu-item":"cw-context-menu-module_context-menu-item__B2W-Q"};
 
 /**
  * A context menu that is rendered when the user clicks on a button.
@@ -4539,10 +4559,10 @@ const CwContextMenu = ({ children, options, offset, onSelect }) => {
             document.removeEventListener("mousedown", handleOutsideClick);
         };
     }, []);
-    return (jsxRuntime.jsxs("div", { onContextMenu: handleContextMenu, children: [children, isOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: styles$4["context-menu"], style: {
+    return (jsxRuntime.jsxs("div", { onContextMenu: handleContextMenu, children: [children, isOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: styles$5["context-menu"], style: {
                     top: position.y + (offset?.y || 0),
                     left: position.x + (offset?.x || 0),
-                }, children: options.map(option => (jsxRuntime.jsx("div", { onClick: () => handleOptionClick(option), className: styles$4["context-menu-item"], children: option }, option))) }))] }));
+                }, children: options.map(option => (jsxRuntime.jsx("div", { onClick: () => handleOptionClick(option), className: styles$5["context-menu-item"], children: option }, option))) }))] }));
 };
 
 function CwDataItem(cwBoxItemsProps) {
@@ -4787,6 +4807,1223 @@ function CwBtnDelay({ cw_btnOnclick, cw_btn_disabled }) {
     return jsxRuntime.jsx("button", { onClick: cw_btnOnclick, className: "cw-button-icon cwi-icons cwi-plane-delay", disabled: cw_btn_disabled });
 }
 
+var styles$4 = {"pickerWrapper":"cw-pickers-base-module_pickerWrapper__Fb9Zo","pickerIcons":"cw-pickers-base-module_pickerIcons__dyd2-","pickerPopup":"cw-pickers-base-module_pickerPopup__dkxJo","title":"cw-pickers-base-module_title__cE7qI"};
+
+function CustomCaption$2({ displayMonth }) {
+    const { goToMonth, nextMonth, previousMonth } = reactDayPicker.useNavigation();
+    return (jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", icon: "chevron-left", onClick: () => previousMonth && goToMonth(previousMonth), disabled: !previousMonth, "aria-label": "Previous month" }), jsxRuntime.jsx("div", { className: styles$4.title, children: dateFns.format(displayMonth, "MMMM yyyy", { locale: locale.enGB }) }), jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", icon: "chevron-right", onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, "aria-label": "Next month" })] }));
+}
+function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, labelProps, alignProps, placeholder = "Select a date", displayFormat = "dd.MM.yyyy", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState("");
+    const containerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const prevValueRef = React.useRef(value);
+    // Parse date from string based on format
+    const parseDate = React.useCallback((dateString, formatStr) => {
+        try {
+            const cleanString = dateString.trim();
+            const parts = cleanString.split(/[\/\-\.]/);
+            if (parts.length !== 3)
+                return undefined;
+            let day;
+            let month;
+            let year;
+            const formatLower = formatStr.toLowerCase();
+            const dayIndex = formatLower.indexOf('dd');
+            const monthIndex = formatLower.indexOf('mm');
+            const yearIndex = formatLower.indexOf('yyyy') !== -1
+                ? formatLower.indexOf('yyyy')
+                : formatLower.indexOf('yy');
+            const positions = [
+                { type: 'day', index: dayIndex },
+                { type: 'month', index: monthIndex },
+                { type: 'year', index: yearIndex }
+            ].sort((a, b) => a.index - b.index);
+            positions.forEach((pos, idx) => {
+                const value = parseInt(parts[idx], 10);
+                if (pos.type === 'day')
+                    day = value;
+                else if (pos.type === 'month')
+                    month = value - 1;
+                else if (pos.type === 'year')
+                    year = value;
+            });
+            if (day === undefined || month === undefined || year === undefined)
+                return undefined;
+            if (isNaN(day) || isNaN(month) || isNaN(year))
+                return undefined;
+            if (year < 100) {
+                year = year < 50 ? 2000 + year : 1900 + year;
+            }
+            const parsed = new Date(year, month, day);
+            if (parsed.getDate() === day &&
+                parsed.getMonth() === month &&
+                parsed.getFullYear() === year) {
+                return parsed;
+            }
+            return undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }, []);
+    const normalizeDateForComparison = React.useCallback((date) => {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }, []);
+    // Validate and set date - shared logic
+    const validateAndSetDate = React.useCallback((dateString) => {
+        const parsed = parseDate(dateString, displayFormat);
+        if (parsed && !isNaN(parsed.getTime())) {
+            const normalizedParsed = normalizeDateForComparison(parsed);
+            const normalizedMin = minDate ? normalizeDateForComparison(minDate) : undefined;
+            const normalizedMax = maxDate ? normalizeDateForComparison(maxDate) : undefined;
+            const isValid = (!normalizedMin || normalizedParsed >= normalizedMin) &&
+                (!normalizedMax || normalizedParsed <= normalizedMax);
+            if (isValid) {
+                onChange(parsed);
+                return true;
+            }
+        }
+        return false;
+    }, [parseDate, displayFormat, minDate, maxDate, onChange, normalizeDateForComparison]);
+    // Sync input value with prop value - only when changed externally
+    React.useEffect(() => {
+        const currentValue = value;
+        if (currentValue !== prevValueRef.current) {
+            prevValueRef.current = currentValue;
+            if (currentValue) {
+                setInputValue(dateFns.format(currentValue, displayFormat, { locale: locale.enGB }));
+            }
+            else {
+                setInputValue("");
+            }
+        }
+    }, [value, displayFormat]);
+    // Close calendar when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleDaySelect = React.useCallback((date) => {
+        onChange(date);
+        setIsOpen(false);
+        inputRef.current?.blur();
+    }, [onChange]);
+    const handleClear = React.useCallback((e) => {
+        e.stopPropagation();
+        onChange(undefined);
+        setInputValue("");
+    }, [onChange]);
+    const handleInputClick = React.useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    }, [disabled]);
+    const handleInputChange = React.useCallback((e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (newValue.length >= 10) {
+            validateAndSetDate(newValue);
+        }
+        else if (newValue === "") {
+            onChange(undefined);
+        }
+    }, [validateAndSetDate, onChange]);
+    const handleInputBlur = React.useCallback(() => {
+        if (inputValue && inputValue.trim() !== "") {
+            const parsed = parseDate(inputValue, displayFormat);
+            if (parsed && !isNaN(parsed.getTime())) {
+                const normalizedParsed = normalizeDateForComparison(parsed);
+                const normalizedMin = minDate ? normalizeDateForComparison(minDate) : undefined;
+                const normalizedMax = maxDate ? normalizeDateForComparison(maxDate) : undefined;
+                const isValid = (!normalizedMin || normalizedParsed >= normalizedMin) &&
+                    (!normalizedMax || normalizedParsed <= normalizedMax);
+                if (isValid) {
+                    onChange(parsed);
+                    setInputValue(dateFns.format(parsed, displayFormat, { locale: locale.enGB }));
+                    return;
+                }
+            }
+        }
+        if (!value) {
+            setInputValue("");
+        }
+        else {
+            setInputValue(dateFns.format(value, displayFormat, { locale: locale.enGB }));
+        }
+    }, [inputValue, parseDate, displayFormat, minDate, maxDate, onChange, value, normalizeDateForComparison]);
+    const handleInputKeyDown = React.useCallback((e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            inputRef.current?.blur();
+            setIsOpen(false);
+        }
+        else if (e.key === "Escape") {
+            setIsOpen(false);
+            inputRef.current?.blur();
+        }
+    }, []);
+    const handleTodayClick = React.useCallback(() => {
+        const today = new Date();
+        const isTodayValid = (!minDate || today >= minDate) &&
+            (!maxDate || today <= maxDate);
+        if (isTodayValid) {
+            onChange(today);
+            setIsOpen(false);
+        }
+    }, [minDate, maxDate, onChange]);
+    // Memoize formatters
+    const formatters = React.useMemo(() => ({
+        formatCaption: (date) => dateFns.format(date, "MMMM yyyy", { locale: locale.enGB }),
+        formatWeekdayName: (date) => dateFns.format(date, "EEEEEE", { locale: locale.enGB })
+    }), []);
+    // Memoize disabled days
+    const disabledDays = React.useMemo(() => [
+        ...(disabledDates || []),
+        ...(minDate ? [{ before: minDate }] : []),
+        ...(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", { 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" })) }), isOpen && (jsxRuntime.jsxs("div", { className: styles$4.pickerPopup, "data-position": popupPosition, children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "single", selected: value || undefined, defaultMonth: value || undefined, onSelect: handleDaySelect, disabled: disabledDays, locale: locale.enGB, numberOfMonths: numberOfMonths, formatters: formatters, components: {
+                                        Caption: (props) => (jsxRuntime.jsx(CustomCaption$2, { ...props })),
+                                    }, 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" }) }))] }))] })] }) }));
+}
+
+var rangeStyles = {"rangeWrapper":"cw-range-picker-module_rangeWrapper__1nIVs","rangePopup":"cw-range-picker-module_rangePopup__E5jd1","presetList":"cw-range-picker-module_presetList__INiLo"};
+
+const PRESET_LIBRARY = {
+    // === PAST DAYS ===
+    past7Days: {
+        key: 'past7Days',
+        label: 'Past 7 days',
+        getValue: () => {
+            const today = new Date();
+            const past = new Date(today);
+            past.setDate(today.getDate() - 7);
+            return { from: past, to: today };
+        }
+    },
+    past14Days: {
+        key: 'past14Days',
+        label: 'Past 14 days',
+        getValue: () => {
+            const today = new Date();
+            const past = new Date(today);
+            past.setDate(today.getDate() - 14);
+            return { from: past, to: today };
+        }
+    },
+    past30Days: {
+        key: 'past30Days',
+        label: 'Past 30 days',
+        getValue: () => {
+            const today = new Date();
+            const past = new Date(today);
+            past.setDate(today.getDate() - 30);
+            return { from: past, to: today };
+        }
+    },
+    past90Days: {
+        key: 'past90Days',
+        label: 'Past 90 days',
+        getValue: () => {
+            const today = new Date();
+            const past = new Date(today);
+            past.setDate(today.getDate() - 90);
+            return { from: past, to: today };
+        }
+    },
+    // === NEXT DAYS ===
+    next7Days: {
+        key: 'next7Days',
+        label: 'Next 7 days',
+        getValue: () => {
+            const today = new Date();
+            const next = new Date(today);
+            next.setDate(today.getDate() + 7);
+            return { from: today, to: next };
+        }
+    },
+    next14Days: {
+        key: 'next14Days',
+        label: 'Next 14 days',
+        getValue: () => {
+            const today = new Date();
+            const next = new Date(today);
+            next.setDate(today.getDate() + 14);
+            return { from: today, to: next };
+        }
+    },
+    next30Days: {
+        key: 'next30Days',
+        label: 'Next 30 days',
+        getValue: () => {
+            const today = new Date();
+            const next = new Date(today);
+            next.setDate(today.getDate() + 30);
+            return { from: today, to: next };
+        }
+    },
+    // === WEEKS ===
+    thisWeek: {
+        key: 'thisWeek',
+        label: 'This week',
+        getValue: () => {
+            const today = new Date();
+            const firstDay = new Date(today);
+            const lastDay = new Date(today);
+            const day = today.getDay();
+            const diff = day === 0 ? -6 : 1 - day; // Monday as first day
+            firstDay.setDate(today.getDate() + diff);
+            lastDay.setDate(firstDay.getDate() + 6); // Sunday
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    lastWeek: {
+        key: 'lastWeek',
+        label: 'Last week',
+        getValue: () => {
+            const today = new Date();
+            const lastWeekEnd = new Date(today);
+            const day = today.getDay();
+            const diff = day === 0 ? -6 : 1 - day;
+            lastWeekEnd.setDate(today.getDate() + diff - 1);
+            const lastWeekStart = new Date(lastWeekEnd);
+            lastWeekStart.setDate(lastWeekEnd.getDate() - 6);
+            return { from: lastWeekStart, to: lastWeekEnd };
+        }
+    },
+    nextWeek: {
+        key: 'nextWeek',
+        label: 'Next week',
+        getValue: () => {
+            const today = new Date();
+            const nextWeekStart = new Date(today);
+            const day = today.getDay();
+            const diff = day === 0 ? 1 : 8 - day;
+            nextWeekStart.setDate(today.getDate() + diff);
+            const nextWeekEnd = new Date(nextWeekStart);
+            nextWeekEnd.setDate(nextWeekStart.getDate() + 6);
+            return { from: nextWeekStart, to: nextWeekEnd };
+        }
+    },
+    // === MONTHS ===
+    thisMonth: {
+        key: 'thisMonth',
+        label: 'This month',
+        getValue: () => {
+            const today = new Date();
+            const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
+            const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    lastMonth: {
+        key: 'lastMonth',
+        label: 'Last month',
+        getValue: () => {
+            const today = new Date();
+            const firstDay = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+            const lastDay = new Date(today.getFullYear(), today.getMonth(), 0);
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    nextMonth: {
+        key: 'nextMonth',
+        label: 'Next month',
+        getValue: () => {
+            const today = new Date();
+            const firstDay = new Date(today.getFullYear(), today.getMonth() + 1, 1);
+            const lastDay = new Date(today.getFullYear(), today.getMonth() + 2, 0);
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    // === QUARTERS ===
+    thisQuarter: {
+        key: 'thisQuarter',
+        label: 'This quarter',
+        getValue: () => {
+            const today = new Date();
+            const quarter = Math.floor(today.getMonth() / 3);
+            const firstDay = new Date(today.getFullYear(), quarter * 3, 1);
+            const lastDay = new Date(today.getFullYear(), quarter * 3 + 3, 0);
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    lastQuarter: {
+        key: 'lastQuarter',
+        label: 'Last quarter',
+        getValue: () => {
+            const today = new Date();
+            const currentQuarter = Math.floor(today.getMonth() / 3);
+            const lastQuarter = currentQuarter === 0 ? 3 : currentQuarter - 1;
+            const year = currentQuarter === 0 ? today.getFullYear() - 1 : today.getFullYear();
+            const firstDay = new Date(year, lastQuarter * 3, 1);
+            const lastDay = new Date(year, lastQuarter * 3 + 3, 0);
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    nextQuarter: {
+        key: 'nextQuarter',
+        label: 'Next quarter',
+        getValue: () => {
+            const today = new Date();
+            const currentQuarter = Math.floor(today.getMonth() / 3);
+            const nextQuarter = (currentQuarter + 1) % 4;
+            const year = nextQuarter === 0 ? today.getFullYear() + 1 : today.getFullYear();
+            const firstDay = new Date(year, nextQuarter * 3, 1);
+            const lastDay = new Date(year, nextQuarter * 3 + 3, 0);
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    // === YEAR ===
+    thisYear: {
+        key: 'thisYear',
+        label: 'This year',
+        getValue: () => {
+            const today = new Date();
+            const firstDay = new Date(today.getFullYear(), 0, 1);
+            const lastDay = new Date(today.getFullYear(), 11, 31);
+            return { from: firstDay, to: lastDay };
+        }
+    },
+    lastYear: {
+        key: 'lastYear',
+        label: 'Last year',
+        getValue: () => {
+            const today = new Date();
+            const firstDay = new Date(today.getFullYear() - 1, 0, 1);
+            const lastDay = new Date(today.getFullYear() - 1, 11, 31);
+            return { from: firstDay, to: lastDay };
+        }
+    }
+};
+/**
+ * Helper function to get presets by their keys
+ * @param keys - Array of preset keys from PRESET_LIBRARY
+ * @returns Array of DateRangePreset objects
+ *
+ * @example
+ * const presets = getPresetsByKeys(['thisWeek', 'past7Days', 'past30Days']);
+ */
+const getPresetsByKeys = (keys) => {
+    return keys
+        .map(key => PRESET_LIBRARY[key])
+        .filter(preset => preset !== undefined);
+};
+
+function CustomCaption$1({ displayMonth }) {
+    const { goToMonth, nextMonth, previousMonth } = reactDayPicker.useNavigation();
+    return (jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", icon: "chevron-left", onClick: () => previousMonth && goToMonth(previousMonth), disabled: !previousMonth, "aria-label": "Previous month" }), jsxRuntime.jsx("div", { className: styles$4.title, children: dateFns.format(displayMonth, "MMMM yyyy", { locale: locale.enGB }) }), jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", icon: "chevron-right", onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, "aria-label": "Next month" })] }));
+}
+function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, disabledMatcher, maxRangeDays, labelProps, alignProps, placeholderFrom = "From date", placeholderTo = "To date", displayFormat = "dd.MM.yyyy", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 2, showPresets = false, presetKeys, customPresets, }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [inputFromValue, setInputFromValue] = React.useState("");
+    const [inputToValue, setInputToValue] = React.useState("");
+    const [focusedInput, setFocusedInput] = React.useState();
+    const containerRef = React.useRef(null);
+    const inputFromRef = React.useRef(null);
+    const inputToRef = React.useRef(null);
+    const prevValueRef = React.useRef(value ?? null);
+    // Calculate presets to render
+    const presetsToRender = React.useMemo(() => {
+        let presets = [];
+        // If presetKeys provided, use those from library
+        if (presetKeys && presetKeys.length > 0) {
+            presets = getPresetsByKeys(presetKeys);
+        }
+        // Add custom presets if provided
+        if (customPresets && customPresets.length > 0) {
+            presets = [...presets, ...customPresets];
+        }
+        return presets;
+    }, [presetKeys, customPresets]);
+    // Parse date from string based on format
+    const parseDate = React.useCallback((dateString, formatStr) => {
+        try {
+            const cleanString = dateString.trim();
+            const parts = cleanString.split(/[\/\-\.]/);
+            if (parts.length !== 3)
+                return undefined;
+            let day;
+            let month;
+            let year;
+            const formatLower = formatStr.toLowerCase();
+            const dayIndex = formatLower.indexOf('dd');
+            const monthIndex = formatLower.indexOf('mm');
+            const yearIndex = formatLower.indexOf('yyyy') !== -1
+                ? formatLower.indexOf('yyyy')
+                : formatLower.indexOf('yy');
+            const positions = [
+                { type: 'day', index: dayIndex },
+                { type: 'month', index: monthIndex },
+                { type: 'year', index: yearIndex }
+            ].sort((a, b) => a.index - b.index);
+            positions.forEach((pos, idx) => {
+                const value = parseInt(parts[idx], 10);
+                if (pos.type === 'day')
+                    day = value;
+                else if (pos.type === 'month')
+                    month = value - 1;
+                else if (pos.type === 'year')
+                    year = value;
+            });
+            if (day === undefined || month === undefined || year === undefined)
+                return undefined;
+            if (isNaN(day) || isNaN(month) || isNaN(year))
+                return undefined;
+            if (year < 100) {
+                year = year < 50 ? 2000 + year : 1900 + year;
+            }
+            const parsed = new Date(year, month, day);
+            if (parsed.getDate() === day &&
+                parsed.getMonth() === month &&
+                parsed.getFullYear() === year) {
+                return parsed;
+            }
+            return undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }, []);
+    const normalizeDateForComparison = React.useCallback((date) => {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }, []);
+    // Validate date range
+    const validateRange = React.useCallback((from, to) => {
+        if (!from || !to)
+            return true; // Partial ranges are OK during selection
+        // Check if "from" is before "to"
+        if (from > to)
+            return false;
+        // Check max range days
+        if (maxRangeDays) {
+            const daysDiff = Math.floor((to.getTime() - from.getTime()) / (1000 * 60 * 60 * 24));
+            if (daysDiff > maxRangeDays)
+                return false;
+        }
+        return true;
+    }, [maxRangeDays]);
+    // Sync input values with prop value
+    React.useEffect(() => {
+        const currentValue = value ?? undefined;
+        if (currentValue !== prevValueRef.current) {
+            prevValueRef.current = currentValue ?? null;
+            if (currentValue?.from) {
+                setInputFromValue(dateFns.format(currentValue.from, displayFormat, { locale: locale.enGB }));
+            }
+            else {
+                setInputFromValue("");
+            }
+            if (currentValue?.to) {
+                setInputToValue(dateFns.format(currentValue.to, displayFormat, { locale: locale.enGB }));
+            }
+            else {
+                setInputToValue("");
+            }
+        }
+    }, [value, displayFormat]);
+    // Close calendar when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setFocusedInput(undefined);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleRangeSelect = React.useCallback((range) => {
+        if (!range) {
+            onChange(undefined);
+            return;
+        }
+        const newRange = {
+            from: range.from,
+            to: range.to
+        };
+        // Validate range
+        if (newRange.from && newRange.to && !validateRange(newRange.from, newRange.to)) {
+            return; // Don't update if invalid
+        }
+        onChange(newRange);
+        // Close if both dates are selected
+        if (range.from && range.to) {
+            setIsOpen(false);
+            setFocusedInput(undefined);
+        }
+    }, [onChange, validateRange]);
+    const handleClearFrom = React.useCallback((e) => {
+        e.stopPropagation();
+        onChange({ from: undefined, to: value?.to });
+        setInputFromValue("");
+    }, [onChange, value]);
+    const handleClearTo = React.useCallback((e) => {
+        e.stopPropagation();
+        onChange({ from: value?.from, to: undefined });
+        setInputToValue("");
+    }, [onChange, value]);
+    const handleInputFromClick = React.useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+            setFocusedInput('from');
+        }
+    }, [disabled]);
+    const handleInputToClick = React.useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+            setFocusedInput('to');
+        }
+    }, [disabled]);
+    const handleInputFromChange = React.useCallback((e) => {
+        const newValue = e.target.value;
+        setInputFromValue(newValue);
+        if (newValue.length >= 10) {
+            const parsed = parseDate(newValue, displayFormat);
+            if (parsed && !isNaN(parsed.getTime())) {
+                const normalizedParsed = normalizeDateForComparison(parsed);
+                const normalizedMin = minDate ? normalizeDateForComparison(minDate) : undefined;
+                const normalizedMax = maxDate ? normalizeDateForComparison(maxDate) : undefined;
+                const isValid = (!normalizedMin || normalizedParsed >= normalizedMin) &&
+                    (!normalizedMax || normalizedParsed <= normalizedMax);
+                if (isValid) {
+                    onChange({ from: parsed, to: value?.to });
+                }
+            }
+        }
+        else if (newValue === "") {
+            onChange({ from: undefined, to: value?.to });
+        }
+    }, [parseDate, displayFormat, minDate, maxDate, normalizeDateForComparison, onChange, value]);
+    const handleInputToChange = React.useCallback((e) => {
+        const newValue = e.target.value;
+        setInputToValue(newValue);
+        if (newValue.length >= 10) {
+            const parsed = parseDate(newValue, displayFormat);
+            if (parsed && !isNaN(parsed.getTime())) {
+                const normalizedParsed = normalizeDateForComparison(parsed);
+                const normalizedMin = minDate ? normalizeDateForComparison(minDate) : undefined;
+                const normalizedMax = maxDate ? normalizeDateForComparison(maxDate) : undefined;
+                const isValid = (!normalizedMin || normalizedParsed >= normalizedMin) &&
+                    (!normalizedMax || normalizedParsed <= normalizedMax);
+                if (isValid && validateRange(value?.from, parsed)) {
+                    onChange({ from: value?.from, to: parsed });
+                }
+            }
+        }
+        else if (newValue === "") {
+            onChange({ from: value?.from, to: undefined });
+        }
+    }, [parseDate, displayFormat, minDate, maxDate, normalizeDateForComparison, validateRange, onChange, value]);
+    const handleInputBlur = React.useCallback((type) => {
+        const inputValue = type === 'from' ? inputFromValue : inputToValue;
+        const currentValue = type === 'from' ? value?.from : value?.to;
+        if (inputValue && inputValue.trim() !== "") {
+            const parsed = parseDate(inputValue, displayFormat);
+            if (parsed && !isNaN(parsed.getTime())) {
+                const normalizedParsed = normalizeDateForComparison(parsed);
+                const normalizedMin = minDate ? normalizeDateForComparison(minDate) : undefined;
+                const normalizedMax = maxDate ? normalizeDateForComparison(maxDate) : undefined;
+                const isValid = (!normalizedMin || normalizedParsed >= normalizedMin) &&
+                    (!normalizedMax || normalizedParsed <= normalizedMax);
+                if (isValid) {
+                    const newRange = type === 'from'
+                        ? { from: parsed, to: value?.to }
+                        : { from: value?.from, to: parsed };
+                    if (validateRange(newRange.from, newRange.to)) {
+                        onChange(newRange);
+                        if (type === 'from') {
+                            setInputFromValue(dateFns.format(parsed, displayFormat, { locale: locale.enGB }));
+                        }
+                        else {
+                            setInputToValue(dateFns.format(parsed, displayFormat, { locale: locale.enGB }));
+                        }
+                        return;
+                    }
+                }
+            }
+        }
+        // Reset to current value if invalid
+        if (type === 'from') {
+            setInputFromValue(currentValue ? dateFns.format(currentValue, displayFormat, { locale: locale.enGB }) : "");
+        }
+        else {
+            setInputToValue(currentValue ? dateFns.format(currentValue, displayFormat, { locale: locale.enGB }) : "");
+        }
+    }, [inputFromValue, inputToValue, value, parseDate, displayFormat, minDate, maxDate, normalizeDateForComparison, validateRange, onChange]);
+    const handleInputKeyDown = React.useCallback((e, type) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            if (type === 'from') {
+                inputFromRef.current?.blur();
+                inputToRef.current?.focus();
+            }
+            else {
+                inputToRef.current?.blur();
+                setIsOpen(false);
+            }
+        }
+        else if (e.key === "Escape") {
+            setIsOpen(false);
+            if (type === 'from') {
+                inputFromRef.current?.blur();
+            }
+            else {
+                inputToRef.current?.blur();
+            }
+        }
+    }, []);
+    // Handle preset click
+    const handlePresetClick = React.useCallback((preset) => {
+        onChange(preset.getValue());
+        setIsOpen(false);
+    }, [onChange]);
+    // Memoize formatters
+    const formatters = React.useMemo(() => ({
+        formatCaption: (date) => dateFns.format(date, "MMMM yyyy", { locale: locale.enGB }),
+        formatWeekdayName: (date) => dateFns.format(date, "EEEEEE", { locale: locale.enGB })
+    }), []);
+    // Memoize disabled days
+    const disabledDays = React.useMemo(() => {
+        const baseDisabled = [
+            ...(disabledDates || []),
+            ...(minDate ? [{ before: minDate }] : []),
+            ...(maxDate ? [{ after: maxDate }] : []),
+            ...(disabledMatcher ? [disabledMatcher] : []),
+        ];
+        // If maxRangeDays is set and we have a "from" date, disable dates beyond the range
+        if (maxRangeDays && value?.from && !value?.to) {
+            const maxDate = new Date(value.from);
+            maxDate.setDate(maxDate.getDate() + maxRangeDays);
+            baseDisabled.push({ after: maxDate });
+        }
+        return baseDisabled;
+    }, [disabledDates, minDate, maxDate, disabledMatcher, maxRangeDays, value]);
+    const selectedRange = React.useMemo(() => {
+        if (value?.from || value?.to) {
+            return {
+                from: value?.from || undefined,
+                to: value?.to || undefined
+            };
+        }
+        return undefined;
+    }, [value]);
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: rangeStyles.rangeWrapper, children: [jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputFromRef, type: "text", value: inputFromValue, placeholder: placeholderFrom, onChange: handleInputFromChange, onBlur: () => handleInputBlur('from'), onClick: handleInputFromClick, onKeyDown: (e) => handleInputKeyDown(e, 'from'), disabled: disabled, required: required, "data-focused": focusedInput === 'from' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), jsxRuntime.jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxRuntime.jsxs("div", { className: styles$4.pickerWrapper, children: [jsxRuntime.jsx("input", { ref: inputToRef, type: "text", value: inputToValue, placeholder: placeholderTo, onChange: handleInputToChange, onBlur: () => handleInputBlur('to'), onClick: handleInputToClick, onKeyDown: (e) => handleInputKeyDown(e, 'to'), disabled: disabled, required: required, "data-focused": focusedInput === 'to' }), jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsxRuntime.jsx(CwIcon, { iconId: "calendar" })) })] }), isOpen && (jsxRuntime.jsxs("div", { className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, "data-position": popupPosition, children: [showPresets && presetsToRender.length > 0 && (jsxRuntime.jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsxRuntime.jsx("button", { type: "button", onClick: () => handlePresetClick(preset), children: preset.label }, preset.key))) })), jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, locale: locale.enGB, numberOfMonths: numberOfMonths, formatters: formatters, components: {
+                                        Caption: (props) => jsxRuntime.jsx(CustomCaption$1, { ...props }),
+                                    }, modifiers: {
+                                        today: new Date(),
+                                    }, modifiersClassNames: {
+                                        today: "rdp-day_today",
+                                    } })] }))] })] }) }));
+}
+
+var timeStyles = {"timePickerPopup":"cw-time-picker-module_timePickerPopup__BN63t","timePickerList":"cw-time-picker-module_timePickerList__E88pr","selected":"cw-time-picker-module_selected__qVnfL","hasIcons":"cw-time-picker-module_hasIcons__ZiGUf","notIcons":"cw-time-picker-module_notIcons__3icu1"};
+
+const isMobileDevice = () => {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+};
+function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelProps, alignProps, placeholder = "HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", useNative = isMobileDevice(), }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState("");
+    const containerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const selectedItemRef = React.useRef(null);
+    // Sync input value with prop value
+    React.useEffect(() => {
+        if (value) {
+            setInputValue(value);
+        }
+        else {
+            setInputValue("");
+        }
+    }, [value]);
+    // Generate time options based on interval
+    const generateTimeOptions = () => {
+        const options = [];
+        const totalMinutes = 24 * 60; // Total minutes in a day
+        for (let minutes = 0; minutes < totalMinutes; minutes += interval) {
+            const hours = Math.floor(minutes / 60);
+            const mins = minutes % 60;
+            const timeString = `${hours.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}`;
+            // Filter by min/max time if provided
+            if (minTime && timeString < minTime)
+                continue;
+            if (maxTime && timeString > maxTime)
+                continue;
+            options.push(timeString);
+        }
+        return options;
+    };
+    const timeOptions = generateTimeOptions();
+    // Close dropdown when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    // Scroll to selected time when opening dropdown
+    React.useEffect(() => {
+        if (isOpen && selectedItemRef.current) {
+            selectedItemRef.current.scrollIntoView({
+                block: "center",
+                behavior: "smooth",
+            });
+        }
+    }, [isOpen]);
+    const handleTimeSelect = (time) => {
+        onChange(time);
+        setInputValue(time);
+        setIsOpen(false);
+        inputRef.current?.blur();
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        onChange(undefined);
+        setInputValue("");
+    };
+    const handleInputClick = () => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    };
+    const handleInputChange = (e) => {
+        let newValue = e.target.value;
+        setInputValue(newValue);
+        // Auto-format as user types
+        // Remove non-numeric characters except colon
+        newValue = newValue.replace(/[^\d:]/g, "");
+        // Auto-add colon after 2 digits
+        if (newValue.length === 2 && !newValue.includes(":")) {
+            newValue = newValue + ":";
+            setInputValue(newValue);
+        }
+        // Limit to HH:mm format
+        if (newValue.length > 5) {
+            newValue = newValue.slice(0, 5);
+            setInputValue(newValue);
+        }
+        // Validate and set time when complete
+        if (newValue.length === 5 && newValue.includes(":")) {
+            const [hours, minutes] = newValue.split(":");
+            const h = parseInt(hours, 10);
+            const m = parseInt(minutes, 10);
+            if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
+                const formattedTime = `${hours.padStart(2, "0")}:${minutes.padStart(2, "0")}`;
+                // Check min/max time restrictions
+                const isValid = (!minTime || formattedTime >= minTime) &&
+                    (!maxTime || formattedTime <= maxTime);
+                if (isValid) {
+                    onChange(formattedTime);
+                    setInputValue(formattedTime);
+                }
+            }
+        }
+        else if (newValue === "") {
+            onChange(undefined);
+        }
+    };
+    const handleInputBlur = () => {
+        // On blur, sync input with actual value or clear if invalid
+        if (value) {
+            setInputValue(value);
+        }
+        else if (inputValue && inputValue.length === 5) {
+            // Try to validate one more time
+            const [hours, minutes] = inputValue.split(":");
+            const h = parseInt(hours, 10);
+            const m = parseInt(minutes, 10);
+            if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
+                const formattedTime = `${hours.padStart(2, "0")}:${minutes.padStart(2, "0")}`;
+                onChange(formattedTime);
+                setInputValue(formattedTime);
+            }
+            else {
+                setInputValue("");
+            }
+        }
+        else {
+            setInputValue("");
+        }
+    };
+    const handleInputKeyDown = (e) => {
+        if (e.key === "Enter") {
+            setIsOpen(!isOpen);
+        }
+        else if (e.key === "Escape") {
+            setIsOpen(false);
+        }
+        else if (e.key === "ArrowDown" && isOpen && timeOptions.length > 0) {
+            e.preventDefault();
+            // Focus first option in dropdown
+            const firstOption = document.querySelector(".cw-timepicker-option");
+            firstOption?.focus();
+        }
+    };
+    const handleNativeChange = (e) => {
+        const newValue = e.target.value;
+        onChange(newValue);
+        setInputValue(newValue);
+    };
+    // Format time for display (optional: could add 12h format here)
+    const displayValue = inputValue;
+    // If using native time input
+    if (useNative) {
+        return (jsxRuntime.jsx("div", { className: `cw-timepicker cw-timepicker-native ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsx("div", { className: styles$4.pickerWrapper, children: jsxRuntime.jsx("input", { type: "time", value: displayValue, onChange: handleNativeChange, min: minTime, max: maxTime, step: interval * 60, disabled: disabled, required: required, placeholder: placeholder, className: "cw-timepicker-native" }) })] }) }));
+    }
+    // Custom time picker
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: `cw-timepicker ${className || ""}`, children: jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { 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: 5, className: showClear ? timeStyles.hasIcons : timeStyles.notIcons }), showClear && (jsxRuntime.jsx("div", { className: styles$4.pickerIcons, children: value && !disabled ? (jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", icon: "close", color: "neutral", onClick: handleClear, tabIndex: -1, "aria-label": "Clear time" })) : (jsxRuntime.jsx(CwIcon, { iconId: "clock" })) })), isOpen && (jsxRuntime.jsx("div", { className: `${styles$4.pickerPopup} ${timeStyles.timePickerPopup}`, "data-position": popupPosition, children: jsxRuntime.jsx("div", { className: timeStyles.timePickerList, children: timeOptions.map((time) => {
+                                    const isSelected = time === value;
+                                    return (jsxRuntime.jsx("button", { ref: isSelected ? selectedItemRef : null, type: "button", className: isSelected ? timeStyles.selected : "", onClick: () => handleTimeSelect(time), children: time }, time));
+                                }) }) }))] })] }) }));
+}
+
+function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval = 15, minTime, maxTime, labelProps, alignProps, datePlaceholder = "dd.MM.yyyy", timePlaceholder = "HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showNowButton = false, }) {
+    const [selectedDate, setSelectedDate] = React.useState(value);
+    const [selectedTime, setSelectedTime] = React.useState(value ? `${value.getHours().toString().padStart(2, "0")}:${value.getMinutes().toString().padStart(2, "0")}` : undefined);
+    const prevValueRef = React.useRef(value);
+    // Combine date and time into a single Date object
+    const combineDateTime = React.useCallback((date, time) => {
+        if (!date)
+            return undefined;
+        // If no time is selected, use 00:00
+        if (!time) {
+            const combined = new Date(date);
+            combined.setHours(0, 0, 0, 0);
+            return combined;
+        }
+        const [hours, minutes] = time.split(':').map(Number);
+        const combined = new Date(date);
+        combined.setHours(hours, minutes, 0, 0);
+        return combined;
+    }, []);
+    // Sync internal state with prop value - only when changed externally
+    React.useEffect(() => {
+        const currentValue = value ?? undefined;
+        if (currentValue !== prevValueRef.current) {
+            prevValueRef.current = currentValue;
+            if (currentValue) {
+                setSelectedDate(currentValue);
+                setSelectedTime(`${currentValue.getHours().toString().padStart(2, "0")}:${currentValue.getMinutes().toString().padStart(2, "0")}`);
+            }
+            else {
+                setSelectedDate(undefined);
+                setSelectedTime(undefined);
+            }
+        }
+    }, [value]);
+    const handleDateChange = React.useCallback((date) => {
+        setSelectedDate(date);
+        const combined = combineDateTime(date, selectedTime);
+        onChange(combined);
+    }, [selectedTime, combineDateTime, onChange]);
+    const handleTimeChange = React.useCallback((time) => {
+        setSelectedTime(time);
+        const combined = combineDateTime(selectedDate, time);
+        onChange(combined);
+    }, [selectedDate, combineDateTime, onChange]);
+    const handleNowClick = React.useCallback(() => {
+        const now = new Date();
+        // Check if now is within allowed range
+        const isNowValid = (!minDateTime || now >= minDateTime) &&
+            (!maxDateTime || now <= maxDateTime);
+        if (isNowValid) {
+            onChange(now);
+        }
+    }, [minDateTime, maxDateTime, onChange]);
+    // Extract min/max date from minDateTime/maxDateTime
+    const minDate = minDateTime;
+    const maxDate = maxDateTime;
+    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: minDate, maxDate: maxDate, 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: minTime, maxTime: 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" }))] })] }) }));
+}
+
+var compactStyles = {"compactPopup":"cw-datetime-compact-module_compactPopup__GiuNY","calendarWrapper":"cw-datetime-compact-module_calendarWrapper__P4Nlq","timeWrapper":"cw-datetime-compact-module_timeWrapper__uMe-A","compactTimeList":"cw-datetime-compact-module_compactTimeList__MzSQT"};
+
+function CustomCaption({ displayMonth }) {
+    const { goToMonth, nextMonth, previousMonth } = reactDayPicker.useNavigation();
+    return (jsxRuntime.jsxs("header", { children: [jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", icon: "chevron-left", onClick: () => previousMonth && goToMonth(previousMonth), disabled: !previousMonth, "aria-label": "Previous month" }), jsxRuntime.jsx("div", { className: styles$4.title, children: dateFns.format(displayMonth, "MMMM yyyy", { locale: locale.enGB }) }), jsxRuntime.jsx(CwButton, { type: "button", variant: "icon", icon: "chevron-right", onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, "aria-label": "Next month" })] }));
+}
+function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, disabledDates, disabledMatcher, timeInterval = 15, minTime, maxTime, labelProps, alignProps, placeholder = "dd.mm.yyyy HH:mm", disabled, required, className, showClear = true, popupPosition = "left-bottom", numberOfMonths = 1, showTodayButton = false, }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState("");
+    const [selectedDate, setSelectedDate] = React.useState(value);
+    const [selectedTime, setSelectedTime] = React.useState("");
+    const containerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const timeListRef = React.useRef(null);
+    const prevValueRef = React.useRef(value);
+    // Generate time options based on interval - memoized
+    const timeOptions = React.useMemo(() => {
+        const options = [];
+        const totalMinutes = 24 * 60;
+        for (let minutes = 0; minutes < totalMinutes; minutes += timeInterval) {
+            const hours = Math.floor(minutes / 60);
+            const mins = minutes % 60;
+            const timeString = `${hours.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}`;
+            if (minTime && timeString < minTime)
+                continue;
+            if (maxTime && timeString > maxTime)
+                continue;
+            options.push(timeString);
+        }
+        return options;
+    }, [timeInterval, minTime, maxTime]);
+    // Parse datetime from string: dd.MM.yyyy HH:mm
+    const parseDateTime = React.useCallback((dateTimeString) => {
+        try {
+            const parts = dateTimeString.trim().split(' ');
+            if (parts.length !== 2)
+                return undefined;
+            const [dateStr, timeStr] = parts;
+            // Parse date part
+            const dateParts = dateStr.split(/[\/\-\.]/);
+            if (dateParts.length !== 3)
+                return undefined;
+            const day = parseInt(dateParts[0], 10);
+            const month = parseInt(dateParts[1], 10) - 1;
+            const year = parseInt(dateParts[2], 10);
+            // Parse time part
+            const timeParts = timeStr.split(':');
+            if (timeParts.length !== 2)
+                return undefined;
+            const hours = parseInt(timeParts[0], 10);
+            const minutes = parseInt(timeParts[1], 10);
+            // Validate ranges
+            if (isNaN(day) || isNaN(month) || isNaN(year) ||
+                isNaN(hours) || isNaN(minutes) ||
+                hours < 0 || hours > 23 ||
+                minutes < 0 || minutes > 59) {
+                return undefined;
+            }
+            const parsed = new Date(year, month, day, hours, minutes, 0, 0);
+            // Validate the date is real
+            if (parsed.getDate() === day &&
+                parsed.getMonth() === month &&
+                parsed.getFullYear() === year &&
+                parsed.getHours() === hours &&
+                parsed.getMinutes() === minutes) {
+                return parsed;
+            }
+            return undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }, []);
+    // Validate and set datetime - with proper datetime comparison
+    const validateAndSetDateTime = React.useCallback((dateTimeString) => {
+        const parsed = parseDateTime(dateTimeString);
+        if (parsed && !isNaN(parsed.getTime())) {
+            const isValid = (!minDateTime || parsed >= minDateTime) &&
+                (!maxDateTime || parsed <= maxDateTime);
+            if (isValid) {
+                onChange(parsed);
+                setSelectedDate(parsed);
+                setSelectedTime(dateFns.format(parsed, "HH:mm"));
+                return true;
+            }
+        }
+        return false;
+    }, [parseDateTime, minDateTime, maxDateTime, onChange]);
+    // Sync input value with prop value - only when changed externally
+    React.useEffect(() => {
+        const currentValue = value;
+        if (currentValue !== prevValueRef.current) {
+            prevValueRef.current = currentValue;
+            if (currentValue) {
+                const dateStr = dateFns.format(currentValue, "dd.MM.yyyy", { locale: locale.enGB });
+                const timeStr = dateFns.format(currentValue, "HH:mm", { locale: locale.enGB });
+                setInputValue(`${dateStr} ${timeStr}`);
+                setSelectedDate(currentValue);
+                setSelectedTime(timeStr);
+            }
+            else {
+                setInputValue("");
+                setSelectedDate(undefined);
+                setSelectedTime("");
+            }
+        }
+    }, [value]);
+    // Close popup when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    // Scroll to selected time when opening
+    React.useEffect(() => {
+        if (isOpen && selectedTime && timeListRef.current) {
+            const selectedElement = timeListRef.current.querySelector('.selected');
+            if (selectedElement) {
+                selectedElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
+            }
+        }
+    }, [isOpen, selectedTime]);
+    const combineDateTime = React.useCallback((date, time) => {
+        if (!date || !time)
+            return undefined;
+        const [hours, minutes] = time.split(':').map(Number);
+        const combined = new Date(date);
+        combined.setHours(hours, minutes, 0, 0);
+        return combined;
+    }, []);
+    const handleDaySelect = React.useCallback((date) => {
+        if (!date)
+            return;
+        setSelectedDate(date);
+        // If time is already selected, combine and update
+        if (selectedTime) {
+            const combined = combineDateTime(date, selectedTime);
+            if (combined) {
+                onChange(combined);
+            }
+        }
+    }, [selectedTime, combineDateTime, onChange]);
+    const handleTimeSelect = React.useCallback((time) => {
+        setSelectedTime(time);
+        // If date is already selected, combine and update
+        if (selectedDate) {
+            const combined = combineDateTime(selectedDate, time);
+            if (combined) {
+                onChange(combined);
+                setIsOpen(false);
+                inputRef.current?.blur();
+            }
+        }
+    }, [selectedDate, combineDateTime, onChange]);
+    const handleClear = React.useCallback((e) => {
+        e.stopPropagation();
+        onChange(undefined);
+        setInputValue("");
+        setSelectedDate(undefined);
+        setSelectedTime("");
+    }, [onChange]);
+    const handleInputClick = React.useCallback(() => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    }, [disabled]);
+    const handleInputChange = React.useCallback((e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        // Try to parse the full datetime string: dd.MM.yyyy HH:mm
+        if (newValue.length >= 16) {
+            validateAndSetDateTime(newValue);
+        }
+        else if (newValue === "") {
+            onChange(undefined);
+            setSelectedDate(undefined);
+            setSelectedTime("");
+        }
+    }, [validateAndSetDateTime, onChange]);
+    const handleInputBlur = React.useCallback(() => {
+        // Try to parse if there's text
+        if (inputValue && inputValue.trim() !== "") {
+            const parsed = parseDateTime(inputValue);
+            if (parsed && !isNaN(parsed.getTime())) {
+                const isValid = (!minDateTime || parsed >= minDateTime) &&
+                    (!maxDateTime || parsed <= maxDateTime);
+                if (isValid) {
+                    onChange(parsed);
+                    const dateStr = dateFns.format(parsed, "dd.MM.yyyy", { locale: locale.enGB });
+                    const timeStr = dateFns.format(parsed, "HH:mm", { locale: locale.enGB });
+                    setInputValue(`${dateStr} ${timeStr}`);
+                    setSelectedDate(parsed);
+                    setSelectedTime(timeStr);
+                    return;
+                }
+            }
+        }
+        // Sync with current value
+        if (value) {
+            const dateStr = dateFns.format(value, "dd.MM.yyyy", { locale: locale.enGB });
+            const timeStr = dateFns.format(value, "HH:mm", { locale: locale.enGB });
+            setInputValue(`${dateStr} ${timeStr}`);
+        }
+        else {
+            setInputValue("");
+        }
+    }, [inputValue, parseDateTime, minDateTime, maxDateTime, onChange, value]);
+    const handleInputKeyDown = React.useCallback((e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            inputRef.current?.blur();
+            setIsOpen(false);
+        }
+        else if (e.key === "Escape") {
+            setIsOpen(false);
+            inputRef.current?.blur();
+        }
+    }, []);
+    const handleNowClick = React.useCallback(() => {
+        const now = new Date();
+        // Check if now is within allowed range
+        const isNowValid = (!minDateTime || now >= minDateTime) &&
+            (!maxDateTime || now <= maxDateTime);
+        if (isNowValid) {
+            onChange(now);
+            setIsOpen(false);
+        }
+    }, [minDateTime, maxDateTime, onChange]);
+    // Memoize formatters
+    const formatters = React.useMemo(() => ({
+        formatCaption: (date) => dateFns.format(date, "MMMM yyyy", { locale: locale.enGB }),
+        formatWeekdayName: (date) => dateFns.format(date, "EEEEEE", { locale: locale.enGB })
+    }), []);
+    // Memoize disabled days
+    const disabledDays = React.useMemo(() => [
+        ...(disabledDates || []),
+        ...(minDateTime ? [{ before: minDateTime }] : []),
+        ...(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", { 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" })) }), isOpen && (jsxRuntime.jsxs("div", { className: `${styles$4.pickerPopup} ${compactStyles.compactPopup}`, "data-position": popupPosition, children: [jsxRuntime.jsxs("div", { className: compactStyles.calendarWrapper, children: [jsxRuntime.jsx(reactDayPicker.DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, defaultMonth: selectedDate, disabled: disabledDays, locale: locale.enGB, numberOfMonths: numberOfMonths, formatters: formatters, components: {
+                                                Caption: (props) => jsxRuntime.jsx(CustomCaption, { ...props }),
+                                            }, 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) => {
+                                                const isSelected = time === selectedTime;
+                                                return (jsxRuntime.jsx("button", { type: "button", className: isSelected ? timeStyles.selected : "", onClick: () => handleTimeSelect(time), children: time }, time));
+                                            }) })] })] }))] })] }) }));
+}
+
 const ResourcesTitleList$1 = ({ resources, canBePinned, includesPinned, onCrewPinning, onClickResourceContextMenu, ResourceTitleComponent }) => {
     return (jsxRuntime.jsx("td", { className: "resourceArea", style: { width: "100px" }, children: resources.map((r, _i) => (jsxRuntime.jsxs("div", { className: "resource CwelltFunctionDescription", style: { height: r.maxTop }, children: [(canBePinned || includesPinned) && (jsxRuntime.jsx(PinButton$1, { canBePinned: canBePinned, resource: r, onCrewPinning: onCrewPinning })), jsxRuntime.jsx(ResourceTitleComponent, { resource: r, handleOnClickResourceContextMenu: (e) => {
                         if (onClickResourceContextMenu) {
@@ -7011,8 +8248,10 @@ class OnDoubleClickEvent {
 }
 class OnDragEvent {
     id;
-    constructor(id) {
+    crewId;
+    constructor(id, crewId) {
         this.id = id;
+        this.crewId = crewId;
     }
 }
 class OnDropEvent {
@@ -7326,7 +8565,7 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
                     setIsOnDrag(false);
             }, onDragStart: (_) => {
                 if (value.isDraggable)
-                    onEvent(new OnDragEvent(value.id));
+                    onEvent(new OnDragEvent(value.id, value.rowId));
             }, onDragEnd: (_) => {
                 if (value.isDraggable)
                     setIsOnDrag(false);
@@ -8198,18 +9437,18 @@ const PinRowHeader = ({ value, width, onEvent }) => {
                 });
             },
             onMouseLeave: () => setIsContextMenuOpen(false),
-        }, trigger: ["contextMenu"], overlayStyle: { animationDuration: "0" }, arrow: (value.contextMenuItems?.length ?? 0) > 0, children: jsxRuntime.jsx(CwGenericTooltip, { content: value.tooltip, position: "right", dissapearsWhenHover: true, overlayStyle: value.overlayTooltipStyle, children: jsxRuntime.jsxs("div", { style: {
-                    width: width,
-                    background: highlightColor,
-                }, className: styles["super-scheduler-row-header"], children: [jsxRuntime.jsx("button", { className: "cw-button-icon cwi-pin", "data-pinned": value.isPinned, onClick: (_) => {
-                            onEvent(value.isPinned ? new OnUnpinRow(value.rowId) : new OnPinRow(value.rowId));
-                        } }), jsxRuntime.jsx("div", { className: styles["indicators"], children: value.indicators ?? undefined }), jsxRuntime.jsxs("div", { style: {
-                            display: "flex",
-                            flexDirection: "column",
-                            justifyContent: "center",
-                            alignItems: "flex-start",
-                        }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: value.title }), value.title2 && jsxRuntime.jsxs("span", { children: ["-", value.title2] }), " ", jsxRuntime.jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxRuntime.jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 &&
-                                        jsxRuntime.jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }), isLoading ? jsxRuntime.jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }) }, value.rowId) }, value.rowId));
+        }, trigger: ["contextMenu"], overlayStyle: { animationDuration: "0" }, arrow: (value.contextMenuItems?.length ?? 0) > 0, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CwGenericTooltip, { content: value.tooltip, position: "right", dissapearsWhenHover: true, overlayStyle: value.overlayTooltipStyle, children: jsxRuntime.jsxs("div", { style: {
+                        width: width,
+                        background: highlightColor,
+                    }, className: styles["super-scheduler-row-header"], children: [jsxRuntime.jsx("button", { className: "cw-button-icon cwi-pin", "data-pinned": value.isPinned, onClick: (_) => {
+                                onEvent(value.isPinned ? new OnUnpinRow(value.rowId) : new OnPinRow(value.rowId));
+                            } }), jsxRuntime.jsx("div", { className: styles["indicators"], children: value.indicators ?? undefined }), jsxRuntime.jsxs("div", { style: {
+                                display: "flex",
+                                flexDirection: "column",
+                                justifyContent: "center",
+                                alignItems: "flex-start",
+                            }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: value.title }), value.title2 && jsxRuntime.jsxs("span", { children: ["-", value.title2] }), " ", jsxRuntime.jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxRuntime.jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 &&
+                                            jsxRuntime.jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }), isLoading ? jsxRuntime.jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }) }, value.rowId) }) }, value.rowId));
 };
 
 const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory, unPinnedOrderCategory, backgroundEvents, contextMenuItems, onEvent }) => {
@@ -8510,6 +9749,10 @@ exports.CwColorPicker = CwColorPicker;
 exports.CwConfirmationPopup = CwConfirmationPopup;
 exports.CwContextMenu = CwContextMenu;
 exports.CwContextualMenu = CwContextualMenu;
+exports.CwDatePicker = CwDatePicker;
+exports.CwDateRangePicker = CwDateRangePicker;
+exports.CwDateTimePicker = CwDateTimePicker;
+exports.CwDateTimePickerCompact = CwDateTimePickerCompact;
 exports.CwDialog = CwDialog;
 exports.CwDialogManager = CwDialogManager;
 exports.CwDigit = CwDigit;
@@ -8572,6 +9815,7 @@ exports.CwTabs = CwTabs;
 exports.CwTag = CwTag;
 exports.CwTextArea = CwTextArea;
 exports.CwTime = CwTime;
+exports.CwTimePicker = CwTimePicker;
 exports.CwToggle = CwToggle;
 exports.CwTooltip = CwTooltip;
 exports.CwTreeView = CwTreeView;