@pega/cosmos-react-work 4.0.0-dev.9.0 → 4.0.0-rc.1

package/lib/components/IntelligentGuidance/IntelligentGuidance.js

@@ -1,24 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
-import { Icon, registerIcon, useI18n, Count, useBreakpoint, useAfterInitialEffect } from '@pega/cosmos-react-core';
-import * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';
-import { StyledIntelligentGuidanceList, StyledIntelligentGuidance, StyledIntelligentGuidanceButton } from './IntelligentGuidance.styles';
-registerIcon(polarisSolidIcon);
-const IntelligentGuidance = forwardRef(({ items, heading, isCollapsed, onExpandCollapse, ...restProps }, ref) => {
+import { Icon, useI18n, useAfterInitialEffect, Text, Tabs, CardHeader, TabPanel, Flex, Count, Actions } from '@pega/cosmos-react-core';
+import { StyledIntelligentGuidanceList, StyledIntelligentGuidance, StyledNew, StyledBorderLine } from './IntelligentGuidance.styles';
+const IntelligentGuidance = forwardRef(function IntelligentGuidance({ items, previousItems, heading, isCollapsed, onExpandCollapse, ...restProps }, ref) {
     const t = useI18n();
-    const isMediumOrAbove = useBreakpoint('md');
-    const summaryListRef = useRef(null);
+    const headerRef = useRef(null);
     const toggleButtonRef = useRef(null);
-    const listItems = items.map(item => {
+    const [currentTab, setCurrentTab] = useState('current');
+    const listItems = (currentTab === 'current' ? items : previousItems ?? []).map(item => {
         return {
             id: item.id,
             visual: _jsx(Icon, { name: item.icon }),
-            primary: item.label,
-            secondary: item.type,
+            primary: (_jsxs(_Fragment, { children: [item.label, item.new && (_jsxs(_Fragment, { children: [_jsx(StyledNew, { children: t('new') }), _jsx(StyledBorderLine, {})] }))] })),
+            secondary: _jsx(Text, { variant: 'secondary', children: item.type }),
+            contextualLabel: item.label,
             actions: item.onDismiss
                 ? [
                     {
-                        text: t('dismiss_label_a11y', [item.label]),
+                        text: t('dismiss'),
                         id: item.id,
                         icon: 'times',
                         onClick: (id, e) => {
@@ -42,10 +41,10 @@ const IntelligentGuidance = forwardRef(({ items, heading, isCollapsed, onExpandC
     });
     const [headerHeight, setHeaderHeight] = useState(0);
     useLayoutEffect(() => {
-        if (summaryListRef.current) {
-            setHeaderHeight(summaryListRef.current.querySelector('header')?.offsetHeight || 0);
+        if (headerRef.current) {
+            setHeaderHeight(headerRef.current?.offsetHeight || 0);
         }
-    }, [summaryListRef.current]);
+    }, [headerRef.current]);
     // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.
     useAfterInitialEffect(() => {
         if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {
@@ -55,18 +54,30 @@ const IntelligentGuidance = forwardRef(({ items, heading, isCollapsed, onExpandC
             }, 1000);
         }
     }, [isCollapsed]);
-    return (_jsx(StyledIntelligentGuidance, { ...restProps, ref: ref, role: 'region', "aria-live": 'polite', "aria-relevant": 'all', isCollapsed: isCollapsed, hasItems: !!items.length, children: isMediumOrAbove || !isCollapsed ? (_jsx(StyledIntelligentGuidanceList, { ref: summaryListRef, icon: 'polaris-solid', name: heading, count: items.length, items: listItems, actions: [
-                {
-                    text: t(isCollapsed ? 'expand' : 'collapse'),
-                    id: 'IntelligentGuidanceButton',
-                    icon: 'caret-down',
-                    'aria-label': isCollapsed
-                        ? t('expand_noun', [heading])
-                        : t('collapse_noun', [heading]),
-                    onClick: onExpandCollapse,
-                    ref: toggleButtonRef
-                }
-            ], EmptyStateText: t('no_recommendations'), style: { '--headerHeight': `${headerHeight}px` } })) : (_jsxs(StyledIntelligentGuidanceButton, { variant: 'simple', "aria-label": isCollapsed ? t('expand_noun', [heading]) : t('collapse_noun', [heading]), icon: true, onClick: onExpandCollapse, children: [_jsx(Icon, { name: 'polaris-solid' }), _jsx(Count, { children: items.length })] })) }));
+    const intelligentGuidanceList = (_jsx(StyledIntelligentGuidanceList, { items: listItems, noItemsText: t('no_recommendations') }));
+    return (_jsxs(StyledIntelligentGuidance, { ...restProps, ref: ref, role: 'region', "aria-live": 'polite', "aria-relevant": 'all', isCollapsed: isCollapsed, hasItems: !!items.length, style: { '--headerHeight': `${headerHeight}px` }, children: [_jsxs(CardHeader, { ref: headerRef, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h2', children: heading }), _jsx(Count, { children: items.length + (previousItems?.length ?? 0) })] }), _jsx(Actions, { items: [
+                            {
+                                text: t(isCollapsed ? 'expand' : 'collapse'),
+                                id: 'IntelligentGuidanceButton',
+                                icon: 'caret-down',
+                                'aria-label': isCollapsed
+                                    ? t('expand_noun', [heading])
+                                    : t('collapse_noun', [heading]),
+                                onClick: onExpandCollapse,
+                                ref: toggleButtonRef
+                            }
+                        ] })] }), previousItems ? (_jsxs(_Fragment, { children: [_jsx(Tabs, { tabs: [
+                            {
+                                id: 'current',
+                                name: t('current'),
+                                count: items.filter(item => item.new).length || undefined
+                            },
+                            {
+                                id: 'previous',
+                                name: t('previous'),
+                                count: previousItems.filter(item => item.new).length || undefined
+                            }
+                        ], currentTabId: currentTab, onTabClick: setCurrentTab }), _jsx(TabPanel, { tabId: currentTab, children: intelligentGuidanceList })] })) : (intelligentGuidanceList)] }));
 });
 export default IntelligentGuidance;
 //# sourceMappingURL=IntelligentGuidance.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  Icon,\n  registerIcon,\n  SummaryListItem,\n  useI18n,\n  Count,\n  useBreakpoint,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\n\nimport {\n  StyledIntelligentGuidanceList,\n  StyledIntelligentGuidance,\n  StyledIntelligentGuidanceButton\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nregisterIcon(polarisSolidIcon);\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n  (\n    {\n      items,\n      heading,\n      isCollapsed,\n      onExpandCollapse,\n      ...restProps\n    }: PropsWithoutRef<IntelligentGuidanceProps>,\n    ref: IntelligentGuidanceProps['ref']\n  ) => {\n    const t = useI18n();\n    const isMediumOrAbove = useBreakpoint('md');\n    const summaryListRef = useRef<HTMLElement>(null);\n    const toggleButtonRef = useRef<HTMLButtonElement>(null);\n\n    const listItems: SummaryListItem[] = items.map(item => {\n      return {\n        id: item.id,\n        visual: <Icon name={item.icon} />,\n        primary: item.label,\n        secondary: item.type,\n        actions: item.onDismiss\n          ? [\n              {\n                text: t('dismiss_label_a11y', [item.label]),\n                id: item.id,\n                icon: 'times',\n                onClick: (id, e) => {\n                  e.stopPropagation();\n                  item.onDismiss?.(id, e);\n                }\n              }\n            ]\n          : undefined,\n        container: { colGap: 1 },\n        role: 'button',\n        tabIndex: 0,\n        'aria-label': t('continue_label_a11y', [item.label]),\n        onClick: item.onClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            item.onClick(e);\n          }\n        }\n      };\n    });\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (summaryListRef.current) {\n        setHeaderHeight(summaryListRef.current.querySelector('header')?.offsetHeight || 0);\n      }\n    }, [summaryListRef.current]);\n\n    // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.\n    useAfterInitialEffect(() => {\n      if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n        toggleButtonRef.current.blur();\n        setTimeout(() => {\n          toggleButtonRef.current?.focus();\n        }, 1000);\n      }\n    }, [isCollapsed]);\n\n    return (\n      <StyledIntelligentGuidance\n        {...restProps}\n        ref={ref}\n        role='region'\n        aria-live='polite'\n        aria-relevant='all'\n        isCollapsed={isCollapsed}\n        hasItems={!!items.length}\n      >\n        {isMediumOrAbove || !isCollapsed ? (\n          <StyledIntelligentGuidanceList\n            ref={summaryListRef}\n            icon='polaris-solid'\n            name={heading}\n            count={items.length}\n            items={listItems}\n            actions={[\n              {\n                text: t(isCollapsed ? 'expand' : 'collapse'),\n                id: 'IntelligentGuidanceButton',\n                icon: 'caret-down',\n                'aria-label': isCollapsed\n                  ? t('expand_noun', [heading])\n                  : t('collapse_noun', [heading]),\n                onClick: onExpandCollapse,\n                ref: toggleButtonRef\n              }\n            ]}\n            EmptyStateText={t('no_recommendations')}\n            style={{ '--headerHeight': `${headerHeight}px` }}\n          />\n        ) : (\n          <StyledIntelligentGuidanceButton\n            variant='simple'\n            aria-label={isCollapsed ? t('expand_noun', [heading]) : t('collapse_noun', [heading])}\n            icon\n            onClick={onExpandCollapse}\n          >\n            <Icon name='polaris-solid' />\n            <Count>{items.length}</Count>\n          </StyledIntelligentGuidanceButton>\n        )}\n      </StyledIntelligentGuidance>\n    );\n  }\n);\n\nexport default IntelligentGuidance;\n"]}
+{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  Icon,\n  SummaryListItem,\n  useI18n,\n  useAfterInitialEffect,\n  Text,\n  Tabs,\n  CardHeader,\n  TabPanel,\n  Flex,\n  Count,\n  Actions\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledIntelligentGuidanceList,\n  StyledIntelligentGuidance,\n  StyledNew,\n  StyledBorderLine\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n  function IntelligentGuidance(\n    {\n      items,\n      previousItems,\n      heading,\n      isCollapsed,\n      onExpandCollapse,\n      ...restProps\n    }: PropsWithoutRef<IntelligentGuidanceProps>,\n    ref: IntelligentGuidanceProps['ref']\n  ) {\n    const t = useI18n();\n    const headerRef = useRef<HTMLDivElement>(null);\n    const toggleButtonRef = useRef<HTMLButtonElement>(null);\n    const [currentTab, setCurrentTab] = useState('current');\n\n    const listItems: SummaryListItem[] = (\n      currentTab === 'current' ? items : previousItems ?? []\n    ).map(item => {\n      return {\n        id: item.id,\n        visual: <Icon name={item.icon} />,\n        primary: (\n          <>\n            {item.label}\n            {item.new && (\n              <>\n                <StyledNew>{t('new')}</StyledNew>\n                {/* Can remove StyledBorderLine when Firefox supports :has selector. */}\n                <StyledBorderLine />\n              </>\n            )}\n          </>\n        ),\n        secondary: <Text variant='secondary'>{item.type}</Text>,\n        contextualLabel: item.label,\n        actions: item.onDismiss\n          ? [\n              {\n                text: t('dismiss'),\n                id: item.id,\n                icon: 'times',\n                onClick: (id, e) => {\n                  e.stopPropagation();\n                  item.onDismiss?.(id, e);\n                }\n              }\n            ]\n          : undefined,\n        container: { colGap: 1 },\n        role: 'button',\n        tabIndex: 0,\n        'aria-label': t('continue_label_a11y', [item.label]),\n        onClick: item.onClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            item.onClick(e);\n          }\n        }\n      };\n    });\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current?.offsetHeight || 0);\n      }\n    }, [headerRef.current]);\n\n    // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.\n    useAfterInitialEffect(() => {\n      if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n        toggleButtonRef.current.blur();\n        setTimeout(() => {\n          toggleButtonRef.current?.focus();\n        }, 1000);\n      }\n    }, [isCollapsed]);\n\n    const intelligentGuidanceList = (\n      <StyledIntelligentGuidanceList items={listItems} noItemsText={t('no_recommendations')} />\n    );\n\n    return (\n      <StyledIntelligentGuidance\n        {...restProps}\n        ref={ref}\n        role='region'\n        aria-live='polite'\n        aria-relevant='all'\n        isCollapsed={isCollapsed}\n        hasItems={!!items.length}\n        style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n      >\n        <CardHeader ref={headerRef}>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            <Text variant='h2'>{heading}</Text>\n            <Count>{items.length + (previousItems?.length ?? 0)}</Count>\n          </Flex>\n          <Actions\n            items={[\n              {\n                text: t(isCollapsed ? 'expand' : 'collapse'),\n                id: 'IntelligentGuidanceButton',\n                icon: 'caret-down',\n                'aria-label': isCollapsed\n                  ? t('expand_noun', [heading])\n                  : t('collapse_noun', [heading]),\n                onClick: onExpandCollapse,\n                ref: toggleButtonRef\n              }\n            ]}\n          />\n        </CardHeader>\n        {previousItems ? (\n          <>\n            <Tabs\n              tabs={[\n                {\n                  id: 'current',\n                  name: t('current'),\n                  count: items.filter(item => item.new).length || undefined\n                },\n                {\n                  id: 'previous',\n                  name: t('previous'),\n                  count: previousItems.filter(item => item.new).length || undefined\n                }\n              ]}\n              currentTabId={currentTab}\n              onTabClick={setCurrentTab}\n            />\n            <TabPanel tabId={currentTab}>{intelligentGuidanceList}</TabPanel>\n          </>\n        ) : (\n          intelligentGuidanceList\n        )}\n      </StyledIntelligentGuidance>\n    );\n  }\n);\n\nexport default IntelligentGuidance;\n"]}

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

@@ -1,8 +1,9 @@
+export declare const StyledNew: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBorderLine: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledIntelligentGuidanceList: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").SummaryListProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledIntelligentGuidanceButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export interface StyledIntelligentGuidanceProps {
     isCollapsed: boolean;
     hasItems: boolean;
 }
-export declare const StyledIntelligentGuidance: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledIntelligentGuidanceProps, never>;
+export declare const StyledIntelligentGuidance: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<import("@pega/cosmos-react-core").CardProps> & StyledIntelligentGuidanceProps, never>;
 //# sourceMappingURL=IntelligentGuidance.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"AAuBA,eAAO,MAAM,6BAA6B,2NA8ExC,CAAC;AAIH,eAAO,MAAM,+BAA+B,qOAiB1C,CAAC;AAaH,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,qIAgCrC,CAAC"}
+{"version":3,"file":"IntelligentGuidance.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,SAAS,mOAmBpB,CAAC;AAIH,eAAO,MAAM,gBAAgB,0GAe3B,CAAC;AAIH,eAAO,MAAM,6BAA6B,2NA6ExC,CAAC;AAIH,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,gMAyFrC,CAAC"}

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":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,iBAAiB,EACjB,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,qDAAqD,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,gEAAgE,CAAC;AAE1G,MAAM,YAAY,GAAG,MAAM,CAAC;AAE5B,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACpE,CAAC;IACF,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC/B,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACrE,CAAC;IACF,OAAO,GAAG,CAAA;;;aAGC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;;kBAEnB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;yBACd,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;;;0BAKxB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC;;MAEzE,gBAAgB;cACR,UAAU,IAAI,UAAU;mBACnB,KAAK,CAAC,IAAI,CAAC,OAAO;;QAE7B,UAAU,MAAM,UAAU;iBACjB,YAAY;kBACX,YAAY;+BACC,KAAK,CAAC,IAAI,CAAC,OAAO;kCACf,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;4BACjC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO;;;MAGhD,wBAAwB;cAChB,UAAU,IAAI,UAAU;;;;MAIhC,YAAY;oBACE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;MAErC,iBAAiB;iBACN,KAAK,CAAC,IAAI,CAAC,OAAO;oBACf,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC,UAAU,WAAW;;QAExE,YAAY,IAAI,UAAU;iBACjB,YAAY;kBACX,YAAY;+BACC,KAAK,CAAC,IAAI,CAAC,OAAO;;QAEzC,YAAY;;;;;;;4BAOQ,UAAU;;;;;;UAM5B,YAAY;;;;;;sBAMA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;;MAGhD,gBAAgB;wBACE,KAAK,CAAC,IAAI,CAAC,OAAO;QAClC,UAAU,KAAK,UAAU;iBAChB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;;;GAGtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,CAAC,MAAM,+BAA+B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1E,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;aAC1B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;wBACb,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO;;;;;;;MAO5C,WAAW;;;;;GAKd,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,+BAA+B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhE,MAAM,OAAO,GAAG,SAAS,CAAA;;;;;;;CAOxB,CAAC;AAOF,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CACjD,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;IACzB,OAAO,GAAG,CAAA;;qCAEuB,KAAK,CAAC,IAAI,CAAC,OAAO;uCAChB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;UACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;gBAC1B,WAAW,CAAC,CAAC,CAAC,YAAY,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;2BACzC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;iBAGnC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO;QACtC,6BAA6B,QAAQ,6BAA6B,IAAI,6BAA6B;;;yCAGlE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;YACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;UAClC,WAAW;QACb,GAAG,CAAA;;SAEF;UACC,gBAAgB,IAAI,YAAY;2CACC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;cACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;uBACvB,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;;;QAG5D,+BAA+B;qBAClB,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;;KAE9D,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC","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,24 +5,24 @@ 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 */

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,+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"}
+{"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  /** 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"]}
+{"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;AAGf,OAAO,EACL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAIjC,OAAO,gBAAoC,MAAM,qBAAqB,CAAC;AA6FvE,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqCnE,CAAC;AAEF,eAAe,WAAW,CAAC"}