@pega/cosmos-react-work 10.0.0-build.4.7 → 10.0.0-build.4.9

package/lib/components/Shortcuts/Shortcuts.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG3C,OAAO,EACL,wBAAwB,EACxB,IAAI,EACJ,WAAW,EACX,UAAU,EACV,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,cAAc,MAAM,6DAA6D,CAAC;AAG9F,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,yBAAyB,EACzB,6BAA6B,EAC7B,2BAA2B,EAC3B,kCAAkC,EAClC,8BAA8B,EAC9B,uBAAuB,EACvB,UAAU,EACX,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,YAAY,CAAC,cAAc,CAAC,CAAC;AAE7B,MAAM,aAAa,GAAG,CACpB,IAAkB,EAMlB,EAAE;IACF,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;QAC7B,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,qBAAqB,EAAE,CAAC;IAC3E,CAAC;IAED,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAyD,EAAE,EAAE;IAC5F,MAAM,EACJ,UAAU,EAAE,EACV,IAAI,EACJ,SAAS,EAAE,EACT,IAAI,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAE,UAAU,EAAE,wBAAwB,EAAE,EACrF,EACF,EACF,GAAG,QAAQ,EAAE,CAAC;IAEf,MAAM,cAAc,GAAG,wBAAwB,CAAC;IAChD,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC;IAEjE,MAAM,cAAc,GAAG,wBAAwB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC3F,IAAI,cAAc,GAAG,wBAAwB,CAAC;IAE9C,IAAI,wBAAwB,KAAK,MAAM,EAAE,CAAC;QACxC,cAAc,GAAG,kBAAkB;YACjC,CAAC,CAAC,aAAa,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;YACtE,CAAC,CAAC,cAAc,CAAC;IACrB,CAAC;IAED,MAAM,eAAe,GAAG;QACtB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,aAAa,EAAE,OAAO;KACvB,CAAC;IAEF,OAAO,CACL,KAAC,mBAAmB,cAClB,MAAC,yBAAyB,IAAC,OAAO,EAAC,MAAM,EAAC,aAAa,EAAE,OAAO,KAAM,aAAa,CAAC,IAAI,CAAC,aACtF,kBAAkB,CAAC,CAAC,CAAC,CACpB,KAAC,uBAAuB,OAClB,eAAe,EACnB,UAAU,EAAE,cAAc,EAC1B,UAAU,EAAE,cAAc,GAC1B,CACH,CAAC,CAAC,CAAC,CACF,KAAC,uBAAuB,OAAK,eAAe,EAAE,SAAS,EAAE,cAAc,GAAI,CAC5E,EACD,MAAC,cAAc,eACb,KAAC,UAAU,cAAE,IAAI,CAAC,KAAK,GAAc,EAEpC,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,KAAC,kBAAkB,IAAC,IAAI,EAAC,MAAM,GAAG,IAChD,IACS,GACR,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,SAAS,CAC7C,EACE,OAAO,EACP,KAAK,GAAG,EAAE,EACV,UAAU,EACV,UAAU,GAAG,IAAI,EACjB,OAAO,GAAG,QAAQ,EAClB,MAAM,EACN,GAAG,SAAS,EACoB,EAClC,GAA0B;IAE1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,MAAM,sBAAsB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE5D,SAAS,CAAC,WAAW,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IACrD,SAAS,CAAC,sBAAsB,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IAEhE,MAAM,UAAU,GAAG,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,UAAU,CAAC,iBAAe,OAAO,CAAC,UAAU,GAAI,CAAC;IAE3F,MAAM,aAAa,GAAG,CAAC,OAAkB,EAAE,EAAE,CAAC,CAC5C,MAAC,IAAI,OAAK,SAAS,iBAAe,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,aACtD,KAAC,UAAU,cACT,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,IAAI,CAAC,CAAC,WAAW,CAAC,GAAQ,GAC1C,EACb,KAAC,WAAW,cAAE,OAAO,GAAe,IAC/B,CACR,CAAC;IAEF,IAAI,UAAU,EAAE,CAAC;QACf,MAAM,iBAAiB,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAEzE,MAAM,gBAAgB,GAAG,CACvB,KAAC,kCAAkC,IAAC,GAAG,EAAE,sBAAsB,YAC5D,iBAAiB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAC5B,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,qBAEjB,OAAO,GAAG,CAAC,EAAE,EAAE,iBACnB,OAAO,CAAC,eAAe,EACpC,EAAE,EAAC,SAAS,aAEZ,KAAC,8BAA8B,IAC7B,EAAE,EAAE,OAAO,GAAG,CAAC,EAAE,EAAE,iBACN,OAAO,CAAC,eAAe,EACpC,OAAO,EAAC,IAAI,YAEX,GAAG,CAAC,KAAK,GACqB,EAEjC,KAAC,6BAA6B,IAAC,IAAI,EAAC,MAAM,gBAAa,GAAG,CAAC,KAAK,YAC7D,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACrB,KAAC,QAAQ,IAAe,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAArC,IAAI,CAAC,EAAE,CAAkC,CACzD,CAAC,GAC4B,KAjB3B,GAAG,CAAC,EAAE,CAkBN,CACR,CAAC,GACiC,CACtC,CAAC;QAEF,OAAO,aAAa,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACvF,CAAC;IAED,MAAM,QAAQ,GAAG,CACf,KAAC,2BAA2B,cAC1B,KAAC,6BAA6B,IAC5B,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,MAAM,iBACE,OAAO,CAAC,IAAI,gBACb,OAAO,IAAI,CAAC,CAAC,WAAW,CAAC,YAEpC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,KAAC,QAAQ,IAAe,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAArC,IAAI,CAAC,EAAE,CAAkC,CACzD,CAAC,GAC4B,GACJ,CAC/B,CAAC;IAEF,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QAEpC,OAAO,CACL,8BAAkB,OAAO,CAAC,IAAI,KAAM,SAAS,EAAE,GAAG,EAAE,GAAG,aACrD,KAAC,kBAAkB,cAAE,OAAO,IAAI,CAAC,CAAC,WAAW,CAAC,GAAsB,EACnE,QAAQ,IACL,CACP,CAAC;IACJ,CAAC;IAED,OAAO,aAAa,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;AACnE,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["import { useRef, forwardRef } from 'react';\nimport type { ReactNode, PropsWithoutRef } from 'react';\n\nimport {\n  calculateForegroundColor,\n  Card,\n  CardContent,\n  CardHeader,\n  EmptyState,\n  Flex,\n  Text,\n  VisuallyHiddenText,\n  readableColor,\n  registerIcon,\n  isSolidColor,\n  useArrows,\n  useI18n,\n  useTestIds,\n  useTheme,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport * as openNewTabIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\n\nimport type { ShortcutsProps, ShortcutItem } from './Shortcuts.types';\nimport {\n  StyledExternalIcon,\n  StyledLabelRow,\n  StyledShortcutsCard,\n  StyledShortcutsCardButton,\n  StyledShortcutsCardsContainer,\n  StyledShortcutsCardsWrapper,\n  StyledShortcutsCategoriesContainer,\n  StyledShortcutsCategoryHeading,\n  StyledShortcutsCardIcon,\n  StyledText\n} from './Shortcuts.styles';\nimport { getShortcutsTestIds } from './Shortcuts.test-ids';\n\nregisterIcon(openNewTabIcon);\n\nconst itemLinkProps = (\n  item: ShortcutItem\n): {\n  href?: string;\n  target?: string;\n  rel?: string;\n  onClick?: () => void;\n} => {\n  if (item.type === 'external') {\n    return { href: item.href, target: '_blank', rel: 'noopener noreferrer' };\n  }\n\n  return { onClick: item.onClick };\n};\n\nconst CardItem = ({ item, variant }: { item: ShortcutItem; variant: 'stacked' | 'inline' }) => {\n  const {\n    components: {\n      card,\n      shortcuts: {\n        icon: { background: configuredIconBackground, foreground: configuredIconForeground }\n      }\n    }\n  } = useTheme();\n\n  const iconBackground = configuredIconBackground;\n  const withIconBackground = Boolean(isSolidColor(iconBackground));\n\n  const cardForeground = calculateForegroundColor(card.background, card['foreground-color']);\n  let iconForeground = configuredIconForeground;\n\n  if (configuredIconForeground === 'auto') {\n    iconForeground = withIconBackground\n      ? readableColor(iconBackground, { mode: 'light', level: 'AANonText' })\n      : cardForeground;\n  }\n\n  const commonIconProps = {\n    name: item.icon,\n    layoutVariant: variant\n  };\n\n  return (\n    <StyledShortcutsCard>\n      <StyledShortcutsCardButton variant='link' layoutVariant={variant} {...itemLinkProps(item)}>\n        {withIconBackground ? (\n          <StyledShortcutsCardIcon\n            {...commonIconProps}\n            background={iconBackground}\n            foreground={iconForeground}\n          />\n        ) : (\n          <StyledShortcutsCardIcon {...commonIconProps} iconColor={iconForeground} />\n        )}\n        <StyledLabelRow>\n          <StyledText>{item.label}</StyledText>\n\n          {item.type === 'external' && <StyledExternalIcon name='open' />}\n        </StyledLabelRow>\n      </StyledShortcutsCardButton>\n    </StyledShortcutsCard>\n  );\n};\n\nconst Shortcuts = forwardRef(function Shortcuts(\n  {\n    heading,\n    items = [],\n    categories,\n    showHeader = true,\n    variant = 'inline',\n    testId,\n    ...restProps\n  }: PropsWithoutRef<ShortcutsProps>,\n  ref: ShortcutsProps['ref']\n) {\n  const t = useI18n();\n  const testIds = useTestIds(testId, getShortcutsTestIds);\n\n  const flatListRef = useRef<HTMLUListElement>(null);\n  const categoriesContainerRef = useRef<HTMLDivElement>(null);\n\n  useArrows(flatListRef, { dir: 'both', cycle: true });\n  useArrows(categoriesContainerRef, { dir: 'both', cycle: true });\n\n  const emptyState = <EmptyState message={t('no_items')} data-testid={testIds.emptyState} />;\n\n  const withCardShell = (content: ReactNode) => (\n    <Card {...restProps} data-testid={testIds.root} ref={ref}>\n      <CardHeader>\n        <Text variant='h2'>{heading ?? t('shortcuts')}</Text>\n      </CardHeader>\n      <CardContent>{content}</CardContent>\n    </Card>\n  );\n\n  if (categories) {\n    const visibleCategories = categories.filter(cat => cat.items.length > 0);\n\n    const categorySections = (\n      <StyledShortcutsCategoriesContainer ref={categoriesContainerRef}>\n        {visibleCategories.map(cat => (\n          <Flex\n            container={{ direction: 'column' }}\n            key={cat.id}\n            aria-labelledby={`cat-${cat.id}`}\n            data-testid={testIds.categorySection}\n            as='section'\n          >\n            <StyledShortcutsCategoryHeading\n              id={`cat-${cat.id}`}\n              data-testid={testIds.categoryHeading}\n              variant='h3'\n            >\n              {cat.label}\n            </StyledShortcutsCategoryHeading>\n\n            <StyledShortcutsCardsContainer role='list' aria-label={cat.label}>\n              {cat.items.map(item => (\n                <CardItem key={item.id} item={item} variant={variant} />\n              ))}\n            </StyledShortcutsCardsContainer>\n          </Flex>\n        ))}\n      </StyledShortcutsCategoriesContainer>\n    );\n\n    return withCardShell(visibleCategories.length === 0 ? emptyState : categorySections);\n  }\n\n  const cardGrid = (\n    <StyledShortcutsCardsWrapper>\n      <StyledShortcutsCardsContainer\n        ref={flatListRef}\n        role='list'\n        data-testid={testIds.list}\n        aria-label={heading ?? t('shortcuts')}\n      >\n        {items.map(item => (\n          <CardItem key={item.id} item={item} variant={variant} />\n        ))}\n      </StyledShortcutsCardsContainer>\n    </StyledShortcutsCardsWrapper>\n  );\n\n  if (!showHeader) {\n    if (items.length === 0) return null;\n\n    return (\n      <div data-testid={testIds.root} {...restProps} ref={ref}>\n        <VisuallyHiddenText>{heading ?? t('shortcuts')}</VisuallyHiddenText>\n        {cardGrid}\n      </div>\n    );\n  }\n\n  return withCardShell(items.length === 0 ? emptyState : cardGrid);\n});\n\nexport default withTestIds(Shortcuts, getShortcutsTestIds);\n"]}
+{"version":3,"file":"Shortcuts.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, forwardRef, useState } from 'react';\nimport type { ReactNode, PropsWithoutRef } from 'react';\n\nimport {\n  calculateForegroundColor,\n  Card,\n  CardContent,\n  CardHeader,\n  EmptyState,\n  Flex,\n  Text,\n  VisuallyHiddenText,\n  readableColor,\n  registerIcon,\n  isSolidColor,\n  useArrows,\n  useI18n,\n  usePrevious,\n  useTestIds,\n  useTheme,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport * as openNewTabIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\n\nimport type { ShortcutsProps, ShortcutItem } from './Shortcuts.types';\nimport {\n  StyledExternalIcon,\n  StyledLabelRow,\n  StyledShortcutsCard,\n  StyledShortcutsCardButton,\n  StyledShortcutsCardsContainer,\n  StyledShortcutsCardsWrapper,\n  StyledShortcutsCategoriesContainer,\n  StyledShortcutsCategoryHeading,\n  StyledShortcutsCardIcon,\n  StyledShortcutImageContainer,\n  StyledShortcutImg,\n  StyledSubtitleText,\n  StyledText,\n  StyledTextContent,\n  StyledCardContentWrapper\n} from './Shortcuts.styles';\nimport { getShortcutsTestIds } from './Shortcuts.test-ids';\n\nregisterIcon(openNewTabIcon);\n\nconst itemLinkProps = (\n  item: ShortcutItem\n): {\n  href?: string;\n  target?: string;\n  rel?: string;\n  onClick?: () => void;\n} => {\n  if (item.type === 'external') {\n    return { href: item.href, target: '_blank', rel: 'noopener noreferrer' };\n  }\n\n  return { onClick: item.onClick };\n};\n\nconst CardItem = ({ item, variant }: { item: ShortcutItem; variant: 'stacked' | 'inline' }) => {\n  const {\n    components: {\n      card,\n      shortcuts: {\n        icon: { background: configuredIconBackground, foreground: configuredIconForeground }\n      }\n    }\n  } = useTheme();\n\n  const isLink = item.type === 'external';\n  const image = isLink ? item.image : undefined;\n  const description = isLink ? item.description : undefined;\n\n  const [isBrokenImage, setIsBrokenImage] = useState(false);\n  const prevImage = usePrevious(image);\n\n  const iconBackground = configuredIconBackground;\n  const withIconBackground = Boolean(isSolidColor(iconBackground));\n\n  const cardForeground = calculateForegroundColor(card.background, card['foreground-color']);\n  let iconForeground = configuredIconForeground;\n\n  if (configuredIconForeground === 'auto') {\n    iconForeground = withIconBackground\n      ? readableColor(iconBackground, { mode: 'light', level: 'AANonText' })\n      : cardForeground;\n  }\n\n  const showImage = Boolean(image) && !(isBrokenImage && image === prevImage);\n\n  const commonIconProps = {\n    name: item.icon\n  };\n\n  const iconVisual = withIconBackground ? (\n    <StyledShortcutsCardIcon\n      {...commonIconProps}\n      background={iconBackground}\n      foreground={iconForeground}\n    />\n  ) : (\n    <StyledShortcutsCardIcon {...commonIconProps} iconColor={iconForeground} size='m' />\n  );\n\n  const visual = showImage ? (\n    <Flex container={{ alignItems: 'center', justify: 'center' }} as={StyledShortcutImageContainer}>\n      <StyledShortcutImg\n        src={image}\n        alt={item.label}\n        onError={() => setIsBrokenImage(true)}\n        onLoad={() => setIsBrokenImage(false)}\n      />\n    </Flex>\n  ) : (\n    iconVisual\n  );\n\n  return (\n    <StyledShortcutsCard>\n      <StyledShortcutsCardButton variant='link' layoutVariant={variant} {...itemLinkProps(item)}>\n        <StyledCardContentWrapper layoutVariant={variant} hasDescription={!!description}>\n          {visual}\n          <Flex\n            container={{ direction: 'column', gap: 0.5 }}\n            as={StyledTextContent}\n            layoutVariant={variant}\n          >\n            <StyledLabelRow>\n              <StyledText>{item.label}</StyledText>\n              {item.type === 'external' && <StyledExternalIcon name='open' />}\n            </StyledLabelRow>\n\n            {description && (\n              <StyledSubtitleText variant='secondary' forwardedAs='p'>\n                {description}\n              </StyledSubtitleText>\n            )}\n          </Flex>\n        </StyledCardContentWrapper>\n      </StyledShortcutsCardButton>\n    </StyledShortcutsCard>\n  );\n};\n\nconst Shortcuts = forwardRef(function Shortcuts(\n  {\n    heading,\n    items = [],\n    categories,\n    showHeader = true,\n    variant = 'inline',\n    testId,\n    ...restProps\n  }: PropsWithoutRef<ShortcutsProps>,\n  ref: ShortcutsProps['ref']\n) {\n  const t = useI18n();\n  const testIds = useTestIds(testId, getShortcutsTestIds);\n\n  const flatListRef = useRef<HTMLUListElement>(null);\n  const categoriesContainerRef = useRef<HTMLDivElement>(null);\n\n  useArrows(flatListRef, { dir: 'both', cycle: true });\n  useArrows(categoriesContainerRef, { dir: 'both', cycle: true });\n\n  const emptyState = <EmptyState message={t('no_items')} data-testid={testIds.emptyState} />;\n\n  const withCardShell = (content: ReactNode) => (\n    <Card {...restProps} data-testid={testIds.root} ref={ref}>\n      <CardHeader>\n        <Text variant='h2'>{heading ?? t('shortcuts')}</Text>\n      </CardHeader>\n      <CardContent>{content}</CardContent>\n    </Card>\n  );\n\n  if (categories) {\n    const visibleCategories = categories.filter(cat => cat.items.length > 0);\n\n    const categorySections = (\n      <StyledShortcutsCategoriesContainer ref={categoriesContainerRef}>\n        {visibleCategories.map(cat => (\n          <Flex\n            container={{ direction: 'column' }}\n            key={cat.id}\n            aria-labelledby={`cat-${cat.id}`}\n            data-testid={testIds.categorySection}\n            as='section'\n          >\n            <StyledShortcutsCategoryHeading\n              id={`cat-${cat.id}`}\n              data-testid={testIds.categoryHeading}\n              variant='h3'\n            >\n              {cat.label}\n            </StyledShortcutsCategoryHeading>\n\n            <StyledShortcutsCardsContainer role='list' aria-label={cat.label}>\n              {cat.items.map(item => (\n                <CardItem key={item.id} item={item} variant={variant} />\n              ))}\n            </StyledShortcutsCardsContainer>\n          </Flex>\n        ))}\n      </StyledShortcutsCategoriesContainer>\n    );\n\n    return withCardShell(visibleCategories.length === 0 ? emptyState : categorySections);\n  }\n\n  const cardGrid = (\n    <StyledShortcutsCardsWrapper>\n      <StyledShortcutsCardsContainer\n        ref={flatListRef}\n        role='list'\n        data-testid={testIds.list}\n        aria-label={heading ?? t('shortcuts')}\n      >\n        {items.map(item => (\n          <CardItem key={item.id} item={item} variant={variant} />\n        ))}\n      </StyledShortcutsCardsContainer>\n    </StyledShortcutsCardsWrapper>\n  );\n\n  if (!showHeader) {\n    if (items.length === 0) return null;\n\n    return (\n      <div data-testid={testIds.root} {...restProps} ref={ref}>\n        <VisuallyHiddenText>{heading ?? t('shortcuts')}</VisuallyHiddenText>\n        {cardGrid}\n      </div>\n    );\n  }\n\n  return withCardShell(items.length === 0 ? emptyState : cardGrid);\n});\n\nexport default withTestIds(Shortcuts, getShortcutsTestIds);\n"]}

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

