@webex/cc-components 1.28.0-ccwidgets.40 → 1.28.0-ccwidgets.42

package/dist/index.js

@@ -1735,7 +1735,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.tooltip.md-modal-container-wrapper {\n  color: var(--mds-color-theme-inverted-text-primary-normal);\n  background-color: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.tooltip .md-modal-container-arrow-wrapper .md-modal-arrow-svg path {\n  fill: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.call-control-container {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n.call-control-container .md-select-dropdown-input {\n  flex-grow: 1;\n  display: flex;\n  border: 0.0625rem;\n  align-self: flex-start;\n}\n\n.button-group {\n  display: flex;\n  gap: 0.5rem; /* Reduced gap between buttons/tooltips */\n  margin-top: 1rem;\n}\n\n.wrapup-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem; /* Reduced gap between select and button */\n  margin-top: 1rem;\n}\n\n.wrapup-name {\n  color: var(--mds-color-theme-text-primary-normal);\n}\n\n.wrapup-select {\n  flex-grow: 1;\n  padding: 0.5rem;\n  margin-top: 0.5rem;\n  margin-bottom: 0.75rem;\n  border: 0.0625rem solid #ccc;\n  border-radius: 0.25rem;\n  align-self: flex-start;\n}\n\n.wrapup-select-arrow-icon {\n  position: absolute;\n  right: 1.5rem; /* Adjusted to leave space for the arrow icon */\n  top: 55%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.submit-wrapup-button {\n  align-self: flex-end;\n}\n\n.wrapup-header {\n  margin-bottom: 0.7rem;\n  align-self: flex-start;\n}\n\n.md-select-wrapper {\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  border: 0;\n}\n\n[id*=tippy] {\n  border: 0.0625rem solid var(--mds-color-theme-outline-input-normal);\n  background-color: var(--mds-color-theme-background-glass-overlay-normal);\n  border-radius: 0.5rem;\n}\n\n.md-button-circle-wrapper.call-control-button {\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  border: 1px solid var(--mds-color-theme-outline-button-normal);\n}\n.md-button-circle-wrapper.call-control-button:hover, .md-button-circle-wrapper.call-control-button.hover {\n  background-color: var(--mds-color-theme-button-secondary-hover);\n}\n\n.md-button-circle-wrapper.call-control-button-cancel {\n  background-color: var(--mds-color-theme-button-cancel-normal);\n  border: 0.0625rem solid var(--mds-color-theme-background-secondary-normal);\n}\n.md-button-circle-wrapper.call-control-button-cancel:hover, .md-button-circle-wrapper.call-control-button-cancel.hover {\n  background-color: var(--mds-color-theme-button-cancel-hover);\n}\n\n.call-control-button-icon {\n  --mdc-icon-fill-color: var(--mds--color-theme-button-secondary-normal);\n}\n\n.wrapup-button {\n  display: inline-flex;\n  justify-content: center;\n  width: 8rem;\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  border: 0.0625rem solid var(--mds-color-theme-outline-button-normal);\n  color: var(--mds-color-theme-text-primary-normal);\n}\n.wrapup-button:hover, .wrapup-button.hover {\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  color: var(--mds-color-theme-text-primary-normal);\n}\n\n.agent-popover .agent-popover-content {\n  display: flex;\n  flex-direction: column;\n  padding: 1rem 0.5rem 0.5rem 1rem;\n  width: 30rem;\n  height: 25rem;\n  gap: 0.25rem;\n}\n.agent-popover .agent-popover-content .agent-popover-title {\n  margin: 0 0 0 0;\n  margin-bottom: 1rem;\n  text-align: left;\n}\n.agent-popover .agent-popover-content .agent-agent-item {\n  padding: 0.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n.agent-popover .agent-popover-content .agent-agent-item:hover {\n  background-color: var(--mds-color-theme-background-secondary-hover);\n}\n.agent-popover .agent-tablist {\n  margin-bottom: 1rem;\n}\n.agent-popover .agent-tablist .agent-tab {\n  margin: 0 !important;\n}\n.agent-popover .agent-agent-list {\n  margin-left: 0;\n  margin-bottom: 1rem;\n}\n\n.call-control-list-item .hover-button {\n  opacity: 0;\n  transition: opacity 0.3s;\n  pointer-events: none;\n}\n\n.call-control-list-item:hover .hover-button {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.custom-text {\n  margin: 0 !important;\n  line-height: 1 !important;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.tooltip.md-modal-container-wrapper {\n  color: var(--mds-color-theme-inverted-text-primary-normal);\n  background-color: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.tooltip .md-modal-container-arrow-wrapper .md-modal-arrow-svg path {\n  fill: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.call-control-container {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n.call-control-container .md-select-dropdown-input {\n  flex-grow: 1;\n  display: flex;\n  border: 0.0625rem;\n  align-self: flex-start;\n}\n\n.button-group {\n  display: flex;\n  gap: 0.5rem; /* Reduced gap between buttons/tooltips */\n  margin-top: 1rem;\n}\n\n.wrapup-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem; /* Reduced gap between select and button */\n  margin-top: 1rem;\n}\n\n.wrapup-name {\n  color: var(--mds-color-theme-text-primary-normal);\n}\n\n.wrapup-select {\n  flex-grow: 1;\n  padding: 0.5rem;\n  margin-top: 0.5rem;\n  margin-bottom: 0.75rem;\n  border: 0.0625rem solid #ccc;\n  border-radius: 0.25rem;\n  align-self: flex-start;\n}\n\n.wrapup-select-arrow-icon {\n  position: absolute;\n  right: 1.5rem; /* Adjusted to leave space for the arrow icon */\n  top: 55%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.submit-wrapup-button {\n  align-self: flex-end;\n}\n\n.wrapup-header {\n  margin-bottom: 0.7rem;\n  align-self: flex-start;\n}\n\n.md-select-wrapper {\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  border: 0;\n}\n\n[id*=tippy] {\n  border: 0.0625rem solid var(--mds-color-theme-outline-input-normal);\n  background-color: var(--mds-color-theme-background-glass-overlay-normal);\n  border-radius: 0.5rem;\n}\n\n.md-button-circle-wrapper.call-control-button {\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  border: 1px solid var(--mds-color-theme-outline-button-normal);\n}\n.md-button-circle-wrapper.call-control-button:hover, .md-button-circle-wrapper.call-control-button.hover {\n  background-color: var(--mds-color-theme-button-secondary-hover);\n}\n\n.md-button-circle-wrapper.call-control-button-cancel {\n  background-color: var(--mds-color-theme-button-cancel-normal);\n  border: 0.0625rem solid var(--mds-color-theme-background-secondary-normal);\n}\n.md-button-circle-wrapper.call-control-button-cancel:hover, .md-button-circle-wrapper.call-control-button-cancel.hover {\n  background-color: var(--mds-color-theme-button-cancel-hover);\n}\n\n.call-control-button-icon {\n  --mdc-icon-fill-color: var(--mds--color-theme-button-secondary-normal);\n}\n\n.md-button-circle-wrapper.call-control-consult-button-cancel {\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  border: 0.0625rem solid var(--mds-color-theme-button-cancel-normal);\n}\n.md-button-circle-wrapper.call-control-consult-button-cancel:hover {\n  background-color: var(--mds-color-theme-button-secondary-hover);\n}\n\n.call-control-consult-button-cancel-icon {\n  --mdc-icon-fill-color: var(--mds-color-theme-button-cancel-normal);\n}\n\n.wrapup-button {\n  display: inline-flex;\n  justify-content: center;\n  width: 8rem;\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  border: 0.0625rem solid var(--mds-color-theme-outline-button-normal);\n  color: var(--mds-color-theme-text-primary-normal);\n}\n.wrapup-button:hover, .wrapup-button.hover {\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  color: var(--mds-color-theme-text-primary-normal);\n}\n\n.agent-popover .agent-popover-content {\n  display: flex;\n  flex-direction: column;\n  padding: 1rem 0.5rem 0.5rem 1rem;\n  width: 30rem;\n  height: 25rem;\n  gap: 0.25rem;\n}\n.agent-popover .agent-popover-content .agent-popover-title {\n  margin: 0 0 0 0;\n  margin-bottom: 1rem;\n  text-align: left;\n}\n.agent-popover .agent-popover-content .agent-agent-item {\n  padding: 0.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n.agent-popover .agent-popover-content .agent-agent-item:hover {\n  background-color: var(--mds-color-theme-background-secondary-hover);\n}\n.agent-popover .agent-tablist {\n  margin-bottom: 1rem;\n}\n.agent-popover .agent-tablist .agent-tab {\n  margin: 0 !important;\n}\n.agent-popover .agent-agent-list {\n  margin-left: 0;\n  margin-bottom: 1rem;\n}\n.agent-popover button.md-button-circle-wrapper.md-popover-close-button.md-button-simple-wrapper {\n  display: none;\n}\n\n.call-control-list-item .hover-button {\n  opacity: 0;\n  transition: opacity 0.3s;\n  pointer-events: none;\n}\n\n.call-control-list-item:hover .hover-button {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.custom-text {\n  margin: 0 !important;\n  line-height: 1 !important;\n}\n\n.call-control-consult-container {\n  margin-top: 1rem;\n  border-top: 1px solid var(--mds-color-theme-background-secondary-normal);\n  padding-top: 1rem;\n}\n\n.call-control-consult-container.no-border {\n  margin-top: 0;\n  padding-top: 0;\n  border-top: none;\n}\n\n.call-control-consult .consult-sub-text {\n  margin-top: 0.25rem !important;\n}\n\n.consult-header {\n  display: flex;\n  align-content: center;\n  gap: 0.5rem;\n}\n\n.consult-agent-name {\n  line-height: 0;\n  margin-top: -8px;\n}\n\n.consult-buttons-container {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-start;\n}\n\n.task-avatar {\n  --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-pressed);\n  --mdc-avatar-default-foreground-color: var(--mds-color-theme-indicator-stable);\n  margin-right: 0.25rem;\n}\n\n.md-button-circle-wrapper.call-control-button[disabled],\n.md-button-circle-wrapper.call-control-button.shallowDisabled,\n.md-button-circle-wrapper.call-control-button:disabled {\n  outline-color: var(--mds-color-theme-button-primary-disabled);\n  border-color: var(--mds-color-theme-button-primary-disabled);\n  opacity: 0.5;\n  cursor: not-allowed;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
 
 /***/ }),
 
@@ -1966,7 +1966,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n\n\n
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importDefault(__webpack_require__(/*! react */ \"react\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./src/utils.ts\");\n__webpack_require__(/*! ./user-state.scss */ \"./src/components/UserState/user-state.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst UserStateComponent = (props) => {\n    const { idleCodes, setAgentStatus, isSettingAgentStatus, elapsedTime, lastIdleStateChangeElapsedTime, currentState, customState, } = props;\n    let selectedKey;\n    if (customState) {\n        selectedKey = `hide-${customState.developerName}`;\n    }\n    else {\n        selectedKey = currentState;\n    }\n    const items = customState\n        ? [{ name: customState.name, id: `hide-${customState.developerName}`, developerName: customState.developerName }]\n        : [];\n    for (const item of idleCodes) {\n        if (item.name === 'RONA' && item.id === currentState) {\n            selectedKey = `hide-${item.id}`;\n        }\n        if (item.name === 'RONA' && item.id !== currentState) {\n            continue; // Skip RONA unless it matches the current state\n        }\n        items.push(Object.assign(Object.assign({}, item), { id: item.name === 'RONA' ? `hide-${item.id}` : item.id }));\n    }\n    const getDropdownClass = () => {\n        if (customState) {\n            return 'custom'; // Custom state class\n        }\n        if (currentState === '0') {\n            return '';\n        }\n        for (const item of idleCodes) {\n            if (item.id === currentState && item.name === 'RONA') {\n                return 'rona';\n            }\n        }\n        return 'idle';\n    };\n    const getIconStyle = (item) => {\n        if (item.developerName) {\n            return { class: 'custom', iconName: 'busy-presence-light' };\n        }\n        switch (item.id) {\n            case '0':\n                return { class: '', iconName: 'active-presence-small-filled' };\n            case item.name === 'RONA' && item.id:\n                return { class: 'rona', iconName: 'dnd-presence-filled' };\n            default:\n                return { class: 'idle', iconName: 'recents-presence-filled' };\n        }\n    };\n    return (react_1.default.createElement(\"div\", { className: \"user-state-container\" },\n        react_1.default.createElement(react_collaboration_1.SelectNext, { label: \"\", \"aria-label\": \"user-state\", direction: \"bottom\", onSelectionChange: (key) => {\n                const cleanKey = key.startsWith('hide-') ? key.substring(5) : key;\n                setAgentStatus(cleanKey);\n            }, showBorder: true, selectedKey: selectedKey, items: items, className: `state-select ${getDropdownClass()}` }, (item) => {\n            return (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n                react_1.default.createElement(\"div\", { className: \"item-container\" },\n                    react_1.default.createElement(react_2.Icon, { name: getIconStyle(item).iconName, title: \"\", className: `state-icon ${getIconStyle(item).class}` }),\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"state-name\", tagName: 'small' }, item.name))));\n        }),\n        react_1.default.createElement(\"span\", { className: `elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}` },\n            lastIdleStateChangeElapsedTime >= 0 ? (0, utils_1.formatTime)(lastIdleStateChangeElapsedTime) + ' / ' : '',\n            (0, utils_1.formatTime)(elapsedTime)),\n        react_1.default.createElement(react_2.Icon, { className: \"select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" })));\n};\nexports[\"default\"] = UserStateComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.tsx?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importDefault(__webpack_require__(/*! react */ \"react\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./src/utils.ts\");\n__webpack_require__(/*! ./user-state.scss */ \"./src/components/UserState/user-state.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst UserStateComponent = (props) => {\n    const { idleCodes, setAgentStatus, isSettingAgentStatus, elapsedTime, lastIdleStateChangeElapsedTime, currentState, customState, } = props;\n    let selectedKey;\n    if (customState) {\n        selectedKey = `hide-${customState.developerName}`;\n    }\n    else {\n        selectedKey = currentState;\n    }\n    const items = customState\n        ? [{ name: customState.name, id: `hide-${customState.developerName}`, developerName: customState.developerName }]\n        : [];\n    for (const item of idleCodes) {\n        if (item.name === 'RONA' && item.id === currentState) {\n            selectedKey = `hide-${item.id}`;\n        }\n        if (item.name === 'RONA' && item.id !== currentState) {\n            continue; // Skip RONA unless it matches the current state\n        }\n        items.push(Object.assign(Object.assign({}, item), { id: item.name === 'RONA' ? `hide-${item.id}` : item.id }));\n    }\n    const getDropdownClass = () => {\n        if (customState) {\n            return 'custom'; // Custom state class\n        }\n        if (currentState === '0') {\n            return '';\n        }\n        for (const item of idleCodes) {\n            if (item.id === currentState && item.name === 'RONA') {\n                return 'rona';\n            }\n        }\n        return 'idle';\n    };\n    const getIconStyle = (item) => {\n        if (item.developerName) {\n            return { class: 'custom', iconName: 'busy-presence-light' };\n        }\n        switch (item.id) {\n            case '0':\n                return { class: '', iconName: 'active-presence-small-filled' };\n            case item.name === 'RONA' && item.id:\n                return { class: 'rona', iconName: 'dnd-presence-filled' };\n            default:\n                return { class: 'idle', iconName: 'recents-presence-filled' };\n        }\n    };\n    return (react_1.default.createElement(\"div\", { className: \"user-state-container\" },\n        react_1.default.createElement(react_collaboration_1.SelectNext, { label: \"\", \"aria-label\": \"user-state\", direction: \"bottom\", onSelectionChange: (key) => {\n                const cleanKey = key.startsWith('hide-') ? key.substring(5) : key;\n                setAgentStatus(cleanKey);\n            }, showBorder: true, selectedKey: selectedKey, items: items, className: `state-select ${getDropdownClass()}` }, (item) => {\n            return (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n                react_1.default.createElement(\"div\", { className: \"item-container\" },\n                    react_1.default.createElement(react_2.Icon, { name: getIconStyle(item).iconName, title: \"\", className: `state-icon ${getIconStyle(item).class}` }),\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"state-name\", tagName: 'small' }, item.name))));\n        }),\n        !customState && (react_1.default.createElement(\"span\", { className: `elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}` },\n            lastIdleStateChangeElapsedTime >= 0 ? (0, utils_1.formatTime)(lastIdleStateChangeElapsedTime) + ' / ' : '',\n            (0, utils_1.formatTime)(elapsedTime))),\n        react_1.default.createElement(react_2.Icon, { className: \"select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" })));\n};\nexports[\"default\"] = UserStateComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.tsx?");
 
 /***/ }),
 
