@pega/cosmos-react-work 7.0.0-build.17.9 → 7.0.0-build.18.0

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

@@ -1,50 +1,40 @@
 import type { DefaultTheme } from 'styled-components';
 import type { StyledFieldValueListProps } from '@pega/cosmos-react-core';
-interface StyledDetailListProps extends StyledFieldValueListProps {
+import type { DetailsTwoColumnArrangement } from './Details';
+interface StyledDetailsListProps extends StyledFieldValueListProps {
     /** Whether individual list items all have labels stacks on top */
     stacked?: boolean;
-    /** Whether the list is a flex row of other lists */
-    flex?: boolean;
-    /** Whether the list is nested */
-    nested?: boolean;
     /** The character length applied to all list labels */
     labelLength?: number;
     /**
-     * Whether the list is wrapped to 1 column
+     * Whether to apply narrow list styles
      * @default false
      */
-    wrapped?: boolean;
+    narrow?: boolean;
+    theme: DefaultTheme;
+}
+interface StyledDetailColumnsProps {
     /**
      * Number of columns in the list
      * @default 1
      */
     columnCount?: 1 | 2 | 3;
     /**
-     * Whether to apply narrow list styles
-     * @default false
+     * Arrangement of two-column configurations.
      */
-    narrow?: boolean;
+    arrangement?: DetailsTwoColumnArrangement;
     theme: DefaultTheme;
 }
-export declare const colCountChWidth: {
-    '1': {
-        containerWidth: number;
-        colWidth: number;
-    };
-    '2': {
-        containerWidth: number;
-        colWidth: number;
-    };
-    '3': {
-        containerWidth: number;
-        colWidth: number;
-    };
-};
-export declare const flexGapProp = 5.5;
+export declare const columnGapMultiplier = 5.5;
+export declare const oneColumnDetailsColumnWidth = "100ch";
+export declare const multiColumnDetailsColumnWidth = "80ch";
 export declare const StyledFieldValueGroupLabel: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
 export declare const StyledDetailDescription: 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 & Pick<StyledDetailListProps, "flex" | "theme" | "variant" | "narrow" | "stacked" | "nested" | "labelLength"> & Required<Pick<StyledDetailListProps, "columnCount" | "wrapped">>, never>;
+export declare const StyledDetailColumn: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledDetailColumns: import("styled-components").StyledComponent<"div", DefaultTheme, StyledDetailColumnsProps, never>;
+export declare const StyledHighlightedDetailList: import("styled-components").StyledComponent<"dl", DefaultTheme, {}, never>;
+export declare const StyledInlineFieldValueItem: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledDetailsList: import("styled-components").StyledComponent<"dl", DefaultTheme, StyledFieldValueListProps & Pick<StyledDetailsListProps, keyof StyledDetailsListProps> & Required<Pick<StyledDetailsListProps, never>>, 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":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAYtD,OAAO,KAAK,EACV,yBAAyB,EAG1B,MAAM,yBAAyB,CAAC;AAEjC,UAAU,qBAAsB,SAAQ,yBAAyB;IAC/D,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAa3B,CAAC;AAEF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,0BAA0B,6EAyBrC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6EAYlC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,aAAa,6EAAe,CAAC;AAE1C,eAAO,MAAM,gBAAgB,oRA6I3B,CAAC"}
+{"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAYtD,OAAO,KAAK,EACV,yBAAyB,EAG1B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,WAAW,CAAC;AAE7D,UAAU,sBAAuB,SAAQ,yBAAyB;IAChE,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,wBAAwB;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,2BAA2B,CAAC;IAC1C,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,0BAA0B,6EAuBrC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6EAYlC,CAAC;AAgBH,eAAO,MAAM,aAAa,6EAUxB,CAAC;AAIH,eAAO,MAAM,kBAAkB,6EAW7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mGA4E/B,CAAC;AAIF,eAAO,MAAM,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,0BAA0B,6EAItC,CAAC;AAEF,eAAO,MAAM,iBAAiB,gNAyF5B,CAAC"}

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

