@pega/cosmos-react-work 5.0.0-dev.4.8 → 5.0.0-dev.5.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsContext.d.ts","sourceRoot":"","sources":["../../../src/components/Details/DetailsContext.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,cAAc,8CAKlB,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/lib/components/Details/DetailsContext.js

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

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

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

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

@@ -0,0 +1,4 @@
+export { default } from './Details';
+export { default as DetailsContext } from './DetailsContext';
+export { StyledFieldValueGroupLabel, StyledDetailList, StyledDetails, StyledHighlightedDetailList } from './Details.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Details/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EACL,0BAA0B,EAC1B,gBAAgB,EAChB,aAAa,EACb,2BAA2B,EAC5B,MAAM,kBAAkB,CAAC"}

package/lib/components/Details/index.js

@@ -0,0 +1,4 @@
+export { default } from './Details';
+export { default as DetailsContext } from './DetailsContext';
+export { StyledFieldValueGroupLabel, StyledDetailList, StyledDetails, StyledHighlightedDetailList } from './Details.styles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Details/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EACL,0BAA0B,EAC1B,gBAAgB,EAChB,aAAa,EACb,2BAA2B,EAC5B,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './Details';\nexport { default as DetailsContext } from './DetailsContext';\nexport {\n  StyledFieldValueGroupLabel,\n  StyledDetailList,\n  StyledDetails,\n  StyledHighlightedDetailList\n} from './Details.styles';\n"]}

package/lib/components/Glimpse/Glimpse.d.ts