@@ -1981,6 +1981,17 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n\n\n
 
 /***/ }),
 
+/***/ "./src/components/task/CallControl/CallControlCustom/call-control-consult.tsx":
+/*!************************************************************************************!*\
+  !*** ./src/components/task/CallControl/CallControlCustom/call-control-consult.tsx ***!
+  \************************************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importDefault(__webpack_require__(/*! react */ \"react\"));\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst TaskTimer_1 = __importDefault(__webpack_require__(/*! ../../TaskTimer */ \"./src/components/task/TaskTimer/index.tsx\"));\nconst CallControlConsultComponent = ({ agentName, startTimeStamp, onTransfer, endConsultCall, consultCompleted, showTransfer, }) => {\n    const timerKey = `timer-${startTimeStamp}`;\n    const handleTransfer = () => {\n        try {\n            if (onTransfer) {\n                onTransfer();\n            }\n        }\n        catch (error) {\n            console.error('Error transferring call:', error);\n        }\n    };\n    const handleEndConsult = () => {\n        try {\n            endConsultCall();\n        }\n        catch (error) {\n            console.error('Error ending consult call:', error);\n        }\n    };\n    const buttons = [\n        {\n            key: 'transfer',\n            icon: 'next-bold',\n            tooltip: 'Transfer Consult',\n            onClick: handleTransfer,\n            className: 'call-control-button',\n            disabled: !consultCompleted,\n        },\n        {\n            key: 'cancel',\n            icon: 'headset-muted-bold',\n            tooltip: 'End Consult',\n            onClick: handleEndConsult,\n            className: 'call-control-consult-button-cancel',\n        },\n    ];\n    return (react_1.default.createElement(\"div\", { className: \"call-control-consult\" },\n        react_1.default.createElement(\"div\", { className: \"consult-header\" },\n            react_1.default.createElement(react_2.Avatar, { iconName: \"handset-filled\", className: \"task-avatar\", size: 32 }),\n            react_1.default.createElement(\"div\", null,\n                react_1.default.createElement(react_collaboration_1.Text, { tagName: \"p\", type: \"body-large-bold\", className: \"consult-agent-name\" }, agentName),\n                react_1.default.createElement(react_collaboration_1.Text, { tagName: \"p\", type: \"body-secondary\", className: \"consult-sub-text\" },\n                    consultCompleted ? 'Consulting' : 'Consult requested',\n                    \"\\u00A0\\u2022\\u00A0\",\n                    react_1.default.createElement(TaskTimer_1.default, { key: timerKey, startTimeStamp: startTimeStamp })))),\n        react_1.default.createElement(\"div\", { className: \"consult-buttons consult-buttons-container\" }, buttons.map((button) => (button.key !== 'transfer' || (showTransfer && onTransfer)) && (react_1.default.createElement(react_collaboration_1.TooltipNext, { key: button.key, triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, onPress: button.onClick, disabled: button.disabled, \"data-testid\": `${button.key}-consult-btn` },\n                react_1.default.createElement(react_2.Icon, { className: `${button.className}-icon`, name: button.icon })), color: \"primary\", delay: [0, 0], placement: \"bottom-start\", type: \"description\", variant: \"small\", className: \"tooltip\" },\n            react_1.default.createElement(\"p\", null, button.tooltip)))))));\n};\nexports[\"default\"] = CallControlConsultComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/CallControlCustom/call-control-consult.tsx?");
+
+/***/ }),
+
 /***/ "./src/components/task/CallControl/CallControlCustom/consult-transfer-list-item.tsx":
 /*!******************************************************************************************!*\
   !*** ./src/components/task/CallControl/CallControlCustom/consult-transfer-list-item.tsx ***!
@@ -1999,7 +2010,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst consult_transfer_list_item_1 = __importDefault(__webpack_require__(/*! ./consult-transfer-list-item */ \"./src/components/task/CallControl/CallControlCustom/consult-transfer-list-item.tsx\"));\nconst ConsultTransferPopoverComponent = ({ heading, buttonIcon, buddyAgents, onAgentSelect, }) => {\n    const [selectedTab, setSelectedTab] = (0, react_1.useState)('Agents');\n    const filteredAgents = buddyAgents;\n    return (react_1.default.createElement(\"div\", { className: \"agent-popover-content\" },\n        react_1.default.createElement(react_collaboration_1.Text, { tagName: \"h3\", className: \"agent-popover-title\", type: \"body-large-bold\", style: { margin: '0 0 0 0' } }, heading),\n        react_1.default.createElement(react_collaboration_1.TabListNext, { \"aria-label\": \"Tabs\", className: \"agent-tablist\", hasBackground: false, style: { marginTop: '0' }, onTabSelection: (key) => setSelectedTab(key) },\n            react_1.default.createElement(react_collaboration_1.TabNext, { key: \"Agents\", className: \"agent-tab\", active: selectedTab === 'Agents' }, \"Agents\")),\n        react_1.default.createElement(react_collaboration_1.ListNext, { listSize: filteredAgents.length, className: \"agent-agent-list\" }, filteredAgents.map((agent) => (react_1.default.createElement(\"div\", { key: agent.agentId, onMouseDown: (e) => e.stopPropagation(), style: { cursor: 'pointer', pointerEvents: 'auto' } },\n            react_1.default.createElement(consult_transfer_list_item_1.default, { title: agent.agentName, buttonIcon: buttonIcon, onButtonPress: () => onAgentSelect(agent.agentId) }))))),\n        filteredAgents.length === 0 && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"small\", type: \"body-secondary\" }, \"No agents found\"))));\n};\nexports[\"default\"] = ConsultTransferPopoverComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst consult_transfer_list_item_1 = __importDefault(__webpack_require__(/*! ./consult-transfer-list-item */ \"./src/components/task/CallControl/CallControlCustom/consult-transfer-list-item.tsx\"));\nconst ConsultTransferPopoverComponent = ({ heading, buttonIcon, buddyAgents, onAgentSelect, }) => {\n    const [selectedTab, setSelectedTab] = (0, react_1.useState)('Agents');\n    const filteredAgents = buddyAgents;\n    return (react_1.default.createElement(\"div\", { className: \"agent-popover-content\" },\n        react_1.default.createElement(react_collaboration_1.Text, { tagName: \"h3\", className: \"agent-popover-title\", type: \"body-large-bold\", style: { margin: '0 0 0 0' } }, heading),\n        react_1.default.createElement(react_collaboration_1.TabListNext, { \"aria-label\": \"Tabs\", className: \"agent-tablist\", hasBackground: false, style: { marginTop: '0' }, onTabSelection: (key) => setSelectedTab(key) },\n            react_1.default.createElement(react_collaboration_1.TabNext, { key: \"Agents\", className: \"agent-tab\", active: selectedTab === 'Agents' }, \"Agents\")),\n        react_1.default.createElement(react_collaboration_1.ListNext, { listSize: filteredAgents.length, className: \"agent-agent-list\" }, filteredAgents.map((agent) => (react_1.default.createElement(\"div\", { key: agent.agentId, onMouseDown: (e) => e.stopPropagation(), style: { cursor: 'pointer', pointerEvents: 'auto' } },\n            react_1.default.createElement(consult_transfer_list_item_1.default, { title: agent.agentName, buttonIcon: buttonIcon, onButtonPress: () => onAgentSelect(agent.agentId, agent.agentName) }))))),\n        filteredAgents.length === 0 && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"small\", type: \"body-secondary\" }, \"No agents found\"))));\n};\nexports[\"default\"] = ConsultTransferPopoverComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx?");
 
 /***/ }),
 