@@ -1,31 +1,16 @@
 import styled, { css } from 'styled-components';
 import { calculateFontSize, defaultThemeProp, StyledFieldValue, StyledStackedFieldValue, StyledFieldValueList, StyledIcon, useDirection, StyledButtonLink } from '@pega/cosmos-react-core';
-const verticalGapSpacingMultiplier = 1;
-// colWidth reduces by 20% as column count increases
-export const colCountChWidth = {
-    '1': {
-        containerWidth: 100,
-        colWidth: 100
-    },
-    '2': {
-        containerWidth: 80 * 2,
-        colWidth: 80
-    },
-    '3': {
-        containerWidth: 64 * 3,
-        colWidth: 64
-    }
-};
-export const flexGapProp = 5.5;
+const rowGapMultiplier = 1;
+export const columnGapMultiplier = 5.5;
+export const oneColumnDetailsColumnWidth = '100ch';
+export const multiColumnDetailsColumnWidth = '80ch';
 export const StyledFieldValueGroupLabel = styled.div(({ theme }) => {
     const { base: { spacing, animation } } = theme;
     const { rtl } = useDirection();
     return css `
     width: 100%;
-    grid-column-start: 1;
-    grid-column-end: -1;
-    margin-block-end: calc(0.5 * ${spacing});
-    margin-block-start: calc(1.5 * ${spacing});
+    grid-column: 1 / -1;
+    margin-block-end: calc(${rowGapMultiplier} * ${spacing});
 
     ${StyledButtonLink} ${StyledIcon} {
       transition: transform ${animation.speed} ${animation.timing.ease};
@@ -45,15 +30,118 @@ export const StyledDetailDescription = styled.div(({ theme }) => {
     const { base: { spacing, 'content-width': { xl } } } = theme;
     return css `
     max-width: ${xl};
-    margin-block: calc(1.5 * ${spacing});
+    margin-block-end: calc(1.5 * ${spacing});
   `;
 });
 StyledDetailDescription.defaultProps = defaultThemeProp;
+const spacingTop = (spacing) => {
+    return css `
+    > ${StyledFieldValueGroupLabel} {
+      margin-block-start: calc((1.5 * ${rowGapMultiplier}) * ${spacing});
+    }
+
+    > ${StyledDetailDescription}:first-child {
+      margin-block-start: calc(1.5 * ${spacing});
+    }
+  `;
+};
+export const StyledDetails = styled.div(({ theme }) => {
+    const { base: { spacing } } = theme;
+    return css `
+    &:not(:first-child) {
+      ${spacingTop(spacing)}
+    }
+  `;
+});
+StyledDetails.defaultProps = defaultThemeProp;
+export const StyledDetailColumn = styled.div(({ theme }) => {
+    const { base: { spacing } } = theme;
+    return css `
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(${rowGapMultiplier} * ${spacing});
+    width: 100%;
+  `;
+});
+StyledDetailColumn.defaultProps = defaultThemeProp;
+export const StyledDetailColumns = 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 */
+      > ${StyledDetailColumn} {
+        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) > ${StyledDetails}: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) > ${StyledDetails}:first-child {
+            ${spacingTop(spacing)}
+          }
+        `}
+      }
+    `;
+});
+StyledDetailColumns.defaultProps = defaultThemeProp;
 export const StyledHighlightedDetailList = styled.dl(({ theme }) => {
     const { base: { spacing, palette } } = theme;
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
-    max-width: ${colCountChWidth[3].containerWidth}ch;
+    max-width: calc(${multiColumnDetailsColumnWidth} * 3 + ${columnGapMultiplier} * ${spacing} * 2);
     padding-block-end: calc(1.5 * ${spacing});
 
     dd {
@@ -71,134 +159,87 @@ export const StyledHighlightedDetailList = styled.dl(({ theme }) => {
   `;
 });
 StyledHighlightedDetailList.defaultProps = defaultThemeProp;
