@pega/cosmos-react-demos 5.0.0-dev.2.1 → 5.0.0-dev.4.0

package/jsx/cs/CSAppShell/CSAppShell.stories.jsx

@@ -1,173 +0,0 @@
-import { useEffect, useState, useMemo } from 'react';
-import { createUID, TwoColumnPage, registerIcon } from '@pega/cosmos-react-core';
-import * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';
-import { CaseViewMock } from '../../work/CaseView/CaseView.mocks';
-import { AppShellDemo } from '../../core/AppShell/AppShell.stories';
-import { TasksDemo } from '../../work/Tasks/Tasks.stories';
-import { FeedDemo } from '../../social/Feed/Feed.stories';
-import { EmailShellDemo } from '../../social/Email/Email.stories';
-import { StandardChat } from '../../social/Chat/Chat.stories';
-import { TaskManagerDemo } from '../TaskManager/TaskManager.stories';
-import { InteractionTimerDemo as InteractionTimerStory } from '../InteractionTimer/InteractionTimer.stories';
-import { AppShellMockData, ChatSettingsPanelMock, CTIControlPanel, CTIControlPanelContext, EmailNotificationPanelMock } from './CSAppShell.mocks';
-registerIcon(chatSolidIcon);
-export default {
-    title: 'Customer Service/CS App Shell',
-    parameters: {
-        layout: 'fullscreen'
-    },
-    args: {
-        isDraggable: true,
-        hasInteractionNotifications: true,
-        enableSla: true,
-        ctiPanel: 'internal',
-        applyThemeToExternalCTI: false
-    },
-    argTypes: {
-        isDraggable: { control: { type: 'boolean' } },
-        hasInteractionNotifications: { control: { type: 'boolean' } },
-        enableSla: { control: { type: 'boolean' } },
-        ctiPanel: { options: ['internal', 'external'], control: { type: 'inline-radio' } },
-        applyThemeToExternalCTI: { control: { type: 'boolean' } }
-    }
-};
-export const CSAppShell = (args) => {
-    const CaseData = AppShellMockData;
-    const home = <TwoColumnPage a={<FeedDemo />} b={<TasksDemo />} title='Welcome, Sara Davis'/>;
-    const [mainContent, setMainContent] = useState(home);
-    const [caseID, setCaseID] = useState(1001);
-    const [cases, setCases] = useState([]);
-    const [links, setLinks] = useState([
-        {
-            id: '01',
-            name: 'Home',
-            href: '#home',
-            icon: 'home-solid'
-        }
-    ]);
-    const renderCaseView = (name) => {
-        if (name) {
-            const { heading } = CaseData[name];
-            let persistentUtilityContent;
-            if (name === 'Mail interaction') {
-                persistentUtilityContent = {
-                    content: <EmailShellDemo hideSuggestions/>,
-                    title: 'Email'
-                };
-            }
-            else if (name === 'Chat interaction') {
-                persistentUtilityContent = {
-                    content: <StandardChat chatHeight='100%' chatWidth='100%'/>,
-                    title: 'Chat'
-                };
-            }
-            setMainContent(<CaseViewMock caseId='C-123' stages={false} tasks={<TaskManagerDemo verbatimStatus='pending'/>} persistentUtility={persistentUtilityContent} heading={heading}/>);
-        }
-    };
-    const setActiveItem = (key) => {
-        setCases((prevCases = []) => {
-            return prevCases.map(caseItem => {
-                return { ...caseItem, active: caseItem.id === key };
-            });
-        });
-        setLinks((prevLinks = []) => {
-            return prevLinks.map(link => {
-                return {
-                    ...link,
-                    active: link.name === key
-                };
-            });
-        });
-    };
-    const createInteraction = (createLink) => {
-        const { primary, secondary, icon, customerName } = createLink;
-        const key = createUID();
-        const createdAt = new Date().getTime();
-        const interactionTimerId = createUID();
-        const newCase = {
-            visual: (<InteractionTimerStory id={interactionTimerId} icon={icon} showTimer={args.enableSla} hasNotifications={args.hasInteractionNotifications} meta={args.enableSla ? '0:00' : createLink.meta} interactionType={primary}/>),
-            primary: customerName || 'Unknown customer',
-            secondary,
-            createdAt,
-            id: key,
-            active: true,
-            onClick: () => {
-                setActiveItem(key);
-                renderCaseView(primary);
-            },
-            onDismiss: (e) => {
-                setActiveItem('Home');
-                e.stopPropagation();
-                setCases((prevCases = []) => prevCases.filter(caseItem => caseItem.id !== key));
-                setMainContent(home);
-            },
-            'aria-labelledby': interactionTimerId
-        };
-        setCases((prevCases = []) => [...prevCases, newCase]);
-        setActiveItem(key);
-        setCaseID(caseID + 1);
-        renderCaseView(primary);
-    };
-    const createLinks = [
-        {
-            primary: 'Phone interaction',
-            secondary: 'Received 20s ago',
-            icon: 'phone-solid',
-            meta: 'FH',
-            customerName: 'Ginger Ventura'
-        },
-        {
-            primary: 'Chat interaction',
-            secondary: 'Sent 2h ago',
-            icon: 'chat-solid',
-            meta: 'SC',
-            customerName: 'Sara Davis'
-        },
-        {
-            primary: 'Mail interaction',
-            secondary: 'Received 20s ago',
-            icon: 'mail-solid',
-            meta: 'JB',
-            customerName: 'John Brown'
-        }
-    ].map(item => {
-        const { primary, icon } = item;
-        return {
-            name: primary,
-            icon,
-            href: '',
-            onClick: () => {
-                createInteraction(item);
-            }
-        };
-    });
-    useEffect(() => {
-        createInteraction({
-            primary: 'Phone interaction',
-            secondary: 'Received 20s ago',
-            icon: 'phone-solid',
-            meta: 'GV',
-            customerName: 'Ginger Ventura'
-        });
-    }, []);
-    const utils = [<EmailNotificationPanelMock />, <ChatSettingsPanelMock />, <CTIControlPanel />];
-    const appInfo = {
-        href: 'https://www.pega.com/',
-        imageSrc: 'https://www.clipartmax.com/png/middle/345-3454195_account-executive-civilian-pega-logo-png.png',
-        fullImageSrc: 'Full Image Source',
-        appName: 'CS AppShell'
-    };
-    return (<CTIControlPanelContext.Provider value={useMemo(() => ({
-            type: args.ctiPanel,
-            draggable: args.isDraggable,
-            applyAppStyling: args.applyThemeToExternalCTI
-        }), [args.isDraggable, args.applyThemeToExternalCTI, args.ctiPanel])}>
-      <AppShellDemo main={mainContent} appInfo={appInfo} cases={cases} createLinks={createLinks} caseLinks={links} utils={utils} onLinkClick={(name) => {
-            if (name === 'Home') {
-                setMainContent(home);
-            }
-            setActiveItem(name);
-        }} collapsedHoverMenus/>
-    </CTIControlPanelContext.Provider>);
-};
-//# sourceMappingURL=CSAppShell.stories.jsx.map

