@pega/cosmos-react-work 8.0.0-build.4.4 → 8.0.0-build.40.0

package/lib/components/ArticleList/RelatedQuestions.d.ts

@@ -0,0 +1,19 @@
+import type { MouseEvent } from 'react';
+import type { NoChildrenProp, WithAttributes } from '@pega/cosmos-react-core';
+export declare const StyledRelatedQuestions: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TagProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
+export type RelatedQuestionsProps = WithAttributes<'div', NoChildrenProp & {
+    title: string;
+    items: {
+        id: string;
+        name: string;
+        onClick: (item: {
+            id: string;
+            name: string;
+        }, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    }[];
+}>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<RelatedQuestionsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=RelatedQuestions.d.ts.map

package/lib/components/ArticleList/RelatedQuestions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelatedQuestions.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/RelatedQuestions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,UAAU,EAAE,MAAM,OAAO,CAAC;AAazD,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG1F,eAAO,MAAM,sBAAsB;2BAqB1B,CAAC,oEACkB,yBAAY;uDAZtC,CAAC;AAIH,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAChD,KAAK,EACL,cAAc,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CACP,IAAI,EAAE;YAAE,EAAE,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,EAClC,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAClD,IAAI,CAAC;KACX,EAAE,CAAC;CACL,CACF,CAAC;;AAEF,wBAwDG"}

package/lib/components/ArticleList/RelatedQuestions.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, Text, Tag, defaultThemeProp, Tooltip, useRefMap, ThemeOverride, useTheme } from '@pega/cosmos-react-core';
+import { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';
+export const StyledRelatedQuestions = styled(Tag)(({ theme: { base } }) => {
+    return css `
+    border-radius: ${base['border-radius']};
+    max-width: 100%;
+    ${ellipsisOverflow}
+
+    & + & {
+      margin-inline-start: 0;
+    }
+  `;
+});
+StyledRelatedQuestions.defaultProps = defaultThemeProp;
+export default forwardRef(function RelatedQuestions({ title, items, ...restProps }, ref) {
+    const theme = useTheme();
+    const [elMap, getCallbackRef] = useRefMap();
+    return (_jsxs(Flex, { ...restProps, container: {
+            direction: 'column',
+            gap: 1,
+            pad: [1.5, undefined],
+            alignItems: 'start'
+        }, ref: ref, children: [_jsx(Text, { variant: 'h4', children: title }), items && (_jsx(ThemeOverride, { theme: {
+                    components: {
+                        badges: {
+                            tag: {
+                                foreground: theme.base.palette.ai,
+                                background: theme.base.palette.ai
+                            }
+                        }
+                    }
+                }, children: items.map(({ id, name, onClick }) => {
+                    const relatedEl = elMap.get(id);
+                    return (_jsxs(_Fragment, { children: [_jsx(StyledRelatedQuestions, { ref: getCallbackRef(id), onClick: (e) => onClick({ id, name }, e), children: name }), relatedEl && (_jsx(Tooltip, { smart: true, target: relatedEl, children: name }))] }));
+                }) }))] }));
+});
+//# sourceMappingURL=RelatedQuestions.js.map

package/lib/components/ArticleList/RelatedQuestions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelatedQuestions.js","sourceRoot":"","sources":["../../../src/components/ArticleList/RelatedQuestions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,gBAAgB,EAChB,OAAO,EACP,SAAS,EACT,aAAa,EACb,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAE7E,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACxE,OAAO,GAAG,CAAA;qBACS,IAAI,CAAC,eAAe,CAAC;;MAEpC,gBAAgB;;;;;GAKnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBvD,eAAe,UAAU,CAGvB,SAAS,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG;IAC7D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,SAAS,EAA4B,CAAC;IAEtE,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC;YACrB,UAAU,EAAE,OAAO;SACpB,EACD,GAAG,EAAE,GAAG,aAER,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EAChC,KAAK,IAAI,CACR,KAAC,aAAa,IACZ,KAAK,EAAE;oBACL,UAAU,EAAE;wBACV,MAAM,EAAE;4BACN,GAAG,EAAE;gCACH,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;gCACjC,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;6BAClC;yBACF;qBACF;iBACF,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;oBACnC,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;oBAChC,OAAO,CACL,8BACE,KAAC,sBAAsB,IACrB,GAAG,EAAE,cAAc,CAAC,EAAE,CAAC,EACvB,OAAO,EAAE,CAAC,CAAoD,EAAE,EAAE,CAChE,OAAO,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,YAGzB,IAAI,GACkB,EACxB,SAAS,IAAI,CACZ,KAAC,OAAO,IAAC,KAAK,QAAC,MAAM,EAAE,SAAS,YAC7B,IAAI,GACG,CACX,IACA,CACJ,CAAC;gBACJ,CAAC,CAAC,GACY,CACjB,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Text,\n  Tag,\n  defaultThemeProp,\n  Tooltip,\n  useRefMap,\n  ThemeOverride,\n  useTheme\n} from '@pega/cosmos-react-core';\nimport type { NoChildrenProp, RefElement, WithAttributes } from '@pega/cosmos-react-core';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nexport const StyledRelatedQuestions = styled(Tag)(({ theme: { base } }) => {\n  return css`\n    border-radius: ${base['border-radius']};\n    max-width: 100%;\n    ${ellipsisOverflow}\n\n    & + & {\n      margin-inline-start: 0;\n    }\n  `;\n});\n\nStyledRelatedQuestions.defaultProps = defaultThemeProp;\n\nexport type RelatedQuestionsProps = WithAttributes<\n  'div',\n  NoChildrenProp & {\n    title: string;\n    items: {\n      id: string;\n      name: string;\n      onClick: (\n        item: { id: string; name: string },\n        e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n      ) => void;\n    }[];\n  }\n>;\n\nexport default forwardRef<\n  RefElement<RelatedQuestionsProps>,\n  PropsWithoutRef<RelatedQuestionsProps>\n>(function RelatedQuestions({ title, items, ...restProps }, ref) {\n  const theme = useTheme();\n  const [elMap, getCallbackRef] = useRefMap<HTMLButtonElement | null>();\n\n  return (\n    <Flex\n      {...restProps}\n      container={{\n        direction: 'column',\n        gap: 1,\n        pad: [1.5, undefined],\n        alignItems: 'start'\n      }}\n      ref={ref}\n    >\n      <Text variant='h4'>{title}</Text>\n      {items && (\n        <ThemeOverride\n          theme={{\n            components: {\n              badges: {\n                tag: {\n                  foreground: theme.base.palette.ai,\n                  background: theme.base.palette.ai\n                }\n              }\n            }\n          }}\n        >\n          {items.map(({ id, name, onClick }) => {\n            const relatedEl = elMap.get(id);\n            return (\n              <>\n                <StyledRelatedQuestions\n                  ref={getCallbackRef(id)}\n                  onClick={(e: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                    onClick({ id, name }, e)\n                  }\n                >\n                  {name}\n                </StyledRelatedQuestions>\n                {relatedEl && (\n                  <Tooltip smart target={relatedEl}>\n                    {name}\n                  </Tooltip>\n                )}\n              </>\n            );\n          })}\n        </ThemeOverride>\n      )}\n    </Flex>\n  );\n});\n"]}

package/lib/components/ArticleList/index.d.ts

@@ -6,4 +6,5 @@ export { default as ArticleListFilter } from './ArticleListFilter';
 export type { ArticleBuddyProps, Reaction, BuddySuggestedArticlesProps, BuddyResponseProps, AutoAnsweredItem, DetectedItem, ArticleFeedbackProps, SearchArticle, SemanticSearchArticles } from './ArticleList.types';
 export { default as ArticleBuddy } from './ArticleBuddy';
 export { default as ArticleSemanticSearch } from './ArticleSemanticSearch';
+export { default as ArticleFeedback } from './ArticleFeedback';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/ArticleList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EACV,mBAAmB,EACnB,qBAAqB,EACrB,QAAQ,EACR,WAAW,EACZ,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,YAAY,EACV,iBAAiB,EACjB,QAAQ,EACR,2BAA2B,EAC3B,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,EACpB,aAAa,EACb,sBAAsB,EACvB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EACV,mBAAmB,EACnB,qBAAqB,EACrB,QAAQ,EACR,WAAW,EACZ,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,YAAY,EACV,iBAAiB,EACjB,QAAQ,EACR,2BAA2B,EAC3B,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,EACpB,aAAa,EACb,sBAAsB,EACvB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/ArticleList/index.js

@@ -3,4 +3,5 @@ export { default as ArticleSummary } from './ArticleSummary';
 export { default as ArticleListFilter } from './ArticleListFilter';
 export { default as ArticleBuddy } from './ArticleBuddy';
 export { default as ArticleSemanticSearch } from './ArticleSemanticSearch';
+export { default as ArticleFeedback } from './ArticleFeedback';
 //# sourceMappingURL=index.js.map

package/lib/components/ArticleList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAO7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAYnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { default } from './ArticleList';\nexport type { ArticleListProps } from './ArticleList.types';\nexport { default as ArticleSummary } from './ArticleSummary';\nexport type {\n  ArticleSummaryProps,\n  AIArticleSummaryProps,\n  Articles,\n  QuickFilter\n} from './ArticleList.types';\nexport { default as ArticleListFilter } from './ArticleListFilter';\nexport type {\n  ArticleBuddyProps,\n  Reaction,\n  BuddySuggestedArticlesProps,\n  BuddyResponseProps,\n  AutoAnsweredItem,\n  DetectedItem,\n  ArticleFeedbackProps,\n  SearchArticle,\n  SemanticSearchArticles\n} from './ArticleList.types';\nexport { default as ArticleBuddy } from './ArticleBuddy';\nexport { default as ArticleSemanticSearch } from './ArticleSemanticSearch';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAO7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAYnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './ArticleList';\nexport type { ArticleListProps } from './ArticleList.types';\nexport { default as ArticleSummary } from './ArticleSummary';\nexport type {\n  ArticleSummaryProps,\n  AIArticleSummaryProps,\n  Articles,\n  QuickFilter\n} from './ArticleList.types';\nexport { default as ArticleListFilter } from './ArticleListFilter';\nexport type {\n  ArticleBuddyProps,\n  Reaction,\n  BuddySuggestedArticlesProps,\n  BuddyResponseProps,\n  AutoAnsweredItem,\n  DetectedItem,\n  ArticleFeedbackProps,\n  SearchArticle,\n  SemanticSearchArticles\n} from './ArticleList.types';\nexport { default as ArticleBuddy } from './ArticleBuddy';\nexport { default as ArticleSemanticSearch } from './ArticleSemanticSearch';\nexport { default as ArticleFeedback } from './ArticleFeedback';\n"]}

package/lib/components/Assignments/Assignments.js

@@ -8,13 +8,13 @@ const Assignments = ({ items, count, collapsed, onToggleCollapsed, ...restProps
     const t = useI18n();
     const assignmentsId = useUID();
     const TaskItems = useMemo(() => {
-        return openItem ? _jsx(TaskItem, { ...openItem }) : _jsx(TaskList, { items: items });
+        return openItem ? _jsx(TaskItem, { ...openItem, headingTag: 'h2' }) : _jsx(TaskList, { items: items });
     }, [items, openItem]);
     const tasks = _jsx(CardContent, { children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) });
     const header = (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [typeof collapsed === 'boolean' && _jsx(Icon, { name: 'caret-right' }), _jsx(Text, { variant: 'h2', children: t('assignments') }), _jsx(Count, { children: count })] }));
     return (_jsxs(StyledAssignments, { ...restProps, openItem: !!openItem, "data-app-region": true, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [typeof collapsed === 'boolean' && onToggleCollapsed && (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
                             onToggleCollapsed();
-                        }, "aria-controls": assignmentsId, "aria-expanded": !collapsed ? 'true' : 'false', "aria-label": t('assignments'), children: header })), collapsed === undefined && header] })), typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: tasks })) : (tasks)] }));
+                        }, "aria-controls": assignmentsId, "aria-expanded": !collapsed, "aria-label": t('assignments'), children: header })), collapsed === undefined && header] })), typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: tasks })) : (tasks)] }));
 };
 export default Assignments;
 //# sourceMappingURL=Assignments.js.map