@@ -2010,7 +2021,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./call-control.styles.scss */ \"./src/components/task/CallControl/call-control.styles.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst consult_transfer_popover_1 = __importDefault(__webpack_require__(/*! ./CallControlCustom/consult-transfer-popover */ \"./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx\"));\nfunction CallControlComponent(props) {\n    const [selectedWrapupReason, setSelectedWrapupReason] = (0, react_1.useState)(null);\n    const [selectedWrapupId, setSelectedWrapupId] = (0, react_1.useState)(null);\n    const [showAgentMenu, setShowAgentMenu] = (0, react_1.useState)(false);\n    const [agentMenuType, setAgentMenuType] = (0, react_1.useState)(null);\n    const { currentTask, audioRef, toggleHold, toggleRecording, endCall, wrapupCall, wrapupCodes, wrapupRequired, isHeld, setIsHeld, isRecording, setIsRecording, buddyAgents, loadBuddyAgents, transferCall, consultCall, } = props;\n    (0, react_1.useEffect)(() => {\n        if (!currentTask || !currentTask.data || !currentTask.data.interaction)\n            return;\n        const { interaction, mediaResourceId } = currentTask.data;\n        const { media, callProcessingDetails } = interaction;\n        const isHold = media && media[mediaResourceId] && media[mediaResourceId].isHold;\n        setIsHeld(isHold);\n        if (callProcessingDetails) {\n            const { isPaused } = callProcessingDetails;\n            setIsRecording(!isPaused);\n        }\n    }, [currentTask]);\n    const handletoggleHold = () => {\n        toggleHold(!isHeld);\n        setIsHeld(!isHeld);\n    };\n    const handleWrapupCall = () => {\n        if (selectedWrapupReason && selectedWrapupId) {\n            wrapupCall(selectedWrapupReason, selectedWrapupId);\n            setSelectedWrapupReason(null);\n            setSelectedWrapupId(null);\n        }\n    };\n    const handleWrapupChange = (text, value) => {\n        setSelectedWrapupReason(text);\n        setSelectedWrapupId(value);\n    };\n    const buttons = [\n        {\n            icon: isHeld ? 'play-bold' : 'pause-bold',\n            onClick: () => handletoggleHold(),\n            tooltip: isHeld ? 'Resume the call' : 'Hold the call',\n            className: 'call-control-button',\n            disabled: false,\n        },\n        {\n            icon: 'headset-bold',\n            tooltip: 'Consult with another agent',\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Consult',\n        },\n        {\n            icon: 'next-bold',\n            tooltip: 'Transfer call',\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Transfer',\n        },\n        {\n            icon: isRecording ? 'record-paused-bold' : 'record-bold',\n            onClick: () => toggleRecording(),\n            tooltip: isRecording ? 'Pause Recording' : 'Resume Recording',\n            className: 'call-control-button',\n            disabled: false,\n        },\n        {\n            icon: 'cancel-regular',\n            onClick: endCall,\n            tooltip: 'End call',\n            className: 'call-control-button-cancel',\n            disabled: isHeld,\n        },\n    ];\n    if (!currentTask)\n        return null;\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"audio\", { ref: audioRef, id: \"remote-audio\", autoPlay: true }),\n        react_1.default.createElement(\"div\", { className: \"call-control-container\", \"data-testid\": \"call-control-container\" },\n            !wrapupRequired && (react_1.default.createElement(\"div\", { className: \"button-group\" }, buttons.map((button, index) => {\n                if (button.menuType) {\n                    return (react_1.default.createElement(react_collaboration_1.PopoverNext, { key: index, onHide: () => {\n                            setShowAgentMenu(false);\n                            setAgentMenuType(null);\n                        }, color: \"primary\", delay: [0, 0], placement: \"bottom\", showArrow: true, variant: \"medium\", interactive: true, offsetDistance: 2, className: \"agent-popover\", trigger: \"click\", closeButtonPlacement: \"top-right\", closeButtonProps: {\n                            'aria-label': 'Close popover',\n                            onPress: () => {\n                                setShowAgentMenu(false);\n                                setAgentMenuType(null);\n                            },\n                            outline: true,\n                        }, triggerComponent: react_1.default.createElement(react_collaboration_1.TooltipNext, { key: index, triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, \"aria-label\": button.tooltip, disabled: button.disabled, \"data-testid\": \"ButtonCircle\", onPress: () => {\n                                    // If popover is already visible, we close it\n                                    if (showAgentMenu && agentMenuType === button.menuType) {\n                                        setShowAgentMenu(false);\n                                        setAgentMenuType(null);\n                                    }\n                                    else {\n                                        setAgentMenuType(button.menuType);\n                                        setShowAgentMenu(true);\n                                        loadBuddyAgents();\n                                    }\n                                } },\n                                react_1.default.createElement(react_2.Icon, { className: button.className + '-icon', name: button.icon })), color: \"primary\", delay: [0, 0], placement: \"bottom-start\", type: \"description\", variant: \"small\", className: \"tooltip\" },\n                            react_1.default.createElement(\"p\", null, button.tooltip)) }, showAgentMenu && agentMenuType === button.menuType ? (react_1.default.createElement(consult_transfer_popover_1.default, { heading: button.menuType, buttonIcon: button.icon, buddyAgents: buddyAgents, onAgentSelect: (agentId) => {\n                            setShowAgentMenu(false);\n                            if (agentMenuType === 'Consult') {\n                                consultCall();\n                            }\n                            else {\n                                // Adding agent for now by default, will update once we have queues\n                                transferCall(agentId, 'agent');\n                            }\n                            setAgentMenuType(null);\n                        } })) : null));\n                }\n                return (react_1.default.createElement(react_collaboration_1.TooltipNext, { key: index, triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, onPress: button.onClick, disabled: button.disabled, \"aria-label\": button.tooltip },\n                        react_1.default.createElement(react_2.Icon, { className: button.className + '-icon', name: button.icon })), color: \"primary\", delay: [0, 0], placement: \"bottom-start\", type: \"description\", variant: \"small\", className: \"tooltip\" },\n                    react_1.default.createElement(\"p\", null, button.tooltip)));\n            }))),\n            wrapupRequired && (react_1.default.createElement(\"div\", { className: \"wrapup-group\" },\n                react_1.default.createElement(react_collaboration_1.PopoverNext, { color: \"primary\", delay: [0, 0], placement: \"bottom-start\", showArrow: true, trigger: \"click\", triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"wrapup-button\" },\n                        \"Wrap up\",\n                        react_1.default.createElement(react_2.Icon, { name: \"arrow-down-bold\" })), variant: \"medium\", interactive: true, offsetDistance: 2, className: \"wrapup-popover\" },\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-large-bold\" }, \"Wrap-up Interaction\"),\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-secondary\" }, \"Wrap-up reason\"),\n                    react_1.default.createElement(react_collaboration_1.SelectNext, { \"aria-label\": \"wrapup-reason\", className: \"wrapup-select\", onSelectionChange: (key) => {\n                            const selectedItem = wrapupCodes === null || wrapupCodes === void 0 ? void 0 : wrapupCodes.find((code) => code.id === key);\n                            handleWrapupChange(selectedItem.name, selectedItem.id);\n                        }, items: wrapupCodes, showBorder: false, placeholder: \"Select\" }, (item) => (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n                        react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-name\", tagName: 'small' }, item.name)))),\n                    react_1.default.createElement(react_2.Icon, { className: \"wrapup-select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" }),\n                    react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"submit-wrapup-button\", onPress: handleWrapupCall, disabled: selectedWrapupId && selectedWrapupReason ? false : true, \"aria-label\": \"Submit wrap-up\" }, \"Submit & Wrap up\")))))));\n}\nexports[\"default\"] = CallControlComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.tsx?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./call-control.styles.scss */ \"./src/components/task/CallControl/call-control.styles.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst consult_transfer_popover_1 = __importDefault(__webpack_require__(/*! ./CallControlCustom/consult-transfer-popover */ \"./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx\"));\nconst call_control_consult_1 = __importDefault(__webpack_require__(/*! ./CallControlCustom/call-control-consult */ \"./src/components/task/CallControl/CallControlCustom/call-control-consult.tsx\"));\nfunction CallControlComponent(props) {\n    const [selectedWrapupReason, setSelectedWrapupReason] = (0, react_1.useState)(null);\n    const [selectedWrapupId, setSelectedWrapupId] = (0, react_1.useState)(null);\n    const [showAgentMenu, setShowAgentMenu] = (0, react_1.useState)(false);\n    const [agentMenuType, setAgentMenuType] = (0, react_1.useState)(null);\n    const { currentTask, toggleHold, toggleRecording, endCall, wrapupCall, wrapupCodes, wrapupRequired, isHeld, setIsHeld, isRecording, setIsRecording, buddyAgents, loadBuddyAgents, transferCall, consultCall, endConsultCall, consultTransfer, consultInitiated, consultCompleted, consultAccepted, consultStartTimeStamp, callControlAudio, consultAgentName, setConsultAgentName, consultAgentId, setConsultAgentId, } = props;\n    (0, react_1.useEffect)(() => {\n        if (!currentTask || !currentTask.data || !currentTask.data.interaction)\n            return;\n        const { interaction, mediaResourceId } = currentTask.data;\n        const { media, callProcessingDetails } = interaction;\n        const isHold = media && media[mediaResourceId] && media[mediaResourceId].isHold;\n        setIsHeld(isHold);\n        if (callProcessingDetails) {\n            const { isPaused } = callProcessingDetails;\n            setIsRecording(!isPaused);\n        }\n    }, [currentTask]);\n    const handletoggleHold = () => {\n        toggleHold(!isHeld);\n        setIsHeld(!isHeld);\n    };\n    const handleWrapupCall = () => {\n        if (selectedWrapupReason && selectedWrapupId) {\n            wrapupCall(selectedWrapupReason, selectedWrapupId);\n            setSelectedWrapupReason(null);\n            setSelectedWrapupId(null);\n        }\n    };\n    const handleWrapupChange = (text, value) => {\n        setSelectedWrapupReason(text);\n        setSelectedWrapupId(value);\n    };\n    const handleAgentSelect = (agentId, agentName) => {\n        if (agentMenuType === 'Consult') {\n            consultCall(agentId, 'agent');\n            setConsultAgentId(agentId);\n            setConsultAgentName(agentName);\n        }\n        else {\n            transferCall(agentId, 'agent');\n        }\n    };\n    const buttons = [\n        {\n            id: 'hold',\n            icon: isHeld ? 'play-bold' : 'pause-bold',\n            onClick: () => handletoggleHold(),\n            tooltip: isHeld ? 'Resume the call' : 'Hold the call',\n            className: 'call-control-button',\n            disabled: false,\n        },\n        {\n            id: 'consult',\n            icon: 'headset-bold',\n            tooltip: 'Consult with another agent',\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Consult',\n        },\n        {\n            id: 'transfer',\n            icon: 'next-bold',\n            tooltip: 'Transfer call',\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Transfer',\n        },\n        {\n            id: 'record',\n            icon: isRecording ? 'record-paused-bold' : 'record-bold',\n            onClick: () => toggleRecording(),\n            tooltip: isRecording ? 'Pause Recording' : 'Resume Recording',\n            className: 'call-control-button',\n            disabled: false,\n        },\n        {\n            id: 'end',\n            icon: 'cancel-regular',\n            onClick: endCall,\n            tooltip: 'End call',\n            className: 'call-control-button-cancel',\n            disabled: isHeld,\n        },\n    ];\n    const filteredButtons = consultInitiated\n        ? buttons.filter((button) => !['hold', 'consult'].includes(button.id))\n        : buttons;\n    if (!currentTask)\n        return null;\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"audio\", { ref: (audioElement) => {\n                if (audioElement && callControlAudio) {\n                    audioElement.srcObject = callControlAudio;\n                }\n            }, id: \"remote-audio\", autoPlay: true }),\n        react_1.default.createElement(\"div\", { className: \"call-control-container\", \"data-testid\": \"call-control-container\" },\n            !consultAccepted && !wrapupRequired && (react_1.default.createElement(\"div\", { className: \"button-group\" }, filteredButtons.map((button, index) => {\n                if (button.menuType) {\n                    return (react_1.default.createElement(react_collaboration_1.PopoverNext, { key: index, onHide: () => {\n                            setShowAgentMenu(false);\n                            setAgentMenuType(null);\n                        }, color: \"primary\", delay: [0, 0], placement: \"bottom\", showArrow: true, variant: \"medium\", interactive: true, offsetDistance: 2, className: \"agent-popover\", trigger: \"click\", closeButtonPlacement: \"top-right\", closeButtonProps: {\n                            'aria-label': 'Close popover',\n                            onPress: () => {\n                                setShowAgentMenu(false);\n                                setAgentMenuType(null);\n                            },\n                            outline: true,\n                        }, triggerComponent: react_1.default.createElement(react_collaboration_1.TooltipNext, { key: index, triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, \"aria-label\": button.tooltip, disabled: button.disabled || consultInitiated, \"data-testid\": \"ButtonCircle\", onPress: () => {\n                                    if (showAgentMenu && agentMenuType === button.menuType) {\n                                        setShowAgentMenu(false);\n                                        setAgentMenuType(null);\n                                    }\n                                    else {\n                                        setAgentMenuType(button.menuType);\n                                        setShowAgentMenu(true);\n                                        loadBuddyAgents();\n                                    }\n                                } },\n                                react_1.default.createElement(react_2.Icon, { className: button.className + '-icon', name: button.icon })), color: \"primary\", delay: [0, 0], placement: \"bottom-start\", type: \"description\", variant: \"small\", className: \"tooltip\" },\n                            react_1.default.createElement(\"p\", null, button.tooltip)) }, showAgentMenu && agentMenuType === button.menuType ? (react_1.default.createElement(consult_transfer_popover_1.default, { heading: button.menuType, buttonIcon: button.icon, buddyAgents: buddyAgents, onAgentSelect: handleAgentSelect })) : null));\n                }\n                return (react_1.default.createElement(react_collaboration_1.TooltipNext, { key: index, triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, onPress: button.onClick, disabled: button.disabled || consultInitiated, \"aria-label\": button.tooltip },\n                        react_1.default.createElement(react_2.Icon, { className: button.className + '-icon', name: button.icon })), color: \"primary\", delay: [0, 0], placement: \"bottom-start\", type: \"description\", variant: \"small\", className: \"tooltip\" },\n                    react_1.default.createElement(\"p\", null, button.tooltip)));\n            }))),\n            wrapupRequired && (react_1.default.createElement(\"div\", { className: \"wrapup-group\" },\n                react_1.default.createElement(react_collaboration_1.PopoverNext, { color: \"primary\", delay: [0, 0], placement: \"bottom-start\", showArrow: true, trigger: \"click\", triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"wrapup-button\" },\n                        \"Wrap up\",\n                        react_1.default.createElement(react_2.Icon, { name: \"arrow-down-bold\" })), variant: \"medium\", interactive: true, offsetDistance: 2, className: \"wrapup-popover\" },\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-large-bold\" }, \"Wrap-up Interaction\"),\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-secondary\" }, \"Wrap-up reason\"),\n                    react_1.default.createElement(react_collaboration_1.SelectNext, { \"aria-label\": \"wrapup-reason\", className: \"wrapup-select\", onSelectionChange: (key) => {\n                            const selectedItem = wrapupCodes === null || wrapupCodes === void 0 ? void 0 : wrapupCodes.find((code) => code.id === key);\n                            handleWrapupChange(selectedItem.name, selectedItem.id);\n                        }, items: wrapupCodes, showBorder: false, placeholder: \"Select\" }, (item) => (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n                        react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-name\", tagName: 'small' }, item.name)))),\n                    react_1.default.createElement(react_2.Icon, { className: \"wrapup-select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" }),\n                    react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"submit-wrapup-button\", onPress: handleWrapupCall, disabled: selectedWrapupId && selectedWrapupReason ? false : true, \"aria-label\": \"Submit wrap-up\" }, \"Submit & Wrap up\")))),\n            (consultAccepted || consultInitiated) && !wrapupRequired && (react_1.default.createElement(\"div\", { className: `call-control-consult-container ${consultAccepted ? 'no-border' : ''}` },\n                react_1.default.createElement(call_control_consult_1.default, { agentName: consultAgentName, startTimeStamp: consultStartTimeStamp, endConsultCall: endConsultCall, onTransfer: () => consultTransfer(consultAgentId || currentTask.data.destAgentId, 'agent'), consultCompleted: consultCompleted, showTransfer: !consultAccepted }))))));\n}\nexports[\"default\"] = CallControlComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.tsx?");
 
 /***/ }),
 

