@pega/cosmos-react-work 9.0.0-build.29.26 → 9.0.0-build.29.27

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

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,eAAe,EAAE,MAAM,OAAO,CAAC;AAmBxD,OAAO,KAAK,EAAE,cAAc,EAAgB,MAAM,mBAAmB,CAAC;;;;AAqQtE,wBAA2D"}
+{"version":3,"file":"Shortcuts.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,eAAe,EAAE,MAAM,OAAO,CAAC;AAsBxD,OAAO,KAAK,EAAE,cAAc,EAAgB,MAAM,mBAAmB,CAAC;;;;AAkLtE,wBAA2D"}

package/lib/components/Shortcuts/Shortcuts.js

@@ -1,22 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, forwardRef } from 'react';
-import { Card, EmptyState, Flex, Icon, Text, Tooltip, VisuallyHiddenText, useArrows, useBreakpoint, useElement, useI18n, useTestIds, useTheme, withTestIds } from '@pega/cosmos-react-core';
-import { StyledInlineLinkLabel, StyledLinksListItem, StyledShortcutsButton, StyledShortcutsCard, StyledShortcutsCardButton, StyledPreviewShell, StyledShortcutsPreviewItem, StyledShortcutsCardsContainer, StyledCategoryItemIcon, StyledShortcutsCategoriesContainer, StyledShortcutsCategoryHeading, StyledShortcutsList, StyledShortcutsLinksWrapper, StyledShortcutsStackedButton, StyledShortcutsCardIcon, StyledShortcutsHeader, StyledShortcutCardContent } from './Shortcuts.styles';
+import { parseToRgb } from 'polished';
+import { Card, CardContent, CardHeader, EmptyState, Flex, Text, VisuallyHiddenText, registerIcon, tryCatch, useArrows, useBreakpoint, useI18n, useTestIds, useTheme, withTestIds } from '@pega/cosmos-react-core';
+import * as openNewTabIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';
+import { StyledExternalIcon, StyledLabelRow, StyledShortcutsCard, StyledShortcutsCardButton, StyledShortcutsCardsContainer, StyledShortcutsCategoriesContainer, StyledShortcutsCategoryHeading, StyledShortcutsCardIcon } from './Shortcuts.styles';
 import { getShortcutsTestIds } from './Shortcuts.test-ids';
+registerIcon(openNewTabIcon);
 const itemLinkProps = (item) => {
     if (item.type === 'external') {
         return { href: item.href, target: '_blank', rel: 'noopener noreferrer' };
     }
     return { onClick: item.onClick };
 };