package/lib/components/Assignments/Assignments.js.map

@@ -1 +1 @@
-{"version":3,"file":"Assignments.js","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EACL,UAAU,EACV,OAAO,EACP,UAAU,EACV,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAkB7E,MAAM,WAAW,GAAwC,CAAC,EACxD,KAAK,EACL,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,OAAK,QAAQ,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IAC5E,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,KAAK,GAAG,KAAC,WAAW,cAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,GAAe,CAAC;IAEzF,MAAM,MAAM,GAAG,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,OAAO,SAAS,KAAK,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC9D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,EAC5C,KAAC,KAAK,cAAE,KAAK,GAAS,IACjB,CACR,CAAC;IAEF,OAAO,CACL,MAAC,iBAAiB,OAAK,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,sCACnD,CAAC,QAAQ,IAAI,CACZ,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CACtD,KAAC,kBAAkB,IACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,EAAE,CAAC;wBACtB,CAAC,mBACc,aAAa,mBACb,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAChC,CAAC,CAAC,aAAa,CAAC,YAE3B,MAAM,GACY,CACtB,EACA,SAAS,KAAK,SAAS,IAAI,MAAM,IACvB,CACd,EAEA,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClE,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YAAG,KAAK,GAAkB,CAC/D,CAAC,CAAC,CAAC,CACF,KAAK,CACN,IACiB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport type { FC } from 'react';\n\nimport {\n  CardHeader,\n  useI18n,\n  EmptyState,\n  ExpandCollapse,\n  Icon,\n  Text,\n  Count,\n  Flex,\n  useUID,\n  CardContent\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem } from '../Tasks/TaskList';\nimport type { TaskItemProps } from '../Tasks/TaskList';\n\nimport { StyledAssignments, StyledExpandButton } from './Assignments.styles';\n\nexport interface AssignmentsProps extends NoChildrenProp {\n  /** An array of TaskItemProps to generate the list. */\n  items: TaskItemProps[];\n  /** Integer representing the total count of tasks. */\n  count: number;\n  /**\n   * Controls the collapsed state of the assignments list.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Call when the user clicks the collapsed element.\n   */\n  onToggleCollapsed?: () => void;\n}\n\nconst Assignments: FC<ForwardProps & AssignmentsProps> = ({\n  items,\n  count,\n  collapsed,\n  onToggleCollapsed,\n  ...restProps\n}) => {\n  const openItem = items.find(item => item.content);\n  const t = useI18n();\n  const assignmentsId = useUID();\n\n  const TaskItems = useMemo(() => {\n    return openItem ? <TaskItem {...openItem} /> : <TaskList items={items} />;\n  }, [items, openItem]);\n\n  const tasks = <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>;\n\n  const header = (\n    <Flex container={{ alignItems: 'center', gap: 1 }}>\n      {typeof collapsed === 'boolean' && <Icon name='caret-right' />}\n      <Text variant='h2'>{t('assignments')}</Text>\n      <Count>{count}</Count>\n    </Flex>\n  );\n\n  return (\n    <StyledAssignments {...restProps} openItem={!!openItem} data-app-region>\n      {!openItem && (\n        <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n          {typeof collapsed === 'boolean' && onToggleCollapsed && (\n            <StyledExpandButton\n              type='button'\n              variant='text'\n              onClick={() => {\n                onToggleCollapsed();\n              }}\n              aria-controls={assignmentsId}\n              aria-expanded={!collapsed ? 'true' : 'false'}\n              aria-label={t('assignments')}\n            >\n              {header}\n            </StyledExpandButton>\n          )}\n          {collapsed === undefined && header}\n        </CardHeader>\n      )}\n\n      {typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (\n        <ExpandCollapse collapsed={collapsed}>{tasks}</ExpandCollapse>\n      ) : (\n        tasks\n      )}\n    </StyledAssignments>\n  );\n};\n\nexport default Assignments;\n"]}
+{"version":3,"file":"Assignments.js","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EACL,UAAU,EACV,OAAO,EACP,UAAU,EACV,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAkB7E,MAAM,WAAW,GAAwC,CAAC,EACxD,KAAK,EACL,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,OAAK,QAAQ,EAAE,UAAU,EAAC,IAAI,GAAG,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IAC5F,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,KAAK,GAAG,KAAC,WAAW,cAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,GAAe,CAAC;IAEzF,MAAM,MAAM,GAAG,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,OAAO,SAAS,KAAK,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC9D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,EAC5C,KAAC,KAAK,cAAE,KAAK,GAAS,IACjB,CACR,CAAC;IAEF,OAAO,CACL,MAAC,iBAAiB,OAAK,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,sCACnD,CAAC,QAAQ,IAAI,CACZ,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CACtD,KAAC,kBAAkB,IACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,EAAE,CAAC;wBACtB,CAAC,mBACc,aAAa,mBACb,CAAC,SAAS,gBACb,CAAC,CAAC,aAAa,CAAC,YAE3B,MAAM,GACY,CACtB,EACA,SAAS,KAAK,SAAS,IAAI,MAAM,IACvB,CACd,EAEA,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClE,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YAAG,KAAK,GAAkB,CAC/D,CAAC,CAAC,CAAC,CACF,KAAK,CACN,IACiB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport type { FC } from 'react';\n\nimport {\n  CardHeader,\n  useI18n,\n  EmptyState,\n  ExpandCollapse,\n  Icon,\n  Text,\n  Count,\n  Flex,\n  useUID,\n  CardContent\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem } from '../Tasks/TaskList';\nimport type { TaskItemProps } from '../Tasks/TaskList';\n\nimport { StyledAssignments, StyledExpandButton } from './Assignments.styles';\n\nexport interface AssignmentsProps extends NoChildrenProp {\n  /** An array of TaskItemProps to generate the list. */\n  items: TaskItemProps[];\n  /** Integer representing the total count of tasks. */\n  count: number;\n  /**\n   * Controls the collapsed state of the assignments list.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Call when the user clicks the collapsed element.\n   */\n  onToggleCollapsed?: () => void;\n}\n\nconst Assignments: FC<ForwardProps & AssignmentsProps> = ({\n  items,\n  count,\n  collapsed,\n  onToggleCollapsed,\n  ...restProps\n}) => {\n  const openItem = items.find(item => item.content);\n  const t = useI18n();\n  const assignmentsId = useUID();\n\n  const TaskItems = useMemo(() => {\n    return openItem ? <TaskItem {...openItem} headingTag='h2' /> : <TaskList items={items} />;\n  }, [items, openItem]);\n\n  const tasks = <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>;\n\n  const header = (\n    <Flex container={{ alignItems: 'center', gap: 1 }}>\n      {typeof collapsed === 'boolean' && <Icon name='caret-right' />}\n      <Text variant='h2'>{t('assignments')}</Text>\n      <Count>{count}</Count>\n    </Flex>\n  );\n\n  return (\n    <StyledAssignments {...restProps} openItem={!!openItem} data-app-region>\n      {!openItem && (\n        <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n          {typeof collapsed === 'boolean' && onToggleCollapsed && (\n            <StyledExpandButton\n              type='button'\n              variant='text'\n              onClick={() => {\n                onToggleCollapsed();\n              }}\n              aria-controls={assignmentsId}\n              aria-expanded={!collapsed}\n              aria-label={t('assignments')}\n            >\n              {header}\n            </StyledExpandButton>\n          )}\n          {collapsed === undefined && header}\n        </CardHeader>\n      )}\n\n      {typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (\n        <ExpandCollapse collapsed={collapsed}>{tasks}</ExpandCollapse>\n      ) : (\n        tasks\n      )}\n    </StyledAssignments>\n  );\n};\n\nexport default Assignments;\n"]}

