@cwellt_software/cwellt-reactjs-lib 1.5.1 → 1.5.3

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, useRef, useEffect, useCallback, useLayoutEffect, createContext, useContext, cloneElement, useMemo, forwardRef, useImperativeHandle, useId, createElement, memo, Fragment as Fragment$1, Component } from 'react';
+import React__default, { useState, useRef, useEffect, useCallback, useLayoutEffect, createContext, useContext, cloneElement, useMemo, forwardRef, useId, useImperativeHandle, createElement, memo } from 'react';
 import { createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import Draggable from 'react-draggable';
@@ -161,7 +161,7 @@ function getContrastColor(color) {
     return `hsl(${hsl.h}, ${contrastS}%, ${targetL}%)`;
 }
 
-var styles$x = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
+var styles$y = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
 
 // Constants
 const margin$1 = 16;
@@ -451,7 +451,7 @@ const CwTooltipManager = () => {
     if (!state.isVisible || !state.content) {
         return null;
     }
-    return createPortal(jsx("div", { ref: tooltipRef, className: styles$x["cw-tooltip-content"], "data-position": actualPosition, "data-visible": state.isVisible, "data-inline": state.displayInline, style: {
+    return createPortal(jsx("div", { ref: tooltipRef, className: styles$y["cw-tooltip-content"], "data-position": actualPosition, "data-visible": state.isVisible, "data-inline": state.displayInline, style: {
             top: `${tooltipPosition.top}px`,
             left: `${tooltipPosition.left}px`,
             opacity: (isPositioned && !isMeasuring) ? 1 : 0,
@@ -532,7 +532,7 @@ const CwTooltipNew = ({ children, content = null, position = "right", dissapears
     useEffect(() => {
         ensureTooltipManager();
     }, []);
-    return (jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$x["cw-tooltip"], children: children }));
+    return (jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$y["cw-tooltip"], children: children }));
 };
 
 const SVG_ICONS = {
@@ -567,25 +567,31 @@ function CwIcon(props) {
 /**
 * CwChip - A simple chip/tag component for displaying labels or categories
 *
+* The colour comes from `color`; the older `colorScheme` spelling is deprecated but still
+* honoured, and `color` wins when both are passed.
+*
 * @example
-* <CwChip label="Active" colorScheme="success" />
-* <CwChip label="High Priority" colorScheme="danger" variant="solid" />
-* <CwChip label="Custom" colorScheme="custom" customColor="#8a2be2" />
-* <CwChip label="Outlined" colorScheme="info" variant="outline" />
+* <CwChip label="Active" color="success" />
+* <CwChip label="High Priority" color="danger" variant="solid" />
+* <CwChip label="Custom" color="custom" customColor="#8a2be2" />
+* <CwChip label="Outlined" color="info" variant="outline" />
 * <CwChip label="Removable" closable onClose={() => console.log('closed')} />
 **/
-const CwChip = ({ label, colorScheme = 'info', customColor, variant = 'soft', className = '', closable = false, onClose, icon, style = {}, }) => {
+const CwChip = ({ label, color, colorScheme, customColor, variant = 'soft', className = '', closable = false, onClose, icon, style = {}, }) => {
+    const resolvedColor = color ?? colorScheme ?? 'info';
     // Basic validation
     if (closable && !onClose) {
         console.warn('CwChip: onClose prop is required when closable is true');
     }
-    // Calculate styles based on colorScheme, customColor and variant
+    // One arbitrary colour can only fill two of the four roles, so soft and solid look alike here.
     const chipStyle = React__default.useMemo(() => {
         if (customColor) {
-            // Simply set the CSS custom properties, CSS handles the rest
+            const contrast = getContrastColor(customColor);
             return {
-                '--chip-accent': customColor,
-                '--chip-text': getContrastColor(customColor),
+                '--accent-light': customColor,
+                '--accent-main': customColor,
+                '--accent-dark': contrast,
+                '--accent-on-main': contrast,
                 ...style
             };
         }
@@ -604,7 +610,79 @@ const CwChip = ({ label, colorScheme = 'info', customColor, variant = 'soft', cl
         className,
         closable ? 'cw-chip-closable' : '',
     ].filter(Boolean).join(' ');
-    return (jsxs("span", { className: chipClassNames, "data-color-scheme": colorScheme, "data-variant": variant, style: chipStyle, children: [icon && jsx(CwIcon, { iconId: icon }), label && jsx("span", { children: label }), closable && (jsx("button", { className: "cw-chip-close-button", onClick: handleClose, "aria-label": "Remove", type: "button", children: jsx("span", { className: "cwi-icons cwi-close" }) }))] }));
+    return (jsxs("span", { className: chipClassNames, "data-color": resolvedColor, "data-variant": variant, "data-icon-only": (Boolean(icon) && !label) || undefined, style: chipStyle, children: [icon && jsx(CwIcon, { iconId: icon }), label && jsx("span", { children: label }), closable && (jsx("button", { className: "cw-chip-close-button", onClick: handleClose, "aria-label": "Remove", type: "button", children: jsx("span", { className: "cwi-icons cwi-close" }) }))] }));
+};
+
+/**
+ * Normalises a raw count into the integer the badge represents: a non-negative whole number.
+ * Both the display string and the `showZero` decision derive from this.
+ */
+function normalizeBadgeCount(count) {
+    return Number.isFinite(count) ? Math.max(0, Math.trunc(count)) : 0;
+}
+/**
+ * Formats a badge count into its display string. Both arguments are normalised, `max` with a
+ * floor of 1 - below that every non-zero count would overflow.
+ *
+ * @param count Raw count to display.
+ * @param max Highest value shown as a number; anything above renders `"{max}+"`.
+ *
+ * @example
+ * formatBadgeCount(7, 99);    // "7"
+ * formatBadgeCount(100, 99);  // "99+"
+ * formatBadgeCount(12, 9);    // "9+"
+ */
+function formatBadgeCount(count, max) {
+    const safeCount = normalizeBadgeCount(count);
+    const safeMax = Number.isFinite(max) ? Math.max(1, Math.trunc(max)) : 1;
+    return safeCount > safeMax ? `${safeMax}+` : `${safeCount}`;
+}
+/**
+ * Resolves the badge's accessibility attributes. A text-less badge with no label is hidden rather
+ * than announced as an empty element; the button or tab around it usually names the thing.
+ *
+ * @param label Caller-supplied accessible name.
+ * @param loading Whether the badge is showing its spinner.
+ * @param hasText Whether the badge renders a count or content.
+ */
+function resolveBadgeAria(label, loading, hasText) {
+    if (label) {
+        return { role: loading ? 'status' : 'img', 'aria-label': label };
+    }
+    return hasText ? {} : { 'aria-hidden': 'true' };
+}
+
+var styles$x = {"badge":"cw-badge-module__badge__PKlak"};
+
+/**
+ * CwBadge - the small coloured circle with a number, used for alert and notification counts.
+ *
+ * Always **in flow** (`inline-flex`); it never positions itself, so overlaying it on an icon
+ * button is the caller's job. One digit stays a circle, wider content such as `"99+"` grows into
+ * a pill. With neither `count` nor `content` it renders as a dot.
+ *
+ * Precedence: `loading` > `content` > `count` > dot. While loading the badge renders regardless
+ * of `showZero`, and the spinner replaces it - circle, background and padding come off.
+ *
+ * @example
+ * <CwBadge count={3} color="danger" />
+ * <CwBadge count={0} showZero={false} />
+ * <CwBadge count={128} max={99} color="warning" variant="soft" />
+ * <CwBadge color="warning" label="Unresolved findings" />
+ * <CwBadge count={0} loading />
+ */
+const CwBadge = ({ count, content, color = 'info', variant = 'solid', size = 'small', showZero = true, loading = false, max = 99, label, className = '', style, }) => {
+    // null counts as absent, so `content={null}` still renders a dot rather than an empty pill.
+    const hasContent = content !== undefined && content !== null;
+    if (!loading && !hasContent && count !== undefined && !showZero && normalizeBadgeCount(count) === 0) {
+        return null;
+    }
+    const countText = !hasContent && count !== undefined
+        ? formatBadgeCount(count, max)
+        : undefined;
+    const isDot = !loading && !hasContent && count === undefined;
+    const badgeClassNames = ['cw-badge', styles$x.badge, className].filter(Boolean).join(' ');
+    return (jsx("span", { className: badgeClassNames, "data-color": color, "data-variant": variant, "data-size": size, "data-loading": loading ? 'true' : undefined, "data-dot": isDot ? 'true' : undefined, ...resolveBadgeAria(label, loading, !loading && (hasContent || countText !== undefined)), style: style, children: loading ? jsx(CwIcon, { iconId: "spinner", size: "small" }) : hasContent ? content : countText }));
 };
 
 const CW_DEFAULT_MESSAGE_DURATION = 2000;
@@ -1058,7 +1136,7 @@ var styles$v = {"progress":"cw-progress-module__progress__d-g2-","value":"cw-pro
  * <CwProgress value={62} label="Import" color="success" />
  * <CwProgress indeterminate label="Uploading" />
  */
-function CwProgress({ value, indeterminate = false, label, rightLabel, size = 'regular', layout = 'row', color = 'primary', monoValue = false, prominent = false }) {
+function CwProgress({ value, indeterminate = false, label, rightLabel, size = 'regular', layout = 'row', color = 'primary', monoValue = false, prominent = false, className }) {
     const labelId = React__default.useId();
     // Determinate: a missing or non-finite value is treated as 0 (never NaN), then
     // clamped to [0,100] for aria-valuenow and the fill width. Indeterminate has no value.
@@ -1070,7 +1148,7 @@ function CwProgress({ value, indeterminate = false, label, rightLabel, size = 'r
     const valueText = rightLabel ?? (percent !== undefined ? `${percent}%` : '');
     // The un-hashed cw-progress class carries no styles in the library - a stable
     // public hook for exceptional external overrides only.
-    const rootClassName = ['cw-progress', styles$v.progress].filter(Boolean).join(' ');
+    const rootClassName = ['cw-progress', styles$v.progress, className].filter(Boolean).join(' ');
     const labelSpan = label ? jsx("span", { className: styles$v.label, id: labelId, children: label }) : null;
     const valueLabel = showValue ? (jsx("span", { className: styles$v.value, "data-mono": monoValue || undefined, children: valueText })) : null;
     return (jsxs("div", { className: rootClassName, "data-layout": layout, "data-size": size, "data-color": color, "data-prominent": prominent || undefined, "data-indeterminate": indeterminate || undefined, children: [layout === 'column' && (labelSpan || valueLabel) && (jsxs("header", { className: styles$v.header, children: [labelSpan, valueLabel] })), layout === 'row' && labelSpan, jsx("div", { className: styles$v.track, role: "progressbar", ...(label && { 'aria-labelledby': labelId }), ...(!indeterminate && percent !== undefined && {
@@ -1226,7 +1304,7 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
     return (jsxs("div", { ref: containerRef, className: styles$u["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, children: [tooltipContent, children] }));
 };
 
-const CwButton = React__default.forwardRef(function CwButton({ text, variant = 'solid', color = 'primary', size = 'medium', iconPosition = 'left', pressed, className = '', icon = "", title, tooltipPosition = "bottom", children, ...buttonProps }, ref) {
+const CwButton = React__default.forwardRef(function CwButton({ text, variant = 'solid', color = 'primary', size = 'medium', iconPosition = 'left', pressed, className = '', icon = "", title, tooltipPosition = "bottom", badge, children, ...buttonProps }, ref) {
     // Build CSS classes based on variant and props
     let buttonClass = `cw-button-${variant}`;
     // Add icon class only for icon variant without children
@@ -1239,13 +1317,19 @@ const CwButton = React__default.forwardRef(function CwButton({ text, variant = '
     const tooltipContent = title || (variant === 'icon' && text ? text : undefined);
     const iconElement = icon ? jsx(CwIcon, { iconId: icon }) : null;
     const textElement = text ? jsx("strong", { children: text }) : null;
+    // Overlaid, not content: the `cwi-` condition above deliberately ignores it, so a badge
+    // never suppresses the button's own icon. Size defaulted explicitly, not by spread order,
+    // so `size: undefined` in the object cannot clobber it.
+    const badgeElement = badge
+        ? jsx(CwBadge, { ...badge, size: badge.size ?? (variant === 'icon' ? 'small' : size) })
+        : null;
     // Only emit toggle attributes when `pressed` is defined; otherwise output stays identical to a normal button.
     const pressedProps = pressed !== undefined
         ? { "aria-pressed": pressed, "data-pressed": pressed ? "true" : undefined }
         : {};
-    const buttonElement = (jsx("button", { ref: ref, type: "button", className: buttonClass, ...buttonProps, "data-color": color, "data-size": size, ...pressedProps, "aria-label": tooltipContent ?? buttonProps["aria-label"], children: variant === 'icon' ? null : (children ?? (iconPosition === 'right'
-            ? jsxs(Fragment, { children: [textElement, iconElement] })
-            : jsxs(Fragment, { children: [iconElement, textElement] }))) }));
+    const buttonElement = (jsx("button", { ref: ref, type: "button", className: buttonClass, ...buttonProps, "data-color": color, "data-size": size, "data-has-badge": badge ? "true" : undefined, ...pressedProps, "aria-label": buttonProps["aria-label"] ?? tooltipContent, children: variant === 'icon' ? badgeElement : (jsxs(Fragment, { children: [children ?? (iconPosition === 'right'
+                    ? jsxs(Fragment, { children: [textElement, iconElement] })
+                    : jsxs(Fragment, { children: [iconElement, textElement] })), badgeElement] })) }));
     return tooltipContent ? (jsx(CwTooltipNew, { content: tooltipContent, position: tooltipPosition, displayInline: true, children: buttonElement })) : (buttonElement);
 });
 CwButton.displayName = "CwButton";
@@ -2634,8 +2718,12 @@ function CwTableServerSide({ columns, data, totalItems, pagination = false, page
                                 }, min: 1, max: totalPages }), jsx("span", { children: "/" }), jsx("span", { children: totalPages }), jsx(CwButton, { onClick: () => handlePageChange(state.page + 1), disabled: state.page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: state.page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
 }
 
-var styles$n = {"cw-tabs":"cw-tabs-module__cw-tabs__1pmji","badge":"cw-tabs-module__badge__AmVxW","cw-tabs-content":"cw-tabs-module__cw-tabs-content__HTp8d"};
+var styles$n = {"cw-tabs":"cw-tabs-module__cw-tabs__1pmji","cw-tabs-content":"cw-tabs-module__cw-tabs-content__HTp8d"};
 
+const BADGE_COLOR_SCHEMES = ['primary', 'danger', 'warning', 'success', 'info', 'neutral'];
+function isBadgeColorScheme(value) {
+    return BADGE_COLOR_SCHEMES.includes(value);
+}
 const TabIcon = ({ icon }) => {
     if (!icon)
         return null;
@@ -2684,7 +2772,11 @@ function CwTabs(CwTabsProps) {
     const tabsListStyle = position === 'left' && CwTabsProps.tabsListWidth
         ? { minWidth: CwTabsProps.tabsListWidth }
         : undefined;
-    return (jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$n['cw-tabs'] + (CwTabsProps.className ? ` ${CwTabsProps.className}` : "") + "", style: CwTabsProps.style, "data-tabs-position": position, children: [jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => (jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, "data-tab-key": tab.key, children: [jsx(TabIcon, { icon: tab.icon }), tab.title, (tab.badge !== undefined || tab.badgeColor) && (jsx("span", { className: styles$n['badge'], style: tab.badgeColor ? { backgroundColor: tab.badgeColor, color: getContrastColor(tab.badgeColor) } : undefined, children: tab.badge }))] }, tab.key))) }), jsx("div", { className: styles$n['cw-tabs-content'], "data-active-tab-key": activeTab ?? undefined, style: CwTabsProps.contentHeight ? { '--tabs-height': CwTabsProps.contentHeight } : undefined, children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
+    return (jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$n['cw-tabs'] + (CwTabsProps.className ? ` ${CwTabsProps.className}` : "") + "", style: CwTabsProps.style, "data-tabs-position": position, children: [jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => {
+                    const badgeScheme = tab.badgeColor && isBadgeColorScheme(tab.badgeColor) ? tab.badgeColor : undefined;
+                    const rawBadgeColor = tab.badgeColor && !badgeScheme ? tab.badgeColor : undefined;
+                    return (jsxs("li", { className: `${tab.key === activeTab ? "cw-tab-active" : ""}`, onClick: () => handleTabClick(tab), "data-active": tab.key === activeTab, "data-tab-key": tab.key, "data-badge-themed": tab.badgeColor ? "true" : undefined, children: [jsx(TabIcon, { icon: tab.icon }), tab.title, (tab.badge !== undefined || tab.badgeColor) && (jsx(CwBadge, { count: typeof tab.badge === 'number' ? tab.badge : undefined, content: typeof tab.badge === 'string' ? tab.badge : undefined, size: "medium", color: badgeScheme ?? 'primary', variant: badgeScheme ? 'solid' : 'soft', style: rawBadgeColor ? { backgroundColor: rawBadgeColor, color: getContrastColor(rawBadgeColor) } : undefined }))] }, tab.key));
+                }) }), jsx("div", { className: styles$n['cw-tabs-content'], "data-active-tab-key": activeTab ?? undefined, style: CwTabsProps.contentHeight ? { '--tabs-height': CwTabsProps.contentHeight } : undefined, children: activeTab !== null && CwTabsProps.tabs.find(tab => tab.key === activeTab)?.content })] }));
 }
 
 /**
@@ -3233,8 +3325,16 @@ function CwInput(CwInputProps) {
  * ```
  */
 function CwDigit(props) {
-    const { alignProps, buttonProps, iconProps, labelProps, ...inputProps } = props;
-    return (jsx("div", { className: "cw-input-text", children: jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsx("input", { type: "number", ...inputProps }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
+    const { alignProps, buttonProps, iconProps, labelProps, feedback, feedbackPosition, ...inputProps } = props;
+    const feedbackMessages = feedback
+        ? Array.isArray(feedback) ? feedback : [feedback]
+        : [];
+    const feedbackId = useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = [inputProps["aria-describedby"], ...feedbackIds].filter(Boolean).join(" ") || undefined;
+    // data-direction drives the feedback indent, which only makes sense under a label column.
+    const flexDirection = alignProps?.flexDirection ?? "row";
+    return (jsxs("div", { className: "cw-input-text", "data-direction": labelProps ? flexDirection : "column", "data-feedback-position": feedbackPosition, children: [jsxs(CwAlign, { ...alignProps, itemProp: inputProps.required === true ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: "cw-input-button", children: [jsx("input", { type: "number", ...inputProps, "aria-describedby": describedBy }), buttonProps && jsx(CwButton, { ...buttonProps })] })] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { id: feedbackIds[index], className: "cw-input-info", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] }));
 }
 
 var styles$j = {"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"};
@@ -3448,7 +3548,7 @@ const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }
 
 var styles$i = {"container":"cw-input-color-module__container__x7gpk","selectColor":"cw-input-color-module__selectColor__DTo3V","disabled":"cw-input-color-module__disabled__O1fK5","readOnly":"cw-input-color-module__readOnly__HL-Bz","colorDropdown":"cw-input-color-module__colorDropdown__pX2bc"};
 
-const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, readOnly = false, width = '4rem', height = '2rem', labelProps, layoutProps, }) => {
+const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled = false, readOnly = false, width = '4rem', height = '2rem', labelProps, layoutProps, className, style, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useRef(null);
     const dropdownRef = useRef(null);
@@ -3579,7 +3679,7 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
                 break;
         }
     };
-    return (jsxs("div", { className: `cw-input-color ${styles$i.container}`, "data-direction": layoutProps?.direction ?? "row", "data-align": layoutProps?.align, children: [labelProps && (jsx(CwLabel, { ...labelProps })), jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$i.selectColor} ${disabled ? styles$i.disabled : ''} ${readOnly ? styles$i.readOnly : ''}`, style: {
+    return (jsxs("div", { className: `cw-input-color ${styles$i.container}${className ? ` ${className}` : ''}`, style: style, "data-direction": layoutProps?.direction ?? "row", "data-align": layoutProps?.align, children: [labelProps && (jsx(CwLabel, { ...labelProps })), jsx("div", { ref: containerRef, onClick: handleToggle, className: `${styles$i.selectColor} ${disabled ? styles$i.disabled : ''} ${readOnly ? styles$i.readOnly : ''}`, style: {
                     width,
                     height,
                     backgroundColor: value,
@@ -4044,15 +4144,37 @@ const CwImageArea = forwardRef((props, ref) => {
 });
 CwImageArea.displayName = "CwImageArea";
 
-var styles$g = {"cw-weekday-selector":"cw-weekday-selector-module__cw-weekday-selector__Iz4GZ"};
+var styles$g = {"container":"cw-weekday-selector-module__container__pwcvx","days":"cw-weekday-selector-module__days__Dd3RH"};
+
+/* 2024-01-01 was a Monday. Formatted in UTC so a negative browser offset cannot shift a day. */
+const MONDAY_UTC = Date.UTC(2024, 0, 1);
+const DAY_IN_MS = 86_400_000;
+const DAY_CODES = ["M", "T", "W", "R", "F", "S", "U"];
+/**
+ * Day names in the fixed MTWRFSU order the selector renders, resolved through Intl so every
+ * locale gets its own letters (es -> LMXJVSD, de -> MDMDFSS) with no table to maintain.
+ *
+ * @param localeCode BCP-47 tag, e.g. "en-GB" | "es" | "de"
+ */
+function getWeekdayNames(localeCode) {
+    const narrow = new Intl.DateTimeFormat(localeCode, { weekday: "narrow", timeZone: "UTC" });
+    const full = new Intl.DateTimeFormat(localeCode, { weekday: "long", timeZone: "UTC" });
+    const names = {};
+    DAY_CODES.forEach((code, index) => {
+        const date = new Date(MONDAY_UTC + index * DAY_IN_MS);
+        names[code] = { letter: narrow.format(date), full: full.format(date) };
+    });
+    return names;
+}
 
+/* The week model behind CwWeekdaySelector, kept apart from the rendering. */
 /**
  * This class represents a week where days can be selected or unselected
  * @remark Selected days are in UPPERCASE, unselected days are in lowercase
  * ```
  * Monday     = "M" | "m"
  * Tuesday    = "T" | "t"
- * Wendnesday = "W" | "w"
+ * Wednesday  = "W" | "w"
  * thuRsday   = "R" | "r"
  * Friday     = "F" | "f"
  * Saturday   = "S" | "s"
@@ -4064,15 +4186,6 @@ class Weekdays {
     static WEEKDAYS_STANDARD_ARRAY_EMPTY = ["m", "t", "w", "r", "f", "s", "u"];
     static WEEKDAYS_STANDARD_STRING_FULL = "MTWRFSU";
     static WEEKDAYS_STANDARD_STRING_EMPTY = "mtwrfsu";
-    static WEEKDAYS_TO_USA_LETTER_FORMAT = new Map([
-        ["M", "M"],
-        ["T", "T"],
-        ["W", "W"],
-        ["R", "T"],
-        ["F", "F"],
-        ["S", "S"],
-        ["U", "S"]
-    ]);
     static WEEKDAYS_TO_USA_SHORT_FORMAT = new Map([
         ["M", "Mon"],
         ["T", "Tue"],
@@ -4091,6 +4204,7 @@ class Weekdays {
         5: "F",
         6: "S"
     };
+    static DAY_NUMBER_BY_CODE = Object.fromEntries(Object.entries(Weekdays.WEEKDAY_MAP).map(([dayNumber, code]) => [code, Number(dayNumber)]));
     days;
     constructor(days = Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL) {
         if (typeof days === "string")
@@ -4134,11 +4248,11 @@ class Weekdays {
     toString() {
         return this.days.join("").trim();
     }
-    toStringFormatted(limiters = { startExistingDay: "{", endExsitingDay: "}", startMissingDay: "(", endMissingDay: ")", separator: " " }, format = Weekdays.WEEKDAYS_TO_USA_SHORT_FORMAT) {
+    toStringFormatted(limiters = { startExistingDay: "{", endExistingDay: "}", startMissingDay: "(", endMissingDay: ")", separator: " " }, format = Weekdays.WEEKDAYS_TO_USA_SHORT_FORMAT) {
         const result = new Array();
         [...this.days].forEach((letter, index) => {
             if (letter === letter.toUpperCase()) {
-                result.push(limiters.startExistingDay + format.get(letter) + limiters.endExsitingDay);
+                result.push(limiters.startExistingDay + format.get(letter) + limiters.endExistingDay);
             }
             else if (letter === letter.toLowerCase()) {
                 result.push(limiters.startMissingDay +
@@ -4158,33 +4272,77 @@ class Weekdays {
         return this.toString() === Weekdays.WEEKDAYS_STANDARD_STRING_FULL;
     }
     static getFullWeek() {
-        return Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL;
+        return [...Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL];
     }
     static getEmptyWeek() {
-        return Weekdays.WEEKDAYS_STANDARD_ARRAY_EMPTY;
+        return [...Weekdays.WEEKDAYS_STANDARD_ARRAY_EMPTY];
     }
-}
-const CwWeekdaySelector = ({ value = "", onChange, disabled = false }) => {
-    const [selectedDays, setSelectedDays] = useState(Weekdays.fromString(value));
-    useEffect(() => {
-        setSelectedDays(Weekdays.fromString(value));
-    }, [value]);
-    const handleChange = (day, checked) => {
-        const currentDays = selectedDays.toArray();
-        let updated;
-        if (checked) {
-            updated = currentDays.filter(d => d !== day.toLowerCase());
-            updated.push(day);
+    /** A week with nothing selected. */
+    static empty() {
+        return new Weekdays(Weekdays.WEEKDAYS_STANDARD_ARRAY_EMPTY);
+    }
+    /**
+     * Like {@link fromString}, but yields an empty week instead of throwing on anything invalid.
+     * For UI fed straight from a backend field that can arrive null, empty or partial.
+     */
+    static tryFromString(value) {
+        if (!value)
+            return Weekdays.empty();
+        try {
+            return Weekdays.fromString(value);
         }
-        else {
-            updated = currentDays.filter(d => d !== day);
-            updated.push(day.toLowerCase());
+        catch {
+            return Weekdays.empty();
         }
-        const newWeekdays = new Weekdays(updated);
-        setSelectedDays(newWeekdays);
-        onChange?.(newWeekdays.toString());
+    }
+    /** Selected flags in MTWRFSU order (Monday first). */
+    toBooleans() {
+        return this.days.map(day => day === day.toUpperCase());
+    }
+    /** @param flags selected flags in MTWRFSU order; missing entries count as unselected */
+    static fromBooleans(flags) {
+        return new Weekdays(Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL.map((day, index) => flags[index] ? day : day.toLowerCase()));
+    }
+    /** 7-character mask in MTWRFSU order where "1" means selected, e.g. "1100100". */
+    toMask() {
+        return this.toBooleans().map(selected => (selected ? "1" : "0")).join("");
+    }
+    /** @param mask 7-character mask in MTWRFSU order where "1" means selected; a shorter, empty or
+     *  missing mask counts the absent days as unselected */
+    static fromMask(mask) {
+        return Weekdays.fromBooleans(Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL.map((_, index) => mask?.[index] === "1"));
+    }
+    /** Selected days as Date.getDay() numbers (0 = Sunday), in MTWRFSU order. */
+    toDayNumbers() {
+        return this.days
+            .filter(day => day === day.toUpperCase())
+            .map(day => Weekdays.DAY_NUMBER_BY_CODE[day]);
+    }
+    /** @param days Date.getDay() numbers (0 = Sunday) */
+    static fromDayNumbers(days) {
+        const selected = new Set(days);
+        return Weekdays.fromBooleans(Weekdays.WEEKDAYS_STANDARD_ARRAY_FULL.map(day => selected.has(Weekdays.DAY_NUMBER_BY_CODE[day])));
+    }
+}
+
+const CwWeekdaySelector = ({ value = "mtwrfsu", onChange, disabled = false, labelProps, layout, feedback, locale = "en-GB", className }) => {
+    const selectedDays = Weekdays.tryFromString(value).toArray();
+    const dayNames = useMemo(() => getWeekdayNames(locale), [locale]);
+    const handleChange = (day, checked) => {
+        const updated = selectedDays.filter(d => d !== day && d !== day.toLowerCase());
+        updated.push(checked ? day : day.toLowerCase());
+        onChange?.(new Weekdays(updated).toString());
     };
-    return (jsx("div", { className: styles$g["cw-weekday-selector"], children: Weekdays.getFullWeek().map(day => (jsx("input", { type: "checkbox", "data-day": day, checked: selectedDays.toArray().includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }));
+    const feedbackMessages = feedback
+        ? Array.isArray(feedback) ? feedback : [feedback]
+        : [];
+    const feedbackId = useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = feedbackIds.join(" ") || undefined;
+    // Points at the label element rather than copying its text, which also covers a labelProps that
+    // carries children instead of `text`.
+    const labelId = labelProps?.id ?? `${feedbackId}-label`;
+    return (jsxs("div", { className: `cw-weekday-selector ${styles$g.container}${className ? ` ${className}` : ""}`, "data-direction": labelProps ? layout?.direction ?? "row" : "column", "data-align": layout?.align, "data-gap": layout?.gap, children: [labelProps && jsx(CwLabel, { id: labelId, ...labelProps }), jsx("div", { role: "group", className: styles$g.days, "aria-labelledby": labelProps ? labelId : undefined, "aria-describedby": describedBy, children: Weekdays.getFullWeek().map(day => (jsx("input", { type: "checkbox", "data-day": day, "data-letter": dayNames[day].letter, "aria-label": dayNames[day].full, title: dayNames[day].full, checked: selectedDays.includes(day), onChange: (e) => handleChange(day, e.target.checked), disabled: disabled }, day))) }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] }));
 };
 
 var styles$f = {"check-container":"cw-check-module__check-container__4nscZ","group":"cw-check-module__group__6JCQo","options":"cw-check-module__options__-g9LF"};
@@ -4232,6 +4390,9 @@ function CwCheckboxGroup({ options, value = [], onChange, labelProps, groupLayou
     const feedbackMessages = feedback
         ? Array.isArray(feedback) ? feedback : [feedback]
         : [];
+    const feedbackId = useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = feedbackIds.join(" ") || undefined;
     // Effective layout — precedence: new `groupLayout`/`itemLayout` > legacy-derived > default.
     // Legacy `alignProps.flexDirection` drove the label-vs-options axis (default "row" = label
     // beside the options); map it to `groupLayout.direction`.
@@ -4244,7 +4405,7 @@ function CwCheckboxGroup({ options, value = [], onChange, labelProps, groupLayou
         ?? (optionsAlignment === "column" ? "row" : "column");
     // Each checkbox's box-to-text layout is the opposite of the options flow, mirroring CwRadioGroup.
     const checkDirection = itemDirection === "row" ? "column" : "row";
-    return (jsxs("div", { className: `cw-checkbox-group ${styles$f.group}${className ? ` ${className}` : ""}`, "data-testid": dataTestId, "data-direction": labelProps ? groupDirection : "column", "data-align": groupLayout?.align, "data-gap": groupLayout?.gap, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsx("div", { className: styles$f.options, role: "group", "aria-label": labelProps?.text, "aria-required": required || undefined, "data-direction": itemDirection, "data-gap": itemLayout?.gap, children: options.map((option) => (jsx(CwCheck, { labelProps: { text: option.label }, checked: value.includes(option.value), disabled: disabled || option.disabled, direction: checkDirection, onChange: (e) => handleChange(option.value, e.currentTarget.checked) }, option.value))) }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+    return (jsxs("div", { className: `cw-checkbox-group ${styles$f.group}${className ? ` ${className}` : ""}`, "data-testid": dataTestId, "data-direction": labelProps ? groupDirection : "column", "data-align": groupLayout?.align, "data-gap": groupLayout?.gap, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsx("div", { className: styles$f.options, role: "group", "aria-label": labelProps?.text, "aria-describedby": describedBy, "aria-required": required || undefined, "data-direction": itemDirection, "data-gap": itemLayout?.gap, children: options.map((option) => (jsx(CwCheck, { labelProps: { text: option.label }, checked: value.includes(option.value), disabled: disabled || option.disabled, direction: checkDirection, onChange: (e) => handleChange(option.value, e.currentTarget.checked) }, option.value))) }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] }));
 }
 
 var styles$e = {"radio":"cw-radio-module__radio__5sh7a","group":"cw-radio-module__group__br-HM","options":"cw-radio-module__options__LSw7M"};
@@ -4271,11 +4432,14 @@ function CwRadioGroup({ options, value, onChange, labelProps, groupLayout, itemL
     const feedbackMessages = feedback
         ? Array.isArray(feedback) ? feedback : [feedback]
         : [];
+    const feedbackId = useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = feedbackIds.join(" ") || undefined;
     // Each radio's circle-to-text layout is the opposite of the options flow: a stacked list
     // (itemLayout column) reads best with the circle beside the text; a side-by-side row reads
     // best with the circle above the text.
     const radioDirection = itemLayout?.direction === "row" ? "column" : "row";
-    return (jsxs("div", { className: `cw-radio-group ${styles$e.group}${className ? ` ${className}` : ""}`, "data-testid": dataTestId, "data-direction": labelProps ? (groupLayout?.direction ?? "column") : "column", "data-align": groupLayout?.align, "data-gap": groupLayout?.gap, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsx("div", { className: styles$e.options, role: "radiogroup", "aria-labelledby": ariaLabelledby, "aria-label": ariaLabelledby ? undefined : (ariaLabel ?? labelProps?.text), "aria-required": required || undefined, "data-direction": itemLayout?.direction ?? "column", "data-gap": itemLayout?.gap, children: options.map((option) => (jsx(CwRadio, { name: groupName, label: option.label, direction: radioDirection, checked: value === option.value, required: required, disabled: disabled || option.disabled, onChange: () => onChange(option.value) }, option.value))) }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+    return (jsxs("div", { className: `cw-radio-group ${styles$e.group}${className ? ` ${className}` : ""}`, "data-testid": dataTestId, "data-direction": labelProps ? (groupLayout?.direction ?? "column") : "column", "data-align": groupLayout?.align, "data-gap": groupLayout?.gap, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsx("div", { className: styles$e.options, role: "radiogroup", "aria-describedby": describedBy, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabelledby ? undefined : (ariaLabel ?? labelProps?.text), "aria-required": required || undefined, "data-direction": itemLayout?.direction ?? "column", "data-gap": itemLayout?.gap, children: options.map((option) => (jsx(CwRadio, { name: groupName, label: option.label, direction: radioDirection, checked: value === option.value, required: required, disabled: disabled || option.disabled, onChange: () => onChange(option.value) }, option.value))) }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] }));
 }
 
 function CwToggle(props) {
@@ -4455,6 +4619,13 @@ function CwDropdown({ options, value, onChange, labelProps, alignProps, placehol
     const feedbackMessages = feedback
         ? Array.isArray(feedback) ? feedback : [feedback]
         : [];
+    const feedbackId = useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = feedbackIds.join(" ") || undefined;
+    // The trigger is named by reference - the label for the field, the content for the current
+    // value - so neither has to be copied into a string.
+    const labelId = labelProps?.id ?? `${feedbackId}-label`;
+    const valueId = `${feedbackId}-value`;
     // Scroll highlighted item into view
     useEffect(() => {
         if (isOpen && highlightedItemRef.current) {
@@ -4523,12 +4694,12 @@ function CwDropdown({ options, value, onChange, labelProps, alignProps, placehol
         }
     }, [isOpen, highlightedIndex, filteredOptions, handleOptionSelect]);
     const flexDirection = alignProps?.flexDirection ?? "row";
-    return (jsxs("div", { ref: containerRef, className: `cw-dropdown${className ? ` ${className}` : ""}`, "data-direction": flexDirection, style: style, ...otherProps, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-dropdown-wrapper", ref: wrapperRef, children: [jsx("button", { type: "button", className: "cw-dropdown-trigger", onClick: handleTriggerClick, onKeyDown: handleKeyDown, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-label": selectedOption?.label || placeholder, children: jsx("div", { className: "cw-dropdown-trigger-content", children: selectedOption ? (jsxs(Fragment, { children: [selectedOption.color && (jsx("span", { className: dropdownStyles.colorCircle, style: { backgroundColor: selectedOption.color } })), jsx("span", { children: selectedOption.label })] })) : (jsx("span", { className: "cw-dropdown-placeholder", children: placeholder })) }) }), jsx("div", { style: { display: "flex", alignItems: "center", paddingRight: "0.5rem", flexShrink: 0, cursor: disabled ? "not-allowed" : "pointer" }, onClick: handleTriggerClick, children: jsx(CwIcon, { iconId: "chevron-down", size: "small" }) }), renderPanel(jsxs("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", onKeyDown: handleKeyDown, children: [allowSearch && (jsx("div", { className: dropdownStyles.searchBox, children: jsx("input", { ref: inputRef, type: "text", placeholder: "Search...", value: searchText, onChange: handleSearchChange, onKeyDown: handleKeyDown, className: dropdownStyles.searchInput, autoComplete: "off" }) })), jsx("ul", { children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => (jsxs("li", { ref: highlightedIndex === index ? highlightedItemRef : null, className: [
-                                                dropdownStyles.option,
-                                                value === option.value ? dropdownStyles.optionSelected : "",
-                                                highlightedIndex === index ? dropdownStyles.optionFocused : "",
-                                                option.disabled ? dropdownStyles.optionDisabled : "",
-                                            ].filter(Boolean).join(" "), onClick: () => !option.disabled && handleOptionSelect(option.value), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": value === option.value, "aria-disabled": option.disabled, children: [option.color && (jsx("span", { className: dropdownStyles.colorCircle, style: { backgroundColor: option.color } })), jsx("span", { children: option.label })] }, option.value)))) : (jsx("li", { className: dropdownStyles.emptyState, children: "No options available" })) })] }))] })] }), feedbackMessages.map((item, index) => (jsx("p", { className: "cw-input-info", "data-color": item.type, children: item.message }, index)))] }));
+    return (jsx("div", { ref: containerRef, className: `cw-dropdown${className ? ` ${className}` : ""}`, "data-direction": flexDirection, style: style, ...otherProps, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && jsx(CwLabel, { id: labelId, ...labelProps }), jsxs("div", { className: dropdownStyles.value, children: [jsxs("div", { className: "cw-dropdown-wrapper", ref: wrapperRef, children: [jsxs("button", { type: "button", className: "cw-dropdown-trigger", onClick: handleTriggerClick, onKeyDown: handleKeyDown, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-labelledby": labelProps ? `${labelId} ${valueId}` : undefined, "aria-label": labelProps ? undefined : (selectedOption?.label || placeholder), "aria-describedby": describedBy, children: [jsx("div", { className: "cw-dropdown-trigger-content", id: valueId, children: selectedOption ? (jsxs(Fragment, { children: [selectedOption.color && (jsx("span", { className: dropdownStyles.colorCircle, style: { backgroundColor: selectedOption.color } })), jsx("span", { children: selectedOption.label })] })) : (jsx("span", { className: "cw-dropdown-placeholder", children: placeholder })) }), jsx(CwIcon, { iconId: "chevron-down", size: "small" })] }), renderPanel(jsxs("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", onKeyDown: handleKeyDown, children: [allowSearch && (jsx("div", { className: dropdownStyles.searchBox, children: jsx("input", { ref: inputRef, type: "text", placeholder: "Search...", value: searchText, onChange: handleSearchChange, onKeyDown: handleKeyDown, className: dropdownStyles.searchInput, autoComplete: "off" }) })), jsx("ul", { children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => (jsxs("li", { ref: highlightedIndex === index ? highlightedItemRef : null, className: [
+                                                    dropdownStyles.option,
+                                                    value === option.value ? dropdownStyles.optionSelected : "",
+                                                    highlightedIndex === index ? dropdownStyles.optionFocused : "",
+                                                    option.disabled ? dropdownStyles.optionDisabled : "",
+                                                ].filter(Boolean).join(" "), onClick: () => !option.disabled && handleOptionSelect(option.value), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": value === option.value, "aria-disabled": option.disabled, children: [option.color && (jsx("span", { className: dropdownStyles.colorCircle, style: { backgroundColor: option.color } })), jsx("span", { children: option.label })] }, option.value)))) : (jsx("li", { className: dropdownStyles.emptyState, children: "No options available" })) })] }))] }), feedbackMessages.map((item, index) => (jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": item.type, "aria-live": "polite", children: item.message }, index)))] })] }) }));
 }
 
 function CwDropdownFilter(props) {
@@ -4936,7 +5107,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
                             } }, props.ID))) })] }))] }));
 };
 
-var styles$a = {"container":"cw-tag-selector-module__container__-do8i","inputBox":"cw-tag-selector-module__inputBox__3NGz9 cw-choice-input-box-module__inputBox__gHY9d","disabled":"cw-tag-selector-module__disabled__vbud9 cw-choice-input-box-module__disabled__TFAnC","dropdown":"cw-tag-selector-module__dropdown__X6Dob cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-tag-selector-module__option__2UQ7g cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-tag-selector-module__optionFocused__8-lv8 cw-choice-dropdown-module__optionFocused__BYMxj","optionDot":"cw-tag-selector-module__optionDot__CdFlG cw-choice-dropdown-module__colorCircle__x7mI9","selectAll":"cw-tag-selector-module__selectAll__HyvMA"};
+var styles$a = {"container":"cw-tag-selector-module__container__-do8i","value":"cw-tag-selector-module__value__TDAy3","inputBox":"cw-tag-selector-module__inputBox__3NGz9 cw-choice-input-box-module__inputBox__gHY9d","disabled":"cw-tag-selector-module__disabled__vbud9 cw-choice-input-box-module__disabled__TFAnC","dropdown":"cw-tag-selector-module__dropdown__X6Dob cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-tag-selector-module__option__2UQ7g cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-tag-selector-module__optionFocused__8-lv8 cw-choice-dropdown-module__optionFocused__BYMxj","optionDot":"cw-tag-selector-module__optionDot__CdFlG cw-choice-dropdown-module__colorCircle__x7mI9","selectAll":"cw-tag-selector-module__selectAll__HyvMA"};
 
 /**
  * Multi-select input with chip tags and searchable dropdown.
@@ -5071,8 +5242,11 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
     // Keeping containerRef for any other potential use
     const direction = alignProps?.flexDirection ?? "row";
     const feedbackMessages = feedback ? (Array.isArray(feedback) ? feedback : [feedback]) : [];
-    return (jsxs("div", { ref: containerRef, className: `${styles$a.container}${className ? ` ${className}` : ""}`, style: style, id: id, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: `${styles$a.inputBox}${disabled ? ` ${styles$a.disabled}` : ""}`, ref: inputBoxRef, onClick: () => { if (!disabled)
-                            inputRef.current?.focus(); }, children: [selectedOptions.map(opt => (jsx(CwChip, { label: opt.label, colorScheme: opt.color ? "custom" : "info", customColor: opt.color, closable: !disabled, onClose: () => handleRemove(opt.value) }, opt.value))), jsx("input", { ref: inputRef, type: "text", value: search, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: selectedOptions.length === 0 ? placeholder : "", disabled: disabled, autoComplete: "off" }), value.length > 0 && !disabled && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: (e) => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChange([]); setSearch(""); setOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] })] }), feedbackMessages.map((fb, i) => (jsx("p", { className: "cw-input-info", "data-color": fb.type, children: fb.message }, i))), renderPanel((showSelectAll || filtered.length > 0) ? (jsxs("div", { ref: panelRef, className: styles$a.dropdown, style: panelStyle, children: [showSelectAll && !search && (jsxs("div", { className: styles$a.selectAll, onMouseDown: (e) => e.preventDefault(), onClick: handleToggleAll, children: [jsx("input", { type: "checkbox", checked: allSelected, readOnly: true, tabIndex: -1 }), allSelected ? "Deselect all" : "Select all"] })), jsx("ul", { ref: listRef, children: filtered.map((opt, idx) => (jsxs("li", { className: `${styles$a.option}${idx === focusedIndex ? ` ${styles$a.optionFocused}` : ""}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelect(opt.value), onMouseEnter: () => setFocusedIndex(idx), title: opt.tooltip, children: [opt.color && jsx("span", { className: styles$a.optionDot, style: { backgroundColor: opt.color } }), opt.label] }, opt.value))) })] })) : null)] }));
+    const feedbackId = useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = feedbackIds.join(" ") || undefined;
+    return (jsxs("div", { ref: containerRef, className: `${styles$a.container}${className ? ` ${className}` : ""}`, style: style, id: id, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { className: styles$a.value, children: [jsxs("div", { className: `${styles$a.inputBox}${disabled ? ` ${styles$a.disabled}` : ""}`, ref: inputBoxRef, onClick: () => { if (!disabled)
+                                    inputRef.current?.focus(); }, children: [selectedOptions.map(opt => (jsx(CwChip, { label: opt.label, colorScheme: opt.color ? "custom" : "info", customColor: opt.color, closable: !disabled, onClose: () => handleRemove(opt.value) }, opt.value))), jsx("input", { ref: inputRef, type: "text", value: search, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: selectedOptions.length === 0 ? placeholder : "", disabled: disabled, autoComplete: "off", "aria-describedby": describedBy }), value.length > 0 && !disabled && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: (e) => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChange([]); setSearch(""); setOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] }), feedbackMessages.map((fb, i) => (jsx("p", { id: feedbackIds[i], className: "cw-input-feedback", "data-color": fb.type, "aria-live": "polite", children: fb.message }, i)))] })] }), renderPanel((showSelectAll || filtered.length > 0) ? (jsxs("div", { ref: panelRef, className: styles$a.dropdown, style: panelStyle, children: [showSelectAll && !search && (jsxs("div", { className: styles$a.selectAll, onMouseDown: (e) => e.preventDefault(), onClick: handleToggleAll, children: [jsx("input", { type: "checkbox", checked: allSelected, readOnly: true, tabIndex: -1 }), allSelected ? "Deselect all" : "Select all"] })), jsx("ul", { ref: listRef, children: filtered.map((opt, idx) => (jsxs("li", { className: `${styles$a.option}${idx === focusedIndex ? ` ${styles$a.optionFocused}` : ""}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelect(opt.value), onMouseEnter: () => setFocusedIndex(idx), title: opt.tooltip, children: [opt.color && jsx("span", { className: styles$a.optionDot, style: { backgroundColor: opt.color } }), opt.label] }, opt.value))) })] })) : null)] }));
 }
 
 var styles$9 = {"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"};
@@ -6083,7 +6257,7 @@ function CwBtnCancel({ cw_btnOnclick, cw_btn_disabled, onClick, disabled, ...res
     return (jsx(CwButton, { ...rest, variant: "icon", icon: "cancel", color: "danger", onClick: onClick ?? cw_btnOnclick, disabled: disabled ?? cw_btn_disabled, title: "Cancel" }));
 }
 
-var styles$4 = {"pickerWrapper":"cw-pickers-base-module__pickerWrapper__Fb9Zo","pickerIcons":"cw-pickers-base-module__pickerIcons__dyd2-","pickerPopup":"cw-pickers-base-module__pickerPopup__dkxJo"};
+var styles$4 = {"value":"cw-pickers-base-module__value__BR67P","pickerWrapper":"cw-pickers-base-module__pickerWrapper__Fb9Zo","pickerIcons":"cw-pickers-base-module__pickerIcons__dyd2-","pickerPopup":"cw-pickers-base-module__pickerPopup__dkxJo"};
 
 /**
  * Renders a picker popup in a portal so it escapes overflow containers.
@@ -6140,6 +6314,9 @@ function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabl
     const feedbackMessages = feedback
         ? Array.isArray(feedback) ? feedback : [feedback]
         : [];
+    const feedbackId = useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = feedbackIds.join(" ") || undefined;
     const wrapperRef = useRef(null);
     const inputRef = useRef(null);
     const prevValueRef = useRef(undefined);
@@ -6320,11 +6497,11 @@ function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabl
         ...(maxDate ? [{ after: maxDate }] : []),
         ...(disabledMatcher ? [disabledMatcher] : []),
     ], [disabledDates, minDate, maxDate, disabledMatcher]);
-    return (jsxs("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsx(DayPicker, { mode: "single", selected: value || undefined, defaultMonth: defaultMonth || value || undefined, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
-                                            today: new Date(),
-                                        }, modifiersClassNames: {
-                                            today: "rdp-day-today",
-                                        } }), showTodayButton && (jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: todayLabel }) }))] }))] })] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+    return (jsx("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$4.value, children: [jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, "aria-describedby": describedBy, required: required, size: displayFormat.length }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsx(DayPicker, { mode: "single", selected: value || undefined, defaultMonth: defaultMonth || value || undefined, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
+                                                today: new Date(),
+                                            }, modifiersClassNames: {
+                                                today: "rdp-day-today",
+                                            } }), showTodayButton && (jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: todayLabel }) }))] }))] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] })] }) }));
 }
 
 var rangeStyles = {"rangeWrapper":"cw-range-picker-module__rangeWrapper__1nIVs","rangePopup":"cw-range-picker-module__rangePopup__E5jd1","rangeCalendarRow":"cw-range-picker-module__rangeCalendarRow__VTxi0","presetList":"cw-range-picker-module__presetList__INiLo","rangeError":"cw-range-picker-module__rangeError__qHMdi"};
@@ -6963,14 +7140,14 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
         }
         return undefined;
     }, [value]);
-    return (jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxs("div", { className: styles$4.pickerWrapper, children: [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' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxs("div", { className: styles$4.pickerWrapper, children: [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' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), renderPopup(jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, style: popupStyle, children: [jsxs("div", { className: rangeStyles.rangeCalendarRow, children: [showPresets && presetsToRender.length > 0 && (jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsx(DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, numberOfMonths: numberOfMonths, defaultMonth: defaultMonth || value?.from || undefined, modifiers: {
+    return (jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxs("div", { className: styles$4.pickerWrapper, children: [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, size: displayFormat.length, "data-focused": focusedInput === 'from' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxs("div", { className: styles$4.pickerWrapper, children: [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, size: displayFormat.length, "data-focused": focusedInput === 'to' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), renderPopup(jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, style: popupStyle, children: [jsxs("div", { className: rangeStyles.rangeCalendarRow, children: [showPresets && presetsToRender.length > 0 && (jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsx(DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, numberOfMonths: numberOfMonths, defaultMonth: defaultMonth || value?.from || undefined, modifiers: {
                                                 today: new Date(),
                                             }, modifiersClassNames: {
                                                 today: "rdp-day-today",
                                             } })] }), jsx("div", { role: "alert", "aria-live": "polite", className: rangeStyles.rangeError, children: rangeErrorMessage })] }))] })] }) }));
 }
 
-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"};
+var timeStyles = {"timePickerPopup":"cw-time-picker-module__timePickerPopup__BN63t","timePickerList":"cw-time-picker-module__timePickerList__E88pr","selected":"cw-time-picker-module__selected__qVnfL","field":"cw-time-picker-module__field__kPvGN","narrow":"cw-time-picker-module__narrow__Z7lCI"};
 
 const isMobileDevice = () => {
     return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
@@ -7132,7 +7309,7 @@ function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelP
         return (jsx("div", { className: `cw-timepicker cw-timepicker-native ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsx("div", { className: styles$4.pickerWrapper, children: 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 (jsx("div", { ref: containerRef, className: `cw-timepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [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 && (jsx("div", { className: styles$4.pickerIcons, children: value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", icon: "close", color: "neutral", onClick: handleClear, tabIndex: -1, "aria-label": "Clear time" })) : (jsx(CwIcon, { iconId: "clock" })) })), renderPopup(jsx("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${timeStyles.timePickerPopup}`, style: popupStyle, children: jsx("div", { className: timeStyles.timePickerList, children: timeOptions.map((time) => {
+    return (jsx("div", { ref: containerRef, className: `cw-timepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: `${styles$4.pickerWrapper} ${timeStyles.field}${showClear ? "" : ` ${timeStyles.narrow}`}`, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required, maxLength: 5 }), showClear && (jsx("div", { className: styles$4.pickerIcons, children: value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", icon: "close", color: "neutral", onClick: handleClear, tabIndex: -1, "aria-label": "Clear time" })) : (jsx(CwIcon, { iconId: "clock" })) })), renderPopup(jsx("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${timeStyles.timePickerPopup}`, style: popupStyle, children: jsx("div", { className: timeStyles.timePickerList, children: timeOptions.map((time) => {
                                     const isSelected = time === value;
                                     return (jsx("button", { ref: isSelected ? selectedItemRef : null, type: "button", className: isSelected ? timeStyles.selected : "", onClick: () => handleTimeSelect(time), children: time }, time));
                                 }) }) }))] })] }) }));
@@ -7798,6 +7975,9 @@ function CwDatePickerTemporal({ value, onChange, minDate, maxDate, disabledDates
     const feedbackMessages = feedback
         ? Array.isArray(feedback) ? feedback : [feedback]
         : [];
+    const feedbackId = useId();
+    const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
+    const describedBy = feedbackIds.join(" ") || undefined;
     const wrapperRef = useRef(null);
     const inputRef = useRef(null);
     const prevValueRef = useRef(undefined);
@@ -7904,11 +8084,11 @@ function CwDatePickerTemporal({ value, onChange, minDate, maxDate, disabledDates
     const defaultMonthJsDate = defaultMonth
         ? new Date(defaultMonth.year, defaultMonth.month - 1, 1)
         : selectedJsDate;
-    return (jsxs("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, required: required }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsx(DayPicker, { mode: "single", selected: selectedJsDate, defaultMonth: defaultMonthJsDate, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
-                                            today: new Date(),
-                                        }, modifiersClassNames: {
-                                            today: "rdp-day-today",
-                                        } }), showTodayButton && (jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: todayLabel }) }))] }))] })] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { className: "cw-input-info", "data-color": feedbackItem.type, children: feedbackItem.message }, index)))] }));
+    return (jsx("div", { ref: containerRef, className: `cw-datepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$4.value, children: [jsxs("div", { ref: wrapperRef, className: styles$4.pickerWrapper, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, placeholder: placeholder, onChange: handleInputChange, onBlur: handleInputBlur, onClick: handleInputClick, onKeyDown: handleInputKeyDown, disabled: disabled, "aria-describedby": describedBy, required: required, size: displayFormat.length }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear date" })) : (jsx(CwIcon, { iconId: "calendar" })) }), renderPopup(jsxs("div", { ref: popupRef, className: styles$4.pickerPopup, style: popupStyle, children: [jsx(DayPicker, { mode: "single", selected: selectedJsDate, defaultMonth: defaultMonthJsDate, onSelect: handleDaySelect, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
+                                                today: new Date(),
+                                            }, modifiersClassNames: {
+                                                today: "rdp-day-today",
+                                            } }), showTodayButton && (jsx("footer", { className: "cw-flex-row cw-align-right-center", children: jsx(CwButton, { type: "button", variant: "outline", onClick: handleTodayClick, text: todayLabel }) }))] }))] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] })] }) }));
 }
 
 // DateTimePickerState - immutable domain model for the Temporal date-time picker.
@@ -8646,1073 +8826,13 @@ function CwDateRangePickerTemporal({ value, onChange, minDate, maxDate, disabled
     const defaultMonthJsDate = defaultMonth
         ? new Date(defaultMonth.year, defaultMonth.month - 1, 1)
         : (value?.from ? plainDateToJsDate(value.from) : undefined);
-    return (jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxs("div", { className: styles$4.pickerWrapper, children: [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' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxs("div", { className: styles$4.pickerWrapper, children: [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' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), renderPopup(jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, style: popupStyle, children: [jsxs("div", { className: rangeStyles.rangeCalendarRow, children: [showPresets && presetsToRender.length > 0 && (jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsx(DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, numberOfMonths: numberOfMonths, defaultMonth: defaultMonthJsDate, locale: locale, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
+    return (jsx("div", { ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxs("div", { className: styles$4.pickerWrapper, children: [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, size: displayFormat.length, "data-focused": focusedInput === 'from' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.from && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearFrom, tabIndex: -1, "aria-label": "Clear from date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), jsx(CwIcon, { iconId: "arrow-right", size: "medium" }), jsxs("div", { className: styles$4.pickerWrapper, children: [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, size: displayFormat.length, "data-focused": focusedInput === 'to' }), jsx("div", { className: styles$4.pickerIcons, children: showClear && value?.to && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClearTo, tabIndex: -1, "aria-label": "Clear to date" })) : (jsx(CwIcon, { iconId: "calendar" })) })] }), renderPopup(jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${rangeStyles.rangePopup}`, style: popupStyle, children: [jsxs("div", { className: rangeStyles.rangeCalendarRow, children: [showPresets && presetsToRender.length > 0 && (jsx("div", { className: rangeStyles.presetList, children: presetsToRender.map((preset) => (jsx("button", { type: "button", onClick: (e) => handlePresetClick(preset, e), children: preset.label }, preset.key))) })), jsx(DayPicker, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, numberOfMonths: numberOfMonths, defaultMonth: defaultMonthJsDate, locale: locale, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
                                                 today: new Date(),
                                             }, modifiersClassNames: {
                                                 today: "rdp-day-today",
                                             } })] }), jsx("div", { role: "alert", "aria-live": "polite", className: rangeStyles.rangeError, children: rangeErrorMessage })] }))] })] }) }));
 }
 
-const ResourcesTitleList = ({ resources, canBePinned, includesPinned, onCrewPinning, onClickResourceContextMenu, ResourceTitleComponent, }) => {
-    const onClickContextMenu = useCallback((key, resource) => {
-        if (onClickResourceContextMenu) {
-            onClickResourceContextMenu(key, resource);
-        }
-    }, []);
-    return (jsx("td", { className: "resourceArea", style: { width: "100px" }, children: resources.map((r, _i) => (jsxs("div", { className: "resource CwelltFunctionDescription", style: { height: r.maxTop }, children: [(canBePinned || includesPinned) && (jsx(PinButton, { canBePinned: canBePinned, resource: r, onCrewPinning: onCrewPinning })), jsx(ResourceTitleComponent, { resource: r, handleOnClickResourceContextMenu: onClickContextMenu })] }, r.id.toString()))) }));
-};
-const PinButton = ({ canBePinned, resource, onCrewPinning }) => {
-    const buttonProps = canBePinned
-        ? {
-            id: "cbl_pinL",
-            onClick: () => onCrewPinning(resource, ""),
-            children: jsx("span", { className: "cwi-pin", style: { visibility: "visible" } }),
-        }
-        : {
-            id: "cbl_pinLess45deg",
-            onClick: () => onCrewPinning(resource, "remove"),
-            children: jsx("span", { className: "cwi-pinned cwi-pin", style: { visibility: "visible" } }),
-        };
-    return jsx("button", { className: "cw-button-icon cw-icon-pin", ...buttonProps });
-};
-
-const addMinutesToDateFromPx = (originalDate, leftPx, minutesPerPx) => {
-    const minutes = leftPx / minutesPerPx;
-    const datePlusMinutes = new Date(originalDate.getTime() + minutes * 60000);
-    return datePlusMinutes;
-};
-
-const doubleClickOnResource = (props, resource) => {
-    if (props.scheduler_handleDblClickOnResourceInScheduler) {
-        props.scheduler_handleDblClickOnResourceInScheduler(resource);
-    }
-};
-
-let CblDragAndDrop$1 = class CblDragAndDrop {
-    fromId;
-    toId;
-    data;
-    droppedOnDate;
-    resizeFromStart;
-    resizeFromEnd;
-    isCtrlKey;
-    constructor(fromId, toId, data, droppedOnDate = null, resizeFromStart = null, resizeFromEnd = null, isCtrlKey = null) {
-        this.fromId = fromId;
-        this.toId = toId;
-        this.data = data;
-        this.droppedOnDate = droppedOnDate;
-        this.resizeFromStart = resizeFromStart;
-        this.resizeFromEnd = resizeFromEnd;
-        this.isCtrlKey = isCtrlKey;
-    }
-};
-
-const BIRTHDATE = 15;
-const NOT_WORKING = 16;
-const REST_TIME = 10;
-const MAX_FLIGHT_DUTY_PERIOD = 11;
-const DUTY_REGULATION = 20;
-const unHandleableEvents = [REST_TIME, MAX_FLIGHT_DUTY_PERIOD, NOT_WORKING, DUTY_REGULATION];
-const getEventStyle = (event, reslTime) => {
-    const baseStyle = {
-        left: event.leftPx,
-        width: event.width,
-        top: event.top,
-        overflow: "hidden",
-        zIndex: event.isFullHeight ? 4 : 5,
-    };
-    if (event.data.eventType === BIRTHDATE) {
-        return {
-            ...baseStyle,
-            height: event.isFullHeight ? "100%" : "auto",
-            marginTop: event.isFullHeight ? -1 * event.top : 0,
-            pointerEvents: "none",
-            borderBottom: "solid 1px rgba(0, 0, 0, 0.4)",
-            backgroundColor: event.data.category.color || "orange",
-            display: "flex",
-            opacity: 0.3,
-            alignItems: "flex-end",
-        };
-    }
-    if ([REST_TIME, MAX_FLIGHT_DUTY_PERIOD, DUTY_REGULATION].includes(event.data.eventType)) {
-        return {
-            ...baseStyle,
-            zIndex: event.isFullHeight ? 4 : 6,
-            marginTop: event.isFullHeight ? -1 * event.top : 0,
-            borderRadius: "0px",
-            backgroundColor: event.data.category.color || "grey",
-            opacity: 0.3,
-            borderBottom: event.data.eventType === DUTY_REGULATION ? "solid 1px rgba(0, 0, 0, 0.4)" : "",
-        };
-    }
-    return {
-        ...baseStyle,
-        height: event.isFullHeight ? "100%" : "auto",
-        marginTop: event.isFullHeight ? -1 * event.top : 0,
-        borderRadius: reslTime <= 0.99 ? "3px" : "5px",
-        minWidth: reslTime <= 1.5 ? "5px" : "",
-        maxWidth: reslTime <= 1.5 ? "25px" : "",
-    };
-};
-const EventRender = ({ event, schedulerProps }) => {
-    const dateStart = new Date(event.data.start);
-    const dateEnd = new Date(event.data.end);
-    const reslTime = (dateEnd.getTime() - dateStart.getTime()) / 3600000;
-    const eventStyle = getEventStyle(event, reslTime);
-    const onClickEvent = (e) => {
-        if (!unHandleableEvents.includes(event.data.eventType)) {
-            e.stopPropagation();
-            const props = schedulerProps;
-            props.scheduler_handleCblEventClick.call(props.parent, event, schedulerProps.id);
-        }
-    };
-    const onRightClickEvent = (e) => {
-        if (!unHandleableEvents.includes(event.data.eventType)) {
-            e.stopPropagation();
-            const props = schedulerProps;
-            if (props.scheduler_handleCblEventClickRight) {
-                props.scheduler_handleCblEventClickRight.call(props.parent, event, schedulerProps.id);
-            }
-        }
-    };
-    const safeHandleDragStart = (e, isLeft, isRight) => {
-        if (!unHandleableEvents.includes(event.data.eventType)) {
-            handleDragStart(e, isLeft, isRight);
-        }
-    };
-    const handleDragStart = (e, isResizeFromStart, isResizeFromEnd) => {
-        if (!unHandleableEvents.includes(event.data.eventType)) {
-            [].forEach.call(document.querySelectorAll(".ant-tooltip"), function (el) {
-                el.style.visibility = "hidden";
-            });
-            // We don't know in which case is necessary
-            if (e.target !== e.currentTarget) {
-                // e.preventDefault();
-                return;
-            }
-            const isResize = isResizeFromStart || isResizeFromEnd;
-            const isAllowed = !event.isReadOnly && (isResize ? event.isResizable : event.isDraggable);
-            if (!isAllowed) {
-                e.preventDefault();
-                return;
-            }
-            const cblDragNDrop = new CblDragAndDrop$1(schedulerProps.id, null, [event], null, isResizeFromStart, isResizeFromEnd);
-            if (!isResize) {
-                e.dataTransfer.dropEffect = e.ctrlKey ? "copy" : "link";
-            }
-            e.dataTransfer.setData("data", JSON.stringify(cblDragNDrop));
-        }
-    };
-    const handleDoubleClick = (e) => {
-        if (!unHandleableEvents.includes(event.data.eventType)) {
-            e.preventDefault();
-            e.stopPropagation();
-            const props = schedulerProps;
-            props.scheduler_handleCblEventDoubleClick.call(props.parent, event, schedulerProps.id);
-        }
-    };
-    const onClickContextMenu = (e) => {
-        if (!unHandleableEvents.includes(event.data.eventType)) {
-            const props = schedulerProps;
-            if (props.scheduler_handleOnClickEventContextMenu) {
-                props.scheduler_handleOnClickEventContextMenu(e, event);
-            }
-        }
-    };
-    const renderBirthdayEvent = () => (jsxs("div", { className: `fc-timeline-event cwellt_timeline_event cwellt_event_bday ${event.selected ? "cblEventSelected" : ""}`, style: eventStyle, children: [jsx("span", { className: "cwi-icons cwi-birthday", style: { visibility: "visible" } }), event.data.subject && jsx("span", { style: { lineHeight: "1em" }, children: event.data.subject })] }, event.id));
-    const renderRegularEvent = () => (jsxs("div", { draggable: ![10, 11, 16, 20, 21].includes(event.data.eventType), className: "fc-timeline-event cwellt_timeline_event " +
-            (event.selected === true ? "cblEventSelected " : "") +
-            (event.data.eventType === REST_TIME ||
-                event.data.eventType === MAX_FLIGHT_DUTY_PERIOD ||
-                event.data.eventType === DUTY_REGULATION
-                ? " cwellt_event_bhnd_appt "
-                : " "), style: eventStyle, onClick: onClickEvent, onContextMenu: onRightClickEvent, onDragStart: (e) => safeHandleDragStart(e, false, false), onDoubleClick: handleDoubleClick, children: [schedulerProps.scheduler_handleCblEventResize &&
-                !event.isReadOnly &&
-                !unHandleableEvents.includes(event.data.eventType) && (jsx("span", { draggable: true, onDragStart: (e) => handleDragStart(e, true, false), style: {
-                    position: "absolute",
-                    cursor: "e-resize",
-                    zIndex: 10,
-                    left: "0",
-                    border: "solid 1px rgba(46,49,49,0.5)",
-                }, children: "\u200B" })), jsx(schedulerProps.cblEventComp, { cblEvent: event, handleOnClickEventContextMenu: onClickContextMenu }, event.id), schedulerProps.scheduler_handleCblEventResize &&
-                !event.isReadOnly &&
-                !unHandleableEvents.includes(event.data.eventType) && (jsx("span", { draggable: true, onDragStart: (e) => handleDragStart(e, false, true), style: {
-                    position: "absolute",
-                    right: "0",
-                    cursor: "e-resize",
-                    zIndex: 10,
-                    border: "solid 1px rgba(46,49,49,0.5)",
-                    marginTop: "-25px",
-                }, children: "\u200B" }))] }, event.id));
-    const render = event.data.eventType === BIRTHDATE ? renderBirthdayEvent() : renderRegularEvent();
-    return render;
-};
-
-const onDropEventToResource = (props, cblDragNDrop, resource) => {
-    props.scheduler_handleOnDropCblEventsOnResource.call(props.parent, cblDragNDrop, resource);
-};
-
-const isAllowedToMove = (data, resData, cblDragNDrop) => {
-    if (data?.eventType !== 1) {
-        return true;
-    }
-    const allowedMoves = [
-        { from: "acftsScheduler", to: "flightsPairingsScheduler" },
-        { from: "flightsScheduler", to: "crewAssignmentsScheduler" },
-        { from: "opstoolScheduler", to: "opstoolScheduler" },
-        { from: "opstoolScheduler", to: "opstoolSchedulerVirtual" },
-        { from: "opstoolSchedulerVirtual", to: "opstoolScheduler" },
-        { from: "opstoolSchedulerVirtual", to: "opstoolSchedulerVirtual" },
-        { from: "vacationsScheduler", to: "vacationsScheduler" }
-    ];
-    const crewControllAllowedMove = allowedMoves.some(move => move.from === cblDragNDrop.fromId && move.to === cblDragNDrop.toId);
-    if (crewControllAllowedMove) {
-        return true;
-    }
-    return data.Crew !== resData.Crewmember_Id;
-};
-
-const OnDrop = ({ e, resource, id, contentArea, state, schedulerProps }) => {
-    e.dataTransfer.dropEffect = "move";
-    const cblDragNDrop = JSON.parse(e.dataTransfer.getData("data"));
-    if (!cblDragNDrop.data || !cblDragNDrop.data[0]) {
-        return;
-    }
-    cblDragNDrop.toId = id;
-    const obj = cblDragNDrop.data[0];
-    cblDragNDrop.isCtrlKey = e.ctrlKey;
-    const isResizeEvent = cblDragNDrop.resizeFromStart === true || cblDragNDrop.resizeFromEnd === true;
-    if (isResizeEvent) {
-        // Resize
-        if (obj.data === undefined || obj.data.eventType === 1) {
-            return;
-        }
-        const _eventX = e.clientX;
-        const _caLeft = contentArea?.getBoundingClientRect()?.left ?? 0;
-        const leftPos = _eventX - _caLeft;
-        let droppedDate = addMinutesToDateFromPx(schedulerProps.startDate, leftPos, state.minutePx);
-        if (cblDragNDrop.resizeFromEnd === true) {
-            const eventStart = new Date(Date.parse(obj.start));
-            droppedDate = droppedDate < eventStart ? eventStart : droppedDate;
-        }
-        if (cblDragNDrop.resizeFromStart === true) {
-            const eventEnd = new Date(Date.parse(obj.end));
-            // 3 hours before is the minimun size in the backend
-            eventEnd.setHours(eventEnd.getHours() - 3);
-            droppedDate = droppedDate > eventEnd ? eventEnd : droppedDate;
-        }
-        cblDragNDrop.droppedOnDate = droppedDate;
-        schedulerProps.scheduler_handleCblEventResize?.call(schedulerProps.parent, cblDragNDrop);
-        return;
-    }
-    // Drag & Drop
-    if (!isAllowedToMove(obj.data, resource.data, cblDragNDrop)) {
-        return;
-    }
-    const d = e.clientX - (contentArea?.getBoundingClientRect()?.left ?? 0);
-    const date = new Date(schedulerProps.startDate.getTime() + (d / state.minutePx) * 60000);
-    cblDragNDrop.droppedOnDate = date;
-    onDropEventToResource(schedulerProps, cblDragNDrop, resource);
-};
-
-const onDragOver = (e) => {
-    if (e.ctrlKey === true) {
-        e.dataTransfer.dropEffect = "copy";
-    }
-    else {
-        e.dataTransfer.dropEffect = "link";
-    }
-    e.preventDefault();
-};
-
-const arePropsEqual = (prevProps, nextProps) => {
-    return prevProps.res.events === nextProps.res.events && prevProps.isInViewport === nextProps.isInViewport;
-};
-const ResourceRender = memo(({ res, schedulerProps, contentArea, state }) => {
-    return (jsx("div", { style: {
-            backgroundColor: "#F9F8F8",
-            height: res.maxTop,
-            width: "100%",
-            position: "relative",
-            borderBottom: "1px solid rgb(255,255,255)",
-        }, onDragOver: (e) => onDragOver(e), onDrop: (e) => {
-            OnDrop({
-                e,
-                resource: res,
-                id: schedulerProps.id,
-                contentArea,
-                state,
-                schedulerProps,
-            });
-        }, className: "cwellt_divRow_schContent", children: res.events.map((evnt) => (jsx(EventRender, { event: evnt, schedulerProps: schedulerProps }, evnt.id))) }, res.id));
-}, arePropsEqual);
-
-const ResourceListRender = ({ resources, schedulerProps, state, contentArea, 
-// onClickContextMenu,
-crewAssignmentSchedulerContextMenu, }) => {
-    return (jsx(Fragment$1, { children: resources.map((r, _i) => (jsx(CwAnchoredMenu, { placement: "bottom", onContextMenu: (e) => {
-                // Dirty temporal solution to remove ANT design, this can be killed when this scheduler is deprecated
-                const leftPos = e.currentTarget.getBoundingClientRect().left -
-                    (contentArea?.getBoundingClientRect()?.left ?? 0) -
-                    window.scrollX;
-                const calculatedDatetime = addMinutesToDateFromPx(schedulerProps.startDate, leftPos, state.minutePx);
-                r.__contextMenuDatetime = calculatedDatetime;
-            }, options: crewAssignmentSchedulerContextMenu?.map(m => ({
-                key: m.key,
-                label: (jsxs(Fragment, { children: [jsx("span", { className: m.icon, style: { color: m.color } }), jsx("span", { children: m.text })] }))
-            })) ?? [], onSelect: (key) => {
-                const datetime = r.__contextMenuDatetime ?? new Date();
-                if (schedulerProps.scheduler_handleOnClickContextMenuResource) {
-                    schedulerProps.scheduler_handleOnClickContextMenuResource(datetime, r, key, schedulerProps.id);
-                }
-            }, children: jsx("span", { onDoubleClick: () => doubleClickOnResource(schedulerProps, r), id: schedulerProps.id + "_" + r.id, children: jsx(ResourceRender, { res: r, schedulerProps: schedulerProps, contentArea: contentArea, state: state, isInViewport: r.isInViewport }, r.id) }) }, r.id))) }));
-};
-
-const TimeLine$1 = ({ id, toolTipTitle, marginLeft, color = "rgba(255,0,0,.6)", pixels = 2, height = "100%", zIndex = 1, }) => {
-    return (jsx(CwTooltipNew, { content: toolTipTitle, position: "top", children: jsx("div", { id: id, style: {
-                borderLeft: `${pixels}px solid ${color}`,
-                marginLeft: marginLeft,
-                width: "0px",
-                height: height,
-                position: "absolute",
-                zIndex: zIndex,
-            } }) }));
-};
-
-const SchedulerContentArea = ({ now, showTimeline, timeLineLeftPx, timeSeparatorLeftPx, resources, scheduler, contextMenuContents, onEmptyClick, setContentArea, onClickContextMenu, }) => {
-    return (jsxs("td", { className: "contentArea", style: { width: "100%", overflow: "hidden", position: "relative" }, ref: (reference) => {
-            if (reference) {
-                setContentArea(reference);
-            }
-        }, children: [showTimeline && (jsx(TimeLine$1, { id: scheduler.props.id + "_timeline", marginLeft: timeLineLeftPx, zIndex: 8, toolTipTitle: Temporal.PlainTime.from({
-                    hour: now.getHours(),
-                    minute: now.getMinutes(),
-                }).toString({ smallestUnit: "minute" }) })), timeSeparatorLeftPx.map((pixels) => {
-                return jsx(TimeLine$1, { marginLeft: pixels, color: "rgba(255,255,255,0.7)" });
-            }), jsx("span", { onClick: () => {
-                    if (onEmptyClick) {
-                        onEmptyClick(scheduler.props.id);
-                    }
-                }, children: jsx(ResourceListRender, { resources: resources, state: scheduler.state, schedulerProps: scheduler.props, contentArea: scheduler.contentArea, onClickContextMenu: onClickContextMenu, crewAssignmentSchedulerContextMenu: contextMenuContents }) })] }));
-};
-
-const daysBetweenTwoDates = (date1, date2) => {
-    const diff = Math.abs(date1.getTime() - date2.getTime());
-    let diffDays = 0;
-    const startOffset = Math.abs(date1.getTimezoneOffset());
-    const endOffset = Math.abs(date2.getTimezoneOffset());
-    // Summer: +1 -> +2, true
-    // Winter: +2 -> -1, false
-    if (startOffset > endOffset) {
-        diffDays = Math.floor(diff / (1000 * 3600 * 24));
-    }
-    else {
-        diffDays = Math.ceil(diff / (1000 * 3600 * 24));
-    }
-    return diffDays;
-};
-
-const calculateDivisionType = (start, end) => {
-    const diffDays = daysBetweenTwoDates(start, end);
-    if (diffDays <= 15) {
-        return "d";
-    }
-    else if (diffDays <= 30) {
-        return "w";
-    }
-    else {
-        return "m";
-    }
-};
-
-const getMonthHeaderData = (dates, maxWidth) => {
-    if (dates.length === 0)
-        return [];
-    const dayWidth = maxWidth / dates.length;
-    const ranges = getMonthRanges(dates);
-    return ranges.map((range) => {
-        return {
-            monthFormatted: range.start.getMonth() + 1 + "." + range.start.getFullYear(),
-            width: dayWidth * range.daysLong,
-        };
-    });
-};
-const getMonthRanges = (dates) => {
-    const firstDay = dates[0];
-    const lastDay = dates[dates.length - 1];
-    let currentDate = new Date(firstDay);
-    const ranges = [];
-    while (currentDate <= lastDay) {
-        const rangeStart = new Date(currentDate);
-        let rangeEnd = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
-        if (rangeEnd >= lastDay) {
-            rangeEnd = lastDay;
-        }
-        ranges.push({
-            start: rangeStart,
-            daysLong: getDaysBetweenDates(rangeStart, rangeEnd),
-        });
-        currentDate = new Date(rangeEnd.getFullYear(), rangeEnd.getMonth() + 1, 1);
-    }
-    return ranges;
-};
-const getDaysBetweenDates = (startDate, endDate) => {
-    const timeDifference = endDate.getTime() - startDate.getTime();
-    return Math.floor(timeDifference / (1000 * 60 * 60 * 24)) + 1;
-};
-
-const getWeekHeaderDataFromWeekRange = (weekRange, maxWidth, dateFormatter) => weekRange.map(week => {
-    const numberOfDaysInScheduler = weekRange
-        .flatMap(element => {
-        return element.days;
-    })
-        .reduce((el1, el2) => {
-        return el1 + el2;
-    });
-    return {
-        formattedString: getStringForWeekRange(week, dateFormatter),
-        width: getWidthForWeekRange(maxWidth, week.days, numberOfDaysInScheduler)
-    };
-});
-const getStringForWeekRange = (weekRange, dateFormatter) => weekRange.days == 1
-    ? dateFormatter(weekRange.start)
-    : `${dateFormatter(weekRange.start)} - ${dateFormatter(weekRange.end)}`;
-const getWidthForWeekRange = (maxWidth, weekDays, monthDays) => {
-    const dayWidth = maxWidth / monthDays;
-    return dayWidth * weekDays;
-};
-
-// stringRange: `${formatter(date)} - ${formatter(end)}`,
-const listOfDatesToWeekRangeList = (dates) => {
-    if (dates.length === 0) {
-        return [];
-    }
-    const datesToReturn = [];
-    dates.forEach((date, index) => {
-        const dayOfWeek = date.getDay();
-        const isFirstDay = index === 0;
-        const isLastDay = index === dates.length - 1;
-        const isSunday = dayOfWeek === 0;
-        const isMonday = dayOfWeek === 1;
-        if (isFirstDay && !isSunday) {
-            datesToReturn.push(createWeekRange(date, 8 - dayOfWeek));
-            return;
-        }
-        if (isLastDay && !isSunday) {
-            if (!isMonday) {
-                datesToReturn.pop();
-            }
-            const firstOfWeek = getFirstDayOfWeek(date);
-            datesToReturn.push(createWeekRange(firstOfWeek, dayOfWeek));
-            return;
-        }
-        if (isMonday) {
-            datesToReturn.push(createWeekRange(date, 7));
-            return;
-        }
-        // this is because sunday is 0
-        if (isFirstDay && isSunday) {
-            datesToReturn.push(createWeekRange(date, 1));
-            return;
-        }
-    });
-    return datesToReturn;
-};
-const createWeekRange = (start, days) => {
-    const end = new Date(start);
-    end.setDate(end.getDate() + days - 1);
-    return {
-        days,
-        start,
-        end,
-        isShortWeek: days < 7
-    };
-};
-const getFirstDayOfWeek = (date) => {
-    const currentDate = new Date(date);
-    const dayOfWeek = currentDate.getDay();
-    // dayOfWeek 0 == (Sunday)
-    const diffToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-    // Set the date to the first day of the week
-    currentDate.setDate(currentDate.getDate() - diffToMonday);
-    return currentDate;
-};
-
-const DayHeader = ({ index, text, width, headerType }) => {
-    const isFirstDay = index == 0;
-    return (jsx("td", { style: {
-            display: "inline-block",
-            fontSize: "10px",
-            width: width,
-            maxWidth: width,
-        }, id: headerType + index, children: jsx("span", { className: isFirstDay ? "cwelltFirstDate_desc" : "", children: text }) }));
-};
-
-const MonthHeader = ({ index, text, width, headerType }) => {
-    return (jsx("td", { style: {
-            display: "inline-block",
-            fontSize: "10px",
-            width: width,
-            maxWidth: width,
-        }, id: headerType + index, children: jsx("span", { children: text }) }));
-};
-
-const WeekHeader = ({ index, text, width, headerType }) => {
-    const isFirstDay = index == 0;
-    return (jsx("td", { style: {
-            display: "inline-block",
-            fontSize: "10px",
-            width: width,
-            maxWidth: width,
-        }, id: headerType + index, children: jsx("span", { className: isFirstDay ? "cwelltFirstDate_desc" : "", style: { whiteSpace: "nowrap" }, children: text }) }));
-};
-
-const DaysHeader = ({ days, divisionType, maxWidth, headerType }) => {
-    let headerToDraw = [];
-    const filteredDays = days.filter((date) => {
-        return date.getHours() === 0;
-    });
-    const dateFormatter = (date) => {
-        return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
-    };
-    switch (divisionType) {
-        case "d":
-            {
-                headerToDraw = filteredDays.map((date, index) => {
-                    return (jsx(DayHeader, { text: dateFormatter(date), index: index, width: maxWidth / filteredDays.length, headerType: headerType }, index));
-                });
-            }
-            break;
-        case "w":
-            {
-                const weekRanges = listOfDatesToWeekRangeList(filteredDays);
-                headerToDraw = getWeekHeaderDataFromWeekRange(weekRanges, maxWidth, dateFormatter).map((week, index) => {
-                    return (jsx(WeekHeader, { index: index, text: week.formattedString, width: week.width, headerType: headerType }, index));
-                });
-            }
-            break;
-        case "m":
-            {
-                const monthData = getMonthHeaderData(filteredDays, maxWidth);
-                headerToDraw = monthData.map(({ monthFormatted, width }, index) => (jsx(MonthHeader, { index: index, text: monthFormatted, width: width, headerType: headerType }, index)));
-            }
-            break;
-    }
-    return jsx("tr", { className: "cwelltSchRowDate", children: headerToDraw });
-};
-
-function formatHHmm(date) {
-    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    const zdt = Temporal.Instant.fromEpochMilliseconds(date.getTime()).toZonedDateTimeISO(timeZone);
-    return `${zdt.hour.toString().padStart(2, "0")}:${zdt.minute.toString().padStart(2, "0")}`;
-}
-const getFormattedTimeForHeader = (calculatedDivType, calculatedDivision, timeHeader) => {
-    let showDate = "";
-    switch (calculatedDivType) {
-        case "d":
-            switch (calculatedDivision) {
-                case 8:
-                    showDate =
-                        timeHeader.getHours() === 0 ||
-                            timeHeader.getHours() === 3 ||
-                            timeHeader.getHours() === 6 ||
-                            timeHeader.getHours() === 9 ||
-                            timeHeader.getHours() === 12 ||
-                            timeHeader.getHours() === 15 ||
-                            timeHeader.getHours() === 18 ||
-                            timeHeader.getHours() === 21
-                            ? formatHHmm(timeHeader)
-                            : "";
-                    break;
-                case 3:
-                    showDate =
-                        timeHeader.getHours() === 0 || timeHeader.getHours() === 8 || timeHeader.getHours() === 16
-                            ? formatHHmm(timeHeader)
-                            : "";
-                    break;
-                case 2:
-                    showDate =
-                        timeHeader.getHours() === 0 || timeHeader.getHours() === 12 ? formatHHmm(timeHeader) : "";
-                    break;
-            }
-            break;
-        case "m":
-            showDate = timeHeader.getHours() === 0 ? timeHeader.getDate().toString() : "";
-            break;
-        case "w":
-            showDate = timeHeader.getHours() === 0 ? timeHeader.getDate().toString() : "";
-            break;
-    }
-    return {
-        text: showDate,
-        isWeekend: timeHeader.getDay() === 6 || timeHeader.getDay() === 0,
-    };
-};
-
-const calculateDivisions = (start, end) => {
-    const diffDays = daysBetweenTwoDates(start, end);
-    if (diffDays <= 3) {
-        return 8;
-    }
-    else if (diffDays < 8) {
-        return 3;
-    }
-    else if (diffDays <= 15) {
-        return 2;
-    }
-    else {
-        return 1;
-    }
-};
-
-const TimeHeader = ({ isWeekend, index, text, width, header }) => {
-    if (text === "") {
-        return;
-    }
-    const commonStyles = {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "left",
-        fontSize: "10px",
-        width: width,
-        maxWidth: width,
-        height: "30px",
-        borderLeft: "1px solid white",
-        background: isWeekend ? "#cbc9c9" : "",
-        color: "#000000d9",
-        fontWeight: 700,
-    };
-    return (jsx("td", { style: commonStyles, id: `${header}Time${index}`, children: jsx("span", { style: { paddingLeft: "8px" }, children: text }) }, `t${index}`));
-};
-
-const TimeHeaderRow = ({ timeHeaders, startDate, endDate, maxWidth, header }) => {
-    const calculatedDivision = calculateDivisions(startDate, endDate);
-    const calculatedDivType = calculateDivisionType(startDate, endDate);
-    const formattedHeaders = timeHeaders.map((th) => {
-        return getFormattedTimeForHeader(calculatedDivType, calculatedDivision, th);
-    });
-    const filteredHeaders = formattedHeaders.filter((element) => element.text !== "");
-    return (jsx("tr", { className: "cwelltSchRowTime", style: { height: "30px" }, children: filteredHeaders.map(({ text, isWeekend }, index) => {
-            return (jsx(TimeHeader, { isWeekend: isWeekend, index: index, text: text, width: maxWidth / filteredHeaders.length, header: header }, index));
-        }) }));
-};
-
-const SchedulerTimeLine = ({ maxPx, hoursList, startDate, endDate, pxPerHour, headerName, }) => {
-    return (jsx("table", { className: "content-area cwelltSchTable", style: { width: maxPx }, children: jsxs("tbody", { style: { width: "100%", borderSpacing: 0 }, className: "content-area cwelltSchTbody", children: [jsx(DaysHeader, { days: hoursList, divisionType: calculateDivisionType(startDate, endDate), maxWidth: pxPerHour * hoursList.length, headerType: headerName ?? "schedulerDateHeader" }), jsx(TimeHeaderRow, { timeHeaders: hoursList, startDate: startDate, endDate: endDate, maxWidth: pxPerHour * hoursList.length, header: headerName ?? "schedulerTimeHeader" })] }) }));
-};
-
-const SchedulerHeader$1 = ({ timelineProps, descriptionColumn }) => {
-    const { maxPx, hoursList, startDate, endDate, pxPerHour, headerName } = timelineProps;
-    return (jsx("thead", { className: "cwellt_fc_header_scheduler", style: { position: "sticky", zIndex: 9 }, children: jsxs("tr", { className: "cwellt_fc_header_row", children: [jsxs("td", { className: "border", style: {
-                        position: "sticky",
-                        top: 0,
-                        backgroundColor: "white",
-                        width: "100px",
-                    }, children: [jsx("div", { style: {
-                                display: "flex",
-                                height: "30px",
-                                alignItems: "center",
-                                width: "150px",
-                            }, children: jsx("label", { children: headerName }) }), jsx("div", { style: {
-                                display: "flex",
-                                height: "30px",
-                                alignItems: "center",
-                                background: "rgba(0, 0, 0, 0.04)",
-                            }, children: jsx("span", { children: descriptionColumn }) })] }), jsx("td", { style: {
-                        position: "sticky",
-                        top: 0,
-                        zIndex: 6,
-                        backgroundColor: "white",
-                    }, children: jsx(SchedulerTimeLine, { maxPx: maxPx, hoursList: hoursList, pxPerHour: pxPerHour, startDate: startDate, endDate: endDate, headerName: headerName }) })] }) }));
-};
-
-const daysBetweenTwoDatesIncludingBoth = (date1, date2) => {
-    const diff = Math.abs(date1.getTime() - date2.getTime());
-    const diffDays = diff / (1000 * 3600 * 24);
-    return diffDays;
-};
-
-const getUtcToday = () => {
-    const now = new Date();
-    const userTimezoneOffset = now.getTimezoneOffset() * 60000;
-    const nowUtc = new Date(now.getTime() + userTimezoneOffset);
-    return nowUtc;
-};
-
-const filterEvents = (events, start, end, id, module = undefined) => {
-    const datesCollide = (event) => event.start <= end && event.end >= start;
-    let eventsFiltered = events.filter(event => datesCollide(event));
-    if (id !== "flightWatchScheduler") {
-        eventsFiltered = sortByDate(eventsFiltered);
-    }
-    if (id !== "crewAssignmentsScheduler" && id !== "vacationsScheduler") {
-        return eventsFiltered;
-    }
-    eventsFiltered = setNotFullHeightEventsFirst(eventsFiltered);
-    if (module === "CrewControl") {
-        eventsFiltered = removeDuplicated(eventsFiltered, "Crew_Id");
-    }
-    if (module === "CrewScheduling") {
-        eventsFiltered = removeDuplicated(eventsFiltered, "AssignmentID");
-    }
-    if (module === "CrewSchedulingVacations") {
-        eventsFiltered = removeDuplicated(eventsFiltered, "ID");
-    }
-    return eventsFiltered;
-};
-const sortByDate = (events) => events.sort((a, b) => +new Date(a.start) - +new Date(b.start));
-const removeDuplicated = (events, key) => {
-    return events.filter((obj, index, self) => index === self.findIndex(o => o.data[key] === obj.data[key] && o.data.subject === obj.data.subject));
-};
-const setNotFullHeightEventsFirst = (events) => {
-    const notFullHeight = [];
-    const isFullHeight = [];
-    events.forEach(element => {
-        element.isFullHeight ? notFullHeight.push(element) : isFullHeight.push(element);
-    });
-    return notFullHeight.concat(isFullHeight);
-};
-
-const compareStrings = (str1, str2) => {
-    if (str1 > str2)
-        return 1;
-    if (str1 < str2)
-        return -1;
-    return 0;
-};
-
-const filterResources = (module, resourceName, resources, groupByFunction, endDate, startDate, scheduleName) => {
-    if ((module === "CrewControl" || module === "CrewScheduling" || module === "CrewSchedulingVacations") &&
-        resourceName === "Employees") {
-        resources = resources.filter(c => (c.data.Eintritt === null || (new Date(c.data.Eintritt) <= endDate)) && (c.data.Austritt === null || (new Date(c.data.Austritt) >= startDate)));
-    }
-    if (scheduleName === "crewPinnedScheduler" || (module === "CrewControl" || module === "CrewScheduling") && resourceName === "Employees") {
-        const sortKey = (groupByFunction || scheduleName === "crewPinnedScheduler") ? "mainFunction" : "C3_LC";
-        resources = resources.sort((a, b) => compareStrings(a.data[sortKey], b.data[sortKey]));
-    }
-    return resources;
-};
-
-const heightScheduler = (resources, visibleRows, isPinnerScheduler) => {
-    if (resources.length <= 0) {
-        return 100;
-    }
-    const realVisibleRows = visibleRows > resources.length ? resources.length : visibleRows;
-    const rowsHeight = resources.slice(0, realVisibleRows).map((row) => {
-        return row.maxTop;
-    });
-    const height = rowsHeight.reduce((sum, row) => {
-        return sum + row;
-    }, 0);
-    const headerHeight = isPinnerScheduler ? 0 : 60;
-    return height + headerHeight;
-};
-
-const getLeftPixels = (eventStart, scheduleStart, dayPx) => {
-    if (scheduleStart >= eventStart)
-        return 0;
-    return daysBetweenTwoDatesIncludingBoth(scheduleStart, eventStart) * dayPx;
-};
-const getEventWithSize = (event, schedulerStart, dayPx) => {
-    const eventStartBeforeScheduleStart = event.start.getTime() < schedulerStart.getTime();
-    const lengthOfEvent = daysBetweenTwoDatesIncludingBoth(event.start, event.end);
-    const daysUntilSchedulerStart = daysBetweenTwoDatesIncludingBoth(event.start, schedulerStart);
-    const daysLong = eventStartBeforeScheduleStart ? lengthOfEvent - daysUntilSchedulerStart : lengthOfEvent;
-    // we want minimum of 8 px
-    const eventMinSize = 8;
-    const newEvent = {
-        ...event,
-        leftPx: getLeftPixels(event.start, schedulerStart, dayPx),
-        width: Math.max(daysLong * dayPx, eventMinSize),
-    };
-    return newEvent;
-};
-
-const checkIfSlotAvailable = (events, event) => {
-    if (events.length == 0)
-        return true;
-    const collide = events.some(existent => {
-        return !(existent.end <= event.start || event.end <= existent.start) && !existent.isFullHeight;
-    });
-    return !collide;
-};
-
-const getEventsInInnerRows = (res, eventHeight, dayPx, start) => {
-    let maxTop = 0;
-    const tops = [];
-    tops[0] = new Array();
-    res.events
-        .map((e) => {
-        return getEventWithSize(e, start, dayPx);
-    })
-        .forEach((event, i) => {
-        if (i === 0 || event.isFullHeight) {
-            event.top = 0;
-            tops[0].push(event);
-        }
-        else {
-            let found = false;
-            for (let j = 0; j < tops.length && found === false; j++) {
-                found = checkIfSlotAvailable(tops[j], event);
-                if (found === true || event.isFullHeight) {
-                    event.top = j * eventHeight;
-                    tops[j].push(event);
-                    break;
-                }
-            }
-            if (found === false && !event.isFullHeight) {
-                maxTop++;
-                tops[maxTop] = new Array();
-                event.top = maxTop * eventHeight;
-                tops[maxTop].push(event);
-            }
-            else {
-                // This is for flightwatch
-                if (found === true && event.data.order === 2 && maxTop < 1) {
-                    maxTop++;
-                    tops[maxTop] = new Array();
-                    event.top = maxTop * eventHeight;
-                    tops[maxTop].push(event);
-                    maxTop--;
-                }
-            }
-        }
-    });
-    return tops;
-};
-
-const getTimeHeaders = (startDate, endDate) => {
-    const dateArray = new Array();
-    const currentDate = new Date(startDate);
-    const startOffset = Math.abs(startDate.getTimezoneOffset());
-    const endOffset = Math.abs(endDate.getTimezoneOffset());
-    // Summer: +1 -> +2, true
-    // Winter: +2 -> -1, false
-    const offsetSummerWinter = startOffset < endOffset;
-    if (offsetSummerWinter === true) {
-        while (currentDate < endDate) {
-            if (dateArray.length > 0) {
-                const lastPosition = dateArray[dateArray.length - 1];
-                const differenceHours = currentDate.getHours() - lastPosition.getHours();
-                if (differenceHours === 1 || differenceHours < 0) {
-                    dateArray.push(new Date(currentDate));
-                }
-                else if (differenceHours > 1) {
-                    dateArray.push(new Date(currentDate.getHours() - 1));
-                    dateArray.push(new Date(currentDate));
-                }
-            }
-            else {
-                dateArray.push(new Date(currentDate));
-            }
-            currentDate.setHours(currentDate.getHours() + 1);
-        }
-    }
-    else {
-        while (currentDate < endDate) {
-            dateArray.push(new Date(currentDate));
-            currentDate.setHours(currentDate.getHours() + 1);
-        }
-    }
-    return dateArray;
-};
-
-class CwScheduler extends Component {
-    contentArea;
-    calculateMaxPx = () => {
-        const mainElement = document.body;
-        const mainRect = mainElement.getBoundingClientRect();
-        return Math.floor(mainRect.width - 190);
-    };
-    constructor(props) {
-        super(props);
-        const maxPx = this.calculateMaxPx();
-        const timeHeaders = getTimeHeaders(props.startDate, props.endDate);
-        const dayPx = maxPx / Math.floor(daysBetweenTwoDates(props.startDate, props.endDate));
-        const hourPx = dayPx / 24;
-        const minutePx = dayPx / 1440;
-        window?.addEventListener("resize", this.handleResize);
-        const divisions = calculateDivisions(this.props.startDate, this.props.endDate);
-        const divisionsLeftPx = timeHeaders
-            .filter((_, index) => {
-            return index != 0 && index % (24 / divisions) == 0;
-        })
-            .map((date) => {
-            const daysDiff = daysBetweenTwoDatesIncludingBoth(date, props.startDate);
-            const pixels = daysDiff * 24 * hourPx;
-            return pixels;
-        });
-        this.state = {
-            maxPx: maxPx,
-            dayPx: dayPx,
-            hourPx: hourPx,
-            minutePx: minutePx,
-            timeHeaders: timeHeaders,
-            divisionsLeftPx: divisionsLeftPx,
-            eventHeight: 30,
-            resources: props.resources,
-            lineStyle: 0,
-            nowUtc: getUtcToday(),
-            division: divisions,
-            divisionType: "",
-            pinnedResources: props.pinnedResources ? props.pinnedResources : [],
-            selectedEvents: [],
-            showConsoleLogs: false, // Change to false to not show the console.log(...)
-        };
-    }
-    handleResize = () => {
-        const maxPx = this.calculateMaxPx();
-        const days = Math.floor(daysBetweenTwoDates(this.props.startDate, this.props.endDate));
-        const dayPx = maxPx / days;
-        const hourPx = dayPx / 24;
-        const updated = { ...this.state, maxPx: maxPx, hourPx: hourPx, dayPx: dayPx };
-        this.setState(updated);
-    };
-    objectsEqual = (o1, o2) => {
-        Object.keys(o1).length === Object.keys(o2).length && Object.keys(o1).every((p) => o1[p] === o2[p]);
-    };
-    objectsEqualDeep = (o1, o2) => typeof o1 === "object" && Object.keys(o1).length > 0
-        ? Object.keys(o1).length === Object.keys(o2).length &&
-            Object.keys(o1).every((p) => this.objectsEqual(o1[p], o2[p]))
-        : o1 === o2;
-    arraysEqual = (a1, a2) => a1.length === a2.length && a1.every((o, idx) => this.objectsEqualDeep(o, a2[idx]));
-    componentWillReceiveProps(_nextProps) {
-        if (this.state.showConsoleLogs) {
-            console.log("Schedule - componentWillReceiveProps, start: ", new Date());
-            console.log("Schedule - componentWillReceiveProps - has changes, start: ", new Date());
-        }
-        const dateChange = _nextProps.startDate.toISOString() !== this.props.startDate.toISOString() ||
-            _nextProps.endDate.toISOString() !== this.props.endDate.toISOString();
-        if (dateChange) {
-            const startDate = _nextProps.startDate;
-            const endDate = _nextProps.endDate;
-            const maxPx = this.calculateMaxPx();
-            const timeHeaders = getTimeHeaders(startDate, endDate);
-            const days = Math.floor(daysBetweenTwoDates(startDate, endDate));
-            const dayPx = maxPx / days;
-            const hourPx = dayPx / 24;
-            const minutePx = dayPx / 1440;
-            const now = getUtcToday();
-            const isInDateRange = now >= startDate && now <= endDate && this.contentArea !== undefined;
-            const lineStyle = isInDateRange ? daysBetweenTwoDatesIncludingBoth(startDate, now) * dayPx : 0;
-            const divisions = calculateDivisions(startDate, endDate);
-            const divisionsLeftPx = timeHeaders
-                .filter((_, index) => {
-                return index != 0 && index % (24 / divisions) == 0;
-            })
-                .map((date) => {
-                const daysDiff = daysBetweenTwoDatesIncludingBoth(date, startDate);
-                const pixels = daysDiff * dayPx;
-                return pixels;
-            });
-            this.setState({
-                maxPx: maxPx, // window.screen.width * 0.9,
-                dayPx: dayPx,
-                hourPx: hourPx,
-                minutePx: minutePx,
-                timeHeaders: timeHeaders,
-                divisionsLeftPx: divisionsLeftPx,
-                resources: this.getNewResources(_nextProps, dayPx),
-                lineStyle: lineStyle,
-                nowUtc: now,
-                division: divisions,
-                divisionType: "",
-                pinnedResources: this.props.pinnedResources ?? [],
-            });
-            if (this.state.showConsoleLogs) {
-                console.log("Schedule - componentWillReceiveProps - print on schedule, end: ", new Date());
-                console.log("Schedule - componentWillReceiveProps, end: ", new Date());
-            }
-            return;
-        }
-        const areSameEvents = this.arraysEqual(_nextProps.events, this.props.events);
-        const areSameRows = this.arraysEqual(_nextProps.resources, this.props.resources);
-        if (!areSameEvents || !areSameRows) {
-            const startDate = _nextProps.startDate;
-            const endDate = _nextProps.endDate;
-            const maxPx = this.calculateMaxPx();
-            const days = Math.floor(daysBetweenTwoDates(startDate, endDate));
-            const dayPx = maxPx / days;
-            this.setState({
-                resources: this.getNewResources(_nextProps, dayPx),
-            });
-            return;
-        }
-    }
-    getNewResources = (_nextProps, dayPx) => {
-        const mappedEvents = filterEvents(_nextProps.events, _nextProps.startDate, _nextProps.endDate, this.props.id, this.props.module)
-            .filter((event) => {
-            const outOfRange = event.end <= this.props.startDate || event.start >= this.props.endDate;
-            return !outOfRange;
-        });
-        const resources = filterResources(this.props.module, this.props.resourceName, _nextProps.resources, this.props.groupByFunction, _nextProps.endDate, _nextProps.startDate, this.props.id);
-        const newResources = resources
-            .map((resource) => {
-            return {
-                ...resource,
-                events: mappedEvents.filter((event) => event.resourceId === resource.id),
-            };
-        })
-            .map((resource) => {
-            const tops = getEventsInInnerRows(resource, this.state.eventHeight, dayPx, _nextProps.startDate);
-            const height = tops.length === 0 ? this.state.eventHeight : tops.length * this.state.eventHeight;
-            let flatMapEvents = [];
-            for (let h = 0; h < tops.length; h++) {
-                flatMapEvents = flatMapEvents.concat(tops[h]);
-            }
-            return {
-                ...resource,
-                maxTop: height,
-                events: flatMapEvents,
-            };
-        });
-        return newResources;
-    };
-    handleOnClickContextMenuResourceScheduler = (_clickEvent, _resource) => {
-        let datetime = new Date();
-        const _ca = this.contentArea;
-        if (_clickEvent.domEvent.currentTarget !== undefined) {
-            const leftPos = _clickEvent.domEvent.currentTarget.parentElement.getBoundingClientRect().left -
-                (_ca?.getBoundingClientRect()?.left ?? 0) -
-                window.scrollX;
-            datetime = addMinutesToDateFromPx(this.props.startDate, leftPos, this.state.minutePx);
-        }
-        if (this.props.scheduler_handleOnClickContextMenuResource) {
-            this.props.scheduler_handleOnClickContextMenuResource(datetime, _resource, _clickEvent.key, this.props.id);
-        }
-    };
-    handleCrewPinning = (resource, text) => {
-        if (this.props.scheduler_handlePinned) {
-            this.props.scheduler_handlePinned.call(this.props.parent, resource.id, text, this.props.id);
-        }
-    };
-    render() {
-        const isInDateRange = this.state.nowUtc >= this.props.startDate &&
-            this.state.nowUtc <= this.props.endDate &&
-            this.contentArea !== undefined;
-        const showTimeline = isInDateRange && this.state.lineStyle < this.state.maxPx;
-        const isPinnedTable = this.props.id.toLowerCase().includes("pinned");
-        const schedulerHeight = heightScheduler(this.state.resources, this.props.height, this.props.id === "crewAssignmentsScheduler");
-        return (jsx("div", { id: this.props.id, style: {
-                maxHeight: isPinnedTable ? "auto" : schedulerHeight,
-            }, className: this.state.resources.length > 0 ? "cwellt_tb_con" : "cwellt_tb_con cw_tb_con_emptyValues", children: jsxs("table", { id: "cwelltTableScheduler", children: [this.props.id !== "crewAssignmentsScheduler" && (jsx(SchedulerHeader$1, { timelineProps: {
-                            maxPx: this.state.maxPx,
-                            hoursList: this.state.timeHeaders,
-                            pxPerHour: this.state.hourPx,
-                            startDate: this.props.startDate,
-                            endDate: this.props.endDate,
-                            headerName: this.props.resourceName,
-                        }, descriptionColumn: this.props.descriptionColumn })), jsx("tbody", { style: {
-                            width: this.state.maxPx + 150,
-                            maxHeight: isPinnedTable ? "auto" : schedulerHeight,
-                        }, className: isPinnedTable ? "fc-body cw-fc-body-pinned" : "fc-body", children: jsxs("tr", { className: "fc_body_row", children: [jsx(ResourcesTitleList, { resources: this.state.resources, canBePinned: this.props.canBePinned ?? false, includesPinned: this.props.id.toLowerCase().includes("pinned"), onCrewPinning: this.handleCrewPinning, onClickResourceContextMenu: (_e, resource) => {
-                                        if (this.props.scheduler_handleOnClickResourceContextMenu) {
-                                            this.props.scheduler_handleOnClickResourceContextMenu(_e, resource);
-                                        }
-                                    }, ResourceTitleComponent: this.props.resourceComp }), jsx("td", { className: "dividerArea" }), jsx(SchedulerContentArea, { now: this.state.nowUtc, showTimeline: showTimeline, timeSeparatorLeftPx: this.state.divisionsLeftPx, timeLineLeftPx: this.state.lineStyle, resources: this.state.resources, contextMenuContents: this.props.resourceContextMenuContents, scheduler: this, onEmptyClick: this.props.scheduler_handleEmptyClick, setContentArea: (n) => (this.contentArea = n), onClickContextMenu: this.handleOnClickContextMenuResourceScheduler })] }) })] }) }));
-    }
-}
-
 function dateFromPercentage(startDate, visibleDays, percentage) {
     const start = Temporal.Instant.fromEpochMilliseconds(startDate.getTime());
     const spanMs = Math.round(visibleDays) * 24 * 60 * 60 * 1000;
@@ -9853,7 +8973,7 @@ class OnClickContextMenu {
     }
 }
 
-var styles$3 = {"scheduler-header-divisions":"scheduler-header-module__scheduler-header-divisions__1JrNe","scheduler-timeline-now":"scheduler-header-module__scheduler-timeline-now__naREv","scheduler-timeline-label":"scheduler-header-module__scheduler-timeline-label__mLVAp","scheduler-header-title":"scheduler-header-module__scheduler-header-title__Jzy94","scheduler-dates":"scheduler-header-module__scheduler-dates__O7ePQ","current-day":"scheduler-header-module__current-day__FpHiv","scheduler-hours":"scheduler-header-module__scheduler-hours__ZDCVj"};
+var styles$3 = {"scheduler-header":"scheduler-header-module__scheduler-header__Y7SNV","scheduler-header-divisions":"scheduler-header-module__scheduler-header-divisions__1JrNe","scheduler-timeline-now":"scheduler-header-module__scheduler-timeline-now__naREv","scheduler-timeline-label":"scheduler-header-module__scheduler-timeline-label__mLVAp","scheduler-header-title":"scheduler-header-module__scheduler-header-title__Jzy94","scheduler-dates":"scheduler-header-module__scheduler-dates__O7ePQ","current-day":"scheduler-header-module__current-day__FpHiv","scheduler-hours":"scheduler-header-module__scheduler-hours__ZDCVj"};
 
 const getNow$1 = (isUtc) => {
     let now = new Date();
@@ -9919,7 +9039,7 @@ const HeaderTitle = ({ title, dividerText, width }) => {
 const SchedulerHeader = ({ content, divisions, visibleDays, selectedDate, width, onEvent, timeLinePercentage, isUtc }) => {
     const topWidth = (100 / visibleDays);
     const { title, classification } = content;
-    return (jsxs("div", { style: { display: "flex" }, children: [jsx(HeaderTitle, { title: title, dividerText: classification, width: width }), jsxs("div", { className: styles$3["scheduler-header-divisions"], style: { flex: 1, display: "flex", position: "relative" }, onMouseDown: (e) => {
+    return (jsxs("div", { className: styles$3["scheduler-header"], children: [jsx(HeaderTitle, { title: title, dividerText: classification, width: width }), jsxs("div", { className: styles$3["scheduler-header-divisions"], style: { flex: 1, display: "flex", position: "relative" }, onMouseDown: (e) => {
                     e.preventDefault();
                     const clickPercentage = getPercentageFromMouseEvent(e);
                     const date = dateFromPercentage(selectedDate, visibleDays, clickPercentage);
@@ -10787,325 +9907,6 @@ const Scheduler = (props) => {
 class UiEvent {
 }
 
-let topsCounter = 0;
-class CwSuperScheduler extends React.Component {
-    constructor(Props) {
-        super(Props);
-        this.state = {
-            topsCalculated: 0,
-            height: 50,
-            dataConfig: this.props.dataConfig ? this.props.dataConfig : undefined,
-            pinnedResources: []
-        };
-    }
-    componentDidUpdate(_previousProps, _previousState) {
-        if (this.props.pinnedResources !== _previousProps.pinnedResources) {
-            let returnedTops = 0;
-            let returnedHeight = 50;
-            let data;
-            if (this.props.pinnedResources) {
-                const pinned = [...new Set(this.props.pinnedResources)];
-                for (let i = 0; i < pinned.length; i++) {
-                    data = this.returnDynamicHeight(pinned[i], returnedTops);
-                    returnedTops = data.topsCalculated;
-                    returnedHeight = data.height;
-                }
-                this.setState({
-                    topsCalculated: returnedTops,
-                    height: returnedHeight !== 50 ? 80 + returnedHeight : 50,
-                    pinnedResources: this.props.pinnedResources
-                });
-            }
-        }
-    }
-    scheduler_handleCblEventClick = (cblEvent, schedulerId) => {
-        this.props.scheduler_handleCblEventClick(cblEvent, schedulerId);
-    };
-    scheduler_handleCblEventClickRight = (cblEvent, schedulerId) => {
-        if (this.props.scheduler_handleCblEventClickRight) {
-            this.props.scheduler_handleCblEventClickRight(cblEvent, schedulerId);
-        }
-    };
-    scheduler_handleCblEventDoubleClick = (cblEvent, schedulerId) => {
-        this.props.scheduler_handleCblEventDoubleClick(cblEvent, schedulerId);
-    };
-    scheduler_handlePinnedClickMultipleIds = (resIds, schedulerId, requestString) => {
-        this.props.scheduler_handlePinningOfResources(resIds, "", schedulerId, requestString);
-    };
-    scheduler_handlePinnedClick = (resId, text, schedulerId) => {
-        const array = new Array();
-        array.push(resId);
-        this.props.scheduler_handlePinningOfResources(array, text, schedulerId, "resources");
-    };
-    returnDynamicHeight(pinned, topsCalculated) {
-        let height = 100;
-        let maxTop = 0;
-        const eventHeight = 30;
-        const tops = new Array();
-        tops[0] = new Array();
-        const diffDates = this.props.endDate.getTime() - this.props.startDate.getTime();
-        const diffDays = diffDates / (1000 * 3600 * 24);
-        const dateToFilter = new Date(this.props.startDate.getTime());
-        dateToFilter.setDate(dateToFilter.getDate() + diffDays);
-        let events = this.props.pinnedEvents !== undefined ? this.props.pinnedEvents : new Array();
-        events = events
-            .filter(x => pinned === x.resourceId && x.start >= this.props.startDate && x.start <= dateToFilter)
-            .sort((a, b) => {
-            return +new Date(a.start) - +new Date(b.start);
-        });
-        for (let i = 0; i < events.length; i++) {
-            const event = events[i];
-            if (i === 0 || event.isFullHeight) {
-                tops[0].push(event);
-            }
-            else {
-                let found = false;
-                for (let j = 0; j < tops.length && found === false; j++) {
-                    found = this.checkIfSlotAvailable(tops[j], event);
-                    if (found === true || event.isFullHeight) {
-                        tops[j].push(event);
-                    }
-                }
-                if (found === false) {
-                    maxTop++;
-                    tops[maxTop] = new Array();
-                    tops[maxTop].push(event);
-                }
-            }
-        }
-        for (let h = 0; h < tops.length; h++) {
-            if (tops.length === 0) {
-                height = 100;
-            }
-            else {
-                height = (topsCalculated + tops.length) * eventHeight;
-            }
-        }
-        topsCounter = topsCounter + tops.length;
-        return {
-            topsCalculated: topsCalculated + tops.length,
-            height: height
-        };
-    }
-    checkIfSlotAvailable(array, event) {
-        let found = false;
-        if (array[array.length - 1].end <= event.start || array[array.length - 1].isFullHeight) {
-            found = true;
-        }
-        return found;
-    }
-    handleOnClickContextMenuResource = (date, resource, key, schedulerId) => {
-        let url = "";
-        switch (key) {
-            case "showReserves": {
-                // CrewControl
-                if (this.props.module === "CrewControl") {
-                    url = "/Winops/CrewControl/CrewControlReact/GetCrewIdsOfReserve";
-                }
-                // CrewScheduling
-                if (this.props.module === "CrewScheduling") {
-                    url = "/Winops/CrewPlanning/CrewPlanning/GetCrewIdsOfReserve";
-                }
-                const requestOptions = {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({
-                        from: this.dateUTCString(this.props.startDate),
-                        to: this.dateUTCString(this.props.endDate),
-                        acftCategories: [],
-                        functions: [],
-                        clickedDate: this.dateUTCString(date),
-                        airportSelected: this.props.airportSelected
-                    })
-                };
-                if (this.state.dataConfig) {
-                    fetch(this.state.dataConfig + url, requestOptions)
-                        .then(response => response.json())
-                        .then(res => {
-                        if (res.length > 0) {
-                            this.scheduler_handlePinnedClickMultipleIds(res, schedulerId, "Reserves");
-                        }
-                        else {
-                            alert("No Reserves");
-                        }
-                    });
-                }
-                break;
-            }
-            case "showStandbys": {
-                // CrewControl
-                if (this.props.module === "CrewControl") {
-                    url = "/Winops/CrewControl/CrewControlReact/GetCrewIdsOfStandby";
-                }
-                // CrewScheduling
-                if (this.props.module === "CrewScheduling") {
-                    url = "/Winops/CrewPlanning/CrewPlanning/GetCrewIdsOfStandby";
-                }
-                const requestOptions2 = {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({
-                        from: this.dateUTCString(this.props.startDate),
-                        to: this.dateUTCString(this.props.startDate),
-                        acftCategories: [],
-                        functions: [],
-                        clickedDate: this.dateUTCString(date),
-                        airportSelected: this.props.airportSelected
-                    })
-                };
-                if (this.state.dataConfig) {
-                    fetch(this.state.dataConfig + url, requestOptions2)
-                        .then(response => response.json())
-                        .then(res => {
-                        if (res.length > 0) {
-                            this.scheduler_handlePinnedClickMultipleIds(res, schedulerId, "Standbys");
-                        }
-                        else {
-                            alert("No Standbys");
-                        }
-                    });
-                }
-                break;
-            }
-            case "showAvailables": {
-                // CrewControl
-                if (this.props.module === "CrewControl") {
-                    url = "/Winops/CrewControl/CrewControlReact/GetCrewIdsOfAvailables";
-                }
-                // CrewScheduling
-                if (this.props.module === "CrewScheduling") {
-                    url = "/Winops/CrewPlanning/CrewPlanning/GetCrewIdsOfAvailables";
-                }
-                const requestOptions3 = {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({
-                        from: this.dateUTCString(this.props.startDate),
-                        to: this.dateUTCString(this.props.startDate),
-                        acftCategories: [],
-                        functions: [],
-                        clickedDate: this.dateUTCString(date),
-                        airportSelected: this.props.airportSelected
-                    })
-                };
-                if (this.state.dataConfig) {
-                    fetch(this.state.dataConfig + url, requestOptions3)
-                        .then(response => response.json())
-                        .then(res => {
-                        if (res.length > 0) {
-                            this.scheduler_handlePinnedClickMultipleIds(res, schedulerId, "Availables");
-                        }
-                        else {
-                            alert("No Availables");
-                        }
-                    });
-                }
-                break;
-            }
-            default: {
-                if (this.props.scheduler_handleOnClickContextMenuResource) {
-                    this.props.scheduler_handleOnClickContextMenuResource(date, resource, key);
-                }
-                break;
-            }
-        }
-    };
-    dateUTCString(date) {
-        if (date instanceof Date) {
-            if (date.getFullYear() > 1901)
-                return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes())).toISOString();
-        }
-        return date;
-    }
-    render() {
-        const havePinnedResources = this.state.pinnedResources?.length > 0;
-        const firstSchedulerResources = havePinnedResources
-            ? this.props.resourcesToPin.filter(x => this.state.pinnedResources.includes(x.id))
-            : new Array();
-        const secondSchedulerResources = this.props.resources.filter(x => !this.state.pinnedResources.includes(x.id));
-        const pinnedEvents = this.props.pinnedEvents !== undefined
-            ? this.props.pinnedEvents.filter(x => this.state.pinnedResources.includes(x.resourceId))
-            : new Array();
-        const notPinnedEvents = this.props.events.filter(x => !this.props.pinnedResources?.includes(x.resourceId));
-        return (jsxs("div", { className: "cwelltSuperScheduler_content", children: [jsx(CwScheduler, { id: "crewPinnedScheduler", events: pinnedEvents, resources: firstSchedulerResources, height: this.state.height, startDate: this.props.startDate, endDate: this.props.endDate, scheduler_handleCblEventClick: this.props.scheduler_handleCblEventClick, scheduler_handleCblEventClickRight: this.props.scheduler_handleCblEventClickRight, scheduler_handleCblEventDoubleClick: this.props.scheduler_handleCblEventDoubleClick, scheduler_handleOnDropCblEventsOnResource: this.props.scheduler_handleOnDropCblEventsOnResource, parent: this.props.parent, cblEventComp: this.props.cblEventComp, scheduler_handleOnClickEventContextMenu: this.props.scheduler_handleOnClickEventContextMenu, resourceComp: this.props.resourceComp, scheduler_handleOnClickContextMenuResource: this.props.scheduler_handleOnClickContextMenuResource, resourceContextMenuContents: this.props.resourceContextMenuContents, scheduler_handleDblClickOnResourceInScheduler: this.props.scheduler_handleDblClickOnResourceInScheduler, scheduler_handleEmptyClick: this.props.scheduler_handleEmptyClick, canBePinned: false, scheduler_handlePinned: this.scheduler_handlePinnedClick, resourceName: this.props.resourceName, descriptionColumn: this.props.descriptionColumn, scheduler_handleOnClickResourceContextMenu: this.props.scheduler_handleOnClickResourceContextMenu, groupByFunction: this.props.groupByFunction }), havePinnedResources && (jsx("div", { style: { padding: "0.5rem" }, children: jsx(CwButton, { text: "Clear", onClick: () => {
-                            this.props.scheduler_handleClearPinnedOnParent();
-                        } }) })), jsx(CwScheduler, { id: "crewAssignmentsScheduler", events: notPinnedEvents, resources: secondSchedulerResources, height: this.props.height, startDate: this.props.startDate, endDate: this.props.endDate, scheduler_handleCblEventClick: this.props.scheduler_handleCblEventClick, scheduler_handleCblEventClickRight: this.props.scheduler_handleCblEventClickRight, scheduler_handleCblEventDoubleClick: this.props.scheduler_handleCblEventDoubleClick, scheduler_handleOnDropCblEventsOnResource: this.props.scheduler_handleOnDropCblEventsOnResource, parent: this.props.parent, cblEventComp: this.props.cblEventComp, scheduler_handleOnClickEventContextMenu: this.props.scheduler_handleOnClickEventContextMenu, resourceComp: this.props.resourceComp, scheduler_handleOnClickContextMenuResource: this.handleOnClickContextMenuResource, resourceContextMenuContents: this.props.resourceContextMenuContents, scheduler_handleDblClickOnResourceInScheduler: this.props.scheduler_handleDblClickOnResourceInScheduler, scheduler_handleEmptyClick: this.props.scheduler_handleEmptyClick, canBePinned: true, scheduler_handlePinned: this.scheduler_handlePinnedClick, scheduler_handleCblEventResize: this.props.scheduler_handleCblEventResize, resourceName: this.props.resourceName, descriptionColumn: this.props.descriptionColumn, scheduler_handleOnClickResourceContextMenu: this.props.scheduler_handleOnClickResourceContextMenu, airportSelected: this.props.airportSelected, module: this.props.module, groupByFunction: this.props.groupByFunction })] }));
-    }
-}
-class CblDragAndDrop {
-    fromId;
-    toId;
-    data;
-    droppedOnDate;
-    resizeFromStart;
-    resizeFromEnd;
-    isCtrlKey;
-    constructor(fromId, toId, data, droppedOnDate = null, resizeFromStart = null, resizeFromEnd = null, isCtrlKey = null) {
-        this.fromId = fromId;
-        this.toId = toId;
-        this.data = data;
-        this.droppedOnDate = droppedOnDate;
-        this.resizeFromStart = resizeFromStart;
-        this.resizeFromEnd = resizeFromEnd;
-        this.isCtrlKey = isCtrlKey;
-    }
-}
-
-const getGUID = () => {
-    return generateSegment(false) + generateSegment(true) + generateSegment(true) + generateSegment(false);
-};
-const generateSegment = (includeHyphens) => {
-    const p = (Math.random().toString(16) + "000000000").substring(2, 10);
-    return includeHyphens ? "-" + p.substring(0, 4) + "-" + p.substring(4, 8) : p;
-};
-
-class cblEvent {
-    id = "";
-    start;
-    end;
-    resourceId;
-    selected = false;
-    top = 0;
-    leftPx = 0;
-    rightPx = 0;
-    width = 0;
-    isFullHeight = false;
-    isReadOnly = false;
-    isResizable = false;
-    isDraggable = false;
-    data = null;
-    constructor(start, end, resourceId, data = null, isFullHeight = false, isReadOnly = false, isResizable = false, isDraggable = false) {
-        this.start = start;
-        this.end = end;
-        this.resourceId = resourceId;
-        this.data = data;
-        this.isFullHeight = isFullHeight;
-        this.isReadOnly = isReadOnly;
-        this.isResizable = isResizable;
-        this.isDraggable = isDraggable;
-        this.id = getGUID();
-    }
-}
-
-class Resource {
-    uid = "";
-    id;
-    name;
-    maxTop;
-    events = [];
-    isInViewport = false;
-    schedulerResourceDisplay;
-    isLoading = false;
-    data = null;
-    constructor(id, name, eventHeight, data = null, schedulerResourceDisplay = null) {
-        this.id = id;
-        this.name = name;
-        this.maxTop = eventHeight;
-        this.data = data;
-        this.schedulerResourceDisplay = schedulerResourceDisplay || this.name;
-    }
-}
-
 var styles = {"super-scheduler-row-header":"super-scheduler-module__super-scheduler-row-header__TTs4e","indicators":"super-scheduler-module__indicators__f4lIT","scheduler-crewmember-functions":"super-scheduler-module__scheduler-crewmember-functions__BS2hs"};
 
 class OnPinRow {
@@ -11588,4 +10389,4 @@ const CwFindCrewmember = ({ handleChange, placeHolder = "Search crew…", requir
         }, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected crewmember", variant: "icon", icon: "close", color: "neutral" })) : (jsx(CwIcon, { iconId: "person" })) })] })] }), renderPanel(jsx("div", { ref: panelRef, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { className: `${dropdownStyles.option}${index === highlightedIndex ? ` ${dropdownStyles.optionFocused}` : ""}`, onClick: () => handleOptionSelect(option.value), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }) }))] }));
 };
 
-export { CblDragAndDrop, CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBtnApprove, CwBtnCancel, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwButtonSplit, CwButtonSwitch, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDatePickerTemporal, CwDateRangePicker, CwDateRangePickerTemporal, CwDateTimePicker, CwDateTimePickerCompact, CwDateTimePickerTemporal, CwDialog, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNavMenu, CwNote, CwOption, CwPopoverButton, CwProgress, CwRadioGroup, CwReportModal, CwScheduler, CwSearchAsync, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSkeleton, CwSortableList, CwSortableTable, CwSuperScheduler, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PRESET_LIBRARY_TEMPORAL, PinRowHeader, Resource, Scheduler, SchedulerEvent, SuperScheduler, TooltipConstraintContext, UiEvent, Weekdays, cblEvent, configureCwLoading, eventIsVisible, filterNavItems, filterVisibleEvents, getCwLoadingDefaults, getDefaultDivisions, getEventSizes, getPresetsByKeysTemporal, itemsToMultiFilterTags, sortNavItems, useCwMessage, useSortableList, useSortableTable, useTooltipConstraint };
+export { CwAccordionContainer, CwAlign, CwAnchoredMenu, CwBadge, CwBtnApprove, CwBtnCancel, CwBtnDelete, CwBtnEdit, CwBtnSave, CwButton, CwButtonSplit, CwButtonSwitch, CwCard, CwCardList, CwCheck, CwCheckbox, CwCheckboxGroup, CwChip, CwColorPicker, CwConfirmationPopup, CwContextMenu, CwDatePicker, CwDatePickerTemporal, CwDateRangePicker, CwDateRangePickerTemporal, CwDateTimePicker, CwDateTimePickerCompact, CwDateTimePickerTemporal, CwDialog, CwDigit, CwDisplayMessage, CwDropdown, CwDropdownFilter, CwExpandable, CwFileUploadMultiple, CwFindAirport, CwFindCrewmember, CwGenericTooltip, CwHeadingMain, CwHeadingSecond, CwIcon, CwImageArea, CwImageGallery, CwImageZoom, CwInput, CwInputColor, CwInputDateText, CwInputDatetime, CwInputImage, CwInputNumber, CwInputPhone, CwInputText, CwKeyValueList, CwLabel, CwLoading, CwMasterDetail, CwMessage, CwMessageManager, CwMessageType, CwModal, CwModalHover, CwModalReportFunctional, CwMultiFilter, CwMultiFilterTag, CwNavMenu, CwNote, CwOption, CwPopoverButton, CwProgress, CwRadioGroup, CwReportModal, CwSearchAsync, CwSearchInput, CwSelect, CwSelectList, CwSelectListItems, CwSkeleton, CwSortableList, CwSortableTable, CwTable, CwTableGrouped, CwTableServerSide, CwTabs, CwTagSelector, CwTextArea, CwTime, CwTimePicker, CwToggle, CwTooltipManager, CwTooltipNew, CwTreeView, CwWeekdaySelector, DefaultRowHeader, OnClearPinned, OnClickContextMenu, OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDoubleClickRowEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnEndClickHeaderEvent, OnLeftDragStart, OnMultiClickEvent, OnPinRow, OnRangeClickEvent, OnRightClickEvent, OnRightClickRow, OnRightDragStart, OnStartClickHeaderEvent, OnUnpinRow, PRESET_LIBRARY_TEMPORAL, PinRowHeader, Scheduler, SchedulerEvent, SuperScheduler, TooltipConstraintContext, UiEvent, Weekdays, configureCwLoading, eventIsVisible, filterNavItems, filterVisibleEvents, getCwLoadingDefaults, getDefaultDivisions, getEventSizes, getPresetsByKeysTemporal, itemsToMultiFilterTags, sortNavItems, useCwMessage, useSortableList, useSortableTable, useTooltipConstraint };