@@ -5,16 +5,27 @@ export declare const StyledShortcutsCategoryHeading: import("styled-components/d
     ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
 }, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledShortcutsCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+export declare const StyledTextContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    layoutVariant: "stacked" | "inline";
+}>> & string;
+export declare const StyledText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledSubtitleText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledShortcutsCardButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("@pega/cosmos-react-core").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
     ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
 }, {
     layoutVariant: "stacked" | "inline";
 }>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledShortcutsCardIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, {
-    layoutVariant: "stacked" | "inline";
     iconColor?: string;
 }>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledLabelRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const StyledExternalIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledShortcutImageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledShortcutImg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
+export declare const StyledCardContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    layoutVariant: "stacked" | "inline";
+    hasDescription: boolean;
+}>> & string;
 //# sourceMappingURL=Shortcuts.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,2BAA2B,6NAEvC,CAAC;AAEF,eAAO,MAAM,6BAA6B,iOAqBxC,CAAC;AAIH,eAAO,MAAM,kCAAkC,6NAS9C,CAAC;AAIF,eAAO,MAAM,8BAA8B;;yLAIzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAG/B,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;mBAAmC,SAAS,GAAG,QAAQ;oLAwC3F,CAAC;AAIH,eAAO,MAAM,uBAAuB;mBACnB,SAAS,GAAG,QAAQ;gBACvB,MAAM;0JAgBnB,CAAC;AAIF,eAAO,MAAM,cAAc,+NAM1B,CAAC;AAIF,eAAO,MAAM,UAAU,+NAMtB,CAAC;AAIF,eAAO,MAAM,kBAAkB,kaAE9B,CAAC"}
