@pega/cosmos-react-work 5.0.0-dev.1.0 → 5.0.0-dev.10.0

package/lib/components/CaseView/UtilitiesSummary.js

@@ -1,21 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
-import { Card, Count, Flex, Icon, useI18n, VisuallyHiddenText } from '@pega/cosmos-react-core';
-export const StyledUtilitiesSummary = styled.div(({ theme }) => {
+import { Button, Card, Count, Flex, Icon, Tooltip, useI18n, VisuallyHiddenText, useElement } from '@pega/cosmos-react-core';
+export const StyledUtilitiesSummary = styled.div(() => {
     return css `
     width: 2.75rem;
-    padding: ${theme.base.spacing} 0;
   `;
 });
-const UtilitiesSummary = ({ items = [] }) => {
-    const t = useI18n();
-    return items.length ? (_jsx(Card, { container: { direction: 'column', alignItems: 'center', gap: 3 }, as: StyledUtilitiesSummary, "aria-label": t('utilities_summary'), role: 'list', children: items.map(item => {
-            return (_jsxs(Flex, { container: {
+const StyledUtilitySummaryButton = styled(Button)(({ theme }) => css `
+    padding-block: ${theme.base.spacing};
+    padding-inline: 0;
+    width: 100%;
+    color: currentColor;
+    border-radius: unset;
+    border: none;
+
+    &:hover {
+      color: currentColor;
+    }
+
+    &:focus {
+      z-index: 1;
+    }
+
+    &:first-child {
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+    }
+
+    &:last-child {
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+    }
+
+    & + & {
+      margin: 0;
+    }
+  `);
+const UtilitySummary = ({ name, iconName, count, onClick }) => {
+    const [utilSummaryTooltip, setUtilSummaryTooltip] = useElement();
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: {
                     direction: 'column',
                     alignItems: 'center',
                     gap: 0.5
-                }, item: { grow: 1 }, children: [_jsx(Icon, { name: item.iconName }), item.count !== undefined && _jsx(Count, { "aria-hidden": true, children: item.count }), _jsx(VisuallyHiddenText, { role: 'listitem', children: `${item.count ?? ''} ${item.name}` })] }, item.iconName));
-        }) })) : null;
+                }, onClick: onClick, ref: setUtilSummaryTooltip, as: StyledUtilitySummaryButton, children: [_jsx(Icon, { name: iconName }), count !== undefined && _jsx(Count, { "aria-hidden": true, children: count }), _jsx(VisuallyHiddenText, { role: 'listitem', children: `${count ?? ''} ${name}` })] }), _jsx(Tooltip, { target: utilSummaryTooltip, showDelay: 'none', hideDelay: 'none', children: name })] }));
+};
+const UtilitiesSummary = ({ items = [] }) => {
+    const t = useI18n();
+    return (_jsx(Card, { container: { direction: 'column', alignItems: 'center' }, as: StyledUtilitiesSummary, "aria-label": t('utilities_summary'), role: 'list', children: items.map(item => (_createElement(UtilitySummary, { ...item, key: item.iconName }))) }));
 };
 export default UtilitiesSummary;
 //# sourceMappingURL=UtilitiesSummary.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAQ/F,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAA6C,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE;IACpF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAChE,EAAE,EAAE,sBAAsB,gBACd,CAAC,CAAC,mBAAmB,CAAC,EAClC,IAAI,EAAC,MAAM,YAEV,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAGjB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAI,EAC5B,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,mCAAc,IAAI,CAAC,KAAK,GAAS,EACpE,KAAC,kBAAkB,IAAC,IAAI,EAAC,UAAU,YAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,IACtD,IAAI,CAAC,IACP,EAAE,GAAsB,KANnB,IAAI,CAAC,QAAQ,CAOb,CACR,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Card, Count, Flex, Icon, useI18n, VisuallyHiddenText } from '@pega/cosmos-react-core';\n\nimport { CaseViewProps } from './CaseView.types';\n\nexport interface UtilitiesSummaryProps {\n  items?: CaseViewProps['utilitiesSummaryItems'];\n}\n\nexport const StyledUtilitiesSummary = styled.div(({ theme }) => {\n  return css`\n    width: 2.75rem;\n    padding: ${theme.base.spacing} 0;\n  `;\n});\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps> = ({ items = [] }) => {\n  const t = useI18n();\n  return items.length ? (\n    <Card\n      container={{ direction: 'column', alignItems: 'center', gap: 3 }}\n      as={StyledUtilitiesSummary}\n      aria-label={t('utilities_summary')}\n      role='list'\n    >\n      {items.map(item => {\n        return (\n          <Flex\n            container={{\n              direction: 'column',\n              alignItems: 'center',\n              gap: 0.5\n            }}\n            item={{ grow: 1 }}\n            key={item.iconName}\n          >\n            <Icon name={item.iconName} />\n            {item.count !== undefined && <Count aria-hidden>{item.count}</Count>}\n            <VisuallyHiddenText role='listitem'>{`${item.count ?? ''} ${\n              item.name\n            }`}</VisuallyHiddenText>\n          </Flex>\n        );\n      })}\n    </Card>\n  ) : null;\n};\n\nexport default UtilitiesSummary;\n"]}
+{"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAQjC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACpD,OAAO,GAAG,CAAA;;GAET,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAC,CAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBACC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BpC,CACF,CAAC;AAEF,MAAM,cAAc,GAA0C,CAAC,EAC7D,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,EACR,EAAE,EAAE;IACH,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAe,CAAC;IAC9E,OAAO,CACL,8BACE,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,qBAAqB,EAC1B,EAAE,EAAE,0BAA0B,aAE9B,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,GAAI,EACvB,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,mCAAc,KAAK,GAAS,EAC1D,KAAC,kBAAkB,IAAC,IAAI,EAAC,UAAU,YAAE,GAAG,KAAK,IAAI,EAAE,IAAI,IAAI,EAAE,GAAsB,IAC9E,EAEP,KAAC,OAAO,IAAC,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACnE,IAAI,GACG,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAA6C,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,EAAE,EAAE;IACpF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACxD,EAAE,EAAE,sBAAsB,gBACd,CAAC,CAAC,mBAAmB,CAAC,EAClC,IAAI,EAAC,MAAM,YAEV,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,cAAc,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CACjD,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  Count,\n  Flex,\n  Icon,\n  Tooltip,\n  useI18n,\n  VisuallyHiddenText,\n  useElement\n} from '@pega/cosmos-react-core';\n\nimport type { CaseViewProps, UtilitySummaryItem } from './CaseView.types';\n\nexport interface UtilitiesSummaryProps {\n  items?: CaseViewProps['utilitiesSummaryItems'];\n}\n\nexport const StyledUtilitiesSummary = styled.div(() => {\n  return css`\n    width: 2.75rem;\n  `;\n});\n\nconst StyledUtilitySummaryButton = styled(Button)(\n  ({ theme }) => css`\n    padding-block: ${theme.base.spacing};\n    padding-inline: 0;\n    width: 100%;\n    color: currentColor;\n    border-radius: unset;\n    border: none;\n\n    &:hover {\n      color: currentColor;\n    }\n\n    &:focus {\n      z-index: 1;\n    }\n\n    &:first-child {\n      border-start-start-radius: inherit;\n      border-start-end-radius: inherit;\n    }\n\n    &:last-child {\n      border-end-start-radius: inherit;\n      border-end-end-radius: inherit;\n    }\n\n    & + & {\n      margin: 0;\n    }\n  `\n);\n\nconst UtilitySummary: FunctionComponent<UtilitySummaryItem> = ({\n  name,\n  iconName,\n  count,\n  onClick\n}) => {\n  const [utilSummaryTooltip, setUtilSummaryTooltip] = useElement<HTMLElement>();\n  return (\n    <>\n      <Flex\n        container={{\n          direction: 'column',\n          alignItems: 'center',\n          gap: 0.5\n        }}\n        onClick={onClick}\n        ref={setUtilSummaryTooltip}\n        as={StyledUtilitySummaryButton}\n      >\n        <Icon name={iconName} />\n        {count !== undefined && <Count aria-hidden>{count}</Count>}\n        <VisuallyHiddenText role='listitem'>{`${count ?? ''} ${name}`}</VisuallyHiddenText>\n      </Flex>\n\n      <Tooltip target={utilSummaryTooltip} showDelay='none' hideDelay='none'>\n        {name}\n      </Tooltip>\n    </>\n  );\n};\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps> = ({ items = [] }) => {\n  const t = useI18n();\n\n  return (\n    <Card\n      container={{ direction: 'column', alignItems: 'center' }}\n      as={StyledUtilitiesSummary}\n      aria-label={t('utilities_summary')}\n      role='list'\n    >\n      {items.map(item => (\n        <UtilitySummary {...item} key={item.iconName} />\n      ))}\n    </Card>\n  );\n};\n\nexport default UtilitiesSummary;\n"]}

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

