@pega/cosmos-react-work 3.0.0-dev.2.0 → 3.0.0-dev.21.0

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

@@ -1 +1 @@
-{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EAIpB,iBAAiB,EAGlB,MAAM,yBAAyB,CAAC;AASjC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;MACN,oBAAoB;;;sCAGY,KAAK,CAAC,IAAI,CAAC,OAAO;uCACjB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;6BAC3C,KAAK,CAAC,IAAI,CAAC,OAAO;;qBAE1B,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzD,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;;;wCAKtB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,OAAO,GAAmD,CAAC,EAC/D,iBAAiB,EACjB,OAAO,EACM,EAAE,EAAE;IACjB,OAAO,CACL,MAAC,aAAa,eACX,iBAAiB,IAAI,CACpB,KAAC,uBAAuB,cACtB,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,MAAM,EAAE,iBAAiB,WAAI,WACvC,CAC3B,EACA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,IAAI,EAAE,qCAAqC;oBAC3C,UAAU,EAAE,OAAO;oBACnB,YAAY,EAAE,OAAO;oBACrB,GAAG,EAAE,CAAC;iBACP,YAEA,OAAO,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;oBAC3B,oDAAoD;oBACpD,OAAO,wBAAc,OAAO,IAAX,CAAC,CAAiB,CAAC;gBACtC,CAAC,CAAC,WACG,CACR,YACa,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Grid,\n  defaultThemeProp,\n  FieldValueList,\n  StyledFieldValueList,\n  FieldValueListProps,\n  ForwardProps,\n  BaseProps,\n  calculateFontSize,\n  FontSize,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nexport interface DetailsProps extends BaseProps, NoChildrenProp {\n  /** The set of field values to render in the Highlighted Data list. */\n  highlightedFields?: FieldValueListProps['fields'];\n  /** List of React components below the highlighted data and line seperation. */\n  regions?: [ReactNode] | [ReactNode, ReactNode] | [ReactNode, ReactNode, ReactNode];\n}\n\nexport const StyledDetails = styled.div``;\n\nexport const StyledHighlightedFields = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    ${StyledFieldValueList} {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));\n      padding-block-end: calc(1.5 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      column-gap: calc(5 * ${theme.base.spacing});\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\n    & + div {\n      padding-block-start: calc(1.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledHighlightedFields.defaultProps = defaultThemeProp;\n\nconst Details: FunctionComponent<DetailsProps & ForwardProps> = ({\n  highlightedFields,\n  regions\n}: DetailsProps) => {\n  return (\n    <StyledDetails>\n      {highlightedFields && (\n        <StyledHighlightedFields>\n          <FieldValueList variant='stacked' fields={highlightedFields} />\n        </StyledHighlightedFields>\n      )}\n      {regions && regions.length > 0 && (\n        <Grid\n          container={{\n            cols: 'repeat(auto-fit, minmax(30ch, 1fr))',\n            alignItems: 'start',\n            alignContent: 'start',\n            gap: 2\n          }}\n        >\n          {regions?.map((colItem, i) => {\n            // eslint-disable-next-line react/no-array-index-key\n            return <div key={i}>{colItem}</div>;\n          })}\n        </Grid>\n      )}\n    </StyledDetails>\n  );\n};\n\nexport default Details;\n"]}
+{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FC,\n  Fragment,\n  ReactNode,\n  Ref,\n  useState,\n  useContext,\n  useEffect,\n  useMemo\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Text,\n  useBreakpoint,\n  useConsolidatedRef,\n  useTheme,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nimport DetailsContext from './DetailsContext';\nimport {\n  StyledFieldValueGroupLabel,\n  StyledDetails,\n  StyledDetailList,\n  StyledHighlightedDetailList,\n  flexGapProp,\n  chToRem\n} from './Details.styles';\n\ninterface DetailsProps {\n  highlightedData?: ReactNode[];\n  children?: ReactNode;\n  /** Text used as heading of list */\n  name?: string;\n  /** Number of columns in detail layout\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /** Whether detail list is rendering within another detail list\n   * @default false\n   */\n  nested?: boolean;\n  /** Whether detail list is rendering multiple sub-lists in columns (passed as children)\n   * @default false\n   */\n  asFlex?: boolean;\n  /** Whether to apply `value-comparison` styles to list items\n   * @default false\n   */\n  valueComparison?: boolean;\n  ref?: Ref<HTMLDListElement>;\n}\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(\n  (\n    {\n      highlightedData,\n      children,\n      name,\n      columnCount = 1,\n      nested = false,\n      asFlex = false,\n      valueComparison = false\n    },\n    ref\n  ) => {\n    const { longestLabelLength, mobileView, depth, ...context } = useContext(DetailsContext);\n    const {\n      base: {\n        'content-width': { sm }\n      }\n    } = useTheme();\n    const isSmallOrAbove = useBreakpoint('sm');\n    const listRef = useConsolidatedRef<HTMLDListElement>(ref);\n    const flexRow = useBreakpoint(columnCount > 2 ? 'md' : 'sm', {\n      breakpointRef: listRef,\n      themeProp: 'content-width'\n    });\n    const [flexContextMobileView, setFlexContextMobileView] = useState(false);\n\n    const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n    const headingDepth = depth ?? 1;\n    const applyMobileView = asFlex\n      ? mobileView || (flexRow && flexContextMobileView) || !isSmallOrAbove\n      : mobileView || !isSmallOrAbove;\n\n    const contextValue = useMemo(() => {\n      return {\n        mobileView: applyMobileView,\n        depth: name ? headingDepth + 1 : headingDepth,\n        longestLabelLength,\n        ...context\n      };\n    }, [applyMobileView, name, headingDepth, longestLabelLength, context]);\n\n    /**\n     * Mount resize observer to update flex context mobile view & run initial check.\n     */\n    useEffect(() => {\n      const checkBreakpoint = (elementWidth: number) => {\n        const minWidthRem = chToRem(parseInt(sm, 10));\n        const minWidthPx = parseInt(remToPx(minWidthRem), 10);\n        const oneRemInPx = parseInt(remToPx(1), 10);\n        const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);\n        const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n        setFlexContextMobileView(elementWidth < mobileViewBreakpoint);\n      };\n      const resizeObserver = new ResizeObserver(entries => {\n        const containerPxWidth = entries[0].contentRect.width;\n        checkBreakpoint(containerPxWidth);\n      });\n\n      if (listRef.current) {\n        checkBreakpoint(listRef.current.offsetWidth);\n        resizeObserver.observe(listRef.current);\n      }\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [listRef, columnCount]);\n\n    return (\n      <DetailsContext.Provider value={contextValue}>\n        <StyledDetails>\n          {name && (\n            <StyledFieldValueGroupLabel>\n              <Text\n                variant={`h${Math.min(headingDepth, 6)}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}\n              >\n                {name}\n              </Text>\n            </StyledFieldValueGroupLabel>\n          )}\n\n          {highlightedData && (\n            <>\n              <StyledHighlightedDetailList as={nested ? 'div' : 'dl'}>\n                {highlightedData.map((child, i) => (\n                  // eslint-disable-next-line react/no-array-index-key\n                  <Fragment key={i}>{child}</Fragment>\n                ))}\n              </StyledHighlightedDetailList>\n\n              <hr />\n            </>\n          )}\n\n          <StyledDetailList\n            ref={listRef}\n            as={nested ? 'div' : 'dl'}\n            columnCount={columnCount}\n            labelLength={labelLength}\n            stacked={applyMobileView}\n            hasName={!!name}\n            nested={nested}\n            flex={asFlex}\n            wrapped={asFlex ? !flexRow : false}\n            variant={valueComparison ? 'value-comparison' : undefined}\n          >\n            {children}\n          </StyledDetailList>\n        </StyledDetails>\n      </DetailsContext.Provider>\n    );\n  }\n);\n\nexport default Details;\n"]}

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

@@ -0,0 +1,47 @@
+import { DefaultTheme } from 'styled-components';
+import { StyledFieldValueListProps } from '@pega/cosmos-react-core';
+interface StyledDetailListProps 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 has a name attribute */
+    hasName?: 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
+     * @default false
+     */
+    wrapped?: boolean;
+    /**
+     * Number of columns in the list
+     * @default 1
+     */
+    columnCount?: 1 | 2 | 3;
+    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 chToRem: (chVal: number) => number;
+export declare const StyledFieldValueGroupLabel: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledHighlightedDetailList: import("styled-components").StyledComponent<"dl", DefaultTheme, {}, never>;
+export declare const StyledDetails: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledDetailList: import("styled-components").StyledComponent<"dl", DefaultTheme, StyledFieldValueListProps & import("@pega/cosmos-react-core").OmitStrict<StyledDetailListProps, "columnCount" | "wrapped"> & Required<Pick<StyledDetailListProps, "columnCount" | "wrapped">>, never>;
+export {};
+//# sourceMappingURL=Details.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAML,yBAAyB,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,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAa3B,CAAC;AAEF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,OAAO,UAAW,MAAM,KAAG,MAEvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,6EAerC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EA4BtC,CAAC;AAIH,eAAO,MAAM,aAAa,6EAIxB,CAAC;AAkCH,eAAO,MAAM,gBAAgB,uQAwJ5B,CAAC"}

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

@@ -0,0 +1,230 @@
+import styled, { css } from 'styled-components';
+import { calculateFontSize, defaultThemeProp, StyledFieldValue, StyledStackedFieldValue, StyledFieldValueList } 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;
+export const chToRem = (chVal) => {
+    return chVal / 2;
+};
+export const StyledFieldValueGroupLabel = styled.div(({ theme }) => {
+    const { base: { spacing } } = theme;
+    return css `
+    width: 100%;
+    grid-column-start: 1;
+    grid-column-end: -1;
+    margin-block-end: calc(0.5 * ${spacing});
+
+    &:not(:first-child) {
+      margin-block-start: calc(3 * ${spacing});
+    }
+  `;
+});
+StyledFieldValueGroupLabel.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 `
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
+    column-gap: calc(5 * ${spacing});
+    gap: calc(2 * ${spacing});
+    align-items: start;
+    max-width: ${`${colCountChWidth[3].containerWidth}ch}`};
+    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});
+    }
+  `;
+});
+StyledHighlightedDetailList.defaultProps = defaultThemeProp;
+export const StyledDetails = styled.div(() => {
+    return css `
+    grid-column: 1 / -1;
+  `;
+});
+StyledDetails.defaultProps = defaultThemeProp;
+const nthRecursiveContainerSelector = (depth, includeAllImmediateContainers) => {
+    const firstContainerSelector = '> div:first-child';
+    const baseSelector = includeAllImmediateContainers ? '> div' : firstContainerSelector;
+    return baseSelector.concat(` ${firstContainerSelector}`.repeat(depth));
+};
+const initialLabelNoMargin = (applyToAllChildren = false) => {
+    return css `
+    ${nthRecursiveContainerSelector(0, applyToAllChildren)},
+    ${nthRecursiveContainerSelector(1, applyToAllChildren)},
+    ${nthRecursiveContainerSelector(2, applyToAllChildren)},
+    ${nthRecursiveContainerSelector(3, applyToAllChildren)},
+    ${nthRecursiveContainerSelector(4, applyToAllChildren)},
+    ${nthRecursiveContainerSelector(5, applyToAllChildren)},
+    ${nthRecursiveContainerSelector(6, applyToAllChildren)},
+    ${nthRecursiveContainerSelector(7, applyToAllChildren)},
+    ${nthRecursiveContainerSelector(8, applyToAllChildren)},
+    ${nthRecursiveContainerSelector(9, applyToAllChildren)},
+    ${nthRecursiveContainerSelector(10, applyToAllChildren)} {
+      > ${StyledFieldValueGroupLabel}:first-child {
+        margin-block-start: 0;
+      }
+    }
+  `;
+};
+export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, hasName, nested, labelLength, variant, theme, wrapped = false, columnCount = 1 }) => {
+    const { base: { spacing } } = theme;
+    const isValueComparison = variant === 'value-comparison';
+    const containerWidthCh = colCountChWidth[columnCount].containerWidth;
+    const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;
+    return css `
+      /* Top Level Styles */
+      ${!nested &&
+        css `
+        ${StyledFieldValue} {
+          word-break: break-word;
+          overflow: auto;
+        }
+
+        ${StyledFieldValueGroupLabel} {
+          margin-block-start: calc(3 * ${spacing});
+        }
+
+        > ${StyledFieldValueGroupLabel}:nth-child(1) {
+          margin-block-start: 0;
+        }
+
+        ${StyledStackedFieldValue} {
+          grid-column: 1 / -1;
+        }
+      `}
+
+      /* Nested List */
+      ${nested &&
+        css `
+        grid-column: 1 / -1;
+      `}
+
+      /* As Field Grid */
+      ${!flex &&
+        css `
+        display: grid;
+        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;
+        `}
+
+        > ${StyledStackedFieldValue} {
+          max-width: ${`${containerWidthCh}ch`};
+        }
+
+        > ${StyledFieldValue} {
+          max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));
+        }
+
+        ${isValueComparison &&
+            css `
+          grid-template-columns: auto auto;
+          column-gap: 0;
+          row-gap: calc(0.5 * ${spacing});
+          max-width: ${`${containerWidthCh}ch`};
+        `}
+      `}
+
+      /* 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 &&
+            css `
+          > * {
+            max-width: ${`${100 / columnCount}%`};
+          }
+
+          ${hasName && initialLabelNoMargin(true)}
+        `}
+
+        ${wrapped &&
+            css `
+          ${hasName && initialLabelNoMargin()}
+
+          ${!stacked &&
+                css `
+              > div:not(:first-child) {
+                margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
+              }
+            `}}
+        `}
+      `}
+
+      /* Key / Group Label Spacing */
+      ${!nested &&
+        css `
+        > div {
+          + dt {
+            margin-block-start: calc(3 * ${spacing});
+          }
+
+          + ${StyledStackedFieldValue} {
+            margin-block-start: calc(3 * ${spacing});
+          }
+
+          ${!stacked &&
+            css `
+            + dt + dd {
+              margin-block-start: calc(3 * ${spacing});
+            }
+          `}
+        }
+
+        ${initialLabelNoMargin()}
+      `}
+
+      ${stacked &&
+        css `
+        dt {
+          margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
+        }
+      `}
+
+      ${StyledFieldValueGroupLabel} + div {
+        > ${StyledFieldValueGroupLabel}:first-child {
+          margin-block-start: 0;
+        }
+
+        ${initialLabelNoMargin()}
+      }
+    `;
+});
+StyledDetailList.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Details.styles.js.map

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

@@ -0,0 +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, DefaultTheme } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledFieldValueList,\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 has a name attribute */\n  hasName?: 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  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 chToRem = (chVal: number): number => {\n  return chVal / 2;\n};\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\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\n    &:not(:first-child) {\n      margin-block-start: calc(3 * ${spacing});\n    }\n  `;\n});\n\nStyledFieldValueGroupLabel.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    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));\n    column-gap: calc(5 * ${spacing});\n    gap: calc(2 * ${spacing});\n    align-items: start;\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  return css`\n    grid-column: 1 / -1;\n  `;\n});\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nconst nthRecursiveContainerSelector = (\n  depth: number,\n  includeAllImmediateContainers?: boolean\n): string => {\n  const firstContainerSelector = '> div:first-child';\n  const baseSelector = includeAllImmediateContainers ? '> div' : firstContainerSelector;\n\n  return baseSelector.concat(` ${firstContainerSelector}`.repeat(depth));\n};\n\nconst initialLabelNoMargin = (applyToAllChildren = false) => {\n  return css`\n    ${nthRecursiveContainerSelector(0, applyToAllChildren)},\n    ${nthRecursiveContainerSelector(1, applyToAllChildren)},\n    ${nthRecursiveContainerSelector(2, applyToAllChildren)},\n    ${nthRecursiveContainerSelector(3, applyToAllChildren)},\n    ${nthRecursiveContainerSelector(4, applyToAllChildren)},\n    ${nthRecursiveContainerSelector(5, applyToAllChildren)},\n    ${nthRecursiveContainerSelector(6, applyToAllChildren)},\n    ${nthRecursiveContainerSelector(7, applyToAllChildren)},\n    ${nthRecursiveContainerSelector(8, applyToAllChildren)},\n    ${nthRecursiveContainerSelector(9, applyToAllChildren)},\n    ${nthRecursiveContainerSelector(10, applyToAllChildren)} {\n      > ${StyledFieldValueGroupLabel}:first-child {\n        margin-block-start: 0;\n      }\n    }\n  `;\n};\n\nexport const StyledDetailList = styled(StyledFieldValueList)<StyledDetailListPropsWithDefaults>(\n  ({\n    stacked,\n    flex,\n    hasName,\n    nested,\n    labelLength,\n    variant,\n    theme,\n    wrapped = false,\n    columnCount = 1\n  }): any => {\n    const {\n      base: { spacing }\n    } = theme;\n\n    const isValueComparison = variant === 'value-comparison';\n    const containerWidthCh = colCountChWidth[columnCount].containerWidth;\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        ${StyledFieldValueGroupLabel} {\n          margin-block-start: calc(3 * ${spacing});\n        }\n\n        > ${StyledFieldValueGroupLabel}:nth-child(1) {\n          margin-block-start: 0;\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\n        > ${StyledStackedFieldValue} {\n          max-width: ${`${containerWidthCh}ch`};\n        }\n\n        > ${StyledFieldValue} {\n          max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));\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      `}\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\n        max-width: ${`${containerWidthCh}ch`};\n\n        ${!wrapped &&\n        css`\n          > * {\n            max-width: ${`${100 / columnCount}%`};\n          }\n\n          ${hasName && initialLabelNoMargin(true)}\n        `}\n\n        ${wrapped &&\n        css`\n          ${hasName && initialLabelNoMargin()}\n\n          ${\n            !stacked &&\n            css`\n              > div:not(:first-child) {\n                margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n              }\n            `\n          }}\n        `}\n      `}\n\n      /* Key / Group Label Spacing */\n      ${!nested &&\n      css`\n        > div {\n          + dt {\n            margin-block-start: calc(3 * ${spacing});\n          }\n\n          + ${StyledStackedFieldValue} {\n            margin-block-start: calc(3 * ${spacing});\n          }\n\n          ${!stacked &&\n          css`\n            + dt + dd {\n              margin-block-start: calc(3 * ${spacing});\n            }\n          `}\n        }\n\n        ${initialLabelNoMargin()}\n      `}\n\n      ${stacked &&\n      css`\n        dt {\n          margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n        }\n      `}\n\n      ${StyledFieldValueGroupLabel} + div {\n        > ${StyledFieldValueGroupLabel}:first-child {\n          margin-block-start: 0;\n        }\n\n        ${initialLabelNoMargin()}\n      }\n    `;\n  }\n);\n\nStyledDetailList.defaultProps = defaultThemeProp;\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsContext.d.ts","sourceRoot":"","sources":["../../../src/components/Details/DetailsContext.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IAClC,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,cAAc,8CAKlB,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/lib/components/Details/DetailsContext.js

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

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

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

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

@@ -1,4 +1,4 @@
 export { default } from './Details';
-export { DetailsProps } from './Details';
-export { StyledDetails, StyledHighlightedFields } from './Details';
+export { default as DetailsContext } from './DetailsContext';
+export { StyledFieldValueGroupLabel, StyledDetailList, 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,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,WAAW,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,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EACL,0BAA0B,EAC1B,gBAAgB,EAChB,aAAa,EACb,2BAA2B,EAC5B,MAAM,kBAAkB,CAAC"}

package/lib/components/Details/index.js

@@ -1,3 +1,4 @@
 export { default } from './Details';
-export { StyledDetails, StyledHighlightedFields } from './Details';
+export { default as DetailsContext } from './DetailsContext';
+export { StyledFieldValueGroupLabel, StyledDetailList, 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;AAEpC,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Details';\nexport { DetailsProps } from './Details';\nexport { StyledDetails, StyledHighlightedFields } from './Details';\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,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"]}

package/lib/components/Glimpse/Glimpse.js

@@ -16,7 +16,7 @@ export const StyledGlimpse = styled(Card)(({ theme }) => {
 });
 StyledGlimpse.defaultProps = defaultThemeProp;
 const Glimpse = forwardRef(({ primary, visual, secondary = [], fields = [] }, ref) => {
-    return (_jsxs(StyledGlimpse, { ref: ref, children: [_jsx(CardHeader, { children: _jsx(SummaryItem, { primary: primary, secondary: _jsx(MetaList, { items: secondary }, void 0), visual: visual }, void 0) }, void 0), !!fields.length && (_jsx(CardContent, { children: _jsx(FieldValueList, { fields: fields }, void 0) }, void 0))] }, void 0));
+    return (_jsxs(StyledGlimpse, { ref: ref, children: [_jsx(CardHeader, { children: _jsx(SummaryItem, { primary: primary, secondary: _jsx(MetaList, { items: secondary }), visual: visual }) }), !!fields.length && (_jsx(CardContent, { children: _jsx(FieldValueList, { fields: fields }) }))] }));
 });
 export default Glimpse;
 //# sourceMappingURL=Glimpse.js.map

package/lib/components/Glimpse/Glimpse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,IAAI,EACJ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,cAAc,EAId,QAAQ,EAER,oBAAoB,EACpB,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAiB5F,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;MACN,iBAAiB;oCACa,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;MAG/D,oBAAoB;gCACM,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAiC,EAC/E,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,KAAC,UAAU,cACT,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,KAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,WAAI,EACzC,MAAM,EAAE,MAAM,WACd,WACS,EACZ,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAClB,KAAC,WAAW,cACV,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,WAAI,WACtB,CACf,YACa,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  Card,\n  CardContent,\n  CardHeader,\n  defaultThemeProp,\n  FieldValueList,\n  FieldValueListProps,\n  ForwardProps,\n  MenuItemProps,\n  MetaList,\n  NoChildrenProp,\n  StyledFieldValueList,\n  SummaryItem\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nexport interface GlimpseProps extends BaseProps, NoChildrenProp {\n  /** The unique id for the operator. */\n  id: string;\n  /** The primary piece of item information as a string. */\n  primary: MenuItemProps['primary'];\n  /** Secondary info about an item. Useful for additional metadata or context. */\n  secondary?: MenuItemProps['secondary'];\n  /** A visual to assist identifying an item. e.g. Avatar or Icon. */\n  visual?: MenuItemProps['visual'];\n  /** The set of field values to render in the list. */\n  fields?: FieldValueListProps['fields'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledGlimpse = styled(Card)(({ theme }) => {\n  return css`\n    ${StyledCardContent} {\n      border-top: solid 0.0625rem ${theme.base.palette['border-line']};\n    }\n\n    ${StyledFieldValueList} {\n      padding-top: calc(1.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledGlimpse.defaultProps = defaultThemeProp;\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(\n  (\n    { primary, visual, secondary = [], fields = [] }: PropsWithoutRef<GlimpseProps>,\n    ref: GlimpseProps['ref']\n  ) => {\n    return (\n      <StyledGlimpse ref={ref}>\n        <CardHeader>\n          <SummaryItem\n            primary={primary}\n            secondary={<MetaList items={secondary} />}\n            visual={visual}\n          />\n        </CardHeader>\n        {!!fields.length && (\n          <CardContent>\n            <FieldValueList fields={fields} />\n          </CardContent>\n        )}\n      </StyledGlimpse>\n    );\n  }\n);\n\nexport default Glimpse;\n"]}
+{"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,IAAI,EACJ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,cAAc,EAId,QAAQ,EAER,oBAAoB,EACpB,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAiB5F,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;MACN,iBAAiB;oCACa,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;MAG/D,oBAAoB;gCACM,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAiC,EAC/E,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,KAAC,UAAU,cACT,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,KAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,GAAI,EACzC,MAAM,EAAE,MAAM,GACd,GACS,EACZ,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAClB,KAAC,WAAW,cACV,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,GACtB,CACf,IACa,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  Card,\n  CardContent,\n  CardHeader,\n  defaultThemeProp,\n  FieldValueList,\n  FieldValueListProps,\n  ForwardProps,\n  MenuItemProps,\n  MetaList,\n  NoChildrenProp,\n  StyledFieldValueList,\n  SummaryItem\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nexport interface GlimpseProps extends BaseProps, NoChildrenProp {\n  /** The unique id for the operator. */\n  id: string;\n  /** The primary piece of item information as a string. */\n  primary: MenuItemProps['primary'];\n  /** Secondary info about an item. Useful for additional metadata or context. */\n  secondary?: MenuItemProps['secondary'];\n  /** A visual to assist identifying an item. e.g. Avatar or Icon. */\n  visual?: MenuItemProps['visual'];\n  /** The set of field values to render in the list. */\n  fields?: FieldValueListProps['fields'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledGlimpse = styled(Card)(({ theme }) => {\n  return css`\n    ${StyledCardContent} {\n      border-top: solid 0.0625rem ${theme.base.palette['border-line']};\n    }\n\n    ${StyledFieldValueList} {\n      padding-top: calc(1.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledGlimpse.defaultProps = defaultThemeProp;\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(\n  (\n    { primary, visual, secondary = [], fields = [] }: PropsWithoutRef<GlimpseProps>,\n    ref: GlimpseProps['ref']\n  ) => {\n    return (\n      <StyledGlimpse ref={ref}>\n        <CardHeader>\n          <SummaryItem\n            primary={primary}\n            secondary={<MetaList items={secondary} />}\n            visual={visual}\n          />\n        </CardHeader>\n        {!!fields.length && (\n          <CardContent>\n            <FieldValueList fields={fields} />\n          </CardContent>\n        )}\n      </StyledGlimpse>\n    );\n  }\n);\n\nexport default Glimpse;\n"]}

package/lib/components/SearchResults/Filter.js

@@ -33,13 +33,13 @@ const Filter = ({ onFilterChange, onClearFilter, name, expanded = true, ...contr
                     if (filterOption.checked)
                         filterActive = true;
                     return (_jsx(SelectFilter, { id: filterOption.id, name: filterOption.name, label: filterOption.label, checked: filterOption.checked }, filterOption.id));
-                }) }, void 0));
+                }) }));
             break;
         }
         default:
             filterControl = null;
     }