package/jsx/cs/CSAppShell/CSAppShell.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSAppShell.stories.jsx","sourceRoot":"","sources":["../../../src/cs/CSAppShell/CSAppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, useMemo } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { createUID, TwoColumnPage, registerIcon } from '@pega/cosmos-react-core';\nimport type { AppShellProps } from '@pega/cosmos-react-core';\nimport * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';\n\nimport { CaseViewMock } from '../../work/CaseView/CaseView.mocks';\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\nimport { TasksDemo } from '../../work/Tasks/Tasks.stories';\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\nimport { EmailShellDemo } from '../../social/Email/Email.stories';\nimport { StandardChat } from '../../social/Chat/Chat.stories';\nimport { TaskManagerDemo } from '../TaskManager/TaskManager.stories';\nimport { InteractionTimerDemo as InteractionTimerStory } from '../InteractionTimer/InteractionTimer.stories';\nimport type { InteractionTimerStoryProps } from '../InteractionTimer/InteractionTimer.stories';\n\nimport {\n  AppShellMockData,\n  ChatSettingsPanelMock,\n  CTIControlPanel,\n  CTIControlPanelContext,\n  EmailNotificationPanelMock\n} from './CSAppShell.mocks';\n\nregisterIcon(chatSolidIcon);\n\nexport default {\n  title: 'Customer Service/CS App Shell',\n  parameters: {\n    layout: 'fullscreen'\n  },\n  args: {\n    isDraggable: true,\n    hasInteractionNotifications: true,\n    enableSla: true,\n    ctiPanel: 'internal',\n    applyThemeToExternalCTI: false\n  },\n  argTypes: {\n    isDraggable: { control: { type: 'boolean' } },\n    hasInteractionNotifications: { control: { type: 'boolean' } },\n    enableSla: { control: { type: 'boolean' } },\n    ctiPanel: { options: ['internal', 'external'], control: { type: 'inline-radio' } },\n    applyThemeToExternalCTI: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface CSAppShellProps {\n  isDraggable?: boolean;\n  hasInteractionNotifications?: InteractionTimerStoryProps['hasNotifications'];\n  enableSla?: InteractionTimerStoryProps['showTimer'];\n  ctiPanel: 'internal' | 'external';\n  applyThemeToExternalCTI: boolean;\n}\n\nexport const CSAppShell: StoryFn<CSAppShellProps> = (args: CSAppShellProps) => {\n  const CaseData = AppShellMockData as any;\n\n  const home = <TwoColumnPage a={<FeedDemo />} b={<TasksDemo />} title='Welcome, Sara Davis' />;\n\n  const [mainContent, setMainContent] = useState(home);\n  const [caseID, setCaseID] = useState(1001);\n  const [cases, setCases] = useState<AppShellProps['cases']>([]);\n  const [links, setLinks] = useState<AppShellProps['links']>([\n    {\n      id: '01',\n      name: 'Home',\n      href: '#home',\n      icon: 'home-solid'\n    }\n  ]);\n\n  const renderCaseView = (name: string) => {\n    if (name) {\n      const { heading } = CaseData[name];\n\n      let persistentUtilityContent;\n      if (name === 'Mail interaction') {\n        persistentUtilityContent = {\n          content: <EmailShellDemo hideSuggestions />,\n          title: 'Email'\n        };\n      } else if (name === 'Chat interaction') {\n        persistentUtilityContent = {\n          content: <StandardChat chatHeight='100%' chatWidth='100%' />,\n          title: 'Chat'\n        };\n      }\n      setMainContent(\n        <CaseViewMock\n          caseId='C-123'\n          stages={false}\n          tasks={<TaskManagerDemo verbatimStatus='pending' />}\n          persistentUtility={persistentUtilityContent}\n          heading={heading}\n        />\n      );\n    }\n  };\n\n  const setActiveItem = (key: string) => {\n    setCases((prevCases = []) => {\n      return prevCases.map(caseItem => {\n        return { ...caseItem, active: caseItem.id === key };\n      });\n    });\n    setLinks((prevLinks = []) => {\n      return prevLinks.map(link => {\n        return {\n          ...link,\n          active: link.name === key\n        };\n      });\n    });\n  };\n\n  const createInteraction = (createLink: {\n    primary: string;\n    secondary?: string;\n    icon: string;\n    meta: string;\n    customerName?: string;\n  }) => {\n    const { primary, secondary, icon, customerName } = createLink;\n    const key: string = createUID();\n    const createdAt = new Date().getTime();\n    const interactionTimerId = createUID();\n    const newCase = {\n      visual: (\n        <InteractionTimerStory\n          id={interactionTimerId}\n          icon={icon}\n          showTimer={args.enableSla}\n          hasNotifications={args.hasInteractionNotifications}\n          meta={args.enableSla ? '0:00' : createLink.meta}\n          interactionType={primary}\n        />\n      ),\n      primary: customerName || 'Unknown customer',\n      secondary,\n      createdAt,\n      id: key,\n      active: true,\n      onClick: () => {\n        setActiveItem(key);\n        renderCaseView(primary);\n      },\n      onDismiss: (e: any) => {\n        setActiveItem('Home');\n        e.stopPropagation();\n        setCases((prevCases = []) => prevCases.filter(caseItem => caseItem.id !== key));\n        setMainContent(home);\n      },\n      'aria-labelledby': interactionTimerId\n    };\n    setCases((prevCases = []) => [...prevCases, newCase]);\n    setActiveItem(key);\n    setCaseID(caseID + 1);\n    renderCaseView(primary);\n  };\n\n  const createLinks = [\n    {\n      primary: 'Phone interaction',\n      secondary: 'Received 20s ago',\n      icon: 'phone-solid',\n      meta: 'FH',\n      customerName: 'Ginger Ventura'\n    },\n    {\n      primary: 'Chat interaction',\n      secondary: 'Sent 2h ago',\n      icon: 'chat-solid',\n      meta: 'SC',\n      customerName: 'Sara Davis'\n    },\n    {\n      primary: 'Mail interaction',\n      secondary: 'Received 20s ago',\n      icon: 'mail-solid',\n      meta: 'JB',\n      customerName: 'John Brown'\n    }\n  ].map(item => {\n    const { primary, icon } = item;\n    return {\n      name: primary,\n      icon,\n      href: '',\n      onClick: () => {\n        createInteraction(item);\n      }\n    };\n  });\n\n  useEffect(() => {\n    createInteraction({\n      primary: 'Phone interaction',\n      secondary: 'Received 20s ago',\n      icon: 'phone-solid',\n      meta: 'GV',\n      customerName: 'Ginger Ventura'\n    });\n  }, []);\n\n  const utils = [<EmailNotificationPanelMock />, <ChatSettingsPanelMock />, <CTIControlPanel />];\n\n  const appInfo = {\n    href: 'https://www.pega.com/',\n    imageSrc:\n      'https://www.clipartmax.com/png/middle/345-3454195_account-executive-civilian-pega-logo-png.png',\n    fullImageSrc: 'Full Image Source',\n    appName: 'CS AppShell'\n  };\n\n  return (\n    <CTIControlPanelContext.Provider\n      value={useMemo(\n        () => ({\n          type: args.ctiPanel,\n          draggable: args.isDraggable,\n          applyAppStyling: args.applyThemeToExternalCTI\n        }),\n        [args.isDraggable, args.applyThemeToExternalCTI, args.ctiPanel]\n      )}\n    >\n      <AppShellDemo\n        main={mainContent}\n        appInfo={appInfo}\n        cases={cases}\n        createLinks={createLinks}\n        caseLinks={links}\n        utils={utils}\n        onLinkClick={(name: string) => {\n          if (name === 'Home') {\n            setMainContent(home);\n          }\n          setActiveItem(name);\n        }}\n        collapsedHoverMenus\n      />\n    </CTIControlPanelContext.Provider>\n  );\n};\n"]}

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

