@pega/cosmos-react-work 4.0.0-dev.18.4 → 4.0.0-dev.19.1

package/lib/components/CaseView/CaseView.styles.js

@@ -1,8 +1,10 @@
 import styled, { css } from 'styled-components';
 import { getContrast, hideVisually, meetsContrastGuidelines, parseToHsl, readableColor, rgba, transparentize } from 'polished';
-import { Button, calculateFontSize, CardContent, defaultThemeProp, StyledBreadcrumbs, StyledButtonLink, StyledFieldValue, StyledStackedFieldValue, StyledIcon, StyledLabel, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList, StyledLink, readableHue, Text } from '@pega/cosmos-react-core';
+import { Button, calculateFontSize, CardContent, defaultThemeProp, StyledBreadcrumbs, StyledButtonLink, StyledFieldValue, StyledStackedFieldValue, StyledIcon, StyledLabel, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList, StyledLink, readableHue, StyledCard, Text, useDirection } from '@pega/cosmos-react-core';
 import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
 import { colCountChWidth } from '@pega/cosmos-react-work/lib/components/Details/Details.styles';
+import { StyledStage, StyledStages } from '../Stages/Stages.styles';
+import { StyledTasks } from '../Tasks/Tasks';
 import { useCaseViewContext } from './CaseView.context';
 const labelChWidth = 16;
 const inlineEndButtonOffset = '0.375rem';
