@pega/cosmos-react-work 4.0.0-dev.2.0 → 4.0.0-dev.20.0

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

@@ -1,21 +1,29 @@
 import { ReactElement, ReactNode, MouseEvent } from 'react';
-import { Tab, NoChildrenProp, ForwardProps, MenuItemProps, Action, BaseProps } from '@pega/cosmos-react-core';
-export interface CaseViewProps extends NoChildrenProp, BaseProps {
+import { Tab, NoChildrenProp, FieldValueListItemProps, ForwardProps, MenuItemProps, Action, BaseProps, TestIdProp } from '@pega/cosmos-react-core';
+import type { getCaseViewTestIds } from './CaseView.test-ids';
+export type CaseSummaryFieldsProps = {
+    primary?: SummaryField[];
+    secondary?: SummaryField[];
+    inSummaryPanel?: boolean;
+};
+export type SummaryField = {
+    name: FieldValueListItemProps['name'];
+    value: FieldValueListItemProps['value'];
+    simpleValue?: string | number | ReactNode;
+    variant?: FieldValueListItemProps['variant'];
+};
+export interface CaseViewProps extends NoChildrenProp, BaseProps, TestIdProp {
     /** A unique identifier for the case instance. */
     caseId: string;
     /** Text to quickly identify a case instance. */
     heading: string;
     /** Supplemental text to identify a case instance. */
     subheading?: string;
-    /** A set of props including an href that will be forwarded to the case heading and caseId. */
-    caseLink?: {
-        href: string;
-    } & ForwardProps;
     /** A set of Link props representing the case parents, rendered as Breadcrumbs. */
     parentCases?: MenuItemProps[];
     /** An icon to serve as a visual for the CaseView. */
     icon?: ReactElement;
-    /** Indicates if the current user is following the case. This should be updated based on onFollowedChange.  */
+    /** Indicates if the current user is following the case. This should be updated based on onFollowedChange. */
     followed?: boolean;
     /** Called when user chooses to follow or unfollow the case. Use this to update followed. */
     onFollowedChange?: (following: boolean) => void;
@@ -25,16 +33,14 @@ export interface CaseViewProps extends NoChildrenProp, BaseProps {
     promotedActions?: Action[];
     /** A callback for when the edit button is clicked */
     onEdit?: () => void;
-    /** A region to display any summary information about the CaseView. */
-    summary: ReactNode;
+    /** Field data to render in summary areas. */
+    summaryFields: CaseSummaryFieldsProps;
     /**
      * Determines the layout state of the summary region.
      * @default true
      */
     summaryExpanded?: boolean;
-    /**
-     * Callback to toggle the case summary's layout.
-     */
+    /** Callback to toggle the case summary's layout. */
     onToggleSummary?: () => void;
     /** An object handling the rendering and functionality of the Tabs in CaseSummary. */
     tabs: {
@@ -58,15 +64,14 @@ export interface CaseViewProps extends NoChildrenProp, BaseProps {
         content: ReactNode;
         title: string;
     };
-    /**
-     * Provide an instance of IntelligentGuidance to be rendered for a case.
-     */
+    /** Provide an instance of IntelligentGuidance to be rendered for a case. */
     intelligentGuidance?: ReactNode;
     /** A region for case widgets. */
     utilities?: ReactNode;
     /** An indicator of case widgets when the utilities are collapsed. */
     utilitiesSummaryItems?: {
         iconName: string;
+        name: string;
         count?: number;
     }[];
     /**
@@ -74,30 +79,18 @@ export interface CaseViewProps extends NoChildrenProp, BaseProps {
      * @default true
      */
     utilitiesExpanded?: boolean;
-    /**
-     * Callback to toggle the utilities.
-     */
+    /** Callback to toggle the utilities. */
     onToggleUtilities?: () => void;
 }
-export interface CaseSummaryFieldsProps {
-    /** The primary summary fields to display above secondary fields. */
-    primaryFields: {
-        id?: string;
-        name: string;
-        value: ReactNode;
-    }[];
-    /** The secondary summary fields to display below primary fields. */
-    secondaryFields: {
-        id?: string;
-        name: string;
-        value: ReactNode;
-    }[];
-}
-export interface CaseViewContextValue extends Pick<CaseViewProps, 'caseId' | 'heading' | 'subheading' | 'caseLink' | 'parentCases' | 'icon' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'summary' | 'tabs' | 'summaryExpanded' | 'onToggleSummary' | 'utilitiesExpanded' | 'persistentUtility' | 'intelligentGuidance'> {
-    summaryId: string;
+export interface CaseViewContextValue extends Pick<CaseViewProps, 'caseId' | 'heading' | 'subheading' | 'parentCases' | 'icon' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'tabs' | 'summaryExpanded' | 'summaryFields' | 'onToggleSummary' | 'utilitiesExpanded' | 'stages' | 'tasks' | 'persistentUtility' | 'intelligentGuidance'> {
+    testIds: Partial<ReturnType<typeof getCaseViewTestIds>>;
+    aboveSM: boolean;
     aboveMD: boolean;
     aboveLG: boolean;
     aboveXL: boolean;
     isPreview: boolean;
+    caseLink?: {
+        href: string;
+    } & ForwardProps;
 }
 //# sourceMappingURL=CaseView.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EACL,GAAG,EACH,cAAc,EACd,uBAAuB,EACvB,YAAY,EACZ,aAAa,EACb,MAAM,EACN,SAAS,EACT,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,uBAAuB,CAAC,MAAM,CAAC,CAAC;IACtC,KAAK,EAAE,uBAAuB,CAAC,OAAO,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC1C,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,SAAS,EAAE,UAAU;IAC1E,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAC;IAEf,gDAAgD;IAChD,OAAO,EAAE,MAAM,CAAC;IAEhB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpB,kFAAkF;IAClF,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAE9B,qDAAqD;IACrD,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,4FAA4F;IAC5F,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEhD,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAE3B,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,6CAA6C;IAC7C,aAAa,EAAE,sBAAsB,CAAC;IAEtC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,oDAAoD;IACpD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAE7B,qFAAqF;IACrF,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG,EAAE,CAAC;QACb,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;QACzF,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IAEF,mFAAmF;IACnF,UAAU,CAAC,EAAE;QAAE,OAAO,EAAE,SAAS,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAElD,2CAA2C;IAC3C,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,+DAA+D;IAC/D,iBAAiB,CAAC,EAAE;QAAE,OAAO,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAE1D,4EAA4E;IAC5E,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAEhC,iCAAiC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,qEAAqE;IACrE,qBAAqB,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAE7E;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAOhC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CACV,aAAa,EACX,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,aAAa,GACb,MAAM,GACN,UAAU,GACV,kBAAkB,GAClB,SAAS,GACT,iBAAiB,GACjB,QAAQ,GACR,MAAM,GACN,iBAAiB,GACjB,eAAe,GACf,iBAAiB,GACjB,mBAAmB,GACnB,QAAQ,GACR,OAAO,GACP,mBAAmB,GACnB,qBAAqB,CACxB;IACD,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,CAAC;IACxD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,YAAY,CAAC;CAC5C"}

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

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

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

@@ -2,7 +2,6 @@ import { FunctionComponent } from 'react';
 import { CaseViewProps } from './CaseView.types';
 export interface UtilitiesSummaryProps {
     items?: CaseViewProps['utilitiesSummaryItems'];
-    onClick?: () => void;
 }
 export declare const StyledUtilitiesSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,sBAAsB,yGAMjC,CAAC;AAEH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAiC9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,sBAAsB,yGAKjC,CAAC;AAEH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CA8B9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/CaseView/UtilitiesSummary.js

@@ -1,24 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
-import { Card, Count, Flex, Icon, useI18n } from '@pega/cosmos-react-core';
+import { Card, Count, Flex, Icon, useI18n, VisuallyHiddenText } from '@pega/cosmos-react-core';
 export const StyledUtilitiesSummary = styled.div(({ theme }) => {
     return css `
     width: 2.75rem;
     padding: ${theme.base.spacing} 0;
-    cursor: pointer;
   `;
 });
-const UtilitiesSummary = ({ items = [], onClick }) => {
+const UtilitiesSummary = ({ items = [] }) => {
     const t = useI18n();
-    return items.length ? (_jsx(Card, { interactive: true, tabIndex: 0, role: 'button', container: { direction: 'column', alignItems: 'center', gap: 3 }, "aria-label": `${t('utilities_summary')}. ${t('expand_utilities_panel')}`, as: StyledUtilitiesSummary, onClick: onClick, onKeyDown: (e) => {
-            if (e.key === ' ' || e.key === 'Enter')
-                onClick?.();
-        }, children: items.map(item => {
+    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: {
                     direction: 'column',
                     alignItems: 'center',
                     gap: 0.5
-                }, item: { grow: 1 }, children: [_jsx(Icon, { name: item.iconName }), item.count !== undefined && _jsx(Count, { variant: 'default', children: item.count })] }, item.iconName));
+                }, 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;
 };
 export default UtilitiesSummary;

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,MAAM,yBAAyB,CAAC;AAS3E,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;;GAE9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAA6C,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;IAC7F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,IACH,WAAW,QACX,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,gBACpD,GAAG,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,wBAAwB,CAAC,EAAE,EACvE,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC9C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBAAE,OAAO,EAAE,EAAE,CAAC;QACtD,CAAC,YAEA,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,IAAC,OAAO,EAAC,SAAS,YAAE,IAAI,CAAC,KAAK,GAAS,KAHrE,IAAI,CAAC,QAAQ,CAIb,CACR,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { FunctionComponent, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Card, Count, Flex, Icon, useI18n } from '@pega/cosmos-react-core';\n\nimport { CaseViewProps } from './CaseView.types';\n\nexport interface UtilitiesSummaryProps {\n  items?: CaseViewProps['utilitiesSummaryItems'];\n  onClick?: () => void;\n}\n\nexport const StyledUtilitiesSummary = styled.div(({ theme }) => {\n  return css`\n    width: 2.75rem;\n    padding: ${theme.base.spacing} 0;\n    cursor: pointer;\n  `;\n});\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps> = ({ items = [], onClick }) => {\n  const t = useI18n();\n  return items.length ? (\n    <Card\n      interactive\n      tabIndex={0}\n      role='button'\n      container={{ direction: 'column', alignItems: 'center', gap: 3 }}\n      aria-label={`${t('utilities_summary')}. ${t('expand_utilities_panel')}`}\n      as={StyledUtilitiesSummary}\n      onClick={onClick}\n      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n        if (e.key === ' ' || e.key === 'Enter') onClick?.();\n      }}\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 variant='default'>{item.count}</Count>}\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,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"]}

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

@@ -1,9 +1,4 @@
 export { default } from './CaseView';
 export { CaseViewProps } from './CaseView.types';
 export { StyledCaseView, StyledWorkArea as StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummary as StyledSummaryRegion } from './CaseView.styles';
-export { default as MobileCaseView } from './MobileCaseView';
-export { MobileCaseViewProps } from './MobileCaseView';
-export { default as CaseSummary } from './CaseSummary';
-export { default as CaseSummaryFields } from './CaseSummaryFields';
-export { default as CaseHeader } from './CaseHeader';
 //# 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,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,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,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC"}

package/lib/components/CaseView/index.js

@@ -1,7 +1,3 @@
 export { default } from './CaseView';
 export { StyledCaseView, StyledWorkArea as StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummary as StyledSummaryRegion } from './CaseView.styles';
-export { default as MobileCaseView } from './MobileCaseView';
-export { default as CaseSummary } from './CaseSummary';
-export { default as CaseSummaryFields } from './CaseSummaryFields';
-export { default as CaseHeader } from './CaseHeader';
 //# 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;AAC3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './CaseView';\nexport { 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 MobileCaseView } from './MobileCaseView';\nexport { MobileCaseViewProps } from './MobileCaseView';\nexport { default as CaseSummary } from './CaseSummary';\nexport { default as CaseSummaryFields } from './CaseSummaryFields';\nexport { default as CaseHeader } from './CaseHeader';\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","sourcesContent":["export { default } from './CaseView';\nexport { CaseViewProps } from './CaseView.types';\nexport {\n  StyledCaseView,\n  StyledWorkArea as StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledCaseDrawerContent,\n  StyledSummary as StyledSummaryRegion\n} from './CaseView.styles';\n"]}

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

@@ -1,7 +1,5 @@
 import type widthConfigOptions from './options';
-/**
- * Type for config of a single ConfigurableLayout item.
- */
+/** Type for config of a single ConfigurableLayout item. */
 export interface Config {
     /** Unique identifier in render region */
     id: string;

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableLayout.types.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,kBAAkB,MAAM,WAAW,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,MAAM;IACrB,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB,yBAAyB;IACzB,YAAY,EAAE;QACZ,8BAA8B;QAC9B,KAAK,EAAE,MAAM,OAAO,kBAAkB,CAAC;QACvC;;;WAGG;QACH,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;KAC1D,CAAC;CACH;AAED,MAAM,WAAW,uBAAuB;IACtC,mDAAmD;IACnD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,6BAA6B;IAC7B,WAAW,CAAC,EAAE;QACZ;;;;;;WAMG;QACH,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;QACjC,4FAA4F;QAC5F,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;CACH"}
+{"version":3,"file":"ConfigurableLayout.types.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,kBAAkB,MAAM,WAAW,CAAC;AAEhD,2DAA2D;AAC3D,MAAM,WAAW,MAAM;IACrB,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB,yBAAyB;IACzB,YAAY,EAAE;QACZ,8BAA8B;QAC9B,KAAK,EAAE,MAAM,OAAO,kBAAkB,CAAC;QACvC;;;WAGG;QACH,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;KAC1D,CAAC;CACH;AAED,MAAM,WAAW,uBAAuB;IACtC,mDAAmD;IACnD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,6BAA6B;IAC7B,WAAW,CAAC,EAAE;QACZ;;;;;;WAMG;QACH,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;QACjC,4FAA4F;QAC5F,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;CACH"}

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableLayout.types.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.types.ts"],"names":[],"mappings":"","sourcesContent":["import type widthConfigOptions from './options';\n\n/**\n * Type for config of a single ConfigurableLayout item.\n */\nexport interface Config {\n  /** Unique identifier in render region */\n  id: string;\n  /** Element to render */\n  content: JSX.Element;\n  /** Config for element */\n  layoutConfig: {\n    /** Responsive width option */\n    width: keyof typeof widthConfigOptions;\n    /**\n     * Fills remaining space if true, else does not grow beyond `width` value.\n     * @default true\n     */\n    fillAvailable?: boolean;\n    /** Flex basis (minimum fixed width) of element as:\n     *  - a numeric value to be applied in __pixels__\n     *  - a tuple of a numeric value and string unit\n     */\n    minWidth?: number | [number, 'px' | 'ch' | 'rem' | 'em'];\n  };\n}\n\nexport interface ConfigurableLayoutProps {\n  /** Array of configs for individual layout cells */\n  items: Config[];\n  /** Arrangement properties */\n  arrangement?: {\n    /** Defines the arrangement size of the given ConfigurableLayout.\n     * Used to determine what width to apply to the given item when the arrangement is applied,\n     * with the following mapping:\n     * - 'narrow' --> applies 'full' width\n     * - 'main' --> applies configured width\n     * - 'half' --> applies double the configured width, or 'full' width (whichever is smaller)\n     */\n    size: 'narrow' | 'main' | 'half';\n    /** Indicates when the ConfigurableLayout has wrapped to the full width of it's container */\n    hasWrapped: boolean;\n  };\n}\n"]}
+{"version":3,"file":"ConfigurableLayout.types.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.types.ts"],"names":[],"mappings":"","sourcesContent":["import type widthConfigOptions from './options';\n\n/** Type for config of a single ConfigurableLayout item. */\nexport interface Config {\n  /** Unique identifier in render region */\n  id: string;\n  /** Element to render */\n  content: JSX.Element;\n  /** Config for element */\n  layoutConfig: {\n    /** Responsive width option */\n    width: keyof typeof widthConfigOptions;\n    /**\n     * Fills remaining space if true, else does not grow beyond `width` value.\n     * @default true\n     */\n    fillAvailable?: boolean;\n    /** Flex basis (minimum fixed width) of element as:\n     *  - a numeric value to be applied in __pixels__\n     *  - a tuple of a numeric value and string unit\n     */\n    minWidth?: number | [number, 'px' | 'ch' | 'rem' | 'em'];\n  };\n}\n\nexport interface ConfigurableLayoutProps {\n  /** Array of configs for individual layout cells */\n  items: Config[];\n  /** Arrangement properties */\n  arrangement?: {\n    /** Defines the arrangement size of the given ConfigurableLayout.\n     * Used to determine what width to apply to the given item when the arrangement is applied,\n     * with the following mapping:\n     * - 'narrow' --> applies 'full' width\n     * - 'main' --> applies configured width\n     * - 'half' --> applies double the configured width, or 'full' width (whichever is smaller)\n     */\n    size: 'narrow' | 'main' | 'half';\n    /** Indicates when the ConfigurableLayout has wrapped to the full width of it's container */\n    hasWrapped: boolean;\n  };\n}\n"]}

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

@@ -5,7 +5,7 @@ export interface ConfirmationProps extends NoChildrenProp {
     title?: string;
     /** Region for a Field Value List component */
     details?: ReactNode;
-    /** Array of React nodes to be put into a list  */
+    /** Array of React nodes to be put into a list */
     whatsNext?: UnorderedListProps['items'];
     /** Region for a Tasks component */
     tasks?: ReactNode;

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,EAAc,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAGL,YAAY,EAOZ,kBAAkB,EAClB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kDAAkD;IAClD,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;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAqCrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAGL,YAAY,EAOZ,kBAAkB,EAClB,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAQjC,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;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAsCrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Confirmation/Confirmation.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { Card, CardContent, Flex, Text, useI18n, UnorderedList, Button, defaultThemeProp } from '@pega/cosmos-react-core';
+import { Card, CardContent, Flex, Text, useI18n, UnorderedList, Button, defaultThemeProp, VisuallyHiddenText } from '@pega/cosmos-react-core';
 const StyledWhatsNextList = styled(UnorderedList) `
   padding-inline-start: 0;
 `;
 StyledWhatsNextList.defaultProps = defaultThemeProp;
 const Confirmation = forwardRef(({ title, details, whatsNext, tasks, onClose, ...restProps }, ref) => {
     const t = useI18n();
-    return (_jsx(Card, { ...restProps, ref: ref, children: _jsx(CardContent, { children: _jsxs(Flex, { container: { gap: 3, direction: 'column' }, children: [title && _jsx(Text, { variant: 'h2', children: title }), details && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_details') }), details] })), whatsNext && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_whats_next') }), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList })] })), tasks, onClose && (_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { onClick: onClose, variant: 'primary', children: t('done') }) }))] }) }) }));
+    return (_jsx(Card, { ...restProps, ref: ref, children: _jsx(CardContent, { children: _jsxs(Flex, { container: { gap: 3, direction: 'column' }, children: [title && _jsx(Text, { variant: 'h3', children: title }), details && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h4', children: t('confirmation_details') }), details] })), whatsNext && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h4', children: t('confirmation_whats_next') }), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList })] })), tasks, onClose && (_jsx(Flex, { container: { justify: 'end' }, children: _jsxs(Button, { onClick: onClose, variant: 'primary', children: [t('close'), title ? _jsx(VisuallyHiddenText, { children: `- ${title}` }) : null] }) }))] }) }) }));
 });
 export default Confirmation;
 //# sourceMappingURL=Confirmation.js.map

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,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG,EACH,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,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,EAC1C,OAAO,IAAI,CACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,sBAAsB,CAAC,GAAQ,EACpD,OAAO,IACH,CACR,EACA,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,EACA,KAAK,EACL,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,YACxC,CAAC,CAAC,MAAM,CAAC,GACH,GACJ,CACR,IACI,GACK,GACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled 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} from '@pega/cosmos-react-core';\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 Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  (\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) => {\n    const t = useI18n();\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardContent>\n          <Flex container={{ gap: 3, direction: 'column' }}>\n            {title && <Text variant='h2'>{title}</Text>}\n            {details && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_details')}</Text>\n                {details}\n              </Flex>\n            )}\n            {whatsNext && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_whats_next')}</Text>\n                <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n              </Flex>\n            )}\n            {tasks}\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('done')}\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,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAGhB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG,EACH,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,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,EAC1C,OAAO,IAAI,CACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,sBAAsB,CAAC,GAAQ,EACpD,OAAO,IACH,CACR,EACA,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,EACA,KAAK,EACL,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,OAAO,CAAC,EACV,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, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled 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\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 Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  (\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) => {\n    const t = useI18n();\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            {details && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h4'>{t('confirmation_details')}</Text>\n                {details}\n              </Flex>\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            {tasks}\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('close')}\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.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,EAMb,MAAM,yBAAyB,CAAC;AAYjC,MAAM,WAAW,YAAY;IAC3B,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;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;AAED,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,YAAY,CA8J5C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"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,EAQb,MAAM,yBAAyB,CAAC;AAWjC,MAAM,WAAW,YAAY;IAC3B,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;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;AAED,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,YAAY,CAgL5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Details/Details.js

@@ -1,15 +1,23 @@
 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, useI18n } from '@pega/cosmos-react-core';
+import { Text, useBreakpoint, useConsolidatedRef, useTheme, ExpandCollapse, Button, Flex, Icon, useChToPxConversionFactor, useI18n } from '@pega/cosmos-react-core';
 import DetailsContext from './DetailsContext';
-import { StyledFieldValueGroupLabel, StyledDetails, StyledDetailList, StyledHighlightedDetailList, flexGapProp, chToRem } from './Details.styles';
+import { StyledFieldValueGroupLabel, StyledDetails, StyledDetailList, StyledHighlightedDetailList, flexGapProp } from './Details.styles';
 const Details = forwardRef(({ highlightedData, children, name, columnCount = 1, nested = false, asFlex = false, valueComparison = false, collapsible = false }, ref) => {
-    const { longestLabelLength, mobileView, depth, ...context } = useContext(DetailsContext);
-    const { base: { 'content-width': { sm } } } = useTheme();
+    const { longestLabelLength, mobileView: inMobileView, depth, ...context } = useContext(DetailsContext);
+    const { base: { 'content-width': { sm: smContentWidth } } } = useTheme();
     const isSmallOrAbove = useBreakpoint('sm');
     const listRef = useConsolidatedRef(ref);
-    const flexRow = useBreakpoint(columnCount > 2 ? 'md' : 'sm', {
+    const isXsContentWidthOrAbove = useBreakpoint('xs', {
+        breakpointRef: listRef,
+        themeProp: 'content-width'
+    });
+    const isMdContentWidthOrAbove = useBreakpoint('md', {
+        breakpointRef: listRef,
+        themeProp: 'content-width'
+    });
+    const flexRow = useBreakpoint(columnCount > 2 ? 'lg' : 'md', {
         breakpointRef: listRef,
         themeProp: 'content-width'
     });
@@ -18,16 +26,15 @@ const Details = forwardRef(({ highlightedData, children, name, columnCount = 1,
     const [open, setOpen] = useState(true);
     const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));
     const headingDepth = depth ?? 1;
-    const applyMobileView = asFlex
-        ? mobileView || (flexRow && flexContextMobileView) || !isSmallOrAbove
-        : mobileView || !isSmallOrAbove;
-    /**
-     * Mount resize observer to update flex context mobile view & run initial check.
-     */
+    const applyMobileView = inMobileView ||
+        !isSmallOrAbove ||
+        !isXsContentWidthOrAbove ||
+        (asFlex && flexRow && flexContextMobileView);
+    const chToPxConversionFactor = useChToPxConversionFactor();
+    // Mount resize observer to update flex context mobile view & run initial check.
     useEffect(() => {
         const checkBreakpoint = (elementWidth) => {
-            const minWidthRem = chToRem(parseInt(sm, 10));
-            const minWidthPx = parseInt(remToPx(minWidthRem), 10);
+            const minWidthPx = parseInt(smContentWidth, 10) * chToPxConversionFactor;
             const oneRemInPx = parseInt(remToPx(1), 10);
             const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);
             const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;
@@ -54,12 +61,12 @@ const Details = forwardRef(({ highlightedData, children, name, columnCount = 1,
         };
     }, [applyMobileView, name, headingDepth, longestLabelLength, context]);
     const nameText = useMemo(() => {
-        return (_jsx(Text, { variant: `h${Math.min(headingDepth, 6)}`, children: name }));
+        return _jsx(Text, { variant: `h${Math.min(headingDepth, 6)}`, children: name });
     }, [name, headingDepth]);
     const details = useMemo(() => {
-        return (_jsxs(_Fragment, { children: [highlightedData && (_jsxs(_Fragment, { children: [_jsx(StyledHighlightedDetailList, { as: nested ? 'div' : 'dl', children: highlightedData.map((child, i) => (
+        return (_jsxs(_Fragment, { children: [highlightedData && (_jsxs(_Fragment, { children: [_jsx(Flex, { 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
-                            _jsx(Fragment, { children: child }, i))) }), _jsx("hr", {})] })), _jsx(StyledDetailList, { ref: listRef, as: nested ? 'div' : 'dl', columnCount: columnCount, labelLength: labelLength, stacked: applyMobileView, hasName: !!name, nested: nested, flex: asFlex, wrapped: asFlex ? !flexRow : false, variant: valueComparison ? 'value-comparison' : undefined, children: children })] }));
+                            _jsx(Fragment, { children: child }, i))) }), _jsx("hr", {})] })), children ? (_jsx(StyledDetailList, { ref: listRef, as: nested ? 'div' : 'dl', columnCount: columnCount, labelLength: labelLength, stacked: applyMobileView, nested: nested, flex: asFlex, wrapped: asFlex ? !flexRow : false, variant: valueComparison ? 'value-comparison' : undefined, narrow: !isMdContentWidthOrAbove, children: children })) : null] }));
     }, [
         highlightedData,
         nested,
@@ -72,6 +79,8 @@ const Details = forwardRef(({ highlightedData, children, name, columnCount = 1,
         valueComparison,
         children
     ]);
+    if (!name && !children && !highlightedData)
+        return null;
     return (_jsx(DetailsContext.Provider, { value: contextValue, children: _jsxs(StyledDetails, { children: [name && (_jsx(StyledFieldValueGroupLabel, { 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) })), collapsible ? _jsx(ExpandCollapse, { collapsed: !open, children: details }) : details] }) }));

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  useI18n\n} from '@pega/cosmos-react-core';\n\nimport DetailsContext from './DetailsContext';\nimport {\n  StyledFieldValueGroupLabel,\n  StyledDetails,\n  StyledDetailList,\n  StyledHighlightedDetailList,\n  flexGapProp,\n  chToRem\n} from './Details.styles';\n\nexport interface DetailsProps {\n  highlightedData?: ReactNode[];\n  children?: ReactNode;\n  /** Text used as heading of list */\n  name?: 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(\n  (\n    {\n      highlightedData,\n      children,\n      name,\n      columnCount = 1,\n      nested = false,\n      asFlex = false,\n      valueComparison = false,\n      collapsible = false\n    },\n    ref\n  ) => {\n    const { longestLabelLength, mobileView, depth, ...context } = useContext(DetailsContext);\n    const {\n      base: {\n        'content-width': { sm }\n      }\n    } = useTheme();\n    const isSmallOrAbove = useBreakpoint('sm');\n    const listRef = useConsolidatedRef<HTMLDListElement>(ref);\n    const flexRow = useBreakpoint(columnCount > 2 ? 'md' : 'sm', {\n      breakpointRef: listRef,\n      themeProp: 'content-width'\n    });\n    const t = useI18n();\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 = asFlex\n      ? mobileView || (flexRow && flexContextMobileView) || !isSmallOrAbove\n      : mobileView || !isSmallOrAbove;\n\n    /**\n     * Mount resize observer to update flex context mobile view & run initial check.\n     */\n    useEffect(() => {\n      const checkBreakpoint = (elementWidth: number) => {\n        const minWidthRem = chToRem(parseInt(sm, 10));\n        const minWidthPx = parseInt(remToPx(minWidthRem), 10);\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 (\n        <Text variant={`h${Math.min(headingDepth, 6)}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>\n          {name}\n        </Text>\n      );\n    }, [name, headingDepth]);\n\n    const details = useMemo(() => {\n      return (\n        <>\n          {highlightedData && (\n            <>\n              <StyledHighlightedDetailList as={nested ? 'div' : 'dl'}>\n                {highlightedData.map((child, i) => (\n                  // eslint-disable-next-line react/no-array-index-key\n                  <Fragment key={i}>{child}</Fragment>\n                ))}\n              </StyledHighlightedDetailList>\n\n              <hr />\n            </>\n          )}\n\n          <StyledDetailList\n            ref={listRef}\n            as={nested ? 'div' : 'dl'}\n            columnCount={columnCount}\n            labelLength={labelLength}\n            stacked={applyMobileView}\n            hasName={!!name}\n            nested={nested}\n            flex={asFlex}\n            wrapped={asFlex ? !flexRow : false}\n            variant={valueComparison ? 'value-comparison' : undefined}\n          >\n            {children}\n          </StyledDetailList>\n        </>\n      );\n    }, [\n      highlightedData,\n      nested,\n      columnCount,\n      labelLength,\n      applyMobileView,\n      name,\n      asFlex,\n      flexRow,\n      valueComparison,\n      children\n    ]);\n\n    return (\n      <DetailsContext.Provider value={contextValue}>\n        <StyledDetails>\n          {name && (\n            <StyledFieldValueGroupLabel>\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          {collapsible ? <ExpandCollapse collapsed={!open}>{details}</ExpandCollapse> : details}\n        </StyledDetails>\n      </DetailsContext.Provider>\n    );\n  }\n);\n\nexport default Details;\n"]}
+{"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} from '@pega/cosmos-react-core';\n\nimport DetailsContext from './DetailsContext';\nimport {\n  StyledFieldValueGroupLabel,\n  StyledDetails,\n  StyledDetailList,\n  StyledHighlightedDetailList,\n  flexGapProp\n} from './Details.styles';\n\nexport interface DetailsProps {\n  highlightedData?: ReactNode[];\n  children?: ReactNode;\n  /** Text used as heading of list */\n  name?: 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(\n  (\n    {\n      highlightedData,\n      children,\n      name,\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\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                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              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    ]);\n\n    if (!name && !children && !highlightedData) return null;\n\n    return (\n      <DetailsContext.Provider value={contextValue}>\n        <StyledDetails>\n          {name && (\n            <StyledFieldValueGroupLabel>\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          {collapsible ? <ExpandCollapse collapsed={!open}>{details}</ExpandCollapse> : details}\n        </StyledDetails>\n      </DetailsContext.Provider>\n    );\n  }\n);\n\nexport default Details;\n"]}

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

@@ -5,8 +5,6 @@ interface StyledDetailListProps extends StyledFieldValueListProps {
     stacked?: boolean;
     /** Whether the list is a flex row of other lists */
     flex?: boolean;
-    /** Whether the list has a name attribute */
-    hasName?: boolean;
     /** Whether the list is nested */
     nested?: boolean;
     /** The character length applied to all list labels */
@@ -21,6 +19,11 @@ interface StyledDetailListProps extends StyledFieldValueListProps {
      * @default 1
      */
     columnCount?: 1 | 2 | 3;
+    /**
+     * Whether to apply narrow list styles
+     * @default false
+     */
+    narrow?: boolean;
     theme: DefaultTheme;
 }
 export declare const colCountChWidth: {
@@ -38,10 +41,9 @@ export declare const colCountChWidth: {
     };
 };
 export declare const flexGapProp = 5.5;
-export declare const chToRem: (chVal: number) => number;
 export declare const StyledFieldValueGroupLabel: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
 export declare const StyledHighlightedDetailList: import("styled-components").StyledComponent<"dl", DefaultTheme, {}, never>;
 export declare const StyledDetails: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
-export declare const StyledDetailList: import("styled-components").StyledComponent<"dl", DefaultTheme, StyledFieldValueListProps & import("@pega/cosmos-react-core").OmitStrict<StyledDetailListProps, "columnCount" | "wrapped"> & Required<Pick<StyledDetailListProps, "columnCount" | "wrapped">>, never>;
+export declare const StyledDetailList: import("styled-components").StyledComponent<"dl", DefaultTheme, StyledFieldValueListProps & Pick<StyledDetailListProps, "flex" | "theme" | "variant" | "narrow" | "stacked" | "nested" | "labelLength"> & Required<Pick<StyledDetailListProps, "columnCount" | "wrapped">>, never>;
 export {};
 //# sourceMappingURL=Details.styles.d.ts.map

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,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,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,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAa3B,CAAC;AAEF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,OAAO,UAAW,MAAM,KAAG,MAEvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,6EA4BrC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EA4BtC,CAAC;AAIH,eAAO,MAAM,aAAa,6EAIxB,CAAC;AAkCH,eAAO,MAAM,gBAAgB,uQAwJ5B,CAAC"}
+{"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,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,aAAa,6EAAe,CAAC;AAE1C,eAAO,MAAM,gBAAgB,oRA+H5B,CAAC"}