@pega/cosmos-react-work 10.0.0-build.2.1 → 10.0.0-build.2.10
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.
- package/lib/components/CaseView/CaseView.styles.d.ts.map +1 -1
- package/lib/components/CaseView/CaseView.styles.js +7 -3
- package/lib/components/CaseView/CaseView.styles.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.js +168 -26
- package/lib/components/GenAICoach/GenAICoach.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts +216 -9
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.js +142 -57
- package/lib/components/GenAICoach/GenAICoach.styles.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.types.d.ts +14 -2
- package/lib/components/GenAICoach/GenAICoach.types.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.types.js.map +1 -1
- package/lib/components/GenAICoach/GenAIMessage.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAIMessage.js +22 -17
- package/lib/components/GenAICoach/GenAIMessage.js.map +1 -1
- package/lib/components/Stages/Stages.styles.d.ts +43 -0
- package/lib/components/Stages/Stages.styles.d.ts.map +1 -1
- package/lib/components/Stages/Stages.styles.js +110 -30
- package/lib/components/Stages/Stages.styles.js.map +1 -1
- package/package.json +3 -3
|
@@ -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 width: 'calc(1.156 * var(--chevron-spacing))',\n // Same horizontal projection for coarse/touch pointer (larger square, proportionally wider point).\n coarseWidth: 'calc(1.4375 * var(--chevron-spacing))',\n // Side length of the rotated border-square forming the chevron (fine pointer: 3× base spacing).\n squareSize: 'calc(3 * var(--chevron-spacing))',\n // Side length of the rotated border-square for coarse/touch pointer (4× base spacing).\n coarseSquareSize: 'calc(4 * var(--chevron-spacing))',\n // Distance to inset the ::before notch from the left edge of the stage (fine pointer).\n // 0.688 ≈ width − half-border-overlap, keeps the notch flush with the preceding chevron point.\n offsetLeft: 'calc(0.688 * 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.156 * var(--chevron-spacing))',\n // Coarse-pointer equivalents of offsetLeft/offsetRight, scaled to match coarseWidth/coarseSquareSize.\n coarseOffsetLeft: 'calc(1.03 * var(--chevron-spacing))',\n coarseOffsetRight: 'calc(1.4375 * 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\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 position: relative;\n width: 100%;\n overflow: hidden;\n border-radius: ${theme.components.card['border-radius']};\n mask-image: linear-gradient(black, black),\n linear-gradient(\n to right,\n transparent 0,\n black var(--stages-fade-start),\n black calc(100% - var(--stages-fade-end)),\n transparent 100%\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 0,\n black var(--stages-fade-end),\n black calc(100% - var(--stages-fade-start)),\n transparent 100%\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 0,\n black var(--stages-fade-start),\n black calc(100% - var(--stages-fade-end)),\n transparent 100%\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 0,\n black var(--stages-fade-end),\n black calc(100% - var(--stages-fade-start)),\n transparent 100%\n );\n }\n }\n `;\n});\n\nStyledStagesWrapper.defaultProps = defaultThemeProp;\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 /* 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\nStyledSentinel.defaultProps = defaultThemeProp;\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\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 ${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\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 &: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 &: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 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.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(: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\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"]}
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "10.0.0-build.2.
|
|
3
|
+
"version": "10.0.0-build.2.10",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"build": "tsc -b tsconfig.build.json"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@pega/cosmos-react-core": "10.0.0-build.2.
|
|
18
|
-
"@pega/cosmos-react-rte": "10.0.0-build.2.
|
|
17
|
+
"@pega/cosmos-react-core": "10.0.0-build.2.10",
|
|
18
|
+
"@pega/cosmos-react-rte": "10.0.0-build.2.10",
|
|
19
19
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
20
20
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|
|
21
21
|
"polished": "^4.1.0",
|