@@ -1,21 +0,0 @@
-import type { UserAvailabilityStatusOption } from '@pega/cosmos-react-cs';
-export declare const contactsList: {
-    phoneNumber: string;
-    primary: string;
-    secondary: string;
-    favorite: boolean;
-}[];
-export declare const transferReasons: {
-    id: string;
-    label: string;
-}[];
-export declare const interactionOptions: {
-    id: string;
-    label: string;
-}[];
-export declare const userStatusOptions: UserAvailabilityStatusOption[];
-type StyleVariableName = '--app-bg-color' | '--header-border-color' | '--text-color' | '--msg-border-radius' | '--msg-you-bg-color' | '--msg-you-text-color' | '--msg-me-bg-color' | '--msg-me-text-color' | '--input-height' | '--input-background-color' | '--input-border-color' | '--input-border-width' | '--input-border-radius' | '--input-focus-border-color' | '--input-focus-box-shadow' | '--input-text-color' | '--button-text-color' | '--button-height' | '--button-bg-color' | '--button-border-color' | '--button-border-radius' | '--button-hover-bg-color' | '--footer-bg-color';
-export type ExternalStyles = Partial<Record<StyleVariableName, string>>;
-export declare const createExternalIframeContent: (styles?: ExternalStyles | undefined) => string;
-export {};
-//# sourceMappingURL=CallControlPanel.mocks.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CallControlPanel.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC;AAE1E,eAAO,MAAM,YAAY;;;;;GAmExB,CAAC;AAEF,eAAO,MAAM,eAAe;;;GAa3B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;GAa9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,4BAA4B,EA4B3D,CAAC;AAEF,KAAK,iBAAiB,GAClB,gBAAgB,GAChB,uBAAuB,GACvB,cAAc,GACd,qBAAqB,GACrB,oBAAoB,GACpB,sBAAsB,GACtB,mBAAmB,GACnB,qBAAqB,GACrB,gBAAgB,GAChB,0BAA0B,GAC1B,sBAAsB,GACtB,sBAAsB,GACtB,uBAAuB,GACvB,4BAA4B,GAC5B,0BAA0B,GAC1B,oBAAoB,GACpB,qBAAqB,GACrB,iBAAiB,GACjB,mBAAmB,GACnB,uBAAuB,GACvB,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,CAAC;AAExB,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;AAExE,eAAO,MAAM,2BAA2B,YAAY,cAAc,GAAG,SAAS,WA6H7E,CAAC"}