-const InlineLinkItem = ({ item, iconBackground }) => {
-    const [buttonEl, setButtonEl] = useElement();
-    return (_jsxs(StyledLinksListItem, { isSmallOrAbove: true, children: [_jsxs(StyledShortcutsButton, { isInline: true, variant: 'link', ref: setButtonEl, ...itemLinkProps(item), children: [_jsx(Icon, { name: item.icon, background: iconBackground, shape: 'square' }), _jsx(StyledInlineLinkLabel, { children: item.label })] }), buttonEl && (_jsx(Tooltip, { target: buttonEl, smart: true, children: item.label }))] }));
-};
-const Shortcuts = forwardRef(function Shortcuts({ heading, items = [], categories, displayMode = 'links', showHeader = true, testId, ...restProps }, ref) {
+const CardItem = ({ item, iconBackground, variant }) => (_jsx(StyledShortcutsCard, { children: _jsxs(StyledShortcutsCardButton, { variant: 'link', layoutVariant: variant, ...itemLinkProps(item), children: [_jsx(StyledShortcutsCardIcon, { name: item.icon, background: iconBackground, shape: 'square', layoutVariant: variant }), _jsxs(StyledLabelRow, { children: [_jsx(Text, { as: 'span', variant: 'h3', children: item.label }), item.type === 'external' && _jsx(StyledExternalIcon, { name: 'open' })] })] }) }));
+const Shortcuts = forwardRef(function Shortcuts({ heading, items = [], categories, showHeader = true, variant = 'inline', testId, ...restProps }, ref) {
     const t = useI18n();
     const testIds = useTestIds(testId, getShortcutsTestIds);
-    const { base: { palette: { interactive: iconBackground } } } = useTheme();
+    const { base: { palette: { 'brand-accent': brandAccent, 'brand-primary': brandPrimary } } } = useTheme();
+    const iconBackground = tryCatch(() => {
+        parseToRgb(brandAccent);
+        return brandAccent;
+    }) ?? brandPrimary;
     const flatListRef = useRef(null);
     const categoriesContainerRef = useRef(null);
     useArrows(flatListRef, { dir: 'both', cycle: true });
@@ -25,31 +29,19 @@ const Shortcuts = forwardRef(function Shortcuts({ heading, items = [], categorie
         breakpointRef: categories ? categoriesContainerRef : flatListRef
     });
     const emptyState = _jsx(EmptyState, { message: t('no_items'), "data-testid": testIds.emptyState });
-    const renderCardItem = (item) => {
-        if (item.type === 'external' && item.preview) {
-            return (_jsx(Flex, { container: { direction: 'column' }, as: StyledShortcutsPreviewItem, children: _jsx(StyledPreviewShell, { children: item.preview }) }, item.id));
-        }
-        return (_jsx(StyledShortcutsCard, { children: _jsxs(StyledShortcutsCardButton, { variant: 'link', ...itemLinkProps(item), children: [_jsx(StyledShortcutsCardIcon, { name: item.icon, background: iconBackground, shape: 'square' }), _jsx(Text, { as: 'span', variant: 'h3', children: item.label })] }) }, item.id));
-    };
-    const renderStackedLinkItem = (item) => (_jsx(StyledLinksListItem, { isSmallOrAbove: false, children: _jsxs(StyledShortcutsStackedButton, { variant: 'link', ...itemLinkProps(item), children: [_jsx(Icon, { name: item.icon, background: iconBackground, shape: 'square' }), item.label] }) }, item.id));
-    const renderCategoryLinkItem = (item) => isWide ? (_jsx(Flex, { container: { alignItems: 'center', pad: [1.5, undefined] }, as: 'li', children: _jsxs(StyledShortcutsButton, { variant: 'link', ...itemLinkProps(item), children: [_jsx(StyledCategoryItemIcon, { name: item.icon, background: iconBackground, shape: 'square' }), item.label] }) }, item.id)) : (renderStackedLinkItem(item));
-    const withCardShell = (content) => (_jsxs(Card, { ...restProps, "data-testid": testIds.root, ref: ref, children: [_jsx(StyledShortcutsHeader, { children: _jsx(Text, { variant: 'h2', children: heading ?? t('shortcuts') }) }), _jsx(StyledShortcutCardContent, { isNonCategoryLink: !categories && displayMode === 'links', children: content })] }));
-    if (displayMode === 'card' && !categories) {
-        const cardGrid = (_jsx(StyledShortcutsCardsContainer, { ref: flatListRef, isSmallOrAbove: isWide, showHeader: showHeader, role: 'list', "data-testid": testIds.list, "aria-label": heading ?? t('shortcuts'), children: items.map(renderCardItem) }));
-        if (!showHeader) {
-            if (items.length === 0)
-                return null;
-            return (_jsxs("div", { "data-testid": testIds.root, ...restProps, ref: ref, children: [_jsx(VisuallyHiddenText, { children: heading ?? t('shortcuts') }), cardGrid] }));
-        }
-        return withCardShell(items.length === 0 ? emptyState : cardGrid);
-    }
+    const withCardShell = (content) => (_jsxs(Card, { ...restProps, "data-testid": testIds.root, ref: ref, children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h2', children: heading ?? t('shortcuts') }) }), _jsx(CardContent, { children: content })] }));
     if (categories) {
         const visibleCategories = categories.filter(cat => cat.items.length > 0);
-        const categorySections = displayMode === 'card' ? (_jsx(StyledShortcutsCategoriesContainer, { ref: categoriesContainerRef, isSmallOrAbove: false, children: visibleCategories.map(cat => (_jsxs(Flex, { container: { direction: 'column' }, "aria-labelledby": `cat-${cat.id}`, "data-testid": testIds.categorySection, as: 'section', children: [_jsx(StyledShortcutsCategoryHeading, { id: `cat-${cat.id}`, "data-testid": testIds.categoryHeading, variant: 'h3', children: cat.label }), _jsx(StyledShortcutsCardsContainer, { isSmallOrAbove: isWide, showHeader: true, role: 'list', "aria-label": cat.label, children: cat.items.map(renderCardItem) })] }, cat.id))) })) : (_jsx(StyledShortcutsCategoriesContainer, { ref: categoriesContainerRef, isSmallOrAbove: isWide, children: visibleCategories.map(cat => (_jsxs(Flex, { container: { direction: 'column' }, "aria-labelledby": `cat-${cat.id}`, "data-testid": testIds.categorySection, as: 'section', children: [_jsx(StyledShortcutsCategoryHeading, { id: `cat-${cat.id}`, "data-testid": testIds.categoryHeading, variant: 'h3', children: cat.label }), _jsx(StyledShortcutsList, { isSmallOrAbove: false, role: 'list', "aria-label": cat.label, children: cat.items.map(renderCategoryLinkItem) })] }, cat.id))) }));
+        const categorySections = (_jsx(StyledShortcutsCategoriesContainer, { ref: categoriesContainerRef, isSmallOrAbove: false, children: visibleCategories.map(cat => (_jsxs(Flex, { container: { direction: 'column' }, "aria-labelledby": `cat-${cat.id}`, "data-testid": testIds.categorySection, as: 'section', children: [_jsx(StyledShortcutsCategoryHeading, { id: `cat-${cat.id}`, "data-testid": testIds.categoryHeading, variant: 'h3', children: cat.label }), _jsx(StyledShortcutsCardsContainer, { isSmallOrAbove: isWide, showHeader: true, role: 'list', "aria-label": cat.label, children: cat.items.map(item => (_jsx(CardItem, { item: item, iconBackground: iconBackground, variant: variant }, item.id))) })] }, cat.id))) }));
         return withCardShell(visibleCategories.length === 0 ? emptyState : categorySections);
     }
-    const flatLinkList = (_jsx(StyledShortcutsLinksWrapper, { children: _jsx(StyledShortcutsList, { ref: flatListRef, isSmallOrAbove: isWide, role: 'list', "data-testid": testIds.list, "aria-label": heading ?? t('shortcuts'), children: items.map(item => isWide ? (_jsx(InlineLinkItem, { item: item, iconBackground: iconBackground }, item.id)) : (renderStackedLinkItem(item))) }) }));
-    return withCardShell(items.length === 0 ? emptyState : flatLinkList);
+    const cardGrid = (_jsx(StyledShortcutsCardsContainer, { ref: flatListRef, isSmallOrAbove: isWide, showHeader: showHeader, role: 'list', "data-testid": testIds.list, "aria-label": heading ?? t('shortcuts'), children: items.map(item => (_jsx(CardItem, { item: item, iconBackground: iconBackground, variant: variant }, item.id))) }));
+    if (!showHeader) {
+        if (items.length === 0)
+            return null;
+        return (_jsxs("div", { "data-testid": testIds.root, ...restProps, ref: ref, children: [_jsx(VisuallyHiddenText, { children: heading ?? t('shortcuts') }), cardGrid] }));
+    }
+    return withCardShell(items.length === 0 ? emptyState : cardGrid);
 });
 export default withTestIds(Shortcuts, getShortcutsTestIds);
 //# sourceMappingURL=Shortcuts.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Shortcuts.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, forwardRef } from 'react';\nimport type { ReactNode, PropsWithoutRef } from 'react';\n\nimport {\n  Card,\n  EmptyState,\n  Flex,\n  Icon,\n  Text,\n  Tooltip,\n  VisuallyHiddenText,\n  useArrows,\n  useBreakpoint,\n  useElement,\n  useI18n,\n  useTestIds,\n  useTheme,\n  withTestIds\n} from '@pega/cosmos-react-core';\n\nimport type { ShortcutsProps, ShortcutItem } from './Shortcuts.types';\nimport {\n  StyledInlineLinkLabel,\n  StyledLinksListItem,\n  StyledShortcutsButton,\n  StyledShortcutsCard,\n  StyledShortcutsCardButton,\n  StyledPreviewShell,\n  StyledShortcutsPreviewItem,\n  StyledShortcutsCardsContainer,\n  StyledCategoryItemIcon,\n  StyledShortcutsCategoriesContainer,\n  StyledShortcutsCategoryHeading,\n  StyledShortcutsList,\n  StyledShortcutsLinksWrapper,\n  StyledShortcutsStackedButton,\n  StyledShortcutsCardIcon,\n  StyledShortcutsHeader,\n  StyledShortcutCardContent\n} from './Shortcuts.styles';\nimport { getShortcutsTestIds } from './Shortcuts.test-ids';\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 InlineLinkItem = ({\n  item,\n  iconBackground\n}: {\n  item: ShortcutItem;\n  iconBackground: string;\n}) => {\n  const [buttonEl, setButtonEl] = useElement();\n\n  return (\n    <StyledLinksListItem isSmallOrAbove>\n      <StyledShortcutsButton isInline variant='link' ref={setButtonEl} {...itemLinkProps(item)}>\n        <Icon name={item.icon} background={iconBackground} shape='square' />\n        <StyledInlineLinkLabel>{item.label}</StyledInlineLinkLabel>\n      </StyledShortcutsButton>\n\n      {buttonEl && (\n        <Tooltip target={buttonEl} smart>\n          {item.label}\n        </Tooltip>\n      )}\n    </StyledLinksListItem>\n  );\n};\n\nconst Shortcuts = forwardRef(function Shortcuts(\n  {\n    heading,\n    items = [],\n    categories,\n    displayMode = 'links',\n    showHeader = true,\n    testId,\n    ...restProps\n  }: PropsWithoutRef<ShortcutsProps>,\n  ref: ShortcutsProps['ref']\n) {\n  const t = useI18n();\n  const testIds = useTestIds(testId, getShortcutsTestIds);\n  const {\n    base: {\n      palette: { interactive: iconBackground }\n    }\n  } = useTheme();\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 isWide = useBreakpoint('sm', {\n    breakpointRef: categories ? categoriesContainerRef : flatListRef\n  });\n\n  const emptyState = <EmptyState message={t('no_items')} data-testid={testIds.emptyState} />;\n\n  const renderCardItem = (item: ShortcutItem) => {\n    if (item.type === 'external' && item.preview) {\n      return (\n        <Flex container={{ direction: 'column' }} key={item.id} as={StyledShortcutsPreviewItem}>\n          <StyledPreviewShell>{item.preview}</StyledPreviewShell>\n        </Flex>\n      );\n    }\n\n    return (\n      <StyledShortcutsCard key={item.id}>\n        <StyledShortcutsCardButton variant='link' {...itemLinkProps(item)}>\n          <StyledShortcutsCardIcon name={item.icon} background={iconBackground} shape='square' />\n          <Text as='span' variant='h3'>\n            {item.label}\n          </Text>\n        </StyledShortcutsCardButton>\n      </StyledShortcutsCard>\n    );\n  };\n\n  const renderStackedLinkItem = (item: ShortcutItem) => (\n    <StyledLinksListItem key={item.id} isSmallOrAbove={false}>\n      <StyledShortcutsStackedButton variant='link' {...itemLinkProps(item)}>\n        <Icon name={item.icon} background={iconBackground} shape='square' />\n        {item.label}\n      </StyledShortcutsStackedButton>\n    </StyledLinksListItem>\n  );\n\n  const renderCategoryLinkItem = (item: ShortcutItem) =>\n    isWide ? (\n      <Flex container={{ alignItems: 'center', pad: [1.5, undefined] }} key={item.id} as='li'>\n        <StyledShortcutsButton variant='link' {...itemLinkProps(item)}>\n          <StyledCategoryItemIcon name={item.icon} background={iconBackground} shape='square' />\n          {item.label}\n        </StyledShortcutsButton>\n      </Flex>\n    ) : (\n      renderStackedLinkItem(item)\n    );\n\n  const withCardShell = (content: ReactNode) => (\n    <Card {...restProps} data-testid={testIds.root} ref={ref}>\n      <StyledShortcutsHeader>\n        <Text variant='h2'>{heading ?? t('shortcuts')}</Text>\n      </StyledShortcutsHeader>\n\n      <StyledShortcutCardContent isNonCategoryLink={!categories && displayMode === 'links'}>\n        {content}\n      </StyledShortcutCardContent>\n    </Card>\n  );\n\n  if (displayMode === 'card' && !categories) {\n    const cardGrid = (\n      <StyledShortcutsCardsContainer\n        ref={flatListRef}\n        isSmallOrAbove={isWide}\n        showHeader={showHeader}\n        role='list'\n        data-testid={testIds.list}\n        aria-label={heading ?? t('shortcuts')}\n      >\n        {items.map(renderCardItem)}\n      </StyledShortcutsCardsContainer>\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\n  if (categories) {\n    const visibleCategories = categories.filter(cat => cat.items.length > 0);\n\n    const categorySections =\n      displayMode === 'card' ? (\n        <StyledShortcutsCategoriesContainer ref={categoriesContainerRef} isSmallOrAbove={false}>\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\n                isSmallOrAbove={isWide}\n                showHeader\n                role='list'\n                aria-label={cat.label}\n              >\n                {cat.items.map(renderCardItem)}\n              </StyledShortcutsCardsContainer>\n            </Flex>\n          ))}\n        </StyledShortcutsCategoriesContainer>\n      ) : (\n        <StyledShortcutsCategoriesContainer ref={categoriesContainerRef} isSmallOrAbove={isWide}>\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              <StyledShortcutsList isSmallOrAbove={false} role='list' aria-label={cat.label}>\n                {cat.items.map(renderCategoryLinkItem)}\n              </StyledShortcutsList>\n            </Flex>\n          ))}\n        </StyledShortcutsCategoriesContainer>\n      );\n\n    return withCardShell(visibleCategories.length === 0 ? emptyState : categorySections);\n  }\n\n  const flatLinkList = (\n    <StyledShortcutsLinksWrapper>\n      <StyledShortcutsList\n        ref={flatListRef}\n        isSmallOrAbove={isWide}\n        role='list'\n        data-testid={testIds.list}\n        aria-label={heading ?? t('shortcuts')}\n      >\n        {items.map(item =>\n          isWide ? (\n            <InlineLinkItem key={item.id} item={item} iconBackground={iconBackground} />\n          ) : (\n            renderStackedLinkItem(item)\n          )\n        )}\n      </StyledShortcutsList>\n    </StyledShortcutsLinksWrapper>\n  );\n\n  return withCardShell(items.length === 0 ? emptyState : flatLinkList);\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 } from 'react';\nimport type { ReactNode, PropsWithoutRef } from 'react';\nimport { parseToRgb } from 'polished';\n\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  EmptyState,\n  Flex,\n  Text,\n  VisuallyHiddenText,\n  registerIcon,\n  tryCatch,\n  useArrows,\n  useBreakpoint,\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  StyledShortcutsCategoriesContainer,\n  StyledShortcutsCategoryHeading,\n  StyledShortcutsCardIcon\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 = ({\n  item,\n  iconBackground,\n  variant\n}: {\n  item: ShortcutItem;\n  iconBackground: string;\n  variant: 'stacked' | 'inline';\n}) => (\n  <StyledShortcutsCard>\n    <StyledShortcutsCardButton variant='link' layoutVariant={variant} {...itemLinkProps(item)}>\n      <StyledShortcutsCardIcon\n        name={item.icon}\n        background={iconBackground}\n        shape='square'\n        layoutVariant={variant}\n      />\n      <StyledLabelRow>\n        <Text as='span' variant='h3'>\n          {item.label}\n        </Text>\n\n        {item.type === 'external' && <StyledExternalIcon name='open' />}\n      </StyledLabelRow>\n    </StyledShortcutsCardButton>\n  </StyledShortcutsCard>\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  const {\n    base: {\n      palette: { 'brand-accent': brandAccent, 'brand-primary': brandPrimary }\n    }\n  } = useTheme();\n\n  const iconBackground =\n    tryCatch(() => {\n      parseToRgb(brandAccent);\n      return brandAccent;\n    }) ?? brandPrimary;\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 isWide = useBreakpoint('sm', {\n    breakpointRef: categories ? categoriesContainerRef : flatListRef\n  });\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} isSmallOrAbove={false}>\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\n              isSmallOrAbove={isWide}\n              showHeader\n              role='list'\n              aria-label={cat.label}\n            >\n              {cat.items.map(item => (\n                <CardItem\n                  key={item.id}\n                  item={item}\n                  iconBackground={iconBackground}\n                  variant={variant}\n                />\n              ))}\n            </StyledShortcutsCardsContainer>\n          </Flex>\n        ))}\n      </StyledShortcutsCategoriesContainer>\n    );\n\n    return withCardShell(visibleCategories.length === 0 ? emptyState : categorySections);\n  }\n\n  const cardGrid = (\n    <StyledShortcutsCardsContainer\n      ref={flatListRef}\n      isSmallOrAbove={isWide}\n      showHeader={showHeader}\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} iconBackground={iconBackground} variant={variant} />\n      ))}\n    </StyledShortcutsCardsContainer>\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

@@ -1,39 +1,22 @@
-export declare const StyledShortcutsHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-export declare const StyledShortcutCardContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps, {
-    isNonCategoryLink?: boolean;
-}>> & string & Omit<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledShortcutsLinksWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledShortcutsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
-    isSmallOrAbove: boolean;
-}>> & string;
-export declare const StyledLinksListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
-    isSmallOrAbove: boolean;
-}>> & string;
-export declare const StyledShortcutsButton: 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;
-}, {
-    isInline?: boolean;
-}>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledInlineLinkLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledShortcutsStackedButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<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;
-}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledShortcutsCardsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
     isSmallOrAbove: boolean;
     showHeader: boolean;
 }>> & string;
-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 StyledShortcutsPreviewItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-export declare const StyledPreviewShell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledShortcutsCardButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<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;
-}, never>> & 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, 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 StyledShortcutsCategoriesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     isSmallOrAbove: boolean;
 }>> & string;
 export declare const StyledShortcutsCategoryHeading: 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 StyledCategoryItemIcon: 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 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 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";