package/dist/types/components/task/CallControl/CallControlCustom/call-control-consult.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CallControlConsultComponentsProps } from '../../task.types';
+declare const CallControlConsultComponent: React.FC<CallControlConsultComponentsProps>;
+export default CallControlConsultComponent;

package/dist/types/components/task/task.types.d.ts

@@ -78,10 +78,6 @@ export type TaskListComponentProps = Pick<TaskProps, 'currentTask' | 'taskList'
  * Interface representing the properties for control actions on a task.
  */
 export interface ControlProps {
-    /**
-     * Audio reference
-     */
-    audioRef: React.RefObject<HTMLAudioElement>;
     /**
      * The current task being handled.
      */
@@ -170,11 +166,63 @@ export interface ControlProps {
      */
     transferCall: (destination: string, destinationType: DestinationType) => void;
     /**
-     * Function to consult with a buddy agent.
+     *
+     * @param consultDestination
+     * @param destinationType
+     * @returns
+     */
+    consultCall: (consultDestination: string, destinationType: DestinationType) => void;
+    /**
+     * Function to end the consult call.
+     */
+    endConsultCall: () => void;
+    /**
+     * Function to transfer the consult call to a destination.
+     * @param destination - The destination to transfer the consult call to.
+     * @param destinationType - The type of destination.
+     */
+    consultTransfer: (destination: string, destinationType: DestinationType) => void;
+    /**
+     * Flag to determine if the consult call is connecting.
+     */
+    consultInitiated: boolean;
+    /**
+     * Flag to determine if the consult call is connecting.
+     */
+    consultCompleted: boolean;
+    /**
+     * Flag to determine if the consult call is accepted.
+     */
+    consultAccepted: boolean;
+    /**
+     * Timestamp when the consult call started.
+     */
+    consultStartTimeStamp?: number;
+    /**
+     * Audio stream for the call control.
+     * This is used to play audio for the call control.
+     */
+    callControlAudio: MediaStream | null;
+    /**
+     * ID of the consulting agent
+     */
+    consultAgentId: string;
+    /**
+     * Function to set the consulting agent ID
+     * @param agentId - The ID of the consulting agent.
      */
-    consultCall: () => void;
+    setConsultAgentId: (agentId: string) => void;
+    /**
+     * Name of the consulting agent.
+     */
+    consultAgentName: string;
+    /**
+     * Function to set the consulting agent name.
+     * @param agentName - The name of the consulting agent.
+     */
+    setConsultAgentName: (agentName: string) => void;
 }
-export type CallControlComponentProps = Pick<ControlProps, 'currentTask' | 'audioRef' | 'wrapupCodes' | 'wrapupRequired' | 'toggleHold' | 'toggleRecording' | 'endCall' | 'wrapupCall' | 'isHeld' | 'setIsHeld' | 'isRecording' | 'setIsRecording' | 'buddyAgents' | 'loadBuddyAgents' | 'transferCall' | 'consultCall'>;
+export type CallControlComponentProps = Pick<ControlProps, 'currentTask' | 'wrapupCodes' | 'wrapupRequired' | 'toggleHold' | 'toggleRecording' | 'endCall' | 'wrapupCall' | 'isHeld' | 'setIsHeld' | 'isRecording' | 'setIsRecording' | 'buddyAgents' | 'loadBuddyAgents' | 'transferCall' | 'consultCall' | 'endConsultCall' | 'consultInitiated' | 'consultTransfer' | 'consultCompleted' | 'consultAccepted' | 'consultStartTimeStamp' | 'callControlAudio' | 'consultAgentName' | 'setConsultAgentName' | 'consultAgentId' | 'setConsultAgentId'>;
 /**
  * Interface representing the properties for OutdialCall component.
  */
@@ -214,5 +262,16 @@ export interface ConsultTransferPopoverComponentProps {
         agentName: string;
         dn: string;
     }>;
-    onAgentSelect: (agentId: string) => void;
+    onAgentSelect: (agentId: string, agentName: string) => void;
+}
+/**
+ * Interface representing the properties for CallControlConsultComponents component.
+ */
+export interface CallControlConsultComponentsProps {
+    agentName: string;
+    startTimeStamp: number;
+    onTransfer?: () => void;
+    endConsultCall: () => void;
+    consultCompleted: boolean;
+    showTransfer: boolean;
 }

package/dist/wc.js

