@pega/cosmos-react-work 6.3.1-1 → 6.4.1

package/lib/components/DetailsV2/DetailsV2.d.ts

@@ -0,0 +1,53 @@
+import { type FC, type ReactNode, type Ref } from 'react';
+import { type ForwardProps, type TestIdProp, type AdditionalInfoProps } from '@pega/cosmos-react-core';
+export type DetailsV2TwoColumnArrangement = undefined | 'narrowWide' | 'wideNarrow';
+export type DetailsV2Props = TestIdProp & {
+    /**
+     * FieldValueItems to display as highlighted data above children.
+     */
+    highlightedData?: ReactNode[];
+    /** Copy placed in paragraph below the name */
+    description?: string;
+    /**
+     * Template children separated into 1-3 columns {a, b, c} and their arrangement.
+     */
+    columns: {
+        a: ReactNode;
+        b?: never;
+        c?: never;
+        arrangement?: never;
+    } | {
+        a: ReactNode;
+        b: ReactNode;
+        c?: never;
+        arrangement?: DetailsV2TwoColumnArrangement;
+    } | {
+        a: ReactNode;
+        b: ReactNode;
+        c: ReactNode;
+        arrangement?: never;
+    };
+    ref?: Ref<HTMLDivElement>;
+} & ({
+    /** 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<DetailsV2Props & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "description", "highlighted-data", "data", "expand-collapse"]>;
+};
+export default _default;
+//# sourceMappingURL=DetailsV2.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsV2.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsV2/DetailsV2.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,SAAS,EACd,KAAK,GAAG,EAOT,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,KAAK,YAAY,EAEjB,KAAK,UAAU,EACf,KAAK,mBAAmB,EAezB,MAAM,yBAAyB,CAAC;AAgBjC,MAAM,MAAM,6BAA6B,GAAG,SAAS,GAAG,YAAY,GAAG,YAAY,CAAC;AACpF,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG;IACxC;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,EACH;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,CAAC,EAAE,KAAK,CAAC;QACV,CAAC,CAAC,EAAE,KAAK,CAAC;QACV,WAAW,CAAC,EAAE,KAAK,CAAC;KACrB,GACD;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,CAAC,EAAE,KAAK,CAAC;QACV,WAAW,CAAC,EAAE,6BAA6B,CAAC;KAC7C,GACD;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;QACb,WAAW,CAAC,EAAE,KAAK,CAAC;KACrB,CAAC;IACN,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B,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;;;;AAiNJ,wBAA2D"}

package/lib/components/DetailsV2/DetailsV2.js

@@ -0,0 +1,107 @@
+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 { AdditionalInfo, Text, useBreakpoint, useConsolidatedRef, useTheme, ExpandCollapse, Button, Flex, Icon, useChToPxConversionFactor, useI18n, HTML, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import { getDetailsV2TestIds } from './DetailsV2.test-ids';
+import DetailsV2Context from './DetailsV2Context';
+import { StyledFieldValueGroupLabelV2, StyledDetailsV2, StyledHighlightedDetailListV2, StyledDetailDescriptionV2, StyledDetailColumnsV2, columnGapMultiplier, StyledDetailColumnV2 } from './DetailsV2.styles';
+const DetailsV2 = forwardRef(function DetailsV2({ testId, highlightedData, columns, name, description, arrangement, collapsible = false, additionalInfo: additionalInfoProp }, ref) {
+    const testIds = useTestIds(testId, getDetailsV2TestIds);
+    const t = useI18n();
+    const { longestLabelLength, depth, ...context } = useContext(DetailsV2Context);
+    const containerRef = useConsolidatedRef(ref);
+    const [open, setOpen] = useState(true);
+    // Observer and state for mobile.
+    const columnCount = (() => {
+        let count = 1;
+        if (columns.b)
+            count = 2;
+        if (columns.c)
+            count = 3;
+        return count;
+    })();
+    const { base: { 'content-width': { sm: smContentWidth } } } = useTheme();
+    const chToPxConversionFactor = useChToPxConversionFactor();
+    const fitsThreeColumns = useBreakpoint('xl', {
+        breakpointRef: containerRef,
+        themeProp: 'content-width'
+    });
+    const fitsTwoColumns = useBreakpoint('md', {
+        breakpointRef: containerRef,
+        themeProp: 'content-width'
+    });
+    const [contentMobileView, setContentMobileView] = useState(false);
+    useEffect(() => {
+        const checkBreakpoint = (elementWidth) => {
+            const minWidthPx = parseInt(smContentWidth, 10) * chToPxConversionFactor;
+            const oneRemInPx = parseInt(remToPx(1), 10);
+            const colGapPxAllowance = oneRemInPx * (0.5 * columnGapMultiplier) * (columnCount - 1);
+            const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;
+            setContentMobileView(elementWidth < mobileViewBreakpoint);
+        };
+        const resizeObserver = new ResizeObserver(entries => {
+            const containerPxWidth = entries[0].contentRect.width;
+            checkBreakpoint(containerPxWidth);
+        });
+        if (containerRef.current) {
+            checkBreakpoint(containerRef.current.offsetWidth);
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [columnCount]);
+    // Context
+    const headingDepth = depth ?? 1;
+    const contextValue = useMemo(() => {
+        return {
+            mobileView: contentMobileView,
+            depth: name ? headingDepth + 1 : headingDepth,
+            longestLabelLength,
+            ...context
+        };
+    }, [name, headingDepth, longestLabelLength, contentMobileView, context]);
+    // Memoized Elements
+    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 content = useMemo(() => {
+        let applyColumnCount = columnCount;
+        if (columnCount !== 1) {
+            if (columnCount === 3 && fitsThreeColumns) {
+                applyColumnCount = 3;
+            }
+            else if (fitsTwoColumns) {
+                applyColumnCount = 2;
+            }
+            else {
+                applyColumnCount = 1;
+            }
+        }
+        return (_jsxs(_Fragment, { children: [description && (_jsx(StyledDetailDescriptionV2, { "data-testid": testIds.description, children: _jsx(HTML, { as: 'p', content: description }) })), highlightedData && (_jsxs(_Fragment, { children: [_jsx(Flex, { "data-testid": testIds.highlightedData, as: StyledHighlightedDetailListV2, 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", {})] })), _jsxs(Flex, { as: StyledDetailColumnsV2, container: {
+                        direction: 'row',
+                        colGap: columnGapMultiplier
+                    }, "data-testid": testIds.data, arrangement: arrangement, columnCount: applyColumnCount, children: [_jsx(StyledDetailColumnV2, { children: columns.a }), columns.b && _jsx(StyledDetailColumnV2, { children: columns.b }), columns.c && _jsx(StyledDetailColumnV2, { children: columns.c })] })] }));
+    }, [
+        highlightedData,
+        columnCount,
+        columns.a,
+        columns.b,
+        columns.c,
+        arrangement,
+        testIds,
+        fitsTwoColumns,
+        fitsThreeColumns,
+        description
+    ]);
+    return (_jsx(DetailsV2Context.Provider, { value: contextValue, children: _jsxs(StyledDetailsV2, { "data-testid": testIds.root, ref: containerRef, children: [name && (_jsx(StyledFieldValueGroupLabelV2, { "data-testid": testIds.heading, children: _jsx(Flex, { container: { alignItems: 'center', gap: 0.5 }, 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] })) }) })), collapsible ? (_jsx(ExpandCollapse, { "data-testid": testIds.expandCollapse, collapsed: !open, children: content })) : (content)] }) }));
+});
+export default withTestIds(DetailsV2, getDetailsV2TestIds);
+//# sourceMappingURL=DetailsV2.js.map

package/lib/components/DetailsV2/DetailsV2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsV2.js","sourceRoot":"","sources":["../../../src/components/DetailsV2/DetailsV2.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  type FC,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  Fragment,\n  useState,\n  useContext,\n  useEffect,\n  useMemo\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  type ForwardProps,\n  type HeadingTag,\n  type TestIdProp,\n  type AdditionalInfoProps,\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';\n\nimport { getDetailsV2TestIds } from './DetailsV2.test-ids';\nimport DetailsV2Context from './DetailsV2Context';\nimport {\n  StyledFieldValueGroupLabelV2,\n  StyledDetailsV2,\n  StyledHighlightedDetailListV2,\n  StyledDetailDescriptionV2,\n  StyledDetailColumnsV2,\n  columnGapMultiplier,\n  StyledDetailColumnV2\n} from './DetailsV2.styles';\n\ntype ColumnCount = 1 | 2 | 3;\n\nexport type DetailsV2TwoColumnArrangement = undefined | 'narrowWide' | 'wideNarrow';\nexport type DetailsV2Props = TestIdProp & {\n  /**\n   * FieldValueItems to display as highlighted data above children.\n   */\n  highlightedData?: ReactNode[];\n  /** Copy placed in paragraph below the name */\n  description?: string;\n  /**\n   * Template children separated into 1-3 columns {a, b, c} and their arrangement.\n   */\n  columns:\n    | {\n        a: ReactNode;\n        b?: never;\n        c?: never;\n        arrangement?: never;\n      }\n    | {\n        a: ReactNode;\n        b: ReactNode;\n        c?: never;\n        arrangement?: DetailsV2TwoColumnArrangement;\n      }\n    | {\n        a: ReactNode;\n        b: ReactNode;\n        c: ReactNode;\n        arrangement?: never;\n      };\n  ref?: Ref<HTMLDivElement>;\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 DetailsV2: FC<DetailsV2Props & ForwardProps> = forwardRef(function DetailsV2(\n  {\n    testId,\n    highlightedData,\n    columns,\n    name,\n    description,\n    arrangement,\n    collapsible = false,\n    additionalInfo: additionalInfoProp\n  },\n  ref\n) {\n  const testIds = useTestIds(testId, getDetailsV2TestIds);\n  const t = useI18n();\n  const { longestLabelLength, depth, ...context } = useContext(DetailsV2Context);\n\n  const containerRef = useConsolidatedRef(ref);\n  const [open, setOpen] = useState(true);\n\n  // Observer and state for mobile.\n  const columnCount = (() => {\n    let count: ColumnCount = 1;\n\n    if (columns.b) count = 2;\n    if (columns.c) count = 3;\n\n    return count;\n  })();\n  const {\n    base: {\n      'content-width': { sm: smContentWidth }\n    }\n  } = useTheme();\n  const chToPxConversionFactor = useChToPxConversionFactor();\n\n  const fitsThreeColumns = useBreakpoint('xl', {\n    breakpointRef: containerRef,\n    themeProp: 'content-width'\n  });\n  const fitsTwoColumns = useBreakpoint('md', {\n    breakpointRef: containerRef,\n    themeProp: 'content-width'\n  });\n  const [contentMobileView, setContentMobileView] = useState(false);\n\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 * columnGapMultiplier) * (columnCount - 1);\n      const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n      setContentMobileView(elementWidth < mobileViewBreakpoint);\n    };\n    const resizeObserver = new ResizeObserver(entries => {\n      const containerPxWidth = entries[0].contentRect.width;\n      checkBreakpoint(containerPxWidth);\n    });\n\n    if (containerRef.current) {\n      checkBreakpoint(containerRef.current.offsetWidth);\n      resizeObserver.observe(containerRef.current);\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [columnCount]);\n\n  // Context\n  const headingDepth = depth ?? 1;\n  const contextValue = useMemo(() => {\n    return {\n      mobileView: contentMobileView,\n      depth: name ? headingDepth + 1 : headingDepth,\n      longestLabelLength,\n      ...context\n    };\n  }, [name, headingDepth, longestLabelLength, contentMobileView, context]);\n\n  // Memoized Elements\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 content = useMemo(() => {\n    let applyColumnCount = columnCount;\n\n    if (columnCount !== 1) {\n      if (columnCount === 3 && fitsThreeColumns) {\n        applyColumnCount = 3;\n      } else if (fitsTwoColumns) {\n        applyColumnCount = 2;\n      } else {\n        applyColumnCount = 1;\n      }\n    }\n\n    return (\n      <>\n        {description && (\n          <StyledDetailDescriptionV2 data-testid={testIds.description}>\n            <HTML as='p' content={description} />\n          </StyledDetailDescriptionV2>\n        )}\n\n        {highlightedData && (\n          <>\n            <Flex\n              data-testid={testIds.highlightedData}\n              as={StyledHighlightedDetailListV2}\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        <Flex\n          as={StyledDetailColumnsV2}\n          container={{\n            direction: 'row',\n            colGap: columnGapMultiplier\n          }}\n          data-testid={testIds.data}\n          arrangement={arrangement}\n          columnCount={applyColumnCount}\n        >\n          <StyledDetailColumnV2>{columns.a}</StyledDetailColumnV2>\n          {columns.b && <StyledDetailColumnV2>{columns.b}</StyledDetailColumnV2>}\n          {columns.c && <StyledDetailColumnV2>{columns.c}</StyledDetailColumnV2>}\n        </Flex>\n      </>\n    );\n  }, [\n    highlightedData,\n    columnCount,\n    columns.a,\n    columns.b,\n    columns.c,\n    arrangement,\n    testIds,\n    fitsTwoColumns,\n    fitsThreeColumns,\n    description\n  ]);\n\n  return (\n    <DetailsV2Context.Provider value={contextValue}>\n      <StyledDetailsV2 data-testid={testIds.root} ref={containerRef}>\n        {name && (\n          <StyledFieldValueGroupLabelV2 data-testid={testIds.heading}>\n            <Flex container={{ alignItems: 'center', gap: 0.5 }}>\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          </StyledFieldValueGroupLabelV2>\n        )}\n\n        {collapsible ? (\n          <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n            {content}\n          </ExpandCollapse>\n        ) : (\n          content\n        )}\n      </StyledDetailsV2>\n    </DetailsV2Context.Provider>\n  );\n});\n\nexport default withTestIds(DetailsV2, getDetailsV2TestIds);\n"]}

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

@@ -0,0 +1,40 @@
+import { type DefaultTheme } from 'styled-components';
+import { type StyledFieldValueListProps } from '@pega/cosmos-react-core';
+import type { DetailsV2TwoColumnArrangement } from './DetailsV2';
+interface StyledDetailsV2ListProps extends StyledFieldValueListProps {
+    /** Whether individual list items all have labels stacks on top */
+    stacked?: boolean;
+    /** The character length applied to all list labels */
+    labelLength?: number;
+    /**
+     * Whether to apply narrow list styles
+     * @default false
+     */
+    narrow?: boolean;
+    theme: DefaultTheme;
+}
+interface StyledDetailColumnsV2Props {
+    /**
+     * Number of columns in the list
+     * @default 1
+     */
+    columnCount?: 1 | 2 | 3;
+    /**
+     * Arrangement of two-column configurations.
+     */
+    arrangement?: DetailsV2TwoColumnArrangement;
+    theme: DefaultTheme;
+}
+export declare const columnGapMultiplier = 5.5;
+export declare const oneColumnDetailsColumnWidth = "100ch";
+export declare const multiColumnDetailsColumnWidth = "80ch";
+export declare const StyledFieldValueGroupLabelV2: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledDetailDescriptionV2: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledDetailsV2: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledDetailColumnV2: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledDetailColumnsV2: import("styled-components").StyledComponent<"div", DefaultTheme, StyledDetailColumnsV2Props, never>;
+export declare const StyledHighlightedDetailListV2: import("styled-components").StyledComponent<"dl", DefaultTheme, {}, never>;
+export declare const StyledInlineFieldValueItemV2: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledDetailsListV2: import("styled-components").StyledComponent<"dl", DefaultTheme, StyledFieldValueListProps & Pick<StyledDetailsV2ListProps, keyof StyledDetailsV2ListProps> & Required<Pick<StyledDetailsV2ListProps, never>>, never>;
+export {};
+//# sourceMappingURL=DetailsV2.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsV2.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsV2/DetailsV2.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EACL,KAAK,yBAAyB,EAW/B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,aAAa,CAAC;AAEjE,UAAU,wBAAyB,SAAQ,yBAAyB;IAClE,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC;CACrB;AAED,UAAU,0BAA0B;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,6BAA6B,CAAC;IAC5C,KAAK,EAAE,YAAY,CAAC;CACrB;AAKD,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,2BAA2B,UAAU,CAAC;AACnD,eAAO,MAAM,6BAA6B,SAAS,CAAC;AAEpD,eAAO,MAAM,4BAA4B,6EAuBvC,CAAC;AAIH,eAAO,MAAM,yBAAyB,6EAYpC,CAAC;AAgBH,eAAO,MAAM,eAAe,6EAU1B,CAAC;AAIH,eAAO,MAAM,oBAAoB,6EAW/B,CAAC;AAIH,eAAO,MAAM,qBAAqB,qGA4EjC,CAAC;AAIF,eAAO,MAAM,6BAA6B,4EAuBxC,CAAC;AAIH,eAAO,MAAM,4BAA4B,6EAIxC,CAAC;AAEF,eAAO,MAAM,mBAAmB,sNAoF/B,CAAC"}

package/lib/components/DetailsV2/DetailsV2.styles.js

@@ -0,0 +1,245 @@
+import styled, { css } from 'styled-components';
+import { calculateFontSize, defaultThemeProp, StyledFieldValue, StyledStackedFieldValue, StyledFieldValueList, StyledIcon, useDirection, StyledButtonLink } from '@pega/cosmos-react-core';
+const rowGapMultiplier = 1;
+export const columnGapMultiplier = 5.5;
+export const oneColumnDetailsColumnWidth = '100ch';
+export const multiColumnDetailsColumnWidth = '80ch';
+export const StyledFieldValueGroupLabelV2 = styled.div(({ theme }) => {
+    const { base: { spacing, animation } } = theme;
+    const { rtl } = useDirection();
+    return css `
+    width: 100%;
+    grid-column: 1 / -1;
+    margin-block-end: calc(${rowGapMultiplier} * ${spacing});
+
+    ${StyledButtonLink} ${StyledIcon} {
+      transition: transform ${animation.speed} ${animation.timing.ease};
+    }
+
+    ${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {
+      transform: rotate(90deg);
+    }
+
+    ${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {
+      transform: rotate(${rtl ? 180 : 0}deg);
+    }
+  `;
+});
+StyledFieldValueGroupLabelV2.defaultProps = defaultThemeProp;
+export const StyledDetailDescriptionV2 = styled.div(({ theme }) => {
+    const { base: { spacing, 'content-width': { xl } } } = theme;
+    return css `
+    max-width: ${xl};
+    margin-block-end: calc(1.5 * ${spacing});
+  `;
+});
+StyledDetailDescriptionV2.defaultProps = defaultThemeProp;
+const spacingTop = (spacing) => {
+    return css `
+    > ${StyledFieldValueGroupLabelV2} {
+      margin-block-start: calc((1.5 * ${rowGapMultiplier}) * ${spacing});
+    }
+
+    > ${StyledDetailDescriptionV2}:first-child {
+      margin-block-start: calc(1.5 * ${spacing});
+    }
+  `;
+};
+export const StyledDetailsV2 = styled.div(({ theme }) => {
+    const { base: { spacing } } = theme;
+    return css `
+    &:not(:first-child) {
+      ${spacingTop(spacing)}
+    }
+  `;
+});
+StyledDetailsV2.defaultProps = defaultThemeProp;
+export const StyledDetailColumnV2 = styled.div(({ theme }) => {
+    const { base: { spacing } } = theme;
+    return css `
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(${rowGapMultiplier} * ${spacing});
+    width: 100%;
+  `;
+});
+StyledDetailColumnV2.defaultProps = defaultThemeProp;
+export const StyledDetailColumnsV2 = styled.div(({ theme, arrangement, columnCount = 1 }) => {
+    const { base: { spacing } } = theme;
+    return css `
+      width: 100%;
+
+      ${columnCount === 2 &&
+        !arrangement &&
+        css `
+        flex-wrap: wrap;
+      `}
+
+      ${columnCount === 1 &&
+        css `
+        flex-direction: column;
+        row-gap: calc(${rowGapMultiplier} * ${spacing});
+      `};
+
+      /* Column Widths */
+      > ${StyledDetailColumnV2} {
+        overflow: hidden;
+
+        ${columnCount === 3 &&
+        css `
+          width: ${multiColumnDetailsColumnWidth};
+          max-width: calc(33.33% - (${columnGapMultiplier} * ${spacing} * 2) / 3);
+        `}
+
+        ${columnCount === 2 &&
+        css `
+          width: calc(50% - (${columnGapMultiplier} * ${spacing}) / 2);
+          max-width: unset;
+
+          &:nth-child(3) > ${StyledDetailsV2}:first-child {
+            ${spacingTop(spacing)}
+          }
+        `}
+
+        ${columnCount !== 1 &&
+        css `
+          ${arrangement === 'narrowWide' &&
+            css `
+            &:nth-child(2) {
+              width: calc(
+                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}
+              );
+              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);
+            }
+          `}
+
+          ${arrangement === 'wideNarrow' &&
+            css `
+            &:nth-child(1) {
+              width: calc(
+                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}
+              );
+              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);
+            }
+          `}
+        `}
+
+        ${columnCount === 1 &&
+        css `
+          width: 100%;
+          max-width: 100%;
+
+          &:not(:first-child) > ${StyledDetailsV2}:first-child {
+            ${spacingTop(spacing)}
+          }
+        `}
+      }
+    `;
+});
+StyledDetailColumnsV2.defaultProps = defaultThemeProp;
+export const StyledHighlightedDetailListV2 = styled.dl(({ theme }) => {
+    const { base: { spacing, palette } } = theme;
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    max-width: calc(${multiColumnDetailsColumnWidth} * 3 + ${columnGapMultiplier} * ${spacing} * 2);
+    padding-block-end: calc(1.5 * ${spacing});
+
+    dd {
+      font-size: ${fontSize[theme.components.text.h1['font-size']]};
+      font-weight: ${theme.components.text.h1['font-weight']};
+    }
+
+    + hr {
+      border-top: unset;
+      border-radius: unset;
+      border-style: unset;
+      border-bottom: 0.0625rem solid ${palette['border-line']};
+      margin-block-end: calc(1.5 * ${spacing});
+    }
+  `;
+});
+StyledHighlightedDetailListV2.defaultProps = defaultThemeProp;
+export const StyledInlineFieldValueItemV2 = styled.div `
+  > * {
+    min-width: 0;
+  }
+`;
+export const StyledDetailsListV2 = styled(StyledFieldValueList)(({ stacked, labelLength, variant, theme, narrow = false }) => {
+    const { base: { spacing } } = theme;
+    const labelTop = stacked && variant !== 'value-comparison';
+    const isValueComparison = variant === 'value-comparison';
+    const fieldValueGapMultiplier = 2;
+    return css `
+      /* Field Grid Styles */
+      display: flex;
+      flex-direction: column;
+      row-gap: calc(${rowGapMultiplier} * ${spacing});
+      width: 100%;
+      max-width: ${oneColumnDetailsColumnWidth};
+      height: fit-content;
+
+      ${StyledFieldValue} {
+        word-break: break-word;
+        overflow: auto;
+      }
+
+      ${StyledInlineFieldValueItemV2}, ${StyledStackedFieldValue} {
+        width: 100%;
+      }
+
+      ${StyledInlineFieldValueItemV2} {
+        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);
+        grid-template-rows: max-content;
+        column-gap: calc(${fieldValueGapMultiplier} * ${spacing});
+      }
+
+      /* Stacked Label Styles */
+      ${labelTop &&
+        css `
+        grid-template-columns: minmax(0, 1fr);
+        row-gap: 0;
+
+        dt {
+          max-width: 100%;
+        }
+
+        ${!isValueComparison &&
+            css `
+          ${StyledStackedFieldValue}:not(:first-child) {
+            margin-block-start: calc(${rowGapMultiplier} * ${spacing});
+          }
+        `}
+      `}
+
+      /* Value Comparison Styles */
+      ${isValueComparison &&
+        css `
+        display: grid;
+        grid-template-columns: auto auto;
+        column-gap: 0;
+        row-gap: calc(0.5 * ${spacing});
+
+        > dd {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+        }
+      `}
+
+      /* Responsive behavior */
+      ${narrow &&
+        !labelTop &&
+        !isValueComparison &&
+        css `
+        ${StyledInlineFieldValueItemV2} {
+          grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);
+        }
+
+        dd {
+          min-width: 50%;
+        }
+      `}
+    `;
+});
+StyledDetailsListV2.defaultProps = defaultThemeProp;
+//# sourceMappingURL=DetailsV2.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsV2.styles.js","sourceRoot":"","sources":["../../../src/components/DetailsV2/DetailsV2.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, type DefaultTheme } from 'styled-components';\n\nimport {\n  type StyledFieldValueListProps,\n  type FontSize,\n  type PropsWithDefaults,\n  calculateFontSize,\n  defaultThemeProp,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledFieldValueList,\n  StyledIcon,\n  useDirection,\n  StyledButtonLink\n} from '@pega/cosmos-react-core';\n\nimport type { DetailsV2TwoColumnArrangement } from './DetailsV2';\n\ninterface StyledDetailsV2ListProps extends StyledFieldValueListProps {\n  /** Whether individual list items all have labels stacks on top */\n  stacked?: boolean;\n  /** The character length applied to all list labels */\n  labelLength?: number;\n  /**\n   * Whether to apply narrow list styles\n   * @default false\n   */\n  narrow?: boolean;\n  theme: DefaultTheme;\n}\n\ninterface StyledDetailColumnsV2Props {\n  /**\n   * Number of columns in the list\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /**\n   * Arrangement of two-column configurations.\n   */\n  arrangement?: DetailsV2TwoColumnArrangement;\n  theme: DefaultTheme;\n}\n\ntype StyledDetailsListV2PropsWithDefaults = PropsWithDefaults<StyledDetailsV2ListProps>;\n\nconst rowGapMultiplier = 1;\nexport const columnGapMultiplier = 5.5;\nexport const oneColumnDetailsColumnWidth = '100ch';\nexport const multiColumnDetailsColumnWidth = '80ch';\n\nexport const StyledFieldValueGroupLabelV2 = styled.div(({ theme }) => {\n  const {\n    base: { spacing, animation }\n  } = theme;\n  const { rtl } = useDirection();\n\n  return css`\n    width: 100%;\n    grid-column: 1 / -1;\n    margin-block-end: calc(${rowGapMultiplier} * ${spacing});\n\n    ${StyledButtonLink} ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    ${StyledButtonLink}[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    ${StyledButtonLink}[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledFieldValueGroupLabelV2.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescriptionV2 = styled.div(({ theme }) => {\n  const {\n    base: {\n      spacing,\n      'content-width': { xl }\n    }\n  } = theme;\n\n  return css`\n    max-width: ${xl};\n    margin-block-end: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledDetailDescriptionV2.defaultProps = defaultThemeProp;\n\nconst spacingTop = (spacing: string) => {\n  return css`\n    > ${StyledFieldValueGroupLabelV2} {\n      margin-block-start: calc((1.5 * ${rowGapMultiplier}) * ${spacing});\n    }\n\n    > ${StyledDetailDescriptionV2}:first-child {\n      margin-block-start: calc(1.5 * ${spacing});\n    }\n  `;\n};\n\nexport const StyledDetailsV2 = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    &:not(:first-child) {\n      ${spacingTop(spacing)}\n    }\n  `;\n});\n\nStyledDetailsV2.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumnV2 = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(${rowGapMultiplier} * ${spacing});\n    width: 100%;\n  `;\n});\n\nStyledDetailColumnV2.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumnsV2 = styled.div<StyledDetailColumnsV2Props>(\n  ({ theme, arrangement, columnCount = 1 }) => {\n    const {\n      base: { spacing }\n    } = theme;\n\n    return css`\n      width: 100%;\n\n      ${columnCount === 2 &&\n      !arrangement &&\n      css`\n        flex-wrap: wrap;\n      `}\n\n      ${columnCount === 1 &&\n      css`\n        flex-direction: column;\n        row-gap: calc(${rowGapMultiplier} * ${spacing});\n      `};\n\n      /* Column Widths */\n      > ${StyledDetailColumnV2} {\n        overflow: hidden;\n\n        ${columnCount === 3 &&\n        css`\n          width: ${multiColumnDetailsColumnWidth};\n          max-width: calc(33.33% - (${columnGapMultiplier} * ${spacing} * 2) / 3);\n        `}\n\n        ${columnCount === 2 &&\n        css`\n          width: calc(50% - (${columnGapMultiplier} * ${spacing}) / 2);\n          max-width: unset;\n\n          &:nth-child(3) > ${StyledDetailsV2}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n\n        ${columnCount !== 1 &&\n        css`\n          ${arrangement === 'narrowWide' &&\n          css`\n            &:nth-child(2) {\n              width: calc(\n                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n              );\n              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n            }\n          `}\n\n          ${arrangement === 'wideNarrow' &&\n          css`\n            &:nth-child(1) {\n              width: calc(\n                ${multiColumnDetailsColumnWidth} * 2 + ${columnGapMultiplier} * ${spacing}\n              );\n              max-width: calc(66.66% - (${columnGapMultiplier} * ${spacing}) / 3);\n            }\n          `}\n        `}\n\n        ${columnCount === 1 &&\n        css`\n          width: 100%;\n          max-width: 100%;\n\n          &:not(:first-child) > ${StyledDetailsV2}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n      }\n    `;\n  }\n);\n\nStyledDetailColumnsV2.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailListV2 = styled.dl(({ theme }) => {\n  const {\n    base: { spacing, palette }\n  } = theme;\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    max-width: calc(${multiColumnDetailsColumnWidth} * 3 + ${columnGapMultiplier} * ${spacing} * 2);\n    padding-block-end: calc(1.5 * ${spacing});\n\n    dd {\n      font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n      font-weight: ${theme.components.text.h1['font-weight']};\n    }\n\n    + hr {\n      border-top: unset;\n      border-radius: unset;\n      border-style: unset;\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      margin-block-end: calc(1.5 * ${spacing});\n    }\n  `;\n});\n\nStyledHighlightedDetailListV2.defaultProps = defaultThemeProp;\n\nexport const StyledInlineFieldValueItemV2 = styled.div`\n  > * {\n    min-width: 0;\n  }\n`;\n\nexport const StyledDetailsListV2 = styled(\n  StyledFieldValueList\n)<StyledDetailsListV2PropsWithDefaults>(\n  ({ stacked, labelLength, variant, theme, narrow = false }) => {\n    const {\n      base: { spacing }\n    } = theme;\n\n    const labelTop = stacked && variant !== 'value-comparison';\n    const isValueComparison = variant === 'value-comparison';\n    const fieldValueGapMultiplier = 2;\n\n    return css`\n      /* Field Grid Styles */\n      display: flex;\n      flex-direction: column;\n      row-gap: calc(${rowGapMultiplier} * ${spacing});\n      width: 100%;\n      max-width: ${oneColumnDetailsColumnWidth};\n      height: fit-content;\n\n      ${StyledFieldValue} {\n        word-break: break-word;\n        overflow: auto;\n      }\n\n      ${StyledInlineFieldValueItemV2}, ${StyledStackedFieldValue} {\n        width: 100%;\n      }\n\n      ${StyledInlineFieldValueItemV2} {\n        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n        grid-template-rows: max-content;\n        column-gap: calc(${fieldValueGapMultiplier} * ${spacing});\n      }\n\n      /* Stacked Label Styles */\n      ${labelTop &&\n      css`\n        grid-template-columns: minmax(0, 1fr);\n        row-gap: 0;\n\n        dt {\n          max-width: 100%;\n        }\n\n        ${!isValueComparison &&\n        css`\n          ${StyledStackedFieldValue}:not(:first-child) {\n            margin-block-start: calc(${rowGapMultiplier} * ${spacing});\n          }\n        `}\n      `}\n\n      /* Value Comparison Styles */\n      ${isValueComparison &&\n      css`\n        display: grid;\n        grid-template-columns: auto auto;\n        column-gap: 0;\n        row-gap: calc(0.5 * ${spacing});\n\n        > dd {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-end;\n        }\n      `}\n\n      /* Responsive behavior */\n      ${narrow &&\n      !labelTop &&\n      !isValueComparison &&\n      css`\n        ${StyledInlineFieldValueItemV2} {\n          grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);\n        }\n\n        dd {\n          min-width: 50%;\n        }\n      `}\n    `;\n  }\n);\n\nStyledDetailsListV2.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,2 @@
+export declare const getDetailsV2TestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "description", "highlighted-data", "data", "expand-collapse"]>;
+//# sourceMappingURL=DetailsV2.test-ids.d.ts.map

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

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

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

@@ -0,0 +1,9 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getDetailsV2TestIds = createTestIds('detailsV2', [
+    'heading',
+    'description',
+    'highlighted-data',
+    'data',
+    'expand-collapse'
+]);
+//# sourceMappingURL=DetailsV2.test-ids.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsV2.test-ids.js","sourceRoot":"","sources":["../../../src/components/DetailsV2/DetailsV2.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC,WAAW,EAAE;IAC5D,SAAS;IACT,aAAa;IACb,kBAAkB;IAClB,MAAM;IACN,iBAAiB;CACT,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getDetailsV2TestIds = createTestIds('detailsV2', [\n  'heading',\n  'description',\n  'highlighted-data',\n  'data',\n  'expand-collapse'\n] as const);\n"]}

package/lib/components/DetailsV2/DetailsV2Context.d.ts

@@ -0,0 +1,9 @@
+export interface DetailsV2ContextValue {
+    longestLabelLength?: number;
+    setLongestLabelLength?: (val: number) => void;
+    mobileView?: boolean;
+    depth?: number;
+}
+declare const DetailsV2Context: import("react").Context<DetailsV2ContextValue>;
+export default DetailsV2Context;
+//# sourceMappingURL=DetailsV2Context.d.ts.map

package/lib/components/DetailsV2/DetailsV2Context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsV2Context.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsV2/DetailsV2Context.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,qBAAqB;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,gBAAgB,gDAKpB,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/lib/components/DetailsV2/DetailsV2Context.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+const DetailsV2Context = createContext({
+    longestLabelLength: undefined,
+    setLongestLabelLength: () => { },
+    mobileView: false,
+    depth: 1
+});
+export default DetailsV2Context;
+//# sourceMappingURL=DetailsV2Context.js.map

package/lib/components/DetailsV2/DetailsV2Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsV2Context.js","sourceRoot":"","sources":["../../../src/components/DetailsV2/DetailsV2Context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAStC,MAAM,gBAAgB,GAAG,aAAa,CAAwB;IAC5D,kBAAkB,EAAE,SAAS;IAC7B,qBAAqB,EAAE,GAAG,EAAE,GAAE,CAAC;IAC/B,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,CAAC;CACT,CAAC,CAAC;AAEH,eAAe,gBAAgB,CAAC","sourcesContent":["import { createContext } from 'react';\n\nexport interface DetailsV2ContextValue {\n  longestLabelLength?: number;\n  setLongestLabelLength?: (val: number) => void;\n  mobileView?: boolean;\n  depth?: number;\n}\n\nconst DetailsV2Context = createContext<DetailsV2ContextValue>({\n  longestLabelLength: undefined,\n  setLongestLabelLength: () => {},\n  mobileView: false,\n  depth: 1\n});\n\nexport default DetailsV2Context;\n"]}

package/lib/components/DetailsV2/DetailsV2List.d.ts

@@ -0,0 +1,15 @@
+import type { Ref } from 'react';
+import { type Attributes, type ElementTag, type FieldValueListItem, type NoChildrenProp } from '@pega/cosmos-react-core';
+type WithAttributes<Tag extends ElementTag, Props> = Props & Omit<Attributes<Tag>, keyof Props>;
+export type DetailsV2ListProps = WithAttributes<'dl', NoChildrenProp & {
+    /** Field value list items */
+    items: FieldValueListItem[];
+    /** Whether to apply `value-comparison` styles to list items
+     * @default false
+     */
+    valueComparison?: boolean;
+    ref?: Ref<HTMLDListElement>;
+}>;
+declare const DetailsV2List: import("react").ForwardRefExoticComponent<Omit<DetailsV2ListProps, "ref"> & import("react").RefAttributes<HTMLDListElement>>;
+export default DetailsV2List;
+//# sourceMappingURL=DetailsV2List.d.ts.map

package/lib/components/DetailsV2/DetailsV2List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsV2List.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsV2/DetailsV2List.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EACL,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,kBAAkB,EACvB,KAAK,cAAc,EAMpB,MAAM,yBAAyB,CAAC;AAKjC,KAAK,cAAc,CAAC,GAAG,SAAS,UAAU,EAAE,KAAK,IAAI,KAAK,GAExD,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC;AAErC,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAC7C,IAAI,EACJ,cAAc,GAAG;IACf,6BAA6B;IAC7B,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B,CACF,CAAC;AAEF,QAAA,MAAM,aAAa,8HAoDlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/DetailsV2/DetailsV2List.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { forwardRef, useContext } from 'react';
+import { FieldValueItem, Grid, useBreakpoint, useConsolidatedRef } from '@pega/cosmos-react-core';
+import DetailsV2Context from './DetailsV2Context';
+import { StyledDetailsListV2, StyledInlineFieldValueItemV2 } from './DetailsV2.styles';
+const DetailsV2List = forwardRef(function DetailsV2List({ items, valueComparison = false }, ref) {
+    const { longestLabelLength, mobileView: inMobileView } = useContext(DetailsV2Context);
+    const containerRef = useConsolidatedRef(ref);
+    const isSmallOrAbove = useBreakpoint('sm');
+    const isSmContentWidthOrAbove = useBreakpoint('sm', {
+        breakpointRef: containerRef,
+        themeProp: 'content-width'
+    });
+    const isMdContentWidthOrAbove = useBreakpoint('md', {
+        breakpointRef: containerRef,
+        themeProp: 'content-width'
+    });
+    const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));
+    const applyMobileView = inMobileView || !isSmallOrAbove || !isSmContentWidthOrAbove;
+    return items.length > 0 ? (_jsx(StyledDetailsListV2, { ref: containerRef, labelLength: labelLength, stacked: applyMobileView, variant: valueComparison && !applyMobileView ? 'value-comparison' : undefined, narrow: !isMdContentWidthOrAbove, children: items.map(({ id, name, value, variant: fieldVariant, ...restProps }) => {
+            const isStacked = applyMobileView || fieldVariant === 'stacked';
+            const item = (_createElement(FieldValueItem, { ...restProps, name: name, value: value, variant: isStacked ? 'stacked' : 'inline', key: id ?? name }));
+            return isStacked || valueComparison ? (item) : (_jsx(Grid, { as: StyledInlineFieldValueItemV2, container: { cols: '16ch minmax(0, 1fr)' }, children: item }, id ?? name));
+        }) })) : null;
+});
+export default DetailsV2List;
+//# sourceMappingURL=DetailsV2List.js.map

package/lib/components/DetailsV2/DetailsV2List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsV2List.js","sourceRoot":"","sources":["../../../src/components/DetailsV2/DetailsV2List.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,EAML,cAAc,EACd,IAAI,EACJ,aAAa,EACb,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,4BAA4B,EAAE,MAAM,oBAAoB,CAAC;AAmBvF,MAAM,aAAa,GAAG,UAAU,CAC9B,SAAS,aAAa,CAAC,EAAE,KAAK,EAAE,eAAe,GAAG,KAAK,EAAE,EAAE,GAAG;IAC5D,MAAM,EAAE,kBAAkB,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACtF,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,YAAY;QAC3B,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IACH,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,YAAY;QAC3B,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,kBAAkB,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IACzE,MAAM,eAAe,GAAG,YAAY,IAAI,CAAC,cAAc,IAAI,CAAC,uBAAuB,CAAC;IAEpF,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACxB,KAAC,mBAAmB,IAClB,GAAG,EAAE,YAAY,EACjB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,eAAe,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,EAC7E,MAAM,EAAE,CAAC,uBAAuB,YAE/B,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;YACtE,MAAM,SAAS,GAAG,eAAe,IAAI,YAAY,KAAK,SAAS,CAAC;YAChE,MAAM,IAAI,GAAG,CACX,eAAC,cAAc,OACT,SAAS,EACb,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACzC,GAAG,EAAE,EAAE,IAAI,IAAI,GACf,CACH,CAAC;YAEF,OAAO,SAAS,IAAI,eAAe,CAAC,CAAC,CAAC,CACpC,IAAI,CACL,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,EAAE,EAAE,4BAA4B,EAChC,SAAS,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,YAGzC,IAAI,IAFA,EAAE,IAAI,IAAI,CAGV,CACR,CAAC;QACJ,CAAC,CAAC,GACkB,CACvB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, useContext } from 'react';\nimport type { PropsWithRef, Ref } from 'react';\n\nimport {\n  type Attributes,\n  type ElementTag,\n  type FieldValueListItem,\n  type NoChildrenProp,\n  type RefElement,\n  FieldValueItem,\n  Grid,\n  useBreakpoint,\n  useConsolidatedRef\n} from '@pega/cosmos-react-core';\n\nimport DetailsV2Context from './DetailsV2Context';\nimport { StyledDetailsListV2, StyledInlineFieldValueItemV2 } from './DetailsV2.styles';\n\ntype WithAttributes<Tag extends ElementTag, Props> = Props &\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  Omit<Attributes<Tag>, keyof Props>;\n\nexport type DetailsV2ListProps = WithAttributes<\n  'dl',\n  NoChildrenProp & {\n    /** Field value list items */\n    items: FieldValueListItem[];\n    /** Whether to apply `value-comparison` styles to list items\n     * @default false\n     */\n    valueComparison?: boolean;\n    ref?: Ref<HTMLDListElement>;\n  }\n>;\n\nconst DetailsV2List = forwardRef<RefElement<DetailsV2ListProps>, PropsWithRef<DetailsV2ListProps>>(\n  function DetailsV2List({ items, valueComparison = false }, ref) {\n    const { longestLabelLength, mobileView: inMobileView } = useContext(DetailsV2Context);\n    const containerRef = useConsolidatedRef(ref);\n    const isSmallOrAbove = useBreakpoint('sm');\n    const isSmContentWidthOrAbove = useBreakpoint('sm', {\n      breakpointRef: containerRef,\n      themeProp: 'content-width'\n    });\n    const isMdContentWidthOrAbove = useBreakpoint('md', {\n      breakpointRef: containerRef,\n      themeProp: 'content-width'\n    });\n\n    const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n    const applyMobileView = inMobileView || !isSmallOrAbove || !isSmContentWidthOrAbove;\n\n    return items.length > 0 ? (\n      <StyledDetailsListV2\n        ref={containerRef}\n        labelLength={labelLength}\n        stacked={applyMobileView}\n        variant={valueComparison && !applyMobileView ? 'value-comparison' : undefined}\n        narrow={!isMdContentWidthOrAbove}\n      >\n        {items.map(({ id, name, value, variant: fieldVariant, ...restProps }) => {\n          const isStacked = applyMobileView || fieldVariant === 'stacked';\n          const item = (\n            <FieldValueItem\n              {...restProps}\n              name={name}\n              value={value}\n              variant={isStacked ? 'stacked' : 'inline'}\n              key={id ?? name}\n            />\n          );\n\n          return isStacked || valueComparison ? (\n            item\n          ) : (\n            <Grid\n              as={StyledInlineFieldValueItemV2}\n              container={{ cols: '16ch minmax(0, 1fr)' }}\n              key={id ?? name}\n            >\n              {item}\n            </Grid>\n          );\n        })}\n      </StyledDetailsListV2>\n    ) : null;\n  }\n);\n\nexport default DetailsV2List;\n"]}

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

@@ -0,0 +1,5 @@
+export { default } from './DetailsV2';
+export { default as DetailsV2List } from './DetailsV2List';
+export { default as DetailsV2Context } from './DetailsV2Context';
+export { StyledFieldValueGroupLabelV2, StyledDetailsListV2, StyledDetailsV2, StyledHighlightedDetailListV2 } from './DetailsV2.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsV2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EACL,4BAA4B,EAC5B,mBAAmB,EACnB,eAAe,EACf,6BAA6B,EAC9B,MAAM,oBAAoB,CAAC"}

package/lib/components/DetailsV2/index.js

@@ -0,0 +1,5 @@
+export { default } from './DetailsV2';
+export { default as DetailsV2List } from './DetailsV2List';
+export { default as DetailsV2Context } from './DetailsV2Context';
+export { StyledFieldValueGroupLabelV2, StyledDetailsListV2, StyledDetailsV2, StyledHighlightedDetailListV2 } from './DetailsV2.styles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DetailsV2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EACL,4BAA4B,EAC5B,mBAAmB,EACnB,eAAe,EACf,6BAA6B,EAC9B,MAAM,oBAAoB,CAAC","sourcesContent":["export { default } from './DetailsV2';\nexport { default as DetailsV2List } from './DetailsV2List';\nexport { default as DetailsV2Context } from './DetailsV2Context';\nexport {\n  StyledFieldValueGroupLabelV2,\n  StyledDetailsListV2,\n  StyledDetailsV2,\n  StyledHighlightedDetailListV2\n} from './DetailsV2.styles';\n"]}

package/lib/index.d.ts

@@ -16,6 +16,8 @@ export { default as Confirmation } from './components/Confirmation';
 export * from './components/Confirmation';
 export { default as Details } from './components/Details';
 export * from './components/Details';
+export { default as DetailsV2 } from './components/DetailsV2';
+export * from './components/DetailsV2';
 export { default as Glimpse } from './components/Glimpse';
 export * from './components/Glimpse';
 export { default as IntelligentGuidance } from './components/IntelligentGuidance';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAChF,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAClF,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAChF,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAClF,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC"}

package/lib/index.js

@@ -17,6 +17,8 @@ export { default as Confirmation } from './components/Confirmation';
 export * from './components/Confirmation';
 export { default as Details } from './components/Details';
 export * from './components/Details';
+export { default as DetailsV2 } from './components/DetailsV2';
+export * from './components/DetailsV2';
 export { default as Glimpse } from './components/Glimpse';
 export * from './components/Glimpse';
 export { default as IntelligentGuidance } from './components/IntelligentGuidance';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAChF,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAClF,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppAnnouncement } from './components/AppAnnouncement';\nexport * from './components/AppAnnouncement';\nexport { default as Article } from './components/Article';\nexport * from './components/Article';\nexport { default as ArticleList } from './components/ArticleList';\nexport * from './components/ArticleList';\nexport { default as Assignments } from './components/Assignments';\nexport * from './components/Assignments';\nexport { default as CasePreview } from './components/CasePreview';\nexport * from './components/CasePreview';\nexport { default as CaseView } from './components/CaseView';\nexport * from './components/CaseView';\nexport { default as ConfigurableLayout } from './components/ConfigurableLayout';\nexport * from './components/ConfigurableLayout';\nexport { default as Confirmation } from './components/Confirmation';\nexport * from './components/Confirmation';\nexport { default as Details } from './components/Details';\nexport * from './components/Details';\nexport { default as Glimpse } from './components/Glimpse';\nexport * from './components/Glimpse';\nexport { default as IntelligentGuidance } from './components/IntelligentGuidance';\nexport * from './components/IntelligentGuidance';\nexport { default as InteractionNotification } from './components/InteractionNotification';\nexport { default as Predictions } from './components/Predictions';\nexport * from './components/Predictions';\nexport { default as SearchResults } from './components/SearchResults';\nexport * from './components/SearchResults';\nexport { default as Stages } from './components/Stages';\nexport * from './components/Stages';\nexport { default as Stakeholders } from './components/Stakeholders';\nexport * from './components/Stakeholders';\nexport { default as Tags } from './components/Tags';\nexport * from './components/Tags';\nexport { default as Tasks } from './components/Tasks';\nexport * from './components/Tasks';\nexport { default as Timeline } from './components/Timeline';\nexport * from './components/Timeline';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAChF,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAClF,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppAnnouncement } from './components/AppAnnouncement';\nexport * from './components/AppAnnouncement';\nexport { default as Article } from './components/Article';\nexport * from './components/Article';\nexport { default as ArticleList } from './components/ArticleList';\nexport * from './components/ArticleList';\nexport { default as Assignments } from './components/Assignments';\nexport * from './components/Assignments';\nexport { default as CasePreview } from './components/CasePreview';\nexport * from './components/CasePreview';\nexport { default as CaseView } from './components/CaseView';\nexport * from './components/CaseView';\nexport { default as ConfigurableLayout } from './components/ConfigurableLayout';\nexport * from './components/ConfigurableLayout';\nexport { default as Confirmation } from './components/Confirmation';\nexport * from './components/Confirmation';\nexport { default as Details } from './components/Details';\nexport * from './components/Details';\nexport { default as DetailsV2 } from './components/DetailsV2';\nexport * from './components/DetailsV2';\nexport { default as Glimpse } from './components/Glimpse';\nexport * from './components/Glimpse';\nexport { default as IntelligentGuidance } from './components/IntelligentGuidance';\nexport * from './components/IntelligentGuidance';\nexport { default as InteractionNotification } from './components/InteractionNotification';\nexport { default as Predictions } from './components/Predictions';\nexport * from './components/Predictions';\nexport { default as SearchResults } from './components/SearchResults';\nexport * from './components/SearchResults';\nexport { default as Stages } from './components/Stages';\nexport * from './components/Stages';\nexport { default as Stakeholders } from './components/Stakeholders';\nexport * from './components/Stakeholders';\nexport { default as Tags } from './components/Tags';\nexport * from './components/Tags';\nexport { default as Tasks } from './components/Tasks';\nexport * from './components/Tasks';\nexport { default as Timeline } from './components/Timeline';\nexport * from './components/Timeline';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "6.3.1-1",
+  "version": "6.4.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pegasystems/cosmos-react.git",
@@ -19,7 +19,7 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "6.3.1-1",
+    "@pega/cosmos-react-core": "6.4.1",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "@types/styled-components": "^5.1.26",