+{"version":3,"file":"Shortcuts.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,2BAA2B,6NAEvC,CAAC;AAEF,eAAO,MAAM,6BAA6B,iOAqBxC,CAAC;AAIH,eAAO,MAAM,kCAAkC,6NAS9C,CAAC;AAIF,eAAO,MAAM,8BAA8B;;yLAIzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAG/B,CAAC;AAEF,eAAO,MAAM,iBAAiB;mBAA+B,SAAS,GAAG,QAAQ;YAehF,CAAC;AAIF,eAAO,MAAM,UAAU,+NAOtB,CAAC;AAIF,eAAO,MAAM,kBAAkB;;yLAK9B,CAAC;AAIF,eAAO,MAAM,yBAAyB;;;mBACrB,SAAS,GAAG,QAAQ;oLA4BnC,CAAC;AAIH,eAAO,MAAM,uBAAuB;gBACtB,MAAM;0JAUnB,CAAC;AAIF,eAAO,MAAM,cAAc,+NAM1B,CAAC;AAIF,eAAO,MAAM,kBAAkB,kaAE9B,CAAC;AAIF,eAAO,MAAM,4BAA4B,+NAaxC,CAAC;AAIF,eAAO,MAAM,iBAAiB,oOAK7B,CAAC;AAIF,eAAO,MAAM,wBAAwB;mBACpB,SAAS,GAAG,QAAQ;oBACnB,OAAO;YAsBxB,CAAC"}

