@pega/cosmos-react-work 3.0.0-dev.3.0 → 3.0.0-dev.30.0

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

@@ -0,0 +1,243 @@
+import styled, { css } from 'styled-components';
+import { calculateFontSize, defaultThemeProp, StyledFieldValue, StyledStackedFieldValue, StyledFieldValueList, StyledIcon, useDirection, StyledButton } 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, animation } } = theme;
+    const { rtl } = useDirection();
+    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});
+    }
+
+    ${StyledButton} ${StyledIcon} {
+      transition: transform ${animation.speed} ${animation.timing.ease};
+    }
+
+    ${StyledButton}[aria-expanded='true'] ${StyledIcon} {
+      transform: rotate(90deg);
+    }
+
+    ${StyledButton}[aria-expanded='false'] ${StyledIcon} {
+      transform: rotate(${rtl ? 180 : 0}deg);
+    }
+  `;
+});
+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  StyledIcon,\n  FontSize,\n  PropsWithDefaults,\n  useDirection,\n  StyledButton\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, 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\n    &:not(:first-child) {\n      margin-block-start: calc(3 * ${spacing});\n    }\n\n    ${StyledButton} ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    ${StyledButton}[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    ${StyledButton}[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\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,CAsPvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/SearchResults/SearchResults.js

@@ -1,31 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext, useRef } from 'react';
-import { Button, Card, CardContent, Count, Flex, Grid, Icon, registerIcon, Modal, ModalManagerContext, EmptyState, SearchInput, Selectable, Text, useI18n, useBreakpoint, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useContext, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Button, Count, Flex, Grid, Icon, registerIcon, Modal, EmptyState, SearchInput, Selectable, Text, useModalManager, useI18n, useBreakpoint, useAfterInitialEffect, SummaryItem, Avatar, useTheme, AppShellContext, Progress } from '@pega/cosmos-react-core';
 import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
 import * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';
 import SearchResult from './SearchResult';
 import Filter from './Filter';
-import { StyledModalFilterContent, StyledCountText, StyledSelectedFilters, StyledSearchResults, StyledFilterTitle } from './SearchResults.styles';
+import { StyledModalFilterContent, StyledCountText, StyledSelectedFilters, StyledSearchResults, StyledResults, StyledFilters, StyledSearchSummaryItem } from './SearchResults.styles';
 registerIcon(filterIcon, filterOnIcon);
 const FilterModal = (props) => {
     const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;
     const t = useI18n();
-    return (_jsx(Modal, { heading: t('filters'), autoWidth: true, children: _jsxs(Grid, { as: StyledModalFilterContent, container: { rowGap: 2 }, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Text, { as: StyledCountText, variant: 'secondary', children: t('results_count', [count], { count }) }, void 0), onClearAllFilters && !!activeFilters.length && (_jsx(Button, { variant: 'link', onClick: onClearAllFilters, children: t('clear_all') }, void 0))] }, void 0), !!activeFilters.length && (_jsx(Flex, { as: StyledSelectedFilters, container: { gap: 1 }, children: activeFilters.map(filter => {
+    return (_jsx(Modal, { heading: t('filters'), autoWidth: true, children: _jsxs(Grid, { as: StyledModalFilterContent, container: { rowGap: 2 }, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Text, { as: StyledCountText, variant: 'secondary', children: t('results_count', [count], { count }) }), onClearAllFilters && !!activeFilters.length && (_jsx(Button, { variant: 'link', onClick: onClearAllFilters, children: t('clear_all') }))] }), !!activeFilters.length && (_jsx(Flex, { as: StyledSelectedFilters, container: { gap: 1 }, children: activeFilters.map(filter => {
                         return (_jsx(Selectable, { id: filter.id, onRemove: () => onFilterChange?.({
                                 name: filter.groupName,
                                 type: filter.type,
                                 value: filter.resetValue
                             }), children: `${filter.groupName}: ${filter.name}` }, filter.id));
-                    }) }, void 0)), _jsx("div", { children: filters.map((filter) => {
+                    }) })), _jsx("div", { children: filters.map((filter) => {
                         return (_jsx(Filter, { onFilterChange: onFilterChange, onClearFilter: onClearFilter, ...filter }, filter.name));
-                    }) }, void 0)] }, void 0) }, void 0));
+                    }) })] }) }));
 };
-const SearchResults = forwardRef(({ results, searchInputProps, count, filters, onFilterChange, onClearAllFilters, onClearFilter, onShowMore, ...restProps }, ref) => {
+const SearchResults = forwardRef(({ results, searchInputProps, count, filters, onFilterChange, onClearAllFilters, onClearFilter, onShowMore, loading = false, ...restProps }, ref) => {
     const t = useI18n();
     const isMedium = useBreakpoint('md');
-    const { create } = useContext(ModalManagerContext);
+    const { create } = useModalManager();
+    const { searchContainerEl } = useContext(AppShellContext);
     const filtersMethods = useRef();
     const { placeholder = t('search_placeholder_default') } = searchInputProps;
+    const { base: { palette: { 'brand-primary': primary } } } = useTheme();
+    const [accent, setAccent] = useState();
+    const [submittedSearchValue, setSubmittedSearchValue] = useState(searchInputProps.value);
     const activeFilters = filters.flatMap(group => {
         if (group.type === 'select') {
             return group.items.flatMap(item => {
@@ -66,37 +71,51 @@ const SearchResults = forwardRef(({ results, searchInputProps, count, filters, o
         if (isMedium && filtersMethods.current)
             filtersMethods.current.dismiss();
     }, [isMedium]);
-    return (_jsx(Card, { children: _jsx(CardContent, { children: _jsxs(Grid, { ...restProps, as: StyledSearchResults, ref: ref, md: filters.length
-                    ? {
-                        container: {
-                            cols: '15rem auto',
-                            areas: '"search search" "filters results"'
-                        }
-                    }
-                    : {}, s: filters.length
-                    ? {
-                        container: {
-                            cols: 'auto'
-                        }
-                    }
-                    : {}, container: { rows: '1fr auto', areas: '"search" "results"', rowGap: 2, colGap: 4 }, children: [_jsx(Grid, { item: { area: 'search' }, children: _jsx(SearchInput, { ...searchInputProps, placeholder: placeholder }, void 0) }, void 0), isMedium && !!filters.length && (_jsxs(Grid, { item: { area: 'filters', alignSelf: 'start' }, children: [_jsxs(Flex, { as: StyledFilterTitle, container: { justify: 'between' }, children: [_jsx(Text, { variant: 'h2', children: t('filters') }, void 0), onClearAllFilters && !!activeFilters.length && (_jsx(Button, { variant: 'link', onClick: onClearAllFilters, children: t('clear_all') }, void 0))] }, void 0), filters.map((filter) => {
-                                return (_jsx(Filter, { onFilterChange: onFilterChange, onClearFilter: onClearFilter, ...filter }, filter.name));
-                            })] }, void 0)), _jsxs(Grid, { item: { area: 'results' }, container: {
-                            alignItems: 'center',
-                            rowGap: 2,
-                            rows: 'auto 1fr',
-                            areas: '"meta" "items"'
-                        }, children: [_jsxs(Grid, { item: { area: 'meta' }, container: { rowGap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(Text, { as: StyledCountText, variant: 'secondary', children: searchInputProps.value !== '' || results.length > 0
-                                                    ? t('results_count', [count], { count })
-                                                    : '' }, void 0), !isMedium && !!filters.length && (_jsxs(Button, { variant: 'simple', onClick: openFiltersModal, children: [_jsx(Icon, { name: activeFilters.length > 0 ? 'filter-on' : 'filter' }, void 0), "\u00A0", t('filters'), "\u00A0", _jsx(Count, { children: activeFilters.length }, void 0)] }, void 0))] }, void 0), !!activeFilters.length && (_jsx(Flex, { as: StyledSelectedFilters, container: { gap: 1 }, children: activeFilters.map(filter => {
-                                            return (_jsx(Selectable, { id: filter.id, onRemove: () => onFilterChange?.({
-                                                    name: filter.groupName,
-                                                    type: filter.type,
-                                                    value: filter.resetValue
-                                                }), children: `${filter.groupName}: ${filter.name}` }, filter.id));
-                                        }) }, void 0))] }, void 0), _jsx(Grid, { item: { area: 'items', alignSelf: results.length ? 'start' : 'center' }, container: { rowGap: 4 }, children: results.length ? (results.map((result) => {
-                                    return _jsx(SearchResult, { ...result }, result.id);
-                                })) : (_jsx(Grid, { item: { alignSelf: 'stretch' }, children: _jsx(EmptyState, { message: searchInputProps.value === '' ? t('empty_search') : undefined }, void 0) }, void 0)) }, void 0), onShowMore && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(Button, { variant: 'link', onClick: onShowMore, children: t('show_more') }, void 0) }, void 0))] }, void 0)] }, void 0) }, void 0) }, void 0));
+    useAfterInitialEffect(() => {
+        setAccent(submittedSearchValue ? new RegExp(submittedSearchValue, 'gi') : undefined);
+    }, [submittedSearchValue]);
+    const searchTitle = (_jsx(SummaryItem, { as: StyledSearchSummaryItem, visual: _jsx(Avatar, { icon: 'search', name: 'search', shape: 'squircle', backgroundColor: primary, color: 'white' }), primary: _jsx(Text, { variant: 'h1', children: "Search" }), actions: onClearAllFilters &&
+            isMedium &&
+            !!activeFilters.length && (_jsx(Button, { variant: 'link', onClick: onClearAllFilters, children: t('clear_all') })) }));
+    const searchInput = (_jsx(SearchInput, { ...searchInputProps, onSearchSubmit: val => {
+            searchInputProps.onSearchSubmit?.(val);
+            setSubmittedSearchValue(val);
+        }, placeholder: placeholder }));
+    return (_jsxs(Grid, { ...restProps, as: StyledSearchResults, ref: ref, md: filters.length
+            ? {
+                container: {
+                    cols: '15rem auto'
+                }
+            }
+            : undefined, sm: filters.length
+            ? {
+                container: {
+                    cols: 'auto',
+                    rowGap: 2
+                }
+            }
+            : undefined, container: {
+            rows: 'auto auto',
+            cols: 'auto 1fr',
+            areas: '"filters results"'
+        }, children: [isMedium && !!filters.length && (_jsxs(Grid, { item: { area: 'filters', alignSelf: 'start' }, as: StyledFilters, children: [searchTitle, filters.map((filter) => {
+                        return (_jsx(Filter, { onFilterChange: onFilterChange, onClearFilter: onClearFilter, ...filter }, filter.name));
+                    })] })), _jsxs(Grid, { item: { alignSelf: 'start', area: 'results' }, container: {
+                    alignItems: 'center',
+                    rowGap: 2,
+                    rows: 'auto auto 1fr',
+                    areas: '"search" "meta" "items"'
+                }, as: StyledResults, children: [loading && _jsx(Progress, { placement: 'local' }), searchContainerEl && isMedium ? (createPortal(searchInput, searchContainerEl)) : (_jsxs(Grid, { item: { area: 'search' }, children: [!isMedium && searchTitle, searchInput] })), _jsxs(Grid, { item: { area: 'meta' }, container: { rowGap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [!loading && (_jsx(Text, { as: StyledCountText, variant: 'secondary', children: submittedSearchValue !== '' || results.length > 0
+                                            ? t('results_count', [count], { count })
+                                            : '' })), !isMedium && !!filters.length && (_jsxs(Button, { variant: 'simple', onClick: openFiltersModal, children: [_jsx(Icon, { name: activeFilters.length > 0 ? 'filter-on' : 'filter' }), "\u00A0", t('filters'), "\u00A0", _jsx(Count, { children: activeFilters.length })] }))] }), !!activeFilters.length && (_jsx(Flex, { as: StyledSelectedFilters, container: { gap: 1, wrap: 'wrap' }, children: activeFilters.map(filter => {
+                                    return (_jsx(Selectable, { id: filter.id, onRemove: () => onFilterChange?.({
+                                            name: filter.groupName,
+                                            type: filter.type,
+                                            value: filter.resetValue
+                                        }), children: `${filter.groupName}: ${filter.name}` }, filter.id));
+                                }) }))] }), _jsx(Grid, { item: { area: 'items', alignSelf: results.length ? 'start' : 'stretch' }, container: { rowGap: 2 }, children: !loading && (_jsxs(_Fragment, { children: [results.length ? (results.map((result) => {
+                                    return _jsx(SearchResult, { ...result, accent: accent }, result.id);
+                                })) : (_jsx(Grid, { item: { alignSelf: 'stretch' }, children: _jsx(EmptyState, { message: submittedSearchValue === '' ? t('empty_search') : undefined }) })), onShowMore && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(Button, { variant: 'link', onClick: onShowMore, children: t('show_more') }) }))] })) })] })] }));
 });
 export default SearchResults;
 //# sourceMappingURL=SearchResults.js.map