@@ -0,0 +1,9 @@
+import type { WithAttributes } from '@pega/cosmos-react-core';
+import type { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';
+type UtilitySummaryItemDialogProps = WithAttributes<'div', {
+    target: BaseDialogProps['target'];
+    onDismiss?: () => void;
+}>;
+declare const UtilitySummaryItemDialog: import("react").ForwardRefExoticComponent<Omit<UtilitySummaryItemDialogProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default UtilitySummaryItemDialog;
+//# sourceMappingURL=UtilitySummaryItemDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UtilitySummaryItemDialog.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAC;AAQlG,KAAK,6BAA6B,GAAG,cAAc,CACjD,KAAK,EACL;IACE,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CACF,CAAC;AAEF,QAAA,MAAM,wBAAwB,uIAwC5B,CAAC;AAEH,eAAe,wBAAwB,CAAC"}

package/lib/components/CaseView/UtilitySummaryItemDialog.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from 'react';
+import styled from 'styled-components';
+import { defaultThemeProp, getFocusables, useConsolidatedRef, useDirection, useFocusTrap, useEscape, useOuterEvent } from '@pega/cosmos-react-core';
+import Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';
+const StyledUtilitySummaryItemDialog = styled(Dialog) `
+  width: 25rem;
+`;
+StyledUtilitySummaryItemDialog.defaultProps = defaultThemeProp;
+const UtilitySummaryItemDialog = forwardRef(function UtilitySummaryItemDialog({ children, target, onDismiss }, ref) {
+    const dialogRef = useConsolidatedRef(ref);
+    useOuterEvent('mousedown', [dialogRef], e => {
+        // FIXME: This targets the modal backdrop. We need a better solution.
+        if (e.target.closest('[opacity="1"]')) {
+            return;
+        }
+        onDismiss?.();
+        target.focus();
+    });
+    useEscape(() => {
+        onDismiss?.();
+        target.focus();
+    }, dialogRef);
+    useFocusTrap(dialogRef, false);
+    useEffect(() => {
+        const focusables = getFocusables(dialogRef);
+        focusables[0]?.focus();
+    }, []);
+    const { start } = useDirection();
+    return (_jsx(StyledUtilitySummaryItemDialog, { ref: dialogRef, target: target, arrow: true, placement: `${start}-start`, children: children }));
+});
+export default UtilitySummaryItemDialog;
+//# sourceMappingURL=UtilitySummaryItemDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UtilitySummaryItemDialog.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAG1E,MAAM,8BAA8B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEpD,CAAC;AAEF,8BAA8B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU/D,MAAM,wBAAwB,GAAG,UAAU,CAGzC,SAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,GAAG;IACtE,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAC1C,qEAAqE;QACrE,IAAK,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE;YAClD,OAAO;SACR;QAED,SAAS,EAAE,EAAE,CAAC;QACd,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,EAAE,EAAE,CAAC;QACd,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC,EAAE,SAAS,CAAC,CAAC;IAEd,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;QAC5C,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,KAAC,8BAA8B,IAC7B,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,QACL,SAAS,EAAE,GAAG,KAAK,QAAQ,YAE1B,QAAQ,GACsB,CAClC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,wBAAwB,CAAC","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  getFocusables,\n  useConsolidatedRef,\n  useDirection,\n  useFocusTrap,\n  useEscape,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\nimport type { RefElement, WithAttributes } from '@pega/cosmos-react-core';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport type { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nconst StyledUtilitySummaryItemDialog = styled(Dialog)`\n  width: 25rem;\n`;\n\nStyledUtilitySummaryItemDialog.defaultProps = defaultThemeProp;\n\ntype UtilitySummaryItemDialogProps = WithAttributes<\n  'div',\n  {\n    target: BaseDialogProps['target'];\n    onDismiss?: () => void;\n  }\n>;\n\nconst UtilitySummaryItemDialog = forwardRef<\n  RefElement<UtilitySummaryItemDialogProps>,\n  PropsWithoutRef<UtilitySummaryItemDialogProps>\n>(function UtilitySummaryItemDialog({ children, target, onDismiss }, ref) {\n  const dialogRef = useConsolidatedRef(ref);\n\n  useOuterEvent('mousedown', [dialogRef], e => {\n    // FIXME: This targets the modal backdrop. We need a better solution.\n    if ((e.target as Element).closest('[opacity=\"1\"]')) {\n      return;\n    }\n\n    onDismiss?.();\n    target.focus();\n  });\n\n  useEscape(() => {\n    onDismiss?.();\n    target.focus();\n  }, dialogRef);\n\n  useFocusTrap(dialogRef, false);\n\n  useEffect(() => {\n    const focusables = getFocusables(dialogRef);\n    focusables[0]?.focus();\n  }, []);\n\n  const { start } = useDirection();\n\n  return (\n    <StyledUtilitySummaryItemDialog\n      ref={dialogRef}\n      target={target}\n      arrow\n      placement={`${start}-start`}\n    >\n      {children}\n    </StyledUtilitySummaryItemDialog>\n  );\n});\n\nexport default UtilitySummaryItemDialog;\n"]}

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

@@ -1,4 +1,5 @@
 export { default } from './CaseView';
 export type { CaseViewProps } from './CaseView.types';
 export { StyledCaseView, StyledWorkArea as StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummary as StyledSummaryRegion } from './CaseView.styles';
+export { default as UtilitySummaryItemDialog } from './UtilitySummaryItemDialog';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/lib/components/CaseView/index.js

@@ -1,3 +1,4 @@
 export { default } from './CaseView';
 export { StyledCaseView, StyledWorkArea as StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummary as StyledSummaryRegion } from './CaseView.styles';
+export { default as UtilitySummaryItemDialog } from './UtilitySummaryItemDialog';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC","sourcesContent":["export { default } from './CaseView';\nexport type { CaseViewProps } from './CaseView.types';\nexport {\n  StyledCaseView,\n  StyledWorkArea as StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledCaseDrawerContent,\n  StyledSummary as StyledSummaryRegion\n} from './CaseView.styles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["export { default } from './CaseView';\nexport type { CaseViewProps } from './CaseView.types';\nexport {\n  StyledCaseView,\n  StyledWorkArea as StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledCaseDrawerContent,\n  StyledSummary as StyledSummaryRegion\n} from './CaseView.styles';\nexport { default as UtilitySummaryItemDialog } from './UtilitySummaryItemDialog';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableLayout.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AA+B1E,QAAA,MAAM,kBAAkB,iHA+EtB,CAAC;AAEH,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ConfigurableLayout.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AA+B1E,QAAA,MAAM,kBAAkB,iHA+EtB,CAAC;AAEH,eAAe,kBAAkB,CAAC"}

package/lib/components/ConfigurableLayout/ConfigurableLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableLayout.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, useRef, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport type { ConfigurableLayoutProps } from './ConfigurableLayout.types';\nimport { containerMinWidth, cellGap } from './defaults';\nimport widthConfigOptions from './options';\nimport LayoutCell from './LayoutCell';\n\nconst StyledConfigurableLayout = styled.div(() => {\n  return css`\n    overflow: hidden;\n  `;\n});\n\nconst StyledCellGrid = styled.div(({ theme }) => {\n  return css`\n    /* Note: inset position used to negate \"column\" inline margin on items */\n    position: relative;\n    width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    max-width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    inset-inline: calc(-${cellGap} * ${theme.base.spacing});\n    margin-block-end: calc(-2 * ${cellGap} * ${theme.base.spacing});\n  `;\n});\nStyledCellGrid.defaultProps = defaultThemeProp;\n\nconst StyledContainerRuler = styled.div(({ theme }) => {\n  return css`\n    margin-inline: calc(${cellGap} * ${theme.base.spacing});\n    width: calc(100% - ${cellGap * 2} * ${theme.base.spacing});\n  `;\n});\nStyledContainerRuler.defaultProps = defaultThemeProp;\n\nconst ConfigurableLayout = forwardRef(function ConfigurableLayout(\n  { items, arrangement }: PropsWithoutRef<ConfigurableLayoutProps>,\n  ref: Ref<HTMLElement>\n) {\n  const containerRulerRef = useRef<HTMLDivElement>(null);\n\n  const renderMode = useMemo(() => {\n    const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;\n\n    if (activeArrangement) {\n      switch (arrangement.size) {\n        case 'main':\n          return 'direct';\n        case 'half':\n          return 'double';\n        case 'narrow':\n          return 'full';\n        default:\n          return 'direct';\n      }\n    }\n\n    // Use direct by default\n    return 'direct';\n  }, [arrangement]);\n\n  const content = useMemo(() => {\n    if (items && !!items.length) {\n      return items.map(itemConfig => {\n        const config = {\n          ...itemConfig,\n          layoutConfig: { ...itemConfig.layoutConfig }\n        };\n\n        if (renderMode !== 'direct') {\n          switch (renderMode) {\n            case 'double': {\n              const doubleWidth: { [key: string]: keyof typeof widthConfigOptions } = {\n                '1/4': '1/2',\n                '1/3': '2/3',\n                '1/2': 'full',\n                '2/3': 'full',\n                '3/4': 'full',\n                full: 'full'\n              };\n\n              config.layoutConfig.width = doubleWidth[config.layoutConfig.width];\n\n              break;\n            }\n            case 'full':\n              config.layoutConfig.width = 'full';\n              break;\n            default:\n              config.layoutConfig.width = 'full';\n              break;\n          }\n        }\n\n        return <LayoutCell key={`${itemConfig.id}`} config={config} />;\n      });\n    }\n\n    return null;\n  }, [items, renderMode]);\n\n  return (\n    <StyledConfigurableLayout>\n      <Flex\n        as={StyledCellGrid}\n        container={{ wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }}\n        item={{ basis: containerMinWidth, grow: 1 }}\n        ref={ref}\n      >\n        <StyledContainerRuler ref={containerRulerRef} />\n        {content}\n      </Flex>\n    </StyledConfigurableLayout>\n  );\n});\n\nexport default ConfigurableLayout;\n"]}
+{"version":3,"file":"ConfigurableLayout.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useMemo } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport type { ConfigurableLayoutProps } from './ConfigurableLayout.types';\nimport { containerMinWidth, cellGap } from './defaults';\nimport type widthConfigOptions from './options';\nimport LayoutCell from './LayoutCell';\n\nconst StyledConfigurableLayout = styled.div(() => {\n  return css`\n    overflow: hidden;\n  `;\n});\n\nconst StyledCellGrid = styled.div(({ theme }) => {\n  return css`\n    /* Note: inset position used to negate \"column\" inline margin on items */\n    position: relative;\n    width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    max-width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    inset-inline: calc(-${cellGap} * ${theme.base.spacing});\n    margin-block-end: calc(-2 * ${cellGap} * ${theme.base.spacing});\n  `;\n});\nStyledCellGrid.defaultProps = defaultThemeProp;\n\nconst StyledContainerRuler = styled.div(({ theme }) => {\n  return css`\n    margin-inline: calc(${cellGap} * ${theme.base.spacing});\n    width: calc(100% - ${cellGap * 2} * ${theme.base.spacing});\n  `;\n});\nStyledContainerRuler.defaultProps = defaultThemeProp;\n\nconst ConfigurableLayout = forwardRef(function ConfigurableLayout(\n  { items, arrangement }: PropsWithoutRef<ConfigurableLayoutProps>,\n  ref: Ref<HTMLElement>\n) {\n  const containerRulerRef = useRef<HTMLDivElement>(null);\n\n  const renderMode = useMemo(() => {\n    const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;\n\n    if (activeArrangement) {\n      switch (arrangement.size) {\n        case 'main':\n          return 'direct';\n        case 'half':\n          return 'double';\n        case 'narrow':\n          return 'full';\n        default:\n          return 'direct';\n      }\n    }\n\n    // Use direct by default\n    return 'direct';\n  }, [arrangement]);\n\n  const content = useMemo(() => {\n    if (items && !!items.length) {\n      return items.map(itemConfig => {\n        const config = {\n          ...itemConfig,\n          layoutConfig: { ...itemConfig.layoutConfig }\n        };\n\n        if (renderMode !== 'direct') {\n          switch (renderMode) {\n            case 'double': {\n              const doubleWidth: { [key: string]: keyof typeof widthConfigOptions } = {\n                '1/4': '1/2',\n                '1/3': '2/3',\n                '1/2': 'full',\n                '2/3': 'full',\n                '3/4': 'full',\n                full: 'full'\n              };\n\n              config.layoutConfig.width = doubleWidth[config.layoutConfig.width];\n\n              break;\n            }\n            case 'full':\n              config.layoutConfig.width = 'full';\n              break;\n            default:\n              config.layoutConfig.width = 'full';\n              break;\n          }\n        }\n\n        return <LayoutCell key={`${itemConfig.id}`} config={config} />;\n      });\n    }\n\n    return null;\n  }, [items, renderMode]);\n\n  return (\n    <StyledConfigurableLayout>\n      <Flex\n        as={StyledCellGrid}\n        container={{ wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }}\n        item={{ basis: containerMinWidth, grow: 1 }}\n        ref={ref}\n      >\n        <StyledContainerRuler ref={containerRulerRef} />\n        {content}\n      </Flex>\n    </StyledConfigurableLayout>\n  );\n});\n\nexport default ConfigurableLayout;\n"]}

package/lib/components/ConfigurableLayout/LayoutCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutCell.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAoDzD,QAAA,MAAM,UAAU;YAA0B,MAAM;wBAoC/C,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"LayoutCell.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAoDzD,QAAA,MAAM,UAAU;YAA0B,MAAM;wBAoC/C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/ConfigurableLayout/LayoutCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutCell.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,kBAAkB,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAC3B,CAAC,EACC,aAAa,GAAG,IAAI,EACpB,eAAe,EACf,QAAQ,EACR,KAAK,EAMN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;0BAEY,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;gCAEzB,eAAe;;;;;;wCAMP,QAAQ,IAAI,YAAY;;;;;QAKxD,CAAC,aAAa;QAChB,GAAG,CAAA;;OAEF;;QAEC,qBAAqB;;;;;;;;;KASxB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAElD,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE;IACpD,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,kBAAkB,CAAC,YAAY,CAAC,KAAwC,CAAC,IAAI,MAAM,CAAC;IAC7F,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC;QAEpC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,GAAG,KAAK,IAAI,CAAC;SACrB;QAED,IACE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YACpB,KAAK,CAAC,MAAM,IAAI,CAAC;YACjB,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ;YAC5B,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAClC;YACA,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5B,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,IAAI,IACH,EAAE,EAAE,UAAU,EACd,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,EACtD,aAAa,EAAE,YAAY,CAAC,aAAa,EACzC,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,YAEjB,MAAM,CAAC,OAAO,GACV,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { StyledAppAnnouncement } from '../AppAnnouncement/AppAnnouncement';\n\nimport type { Config } from './ConfigurableLayout.types';\nimport widthConfigOptions from './options';\nimport { itemMinWidth, cellGap } from './defaults';\n\nconst StyledCell = styled.div(\n  ({\n    fillAvailable = true,\n    percentageWidth,\n    minWidth,\n    theme\n  }: {\n    fillAvailable: boolean;\n    percentageWidth?: string;\n    minWidth?: string | undefined;\n    theme: DefaultTheme;\n  }) => {\n    return css`\n      /* variables */\n      --marginGap: calc(${cellGap} * ${theme.base.spacing});\n      --totalMargin: calc(2 * var(--marginGap));\n      --percentageBasis: calc(${percentageWidth} - var(--totalMargin));\n      --maxWidth: calc(100% - var(--totalMargin));\n\n      /* styles */\n      flex-wrap: wrap;\n      flex-basis: var(--percentageBasis);\n      min-width: min(var(--maxWidth), ${minWidth || itemMinWidth});\n      max-width: var(--maxWidth);\n      margin-block-end: var(--totalMargin);\n      margin-inline: var(--marginGap);\n\n      ${!fillAvailable &&\n      css`\n        flex-grow: 0;\n      `}\n\n      ${StyledAppAnnouncement} {\n        align-self: stretch;\n      }\n\n      > * {\n        width: 100%;\n        height: auto;\n        overflow-x: auto;\n      }\n    `;\n  }\n);\nStyledCell.defaultProps = defaultThemeProp;\n\nconst validWidthUnits = ['px', 'ch', 'rem', 'em'];\n\nconst LayoutCell = ({ config }: { config: Config }) => {\n  const layoutConfig = useMemo(() => config.layoutConfig, [config]);\n  const percentageWidth = useMemo(() => {\n    return widthConfigOptions[layoutConfig.width as keyof typeof widthConfigOptions] || '100%';\n  }, [layoutConfig.width]);\n  const minWidth = useMemo(() => {\n    const value = layoutConfig.minWidth;\n\n    if (typeof value === 'number') {\n      return `${value}px`;\n    }\n\n    if (\n      Array.isArray(value) &&\n      value.length >= 2 &&\n      typeof value[0] === 'number' &&\n      validWidthUnits.includes(value[1])\n    ) {\n      return `${value[0]}${value[1]}`;\n    }\n  }, [layoutConfig.minWidth]);\n\n  return config?.content ? (\n    <Flex\n      as={StyledCell}\n      item={{\n        grow: 1\n      }}\n      container={{ justify: 'stretch', alignItems: 'start' }}\n      fillAvailable={layoutConfig.fillAvailable}\n      percentageWidth={percentageWidth}\n      minWidth={minWidth}\n    >\n      {config.content}\n    </Flex>\n  ) : null;\n};\n\nexport default LayoutCell;\n"]}
+{"version":3,"file":"LayoutCell.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,kBAAkB,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAC3B,CAAC,EACC,aAAa,GAAG,IAAI,EACpB,eAAe,EACf,QAAQ,EACR,KAAK,EAMN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;0BAEY,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;gCAEzB,eAAe;;;;;;wCAMP,QAAQ,IAAI,YAAY;;;;;QAKxD,CAAC,aAAa;QAChB,GAAG,CAAA;;OAEF;;QAEC,qBAAqB;;;;;;;;;KASxB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAElD,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE;IACpD,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,kBAAkB,CAAC,YAAY,CAAC,KAAwC,CAAC,IAAI,MAAM,CAAC;IAC7F,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC;QAEpC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,GAAG,KAAK,IAAI,CAAC;SACrB;QAED,IACE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YACpB,KAAK,CAAC,MAAM,IAAI,CAAC;YACjB,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ;YAC5B,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAClC;YACA,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5B,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,IAAI,IACH,EAAE,EAAE,UAAU,EACd,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,EACtD,aAAa,EAAE,YAAY,CAAC,aAAa,EACzC,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,YAEjB,MAAM,CAAC,OAAO,GACV,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { StyledAppAnnouncement } from '../AppAnnouncement/AppAnnouncement';\n\nimport type { Config } from './ConfigurableLayout.types';\nimport widthConfigOptions from './options';\nimport { itemMinWidth, cellGap } from './defaults';\n\nconst StyledCell = styled.div(\n  ({\n    fillAvailable = true,\n    percentageWidth,\n    minWidth,\n    theme\n  }: {\n    fillAvailable: boolean;\n    percentageWidth?: string;\n    minWidth?: string | undefined;\n    theme: DefaultTheme;\n  }) => {\n    return css`\n      /* variables */\n      --marginGap: calc(${cellGap} * ${theme.base.spacing});\n      --totalMargin: calc(2 * var(--marginGap));\n      --percentageBasis: calc(${percentageWidth} - var(--totalMargin));\n      --maxWidth: calc(100% - var(--totalMargin));\n\n      /* styles */\n      flex-wrap: wrap;\n      flex-basis: var(--percentageBasis);\n      min-width: min(var(--maxWidth), ${minWidth || itemMinWidth});\n      max-width: var(--maxWidth);\n      margin-block-end: var(--totalMargin);\n      margin-inline: var(--marginGap);\n\n      ${!fillAvailable &&\n      css`\n        flex-grow: 0;\n      `}\n\n      ${StyledAppAnnouncement} {\n        align-self: stretch;\n      }\n\n      > * {\n        width: 100%;\n        height: auto;\n        overflow-x: auto;\n      }\n    `;\n  }\n);\nStyledCell.defaultProps = defaultThemeProp;\n\nconst validWidthUnits = ['px', 'ch', 'rem', 'em'];\n\nconst LayoutCell = ({ config }: { config: Config }) => {\n  const layoutConfig = useMemo(() => config.layoutConfig, [config]);\n  const percentageWidth = useMemo(() => {\n    return widthConfigOptions[layoutConfig.width as keyof typeof widthConfigOptions] || '100%';\n  }, [layoutConfig.width]);\n  const minWidth = useMemo(() => {\n    const value = layoutConfig.minWidth;\n\n    if (typeof value === 'number') {\n      return `${value}px`;\n    }\n\n    if (\n      Array.isArray(value) &&\n      value.length >= 2 &&\n      typeof value[0] === 'number' &&\n      validWidthUnits.includes(value[1])\n    ) {\n      return `${value[0]}${value[1]}`;\n    }\n  }, [layoutConfig.minWidth]);\n\n  return config?.content ? (\n    <Flex\n      as={StyledCell}\n      item={{\n        grow: 1\n      }}\n      container={{ justify: 'stretch', alignItems: 'start' }}\n      fillAvailable={layoutConfig.fillAvailable}\n      percentageWidth={percentageWidth}\n      minWidth={minWidth}\n    >\n      {config.content}\n    </Flex>\n  ) : null;\n};\n\nexport default LayoutCell;\n"]}

package/lib/components/ConfigurableLayout/useTrackWrappedRegions.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'react';
+import type { Ref } from 'react';
 declare const useTrackWrappedRegions: (regionElArray: (HTMLElement | null)[], disabled?: boolean) => {
     containerRef: Ref<HTMLElement | null>;
     regionWrappedStates: boolean[];

package/lib/components/ConfigurableLayout/useTrackWrappedRegions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTrackWrappedRegions.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAIzD,QAAA,MAAM,sBAAsB,kBACX,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,aAC1B,OAAO;kBACD,IAAI,WAAW,GAAG,IAAI,CAAC;yBAAuB,OAAO,EAAE;CA2CzE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"useTrackWrappedRegions.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,QAAA,MAAM,sBAAsB,kBACX,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,aAC1B,OAAO;kBACD,IAAI,WAAW,GAAG,IAAI,CAAC;yBAAuB,OAAO,EAAE;CA2CzE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/ConfigurableLayout/useTrackWrappedRegions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTrackWrappedRegions.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAO,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,MAAM,sBAAsB,GAAG,CAC7B,aAAqC,EACrC,QAAkB,EACyD,EAAE;IAC7E,MAAM,YAAY,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,IAAI,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAC5C,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,OAAO;QAErB,IAAI,SAAS,GAAG,IAAI,CAAC;QAErB,MAAM,QAAQ,GAAG,IAAI,cAAc,CACjC,QAAQ,CAAC,OAAO,CAAC,EAAE;YACjB,IAAI,SAAS,EAAE;gBACb,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;gBACpD,MAAM,gBAAgB,GAAG,CAAC,GAAG,mBAAmB,CAAC,CAAC;gBAElD,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;oBACxC,MAAM,WAAW,GAAG,QAAQ,EAAE,qBAAqB,EAAE,CAAC,KAAK,CAAC;oBAE5D,IAAI,WAAW,KAAK,SAAS,IAAI,WAAW,IAAI,cAAc,EAAE;wBAC9D,gBAAgB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;qBAChC;yBAAM;wBACL,gBAAgB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;qBACjC;gBACH,CAAC,CAAC,CAAC;gBAEH,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;aAC1C;QACH,CAAC,EAAE,GAAG,CAAC,CACR,CAAC;QAEF,IAAI,YAAY,CAAC,OAAO,IAAI,aAAa,CAAC,MAAM,EAAE;YAChD,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SACxC;QAED,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,KAAK,CAAC;YAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAElC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAC/C,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { useRef, useEffect, useState, Ref } from 'react';\n\nimport { debounce } from '@pega/cosmos-react-core';\n\nconst useTrackWrappedRegions = (\n  regionElArray: (HTMLElement | null)[],\n  disabled?: boolean\n): { containerRef: Ref<HTMLElement | null>; regionWrappedStates: boolean[] } => {\n  const containerRef = useRef<HTMLElement | null>(null);\n  const [regionWrappedStates, setRegionWrappedStates] = useState(\n    new Array(regionElArray.length).fill(false)\n  );\n\n  useEffect(() => {\n    if (disabled) return;\n\n    let isMounted = true;\n\n    const observer = new ResizeObserver(\n      debounce(entries => {\n        if (isMounted) {\n          const containerWidth = entries[0].contentRect.width;\n          const newWrappedStates = [...regionWrappedStates];\n\n          regionElArray.forEach((regionEl, index) => {\n            const regionWidth = regionEl?.getBoundingClientRect().width;\n\n            if (regionWidth !== undefined && regionWidth >= containerWidth) {\n              newWrappedStates[index] = true;\n            } else {\n              newWrappedStates[index] = false;\n            }\n          });\n\n          setRegionWrappedStates(newWrappedStates);\n        }\n      }, 100)\n    );\n\n    if (containerRef.current && regionElArray.length) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      isMounted = false;\n      observer.disconnect();\n    };\n  }, [containerRef, regionElArray]);\n\n  return { containerRef, regionWrappedStates };\n};\n\nexport default useTrackWrappedRegions;\n"]}
+{"version":3,"file":"useTrackWrappedRegions.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,MAAM,sBAAsB,GAAG,CAC7B,aAAqC,EACrC,QAAkB,EACyD,EAAE;IAC7E,MAAM,YAAY,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,IAAI,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAC5C,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,OAAO;QAErB,IAAI,SAAS,GAAG,IAAI,CAAC;QAErB,MAAM,QAAQ,GAAG,IAAI,cAAc,CACjC,QAAQ,CAAC,OAAO,CAAC,EAAE;YACjB,IAAI,SAAS,EAAE;gBACb,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;gBACpD,MAAM,gBAAgB,GAAG,CAAC,GAAG,mBAAmB,CAAC,CAAC;gBAElD,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;oBACxC,MAAM,WAAW,GAAG,QAAQ,EAAE,qBAAqB,EAAE,CAAC,KAAK,CAAC;oBAE5D,IAAI,WAAW,KAAK,SAAS,IAAI,WAAW,IAAI,cAAc,EAAE;wBAC9D,gBAAgB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;qBAChC;yBAAM;wBACL,gBAAgB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;qBACjC;gBACH,CAAC,CAAC,CAAC;gBAEH,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;aAC1C;QACH,CAAC,EAAE,GAAG,CAAC,CACR,CAAC;QAEF,IAAI,YAAY,CAAC,OAAO,IAAI,aAAa,CAAC,MAAM,EAAE;YAChD,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SACxC;QAED,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,KAAK,CAAC;YAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAElC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAC/C,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { useRef, useEffect, useState } from 'react';\nimport type { Ref } from 'react';\n\nimport { debounce } from '@pega/cosmos-react-core';\n\nconst useTrackWrappedRegions = (\n  regionElArray: (HTMLElement | null)[],\n  disabled?: boolean\n): { containerRef: Ref<HTMLElement | null>; regionWrappedStates: boolean[] } => {\n  const containerRef = useRef<HTMLElement | null>(null);\n  const [regionWrappedStates, setRegionWrappedStates] = useState(\n    new Array(regionElArray.length).fill(false)\n  );\n\n  useEffect(() => {\n    if (disabled) return;\n\n    let isMounted = true;\n\n    const observer = new ResizeObserver(\n      debounce(entries => {\n        if (isMounted) {\n          const containerWidth = entries[0].contentRect.width;\n          const newWrappedStates = [...regionWrappedStates];\n\n          regionElArray.forEach((regionEl, index) => {\n            const regionWidth = regionEl?.getBoundingClientRect().width;\n\n            if (regionWidth !== undefined && regionWidth >= containerWidth) {\n              newWrappedStates[index] = true;\n            } else {\n              newWrappedStates[index] = false;\n            }\n          });\n\n          setRegionWrappedStates(newWrappedStates);\n        }\n      }, 100)\n    );\n\n    if (containerRef.current && regionElArray.length) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      isMounted = false;\n      observer.disconnect();\n    };\n  }, [containerRef, regionElArray]);\n\n  return { containerRef, regionWrappedStates };\n};\n\nexport default useTrackWrappedRegions;\n"]}

