npm - @pega/cosmos-react-work - Versions diffs - 10.0.0-build.4.23 → 10.0.0-build.4.25 - Mend

@pega/cosmos-react-work 10.0.0-build.4.23 → 10.0.0-build.4.25

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

Files changed (11) hide show

package/lib/components/GenAICoach/Questionnaire.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Questionnaire.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/Questionnaire.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAKV,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAgN5B,QAAA,MAAM,aAAa,GAAI,8BAA8B,kBAAkB,~~mDA+FtE~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"Questionnaire.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/Questionnaire.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAKV,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAgN5B,QAAA,MAAM,aAAa,GAAI,8BAA8B,kBAAkB,mDAuGtE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/GenAICoach/Questionnaire.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Card, CardContent, CardFooter, CardHeader, Checkbox, CheckboxGroup, ComboBox, Flex, Icon, RadioButton, RadioButtonGroup, Text, useI18n, registerIcon } from '@pega/cosmos-react-core';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import { StyledComboBoxWrapper, StyledQuestionBlock, StyledQuestionnaireCard } from './GenAICoach.styles';
@@ -121,6 +121,13 @@ const Questionnaire = ({ data, onChange, onCancel }) => {
     const totalSteps = questions.length;
     const [currentStep, setCurrentStep] = useState(0);
     const [answers, setAnswers] = useState(() => buildInitialAnswers(questions));
+    // Resync local answers/step whenever a new questionnaire arrives. Relying only on the parent's
+    // `key` remount isn't enough here, since two different conversations can share the same field
+    // names, which would otherwise reuse this instance and carry over the previous chat's selections.
+    useEffect(() => {
+        setCurrentStep(0);
+        setAnswers(buildInitialAnswers(questions));
+    }, [data]);
     const handleChange = useCallback((field, key, selected) => {
         setAnswers(prev => {
             const question = questions.find(q => q.field === field);

package/lib/components/GenAICoach/Questionnaire.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Questionnaire.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/Questionnaire.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ChangeEvent } from 'react';\nimport { useCallback, useMemo, useState } from 'react';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n Checkbox,\n CheckboxGroup,\n ComboBox,\n Flex,\n Icon,\n RadioButton,\n RadioButtonGroup,\n Text,\n useI18n,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type {\n FormAnswer,\n OptionItem,\n Question,\n QuestionItemProps,\n QuestionnaireProps\n} from './GenAICoach.types';\nimport {\n StyledComboBoxWrapper,\n StyledQuestionBlock,\n StyledQuestionnaireCard\n} from './GenAICoach.styles';\nimport { getSelectedKeys } from './GenAICoach.utils';\n\nregisterIcon(timesIcon);\n\nconst getLabel = (option: OptionItem): string => option.displayLabel ?? option.label;\n\nconst createAnswer = (question: Question): FormAnswer => ({\n value: getSelectedKeys(question),\n questionText: question.questionText\n});\n\nconst buildInitialAnswers = (questions: Question[]): Record<string, FormAnswer> =>\n Object.fromEntries(questions.map(q => [q.field, createAnswer(q)]));\n\nconst splitOptions = (\n optionItems: OptionItem[],\n maxInlineOptions: number\n): { inlineOptions: OptionItem[]; overflowOptions: OptionItem[] } => {\n if (optionItems.length <= maxInlineOptions) {\n return { inlineOptions: optionItems, overflowOptions: [] };\n }\n\n return {\n inlineOptions: optionItems.slice(0, maxInlineOptions - 1),\n overflowOptions: optionItems.slice(maxInlineOptions - 1)\n };\n};\n\nconst QuestionItem = ({ question, answer, onChange }: QuestionItemProps) => {\n const t = useI18n();\n\n const isSingleSelect = question.type === 'single';\n const maxInlineOptions = 5;\n\n const { inlineOptions, overflowOptions } = splitOptions(question.optionItems, maxInlineOptions);\n const hasOverflow = overflowOptions.length > 0;\n\n const [searchTerm, setSearchTerm] = useState('');\n\n const overflowKeySet = useMemo(() => new Set(overflowOptions.map(o => o.key)), [overflowOptions]);\n const overflowOptionsByKey = useMemo(\n () => new Map(overflowOptions.map(o => [o.key, o])),\n [overflowOptions]\n );\n const activeOverflowKey = answer.value.find(v => overflowKeySet.has(v)) ?? '';\n const isOverflowSelected = activeOverflowKey.length > 0;\n\n const isSelected = (key: string) => answer.value.includes(key);\n\n const clearOverflowState = () => {\n setSearchTerm('');\n };\n\n const handleInlineSelect = (key: string) => {\n clearOverflowState();\n onChange(question.field, key, true);\n };\n\n const overflowMenuItems: MenuItemProps[] = useMemo(() => {\n const search = searchTerm.toLowerCase();\n\n return overflowOptions\n .map(opt => ({\n id: opt.key,\n primary: getLabel(opt),\n selected: isSelected(opt.key)\n }))\n .filter(item => !search \|\| item.primary.toLowerCase().includes(search));\n }, [searchTerm, answer]);\n\n const overflowSelection = useMemo(() => {\n if (isSingleSelect) {\n if (!activeOverflowKey) return undefined;\n\n const option = overflowOptionsByKey.get(activeOverflowKey);\n const displayText = option ? getLabel(option) : activeOverflowKey;\n\n return { items: { id: activeOverflowKey, text: displayText } };\n }\n\n const selectedOverflowValues = answer.value.filter(v => overflowKeySet.has(v));\n\n if (selectedOverflowValues.length === 0) return undefined;\n\n return {\n items: selectedOverflowValues.map(key => {\n const option = overflowOptionsByKey.get(key);\n return { id: key, text: option ? getLabel(option) : key };\n }),\n onRemove: (id: MenuItemProps['id']) => onChange(question.field, id, false)\n };\n }, [\n isSingleSelect,\n activeOverflowKey,\n answer,\n overflowKeySet,\n overflowOptionsByKey,\n question.field,\n onChange\n ]);\n\n const handleOverflowSelect = useCallback(\n (id: MenuItemProps['id']) => {\n if (isSingleSelect) {\n const option = overflowOptionsByKey.get(id);\n\n if (option) {\n setSearchTerm('');\n onChange(question.field, option.key, true);\n }\n } else {\n onChange(question.field, id, !isSelected(id));\n }\n },\n [isSingleSelect, answer, question.field, onChange, overflowOptionsByKey]\n );\n\n const activateOverflow = () => {\n setSearchTerm('');\n };\n\n const deselectAllOverflow = () => {\n answer.value\n .filter(v => overflowKeySet.has(v))\n .forEach(key => onChange(question.field, key, false));\n };\n\n const otherLabel = t('other');\n\n const overflowComboBox = hasOverflow ? (\n <StyledComboBoxWrapper>\n <ComboBox\n labelHidden\n label={otherLabel}\n placeholder={otherLabel}\n value={searchTerm}\n selected={overflowSelection}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}\n onBlur={() => setSearchTerm('')}\n mode={isSingleSelect ? undefined : 'multi-select'}\n menu={{ items: overflowMenuItems, onItemClick: handleOverflowSelect }}\n />\n </StyledComboBoxWrapper>\n ) : null;\n\n const inlineRadioButtons = inlineOptions.map(option => (\n <RadioButton\n key={option.key}\n label={getLabel(option)}\n name={question.field}\n checked={isSelected(option.key)}\n onChange={() => handleInlineSelect(option.key)}\n />\n ));\n\n const inlineCheckboxes = inlineOptions.map(option => (\n <Checkbox\n key={option.key}\n label={getLabel(option)}\n checked={isSelected(option.key)}\n onChange={e => onChange(question.field, option.key, e.target.checked)}\n />\n ));\n\n return (\n <StyledQuestionBlock>\n {isSingleSelect ? (\n <RadioButtonGroup name={question.field} label={question.questionText} labelHidden>\n {overflowComboBox\n ? [\n ...inlineRadioButtons,\n <RadioButton\n key='overflow'\n label={overflowComboBox}\n name={question.field}\n checked={isOverflowSelected}\n onChange={activateOverflow}\n />\n ]\n : inlineRadioButtons}\n </RadioButtonGroup>\n ) : (\n <CheckboxGroup label={question.questionText} labelHidden>\n {overflowComboBox\n ? [\n ...inlineCheckboxes,\n <Checkbox\n key='overflow'\n label={overflowComboBox}\n checked={answer.value.some(v => overflowKeySet.has(v))}\n onChange={e => {\n if (!e.target.checked) deselectAllOverflow();\n }}\n />\n ]\n : inlineCheckboxes}\n </CheckboxGroup>\n )}\n </StyledQuestionBlock>\n );\n};\n\nconst Questionnaire = ({ data, onChange, onCancel }: QuestionnaireProps) => {\n const t = useI18n();\n const questions = data.questions ?? [];\n const totalSteps = questions.length;\n\n const [currentStep, setCurrentStep] = useState(0);\n const [answers, setAnswers] = useState<Record<string, FormAnswer>>(() =>\n buildInitialAnswers(questions)\n );\n\n const handleChange = useCallback(\n (field: string, key: string, selected: boolean) => {\n setAnswers(prev => {\n const question = questions.find(q => q.field === field);\n const currentValues = prev[field]?.value ?? [];\n let updatedValues: string[];\n\n if (question?.type === 'single') {\n updatedValues = selected ? [key] : [];\n } else {\n updatedValues = selected ? [...currentValues, key] : currentValues.filter(v => v !== key);\n }\n\n const nextAnswers = {\n ...prev,\n [field]: {\n questionText: question?.questionText ?? prev[field]?.questionText ?? '',\n value: updatedValues\n }\n };\n\n onChange(nextAnswers);\n\n return nextAnswers;\n });\n },\n [onChange, questions]\n );\n\n if (totalSteps === 0) return null;\n\n const activeQuestion = questions[currentStep];\n const activeAnswer = answers[activeQuestion.field] ?? createAnswer(activeQuestion);\n const isMultiStep = totalSteps > 1;\n\n return (\n <Card as={StyledQuestionnaireCard}>\n <CardHeader\n actions={\n <Button variant='simple' icon onClick={onCancel} aria-label={t('dismiss')}>\n <Icon name='times' />\n </Button>\n }\n >\n <Text variant='h4'>{activeQuestion.questionText}</Text>\n </CardHeader>\n\n <CardContent>\n <QuestionItem\n key={activeQuestion.field}\n question={activeQuestion}\n answer={activeAnswer}\n onChange={handleChange}\n />\n </CardContent>\n\n {isMultiStep && (\n <CardFooter justify='center'>\n <Flex container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}>\n <Button\n variant='simple'\n icon\n onClick={() => setCurrentStep(s => s - 1)}\n disabled={currentStep === 0}\n aria-label={t('pagination_prev')}\n >\n <Icon name='caret-left' />\n </Button>\n\n <Text variant='secondary'>{t('x_of_y', [currentStep + 1, totalSteps])}</Text>\n\n <Button\n variant='simple'\n icon\n onClick={() => setCurrentStep(s => s + 1)}\n disabled={currentStep === totalSteps - 1}\n aria-label={t('pagination_next')}\n >\n <Icon name='caret-right' />\n </Button>\n </Flex>\n </CardFooter>\n )}\n </Card>\n );\n};\n\nexport default Questionnaire;\n"]}
1	+ {"version":3,"file":"Questionnaire.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/Questionnaire.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ChangeEvent } from 'react';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n Checkbox,\n CheckboxGroup,\n ComboBox,\n Flex,\n Icon,\n RadioButton,\n RadioButtonGroup,\n Text,\n useI18n,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type {\n FormAnswer,\n OptionItem,\n Question,\n QuestionItemProps,\n QuestionnaireProps\n} from './GenAICoach.types';\nimport {\n StyledComboBoxWrapper,\n StyledQuestionBlock,\n StyledQuestionnaireCard\n} from './GenAICoach.styles';\nimport { getSelectedKeys } from './GenAICoach.utils';\n\nregisterIcon(timesIcon);\n\nconst getLabel = (option: OptionItem): string => option.displayLabel ?? option.label;\n\nconst createAnswer = (question: Question): FormAnswer => ({\n value: getSelectedKeys(question),\n questionText: question.questionText\n});\n\nconst buildInitialAnswers = (questions: Question[]): Record<string, FormAnswer> =>\n Object.fromEntries(questions.map(q => [q.field, createAnswer(q)]));\n\nconst splitOptions = (\n optionItems: OptionItem[],\n maxInlineOptions: number\n): { inlineOptions: OptionItem[]; overflowOptions: OptionItem[] } => {\n if (optionItems.length <= maxInlineOptions) {\n return { inlineOptions: optionItems, overflowOptions: [] };\n }\n\n return {\n inlineOptions: optionItems.slice(0, maxInlineOptions - 1),\n overflowOptions: optionItems.slice(maxInlineOptions - 1)\n };\n};\n\nconst QuestionItem = ({ question, answer, onChange }: QuestionItemProps) => {\n const t = useI18n();\n\n const isSingleSelect = question.type === 'single';\n const maxInlineOptions = 5;\n\n const { inlineOptions, overflowOptions } = splitOptions(question.optionItems, maxInlineOptions);\n const hasOverflow = overflowOptions.length > 0;\n\n const [searchTerm, setSearchTerm] = useState('');\n\n const overflowKeySet = useMemo(() => new Set(overflowOptions.map(o => o.key)), [overflowOptions]);\n const overflowOptionsByKey = useMemo(\n () => new Map(overflowOptions.map(o => [o.key, o])),\n [overflowOptions]\n );\n const activeOverflowKey = answer.value.find(v => overflowKeySet.has(v)) ?? '';\n const isOverflowSelected = activeOverflowKey.length > 0;\n\n const isSelected = (key: string) => answer.value.includes(key);\n\n const clearOverflowState = () => {\n setSearchTerm('');\n };\n\n const handleInlineSelect = (key: string) => {\n clearOverflowState();\n onChange(question.field, key, true);\n };\n\n const overflowMenuItems: MenuItemProps[] = useMemo(() => {\n const search = searchTerm.toLowerCase();\n\n return overflowOptions\n .map(opt => ({\n id: opt.key,\n primary: getLabel(opt),\n selected: isSelected(opt.key)\n }))\n .filter(item => !search \|\| item.primary.toLowerCase().includes(search));\n }, [searchTerm, answer]);\n\n const overflowSelection = useMemo(() => {\n if (isSingleSelect) {\n if (!activeOverflowKey) return undefined;\n\n const option = overflowOptionsByKey.get(activeOverflowKey);\n const displayText = option ? getLabel(option) : activeOverflowKey;\n\n return { items: { id: activeOverflowKey, text: displayText } };\n }\n\n const selectedOverflowValues = answer.value.filter(v => overflowKeySet.has(v));\n\n if (selectedOverflowValues.length === 0) return undefined;\n\n return {\n items: selectedOverflowValues.map(key => {\n const option = overflowOptionsByKey.get(key);\n return { id: key, text: option ? getLabel(option) : key };\n }),\n onRemove: (id: MenuItemProps['id']) => onChange(question.field, id, false)\n };\n }, [\n isSingleSelect,\n activeOverflowKey,\n answer,\n overflowKeySet,\n overflowOptionsByKey,\n question.field,\n onChange\n ]);\n\n const handleOverflowSelect = useCallback(\n (id: MenuItemProps['id']) => {\n if (isSingleSelect) {\n const option = overflowOptionsByKey.get(id);\n\n if (option) {\n setSearchTerm('');\n onChange(question.field, option.key, true);\n }\n } else {\n onChange(question.field, id, !isSelected(id));\n }\n },\n [isSingleSelect, answer, question.field, onChange, overflowOptionsByKey]\n );\n\n const activateOverflow = () => {\n setSearchTerm('');\n };\n\n const deselectAllOverflow = () => {\n answer.value\n .filter(v => overflowKeySet.has(v))\n .forEach(key => onChange(question.field, key, false));\n };\n\n const otherLabel = t('other');\n\n const overflowComboBox = hasOverflow ? (\n <StyledComboBoxWrapper>\n <ComboBox\n labelHidden\n label={otherLabel}\n placeholder={otherLabel}\n value={searchTerm}\n selected={overflowSelection}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}\n onBlur={() => setSearchTerm('')}\n mode={isSingleSelect ? undefined : 'multi-select'}\n menu={{ items: overflowMenuItems, onItemClick: handleOverflowSelect }}\n />\n </StyledComboBoxWrapper>\n ) : null;\n\n const inlineRadioButtons = inlineOptions.map(option => (\n <RadioButton\n key={option.key}\n label={getLabel(option)}\n name={question.field}\n checked={isSelected(option.key)}\n onChange={() => handleInlineSelect(option.key)}\n />\n ));\n\n const inlineCheckboxes = inlineOptions.map(option => (\n <Checkbox\n key={option.key}\n label={getLabel(option)}\n checked={isSelected(option.key)}\n onChange={e => onChange(question.field, option.key, e.target.checked)}\n />\n ));\n\n return (\n <StyledQuestionBlock>\n {isSingleSelect ? (\n <RadioButtonGroup name={question.field} label={question.questionText} labelHidden>\n {overflowComboBox\n ? [\n ...inlineRadioButtons,\n <RadioButton\n key='overflow'\n label={overflowComboBox}\n name={question.field}\n checked={isOverflowSelected}\n onChange={activateOverflow}\n />\n ]\n : inlineRadioButtons}\n </RadioButtonGroup>\n ) : (\n <CheckboxGroup label={question.questionText} labelHidden>\n {overflowComboBox\n ? [\n ...inlineCheckboxes,\n <Checkbox\n key='overflow'\n label={overflowComboBox}\n checked={answer.value.some(v => overflowKeySet.has(v))}\n onChange={e => {\n if (!e.target.checked) deselectAllOverflow();\n }}\n />\n ]\n : inlineCheckboxes}\n </CheckboxGroup>\n )}\n </StyledQuestionBlock>\n );\n};\n\nconst Questionnaire = ({ data, onChange, onCancel }: QuestionnaireProps) => {\n const t = useI18n();\n const questions = data.questions ?? [];\n const totalSteps = questions.length;\n\n const [currentStep, setCurrentStep] = useState(0);\n const [answers, setAnswers] = useState<Record<string, FormAnswer>>(() =>\n buildInitialAnswers(questions)\n );\n\n // Resync local answers/step whenever a new questionnaire arrives. Relying only on the parent's\n // `key` remount isn't enough here, since two different conversations can share the same field\n // names, which would otherwise reuse this instance and carry over the previous chat's selections.\n useEffect(() => {\n setCurrentStep(0);\n setAnswers(buildInitialAnswers(questions));\n }, [data]);\n\n const handleChange = useCallback(\n (field: string, key: string, selected: boolean) => {\n setAnswers(prev => {\n const question = questions.find(q => q.field === field);\n const currentValues = prev[field]?.value ?? [];\n let updatedValues: string[];\n\n if (question?.type === 'single') {\n updatedValues = selected ? [key] : [];\n } else {\n updatedValues = selected ? [...currentValues, key] : currentValues.filter(v => v !== key);\n }\n\n const nextAnswers = {\n ...prev,\n [field]: {\n questionText: question?.questionText ?? prev[field]?.questionText ?? '',\n value: updatedValues\n }\n };\n\n onChange(nextAnswers);\n\n return nextAnswers;\n });\n },\n [onChange, questions]\n );\n\n if (totalSteps === 0) return null;\n\n const activeQuestion = questions[currentStep];\n const activeAnswer = answers[activeQuestion.field] ?? createAnswer(activeQuestion);\n const isMultiStep = totalSteps > 1;\n\n return (\n <Card as={StyledQuestionnaireCard}>\n <CardHeader\n actions={\n <Button variant='simple' icon onClick={onCancel} aria-label={t('dismiss')}>\n <Icon name='times' />\n </Button>\n }\n >\n <Text variant='h4'>{activeQuestion.questionText}</Text>\n </CardHeader>\n\n <CardContent>\n <QuestionItem\n key={activeQuestion.field}\n question={activeQuestion}\n answer={activeAnswer}\n onChange={handleChange}\n />\n </CardContent>\n\n {isMultiStep && (\n <CardFooter justify='center'>\n <Flex container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}>\n <Button\n variant='simple'\n icon\n onClick={() => setCurrentStep(s => s - 1)}\n disabled={currentStep === 0}\n aria-label={t('pagination_prev')}\n >\n <Icon name='caret-left' />\n </Button>\n\n <Text variant='secondary'>{t('x_of_y', [currentStep + 1, totalSteps])}</Text>\n\n <Button\n variant='simple'\n icon\n onClick={() => setCurrentStep(s => s + 1)}\n disabled={currentStep === totalSteps - 1}\n aria-label={t('pagination_next')}\n >\n <Icon name='caret-right' />\n </Button>\n </Flex>\n </CardFooter>\n )}\n </Card>\n );\n};\n\nexport default Questionnaire;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,+BAA+B,EAAgB,MAAM,yBAAyB,CAAC;AAG7F,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;;;;~~AAsV~~/D,wBAAqD"}
1	+ {"version":3,"file":"Stages.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,+BAA+B,EAAgB,MAAM,yBAAyB,CAAC;AAG7F,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;;;;AAyV/D,wBAAqD"}

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

@@ -164,7 +164,8 @@ const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadSt
                                 isCurrent,
                                 hasToLoad
                             });