@@ -1735,7 +1735,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.tooltip.md-modal-container-wrapper {\n  color: var(--mds-color-theme-inverted-text-primary-normal);\n  background-color: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.tooltip .md-modal-container-arrow-wrapper .md-modal-arrow-svg path {\n  fill: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.call-control-container {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n.call-control-container .md-select-dropdown-input {\n  flex-grow: 1;\n  display: flex;\n  border: 0.0625rem;\n  align-self: flex-start;\n}\n\n.button-group {\n  display: flex;\n  gap: 0.5rem; /* Reduced gap between buttons/tooltips */\n  margin-top: 1rem;\n}\n\n.wrapup-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem; /* Reduced gap between select and button */\n  margin-top: 1rem;\n}\n\n.wrapup-name {\n  color: var(--mds-color-theme-text-primary-normal);\n}\n\n.wrapup-select {\n  flex-grow: 1;\n  padding: 0.5rem;\n  margin-top: 0.5rem;\n  margin-bottom: 0.75rem;\n  border: 0.0625rem solid #ccc;\n  border-radius: 0.25rem;\n  align-self: flex-start;\n}\n\n.wrapup-select-arrow-icon {\n  position: absolute;\n  right: 1.5rem; /* Adjusted to leave space for the arrow icon */\n  top: 55%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.submit-wrapup-button {\n  align-self: flex-end;\n}\n\n.wrapup-header {\n  margin-bottom: 0.7rem;\n  align-self: flex-start;\n}\n\n.md-select-wrapper {\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  border: 0;\n}\n\n[id*=tippy] {\n  border: 0.0625rem solid var(--mds-color-theme-outline-input-normal);\n  background-color: var(--mds-color-theme-background-glass-overlay-normal);\n  border-radius: 0.5rem;\n}\n\n.md-button-circle-wrapper.call-control-button {\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  border: 1px solid var(--mds-color-theme-outline-button-normal);\n}\n.md-button-circle-wrapper.call-control-button:hover, .md-button-circle-wrapper.call-control-button.hover {\n  background-color: var(--mds-color-theme-button-secondary-hover);\n}\n\n.md-button-circle-wrapper.call-control-button-cancel {\n  background-color: var(--mds-color-theme-button-cancel-normal);\n  border: 0.0625rem solid var(--mds-color-theme-background-secondary-normal);\n}\n.md-button-circle-wrapper.call-control-button-cancel:hover, .md-button-circle-wrapper.call-control-button-cancel.hover {\n  background-color: var(--mds-color-theme-button-cancel-hover);\n}\n\n.call-control-button-icon {\n  --mdc-icon-fill-color: var(--mds--color-theme-button-secondary-normal);\n}\n\n.wrapup-button {\n  display: inline-flex;\n  justify-content: center;\n  width: 8rem;\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  border: 0.0625rem solid var(--mds-color-theme-outline-button-normal);\n  color: var(--mds-color-theme-text-primary-normal);\n}\n.wrapup-button:hover, .wrapup-button.hover {\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  color: var(--mds-color-theme-text-primary-normal);\n}\n\n.agent-popover .agent-popover-content {\n  display: flex;\n  flex-direction: column;\n  padding: 1rem 0.5rem 0.5rem 1rem;\n  width: 30rem;\n  height: 25rem;\n  gap: 0.25rem;\n}\n.agent-popover .agent-popover-content .agent-popover-title {\n  margin: 0 0 0 0;\n  margin-bottom: 1rem;\n  text-align: left;\n}\n.agent-popover .agent-popover-content .agent-agent-item {\n  padding: 0.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n.agent-popover .agent-popover-content .agent-agent-item:hover {\n  background-color: var(--mds-color-theme-background-secondary-hover);\n}\n.agent-popover .agent-tablist {\n  margin-bottom: 1rem;\n}\n.agent-popover .agent-tablist .agent-tab {\n  margin: 0 !important;\n}\n.agent-popover .agent-agent-list {\n  margin-left: 0;\n  margin-bottom: 1rem;\n}\n\n.call-control-list-item .hover-button {\n  opacity: 0;\n  transition: opacity 0.3s;\n  pointer-events: none;\n}\n\n.call-control-list-item:hover .hover-button {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.custom-text {\n  margin: 0 !important;\n  line-height: 1 !important;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.tooltip.md-modal-container-wrapper {\n  color: var(--mds-color-theme-inverted-text-primary-normal);\n  background-color: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.tooltip .md-modal-container-arrow-wrapper .md-modal-arrow-svg path {\n  fill: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.call-control-container {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n.call-control-container .md-select-dropdown-input {\n  flex-grow: 1;\n  display: flex;\n  border: 0.0625rem;\n  align-self: flex-start;\n}\n\n.button-group {\n  display: flex;\n  gap: 0.5rem; /* Reduced gap between buttons/tooltips */\n  margin-top: 1rem;\n}\n\n.wrapup-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem; /* Reduced gap between select and button */\n  margin-top: 1rem;\n}\n\n.wrapup-name {\n  color: var(--mds-color-theme-text-primary-normal);\n}\n\n.wrapup-select {\n  flex-grow: 1;\n  padding: 0.5rem;\n  margin-top: 0.5rem;\n  margin-bottom: 0.75rem;\n  border: 0.0625rem solid #ccc;\n  border-radius: 0.25rem;\n  align-self: flex-start;\n}\n\n.wrapup-select-arrow-icon {\n  position: absolute;\n  right: 1.5rem; /* Adjusted to leave space for the arrow icon */\n  top: 55%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.submit-wrapup-button {\n  align-self: flex-end;\n}\n\n.wrapup-header {\n  margin-bottom: 0.7rem;\n  align-self: flex-start;\n}\n\n.md-select-wrapper {\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  border: 0;\n}\n\n[id*=tippy] {\n  border: 0.0625rem solid var(--mds-color-theme-outline-input-normal);\n  background-color: var(--mds-color-theme-background-glass-overlay-normal);\n  border-radius: 0.5rem;\n}\n\n.md-button-circle-wrapper.call-control-button {\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  border: 1px solid var(--mds-color-theme-outline-button-normal);\n}\n.md-button-circle-wrapper.call-control-button:hover, .md-button-circle-wrapper.call-control-button.hover {\n  background-color: var(--mds-color-theme-button-secondary-hover);\n}\n\n.md-button-circle-wrapper.call-control-button-cancel {\n  background-color: var(--mds-color-theme-button-cancel-normal);\n  border: 0.0625rem solid var(--mds-color-theme-background-secondary-normal);\n}\n.md-button-circle-wrapper.call-control-button-cancel:hover, .md-button-circle-wrapper.call-control-button-cancel.hover {\n  background-color: var(--mds-color-theme-button-cancel-hover);\n}\n\n.call-control-button-icon {\n  --mdc-icon-fill-color: var(--mds--color-theme-button-secondary-normal);\n}\n\n.md-button-circle-wrapper.call-control-consult-button-cancel {\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  border: 0.0625rem solid var(--mds-color-theme-button-cancel-normal);\n}\n.md-button-circle-wrapper.call-control-consult-button-cancel:hover {\n  background-color: var(--mds-color-theme-button-secondary-hover);\n}\n\n.call-control-consult-button-cancel-icon {\n  --mdc-icon-fill-color: var(--mds-color-theme-button-cancel-normal);\n}\n\n.wrapup-button {\n  display: inline-flex;\n  justify-content: center;\n  width: 8rem;\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  border: 0.0625rem solid var(--mds-color-theme-outline-button-normal);\n  color: var(--mds-color-theme-text-primary-normal);\n}\n.wrapup-button:hover, .wrapup-button.hover {\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  color: var(--mds-color-theme-text-primary-normal);\n}\n\n.agent-popover .agent-popover-content {\n  display: flex;\n  flex-direction: column;\n  padding: 1rem 0.5rem 0.5rem 1rem;\n  width: 30rem;\n  height: 25rem;\n  gap: 0.25rem;\n}\n.agent-popover .agent-popover-content .agent-popover-title {\n  margin: 0 0 0 0;\n  margin-bottom: 1rem;\n  text-align: left;\n}\n.agent-popover .agent-popover-content .agent-agent-item {\n  padding: 0.5rem;\n  cursor: pointer;\n  border-radius: 0.25rem;\n}\n.agent-popover .agent-popover-content .agent-agent-item:hover {\n  background-color: var(--mds-color-theme-background-secondary-hover);\n}\n.agent-popover .agent-tablist {\n  margin-bottom: 1rem;\n}\n.agent-popover .agent-tablist .agent-tab {\n  margin: 0 !important;\n}\n.agent-popover .agent-agent-list {\n  margin-left: 0;\n  margin-bottom: 1rem;\n}\n.agent-popover button.md-button-circle-wrapper.md-popover-close-button.md-button-simple-wrapper {\n  display: none;\n}\n\n.call-control-list-item .hover-button {\n  opacity: 0;\n  transition: opacity 0.3s;\n  pointer-events: none;\n}\n\n.call-control-list-item:hover .hover-button {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.custom-text {\n  margin: 0 !important;\n  line-height: 1 !important;\n}\n\n.call-control-consult-container {\n  margin-top: 1rem;\n  border-top: 1px solid var(--mds-color-theme-background-secondary-normal);\n  padding-top: 1rem;\n}\n\n.call-control-consult-container.no-border {\n  margin-top: 0;\n  padding-top: 0;\n  border-top: none;\n}\n\n.call-control-consult .consult-sub-text {\n  margin-top: 0.25rem !important;\n}\n\n.consult-header {\n  display: flex;\n  align-content: center;\n  gap: 0.5rem;\n}\n\n.consult-agent-name {\n  line-height: 0;\n  margin-top: -8px;\n}\n\n.consult-buttons-container {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-start;\n}\n\n.task-avatar {\n  --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-pressed);\n  --mdc-avatar-default-foreground-color: var(--mds-color-theme-indicator-stable);\n  margin-right: 0.25rem;\n}\n\n.md-button-circle-wrapper.call-control-button[disabled],\n.md-button-circle-wrapper.call-control-button.shallowDisabled,\n.md-button-circle-wrapper.call-control-button:disabled {\n  outline-color: var(--mds-color-theme-button-primary-disabled);\n  border-color: var(--mds-color-theme-button-primary-disabled);\n  opacity: 0.5;\n  cursor: not-allowed;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
 
 /***/ }),
 
@@ -1966,7 +1966,18 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importDefault(__webpack_require__(/*! react */ \"react\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./src/utils.ts\");\n__webpack_require__(/*! ./user-state.scss */ \"./src/components/UserState/user-state.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst UserStateComponent = (props) => {\n    const { idleCodes, setAgentStatus, isSettingAgentStatus, elapsedTime, lastIdleStateChangeElapsedTime, currentState, customState, } = props;\n    let selectedKey;\n    if (customState) {\n        selectedKey = `hide-${customState.developerName}`;\n    }\n    else {\n        selectedKey = currentState;\n    }\n    const items = customState\n        ? [{ name: customState.name, id: `hide-${customState.developerName}`, developerName: customState.developerName }]\n        : [];\n    for (const item of idleCodes) {\n        if (item.name === 'RONA' && item.id === currentState) {\n            selectedKey = `hide-${item.id}`;\n        }\n        if (item.name === 'RONA' && item.id !== currentState) {\n            continue; // Skip RONA unless it matches the current state\n        }\n        items.push(Object.assign(Object.assign({}, item), { id: item.name === 'RONA' ? `hide-${item.id}` : item.id }));\n    }\n    const getDropdownClass = () => {\n        if (customState) {\n            return 'custom'; // Custom state class\n        }\n        if (currentState === '0') {\n            return '';\n        }\n        for (const item of idleCodes) {\n            if (item.id === currentState && item.name === 'RONA') {\n                return 'rona';\n            }\n        }\n        return 'idle';\n    };\n    const getIconStyle = (item) => {\n        if (item.developerName) {\n            return { class: 'custom', iconName: 'busy-presence-light' };\n        }\n        switch (item.id) {\n            case '0':\n                return { class: '', iconName: 'active-presence-small-filled' };\n            case item.name === 'RONA' && item.id:\n                return { class: 'rona', iconName: 'dnd-presence-filled' };\n            default:\n                return { class: 'idle', iconName: 'recents-presence-filled' };\n        }\n    };\n    return (react_1.default.createElement(\"div\", { className: \"user-state-container\" },\n        react_1.default.createElement(react_collaboration_1.SelectNext, { label: \"\", \"aria-label\": \"user-state\", direction: \"bottom\", onSelectionChange: (key) => {\n                const cleanKey = key.startsWith('hide-') ? key.substring(5) : key;\n                setAgentStatus(cleanKey);\n            }, showBorder: true, selectedKey: selectedKey, items: items, className: `state-select ${getDropdownClass()}` }, (item) => {\n            return (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n                react_1.default.createElement(\"div\", { className: \"item-container\" },\n                    react_1.default.createElement(react_2.Icon, { name: getIconStyle(item).iconName, title: \"\", className: `state-icon ${getIconStyle(item).class}` }),\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"state-name\", tagName: 'small' }, item.name))));\n        }),\n        react_1.default.createElement(\"span\", { className: `elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}` },\n            lastIdleStateChangeElapsedTime >= 0 ? (0, utils_1.formatTime)(lastIdleStateChangeElapsedTime) + ' / ' : '',\n            (0, utils_1.formatTime)(elapsedTime)),\n        react_1.default.createElement(react_2.Icon, { className: \"select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" })));\n};\nexports[\"default\"] = UserStateComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.tsx?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importDefault(__webpack_require__(/*! react */ \"react\"));\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./src/utils.ts\");\n__webpack_require__(/*! ./user-state.scss */ \"./src/components/UserState/user-state.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst UserStateComponent = (props) => {\n    const { idleCodes, setAgentStatus, isSettingAgentStatus, elapsedTime, lastIdleStateChangeElapsedTime, currentState, customState, } = props;\n    let selectedKey;\n    if (customState) {\n        selectedKey = `hide-${customState.developerName}`;\n    }\n    else {\n        selectedKey = currentState;\n    }\n    const items = customState\n        ? [{ name: customState.name, id: `hide-${customState.developerName}`, developerName: customState.developerName }]\n        : [];\n    for (const item of idleCodes) {\n        if (item.name === 'RONA' && item.id === currentState) {\n            selectedKey = `hide-${item.id}`;\n        }\n        if (item.name === 'RONA' && item.id !== currentState) {\n            continue; // Skip RONA unless it matches the current state\n        }\n        items.push(Object.assign(Object.assign({}, item), { id: item.name === 'RONA' ? `hide-${item.id}` : item.id }));\n    }\n    const getDropdownClass = () => {\n        if (customState) {\n            return 'custom'; // Custom state class\n        }\n        if (currentState === '0') {\n            return '';\n        }\n        for (const item of idleCodes) {\n            if (item.id === currentState && item.name === 'RONA') {\n                return 'rona';\n            }\n        }\n        return 'idle';\n    };\n    const getIconStyle = (item) => {\n        if (item.developerName) {\n            return { class: 'custom', iconName: 'busy-presence-light' };\n        }\n        switch (item.id) {\n            case '0':\n                return { class: '', iconName: 'active-presence-small-filled' };\n            case item.name === 'RONA' && item.id:\n                return { class: 'rona', iconName: 'dnd-presence-filled' };\n            default:\n                return { class: 'idle', iconName: 'recents-presence-filled' };\n        }\n    };\n    return (react_1.default.createElement(\"div\", { className: \"user-state-container\" },\n        react_1.default.createElement(react_collaboration_1.SelectNext, { label: \"\", \"aria-label\": \"user-state\", direction: \"bottom\", onSelectionChange: (key) => {\n                const cleanKey = key.startsWith('hide-') ? key.substring(5) : key;\n                setAgentStatus(cleanKey);\n            }, showBorder: true, selectedKey: selectedKey, items: items, className: `state-select ${getDropdownClass()}` }, (item) => {\n            return (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n                react_1.default.createElement(\"div\", { className: \"item-container\" },\n                    react_1.default.createElement(react_2.Icon, { name: getIconStyle(item).iconName, title: \"\", className: `state-icon ${getIconStyle(item).class}` }),\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"state-name\", tagName: 'small' }, item.name))));\n        }),\n        !customState && (react_1.default.createElement(\"span\", { className: `elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}` },\n            lastIdleStateChangeElapsedTime >= 0 ? (0, utils_1.formatTime)(lastIdleStateChangeElapsedTime) + ' / ' : '',\n            (0, utils_1.formatTime)(elapsedTime))),\n        react_1.default.createElement(react_2.Icon, { className: \"select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" })));\n};\nexports[\"default\"] = UserStateComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.tsx?");
+
+/***/ }),
+
+/***/ "./src/components/task/CallControl/CallControlCustom/call-control-consult.tsx":
+/*!************************************************************************************!*\
+  !*** ./src/components/task/CallControl/CallControlCustom/call-control-consult.tsx ***!
+  \************************************************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importDefault(__webpack_require__(/*! react */ \"react\"));\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst TaskTimer_1 = __importDefault(__webpack_require__(/*! ../../TaskTimer */ \"./src/components/task/TaskTimer/index.tsx\"));\nconst CallControlConsultComponent = ({ agentName, startTimeStamp, onTransfer, endConsultCall, consultCompleted, showTransfer, }) => {\n    const timerKey = `timer-${startTimeStamp}`;\n    const handleTransfer = () => {\n        try {\n            if (onTransfer) {\n                onTransfer();\n            }\n        }\n        catch (error) {\n            console.error('Error transferring call:', error);\n        }\n    };\n    const handleEndConsult = () => {\n        try {\n            endConsultCall();\n        }\n        catch (error) {\n            console.error('Error ending consult call:', error);\n        }\n    };\n    const buttons = [\n        {\n            key: 'transfer',\n            icon: 'next-bold',\n            tooltip: 'Transfer Consult',\n            onClick: handleTransfer,\n            className: 'call-control-button',\n            disabled: !consultCompleted,\n        },\n        {\n            key: 'cancel',\n            icon: 'headset-muted-bold',\n            tooltip: 'End Consult',\n            onClick: handleEndConsult,\n            className: 'call-control-consult-button-cancel',\n        },\n    ];\n    return (react_1.default.createElement(\"div\", { className: \"call-control-consult\" },\n        react_1.default.createElement(\"div\", { className: \"consult-header\" },\n            react_1.default.createElement(react_2.Avatar, { iconName: \"handset-filled\", className: \"task-avatar\", size: 32 }),\n            react_1.default.createElement(\"div\", null,\n                react_1.default.createElement(react_collaboration_1.Text, { tagName: \"p\", type: \"body-large-bold\", className: \"consult-agent-name\" }, agentName),\n                react_1.default.createElement(react_collaboration_1.Text, { tagName: \"p\", type: \"body-secondary\", className: \"consult-sub-text\" },\n                    consultCompleted ? 'Consulting' : 'Consult requested',\n                    \"\\u00A0\\u2022\\u00A0\",\n                    react_1.default.createElement(TaskTimer_1.default, { key: timerKey, startTimeStamp: startTimeStamp })))),\n        react_1.default.createElement(\"div\", { className: \"consult-buttons consult-buttons-container\" }, buttons.map((button) => (button.key !== 'transfer' || (showTransfer && onTransfer)) && (react_1.default.createElement(react_collaboration_1.TooltipNext, { key: button.key, triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, onPress: button.onClick, disabled: button.disabled, \"data-testid\": `${button.key}-consult-btn` },\n                react_1.default.createElement(react_2.Icon, { className: `${button.className}-icon`, name: button.icon })), color: \"primary\", delay: [0, 0], placement: \"bottom-start\", type: \"description\", variant: \"small\", className: \"tooltip\" },\n            react_1.default.createElement(\"p\", null, button.tooltip)))))));\n};\nexports[\"default\"] = CallControlConsultComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/CallControlCustom/call-control-consult.tsx?");
 
 /***/ }),
 
