@pega/cosmos-react-demos 3.0.0-dev.2.1 → 3.0.0-dev.20.0

package/jsx/cs/InteractionNotification/InteractionNotification.stories.jsx

@@ -1,16 +1,16 @@
 import { action } from '@storybook/addon-actions';
-import { object, text } from '@storybook/addon-knobs';
 import { InteractionNotification } from '@pega/cosmos-react-cs';
+import { icons } from '@pega/cosmos-react-core';
 export default {
     title: 'Customer Service/InteractionNotification',
     component: InteractionNotification
 };
-export const interactionNotification = () => {
+export const InteractionNotificationDemo = (args) => {
     return (<div>
-      <InteractionNotification icon={text('Header icon', 'phone-in-solid')} title='Incoming call' primaryText='John Brown' secondaryText={text('Secondary text', '(617) 347-5557')} status={{
+      <InteractionNotification icon={args.icon} title='Incoming call' primaryText='John Brown' secondaryText={args.secondaryText} status={{
             variant: 'success',
             text: 'VERIFIED PLATINUM CUSTOMER'
-        }} fields={object('Fields', [
+        }} fields={[
             {
                 id: 'reason',
                 name: 'Reason for calling',
@@ -26,7 +26,15 @@ export const interactionNotification = () => {
                 name: 'Last interaction',
                 value: new Date().toLocaleDateString()
             }
-        ])} onAccept={action('accept')}/>
+        ]} onAccept={action('accept')}/>
     </div>);
 };
+InteractionNotificationDemo.args = {
+    icon: 'phone-in-solid',
+    secondaryText: '(123) 456-7890'
+};
+InteractionNotificationDemo.argTypes = {
+    icon: { options: icons, control: { type: 'select', icons: true } },
+    secondaryText: { options: { type: 'text' } }
+};
 //# sourceMappingURL=InteractionNotification.stories.jsx.map

package/jsx/cs/InteractionNotification/InteractionNotification.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.stories.jsx","sourceRoot":"","sources":["../../../src/cs/InteractionNotification/InteractionNotification.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAEtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,eAAe;IACb,KAAK,EAAE,0CAA0C;IACjD,SAAS,EAAE,uBAAuB;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,OAAO,CACL,CAAC,GAAG,CACF;MAAA,CAAC,uBAAuB,CACtB,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC,CAC5C,KAAK,CAAC,eAAe,CACrB,WAAW,CAAC,YAAY,CACxB,aAAa,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC,CACxD,MAAM,CAAC,CAAC;YACN,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,4BAA4B;SACnC,CAAC,CACF,MAAM,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE;YACvB;gBACE,EAAE,EAAE,QAAQ;gBACZ,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,kBAAkB;aAC1B;YACD;gBACE,EAAE,EAAE,WAAW;gBACf,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,GAAG;aACX;YACD;gBACE,EAAE,EAAE,iBAAiB;gBACrB,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;aACvC;SACF,CAAC,CAAC,CACH,QAAQ,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAE/B;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { object, text } from '@storybook/addon-knobs';\n\nimport { InteractionNotification } from '@pega/cosmos-react-cs';\n\nexport default {\n  title: 'Customer Service/InteractionNotification',\n  component: InteractionNotification\n};\n\nexport const interactionNotification = () => {\n  return (\n    <div>\n      <InteractionNotification\n        icon={text('Header icon', 'phone-in-solid')}\n        title='Incoming call'\n        primaryText='John Brown'\n        secondaryText={text('Secondary text', '(617) 347-5557')}\n        status={{\n          variant: 'success',\n          text: 'VERIFIED PLATINUM CUSTOMER'\n        }}\n        fields={object('Fields', [\n          {\n            id: 'reason',\n            name: 'Reason for calling',\n            value: 'Billing question'\n          },\n          {\n            id: 'openCases',\n            name: 'Open cases',\n            value: '1'\n          },\n          {\n            id: 'lastInteraction',\n            name: 'Last interaction',\n            value: new Date().toLocaleDateString()\n          }\n        ])}\n        onAccept={action('accept')}\n      />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"InteractionNotification.stories.jsx","sourceRoot":"","sources":["../../../src/cs/InteractionNotification/InteractionNotification.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,0CAA0C;IACjD,SAAS,EAAE,uBAAuB;CAC3B,CAAC;AAOV,MAAM,CAAC,MAAM,2BAA2B,GAA4C,CAClF,IAAsC,EACtC,EAAE;IACF,OAAO,CACL,CAAC,GAAG,CACF;MAAA,CAAC,uBAAuB,CACtB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,KAAK,CAAC,eAAe,CACrB,WAAW,CAAC,YAAY,CACxB,aAAa,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAClC,MAAM,CAAC,CAAC;YACN,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,4BAA4B;SACnC,CAAC,CACF,MAAM,CAAC,CAAC;YACN;gBACE,EAAE,EAAE,QAAQ;gBACZ,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,kBAAkB;aAC1B;YACD;gBACE,EAAE,EAAE,WAAW;gBACf,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,GAAG;aACX;YACD;gBACE,EAAE,EAAE,iBAAiB;gBACrB,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;aACvC;SACF,CAAC,CACF,QAAQ,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAE/B;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,2BAA2B,CAAC,IAAI,GAAG;IACjC,IAAI,EAAE,gBAAgB;IACtB,aAAa,EAAE,gBAAgB;CAChC,CAAC;AAEF,2BAA2B,CAAC,QAAQ,GAAG;IACrC,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAClE,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { InteractionNotification } from '@pega/cosmos-react-cs';\nimport { icons } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Customer Service/InteractionNotification',\n  component: InteractionNotification\n} as Meta;\n\ninterface InteractionNotificationDemoProps {\n  icon: string;\n  secondaryText: string;\n}\n\nexport const InteractionNotificationDemo: Story<InteractionNotificationDemoProps> = (\n  args: InteractionNotificationDemoProps\n) => {\n  return (\n    <div>\n      <InteractionNotification\n        icon={args.icon}\n        title='Incoming call'\n        primaryText='John Brown'\n        secondaryText={args.secondaryText}\n        status={{\n          variant: 'success',\n          text: 'VERIFIED PLATINUM CUSTOMER'\n        }}\n        fields={[\n          {\n            id: 'reason',\n            name: 'Reason for calling',\n            value: 'Billing question'\n          },\n          {\n            id: 'openCases',\n            name: 'Open cases',\n            value: '1'\n          },\n          {\n            id: 'lastInteraction',\n            name: 'Last interaction',\n            value: new Date().toLocaleDateString()\n          }\n        ]}\n        onAccept={action('accept')}\n      />\n    </div>\n  );\n};\n\nInteractionNotificationDemo.args = {\n  icon: 'phone-in-solid',\n  secondaryText: '(123) 456-7890'\n};\n\nInteractionNotificationDemo.argTypes = {\n  icon: { options: icons, control: { type: 'select', icons: true } },\n  secondaryText: { options: { type: 'text' } }\n};\n"]}

package/jsx/cs/InteractionTimer/InteractionTimer.mocks.d.ts

@@ -0,0 +1,11 @@
+import { InteractionTimerProps } from '@pega/cosmos-react-cs';
+export declare const formatDuration: (duration: number) => {
+    visual: string;
+    ariaLabel: string;
+};
+export declare const InteractionTimerSLAMileStones: {
+    from: number;
+    to: number;
+}[];
+export declare const InteractionTimerStages: InteractionTimerProps['sla'][];
+//# sourceMappingURL=InteractionTimer.mocks.d.ts.map

package/jsx/cs/InteractionTimer/InteractionTimer.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionTimer.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/InteractionTimer/InteractionTimer.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,eAAO,MAAM,cAAc,aAAc,MAAM;;;CAY9C,CAAC;AAEF,eAAO,MAAM,6BAA6B;;;GAazC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAIhE,CAAC"}

package/jsx/cs/InteractionTimer/InteractionTimer.mocks.js

@@ -0,0 +1,29 @@
+export const formatDuration = (duration) => {
+    const hours = Math.floor(duration / 3600);
+    const minutes = Math.floor((duration - hours * 3600) / 60);
+    const seconds = Math.floor(duration - hours * 3600 - minutes * 60);
+    return {
+        visual: `${hours > 0 ? `${hours}:` : ''}${hours > 0 && minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? '0' : ''}${seconds}`,
+        ariaLabel: `${hours > 0 ? `${hours} hours ` : ''}${minutes > 0 ? `${minutes} minutes ` : ''}${seconds > 0 ? `${seconds} seconds ` : ''}`
+    };
+};
+export const InteractionTimerSLAMileStones = [
+    {
+        from: 0,
+        to: 60
+    },
+    {
+        from: 60,
+        to: 120
+    },
+    {
+        from: 120,
+        to: 180
+    }
+];
+export const InteractionTimerStages = [
+    'goal',
+    'deadline',
+    'past-deadline'
+];
+//# sourceMappingURL=InteractionTimer.mocks.js.map

package/jsx/cs/InteractionTimer/InteractionTimer.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionTimer.mocks.js","sourceRoot":"","sources":["../../../src/cs/InteractionTimer/InteractionTimer.mocks.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAgB,EAAE,EAAE;IACjD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,OAAO,GAAG,EAAE,CAAC,CAAC;IACnE,OAAO;QACL,MAAM,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GACrC,KAAK,GAAG,CAAC,IAAI,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,OAC9C,IAAI,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE;QACvC,SAAS,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,WAAW,CAAC,CAAC,CAAC,EAAE,GACzF,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,WAAW,CAAC,CAAC,CAAC,EACxC,EAAE;KACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAG;IAC3C;QACE,IAAI,EAAE,CAAC;QACP,EAAE,EAAE,EAAE;KACP;IACD;QACE,IAAI,EAAE,EAAE;QACR,EAAE,EAAE,GAAG;KACR;IACD;QACE,IAAI,EAAE,GAAG;QACT,EAAE,EAAE,GAAG;KACR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAmC;IACpE,MAAM;IACN,UAAU;IACV,eAAe;CAChB,CAAC","sourcesContent":["import { InteractionTimerProps } from '@pega/cosmos-react-cs';\n\nexport const formatDuration = (duration: number) => {\n  const hours = Math.floor(duration / 3600);\n  const minutes = Math.floor((duration - hours * 3600) / 60);\n  const seconds = Math.floor(duration - hours * 3600 - minutes * 60);\n  return {\n    visual: `${hours > 0 ? `${hours}:` : ''}${\n      hours > 0 && minutes < 10 ? `0${minutes}` : minutes\n    }:${seconds < 10 ? '0' : ''}${seconds}`,\n    ariaLabel: `${hours > 0 ? `${hours} hours ` : ''}${minutes > 0 ? `${minutes} minutes ` : ''}${\n      seconds > 0 ? `${seconds} seconds ` : ''\n    }`\n  };\n};\n\nexport const InteractionTimerSLAMileStones = [\n  {\n    from: 0,\n    to: 60\n  },\n  {\n    from: 60,\n    to: 120\n  },\n  {\n    from: 120,\n    to: 180\n  }\n];\n\nexport const InteractionTimerStages: InteractionTimerProps['sla'][] = [\n  'goal',\n  'deadline',\n  'past-deadline'\n];\n"]}

package/jsx/cs/InteractionTimer/InteractionTimer.stories.d.ts

@@ -1,14 +1,10 @@
-/// <reference types="react" />
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { InteractionTimerProps } from '@pega/cosmos-react-cs';
-declare const _default: {
-    title: string;
-    component: import("react").FunctionComponent<InteractionTimerProps & import("@pega/cosmos-react-core").ForwardProps>;
-};
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export interface InteractionTimerStoryProps extends InteractionTimerProps {
-    createdAt?: number;
     showTimer?: boolean;
+    interactionType?: string;
 }
 export declare const InteractionTimerDemo: Story<InteractionTimerStoryProps>;
 //# sourceMappingURL=InteractionTimer.stories.d.ts.map

package/jsx/cs/InteractionTimer/InteractionTimer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionTimer.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/InteractionTimer/InteractionTimer.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGzC,OAAO,EAAoB,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;;;;;AAEhF,wBAGE;AAEF,MAAM,WAAW,0BAA2B,SAAQ,qBAAqB;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAqCD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,0BAA0B,CAsElE,CAAC"}
+{"version":3,"file":"InteractionTimer.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/InteractionTimer/InteractionTimer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAoB,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;;AAShF,wBAGU;AAEV,MAAM,WAAW,0BAA2B,SAAQ,qBAAqB;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,0BAA0B,CA0FlE,CAAC"}

package/jsx/cs/InteractionTimer/InteractionTimer.stories.jsx

@@ -1,47 +1,21 @@
 import { useEffect, useState } from 'react';
 import { InteractionTimer } from '@pega/cosmos-react-cs';
+import { icons } from '@pega/cosmos-react-core';
+import { formatDuration, InteractionTimerSLAMileStones, InteractionTimerStages } from './InteractionTimer.mocks';
 export default {
     title: 'Customer Service/InteractionTimer',
     component: InteractionTimer
 };
-const formatDuration = (duration) => {
-    const hours = Math.floor(duration / 3600);
-    const minutes = Math.floor((duration - hours * 3600) / 60);
-    const seconds = Math.floor(duration - hours * 3600 - minutes * 60);
-    return {
-        visual: `${hours > 0 ? `${hours}:` : ''}${hours > 0 && minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? '0' : ''}${seconds}`,
-        ariaLabel: `${hours > 0 ? `${hours} hours ` : ''}${minutes > 0 ? `${minutes} minutes ` : ''}${seconds > 0 ? `${seconds} seconds ` : ''}`
-    };
-};
-const InteractionTimerSLAMileStones = [
-    {
-        from: 0,
-        to: 10
-    },
-    {
-        from: 10,
-        to: 30
-    },
-    {
-        from: 30,
-        to: 90
-    }
-];
-const InteractionTimerStages = [
-    'goal',
-    'deadline',
-    'past-deadline'
-];
 export const InteractionTimerDemo = (args) => {
     const [timerState, setTimerState] = useState({
-        ariaLabel: '',
+        ariaLabel: `${args.interactionType ? `${args.interactionType}, ` : ''}goal and 0 seconds passed`,
         timer: '0:00',
         slaStage: 'goal',
         currentProgress: 0,
         hasNotifications: false
     });
     useEffect(() => {
-        const latestCreatedAt = args.createdAt || new Date().getTime();
+        const latestCreatedAt = new Date().getTime();
         const timerInterval = args.showTimer &&
             setInterval(() => {
                 const timeElapsed = (new Date().getTime() - latestCreatedAt) / 1000;
@@ -54,32 +28,53 @@ export const InteractionTimerDemo = (args) => {
                 }, 0);
                 const hasNotifications = currSlaStage > 0;
                 const formattedDuration = formatDuration(timeElapsed);
-                setTimerState({
-                    timer: formattedDuration.visual,
-                    ariaLabel: `${InteractionTimerStages[currSlaStage]} and ${formattedDuration.ariaLabel}passed${hasNotifications ? ' with new notifications' : ''}`,
-                    slaStage: InteractionTimerStages[currSlaStage],
-                    currentProgress: Math.min(((timeElapsed - InteractionTimerSLAMileStones[currSlaStage].from) * 100) /
-                        (InteractionTimerSLAMileStones[currSlaStage].to -
-                            InteractionTimerSLAMileStones[currSlaStage].from), 100),
-                    hasNotifications
+                setTimerState(prev => {
+                    return {
+                        ...prev,
+                        timer: formattedDuration.visual,
+                        slaStage: InteractionTimerStages[currSlaStage],
+                        currentProgress: Math.floor(Math.min(((timeElapsed - InteractionTimerSLAMileStones[currSlaStage].from) * 100) /
+                            (InteractionTimerSLAMileStones[currSlaStage].to -
+                                InteractionTimerSLAMileStones[currSlaStage].from), 100)),
+                        hasNotifications
+                    };
                 });
             }, 1000);
-        if (timerInterval)
+        const ariaInterval = setInterval(() => {
+            const timeElapsed = (new Date().getTime() - latestCreatedAt) / 1000;
+            const formattedDuration = formatDuration(timeElapsed);
+            setTimerState(prev => {
+                return {
+                    ...prev,
+                    ariaLabel: `${args.interactionType ? `${args.interactionType}, ` : ''}${prev.slaStage} and ${formattedDuration.ariaLabel}passed${prev.hasNotifications ? ' with new notifications' : ''}`
+                };
+            });
+        }, 15000);
+        if (timerInterval && ariaInterval)
             return () => {
                 clearInterval(timerInterval);
+                clearInterval(ariaInterval);
                 setTimerState({ ...timerState, timer: '0:00' });
             };
-    }, [args.hasNotifications, args.showTimer]);
-    return (<InteractionTimer sla={args.showTimer ? timerState.slaStage : args.sla} hasNotifications={args.hasNotifications ? timerState.hasNotifications : false} icon={args.icon} meta={args.showTimer ? timerState.timer : args.meta} progress={timerState.currentProgress} ariaLabel={timerState.ariaLabel} tabIndex={0}/>);
+    }, [args.hasNotifications, args.showTimer, args.interactionType]);
+    return (<InteractionTimer sla={args.showTimer ? timerState.slaStage : args.sla} hasNotifications={args.hasNotifications ? timerState.hasNotifications : false} icon={args.icon} meta={args.showTimer ? timerState.timer : args.meta} progress={timerState.currentProgress} ariaLabel={timerState.ariaLabel}/>);
 };
 InteractionTimerDemo.args = {
     hasNotifications: true,
     icon: 'chat-solid',
     showTimer: true,
-    meta: 'QR'
+    meta: 'QR',
+    interactionType: 'Chat interaction'
 };
 InteractionTimerDemo.argTypes = {
     hasNotifications: { control: { type: 'boolean' } },
-    showTimer: { control: { type: 'boolean' } }
+    icon: { options: icons, control: { type: 'select', icons: true } },
+    showTimer: { control: { type: 'boolean' } },
+    meta: { control: { type: 'text' } },
+    interactionType: {
+        table: {
+            disable: true
+        }
+    }
 };
 //# sourceMappingURL=InteractionTimer.stories.jsx.map

package/jsx/cs/InteractionTimer/InteractionTimer.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionTimer.stories.jsx","sourceRoot":"","sources":["../../../src/cs/InteractionTimer/InteractionTimer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { InteractionTimer, InteractionTimerProps } from '@pega/cosmos-react-cs';\n\nexport default {\n  title: 'Customer Service/InteractionTimer',\n  component: InteractionTimer\n};\n\nexport interface InteractionTimerStoryProps extends InteractionTimerProps {\n  createdAt?: number;\n  showTimer?: boolean;\n}\n\nconst formatDuration = (duration: number) => {\n  const hours = Math.floor(duration / 3600);\n  const minutes = Math.floor((duration - hours * 3600) / 60);\n  const seconds = Math.floor(duration - hours * 3600 - minutes * 60);\n  return {\n    visual: `${hours > 0 ? `${hours}:` : ''}${\n      hours > 0 && minutes < 10 ? `0${minutes}` : minutes\n    }:${seconds < 10 ? '0' : ''}${seconds}`,\n    ariaLabel: `${hours > 0 ? `${hours} hours ` : ''}${minutes > 0 ? `${minutes} minutes ` : ''}${\n      seconds > 0 ? `${seconds} seconds ` : ''\n    }`\n  };\n};\n\nconst InteractionTimerSLAMileStones = [\n  {\n    from: 0,\n    to: 10\n  },\n  {\n    from: 10,\n    to: 30\n  },\n  {\n    from: 30,\n    to: 90\n  }\n];\n\nconst InteractionTimerStages: InteractionTimerProps['sla'][] = [\n  'goal',\n  'deadline',\n  'past-deadline'\n];\n\nexport const InteractionTimerDemo: Story<InteractionTimerStoryProps> = (\n  args: InteractionTimerStoryProps\n) => {\n  const [timerState, setTimerState] = useState<{\n    timer: string;\n    ariaLabel: string;\n    slaStage: InteractionTimerProps['sla'];\n    currentProgress: number;\n    hasNotifications: boolean;\n  }>({\n    ariaLabel: '',\n    timer: '0:00',\n    slaStage: 'goal',\n    currentProgress: 0,\n    hasNotifications: false\n  });\n\n  useEffect(() => {\n    const latestCreatedAt = args.createdAt || new Date().getTime();\n    const timerInterval =\n      args.showTimer &&\n      setInterval(() => {\n        const timeElapsed = (new Date().getTime() - latestCreatedAt) / 1000;\n        const currSlaStage = InteractionTimerSLAMileStones.reduce(\n          (prevValue, currValue, currentIndex, arr) => {\n            if (\n              timeElapsed >= currValue.from &&\n              (timeElapsed <= currValue.to || currentIndex === arr.length - 1)\n            ) {\n              return currentIndex;\n            }\n            return prevValue;\n          },\n          0\n        );\n\n        const hasNotifications = currSlaStage > 0;\n        const formattedDuration = formatDuration(timeElapsed);\n        setTimerState({\n          timer: formattedDuration.visual,\n          ariaLabel: `${InteractionTimerStages[currSlaStage]} and ${\n            formattedDuration.ariaLabel\n          }passed${hasNotifications ? ' with new notifications' : ''}`,\n          slaStage: InteractionTimerStages[currSlaStage],\n          currentProgress: Math.min(\n            ((timeElapsed - InteractionTimerSLAMileStones[currSlaStage].from) * 100) /\n              (InteractionTimerSLAMileStones[currSlaStage].to -\n                InteractionTimerSLAMileStones[currSlaStage].from),\n            100\n          ),\n          hasNotifications\n        });\n      }, 1000);\n    if (timerInterval)\n      return () => {\n        clearInterval(timerInterval);\n        setTimerState({ ...timerState, timer: '0:00' });\n      };\n  }, [args.hasNotifications, args.showTimer]);\n  return (\n    <InteractionTimer\n      sla={args.showTimer ? timerState.slaStage : args.sla}\n      hasNotifications={args.hasNotifications ? timerState.hasNotifications : false}\n      icon={args.icon}\n      meta={args.showTimer ? timerState.timer : args.meta}\n      progress={timerState.currentProgress}\n      ariaLabel={timerState.ariaLabel}\n      tabIndex={0}\n    />\n  );\n};\n\nInteractionTimerDemo.args = {\n  hasNotifications: true,\n  icon: 'chat-solid',\n  showTimer: true,\n  meta: 'QR'\n};\n\nInteractionTimerDemo.argTypes = {\n  hasNotifications: { control: { type: 'boolean' } },\n  showTimer: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"InteractionTimer.stories.jsx","sourceRoot":"","sources":["../../../src/cs/InteractionTimer/InteractionTimer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { InteractionTimer, InteractionTimerProps } from '@pega/cosmos-react-cs';\nimport { icons } from '@pega/cosmos-react-core';\n\nimport {\n  formatDuration,\n  InteractionTimerSLAMileStones,\n  InteractionTimerStages\n} from './InteractionTimer.mocks';\n\nexport default {\n  title: 'Customer Service/InteractionTimer',\n  component: InteractionTimer\n} as Meta;\n\nexport interface InteractionTimerStoryProps extends InteractionTimerProps {\n  showTimer?: boolean;\n  interactionType?: string;\n}\n\nexport const InteractionTimerDemo: Story<InteractionTimerStoryProps> = (\n  args: InteractionTimerStoryProps\n) => {\n  const [timerState, setTimerState] = useState<{\n    timer: string;\n    ariaLabel: string;\n    slaStage: InteractionTimerProps['sla'];\n    currentProgress: number;\n    hasNotifications: boolean;\n  }>({\n    ariaLabel: `${\n      args.interactionType ? `${args.interactionType}, ` : ''\n    }goal and 0 seconds passed`,\n    timer: '0:00',\n    slaStage: 'goal',\n    currentProgress: 0,\n    hasNotifications: false\n  });\n\n  useEffect(() => {\n    const latestCreatedAt = new Date().getTime();\n    const timerInterval =\n      args.showTimer &&\n      setInterval(() => {\n        const timeElapsed = (new Date().getTime() - latestCreatedAt) / 1000;\n        const currSlaStage = InteractionTimerSLAMileStones.reduce(\n          (prevValue, currValue, currentIndex, arr) => {\n            if (\n              timeElapsed >= currValue.from &&\n              (timeElapsed <= currValue.to || currentIndex === arr.length - 1)\n            ) {\n              return currentIndex;\n            }\n            return prevValue;\n          },\n          0\n        );\n\n        const hasNotifications = currSlaStage > 0;\n        const formattedDuration = formatDuration(timeElapsed);\n        setTimerState(prev => {\n          return {\n            ...prev,\n            timer: formattedDuration.visual,\n            slaStage: InteractionTimerStages[currSlaStage],\n            currentProgress: Math.floor(\n              Math.min(\n                ((timeElapsed - InteractionTimerSLAMileStones[currSlaStage].from) * 100) /\n                  (InteractionTimerSLAMileStones[currSlaStage].to -\n                    InteractionTimerSLAMileStones[currSlaStage].from),\n                100\n              )\n            ),\n            hasNotifications\n          };\n        });\n      }, 1000);\n\n    const ariaInterval = setInterval(() => {\n      const timeElapsed = (new Date().getTime() - latestCreatedAt) / 1000;\n      const formattedDuration = formatDuration(timeElapsed);\n      setTimerState(prev => {\n        return {\n          ...prev,\n          ariaLabel: `${args.interactionType ? `${args.interactionType}, ` : ''}${\n            prev.slaStage\n          } and ${formattedDuration.ariaLabel}passed${\n            prev.hasNotifications ? ' with new notifications' : ''\n          }`\n        };\n      });\n    }, 15000);\n    if (timerInterval && ariaInterval)\n      return () => {\n        clearInterval(timerInterval);\n        clearInterval(ariaInterval);\n        setTimerState({ ...timerState, timer: '0:00' });\n      };\n  }, [args.hasNotifications, args.showTimer, args.interactionType]);\n\n  return (\n    <InteractionTimer\n      sla={args.showTimer ? timerState.slaStage : args.sla}\n      hasNotifications={args.hasNotifications ? timerState.hasNotifications : false}\n      icon={args.icon}\n      meta={args.showTimer ? timerState.timer : args.meta}\n      progress={timerState.currentProgress}\n      ariaLabel={timerState.ariaLabel}\n    />\n  );\n};\n\nInteractionTimerDemo.args = {\n  hasNotifications: true,\n  icon: 'chat-solid',\n  showTimer: true,\n  meta: 'QR',\n  interactionType: 'Chat interaction'\n};\n\nInteractionTimerDemo.argTypes = {\n  hasNotifications: { control: { type: 'boolean' } },\n  icon: { options: icons, control: { type: 'select', icons: true } },\n  showTimer: { control: { type: 'boolean' } },\n  meta: { control: { type: 'text' } },\n  interactionType: {\n    table: {\n      disable: true\n    }\n  }\n};\n"]}

package/jsx/cs/TaskManager/TaskManager.mocks.d.ts

@@ -1,3 +1,9 @@
+export declare const WrapUpTask: {
+    id: string;
+    name: string;
+    status: string;
+    variant: string;
+};
 export declare const TaskPickerMockData: {
     tasks: {
         id: string;
@@ -9,4 +15,16 @@ export declare const TaskPickerMockData: {
         }[];
     }[];
 };
+export declare const EntityListMock: {
+    name: string;
+    value: {
+        id: string;
+        entity: {
+            value: string;
+            type: string;
+            name: string;
+            variant: number;
+        };
+    }[];
+}[];
 //# sourceMappingURL=TaskManager.mocks.d.ts.map

package/jsx/cs/TaskManager/TaskManager.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;;;;;;;CAqI9B,CAAC"}
+{"version":3,"file":"TaskManager.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.mocks.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;CAKtB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;CAqI9B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;GAqF1B,CAAC"}

package/jsx/cs/TaskManager/TaskManager.mocks.js

@@ -1,3 +1,10 @@
+import { createUID } from '@pega/cosmos-react-core';
+export const WrapUpTask = {
+    id: createUID(),
+    name: 'Wrap up',
+    status: 'In progress',
+    variant: 'pending'
+};
 export const TaskPickerMockData = {
     tasks: [
         {
@@ -132,4 +139,90 @@ export const TaskPickerMockData = {
         }
     ]
 };
+export const EntityListMock = [
+    {
+        name: 'Ticket number',
+        value: [
+            {
+                id: '1',
+                entity: {
+                    value: '7546383',
+                    type: 'system',
+                    name: 'Ticket number',
+                    variant: 3
+                }
+            }
+        ]
+    },
+    {
+        name: 'Date',
+        value: [
+            {
+                id: '1',
+                entity: {
+                    value: 'Dec 5,2021 9.05 AM',
+                    type: 'system',
+                    name: 'Date',
+                    variant: 4
+                }
+            }
+        ]
+    },
+    {
+        name: 'Flight Number',
+        value: [
+            {
+                id: '1',
+                entity: {
+                    value: 'FL-JK-403',
+                    type: 'system',
+                    name: 'Flight Number',
+                    variant: 5
+                }
+            }
+        ]
+    },
+    {
+        name: 'Email',
+        value: [
+            {
+                id: '1',
+                entity: {
+                    value: 'robert.stanton@example.com',
+                    type: 'system',
+                    name: 'Email',
+                    variant: 2
+                }
+            }
+        ]
+    },
+    {
+        name: 'Address',
+        value: [
+            {
+                id: '1',
+                entity: {
+                    value: 'Hyderabad',
+                    type: 'system',
+                    name: 'Address',
+                    variant: 15
+                }
+            }
+        ]
+    },
+    {
+        name: 'Location',
+        value: [
+            {
+                id: '1',
+                entity: {
+                    value: 'Hyderabad',
+                    type: 'system',
+                    name: 'Location',
+                    variant: 8
+                }
+            }
+        ]
+    }
+];
 //# sourceMappingURL=TaskManager.mocks.js.map

package/jsx/cs/TaskManager/TaskManager.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.mocks.js","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["export const TaskPickerMockData = {\n  tasks: [\n    {\n      id: '1',\n      label: 'Frequently performed',\n      items: [\n        {\n          id: '1-1',\n          primary: 'Address change',\n          fields: [\n            'Address line 1',\n            'Address line 2',\n            'Country',\n            'City',\n            'State',\n            'Postal code',\n            'Phone',\n            'Cell',\n            'FAX',\n            'Email'\n          ]\n        },\n        {\n          id: '1-2',\n          primary: 'Make payment',\n          fields: ['Account number', 'Amount', 'Comments']\n        }\n      ]\n    },\n    {\n      id: '2',\n      label: 'Account',\n      items: [\n        {\n          id: '2-1',\n          primary: 'Address change',\n          fields: [\n            'Address line 1',\n            'Address line 2',\n            'Country',\n            'City',\n            'State',\n            'Postal code',\n            'Phone',\n            'Cell',\n            'FAX',\n            'Email'\n          ]\n        },\n        {\n          id: '2-2',\n          primary: 'Close account',\n          fields: ['Reason', 'Comments']\n        }\n      ]\n    },\n    {\n      id: '3',\n      label: 'Contact',\n      items: [\n        {\n          id: '3-1',\n          primary: 'Modify account links',\n          fields: ['Customer name', 'Account number', 'Contact number', 'Email', 'Account link']\n        },\n        {\n          id: '3-2',\n          primary: 'Update contact profile',\n          fields: ['Customer ID', 'New contact number', 'New email', 'Other comments']\n        }\n      ]\n    },\n    {\n      id: '4',\n      label: 'Sales and offers',\n      items: [\n        {\n          id: '4-1',\n          primary: 'Create lead',\n          fields: [\n            'Stage',\n            'Phone',\n            'Email',\n            'Territory',\n            'First name',\n            'Last name',\n            'Owner',\n            'Rating',\n            'Mobile'\n          ]\n        },\n        {\n          id: '4-2',\n          primary: 'Create opportunity',\n          fields: [\n            'Amount',\n            'Close date',\n            'Probability',\n            'Owner',\n            'Name',\n            'Territory',\n            'Short name',\n            'Primary contact',\n            'Forecast category',\n            'Stage',\n            'Source',\n            'Must win'\n          ]\n        }\n      ]\n    },\n    {\n      id: '5',\n      label: 'General',\n      items: [\n        {\n          id: '5-1',\n          primary: 'File a complaint',\n          fields: ['Individual Name', 'Identification number', 'Name', 'Issue', 'Severity']\n        },\n        {\n          id: '5-2',\n          primary: 'Schedule activity',\n          fields: ['Activity name', 'Time', 'Date', 'Target completion date and time']\n        },\n        {\n          id: '5-3',\n          primary: 'Send correspondence',\n          fields: ['From', 'To', 'Subject', 'Correspondence body', 'Signature']\n        }\n      ]\n    }\n  ]\n};\n"]}
+{"version":3,"file":"TaskManager.mocks.js","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["import { createUID } from '@pega/cosmos-react-core';\n\nexport const WrapUpTask = {\n  id: createUID(),\n  name: 'Wrap up',\n  status: 'In progress',\n  variant: 'pending'\n};\n\nexport const TaskPickerMockData = {\n  tasks: [\n    {\n      id: '1',\n      label: 'Frequently performed',\n      items: [\n        {\n          id: '1-1',\n          primary: 'Address change',\n          fields: [\n            'Address line 1',\n            'Address line 2',\n            'Country',\n            'City',\n            'State',\n            'Postal code',\n            'Phone',\n            'Cell',\n            'FAX',\n            'Email'\n          ]\n        },\n        {\n          id: '1-2',\n          primary: 'Make payment',\n          fields: ['Account number', 'Amount', 'Comments']\n        }\n      ]\n    },\n    {\n      id: '2',\n      label: 'Account',\n      items: [\n        {\n          id: '2-1',\n          primary: 'Address change',\n          fields: [\n            'Address line 1',\n            'Address line 2',\n            'Country',\n            'City',\n            'State',\n            'Postal code',\n            'Phone',\n            'Cell',\n            'FAX',\n            'Email'\n          ]\n        },\n        {\n          id: '2-2',\n          primary: 'Close account',\n          fields: ['Reason', 'Comments']\n        }\n      ]\n    },\n    {\n      id: '3',\n      label: 'Contact',\n      items: [\n        {\n          id: '3-1',\n          primary: 'Modify account links',\n          fields: ['Customer name', 'Account number', 'Contact number', 'Email', 'Account link']\n        },\n        {\n          id: '3-2',\n          primary: 'Update contact profile',\n          fields: ['Customer ID', 'New contact number', 'New email', 'Other comments']\n        }\n      ]\n    },\n    {\n      id: '4',\n      label: 'Sales and offers',\n      items: [\n        {\n          id: '4-1',\n          primary: 'Create lead',\n          fields: [\n            'Stage',\n            'Phone',\n            'Email',\n            'Territory',\n            'First name',\n            'Last name',\n            'Owner',\n            'Rating',\n            'Mobile'\n          ]\n        },\n        {\n          id: '4-2',\n          primary: 'Create opportunity',\n          fields: [\n            'Amount',\n            'Close date',\n            'Probability',\n            'Owner',\n            'Name',\n            'Territory',\n            'Short name',\n            'Primary contact',\n            'Forecast category',\n            'Stage',\n            'Source',\n            'Must win'\n          ]\n        }\n      ]\n    },\n    {\n      id: '5',\n      label: 'General',\n      items: [\n        {\n          id: '5-1',\n          primary: 'File a complaint',\n          fields: ['Individual Name', 'Identification number', 'Name', 'Issue', 'Severity']\n        },\n        {\n          id: '5-2',\n          primary: 'Schedule activity',\n          fields: ['Activity name', 'Time', 'Date', 'Target completion date and time']\n        },\n        {\n          id: '5-3',\n          primary: 'Send correspondence',\n          fields: ['From', 'To', 'Subject', 'Correspondence body', 'Signature']\n        }\n      ]\n    }\n  ]\n};\n\nexport const EntityListMock = [\n  {\n    name: 'Ticket number',\n    value: [\n      {\n        id: '1',\n        entity: {\n          value: '7546383',\n          type: 'system',\n          name: 'Ticket number',\n          variant: 3\n        }\n      }\n    ]\n  },\n  {\n    name: 'Date',\n    value: [\n      {\n        id: '1',\n        entity: {\n          value: 'Dec 5,2021 9.05 AM',\n          type: 'system',\n          name: 'Date',\n          variant: 4\n        }\n      }\n    ]\n  },\n  {\n    name: 'Flight Number',\n    value: [\n      {\n        id: '1',\n        entity: {\n          value: 'FL-JK-403',\n          type: 'system',\n          name: 'Flight Number',\n          variant: 5\n        }\n      }\n    ]\n  },\n  {\n    name: 'Email',\n    value: [\n      {\n        id: '1',\n        entity: {\n          value: 'robert.stanton@example.com',\n          type: 'system',\n          name: 'Email',\n          variant: 2\n        }\n      }\n    ]\n  },\n  {\n    name: 'Address',\n    value: [\n      {\n        id: '1',\n        entity: {\n          value: 'Hyderabad',\n          type: 'system',\n          name: 'Address',\n          variant: 15\n        }\n      }\n    ]\n  },\n  {\n    name: 'Location',\n    value: [\n      {\n        id: '1',\n        entity: {\n          value: 'Hyderabad',\n          type: 'system',\n          name: 'Location',\n          variant: 8\n        }\n      }\n    ]\n  }\n];\n"]}

package/jsx/cs/TaskManager/TaskManager.stories.d.ts

@@ -1,13 +1,15 @@
 import { ReactNode } from 'react';
-import { TaskManagerProps, TaskProps } from '@pega/cosmos-react-cs';
-declare const _default: {
-    title: string;
-    component: import("react").FunctionComponent<TaskManagerProps & import("@pega/cosmos-react-core").ForwardProps>;
-};
+import { Meta, Story } from '@storybook/react';
+import { DialogueProps, TaskManagerProps, TaskProps } from '@pega/cosmos-react-cs';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export interface TaskManagerStoryProps extends TaskManagerProps {
     initialTasks?: TaskProps[];
     main?: ReactNode;
+    serviceTasksEmpty?: boolean;
+    colGap?: number;
+    rowGap?: number;
+    verbatimStatus?: DialogueProps['verbatimStatus'];
 }
-export declare const TaskManager: ({ initialTasks, main, onTaskDismiss, onTaskLaunch, wrapUp }: TaskManagerStoryProps) => JSX.Element;
+export declare const TaskManagerDemo: Story<TaskManagerStoryProps>;
 //# sourceMappingURL=TaskManager.stories.d.ts.map

package/jsx/cs/TaskManager/TaskManager.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AAsBpD,OAAO,EAEL,gBAAgB,EAChB,SAAS,EAEV,MAAM,uBAAuB,CAAC;;;;;AAM/B,wBAGE;AAaF,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAQD,eAAO,MAAM,WAAW,gEAMrB,qBAAqB,gBAwZvB,CAAC"}
+{"version":3,"file":"TaskManager.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/TaskManager/TaskManager.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAkB/C,OAAO,EACL,aAAa,EAEb,gBAAgB,EAChB,SAAS,EAEV,MAAM,uBAAuB,CAAC;;AAU/B,wBAGU;AAIV,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,YAAY,CAAC,EAAE,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CAmexD,CAAC"}