-                            return (_jsxs(Fragment, { children: [isMilestoneVariant ? (_jsxs(StyledMilestoneStageContainer, { status: stageStatus, nextCompleted: stages[stageIndex + 1]?.completed ?? false, readOnly: readOnly, children: [_jsx(StyledMilestoneButton, { status: stageStatus, readOnly: readOnly, ...stageButtonProps, children: stage.completed ? (_jsx(Icon, { name: 'check' })) : (_jsx("span", { "aria-hidden": 'true', children: stageIndex + 1 })) }), _jsx(StyledMilestoneLabel, { children: stage.name })] })) : (_jsx(Flex, { as: StyledStageContainer, item: { grow: 1, shrink: 0 }, readOnly: readOnly, variant: variant, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: { grow: 1, shrink: 0 }, status: stageStatus, readOnly: readOnly, variant: variant, ...stageButtonProps, children: _jsxs(StyledInnerStage, { children: [stage.completed && _jsx(Icon, { name: 'check' }), stage.name] }) }) })), target && targetStageId === stage.id && isSmallOrAbove && !showModal && (_jsx(InfoDialog, { id: dialogId, heading: stage.name, target: target, progress: hasToLoad ? t('loading') : undefined, onDismiss: () => {
+                            return (_jsxs(Fragment, { children: [isMilestoneVariant ? (_jsxs(StyledMilestoneStageContainer, { status: stageStatus, connectorFilled: (stages[stageIndex + 1]?.completed ?? false) ||
+                                            stages[stageIndex + 1]?.id === current, readOnly: readOnly, children: [_jsx(StyledMilestoneButton, { status: stageStatus, readOnly: readOnly, ...stageButtonProps, children: stage.completed ? (_jsx(Icon, { name: 'check' })) : (_jsx("span", { "aria-hidden": 'true', children: stageIndex + 1 })) }), _jsx(StyledMilestoneLabel, { children: stage.name })] })) : (_jsx(Flex, { as: StyledStageContainer, item: { grow: 1, shrink: 0 }, readOnly: readOnly, variant: variant, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: { grow: 1, shrink: 0 }, status: stageStatus, readOnly: readOnly, variant: variant, ...stageButtonProps, children: _jsxs(StyledInnerStage, { children: [stage.completed && _jsx(Icon, { name: 'check' }), stage.name] }) }) })), target && targetStageId === stage.id && isSmallOrAbove && !showModal && (_jsx(InfoDialog, { id: dialogId, heading: stage.name, target: target, progress: hasToLoad ? t('loading') : undefined, onDismiss: () => {
                                             setTarget(null);
                                             setTargetStageId(null);
                                         }, placement: 'bottom', children: !hasToLoad && (_jsxs(StyledStageGlimpse, { children: [_jsx(StageGlimpse, { stage: stage }), _jsx(Button, { variant: 'secondary', onClick: openModal, children: t('stages_see_full_lifecycle') })] })) }))] }, stage.id));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n Icon,\n registerIcon,\n Flex,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n useModalManager,\n useConsolidatedRef,\n useUID,\n InfoDialog,\n useArrows,\n useDirection,\n useAfterInitialEffect,\n VisuallyHiddenText,\n withTestIds,\n useTestIds,\n useElement,\n useFocusWithin,\n isInstance,\n getActiveElement\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, ModalMethods } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps, StageStatus } from './Stages.types';\nimport { getStagesTestIds } from './Stages.test-ids';\nimport StageGlimpse from './StageGlimpse';\nimport {\n StyledInnerStage,\n StyledStageCompleteIcon,\n StyledStage,\n StyledStageContainer,\n StyledStageGlimpse,\n StyledStages,\n StyledStagesWrapper,\n StyledStagesDescription,\n StyledStageText,\n StyledSentinel,\n StyledMilestoneStageContainer,\n StyledMilestoneButton,\n StyledMilestoneLabel\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: ForwardRefForwardPropsComponent<StagesProps> = forwardRef(function Stages(\n {\n current,\n stages,\n caseTitle,\n onLoadStage,\n readOnly = false,\n variant = 'chevron',\n testId,\n ...restProps\n }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n) {\n const t = useI18n();\n\n const testIds = useTestIds(testId, getStagesTestIds);\n\n const isMilestoneVariant = variant === 'milestone';\n\n const stagesRef = useConsolidatedRef(ref);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const startSentinelRef = useRef<HTMLLIElement>(null);\n const endSentinelRef = useRef<HTMLLIElement>(null);\n const stagesRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n\n const [target, setTarget] = useElement<HTMLButtonElement>(null);\n const [targetStageId, setTargetStageId] = useState<string \| null>(null);\n const [currentStageBtn, setCurrentStageBtn] = useState<HTMLButtonElement \| null>(null);\n\n const { create: createModal } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n const [showModal, setShowModal] = useState(false);\n\n const isSmallOrAbove = useBreakpoint('sm');\n\n const { rtl } = useDirection();\n\n useArrows(\n stagesRef,\n {\n cycle: false,\n selector: ':scope > li > button:not([aria-expanded])',\n dir: 'left-right',\n initialFocusElement: currentStageBtn\n },\n [currentStageBtn]\n );\n\n const dialogId = useUID();\n const descriptionId = useUID();\n\n useEffect(() => {\n const el = stagesRef.current;\n const wrapper = wrapperRef.current;\n const startSentinel = startSentinelRef.current;\n const endSentinel = endSentinelRef.current;\n if (!el \|\| !wrapper \|\| !startSentinel \|\| !endSentinel) return;\n\n const fadeValue = 'var(--stages-fade-width)';\n\n const observer = new IntersectionObserver(\n entries => {\n for (const entry of entries) {\n const visible = entry.isIntersecting;\n if (entry.target === startSentinel) {\n wrapper.style.setProperty('--stages-fade-start', visible ? '0rem' : fadeValue);\n } else if (entry.target === endSentinel) {\n wrapper.style.setProperty('--stages-fade-end', visible ? '0rem' : fadeValue);\n }\n }\n },\n { root: el, threshold: 0 }\n );\n\n observer.observe(startSentinel);\n observer.observe(endSentinel);\n\n return () => observer.disconnect();\n }, [stages.length]);\n\n useEffect(() => {\n const el = stagesRef.current;\n const currentBtn = el?.querySelector<HTMLButtonElement>('[aria-current=\"step\"]');\n currentBtn?.scrollIntoView({ inline: 'center', behavior: 'auto', block: 'nearest' });\n }, [current]); // re-center whenever the active stage changes\n\n useFocusWithin([stagesRef], focused => {\n const activeEl = getActiveElement();\n if (focused && isInstance(activeEl, HTMLButtonElement)) {\n activeEl.scrollIntoView({\n inline: 'center',\n behavior: 'smooth',\n block: 'nearest'\n });\n }\n });\n\n const stagesToLoad = onLoadStage\n ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n : [];\n\n const renderModalStages = () =>\n stages.map(stage => (\n <Fragment key={stage.id}>\n <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n {stage.completed && <StyledStageCompleteIcon name='check' />}\n <StyledStageText variant='h3' isCurrent={stage.id === current}>\n {stage.name}\n {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n </StyledStageText>\n </Flex>\n <StageGlimpse stage={stage} />\n </Fragment>\n ));\n\n const openModal = () => {\n setShowModal(true);\n if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n modalMethods.current = createModal(Modal, {\n heading: caseTitle\n ? t('stages_case_lifecycle', [caseTitle])\n : t('stages_default_case_lifecycle'),\n progress: stagesToLoad.length > 0,\n children: renderModalStages(),\n onBeforeClose: () => {\n setShowModal(false);\n target?.focus();\n setTarget(null);\n setTargetStageId(null);\n modalMethods.current = undefined;\n }\n });\n };\n\n useAfterInitialEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: renderModalStages()\n });\n }, [stagesToLoad.length]);\n\n const setStageButtonRef =\n (stageId: string, isCurrent: boolean) => (el: HTMLButtonElement \| null) => {\n if (el) {\n stagesRefs.current.set(stageId, el);\n if (isCurrent) setCurrentStageBtn(prev => (prev !== el ? el : prev));\n } else {\n stagesRefs.current.delete(stageId);\n if (isCurrent) setCurrentStageBtn(null);\n }\n };\n\n const handleStageClick =\n (stageId: string, hasToLoad: boolean) => (e: MouseEvent<HTMLButtonElement>) => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stageId]);\n\n const btn = e.currentTarget;\n btn.scrollIntoView({\n inline: 'center',\n behavior: 'smooth',\n block: 'nearest'\n });\n\n setTarget(btn);\n setTargetStageId(stageId);\n } else {\n openModal();\n }\n };\n\n const getStageButtonProps = ({\n stageId,\n stageName,\n stageStatusText,\n isCurrent,\n hasToLoad\n }: {\n stageId: string;\n stageName: string;\n stageStatusText: string;\n isCurrent: boolean;\n hasToLoad: boolean;\n }) => {\n const isExpanded = targetStageId === stageId && Boolean(target) && isSmallOrAbove;\n\n return {\n ref: setStageButtonRef(stageId, isCurrent),\n 'aria-current': isCurrent ? ('step' as const) : undefined,\n 'aria-label': t('stages_stage_label', [stageName, stageStatusText]),\n 'aria-expanded': isExpanded ? true : undefined,\n 'aria-controls': isExpanded ? dialogId : undefined,\n ...(!readOnly && {\n 'aria-haspopup': 'dialog' as const,\n onClick: handleStageClick(stageId, hasToLoad)\n })\n };\n };\n\n return (\n <>\n <StyledStagesWrapper ref={wrapperRef} data-testid={testIds.root}>\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n variant={variant}\n dir={rtl ? 'rtl' : 'ltr'}\n aria-label={t('stages_label')}\n aria-describedby={descriptionId}\n >\n <StyledSentinel ref={startSentinelRef} aria-hidden='true' />\n\n {stages.map((stage, stageIndex) => {\n const isCurrent = stage.id === current;\n let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n if (isCurrent) stageStatusText = t('current');\n\n const hasToLoad = stagesToLoad.includes(stage.id);\n\n let stageStatus: StageStatus;\n\n if (stage.completed) {\n stageStatus = 'completed';\n } else if (isCurrent) {\n stageStatus = 'current';\n } else {\n stageStatus = 'pending';\n }\n\n const stageButtonProps = getStageButtonProps({\n stageId: stage.id,\n stageName: stage.name,\n stageStatusText,\n isCurrent,\n hasToLoad\n });\n\n return (\n <Fragment key={stage.id}>\n {isMilestoneVariant ? (\n <StyledMilestoneStageContainer\n status={stageStatus}\n nextCompleted={stages[stageIndex + 1]?.completed ?? false}\n readOnly={readOnly}\n >\n <StyledMilestoneButton\n status={stageStatus}\n readOnly={readOnly}\n {...stageButtonProps}\n >\n {stage.completed ? (\n <Icon name='check' />\n ) : (\n <span aria-hidden='true'>{stageIndex + 1}</span>\n )}\n </StyledMilestoneButton>\n <StyledMilestoneLabel>{stage.name}</StyledMilestoneLabel>\n </StyledMilestoneStageContainer>\n ) : (\n <Flex\n as={StyledStageContainer}\n item={{ grow: 1, shrink: 0 }}\n readOnly={readOnly}\n variant={variant}\n >\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{ grow: 1, shrink: 0 }}\n status={stageStatus}\n readOnly={readOnly}\n variant={variant}\n {...stageButtonProps}\n >\n <StyledInnerStage>\n {stage.completed && <Icon name='check' />}\n {stage.name}\n </StyledInnerStage>\n </Flex>\n </Flex>\n )}\n\n {target && targetStageId === stage.id && isSmallOrAbove && !showModal && (\n <InfoDialog\n id={dialogId}\n heading={stage.name}\n target={target}\n progress={hasToLoad ? t('loading') : undefined}\n onDismiss={() => {\n setTarget(null);\n setTargetStageId(null);\n }}\n placement='bottom'\n >\n {!hasToLoad && (\n <StyledStageGlimpse>\n <StageGlimpse stage={stage} />\n <Button variant='secondary' onClick={openModal}>\n {t('stages_see_full_lifecycle')}\n </Button>\n </StyledStageGlimpse>\n )}\n </InfoDialog>\n )}\n </Fragment>\n );\n })}\n\n <StyledSentinel ref={endSentinelRef} aria-hidden='true' />\n </Flex>\n </StyledStagesWrapper>\n\n <StyledStagesDescription id={descriptionId}>\n {t('stages_description')}\n </StyledStagesDescription>\n </>\n );\n});\n\nexport default withTestIds(Stages, getStagesTestIds);\n"]}
1	+ {"version":3,"file":"Stages.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect, forwardRef, Fragment } from 'react';\nimport type { MouseEvent, PropsWithoutRef } from 'react';\n\nimport {\n Icon,\n registerIcon,\n Flex,\n useI18n,\n Button,\n Modal,\n useBreakpoint,\n useModalManager,\n useConsolidatedRef,\n useUID,\n InfoDialog,\n useArrows,\n useDirection,\n useAfterInitialEffect,\n VisuallyHiddenText,\n withTestIds,\n useTestIds,\n useElement,\n useFocusWithin,\n isInstance,\n getActiveElement\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, ModalMethods } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StagesProps, StageStatus } from './Stages.types';\nimport { getStagesTestIds } from './Stages.test-ids';\nimport StageGlimpse from './StageGlimpse';\nimport {\n StyledInnerStage,\n StyledStageCompleteIcon,\n StyledStage,\n StyledStageContainer,\n StyledStageGlimpse,\n StyledStages,\n StyledStagesWrapper,\n StyledStagesDescription,\n StyledStageText,\n StyledSentinel,\n StyledMilestoneStageContainer,\n StyledMilestoneButton,\n StyledMilestoneLabel\n} from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nconst Stages: ForwardRefForwardPropsComponent<StagesProps> = forwardRef(function Stages(\n {\n current,\n stages,\n caseTitle,\n onLoadStage,\n readOnly = false,\n variant = 'chevron',\n testId,\n ...restProps\n }: PropsWithoutRef<StagesProps>,\n ref: StagesProps['ref']\n) {\n const t = useI18n();\n\n const testIds = useTestIds(testId, getStagesTestIds);\n\n const isMilestoneVariant = variant === 'milestone';\n\n const stagesRef = useConsolidatedRef(ref);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const startSentinelRef = useRef<HTMLLIElement>(null);\n const endSentinelRef = useRef<HTMLLIElement>(null);\n const stagesRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n\n const [target, setTarget] = useElement<HTMLButtonElement>(null);\n const [targetStageId, setTargetStageId] = useState<string \| null>(null);\n const [currentStageBtn, setCurrentStageBtn] = useState<HTMLButtonElement \| null>(null);\n\n const { create: createModal } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n const [showModal, setShowModal] = useState(false);\n\n const isSmallOrAbove = useBreakpoint('sm');\n\n const { rtl } = useDirection();\n\n useArrows(\n stagesRef,\n {\n cycle: false,\n selector: ':scope > li > button:not([aria-expanded])',\n dir: 'left-right',\n initialFocusElement: currentStageBtn\n },\n [currentStageBtn]\n );\n\n const dialogId = useUID();\n const descriptionId = useUID();\n\n useEffect(() => {\n const el = stagesRef.current;\n const wrapper = wrapperRef.current;\n const startSentinel = startSentinelRef.current;\n const endSentinel = endSentinelRef.current;\n if (!el \|\| !wrapper \|\| !startSentinel \|\| !endSentinel) return;\n\n const fadeValue = 'var(--stages-fade-width)';\n\n const observer = new IntersectionObserver(\n entries => {\n for (const entry of entries) {\n const visible = entry.isIntersecting;\n if (entry.target === startSentinel) {\n wrapper.style.setProperty('--stages-fade-start', visible ? '0rem' : fadeValue);\n } else if (entry.target === endSentinel) {\n wrapper.style.setProperty('--stages-fade-end', visible ? '0rem' : fadeValue);\n }\n }\n },\n { root: el, threshold: 0 }\n );\n\n observer.observe(startSentinel);\n observer.observe(endSentinel);\n\n return () => observer.disconnect();\n }, [stages.length]);\n\n useEffect(() => {\n const el = stagesRef.current;\n const currentBtn = el?.querySelector<HTMLButtonElement>('[aria-current=\"step\"]');\n currentBtn?.scrollIntoView({ inline: 'center', behavior: 'auto', block: 'nearest' });\n }, [current]); // re-center whenever the active stage changes\n\n useFocusWithin([stagesRef], focused => {\n const activeEl = getActiveElement();\n if (focused && isInstance(activeEl, HTMLButtonElement)) {\n activeEl.scrollIntoView({\n inline: 'center',\n behavior: 'smooth',\n block: 'nearest'\n });\n }\n });\n\n const stagesToLoad = onLoadStage\n ? stages.filter(stage => !Array.isArray(stage.steps)).map(stage => stage.id)\n : [];\n\n const renderModalStages = () =>\n stages.map(stage => (\n <Fragment key={stage.id}>\n <Flex container={{ alignItems: 'start', gap: 0.5 }}>\n {stage.completed && <StyledStageCompleteIcon name='check' />}\n <StyledStageText variant='h3' isCurrent={stage.id === current}>\n {stage.name}\n {stage.completed && <VisuallyHiddenText>{`- ${t('completed')}`}</VisuallyHiddenText>}\n </StyledStageText>\n </Flex>\n <StageGlimpse stage={stage} />\n </Fragment>\n ));\n\n const openModal = () => {\n setShowModal(true);\n if (stagesToLoad.length > 0) onLoadStage?.(stagesToLoad);\n modalMethods.current = createModal(Modal, {\n heading: caseTitle\n ? t('stages_case_lifecycle', [caseTitle])\n : t('stages_default_case_lifecycle'),\n progress: stagesToLoad.length > 0,\n children: renderModalStages(),\n onBeforeClose: () => {\n setShowModal(false);\n target?.focus();\n setTarget(null);\n setTargetStageId(null);\n modalMethods.current = undefined;\n }\n });\n };\n\n useAfterInitialEffect(() => {\n modalMethods.current?.update({\n progress: stagesToLoad.length > 0,\n children: renderModalStages()\n });\n }, [stagesToLoad.length]);\n\n const setStageButtonRef =\n (stageId: string, isCurrent: boolean) => (el: HTMLButtonElement \| null) => {\n if (el) {\n stagesRefs.current.set(stageId, el);\n if (isCurrent) setCurrentStageBtn(prev => (prev !== el ? el : prev));\n } else {\n stagesRefs.current.delete(stageId);\n if (isCurrent) setCurrentStageBtn(null);\n }\n };\n\n const handleStageClick =\n (stageId: string, hasToLoad: boolean) => (e: MouseEvent<HTMLButtonElement>) => {\n if (isSmallOrAbove) {\n if (hasToLoad) onLoadStage?.([stageId]);\n\n const btn = e.currentTarget;\n btn.scrollIntoView({\n inline: 'center',\n behavior: 'smooth',\n block: 'nearest'\n });\n\n setTarget(btn);\n setTargetStageId(stageId);\n } else {\n openModal();\n }\n };\n\n const getStageButtonProps = ({\n stageId,\n stageName,\n stageStatusText,\n isCurrent,\n hasToLoad\n }: {\n stageId: string;\n stageName: string;\n stageStatusText: string;\n isCurrent: boolean;\n hasToLoad: boolean;\n }) => {\n const isExpanded = targetStageId === stageId && Boolean(target) && isSmallOrAbove;\n\n return {\n ref: setStageButtonRef(stageId, isCurrent),\n 'aria-current': isCurrent ? ('step' as const) : undefined,\n 'aria-label': t('stages_stage_label', [stageName, stageStatusText]),\n 'aria-expanded': isExpanded ? true : undefined,\n 'aria-controls': isExpanded ? dialogId : undefined,\n ...(!readOnly && {\n 'aria-haspopup': 'dialog' as const,\n onClick: handleStageClick(stageId, hasToLoad)\n })\n };\n };\n\n return (\n <>\n <StyledStagesWrapper ref={wrapperRef} data-testid={testIds.root}>\n <Flex\n {...restProps}\n container\n as={StyledStages}\n ref={stagesRef}\n variant={variant}\n dir={rtl ? 'rtl' : 'ltr'}\n aria-label={t('stages_label')}\n aria-describedby={descriptionId}\n >\n <StyledSentinel ref={startSentinelRef} aria-hidden='true' />\n\n {stages.map((stage, stageIndex) => {\n const isCurrent = stage.id === current;\n let stageStatusText = t(stage.completed ? 'completed' : 'not_started');\n if (isCurrent) stageStatusText = t('current');\n\n const hasToLoad = stagesToLoad.includes(stage.id);\n\n let stageStatus: StageStatus;\n\n if (stage.completed) {\n stageStatus = 'completed';\n } else if (isCurrent) {\n stageStatus = 'current';\n } else {\n stageStatus = 'pending';\n }\n\n const stageButtonProps = getStageButtonProps({\n stageId: stage.id,\n stageName: stage.name,\n stageStatusText,\n isCurrent,\n hasToLoad\n });\n\n return (\n <Fragment key={stage.id}>\n {isMilestoneVariant ? (\n <StyledMilestoneStageContainer\n status={stageStatus}\n connectorFilled={\n (stages[stageIndex + 1]?.completed ?? false) \|\|\n stages[stageIndex + 1]?.id === current\n }\n readOnly={readOnly}\n >\n <StyledMilestoneButton\n status={stageStatus}\n readOnly={readOnly}\n {...stageButtonProps}\n >\n {stage.completed ? (\n <Icon name='check' />\n ) : (\n <span aria-hidden='true'>{stageIndex + 1}</span>\n )}\n </StyledMilestoneButton>\n <StyledMilestoneLabel>{stage.name}</StyledMilestoneLabel>\n </StyledMilestoneStageContainer>\n ) : (\n <Flex\n as={StyledStageContainer}\n item={{ grow: 1, shrink: 0 }}\n readOnly={readOnly}\n variant={variant}\n >\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledStage}\n item={{ grow: 1, shrink: 0 }}\n status={stageStatus}\n readOnly={readOnly}\n variant={variant}\n {...stageButtonProps}\n >\n <StyledInnerStage>\n {stage.completed && <Icon name='check' />}\n {stage.name}\n </StyledInnerStage>\n </Flex>\n </Flex>\n )}\n\n {target && targetStageId === stage.id && isSmallOrAbove && !showModal && (\n <InfoDialog\n id={dialogId}\n heading={stage.name}\n target={target}\n progress={hasToLoad ? t('loading') : undefined}\n onDismiss={() => {\n setTarget(null);\n setTargetStageId(null);\n }}\n placement='bottom'\n >\n {!hasToLoad && (\n <StyledStageGlimpse>\n <StageGlimpse stage={stage} />\n <Button variant='secondary' onClick={openModal}>\n {t('stages_see_full_lifecycle')}\n </Button>\n </StyledStageGlimpse>\n )}\n </InfoDialog>\n )}\n </Fragment>\n );\n })}\n\n <StyledSentinel ref={endSentinelRef} aria-hidden='true' />\n </Flex>\n </StyledStagesWrapper>\n\n <StyledStagesDescription id={descriptionId}>\n {t('stages_description')}\n </StyledStagesDescription>\n </>\n );\n});\n\nexport default withTestIds(Stages, getStagesTestIds);\n"]}

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

@@ -91,7 +91,7 @@ export declare const StyledMilestoneLabel: import("styled-components/dist/types"
  */
 export declare const StyledMilestoneStageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
     status: "completed" | "current" | "pending";
-    nextCompleted: boolean;
+    connectorFilled: boolean;
     readOnly?: boolean;
 }>> & string;
 export declare const StyledMilestoneButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiJnD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,6NAiH9B,CAAC;AAIH;;;;GAIG;AACH,eAAO,MAAM,YAAY;aAAwB,YAAY;YAqD3D,CAAC;AAIH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,6NA6B1B,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,gBAAgB;eAA4B,OAAO;YAe9D,CAAC;AAsDH;;;GAGG;AACH,eAAO,MAAM,WAAW;YACd,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;aACT,YAAY;YA6EtB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,uBAAuB,kaAiBlC,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,eAAe;;;gBAA8B,OAAO;kLAIhE,CAAC;AAwZF;;;GAGG;AACH,eAAO,MAAM,oBAAoB;eACpB,OAAO;aACT,YAAY;YAyDtB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,oBAAoB,mOAS/B,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,UAAU;eAA0B,OAAO;YAoBtD,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;oMAMhC,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,kBAAkB,6NAI7B,CAAC;AAaH,eAAO,MAAM,oBAAoB,+NAS/B,CAAC;AAIH;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B;YAChC,WAAW,GAAG,SAAS,GAAG,SAAS;~~mBAC5B~~,OAAO;~~eACX~~,OAAO;~~YA8ElB~~,CAAC;AAIH,eAAO,MAAM,qBAAqB;YACxB,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;YAoHlB,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,uBAAuB,yOAEnC,CAAC"}
1	+ {"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiJnD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,6NAiH9B,CAAC;AAIH;;;;GAIG;AACH,eAAO,MAAM,YAAY;aAAwB,YAAY;YAqD3D,CAAC;AAIH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,6NA6B1B,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,gBAAgB;eAA4B,OAAO;YAe9D,CAAC;AAsDH;;;GAGG;AACH,eAAO,MAAM,WAAW;YACd,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;aACT,YAAY;YA6EtB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,uBAAuB,kaAiBlC,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,eAAe;;;gBAA8B,OAAO;kLAIhE,CAAC;AAwZF;;;GAGG;AACH,eAAO,MAAM,oBAAoB;eACpB,OAAO;aACT,YAAY;YAyDtB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,oBAAoB,mOAS/B,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,UAAU;eAA0B,OAAO;YAoBtD,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;oMAMhC,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,kBAAkB,6NAI7B,CAAC;AAaH,eAAO,MAAM,oBAAoB,+NAS/B,CAAC;AAIH;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B;YAChC,WAAW,GAAG,SAAS,GAAG,SAAS;qBAC1B,OAAO;eACb,OAAO;YA4ElB,CAAC;AAIH,eAAO,MAAM,qBAAqB;YACxB,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;YAoHlB,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,uBAAuB,yOAEnC,CAAC"}

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

@@ -1017,10 +1017,9 @@ StyledMilestoneLabel.defaultProps = defaultThemeProp;
  * horizontal connector as a single line from this milestone's centre to the next
  * milestone's centre (::after), sized so every connector has an identical length.
  */
-export const StyledMilestoneStageContainer = styled.li(({ theme, nextCompleted, status }) => {
+export const StyledMilestoneStageContainer = styled.li(({ theme, connectorFilled, status }) => {
     const { base: { palette: { interactive, 'border-line': borderLine }, spacing } } = theme;
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
-    const connectorFilled = nextCompleted;
     return css `
     --connector-height: ${connectorFilled ? '0.25rem' : '0.125rem'};
     --connector-display: block;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { transparentize, darken } from 'polished';\n\nimport {\n calculateFontSize,\n DateTimeDisplay,\n defaultThemeProp,\n Icon,\n Text,\n StyledIcon,\n calculateForegroundColor,\n tryCatch\n} from '@pega/cosmos-react-core';\n\nimport type { StageVariant } from './Stages.types';\n\nconst stageClipPath = (leftNotch: boolean, rightPoint: boolean, mirrored = false): string => {\n if (mirrored) {\n // RTL: mirror the LTR clip-path polygon\n const points = ['100% 0', '0 0'];\n if (leftNotch) {\n points.push('var(--stage-chevron-width) 0', '0 50%', 'var(--stage-chevron-width) 100%');\n } else {\n points.push('0 100%');\n }\n points.push('100% 100%');\n if (rightPoint) {\n points.push('calc(100% - var(--stage-chevron-width)) 50%');\n }\n return `clip-path: polygon(${points.join(', ')});`;\n }\n\n const points = ['0 0', '100% 0'];\n if (rightPoint) {\n points.push(\n 'calc(100% - var(--stage-chevron-width)) 0',\n '100% 50%',\n 'calc(100% - var(--stage-chevron-width)) 100%'\n );\n } else {\n points.push('100% 100%');\n }\n points.push('0 100%');\n if (leftNotch) {\n points.push('var(--stage-chevron-width) 50%');\n }\n return `clip-path: polygon(${points.join(', ')});`;\n};\n\nconst segmentedConfig = {\n width: 'calc(0.8 * var(--chevron-spacing))',\n coarseWidth: 'calc(1.0 * var(--chevron-spacing))'\n} as const;\n\nconst segmentedClipPath = (leftCut: boolean, rightCut: boolean, mirrored = false): string => {\n if (mirrored) {\n const topRight = rightCut ? 'calc(100% - var(--segmented-width)) 0%' : '100% 0%';\n const bottomLeft = leftCut ? 'var(--segmented-width) 100%' : '0% 100%';\n\n return `clip-path: polygon(0% 0%, ${topRight}, 100% 100%, ${bottomLeft});`;\n }\n\n const topLeft = leftCut ? 'var(--segmented-width) 0%' : '0% 0%';\n const bottomRight = rightCut ? 'calc(100% - var(--segmented-width)) 100%' : '100% 100%';\n\n return `clip-path: polygon(${topLeft}, 100% 0%, ${bottomRight}, 0% 100%);`;\n};\n\n// === Chevron Configuration ===\n// Centralizes spacing and border thickness via CSS custom properties set at StyledStages\nconst chevronConfig = {\n // Horizontal projection of the rotated border-square forming the chevron point (fine pointer).\n // Derived from the border-square size × cos(45° + skew). Tuned to visually align with the stage height.\n // All values scaled by 1.25× relative to the original 4× spacing design (now 5× spacing height).\n width: 'calc(1.445 * var(--chevron-spacing))',\n // Same horizontal projection for coarse/touch pointer (larger square, proportionally wider point).\n coarseWidth: 'calc(1.797 * var(--chevron-spacing))',\n // Side length of the rotated border-square forming the chevron (fine pointer: 3.75× base spacing).\n squareSize: 'calc(3.75 * var(--chevron-spacing))',\n // Side length of the rotated border-square for coarse/touch pointer (5× base spacing).\n coarseSquareSize: 'calc(5 * var(--chevron-spacing))',\n // Distance to inset the ::before notch from the left edge of the stage (fine pointer).\n // 0.86 ≈ width − half-border-overlap, keeps the notch flush with the preceding chevron point.\n offsetLeft: 'calc(0.86 * var(--chevron-spacing))',\n // Distance to inset the ::after point from the right edge of the stage (fine pointer).\n // Equal to `width` so the point extends exactly one chevron-width beyond the stage boundary.\n offsetRight: 'calc(1.445 * var(--chevron-spacing))',\n // Coarse-pointer equivalents of offsetLeft/offsetRight, scaled to match coarseWidth/coarseSquareSize.\n // coarseOffsetLeft must satisfy: coarseSquareSize = 2 × coarseWidth + coarseOffsetLeft\n // (5 = 2 × 1.797 + 1.406) so that ::before and ::after co-locate on coarse devices.\n coarseOffsetLeft: 'calc(1.406 * var(--chevron-spacing))',\n coarseOffsetRight: 'calc(1.797 * var(--chevron-spacing))',\n // Pre-computed flat positions for ::before notch and ::after point.\n notchInsetStart: 'calc(-2.305 * var(--chevron-spacing))',\n // 3.203 = exact alignment (coarseSquareSize - coarseWidth); slightly overdone default clears sub-pixel rounding on 3× displays.\n coarseNotchInsetStart:\n 'calc(-1 * var(--stages-coarse-notch-correction) * var(--chevron-spacing))',\n pointInsetEnd: '0'\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: ${config.notchInsetStart};\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-inline-end: ${config.pointInsetEnd};\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 -webkit-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-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 -webkit-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 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 -webkit-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-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 -webkit-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 mask-image: linear-gradient(\n to right,\n transparent calc(-1 * var(--mask-edge-overhang)),\n black var(--stages-fade-end),\n black calc(100% - var(--stages-fade-start)),\n transparent calc(100% + var(--mask-edge-overhang))\n );\n }\n }\n `;\n});\n\nStyledStagesWrapper.defaultProps = defaultThemeProp;\n\n/*\n Scrollable `<ol>` containing all stage chevron items. Sets the `--chevron-spacing`,\n * `--chevron-border-thickness`, and `--segmented-border-thickness` custom properties\n * consumed by child elements.\n /\nexport const StyledStages = styled.ol<{ variant: StageVariant }>(({ theme, variant }) => {\n const isMilestone = variant === 'milestone';\n\n return css`\n --chevron-spacing: ${theme.base.spacing};\n --chevron-border-thickness: ${theme.components.button['border-width']};\n --segmented-border-thickness: calc(2 ${theme.components.button['border-width']});\n --segmented-width: ${segmentedConfig.width};\n background: ${theme.components.card.background};\n border-radius: ${theme.components.card['border-radius']};\n display: flex;\n padding: 0;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n list-style: none;\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n\n ${isMilestone &&\n css`\n --milestone-size: calc(4 * ${theme.base.spacing});\n --milestone-pulse-min: calc(var(--milestone-size) * 0.1);\n --milestone-pulse-start: ${transparentize(0.5, theme.base.palette.interactive)};\n --milestone-pulse-spread: calc(var(--milestone-size) * 0.25);\n --milestone-pulse-end: ${transparentize(0.75, theme.base.palette.interactive)};\n padding-block: ${theme.base.spacing};\n padding-inline: calc(var(--milestone-size) * 0.25);\n `}\n\n &:hover,\n &:focus-within {\n scrollbar-color: var(\n --stages-scrollbar-thumb,\n ${transparentize(0.4, theme.base.palette['border-line'])}\n )\n var(--stages-scrollbar-track, transparent);\n }\n\n &::-webkit-scrollbar {\n height: 0.25rem;\n }\n\n @media (pointer: coarse) {\n /* 3.203 = exact alignment; slightly overdone default to clear sub-pixel rounding on 3× displays /\n --stages-coarse-notch-correction: 3.35;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\n/\n A sentinel is an invisible 1 px <li> placed at each end of the scrollable stage list.\n * It is observed by an IntersectionObserver; when it scrolls out of view, the component sets\n * --stages-fade-start or --stages-fade-end to show a gradient fade indicating more stages\n * are reachable by scrolling. When it comes back into view the property is reset to 0.\n \n Sentinel elements carry aria-hidden=\"true\" so they are valid list items semantically.\n * Because styled-components scopes all CSS to a generated class, the chevron and layout rules\n * in StyledStageContainer never apply to these elements — they carry a different class.\n * CSS type-based selectors (:nth-of-type, :nth-last-of-type) in StyledStageContainer are\n * offset by 1 at each end to skip the sentinels and target only real stage items.\n /\nexport const StyledSentinel = styled.li`\n flex-shrink: 0;\n\n / NOTE: the sentinel must occupy\n * a single physical pixel so IntersectionObserver can detect it at threshold 0 while having\n * negligible layout impact. A rem value could collapse to zero at small font sizes.\n /\n / stylelint-disable-next-line unit-allowed-list -- 1px is intentional /\n width: 1px;\n / stylelint-disable-next-line unit-allowed-list -- 1px is intentional /\n height: 1px;\n padding: 0;\n margin: 0;\n pointer-events: none;\n\n / Collapse the sentinel's layout footprint to zero on the side facing the stages.\n * Without this, each 1px sentinel creates a visible gap between the stage buttons\n * and the left/right edges of the wrapper. The sentinel remains in flow (required\n * for IntersectionObserver scroll detection) but no longer displaces stage content.\n /\n &:first-of-type {\n / stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width /\n margin-inline-end: -1px;\n }\n\n &:last-of-type {\n / stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width /\n margin-inline-start: -1px;\n }\n`;\n\nStyledSentinel.defaultProps = defaultThemeProp;\n\n/\n Inner `<span>` holding stage label content. Optionally applies `text-overflow: ellipsis`\n * for stages with long labels.\n /\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(({ theme, ellipsis }) => {\n return css`\n display: inline-flex;\n align-items: center;\n gap: calc(0.25 ${theme.base.spacing});\n text-align: center;\n white-space: nowrap;\n padding-inline-start: calc(0.875 * ${theme.base.spacing});\n padding-inline-end: calc(1.125 * ${theme.base.spacing});\n ${ellipsis &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n `;\n});\n\nStyledInnerStage.defaultProps = defaultThemeProp;\n\nconst stageButtonChevronStyles = (theme: DefaultTheme) => css`\n padding-inline-start: calc(2 * var(--chevron-spacing));\n padding-inline-end: var(--chevron-spacing);\n width: calc(100% + ${chevronConfig.width});\n --stage-chevron-width: ${chevronConfig.width};\n\n ${StyledInnerStage} {\n transform: translateX(calc(-0.25 * var(--chevron-spacing)));\n opacity: ${theme.base.transparency['transparent-2']};\n }\n\n ${stageClipPath(true, true)}\n\n [dir='rtl'] & ${StyledInnerStage} {\n transform: translateX(calc(0.25 * var(--chevron-spacing)));\n }\n\n [dir='rtl'] & {\n ${stageClipPath(true, true, true)}\n }\n\n @media (pointer: coarse) {\n padding-inline-start: calc(2.25 * var(--chevron-spacing));\n width: calc(100% + ${chevronConfig.coarseWidth});\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n }\n`;\n\nconst stageButtonSegmentedStyles = (theme: DefaultTheme) => css`\n width: 100%;\n padding-inline-start: calc(var(--segmented-width) + var(--chevron-spacing));\n padding-inline-end: calc(var(--segmented-width) + var(--chevron-spacing));\n\n ${StyledInnerStage} {\n opacity: ${theme.base.transparency['transparent-2']};\n }\n\n ${segmentedClipPath(true, true)}\n\n [dir='rtl'] & {\n ${segmentedClipPath(true, true, true)}\n }\n`;\n\nconst stageButtonVariants: Record<StageVariant, (theme: DefaultTheme) => ReturnType<typeof css>> = {\n chevron: stageButtonChevronStyles,\n segmented: stageButtonSegmentedStyles,\n milestone: () => css``\n};\n\n/*\n Clickable `<button>` for a single stage. Renders the chevron clip-path shape and\n * applies status-based background and foreground colours.\n /\nexport const StyledStage = styled.button<{\n status: 'completed' \| 'current' \| 'pending';\n readOnly?: boolean;\n variant: StageVariant;\n}>(\n ({\n theme,\n theme: {\n base: { palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight },\n components: {\n 'case-view': { stages }\n }\n },\n status,\n readOnly,\n variant: shape\n }) => {\n const stageForeground = calculateForegroundColor(\n stages.status[status].background,\n stages.status[status]['foreground-color']\n );\n\n return css`\n background: ${stages.status[status].background};\n color: ${stageForeground};\n outline: none;\n border-color: transparent;\n border-width: calc(2 var(--chevron-border-thickness)) 0;\n border-style: solid;\n position: relative;\n\n /* Browsers do not reliably apply flex align-items: stretch to <button> elements.\n * Adding 0.0625rem (1px at default font size) to min-height compensates so the button fills its <li> container,\n * keeping the clipped chevron background flush with the top and bottom borders. /\n min-height: calc(5 var(--chevron-spacing) + 0.0625rem);\n margin-inline-start: 0;\n margin-inline-end: 0;\n\n ${stageButtonVariants[shape](theme)}\n\n ${!readOnly &&\n css`\n &:hover {\n border-color: ${palette['border-line']};\n }\n `}\n\n &:focus-visible {\n border-color: ${palette.interactive};\n }\n\n &:active {\n border-color: ${palette.interactive};\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n\n &[aria-current] {\n ${StyledInnerStage} {\n font-weight: ${fontWeight.bold};\n opacity: 1;\n }\n\n ${!readOnly &&\n css`\n &:hover {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n }\n `}\n }\n\n @media (pointer: coarse) {\n min-height: ${hitArea['finger-min']};\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\n/*\n Checkmark icon shown inside completed stages, tinted to match the stage foreground colour.\n /\nexport const StyledStageCompleteIcon = styled(Icon)(({\n theme: {\n components: {\n 'case-view': {\n stages: {\n status: {\n completed: { 'foreground-color': foregroundColor, background }\n }\n }\n }\n }\n }\n}) => {\n const stageForeground = calculateForegroundColor(background, foregroundColor);\n return css`\n color: ${stageForeground};\n `;\n});\n\nStyledStageCompleteIcon.defaultProps = defaultThemeProp;\n\n/\n Stage label text. Renders in bold weight when the stage is the current active stage.\n /\nexport const StyledStageText = styled(Text)<{ isCurrent?: boolean }>(\n ({ theme, isCurrent }) => css`\n font-weight: ${isCurrent ? theme.base['font-weight'].bold : theme.base['font-weight'].normal};\n `\n);\n\nStyledStageText.defaultProps = defaultThemeProp;\n\nconst stageContainerChevronStyles = (theme: DefaultTheme, readOnly: boolean \| undefined) => {\n const includeHover = !readOnly;\n return css`\n / Chevron: negative-margin overlap so consecutive stages share a boundary /\n margin-inline-start: calc(-1 ${chevronConfig.width});\n\n &:nth-of-type(2) {\n margin-inline-start: 0;\n }\n\n /* Chevron boundary indicators via ::before (left notch) and ::after (right point) pseudo-elements /\n &:not(:nth-of-type(-n + 2))::before {\n ${createChevronPseudo(\n 'calc(2 var(--chevron-border-thickness))',\n theme.base.palette['border-line'],\n chevronConfig.squareSize\n )}\n /* Elevate ::before above the button so it renders via the same pathway as ::after.\n * Without z-index, ::before (first in DOM) is painted first and then covered by the\n * button, making it only partially visible through the clip-path notch window. This\n * causes thicker interactive-state borders (3×) to look thinner on the left boundary\n * than on the right (::after, which paints last and is always fully visible).\n * The ::before tip's rightmost extent is at --stage-chevron-width from the <li> start,\n * which is before the stage text (padding-inline-start: 2 × spacing), so no content overlap.\n /\n z-index: 1;\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n ${createChevronPseudo(\n 'calc(2 var(--chevron-border-thickness))',\n theme.base.palette['border-line'],\n chevronConfig.squareSize\n )}\n }\n\n [dir='rtl'] &::before,\n [dir='rtl'] &::after {\n transform: rotateZ(-45deg) skew(-15deg, -15deg);\n }\n\n /* Chevron positioning: 45° rotated squares create visual tips via offsets:\n * left ≈ 0.86 × spacing, right ≈ 1.445 × spacing (accounts for skew correction)\n /\n ${createChevronBaseStyles(chevronConfig, 'var(--chevron-border-thickness)')}\n ${createChevronInteractiveStates(\n chevronConfig,\n 'var(--chevron-border-thickness)',\n includeHover\n )}\n\n / Thicken chevrons to visually match button top/bottom border on any colored state.\n * At 45° rotation, border appears 1/sin(45°) ≈ 0.707× thinner, so 2× border ≈ 1.4× horizontal border weight.\n /\n ${includeHover &&\n css`\n &:has(button:hover)::before,\n &:has(button:hover)::after {\n border-color: ${theme.base.palette['border-line']};\n }\n `}\n\n &:has(button:focus-visible)::before,\n &:has(button:focus-visible)::after {\n border-color: ${theme.base.palette.interactive};\n }\n\n &:has(button:active)::before,\n &:has(button:active)::after {\n border-color: ${theme.base.palette.interactive};\n }\n\n / First stage: no left notch, extended width to cover the full left edge /\n &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n --stage-chevron-width: ${chevronConfig.width};\n width: calc(100% + (2 var(--stage-chevron-width)));\n padding-inline-start: calc(var(--chevron-spacing));\n ${stageClipPath(false, true)}\n\n ${includeHover &&\n css`\n /* Inline-start interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds /\n &:hover {\n box-shadow: inset calc(2 var(--chevron-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n }\n }\n\n @media (pointer: coarse) {\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n width: calc(100% + (2 * var(--stage-chevron-width)));\n }\n }\n\n /* Last stage: no right point /\n &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n --stage-chevron-width: ${chevronConfig.width};\n padding-inline-end: 0;\n width: 100%;\n ${stageClipPath(true, false)}\n\n ${includeHover &&\n css`\n / Inline-end interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds /\n &:hover {\n box-shadow: inset calc(-2 var(--chevron-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n }\n }\n\n @media (pointer: coarse) {\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n }\n }\n\n /* RTL: flip clip-paths for first and last stages /\n [dir='rtl'] &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n ${stageClipPath(true, false, true)}\n }\n\n [dir='rtl'] &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n ${stageClipPath(false, true, true)}\n }\n\n / Single stage: plain rectangle — no clip-path notch, inset shadows on both sides /\n &:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {\n --stage-chevron-width: ${chevronConfig.width};\n clip-path: none;\n padding-inline-start: calc(var(--chevron-spacing));\n\n ${includeHover &&\n css`\n &:hover {\n box-shadow:\n inset calc(2 var(--chevron-border-thickness)) 0 0 ${theme.base.palette['border-line']},\n inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow:\n inset calc(2 * var(--chevron-border-thickness)) 0 0 ${theme.base.palette.interactive},\n inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${theme.base.palette.interactive};\n }\n\n @media (pointer: coarse) {\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n }\n }\n\n @media (pointer: coarse) {\n margin-inline-start: calc(-1 * ${chevronConfig.coarseWidth});\n\n &:not(:nth-of-type(-n + 2))::before,\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-block-start: calc(50% - ${chevronConfig.coarseSquareSize} / 2);\n width: ${chevronConfig.coarseSquareSize};\n height: ${chevronConfig.coarseSquareSize};\n border-inline-end-width: calc(2 * var(--chevron-border-thickness));\n border-block-start-width: calc(2 * var(--chevron-border-thickness));\n }\n\n &:not(:nth-of-type(-n + 2))::before {\n inset-inline-start: ${chevronConfig.coarseNotchInsetStart};\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-inline-end: 0;\n }\n }\n `;\n};\n\nconst stageContainerSegmentedStyles = (theme: DefaultTheme, readOnly: boolean \| undefined) => {\n const includeHover = !readOnly;\n\n return css`\n --segmented-edge-thickness: var(--chevron-border-thickness);\n\n /* Segmented: stages overlap by --segmented-width so parallelogram edges meet flush /\n margin-inline-start: calc(-1 var(--segmented-width));\n\n &:nth-of-type(2) {\n margin-inline-start: 0;\n }\n\n /* Left segmented border strip: diagonal clip-path on each stage's inline-start edge (stages 2..N).\n * The strip goes from (segmented-width, 0%) at top to (0%, 100%) at bottom of the pseudo,\n * matching the parallelogram's inline-start clip edge exactly.\n /\n &:not(:nth-of-type(-n + 2))::before {\n content: '';\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n width: calc(var(--segmented-width) + var(--segmented-edge-thickness));\n clip-path: polygon(\n var(--segmented-width) 0%,\n calc(var(--segmented-width) + var(--segmented-edge-thickness)) 0%,\n var(--segmented-edge-thickness) 100%,\n 0% 100%\n );\n background: ${theme.base.palette['border-line']};\n pointer-events: none;\n z-index: 1;\n }\n\n / Right segmented border strip: diagonal clip-path on each stage's inline-end edge (stages 1..N-1). /\n &:not(:nth-last-of-type(-n + 2))::after {\n content: '';\n position: absolute;\n inset-block: 0;\n inset-inline-end: 0;\n width: calc(var(--segmented-width) + var(--segmented-edge-thickness));\n clip-path: polygon(\n var(--segmented-width) 0%,\n calc(var(--segmented-width) + var(--segmented-edge-thickness)) 0%,\n var(--segmented-edge-thickness) 100%,\n 0% 100%\n );\n background: ${theme.base.palette['border-line']};\n pointer-events: none;\n z-index: 2;\n }\n\n / Interactive states: update pseudo background to signal hover/focus/active /\n ${includeHover &&\n css`\n &:has(button:hover) {\n --segmented-edge-thickness: var(--segmented-border-thickness);\n }\n\n &:has(button:hover)::before,\n &:has(button:hover)::after {\n background: ${theme.base.palette['border-line']};\n }\n `}\n\n &:has(button:focus-visible),\n &:has(button:active) {\n --segmented-edge-thickness: var(--segmented-border-thickness);\n }\n\n &:has(button:focus-visible)::before,\n &:has(button:focus-visible)::after,\n &:has(button:active)::before,\n &:has(button:active)::after {\n background: ${theme.base.palette.interactive};\n }\n\n / First stage (no inline-start cut): flat left edge + inset shadow edge indicator /\n &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n ${segmentedClipPath(false, true)}\n\n ${includeHover &&\n css`\n &:hover {\n box-shadow: inset var(--segmented-border-thickness) 0 0\n ${theme.base.palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-1 var(--segmented-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-1 * var(--segmented-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n }\n }\n }\n\n /* Last stage (no inline-end cut): flat right edge + inset shadow edge indicator /\n &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n ${segmentedClipPath(true, false)}\n\n ${includeHover &&\n css`\n &:hover {\n box-shadow: inset calc(-1 var(--segmented-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset var(--segmented-border-thickness) 0 0\n ${theme.base.palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(-1 * var(--segmented-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive};\n }\n }\n }\n\n /* RTL: flip clip-paths for first and last stage buttons /\n [dir='rtl'] &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n ${segmentedClipPath(true, false, true)}\n }\n\n [dir='rtl'] &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n ${segmentedClipPath(false, true, true)}\n }\n\n / Single stage: plain rectangle — no diagonal cuts, inset shadows on both sides /\n &:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {\n clip-path: none;\n padding-inline-start: calc(var(--chevron-spacing));\n padding-inline-end: calc(var(--chevron-spacing));\n\n ${includeHover &&\n css`\n &:hover {\n box-shadow:\n inset var(--segmented-border-thickness) 0 0 ${theme.base.palette['border-line']},\n inset calc(-1 var(--segmented-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow:\n inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive},\n inset calc(-1 * var(--segmented-border-thickness)) 0 0 ${theme.base.palette.interactive};\n }\n }\n\n /* RTL: mirror the pseudo clip-paths.\n * In LTR the strip goes top-right → bottom-left (polygon A 0%, A+B 0%, B 100%, 0% 100%).\n * In RTL the pseudo is positioned at the opposite physical edge via logical inset properties,\n * so the strip must go top-left → bottom-right to stay aligned with the flipped slant.\n /\n [dir='rtl'] &:not(:nth-of-type(-n + 2))::before,\n [dir='rtl'] &:not(:nth-last-of-type(-n + 2))::after {\n clip-path: polygon(\n 0% 0%,\n var(--segmented-edge-thickness) 0%,\n calc(var(--segmented-width) + var(--segmented-edge-thickness)) 100%,\n var(--segmented-width) 100%\n );\n }\n\n @media (pointer: coarse) {\n / A single CSS custom property update propagates to all margin and clip-path consumers /\n --segmented-width: ${segmentedConfig.coarseWidth};\n }\n `;\n};\n\nconst stageContainerVariants: Record<\n StageVariant,\n (theme: DefaultTheme, readOnly: boolean \| undefined) => ReturnType<typeof css>\n> = {\n chevron: stageContainerChevronStyles,\n segmented: stageContainerSegmentedStyles,\n milestone: () => css``\n};\n\n/\n `<li>` container for a single stage item. Manages negative-margin chevron overlap,\n * pseudo-element positioning, and z-index stacking for interactive states.\n /\nexport const StyledStageContainer = styled.li<{\n readOnly?: boolean;\n variant: StageVariant;\n}>(\n ({\n theme,\n theme: {\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n readOnly,\n variant: shape\n }) => {\n return css`\n display: flex;\n position: relative;\n\n / Resting z-index: for same-z siblings, DOM order determines paint order.\n * All non-last <li>s have z-index:1 so the later (right) <li>'s ::before paints on top\n * at internal boundaries; the last <li> has no z-index so its left neighbor's ::after\n * wins at the final boundary. On hover/focus/active, the interacting <li> gains z:2/3\n * and its own pseudo-element surfaces for that boundary, regardless of which side.\n /\n &:not(:nth-last-of-type(-n + 2)) {\n z-index: 1;\n }\n\n &:has(button:focus-visible),\n &:has(button:active) {\n z-index: 2;\n }\n\n ${!readOnly &&\n css`\n &:has(button:hover) {\n z-index: 3;\n }\n `}\n\n / Corner radii are shared across all shape variants /\n &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n border-start-start-radius: ${borderRadius};\n border-end-start-radius: ${borderRadius};\n }\n\n &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n border-start-end-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n }\n\n &:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {\n border-radius: ${borderRadius};\n width: 100%;\n }\n\n ${stageContainerVariants[shape](theme, readOnly)}\n `;\n }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\n\n/\n `<ol>` list of sub-step items displayed below the stages bar when a stage is expanded.\n /\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin: calc(2 ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n &:empty {\n margin-block-end: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\n/*\n Individual step `<li>` within a stage. Dims text and icon at reduced opacity when completed.\n /\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n return css`\n border-radius: 0;\n margin-block-end: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-block-end: 0;\n }\n\n & > ${StyledIcon} {\n text-align: center;\n }\n\n div {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\n/\n Small datetime label rendered beneath a step. Displayed at the `xs` font size\n * and reduced opacity.\n /\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n font-size: ${fontSize.xs};\n opacity: ${theme.base.transparency['transparent-2']};\n `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\n/\n Container `<div>` for the stage glimpse preview panel, constrained to a small max-width.\n /\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\nconst milestonePulse = keyframes`\n 0%, 100% {\n box-shadow: 0 0 0 var(--milestone-pulse-min) var(--milestone-pulse-start);\n }\n 60% {\n box-shadow: 0 0 0 var(--milestone-pulse-spread) var(--milestone-pulse-end);\n }\n`;\n\nexport const StyledMilestoneLabel = styled.span(({ theme }) => {\n return css`\n color: ${theme.base.palette['foreground-color']};\n line-height: ${theme.base['line-height']};\n text-align: center;\n align-self: stretch;\n overflow-wrap: break-word;\n padding-inline: calc(0.25 ${theme.base.spacing});\n `;\n});\n\nStyledMilestoneLabel.defaultProps = defaultThemeProp;\n\n/*\n `<li>` container for a single stage item in the 'milestone' shape variant.\n * Renders column-flex layout (milestone above, label below) and draws the\n * horizontal connector as a single line from this milestone's centre to the next\n * milestone's centre (::after), sized so every connector has an identical length.\n /\nexport const StyledMilestoneStageContainer = styled.li<{\n status: 'completed' \| 'current' \| 'pending';\n nextCompleted: boolean;\n readOnly?: boolean;\n}>(({ theme, nextCompleted, status }) => {\n const {\n base: {\n palette: { interactive, 'border-line': borderLine },\n spacing\n }\n } = theme;\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const connectorFilled = nextCompleted;\n\n return css`\n --connector-height: ${connectorFilled ? '0.25rem' : '0.125rem'};\n --connector-display: block;\n --connector-start: 50%;\n --connector-width: 100%;\n --connector-bg: ${connectorFilled ? interactive : borderLine};\n --connector-forced-bg: ${connectorFilled ? 'Highlight' : 'CanvasText'};\n display: flex;\n flex-direction: column;\n align-items: center;\n flex: 1 0 0;\n font-size: ${fontSize.xs};\n font-weight: ${status === 'current'\n ? theme.base['font-weight']['semi-bold']\n : theme.base['font-weight'].normal};\n min-width: 15ch;\n position: relative;\n gap: ${spacing};\n z-index: 1;\n\n &:nth-of-type(2):not(:nth-last-of-type(2)) {\n --connector-start: calc(var(--milestone-size) / 2);\n --connector-width: calc(200% - var(--milestone-size));\n align-items: flex-start;\n flex: 0.5 0 calc(var(--milestone-size) / 2);\n min-width: calc(7.5ch + var(--milestone-size) / 2);\n\n ${StyledMilestoneLabel} {\n text-align: start;\n }\n }\n\n &:nth-last-of-type(2):not(:nth-of-type(2)) {\n --connector-display: none;\n align-items: flex-end;\n flex: 0.5 0 calc(var(--milestone-size) / 2);\n min-width: calc(7.5ch + var(--milestone-size) / 2);\n\n ${StyledMilestoneLabel} {\n text-align: end;\n }\n }\n\n &:nth-of-type(2):nth-last-of-type(2) {\n --connector-display: none;\n align-items: center;\n flex: 1 0 0;\n }\n\n &::after {\n content: '';\n display: var(--connector-display);\n position: absolute;\n inset-block-start: calc(var(--milestone-size) / 2 - var(--connector-height) / 2);\n inset-inline-start: var(--connector-start);\n width: var(--connector-width);\n height: var(--connector-height);\n background: var(--connector-bg);\n pointer-events: none;\n\n @media (forced-colors: active) {\n background: var(--connector-forced-bg);\n }\n }\n `;\n});\n\nStyledMilestoneStageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMilestoneButton = styled.button<{\n status: 'completed' \| 'current' \| 'pending';\n readOnly?: boolean;\n}>(({ theme, status, readOnly }) => {\n const {\n base: {\n 'hit-area': hitArea,\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n shadow: { focus: focusShadow }\n },\n components: {\n button: { 'border-width': borderWidth },\n 'case-view': { stages }\n }\n } = theme;\n\n const stageForeground = calculateForegroundColor(\n stages.status[status].background,\n stages.status[status]['foreground-color']\n );\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const completedBorderColor =\n status === 'completed'\n ? tryCatch(\n () => darken(0.12, stages.status.completed.background),\n () => 'transparent'\n )\n : '';\n\n return css`\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 50%;\n width: var(--milestone-size);\n height: var(--milestone-size);\n background: ${stages.status[status].background};\n color: ${stageForeground};\n font-size: ${fontSize.s};\n font-weight: ${status === 'current'\n ? theme.base['font-weight']['semi-bold']\n : theme.base['font-weight'].normal};\n outline: none;\n border: none;\n cursor: ${readOnly ? 'default' : 'pointer'};\n transition: box-shadow calc(2 ${animationSpeed}) ${animationTiming};\n\n ${status === 'completed' &&\n css`\n box-shadow: inset 0 0 0 calc(2 * ${borderWidth}) ${completedBorderColor};\n `}\n\n &:focus-visible {\n box-shadow: ${focusShadow};\n\n @media (forced-colors: active) {\n outline: 0.125rem solid Highlight;\n outline-offset: 0.125rem;\n }\n }\n\n ${!readOnly &&\n css`\n &:hover {\n filter: brightness(0.85);\n }\n\n &:active {\n filter: brightness(0.85);\n }\n `}\n\n ${status === 'current' &&\n !readOnly &&\n css`\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: 50%;\n pointer-events: none;\n animation: ${milestonePulse} 2s ease-out infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n }\n `}\n\n /* Expanded hit area /\n &::after {\n content: '';\n position: absolute;\n width: ${hitArea['mouse-min']};\n height: ${hitArea['mouse-min']};\n inset-block-start: calc((${hitArea['mouse-min']} - var(--milestone-size)) / -2);\n inset-inline-start: calc((${hitArea['mouse-min']} - var(--milestone-size)) / -2);\n\n @media (pointer: coarse) {\n width: ${hitArea['finger-min']};\n height: ${hitArea['finger-min']};\n inset-block-start: calc((${hitArea['finger-min']} - var(--milestone-size)) / -2);\n inset-inline-start: calc((${hitArea['finger-min']} - var(--milestone-size)) / -2);\n }\n }\n\n @media (forced-colors: active) {\n border: 0.125rem solid ButtonText;\n }\n `;\n});\n\nStyledMilestoneButton.defaultProps = defaultThemeProp;\n\n/\n Visually hidden `<p>` providing an accessible description for the stages list,\n * announced by screen readers but not displayed on screen.\n */\nexport const StyledStagesDescription = styled.p`\n display: none;\n`;\n\nStyledStagesDescription.defaultProps = defaultThemeProp;\n"]}
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, keyframes } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { transparentize, darken } from 'polished';\n\nimport {\n calculateFontSize,\n DateTimeDisplay,\n defaultThemeProp,\n Icon,\n Text,\n StyledIcon,\n calculateForegroundColor,\n tryCatch\n} from '@pega/cosmos-react-core';\n\nimport type { StageVariant } from './Stages.types';\n\nconst stageClipPath = (leftNotch: boolean, rightPoint: boolean, mirrored = false): string => {\n if (mirrored) {\n // RTL: mirror the LTR clip-path polygon\n const points = ['100% 0', '0 0'];\n if (leftNotch) {\n points.push('var(--stage-chevron-width) 0', '0 50%', 'var(--stage-chevron-width) 100%');\n } else {\n points.push('0 100%');\n }\n points.push('100% 100%');\n if (rightPoint) {\n points.push('calc(100% - var(--stage-chevron-width)) 50%');\n }\n return `clip-path: polygon(${points.join(', ')});`;\n }\n\n const points = ['0 0', '100% 0'];\n if (rightPoint) {\n points.push(\n 'calc(100% - var(--stage-chevron-width)) 0',\n '100% 50%',\n 'calc(100% - var(--stage-chevron-width)) 100%'\n );\n } else {\n points.push('100% 100%');\n }\n points.push('0 100%');\n if (leftNotch) {\n points.push('var(--stage-chevron-width) 50%');\n }\n return `clip-path: polygon(${points.join(', ')});`;\n};\n\nconst segmentedConfig = {\n width: 'calc(0.8 * var(--chevron-spacing))',\n coarseWidth: 'calc(1.0 * var(--chevron-spacing))'\n} as const;\n\nconst segmentedClipPath = (leftCut: boolean, rightCut: boolean, mirrored = false): string => {\n if (mirrored) {\n const topRight = rightCut ? 'calc(100% - var(--segmented-width)) 0%' : '100% 0%';\n const bottomLeft = leftCut ? 'var(--segmented-width) 100%' : '0% 100%';\n\n return `clip-path: polygon(0% 0%, ${topRight}, 100% 100%, ${bottomLeft});`;\n }\n\n const topLeft = leftCut ? 'var(--segmented-width) 0%' : '0% 0%';\n const bottomRight = rightCut ? 'calc(100% - var(--segmented-width)) 100%' : '100% 100%';\n\n return `clip-path: polygon(${topLeft}, 100% 0%, ${bottomRight}, 0% 100%);`;\n};\n\n// === Chevron Configuration ===\n// Centralizes spacing and border thickness via CSS custom properties set at StyledStages\nconst chevronConfig = {\n // Horizontal projection of the rotated border-square forming the chevron point (fine pointer).\n // Derived from the border-square size × cos(45° + skew). Tuned to visually align with the stage height.\n // All values scaled by 1.25× relative to the original 4× spacing design (now 5× spacing height).\n width: 'calc(1.445 * var(--chevron-spacing))',\n // Same horizontal projection for coarse/touch pointer (larger square, proportionally wider point).\n coarseWidth: 'calc(1.797 * var(--chevron-spacing))',\n // Side length of the rotated border-square forming the chevron (fine pointer: 3.75× base spacing).\n squareSize: 'calc(3.75 * var(--chevron-spacing))',\n // Side length of the rotated border-square for coarse/touch pointer (5× base spacing).\n coarseSquareSize: 'calc(5 * var(--chevron-spacing))',\n // Distance to inset the ::before notch from the left edge of the stage (fine pointer).\n // 0.86 ≈ width − half-border-overlap, keeps the notch flush with the preceding chevron point.\n offsetLeft: 'calc(0.86 * var(--chevron-spacing))',\n // Distance to inset the ::after point from the right edge of the stage (fine pointer).\n // Equal to `width` so the point extends exactly one chevron-width beyond the stage boundary.\n offsetRight: 'calc(1.445 * var(--chevron-spacing))',\n // Coarse-pointer equivalents of offsetLeft/offsetRight, scaled to match coarseWidth/coarseSquareSize.\n // coarseOffsetLeft must satisfy: coarseSquareSize = 2 × coarseWidth + coarseOffsetLeft\n // (5 = 2 × 1.797 + 1.406) so that ::before and ::after co-locate on coarse devices.\n coarseOffsetLeft: 'calc(1.406 * var(--chevron-spacing))',\n coarseOffsetRight: 'calc(1.797 * var(--chevron-spacing))',\n // Pre-computed flat positions for ::before notch and ::after point.\n notchInsetStart: 'calc(-2.305 * var(--chevron-spacing))',\n // 3.203 = exact alignment (coarseSquareSize - coarseWidth); slightly overdone default clears sub-pixel rounding on 3× displays.\n coarseNotchInsetStart:\n 'calc(-1 * var(--stages-coarse-notch-correction) * var(--chevron-spacing))',\n pointInsetEnd: '0'\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: ${config.notchInsetStart};\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-inline-end: ${config.pointInsetEnd};\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 -webkit-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-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 -webkit-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 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 -webkit-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-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 -webkit-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 mask-image: linear-gradient(\n to right,\n transparent calc(-1 * var(--mask-edge-overhang)),\n black var(--stages-fade-end),\n black calc(100% - var(--stages-fade-start)),\n transparent calc(100% + var(--mask-edge-overhang))\n );\n }\n }\n `;\n});\n\nStyledStagesWrapper.defaultProps = defaultThemeProp;\n\n/*\n Scrollable `<ol>` containing all stage chevron items. Sets the `--chevron-spacing`,\n * `--chevron-border-thickness`, and `--segmented-border-thickness` custom properties\n * consumed by child elements.\n /\nexport const StyledStages = styled.ol<{ variant: StageVariant }>(({ theme, variant }) => {\n const isMilestone = variant === 'milestone';\n\n return css`\n --chevron-spacing: ${theme.base.spacing};\n --chevron-border-thickness: ${theme.components.button['border-width']};\n --segmented-border-thickness: calc(2 ${theme.components.button['border-width']});\n --segmented-width: ${segmentedConfig.width};\n background: ${theme.components.card.background};\n border-radius: ${theme.components.card['border-radius']};\n display: flex;\n padding: 0;\n width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n list-style: none;\n scrollbar-width: thin;\n scrollbar-color: transparent transparent;\n\n ${isMilestone &&\n css`\n --milestone-size: calc(4 * ${theme.base.spacing});\n --milestone-pulse-min: calc(var(--milestone-size) * 0.1);\n --milestone-pulse-start: ${transparentize(0.5, theme.base.palette.interactive)};\n --milestone-pulse-spread: calc(var(--milestone-size) * 0.25);\n --milestone-pulse-end: ${transparentize(0.75, theme.base.palette.interactive)};\n padding-block: ${theme.base.spacing};\n padding-inline: calc(var(--milestone-size) * 0.25);\n `}\n\n &:hover,\n &:focus-within {\n scrollbar-color: var(\n --stages-scrollbar-thumb,\n ${transparentize(0.4, theme.base.palette['border-line'])}\n )\n var(--stages-scrollbar-track, transparent);\n }\n\n &::-webkit-scrollbar {\n height: 0.25rem;\n }\n\n @media (pointer: coarse) {\n /* 3.203 = exact alignment; slightly overdone default to clear sub-pixel rounding on 3× displays /\n --stages-coarse-notch-correction: 3.35;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\n/\n A sentinel is an invisible 1 px <li> placed at each end of the scrollable stage list.\n * It is observed by an IntersectionObserver; when it scrolls out of view, the component sets\n * --stages-fade-start or --stages-fade-end to show a gradient fade indicating more stages\n * are reachable by scrolling. When it comes back into view the property is reset to 0.\n \n Sentinel elements carry aria-hidden=\"true\" so they are valid list items semantically.\n * Because styled-components scopes all CSS to a generated class, the chevron and layout rules\n * in StyledStageContainer never apply to these elements — they carry a different class.\n * CSS type-based selectors (:nth-of-type, :nth-last-of-type) in StyledStageContainer are\n * offset by 1 at each end to skip the sentinels and target only real stage items.\n /\nexport const StyledSentinel = styled.li`\n flex-shrink: 0;\n\n / NOTE: the sentinel must occupy\n * a single physical pixel so IntersectionObserver can detect it at threshold 0 while having\n * negligible layout impact. A rem value could collapse to zero at small font sizes.\n /\n / stylelint-disable-next-line unit-allowed-list -- 1px is intentional /\n width: 1px;\n / stylelint-disable-next-line unit-allowed-list -- 1px is intentional /\n height: 1px;\n padding: 0;\n margin: 0;\n pointer-events: none;\n\n / Collapse the sentinel's layout footprint to zero on the side facing the stages.\n * Without this, each 1px sentinel creates a visible gap between the stage buttons\n * and the left/right edges of the wrapper. The sentinel remains in flow (required\n * for IntersectionObserver scroll detection) but no longer displaces stage content.\n /\n &:first-of-type {\n / stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width /\n margin-inline-end: -1px;\n }\n\n &:last-of-type {\n / stylelint-disable-next-line unit-allowed-list -- 1px matches sentinel width /\n margin-inline-start: -1px;\n }\n`;\n\nStyledSentinel.defaultProps = defaultThemeProp;\n\n/\n Inner `<span>` holding stage label content. Optionally applies `text-overflow: ellipsis`\n * for stages with long labels.\n /\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(({ theme, ellipsis }) => {\n return css`\n display: inline-flex;\n align-items: center;\n gap: calc(0.25 ${theme.base.spacing});\n text-align: center;\n white-space: nowrap;\n padding-inline-start: calc(0.875 * ${theme.base.spacing});\n padding-inline-end: calc(1.125 * ${theme.base.spacing});\n ${ellipsis &&\n css`\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n `;\n});\n\nStyledInnerStage.defaultProps = defaultThemeProp;\n\nconst stageButtonChevronStyles = (theme: DefaultTheme) => css`\n padding-inline-start: calc(2 * var(--chevron-spacing));\n padding-inline-end: var(--chevron-spacing);\n width: calc(100% + ${chevronConfig.width});\n --stage-chevron-width: ${chevronConfig.width};\n\n ${StyledInnerStage} {\n transform: translateX(calc(-0.25 * var(--chevron-spacing)));\n opacity: ${theme.base.transparency['transparent-2']};\n }\n\n ${stageClipPath(true, true)}\n\n [dir='rtl'] & ${StyledInnerStage} {\n transform: translateX(calc(0.25 * var(--chevron-spacing)));\n }\n\n [dir='rtl'] & {\n ${stageClipPath(true, true, true)}\n }\n\n @media (pointer: coarse) {\n padding-inline-start: calc(2.25 * var(--chevron-spacing));\n width: calc(100% + ${chevronConfig.coarseWidth});\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n }\n`;\n\nconst stageButtonSegmentedStyles = (theme: DefaultTheme) => css`\n width: 100%;\n padding-inline-start: calc(var(--segmented-width) + var(--chevron-spacing));\n padding-inline-end: calc(var(--segmented-width) + var(--chevron-spacing));\n\n ${StyledInnerStage} {\n opacity: ${theme.base.transparency['transparent-2']};\n }\n\n ${segmentedClipPath(true, true)}\n\n [dir='rtl'] & {\n ${segmentedClipPath(true, true, true)}\n }\n`;\n\nconst stageButtonVariants: Record<StageVariant, (theme: DefaultTheme) => ReturnType<typeof css>> = {\n chevron: stageButtonChevronStyles,\n segmented: stageButtonSegmentedStyles,\n milestone: () => css``\n};\n\n/*\n Clickable `<button>` for a single stage. Renders the chevron clip-path shape and\n * applies status-based background and foreground colours.\n /\nexport const StyledStage = styled.button<{\n status: 'completed' \| 'current' \| 'pending';\n readOnly?: boolean;\n variant: StageVariant;\n}>(\n ({\n theme,\n theme: {\n base: { palette, 'hit-area': hitArea, transparency, 'font-weight': fontWeight },\n components: {\n 'case-view': { stages }\n }\n },\n status,\n readOnly,\n variant: shape\n }) => {\n const stageForeground = calculateForegroundColor(\n stages.status[status].background,\n stages.status[status]['foreground-color']\n );\n\n return css`\n background: ${stages.status[status].background};\n color: ${stageForeground};\n outline: none;\n border-color: transparent;\n border-width: calc(2 var(--chevron-border-thickness)) 0;\n border-style: solid;\n position: relative;\n\n /* Browsers do not reliably apply flex align-items: stretch to <button> elements.\n * Adding 0.0625rem (1px at default font size) to min-height compensates so the button fills its <li> container,\n * keeping the clipped chevron background flush with the top and bottom borders. /\n min-height: calc(5 var(--chevron-spacing) + 0.0625rem);\n margin-inline-start: 0;\n margin-inline-end: 0;\n\n ${stageButtonVariants[shape](theme)}\n\n ${!readOnly &&\n css`\n &:hover {\n border-color: ${palette['border-line']};\n }\n `}\n\n &:focus-visible {\n border-color: ${palette.interactive};\n }\n\n &:active {\n border-color: ${palette.interactive};\n\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-3']};\n }\n }\n\n &[aria-current] {\n ${StyledInnerStage} {\n font-weight: ${fontWeight.bold};\n opacity: 1;\n }\n\n ${!readOnly &&\n css`\n &:hover {\n ${StyledInnerStage} {\n opacity: ${transparency['transparent-2']};\n }\n }\n `}\n }\n\n @media (pointer: coarse) {\n min-height: ${hitArea['finger-min']};\n }\n `;\n }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\n/*\n Checkmark icon shown inside completed stages, tinted to match the stage foreground colour.\n /\nexport const StyledStageCompleteIcon = styled(Icon)(({\n theme: {\n components: {\n 'case-view': {\n stages: {\n status: {\n completed: { 'foreground-color': foregroundColor, background }\n }\n }\n }\n }\n }\n}) => {\n const stageForeground = calculateForegroundColor(background, foregroundColor);\n return css`\n color: ${stageForeground};\n `;\n});\n\nStyledStageCompleteIcon.defaultProps = defaultThemeProp;\n\n/\n Stage label text. Renders in bold weight when the stage is the current active stage.\n /\nexport const StyledStageText = styled(Text)<{ isCurrent?: boolean }>(\n ({ theme, isCurrent }) => css`\n font-weight: ${isCurrent ? theme.base['font-weight'].bold : theme.base['font-weight'].normal};\n `\n);\n\nStyledStageText.defaultProps = defaultThemeProp;\n\nconst stageContainerChevronStyles = (theme: DefaultTheme, readOnly: boolean \| undefined) => {\n const includeHover = !readOnly;\n return css`\n / Chevron: negative-margin overlap so consecutive stages share a boundary /\n margin-inline-start: calc(-1 ${chevronConfig.width});\n\n &:nth-of-type(2) {\n margin-inline-start: 0;\n }\n\n /* Chevron boundary indicators via ::before (left notch) and ::after (right point) pseudo-elements /\n &:not(:nth-of-type(-n + 2))::before {\n ${createChevronPseudo(\n 'calc(2 var(--chevron-border-thickness))',\n theme.base.palette['border-line'],\n chevronConfig.squareSize\n )}\n /* Elevate ::before above the button so it renders via the same pathway as ::after.\n * Without z-index, ::before (first in DOM) is painted first and then covered by the\n * button, making it only partially visible through the clip-path notch window. This\n * causes thicker interactive-state borders (3×) to look thinner on the left boundary\n * than on the right (::after, which paints last and is always fully visible).\n * The ::before tip's rightmost extent is at --stage-chevron-width from the <li> start,\n * which is before the stage text (padding-inline-start: 2 × spacing), so no content overlap.\n /\n z-index: 1;\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n ${createChevronPseudo(\n 'calc(2 var(--chevron-border-thickness))',\n theme.base.palette['border-line'],\n chevronConfig.squareSize\n )}\n }\n\n [dir='rtl'] &::before,\n [dir='rtl'] &::after {\n transform: rotateZ(-45deg) skew(-15deg, -15deg);\n }\n\n /* Chevron positioning: 45° rotated squares create visual tips via offsets:\n * left ≈ 0.86 × spacing, right ≈ 1.445 × spacing (accounts for skew correction)\n /\n ${createChevronBaseStyles(chevronConfig, 'var(--chevron-border-thickness)')}\n ${createChevronInteractiveStates(\n chevronConfig,\n 'var(--chevron-border-thickness)',\n includeHover\n )}\n\n / Thicken chevrons to visually match button top/bottom border on any colored state.\n * At 45° rotation, border appears 1/sin(45°) ≈ 0.707× thinner, so 2× border ≈ 1.4× horizontal border weight.\n /\n ${includeHover &&\n css`\n &:has(button:hover)::before,\n &:has(button:hover)::after {\n border-color: ${theme.base.palette['border-line']};\n }\n `}\n\n &:has(button:focus-visible)::before,\n &:has(button:focus-visible)::after {\n border-color: ${theme.base.palette.interactive};\n }\n\n &:has(button:active)::before,\n &:has(button:active)::after {\n border-color: ${theme.base.palette.interactive};\n }\n\n / First stage: no left notch, extended width to cover the full left edge /\n &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n --stage-chevron-width: ${chevronConfig.width};\n width: calc(100% + (2 var(--stage-chevron-width)));\n padding-inline-start: calc(var(--chevron-spacing));\n ${stageClipPath(false, true)}\n\n ${includeHover &&\n css`\n /* Inline-start interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds /\n &:hover {\n box-shadow: inset calc(2 var(--chevron-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n }\n }\n\n @media (pointer: coarse) {\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n width: calc(100% + (2 * var(--stage-chevron-width)));\n }\n }\n\n /* Last stage: no right point /\n &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n --stage-chevron-width: ${chevronConfig.width};\n padding-inline-end: 0;\n width: 100%;\n ${stageClipPath(true, false)}\n\n ${includeHover &&\n css`\n / Inline-end interactive indicator via inset shadow — avoids border-color bleeding through gradient backgrounds /\n &:hover {\n box-shadow: inset calc(-2 var(--chevron-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n }\n }\n\n @media (pointer: coarse) {\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n }\n }\n\n /* RTL: flip clip-paths for first and last stages /\n [dir='rtl'] &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n ${stageClipPath(true, false, true)}\n }\n\n [dir='rtl'] &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n ${stageClipPath(false, true, true)}\n }\n\n / Single stage: plain rectangle — no clip-path notch, inset shadows on both sides /\n &:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {\n --stage-chevron-width: ${chevronConfig.width};\n clip-path: none;\n padding-inline-start: calc(var(--chevron-spacing));\n\n ${includeHover &&\n css`\n &:hover {\n box-shadow:\n inset calc(2 var(--chevron-border-thickness)) 0 0 ${theme.base.palette['border-line']},\n inset calc(-2 * var(--chevron-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow:\n inset calc(2 * var(--chevron-border-thickness)) 0 0 ${theme.base.palette.interactive},\n inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${theme.base.palette.interactive};\n }\n\n @media (pointer: coarse) {\n --stage-chevron-width: ${chevronConfig.coarseWidth};\n }\n }\n\n @media (pointer: coarse) {\n margin-inline-start: calc(-1 * ${chevronConfig.coarseWidth});\n\n &:not(:nth-of-type(-n + 2))::before,\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-block-start: calc(50% - ${chevronConfig.coarseSquareSize} / 2);\n width: ${chevronConfig.coarseSquareSize};\n height: ${chevronConfig.coarseSquareSize};\n border-inline-end-width: calc(2 * var(--chevron-border-thickness));\n border-block-start-width: calc(2 * var(--chevron-border-thickness));\n }\n\n &:not(:nth-of-type(-n + 2))::before {\n inset-inline-start: ${chevronConfig.coarseNotchInsetStart};\n }\n\n &:not(:nth-last-of-type(-n + 2))::after {\n inset-inline-end: 0;\n }\n }\n `;\n};\n\nconst stageContainerSegmentedStyles = (theme: DefaultTheme, readOnly: boolean \| undefined) => {\n const includeHover = !readOnly;\n\n return css`\n --segmented-edge-thickness: var(--chevron-border-thickness);\n\n /* Segmented: stages overlap by --segmented-width so parallelogram edges meet flush /\n margin-inline-start: calc(-1 var(--segmented-width));\n\n &:nth-of-type(2) {\n margin-inline-start: 0;\n }\n\n /* Left segmented border strip: diagonal clip-path on each stage's inline-start edge (stages 2..N).\n * The strip goes from (segmented-width, 0%) at top to (0%, 100%) at bottom of the pseudo,\n * matching the parallelogram's inline-start clip edge exactly.\n /\n &:not(:nth-of-type(-n + 2))::before {\n content: '';\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n width: calc(var(--segmented-width) + var(--segmented-edge-thickness));\n clip-path: polygon(\n var(--segmented-width) 0%,\n calc(var(--segmented-width) + var(--segmented-edge-thickness)) 0%,\n var(--segmented-edge-thickness) 100%,\n 0% 100%\n );\n background: ${theme.base.palette['border-line']};\n pointer-events: none;\n z-index: 1;\n }\n\n / Right segmented border strip: diagonal clip-path on each stage's inline-end edge (stages 1..N-1). /\n &:not(:nth-last-of-type(-n + 2))::after {\n content: '';\n position: absolute;\n inset-block: 0;\n inset-inline-end: 0;\n width: calc(var(--segmented-width) + var(--segmented-edge-thickness));\n clip-path: polygon(\n var(--segmented-width) 0%,\n calc(var(--segmented-width) + var(--segmented-edge-thickness)) 0%,\n var(--segmented-edge-thickness) 100%,\n 0% 100%\n );\n background: ${theme.base.palette['border-line']};\n pointer-events: none;\n z-index: 2;\n }\n\n / Interactive states: update pseudo background to signal hover/focus/active /\n ${includeHover &&\n css`\n &:has(button:hover) {\n --segmented-edge-thickness: var(--segmented-border-thickness);\n }\n\n &:has(button:hover)::before,\n &:has(button:hover)::after {\n background: ${theme.base.palette['border-line']};\n }\n `}\n\n &:has(button:focus-visible),\n &:has(button:active) {\n --segmented-edge-thickness: var(--segmented-border-thickness);\n }\n\n &:has(button:focus-visible)::before,\n &:has(button:focus-visible)::after,\n &:has(button:active)::before,\n &:has(button:active)::after {\n background: ${theme.base.palette.interactive};\n }\n\n / First stage (no inline-start cut): flat left edge + inset shadow edge indicator /\n &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n ${segmentedClipPath(false, true)}\n\n ${includeHover &&\n css`\n &:hover {\n box-shadow: inset var(--segmented-border-thickness) 0 0\n ${theme.base.palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-1 var(--segmented-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset calc(-1 * var(--segmented-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n }\n }\n }\n\n /* Last stage (no inline-end cut): flat right edge + inset shadow edge indicator /\n &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n ${segmentedClipPath(true, false)}\n\n ${includeHover &&\n css`\n &:hover {\n box-shadow: inset calc(-1 var(--segmented-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n\n [dir='rtl'] & {\n box-shadow: inset var(--segmented-border-thickness) 0 0\n ${theme.base.palette['border-line']};\n }\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow: inset calc(-1 * var(--segmented-border-thickness)) 0 0\n ${theme.base.palette.interactive};\n\n [dir='rtl'] & {\n box-shadow: inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive};\n }\n }\n }\n\n /* RTL: flip clip-paths for first and last stage buttons /\n [dir='rtl'] &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n ${segmentedClipPath(true, false, true)}\n }\n\n [dir='rtl'] &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n ${segmentedClipPath(false, true, true)}\n }\n\n / Single stage: plain rectangle — no diagonal cuts, inset shadows on both sides /\n &:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {\n clip-path: none;\n padding-inline-start: calc(var(--chevron-spacing));\n padding-inline-end: calc(var(--chevron-spacing));\n\n ${includeHover &&\n css`\n &:hover {\n box-shadow:\n inset var(--segmented-border-thickness) 0 0 ${theme.base.palette['border-line']},\n inset calc(-1 var(--segmented-border-thickness)) 0 0\n ${theme.base.palette['border-line']};\n }\n `}\n\n &:focus-visible,\n &:active {\n box-shadow:\n inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive},\n inset calc(-1 * var(--segmented-border-thickness)) 0 0 ${theme.base.palette.interactive};\n }\n }\n\n /* RTL: mirror the pseudo clip-paths.\n * In LTR the strip goes top-right → bottom-left (polygon A 0%, A+B 0%, B 100%, 0% 100%).\n * In RTL the pseudo is positioned at the opposite physical edge via logical inset properties,\n * so the strip must go top-left → bottom-right to stay aligned with the flipped slant.\n /\n [dir='rtl'] &:not(:nth-of-type(-n + 2))::before,\n [dir='rtl'] &:not(:nth-last-of-type(-n + 2))::after {\n clip-path: polygon(\n 0% 0%,\n var(--segmented-edge-thickness) 0%,\n calc(var(--segmented-width) + var(--segmented-edge-thickness)) 100%,\n var(--segmented-width) 100%\n );\n }\n\n @media (pointer: coarse) {\n / A single CSS custom property update propagates to all margin and clip-path consumers /\n --segmented-width: ${segmentedConfig.coarseWidth};\n }\n `;\n};\n\nconst stageContainerVariants: Record<\n StageVariant,\n (theme: DefaultTheme, readOnly: boolean \| undefined) => ReturnType<typeof css>\n> = {\n chevron: stageContainerChevronStyles,\n segmented: stageContainerSegmentedStyles,\n milestone: () => css``\n};\n\n/\n `<li>` container for a single stage item. Manages negative-margin chevron overlap,\n * pseudo-element positioning, and z-index stacking for interactive states.\n /\nexport const StyledStageContainer = styled.li<{\n readOnly?: boolean;\n variant: StageVariant;\n}>(\n ({\n theme,\n theme: {\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n readOnly,\n variant: shape\n }) => {\n return css`\n display: flex;\n position: relative;\n\n / Resting z-index: for same-z siblings, DOM order determines paint order.\n * All non-last <li>s have z-index:1 so the later (right) <li>'s ::before paints on top\n * at internal boundaries; the last <li> has no z-index so its left neighbor's ::after\n * wins at the final boundary. On hover/focus/active, the interacting <li> gains z:2/3\n * and its own pseudo-element surfaces for that boundary, regardless of which side.\n /\n &:not(:nth-last-of-type(-n + 2)) {\n z-index: 1;\n }\n\n &:has(button:focus-visible),\n &:has(button:active) {\n z-index: 2;\n }\n\n ${!readOnly &&\n css`\n &:has(button:hover) {\n z-index: 3;\n }\n `}\n\n / Corner radii are shared across all shape variants /\n &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {\n border-start-start-radius: ${borderRadius};\n border-end-start-radius: ${borderRadius};\n }\n\n &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {\n border-start-end-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n }\n\n &:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {\n border-radius: ${borderRadius};\n width: 100%;\n }\n\n ${stageContainerVariants[shape](theme, readOnly)}\n `;\n }\n);\n\nStyledStageContainer.defaultProps = defaultThemeProp;\n\n/\n `<ol>` list of sub-step items displayed below the stages bar when a stage is expanded.\n /\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n return css`\n list-style-type: none;\n margin: calc(2 ${theme.base.spacing}) 0 calc(3 * ${theme.base.spacing});\n\n &:empty {\n margin-block-end: 0;\n }\n `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\n/*\n Individual step `<li>` within a stage. Dims text and icon at reduced opacity when completed.\n /\nexport const StyledStep = styled.li<{ completed: boolean }>(({ completed, theme }) => {\n const textOpacity = completed ? theme.base.transparency['transparent-2'] : 1;\n\n return css`\n border-radius: 0;\n margin-block-end: calc(${theme.base.spacing});\n color: ${theme.base.palette['foreground-color']};\n\n &:last-child {\n margin-block-end: 0;\n }\n\n & > ${StyledIcon} {\n text-align: center;\n }\n\n div {\n opacity: ${textOpacity};\n }\n `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\n/\n Small datetime label rendered beneath a step. Displayed at the `xs` font size\n * and reduced opacity.\n /\nexport const StyledDateTimeDisplay = styled(DateTimeDisplay)(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n font-size: ${fontSize.xs};\n opacity: ${theme.base.transparency['transparent-2']};\n `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n\n/\n Container `<div>` for the stage glimpse preview panel, constrained to a small max-width.\n /\nexport const StyledStageGlimpse = styled.div(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n `;\n});\n\nStyledStageGlimpse.defaultProps = defaultThemeProp;\n\nconst milestonePulse = keyframes`\n 0%, 100% {\n box-shadow: 0 0 0 var(--milestone-pulse-min) var(--milestone-pulse-start);\n }\n 60% {\n box-shadow: 0 0 0 var(--milestone-pulse-spread) var(--milestone-pulse-end);\n }\n`;\n\nexport const StyledMilestoneLabel = styled.span(({ theme }) => {\n return css`\n color: ${theme.base.palette['foreground-color']};\n line-height: ${theme.base['line-height']};\n text-align: center;\n align-self: stretch;\n overflow-wrap: break-word;\n padding-inline: calc(0.25 ${theme.base.spacing});\n `;\n});\n\nStyledMilestoneLabel.defaultProps = defaultThemeProp;\n\n/*\n `<li>` container for a single stage item in the 'milestone' shape variant.\n * Renders column-flex layout (milestone above, label below) and draws the\n * horizontal connector as a single line from this milestone's centre to the next\n * milestone's centre (::after), sized so every connector has an identical length.\n /\nexport const StyledMilestoneStageContainer = styled.li<{\n status: 'completed' \| 'current' \| 'pending';\n connectorFilled: boolean;\n readOnly?: boolean;\n}>(({ theme, connectorFilled, status }) => {\n const {\n base: {\n palette: { interactive, 'border-line': borderLine },\n spacing\n }\n } = theme;\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n --connector-height: ${connectorFilled ? '0.25rem' : '0.125rem'};\n --connector-display: block;\n --connector-start: 50%;\n --connector-width: 100%;\n --connector-bg: ${connectorFilled ? interactive : borderLine};\n --connector-forced-bg: ${connectorFilled ? 'Highlight' : 'CanvasText'};\n display: flex;\n flex-direction: column;\n align-items: center;\n flex: 1 0 0;\n font-size: ${fontSize.xs};\n font-weight: ${status === 'current'\n ? theme.base['font-weight']['semi-bold']\n : theme.base['font-weight'].normal};\n min-width: 15ch;\n position: relative;\n gap: ${spacing};\n z-index: 1;\n\n &:nth-of-type(2):not(:nth-last-of-type(2)) {\n --connector-start: calc(var(--milestone-size) / 2);\n --connector-width: calc(200% - var(--milestone-size));\n align-items: flex-start;\n flex: 0.5 0 calc(var(--milestone-size) / 2);\n min-width: calc(7.5ch + var(--milestone-size) / 2);\n\n ${StyledMilestoneLabel} {\n text-align: start;\n }\n }\n\n &:nth-last-of-type(2):not(:nth-of-type(2)) {\n --connector-display: none;\n align-items: flex-end;\n flex: 0.5 0 calc(var(--milestone-size) / 2);\n min-width: calc(7.5ch + var(--milestone-size) / 2);\n\n ${StyledMilestoneLabel} {\n text-align: end;\n }\n }\n\n &:nth-of-type(2):nth-last-of-type(2) {\n --connector-display: none;\n align-items: center;\n flex: 1 0 0;\n }\n\n &::after {\n content: '';\n display: var(--connector-display);\n position: absolute;\n inset-block-start: calc(var(--milestone-size) / 2 - var(--connector-height) / 2);\n inset-inline-start: var(--connector-start);\n width: var(--connector-width);\n height: var(--connector-height);\n background: var(--connector-bg);\n pointer-events: none;\n\n @media (forced-colors: active) {\n background: var(--connector-forced-bg);\n }\n }\n `;\n});\n\nStyledMilestoneStageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMilestoneButton = styled.button<{\n status: 'completed' \| 'current' \| 'pending';\n readOnly?: boolean;\n}>(({ theme, status, readOnly }) => {\n const {\n base: {\n 'hit-area': hitArea,\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n shadow: { focus: focusShadow }\n },\n components: {\n button: { 'border-width': borderWidth },\n 'case-view': { stages }\n }\n } = theme;\n\n const stageForeground = calculateForegroundColor(\n stages.status[status].background,\n stages.status[status]['foreground-color']\n );\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n const completedBorderColor =\n status === 'completed'\n ? tryCatch(\n () => darken(0.12, stages.status.completed.background),\n () => 'transparent'\n )\n : '';\n\n return css`\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 50%;\n width: var(--milestone-size);\n height: var(--milestone-size);\n background: ${stages.status[status].background};\n color: ${stageForeground};\n font-size: ${fontSize.s};\n font-weight: ${status === 'current'\n ? theme.base['font-weight']['semi-bold']\n : theme.base['font-weight'].normal};\n outline: none;\n border: none;\n cursor: ${readOnly ? 'default' : 'pointer'};\n transition: box-shadow calc(2 ${animationSpeed}) ${animationTiming};\n\n ${status === 'completed' &&\n css`\n box-shadow: inset 0 0 0 calc(2 * ${borderWidth}) ${completedBorderColor};\n `}\n\n &:focus-visible {\n box-shadow: ${focusShadow};\n\n @media (forced-colors: active) {\n outline: 0.125rem solid Highlight;\n outline-offset: 0.125rem;\n }\n }\n\n ${!readOnly &&\n css`\n &:hover {\n filter: brightness(0.85);\n }\n\n &:active {\n filter: brightness(0.85);\n }\n `}\n\n ${status === 'current' &&\n !readOnly &&\n css`\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: 50%;\n pointer-events: none;\n animation: ${milestonePulse} 2s ease-out infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n }\n `}\n\n /* Expanded hit area /\n &::after {\n content: '';\n position: absolute;\n width: ${hitArea['mouse-min']};\n height: ${hitArea['mouse-min']};\n inset-block-start: calc((${hitArea['mouse-min']} - var(--milestone-size)) / -2);\n inset-inline-start: calc((${hitArea['mouse-min']} - var(--milestone-size)) / -2);\n\n @media (pointer: coarse) {\n width: ${hitArea['finger-min']};\n height: ${hitArea['finger-min']};\n inset-block-start: calc((${hitArea['finger-min']} - var(--milestone-size)) / -2);\n inset-inline-start: calc((${hitArea['finger-min']} - var(--milestone-size)) / -2);\n }\n }\n\n @media (forced-colors: active) {\n border: 0.125rem solid ButtonText;\n }\n `;\n});\n\nStyledMilestoneButton.defaultProps = defaultThemeProp;\n\n/\n Visually hidden `<p>` providing an accessible description for the stages list,\n * announced by screen readers but not displayed on screen.\n */\nexport const StyledStagesDescription = styled.p`\n display: none;\n`;\n\nStyledStagesDescription.defaultProps = defaultThemeProp;\n"]}

package/package.json CHANGED Viewed

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