package/jsx/cs/CallControlPanel/CallControlPanel.mocks.js

@@ -1,252 +0,0 @@
-export const contactsList = [
-    {
-        phoneNumber: '343445656',
-        primary: 'Gregory Rhodes',
-        secondary: 'Supervisor',
-        favorite: true
-    },
-    {
-        phoneNumber: '123243434',
-        primary: 'Ella Bridges',
-        secondary: 'Representative',
-        favorite: true
-    },
-    {
-        phoneNumber: '4545455',
-        primary: 'Carrie Hanson',
-        secondary: 'Representative',
-        favorite: false
-    },
-    {
-        phoneNumber: '48436346',
-        primary: 'Chris Wallas',
-        secondary: 'Supervisor',
-        favorite: false
-    },
-    {
-        phoneNumber: '34455656',
-        primary: 'Craig Marsh',
-        secondary: 'Supervisor',
-        favorite: false
-    },
-    {
-        phoneNumber: '45565678',
-        primary: 'Derrick Sutton',
-        secondary: 'Representative',
-        favorite: false
-    },
-    {
-        phoneNumber: '54367578',
-        primary: 'Lizzie Johnson',
-        secondary: 'Supervisor',
-        favorite: false
-    },
-    {
-        phoneNumber: '65345789',
-        primary: 'Ivan Fuller',
-        secondary: 'Representative',
-        favorite: false
-    },
-    {
-        phoneNumber: '764455478',
-        primary: 'Sam Smith',
-        secondary: 'Supervisor',
-        favorite: false
-    },
-    {
-        phoneNumber: '876464003',
-        primary: 'Joe Doe',
-        secondary: 'Representative',
-        favorite: false
-    },
-    {
-        phoneNumber: '426464003',
-        primary: 'Jane Doe',
-        secondary: 'Representative',
-        favorite: false
-    }
-];
-export const transferReasons = [
-    {
-        id: 'offline',
-        label: 'Offline'
-    },
-    {
-        id: 'busy',
-        label: 'Busy'
-    },
-    {
-        id: 'on_break',
-        label: 'On break'
-    }
-];
-export const interactionOptions = [
-    {
-        id: '4545455',
-        label: 'Gregory Rhodes'
-    },
-    {
-        id: '123243434',
-        label: 'Ella Bridges'
-    },
-    {
-        id: '23254324',
-        label: 'Carrie Hanson'
-    }
-];
-export const userStatusOptions = [
-    {
-        id: 'available',
-        label: 'Available',
-        status: 'available'
-    },
-    {
-        id: 'not_available',
-        label: 'Not available',
-        status: 'busy',
-        disabled: true
-    },
-    {
-        id: 'after_call_work',
-        label: 'After call work',
-        status: 'after_work'
-    },
-    {
-        id: 'reconnecting',
-        label: 'Reconnecting',
-        status: 'unavailable',
-        disabled: true
-    },
-    {
-        id: 'offline',
-        label: 'Offline',
-        status: 'logout'
-    }
-];
-export const createExternalIframeContent = (styles = {}) => `
-<!DOCTYPE html>
-<html>
-  <head>
-    <style>
-      :root {
-        ${Object.entries(styles)
-    .map(([key, value]) => `${key}: ${value};`)
-    .join('\n')}
-      }
-    </style>
-    <style>
-      html {
-        height: 100vh;
-        background-color: var(--app-bg-color, #F5F0EF);
-        color: var(--text-color, black);
-      }
-      body {
-        max-width: 100vw;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        margin: 0;
-      }
-      header {
-        height: 3rem;
-        font-size: 10px;
-        border-bottom: 2px solid var(--header-border-color, black);
-        padding: 0 8px;
-      }
-      main {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        max-height: calc(100% - 3rem);
-      }
-      ul {
-        flex-grow: 1;
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-        list-style: none;
-        padding-inline: 10px;
-        gap: 6px;
-        margin-block-end: 0;
-      }
-      li {
-        padding: 8px;
-      }
-      li.you {
-        align-self: start;
-        background-color: var(--msg-you-bg-color, lightblue);
-        color: var(--msg-you-text-color, black);
-        border-radius: 0 var(--msg-border-radius, 4px) var(--msg-border-radius, 4px);
-      }
-      li.you:before {
-        content: "\\00B7";
-        margin-inline-end: 4px;
-      }
-      li.me {
-        align-self: end;
-        background-color: var(--msg-me-bg-color, pink);
-        color: var(--msg-me-text-color, black);
-        border-radius: var(--msg-border-radius, 4px) 0 var(--msg-border-radius, 4px) var(--msg-border-radius, 4px);
-      }
-      li.me:after {
-        content: "\\00B7";
-        margin-inline-start: 4px;
-      }
-      div {
-        display: flex;
-        justify-content: stretch;
-        align-items: center;
-        gap: 8px;
-        padding: 8px;
-        background-color: var(--footer-bg-color, transparent);
-      }
-      input {
-        outline: none;
-        color: var(--input-text-color, black);
-        height: var(--input-height, 2rem);
-        background-color: var(--input-background-color, white);
-        border-color: var(--input-border-color, black);
-        border-width: var(--input-border-width, 1px);
-        border-radius: var(--input-border-radius, 4px);
-        flex-grow: 1;
-      }
-      input:focus {
-        border-color: var(--input-focus-border-color, lightblue);
-        box-shadow: var(--input-focus-box-shadow, none);
-      }
-      button {
-        padding: 0 8px;
-        color: var(--button-text-color, black);
-        height: var(--button-height, 2rem);
-        background-color: var(--button-bg-color, white);
-        border: 1px solid var(--button-border-color, blue);
-        border-radius: var(--button-border-radius, 4px);
-      }
-      button:hover {
-        background-color: var(--button-hover-bg-color, gray);
-      }
-    </style>
-  </head>
-  <body>
-    <header><h1>Customer: Julian Brewster</h1></header>
-    <main>
-      <ul>
-        <li class="you">Hey!</li>
-        <li class="you">I want to check my account balance.</li>
-        <li class="me">Hello Mr Brewster.</li>
-        <li class="me">You have two accounts open. Which one do you want to check?</li>
-        <li class="you">The default one.</li>
-        <li class="me">Your account balance is $12345.45.</li>
-        <li class="me">Is there anything I can help you, Mr Brewster?</li>
-        <li class="you">I want to close the other account.</li>
-        <li class="me">Alright. What account the money should be transferred to?</li>
-      </ul>
-      <div>
-        <input name="message" autocomplete="off" />
-        <button>Send</button>
-      </div>
-    </main>
-  </body>
-</html>
-`;
-//# sourceMappingURL=CallControlPanel.mocks.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CallControlPanel.mocks.js","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["import type { UserAvailabilityStatusOption } from '@pega/cosmos-react-cs';\n\nexport const contactsList = [\n  {\n    phoneNumber: '343445656',\n    primary: 'Gregory Rhodes',\n    secondary: 'Supervisor',\n    favorite: true\n  },\n  {\n    phoneNumber: '123243434',\n    primary: 'Ella Bridges',\n    secondary: 'Representative',\n    favorite: true\n  },\n  {\n    phoneNumber: '4545455',\n    primary: 'Carrie Hanson',\n    secondary: 'Representative',\n    favorite: false\n  },\n  {\n    phoneNumber: '48436346',\n    primary: 'Chris Wallas',\n    secondary: 'Supervisor',\n    favorite: false\n  },\n  {\n    phoneNumber: '34455656',\n    primary: 'Craig Marsh',\n    secondary: 'Supervisor',\n    favorite: false\n  },\n  {\n    phoneNumber: '45565678',\n    primary: 'Derrick Sutton',\n    secondary: 'Representative',\n    favorite: false\n  },\n  {\n    phoneNumber: '54367578',\n    primary: 'Lizzie Johnson',\n    secondary: 'Supervisor',\n    favorite: false\n  },\n  {\n    phoneNumber: '65345789',\n    primary: 'Ivan Fuller',\n    secondary: 'Representative',\n    favorite: false\n  },\n  {\n    phoneNumber: '764455478',\n    primary: 'Sam Smith',\n    secondary: 'Supervisor',\n    favorite: false\n  },\n  {\n    phoneNumber: '876464003',\n    primary: 'Joe Doe',\n    secondary: 'Representative',\n    favorite: false\n  },\n  {\n    phoneNumber: '426464003',\n    primary: 'Jane Doe',\n    secondary: 'Representative',\n    favorite: false\n  }\n];\n\nexport const transferReasons = [\n  {\n    id: 'offline',\n    label: 'Offline'\n  },\n  {\n    id: 'busy',\n    label: 'Busy'\n  },\n  {\n    id: 'on_break',\n    label: 'On break'\n  }\n];\n\nexport const interactionOptions = [\n  {\n    id: '4545455',\n    label: 'Gregory Rhodes'\n  },\n  {\n    id: '123243434',\n    label: 'Ella Bridges'\n  },\n  {\n    id: '23254324',\n    label: 'Carrie Hanson'\n  }\n];\n\nexport const userStatusOptions: UserAvailabilityStatusOption[] = [\n  {\n    id: 'available',\n    label: 'Available',\n    status: 'available'\n  },\n  {\n    id: 'not_available',\n    label: 'Not available',\n    status: 'busy',\n    disabled: true\n  },\n  {\n    id: 'after_call_work',\n    label: 'After call work',\n    status: 'after_work'\n  },\n  {\n    id: 'reconnecting',\n    label: 'Reconnecting',\n    status: 'unavailable',\n    disabled: true\n  },\n  {\n    id: 'offline',\n    label: 'Offline',\n    status: 'logout'\n  }\n];\n\ntype StyleVariableName =\n  | '--app-bg-color'\n  | '--header-border-color'\n  | '--text-color'\n  | '--msg-border-radius'\n  | '--msg-you-bg-color'\n  | '--msg-you-text-color'\n  | '--msg-me-bg-color'\n  | '--msg-me-text-color'\n  | '--input-height'\n  | '--input-background-color'\n  | '--input-border-color'\n  | '--input-border-width'\n  | '--input-border-radius'\n  | '--input-focus-border-color'\n  | '--input-focus-box-shadow'\n  | '--input-text-color'\n  | '--button-text-color'\n  | '--button-height'\n  | '--button-bg-color'\n  | '--button-border-color'\n  | '--button-border-radius'\n  | '--button-hover-bg-color'\n  | '--footer-bg-color';\n\nexport type ExternalStyles = Partial<Record<StyleVariableName, string>>;\n\nexport const createExternalIframeContent = (styles: ExternalStyles | undefined = {}) => `\n<!DOCTYPE html>\n<html>\n  <head>\n    <style>\n      :root {\n        ${Object.entries(styles)\n          .map(([key, value]) => `${key}: ${value};`)\n          .join('\\n')}\n      }\n    </style>\n    <style>\n      html {\n        height: 100vh;\n        background-color: var(--app-bg-color, #F5F0EF);\n        color: var(--text-color, black);\n      }\n      body {\n        max-width: 100vw;\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n        margin: 0;\n      }\n      header {\n        height: 3rem;\n        font-size: 10px;\n        border-bottom: 2px solid var(--header-border-color, black);\n        padding: 0 8px;\n      }\n      main {\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n        max-height: calc(100% - 3rem);\n      }\n      ul {\n        flex-grow: 1;\n        overflow: auto;\n        display: flex;\n        flex-direction: column;\n        list-style: none;\n        padding-inline: 10px;\n        gap: 6px;\n        margin-block-end: 0;\n      }\n      li {\n        padding: 8px;\n      }\n      li.you {\n        align-self: start;\n        background-color: var(--msg-you-bg-color, lightblue);\n        color: var(--msg-you-text-color, black);\n        border-radius: 0 var(--msg-border-radius, 4px) var(--msg-border-radius, 4px);\n      }\n      li.you:before {\n        content: \"\\\\00B7\";\n        margin-inline-end: 4px;\n      }\n      li.me {\n        align-self: end;\n        background-color: var(--msg-me-bg-color, pink);\n        color: var(--msg-me-text-color, black);\n        border-radius: var(--msg-border-radius, 4px) 0 var(--msg-border-radius, 4px) var(--msg-border-radius, 4px);\n      }\n      li.me:after {\n        content: \"\\\\00B7\";\n        margin-inline-start: 4px;\n      }\n      div {\n        display: flex;\n        justify-content: stretch;\n        align-items: center;\n        gap: 8px;\n        padding: 8px;\n        background-color: var(--footer-bg-color, transparent);\n      }\n      input {\n        outline: none;\n        color: var(--input-text-color, black);\n        height: var(--input-height, 2rem);\n        background-color: var(--input-background-color, white);\n        border-color: var(--input-border-color, black);\n        border-width: var(--input-border-width, 1px);\n        border-radius: var(--input-border-radius, 4px);\n        flex-grow: 1;\n      }\n      input:focus {\n        border-color: var(--input-focus-border-color, lightblue);\n        box-shadow: var(--input-focus-box-shadow, none);\n      }\n      button {\n        padding: 0 8px;\n        color: var(--button-text-color, black);\n        height: var(--button-height, 2rem);\n        background-color: var(--button-bg-color, white);\n        border: 1px solid var(--button-border-color, blue);\n        border-radius: var(--button-border-radius, 4px);\n      }\n      button:hover {\n        background-color: var(--button-hover-bg-color, gray);\n      }\n    </style>\n  </head>\n  <body>\n    <header><h1>Customer: Julian Brewster</h1></header>\n    <main>\n      <ul>\n        <li class=\"you\">Hey!</li>\n        <li class=\"you\">I want to check my account balance.</li>\n        <li class=\"me\">Hello Mr Brewster.</li>\n        <li class=\"me\">You have two accounts open. Which one do you want to check?</li>\n        <li class=\"you\">The default one.</li>\n        <li class=\"me\">Your account balance is $12345.45.</li>\n        <li class=\"me\">Is there anything I can help you, Mr Brewster?</li>\n        <li class=\"you\">I want to close the other account.</li>\n        <li class=\"me\">Alright. What account the money should be transferred to?</li>\n      </ul>\n      <div>\n        <input name=\"message\" autocomplete=\"off\" />\n        <button>Send</button>\n      </div>\n    </main>\n  </body>\n</html>\n`;\n"]}

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