package/lib/components/Assignments/Assignments.styles.d.ts

@@ -1,5 +1,5 @@
-export declare const StyledExpandButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAssignments: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
+export declare const StyledExpandButton: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAssignments: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").CardProps>, import("styled-components").DefaultTheme, {
     openItem?: boolean;
 }, never>;
 //# sourceMappingURL=Assignments.styles.d.ts.map

package/lib/components/Assignments/Assignments.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Assignments.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,kBAAkB,qOAwB7B,CAAC;AAIH,eAAO,MAAM,iBAAiB;eAA6B,OAAO;SAchE,CAAC"}
+{"version":3,"file":"Assignments.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,kBAAkB,oNAwB7B,CAAC;AAIH,eAAO,MAAM,iBAAiB;eAA6B,OAAO;SAchE,CAAC"}

package/lib/components/CaseHierarchy/CaseHierarchy.d.ts

@@ -0,0 +1,6 @@
+import type { CaseHierarchyProps } from './CaseHierarchy.types';
+declare const _default: import("react").ForwardRefExoticComponent<Omit<CaseHierarchyProps, "ref"> & import("react").RefAttributes<HTMLUListElement>> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "icon"]>;
+};
+export default _default;
+//# sourceMappingURL=CaseHierarchy.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseHierarchy.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;;;;AA0DhE,wBAAmE"}

package/lib/components/CaseHierarchy/CaseHierarchy.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Count, EmptyState, ErrorState, Flex, Icon, Progress, Text, useI18n, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import { StyledCaseHierarchy, StyledCaseHierarchyHeader, StyledCaseHierarchyTree, StyledOverflowContainer } from './CaseHierarchy.styles';
+import { getCaseHierarchyTestIds } from './CaseHierarchy.test-ids';
+const CaseHierarchy = forwardRef(function CaseHierarchy({ testId, heading, icon, loading, error, count, nodes, currentCaseId, ...restProps }, ref) {
+    const t = useI18n();
+    const testIds = useTestIds(testId, getCaseHierarchyTestIds);
+    const content = (() => {
+        if (error) {
+            return _jsx(ErrorState, { message: t('error') });
+        }
+        if (loading) {
+            return _jsx(Progress, { placement: 'block' });
+        }
+        if (nodes.length === 0) {
+            return _jsx(EmptyState, {});
+        }
+        return _jsx(StyledCaseHierarchyTree, { ...restProps, currentNodeId: currentCaseId, nodes: nodes });
+    })();
+    return (_jsxs(StyledCaseHierarchy, { "data-testid": testIds.root, ref: ref, children: [_jsx(StyledCaseHierarchyHeader, { children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { "data-testid": testIds.icon, name: icon ?? 'folder-nested', size: 's' }), _jsx(Text, { "data-testid": testIds.heading, variant: 'h3', children: heading }), !loading && count && count > 0 && _jsx(Count, { children: count })] }) }), _jsx(StyledOverflowContainer, { children: content })] }));
+});
+export default withTestIds(CaseHierarchy, getCaseHierarchyTestIds);
+//# sourceMappingURL=CaseHierarchy.js.map

