@pega/cosmos-react-cs 2.0.0-dev.2.1 → 2.0.0-dev.20.0

package/lib/components/DialPad/KeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/DialPad/KeyboardNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["// cSpell:words PQRS WXYZ\nimport { NavigationGraphElement } from './DialPad.types';\n\nconst baseGraph: NavigationGraphElement[] = [\n  {\n    sign: '1',\n    keyCode: 49,\n    ref: undefined,\n    right: 1,\n    down: 3\n  },\n  {\n    sign: '2',\n    alt: 'ABC',\n    keyCode: 50,\n    ref: undefined,\n    right: 2,\n    down: 4,\n    left: 0\n  },\n  {\n    sign: '3',\n    alt: 'DEF',\n    keyCode: 51,\n    ref: undefined,\n    down: 5,\n    left: 1\n  },\n  {\n    sign: '4',\n    alt: 'GHI',\n    keyCode: 52,\n    ref: undefined,\n    up: 0,\n    right: 4,\n    down: 6\n  },\n  {\n    sign: '5',\n    alt: 'JKL',\n    keyCode: 53,\n    ref: undefined,\n    up: 1,\n    right: 5,\n    down: 7,\n    left: 3\n  },\n  {\n    sign: '6',\n    alt: 'MNO',\n    keyCode: 54,\n    ref: undefined,\n    up: 2,\n    down: 8,\n    left: 4\n  },\n  {\n    sign: '7',\n    alt: 'PQRS',\n    keyCode: 55,\n    ref: undefined,\n    up: 3,\n    right: 7,\n    down: 9\n  },\n  {\n    sign: '8',\n    alt: 'TUV',\n    keyCode: 56,\n    ref: undefined,\n    up: 4,\n    right: 8,\n    down: 10,\n    left: 6\n  },\n  {\n    sign: '9',\n    alt: 'WXYZ',\n    keyCode: 57,\n    ref: undefined,\n    up: 5,\n    down: 11,\n    left: 7\n  },\n  {\n    special: '*',\n    keyCode: 42,\n    ref: undefined,\n    up: 6,\n    right: 10,\n    down: 12\n  }\n];\n\nexport const dtmfGraph = baseGraph.concat([\n  {\n    sign: '0',\n    alt: '+',\n    keyCode: 48,\n    altKeyCode: 43,\n    ref: undefined,\n    up: 7,\n    right: 11,\n    left: 9\n  },\n  {\n    special: '#',\n    keyCode: 35,\n    ref: undefined,\n    up: 8,\n    left: 10\n  },\n  {\n    icon: 'backspace',\n    keyCode: 127,\n    ref: undefined,\n    up: 10\n  }\n]);\n\nexport const defaultGraph = baseGraph.concat([\n  {\n    sign: '0',\n    alt: '+',\n    keyCode: 48,\n    altKeyCode: 43,\n    ref: undefined,\n    up: 7,\n    right: 11,\n    down: 12,\n    left: 9\n  },\n  {\n    special: '#',\n    keyCode: 35,\n    ref: undefined,\n    up: 8,\n    down: 12,\n    left: 10\n  },\n  {\n    icon: 'backspace',\n    keyCode: 127,\n    ref: undefined,\n    up: 10\n  }\n]);\n\nexport const defaultButtonGrid = [\n  [defaultGraph[0], defaultGraph[1], defaultGraph[2]],\n  [defaultGraph[3], defaultGraph[4], defaultGraph[5]],\n  [defaultGraph[6], defaultGraph[7], defaultGraph[8]],\n  [defaultGraph[9], defaultGraph[10], defaultGraph[11]],\n  [defaultGraph[12]]\n];\n\nexport const dtmfButtonGrid = [\n  [dtmfGraph[0], dtmfGraph[1], dtmfGraph[2]],\n  [dtmfGraph[3], dtmfGraph[4], dtmfGraph[5]],\n  [dtmfGraph[6], dtmfGraph[7], dtmfGraph[8]],\n  [dtmfGraph[9], dtmfGraph[10], dtmfGraph[11]]\n];\n"]}