+}>> & 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 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>>;
 //# 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":"AAYA,eAAO,MAAM,qBAAqB,uNAKhC,CAAC;AAIH,eAAO,MAAM,yBAAyB;wBAA6C,OAAO;0MAWxF,CAAC;AAIH,eAAO,MAAM,2BAA2B,6NAOtC,CAAC;AAIH,eAAO,MAAM,mBAAmB;oBAA+B,OAAO;YAuBrE,CAAC;AAIF,eAAO,MAAM,mBAAmB;oBAA+B,OAAO;YAqBrE,CAAC;AAIF,eAAO,MAAM,qBAAqB;;;eAA+B,OAAO;oLAetE,CAAC;AAIH,eAAO,MAAM,qBAAqB,+NAMjC,CAAC;AAIF,eAAO,MAAM,4BAA4B;;2LAOvC,CAAC;AAIH,eAAO,MAAM,6BAA6B;oBACxB,OAAO;gBACX,OAAO;YAqBnB,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAkB9B,CAAC;AAIH,eAAO,MAAM,0BAA0B,6NAEtC,CAAC;AAIF,eAAO,MAAM,kBAAkB,6NAkC7B,CAAC;AAIH,eAAO,MAAM,yBAAyB;;2LAoBpC,CAAC;AAIH,eAAO,MAAM,uBAAuB,kaAKlC,CAAC;AAIH,eAAO,MAAM,kCAAkC;oBAAgC,OAAO;YAoBrF,CAAC;AAIF,eAAO,MAAM,8BAA8B;;yLAIzC,CAAC;AAIH,eAAO,MAAM,sBAAsB,kaAElC,CAAC"}
