@pega/cosmos-react-wss 10.0.0-build.9.8 → 10.0.0-build.9.9

package/lib/components/ModernCaseView/ModernCaseView.d.ts

@@ -0,0 +1,6 @@
+import type { PropsWithoutRef } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { CaseViewProps } from '../CaseView/CaseView.types';
+declare const ModernCaseView: ({ caseId, heading, subheading, icon, color, actions, stages, tasks, summary, details, tabs: detailTabs, feed, utility, promotedActions, showPulse, showUtility, isCreateStage, ...restProps }: PropsWithoutRef<CaseViewProps> & ForwardProps) => import("react/jsx-runtime").JSX.Element;
+export default ModernCaseView;
+//# sourceMappingURL=ModernCaseView.d.ts.map

package/lib/components/ModernCaseView/ModernCaseView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModernCaseView.d.ts","sourceRoot":"","sources":["../../../src/components/ModernCaseView/ModernCaseView.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,eAAe,EAAE,MAAM,OAAO,CAAC;AAoBzD,OAAO,KAAK,EAAE,YAAY,EAAO,MAAM,yBAAyB,CAAC;AAGjE,OAAO,KAAK,EAAE,aAAa,EAAU,MAAM,4BAA4B,CAAC;AAoBxE,QAAA,MAAM,cAAc,GAAI,+LAmBrB,eAAe,CAAC,aAAa,CAAC,GAAG,YAAY,4CAgZ/C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/ModernCaseView/ModernCaseView.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parseToHsl } from 'polished';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { CardContent, Flex, Icon, MenuButton, MetaList, TabPanel, Tabs, Text, getEdge, readableColor, throttle, tryCatch, useBreakpoint, useDirection, useI18n, useTheme } from '@pega/cosmos-react-core';
+import { resolveCaseTypeColor } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';
+import { StyledModernCaseHeader, StyledModernCaseHeaderPromotedAction, StyledModernCaseHeaderText, StyledModernCaseSubheading, StyledModernCaseView, StyledModernCaseViewIcon, StyledModernContent, StyledModernContentContainer, StyledModernStagesContainer, StyledModernSummary, StyledModernSummaryCard, StyledModernSummaryFieldsDivider, StyledModernSummaryPrimaryList, StyledModernSummarySecondaryList, resolveModernCaseViewIconColor } from './ModernCaseView.styles';
+const ModernCaseView = ({ caseId, heading, subheading, icon, color, actions, stages, tasks, summary, details, tabs: detailTabs, feed, utility, promotedActions = [], showPulse = true, showUtility = true, isCreateStage = false, ...restProps }) => {
+    const t = useI18n();
+    const theme = useTheme();
+    const { ltr } = useDirection();
+    const isSmallOrAbove = useBreakpoint('sm');
+    const isMediumOrAbove = useBreakpoint('md');
+    const tabsRef = useRef(null);
+    const singleRegionRef = useRef(null);
+    const restoreTabFocus = useRef(false);
+    const contentEl = useRef(null);
+    const headerEl = useRef(null);
+    const actionsContainerEl = useRef(null);
+    const wrapActionsBreakpoint = useRef(null);
+    const [wrapPromotedActions, setWrapPromotedActions] = useState(false);
+    const setTabsRef = useCallback((element) => {
+        if (!element && tabsRef.current?.contains(document.activeElement)) {
+            restoreTabFocus.current = true;
+        }
+        tabsRef.current = element;
+    }, []);
+    const primarySummaryFields = summary?.primarySummaryFields ?? [];
+    const secondarySummaryFields = summary?.secondarySummaryFields ?? [];
+    const hasPrimarySummaryFields = primarySummaryFields.length > 0;
+    const hasSecondarySummaryFields = secondarySummaryFields.length > 0;
+    const hasSummaryFields = hasPrimarySummaryFields || hasSecondarySummaryFields;
+    const hasSummaryContent = Boolean(summary?.content);
+    const detailRegions = useMemo(() => {
+        if (detailTabs?.length)
+            return detailTabs;
+        return details ? [details] : [];
+    }, [detailTabs, details]);
+    const { iconForeground, iconBackground } = useMemo(() => {
+        const backgroundSetting = theme.components['case-view'].icon.background;
+        const foregroundSetting = theme.components['case-view'].icon.color;
+        const usesIconGradient = backgroundSetting.includes('var(--gradient-');
+        const resolvedIconBackground = backgroundSetting !== 'auto'
+            ? backgroundSetting
+            : tryCatch(() => {
+                const { lightness } = parseToHsl(theme.components['case-view'].header.background);
+                return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';
+            }, () => 'transparent');
+        let resolvedIconForeground = foregroundSetting !== 'auto'
+            ? foregroundSetting
+            : theme.components['case-view'].header['foreground-color'];
+        if (foregroundSetting === 'auto' && usesIconGradient) {
+            resolvedIconForeground = 'auto';
+        }
+        if (resolvedIconForeground === 'auto') {
+            const caseTypeIconColor = theme.base['case-type-colors'] !== 'ignored'
+                ? resolveCaseTypeColor(theme, color)
+                : undefined;
+            resolvedIconForeground = readableColor(usesIconGradient
+                ? resolveModernCaseViewIconColor(theme, color)
+                : caseTypeIconColor ?? resolvedIconBackground, { mode: 'light', level: 'AANonText' });
+        }
+        return { iconForeground: resolvedIconForeground, iconBackground: resolvedIconBackground };
+    }, [theme, color]);
+    const promotedActionButtons = useMemo(() => promotedActions.map(action => (_jsx(StyledModernCaseHeaderPromotedAction, { variant: 'secondary', href: action.href, disabled: action.disabled, onClick: (e) => action.onClick?.(action.id, e), "$color": color, children: action.text }, action.id))), [promotedActions, color]);
+    const summaryFieldsCard = useMemo(() => hasSummaryFields ? (_jsxs(StyledModernSummaryCard, { children: [hasPrimarySummaryFields && (_jsx(CardContent, { children: _jsx(StyledModernSummaryPrimaryList, { variant: 'stacked', fields: primarySummaryFields, "aria-label": t('primary_summary_fields'), "$isSmallOrAbove": isSmallOrAbove }) })), hasPrimarySummaryFields && hasSecondarySummaryFields && (_jsx(StyledModernSummaryFieldsDivider, {})), hasSecondarySummaryFields && (_jsx(CardContent, { children: _jsx(StyledModernSummarySecondaryList, { variant: 'stacked', fields: secondarySummaryFields, "aria-label": t('summary_fields'), "$isSmallOrAbove": isSmallOrAbove }) }))] })) : null, [
+        hasSummaryFields,
+        hasPrimarySummaryFields,
+        hasSecondarySummaryFields,
+        primarySummaryFields,
+        secondarySummaryFields,
+        isSmallOrAbove,
+        t
+    ]);
+    // Desktop: details + pulse + utilities. Mobile: summary is prepended as the first tab.
+    const bodyTabs = useMemo(() => {
+        const tabs = [];
+        if (!isSmallOrAbove) {
+            const summaryLabel = summary?.label ?? t('summary');
+            if (hasSummaryFields) {
+                tabs.push({
+                    id: 'summary',
+                    name: summaryLabel,
+                    content: { label: summaryLabel, content: summaryFieldsCard }
+                });
+            }
+            else if (summary?.content) {
+                tabs.push({ id: 'summary', name: summary.label, content: summary });
+            }
+        }
+        detailRegions.forEach((region, index) => {
+            if (!region.content)
+                return;
+            tabs.push({
+                id: region.id ? `details-id-${region.id}` : `details-index-${index}`,
+                name: region.label,
+                content: region
+            });
+        });
+        if (feed?.content && showPulse)
+            tabs.push({ id: 'pulse', name: feed.label, content: feed });
+        if (utility?.content && showUtility) {
+            tabs.push({ id: 'utilities', name: utility.label, content: utility });
+        }
+        return tabs;
+    }, [
+        isSmallOrAbove,
+        summary,
+        detailRegions,
+        feed,
+        utility,
+        summaryFieldsCard,
+        hasSummaryFields,
+        showPulse,
+        showUtility,
+        t
+    ]);
+    const [currentTabId, setCurrentTabId] = useState(() => bodyTabs[0]?.id ?? 'details');
+    useEffect(() => {
+        if (!bodyTabs.length)
+            return;
+        if (!bodyTabs.some(tab => tab.id === currentTabId)) {
+            setCurrentTabId(bodyTabs[0].id);
+        }
+    }, [bodyTabs, currentTabId]);
+    useLayoutEffect(() => {
+        if (restoreTabFocus.current) {
+            restoreTabFocus.current = false;
+            singleRegionRef.current?.focus();
+        }
+    }, [bodyTabs, isCreateStage]);
+    useLayoutEffect(() => {
+        wrapActionsBreakpoint.current = null;
+        setWrapPromotedActions(false);
+    }, [
+        promotedActions,
+        actions,
+        heading,
+        subheading,
+        icon,
+        color,
+        isSmallOrAbove,
+        isMediumOrAbove,
+        isCreateStage,
+        ltr
+    ]);
+    useLayoutEffect(() => {
+        if (!isSmallOrAbove || isCreateStage || !promotedActions.length)
+            return;
+        // Measure changed content after restoring the natural, unwrapped action row.
+        if (wrapPromotedActions && wrapActionsBreakpoint.current === null)
+            return;
+        if (!wrapPromotedActions &&
+            contentEl.current &&
+            actionsContainerEl.current &&
+            headerEl.current) {
+            const contentStart = getEdge({ el: contentEl.current, side: 'leading', ltr });
+            const headerGroupEnd = getEdge({ el: headerEl.current, side: 'trailing', ltr });
+            const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;
+            wrapActionsBreakpoint.current =
+                Math.abs(Math.ceil(contentStart) - Math.ceil(headerGroupEnd)) +
+                    Math.ceil(actionsContainerWidth);
+        }
+        const promotedActionsWrapHandler = () => {
+            if (wrapActionsBreakpoint.current !== null && contentEl.current) {
+                const availableWidth = Math.ceil(contentEl.current.offsetWidth) - 20;
+                setWrapPromotedActions(availableWidth < wrapActionsBreakpoint.current);
+            }
+        };
+        const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));
+        promotedActionsWrapHandler();
+        if (contentEl.current) {
+            resizeObserver.observe(contentEl.current, { box: 'border-box' });
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [
+        contentEl,
+        actionsContainerEl,
+        headerEl,
+        promotedActions,
+        actions,
+        heading,
+        subheading,
+        icon,
+        color,
+        wrapPromotedActions,
+        isSmallOrAbove,
+        isMediumOrAbove,
+        isCreateStage,
+        ltr
+    ]);
+    const showActions = !isCreateStage && (promotedActions.length > 0 || !!actions?.length);
+    const shouldWrapPromotedActions = !isSmallOrAbove || wrapPromotedActions;
+    const showDesktopSummary = !isCreateStage && isSmallOrAbove;
+    return (_jsxs(StyledModernCaseView, { "$isCreateStage": isCreateStage, ...(isCreateStage && { 'data-create-stage': '' }), ...restProps, children: [_jsx(StyledModernCaseHeader, { "$color": color, "$isSmallOrAbove": isSmallOrAbove, children: _jsxs(Flex, { container: { direction: 'column', gap: 2, pad: 2, alignItems: 'start' }, ref: contentEl, as: StyledModernContentContainer, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'start', gap: 2 }, item: { grow: 1 }, children: [_jsxs(Flex, { container: { gap: 2, alignItems: 'center' }, children: [icon && (_jsx(StyledModernCaseViewIcon, { name: icon, emphasized: true, foreground: iconForeground, background: iconBackground, "$color": color })), _jsxs(Flex, { as: StyledModernCaseHeaderText, container: { direction: 'column', alignItems: 'start', justify: 'center' }, item: { shrink: 1 }, ref: headerEl, children: [_jsx(Text, { variant: 'h1', children: heading }), subheading && (_jsx(StyledModernCaseSubheading, { "$color": color, children: Array.isArray(subheading) ? _jsx(MetaList, { items: subheading }) : subheading }))] })] }), showActions && (_jsxs(Flex, { container: { gap: 1 }, ref: actionsContainerEl, children: [!shouldWrapPromotedActions && promotedActionButtons, actions && actions.length > 0 && (_jsx(MenuButton, { icon: promotedActions.length > 0 || !isMediumOrAbove ? 'more' : undefined, iconOnly: promotedActions.length > 0 || !isMediumOrAbove, variant: 'simple', text: t('actions'), "aria-label": t('actions_for', [caseId]), menu: {
+                                                items: actions.map(action => ({
+                                                    ...action,
+                                                    primary: action.text,
+                                                    visual: action.icon ? _jsx(Icon, { name: action.icon }) : undefined
+                                                })),
+                                                scrollAt: 20
+                                            } }))] }))] }), shouldWrapPromotedActions && !isCreateStage && promotedActions.length > 0 && (_jsx(Flex, { item: { grow: 1 }, container: { justify: 'start', gap: 1, alignItems: 'center', wrap: 'wrap' }, children: promotedActionButtons }))] }) }), _jsxs(Flex, { container: { direction: 'column', gap: 2, pad: 2 }, as: StyledModernContentContainer, children: [!isCreateStage && stages?.content && (_jsx(StyledModernStagesContainer, { children: stages.content })), tasks?.content && (_jsx("div", { role: 'region', "aria-label": tasks.label, children: tasks.content })), showDesktopSummary && (hasSummaryFields || hasSummaryContent) && (_jsx(StyledModernSummary, { role: 'region', "aria-label": summary?.label ?? t('summary'), children: hasSummaryFields ? summaryFieldsCard : summary?.content })), !isCreateStage && bodyTabs.length === 1 && (_jsx(StyledModernContent, { role: 'region', "aria-label": bodyTabs[0].content.label, tabIndex: -1, ref: singleRegionRef, children: bodyTabs[0].content.content })), !isCreateStage && bodyTabs.length > 1 && (_jsxs("div", { children: [_jsx(Tabs, { tabs: bodyTabs, currentTabId: currentTabId, onTabClick: setCurrentTabId, ref: setTabsRef }), bodyTabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: currentTabId, tablistRef: tabsRef, children: _jsx(StyledModernContent, { children: tab.content.content }) }, tab.id)))] }))] })] }));
+};
+export default ModernCaseView;
+//# sourceMappingURL=ModernCaseView.js.map