-export const StyledDetails = styled.div ``;
-export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, nested, labelLength, variant, theme, wrapped = false, columnCount = 1, narrow = false }) => {
-    const { base: { spacing } } = theme;
+export const StyledInlineFieldValueItem = styled.div `
+  > * {
+    min-width: 0;
+  }
+`;
+export const StyledDetailsList = styled(StyledFieldValueList)(({ stacked, labelLength, variant, theme, narrow = false }) => {
+    const { base: { spacing }, components: { details: { 'field-label': fieldLabelPosition } } } = theme;
+    const labelTop = (stacked || fieldLabelPosition === 'stacked') && variant !== 'value-comparison';
     const isValueComparison = variant === 'value-comparison';
-    const containerWidthCh = colCountChWidth[columnCount].containerWidth;
-    const columnWidthCh = colCountChWidth[columnCount].colWidth;
-    const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;
+    const fieldValueGapMultiplier = 2;
     return css `
-    /* Top Level Styles */
-    ${!nested &&
-        css `
-      ${StyledFieldValue} {
-        word-break: break-word;
-        overflow: auto;
-      }
+    /* Field Grid Styles */
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(${rowGapMultiplier} * ${spacing});
+    width: 100%;
+    max-width: ${oneColumnDetailsColumnWidth};
+    height: fit-content;
 
-      ${StyledStackedFieldValue} {
-        grid-column: 1 / -1;
-      }
-    `}
+    ${StyledFieldValue} {
+      word-break: break-word;
+      overflow: auto;
+    }
 
-    /* Nested List */
-      ${nested &&
-        css `
-      grid-column: 1 / -1;
-    `}
+    ${StyledInlineFieldValueItem}, ${StyledStackedFieldValue} {
+      width: 100%;
+    }
 
-      /* As Field Grid */
-      ${!flex &&
-        css `
-      display: grid;
+    ${StyledInlineFieldValueItem} {
       grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);
-      column-gap: calc(2 * ${spacing});
-      row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});
-
-      ${stacked &&
-            css `
-        grid-template-columns: minmax(0, 1fr);
-        row-gap: 0;
-
-        ${!isValueComparison &&
-                css `
-          > dt,
-          ${StyledStackedFieldValue} {
-            margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
-          }
-        `}
-      `}
-
-      > ${StyledStackedFieldValue} {
-        max-width: ${containerWidthCh}ch;
-      }
-
-      > ${StyledFieldValue} {
-        max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));
-
-        ${!isValueComparison &&
-            css `
-          width: 100%;
-        `}
-      }
+      grid-template-rows: max-content;
+      column-gap: calc(${fieldValueGapMultiplier} * ${spacing});
+    }
 
-      ${isValueComparison &&
-            css `
-        grid-template-columns: auto auto;
-        column-gap: 0;
-        row-gap: calc(0.5 * ${spacing});
-        max-width: ${containerWidthCh}ch;
-
-        > dd {
-          display: flex;
-          flex-direction: column;
-          justify-content: flex-end;
-        }
-      `}
+    /* Stacked Label Styles */
+    ${labelTop &&
+        css `
+      grid-template-columns: minmax(0, 1fr);
+      row-gap: 0;
 
-      > ${StyledDetails} {
-        grid-column: 1 / -1;
+      dt {
+        max-width: 100%;
       }
-    `}
-
-      /* As Flex Container */
-      ${flex &&
-        css `
-      display: flex;
-      flex-direction: ${wrapped ? 'column' : 'row'};
-      column-gap: calc(${flexGapProp} * ${spacing});
-      align-items: flex-start;
-      max-width: ${containerWidthCh}ch;
 
-      ${!wrapped &&
+      ${!isValueComparison &&
             css `
-        > * {
-          width: 100%;
-          max-width: ${columnWidthCh}%;
+        ${StyledStackedFieldValue}:not(:first-child) {
+          margin-block-start: calc(${rowGapMultiplier} * ${spacing});
         }
       `}
-
-      > ${StyledDetails} {
-        width: 100%;
-
-        ${wrapped &&
-            !stacked &&
-            css `
-          + ${StyledDetails} > ${StyledDetailList}:first-child {
-            margin-block-start: ${theme.base.spacing};
-          }
-        `}
-      }
     `}
 
-      /* Key / Group Label Spacing */
-      ${stacked &&
-        !isValueComparison &&
+    /* Value Comparison Styles */
+      ${isValueComparison &&
         css `
-      > dt {
-        margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
+      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 &&
-        !stacked &&
+        !labelTop &&
         !isValueComparison &&
         css `
-      grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);
+      ${StyledInlineFieldValueItem} {
+        grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);
+      }
+
+      dd {
+        min-width: 50%;
+      }
     `}
   `;
 });