-    return (_jsxs(StyledFilter, { children: [_jsxs(Flex, { container: { justify: 'between' }, children: [_jsxs(Flex, { as: StyledFilterButton, container: { gap: 1, alignItems: 'center' }, variant: 'text', onClick: () => setFilterExpanded(curr => !curr), "aria-expanded": filterExpanded, "aria-label": t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name]), children: [_jsx(Icon, { name: 'caret-down' }, void 0), _jsx(Text, { variant: 'h3', as: 'span', children: name }, void 0)] }, void 0), filterActive && (_jsx(Button, { variant: 'link', onClick: () => onClearFilter?.(name), children: t('clear') }, void 0))] }, void 0), _jsx(ExpandCollapse, { collapsed: !filterExpanded, children: filterControl }, void 0)] }, void 0));
+    return (_jsxs(StyledFilter, { children: [_jsxs(Flex, { container: { justify: 'between' }, children: [_jsxs(Flex, { as: StyledFilterButton, container: { gap: 1, alignItems: 'center' }, variant: 'text', onClick: () => setFilterExpanded(curr => !curr), "aria-expanded": filterExpanded, "aria-label": t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name]), children: [_jsx(Icon, { name: 'caret-down' }), _jsx(Text, { variant: 'h3', as: 'span', children: name })] }), filterActive && (_jsx(Button, { variant: 'link', onClick: () => onClearFilter?.(name), children: t('clear') }))] }), _jsx(ExpandCollapse, { collapsed: !filterExpanded, children: filterControl })] }));
 };
 export default Filter;
 //# sourceMappingURL=Filter.js.map