package/lib/components/ModernCaseView/ModernCaseView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModernCaseView.js","sourceRoot":"","sources":["../../../src/components/ModernCaseView/ModernCaseView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG3F,OAAO,EACL,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,OAAO,EACP,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iEAAiE,CAAC;AAIvG,OAAO,EACL,sBAAsB,EACtB,oCAAoC,EACpC,0BAA0B,EAC1B,0BAA0B,EAC1B,oBAAoB,EACpB,wBAAwB,EACxB,mBAAmB,EACnB,4BAA4B,EAC5B,2BAA2B,EAC3B,mBAAmB,EACnB,uBAAuB,EACvB,gCAAgC,EAChC,8BAA8B,EAC9B,gCAAgC,EAChC,8BAA8B,EAC/B,MAAM,yBAAyB,CAAC;AAEjC,MAAM,cAAc,GAAG,CAAC,EACtB,MAAM,EACN,OAAO,EACP,UAAU,EACV,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,EACP,IAAI,EAAE,UAAU,EAChB,IAAI,EACJ,OAAO,EACP,eAAe,GAAG,EAAE,EACpB,SAAS,GAAG,IAAI,EAChB,WAAW,GAAG,IAAI,EAClB,aAAa,GAAG,KAAK,EACrB,GAAG,SAAS,EACkC,EAAE,EAAE;IAClD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACjD,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,qBAAqB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAE1D,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtE,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,OAA2B,EAAE,EAAE;QAC7D,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YAClE,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QACjC,CAAC;QACD,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,oBAAoB,GAAG,OAAO,EAAE,oBAAoB,IAAI,EAAE,CAAC;IACjE,MAAM,sBAAsB,GAAG,OAAO,EAAE,sBAAsB,IAAI,EAAE,CAAC;IACrE,MAAM,uBAAuB,GAAG,oBAAoB,CAAC,MAAM,GAAG,CAAC,CAAC;IAChE,MAAM,yBAAyB,GAAG,sBAAsB,CAAC,MAAM,GAAG,CAAC,CAAC;IACpE,MAAM,gBAAgB,GAAG,uBAAuB,IAAI,yBAAyB,CAAC;IAC9E,MAAM,iBAAiB,GAAG,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAEpD,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,UAAU,EAAE,MAAM;YAAE,OAAO,UAAU,CAAC;QAC1C,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAClC,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE1B,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QACtD,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;QACxE,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QACnE,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;QAEvE,MAAM,sBAAsB,GAC1B,iBAAiB,KAAK,MAAM;YAC1B,CAAC,CAAC,iBAAiB;YACnB,CAAC,CAAC,QAAQ,CACN,GAAG,EAAE;gBACH,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;gBAClF,OAAO,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,0BAA0B,CAAC;YAC9E,CAAC,EACD,GAAG,EAAE,CAAC,aAAa,CACpB,CAAC;QAER,IAAI,sBAAsB,GACxB,iBAAiB,KAAK,MAAM;YAC1B,CAAC,CAAC,iBAAiB;YACnB,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;QAE/D,IAAI,iBAAiB,KAAK,MAAM,IAAI,gBAAgB,EAAE,CAAC;YACrD,sBAAsB,GAAG,MAAM,CAAC;QAClC,CAAC;QAED,IAAI,sBAAsB,KAAK,MAAM,EAAE,CAAC;YACtC,MAAM,iBAAiB,GACrB,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,SAAS;gBAC1C,CAAC,CAAC,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC;gBACpC,CAAC,CAAC,SAAS,CAAC;YAChB,sBAAsB,GAAG,aAAa,CACpC,gBAAgB;gBACd,CAAC,CAAC,8BAA8B,CAAC,KAAK,EAAE,KAAK,CAAC;gBAC9C,CAAC,CAAC,iBAAiB,IAAI,sBAAsB,EAC/C,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,CACtC,CAAC;QACJ,CAAC;QAED,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,cAAc,EAAE,sBAAsB,EAAE,CAAC;IAC5F,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnB,MAAM,qBAAqB,GAAG,OAAO,CACnC,GAAG,EAAE,CACH,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC5B,KAAC,oCAAoC,IACnC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,YAErE,KAAK,YAEZ,MAAM,CAAC,IAAI,IAHP,MAAM,CAAC,EAAE,CAIuB,CACxC,CAAC,EACJ,CAAC,eAAe,EAAE,KAAK,CAAC,CACzB,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CACH,gBAAgB,CAAC,CAAC,CAAC,CACjB,MAAC,uBAAuB,eACrB,uBAAuB,IAAI,CAC1B,KAAC,WAAW,cACV,KAAC,8BAA8B,IAC7B,OAAO,EAAC,SAAS,EACjB,MAAM,EAAE,oBAAoB,gBAChB,CAAC,CAAC,wBAAwB,CAAC,qBACtB,cAAc,GAC/B,GACU,CACf,EACA,uBAAuB,IAAI,yBAAyB,IAAI,CACvD,KAAC,gCAAgC,KAAG,CACrC,EACA,yBAAyB,IAAI,CAC5B,KAAC,WAAW,cACV,KAAC,gCAAgC,IAC/B,OAAO,EAAC,SAAS,EACjB,MAAM,EAAE,sBAAsB,gBAClB,CAAC,CAAC,gBAAgB,CAAC,qBACd,cAAc,GAC/B,GACU,CACf,IACuB,CAC3B,CAAC,CAAC,CAAC,IAAI,EACV;QACE,gBAAgB;QAChB,uBAAuB;QACvB,yBAAyB;QACzB,oBAAoB;QACpB,sBAAsB;QACtB,cAAc;QACd,CAAC;KACF,CACF,CAAC;IAEF,uFAAuF;IACvF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,MAAM,IAAI,GAAyD,EAAE,CAAC;QAEtE,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,MAAM,YAAY,GAAG,OAAO,EAAE,KAAK,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC;YAEpD,IAAI,gBAAgB,EAAE,CAAC;gBACrB,IAAI,CAAC,IAAI,CAAC;oBACR,EAAE,EAAE,SAAS;oBACb,IAAI,EAAE,YAAY;oBAClB,OAAO,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,iBAAiB,EAAE;iBAC7D,CAAC,CAAC;YACL,CAAC;iBAAM,IAAI,OAAO,EAAE,OAAO,EAAE,CAAC;gBAC5B,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;YACtE,CAAC;QACH,CAAC;QAED,aAAa,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACtC,IAAI,CAAC,MAAM,CAAC,OAAO;gBAAE,OAAO;YAC5B,IAAI,CAAC,IAAI,CAAC;gBACR,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,KAAK,EAAE;gBACpE,IAAI,EAAE,MAAM,CAAC,KAAK;gBAClB,OAAO,EAAE,MAAM;aAChB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,IAAI,EAAE,OAAO,IAAI,SAAS;YAAE,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5F,IAAI,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,CAAC;YACpC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;QACxE,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE;QACD,cAAc;QACd,OAAO;QACP,aAAa;QACb,IAAI;QACJ,OAAO;QACP,iBAAiB;QACjB,gBAAgB;QAChB,SAAS;QACT,WAAW;QACX,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,SAAS,CAAC,CAAC;IAErF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,CAAC,MAAM;YAAE,OAAO;QAE7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,YAAY,CAAC,EAAE,CAAC;YACnD,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAClC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7B,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,eAAe,CAAC,OAAO,EAAE,CAAC;YAC5B,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;YAChC,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QACnC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9B,eAAe,CAAC,GAAG,EAAE;QACnB,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;QACrC,sBAAsB,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE;QACD,eAAe;QACf,OAAO;QACP,OAAO;QACP,UAAU;QACV,IAAI;QACJ,KAAK;QACL,cAAc;QACd,eAAe;QACf,aAAa;QACb,GAAG;KACJ,CAAC,CAAC;IAEH,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,cAAc,IAAI,aAAa,IAAI,CAAC,eAAe,CAAC,MAAM;YAAE,OAAO;QACxE,6EAA6E;QAC7E,IAAI,mBAAmB,IAAI,qBAAqB,CAAC,OAAO,KAAK,IAAI;YAAE,OAAO;QAE1E,IACE,CAAC,mBAAmB;YACpB,SAAS,CAAC,OAAO;YACjB,kBAAkB,CAAC,OAAO;YAC1B,QAAQ,CAAC,OAAO,EAChB,CAAC;YACD,MAAM,YAAY,GAAG,OAAO,CAAC,EAAE,EAAE,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC;YAC9E,MAAM,cAAc,GAAG,OAAO,CAAC,EAAE,EAAE,EAAE,QAAQ,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC;YAChF,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAEvF,qBAAqB,CAAC,OAAO;gBAC3B,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;oBAC7D,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACrC,CAAC;QAED,MAAM,0BAA0B,GAAG,GAAG,EAAE;YACtC,IAAI,qBAAqB,CAAC,OAAO,KAAK,IAAI,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBAChE,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC;gBACrE,sBAAsB,CAAC,cAAc,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;YACzE,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAAC,CAAC;QACpF,0BAA0B,EAAE,CAAC;QAE7B,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,CAAC;QACnE,CAAC;QAED,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE;QACD,SAAS;QACT,kBAAkB;QAClB,QAAQ;QACR,eAAe;QACf,OAAO;QACP,OAAO;QACP,UAAU;QACV,IAAI;QACJ,KAAK;QACL,mBAAmB;QACnB,cAAc;QACd,eAAe;QACf,aAAa;QACb,GAAG;KACJ,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,CAAC,aAAa,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACxF,MAAM,yBAAyB,GAAG,CAAC,cAAc,IAAI,mBAAmB,CAAC;IACzE,MAAM,kBAAkB,GAAG,CAAC,aAAa,IAAI,cAAc,CAAC;IAE5D,OAAO,CACL,MAAC,oBAAoB,sBACH,aAAa,KACzB,CAAC,aAAa,IAAI,EAAE,mBAAmB,EAAE,EAAE,EAAE,CAAC,KAC9C,SAAS,aAEb,KAAC,sBAAsB,cAAS,KAAK,qBAAmB,cAAc,YACpE,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,EACvE,GAAG,EAAE,SAAS,EACd,EAAE,EAAE,4BAA4B,aAEhC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aACrF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC9C,IAAI,IAAI,CACP,KAAC,wBAAwB,IACvB,IAAI,EAAE,IAAI,EACV,UAAU,QACV,UAAU,EAAE,cAAc,EAC1B,UAAU,EAAE,cAAc,YAClB,KAAK,GACb,CACH,EAED,MAAC,IAAI,IACH,EAAE,EAAE,0BAA0B,EAC9B,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAC1E,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,GAAG,EAAE,QAAQ,aAEb,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,GAAQ,EAElC,UAAU,IAAI,CACb,KAAC,0BAA0B,cAAS,KAAK,YACtC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC,CAAC,UAAU,GAC9C,CAC9B,IACI,IACF,EAEN,WAAW,IAAI,CACd,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,kBAAkB,aACjD,CAAC,yBAAyB,IAAI,qBAAqB,EAEnD,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,KAAC,UAAU,IACT,IAAI,EAAE,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACzE,QAAQ,EAAE,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,eAAe,EACxD,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,gBACN,CAAC,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC,CAAC,EACtC,IAAI,EAAE;gDACJ,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;oDAC5B,GAAG,MAAM;oDACT,OAAO,EAAE,MAAM,CAAC,IAAI;oDACpB,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,CAAC,CAAC,CAAC,SAAS;iDAC9D,CAAC,CAAC;gDACH,QAAQ,EAAE,EAAE;6CACb,GACD,CACH,IACI,CACR,IACI,EAEN,yBAAyB,IAAI,CAAC,aAAa,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5E,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,YAE1E,qBAAqB,GACjB,CACR,IACI,GACgB,EAEzB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,4BAA4B,aACvF,CAAC,aAAa,IAAI,MAAM,EAAE,OAAO,IAAI,CACpC,KAAC,2BAA2B,cAAE,MAAM,CAAC,OAAO,GAA+B,CAC5E,EAEA,KAAK,EAAE,OAAO,IAAI,CACjB,cAAK,IAAI,EAAC,QAAQ,gBAAa,KAAK,CAAC,KAAK,YACvC,KAAK,CAAC,OAAO,GACV,CACP,EAEA,kBAAkB,IAAI,CAAC,gBAAgB,IAAI,iBAAiB,CAAC,IAAI,CAChE,KAAC,mBAAmB,IAAC,IAAI,EAAC,QAAQ,gBAAa,OAAO,EAAE,KAAK,IAAI,CAAC,CAAC,SAAS,CAAC,YAC1E,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,GACpC,CACvB,EAEA,CAAC,aAAa,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CAC1C,KAAC,mBAAmB,IAClB,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,EACrC,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,eAAe,YAEnB,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,GACR,CACvB,EAEA,CAAC,aAAa,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CACxC,0BACE,KAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,eAAe,EAC3B,GAAG,EAAE,UAAU,GACf,EAED,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACnB,KAAC,QAAQ,IACP,KAAK,EAAE,GAAG,CAAC,EAAE,EACb,YAAY,EAAE,YAAY,EAE1B,UAAU,EAAE,OAAO,YAEnB,KAAC,mBAAmB,cAAE,GAAG,CAAC,OAAO,CAAC,OAAO,GAAuB,IAH3D,GAAG,CAAC,EAAE,CAIF,CACZ,CAAC,IACE,CACP,IACI,IACc,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { parseToHsl } from 'polished';\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n  CardContent,\n  Flex,\n  Icon,\n  MenuButton,\n  MetaList,\n  TabPanel,\n  Tabs,\n  Text,\n  getEdge,\n  readableColor,\n  throttle,\n  tryCatch,\n  useBreakpoint,\n  useDirection,\n  useI18n,\n  useTheme\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, Tab } from '@pega/cosmos-react-core';\nimport { resolveCaseTypeColor } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\n\nimport type { CaseViewProps, Region } from '../CaseView/CaseView.types';\n\nimport {\n  StyledModernCaseHeader,\n  StyledModernCaseHeaderPromotedAction,\n  StyledModernCaseHeaderText,\n  StyledModernCaseSubheading,\n  StyledModernCaseView,\n  StyledModernCaseViewIcon,\n  StyledModernContent,\n  StyledModernContentContainer,\n  StyledModernStagesContainer,\n  StyledModernSummary,\n  StyledModernSummaryCard,\n  StyledModernSummaryFieldsDivider,\n  StyledModernSummaryPrimaryList,\n  StyledModernSummarySecondaryList,\n  resolveModernCaseViewIconColor\n} from './ModernCaseView.styles';\n\nconst ModernCaseView = ({\n  caseId,\n  heading,\n  subheading,\n  icon,\n  color,\n  actions,\n  stages,\n  tasks,\n  summary,\n  details,\n  tabs: detailTabs,\n  feed,\n  utility,\n  promotedActions = [],\n  showPulse = true,\n  showUtility = true,\n  isCreateStage = false,\n  ...restProps\n}: PropsWithoutRef<CaseViewProps> & ForwardProps) => {\n  const t = useI18n();\n  const theme = useTheme();\n  const { ltr } = useDirection();\n\n  const isSmallOrAbove = useBreakpoint('sm');\n  const isMediumOrAbove = useBreakpoint('md');\n\n  const tabsRef = useRef<HTMLElement | null>(null);\n  const singleRegionRef = useRef<HTMLDivElement>(null);\n  const restoreTabFocus = useRef(false);\n  const contentEl = useRef<HTMLDivElement>(null);\n  const headerEl = useRef<HTMLDivElement>(null);\n  const actionsContainerEl = useRef<HTMLDivElement>(null);\n  const wrapActionsBreakpoint = useRef<number | null>(null);\n\n  const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n\n  const setTabsRef = useCallback((element: HTMLElement | null) => {\n    if (!element && tabsRef.current?.contains(document.activeElement)) {\n      restoreTabFocus.current = true;\n    }\n    tabsRef.current = element;\n  }, []);\n\n  const primarySummaryFields = summary?.primarySummaryFields ?? [];\n  const secondarySummaryFields = summary?.secondarySummaryFields ?? [];\n  const hasPrimarySummaryFields = primarySummaryFields.length > 0;\n  const hasSecondarySummaryFields = secondarySummaryFields.length > 0;\n  const hasSummaryFields = hasPrimarySummaryFields || hasSecondarySummaryFields;\n  const hasSummaryContent = Boolean(summary?.content);\n\n  const detailRegions = useMemo(() => {\n    if (detailTabs?.length) return detailTabs;\n    return details ? [details] : [];\n  }, [detailTabs, details]);\n\n  const { iconForeground, iconBackground } = useMemo(() => {\n    const backgroundSetting = theme.components['case-view'].icon.background;\n    const foregroundSetting = theme.components['case-view'].icon.color;\n    const usesIconGradient = backgroundSetting.includes('var(--gradient-');\n\n    const resolvedIconBackground =\n      backgroundSetting !== 'auto'\n        ? backgroundSetting\n        : tryCatch(\n            () => {\n              const { lightness } = parseToHsl(theme.components['case-view'].header.background);\n              return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n            },\n            () => 'transparent'\n          );\n\n    let resolvedIconForeground =\n      foregroundSetting !== 'auto'\n        ? foregroundSetting\n        : theme.components['case-view'].header['foreground-color'];\n\n    if (foregroundSetting === 'auto' && usesIconGradient) {\n      resolvedIconForeground = 'auto';\n    }\n\n    if (resolvedIconForeground === 'auto') {\n      const caseTypeIconColor =\n        theme.base['case-type-colors'] !== 'ignored'\n          ? resolveCaseTypeColor(theme, color)\n          : undefined;\n      resolvedIconForeground = readableColor(\n        usesIconGradient\n          ? resolveModernCaseViewIconColor(theme, color)\n          : caseTypeIconColor ?? resolvedIconBackground,\n        { mode: 'light', level: 'AANonText' }\n      );\n    }\n\n    return { iconForeground: resolvedIconForeground, iconBackground: resolvedIconBackground };\n  }, [theme, color]);\n\n  const promotedActionButtons = useMemo(\n    () =>\n      promotedActions.map(action => (\n        <StyledModernCaseHeaderPromotedAction\n          variant='secondary'\n          href={action.href}\n          disabled={action.disabled}\n          onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n          key={action.id}\n          $color={color}\n        >\n          {action.text}\n        </StyledModernCaseHeaderPromotedAction>\n      )),\n    [promotedActions, color]\n  );\n\n  const summaryFieldsCard = useMemo(\n    () =>\n      hasSummaryFields ? (\n        <StyledModernSummaryCard>\n          {hasPrimarySummaryFields && (\n            <CardContent>\n              <StyledModernSummaryPrimaryList\n                variant='stacked'\n                fields={primarySummaryFields}\n                aria-label={t('primary_summary_fields')}\n                $isSmallOrAbove={isSmallOrAbove}\n              />\n            </CardContent>\n          )}\n          {hasPrimarySummaryFields && hasSecondarySummaryFields && (\n            <StyledModernSummaryFieldsDivider />\n          )}\n          {hasSecondarySummaryFields && (\n            <CardContent>\n              <StyledModernSummarySecondaryList\n                variant='stacked'\n                fields={secondarySummaryFields}\n                aria-label={t('summary_fields')}\n                $isSmallOrAbove={isSmallOrAbove}\n              />\n            </CardContent>\n          )}\n        </StyledModernSummaryCard>\n      ) : null,\n    [\n      hasSummaryFields,\n      hasPrimarySummaryFields,\n      hasSecondarySummaryFields,\n      primarySummaryFields,\n      secondarySummaryFields,\n      isSmallOrAbove,\n      t\n    ]\n  );\n\n  // Desktop: details + pulse + utilities. Mobile: summary is prepended as the first tab.\n  const bodyTabs = useMemo(() => {\n    const tabs: { id: string; name: Tab['name']; content: Region }[] = [];\n\n    if (!isSmallOrAbove) {\n      const summaryLabel = summary?.label ?? t('summary');\n\n      if (hasSummaryFields) {\n        tabs.push({\n          id: 'summary',\n          name: summaryLabel,\n          content: { label: summaryLabel, content: summaryFieldsCard }\n        });\n      } else if (summary?.content) {\n        tabs.push({ id: 'summary', name: summary.label, content: summary });\n      }\n    }\n\n    detailRegions.forEach((region, index) => {\n      if (!region.content) return;\n      tabs.push({\n        id: region.id ? `details-id-${region.id}` : `details-index-${index}`,\n        name: region.label,\n        content: region\n      });\n    });\n\n    if (feed?.content && showPulse) tabs.push({ id: 'pulse', name: feed.label, content: feed });\n    if (utility?.content && showUtility) {\n      tabs.push({ id: 'utilities', name: utility.label, content: utility });\n    }\n\n    return tabs;\n  }, [\n    isSmallOrAbove,\n    summary,\n    detailRegions,\n    feed,\n    utility,\n    summaryFieldsCard,\n    hasSummaryFields,\n    showPulse,\n    showUtility,\n    t\n  ]);\n\n  const [currentTabId, setCurrentTabId] = useState(() => bodyTabs[0]?.id ?? 'details');\n\n  useEffect(() => {\n    if (!bodyTabs.length) return;\n\n    if (!bodyTabs.some(tab => tab.id === currentTabId)) {\n      setCurrentTabId(bodyTabs[0].id);\n    }\n  }, [bodyTabs, currentTabId]);\n\n  useLayoutEffect(() => {\n    if (restoreTabFocus.current) {\n      restoreTabFocus.current = false;\n      singleRegionRef.current?.focus();\n    }\n  }, [bodyTabs, isCreateStage]);\n\n  useLayoutEffect(() => {\n    wrapActionsBreakpoint.current = null;\n    setWrapPromotedActions(false);\n  }, [\n    promotedActions,\n    actions,\n    heading,\n    subheading,\n    icon,\n    color,\n    isSmallOrAbove,\n    isMediumOrAbove,\n    isCreateStage,\n    ltr\n  ]);\n\n  useLayoutEffect(() => {\n    if (!isSmallOrAbove || isCreateStage || !promotedActions.length) return;\n    // Measure changed content after restoring the natural, unwrapped action row.\n    if (wrapPromotedActions && wrapActionsBreakpoint.current === null) return;\n\n    if (\n      !wrapPromotedActions &&\n      contentEl.current &&\n      actionsContainerEl.current &&\n      headerEl.current\n    ) {\n      const contentStart = getEdge({ el: contentEl.current, side: 'leading', ltr });\n      const headerGroupEnd = getEdge({ el: headerEl.current, side: 'trailing', ltr });\n      const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n      wrapActionsBreakpoint.current =\n        Math.abs(Math.ceil(contentStart) - Math.ceil(headerGroupEnd)) +\n        Math.ceil(actionsContainerWidth);\n    }\n\n    const promotedActionsWrapHandler = () => {\n      if (wrapActionsBreakpoint.current !== null && contentEl.current) {\n        const availableWidth = Math.ceil(contentEl.current.offsetWidth) - 20;\n        setWrapPromotedActions(availableWidth < wrapActionsBreakpoint.current);\n      }\n    };\n\n    const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n    promotedActionsWrapHandler();\n\n    if (contentEl.current) {\n      resizeObserver.observe(contentEl.current, { box: 'border-box' });\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [\n    contentEl,\n    actionsContainerEl,\n    headerEl,\n    promotedActions,\n    actions,\n    heading,\n    subheading,\n    icon,\n    color,\n    wrapPromotedActions,\n    isSmallOrAbove,\n    isMediumOrAbove,\n    isCreateStage,\n    ltr\n  ]);\n\n  const showActions = !isCreateStage && (promotedActions.length > 0 || !!actions?.length);\n  const shouldWrapPromotedActions = !isSmallOrAbove || wrapPromotedActions;\n  const showDesktopSummary = !isCreateStage && isSmallOrAbove;\n\n  return (\n    <StyledModernCaseView\n      $isCreateStage={isCreateStage}\n      {...(isCreateStage && { 'data-create-stage': '' })}\n      {...restProps}\n    >\n      <StyledModernCaseHeader $color={color} $isSmallOrAbove={isSmallOrAbove}>\n        <Flex\n          container={{ direction: 'column', gap: 2, pad: 2, alignItems: 'start' }}\n          ref={contentEl}\n          as={StyledModernContentContainer}\n        >\n          <Flex container={{ justify: 'between', alignItems: 'start', gap: 2 }} item={{ grow: 1 }}>\n            <Flex container={{ gap: 2, alignItems: 'center' }}>\n              {icon && (\n                <StyledModernCaseViewIcon\n                  name={icon}\n                  emphasized\n                  foreground={iconForeground}\n                  background={iconBackground}\n                  $color={color}\n                />\n              )}\n\n              <Flex\n                as={StyledModernCaseHeaderText}\n                container={{ direction: 'column', alignItems: 'start', justify: 'center' }}\n                item={{ shrink: 1 }}\n                ref={headerEl}\n              >\n                <Text variant='h1'>{heading}</Text>\n\n                {subheading && (\n                  <StyledModernCaseSubheading $color={color}>\n                    {Array.isArray(subheading) ? <MetaList items={subheading} /> : subheading}\n                  </StyledModernCaseSubheading>\n                )}\n              </Flex>\n            </Flex>\n\n            {showActions && (\n              <Flex container={{ gap: 1 }} ref={actionsContainerEl}>\n                {!shouldWrapPromotedActions && promotedActionButtons}\n\n                {actions && actions.length > 0 && (\n                  <MenuButton\n                    icon={promotedActions.length > 0 || !isMediumOrAbove ? 'more' : undefined}\n                    iconOnly={promotedActions.length > 0 || !isMediumOrAbove}\n                    variant='simple'\n                    text={t('actions')}\n                    aria-label={t('actions_for', [caseId])}\n                    menu={{\n                      items: actions.map(action => ({\n                        ...action,\n                        primary: action.text,\n                        visual: action.icon ? <Icon name={action.icon} /> : undefined\n                      })),\n                      scrollAt: 20\n                    }}\n                  />\n                )}\n              </Flex>\n            )}\n          </Flex>\n\n          {shouldWrapPromotedActions && !isCreateStage && promotedActions.length > 0 && (\n            <Flex\n              item={{ grow: 1 }}\n              container={{ justify: 'start', gap: 1, alignItems: 'center', wrap: 'wrap' }}\n            >\n              {promotedActionButtons}\n            </Flex>\n          )}\n        </Flex>\n      </StyledModernCaseHeader>\n\n      <Flex container={{ direction: 'column', gap: 2, pad: 2 }} as={StyledModernContentContainer}>\n        {!isCreateStage && stages?.content && (\n          <StyledModernStagesContainer>{stages.content}</StyledModernStagesContainer>\n        )}\n\n        {tasks?.content && (\n          <div role='region' aria-label={tasks.label}>\n            {tasks.content}\n          </div>\n        )}\n\n        {showDesktopSummary && (hasSummaryFields || hasSummaryContent) && (\n          <StyledModernSummary role='region' aria-label={summary?.label ?? t('summary')}>\n            {hasSummaryFields ? summaryFieldsCard : summary?.content}\n          </StyledModernSummary>\n        )}\n\n        {!isCreateStage && bodyTabs.length === 1 && (\n          <StyledModernContent\n            role='region'\n            aria-label={bodyTabs[0].content.label}\n            tabIndex={-1}\n            ref={singleRegionRef}\n          >\n            {bodyTabs[0].content.content}\n          </StyledModernContent>\n        )}\n\n        {!isCreateStage && bodyTabs.length > 1 && (\n          <div>\n            <Tabs\n              tabs={bodyTabs}\n              currentTabId={currentTabId}\n              onTabClick={setCurrentTabId}\n              ref={setTabsRef}\n            />\n\n            {bodyTabs.map(tab => (\n              <TabPanel\n                tabId={tab.id}\n                currentTabId={currentTabId}\n                key={tab.id}\n                tablistRef={tabsRef}\n              >\n                <StyledModernContent>{tab.content.content}</StyledModernContent>\n              </TabPanel>\n            ))}\n          </div>\n        )}\n      </Flex>\n    </StyledModernCaseView>\n  );\n};\n\nexport default ModernCaseView;\n"]}

package/lib/components/ModernCaseView/ModernCaseView.styles.d.ts

@@ -0,0 +1,39 @@
+import type { DefaultTheme } from 'styled-components';
+export declare const StyledModernCaseView: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isCreateStage?: boolean;
+}>> & string;
+export declare const StyledModernCaseHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
+    $color?: string;
+    $isSmallOrAbove?: boolean;
+}>> & string;
+export declare const StyledModernCaseSubheading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $color?: string;
+}>> & string;
+export declare const StyledModernCaseHeaderText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+/** Resolves `auto` accents to a solid palette color for the case icon gradient. */
+export declare const resolveModernCaseViewIconColor: (theme: DefaultTheme, color: string | undefined) => string;
+export declare const StyledModernCaseViewIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, {
+    $color?: string;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledModernCaseHeaderPromotedAction: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("@pega/cosmos-react-core").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, {
+    $color?: string;
+}>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledModernContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledModernContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledModernSummary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledModernSummaryFieldsDivider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>> & string;
+export declare const StyledModernSummaryPrimaryList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps, "wrapped"> & {
+    wrapped?: boolean;
+}, {
+    $isSmallOrAbove?: boolean;
+}>> & string;
+export declare const StyledModernSummarySecondaryList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps, never>, {
+    $isSmallOrAbove?: boolean;
+}>> & string;
+export declare const StyledModernSummaryCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").CardProps, "ref"> & import("react").RefAttributes<HTMLElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
+}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").CardProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledModernStagesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+//# sourceMappingURL=ModernCaseView.styles.d.ts.map