@@ -0,0 +1,20 @@
+import { FunctionComponent, MouseEventHandler, Ref } from 'react';
+import { BaseProps, ButtonProps, FieldValueListProps, ForwardProps, InfoDialogProps, NoChildrenProp, OmitStrict } from '@pega/cosmos-react-core';
+type InfoDialogSummaryHeading = Extract<InfoDialogProps['heading'], object>;
+export interface GlimpseProps extends BaseProps, OmitStrict<InfoDialogProps, 'children'>, NoChildrenProp {
+    /** The unique id for the operator. */
+    id: string;
+    /** Primary, secondary and avatar for the glimpse. */
+    heading?: InfoDialogSummaryHeading;
+    /** The set of field values to render in the list. */
+    fields?: FieldValueListProps['fields'];
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+    /** Callback for click event on View profile button. Passing this will render View profile button */
+    onViewProfile?: MouseEventHandler<HTMLButtonElement>;
+    /** A URL location to navigate to. Passing an href will render View profile button as a link. */
+    href?: ButtonProps['href'];
+}
+declare const Glimpse: FunctionComponent<GlimpseProps & ForwardProps>;
+export default Glimpse;
+//# sourceMappingURL=Glimpse.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Glimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,iBAAiB,EAEjB,GAAG,EACJ,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAET,WAAW,EAEX,mBAAmB,EAEnB,YAAY,EAEZ,eAAe,EACf,cAAc,EACd,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,KAAK,wBAAwB,GAAG,OAAO,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;AAE5E,MAAM,WAAW,YACf,SAAQ,SAAS,EACf,UAAU,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,cAAc;IAChB,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,qDAAqD;IACrD,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,oGAAoG;IACpG,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,gGAAgG;IAChG,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA0C1D,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/lib/components/Glimpse/Glimpse.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Button, FieldValueList, Flex, InfoDialog, useI18n } from '@pega/cosmos-react-core';
+const Glimpse = forwardRef(function Glimpse({ heading, fields = [], target, onDismiss, href, progress, onViewProfile, ...restProps }, ref) {
+    const t = useI18n();
+    return (_jsx(InfoDialog, { ...restProps, target: target, heading: heading, progress: progress, onDismiss: onDismiss, ref: ref, children: !heading || progress || fields.length || onViewProfile || href ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2 }, children: [fields.length > 0 && _jsx(FieldValueList, { fields: fields }), (onViewProfile || href) && (_jsx(Button, { href: href, onClick: (e) => {
+                        onViewProfile?.(e);
+                        onDismiss();
+                    }, children: t('view_profile') }))] })) : null }));
+});
+export default Glimpse;
+//# sourceMappingURL=Glimpse.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,MAAM,EAEN,cAAc,EAEd,IAAI,EAEJ,UAAU,EAIV,OAAO,EACR,MAAM,yBAAyB,CAAC;AAsBjC,MAAM,OAAO,GAAmD,UAAU,CAAC,SAAS,OAAO,CACzF,EACE,OAAO,EACP,MAAM,GAAG,EAAE,EACX,MAAM,EACN,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,GAAG,SAAS,EACkB,EAChC,GAAwB;IAExB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,UAAU,OACL,SAAS,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAEP,CAAC,OAAO,IAAI,QAAQ,IAAI,MAAM,CAAC,MAAM,IAAI,aAAa,IAAI,IAAI,CAAC,CAAC,CAAC,CAChE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,aAClE,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,EACvD,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,CAC1B,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;wBACnB,SAAS,EAAE,CAAC;oBACd,CAAC,YAEA,CAAC,CAAC,cAAc,CAAC,GACX,CACV,IACI,CACR,CAAC,CAAC,CAAC,IAAI,GACG,CACd,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,OAAO,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MouseEvent,\n  MouseEventHandler,\n  PropsWithoutRef,\n  Ref\n} from 'react';\n\nimport {\n  BaseProps,\n  Button,\n  ButtonProps,\n  FieldValueList,\n  FieldValueListProps,\n  Flex,\n  ForwardProps,\n  InfoDialog,\n  InfoDialogProps,\n  NoChildrenProp,\n  OmitStrict,\n  useI18n\n} from '@pega/cosmos-react-core';\n\ntype InfoDialogSummaryHeading = Extract<InfoDialogProps['heading'], object>;\n\nexport interface GlimpseProps\n  extends BaseProps,\n    OmitStrict<InfoDialogProps, 'children'>,\n    NoChildrenProp {\n  /** The unique id for the operator. */\n  id: string;\n  /** Primary, secondary and avatar for the glimpse. */\n  heading?: InfoDialogSummaryHeading;\n  /** The set of field values to render in the list. */\n  fields?: FieldValueListProps['fields'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n  /** Callback for click event on View profile button. Passing this will render View profile button */\n  onViewProfile?: MouseEventHandler<HTMLButtonElement>;\n  /** A URL location to navigate to. Passing an href will render View profile button as a link. */\n  href?: ButtonProps['href'];\n}\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(function Glimpse(\n  {\n    heading,\n    fields = [],\n    target,\n    onDismiss,\n    href,\n    progress,\n    onViewProfile,\n    ...restProps\n  }: PropsWithoutRef<GlimpseProps>,\n  ref: GlimpseProps['ref']\n) {\n  const t = useI18n();\n\n  return (\n    <InfoDialog\n      {...restProps}\n      target={target}\n      heading={heading}\n      progress={progress}\n      onDismiss={onDismiss}\n      ref={ref}\n    >\n      {!heading || progress || fields.length || onViewProfile || href ? (\n        <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n          {fields.length > 0 && <FieldValueList fields={fields} />}\n          {(onViewProfile || href) && (\n            <Button\n              href={href}\n              onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                onViewProfile?.(e);\n                onDismiss();\n              }}\n            >\n              {t('view_profile')}\n            </Button>\n          )}\n        </Flex>\n      ) : null}\n    </InfoDialog>\n  );\n});\n\nexport default Glimpse;\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/lib/components/Glimpse/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Glimpse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Glimpse';\nexport type { GlimpseProps } from './Glimpse';\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,EAGL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAQjC,OAAO,KAAK,wBAAwB,MAAM,6BAA6B,CAAC;AAExE,QAAA,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,wBAAwB,GAAG,YAAY,CA8InF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/IntelligentGuidance/IntelligentGuidance.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
+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 headerRef = useRef(null);
+    const toggleButtonRef = useRef(null);
+    const [currentTab, setCurrentTab] = useState('current');
+    const listItems = (currentTab === 'current' ? items : previousItems ?? []).map(item => {
+        return {
+            id: item.id,
+            visual: _jsx(Icon, { name: item.icon }),
+            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'),
+                        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 (headerRef.current) {
+            setHeaderHeight(headerRef.current?.offsetHeight || 0);
+        }
+    }, [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) {
+            toggleButtonRef.current.blur();
+            setTimeout(() => {
+                toggleButtonRef.current?.focus();
+            }, 1000);
+        }
+    }, [isCollapsed]);
+    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

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

@@ -0,0 +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 interface StyledIntelligentGuidanceProps {
+    isCollapsed: boolean;
+    hasItems: boolean;
+}
+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

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