-StyledDetailList.defaultProps = defaultThemeProp;
+StyledDetailsList.defaultProps = defaultThemeProp;
 //# sourceMappingURL=Details.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledFieldValueList,\n  StyledIcon,\n  useDirection,\n  StyledButtonLink\n} from '@pega/cosmos-react-core';\nimport type {\n  StyledFieldValueListProps,\n  FontSize,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\ninterface StyledDetailListProps extends StyledFieldValueListProps {\n  /** Whether individual list items all have labels stacks on top */\n  stacked?: boolean;\n  /** Whether the list is a flex row of other lists */\n  flex?: boolean;\n  /** Whether the list is nested */\n  nested?: boolean;\n  /** The character length applied to all list labels */\n  labelLength?: number;\n  /**\n   * Whether the list is wrapped to 1 column\n   * @default false\n   */\n  wrapped?: boolean;\n  /**\n   * Number of columns in the list\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /**\n   * Whether to apply narrow list styles\n   * @default false\n   */\n  narrow?: boolean;\n  theme: DefaultTheme;\n}\n\ntype StyledDetailListPropsWithDefaults = PropsWithDefaults<\n  StyledDetailListProps,\n  'wrapped' | 'columnCount'\n>;\n\nconst verticalGapSpacingMultiplier = 1;\n\n// colWidth reduces by 20% as column count increases\nexport const colCountChWidth = {\n  '1': {\n    containerWidth: 100,\n    colWidth: 100\n  },\n  '2': {\n    containerWidth: 80 * 2,\n    colWidth: 80\n  },\n  '3': {\n    containerWidth: 64 * 3,\n    colWidth: 64\n  }\n};\n\nexport const flexGapProp = 5.5;\n\nexport const StyledFieldValueGroupLabel = 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-start: 1;\n    grid-column-end: -1;\n    margin-block-end: calc(0.5 * ${spacing});\n    margin-block-start: calc(1.5 * ${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\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = 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: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = 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: ${colCountChWidth[3].containerWidth}ch;\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\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledDetails = styled.div``;\n\nexport const StyledDetailList = styled(StyledFieldValueList)<StyledDetailListPropsWithDefaults>(({\n  stacked,\n  flex,\n  nested,\n  labelLength,\n  variant,\n  theme,\n  wrapped = false,\n  columnCount = 1,\n  narrow = false\n}): any => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  const isValueComparison = variant === 'value-comparison';\n  const containerWidthCh = colCountChWidth[columnCount].containerWidth;\n  const columnWidthCh = colCountChWidth[columnCount].colWidth;\n  const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;\n\n  return css`\n    /* Top Level Styles */\n    ${!nested &&\n    css`\n      ${StyledFieldValue} {\n        word-break: break-word;\n        overflow: auto;\n      }\n\n      ${StyledStackedFieldValue} {\n        grid-column: 1 / -1;\n      }\n    `}\n\n    /* Nested List */\n      ${nested &&\n    css`\n      grid-column: 1 / -1;\n    `}\n\n      /* As Field Grid */\n      ${!flex &&\n    css`\n      display: grid;\n      grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n      column-gap: calc(2 * ${spacing});\n      row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});\n\n      ${stacked &&\n      css`\n        grid-template-columns: minmax(0, 1fr);\n        row-gap: 0;\n\n        ${!isValueComparison &&\n        css`\n          > dt,\n          ${StyledStackedFieldValue} {\n            margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n          }\n        `}\n      `}\n\n      > ${StyledStackedFieldValue} {\n        max-width: ${containerWidthCh}ch;\n      }\n\n      > ${StyledFieldValue} {\n        max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));\n\n        ${!isValueComparison &&\n        css`\n          width: 100%;\n        `}\n      }\n\n      ${isValueComparison &&\n      css`\n        grid-template-columns: auto auto;\n        column-gap: 0;\n        row-gap: calc(0.5 * ${spacing});\n        max-width: ${containerWidthCh}ch;\n\n        > dd {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-end;\n        }\n      `}\n\n      > ${StyledDetails} {\n        grid-column: 1 / -1;\n      }\n    `}\n\n      /* As Flex Container */\n      ${flex &&\n    css`\n      display: flex;\n      flex-direction: ${wrapped ? 'column' : 'row'};\n      column-gap: calc(${flexGapProp} * ${spacing});\n      align-items: flex-start;\n      max-width: ${containerWidthCh}ch;\n\n      ${!wrapped &&\n      css`\n        > * {\n          width: 100%;\n          max-width: ${columnWidthCh}%;\n        }\n      `}\n\n      > ${StyledDetails} {\n        width: 100%;\n\n        ${wrapped &&\n        !stacked &&\n        css`\n          + ${StyledDetails} > ${StyledDetailList}:first-child {\n            margin-block-start: ${theme.base.spacing};\n          }\n        `}\n      }\n    `}\n\n      /* Key / Group Label Spacing */\n      ${stacked &&\n    !isValueComparison &&\n    css`\n      > dt {\n        margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n      }\n    `}\n\n      /* Responsive behavior */\n      ${narrow &&\n    !stacked &&\n    !isValueComparison &&\n    css`\n      grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);\n    `}\n  `;\n});\n\nStyledDetailList.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledFieldValueList,\n  StyledIcon,\n  useDirection,\n  StyledButtonLink\n} from '@pega/cosmos-react-core';\nimport type {\n  StyledFieldValueListProps,\n  FontSize,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nimport type { DetailsTwoColumnArrangement } from './Details';\n\ninterface StyledDetailsListProps 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 StyledDetailColumnsProps {\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?: DetailsTwoColumnArrangement;\n  theme: DefaultTheme;\n}\n\ntype StyledDetailsListPropsWithDefaults = PropsWithDefaults<StyledDetailsListProps>;\n\nconst rowGapMultiplier = 1;\nexport const columnGapMultiplier = 5.5;\nexport const oneColumnDetailsColumnWidth = '100ch';\nexport const multiColumnDetailsColumnWidth = '80ch';\n\nexport const StyledFieldValueGroupLabel = 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\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledDetailDescription = 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\nStyledDetailDescription.defaultProps = defaultThemeProp;\n\nconst spacingTop = (spacing: string) => {\n  return css`\n    > ${StyledFieldValueGroupLabel} {\n      margin-block-start: calc((1.5 * ${rowGapMultiplier}) * ${spacing});\n    }\n\n    > ${StyledDetailDescription}:first-child {\n      margin-block-start: calc(1.5 * ${spacing});\n    }\n  `;\n};\n\nexport const StyledDetails = 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\nStyledDetails.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumn = 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\nStyledDetailColumn.defaultProps = defaultThemeProp;\n\nexport const StyledDetailColumns = styled.div<StyledDetailColumnsProps>(\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      > ${StyledDetailColumn} {\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) > ${StyledDetails}: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) > ${StyledDetails}:first-child {\n            ${spacingTop(spacing)}\n          }\n        `}\n      }\n    `;\n  }\n);\n\nStyledDetailColumns.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = 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\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledInlineFieldValueItem = styled.div`\n  > * {\n    min-width: 0;\n  }\n`;\n\nexport const StyledDetailsList = styled(StyledFieldValueList)<StyledDetailsListPropsWithDefaults>(({\n  stacked,\n  labelLength,\n  variant,\n  theme,\n  narrow = false\n}) => {\n  const {\n    base: { spacing },\n    components: {\n      details: { 'field-label': fieldLabelPosition }\n    }\n  } = theme;\n\n  const labelTop = (stacked || fieldLabelPosition === '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    ${StyledInlineFieldValueItem}, ${StyledStackedFieldValue} {\n      width: 100%;\n    }\n\n    ${StyledInlineFieldValueItem} {\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      ${StyledInlineFieldValueItem} {\n        grid-template-columns: minmax(0, ${labelLength}ch) minmax(50%, 1fr);\n      }\n\n      dd {\n        min-width: 50%;\n      }\n    `}\n  `;\n});\n\nStyledDetailsList.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,14 @@
