@pega/cosmos-react-work 5.0.0-dev.4.9 → 5.0.0-dev.5.0

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

@@ -0,0 +1,559 @@
+import styled, { css } from 'styled-components';
+import { getContrast, hideVisually, meetsContrastGuidelines, readableColor, rgba, transparentize } from 'polished';
+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 { StyledAssignments } from '../Assignments/Assignments.styles';
+import { useCaseViewContext } from './CaseView.context';
+const labelChWidth = 16;
+const inlineEndButtonOffset = '0.375rem';
+export const StyledCaseSummaryFields = styled.div ``;
+StyledCaseSummaryFields.defaultProps = defaultThemeProp;
+export const StyledSummaryPrimaryList = styled(FieldValueList)(({ theme, wrapped }) => {
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+      ${wrapped
+        ? css `
+            grid-template-columns: minmax(0, 1fr);
+          `
+        : css `
+            grid-template-columns: ${labelChWidth}ch auto;
+          `}
+
+      ${StyledFieldValue} {
+        font-size: ${fontSizes[theme.components.text.h1['font-size']]};
+        font-weight: ${theme.components.text.h1['font-weight']};
+      }
+    `;
+});
+StyledSummaryPrimaryList.defaultProps = defaultThemeProp;
+export const StyledSummarySecondaryList = styled(FieldValueList)(() => {
+    return css `
+    ${StyledStackedFieldValue} {
+      grid-column: 1 / -1;
+    }
+  `;
+});
+export const StyledSummaryTabContent = styled(CardContent)(({ theme }) => {
+    const { base: { spacing } } = theme;
+    const containerWidthCh = colCountChWidth[1].containerWidth;
+    const containerWidthMinusLabel = `${containerWidthCh - labelChWidth}ch`;
+    return css `
+    ${StyledSummarySecondaryList} {
+      > ${StyledStackedFieldValue} {
+        max-width: ${containerWidthCh}ch;
+      }
+
+      > ${StyledFieldValue} {
+        max-width: calc(${containerWidthMinusLabel} - 2 * ${spacing});
+      }
+    }
+  `;
+});
+StyledSummaryTabContent.defaultProps = defaultThemeProp;
+export const StyledCaseHeader = styled.header(({ theme }) => {
+    const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));
+    return css `
+    background-color: ${theme.base.palette['brand-primary']};
+    color: ${color};
+    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+    position: relative;
+
+    h1:focus-visible {
+      outline: transparent;
+      box-shadow: ${theme.base.shadow.focus};
+    }
+
+    ${StyledMenu} {
+      color: ${theme.base.palette['foreground-color']};
+      z-index: ${theme.base['z-index'].popover + 1};
+    }
+  `;
+});
+StyledCaseHeader.defaultProps = defaultThemeProp;
+export const StyledFollowIconWrap = styled.label `
+  font-size: 1.25rem;
+  input {
+    ${hideVisually}
+  }
+
+  input:focus + svg {
+    box-shadow: ${({ theme }) => theme.base.shadow.focus};
+  }
+`;
+StyledFollowIconWrap.defaultProps = defaultThemeProp;
+export const StyledSubheading = styled.p ``;
+StyledSubheading.defaultProps = defaultThemeProp;
+export const StyledHeaderActions = styled.div(({ offsetEnd, theme }) => {
+    return css `
+    margin-inline-start: auto;
+    padding-block: ${theme.base.spacing};
+    padding-inline-start: calc(2 * ${theme.base.spacing});
+
+    ${offsetEnd &&
+        css `
+      padding-inline-end: ${inlineEndButtonOffset};
+    `};
+  `;
+});
+StyledHeaderActions.defaultProps = defaultThemeProp;
+export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
+    const color = readableColor(theme.base.palette['brand-primary']);
+    const transparentColor = tryCatch(() => transparentize(0.1, color));
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    const idStyle = css `
+    color: ${transparentColor};
+    font-size: ${fontSize.s};
+    font-weight: normal;
+  `;
+    return css `
+    word-break: break-word;
+
+    ${StyledSubheading} {
+      ${idStyle}
+    }
+
+    ${StyledBreadcrumbs} {
+      max-width: 100%;
+
+      > a,
+      > span,
+      > button,
+      > svg {
+        ${idStyle}
+      }
+
+      > a,
+      > button {
+        &:focus {
+          box-shadow: ${theme.base.shadow.focus};
+        }
+      }
+
+      ${StyledPopover}:not(${StyledTooltip}) {
+        color: ${theme.base.palette['foreground-color']};
+      }
+    }
+
+    > ${StyledText} > ${StyledLink} {
+      color: ${color};
+    }
+
+    + ${StyledHeaderActions} {
+      padding-inline-start: 0;
+    }
+  `;
+});
+StyledCaseHeaderText.defaultProps = defaultThemeProp;
+export const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {
+    const { base: { palette: { 'brand-primary': primary, interactive } } } = theme;
+    const interactiveUsable = getContrast(primary, interactive) >= 4.5;
+    const color = interactiveUsable ? interactive : readableColor(primary);
+    let hoverBackground = rgba(color, 0.15);
+    if (interactiveUsable) {
+        hoverBackground = readableHue(hoverBackground, color);
+    }
+    return css `
+    --button-background-color: ${primary};
+    color: ${color};
+    background-color: ${primary};
+    border-color: ${color};
+
+    @media (hover: hover) {
+      &:hover {
+        --button-background-color: ${hoverBackground};
+        color: ${color};
+        background-color: ${hoverBackground};
+        border-color: ${color};
+      }
+    }
+  `;
+});
+StyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;
+export const StyledHeaderSummaryBlock = styled.div(({ hasItems, theme }) => {
+    const { base: { spacing, palette: { 'brand-primary': primary } } } = theme;
+    const color = readableColor(primary);
+    const transparentColor = tryCatch(() => transparentize(0.5, color));
+    return css `
+    ${hasItems &&
+        css `
+      border-inline-start: 0.0625rem solid ${transparentColor};
+    `}
+
+    ${StyledStackedFieldValue}:first-child {
+      margin-inline-start: calc(2 * ${spacing});
+    }
+  `;
+});
+StyledHeaderSummaryBlock.defaultProps = defaultThemeProp;
+const popoverColorReset = (theme) => {
+    const { base: { palette: { interactive, light, 'foreground-color': baseForeground } } } = theme;
+    return css `
+    ${StyledPopover}:not(${StyledTooltip}) {
+      color: ${baseForeground};
+
+      ${StyledButtonLink},
+      ${StyledLink} {
+        color: ${interactive};
+        text-decoration: none;
+
+        &:hover,
+        &:active {
+          text-decoration: underline;
+        }
+
+        &:focus {
+          box-shadow: inset 0 0 0 0.0625rem ${light}, 0 0 0.125rem 0.0625rem ${interactive};
+        }
+      }
+    }
+  `;
+};
+export const StyledHeaderSummary = styled.dl(({ theme }) => {
+    const { base: { palette: { 'brand-primary': primary, interactive } } } = theme;
+    const interactiveUsable = meetsContrastGuidelines(primary, interactive).AA;
+    const color = readableColor(primary);
+    const transparentColor = tryCatch(() => transparentize(0.1, color));
+    return css `
+    max-width: 100%;
+    min-width: 0;
+
+    > ${StyledStackedFieldValue} {
+      > ${StyledLabel} {
+        color: ${transparentColor};
+        white-space: nowrap;
+      }
+
+      > ${StyledFieldValue} {
+        color: ${color};
+        white-space: nowrap;
+      }
+
+      ${StyledButtonLink},
+      ${StyledLink} {
+        &:focus-visible {
+          box-shadow: inset 0 0 0 0.0625rem ${color};
+        }
+
+        ${!interactiveUsable &&
+        css `
+          color: ${color};
+          text-decoration: underline;
+        `}
+      }
+
+      ${popoverColorReset(theme)}
+    }
+  `;
+});
+StyledHeaderSummary.defaultProps = defaultThemeProp;
+export const StyledHeaderSummaryValue = styled(StyledFieldValue)(({ bold, truncate, theme }) => {
+    const { base: { 'content-width': { xs } }, components: { text: { h1: { 'font-weight': h1Weight } } } } = theme;
+    return css `
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      ${truncate &&
+        css `
+        max-width: ${xs};
+      `}
+
+      ${bold &&
+        css `
+        font-weight: ${h1Weight};
+      `}
+
+      /*
+       * :not([hidden]) necessary to prevent hidden span with preview a11y instructions from
+       * factoring into scrollWidth of element when determining truncation.
+       */
+      > :not([hidden]) {
+        display: inline;
+      }
+    `;
+});
+StyledHeaderSummaryValue.defaultProps = defaultThemeProp;
+export const StyledCaseSummaryInfo = styled.div(() => {
+    const { intelligentGuidance } = useCaseViewContext();
+    return css `
+    overflow: auto;
+    flex: 1;
+    ${intelligentGuidance &&
+        css `
+      /* Accounts for collapsed intelligentGuidance list covering summary panel content when fully scrolled. */
+      padding-block-end: 4rem;
+    `}
+  `;
+});
+StyledCaseSummaryInfo.defaultProps = defaultThemeProp;
+export const StyledCaseSummaryContainer = styled.div(({ theme }) => {
+    return css `
+    padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
+  `;
+});
+StyledCaseSummaryContainer.defaultProps = defaultThemeProp;
+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;
+    box-shadow: ${theme.base.shadow.low};
+
+    ${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} {
+      ${summaryExpanded
+        ? css `
+            transform: rotate(${rtl ? '180deg' : '0'});
+          `
+        : css `
+            transform: rotate(-90deg);
+          `}
+    }
+  `;
+});
+StyledExpandCollapseSummaryButton.defaultProps = defaultThemeProp;
+export const StyledCaseSummary = styled.div(() => {
+    const { summaryExpanded, aboveMD } = useCaseViewContext();
+    return css `
+    position: relative;
+    height: 100%;
+    ${aboveMD &&
+        summaryExpanded &&
+        css `
+      width: 25rem;
+    `}
+  `;
+});
+export const StyledWorkArea = styled.div(({ theme }) => {
+    const { summaryExpanded, aboveMD, intelligentGuidance, stages, tasks } = useCaseViewContext();
+    let pbeRem = 0;
+    if (intelligentGuidance) {
+        pbeRem = aboveMD && !summaryExpanded ? 4 : 6;
+    }
+    return css `
+    grid-area: work-area;
+    padding: calc(2 * ${theme.base.spacing});
+
+    ${aboveMD &&
+        css `
+      padding: calc(2 * ${theme.base.spacing}) 0;
+
+      /* This is required to make scrollStick work. */
+      height: max-content;
+
+      ${!summaryExpanded &&
+            css `
+        margin-inline-start: calc(2 * ${theme.base.spacing});
+      `}
+    `}
+
+    /* Order of style here is necessary for overriding styles above. */
+    ${pbeRem > 0 &&
+        css `
+      /* 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}${StyledAssignments} {
+        margin-block-start: calc(-2 * ${theme.base.spacing});
+        border-start-start-radius: 0;
+        border-start-end-radius: 0;
+      }
+    `}
+  `;
+});
+StyledWorkArea.defaultProps = defaultThemeProp;
+export const StyledUtilitiesHeading = styled(Text) ``;
+export const StyledExpandCollapseUtilitiesButton = styled(StyledExpandCollapseButton)(() => {
+    const { utilitiesExpanded } = useCaseViewContext();
+    const { rtl } = useDirection();
+    return css `
+    /* Centers button over the utilities summary */
+    margin-inline-end: ${utilitiesExpanded && '0.625rem'};
+
+    ${StyledIcon} {
+      ${utilitiesExpanded !== rtl
+        ? css `
+            transform: rotate(180deg);
+          `
+        : css `
+            transform: rotate(0);
+          `}
+    }
+  `;
+});
+StyledExpandCollapseUtilitiesButton.defaultProps = defaultThemeProp;
+export const StyledUtilities = styled.div(({ theme }) => {
+    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;
+export const StyledSummary = styled.div(({ theme }) => {
+    const { summaryExpanded, aboveMD } = useCaseViewContext();
+    return css `
+    top: ${summaryExpanded ? 'var(--top-offset)' : 'var(--appshell-offset, 0)'};
+    width: 100%;
+    background-color: ${theme.base.palette['primary-background']};
+    z-index: ${theme.base['z-index'].popover};
+
+    ${aboveMD &&
+        summaryExpanded &&
+        css `
+      height: var(--case-view-height);
+    `}
+
+    ${aboveMD
+        ? css `
+          position: sticky;
+        `
+        : css `
+          @media (min-height: ${theme.base.breakpoints.sm}) {
+            position: sticky;
+          }
+        `}
+  `;
+});
+StyledSummary.defaultProps = defaultThemeProp;
+export const StyledCaseDrawer = styled.div(({ theme }) => {
+    return css `
+    min-width: 21.875rem;
+    max-width: 31.25rem;
+    width: calc((100vw - 31.25rem) / 10 + 21.875rem);
+    background-color: ${theme.base.palette['primary-background']};
+    height: var(--case-view-height);
+    top: var(--top-offset);
+    z-index: ${theme.base['z-index'].drawer - 1};
+  `;
+});
+StyledCaseDrawer.defaultProps = defaultThemeProp;
+export const StyledCaseDrawerContent = styled.div(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette['app-background']};
+    padding: calc(2 * ${theme.base.spacing});
+    height: 100%;
+    overflow: auto;
+  `;
+});
+StyledCaseDrawerContent.defaultProps = defaultThemeProp;
+export const StyledPersistentUtility = styled.div(({ theme }) => {
+    return css `
+    width: ${theme.base['content-width'].md};
+    overflow: auto;
+    position: sticky;
+    z-index: 1;
+    height: var(--case-view-height);
+    top: var(--top-offset);
+    padding-block: calc(2 * ${theme.base.spacing});
+  `;
+});
+StyledPersistentUtility.defaultProps = defaultThemeProp;
+export const ScrollStick = styled.div `
+  position: sticky;
+  top: 0;
+`;
+export const StyledCaseView = styled.div(({ theme }) => {
+    const { aboveMD } = useCaseViewContext();
+    return css `
+    --top-offset: calc(var(--appshell-offset, 0rem) + var(--summary-height));
+    --case-view-height: calc(100vh - var(--top-offset));
+    position: relative;
+    min-height: var(--case-view-height);
+    background-color: ${theme.base.palette['app-background']};
+
+    ${aboveMD &&
+        css `
+      ${StyledUtilities}:last-child {
+        margin-inline-end: calc(2 * ${theme.base.spacing});
+      }
+    `}
+  `;
+});
+StyledCaseView.defaultProps = defaultThemeProp;
+export const StyledUtilitiesHeader = styled(Text) `
+  align-self: center;
+
+  &:not(:focus) {
+    ${hideVisually}
+  }
+`;
+StyledUtilitiesHeader.defaultProps = defaultThemeProp;
+//# sourceMappingURL=CaseView.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EACL,WAAW,EACX,YAAY,EACZ,uBAAuB,EACvB,aAAa,EACb,IAAI,EACJ,cAAc,EACf,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,MAAM,EACN,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,uBAAuB,EACvB,UAAU,EACV,WAAW,EACX,aAAa,EACb,UAAU,EACV,aAAa,EACb,QAAQ,EAER,cAAc,EACd,UAAU,EACV,WAAW,EACX,UAAU,EACV,IAAI,EACJ,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,MAAM,+DAA+D,CAAC;AAEhG,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,MAAM,qBAAqB,GAAG,UAAU,CAAC;AAEzC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEpD,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,cAAc,CAAC,CAC5D,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACrB,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEvF,OAAO,GAAG,CAAA;QACN,OAAO;QACP,CAAC,CAAC,GAAG,CAAA;;WAEF;QACH,CAAC,CAAC,GAAG,CAAA;qCACwB,YAAY;WACtC;;QAEH,gBAAgB;qBACH,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBAC1D,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;KAEzD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC,GAAG,EAAE;IACpE,OAAO,GAAG,CAAA;MACN,uBAAuB;;;GAG1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,KAAK,CAAC;IACV,MAAM,gBAAgB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;IAC3D,MAAM,wBAAwB,GAAG,GAAG,gBAAgB,GAAG,YAAY,IAAI,CAAC;IAExE,OAAO,GAAG,CAAA;MACN,0BAA0B;UACtB,uBAAuB;qBACZ,gBAAgB;;;UAG3B,gBAAgB;0BACA,wBAAwB,UAAU,OAAO;;;GAGhE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IAEjF,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;aAC9C,KAAK;eACH,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;oBAK5C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;MAGrC,UAAU;eACD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;iBACpC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,GAAG,CAAC;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAA;;;MAG1C,YAAY;;;;kBAIA,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;CAEvD,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAAA,EAAE,CAAC;AAE3C,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,OAAO,GAAG,CAAA;;qBAES,KAAK,CAAC,IAAI,CAAC,OAAO;qCACF,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEjD,SAAS;QACX,GAAG,CAAA;4BACqB,qBAAqB;KAC5C;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC;IACjE,MAAM,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;IACpE,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,MAAM,OAAO,GAAG,GAAG,CAAA;aACR,gBAAgB;iBACZ,QAAQ,CAAC,CAAC;;GAExB,CAAC;IAEF,OAAO,GAAG,CAAA;;;MAGN,gBAAgB;QACd,OAAO;;;MAGT,iBAAiB;;;;;;;UAOb,OAAO;;;;;;wBAMO,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;QAIvC,aAAa,QAAQ,aAAa;iBACzB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;QAI/C,UAAU,MAAM,UAAU;eACnB,KAAK;;;QAGZ,mBAAmB;;;GAGxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,WAAW,EAAE,EACnD,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,EAAE,WAAW,CAAC,IAAI,GAAG,CAAC;IACnE,MAAM,KAAK,GAAG,iBAAiB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvE,IAAI,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAExC,IAAI,iBAAiB,EAAE;QACrB,eAAe,GAAG,WAAW,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;KACvD;IAED,OAAO,GAAG,CAAA;iCACqB,OAAO;aAC3B,KAAK;wBACM,OAAO;oBACX,KAAK;;;;qCAIY,eAAe;iBACnC,KAAK;4BACM,eAAe;wBACnB,KAAK;;;GAG1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,8BAA8B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/D,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAwB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAChG,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EACP,OAAO,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,EACtC,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;IAEpE,OAAO,GAAG,CAAA;MACN,QAAQ;QACV,GAAG,CAAA;6CACsC,gBAAgB;KACxD;;MAEC,uBAAuB;sCACS,OAAO;;GAE1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,iBAAiB,GAAG,CAAC,KAAmB,EAAE,EAAE;IAChD,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,EACpE,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;MACN,aAAa,QAAQ,aAAa;eACzB,cAAc;;QAErB,gBAAgB;QAChB,UAAU;iBACD,WAAW;;;;;;;;;8CASkB,KAAK,4BAA4B,WAAW;;;;GAIvF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,WAAW,EAAE,EACnD,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,iBAAiB,GAAG,uBAAuB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC;IAC3E,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;IAEpE,OAAO,GAAG,CAAA;;;;QAIJ,uBAAuB;UACrB,WAAW;iBACJ,gBAAgB;;;;UAIvB,gBAAgB;iBACT,KAAK;;;;QAId,gBAAgB;QAChB,UAAU;;8CAE4B,KAAK;;;UAGzC,CAAC,iBAAiB;QACpB,GAAG,CAAA;mBACQ,KAAK;;SAEf;;;QAGD,iBAAiB,CAAC,KAAK,CAAC;;GAE7B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAC9D,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAA+D,EAAE,EAAE;IACzF,MAAM,EACJ,IAAI,EAAE,EACJ,eAAe,EAAE,EAAE,EAAE,EAAE,EACxB,EACD,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAChC,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;;;;QAIN,QAAQ;QACV,GAAG,CAAA;qBACY,EAAE;OAChB;;QAEC,IAAI;QACN,GAAG,CAAA;uBACc,QAAQ;OACxB;;;;;;;;;KASF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACnD,MAAM,EAAE,mBAAmB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAErD,OAAO,GAAG,CAAA;;;MAGN,mBAAmB;QACrB,GAAG,CAAA;;;KAGF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;0BACc,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;GAChF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE;IAC5D,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;GAIb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,CAAC,MAAM,iCAAiC,GAAG,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChG,MAAM,EAAE,eAAe,EAAE,GAAG,kBAAkB,EAAE,CAAC;IACjD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;sCAC0B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;;SAE3D,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,KAAK,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;;;cAG3D,KAAK,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;;;;WAI1D,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,MAAM,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;;;;;kBAK1D,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;;MAEjC,eAAe;QACf,CAAC,CAAC,GAAG,CAAA;wCAC6B,KAAK,CAAC,IAAI,CAAC,OAAO;;SAEjD;QACH,CAAC,CAAC,GAAG,CAAA;;;kBAGO,KAAK,CAAC,IAAI,CAAC,OAAO;;SAE3B;;MAEH,UAAU;QACR,eAAe;QACf,CAAC,CAAC,GAAG,CAAA;gCACmB,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG;WACzC;QACH,CAAC,CAAC,GAAG,CAAA;;WAEF;;GAER,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iCAAiC,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElE,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAC/C,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAE1D,OAAO,GAAG,CAAA;;;MAGN,OAAO;QACT,eAAe;QACf,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAC9F,IAAI,MAAM,GAAG,CAAC,CAAC;IAEf,IAAI,mBAAmB,EAAE;QACvB,MAAM,GAAG,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KAC9C;IAED,OAAO,GAAG,CAAA;;wBAEY,KAAK,CAAC,IAAI,CAAC,OAAO;;MAEpC,OAAO;QACT,GAAG,CAAA;0BACmB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;QAKpC,CAAC,eAAe;YAClB,GAAG,CAAA;wCAC+B,KAAK,CAAC,IAAI,CAAC,OAAO;OACnD;KACF;;;MAGC,MAAM,GAAG,CAAC;QACZ,GAAG,CAAA;;2BAEoB,MAAM;KAC5B;;MAEC,MAAM;QACR,KAAK;QACL,GAAG,CAAA;QACC,YAAY;4CACwB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;YAGjE,WAAW;;;;;YAKX,WAAW;;;;;QAKf,UAAU,GAAG,iBAAiB;wCACE,KAAK,CAAC,IAAI,CAAC,OAAO;;;;KAIrD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAErD,MAAM,CAAC,MAAM,mCAAmC,GAAG,MAAM,CAAC,0BAA0B,CAAC,CAAC,GAAG,EAAE;IACzF,MAAM,EAAE,iBAAiB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IACnD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;yBAEa,iBAAiB,IAAI,UAAU;;MAElD,UAAU;QACR,iBAAiB,KAAK,GAAG;QACzB,CAAC,CAAC,GAAG,CAAA;;WAEF;QACH,CAAC,CAAC,GAAG,CAAA;;WAEF;;GAER,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mCAAmC,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpE,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAErE,OAAO,GAAG,CAAA;;6BAEiB,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGzC,iBAAiB;QACnB,OAAO;QACP,CAAC,OAAO;QACR,GAAG,CAAA;;;KAGF;;MAEC,OAAO;QACT,iBAAiB;QACjB,GAAG,CAAA;;KAEF;;;;MAIC,sBAAsB;;QAEpB,CAAC,CAAC,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,IAAI,iBAAiB,IAAI,CAAC,OAAO,CAAC,CAAC;QACjF,YAAY,EAAE;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAE1D,OAAO,GAAG,CAAA;WACD,eAAe,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,2BAA2B;;wBAEtD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;eACjD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO;;MAEtC,OAAO;QACT,eAAe;QACf,GAAG,CAAA;;KAEF;;MAEC,OAAO;QACP,CAAC,CAAC,GAAG,CAAA;;SAEF;QACH,CAAC,CAAC,GAAG,CAAA;gCACqB,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;SAGhD;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;;wBAIY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;eAGjD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC;GAC5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;wBACpC,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;;;;;8BAMb,KAAK,CAAC,IAAI,CAAC,OAAO;GAC7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGpC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,MAAM,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAEzC,OAAO,GAAG,CAAA;;;;;wBAKY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;;MAEtD,OAAO;QACT,GAAG,CAAA;QACC,eAAe;sCACe,KAAK,CAAC,IAAI,CAAC,OAAO;;KAEnD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;MAI3C,YAAY;;CAEjB,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\nimport {\n  getContrast,\n  hideVisually,\n  meetsContrastGuidelines,\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 { StyledAssignments } from '../Assignments/Assignments.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 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      max-width: 100%;\n\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 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}${StyledAssignments} {\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    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    padding-block: calc(2 * ${theme.base.spacing});\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.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getCaseViewTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["header", "heading", "subheading", "icon", "edit", "actions", "promoted-actions", "summary-fields", "banners", "stages", "tasks", "tabs", "tab-content", "utilities"]>;
+//# sourceMappingURL=CaseView.test-ids.d.ts.map

