@pega/cosmos-react-cs 2.0.0-dev.9.4 → 2.0.0-rc.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAaL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAatE,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAgJ7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/CallControlPanel/CallControlPanel.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { CardHeader, CardContent, Button, useI18n, Icon, registerIcon, Flex, ComboBox, Text, Popover, useOuterEvent, useElement, useConsolidatedRef, useDraggable } from '@pega/cosmos-react-core';
+import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
+import * as phoneSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-solid.icon';
+import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
+import CalleePicker, { ContactsContext } from './CalleePicker';
+import Call from './Call';
+import StopWatch from './StopWatch';
+import { StyledCallControlPanel, StyledStatusRow } from './CallControlPanel.styles';
+import { UserStatusIcon } from './CallControlPanelIcon';
+registerIcon(plusIcon, caretDownIcon, phoneSolidIcon);
+const resetPopoverToDefaultPosition = (containerRef) => {
+    if (containerRef && containerRef.current)
+        containerRef.current.style.transform = 'translate(0px, 0px)';
+};
+const CallControlPanel = forwardRef(({ heading, status, statusOptions, onStatusChange, inStatusSince, message, draggable = false, calls, onAddCall, contactsList, onFavoriteToggle, ...restProps }, ref) => {
+    const t = useI18n();
+    const addButtonRef = useRef(null);
+    const [showPopover, setShowPopover] = useState(false);
+    const [collapsed, setCollapsed] = useState(false);
+    const containerRef = useConsolidatedRef(ref);
+    const [popoverEl, setPopoverRef] = useElement();
+    const dragRef = useRef(null);
+    useDraggable(containerRef, dragRef);
+    const actionItems = useMemo(() => {
+        return statusOptions.map(({ id, label }) => {
+            return { id, primary: label, selected: id === status };
+        });
+    }, [status, statusOptions]);
+    useOuterEvent('mousedown', [popoverEl], () => {
+        setShowPopover(false);
+    });
+    const onKeyDown = ({ key }) => {
+        if (key === 'Escape')
+            setShowPopover(false);
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [popoverEl]);
+    const headerHeight = containerRef.current?.querySelector('header')?.offsetHeight || 0;
+    const selectedStatusOption = statusOptions.find(s => s.id === status);
+    return (_jsx(ContactsContext.Provider, { value: {
+            contacts: contactsList,
+            onFavoriteToggle
+        }, children: _jsxs(StyledCallControlPanel, { ref: containerRef, ...restProps, isCollapsed: collapsed, isDraggable: draggable, style: { '--headerHeight': `${headerHeight}px` }, children: [_jsx(CardHeader, { ref: !collapsed && draggable ? dragRef : undefined, actions: _jsxs(_Fragment, { children: [_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('call_panel_make_new_call'), ref: addButtonRef, onClick: () => {
+                                    setShowPopover(true);
+                                }, children: _jsx(Icon, { name: 'plus' }, void 0) }, 'new-call'), _jsx(Button, { icon: true, variant: 'simple', "aria-label": t(collapsed ? 'call_panel_expand' : 'call_panel_collapse'), onClick: () => {
+                                    resetPopoverToDefaultPosition(containerRef);
+                                    setCollapsed(state => !state);
+                                }, children: _jsx(Icon, { name: 'caret-down' }, void 0) }, 'expand-collapse')] }, void 0), children: _jsxs(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: [_jsx(Icon, { name: 'phone-solid' }, void 0), _jsx(Text, { variant: 'h3', children: heading }, void 0)] }, void 0) }, void 0), _jsxs(CardContent, { container: { itemGap: 2 }, children: [_jsxs(Flex, { as: StyledStatusRow, container: { alignItems: 'start', itemGap: 1 }, children: [_jsx(UserStatusIcon, { variant: 'dot', status: selectedStatusOption?.status }, void 0), _jsx(Flex, { item: { grow: 1 }, children: _jsx(ComboBox, { label: t('call_panel_agent_status'), labelHidden: true, selected: {
+                                            items: {
+                                                id: status,
+                                                text: selectedStatusOption?.label || ''
+                                            }
+                                        }, menu: {
+                                            items: actionItems,
+                                            onItemClick: id => onStatusChange(id)
+                                        }, info: message }, void 0) }, void 0), _jsx(StopWatch, { startTime: inStatusSince }, void 0)] }, void 0), calls.map(callProps => (_jsx(Call, { ...callProps }, callProps.id)))] }, void 0), showPopover && (_jsx(Popover, { target: addButtonRef.current, ref: setPopoverRef, placement: 'top-end', children: _jsx(CalleePicker, { heading: t('call_panel_new_call_heading'), onClose: () => setShowPopover(false), onCall: phoneNumber => {
+                            onAddCall(phoneNumber);
+                            setShowPopover(false);
+                        } }, void 0) }, void 0))] }, void 0) }, void 0));
+});
+export default CallControlPanel;
+//# sourceMappingURL=CallControlPanel.js.map