@@ -1988,7 +1999,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst consult_transfer_list_item_1 = __importDefault(__webpack_require__(/*! ./consult-transfer-list-item */ \"./src/components/task/CallControl/CallControlCustom/consult-transfer-list-item.tsx\"));\nconst ConsultTransferPopoverComponent = ({ heading, buttonIcon, buddyAgents, onAgentSelect, }) => {\n    const [selectedTab, setSelectedTab] = (0, react_1.useState)('Agents');\n    const filteredAgents = buddyAgents;\n    return (react_1.default.createElement(\"div\", { className: \"agent-popover-content\" },\n        react_1.default.createElement(react_collaboration_1.Text, { tagName: \"h3\", className: \"agent-popover-title\", type: \"body-large-bold\", style: { margin: '0 0 0 0' } }, heading),\n        react_1.default.createElement(react_collaboration_1.TabListNext, { \"aria-label\": \"Tabs\", className: \"agent-tablist\", hasBackground: false, style: { marginTop: '0' }, onTabSelection: (key) => setSelectedTab(key) },\n            react_1.default.createElement(react_collaboration_1.TabNext, { key: \"Agents\", className: \"agent-tab\", active: selectedTab === 'Agents' }, \"Agents\")),\n        react_1.default.createElement(react_collaboration_1.ListNext, { listSize: filteredAgents.length, className: \"agent-agent-list\" }, filteredAgents.map((agent) => (react_1.default.createElement(\"div\", { key: agent.agentId, onMouseDown: (e) => e.stopPropagation(), style: { cursor: 'pointer', pointerEvents: 'auto' } },\n            react_1.default.createElement(consult_transfer_list_item_1.default, { title: agent.agentName, buttonIcon: buttonIcon, onButtonPress: () => onAgentSelect(agent.agentId) }))))),\n        filteredAgents.length === 0 && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"small\", type: \"body-secondary\" }, \"No agents found\"))));\n};\nexports[\"default\"] = ConsultTransferPopoverComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst consult_transfer_list_item_1 = __importDefault(__webpack_require__(/*! ./consult-transfer-list-item */ \"./src/components/task/CallControl/CallControlCustom/consult-transfer-list-item.tsx\"));\nconst ConsultTransferPopoverComponent = ({ heading, buttonIcon, buddyAgents, onAgentSelect, }) => {\n    const [selectedTab, setSelectedTab] = (0, react_1.useState)('Agents');\n    const filteredAgents = buddyAgents;\n    return (react_1.default.createElement(\"div\", { className: \"agent-popover-content\" },\n        react_1.default.createElement(react_collaboration_1.Text, { tagName: \"h3\", className: \"agent-popover-title\", type: \"body-large-bold\", style: { margin: '0 0 0 0' } }, heading),\n        react_1.default.createElement(react_collaboration_1.TabListNext, { \"aria-label\": \"Tabs\", className: \"agent-tablist\", hasBackground: false, style: { marginTop: '0' }, onTabSelection: (key) => setSelectedTab(key) },\n            react_1.default.createElement(react_collaboration_1.TabNext, { key: \"Agents\", className: \"agent-tab\", active: selectedTab === 'Agents' }, \"Agents\")),\n        react_1.default.createElement(react_collaboration_1.ListNext, { listSize: filteredAgents.length, className: \"agent-agent-list\" }, filteredAgents.map((agent) => (react_1.default.createElement(\"div\", { key: agent.agentId, onMouseDown: (e) => e.stopPropagation(), style: { cursor: 'pointer', pointerEvents: 'auto' } },\n            react_1.default.createElement(consult_transfer_list_item_1.default, { title: agent.agentName, buttonIcon: buttonIcon, onButtonPress: () => onAgentSelect(agent.agentId, agent.agentName) }))))),\n        filteredAgents.length === 0 && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"small\", type: \"body-secondary\" }, \"No agents found\"))));\n};\nexports[\"default\"] = ConsultTransferPopoverComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx?");
 
 /***/ }),
 
