@pega/cosmos-react-work 9.0.0-build.9.9 → 9.0.1

package/lib/components/Stages/Stages.styles.js

@@ -1,9 +1,106 @@
 import styled, { css } from 'styled-components';
-import { calculateFontSize, DateTimeDisplay, defaultThemeProp, Icon, Text, StyledIcon, useDirection, calculateForegroundColor } from '@pega/cosmos-react-core';
+import { calculateFontSize, DateTimeDisplay, defaultThemeProp, Icon, Text, StyledIcon, calculateForegroundColor } from '@pega/cosmos-react-core';
+const stageClipPath = (leftNotch, rightPoint, mirrored = false) => {
+    if (mirrored) {
+        // RTL: mirror the LTR clip-path polygon
+        const points = ['100% 0', '0 0'];
+        if (leftNotch) {
+            points.push('var(--stage-chevron-width) 0', '0 50%', 'var(--stage-chevron-width) 100%');
+        }
+        else {
+            points.push('0 100%');
+        }
+        points.push('100% 100%');
+        if (rightPoint) {
+            points.push('calc(100% - var(--stage-chevron-width)) 50%');
+        }
+        return `clip-path: polygon(${points.join(', ')});`;
+    }
+    const points = ['0 0', '100% 0'];
+    if (rightPoint) {
+        points.push('calc(100% - var(--stage-chevron-width)) 0', '100% 50%', 'calc(100% - var(--stage-chevron-width)) 100%');
+    }
+    else {
+        points.push('100% 100%');
+    }
+    points.push('0 100%');
+    if (leftNotch) {
+        points.push('var(--stage-chevron-width) 50%');
+    }
+    return `clip-path: polygon(${points.join(', ')});`;
+};
+// === Chevron Configuration ===
+// Centralizes spacing and border thickness via CSS custom properties set at StyledStages
+const chevronConfig = {
+    width: 'calc(1.156 * var(--chevron-spacing))',
+    coarseWidth: 'calc(1.4375 * var(--chevron-spacing))',
+    squareSize: 'calc(3 * var(--chevron-spacing))',
+    coarseSquareSize: 'calc(3.5 * var(--chevron-spacing))',
+    offsetLeft: 'calc(0.688 * var(--chevron-spacing))',
+    offsetRight: 'calc(1.156 * var(--chevron-spacing))',
+    coarseOffsetLeft: 'calc(0.688 * var(--chevron-spacing))',
+    coarseOffsetRight: 'calc(1.5 * var(--chevron-spacing))'
+};
+// === Chevron Helpers ===
+// After team discussion we decided to use logical properties throughout — `inset-block-start`
+// instead of `top`, and `border-block-start/end-width` instead of `border-top/bottom-width` —
+// for consistency with the rest of the file (which already uses logical inline-axis properties).
+const createChevronPseudo = (borderWidth, borderColor, size) => `
+  content: '';
+  position: absolute;
+  display: block;
+  inset-block-start: calc(50% - ${size} / 2);
+  width: ${size};
+  height: ${size};
+  border-style: solid;
+  border-color: ${borderColor};
+  border-inline-end-width: ${borderWidth};
+  border-inline-start-width: 0;
+  border-block-start-width: ${borderWidth};
+  border-block-end-width: 0;
+  transform: rotateZ(45deg) skew(15deg, 15deg);
+  pointer-events: none;
+`;
+const createChevronBaseStyles = (config, borderThicknessVar) => css `
+  &:not(:first-of-type)::before,
+  &:not(:last-of-type)::after {
+    border-inline-end-width: calc(1.5 * ${borderThicknessVar});
+    border-block-start-width: calc(1.5 * ${borderThicknessVar});
+  }
+
+  &:not(:first-of-type)::before {
+    inset-inline-start: calc(-1 * ${config.width} - ${config.offsetLeft});
+  }
+
+  &:not(:last-of-type)::after {
+    inset-inline-end: calc(-1 * ${config.width} + ${config.offsetRight});
+  }
+`;
+const createChevronInteractiveStates = (config, borderThicknessVar, includeHover = true) => css `
+  ${includeHover &&
+    css `
+    &:has(button:hover)::before,
+    &:has(button:hover)::after {
+      border-inline-end-width: calc(2 * ${borderThicknessVar});
+      border-block-start-width: calc(2 * ${borderThicknessVar});
+    }
+  `}
+  &:has(button:focus-visible)::before,
+  &:has(button:focus-visible)::after,
+  &:has(button:active)::before,
+  &:has(button:active)::after {
+    border-inline-end-width: calc(2 * ${borderThicknessVar});
+    border-block-start-width: calc(2 * ${borderThicknessVar});
+  }
+`;
 export const StyledStages = styled.ol(({ theme }) => {
     return css `
+    --chevron-spacing: ${theme.base.spacing};
+    --chevron-border-thickness: ${theme.components.button['border-width']};
     background-color: ${theme.base.palette['primary-background']};
     border-radius: ${theme.components.card['border-radius']};
+    display: flex;
+    padding: 0;
     width: 100%;
     overflow: hidden;
     list-style: none;
@@ -26,131 +123,86 @@ export const StyledInnerStage = styled.span(props => {
     `}
   `;
 });
-export const StyledStage = styled.button(({ theme: { base: { spacing, palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight }, components: { 'case-view': { stages } } }, status }) => {
-    const thinBorderWidth = '0.0625rem';
-    const thickBorderWidth = '0.125rem';
-    const { rtl } = useDirection();
+StyledInnerStage.defaultProps = defaultThemeProp;
+export const StyledStage = styled.button(({ theme: { base: { palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight }, components: { 'case-view': { stages } } }, status, readOnly }) => {
     const stageForeground = calculateForegroundColor(stages.status[status].background, stages.status[status]['foreground-color']);
     return css `
       background: ${stages.status[status].background};
       color: ${stageForeground};
       outline: none;
       border-color: transparent;
-      border-width: ${thinBorderWidth} 0;
+      border-width: calc(2 * var(--chevron-border-thickness)) 0;
       border-style: solid;
       position: relative;
-      height: calc(4 * ${spacing});
-      padding-inline-start: calc(2 * ${spacing});
-      padding-inline-end: ${spacing};
-      width: 100%;
-
-      ::before,
-      ::after {
-        content: '';
-        position: absolute;
-        display: block;
-        width: calc(2.25 * ${spacing});
-        height: calc(2.25 * ${spacing});
-        border-style: solid;
-        border-color: ${palette['border-line']};
-        border-inline-end-width: ${thinBorderWidth};
-        border-inline-start-width: 0;
-        border-top-width: ${rtl ? 0 : thinBorderWidth};
-        border-bottom-width: ${rtl ? thinBorderWidth : 0};
-        transform: rotateZ(45deg) skew(15deg, 15deg);
 
-        @media (pointer: coarse) {
-          width: calc(2.875 * ${spacing});
-          height: calc(2.875 * ${spacing});
-          transform: rotateZ(45deg) skew(20deg, 20deg);
-        }
+      /* Browsers do not reliably apply flex align-items: stretch to <button> elements.
+       * Adding 0.0625rem (1px at default font size) to min-height compensates so the button fills its <li> container,
+       * keeping the clipped chevron background flush with the top and bottom borders. */
+      min-height: calc(4 * var(--chevron-spacing) + 0.0625rem);
+      padding-inline-start: calc(2 * var(--chevron-spacing));
+      padding-inline-end: var(--chevron-spacing);
+      margin-inline-start: 0;
+      margin-inline-end: 0;
+      width: calc(100% + ${chevronConfig.width});
+      --stage-chevron-width: ${chevronConfig.width};
+
+      ${StyledIcon}, ${StyledInnerStage} {
+        transform: translateX(calc(-0.25 * var(--chevron-spacing)));
       }
+      ${stageClipPath(true, true)}
 
-      ::before {
-        inset-inline-start: calc(-1.125 * ${spacing});
-
-        @media (pointer: coarse) {
-          inset-inline-start: calc(-1.375 * ${spacing});
-        }
+      [dir='rtl'] & ${StyledIcon},
+      [dir='rtl'] & ${StyledInnerStage} {
+        transform: translateX(calc(0.25 * var(--chevron-spacing)));
       }
 
-      ::after {
-        inset-inline-end: calc(-1.125 * ${spacing});
-        z-index: 1;
-        background-color: ${stages.status[status].background};
-
-        @media (pointer: coarse) {
-          inset-inline-end: calc(-1.375 * ${spacing});
-        }
+      [dir='rtl'] & {
+        ${stageClipPath(true, true, true)}
       }
 
-      &:hover,
-      &:hover::before,
-      &:hover::after {
-        border-color: ${palette['border-line']};
-      }
+      ${!readOnly &&
+        css `
+        &:hover {
+          border-color: ${palette['border-line']};
+        }
+      `}
 
-      &:focus,
-      &:active,
-      &:focus::before,
-      &:active::before,
-      &:focus::after,
-      &:active::after {
+      &:focus-visible {
         border-color: ${palette.interactive};
       }
 
-      &:focus {
-        border-width: ${thickBorderWidth} 0;
-      }
-
-      &:focus::before,
-      &:focus::after {
-        z-index: 1;
-        border-inline-end-width: ${thickBorderWidth};
-        border-top-width: ${rtl ? 0 : thickBorderWidth};
-        border-bottom-width: ${rtl ? thickBorderWidth : 0};
-      }
-
-      &:focus::before {
-        pointer-events: none;
-      }
-
       &:active {
-        border-width: ${thinBorderWidth} 0;
+        border-color: ${palette.interactive};
 
         ${StyledInnerStage} {
           opacity: ${transparency['transparent-3']};
         }
       }
 
-      &:active::before,
-      &:active::after {
-        border-inline-end-width: ${thinBorderWidth};
-        border-top-width: ${rtl ? 0 : thinBorderWidth};
-        border-bottom-width: ${rtl ? thinBorderWidth : 0};
-      }
-
       &[aria-current] {
         ${StyledInnerStage} {
           font-weight: ${fontWeight.bold};
           opacity: 1;
         }
 
-        :hover {
-          ${StyledInnerStage} {
-            opacity: ${transparency['transparent-2']};
+        ${!readOnly &&
+        css `
+          &:hover {
+            ${StyledInnerStage} {
+              opacity: ${transparency['transparent-2']};
+            }
           }
-        }
+        `}
       }
 
       @media (pointer: coarse) {
-        height: ${hitArea['finger-min']};
-        padding-inline-start: calc(2.25 * ${spacing});
+        min-height: ${hitArea['finger-min']};
+        padding-inline-start: calc(2.25 * var(--chevron-spacing));
+        width: calc(100% + ${chevronConfig.coarseWidth});
+        --stage-chevron-width: ${chevronConfig.coarseWidth};
       }
 
       ${StyledIcon} {
-        color: ${palette.success};
-
         & ~ ${StyledInnerStage} {
           margin-inline-start: 0.25rem;
         }
@@ -162,59 +214,177 @@ export const StyledStage = styled.button(({ theme: { base: { spacing, palette, '
     `;
 });
 StyledStage.defaultProps = defaultThemeProp;
-export const StyledStageCompleteIcon = styled(Icon)(({ theme: { base: { palette } } }) => {
+export const StyledStageCompleteIcon = styled(Icon)(({ theme: { components: { 'case-view': { stages: { status: { completed: { 'foreground-color': foregroundColor, background } } } } } } }) => {
+    const stageForeground = calculateForegroundColor(background, foregroundColor);
     return css `
-    color: ${palette.success};
+    color: ${stageForeground};
   `;
 });
+StyledStageCompleteIcon.defaultProps = defaultThemeProp;
 export const StyledStageText = styled(Text)(({ theme, isCurrent }) => css `
     font-weight: ${isCurrent ? theme.base['font-weight'].bold : theme.base['font-weight'].normal};
   `);
 StyledStageText.defaultProps = defaultThemeProp;
-StyledStageCompleteIcon.defaultProps = defaultThemeProp;
-export const StyledStageContainer = styled.li(({ theme: { base: { spacing }, components: { card: { 'border-radius': borderRadius } } } }) => {
-    const thinBorderWidth = '0.0625rem';
-    const thickBorderWidth = '0.125rem';
+export const StyledStageContainer = styled.li(({ theme: { base: { palette }, components: { card: { 'border-radius': borderRadius } } }, readOnly }) => {
     return css `
+      display: flex;
+      position: relative;
+      margin-inline-start: calc(-1 * ${chevronConfig.width});
+
+      &:first-of-type {
+        margin-inline-start: 0;
+      }
+
+      /* Resting z-index: for same-z siblings, DOM order determines paint order.
+       * All non-last <li>s have z-index:1 so the later (right) <li>'s ::before paints on top
+       * at internal boundaries; the last <li> has no z-index so its left neighbor's ::after
+       * wins at the final boundary. On hover/focus/active, the interacting <li> gains z:2/3
+       * and its own pseudo-element surfaces for that boundary, regardless of which side. */
+      &:not(:last-of-type) {
+        z-index: 1;
+      }
+
+      &:has(button:focus-visible),
+      &:has(button:active) {
+        z-index: 2;
+      }
+
+      ${!readOnly &&
+        css `
+        &:has(button:hover) {
+          z-index: 3;
+        }
+      `}
+
+      @media (pointer: coarse) {
+        margin-inline-start: calc(-1 * ${chevronConfig.coarseWidth});
+      }
+
+      &:not(:first-of-type)::before {
+        ${createChevronPseudo('calc(2 * var(--chevron-border-thickness))', palette['border-line'], chevronConfig.squareSize)}
+        /* Elevate ::before above the button so it renders via the same pathway as ::after.
+         * Without z-index, ::before (first in DOM) is painted first and then covered by the
+         * button, making it only partially visible through the clip-path notch window. This
+         * causes thicker interactive-state borders (3×) to look thinner on the left boundary
+         * than on the right (::after, which paints last and is always fully visible).
+         * The ::before tip's rightmost extent is at --stage-chevron-width from the <li> start,
+         * which is before the stage text (padding-inline-start: 2 × spacing), so no content overlap. */
+        z-index: 1;
+      }
+
+      &:not(:last-of-type)::after {
+        ${createChevronPseudo('calc(2 * var(--chevron-border-thickness))', palette['border-line'], chevronConfig.squareSize)}
+      }
+
+      /* Chevron positioning: 45° rotated squares create visual tips via offsets:
+       * left ≈ 0.688 × spacing, right ≈ 1.15 × spacing (accounts for skew correction) */
+
+      [dir='rtl'] &::before,
+      [dir='rtl'] &::after {
+        transform: rotateZ(-45deg) skew(-15deg, -15deg);
+      }
+
+      /* Thicken chevrons to visually match button top/bottom border on any colored state.
+       * At 45° rotation, border appears 1/sin(45°) ≈ 0.707× thinner, so 2× border ≈ 1.4× horizontal border weight. */
+      ${createChevronBaseStyles(chevronConfig, 'var(--chevron-border-thickness)')}
+      ${createChevronInteractiveStates(chevronConfig, 'var(--chevron-border-thickness)', !readOnly)}
+
+      ${!readOnly &&
+        css `
+        &:has(button:hover)::before,
+        &:has(button:hover)::after {
+          border-color: ${palette['border-line']};
+        }
+      `}
+
+      &:has(button:focus-visible)::before,
+      &:has(button:focus-visible)::after {
+        border-color: ${palette.interactive};
+      }
+
+      &:has(button:active)::before,
+      &:has(button:active)::after {
+        border-color: ${palette.interactive};
+      }
+
+      @media (pointer: coarse) {
+        &:not(:first-of-type)::before,
+        &:not(:last-of-type)::after {
+          inset-block-start: calc(50% - ${chevronConfig.coarseSquareSize} / 2);
+          width: ${chevronConfig.coarseSquareSize};
+          height: ${chevronConfig.coarseSquareSize};
+        }
+
+        &:not(:first-of-type)::before {
+          inset-inline-start: calc(
+            -1 * ${chevronConfig.coarseWidth} - ${chevronConfig.coarseOffsetLeft}
+          );
+        }
+
+        &:not(:last-of-type)::after {
+          inset-inline-end: calc(
+            -1 * ${chevronConfig.coarseWidth} + ${chevronConfig.coarseOffsetRight}
+          );
+        }
+      }
+
       &:first-of-type > ${StyledStage} {
+        --stage-chevron-width: ${chevronConfig.width};
         border-start-start-radius: ${borderRadius};
         border-end-start-radius: ${borderRadius};
-        border-inline-start-width: ${thinBorderWidth};
-        padding-inline-start: ${spacing};
+        width: calc(100% + (2 * var(--stage-chevron-width)));
+        padding-inline-start: calc(var(--chevron-spacing));
+        ${stageClipPath(false, true)}
+
+        ${!readOnly &&
+        css `
+          /* Inline-start interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds */
+          &:hover {
+            box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0
+              ${palette['border-line']};
+
+            [dir='rtl'] & {
+              box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0
+                ${palette['border-line']};
+            }
+          }
+        `}
 
+        &:focus-visible,
         &:active {
-          padding-inline-start: ${spacing};
-        }
+          box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};
 
-        &:focus {
-          border-inline-start-width: ${thickBorderWidth};
-          padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});
+          [dir='rtl'] & {
+            box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${palette.interactive};
+          }
         }
 
-        ::before {
-          display: none;
+        @media (pointer: coarse) {
+          --stage-chevron-width: ${chevronConfig.coarseWidth};
+          width: calc(100% + (2 * var(--stage-chevron-width)));
         }
       }
 
       &:last-of-type > ${StyledStage} {
+        --stage-chevron-width: ${chevronConfig.width};
         border-start-end-radius: ${borderRadius};
         border-end-end-radius: ${borderRadius};
-        border-inline-end-width: ${thinBorderWidth};
-        padding-inline-end: ${spacing};
+        border-inline-end-width: calc(2 * var(--chevron-border-thickness));
+        padding-inline-end: 0;
+        width: 100%;
+        ${stageClipPath(true, false)}
 
-        &:active {
-          border-inline-end-width: ${thinBorderWidth};
-          padding-inline-end: ${spacing};
+        @media (pointer: coarse) {
+          --stage-chevron-width: ${chevronConfig.coarseWidth};
         }
+      }
 
-        &:focus {
-          border-inline-end-width: ${thickBorderWidth};
-          padding-inline-end: calc(${spacing} - ${thinBorderWidth});
-        }
+      [dir='rtl'] &:first-of-type > ${StyledStage} {
+        ${stageClipPath(true, false, true)}
+      }
 
-        ::after {
-          display: none;
-        }
+      [dir='rtl'] &:last-of-type > ${StyledStage} {
+        ${stageClipPath(false, true, true)}
       }
     `;
 });
@@ -243,11 +413,6 @@ export const StyledStep = styled.li(({ completed, theme }) => {
 
     & > ${StyledIcon} {
       text-align: center;
-
-      ${completed &&
-        css `
-        color: ${theme.base.palette.success};
-      `}
     }
 
     div {
@@ -273,4 +438,5 @@ StyledStageGlimpse.defaultProps = defaultThemeProp;
 export const StyledStagesDescription = styled.p `
   display: none;
 `;
+StyledStagesDescription.defaultProps = defaultThemeProp;
 //# sourceMappingURL=Stages.styles.js.map

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

@@ -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';\n\nimport {\n  calculateFontSize,\n  DateTimeDisplay,\n  defaultThemeProp,\n  Icon,\n  Text,\n  StyledIcon,\n  useDirection,\n  calculateForegroundColor\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.ol(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    border-radius: ${theme.components.card['border-radius']};\n    width: 100%;\n    overflow: hidden;\n    list-style: none;\n\n    &:has(:focus-visible) {\n      box-shadow: ${theme.base.shadow['focus-group']};\n    }\n  `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n  return css`\n    display: inline-block;\n    text-align: center;\n    white-space: nowrap;\n    ${props.ellipsis &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n    `}\n  `;\n});\n\nexport const StyledStage = styled.button<{ status: 'completed' | 'current' | 'pending' }>(\n  ({\n    theme: {\n      base: { spacing, palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight },\n      components: {\n        'case-view': { stages }\n      }\n    },\n    status\n  }) => {\n    const thinBorderWidth = '0.0625rem';\n    const thickBorderWidth = '0.125rem';\n    const { rtl } = useDirection();\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: ${thinBorderWidth} 0;\n      border-style: solid;\n      position: relative;\n      height: calc(4 * ${spacing});\n      padding-inline-start: calc(2 * ${spacing});\n      padding-inline-end: ${spacing};\n      width: 100%;\n\n      ::before,\n      ::after {\n        content: '';\n        position: absolute;\n        display: block;\n        width: calc(2.25 * ${spacing});\n        height: calc(2.25 * ${spacing});\n        border-style: solid;\n        border-color: ${palette['border-line']};\n        border-inline-end-width: ${thinBorderWidth};\n        border-inline-start-width: 0;\n        border-top-width: ${rtl ? 0 : thinBorderWidth};\n        border-bottom-width: ${rtl ? thinBorderWidth : 0};\n        transform: rotateZ(45deg) skew(15deg, 15deg);\n\n        @media (pointer: coarse) {\n          width: calc(2.875 * ${spacing});\n          height: calc(2.875 * ${spacing});\n          transform: rotateZ(45deg) skew(20deg, 20deg);\n        }\n      }\n\n      ::before {\n        inset-inline-start: calc(-1.125 * ${spacing});\n\n        @media (pointer: coarse) {\n          inset-inline-start: calc(-1.375 * ${spacing});\n        }\n      }\n\n      ::after {\n        inset-inline-end: calc(-1.125 * ${spacing});\n        z-index: 1;\n        background-color: ${stages.status[status].background};\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(-1.375 * ${spacing});\n        }\n      }\n\n      &:hover,\n      &:hover::before,\n      &:hover::after {\n        border-color: ${palette['border-line']};\n      }\n\n      &:focus,\n      &:active,\n      &:focus::before,\n      &:active::before,\n      &:focus::after,\n      &:active::after {\n        border-color: ${palette.interactive};\n      }\n\n      &:focus {\n        border-width: ${thickBorderWidth} 0;\n      }\n\n      &:focus::before,\n      &:focus::after {\n        z-index: 1;\n        border-inline-end-width: ${thickBorderWidth};\n        border-top-width: ${rtl ? 0 : thickBorderWidth};\n        border-bottom-width: ${rtl ? thickBorderWidth : 0};\n      }\n\n      &:focus::before {\n        pointer-events: none;\n      }\n\n      &:active {\n        border-width: ${thinBorderWidth} 0;\n\n        ${StyledInnerStage} {\n          opacity: ${transparency['transparent-3']};\n        }\n      }\n\n      &:active::before,\n      &:active::after {\n        border-inline-end-width: ${thinBorderWidth};\n        border-top-width: ${rtl ? 0 : thinBorderWidth};\n        border-bottom-width: ${rtl ? thinBorderWidth : 0};\n      }\n\n      &[aria-current] {\n        ${StyledInnerStage} {\n          font-weight: ${fontWeight.bold};\n          opacity: 1;\n        }\n\n        :hover {\n          ${StyledInnerStage} {\n            opacity: ${transparency['transparent-2']};\n          }\n        }\n      }\n\n      @media (pointer: coarse) {\n        height: ${hitArea['finger-min']};\n        padding-inline-start: calc(2.25 * ${spacing});\n      }\n\n      ${StyledIcon} {\n        color: ${palette.success};\n\n        & ~ ${StyledInnerStage} {\n          margin-inline-start: 0.25rem;\n        }\n      }\n\n      ${StyledInnerStage} {\n        opacity: ${transparency['transparent-2']};\n      }\n    `;\n  }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStageCompleteIcon = styled(Icon)(({\n  theme: {\n    base: { palette }\n  }\n}) => {\n  return css`\n    color: ${palette.success};\n  `;\n});\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\nStyledStageCompleteIcon.defaultProps = defaultThemeProp;\n\nexport const StyledStageContainer = styled.li(\n  ({\n    theme: {\n      base: { spacing },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    }\n  }) => {\n    const thinBorderWidth = '0.0625rem';\n    const thickBorderWidth = '0.125rem';\n\n    return css`\n      &:first-of-type > ${StyledStage} {\n        border-start-start-radius: ${borderRadius};\n        border-end-start-radius: ${borderRadius};\n        border-inline-start-width: ${thinBorderWidth};\n        padding-inline-start: ${spacing};\n\n        &:active {\n          padding-inline-start: ${spacing};\n        }\n\n        &:focus {\n          border-inline-start-width: ${thickBorderWidth};\n          padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n        }\n\n        ::before {\n          display: none;\n        }\n      }\n\n      &:last-of-type > ${StyledStage} {\n        border-start-end-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n        border-inline-end-width: ${thinBorderWidth};\n        padding-inline-end: ${spacing};\n\n        &:active {\n          border-inline-end-width: ${thinBorderWidth};\n          padding-inline-end: ${spacing};\n        }\n\n        &:focus {\n          border-inline-end-width: ${thickBorderWidth};\n          padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n        }\n\n        ::after {\n          display: none;\n        }\n      }\n    `;\n  }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\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\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      ${completed &&\n      css`\n        color: ${theme.base.palette.success};\n      `}\n    }\n\n    div {\n      opacity: ${textOpacity};\n    }\n  `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\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\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].sm};\n  `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\nexport const StyledStagesDescription = styled.p`\n  display: none;\n`;\n"]}
+{"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';\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  width: 'calc(1.156 * var(--chevron-spacing))',\n  coarseWidth: 'calc(1.4375 * var(--chevron-spacing))',\n  squareSize: 'calc(3 * var(--chevron-spacing))',\n  coarseSquareSize: 'calc(3.5 * var(--chevron-spacing))',\n  offsetLeft: 'calc(0.688 * var(--chevron-spacing))',\n  offsetRight: 'calc(1.156 * var(--chevron-spacing))',\n  coarseOffsetLeft: 'calc(0.688 * var(--chevron-spacing))',\n  coarseOffsetRight: 'calc(1.5 * 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(:first-of-type)::before,\n  &:not(:last-of-type)::after {\n    border-inline-end-width: calc(1.5 * ${borderThicknessVar});\n    border-block-start-width: calc(1.5 * ${borderThicknessVar});\n  }\n\n  &:not(:first-of-type)::before {\n    inset-inline-start: calc(-1 * ${config.width} - ${config.offsetLeft});\n  }\n\n  &:not(:last-of-type)::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\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    background-color: ${theme.base.palette['primary-background']};\n    border-radius: ${theme.components.card['border-radius']};\n    display: flex;\n    padding: 0;\n    width: 100%;\n    overflow: hidden;\n    list-style: none;\n\n    &:has(:focus-visible) {\n      box-shadow: ${theme.base.shadow['focus-group']};\n    }\n  `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n  return css`\n    display: inline-block;\n    text-align: center;\n    white-space: nowrap;\n    ${props.ellipsis &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n    `}\n  `;\n});\n\nStyledInnerStage.defaultProps = defaultThemeProp;\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(4 * 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      ${StyledIcon}, ${StyledInnerStage} {\n        transform: translateX(calc(-0.25 * var(--chevron-spacing)));\n      }\n      ${stageClipPath(true, true)}\n\n      [dir='rtl'] & ${StyledIcon},\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      ${StyledIcon} {\n        & ~ ${StyledInnerStage} {\n          margin-inline-start: 0.25rem;\n        }\n      }\n\n      ${StyledInnerStage} {\n        opacity: ${transparency['transparent-2']};\n      }\n    `;\n  }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\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\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\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      &:first-of-type {\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      &:not(:last-of-type) {\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(:first-of-type)::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        z-index: 1;\n      }\n\n      &:not(:last-of-type)::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.688 × spacing, right ≈ 1.15 × spacing (accounts for skew correction) */\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      ${createChevronBaseStyles(chevronConfig, 'var(--chevron-border-thickness)')}\n      ${createChevronInteractiveStates(chevronConfig, 'var(--chevron-border-thickness)', !readOnly)}\n\n      ${!readOnly &&\n      css`\n        &:has(button:hover)::before,\n        &:has(button:hover)::after {\n          border-color: ${palette['border-line']};\n        }\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(:first-of-type)::before,\n        &:not(:last-of-type)::after {\n          inset-block-start: calc(50% - ${chevronConfig.coarseSquareSize} / 2);\n          width: ${chevronConfig.coarseSquareSize};\n          height: ${chevronConfig.coarseSquareSize};\n        }\n\n        &:not(:first-of-type)::before {\n          inset-inline-start: calc(\n            -1 * ${chevronConfig.coarseWidth} - ${chevronConfig.coarseOffsetLeft}\n          );\n        }\n\n        &:not(:last-of-type)::after {\n          inset-inline-end: calc(\n            -1 * ${chevronConfig.coarseWidth} + ${chevronConfig.coarseOffsetRight}\n          );\n        }\n      }\n\n      &:first-of-type > ${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      &:last-of-type > ${StyledStage} {\n        --stage-chevron-width: ${chevronConfig.width};\n        border-start-end-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n        border-inline-end-width: calc(2 * var(--chevron-border-thickness));\n        padding-inline-end: 0;\n        width: 100%;\n        ${stageClipPath(true, false)}\n\n        @media (pointer: coarse) {\n          --stage-chevron-width: ${chevronConfig.coarseWidth};\n        }\n      }\n\n      [dir='rtl'] &:first-of-type > ${StyledStage} {\n        ${stageClipPath(true, false, true)}\n      }\n\n      [dir='rtl'] &:last-of-type > ${StyledStage} {\n        ${stageClipPath(false, true, true)}\n      }\n    `;\n  }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\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\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\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\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].sm};\n  `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\nexport const StyledStagesDescription = styled.p`\n  display: none;\n`;\n\nStyledStagesDescription.defaultProps = defaultThemeProp;\n"]}

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

@@ -32,6 +32,11 @@ export interface StagesProps extends BaseProps, NoChildrenProp {
      * @param stages stages' ids requested to load details for.
      */
     onLoadStage?: (stages: StageProps['id'][]) => void;
+    /**
+     * Render stages in read-only mode.
+     * @default false
+     */
+    readOnly?: boolean;
     /** Ref to the stages container. */
     ref?: Ref<HTMLDivElement>;
 }

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

@@ -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,MAAM,yBAAyB,CAAC;AAEzE,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;IAC5D,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,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC"}
+{"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,MAAM,yBAAyB,CAAC;AAEzE,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;IAC5D,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,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC"}

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

@@ -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 } 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 {\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  /** Ref to the stages container. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type StageStatus = 'completed' | 'current' | 'pending';\n"]}
+{"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 } 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 {\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<HTMLDivElement>;\n}\n\nexport type StageStatus = 'completed' | 'current' | 'pending';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAEV,+BAA+B,EAIhC,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAgCpE,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CA2VpE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAEV,+BAA+B,EAKhC,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAOpE,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CAkSpE,CAAC;AAEF,eAAe,YAAY,CAAC"}