package/lib/components/DialPad/utils.d.ts

@@ -0,0 +1,4 @@
+import { KeyboardEvent } from 'react';
+export declare const getDialButtonIndex: (e: KeyboardEvent) => number;
+export declare const isNavigationEvent: (e: KeyboardEvent) => boolean;
+//# sourceMappingURL=utils.d.ts.map

package/lib/components/DialPad/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,eAAO,MAAM,kBAAkB,MAAO,aAAa,KAAG,MAIrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,MAAO,aAAa,YAEjD,CAAC"}

package/lib/components/DialPad/utils.js

@@ -0,0 +1,7 @@
+export const getDialButtonIndex = (e) => {
+    return ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#', 'Backspace'].findIndex(key => key === e.key);
+};
+export const isNavigationEvent = (e) => {
+    return ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key);
+};
+//# sourceMappingURL=utils.js.map

package/lib/components/DialPad/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/DialPad/utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAgB,EAAU,EAAE;IAC7D,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,CAAC,CAAC,SAAS,CACxF,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAgB,EAAE,EAAE;IACpD,OAAO,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;AAC7E,CAAC,CAAC","sourcesContent":["import { KeyboardEvent } from 'react';\n\nexport const getDialButtonIndex = (e: KeyboardEvent): number => {\n  return ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#', 'Backspace'].findIndex(\n    key => key === e.key\n  );\n};\n\nexport const isNavigationEvent = (e: KeyboardEvent) => {\n  return ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key);\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"IntelligentGuidance.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAQb,MAAM,yBAAyB,CAAC;AAQjC,OAAO,KAAK,wBAAwB,MAAM,6BAA6B,CAAC;AAIxE,QAAA,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,wBAAwB,GAAG,YAAY,CA8GnF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/IntelligentGuidance/IntelligentGuidance.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Icon, registerIcon, useI18n, Count, useBreakpoint, usePrevious } 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, ...restProps }, ref) => {
+    const t = useI18n();
+    const isMediumOrAbove = useBreakpoint('md');
+    const [isCollapsed, setIsCollapsed] = useState(true);
+    const previousItems = usePrevious(items);
+    const summaryListRef = useRef(null);
+    useEffect(() => {
+        const previousItemsCount = previousItems?.length || 0;
+        if (previousItemsCount < items.length) {
+            setIsCollapsed(false);
+        }
+        else if (previousItemsCount && !items.length) {
+            setIsCollapsed(true);
+        }
+    }, [previousItems, items]);
+    const listItems = items.map(item => {
+        return {
+            id: item.id,
+            visual: _jsx(Icon, { name: item.icon }, void 0),
+            primary: item.label,
+            secondary: item.type,
+            actions: item.onDismiss
+                ? [
+                    {
+                        text: t('dismiss_label_a11y', [item.label]),
+                        id: item.id,
+                        icon: 'times',
+                        onClick: (id, e) => {
+                            e.stopPropagation();
+                            item.onDismiss?.(id, e);
+                        }
+                    }
+                ]
+                : undefined,
+            container: { colGap: 1 },
+            role: 'button',
+            tabIndex: 0,
+            'aria-label': t('continue_label_a11y', [item.label]),
+            onClick: item.onClick,
+            onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    item.onClick(e);
+                }
+            }
+        };
+    });
+    const [headerHeight, setHeaderHeight] = useState(0);
+    useLayoutEffect(() => {
+        if (summaryListRef.current) {
+            setHeaderHeight(summaryListRef.current.querySelector('header')?.offsetHeight || 0);
+        }
+    }, [summaryListRef.current]);
+    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_intelligent_guidance_button_a11y'
+                        : 'collapse_intelligent_guidance_button_a11y'),
+                    id: 'IntelligentGuidanceButton',
+                    icon: 'caret-down',
+                    onClick() {
+                        setIsCollapsed(prevState => !prevState);
+                    }
+                }
+            ], EmptyStateText: t('no_recommendations'), style: { '--headerHeight': `${headerHeight}px` } }, void 0)) : (_jsxs(StyledIntelligentGuidanceButton, { variant: 'simple', "aria-label": t('expand_intelligent_guidance_button_a11y'), icon: true, onClick: () => {
+                setIsCollapsed(false);
+            }, children: [_jsx(Icon, { name: 'polaris-solid' }, void 0), _jsx(Count, { children: items.length }, void 0)] }, void 0)) }, void 0));
+});
+export default IntelligentGuidance;
+//# sourceMappingURL=IntelligentGuidance.js.map

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