+import type { Ref } from 'react';
+import type { FieldValueListItem, NoChildrenProp, WithAttributes } from '@pega/cosmos-react-core';
+export type DetailsListProps = 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 DetailsList: import("react").ForwardRefExoticComponent<Omit<DetailsListProps, "ref"> & import("react").RefAttributes<HTMLDListElement>>;
+export default DetailsList;
+//# sourceMappingURL=DetailsList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsList.d.ts","sourceRoot":"","sources":["../../../src/components/Details/DetailsList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,GAAG,EAAE,MAAM,OAAO,CAAC;AAS/C,OAAO,KAAK,EACV,kBAAkB,EAClB,cAAc,EAEd,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAC3C,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,WAAW,4HAyDhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Details/DetailsList.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { forwardRef, useContext } from 'react';
+import { FieldValueItem, Grid, useBreakpoint, useConsolidatedRef, useTheme } from '@pega/cosmos-react-core';
+import DetailsContext from './DetailsContext';
+import { StyledDetailsList, StyledInlineFieldValueItem } from './Details.styles';
+const DetailsList = forwardRef(function DetailsList({ items, valueComparison = false }, ref) {
+    const { components: { details: { 'field-label': fieldLabelPosition } } } = useTheme();
+    const { longestLabelLength, mobileView: inMobileView } = useContext(DetailsContext);
+    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(StyledDetailsList, { 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' ||
+                (fieldLabelPosition === 'stacked' && !valueComparison);
+            const item = (_createElement(FieldValueItem, { ...restProps, name: name, value: value, variant: isStacked ? 'stacked' : 'inline', key: id ?? name }));
+            return isStacked || valueComparison ? (item) : (_jsx(Grid, { as: StyledInlineFieldValueItem, container: { cols: '16ch minmax(0, 1fr)' }, children: item }));
+        }) })) : null;
+});
+export default DetailsList;
+//# sourceMappingURL=DetailsList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsList.js","sourceRoot":"","sources":["../../../src/components/Details/DetailsList.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,EACL,cAAc,EACd,IAAI,EACJ,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAQjC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAejF,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,eAAe,GAAG,KAAK,EAAE,EAAE,GAAG;IAC1D,MAAM,EACJ,UAAU,EAAE,EACV,OAAO,EAAE,EAAE,aAAa,EAAE,kBAAkB,EAAE,EAC/C,EACF,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,EAAE,kBAAkB,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IACpF,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,iBAAiB,IAChB,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,GACb,eAAe;gBACf,YAAY,KAAK,SAAS;gBAC1B,CAAC,kBAAkB,KAAK,SAAS,IAAI,CAAC,eAAe,CAAC,CAAC;YAEzD,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,IAAC,EAAE,EAAE,0BAA0B,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,YAC7E,IAAI,GACA,CACR,CAAC;QACJ,CAAC,CAAC,GACgB,CACrB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, useContext } from 'react';\nimport type { PropsWithRef, Ref } from 'react';\n\nimport {\n  FieldValueItem,\n  Grid,\n  useBreakpoint,\n  useConsolidatedRef,\n  useTheme\n} from '@pega/cosmos-react-core';\nimport type {\n  FieldValueListItem,\n  NoChildrenProp,\n  RefElement,\n  WithAttributes\n} from '@pega/cosmos-react-core';\n\nimport DetailsContext from './DetailsContext';\nimport { StyledDetailsList, StyledInlineFieldValueItem } from './Details.styles';\n\nexport type DetailsListProps = 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 DetailsList = forwardRef<RefElement<DetailsListProps>, PropsWithRef<DetailsListProps>>(\n  function DetailsList({ items, valueComparison = false }, ref) {\n    const {\n      components: {\n        details: { 'field-label': fieldLabelPosition }\n      }\n    } = useTheme();\n    const { longestLabelLength, mobileView: inMobileView } = useContext(DetailsContext);\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      <StyledDetailsList\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 =\n            applyMobileView ||\n            fieldVariant === 'stacked' ||\n            (fieldLabelPosition === 'stacked' && !valueComparison);\n\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 as={StyledInlineFieldValueItem} container={{ cols: '16ch minmax(0, 1fr)' }}>\n              {item}\n            </Grid>\n          );\n        })}\n      </StyledDetailsList>\n    ) : null;\n  }\n);\n\nexport default DetailsList;\n"]}

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