package/lib/components/ModernCaseView/ModernCaseView.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModernCaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ModernCaseView/ModernCaseView.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA4FtD,eAAO,MAAM,oBAAoB;qBAAiC,OAAO;YASxE,CAAC;AAIF,eAAO,MAAM,sBAAsB;aACxB,MAAM;sBACG,OAAO;YAczB,CAAC;AAIH,eAAO,MAAM,0BAA0B;aAAyB,MAAM;YAiBpE,CAAC;AAIH,eAAO,MAAM,0BAA0B,6NAEtC,CAAC;AAIF,mFAAmF;AACnF,eAAO,MAAM,8BAA8B,GACzC,OAAO,YAAY,EACnB,OAAO,MAAM,GAAG,SAAS,KACxB,MAUF,CAAC;AAEF,eAAO,MAAM,wBAAwB;aAA2B,MAAM;0JAoCpE,CAAC;AAIH,eAAO,MAAM,oCAAoC;;;aAA6B,MAAM;oLAyBlF,CAAC;AAIH,eAAO,MAAM,4BAA4B,6NAuBvC,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAO9B,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAO9B,CAAC;AAIH,eAAO,MAAM,gCAAgC,2NAO3C,CAAC;AAIH,eAAO,MAAM,8BAA8B;;;sBACvB,OAAO;YASzB,CAAC;AAIH,eAAO,MAAM,gCAAgC;sBACzB,OAAO;YAYzB,CAAC;AAIH,eAAO,MAAM,uBAAuB;;yLAclC,CAAC;AAIH,eAAO,MAAM,2BAA2B,6NAIvC,CAAC"}