@@ -316,84 +318,75 @@ export const StyledCaseSummaryContainer = styled.div(({ theme }) => {
   `;
 });
 StyledCaseSummaryContainer.defaultProps = defaultThemeProp;
-export const StyledExpandCollapseButton = styled(Button)(({ theme }) => {
+export const StyledExpandCollapseButton = styled(Button)(() => {
+    return css `
+    border: none;
+
+    ${StyledIcon} {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  `;
+});
+StyledExpandCollapseButton.defaultProps = defaultThemeProp;
+export const StyledExpandCollapseSummaryButton = styled(StyledExpandCollapseButton)(({ theme }) => {
     const { summaryExpanded } = useCaseViewContext();
+    const { rtl } = useDirection();
     return css `
+    --half-compact-btn-height: calc(${theme.base['hit-area'].compact} / 2);
+    --half-btn-compact-difference: calc(
+      (${theme.base['hit-area'].mouse} - ${theme.base['hit-area'].compact}) / 2
+    );
+    --half-case-icon-compact-difference: calc(
+      ((4 * ${theme.base.spacing}) - ${theme.base['hit-area'].compact}) / 2
+    );
+    @media (pointer: coarse) {
+      --half-btn-compact-difference: calc(
+        (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2
+      );
+    }
     position: absolute;
     z-index: 1;
-    bottom: 0;
-    inset-inline-start: ${summaryExpanded ? 'calc(100% - 0.75rem)' : '0'};
-    border-radius: ${summaryExpanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};
     box-shadow: ${theme.base.shadow.low};
-    border: none;
-    opacity: 0;
 
-    &:focus {
-      opacity: 1;
-    }
+    ${summaryExpanded
+        ? css `
+          inset-block-start: calc(2 * ${theme.base.spacing} + var(--half-btn-compact-difference));
+          inset-inline-start: calc(100% - var(--half-compact-btn-height));
+        `
+        : css `
+          inset-block-end: calc(var(--half-compact-btn-height) * -1);
+          inset-inline-start: calc(
+            2 * ${theme.base.spacing} + var(--half-case-icon-compact-difference)
+          );
+        `}
 
     ${StyledIcon} {
-      width: 1.5rem;
-      height: 1.5rem;
       ${summaryExpanded
         ? css `
-            transform: rotate(0);
+            transform: rotate(${rtl ? '180deg' : '0'});
           `
         : css `
-            transform: rotate(180deg);
+            transform: rotate(-90deg);
           `}
     }
   `;
 });
-StyledExpandCollapseButton.defaultProps = defaultThemeProp;
-export const StyledCaseSummary = styled.div(({ theme }) => {
+StyledExpandCollapseSummaryButton.defaultProps = defaultThemeProp;
+export const StyledCaseSummary = styled.div(() => {
     const { summaryExpanded, aboveMD } = useCaseViewContext();
-    const { base: { spacing } } = theme;
     return css `
     position: relative;
     height: 100%;
-
     ${aboveMD &&
+        summaryExpanded &&
         css `
-      ${summaryExpanded
-            ? css `
-            width: 25rem;
-
-            &:focus-within,
-            &:hover {
-              &::after {
-                content: '';
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                inset-inline-start: 100%;
-                width: 0.75rem;
-              }
-
-              ${StyledExpandCollapseButton} {
-                opacity: 1;
-              }
-            }
-          `
-            : css `
-            width: 100%;
-
-            ${StyledExpandCollapseButton} {
-              opacity: 1;
-              transform: translateY(50%);
-              margin-inline-start: calc(2 * ${spacing});
-              border-radius: 50%;
-
-              svg {
-                transform: rotate(-90deg);
-              }
-            }
-          `}
+      width: 25rem;
     `}
   `;
 });
 export const StyledWorkArea = styled.div(({ theme }) => {
-    const { summaryExpanded, aboveMD, intelligentGuidance } = useCaseViewContext();
+    const { summaryExpanded, aboveMD, intelligentGuidance, stages, tasks } = useCaseViewContext();
     let pbeRem = 0;
     if (intelligentGuidance) {
         pbeRem = aboveMD && !summaryExpanded ? 4 : 6;
@@ -421,27 +414,81 @@ export const StyledWorkArea = styled.div(({ theme }) => {
       /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */
       padding-block-end: ${pbeRem}rem;
     `}
+
+    ${stages &&
+        tasks &&
+        css `
+      ${StyledStages} {
+        border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+
+        &,
+        > ${StyledStage}:first-child {
+          border-end-start-radius: 0;
+        }
+
+        &,
+        > ${StyledStage}:last-child {
+          border-end-end-radius: 0;
+        }
+      }
+
+      ${StyledCard}${StyledTasks} {
+        margin-block-start: calc(-2 * ${theme.base.spacing});
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+      }
+    `}
   `;
 });
 StyledWorkArea.defaultProps = defaultThemeProp;
-export const StyledUtilToggle = styled.button(({ theme }) => {
+export const StyledUtilitiesHeading = styled(Text) ``;
+export const StyledExpandCollapseUtilitiesButton = styled(StyledExpandCollapseButton)(() => {
+    const { utilitiesExpanded } = useCaseViewContext();
+    const { rtl } = useDirection();
     return css `
-    color: ${theme.base.palette['foreground-color']};
-    margin-inline: auto ${inlineEndButtonOffset};
+    /* Centers button over the utilities summary */
+    margin-inline-end: ${utilitiesExpanded && '0.625rem'};
+
+    ${StyledIcon} {
+      ${utilitiesExpanded !== rtl
+        ? css `
+            transform: rotate(180deg);
+          `
+        : css `
+            transform: rotate(0);
+          `}
+    }
   `;
 });
-StyledUtilToggle.defaultProps = defaultThemeProp;
+StyledExpandCollapseUtilitiesButton.defaultProps = defaultThemeProp;
 export const StyledUtilities = styled.div(({ theme }) => {
-    const { utilitiesExpanded, aboveLG } = useCaseViewContext();
+    const { utilitiesExpanded, aboveLG, aboveMD } = useCaseViewContext();
     return css `
     height: max-content;
     margin-block: calc(2 * ${theme.base.spacing});
 
+    /* If utilities are in an expanded drawer. */
+    ${utilitiesExpanded &&
+        aboveMD &&
+        !aboveLG &&
+        css `
+      /* Maintains the column width to avoid page content shift. */
+      visibility: hidden;
+    `}
+
     ${aboveLG &&
         utilitiesExpanded &&
         css `
       width: 25rem;
     `}
+
+
+    /* Selects the h2 in the utilities column, not the drawer. */
+    ${StyledUtilitiesHeading} {
+      /* Hide the utilities h2 under certain conditions.*/
+      ${((aboveMD && !utilitiesExpanded) || (aboveMD && utilitiesExpanded && !aboveLG)) &&
+        hideVisually()}
+    }
   `;
 });
 StyledUtilities.defaultProps = defaultThemeProp;

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\nimport {\n  getContrast,\n  hideVisually,\n  meetsContrastGuidelines,\n  parseToHsl,\n  readableColor,\n  rgba,\n  transparentize\n} from 'polished';\n\nimport {\n  Button,\n  calculateFontSize,\n  CardContent,\n  defaultThemeProp,\n  StyledBreadcrumbs,\n  StyledButtonLink,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledIcon,\n  StyledLabel,\n  StyledPopover,\n  StyledText,\n  StyledTooltip,\n  tryCatch,\n  FontSize,\n  FieldValueList,\n  StyledLink,\n  readableHue,\n  Text\n} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\nimport { colCountChWidth } from '@pega/cosmos-react-work/lib/components/Details/Details.styles';\n\nimport { useCaseViewContext } from './CaseView.context';\n\nconst labelChWidth = 16;\nconst inlineEndButtonOffset = '0.375rem';\n\nexport const StyledCaseSummaryFields = styled.div``;\n\nStyledCaseSummaryFields.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryPrimaryList = styled(FieldValueList)<{ wrapped?: boolean }>(\n  ({ theme, wrapped }) => {\n    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n    return css`\n      ${wrapped\n        ? css`\n            grid-template-columns: minmax(0, 1fr);\n          `\n        : css`\n            grid-template-columns: ${labelChWidth}ch auto;\n          `}\n\n      ${StyledFieldValue} {\n        font-size: ${fontSizes[theme.components.text.h1['font-size'] as FontSize]};\n        font-weight: ${theme.components.text.h1['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledSummaryPrimaryList.defaultProps = defaultThemeProp;\n\nexport const StyledSummarySecondaryList = styled(FieldValueList)(() => {\n  return css`\n    ${StyledStackedFieldValue} {\n      grid-column: 1 / -1;\n    }\n  `;\n});\n\nexport const StyledSummaryTabContent = styled(CardContent)(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n  const containerWidthCh = colCountChWidth[1].containerWidth;\n  const containerWidthMinusLabel = `${containerWidthCh - labelChWidth}ch`;\n\n  return css`\n    ${StyledSummarySecondaryList} {\n      > ${StyledStackedFieldValue} {\n        max-width: ${containerWidthCh}ch;\n      }\n\n      > ${StyledFieldValue} {\n        max-width: calc(${containerWidthMinusLabel} - 2 * ${spacing});\n      }\n    }\n  `;\n});\n\nStyledSummaryTabContent.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeader = styled.header(({ theme }) => {\n  const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));\n\n  return css`\n    background-color: ${theme.base.palette['brand-primary']};\n    color: ${color};\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    position: relative;\n\n    h1:focus-visible {\n      outline: transparent;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    ${StyledMenu} {\n      color: ${theme.base.palette['foreground-color']};\n      z-index: ${theme.base['z-index'].popover + 1};\n    }\n  `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCaseIconWrap = styled.div(({ theme }) => {\n  const spacing = theme.base.spacing;\n  const borderRadius = theme.base['border-radius'];\n  const backgroundColor = tryCatch(() => {\n    const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n    return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n  });\n\n  return css`\n    background: ${backgroundColor};\n    width: calc(4 * ${spacing});\n    height: calc(4 * ${spacing});\n    border-radius: calc(${borderRadius} / 2);\n    margin-block-start: ${spacing};\n\n    ${StyledIcon} {\n      font-size: calc(2 * ${spacing});\n      margin: auto;\n    }\n  `;\n});\n\nStyledCaseIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledFollowIconWrap = styled.label`\n  font-size: 1.25rem;\n  input {\n    ${hideVisually}\n  }\n\n  input:focus + svg {\n    box-shadow: ${({ theme }) => theme.base.shadow.focus};\n  }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledSubheading = styled.p``;\n\nStyledSubheading.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderActions = styled.div<{ offsetEnd: boolean }>(({ offsetEnd, theme }) => {\n  return css`\n    margin-inline-start: auto;\n    padding-block: ${theme.base.spacing};\n    padding-inline-start: calc(2 * ${theme.base.spacing});\n\n    ${offsetEnd &&\n    css`\n      padding-inline-end: ${inlineEndButtonOffset};\n    `};\n  `;\n});\n\nStyledHeaderActions.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeaderText = styled.hgroup(({ theme }) => {\n  const color = readableColor(theme.base.palette['brand-primary']);\n  const transparentColor = tryCatch(() => transparentize(0.1, color));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  const idStyle = css`\n    color: ${transparentColor};\n    font-size: ${fontSize.s};\n    font-weight: normal;\n  `;\n\n  return css`\n    word-break: break-word;\n\n    ${StyledSubheading} {\n      ${idStyle}\n    }\n\n    ${StyledBreadcrumbs} {\n      > a,\n      > span,\n      > button,\n      > svg {\n        ${idStyle}\n      }\n\n      > a,\n      > button {\n        &:focus {\n          box-shadow: ${theme.base.shadow.focus};\n        }\n      }\n\n      ${StyledPopover}:not(${StyledTooltip}) {\n        color: ${theme.base.palette['foreground-color']};\n      }\n    }\n\n    > ${StyledText} > ${StyledLink} {\n      color: ${color};\n    }\n\n    + ${StyledHeaderActions} {\n      padding-inline-start: 0;\n    }\n  `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderBreadcrumbBlock = styled.div<{ breadcrumbWidth?: number }>(\n  ({ breadcrumbWidth }) => {\n    return css`\n      width: ${breadcrumbWidth ? `${breadcrumbWidth}px` : '100%'};\n      max-width: 100%;\n    `;\n  }\n);\n\nexport const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': primary, interactive }\n    }\n  } = theme;\n\n  const interactiveUsable = getContrast(primary, interactive) >= 4.5;\n  const color = interactiveUsable ? interactive : readableColor(primary);\n  let hoverBackground = rgba(color, 0.15);\n\n  if (interactiveUsable) {\n    hoverBackground = readableHue(hoverBackground, color);\n  }\n\n  return css`\n    --button-background-color: ${primary};\n    color: ${color};\n    background-color: ${primary};\n    border-color: ${color};\n\n    @media (hover: hover) {\n      &:hover {\n        --button-background-color: ${hoverBackground};\n        color: ${color};\n        background-color: ${hoverBackground};\n        border-color: ${color};\n      }\n    }\n  `;\n});\n\nStyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderSummaryBlock = styled.div<{ hasItems: boolean }>(({ hasItems, theme }) => {\n  const {\n    base: {\n      spacing,\n      palette: { 'brand-primary': primary }\n    }\n  } = theme;\n\n  const color = readableColor(primary);\n  const transparentColor = tryCatch(() => transparentize(0.5, color));\n\n  return css`\n    ${hasItems &&\n    css`\n      border-inline-start: 0.0625rem solid ${transparentColor};\n    `}\n\n    ${StyledStackedFieldValue}:first-child {\n      margin-inline-start: calc(2 * ${spacing});\n    }\n  `;\n});\n\nStyledHeaderSummaryBlock.defaultProps = defaultThemeProp;\n\nconst popoverColorReset = (theme: DefaultTheme) => {\n  const {\n    base: {\n      palette: { interactive, light, 'foreground-color': baseForeground }\n    }\n  } = theme;\n\n  return css`\n    ${StyledPopover}:not(${StyledTooltip}) {\n      color: ${baseForeground};\n\n      ${StyledButtonLink},\n      ${StyledLink} {\n        color: ${interactive};\n        text-decoration: none;\n\n        &:hover,\n        &:active {\n          text-decoration: underline;\n        }\n\n        &:focus {\n          box-shadow: inset 0 0 0 0.0625rem ${light}, 0 0 0.125rem 0.0625rem ${interactive};\n        }\n      }\n    }\n  `;\n};\n\nexport const StyledHeaderSummary = styled.dl(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': primary, interactive }\n    }\n  } = theme;\n\n  const interactiveUsable = meetsContrastGuidelines(primary, interactive).AA;\n  const color = readableColor(primary);\n  const transparentColor = tryCatch(() => transparentize(0.1, color));\n\n  return css`\n    max-width: 100%;\n    min-width: 0;\n\n    > ${StyledStackedFieldValue} {\n      > ${StyledLabel} {\n        color: ${transparentColor};\n        white-space: nowrap;\n      }\n\n      > ${StyledFieldValue} {\n        color: ${color};\n        white-space: nowrap;\n      }\n\n      ${StyledButtonLink},\n      ${StyledLink} {\n        &:focus-visible {\n          box-shadow: inset 0 0 0 0.0625rem ${color};\n        }\n\n        ${!interactiveUsable &&\n        css`\n          color: ${color};\n          text-decoration: underline;\n        `}\n      }\n\n      ${popoverColorReset(theme)}\n    }\n  `;\n});\n\nStyledHeaderSummary.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderSummaryValue = styled(StyledFieldValue)(\n  ({ bold, truncate, theme }: { bold?: boolean; truncate?: boolean; theme: DefaultTheme }) => {\n    const {\n      base: {\n        'content-width': { xs }\n      },\n      components: {\n        text: {\n          h1: { 'font-weight': h1Weight }\n        }\n      }\n    } = theme;\n\n    return css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      ${truncate &&\n      css`\n        max-width: ${xs};\n      `}\n\n      ${bold &&\n      css`\n        font-weight: ${h1Weight};\n      `}\n\n      /*\n       * :not([hidden]) necessary to prevent hidden span with preview a11y instructions from\n       * factoring into scrollWidth of element when determining truncation.\n       */\n      > :not([hidden]) {\n        display: inline;\n      }\n    `;\n  }\n);\n\nStyledHeaderSummaryValue.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryInfo = styled.div(() => {\n  const { intelligentGuidance } = useCaseViewContext();\n\n  return css`\n    overflow: auto;\n    flex: 1;\n    ${intelligentGuidance &&\n    css`\n      /* Accounts for collapsed intelligentGuidance list covering summary panel content when fully scrolled. */\n      padding-block-end: 4rem;\n    `}\n  `;\n});\n\nStyledCaseSummaryInfo.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryContainer = styled.div(({ theme }) => {\n  return css`\n    padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n  `;\n});\n\nStyledCaseSummaryContainer.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseButton = styled(Button)(({ theme }) => {\n  const { summaryExpanded } = useCaseViewContext();\n\n  return css`\n    position: absolute;\n    z-index: 1;\n    bottom: 0;\n    inset-inline-start: ${summaryExpanded ? 'calc(100% - 0.75rem)' : '0'};\n    border-radius: ${summaryExpanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};\n    box-shadow: ${theme.base.shadow.low};\n    border: none;\n    opacity: 0;\n\n    &:focus {\n      opacity: 1;\n    }\n\n    ${StyledIcon} {\n      width: 1.5rem;\n      height: 1.5rem;\n      ${summaryExpanded\n        ? css`\n            transform: rotate(0);\n          `\n        : css`\n            transform: rotate(180deg);\n          `}\n    }\n  `;\n});\n\nStyledExpandCollapseButton.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummary = styled.div(({ theme }) => {\n  const { summaryExpanded, aboveMD } = useCaseViewContext();\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    position: relative;\n    height: 100%;\n\n    ${aboveMD &&\n    css`\n      ${summaryExpanded\n        ? css`\n            width: 25rem;\n\n            &:focus-within,\n            &:hover {\n              &::after {\n                content: '';\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                inset-inline-start: 100%;\n                width: 0.75rem;\n              }\n\n              ${StyledExpandCollapseButton} {\n                opacity: 1;\n              }\n            }\n          `\n        : css`\n            width: 100%;\n\n            ${StyledExpandCollapseButton} {\n              opacity: 1;\n              transform: translateY(50%);\n              margin-inline-start: calc(2 * ${spacing});\n              border-radius: 50%;\n\n              svg {\n                transform: rotate(-90deg);\n              }\n            }\n          `}\n    `}\n  `;\n});\n\nexport const StyledWorkArea = styled.div(({ theme }) => {\n  const { summaryExpanded, aboveMD, intelligentGuidance } = useCaseViewContext();\n  let pbeRem = 0;\n\n  if (intelligentGuidance) {\n    pbeRem = aboveMD && !summaryExpanded ? 4 : 6;\n  }\n\n  return css`\n    grid-area: work-area;\n    padding: calc(2 * ${theme.base.spacing});\n\n    ${aboveMD &&\n    css`\n      padding: calc(2 * ${theme.base.spacing}) 0;\n\n      /* This is required to make scrollStick work. */\n      height: max-content;\n\n      ${!summaryExpanded &&\n      css`\n        margin-inline-start: calc(2 * ${theme.base.spacing});\n      `}\n    `}\n\n    /* Order of style here is necessary for overriding styles above. */\n    ${pbeRem > 0 &&\n    css`\n      /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */\n      padding-block-end: ${pbeRem}rem;\n    `}\n  `;\n});\n\nStyledWorkArea.defaultProps = defaultThemeProp;\n\nexport const StyledUtilToggle = styled.button(({ theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    margin-inline: auto ${inlineEndButtonOffset};\n  `;\n});\n\nStyledUtilToggle.defaultProps = defaultThemeProp;\n\nexport const StyledUtilities = styled.div(({ theme }) => {\n  const { utilitiesExpanded, aboveLG } = useCaseViewContext();\n\n  return css`\n    height: max-content;\n    margin-block: calc(2 * ${theme.base.spacing});\n\n    ${aboveLG &&\n    utilitiesExpanded &&\n    css`\n      width: 25rem;\n    `}\n  `;\n});\n\nStyledUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledSummary = styled.div(({ theme }) => {\n  const { summaryExpanded, aboveMD } = useCaseViewContext();\n\n  return css`\n    top: ${summaryExpanded ? 'var(--top-offset)' : 'var(--appshell-offset, 0)'};\n    width: 100%;\n    background-color: ${theme.base.palette['primary-background']};\n    z-index: ${theme.base['z-index'].popover};\n\n    ${aboveMD &&\n    summaryExpanded &&\n    css`\n      height: var(--case-view-height);\n    `}\n\n    ${aboveMD\n      ? css`\n          position: sticky;\n        `\n      : css`\n          @media (min-height: ${theme.base.breakpoints.sm}) {\n            position: sticky;\n          }\n        `}\n  `;\n});\n\nStyledSummary.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div(({ theme }) => {\n  return css`\n    min-width: 21.875rem;\n    max-width: 31.25rem;\n    width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n    background-color: ${theme.base.palette['primary-background']};\n    height: var(--case-view-height);\n    top: var(--top-offset);\n    z-index: ${theme.base['z-index'].drawer - 1};\n  `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['app-background']};\n    padding: calc(2 * ${theme.base.spacing});\n    height: 100%;\n    overflow: auto;\n  `;\n});\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div(({ theme }) => {\n  return css`\n    min-width: ${theme.base['content-width'].sm};\n    max-width: ${theme.base['content-width'].md};\n    overflow: auto;\n    position: sticky;\n    z-index: 1;\n    height: var(--case-view-height);\n    top: var(--top-offset);\n  `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n  position: sticky;\n  top: 0;\n`;\n\nexport const StyledCaseView = styled.div(({ theme }) => {\n  const { aboveMD } = useCaseViewContext();\n\n  return css`\n    --top-offset: calc(var(--appshell-offset, 0rem) + var(--summary-height));\n    --case-view-height: calc(100vh - var(--top-offset));\n    position: relative;\n    min-height: var(--case-view-height);\n    background-color: ${theme.base.palette['app-background']};\n\n    ${aboveMD &&\n    css`\n      ${StyledUtilities}:last-child {\n        margin-inline-end: calc(2 * ${theme.base.spacing});\n      }\n    `}\n  `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledUtilitiesHeader = styled(Text)`\n  align-self: center;\n\n  &:not(:focus) {\n    ${hideVisually}\n  }\n`;\n\nStyledUtilitiesHeader.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\nimport {\n  getContrast,\n  hideVisually,\n  meetsContrastGuidelines,\n  parseToHsl,\n  readableColor,\n  rgba,\n  transparentize\n} from 'polished';\n\nimport {\n  Button,\n  calculateFontSize,\n  CardContent,\n  defaultThemeProp,\n  StyledBreadcrumbs,\n  StyledButtonLink,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledIcon,\n  StyledLabel,\n  StyledPopover,\n  StyledText,\n  StyledTooltip,\n  tryCatch,\n  FontSize,\n  FieldValueList,\n  StyledLink,\n  readableHue,\n  StyledCard,\n  Text,\n  useDirection\n} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\nimport { colCountChWidth } from '@pega/cosmos-react-work/lib/components/Details/Details.styles';\n\nimport { StyledStage, StyledStages } from '../Stages/Stages.styles';\nimport { StyledTasks } from '../Tasks/Tasks';\n\nimport { useCaseViewContext } from './CaseView.context';\n\nconst labelChWidth = 16;\nconst inlineEndButtonOffset = '0.375rem';\n\nexport const StyledCaseSummaryFields = styled.div``;\n\nStyledCaseSummaryFields.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryPrimaryList = styled(FieldValueList)<{ wrapped?: boolean }>(\n  ({ theme, wrapped }) => {\n    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n    return css`\n      ${wrapped\n        ? css`\n            grid-template-columns: minmax(0, 1fr);\n          `\n        : css`\n            grid-template-columns: ${labelChWidth}ch auto;\n          `}\n\n      ${StyledFieldValue} {\n        font-size: ${fontSizes[theme.components.text.h1['font-size'] as FontSize]};\n        font-weight: ${theme.components.text.h1['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledSummaryPrimaryList.defaultProps = defaultThemeProp;\n\nexport const StyledSummarySecondaryList = styled(FieldValueList)(() => {\n  return css`\n    ${StyledStackedFieldValue} {\n      grid-column: 1 / -1;\n    }\n  `;\n});\n\nexport const StyledSummaryTabContent = styled(CardContent)(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n  const containerWidthCh = colCountChWidth[1].containerWidth;\n  const containerWidthMinusLabel = `${containerWidthCh - labelChWidth}ch`;\n\n  return css`\n    ${StyledSummarySecondaryList} {\n      > ${StyledStackedFieldValue} {\n        max-width: ${containerWidthCh}ch;\n      }\n\n      > ${StyledFieldValue} {\n        max-width: calc(${containerWidthMinusLabel} - 2 * ${spacing});\n      }\n    }\n  `;\n});\n\nStyledSummaryTabContent.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeader = styled.header(({ theme }) => {\n  const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));\n\n  return css`\n    background-color: ${theme.base.palette['brand-primary']};\n    color: ${color};\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    position: relative;\n\n    h1:focus-visible {\n      outline: transparent;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    ${StyledMenu} {\n      color: ${theme.base.palette['foreground-color']};\n      z-index: ${theme.base['z-index'].popover + 1};\n    }\n  `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCaseIconWrap = styled.div(({ theme }) => {\n  const spacing = theme.base.spacing;\n  const borderRadius = theme.base['border-radius'];\n  const backgroundColor = tryCatch(() => {\n    const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n    return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n  });\n\n  return css`\n    background: ${backgroundColor};\n    width: calc(4 * ${spacing});\n    height: calc(4 * ${spacing});\n    border-radius: calc(${borderRadius} / 2);\n    margin-block-start: ${spacing};\n\n    ${StyledIcon} {\n      font-size: calc(2 * ${spacing});\n      margin: auto;\n    }\n  `;\n});\n\nStyledCaseIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledFollowIconWrap = styled.label`\n  font-size: 1.25rem;\n  input {\n    ${hideVisually}\n  }\n\n  input:focus + svg {\n    box-shadow: ${({ theme }) => theme.base.shadow.focus};\n  }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledSubheading = styled.p``;\n\nStyledSubheading.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderActions = styled.div<{ offsetEnd: boolean }>(({ offsetEnd, theme }) => {\n  return css`\n    margin-inline-start: auto;\n    padding-block: ${theme.base.spacing};\n    padding-inline-start: calc(2 * ${theme.base.spacing});\n\n    ${offsetEnd &&\n    css`\n      padding-inline-end: ${inlineEndButtonOffset};\n    `};\n  `;\n});\n\nStyledHeaderActions.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeaderText = styled.hgroup(({ theme }) => {\n  const color = readableColor(theme.base.palette['brand-primary']);\n  const transparentColor = tryCatch(() => transparentize(0.1, color));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  const idStyle = css`\n    color: ${transparentColor};\n    font-size: ${fontSize.s};\n    font-weight: normal;\n  `;\n\n  return css`\n    word-break: break-word;\n\n    ${StyledSubheading} {\n      ${idStyle}\n    }\n\n    ${StyledBreadcrumbs} {\n      > a,\n      > span,\n      > button,\n      > svg {\n        ${idStyle}\n      }\n\n      > a,\n      > button {\n        &:focus {\n          box-shadow: ${theme.base.shadow.focus};\n        }\n      }\n\n      ${StyledPopover}:not(${StyledTooltip}) {\n        color: ${theme.base.palette['foreground-color']};\n      }\n    }\n\n    > ${StyledText} > ${StyledLink} {\n      color: ${color};\n    }\n\n    + ${StyledHeaderActions} {\n      padding-inline-start: 0;\n    }\n  `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderBreadcrumbBlock = styled.div<{ breadcrumbWidth?: number }>(\n  ({ breadcrumbWidth }) => {\n    return css`\n      width: ${breadcrumbWidth ? `${breadcrumbWidth}px` : '100%'};\n      max-width: 100%;\n    `;\n  }\n);\n\nexport const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': primary, interactive }\n    }\n  } = theme;\n\n  const interactiveUsable = getContrast(primary, interactive) >= 4.5;\n  const color = interactiveUsable ? interactive : readableColor(primary);\n  let hoverBackground = rgba(color, 0.15);\n\n  if (interactiveUsable) {\n    hoverBackground = readableHue(hoverBackground, color);\n  }\n\n  return css`\n    --button-background-color: ${primary};\n    color: ${color};\n    background-color: ${primary};\n    border-color: ${color};\n\n    @media (hover: hover) {\n      &:hover {\n        --button-background-color: ${hoverBackground};\n        color: ${color};\n        background-color: ${hoverBackground};\n        border-color: ${color};\n      }\n    }\n  `;\n});\n\nStyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderSummaryBlock = styled.div<{ hasItems: boolean }>(({ hasItems, theme }) => {\n  const {\n    base: {\n      spacing,\n      palette: { 'brand-primary': primary }\n    }\n  } = theme;\n\n  const color = readableColor(primary);\n  const transparentColor = tryCatch(() => transparentize(0.5, color));\n\n  return css`\n    ${hasItems &&\n    css`\n      border-inline-start: 0.0625rem solid ${transparentColor};\n    `}\n\n    ${StyledStackedFieldValue}:first-child {\n      margin-inline-start: calc(2 * ${spacing});\n    }\n  `;\n});\n\nStyledHeaderSummaryBlock.defaultProps = defaultThemeProp;\n\nconst popoverColorReset = (theme: DefaultTheme) => {\n  const {\n    base: {\n      palette: { interactive, light, 'foreground-color': baseForeground }\n    }\n  } = theme;\n\n  return css`\n    ${StyledPopover}:not(${StyledTooltip}) {\n      color: ${baseForeground};\n\n      ${StyledButtonLink},\n      ${StyledLink} {\n        color: ${interactive};\n        text-decoration: none;\n\n        &:hover,\n        &:active {\n          text-decoration: underline;\n        }\n\n        &:focus {\n          box-shadow: inset 0 0 0 0.0625rem ${light}, 0 0 0.125rem 0.0625rem ${interactive};\n        }\n      }\n    }\n  `;\n};\n\nexport const StyledHeaderSummary = styled.dl(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': primary, interactive }\n    }\n  } = theme;\n\n  const interactiveUsable = meetsContrastGuidelines(primary, interactive).AA;\n  const color = readableColor(primary);\n  const transparentColor = tryCatch(() => transparentize(0.1, color));\n\n  return css`\n    max-width: 100%;\n    min-width: 0;\n\n    > ${StyledStackedFieldValue} {\n      > ${StyledLabel} {\n        color: ${transparentColor};\n        white-space: nowrap;\n      }\n\n      > ${StyledFieldValue} {\n        color: ${color};\n        white-space: nowrap;\n      }\n\n      ${StyledButtonLink},\n      ${StyledLink} {\n        &:focus-visible {\n          box-shadow: inset 0 0 0 0.0625rem ${color};\n        }\n\n        ${!interactiveUsable &&\n        css`\n          color: ${color};\n          text-decoration: underline;\n        `}\n      }\n\n      ${popoverColorReset(theme)}\n    }\n  `;\n});\n\nStyledHeaderSummary.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderSummaryValue = styled(StyledFieldValue)(\n  ({ bold, truncate, theme }: { bold?: boolean; truncate?: boolean; theme: DefaultTheme }) => {\n    const {\n      base: {\n        'content-width': { xs }\n      },\n      components: {\n        text: {\n          h1: { 'font-weight': h1Weight }\n        }\n      }\n    } = theme;\n\n    return css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      ${truncate &&\n      css`\n        max-width: ${xs};\n      `}\n\n      ${bold &&\n      css`\n        font-weight: ${h1Weight};\n      `}\n\n      /*\n       * :not([hidden]) necessary to prevent hidden span with preview a11y instructions from\n       * factoring into scrollWidth of element when determining truncation.\n       */\n      > :not([hidden]) {\n        display: inline;\n      }\n    `;\n  }\n);\n\nStyledHeaderSummaryValue.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryInfo = styled.div(() => {\n  const { intelligentGuidance } = useCaseViewContext();\n\n  return css`\n    overflow: auto;\n    flex: 1;\n    ${intelligentGuidance &&\n    css`\n      /* Accounts for collapsed intelligentGuidance list covering summary panel content when fully scrolled. */\n      padding-block-end: 4rem;\n    `}\n  `;\n});\n\nStyledCaseSummaryInfo.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryContainer = styled.div(({ theme }) => {\n  return css`\n    padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n  `;\n});\n\nStyledCaseSummaryContainer.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseButton = styled(Button)(() => {\n  return css`\n    border: none;\n\n    ${StyledIcon} {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n  `;\n});\n\nStyledExpandCollapseButton.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseSummaryButton = styled(StyledExpandCollapseButton)(({ theme }) => {\n  const { summaryExpanded } = useCaseViewContext();\n  const { rtl } = useDirection();\n\n  return css`\n    --half-compact-btn-height: calc(${theme.base['hit-area'].compact} / 2);\n    --half-btn-compact-difference: calc(\n      (${theme.base['hit-area'].mouse} - ${theme.base['hit-area'].compact}) / 2\n    );\n    --half-case-icon-compact-difference: calc(\n      ((4 * ${theme.base.spacing}) - ${theme.base['hit-area'].compact}) / 2\n    );\n    @media (pointer: coarse) {\n      --half-btn-compact-difference: calc(\n        (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2\n      );\n    }\n    position: absolute;\n    z-index: 1;\n    box-shadow: ${theme.base.shadow.low};\n\n    ${summaryExpanded\n      ? css`\n          inset-block-start: calc(2 * ${theme.base.spacing} + var(--half-btn-compact-difference));\n          inset-inline-start: calc(100% - var(--half-compact-btn-height));\n        `\n      : css`\n          inset-block-end: calc(var(--half-compact-btn-height) * -1);\n          inset-inline-start: calc(\n            2 * ${theme.base.spacing} + var(--half-case-icon-compact-difference)\n          );\n        `}\n\n    ${StyledIcon} {\n      ${summaryExpanded\n        ? css`\n            transform: rotate(${rtl ? '180deg' : '0'});\n          `\n        : css`\n            transform: rotate(-90deg);\n          `}\n    }\n  `;\n});\n\nStyledExpandCollapseSummaryButton.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummary = styled.div(() => {\n  const { summaryExpanded, aboveMD } = useCaseViewContext();\n\n  return css`\n    position: relative;\n    height: 100%;\n    ${aboveMD &&\n    summaryExpanded &&\n    css`\n      width: 25rem;\n    `}\n  `;\n});\n\nexport const StyledWorkArea = styled.div(({ theme }) => {\n  const { summaryExpanded, aboveMD, intelligentGuidance, stages, tasks } = useCaseViewContext();\n  let pbeRem = 0;\n\n  if (intelligentGuidance) {\n    pbeRem = aboveMD && !summaryExpanded ? 4 : 6;\n  }\n\n  return css`\n    grid-area: work-area;\n    padding: calc(2 * ${theme.base.spacing});\n\n    ${aboveMD &&\n    css`\n      padding: calc(2 * ${theme.base.spacing}) 0;\n\n      /* This is required to make scrollStick work. */\n      height: max-content;\n\n      ${!summaryExpanded &&\n      css`\n        margin-inline-start: calc(2 * ${theme.base.spacing});\n      `}\n    `}\n\n    /* Order of style here is necessary for overriding styles above. */\n    ${pbeRem > 0 &&\n    css`\n      /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */\n      padding-block-end: ${pbeRem}rem;\n    `}\n\n    ${stages &&\n    tasks &&\n    css`\n      ${StyledStages} {\n        border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n\n        &,\n        > ${StyledStage}:first-child {\n          border-end-start-radius: 0;\n        }\n\n        &,\n        > ${StyledStage}:last-child {\n          border-end-end-radius: 0;\n        }\n      }\n\n      ${StyledCard}${StyledTasks} {\n        margin-block-start: calc(-2 * ${theme.base.spacing});\n        border-start-start-radius: 0;\n        border-start-end-radius: 0;\n      }\n    `}\n  `;\n});\n\nStyledWorkArea.defaultProps = defaultThemeProp;\n\nexport const StyledUtilitiesHeading = styled(Text)``;\n\nexport const StyledExpandCollapseUtilitiesButton = styled(StyledExpandCollapseButton)(() => {\n  const { utilitiesExpanded } = useCaseViewContext();\n  const { rtl } = useDirection();\n\n  return css`\n    /* Centers button over the utilities summary */\n    margin-inline-end: ${utilitiesExpanded && '0.625rem'};\n\n    ${StyledIcon} {\n      ${utilitiesExpanded !== rtl\n        ? css`\n            transform: rotate(180deg);\n          `\n        : css`\n            transform: rotate(0);\n          `}\n    }\n  `;\n});\n\nStyledExpandCollapseUtilitiesButton.defaultProps = defaultThemeProp;\n\nexport const StyledUtilities = styled.div(({ theme }) => {\n  const { utilitiesExpanded, aboveLG, aboveMD } = useCaseViewContext();\n\n  return css`\n    height: max-content;\n    margin-block: calc(2 * ${theme.base.spacing});\n\n    /* If utilities are in an expanded drawer. */\n    ${utilitiesExpanded &&\n    aboveMD &&\n    !aboveLG &&\n    css`\n      /* Maintains the column width to avoid page content shift. */\n      visibility: hidden;\n    `}\n\n    ${aboveLG &&\n    utilitiesExpanded &&\n    css`\n      width: 25rem;\n    `}\n\n\n    /* Selects the h2 in the utilities column, not the drawer. */\n    ${StyledUtilitiesHeading} {\n      /* Hide the utilities h2 under certain conditions.*/\n      ${((aboveMD && !utilitiesExpanded) || (aboveMD && utilitiesExpanded && !aboveLG)) &&\n      hideVisually()}\n    }\n  `;\n});\n\nStyledUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledSummary = styled.div(({ theme }) => {\n  const { summaryExpanded, aboveMD } = useCaseViewContext();\n\n  return css`\n    top: ${summaryExpanded ? 'var(--top-offset)' : 'var(--appshell-offset, 0)'};\n    width: 100%;\n    background-color: ${theme.base.palette['primary-background']};\n    z-index: ${theme.base['z-index'].popover};\n\n    ${aboveMD &&\n    summaryExpanded &&\n    css`\n      height: var(--case-view-height);\n    `}\n\n    ${aboveMD\n      ? css`\n          position: sticky;\n        `\n      : css`\n          @media (min-height: ${theme.base.breakpoints.sm}) {\n            position: sticky;\n          }\n        `}\n  `;\n});\n\nStyledSummary.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div(({ theme }) => {\n  return css`\n    min-width: 21.875rem;\n    max-width: 31.25rem;\n    width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n    background-color: ${theme.base.palette['primary-background']};\n    height: var(--case-view-height);\n    top: var(--top-offset);\n    z-index: ${theme.base['z-index'].drawer - 1};\n  `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['app-background']};\n    padding: calc(2 * ${theme.base.spacing});\n    height: 100%;\n    overflow: auto;\n  `;\n});\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div(({ theme }) => {\n  return css`\n    min-width: ${theme.base['content-width'].sm};\n    max-width: ${theme.base['content-width'].md};\n    overflow: auto;\n    position: sticky;\n    z-index: 1;\n    height: var(--case-view-height);\n    top: var(--top-offset);\n  `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n  position: sticky;\n  top: 0;\n`;\n\nexport const StyledCaseView = styled.div(({ theme }) => {\n  const { aboveMD } = useCaseViewContext();\n\n  return css`\n    --top-offset: calc(var(--appshell-offset, 0rem) + var(--summary-height));\n    --case-view-height: calc(100vh - var(--top-offset));\n    position: relative;\n    min-height: var(--case-view-height);\n    background-color: ${theme.base.palette['app-background']};\n\n    ${aboveMD &&\n    css`\n      ${StyledUtilities}:last-child {\n        margin-inline-end: calc(2 * ${theme.base.spacing});\n      }\n    `}\n  `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledUtilitiesHeader = styled(Text)`\n  align-self: center;\n\n  &:not(:focus) {\n    ${hideVisually}\n  }\n`;\n\nStyledUtilitiesHeader.defaultProps = defaultThemeProp;\n"]}

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

@@ -82,9 +82,8 @@ export interface CaseViewProps extends NoChildrenProp, BaseProps, TestIdProp {
     /** Callback to toggle the utilities. */
     onToggleUtilities?: () => void;
 }
-export interface CaseViewContextValue extends Pick<CaseViewProps, 'caseId' | 'heading' | 'subheading' | 'parentCases' | 'icon' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'tabs' | 'summaryExpanded' | 'summaryFields' | 'onToggleSummary' | 'utilitiesExpanded' | 'persistentUtility' | 'intelligentGuidance'> {
+export interface CaseViewContextValue extends Pick<CaseViewProps, 'caseId' | 'heading' | 'subheading' | 'parentCases' | 'icon' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'tabs' | 'summaryExpanded' | 'summaryFields' | 'onToggleSummary' | 'utilitiesExpanded' | 'stages' | 'tasks' | 'persistentUtility' | 'intelligentGuidance'> {
     testIds: Partial<ReturnType<typeof getCaseViewTestIds>>;
-    summaryId: string;
     aboveSM: boolean;
     aboveMD: boolean;
     aboveLG: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactElement, ReactNode, MouseEvent } from 'react';\n\nimport {\n  Tab,\n  NoChildrenProp,\n  FieldValueListItemProps,\n  ForwardProps,\n  MenuItemProps,\n  Action,\n  BaseProps,\n  TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport type { getCaseViewTestIds } from './CaseView.test-ids';\n\nexport type CaseSummaryFieldsProps = {\n  primary?: SummaryField[];\n  secondary?: SummaryField[];\n  inSummaryPanel?: boolean;\n};\n\nexport type SummaryField = {\n  name: FieldValueListItemProps['name'];\n  value: FieldValueListItemProps['value'];\n  simpleValue?: string | number | ReactNode;\n  variant?: FieldValueListItemProps['variant'];\n};\n\nexport interface CaseViewProps extends NoChildrenProp, BaseProps, TestIdProp {\n  /** A unique identifier for the case instance. */\n  caseId: string;\n\n  /** Text to quickly identify a case instance. */\n  heading: string;\n\n  /** Supplemental text to identify a case instance. */\n  subheading?: string;\n\n  /** @internal */\n  caseLink?: CaseViewContextValue['caseLink'];\n\n  /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n  parentCases?: MenuItemProps[];\n\n  /** An icon to serve as a visual for the CaseView. */\n  icon?: ReactElement;\n\n  /** Indicates if the current user is following the case. This should be updated based on onFollowedChange. */\n  followed?: boolean;\n\n  /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n  onFollowedChange?: (following: boolean) => void;\n\n  /** Case level actions available in an action menu. */\n  actions?: Action[];\n\n  /** Visually promoted case level actions available outside the menu. */\n  promotedActions?: Action[];\n\n  /** A callback for when the edit button is clicked */\n  onEdit?: () => void;\n\n  /** Field data to render in summary areas. */\n  summaryFields: CaseSummaryFieldsProps;\n\n  /**\n   * Determines the layout state of the summary region.\n   * @default true\n   */\n  summaryExpanded?: boolean;\n\n  /** Callback to toggle the case summary's layout. */\n  onToggleSummary?: () => void;\n\n  /** An object handling the rendering and functionality of the Tabs in CaseSummary. */\n  tabs: {\n    items: Tab[];\n    onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;\n    currentTabId: string;\n  };\n\n  /** A region within the center column that is controlled by tabs in CaseSummary. */\n  tabContent?: { content: ReactNode; id: string }[];\n\n  /** A region to hold a Stages component. */\n  stages?: ReactNode;\n\n  /** A region to hold a Tasks component. */\n  tasks?: ReactNode;\n\n  /** A region above the center column to display banners. */\n  banners?: ReactNode;\n\n  /** A region to the right reserved for persistent utilities. */\n  persistentUtility?: { content: ReactNode; title: string };\n\n  /** Provide an instance of IntelligentGuidance to be rendered for a case. */\n  intelligentGuidance?: ReactNode;\n\n  /** A region for case widgets. */\n  utilities?: ReactNode;\n\n  /** An indicator of case widgets when the utilities are collapsed. */\n  utilitiesSummaryItems?: { iconName: string; name: string; count?: number }[];\n\n  /**\n   * Determines the layout state of the utilities.\n   * @default true\n   */\n  utilitiesExpanded?: boolean;\n\n  /** Callback to toggle the utilities. */\n  onToggleUtilities?: () => void;\n\n  /**\n   * Indicates CaseView is rendered within a CasePreview.\n   * @internal\n   */\n  isPreview?: boolean;\n}\n\nexport interface CaseViewContextValue\n  extends Pick<\n    CaseViewProps,\n    | 'caseId'\n    | 'heading'\n    | 'subheading'\n    | 'parentCases'\n    | 'icon'\n    | 'followed'\n    | 'onFollowedChange'\n    | 'actions'\n    | 'promotedActions'\n    | 'onEdit'\n    | 'tabs'\n    | 'summaryExpanded'\n    | 'summaryFields'\n    | 'onToggleSummary'\n    | 'utilitiesExpanded'\n    | 'persistentUtility'\n    | 'intelligentGuidance'\n  > {\n  testIds: Partial<ReturnType<typeof getCaseViewTestIds>>;\n  summaryId: string;\n  aboveSM: boolean;\n  aboveMD: boolean;\n  aboveLG: boolean;\n  aboveXL: boolean;\n  isPreview: boolean;\n  caseLink?: { href: string } & ForwardProps;\n}\n"]}
+{"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactElement, ReactNode, MouseEvent } from 'react';\n\nimport {\n  Tab,\n  NoChildrenProp,\n  FieldValueListItemProps,\n  ForwardProps,\n  MenuItemProps,\n  Action,\n  BaseProps,\n  TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport type { getCaseViewTestIds } from './CaseView.test-ids';\n\nexport type CaseSummaryFieldsProps = {\n  primary?: SummaryField[];\n  secondary?: SummaryField[];\n  inSummaryPanel?: boolean;\n};\n\nexport type SummaryField = {\n  name: FieldValueListItemProps['name'];\n  value: FieldValueListItemProps['value'];\n  simpleValue?: string | number | ReactNode;\n  variant?: FieldValueListItemProps['variant'];\n};\n\nexport interface CaseViewProps extends NoChildrenProp, BaseProps, TestIdProp {\n  /** A unique identifier for the case instance. */\n  caseId: string;\n\n  /** Text to quickly identify a case instance. */\n  heading: string;\n\n  /** Supplemental text to identify a case instance. */\n  subheading?: string;\n\n  /** @internal */\n  caseLink?: CaseViewContextValue['caseLink'];\n\n  /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n  parentCases?: MenuItemProps[];\n\n  /** An icon to serve as a visual for the CaseView. */\n  icon?: ReactElement;\n\n  /** Indicates if the current user is following the case. This should be updated based on onFollowedChange. */\n  followed?: boolean;\n\n  /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n  onFollowedChange?: (following: boolean) => void;\n\n  /** Case level actions available in an action menu. */\n  actions?: Action[];\n\n  /** Visually promoted case level actions available outside the menu. */\n  promotedActions?: Action[];\n\n  /** A callback for when the edit button is clicked */\n  onEdit?: () => void;\n\n  /** Field data to render in summary areas. */\n  summaryFields: CaseSummaryFieldsProps;\n\n  /**\n   * Determines the layout state of the summary region.\n   * @default true\n   */\n  summaryExpanded?: boolean;\n\n  /** Callback to toggle the case summary's layout. */\n  onToggleSummary?: () => void;\n\n  /** An object handling the rendering and functionality of the Tabs in CaseSummary. */\n  tabs: {\n    items: Tab[];\n    onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;\n    currentTabId: string;\n  };\n\n  /** A region within the center column that is controlled by tabs in CaseSummary. */\n  tabContent?: { content: ReactNode; id: string }[];\n\n  /** A region to hold a Stages component. */\n  stages?: ReactNode;\n\n  /** A region to hold a Tasks component. */\n  tasks?: ReactNode;\n\n  /** A region above the center column to display banners. */\n  banners?: ReactNode;\n\n  /** A region to the right reserved for persistent utilities. */\n  persistentUtility?: { content: ReactNode; title: string };\n\n  /** Provide an instance of IntelligentGuidance to be rendered for a case. */\n  intelligentGuidance?: ReactNode;\n\n  /** A region for case widgets. */\n  utilities?: ReactNode;\n\n  /** An indicator of case widgets when the utilities are collapsed. */\n  utilitiesSummaryItems?: { iconName: string; name: string; count?: number }[];\n\n  /**\n   * Determines the layout state of the utilities.\n   * @default true\n   */\n  utilitiesExpanded?: boolean;\n\n  /** Callback to toggle the utilities. */\n  onToggleUtilities?: () => void;\n\n  /**\n   * Indicates CaseView is rendered within a CasePreview.\n   * @internal\n   */\n  isPreview?: boolean;\n}\n\nexport interface CaseViewContextValue\n  extends Pick<\n    CaseViewProps,\n    | 'caseId'\n    | 'heading'\n    | 'subheading'\n    | 'parentCases'\n    | 'icon'\n    | 'followed'\n    | 'onFollowedChange'\n    | 'actions'\n    | 'promotedActions'\n    | 'onEdit'\n    | 'tabs'\n    | 'summaryExpanded'\n    | 'summaryFields'\n    | 'onToggleSummary'\n    | 'utilitiesExpanded'\n    | 'stages'\n    | 'tasks'\n    | 'persistentUtility'\n    | 'intelligentGuidance'\n  > {\n  testIds: Partial<ReturnType<typeof getCaseViewTestIds>>;\n  aboveSM: boolean;\n  aboveMD: boolean;\n  aboveLG: boolean;\n  aboveXL: boolean;\n  isPreview: boolean;\n  caseLink?: { href: string } & ForwardProps;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Predictions.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,gBAAoC,MAAM,qBAAqB,CAAC;AAsFvE,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAoCnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"Predictions.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,gBAAoC,MAAM,qBAAqB,CAAC;AAsFvE,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqCnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Predictions/Predictions.js

@@ -48,7 +48,7 @@ const Predictions = forwardRef(({ count, items, progress, ...restProps }, ref) =
             count
         });
     }, [items, progress, count]);
-    return (_jsx(PredictionsList, { ...restProps, ref: ref, name: t('predictions'), icon: 'polaris', count: count, items: items?.slice(0, 3), progress: progress, onViewAll: () => {
+    return (_jsx(PredictionsList, { ...restProps, ref: ref, name: t('predictions'), headingTag: 'h3', icon: 'polaris', count: count, items: items?.slice(0, 3), progress: progress, onViewAll: () => {
             viewAllModalRef.current = create(PredictionsViewAllModal, {
                 items,
                 progress,

package/lib/components/Predictions/Predictions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Predictions.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  FunctionComponent,\n  MouseEvent,\n  PropsWithoutRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  registerIcon,\n  useI18n,\n  Modal,\n  SummaryListProps,\n  useModalManager,\n  SummaryListItem,\n  InfoDialog,\n  ModalMethods,\n  StyledLabel,\n  Text,\n  SummaryList\n} from '@pega/cosmos-react-core';\nimport * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\n\nimport PredictionsProps, { PredictionItem } from './Predictions.types';\n\nregisterIcon(polarisIcon, informationIcon);\n\nconst PredictionsList: FC<\n  PredictionsProps & Pick<SummaryListProps, 'onViewAll' | 'name' | 'icon'> & ForwardProps\n> = forwardRef(\n  (\n    {\n      items: itemsProp,\n      progress,\n      ...restProps\n    }: PropsWithoutRef<PredictionsProps & Pick<SummaryListProps, 'onViewAll' | 'name' | 'icon'>>,\n    ref: PredictionsProps['ref']\n  ) => {\n    const t = useI18n();\n    const [currentItemIdTarget, setCurrentItemIdTarget] = useState<\n      | {\n          id: PredictionItem['id'];\n          target: HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;\n        }\n      | undefined\n    >();\n    const currentItem = itemsProp?.find(({ id }) => id === currentItemIdTarget?.id);\n\n    const items: SummaryListItem[] = useMemo(\n      () =>\n        (itemsProp ?? []).map(item => ({\n          id: item.id,\n          primary: <StyledLabel forwardedAs='span'>{item.label}</StyledLabel>,\n          secondary: (\n            <Text variant='h1' as='span'>\n              {item.value}\n            </Text>\n          ),\n          overflowStrategy: 'ellipsis',\n          actions: item.additionalInfo\n            ? [\n                {\n                  id: item.id,\n                  text: t('learn_more'),\n                  icon: 'information',\n                  onClick: (\n                    id: string,\n                    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n                  ) => {\n                    setCurrentItemIdTarget({\n                      id: item.id,\n                      target: e.currentTarget\n                    });\n                  }\n                }\n              ]\n            : undefined\n        })),\n      [itemsProp]\n    );\n\n    return (\n      <>\n        <SummaryList {...restProps} loading={progress} ref={ref} items={items} />\n        {currentItemIdTarget && currentItem?.additionalInfo && (\n          <InfoDialog\n            heading={currentItem.label}\n            target={currentItemIdTarget.target}\n            onDismiss={() => {\n              setCurrentItemIdTarget(undefined);\n            }}\n          >\n            {currentItem.additionalInfo}\n          </InfoDialog>\n        )}\n      </>\n    );\n  }\n);\n\nconst PredictionsViewAllModal = ({ count, progress, ...restProps }: PredictionsProps) => {\n  const t = useI18n();\n  return (\n    <Modal heading={t('all_predictions')} count={count} progress={progress}>\n      <PredictionsList {...restProps} />\n    </Modal>\n  );\n};\n\nconst Predictions: FunctionComponent<PredictionsProps & ForwardProps> = forwardRef(\n  (\n    { count, items, progress, ...restProps }: PropsWithoutRef<PredictionsProps>,\n    ref: PredictionsProps['ref']\n  ) => {\n    const t = useI18n();\n    const { create } = useModalManager();\n    const viewAllModalRef = useRef<ModalMethods<PredictionsProps>>();\n\n    useEffect(() => {\n      viewAllModalRef.current?.update({\n        items,\n        progress,\n        count\n      });\n    }, [items, progress, count]);\n\n    return (\n      <PredictionsList\n        {...restProps}\n        ref={ref}\n        name={t('predictions')}\n        icon='polaris'\n        count={count}\n        items={items?.slice(0, 3)}\n        progress={progress}\n        onViewAll={() => {\n          viewAllModalRef.current = create(PredictionsViewAllModal, {\n            items,\n            progress,\n            count\n          });\n        }}\n      />\n    );\n  }\n);\n\nexport default Predictions;\n"]}
+{"version":3,"file":"Predictions.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  FunctionComponent,\n  MouseEvent,\n  PropsWithoutRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  registerIcon,\n  useI18n,\n  Modal,\n  SummaryListProps,\n  useModalManager,\n  SummaryListItem,\n  InfoDialog,\n  ModalMethods,\n  StyledLabel,\n  Text,\n  SummaryList\n} from '@pega/cosmos-react-core';\nimport * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\n\nimport PredictionsProps, { PredictionItem } from './Predictions.types';\n\nregisterIcon(polarisIcon, informationIcon);\n\nconst PredictionsList: FC<\n  PredictionsProps & Pick<SummaryListProps, 'onViewAll' | 'name' | 'icon'> & ForwardProps\n> = forwardRef(\n  (\n    {\n      items: itemsProp,\n      progress,\n      ...restProps\n    }: PropsWithoutRef<PredictionsProps & Pick<SummaryListProps, 'onViewAll' | 'name' | 'icon'>>,\n    ref: PredictionsProps['ref']\n  ) => {\n    const t = useI18n();\n    const [currentItemIdTarget, setCurrentItemIdTarget] = useState<\n      | {\n          id: PredictionItem['id'];\n          target: HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;\n        }\n      | undefined\n    >();\n    const currentItem = itemsProp?.find(({ id }) => id === currentItemIdTarget?.id);\n\n    const items: SummaryListItem[] = useMemo(\n      () =>\n        (itemsProp ?? []).map(item => ({\n          id: item.id,\n          primary: <StyledLabel forwardedAs='span'>{item.label}</StyledLabel>,\n          secondary: (\n            <Text variant='h1' as='span'>\n              {item.value}\n            </Text>\n          ),\n          overflowStrategy: 'ellipsis',\n          actions: item.additionalInfo\n            ? [\n                {\n                  id: item.id,\n                  text: t('learn_more'),\n                  icon: 'information',\n                  onClick: (\n                    id: string,\n                    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n                  ) => {\n                    setCurrentItemIdTarget({\n                      id: item.id,\n                      target: e.currentTarget\n                    });\n                  }\n                }\n              ]\n            : undefined\n        })),\n      [itemsProp]\n    );\n\n    return (\n      <>\n        <SummaryList {...restProps} loading={progress} ref={ref} items={items} />\n        {currentItemIdTarget && currentItem?.additionalInfo && (\n          <InfoDialog\n            heading={currentItem.label}\n            target={currentItemIdTarget.target}\n            onDismiss={() => {\n              setCurrentItemIdTarget(undefined);\n            }}\n          >\n            {currentItem.additionalInfo}\n          </InfoDialog>\n        )}\n      </>\n    );\n  }\n);\n\nconst PredictionsViewAllModal = ({ count, progress, ...restProps }: PredictionsProps) => {\n  const t = useI18n();\n  return (\n    <Modal heading={t('all_predictions')} count={count} progress={progress}>\n      <PredictionsList {...restProps} />\n    </Modal>\n  );\n};\n\nconst Predictions: FunctionComponent<PredictionsProps & ForwardProps> = forwardRef(\n  (\n    { count, items, progress, ...restProps }: PropsWithoutRef<PredictionsProps>,\n    ref: PredictionsProps['ref']\n  ) => {\n    const t = useI18n();\n    const { create } = useModalManager();\n    const viewAllModalRef = useRef<ModalMethods<PredictionsProps>>();\n\n    useEffect(() => {\n      viewAllModalRef.current?.update({\n        items,\n        progress,\n        count\n      });\n    }, [items, progress, count]);\n\n    return (\n      <PredictionsList\n        {...restProps}\n        ref={ref}\n        name={t('predictions')}\n        headingTag='h3'\n        icon='polaris'\n        count={count}\n        items={items?.slice(0, 3)}\n        progress={progress}\n        onViewAll={() => {\n          viewAllModalRef.current = create(PredictionsViewAllModal, {\n            items,\n            progress,\n            count\n          });\n        }}\n      />\n    );\n  }\n);\n\nexport default Predictions;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAU,YAAY,EAA0B,MAAM,yBAAyB,CAAC;AAE5F,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAmBpE,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAoUrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAU,YAAY,EAA0B,MAAM,yBAAyB,CAAC;AAE5F,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAmBpE,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAqUrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Stakeholders/Stakeholders.js

@@ -198,7 +198,7 @@ const Stakeholders = forwardRef(({ items: itemsProp, count, loading, onAddNew, f
         if (!popoverTarget)
             form.onAfterClose?.();
     }, [popoverTarget]);
-    return (_jsxs(_Fragment, { children: [_jsx(StyledStakeholders, { ...restProps, ref: ref, icon: 'person', name: t('view_stakeholders'), loading: loading, count: count, error: error, items: useMemo(() => mergeItemActions(itemsProp.slice(0, 3)), [mergeItemActions, itemsProp]), actions: onAddNew
+    return (_jsxs(_Fragment, { children: [_jsx(StyledStakeholders, { ...restProps, ref: ref, icon: 'person', name: t('view_stakeholders'), headingTag: 'h3', loading: loading, count: count, error: error, items: useMemo(() => mergeItemActions(itemsProp.slice(0, 3)), [mergeItemActions, itemsProp]), actions: onAddNew
                     ? [
                         {
                             text: t('add'),

package/lib/components/Stakeholders/Stakeholders.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useRef,\n  useEffect,\n  useMemo,\n  useState,\n  ReactNode,\n  useCallback\n} from 'react';\nimport styled from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport {\n  SummaryList,\n  useI18n,\n  ModalMethods,\n  Button,\n  ViewAll,\n  Modal,\n  Popover,\n  Flex,\n  Text,\n  useModalManager,\n  useOuterEvent,\n  Progress,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport type { Action, ForwardProps, ModalProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled(SummaryList)``;\n\nconst StyledEditFormWrap = styled.div`\n  position: relative;\n  min-height: 8rem;\n\n  &[aria-busy='true'] > :nth-child(2) {\n    visibility: hidden;\n  }\n`;\n\nconst StyledPopover = styled(Popover)`\n  width: 40ch;\n  min-height: 12rem;\n`;\n\nconst Stakeholders: FunctionComponent<StakeholdersProps & ForwardProps> = forwardRef(\n  (\n    {\n      items: itemsProp,\n      count,\n      loading,\n      onAddNew,\n      form,\n      onViewAll,\n      viewAll,\n      error,\n      ...restProps\n    }: PropsWithoutRef<StakeholdersProps>,\n    ref: StakeholdersProps['ref']\n  ) => {\n    const { create: createModal } = useModalManager();\n    const t = useI18n();\n    const modalMethods = useRef<ModalMethods>();\n    const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n    const [editing, setEditing] = useState(false);\n    const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n    const popoverRef = useRef<HTMLDivElement>(null);\n    const progressMsgRef = useRef(t('loading'));\n\n    // Why? Don't think this should trigger a re-render. We just need the value when we invoke callback props.\n    const selectedRoleNameRef = useRef<Role['name'] | undefined>();\n    // Setter for the ref. Avoids a re-render.\n    const setSelectedRoleNameRef = useCallback((selectedRoleName?: Role['name']) => {\n      selectedRoleNameRef.current = selectedRoleName;\n    }, []);\n\n    const [popoverTarget, setPopoverTarget] = useState<{\n      portal: HTMLLIElement;\n      button: HTMLButtonElement | null;\n    } | null>(null);\n\n    const itemElsRef = useRef<{ itemEls: HTMLLIElement[]; viewAllItemEls: HTMLLIElement[] }>({\n      itemEls: [],\n      viewAllItemEls: []\n    });\n\n    // This function merges the pre-defined actions(add & edit) to the item object.\n    const mergeItemActions = (\n      items: StakeholdersProps['items'] | NonNullable<StakeholdersProps['viewAll']>['items']\n    ) => {\n      return items.map(({ onEdit, onRemove, ...rest }, i) => {\n        let itemActions: Action[] = [];\n        const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];\n\n        if (onEdit) {\n          itemActions = [\n            {\n              id: 'edit',\n              text: t('edit'),\n              icon: 'pencil',\n              onClick: () => {\n                setEditing(true);\n                setPopoverTarget({\n                  portal: elArray[i],\n                  button: elArray[i].querySelector<HTMLButtonElement>(\n                    'button[aria-haspopup=\"menu\"]'\n                  )\n                });\n\n                onEdit?.();\n              }\n            }\n          ];\n        }\n\n        if (onRemove) {\n          itemActions = [\n            ...itemActions,\n            {\n              id: 'remove',\n              text: t('remove'),\n              icon: 'trash',\n              onClick: () => {\n                onRemove?.();\n              }\n            }\n          ];\n        }\n\n        return {\n          ...rest,\n          ref: (el: HTMLLIElement) => {\n            elArray[i] = el;\n          },\n          actions: itemActions\n        };\n      });\n    };\n\n    const closePopover = () => {\n      if (!popoverTarget || (form.loading && progressMsgRef.current === t('submitting'))) return;\n      popoverTarget.button?.focus();\n      setPopoverTarget(null);\n      setEditing(false);\n      progressMsgRef.current = t('loading');\n    };\n\n    let formContent: ReactNode = null;\n    if (\n      (mode === 'add' || editing) &&\n      (!form.loading || progressMsgRef.current === t('submitting'))\n    ) {\n      formContent = (\n        <StakeholderForm\n          roles={form.roles}\n          currentRole={form.currentRole}\n          renderer={form.renderer}\n          rendererProps={form.rendererProps}\n          setSelectedRoleNameRef={setSelectedRoleNameRef}\n        />\n      );\n    }\n\n    // Actions used for add and edit both in the modal and the popover.\n    let formActions: ReactNode = null;\n    if (\n      (mode === 'add' || editing) &&\n      (!form.loading || progressMsgRef.current === t('submitting'))\n    ) {\n      const closeForm = () => {\n        if (mode === 'add') {\n          modalMethods.current?.dismiss();\n        } else {\n          closePopover();\n        }\n      };\n\n      formActions = (\n        <>\n          <Button\n            disabled={form.loading}\n            onClick={() => {\n              form.onDismiss({ closeForm });\n            }}\n          >\n            {t('cancel')}\n          </Button>\n          <Button\n            disabled={form.loading}\n            type='submit'\n            variant='primary'\n            onClick={() => {\n              progressMsgRef.current = t('submitting');\n              form.onSubmit({\n                selectedRoleName: selectedRoleNameRef.current,\n                closeForm\n              });\n            }}\n          >\n            {t('submit')}\n          </Button>\n        </>\n      );\n    }\n\n    // Content for the modal either for adding new or viewing all.\n    let modalContent: ReactNode = null;\n    if (mode === 'add') modalContent = formContent;\n\n    if (!viewAll.loading && (mode === 'viewAll' || (editing && modalMethods.current))) {\n      modalContent = (\n        <ViewAll\n          items={mergeItemActions(viewAll.items)}\n          actions={[\n            {\n              id: 'addStakeHolder',\n              text: 'Add new',\n              onClick: () => {\n                setMode('add');\n                onAddNew?.();\n              }\n            }\n          ]}\n          searchInputProps={\n            viewAll.onSearch\n              ? {\n                  value: viewAllSearchValue,\n                  onSearchChange: (value: string) => {\n                    setViewAllSearchValue(value);\n                    viewAll?.onSearch?.(value);\n                  }\n                }\n              : undefined\n          }\n        />\n      );\n    }\n\n    useEffect(() => {\n      if (!mode) {\n        modalMethods.current = undefined;\n        return;\n      }\n\n      const modalProps: OmitStrict<ModalProps, 'heading'> = {\n        progress:\n          (mode === 'add' && form.loading) || viewAll.loading\n            ? { message: progressMsgRef.current }\n            : undefined,\n        count: mode === 'viewAll' ? count : undefined,\n        children: modalContent,\n        actions: mode === 'add' ? formActions : undefined,\n        onRequestDismiss:\n          form.loading && progressMsgRef.current === t('submitting') ? () => false : undefined\n      };\n\n      if (modalMethods.current) {\n        modalMethods.current.update(modalProps);\n      } else if (mode === 'add' || mode === 'viewAll') {\n        modalMethods.current = createModal(Modal, {\n          ...modalProps,\n          heading: mode === 'add' ? t('add_stakeholders') : t('view_stakeholders'),\n          onAfterClose: () => {\n            if (mode === 'add') {\n              form.onAfterClose?.();\n            } else {\n              setViewAllSearchValue('');\n              viewAll.onAfterClose?.();\n            }\n\n            progressMsgRef.current = t('loading');\n            setMode(undefined);\n          }\n        });\n      }\n    }, [mode, modalContent, form.loading, formActions, count, viewAll.loading]);\n\n    // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n    useOuterEvent('mousedown', [popoverRef], closePopover);\n\n    let editPopover: ReactNode = null;\n    if (popoverTarget) {\n      editPopover = (\n        <StyledPopover\n          ref={popoverRef}\n          target={popoverTarget.button}\n          placement='auto'\n          role='dialog'\n        >\n          <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n            <Text variant='h3'>{t('edit_stakeholder')}</Text>\n            <StyledEditFormWrap aria-busy={form.loading ? 'true' : 'false'}>\n              <Progress placement='local' visible={form.loading} message={progressMsgRef.current} />\n              {(!form.loading || progressMsgRef.current === t('submitting')) && (\n                <StakeholderForm\n                  roles={form.roles}\n                  currentRole={form.currentRole}\n                  renderer={form.renderer}\n                  rendererProps={form.rendererProps}\n                  setSelectedRoleNameRef={setSelectedRoleNameRef}\n                />\n              )}\n            </StyledEditFormWrap>\n            {formActions && <Flex container={{ justify: 'between' }}>{formActions}</Flex>}\n          </Flex>\n        </StyledPopover>\n      );\n    }\n\n    const onKeydown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closePopover();\n      }\n    };\n\n    useEffect(() => {\n      if (!popoverTarget) return;\n      document.addEventListener('keydown', onKeydown);\n      return () => {\n        document.removeEventListener('keydown', onKeydown);\n      };\n    }, [popoverTarget]);\n\n    useAfterInitialEffect(() => {\n      if (!popoverTarget) form.onAfterClose?.();\n    }, [popoverTarget]);\n\n    return (\n      <>\n        <StyledStakeholders\n          {...restProps}\n          ref={ref}\n          icon='person'\n          name={t('view_stakeholders')}\n          loading={loading}\n          count={count}\n          error={error}\n          items={useMemo(\n            () => mergeItemActions(itemsProp.slice(0, 3)),\n            [mergeItemActions, itemsProp]\n          )}\n          actions={\n            onAddNew\n              ? [\n                  {\n                    text: t('add'),\n                    id: 'add_new',\n                    icon: 'plus',\n                    onClick() {\n                      setMode('add');\n                      onAddNew?.();\n                    }\n                  }\n                ]\n              : undefined\n          }\n          onViewAll={\n            onViewAll && count && count > 3\n              ? () => {\n                  setMode('viewAll');\n                  onViewAll?.();\n                }\n              : undefined\n          }\n        />\n        {popoverTarget && createPortal(editPopover, popoverTarget.portal)}\n      </>\n    );\n  }\n);\n\nexport default Stakeholders;\n"]}
+{"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  useRef,\n  useEffect,\n  useMemo,\n  useState,\n  ReactNode,\n  useCallback\n} from 'react';\nimport styled from 'styled-components';\nimport { createPortal } from 'react-dom';\n\nimport {\n  SummaryList,\n  useI18n,\n  ModalMethods,\n  Button,\n  ViewAll,\n  Modal,\n  Popover,\n  Flex,\n  Text,\n  useModalManager,\n  useOuterEvent,\n  Progress,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport type { Action, ForwardProps, ModalProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled(SummaryList)``;\n\nconst StyledEditFormWrap = styled.div`\n  position: relative;\n  min-height: 8rem;\n\n  &[aria-busy='true'] > :nth-child(2) {\n    visibility: hidden;\n  }\n`;\n\nconst StyledPopover = styled(Popover)`\n  width: 40ch;\n  min-height: 12rem;\n`;\n\nconst Stakeholders: FunctionComponent<StakeholdersProps & ForwardProps> = forwardRef(\n  (\n    {\n      items: itemsProp,\n      count,\n      loading,\n      onAddNew,\n      form,\n      onViewAll,\n      viewAll,\n      error,\n      ...restProps\n    }: PropsWithoutRef<StakeholdersProps>,\n    ref: StakeholdersProps['ref']\n  ) => {\n    const { create: createModal } = useModalManager();\n    const t = useI18n();\n    const modalMethods = useRef<ModalMethods>();\n    const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n    const [editing, setEditing] = useState(false);\n    const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n    const popoverRef = useRef<HTMLDivElement>(null);\n    const progressMsgRef = useRef(t('loading'));\n\n    // Why? Don't think this should trigger a re-render. We just need the value when we invoke callback props.\n    const selectedRoleNameRef = useRef<Role['name'] | undefined>();\n    // Setter for the ref. Avoids a re-render.\n    const setSelectedRoleNameRef = useCallback((selectedRoleName?: Role['name']) => {\n      selectedRoleNameRef.current = selectedRoleName;\n    }, []);\n\n    const [popoverTarget, setPopoverTarget] = useState<{\n      portal: HTMLLIElement;\n      button: HTMLButtonElement | null;\n    } | null>(null);\n\n    const itemElsRef = useRef<{ itemEls: HTMLLIElement[]; viewAllItemEls: HTMLLIElement[] }>({\n      itemEls: [],\n      viewAllItemEls: []\n    });\n\n    // This function merges the pre-defined actions(add & edit) to the item object.\n    const mergeItemActions = (\n      items: StakeholdersProps['items'] | NonNullable<StakeholdersProps['viewAll']>['items']\n    ) => {\n      return items.map(({ onEdit, onRemove, ...rest }, i) => {\n        let itemActions: Action[] = [];\n        const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];\n\n        if (onEdit) {\n          itemActions = [\n            {\n              id: 'edit',\n              text: t('edit'),\n              icon: 'pencil',\n              onClick: () => {\n                setEditing(true);\n                setPopoverTarget({\n                  portal: elArray[i],\n                  button: elArray[i].querySelector<HTMLButtonElement>(\n                    'button[aria-haspopup=\"menu\"]'\n                  )\n                });\n\n                onEdit?.();\n              }\n            }\n          ];\n        }\n\n        if (onRemove) {\n          itemActions = [\n            ...itemActions,\n            {\n              id: 'remove',\n              text: t('remove'),\n              icon: 'trash',\n              onClick: () => {\n                onRemove?.();\n              }\n            }\n          ];\n        }\n\n        return {\n          ...rest,\n          ref: (el: HTMLLIElement) => {\n            elArray[i] = el;\n          },\n          actions: itemActions\n        };\n      });\n    };\n\n    const closePopover = () => {\n      if (!popoverTarget || (form.loading && progressMsgRef.current === t('submitting'))) return;\n      popoverTarget.button?.focus();\n      setPopoverTarget(null);\n      setEditing(false);\n      progressMsgRef.current = t('loading');\n    };\n\n    let formContent: ReactNode = null;\n    if (\n      (mode === 'add' || editing) &&\n      (!form.loading || progressMsgRef.current === t('submitting'))\n    ) {\n      formContent = (\n        <StakeholderForm\n          roles={form.roles}\n          currentRole={form.currentRole}\n          renderer={form.renderer}\n          rendererProps={form.rendererProps}\n          setSelectedRoleNameRef={setSelectedRoleNameRef}\n        />\n      );\n    }\n\n    // Actions used for add and edit both in the modal and the popover.\n    let formActions: ReactNode = null;\n    if (\n      (mode === 'add' || editing) &&\n      (!form.loading || progressMsgRef.current === t('submitting'))\n    ) {\n      const closeForm = () => {\n        if (mode === 'add') {\n          modalMethods.current?.dismiss();\n        } else {\n          closePopover();\n        }\n      };\n\n      formActions = (\n        <>\n          <Button\n            disabled={form.loading}\n            onClick={() => {\n              form.onDismiss({ closeForm });\n            }}\n          >\n            {t('cancel')}\n          </Button>\n          <Button\n            disabled={form.loading}\n            type='submit'\n            variant='primary'\n            onClick={() => {\n              progressMsgRef.current = t('submitting');\n              form.onSubmit({\n                selectedRoleName: selectedRoleNameRef.current,\n                closeForm\n              });\n            }}\n          >\n            {t('submit')}\n          </Button>\n        </>\n      );\n    }\n\n    // Content for the modal either for adding new or viewing all.\n    let modalContent: ReactNode = null;\n    if (mode === 'add') modalContent = formContent;\n\n    if (!viewAll.loading && (mode === 'viewAll' || (editing && modalMethods.current))) {\n      modalContent = (\n        <ViewAll\n          items={mergeItemActions(viewAll.items)}\n          actions={[\n            {\n              id: 'addStakeHolder',\n              text: 'Add new',\n              onClick: () => {\n                setMode('add');\n                onAddNew?.();\n              }\n            }\n          ]}\n          searchInputProps={\n            viewAll.onSearch\n              ? {\n                  value: viewAllSearchValue,\n                  onSearchChange: (value: string) => {\n                    setViewAllSearchValue(value);\n                    viewAll?.onSearch?.(value);\n                  }\n                }\n              : undefined\n          }\n        />\n      );\n    }\n\n    useEffect(() => {\n      if (!mode) {\n        modalMethods.current = undefined;\n        return;\n      }\n\n      const modalProps: OmitStrict<ModalProps, 'heading'> = {\n        progress:\n          (mode === 'add' && form.loading) || viewAll.loading\n            ? { message: progressMsgRef.current }\n            : undefined,\n        count: mode === 'viewAll' ? count : undefined,\n        children: modalContent,\n        actions: mode === 'add' ? formActions : undefined,\n        onRequestDismiss:\n          form.loading && progressMsgRef.current === t('submitting') ? () => false : undefined\n      };\n\n      if (modalMethods.current) {\n        modalMethods.current.update(modalProps);\n      } else if (mode === 'add' || mode === 'viewAll') {\n        modalMethods.current = createModal(Modal, {\n          ...modalProps,\n          heading: mode === 'add' ? t('add_stakeholders') : t('view_stakeholders'),\n          onAfterClose: () => {\n            if (mode === 'add') {\n              form.onAfterClose?.();\n            } else {\n              setViewAllSearchValue('');\n              viewAll.onAfterClose?.();\n            }\n\n            progressMsgRef.current = t('loading');\n            setMode(undefined);\n          }\n        });\n      }\n    }, [mode, modalContent, form.loading, formActions, count, viewAll.loading]);\n\n    // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n    useOuterEvent('mousedown', [popoverRef], closePopover);\n\n    let editPopover: ReactNode = null;\n    if (popoverTarget) {\n      editPopover = (\n        <StyledPopover\n          ref={popoverRef}\n          target={popoverTarget.button}\n          placement='auto'\n          role='dialog'\n        >\n          <Flex container={{ direction: 'column', gap: 2, pad: 2 }}>\n            <Text variant='h3'>{t('edit_stakeholder')}</Text>\n            <StyledEditFormWrap aria-busy={form.loading ? 'true' : 'false'}>\n              <Progress placement='local' visible={form.loading} message={progressMsgRef.current} />\n              {(!form.loading || progressMsgRef.current === t('submitting')) && (\n                <StakeholderForm\n                  roles={form.roles}\n                  currentRole={form.currentRole}\n                  renderer={form.renderer}\n                  rendererProps={form.rendererProps}\n                  setSelectedRoleNameRef={setSelectedRoleNameRef}\n                />\n              )}\n            </StyledEditFormWrap>\n            {formActions && <Flex container={{ justify: 'between' }}>{formActions}</Flex>}\n          </Flex>\n        </StyledPopover>\n      );\n    }\n\n    const onKeydown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closePopover();\n      }\n    };\n\n    useEffect(() => {\n      if (!popoverTarget) return;\n      document.addEventListener('keydown', onKeydown);\n      return () => {\n        document.removeEventListener('keydown', onKeydown);\n      };\n    }, [popoverTarget]);\n\n    useAfterInitialEffect(() => {\n      if (!popoverTarget) form.onAfterClose?.();\n    }, [popoverTarget]);\n\n    return (\n      <>\n        <StyledStakeholders\n          {...restProps}\n          ref={ref}\n          icon='person'\n          name={t('view_stakeholders')}\n          headingTag='h3'\n          loading={loading}\n          count={count}\n          error={error}\n          items={useMemo(\n            () => mergeItemActions(itemsProp.slice(0, 3)),\n            [mergeItemActions, itemsProp]\n          )}\n          actions={\n            onAddNew\n              ? [\n                  {\n                    text: t('add'),\n                    id: 'add_new',\n                    icon: 'plus',\n                    onClick() {\n                      setMode('add');\n                      onAddNew?.();\n                    }\n                  }\n                ]\n              : undefined\n          }\n          onViewAll={\n            onViewAll && count && count > 3\n              ? () => {\n                  setMode('viewAll');\n                  onViewAll?.();\n                }\n              : undefined\n          }\n        />\n        {popoverTarget && createPortal(editPopover, popoverTarget.portal)}\n      </>\n    );\n  }\n);\n\nexport default Stakeholders;\n"]}

package/lib/components/Tags/Tags.js

@@ -214,7 +214,7 @@ const Tags = forwardRef(({ tags, availableTags, loading, error, onSearch, onTagC
                 return (_jsx(Tag, { onClick: () => onTagClick?.(tag), children: tag }, tag));
             }) })) : (_jsx(EmptyState, {}));
     }, [loading, error, tags]);
-    return (_jsxs(Card, { ref: consolidatedRef, ...restProps, as: StyledTags, viewAll: viewAll, isLoading: loading, children: [_jsxs(CardHeader, { children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'tag' }), _jsx(Text, { variant: 'h2', children: t('tags') }), _jsx(Count, { children: tags.length })] }), _jsx(Actions, { items: onEditTags
+    return (_jsxs(Card, { ref: consolidatedRef, ...restProps, as: StyledTags, viewAll: viewAll, isLoading: loading, children: [_jsxs(CardHeader, { children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'tag' }), _jsx(Text, { variant: 'h3', children: t('tags') }), _jsx(Count, { children: tags.length })] }), _jsx(Actions, { items: onEditTags
                             ? [
                                 {
                                     id: 'editTags',