@cwellt_software/cwellt-reactjs-lib 1.6.3 → 1.7.0

package/dist/index.es.js

@@ -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","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"};
+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
@@ -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, color: chip.color, 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 })] }));
 }
 
 /*
@@ -2379,7 +2379,7 @@ function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10,
                                 }, 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.
@@ -2442,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.
@@ -2545,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) })] }))] }));
 }
 
 /**
@@ -2750,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) {
@@ -2804,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 })] }));
 }
 
 /**
@@ -2836,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
@@ -2880,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' })) })] }));
 };
 
 /*
@@ -2925,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);
@@ -2988,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));
         }) }));
 }
 
@@ -3123,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',
@@ -3309,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();
@@ -3322,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 }))] }))] }));
 }
 
 /**
@@ -3375,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 });
@@ -3578,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);
@@ -3717,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)] }));
 };
 
 /**
@@ -3976,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",
@@ -4055,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 })] }));
 }
 
 /**
@@ -4187,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);
@@ -4385,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) {
@@ -4448,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 })] }));
 }
 
 /**
@@ -4482,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) {
@@ -4623,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
@@ -4737,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)))] })] }) }));
 }
 
 /**
@@ -4759,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.
@@ -4838,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) {
@@ -4856,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), 
@@ -4872,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.
@@ -5113,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": {
@@ -5142,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
@@ -5168,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.
@@ -5319,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());
@@ -5390,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);
@@ -5405,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) => {
@@ -5429,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;
@@ -5497,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 }));
@@ -5509,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"};
@@ -5681,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`
@@ -5945,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;
@@ -6089,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)] }));
 };
 
 /**
@@ -6169,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.
@@ -6201,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))) }) })] }));
 }
 
 /**
@@ -6269,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.
@@ -6299,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));
         }) }));
 }
 
@@ -6344,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.
@@ -6584,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",
@@ -7233,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",
@@ -7406,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] })] }) }));
@@ -7717,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"};
@@ -7973,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",
@@ -8208,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",
@@ -8509,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
@@ -8961,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",
@@ -9108,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();
@@ -9137,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
@@ -9166,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);
@@ -9208,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","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"};
+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);
@@ -9235,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) => {
@@ -9403,7 +9403,7 @@ 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: {
@@ -9412,7 +9412,7 @@ const DefaultRowHeader = ({ value, width, onEvent }) => {
             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 }) => {
@@ -9502,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"], "data-underlay": value.underlay ? true : undefined, children: [value.underlay && jsx("div", { className: styles$2["underlay"], children: value.underlay }), 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",
@@ -9513,13 +9513,13 @@ 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", { className: value.underlay ? styles$2["label-halo"] : undefined, style: {
+                                                    }, children: value.icons }), jsx("span", { className: value.underlay ? styles$5["label-halo"] : undefined, style: {
                                                         padding: "0.1rem",
                                                         color: textColor,
                                                         display: "flex",
@@ -9527,13 +9527,13 @@ const SchedulerEvent = ({ value, heightRem, onEvent, maxEventHeightRem }) => {
                                                         alignItems: "center",
                                                         width: "100%",
                                                         ...(value.underlay && { "--label-halo-color": backColor }),
-                                                    }, 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.label ?? value.name) })] }), value.isResizable && (jsx(EventSideDrag, { heightRem: effectiveHeight * 0.7, onStartEvent: () => {
+                                                    }, 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.cornerMarker && (jsx("div", { className: styles$2["corner-marker"], style: {
+                                    } }))] }) }) }, value.id) }), value.cornerMarker && (jsx("div", { className: styles$5["corner-marker"], style: {
                     top: `${topOffsetPx}px`,
                     left: `${value.left}%`,
                     width: `${value.width}%`,
@@ -10067,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;
@@ -10101,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, }) => {
@@ -10121,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.
  *
@@ -10555,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 };