package/lib/components/Shortcuts/Shortcuts.styles.js

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 import { mix } from 'polished';
 import { Button, defaultThemeProp, Icon, Text, tryCatch } from '@pega/cosmos-react-core';
+import { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';
 export const StyledShortcutsCardsWrapper = styled.div `
   container-type: inline-size;
 `;
@@ -46,12 +47,40 @@ export const StyledShortcutsCard = styled.li `
   display: flex;
   flex-direction: column;
 `;
+export const StyledTextContent = styled.div(({ layoutVariant }) => css `
+    ${layoutVariant === 'inline' &&
+    css `
+      flex: 1;
+      min-width: 0;
+      align-items: flex-start;
+    `}
+
+    ${layoutVariant === 'stacked' &&
+    css `
+      align-items: center;
+      width: 100%;
+    `}
+  `);
+StyledTextContent.defaultProps = defaultThemeProp;
+export const StyledText = styled.span(({ theme: { base } }) => css `
+    font-weight: ${base['font-weight']['semi-bold']};
+    font-size: 1em;
+    color: CanvasText;
+    ${lineClamp(3)}
+  `);
+StyledText.defaultProps = defaultThemeProp;
+export const StyledSubtitleText = styled(Text)(() => css `
+    ${lineClamp(3)}
+    text-align: inherit;
+  `);
+StyledSubtitleText.defaultProps = defaultThemeProp;
 export const StyledShortcutsCardButton = styled(Button)(({ theme: { base, components }, layoutVariant }) => {
     const hoverBackgroundColor = tryCatch(() => mix(0.9, base.palette['primary-background'], components.button['secondary-color']));
     return css `
     display: flex;
     align-items: center;
     justify-content: flex-start;
+    text-align: ${layoutVariant === 'stacked' ? 'center' : 'start'};
     flex: 1;
     width: 100%;
     border: 0.0625rem solid ${base.palette['border-line']};
@@ -62,35 +91,18 @@ export const StyledShortcutsCardButton = styled(Button)(({ theme: { base, compon
 
     &:hover {
       background: ${hoverBackgroundColor};
-    }
-
-    ${layoutVariant === 'stacked' &&
-        css `
-      flex-direction: column;
-      justify-content: center;
-      gap: calc(${base.spacing} * 2);
-      text-align: center;
-      min-height: 8rem;
-    `}
+      text-decoration: none;
 
-    ${layoutVariant === 'inline' &&
-        css `
-      flex-direction: row;
-      gap: calc(${base.spacing} * 1.5);
-      text-align: start;
-    `}
+      ${StyledText} {
+        text-decoration: underline;
+      }
+    }
   `;
 });
 StyledShortcutsCardButton.defaultProps = defaultThemeProp;
-export const StyledShortcutsCardIcon = styled(Icon)(({ layoutVariant, iconColor }) => css `
+export const StyledShortcutsCardIcon = styled(Icon)(({ iconColor }) => css `
     flex-shrink: 0;
 
-    ${layoutVariant === 'stacked' &&
-    css `
-      width: 3rem;
-      height: 3rem;
-    `}
-
     ${iconColor &&
     css `
       color: ${iconColor};
@@ -103,14 +115,44 @@ export const StyledLabelRow = styled.span(({ theme: { base } }) => css `
     gap: calc(${base.spacing} * 0.5);
   `);
 StyledLabelRow.defaultProps = defaultThemeProp;
-export const StyledText = styled.span(({ theme: { base } }) => css `
-    font-weight: ${base['font-weight']['semi-bold']};
-    font-size: 1em;
-    color: CanvasText;
-  `);
-StyledText.defaultProps = defaultThemeProp;
 export const StyledExternalIcon = styled(Icon) `
   flex-shrink: 0;
 `;
 StyledExternalIcon.defaultProps = defaultThemeProp;
+export const StyledShortcutImageContainer = styled.span(({ theme: { base, components: { icon } } }) => css `
+    flex-shrink: 0;
+    overflow: hidden;
+    border-radius: calc(${base['border-radius']} / 2);
+    width: ${icon.size.m};
+    height: ${icon.size.m};
+  `);
+StyledShortcutImageContainer.defaultProps = defaultThemeProp;
+export const StyledShortcutImg = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+`;
+StyledShortcutImg.defaultProps = defaultThemeProp;
+export const StyledCardContentWrapper = styled.div(({ layoutVariant, hasDescription, theme: { base } }) => css `
+    display: flex;
+    flex: 1;
+    min-width: 0;
+
+    ${layoutVariant === 'inline' &&
+    css `
+      flex-direction: row;
+      gap: calc(${base.spacing} * 1.5);
+      align-items: ${hasDescription ? 'flex-start' : 'center'};
+    `}
+
+    ${layoutVariant === 'stacked' &&
+    css `
+      flex-direction: column;
+      gap: calc(${base.spacing} * 2);
+      align-items: center;
+      justify-content: center;
+    `}
+  `);
+StyledCardContentWrapper.defaultProps = defaultThemeProp;
 //# sourceMappingURL=Shortcuts.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.styles.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { Button, defaultThemeProp, Icon, Text, tryCatch } from '@pega/cosmos-react-core';\n\nexport const StyledShortcutsCardsWrapper = styled.div`\n  container-type: inline-size;\n`;\n\nexport const StyledShortcutsCardsContainer = styled.ul(({ theme: { base } }) => {\n  return css`\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(min(calc(${base.spacing} * 30), 100%), 1fr));\n    gap: ${base.spacing};\n    list-style: none;\n    padding: ${base.spacing} 0;\n    margin: 0;\n\n    @container (min-width: ${parseFloat(base.breakpoints.sm)}rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      grid-auto-rows: 1fr;\n      justify-content: start;\n      align-items: stretch;\n      width: 100%;\n    }\n\n    @container (min-width: ${parseFloat(base.breakpoints.md)}rem) {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n  `;\n});\n\nStyledShortcutsCardsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCategoriesContainer = styled.div(\n  ({ theme: { base } }) => css`\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: calc(${base.spacing} * 2);\n    width: 100%;\n    padding-block-start: ${base.spacing};\n    container-type: inline-size;\n  `\n);\n\nStyledShortcutsCategoriesContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCategoryHeading = styled(Text)(({ theme: { base } }) => {\n  return css`\n    margin-block-end: ${base.spacing};\n  `;\n});\n\nStyledShortcutsCategoryHeading.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCard = styled.li`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledShortcutsCardButton = styled(Button)<{ layoutVariant: 'stacked' | 'inline' }>(({\n  theme: { base, components },\n  layoutVariant\n}) => {\n  const hoverBackgroundColor = tryCatch(() =>\n    mix(0.9, base.palette['primary-background'], components.button['secondary-color'])\n  );\n\n  return css`\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    flex: 1;\n    width: 100%;\n    border: 0.0625rem solid ${base.palette['border-line']};\n    border-radius: ${base['border-radius']};\n    background: ${base.palette['primary-background']};\n    padding-inline: calc(${base.spacing} * 2);\n    padding-block: calc(${base.spacing} * 1.5);\n\n    &:hover {\n      background: ${hoverBackgroundColor};\n    }\n\n    ${layoutVariant === 'stacked' &&\n    css`\n      flex-direction: column;\n      justify-content: center;\n      gap: calc(${base.spacing} * 2);\n      text-align: center;\n      min-height: 8rem;\n    `}\n\n    ${layoutVariant === 'inline' &&\n    css`\n      flex-direction: row;\n      gap: calc(${base.spacing} * 1.5);\n      text-align: start;\n    `}\n  `;\n});\n\nStyledShortcutsCardButton.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCardIcon = styled(Icon)<{\n  layoutVariant: 'stacked' | 'inline';\n  iconColor?: string;\n}>(\n  ({ layoutVariant, iconColor }) => css`\n    flex-shrink: 0;\n\n    ${layoutVariant === 'stacked' &&\n    css`\n      width: 3rem;\n      height: 3rem;\n    `}\n\n    ${iconColor &&\n    css`\n      color: ${iconColor};\n    `}\n  `\n);\n\nStyledShortcutsCardIcon.defaultProps = defaultThemeProp;\n\nexport const StyledLabelRow = styled.span(\n  ({ theme: { base } }) => css`\n    display: flex;\n    align-items: center;\n    gap: calc(${base.spacing} * 0.5);\n  `\n);\n\nStyledLabelRow.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled.span(\n  ({ theme: { base } }) => css`\n    font-weight: ${base['font-weight']['semi-bold']};\n    font-size: 1em;\n    color: CanvasText;\n  `\n);\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledExternalIcon = styled(Icon)`\n  flex-shrink: 0;\n`;\n\nStyledExternalIcon.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Shortcuts.styles.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAEtE,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEpD,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IAC7E,OAAO,GAAG,CAAA;;+DAEmD,IAAI,CAAC,OAAO;WAChE,IAAI,CAAC,OAAO;;eAER,IAAI,CAAC,OAAO;;;6BAGE,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;;;;;;;;6BAQ/B,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;;;GAGzD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,CAAC,MAAM,kCAAkC,GAAG,MAAM,CAAC,GAAG,CAC1D,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;gBAGd,IAAI,CAAC,OAAO;;2BAED,IAAI,CAAC,OAAO;;GAEpC,CACF,CAAC;AAEF,kCAAkC,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnE,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACjF,OAAO,GAAG,CAAA;wBACY,IAAI,CAAC,OAAO;GACjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,8BAA8B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/D,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAAA;;;CAG3C,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CACzC,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MACtB,aAAa,KAAK,QAAQ;IAC5B,GAAG,CAAA;;;;KAIF;;MAEC,aAAa,KAAK,SAAS;IAC7B,GAAG,CAAA;;;KAGF;GACF,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CACnC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;mBACX,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;MAG7C,SAAS,CAAC,CAAC,CAAC;GACf,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC5C,GAAG,EAAE,CAAC,GAAG,CAAA;MACL,SAAS,CAAC,CAAC,CAAC;;GAEf,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,MAAM,CAAC,CAEpD,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE;IACpD,MAAM,oBAAoB,GAAG,QAAQ,CAAC,GAAG,EAAE,CACzC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CACnF,CAAC;IAEF,OAAO,GAAG,CAAA;;;;kBAIM,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;;;8BAGpC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;qBACpC,IAAI,CAAC,eAAe,CAAC;kBACxB,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;2BACzB,IAAI,CAAC,OAAO;0BACb,IAAI,CAAC,OAAO;;;oBAGlB,oBAAoB;;;QAGhC,UAAU;;;;GAIf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAC,CAGjD,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;MAGlB,SAAS;IACX,GAAG,CAAA;eACQ,SAAS;KACnB;GACF,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CACvC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;gBAGd,IAAI,CAAC,OAAO;GACzB,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE7C,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,4BAA4B,GAAG,MAAM,CAAC,IAAI,CACrD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;;;0BAGe,IAAI,CAAC,eAAe,CAAC;aAClC,IAAI,CAAC,IAAI,CAAC,CAAC;cACV,IAAI,CAAC,IAAI,CAAC,CAAC;GACtB,CACF,CAAC;AAEF,4BAA4B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7D,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK1C,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAIhD,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;MAKvD,aAAa,KAAK,QAAQ;IAC5B,GAAG,CAAA;;kBAEW,IAAI,CAAC,OAAO;qBACT,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ;KACxD;;MAEC,aAAa,KAAK,SAAS;IAC7B,GAAG,CAAA;;kBAEW,IAAI,CAAC,OAAO;;;KAGzB;GACF,CACF,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { Button, defaultThemeProp, Icon, Text, tryCatch } from '@pega/cosmos-react-core';\nimport { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nexport const StyledShortcutsCardsWrapper = styled.div`\n  container-type: inline-size;\n`;\n\nexport const StyledShortcutsCardsContainer = styled.ul(({ theme: { base } }) => {\n  return css`\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(min(calc(${base.spacing} * 30), 100%), 1fr));\n    gap: ${base.spacing};\n    list-style: none;\n    padding: ${base.spacing} 0;\n    margin: 0;\n\n    @container (min-width: ${parseFloat(base.breakpoints.sm)}rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      grid-auto-rows: 1fr;\n      justify-content: start;\n      align-items: stretch;\n      width: 100%;\n    }\n\n    @container (min-width: ${parseFloat(base.breakpoints.md)}rem) {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n  `;\n});\n\nStyledShortcutsCardsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCategoriesContainer = styled.div(\n  ({ theme: { base } }) => css`\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: calc(${base.spacing} * 2);\n    width: 100%;\n    padding-block-start: ${base.spacing};\n    container-type: inline-size;\n  `\n);\n\nStyledShortcutsCategoriesContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCategoryHeading = styled(Text)(({ theme: { base } }) => {\n  return css`\n    margin-block-end: ${base.spacing};\n  `;\n});\n\nStyledShortcutsCategoryHeading.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCard = styled.li`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledTextContent = styled.div<{ layoutVariant: 'stacked' | 'inline' }>(\n  ({ layoutVariant }) => css`\n    ${layoutVariant === 'inline' &&\n    css`\n      flex: 1;\n      min-width: 0;\n      align-items: flex-start;\n    `}\n\n    ${layoutVariant === 'stacked' &&\n    css`\n      align-items: center;\n      width: 100%;\n    `}\n  `\n);\n\nStyledTextContent.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled.span(\n  ({ theme: { base } }) => css`\n    font-weight: ${base['font-weight']['semi-bold']};\n    font-size: 1em;\n    color: CanvasText;\n    ${lineClamp(3)}\n  `\n);\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledSubtitleText = styled(Text)(\n  () => css`\n    ${lineClamp(3)}\n    text-align: inherit;\n  `\n);\n\nStyledSubtitleText.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCardButton = styled(Button)<{\n  layoutVariant: 'stacked' | 'inline';\n}>(({ theme: { base, components }, layoutVariant }) => {\n  const hoverBackgroundColor = tryCatch(() =>\n    mix(0.9, base.palette['primary-background'], components.button['secondary-color'])\n  );\n\n  return css`\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    text-align: ${layoutVariant === 'stacked' ? 'center' : 'start'};\n    flex: 1;\n    width: 100%;\n    border: 0.0625rem solid ${base.palette['border-line']};\n    border-radius: ${base['border-radius']};\n    background: ${base.palette['primary-background']};\n    padding-inline: calc(${base.spacing} * 2);\n    padding-block: calc(${base.spacing} * 1.5);\n\n    &:hover {\n      background: ${hoverBackgroundColor};\n      text-decoration: none;\n\n      ${StyledText} {\n        text-decoration: underline;\n      }\n    }\n  `;\n});\n\nStyledShortcutsCardButton.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCardIcon = styled(Icon)<{\n  iconColor?: string;\n}>(\n  ({ iconColor }) => css`\n    flex-shrink: 0;\n\n    ${iconColor &&\n    css`\n      color: ${iconColor};\n    `}\n  `\n);\n\nStyledShortcutsCardIcon.defaultProps = defaultThemeProp;\n\nexport const StyledLabelRow = styled.span(\n  ({ theme: { base } }) => css`\n    display: flex;\n    align-items: center;\n    gap: calc(${base.spacing} * 0.5);\n  `\n);\n\nStyledLabelRow.defaultProps = defaultThemeProp;\n\nexport const StyledExternalIcon = styled(Icon)`\n  flex-shrink: 0;\n`;\n\nStyledExternalIcon.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutImageContainer = styled.span(\n  ({\n    theme: {\n      base,\n      components: { icon }\n    }\n  }) => css`\n    flex-shrink: 0;\n    overflow: hidden;\n    border-radius: calc(${base['border-radius']} / 2);\n    width: ${icon.size.m};\n    height: ${icon.size.m};\n  `\n);\n\nStyledShortcutImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutImg = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n`;\n\nStyledShortcutImg.defaultProps = defaultThemeProp;\n\nexport const StyledCardContentWrapper = styled.div<{\n  layoutVariant: 'stacked' | 'inline';\n  hasDescription: boolean;\n}>(\n  ({ layoutVariant, hasDescription, theme: { base } }) => css`\n    display: flex;\n    flex: 1;\n    min-width: 0;\n\n    ${layoutVariant === 'inline' &&\n    css`\n      flex-direction: row;\n      gap: calc(${base.spacing} * 1.5);\n      align-items: ${hasDescription ? 'flex-start' : 'center'};\n    `}\n\n    ${layoutVariant === 'stacked' &&\n    css`\n      flex-direction: column;\n      gap: calc(${base.spacing} * 2);\n      align-items: center;\n      justify-content: center;\n    `}\n  `\n);\n\nStyledCardContentWrapper.defaultProps = defaultThemeProp;\n"]}

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

@@ -13,6 +13,10 @@ export interface ShortcutLinkItem extends ShortcutItemBase {
     type: 'external';
     /** Absolute URL the link navigates to. Opens in a new tab. */
     href: string;
+    /** Optional subtitle displayed below the label. */
+    description?: string;
+    /** Optional image URL. Renders in place of the icon; falls back to icon if the image fails to load. */
+    image?: string;
 }
 export interface ShortcutNavItem extends ShortcutItemBase {
     /** Discriminant — this item navigates to a portal landing page. */

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

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.types.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1E,UAAU,gBAAgB;IACxB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,6DAA6D;IAC7D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+EAA+E;IAC/E,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,EAAE,UAAU;IAC7D,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,CAAC"}
+{"version":3,"file":"Shortcuts.types.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1E,UAAU,gBAAgB;IACxB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,6DAA6D;IAC7D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uGAAuG;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+EAA+E;IAC/E,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,EAAE,UAAU;IAC7D,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.types.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\ninterface ShortcutItemBase {\n  /** Unique identifier for this shortcut. */\n  id: string;\n  /** Display label shown on the shortcut. */\n  label: string;\n  /** Icon name from the registered icon set. */\n  icon: string;\n}\n\nexport interface ShortcutLinkItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to an external URL. */\n  type: 'external';\n  /** Absolute URL the link navigates to. Opens in a new tab. */\n  href: string;\n}\n\nexport interface ShortcutNavItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to a portal landing page. */\n  type: 'page';\n  /** Callback invoked when the user activates this shortcut. */\n  onClick: () => void;\n}\n\nexport type ShortcutItem = ShortcutLinkItem | ShortcutNavItem;\n\nexport interface ShortcutCategory {\n  /** Unique identifier for this category. */\n  id: string;\n  /** Display label shown as the category heading. */\n  label: string;\n  /** Shortcut items belonging to this category. */\n  items: ShortcutItem[];\n}\n\ninterface ShortcutsWithItems {\n  /** Shortcut items to render as cards. */\n  items?: ShortcutItem[];\n  categories?: never;\n  /**\n   * Whether to render the outer card shell with a heading.\n   * When `false`, only the card grid is rendered, centered within its container.\n   * @default true\n   */\n  showHeader?: boolean;\n}\n\ninterface ShortcutsWithCategories {\n  items?: never;\n  /** Grouped shortcut items, each rendered as cards under a category heading. */\n  categories: ShortcutCategory[];\n  showHeader?: never;\n}\n\ninterface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {\n  /** Heading displayed above the shortcuts. */\n  heading?: string;\n  /**\n   * Controls the layout variant of each shortcut card.\n   * - `stacked`: large icon above the label (default card style).\n   * - `inline`: small icon inline to the left of the label (list/link style).\n   * @default 'inline'\n   */\n  variant?: 'stacked' | 'inline';\n  /** Ref for the root card element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);\n"]}
+{"version":3,"file":"Shortcuts.types.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\ninterface ShortcutItemBase {\n  /** Unique identifier for this shortcut. */\n  id: string;\n  /** Display label shown on the shortcut. */\n  label: string;\n  /** Icon name from the registered icon set. */\n  icon: string;\n}\n\nexport interface ShortcutLinkItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to an external URL. */\n  type: 'external';\n  /** Absolute URL the link navigates to. Opens in a new tab. */\n  href: string;\n  /** Optional subtitle displayed below the label. */\n  description?: string;\n  /** Optional image URL. Renders in place of the icon; falls back to icon if the image fails to load. */\n  image?: string;\n}\n\nexport interface ShortcutNavItem extends ShortcutItemBase {\n  /** Discriminant — this item navigates to a portal landing page. */\n  type: 'page';\n  /** Callback invoked when the user activates this shortcut. */\n  onClick: () => void;\n}\n\nexport type ShortcutItem = ShortcutLinkItem | ShortcutNavItem;\n\nexport interface ShortcutCategory {\n  /** Unique identifier for this category. */\n  id: string;\n  /** Display label shown as the category heading. */\n  label: string;\n  /** Shortcut items belonging to this category. */\n  items: ShortcutItem[];\n}\n\ninterface ShortcutsWithItems {\n  /** Shortcut items to render as cards. */\n  items?: ShortcutItem[];\n  categories?: never;\n  /**\n   * Whether to render the outer card shell with a heading.\n   * When `false`, only the card grid is rendered, centered within its container.\n   * @default true\n   */\n  showHeader?: boolean;\n}\n\ninterface ShortcutsWithCategories {\n  items?: never;\n  /** Grouped shortcut items, each rendered as cards under a category heading. */\n  categories: ShortcutCategory[];\n  showHeader?: never;\n}\n\ninterface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {\n  /** Heading displayed above the shortcuts. */\n  heading?: string;\n  /**\n   * Controls the layout variant of each shortcut card.\n   * - `stacked`: large icon above the label (default card style).\n   * - `inline`: small icon inline to the left of the label (list/link style).\n   * @default 'inline'\n   */\n  variant?: 'stacked' | 'inline';\n  /** Ref for the root card element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);\n"]}

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

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

package/lib/components/Stages/Stages.js

@@ -4,11 +4,12 @@ import { Icon, registerIcon, Flex, useI18n, Button, Modal, useBreakpoint, useMod
 import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
 import { getStagesTestIds } from './Stages.test-ids';
 import StageGlimpse from './StageGlimpse';
-import { StyledInnerStage, StyledStageCompleteIcon, StyledStage, StyledStageContainer, StyledStageGlimpse, StyledStages, StyledStagesWrapper, StyledStagesDescription, StyledStageText, StyledSentinel } from './Stages.styles';
+import { StyledInnerStage, StyledStageCompleteIcon, StyledStage, StyledStageContainer, StyledStageGlimpse, StyledStages, StyledStagesWrapper, StyledStagesDescription, StyledStageText, StyledSentinel, StyledMilestoneStageContainer, StyledMilestoneButton, StyledMilestoneLabel } from './Stages.styles';
 registerIcon(checkIcon);
-const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadStage, readOnly = false, testId, ...restProps }, ref) {
+const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadStage, readOnly = false, variant = 'chevron', testId, ...restProps }, ref) {
     const t = useI18n();
     const testIds = useTestIds(testId, getStagesTestIds);
+    const isMilestoneVariant = variant === 'milestone';
     const stagesRef = useConsolidatedRef(ref);
     const wrapperRef = useRef(null);
     const startSentinelRef = useRef(null);
@@ -96,7 +97,50 @@ const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadSt
             children: renderModalStages()
         });
     }, [stagesToLoad.length]);
