npm - @cwellt_software/cwellt-reactjs-lib - Versions diffs - 1.6.2 → 1.7.0 - Mend

@cwellt_software/cwellt-reactjs-lib 1.6.2 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (120) hide show

package/dist/index.es.js CHANGED Viewed

@@ -174,7 +174,7 @@ function getContrastColor(color) {
     return `hsl(${hsl.h}, ${contrastS}%, ${targetL}%)`;
 }
-var styles$A = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
+var styles$D = {"cw-tooltip-content":"cw-tooltip-module__cw-tooltip-content__RZczd","cw-tooltip":"cw-tooltip-module__cw-tooltip__1KYig"};
 // Constants
 const margin$1 = 16;
@@ -464,7 +464,7 @@ const CwTooltipManager = () => {
     if (!state.isVisible || !state.content) {
         return null;
     }
-    return createPortal(jsx("div", { ref: tooltipRef, className: styles$A["cw-tooltip-content"], "data-position": actualPosition, "data-visible": state.isVisible, "data-inline": state.displayInline, style: {
+    return createPortal(jsx("div", { ref: tooltipRef, className: styles$D["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,
@@ -545,7 +545,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$A["cw-tooltip"], children: children }));
+    return (jsx("div", { ref: containerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, className: styles$D["cw-tooltip"], children: children }));
 };
 const SVG_ICONS = {
@@ -665,7 +665,7 @@ function resolveBadgeAria(label, loading, hasText) {
     return hasText ? {} : { 'aria-hidden': 'true' };
 }
-var styles$z = {"badge":"cw-badge-module__badge__PKlak"};
+var styles$C = {"badge":"cw-badge-module__badge__PKlak"};
 /**
  * CwBadge - the small coloured circle with a number, used for alert and notification counts.
@@ -701,7 +701,7 @@ const CwBadge = ({ count, content, color = 'info', variant = 'solid', size = 'sm
         ? formatBadgeCount(count, max)
         : undefined;
     const isDot = !loading && !hasContent && count === undefined;
-    const badgeClassNames = ['cw-badge', styles$z.badge, className].filter(Boolean).join(' ');
+    const badgeClassNames = ['cw-badge', styles$C.badge, className].filter(Boolean).join(' ');
     return (jsx("span", { ...dataAttributes, 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 }));
 };
@@ -1089,7 +1089,7 @@ function CwLoading({ isLoading = false, text = '', size = 'regular', iconPositio
     return (jsxs("div", { "aria-busy": isLoading, className: "cw-loading-container", "data-children": !!children, children: [overlay, jsx("div", { className: "cw-loading-disabled-content", children: children })] }));
 }
-var styles$y = {"skeleton":"cw-skeleton-module__skeleton__Jvx2x","group":"cw-skeleton-module__group__Cm8AU"};
+var styles$B = {"skeleton":"cw-skeleton-module__skeleton__Jvx2x","group":"cw-skeleton-module__group__Cm8AU"};
 /*
  * Internal helper for skeleton allocations (CwSkeleton, tables, cards).
@@ -1131,8 +1131,8 @@ function CwSkeleton({ variant = 'text', width, height, count = 1, radius, gap })
     };
     // The un-hashed cw-skeleton / cw-skeleton-group classes carry no styles in the
     // library - they are stable public hooks for exceptional external overrides.
-    const skeletonClassName = ['cw-skeleton', styles$y.skeleton].filter(Boolean).join(' ');
-    const groupClassName = ['cw-skeleton-group', styles$y.group].filter(Boolean).join(' ');
+    const skeletonClassName = ['cw-skeleton', styles$B.skeleton].filter(Boolean).join(' ');
+    const groupClassName = ['cw-skeleton-group', styles$B.group].filter(Boolean).join(' ');
     const lineCount = normalizeSkeletonCount(count, 1);
     if (lineCount <= 1) {
         return (jsx("span", { className: skeletonClassName, "data-variant": variant, "aria-hidden": "true", style: style }));
@@ -1144,7 +1144,7 @@ function CwSkeleton({ variant = 'text', width, height, count = 1, radius, gap })
     return (jsx("span", { className: groupClassName, "aria-hidden": "true", style: groupStyle, children: skeletonElements }));
 }
-var styles$x = {"progress":"cw-progress-module__progress__d-g2-","value":"cw-progress-module__value__Q-DrH","label":"cw-progress-module__label__jwOWp","track":"cw-progress-module__track__572-3","footer":"cw-progress-module__footer__0Wo4G","header":"cw-progress-module__header__mv5ct","fill":"cw-progress-module__fill__fX1UA"};
+var styles$A = {"progress":"cw-progress-module__progress__d-g2-","value":"cw-progress-module__value__Q-DrH","label":"cw-progress-module__label__jwOWp","track":"cw-progress-module__track__572-3","footer":"cw-progress-module__footer__0Wo4G","header":"cw-progress-module__header__mv5ct","fill":"cw-progress-module__fill__fX1UA"};
 /**
  * CwProgress - a determinate or indeterminate progress bar.
@@ -1168,17 +1168,17 @@ function CwProgress({ value, indeterminate = false, label, rightLabel, footer, s
     const valueContent = 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$x.progress, className].filter(Boolean).join(' ');
-    const labelSpan = label ? jsx("span", { className: styles$x.label, id: labelId, children: label }) : null;
-    const valueLabel = showValue ? (jsx("span", { className: styles$x.value, "data-mono": monoValue || undefined, children: valueContent })) : null;
-    return (jsxs("div", { ...dataAttributes, className: rootClassName, style: style, "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$x.header, children: [labelSpan, valueLabel] })), layout === 'row' && labelSpan, jsx("div", { className: styles$x.track, role: "progressbar", ...(label && { 'aria-labelledby': labelId }), ...(!indeterminate && percent !== undefined && {
+    const rootClassName = ['cw-progress', styles$A.progress, className].filter(Boolean).join(' ');
+    const labelSpan = label ? jsx("span", { className: styles$A.label, id: labelId, children: label }) : null;
+    const valueLabel = showValue ? (jsx("span", { className: styles$A.value, "data-mono": monoValue || undefined, children: valueContent })) : null;
+    return (jsxs("div", { ...dataAttributes, className: rootClassName, style: style, "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$A.header, children: [labelSpan, valueLabel] })), layout === 'row' && labelSpan, jsx("div", { className: styles$A.track, role: "progressbar", ...(label && { 'aria-labelledby': labelId }), ...(!indeterminate && percent !== undefined && {
                     'aria-valuenow': percent,
                     'aria-valuemin': 0,
                     'aria-valuemax': 100
-                }), children: jsx("div", { className: styles$x.fill, style: !indeterminate && clamped !== undefined ? { width: `${clamped}%` } : undefined }) }), layout === 'row' && valueLabel, footer != null && jsx("footer", { className: styles$x.footer, children: footer })] }));
+                }), children: jsx("div", { className: styles$A.fill, style: !indeterminate && clamped !== undefined ? { width: `${clamped}%` } : undefined }) }), layout === 'row' && valueLabel, footer != null && jsx("footer", { className: styles$A.footer, children: footer })] }));
 }
-var styles$w = {"cw-generic-tooltip-content":"cw-generic-tooltip-module__cw-generic-tooltip-content__la-Si","cw-generic-tooltip":"cw-generic-tooltip-module__cw-generic-tooltip__Ij76M"};
+var styles$z = {"cw-generic-tooltip-content":"cw-generic-tooltip-module__cw-generic-tooltip-content__la-Si","cw-generic-tooltip":"cw-generic-tooltip-module__cw-generic-tooltip__Ij76M"};
 // Constants moved outside to prevent recreation
 const margin = 16;
@@ -1305,12 +1305,12 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
     const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => {
         setIsVisible(true);
     }, showDelay);
-    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$w["cw-generic-tooltip-content"]);
+    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles$z["cw-generic-tooltip-content"]);
     // Memoize tooltip content creation
     const tooltipContent = useMemo(() => {
         if (hide || !isVisible || !content)
             return null;
-        return createPortal(jsx("div", { className: styles$w["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, "data-inline": displayInline, style: {
+        return createPortal(jsx("div", { className: styles$z["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, "data-inline": displayInline, style: {
                 position: 'fixed',
                 top: `${tooltipPosition.top}px`,
                 left: `${tooltipPosition.left}px`,
@@ -1325,7 +1325,7 @@ const CwGenericTooltip = ({ children, content = null, position = defaultPosition
         clearTooltipTimeout();
         setIsVisible(false);
     }, [clearTooltipTimeout]);
-    return (jsxs("div", { ref: containerRef, className: styles$w["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, "data-inline": displayInline, children: [tooltipContent, children] }));
+    return (jsxs("div", { ref: containerRef, className: styles$z["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", badge, children, ...buttonProps }, ref) {
@@ -1393,7 +1393,7 @@ function CwModal(custModalProps) {
     return (jsx("div", { children: custModalProps.modalState && (jsxs("div", { className: custModalProps.classNameModalOverlay + " cwelltModalOverlay", children: [jsx("div", { className: "cwelltModalOverlayBg", onClick: custModalProps.onCloseModal }), jsx(Draggable, { disabled: isModalDisabled, axis: "both", nodeRef: draggableRef, children: jsxs("div", { className: custModalProps.classNameModal + " cwelltContainerModal", ref: draggableRef, style: widthModalDef !== "40em" ? modalStyle.widthCustomStyle : modalStyle.widthDefStyle, children: [jsxs("div", { className: "cwelltModalHeader", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: [jsx("div", { className: "cwelltModalTitle", children: custModalProps.titleModal }), jsx("button", { className: "cwelltBtnCloseModal", onClick: custModalProps.onCloseModal, children: jsx("span", { className: "cwelltCloseIcon" }) })] }), jsx("div", { className: "cwelltModalBody", children: jsx("div", { className: "cwelltContainerModalBody", style: { position: "relative" }, children: custModalProps.children }) }), isHide === false ? (jsx("footer", { className: "legacy-modal-footer", onMouseOver: cwelltOnMouseOverModal, onMouseOut: cwelltOnMouseOutModal, children: jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: custModalProps.onSaveModal, form: custModalProps.formSaveModal, hidden: custModalProps.HideBtnModal, type: custModalProps.HtmlSubmitModal }) })) : (jsx("div", { style: { display: "none" } }))] }) })] })) }));
 }
-var styles$v = {"overlayPositioned":"CwConfirmationPopup-module__overlayPositioned__11qYB","popup":"CwConfirmationPopup-module__popup__ahPjM","message":"CwConfirmationPopup-module__message__MnNL4","buttons":"CwConfirmationPopup-module__buttons__fGYYE","button":"CwConfirmationPopup-module__button__ugYQE","confirmButton":"CwConfirmationPopup-module__confirmButton__rTP4S","cancelButton":"CwConfirmationPopup-module__cancelButton__Ry694"};
+var styles$y = {"overlayPositioned":"CwConfirmationPopup-module__overlayPositioned__11qYB","popup":"CwConfirmationPopup-module__popup__ahPjM","message":"CwConfirmationPopup-module__message__MnNL4","buttons":"CwConfirmationPopup-module__buttons__fGYYE","button":"CwConfirmationPopup-module__button__ugYQE","confirmButton":"CwConfirmationPopup-module__confirmButton__rTP4S","cancelButton":"CwConfirmationPopup-module__cancelButton__Ry694"};
 /**
  * Small anchored confirmation for a destructive action.
@@ -1462,15 +1462,15 @@ function CwConfirmationPopup(props) {
             onCancel();
         }
     };
-    return (jsxs(Fragment, { children: [renderChildren(), isOpen && (jsx("div", { className: styles$v.overlayPositioned, onClick: handleOverlayClick, children: jsxs("div", { ref: popupRef, className: styles$v.popup, style: {
+    return (jsxs(Fragment, { children: [renderChildren(), isOpen && (jsx("div", { className: styles$y.overlayPositioned, onClick: handleOverlayClick, children: jsxs("div", { ref: popupRef, className: styles$y.popup, style: {
                         position: 'absolute',
                         top: `${position.top}px`,
                         left: `${position.left}px`,
                         transform: 'none'
-                    }, children: [jsx("p", { className: styles$v.message, children: message }), jsxs("div", { className: styles$v.buttons, children: [jsx("button", { className: `${styles$v.button} ${styles$v.confirmButton}`, onClick: onConfirm, children: confirmText }), jsx("button", { className: `${styles$v.button} ${styles$v.cancelButton}`, onClick: onCancel, children: cancelText })] })] }) }))] }));
+                    }, children: [jsx("p", { className: styles$y.message, children: message }), jsxs("div", { className: styles$y.buttons, children: [jsx("button", { className: `${styles$y.button} ${styles$y.confirmButton}`, onClick: onConfirm, children: confirmText }), jsx("button", { className: `${styles$y.button} ${styles$y.cancelButton}`, onClick: onCancel, children: cancelText })] })] }) }))] }));
 }
-var styles$u = {"cw-dialog-main":"cw-dialog-module__cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module__cw-dialog-button-close__9GRd8"};
+var styles$x = {"cw-dialog-main":"cw-dialog-module__cw-dialog-main__cHxHt","cw-dialog-button-close":"cw-dialog-module__cw-dialog-button-close__9GRd8"};
 // Helper function to parse size values
 const parseSize = (size) => {
@@ -1743,7 +1743,7 @@ const CwDialog = props => {
             }
         }
     }, [open]);
-    const header = useMemo(() => (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: headline }), customHeader || (jsx("button", { className: styles$u["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
+    const header = useMemo(() => (jsxs("header", { onMouseDown: handleMouseDown, children: [jsx("span", { children: headline }), customHeader || (jsx("button", { className: styles$x["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
     const content = useMemo(() => (jsx("section", { children: children })), [children]);
     const footer = useMemo(() => (jsx("footer", { children: customFooter || (jsx(CwButton, { variant: "icon", icon: "save", title: "Save", onClick: onSave, tooltipPosition: "top", disabled: disableSave, "data-testid": "cw-dialog-save" })) })), [customFooter, onSave, disableSave]);
     const resizeHandles = useMemo(() => size.autoHeight
@@ -1770,7 +1770,7 @@ const CwDialog = props => {
             : `${convertFromPx(size.height, size.heightUnit)}${size.heightUnit}`;
         return { displayWidth, displayHeight };
     }, [size.width, size.height, size.widthUnit, size.heightUnit, size.autoHeight]);
-    const dialogContent = (jsx("div", { "data-has-scrim": hasScrim, className: styles$u["cw-dialog-main"], onMouseDown: handleScrimMouseDown, onMouseUp: handleScrimMouseUpOrLeave, onMouseLeave: handleScrimMouseUpOrLeave, "data-pressing": isPressingScrim, children: jsxs("dialog", { ...domProps, ref: dialogRef, style: {
+    const dialogContent = (jsx("div", { "data-has-scrim": hasScrim, className: styles$x["cw-dialog-main"], onMouseDown: handleScrimMouseDown, onMouseUp: handleScrimMouseUpOrLeave, onMouseLeave: handleScrimMouseUpOrLeave, "data-pressing": isPressingScrim, children: jsxs("dialog", { ...domProps, ref: dialogRef, style: {
                 left: `${position.x}px`,
                 top: `${position.y}px`,
                 width: displayDimensions.displayWidth,
@@ -1932,7 +1932,7 @@ function CwAlign(props) {
         }, children: props.children }));
 }
-var styles$t = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module__clickable__Y-V3X","disabled":"cw-card-module__disabled__0wHh1","content":"cw-card-module__content__ma9qy","headerContent":"cw-card-module__headerContent__x4Jfl","footerTags":"cw-card-module__footerTags__80sSW"};
+var styles$w = {"card":"cw-card-module__card__HJUT0","content":"cw-card-module__content__ma9qy","clickable":"cw-card-module__clickable__Y-V3X","disabled":"cw-card-module__disabled__0wHh1","headerContent":"cw-card-module__headerContent__x4Jfl","footerTags":"cw-card-module__footerTags__80sSW"};
 /**
 * CwCard - A simple card component for displaying content in a contained format
@@ -1945,8 +1945,8 @@ var styles$t = {"card":"cw-card-module__card__HJUT0","clickable":"cw-card-module
 *   onDelete={confirmDeletion}
 *   footer="Last updated: 2 days ago"
 *   chips={[
-*     { label: 'Important', colorScheme: 'danger' },
-*     { label: 'Custom', colorScheme: 'custom', customColor: '#8a2be2' }
+*     { label: 'Important', color: 'danger' },
+*     { label: 'Custom', color: 'custom', customColor: '#8a2be2' }
 *   ]}
 * >
 *   <p>This is the main content of the card.</p>
@@ -1958,10 +1958,10 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     // Construct class names using CSS modules
     const cardClassNames = [
         'cw-card',
-        styles$t.card,
+        styles$w.card,
         className,
-        clickable ? styles$t.clickable : '',
-        disabled ? styles$t.disabled : '',
+        clickable ? styles$w.clickable : '',
+        disabled ? styles$w.disabled : '',
     ].filter(Boolean).join(' ');
     // Handle click event when card is clickable
     const handleClick = () => {
@@ -1979,15 +1979,15 @@ const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, o
     const hasFooter = hasChips || footer || (hasActions && resolvedDirection === "row");
     // Actions component to reuse. While loading, each provided action renders a circular
     // ghost sized to the CwButton icon footprint (2rem) - no interactive buttons.
-    const ActionsComponent = hasActions && !disabled ? (jsx("div", { className: styles$t.actions, children: isLoading ? (jsxs(Fragment, { children: [extraActions && jsx(CwSkeleton, { variant: "circle", height: "2rem" }), onEdit && jsx(CwSkeleton, { variant: "circle", height: "2rem" }), onDelete && jsx(CwSkeleton, { variant: "circle", height: "2rem" })] })) : (jsxs(Fragment, { children: [extraActions ?? null, onEdit && jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) })) : null;
+    const ActionsComponent = hasActions && !disabled ? (jsx("div", { className: styles$w.actions, children: isLoading ? (jsxs(Fragment, { children: [extraActions && jsx(CwSkeleton, { variant: "circle", height: "2rem" }), onEdit && jsx(CwSkeleton, { variant: "circle", height: "2rem" }), onDelete && jsx(CwSkeleton, { variant: "circle", height: "2rem" })] })) : (jsxs(Fragment, { children: [extraActions ?? null, onEdit && jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) })) : null;
     return (jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && !isLoading && {
             role: 'button',
             tabIndex: 0,
             onClick: handleClick,
-        }), "data-variant": variant, "data-direction": resolvedDirection, "aria-busy": isLoading || undefined, children: [isLoading ? (jsxs("header", { children: [jsx("div", { className: styles$t.headerContent, "data-align": resolvedAlign, children: jsx(CwSkeleton, { width: "8rem", height: "1.5em" }) }), resolvedDirection === "column" && ActionsComponent] })) : (hasHeader && (jsxs("header", { children: [(title || subtitle) && (jsxs("div", { className: styles$t.headerContent, "data-align": resolvedAlign, children: [title && jsx("h5", { children: title }), subtitle && jsx("strong", { children: subtitle })] })), resolvedDirection === "column" && ActionsComponent] }))), jsx("div", { className: styles$t.content, children: isLoading ? jsx(CwSkeleton, { count: normalizeSkeletonCount(skeletonLines, 3) }) : children }), hasFooter && (isLoading ? (jsx("footer", { children: jsx("div", { className: styles$t.footerTags, children: jsx(CwSkeleton, { variant: "rect", width: "4rem", height: "1.5em", radius: "1rem" }) }) })) : (jsxs("footer", { children: [hasChips && (jsx("div", { className: styles$t.footerTags, children: chips.map((chip, index) => (jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles$t.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsx("div", { className: styles$t.footerContent, children: footer }))] }))), resolvedDirection === "row" && ActionsComponent] }));
+        }), "data-variant": variant, "data-direction": resolvedDirection, "aria-busy": isLoading || undefined, children: [isLoading ? (jsxs("header", { children: [jsx("div", { className: styles$w.headerContent, "data-align": resolvedAlign, children: jsx(CwSkeleton, { width: "8rem", height: "1.5em" }) }), resolvedDirection === "column" && ActionsComponent] })) : (hasHeader && (jsxs("header", { children: [(title || subtitle) && (jsxs("div", { className: styles$w.headerContent, "data-align": resolvedAlign, children: [title && jsx("h5", { children: title }), subtitle && jsx("strong", { children: subtitle })] })), resolvedDirection === "column" && ActionsComponent] }))), jsx("div", { className: styles$w.content, children: isLoading ? jsx(CwSkeleton, { count: normalizeSkeletonCount(skeletonLines, 3) }) : children }), hasFooter && (isLoading ? (jsx("footer", { children: jsx("div", { className: styles$w.footerTags, children: jsx(CwSkeleton, { variant: "rect", width: "4rem", height: "1.5em", radius: "1rem" }) }) })) : (jsxs("footer", { children: [hasChips && (jsx("div", { className: styles$w.footerTags, children: chips.map((chip, index) => (jsx(CwChip, { label: chip.label, color: chip.color, colorScheme: chip.colorScheme, className: styles$w.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (jsx("div", { className: styles$w.footerContent, children: footer }))] }))), resolvedDirection === "row" && ActionsComponent] }));
 };
-var styles$s = {"cardContainer":"cw-card-list-module__cardContainer__l3YEh","pagination":"cw-card-list-module__pagination__5Ay78","pageInfo":"cw-card-list-module__pageInfo__uiMel","emptyState":"cw-card-list-module__emptyState__RlqiS"};
+var styles$v = {"cardContainer":"cw-card-list-module__cardContainer__l3YEh","pagination":"cw-card-list-module__pagination__5Ay78","pageInfo":"cw-card-list-module__pageInfo__uiMel","emptyState":"cw-card-list-module__emptyState__RlqiS"};
 /**
  * Option to display in the CwSelect
@@ -2082,10 +2082,10 @@ function CwCardList({ items, renderCard, pageSize = 10, layout = 'grid', default
                         icon: sortDirection === 'asc' ? 'arrow-up' : 'arrow-down',
                         onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'),
                         title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}`,
-                    }, value: sortKey, onChange: (e) => handleSortChange(e.target.value), children: sortOptions.map(option => (jsx(CwOption, { value: option.key, children: option.label }, option.key))) }) })), isLoading ? (jsx("div", { className: `${styles$s.cardContainer}`, "data-layout": layout, style: gridStyle, "aria-busy": true, children: Array.from({ length: normalizeSkeletonCount(skeletonCards, 6) }, (_, index) => (jsx(CwCard, { isLoading: true, children: null }, `skeleton_${index}`))) })) : sortedItems.length === 0 ? (jsx("div", { className: styles$s.emptyState, children: emptyState || jsx("p", { children: "No items to display" }) })) : (jsxs(Fragment, { children: [jsx("div", { className: `${styles$s.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsx(React__default.Fragment, { children: renderCard(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }), totalPages > 1 && (jsxs("div", { className: styles$s.pagination, children: [jsx(CwButton, { variant: "icon", icon: "chevron-left", disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)) }), jsxs("span", { className: styles$s.pageInfo, children: [currentPage, " / ", totalPages] }), jsx(CwButton, { variant: "icon", icon: "chevron-right", disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)) })] }))] }))] }));
+                    }, value: sortKey, onChange: (e) => handleSortChange(e.target.value), children: sortOptions.map(option => (jsx(CwOption, { value: option.key, children: option.label }, option.key))) }) })), isLoading ? (jsx("div", { className: `${styles$v.cardContainer}`, "data-layout": layout, style: gridStyle, "aria-busy": true, children: Array.from({ length: normalizeSkeletonCount(skeletonCards, 6) }, (_, index) => (jsx(CwCard, { isLoading: true, children: null }, `skeleton_${index}`))) })) : sortedItems.length === 0 ? (jsx("div", { className: styles$v.emptyState, children: emptyState || jsx("p", { children: "No items to display" }) })) : (jsxs(Fragment, { children: [jsx("div", { className: `${styles$v.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (jsx(React__default.Fragment, { children: renderCard(item, index) }, keyExtractor ? keyExtractor(item, index) : index))) }), totalPages > 1 && (jsxs("div", { className: styles$v.pagination, children: [jsx(CwButton, { variant: "icon", icon: "chevron-left", disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)) }), jsxs("span", { className: styles$v.pageInfo, children: [currentPage, " / ", totalPages] }), jsx(CwButton, { variant: "icon", icon: "chevron-right", disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)) })] }))] }))] }));
 }
-var styles$r = {"cw-accordion":"cw-accordion-module__cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module__cw-accordion-body__xlI8b"};
+var styles$u = {"cw-accordion":"cw-accordion-module__cw-accordion__ErvlW","cw-accordion-body":"cw-accordion-module__cw-accordion-body__xlI8b"};
 /**
  * Legacy collapsible section with its own header markup.
@@ -2100,7 +2100,7 @@ function CwAccordionContainer(CwelltAccordionContainerProps) {
         setVisible_accordionBody(!isVisible_accordionBody);
     };
     // #endregion
-    return (jsxs("div", { className: styles$r["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxs("header", { onClick: () => showAccordionBody(), children: [jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsx("button", { className: "cw-button-icon" })] }), jsx("div", { className: styles$r["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
+    return (jsxs("div", { className: styles$u["cw-accordion"], style: CwelltAccordionContainerProps.style, "data-open": isVisible_accordionBody, children: [jsxs("header", { onClick: () => showAccordionBody(), children: [jsx("div", { children: CwelltAccordionContainerProps.desc_text }), jsx("button", { className: "cw-button-icon" })] }), jsx("div", { className: styles$u["cw-accordion-body"], children: CwelltAccordionContainerProps.children })] }));
 }
 /*
@@ -2201,9 +2201,6 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
         return acc;
     }, {}));
     const [selectedKeys, setSelectedKeys] = useState(new Set(rowSelection?.selectedRowKeys || []));
-    useEffect(() => {
-        setCurrentPage(1);
-    }, [data]);
     useEffect(() => {
         setSelectedKeys(new Set(rowSelection?.selectedRowKeys || []));
     }, [rowSelection?.selectedRowKeys]);
@@ -2289,20 +2286,27 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
             return newSet;
         });
     }, [rowSelection, rowKey, sortedData]);
+    const totalPages = useMemo(() => {
+        return pagination ? Math.ceil(sortedData.length / localItemsPerPage) : 1;
+    }, [sortedData, localItemsPerPage, pagination]);
+    // Keep the page when data changes (e.g. a row was edited); only clamp it when it no longer exists.
+    // Derived in render so a shrunk data set never shows an empty page for a frame.
+    const page = Math.min(currentPage, Math.max(1, totalPages));
+    useEffect(() => {
+        if (page !== currentPage)
+            setCurrentPage(page);
+    }, [page, currentPage]);
     const paginatedData = useMemo(() => {
         if (!sortedData)
             return [];
         if (!pagination)
             return sortedData;
-        const start = (currentPage - 1) * localItemsPerPage;
+        const start = (page - 1) * localItemsPerPage;
         return sortedData.slice(start, start + localItemsPerPage);
-    }, [sortedData, currentPage, localItemsPerPage, pagination]);
-    const totalPages = useMemo(() => {
-        return pagination ? Math.ceil(sortedData.length / localItemsPerPage) : 1;
-    }, [sortedData, localItemsPerPage, pagination]);
-    const handlePageChange = (page) => {
-        if (page >= 1 && page <= totalPages)
-            setCurrentPage(page);
+    }, [sortedData, page, localItemsPerPage, pagination]);
+    const handlePageChange = (target) => {
+        if (target >= 1 && target <= totalPages)
+            setCurrentPage(target);
     };
     const startResize = (e, key) => {
         e.preventDefault();
@@ -2363,7 +2367,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                                                         ? "sortable"
                                                         : sortConfig.direction === "asc"
                                                             ? "sortable-asc"
-                                                            : "sortable-desc" }))] }), jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsx("tbody", { children: renderTableBody() })] }), pagination && data.length > pageSizeOptions[0] && (jsxs("footer", { className: "cw-table-pagination", children: [jsxs("div", { className: "cw-table-pagination-size", children: [jsx(CwIcon, { iconId: "list" }), jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, children: pageSizeOptions.map(size => (jsx("option", { value: size, children: pageLabel ? `${size} / ${pageLabel}` : size }, size))) })] }), jsxs("div", { className: "cw-table-pagination-nav", children: [jsx(CwButton, { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages <= 1, variant: "icon", icon: "chevron-left-double" }), jsx(CwButton, { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages <= 1, variant: "icon", icon: "chevron-left" }), jsx("input", { type: "text", inputMode: "numeric", value: totalPages === 0 ? 0 : currentPage, disabled: totalPages === 0, onChange: (e) => {
+                                                            : "sortable-desc" }))] }), jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), jsx("tbody", { children: renderTableBody() })] }), pagination && data.length > pageSizeOptions[0] && (jsxs("footer", { className: "cw-table-pagination", children: [jsxs("div", { className: "cw-table-pagination-size", children: [jsx(CwIcon, { iconId: "list" }), jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, children: pageSizeOptions.map(size => (jsx("option", { value: size, children: pageLabel ? `${size} / ${pageLabel}` : size }, size))) })] }), jsxs("div", { className: "cw-table-pagination-nav", children: [jsx(CwButton, { onClick: () => handlePageChange(1), disabled: page === 1 || totalPages <= 1, variant: "icon", icon: "chevron-left-double" }), jsx(CwButton, { onClick: () => handlePageChange(page - 1), disabled: page === 1 || totalPages <= 1, variant: "icon", icon: "chevron-left" }), jsx("input", { type: "text", inputMode: "numeric", value: totalPages === 0 ? 0 : page, disabled: totalPages === 0, onChange: (e) => {
                                     const value = parseInt(e.target.value, 10);
                                     if (!isNaN(value))
                                         handlePageChange(value);
@@ -2372,10 +2376,10 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                                     if (isNaN(value) || value < 1 || value > totalPages) {
                                         handlePageChange(1);
                                     }
-                                }, min: 1, max: totalPages }), jsx("span", { children: "/" }), jsx("span", { children: totalPages }), jsx(CwButton, { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
+                                }, min: 1, max: totalPages }), jsx("span", { children: "/" }), jsx("span", { children: totalPages }), jsx(CwButton, { onClick: () => handlePageChange(page + 1), disabled: page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right" }), jsx(CwButton, { onClick: () => handlePageChange(totalPages), disabled: page === totalPages || totalPages <= 1, variant: "icon", icon: "chevron-right-double" })] })] }))] }));
 }
-var styles$q = {"dropIndicator":"cw-sortable-table-module__dropIndicator__ov-Jz","dragging":"cw-sortable-table-module__dragging__MrLrz","saveBar":"cw-sortable-table-module__saveBar__3OdoZ cw-flex-row cw-align-center-center cw-gap-small"};
+var styles$t = {"dropIndicator":"cw-sortable-table-module__dropIndicator__ov-Jz","dragging":"cw-sortable-table-module__dragging__MrLrz","saveBar":"cw-sortable-table-module__saveBar__3OdoZ cw-flex-row cw-align-center-center cw-gap-small"};
 /**
  * Hook that provides state management for CwSortableTable.
@@ -2438,7 +2442,7 @@ function useSortableTable(initialItems) {
 }
 // ─── Drop indicator row ───────────────────────────────────────────────────────
-const DropIndicatorRow = ({ colSpan }) => (jsx("tr", { className: styles$q.dropIndicator, "aria-hidden": true, children: jsx("td", { colSpan: colSpan, children: jsx("div", {}) }) }));
+const DropIndicatorRow = ({ colSpan }) => (jsx("tr", { className: styles$t.dropIndicator, "aria-hidden": true, children: jsx("td", { colSpan: colSpan, children: jsx("div", {}) }) }));
 // ─── Loading skeleton ─────────────────────────────────────────────────────────
 // Plain td cells (no local class): the ghost cells get the same global cw-table
 // padding as real body cells, so row heights match the loaded rows exactly.
@@ -2541,11 +2545,11 @@ function CwSortableTable({ columns, data, rowKey = "key", onReorder, loading = f
         return items.map((item, index) => {
             const key = item[rowKey];
             const isDragging = draggedItem?.[rowKey] === key;
-            return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && (jsx(DropIndicatorRow, { colSpan: totalCols })), jsxs("tr", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, className: isDragging ? styles$q.dragging : "", children: [showHandle && (jsx("td", { className: "cw-table-col-action", children: jsx(CwIcon, { iconId: "grip-dots", color: "neutral", style: { opacity: 0.75 } }) })), columns.map(col => (jsx("td", { className: col.className ?? "", style: col.width ? { width: col.width } : undefined, children: renderCell(item, col) }, `${String(key)}_${col.key}`)))] }), index === items.length - 1 && dropIndicatorIndex === items.length && (jsx(DropIndicatorRow, { colSpan: totalCols }))] }, String(key)));
+            return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && (jsx(DropIndicatorRow, { colSpan: totalCols })), jsxs("tr", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, className: isDragging ? styles$t.dragging : "", children: [showHandle && (jsx("td", { className: "cw-table-col-action", children: jsx(CwIcon, { iconId: "grip-dots", color: "neutral", style: { opacity: 0.75 } }) })), columns.map(col => (jsx("td", { className: col.className ?? "", style: col.width ? { width: col.width } : undefined, children: renderCell(item, col) }, `${String(key)}_${col.key}`)))] }), index === items.length - 1 && dropIndicatorIndex === items.length && (jsx(DropIndicatorRow, { colSpan: totalCols }))] }, String(key)));
         });
     };
     // ── Render ──────────────────────────────────────────────────────────────
-    return (jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, "aria-busy": loading || undefined, children: [jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsx("thead", { children: jsxs("tr", { children: [showHandle && jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsx("tbody", { children: renderBody() })] }), !loading && hasChanges && (jsxs("footer", { className: styles$q.saveBar, children: [jsx(CwButton, { variant: "outline", color: "neutral", icon: "undo", text: discardLabel, onClick: handleDiscard }), jsx(CwButton, { variant: "solid", color: "primary", icon: "save", text: saveLabel, onClick: () => handleSave(onReorder) })] }))] }));
+    return (jsxs("div", { className: `cw-table-container ${className ?? ""}`, style: containerStyle, "aria-busy": loading || undefined, children: [jsxs("table", { className: `cw-table cw-sortable-table ${tableClassName ?? ""}`, style: { width: "100%" }, children: [jsx("thead", { children: jsxs("tr", { children: [showHandle && jsx("th", { className: "cw-table-col-action" }), columns.map(col => (jsx("th", { className: col.className ?? "", style: col.width ? { width: col.width, minWidth: 50 } : undefined, children: col.title }, col.key)))] }) }), jsx("tbody", { children: renderBody() })] }), !loading && hasChanges && (jsxs("footer", { className: styles$t.saveBar, children: [jsx(CwButton, { variant: "outline", color: "neutral", icon: "undo", text: discardLabel, onClick: handleDiscard }), jsx(CwButton, { variant: "solid", color: "primary", icon: "save", text: saveLabel, onClick: () => handleSave(onReorder) })] }))] }));
 }
 /**
@@ -2746,7 +2750,7 @@ 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$p = {"cw-tabs":"cw-tabs-module__cw-tabs__1pmji","cw-tabs-content":"cw-tabs-module__cw-tabs-content__HTp8d"};
+var styles$s = {"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) {
@@ -2800,11 +2804,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$p['cw-tabs'] + (CwTabsProps.className ? ` ${CwTabsProps.className}` : "") + "", style: CwTabsProps.style, "data-tabs-position": position, children: [jsx("ul", { style: tabsListStyle, children: CwTabsProps.tabs.map(tab => {
+    return (jsxs("div", { id: CwTabsProps.id, "data-testid": CwTabsProps.testId, className: styles$s['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$p['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 })] }));
+                }) }), jsx("div", { className: styles$s['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 })] }));
 }
 /**
@@ -2832,7 +2836,7 @@ const CwExpandable = ({ briefing, onToggle, onOpen, onClose, children, ...detail
     return (jsxs("details", { ref: myRef, ...detailsProps, className: "cw-expandable", children: [jsx("summary", { children: briefing }), children && jsx("section", { children: children })] }));
 };
-var styles$o = {"cw-master-detail":"cw-master-detail-module__cw-master-detail__O8-FA","resizer":"cw-master-detail-module__resizer__hvGhL","detail":"cw-master-detail-module__detail__BG4Dm","skeletonRow":"cw-master-detail-module__skeletonRow__6BUgt","detailSkeleton":"cw-master-detail-module__detailSkeleton__GcDS4","detail-empty":"cw-master-detail-module__detail-empty__KFScK"};
+var styles$r = {"cw-master-detail":"cw-master-detail-module__cw-master-detail__O8-FA","resizer":"cw-master-detail-module__resizer__hvGhL","detail":"cw-master-detail-module__detail__BG4Dm","skeletonRow":"cw-master-detail-module__skeletonRow__6BUgt","detailSkeleton":"cw-master-detail-module__detailSkeleton__GcDS4","detail-empty":"cw-master-detail-module__detail-empty__KFScK"};
 /*
  * Fixed rem widths for the ghosts: the master rows and detail panel size their
@@ -2876,12 +2880,12 @@ const CwMasterDetail = ({ id, className, style, items, selectedKey, onSelect, de
             document.body.style.userSelect = '';
         };
     }, [isResizing, minMasterWidth, maxMasterWidth]);
-    const rootClassName = [styles$o['cw-master-detail'], className].filter(Boolean).join(' ');
+    const rootClassName = [styles$r['cw-master-detail'], className].filter(Boolean).join(' ');
     return (jsxs("div", { id: id, ref: containerRef, className: rootClassName, style: style, "aria-busy": loading || undefined, children: [jsxs("aside", { style: { width: masterWidth, minWidth: masterWidth }, children: [showSearch && (jsx("search", { children: jsx("input", { type: "text", placeholder: searchPlaceholder, onChange: (e) => onSearch?.(e.target.value) }) })), masterHeader && (jsx("header", { children: masterHeader })), jsx("ul", { children: loading
-                            ? Array.from({ length: skeletonRows }, (_unused, rowIndex) => (jsxs("li", { "aria-hidden": "true", children: [jsx(CwSkeleton, { variant: "circle", height: "2rem" }), jsxs("div", { className: styles$o.skeletonRow, children: [jsx(CwSkeleton, { variant: "text", width: MASTER_TITLE_WIDTHS[rowIndex % MASTER_TITLE_WIDTHS.length] }), jsx(CwSkeleton, { variant: "text", width: MASTER_SUBTITLE_WIDTH })] })] }, `skeleton_${rowIndex}`)))
-                            : items.map((item) => (jsx("li", { "data-master-key": item.key, "data-selected": item.key === selectedKey, "data-disabled": item.disabled, onClick: () => onSelect?.(item.key), children: item.content }, item.key))) }), masterFooter && (jsx("footer", { children: masterFooter }))] }), resizable && (jsx("div", { className: styles$o.resizer, "data-resizing": isResizing, onMouseDown: handleMouseDown })), jsx("section", { className: styles$o.detail, children: loading ? (jsxs("div", { className: styles$o.detailSkeleton, "aria-hidden": "true", children: [jsx(CwSkeleton, { variant: "text", width: "14rem", height: "1.5em" }), jsx(CwSkeleton, { variant: "text", width: "22rem" }), jsx(CwSkeleton, { variant: "text", width: "18rem" }), jsx(CwSkeleton, { variant: "text", width: "20rem" })] })) : selectedKey && detailContent
+                            ? Array.from({ length: skeletonRows }, (_unused, rowIndex) => (jsxs("li", { "aria-hidden": "true", children: [jsx(CwSkeleton, { variant: "circle", height: "2rem" }), jsxs("div", { className: styles$r.skeletonRow, children: [jsx(CwSkeleton, { variant: "text", width: MASTER_TITLE_WIDTHS[rowIndex % MASTER_TITLE_WIDTHS.length] }), jsx(CwSkeleton, { variant: "text", width: MASTER_SUBTITLE_WIDTH })] })] }, `skeleton_${rowIndex}`)))
+                            : items.map((item) => (jsx("li", { "data-master-key": item.key, "data-selected": item.key === selectedKey, "data-disabled": item.disabled, onClick: () => onSelect?.(item.key), children: item.content }, item.key))) }), masterFooter && (jsx("footer", { children: masterFooter }))] }), resizable && (jsx("div", { className: styles$r.resizer, "data-resizing": isResizing, onMouseDown: handleMouseDown })), jsx("section", { className: styles$r.detail, children: loading ? (jsxs("div", { className: styles$r.detailSkeleton, "aria-hidden": "true", children: [jsx(CwSkeleton, { variant: "text", width: "14rem", height: "1.5em" }), jsx(CwSkeleton, { variant: "text", width: "22rem" }), jsx(CwSkeleton, { variant: "text", width: "18rem" }), jsx(CwSkeleton, { variant: "text", width: "20rem" })] })) : selectedKey && detailContent
                     ? detailContent
-                    : (jsx("div", { className: styles$o['detail-empty'], children: emptyDetail ?? 'Select an item to view details' })) })] }));
+                    : (jsx("div", { className: styles$r['detail-empty'], children: emptyDetail ?? 'Select an item to view details' })) })] }));
 };
 /*
@@ -2921,7 +2925,7 @@ const CwKeyValueList = ({ items, className = "", emptyValue = "-", direction = "
     return (jsx("dl", { className: `cw-keyvalue-list ${className}`, "data-direction": groupLayout?.direction, "data-align": groupLayout?.align, "data-justify": groupLayout?.justify, "data-gap": groupLayout?.gap, "aria-busy": loading || undefined, ...htmlProps, children: renderItems() }));
 };
-var styles$n = {"sortableList":"cw-sortable-list-module__sortableList__PyLO-","sortableItem":"cw-sortable-list-module__sortableItem__FAnn2","readOnly":"cw-sortable-list-module__readOnly__r7GcH","dragging":"cw-sortable-list-module__dragging__MD715","moved":"cw-sortable-list-module__moved__sE6-N","expandedContent":"cw-sortable-list-module__expandedContent__Kocna","sortableHandle":"cw-sortable-list-module__sortableHandle__HvYBK","sortableContent":"cw-sortable-list-module__sortableContent__C6JhR","sortableTitle":"cw-sortable-list-module__sortableTitle__EgWXr","sortableExtraContent":"cw-sortable-list-module__sortableExtraContent__s4LSv","sortableActions":"cw-sortable-list-module__sortableActions__gwQOU","dropIndicator":"cw-sortable-list-module__dropIndicator__MNSF-","emptyMessage":"cw-sortable-list-module__emptyMessage__gMpaL"};
+var styles$q = {"sortableList":"cw-sortable-list-module__sortableList__PyLO-","sortableItem":"cw-sortable-list-module__sortableItem__FAnn2","readOnly":"cw-sortable-list-module__readOnly__r7GcH","dragging":"cw-sortable-list-module__dragging__MD715","moved":"cw-sortable-list-module__moved__sE6-N","expandedContent":"cw-sortable-list-module__expandedContent__Kocna","sortableHandle":"cw-sortable-list-module__sortableHandle__HvYBK","sortableContent":"cw-sortable-list-module__sortableContent__C6JhR","sortableTitle":"cw-sortable-list-module__sortableTitle__EgWXr","sortableExtraContent":"cw-sortable-list-module__sortableExtraContent__s4LSv","sortableActions":"cw-sortable-list-module__sortableActions__gwQOU","dropIndicator":"cw-sortable-list-module__dropIndicator__MNSF-","emptyMessage":"cw-sortable-list-module__emptyMessage__gMpaL"};
 function CwSortableList({ items, onReorder, renderItem, className = '', movedItems = new Set(), emptyMessage = "No elements to show", readOnly = false, maxHeight = "300px", }) {
     const [draggedItem, setDraggedItem] = useState(null);
@@ -2984,15 +2988,15 @@ function CwSortableList({ items, onReorder, renderItem, className = '', movedIte
         }
     };
     if (items.length === 0) {
-        return (jsx("div", { className: `${styles$n.sortableList} ${styles$n.emptyState} ${className}`, children: jsx("div", { className: styles$n.emptyMessage, children: emptyMessage }) }));
+        return (jsx("div", { className: `${styles$q.sortableList} ${styles$q.emptyState} ${className}`, children: jsx("div", { className: styles$q.emptyMessage, children: emptyMessage }) }));
     }
-    return (jsx("div", { className: `${styles$n.sortableList} ${className}`, style: { maxHeight }, children: items.map((item, index) => {
+    return (jsx("div", { className: `${styles$q.sortableList} ${className}`, style: { maxHeight }, children: items.map((item, index) => {
             const { title, extraContent, actions, showHandle = true, expandedContent } = renderItem(item);
             const isDragging = draggedItem?.id === item.id;
             const isMoved = movedItems.has(item.id);
             const canExpand = Boolean(expandedContent);
             const isExpanded = expandedItems.has(item.id);
-            return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && jsx("div", { className: styles$n.dropIndicator }), jsxs("div", { className: `${styles$n.sortableItem} ${isDragging ? styles$n.dragging : ''} ${isMoved ? styles$n.moved : ''} ${readOnly ? styles$n.readOnly : ''}`, draggable: !readOnly, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [jsxs("header", { children: [canExpand ? (jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsx("div", { className: styles$n.sortableHandle, children: jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxs("div", { className: styles$n.sortableContent, children: [jsx("div", { className: styles$n.sortableTitle, children: title }), extraContent && jsx("div", { className: styles$n.sortableExtraContent, children: extraContent })] }), jsx("div", { className: styles$n.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsx("div", { className: styles$n.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsx("div", { className: styles$n.dropIndicator }))] }, item.id));
+            return (jsxs(React__default.Fragment, { children: [dropIndicatorIndex === index && jsx("div", { className: styles$q.dropIndicator }), jsxs("div", { className: `${styles$q.sortableItem} ${isDragging ? styles$q.dragging : ''} ${isMoved ? styles$q.moved : ''} ${readOnly ? styles$q.readOnly : ''}`, draggable: !readOnly, onDragStart: (e) => handleDragStart(e, item), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, children: [jsxs("header", { children: [canExpand ? (jsx(CwButton, { variant: "icon", onClick: () => toggleExpanded(item.id), type: "button", title: isExpanded ? "Collapse" : "Expand", icon: isExpanded ? "chevron-up" : "chevron-down" })) : showHandle ? (jsx("div", { className: styles$q.sortableHandle, children: jsx(CwIcon, { iconId: "grip-dots" }) })) : null, jsxs("div", { className: styles$q.sortableContent, children: [jsx("div", { className: styles$q.sortableTitle, children: title }), extraContent && jsx("div", { className: styles$q.sortableExtraContent, children: extraContent })] }), jsx("div", { className: styles$q.sortableActions, children: actions })] }), isExpanded && expandedContent && (jsx("div", { className: styles$q.expandedContent, children: expandedContent }))] }), !readOnly && dropIndicatorIndex === items.length && index === items.length - 1 && (jsx("div", { className: styles$q.dropIndicator }))] }, item.id));
         }) }));
 }
@@ -3119,7 +3123,7 @@ const CwTableGrouped = props => {
                                 group.rows.map((child, j) => (jsx("tr", { "data-row": true, "data-row-last-of-group": j == group.rows.length - 1, children: child.cells.map((cell, k) => (jsx("td", { children: cell.content }, k))) }, j)))] }, i))) }), jsx("tfoot", {})] }) }));
 };
-var styles$m = {"fileUploadContainer":"cw-file-upload-multiple-module__fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module__hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module__uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module__uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module__uploadTitle__gjRk8","uploadSubtitle":"cw-file-upload-multiple-module__uploadSubtitle__Z0S5t","filesContainer":"cw-file-upload-multiple-module__filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module__fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module__fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module__fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module__fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module__fileName__DjepK","fileSize":"cw-file-upload-multiple-module__fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module__smallButton__siUAh"};
+var styles$p = {"fileUploadContainer":"cw-file-upload-multiple-module__fileUploadContainer__liEc1","hiddenInput":"cw-file-upload-multiple-module__hiddenInput__TZBBI","uploadArea":"cw-file-upload-multiple-module__uploadArea__DdOhs","uploadAreaDisabled":"cw-file-upload-multiple-module__uploadAreaDisabled__VWeFX","uploadTitle":"cw-file-upload-multiple-module__uploadTitle__gjRk8","uploadSubtitle":"cw-file-upload-multiple-module__uploadSubtitle__Z0S5t","filesContainer":"cw-file-upload-multiple-module__filesContainer__g44PY","fileItem":"cw-file-upload-multiple-module__fileItem__w27Dg","fileIcon":"cw-file-upload-multiple-module__fileIcon__iJJUX","fileExtension":"cw-file-upload-multiple-module__fileExtension__vOuHv","fileInfo":"cw-file-upload-multiple-module__fileInfo__R5ZTv","fileName":"cw-file-upload-multiple-module__fileName__DjepK","fileSize":"cw-file-upload-multiple-module__fileSize__b8GSm","smallButton":"cw-file-upload-multiple-module__smallButton__siUAh"};
 const DEFAULT_LABELS$1 = {
     uploadDisabled: 'Upload disabled',
@@ -3305,12 +3309,12 @@ function CwFileUploadMultiple(fileUploadProps) {
             }
         }
     };
-    return (jsxs("div", { className: `${styles$m.fileUploadContainer} ${fileUploadProps.className}`, children: [jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelectInternal, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles$m.hiddenInput }), selectedFiles.length === 0 && !existingFile ? (jsxs("div", { className: `${styles$m.uploadArea} ${fileUploadProps.disabled ? styles$m.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsx(CwIcon, { iconId: "upload" }), jsx("p", { className: `${styles$m.uploadTitle}`, children: fileUploadProps.disabled ? labels.uploadDisabled : labels.clickToUpload }), jsxs("p", { className: `${styles$m.uploadSubtitle}`, children: [fileUploadProps.accept ? labels.acceptedFiles(fileUploadProps.accept) : labels.allTypesAccepted, !fileUploadProps.multiple && ` ${labels.singleFileOnly}`] })] })) : selectedFiles.length === 0 && existingFile ? (jsxs("div", { className: styles$m.filesContainer, children: [jsxs("div", { className: styles$m.fileItem, children: [jsxs("div", { className: styles$m.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$m.fileExtension, children: getFileExtension(existingFile) })] }), jsx("div", { className: styles$m.fileInfo, children: jsx("p", { className: styles$m.fileName, children: existingFile }) }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => {
+    return (jsxs("div", { className: `${styles$p.fileUploadContainer} ${fileUploadProps.className}`, children: [jsx("input", { ref: fileInputRef, type: "file", name: fileUploadProps.name, accept: fileUploadProps.accept, multiple: fileUploadProps.multiple, onChange: handleFileSelectInternal, disabled: fileUploadProps.disabled, "aria-label": "files", className: styles$p.hiddenInput }), selectedFiles.length === 0 && !existingFile ? (jsxs("div", { className: `${styles$p.uploadArea} ${fileUploadProps.disabled ? styles$p.uploadAreaDisabled : ''}`, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !fileUploadProps.disabled ? handleButtonClick : undefined, children: [jsx(CwIcon, { iconId: "upload" }), jsx("p", { className: `${styles$p.uploadTitle}`, children: fileUploadProps.disabled ? labels.uploadDisabled : labels.clickToUpload }), jsxs("p", { className: `${styles$p.uploadSubtitle}`, children: [fileUploadProps.accept ? labels.acceptedFiles(fileUploadProps.accept) : labels.allTypesAccepted, !fileUploadProps.multiple && ` ${labels.singleFileOnly}`] })] })) : selectedFiles.length === 0 && existingFile ? (jsxs("div", { className: styles$p.filesContainer, children: [jsxs("div", { className: styles$p.fileItem, children: [jsxs("div", { className: styles$p.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$p.fileExtension, children: getFileExtension(existingFile) })] }), jsx("div", { className: styles$p.fileInfo, children: jsx("p", { className: styles$p.fileName, children: existingFile }) }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => {
                                     setExistingFile(undefined);
                                     if (fileUploadProps.onSelect) {
                                         fileUploadProps.onSelect(null);
                                     }
-                                }, disabled: fileUploadProps.disabled, className: styles$m.smallButton })] }), jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxs("div", { className: styles$m.filesContainer, children: [jsxs("header", { className: "cw-flex-row cw-align-between-center cw-flex-wrap", children: [jsx("small", { className: styles$m.filesCount, children: fileUploadProps.statusText ?? labels.filesSelected(selectedFiles.length) }), jsxs("div", { className: "cw-flex-row", children: [fileUploadProps.onConfirm && selectedFiles.length > 0 && (jsx(CwButton, { onClick: () => {
+                                }, disabled: fileUploadProps.disabled, className: styles$p.smallButton })] }), jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled })] })) : (jsxs("div", { className: styles$p.filesContainer, children: [jsxs("header", { className: "cw-flex-row cw-align-between-center cw-flex-wrap", children: [jsx("small", { className: styles$p.filesCount, children: fileUploadProps.statusText ?? labels.filesSelected(selectedFiles.length) }), jsxs("div", { className: "cw-flex-row", children: [fileUploadProps.onConfirm && selectedFiles.length > 0 && (jsx(CwButton, { onClick: () => {
                                             let files = fileInputRef.current?.files ?? null;
                                             if (!files) {
                                                 const dataTransfer = new DataTransfer();
@@ -3318,7 +3322,7 @@ function CwFileUploadMultiple(fileUploadProps) {
                                                 files = dataTransfer.files;
                                             }
                                             fileUploadProps.onConfirm?.(files);
-                                        }, disabled: fileUploadProps.disabled || fileUploadProps.confirmDisabled, icon: "upload", text: fileUploadProps.confirmLabel ?? labels.upload })), !fileUploadProps.hideClearAll && (jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: labels.clearAll }))] })] }), selectedFiles.map((file, index) => (jsxs("div", { className: styles$m.fileItem, children: [jsxs("div", { className: styles$m.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$m.fileExtension, children: getFileExtension(file.name) })] }), jsxs("div", { className: styles$m.fileInfo, children: [jsx("p", { className: styles$m.fileName, children: file.name }), jsxs("p", { className: styles$m.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$m.smallButton })] }, `${file.name}-${file.size}`))), fileUploadProps.multiple && (jsx(CwButton, { text: labels.addMoreFiles, icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
+                                        }, disabled: fileUploadProps.disabled || fileUploadProps.confirmDisabled, icon: "upload", text: fileUploadProps.confirmLabel ?? labels.upload })), !fileUploadProps.hideClearAll && (jsx(CwButton, { onClick: removeAllFiles, disabled: fileUploadProps.disabled, color: "danger", variant: "outline", icon: "delete", text: labels.clearAll }))] })] }), selectedFiles.map((file, index) => (jsxs("div", { className: styles$p.fileItem, children: [jsxs("div", { className: styles$p.fileIcon, children: [jsx(CwIcon, { iconId: "page" }), jsx("span", { className: styles$p.fileExtension, children: getFileExtension(file.name) })] }), jsxs("div", { className: styles$p.fileInfo, children: [jsx("p", { className: styles$p.fileName, children: file.name }), jsxs("p", { className: styles$p.fileSize, children: [(file.size / 1024).toFixed(1), " KB"] })] }), jsx(CwButton, { variant: "icon", icon: "close", color: "neutral", onClick: () => removeFile(index), className: styles$p.smallButton })] }, `${file.name}-${file.size}`))), fileUploadProps.multiple && (jsx(CwButton, { text: labels.addMoreFiles, icon: "plus", variant: "outline", onClick: handleButtonClick, disabled: fileUploadProps.disabled })), !fileUploadProps.multiple && (jsx(CwButton, { text: labels.changeFile, icon: "refresh", onClick: handleButtonClick, disabled: fileUploadProps.disabled }))] }))] }));
 }
 /**
@@ -3371,7 +3375,7 @@ function CwDigit(props) {
     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$l = {"colorPreview":"cw-color-picker-module__colorPreview__ylJcD","hueBar":"cw-color-picker-module__hueBar__bFhyC","hueBarSlider":"cw-color-picker-module__hueBarSlider__D53IV","colorPickerInteractiveArea":"cw-color-picker-module__colorPickerInteractiveArea__KZFR1","colorArea":"cw-color-picker-module__colorArea__xgpSE","colorAreaOverlay":"cw-color-picker-module__colorAreaOverlay__pmgOc","hueBackground":"cw-color-picker-module__hueBackground__Mks78","whiteGradient":"cw-color-picker-module__whiteGradient__Bt-fU","blackGradient":"cw-color-picker-module__blackGradient__VnEKJ","colorAreaCursor":"cw-color-picker-module__colorAreaCursor__lotg3"};
+var styles$o = {"colorPreview":"cw-color-picker-module__colorPreview__ylJcD","hueBar":"cw-color-picker-module__hueBar__bFhyC","hueBarSlider":"cw-color-picker-module__hueBarSlider__D53IV","colorPickerInteractiveArea":"cw-color-picker-module__colorPickerInteractiveArea__KZFR1","colorArea":"cw-color-picker-module__colorArea__xgpSE","colorAreaOverlay":"cw-color-picker-module__colorAreaOverlay__pmgOc","hueBackground":"cw-color-picker-module__hueBackground__Mks78","whiteGradient":"cw-color-picker-module__whiteGradient__Bt-fU","blackGradient":"cw-color-picker-module__blackGradient__VnEKJ","colorAreaCursor":"cw-color-picker-module__colorAreaCursor__lotg3"};
 const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }) => {
     const [rgb, setRgb] = useState({ r: 255, g: 255, b: 255 });
@@ -3574,13 +3578,13 @@ const CwColorPicker = ({ initialColor, onChange, previewText = "Color preview" }
     // Calculate background color for the main area based on current hue
     const hueColor = hsvToRgb(hsv.h, 100, 100);
     const hueHex = rgbToHex(hueColor.r, hueColor.g, hueColor.b);
-    return (jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsx("div", { className: styles$l.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxs("div", { children: [jsx("label", { children: "R:" }), jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "G:" }), jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "B:" }), jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxs("div", { className: styles$l.colorPickerInteractiveArea, children: [jsx("div", { className: styles$l.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsx("div", { className: styles$l.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxs("div", { className: styles$l.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxs("div", { className: styles$l.colorAreaOverlay, children: [jsx("div", { className: styles$l.hueBackground, style: { backgroundColor: hueHex } }), jsx("div", { className: styles$l.whiteGradient }), jsx("div", { className: styles$l.blackGradient })] }), jsx("div", { className: styles$l.colorAreaCursor, style: {
+    return (jsxs("div", { className: "cw-flex-column cw-gap-small", children: [jsxs("div", { className: "cw-flex-row cw-align-between-center cw-gap-small", children: [jsx("div", { className: styles$o.colorPreview, style: { backgroundColor: hexColor, color: getContrastColor(hexColor) }, children: previewText }), jsx("button", { type: "button", className: "cw-button", onClick: toggleInputMode, style: { minWidth: "3ch" }, children: inputMode === 'hex' ? 'RGB' : 'HEX' })] }), jsx("div", { className: "color-inputs-row", children: inputMode === 'hex' ? (jsx("input", { type: "text", value: hexColor, onChange: handleHexChange })) : (jsxs("div", { className: "cw-grid-base-3 cw-gap-small", children: [jsxs("div", { children: [jsx("label", { children: "R:" }), jsx("input", { type: "number", name: "r", min: "0", max: "255", value: rgb.r, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "G:" }), jsx("input", { type: "number", name: "g", min: "0", max: "255", value: rgb.g, onChange: handleRgbChange })] }), jsxs("div", { children: [jsx("label", { children: "B:" }), jsx("input", { type: "number", name: "b", min: "0", max: "255", value: rgb.b, onChange: handleRgbChange })] })] })) }), jsxs("div", { className: styles$o.colorPickerInteractiveArea, children: [jsx("div", { className: styles$o.hueBar, ref: hueBarRef, onClick: handleHueBarClick, children: jsx("div", { className: styles$o.hueBarSlider, style: { top: `${(360 - hsv.h) / 360 * 100}%` } }) }), jsxs("div", { className: styles$o.colorArea, ref: colorAreaRef, onClick: handleColorAreaClick, children: [jsxs("div", { className: styles$o.colorAreaOverlay, children: [jsx("div", { className: styles$o.hueBackground, style: { backgroundColor: hueHex } }), jsx("div", { className: styles$o.whiteGradient }), jsx("div", { className: styles$o.blackGradient })] }), jsx("div", { className: styles$o.colorAreaCursor, style: {
                                     left: `${hsv.s}%`,
                                     top: `${100 - hsv.v}%`
                                 } })] })] })] }));
 };
-var styles$k = {"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"};
+var styles$n = {"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, className, style, }) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -3713,11 +3717,11 @@ const CwInputColor = ({ value, onChange, previewText = "Color preview", disabled
                 break;
         }
     };
-    return (jsxs("div", { className: `cw-input-color ${styles$k.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$k.selectColor} ${disabled ? styles$k.disabled : ''} ${readOnly ? styles$k.readOnly : ''}`, style: {
+    return (jsxs("div", { className: `cw-input-color ${styles$n.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$n.selectColor} ${disabled ? styles$n.disabled : ''} ${readOnly ? styles$n.readOnly : ''}`, style: {
                     width,
                     height,
                     backgroundColor: value,
-                }, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-readonly": readOnly, role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && createPortal(jsx("div", { ref: dropdownRef, className: styles$k.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
+                }, "aria-label": "Open color picker", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-readonly": readOnly, role: "button", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown }), isOpen && createPortal(jsx("div", { ref: dropdownRef, className: styles$n.colorDropdown, style: dropdownStyle, role: "dialog", "aria-modal": "true", "aria-label": "Color picker", children: jsx(CwColorPicker, { initialColor: value, onChange: handleColorChange, previewText: previewText }) }), document.body)] }));
 };
 /**
@@ -3972,7 +3976,7 @@ function CwInputDateText(props) {
     return (jsx("div", { className: "cw-input-date-text", children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxs(CwLabel, { ...labelProps, children: [iconProps && jsx(CwIcon, { ...iconProps }), labelProps.text] })), jsxs("div", { children: [jsx("input", { type: "text", disabled: disabled, maxLength: 10, onChange: onChangeInputText, pattern: "^$ --|[.0-9\\/\\-]{10}", placeholder: format.toLowerCase(), readOnly: readOnly, ref: textInputRef, required: required, size: width, tabIndex: tabIndex, value: displayedDate }), jsxs("span", { children: [jsx(CwIcon, { iconId: "calendar" }), jsx("input", { type: "date", disabled: disabled, onChange: onChangeInputDate, readOnly: readOnly, ref: dateInputRef, tabIndex: -1, value: date, ...inputProps })] })] }), buttonProps && jsx(CwButton, { ...buttonProps })] }) }));
 }
-var styles$j = {"hiddenInput":"cw-input-image-module__hiddenInput__pS7hb","dropZone":"cw-input-image-module__dropZone__ygrGu","title":"cw-input-image-module__title__Rji5M","subtitle":"cw-input-image-module__subtitle__djYYu","container":"cw-input-image-module__container__qh7Tm"};
+var styles$m = {"hiddenInput":"cw-input-image-module__hiddenInput__pS7hb","dropZone":"cw-input-image-module__dropZone__ygrGu","title":"cw-input-image-module__title__Rji5M","subtitle":"cw-input-image-module__subtitle__djYYu","container":"cw-input-image-module__container__qh7Tm"};
 const DEFAULT_LABELS = {
     dropImageHere: "Drop image here",
@@ -4051,7 +4055,7 @@ function CwInputImage(props) {
         const file = e.currentTarget.files?.[0];
         void handleFile(file ?? null);
     };
-    return (jsxs("div", { className: `cw-input-image ${styles$j.container}`, "data-size": size, children: [jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, className: styles$j.dropZone, children: [jsx(CwIcon, { iconId: "upload" }), jsxs("div", { className: "cw-flex-column cw-gap-tiny", children: [jsx("p", { className: styles$j.title, children: labels.dropImageHere }), jsx("p", { className: styles$j.subtitle, children: labels.acceptedFormats(allowedFormats.join(", ").replace(/image\//g, "")) })] })] }), jsxs("div", { className: "cw-flex-row cw-align-center-center cw-gap-small", children: [jsx(CwButton, { onClick: onPasteButtonClick, icon: "paste", text: labels.paste, size: size }), jsx(CwButton, { onClick: () => inputRef.current?.click(), icon: "folder-open", text: labels.browse, size: size })] }), jsx("input", { ref: inputRef, type: "file", accept: allowedFormats.join(","), onChange: handleFileChange, className: styles$j.hiddenInput, ...inputProps })] }));
+    return (jsxs("div", { className: `cw-input-image ${styles$m.container}`, "data-size": size, children: [jsxs("div", { onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, className: styles$m.dropZone, children: [jsx(CwIcon, { iconId: "upload" }), jsxs("div", { className: "cw-flex-column cw-gap-tiny", children: [jsx("p", { className: styles$m.title, children: labels.dropImageHere }), jsx("p", { className: styles$m.subtitle, children: labels.acceptedFormats(allowedFormats.join(", ").replace(/image\//g, "")) })] })] }), jsxs("div", { className: "cw-flex-row cw-align-center-center cw-gap-small", children: [jsx(CwButton, { onClick: onPasteButtonClick, icon: "paste", text: labels.paste, size: size }), jsx(CwButton, { onClick: () => inputRef.current?.click(), icon: "folder-open", text: labels.browse, size: size })] }), jsx("input", { ref: inputRef, type: "file", accept: allowedFormats.join(","), onChange: handleFileChange, className: styles$m.hiddenInput, ...inputProps })] }));
 }
 /**
@@ -4183,7 +4187,7 @@ const CwImageArea = forwardRef((props, ref) => {
 });
 CwImageArea.displayName = "CwImageArea";
-var styles$i = {"container":"cw-weekday-selector-module__container__pwcvx","days":"cw-weekday-selector-module__days__Dd3RH"};
+var styles$l = {"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);
@@ -4381,16 +4385,16 @@ const CwWeekdaySelector = ({ value = "mtwrfsu", onChange, disabled = false, labe
     // 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", { ...dataAttributes, className: `cw-weekday-selector ${styles$i.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$i.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)))] }));
+    return (jsxs("div", { ...dataAttributes, className: `cw-weekday-selector ${styles$l.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$l.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$h = {"check-container":"cw-check-module__check-container__4nscZ","group":"cw-check-module__group__6JCQo","options":"cw-check-module__options__-g9LF"};
+var styles$k = {"check-container":"cw-check-module__check-container__4nscZ","group":"cw-check-module__group__6JCQo","options":"cw-check-module__options__-g9LF"};
 function CwCheck(props) {
     const { labelProps, labelText, direction, alignment, className, ...inputProps } = props;
     const resolvedDirection = direction ?? alignment ?? "row";
     const displayText = labelProps?.text ?? labelText;
-    return (jsx("div", { className: `cw-check ${styles$h["check-container"]}${className ? ` ${className}` : ''}`, children: jsxs("label", { "data-direction": resolvedDirection, children: [jsx("input", { type: "checkbox", ...inputProps }), displayText && (jsx("span", { className: "cw-icon-text", children: displayText }))] }) }));
+    return (jsx("div", { className: `cw-check ${styles$k["check-container"]}${className ? ` ${className}` : ''}`, children: jsxs("label", { "data-direction": resolvedDirection, children: [jsx("input", { type: "checkbox", ...inputProps }), displayText && (jsx("span", { className: "cw-icon-text", children: displayText }))] }) }));
 }
 function CwCheckbox(CwCheckboxProps) {
@@ -4444,14 +4448,14 @@ 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$h.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$h.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)))] }));
+    return (jsxs("div", { className: `cw-checkbox-group ${styles$k.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$k.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$g = {"radio":"cw-radio-module__radio__5sh7a","group":"cw-radio-module__group__br-HM","options":"cw-radio-module__options__LSw7M"};
+var styles$j = {"radio":"cw-radio-module__radio__5sh7a","group":"cw-radio-module__group__br-HM","options":"cw-radio-module__options__LSw7M"};
 /** Single native radio input. Building block for CwRadioGroup. */
 function CwRadio({ label, direction = "row", className, ...inputProps }) {
-    return (jsxs("label", { className: `cw-radio ${styles$g.radio}${className ? ` ${className}` : ""}`, "data-direction": direction, children: [jsx("input", { type: "radio", ...inputProps }), label && jsx("span", { children: label })] }));
+    return (jsxs("label", { className: `cw-radio ${styles$j.radio}${className ? ` ${className}` : ""}`, "data-direction": direction, children: [jsx("input", { type: "radio", ...inputProps }), label && jsx("span", { children: label })] }));
 }
 /**
@@ -4478,7 +4482,7 @@ function CwRadioGroup({ options, value, onChange, labelProps, groupLayout, itemL
     // (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$g.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$g.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)))] }));
+    return (jsxs("div", { className: `cw-radio-group ${styles$j.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$j.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) {
@@ -4619,7 +4623,7 @@ function useDropdownPortal({ anchorRef, isOpen, onClose, positionStrategy = defa
     return { panelRef, panelStyle: style, renderPanel };
 }
-var styles$f = {"dropdown":"cw-dropdown-module__dropdown__EFZ9M cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-dropdown-module__option__TuMdI cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-dropdown-module__optionFocused__7LGaC cw-choice-dropdown-module__optionFocused__BYMxj","optionSelected":"cw-dropdown-module__optionSelected__OiXIc cw-choice-dropdown-module__optionSelected__Lt8Xg","optionDisabled":"cw-dropdown-module__optionDisabled__lYM6w cw-choice-dropdown-module__optionDisabled__n3scM","emptyState":"cw-dropdown-module__emptyState__gp8KT cw-choice-dropdown-module__emptyState__HO0Y7","searchBox":"cw-dropdown-module__searchBox__Bx0JE cw-choice-dropdown-module__searchBox__0gox7","searchInput":"cw-dropdown-module__searchInput__JrxCK cw-choice-dropdown-module__searchInput__G5oRs","value":"cw-dropdown-module__value__i-7IN","colorCircle":"cw-dropdown-module__colorCircle__5kgiT cw-choice-dropdown-module__colorCircle__x7mI9"};
+var styles$i = {"dropdown":"cw-dropdown-module__dropdown__EFZ9M cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-dropdown-module__option__TuMdI cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-dropdown-module__optionFocused__7LGaC cw-choice-dropdown-module__optionFocused__BYMxj","optionSelected":"cw-dropdown-module__optionSelected__OiXIc cw-choice-dropdown-module__optionSelected__Lt8Xg","optionDisabled":"cw-dropdown-module__optionDisabled__lYM6w cw-choice-dropdown-module__optionDisabled__n3scM","emptyState":"cw-dropdown-module__emptyState__gp8KT cw-choice-dropdown-module__emptyState__HO0Y7","searchBox":"cw-dropdown-module__searchBox__Bx0JE cw-choice-dropdown-module__searchBox__0gox7","searchInput":"cw-dropdown-module__searchInput__JrxCK cw-choice-dropdown-module__searchInput__G5oRs","value":"cw-dropdown-module__value__i-7IN","colorCircle":"cw-dropdown-module__colorCircle__5kgiT cw-choice-dropdown-module__colorCircle__x7mI9"};
 /**
  * Custom dropdown component with colour-coded options, optional search filter, and full
@@ -4733,12 +4737,12 @@ function CwDropdown({ options, value, onChange, labelProps, alignProps, placehol
         }
     }, [isOpen, highlightedIndex, filteredOptions, handleOptionSelect]);
     const flexDirection = alignProps?.flexDirection ?? "row";
-    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: styles$f.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: styles$f.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: styles$f.dropdown, style: panelStyle, role: "listbox", onKeyDown: handleKeyDown, children: [allowSearch && (jsx("div", { className: styles$f.searchBox, children: jsx("input", { ref: inputRef, type: "text", placeholder: "Search...", value: searchText, onChange: handleSearchChange, onKeyDown: handleKeyDown, className: styles$f.searchInput, autoComplete: "off" }) })), jsx("ul", { children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => (jsxs("li", { ref: highlightedIndex === index ? highlightedItemRef : null, className: [
-                                                    styles$f.option,
-                                                    value === option.value ? styles$f.optionSelected : "",
-                                                    highlightedIndex === index ? styles$f.optionFocused : "",
-                                                    option.disabled ? styles$f.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: styles$f.colorCircle, style: { backgroundColor: option.color } })), jsx("span", { children: option.label })] }, option.value)))) : (jsx("li", { className: styles$f.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)))] })] }) }));
+    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: styles$i.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: styles$i.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: styles$i.dropdown, style: panelStyle, role: "listbox", onKeyDown: handleKeyDown, children: [allowSearch && (jsx("div", { className: styles$i.searchBox, children: jsx("input", { ref: inputRef, type: "text", placeholder: "Search...", value: searchText, onChange: handleSearchChange, onKeyDown: handleKeyDown, className: styles$i.searchInput, autoComplete: "off" }) })), jsx("ul", { children: filteredOptions.length > 0 ? (filteredOptions.map((option, index) => (jsxs("li", { ref: highlightedIndex === index ? highlightedItemRef : null, className: [
+                                                    styles$i.option,
+                                                    value === option.value ? styles$i.optionSelected : "",
+                                                    highlightedIndex === index ? styles$i.optionFocused : "",
+                                                    option.disabled ? styles$i.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: styles$i.colorCircle, style: { backgroundColor: option.color } })), jsx("span", { children: option.label })] }, option.value)))) : (jsx("li", { className: styles$i.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)))] })] }) }));
 }
 /**
@@ -4755,7 +4759,7 @@ function CwDropdownFilter(props) {
     return (jsxs("div", { id: props.IdContent, className: containerClassName, children: [props.children, isVisible && (jsx("nav", { className: "cw-dropdown-menu", style: inlineStyles, onMouseLeave: props.onMouseLeave, id: props.idDropDownFilter, role: "menu", children: jsx("ul", { role: "none", children: props.DataSourceDropDownItem?.map((item) => (jsx("li", { id: item.IdDropDown_filter, role: "menuitem", children: item.dropDownFilter_desc }, item.IdDropDown_filter))) }) }))] }));
 }
-var styles$e = {"container":"cw-popover-button-module__container__YSWQU","panel":"cw-popover-button-module__panel__C-BTn"};
+var styles$h = {"container":"cw-popover-button-module__container__YSWQU","panel":"cw-popover-button-module__panel__C-BTn"};
 /**
  * Button that toggles a floating panel with arbitrary children.
@@ -4834,7 +4838,7 @@ function CwPopoverButton({ children, panelWidth = "auto", placement = "bottom-st
         }
         panel.showPopover();
     }, [placement]);
-    return (jsxs("div", { ref: containerRef, className: styles$e.container, children: [jsx(CwButton, { ...buttonProps, onClick: handleClick }), jsx("div", { ref: panelCallbackRef, className: `${styles$e.panel}${panelClassName ? ` ${panelClassName}` : ""}`, style: { width: panelWidth }, children: children })] }));
+    return (jsxs("div", { ref: containerRef, className: styles$h.container, children: [jsx(CwButton, { ...buttonProps, onClick: handleClick }), jsx("div", { ref: panelCallbackRef, className: `${styles$h.panel}${panelClassName ? ` ${panelClassName}` : ""}`, style: { width: panelWidth }, children: children })] }));
 }
 function itemsToMultiFilterTags(items, nameKey, valueKey, category, primaryColor, onPrimaryColor) {
@@ -4852,13 +4856,13 @@ function itemsToMultiFilterTags(items, nameKey, valueKey, category, primaryColor
     return result;
 }
-var styles$d = {"cw-multifilter-tag":"cw-multi-filter-tag-module__cw-multifilter-tag__Epda-"};
+var styles$g = {"cw-multifilter-tag":"cw-multi-filter-tag-module__cw-multifilter-tag__Epda-"};
 const CwMultiFilterTag = props => {
     const { ID, Name, Value, Category, Removable, PrimaryColor, Selectable, Selected } = props;
     const backgroundColor = `rgb(${PrimaryColor.r},${PrimaryColor.g},${PrimaryColor.b})`;
     const isOutlineMode = Selected && !Removable;
-    return (jsx("li", { className: styles$d["cw-multifilter-tag"], id: ID, "data-value": Value, "data-category": Category, "data-selected": !!Selected, title: props.tooltip ?? Name, onClick: () => {
+    return (jsx("li", { className: styles$g["cw-multifilter-tag"], id: ID, "data-value": Value, "data-category": Category, "data-selected": !!Selected, title: props.tooltip ?? Name, onClick: () => {
             if (Selectable)
                 props.OnSelect?.(props);
         }, children: jsx(CwChip, { label: Name, colorScheme: "custom", customColor: backgroundColor, variant: isOutlineMode ? "outline" : "soft", closable: Removable, onClose: () => props.OnRemove?.(props),
@@ -4868,7 +4872,7 @@ const CwMultiFilterTag = props => {
             } : undefined }) }));
 };
-var styles$c = {"cw-multi-filter-catalog-container":"cw-multi-filter-module__cw-multi-filter-catalog-container__S3nsq","cw-multi-filter":"cw-multi-filter-module__cw-multi-filter__zipBK","category-selected":"cw-multi-filter-module__category-selected__eYbes","cw-multi-filter-search":"cw-multi-filter-module__cw-multi-filter-search__eyHr0 cw-choice-input-box-module__inputBox__gHY9d"};
+var styles$f = {"cw-multi-filter-catalog-container":"cw-multi-filter-module__cw-multi-filter-catalog-container__S3nsq","cw-multi-filter":"cw-multi-filter-module__cw-multi-filter__zipBK","category-selected":"cw-multi-filter-module__category-selected__eYbes","cw-multi-filter-search":"cw-multi-filter-module__cw-multi-filter-search__eyHr0 cw-choice-input-box-module__inputBox__gHY9d"};
 /**
  * A multiple filter selector, a MULTI-SELECT even. Allows users to select and filter items based on tags.
@@ -5109,9 +5113,9 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
             inputRef.current?.focus();
         }
     };
-    return (jsxs("form", { ref: componentRef, id: id, "data-testid": testId, className: `${styles$c["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
+    return (jsxs("form", { ref: componentRef, id: id, "data-testid": testId, className: `${styles$f["cw-multi-filter"]}${className ? ` ${className}` : ""}`, style: style, onSubmit: (e) => {
             e.preventDefault();
-        }, children: [jsxs("div", { onClick: handleDivClick, ref: wrapperRef, className: styles$c["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-outline-variant)" } : {}, children: [jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.currentTarget.value), autoComplete: "off", placeholder: selectedTags.size === 0 ? placeholder : "", onKeyDown: e => {
+        }, children: [jsxs("div", { onClick: handleDivClick, ref: wrapperRef, className: styles$f["cw-multi-filter-search"], style: isPanelOpen ? { outline: "1px solid var(--cw-outline-variant)" } : {}, children: [jsxs("ul", { id: id + "_selected_filters", children: [Array.from(selectedTags).map(tag => (createElement(CwMultiFilterTag, { ...tag, key: tag.ID, Selectable: false, Removable: true, OnRemove: () => removeTag(tag.ID) }))), jsx("input", { type: "text", id: id + "_input", ref: inputRef, value: inputTextValue, spellCheck: false, onFocus: () => setIsPanelOpen(true), onChange: e => handleInputText(e.currentTarget.value), autoComplete: "off", placeholder: selectedTags.size === 0 ? placeholder : "", onKeyDown: e => {
                                     switch (e.key) {
                                         case "Enter":
                                         case "Tab": {
@@ -5138,7 +5142,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
                                             break;
                                         }
                                     }
-                                } })] }), selectedTags.size > 0 && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: e => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChangeSelectedTags(new Set()); setIsPanelOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] }), renderPanel(jsxs("section", { ref: panelRef, className: styles$c["cw-multi-filter-catalog-container"], style: panelStyle, children: [jsxs("nav", { children: [jsx("button", { className: selectedCategory === "All" ? styles$c["category-selected"] : undefined, onClick: () => handleClickCategory("All"), children: allCategoriesLabel }), Array.from(categoriesMappedToTags().keys()).map(category => (jsx("button", { className: selectedCategory === category ? styles$c["category-selected"] : undefined, style: {
+                                } })] }), selectedTags.size > 0 && (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onMouseDown: e => e.preventDefault(), onClick: (e) => { e.stopPropagation(); onChangeSelectedTags(new Set()); setIsPanelOpen(false); }, tabIndex: -1, "aria-label": "Clear all" }))] }), renderPanel(jsxs("section", { ref: panelRef, className: styles$f["cw-multi-filter-catalog-container"], style: panelStyle, children: [jsxs("nav", { children: [jsx("button", { className: selectedCategory === "All" ? styles$f["category-selected"] : undefined, onClick: () => handleClickCategory("All"), children: allCategoriesLabel }), Array.from(categoriesMappedToTags().keys()).map(category => (jsx("button", { className: selectedCategory === category ? styles$f["category-selected"] : undefined, style: {
                                     backgroundColor: getColor(category).primary,
                                     color: getColor(category).onPrimary,
                                 }, onClick: () => handleClickCategory(category), children: category }, category)))] }), jsx("ul", { children: displayTags
@@ -5164,7 +5168,7 @@ const CwMultiFilter = ({ allTags, id, onChangeSelectedTags, selectedTags, placeh
                             } }, props.ID))) })] }))] }));
 };
-var styles$b = {"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"};
+var styles$e = {"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.
@@ -5202,6 +5206,11 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
         isOpen: open,
         onClose: () => { setOpen(false); setFocusedIndex(-1); },
     });
+    // Disabling while the panel is open closes it (state adjusted during render, no effect pass).
+    if (disabled && open) {
+        setOpen(false);
+        setFocusedIndex(-1);
+    }
     const selectedSet = useMemo(() => new Set(value), [value]);
     const filtered = useMemo(() => {
         if (!search)
@@ -5211,17 +5220,23 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
     }, [options, selectedSet, search]);
     const selectedOptions = useMemo(() => value.map(v => options.find(o => o.value === v)).filter(Boolean), [value, options]);
     const handleSelect = useCallback((optionValue) => {
+        if (disabled)
+            return;
         onChange([...value, optionValue]);
         setSearch("");
         setFocusedIndex(-1);
         inputRef.current?.focus();
-    }, [value, onChange]);
+    }, [disabled, value, onChange]);
     const handleRemove = useCallback((optionValue) => {
+        if (disabled)
+            return;
         onChange(value.filter(v => v !== optionValue));
         inputRef.current?.focus();
-    }, [value, onChange]);
+    }, [disabled, value, onChange]);
     const allSelected = options.length > 0 && options.every(o => selectedSet.has(o.value));
     const handleToggleAll = useCallback(() => {
+        if (disabled)
+            return;
         if (allSelected) {
             onChange([]);
         }
@@ -5231,7 +5246,7 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
         setSearch("");
         setFocusedIndex(-1);
         inputRef.current?.focus();
-    }, [allSelected, options, onChange]);
+    }, [disabled, allSelected, options, onChange]);
     const handleInputChange = useCallback((e) => {
         setSearch(e.currentTarget.value);
         if (!open)
@@ -5243,6 +5258,8 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
             setOpen(true);
     }, [disabled]);
     const handleKeyDown = useCallback((e) => {
+        if (disabled)
+            return;
         if (e.key === "Backspace" && !search && value.length > 0) {
             onChange(value.slice(0, -1));
             return;
@@ -5287,7 +5304,7 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
             e.preventDefault();
             setFocusedIndex(prev => (prev > 0 ? prev - 1 : 0));
         }
-    }, [open, search, value, filtered, focusedIndex, onChange, handleSelect]);
+    }, [disabled, open, search, value, filtered, focusedIndex, onChange, handleSelect]);
     // Scroll focused item into view
     useEffect(() => {
         if (focusedIndex >= 0 && listRef.current) {
@@ -5302,11 +5319,11 @@ function CwTagSelector({ id, options, value, onChange, labelProps, iconProps, al
     const feedbackId = useId();
     const feedbackIds = feedbackMessages.map((_, index) => `${feedbackId}-${index}`);
     const describedBy = feedbackIds.join(" ") || undefined;
-    return (jsxs("div", { ref: containerRef, className: `${styles$b.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$b.value, children: [jsxs("div", { className: `${styles$b.inputBox}${disabled ? ` ${styles$b.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$b.dropdown, style: panelStyle, children: [showSelectAll && !search && (jsxs("div", { className: styles$b.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$b.option}${idx === focusedIndex ? ` ${styles$b.optionFocused}` : ""}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelect(opt.value), onMouseEnter: () => setFocusedIndex(idx), title: opt.tooltip, children: [opt.color && jsx("span", { className: styles$b.optionDot, style: { backgroundColor: opt.color } }), opt.label] }, opt.value))) })] })) : null)] }));
+    return (jsxs("div", { ref: containerRef, className: `${styles$e.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$e.value, children: [jsxs("div", { className: `${styles$e.inputBox}${disabled ? ` ${styles$e.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$e.dropdown, style: panelStyle, children: [showSelectAll && !search && (jsxs("div", { className: styles$e.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$e.option}${idx === focusedIndex ? ` ${styles$e.optionFocused}` : ""}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelect(opt.value), onMouseEnter: () => setFocusedIndex(idx), title: opt.tooltip, children: [opt.color && jsx("span", { className: styles$e.optionDot, style: { backgroundColor: opt.color } }), opt.label] }, opt.value))) })] })) : null)] }));
 }
-var styles$a = {"tree-container":"cw-tree-view-module__tree-container__NN-HJ","tree-wrapper":"cw-tree-view-module__tree-wrapper__keBZI","tree-item":"cw-tree-view-module__tree-item__prE9N","tree-node":"cw-tree-view-module__tree-node__wfro9","selected":"cw-tree-view-module__selected__XJQ0w","non-selectable":"cw-tree-view-module__non-selectable__YuPSx","tree-children":"cw-tree-view-module__tree-children__ji8CZ","empty-state":"cw-tree-view-module__empty-state__yvRjo","tree-label":"cw-tree-view-module__tree-label__ss3Nf","tree-spacer":"cw-tree-view-module__tree-spacer__E9Ud2"};
+var styles$d = {"tree-container":"cw-tree-view-module__tree-container__NN-HJ","tree-wrapper":"cw-tree-view-module__tree-wrapper__keBZI","tree-item":"cw-tree-view-module__tree-item__prE9N","tree-node":"cw-tree-view-module__tree-node__wfro9","selected":"cw-tree-view-module__selected__XJQ0w","non-selectable":"cw-tree-view-module__non-selectable__YuPSx","tree-children":"cw-tree-view-module__tree-children__ji8CZ","empty-state":"cw-tree-view-module__empty-state__yvRjo","tree-label":"cw-tree-view-module__tree-label__ss3Nf","tree-spacer":"cw-tree-view-module__tree-spacer__E9Ud2"};
 function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId: initialSelectedId = null, ...dataAttributes }) {
     const [expanded, setExpanded] = useState(new Set());
@@ -5373,10 +5390,10 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
         const isLeaf = !hasChildren;
         const isSelected = selectedId?.toString().toLowerCase() === node.id.toString().toLowerCase();
         const selectable = allowParentSelection || isLeaf;
-        return (jsxs("div", { className: styles$a["tree-item"], children: [jsxs("div", { className: [
-                        styles$a["tree-node"],
-                        isSelected && styles$a["selected"],
-                        !selectable && styles$a["non-selectable"]
+        return (jsxs("div", { className: styles$d["tree-item"], children: [jsxs("div", { className: [
+                        styles$d["tree-node"],
+                        isSelected && styles$d["selected"],
+                        !selectable && styles$d["non-selectable"]
                     ].filter(Boolean).join(' '), style: { paddingLeft: `${depth * 24 + 8}px` }, onClick: () => {
                         if (selectable) {
                             setSelectedId(node.id);
@@ -5388,7 +5405,7 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
                     }, children: [hasChildren && (jsx(CwButton, { variant: "icon", color: "neutral", icon: isExpanded ? "chevron-down" : "chevron-right", "aria-expanded": isExpanded, "aria-label": `${isExpanded ? "Collapse" : "Expand"} ${node.label}`, onClick: (event) => {
                                 event.stopPropagation();
                                 toggleExpand(node.id);
-                            } })), jsx("div", { className: `${styles$a["tree-label"]} ${!hasChildren ? styles$a["tree-spacer"] : ''}`, children: node.label })] }), hasChildren && isExpanded && (jsx("div", { className: styles$a["tree-children"], children: node.children.map((child) => renderNode(child, depth + 1)) }))] }, node.id));
+                            } })), jsx("div", { className: `${styles$d["tree-label"]} ${!hasChildren ? styles$d["tree-spacer"] : ''}`, children: node.label })] }), hasChildren && isExpanded && (jsx("div", { className: styles$d["tree-children"], children: node.children.map((child) => renderNode(child, depth + 1)) }))] }, node.id));
     };
     // Function to search for nodes that match the search term
     const searchInTree = (nodes, searchTerm) => {
@@ -5412,7 +5429,7 @@ function CwTreeView({ data, onSelect, allowParentSelection = false, selectedId:
         return results;
     };
     const filteredData = searchInTree(data, search);
-    return (jsxs("div", { ...dataAttributes, className: `cw-tree-view ${styles$a["tree-container"]}`, children: [jsxs("header", { children: [jsx("input", { type: "text", placeholder: "Search in tree...", value: search, onChange: (e) => setSearch(e.target.value) }), search && (jsx(CwButton, { onClick: () => setSearch(""), type: "button", icon: "close", variant: "icon", color: "neutral" }))] }), jsx("div", { className: styles$a["tree-wrapper"], children: filteredData.length > 0 ? (filteredData.map((node) => renderNode(node))) : (jsxs("div", { className: styles$a["empty-state"], children: [jsx(CwIcon, { iconId: "comment" }), search ? "No results found" : "There are no items"] })) })] }));
+    return (jsxs("div", { ...dataAttributes, className: `cw-tree-view ${styles$d["tree-container"]}`, children: [jsxs("header", { children: [jsx("input", { type: "text", placeholder: "Search in tree...", value: search, onChange: (e) => setSearch(e.target.value) }), search && (jsx(CwButton, { onClick: () => setSearch(""), type: "button", icon: "close", variant: "icon", color: "neutral" }))] }), jsx("div", { className: styles$d["tree-wrapper"], children: filteredData.length > 0 ? (filteredData.map((node) => renderNode(node))) : (jsxs("div", { className: styles$d["empty-state"], children: [jsx(CwIcon, { iconId: "comment" }), search ? "No results found" : "There are no items"] })) })] }));
 }
 const EXACT_PHRASE = /"([^"]+)"/g;
@@ -5480,7 +5497,7 @@ function sortNavItems(items, alphabetically) {
     return [...items].sort((first, second) => first.label.localeCompare(second.label));
 }
-var styles$9 = {"menu":"cw-nav-menu-module__menu__LmeQg","expandIndicator":"cw-nav-menu-module__expandIndicator__TBSdQ","favorites":"cw-nav-menu-module__favorites__Esaqd","favoritesContent":"cw-nav-menu-module__favoritesContent__l5DGG","favoriteStar":"cw-nav-menu-module__favoriteStar__J-jzg","emptyMessage":"cw-nav-menu-module__emptyMessage__-CQNd","skeleton":"cw-nav-menu-module__skeleton__INQqF"};
+var styles$c = {"menu":"cw-nav-menu-module__menu__LmeQg","expandIndicator":"cw-nav-menu-module__expandIndicator__TBSdQ","favorites":"cw-nav-menu-module__favorites__Esaqd","favoritesContent":"cw-nav-menu-module__favoritesContent__l5DGG","favoriteStar":"cw-nav-menu-module__favoriteStar__J-jzg","emptyMessage":"cw-nav-menu-module__emptyMessage__-CQNd","skeleton":"cw-nav-menu-module__skeleton__INQqF"};
 const SKELETON_ROW_COUNT = 5;
 const defaultRenderLink = (item, children) => (jsx("a", { href: item.href, children: children }));
@@ -5492,13 +5509,13 @@ function CwNavMenu({ items, loading = false, isActive, renderLink = defaultRende
     const renderItem = (item, level) => {
         const children = item.children;
         if (children && children.length > 0) {
-            return (jsx("li", { children: jsxs("details", { "data-level": level, open: hasActiveDescendant(item) || undefined, children: [jsxs("summary", { children: [item.icon && jsx(CwIcon, { iconId: item.icon, size: level >= 2 ? "small" : "medium" }), item.label, (showExpandIndicator || level >= 2) && (jsx(CwIcon, { iconId: "chevron-down", size: "small", className: styles$9.expandIndicator }))] }), jsx("ul", { children: children.map(child => renderItem(child, level + 1)) })] }) }, item.id));
+            return (jsx("li", { children: jsxs("details", { "data-level": level, open: hasActiveDescendant(item) || undefined, children: [jsxs("summary", { children: [item.icon && jsx(CwIcon, { iconId: item.icon, size: level >= 2 ? "small" : "medium" }), item.label, (showExpandIndicator || level >= 2) && (jsx(CwIcon, { iconId: "chevron-down", size: "small", className: styles$c.expandIndicator }))] }), jsx("ul", { children: children.map(child => renderItem(child, level + 1)) })] }) }, item.id));
         }
-        return (jsx("li", { "data-active": isActive?.(item) ? "true" : undefined, children: renderLink(item, jsxs(Fragment, { children: [item.icon && jsx(CwIcon, { iconId: item.icon, size: "medium" }), item.label, isFavorite?.(item) && jsx(CwIcon, { iconId: "star", size: "small", className: styles$9.favoriteStar })] })) }, item.id));
+        return (jsx("li", { "data-active": isActive?.(item) ? "true" : undefined, children: renderLink(item, jsxs(Fragment, { children: [item.icon && jsx(CwIcon, { iconId: item.icon, size: "medium" }), item.label, isFavorite?.(item) && jsx(CwIcon, { iconId: "star", size: "small", className: styles$c.favoriteStar })] })) }, item.id));
     };
-    return (jsxs("nav", { ...navProps, className: [styles$9.menu, className].filter(Boolean).join(" "), "aria-busy": loading || undefined, children: [favoritesSlot && (jsxs("details", { open: true, ...favoritesProps, className: [styles$9.favorites, favoritesProps?.className].filter(Boolean).join(" "), children: [jsxs("summary", { children: [jsx(CwIcon, { iconId: "star", size: "medium" }), favoritesLabel] }), jsx("div", { className: styles$9.favoritesContent, children: favoritesSlot })] })), beforeTreeSlot, jsx("ul", { children: loading
-                    ? Array.from({ length: SKELETON_ROW_COUNT }, (_unused, index) => (jsx("li", { className: styles$9.skeleton, children: jsx(CwSkeleton, { height: "var(--cw-size-small)", radius: "var(--cw-border-radius-small)" }) }, index)))
-                    : visibleItems.map(item => renderItem(item, 1)) }), showEmptyMessage && jsx("p", { className: styles$9.emptyMessage, children: emptyMessage })] }));
+    return (jsxs("nav", { ...navProps, className: [styles$c.menu, className].filter(Boolean).join(" "), "aria-busy": loading || undefined, children: [favoritesSlot && (jsxs("details", { open: true, ...favoritesProps, className: [styles$c.favorites, favoritesProps?.className].filter(Boolean).join(" "), children: [jsxs("summary", { children: [jsx(CwIcon, { iconId: "star", size: "medium" }), favoritesLabel] }), jsx("div", { className: styles$c.favoritesContent, children: favoritesSlot })] })), beforeTreeSlot, jsx("ul", { children: loading
+                    ? Array.from({ length: SKELETON_ROW_COUNT }, (_unused, index) => (jsx("li", { className: styles$c.skeleton, children: jsx(CwSkeleton, { height: "var(--cw-size-small)", radius: "var(--cw-border-radius-small)" }) }, index)))
+                    : visibleItems.map(item => renderItem(item, 1)) }), showEmptyMessage && jsx("p", { className: styles$c.emptyMessage, children: emptyMessage })] }));
 }
 var dropdownStyles = {"dropdown":"cw-choice-dropdown-module__dropdown__P0b4j","option":"cw-choice-dropdown-module__option__uR-ro","optionFocused":"cw-choice-dropdown-module__optionFocused__BYMxj"};
@@ -5664,7 +5681,7 @@ function CwSearchInput(optionsProps) {
     return (jsxs("div", { className: `cw-search-input ${className || ""}`, style: style, ...otherProps, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: "cw-search-input-wrapper", ref: wrapperRef, children: [jsx("input", { ref: inputRef, id: id, type: "text", value: searchText, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, placeholder: placeholder, className: "cw-input-search", disabled: disabled, autoFocus: autoFocus, autoComplete: "off", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": showDropdown && filteredOptions.length > 0, "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 ? optionId(highlightedIndex) : undefined }), isLoading && (jsx("div", { className: "cw-search-input-loading", children: jsx(CwIcon, { iconId: "spinner" }) })), jsx("div", { className: "cw-search-input-icons", children: searchText && !disabled && !isLoading ? (jsx(CwButton, { type: "button", onClick: handleClearClick, "aria-label": "Clear search", variant: "icon", icon: "close", color: "neutral" })) : (iconProps ? jsx(CwIcon, { ...iconProps }) : jsx(CwIcon, { iconId: "search" })) })] })] }), renderPanel(jsx("div", { ref: panelRef, id: listboxId, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", children: jsx("ul", { children: filteredOptions.map((option, index) => (jsx("li", { id: optionId(index), className: `${dropdownStyles.option}${index === highlightedIndex ? ` ${dropdownStyles.optionFocused}` : ""}`, onClick: () => handleOptionSelect(option), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: renderOption ? renderOption(option) : option.description }, option.id))) }) }))] }));
 }
-var styles$8 = {"value":"cw-search-async-module__value__z53xT"};
+var styles$b = {"value":"cw-search-async-module__value__z53xT"};
 /**
  * Generic API-backed search input. Fetches matching options from a caller-supplied `onSearch`
@@ -5928,10 +5945,10 @@ const CwSearchAsync = ({ onSearch, onChange, value, onResolveInitial, onResolveS
     return (jsxs("div", { ...dataAttributes, className: `cw-search-input ${className}`, style: {
             ...(width ? { width } : {}),
             ...(labelProps?.labelWidth ? { "--label-width": labelProps.labelWidth } : {}),
-        }, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$8.value, children: [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", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": showDropdown, "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 ? optionId(highlightedIndex) : undefined, "aria-describedby": describedBy, 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 selection", variant: "icon", icon: "close", color: "neutral" })) : (icon ? jsx(CwIcon, { ...icon }) : jsx(CwIcon, { iconId: "search" })) })] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] })] }), renderPanel(jsx("div", { ref: panelRef, id: listboxId, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { id: optionId(index), className: `${dropdownStyles.option}${index === highlightedIndex ? ` ${dropdownStyles.optionFocused}` : ""}`, onClick: () => handleOptionSelect(option.id), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: option.subLabel ? (jsxs("span", { className: "cw-search-async-option-lines", children: [jsx("span", { children: option.label }), jsx("span", { className: "cw-search-async-option-sub", children: option.subLabel })] })) : (option.label) }, option.id))) }) }))] }));
+        }, "data-direction": direction, children: [jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$b.value, children: [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", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": showDropdown, "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 ? optionId(highlightedIndex) : undefined, "aria-describedby": describedBy, 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 selection", variant: "icon", icon: "close", color: "neutral" })) : (icon ? jsx(CwIcon, { ...icon }) : jsx(CwIcon, { iconId: "search" })) })] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] })] }), renderPanel(jsx("div", { ref: panelRef, id: listboxId, className: dropdownStyles.dropdown, style: panelStyle, role: "listbox", children: jsx("ul", { children: options.map((option, index) => (jsx("li", { id: optionId(index), className: `${dropdownStyles.option}${index === highlightedIndex ? ` ${dropdownStyles.optionFocused}` : ""}`, onClick: () => handleOptionSelect(option.id), onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: option.subLabel ? (jsxs("span", { className: "cw-search-async-option-lines", children: [jsx("span", { children: option.label }), jsx("span", { className: "cw-search-async-option-sub", children: option.subLabel })] })) : (option.label) }, option.id))) }) }))] }));
 };
-var styles$7 = {"menu":"cw-context-menu-module__menu__tXmun","item":"cw-context-menu-module__item__-ko8L","arrow":"cw-context-menu-module__arrow__LHZmQ"};
+var styles$a = {"menu":"cw-context-menu-module__menu__tXmun","item":"cw-context-menu-module__item__-ko8L","arrow":"cw-context-menu-module__arrow__LHZmQ"};
 const ARROW_SIZE = 8;
 const SAFETY_MARGIN = 8;
@@ -6072,14 +6089,14 @@ const CwAnchoredMenu = ({ children, options, onSelect, placement = 'bottom', ope
             document.removeEventListener("keydown", handleEscape);
         };
     }, [isOpen]);
-    return (jsxs(Fragment, { children: [jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, style: { display: "contents" }, children: children }), isOpen && normalizedOptions.length > 0 && createPortal(jsxs("div", { ref: menuRef, className: styles$7["menu"], style: {
+    return (jsxs(Fragment, { children: [jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, style: { display: "contents" }, children: children }), isOpen && normalizedOptions.length > 0 && createPortal(jsxs("div", { ref: menuRef, className: styles$a["menu"], style: {
                     top: `${position.y}px`,
                     left: `${position.x}px`,
-                }, "data-has-arrow": "true", children: [jsx("div", { ref: arrowRef, className: styles$7["arrow"], "data-placement": placement }), normalizedOptions.map(option => (jsxs("div", { onClick: (e) => {
+                }, "data-has-arrow": "true", children: [jsx("div", { ref: arrowRef, className: styles$a["arrow"], "data-placement": placement }), normalizedOptions.map(option => (jsxs("div", { onClick: (e) => {
                             e.stopPropagation();
                             e.preventDefault();
                             handleOptionClick(option);
-                        }, className: `${styles$7["item"]} ${option.disabled ? styles$7["disabled"] : ""}`, "data-disabled": option.disabled, children: [option.icon && jsx("span", { className: styles$7["icon"], children: option.icon }), option.label] }, option.key)))] }), document.body)] }));
+                        }, className: `${styles$a["item"]} ${option.disabled ? styles$a["disabled"] : ""}`, "data-disabled": option.disabled, children: [option.icon && jsx("span", { className: styles$a["icon"], children: option.icon }), option.label] }, option.key)))] }), document.body)] }));
 };
 /**
@@ -6152,13 +6169,13 @@ const CwContextMenu = ({ children, options, offset = DEFAULT_OFFSET, onSelect })
             document.removeEventListener("keydown", handleEscape);
         };
     }, [isOpen]);
-    return (jsxs(Fragment, { children: [jsx("div", { onContextMenu: handleContextMenu, children: children }), isOpen && createPortal(jsx("div", { ref: menuRef, className: styles$7["menu"], style: {
+    return (jsxs(Fragment, { children: [jsx("div", { onContextMenu: handleContextMenu, children: children }), isOpen && createPortal(jsx("div", { ref: menuRef, className: styles$a["menu"], style: {
                     top: `${position.y}px`,
                     left: `${position.x}px`,
-                }, children: options.map(option => (jsx("div", { onClick: () => handleOptionClick(option), className: styles$7["item"], children: option }, option))) }), document.body)] }));
+                }, children: options.map(option => (jsx("div", { onClick: () => handleOptionClick(option), className: styles$a["item"], children: option }, option))) }), document.body)] }));
 };
-var styles$6 = {"split":"cw-button-split-module__split__B2KbU","menu":"cw-button-split-module__menu__mKDlt","item":"cw-button-split-module__item__Aqw6f"};
+var styles$9 = {"split":"cw-button-split-module__split__B2KbU","menu":"cw-button-split-module__menu__mKDlt","item":"cw-button-split-module__item__Aqw6f"};
 /**
  * CwButtonSplit - A primary action joined to a dropdown of alternative actions.
@@ -6184,7 +6201,7 @@ function CwButtonSplit({ text, icon, onClick, actions, onSelect, variant = "soli
         onSelect(action.key);
         event.currentTarget.closest("[popover]")?.hidePopover();
     };
-    return (jsxs("div", { className: styles$6.split, "data-variant": variant, "data-testid": dataTestId, children: [jsx(CwButton, { text: text, icon: icon, variant: variant, color: color, size: size, onClick: onClick, disabled: disabled }), jsx(CwPopoverButton, { icon: "chevron-down", title: "More actions", variant: variant, color: color, size: size, disabled: disabled, placement: placement, children: jsx("div", { className: styles$6.menu, children: actions.map((action) => (jsx(CwButton, { variant: "ghost", color: "neutral", text: action.label, icon: action.icon, disabled: action.disabled, className: styles$6.item, onClick: handleSelect(action) }, action.key))) }) })] }));
+    return (jsxs("div", { className: styles$9.split, "data-variant": variant, "data-testid": dataTestId, children: [jsx(CwButton, { text: text, icon: icon, variant: variant, color: color, size: size, onClick: onClick, disabled: disabled }), jsx(CwPopoverButton, { icon: "chevron-down", title: "More actions", variant: variant, color: color, size: size, disabled: disabled, placement: placement, children: jsx("div", { className: styles$9.menu, children: actions.map((action) => (jsx(CwButton, { variant: "ghost", color: "neutral", text: action.label, icon: action.icon, disabled: action.disabled, className: styles$9.item, onClick: handleSelect(action) }, action.key))) }) })] }));
 }
 /**
@@ -6252,7 +6269,7 @@ function useRovingSingleSelect(options, value, onChange) {
     return { activeIndex, getSegmentProps };
 }
-var styles$5 = {"switch":"cw-button-switch-module__switch__vdWV-","segment":"cw-button-switch-module__segment__JmVla","iconOnly":"cw-button-switch-module__iconOnly__-kCwj"};
+var styles$8 = {"switch":"cw-button-switch-module__switch__vdWV-","segment":"cw-button-switch-module__segment__JmVla","iconOnly":"cw-button-switch-module__iconOnly__-kCwj"};
 /**
  * CwButtonSwitch - Segmented single-select control: a strip of joined CwButtons.
@@ -6282,10 +6299,10 @@ var styles$5 = {"switch":"cw-button-switch-module__switch__vdWV-","segment":"cw-
  */
 function CwButtonSwitch({ options, value, onChange, size = "medium", color = "primary", iconOnly = false, direction = "row", disabled = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...dataAttributes }) {
     const { getSegmentProps } = useRovingSingleSelect(options, value, onChange);
-    return (jsx("div", { ...dataAttributes, className: `cw-button-switch ${styles$5.switch}`, role: "radiogroup", "aria-labelledby": ariaLabelledby, "aria-label": ariaLabelledby ? undefined : ariaLabel, "data-direction": direction, children: options.map((option, index) => {
+    return (jsx("div", { ...dataAttributes, className: `cw-button-switch ${styles$8.switch}`, role: "radiogroup", "aria-labelledby": ariaLabelledby, "aria-label": ariaLabelledby ? undefined : ariaLabel, "data-direction": direction, children: options.map((option, index) => {
             const selected = option.value === value;
             const segmentProps = getSegmentProps(index);
-            return (jsx(CwButton, { text: iconOnly ? undefined : option.label, title: iconOnly ? option.label : undefined, icon: option.icon, size: size, color: color, variant: selected ? "solid" : "outline", role: "radio", "aria-checked": selected, disabled: disabled || option.disabled, onClick: () => onChange(option.value), className: `${styles$5.segment}${iconOnly ? ` ${styles$5.iconOnly}` : ""}`, tabIndex: segmentProps.tabIndex, ref: segmentProps.ref, onKeyDown: segmentProps.onKeyDown }, option.value));
+            return (jsx(CwButton, { text: iconOnly ? undefined : option.label, title: iconOnly ? option.label : undefined, icon: option.icon, size: size, color: color, variant: selected ? "solid" : "outline", role: "radio", "aria-checked": selected, disabled: disabled || option.disabled, onClick: () => onChange(option.value), className: `${styles$8.segment}${iconOnly ? ` ${styles$8.iconOnly}` : ""}`, tabIndex: segmentProps.tabIndex, ref: segmentProps.ref, onKeyDown: segmentProps.onKeyDown }, option.value));
         }) }));
 }
@@ -6327,7 +6344,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 = {"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"};
+var styles$7 = {"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.
@@ -6567,7 +6584,7 @@ function CwDatePicker({ value, onChange, minDate, maxDate, disabledDates, disabl
         ...(maxDate ? [{ after: maxDate }] : []),
         ...(disabledMatcher ? [disabledMatcher] : []),
     ], [disabledDates, minDate, maxDate, disabledMatcher]);
-    return (jsx("div", { ...dataAttributes, 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: {
+    return (jsx("div", { ...dataAttributes, 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$7.value, children: [jsxs("div", { ref: wrapperRef, className: styles$7.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$7.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$7.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",
@@ -7216,7 +7233,7 @@ function CwDateRangePicker({ value, onChange, minDate, maxDate, disabledDates, d
         }
         return undefined;
     }, [value]);
-    return (jsx("div", { ...dataAttributes, ref: containerRef, className: `cw-rangepicker ${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: 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, "aria-describedby": describedBy, 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, "aria-describedby": describedBy, 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: {
+    return (jsx("div", { ...dataAttributes, ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$7.value, children: [jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxs("div", { className: styles$7.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, "aria-describedby": describedBy, required: required, size: displayFormat.length, "data-focused": focusedInput === 'from' }), jsx("div", { className: styles$7.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$7.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, "aria-describedby": describedBy, required: required, size: displayFormat.length, "data-focused": focusedInput === 'to' }), jsx("div", { className: styles$7.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$7.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",
@@ -7389,10 +7406,10 @@ function CwTimePicker({ value, onChange, interval = 15, minTime, maxTime, labelP
     const displayValue = inputValue;
     // If using native time input
     if (useNative) {
-        return (jsx("div", { ...dataAttributes, className: `cw-timepicker cw-timepicker-native ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$4.value, children: [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, "aria-describedby": describedBy, className: "cw-timepicker-native" }) }), feedbackElements] })] }) }));
+        return (jsx("div", { ...dataAttributes, className: `cw-timepicker cw-timepicker-native ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$7.value, children: [jsx("div", { className: styles$7.pickerWrapper, children: jsx("input", { type: "time", value: displayValue, onChange: handleNativeChange, min: minTime, max: maxTime, step: interval * 60, disabled: disabled, required: required, placeholder: placeholder, "aria-describedby": describedBy, className: "cw-timepicker-native" }) }), feedbackElements] })] }) }));
     }
     // Custom time picker
-    return (jsx("div", { ...dataAttributes, ref: containerRef, className: `cw-timepicker ${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} ${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, "aria-describedby": describedBy, 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) => {
+    return (jsx("div", { ...dataAttributes, ref: containerRef, className: `cw-timepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$7.value, children: [jsxs("div", { ref: wrapperRef, className: `${styles$7.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, "aria-describedby": describedBy, required: required, maxLength: 5 }), showClear && (jsx("div", { className: styles$7.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$7.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));
                                         }) }) }))] }), feedbackElements] })] }) }));