package/lib/components/CaseHierarchy/CaseHierarchy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseHierarchy.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EACL,KAAK,EACL,UAAU,EACV,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,mBAAmB,EACnB,yBAAyB,EACzB,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAEnE,MAAM,aAAa,GAAG,UAAU,CAAC,SAAS,aAAa,CACrD,EACE,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,KAAK,EACL,aAAa,EACb,GAAG,SAAS,EACwB,EACtC,GAA0B;IAE1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;IAE5D,MAAM,OAAO,GAAG,CAAC,GAAG,EAAE;QACpB,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,GAAI,CAAC;QAC7C,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,GAAG,CAAC;QACxC,CAAC;QAED,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACvB,OAAO,KAAC,UAAU,KAAG,CAAC;QACxB,CAAC;QAED,OAAO,KAAC,uBAAuB,OAAK,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;IAChG,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO,CACL,MAAC,mBAAmB,mBAAc,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,aACtD,KAAC,yBAAyB,cACxB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,IAAI,mBAAc,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,IAAI,eAAe,EAAE,IAAI,EAAC,GAAG,GAAG,EAC3E,KAAC,IAAI,mBAAc,OAAO,CAAC,OAAO,EAAE,OAAO,EAAC,IAAI,YAC7C,OAAO,GACH,EACN,CAAC,OAAO,IAAI,KAAK,IAAI,KAAK,GAAG,CAAC,IAAI,KAAC,KAAK,cAAE,KAAK,GAAS,IACpD,GACmB,EAC5B,KAAC,uBAAuB,cAAE,OAAO,GAA2B,IACxC,CACvB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,aAAa,EAAE,uBAAuB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\n\nimport {\n  Count,\n  EmptyState,\n  ErrorState,\n  Flex,\n  Icon,\n  Progress,\n  Text,\n  useI18n,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\n\nimport type { CaseHierarchyProps } from './CaseHierarchy.types';\nimport {\n  StyledCaseHierarchy,\n  StyledCaseHierarchyHeader,\n  StyledCaseHierarchyTree,\n  StyledOverflowContainer\n} from './CaseHierarchy.styles';\nimport { getCaseHierarchyTestIds } from './CaseHierarchy.test-ids';\n\nconst CaseHierarchy = forwardRef(function CaseHierarchy(\n  {\n    testId,\n    heading,\n    icon,\n    loading,\n    error,\n    count,\n    nodes,\n    currentCaseId,\n    ...restProps\n  }: PropsWithoutRef<CaseHierarchyProps>,\n  ref: Ref<HTMLUListElement>\n) {\n  const t = useI18n();\n  const testIds = useTestIds(testId, getCaseHierarchyTestIds);\n\n  const content = (() => {\n    if (error) {\n      return <ErrorState message={t('error')} />;\n    }\n\n    if (loading) {\n      return <Progress placement='block' />;\n    }\n\n    if (nodes.length === 0) {\n      return <EmptyState />;\n    }\n\n    return <StyledCaseHierarchyTree {...restProps} currentNodeId={currentCaseId} nodes={nodes} />;\n  })();\n\n  return (\n    <StyledCaseHierarchy data-testid={testIds.root} ref={ref}>\n      <StyledCaseHierarchyHeader>\n        <Flex container={{ alignItems: 'center', gap: 1 }}>\n          <Icon data-testid={testIds.icon} name={icon ?? 'folder-nested'} size='s' />\n          <Text data-testid={testIds.heading} variant='h3'>\n            {heading}\n          </Text>\n          {!loading && count && count > 0 && <Count>{count}</Count>}\n        </Flex>\n      </StyledCaseHierarchyHeader>\n      <StyledOverflowContainer>{content}</StyledOverflowContainer>\n    </StyledCaseHierarchy>\n  );\n});\n\nexport default withTestIds(CaseHierarchy, getCaseHierarchyTestIds);\n"]}

package/lib/components/CaseHierarchy/CaseHierarchy.styles.d.ts

@@ -0,0 +1,6 @@
+import { StandardTree } from '@pega/cosmos-react-core';
+export declare const StyledCaseHierarchyTree: typeof StandardTree;
+export declare const StyledOverflowContainer: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCaseHierarchyHeader: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").CardHeaderProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCaseHierarchy: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").CardProps>, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=CaseHierarchy.styles.d.ts.map

package/lib/components/CaseHierarchy/CaseHierarchy.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseHierarchy.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAoB,YAAY,EAAqB,MAAM,yBAAyB,CAAC;AAK5F,eAAO,MAAM,uBAAuB,EAAE,OAAO,YAU3C,CAAC;AAIH,eAAO,MAAM,uBAAuB,0OAoBnC,CAAC;AAIF,eAAO,MAAM,yBAAyB,wNAIpC,CAAC;AAIH,eAAO,MAAM,mBAAmB,kNAK/B,CAAC"}

package/lib/components/CaseHierarchy/CaseHierarchy.styles.js