package/lib/components/Confirmation/Confirmation.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent, ReactNode, Ref } from 'react';
-import { ForwardProps, UnorderedListProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { FunctionComponent, ReactNode, Ref } from 'react';
+import type { ForwardProps, UnorderedListProps, NoChildrenProp } from '@pega/cosmos-react-core';
 export interface ConfirmationProps extends NoChildrenProp {
     /** The title of the confirmation */
     title?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,SAAS,EACT,GAAG,EAGJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,YAAY,EAOZ,kBAAkB,EAClB,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAUjC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACxC,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAUD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAiDrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAchF,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAUhG,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACxC,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAUD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAiDrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Confirmation/Confirmation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAKV,UAAU,EACV,OAAO,EACR,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAGhB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,aAAa,EAAE,0BAA0B,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvF,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAChD,OAAO,GAAG,CAAA;QACJ,aAAa,MAAM,0BAA0B;;;GAGlD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAwD,UAAU,CAClF,SAAS,YAAY,CACnB,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,cAAc,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAElD,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO;YACL,GAAG,cAAc;YACjB,KAAK,EAAE,CAAC;SACT,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YAC3B,KAAC,WAAW,cACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC7C,KAAK,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EAE1C,OAAO,IAAI,CACV,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,YAC7C,KAAC,yBAAyB,cAAE,OAAO,GAA6B,GACxC,CAC3B,EAEA,SAAS,IAAI,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,GAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,GAAI,IAC7D,CACR,EAEA,KAAK,EAEL,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,MAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,aACxC,CAAC,CAAC,MAAM,CAAC,EACT,KAAK,CAAC,CAAC,CAAC,KAAC,kBAAkB,cAAE,KAAK,KAAK,EAAE,GAAsB,CAAC,CAAC,CAAC,IAAI,IAChE,GACJ,CACR,IACI,GACK,GACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  useContext,\n  useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardContent,\n  ForwardProps,\n  Flex,\n  Text,\n  useI18n,\n  UnorderedList,\n  Button,\n  defaultThemeProp,\n  UnorderedListProps,\n  NoChildrenProp,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport { StyledDetails, StyledFieldValueGroupLabel, DetailsContext } from '../Details';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n  padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps extends NoChildrenProp {\n  /** The title of the confirmation */\n  title?: string;\n  /** Region for a Field Value List component */\n  details?: ReactNode;\n  /** Array of React nodes to be put into a list */\n  whatsNext?: UnorderedListProps['items'];\n  /** Region for a Tasks component */\n  tasks?: ReactNode;\n  /** Called when the done/close button is clicked */\n  onClose?: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst StyledConfirmationDetails = styled.div(() => {\n  return css`\n    > ${StyledDetails} > ${StyledFieldValueGroupLabel}:first-child {\n      margin-block-start: 0;\n    }\n  `;\n});\n\nconst Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  function Confirmation(\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) {\n    const t = useI18n();\n    const detailsContext = useContext(DetailsContext);\n\n    const detailsCtxValue = useMemo(() => {\n      return {\n        ...detailsContext,\n        depth: 4\n      };\n    }, [detailsContext]);\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardContent>\n          <Flex container={{ gap: 3, direction: 'column' }}>\n            {title && <Text variant='h3'>{title}</Text>}\n\n            {details && (\n              <DetailsContext.Provider value={detailsCtxValue}>\n                <StyledConfirmationDetails>{details}</StyledConfirmationDetails>\n              </DetailsContext.Provider>\n            )}\n\n            {whatsNext && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h4'>{t('confirmation_whats_next')}</Text>\n                <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n              </Flex>\n            )}\n\n            {tasks}\n\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('done')}\n                  {title ? <VisuallyHiddenText>{`- ${title}`}</VisuallyHiddenText> : null}\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default Confirmation;\n"]}
+{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,aAAa,EAAE,0BAA0B,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvF,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAChD,OAAO,GAAG,CAAA;QACJ,aAAa,MAAM,0BAA0B;;;GAGlD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAwD,UAAU,CAClF,SAAS,YAAY,CACnB,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,cAAc,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAElD,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO;YACL,GAAG,cAAc;YACjB,KAAK,EAAE,CAAC;SACT,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YAC3B,KAAC,WAAW,cACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC7C,KAAK,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EAE1C,OAAO,IAAI,CACV,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,YAC7C,KAAC,yBAAyB,cAAE,OAAO,GAA6B,GACxC,CAC3B,EAEA,SAAS,IAAI,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,GAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,GAAI,IAC7D,CACR,EAEA,KAAK,EAEL,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,MAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,aACxC,CAAC,CAAC,MAAM,CAAC,EACT,KAAK,CAAC,CAAC,CAAC,KAAC,kBAAkB,cAAE,KAAK,KAAK,EAAE,GAAsB,CAAC,CAAC,CAAC,IAAI,IAChE,GACJ,CACR,IACI,GACK,GACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, useContext, useMemo } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Card,\n  CardContent,\n  Flex,\n  Text,\n  useI18n,\n  UnorderedList,\n  Button,\n  defaultThemeProp,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, UnorderedListProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport { StyledDetails, StyledFieldValueGroupLabel, DetailsContext } from '../Details';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n  padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps extends NoChildrenProp {\n  /** The title of the confirmation */\n  title?: string;\n  /** Region for a Field Value List component */\n  details?: ReactNode;\n  /** Array of React nodes to be put into a list */\n  whatsNext?: UnorderedListProps['items'];\n  /** Region for a Tasks component */\n  tasks?: ReactNode;\n  /** Called when the done/close button is clicked */\n  onClose?: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst StyledConfirmationDetails = styled.div(() => {\n  return css`\n    > ${StyledDetails} > ${StyledFieldValueGroupLabel}:first-child {\n      margin-block-start: 0;\n    }\n  `;\n});\n\nconst Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  function Confirmation(\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) {\n    const t = useI18n();\n    const detailsContext = useContext(DetailsContext);\n\n    const detailsCtxValue = useMemo(() => {\n      return {\n        ...detailsContext,\n        depth: 4\n      };\n    }, [detailsContext]);\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardContent>\n          <Flex container={{ gap: 3, direction: 'column' }}>\n            {title && <Text variant='h3'>{title}</Text>}\n\n            {details && (\n              <DetailsContext.Provider value={detailsCtxValue}>\n                <StyledConfirmationDetails>{details}</StyledConfirmationDetails>\n              </DetailsContext.Provider>\n            )}\n\n            {whatsNext && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h4'>{t('confirmation_whats_next')}</Text>\n                <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n              </Flex>\n            )}\n\n            {tasks}\n\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('done')}\n                  {title ? <VisuallyHiddenText>{`- ${title}`}</VisuallyHiddenText> : null}\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default Confirmation;\n"]}

package/lib/components/Details/Details.d.ts

@@ -1,17 +1,10 @@
-import { FC, ReactNode, Ref } from 'react';
-import { ForwardProps, TestIdProp } from '@pega/cosmos-react-core';
-export interface DetailsProps extends TestIdProp {
+import type { FC, ReactNode, Ref } from 'react';
+import type { AdditionalInfoProps, ForwardProps, TestIdProp } from '@pega/cosmos-react-core';
+export type DetailsProps = TestIdProp & {
     highlightedData?: ReactNode[];
     children?: ReactNode;
-    /** Text used as heading of list */
-    name?: string;
     /** Copy placed in paragraph below the name */
     description?: string;
-    /**
-     * Whether the items children can be collapsed (only applies if name is provided)
-     * @default false
-     */
-    collapsible?: boolean;
     /**
      * Number of columns in detail layout
      * @default 1
@@ -30,7 +23,24 @@ export interface DetailsProps extends TestIdProp {
      */
     valueComparison?: boolean;
     ref?: Ref<HTMLDListElement>;
-}
+} & ({
+    /** Text used as heading of list */
+    name: string;
+    /** Pass a heading and content to show additional information on the list. */
+    additionalInfo?: {
+        heading?: AdditionalInfoProps['heading'];
+        content: AdditionalInfoProps['children'];
+    };
+    /**
+     * Whether the items children can be collapsed (only applies if name is provided)
+     * @default false
+     */
+    collapsible?: boolean;
+} | {
+    name?: undefined;
+    additionalInfo?: never;
+    collapsible?: never;
+});
 declare const _default: FC<DetailsProps & ForwardProps> & {
     getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "description", "highlighted-data", "data", "expand-collapse"]>;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EAEF,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EASZ,UAAU,EAGX,MAAM,yBAAyB,CAAC;AAajC,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;;;;AAoMD,wBAAuD"}
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAmBhD,OAAO,KAAK,EACV,mBAAmB,EACnB,YAAY,EAEZ,UAAU,EACX,MAAM,yBAAyB,CAAC;AAajC,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG;IACtC,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B,GAAG,CACE;IACE,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,6EAA6E;IAC7E,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CACJ,CAAC;;;;AAqNJ,wBAAuD"}

package/lib/components/Details/Details.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';
 import { remToPx } from 'polished';
-import { Text, useBreakpoint, useConsolidatedRef, useTheme, ExpandCollapse, Button, Flex, Icon, useChToPxConversionFactor, useI18n, HTML, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import { AdditionalInfo, Text, useBreakpoint, useConsolidatedRef, useTheme, ExpandCollapse, Button, Flex, Icon, useChToPxConversionFactor, useI18n, HTML, useTestIds, withTestIds } from '@pega/cosmos-react-core';
 import { getDetailsTestIds } from './Details.test-ids';
 import DetailsContext from './DetailsContext';
 import { StyledFieldValueGroupLabel, StyledDetails, StyledDetailList, StyledHighlightedDetailList, flexGapProp, StyledDetailDescription } from './Details.styles';
-const Details = forwardRef(function Details({ testId, highlightedData, children, name, description, columnCount = 1, nested = false, asFlex = false, valueComparison = false, collapsible = false }, ref) {
+const Details = forwardRef(function Details({ testId, highlightedData, children, name, description, columnCount = 1, nested = false, asFlex = false, valueComparison = false, collapsible = false, additionalInfo: additionalInfoProp }, ref) {
     const { longestLabelLength, mobileView: inMobileView, depth, ...context } = useContext(DetailsContext);
     const { base: { 'content-width': { sm: smContentWidth } } } = useTheme();
     const isSmallOrAbove = useBreakpoint('sm');
@@ -65,6 +65,9 @@ const Details = forwardRef(function Details({ testId, highlightedData, children,
     const nameText = useMemo(() => {
         return _jsx(Text, { variant: `h${Math.min(headingDepth, 6)}`, children: name });
     }, [name, headingDepth]);
+    const additionalInfo = useMemo(() => {
+        return name && additionalInfoProp ? (_jsx(AdditionalInfo, { heading: additionalInfoProp.heading, contextualLabel: name, children: additionalInfoProp.content })) : undefined;
+    }, [name, additionalInfoProp?.heading, additionalInfoProp?.content]);
     const details = useMemo(() => {
         return (_jsxs(_Fragment, { children: [highlightedData && (_jsxs(_Fragment, { children: [_jsx(Flex, { "data-testid": testIds.highlightedData, as: StyledHighlightedDetailList, forwardedAs: nested ? 'div' : 'dl', container: { wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }, children: highlightedData.map((child, i) => (
                             // eslint-disable-next-line react/no-array-index-key
@@ -84,9 +87,9 @@ const Details = forwardRef(function Details({ testId, highlightedData, children,
     ]);
     if (!name && !children && !highlightedData && !description)
         return null;
-    return (_jsx(DetailsContext.Provider, { value: contextValue, children: _jsxs(StyledDetails, { "data-testid": testIds.root, children: [name && (_jsx(StyledFieldValueGroupLabel, { "data-testid": testIds.heading, children: collapsible ? (_jsx(Button, { type: 'button', variant: 'text', onClick: () => {
-                            setOpen(cur => !cur);
-                        }, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]), children: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: 'span', children: [_jsx(Icon, { name: 'caret-right' }), nameText] }) })) : (nameText) })), description && (_jsx(StyledDetailDescription, { "data-testid": testIds.description, children: _jsx(HTML, { as: 'p', content: description }) })), collapsible ? (_jsx(ExpandCollapse, { "data-testid": testIds.expandCollapse, collapsed: !open, children: details })) : (details)] }) }));
+    return (_jsx(DetailsContext.Provider, { value: contextValue, children: _jsxs(StyledDetails, { "data-testid": testIds.root, children: [name && (_jsx(StyledFieldValueGroupLabel, { "data-testid": testIds.heading, children: _jsx(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: 'span', children: collapsible ? (_jsxs(_Fragment, { children: [_jsx(Button, { type: 'button', variant: 'text', onClick: () => {
+                                        setOpen(cur => !cur);
+                                    }, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]), children: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: 'span', children: [_jsx(Icon, { name: 'caret-right' }), nameText] }) }), additionalInfo] })) : (_jsxs(_Fragment, { children: [nameText, additionalInfo] })) }) })), description && (_jsx(StyledDetailDescription, { "data-testid": testIds.description, children: _jsx(HTML, { as: 'p', content: description }) })), collapsible ? (_jsx(ExpandCollapse, { "data-testid": testIds.expandCollapse, collapsed: !open, children: details })) : (details)] }) }));
 });
 export default withTestIds(Details, getDetailsTestIds);
 //# sourceMappingURL=Details.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FC,\n  Fragment,\n  ReactNode,\n  Ref,\n  useState,\n  useContext,\n  useEffect,\n  useMemo\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Text,\n  useBreakpoint,\n  useConsolidatedRef,\n  useTheme,\n  ForwardProps,\n  ExpandCollapse,\n  Button,\n  Flex,\n  Icon,\n  useChToPxConversionFactor,\n  useI18n,\n  HeadingTag,\n  HTML,\n  TestIdProp,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n  StyledFieldValueGroupLabel,\n  StyledDetails,\n  StyledDetailList,\n  StyledHighlightedDetailList,\n  flexGapProp,\n  StyledDetailDescription\n} from './Details.styles';\n\nexport interface DetailsProps extends TestIdProp {\n  highlightedData?: ReactNode[];\n  children?: ReactNode;\n  /** Text used as heading of list */\n  name?: string;\n  /** Copy placed in paragraph below the name */\n  description?: string;\n  /**\n   * Whether the items children can be collapsed (only applies if name is provided)\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * Number of columns in detail layout\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /** Whether detail list is rendering within another detail list\n   * @default false\n   */\n  nested?: boolean;\n  /** Whether detail list is rendering multiple sub-lists in columns (passed as children)\n   * @default false\n   */\n  asFlex?: boolean;\n  /** Whether to apply `value-comparison` styles to list items\n   * @default false\n   */\n  valueComparison?: boolean;\n  ref?: Ref<HTMLDListElement>;\n}\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(function Details(\n  {\n    testId,\n    highlightedData,\n    children,\n    name,\n    description,\n    columnCount = 1,\n    nested = false,\n    asFlex = false,\n    valueComparison = false,\n    collapsible = false\n  },\n  ref\n) {\n  const {\n    longestLabelLength,\n    mobileView: inMobileView,\n    depth,\n    ...context\n  } = useContext(DetailsContext);\n  const {\n    base: {\n      'content-width': { sm: smContentWidth }\n    }\n  } = useTheme();\n  const isSmallOrAbove = useBreakpoint('sm');\n  const listRef = useConsolidatedRef<HTMLDListElement>(ref);\n  const isXsContentWidthOrAbove = useBreakpoint('xs', {\n    breakpointRef: listRef,\n    themeProp: 'content-width'\n  });\n  const isMdContentWidthOrAbove = useBreakpoint('md', {\n    breakpointRef: listRef,\n    themeProp: 'content-width'\n  });\n  const flexRow = useBreakpoint(columnCount > 2 ? 'lg' : 'md', {\n    breakpointRef: listRef,\n    themeProp: 'content-width'\n  });\n  const t = useI18n();\n  const testIds = useTestIds(testId, getDetailsTestIds);\n\n  const [flexContextMobileView, setFlexContextMobileView] = useState(false);\n  const [open, setOpen] = useState(true);\n\n  const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n  const headingDepth = depth ?? 1;\n  const applyMobileView =\n    inMobileView ||\n    !isSmallOrAbove ||\n    !isXsContentWidthOrAbove ||\n    (asFlex && flexRow && flexContextMobileView);\n\n  const chToPxConversionFactor = useChToPxConversionFactor();\n\n  // Mount resize observer to update flex context mobile view & run initial check.\n  useEffect(() => {\n    const checkBreakpoint = (elementWidth: number) => {\n      const minWidthPx = parseInt(smContentWidth, 10) * chToPxConversionFactor;\n      const oneRemInPx = parseInt(remToPx(1), 10);\n      const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);\n      const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n      setFlexContextMobileView(elementWidth < mobileViewBreakpoint);\n    };\n    const resizeObserver = new ResizeObserver(entries => {\n      const containerPxWidth = entries[0].contentRect.width;\n      checkBreakpoint(containerPxWidth);\n    });\n\n    if (listRef.current) {\n      checkBreakpoint(listRef.current.offsetWidth);\n      resizeObserver.observe(listRef.current);\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [listRef, columnCount]);\n\n  const contextValue = useMemo(() => {\n    return {\n      mobileView: applyMobileView,\n      depth: name ? headingDepth + 1 : headingDepth,\n      longestLabelLength,\n      ...context\n    };\n  }, [applyMobileView, name, headingDepth, longestLabelLength, context]);\n\n  const nameText = useMemo(() => {\n    return <Text variant={`h${Math.min(headingDepth, 6)}` as HeadingTag}>{name}</Text>;\n  }, [name, headingDepth]);\n\n  const details = useMemo(() => {\n    return (\n      <>\n        {highlightedData && (\n          <>\n            <Flex\n              data-testid={testIds.highlightedData}\n              as={StyledHighlightedDetailList}\n              forwardedAs={nested ? 'div' : 'dl'}\n              container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n            >\n              {highlightedData.map((child, i) => (\n                // eslint-disable-next-line react/no-array-index-key\n                <Fragment key={i}>{child}</Fragment>\n              ))}\n            </Flex>\n\n            <hr />\n          </>\n        )}\n\n        {children ? (\n          <StyledDetailList\n            data-testid={testIds.data}\n            ref={listRef}\n            as={nested ? 'div' : 'dl'}\n            columnCount={columnCount}\n            labelLength={labelLength}\n            stacked={applyMobileView}\n            nested={nested}\n            flex={asFlex}\n            wrapped={asFlex ? !flexRow : false}\n            variant={valueComparison ? 'value-comparison' : undefined}\n            narrow={!isMdContentWidthOrAbove}\n          >\n            {children}\n          </StyledDetailList>\n        ) : null}\n      </>\n    );\n  }, [\n    highlightedData,\n    nested,\n    columnCount,\n    labelLength,\n    applyMobileView,\n    name,\n    asFlex,\n    flexRow,\n    valueComparison,\n    children,\n    testIds\n  ]);\n\n  if (!name && !children && !highlightedData && !description) return null;\n\n  return (\n    <DetailsContext.Provider value={contextValue}>\n      <StyledDetails data-testid={testIds.root}>\n        {name && (\n          <StyledFieldValueGroupLabel data-testid={testIds.heading}>\n            {collapsible ? (\n              <Button\n                type='button'\n                variant='text'\n                onClick={() => {\n                  setOpen(cur => !cur);\n                }}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n              >\n                <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n                  <Icon name='caret-right' />\n                  {nameText}\n                </Flex>\n              </Button>\n            ) : (\n              nameText\n            )}\n          </StyledFieldValueGroupLabel>\n        )}\n\n        {description && (\n          <StyledDetailDescription data-testid={testIds.description}>\n            <HTML as='p' content={description} />\n          </StyledDetailDescription>\n        )}\n\n        {collapsible ? (\n          <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n            {details}\n          </ExpandCollapse>\n        ) : (\n          details\n        )}\n      </StyledDetails>\n    </DetailsContext.Provider>\n  );\n});\n\nexport default withTestIds(Details, getDetailsTestIds);\n"]}
+{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';\nimport type { FC, ReactNode, Ref } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  AdditionalInfo,\n  Text,\n  useBreakpoint,\n  useConsolidatedRef,\n  useTheme,\n  ExpandCollapse,\n  Button,\n  Flex,\n  Icon,\n  useChToPxConversionFactor,\n  useI18n,\n  HTML,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport type {\n  AdditionalInfoProps,\n  ForwardProps,\n  HeadingTag,\n  TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n  StyledFieldValueGroupLabel,\n  StyledDetails,\n  StyledDetailList,\n  StyledHighlightedDetailList,\n  flexGapProp,\n  StyledDetailDescription\n} from './Details.styles';\n\nexport type DetailsProps = TestIdProp & {\n  highlightedData?: ReactNode[];\n  children?: ReactNode;\n  /** Copy placed in paragraph below the name */\n  description?: string;\n  /**\n   * Number of columns in detail layout\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /** Whether detail list is rendering within another detail list\n   * @default false\n   */\n  nested?: boolean;\n  /** Whether detail list is rendering multiple sub-lists in columns (passed as children)\n   * @default false\n   */\n  asFlex?: boolean;\n  /** Whether to apply `value-comparison` styles to list items\n   * @default false\n   */\n  valueComparison?: boolean;\n  ref?: Ref<HTMLDListElement>;\n} & (\n    | {\n        /** Text used as heading of list */\n        name: string;\n        /** Pass a heading and content to show additional information on the list. */\n        additionalInfo?: {\n          heading?: AdditionalInfoProps['heading'];\n          content: AdditionalInfoProps['children'];\n        };\n        /**\n         * Whether the items children can be collapsed (only applies if name is provided)\n         * @default false\n         */\n        collapsible?: boolean;\n      }\n    | {\n        name?: undefined;\n        additionalInfo?: never;\n        collapsible?: never;\n      }\n  );\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(function Details(\n  {\n    testId,\n    highlightedData,\n    children,\n    name,\n    description,\n    columnCount = 1,\n    nested = false,\n    asFlex = false,\n    valueComparison = false,\n    collapsible = false,\n    additionalInfo: additionalInfoProp\n  },\n  ref\n) {\n  const {\n    longestLabelLength,\n    mobileView: inMobileView,\n    depth,\n    ...context\n  } = useContext(DetailsContext);\n  const {\n    base: {\n      'content-width': { sm: smContentWidth }\n    }\n  } = useTheme();\n  const isSmallOrAbove = useBreakpoint('sm');\n  const listRef = useConsolidatedRef<HTMLDListElement>(ref);\n  const isXsContentWidthOrAbove = useBreakpoint('xs', {\n    breakpointRef: listRef,\n    themeProp: 'content-width'\n  });\n  const isMdContentWidthOrAbove = useBreakpoint('md', {\n    breakpointRef: listRef,\n    themeProp: 'content-width'\n  });\n  const flexRow = useBreakpoint(columnCount > 2 ? 'lg' : 'md', {\n    breakpointRef: listRef,\n    themeProp: 'content-width'\n  });\n  const t = useI18n();\n  const testIds = useTestIds(testId, getDetailsTestIds);\n\n  const [flexContextMobileView, setFlexContextMobileView] = useState(false);\n  const [open, setOpen] = useState(true);\n\n  const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n  const headingDepth = depth ?? 1;\n  const applyMobileView =\n    inMobileView ||\n    !isSmallOrAbove ||\n    !isXsContentWidthOrAbove ||\n    (asFlex && flexRow && flexContextMobileView);\n\n  const chToPxConversionFactor = useChToPxConversionFactor();\n\n  // Mount resize observer to update flex context mobile view & run initial check.\n  useEffect(() => {\n    const checkBreakpoint = (elementWidth: number) => {\n      const minWidthPx = parseInt(smContentWidth, 10) * chToPxConversionFactor;\n      const oneRemInPx = parseInt(remToPx(1), 10);\n      const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);\n      const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n      setFlexContextMobileView(elementWidth < mobileViewBreakpoint);\n    };\n    const resizeObserver = new ResizeObserver(entries => {\n      const containerPxWidth = entries[0].contentRect.width;\n      checkBreakpoint(containerPxWidth);\n    });\n\n    if (listRef.current) {\n      checkBreakpoint(listRef.current.offsetWidth);\n      resizeObserver.observe(listRef.current);\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [listRef, columnCount]);\n\n  const contextValue = useMemo(() => {\n    return {\n      mobileView: applyMobileView,\n      depth: name ? headingDepth + 1 : headingDepth,\n      longestLabelLength,\n      ...context\n    };\n  }, [applyMobileView, name, headingDepth, longestLabelLength, context]);\n\n  const nameText = useMemo(() => {\n    return <Text variant={`h${Math.min(headingDepth, 6)}` as HeadingTag}>{name}</Text>;\n  }, [name, headingDepth]);\n\n  const additionalInfo = useMemo(() => {\n    return name && additionalInfoProp ? (\n      <AdditionalInfo heading={additionalInfoProp.heading} contextualLabel={name}>\n        {additionalInfoProp.content}\n      </AdditionalInfo>\n    ) : undefined;\n  }, [name, additionalInfoProp?.heading, additionalInfoProp?.content]);\n\n  const details = useMemo(() => {\n    return (\n      <>\n        {highlightedData && (\n          <>\n            <Flex\n              data-testid={testIds.highlightedData}\n              as={StyledHighlightedDetailList}\n              forwardedAs={nested ? 'div' : 'dl'}\n              container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n            >\n              {highlightedData.map((child, i) => (\n                // eslint-disable-next-line react/no-array-index-key\n                <Fragment key={i}>{child}</Fragment>\n              ))}\n            </Flex>\n\n            <hr />\n          </>\n        )}\n\n        {children ? (\n          <StyledDetailList\n            data-testid={testIds.data}\n            ref={listRef}\n            as={nested ? 'div' : 'dl'}\n            columnCount={columnCount}\n            labelLength={labelLength}\n            stacked={applyMobileView}\n            nested={nested}\n            flex={asFlex}\n            wrapped={asFlex ? !flexRow : false}\n            variant={valueComparison ? 'value-comparison' : undefined}\n            narrow={!isMdContentWidthOrAbove}\n          >\n            {children}\n          </StyledDetailList>\n        ) : null}\n      </>\n    );\n  }, [\n    highlightedData,\n    nested,\n    columnCount,\n    labelLength,\n    applyMobileView,\n    name,\n    asFlex,\n    flexRow,\n    valueComparison,\n    children,\n    testIds\n  ]);\n\n  if (!name && !children && !highlightedData && !description) return null;\n\n  return (\n    <DetailsContext.Provider value={contextValue}>\n      <StyledDetails data-testid={testIds.root}>\n        {name && (\n          <StyledFieldValueGroupLabel data-testid={testIds.heading}>\n            <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n              {collapsible ? (\n                <>\n                  <Button\n                    type='button'\n                    variant='text'\n                    onClick={() => {\n                      setOpen(cur => !cur);\n                    }}\n                    aria-expanded={open ? 'true' : 'false'}\n                    aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n                  >\n                    <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n                      <Icon name='caret-right' />\n                      {nameText}\n                    </Flex>\n                  </Button>\n                  {additionalInfo}\n                </>\n              ) : (\n                <>\n                  {nameText}\n                  {additionalInfo}\n                </>\n              )}\n            </Flex>\n          </StyledFieldValueGroupLabel>\n        )}\n\n        {description && (\n          <StyledDetailDescription data-testid={testIds.description}>\n            <HTML as='p' content={description} />\n          </StyledDetailDescription>\n        )}\n\n        {collapsible ? (\n          <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n            {details}\n          </ExpandCollapse>\n        ) : (\n          details\n        )}\n      </StyledDetails>\n    </DetailsContext.Provider>\n  );\n});\n\nexport default withTestIds(Details, getDetailsTestIds);\n"]}

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

@@ -1,5 +1,5 @@
-import { DefaultTheme } from 'styled-components';
-import { StyledFieldValueListProps } from '@pega/cosmos-react-core';
+import type { DefaultTheme } from 'styled-components';
+import type { StyledFieldValueListProps } from '@pega/cosmos-react-core';
 interface StyledDetailListProps extends StyledFieldValueListProps {
     /** Whether individual list items all have labels stacks on top */
     stacked?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAML,yBAAyB,EAM1B,MAAM,yBAAyB,CAAC;AAEjC,UAAU,qBAAsB,SAAQ,yBAAyB;IAC/D,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAa3B,CAAC;AAEF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,0BAA0B,6EAyBrC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6EAYlC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,aAAa,6EAAe,CAAC;AAE1C,eAAO,MAAM,gBAAgB,oRA+H5B,CAAC"}
+{"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAYtD,OAAO,KAAK,EACV,yBAAyB,EAG1B,MAAM,yBAAyB,CAAC;AAEjC,UAAU,qBAAsB,SAAQ,yBAAyB;IAC/D,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAa3B,CAAC;AAEF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,0BAA0B,6EAyBrC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6EAYlC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,aAAa,6EAAe,CAAC;AAE1C,eAAO,MAAM,gBAAgB,oRA+I5B,CAAC"}

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

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { calculateFontSize, defaultThemeProp, StyledFieldValue, StyledStackedFieldValue, StyledFieldValueList, StyledIcon, useDirection, StyledButton } from '@pega/cosmos-react-core';
+import { calculateFontSize, defaultThemeProp, StyledFieldValue, StyledStackedFieldValue, StyledFieldValueList, StyledIcon, useDirection, StyledButtonLink } from '@pega/cosmos-react-core';
 const verticalGapSpacingMultiplier = 1;
 // colWidth reduces by 20% as column count increases
 export const colCountChWidth = {
@@ -27,15 +27,15 @@ export const StyledFieldValueGroupLabel = styled.div(({ theme }) => {
     margin-block-end: calc(0.5 * ${spacing});
     margin-block-start: calc(1.5 * ${spacing});
 
-    ${StyledButton} ${StyledIcon} {
+    ${StyledButtonLink} ${StyledIcon} {
       transition: transform ${animation.speed} ${animation.timing.ease};
     }
 
-    ${StyledButton}[aria-expanded='true'] ${StyledIcon} {
+    ${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {
       transform: rotate(90deg);
     }
 
-    ${StyledButton}[aria-expanded='false'] ${StyledIcon} {
+    ${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {
       transform: rotate(${rtl ? 180 : 0}deg);
     }
   `;
@@ -110,6 +110,14 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, n
             css `
           grid-template-columns: minmax(0, 1fr);
           row-gap: 0;
+
+          ${!isValueComparison &&
+                css `
+            > dt,
+            ${StyledStackedFieldValue} {
+              margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
+            }
+          `}
         `}
 
         > ${StyledStackedFieldValue} {
@@ -163,6 +171,14 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, n
 
         > ${StyledDetails} {
           width: 100%;
+
+          ${wrapped &&
+            !stacked &&
+            css `
+            + ${StyledDetails} > ${StyledDetailList}:first-child {
+              margin-block-start: ${theme.base.spacing};
+            }
+          `}
         }
       `}