@@ -0,0 +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  useEffect,\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  usePrevious\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    { items, heading, ...restProps }: PropsWithoutRef<IntelligentGuidanceProps>,\n    ref: IntelligentGuidanceProps['ref']\n  ) => {\n    const t = useI18n();\n    const isMediumOrAbove = useBreakpoint('md');\n    const [isCollapsed, setIsCollapsed] = useState(true);\n    const previousItems = usePrevious(items);\n    const summaryListRef = useRef<HTMLElement>(null);\n\n    useEffect(() => {\n      const previousItemsCount = previousItems?.length || 0;\n      if (previousItemsCount < items.length) {\n        setIsCollapsed(false);\n      } else if (previousItemsCount && !items.length) {\n        setIsCollapsed(true);\n      }\n    }, [previousItems, items]);\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    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(\n                  isCollapsed\n                    ? 'expand_intelligent_guidance_button_a11y'\n                    : 'collapse_intelligent_guidance_button_a11y'\n                ),\n                id: 'IntelligentGuidanceButton',\n                icon: 'caret-down',\n                onClick() {\n                  setIsCollapsed(prevState => !prevState);\n                }\n              }\n            ]}\n            EmptyStateText={t('no_recommendations')}\n            style={{ '--headerHeight': `${headerHeight}px` }}\n          />\n        ) : (\n          <StyledIntelligentGuidanceButton\n            variant='simple'\n            aria-label={t('expand_intelligent_guidance_button_a11y')}\n            icon\n            onClick={() => {\n              setIsCollapsed(false);\n            }}\n          >\n            <Icon name='polaris-solid' />\n            <Count>{items.length}</Count>\n          </StyledIntelligentGuidanceButton>\n        )}\n      </StyledIntelligentGuidance>\n    );\n  }\n);\n\nexport default IntelligentGuidance;\n"]}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+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>;
+//# sourceMappingURL=IntelligentGuidance.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IntelligentGuidance.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":";AAwBA,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,qIA8BrC,CAAC"}

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