+{"version":3,"file":"Shortcuts.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,6BAA6B;oBACxB,OAAO;gBACX,OAAO;YAqBnB,CAAC;AAIH,eAAO,MAAM,kCAAkC;oBAAgC,OAAO;YAqBrF,CAAC;AAIF,eAAO,MAAM,8BAA8B;;yLAIzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,6NAG/B,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;mBAAmC,SAAS,GAAG,QAAQ;oLAyC3F,CAAC;AAIH,eAAO,MAAM,uBAAuB;mBAAiC,SAAS,GAAG,QAAQ;0JAUxF,CAAC;AAIF,eAAO,MAAM,cAAc,+NAM1B,CAAC;AAIF,eAAO,MAAM,kBAAkB,kaAE9B,CAAC"}

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

@@ -1,115 +1,13 @@
 import styled, { css } from 'styled-components';
 import { mix } from 'polished';
-import { Button, CardContent, defaultThemeProp, Icon, Text, tryCatch } from '@pega/cosmos-react-core';
-export const StyledShortcutsHeader = styled.header(({ theme: { base, components } }) => {
-    return css `
-    padding: calc(${base.spacing} * 1.5) calc(${components.card.padding} * 2);
-    padding-block-end: 0;
-  `;
-});
-StyledShortcutsHeader.defaultProps = defaultThemeProp;
-export const StyledShortcutCardContent = styled(CardContent)(({ isNonCategoryLink }) => {
-    return css `
-    ${isNonCategoryLink &&
-        css `
-      &&&& {
-        padding-inline: 0;
-      }
-    `}
-  `;
-});
-StyledShortcutCardContent.defaultProps = defaultThemeProp;
-export const StyledShortcutsLinksWrapper = styled.div(({ theme }) => {
-    return css `
-    overflow: hidden;
-    width: 100%;
-    padding-block: calc(${theme.base.spacing} * 0.5);
-    margin-block: calc(${theme.base.spacing} * -0.5);
-  `;
-});
-StyledShortcutsLinksWrapper.defaultProps = defaultThemeProp;
-export const StyledShortcutsList = styled.ul(({ theme: { base }, isSmallOrAbove }) => {
-    return css `
-      display: grid;
-      grid-template-columns: minmax(0, 1fr);
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      width: 100%;
-
-      ${isSmallOrAbove &&
-        css `
-        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
-        row-gap: calc(${base.spacing} * 1.5);
-        margin-inline-start: -0.0625rem;
-      `}
-
-      ${!isSmallOrAbove &&
-        css `
-        padding-inline: calc(${base.spacing} * 2);
-      `}
-    `;
-});
-StyledShortcutsList.defaultProps = defaultThemeProp;
-export const StyledLinksListItem = styled.li(({ theme: { base }, isSmallOrAbove }) => {
-    return css `
-      display: flex;
-      align-items: center;
-
-      ${isSmallOrAbove &&
-        css `
-        border-inline-start: 0.0625rem solid ${base.palette['border-line']};
-        padding-inline: calc(${base.spacing} * 2);
-        min-height: 100%;
-      `}
-
-      ${!isSmallOrAbove &&
-        css `
-        padding-block: calc(${base.spacing} * 1.5);
-        padding-inline: calc(${base.spacing} * 1.5);
-        width: 100%;
-      `}
-    `;
-});
-StyledLinksListItem.defaultProps = defaultThemeProp;
-export const StyledShortcutsButton = styled(Button)(({ theme: { base }, isInline }) => {
-    return css `
-    display: flex;
-    align-items: center;
-    gap: ${base.spacing};
-
-    ${isInline &&
-        css `
-      flex: 1 1 0;
-      min-width: 0;
-    `}
-  `;
-});
-StyledShortcutsButton.defaultProps = defaultThemeProp;
-export const StyledInlineLinkLabel = styled.span `
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  flex: 1;
-`;
-StyledInlineLinkLabel.defaultProps = defaultThemeProp;
-export const StyledShortcutsStackedButton = styled(Button)(({ theme: { base } }) => {
-    return css `
-    display: flex;
-    align-items: center;
-    width: 100%;
-    gap: calc(${base.spacing} * 2);
-  `;
-});
-StyledShortcutsStackedButton.defaultProps = defaultThemeProp;
+import { Button, defaultThemeProp, Icon, Text, tryCatch } from '@pega/cosmos-react-core';
 export const StyledShortcutsCardsContainer = styled.ul(({ theme: { base }, isSmallOrAbove, showHeader }) => {
     return css `
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: ${base.spacing};
     list-style: none;
-    padding: 0;
+    padding: ${base.spacing} 0;
     margin: 0;
 
     ${isSmallOrAbove &&
@@ -125,94 +23,11 @@ export const StyledShortcutsCardsContainer = styled.ul(({ theme: { base }, isSma
   `;
 });
 StyledShortcutsCardsContainer.defaultProps = defaultThemeProp;