@@ -7700,7 +7717,7 @@ function CwDateTimePicker({ value, onChange, minDateTime, maxDateTime, disabledD
     const displayMaxDate = useMemo(() => normalizedMaxDateTime && timezoneOffset !== undefined
         ? getDateInOffset(normalizedMaxDateTime, timezoneOffset)
         : normalizedMaxDateTime, [normalizedMaxDateTime, timezoneOffset]);
-    return jsx("div", { ...dataAttributes, className: `cw-datetimepicker cw-datetimepicker-separate ${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", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [jsx(CwDatePicker, { value: selectedDate, onChange: handleDateChange, minDate: displayMinDate, maxDate: displayMaxDate, disabledDates: disabledDates, disabledMatcher: disabledMatcher, placeholder: datePlaceholder, disabled: disabled, required: required, showClear: showClear, numberOfMonths: numberOfMonths, popupPosition: popupPosition, locale: locale }), jsx(CwTimePicker, { value: selectedTime, onChange: handleTimeChange, interval: timeInterval, minTime: timeRestrictions.minTime, maxTime: timeRestrictions.maxTime, placeholder: timePlaceholder, disabled: disabled, required: required, showClear: showClear, popupPosition: popupPosition }), showNowButton && (jsx(CwButton, { type: "button", variant: "outline", onClick: handleNowClick, disabled: disabled, text: nowLabel }))] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] })] }) });
+    return jsx("div", { ...dataAttributes, className: `cw-datetimepicker cw-datetimepicker-separate ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$7.value, children: [jsxs("div", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [jsx(CwDatePicker, { value: selectedDate, onChange: handleDateChange, minDate: displayMinDate, maxDate: displayMaxDate, disabledDates: disabledDates, disabledMatcher: disabledMatcher, placeholder: datePlaceholder, disabled: disabled, required: required, showClear: showClear, numberOfMonths: numberOfMonths, popupPosition: popupPosition, locale: locale }), jsx(CwTimePicker, { value: selectedTime, onChange: handleTimeChange, interval: timeInterval, minTime: timeRestrictions.minTime, maxTime: timeRestrictions.maxTime, placeholder: timePlaceholder, disabled: disabled, required: required, showClear: showClear, popupPosition: popupPosition }), showNowButton && (jsx(CwButton, { type: "button", variant: "outline", onClick: handleNowClick, disabled: disabled, text: nowLabel }))] }), 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 compactStyles = {"compactPopup":"cw-datetime-compact-module__compactPopup__GiuNY","calendarWrapper":"cw-datetime-compact-module__calendarWrapper__P4Nlq","timeWrapper":"cw-datetime-compact-module__timeWrapper__uMe-A","compactTimeList":"cw-datetime-compact-module__compactTimeList__MzSQT"};
@@ -7956,7 +7973,7 @@ function CwDateTimePickerCompact({ value, onChange, minDateTime, maxDateTime, di
         ...(maxDateTime ? [{ after: maxDateTime }] : []),
         ...(disabledMatcher ? [disabledMatcher] : []),
     ], [disabledDates, minDateTime, maxDateTime, disabledMatcher]);
-    return (jsx("div", { ...dataAttributes, ref: containerRef, className: `cw-datetimepicker ${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, maxLength: 16 }), 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 datetime" })) : (jsx(CwIcon, { iconId: "calendar-time" })) }), renderPopup(jsxs("div", { ref: popupRef, className: `${styles$4.pickerPopup} ${compactStyles.compactPopup}`, style: popupStyle, children: [jsxs("div", { className: compactStyles.calendarWrapper, children: [jsx(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, defaultMonth: selectedDate, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
+    return (jsx("div", { ...dataAttributes, ref: containerRef, className: `cw-datetimepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$7.value, children: [jsxs("div", { ref: wrapperRef, className: styles$7.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, maxLength: 16 }), jsx("div", { className: styles$7.pickerIcons, children: showClear && value && !disabled ? (jsx(CwButton, { type: "button", variant: "icon", color: "neutral", icon: "close", onClick: handleClear, tabIndex: -1, "aria-label": "Clear datetime" })) : (jsx(CwIcon, { iconId: "calendar-time" })) }), renderPopup(jsxs("div", { ref: popupRef, className: `${styles$7.pickerPopup} ${compactStyles.compactPopup}`, style: popupStyle, children: [jsxs("div", { className: compactStyles.calendarWrapper, children: [jsx(DayPicker, { mode: "single", selected: selectedDate, onSelect: handleDaySelect, defaultMonth: selectedDate, disabled: disabledDays, numberOfMonths: numberOfMonths, locale: locale, captionLayout: "dropdown", startMonth: dropdownStartMonth, endMonth: dropdownEndMonth, modifiers: {
                                                         today: new Date(),
                                                     }, modifiersClassNames: {
                                                         today: "rdp-day-today",
@@ -8191,7 +8208,7 @@ function CwDatePickerTemporal({ value, onChange, minDate, maxDate, disabledDates
     const defaultMonthJsDate = defaultMonth
         ? new Date(defaultMonth.year, defaultMonth.month - 1, 1)
         : selectedJsDate;
-    return (jsx("div", { ...dataAttributes, 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: {
+    return (jsx("div", { ...dataAttributes, 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$7.value, children: [jsxs("div", { ref: wrapperRef, className: styles$7.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$7.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$7.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",
@@ -8492,7 +8509,7 @@ function CwDateTimePickerTemporal({ value, onChange, minDateTime, maxDateTime, d
         minTime,
         maxTime,
     });
-    return jsx("div", { ...dataAttributes, className: `cw-datetimepicker cw-datetimepicker-separate ${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", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [jsx(CwDatePickerTemporal, { value: picker.date, onChange: picker.selectDate, minDate: picker.minDate, maxDate: picker.maxDate, disabledDates: disabledDates, disabledMatcher: disabledMatcher, placeholder: datePlaceholder, disabled: disabled, required: required, showClear: showClear, numberOfMonths: numberOfMonths, popupPosition: popupPosition, locale: locale }), jsx(CwTimePicker, { value: picker.time, onChange: picker.selectTime, interval: timeInterval, minTime: picker.effectiveMinTime, maxTime: picker.effectiveMaxTime, placeholder: timePlaceholder, disabled: disabled, required: required, showClear: showClear, popupPosition: popupPosition }), showNowButton && (jsx(CwButton, { type: "button", variant: "outline", onClick: picker.selectNow, disabled: disabled, text: nowLabel }))] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] })] }) });
+    return jsx("div", { ...dataAttributes, className: `cw-datetimepicker cw-datetimepicker-separate ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$7.value, children: [jsxs("div", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [jsx(CwDatePickerTemporal, { value: picker.date, onChange: picker.selectDate, minDate: picker.minDate, maxDate: picker.maxDate, disabledDates: disabledDates, disabledMatcher: disabledMatcher, placeholder: datePlaceholder, disabled: disabled, required: required, showClear: showClear, numberOfMonths: numberOfMonths, popupPosition: popupPosition, locale: locale }), jsx(CwTimePicker, { value: picker.time, onChange: picker.selectTime, interval: timeInterval, minTime: picker.effectiveMinTime, maxTime: picker.effectiveMaxTime, placeholder: timePlaceholder, disabled: disabled, required: required, showClear: showClear, popupPosition: popupPosition }), showNowButton && (jsx(CwButton, { type: "button", variant: "outline", onClick: picker.selectNow, disabled: disabled, text: nowLabel }))] }), feedbackMessages.map((feedbackItem, index) => (jsx("p", { id: feedbackIds[index], className: "cw-input-feedback", "data-color": feedbackItem.type, "aria-live": "polite", children: feedbackItem.message }, index)))] })] }) });
 }
 // dateRangePresetsTemporal.ts
@@ -8944,7 +8961,7 @@ 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", { ...dataAttributes, ref: containerRef, className: `cw-rangepicker ${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: 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, "aria-describedby": describedBy, 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, "aria-describedby": describedBy, 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: {
+    return (jsx("div", { ...dataAttributes, ref: containerRef, className: `cw-rangepicker ${className || ""}`, children: jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxs("div", { className: styles$7.value, children: [jsxs("div", { ref: wrapperRef, className: rangeStyles.rangeWrapper, children: [jsxs("div", { className: styles$7.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, "aria-describedby": describedBy, required: required, size: displayFormat.length, "data-focused": focusedInput === 'from' }), jsx("div", { className: styles$7.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$7.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, "aria-describedby": describedBy, required: required, size: displayFormat.length, "data-focused": focusedInput === 'to' }), jsx("div", { className: styles$7.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$7.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",
@@ -9091,7 +9108,7 @@ class OnClickContextMenu {
     }
 }
-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","title-cell":"scheduler-header-module__title-cell__mz7Ki","title":"scheduler-header-module__title__TuJVn","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$6 = {"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","title-cell":"scheduler-header-module__title-cell__mz7Ki","title":"scheduler-header-module__title__TuJVn","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();
@@ -9120,9 +9137,9 @@ const TimeLine = ({ left, top = "0px", height, color, width = "2px", zIndexNumbe
             background: color,
             pointerEvents: "none",
             zIndex: zIndexNumber,
-        }, className: styles$3["scheduler-timeline-now"], children: isHeader && (jsx("span", { style: {
+        }, className: styles$6["scheduler-timeline-now"], children: isHeader && (jsx("span", { style: {
                 color: color,
-            }, className: styles$3["scheduler-timeline-label"], children: currentTime.toLocaleTimeString([], {
+            }, className: styles$6["scheduler-timeline-label"], children: currentTime.toLocaleTimeString([], {
                 hour: '2-digit',
                 minute: '2-digit',
                 hour12: false
@@ -9149,17 +9166,17 @@ const SchedulerHeaderDivision = ({ topDivisions, bottomDivisions, classification
     return (jsxs("div", { style: {
             width: topWidth,
             cursor: "pointer"
-        }, children: [jsx("div", { className: `${styles$3["scheduler-dates"]} ${isToday(startDate, endDate) ? styles$3["current-day"] : ""}`, children: jsx("span", { children: topDivisions }) }), jsx("div", { style: { display: "flex", justifyContent: "space-between", flex: 1 }, children: bottomDivisions.map((element) => (jsx("div", { className: styles$3["scheduler-hours"], children: jsx("span", { children: element }) }, classification + element + topDivisions))) })] }));
+        }, children: [jsx("div", { className: `${styles$6["scheduler-dates"]} ${isToday(startDate, endDate) ? styles$6["current-day"] : ""}`, children: jsx("span", { children: topDivisions }) }), jsx("div", { style: { display: "flex", justifyContent: "space-between", flex: 1 }, children: bottomDivisions.map((element) => (jsx("div", { className: styles$6["scheduler-hours"], children: jsx("span", { children: element }) }, classification + element + topDivisions))) })] }));
 };
 const HeaderTitle = ({ title, dividerText, width }) => {
-    return (jsxs("div", { className: styles$3["scheduler-header-title"], style: { width: width }, children: [jsx("div", { className: styles$3["title-cell"], children: jsx("span", { className: styles$3.title, children: title }) }), jsx("div", { children: jsx("span", { children: dividerText }) })] }));
+    return (jsxs("div", { className: styles$6["scheduler-header-title"], style: { width: width }, children: [jsx("div", { className: styles$6["title-cell"], children: jsx("span", { className: styles$6.title, children: title }) }), jsx("div", { children: jsx("span", { children: dividerText }) })] }));
 };
 const SchedulerHeader = ({ content, divisions, visibleDays, selectedDate, width, onEvent, timeLinePercentage, isUtc }) => {
     const topWidth = (100 / visibleDays);
     const { title, classification } = content;
-    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) => {
+    return (jsxs("div", { className: styles$6["scheduler-header"], children: [jsx(HeaderTitle, { title: title, dividerText: classification, width: width }), jsxs("div", { className: styles$6["scheduler-header-divisions"], style: { flex: 1, display: "flex", position: "relative" }, onMouseDown: (e) => {
                     e.preventDefault();
                     const clickPercentage = getPercentageFromMouseEvent(e);
                     const date = dateFromPercentage(selectedDate, visibleDays, clickPercentage);
@@ -9191,7 +9208,7 @@ function getStartEnd(day) {
     };
 }
-var styles$2 = {"hide-scrollbar":"new-scheduler-module__hide-scrollbar__33GG9","scheduler-event":"new-scheduler-module__scheduler-event__gphwn","scheduler-event-container":"new-scheduler-module__scheduler-event-container__-h1xm","time-marker":"new-scheduler-module__time-marker__2BejU","color-bars":"new-scheduler-module__color-bars__MhMF7","scheduler-event-text":"new-scheduler-module__scheduler-event-text__zjvd7"};
+var styles$5 = {"hide-scrollbar":"new-scheduler-module__hide-scrollbar__33GG9","scheduler-event":"new-scheduler-module__scheduler-event__gphwn","scheduler-event-container":"new-scheduler-module__scheduler-event-container__-h1xm","time-marker":"new-scheduler-module__time-marker__2BejU","underlay":"new-scheduler-module__underlay__RVCnV","label-halo":"new-scheduler-module__label-halo__84c7e","corner-marker":"new-scheduler-module__corner-marker__w7o90","color-bars":"new-scheduler-module__color-bars__MhMF7","scheduler-event-text":"new-scheduler-module__scheduler-event-text__zjvd7"};
 const BackgroundEvent = ({ value, heightRem }) => {
     const backColor = getHSLColor(value.color, value.alpha ?? 0.5);
@@ -9218,13 +9235,13 @@ const BackgroundEvent = ({ value, heightRem }) => {
                             padding: "0.25rem",
                             color: textColor,
                             alignItems: value.contentAlign ?? "center"
-                        }, className: styles$2["scheduler-event-container"], children: [value.icons ? jsx("div", { style: {
+                        }, className: styles$5["scheduler-event-container"], children: [value.icons ? jsx("div", { style: {
                                     display: "flex",
                                     flexDirection: "row",
                                     alignItems: "center",
                                     whiteSpace: "nowrap",
                                     color: textColor,
-                                }, children: value.icons }) : null, jsx("span", { className: styles$2["scheduler-event-text"], children: value.name })] }) }) }) }) })) : null;
+                                }, children: value.icons }) : null, jsx("span", { className: styles$5["scheduler-event-text"], children: value.name })] }) }) }) }) })) : null;
 };
 const eventIsVisible = (startDate, endDate, selectedDate, visibleDays) => {
@@ -9386,16 +9403,16 @@ const WeekEndLine = ({ left, top = "0px", height, widthPercentage }) => {
         } }));
 };
-var styles$1 = {"scheduler-row-header":"scheduler-row-module__scheduler-row-header__S-iv4"};
+var styles$4 = {"scheduler-row-header":"scheduler-row-module__scheduler-row-header__S-iv4"};
 const DefaultRowHeader = ({ value, width, onEvent }) => {
     return (jsxs("div", { style: {
             width: width,
             flexShrink: 0,
-            // background: color,
+            background: value.highlightColor,
         }, onClick: (_) => {
             onEvent(new OnClickRowHeader(value.rowId));
-        }, className: styles$1["scheduler-row-header"], children: [jsxs("div", { children: [jsx("strong", { children: value.title }), value.title2 && jsxs("span", { children: ["-", value.title2] }), " ", jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 && jsxs("span", { className: styles$1["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxs("span", { children: ["-", value.subtitle2] })] })] }));
+        }, className: styles$4["scheduler-row-header"], children: [jsxs("div", { children: [jsx("strong", { children: value.title }), value.title2 && jsxs("span", { children: ["-", value.title2] }), " ", jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 && jsxs("span", { className: styles$4["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxs("span", { children: ["-", value.subtitle2] })] })] }));
 };
 const EventSideDrag = ({ left = false, heightRem, onStartEvent }) => {
@@ -9485,7 +9502,7 @@ const SchedulerEvent = ({ value, heightRem, onEvent, maxEventHeightRem }) => {
                                 height: `calc(${effectiveHeight}rem - 4px)`,
                                 opacity: eventTransparent ? 0.5 : 1,
                                 ...value.style,
-                            }, className: styles$2["scheduler-event"], children: [jsxs("div", { style: {
+                            }, className: styles$5["scheduler-event"], "data-underlay": value.underlay ? true : undefined, children: [value.underlay && jsx("div", { className: styles$5["underlay"], children: value.underlay }), jsxs("div", { style: {
                                         display: "flex",
                                         flexDirection: "row",
                                         alignItems: "stretch",
@@ -9496,26 +9513,32 @@ const SchedulerEvent = ({ value, heightRem, onEvent, maxEventHeightRem }) => {
                                         height: "100%",
                                     }, children: [value.isResizable && (jsx(EventSideDrag, { left: true, heightRem: effectiveHeight * 0.7, onStartEvent: () => {
                                                 onEvent(new OnLeftDragStart(value.id));
-                                            } })), jsxs("div", { className: styles$2["scheduler-event-container"], children: [jsx("div", { style: {
+                                            } })), jsxs("div", { className: styles$5["scheduler-event-container"], children: [jsx("div", { style: {
                                                         display: "flex",
                                                         flexDirection: "row",
                                                         alignItems: "center",
                                                         whiteSpace: "nowrap",
                                                         color: textColor,
-                                                    }, children: value.icons }), jsx("span", { style: {
+                                                    }, children: value.icons }), jsx("span", { className: value.underlay ? styles$5["label-halo"] : undefined, style: {
                                                         padding: "0.1rem",
                                                         color: textColor,
                                                         display: "flex",
                                                         flex: 1,
                                                         alignItems: "center",
                                                         width: "100%",
-                                                    }, children: value.rectangleColors && value.rectangleColors.length > 0 ? (jsx("div", { className: styles$2["color-bars"], children: value.rectangleColors.map((item, i) => (jsx("div", { style: { backgroundColor: item } }, value.id + "_" + i))) })) : (value.name) })] }), value.isResizable && (jsx(EventSideDrag, { heightRem: effectiveHeight * 0.7, onStartEvent: () => {
+                                                        ...(value.underlay && { "--label-halo-color": backColor }),
+                                                    }, children: value.rectangleColors && value.rectangleColors.length > 0 ? (jsx("div", { className: styles$5["color-bars"], children: value.rectangleColors.map((item, i) => (jsx("div", { style: { backgroundColor: item } }, value.id + "_" + i))) })) : (value.label ?? value.name) })] }), value.isResizable && (jsx(EventSideDrag, { heightRem: effectiveHeight * 0.7, onStartEvent: () => {
                                                 onEvent(new OnRightDragStart(value.id));
-                                            } }))] }), value.primaryTimeMarkerColor && (jsx("div", { className: styles$2["time-marker"], style: {
+                                            } }))] }), value.primaryTimeMarkerColor && (jsx("div", { className: styles$5["time-marker"], style: {
                                         backgroundColor: value.primaryTimeMarkerColor,
-                                    } })), value.secondaryTimeMarkerColor && (jsx("div", { className: styles$2["time-marker"], style: {
+                                    } })), value.secondaryTimeMarkerColor && (jsx("div", { className: styles$5["time-marker"], style: {
                                         backgroundColor: value.secondaryTimeMarkerColor,
-                                    } }))] }) }) }, value.id) })] }));
+                                    } }))] }) }) }, value.id) }), value.cornerMarker && (jsx("div", { className: styles$5["corner-marker"], style: {
+                    top: `${topOffsetPx}px`,
+                    left: `${value.left}%`,
+                    width: `${value.width}%`,
+                    height: `calc(${effectiveHeight}rem - 4px)`,
+                }, children: jsx("span", { "data-interactive": value.cornerMarker.tooltip ? true : undefined, "data-pulse": value.cornerMarker.pulse ? true : undefined, children: value.cornerMarker.tooltip ? (jsx(CwTooltipNew, { content: value.cornerMarker.tooltip, position: "top", showDelay: 200, hide: isOnDrag, displayInline: true, children: jsx(CwBadge, { color: value.cornerMarker.color, size: "medium" }) })) : (jsx(CwBadge, { color: value.cornerMarker.color, size: "medium" })) }) }))] }));
 };
 const SchedulerRow = memo((props) => {
@@ -10044,13 +10067,13 @@ const Scheduler = (props) => {
                         position: "sticky",
                         top: 0,
                         zIndex: 1,
-                    }, children: jsx(SchedulerHeader, { ...header }) })), jsx(VariableSizeList, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, itemData: itemData, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: styles$2["hide-scrollbar"], children: Row })] }) }));
+                    }, children: jsx(SchedulerHeader, { ...header }) })), jsx(VariableSizeList, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, itemData: itemData, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: styles$5["hide-scrollbar"], children: Row })] }) }));
 };
 class UiEvent {
 }
