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

package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.js

@@ -1,65 +1,93 @@
-import styled, { css, keyframes } from 'styled-components';
-import { lighten } from 'polished';
-import { Button, defaultThemeProp, StyledButton, StyledCard, StyledFlex, StyledIcon, StyledEmptyState, SummaryList, StyledText, tryCatch, StyledSummaryItem, StyledVisual } from '@pega/cosmos-react-core';
-import { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';
+import styled, { css } from 'styled-components';
+import { lighten, readableColor, rgba, transparentize } from 'polished';
+import { defaultThemeProp, StyledButton, StyledCard, StyledFlex, StyledIcon, StyledEmptyState, SummaryList, StyledText, tryCatch, StyledSummaryItem, StyledVisual, readableHue, Text, calculateFontSize, StyledSecondary } from '@pega/cosmos-react-core';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
-import { StyledSummaryListContent } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';
+import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';
+import { StyledTab } from '@pega/cosmos-react-core/lib/components/Tabs/Tab';
+import { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';
 const itemIconSize = '2rem';
+export const StyledNew = styled(Text)(({ theme }) => {
+    const readableBackground = readableHue(theme.base.palette['brand-primary'], theme.base.palette['primary-background']);
+    const readableTextColor = readableColor(readableBackground);
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    text-transform: uppercase;
+    background-color: ${readableBackground};
+    color: ${readableTextColor};
+    padding-inline: calc(0.75 * ${theme.base.spacing});
+    font-size: ${fontSize.xxs};
+    font-weight: ${theme.base['font-weight']['semi-bold']};
+  `;
+});
+StyledNew.defaultProps = defaultThemeProp;
+export const StyledBorderLine = styled.span(({ theme }) => {
+    const readableBackground = readableHue(theme.base.palette['brand-primary'], theme.base.palette['primary-background']);
+    return css `
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    content: '';
+    background-color: ${readableBackground};
+    height: 100%;
+    width: 0.125rem;
+  `;
+});
+StyledBorderLine.defaultProps = defaultThemeProp;
 export const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {
+    const color = theme.base.palette.light;
     const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
     const hoverColor = tryCatch(() => lighten(0.05, theme.components['app-shell'].nav['background-color']));
+    const secondaryColor = tryCatch(() => rgba(color, theme.base.transparency['transparent-2']));
+    const scrollbarColor = tryCatch(() => rgba(color, theme.base.transparency['transparent-3']));
     return css `
-    min-width: 20rem;
-    max-width: 20rem;
-    color: ${theme.base.palette.light};
-    overflow: hidden;
-    box-shadow: ${theme.base.shadow.low};
-    @media (min-width: ${theme.base.breakpoints.lg}) {
-      min-width: 23rem;
-      max-width: 23rem;
-    }
-    &:not(& &) {
-      background-color: ${theme.components['app-shell'].nav['background-color']};
-    }
-    ${StyledCardHeader} {
-      &:not(${StyledCard} ${StyledCard} > &) {
-        padding: ${theme.base.spacing};
-      }
-      ${StyledFlex} > ${StyledIcon} {
-        width: ${itemIconSize};
-        height: ${itemIconSize};
-        padding: calc(0.75 * ${theme.base.spacing});
-        border-radius: calc(3 * ${theme.base['border-radius']});
-        background-color: ${theme.base.palette.success};
-      }
-    }
-    ${StyledSummaryListContent} {
-      &:not(${StyledCard} ${StyledCard} > &) {
-        padding: 0;
-      }
+    max-height: min(calc(100vh - var(--headerHeight) - 4ch), 21ch);
+    overflow: auto;
+
+    ::-webkit-scrollbar-thumb {
+      box-shadow: inset 0 0 0.125rem 0.25rem ${scrollbarColor};
     }
-    ${StyledButton}:enabled:focus {
-      box-shadow: ${theme.base.shadow.focus};
+
+    ::-webkit-scrollbar-thumb:hover {
+      box-shadow: inset 0 0 0.125rem 0.25rem ${secondaryColor};
     }
+
+    ${theme.base.animation.timing.ease};
+
     ${StyledSummaryItem} {
+      position: relative;
       padding: ${theme.base.spacing};
-      border-top: ${theme.components.button['border-width']} solid ${borderColor};
       outline: none;
+
+      &:not(:first-of-type) {
+        border-top: ${theme.components.button['border-width']} solid ${borderColor};
+      }
+
       ${StyledVisual} ${StyledIcon} {
         width: ${itemIconSize};
         height: ${itemIconSize};
         padding: calc(0.75 * ${theme.base.spacing});
       }
+
       ${StyledButton} {
         visibility: hidden;
       }
+
+      ${StyledSecondary} ${StyledText} {
+        color: ${secondaryColor};
+      }
+
       &:not(:last-child) {
         border-bottom: none;
       }
+
       &:hover {
         background-color: ${hoverColor};
         cursor: pointer;
       }
+
       &:hover,
       &:focus,
       &:focus-within {
@@ -72,70 +100,98 @@ export const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) =>
         box-shadow: ${theme.base.shadow['focus-inset']};
       }
     }
+
     ${StyledEmptyState} {
-      padding-bottom: ${theme.base.spacing};
+      padding-block: ${theme.base.spacing};
       ${StyledIcon}, ${StyledText} {
-        color: ${theme.base.palette.light};
+        color: ${color};
       }
     }
   `;
 });
 StyledIntelligentGuidanceList.defaultProps = defaultThemeProp;
-export const StyledIntelligentGuidanceButton = styled(Button)(({ theme }) => {
-    return css `
-    box-shadow: ${theme.base.shadow.low};
-    color: ${theme.base.palette.light};
-    background-color: ${theme.base.palette.success};
-    width: 4rem;
-    height: 4rem;
-    svg {
-      width: 2.25rem;
-      height: 2.25rem;
-    }
-    ${StyledCount} {
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
-  `;
-});
-StyledIntelligentGuidanceButton.defaultProps = defaultThemeProp;
-const slideIn = keyframes `
-  0% {
-    transform: translateY(100%);
-  }
-  100% {
-    transform: translateY(0);
-  }
-`;
-export const StyledIntelligentGuidance = styled.div(({ theme, isCollapsed }) => {
+export const StyledIntelligentGuidance = styled(StyledCard)(({ theme, isCollapsed }) => {
+    const color = theme.base.palette.light;
+    const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
+    const tabPrimaryColor = theme.base.colors.blue.light;
+    const lightenedTabColor = tryCatch(() => transparentize(0.3, tabPrimaryColor)) ?? '';
     return css `
       position: fixed;
       inset-inline-start: calc(2 * ${theme.base.spacing} + var(--appshell-horizontal-offset, 0rem));
       transition: inset-inline-start ${theme.base.animation.speed}
-        ${theme.base.animation.timing.ease};
-      bottom: ${isCollapsed ? `calc(2 * ${theme.base.spacing}) ` : 0};
-      @media (min-width: ${theme.base.breakpoints.md}) {
-        bottom: 0;
-      }
+          ${theme.base.animation.timing.ease},
+        transform calc(4 * ${theme.base.animation.speed}) ${theme.base.animation.timing.ease};
+      bottom: 0;
       z-index: ${theme.base['z-index'].popover};
-      ${StyledIntelligentGuidanceList}:not(${StyledIntelligentGuidanceList} ${StyledIntelligentGuidanceList}) {
+      min-width: 20rem;
+      max-width: 20rem;
+      color: ${color};
+      overflow: hidden;
+      box-shadow: ${theme.base.shadow.low};
+
+      @media (min-width: ${theme.base.breakpoints.lg}) {
+        min-width: 23rem;
+        max-width: 23rem;
+      }
+
+      ${isCollapsed &&
+        css `
+        transform: translateY(calc(100% - var(--headerHeight)));
+      `}
+
+      &:not(& &) {
+        background-color: ${theme.components['app-shell'].nav['background-color']};
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        transition: transform calc(4 * ${theme.base.animation.speed})
-          ${theme.base.animation.timing.ease};
-        ${isCollapsed &&
-        css `
-          transform: translateY(calc(100% - var(--headerHeight)));
-        `}
-        ${StyledCardHeader} ${StyledButton} {
+      }
+      ${StyledCardHeader} {
+        & ${StyledButton} {
           transition: transform calc(2 * ${theme.base.animation.speed})
             ${theme.base.animation.timing.ease};
           transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};
         }
+
+        &:not(${StyledCard} ${StyledCard} > &) {
+          padding: ${theme.base.spacing};
+        }
+
+        ${StyledFlex} > ${StyledIcon} {
+          width: ${itemIconSize};
+          height: ${itemIconSize};
+          padding: calc(0.75 * ${theme.base.spacing});
+          border-radius: calc(3 * ${theme.base['border-radius']});
+          background-color: ${theme.base.palette.success};
+        }
+      }
+
+      ${StyledTabs} {
+        padding-inline: ${theme.base.spacing};
+        border-block: 0.0625rem solid ${borderColor};
+        ${StyledTab} {
+          flex: 1;
+          justify-content: center;
+          ${StyledCount} {
+            background-color: ${theme.base.palette.urgent};
+          }
+          span {
+            color: ${color};
+          }
+          ::after {
+            background-color: ${lightenedTabColor};
+          }
+          &[aria-selected='true'] {
+            span:not(${StyledCount}) {
+              color: ${tabPrimaryColor};
+            }
+            ::after {
+              background-color: ${tabPrimaryColor};
+            }
+          }
+        }
       }
-      ${StyledIntelligentGuidanceButton} {
-        animation: ${slideIn} calc(4 * ${theme.base.animation.speed});
+
+      ${StyledButton}:enabled:focus {
+        box-shadow: ${theme.base.shadow.focus};
       }
     `;
 });

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.styles.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { lighten } from 'polished';\n\nimport {\n  Button,\n  defaultThemeProp,\n  StyledButton,\n  StyledCard,\n  StyledFlex,\n  StyledIcon,\n  StyledEmptyState,\n  SummaryList,\n  StyledText,\n  tryCatch,\n  StyledSummaryItem,\n  StyledVisual\n} from '@pega/cosmos-react-core';\nimport { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledSummaryListContent } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';\n\nconst itemIconSize = '2rem';\n\nexport const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n  const hoverColor = tryCatch(() =>\n    lighten(0.05, theme.components['app-shell'].nav['background-color'])\n  );\n  return css`\n    min-width: 20rem;\n    max-width: 20rem;\n    color: ${theme.base.palette.light};\n    overflow: hidden;\n    box-shadow: ${theme.base.shadow.low};\n    @media (min-width: ${theme.base.breakpoints.lg}) {\n      min-width: 23rem;\n      max-width: 23rem;\n    }\n    &:not(& &) {\n      background-color: ${theme.components['app-shell'].nav['background-color']};\n    }\n    ${StyledCardHeader} {\n      &:not(${StyledCard} ${StyledCard} > &) {\n        padding: ${theme.base.spacing};\n      }\n      ${StyledFlex} > ${StyledIcon} {\n        width: ${itemIconSize};\n        height: ${itemIconSize};\n        padding: calc(0.75 * ${theme.base.spacing});\n        border-radius: calc(3 * ${theme.base['border-radius']});\n        background-color: ${theme.base.palette.success};\n      }\n    }\n    ${StyledSummaryListContent} {\n      &:not(${StyledCard} ${StyledCard} > &) {\n        padding: 0;\n      }\n    }\n    ${StyledButton}:enabled:focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n    ${StyledSummaryItem} {\n      padding: ${theme.base.spacing};\n      border-top: ${theme.components.button['border-width']} solid ${borderColor};\n      outline: none;\n      ${StyledVisual} ${StyledIcon} {\n        width: ${itemIconSize};\n        height: ${itemIconSize};\n        padding: calc(0.75 * ${theme.base.spacing});\n      }\n      ${StyledButton} {\n        visibility: hidden;\n      }\n      &:not(:last-child) {\n        border-bottom: none;\n      }\n      &:hover {\n        background-color: ${hoverColor};\n        cursor: pointer;\n      }\n      &:hover,\n      &:focus,\n      &:focus-within {\n        ${StyledButton} {\n          visibility: visible;\n        }\n      }\n      &:enabled:focus,\n      &:not([disabled]):focus {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n    }\n    ${StyledEmptyState} {\n      padding-bottom: ${theme.base.spacing};\n      ${StyledIcon}, ${StyledText} {\n        color: ${theme.base.palette.light};\n      }\n    }\n  `;\n});\n\nStyledIntelligentGuidanceList.defaultProps = defaultThemeProp;\n\nexport const StyledIntelligentGuidanceButton = styled(Button)(({ theme }) => {\n  return css`\n    box-shadow: ${theme.base.shadow.low};\n    color: ${theme.base.palette.light};\n    background-color: ${theme.base.palette.success};\n    width: 4rem;\n    height: 4rem;\n    svg {\n      width: 2.25rem;\n      height: 2.25rem;\n    }\n    ${StyledCount} {\n      position: absolute;\n      right: 0;\n      top: 0;\n    }\n  `;\n});\n\nStyledIntelligentGuidanceButton.defaultProps = defaultThemeProp;\n\nconst slideIn = keyframes`\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n`;\n\nexport interface StyledIntelligentGuidanceProps {\n  isCollapsed: boolean;\n  hasItems: boolean;\n}\n\nexport const StyledIntelligentGuidance = styled.div<StyledIntelligentGuidanceProps>(\n  ({ theme, isCollapsed }) => {\n    return css`\n      position: fixed;\n      inset-inline-start: calc(2 * ${theme.base.spacing} + var(--appshell-horizontal-offset, 0rem));\n      transition: inset-inline-start ${theme.base.animation.speed}\n        ${theme.base.animation.timing.ease};\n      bottom: ${isCollapsed ? `calc(2 * ${theme.base.spacing}) ` : 0};\n      @media (min-width: ${theme.base.breakpoints.md}) {\n        bottom: 0;\n      }\n      z-index: ${theme.base['z-index'].popover};\n      ${StyledIntelligentGuidanceList}:not(${StyledIntelligentGuidanceList} ${StyledIntelligentGuidanceList}) {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        transition: transform calc(4 * ${theme.base.animation.speed})\n          ${theme.base.animation.timing.ease};\n        ${isCollapsed &&\n        css`\n          transform: translateY(calc(100% - var(--headerHeight)));\n        `}\n        ${StyledCardHeader} ${StyledButton} {\n          transition: transform calc(2 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n          transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n        }\n      }\n      ${StyledIntelligentGuidanceButton} {\n        animation: ${slideIn} calc(4 * ${theme.base.animation.speed});\n      }\n    `;\n  }\n);\n\nStyledIntelligentGuidance.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"IntelligentGuidance.styles.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, readableColor, rgba, transparentize } from 'polished';\n\nimport {\n  defaultThemeProp,\n  StyledButton,\n  StyledCard,\n  StyledFlex,\n  StyledIcon,\n  StyledEmptyState,\n  SummaryList,\n  StyledText,\n  tryCatch,\n  StyledSummaryItem,\n  StyledVisual,\n  readableHue,\n  Text,\n  calculateFontSize,\n  StyledSecondary\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\nimport { StyledTab } from '@pega/cosmos-react-core/lib/components/Tabs/Tab';\nimport { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';\n\nconst itemIconSize = '2rem';\n\nexport const StyledNew = styled(Text)(({ theme }) => {\n  const readableBackground = readableHue(\n    theme.base.palette['brand-primary'],\n    theme.base.palette['primary-background']\n  );\n  const readableTextColor = readableColor(readableBackground);\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    text-transform: uppercase;\n    background-color: ${readableBackground};\n    color: ${readableTextColor};\n    padding-inline: calc(0.75 * ${theme.base.spacing});\n    font-size: ${fontSize.xxs};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n  `;\n});\n\nStyledNew.defaultProps = defaultThemeProp;\n\nexport const StyledBorderLine = styled.span(({ theme }) => {\n  const readableBackground = readableHue(\n    theme.base.palette['brand-primary'],\n    theme.base.palette['primary-background']\n  );\n\n  return css`\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    content: '';\n    background-color: ${readableBackground};\n    height: 100%;\n    width: 0.125rem;\n  `;\n});\n\nStyledBorderLine.defaultProps = defaultThemeProp;\n\nexport const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {\n  const color = theme.base.palette.light;\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n  const hoverColor = tryCatch(() =>\n    lighten(0.05, theme.components['app-shell'].nav['background-color'])\n  );\n  const secondaryColor = tryCatch(() => rgba(color, theme.base.transparency['transparent-2']));\n  const scrollbarColor = tryCatch(() => rgba(color, theme.base.transparency['transparent-3']));\n\n  return css`\n    max-height: min(calc(100vh - var(--headerHeight) - 4ch), 21ch);\n    overflow: auto;\n\n    ::-webkit-scrollbar-thumb {\n      box-shadow: inset 0 0 0.125rem 0.25rem ${scrollbarColor};\n    }\n\n    ::-webkit-scrollbar-thumb:hover {\n      box-shadow: inset 0 0 0.125rem 0.25rem ${secondaryColor};\n    }\n\n    ${theme.base.animation.timing.ease};\n\n    ${StyledSummaryItem} {\n      position: relative;\n      padding: ${theme.base.spacing};\n      outline: none;\n\n      &:not(:first-of-type) {\n        border-top: ${theme.components.button['border-width']} solid ${borderColor};\n      }\n\n      ${StyledVisual} ${StyledIcon} {\n        width: ${itemIconSize};\n        height: ${itemIconSize};\n        padding: calc(0.75 * ${theme.base.spacing});\n      }\n\n      ${StyledButton} {\n        visibility: hidden;\n      }\n\n      ${StyledSecondary} ${StyledText} {\n        color: ${secondaryColor};\n      }\n\n      &:not(:last-child) {\n        border-bottom: none;\n      }\n\n      &:hover {\n        background-color: ${hoverColor};\n        cursor: pointer;\n      }\n\n      &:hover,\n      &:focus,\n      &:focus-within {\n        ${StyledButton} {\n          visibility: visible;\n        }\n      }\n      &:enabled:focus,\n      &:not([disabled]):focus {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n    }\n\n    ${StyledEmptyState} {\n      padding-block: ${theme.base.spacing};\n      ${StyledIcon}, ${StyledText} {\n        color: ${color};\n      }\n    }\n  `;\n});\n\nStyledIntelligentGuidanceList.defaultProps = defaultThemeProp;\n\nexport interface StyledIntelligentGuidanceProps {\n  isCollapsed: boolean;\n  hasItems: boolean;\n}\n\nexport const StyledIntelligentGuidance = styled(StyledCard)<StyledIntelligentGuidanceProps>(\n  ({ theme, isCollapsed }) => {\n    const color = theme.base.palette.light;\n    const borderColor = tryCatch(() =>\n      lighten(0.1, theme.components['app-shell'].nav['background-color'])\n    );\n    const tabPrimaryColor = theme.base.colors.blue.light;\n    const lightenedTabColor = tryCatch(() => transparentize(0.3, tabPrimaryColor)) ?? '';\n\n    return css`\n      position: fixed;\n      inset-inline-start: calc(2 * ${theme.base.spacing} + var(--appshell-horizontal-offset, 0rem));\n      transition: inset-inline-start ${theme.base.animation.speed}\n          ${theme.base.animation.timing.ease},\n        transform calc(4 * ${theme.base.animation.speed}) ${theme.base.animation.timing.ease};\n      bottom: 0;\n      z-index: ${theme.base['z-index'].popover};\n      min-width: 20rem;\n      max-width: 20rem;\n      color: ${color};\n      overflow: hidden;\n      box-shadow: ${theme.base.shadow.low};\n\n      @media (min-width: ${theme.base.breakpoints.lg}) {\n        min-width: 23rem;\n        max-width: 23rem;\n      }\n\n      ${isCollapsed &&\n      css`\n        transform: translateY(calc(100% - var(--headerHeight)));\n      `}\n\n      &:not(& &) {\n        background-color: ${theme.components['app-shell'].nav['background-color']};\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n      ${StyledCardHeader} {\n        & ${StyledButton} {\n          transition: transform calc(2 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n          transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n        }\n\n        &:not(${StyledCard} ${StyledCard} > &) {\n          padding: ${theme.base.spacing};\n        }\n\n        ${StyledFlex} > ${StyledIcon} {\n          width: ${itemIconSize};\n          height: ${itemIconSize};\n          padding: calc(0.75 * ${theme.base.spacing});\n          border-radius: calc(3 * ${theme.base['border-radius']});\n          background-color: ${theme.base.palette.success};\n        }\n      }\n\n      ${StyledTabs} {\n        padding-inline: ${theme.base.spacing};\n        border-block: 0.0625rem solid ${borderColor};\n        ${StyledTab} {\n          flex: 1;\n          justify-content: center;\n          ${StyledCount} {\n            background-color: ${theme.base.palette.urgent};\n          }\n          span {\n            color: ${color};\n          }\n          ::after {\n            background-color: ${lightenedTabColor};\n          }\n          &[aria-selected='true'] {\n            span:not(${StyledCount}) {\n              color: ${tabPrimaryColor};\n            }\n            ::after {\n              background-color: ${tabPrimaryColor};\n            }\n          }\n        }\n      }\n\n      ${StyledButton}:enabled:focus {\n        box-shadow: ${theme.base.shadow.focus};\n      }\n    `;\n  }\n);\n\nStyledIntelligentGuidance.defaultProps = defaultThemeProp;\n"]}

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

@@ -5,26 +5,30 @@ export interface IntelligentGuidanceItemProps {
     id: string;
     /** The label text of the item. */
     label: string;
-    /**
-     * Name of the icon (to be selected from default Pega icon set)
-     */
+    /** Name of the icon (to be selected from default Pega icon set) */
     icon: IconProps['name'];
     /** Represents the type of task */
     type: string;
-    /**
-     * Click handler for the action button.
-     */
+    /** Click handler for the action button. */
     onClick: (e: MouseEvent | KeyboardEvent) => void;
-    /**
-     * Dismiss handler for the action button.
-     */
+    /** Dismiss handler for the action button. */
     onDismiss?: (id: IntelligentGuidanceItemProps['id'], e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>) => void;
+    /** Flag that indicates if item is new
+     * @default false
+     */
+    new?: boolean;
 }
 export default interface IntelligentGuidanceProps extends BaseProps, NoChildrenProp {
     /** List of guidance items. */
     items: IntelligentGuidanceItemProps[];
+    /** List of guidance previous items. */
+    previousItems?: IntelligentGuidanceItemProps[];
     /** Header text. */
     heading: string;
+    /** Flag that indicates if intelligent guidance is collapsed */
+    isCollapsed: boolean;
+    /** Callback when expand/collapse button is clicked */
+    onExpandCollapse: () => void;
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.types.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE/E,MAAM,WAAW,4BAA4B;IAC3C,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACjD;;OAEG;IACH,SAAS,CAAC,EAAE,CACV,EAAE,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACtC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;CACX;AAED,MAAM,CAAC,OAAO,WAAW,wBAAyB,SAAQ,SAAS,EAAE,cAAc;IACjF,8BAA8B;IAC9B,KAAK,EAAE,4BAA4B,EAAE,CAAC;IACtC,mBAAmB;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
+{"version":3,"file":"IntelligentGuidance.types.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE/E,MAAM,WAAW,4BAA4B;IAC3C,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACjD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,CACV,EAAE,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACtC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;IACV;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,CAAC,OAAO,WAAW,wBAAyB,SAAQ,SAAS,EAAE,cAAc;IACjF,8BAA8B;IAC9B,KAAK,EAAE,4BAA4B,EAAE,CAAC;IACtC,uCAAuC;IACvC,aAAa,CAAC,EAAE,4BAA4B,EAAE,CAAC;IAC/C,mBAAmB;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,WAAW,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.types.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, KeyboardEvent, Ref } from 'react';\n\nimport { BaseProps, IconProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface IntelligentGuidanceItemProps {\n  /** Unique id for item */\n  id: string;\n  /** The label text of the item. */\n  label: string;\n  /**\n   * Name of the icon (to be selected from default Pega icon set)\n   */\n  icon: IconProps['name'];\n  /** Represents the type of task */\n  type: string;\n  /**\n   * Click handler for the action button.\n   */\n  onClick: (e: MouseEvent | KeyboardEvent) => void;\n  /**\n   * Dismiss handler for the action button.\n   */\n  onDismiss?: (\n    id: IntelligentGuidanceItemProps['id'],\n    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n  ) => void;\n}\n\nexport default interface IntelligentGuidanceProps extends BaseProps, NoChildrenProp {\n  /** List of guidance items. */\n  items: IntelligentGuidanceItemProps[];\n  /** Header text. */\n  heading: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"IntelligentGuidance.types.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, KeyboardEvent, Ref } from 'react';\n\nimport { BaseProps, IconProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface IntelligentGuidanceItemProps {\n  /** Unique id for item */\n  id: string;\n  /** The label text of the item. */\n  label: string;\n  /** Name of the icon (to be selected from default Pega icon set) */\n  icon: IconProps['name'];\n  /** Represents the type of task */\n  type: string;\n  /** Click handler for the action button. */\n  onClick: (e: MouseEvent | KeyboardEvent) => void;\n  /** Dismiss handler for the action button. */\n  onDismiss?: (\n    id: IntelligentGuidanceItemProps['id'],\n    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n  ) => void;\n  /** Flag that indicates if item is new\n   * @default false\n   */\n  new?: boolean;\n}\n\nexport default interface IntelligentGuidanceProps extends BaseProps, NoChildrenProp {\n  /** List of guidance items. */\n  items: IntelligentGuidanceItemProps[];\n  /** List of guidance previous items. */\n  previousItems?: IntelligentGuidanceItemProps[];\n  /** Header text. */\n  heading: string;\n  /** Flag that indicates if intelligent guidance is collapsed */\n  isCollapsed: boolean;\n  /** Callback when expand/collapse button is clicked */\n  onExpandCollapse: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

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

@@ -1,3 +1,3 @@
 export { default } from './IntelligentGuidance';
-export { default as IntelligentGuidanceProps } from './IntelligentGuidance.types';
+export type { default as IntelligentGuidanceProps } from './IntelligentGuidance.types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,YAAY,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,6BAA6B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export { default } from './IntelligentGuidance';\nexport { default as IntelligentGuidanceProps } from './IntelligentGuidance.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export { default } from './IntelligentGuidance';\nexport type { default as IntelligentGuidanceProps } from './IntelligentGuidance.types';\n"]}

package/lib/components/Predictions/Predictions.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import PredictionsProps from './Predictions.types';
+declare const Predictions: FunctionComponent<PredictionsProps & ForwardProps>;
+export default Predictions;
+//# sourceMappingURL=Predictions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Predictions.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,gBAAoC,MAAM,qBAAqB,CAAC;AAsFvE,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqCnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Predictions/Predictions.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { registerIcon, useI18n, Modal, useModalManager, InfoDialog, StyledLabel, Text, SummaryList } from '@pega/cosmos-react-core';
+import * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';
+import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
+registerIcon(polarisIcon, informationIcon);
+const PredictionsList = forwardRef(({ items: itemsProp, progress, ...restProps }, ref) => {
+    const t = useI18n();
+    const [currentItemIdTarget, setCurrentItemIdTarget] = useState();
+    const currentItem = itemsProp?.find(({ id }) => id === currentItemIdTarget?.id);
+    const items = useMemo(() => (itemsProp ?? []).map(item => ({
+        id: item.id,
+        primary: _jsx(StyledLabel, { forwardedAs: 'span', children: item.label }),
+        secondary: (_jsx(Text, { variant: 'h1', as: 'span', children: item.value })),
+        overflowStrategy: 'ellipsis',
+        actions: item.additionalInfo
+            ? [
+                {
+                    id: item.id,
+                    text: t('learn_more'),
+                    icon: 'information',
+                    onClick: (id, e) => {
+                        setCurrentItemIdTarget({
+                            id: item.id,
+                            target: e.currentTarget
+                        });
+                    }
+                }
+            ]
+            : undefined
+    })), [itemsProp]);
+    return (_jsxs(_Fragment, { children: [_jsx(SummaryList, { ...restProps, loading: progress, ref: ref, items: items }), currentItemIdTarget && currentItem?.additionalInfo && (_jsx(InfoDialog, { heading: currentItem.label, target: currentItemIdTarget.target, onDismiss: () => {
+                    setCurrentItemIdTarget(undefined);
+                }, children: currentItem.additionalInfo }))] }));
+});
+const PredictionsViewAllModal = ({ count, progress, ...restProps }) => {
+    const t = useI18n();
+    return (_jsx(Modal, { heading: t('all_predictions'), count: count, progress: progress, children: _jsx(PredictionsList, { ...restProps }) }));
+};
+const Predictions = forwardRef(({ count, items, progress, ...restProps }, ref) => {
+    const t = useI18n();
+    const { create } = useModalManager();
+    const viewAllModalRef = useRef();
+    useEffect(() => {
+        viewAllModalRef.current?.update({
+            items,
+            progress,
+            count
+        });
+    }, [items, progress, count]);
+    return (_jsx(PredictionsList, { ...restProps, ref: ref, name: t('predictions'), headingTag: 'h3', icon: 'polaris', count: count, items: items?.slice(0, 3), progress: progress, onViewAll: () => {
+            viewAllModalRef.current = create(PredictionsViewAllModal, {
+                items,
+                progress,
+                count
+            });
+        } }));
+});
+export default Predictions;
+//# sourceMappingURL=Predictions.js.map

package/lib/components/Predictions/Predictions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Predictions.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,YAAY,EACZ,OAAO,EACP,KAAK,EAEL,eAAe,EAEf,UAAU,EAEV,WAAW,EACX,IAAI,EACJ,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAC9F,OAAO,KAAK,eAAe,MAAM,oEAAoE,CAAC;AAItG,YAAY,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAE3C,MAAM,eAAe,GAEjB,UAAU,CACZ,CACE,EACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,GAAG,SAAS,EAC8E,EAC5F,GAA4B,EAC5B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,EAM3D,CAAC;IACJ,MAAM,WAAW,GAAG,SAAS,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,mBAAmB,EAAE,EAAE,CAAC,CAAC;IAEhF,MAAM,KAAK,GAAsB,OAAO,CACtC,GAAG,EAAE,CACH,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC7B,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,OAAO,EAAE,KAAC,WAAW,IAAC,WAAW,EAAC,MAAM,YAAE,IAAI,CAAC,KAAK,GAAe;QACnE,SAAS,EAAE,CACT,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,IAAI,CAAC,KAAK,GACN,CACR;QACD,gBAAgB,EAAE,UAAU;QAC5B,OAAO,EAAE,IAAI,CAAC,cAAc;YAC1B,CAAC,CAAC;gBACE;oBACE,EAAE,EAAE,IAAI,CAAC,EAAE;oBACX,IAAI,EAAE,CAAC,CAAC,YAAY,CAAC;oBACrB,IAAI,EAAE,aAAa;oBACnB,OAAO,EAAE,CACP,EAAU,EACV,CAAuE,EACvE,EAAE;wBACF,sBAAsB,CAAC;4BACrB,EAAE,EAAE,IAAI,CAAC,EAAE;4BACX,MAAM,EAAE,CAAC,CAAC,aAAa;yBACxB,CAAC,CAAC;oBACL,CAAC;iBACF;aACF;YACH,CAAC,CAAC,SAAS;KACd,CAAC,CAAC,EACL,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,WAAW,OAAK,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,GAAI,EACxE,mBAAmB,IAAI,WAAW,EAAE,cAAc,IAAI,CACrD,KAAC,UAAU,IACT,OAAO,EAAE,WAAW,CAAC,KAAK,EAC1B,MAAM,EAAE,mBAAmB,CAAC,MAAM,EAClC,SAAS,EAAE,GAAG,EAAE;oBACd,sBAAsB,CAAC,SAAS,CAAC,CAAC;gBACpC,CAAC,YAEA,WAAW,CAAC,cAAc,GAChB,CACd,IACA,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAoB,EAAE,EAAE;IACtF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,KAAC,KAAK,IAAC,OAAO,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,YACpE,KAAC,eAAe,OAAK,SAAS,GAAI,GAC5B,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAAuD,UAAU,CAChF,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAqC,EAC3E,GAA4B,EAC5B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;IACrC,MAAM,eAAe,GAAG,MAAM,EAAkC,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,OAAO,EAAE,MAAM,CAAC;YAC9B,KAAK;YACL,QAAQ;YACR,KAAK;SACN,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,KAAC,eAAe,OACV,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,CAAC,CAAC,aAAa,CAAC,EACtB,UAAU,EAAC,IAAI,EACf,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EACzB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,GAAG,EAAE;YACd,eAAe,CAAC,OAAO,GAAG,MAAM,CAAC,uBAAuB,EAAE;gBACxD,KAAK;gBACL,QAAQ;gBACR,KAAK;aACN,CAAC,CAAC;QACL,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n  FC,\n  forwardRef,\n  FunctionComponent,\n  MouseEvent,\n  PropsWithoutRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  registerIcon,\n  useI18n,\n  Modal,\n  SummaryListProps,\n  useModalManager,\n  SummaryListItem,\n  InfoDialog,\n  ModalMethods,\n  StyledLabel,\n  Text,\n  SummaryList\n} from '@pega/cosmos-react-core';\nimport * as polarisIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\n\nimport PredictionsProps, { PredictionItem } from './Predictions.types';\n\nregisterIcon(polarisIcon, informationIcon);\n\nconst PredictionsList: FC<\n  PredictionsProps & Pick<SummaryListProps, 'onViewAll' | 'name' | 'icon'> & ForwardProps\n> = forwardRef(\n  (\n    {\n      items: itemsProp,\n      progress,\n      ...restProps\n    }: PropsWithoutRef<PredictionsProps & Pick<SummaryListProps, 'onViewAll' | 'name' | 'icon'>>,\n    ref: PredictionsProps['ref']\n  ) => {\n    const t = useI18n();\n    const [currentItemIdTarget, setCurrentItemIdTarget] = useState<\n      | {\n          id: PredictionItem['id'];\n          target: HTMLButtonElement | HTMLAnchorElement | HTMLInputElement;\n        }\n      | undefined\n    >();\n    const currentItem = itemsProp?.find(({ id }) => id === currentItemIdTarget?.id);\n\n    const items: SummaryListItem[] = useMemo(\n      () =>\n        (itemsProp ?? []).map(item => ({\n          id: item.id,\n          primary: <StyledLabel forwardedAs='span'>{item.label}</StyledLabel>,\n          secondary: (\n            <Text variant='h1' as='span'>\n              {item.value}\n            </Text>\n          ),\n          overflowStrategy: 'ellipsis',\n          actions: item.additionalInfo\n            ? [\n                {\n                  id: item.id,\n                  text: t('learn_more'),\n                  icon: 'information',\n                  onClick: (\n                    id: string,\n                    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n                  ) => {\n                    setCurrentItemIdTarget({\n                      id: item.id,\n                      target: e.currentTarget\n                    });\n                  }\n                }\n              ]\n            : undefined\n        })),\n      [itemsProp]\n    );\n\n    return (\n      <>\n        <SummaryList {...restProps} loading={progress} ref={ref} items={items} />\n        {currentItemIdTarget && currentItem?.additionalInfo && (\n          <InfoDialog\n            heading={currentItem.label}\n            target={currentItemIdTarget.target}\n            onDismiss={() => {\n              setCurrentItemIdTarget(undefined);\n            }}\n          >\n            {currentItem.additionalInfo}\n          </InfoDialog>\n        )}\n      </>\n    );\n  }\n);\n\nconst PredictionsViewAllModal = ({ count, progress, ...restProps }: PredictionsProps) => {\n  const t = useI18n();\n  return (\n    <Modal heading={t('all_predictions')} count={count} progress={progress}>\n      <PredictionsList {...restProps} />\n    </Modal>\n  );\n};\n\nconst Predictions: FunctionComponent<PredictionsProps & ForwardProps> = forwardRef(\n  (\n    { count, items, progress, ...restProps }: PropsWithoutRef<PredictionsProps>,\n    ref: PredictionsProps['ref']\n  ) => {\n    const t = useI18n();\n    const { create } = useModalManager();\n    const viewAllModalRef = useRef<ModalMethods<PredictionsProps>>();\n\n    useEffect(() => {\n      viewAllModalRef.current?.update({\n        items,\n        progress,\n        count\n      });\n    }, [items, progress, count]);\n\n    return (\n      <PredictionsList\n        {...restProps}\n        ref={ref}\n        name={t('predictions')}\n        headingTag='h3'\n        icon='polaris'\n        count={count}\n        items={items?.slice(0, 3)}\n        progress={progress}\n        onViewAll={() => {\n          viewAllModalRef.current = create(PredictionsViewAllModal, {\n            items,\n            progress,\n            count\n          });\n        }}\n      />\n    );\n  }\n);\n\nexport default Predictions;\n"]}

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

@@ -0,0 +1,23 @@
+import { ReactNode, Ref } from 'react';
+import { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+export interface PredictionItem {
+    /** A unique id to represent the item. */
+    id: string;
+    /** Label for the prediction item. */
+    label: string;
+    /** Value for the prediction item. */
+    value: string;
+    /** Additional prediction information rendered in a dialog. */
+    additionalInfo?: ReactNode;
+}
+export default interface PredictionsProps extends BaseProps, NoChildrenProp {
+    /** Integer representing the total count of items. */
+    count?: number;
+    /** An array of PredictionItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. */
+    items?: PredictionItem[];
+    /** Show a progress indicator when initially fetching list data. */
+    progress?: boolean;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+//# sourceMappingURL=Predictions.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Predictions.types.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACzE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oKAAoK;IACpK,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/Predictions/Predictions.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Predictions.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Predictions.types.js","sourceRoot":"","sources":["../../../src/components/Predictions/Predictions.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface PredictionItem {\n  /** A unique id to represent the item. */\n  id: string;\n  /** Label for the prediction item. */\n  label: string;\n  /** Value for the prediction item. */\n  value: string;\n  /** Additional prediction information rendered in a dialog. */\n  additionalInfo?: ReactNode;\n}\n\nexport default interface PredictionsProps extends BaseProps, NoChildrenProp {\n  /** Integer representing the total count of items. */\n  count?: number;\n  /** An array of PredictionItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. */\n  items?: PredictionItem[];\n  /** Show a progress indicator when initially fetching list data. */\n  progress?: boolean;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './Predictions';
+export type { default as PredictionsProps } from './Predictions.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Predictions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/components/Predictions/index.js

@@ -0,0 +1,2 @@
+export { default } from './Predictions';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Predictions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default } from './Predictions';\nexport type { default as PredictionsProps } from './Predictions.types';\n"]}

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

@@ -26,7 +26,7 @@ export interface SelectFilterProps extends BaseFilterProps {
     items: SelectFilterItemProps[];
     /**
      * Determines if the filter will render as a RadioButtonGroup or CheckboxGroup.
-     * @default "multi-select"
+     * @default 'multi-select'
      */
     selectType?: 'single-select' | 'multi-select';
 }
@@ -46,12 +46,12 @@ export interface TextFilterProps extends BaseFilterProps {
     value?: string;
     /**
      * Placeholder text. The default value is a locale translation of 'Search…'
-     * @default "Search…"
+     * @default 'Search…'
      */
     placeholder?: string;
 }
-export declare type FilterProps = SelectFilterProps;
-export declare type ActiveFilters = ActiveSelectFilter;
+export type FilterProps = SelectFilterProps;
+export type ActiveFilters = ActiveSelectFilter;
 export interface SearchResultProps {
     /** The id of the search result to be displayed. */
     id: string;
@@ -73,7 +73,7 @@ interface SelectFilterEvent extends BaseFilterEvent {
     type: 'select';
     value: SelectFilterItemProps;
 }
-export declare type FilterEvent = SelectFilterEvent;
+export type FilterEvent = SelectFilterEvent;
 export interface SearchResultsProps extends NoChildrenProp {
     /** A set of results to render for a given search. */
     results: SearchResultProps[];

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.types.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchResults.types.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.types.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport {\n  LinkProps,\n  MetaListProps,\n  NoChildrenProp,\n  OmitStrict,\n  RadioCheckProps,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\n\ninterface BaseFilterProps {\n  /** The name of the filter. */\n  name: string;\n  /**\n   * Determines if the filter will start in an expanded state.\n   * @default true\n   */\n  expanded?: boolean;\n}\n\nexport interface SelectFilterItemProps {\n  /** The id for the filter option. */\n  id: NonNullable<RadioCheckProps['id']>;\n  /** The label for the filter option. */\n  label: RadioCheckProps['label'];\n  /** Determines if the filter option is active or not. */\n  checked: RadioCheckProps['checked'];\n  /** The name for the filter item that will show in the selected filters section */\n  name: NonNullable<RadioCheckProps['name']>;\n}\n\nexport interface SelectFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a select filter. */\n  type: 'select';\n  /** The set of options for the filter. */\n  items: SelectFilterItemProps[];\n  /**\n   * Determines if the filter will render as a RadioButtonGroup or CheckboxGroup.\n   * @default \"multi-select\"\n   */\n  selectType?: 'single-select' | 'multi-select';\n}\n\nexport interface ActiveSelectFilter {\n  id: SelectFilterItemProps['id'];\n  name: SelectFilterItemProps['name'];\n  resetValue: SelectFilterItemProps & { checked: false };\n  groupName: SelectFilterProps['name'];\n  type: SelectFilterProps['type'];\n}\n\nexport interface TextFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a text filter. */\n  type: 'text';\n  /** The value of the filter. */\n  value?: string;\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search…'\n   * @default \"Search…\"\n   */\n  placeholder?: string;\n}\n\n// For use later: export type FilterProps = TextFilterProps | SelectFilterProps;\nexport type FilterProps = SelectFilterProps;\n\nexport type ActiveFilters = ActiveSelectFilter;\n\nexport interface SearchResultProps {\n  /** The id of the search result to be displayed. */\n  id: string;\n  /** The title of the search result. */\n  title: string;\n  /** LinkProps to be passed to . */\n  link: OmitStrict<LinkProps, 'children' | 'variant' | 'icon'>;\n  /** A description for the search result. */\n  description?: string;\n  /** A list of elements to be rendered within a MetaList categorizing the result. */\n  meta?: MetaListProps['items'];\n  /** Accents the search results with text that matches the regex */\n  accent?: RegExp;\n}\n\ninterface BaseFilterEvent {\n  name: string;\n}\ninterface SelectFilterEvent extends BaseFilterEvent {\n  type: 'select';\n  value: SelectFilterItemProps;\n}\n\n// For use later: export type FilterEvent = SelectFilterEvent | TextFilterEvent;\nexport type FilterEvent = SelectFilterEvent;\n\nexport interface SearchResultsProps extends NoChildrenProp {\n  /** A set of results to render for a given search. */\n  results: SearchResultProps[];\n  /** Props related to the SearchInput. */\n  searchInputProps: SearchInputProps;\n  /** The number of total results related to a given search. */\n  count: number;\n  /** A set of filters and their current states for a given search. */\n  filters: FilterProps[];\n  /** Callback that is fired when the value of a filter changes. */\n  onFilterChange?: (filter: FilterEvent) => void;\n  /** Callback that is fired when the Clear all button is clicked. */\n  onClearAllFilters?: () => void;\n  /** Callback that is fired when the Clear button is clicked within a filter. */\n  onClearFilter?: (name: BaseFilterProps['name']) => void;\n  /** Callback that will render a Show more button at the bottom of the results and is fired when that button is clicked. */\n  onShowMore?: () => void;\n  /** Sets a loading indicator if true */\n  loading?: boolean;\n  /** A ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"SearchResults.types.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport {\n  LinkProps,\n  MetaListProps,\n  NoChildrenProp,\n  OmitStrict,\n  RadioCheckProps,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\n\ninterface BaseFilterProps {\n  /** The name of the filter. */\n  name: string;\n  /**\n   * Determines if the filter will start in an expanded state.\n   * @default true\n   */\n  expanded?: boolean;\n}\n\nexport interface SelectFilterItemProps {\n  /** The id for the filter option. */\n  id: NonNullable<RadioCheckProps['id']>;\n  /** The label for the filter option. */\n  label: RadioCheckProps['label'];\n  /** Determines if the filter option is active or not. */\n  checked: RadioCheckProps['checked'];\n  /** The name for the filter item that will show in the selected filters section */\n  name: NonNullable<RadioCheckProps['name']>;\n}\n\nexport interface SelectFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a select filter. */\n  type: 'select';\n  /** The set of options for the filter. */\n  items: SelectFilterItemProps[];\n  /**\n   * Determines if the filter will render as a RadioButtonGroup or CheckboxGroup.\n   * @default 'multi-select'\n   */\n  selectType?: 'single-select' | 'multi-select';\n}\n\nexport interface ActiveSelectFilter {\n  id: SelectFilterItemProps['id'];\n  name: SelectFilterItemProps['name'];\n  resetValue: SelectFilterItemProps & { checked: false };\n  groupName: SelectFilterProps['name'];\n  type: SelectFilterProps['type'];\n}\n\nexport interface TextFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a text filter. */\n  type: 'text';\n  /** The value of the filter. */\n  value?: string;\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search…'\n   * @default 'Search…'\n   */\n  placeholder?: string;\n}\n\n// For use later: export type FilterProps = TextFilterProps | SelectFilterProps;\nexport type FilterProps = SelectFilterProps;\n\nexport type ActiveFilters = ActiveSelectFilter;\n\nexport interface SearchResultProps {\n  /** The id of the search result to be displayed. */\n  id: string;\n  /** The title of the search result. */\n  title: string;\n  /** LinkProps to be passed to . */\n  link: OmitStrict<LinkProps, 'children' | 'variant' | 'icon'>;\n  /** A description for the search result. */\n  description?: string;\n  /** A list of elements to be rendered within a MetaList categorizing the result. */\n  meta?: MetaListProps['items'];\n  /** Accents the search results with text that matches the regex */\n  accent?: RegExp;\n}\n\ninterface BaseFilterEvent {\n  name: string;\n}\ninterface SelectFilterEvent extends BaseFilterEvent {\n  type: 'select';\n  value: SelectFilterItemProps;\n}\n\n// For use later: export type FilterEvent = SelectFilterEvent | TextFilterEvent;\nexport type FilterEvent = SelectFilterEvent;\n\nexport interface SearchResultsProps extends NoChildrenProp {\n  /** A set of results to render for a given search. */\n  results: SearchResultProps[];\n  /** Props related to the SearchInput. */\n  searchInputProps: SearchInputProps;\n  /** The number of total results related to a given search. */\n  count: number;\n  /** A set of filters and their current states for a given search. */\n  filters: FilterProps[];\n  /** Callback that is fired when the value of a filter changes. */\n  onFilterChange?: (filter: FilterEvent) => void;\n  /** Callback that is fired when the Clear all button is clicked. */\n  onClearAllFilters?: () => void;\n  /** Callback that is fired when the Clear button is clicked within a filter. */\n  onClearFilter?: (name: BaseFilterProps['name']) => void;\n  /** Callback that will render a Show more button at the bottom of the results and is fired when that button is clicked. */\n  onShowMore?: () => void;\n  /** Sets a loading indicator if true */\n  loading?: boolean;\n  /** A ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

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

@@ -1,3 +1,3 @@
 export { default } from './SearchResults';
-export { SearchResultsProps, SearchResultProps, FilterEvent } from './SearchResults.types';
+export type { SearchResultsProps, SearchResultProps, FilterEvent } from './SearchResults.types';
 //# sourceMappingURL=index.d.ts.map