@@ -1,4 +1,5 @@
 export { default } from './Details';
+export { default as DetailsList } from './DetailsList';
 export { default as DetailsContext } from './DetailsContext';
-export { StyledFieldValueGroupLabel, StyledDetailList, StyledDetails, StyledHighlightedDetailList } from './Details.styles';
+export { StyledFieldValueGroupLabel, StyledDetailsList, StyledDetails, StyledHighlightedDetailList } from './Details.styles';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Details/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EACL,0BAA0B,EAC1B,gBAAgB,EAChB,aAAa,EACb,2BAA2B,EAC5B,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Details/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EACL,0BAA0B,EAC1B,iBAAiB,EACjB,aAAa,EACb,2BAA2B,EAC5B,MAAM,kBAAkB,CAAC"}

package/lib/components/Details/index.js

@@ -1,4 +1,5 @@
 export { default } from './Details';
+export { default as DetailsList } from './DetailsList';
 export { default as DetailsContext } from './DetailsContext';
-export { StyledFieldValueGroupLabel, StyledDetailList, StyledDetails, StyledHighlightedDetailList } from './Details.styles';
+export { StyledFieldValueGroupLabel, StyledDetailsList, StyledDetails, StyledHighlightedDetailList } from './Details.styles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Details/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EACL,0BAA0B,EAC1B,gBAAgB,EAChB,aAAa,EACb,2BAA2B,EAC5B,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './Details';\nexport { default as DetailsContext } from './DetailsContext';\nexport {\n  StyledFieldValueGroupLabel,\n  StyledDetailList,\n  StyledDetails,\n  StyledHighlightedDetailList\n} from './Details.styles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Details/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EACL,0BAA0B,EAC1B,iBAAiB,EACjB,aAAa,EACb,2BAA2B,EAC5B,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './Details';\nexport { default as DetailsList } from './DetailsList';\nexport { default as DetailsContext } from './DetailsContext';\nexport {\n  StyledFieldValueGroupLabel,\n  StyledDetailsList,\n  StyledDetails,\n  StyledHighlightedDetailList\n} from './Details.styles';\n"]}

package/lib/components/GenAICoach/GenAICoach.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { GenAICoachProps } from './GenAICoach.types';
+declare const _default: FunctionComponent<GenAICoachProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+};
+export default _default;
+//# sourceMappingURL=GenAICoach.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAkC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;;;;AAiX1D,wBAA6D"}