@@ -0,0 +1,199 @@
+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 { 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 `
+    max-height: min(calc(100vh - var(--headerHeight) - 4ch), 21ch);
+    overflow: auto;
+
+    ::-webkit-scrollbar-thumb {
+      box-shadow: inset 0 0 0.125rem 0.25rem ${scrollbarColor};
+    }
+
+    ::-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};
+      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 {
+        ${StyledButton} {
+          visibility: visible;
+        }
+      }
+      &:enabled:focus,
+      &:not([disabled]):focus {
+        box-shadow: ${theme.base.shadow['focus-inset']};
+      }
+    }
+
+    ${StyledEmptyState} {
+      padding-block: ${theme.base.spacing};
+      ${StyledIcon}, ${StyledText} {
+        color: ${color};
+      }
+    }
+  `;
+});
+StyledIntelligentGuidanceList.defaultProps = defaultThemeProp;
+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},
+        transform calc(4 * ${theme.base.animation.speed}) ${theme.base.animation.timing.ease};
+      bottom: 0;
+      z-index: ${theme.base['z-index'].popover};
+      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;
+      }
+      ${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};
+            }
+          }
+        }
+      }
+
+      ${StyledButton}:enabled:focus {
+        box-shadow: ${theme.base.shadow.focus};
+      }
+    `;
+});
+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":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAExE,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,iBAAiB,EACjB,eAAe,EAChB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,iDAAiD,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,qDAAqD,CAAC;AAElF,MAAM,YAAY,GAAG,MAAM,CAAC;AAE5B,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,MAAM,kBAAkB,GAAG,WAAW,CACpC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EACnC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CACzC,CAAC;IACF,MAAM,iBAAiB,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5D,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;;;;;wBAKY,kBAAkB;aAC7B,iBAAiB;kCACI,KAAK,CAAC,IAAI,CAAC,OAAO;iBACnC,QAAQ,CAAC,GAAG;mBACV,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;GACtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,MAAM,kBAAkB,GAAG,WAAW,CACpC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EACnC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CACzC,CAAC;IAEF,OAAO,GAAG,CAAA;;;;;wBAKY,kBAAkB;;;GAGvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IACvC,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,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IAC7F,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IAE7F,OAAO,GAAG,CAAA;;;;;+CAKmC,cAAc;;;;+CAId,cAAc;;;MAGvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;MAEhC,iBAAiB;;iBAEN,KAAK,CAAC,IAAI,CAAC,OAAO;;;;sBAIb,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC,UAAU,WAAW;;;QAG1E,YAAY,IAAI,UAAU;iBACjB,YAAY;kBACX,YAAY;+BACC,KAAK,CAAC,IAAI,CAAC,OAAO;;;QAGzC,YAAY;;;;QAIZ,eAAe,IAAI,UAAU;iBACpB,cAAc;;;;;;;;4BAQH,UAAU;;;;;;;UAO5B,YAAY;;;;;;sBAMA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;;;MAIhD,gBAAgB;uBACC,KAAK,CAAC,IAAI,CAAC,OAAO;QACjC,UAAU,KAAK,UAAU;iBAChB,KAAK;;;GAGnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAO9D,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,UAAU,CAAC,CACzD,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;IACzB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IACvC,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,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;IACrD,MAAM,iBAAiB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC,IAAI,EAAE,CAAC;IAErF,OAAO,GAAG,CAAA;;qCAEuB,KAAK,CAAC,IAAI,CAAC,OAAO;uCAChB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;YACrD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;6BACf,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;iBAE3E,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO;;;eAG/B,KAAK;;oBAEA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;;2BAEd,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;;;;;QAK5C,WAAW;QACb,GAAG,CAAA;;OAEF;;;4BAGqB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC;;;;QAIzE,gBAAgB;YACZ,YAAY;2CACmB,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;;;gBAGpD,UAAU,IAAI,UAAU;qBACnB,KAAK,CAAC,IAAI,CAAC,OAAO;;;UAG7B,UAAU,MAAM,UAAU;mBACjB,YAAY;oBACX,YAAY;iCACC,KAAK,CAAC,IAAI,CAAC,OAAO;oCACf,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;8BACjC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO;;;;QAIhD,UAAU;0BACQ,KAAK,CAAC,IAAI,CAAC,OAAO;wCACJ,WAAW;UACzC,SAAS;;;YAGP,WAAW;gCACS,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;;;qBAGpC,KAAK;;;gCAGM,iBAAiB;;;uBAG1B,WAAW;uBACX,eAAe;;;kCAGJ,eAAe;;;;;;QAMzC,YAAY;sBACE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC","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

@@ -0,0 +1,35 @@
+import { MouseEvent, KeyboardEvent, Ref } from 'react';
+import { BaseProps, IconProps, NoChildrenProp } 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;
+    /** Flag that indicates if item is new
+     * @default false
+     */
+    new?: boolean;
+}
+export default interface IntelligentGuidanceProps extends BaseProps, NoChildrenProp {
+    /** List of guidance items. */
+    items: IntelligentGuidanceItemProps[];
+    /** List of guidance previous items. */
+    previousItems?: IntelligentGuidanceItemProps[];
+    /** Header text. */
+    heading: string;
+    /** Flag that indicates if intelligent guidance is collapsed */
+    isCollapsed: boolean;
+    /** Callback when expand/collapse button is clicked */
+    onExpandCollapse: () => void;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+//# 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,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

@@ -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, 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

@@ -0,0 +1,3 @@
+export { default } from './IntelligentGuidance';
+export type { 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,YAAY,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 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"}