@@ -0,0 +1,51 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, StandardTree, Card, CardContent } from '@pega/cosmos-react-core';
+import { StyledSummaryListHeader } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';
+import { StyledDialog } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';
+import { StyledNodeInteraction } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';
+export const StyledCaseHierarchyTree = styled(StandardTree)(({ theme }) => {
+    return css `
+    display: table;
+    width: 100%;
+
+    [aria-current='true'],
+    [aria-current='page'] {
+      font-weight: ${theme.base['font-weight']['semi-bold']};
+    }
+  `;
+});
+StyledCaseHierarchyTree.defaultProps = defaultThemeProp;
+export const StyledOverflowContainer = styled(CardContent)(({ theme }) => css `
+    overflow: auto;
+    max-height: inherit;
+
+    ${StyledNodeInteraction} {
+      border-top-right-radius: calc(
+        var(--first-visible) * var(--border-radius, ${theme.base['border-radius']})
+      );
+      border-top-left-radius: calc(
+        var(--first-visible) * var(--border-radius, ${theme.base['border-radius']})
+      );
+      border-bottom-left-radius: calc(
+        var(--last-visible) * var(--border-radius, ${theme.base['border-radius']})
+      );
+      border-bottom-right-radius: calc(
+        var(--last-visible) * var(--border-radius, ${theme.base['border-radius']})
+      );
+    }
+  `);
+StyledOverflowContainer.defaultProps = defaultThemeProp;
+export const StyledCaseHierarchyHeader = styled(StyledSummaryListHeader)(({ theme }) => {
+    return css `
+    padding-block-end: calc(${theme.base.spacing} / 2);
+  `;
+});
+StyledCaseHierarchyHeader.defaultProps = defaultThemeProp;
+export const StyledCaseHierarchy = styled(Card) `
+  ${StyledDialog} & {
+    /* stylelint-disable-next-line unit-allowed-list */
+    max-height: calc(100dvh - 5rem);
+  }
+`;
+StyledCaseHierarchy.defaultProps = defaultThemeProp;
+//# sourceMappingURL=CaseHierarchy.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseHierarchy.styles.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,uBAAuB,EAAE,MAAM,gEAAgE,CAAC;AACzG,OAAO,EAAE,YAAY,EAAE,MAAM,6DAA6D,CAAC;AAC3F,OAAO,EAAE,qBAAqB,EAAE,MAAM,iEAAiE,CAAC;AAExG,MAAM,CAAC,MAAM,uBAAuB,GAAwB,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,OAAO,GAAG,CAAA;;;;;;qBAMS,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;GAExD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,WAAW,CAAC,CACxD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;MAId,qBAAqB;;sDAE2B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;sDAG3B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;qDAG5B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;qDAG3B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;GAG7E,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrF,OAAO,GAAG,CAAA;8BACkB,KAAK,CAAC,IAAI,CAAC,OAAO;GAC7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC3C,YAAY;;;;CAIf,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, StandardTree, Card, CardContent } from '@pega/cosmos-react-core';\nimport { StyledSummaryListHeader } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';\nimport { StyledDialog } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';\nimport { StyledNodeInteraction } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nexport const StyledCaseHierarchyTree: typeof StandardTree = styled(StandardTree)(({ theme }) => {\n  return css`\n    display: table;\n    width: 100%;\n\n    [aria-current='true'],\n    [aria-current='page'] {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    }\n  `;\n});\n\nStyledCaseHierarchyTree.defaultProps = defaultThemeProp;\n\nexport const StyledOverflowContainer = styled(CardContent)(\n  ({ theme }) => css`\n    overflow: auto;\n    max-height: inherit;\n\n    ${StyledNodeInteraction} {\n      border-top-right-radius: calc(\n        var(--first-visible) * var(--border-radius, ${theme.base['border-radius']})\n      );\n      border-top-left-radius: calc(\n        var(--first-visible) * var(--border-radius, ${theme.base['border-radius']})\n      );\n      border-bottom-left-radius: calc(\n        var(--last-visible) * var(--border-radius, ${theme.base['border-radius']})\n      );\n      border-bottom-right-radius: calc(\n        var(--last-visible) * var(--border-radius, ${theme.base['border-radius']})\n      );\n    }\n  `\n);\n\nStyledOverflowContainer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHierarchyHeader = styled(StyledSummaryListHeader)(({ theme }) => {\n  return css`\n    padding-block-end: calc(${theme.base.spacing} / 2);\n  `;\n});\n\nStyledCaseHierarchyHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHierarchy = styled(Card)`\n  ${StyledDialog} & {\n    /* stylelint-disable-next-line unit-allowed-list */\n    max-height: calc(100dvh - 5rem);\n  }\n`;\n\nStyledCaseHierarchy.defaultProps = defaultThemeProp;\n"]}

package/lib/components/CaseHierarchy/CaseHierarchy.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getCaseHierarchyTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "icon"]>;
+//# sourceMappingURL=CaseHierarchy.test-ids.d.ts.map

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

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

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

@@ -0,0 +1,6 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getCaseHierarchyTestIds = createTestIds('case-hierarchy', [
+    'heading',
+    'icon'
+]);
+//# sourceMappingURL=CaseHierarchy.test-ids.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseHierarchy.test-ids.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,gBAAgB,EAAE;IACrE,SAAS;IACT,MAAM;CACE,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getCaseHierarchyTestIds = createTestIds('case-hierarchy', [\n  'heading',\n  'icon'\n] as const);\n"]}

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

