@pega/cosmos-react-work 10.0.0-build.1.11 → 10.0.0-build.1.13

package/lib/components/Details/Details.styles.js

@@ -91,7 +91,7 @@ export const StyledInlineFieldValueItem = styled.div `
   }
 `;
 export const StyledDetailsList = styled(StyledFieldValueList)(({ stacked, labelLength, variant, theme }) => {
-    const { base: { spacing, palette, 'content-width': { md } }, components: { details: { 'field-label': fieldLabelPosition }, 'field-value-list': { inline: { detached } } } } = theme;
+    const { base: { spacing, palette, 'content-width': { md } }, components: { details: { 'field-label': fieldLabelPosition }, 'field-value-list': { inline: { detached, 'border-style': borderStyle } } } } = theme;
     const { inFieldGroup } = useContext(DetailsContext);
     const labelTop = (stacked || fieldLabelPosition === 'stacked') && variant !== 'value-comparison';
     const isValueComparison = variant === 'value-comparison';
@@ -128,7 +128,7 @@ export const StyledDetailsList = styled(StyledFieldValueList)(({ stacked, labelL
         css `
         padding-block: calc(0.5 * ${spacing});
         &:not(:last-child) {
-          border-bottom: 0.0625rem dashed ${palette['border-line']};
+          border-bottom: 0.0625rem ${borderStyle} ${palette['border-line']};
         }
       `}
 
@@ -145,7 +145,7 @@ export const StyledDetailsList = styled(StyledFieldValueList)(({ stacked, labelL
         css `
         padding-block: calc(0.5 * ${spacing});
         &:not(:last-child) {
-          border-bottom: 0.0625rem dashed ${palette['border-line']};
+          border-bottom: 0.0625rem ${borderStyle} ${palette['border-line']};
         }
       `}
     }
@@ -219,7 +219,7 @@ const spacingTop = (spacing) => {
   `;
 };
 export const StyledDetails = styled.div(({ variant, columnCount, theme }) => {
-    const { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'border-line': borderColor } }, components: { 'form-control': { 'border-width': borderWidth }, button: { 'border-radius': buttonBorderRadius }, 'field-value-list': { inline: { detached } } } } = theme;
+    const { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'border-line': borderColor } }, components: { 'form-control': { 'border-width': borderWidth }, button: { 'border-radius': buttonBorderRadius }, 'field-value-list': { inline: { detached, 'border-style': borderStyle } } } } = theme;
     return css `
     &:not(:first-child) {
       ${spacingTop(spacing)}
@@ -266,7 +266,7 @@ export const StyledDetails = styled.div(({ variant, columnCount, theme }) => {
         css `
       & + ${StyledDetailsList} {
         margin-block-start: 0;
-        border-block-start: 0.0625rem dashed ${theme.base.palette['border-line']};
+        border-block-start: 0.0625rem ${borderStyle} ${theme.base.palette['border-line']};
       }
     `};
   `;

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

@@ -1 +1 @@
-{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { useContext } from 'react';\nimport { transparentize } from 'polished';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledFieldValueList,\n  StyledIcon,\n  useDirection,\n  StyledButtonLink,\n  Text\n} from '@pega/cosmos-react-core';\nimport type {\n  StyledFieldValueListProps,\n  FontSize,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nimport type { DetailsProps } from './Details';\nimport DetailsContext from './DetailsContext';\n\ninterface StyledDetailsListProps extends StyledFieldValueListProps {\n  /** Whether individual list items all have labels stacks on top */\n  stacked?: boolean;\n  /** The character length applied to all list labels */\n  labelLength?: number;\n  theme: DefaultTheme;\n}\n\ninterface StyledDetailColumnsProps {\n  /**\n   * Number of columns in the list\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /**\n   * Arrangement of columns\n   */\n  arrangement?: DetailsProps['arrangement'];\n  /**\n   * Style variations\n   */\n  variant?: DetailsProps['variant'];\n  theme: DefaultTheme;\n}\n\ntype StyledDetailsListPropsWithDefaults = PropsWithDefaults<StyledDetailsListProps>;\n\nconst rowGapMultiplier = 1;\nexport const columnGapMultiplier = 5.5;\nexport const oneColumnDetailsColumnWidth = '100ch';\nexport const multiColumnDetailsColumnWidth = '80ch';\n\nexport const StyledNameText = styled(Text)`\n  word-break: break-word;\n`;\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n  const {\n    base: { spacing, animation, palette }\n  } = theme;\n  const { rtl } = useDirection();\n  const {\n    components: {\n      'field-value-list': {\n        inline: { detached }\n      }\n    }\n  } = theme;\n  return css`\n    width: 100%;\n    grid-column: 1 / -1;\n    margin-block-end: calc(${rowGapMultiplier} * ${spacing});\n    ${detached &&\n    css`\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      padding-bottom: calc(0.5 * ${spacing});\n    `}\n\n    ${StyledButtonLink} ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    ${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    ${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = styled.div(({ theme }) => {\n  const {\n    base: {\n      spacing,\n      'content-width': { xl }\n    }\n  } = theme;\n\n  return css`\n    max-width: ${xl};\n    margin-block-end: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledDetailBanner = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    margin-block-end: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledDetailBanner.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumn = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(${rowGapMultiplier} * ${spacing});\n    width: 100%;\n  `;\n});\n\nStyledDetailColumn.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n  const {\n    base: { spacing, palette }\n  } = theme;\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    max-width: calc(${multiColumnDetailsColumnWidth} * 3 + ${columnGapMultiplier} * ${spacing} * 2);\n    padding-block-end: calc(1.5 * ${spacing});\n\n    dd {\n      font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n      font-weight: ${theme.components.text.h1['font-weight']};\n    }\n\n    + hr {\n      border-top: unset;\n      border-radius: unset;\n      border-style: unset;\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      margin-block-end: calc(1.5 * ${spacing});\n    }\n  `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledInlineFieldValueItem = styled.div`\n  > * {\n    min-width: 0;\n  }\n`;\n\nexport const StyledDetailsList = styled(StyledFieldValueList)<StyledDetailsListPropsWithDefaults>(({\n  stacked,\n  labelLength,\n  variant,\n  theme\n}) => {\n  const {\n    base: {\n      spacing,\n      palette,\n      'content-width': { md }\n    },\n    components: {\n      details: { 'field-label': fieldLabelPosition },\n      'field-value-list': {\n        inline: { detached }\n      }\n    }\n  } = theme;\n\n  const { inFieldGroup } = useContext(DetailsContext);\n  const labelTop = (stacked || fieldLabelPosition === 'stacked') && variant !== 'value-comparison';\n  const isValueComparison = variant === 'value-comparison';\n  const fieldValueGapMultiplier = 2;\n\n  return css`\n    /* Field Grid Styles */\n    display: flex;\n    flex-direction: column;\n    row-gap: ${detached ? 0 : `calc(${rowGapMultiplier} * ${spacing})`};\n    width: 100%;\n    max-width: ${oneColumnDetailsColumnWidth};\n    height: fit-content;\n    container-type: inline-size;\n    container-name: details-list;\n\n    ${StyledFieldValue} {\n      word-break: break-word;\n      overflow: auto;\n\n      /* Negative margin to account for overflow clipping of focus indicator */\n      padding: 0.3rem;\n      margin: -0.3rem;\n    }\n\n    ${StyledInlineFieldValueItem}, ${StyledStackedFieldValue} {\n      width: 100%;\n    }\n\n    ${StyledInlineFieldValueItem} {\n      grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n      grid-template-rows: max-content;\n      column-gap: calc(${fieldValueGapMultiplier} * ${spacing});\n      ${detached &&\n      css`\n        padding-block: calc(0.5 * ${spacing});\n        &:not(:last-child) {\n          border-bottom: 0.0625rem dashed ${palette['border-line']};\n        }\n      `}\n\n      ${inFieldGroup &&\n      css`\n        grid-template-columns:\n          minmax(calc(14ch - ${spacing}), calc(${labelLength}ch - ${spacing}))\n          minmax(14ch, 1fr);\n      `};\n    }\n\n    ${StyledStackedFieldValue} {\n      ${detached &&\n      css`\n        padding-block: calc(0.5 * ${spacing});\n        &:not(:last-child) {\n          border-bottom: 0.0625rem dashed ${palette['border-line']};\n        }\n      `}\n    }\n\n    /* Stacked Label Styles */\n    ${labelTop &&\n    css`\n      grid-template-columns: minmax(0, 1fr);\n      row-gap: 0;\n\n      dt {\n        max-width: 100%;\n      }\n\n      ${!isValueComparison &&\n      css`\n        ${StyledStackedFieldValue}:not(:first-child) {\n          margin-block-start: calc(${rowGapMultiplier} * ${spacing});\n        }\n      `}\n    `}\n\n    /* Value Comparison Styles */\n      ${isValueComparison &&\n    css`\n      display: grid;\n      grid-template-columns: auto auto;\n      column-gap: 0;\n      row-gap: calc(0.5 * ${spacing});\n\n      > dd {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n      }\n    `}\n\n      /* Responsive behavior */\n      ${!labelTop &&\n    !isValueComparison &&\n    css`\n      @container details-list (width < ${md}) {\n        ${StyledInlineFieldValueItem} {\n          grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);\n\n          ${inFieldGroup &&\n          css`\n            grid-template-columns:\n              minmax(0, calc(${labelLength}ch - ${spacing}))\n              minmax(calc(50% + 0.5 * ${spacing}), 1fr);\n          `}\n        }\n\n        dd {\n          min-width: 50%;\n        }\n      }\n    `}\n  `;\n});\n\nStyledDetailsList.defaultProps = defaultThemeProp;\n\nconst spacingTop = (spacing: string) => {\n  return css`\n    > ${StyledFieldValueGroupLabel} {\n      margin-block-start: calc((1.5 * ${rowGapMultiplier}) * ${spacing});\n    }\n\n    > ${StyledDetailDescription}:first-child {\n      margin-block-start: calc(1.5 * ${spacing});\n    }\n  `;\n};\n\nexport const StyledDetails = styled.div<{\n  variant?: DetailsProps['variant'];\n  columnCount?: number;\n}>(({ variant, columnCount, theme }) => {\n  const {\n    base: {\n      spacing,\n      'border-radius': baseBorderRadius,\n      palette: { 'border-line': borderColor }\n    },\n    components: {\n      'form-control': { 'border-width': borderWidth },\n      button: { 'border-radius': buttonBorderRadius },\n      'field-value-list': {\n        inline: { detached }\n      }\n    }\n  } = theme;\n\n  return css`\n    &:not(:first-child) {\n      ${spacingTop(spacing)}\n    }\n\n    ${variant === 'field-group' &&\n    css`\n      & + ${StyledDetailsList} {\n        margin-block-start: calc(1.5 * ${spacing});\n      }\n\n      ${columnCount === 1 &&\n      css`\n        position: relative;\n        padding-inline-start: ${spacing};\n\n        ${detached &&\n        css`\n          padding-inline-start: calc(1.25 * ${spacing});\n        `}\n\n        &::before {\n          content: '';\n          position: absolute;\n          inset-block-start: calc(-1 * ${spacing});\n          inset-block-end: 0;\n          inset-inline-start: 0;\n          width: ${borderWidth};\n          background: ${borderColor};\n\n          ${detached &&\n          css`\n            inset-block-start: 0;\n            width: 0.25rem;\n            background: ${transparentize(0.67, borderColor)};\n            border-radius: calc(${buttonBorderRadius} * ${baseBorderRadius});\n          `}\n        }\n      `}\n    `}\n\n    ${!variant &&\n    detached &&\n    css`\n      & + ${StyledDetailsList} {\n        margin-block-start: 0;\n        border-block-start: 0.0625rem dashed ${theme.base.palette['border-line']};\n      }\n    `};\n  `;\n});\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumns = styled.div<StyledDetailColumnsProps>(\n  ({ theme, arrangement, columnCount = 1 }) => {\n    const {\n      base: { spacing }\n    } = theme;\n\n    return css`\n      width: 100%;\n\n      ${columnCount === 2 &&\n      !arrangement &&\n      css`\n        flex-wrap: wrap;\n      `}\n\n      ${columnCount === 1 &&\n      css`\n        flex-direction: column;\n        row-gap: calc(${rowGapMultiplier} * ${spacing});\n      `};\n\n      /* Column Widths */\n      > ${StyledDetailColumn} {\n        overflow: hidden;\n\n        /* Negative margin to account for overflow clipping of focus indicator */\n        padding: 0.3rem;\n        margin: -0.3rem;\n\n        ${columnCount === 3 &&\n        css`\n          width: ${multiColumnDetailsColumnWidth};\n          max-width: calc(33.33% - (${columnGapMultiplier} * ${spacing} * 2) / 3);\n        `}\n\n        ${columnCount === 2 &&\n        css`\n          width: calc(50% - (${columnGapMultiplier} * ${spacing}) / 2);\n          max-width: unset;\n\n          &:nth-child(3) > ${StyledDetails}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n\n        ${columnCount !== 1 &&\n        css`\n          ${arrangement === 'narrowWide' &&\n          css`\n            &:nth-child(2) {\n              width: calc(\n                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n              );\n              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n            }\n          `}\n\n          ${arrangement === 'wideNarrow' &&\n          css`\n            &:nth-child(1) {\n              width: calc(\n                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n              );\n              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n            }\n          `}\n        `}\n\n        ${columnCount === 1 &&\n        css`\n          width: 100%;\n          max-width: 100%;\n\n          &:not(:first-child) > ${StyledDetails}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n      }\n    `;\n  }\n);\n\nStyledDetailColumns.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { useContext } from 'react';\nimport { transparentize } from 'polished';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledFieldValueList,\n  StyledIcon,\n  useDirection,\n  StyledButtonLink,\n  Text\n} from '@pega/cosmos-react-core';\nimport type {\n  StyledFieldValueListProps,\n  FontSize,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nimport type { DetailsProps } from './Details';\nimport DetailsContext from './DetailsContext';\n\ninterface StyledDetailsListProps extends StyledFieldValueListProps {\n  /** Whether individual list items all have labels stacks on top */\n  stacked?: boolean;\n  /** The character length applied to all list labels */\n  labelLength?: number;\n  theme: DefaultTheme;\n}\n\ninterface StyledDetailColumnsProps {\n  /**\n   * Number of columns in the list\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /**\n   * Arrangement of columns\n   */\n  arrangement?: DetailsProps['arrangement'];\n  /**\n   * Style variations\n   */\n  variant?: DetailsProps['variant'];\n  theme: DefaultTheme;\n}\n\ntype StyledDetailsListPropsWithDefaults = PropsWithDefaults<StyledDetailsListProps>;\n\nconst rowGapMultiplier = 1;\nexport const columnGapMultiplier = 5.5;\nexport const oneColumnDetailsColumnWidth = '100ch';\nexport const multiColumnDetailsColumnWidth = '80ch';\n\nexport const StyledNameText = styled(Text)`\n  word-break: break-word;\n`;\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n  const {\n    base: { spacing, animation, palette }\n  } = theme;\n  const { rtl } = useDirection();\n  const {\n    components: {\n      'field-value-list': {\n        inline: { detached }\n      }\n    }\n  } = theme;\n  return css`\n    width: 100%;\n    grid-column: 1 / -1;\n    margin-block-end: calc(${rowGapMultiplier} * ${spacing});\n    ${detached &&\n    css`\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      padding-bottom: calc(0.5 * ${spacing});\n    `}\n\n    ${StyledButtonLink} ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    ${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    ${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = styled.div(({ theme }) => {\n  const {\n    base: {\n      spacing,\n      'content-width': { xl }\n    }\n  } = theme;\n\n  return css`\n    max-width: ${xl};\n    margin-block-end: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledDetailBanner = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    margin-block-end: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledDetailBanner.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumn = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(${rowGapMultiplier} * ${spacing});\n    width: 100%;\n  `;\n});\n\nStyledDetailColumn.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n  const {\n    base: { spacing, palette }\n  } = theme;\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    max-width: calc(${multiColumnDetailsColumnWidth} * 3 + ${columnGapMultiplier} * ${spacing} * 2);\n    padding-block-end: calc(1.5 * ${spacing});\n\n    dd {\n      font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n      font-weight: ${theme.components.text.h1['font-weight']};\n    }\n\n    + hr {\n      border-top: unset;\n      border-radius: unset;\n      border-style: unset;\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      margin-block-end: calc(1.5 * ${spacing});\n    }\n  `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledInlineFieldValueItem = styled.div`\n  > * {\n    min-width: 0;\n  }\n`;\n\nexport const StyledDetailsList = styled(StyledFieldValueList)<StyledDetailsListPropsWithDefaults>(({\n  stacked,\n  labelLength,\n  variant,\n  theme\n}) => {\n  const {\n    base: {\n      spacing,\n      palette,\n      'content-width': { md }\n    },\n    components: {\n      details: { 'field-label': fieldLabelPosition },\n      'field-value-list': {\n        inline: { detached, 'border-style': borderStyle }\n      }\n    }\n  } = theme;\n\n  const { inFieldGroup } = useContext(DetailsContext);\n  const labelTop = (stacked || fieldLabelPosition === 'stacked') && variant !== 'value-comparison';\n  const isValueComparison = variant === 'value-comparison';\n  const fieldValueGapMultiplier = 2;\n\n  return css`\n    /* Field Grid Styles */\n    display: flex;\n    flex-direction: column;\n    row-gap: ${detached ? 0 : `calc(${rowGapMultiplier} * ${spacing})`};\n    width: 100%;\n    max-width: ${oneColumnDetailsColumnWidth};\n    height: fit-content;\n    container-type: inline-size;\n    container-name: details-list;\n\n    ${StyledFieldValue} {\n      word-break: break-word;\n      overflow: auto;\n\n      /* Negative margin to account for overflow clipping of focus indicator */\n      padding: 0.3rem;\n      margin: -0.3rem;\n    }\n\n    ${StyledInlineFieldValueItem}, ${StyledStackedFieldValue} {\n      width: 100%;\n    }\n\n    ${StyledInlineFieldValueItem} {\n      grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n      grid-template-rows: max-content;\n      column-gap: calc(${fieldValueGapMultiplier} * ${spacing});\n      ${detached &&\n      css`\n        padding-block: calc(0.5 * ${spacing});\n        &:not(:last-child) {\n          border-bottom: 0.0625rem ${borderStyle} ${palette['border-line']};\n        }\n      `}\n\n      ${inFieldGroup &&\n      css`\n        grid-template-columns:\n          minmax(calc(14ch - ${spacing}), calc(${labelLength}ch - ${spacing}))\n          minmax(14ch, 1fr);\n      `};\n    }\n\n    ${StyledStackedFieldValue} {\n      ${detached &&\n      css`\n        padding-block: calc(0.5 * ${spacing});\n        &:not(:last-child) {\n          border-bottom: 0.0625rem ${borderStyle} ${palette['border-line']};\n        }\n      `}\n    }\n\n    /* Stacked Label Styles */\n    ${labelTop &&\n    css`\n      grid-template-columns: minmax(0, 1fr);\n      row-gap: 0;\n\n      dt {\n        max-width: 100%;\n      }\n\n      ${!isValueComparison &&\n      css`\n        ${StyledStackedFieldValue}:not(:first-child) {\n          margin-block-start: calc(${rowGapMultiplier} * ${spacing});\n        }\n      `}\n    `}\n\n    /* Value Comparison Styles */\n      ${isValueComparison &&\n    css`\n      display: grid;\n      grid-template-columns: auto auto;\n      column-gap: 0;\n      row-gap: calc(0.5 * ${spacing});\n\n      > dd {\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n      }\n    `}\n\n      /* Responsive behavior */\n      ${!labelTop &&\n    !isValueComparison &&\n    css`\n      @container details-list (width < ${md}) {\n        ${StyledInlineFieldValueItem} {\n          grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);\n\n          ${inFieldGroup &&\n          css`\n            grid-template-columns:\n              minmax(0, calc(${labelLength}ch - ${spacing}))\n              minmax(calc(50% + 0.5 * ${spacing}), 1fr);\n          `}\n        }\n\n        dd {\n          min-width: 50%;\n        }\n      }\n    `}\n  `;\n});\n\nStyledDetailsList.defaultProps = defaultThemeProp;\n\nconst spacingTop = (spacing: string) => {\n  return css`\n    > ${StyledFieldValueGroupLabel} {\n      margin-block-start: calc((1.5 * ${rowGapMultiplier}) * ${spacing});\n    }\n\n    > ${StyledDetailDescription}:first-child {\n      margin-block-start: calc(1.5 * ${spacing});\n    }\n  `;\n};\n\nexport const StyledDetails = styled.div<{\n  variant?: DetailsProps['variant'];\n  columnCount?: number;\n}>(({ variant, columnCount, theme }) => {\n  const {\n    base: {\n      spacing,\n      'border-radius': baseBorderRadius,\n      palette: { 'border-line': borderColor }\n    },\n    components: {\n      'form-control': { 'border-width': borderWidth },\n      button: { 'border-radius': buttonBorderRadius },\n      'field-value-list': {\n        inline: { detached, 'border-style': borderStyle }\n      }\n    }\n  } = theme;\n\n  return css`\n    &:not(:first-child) {\n      ${spacingTop(spacing)}\n    }\n\n    ${variant === 'field-group' &&\n    css`\n      & + ${StyledDetailsList} {\n        margin-block-start: calc(1.5 * ${spacing});\n      }\n\n      ${columnCount === 1 &&\n      css`\n        position: relative;\n        padding-inline-start: ${spacing};\n\n        ${detached &&\n        css`\n          padding-inline-start: calc(1.25 * ${spacing});\n        `}\n\n        &::before {\n          content: '';\n          position: absolute;\n          inset-block-start: calc(-1 * ${spacing});\n          inset-block-end: 0;\n          inset-inline-start: 0;\n          width: ${borderWidth};\n          background: ${borderColor};\n\n          ${detached &&\n          css`\n            inset-block-start: 0;\n            width: 0.25rem;\n            background: ${transparentize(0.67, borderColor)};\n            border-radius: calc(${buttonBorderRadius} * ${baseBorderRadius});\n          `}\n        }\n      `}\n    `}\n\n    ${!variant &&\n    detached &&\n    css`\n      & + ${StyledDetailsList} {\n        margin-block-start: 0;\n        border-block-start: 0.0625rem ${borderStyle} ${theme.base.palette['border-line']};\n      }\n    `};\n  `;\n});\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumns = styled.div<StyledDetailColumnsProps>(\n  ({ theme, arrangement, columnCount = 1 }) => {\n    const {\n      base: { spacing }\n    } = theme;\n\n    return css`\n      width: 100%;\n\n      ${columnCount === 2 &&\n      !arrangement &&\n      css`\n        flex-wrap: wrap;\n      `}\n\n      ${columnCount === 1 &&\n      css`\n        flex-direction: column;\n        row-gap: calc(${rowGapMultiplier} * ${spacing});\n      `};\n\n      /* Column Widths */\n      > ${StyledDetailColumn} {\n        overflow: hidden;\n\n        /* Negative margin to account for overflow clipping of focus indicator */\n        padding: 0.3rem;\n        margin: -0.3rem;\n\n        ${columnCount === 3 &&\n        css`\n          width: ${multiColumnDetailsColumnWidth};\n          max-width: calc(33.33% - (${columnGapMultiplier} * ${spacing} * 2) / 3);\n        `}\n\n        ${columnCount === 2 &&\n        css`\n          width: calc(50% - (${columnGapMultiplier} * ${spacing}) / 2);\n          max-width: unset;\n\n          &:nth-child(3) > ${StyledDetails}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n\n        ${columnCount !== 1 &&\n        css`\n          ${arrangement === 'narrowWide' &&\n          css`\n            &:nth-child(2) {\n              width: calc(\n                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n              );\n              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n            }\n          `}\n\n          ${arrangement === 'wideNarrow' &&\n          css`\n            &:nth-child(1) {\n              width: calc(\n                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n              );\n              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n            }\n          `}\n        `}\n\n        ${columnCount === 1 &&\n        css`\n          width: 100%;\n          max-width: 100%;\n\n          &:not(:first-child) > ${StyledDetails}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n      }\n    `;\n  }\n);\n\nStyledDetailColumns.defaultProps = defaultThemeProp;\n"]}

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;AAsBxD,OAAO,KAAK,EAAE,cAAc,EAAgB,MAAM,mBAAmB,CAAC;;;;AAkLtE,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;AAqBxD,OAAO,KAAK,EAAE,cAAc,EAAgB,MAAM,mBAAmB,CAAC;;;;AAyKtE,wBAA2D"}

package/lib/components/Shortcuts/Shortcuts.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, forwardRef } from 'react';
 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 { Card, CardContent, CardHeader, EmptyState, Flex, Text, VisuallyHiddenText, registerIcon, tryCatch, useArrows, 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 { StyledExternalIcon, StyledLabelRow, StyledShortcutsCard, StyledShortcutsCardButton, StyledShortcutsCardsContainer, StyledShortcutsCardsWrapper, StyledShortcutsCategoriesContainer, StyledShortcutsCategoryHeading, StyledShortcutsCardIcon, StyledText } from './Shortcuts.styles';
 import { getShortcutsTestIds } from './Shortcuts.test-ids';
 registerIcon(openNewTabIcon);
 const itemLinkProps = (item) => {
@@ -12,7 +12,7 @@ const itemLinkProps = (item) => {
     }
     return { onClick: item.onClick };
 };
-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 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(StyledText, { 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);
@@ -25,17 +25,14 @@ const Shortcuts = forwardRef(function Shortcuts({ heading, items = [], categorie
     const categoriesContainerRef = useRef(null);
     useArrows(flatListRef, { dir: 'both', cycle: true });
     useArrows(categoriesContainerRef, { dir: 'both', cycle: true });
-    const isWide = useBreakpoint('sm', {
-        breakpointRef: categories ? categoriesContainerRef : flatListRef
-    });
     const emptyState = _jsx(EmptyState, { message: t('no_items'), "data-testid": testIds.emptyState });
     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 = (_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))) }));
+        const categorySections = (_jsx(StyledShortcutsCategoriesContainer, { ref: categoriesContainerRef, 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, { 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 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))) }));
+    const cardGrid = (_jsx(StyledShortcutsCardsWrapper, { children: _jsx(StyledShortcutsCardsContainer, { ref: flatListRef, 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;

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';\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"]}
+{"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  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 = ({\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        <StyledText>{item.label}</StyledText>\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 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\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    <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} iconBackground={iconBackground} 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

@@ -1,10 +1,6 @@
-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 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 StyledShortcutsCardsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledShortcutsCardsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const StyledShortcutsCategoriesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & 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>>;
@@ -18,5 +14,6 @@ export declare const StyledShortcutsCardIcon: import("styled-components/dist/typ
     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 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>>;
 //# 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,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"}
+{"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;mBAAiC,SAAS,GAAG,QAAQ;0JAUxF,CAAC;AAIF,eAAO,MAAM,cAAc,+NAM1B,CAAC;AAIF,eAAO,MAAM,UAAU,+NAMtB,CAAC;AAIF,eAAO,MAAM,kBAAkB,kaAE9B,CAAC"}

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

@@ -1,48 +1,40 @@
 import styled, { css } from 'styled-components';
 import { mix } from 'polished';
 import { Button, defaultThemeProp, Icon, Text, tryCatch } from '@pega/cosmos-react-core';
-export const StyledShortcutsCardsContainer = styled.ul(({ theme: { base }, isSmallOrAbove, showHeader }) => {
+export const StyledShortcutsCardsWrapper = styled.div `
+  container-type: inline-size;
+`;
+export const StyledShortcutsCardsContainer = styled.ul(({ theme: { base } }) => {
     return css `
     display: grid;
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(min(calc(${base.spacing} * 30), 100%), 1fr));
     gap: ${base.spacing};
     list-style: none;
     padding: ${base.spacing} 0;
     margin: 0;
 
-    ${isSmallOrAbove &&
-        css `
+    @container (min-width: ${parseFloat(base.breakpoints.sm)}rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
       grid-auto-rows: 1fr;
-      grid-template-columns: ${showHeader
-            ? 'repeat(auto-fill, minmax(14rem, 1fr))'
-            : 'repeat(auto-fit, minmax(14rem, 14rem))'};
-      justify-content: ${showHeader ? 'start' : 'center'};
+      justify-content: start;
       align-items: stretch;
       width: 100%;
-    `}
+    }
+
+    @container (min-width: ${parseFloat(base.breakpoints.md)}rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
   `;
 });
 StyledShortcutsCardsContainer.defaultProps = defaultThemeProp;
-export const StyledShortcutsCategoriesContainer = styled.div(({ theme: { base }, isSmallOrAbove }) => {
-    return css `
-      display: grid;
-      grid-template-columns: minmax(0, 1fr);
-      gap: calc(${base.spacing} * 2);
-      width: 100%;
-
-      ${isSmallOrAbove &&
-        css `
-        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
-        align-items: start;
-      `}
-
-      ${!isSmallOrAbove &&
-        css `
-        padding-inline: calc(${base.spacing} * 0.5);
-        padding-block: ${base.spacing};
-      `}
-    `;
-});
+export const StyledShortcutsCategoriesContainer = styled.div(({ theme: { base } }) => css `
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: calc(${base.spacing} * 2);
+    width: 100%;
+    padding-block-start: ${base.spacing};
+    container-type: inline-size;
+  `);
 StyledShortcutsCategoriesContainer.defaultProps = defaultThemeProp;
 export const StyledShortcutsCategoryHeading = styled(Text)(({ theme: { base } }) => {
     return css `
@@ -66,6 +58,7 @@ export const StyledShortcutsCardButton = styled(Button)(({ theme: { base, compon
     border-radius: ${base['border-radius']};
     background: ${base.palette['primary-background']};
     padding-inline: calc(${base.spacing} * 2);
+    padding-block: calc(${base.spacing} * 1.5);
 
     &:hover {
       background: ${hoverBackgroundColor};
@@ -74,9 +67,8 @@ export const StyledShortcutsCardButton = styled(Button)(({ theme: { base, compon
     ${layoutVariant === 'stacked' &&
         css `
       flex-direction: column;
+      justify-content: center;
       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;
     `}
@@ -85,7 +77,6 @@ export const StyledShortcutsCardButton = styled(Button)(({ theme: { base, compon
         css `
       flex-direction: row;
       gap: calc(${base.spacing} * 1.5);
-      padding-block: calc(${base.spacing} * 1.5);
       text-align: start;
     `}
   `;
@@ -107,6 +98,12 @@ 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;
 `;

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 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"]}
+{"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)<{ 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 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"]}

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

@@ -1,5 +1,7 @@
 import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { StagesProps } from './Stages.types';
-declare const Stages: ForwardRefForwardPropsComponent<StagesProps>;
-export default Stages;
+declare const _default: ForwardRefForwardPropsComponent<StagesProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+};
+export default _default;
 //# sourceMappingURL=Stages.d.ts.map

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":"AAuBA,OAAO,KAAK,EAAE,+BAA+B,EAAgB,MAAM,yBAAyB,CAAC;AAG7F,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAe/D,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CAwOvD,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"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"}