-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"};
+var styles$3 = {"super-scheduler-row-header":"super-scheduler-module__super-scheduler-row-header__TTs4e","indicators":"super-scheduler-module__indicators__f4lIT","scheduler-crewmember-functions":"super-scheduler-module__scheduler-crewmember-functions__BS2hs"};
 class OnPinRow {
     id;
@@ -10078,15 +10101,15 @@ const PinRowHeader = ({ value, width, onEvent }) => {
                     flexShrink: 0,
                     height: "100%",
                     background: highlightColor
-                }, className: styles["super-scheduler-row-header"], children: [jsx("button", { className: "cw-button-icon cwi-pin", "data-pinned": value.isPinned, onClick: (_) => {
+                }, className: styles$3["super-scheduler-row-header"], children: [jsx("button", { className: "cw-button-icon cwi-pin", "data-pinned": value.isPinned, onClick: (_) => {
                             onEvent(value.isPinned ? new OnUnpinRow(value.rowId) : new OnPinRow(value.rowId));
-                        } }), jsx("div", { className: styles["indicators"], children: value.indicators ?? undefined }), jsxs("div", { style: {
+                        } }), jsx("div", { className: styles$3["indicators"], children: value.indicators ?? undefined }), jsxs("div", { style: {
                             display: "flex",
                             flexDirection: "column",
                             justifyContent: "center",
                             alignItems: "flex-start",
                         }, children: [jsxs("div", { children: [jsx("strong", { children: value.title }), value.title2 && jsxs("span", { children: ["-", value.title2] }), " ", jsx("strong", { children: value.subtitle })] }), value.subtitle && jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 &&
-                                        jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxs("span", { children: ["-", value.subtitle2] })] })] }), isLoading ? jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }) }, value.rowId) }, value.rowId);
+                                        jsxs("span", { className: styles$3["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxs("span", { children: ["-", value.subtitle2] })] })] }), isLoading ? jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }) }, value.rowId) }, value.rowId);
 };
 const SuperScheduler = ({ id, state, header, rows, events, headerColumnComp, pinnedOrderCategory, unPinnedOrderCategory, backgroundEvents, indicatorRows = [], contextMenuItems, onEvent, rowHeightRem = 1.75, rowHeaderWidth, maxEventHeightRem, EventComp = SchedulerEvent, }) => {
@@ -10098,6 +10121,2324 @@ const SuperScheduler = ({ id, state, header, rows, events, headerColumnComp, pin
                             }, children: "Clear pinned" }) })] })), jsx(Scheduler, { id: `${id}-notPinned`, state: { ...state, isHeaderVisible: !isFirstVisible }, header: header, rows: notPinnedRows, events: events, backgroundEvents: backgroundEvents, indicatorRows: indicatorRows, contextMenuItems: contextMenuItems, orderCategories: unPinnedOrderCategory, onEvent: onEvent, EventComp: EventComp, RowTitleComp: headerColumnComp, rowHeightRem: rowHeightRem, rowHeaderWidth: rowHeaderWidth, maxEventHeightRem: maxEventHeightRem })] }));
 };