-export const StyledShortcutsCard = styled.li(({ theme: { base, components } }) => {
-    const hoverBackgroundColor = tryCatch(() => mix(0.9, base.palette['primary-background'], components.button['secondary-color']));
-    return css `
-    display: flex;
-    flex-direction: column;
-    min-height: 8rem;
-    border: 0.0625rem solid ${base.palette['border-line']};
-    border-radius: ${base['border-radius']};
-    background: ${base.palette['primary-background']};
-    box-shadow: ${base.shadow.low};
-
-    &:hover {
-      background: ${hoverBackgroundColor};
-    }
-  `;
-});
-StyledShortcutsCard.defaultProps = defaultThemeProp;
-export const StyledShortcutsPreviewItem = styled.li `
-  min-height: 8rem;
-`;
-StyledShortcutsPreviewItem.defaultProps = defaultThemeProp;
-export const StyledPreviewShell = styled.div(({ theme: { base, components } }) => {
-    const hoverBackgroundColor = tryCatch(() => mix(0.9, base.palette['primary-background'], components.button['secondary-color']));
-    return css `
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-
-    && > * > * > * {
-      flex: 1;
-      min-height: 0;
-    }
-
-    && > * {
-      flex: 1;
-      min-height: 0;
-      display: flex;
-      flex-direction: column;
-    }
-
-    && > * > * {
-      flex: 1;
-      min-height: 0;
-      box-shadow: ${base.shadow.low};
-      --border-radius: ${base['border-radius']};
-
-      &:hover {
-        background: ${hoverBackgroundColor};
-      }
-    }
-  `;
-});
-StyledPreviewShell.defaultProps = defaultThemeProp;
-export const StyledShortcutsCardButton = styled(Button)(({ theme: { base } }) => {
-    return css `
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    gap: calc(${base.spacing} * 2);
-    padding-block-start: calc(${base.spacing} * 4);
-    padding-block-end: calc(${base.spacing} * 3);
-    padding-inline: calc(${base.spacing} * 2);
-    width: 100%;
-    text-align: center;
-    flex: 1;
-    border-radius: inherit;
-
-    &:focus-visible {
-      outline: none;
-      box-shadow: ${base.shadow.focus};
-    }
-  `;
-});
-StyledShortcutsCardButton.defaultProps = defaultThemeProp;
-export const StyledShortcutsCardIcon = styled(Icon)(() => {
-    return css `
-    width: 3rem;
-    height: 3rem;
-  `;
-});
-StyledShortcutsCardIcon.defaultProps = defaultThemeProp;
 export const StyledShortcutsCategoriesContainer = styled.div(({ theme: { base }, isSmallOrAbove }) => {
     return css `
       display: grid;
       grid-template-columns: minmax(0, 1fr);
-      gap: calc(${base.spacing} * 3);
+      gap: calc(${base.spacing} * 2);
       width: 100%;
 
       ${isSmallOrAbove &&
@@ -224,6 +39,7 @@ export const StyledShortcutsCategoriesContainer = styled.div(({ theme: { base },
       ${!isSmallOrAbove &&
         css `
         padding-inline: calc(${base.spacing} * 0.5);
+        padding-block: ${base.spacing};
       `}
     `;
 });