@@ -1,17 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { UserAvailabilityStatusOption, CallControlPanelProps } from '@pega/cosmos-react-cs';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface CallControlPanelStoryProps {
-    heading: string;
-    isDraggable?: boolean;
-    showStatus: boolean;
-    status?: UserAvailabilityStatusOption['id'];
-    onStatusChange?: (newStatus: UserAvailabilityStatusOption) => void;
-    visible?: CallControlPanelProps['visible'];
-}
-export declare const CallControlPanelDemo: StoryFn<CallControlPanelStoryProps>;
-export declare const ExternalCTIDemo: StoryFn<CallControlPanelStoryProps & {
-    applyAppStyling: boolean;
-}>;
-//# sourceMappingURL=CallControlPanel.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CallControlPanel.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,KAAK,EAKV,4BAA4B,EAC5B,qBAAqB,EACtB,MAAM,uBAAuB,CAAC;;AAW/B,wBAaU;AAEV,UAAU,0BAA0B;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,4BAA4B,CAAC,IAAI,CAAC,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,4BAA4B,KAAK,IAAI,CAAC;IACnE,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,0BAA0B,CAkRpE,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,0BAA0B,GAAG;IAAE,eAAe,EAAE,OAAO,CAAA;CAAE,CAuE9F,CAAC"}