npm - @pega/cosmos-react-work - Versions diffs - 10.0.0-build.4.6 → 10.0.0-build.4.8 - Mend

@pega/cosmos-react-work 10.0.0-build.4.6 → 10.0.0-build.4.8

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

Files changed (35) hide show

package/lib/components/Stages/Stages.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport {\n calculateFontSize,\n DateTimeDisplay,\n defaultThemeProp,\n Icon,\n Text,\n StyledIcon,\n calculateForegroundColor\n} from '@pega/cosmos-react-core';\n\nconst stageClipPath = (leftNotch: boolean, rightPoint: boolean, mirrored = false): string => {\n if (mirrored) {\n // RTL: mirror the LTR clip-path polygon\n const points = ['100% 0', '0 0'];\n if (leftNotch) {\n points.push('var(--stage-chevron-width) 0', '0 50%', 'var(--stage-chevron-width) 100%');\n } else {\n points.push('0 100%');\n }\n points.push('100% 100%');\n if (rightPoint) {\n points.push('calc(100% - var(--stage-chevron-width)) 50%');\n }\n return `clip-path: polygon(${points.join(', ')});`;\n }\n\n const points = ['0 0', '100% 0'];\n if (rightPoint) {\n points.push(\n 'calc(100% - var(--stage-chevron-width)) 0',\n '100% 50%',\n 'calc(100% - var(--stage-chevron-width)) 100%'\n );\n } else {\n points.push('100% 100%');\n }\n points.push('0 100%');\n if (leftNotch) {\n points.push('var(--stage-chevron-width) 50%');\n }\n return `clip-path: polygon(${points.join(', ')});`;\n};\n\n// === Chevron Configuration ===\n// Centralizes spacing and border thickness via CSS custom properties set at StyledStages\nconst chevronConfig = {\n // Horizontal projection of the rotated border-square forming the chevron point (fine pointer).\n // Derived from the border-square size × cos(45° + skew). Tuned to visually align with the stage height.\n // All values scaled by 1.25× relative to the original 4× spacing design (now 5× spacing height).\n width: 'calc(1.445 * var(--chevron-spacing))',\n // Same horizontal projection for coarse/touch pointer (larger square, proportionally wider point).\n coarseWidth: 'calc(1.797 * var(--chevron-spacing))',\n // Side length of the rotated border-square forming the chevron (fine pointer: 3.75× base spacing).\n squareSize: 'calc(3.75 * var(--chevron-spacing))',\n // Side length of the rotated border-square for coarse/touch pointer (5× base spacing).\n coarseSquareSize: 'calc(5 * var(--chevron-spacing))',\n // Distance to inset the ::before notch from the left edge of the stage (fine pointer).\n // 0.86 ≈ width − half-border-overlap, keeps the notch flush with the preceding chevron point.\n offsetLeft: 'calc(0.86 * var(--chevron-spacing))',\n // Distance to inset the ::after point from the right edge of the stage (fine pointer).\n // Equal to `width` so the point extends exactly one chevron-width beyond the stage boundary.\n offsetRight: 'calc(1.445 * var(--chevron-spacing))',\n // Coarse-pointer equivalents of offsetLeft/offsetRight, scaled to match coarseWidth/coarseSquareSize.\n coarseOffsetLeft: 'calc(1.2875 * var(--chevron-spacing))',\n coarseOffsetRight: 'calc(1.797 * var(--chevron-spacing))'\n} as const;\n\n// === Chevron Helpers ===\n// After team discussion we decided to use logical properties throughout — `inset-block-start`\n// instead of `top`, and `border-block-start/end-width` instead of `border-top/bottom-width` —\n// for consistency with the rest of the file (which already uses logical inline-axis properties).\nconst createChevronPseudo = (borderWidth: string, borderColor: string, size: string): string => `\n content: '';\n position: absolute;\n display: block;\n inset-block-start: calc(50% - ${size} / 2);\n width: ${size};\n height: ${size};\n border-style: solid;\n border-color: ${borderColor};\n border-inline-end-width: ${borderWidth};\n border-inline-start-width: 0;\n border-block-start-width: ${borderWidth};\n border-block-end-width: 0;\n transform: rotateZ(45deg) skew(15deg, 15deg);\n pointer-events: none;\n`;\n\nconst createChevronBaseStyles = (config: typeof chevronConfig, borderThicknessVar: string) => css`\n &:not(:nth-of-type(-n + 2))::before,\n &:not(:nth-last-of-type(-n + 2))::after {\n border-inline-end-width: calc(1.5 * ${borderThicknessVar});\n border-block-start-width: calc(1.5 * ${borderThicknessVar});\n }\n\n &:not(:nth-of-type(-n + 2))::before {\n inset-inline-start: calc(-1 * ${config.width} - ${config.offsetLeft});\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-inline-end: calc(-1 * ${config.width} + ${config.offsetRight});\n }\n`;\n\nconst createChevronInteractiveStates = (\n config: typeof chevronConfig,\n borderThicknessVar: string,\n includeHover = true\n) => css`\n ${includeHover &&\n css`\n &:has(button:hover)::before,\n &:has(button:hover)::after {\n border-inline-end-width: calc(2 * ${borderThicknessVar});\n border-block-start-width: calc(2 * ${borderThicknessVar});\n }\n `}\n &:has(button:focus-visible)::before,\n &:has(button:focus-visible)::after,\n &:has(button:active)::before,\n &:has(button:active)::after {\n border-inline-end-width: calc(2 * ${borderThicknessVar});\n border-block-start-width: calc(2 * ${borderThicknessVar});\n }\n`;\n\n/*\n Outer wrapper `<div>` for the stages bar. Applies layered scroll-fade masks and\n * reserves scrollbar space so the fade gradient does not overlap the scrollbar track.\n /\nexport const StyledStagesWrapper = styled.div(({ theme }) => {\n return css`\n --stages-fade-width: calc(${theme.base.spacing} 2);\n --stages-fade-start: 0;\n --stages-fade-end: 0;\n --stages-scrollbar-reserve: calc(${theme.base.spacing} * 0.25);\n\n /* Places gradient stops one physical pixel outside the element boundary,\n * preventing browser anti-aliasing from creating a semi-transparent seam\n * at mask edges. 1px is the correct unit here: it must be exactly one CSS pixel\n * (independent of font-size), so the mask boundary doesn't introduce a seam at the\n * element edge due to anti-aliasing.\n * See also StyledSentinel, which uses 1px for the same reason.\n /\n / stylelint-disable-next-line unit-allowed-list -- 1px is intentional; see comment above /\n --mask-edge-overhang: 1px;\n position: relative;\n width: 100%;\n overflow: hidden;\n border-radius: ${theme.components.card['border-radius']};\n border-end-start-radius: var(\n --stages-wrapper-bottom-radius,\n ${theme.components.card['border-radius']}\n );\n border-end-end-radius: var(\n --stages-wrapper-bottom-radius,\n ${theme.components.card['border-radius']}\n );\n mask-image: linear-gradient(black, black),\n linear-gradient(\n to right,\n transparent calc(-1 var(--mask-edge-overhang)),\n black var(--stages-fade-start),\n black calc(100% - var(--stages-fade-end)),\n transparent calc(100% + var(--mask-edge-overhang))\n );\n mask-size:\n 100% var(--stages-scrollbar-reserve),\n 100% calc(100% - var(--stages-scrollbar-reserve));\n mask-position:\n 0 100%,\n 0 0;\n mask-repeat: no-repeat, no-repeat;\n\n [dir='rtl'] & {\n mask-image: linear-gradient(black, black),\n linear-gradient(\n to right,\n transparent calc(-1 * var(--mask-edge-overhang)),\n black var(--stages-fade-end),\n black calc(100% - var(--stages-fade-start)),\n transparent calc(100% + var(--mask-edge-overhang))\n );\n }\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n\n @media (pointer: coarse) {\n --stages-fade-width: calc(${theme.base.spacing} * 3);\n mask-image: linear-gradient(\n to right,\n transparent calc(-1 * var(--mask-edge-overhang)),\n black var(--stages-fade-start),\n black calc(100% - var(--stages-fade-end)),\n transparent calc(100% + var(--mask-edge-overhang))\n );\n mask-size: 100% 100%;\n mask-position: 0 0;\n mask-repeat: no-repeat;\n\n [dir='rtl'] & {\n mask-image: linear-gradient(\n to right,\n transparent calc(-1 * var(--mask-edge-overhang)),\n black var(--stages-fade-end),\n black calc(100% - var(--stages-fade-start)),\n transparent calc(100% + var(--mask-edge-overhang))\n );\n }\n }\n `;\n});\n\nStyledStagesWrapper.defaultProps = defaultThemeProp;\n\n/*\n Scrollable `<ol>` containing all stage chevron items. Sets the `--chevron-spacing`\n * and `--chevron-border-thickness` custom properties consumed by child elements.\n /\nexport const StyledStages = styled.ol(({ theme }) => {\n return css`\n --chevron-spacing: ${theme.base.spacing};\n --chevron-border-thickness: ${theme.components.button['border-width']};\n border-radius: ${theme.components.card['border-radius']};\n display: flex;\n padding: 0;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n list-style: none;\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n\n &:hover,\n &:focus-within {\n scrollbar-color: var(\n --stages-scrollbar-thumb,\n ${transparentize(0.4, theme.base.palette['border-line'])}\n )\n var(--stages-scrollbar-track, transparent);\n }\n\n &::-webkit-scrollbar {\n height: 0.25rem;\n }\n\n @media (pointer: coarse) {\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\n/\n A sentinel is an invisible 1 px <li> placed at each end of the scrollable stage list.\n * It is observed by an IntersectionObserver; when it scrolls out of view, the component sets\n * --stages-fade-start or --stages-fade-end to show a gradient fade indicating more stages\n * are reachable by scrolling. When it comes back into view the property is reset to 0.\n \n Sentinel elements carry aria-hidden=\"true\" so they are valid list items semantically.\n * Because styled-components scopes all CSS to a generated class, the chevron and layout rules\n * in StyledStageContainer never apply to these elements — they carry a different class.\n * CSS type-based selectors (:nth-of-type, :nth-last-of-type) in StyledStageContainer are\n * offset by 1 at each end to skip the sentinels and target only real stage items.\n /\nexport const StyledSentinel = styled.li`\n flex-shrink: 0;\n\n / NOTE: the sentinel must occupy\n * a single physical pixel so IntersectionObserver can detect it at threshold 0 while having\n * negligible layout impact. A rem value could collapse to zero at small font sizes.\n /\n / stylelint-disable-next-line unit-allowed-list -- 1px is intentional /\n width: 1px;\n / stylelint-disable-next-line unit-allowed-list -- 1px is intentional /\n height: 1px;\n padding: 0;\n margin: 0;\n pointer-events: none;\n\n / Collapse the sentinel's layout footprint to zero on the side facing the stages.\n * Without this, each 1px sentinel creates a visible gap between the stage buttons\n * and the left/right edges of the wrapper. The sentinel remains in flow (required\n * for IntersectionObserver scroll detection) but no longer displaces stage content.\n /\n &:first-of-type {\n / stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width /\n margin-inline-end: -1px;\n }\n\n &:last-of-type {\n / stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width /\n margin-inline-start: -1px;\n }\n`;\n\nStyledSentinel.defaultProps = defaultThemeProp;\n\n/\n Inner `<span>` holding stage label content. Optionally applies `text-overflow: ellipsis`\n * for stages with long labels.\n /\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(({ theme, ellipsis }) => {\n return css`\n display: inline-flex;\n align-items: center;\n gap: calc(0.25 ${theme.base.spacing});\n text-align: center;\n white-space: nowrap;\n padding-inline-start: calc(0.875 * ${theme.base.spacing});\n padding-inline-end: calc(1.125 * ${theme.base.spacing});\n ${ellipsis &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n `;\n});\n\nStyledInnerStage.defaultProps = defaultThemeProp;\n\n/*\n Clickable `<button>` for a single stage. Renders the chevron clip-path shape and\n * applies status-based background and foreground colours.\n /\nexport const StyledStage = styled.button<{\n status: 'completed' \| 'current' \| 'pending';\n readOnly?: boolean;\n}>(\n ({\n theme: {\n base: { palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight },\n components: {\n 'case-view': { stages }\n }\n },\n status,\n readOnly\n }) => {\n const stageForeground = calculateForegroundColor(\n stages.status[status].background,\n stages.status[status]['foreground-color']\n );\n\n return css`\n background: ${stages.status[status].background};\n color: ${stageForeground};\n outline: none;\n border-color: transparent;\n border-width: calc(2 var(--chevron-border-thickness)) 0;\n border-style: solid;\n position: relative;\n\n /* Browsers do not reliably apply flex align-items: stretch to <button> elements.\n * Adding 0.0625rem (1px at default font size) to min-height compensates so the button fills its <li> container,\n * keeping the clipped chevron background flush with the top and bottom borders. /\n min-height: calc(5 var(--chevron-spacing) + 0.0625rem);\n padding-inline-start: calc(2 * var(--chevron-spacing));\n padding-inline-end: var(--chevron-spacing);\n margin-inline-start: 0;\n margin-inline-end: 0;\n width: calc(100% + ${chevronConfig.width});\n --stage-chevron-width: ${chevronConfig.width};\n\n ${StyledInnerStage} {\n transform: translateX(calc(-0.25 * var(--chevron-spacing)));\n opacity: ${transparency['transparent-2']};\n }\n ${stageClipPath(true, true)}\n\n [dir='rtl'] & ${StyledInnerStage} {\n transform: translateX(calc(0.25 * var(--chevron-spacing)));\n }\n\n [dir='rtl'] & {\n ${stageClipPath(true, true, true)}\n }\n\n ${!readOnly &&\n css`\n &:hover {\n border-color: ${palette['border-line']};\n }\n `}\n\n &:focus-visible {\n border-color: ${palette.interactive};\n }\n\n &:active {\n border-color: ${palette.interactive};\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n\n &[aria-current] {\n ${StyledInnerStage} {\n font-weight: ${fontWeight.bold};\n opacity: 1;\n }\n\n ${!readOnly &&\n css`\n &:hover {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n }\n `}\n }\n\n @media (pointer: coarse) {\n min-height: ${hitArea['finger-min']};\n padding-inline-start: calc(2.25 * var(--chevron-spacing));\n width: calc(100% + ${chevronConfig.coarseWidth});\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\n/*\n Checkmark icon shown inside completed stages, tinted to match the stage foreground colour.\n /\nexport const StyledStageCompleteIcon = styled(Icon)(({\n theme: {\n components: {\n 'case-view': {\n stages: {\n status: {\n completed: { 'foreground-color': foregroundColor, background }\n }\n }\n }\n }\n }\n}) => {\n const stageForeground = calculateForegroundColor(background, foregroundColor);\n return css`\n color: ${stageForeground};\n `;\n});\nStyledStageCompleteIcon.defaultProps = defaultThemeProp;\n\n/\n Stage label text. Renders in bold weight when the stage is the current active stage.\n /\nexport const StyledStageText = styled(Text)<{ isCurrent?: boolean }>(\n ({ theme, isCurrent }) => css`\n font-weight: ${isCurrent ? theme.base['font-weight'].bold : theme.base['font-weight'].normal};\n `\n);\n\nStyledStageText.defaultProps = defaultThemeProp;\n\n/\n `<li>` container for a single stage item. Manages negative-margin chevron overlap,\n * pseudo-element positioning, and z-index stacking for interactive states.\n /\nexport const StyledStageContainer = styled.li<{\n readOnly?: boolean;\n}>(\n ({\n theme: {\n base: { palette },\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n readOnly\n }) => {\n return css`\n display: flex;\n position: relative;\n margin-inline-start: calc(-1 ${chevronConfig.width});\n\n &:nth-of-type(2) {\n margin-inline-start: 0;\n }\n\n /* Resting z-index: for same-z siblings, DOM order determines paint order.\n * All non-last <li>s have z-index:1 so the later (right) <li>'s ::before paints on top\n * at internal boundaries; the last <li> has no z-index so its left neighbor's ::after\n * wins at the final boundary. On hover/focus/active, the interacting <li> gains z:2/3\n * and its own pseudo-element surfaces for that boundary, regardless of which side.\n /\n &:not(:nth-last-of-type(-n + 2)) {\n z-index: 1;\n }\n\n &:has(button:focus-visible),\n &:has(button:active) {\n z-index: 2;\n }\n\n ${!readOnly &&\n css`\n &:has(button:hover) {\n z-index: 3;\n }\n `}\n\n @media (pointer: coarse) {\n margin-inline-start: calc(-1 ${chevronConfig.coarseWidth});\n }\n\n &:not(:nth-of-type(-n + 2))::before {\n ${createChevronPseudo(\n 'calc(2 * var(--chevron-border-thickness))',\n palette['border-line'],\n chevronConfig.squareSize\n )}\n /* Elevate ::before above the button so it renders via the same pathway as ::after.\n * Without z-index, ::before (first in DOM) is painted first and then covered by the\n * button, making it only partially visible through the clip-path notch window. This\n * causes thicker interactive-state borders (3×) to look thinner on the left boundary\n * than on the right (::after, which paints last and is always fully visible).\n * The ::before tip's rightmost extent is at --stage-chevron-width from the <li> start,\n * which is before the stage text (padding-inline-start: 2 × spacing), so no content overlap.\n /\n z-index: 1;\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n ${createChevronPseudo(\n 'calc(2 var(--chevron-border-thickness))',\n palette['border-line'],\n chevronConfig.squareSize\n )}\n }\n\n /* Chevron positioning: 45° rotated squares create visual tips via offsets:\n * left ≈ 0.86 × spacing, right ≈ 1.445 × spacing (accounts for skew correction)\n /\n\n [dir='rtl'] &::before,\n [dir='rtl'] &::after {\n transform: rotateZ(-45deg) skew(-15deg, -15deg);\n }\n\n / Thicken chevrons to visually match button top/bottom border on any colored state.\n * At 45° rotation, border appears 1/sin(45°) ≈ 0.707× thinner, so 2× border ≈ 1.4× horizontal border weight.\n /\n ${createChevronBaseStyles(chevronConfig, 'var(--chevron-border-thickness)')}\n ${createChevronInteractiveStates(chevronConfig, 'var(--chevron-border-thickness)', !readOnly)}\n ${!readOnly &&\n css`\n &:has(button:hover)::before,\n &:has(button:hover)::after {\n border-color: ${palette['border-line']};\n }\n `}\n &:has(button:focus-visible)::before,\n &:has(button:focus-visible)::after {\n border-color: ${palette.interactive};\n }\n\n &:has(button:active)::before,\n &:has(button:active)::after {\n border-color: ${palette.interactive};\n }\n\n @media (pointer: coarse) {\n &:not(:nth-of-type(-n + 2))::before,\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-block-start: calc(50% - ${chevronConfig.coarseSquareSize} / 2);\n width: ${chevronConfig.coarseSquareSize};\n height: ${chevronConfig.coarseSquareSize};\n }\n\n &:not(:nth-of-type(-n + 2))::before {\n inset-inline-start: calc(\n -1 ${chevronConfig.coarseWidth} - ${chevronConfig.coarseOffsetLeft}\n );\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-inline-end: calc(\n -1 * ${chevronConfig.coarseWidth} + ${chevronConfig.coarseOffsetRight}\n );\n }\n }\n\n &:nth-of-type(2) > ${StyledStage} {\n --stage-chevron-width: ${chevronConfig.width};\n border-start-start-radius: ${borderRadius};\n border-end-start-radius: ${borderRadius};\n width: calc(100% + (2 * var(--stage-chevron-width)));\n padding-inline-start: calc(var(--chevron-spacing));\n ${stageClipPath(false, true)}\n\n ${!readOnly &&\n css`\n /* Inline-start interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds /\n &:hover {\n box-shadow: inset calc(2 var(--chevron-border-thickness)) 0 0\n ${palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n }\n }\n\n @media (pointer: coarse) {\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n width: calc(100% + (2 * var(--stage-chevron-width)));\n }\n }\n\n &:nth-last-of-type(2) > ${StyledStage} {\n --stage-chevron-width: ${chevronConfig.width};\n border-start-end-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n padding-inline-end: 0;\n width: 100%;\n ${stageClipPath(true, false)}\n\n ${!readOnly &&\n css`\n /* Inline-end interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds /\n &:hover {\n box-shadow: inset calc(-2 var(--chevron-border-thickness)) 0 0\n ${palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n ${palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};\n }\n }\n\n @media (pointer: coarse) {\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n }\n }\n\n [dir='rtl'] &:nth-of-type(2) > ${StyledStage} {\n ${stageClipPath(true, false, true)}\n }\n\n [dir='rtl'] &:nth-last-of-type(2) > ${StyledStage} {\n ${stageClipPath(false, true, true)}\n }\n `;\n }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\n\n/*\n `<ol>` list of sub-step items displayed below the stages bar when a stage is expanded.\n /\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin: calc(2 ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n &:empty {\n margin-block-end: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\n/*\n Individual step `<li>` within a stage. Dims text and icon at reduced opacity when completed.\n /\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n return css`\n border-radius: 0;\n margin-block-end: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-block-end: 0;\n }\n\n & > ${StyledIcon} {\n text-align: center;\n }\n\n div {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\n/\n Small datetime label rendered beneath a step. Displayed at the `xs` font size\n * and reduced opacity.\n /\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n font-size: ${fontSize.xs};\n opacity: ${theme.base.transparency['transparent-2']};\n `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\n/\n Container `<div>` for the stage glimpse preview panel, constrained to a small max-width.\n /\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\n/\n Visually hidden `<p>` providing an accessible description for the stages list,\n * announced by screen readers but not displayed on screen.\n */\nexport const StyledStagesDescription = styled.p`\n display: none;\n`;\n\nStyledStagesDescription.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElD,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,wBAAwB,EACxB,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAIjC,MAAM,aAAa,GAAG,CAAC,SAAkB,EAAE,UAAmB,EAAE,QAAQ,GAAG,KAAK,EAAU,EAAE;IAC1F,IAAI,QAAQ,EAAE,CAAC;QACb,wCAAwC;QACxC,MAAM,MAAM,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACjC,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,CAAC,IAAI,CAAC,8BAA8B,EAAE,OAAO,EAAE,iCAAiC,CAAC,CAAC;QAC1F,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACxB,CAAC;QACD,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACzB,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;QAC7D,CAAC;QACD,OAAO,sBAAsB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;IACrD,CAAC;IAED,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IACjC,IAAI,UAAU,EAAE,CAAC;QACf,MAAM,CAAC,IAAI,CACT,2CAA2C,EAC3C,UAAU,EACV,8CAA8C,CAC/C,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC3B,CAAC;IACD,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtB,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;IAChD,CAAC;IACD,OAAO,sBAAsB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AACrD,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG;IACtB,KAAK,EAAE,oCAAoC;IAC3C,WAAW,EAAE,oCAAoC;CACzC,CAAC;AAEX,MAAM,iBAAiB,GAAG,CAAC,OAAgB,EAAE,QAAiB,EAAE,QAAQ,GAAG,KAAK,EAAU,EAAE;IAC1F,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,SAAS,CAAC;QACjF,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,SAAS,CAAC;QAEvE,OAAO,6BAA6B,QAAQ,gBAAgB,UAAU,IAAI,CAAC;IAC7E,CAAC;IAED,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,OAAO,CAAC;IAChE,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,0CAA0C,CAAC,CAAC,CAAC,WAAW,CAAC;IAExF,OAAO,sBAAsB,OAAO,cAAc,WAAW,aAAa,CAAC;AAC7E,CAAC,CAAC;AAEF,gCAAgC;AAChC,yFAAyF;AACzF,MAAM,aAAa,GAAG;IACpB,+FAA+F;IAC/F,wGAAwG;IACxG,iGAAiG;IACjG,KAAK,EAAE,sCAAsC;IAC7C,mGAAmG;IACnG,WAAW,EAAE,sCAAsC;IACnD,mGAAmG;IACnG,UAAU,EAAE,qCAAqC;IACjD,uFAAuF;IACvF,gBAAgB,EAAE,kCAAkC;IACpD,uFAAuF;IACvF,8FAA8F;IAC9F,UAAU,EAAE,qCAAqC;IACjD,uFAAuF;IACvF,6FAA6F;IAC7F,WAAW,EAAE,sCAAsC;IACnD,sGAAsG;IACtG,gBAAgB,EAAE,uCAAuC;IACzD,iBAAiB,EAAE,sCAAsC;CACjD,CAAC;AAEX,0BAA0B;AAC1B,8FAA8F;AAC9F,8FAA8F;AAC9F,iGAAiG;AACjG,MAAM,mBAAmB,GAAG,CAAC,WAAmB,EAAE,WAAmB,EAAE,IAAY,EAAU,EAAE,CAAC;;;;kCAI9D,IAAI;WAC3B,IAAI;YACH,IAAI;;kBAEE,WAAW;6BACA,WAAW;;8BAEV,WAAW;;;;CAIxC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,MAA4B,EAAE,kBAA0B,EAAE,EAAE,CAAC,GAAG,CAAA;;;0CAGvD,kBAAkB;2CACjB,kBAAkB;;;;oCAIzB,MAAM,CAAC,KAAK,MAAM,MAAM,CAAC,UAAU;;;;kCAIrC,MAAM,CAAC,KAAK,MAAM,MAAM,CAAC,WAAW;;CAErE,CAAC;AAEF,MAAM,8BAA8B,GAAG,CACrC,MAA4B,EAC5B,kBAA0B,EAC1B,YAAY,GAAG,IAAI,EACnB,EAAE,CAAC,GAAG,CAAA;IACJ,YAAY;IACd,GAAG,CAAA;;;0CAGqC,kBAAkB;2CACjB,kBAAkB;;GAE1D;;;;;wCAKqC,kBAAkB;yCACjB,kBAAkB;;CAE1D,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;gCACoB,KAAK,CAAC,IAAI,CAAC,OAAO;;;uCAGX,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;qBAcpC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;;QAGnD,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;;;QAItC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA8B1B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;;;kCAIlB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;GAsBjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,EAAE,CAA4B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACtF,MAAM,WAAW,GAAG,OAAO,KAAK,WAAW,CAAC;IAE5C,OAAO,GAAG,CAAA;yBACa,KAAK,CAAC,IAAI,CAAC,OAAO;kCACT,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;6CAC5B,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;yBAC3D,eAAe,CAAC,KAAK;qBACzB,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;;MAUrD,WAAW;QACb,GAAG,CAAA;mCAC4B,KAAK,CAAC,IAAI,CAAC,OAAO;;iCAEpB,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;;+BAErD,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;uBAC5D,KAAK,CAAC,IAAI,CAAC,OAAO;;KAEpC;;;;;;YAMO,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;;;;;;;;;;;;;;;;GAgB/D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BtC,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAyB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC1F,OAAO,GAAG,CAAA;;;uBAGW,KAAK,CAAC,IAAI,CAAC,OAAO;;;yCAGA,KAAK,CAAC,IAAI,CAAC,OAAO;uCACpB,KAAK,CAAC,IAAI,CAAC,OAAO;MACnD,QAAQ;QACV,GAAG,CAAA;;;KAGF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,wBAAwB,GAAG,CAAC,KAAmB,EAAE,EAAE,CAAC,GAAG,CAAA;;;uBAGtC,aAAa,CAAC,KAAK;2BACf,aAAa,CAAC,KAAK;;IAE1C,gBAAgB;;eAEL,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;;;IAGnD,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC;;kBAEX,gBAAgB;;;;;MAK5B,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;;;;;yBAKZ,aAAa,CAAC,WAAW;6BACrB,aAAa,CAAC,WAAW;;CAErD,CAAC;AAEF,MAAM,0BAA0B,GAAG,CAAC,KAAmB,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;IAK3D,gBAAgB;eACL,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;;;IAGnD,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC;;;MAG3B,iBAAiB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;;CAExC,CAAC;AAEF,MAAM,mBAAmB,GAA0E;IACjG,OAAO,EAAE,wBAAwB;IACjC,SAAS,EAAE,0BAA0B;IACrC,SAAS,EAAE,GAAG,EAAE,CAAC,GAAG,CAAA,EAAE;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAKtC,CAAC,EACC,KAAK,EACL,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,EAC/E,UAAU,EAAE,EACV,WAAW,EAAE,EAAE,MAAM,EAAE,EACxB,EACF,EACD,MAAM,EACN,QAAQ,EACR,OAAO,EAAE,KAAK,EACf,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,wBAAwB,CAC9C,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,UAAU,EAChC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,kBAAkB,CAAC,CAC1C,CAAC;IAEF,OAAO,GAAG,CAAA;oBACM,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,UAAU;eACrC,eAAe;;;;;;;;;;;;;;QActB,mBAAmB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;;QAEjC,CAAC,QAAQ;QACX,GAAG,CAAA;;0BAEiB,OAAO,CAAC,aAAa,CAAC;;OAEzC;;;wBAGiB,OAAO,CAAC,WAAW;;;;wBAInB,OAAO,CAAC,WAAW;;UAEjC,gBAAgB;qBACL,YAAY,CAAC,eAAe,CAAC;;;;;UAKxC,gBAAgB;yBACD,UAAU,CAAC,IAAI;;;;UAI9B,CAAC,QAAQ;QACX,GAAG,CAAA;;cAEG,gBAAgB;yBACL,YAAY,CAAC,eAAe,CAAC;;;SAG7C;;;;sBAIa,OAAO,CAAC,YAAY,CAAC;;KAEtC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EACnD,KAAK,EAAE,EACL,UAAU,EAAE,EACV,WAAW,EAAE,EACX,MAAM,EAAE,EACN,MAAM,EAAE,EACN,SAAS,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,UAAU,EAAE,EAC/D,EACF,EACF,EACF,EACF,EACF,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,wBAAwB,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;IAC9E,OAAO,GAAG,CAAA;aACC,eAAe;GACzB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CACzC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;mBACZ,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;GAC7F,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,2BAA2B,GAAG,CAAC,KAAmB,EAAE,QAA6B,EAAE,EAAE;IACzF,MAAM,YAAY,GAAG,CAAC,QAAQ,CAAC;IAC/B,OAAO,GAAG,CAAA;;qCAEyB,aAAa,CAAC,KAAK;;;;;;;;QAQhD,mBAAmB,CACnB,2CAA2C,EAC3C,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,EACjC,aAAa,CAAC,UAAU,CACzB;;;;;;;;;;;;;QAaC,mBAAmB,CACnB,2CAA2C,EAC3C,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,EACjC,aAAa,CAAC,UAAU,CACzB;;;;;;;;;;;MAWD,uBAAuB,CAAC,aAAa,EAAE,iCAAiC,CAAC;MACzE,8BAA8B,CAC9B,aAAa,EACb,iCAAiC,EACjC,YAAY,CACb;;;;;MAKC,YAAY;QACd,GAAG,CAAA;;;wBAGiB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;KAEpD;;;;sBAIiB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;;sBAK9B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;yBAI3B,WAAW;+BACL,aAAa,CAAC,KAAK;;;QAG1C,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC;;QAE1B,YAAY;QACd,GAAG,CAAA;;;;cAIK,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;gBAI/B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;OAG1C;;;;;YAKK,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;cAI5B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;;iCAKX,aAAa,CAAC,WAAW;;;;;;8BAM5B,WAAW;+BACV,aAAa,CAAC,KAAK;;;QAG1C,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC;;QAE1B,YAAY;QACd,GAAG,CAAA;;;;cAIK,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;gBAI/B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;OAG1C;;;;;YAKK,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;cAI5B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;;iCAKX,aAAa,CAAC,WAAW;;;;;qCAKrB,WAAW;QACxC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC;;;0CAGE,WAAW;QAC7C,aAAa,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC;;;;uCAID,aAAa,CAAC,WAAW;;;;wCAIxB,aAAa,CAAC,gBAAgB;iBACrD,aAAa,CAAC,gBAAgB;kBAC7B,aAAa,CAAC,gBAAgB;;;;;iBAK/B,aAAa,CAAC,WAAW,MAAM,aAAa,CAAC,gBAAgB;;;;;;iBAM7D,aAAa,CAAC,WAAW,MAAM,aAAa,CAAC,iBAAiB;;;;GAI5E,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,6BAA6B,GAAG,CAAC,KAAmB,EAAE,QAA6B,EAAE,EAAE;IAC3F,MAAM,YAAY,GAAG,CAAC,QAAQ,CAAC;IAE/B,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;oBA0BQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;;oBAkBjC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;MAM/C,YAAY;QACd,GAAG,CAAA;;;;;;;sBAOe,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;KAElD;;;;;;;;;;;oBAWe,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;yBAIzB,WAAW;QAC5B,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;QAE9B,YAAY;QACd,GAAG,CAAA;;;cAGK,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;gBAI/B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;OAG1C;;;;kEAI2D,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;cAIlF,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;;;8BAMd,WAAW;QACjC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC;;QAE9B,YAAY;QACd,GAAG,CAAA;;;cAGK,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;gBAI/B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;OAG1C;;;;;YAKK,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;oEAG0B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;;;;qCAM7D,WAAW;QACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC;;;0CAGF,WAAW;QAC7C,iBAAiB,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;2BAoBjB,eAAe,CAAC,WAAW;;GAEnD,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAGxB;IACF,OAAO,EAAE,2BAA2B;IACpC,SAAS,EAAE,6BAA6B;IACxC,SAAS,EAAE,GAAG,EAAE,CAAC,GAAG,CAAA,EAAE;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAI3C,CAAC,EACC,KAAK,EACL,KAAK,EAAE,EACL,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EACD,QAAQ,EACR,OAAO,EAAE,KAAK,EACf,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;QAmBN,CAAC,QAAQ;QACX,GAAG,CAAA;;;;OAIF;;;2BAGoB,WAAW;qCACD,YAAY;mCACd,YAAY;;;gCAGf,WAAW;mCACR,YAAY;iCACd,YAAY;;;QAGrC,sBAAsB,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC;KACjD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;;uBAEW,KAAK,CAAC,IAAI,CAAC,OAAO,gBAAgB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAKxE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IACnF,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE7E,OAAO,GAAG,CAAA;;6BAEiB,KAAK,CAAC,IAAI,CAAC,OAAO;aAClC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;;;UAMzC,UAAU;;;;;iBAKH,WAAW;;GAEzB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;iBACK,QAAQ,CAAC,EAAE;eACb,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC;GACpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;iBACK,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;GAC5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,cAAc,GAAG,SAAS,CAAA;;;;;;;CAO/B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;mBAChC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;;;;kCAIV,KAAK,CAAC,IAAI,CAAC,OAAO;GACjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,EAAE,CAInD,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE;IACtC,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,EACnD,OAAO,EACR,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,MAAM,eAAe,GAAG,aAAa,CAAC;IAEtC,OAAO,GAAG,CAAA;0BACc,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU;;;;sBAI5C,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU;6BACnC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY;;;;;iBAKxD,QAAQ,CAAC,EAAE;mBACT,MAAM,KAAK,SAAS;QACjC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;QACxC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;;WAG7B,OAAO;;;;;;;;;;QAUV,oBAAoB;;;;;;;;;;;QAWpB,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BzB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAG/C,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE;IACjC,MAAM,EACJ,IAAI,EAAE,EACJ,UAAU,EAAE,OAAO,EACnB,SAAS,EAAE,EACT,KAAK,EAAE,cAAc,EACrB,MAAM,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,EAClC,EACD,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAC/B,EACD,UAAU,EAAE,EACV,MAAM,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,EACvC,WAAW,EAAE,EAAE,MAAM,EAAE,EACxB,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,eAAe,GAAG,wBAAwB,CAC9C,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,UAAU,EAChC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,kBAAkB,CAAC,CAC1C,CAAC;IAEF,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,MAAM,oBAAoB,GACxB,MAAM,KAAK,WAAW;QACpB,CAAC,CAAC,QAAQ,CACN,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,EACtD,GAAG,EAAE,CAAC,aAAa,CACpB;QACH,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,GAAG,CAAA;;;;;;;;;;kBAUM,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,UAAU;aACrC,eAAe;iBACX,QAAQ,CAAC,CAAC;mBACR,MAAM,KAAK,SAAS;QACjC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;QACxC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;;cAG1B,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;sCACR,cAAc,KAAK,eAAe;;MAElE,MAAM,KAAK,WAAW;QACxB,GAAG,CAAA;yCACkC,WAAW,KAAK,oBAAoB;KACxE;;;oBAGe,WAAW;;;;;;;;MAQzB,CAAC,QAAQ;QACX,GAAG,CAAA;;;;;;;;KAQF;;MAEC,MAAM,KAAK,SAAS;QACtB,CAAC,QAAQ;QACT,GAAG,CAAA;;;;;;;qBAOc,cAAc;;;;;;KAM9B;;;;;;eAMU,OAAO,CAAC,WAAW,CAAC;gBACnB,OAAO,CAAC,WAAW,CAAC;iCACH,OAAO,CAAC,WAAW,CAAC;kCACnB,OAAO,CAAC,WAAW,CAAC;;;iBAGrC,OAAO,CAAC,YAAY,CAAC;kBACpB,OAAO,CAAC,YAAY,CAAC;mCACJ,OAAO,CAAC,YAAY,CAAC;oCACpB,OAAO,CAAC,YAAY,CAAC;;;;;;;GAOtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,CAAC,CAAA;;CAE9C,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { transparentize, darken } from 'polished';\n\nimport {\n calculateFontSize,\n DateTimeDisplay,\n defaultThemeProp,\n Icon,\n Text,\n StyledIcon,\n calculateForegroundColor,\n tryCatch\n} from '@pega/cosmos-react-core';\n\nimport type { StageVariant } from './Stages.types';\n\nconst stageClipPath = (leftNotch: boolean, rightPoint: boolean, mirrored = false): string => {\n if (mirrored) {\n // RTL: mirror the LTR clip-path polygon\n const points = ['100% 0', '0 0'];\n if (leftNotch) {\n points.push('var(--stage-chevron-width) 0', '0 50%', 'var(--stage-chevron-width) 100%');\n } else {\n points.push('0 100%');\n }\n points.push('100% 100%');\n if (rightPoint) {\n points.push('calc(100% - var(--stage-chevron-width)) 50%');\n }\n return `clip-path: polygon(${points.join(', ')});`;\n }\n\n const points = ['0 0', '100% 0'];\n if (rightPoint) {\n points.push(\n 'calc(100% - var(--stage-chevron-width)) 0',\n '100% 50%',\n 'calc(100% - var(--stage-chevron-width)) 100%'\n );\n } else {\n points.push('100% 100%');\n }\n points.push('0 100%');\n if (leftNotch) {\n points.push('var(--stage-chevron-width) 50%');\n }\n return `clip-path: polygon(${points.join(', ')});`;\n};\n\nconst segmentedConfig = {\n width: 'calc(0.8 * var(--chevron-spacing))',\n coarseWidth: 'calc(1.0 * var(--chevron-spacing))'\n} as const;\n\nconst segmentedClipPath = (leftCut: boolean, rightCut: boolean, mirrored = false): string => {\n if (mirrored) {\n const topRight = rightCut ? 'calc(100% - var(--segmented-width)) 0%' : '100% 0%';\n const bottomLeft = leftCut ? 'var(--segmented-width) 100%' : '0% 100%';\n\n return `clip-path: polygon(0% 0%, ${topRight}, 100% 100%, ${bottomLeft});`;\n }\n\n const topLeft = leftCut ? 'var(--segmented-width) 0%' : '0% 0%';\n const bottomRight = rightCut ? 'calc(100% - var(--segmented-width)) 100%' : '100% 100%';\n\n return `clip-path: polygon(${topLeft}, 100% 0%, ${bottomRight}, 0% 100%);`;\n};\n\n// === Chevron Configuration ===\n// Centralizes spacing and border thickness via CSS custom properties set at StyledStages\nconst chevronConfig = {\n // Horizontal projection of the rotated border-square forming the chevron point (fine pointer).\n // Derived from the border-square size × cos(45° + skew). Tuned to visually align with the stage height.\n // All values scaled by 1.25× relative to the original 4× spacing design (now 5× spacing height).\n width: 'calc(1.445 * var(--chevron-spacing))',\n // Same horizontal projection for coarse/touch pointer (larger square, proportionally wider point).\n coarseWidth: 'calc(1.797 * var(--chevron-spacing))',\n // Side length of the rotated border-square forming the chevron (fine pointer: 3.75× base spacing).\n squareSize: 'calc(3.75 * var(--chevron-spacing))',\n // Side length of the rotated border-square for coarse/touch pointer (5× base spacing).\n coarseSquareSize: 'calc(5 * var(--chevron-spacing))',\n // Distance to inset the ::before notch from the left edge of the stage (fine pointer).\n // 0.86 ≈ width − half-border-overlap, keeps the notch flush with the preceding chevron point.\n offsetLeft: 'calc(0.86 * var(--chevron-spacing))',\n // Distance to inset the ::after point from the right edge of the stage (fine pointer).\n // Equal to `width` so the point extends exactly one chevron-width beyond the stage boundary.\n offsetRight: 'calc(1.445 * var(--chevron-spacing))',\n // Coarse-pointer equivalents of offsetLeft/offsetRight, scaled to match coarseWidth/coarseSquareSize.\n coarseOffsetLeft: 'calc(1.2875 * var(--chevron-spacing))',\n coarseOffsetRight: 'calc(1.797 * var(--chevron-spacing))'\n} as const;\n\n// === Chevron Helpers ===\n// After team discussion we decided to use logical properties throughout — `inset-block-start`\n// instead of `top`, and `border-block-start/end-width` instead of `border-top/bottom-width` —\n// for consistency with the rest of the file (which already uses logical inline-axis properties).\nconst createChevronPseudo = (borderWidth: string, borderColor: string, size: string): string => `\n content: '';\n position: absolute;\n display: block;\n inset-block-start: calc(50% - ${size} / 2);\n width: ${size};\n height: ${size};\n border-style: solid;\n border-color: ${borderColor};\n border-inline-end-width: ${borderWidth};\n border-inline-start-width: 0;\n border-block-start-width: ${borderWidth};\n border-block-end-width: 0;\n transform: rotateZ(45deg) skew(15deg, 15deg);\n pointer-events: none;\n`;\n\nconst createChevronBaseStyles = (config: typeof chevronConfig, borderThicknessVar: string) => css`\n &:not(:nth-of-type(-n + 2))::before,\n &:not(:nth-last-of-type(-n + 2))::after {\n border-inline-end-width: calc(1.5 * ${borderThicknessVar});\n border-block-start-width: calc(1.5 * ${borderThicknessVar});\n }\n\n &:not(:nth-of-type(-n + 2))::before {\n inset-inline-start: calc(-1 * ${config.width} - ${config.offsetLeft});\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-inline-end: calc(-1 * ${config.width} + ${config.offsetRight});\n }\n`;\n\nconst createChevronInteractiveStates = (\n config: typeof chevronConfig,\n borderThicknessVar: string,\n includeHover = true\n) => css`\n ${includeHover &&\n css`\n &:has(button:hover)::before,\n &:has(button:hover)::after {\n border-inline-end-width: calc(2 * ${borderThicknessVar});\n border-block-start-width: calc(2 * ${borderThicknessVar});\n }\n `}\n &:has(button:focus-visible)::before,\n &:has(button:focus-visible)::after,\n &:has(button:active)::before,\n &:has(button:active)::after {\n border-inline-end-width: calc(2 * ${borderThicknessVar});\n border-block-start-width: calc(2 * ${borderThicknessVar});\n }\n`;\n\n/*\n Outer wrapper `<div>` for the stages bar. Applies layered scroll-fade masks and\n * reserves scrollbar space so the fade gradient does not overlap the scrollbar track.\n /\nexport const StyledStagesWrapper = styled.div(({ theme }) => {\n return css`\n --stages-fade-width: calc(${theme.base.spacing} 2);\n --stages-fade-start: 0;\n --stages-fade-end: 0;\n --stages-scrollbar-reserve: calc(${theme.base.spacing} * 0.25);\n\n /* Places gradient stops one physical pixel outside the element boundary,\n * preventing browser anti-aliasing from creating a semi-transparent seam\n * at mask edges. 1px is the correct unit here: it must be exactly one CSS pixel\n * (independent of font-size), so the mask boundary doesn't introduce a seam at the\n * element edge due to anti-aliasing.\n * See also StyledSentinel, which uses 1px for the same reason.\n /\n / stylelint-disable-next-line unit-allowed-list -- 1px is intentional; see comment above /\n --mask-edge-overhang: 1px;\n position: relative;\n width: 100%;\n overflow: hidden;\n border-radius: ${theme.components.card['border-radius']};\n border-end-start-radius: var(\n --stages-wrapper-bottom-radius,\n ${theme.components.card['border-radius']}\n );\n border-end-end-radius: var(\n --stages-wrapper-bottom-radius,\n ${theme.components.card['border-radius']}\n );\n mask-image: linear-gradient(black, black),\n linear-gradient(\n to right,\n transparent calc(-1 var(--mask-edge-overhang)),\n black var(--stages-fade-start),\n black calc(100% - var(--stages-fade-end)),\n transparent calc(100% + var(--mask-edge-overhang))\n );\n mask-size:\n 100% var(--stages-scrollbar-reserve),\n 100% calc(100% - var(--stages-scrollbar-reserve));\n mask-position:\n 0 100%,\n 0 0;\n mask-repeat: no-repeat, no-repeat;\n\n [dir='rtl'] & {\n mask-image: linear-gradient(black, black),\n linear-gradient(\n to right,\n transparent calc(-1 * var(--mask-edge-overhang)),\n black var(--stages-fade-end),\n black calc(100% - var(--stages-fade-start)),\n transparent calc(100% + var(--mask-edge-overhang))\n );\n }\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n\n @media (pointer: coarse) {\n --stages-fade-width: calc(${theme.base.spacing} * 3);\n mask-image: linear-gradient(\n to right,\n transparent calc(-1 * var(--mask-edge-overhang)),\n black var(--stages-fade-start),\n black calc(100% - var(--stages-fade-end)),\n transparent calc(100% + var(--mask-edge-overhang))\n );\n mask-size: 100% 100%;\n mask-position: 0 0;\n mask-repeat: no-repeat;\n\n [dir='rtl'] & {\n mask-image: linear-gradient(\n to right,\n transparent calc(-1 * var(--mask-edge-overhang)),\n black var(--stages-fade-end),\n black calc(100% - var(--stages-fade-start)),\n transparent calc(100% + var(--mask-edge-overhang))\n );\n }\n }\n `;\n});\n\nStyledStagesWrapper.defaultProps = defaultThemeProp;\n\n/*\n Scrollable `<ol>` containing all stage chevron items. Sets the `--chevron-spacing`,\n * `--chevron-border-thickness`, and `--segmented-border-thickness` custom properties\n * consumed by child elements.\n /\nexport const StyledStages = styled.ol<{ variant: StageVariant }>(({ theme, variant }) => {\n const isMilestone = variant === 'milestone';\n\n return css`\n --chevron-spacing: ${theme.base.spacing};\n --chevron-border-thickness: ${theme.components.button['border-width']};\n --segmented-border-thickness: calc(2 ${theme.components.button['border-width']});\n --segmented-width: ${segmentedConfig.width};\n border-radius: ${theme.components.card['border-radius']};\n display: flex;\n padding: 0;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n list-style: none;\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n\n ${isMilestone &&\n css`\n --milestone-size: calc(4 * ${theme.base.spacing});\n --milestone-pulse-min: calc(var(--milestone-size) * 0.1);\n --milestone-pulse-start: ${transparentize(0.5, theme.base.palette.interactive)};\n --milestone-pulse-spread: calc(var(--milestone-size) * 0.25);\n --milestone-pulse-end: ${transparentize(0.75, theme.base.palette.interactive)};\n padding-block: ${theme.base.spacing};\n padding-inline: calc(var(--milestone-size) * 0.25);\n `}\n\n &:hover,\n &:focus-within {\n scrollbar-color: var(\n --stages-scrollbar-thumb,\n ${transparentize(0.4, theme.base.palette['border-line'])}\n )\n var(--stages-scrollbar-track, transparent);\n }\n\n &::-webkit-scrollbar {\n height: 0.25rem;\n }\n\n @media (pointer: coarse) {\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\n/*\n A sentinel is an invisible 1 px <li> placed at each end of the scrollable stage list.\n * It is observed by an IntersectionObserver; when it scrolls out of view, the component sets\n * --stages-fade-start or --stages-fade-end to show a gradient fade indicating more stages\n * are reachable by scrolling. When it comes back into view the property is reset to 0.\n \n Sentinel elements carry aria-hidden=\"true\" so they are valid list items semantically.\n * Because styled-components scopes all CSS to a generated class, the chevron and layout rules\n * in StyledStageContainer never apply to these elements — they carry a different class.\n * CSS type-based selectors (:nth-of-type, :nth-last-of-type) in StyledStageContainer are\n * offset by 1 at each end to skip the sentinels and target only real stage items.\n /\nexport const StyledSentinel = styled.li`\n flex-shrink: 0;\n\n / NOTE: the sentinel must occupy\n * a single physical pixel so IntersectionObserver can detect it at threshold 0 while having\n * negligible layout impact. A rem value could collapse to zero at small font sizes.\n /\n / stylelint-disable-next-line unit-allowed-list -- 1px is intentional /\n width: 1px;\n / stylelint-disable-next-line unit-allowed-list -- 1px is intentional /\n height: 1px;\n padding: 0;\n margin: 0;\n pointer-events: none;\n\n / Collapse the sentinel's layout footprint to zero on the side facing the stages.\n * Without this, each 1px sentinel creates a visible gap between the stage buttons\n * and the left/right edges of the wrapper. The sentinel remains in flow (required\n * for IntersectionObserver scroll detection) but no longer displaces stage content.\n /\n &:first-of-type {\n / stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width /\n margin-inline-end: -1px;\n }\n\n &:last-of-type {\n / stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width /\n margin-inline-start: -1px;\n }\n`;\n\nStyledSentinel.defaultProps = defaultThemeProp;\n\n/\n Inner `<span>` holding stage label content. Optionally applies `text-overflow: ellipsis`\n * for stages with long labels.\n /\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(({ theme, ellipsis }) => {\n return css`\n display: inline-flex;\n align-items: center;\n gap: calc(0.25 ${theme.base.spacing});\n text-align: center;\n white-space: nowrap;\n padding-inline-start: calc(0.875 * ${theme.base.spacing});\n padding-inline-end: calc(1.125 * ${theme.base.spacing});\n ${ellipsis &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n `;\n});\n\nStyledInnerStage.defaultProps = defaultThemeProp;\n\nconst stageButtonChevronStyles = (theme: DefaultTheme) => css`\n padding-inline-start: calc(2 * var(--chevron-spacing));\n padding-inline-end: var(--chevron-spacing);\n width: calc(100% + ${chevronConfig.width});\n --stage-chevron-width: ${chevronConfig.width};\n\n ${StyledInnerStage} {\n transform: translateX(calc(-0.25 * var(--chevron-spacing)));\n opacity: ${theme.base.transparency['transparent-2']};\n }\n\n ${stageClipPath(true, true)}\n\n [dir='rtl'] & ${StyledInnerStage} {\n transform: translateX(calc(0.25 * var(--chevron-spacing)));\n }\n\n [dir='rtl'] & {\n ${stageClipPath(true, true, true)}\n }\n\n @media (pointer: coarse) {\n padding-inline-start: calc(2.25 * var(--chevron-spacing));\n width: calc(100% + ${chevronConfig.coarseWidth});\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n }\n`;\n\nconst stageButtonSegmentedStyles = (theme: DefaultTheme) => css`\n width: 100%;\n padding-inline-start: calc(var(--segmented-width) + var(--chevron-spacing));\n padding-inline-end: calc(var(--segmented-width) + var(--chevron-spacing));\n\n ${StyledInnerStage} {\n opacity: ${theme.base.transparency['transparent-2']};\n }\n\n ${segmentedClipPath(true, true)}\n\n [dir='rtl'] & {\n ${segmentedClipPath(true, true, true)}\n }\n`;\n\nconst stageButtonVariants: Record<StageVariant, (theme: DefaultTheme) => ReturnType<typeof css>> = {\n chevron: stageButtonChevronStyles,\n segmented: stageButtonSegmentedStyles,\n milestone: () => css``\n};\n\n/*\n Clickable `<button>` for a single stage. Renders the chevron clip-path shape and\n * applies status-based background and foreground colours.\n /\nexport const StyledStage = styled.button<{\n status: 'completed' \| 'current' \| 'pending';\n readOnly?: boolean;\n variant: StageVariant;\n}>(\n ({\n theme,\n theme: {\n base: { palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight },\n components: {\n 'case-view': { stages }\n }\n },\n status,\n readOnly,\n variant: shape\n }) => {\n const stageForeground = calculateForegroundColor(\n stages.status[status].background,\n stages.status[status]['foreground-color']\n );\n\n return css`\n background: ${stages.status[status].background};\n color: ${stageForeground};\n outline: none;\n border-color: transparent;\n border-width: calc(2 var(--chevron-border-thickness)) 0;\n border-style: solid;\n position: relative;\n\n /* Browsers do not reliably apply flex align-items: stretch to <button> elements.\n * Adding 0.0625rem (1px at default font size) to min-height compensates so the button fills its <li> container,\n * keeping the clipped chevron background flush with the top and bottom borders. /\n min-height: calc(5 var(--chevron-spacing) + 0.0625rem);\n margin-inline-start: 0;\n margin-inline-end: 0;\n\n ${stageButtonVariants[shape](theme)}\n\n ${!readOnly &&\n css`\n &:hover {\n border-color: ${palette['border-line']};\n }\n `}\n\n &:focus-visible {\n border-color: ${palette.interactive};\n }\n\n &:active {\n border-color: ${palette.interactive};\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n\n &[aria-current] {\n ${StyledInnerStage} {\n font-weight: ${fontWeight.bold};\n opacity: 1;\n }\n\n ${!readOnly &&\n css`\n &:hover {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n }\n `}\n }\n\n @media (pointer: coarse) {\n min-height: ${hitArea['finger-min']};\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\n/*\n Checkmark icon shown inside completed stages, tinted to match the stage foreground colour.\n /\nexport const StyledStageCompleteIcon = styled(Icon)(({\n theme: {\n components: {\n 'case-view': {\n stages: {\n status: {\n completed: { 'foreground-color': foregroundColor, background }\n }\n }\n }\n }\n }\n}) => {\n const stageForeground = calculateForegroundColor(background, foregroundColor);\n return css`\n color: ${stageForeground};\n `;\n});\n\nStyledStageCompleteIcon.defaultProps = defaultThemeProp;\n\n/\n Stage label text. Renders in bold weight when the stage is the current active stage.\n /\nexport const StyledStageText = styled(Text)<{ isCurrent?: boolean }>(\n ({ theme, isCurrent }) => css`\n font-weight: ${isCurrent ? theme.base['font-weight'].bold : theme.base['font-weight'].normal};\n `\n);\n\nStyledStageText.defaultProps = defaultThemeProp;\n\nconst stageContainerChevronStyles = (theme: DefaultTheme, readOnly: boolean \| undefined) => {\n const includeHover = !readOnly;\n return css`\n / Chevron: negative-margin overlap so consecutive stages share a boundary /\n margin-inline-start: calc(-1 ${chevronConfig.width});\n\n &:nth-of-type(2) {\n margin-inline-start: 0;\n }\n\n /* Chevron boundary indicators via ::before (left notch) and ::after (right point) pseudo-elements /\n &:not(:nth-of-type(-n + 2))::before {\n ${createChevronPseudo(\n 'calc(2 var(--chevron-border-thickness))',\n theme.base.palette['border-line'],\n chevronConfig.squareSize\n )}\n /* Elevate ::before above the button so it renders via the same pathway as ::after.\n * Without z-index, ::before (first in DOM) is painted first and then covered by the\n * button, making it only partially visible through the clip-path notch window. This\n * causes thicker interactive-state borders (3×) to look thinner on the left boundary\n * than on the right (::after, which paints last and is always fully visible).\n * The ::before tip's rightmost extent is at --stage-chevron-width from the <li> start,\n * which is before the stage text (padding-inline-start: 2 × spacing), so no content overlap.\n /\n z-index: 1;\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n ${createChevronPseudo(\n 'calc(2 var(--chevron-border-thickness))',\n theme.base.palette['border-line'],\n chevronConfig.squareSize\n )}\n }\n\n [dir='rtl'] &::before,\n [dir='rtl'] &::after {\n transform: rotateZ(-45deg) skew(-15deg, -15deg);\n }\n\n /* Chevron positioning: 45° rotated squares create visual tips via offsets:\n * left ≈ 0.86 × spacing, right ≈ 1.445 × spacing (accounts for skew correction)\n /\n ${createChevronBaseStyles(chevronConfig, 'var(--chevron-border-thickness)')}\n ${createChevronInteractiveStates(\n chevronConfig,\n 'var(--chevron-border-thickness)',\n includeHover\n )}\n\n / Thicken chevrons to visually match button top/bottom border on any colored state.\n * At 45° rotation, border appears 1/sin(45°) ≈ 0.707× thinner, so 2× border ≈ 1.4× horizontal border weight.\n /\n ${includeHover &&\n css`\n &:has(button:hover)::before,\n &:has(button:hover)::after {\n border-color: ${theme.base.palette['border-line']};\n }\n `}\n\n &:has(button:focus-visible)::before,\n &:has(button:focus-visible)::after {\n border-color: ${theme.base.palette.interactive};\n }\n\n &:has(button:active)::before,\n &:has(button:active)::after {\n border-color: ${theme.base.palette.interactive};\n }\n\n / First stage: no left notch, extended width to cover the full left edge /\n &:nth-of-type(2) > ${StyledStage} {\n --stage-chevron-width: ${chevronConfig.width};\n width: calc(100% + (2 var(--stage-chevron-width)));\n padding-inline-start: calc(var(--chevron-spacing));\n ${stageClipPath(false, true)}\n\n ${includeHover &&\n css`\n /* Inline-start interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds /\n &:hover {\n box-shadow: inset calc(2 var(--chevron-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n }\n }\n\n @media (pointer: coarse) {\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n width: calc(100% + (2 * var(--stage-chevron-width)));\n }\n }\n\n /* Last stage: no right point /\n &:nth-last-of-type(2) > ${StyledStage} {\n --stage-chevron-width: ${chevronConfig.width};\n padding-inline-end: 0;\n width: 100%;\n ${stageClipPath(true, false)}\n\n ${includeHover &&\n css`\n / Inline-end interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds /\n &:hover {\n box-shadow: inset calc(-2 var(--chevron-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n }\n }\n\n @media (pointer: coarse) {\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n }\n }\n\n /* RTL: flip clip-paths for first and last stages /\n [dir='rtl'] &:nth-of-type(2) > ${StyledStage} {\n ${stageClipPath(true, false, true)}\n }\n\n [dir='rtl'] &:nth-last-of-type(2) > ${StyledStage} {\n ${stageClipPath(false, true, true)}\n }\n\n @media (pointer: coarse) {\n margin-inline-start: calc(-1 ${chevronConfig.coarseWidth});\n\n &:not(:nth-of-type(-n + 2))::before,\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-block-start: calc(50% - ${chevronConfig.coarseSquareSize} / 2);\n width: ${chevronConfig.coarseSquareSize};\n height: ${chevronConfig.coarseSquareSize};\n }\n\n &:not(:nth-of-type(-n + 2))::before {\n inset-inline-start: calc(\n -1 * ${chevronConfig.coarseWidth} - ${chevronConfig.coarseOffsetLeft}\n );\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-inline-end: calc(\n -1 * ${chevronConfig.coarseWidth} + ${chevronConfig.coarseOffsetRight}\n );\n }\n }\n `;\n};\n\nconst stageContainerSegmentedStyles = (theme: DefaultTheme, readOnly: boolean \| undefined) => {\n const includeHover = !readOnly;\n\n return css`\n --segmented-edge-thickness: var(--chevron-border-thickness);\n\n /* Segmented: stages overlap by --segmented-width so parallelogram edges meet flush /\n margin-inline-start: calc(-1 var(--segmented-width));\n\n &:nth-of-type(2) {\n margin-inline-start: 0;\n }\n\n /* Left segmented border strip: diagonal clip-path on each stage's inline-start edge (stages 2..N).\n * The strip goes from (segmented-width, 0%) at top to (0%, 100%) at bottom of the pseudo,\n * matching the parallelogram's inline-start clip edge exactly.\n /\n &:not(:nth-of-type(-n + 2))::before {\n content: '';\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n width: calc(var(--segmented-width) + var(--segmented-edge-thickness));\n clip-path: polygon(\n var(--segmented-width) 0%,\n calc(var(--segmented-width) + var(--segmented-edge-thickness)) 0%,\n var(--segmented-edge-thickness) 100%,\n 0% 100%\n );\n background: ${theme.base.palette['border-line']};\n pointer-events: none;\n z-index: 1;\n }\n\n / Right segmented border strip: diagonal clip-path on each stage's inline-end edge (stages 1..N-1). /\n &:not(:nth-last-of-type(-n + 2))::after {\n content: '';\n position: absolute;\n inset-block: 0;\n inset-inline-end: 0;\n width: calc(var(--segmented-width) + var(--segmented-edge-thickness));\n clip-path: polygon(\n var(--segmented-width) 0%,\n calc(var(--segmented-width) + var(--segmented-edge-thickness)) 0%,\n var(--segmented-edge-thickness) 100%,\n 0% 100%\n );\n background: ${theme.base.palette['border-line']};\n pointer-events: none;\n z-index: 2;\n }\n\n / Interactive states: update pseudo background to signal hover/focus/active /\n ${includeHover &&\n css`\n &:has(button:hover) {\n --segmented-edge-thickness: var(--segmented-border-thickness);\n }\n\n &:has(button:hover)::before,\n &:has(button:hover)::after {\n background: ${theme.base.palette['border-line']};\n }\n `}\n\n &:has(button:focus-visible),\n &:has(button:active) {\n --segmented-edge-thickness: var(--segmented-border-thickness);\n }\n\n &:has(button:focus-visible)::before,\n &:has(button:focus-visible)::after,\n &:has(button:active)::before,\n &:has(button:active)::after {\n background: ${theme.base.palette.interactive};\n }\n\n / First stage (no inline-start cut): flat left edge + inset shadow edge indicator /\n &:nth-of-type(2) > ${StyledStage} {\n ${segmentedClipPath(false, true)}\n\n ${includeHover &&\n css`\n &:hover {\n box-shadow: inset var(--segmented-border-thickness) 0 0\n ${theme.base.palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-1 var(--segmented-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-1 * var(--segmented-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n }\n }\n }\n\n /* Last stage (no inline-end cut): flat right edge + inset shadow edge indicator /\n &:nth-last-of-type(2) > ${StyledStage} {\n ${segmentedClipPath(true, false)}\n\n ${includeHover &&\n css`\n &:hover {\n box-shadow: inset calc(-1 var(--segmented-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset var(--segmented-border-thickness) 0 0\n ${theme.base.palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(-1 * var(--segmented-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive};\n }\n }\n }\n\n /* RTL: flip clip-paths for first and last stage buttons /\n [dir='rtl'] &:nth-of-type(2) > ${StyledStage} {\n ${segmentedClipPath(true, false, true)}\n }\n\n [dir='rtl'] &:nth-last-of-type(2) > ${StyledStage} {\n ${segmentedClipPath(false, true, true)}\n }\n\n / RTL: mirror the pseudo clip-paths.\n * In LTR the strip goes top-right → bottom-left (polygon A 0%, A+B 0%, B 100%, 0% 100%).\n * In RTL the pseudo is positioned at the opposite physical edge via logical inset properties,\n * so the strip must go top-left → bottom-right to stay aligned with the flipped slant.\n /\n [dir='rtl'] &:not(:nth-of-type(-n + 2))::before,\n [dir='rtl'] &:not(:nth-last-of-type(-n + 2))::after {\n clip-path: polygon(\n 0% 0%,\n var(--segmented-edge-thickness) 0%,\n calc(var(--segmented-width) + var(--segmented-edge-thickness)) 100%,\n var(--segmented-width) 100%\n );\n }\n\n @media (pointer: coarse) {\n / A single CSS custom property update propagates to all margin and clip-path consumers /\n --segmented-width: ${segmentedConfig.coarseWidth};\n }\n `;\n};\n\nconst stageContainerVariants: Record<\n StageVariant,\n (theme: DefaultTheme, readOnly: boolean \| undefined) => ReturnType<typeof css>\n> = {\n chevron: stageContainerChevronStyles,\n segmented: stageContainerSegmentedStyles,\n milestone: () => css``\n};\n\n/\n `<li>` container for a single stage item. Manages negative-margin chevron overlap,\n * pseudo-element positioning, and z-index stacking for interactive states.\n /\nexport const StyledStageContainer = styled.li<{\n readOnly?: boolean;\n variant: StageVariant;\n}>(\n ({\n theme,\n theme: {\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n readOnly,\n variant: shape\n }) => {\n return css`\n display: flex;\n position: relative;\n\n / Resting z-index: for same-z siblings, DOM order determines paint order.\n * All non-last <li>s have z-index:1 so the later (right) <li>'s ::before paints on top\n * at internal boundaries; the last <li> has no z-index so its left neighbor's ::after\n * wins at the final boundary. On hover/focus/active, the interacting <li> gains z:2/3\n * and its own pseudo-element surfaces for that boundary, regardless of which side.\n /\n &:not(:nth-last-of-type(-n + 2)) {\n z-index: 1;\n }\n\n &:has(button:focus-visible),\n &:has(button:active) {\n z-index: 2;\n }\n\n ${!readOnly &&\n css`\n &:has(button:hover) {\n z-index: 3;\n }\n `}\n\n / Corner radii are shared across all shape variants /\n &:nth-of-type(2) > ${StyledStage} {\n border-start-start-radius: ${borderRadius};\n border-end-start-radius: ${borderRadius};\n }\n\n &:nth-last-of-type(2) > ${StyledStage} {\n border-start-end-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n }\n\n ${stageContainerVariants[shape](theme, readOnly)}\n `;\n }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\n\n/\n `<ol>` list of sub-step items displayed below the stages bar when a stage is expanded.\n /\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin: calc(2 ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n &:empty {\n margin-block-end: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\n/*\n Individual step `<li>` within a stage. Dims text and icon at reduced opacity when completed.\n /\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n return css`\n border-radius: 0;\n margin-block-end: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-block-end: 0;\n }\n\n & > ${StyledIcon} {\n text-align: center;\n }\n\n div {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\n/\n Small datetime label rendered beneath a step. Displayed at the `xs` font size\n * and reduced opacity.\n /\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n font-size: ${fontSize.xs};\n opacity: ${theme.base.transparency['transparent-2']};\n `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\n/\n Container `<div>` for the stage glimpse preview panel, constrained to a small max-width.\n /\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\nconst milestonePulse = keyframes`\n 0%, 100% {\n box-shadow: 0 0 0 var(--milestone-pulse-min) var(--milestone-pulse-start);\n }\n 60% {\n box-shadow: 0 0 0 var(--milestone-pulse-spread) var(--milestone-pulse-end);\n }\n`;\n\nexport const StyledMilestoneLabel = styled.span(({ theme }) => {\n return css`\n color: ${theme.base.palette['foreground-color']};\n line-height: ${theme.base['line-height']};\n text-align: center;\n align-self: stretch;\n overflow-wrap: break-word;\n padding-inline: calc(0.25 ${theme.base.spacing});\n `;\n});\n\nStyledMilestoneLabel.defaultProps = defaultThemeProp;\n\n/*\n `<li>` container for a single stage item in the 'milestone' shape variant.\n * Renders column-flex layout (milestone above, label below) and draws the\n * horizontal connector as a single line from this milestone's centre to the next\n * milestone's centre (::after), sized so every connector has an identical length.\n /\nexport const StyledMilestoneStageContainer = styled.li<{\n status: 'completed' \| 'current' \| 'pending';\n nextCompleted: boolean;\n readOnly?: boolean;\n}>(({ theme, nextCompleted, status }) => {\n const {\n base: {\n palette: { interactive, 'border-line': borderLine },\n spacing\n }\n } = theme;\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const connectorFilled = nextCompleted;\n\n return css`\n --connector-height: ${connectorFilled ? '0.25rem' : '0.125rem'};\n --connector-display: block;\n --connector-start: 50%;\n --connector-width: 100%;\n --connector-bg: ${connectorFilled ? interactive : borderLine};\n --connector-forced-bg: ${connectorFilled ? 'Highlight' : 'CanvasText'};\n display: flex;\n flex-direction: column;\n align-items: center;\n flex: 1 0 0;\n font-size: ${fontSize.xs};\n font-weight: ${status === 'current'\n ? theme.base['font-weight']['semi-bold']\n : theme.base['font-weight'].normal};\n min-width: 15ch;\n position: relative;\n gap: ${spacing};\n z-index: 1;\n\n &:nth-of-type(2):not(:nth-last-of-type(2)) {\n --connector-start: calc(var(--milestone-size) / 2);\n --connector-width: calc(200% - var(--milestone-size));\n align-items: flex-start;\n flex: 0.5 0 calc(var(--milestone-size) / 2);\n min-width: calc(7.5ch + var(--milestone-size) / 2);\n\n ${StyledMilestoneLabel} {\n text-align: start;\n }\n }\n\n &:nth-last-of-type(2):not(:nth-of-type(2)) {\n --connector-display: none;\n align-items: flex-end;\n flex: 0.5 0 calc(var(--milestone-size) / 2);\n min-width: calc(7.5ch + var(--milestone-size) / 2);\n\n ${StyledMilestoneLabel} {\n text-align: end;\n }\n }\n\n &:nth-of-type(2):nth-last-of-type(2) {\n --connector-display: none;\n align-items: center;\n flex: 1 0 0;\n }\n\n &::after {\n content: '';\n display: var(--connector-display);\n position: absolute;\n inset-block-start: calc(var(--milestone-size) / 2 - var(--connector-height) / 2);\n inset-inline-start: var(--connector-start);\n width: var(--connector-width);\n height: var(--connector-height);\n background: var(--connector-bg);\n pointer-events: none;\n\n @media (forced-colors: active) {\n background: var(--connector-forced-bg);\n }\n }\n `;\n});\n\nStyledMilestoneStageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMilestoneButton = styled.button<{\n status: 'completed' \| 'current' \| 'pending';\n readOnly?: boolean;\n}>(({ theme, status, readOnly }) => {\n const {\n base: {\n 'hit-area': hitArea,\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n shadow: { focus: focusShadow }\n },\n components: {\n button: { 'border-width': borderWidth },\n 'case-view': { stages }\n }\n } = theme;\n\n const stageForeground = calculateForegroundColor(\n stages.status[status].background,\n stages.status[status]['foreground-color']\n );\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const completedBorderColor =\n status === 'completed'\n ? tryCatch(\n () => darken(0.12, stages.status.completed.background),\n () => 'transparent'\n )\n : '';\n\n return css`\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 50%;\n width: var(--milestone-size);\n height: var(--milestone-size);\n background: ${stages.status[status].background};\n color: ${stageForeground};\n font-size: ${fontSize.s};\n font-weight: ${status === 'current'\n ? theme.base['font-weight']['semi-bold']\n : theme.base['font-weight'].normal};\n outline: none;\n border: none;\n cursor: ${readOnly ? 'default' : 'pointer'};\n transition: box-shadow calc(2 ${animationSpeed}) ${animationTiming};\n\n ${status === 'completed' &&\n css`\n box-shadow: inset 0 0 0 calc(2 * ${borderWidth}) ${completedBorderColor};\n `}\n\n &:focus-visible {\n box-shadow: ${focusShadow};\n\n @media (forced-colors: active) {\n outline: 0.125rem solid Highlight;\n outline-offset: 0.125rem;\n }\n }\n\n ${!readOnly &&\n css`\n &:hover {\n filter: brightness(0.85);\n }\n\n &:active {\n filter: brightness(0.85);\n }\n `}\n\n ${status === 'current' &&\n !readOnly &&\n css`\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: 50%;\n pointer-events: none;\n animation: ${milestonePulse} 2s ease-out infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n }\n `}\n\n /* Expanded hit area /\n &::after {\n content: '';\n position: absolute;\n width: ${hitArea['mouse-min']};\n height: ${hitArea['mouse-min']};\n inset-block-start: calc((${hitArea['mouse-min']} - var(--milestone-size)) / -2);\n inset-inline-start: calc((${hitArea['mouse-min']} - var(--milestone-size)) / -2);\n\n @media (pointer: coarse) {\n width: ${hitArea['finger-min']};\n height: ${hitArea['finger-min']};\n inset-block-start: calc((${hitArea['finger-min']} - var(--milestone-size)) / -2);\n inset-inline-start: calc((${hitArea['finger-min']} - var(--milestone-size)) / -2);\n }\n }\n\n @media (forced-colors: active) {\n border: 0.125rem solid ButtonText;\n }\n `;\n});\n\nStyledMilestoneButton.defaultProps = defaultThemeProp;\n\n/\n Visually hidden `<p>` providing an accessible description for the stages list,\n * announced by screen readers but not displayed on screen.\n */\nexport const StyledStagesDescription = styled.p`\n display: none;\n`;\n\nStyledStagesDescription.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Stages/Stages.types.d.ts CHANGED Viewed

@@ -37,8 +37,14 @@ export interface StagesProps extends BaseProps, NoChildrenProp, TestIdProp {
      * @default false
      */
     readOnly?: boolean;
+    /**
+     * Visual variant for the stage bar.
+     * @default 'chevron'
+     */
+    variant?: StageVariant;
     /** Ref to the stages container. */
     ref?: Ref<HTMLOListElement>;
 }
+export type StageVariant = 'chevron' | 'segmented' | 'milestone';
 export type StageStatus = 'completed' | 'current' | 'pending';
 //# sourceMappingURL=Stages.types.d.ts.map

package/lib/components/Stages/Stages.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErF,MAAM,WAAW,SAAS;IACxB,uCAAuC;IACvC,IAAI,EAAE,SAAS,CAAC;IAChB,wDAAwD;IACxD,SAAS,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAU;IACzB,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,wEAAwE;IACxE,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9B,uDAAuD;IACvD,SAAS,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACxE,6DAA6D;IAC7D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC"}
1	+ {"version":3,"file":"Stages.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErF,MAAM,WAAW,SAAS;IACxB,uCAAuC;IACvC,IAAI,EAAE,SAAS,CAAC;IAChB,wDAAwD;IACxD,SAAS,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAU;IACzB,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,wEAAwE;IACxE,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9B,uDAAuD;IACvD,SAAS,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACxE,6DAA6D;IAC7D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,CAAC;AAEjE,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC"}

package/lib/components/Stages/Stages.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.types.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\nexport interface StepProps {\n /** Step name - either text or link. /\n name: ReactNode;\n /* Flag determining whether step has been completed. /\n completed: boolean;\n /* Unique step identifier. /\n id: string;\n}\n\nexport interface StageProps {\n /* Stage name. /\n name: string;\n /* Unique identifier. /\n id: string;\n /* Date of completion. Accepts date object, ISO string or timestamp. /\n date?: Date \| string \| number;\n /* Flag determining whether the stage is completed. /\n completed: boolean;\n /* Steps data defined in this stage. The stage is treated as not loaded if undefined. /\n steps?: StepProps[];\n}\n\nexport interface StagesProps extends BaseProps, NoChildrenProp, TestIdProp {\n /* List of objects describing each stage and their state. /\n stages: StageProps[];\n /* Current stage id. /\n current: string;\n /* Case title (label) /\n caseTitle?: string;\n /\n Callback invoked when stage details are requested to show.\n * @param stages stages' ids requested to load details for.\n /\n onLoadStage?: (stages: StageProps['id'][]) => void;\n /\n Render stages in read-only mode.\n * @default false\n /\n readOnly?: boolean;\n /* Ref to the stages container. */\n ref?: Ref<HTMLOListElement>;\n}\n\nexport type StageStatus = 'completed' \| 'current' \| 'pending';\n"]}
1	+ {"version":3,"file":"Stages.types.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\nexport interface StepProps {\n /** Step name - either text or link. /\n name: ReactNode;\n /* Flag determining whether step has been completed. /\n completed: boolean;\n /* Unique step identifier. /\n id: string;\n}\n\nexport interface StageProps {\n /* Stage name. /\n name: string;\n /* Unique identifier. /\n id: string;\n /* Date of completion. Accepts date object, ISO string or timestamp. /\n date?: Date \| string \| number;\n /* Flag determining whether the stage is completed. /\n completed: boolean;\n /* Steps data defined in this stage. The stage is treated as not loaded if undefined. /\n steps?: StepProps[];\n}\n\nexport interface StagesProps extends BaseProps, NoChildrenProp, TestIdProp {\n /* List of objects describing each stage and their state. /\n stages: StageProps[];\n /* Current stage id. /\n current: string;\n /* Case title (label) /\n caseTitle?: string;\n /\n Callback invoked when stage details are requested to show.\n * @param stages stages' ids requested to load details for.\n /\n onLoadStage?: (stages: StageProps['id'][]) => void;\n /\n Render stages in read-only mode.\n * @default false\n /\n readOnly?: boolean;\n /\n Visual variant for the stage bar.\n * @default 'chevron'\n /\n variant?: StageVariant;\n /* Ref to the stages container. */\n ref?: Ref<HTMLOListElement>;\n}\n\nexport type StageVariant = 'chevron' \| 'segmented' \| 'milestone';\n\nexport type StageStatus = 'completed' \| 'current' \| 'pending';\n"]}

package/lib/components/Stages/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 export { default } from './Stages';
-export type { StagesProps } from './Stages.types';
+export type { StagesProps, StageVariant } from './Stages.types';
 export { getStagesTestIds } from './Stages.test-ids';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Stages/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;~~AAClD~~,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/Stages/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './Stages';\nexport type { StagesProps } from './Stages.types';\nexport { getStagesTestIds } from './Stages.test-ids';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './Stages';\nexport type { StagesProps, StageVariant } from './Stages.types';\nexport { getStagesTestIds } from './Stages.test-ids';\n"]}

package/lib/components/Tasks/TaskList.js CHANGED Viewed

@@ -109,7 +109,7 @@ export const TaskItem = withTestIds(({ testId, id, name, avatar, meta, processNa
     const summary = (_jsx(StyledSummaryItem, { visual: avatar, hasProcessName: !!processName, primary: primaryValue, secondary: meta, actions: content
             ? additionalActions && _jsx(Actions, { menuAt: 1, items: additionalActions })
             : onOpen &&
-                (openButtonIconOnly ? (_jsx(Button, { "data-testid": testIds.openTask, variant: 'secondary', icon: true, compact: true, "aria-label": `${t('go')} - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`, onClick: (e) => onOpen(id, e), children: _jsx(Icon, { name: 'arrow-right' }) })) : (_jsxs(StyledOpenTaskButton, { "data-testid": testIds.openTask, variant: 'primary', compact: detached, onClick: (e) => onOpen(id, e), children: [_jsx("span", { children: t('go') }), _jsx(VisuallyHiddenText, { children: ` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}` })] }))) }));
+                (openButtonIconOnly ? (_jsx(Button, { "data-testid": testIds.openTask, variant: 'simple', icon: true, compact: true, "aria-label": `${t('go')} - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`, onClick: (e) => onOpen(id, e), children: _jsx(Icon, { name: 'arrow-right' }) })) : (_jsxs(StyledOpenTaskButton, { "data-testid": testIds.openTask, variant: 'primary', compact: detached, onClick: (e) => onOpen(id, e), children: [_jsx("span", { children: t('go') }), _jsx(VisuallyHiddenText, { children: ` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}` })] }))) }));
     return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: { direction: 'column', gap: 2 }, item: { grow: 1 }, as: content ? undefined : StyledSummaryListItem, forwardedAs: content ? 'div' : 'li', children: [summary, content && (_jsx(StyledTaskContent, { ref: contentRef, isAnimating: isAnimating, isExpanded: isExpanded, children: content }))] }));
 }, getTaskItemTestIds);
 const TaskList = forwardRef(function TaskList({ testId, items, hasFooter = false, openButtonIconOnly = false }, ref) {

package/lib/components/Tasks/TaskList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { animations } from '@pega/cosmos-react-core/lib/styles';\nimport {\n SummaryItem,\n StyledSummaryListItem,\n Flex,\n defaultThemeProp,\n Button,\n Text,\n useI18n,\n VisuallyHiddenText,\n useTestIds,\n useLiveLog,\n debounce,\n Actions,\n withTestIds,\n StyledPrimary,\n StyledText,\n useTheme,\n useTransitionState,\n Icon,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport * as arrowRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-right.icon';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport type { TestIdProp, ActionsProps, HeadingTag } from '@pega/cosmos-react-core';\n\nimport AssignmentDetails from '../HierarchicalAssignments/AssignmentDetail';\n\nimport { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';\n\nregisterIcon(arrowRightIcon);\n\nexport interface TaskItemProps extends TestIdProp {\n id: string;\n /** Name of the task displayed in the list. /\n name: string;\n /* Name of the process for the task. /\n processName?: string;\n /* The heading tag to render task name and process as. /\n headingTag?: HeadingTag;\n /* Avatar element to represent the task's assignee. /\n avatar?: ReactNode;\n /* MetaList element with info related to the task. /\n meta?: ReactNode;\n /* Provide a callback to render a button for a task. /\n onOpen?: (id: TaskItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n /* Case identifier /\n caseId?: string;\n /* Content for the task when open. /\n content?: ReactNode;\n /* An array of actions to add to open task. /\n additionalActions?: ActionsProps['items'];\n /\n When true, animates the content expanding in.\n * @default true\n /\n animateOpen?: boolean;\n /\n When true, renders the open button as a compact icon-only arrow button.\n * @default false\n /\n openButtonIconOnly?: boolean;\n}\n\nexport interface TaskListProps extends TestIdProp {\n items: TaskItemProps[];\n hasFooter?: boolean;\n /\n When true, all task items render the open button as a compact icon-only arrow.\n * @default false\n /\n openButtonIconOnly?: boolean;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLElement>;\n}\n\ninterface Announcement {\n name: string;\n status: 'removed' \| 'added';\n}\n\nexport const StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n const speed = theme.base.animation.speed;\n\n return css`\n ${animations.subProperties}\n animation-name: ${animations.reveal}, ${animations.slideInYStart};\n --slide-in-y-start-offset: -0.5rem;\n --animation-duration: max(calc(${speed} 3), 1ms);\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 1ms;\n }\n\n > li:last-child {\n ${hasFooter\n ? css`\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n `\n : css`\n padding-block-end: 0;\n `}\n }\n `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nconst StyledTaskContent = styled.div<{ isAnimating?: boolean; isExpanded?: boolean }>(\n ({ isAnimating, isExpanded, theme }) => {\n const speed = theme.base.animation.speed;\n\n return css`\n display: grid;\n grid-template-rows: ${isExpanded ? '1fr' : '0fr'};\n opacity: ${isExpanded ? 1 : 0};\n transform: translateY(${isExpanded ? '0' : '-0.5rem'});\n transition-duration: max(calc(${speed} * 3), 1ms);\n transition-property: grid-template-rows, opacity, transform;\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 1ms;\n }\n\n > * {\n overflow: ${isAnimating ? 'hidden' : 'visible'};\n }\n `;\n }\n);\n\nStyledTaskContent.defaultProps = defaultThemeProp;\n\nconst StyledSummaryItem = styled(SummaryItem)<{ hasProcessName?: boolean }>(({\n hasProcessName\n}) => {\n return hasProcessName\n ? css`\n ${StyledPrimary} {\n display: contents;\n\n & > ${StyledText} {\n ${ellipsisOverflow};\n }\n }\n `\n : null;\n});\n\nconst StyledOpenTaskButton = styled(Button)(({ theme: { base } }) => {\n return css`\n padding: 0 calc(2 * ${base.spacing});\n `;\n});\n\nStyledOpenTaskButton.defaultProps = defaultThemeProp;\n\nexport const TaskItem = withTestIds(\n ({\n testId,\n id,\n name,\n avatar,\n meta,\n processName,\n onOpen,\n caseId,\n content,\n headingTag,\n addAnnouncement,\n additionalActions,\n animateOpen = true,\n openButtonIconOnly = false,\n ...restProps\n }: TaskItemProps & { addAnnouncement?: (announcement: Announcement) => void }) => {\n const testIds = useTestIds(testId, getTaskItemTestIds);\n const t = useI18n();\n const {\n components: {\n 'case-view': {\n summary: { detached }\n }\n }\n } = useTheme();\n\n const contentRef = useRef<HTMLDivElement>(null);\n\n const { state, set } = useTransitionState({\n ref: contentRef,\n property: 'grid-template-rows',\n states: expandCollapseStates,\n defaultState: content && !animateOpen ? 'expanded' : 'collapsed'\n });\n\n const isAnimating = state === 'expanding' \|\| state === 'collapsing';\n const isExpanded = state === 'expanded' \|\| state === 'expanding';\n\n useEffect(() => {\n const shouldBeExpanded = !!content;\n\n if (shouldBeExpanded !== isExpanded) {\n set(shouldBeExpanded ? 'expanded' : 'collapsed');\n }\n }, [content, isExpanded, set]);\n\n useEffect(() => {\n addAnnouncement?.({ name, status: 'added' });\n\n return () => {\n addAnnouncement?.({ name, status: 'removed' });\n };\n }, []);\n\n let primaryValue;\n if (processName) {\n primaryValue = (\n <AssignmentDetails\n name={name}\n headingTag={headingTag}\n processName={processName}\n active={!!content}\n />\n );\n } else {\n primaryValue = (\n <Text variant={headingTag} data-focusable-form-heading={content ? '' : undefined}>\n {name}\n </Text>\n );\n }\n\n const summary = (\n <StyledSummaryItem\n visual={avatar}\n hasProcessName={!!processName}\n primary={primaryValue}\n secondary={meta}\n actions={\n content\n ? additionalActions && <Actions menuAt={1} items={additionalActions} />\n : onOpen &&\n (openButtonIconOnly ? (\n <Button\n data-testid={testIds.openTask}\n variant='secondary'\n icon\n compact\n aria-label={`${t('go')} - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`}\n onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n >\n <Icon name='arrow-right' />\n </Button>\n ) : (\n <StyledOpenTaskButton\n data-testid={testIds.openTask}\n variant='primary'\n compact={detached}\n onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n >\n <span>{t('go')}</span>\n <VisuallyHiddenText>{` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`}</VisuallyHiddenText>\n </StyledOpenTaskButton>\n ))\n }\n />\n );\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{ direction: 'column', gap: 2 }}\n item={{ grow: 1 }}\n as={content ? undefined : StyledSummaryListItem}\n forwardedAs={content ? 'div' : 'li'}\n >\n {summary}\n {content && (\n <StyledTaskContent ref={contentRef} isAnimating={isAnimating} isExpanded={isExpanded}>\n {content}\n </StyledTaskContent>\n )}\n </Flex>\n );\n },\n getTaskItemTestIds\n);\n\nconst TaskList = forwardRef(function TaskList(\n { testId, items, hasFooter = false, openButtonIconOnly = false }: PropsWithoutRef<TaskListProps>,\n ref: TaskListProps['ref']\n) {\n const testIds = useTestIds(testId, getTaskListTestIds);\n const t = useI18n();\n const { announcePolite } = useLiveLog();\n const announcements = useRef<Announcement[]>([]);\n const mounted = useRef(false);\n\n useEffect(() => {\n mounted.current = true;\n\n return () => {\n mounted.current = false;\n };\n }, []);\n\n const debouncedAnnounce = debounce(() => {\n if (announcements.current.length > 0) {\n let tasksAdded = 0;\n let tasksRemoved = 0;\n announcements.current.forEach(item => {\n if (item.status === 'removed') {\n tasksRemoved += 1;\n } else {\n tasksAdded += 1;\n }\n });\n let message = tasksAdded ? t('tasks_added', [tasksAdded], { count: tasksAdded }) : '';\n if (tasksRemoved) {\n message += t('tasks_removed', [tasksRemoved], { count: tasksRemoved });\n }\n\n if (mounted.current) {\n announcePolite({ message });\n }\n\n announcements.current = [];\n }\n }, 2000);\n\n const addAnnouncement = (announcement: Announcement) => {\n announcements.current = [...announcements.current, announcement];\n debouncedAnnounce();\n };\n\n return (\n <Flex\n data-testid={testIds.root}\n container={{ direction: 'column' }}\n as={StyledTaskList}\n hasFooter={hasFooter}\n ref={ref}\n >\n {items.map(item => (\n <TaskItem\n {...item}\n openButtonIconOnly={item.openButtonIconOnly ?? openButtonIconOnly}\n addAnnouncement={addAnnouncement}\n key={item.id}\n />\n ))}\n </Flex>\n );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}
1	+ {"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,EACL,WAAW,EACX,qBAAqB,EACrB,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,IAAI,EACJ,OAAO,EACP,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,EACP,WAAW,EACX,aAAa,EACb,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,IAAI,EACJ,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AACrG,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAG5F,OAAO,iBAAiB,MAAM,6CAA6C,CAAC;AAE5E,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE1E,YAAY,CAAC,cAAc,CAAC,CAAC;AAmD7B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACvF,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;IAEzC,OAAO,GAAG,CAAA;MACN,UAAU,CAAC,aAAa;sBACR,UAAU,CAAC,MAAM,KAAK,UAAU,CAAC,aAAa;;qCAE/B,KAAK;;;;;;;QAOlC,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;6CACgC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;WACnE;QACH,CAAC,CAAC,GAAG,CAAA;;WAEF;;GAER,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE;IACrC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;IAEzC,OAAO,GAAG,CAAA;;4BAEc,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;iBACrC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;8BACL,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;sCACpB,KAAK;;oCAEP,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;;oBAOhD,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;;KAEjD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAA+B,CAAC,EAC3E,cAAc,EACf,EAAE,EAAE;IACH,OAAO,cAAc;QACnB,CAAC,CAAC,GAAG,CAAA;UACC,aAAa;;;gBAGP,UAAU;cACZ,gBAAgB;;;OAGvB;QACH,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IAClE,OAAO,GAAG,CAAA;0BACc,IAAI,CAAC,OAAO;GACnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,QAAQ,GAAG,WAAW,CACjC,CAAC,EACC,MAAM,EACN,EAAE,EACF,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,WAAW,EACX,MAAM,EACN,MAAM,EACN,OAAO,EACP,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,WAAW,GAAG,IAAI,EAClB,kBAAkB,GAAG,KAAK,EAC1B,GAAG,SAAS,EAC+D,EAAE,EAAE;IAC/E,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACvD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EACJ,UAAU,EAAE,EACV,WAAW,EAAE,EACX,OAAO,EAAE,EAAE,QAAQ,EAAE,EACtB,EACF,EACF,GAAG,QAAQ,EAAE,CAAC;IAEf,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,kBAAkB,CAAC;QACxC,GAAG,EAAE,UAAU;QACf,QAAQ,EAAE,oBAAoB;QAC9B,MAAM,EAAE,oBAAoB;QAC5B,YAAY,EAAE,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW;KACjE,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,KAAK,KAAK,WAAW,IAAI,KAAK,KAAK,YAAY,CAAC;IACpE,MAAM,UAAU,GAAG,KAAK,KAAK,UAAU,IAAI,KAAK,KAAK,WAAW,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,gBAAgB,GAAG,CAAC,CAAC,OAAO,CAAC;QAEnC,IAAI,gBAAgB,KAAK,UAAU,EAAE,CAAC;YACpC,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;QACnD,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;QAE7C,OAAO,GAAG,EAAE;YACV,eAAe,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,YAAY,CAAC;IACjB,IAAI,WAAW,EAAE,CAAC;QAChB,YAAY,GAAG,CACb,KAAC,iBAAiB,IAChB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,CAAC,CAAC,OAAO,GACjB,CACH,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,YAAY,GAAG,CACb,KAAC,IAAI,IAAC,OAAO,EAAE,UAAU,iCAA+B,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YAC7E,IAAI,GACA,CACR,CAAC;IACJ,CAAC;IAED,MAAM,OAAO,GAAG,CACd,KAAC,iBAAiB,IAChB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,CAAC,CAAC,WAAW,EAC7B,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,IAAI,EACf,OAAO,EACL,OAAO;YACL,CAAC,CAAC,iBAAiB,IAAI,KAAC,OAAO,IAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,iBAAiB,GAAI;YACvE,CAAC,CAAC,MAAM;gBACN,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACpB,KAAC,MAAM,mBACQ,OAAO,CAAC,QAAQ,EAC7B,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,sBACK,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EACtG,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,YAE5D,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,CACV,CAAC,CAAC,CAAC,CACF,MAAC,oBAAoB,mBACN,OAAO,CAAC,QAAQ,EAC7B,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,aAE5D,yBAAO,CAAC,CAAC,IAAI,CAAC,GAAQ,EACtB,KAAC,kBAAkB,cAAE,MAAM,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,GAAsB,IACtG,CACxB,CAAC,GAER,CACH,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,EAC/C,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,aAElC,OAAO,EACP,OAAO,IAAI,CACV,KAAC,iBAAiB,IAAC,GAAG,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,YACjF,OAAO,GACU,CACrB,IACI,CACR,CAAC;AACJ,CAAC,EACD,kBAAkB,CACnB,CAAC;AAEF,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAC3C,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,kBAAkB,GAAG,KAAK,EAAkC,EAChG,GAAyB;IAEzB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IACvD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,CAAC;IACxC,MAAM,aAAa,GAAG,MAAM,CAAiB,EAAE,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE9B,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAEvB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,iBAAiB,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,IAAI,aAAa,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACrC,IAAI,UAAU,GAAG,CAAC,CAAC;YACnB,IAAI,YAAY,GAAG,CAAC,CAAC;YACrB,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACnC,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;oBAC9B,YAAY,IAAI,CAAC,CAAC;gBACpB,CAAC;qBAAM,CAAC;oBACN,UAAU,IAAI,CAAC,CAAC;gBAClB,CAAC;YACH,CAAC,CAAC,CAAC;YACH,IAAI,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACtF,IAAI,YAAY,EAAE,CAAC;gBACjB,OAAO,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;YACzE,CAAC;YAED,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;YAC9B,CAAC;YAED,aAAa,CAAC,OAAO,GAAG,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,MAAM,eAAe,GAAG,CAAC,YAA0B,EAAE,EAAE;QACrD,aAAa,CAAC,OAAO,GAAG,CAAC,GAAG,aAAa,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QACjE,iBAAiB,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,EACzB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAEP,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,QAAQ,OACH,IAAI,EACR,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,IAAI,kBAAkB,EACjE,eAAe,EAAE,eAAe,EAChC,GAAG,EAAE,IAAI,CAAC,EAAE,GACZ,CACH,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { animations } from '@pega/cosmos-react-core/lib/styles';\nimport {\n SummaryItem,\n StyledSummaryListItem,\n Flex,\n defaultThemeProp,\n Button,\n Text,\n useI18n,\n VisuallyHiddenText,\n useTestIds,\n useLiveLog,\n debounce,\n Actions,\n withTestIds,\n StyledPrimary,\n StyledText,\n useTheme,\n useTransitionState,\n Icon,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport * as arrowRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-right.icon';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport type { TestIdProp, ActionsProps, HeadingTag } from '@pega/cosmos-react-core';\n\nimport AssignmentDetails from '../HierarchicalAssignments/AssignmentDetail';\n\nimport { getTaskListTestIds, getTaskItemTestIds } from './Tasks.test-ids';\n\nregisterIcon(arrowRightIcon);\n\nexport interface TaskItemProps extends TestIdProp {\n id: string;\n /** Name of the task displayed in the list. /\n name: string;\n /* Name of the process for the task. /\n processName?: string;\n /* The heading tag to render task name and process as. /\n headingTag?: HeadingTag;\n /* Avatar element to represent the task's assignee. /\n avatar?: ReactNode;\n /* MetaList element with info related to the task. /\n meta?: ReactNode;\n /* Provide a callback to render a button for a task. /\n onOpen?: (id: TaskItemProps['id'], e: MouseEvent<HTMLButtonElement>) => void;\n /* Case identifier /\n caseId?: string;\n /* Content for the task when open. /\n content?: ReactNode;\n /* An array of actions to add to open task. /\n additionalActions?: ActionsProps['items'];\n /\n When true, animates the content expanding in.\n * @default true\n /\n animateOpen?: boolean;\n /\n When true, renders the open button as a compact icon-only arrow button.\n * @default false\n /\n openButtonIconOnly?: boolean;\n}\n\nexport interface TaskListProps extends TestIdProp {\n items: TaskItemProps[];\n hasFooter?: boolean;\n /\n When true, all task items render the open button as a compact icon-only arrow.\n * @default false\n /\n openButtonIconOnly?: boolean;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLElement>;\n}\n\ninterface Announcement {\n name: string;\n status: 'removed' \| 'added';\n}\n\nexport const StyledTaskList = styled.ul<{ hasFooter: boolean }>(({ theme, hasFooter }) => {\n const speed = theme.base.animation.speed;\n\n return css`\n ${animations.subProperties}\n animation-name: ${animations.reveal}, ${animations.slideInYStart};\n --slide-in-y-start-offset: -0.5rem;\n --animation-duration: max(calc(${speed} 3), 1ms);\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 1ms;\n }\n\n > li:last-child {\n ${hasFooter\n ? css`\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n `\n : css`\n padding-block-end: 0;\n `}\n }\n `;\n});\n\nStyledTaskList.defaultProps = defaultThemeProp;\n\nconst StyledTaskContent = styled.div<{ isAnimating?: boolean; isExpanded?: boolean }>(\n ({ isAnimating, isExpanded, theme }) => {\n const speed = theme.base.animation.speed;\n\n return css`\n display: grid;\n grid-template-rows: ${isExpanded ? '1fr' : '0fr'};\n opacity: ${isExpanded ? 1 : 0};\n transform: translateY(${isExpanded ? '0' : '-0.5rem'});\n transition-duration: max(calc(${speed} * 3), 1ms);\n transition-property: grid-template-rows, opacity, transform;\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 1ms;\n }\n\n > * {\n overflow: ${isAnimating ? 'hidden' : 'visible'};\n }\n `;\n }\n);\n\nStyledTaskContent.defaultProps = defaultThemeProp;\n\nconst StyledSummaryItem = styled(SummaryItem)<{ hasProcessName?: boolean }>(({\n hasProcessName\n}) => {\n return hasProcessName\n ? css`\n ${StyledPrimary} {\n display: contents;\n\n & > ${StyledText} {\n ${ellipsisOverflow};\n }\n }\n `\n : null;\n});\n\nconst StyledOpenTaskButton = styled(Button)(({ theme: { base } }) => {\n return css`\n padding: 0 calc(2 * ${base.spacing});\n `;\n});\n\nStyledOpenTaskButton.defaultProps = defaultThemeProp;\n\nexport const TaskItem = withTestIds(\n ({\n testId,\n id,\n name,\n avatar,\n meta,\n processName,\n onOpen,\n caseId,\n content,\n headingTag,\n addAnnouncement,\n additionalActions,\n animateOpen = true,\n openButtonIconOnly = false,\n ...restProps\n }: TaskItemProps & { addAnnouncement?: (announcement: Announcement) => void }) => {\n const testIds = useTestIds(testId, getTaskItemTestIds);\n const t = useI18n();\n const {\n components: {\n 'case-view': {\n summary: { detached }\n }\n }\n } = useTheme();\n\n const contentRef = useRef<HTMLDivElement>(null);\n\n const { state, set } = useTransitionState({\n ref: contentRef,\n property: 'grid-template-rows',\n states: expandCollapseStates,\n defaultState: content && !animateOpen ? 'expanded' : 'collapsed'\n });\n\n const isAnimating = state === 'expanding' \|\| state === 'collapsing';\n const isExpanded = state === 'expanded' \|\| state === 'expanding';\n\n useEffect(() => {\n const shouldBeExpanded = !!content;\n\n if (shouldBeExpanded !== isExpanded) {\n set(shouldBeExpanded ? 'expanded' : 'collapsed');\n }\n }, [content, isExpanded, set]);\n\n useEffect(() => {\n addAnnouncement?.({ name, status: 'added' });\n\n return () => {\n addAnnouncement?.({ name, status: 'removed' });\n };\n }, []);\n\n let primaryValue;\n if (processName) {\n primaryValue = (\n <AssignmentDetails\n name={name}\n headingTag={headingTag}\n processName={processName}\n active={!!content}\n />\n );\n } else {\n primaryValue = (\n <Text variant={headingTag} data-focusable-form-heading={content ? '' : undefined}>\n {name}\n </Text>\n );\n }\n\n const summary = (\n <StyledSummaryItem\n visual={avatar}\n hasProcessName={!!processName}\n primary={primaryValue}\n secondary={meta}\n actions={\n content\n ? additionalActions && <Actions menuAt={1} items={additionalActions} />\n : onOpen &&\n (openButtonIconOnly ? (\n <Button\n data-testid={testIds.openTask}\n variant='simple'\n icon\n compact\n aria-label={`${t('go')} - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`}\n onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n >\n <Icon name='arrow-right' />\n </Button>\n ) : (\n <StyledOpenTaskButton\n data-testid={testIds.openTask}\n variant='primary'\n compact={detached}\n onClick={(e: MouseEvent<HTMLButtonElement>) => onOpen(id, e)}\n >\n <span>{t('go')}</span>\n <VisuallyHiddenText>{` - ${processName ? `${processName} ` : ''}${name}${caseId ? ` ${caseId}` : ''}`}</VisuallyHiddenText>\n </StyledOpenTaskButton>\n ))\n }\n />\n );\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{ direction: 'column', gap: 2 }}\n item={{ grow: 1 }}\n as={content ? undefined : StyledSummaryListItem}\n forwardedAs={content ? 'div' : 'li'}\n >\n {summary}\n {content && (\n <StyledTaskContent ref={contentRef} isAnimating={isAnimating} isExpanded={isExpanded}>\n {content}\n </StyledTaskContent>\n )}\n </Flex>\n );\n },\n getTaskItemTestIds\n);\n\nconst TaskList = forwardRef(function TaskList(\n { testId, items, hasFooter = false, openButtonIconOnly = false }: PropsWithoutRef<TaskListProps>,\n ref: TaskListProps['ref']\n) {\n const testIds = useTestIds(testId, getTaskListTestIds);\n const t = useI18n();\n const { announcePolite } = useLiveLog();\n const announcements = useRef<Announcement[]>([]);\n const mounted = useRef(false);\n\n useEffect(() => {\n mounted.current = true;\n\n return () => {\n mounted.current = false;\n };\n }, []);\n\n const debouncedAnnounce = debounce(() => {\n if (announcements.current.length > 0) {\n let tasksAdded = 0;\n let tasksRemoved = 0;\n announcements.current.forEach(item => {\n if (item.status === 'removed') {\n tasksRemoved += 1;\n } else {\n tasksAdded += 1;\n }\n });\n let message = tasksAdded ? t('tasks_added', [tasksAdded], { count: tasksAdded }) : '';\n if (tasksRemoved) {\n message += t('tasks_removed', [tasksRemoved], { count: tasksRemoved });\n }\n\n if (mounted.current) {\n announcePolite({ message });\n }\n\n announcements.current = [];\n }\n }, 2000);\n\n const addAnnouncement = (announcement: Announcement) => {\n announcements.current = [...announcements.current, announcement];\n debouncedAnnounce();\n };\n\n return (\n <Flex\n data-testid={testIds.root}\n container={{ direction: 'column' }}\n as={StyledTaskList}\n hasFooter={hasFooter}\n ref={ref}\n >\n {items.map(item => (\n <TaskItem\n {...item}\n openButtonIconOnly={item.openButtonIconOnly ?? openButtonIconOnly}\n addAnnouncement={addAnnouncement}\n key={item.id}\n />\n ))}\n </Flex>\n );\n});\n\nexport default withTestIds(TaskList, getTaskListTestIds);\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "10.0.0-build.4.6",
+  "version": "10.0.0-build.4.8",
   "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.4.6",
-    "@pega/cosmos-react-rte": "10.0.0-build.4.6",
+    "@pega/cosmos-react-core": "10.0.0-build.4.8",
+    "@pega/cosmos-react-rte": "10.0.0-build.4.8",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "polished": "^4.1.0",