@@ -234,8 +50,65 @@ export const StyledShortcutsCategoryHeading = styled(Text)(({ theme: { base } })
   `;
 });
 StyledShortcutsCategoryHeading.defaultProps = defaultThemeProp;
-export const StyledCategoryItemIcon = styled(Icon) `
+export const StyledShortcutsCard = styled.li `
+  display: flex;
+  flex-direction: column;
+`;
+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;
+    flex: 1;
+    width: 100%;
+    border: 0.0625rem solid ${base.palette['border-line']};
+    border-radius: ${base['border-radius']};
+    background: ${base.palette['primary-background']};
+    padding-inline: calc(${base.spacing} * 2);
+
+    &:hover {
+      background: ${hoverBackgroundColor};
+    }
+
+    ${layoutVariant === 'stacked' &&
+        css `
+      flex-direction: column;
+      gap: calc(${base.spacing} * 2);
+      padding-block-start: calc(${base.spacing} * 4);
+      padding-block-end: calc(${base.spacing} * 3);
+      text-align: center;
+      min-height: 8rem;
+    `}
+
+    ${layoutVariant === 'inline' &&
+        css `
+      flex-direction: row;
+      gap: calc(${base.spacing} * 1.5);
+      padding-block: calc(${base.spacing} * 1.5);
+      text-align: start;
+    `}
+  `;
+});
+StyledShortcutsCardButton.defaultProps = defaultThemeProp;
+export const StyledShortcutsCardIcon = styled(Icon)(({ layoutVariant }) => css `
+    flex-shrink: 0;
+
+    ${layoutVariant === 'stacked' &&
+    css `
+      width: 3rem;
+      height: 3rem;
+    `}
+  `);
+StyledShortcutsCardIcon.defaultProps = defaultThemeProp;
+export const StyledLabelRow = styled.span(({ theme: { base } }) => css `
+    display: flex;
+    align-items: center;
+    gap: calc(${base.spacing} * 0.5);
+  `);
+StyledLabelRow.defaultProps = defaultThemeProp;
+export const StyledExternalIcon = styled(Icon) `
   flex-shrink: 0;
 `;
-StyledCategoryItemIcon.defaultProps = defaultThemeProp;
+StyledExternalIcon.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 {\n  Button,\n  CardContent,\n  defaultThemeProp,\n  Icon,\n  Text,\n  tryCatch\n} from '@pega/cosmos-react-core';\n\nexport const StyledShortcutsHeader = styled.header(({ theme: { base, components } }) => {\n  return css`\n    padding: calc(${base.spacing} * 1.5) calc(${components.card.padding} * 2);\n    padding-block-end: 0;\n  `;\n});\n\nStyledShortcutsHeader.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutCardContent = styled(CardContent)<{ isNonCategoryLink?: boolean }>(({\n  isNonCategoryLink\n}) => {\n  return css`\n    ${isNonCategoryLink &&\n    css`\n      &&&& {\n        padding-inline: 0;\n      }\n    `}\n  `;\n});\n\nStyledShortcutCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsLinksWrapper = styled.div(({ theme }) => {\n  return css`\n    overflow: hidden;\n    width: 100%;\n    padding-block: calc(${theme.base.spacing} * 0.5);\n    margin-block: calc(${theme.base.spacing} * -0.5);\n  `;\n});\n\nStyledShortcutsLinksWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsList = styled.ul<{ isSmallOrAbove: boolean }>(\n  ({ theme: { base }, isSmallOrAbove }) => {\n    return css`\n      display: grid;\n      grid-template-columns: minmax(0, 1fr);\n      list-style: none;\n      padding: 0;\n      margin: 0;\n      width: 100%;\n\n      ${isSmallOrAbove &&\n      css`\n        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));\n        row-gap: calc(${base.spacing} * 1.5);\n        margin-inline-start: -0.0625rem;\n      `}\n\n      ${!isSmallOrAbove &&\n      css`\n        padding-inline: calc(${base.spacing} * 2);\n      `}\n    `;\n  }\n);\n\nStyledShortcutsList.defaultProps = defaultThemeProp;\n\nexport const StyledLinksListItem = styled.li<{ isSmallOrAbove: boolean }>(\n  ({ theme: { base }, isSmallOrAbove }) => {\n    return css`\n      display: flex;\n      align-items: center;\n\n      ${isSmallOrAbove &&\n      css`\n        border-inline-start: 0.0625rem solid ${base.palette['border-line']};\n        padding-inline: calc(${base.spacing} * 2);\n        min-height: 100%;\n      `}\n\n      ${!isSmallOrAbove &&\n      css`\n        padding-block: calc(${base.spacing} * 1.5);\n        padding-inline: calc(${base.spacing} * 1.5);\n        width: 100%;\n      `}\n    `;\n  }\n);\n\nStyledLinksListItem.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsButton = styled(Button)<{ isInline?: boolean }>(({\n  theme: { base },\n  isInline\n}) => {\n  return css`\n    display: flex;\n    align-items: center;\n    gap: ${base.spacing};\n\n    ${isInline &&\n    css`\n      flex: 1 1 0;\n      min-width: 0;\n    `}\n  `;\n});\n\nStyledShortcutsButton.defaultProps = defaultThemeProp;\n\nexport const StyledInlineLinkLabel = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  flex: 1;\n`;\n\nStyledInlineLinkLabel.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsStackedButton = styled(Button)(({ theme: { base } }) => {\n  return css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    gap: calc(${base.spacing} * 2);\n  `;\n});\n\nStyledShortcutsStackedButton.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCardsContainer = styled.ul<{\n  isSmallOrAbove: boolean;\n  showHeader: boolean;\n}>(({ theme: { base }, isSmallOrAbove, showHeader }) => {\n  return css`\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: ${base.spacing};\n    list-style: none;\n    padding: 0;\n    margin: 0;\n\n    ${isSmallOrAbove &&\n    css`\n      grid-auto-rows: 1fr;\n      grid-template-columns: ${showHeader\n        ? 'repeat(auto-fill, minmax(14rem, 1fr))'\n        : 'repeat(auto-fit, minmax(14rem, 14rem))'};\n      justify-content: ${showHeader ? 'start' : 'center'};\n      align-items: stretch;\n      width: 100%;\n    `}\n  `;\n});\n\nStyledShortcutsCardsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCard = styled.li(({ theme: { base, components } }) => {\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    flex-direction: column;\n    min-height: 8rem;\n    border: 0.0625rem solid ${base.palette['border-line']};\n    border-radius: ${base['border-radius']};\n    background: ${base.palette['primary-background']};\n    box-shadow: ${base.shadow.low};\n\n    &:hover {\n      background: ${hoverBackgroundColor};\n    }\n  `;\n});\n\nStyledShortcutsCard.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsPreviewItem = styled.li`\n  min-height: 8rem;\n`;\n\nStyledShortcutsPreviewItem.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewShell = styled.div(({ theme: { base, components } }) => {\n  const hoverBackgroundColor = tryCatch(() =>\n    mix(0.9, base.palette['primary-background'], components.button['secondary-color'])\n  );\n\n  return css`\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n\n    && > * > * > * {\n      flex: 1;\n      min-height: 0;\n    }\n\n    && > * {\n      flex: 1;\n      min-height: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    && > * > * {\n      flex: 1;\n      min-height: 0;\n      box-shadow: ${base.shadow.low};\n      --border-radius: ${base['border-radius']};\n\n      &:hover {\n        background: ${hoverBackgroundColor};\n      }\n    }\n  `;\n});\n\nStyledPreviewShell.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCardButton = styled(Button)(({ theme: { base } }) => {\n  return css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    gap: calc(${base.spacing} * 2);\n    padding-block-start: calc(${base.spacing} * 4);\n    padding-block-end: calc(${base.spacing} * 3);\n    padding-inline: calc(${base.spacing} * 2);\n    width: 100%;\n    text-align: center;\n    flex: 1;\n    border-radius: inherit;\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: ${base.shadow.focus};\n    }\n  `;\n});\n\nStyledShortcutsCardButton.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCardIcon = styled(Icon)(() => {\n  return css`\n    width: 3rem;\n    height: 3rem;\n  `;\n});\n\nStyledShortcutsCardIcon.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCategoriesContainer = styled.div<{ isSmallOrAbove: boolean }>(\n  ({ theme: { base }, isSmallOrAbove }) => {\n    return css`\n      display: grid;\n      grid-template-columns: minmax(0, 1fr);\n      gap: calc(${base.spacing} * 3);\n      width: 100%;\n\n      ${isSmallOrAbove &&\n      css`\n        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));\n        align-items: start;\n      `}\n\n      ${!isSmallOrAbove &&\n      css`\n        padding-inline: calc(${base.spacing} * 0.5);\n      `}\n    `;\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 StyledCategoryItemIcon = styled(Icon)`\n  flex-shrink: 0;\n`;\n\nStyledCategoryItemIcon.defaultProps = defaultThemeProp;\n"]}
+{"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 StyledShortcutsCardsContainer = styled.ul<{\n  isSmallOrAbove: boolean;\n  showHeader: boolean;\n}>(({ theme: { base }, isSmallOrAbove, showHeader }) => {\n  return css`\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: ${base.spacing};\n    list-style: none;\n    padding: ${base.spacing} 0;\n    margin: 0;\n\n    ${isSmallOrAbove &&\n    css`\n      grid-auto-rows: 1fr;\n      grid-template-columns: ${showHeader\n        ? 'repeat(auto-fill, minmax(14rem, 1fr))'\n        : 'repeat(auto-fit, minmax(14rem, 14rem))'};\n      justify-content: ${showHeader ? 'start' : 'center'};\n      align-items: stretch;\n      width: 100%;\n    `}\n  `;\n});\n\nStyledShortcutsCardsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCategoriesContainer = styled.div<{ isSmallOrAbove: boolean }>(\n  ({ theme: { base }, isSmallOrAbove }) => {\n    return css`\n      display: grid;\n      grid-template-columns: minmax(0, 1fr);\n      gap: calc(${base.spacing} * 2);\n      width: 100%;\n\n      ${isSmallOrAbove &&\n      css`\n        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));\n        align-items: start;\n      `}\n\n      ${!isSmallOrAbove &&\n      css`\n        padding-inline: calc(${base.spacing} * 0.5);\n        padding-block: ${base.spacing};\n      `}\n    `;\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\n    &:hover {\n      background: ${hoverBackgroundColor};\n    }\n\n    ${layoutVariant === 'stacked' &&\n    css`\n      flex-direction: column;\n      gap: calc(${base.spacing} * 2);\n      padding-block-start: calc(${base.spacing} * 4);\n      padding-block-end: calc(${base.spacing} * 3);\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      padding-block: calc(${base.spacing} * 1.5);\n      text-align: start;\n    `}\n  `;\n});\n\nStyledShortcutsCardButton.defaultProps = defaultThemeProp;\n\nexport const StyledShortcutsCardIcon = styled(Icon)<{ layoutVariant: 'stacked' | 'inline' }>(\n  ({ layoutVariant }) => css`\n    flex-shrink: 0;\n\n    ${layoutVariant === 'stacked' &&\n    css`\n      width: 3rem;\n      height: 3rem;\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"]}

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

@@ -1,4 +1,4 @@
-import type { ReactNode, Ref } from 'react';
+import type { Ref } from 'react';
 import type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
 interface ShortcutItemBase {
     /** Unique identifier for this shortcut. */
@@ -13,11 +13,6 @@ export interface ShortcutLinkItem extends ShortcutItemBase {
     type: 'external';
     /** Absolute URL the link navigates to. Opens in a new tab. */
     href: string;
-    /**
-     * Optional preview content rendered inside the card (e.g. an Open Graph preview card).
-     * Only rendered in `card` display mode — ignored in links mode.
-     */
-    preview?: ReactNode;
 }
 export interface ShortcutNavItem extends ShortcutItemBase {
     /** Discriminant — this item navigates to a portal landing page. */
@@ -35,13 +30,11 @@ export interface ShortcutCategory {
     items: ShortcutItem[];
 }
 interface ShortcutsWithItems {
-    /** Resolved shortcut items to render. */
+    /** Shortcut items to render as cards. */
     items?: ShortcutItem[];
     categories?: never;
-    /** Whether to render each item as an individual card or all items as links inside a single card. */
-    displayMode?: 'card' | 'links';
     /**
-     * Cards display mode only — whether to render the outer card shell with a heading.
+     * Whether to render the outer card shell with a heading.
      * When `false`, only the card grid is rendered, centered within its container.
      * @default true
      */
@@ -49,19 +42,21 @@ interface ShortcutsWithItems {
 }
 interface ShortcutsWithCategories {
     items?: never;
-    /**
-     * Grouped shortcut items.
-     */
+    /** Grouped shortcut items, each rendered as cards under a category heading. */
     categories: ShortcutCategory[];
-    /** Whether to render each category's items as cards or links. Defaults to `'links'`. */
-    displayMode?: 'card' | 'links';
-    /** Not applicable for categorized mode — the outer card heading is always shown. */
     showHeader?: never;
 }
 interface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {
     /** Heading displayed above the shortcuts. */
     heading?: string;
-    /** Ref for the Shortcuts root card element. */
+    /**
+     * Controls the layout variant of each shortcut card.
+     * - `stacked`: large icon above the label (default card style).
+     * - `inline`: small icon inline to the left of the label (list/link style).
+     * @default 'inline'
+     */
+    variant?: 'stacked' | 'inline';
+    /** Ref for the root card element. */
     ref?: Ref<HTMLDivElement>;
 }
 export type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);

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,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,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;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;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,oGAAoG;IACpG,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,wFAAwF;IACxF,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,oFAAoF;IACpF,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,EAAE,UAAU;IAC7D,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,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;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"}

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 { ReactNode, 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   * Optional preview content rendered inside the card (e.g. an Open Graph preview card).\n   * Only rendered in `card` display mode — ignored in links mode.\n   */\n  preview?: ReactNode;\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  /** Resolved shortcut items to render. */\n  items?: ShortcutItem[];\n  categories?: never;\n  /** Whether to render each item as an individual card or all items as links inside a single card. */\n  displayMode?: 'card' | 'links';\n  /**\n   * Cards display mode only — 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  /**\n   * Grouped shortcut items.\n   */\n  categories: ShortcutCategory[];\n  /** Whether to render each category's items as cards or links. Defaults to `'links'`. */\n  displayMode?: 'card' | 'links';\n  /** Not applicable for categorized mode — the outer card heading is always shown. */\n  showHeader?: never;\n}\n\ninterface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {\n  /** Heading displayed above the shortcuts. */\n  heading?: string;\n  /** Ref for the Shortcuts 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}\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/package.json

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