@@ -1999,7 +2010,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./call-control.styles.scss */ \"./src/components/task/CallControl/call-control.styles.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst consult_transfer_popover_1 = __importDefault(__webpack_require__(/*! ./CallControlCustom/consult-transfer-popover */ \"./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx\"));\nfunction CallControlComponent(props) {\n    const [selectedWrapupReason, setSelectedWrapupReason] = (0, react_1.useState)(null);\n    const [selectedWrapupId, setSelectedWrapupId] = (0, react_1.useState)(null);\n    const [showAgentMenu, setShowAgentMenu] = (0, react_1.useState)(false);\n    const [agentMenuType, setAgentMenuType] = (0, react_1.useState)(null);\n    const { currentTask, audioRef, toggleHold, toggleRecording, endCall, wrapupCall, wrapupCodes, wrapupRequired, isHeld, setIsHeld, isRecording, setIsRecording, buddyAgents, loadBuddyAgents, transferCall, consultCall, } = props;\n    (0, react_1.useEffect)(() => {\n        if (!currentTask || !currentTask.data || !currentTask.data.interaction)\n            return;\n        const { interaction, mediaResourceId } = currentTask.data;\n        const { media, callProcessingDetails } = interaction;\n        const isHold = media && media[mediaResourceId] && media[mediaResourceId].isHold;\n        setIsHeld(isHold);\n        if (callProcessingDetails) {\n            const { isPaused } = callProcessingDetails;\n            setIsRecording(!isPaused);\n        }\n    }, [currentTask]);\n    const handletoggleHold = () => {\n        toggleHold(!isHeld);\n        setIsHeld(!isHeld);\n    };\n    const handleWrapupCall = () => {\n        if (selectedWrapupReason && selectedWrapupId) {\n            wrapupCall(selectedWrapupReason, selectedWrapupId);\n            setSelectedWrapupReason(null);\n            setSelectedWrapupId(null);\n        }\n    };\n    const handleWrapupChange = (text, value) => {\n        setSelectedWrapupReason(text);\n        setSelectedWrapupId(value);\n    };\n    const buttons = [\n        {\n            icon: isHeld ? 'play-bold' : 'pause-bold',\n            onClick: () => handletoggleHold(),\n            tooltip: isHeld ? 'Resume the call' : 'Hold the call',\n            className: 'call-control-button',\n            disabled: false,\n        },\n        {\n            icon: 'headset-bold',\n            tooltip: 'Consult with another agent',\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Consult',\n        },\n        {\n            icon: 'next-bold',\n            tooltip: 'Transfer call',\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Transfer',\n        },\n        {\n            icon: isRecording ? 'record-paused-bold' : 'record-bold',\n            onClick: () => toggleRecording(),\n            tooltip: isRecording ? 'Pause Recording' : 'Resume Recording',\n            className: 'call-control-button',\n            disabled: false,\n        },\n        {\n            icon: 'cancel-regular',\n            onClick: endCall,\n            tooltip: 'End call',\n            className: 'call-control-button-cancel',\n            disabled: isHeld,\n        },\n    ];\n    if (!currentTask)\n        return null;\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"audio\", { ref: audioRef, id: \"remote-audio\", autoPlay: true }),\n        react_1.default.createElement(\"div\", { className: \"call-control-container\", \"data-testid\": \"call-control-container\" },\n            !wrapupRequired && (react_1.default.createElement(\"div\", { className: \"button-group\" }, buttons.map((button, index) => {\n                if (button.menuType) {\n                    return (react_1.default.createElement(react_collaboration_1.PopoverNext, { key: index, onHide: () => {\n                            setShowAgentMenu(false);\n                            setAgentMenuType(null);\n                        }, color: \"primary\", delay: [0, 0], placement: \"bottom\", showArrow: true, variant: \"medium\", interactive: true, offsetDistance: 2, className: \"agent-popover\", trigger: \"click\", closeButtonPlacement: \"top-right\", closeButtonProps: {\n                            'aria-label': 'Close popover',\n                            onPress: () => {\n                                setShowAgentMenu(false);\n                                setAgentMenuType(null);\n                            },\n                            outline: true,\n                        }, triggerComponent: react_1.default.createElement(react_collaboration_1.TooltipNext, { key: index, triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, \"aria-label\": button.tooltip, disabled: button.disabled, \"data-testid\": \"ButtonCircle\", onPress: () => {\n                                    // If popover is already visible, we close it\n                                    if (showAgentMenu && agentMenuType === button.menuType) {\n                                        setShowAgentMenu(false);\n                                        setAgentMenuType(null);\n                                    }\n                                    else {\n                                        setAgentMenuType(button.menuType);\n                                        setShowAgentMenu(true);\n                                        loadBuddyAgents();\n                                    }\n                                } },\n                                react_1.default.createElement(react_2.Icon, { className: button.className + '-icon', name: button.icon })), color: \"primary\", delay: [0, 0], placement: \"bottom-start\", type: \"description\", variant: \"small\", className: \"tooltip\" },\n                            react_1.default.createElement(\"p\", null, button.tooltip)) }, showAgentMenu && agentMenuType === button.menuType ? (react_1.default.createElement(consult_transfer_popover_1.default, { heading: button.menuType, buttonIcon: button.icon, buddyAgents: buddyAgents, onAgentSelect: (agentId) => {\n                            setShowAgentMenu(false);\n                            if (agentMenuType === 'Consult') {\n                                consultCall();\n                            }\n                            else {\n                                // Adding agent for now by default, will update once we have queues\n                                transferCall(agentId, 'agent');\n                            }\n                            setAgentMenuType(null);\n                        } })) : null));\n                }\n                return (react_1.default.createElement(react_collaboration_1.TooltipNext, { key: index, triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, onPress: button.onClick, disabled: button.disabled, \"aria-label\": button.tooltip },\n                        react_1.default.createElement(react_2.Icon, { className: button.className + '-icon', name: button.icon })), color: \"primary\", delay: [0, 0], placement: \"bottom-start\", type: \"description\", variant: \"small\", className: \"tooltip\" },\n                    react_1.default.createElement(\"p\", null, button.tooltip)));\n            }))),\n            wrapupRequired && (react_1.default.createElement(\"div\", { className: \"wrapup-group\" },\n                react_1.default.createElement(react_collaboration_1.PopoverNext, { color: \"primary\", delay: [0, 0], placement: \"bottom-start\", showArrow: true, trigger: \"click\", triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"wrapup-button\" },\n                        \"Wrap up\",\n                        react_1.default.createElement(react_2.Icon, { name: \"arrow-down-bold\" })), variant: \"medium\", interactive: true, offsetDistance: 2, className: \"wrapup-popover\" },\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-large-bold\" }, \"Wrap-up Interaction\"),\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-secondary\" }, \"Wrap-up reason\"),\n                    react_1.default.createElement(react_collaboration_1.SelectNext, { \"aria-label\": \"wrapup-reason\", className: \"wrapup-select\", onSelectionChange: (key) => {\n                            const selectedItem = wrapupCodes === null || wrapupCodes === void 0 ? void 0 : wrapupCodes.find((code) => code.id === key);\n                            handleWrapupChange(selectedItem.name, selectedItem.id);\n                        }, items: wrapupCodes, showBorder: false, placeholder: \"Select\" }, (item) => (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n                        react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-name\", tagName: 'small' }, item.name)))),\n                    react_1.default.createElement(react_2.Icon, { className: \"wrapup-select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" }),\n                    react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"submit-wrapup-button\", onPress: handleWrapupCall, disabled: selectedWrapupId && selectedWrapupReason ? false : true, \"aria-label\": \"Submit wrap-up\" }, \"Submit & Wrap up\")))))));\n}\nexports[\"default\"] = CallControlComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.tsx?");
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n    if (mod && mod.__esModule) return mod;\n    var result = {};\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n    __setModuleDefault(result, mod);\n    return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./call-control.styles.scss */ \"./src/components/task/CallControl/call-control.styles.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst consult_transfer_popover_1 = __importDefault(__webpack_require__(/*! ./CallControlCustom/consult-transfer-popover */ \"./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx\"));\nconst call_control_consult_1 = __importDefault(__webpack_require__(/*! ./CallControlCustom/call-control-consult */ \"./src/components/task/CallControl/CallControlCustom/call-control-consult.tsx\"));\nfunction CallControlComponent(props) {\n    const [selectedWrapupReason, setSelectedWrapupReason] = (0, react_1.useState)(null);\n    const [selectedWrapupId, setSelectedWrapupId] = (0, react_1.useState)(null);\n    const [showAgentMenu, setShowAgentMenu] = (0, react_1.useState)(false);\n    const [agentMenuType, setAgentMenuType] = (0, react_1.useState)(null);\n    const { currentTask, toggleHold, toggleRecording, endCall, wrapupCall, wrapupCodes, wrapupRequired, isHeld, setIsHeld, isRecording, setIsRecording, buddyAgents, loadBuddyAgents, transferCall, consultCall, endConsultCall, consultTransfer, consultInitiated, consultCompleted, consultAccepted, consultStartTimeStamp, callControlAudio, consultAgentName, setConsultAgentName, consultAgentId, setConsultAgentId, } = props;\n    (0, react_1.useEffect)(() => {\n        if (!currentTask || !currentTask.data || !currentTask.data.interaction)\n            return;\n        const { interaction, mediaResourceId } = currentTask.data;\n        const { media, callProcessingDetails } = interaction;\n        const isHold = media && media[mediaResourceId] && media[mediaResourceId].isHold;\n        setIsHeld(isHold);\n        if (callProcessingDetails) {\n            const { isPaused } = callProcessingDetails;\n            setIsRecording(!isPaused);\n        }\n    }, [currentTask]);\n    const handletoggleHold = () => {\n        toggleHold(!isHeld);\n        setIsHeld(!isHeld);\n    };\n    const handleWrapupCall = () => {\n        if (selectedWrapupReason && selectedWrapupId) {\n            wrapupCall(selectedWrapupReason, selectedWrapupId);\n            setSelectedWrapupReason(null);\n            setSelectedWrapupId(null);\n        }\n    };\n    const handleWrapupChange = (text, value) => {\n        setSelectedWrapupReason(text);\n        setSelectedWrapupId(value);\n    };\n    const handleAgentSelect = (agentId, agentName) => {\n        if (agentMenuType === 'Consult') {\n            consultCall(agentId, 'agent');\n            setConsultAgentId(agentId);\n            setConsultAgentName(agentName);\n        }\n        else {\n            transferCall(agentId, 'agent');\n        }\n    };\n    const buttons = [\n        {\n            id: 'hold',\n            icon: isHeld ? 'play-bold' : 'pause-bold',\n            onClick: () => handletoggleHold(),\n            tooltip: isHeld ? 'Resume the call' : 'Hold the call',\n            className: 'call-control-button',\n            disabled: false,\n        },\n        {\n            id: 'consult',\n            icon: 'headset-bold',\n            tooltip: 'Consult with another agent',\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Consult',\n        },\n        {\n            id: 'transfer',\n            icon: 'next-bold',\n            tooltip: 'Transfer call',\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Transfer',\n        },\n        {\n            id: 'record',\n            icon: isRecording ? 'record-paused-bold' : 'record-bold',\n            onClick: () => toggleRecording(),\n            tooltip: isRecording ? 'Pause Recording' : 'Resume Recording',\n            className: 'call-control-button',\n            disabled: false,\n        },\n        {\n            id: 'end',\n            icon: 'cancel-regular',\n            onClick: endCall,\n            tooltip: 'End call',\n            className: 'call-control-button-cancel',\n            disabled: isHeld,\n        },\n    ];\n    const filteredButtons = consultInitiated\n        ? buttons.filter((button) => !['hold', 'consult'].includes(button.id))\n        : buttons;\n    if (!currentTask)\n        return null;\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"audio\", { ref: (audioElement) => {\n                if (audioElement && callControlAudio) {\n                    audioElement.srcObject = callControlAudio;\n                }\n            }, id: \"remote-audio\", autoPlay: true }),\n        react_1.default.createElement(\"div\", { className: \"call-control-container\", \"data-testid\": \"call-control-container\" },\n            !consultAccepted && !wrapupRequired && (react_1.default.createElement(\"div\", { className: \"button-group\" }, filteredButtons.map((button, index) => {\n                if (button.menuType) {\n                    return (react_1.default.createElement(react_collaboration_1.PopoverNext, { key: index, onHide: () => {\n                            setShowAgentMenu(false);\n                            setAgentMenuType(null);\n                        }, color: \"primary\", delay: [0, 0], placement: \"bottom\", showArrow: true, variant: \"medium\", interactive: true, offsetDistance: 2, className: \"agent-popover\", trigger: \"click\", closeButtonPlacement: \"top-right\", closeButtonProps: {\n                            'aria-label': 'Close popover',\n                            onPress: () => {\n                                setShowAgentMenu(false);\n                                setAgentMenuType(null);\n                            },\n                            outline: true,\n                        }, triggerComponent: react_1.default.createElement(react_collaboration_1.TooltipNext, { key: index, triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, \"aria-label\": button.tooltip, disabled: button.disabled || consultInitiated, \"data-testid\": \"ButtonCircle\", onPress: () => {\n                                    if (showAgentMenu && agentMenuType === button.menuType) {\n                                        setShowAgentMenu(false);\n                                        setAgentMenuType(null);\n                                    }\n                                    else {\n                                        setAgentMenuType(button.menuType);\n                                        setShowAgentMenu(true);\n                                        loadBuddyAgents();\n                                    }\n                                } },\n                                react_1.default.createElement(react_2.Icon, { className: button.className + '-icon', name: button.icon })), color: \"primary\", delay: [0, 0], placement: \"bottom-start\", type: \"description\", variant: \"small\", className: \"tooltip\" },\n                            react_1.default.createElement(\"p\", null, button.tooltip)) }, showAgentMenu && agentMenuType === button.menuType ? (react_1.default.createElement(consult_transfer_popover_1.default, { heading: button.menuType, buttonIcon: button.icon, buddyAgents: buddyAgents, onAgentSelect: handleAgentSelect })) : null));\n                }\n                return (react_1.default.createElement(react_collaboration_1.TooltipNext, { key: index, triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, onPress: button.onClick, disabled: button.disabled || consultInitiated, \"aria-label\": button.tooltip },\n                        react_1.default.createElement(react_2.Icon, { className: button.className + '-icon', name: button.icon })), color: \"primary\", delay: [0, 0], placement: \"bottom-start\", type: \"description\", variant: \"small\", className: \"tooltip\" },\n                    react_1.default.createElement(\"p\", null, button.tooltip)));\n            }))),\n            wrapupRequired && (react_1.default.createElement(\"div\", { className: \"wrapup-group\" },\n                react_1.default.createElement(react_collaboration_1.PopoverNext, { color: \"primary\", delay: [0, 0], placement: \"bottom-start\", showArrow: true, trigger: \"click\", triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"wrapup-button\" },\n                        \"Wrap up\",\n                        react_1.default.createElement(react_2.Icon, { name: \"arrow-down-bold\" })), variant: \"medium\", interactive: true, offsetDistance: 2, className: \"wrapup-popover\" },\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-large-bold\" }, \"Wrap-up Interaction\"),\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-secondary\" }, \"Wrap-up reason\"),\n                    react_1.default.createElement(react_collaboration_1.SelectNext, { \"aria-label\": \"wrapup-reason\", className: \"wrapup-select\", onSelectionChange: (key) => {\n                            const selectedItem = wrapupCodes === null || wrapupCodes === void 0 ? void 0 : wrapupCodes.find((code) => code.id === key);\n                            handleWrapupChange(selectedItem.name, selectedItem.id);\n                        }, items: wrapupCodes, showBorder: false, placeholder: \"Select\" }, (item) => (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n                        react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-name\", tagName: 'small' }, item.name)))),\n                    react_1.default.createElement(react_2.Icon, { className: \"wrapup-select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" }),\n                    react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"submit-wrapup-button\", onPress: handleWrapupCall, disabled: selectedWrapupId && selectedWrapupReason ? false : true, \"aria-label\": \"Submit wrap-up\" }, \"Submit & Wrap up\")))),\n            (consultAccepted || consultInitiated) && !wrapupRequired && (react_1.default.createElement(\"div\", { className: `call-control-consult-container ${consultAccepted ? 'no-border' : ''}` },\n                react_1.default.createElement(call_control_consult_1.default, { agentName: consultAgentName, startTimeStamp: consultStartTimeStamp, endConsultCall: endConsultCall, onTransfer: () => consultTransfer(consultAgentId || currentTask.data.destAgentId, 'agent'), consultCompleted: consultCompleted, showTransfer: !consultAccepted }))))));\n}\nexports[\"default\"] = CallControlComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.tsx?");
 
 /***/ }),
 