package/lib/components/CaseView/CaseView.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,uQAepB,CAAC"}

package/lib/components/CaseView/CaseView.test-ids.js

@@ -0,0 +1,18 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getCaseViewTestIds = createTestIds('case-view', [
+    'header',
+    'heading',
+    'subheading',
+    'icon',
+    'edit',
+    'actions',
+    'promoted-actions',
+    'summary-fields',
+    'banners',
+    'stages',
+    'tasks',
+    'tabs',
+    'tab-content',
+    'utilities'
+]);
+//# sourceMappingURL=CaseView.test-ids.js.map

package/lib/components/CaseView/CaseView.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.test-ids.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAC,WAAW,EAAE;IAC3D,QAAQ;IACR,SAAS;IACT,YAAY;IACZ,MAAM;IACN,MAAM;IACN,SAAS;IACT,kBAAkB;IAClB,gBAAgB;IAChB,SAAS;IACT,QAAQ;IACR,OAAO;IACP,MAAM;IACN,aAAa;IACb,WAAW;CACH,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getCaseViewTestIds = createTestIds('case-view', [\n  'header',\n  'heading',\n  'subheading',\n  'icon',\n  'edit',\n  'actions',\n  'promoted-actions',\n  'summary-fields',\n  'banners',\n  'stages',\n  'tasks',\n  'tabs',\n  'tab-content',\n  'utilities'\n] as const);\n"]}