+/** A toggle ref hides its item while `InitiallyHidden` XOR "flipped" is true. */
+function isToggleRefHidden(ref, flipped) {
+    return ref.InitiallyHidden !== flipped.has(ref.Id);
+}
+/** An item, row or cell is visible only when every toggle it depends on is in its visible state. */
+function isRdlVisible(toggles, flipped) {
+    if (!toggles || toggles.length === 0)
+        return true;
+    return toggles.every(ref => !isToggleRefHidden(ref, flipped));
+}
+/** The +/- state of a toggle textbox: the initial state inverted when its id was flipped. */
+function isToggleExpanded(textbox, flipped) {
+    const initial = textbox.ToggleExpanded ?? false;
+    return textbox.ToggleId ? initial !== flipped.has(textbox.ToggleId) : initial;
+}
+/**
+ * The toggle ids an export or print sends so the file shows the drilldown state of the screen: the
+ * ids flipped relative to the render's initial state (a toggle clicked twice is back to its initial
+ * state and not sent), sorted for a stable request.
+ */
+function flippedToggleIds(flipped) {
+    return [...flipped].sort();
+}
+/** The toggle ids to ask the server for after a click on toggle `id`: the flipped ids with `id` flipped once more. */
+function toggledIds(flipped, id) {
+    return flippedToggleIds(flipToggle(flipped, id));
+}
+/** Returns a new set with `id` flipped (added when absent, removed when present). */
+function flipToggle(flipped, id) {
+    const next = new Set(flipped);
+    if (next.has(id)) {
+        next.delete(id);
+    }
+    else {
+        next.add(id);
+    }
+    return next;
+}
+/** Number of visible rows among `span` rows starting at `start`, at least 1. */
+function visibleRowSpan(rowVisible, start, span) {
+    const end = Math.min(rowVisible.length, start + Math.max(1, span));
+    let count = 0;
+    for (let i = start; i < end; i++) {
+        if (rowVisible[i])
+            count++;
+    }
+    return Math.max(1, count);
+}
+function sum(values, from, to) {
+    let total = 0;
+    for (let i = Math.max(0, from); i < Math.min(values.length, to); i++)
+        total += values[i];
+    return total;
+}
+function visibleHeight(rows, rowVisible, start, span) {
+    const end = Math.min(rows.length, start + Math.max(1, span));
+    let height = 0;
+    for (let i = start; i < end; i++) {
+        if (rowVisible[i])
+            height += rows[i].Height;
+    }
+    return height;
+}
+/**
+ * Lays a table out for the current toggle state: hidden rows take no space, cells are placed at
+ * their column with ColSpan/RowSpan and a header cell's RowSpan is recounted over the visible rows.
+ * Cells that start in a hidden row are not drawn.
+ */
+function layoutRdlTable(table, flipped) {
+    const rows = table.Rows;
+    const widths = table.ColumnWidths;
+    const rowVisible = rows.map(row => isRdlVisible(row.Toggles, flipped));
+    const rowTops = [];
+    let top = 0;
+    rows.forEach((row, index) => {
+        rowTops.push(top);
+        if (rowVisible[index])
+            top += row.Height;
+    });
+    const cells = [];
+    rows.forEach((row, rowIndex) => {
+        if (!rowVisible[rowIndex])
+            return;
+        row.Cells.forEach((cell, cellIndex) => {
+            const colSpan = Math.max(1, cell.ColSpan);
+            cells.push({
+                cell,
+                rowIndex,
+                cellIndex,
+                left: sum(widths, 0, cell.Column),
+                top: rowTops[rowIndex],
+                width: sum(widths, cell.Column, cell.Column + colSpan),
+                height: visibleHeight(rows, rowVisible, rowIndex, cell.RowSpan),
+                rowSpan: visibleRowSpan(rowVisible, rowIndex, cell.RowSpan),
+                hidden: !isRdlVisible(cell.Toggles, flipped)
+            });
+        });
+    });
+    return {
+        width: sum(widths, 0, widths.length),
+        height: top,
+        rowTops,
+        rowVisible,
+        cells
+    };
+}
+/*
+ * Find over the text of one page. Every run gets a key from its position in the render tree; the
+ * renderer builds the same keys, so a match can be highlighted where the run is drawn.
+ */
+/** Key prefixes of the three page sections. */
+const RDL_SECTION_KEYS = { header: "h", body: "b", footer: "f" };
+function rdlItemKey(parentKey, index) {
+    return `${parentKey}.${index}`;
+}
+function rdlCellKey(tableKey, rowIndex, cellIndex) {
+    return `${tableKey}.r${rowIndex}c${cellIndex}`;
+}
+function rdlRunKey(textboxKey, paragraphIndex, runIndex) {
+    return `${textboxKey}.p${paragraphIndex}r${runIndex}`;
+}
+function collectTextbox(textbox, key, out) {
+    textbox.Paragraphs.forEach((paragraph, p) => {
+        paragraph.Runs.forEach((run, r) => {
+            if (run.Text)
+                out.push({ key: rdlRunKey(key, p, r), text: run.Text });
+        });
+    });
+}
+function collectItem(item, key, flipped, out) {
+    if (!isRdlVisible(item.Toggles, flipped))
+        return;
+    switch (item.Kind) {
+        case "textbox":
+            collectTextbox(item, key, out);
+            break;
+        case "rectangle":
+            collectItems(item.Items, key, flipped, out);
+            break;
+        case "table": {
+            const layout = layoutRdlTable(item, flipped);
+            for (const box of layout.cells) {
+                if (box.hidden || !box.cell.Content)
+                    continue;
+                collectItem(box.cell.Content, rdlCellKey(key, box.rowIndex, box.cellIndex), flipped, out);
+            }
+            break;
+        }
+    }
+}
+function collectItems(items, parentKey, flipped, out) {
+    items.forEach((item, index) => collectItem(item, rdlItemKey(parentKey, index), flipped, out));
+}
+/** Every visible text run of a page in document order: header, body, footer. */
+function collectPageText(page, flipped) {
+    const out = [];
+    if (page.Header)
+        collectItems(page.Header.Items, RDL_SECTION_KEYS.header, flipped, out);
+    collectItems(page.Items, RDL_SECTION_KEYS.body, flipped, out);
+    if (page.Footer)
+        collectItems(page.Footer.Items, RDL_SECTION_KEYS.footer, flipped, out);
+    return out;
+}
+/**
+ * The text lower-cased one character at a time, with each code unit of the result pointing back to the
+ * original character it came from: lower-casing can change the length ("İ" becomes two code units outside
+ * Turkish), and the highlights slice the original text.
+ */
+function lowerWithOffsets(text, locale) {
+    let lower = "";
+    const starts = [];
+    const ends = [];
+    let index = 0;
+    for (const character of text) {
+        const lowered = character.toLocaleLowerCase(locale);
+        for (let unit = 0; unit < lowered.length; unit++) {
+            starts.push(index);
+            ends.push(index + character.length);
+        }
+        lower += lowered;
+        index += character.length;
+    }
+    return { lower, starts, ends };
+}
+/**
+ * Case-insensitive, non-overlapping matches of `query` in the runs, in run order, with the casing rules of
+ * `locale` (default: the browser's, so "istanbul" finds "İSTANBUL" in Turkish). A match does not span two runs.
+ */
+function findInRuns(runs, query, locale) {
+    const needle = query.trim().toLocaleLowerCase(locale);
+    if (needle === "")
+        return [];
+    const matches = [];
+    for (const run of runs) {
+        const { lower, starts, ends } = lowerWithOffsets(run.text, locale);
+        let from = 0;
+        for (;;) {
+            const at = lower.indexOf(needle, from);
+            if (at < 0)
+                break;
+            const start = starts[at];
+            matches.push({ key: run.key, start, length: ends[at + needle.length - 1] - start });
+            from = at + needle.length;
+        }
+    }
+    return matches;
+}
+/** Find over the visible text of one page. */
+function findInPage(page, query, flipped) {
+    return findInRuns(collectPageText(page, flipped), query);
+}
+/**
+ * The active match index: -1 without matches; the stored index clamped into the matches when it belongs to the
+ * current page and query (a stored -1 from an empty search becomes 0 once a drilldown reveals matches); else 0.
+ */
+function activeMatchIndex(storedIndex, storedForCurrentSearch, count) {
+    if (count <= 0)
+        return -1;
+    return storedForCurrentSearch ? Math.min(Math.max(0, storedIndex), count - 1) : 0;
+}
+/** The next match index after `current`, cycling; -1 when there are no matches. */
+function nextMatchIndex(current, count) {
+    if (count <= 0)
+        return -1;
+    return current < 0 ? 0 : (current + 1) % count;
+}
+/** CSS pixels per point: 96 px per inch, 72 pt per inch. */
+const PX_PER_PT = 96 / 72;
+/** Converts points to CSS pixels at a zoom factor (1 = 100%). */
+function ptToPx(pt, zoom = 1) {
+    return pt * PX_PER_PT * zoom;
+}
+const POINTS_PER_UNIT = {
+    pt: 1,
+    px: 72 / 96,
+    in: 72,
+    cm: 72 / 2.54,
+    mm: 72 / 25.4,
+    pc: 12
+};
+// Linear: one digit run either side of the point, so a long non-matching value cannot backtrack quadratically.
+const SIZE_PATTERN = /^\s*(-?(?:\d+(?:\.\d*)?|\.\d+))\s*(pt|px|in|cm|mm|pc)?\s*$/i;
+/** No real RDL size comes near this; longer report-supplied strings are rejected before matching. */
+const MAX_SIZE_LENGTH = 32;
+/** Parses an RDL size ("10pt", "2.5mm", "1in", ...) into points; a bare number is points. Null when unparsable. */
+function parseRdlSize(value) {
+    if (!value || value.length > MAX_SIZE_LENGTH)
+        return null;
+    const match = SIZE_PATTERN.exec(value);
+    if (!match)
+        return null;
+    const unit = (match[2] ?? "pt").toLowerCase();
+    return parseFloat(match[1]) * POINTS_PER_UNIT[unit];
+}
+/** An RDL size as CSS pixels at a zoom factor, or undefined when the size is missing or unparsable. */
+function rdlSizeToPx(value, zoom) {
+    const pt = parseRdlSize(value);
+    return pt === null ? undefined : ptToPx(pt, zoom);
+}
+/** The zoom steps of the toolbar, 50% to 200%. */
+const REPORT_ZOOM_STEPS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+const MIN_ZOOM = 0.1;
+const MAX_ZOOM = 4;
+/** Default margins of a standalone CwReportPage: a quarter inch, so content never touches the paper edge. */
+const DEFAULT_PAGE_MARGIN_PT = 18;
+/**
+ * Margins of the sheet in the viewer: none. Like the old ReportViewer, the screen shows the content
+ * (header, body, footer) without the RDL page margins; PDF and print come from the server with them.
+ */
+const SCREEN_PAGE_MARGINS = { top: 0, right: 0, bottom: 0, left: 0 };
+/** Width of the page content in points: the page's own `Width` (body plus items reaching past it) when the server sends it, else the body width. */
+function pageContentWidthPt(page, bodyWidth) {
+    return page.Width && Number.isFinite(page.Width) && page.Width > 0 ? Math.max(page.Width, bodyWidth) : bodyWidth;
+}
+/** Size of the drawn sheet in points: margins + header + body + footer, as wide as the content so every item lies on it. */
+function pageSheetSizePt(page, bodyWidth, margins) {
+    return {
+        width: margins.left + pageContentWidthPt(page, bodyWidth) + margins.right,
+        height: margins.top + (page.Header?.Height ?? 0) + page.Height + (page.Footer?.Height ?? 0) + margins.bottom
+    };
+}
+/**
+ * The zoom factor to draw with. "pageWidth" fits the sheet width into the available width,
+ * "wholePage" fits the whole sheet; available sizes are CSS pixels. Clamped to 10%..400%.
+ */
+function resolveZoomFactor(zoom, sheetPt, available) {
+    if (typeof zoom === "number")
+        return clamp(zoom);
+    const widthPx = ptToPx(sheetPt.width);
+    const heightPx = ptToPx(sheetPt.height);
+    if (widthPx <= 0 || available.width <= 0)
+        return 1;
+    const byWidth = available.width / widthPx;
+    if (zoom === "pageWidth" || heightPx <= 0 || available.height <= 0)
+        return clamp(byWidth);
+    return clamp(Math.min(byWidth, available.height / heightPx));
+}
+function clamp(value) {
+    return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, value));
+}
+/*
+ * Maps the RDL style vocabulary to CSS. Everything here is report CONTENT: colors, fonts and borders
+ * come from the report definition and are applied as given, not from the design system.
+ */
+const RDL_DEFAULT_FONT_FAMILY = "Arial";
+const RDL_DEFAULT_FONT_SIZE = "10pt";
+const RDL_DEFAULT_COLOR = "black";
+const FONT_WEIGHTS = {
+    thin: 100,
+    extralight: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    heavy: 900
+};
+const BORDER_STYLES = {
+    solid: "solid",
+    dotted: "dotted",
+    dashed: "dashed",
+    double: "double",
+    none: "none"
+};
+/** An RDL color as CSS: "Transparent" = transparent, names and #RRGGBB pass through, empty = undefined. */
+function rdlColor(value) {
+    if (!value)
+        return undefined;
+    const trimmed = value.trim();
+    if (trimmed === "")
+        return undefined;
+    return trimmed.toLowerCase() === "transparent" ? "transparent" : trimmed;
+}
+/** Thin..Heavy to 100..900; unknown values fall back to normal. */
+function rdlFontWeight(value) {
+    if (!value)
+        return 400;
+    return FONT_WEIGHTS[value.toLowerCase()] ?? (/^\d{3}$/.test(value) ? parseInt(value, 10) : 400);
+}
+/** A border side as a CSS shorthand; Style None or missing = none. Width defaults to 1pt, color to black. */
+function rdlBorder(border, zoom) {
+    if (!border)
+        return undefined;
+    const style = BORDER_STYLES[(border.Style ?? "none").toLowerCase()] ?? "solid";
+    if (style === "none")
+        return "none";
+    const widthPt = parseRdlSize(border.Width) ?? 1;
+    const widthPx = Math.max(1, ptToPx(widthPt, zoom));
+    return `${widthPx}px ${style} ${rdlColor(border.Color) ?? RDL_DEFAULT_COLOR}`;
+}
+/**
+ * The four borders of an item box as the custom properties its border overlay draws
+ * (`--rdl-border-top` ... in cw-report-page.module.css). Like the report server, borders sit on
+ * the box edge and take no space from the content, so text laid out by the server to just fit
+ * still fits. Always all four sides, "none" when unset: custom properties inherit, and a nested
+ * item must not draw its container's borders.
+ */
+function rdlBorderVars(style, zoom) {
+    return {
+        "--rdl-border-top": rdlBorder(style?.BorderTop, zoom) ?? "none",
+        "--rdl-border-right": rdlBorder(style?.BorderRight, zoom) ?? "none",
+        "--rdl-border-bottom": rdlBorder(style?.BorderBottom, zoom) ?? "none",
+        "--rdl-border-left": rdlBorder(style?.BorderLeft, zoom) ?? "none"
+    };
+}
+/** Background, borders (as overlay custom properties, see `rdlBorderVars`) and padding of an item box. */
+function rdlBoxStyle(style, zoom) {
+    if (!style)
+        return rdlBorderVars(null, zoom);
+    return {
+        ...rdlBorderVars(style, zoom),
+        backgroundColor: rdlColor(style.BackgroundColor),
+        paddingTop: rdlSizeToPx(style.PaddingTop, zoom),
+        paddingRight: rdlSizeToPx(style.PaddingRight, zoom),
+        paddingBottom: rdlSizeToPx(style.PaddingBottom, zoom),
+        paddingLeft: rdlSizeToPx(style.PaddingLeft, zoom)
+    };
+}
+function pick(key, styles) {
+    for (const style of styles) {
+        const value = style?.[key];
+        if (value)
+            return value;
+    }
+    return null;
+}
+function resolveRdlTextStyle(run, paragraph, textbox) {
+    const chain = [run, paragraph, textbox];
+    return {
+        color: pick("Color", chain) ?? RDL_DEFAULT_COLOR,
+        fontFamily: pick("FontFamily", chain) ?? RDL_DEFAULT_FONT_FAMILY,
+        fontSize: pick("FontSize", chain) ?? RDL_DEFAULT_FONT_SIZE,
+        fontStyle: pick("FontStyle", chain),
+        fontWeight: pick("FontWeight", chain),
+        textDecoration: pick("TextDecoration", chain),
+        lineHeight: pick("LineHeight", chain)
+    };
+}
+/**
+ * The text style of a paragraph element. Its font sets the strut every line box gets, so it takes
+ * the font of its runs (they usually share one; when they differ, the first run's): a paragraph
+ * left at the textbox default (Arial 10pt) around Segoe UI 8pt runs would make every line taller
+ * than the server measured and the text would overflow its box. An RDL LineHeight on the paragraph
+ * or textbox still wins; otherwise the run's LineHeight, if any, applies.
+ */
+function resolveParagraphTextStyle(runStyles, paragraph, textbox) {
+    const own = resolveRdlTextStyle(null, paragraph, textbox);
+    if (runStyles.length === 0)
+        return own;
+    const run = resolveRdlTextStyle(runStyles[0], paragraph, textbox);
+    return {
+        ...own,
+        fontFamily: run.fontFamily,
+        fontSize: run.fontSize,
+        fontStyle: run.fontStyle,
+        fontWeight: run.fontWeight,
+        lineHeight: own.lineHeight ?? run.lineHeight
+    };
+}
+function textDecoration(value) {
+    switch ((value ?? "").toLowerCase()) {
+        case "underline": return "underline";
+        case "linethrough": return "line-through";
+        case "overline": return "overline";
+        default: return undefined;
+    }
+}
+/** An RDL LineHeight in pixels, else "normal"; an unparsable value also falls back to normal. */
+function rdlLineHeight(value, zoom) {
+    const px = rdlSizeToPx(value, zoom);
+    return px === undefined ? "normal" : `${px}px`;
+}
+/**
+ * CSS of a resolved text style at a zoom factor. Without an RDL LineHeight the line height is the
+ * font's natural one ("normal"), the spacing the server measures text with; set inline so no app
+ * or base rule on p / span (125%, 1.15) can shrink the line box and clip large glyphs.
+ */
+function rdlTextCss(text, zoom) {
+    return {
+        // Transparent text is invisible, as in Reporting Services (reports use it to hide values).
+        color: rdlColor(text.color),
+        fontFamily: text.fontFamily,
+        fontSize: rdlSizeToPx(text.fontSize, zoom) ?? ptToPx(10, zoom),
+        fontStyle: (text.fontStyle ?? "").toLowerCase() === "italic" ? "italic" : undefined,
+        fontWeight: text.fontWeight ? rdlFontWeight(text.fontWeight) : undefined,
+        textDecoration: textDecoration(text.textDecoration),
+        lineHeight: rdlLineHeight(text.lineHeight, zoom)
+    };
+}
+/** TextAlign Left/Center/Right/General (General = left). */
+function rdlTextAlign(value) {
+    switch ((value ?? "").toLowerCase()) {
+        case "center": return "center";
+        case "right": return "right";
+        case "justify": return "justify";
+        default: return "left";
+    }
+}
+/**
+ * VerticalAlign Top/Middle/Bottom as the justify-content of a column flex box. "safe": when the
+ * text is taller than its box it falls back to the top, so the first line is never cut off.
+ */
+function rdlVerticalAlign(value) {
+    switch ((value ?? "").toLowerCase()) {
+        case "middle": return "safe center";
+        case "bottom": return "safe flex-end";
+        default: return "flex-start";
+    }
+}
+/** The stroke of a line item: BorderTop, else BorderLeft, default 1pt solid black. */
+function rdlLineStroke(style, zoom) {
+    const border = style?.BorderTop ?? style?.BorderLeft ?? null;
+    const width = Math.max(1, ptToPx(parseRdlSize(border?.Width) ?? 1, zoom));
+    const kind = (border?.Style ?? "solid").toLowerCase();
+    const color = rdlColor(border?.Color) ?? RDL_DEFAULT_COLOR;
+    if (kind === "none")
+        return { color: "transparent", width };
+    if (kind === "dotted")
+        return { color, width, dash: `${width} ${width * 2}` };
+    if (kind === "dashed")
+        return { color, width, dash: `${width * 4} ${width * 2}` };
+    return { color, width };
+}
+/*
+ * Pure chart math for the report charts. The hex values below are the report's chart palettes:
+ * content colors (like the colors a report carries), not UI chrome, so no design tokens.
+ */
+/**
+ * The Microsoft chart palettes by name, with the exact colors of the old ReportViewer engine.
+ * The engine's semi-transparent palettes are #AARRGGBB; here they are CSS #RRGGBBAA.
+ */
+const PALETTES = {
+    Default: [
+        "#008000", "#0000FF", "#800080", "#00FF00", "#FF00FF", "#008080", "#FFFF00", "#808080",
+        "#00FFFF", "#000080", "#800000", "#FF0000", "#808000", "#C0C0C0", "#FF6347", "#FFE4B5"
+    ],
+    Grayscale: [
+        "#C8C8C8", "#BDBDBD", "#B2B2B2", "#A7A7A7", "#9C9C9C", "#919191", "#868686", "#7B7B7B",
+        "#707070", "#656565", "#5A5A5A", "#4F4F4F", "#444444", "#393939", "#2E2E2E", "#232323"
+    ],
+    Excel: [
+        "#9999FF", "#993366", "#FFFFCC", "#CCFFFF", "#660066", "#FF8080", "#0066CC", "#CCCCFF",
+        "#000080", "#FF00FF", "#FFFF00", "#00FFFF", "#800080", "#800000", "#008080", "#0000FF"
+    ],
+    Light: ["#E6E6FA", "#FFF0F5", "#FFDAB9", "#FFFACD", "#FFE4E1", "#F0FFF0", "#F0F8FF", "#F5F5F5", "#FAEBD7", "#E0FFFF"],
+    Pastel: [
+        "#87CEEB", "#32CD32", "#BA55D3", "#F08080", "#4682B4", "#9ACD32", "#40E0D0", "#FF69B4",
+        "#F0E68C", "#D2B48C", "#8FBC8B", "#6495ED", "#DDA0DD", "#5F9EA0", "#FFDAB9", "#FFA07A"
+    ],
+    EarthTones: [
+        "#FF8000", "#B8860B", "#C04000", "#6B8E23", "#CD853F", "#C0C000", "#228B22", "#D2691E",
+        "#808000", "#20B2AA", "#F4A460", "#00C000", "#8FBC8B", "#B22222", "#8B4513", "#C00000"
+    ],
+    SemiTransparent: [
+        "#FF000096", "#00FF0096", "#0000FF96", "#FFFF0096", "#00FFFF96", "#FF00FF96", "#AA781496", "#FF000050",
+        "#00FF0050", "#0000FF50", "#FFFF0050", "#00FFFF50", "#FF00FF50", "#AA781450", "#64783296", "#285A9696"
+    ],
+    Berry: ["#8A2BE2", "#BA55D3", "#4169E1", "#C71585", "#0000FF", "#8A2BE2", "#DA70D6", "#7B68EE", "#C000C0", "#0000CD", "#800080"],
+    Chocolate: ["#A0522D", "#D2691E", "#8B0000", "#CD853F", "#A52A2A", "#F4A460", "#8B4513", "#C04000", "#B22222", "#B65C3A"],
+    Fire: ["#FFD700", "#FF0000", "#FF1493", "#DC143C", "#FF8C00", "#FF00FF", "#FFFF00", "#FF4500", "#C71585", "#DDE221"],
+    SeaGreen: ["#2E8B57", "#66CDAA", "#4682B4", "#008B8B", "#5F9EA0", "#3CB371", "#48D1CC", "#B0C4DE", "#8FBC8B", "#87CEEB"],
+    BrightPastel: [
+        "#418CF0", "#FCB441", "#E0400A", "#056492", "#BFBFBF", "#1A3B69", "#FFE382", "#129CDD",
+        "#CA6B4B", "#005CDB", "#F3D288", "#506381", "#F1B9A8", "#E0830A", "#7893BE"
+    ],
+    Pacific: [
+        "#01B8AA", "#374649", "#FD625E", "#F2C80F", "#5F6B6D", "#8AD4EB", "#FE9666", "#A66999", "#3599B8", "#DFBFBF",
+        "#4AC5BB", "#5F6B6D", "#FB8281", "#F4D25A", "#7F898A", "#A4DDEE", "#FDAB89", "#B687AC", "#28738A", "#A78F8F"
+    ],
+    PacificLight: ["#4AC5BB", "#5F6B6D", "#FB8281", "#F4D25A", "#7F898A", "#A4DDEE", "#FDAB89", "#B687AC", "#28738A", "#A78F8F"],
+    PacificSemiTransparent: [
+        "#01B8AA99", "#37464999", "#FD625E99", "#F2C80F99", "#5F6B6D99", "#8AD4EB99", "#FE966699", "#A6699999", "#3599B899", "#DFBFBF99",
+        "#4AC5BB99", "#5F6B6D99", "#FB828199", "#F4D25A99", "#7F898A99", "#A4DDEE99", "#FDAB8999", "#B687AC99", "#28738A99", "#A78F8F99"
+    ]
+};
+const PALETTES_BY_NAME = new Map(Object.entries(PALETTES).map(([name, colors]) => [name.toLowerCase(), colors]));
+/** The palette for an RDL palette name (any case); a missing or unknown name is "Default", the RDL default. */
+function chartPalette(name) {
+    return PALETTES_BY_NAME.get((name ?? "").trim().toLowerCase()) ?? PALETTES.Default;
+}
+/** The color of series `index`: its own color, else the palette entry. */
+function seriesColor(series, index, palette) {
+    return series.Color && series.Color.toLowerCase() !== "automatic" ? series.Color : palette[index % palette.length];
+}
+/** Steps of a value axis: about five, rounded to 1, 2, 5 or 10 times a power of ten. */
+const VALUE_AXIS_STEPS = 5;
+/** Drops the binary noise of step multiples (0.6000000000000001 -> 0.6). */
+function tidy$1(value) {
+    return Number(value.toPrecision(12));
+}
+/**
+ * bound / step, snapped to the nearest integer only when it is within a few ulps of it: 0.07 / 0.01 is
+ * 7.000000000000001 in binary floating point and would otherwise add an axis step. Genuine non-multiples
+ * (0.37 / 0.05) keep their fraction so the bounds still round outwards.
+ */
+function axisQuotient(bound, step) {
+    const quotient = bound / step;
+    const nearest = Math.round(quotient);
+    const reconstructed = nearest * step;
+    const tolerance = Number.EPSILON * 4 * Math.max(1, Math.abs(bound), Math.abs(reconstructed));
+    return Math.abs(reconstructed - bound) <= tolerance ? nearest : quotient;
+}
+/** The nice step for a value range (> 0): range / 5 rounded to 1, 2, 5 or 10 times its magnitude. */
+function niceAxisStep(range) {
+    const raw = range / VALUE_AXIS_STEPS;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(raw)));
+    const residual = raw / magnitude;
+    const nice = residual < 1.5 ? 1 : residual < 3.5 ? 2 : residual < 7.5 ? 5 : 10;
+    return tidy$1(nice * magnitude);
+}
+/**
+ * A value axis over the given values, the same rule as the server's PDF: the range always includes
+ * 0, nulls are ignored, the step is `niceAxisStep(range)` and the bounds are rounded out to whole
+ * steps (data max 113 gives 0..120 in steps of 20). All-null or all-zero data gives 0..1.
+ */
+function computeValueScale(values) {
+    let min = 0;
+    let max = 0;
+    for (const value of values) {
+        if (value === null || value === undefined || !Number.isFinite(value))
+            continue;
+        if (value < min)
+            min = value;
+        if (value > max)
+            max = value;
+    }
+    if (min === max)
+        max = min + 1;
+    const step = niceAxisStep(max - min);
+    const first = Math.floor(axisQuotient(min, step));
+    const last = Math.ceil(axisQuotient(max, step));
+    const ticks = [];
+    for (let index = first; index <= last; index++)
+        ticks.push(tidy$1(index * step));
+    return { min: tidy$1(first * step), max: tidy$1(last * step), ticks };
+}
+/**
+ * The server's category axis labels (`RdlRenderChart.CategoryAxisLabels`) along an axis that starts
+ * at `start` with `band` pixels per category: position 0 is the first category's point (the middle
+ * of its band), fractions fall between two categories. Labels outside the categories are dropped.
+ */
+function categoryAxisLabels(labels, categoryCount, start, band) {
+    return labels
+        .filter(label => Number.isFinite(label.Position) && label.Position >= -0.5 && label.Position <= categoryCount - 0.5)
+        .map(label => ({ at: start + band * (label.Position + 0.5), text: label.Text }));
+}
+/**
+ * Centers a label of `width` on `center`, moved inside [min, max] when it would cross an end: a
+ * category label never runs past the value axis (and its origin label) or the plot's right edge.
+ */
+function placeAxisLabel(center, width, min, max) {
+    if (center - width / 2 < min)
+        return { x: min, anchor: "start" };
+    if (center + width / 2 > max)
+        return { x: max, anchor: "end" };
+    return { x: center, anchor: "middle" };
+}
+/** Maps a value of the scale to a pixel coordinate between `from` (scale min) and `to` (scale max). */
+function scaleValue(value, scale, from, to) {
+    const span = scale.max - scale.min;
+    if (span === 0)
+        return from;
+    return from + ((value - scale.min) / span) * (to - from);
+}
+/** Splits a series into runs of consecutive non-null points: a null value leaves a gap in the line. */
+function lineSegments(values, x, y) {
+    const segments = [];
+    let current = [];
+    values.forEach((value, index) => {
+        if (value === null || value === undefined || !Number.isFinite(value)) {
+            if (current.length > 0)
+                segments.push(current);
+            current = [];
+            return;
+        }
+        current.push({ index, value, x: x(index), y: y(value) });
+    });
+    if (current.length > 0)
+        segments.push(current);
+    return segments;
+}
+/** SVG path of one segment: straight, stepped (horizontal then vertical) or smooth (Catmull-Rom as cubic Beziers). */
+function segmentPath(points, subtype) {
+    if (points.length === 0)
+        return "";
+    const kind = (subtype ?? "").toLowerCase();
+    let path = `M${points[0].x},${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1];
+        const point = points[i];
+        if (kind === "stepped") {
+            path += ` H${point.x} V${point.y}`;
+        }
+        else if (kind === "smooth") {
+            const before = points[i - 2] ?? prev;
+            const after = points[i + 1] ?? point;
+            const c1x = prev.x + (point.x - before.x) / 6;
+            const c1y = prev.y + (point.y - before.y) / 6;
+            const c2x = point.x - (after.x - prev.x) / 6;
+            const c2y = point.y - (after.y - prev.y) / 6;
+            path += ` C${c1x},${c1y} ${c2x},${c2y} ${point.x},${point.y}`;
+        }
+        else {
+            path += ` L${point.x},${point.y}`;
+        }
+    }
+    return path;
+}
+/** Pie slices of positive values (null, zero and negative values get no slice); angles in radians from 12 o'clock, clockwise. */
+function pieSlices(values) {
+    const total = values.reduce((acc, value) => acc + (value !== null && value > 0 ? value : 0), 0);
+    if (total <= 0)
+        return [];
+    const slices = [];
+    let angle = 0;
+    values.forEach((value, index) => {
+        if (value === null || value <= 0)
+            return;
+        const fraction = value / total;
+        const end = angle + fraction * Math.PI * 2;
+        slices.push({ index, value, fraction, startAngle: angle, endAngle: end });
+        angle = end;
+    });
+    return slices;
+}
+/** A point on a circle; angle in radians from 12 o'clock, clockwise. */
+function polar(cx, cy, radius, angle) {
+    return { x: cx + radius * Math.sin(angle), y: cy - radius * Math.cos(angle) };
+}
+/** SVG path of an arc band (or a pie wedge when innerRadius is 0) between two angles. */
+function arcPath(cx, cy, outerRadius, innerRadius, start, end) {
+    const sweep = end - start;
+    if (sweep >= Math.PI * 2 - 1e-9) {
+        const mid = start + Math.PI;
+        return arcPath(cx, cy, outerRadius, innerRadius, start, mid) + " " + arcPath(cx, cy, outerRadius, innerRadius, mid, end);
+    }
+    const large = sweep > Math.PI ? 1 : 0;
+    const o1 = polar(cx, cy, outerRadius, start);
+    const o2 = polar(cx, cy, outerRadius, end);
+    if (innerRadius <= 0) {
+        return `M${cx},${cy} L${o1.x},${o1.y} A${outerRadius},${outerRadius} 0 ${large} 1 ${o2.x},${o2.y} Z`;
+    }
+    const i2 = polar(cx, cy, innerRadius, end);
+    const i1 = polar(cx, cy, innerRadius, start);
+    return `M${o1.x},${o1.y} A${outerRadius},${outerRadius} 0 ${large} 1 ${o2.x},${o2.y} L${i2.x},${i2.y} A${innerRadius},${innerRadius} 0 ${large} 0 ${i1.x},${i1.y} Z`;
+}
+/** Clamps a gauge value into the scale; null stays at the minimum. */
+function clampGaugeValue(value, minimum, maximum) {
+    if (value === null || value === undefined || !Number.isFinite(value))
+        return minimum;
+    const low = Math.min(minimum, maximum);
+    const high = Math.max(minimum, maximum);
+    return Math.min(high, Math.max(low, value));
+}
+/** Formats an axis or data value compactly: integers without decimals, else up to 2 decimals. */
+function formatChartValue(value) {
+    if (Number.isInteger(value))
+        return value.toString();
+    return (Math.round(value * 100) / 100).toString();
+}
+/** More ticks than this on one scale is a broken interval, not a scale anyone can read. */
+const MAX_GAUGE_TICKS = 200;
+/**
+ * The ellipse a state indicator fills: its percent box of the panel, stretched to an oval in a box
+ * that is not square, like the old viewer. Null when the active state has no color or the box is empty.
+ */
+function stateIndicatorEllipse(indicator, panelWidth, panelHeight) {
+    if (!indicator.Color)
+        return null;
+    const width = (Math.max(0, indicator.Width) / 100) * panelWidth;
+    const height = (Math.max(0, indicator.Height) / 100) * panelHeight;
+    if (width <= 0 || height <= 0)
+        return null;
+    const left = (indicator.Left / 100) * panelWidth;
+    const top = (indicator.Top / 100) * panelHeight;
+    return { cx: left + width / 2, cy: top + height / 2, rx: width / 2, ry: height / 2 };
+}
+/** The value span a Bar pointer covers: from the scale minimum to the value clamped into the scale. */
+function gaugeBarSpan(value, minimum, maximum) {
+    return { from: minimum, to: clampGaugeValue(value, minimum, maximum) };
+}
+function tidy(value) {
+    return Number(value.toPrecision(12));
+}
+/**
+ * The major tick values of a gauge scale: every `interval` from the minimum up to the maximum (the
+ * server computes it); without a usable interval the chart axis' nice step of the range is used.
+ */
+function gaugeTicks(minimum, maximum, interval) {
+    const low = Math.min(minimum, maximum);
+    const high = Math.max(minimum, maximum);
+    if (!Number.isFinite(low) || !Number.isFinite(high))
+        return [];
+    if (high === low)
+        return [tidy(low)];
+    const step = interval !== null && interval !== undefined && Number.isFinite(interval) && interval > 0
+        ? interval
+        : niceAxisStep(high - low);
+    const count = Math.floor(tidy((high - low) / step));
+    if (count > MAX_GAUGE_TICKS)
+        return [tidy(low), tidy(high)];
+    const ticks = [];
+    for (let index = 0; index <= count; index++)
+        ticks.push(tidy(low + index * step));
+    return ticks;
+}
+/**
+ * A thickness given in percent of the gauge's own size (for a horizontal linear gauge its height, as
+ * the chart engine measures range and pointer widths), or the default fraction when it is missing.
+ */
+function gaugeThickness(percent, gaugeSize, defaultFraction) {
+    const fraction = percent !== null && percent !== undefined && Number.isFinite(percent) && percent > 0 ? percent / 100 : defaultFraction;
+    return gaugeSize * Math.min(1, fraction);
+}
+/** Cross (or none) is centred on the scale line, Inside lies above it, Outside below it. */
+function gaugeBandExtent(placement, thickness) {
+    switch ((placement ?? "").toLowerCase()) {
+        case "inside": return { up: thickness, down: 0 };
+        case "outside": return { up: 0, down: thickness };
+        default: return { up: thickness / 2, down: thickness / 2 };
+    }
+}
+/**
+ * The y of the scale line of a horizontal linear gauge `height` tall: the bands (ranges and pointers)
+ * and the tick labels below them (`labelSpace`) are centred as one block.
+ */
+function linearGaugeScaleY(height, bands, labelSpace) {
+    const up = Math.max(0, ...bands.map(band => band.up));
+    const down = Math.max(0, ...bands.map(band => band.down));
+    return Math.max(up, (height - (up + down + labelSpace)) / 2 + up);
+}
+/** The order an "Auto" marker takes per series, as the chart engine cycles it. */
+const AUTO_SHAPES = ["square", "circle", "diamond", "triangle", "cross", "star4", "star5", "star6", "star10"];
+const SHAPES = {
+    square: "square",
+    circle: "circle",
+    diamond: "diamond",
+    triangle: "triangle",
+    cross: "cross",
+    star4: "star4",
+    star5: "star5",
+    star6: "star6",
+    star10: "star10"
+};
+/** The marker size when the series sets none, as the server uses it. */
+const RDL_DEFAULT_MARKER_SIZE_PT = 5;
+/**
+ * The marker a series draws, or null for none. The server resolves Auto to a shape, so a missing type
+ * or None means no marker. Should an Auto (or an unknown name) still arrive, a scatter series cycles
+ * the shapes per series, so its points stay visible; a line series then draws none.
+ */
+function seriesMarker(markerType, scatter, seriesIndex) {
+    if (!markerType)
+        return null;
+    const name = markerType.trim().toLowerCase();
+    if (name === "none" || name === "")
+        return null;
+    const shape = SHAPES[name];
+    if (shape)
+        return shape;
+    return scatter ? AUTO_SHAPES[seriesIndex % AUTO_SHAPES.length] : null;
+}
+/** The marker size in pixels at a zoom (RDL size, default 5pt), at least 3 px so it stays visible. */
+function markerSizePx(markerSize, zoom) {
+    return Math.max(3, ptToPx(parseRdlSize(markerSize) ?? RDL_DEFAULT_MARKER_SIZE_PT, zoom));
+}
+function round(value) {
+    return Math.round(value * 100) / 100;
+}
+function polygon(points) {
+    return `M${points.map(([x, y]) => `${round(x)},${round(y)}`).join(" L")} Z`;
+}
+function star(cx, cy, outer, points) {
+    const inner = outer * (points <= 4 ? 0.35 : 0.45);
+    const corners = [];
+    for (let index = 0; index < points * 2; index++) {
+        const radius = index % 2 === 0 ? outer : inner;
+        const angle = -Math.PI / 2 + (index * Math.PI) / points;
+        corners.push([cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)]);
+    }
+    return polygon(corners);
+}
+/** SVG path of a marker of `size` (its width; an X has arms of that length along its diagonals) centered on (cx, cy); every shape is filled. */
+function markerPath(shape, cx, cy, size) {
+    const r = size / 2;
+    switch (shape) {
+        case "square":
+            return polygon([[cx - r, cy - r], [cx + r, cy - r], [cx + r, cy + r], [cx - r, cy + r]]);
+        case "circle":
+            return `M${round(cx - r)},${round(cy)} A${round(r)},${round(r)} 0 1 0 ${round(cx + r)},${round(cy)} A${round(r)},${round(r)} 0 1 0 ${round(cx - r)},${round(cy)} Z`;
+        case "diamond":
+            return polygon([[cx, cy - r], [cx + r, cy], [cx, cy + r], [cx - r, cy]]);
+        case "triangle":
+            return polygon([[cx, cy - r], [cx + r, cy + r], [cx - r, cy + r]]);
+        case "cross": {
+            // The chart engine's Cross is an X: a filled plus sign, its arms a third of the size thick, turned by 45 degrees.
+            const t = size / 6;
+            const plus = [
+                [-t, -r], [t, -r], [t, -t], [r, -t], [r, t], [t, t],
+                [t, r], [-t, r], [-t, t], [-r, t], [-r, -t], [-t, -t]
+            ];
+            const turn = Math.SQRT1_2;
+            return polygon(plus.map(([dx, dy]) => [cx + (dx - dy) * turn, cy + (dx + dy) * turn]));
+        }
+        case "star4": return star(cx, cy, r, 4);
+        case "star5": return star(cx, cy, r, 5);
+        case "star6": return star(cx, cy, r, 6);
+        case "star10": return star(cx, cy, r, 10);
+    }
+}
+const ALIGN = {
+    left: "start",
+    top: "start",
+    center: "center",
+    right: "end",
+    bottom: "end"
+};
+/** The RDL default legend position: a column on the right, vertically centered (RightCenter). */
+const DEFAULT_LEGEND = { edge: "right", align: "center" };
+/**
+ * The RDL ChartLegend Position as an edge and an alignment: the first word is the edge, the second
+ * the alignment along it (TopLeft = top edge, left aligned; LeftTop = left edge, top aligned).
+ * Missing or unknown = RightCenter, the RDL default.
+ */
+function legendPlacement(position) {
+    const match = /^(top|bottom|left|right)(left|right|top|bottom|center)$/i.exec((position ?? "").trim());
+    if (!match)
+        return DEFAULT_LEGEND;
+    const edge = match[1].toLowerCase();
+    const along = match[2].toLowerCase();
+    const horizontalEdge = edge === "top" || edge === "bottom";
+    // "TopTop" or "LeftLeft" make no sense: the alignment must run along the edge.
+    const valid = horizontalEdge ? ["left", "center", "right"].includes(along) : ["top", "center", "bottom"].includes(along);
+    return { edge, align: valid ? ALIGN[along] : "center" };
+}
+var styles$2 = {"chart":"cw-report-chart-module__chart__HEwvf","title":"cw-report-chart-module__title__zvCfx","axis":"cw-report-chart-module__axis__qwHaL","grid":"cw-report-chart-module__grid__xJMG8","tick":"cw-report-chart-module__tick__uQJeQ","muted":"cw-report-chart-module__muted__Nj1-j","hit":"cw-report-chart-module__hit__-u6vf","point":"cw-report-chart-module__point__M-GuI","slice":"cw-report-chart-module__slice__DEbOB","track":"cw-report-chart-module__track__NAVBX","needle":"cw-report-chart-module__needle__m5fJK","cap":"cw-report-chart-module__cap__zL7KT"};
+/** Chart text size in points (scaled with the zoom). */
+const CHART_FONT_PT = 8;
+/** Rough width of one character of the chart font, as a share of the font size. */
+const CHAR_WIDTH = 0.6;
+function chartFontPx(zoom) {
+    return ptToPx(CHART_FONT_PT, zoom);
+}
+function estimateTextWidth(text, fontPx) {
+    return text.length * fontPx * CHAR_WIDTH;
+}
+/** Hover handlers that show the shared CwTooltipManager tooltip over an SVG element. */
+function useChartTooltip() {
+    useEffect(() => {
+        ensureTooltipManager();
+    }, []);
+    const show = useCallback((content) => (event) => {
+        showTooltip(content, event.currentTarget, "top");
+    }, []);
+    const hide = useCallback(() => hideTooltip(), []);
+    return { show, hide };
+}
+function tooltipContent(title, label, value) {
+    return (jsxs("span", { children: [jsx("strong", { children: title }), jsx("br", {}), label, ": ", value] }));
+}
+/** Lays legend entries out in rows that wrap at `width`, each row aligned within `width` (centered by default). */
+function layoutLegend(entries, width, fontPx, align = "center") {
+    if (entries.length === 0)
+        return { height: 0, width: 0, items: [] };
+    const swatch = fontPx;
+    const gap = fontPx;
+    const lineHeight = fontPx * 1.6;
+    const rows = [[]];
+    let rowWidth = 0;
+    for (const entry of entries) {
+        const itemWidth = swatch + fontPx * 0.4 + estimateTextWidth(entry.label, fontPx);
+        if (rowWidth > 0 && rowWidth + gap + itemWidth > width) {
+            rows.push([]);
+            rowWidth = 0;
+        }
+        rowWidth += (rowWidth > 0 ? gap : 0) + itemWidth;
+        rows[rows.length - 1].push({ entry, width: itemWidth });
+    }
+    const items = [];
+    let widest = 0;
+    rows.forEach((row, rowIndex) => {
+        const total = row.reduce((acc, item) => acc + item.width, 0) + gap * (row.length - 1);
+        widest = Math.max(widest, total);
+        const free = Math.max(0, width - total);
+        let x = align === "start" ? 0 : align === "end" ? free : free / 2;
+        for (const item of row) {
+            items.push({ entry: item.entry, x, y: rowIndex * lineHeight + lineHeight / 2 });
+            x += item.width + gap;
+        }
+    });
+    return { height: rows.length * lineHeight, width: widest, items };
+}
+function ChartLegend({ layout, top, left = 0, fontPx }) {
+    return (jsx("g", { transform: `translate(${left}, ${top})`, children: layout.items.map((item, index) => (jsxs("g", { transform: `translate(${item.x}, ${item.y})`, children: [item.entry.marker
+                    ? jsx("path", { d: markerPath(item.entry.marker, fontPx / 2, 0, fontPx), fill: item.entry.color })
+                    : jsx("rect", { x: 0, y: -fontPx / 2, width: fontPx, height: fontPx, fill: item.entry.color }), jsx("text", { x: fontPx * 1.4, dominantBaseline: "central", fontSize: fontPx, children: item.entry.label })] }, index))) }));
+}
+/** The chart titles, one line each, centered. Returns the height they take. */
+function ChartTitles({ titles, width, fontPx }) {
+    return (jsx(Fragment, { children: titles.map((title, index) => (jsx("text", { className: styles$2.title, x: width / 2, y: fontPx * 1.5 * (index + 1), textAnchor: "middle", fontSize: fontPx * 1.25, children: title }, index))) }));
+}
+function titlesHeight(titles, fontPx) {
+    return titles.length === 0 ? 0 : fontPx * 1.5 * titles.length + fontPx * 0.5;
+}
+/** A centered message instead of the plot (dataset error or no rows). */
+function ChartMessage({ text, width, height, fontPx }) {
+    return (jsx("text", { className: styles$2.muted, x: width / 2, y: height / 2, textAnchor: "middle", dominantBaseline: "central", fontSize: fontPx * 1.2, children: text }));
+}
+/** 270 degree dial: from 7:30 to 4:30 on a clock face, in radians from 12 o'clock. */
+const DIAL_START = -Math.PI * 0.75;
+const DIAL_END = Math.PI * 0.75;
+/** Report content defaults, as the old viewer drew them: black pointers, the Default palette for ranges. */
+const POINTER_FALLBACK = "black";
+const RANGE_PALETTE = chartPalette(null);
+/** Thickness of a range / pointer without a Width, as a fraction of the gauge height (the chart engine defaults). */
+const RANGE_DEFAULT_WIDTH = 0.3;
+const POINTER_DEFAULT_WIDTH = 0.1;
+const EMPTY_SCALE = { Minimum: 0, Maximum: 100, Pointers: [], Ranges: [] };
+function isBarPointer(type) {
+    return (type ?? "").toLowerCase() === "bar";
+}
+function rangeColor(range, index) {
+    return range.Color || RANGE_PALETTE[index % RANGE_PALETTE.length];
+}
+function pointerColor(pointer) {
+    return pointer.Color || POINTER_FALLBACK;
+}
+function RadialGauge({ gauge, width, height, fontPx, zoom }) {
+    const scale = gauge.Scales[0] ?? EMPTY_SCALE;
+    const { Minimum: min, Maximum: max } = scale;
+    const radius = Math.max(0, Math.min(width / 2, height / 1.75) - fontPx * 0.5);
+    const cx = width / 2;
+    const cy = fontPx * 0.5 + radius;
+    const band = radius * 0.15;
+    const angle = (value) => scaleValue(clampGaugeValue(value, min, max), { min, max }, DIAL_START, DIAL_END);
+    const minLabel = polar(cx, cy, radius - band * 2.5, DIAL_START);
+    const maxLabel = polar(cx, cy, radius - band * 2.5, DIAL_END);
+    const showLabels = scale.ShowLabels !== false;
+    return (jsxs("g", { children: [jsx("path", { className: styles$2.track, d: arcPath(cx, cy, radius, radius - band, DIAL_START, DIAL_END) }), scale.Ranges.map((range, index) => (jsx("path", { d: arcPath(cx, cy, radius, radius - band, angle(range.Start ?? min), angle(range.End ?? max)), fill: rangeColor(range, index) }, `r${index}`))), scale.Pointers.map((pointer, index) => {
+                if (isBarPointer(pointer.Type)) {
+                    const span = gaugeBarSpan(pointer.Value, min, max);
+                    return (jsx("path", { d: arcPath(cx, cy, radius - band * 1.2, radius - band * 1.9, angle(span.from), angle(span.to)), fill: pointerColor(pointer) }, `p${index}`));
+                }
+                const tip = polar(cx, cy, radius * 0.8, angle(pointer.Value ?? min));
+                return (jsx("line", { className: styles$2.needle, x1: cx, y1: cy, x2: tip.x, y2: tip.y, style: pointer.Color ? { stroke: pointer.Color } : undefined, strokeWidth: Math.max(1.5, 2.5 * zoom) }, `p${index}`));
+            }), jsx("circle", { className: styles$2.cap, cx: cx, cy: cy, r: Math.max(2, radius * 0.06) }), showLabels && (jsxs(Fragment, { children: [jsx("text", { className: styles$2.tick, x: minLabel.x, y: minLabel.y, textAnchor: "middle", fontSize: fontPx, children: formatChartValue(min) }), jsx("text", { className: styles$2.tick, x: maxLabel.x, y: maxLabel.y, textAnchor: "middle", fontSize: fontPx, children: formatChartValue(max) })] }))] }));
+}
+/**
+ * A horizontal linear gauge as the chart engine draws it: range bands and pointers are as thick as
+ * their Width percent of the gauge height (ranges 30%, pointers 10% by default) around the scale line
+ * (Cross centred, Inside above, Outside below), the ranges in their own colour at full opacity, a Bar
+ * pointer on top of them from the minimum to the value, and the major ticks with labels below.
+ */
+function LinearGauge({ gauge, width, height, fontPx }) {
+    const scale = gauge.Scales[0] ?? EMPTY_SCALE;
+    const { Minimum: min, Maximum: max } = scale;
+    const showLabels = scale.ShowLabels !== false;
+    const left = fontPx;
+    const right = width - fontPx;
+    const labelSpace = showLabels ? fontPx * 2 : 0;
+    const x = (value) => scaleValue(clampGaugeValue(value, min, max), { min, max }, left, right);
+    const ticks = showLabels ? gaugeTicks(min, max, scale.Interval) : [];
+    const ranges = scale.Ranges.map(range => {
+        const thickness = gaugeThickness(range.Width, height, RANGE_DEFAULT_WIDTH);
+        return { range, thickness, extent: gaugeBandExtent(range.Placement, thickness) };
+    });
+    const pointers = scale.Pointers.map(pointer => {
+        const thickness = gaugeThickness(pointer.Width, height, POINTER_DEFAULT_WIDTH);
+        return { pointer, thickness, extent: gaugeBandExtent(pointer.Placement, thickness) };
+    });
+    const extents = [...ranges, ...pointers].map(band => band.extent);
+    const scaleY = linearGaugeScaleY(height, extents, labelSpace);
+    const bandsBottom = scaleY + Math.max(0, ...extents.map(extent => extent.down));
+    return (jsxs("g", { children: [ranges.map(({ range, thickness, extent }, index) => {
+                const from = x(range.Start ?? min);
+                const to = x(range.End ?? max);
+                return (jsx("rect", { x: Math.min(from, to), y: scaleY - extent.up, width: Math.abs(to - from), height: thickness, fill: rangeColor(range, index) }, `r${index}`));
+            }), jsx("line", { className: styles$2.axis, x1: left, x2: right, y1: scaleY, y2: scaleY }), pointers.map(({ pointer, thickness, extent }, index) => {
+                if (isBarPointer(pointer.Type)) {
+                    const span = gaugeBarSpan(pointer.Value, min, max);
+                    const from = x(span.from);
+                    const to = x(span.to);
+                    return (jsx("rect", { x: Math.min(from, to), y: scaleY - extent.up, width: Math.abs(to - from), height: thickness, fill: pointerColor(pointer) }, `p${index}`));
+                }
+                // A marker: a triangle pointing at the scale line from below.
+                const at = x(pointer.Value ?? min);
+                const size = Math.max(thickness, fontPx * 0.6);
+                return (jsx("path", { d: `M${at},${scaleY} l${-size / 2},${size} h${size} Z`, fill: pointerColor(pointer) }, `p${index}`));
+            }), ticks.map(tick => (jsxs("g", { children: [jsx("line", { className: styles$2.axis, x1: x(tick), x2: x(tick), y1: bandsBottom, y2: bandsBottom + fontPx * 0.4 }), jsx("text", { className: styles$2.tick, x: x(tick), y: bandsBottom + fontPx * 1.5, textAnchor: "middle", fontSize: fontPx, children: formatChartValue(tick) })] }, tick)))] }));
+}
+/**
+ * A gauge panel: its gauges side by side (RadialGauge = 270 degree dial with colored ranges and a
+ * needle or bar per pointer, LinearGauge = horizontal track with range bands, a bar or marker per
+ * pointer and the major ticks), the state indicators at their percent boxes and the panel labels
+ * below. The pointer value is not printed; only the report's own labels are. Only the first scale of
+ * a gauge is drawn.
+ */
+function CwReportGauge({ panel, width, height, zoom = 1 }) {
+    const fontPx = chartFontPx(zoom);
+    const lineHeight = fontPx * 1.5;
+    const labelsHeight = panel.Labels.length * lineHeight;
+    const gaugeHeight = Math.max(0, height - labelsHeight);
+    const cellWidth = panel.Gauges.length > 0 ? width / panel.Gauges.length : width;
+    return (jsxs("svg", { className: styles$2.chart, width: width, height: height, role: "img", "aria-label": panel.Name, children: [panel.Error ? (jsx(ChartMessage, { text: panel.Error, width: width, height: height, fontPx: fontPx })) : (jsxs(Fragment, { children: [panel.Gauges.map((gauge, index) => {
+                        const drawProps = { gauge, width: cellWidth, height: gaugeHeight, fontPx, zoom };
+                        return (jsx("g", { transform: `translate(${cellWidth * index}, 0)`, children: gauge.Kind.toLowerCase() === "lineargauge" ? jsx(LinearGauge, { ...drawProps }) : jsx(RadialGauge, { ...drawProps }) }, index));
+                    }), (panel.StateIndicators ?? []).map((indicator, index) => {
+                        const ellipse = stateIndicatorEllipse(indicator, width, height);
+                        return ellipse && jsx("ellipse", { ...ellipse, fill: indicator.Color ?? undefined }, `s${index}`);
+                    })] })), panel.Labels.map((label, index) => (jsx("text", { x: width / 2, y: gaugeHeight + lineHeight * (index + 0.7), textAnchor: "middle", fontSize: fontPx, children: label }, index)))] }));
+}
+/*
+ * The .NET numeric format strings a report puts on a chart's value axis (<Format>), applied with the
+ * report culture so the screen shows the same tick text as the server's PDF. Only the formats reports
+ * actually use are covered; anything else returns null and the caller keeps its own formatting.
+ */
+/** .NET's default decimals of the N, F and P standard formats without a precision. */
+const STANDARD_DEFAULT_DECIMALS = 2;
+const STANDARD_FORMAT = /^([NnFfPp])(\d{1,2})?$/;
+/** 0, 0.00, 0.0#, #,##0, #,0.00, 0%, 0.0% ... (integer part of 0, # and one optional grouping comma). */
+const CUSTOM_FORMAT = /^(#*,?#*0+)(?:\.(0*)(#*))?(%?)$/;
+/**
+ * Formats longer than this are not matched (the custom pattern backtracks quadratically on a long
+ * non-matching string), and more decimals than this are left to the caller: Intl.NumberFormat throws
+ * above 100 fraction digits (above 20 on older browsers), which would break the chart render.
+ */
+const MAX_FORMAT_LENGTH = 64;
+const MAX_FRACTION_DIGITS = 20;
+function parseFormat(format) {
+    if (format.length > MAX_FORMAT_LENGTH)
+        return null;
+    const standard = STANDARD_FORMAT.exec(format);
+    if (standard) {
+        const kind = standard[1].toUpperCase();
+        const digits = standard[2] === undefined ? STANDARD_DEFAULT_DECIMALS : parseInt(standard[2], 10);
+        return {
+            minimumFractionDigits: digits,
+            maximumFractionDigits: digits,
+            grouping: kind !== "F",
+            percent: kind === "P" ? "standard" : null
+        };
+    }
+    const custom = CUSTOM_FORMAT.exec(format);
+    if (custom) {
+        const required = custom[2]?.length ?? 0;
+        const optional = custom[3]?.length ?? 0;
+        return {
+            minimumFractionDigits: required,
+            maximumFractionDigits: required + optional,
+            grouping: custom[1].includes(","),
+            percent: custom[4] === "%" ? "custom" : null
+        };
+    }
+    return null;
+}
+function numberFormat(locale, options) {
+    try {
+        return new Intl.NumberFormat(locale || "en-US", options);
+    }
+    catch {
+        return new Intl.NumberFormat("en-US", options);
+    }
+}
+/**
+ * A value in a .NET numeric format ("N0", "F1", "P0", "0", "0.0", "#,##0.00", "0%", ...) and a culture
+ * ("de-CH"; missing or unknown = invariant-like en-US). Null for a missing or unsupported format.
+ * The standard "P" uses the culture's percent pattern (e.g. "12 %" in de-DE); a custom "%" appends the
+ * sign directly, as .NET does.
+ */
+function formatRdlNumber(value, format, culture) {
+    if (!format || !Number.isFinite(value))
+        return null;
+    const spec = parseFormat(format.trim());
+    if (!spec || spec.maximumFractionDigits > MAX_FRACTION_DIGITS)
+        return null;
+    const digits = {
+        minimumFractionDigits: spec.minimumFractionDigits,
+        maximumFractionDigits: spec.maximumFractionDigits,
+        useGrouping: spec.grouping
+    };
+    const locale = culture ?? undefined;
+    if (spec.percent === "standard")
+        return numberFormat(locale, { ...digits, style: "percent" }).format(value);
+    if (spec.percent === "custom") {
+        // The percent style scales by 100 without float noise (0.145 -> 14.5, not 14.499...); its own
+        // sign and spacing are dropped for the plain "%" a custom format appends.
+        const parts = numberFormat(locale, { ...digits, style: "percent" }).formatToParts(value);
+        return `${parts.filter(part => part.type !== "percentSign" && part.type !== "literal").map(part => part.value).join("")}%`;
+    }
+    return numberFormat(locale, digits).format(value);
+}
+function seriesKind(series) {
+    switch (series.Type.toLowerCase()) {
+        case "column": return "column";
+        case "bar": return "bar";
+        case "area": return "area";
+        case "scatter": return "scatter";
+        default: return "line";
+    }
+}
+function truncate(text, maxWidth, fontPx) {
+    if (estimateTextWidth(text, fontPx) <= maxWidth)
+        return text;
+    const chars = Math.max(1, Math.floor(maxWidth / (fontPx * 0.6)) - 1);
+    return text.slice(0, chars) + "…";
+}
+/** Categories along the x axis, values up: lines, areas, columns and scatter points. */
+function VerticalPlot({ chart, colors, scale, fontPx, left, top, right, bottom, strokeWidth, zoom, tickLabel }) {
+    const tooltip = useChartTooltip();
+    const count = Math.max(1, chart.Categories.length);
+    const band = (right - left) / count;
+    const x = (index) => left + band * (index + 0.5);
+    const y = (value) => scaleValue(value, scale, bottom, top);
+    const baseline = y(Math.min(scale.max, Math.max(scale.min, 0)));
+    const columns = chart.Series.map((series, index) => ({ series, index })).filter(({ series }) => {
+        const kind = seriesKind(series);
+        return kind === "column" || kind === "bar";
+    });
+    const groupWidth = band * 0.75;
+    const columnWidth = columns.length > 0 ? groupWidth / columns.length : 0;
+    const labelWidth = Math.max(...chart.Categories.map(label => estimateTextWidth(label, fontPx)), 0) + fontPx;
+    const labelStep = Math.max(1, Math.ceil(Math.min(labelWidth, fontPx * 12) / band));
+    const marks = [];
+    const hits = [];
+    columns.forEach(({ series, index }, columnIndex) => {
+        series.Values.forEach((value, category) => {
+            if (value === null || !Number.isFinite(value))
+                return;
+            const columnX = left + band * category + (band - groupWidth) / 2 + columnWidth * columnIndex;
+            const valueY = y(value);
+            const content = tooltipContent(series.Name, chart.Categories[category] ?? "", formatChartValue(value));
+            marks.push(jsx("rect", { x: columnX, y: Math.min(valueY, baseline), width: Math.max(1, columnWidth - 1), height: Math.max(0, Math.abs(baseline - valueY)), fill: colors[index], onMouseEnter: tooltip.show(content), onMouseLeave: tooltip.hide }, `c${index}-${category}`));
+            if (series.ShowDataLabels) {
+                marks.push(jsx("text", { x: columnX + columnWidth / 2, y: valueY - fontPx * 0.4, textAnchor: "middle", fontSize: fontPx, children: formatChartValue(value) }, `cl${index}-${category}`));
+            }
+        });
+    });
+    chart.Series.forEach((series, index) => {
+        const kind = seriesKind(series);
+        if (kind !== "line" && kind !== "area" && kind !== "scatter")
+            return;
+        const marker = seriesMarker(series.MarkerType, kind === "scatter", index);
+        const markerSize = markerSizePx(series.MarkerSize, zoom);
+        const segments = lineSegments(series.Values, x, y);
+        segments.forEach((segment, segmentIndex) => {
+            if (kind !== "scatter")
+                drawLine(segment, segmentIndex);
+            for (const point of segment) {
+                if (marker) {
+                    marks.push(jsx("path", { d: markerPath(marker, point.x, point.y, markerSize), fill: colors[index] }, `m${index}-${point.index}`));
+                }
+                if (series.ShowDataLabels) {
+                    marks.push(jsx("text", { x: point.x, y: point.y - Math.max(fontPx * 0.6, markerSize), textAnchor: "middle", fontSize: fontPx, children: formatChartValue(point.value) }, `ll${index}-${point.index}`));
+                }
+                const content = tooltipContent(series.Name, chart.Categories[point.index] ?? "", formatChartValue(point.value));
+                hits.push(jsx("circle", { className: styles$2.hit, cx: point.x, cy: point.y, r: Math.max(4, Math.min(8, band / 3), markerSize / 2), onMouseEnter: tooltip.show(content), onMouseLeave: tooltip.hide }, `h${index}-${point.index}`));
+            }
+        });
+        function drawLine(segment, segmentIndex) {
+            const path = segmentPath(segment, series.Subtype);
+            if (kind === "area") {
+                const first = segment[0];
+                const last = segment[segment.length - 1];
+                marks.push(jsx("path", { d: `${path} L${last.x},${baseline} L${first.x},${baseline} Z`, fill: colors[index], fillOpacity: 0.45, stroke: "none" }, `a${index}-${segmentIndex}`));
+            }
+            marks.push(jsx("path", { d: path, fill: "none", stroke: colors[index], strokeWidth: strokeWidth }, `l${index}-${segmentIndex}`));
+            // A lone point between gaps has no line to show it: a dot, unless the series draws markers.
+            if (segment.length === 1 && !marker) {
+                marks.push(jsx("circle", { className: styles$2.point, cx: segment[0].x, cy: segment[0].y, r: strokeWidth * 1.5, fill: colors[index] }, `p${index}-${segmentIndex}`));
+            }
+        }
+    });
+    const serverLabels = chart.CategoryAxisLabels ? categoryAxisLabels(chart.CategoryAxisLabels, count, left, band) : null;
+    // Category gridlines run through the labelled categories: the server's labels, else every labelStep-th category.
+    const categoryGrid = chart.CategoryAxisGridLines === false
+        ? []
+        : serverLabels?.map(label => label.at) ?? chart.Categories.map((_label, index) => index).filter(index => index % labelStep === 0).map(x);
+    return (jsxs(Fragment, { children: [categoryGrid.map((at, index) => jsx("line", { className: styles$2.grid, x1: at, x2: at, y1: top, y2: bottom }, `cg${index}`)), scale.ticks.map(tick => (jsxs("g", { children: [chart.ValueAxisGridLines !== false && jsx("line", { className: styles$2.grid, x1: left, x2: right, y1: y(tick), y2: y(tick) }), jsx("text", { className: styles$2.tick, x: left - fontPx * 0.4, y: y(tick), textAnchor: "end", dominantBaseline: "central", fontSize: fontPx, children: tickLabel(tick) })] }, tick))), jsx("line", { className: styles$2.axis, x1: left, x2: left, y1: top, y2: bottom }), jsx("line", { className: styles$2.axis, x1: left, x2: right, y1: baseline, y2: baseline }), serverLabels
+                ? serverLabels.map((label, index) => {
+                    const placement = placeAxisLabel(label.at, estimateTextWidth(label.text, fontPx), left, right);
+                    return (jsxs("g", { children: [jsx("line", { className: styles$2.axis, x1: label.at, x2: label.at, y1: bottom, y2: bottom + fontPx * 0.3 }), jsx("text", { className: styles$2.tick, x: placement.x, y: bottom + fontPx * 1.3, textAnchor: placement.anchor, fontSize: fontPx, children: label.text })] }, `c${index}`));
+                })
+                : chart.Categories.map((label, index) => {
+                    if (index % labelStep !== 0)
+                        return null;
+                    const text = truncate(label, band * labelStep - fontPx * 0.4, fontPx);
+                    const placement = placeAxisLabel(x(index), estimateTextWidth(text, fontPx), left, right);
+                    return (jsx("text", { className: styles$2.tick, x: placement.x, y: bottom + fontPx * 1.1, textAnchor: placement.anchor, fontSize: fontPx, children: text }, index));
+                }), marks, hits] }));
+}
+/** Categories down the y axis, values to the right: horizontal bars. */
+function HorizontalPlot({ chart, colors, scale, fontPx, left, top, right, bottom, tickLabel }) {
+    const tooltip = useChartTooltip();
+    const count = Math.max(1, chart.Categories.length);
+    const band = (bottom - top) / count;
+    const x = (value) => scaleValue(value, scale, left, right);
+    const baseline = x(Math.min(scale.max, Math.max(scale.min, 0)));
+    const groupHeight = band * 0.75;
+    const barHeight = chart.Series.length > 0 ? groupHeight / chart.Series.length : 0;
+    const serverLabels = chart.CategoryAxisLabels ? categoryAxisLabels(chart.CategoryAxisLabels, count, top, band) : null;
+    const categoryGrid = chart.CategoryAxisGridLines === false
+        ? []
+        : serverLabels?.map(label => label.at) ?? chart.Categories.map((_label, index) => top + band * (index + 0.5));
+    return (jsxs(Fragment, { children: [categoryGrid.map((at, index) => jsx("line", { className: styles$2.grid, x1: left, x2: right, y1: at, y2: at }, `cg${index}`)), scale.ticks.map(tick => (jsxs("g", { children: [chart.ValueAxisGridLines !== false && jsx("line", { className: styles$2.grid, x1: x(tick), x2: x(tick), y1: top, y2: bottom }), jsx("text", { className: styles$2.tick, x: x(tick), y: bottom + fontPx * 1.1, textAnchor: "middle", fontSize: fontPx, children: tickLabel(tick) })] }, tick))), jsx("line", { className: styles$2.axis, x1: baseline, x2: baseline, y1: top, y2: bottom }), jsx("line", { className: styles$2.axis, x1: left, x2: right, y1: bottom, y2: bottom }), serverLabels
+                ? serverLabels.map((label, index) => (jsxs("g", { children: [jsx("line", { className: styles$2.axis, x1: left - fontPx * 0.3, x2: left, y1: label.at, y2: label.at }), jsx("text", { className: styles$2.tick, x: left - fontPx * 0.4, y: label.at, textAnchor: "end", dominantBaseline: "central", fontSize: fontPx, children: truncate(label.text, left - fontPx, fontPx) })] }, `c${index}`)))
+                : chart.Categories.map((label, index) => (jsx("text", { className: styles$2.tick, x: left - fontPx * 0.4, y: top + band * (index + 0.5), textAnchor: "end", dominantBaseline: "central", fontSize: fontPx, children: truncate(label, left - fontPx, fontPx) }, index))), chart.Series.map((series, index) => series.Values.map((value, category) => {
+                if (value === null || !Number.isFinite(value))
+                    return null;
+                const barY = top + band * category + (band - groupHeight) / 2 + barHeight * index;
+                const valueX = x(value);
+                const content = tooltipContent(series.Name, chart.Categories[category] ?? "", formatChartValue(value));
+                return (jsxs("g", { children: [jsx("rect", { x: Math.min(valueX, baseline), y: barY, width: Math.max(0, Math.abs(valueX - baseline)), height: Math.max(1, barHeight - 1), fill: colors[index], onMouseEnter: tooltip.show(content), onMouseLeave: tooltip.hide }), series.ShowDataLabels && (jsx("text", { x: Math.max(valueX, baseline) + fontPx * 0.3, y: barY + barHeight / 2, dominantBaseline: "central", fontSize: fontPx, children: formatChartValue(value) }))] }, `${index}-${category}`));
+            }))] }));
+}
+/**
+ * A report chart over categories: Line (Smooth / Stepped), Area, Column and Scatter series share one
+ * value axis; a chart made only of Bar series is drawn horizontally. Scatter series draw only their
+ * markers, line series draw markers too when the report sets a marker type. Null values leave gaps.
+ * The legend sits where the RDL legend Position says. Own SVG, no chart library; hover shows
+ * category, series and value.
+ */
+function CwReportLineChart({ chart, width, height, zoom = 1, culture }) {
+    const fontPx = chartFontPx(zoom);
+    const palette = chartPalette(chart.Palette);
+    const colors = chart.Series.map((series, index) => seriesColor(series, index, palette));
+    const titleHeight = titlesHeight(chart.Titles, fontPx);
+    // The legend on the side its RDL Position names: a side legend is a column at most 30% wide.
+    const placement = legendPlacement(chart.LegendPosition);
+    const sideLegend = placement.edge === "left" || placement.edge === "right";
+    const legend = layoutLegend(chart.LegendHidden ? [] : chart.Series.map((series, index) => ({
+        label: series.Name,
+        color: colors[index],
+        marker: seriesMarker(series.MarkerType, seriesKind(series) === "scatter", index)
+    })), sideLegend ? width * 0.3 : width, fontPx, sideLegend ? "start" : placement.align);
+    const legendHeight = legend.height > 0 ? legend.height + fontPx * 0.5 : 0;
+    const legendWidth = legend.width > 0 ? legend.width + fontPx : 0;
+    const legendSpace = {
+        top: placement.edge === "top" ? legendHeight : 0,
+        bottom: placement.edge === "bottom" ? legendHeight : 0,
+        left: placement.edge === "left" ? legendWidth : 0,
+        right: placement.edge === "right" ? legendWidth : 0
+    };
+    const message = chart.Error
+        ?? (chart.Categories.length === 0 || chart.Series.length === 0 ? (chart.NoRowsMessage ?? "No data") : null);
+    if (message) {
+        return (jsxs("svg", { className: styles$2.chart, width: width, height: height, role: "img", "aria-label": chart.Titles.join(" ") || chart.Name, children: [jsx(ChartTitles, { titles: chart.Titles, width: width, fontPx: fontPx }), jsx(ChartMessage, { text: message, width: width, height: height, fontPx: fontPx })] }));
+    }
+    const horizontal = chart.Series.every(series => seriesKind(series) === "bar");
+    const scale = computeValueScale(chart.Series.flatMap(series => series.Values));
+    // The axis <Format> with the report culture, as the server's PDF prints it; an unsupported format keeps the compact default.
+    const tickLabel = (tick) => formatRdlNumber(tick, chart.ValueAxisFormat, culture) ?? formatChartValue(tick);
+    const tickWidth = Math.max(...scale.ticks.map(tick => estimateTextWidth(tickLabel(tick), fontPx)));
+    const categoryWidth = Math.min(width * 0.35, Math.max(...chart.Categories.map(label => estimateTextWidth(label, fontPx)), 0));
+    const lineHeight = fontPx * 1.6;
+    const valueTitleSpace = chart.ValueAxisTitle ? lineHeight : 0;
+    const categoryTitleSpace = chart.CategoryAxisTitle ? lineHeight : 0;
+    const left = legendSpace.left + (horizontal ? categoryTitleSpace + categoryWidth : valueTitleSpace + tickWidth) + fontPx * 0.8;
+    const right = width - fontPx - legendSpace.right;
+    const top = titleHeight + legendSpace.top + fontPx * 0.8;
+    const bottom = height - legendSpace.bottom - lineHeight - (horizontal ? valueTitleSpace : categoryTitleSpace);
+    const strokeWidth = Math.max(1, 1.5 * zoom);
+    const plotProps = { chart, colors, scale, fontPx, left, top, right, bottom, strokeWidth, zoom, tickLabel };
+    const verticalTitle = horizontal ? chart.CategoryAxisTitle : chart.ValueAxisTitle;
+    const horizontalTitle = horizontal ? chart.ValueAxisTitle : chart.CategoryAxisTitle;
+    const titleX = legendSpace.left + fontPx;
+    const legendLeft = placement.edge === "left" ? fontPx * 0.4 : placement.edge === "right" ? width - legendWidth + fontPx * 0.4 : 0;
+    const legendTop = (() => {
+        switch (placement.edge) {
+            case "top": return titleHeight;
+            case "bottom": return height - legend.height;
+            default:
+                if (placement.align === "start")
+                    return top;
+                if (placement.align === "end")
+                    return Math.max(top, bottom - legend.height);
+                return Math.max(top, (top + bottom - legend.height) / 2);
+        }
+    })();
+    return (jsxs("svg", { className: styles$2.chart, width: width, height: height, role: "img", "aria-label": chart.Titles.join(" ") || chart.Name, children: [jsx(ChartTitles, { titles: chart.Titles, width: width, fontPx: fontPx }), right - left > 10 && bottom - top > 10 && (horizontal ? jsx(HorizontalPlot, { ...plotProps }) : jsx(VerticalPlot, { ...plotProps })), verticalTitle && (jsx("text", { x: titleX, y: (top + bottom) / 2, textAnchor: "middle", dominantBaseline: "central", fontSize: fontPx, transform: `rotate(-90 ${titleX} ${(top + bottom) / 2})`, children: verticalTitle })), horizontalTitle && (jsx("text", { x: (left + right) / 2, y: bottom + lineHeight * 1.6, textAnchor: "middle", fontSize: fontPx, children: horizontalTitle })), jsx(ChartLegend, { layout: legend, top: legendTop, left: legendLeft, fontPx: fontPx })] }));
+}
+/** A pie of the chart's first series over its categories (RDL series Type "Shape"). Own SVG. */
+function CwReportPieChart({ chart, width, height, zoom = 1 }) {
+    const tooltip = useChartTooltip();
+    const fontPx = chartFontPx(zoom);
+    const palette = chartPalette(chart.Palette);
+    const series = chart.Series[0];
+    const colorOf = (index) => palette[index % palette.length];
+    const titleHeight = titlesHeight(chart.Titles, fontPx);
+    const legend = layoutLegend(chart.LegendHidden ? [] : chart.Categories.map((label, index) => ({ label, color: colorOf(index) })), width, fontPx);
+    const legendHeight = legend.height > 0 ? legend.height + fontPx * 0.5 : 0;
+    const slices = series ? pieSlices(series.Values) : [];
+    const message = chart.Error ?? (slices.length === 0 ? (chart.NoRowsMessage ?? "No data") : null);
+    const plotTop = titleHeight + fontPx * 0.5;
+    const plotHeight = height - plotTop - legendHeight;
+    const radius = Math.max(0, Math.min(width, plotHeight) / 2 - fontPx * 0.5);
+    const cx = width / 2;
+    const cy = plotTop + plotHeight / 2;
+    return (jsxs("svg", { className: styles$2.chart, width: width, height: height, role: "img", "aria-label": chart.Titles.join(" ") || chart.Name, children: [jsx(ChartTitles, { titles: chart.Titles, width: width, fontPx: fontPx }), message ? (jsx(ChartMessage, { text: message, width: width, height: height, fontPx: fontPx })) : (slices.map(slice => {
+                const category = chart.Categories[slice.index] ?? "";
+                const percent = `${formatChartValue(slice.fraction * 100)}%`;
+                const labelAt = polar(cx, cy, radius * 0.65, (slice.startAngle + slice.endAngle) / 2);
+                return (jsxs("g", { children: [jsx("path", { className: styles$2.slice, d: arcPath(cx, cy, radius, 0, slice.startAngle, slice.endAngle), fill: colorOf(slice.index), onMouseEnter: tooltip.show(tooltipContent(series.Name, category, `${formatChartValue(slice.value)} (${percent})`)), onMouseLeave: tooltip.hide }), series.ShowDataLabels && slice.fraction >= 0.03 && (jsx("text", { x: labelAt.x, y: labelAt.y, textAnchor: "middle", dominantBaseline: "central", fontSize: fontPx, pointerEvents: "none", children: formatChartValue(slice.value) }))] }, slice.index));
+            })), jsx(ChartLegend, { layout: legend, top: height - legend.height, fontPx: fontPx })] }));
+}
+/** Indent of one list level, in points. */
+const RDL_LIST_INDENT_PT = 18;
+const BULLETS = ["•", "◦", "▪"];
+function listKind(paragraph) {
+    switch ((paragraph.ListStyle ?? "").toLowerCase()) {
+        case "bulleted": return "bulleted";
+        case "numbered": return "numbered";
+        default: return null;
+    }
+}
+/**
+ * The list marker of every paragraph (null = no list). Numbering counts consecutive numbered
+ * paragraphs of the same level: a non-list paragraph resets every level, a paragraph at a level
+ * resets the levels below it, and a bulleted paragraph resets the numbering of its own level.
+ */
+function computeListMarkers(paragraphs) {
+    const counters = [];
+    return paragraphs.map(paragraph => {
+        const kind = listKind(paragraph);
+        if (!kind) {
+            counters.length = 0;
+            return null;
+        }
+        const level = Math.max(1, paragraph.ListLevel);
+        counters.length = Math.min(counters.length, level);
+        if (kind === "bulleted") {
+            counters[level - 1] = 0;
+            return BULLETS[(level - 1) % BULLETS.length];
+        }
+        counters[level - 1] = (counters[level - 1] ?? 0) + 1;
+        return `${counters[level - 1]}.`;
+    });
+}
+/** Left indent of a paragraph in points: one list indent per level (a list paragraph has at least level 1). */
+function paragraphIndentPt(paragraph) {
+    const level = listKind(paragraph) ? Math.max(1, paragraph.ListLevel) : Math.max(0, paragraph.ListLevel);
+    return level * RDL_LIST_INDENT_PT;
+}
+const EMPTY_FLIPPED = new Set();
+const EMPTY_HIGHLIGHTS = new Map();
+const ReportRenderContext = createContext({
+    zoom: 1,
+    flipped: EMPTY_FLIPPED,
+    highlights: EMPTY_HIGHLIGHTS,
+    activeMatchIndex: -1
+});
+function useReportRender() {
+    return useContext(ReportRenderContext);
+}
+/** Groups the page's matches by run key. */
+function highlightsByRun(matches) {
+    const map = new Map();
+    matches.forEach((match, matchIndex) => {
+        const list = map.get(match.key) ?? [];
+        list.push({ start: match.start, length: match.length, matchIndex });
+        map.set(match.key, list);
+    });
+    return map;
+}
+var styles$1 = {"sheet":"cw-report-page-module__sheet__MAL8a","section":"cw-report-page-module__section__rN7A3","item":"cw-report-page-module__item__VZFw8","table":"cw-report-page-module__table__SAZVC","textbox":"cw-report-page-module__textbox__iwVwk cw-report-page-module__item__VZFw8","textRow":"cw-report-page-module__textRow__3WIRX","textBody":"cw-report-page-module__textBody__Jp1-1","paragraph":"cw-report-page-module__paragraph__d6dYI","marker":"cw-report-page-module__marker__geRQt","link":"cw-report-page-module__link__YFX1h","match":"cw-report-page-module__match__sWdSD","inlineButton":"cw-report-page-module__inlineButton__m05OC","rectangle":"cw-report-page-module__rectangle__2PYyK cw-report-page-module__item__VZFw8","line":"cw-report-page-module__line__Vfus-","image":"cw-report-page-module__image__VEp5H cw-report-page-module__item__VZFw8","tableMessage":"cw-report-page-module__tableMessage__kWsAj","chart":"cw-report-page-module__chart__PP9oM cw-report-page-module__item__VZFw8","placeholder":"cw-report-page-module__placeholder__FK8kO cw-report-page-module__item__VZFw8"};
+/** Size of the drilldown / sort icons, in points: a little below the default 10pt text. */
+const INLINE_ICON_PT = 9;
+const SAFE_LINK = /^(https?:|mailto:)/i;
+function highlightedText(text, highlights, activeMatchIndex) {
+    if (!highlights || highlights.length === 0)
+        return text;
+    const parts = [];
+    let cursor = 0;
+    for (const highlight of highlights) {
+        if (highlight.start > cursor)
+            parts.push(text.slice(cursor, highlight.start));
+        const active = highlight.matchIndex === activeMatchIndex;
+        parts.push(jsx("mark", { className: styles$1.match, "data-active": active ? "true" : undefined, "data-active-match": active ? "true" : undefined, children: text.slice(highlight.start, highlight.start + highlight.length) }, highlight.matchIndex));
+        cursor = highlight.start + highlight.length;
+    }
+    if (cursor < text.length)
+        parts.push(text.slice(cursor));
+    return parts;
+}
+function ReportRun({ run, runKey, paragraphStyle, textboxStyle }) {
+    const { zoom, highlights, activeMatchIndex } = useReportRender();
+    const css = rdlTextCss(resolveRdlTextStyle(run.Style, paragraphStyle, textboxStyle), zoom);
+    const content = highlightedText(run.Text, highlights.get(runKey), activeMatchIndex);
+    if (run.Href && SAFE_LINK.test(run.Href)) {
+        return (jsx("a", { className: styles$1.link, href: run.Href, target: "_blank", rel: "noopener noreferrer", style: css, children: content }));
+    }
+    return jsx("span", { style: css, children: content });
+}
+function iconSizeStyle(zoom) {
+    return { "--btn-size": `${ptToPx(INLINE_ICON_PT, zoom)}px` };
+}
+function sortIcon(direction) {
+    switch ((direction ?? "").toLowerCase()) {
+        case "ascending": return "sort-asc";
+        case "descending": return "sort-desc";
+        default: return "sortable";
+    }
+}
+/** A textbox: paragraphs as blocks, runs as inline spans, plain text only (never HTML). */
+function ReportTextbox({ textbox, itemKey, frameStyle }) {
+    const { zoom, flipped, onToggle, onSort } = useReportRender();
+    const markers = computeListMarkers(textbox.Paragraphs);
+    const paragraphs = textbox.Paragraphs.map((paragraph, p) => {
+        const indent = ptToPx(paragraphIndentPt(paragraph), zoom);
+        const marker = markers[p];
+        const firstRun = paragraph.Runs[0];
+        const paragraphCss = {
+            ...rdlTextCss(resolveParagraphTextStyle(paragraph.Runs.map(run => run.Style), paragraph.Style, textbox.Style), zoom),
+            textAlign: rdlTextAlign(paragraph.Style?.TextAlign ?? textbox.Style?.TextAlign),
+            paddingLeft: indent || undefined
+        };
+        return (jsxs("p", { className: styles$1.paragraph, style: paragraphCss, children: [marker !== null && (jsx("span", { className: styles$1.marker, style: {
+                        ...rdlTextCss(resolveRdlTextStyle(firstRun?.Style, paragraph.Style, textbox.Style), zoom),
+                        left: indent - ptToPx(RDL_LIST_INDENT_PT, zoom),
+                        width: ptToPx(RDL_LIST_INDENT_PT, zoom)
+                    }, children: marker })), paragraph.Runs.map((run, r) => (jsx(ReportRun, { run: run, runKey: rdlRunKey(itemKey, p, r), paragraphStyle: paragraph.Style, textboxStyle: textbox.Style }, r)))] }, p));
+    });
+    const boxCss = {
+        ...frameStyle,
+        ...rdlBoxStyle(textbox.Style, zoom),
+        color: rdlColor(textbox.Style?.Color),
+        justifyContent: rdlVerticalAlign(textbox.Style?.VerticalAlign)
+    };
+    const toggleId = textbox.ToggleId;
+    const sortId = textbox.SortId;
+    if (!toggleId && !sortId) {
+        return jsx("div", { className: styles$1.textbox, style: boxCss, children: paragraphs });
+    }
+    const expanded = isToggleExpanded(textbox, flipped);
+    return (jsx("div", { className: styles$1.textbox, style: boxCss, children: jsxs("div", { className: styles$1.textRow, children: [toggleId && (jsx(CwButton, { variant: "icon", size: "small", icon: expanded ? "minus" : "plus", className: styles$1.inlineButton, style: iconSizeStyle(zoom), "aria-label": expanded ? "Collapse" : "Expand", "aria-expanded": expanded, "data-toggle-id": toggleId, onClick: () => onToggle?.(toggleId) })), jsx("div", { className: styles$1.textBody, children: paragraphs }), sortId && (jsx(CwButton, { variant: "icon", size: "small", icon: sortIcon(textbox.SortDirection), className: styles$1.inlineButton, style: iconSizeStyle(zoom), "aria-label": "Sort", onClick: () => onSort?.(sortId) }))] }) }));
+}
+function frameOf(item) {
+    return { top: item.Top, left: item.Left, width: item.Width, height: item.Height };
+}
+function frameCss(frame, zoom) {
+    return {
+        top: ptToPx(frame.top, zoom),
+        left: ptToPx(frame.left, zoom),
+        width: ptToPx(frame.width, zoom),
+        height: ptToPx(frame.height, zoom)
+    };
+}
+const SAFE_IMAGE_URL = /^https?:/i;
+function ReportRectangle({ item, itemKey, frame }) {
+    const { zoom } = useReportRender();
+    return (jsx("div", { className: styles$1.rectangle, style: { ...frameCss(frame, zoom), ...rdlBoxStyle(item.Style, zoom) }, children: jsx(ReportItems, { items: item.Items, parentKey: itemKey }) }));
+}
+function ReportLine({ item, frame }) {
+    const { zoom } = useReportRender();
+    const stroke = rdlLineStroke(item.Style, zoom);
+    const x1 = ptToPx(frame.left, zoom);
+    const y1 = ptToPx(frame.top, zoom);
+    const x2 = ptToPx(frame.left + frame.width, zoom);
+    const y2 = ptToPx(frame.top + frame.height, zoom);
+    const pad = stroke.width;
+    const left = Math.min(x1, x2) - pad;
+    const top = Math.min(y1, y2) - pad;
+    const width = Math.abs(x2 - x1) + pad * 2;
+    const height = Math.abs(y2 - y1) + pad * 2;
+    return (jsx("svg", { className: styles$1.line, style: { left, top, width, height }, width: width, height: height, "aria-hidden": "true", children: jsx("line", { x1: x1 - left, y1: y1 - top, x2: x2 - left, y2: y2 - top, stroke: stroke.color, strokeWidth: stroke.width, strokeDasharray: stroke.dash }) }));
+}
+function imageSizing(sizing) {
+    switch (sizing.toLowerCase()) {
+        case "fit": return "fit";
+        case "fitproportional": return "proportional";
+        default: return "natural";
+    }
+}
+function ReportImage({ item, frame }) {
+    const { zoom, getImageUrl } = useReportRender();
+    const src = item.Url && SAFE_IMAGE_URL.test(item.Url)
+        ? item.Url
+        : item.ImageId && getImageUrl ? getImageUrl(item.ImageId) : null;
+    const sizing = imageSizing(item.Sizing);
+    return (jsx("div", { className: styles$1.image, style: { ...frameCss(frame, zoom), ...rdlBoxStyle(item.Style, zoom) }, children: src && (jsx("img", { src: src, alt: item.Name, referrerPolicy: "no-referrer", "data-sizing": sizing, style: sizing === "natural" ? { transform: `scale(${zoom})` } : undefined })) }));
+}
+function ReportTable({ item, itemKey, frame }) {
+    const { zoom, flipped } = useReportRender();
+    const message = item.Error ?? (item.Rows.length === 0 ? item.NoRowsMessage : null);
+    if (message) {
+        const textCss = rdlTextCss(resolveRdlTextStyle(null, null, item.Style), zoom);
+        return (jsx("div", { className: styles$1.table, style: { ...frameCss(frame, zoom), height: undefined, ...rdlBoxStyle(item.Style, zoom) }, children: item.Error
+                ? jsx(CwNote, { color: "danger", variant: "soft", fontSize: "small", content: item.Error })
+                : jsx("p", { className: `${styles$1.tableMessage} cw-margin-none`, style: textCss, children: message }) }));
+    }
+    const layout = layoutRdlTable(item, flipped);
+    return (jsx("div", { className: styles$1.table, style: { ...frameCss({ ...frame, width: layout.width, height: layout.height }, zoom), ...rdlBoxStyle(item.Style, zoom) }, children: layout.cells.map(box => {
+            const content = box.cell.Content;
+            if (!content)
+                return null;
+            const cellFrame = { top: box.top, left: box.left, width: box.width, height: box.height };
+            const key = `${box.rowIndex}-${box.cellIndex}`;
+            if (box.hidden) {
+                // Drawn empty: the cell keeps its borders and background so the grid stays closed.
+                return jsx("div", { className: styles$1.item, style: { ...frameCss(cellFrame, zoom), ...rdlBoxStyle(content.Style, zoom) } }, key);
+            }
+            return jsx(ReportItem, { item: content, itemKey: rdlCellKey(itemKey, box.rowIndex, box.cellIndex), frame: cellFrame }, key);
+        }) }));
+}
+function ReportChart({ item, frame }) {
+    const { zoom, culture } = useReportRender();
+    const width = ptToPx(frame.width, zoom);
+    const height = ptToPx(frame.height, zoom);
+    const pie = item.Series[0]?.Type.toLowerCase() === "shape";
+    return (jsx("div", { className: styles$1.chart, style: { ...frameCss(frame, zoom), ...rdlBoxStyle(item.Style, zoom) }, children: pie
+            ? jsx(CwReportPieChart, { chart: item, width: width, height: height, zoom: zoom })
+            : jsx(CwReportLineChart, { chart: item, width: width, height: height, zoom: zoom, culture: culture }) }));
+}
+function ReportGauge({ item, frame }) {
+    const { zoom } = useReportRender();
+    return (jsx("div", { className: styles$1.chart, style: { ...frameCss(frame, zoom), ...rdlBoxStyle(item.Style, zoom) }, children: jsx(CwReportGauge, { panel: item, width: ptToPx(frame.width, zoom), height: ptToPx(frame.height, zoom), zoom: zoom }) }));
+}
+function ReportPlaceholder({ item, frame }) {
+    const { zoom } = useReportRender();
+    return (jsx(CwTooltipNew, { content: `${item.Element}: ${item.Reason}`, position: "top", children: jsx("div", { className: styles$1.placeholder, style: frameCss(frame, zoom), "aria-label": `${item.Element}: ${item.Reason}`, children: item.Element }) }));
+}
+/** One render-tree item, absolutely positioned in its container; nothing when its toggles hide it. */
+function ReportItem({ item, itemKey, frame }) {
+    const { zoom, flipped } = useReportRender();
+    if (!isRdlVisible(item.Toggles, flipped))
+        return null;
+    const box = frame ?? frameOf(item);
+    switch (item.Kind) {
+        case "textbox": return jsx(ReportTextbox, { textbox: item, itemKey: itemKey, frameStyle: frameCss(box, zoom) });
+        case "rectangle": return jsx(ReportRectangle, { item: item, itemKey: itemKey, frame: box });
+        case "line": return jsx(ReportLine, { item: item, frame: box });
+        case "image": return jsx(ReportImage, { item: item, frame: box });
+        case "table": return jsx(ReportTable, { item: item, itemKey: itemKey, frame: box });
+        case "chart": return jsx(ReportChart, { item: item, frame: box });
+        case "gauge": return jsx(ReportGauge, { item: item, frame: box });
+        case "placeholder": return jsx(ReportPlaceholder, { item: item, frame: box });
+        default: return null;
+    }
+}
+function ReportItems({ items, parentKey }) {
+    return (jsx(Fragment, { children: items.map((item, index) => (jsx(ReportItem, { item: item, itemKey: rdlItemKey(parentKey, index) }, index))) }));
+}
+const NO_FLIPS$1 = new Set();
+const NO_MATCHES = [];
+const DEFAULT_MARGINS = {
+    top: DEFAULT_PAGE_MARGIN_PT,
+    right: DEFAULT_PAGE_MARGIN_PT,
+    bottom: DEFAULT_PAGE_MARGIN_PT,
+    left: DEFAULT_PAGE_MARGIN_PT
+};
+function Band({ section, sectionKey, zoom, bodyWidth, as: Element }) {
+    return (jsx(Element, { className: styles$1.section, style: { ...rdlBoxStyle(section.Style, zoom), width: ptToPx(bodyWidth, zoom), height: ptToPx(section.Height, zoom) }, children: jsx(ReportItems, { items: section.Items, parentKey: sectionKey }) }));
+}
+/**
+ * One page of a rendered RDL report drawn as a sheet of paper: page header, body and page footer,
+ * every item absolutely positioned in points scaled by the zoom. Presentational: toggle state,
+ * sorting, images and find matches come from the host.
+ */
+function CwReportPage({ page, bodyWidth, zoom = 1, culture, margins = DEFAULT_MARGINS, flippedToggles = NO_FLIPS$1, onToggle, onSort, getImageUrl, findMatches = NO_MATCHES, activeMatchIndex = -1, className }) {
+    const sheetRef = useRef(null);
+    const highlights = useMemo(() => highlightsByRun(findMatches), [findMatches]);
+    const context = useMemo(() => ({
+        zoom,
+        culture,
+        flipped: flippedToggles,
+        onToggle,
+        onSort,
+        getImageUrl,
+        highlights,
+        activeMatchIndex
+    }), [zoom, culture, flippedToggles, onToggle, onSort, getImageUrl, highlights, activeMatchIndex]);
+    useEffect(() => {
+        if (activeMatchIndex < 0)
+            return;
+        const active = sheetRef.current?.querySelector("[data-active-match='true']");
+        active?.scrollIntoView?.({ block: "center", inline: "nearest" });
+    }, [activeMatchIndex, findMatches]);
+    const sheet = pageSheetSizePt(page, bodyWidth, margins);
+    return (jsx(ReportRenderContext.Provider, { value: context, children: jsxs("div", { ref: sheetRef, className: `${styles$1.sheet}${className ? ` ${className}` : ""}`, style: {
+                width: ptToPx(sheet.width, zoom),
+                height: ptToPx(sheet.height, zoom),
+                padding: `${ptToPx(margins.top, zoom)}px ${ptToPx(margins.right, zoom)}px ${ptToPx(margins.bottom, zoom)}px ${ptToPx(margins.left, zoom)}px`
+            }, "data-page": page.Number, children: [page.Header && jsx(Band, { section: page.Header, sectionKey: RDL_SECTION_KEYS.header, zoom: zoom, bodyWidth: bodyWidth, as: "header" }), jsx("div", { className: styles$1.section, style: { width: ptToPx(bodyWidth, zoom), height: ptToPx(page.Height, zoom) }, children: jsx(ReportItems, { items: page.Items, parentKey: RDL_SECTION_KEYS.body }) }), page.Footer && jsx(Band, { section: page.Footer, sectionKey: RDL_SECTION_KEYS.footer, zoom: zoom, bodyWidth: bodyWidth, as: "footer" })] }) }));
+}
+const DATE_PREFIX = /^(\d{4}-\d{2}-\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?/;
+/** Reads the date and time of an ISO 8601 text (any offset is ignored, the wall clock is kept). Null when it is not a date. */
+function parseRdlDateTime(text) {
+    const match = DATE_PREFIX.exec(text.trim());
+    if (!match)
+        return null;
+    try {
+        return Temporal.PlainDateTime.from(`${match[1]}T${match[2] ?? "00"}:${match[3] ?? "00"}:${match[4] ?? "00"}`);
+    }
+    catch {
+        return null;
+    }
+}
+/** A date-time as invariant text "YYYY-MM-DDTHH:mm:ss". */
+function formatRdlDateTime(value) {
+    return value.toString({ smallestUnit: "second", calendarName: "never" });
+}
+/** A typed API value as the text of an option or an editor (null stays null). */
+function rdlValueToText(value) {
+    if (value === null || value === undefined)
+        return null;
+    if (typeof value === "boolean")
+        return value ? "true" : "false";
+    if (typeof value === "number")
+        return numberToInvariant(value);
+    return value;
+}
+function numberToInvariant(value) {
+    return Number.isFinite(value) ? value.toString() : "";
+}
+function isDateTime(parameter) {
+    return parameter.DataType.toLowerCase() === "datetime" || parameter.InputType.toLowerCase() === "datetime";
+}
+function isBoolean(parameter) {
+    return parameter.DataType.toLowerCase() === "boolean" || parameter.InputType.toLowerCase() === "boolean";
+}
+function isTextInput(parameter) {
+    return parameter.InputType.toLowerCase() === "textbox";
+}
+function isNumeric(parameter) {
+    const type = parameter.DataType.toLowerCase();
+    return type === "integer" || type === "float";
+}
+function toEditorScalar(parameter, value) {
+    if (isDateTime(parameter) && parameter.InputType.toLowerCase() !== "dropdownlist") {
+        const text = String(value);
+        return parseRdlDateTime(text) ?? text;
+    }
+    if (isBoolean(parameter) && parameter.InputType.toLowerCase() !== "dropdownlist") {
+        return typeof value === "boolean" ? value : String(value).toLowerCase() === "true";
+    }
+    return rdlValueToText(value) ?? "";
+}
+/** The editor state of one parameter from the values the server sent; a NULL value is an empty field. */
+function initialParameterEdit(parameter) {
+    const scalars = (parameter.Values ?? [])
+        .filter((value) => value !== null && value !== undefined)
+        .map(value => toEditorScalar(parameter, value));
+    return { values: parameter.MultiValue ? scalars : scalars.slice(0, 1) };
+}
+/** The values that count: a multi-value text drops its empty lines, a single value keeps only the first. */
+function enteredValues(parameter, edit) {
+    const values = edit.values.filter(value => value !== "");
+    return parameter.MultiValue ? values : values.slice(0, 1);
+}
+/** The editor state of a whole form. */
+function initialParameterEdits(parameters) {
+    const edits = {};
+    for (const parameter of parameters)
+        edits[parameter.Name] = initialParameterEdit(parameter);
+    return edits;
+}
+/** One editor value as invariant text. */
+function editorScalarToInvariant(parameter, value) {
+    if (typeof value === "boolean")
+        return value ? "true" : "false";
+    if (typeof value !== "string")
+        return formatRdlDateTime(value);
+    if (isNumeric(parameter))
+        return value.trim().replace(",", ".");
+    return value;
+}
+/**
+ * The values the API takes (RdlParameterValuesRequest.Values): every parameter, each as an array of
+ * invariant text. An empty field is [null] when the parameter is nullable, [""] for a single text,
+ * else []. A parameter without an edit sends the values the server gave it.
+ *
+ * A nullable boolean whose value is NULL shows neither True nor False and keeps sending NULL until
+ * the user picks one; from then on it sends "true" / "false" (a radio group cannot be emptied again).
+ */
+function toRdlParameterValues(parameters, edits) {
+    const result = {};
+    for (const parameter of parameters) {
+        const edit = edits[parameter.Name] ?? initialParameterEdit(parameter);
+        const texts = enteredValues(parameter, edit).map(value => editorScalarToInvariant(parameter, value));
+        if (texts.length > 0) {
+            result[parameter.Name] = texts;
+        }
+        else if (parameter.Nullable) {
+            result[parameter.Name] = [null];
+        }
+        else {
+            result[parameter.Name] = !parameter.MultiValue && isTextInput(parameter) ? [""] : [];
+        }
+    }
+    return result;
+}
+/** True when any other parameter lists `name` in its DependsOn: a change must re-resolve the form. */
+function hasDependentParameters(parameters, name) {
+    return parameters.some(parameter => parameter.Name !== name && parameter.DependsOn.includes(name));
+}
+/** Whether the user edits the parameter (hidden and server-filled parameters are not editable). */
+function isEditableParameter(parameter) {
+    return !parameter.Hidden && !parameter.ServerValue;
+}
+/** Whether the form has anything for the user to fill in (some parameter is neither hidden nor server-filled). */
+function hasEditableParameters(parameters) {
+    return parameters.some(isEditableParameter);
+}
+/**
+ * Client-side checks before "View report": a value is required unless the parameter is nullable
+ * (empty = NULL) or allows blank text (AllowBlank), and numbers / dates must parse. Hidden and
+ * server-filled parameters are the server's business. Returns parameter name to message.
+ */
+function validateParameterEdits(parameters, edits) {
+    const errors = {};
+    for (const parameter of parameters) {
+        if (!isEditableParameter(parameter))
+            continue;
+        const edit = edits[parameter.Name] ?? initialParameterEdit(parameter);
+        const values = enteredValues(parameter, edit);
+        if (values.length === 0) {
+            const blankAllowed = parameter.Nullable
+                || (parameter.AllowBlank && !parameter.MultiValue && isTextInput(parameter) && !isNumeric(parameter));
+            if (!blankAllowed)
+                errors[parameter.Name] = parameter.MultiValue ? "Select at least one value." : "A value is required.";
+            continue;
+        }
+        if (isNumeric(parameter) && parameter.InputType.toLowerCase() !== "dropdownlist") {
+            const integer = parameter.DataType.toLowerCase() === "integer";
+            const invalid = values.some(value => {
+                const text = editorScalarToInvariant(parameter, value);
+                return integer ? !/^-?\d+$/.test(text) : !/^-?(\d+\.?\d*|\.\d+)$/.test(text);
+            });
+            if (invalid)
+                errors[parameter.Name] = integer ? "Enter a whole number." : "Enter a number.";
+            continue;
+        }
+        if (isDateTime(parameter) && parameter.InputType.toLowerCase() !== "dropdownlist"
+            && values.some(value => typeof value === "string")) {
+            errors[parameter.Name] = "Enter a valid date.";
+        }
+    }
+    return errors;
+}
+var styles = {"viewer":"cw-report-viewer-module__viewer__SYHSE","sidebar":"cw-report-viewer-module__sidebar__1ZSM2","resizer":"cw-report-viewer-module__resizer__JdnQI","main":"cw-report-viewer-module__main__qsPXX","parameterForm":"cw-report-viewer-module__parameterForm__H01sS","parameterFields":"cw-report-viewer-module__parameterFields__D2BuK","parameterActions":"cw-report-viewer-module__parameterActions__01RD4","viewButton":"cw-report-viewer-module__viewButton__1CMHL","parameterGrid":"cw-report-viewer-module__parameterGrid__Jyn0M","toolbar":"cw-report-viewer-module__toolbar__9gKXV","reportName":"cw-report-viewer-module__reportName__g5nsm","findStatus":"cw-report-viewer-module__findStatus__4gLGb","warningsButton":"cw-report-viewer-module__warningsButton__GIKjH","warningsPanel":"cw-report-viewer-module__warningsPanel__rFHBP","warningList":"cw-report-viewer-module__warningList__Ouk7x","menu":"cw-report-viewer-module__menu__ufxUU","menuItem":"cw-report-viewer-module__menuItem__hBmdD","canvas":"cw-report-viewer-module__canvas__9KuUT","canvasNote":"cw-report-viewer-module__canvasNote__K9XP0","sheetSkeleton":"cw-report-viewer-module__sheetSkeleton__DsSaA","emptyState":"cw-report-viewer-module__emptyState__pJyQ1"};
+/** Above this many options a single-select dropdown gets a search box. */
+const SEARCH_THRESHOLD = 10;
+const LABEL_LAYOUT = { flexDirection: "column" };
+const BOOLEAN_OPTIONS = [
+    { value: "true", label: "True" },
+    { value: "false", label: "False" }
+];
+function scalarText(value) {
+    if (value === undefined)
+        return "";
+    if (typeof value === "boolean")
+        return value ? "true" : "false";
+    return typeof value === "string" ? value : value.toString();
+}
+function feedbackFor(parameter, clientError) {
+    const messages = [];
+    if (parameter.ValidValuesError)
+        messages.push({ type: "danger", message: parameter.ValidValuesError });
+    if (parameter.ValueError)
+        messages.push({ type: "danger", message: parameter.ValueError });
+    if (clientError)
+        messages.push({ type: "danger", message: clientError });
+    return messages.length > 0 ? messages : undefined;
+}
+function ParameterField({ parameter, edit, error, disabled, setEdit, commit }) {
+    const label = { text: parameter.Prompt || parameter.Name };
+    const feedback = feedbackFor(parameter, error);
+    const testId = `report-parameter-${parameter.Name}`;
+    // A NULL valid value is no option of its own: leaving the field empty is NULL.
+    const options = parameter.ValidValues
+        .filter(option => option.Value !== null && option.Value !== undefined)
+        .map(option => ({ value: rdlValueToText(option.Value) ?? "", label: option.Label }));
+    switch (parameter.InputType.toLowerCase()) {
+        case "dropdownlist":
+            if (parameter.MultiValue) {
+                return (jsx(CwTagSelector, { id: testId, labelProps: label, alignProps: LABEL_LAYOUT, options: options, value: edit.values.map(scalarText), onChange: values => setEdit({ values }, true), showSelectAll: true, disabled: disabled, feedback: feedback }));
+            }
+            return (jsx(CwDropdown, { "data-testid": testId, labelProps: label, alignProps: LABEL_LAYOUT, options: options, value: scalarText(edit.values[0]), onChange: value => setEdit({ values: value === undefined ? [] : [String(value)] }, true), allowSearch: options.length > SEARCH_THRESHOLD, disabled: disabled, feedback: feedback }));
+        case "datetime": {
+            const value = edit.values[0];
+            return (jsx(CwDateTimePickerTemporal, { "data-testid": testId, labelProps: label, alignProps: LABEL_LAYOUT, value: value instanceof Temporal.PlainDateTime ? value : undefined, onChange: dateTime => setEdit({ values: dateTime ? [dateTime] : [] }, true), disabled: disabled, feedback: feedback }));
+        }
+        case "boolean":
+            return (jsx(CwRadioGroup, { "data-testid": testId, labelProps: label, groupLayout: { direction: "row" }, options: BOOLEAN_OPTIONS, value: edit.values.length > 0 ? scalarText(edit.values[0]) : undefined, onChange: value => setEdit({ values: [value === "true"] }, true), disabled: disabled, feedback: feedback }));
+        case "integer":
+        case "float":
+            return (jsx(CwDigit, { "data-testid": testId, labelProps: label, alignProps: LABEL_LAYOUT, step: parameter.InputType.toLowerCase() === "integer" ? 1 : "any", value: scalarText(edit.values[0]), onChange: e => {
+                    const text = e.currentTarget.value;
+                    setEdit({ values: text === "" ? [] : [text] }, false);
+                }, onBlur: commit, disabled: disabled, feedback: feedback }));
+        default:
+            if (parameter.MultiValue) {
+                return (jsx(CwTextArea, { "data-testid": testId, labelProps: label, alignProps: LABEL_LAYOUT, value: edit.values.map(scalarText).join("\n"), onChange: e => {
+                        // Keep empty lines while typing (Enter must survive the re-render); they are dropped on serialization.
+                        setEdit({ values: e.currentTarget.value.split("\n") }, false);
+                    }, onBlur: commit, disabled: disabled, feedback: feedback ?? { type: "neutral", message: "One value per line." } }));
+            }
+            return (jsx(CwInputText, { "data-testid": testId, labelProps: label, alignProps: LABEL_LAYOUT, value: scalarText(edit.values[0]), onChange: e => {
+                    const text = e.currentTarget.value;
+                    setEdit({ values: [text] }, false);
+                }, onBlur: commit, disabled: disabled, feedback: feedback }));
+    }
+}
+/**
+ * The report parameter form in the server's order: dropdowns (multi-value as tag selector with
+ * select-all), date-time pickers, True/False, numbers and text. There is no NULL control: an empty
+ * field of a nullable parameter is sent as NULL (see rdlParameterValues), as in the old WinOps
+ * report page. Hidden parameters are not drawn; server-filled ones are read-only. Presentational:
+ * the host owns the editor state (`useReportParameterForm`); a change to a parameter others depend
+ * on calls its `onResolve`, "View report" its `onRender` with the values as invariant text
+ * (`toRdlParameterValues`).
+ *
+ * The form fills its parent's height when the parent gives it one: the fields scroll and the
+ * "View report" footer stays pinned at the bottom. In an unbounded parent it simply grows.
+ */
+function CwReportParameterForm({ controller, loading = false, rendering = false }) {
+    const { form } = controller;
+    const visible = form?.Parameters.filter(parameter => !parameter.Hidden) ?? [];
+    return (jsxs("form", { className: styles.parameterForm, "data-testid": "report-parameter-form", onSubmit: e => {
+            e.preventDefault();
+            controller.submit();
+        }, children: [jsx("div", { className: styles.parameterFields, children: form ? (jsx(CwLoading, { isLoading: loading, size: "small", children: visible.length > 0 && (jsx("div", { className: `${styles.parameterGrid} cw-grid-base-auto`, children: visible.map(parameter => (jsx(ParameterField, { parameter: parameter, edit: controller.edits[parameter.Name] ?? { values: [] }, error: controller.errors[parameter.Name], disabled: loading || !!parameter.ServerValue, setEdit: (edit, commit) => controller.setEdit(parameter.Name, edit, commit), commit: () => controller.commit(parameter.Name) }, parameter.Name))) })) })) : (jsxs("div", { className: `${styles.parameterGrid} cw-grid-base-auto`, "aria-busy": "true", children: [jsx(CwSkeleton, { variant: "rect", height: "3.5rem" }), jsx(CwSkeleton, { variant: "rect", height: "3.5rem" }), jsx(CwSkeleton, { variant: "rect", height: "3.5rem" })] })) }), jsx("footer", { className: styles.parameterActions, children: jsx(CwButton, { type: "submit", text: "View report", icon: "file-view", className: styles.viewButton, disabled: !form || loading || rendering, "data-testid": "report-view-button" }) })] }));
+}
+const REPORT_EXPORT_LABELS = {
+    pdf: "PDF",
+    xlsx: "Excel",
+    docx: "Word"
+};
+/** A render with warnings asks before exporting or printing; without warnings the action runs at once. */
+function needsOutputConfirmation(warnings) {
+    return (warnings?.length ?? 0) > 0;
+}
+/** Texts of the confirmation shown before an export or print of a render with warnings. */
+function outputConfirmation(action, warningCount) {
+    const count = `${warningCount} warning${warningCount === 1 ? "" : "s"}`;
+    if (action.kind === "print") {
+        return {
+            headline: "Print report",
+            message: `This report has ${count}. The printout may not match the report exactly.`,
+            confirmText: "Print anyway"
+        };
+    }
+    const label = REPORT_EXPORT_LABELS[action.format];
+    return {
+        headline: `Export as ${label}`,
+        message: `This report has ${count}. The ${label} export may not match the report exactly.`,
+        confirmText: "Export anyway"
+    };
+}
+const EXPORTS = [
+    { format: "pdf", label: REPORT_EXPORT_LABELS.pdf, icon: "file-pdf" },
+    { format: "xlsx", label: REPORT_EXPORT_LABELS.xlsx, icon: "table" },
+    { format: "docx", label: REPORT_EXPORT_LABELS.docx, icon: "document" }
+];
+function zoomToValue(zoom) {
+    return typeof zoom === "number" ? String(zoom) : zoom;
+}
+function valueToZoom(value) {
+    if (value === "pageWidth" || value === "wholePage")
+        return value;
+    const factor = parseFloat(value);
+    return Number.isFinite(factor) && factor > 0 ? factor : 1;
+}
+function closePopover(element) {
+    element.closest("[popover]")?.hidePopover();
+}
+function PageInput({ pageNumber, pageCount, onPage, disabled }) {
+    const [draft, setDraft] = useState({ page: pageNumber, text: String(pageNumber) });
+    const text = draft.page === pageNumber ? draft.text : String(pageNumber);
+    const commit = () => {
+        const parsed = parseInt(text, 10);
+        const target = Number.isFinite(parsed) ? Math.min(Math.max(1, parsed), Math.max(1, pageCount)) : pageNumber;
+        setDraft({ page: pageNumber, text: String(target) });
+        if (target !== pageNumber)
+            onPage(target);
+    };
+    return (jsx(CwDigit, { "data-size": "tiny", "aria-label": "Page", min: 1, max: Math.max(1, pageCount), value: text, disabled: disabled, onChange: e => {
+            const value = e.currentTarget.value;
+            setDraft({ page: pageNumber, text: value });
+        }, onKeyDown: (e) => {
+            if (e.key === "Enter")
+                commit();
+        }, onBlur: commit }));
+}
+/**
+ * The report viewer toolbar, like the old ReportViewer: page navigation, refresh, back, zoom,
+ * find on the current page, export (PDF / Excel / Word) and print. Warnings stay invisible until
+ * there are some (Dark Cockpit). Presentational: every action is a callback.
+ */
+function CwReportToolbar({ pageNumber, pageCount, onPage, onRefresh, onBack, zoom, onZoomChange, findText, onFindTextChange, onFindNext, findMatchCount, findMatchIndex, onExport, onPrint, warnings = [], onToggleParameters, parametersVisible = true, disabled = false, reportName }) {
+    const firstPage = disabled || pageNumber <= 1;
+    const lastPage = disabled || pageNumber >= pageCount;
+    const findStatus = findText.trim() === ""
+        ? ""
+        : findMatchCount === 0 ? "No matches" : `${Math.max(0, findMatchIndex) + 1} of ${findMatchCount}`;
+    return (jsxs("header", { className: `${styles.toolbar} cw-flex-row cw-align-left-center cw-flex-wrap cw-gap-small`, "data-testid": "report-toolbar", children: [onBack && jsx(CwButton, { variant: "icon", icon: "arrow-left", title: "Back", onClick: onBack }), onToggleParameters && (jsx(CwButton, { variant: "icon", icon: "filter-list", title: parametersVisible ? "Hide parameters" : "Show parameters", pressed: parametersVisible, onClick: onToggleParameters })), jsxs("nav", { className: "cw-flex-row cw-align-left-center cw-gap-tiny", "aria-label": "Pages", children: [jsx(CwButton, { variant: "icon", icon: "chevron-left-double", title: "First page", disabled: firstPage, onClick: () => onPage(1) }), jsx(CwButton, { variant: "icon", icon: "chevron-left", title: "Previous page", disabled: firstPage, onClick: () => onPage(pageNumber - 1) }), jsx(PageInput, { pageNumber: pageNumber, pageCount: pageCount, onPage: onPage, disabled: disabled }), jsxs("span", { className: "cw-font-size-small", children: ["of ", disabled ? "-" : pageCount] }), jsx(CwButton, { variant: "icon", icon: "chevron-right", title: "Next page", disabled: lastPage, onClick: () => onPage(pageNumber + 1) }), jsx(CwButton, { variant: "icon", icon: "chevron-right-double", title: "Last page", disabled: lastPage, onClick: () => onPage(pageCount) })] }), onRefresh && jsx(CwButton, { variant: "icon", icon: "refresh", title: "Refresh", disabled: disabled, onClick: onRefresh }), jsxs(CwSelect, { "aria-label": "Zoom", value: zoomToValue(zoom), handleChange: value => onZoomChange(valueToZoom(value)), children: [REPORT_ZOOM_STEPS.map(step => (jsx(CwOption, { value: String(step), text: `${Math.round(step * 100)}%` }, step))), jsx(CwOption, { value: "pageWidth", text: "Page width" }), jsx(CwOption, { value: "wholePage", text: "Whole page" })] }), jsxs("div", { className: "cw-flex-row cw-align-left-center cw-gap-small", children: [jsx(CwInputText, { "aria-label": "Find text", placeholder: "Find", value: findText, disabled: disabled, onChange: e => onFindTextChange(e.currentTarget.value), onKeyDown: (e) => {
+                            if (e.key === "Enter")
+                                onFindNext();
+                        }, buttonProps: {
+                            text: "Next",
+                            variant: "outline",
+                            disabled: disabled || findMatchCount === 0,
+                            onClick: onFindNext
+                        } }), jsx("span", { className: `${styles.findStatus} cw-font-size-small`, "aria-live": "polite", children: findStatus })] }), jsx("div", { className: styles.reportName, children: reportName && (jsx(CwTooltipNew, { content: reportName, position: "bottom", children: jsx("strong", { className: "cw-text-ellipsis", "data-testid": "report-name", children: reportName }) })) }), warnings.length > 0 && (jsx(CwPopoverButton, { variant: "icon", icon: "warning", title: "Warnings", badge: { count: warnings.length, color: "warning" }, className: styles.warningsButton, placement: "bottom-end", panelClassName: styles.warningsPanel, children: jsx("ul", { className: styles.warningList, children: warnings.map((warning, index) => jsx("li", { children: warning }, index)) }) })), jsx(CwPopoverButton, { icon: "download", title: "Export", variant: "icon", disabled: disabled, placement: "bottom-end", children: jsx("div", { className: styles.menu, children: EXPORTS.map(item => (jsx(CwButton, { variant: "ghost", color: "neutral", text: item.label, icon: item.icon, className: styles.menuItem, onClick: e => {
+                            closePopover(e.currentTarget);
+                            onExport(item.format);
+                        } }, item.format))) }) }), jsx(CwButton, { variant: "icon", icon: "print", title: "Print", disabled: disabled, onClick: onPrint })] }));
+}
+/** Width change of one arrow key press on the sidebar resize handle, in CSS pixels. */
+const SIDEBAR_KEY_STEP = 16;
+/** Keeps a sidebar width inside [min, max]; a max below min collapses to min. */
+function clampSidebarWidth(width, min, max) {
+    const upper = Math.max(min, max);
+    if (!Number.isFinite(width))
+        return min;
+    return Math.min(Math.max(width, min), upper);
+}
+/**
+ * The sidebar width after a key press on the resize handle: arrows step, Home / End jump to the
+ * bounds. Null for keys the handle does not use, so they keep their default behaviour.
+ */
+function sidebarWidthForKey(key, current, min, max, step = SIDEBAR_KEY_STEP) {
+    switch (key) {
+        case "ArrowLeft":
+            return clampSidebarWidth(current - step, min, max);
+        case "ArrowRight":
+            return clampSidebarWidth(current + step, min, max);
+        case "Home":
+            return clampSidebarWidth(min, min, max);
+        case "End":
+            return clampSidebarWidth(max, min, max);
+        default:
+            return null;
+    }
+}
+/**
+ * Whether the viewer shows the parameter sidebar. While the form loads for the first time it shows
+ * the skeleton; once loaded only when the user has something to fill in. A report whose parameters
+ * are all hidden or server-filled (or that has none) gets no sidebar.
+ */
+function showsParameterSidebar(parameters, loadingParameters) {
+    return parameters ? hasEditableParameters(parameters.Parameters) : loadingParameters;
+}
+/**
+ * Width of a left sidebar resized by dragging the handle on its right edge, like the master panel
+ * of CwMasterDetail. The handle captures the pointer, so the drag keeps going outside it; the
+ * keyboard steps the width for users who cannot drag.
+ */
+function useSidebarResize(initialWidth, minWidth, maxWidth) {
+    const [storedWidth, setStoredWidth] = useState(initialWidth);
+    const [resizing, setResizing] = useState(false);
+    const drag = useRef(null);
+    const width = clampSidebarWidth(storedWidth, minWidth, maxWidth);
+    const onPointerDown = useCallback((e) => {
+        if (e.button !== 0)
+            return;
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        drag.current = { startX: e.clientX, startWidth: width };
+        setResizing(true);
+    }, [width]);
+    const onPointerMove = useCallback((e) => {
+        const start = drag.current;
+        if (!start)
+            return;
+        setStoredWidth(clampSidebarWidth(start.startWidth + e.clientX - start.startX, minWidth, maxWidth));
+    }, [minWidth, maxWidth]);
+    const endDrag = useCallback((e) => {
+        if (!drag.current)
+            return;
+        drag.current = null;
+        if (e.currentTarget.hasPointerCapture(e.pointerId))
+            e.currentTarget.releasePointerCapture(e.pointerId);
+        setResizing(false);
+    }, []);
+    const onKeyDown = useCallback((e) => {
+        const next = sidebarWidthForKey(e.key, width, minWidth, maxWidth);
+        if (next === null)
+            return;
+        e.preventDefault();
+        setStoredWidth(next);
+    }, [width, minWidth, maxWidth]);
+    return {
+        width,
+        resizing,
+        handleProps: { onPointerDown, onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown }
+    };
+}
+/** Space the canvas keeps around the sheet when fitting it (its padding on both sides), in CSS pixels. */
+const CANVAS_GUTTER = 32;
+function useElementSize(ref) {
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        const element = ref.current;
+        if (!element || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => {
+            setSize({ width: element.clientWidth, height: element.clientHeight });
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [ref]);
+    return size;
+}
+/**
+ * The RDL report viewer: a resizable, collapsible parameter sidebar on the left, the toolbar and
+ * the page on a neutral canvas on the right, like the old ReportViewer. The sidebar only exists
+ * when the user has a parameter to fill in. Presentational: it fetches nothing and owns no report
+ * state. The host calls `useReportViewerState` and `useReportParameterForm` and passes their results
+ * as `state` and `parameterForm`; every request goes out through the callbacks given to those hooks
+ * (or `onSort` / `onRefresh` / `onBack`) and comes back as their arguments.
+ */
+function CwReportViewer({ definition, state, parameterForm, loadingParameters = false, loadingRender = false, error, onSort, onRefresh, onBack, getImageUrl, sidebarWidth = 320, minSidebarWidth = 240, maxSidebarWidth = 600, resizable = true, className }) {
+    const { result } = state;
+    const parameters = parameterForm.form;
+    const sidebar = useSidebarResize(sidebarWidth, minSidebarWidth, maxSidebarWidth);
+    const canvasRef = useRef(null);
+    const canvasSize = useElementSize(canvasRef);
+    const hasSidebar = showsParameterSidebar(parameters, loadingParameters);
+    const sidebarOpen = hasSidebar && state.parametersVisible;
+    const warnings = result?.Warnings ?? [];
+    const reportName = result?.Name || definition?.Name || null;
+    const confirmation = state.pendingOutput ? outputConfirmation(state.pendingOutput, warnings.length) : null;
+    /** Where the clicked toggle sat in the canvas, so the re-rendered page keeps it in the same place. */
+    const toggleAnchorRef = useRef(null);
+    const handleToggle = (toggleId) => {
+        if (state.serverToggles) {
+            const canvas = canvasRef.current;
+            const button = canvas?.querySelector(`[data-toggle-id="${CSS.escape(toggleId)}"]`);
+            toggleAnchorRef.current = canvas && button
+                ? { toggleId, offset: button.getBoundingClientRect().top - canvas.getBoundingClientRect().top }
+                : null;
+        }
+        state.toggle(toggleId);
+    };
+    useLayoutEffect(() => {
+        const anchor = toggleAnchorRef.current;
+        const canvas = canvasRef.current;
+        if (!anchor || !canvas || !result)
+            return;
+        toggleAnchorRef.current = null;
+        const button = canvas.querySelector(`[data-toggle-id="${CSS.escape(anchor.toggleId)}"]`);
+        if (button)
+            canvas.scrollTop += button.getBoundingClientRect().top - canvas.getBoundingClientRect().top - anchor.offset;
+    }, [result]);
+    // Without a sidebar (nothing to fill in) the form's "View report" lives on the canvas instead.
+    const runButton = !hasSidebar && parameters && !result ? (jsx(CwButton, { text: "View report", icon: "file-view", disabled: loadingParameters || loadingRender, onClick: parameterForm.submit, "data-testid": "report-view-button" })) : null;
+    const zoomFactor = result
+        ? resolveZoomFactor(state.zoom, pageSheetSizePt(result.Page, result.BodyWidth, SCREEN_PAGE_MARGINS), { width: canvasSize.width - CANVAS_GUTTER, height: canvasSize.height - CANVAS_GUTTER })
+        : 1;
+    const renderCanvas = () => {
+        if (error) {
+            return (jsxs(Fragment, { children: [jsx(CwNote, { color: "danger", variant: "soft", icon: "warning", content: error, className: styles.canvasNote }), runButton] }));
+        }
+        if (!result) {
+            if (loadingRender) {
+                return (jsx("div", { className: styles.sheetSkeleton, "aria-busy": "true", children: jsx(CwSkeleton, { variant: "text", count: 14 }) }));
+            }
+            return (jsxs("div", { className: `${styles.emptyState} cw-flex-column cw-align-center-center cw-gap-small`, children: [jsx(CwIcon, { iconId: "file-report", size: "huge", color: "neutral" }), jsx("p", { className: "cw-margin-none", children: hasSidebar ? "Set the parameters and select View report." : "Select View report to run the report." }), runButton] }));
+        }
+        return (jsx(CwLoading, { isLoading: loadingRender, children: jsx(CwReportPage, { page: result.Page, bodyWidth: result.BodyWidth, zoom: zoomFactor, culture: result.Culture, margins: SCREEN_PAGE_MARGINS, flippedToggles: state.drawnFlips, onToggle: handleToggle, onSort: onSort, getImageUrl: getImageUrl, findMatches: state.findMatches, activeMatchIndex: state.findIndex }) }));
+    };
+    return (jsxs("section", { className: `${styles.viewer}${className ? ` ${className}` : ""}`, "aria-label": result?.Name ?? definition?.Name ?? "Report", "data-resizing": sidebar.resizing || undefined, "data-testid": "report-viewer", children: [sidebarOpen && (jsxs(Fragment, { children: [jsx("aside", { className: styles.sidebar, style: { width: sidebar.width }, "aria-label": "Report parameters", "data-testid": "report-parameter-sidebar", children: jsx(CwReportParameterForm, { controller: parameterForm, loading: loadingParameters, rendering: loadingRender }) }), resizable && (jsx("div", { className: styles.resizer, role: "separator", "aria-orientation": "vertical", "aria-label": "Resize parameters", "aria-valuenow": sidebar.width, "aria-valuemin": minSidebarWidth, "aria-valuemax": Math.max(minSidebarWidth, maxSidebarWidth), tabIndex: 0, "data-resizing": sidebar.resizing, ...sidebar.handleProps }))] })), jsxs("div", { className: styles.main, children: [jsx(CwReportToolbar, { pageNumber: result?.Page.Number ?? 1, pageCount: result?.PageCount ?? 1, onPage: state.goToPage, onRefresh: onRefresh, onBack: onBack, zoom: state.zoom, onZoomChange: state.setZoom, findText: state.findText, onFindTextChange: state.setFindText, onFindNext: state.findNext, findMatchCount: state.findMatches.length, findMatchIndex: state.findIndex, onExport: format => state.requestOutput({ kind: "export", format }), onPrint: () => state.requestOutput({ kind: "print" }), warnings: warnings, reportName: reportName, onToggleParameters: hasSidebar ? state.toggleParameters : undefined, parametersVisible: state.parametersVisible, disabled: !result || loadingRender || !!error }), jsx("div", { ref: canvasRef, className: styles.canvas, "data-testid": "report-canvas", children: renderCanvas() })] }), confirmation && (jsx(CwDialog, { open: true, headline: confirmation.headline, width: "28rem", onClose: state.cancelOutput, customFooter: [
+                    jsx(CwButton, { text: "Cancel", variant: "outline", onClick: state.cancelOutput }, "cancel"),
+                    jsx(CwButton, { text: confirmation.confirmText, onClick: state.confirmOutput, "data-testid": "report-output-confirm" }, "confirm")
+                ], "data-testid": "report-output-dialog", children: jsx("p", { className: "cw-margin-none", children: confirmation.message }) })), state.permissionDialogOpen && (jsx(CwDialog, { open: true, headline: "SQL ERROR", width: "30rem", onClose: state.closePermissionDialog, customFooter: [jsx(CwButton, { text: "OK", onClick: state.closePermissionDialog }, "ok")], "data-testid": "report-permission-dialog", children: jsx("p", { className: "cw-margin-none", children: "You do not have the database permission this report needs, so some of its data could not be read. Ask an administrator to grant access to the report data." }) }))] }));
+}
+const NO_FLIPS = new Set();
+/**
+ * Client-side state of the report viewer around one render result, owned by the host and handed to
+ * `CwReportViewer` as `state`. The drilldown toggles belong to a render: a new RenderId (new render,
+ * sort) starts with none flipped, paging and server views of the same render keep them. With
+ * `onView` the host re-renders the page for the flipped toggles, so the page and find use it as drawn
+ * (`drawnFlips` = none). The find position belongs to the query and the page shown. The permission
+ * dialog is dismissed per render, and a pending export / print question is dropped by a new render.
+ */
+function useReportViewerState(result, options) {
+    const { onPage, onView, onExport, onPrint, initialZoom = 1 } = options;
+    const renderId = result?.RenderId ?? null;
+    const page = result?.Page ?? null;
+    const pageNumber = page?.Number ?? 1;
+    const warnings = result?.Warnings;
+    const serverToggles = !!onView;
+    const [zoom, setZoom] = useState(initialZoom);
+    const [toggles, setToggles] = useState({ renderId: null, flipped: NO_FLIPS });
+    const [findText, setFindText] = useState("");
+    const [find, setFind] = useState({ key: "", index: 0 });
+    const [parametersVisible, setParametersVisible] = useState(true);
+    const [dismissedRenderId, setDismissedRenderId] = useState(null);
+    const [output, setOutput] = useState(null);
+    const flipped = toggles.renderId === renderId ? toggles.flipped : NO_FLIPS;
+    const toggle = useCallback((toggleId) => {
+        setToggles(previous => ({
+            renderId,
+            flipped: flipToggle(previous.renderId === renderId ? previous.flipped : NO_FLIPS, toggleId)
+        }));
+        if (onView)
+            onView(toggledIds(flipped, toggleId), pageNumber);
+    }, [renderId, onView, flipped, pageNumber]);
+    const setFlipped = useCallback((toggleIds) => {
+        setToggles({ renderId, flipped: new Set(toggleIds) });
+    }, [renderId]);
+    const goToPage = useCallback((target) => {
+        if (onView && flipped.size > 0) {
+            onView(flippedToggleIds(flipped), target);
+        }
+        else {
+            onPage(target);
+        }
+    }, [onView, onPage, flipped]);
+    // With server toggles the page arrives already drawn for the flipped toggles, so nothing is flipped again here.
+    const drawnFlips = serverToggles ? NO_FLIPS : flipped;
+    const findMatches = useMemo(() => (page ? findInPage(page, findText, drawnFlips) : []), [page, findText, drawnFlips]);
+    const findKey = `${renderId ?? ""}|${page?.Number ?? 0}|${findText}`;
+    const findIndex = activeMatchIndex(find.index, find.key === findKey, findMatches.length);
+    const findNext = useCallback(() => {
+        setFind({ key: findKey, index: nextMatchIndex(findIndex, findMatches.length) });
+    }, [findKey, findIndex, findMatches.length]);
+    const toggleParameters = useCallback(() => setParametersVisible(visible => !visible), []);
+    const closePermissionDialog = useCallback(() => setDismissedRenderId(renderId), [renderId]);
+    // A new render (refresh, sort) drops a question asked about the previous one.
+    const pendingOutput = output && output.renderId === renderId ? output.action : null;
+    const runOutput = useCallback((action) => {
+        const toggleIds = flippedToggleIds(flipped);
+        if (action.kind === "print") {
+            onPrint(toggleIds);
+        }
+        else {
+            onExport(action.format, toggleIds);
+        }
+    }, [flipped, onPrint, onExport]);
+    const requestOutput = useCallback((action) => {
+        if (needsOutputConfirmation(warnings)) {
+            setOutput({ renderId, action });
+        }
+        else {
+            runOutput(action);
+        }
+    }, [warnings, renderId, runOutput]);
+    const confirmOutput = useCallback(() => {
+        setOutput(null);
+        if (pendingOutput)
+            runOutput(pendingOutput);
+    }, [pendingOutput, runOutput]);
+    const cancelOutput = useCallback(() => setOutput(null), []);
+    return {
+        result,
+        serverToggles,
+        zoom,
+        setZoom,
+        flipped,
+        drawnFlips,
+        toggle,
+        setFlipped,
+        goToPage,
+        findText,
+        setFindText,
+        findMatches,
+        findIndex,
+        findNext,
+        parametersVisible,
+        toggleParameters,
+        permissionDialogOpen: !!result?.PermissionDenied && dismissedRenderId !== renderId,
+        closePermissionDialog,
+        pendingOutput,
+        requestOutput,
+        confirmOutput,
+        cancelOutput
+    };
+}
+function stateFor(form) {
+    return { source: form, edits: initialParameterEdits(form?.Parameters ?? []), pending: new Set(), showErrors: false };
+}
+/**
+ * Editor state of the report parameter form, owned by the host and handed to `CwReportParameterForm`
+ * as `controller`. A new form object from the host (after a resolve) resets the editors to the values
+ * it carries; the server echoes the submitted values, so nothing is lost.
+ */
+function useReportParameterForm(form, options) {
+    const { onResolve, onRender } = options;
+    const [state, setState] = useState(() => stateFor(form));
+    const current = state.source === form ? state : stateFor(form);
+    if (current !== state)
+        setState(current);
+    const parameters = form?.Parameters ?? [];
+    const setEdit = useCallback((name, edit, commit) => {
+        const params = form?.Parameters ?? [];
+        const edits = { ...current.edits, [name]: edit };
+        const pending = new Set(current.pending);
+        if (commit) {
+            pending.delete(name);
+        }
+        else {
+            pending.add(name);
+        }
+        setState({ ...current, edits, pending });
+        if (commit && hasDependentParameters(params, name))
+            onResolve(toRdlParameterValues(params, edits));
+    }, [current, form, onResolve]);
+    const commit = useCallback((name) => {
+        if (!current.pending.has(name))
+            return;
+        const params = form?.Parameters ?? [];
+        const pending = new Set(current.pending);
+        pending.delete(name);
+        setState({ ...current, pending });
+        if (hasDependentParameters(params, name))
+            onResolve(toRdlParameterValues(params, current.edits));
+    }, [current, form, onResolve]);
+    const submit = useCallback(() => {
+        const params = form?.Parameters ?? [];
+        const errors = validateParameterEdits(params, current.edits);
+        if (Object.keys(errors).length > 0) {
+            setState({ ...current, showErrors: true });
+            return;
+        }
+        onRender(toRdlParameterValues(params, current.edits));
+    }, [current, form, onRender]);
+    return {
+        form,
+        edits: current.edits,
+        errors: current.showErrors ? validateParameterEdits(parameters, current.edits) : {},
+        setEdit,
+        commit,
+        submit
+    };
+}
 /**
  * API-backed airport search input for WinOps.
  *
@@ -10532,4 +12873,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 { 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 };
+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, CwReportGauge, CwReportLineChart, CwReportModal, CwReportPage, CwReportParameterForm, CwReportPieChart, CwReportToolbar, CwReportViewer, 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, REPORT_ZOOM_STEPS, Scheduler, SchedulerEvent, SuperScheduler, TooltipConstraintContext, UiEvent, Weekdays, configureCwLoading, eventIsVisible, filterNavItems, filterVisibleEvents, findInPage, flipToggle, getCwLoadingDefaults, getDefaultDivisions, getEventSizes, getPresetsByKeysTemporal, initialParameterEdits, isRdlVisible, itemsToMultiFilterTags, sortNavItems, toRdlParameterValues, useCwMessage, useReportParameterForm, useReportViewerState, useSortableList, useSortableTable, useTooltipConstraint };