@pega/cosmos-react-work 2.0.0-dev.2.1 → 2.0.0-dev.20.0

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

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAInF,OAAO,EAQL,SAAS,EACT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAOD,eAAO,MAAM,qBAAqB,+HAqFhC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CA+C3E,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EASL,SAAS,EACT,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAOD,eAAO,MAAM,qBAAqB,+HAoFhC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CA+C3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/AppAnnouncement/AppAnnouncement.js

@@ -1,14 +1,17 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { readableColor } from 'polished';
-import { Button, StyledButton, Text, Icon, useI18n, tryCatch, defaultThemeProp } from '@pega/cosmos-react-core';
+import { Button, StyledButton, Text, Icon, registerIcon, useI18n, tryCatch, defaultThemeProp, useDirection } from '@pega/cosmos-react-core';
+import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+registerIcon(timesIcon);
 const StyledDismissButton = styled.button `
   font-size: 1.25rem;
   border: none;
 `;
 export const StyledAppAnnouncement = styled.article(props => {
-    const { theme: { base: { palette: { 'brand-primary': brandBackground }, shadow, spacing, rtl }, components: { card: { 'border-radius': borderRadius } } }, image } = props;
-    const endDir = rtl ? 'left' : 'right';
+    const { theme: { base: { palette: { 'brand-primary': brandBackground }, shadow, spacing }, components: { card: { 'border-radius': borderRadius } } }, image } = props;
+    const { end } = useDirection();
     const color = tryCatch(() => readableColor(brandBackground));
     return css `
     padding: calc(2 * ${spacing});
@@ -19,7 +22,7 @@ export const StyledAppAnnouncement = styled.article(props => {
 
     &::after {
       background: url('${image}') no-repeat;
-      background-position: ${endDir} bottom;
+      background-position: ${end} bottom;
       background-size: contain;
       background-origin: content-box;
       opacity: 0.2;
@@ -28,7 +31,7 @@ export const StyledAppAnnouncement = styled.article(props => {
       position: absolute;
       width: 50%;
       height: 100%;
-      ${endDir}: 0;
+      inset-inline-end: 0;
       bottom: 0;
       padding: calc(2 * ${spacing});
     }
@@ -42,7 +45,7 @@ export const StyledAppAnnouncement = styled.article(props => {
     ${StyledDismissButton} {
       position: absolute;
       top: 0.75rem;
-      ${endDir}: 0.75rem;
+      inset-inline-end: 0.75rem;
       color: inherit;
       z-index: 3;
       &:enabled:hover {
@@ -80,16 +83,9 @@ export const StyledAppAnnouncement = styled.article(props => {
 StyledAppAnnouncement.defaultProps = defaultThemeProp;
 const AppAnnouncement = forwardRef(({ heading, description, details, whatsNewLink, image, onDismiss, ...restProps }, ref) => {
     const t = useI18n();
-    return (React.createElement(StyledAppAnnouncement, { ...restProps, ref: ref, heading: heading, image: image },
-        onDismiss && (React.createElement(Button, { as: StyledDismissButton, variant: 'simple', icon: true, onClick: onDismiss, "aria-label": t('app_announcement_dismiss_button_label_a11y') },
-            React.createElement(Icon, { name: 'times' }))),
-        React.createElement(Text, { variant: 'h2' }, heading || t('app_announcement_details_list_header')),
-        React.createElement("div", null,
-            description && React.createElement("p", null, description),
-            details && (React.createElement("ul", null, details.map((item, index) => {
-                return React.createElement("li", { key: index.toString() }, item);
-            }))),
-            whatsNewLink && (React.createElement(Button, { variant: 'secondary', href: whatsNewLink, target: '_blank' }, t('app_announcement_whats_new_button_label'))))));
+    return (_jsxs(StyledAppAnnouncement, { ...restProps, ref: ref, heading: heading, image: image, children: [onDismiss && (_jsx(Button, { as: StyledDismissButton, variant: 'simple', icon: true, onClick: onDismiss, "aria-label": t('app_announcement_dismiss_button_label_a11y'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)), _jsx(Text, { variant: 'h2', children: heading || t('app_announcement_details_list_header') }, void 0), _jsxs("div", { children: [description && _jsx("p", { children: description }, void 0), details && (_jsx("ul", { children: details.map((item, index) => {
+                            return _jsx("li", { children: item }, index.toString());
+                        }) }, void 0)), whatsNewLink && (_jsx(Button, { variant: 'secondary', href: whatsNewLink, target: '_blank', children: t('app_announcement_whats_new_button_label') }, void 0))] }, void 0)] }, void 0));
 });
 export default AppAnnouncement;
 //# sourceMappingURL=AppAnnouncement.js.map

package/lib/components/AppAnnouncement/AppAnnouncement.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Button,\n  StyledButton,\n  Text,\n  Icon,\n  useI18n,\n  tryCatch,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface AppAnnouncementProps extends BaseProps {\n  /**\n   * Heading text for the announcement.\n   */\n  heading?: string;\n  /**\n   * Description text for the announcement.\n   */\n  description?: string;\n  /**\n   * Announcement details to be displayed in form of bulleted list.\n   */\n  details?: string[];\n  /**\n   * Url to open with What's new link.\n   */\n  whatsNewLink?: string;\n  /**\n   * An image source for the decorative background.\n   */\n  image?: string;\n  /**\n   * Callback when user dismisses the announcements.\n   */\n  onDismiss?: () => void;\n  ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n  font-size: 1.25rem;\n  border: none;\n`;\n\nexport const StyledAppAnnouncement = styled.article<AppAnnouncementProps>(props => {\n  const {\n    theme: {\n      base: {\n        palette: { 'brand-primary': brandBackground },\n        shadow,\n        spacing,\n        rtl\n      },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    image\n  } = props;\n\n  const endDir = rtl ? 'left' : 'right';\n  const color = tryCatch(() => readableColor(brandBackground));\n\n  return css`\n    padding: calc(2 * ${spacing});\n    background: ${brandBackground};\n    border-radius: ${borderRadius};\n    color: ${color};\n    position: relative;\n\n    &::after {\n      background: url('${image}') no-repeat;\n      background-position: ${endDir} bottom;\n      background-size: contain;\n      background-origin: content-box;\n      opacity: 0.2;\n      content: '';\n      display: block;\n      position: absolute;\n      width: 50%;\n      height: 100%;\n      ${endDir}: 0;\n      bottom: 0;\n      padding: calc(2 * ${spacing});\n    }\n\n    h2 {\n      position: relative;\n      z-index: 2;\n      margin-bottom: ${spacing};\n    }\n\n    ${StyledDismissButton} {\n      position: absolute;\n      top: 0.75rem;\n      ${endDir}: 0.75rem;\n      color: inherit;\n      z-index: 3;\n      &:enabled:hover {\n        background: #ffffff19;\n      }\n      &:enabled:focus {\n        box-shadow: ${shadow['focus-inverted']};\n      }\n    }\n\n    > div {\n      width: 75%;\n      position: relative;\n      z-index: 2;\n\n      p,\n      ul {\n        padding-top: calc(2 * ${spacing});\n      }\n\n      ul {\n        padding-inline-start: calc(2 * ${spacing});\n      }\n\n      ${StyledButton} {\n        margin-top: calc(2 * ${spacing});\n        &:enabled:focus,\n        &:not([disabled]):focus {\n          box-shadow: ${shadow['focus-inverted']};\n        }\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: FunctionComponent<AppAnnouncementProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      description,\n      details,\n      whatsNewLink,\n      image,\n      onDismiss,\n      ...restProps\n    }: PropsWithoutRef<AppAnnouncementProps>,\n    ref: AppAnnouncementProps['ref']\n  ) => {\n    const t = useI18n();\n\n    return (\n      <StyledAppAnnouncement {...restProps} ref={ref} heading={heading} image={image}>\n        {onDismiss && (\n          <Button\n            as={StyledDismissButton}\n            variant='simple'\n            icon\n            onClick={onDismiss}\n            aria-label={t('app_announcement_dismiss_button_label_a11y')}\n          >\n            <Icon name='times' />\n          </Button>\n        )}\n        <Text variant='h2'>{heading || t('app_announcement_details_list_header')}</Text>\n        <div>\n          {description && <p>{description}</p>}\n          {details && (\n            <ul>\n              {details.map((item, index) => {\n                return <li key={index.toString()}>{item}</li>;\n              })}\n            </ul>\n          )}\n          {whatsNewLink && (\n            <Button variant='secondary' href={whatsNewLink} target='_blank'>\n              {t('app_announcement_whats_new_button_label')}\n            </Button>\n          )}\n        </div>\n      </StyledAppAnnouncement>\n    );\n  }\n);\n\nexport default AppAnnouncement;\n"]}
+{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,gBAAgB,EAGhB,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,YAAY,CAAC,SAAS,CAAC,CAAC;AA8BxB,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAA;;;CAGxC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,OAAO,CAAuB,KAAK,CAAC,EAAE;IAChF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAC7C,MAAM,EACN,OAAO,EACR,EACD,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EACD,KAAK,EACN,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC;IAE7D,OAAO,GAAG,CAAA;wBACY,OAAO;kBACb,eAAe;qBACZ,YAAY;aACpB,KAAK;;;;yBAIO,KAAK;6BACD,GAAG;;;;;;;;;;;0BAWN,OAAO;;;;;;uBAMV,OAAO;;;MAGxB,mBAAmB;;;;;;;;;;sBAUH,MAAM,CAAC,gBAAgB,CAAC;;;;;;;;;;;gCAWd,OAAO;;;;yCAIE,OAAO;;;QAGxC,YAAY;+BACW,OAAO;;;wBAGd,MAAM,CAAC,gBAAgB,CAAC;;;;GAI7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,eAAe,GAA2D,UAAU,CACxF,CACE,EACE,OAAO,EACP,WAAW,EACX,OAAO,EACP,YAAY,EACZ,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EAC0B,EACxC,GAAgC,EAChC,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,qBAAqB,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,aAC3E,SAAS,IAAI,CACZ,KAAC,MAAM,IACL,EAAE,EAAE,mBAAmB,EACvB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,SAAS,gBACN,CAAC,CAAC,4CAA4C,CAAC,YAE3D,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACd,CACV,EACD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,IAAI,CAAC,CAAC,sCAAsC,CAAC,WAAQ,EAChF,0BACG,WAAW,IAAI,sBAAI,WAAW,WAAK,EACnC,OAAO,IAAI,CACV,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;4BAC3B,OAAO,uBAA4B,IAAI,IAAvB,KAAK,CAAC,QAAQ,EAAE,CAAa,CAAC;wBAChD,CAAC,CAAC,WACC,CACN,EACA,YAAY,IAAI,CACf,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAC,QAAQ,YAC5D,CAAC,CAAC,yCAAyC,CAAC,WACtC,CACV,YACG,YACgB,CACzB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Button,\n  StyledButton,\n  Text,\n  Icon,\n  registerIcon,\n  useI18n,\n  tryCatch,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  useDirection\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps {\n  /**\n   * Heading text for the announcement.\n   */\n  heading?: string;\n  /**\n   * Description text for the announcement.\n   */\n  description?: string;\n  /**\n   * Announcement details to be displayed in form of bulleted list.\n   */\n  details?: string[];\n  /**\n   * Url to open with What's new link.\n   */\n  whatsNewLink?: string;\n  /**\n   * An image source for the decorative background.\n   */\n  image?: string;\n  /**\n   * Callback when user dismisses the announcements.\n   */\n  onDismiss?: () => void;\n  ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n  font-size: 1.25rem;\n  border: none;\n`;\n\nexport const StyledAppAnnouncement = styled.article<AppAnnouncementProps>(props => {\n  const {\n    theme: {\n      base: {\n        palette: { 'brand-primary': brandBackground },\n        shadow,\n        spacing\n      },\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    },\n    image\n  } = props;\n\n  const { end } = useDirection();\n  const color = tryCatch(() => readableColor(brandBackground));\n\n  return css`\n    padding: calc(2 * ${spacing});\n    background: ${brandBackground};\n    border-radius: ${borderRadius};\n    color: ${color};\n    position: relative;\n\n    &::after {\n      background: url('${image}') no-repeat;\n      background-position: ${end} bottom;\n      background-size: contain;\n      background-origin: content-box;\n      opacity: 0.2;\n      content: '';\n      display: block;\n      position: absolute;\n      width: 50%;\n      height: 100%;\n      inset-inline-end: 0;\n      bottom: 0;\n      padding: calc(2 * ${spacing});\n    }\n\n    h2 {\n      position: relative;\n      z-index: 2;\n      margin-bottom: ${spacing};\n    }\n\n    ${StyledDismissButton} {\n      position: absolute;\n      top: 0.75rem;\n      inset-inline-end: 0.75rem;\n      color: inherit;\n      z-index: 3;\n      &:enabled:hover {\n        background: #ffffff19;\n      }\n      &:enabled:focus {\n        box-shadow: ${shadow['focus-inverted']};\n      }\n    }\n\n    > div {\n      width: 75%;\n      position: relative;\n      z-index: 2;\n\n      p,\n      ul {\n        padding-top: calc(2 * ${spacing});\n      }\n\n      ul {\n        padding-inline-start: calc(2 * ${spacing});\n      }\n\n      ${StyledButton} {\n        margin-top: calc(2 * ${spacing});\n        &:enabled:focus,\n        &:not([disabled]):focus {\n          box-shadow: ${shadow['focus-inverted']};\n        }\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: FunctionComponent<AppAnnouncementProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      description,\n      details,\n      whatsNewLink,\n      image,\n      onDismiss,\n      ...restProps\n    }: PropsWithoutRef<AppAnnouncementProps>,\n    ref: AppAnnouncementProps['ref']\n  ) => {\n    const t = useI18n();\n\n    return (\n      <StyledAppAnnouncement {...restProps} ref={ref} heading={heading} image={image}>\n        {onDismiss && (\n          <Button\n            as={StyledDismissButton}\n            variant='simple'\n            icon\n            onClick={onDismiss}\n            aria-label={t('app_announcement_dismiss_button_label_a11y')}\n          >\n            <Icon name='times' />\n          </Button>\n        )}\n        <Text variant='h2'>{heading || t('app_announcement_details_list_header')}</Text>\n        <div>\n          {description && <p>{description}</p>}\n          {details && (\n            <ul>\n              {details.map((item, index) => {\n                return <li key={index.toString()}>{item}</li>;\n              })}\n            </ul>\n          )}\n          {whatsNewLink && (\n            <Button variant='secondary' href={whatsNewLink} target='_blank'>\n              {t('app_announcement_whats_new_button_label')}\n            </Button>\n          )}\n        </div>\n      </StyledAppAnnouncement>\n    );\n  }\n);\n\nexport default AppAnnouncement;\n"]}

package/lib/components/CaseHeader/CaseHeader.d.ts

@@ -1,6 +1,10 @@
 import { FunctionComponent, ReactElement, Ref } from 'react';
-import { ForwardProps, MenuItemProps } from '@pega/cosmos-react-core';
+import { Action, ForwardProps, MenuItemProps } from '@pega/cosmos-react-core';
 export interface CaseHeaderProps {
+    /** Any actions that will be used for various actions on the CaseView. */
+    actions?: Action[];
+    /** A callback for when the edit button is clicked */
+    onEdit?: () => void;
     /** A Case ID to display in the heading. */
     caseId: string;
     /** A text region for the title of the CaseView. */

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

@@ -1 +1 @@
-{"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AAAA,OAAc,EAIZ,iBAAiB,EACjB,YAAY,EACZ,GAAG,EAEJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAUL,YAAY,EAMZ,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,eAAe;IAC9B,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,YAAY,CAAC;IAC3C,kFAAkF;IAClF,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,qDAAqD;IACrD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,4GAQ3B,CAAC;AA4EH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAsEjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,YAAY,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAI1F,OAAO,EACL,MAAM,EAUN,YAAY,EAMZ,aAAa,EAId,MAAM,yBAAyB,CAAC;AAOjC,MAAM,WAAW,eAAe;IAC9B,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAMpB,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,YAAY,CAAC;IAC3C,kFAAkF;IAClF,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,qDAAqD;IACrD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,4GAc3B,CAAC;AA4EH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA8FjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/CaseHeader/CaseHeader.js

@@ -1,13 +1,24 @@
-import React, { useCallback, forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';
-import { Breadcrumbs, Flex, Icon, Text, StyledBreadcrumbs, StyledIcon, StyledPopover, defaultThemeProp, useI18n, tryCatch, calculateFontSize, Link, StyledButton, StyledText } from '@pega/cosmos-react-core';
+import { Breadcrumbs, Flex, Icon, registerIcon, Text, StyledBreadcrumbs, StyledIcon, StyledPopover, defaultThemeProp, tryCatch, calculateFontSize, Link, StyledButton, StyledText, Button, MenuButton, useI18n } from '@pega/cosmos-react-core';
+import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
+import * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';
+import * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';
+registerIcon(pencilIcon, moreIcon);
 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: calc(2 * ${theme.base.spacing});
+    position: relative;
+
+    ${StyledMenu} {
+      color: ${theme.base.palette['foreground-color']};
+      z-index: ${theme.base['z-index'].popover + 1};
+    }
   `;
 });
 StyledCaseHeader.defaultProps = defaultThemeProp;
@@ -76,20 +87,33 @@ const StyledCaseHeaderText = styled.div(({ theme }) => {
   `;
 });
 StyledCaseHeaderText.defaultProps = defaultThemeProp;
-const CaseHeader = forwardRef(({ caseId, heading, caseLink = { href: '' }, parentCases, icon, followed, onFollowedChange, ...restProps }, ref) => {
-    const t = useI18n();
+const CaseHeader = forwardRef(({ caseId, heading, caseLink = { href: '' }, parentCases, isMediumOrAbove = true, icon, followed, onFollowedChange, actions = [], onEdit, ...restProps }, ref) => {
     const { href, ...restLinkProps } = caseLink;
-    const handleFollowedChange = useCallback((e) => {
-        onFollowedChange === null || onFollowedChange === void 0 ? void 0 : onFollowedChange(e.target.checked);
-    }, [onFollowedChange]);
-    return (React.createElement(Flex, { ...restProps, as: StyledCaseHeader, container: { itemGap: 2, alignItems: 'center' }, ref: ref },
-        icon && (React.createElement(Flex, { container: true, item: { shrink: 0, alignSelf: 'start' }, as: StyledCaseIconWrap }, icon)),
-        React.createElement(Flex, { as: StyledCaseHeaderText, container: { direction: 'column-reverse' }, item: { grow: 1, shrink: 0, basis: '0' } },
-            React.createElement(Text, { variant: 'h1' }, href ? (React.createElement(Link, { ...restLinkProps, href: href }, heading)) : (heading)),
-            React.createElement(Breadcrumbs, { path: [...(parentCases || []), { ...restLinkProps, id: caseId, primary: caseId, href }] })),
-        (followed !== undefined || onFollowedChange) && (React.createElement(Flex, { item: { alignSelf: 'start' }, as: StyledFollowIconWrap },
-            onFollowedChange && (React.createElement("input", { type: 'checkbox', onChange: handleFollowedChange, checked: followed, "aria-label": t('follow_case_checkbox_label_a11y') })),
-            React.createElement(Icon, { name: followed ? 'star-solid' : 'star' })))));
+    const t = useI18n();
+    const menuItems = actions.map(action => {
+        return {
+            ...action,
+            primary: action.text,
+            visual: action.icon ? _jsx(Icon, { name: action.icon }, void 0) : null
+        };
+    });
+    return (_jsxs(Flex, { ...restProps, as: StyledCaseHeader, container: { gap: 2, alignItems: 'start' }, ref: ref, children: [icon && (_jsx(Flex, { container: true, item: { shrink: 0 }, as: StyledCaseIconWrap, children: icon }, void 0)), _jsxs(Flex, { as: StyledCaseHeaderText, container: { direction: 'column' }, item: { grow: 1, shrink: 0, basis: '0' }, children: [_jsx(Text, { variant: 'h1', children: href ? (_jsx(Link, { ...restLinkProps, href: href, children: heading }, void 0)) : (heading) }, void 0), _jsx(Breadcrumbs, { path: [...(parentCases || []), { ...restLinkProps, id: caseId, primary: caseId, href }] }, void 0)] }, void 0), _jsxs("div", { children: [onEdit && (_jsx(Button, { icon: true, variant: 'simple', onClick: onEdit, label: t('edit'), children: _jsx(Icon, { name: 'pencil' }, void 0) }, void 0)), _jsx(MenuButton, { icon: 'more', iconOnly: true, variant: 'simple', text: t('actions'), menu: {
+                            items: followed !== undefined
+                                ? [
+                                    {
+                                        id: 'follow',
+                                        primary: followed ? t('unfollow') : t('follow'),
+                                        onClick: () => onFollowedChange?.(!followed)
+                                    },
+                                    ...menuItems
+                                ]
+                                : menuItems,
+                            scrollAt: 20
+                        }, popover: isMediumOrAbove
+                            ? {
+                                portal: true
+                            }
+                            : undefined }, void 0)] }, void 0)] }, void 0));
 });
 export default CaseHeader;
 //# sourceMappingURL=CaseHeader.js.map

package/lib/components/CaseHeader/CaseHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  useCallback,\n  forwardRef,\n  ChangeEvent,\n  FunctionComponent,\n  ReactElement,\n  Ref,\n  PropsWithoutRef\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';\n\nimport {\n  Breadcrumbs,\n  Flex,\n  Icon,\n  Text,\n  StyledBreadcrumbs,\n  StyledIcon,\n  StyledPopover,\n  defaultThemeProp,\n  useI18n,\n  ForwardProps,\n  tryCatch,\n  calculateFontSize,\n  Link,\n  StyledButton,\n  StyledText,\n  MenuItemProps\n} from '@pega/cosmos-react-core';\n\nexport interface CaseHeaderProps {\n  /** A Case ID to display in the heading. */\n  caseId: string;\n  /** A text region for the title of the CaseView. */\n  heading: string;\n  /** A set of props including an href that will be forwarded to the case heading and caseId. */\n  caseLink?: { href: string } & ForwardProps;\n  /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n  parentCases?: MenuItemProps[];\n  /** An icon to serve as a visual for the CaseView. */\n  icon?: ReactElement;\n  /** Indicates if the current user is following the case. This should be updated based on onFollowedChange.  */\n  followed?: boolean;\n  /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n  onFollowedChange?: (following: boolean) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\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: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nconst 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    border-radius: calc(${borderRadius} / 2);\n    width: calc(5 * ${spacing});\n    height: calc(5 * ${spacing});\n    ${StyledIcon} {\n      font-size: calc(3 * ${spacing});\n      margin: auto;\n    }\n  `;\n});\n\nStyledCaseIconWrap.defaultProps = defaultThemeProp;\n\nconst 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-inverted']};\n  }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nconst StyledCaseHeaderText = styled.div(({ theme }) => {\n  const color = readableColor(theme.base.palette['brand-primary']);\n  const transparentColor = tryCatch(() => transparentize(0.2, color));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    word-break: break-word;\n\n    ${StyledBreadcrumbs} {\n      > a,\n      > span,\n      > button,\n      > svg {\n        color: ${transparentColor};\n        font-size: ${fontSize.s};\n        font-weight: normal;\n      }\n\n      > a,\n      > button {\n        &:focus {\n          box-shadow: ${theme.base.shadow['focus-inverted']};\n        }\n      }\n\n      ${StyledPopover} {\n        color: ${theme.base.palette['foreground-color']};\n      }\n    }\n\n    > ${StyledText} > ${StyledButton} {\n      color: ${color};\n    }\n  `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nconst CaseHeader: FunctionComponent<CaseHeaderProps & ForwardProps> = forwardRef(\n  (\n    {\n      caseId,\n      heading,\n      caseLink = { href: '' },\n      parentCases,\n      icon,\n      followed,\n      onFollowedChange,\n      ...restProps\n    }: PropsWithoutRef<CaseHeaderProps>,\n    ref: CaseHeaderProps['ref']\n  ) => {\n    const t = useI18n();\n    const { href, ...restLinkProps } = caseLink;\n\n    const handleFollowedChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        onFollowedChange?.(e.target.checked);\n      },\n      [onFollowedChange]\n    );\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledCaseHeader}\n        container={{ itemGap: 2, alignItems: 'center' }}\n        ref={ref}\n      >\n        {icon && (\n          <Flex container item={{ shrink: 0, alignSelf: 'start' }} as={StyledCaseIconWrap}>\n            {icon}\n          </Flex>\n        )}\n        <Flex\n          as={StyledCaseHeaderText}\n          container={{ direction: 'column-reverse' }}\n          item={{ grow: 1, shrink: 0, basis: '0' }}\n        >\n          <Text variant='h1'>\n            {href ? (\n              <Link {...restLinkProps} href={href}>\n                {heading}\n              </Link>\n            ) : (\n              heading\n            )}\n          </Text>\n          <Breadcrumbs\n            path={[...(parentCases || []), { ...restLinkProps, id: caseId, primary: caseId, href }]}\n          />\n        </Flex>\n        {(followed !== undefined || onFollowedChange) && (\n          <Flex item={{ alignSelf: 'start' }} as={StyledFollowIconWrap}>\n            {onFollowedChange && (\n              <input\n                type='checkbox'\n                onChange={handleFollowedChange}\n                checked={followed}\n                aria-label={t('follow_case_checkbox_label_a11y')}\n              />\n            )}\n            <Icon name={followed ? 'star-solid' : 'star'} />\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default CaseHeader;\n"]}
+{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, ReactElement, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';\n\nimport {\n  Action,\n  Breadcrumbs,\n  Flex,\n  Icon,\n  registerIcon,\n  Text,\n  StyledBreadcrumbs,\n  StyledIcon,\n  StyledPopover,\n  defaultThemeProp,\n  ForwardProps,\n  tryCatch,\n  calculateFontSize,\n  Link,\n  StyledButton,\n  StyledText,\n  MenuItemProps,\n  Button,\n  MenuButton,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nregisterIcon(pencilIcon, moreIcon);\n\nexport interface CaseHeaderProps {\n  /** Any actions that will be used for various actions on the CaseView. */\n  actions?: Action[];\n  /** A callback for when the edit button is clicked */\n  onEdit?: () => void;\n  /**\n   * Indicator for the current size of the users screen.\n   * @internal\n   */\n  isMediumOrAbove?: boolean;\n  /** A Case ID to display in the heading. */\n  caseId: string;\n  /** A text region for the title of the CaseView. */\n  heading: string;\n  /** A set of props including an href that will be forwarded to the case heading and caseId. */\n  caseLink?: { href: string } & ForwardProps;\n  /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n  parentCases?: MenuItemProps[];\n  /** An icon to serve as a visual for the CaseView. */\n  icon?: ReactElement;\n  /** Indicates if the current user is following the case. This should be updated based on onFollowedChange.  */\n  followed?: boolean;\n  /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n  onFollowedChange?: (following: boolean) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\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: calc(2 * ${theme.base.spacing});\n    position: relative;\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\nconst 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    border-radius: calc(${borderRadius} / 2);\n    width: calc(5 * ${spacing});\n    height: calc(5 * ${spacing});\n    ${StyledIcon} {\n      font-size: calc(3 * ${spacing});\n      margin: auto;\n    }\n  `;\n});\n\nStyledCaseIconWrap.defaultProps = defaultThemeProp;\n\nconst 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-inverted']};\n  }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nconst StyledCaseHeaderText = styled.div(({ theme }) => {\n  const color = readableColor(theme.base.palette['brand-primary']);\n  const transparentColor = tryCatch(() => transparentize(0.2, color));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    word-break: break-word;\n\n    ${StyledBreadcrumbs} {\n      > a,\n      > span,\n      > button,\n      > svg {\n        color: ${transparentColor};\n        font-size: ${fontSize.s};\n        font-weight: normal;\n      }\n\n      > a,\n      > button {\n        &:focus {\n          box-shadow: ${theme.base.shadow['focus-inverted']};\n        }\n      }\n\n      ${StyledPopover} {\n        color: ${theme.base.palette['foreground-color']};\n      }\n    }\n\n    > ${StyledText} > ${StyledButton} {\n      color: ${color};\n    }\n  `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nconst CaseHeader: FunctionComponent<CaseHeaderProps & ForwardProps> = forwardRef(\n  (\n    {\n      caseId,\n      heading,\n      caseLink = { href: '' },\n      parentCases,\n      isMediumOrAbove = true,\n      icon,\n      followed,\n      onFollowedChange,\n      actions = [],\n      onEdit,\n      ...restProps\n    }: PropsWithoutRef<CaseHeaderProps>,\n    ref: CaseHeaderProps['ref']\n  ) => {\n    const { href, ...restLinkProps } = caseLink;\n    const t = useI18n();\n    const menuItems: MenuItemProps[] = actions.map(action => {\n      return {\n        ...action,\n        primary: action.text,\n        visual: action.icon ? <Icon name={action.icon} /> : null\n      };\n    });\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledCaseHeader}\n        container={{ gap: 2, alignItems: 'start' }}\n        ref={ref}\n      >\n        {icon && (\n          <Flex container item={{ shrink: 0 }} as={StyledCaseIconWrap}>\n            {icon}\n          </Flex>\n        )}\n        <Flex\n          as={StyledCaseHeaderText}\n          container={{ direction: 'column' }}\n          item={{ grow: 1, shrink: 0, basis: '0' }}\n        >\n          <Text variant='h1'>\n            {href ? (\n              <Link {...restLinkProps} href={href}>\n                {heading}\n              </Link>\n            ) : (\n              heading\n            )}\n          </Text>\n          <Breadcrumbs\n            path={[...(parentCases || []), { ...restLinkProps, id: caseId, primary: caseId, href }]}\n          />\n        </Flex>\n        <div>\n          {onEdit && (\n            <Button icon variant='simple' onClick={onEdit} label={t('edit')}>\n              <Icon name='pencil' />\n            </Button>\n          )}\n          <MenuButton\n            icon='more'\n            iconOnly\n            variant='simple'\n            text={t('actions')}\n            menu={{\n              items:\n                followed !== undefined\n                  ? [\n                      {\n                        id: 'follow',\n                        primary: followed ? t('unfollow') : t('follow'),\n                        onClick: () => onFollowedChange?.(!followed)\n                      },\n                      ...menuItems\n                    ]\n                  : menuItems,\n              scrollAt: 20\n            }}\n            popover={\n              isMediumOrAbove\n                ? {\n                    portal: true\n                  }\n                : undefined\n            }\n          />\n        </div>\n      </Flex>\n    );\n  }\n);\n\nexport default CaseHeader;\n"]}

package/lib/components/CasePreview/CasePreview.d.ts

@@ -5,15 +5,15 @@ export interface CasePreviewProps extends CaseViewProps {
     /** If true, the Case Preview will be visible. */
     open: boolean;
     /** Callback fired before Case Preview opens. */
-    onBeforeOpen?(): void;
+    onBeforeOpen?: () => void;
     /** Callback fired after Case Preview opens. */
-    onAfterOpen?(): void;
+    onAfterOpen?: () => void;
     /** Callback fired before Case Preview closes. */
-    onBeforeClose?(): void;
+    onBeforeClose?: () => void;
     /** Callback fired after Case Preview closes. */
-    onAfterClose?(): void;
+    onAfterClose?: () => void;
     /** Callback fired when a click action occurs outside of the Case Preview. */
-    onOuterClick?(): void;
+    onOuterClick?: () => void;
     /** Reference to the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CasePreview.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEZ,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAOL,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAEjC,OAAiB,EACf,aAAa,EAKd,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,iDAAiD;IACjD,IAAI,EAAE,OAAO,CAAC;IACd,gDAAgD;IAChD,YAAY,CAAC,IAAI,IAAI,CAAC;IACtB,+CAA+C;IAC/C,WAAW,CAAC,IAAI,IAAI,CAAC;IACrB,iDAAiD;IACjD,aAAa,CAAC,IAAI,IAAI,CAAC;IACvB,gDAAgD;IAChD,YAAY,CAAC,IAAI,IAAI,CAAC;IACtB,6EAA6E;IAC7E,YAAY,CAAC,IAAI,IAAI,CAAC;IACtB,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AA8ED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA+EnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"CasePreview.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAQL,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAGjC,OAAiB,EACf,aAAa,EAKd,MAAM,aAAa,CAAC;AAIrB,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,iDAAiD;IACjD,IAAI,EAAE,OAAO,CAAC;IACd,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAgFD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAiFnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/CasePreview/CasePreview.js

@@ -1,8 +1,11 @@
-import React, { forwardRef, useState, useCallback, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { readableColor } from 'polished';
-import { Drawer, Icon, Button, Flex, tryCatch, defaultThemeProp, useBreakpoint, useTheme, useElement } from '@pega/cosmos-react-core';
+import { Drawer, Icon, registerIcon, Button, Flex, tryCatch, defaultThemeProp, useBreakpoint, useElement, useDirection } from '@pega/cosmos-react-core';
+import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import CaseView, { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledSummaryRegion } from '../CaseView';
+registerIcon(timesIcon);
 const StyledPreviewHeader = styled.div(({ theme }) => {
     return css `
     z-index: ${theme.base['z-index'].drawer};
@@ -23,25 +26,27 @@ const StyledPreviewActions = styled.div(({ theme: { base: { spacing, palette: {
 });
 StyledPreviewActions.defaultProps = defaultThemeProp;
 const StyledPreviewDrawer = styled(StyledCaseDrawer)(({ caseSummaryEl, theme }) => {
-    const offsetHeight = (caseSummaryEl === null || caseSummaryEl === void 0 ? void 0 : caseSummaryEl.offsetHeight) || 0;
+    const offsetHeight = caseSummaryEl?.offsetHeight || 0;
     return css `
+      height: calc(100vh - var(--appshell-offset, 0rem));
+      top: var(--appshell-offset, 0);
       z-index: calc(${theme.base['z-index'].drawer} + 500);
 
       ${StyledCaseView} {
-        height: calc(100vh - ${theme.base.spacing} - ${theme.base.sizes['touch-mouse']});
+        height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});
 
         @media (pointer: coarse) {
-          height: calc(100vh - ${theme.base.spacing} - ${theme.base.sizes['touch-finger']});
+          height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});
         }
       }
 
       ${StyledCaseViewContent} {
         overflow-y: auto;
         margin-top: ${`${offsetHeight}px`};
-        margin-bottom: calc(${theme.base.sizes['touch-mouse']} + ${theme.base.spacing});
+        margin-bottom: calc(${theme.base['hit-area']['mouse-min']} + ${theme.base.spacing});
 
         @media (pointer: coarse) {
-          margin-bottom: calc(${theme.base.sizes['touch-finger']} + ${theme.base.spacing});
+          margin-bottom: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});
         }
 
         & > :last-child {
@@ -51,32 +56,28 @@ const StyledPreviewDrawer = styled(StyledCaseDrawer)(({ caseSummaryEl, theme })
 
       ${StyledSummaryRegion} {
         position: fixed;
-        top: calc(${theme.base.sizes['touch-mouse']} + ${theme.base.spacing});
+        top: calc(${theme.base['hit-area']['mouse-min']} + ${theme.base.spacing});
 
         @media (pointer: coarse) {
-          top: calc(${theme.base.sizes['touch-finger']} + ${theme.base.spacing});
+          top: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});
         }
       }
     `;
 });
 StyledPreviewDrawer.defaultProps = defaultThemeProp;
 const CasePreview = forwardRef((props, ref) => {
-    const { open: openProp, caseId, parentCases, heading, caseLink, icon, followed, onFollowedChange, summary, tabs, stages, tasks, tabContent, utilities, utilitiesSummaryItems, actions, banners, ...restProps } = props;
+    const { open: openProp, caseId, parentCases, heading, caseLink, icon, followed, onFollowedChange, summary, tabs, stages, tasks, tabContent, utilities, utilitiesSummaryItems, actions, banners, onEdit, ...restProps } = props;
     const [caseSummaryEl, setCaseSummaryEl] = useElement();
     const isSmallOrAbove = useBreakpoint('sm');
     const [open, setOpen] = useState(openProp);
-    const theme = useTheme();
+    const direction = useDirection();
     const closePreview = useCallback(() => {
         setOpen(false);
     }, []);
     useEffect(() => {
         setOpen(openProp);
     }, [openProp]);
-    return (React.createElement(Drawer, { ...restProps, as: StyledPreviewDrawer, caseSummaryEl: caseSummaryEl !== null && caseSummaryEl !== void 0 ? caseSummaryEl : undefined, forwardedAs: Flex, container: { direction: 'column' }, ref: ref, open: open && isSmallOrAbove, position: 'fixed', placement: theme.base.rtl ? 'left' : 'right', shadow: true, nullWhenClosed: true },
-        React.createElement(StyledPreviewActions, null,
-            React.createElement(Button, { variant: 'simple', icon: true, onClick: closePreview },
-                React.createElement(Icon, { name: 'times' }))),
-        React.createElement(CaseView, { forceMobile: true, caseId: caseId, parentCases: parentCases, heading: heading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange, summary: summary, caseSummaryRef: setCaseSummaryEl, tabs: tabs, stages: stages, tasks: tasks, tabContent: tabContent, utilities: utilities, utilitiesSummaryItems: utilitiesSummaryItems, actions: actions, banners: banners })));
+    return (_jsxs(Drawer, { ...restProps, as: StyledPreviewDrawer, caseSummaryEl: caseSummaryEl ?? undefined, forwardedAs: Flex, container: { direction: 'column' }, ref: ref, open: open && isSmallOrAbove, position: 'fixed', placement: direction.end, shadow: true, nullWhenClosed: true, children: [_jsx(StyledPreviewActions, { children: _jsx(Button, { variant: 'simple', icon: true, onClick: closePreview, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0) }, void 0), _jsx(CaseView, { forceMobile: true, caseId: caseId, parentCases: parentCases, heading: heading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange, summary: summary, caseSummaryRef: setCaseSummaryEl, tabs: tabs, stages: stages, tasks: tasks, tabContent: tabContent, utilities: utilities, utilitiesSummaryItems: utilitiesSummaryItems, actions: actions, banners: banners, onEdit: onEdit }, void 0)] }, void 0));
 });
 export default CasePreview;
 //# sourceMappingURL=CasePreview.js.map

package/lib/components/CasePreview/CasePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"CasePreview.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useState,\n  useCallback,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Drawer,\n  Icon,\n  Button,\n  Flex,\n  tryCatch,\n  defaultThemeProp,\n  ForwardProps,\n  useBreakpoint,\n  useTheme,\n  useElement\n} from '@pega/cosmos-react-core';\n\nimport CaseView, {\n  CaseViewProps,\n  StyledCaseView,\n  StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledSummaryRegion\n} from '../CaseView';\n\nexport interface CasePreviewProps extends CaseViewProps {\n  /** If true, the Case Preview will be visible. */\n  open: boolean;\n  /** Callback fired before Case Preview opens. */\n  onBeforeOpen?(): void;\n  /** Callback fired after Case Preview opens. */\n  onAfterOpen?(): void;\n  /** Callback fired before Case Preview closes. */\n  onBeforeClose?(): void;\n  /** Callback fired after Case Preview closes. */\n  onAfterClose?(): void;\n  /** Callback fired when a click action occurs outside of the Case Preview. */\n  onOuterClick?(): void;\n  /** Reference to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledPreviewHeader = styled.div(({ theme }) => {\n  return css`\n    z-index: ${theme.base['z-index'].drawer};\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledPreviewHeader.defaultProps = defaultThemeProp;\n\nconst StyledPreviewActions = styled.div(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'brand-primary': brandPrimary }\n      }\n    }\n  }) => {\n    const buttonColor = tryCatch(() => readableColor(brandPrimary));\n\n    return css`\n      background-color: ${brandPrimary};\n      padding: ${spacing} calc(2 * ${spacing}) 0;\n\n      button {\n        color: ${buttonColor};\n      }\n    `;\n  }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)<{ caseSummaryEl?: HTMLDivElement }>(\n  ({ caseSummaryEl, theme }) => {\n    const offsetHeight = caseSummaryEl?.offsetHeight || 0;\n\n    return css`\n      z-index: calc(${theme.base['z-index'].drawer} + 500);\n\n      ${StyledCaseView} {\n        height: calc(100vh - ${theme.base.spacing} - ${theme.base.sizes['touch-mouse']});\n\n        @media (pointer: coarse) {\n          height: calc(100vh - ${theme.base.spacing} - ${theme.base.sizes['touch-finger']});\n        }\n      }\n\n      ${StyledCaseViewContent} {\n        overflow-y: auto;\n        margin-top: ${`${offsetHeight}px`};\n        margin-bottom: calc(${theme.base.sizes['touch-mouse']} + ${theme.base.spacing});\n\n        @media (pointer: coarse) {\n          margin-bottom: calc(${theme.base.sizes['touch-finger']} + ${theme.base.spacing});\n        }\n\n        & > :last-child {\n          padding-bottom: calc(2 * ${theme.base.spacing});\n        }\n      }\n\n      ${StyledSummaryRegion} {\n        position: fixed;\n        top: calc(${theme.base.sizes['touch-mouse']} + ${theme.base.spacing});\n\n        @media (pointer: coarse) {\n          top: calc(${theme.base.sizes['touch-finger']} + ${theme.base.spacing});\n        }\n      }\n    `;\n  }\n);\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst CasePreview: FunctionComponent<CasePreviewProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) => {\n    const {\n      open: openProp,\n      caseId,\n      parentCases,\n      heading,\n      caseLink,\n      icon,\n      followed,\n      onFollowedChange,\n      summary,\n      tabs,\n      stages,\n      tasks,\n      tabContent,\n      utilities,\n      utilitiesSummaryItems,\n      actions,\n      banners,\n      ...restProps\n    } = props;\n\n    const [caseSummaryEl, setCaseSummaryEl] = useElement<HTMLDivElement>();\n    const isSmallOrAbove = useBreakpoint('sm');\n    const [open, setOpen] = useState(openProp);\n    const theme = useTheme();\n\n    const closePreview = useCallback(() => {\n      setOpen(false);\n    }, []);\n\n    useEffect(() => {\n      setOpen(openProp);\n    }, [openProp]);\n\n    return (\n      <Drawer\n        {...restProps}\n        as={StyledPreviewDrawer}\n        caseSummaryEl={caseSummaryEl ?? undefined}\n        forwardedAs={Flex}\n        container={{ direction: 'column' }}\n        ref={ref}\n        open={open && isSmallOrAbove}\n        position='fixed'\n        placement={theme.base.rtl ? 'left' : 'right'}\n        shadow\n        nullWhenClosed\n      >\n        <StyledPreviewActions>\n          <Button variant='simple' icon onClick={closePreview}>\n            <Icon name='times' />\n          </Button>\n        </StyledPreviewActions>\n\n        <CaseView\n          forceMobile\n          caseId={caseId}\n          parentCases={parentCases}\n          heading={heading}\n          caseLink={caseLink}\n          icon={icon}\n          followed={followed}\n          onFollowedChange={onFollowedChange}\n          summary={summary}\n          caseSummaryRef={setCaseSummaryEl}\n          tabs={tabs}\n          stages={stages}\n          tasks={tasks}\n          tabContent={tabContent}\n          utilities={utilities}\n          utilitiesSummaryItems={utilitiesSummaryItems}\n          actions={actions}\n          banners={banners}\n        />\n      </Drawer>\n    );\n  }\n);\n\nexport default CasePreview;\n"]}
+{"version":3,"file":"CasePreview.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useState,\n  useCallback,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Drawer,\n  Icon,\n  registerIcon,\n  Button,\n  Flex,\n  tryCatch,\n  defaultThemeProp,\n  ForwardProps,\n  useBreakpoint,\n  useElement,\n  useDirection\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport CaseView, {\n  CaseViewProps,\n  StyledCaseView,\n  StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledSummaryRegion\n} from '../CaseView';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps extends CaseViewProps {\n  /** If true, the Case Preview will be visible. */\n  open: boolean;\n  /** Callback fired before Case Preview opens. */\n  onBeforeOpen?: () => void;\n  /** Callback fired after Case Preview opens. */\n  onAfterOpen?: () => void;\n  /** Callback fired before Case Preview closes. */\n  onBeforeClose?: () => void;\n  /** Callback fired after Case Preview closes. */\n  onAfterClose?: () => void;\n  /** Callback fired when a click action occurs outside of the Case Preview. */\n  onOuterClick?: () => void;\n  /** Reference to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledPreviewHeader = styled.div(({ theme }) => {\n  return css`\n    z-index: ${theme.base['z-index'].drawer};\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledPreviewHeader.defaultProps = defaultThemeProp;\n\nconst StyledPreviewActions = styled.div(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'brand-primary': brandPrimary }\n      }\n    }\n  }) => {\n    const buttonColor = tryCatch(() => readableColor(brandPrimary));\n\n    return css`\n      background-color: ${brandPrimary};\n      padding: ${spacing} calc(2 * ${spacing}) 0;\n\n      button {\n        color: ${buttonColor};\n      }\n    `;\n  }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)<{ caseSummaryEl?: HTMLDivElement }>(\n  ({ caseSummaryEl, theme }) => {\n    const offsetHeight = caseSummaryEl?.offsetHeight || 0;\n\n    return css`\n      height: calc(100vh - var(--appshell-offset, 0rem));\n      top: var(--appshell-offset, 0);\n      z-index: calc(${theme.base['z-index'].drawer} + 500);\n\n      ${StyledCaseView} {\n        height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});\n\n        @media (pointer: coarse) {\n          height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});\n        }\n      }\n\n      ${StyledCaseViewContent} {\n        overflow-y: auto;\n        margin-top: ${`${offsetHeight}px`};\n        margin-bottom: calc(${theme.base['hit-area']['mouse-min']} + ${theme.base.spacing});\n\n        @media (pointer: coarse) {\n          margin-bottom: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});\n        }\n\n        & > :last-child {\n          padding-bottom: calc(2 * ${theme.base.spacing});\n        }\n      }\n\n      ${StyledSummaryRegion} {\n        position: fixed;\n        top: calc(${theme.base['hit-area']['mouse-min']} + ${theme.base.spacing});\n\n        @media (pointer: coarse) {\n          top: calc(${theme.base['hit-area']['finger-min']} + ${theme.base.spacing});\n        }\n      }\n    `;\n  }\n);\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst CasePreview: FunctionComponent<CasePreviewProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) => {\n    const {\n      open: openProp,\n      caseId,\n      parentCases,\n      heading,\n      caseLink,\n      icon,\n      followed,\n      onFollowedChange,\n      summary,\n      tabs,\n      stages,\n      tasks,\n      tabContent,\n      utilities,\n      utilitiesSummaryItems,\n      actions,\n      banners,\n      onEdit,\n      ...restProps\n    } = props;\n\n    const [caseSummaryEl, setCaseSummaryEl] = useElement<HTMLDivElement>();\n    const isSmallOrAbove = useBreakpoint('sm');\n    const [open, setOpen] = useState(openProp);\n    const direction = useDirection();\n\n    const closePreview = useCallback(() => {\n      setOpen(false);\n    }, []);\n\n    useEffect(() => {\n      setOpen(openProp);\n    }, [openProp]);\n\n    return (\n      <Drawer\n        {...restProps}\n        as={StyledPreviewDrawer}\n        caseSummaryEl={caseSummaryEl ?? undefined}\n        forwardedAs={Flex}\n        container={{ direction: 'column' }}\n        ref={ref}\n        open={open && isSmallOrAbove}\n        position='fixed'\n        placement={direction.end}\n        shadow\n        nullWhenClosed\n      >\n        <StyledPreviewActions>\n          <Button variant='simple' icon onClick={closePreview}>\n            <Icon name='times' />\n          </Button>\n        </StyledPreviewActions>\n\n        <CaseView\n          forceMobile\n          caseId={caseId}\n          parentCases={parentCases}\n          heading={heading}\n          caseLink={caseLink}\n          icon={icon}\n          followed={followed}\n          onFollowedChange={onFollowedChange}\n          summary={summary}\n          caseSummaryRef={setCaseSummaryEl}\n          tabs={tabs}\n          stages={stages}\n          tasks={tasks}\n          tabContent={tabContent}\n          utilities={utilities}\n          utilitiesSummaryItems={utilitiesSummaryItems}\n          actions={actions}\n          banners={banners}\n          onEdit={onEdit}\n        />\n      </Drawer>\n    );\n  }\n);\n\nexport default CasePreview;\n"]}

package/lib/components/CaseSummary/CaseSummary.d.ts

@@ -1,24 +1,36 @@
-import { FunctionComponent, ReactNode, Ref, MouseEvent, RefObject } from 'react';
+import { FunctionComponent, ReactNode, Ref, MouseEvent } from 'react';
 import { Tab, ForwardProps } from '@pega/cosmos-react-core';
 import { CaseHeaderProps } from '../CaseHeader';
-import { CaseActionsProps } from '../CaseActions';
 export interface CaseSummaryProps extends CaseHeaderProps {
-    /** A region to hold any buttons that will be used for various actions on the CaseView. */
-    actions?: CaseActionsProps['actions'];
     /** A region to display any summary information about the CaseView. */
     summary: ReactNode;
     /** An object handling the rendering and functionality of the Tabs in CaseSummary. */
     tabs: {
         items: Tab[];
-        onClick(id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
+        onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
         currentTabId: string;
     };
-    /** Ref for the CaseView element to base breakpoints off of. If undefined, breakpoints will be based on the viewport. */
-    caseViewRef?: RefObject<HTMLDivElement>;
+    /** The fixed width string is needed for the expandable and collapsible header. */
+    fixedWidth?: string;
+    /** A boolean that toggles the collapsible feature of the case summary. */
+    collapsible?: boolean;
+    onBeforeCollapse?: () => void;
+    onAfterCollapse?: () => void;
+    onBeforeExpand?: () => void;
+    onAfterExpand?: () => void;
+    /** A callback that will return the animation state of the case summary. */
+    onAnimationStateChange?: (state: AnimationState) => void;
+    /** Ref for the header element inside the Case Summary */
+    headerRef?: Ref<HTMLDivElement>;
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledCaseSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare type AnimationState = 'expanding' | 'expanded' | 'collapsing' | 'collapsed';
+export declare const StyledCaseSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    expanded?: boolean | undefined;
+    fixedWidth?: string | undefined;
+}, never>;
+export declare const StyledCaseSummaryInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const CaseSummary: FunctionComponent<CaseSummaryProps & ForwardProps>;
 export default CaseSummary;
 //# sourceMappingURL=CaseSummary.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaseSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseSummary/CaseSummary.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEZ,iBAAiB,EAEjB,SAAS,EACT,GAAG,EACH,UAAU,EACV,SAAS,EACV,MAAM,OAAO,CAAC;AAGf,OAAO,EAAc,GAAG,EAAE,YAAY,EAAiB,MAAM,yBAAyB,CAAC;AAEvF,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,0FAA0F;IAC1F,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACtC,sEAAsE;IACtE,OAAO,EAAE,SAAS,CAAC;IACnB,qFAAqF;IACrF,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,GAAG,IAAI,CAAC;QACrF,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IAMF,wHAAwH;IACxH,WAAW,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAwDnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"CaseSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseSummary/CaseSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,SAAS,EACT,GAAG,EACH,UAAU,EAIX,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,GAAG,EACH,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAGjC,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAI5D,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,sEAAsE;IACtE,OAAO,EAAE,SAAS,CAAC;IACnB,qFAAqF;IACrF,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;QACzF,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IAWF,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,2EAA2E;IAC3E,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzD,yDAAyD;IACzD,SAAS,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,aAAK,cAAc,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC;AAE5E,eAAO,MAAM,iBAAiB;;;SAuB7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAGjC,CAAC;AAsCF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAoKnE,CAAC;AAEF,eAAe,WAAW,CAAC"}