@@ -0,0 +1,142 @@
+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 { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
+import { StyledSummaryListContent } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';
+const navWidth = '4rem';
+const itemIconSize = '2rem';
+export const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {
+    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']));
+    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;
+      }
+    }
+    ${StyledButton}:enabled:focus {
+      box-shadow: ${theme.base.shadow['focus-inverted']};
+    }
+    ${StyledSummaryItem} {
+      padding: ${theme.base.spacing};
+      border-top: ${theme.components.button['border-width']} solid ${borderColor};
+      outline: none;
+      ${StyledVisual} ${StyledIcon} {
+        width: ${itemIconSize};
+        height: ${itemIconSize};
+        padding: calc(0.75 * ${theme.base.spacing});
+      }
+      ${StyledButton} {
+        visibility: hidden;
+      }
+      &:not(:last-child) {
+        border-bottom: none;
+      }
+      &:hover {
+        background-color: ${hoverColor};
+        cursor: pointer;
+      }
+      &:hover,
+      &:focus,
+      &:focus-within {
+        ${StyledButton} {
+          visibility: visible;
+        }
+      }
+      &:enabled:focus,
+      &:not([disabled]):focus {
+        box-shadow: inset ${theme.base.shadow['focus-inverted']};
+      }
+    }
+    ${StyledEmptyState} {
+      padding-bottom: ${theme.base.spacing};
+      ${StyledIcon}, ${StyledText} {
+        color: ${theme.base.palette.light};
+      }
+    }
+  `;
+});
+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 }) => {
+    return css `
+      position: fixed;
+      inset-inline-start: calc(2 * ${theme.base.spacing} + ${navWidth});
+      bottom: ${isCollapsed ? `calc(2 * ${theme.base.spacing}) ` : 0};
+      @media (min-width: ${theme.base.breakpoints.md}) {
+        bottom: 0;
+      }
+      z-index: ${theme.base['z-index'].popover};
+      ${StyledIntelligentGuidanceList}:not(${StyledIntelligentGuidanceList} ${StyledIntelligentGuidanceList}) {
+        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} {
+          transition: transform calc(2 * ${theme.base.animation.speed})
+            ${theme.base.animation.timing.ease};
+          transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};
+        }
+      }
+      ${StyledIntelligentGuidanceButton} {
+        animation: ${slideIn} calc(4 * ${theme.base.animation.speed});
+      }
+    `;
+});
+StyledIntelligentGuidance.defaultProps = defaultThemeProp;
+//# sourceMappingURL=IntelligentGuidance.styles.js.map

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

@@ -0,0 +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 navWidth = '4rem';\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-inverted']};\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: inset ${theme.base.shadow['focus-inverted']};\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} + ${navWidth});\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"]}

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

@@ -0,0 +1,31 @@
+import { MouseEvent, KeyboardEvent, Ref } from 'react';
+import { BaseProps, IconProps } from '@pega/cosmos-react-core';
+export interface IntelligentGuidanceItemProps {
+    /** Unique id for item */
+    id: string;
+    /** The label text of the item. */
+    label: string;
+    /**
+     * 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.
+     */
+    onClick: (e: MouseEvent | KeyboardEvent) => void;
+    /**
+     * Dismiss handler for the action button.
+     */
+    onDismiss?: (id: IntelligentGuidanceItemProps['id'], e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>) => void;
+}
+export default interface IntelligentGuidanceProps extends BaseProps {
+    /** List of guidance items. */
+    items: IntelligentGuidanceItemProps[];
+    /** Header text. */
+    heading: string;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+//# sourceMappingURL=IntelligentGuidance.types.d.ts.map

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

@@ -0,0 +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,MAAM,yBAAyB,CAAC;AAE/D,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;IACjE,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"}

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

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

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

@@ -0,0 +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 } 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 {\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"]}

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

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

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

@@ -0,0 +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"}

package/lib/components/IntelligentGuidance/index.js

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

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

@@ -0,0 +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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,EAQL,WAAW,EACX,YAAY,EAWZ,mBAAmB,EACpB,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,4BAA4B;IAC3C,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAoED,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CA6CzF,CAAC;AAEJ,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAQL,WAAW,EACX,YAAY,EAWZ,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,4BAA4B;IAC3C,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAqED,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CA6CzF,CAAC;AAEJ,eAAe,uBAAuB,CAAC"}

package/lib/components/InteractionNotification/InteractionNotification.js

@@ -1,27 +1,29 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Card, CardContent, CardHeader, Status, Text, SummaryItem, defaultThemeProp, Flex, StyledText, Avatar, FieldValueList, StyledFieldName, CardFooter, StyledFieldValueList, StyledButton, useI18n } from '@pega/cosmos-react-core';
+import { Button, Card, CardContent, CardHeader, Status, Text, SummaryItem, defaultThemeProp, Flex, StyledText, Avatar, FieldValueList, StyledFieldName, CardFooter, StyledFieldValueList, StyledButton, useI18n, useDirection } from '@pega/cosmos-react-core';
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
-const StyledInteractionNotification = styled(Card)(props => {
+const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
+    const { rtl } = useDirection();
     return css `
     position: fixed;
     inset-inline-end: 1rem;
     inset-block-start: 4rem;
     width: clamp(21.5rem, calc(100% - 2rem), 25rem);