@@ -0,0 +1,23 @@
+import type { Ref } from 'react';
+import type { IconProps, OmitStrict, StandardTreeNode, StandardTreeProps, TestIdProp, TreeNode } from '@pega/cosmos-react-core';
+export interface CaseHierarchyNode extends OmitStrict<StandardTreeNode, 'nodes'> {
+    nodes?: CaseHierarchyNode[];
+    caseTypeId?: string;
+}
+export interface CaseHierarchyProps extends OmitStrict<StandardTreeProps, 'currentNodeId' | 'ref'>, TestIdProp {
+    /** Heading shown on the Card wrapping the component. */
+    heading: string;
+    /** The icon rendered as part of the header. If not set will default to 'folder-nested'. */
+    icon?: IconProps['name'];
+    /** The currently selected case, will be highlighted by default. */
+    currentCaseId?: TreeNode['id'];
+    /** If set, a progress indicator will render in place of the component. */
+    loading?: boolean;
+    /** If set, an error state will render in place of the component. */
+    error?: boolean;
+    /** Will render the provided number in a count badge next to the heading. */
+    count?: number;
+    /** A ref to the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+//# sourceMappingURL=CaseHierarchy.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseHierarchy.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EACV,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,iBAAkB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAC9E,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,iBAAiB,EAAE,eAAe,GAAG,KAAK,CAAC,EAC5D,UAAU;IACZ,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,mEAAmE;IACnE,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/CaseHierarchy/CaseHierarchy.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CaseHierarchy.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseHierarchy.types.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/CaseHierarchy.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type {\n  IconProps,\n  OmitStrict,\n  StandardTreeNode,\n  StandardTreeProps,\n  TestIdProp,\n  TreeNode\n} from '@pega/cosmos-react-core';\n\nexport interface CaseHierarchyNode extends OmitStrict<StandardTreeNode, 'nodes'> {\n  nodes?: CaseHierarchyNode[];\n  caseTypeId?: string;\n}\n\nexport interface CaseHierarchyProps\n  extends OmitStrict<StandardTreeProps, 'currentNodeId' | 'ref'>,\n    TestIdProp {\n  /** Heading shown on the Card wrapping the component. */\n  heading: string;\n  /** The icon rendered as part of the header. If not set will default to 'folder-nested'. */\n  icon?: IconProps['name'];\n  /** The currently selected case, will be highlighted by default. */\n  currentCaseId?: TreeNode['id'];\n  /** If set, a progress indicator will render in place of the component. */\n  loading?: boolean;\n  /** If set, an error state will render in place of the component. */\n  error?: boolean;\n  /** Will render the provided number in a count badge next to the heading. */\n  count?: number;\n  /** A ref to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/CaseHierarchy/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './CaseHierarchy';
+export type { CaseHierarchyProps, CaseHierarchyNode } from './CaseHierarchy.types';
+export { getCaseHierarchyTestIds } from './CaseHierarchy.test-ids';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/CaseHierarchy/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC"}

package/lib/components/CaseHierarchy/index.js

@@ -0,0 +1,3 @@
+export { default } from './CaseHierarchy';
+export { getCaseHierarchyTestIds } from './CaseHierarchy.test-ids';
+//# sourceMappingURL=index.js.map

package/lib/components/CaseHierarchy/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseHierarchy/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["export { default } from './CaseHierarchy';\nexport type { CaseHierarchyProps, CaseHierarchyNode } from './CaseHierarchy.types';\nexport { getCaseHierarchyTestIds } from './CaseHierarchy.test-ids';\n"]}

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

@@ -1,5 +1,5 @@
-import type { FunctionComponent, Ref } from 'react';
-import type { ForwardProps, BaseProps, TestIdProp, NoChildrenProp, ErrorStateProps } from '@pega/cosmos-react-core';
+import type { Ref } from 'react';
+import type { ForwardRefForwardPropsComponent, BaseProps, TestIdProp, NoChildrenProp, ErrorStateProps } from '@pega/cosmos-react-core';
 import type { CaseViewProps } from '../CaseView';
 import type { CaseViewContextValue } from '../CaseView/CaseView.types';
 export interface CasePreviewProps extends Pick<CaseViewProps, 'caseId' | 'heading' | 'subheading' | 'parentCases' | 'icon' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'summaryFields' | 'tabs' | 'tabContent' | 'stages' | 'tasks' | 'banners' | 'utilities' | 'utilitiesSummaryItems'>, NoChildrenProp, TestIdProp, BaseProps {
@@ -26,7 +26,7 @@ export interface CasePreviewProps extends Pick<CaseViewProps, 'caseId' | 'headin
     /** Reference to the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-declare const _default: FunctionComponent<CasePreviewProps & ForwardProps> & {
+declare const _default: ForwardRefForwardPropsComponent<CasePreviewProps> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["close"]>;
 };
 export default _default;

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":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAyBrE,OAAO,KAAK,EACV,YAAY,EACZ,SAAS,EACT,UAAU,EACV,cAAc,EACd,eAAe,EAChB,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAMvE,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,aAAa,EACX,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,aAAa,GACb,MAAM,GACN,UAAU,GACV,kBAAkB,GAClB,SAAS,GACT,iBAAiB,GACjB,QAAQ,GACR,eAAe,GACf,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,SAAS,GACT,WAAW,GACX,uBAAuB,CAC1B,EACD,cAAc,EACd,UAAU,EACV,SAAS;IACX,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,iDAAiD;IACjD,IAAI,EAAE,OAAO,CAAC;IACd,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAC1C,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;;;;AA8PD,wBAA+D"}
+{"version":3,"file":"CasePreview.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAwBlD,OAAO,KAAK,EACV,+BAA+B,EAC/B,SAAS,EACT,UAAU,EACV,cAAc,EACd,eAAe,EAChB,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAMvE,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,aAAa,EACX,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,aAAa,GACb,MAAM,GACN,UAAU,GACV,kBAAkB,GAClB,SAAS,GACT,iBAAiB,GACjB,QAAQ,GACR,eAAe,GACf,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,SAAS,GACT,WAAW,GACX,uBAAuB,CAC1B,EACD,cAAc,EACd,UAAU,EACV,SAAS;IACX,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,iDAAiD;IACjD,IAAI,EAAE,OAAO,CAAC;IACd,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAC1C,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;;;;AAmQD,wBAA+D"}

package/lib/components/CasePreview/CasePreview.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback, useEffect, useContext } from 'react';
 import styled, { css } from 'styled-components';
-import { Drawer, Icon, registerIcon, Button, Flex, tryCatch, defaultThemeProp, useBreakpoint, useElement, useDirection, useI18n, AppShellContext, useTestIds, withTestIds, Progress, ErrorState, getFocusables, readableColor, useConsolidatedRef, StyledButton } from '@pega/cosmos-react-core';
+import { Drawer, Icon, registerIcon, Button, Flex, defaultThemeProp, useBreakpoint, useElement, useDirection, useI18n, AppShellContext, useTestIds, withTestIds, Progress, ErrorState, getFocusables, useConsolidatedRef, StyledButton, calculateForegroundColor } 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';
 import { getCasePreviewTestIds } from './CasePreview.test-ids';
@@ -13,19 +13,20 @@ const StyledPreviewHeader = styled.div(({ theme }) => {
   `;
 });
 StyledPreviewHeader.defaultProps = defaultThemeProp;
-const StyledPreviewActions = styled.div(({ theme: { base: { spacing, palette: { 'brand-primary': brandPrimary, 'foreground-color': foreground }, 'z-index': { backdrop } } }, fixedHeaderHeight, progressActive }) => {
-    const buttonColor = tryCatch(() => readableColor(brandPrimary));
+const StyledPreviewActions = styled.div(({ theme: { base: { spacing, 'z-index': { backdrop } }, components: { 'case-view': { header: { background, 'foreground-color': color } } } }, fixedHeaderHeight, progressActive }) => {
+    const foregroundColor = calculateForegroundColor(background, color);
     return css `
-      background-color: ${brandPrimary};
+      background: ${background};
+      color: ${foregroundColor};
       padding: ${spacing} calc(2 * ${spacing}) calc(0.25 * ${spacing});
 
       ${StyledButton} {
-        color: ${buttonColor};
+        color: ${foregroundColor};
 
         ${progressActive &&
         css `
           z-index: ${backdrop + 1};
-          color: ${foreground};
+          color: ${foregroundColor};
         `}
       }
 

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 { forwardRef, useState, useCallback, useEffect, useContext } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Drawer,\n  Icon,\n  registerIcon,\n  Button,\n  Flex,\n  tryCatch,\n  defaultThemeProp,\n  useBreakpoint,\n  useElement,\n  useDirection,\n  useI18n,\n  AppShellContext,\n  useTestIds,\n  withTestIds,\n  Progress,\n  ErrorState,\n  getFocusables,\n  readableColor,\n  useConsolidatedRef,\n  StyledButton\n} from '@pega/cosmos-react-core';\nimport type {\n  ForwardProps,\n  BaseProps,\n  TestIdProp,\n  NoChildrenProp,\n  ErrorStateProps\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport CaseView, {\n  StyledCaseView,\n  StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledSummaryRegion\n} from '../CaseView';\nimport type { CaseViewProps } from '../CaseView';\nimport type { CaseViewContextValue } from '../CaseView/CaseView.types';\n\nimport { getCasePreviewTestIds } from './CasePreview.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps\n  extends Pick<\n      CaseViewProps,\n      | 'caseId'\n      | 'heading'\n      | 'subheading'\n      | 'parentCases'\n      | 'icon'\n      | 'followed'\n      | 'onFollowedChange'\n      | 'actions'\n      | 'promotedActions'\n      | 'onEdit'\n      | 'summaryFields'\n      | 'tabs'\n      | 'tabContent'\n      | 'stages'\n      | 'tasks'\n      | 'banners'\n      | 'utilities'\n      | 'utilitiesSummaryItems'\n    >,\n    NoChildrenProp,\n    TestIdProp,\n    BaseProps {\n  /** A set of props including an href that will be forwarded to the case preview's heading and subheading. */\n  caseLink?: CaseViewContextValue['caseLink'];\n  /** If true, the Case Preview will be visible. */\n  open: boolean;\n  /** If true, the Case Preview will render in a progress state. */\n  progress?: boolean;\n  /** If true, the Case Preview will render in an error state. */\n  error?: boolean;\n  /** Callback fired when \"Try again\" button is clicked in an error state. */\n  onErrorRetry?: ErrorStateProps['onRetry'];\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  fixedHeaderHeight?: boolean;\n  progressActive?: boolean;\n}>(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'brand-primary': brandPrimary, 'foreground-color': foreground },\n        'z-index': { backdrop }\n      }\n    },\n    fixedHeaderHeight,\n    progressActive\n  }) => {\n    const buttonColor = tryCatch(() => readableColor(brandPrimary));\n\n    return css`\n      background-color: ${brandPrimary};\n      padding: ${spacing} calc(2 * ${spacing}) calc(0.25 * ${spacing});\n\n      ${StyledButton} {\n        color: ${buttonColor};\n\n        ${progressActive &&\n        css`\n          z-index: ${backdrop + 1};\n          color: ${foreground};\n        `}\n      }\n\n      ${fixedHeaderHeight &&\n      css`\n        min-height: 6.625rem;\n      `}\n    `;\n  }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['app-background']};\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    transition-property: transform, box-shadow, opacity, border-inline-start;\n    transition-duration: max(${theme.base.animation.speed}, 0.0001s);\n    transition-timing-function: ${theme.base.animation.timing.ease};\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      ${StyledSummaryRegion} {\n        position: relative;\n        top: 0;\n      }\n    }\n\n    ${StyledCaseViewContent} {\n      overflow-y: auto;\n\n      & > :last-child {\n        padding-bottom: calc(2 * ${theme.base.spacing});\n      }\n    }\n\n    @media (min-width: ${theme.base.breakpoints.xl}) {\n      box-shadow: none;\n      border-inline-start: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst CasePreview: FunctionComponent<CasePreviewProps & ForwardProps> = forwardRef(\n  function CasePreview(props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) {\n    const {\n      testId,\n      open: openProp,\n      progress,\n      error,\n      onErrorRetry,\n      caseId,\n      heading,\n      subheading,\n      caseLink,\n      parentCases,\n      icon,\n      followed,\n      onFollowedChange,\n      summaryFields,\n      tabs,\n      stages,\n      tasks,\n      tabContent,\n      utilities,\n      utilitiesSummaryItems,\n      actions,\n      banners,\n      onEdit,\n      onBeforeOpen,\n      onAfterOpen,\n      onBeforeClose,\n      ...restProps\n    } = props;\n    const testIds = useTestIds(testId, getCasePreviewTestIds);\n\n    const t = useI18n();\n    const previewRef = useConsolidatedRef(ref);\n\n    const { previewTriggerRef, setPreviewActive } = useContext(AppShellContext);\n    const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n    const isSmallOrAbove = useBreakpoint('sm');\n    const [open, setOpen] = useState(openProp);\n    const [progressActive, setProgressActive] = useState(false);\n    const [progressVisible, setProgressVisible] = useState(false);\n    const direction = useDirection();\n\n    const closePreview = useCallback(() => {\n      setOpen(false);\n      previewTriggerRef.current?.focus();\n    }, []);\n\n    const setFocus = () => {\n      if (progressVisible) return;\n\n      const focusables = getFocusables(previewRef).filter(el => el !== closeButtonEl);\n      const focusable = focusables[0] ?? closeButtonEl;\n      focusable?.focus();\n    };\n\n    useEffect(() => {\n      setOpen(openProp);\n    }, [openProp]);\n\n    useEffect(() => {\n      if (!progressVisible) {\n        setFocus();\n      }\n    }, [progressVisible]);\n\n    useEffect(() => {\n      return () => {\n        setPreviewActive(false);\n      };\n    }, []);\n\n    const content = error ? (\n      <ErrorState message={t('preview_error')} onRetry={onErrorRetry} />\n    ) : (\n      <CaseView\n        caseId={caseId}\n        parentCases={parentCases}\n        heading={heading}\n        subheading={subheading}\n        caseLink={caseLink}\n        icon={icon}\n        followed={followed}\n        onFollowedChange={onFollowedChange}\n        summaryFields={summaryFields}\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        isPreview\n      />\n    );\n\n    return (\n      <Drawer\n        data-testid={testIds.root}\n        {...restProps}\n        onBeforeOpen={() => {\n          setPreviewActive(true);\n          onBeforeOpen?.();\n        }}\n        onAfterOpen={() => {\n          setFocus();\n          onAfterOpen?.();\n        }}\n        onBeforeClose={() => {\n          setPreviewActive(false);\n          onBeforeClose?.();\n        }}\n        as={StyledPreviewDrawer}\n        role='complementary'\n        forwardedAs={Flex}\n        container={{ direction: 'column' }}\n        ref={previewRef}\n        open={open && isSmallOrAbove}\n        position='fixed'\n        placement={direction.end}\n        aria-label={t('preview_of_noun', [heading])}\n        shadow\n        nullWhenClosed\n      >\n        <StyledPreviewActions\n          fixedHeaderHeight={!!error || !!progress}\n          progressActive={progressActive}\n        >\n          <Button\n            data-testid={testIds.close}\n            variant='simple'\n            icon\n            onClick={closePreview}\n            ref={setCloseButtonEl}\n            label={t('close_preview')}\n          >\n            <Icon name='times' />\n          </Button>\n        </StyledPreviewActions>\n\n        <Progress\n          placement='local'\n          visible={!!progress}\n          focusOnVisible\n          delay\n          onTransitionStartIn={() => {\n            setProgressActive(true);\n            setProgressVisible(true);\n          }}\n          onTransitionStartOut={() => setProgressActive(false)}\n          onTransitionEndOut={() => setProgressVisible(false)}\n        />\n\n        {!progress && content}\n      </Drawer>\n    );\n  }\n);\n\nexport default withTestIds(CasePreview, getCasePreviewTestIds);\n"]}
+{"version":3,"file":"CasePreview.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useEffect, useContext } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Drawer,\n  Icon,\n  registerIcon,\n  Button,\n  Flex,\n  defaultThemeProp,\n  useBreakpoint,\n  useElement,\n  useDirection,\n  useI18n,\n  AppShellContext,\n  useTestIds,\n  withTestIds,\n  Progress,\n  ErrorState,\n  getFocusables,\n  useConsolidatedRef,\n  StyledButton,\n  calculateForegroundColor\n} from '@pega/cosmos-react-core';\nimport type {\n  ForwardRefForwardPropsComponent,\n  BaseProps,\n  TestIdProp,\n  NoChildrenProp,\n  ErrorStateProps\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport CaseView, {\n  StyledCaseView,\n  StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledSummaryRegion\n} from '../CaseView';\nimport type { CaseViewProps } from '../CaseView';\nimport type { CaseViewContextValue } from '../CaseView/CaseView.types';\n\nimport { getCasePreviewTestIds } from './CasePreview.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps\n  extends Pick<\n      CaseViewProps,\n      | 'caseId'\n      | 'heading'\n      | 'subheading'\n      | 'parentCases'\n      | 'icon'\n      | 'followed'\n      | 'onFollowedChange'\n      | 'actions'\n      | 'promotedActions'\n      | 'onEdit'\n      | 'summaryFields'\n      | 'tabs'\n      | 'tabContent'\n      | 'stages'\n      | 'tasks'\n      | 'banners'\n      | 'utilities'\n      | 'utilitiesSummaryItems'\n    >,\n    NoChildrenProp,\n    TestIdProp,\n    BaseProps {\n  /** A set of props including an href that will be forwarded to the case preview's heading and subheading. */\n  caseLink?: CaseViewContextValue['caseLink'];\n  /** If true, the Case Preview will be visible. */\n  open: boolean;\n  /** If true, the Case Preview will render in a progress state. */\n  progress?: boolean;\n  /** If true, the Case Preview will render in an error state. */\n  error?: boolean;\n  /** Callback fired when \"Try again\" button is clicked in an error state. */\n  onErrorRetry?: ErrorStateProps['onRetry'];\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  fixedHeaderHeight?: boolean;\n  progressActive?: boolean;\n}>(\n  ({\n    theme: {\n      base: {\n        spacing,\n        'z-index': { backdrop }\n      },\n      components: {\n        'case-view': {\n          header: { background, 'foreground-color': color }\n        }\n      }\n    },\n    fixedHeaderHeight,\n    progressActive\n  }) => {\n    const foregroundColor = calculateForegroundColor(background, color);\n\n    return css`\n      background: ${background};\n      color: ${foregroundColor};\n      padding: ${spacing} calc(2 * ${spacing}) calc(0.25 * ${spacing});\n\n      ${StyledButton} {\n        color: ${foregroundColor};\n\n        ${progressActive &&\n        css`\n          z-index: ${backdrop + 1};\n          color: ${foregroundColor};\n        `}\n      }\n\n      ${fixedHeaderHeight &&\n      css`\n        min-height: 6.625rem;\n      `}\n    `;\n  }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['app-background']};\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    transition-property: transform, box-shadow, opacity, border-inline-start;\n    transition-duration: max(${theme.base.animation.speed}, 0.0001s);\n    transition-timing-function: ${theme.base.animation.timing.ease};\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      ${StyledSummaryRegion} {\n        position: relative;\n        top: 0;\n      }\n    }\n\n    ${StyledCaseViewContent} {\n      overflow-y: auto;\n\n      & > :last-child {\n        padding-bottom: calc(2 * ${theme.base.spacing});\n      }\n    }\n\n    @media (min-width: ${theme.base.breakpoints.xl}) {\n      box-shadow: none;\n      border-inline-start: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst CasePreview: ForwardRefForwardPropsComponent<CasePreviewProps> = forwardRef(\n  function CasePreview(props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) {\n    const {\n      testId,\n      open: openProp,\n      progress,\n      error,\n      onErrorRetry,\n      caseId,\n      heading,\n      subheading,\n      caseLink,\n      parentCases,\n      icon,\n      followed,\n      onFollowedChange,\n      summaryFields,\n      tabs,\n      stages,\n      tasks,\n      tabContent,\n      utilities,\n      utilitiesSummaryItems,\n      actions,\n      banners,\n      onEdit,\n      onBeforeOpen,\n      onAfterOpen,\n      onBeforeClose,\n      ...restProps\n    } = props;\n    const testIds = useTestIds(testId, getCasePreviewTestIds);\n\n    const t = useI18n();\n    const previewRef = useConsolidatedRef(ref);\n\n    const { previewTriggerRef, setPreviewActive } = useContext(AppShellContext);\n    const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n    const isSmallOrAbove = useBreakpoint('sm');\n    const [open, setOpen] = useState(openProp);\n    const [progressActive, setProgressActive] = useState(false);\n    const [progressVisible, setProgressVisible] = useState(false);\n    const direction = useDirection();\n\n    const closePreview = useCallback(() => {\n      setOpen(false);\n      previewTriggerRef.current?.focus();\n    }, []);\n\n    const setFocus = () => {\n      if (progressVisible) return;\n\n      const focusables = getFocusables(previewRef).filter(el => el !== closeButtonEl);\n      const focusable = focusables[0] ?? closeButtonEl;\n      focusable?.focus();\n    };\n\n    useEffect(() => {\n      setOpen(openProp);\n    }, [openProp]);\n\n    useEffect(() => {\n      if (!progressVisible) {\n        setFocus();\n      }\n    }, [progressVisible]);\n\n    useEffect(() => {\n      return () => {\n        setPreviewActive(false);\n      };\n    }, []);\n\n    const content = error ? (\n      <ErrorState message={t('preview_error')} onRetry={onErrorRetry} />\n    ) : (\n      <CaseView\n        caseId={caseId}\n        parentCases={parentCases}\n        heading={heading}\n        subheading={subheading}\n        caseLink={caseLink}\n        icon={icon}\n        followed={followed}\n        onFollowedChange={onFollowedChange}\n        summaryFields={summaryFields}\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        isPreview\n      />\n    );\n\n    return (\n      <Drawer\n        data-testid={testIds.root}\n        {...restProps}\n        onBeforeOpen={() => {\n          setPreviewActive(true);\n          onBeforeOpen?.();\n        }}\n        onAfterOpen={() => {\n          setFocus();\n          onAfterOpen?.();\n        }}\n        onBeforeClose={() => {\n          setPreviewActive(false);\n          onBeforeClose?.();\n        }}\n        as={StyledPreviewDrawer}\n        role='complementary'\n        forwardedAs={Flex}\n        container={{ direction: 'column' }}\n        ref={previewRef}\n        open={open && isSmallOrAbove}\n        position='fixed'\n        placement={direction.end}\n        aria-label={t('preview_of_noun', [heading])}\n        shadow\n        nullWhenClosed\n      >\n        <StyledPreviewActions\n          fixedHeaderHeight={!!error || !!progress}\n          progressActive={progressActive}\n        >\n          <Button\n            data-testid={testIds.close}\n            variant='simple'\n            icon\n            onClick={closePreview}\n            ref={setCloseButtonEl}\n            label={t('close_preview')}\n          >\n            <Icon name='times' />\n          </Button>\n        </StyledPreviewActions>\n\n        <Progress\n          placement='local'\n          visible={!!progress}\n          focusOnVisible\n          delay\n          onTransitionStartIn={() => {\n            setProgressActive(true);\n            setProgressVisible(true);\n          }}\n          onTransitionStartOut={() => setProgressActive(false)}\n          onTransitionEndOut={() => setProgressVisible(false)}\n        />\n\n        {!progress && content}\n      </Drawer>\n    );\n  }\n);\n\nexport default withTestIds(CasePreview, getCasePreviewTestIds);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAsC5C,QAAA,MAAM,UAAU,EAAE,EA0RjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAsC5C,QAAA,MAAM,UAAU,EAAE,EA4RjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/CaseView/CaseHeader/CaseHeader.js

@@ -94,8 +94,9 @@ const CaseHeader = () => {
     }, [heading, summaryFields, promotedActions]);
     return (_jsxs(Flex, { "data-testid": testIds.header, as: StyledCaseHeader, container: { direction: 'column', gap: 1.5 }, children: [_jsxs(Flex, { container: true, ref: contentsEl, children: [showExpandCollapse && onToggleSummary && !persistentUtility && (_jsx(StyledExpandCollapseSummaryButton, { ref: toggleButtonRef, onClick: onToggleSummary, label: t(summaryExpanded ? 'collapse' : 'expand'), "aria-label": t(summaryExpanded ? 'collapse_summary' : 'expand_summary'), icon: true, compact: true, children: _jsx(Icon, { name: summaryExpanded ? `arrow-micro-${start}` : 'arrow-micro-down' }) })), icon && (_jsx(Flex, { container: { pad: [1, 0, 0] }, item: { shrink: 0 }, children: _jsx(Icon, { "data-testid": testIds.icon, "aria-label": t('case_type_icon', [caseType ?? t('case_type')]), name: icon, background: iconBackground }) })), _jsxs(Flex, { as: StyledCaseHeaderText, container: {
                             direction: 'column',
-                            pad: [0.5, 2, 0.5, 1.5],
-                            alignItems: 'start'
+                            pad: [0.5, 2, 0.5, icon ? 2 : undefined],
+                            alignItems: 'start',
+                            justify: 'center'
                         }, item: aboveSM ? { shrink: wrapPromotedActions ? 1 : 0 } : { shrink: 1, grow: 1 }, ref: headerGroupEl, children: [_jsx(Text, { "data-testid": testIds.heading, variant: 'h1', children: caseLink ? _jsx(Link, { ...caseLink, children: heading }) : heading }), subheading && (!parentCases || subheading !== caseId) && (_jsx(StyledSubheading, { "data-testid": testIds.subheading, children: subheading })), parentCases && (_jsx(Breadcrumbs, { forwardedAs: 'p', path: [
                                     ...parentCases,
                                     {
@@ -118,7 +119,7 @@ const CaseHeader = () => {
                                         ]
                                         : []),
                                     ...(caseActions ?? [])
-                                ], menuAt: 1 }))] })] }), (!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&
+                                ], menuAt: 1, scrollAt: Infinity }))] })] }), (!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&
                 promotedActions &&
                 promotedActions.length > 0 ? (_jsx(Flex, { "data-testid": testIds.promotedActions, container: { justify: 'start', wrap: 'wrap', gap: 1, pad: [0, 0, 0.5] }, children: promotedActions.map(({ id, text, onClick }) => (_jsx("div", { children: _jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => onClick?.(id, e), children: text }) }, text))) })) : null] }));
 };