-    return (_jsxs(_Fragment, { children: [_jsx(StyledStagesWrapper, { ref: wrapperRef, "data-testid": testIds.root, children: _jsxs(Flex, { ...restProps, container: true, as: StyledStages, ref: stagesRef, dir: rtl ? 'rtl' : 'ltr', "aria-label": t('stages_label'), "aria-describedby": descriptionId, children: [_jsx(StyledSentinel, { ref: startSentinelRef, "aria-hidden": 'true' }), stages.map(stage => {
+    const setStageButtonRef = (stageId, isCurrent) => (el) => {
+        if (el) {
+            stagesRefs.current.set(stageId, el);
+            if (isCurrent)
+                setCurrentStageBtn(prev => (prev !== el ? el : prev));
+        }
+        else {
+            stagesRefs.current.delete(stageId);
+            if (isCurrent)
+                setCurrentStageBtn(null);
+        }
+    };
+    const handleStageClick = (stageId, hasToLoad) => (e) => {
+        if (isSmallOrAbove) {
+            if (hasToLoad)
+                onLoadStage?.([stageId]);
+            const btn = e.currentTarget;
+            btn.scrollIntoView({
+                inline: 'center',
+                behavior: 'smooth',
+                block: 'nearest'
+            });
+            setTarget(btn);
+            setTargetStageId(stageId);
+        }
+        else {
+            openModal();
+        }
+    };
+    const getStageButtonProps = ({ stageId, stageName, stageStatusText, isCurrent, hasToLoad }) => {
+        const isExpanded = targetStageId === stageId && Boolean(target) && isSmallOrAbove;
+        return {
+            ref: setStageButtonRef(stageId, isCurrent),
+            'aria-current': isCurrent ? 'step' : undefined,
+            'aria-label': t('stages_stage_label', [stageName, stageStatusText]),
+            'aria-expanded': isExpanded ? true : undefined,
+            'aria-controls': isExpanded ? dialogId : undefined,
+            ...(!readOnly && {
+                'aria-haspopup': 'dialog',
+                onClick: handleStageClick(stageId, hasToLoad)
+            })
+        };
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(StyledStagesWrapper, { ref: wrapperRef, "data-testid": testIds.root, children: _jsxs(Flex, { ...restProps, container: true, as: StyledStages, ref: stagesRef, variant: variant, dir: rtl ? 'rtl' : 'ltr', "aria-label": t('stages_label'), "aria-describedby": descriptionId, children: [_jsx(StyledSentinel, { ref: startSentinelRef, "aria-hidden": 'true' }), stages.map((stage, stageIndex) => {
                             const isCurrent = stage.id === current;
                             let stageStatusText = t(stage.completed ? 'completed' : 'not_started');
                             if (isCurrent)
@@ -112,39 +156,14 @@ const Stages = forwardRef(function Stages({ current, stages, caseTitle, onLoadSt
                             else {
                                 stageStatus = 'pending';
                             }
-                            return (_jsxs(Fragment, { children: [_jsx(Flex, { as: StyledStageContainer, item: { grow: 1, shrink: 0 }, readOnly: readOnly, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledStage, item: { grow: 1, shrink: 0 }, status: stageStatus, readOnly: readOnly, "aria-current": isCurrent ? 'step' : undefined, "aria-label": t('stages_stage_label', [stage.name, stageStatusText]), ref: (el) => {
-                                                if (el) {
-                                                    stagesRefs.current.set(stage.id, el);
-                                                    if (isCurrent)
-                                                        setCurrentStageBtn(prev => (prev !== el ? el : prev));
-                                                }
-                                                else {
-                                                    stagesRefs.current.delete(stage.id);
-                                                    if (isCurrent)
-                                                        setCurrentStageBtn(null);
-                                                }
-                                            }, "aria-expanded": targetStageId === stage.id && Boolean(target) && isSmallOrAbove
-                                                ? true
-                                                : undefined, "aria-controls": targetStageId === stage.id && target && isSmallOrAbove ? dialogId : undefined, ...(!readOnly && {
-                                                'aria-haspopup': 'dialog',
-                                                onClick: (e) => {
-                                                    if (isSmallOrAbove) {
-                                                        if (hasToLoad)
-                                                            onLoadStage?.([stage.id]);
-                                                        const btn = e.currentTarget;
-                                                        btn.scrollIntoView({
-                                                            inline: 'center',
-                                                            behavior: 'smooth',
-                                                            block: 'nearest'
-                                                        });
-                                                        setTarget(btn);
-                                                        setTargetStageId(stage.id);
-                                                    }
-                                                    else {
-                                                        openModal();
-                                                    }
-                                                }
-                                            }), 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: () => {
+                            const stageButtonProps = getStageButtonProps({
+                                stageId: stage.id,
+                                stageName: stage.name,
+                                stageStatusText,
+                                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: () => {
                                             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

@@ -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} 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} 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    testId,\n    ...restProps\n  }: PropsWithoutRef<StagesProps>,\n  ref: StagesProps['ref']\n) {\n  const t = useI18n();\n  const testIds = useTestIds(testId, getStagesTestIds);\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    if (focused && isInstance(document.activeElement, HTMLButtonElement)) {\n      document.activeElement.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  return (\n    <>\n      <StyledStagesWrapper ref={wrapperRef} data-testid={testIds.root}>\n        <Flex\n          {...restProps}\n          container\n          as={StyledStages}\n          ref={stagesRef}\n          dir={rtl ? 'rtl' : 'ltr'}\n          aria-label={t('stages_label')}\n          aria-describedby={descriptionId}\n        >\n          <StyledSentinel ref={startSentinelRef} aria-hidden='true' />\n          {stages.map(stage => {\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            return (\n              <Fragment key={stage.id}>\n                <Flex as={StyledStageContainer} item={{ grow: 1, shrink: 0 }} readOnly={readOnly}>\n                  <Flex\n                    container={{ justify: 'center', alignItems: 'center' }}\n                    as={StyledStage}\n                    item={{ grow: 1, shrink: 0 }}\n                    status={stageStatus}\n                    readOnly={readOnly}\n                    aria-current={isCurrent ? 'step' : undefined}\n                    aria-label={t('stages_stage_label', [stage.name, stageStatusText])}\n                    ref={(el: HTMLButtonElement | null) => {\n                      if (el) {\n                        stagesRefs.current.set(stage.id, el);\n                        if (isCurrent) setCurrentStageBtn(prev => (prev !== el ? el : prev));\n                      } else {\n                        stagesRefs.current.delete(stage.id);\n                        if (isCurrent) setCurrentStageBtn(null);\n                      }\n                    }}\n                    aria-expanded={\n                      targetStageId === stage.id && Boolean(target) && isSmallOrAbove\n                        ? true\n                        : undefined\n                    }\n                    aria-controls={\n                      targetStageId === stage.id && target && isSmallOrAbove ? dialogId : undefined\n                    }\n                    {...(!readOnly && {\n                      'aria-haspopup': 'dialog' as const,\n                      onClick: (e: MouseEvent<HTMLButtonElement>) => {\n                        if (isSmallOrAbove) {\n                          if (hasToLoad) onLoadStage?.([stage.id]);\n                          const btn = e.currentTarget;\n                          btn.scrollIntoView({\n                            inline: 'center',\n                            behavior: 'smooth',\n                            block: 'nearest'\n                          });\n                          setTarget(btn);\n                          setTargetStageId(stage.id);\n                        } else {\n                          openModal();\n                        }\n                      }\n                    })}\n                  >\n                    <StyledInnerStage>\n                      {stage.completed && <Icon name='check' />}\n                      {stage.name}\n                    </StyledInnerStage>\n                  </Flex>\n                </Flex>\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          <StyledSentinel ref={endSentinelRef} aria-hidden='true' />\n        </Flex>\n      </StyledStagesWrapper>\n      <StyledStagesDescription id={descriptionId}>\n        {t('stages_description')}\n      </StyledStagesDescription>\n    </>\n  );\n});\n\nexport default withTestIds(Stages, getStagesTestIds);\n"]}
+{"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} 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    if (focused && isInstance(document.activeElement, HTMLButtonElement)) {\n      document.activeElement.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"]}