@@ -2076,7 +2087,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_to_web_component_1 = __importDefault(__webpack_require__(/*! @r2wc/react-to-web-component */ \"../../../node_modules/@r2wc/react-to-web-component/dist/react-to-web-component.cjs\"));\nconst user_state_1 = __importDefault(__webpack_require__(/*! ./components/UserState/user-state */ \"./src/components/UserState/user-state.tsx\"));\nconst station_login_1 = __importDefault(__webpack_require__(/*! ./components/StationLogin/station-login */ \"./src/components/StationLogin/station-login.tsx\"));\nconst call_control_1 = __importDefault(__webpack_require__(/*! ./components/task/CallControl/call-control */ \"./src/components/task/CallControl/call-control.tsx\"));\nconst incoming_task_1 = __importDefault(__webpack_require__(/*! ./components/task/IncomingTask/incoming-task */ \"./src/components/task/IncomingTask/incoming-task.tsx\"));\nconst task_list_1 = __importDefault(__webpack_require__(/*! ./components/task/TaskList/task-list */ \"./src/components/task/TaskList/task-list.tsx\"));\nconst outdial_call_1 = __importDefault(__webpack_require__(/*! ./components/task/OutdialCall/outdial-call */ \"./src/components/task/OutdialCall/outdial-call.tsx\"));\nconst WebUserState = (0, react_to_web_component_1.default)(user_state_1.default, {\n    props: {\n        //  type '\"string\" | \"number\" | \"boolean\" | \"function\" | \"json\"\n        idleCodes: 'json',\n        setAgentStatus: 'function',\n        isSettingAgentStatus: 'boolean',\n        errorMessage: 'string',\n        elapsedTime: 'number',\n        lastIdleStateChangeElapsedTime: 'number',\n        currentState: 'string',\n        customState: 'json',\n        currentTheme: 'string',\n        onStateChange: 'function',\n    },\n});\nif (!customElements.get('component-cc-user-state')) {\n    customElements.define('component-cc-user-state', WebUserState);\n}\nconst WebStationLogin = (0, react_to_web_component_1.default)(station_login_1.default, {\n    props: {\n        teams: 'json',\n        loginOptions: 'json',\n        login: 'function',\n        logout: 'function',\n        loginSuccess: 'json',\n        loginFailure: 'json',\n        logoutSuccess: 'json',\n        setDeviceType: 'function',\n        setDialNumber: 'function',\n        setTeam: 'function',\n        isAgentLoggedIn: 'boolean',\n        handleContinue: 'function',\n        deviceType: 'string',\n        showMultipleLoginAlert: 'boolean',\n    },\n});\nif (!customElements.get('component-cc-station-login')) {\n    customElements.define('component-cc-station-login', WebStationLogin);\n}\nconst WebCallControl = (0, react_to_web_component_1.default)(call_control_1.default, {\n    props: {\n        currentTask: 'json',\n        audioRef: 'json',\n        wrapupCodes: 'json',\n        wrapupRequired: 'boolean',\n        toggleHold: 'function',\n        toggleRecording: 'function',\n        endCall: 'function',\n        wrapupCall: 'function',\n        isHeld: 'boolean',\n        setIsHeld: 'function',\n    },\n});\nif (!customElements.get('component-cc-call-control')) {\n    customElements.define('component-cc-call-control', WebCallControl);\n}\nconst WebIncomingTask = (0, react_to_web_component_1.default)(incoming_task_1.default, {\n    props: {\n        incomingTask: 'json',\n        isBrowser: 'boolean',\n        accept: 'function',\n        decline: 'function',\n    },\n});\nif (!customElements.get('component-cc-incoming-task')) {\n    customElements.define('component-cc-incoming-task', WebIncomingTask);\n}\nconst WebTaskList = (0, react_to_web_component_1.default)(task_list_1.default, {\n    props: {\n        currentTask: 'json',\n        taskList: 'json',\n        isBrowser: 'boolean',\n        acceptTask: 'function',\n        declineTask: 'function',\n    },\n});\nif (!customElements.get('component-cc-task-list')) {\n    customElements.define('component-cc-task-list', WebTaskList);\n}\nconst WebOutdialCallComponent = (0, react_to_web_component_1.default)(outdial_call_1.default);\nif (!customElements.get('component-cc-out-dial-call')) {\n    customElements.define('component-cc-out-dial-call', WebOutdialCallComponent);\n}\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/wc.ts?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_to_web_component_1 = __importDefault(__webpack_require__(/*! @r2wc/react-to-web-component */ \"../../../node_modules/@r2wc/react-to-web-component/dist/react-to-web-component.cjs\"));\nconst user_state_1 = __importDefault(__webpack_require__(/*! ./components/UserState/user-state */ \"./src/components/UserState/user-state.tsx\"));\nconst station_login_1 = __importDefault(__webpack_require__(/*! ./components/StationLogin/station-login */ \"./src/components/StationLogin/station-login.tsx\"));\nconst call_control_1 = __importDefault(__webpack_require__(/*! ./components/task/CallControl/call-control */ \"./src/components/task/CallControl/call-control.tsx\"));\nconst incoming_task_1 = __importDefault(__webpack_require__(/*! ./components/task/IncomingTask/incoming-task */ \"./src/components/task/IncomingTask/incoming-task.tsx\"));\nconst task_list_1 = __importDefault(__webpack_require__(/*! ./components/task/TaskList/task-list */ \"./src/components/task/TaskList/task-list.tsx\"));\nconst outdial_call_1 = __importDefault(__webpack_require__(/*! ./components/task/OutdialCall/outdial-call */ \"./src/components/task/OutdialCall/outdial-call.tsx\"));\nconst WebUserState = (0, react_to_web_component_1.default)(user_state_1.default, {\n    props: {\n        //  type '\"string\" | \"number\" | \"boolean\" | \"function\" | \"json\"\n        idleCodes: 'json',\n        setAgentStatus: 'function',\n        isSettingAgentStatus: 'boolean',\n        errorMessage: 'string',\n        elapsedTime: 'number',\n        lastIdleStateChangeElapsedTime: 'number',\n        currentState: 'string',\n        customState: 'json',\n        currentTheme: 'string',\n        onStateChange: 'function',\n    },\n});\nif (!customElements.get('component-cc-user-state')) {\n    customElements.define('component-cc-user-state', WebUserState);\n}\nconst WebStationLogin = (0, react_to_web_component_1.default)(station_login_1.default, {\n    props: {\n        teams: 'json',\n        loginOptions: 'json',\n        login: 'function',\n        logout: 'function',\n        loginSuccess: 'json',\n        loginFailure: 'json',\n        logoutSuccess: 'json',\n        setDeviceType: 'function',\n        setDialNumber: 'function',\n        setTeam: 'function',\n        isAgentLoggedIn: 'boolean',\n        handleContinue: 'function',\n        deviceType: 'string',\n        showMultipleLoginAlert: 'boolean',\n    },\n});\nif (!customElements.get('component-cc-station-login')) {\n    customElements.define('component-cc-station-login', WebStationLogin);\n}\nconst WebCallControl = (0, react_to_web_component_1.default)(call_control_1.default, {\n    props: {\n        currentTask: 'json',\n        wrapupCodes: 'json',\n        wrapupRequired: 'boolean',\n        toggleHold: 'function',\n        toggleRecording: 'function',\n        endCall: 'function',\n        wrapupCall: 'function',\n        isHeld: 'boolean',\n        setIsHeld: 'function',\n        callControlAudio: 'json',\n    },\n});\nif (!customElements.get('component-cc-call-control')) {\n    customElements.define('component-cc-call-control', WebCallControl);\n}\nconst WebIncomingTask = (0, react_to_web_component_1.default)(incoming_task_1.default, {\n    props: {\n        incomingTask: 'json',\n        isBrowser: 'boolean',\n        accept: 'function',\n        decline: 'function',\n    },\n});\nif (!customElements.get('component-cc-incoming-task')) {\n    customElements.define('component-cc-incoming-task', WebIncomingTask);\n}\nconst WebTaskList = (0, react_to_web_component_1.default)(task_list_1.default, {\n    props: {\n        currentTask: 'json',\n        taskList: 'json',\n        isBrowser: 'boolean',\n        acceptTask: 'function',\n        declineTask: 'function',\n    },\n});\nif (!customElements.get('component-cc-task-list')) {\n    customElements.define('component-cc-task-list', WebTaskList);\n}\nconst WebOutdialCallComponent = (0, react_to_web_component_1.default)(outdial_call_1.default);\nif (!customElements.get('component-cc-out-dial-call')) {\n    customElements.define('component-cc-out-dial-call', WebOutdialCallComponent);\n}\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/wc.ts?");
 
 /***/ }),
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webex/cc-components",
   "description": "Webex Contact Center UI Components Library for your custom contact center solutions",
-  "version": "1.28.0-ccwidgets.40",
+  "version": "1.28.0-ccwidgets.42",
   "main": "dist/index.js",
   "publishConfig": {
     "access": "public"
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@r2wc/react-to-web-component": "2.0.3",
-    "@webex/cc-store": "1.28.0-ccwidgets.40"
+    "@webex/cc-store": "1.28.0-ccwidgets.42"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",