-    z-index: ${props.theme.base['z-index'].modal};
-    color: ${props.theme.base.colors.white};
-    animation: SlideIn calc(4 * ${props.theme.base.animation.speed});
-    padding: calc(0.75 * ${props.theme.base.spacing}) 0;
+    z-index: ${base['z-index'].modal};
+    color: ${base.colors.white};
+    animation: SlideIn calc(4 * ${base.animation.speed});
+    padding: calc(0.75 * ${base.spacing}) 0;
 
     &:not(& &) {
-      background-color: ${props.theme.base.colors.slate['extra-dark']};
+      background-color: ${base.colors.slate['extra-dark']};
     }
 
     @keyframes SlideIn {
       0% {
-        ${props.theme.base.rtl
+        ${rtl
         ? css `
               transform: translateX(calc(-100% - 1rem));
             `
@@ -37,15 +39,15 @@ const StyledInteractionNotification = styled(Card)(props => {
 
     ${StyledCardHeader} {
       ${StyledButton} {
-        margin-inline-start: calc(2 * ${props.theme.base.spacing});
+        margin-inline-start: calc(2 * ${base.spacing});
       }
     }
 
     ${StyledCardContent} {
-      margin: calc(2 * ${props.theme.base.spacing}) 0;
+      margin: calc(2 * ${base.spacing}) 0;
 
       ${StyledText} {
-        color: ${props.theme.base.colors.white};
+        color: ${base.colors.white};
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -56,12 +58,12 @@ const StyledInteractionNotification = styled(Card)(props => {
 
     ${StyledCardFooter} {
       ${StyledFieldValueList} {
-        border-top: solid 0.0625rem ${props.theme.base.colors.gray.dark};
-        padding-top: calc(2 * ${props.theme.base.spacing});
-        color: ${props.theme.base.colors.white};
+        border-top: solid 0.0625rem ${base.colors.gray.medium};
+        padding-top: calc(2 * ${base.spacing});
+        color: ${base.colors.white};
 
         ${StyledFieldName} {
-          color: ${props.theme.base.colors.white};
+          color: ${base.colors.white};
         }
       }
     }
@@ -70,16 +72,7 @@ const StyledInteractionNotification = styled(Card)(props => {
 StyledInteractionNotification.defaultProps = defaultThemeProp;
 const InteractionNotification = forwardRef(({ icon, title, primaryText, secondaryText, status, fields, onAccept }, ref) => {
     const t = useI18n();
-    return (React.createElement(StyledInteractionNotification, { ref: ref },
-        React.createElement(CardHeader, { actions: React.createElement(Button, { variant: 'primary', onClick: onAccept }, t('accept')) },
-            React.createElement(SummaryItem, { visual: React.createElement(Avatar, { shape: 'circle', size: 'm', name: title, icon: icon }), primary: title })),
-        React.createElement(CardContent, null,
-            React.createElement(Flex, { container: { direction: 'column', alignItems: 'center', itemGap: 1 } },
-                React.createElement(Text, { variant: 'h1' }, primaryText),
-                secondaryText && React.createElement(Text, { variant: 'secondary' }, secondaryText),
-                React.createElement(Status, { variant: status.variant }, status.text))),
-        fields && fields.length !== 0 && (React.createElement(CardFooter, null,
-            React.createElement(FieldValueList, { variant: 'inline', fields: fields })))));
+    return (_jsxs(StyledInteractionNotification, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') }, void 0), children: _jsx(SummaryItem, { visual: _jsx(Avatar, { shape: 'circle', size: 'm', name: title, icon: icon }, void 0), primary: title }, void 0) }, void 0), _jsx(CardContent, { children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', children: primaryText }, void 0), secondaryText && _jsx(Text, { variant: 'secondary', children: secondaryText }, void 0), _jsx(Status, { variant: status.variant, children: status.text }, void 0)] }, void 0) }, void 0), fields && fields.length !== 0 && (_jsx(CardFooter, { children: _jsx(FieldValueList, { variant: 'inline', fields: fields }, void 0) }, void 0))] }, void 0));
 });
 export default InteractionNotification;
 //# sourceMappingURL=InteractionNotification.js.map

package/lib/components/InteractionNotification/InteractionNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  SummaryItem,\n  StatusProps,\n  ForwardProps,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  Avatar,\n  FieldValueList,\n  StyledFieldName,\n  CardFooter,\n  StyledFieldValueList,\n  StyledButton,\n  useI18n,\n  FieldValueListProps\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nexport interface InteractionNotificationProps {\n  /** Ref to Component. */\n  ref?: Ref<HTMLDivElement>;\n  /** Name of the icon used in header. */\n  icon: string;\n  /** Interaction title. */\n  title: string;\n  /** Primary information of the notification. For example caller name . */\n  primaryText: string;\n  /** Secondary information of the notification. For example phone number of the caller */\n  secondaryText?: string;\n  /** Represents the current status of interaction. */\n  status: { variant: StatusProps['variant']; text: string };\n  /** Information structured as field values to be displayed below main section. */\n  fields?: FieldValueListProps['fields'];\n  /** Callback when accept button is clicked. */\n  onAccept?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(props => {\n  return css`\n    position: fixed;\n    inset-inline-end: 1rem;\n    inset-block-start: 4rem;\n    width: clamp(21.5rem, calc(100% - 2rem), 25rem);\n    z-index: ${props.theme.base['z-index'].modal};\n    color: ${props.theme.base.colors.white};\n    animation: SlideIn calc(4 * ${props.theme.base.animation.speed});\n    padding: calc(0.75 * ${props.theme.base.spacing}) 0;\n\n    &:not(& &) {\n      background-color: ${props.theme.base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${props.theme.base.rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardHeader} {\n      ${StyledButton} {\n        margin-inline-start: calc(2 * ${props.theme.base.spacing});\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${props.theme.base.spacing}) 0;\n\n      ${StyledText} {\n        color: ${props.theme.base.colors.white};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledCardFooter} {\n      ${StyledFieldValueList} {\n        border-top: solid 0.0625rem ${props.theme.base.colors.gray.dark};\n        padding-top: calc(2 * ${props.theme.base.spacing});\n        color: ${props.theme.base.colors.white};\n\n        ${StyledFieldName} {\n          color: ${props.theme.base.colors.white};\n        }\n      }\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n  forwardRef(\n    (\n      {\n        icon,\n        title,\n        primaryText,\n        secondaryText,\n        status,\n        fields,\n        onAccept\n      }: PropsWithoutRef<InteractionNotificationProps>,\n      ref: InteractionNotificationProps['ref']\n    ) => {\n      const t = useI18n();\n\n      return (\n        <StyledInteractionNotification ref={ref}>\n          <CardHeader\n            actions={\n              <Button variant='primary' onClick={onAccept}>\n                {t('accept')}\n              </Button>\n            }\n          >\n            <SummaryItem\n              visual={<Avatar shape='circle' size='m' name={title} icon={icon} />}\n              primary={title}\n            />\n          </CardHeader>\n          <CardContent>\n            <Flex container={{ direction: 'column', alignItems: 'center', itemGap: 1 }}>\n              <Text variant='h1'>{primaryText}</Text>\n              {secondaryText && <Text variant='secondary'>{secondaryText}</Text>}\n              <Status variant={status.variant}>{status.text}</Status>\n            </Flex>\n          </CardContent>\n          {fields && fields.length !== 0 && (\n            <CardFooter>\n              <FieldValueList variant='inline' fields={fields} />\n            </CardFooter>\n          )}\n        </StyledInteractionNotification>\n      );\n    }\n  );\n\nexport default InteractionNotification;\n"]}
+{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  SummaryItem,\n  StatusProps,\n  ForwardProps,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  Avatar,\n  FieldValueList,\n  StyledFieldName,\n  CardFooter,\n  StyledFieldValueList,\n  StyledButton,\n  useI18n,\n  FieldValueListProps,\n  useDirection\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nexport interface InteractionNotificationProps {\n  /** Ref to Component. */\n  ref?: Ref<HTMLDivElement>;\n  /** Name of the icon used in header. */\n  icon: string;\n  /** Interaction title. */\n  title: string;\n  /** Primary information of the notification. For example caller name . */\n  primaryText: string;\n  /** Secondary information of the notification. For example phone number of the caller */\n  secondaryText?: string;\n  /** Represents the current status of interaction. */\n  status: { variant: StatusProps['variant']; text: string };\n  /** Information structured as field values to be displayed below main section. */\n  fields?: FieldValueListProps['fields'];\n  /** Callback when accept button is clicked. */\n  onAccept?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-inline-end: 1rem;\n    inset-block-start: 4rem;\n    width: clamp(21.5rem, calc(100% - 2rem), 25rem);\n    z-index: ${base['z-index'].modal};\n    color: ${base.colors.white};\n    animation: SlideIn calc(4 * ${base.animation.speed});\n    padding: calc(0.75 * ${base.spacing}) 0;\n\n    &:not(& &) {\n      background-color: ${base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardHeader} {\n      ${StyledButton} {\n        margin-inline-start: calc(2 * ${base.spacing});\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n\n      ${StyledText} {\n        color: ${base.colors.white};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledCardFooter} {\n      ${StyledFieldValueList} {\n        border-top: solid 0.0625rem ${base.colors.gray.medium};\n        padding-top: calc(2 * ${base.spacing});\n        color: ${base.colors.white};\n\n        ${StyledFieldName} {\n          color: ${base.colors.white};\n        }\n      }\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n  forwardRef(\n    (\n      {\n        icon,\n        title,\n        primaryText,\n        secondaryText,\n        status,\n        fields,\n        onAccept\n      }: PropsWithoutRef<InteractionNotificationProps>,\n      ref: InteractionNotificationProps['ref']\n    ) => {\n      const t = useI18n();\n\n      return (\n        <StyledInteractionNotification ref={ref}>\n          <CardHeader\n            actions={\n              <Button variant='primary' onClick={onAccept}>\n                {t('accept')}\n              </Button>\n            }\n          >\n            <SummaryItem\n              visual={<Avatar shape='circle' size='m' name={title} icon={icon} />}\n              primary={title}\n            />\n          </CardHeader>\n          <CardContent>\n            <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n              <Text variant='h1'>{primaryText}</Text>\n              {secondaryText && <Text variant='secondary'>{secondaryText}</Text>}\n              <Status variant={status.variant}>{status.text}</Status>\n            </Flex>\n          </CardContent>\n          {fields && fields.length !== 0 && (\n            <CardFooter>\n              <FieldValueList variant='inline' fields={fields} />\n            </CardFooter>\n          )}\n        </StyledInteractionNotification>\n      );\n    }\n  );\n\nexport default InteractionNotification;\n"]}

package/lib/components/InteractionTimer/InteractionTimer.d.ts

@@ -5,9 +5,7 @@ export interface InteractionTimerProps extends BaseProps, AsProp {
     icon: string;
     /** Ref to Component */
     ref?: Ref<HTMLDivElement>;
-    /** Current Sla
-     * @default 'goal'
-     */
+    /** Current Sla. This is used to display progress ring color. */
     sla?: 'goal' | 'deadline' | 'past-deadline';
     /** Progress % of the current stage
      * @default 0
@@ -25,7 +23,7 @@ export interface InteractionTimerProps extends BaseProps, AsProp {
 export declare const StyledInteractionTimerIconWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledInteractionTimerIcon: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledInteractionTimerMetaText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledInteractionTimer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<InteractionTimerProps, "sla"> & Required<Pick<InteractionTimerProps, "sla">>, never>;
+export declare const StyledInteractionTimer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").OmitStrict<InteractionTimerProps, "sla"> & Required<Pick<InteractionTimerProps, "sla">>, never>;
 declare const InteractionTimer: FunctionComponent<InteractionTimerProps & ForwardProps>;
 export default InteractionTimer;
 //# sourceMappingURL=InteractionTimer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InteractionTimer.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,EACL,SAAS,EACT,MAAM,EAKN,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,qBAAsB,SAAQ,SAAS,EAAE,MAAM;IAC9D,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,eAAe,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iCAAiC,0GAAgB,CAAC;AAC/D,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,8BAA8B,0GAAgB,CAAC;AAI5D,eAAO,MAAM,sBAAsB,wLA0DlC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA4C7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"InteractionTimer.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EACL,SAAS,EACT,MAAM,EAKN,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,qBAAsB,SAAQ,SAAS,EAAE,MAAM;IAC9D,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,gEAAgE;IAChE,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,eAAe,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iCAAiC,0GAAgB,CAAC;AAC/D,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,8BAA8B,0GAAgB,CAAC;AAI5D,eAAO,MAAM,sBAAsB,gOAgElC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA4C7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/InteractionTimer/InteractionTimer.js

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { Flex, Icon, Text, Progress, defaultThemeProp, StyledProgressRing } from '@pega/cosmos-react-core';
 export const StyledInteractionTimerIconWrapper = styled.span ``;
@@ -7,6 +8,7 @@ export const StyledInteractionTimerMetaText = styled.span ``;
 export const StyledInteractionTimer = styled.div(({ sla, hasNotifications, theme: { components: { 'interaction-timer': InteractionTimerTheme } }, theme }) => {
     return css `
       width: calc(8 * ${theme.base.spacing});
+      flex-shrink: 0;
 
       ${StyledInteractionTimerIconWrapper} {
         font-size: 2.2rem;
@@ -27,13 +29,18 @@ export const StyledInteractionTimer = styled.div(({ sla, hasNotifications, theme
           }
         `}
       }
+
       ${StyledProgressRing} {
         circle {
           stroke-width: 1;
-          stroke: ${InteractionTimerTheme.sla[sla].progress['secondary-color']};
+          stroke: ${sla
+        ? InteractionTimerTheme.sla[sla].progress['secondary-color']
+        : 'currentcolor'};
         }
-        circle:nth-child(2) {
-          stroke: ${InteractionTimerTheme.sla[sla].progress['primary-color']};
+        circle + circle {
+          stroke: ${sla
+        ? InteractionTimerTheme.sla[sla].progress['primary-color']
+        : 'currentcolor'};
         }
       }
       ${StyledInteractionTimerIcon} {
@@ -55,15 +62,11 @@ export const StyledInteractionTimer = styled.div(({ sla, hasNotifications, theme
     `;
 });
 StyledInteractionTimer.defaultProps = defaultThemeProp;
-const InteractionTimer = forwardRef(({ icon, progress = 0, hasNotifications = false, meta, sla = 'goal', ariaLabel, ...restProps }, ref) => {
-    return (React.createElement(Flex, { ...restProps, ref: ref, container: {
+const InteractionTimer = forwardRef(({ icon, progress = 0, hasNotifications = false, meta, sla, ariaLabel, ...restProps }, ref) => {
+    return (_jsxs(Flex, { ...restProps, ref: ref, container: {
             direction: 'column',
             alignItems: 'center'
-        }, sla: sla, hasNotifications: hasNotifications, as: StyledInteractionTimer, "aria-label": ariaLabel },
-        React.createElement(StyledInteractionTimerIconWrapper, null,
-            React.createElement(Icon, { name: icon, as: StyledInteractionTimerIcon }),
-            React.createElement(Progress, { variant: 'ring', minValue: 0, maxValue: 100, value: progress, placement: 'inline' })),
-        meta && (React.createElement(Text, { variant: 'secondary', as: StyledInteractionTimerMetaText }, meta))));
+        }, sla: sla, hasNotifications: hasNotifications, as: StyledInteractionTimer, "aria-label": ariaLabel, children: [_jsxs(StyledInteractionTimerIconWrapper, { children: [_jsx(Icon, { name: icon, as: StyledInteractionTimerIcon }, void 0), _jsx(Progress, { variant: 'ring', minValue: 0, maxValue: 100, value: progress, placement: 'inline' }, void 0)] }, void 0), meta && (_jsx(Text, { variant: 'secondary', as: StyledInteractionTimerMetaText, children: meta }, void 0))] }, void 0));
 });
 export default InteractionTimer;
 //# sourceMappingURL=InteractionTimer.js.map