package/lib/components/CallControlPanel/CallControlPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  CardHeader,\n  CardContent,\n  Button,\n  useI18n,\n  Icon,\n  registerIcon,\n  Flex,\n  ComboBox,\n  Text,\n  Popover,\n  useOuterEvent,\n  useElement,\n  ForwardProps,\n  useConsolidatedRef,\n  useDraggable\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as phoneSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-solid.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport CalleePicker, { ContactsContext } from './CalleePicker';\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledCallControlPanel, StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\n\nregisterIcon(plusIcon, caretDownIcon, phoneSolidIcon);\n\nconst resetPopoverToDefaultPosition = (containerRef: RefObject<HTMLDivElement>): void => {\n  if (containerRef && containerRef.current)\n    containerRef.current.style.transform = 'translate(0px, 0px)';\n};\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      status,\n      statusOptions,\n      onStatusChange,\n      inStatusSince,\n      message,\n      draggable = false,\n      calls,\n      onAddCall,\n      contactsList,\n      onFavoriteToggle,\n      ...restProps\n    }: PropsWithoutRef<CallControlPanelProps>,\n    ref: CallControlPanelProps['ref']\n  ) => {\n    const t = useI18n();\n    const addButtonRef = useRef<HTMLButtonElement>(null);\n    const [showPopover, setShowPopover] = useState(false);\n    const [collapsed, setCollapsed] = useState(false);\n    const containerRef = useConsolidatedRef(ref);\n    const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n    const dragRef = useRef<HTMLDivElement>(null);\n    useDraggable(containerRef, dragRef);\n\n    const actionItems = useMemo(() => {\n      return statusOptions.map(({ id, label }) => {\n        return { id, primary: label, selected: id === status };\n      });\n    }, [status, statusOptions]);\n\n    useOuterEvent('mousedown', [popoverEl], () => {\n      setShowPopover(false);\n    });\n\n    const onKeyDown = ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') setShowPopover(false);\n    };\n\n    useEffect(() => {\n      document.addEventListener('keydown', onKeyDown);\n      return () => {\n        document.removeEventListener('keydown', onKeyDown);\n      };\n    }, [popoverEl]);\n\n    const headerHeight = containerRef.current?.querySelector('header')?.offsetHeight || 0;\n\n    const selectedStatusOption = statusOptions.find(s => s.id === status);\n\n    return (\n      <ContactsContext.Provider\n        value={{\n          contacts: contactsList,\n          onFavoriteToggle\n        }}\n      >\n        <StyledCallControlPanel\n          ref={containerRef}\n          {...restProps}\n          isCollapsed={collapsed}\n          isDraggable={draggable}\n          style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n        >\n          <CardHeader\n            ref={!collapsed && draggable ? dragRef : undefined}\n            actions={\n              <>\n                <Button\n                  icon\n                  variant='simple'\n                  key='new-call'\n                  aria-label={t('call_panel_make_new_call')}\n                  ref={addButtonRef}\n                  onClick={() => {\n                    setShowPopover(true);\n                  }}\n                >\n                  <Icon name='plus' />\n                </Button>\n                <Button\n                  icon\n                  variant='simple'\n                  key='expand-collapse'\n                  aria-label={t(collapsed ? 'call_panel_expand' : 'call_panel_collapse')}\n                  onClick={() => {\n                    resetPopoverToDefaultPosition(containerRef);\n                    setCollapsed(state => !state);\n                  }}\n                >\n                  <Icon name='caret-down' />\n                </Button>\n              </>\n            }\n          >\n            <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n              <Icon name='phone-solid' />\n              <Text variant='h3'>{heading}</Text>\n            </Flex>\n          </CardHeader>\n          <CardContent container={{ itemGap: 2 }}>\n            <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n              <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n              <Flex item={{ grow: 1 }}>\n                <ComboBox\n                  label={t('call_panel_agent_status')}\n                  labelHidden\n                  selected={{\n                    items: {\n                      id: status,\n                      text: selectedStatusOption?.label || ''\n                    }\n                  }}\n                  menu={{\n                    items: actionItems,\n                    onItemClick: id => onStatusChange(id)\n                  }}\n                  info={message}\n                />\n              </Flex>\n              <StopWatch startTime={inStatusSince} />\n            </Flex>\n            {calls.map(callProps => (\n              <Call key={callProps.id} {...callProps} />\n            ))}\n          </CardContent>\n          {showPopover && (\n            <Popover target={addButtonRef.current} ref={setPopoverRef} placement='top-end'>\n              <CalleePicker\n                heading={t('call_panel_new_call_heading')}\n                onClose={() => setShowPopover(false)}\n                onCall={phoneNumber => {\n                  onAddCall(phoneNumber);\n                  setShowPopover(false);\n                }}\n              />\n            </Popover>\n          )}\n        </StyledCallControlPanel>\n      </ContactsContext.Provider>\n    );\n  }\n);\n\nexport default CallControlPanel;\n"]}

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

@@ -0,0 +1,15 @@
+import { ProgressProps } from '@pega/cosmos-react-core';
+export declare const StyledProgressContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHoldInfo: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").StatusProps, never>;
+export declare const StyledStatusRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSLAProgress: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ProgressProps & {
+    determinate: boolean;
+} & {
+    slaDuration?: number | undefined;
+    slaLevel?: number | undefined;
+}, never>;
+export declare const StyledCallControlPanel: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<import("@pega/cosmos-react-core").CardProps> & {
+    isCollapsed: boolean;
+    isDraggable?: boolean | undefined;
+}, never>;
+//# sourceMappingURL=CallControlPanel.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAQL,aAAa,EAKd,MAAM,yBAAyB,CAAC;AAMjC,eAAO,MAAM,uBAAuB,yGAoCnC,CAAC;AAIF,eAAO,MAAM,cAAc,qJAI1B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAiB3B,CAAC;AAIF,eAAO,MAAM,iBAAiB;;;;;SAwC5B,CAAC;AAIH,eAAO,MAAM,sBAAsB;iBACpB,OAAO;;SA6BpB,CAAC"}

package/lib/components/CallControlPanel/CallControlPanel.styles.js

@@ -0,0 +1,118 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, StyledBackdrop, StyledButton, StyledFlex, StyledProgressBar, StyledSummaryItemActions, StyledVisual, StyledSummaryItem, StyledCard, StyledPrimary, StyledSecondary } from '@pega/cosmos-react-core';
+import { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';
+import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
+import { StyledStopWatch } from './StopWatch';
+export const StyledProgressContainer = styled.div(({ theme: { base: { spacing }, components: { card } } }) => {
+    return css `
+      position: relative;
+      > ${StyledBackdrop} {
+        z-index: 0;
+      }
+
+      ${StyledSummaryItemActions} ${StyledFlex} + ${StyledButton} {
+        margin-inline-start: ${spacing};
+      }
+
+      > ${StyledSummaryItem} {
+        box-sizing: content-box;
+        position: relative;
+        height: 2rem;
+        padding: 0 1rem;
+        border-top: 0;
+        > ${StyledVisual} {
+          transform: rotate(50deg);
+        }
+        > ${StyledPrimary}, > ${StyledSecondary} {
+          align-self: center;
+        }
+      }
+
+      > ${StyledSummaryItem} ~ ${StyledSummaryItem} {
+        border-top: 0.125rem solid ${card.background};
+      }
+    `;
+});
+StyledProgressContainer.defaultProps = defaultThemeProp;
+export const StyledHoldInfo = styled(StyledStatus) `
+  position: absolute;
+  top: 0;
+  transform: translateY(-50%);
+`;
+StyledHoldInfo.defaultProps = defaultThemeProp;
+export const StyledStatusRow = styled.div(({ theme: { components: { input: { height } } } }) => {
+    return css `
+      > * {
+        min-height: ${height};
+      }
+      > ${StyledStopWatch} {
+        line-height: ${height};
+      }
+    `;
+});
+StyledStatusRow.defaultProps = defaultThemeProp;
+export const StyledSLAProgress = styled(StyledProgressBar)(({ theme, slaDuration = 0, slaLevel }) => {
+    const { base: { colors } } = theme;
+    const { bgColor = colors.red['extra-light'], fgColor = colors.red.light } = slaLevel !== undefined
+        ? [
+            { bgColor: colors.green['extra-light'], fgColor: colors.green.light },
+            { bgColor: colors.orange['extra-light'], fgColor: colors.orange.light },
+            { bgColor: colors.red['extra-light'], fgColor: colors.red.light }
+        ][slaLevel]
+        : { bgColor: colors.slate.light, fgColor: colors.slate.light };
+    return css `
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: ${bgColor};
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
+
+    /* Fancy way to restart the animation by changing it's name. */
+    @keyframes FillIn-${slaLevel} {
+      0% {
+        transform: translateX(-100%);
+      }
+
+      100% {
+        transform: translateX(0);
+      }
+    }
+
+    &::before {
+      background-color: ${fgColor};
+      border-radius: 0;
+      animation: FillIn-${slaLevel} ${slaDuration}s linear;
+    }
+  `;
+});
+StyledSLAProgress.defaultProps = defaultThemeProp;
+export const StyledCallControlPanel = styled(StyledCard)(({ theme, isCollapsed, isDraggable }) => {
+    return css `
+    position: fixed;
+    z-index: ${theme.base['z-index'].modal};
+    width: 25rem;
+    inset-inline-end: calc(2 * ${theme.base.spacing});
+    bottom: calc(2 * ${theme.base.spacing});
+    box-shadow: ${theme.base.shadow.high};
+    ${isCollapsed &&
+        css `
+      transform: translateY(
+        calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))
+      ) !important;
+    `}
+    ${StyledCardHeader} {
+      ${!isCollapsed &&
+        isDraggable &&
+        css `
+        cursor: all-scroll;
+      `}
+    }
+    ${StyledCardHeader} ${StyledButton}:last-child {
+      transition: transform calc(2 * ${theme.base.animation.speed})
+        ${theme.base.animation.timing.ease};
+      transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};
+    }
+  `;
+});
+StyledCallControlPanel.defaultProps = defaultThemeProp;
+//# sourceMappingURL=CallControlPanel.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlPanel.styles.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  StyledBackdrop,\n  StyledButton,\n  StyledFlex,\n  StyledProgressBar,\n  StyledSummaryItemActions,\n  StyledVisual,\n  ProgressProps,\n  StyledSummaryItem,\n  StyledCard,\n  StyledPrimary,\n  StyledSecondary\n} from '@pega/cosmos-react-core';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nimport { StyledStopWatch } from './StopWatch';\n\nexport const StyledProgressContainer = styled.div(\n  ({\n    theme: {\n      base: { spacing },\n      components: { card }\n    }\n  }) => {\n    return css`\n      position: relative;\n      > ${StyledBackdrop} {\n        z-index: 0;\n      }\n\n      ${StyledSummaryItemActions} ${StyledFlex} + ${StyledButton} {\n        margin-inline-start: ${spacing};\n      }\n\n      > ${StyledSummaryItem} {\n        box-sizing: content-box;\n        position: relative;\n        height: 2rem;\n        padding: 0 1rem;\n        border-top: 0;\n        > ${StyledVisual} {\n          transform: rotate(50deg);\n        }\n        > ${StyledPrimary}, > ${StyledSecondary} {\n          align-self: center;\n        }\n      }\n\n      > ${StyledSummaryItem} ~ ${StyledSummaryItem} {\n        border-top: 0.125rem solid ${card.background};\n      }\n    `;\n  }\n);\n\nStyledProgressContainer.defaultProps = defaultThemeProp;\n\nexport const StyledHoldInfo = styled(StyledStatus)`\n  position: absolute;\n  top: 0;\n  transform: translateY(-50%);\n`;\n\nStyledHoldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledStatusRow = styled.div(\n  ({\n    theme: {\n      components: {\n        input: { height }\n      }\n    }\n  }) => {\n    return css`\n      > * {\n        min-height: ${height};\n      }\n      > ${StyledStopWatch} {\n        line-height: ${height};\n      }\n    `;\n  }\n);\n\nStyledStatusRow.defaultProps = defaultThemeProp;\n\nexport const StyledSLAProgress = styled(StyledProgressBar)<\n  ProgressProps & { slaDuration?: number; slaLevel?: number }\n>(({ theme, slaDuration = 0, slaLevel }) => {\n  const {\n    base: { colors }\n  } = theme;\n\n  const { bgColor = colors.red['extra-light'], fgColor = colors.red.light } =\n    slaLevel !== undefined\n      ? [\n          { bgColor: colors.green['extra-light'], fgColor: colors.green.light },\n          { bgColor: colors.orange['extra-light'], fgColor: colors.orange.light },\n          { bgColor: colors.red['extra-light'], fgColor: colors.red.light }\n        ][slaLevel]\n      : { bgColor: colors.slate.light, fgColor: colors.slate.light };\n\n  return css`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: ${bgColor};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n    /* Fancy way to restart the animation by changing it's name. */\n    @keyframes FillIn-${slaLevel} {\n      0% {\n        transform: translateX(-100%);\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    &::before {\n      background-color: ${fgColor};\n      border-radius: 0;\n      animation: FillIn-${slaLevel} ${slaDuration}s linear;\n    }\n  `;\n});\n\nStyledSLAProgress.defaultProps = defaultThemeProp;\n\nexport const StyledCallControlPanel = styled(StyledCard)<{\n  isCollapsed: boolean;\n  isDraggable?: boolean;\n}>(({ theme, isCollapsed, isDraggable }) => {\n  return css`\n    position: fixed;\n    z-index: ${theme.base['z-index'].modal};\n    width: 25rem;\n    inset-inline-end: calc(2 * ${theme.base.spacing});\n    bottom: calc(2 * ${theme.base.spacing});\n    box-shadow: ${theme.base.shadow.high};\n    ${isCollapsed &&\n    css`\n      transform: translateY(\n        calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))\n      ) !important;\n    `}\n    ${StyledCardHeader} {\n      ${!isCollapsed &&\n      isDraggable &&\n      css`\n        cursor: all-scroll;\n      `}\n    }\n    ${StyledCardHeader} ${StyledButton}:last-child {\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});\n\nStyledCallControlPanel.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,112 @@
+import { ReactNode, Ref } from 'react';
+import { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+export declare type Contact = {
+    /** Contact phone number */
+    phoneNumber: string;
+    /** Contact name  */
+    primary: string;
+    /** Additional contact information */
+    secondary: string;
+    /** Determines if contact is favorite */
+    favorite: boolean;
+};
+export interface CallParticipant {
+    /** Caller id. */
+    id: string;
+    /** Caller's name. */
+    name: string;
+    /** Additional caller's info. */
+    info?: string;
+    /** Callback fired when the user ends the call. */
+    onEndCall?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;
+}
+export interface TransferReasonOption {
+    readonly id: string;
+    readonly label: string;
+}
+export declare type TransferData = {
+    reason: TransferReasonOption['id'];
+    comments: string;
+    interaction: boolean;
+    phoneNumber: string;
+};
+export interface CallProps {
+    /** Call identifier. */
+    id: string;
+    /** Timestamp when the call has begun. */
+    startedAt: number | Date;
+    /** Timestamp when the call has been put on hold. */
+    onHoldSince?: number | Date;
+    /** SLA configuration timeups. Array of numbers of seconds after which the particular SLA level
+     * time is up.
+     */
+    slaConfig?: number[];
+    /** Call participants. */
+    participants: CallParticipant[];
+    /** The flag whether the mic is muted on this call. */
+    muted?: boolean;
+    /** Callback fired when 'pause' icon has been clicked. */
+    onPauseToggle: (id: CallProps['id']) => void;
+    /** Callback fired when 'mute' icon has been clicked. */
+    onMuteToggle: (id: CallProps['id']) => void;
+    /** Callback fired when 'Consult' action has been clicked. */
+    onConsultAction?: (id: CallProps['id'], phoneNumber: string) => void;
+    /** Callback fired when 'Conference' action has been clicked. */
+    onConferenceAction?: (id: CallProps['id'], phoneNumber: string) => void;
+    /** Callback fired when 'Merge call' action has been chosen. */
+    onMergeCall?: (id: CallProps['id']) => void;
+    /** Callback fired for every dial pad key press. */
+    onDTMFPress?: (id: CallProps['id'], key: string) => void;
+    /** Callback fired when 'Transfer' action has been clicked. */
+    onTransferAction?: (id: CallProps['id'], transferData: TransferData) => void;
+    /**
+     * Transfer reason options
+     */
+    transferOptions: Readonly<TransferReasonOption[]>;
+}
+export declare type UserAvailabilityStatus = 'offline' | 'available' | 'busy' | 'away' | 'not_available';
+export interface UserAvailabilityStatusOption {
+    readonly id: string;
+    readonly label: string;
+    readonly status: UserAvailabilityStatus;
+}
+export interface CallControlPanelProps extends BaseProps, NoChildrenProp {
+    /** The heading rendered. */
+    heading: string;
+    /**
+     * User availability statuses.
+     */
+    statusOptions: Readonly<UserAvailabilityStatusOption[]>;
+    /** User current status. */
+    status: UserAvailabilityStatusOption['id'];
+    /** Timestamp since the user is in the current status. */
+    inStatusSince: number | Date;
+    /** If true, the component will be draggable */
+    draggable?: boolean;
+    /**
+     * Region for messages: errors, notifications, etc.
+     */
+    message?: ReactNode;
+    /**
+     * Callback fired when user changes their status.
+     * @param value new chosen status.
+     */
+    onStatusChange: (value: UserAvailabilityStatusOption['id']) => void;
+    /**
+     * List of current calls. Having two or more not declared as "on hold" (onHoldSince defined) means there's
+     * a conference call.
+     */
+    calls: CallProps[];
+    /**
+     * Callback fired on new call made by the user.
+     * @param phoneNumber the number chosen.
+     */
+    onAddCall: (phoneNumber: string) => void;
+    /** An array of contacts objects. */
+    contactsList: Contact[];
+    /** Callback fired on adding/removing contact to/from favorites */
+    onFavoriteToggle: (phoneNumber: string, favorite: boolean) => void;
+    /** Reference to the root component. */
+    ref?: Ref<HTMLDivElement>;
+}
+//# sourceMappingURL=CallControlPanel.types.d.ts.map

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

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

package/lib/components/CallControlPanel/CallControlPanel.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlPanel.types.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport type Contact = {\n  /** Contact phone number */\n  phoneNumber: string;\n  /** Contact name  */\n  primary: string;\n  /** Additional contact information */\n  secondary: string;\n  /** Determines if contact is favorite */\n  favorite: boolean;\n};\n\nexport interface CallParticipant {\n  /** Caller id. */\n  id: string;\n  /** Caller's name. */\n  name: string;\n  /** Additional caller's info. */\n  info?: string;\n  /** Callback fired when the user ends the call. */\n  onEndCall?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;\n}\n\nexport interface TransferReasonOption {\n  readonly id: string;\n  readonly label: string;\n}\n\nexport type TransferData = {\n  reason: TransferReasonOption['id'];\n  comments: string;\n  interaction: boolean;\n  phoneNumber: string;\n};\n\nexport interface CallProps {\n  /** Call identifier. */\n  id: string;\n  /** Timestamp when the call has begun. */\n  startedAt: number | Date;\n  /** Timestamp when the call has been put on hold. */\n  onHoldSince?: number | Date;\n  /** SLA configuration timeups. Array of numbers of seconds after which the particular SLA level\n   * time is up.\n   */\n  slaConfig?: number[];\n  /** Call participants. */\n  participants: CallParticipant[];\n  /** The flag whether the mic is muted on this call. */\n  muted?: boolean;\n  /** Callback fired when 'pause' icon has been clicked. */\n  onPauseToggle: (id: CallProps['id']) => void;\n  /** Callback fired when 'mute' icon has been clicked. */\n  onMuteToggle: (id: CallProps['id']) => void;\n  /** Callback fired when 'Consult' action has been clicked. */\n  onConsultAction?: (id: CallProps['id'], phoneNumber: string) => void;\n  /** Callback fired when 'Conference' action has been clicked. */\n  onConferenceAction?: (id: CallProps['id'], phoneNumber: string) => void;\n  /** Callback fired when 'Merge call' action has been chosen. */\n  onMergeCall?: (id: CallProps['id']) => void;\n  /** Callback fired for every dial pad key press. */\n  onDTMFPress?: (id: CallProps['id'], key: string) => void;\n  /** Callback fired when 'Transfer' action has been clicked. */\n  onTransferAction?: (id: CallProps['id'], transferData: TransferData) => void;\n  /**\n   * Transfer reason options\n   */\n  transferOptions: Readonly<TransferReasonOption[]>;\n}\n\nexport type UserAvailabilityStatus = 'offline' | 'available' | 'busy' | 'away' | 'not_available';\n\nexport interface UserAvailabilityStatusOption {\n  readonly id: string;\n  readonly label: string;\n  readonly status: UserAvailabilityStatus;\n}\n\nexport interface CallControlPanelProps extends BaseProps, NoChildrenProp {\n  /** The heading rendered. */\n  heading: string;\n  /**\n   * User availability statuses.\n   */\n  statusOptions: Readonly<UserAvailabilityStatusOption[]>;\n  /** User current status. */\n  status: UserAvailabilityStatusOption['id'];\n  /** Timestamp since the user is in the current status. */\n  inStatusSince: number | Date;\n  /** If true, the component will be draggable */\n  draggable?: boolean;\n  /**\n   * Region for messages: errors, notifications, etc.\n   */\n  message?: ReactNode;\n  /**\n   * Callback fired when user changes their status.\n   * @param value new chosen status.\n   */\n  onStatusChange: (value: UserAvailabilityStatusOption['id']) => void;\n  /**\n   * List of current calls. Having two or more not declared as \"on hold\" (onHoldSince defined) means there's\n   * a conference call.\n   */\n  calls: CallProps[];\n  /**\n   * Callback fired on new call made by the user.\n   * @param phoneNumber the number chosen.\n   */\n  onAddCall: (phoneNumber: string) => void;\n  /** An array of contacts objects. */\n  contactsList: Contact[];\n  /** Callback fired on adding/removing contact to/from favorites */\n  onFavoriteToggle: (phoneNumber: string, favorite: boolean) => void;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/CallControlPanel/CallControlPanelIcon.d.ts

@@ -0,0 +1,19 @@
+import { FunctionComponent } from 'react';
+import { DefaultTheme } from 'styled-components';
+import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { UserAvailabilityStatus } from './CallControlPanel.types';
+interface CallControlPanelIconProps extends NoChildrenProp {
+    status?: UserAvailabilityStatus;
+    label: string;
+    panelVisible: boolean;
+}
+interface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {
+    variant: 'icon' | 'dot';
+}
+export declare const StyledCallControlPanelIcon: import("styled-components").StyledComponent<"div", DefaultTheme, {
+    userStatus: UserAvailabilityStatus;
+}, never>;
+export declare const UserStatusIcon: FunctionComponent<UserStatusIconProps>;
+declare const CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps>;
+export default CallControlPanelIcon;
+//# sourceMappingURL=CallControlPanelIcon.d.ts.map

package/lib/components/CallControlPanel/CallControlPanelIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlPanelIcon.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAQ,MAAM,OAAO,CAAC;AAChD,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAEL,YAAY,EAGZ,cAAc,EAKf,MAAM,yBAAyB,CAAC;AAKjC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAOvE,UAAU,yBAA0B,SAAQ,cAAc;IACxD,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,mBAAoB,SAAQ,IAAI,CAAC,yBAAyB,EAAE,QAAQ,CAAC;IAC7E,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB;AA2DD,eAAO,MAAM,0BAA0B;gBAzCW,sBAAsB;SAmDvE,CAAC;AAIF,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CA6BjE,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAkBrF,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/components/CallControlPanel/CallControlPanelIcon.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { defaultThemeProp, Icon, registerIcon, StyledAvatar, StyledIcon, useTheme } from '@pega/cosmos-react-core';
+import * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';
+import * as eyeOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/eye-off-solid.icon';
+registerIcon(headsetIcon, eyeOffSolidIcon);
+const colorMapping = {
+    offline: 'slate-light',
+    available: 'green-light',
+    busy: 'red-medium',
+    away: 'orange-light',
+    not_available: 'slate-light'
+};
+const iconMapping = {
+    offline: 'times',
+    available: undefined,
+    busy: 'minus',
+    away: 'clock',
+    not_available: 'reset'
+};
+const StyledStatusIcon = styled.div(({ theme: { base: { colors } }, userStatus }) => {
+    const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2);
+    const bgColor = colors[colorName][colorVariant];
+    const fgColor = readableColor(bgColor);
+    return css `
+      background-color: ${bgColor};
+      color: ${fgColor};
+    `;
+});
+StyledStatusIcon.defaultProps = defaultThemeProp;
+const StyledUserStatusIcon = styled(StyledStatusIcon) `
+  position: absolute;
+  inset-block-start: -0.25rem;
+  inset-inline-end: -0.25rem;
+  z-index: 1;
+  width: 0.875rem;
+  height: 0.875rem;
+  border-radius: 50%;
+  border: 0.0625rem solid black;
+
+  ${StyledIcon} {
+    display: block;
+    width: 100%;
+    margin: 0 auto;
+  }
+`;
+StyledUserStatusIcon.defaultProps = defaultThemeProp;
+export const StyledCallControlPanelIcon = styled(StyledStatusIcon) `
+  > ${StyledIcon}:nth-child(3) {
+    position: absolute;
+    inset-block-end: -0.25rem;
+    inset-inline-end: -0.25rem;
+    z-index: 1;
+    width: 0.875rem;
+    height: 0.875rem;
+    fill: ${p => p.theme.base.colors.gray.medium};
+  }
+`;
+StyledCallControlPanelIcon.defaultProps = defaultThemeProp;
+export const UserStatusIcon = memo(({ status = 'offline', variant }) => {
+    const { base: { colors } } = useTheme();
+    const [colorName, colorVariant] = colorMapping[status].split('-', 2);
+    const bgColor = colors[colorName][colorVariant];
+    const iconName = iconMapping[status];
+    return variant === 'dot' ? (_jsx("svg", { role: 'img', "aria-hidden": true, height: '1rem', width: '1rem', viewBox: '0 0 10 10', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("circle", { cx: '50%', cy: '50%', r: '50%', fill: bgColor }, void 0) }, void 0)) : (_jsx(StyledStatusIcon, { as: StyledUserStatusIcon, userStatus: status, children: iconName && _jsx(Icon, { name: iconName }, void 0) }, void 0));
+});
+const CallControlPanelIcon = memo(({ status = 'offline', label, panelVisible, ...restProps }) => {
+    const iconName = iconMapping[status];
+    return (_jsxs(StyledCallControlPanelIcon, { as: StyledAvatar, ...restProps, size: 'm', userStatus: status, "aria-label": label, children: [_jsx(Icon, { name: 'headset' }, void 0), iconName && _jsx(UserStatusIcon, { variant: 'icon', status: status }, void 0), !panelVisible && _jsx(Icon, { name: 'eye-off-solid' }, void 0)] }, void 0));
+});
+export default CallControlPanelIcon;
+//# sourceMappingURL=CallControlPanelIcon.js.map

package/lib/components/CallControlPanel/CallControlPanelIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallControlPanelIcon.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, memo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  defaultThemeProp,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  NoChildrenProp,\n  OmitStrict,\n  StyledAvatar,\n  StyledIcon,\n  useTheme\n} from '@pega/cosmos-react-core';\nimport { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\nimport * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';\nimport * as eyeOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/eye-off-solid.icon';\n\nimport type { UserAvailabilityStatus } from './CallControlPanel.types';\n\nregisterIcon(headsetIcon, eyeOffSolidIcon);\n\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>;\ntype ThemeColorVariant = 'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark';\n\ninterface CallControlPanelIconProps extends NoChildrenProp {\n  status?: UserAvailabilityStatus;\n  label: string;\n  panelVisible: boolean;\n}\n\ninterface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {\n  variant: 'icon' | 'dot';\n}\n\nconst colorMapping: Record<UserAvailabilityStatus, `${ThemeColor}-${ThemeColorVariant}`> = {\n  offline: 'slate-light',\n  available: 'green-light',\n  busy: 'red-medium',\n  away: 'orange-light',\n  not_available: 'slate-light'\n};\n\nconst iconMapping: Record<UserAvailabilityStatus, IconNames | undefined> = {\n  offline: 'times',\n  available: undefined,\n  busy: 'minus',\n  away: 'clock',\n  not_available: 'reset'\n};\n\nconst StyledStatusIcon = styled.div<{ userStatus: UserAvailabilityStatus }>(\n  ({\n    theme: {\n      base: { colors }\n    },\n    userStatus\n  }) => {\n    const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2) as [\n      ThemeColor,\n      ThemeColorVariant\n    ];\n    const bgColor = colors[colorName][colorVariant];\n    const fgColor = readableColor(bgColor);\n    return css`\n      background-color: ${bgColor};\n      color: ${fgColor};\n    `;\n  }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledUserStatusIcon = styled(StyledStatusIcon)`\n  position: absolute;\n  inset-block-start: -0.25rem;\n  inset-inline-end: -0.25rem;\n  z-index: 1;\n  width: 0.875rem;\n  height: 0.875rem;\n  border-radius: 50%;\n  border: 0.0625rem solid black;\n\n  ${StyledIcon} {\n    display: block;\n    width: 100%;\n    margin: 0 auto;\n  }\n`;\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCallControlPanelIcon = styled(StyledStatusIcon)`\n  > ${StyledIcon}:nth-child(3) {\n    position: absolute;\n    inset-block-end: -0.25rem;\n    inset-inline-end: -0.25rem;\n    z-index: 1;\n    width: 0.875rem;\n    height: 0.875rem;\n    fill: ${p => p.theme.base.colors.gray.medium};\n  }\n`;\n\nStyledCallControlPanelIcon.defaultProps = defaultThemeProp;\n\nexport const UserStatusIcon: FunctionComponent<UserStatusIconProps> = memo(\n  ({ status = 'offline', variant }) => {\n    const {\n      base: { colors }\n    } = useTheme();\n    const [colorName, colorVariant] = colorMapping[status].split('-', 2) as [\n      ThemeColor,\n      ThemeColorVariant\n    ];\n    const bgColor = colors[colorName][colorVariant];\n    const iconName = iconMapping[status];\n\n    return variant === 'dot' ? (\n      <svg\n        role='img'\n        aria-hidden\n        height='1rem'\n        width='1rem'\n        viewBox='0 0 10 10'\n        xmlns='http://www.w3.org/2000/svg'\n      >\n        <circle cx='50%' cy='50%' r='50%' fill={bgColor} />\n      </svg>\n    ) : (\n      <StyledStatusIcon as={StyledUserStatusIcon} userStatus={status}>\n        {iconName && <Icon name={iconName} />}\n      </StyledStatusIcon>\n    );\n  }\n);\n\nconst CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps> = memo(\n  ({ status = 'offline', label, panelVisible, ...restProps }) => {\n    const iconName = iconMapping[status];\n\n    return (\n      <StyledCallControlPanelIcon\n        as={StyledAvatar}\n        {...restProps}\n        size='m'\n        userStatus={status}\n        aria-label={label}\n      >\n        <Icon name='headset' />\n        {iconName && <UserStatusIcon variant='icon' status={status} />}\n        {!panelVisible && <Icon name='eye-off-solid' />}\n      </StyledCallControlPanelIcon>\n    );\n  }\n);\n\nexport default CallControlPanelIcon;\n"]}

package/lib/components/CallControlPanel/CallTransfer.d.ts

@@ -0,0 +1,19 @@
+import { FunctionComponent, Ref } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import type { TransferReasonOption, TransferData } from './CallControlPanel.types';
+export interface CallTransferProps {
+    /**
+     * Callback fired on new call made by the user.
+     * @param phoneNumber the number chosen.
+     */
+    onTransferCall: (transferParam: TransferData) => void;
+    /** Callback fired on clicking close button. */
+    onClose?: () => void;
+    transferOptions: Readonly<TransferReasonOption[]>;
+    /** Reference to the root component. */
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const StyledTransfer: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").CardProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const CallTransfer: FunctionComponent<CallTransferProps & ForwardProps>;
+export default CallTransfer;
+//# sourceMappingURL=CallTransfer.d.ts.map

package/lib/components/CallControlPanel/CallTransfer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallTransfer.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallTransfer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EASL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKnF,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,cAAc,EAAE,CAAC,aAAa,EAAE,YAAY,KAAK,IAAI,CAAC;IACtD,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,iLAc1B,CAAC;AAIF,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAmMrE,CAAC;AAEF,eAAe,YAAY,CAAC"}