package/lib/components/ModernCaseView/ModernCaseView.styles.js

@@ -0,0 +1,245 @@
+import styled, { css } from 'styled-components';
+import { getContrast, mix, rgba } from 'polished';
+import { Button, Card, Icon, StyledButton, StyledCard, StyledStackedFieldValue, calculateFontSize, calculateForegroundColor, defaultThemeProp, isSolidColor, readableColor, readableHue, tryCatch } from '@pega/cosmos-react-core';
+import { wcagContrast } from '@pega/cosmos-react-core/lib/styles/constants';
+import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
+import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
+import { StyledSummaryPrimaryList, StyledSummarySecondaryList, resolveCaseTypeColor } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';
+import { StyledStages } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';
+const getCaseTypeHeaderColors = (theme, color) => {
+    const resolvedCaseTypeColor = resolveCaseTypeColor(theme, color);
+    const headerBackground = resolvedCaseTypeColor &&
+        theme.base['case-type-colors'] === 'header-and-icon' &&
+        isSolidColor(theme.components.card.background)
+        ? tryCatch(() => mix(0.85, theme.components.card.background, resolvedCaseTypeColor), () => theme.components.card.background)
+        : theme.components['case-view'].header.background;
+    const foregroundColor = calculateForegroundColor(headerBackground, resolvedCaseTypeColor && theme.base['case-type-colors'] === 'header-and-icon'
+        ? 'auto'
+        : theme.components['case-view'].header['foreground-color'], theme);
+    return { headerBackground, foregroundColor };
+};
+const getModernCaseViewColors = (theme, color) => {
+    const { interactive } = theme.base.palette;
+    const { headerBackground, foregroundColor } = getCaseTypeHeaderColors(theme, color);
+    const isGradientBackground = !isSolidColor(headerBackground);
+    const elementBackground = isGradientBackground
+        ? readableColor(foregroundColor)
+        : headerBackground;
+    const interactiveUsable = getContrast(elementBackground, interactive) >= wcagContrast.AA;
+    const interactiveColor = !isGradientBackground && interactiveUsable ? interactive : foregroundColor;
+    const hoverBackground = !isGradientBackground && interactiveUsable
+        ? readableHue(interactive, interactiveColor)
+        : rgba(readableColor(interactiveColor), 0.15);
+    return {
+        headerBackground,
+        foregroundColor,
+        elementBackground,
+        interactiveColor,
+        hoverBackground
+    };
+};
+export const StyledModernCaseView = styled.div(({ $isCreateStage }) => css `
+    min-height: ${$isCreateStage ? 'calc(100vh - var(--appshell-total-offset, 3rem))' : 'inherit'};
+
+    ${StyledTabPanel}${StyledTabPanel}${StyledTabPanel} ${StyledCard} {
+      border: none;
+      padding: 0;
+    }
+  `);
+StyledModernCaseView.defaultProps = defaultThemeProp;
+export const StyledModernCaseHeader = styled.header(({ theme, $color, $isSmallOrAbove }) => {
+    const { headerBackground, foregroundColor } = getModernCaseViewColors(theme, $color);
+    return css `
+    position: relative;
+    background: ${headerBackground};
+    color: ${foregroundColor};
+
+    h1 {
+      color: ${foregroundColor};
+      min-width: ${$isSmallOrAbove ? theme.base['content-width'].xs : 'auto'};
+    }
+  `;
+});
+StyledModernCaseHeader.defaultProps = defaultThemeProp;
+export const StyledModernCaseSubheading = styled.div(({ theme, $color }) => {
+    const { foregroundColor } = getModernCaseViewColors(theme, $color);
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    color: ${foregroundColor};
+    font-size: ${fontSize.xs};
+    font-weight: normal;
+    margin: 0;
+
+    /* MetaList renders items as Text elements with explicit styles. */
+    && li {
+      color: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+    }
+  `;
+});
+StyledModernCaseSubheading.defaultProps = defaultThemeProp;
+export const StyledModernCaseHeaderText = styled.div `
+  word-break: break-word;
+`;
+StyledModernCaseHeaderText.defaultProps = defaultThemeProp;
+/** Resolves `auto` accents to a solid palette color for the case icon gradient. */
+export const resolveModernCaseViewIconColor = (theme, color) => {
+    const caseTypeColorsEnabled = theme.base['case-type-colors'] === 'icon-only' ||
+        theme.base['case-type-colors'] === 'header-and-icon';
+    const resolvedCaseTypeColor = caseTypeColorsEnabled
+        ? resolveCaseTypeColor(theme, color)
+        : undefined;
+    const accent = theme.base.palette['brand-accent'];
+    return resolvedCaseTypeColor ?? (accent === 'auto' ? theme.base.palette.dark : accent);
+};
+export const StyledModernCaseViewIcon = styled(Icon)(({ theme, $color }) => {
+    const caseTypeColorsEnabled = theme.base['case-type-colors'] === 'icon-only' ||
+        theme.base['case-type-colors'] === 'header-and-icon';
+    const resolvedCaseTypeColor = caseTypeColorsEnabled
+        ? resolveCaseTypeColor(theme, $color)
+        : undefined;
+    return css `
+    --icon-color: ${resolveModernCaseViewIconColor(theme, $color)};
+    --gradient-start: oklch(from var(--icon-color) calc(l - 0.3) calc(c * 1.5) h);
+    --gradient-mid: oklch(from var(--icon-color) l c h);
+    --gradient-end: oklch(from var(--icon-color) calc(l + 0.5) calc(c * 1.5) h);
+    flex-shrink: 0;
+
+    ${theme.components['case-view'].icon.color !== 'auto' &&
+        css `
+      color: ${theme.components['case-view'].icon.color};
+    `}
+
+    ${theme.components['case-view'].icon.background !== 'auto' &&
+        css `
+      background: ${theme.components['case-view'].icon.background};
+    `}
+
+    ${theme.components['case-view'].icon.background === 'auto' &&
+        resolvedCaseTypeColor &&
+        css `
+      background: ${resolvedCaseTypeColor};
+    `}
+
+    ${theme.components['case-view'].icon['box-shadow'] !== 'auto' &&
+        css `
+      box-shadow: ${theme.components['case-view'].icon['box-shadow']};
+    `}
+  `;
+});
+StyledModernCaseViewIcon.defaultProps = defaultThemeProp;
+export const StyledModernCaseHeaderPromotedAction = styled(Button)(({ theme, $color }) => {
+    const { elementBackground, interactiveColor, hoverBackground } = getModernCaseViewColors(theme, $color);
+    return css `
+    --button-background-color: ${elementBackground};
+    color: ${interactiveColor};
+    background-color: transparent;
+    border-color: ${interactiveColor};
+
+    @media (hover: hover) {
+      &:hover,
+      &:active {
+        --button-background-color: ${hoverBackground};
+        color: ${interactiveColor};
+        background-color: ${hoverBackground};
+        border-color: ${interactiveColor};
+      }
+    }
+  `;
+});
+StyledModernCaseHeaderPromotedAction.defaultProps = defaultThemeProp;
+export const StyledModernContentContainer = styled.div(({ theme }) => {
+    const { breakpoints } = theme.base;
+    return css `
+    width: 100%;
+    margin-inline: auto;
+
+    @media screen and (min-width: ${breakpoints.md}) {
+      width: 85%;
+    }
+
+    @media screen and (min-width: ${breakpoints.lg}) {
+      max-width: ${theme.base['content-width'].xl};
+    }
+
+    & > div {
+      width: 100%;
+    }
+
+    ${StyledButton} {
+      margin-inline-start: 0;
+    }
+  `;
+});
+StyledModernContentContainer.defaultProps = defaultThemeProp;
+export const StyledModernContent = styled.div(({ theme }) => {
+    return css `
+    ${StyledSummaryPrimaryList} {
+      grid-template-columns: auto 1fr;
+      column-gap: calc(2 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledModernContent.defaultProps = defaultThemeProp;
+export const StyledModernSummary = styled.div(({ theme }) => {
+    return css `
+    background: ${theme.components.card.background};
+    border-radius: ${theme.base['border-radius']};
+    padding: calc(${theme.base.spacing} * 1.5);
+    align-self: start;
+  `;
+});
+StyledModernSummary.defaultProps = defaultThemeProp;
+export const StyledModernSummaryFieldsDivider = styled.hr(({ theme }) => {
+    return css `
+    margin: 0 calc(2 * ${theme.base.spacing});
+    border: none;
+    border-block-start: ${theme.components.button['border-width']} solid
+      ${theme.base.palette['border-line']};
+  `;
+});
+StyledModernSummaryFieldsDivider.defaultProps = defaultThemeProp;
+export const StyledModernSummaryPrimaryList = styled(StyledSummaryPrimaryList)(({ theme, $isSmallOrAbove }) => {
+    return css `
+    &&& {
+      grid-template-columns: ${$isSmallOrAbove ? 'repeat(2, 1fr)' : '1fr'};
+      column-gap: calc(2 * ${theme.base.spacing});
+      row-gap: calc(2 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledModernSummaryPrimaryList.defaultProps = defaultThemeProp;
+export const StyledModernSummarySecondaryList = styled(StyledSummarySecondaryList)(({ theme, $isSmallOrAbove }) => {
+    return css `
+    &&& {
+      grid-template-columns: ${$isSmallOrAbove ? 'repeat(2, 1fr)' : '1fr'};
+      row-gap: calc(2 * ${theme.base.spacing});
+    }
+
+    ${StyledStackedFieldValue} {
+      grid-column: auto;
+    }
+  `;
+});
+StyledModernSummarySecondaryList.defaultProps = defaultThemeProp;
+export const StyledModernSummaryCard = styled(Card)(({ theme }) => {
+    const { base: { breakpoints, spacing } } = theme;
+    return css `
+    &&&& ${StyledCardContent} {
+      padding: calc(1.5 * ${spacing}) calc(${theme.components.card.padding} * 2);
+
+      @media (width < ${breakpoints.sm}) {
+        padding: ${spacing} calc(${theme.components.card.padding} * 1.5);
+      }
+    }
+  `;
+});
+StyledModernSummaryCard.defaultProps = defaultThemeProp;
+export const StyledModernStagesContainer = styled.div `
+  ${StyledStages} {
+    background: transparent;
+  }
+`;
+StyledModernStagesContainer.defaultProps = defaultThemeProp;
+//# sourceMappingURL=ModernCaseView.styles.js.map

package/lib/components/ModernCaseView/ModernCaseView.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModernCaseView.styles.js","sourceRoot":"","sources":["../../../src/components/ModernCaseView/ModernCaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { getContrast, mix, rgba } from 'polished';\n\nimport {\n  Button,\n  Card,\n  Icon,\n  StyledButton,\n  StyledCard,\n  StyledStackedFieldValue,\n  calculateFontSize,\n  calculateForegroundColor,\n  defaultThemeProp,\n  isSolidColor,\n  readableColor,\n  readableHue,\n  tryCatch\n} from '@pega/cosmos-react-core';\nimport { wcagContrast } from '@pega/cosmos-react-core/lib/styles/constants';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport {\n  StyledSummaryPrimaryList,\n  StyledSummarySecondaryList,\n  resolveCaseTypeColor\n} from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';\nimport { StyledStages } from '@pega/cosmos-react-work/lib/components/Stages/Stages.styles';\n\ninterface ModernCaseViewColors {\n  headerBackground: string;\n  foregroundColor: string;\n  elementBackground: string;\n  interactiveColor: string;\n  hoverBackground: string;\n}\n\nconst getCaseTypeHeaderColors = (\n  theme: DefaultTheme,\n  color: string | undefined\n): { headerBackground: string; foregroundColor: string } => {\n  const resolvedCaseTypeColor = resolveCaseTypeColor(theme, color);\n  const headerBackground =\n    resolvedCaseTypeColor &&\n    theme.base['case-type-colors'] === 'header-and-icon' &&\n    isSolidColor(theme.components.card.background)\n      ? tryCatch(\n          () => mix(0.85, theme.components.card.background, resolvedCaseTypeColor),\n          () => theme.components.card.background\n        )\n      : theme.components['case-view'].header.background;\n\n  const foregroundColor = calculateForegroundColor(\n    headerBackground,\n    resolvedCaseTypeColor && theme.base['case-type-colors'] === 'header-and-icon'\n      ? 'auto'\n      : theme.components['case-view'].header['foreground-color'],\n    theme\n  );\n\n  return { headerBackground, foregroundColor };\n};\n\nconst getModernCaseViewColors = (\n  theme: DefaultTheme,\n  color: string | undefined\n): ModernCaseViewColors => {\n  const { interactive } = theme.base.palette;\n  const { headerBackground, foregroundColor } = getCaseTypeHeaderColors(theme, color);\n\n  const isGradientBackground = !isSolidColor(headerBackground);\n  const elementBackground = isGradientBackground\n    ? readableColor(foregroundColor)\n    : headerBackground;\n\n  const interactiveUsable = getContrast(elementBackground, interactive) >= wcagContrast.AA;\n  const interactiveColor =\n    !isGradientBackground && interactiveUsable ? interactive : foregroundColor;\n\n  const hoverBackground =\n    !isGradientBackground && interactiveUsable\n      ? readableHue(interactive, interactiveColor)\n      : rgba(readableColor(interactiveColor), 0.15);\n\n  return {\n    headerBackground,\n    foregroundColor,\n    elementBackground,\n    interactiveColor,\n    hoverBackground\n  };\n};\n\nexport const StyledModernCaseView = styled.div<{ $isCreateStage?: boolean }>(\n  ({ $isCreateStage }) => css`\n    min-height: ${$isCreateStage ? 'calc(100vh - var(--appshell-total-offset, 3rem))' : 'inherit'};\n\n    ${StyledTabPanel}${StyledTabPanel}${StyledTabPanel} ${StyledCard} {\n      border: none;\n      padding: 0;\n    }\n  `\n);\n\nStyledModernCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledModernCaseHeader = styled.header<{\n  $color?: string;\n  $isSmallOrAbove?: boolean;\n}>(({ theme, $color, $isSmallOrAbove }) => {\n  const { headerBackground, foregroundColor } = getModernCaseViewColors(theme, $color);\n\n  return css`\n    position: relative;\n    background: ${headerBackground};\n    color: ${foregroundColor};\n\n    h1 {\n      color: ${foregroundColor};\n      min-width: ${$isSmallOrAbove ? theme.base['content-width'].xs : 'auto'};\n    }\n  `;\n});\n\nStyledModernCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledModernCaseSubheading = styled.div<{ $color?: string }>(({ theme, $color }) => {\n  const { foregroundColor } = getModernCaseViewColors(theme, $color);\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    color: ${foregroundColor};\n    font-size: ${fontSize.xs};\n    font-weight: normal;\n    margin: 0;\n\n    /* MetaList renders items as Text elements with explicit styles. */\n    && li {\n      color: inherit;\n      font-size: inherit;\n      font-weight: inherit;\n    }\n  `;\n});\n\nStyledModernCaseSubheading.defaultProps = defaultThemeProp;\n\nexport const StyledModernCaseHeaderText = styled.div`\n  word-break: break-word;\n`;\n\nStyledModernCaseHeaderText.defaultProps = defaultThemeProp;\n\n/** Resolves `auto` accents to a solid palette color for the case icon gradient. */\nexport const resolveModernCaseViewIconColor = (\n  theme: DefaultTheme,\n  color: string | undefined\n): string => {\n  const caseTypeColorsEnabled =\n    theme.base['case-type-colors'] === 'icon-only' ||\n    theme.base['case-type-colors'] === 'header-and-icon';\n  const resolvedCaseTypeColor = caseTypeColorsEnabled\n    ? resolveCaseTypeColor(theme, color)\n    : undefined;\n  const accent = theme.base.palette['brand-accent'];\n\n  return resolvedCaseTypeColor ?? (accent === 'auto' ? theme.base.palette.dark : accent);\n};\n\nexport const StyledModernCaseViewIcon = styled(Icon)<{ $color?: string }>(({ theme, $color }) => {\n  const caseTypeColorsEnabled =\n    theme.base['case-type-colors'] === 'icon-only' ||\n    theme.base['case-type-colors'] === 'header-and-icon';\n  const resolvedCaseTypeColor = caseTypeColorsEnabled\n    ? resolveCaseTypeColor(theme, $color)\n    : undefined;\n\n  return css`\n    --icon-color: ${resolveModernCaseViewIconColor(theme, $color)};\n    --gradient-start: oklch(from var(--icon-color) calc(l - 0.3) calc(c * 1.5) h);\n    --gradient-mid: oklch(from var(--icon-color) l c h);\n    --gradient-end: oklch(from var(--icon-color) calc(l + 0.5) calc(c * 1.5) h);\n    flex-shrink: 0;\n\n    ${theme.components['case-view'].icon.color !== 'auto' &&\n    css`\n      color: ${theme.components['case-view'].icon.color};\n    `}\n\n    ${theme.components['case-view'].icon.background !== 'auto' &&\n    css`\n      background: ${theme.components['case-view'].icon.background};\n    `}\n\n    ${theme.components['case-view'].icon.background === 'auto' &&\n    resolvedCaseTypeColor &&\n    css`\n      background: ${resolvedCaseTypeColor};\n    `}\n\n    ${theme.components['case-view'].icon['box-shadow'] !== 'auto' &&\n    css`\n      box-shadow: ${theme.components['case-view'].icon['box-shadow']};\n    `}\n  `;\n});\n\nStyledModernCaseViewIcon.defaultProps = defaultThemeProp;\n\nexport const StyledModernCaseHeaderPromotedAction = styled(Button)<{ $color?: string }>(({\n  theme,\n  $color\n}) => {\n  const { elementBackground, interactiveColor, hoverBackground } = getModernCaseViewColors(\n    theme,\n    $color\n  );\n\n  return css`\n    --button-background-color: ${elementBackground};\n    color: ${interactiveColor};\n    background-color: transparent;\n    border-color: ${interactiveColor};\n\n    @media (hover: hover) {\n      &:hover,\n      &:active {\n        --button-background-color: ${hoverBackground};\n        color: ${interactiveColor};\n        background-color: ${hoverBackground};\n        border-color: ${interactiveColor};\n      }\n    }\n  `;\n});\n\nStyledModernCaseHeaderPromotedAction.defaultProps = defaultThemeProp;\n\nexport const StyledModernContentContainer = styled.div(({ theme }) => {\n  const { breakpoints } = theme.base;\n\n  return css`\n    width: 100%;\n    margin-inline: auto;\n\n    @media screen and (min-width: ${breakpoints.md}) {\n      width: 85%;\n    }\n\n    @media screen and (min-width: ${breakpoints.lg}) {\n      max-width: ${theme.base['content-width'].xl};\n    }\n\n    & > div {\n      width: 100%;\n    }\n\n    ${StyledButton} {\n      margin-inline-start: 0;\n    }\n  `;\n});\n\nStyledModernContentContainer.defaultProps = defaultThemeProp;\n\nexport const StyledModernContent = styled.div(({ theme }) => {\n  return css`\n    ${StyledSummaryPrimaryList} {\n      grid-template-columns: auto 1fr;\n      column-gap: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledModernContent.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummary = styled.div(({ theme }) => {\n  return css`\n    background: ${theme.components.card.background};\n    border-radius: ${theme.base['border-radius']};\n    padding: calc(${theme.base.spacing} * 1.5);\n    align-self: start;\n  `;\n});\n\nStyledModernSummary.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummaryFieldsDivider = styled.hr(({ theme }) => {\n  return css`\n    margin: 0 calc(2 * ${theme.base.spacing});\n    border: none;\n    border-block-start: ${theme.components.button['border-width']} solid\n      ${theme.base.palette['border-line']};\n  `;\n});\n\nStyledModernSummaryFieldsDivider.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummaryPrimaryList = styled(StyledSummaryPrimaryList)<{\n  $isSmallOrAbove?: boolean;\n}>(({ theme, $isSmallOrAbove }) => {\n  return css`\n    &&& {\n      grid-template-columns: ${$isSmallOrAbove ? 'repeat(2, 1fr)' : '1fr'};\n      column-gap: calc(2 * ${theme.base.spacing});\n      row-gap: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledModernSummaryPrimaryList.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummarySecondaryList = styled(StyledSummarySecondaryList)<{\n  $isSmallOrAbove?: boolean;\n}>(({ theme, $isSmallOrAbove }) => {\n  return css`\n    &&& {\n      grid-template-columns: ${$isSmallOrAbove ? 'repeat(2, 1fr)' : '1fr'};\n      row-gap: calc(2 * ${theme.base.spacing});\n    }\n\n    ${StyledStackedFieldValue} {\n      grid-column: auto;\n    }\n  `;\n});\n\nStyledModernSummarySecondaryList.defaultProps = defaultThemeProp;\n\nexport const StyledModernSummaryCard = styled(Card)(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    &&&& ${StyledCardContent} {\n      padding: calc(1.5 * ${spacing}) calc(${theme.components.card.padding} * 2);\n\n      @media (width < ${breakpoints.sm}) {\n        padding: ${spacing} calc(${theme.components.card.padding} * 1.5);\n      }\n    }\n  `;\n});\n\nStyledModernSummaryCard.defaultProps = defaultThemeProp;\n\nexport const StyledModernStagesContainer = styled.div`\n  ${StyledStages} {\n    background: transparent;\n  }\n`;\n\nStyledModernStagesContainer.defaultProps = defaultThemeProp;\n"]}

package/lib/components/ModernCaseView/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ModernCaseView';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ModernCaseView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ModernCaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/ModernCaseView/index.js

@@ -0,0 +1,2 @@
+export { default } from './ModernCaseView';
+//# sourceMappingURL=index.js.map

package/lib/components/ModernCaseView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ModernCaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './ModernCaseView';\n"]}

package/lib/index.d.ts

@@ -4,6 +4,7 @@ export { default as CaseView } from './components/CaseView';
 export * from './components/CaseView';
 export { default as Footer } from './components/Footer';
 export * from './components/Footer';
+export { default as ModernCaseView } from './components/ModernCaseView';
 export * from './components/PageTemplates';
 export { default as QuickCreate } from './components/QuickCreate';
 export * from './components/QuickCreate';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACxE,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}

package/lib/index.js

@@ -5,6 +5,7 @@ export { default as CaseView } from './components/CaseView';
 export * from './components/CaseView';
 export { default as Footer } from './components/Footer';
 export * from './components/Footer';
+export { default as ModernCaseView } from './components/ModernCaseView';
 export * from './components/PageTemplates';
 export { default as QuickCreate } from './components/QuickCreate';
 export * from './components/QuickCreate';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as CaseView } from './components/CaseView';\nexport * from './components/CaseView';\nexport { default as Footer } from './components/Footer';\nexport * from './components/Footer';\nexport * from './components/PageTemplates';\nexport { default as QuickCreate } from './components/QuickCreate';\nexport * from './components/QuickCreate';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACxE,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as CaseView } from './components/CaseView';\nexport * from './components/CaseView';\nexport { default as Footer } from './components/Footer';\nexport * from './components/Footer';\nexport { default as ModernCaseView } from './components/ModernCaseView';\nexport * from './components/PageTemplates';\nexport { default as QuickCreate } from './components/QuickCreate';\nexport * from './components/QuickCreate';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-wss",
-  "version": "10.0.0-build.9.8",
+  "version": "10.0.0-build.9.9",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -14,8 +14,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "10.0.0-build.9.8",
-    "@pega/cosmos-react-work": "10.0.0-build.9.8",
+    "@pega/cosmos-react-core": "10.0.0-build.9.9",
+    "@pega/cosmos-react-work": "10.0.0-build.9.9",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "polished": "^4.1.0",