package/lib/components/SearchResults/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\n\nimport {\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  ExpandCollapse,\n  Flex,\n  Icon,\n  registerIcon,\n  RadioButton,\n  RadioButtonGroup,\n  Text,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport { FilterProps, SearchResultsProps, SelectFilterItemProps } from './SearchResults.types';\nimport { StyledFilter, StyledFilterButton } from './SearchResults.styles';\n\nregisterIcon(caretDownIcon);\n\ninterface FilterComponentProps {\n  onFilterChange?: SearchResultsProps['onFilterChange'];\n  onClearFilter?: SearchResultsProps['onClearFilter'];\n}\n\nconst Filter = ({\n  onFilterChange,\n  onClearFilter,\n  name,\n  expanded = true,\n  ...control\n}: FilterProps & FilterComponentProps): JSX.Element => {\n  const t = useI18n();\n  const [filterExpanded, setFilterExpanded] = useState(expanded);\n\n  let filterControl;\n  let filterActive = false;\n  // eslint-disable-next-line sonarjs/no-small-switch\n  switch (control.type) {\n    case 'select': {\n      const { selectType, items } = control;\n      let SelectFilterGroup = CheckboxGroup;\n      let SelectFilter = Checkbox;\n      if (selectType === 'single-select') {\n        SelectFilterGroup = RadioButtonGroup;\n        SelectFilter = RadioButton;\n      }\n      filterControl = (\n        <SelectFilterGroup\n          label={name}\n          labelHidden\n          onChange={e => {\n            const item = items.find((x: SelectFilterItemProps) => x.id === e.target.id);\n            if (!item) return;\n            const newItem = { ...item, checked: !item.checked };\n\n            onFilterChange?.({\n              name,\n              type: control.type,\n              value: newItem\n            });\n          }}\n        >\n          {control.items.map((filterOption: SelectFilterItemProps) => {\n            if (filterOption.checked) filterActive = true;\n            return (\n              <SelectFilter\n                key={filterOption.id}\n                id={filterOption.id}\n                name={filterOption.name}\n                label={filterOption.label}\n                checked={filterOption.checked}\n              />\n            );\n          })}\n        </SelectFilterGroup>\n      );\n      break;\n    }\n    default:\n      filterControl = null;\n  }\n\n  return (\n    <StyledFilter>\n      <Flex container={{ justify: 'between' }}>\n        <Flex\n          as={StyledFilterButton}\n          container={{ gap: 1, alignItems: 'center' }}\n          variant='text'\n          onClick={() => setFilterExpanded(curr => !curr)}\n          aria-expanded={filterExpanded}\n          aria-label={t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name])}\n        >\n          <Icon name='caret-down' />\n          <Text variant='h3' as='span'>\n            {name}\n          </Text>\n        </Flex>\n        {filterActive && (\n          <Button variant='link' onClick={() => onClearFilter?.(name)}>\n            {t('clear')}\n          </Button>\n        )}\n      </Flex>\n      <ExpandCollapse collapsed={!filterExpanded}>{filterControl}</ExpandCollapse>\n    </StyledFilter>\n  );\n};\n\nexport default Filter;\n"]}
+{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/components/SearchResults/Filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\n\nimport {\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  ExpandCollapse,\n  Flex,\n  Icon,\n  registerIcon,\n  RadioButton,\n  RadioButtonGroup,\n  Text,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport { FilterProps, SearchResultsProps, SelectFilterItemProps } from './SearchResults.types';\nimport { StyledFilter, StyledFilterButton } from './SearchResults.styles';\n\nregisterIcon(caretDownIcon);\n\ninterface FilterComponentProps {\n  onFilterChange?: SearchResultsProps['onFilterChange'];\n  onClearFilter?: SearchResultsProps['onClearFilter'];\n}\n\nconst Filter = ({\n  onFilterChange,\n  onClearFilter,\n  name,\n  expanded = true,\n  ...control\n}: FilterProps & FilterComponentProps): JSX.Element => {\n  const t = useI18n();\n  const [filterExpanded, setFilterExpanded] = useState(expanded);\n\n  let filterControl;\n  let filterActive = false;\n  // eslint-disable-next-line sonarjs/no-small-switch\n  switch (control.type) {\n    case 'select': {\n      const { selectType, items } = control;\n      let SelectFilterGroup = CheckboxGroup;\n      let SelectFilter = Checkbox;\n      if (selectType === 'single-select') {\n        SelectFilterGroup = RadioButtonGroup;\n        SelectFilter = RadioButton;\n      }\n      filterControl = (\n        <SelectFilterGroup\n          label={name}\n          labelHidden\n          onChange={e => {\n            const item = items.find((x: SelectFilterItemProps) => x.id === e.target.id);\n            if (!item) return;\n            const newItem = { ...item, checked: !item.checked };\n\n            onFilterChange?.({\n              name,\n              type: control.type,\n              value: newItem\n            });\n          }}\n        >\n          {control.items.map((filterOption: SelectFilterItemProps) => {\n            if (filterOption.checked) filterActive = true;\n            return (\n              <SelectFilter\n                key={filterOption.id}\n                id={filterOption.id}\n                name={filterOption.name}\n                label={filterOption.label}\n                checked={filterOption.checked}\n              />\n            );\n          })}\n        </SelectFilterGroup>\n      );\n      break;\n    }\n    default:\n      filterControl = null;\n  }\n\n  return (\n    <StyledFilter>\n      <Flex container={{ justify: 'between' }}>\n        <Flex\n          as={StyledFilterButton}\n          container={{ gap: 1, alignItems: 'center' }}\n          variant='text'\n          onClick={() => setFilterExpanded(curr => !curr)}\n          aria-expanded={filterExpanded}\n          aria-label={t(filterExpanded ? 'collapse_noun' : 'expand_noun', [name])}\n        >\n          <Icon name='caret-down' />\n          <Text variant='h3' as='span'>\n            {name}\n          </Text>\n        </Flex>\n        {filterActive && (\n          <Button variant='link' onClick={() => onClearFilter?.(name)}>\n            {t('clear')}\n          </Button>\n        )}\n      </Flex>\n      <ExpandCollapse collapsed={!filterExpanded}>{filterControl}</ExpandCollapse>\n    </StyledFilter>\n  );\n};\n\nexport default Filter;\n"]}

package/lib/components/SearchResults/SearchResult.d.ts

@@ -1,4 +1,4 @@
 import { SearchResultProps } from './SearchResults.types';
-declare const SearchResult: ({ id, title, link, description, meta }: SearchResultProps) => JSX.Element;
+declare const SearchResult: ({ title, link, description, meta, accent }: SearchResultProps) => JSX.Element;
 export default SearchResult;
 //# sourceMappingURL=SearchResult.d.ts.map

package/lib/components/SearchResults/SearchResult.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResult.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAmB1D,QAAA,MAAM,YAAY,2CAMf,iBAAiB,KAAG,WAetB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SearchResult.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAyB1D,QAAA,MAAM,YAAY,+CAMf,iBAAiB,KAAG,WActB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/SearchResults/SearchResult.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, Text, MetaList, Link, Flex, StyledPopover, calculateFontSize } from '@pega/cosmos-react-core';
+import { defaultThemeProp, Text, MetaList, Link, Flex, StyledPopover, calculateFontSize, replaceMatchWithElement, Mark } from '@pega/cosmos-react-core';
 const StyledSearchResult = styled.article(({ theme }) => {
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
@@ -8,14 +8,20 @@ const StyledSearchResult = styled.article(({ theme }) => {
       font-size: ${fontSize.s};
       font-weight: ${theme.base['font-weight'].normal};
     }
+    padding-block-end: calc(2 * ${theme.base.spacing});
+    border-bottom: 0.0125rem solid ${theme.base.palette['border-line']};
+
+    &:last-of-type {
+      border-bottom: none;
+    }
   `;
 });
 StyledSearchResult.defaultProps = defaultThemeProp;
 const StyledDescription = styled(Text) `
   word-break: break-word;
 `;
-const SearchResult = ({ id, title, link, description, meta = [] }) => {
-    return (_jsxs(Flex, { as: StyledSearchResult, container: { direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { direction: 'column-reverse' }, children: [_jsx(Text, { variant: 'h2', children: _jsx(Link, { ...link, children: title }, void 0) }, void 0), _jsx(Text, { variant: 'secondary', as: 'div', children: id }, void 0)] }, void 0), description && _jsx(StyledDescription, { forwardedAs: 'p', children: description }, void 0), !!meta.length && _jsx(MetaList, { items: meta }, void 0)] }, void 0));
+const SearchResult = ({ title, link, description, meta = [], accent }) => {
+    return (_jsxs(Flex, { as: StyledSearchResult, container: { direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Text, { variant: 'h2', children: _jsx(Link, { ...link, children: accent ? replaceMatchWithElement(title, accent, match => _jsx(Mark, { children: match })) : title }) }), !!meta.length && _jsx(MetaList, { items: meta })] }), description && _jsx(StyledDescription, { forwardedAs: 'p', children: description })] }));
 };
 export default SearchResult;
 //# sourceMappingURL=SearchResult.js.map

package/lib/components/SearchResults/SearchResult.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResult.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;SACH,aAAa;mBACH,QAAQ,CAAC,CAAC;qBACR,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GAAG,EAAE,EACS,EAAe,EAAE;IACnC,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAChB,KAAC,IAAI,OAAK,IAAI,YAAG,KAAK,WAAQ,WACzB,EACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAC,KAAK,YAC/B,EAAE,WACE,YACF,EACN,WAAW,IAAI,KAAC,iBAAiB,IAAC,WAAW,EAAC,GAAG,YAAE,WAAW,WAAqB,EACnF,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,WAAI,YACtC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Text,\n  MetaList,\n  Link,\n  Flex,\n  StyledPopover,\n  calculateFontSize\n} from '@pega/cosmos-react-core';\n\nimport { SearchResultProps } from './SearchResults.types';\n\nconst StyledSearchResult = styled.article(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    h2 ${StyledPopover} {\n      font-size: ${fontSize.s};\n      font-weight: ${theme.base['font-weight'].normal};\n    }\n  `;\n});\n\nStyledSearchResult.defaultProps = defaultThemeProp;\n\nconst StyledDescription = styled(Text)`\n  word-break: break-word;\n`;\n\nconst SearchResult = ({\n  id,\n  title,\n  link,\n  description,\n  meta = []\n}: SearchResultProps): JSX.Element => {\n  return (\n    <Flex as={StyledSearchResult} container={{ direction: 'column', gap: 1 }}>\n      <Flex container={{ direction: 'column-reverse' }}>\n        <Text variant='h2'>\n          <Link {...link}>{title}</Link>\n        </Text>\n        <Text variant='secondary' as='div'>\n          {id}\n        </Text>\n      </Flex>\n      {description && <StyledDescription forwardedAs='p'>{description}</StyledDescription>}\n      {!!meta.length && <MetaList items={meta} />}\n    </Flex>\n  );\n};\n\nexport default SearchResult;\n"]}
+{"version":3,"file":"SearchResult.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResult.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,iBAAiB,EACjB,uBAAuB,EACvB,IAAI,EACL,MAAM,yBAAyB,CAAC;AAIjC,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;SACH,aAAa;mBACH,QAAQ,CAAC,CAAC;qBACR,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;kCAEnB,KAAK,CAAC,IAAI,CAAC,OAAO;qCACf,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;GAKnE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GAAG,EAAE,EACT,MAAM,EACY,EAAe,EAAE;IACnC,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aACtC,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAChB,KAAC,IAAI,OAAK,IAAI,YACX,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAC,IAAI,cAAE,KAAK,GAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,GAClF,GACF,EACN,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,GAAI,IACtC,EACN,WAAW,IAAI,KAAC,iBAAiB,IAAC,WAAW,EAAC,GAAG,YAAE,WAAW,GAAqB,IAC/E,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Text,\n  MetaList,\n  Link,\n  Flex,\n  StyledPopover,\n  calculateFontSize,\n  replaceMatchWithElement,\n  Mark\n} from '@pega/cosmos-react-core';\n\nimport { SearchResultProps } from './SearchResults.types';\n\nconst StyledSearchResult = styled.article(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    h2 ${StyledPopover} {\n      font-size: ${fontSize.s};\n      font-weight: ${theme.base['font-weight'].normal};\n    }\n    padding-block-end: calc(2 * ${theme.base.spacing});\n    border-bottom: 0.0125rem solid ${theme.base.palette['border-line']};\n\n    &:last-of-type {\n      border-bottom: none;\n    }\n  `;\n});\n\nStyledSearchResult.defaultProps = defaultThemeProp;\n\nconst StyledDescription = styled(Text)`\n  word-break: break-word;\n`;\n\nconst SearchResult = ({\n  title,\n  link,\n  description,\n  meta = [],\n  accent\n}: SearchResultProps): JSX.Element => {\n  return (\n    <Flex as={StyledSearchResult} container={{ direction: 'column', gap: 1 }}>\n      <Flex container={{ direction: 'column' }}>\n        <Text variant='h2'>\n          <Link {...link}>\n            {accent ? replaceMatchWithElement(title, accent, match => <Mark>{match}</Mark>) : title}\n          </Link>\n        </Text>\n        {!!meta.length && <MetaList items={meta} />}\n      </Flex>\n      {description && <StyledDescription forwardedAs='p'>{description}</StyledDescription>}\n    </Flex>\n  );\n};\n\nexport default SearchResult;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAGlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAML,YAAY,EAcb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EACL,kBAAkB,EAInB,MAAM,uBAAuB,CAAC;AA2E/B,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAgMvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAmBb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EACL,kBAAkB,EAInB,MAAM,uBAAuB,CAAC;AA6E/B,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA0OvE,CAAC;AAEF,eAAe,aAAa,CAAC"}