@webex/cc-components 1.28.0-ccwidgets.43 → 1.28.0-ccwidgets.45

package/dist/index.js

@@ -1735,7 +1735,18 @@ 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.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");
+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  position: relative;\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  width: 1rem;\n  height: 1rem;\n  min-width: 2rem;\n  min-height: 2rem;\n  padding: 0.5rem;\n  border-radius: 50%;\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  width: 2rem;\n  height: 2rem;\n  min-width: 2rem;\n  min-height: 2rem;\n  padding: 0.5rem;\n  color: var(--mds-color-theme-inverted-text-primary-normal);\n  background-color: var(--mds-color-theme-button-cancel-normal);\n  border: 0.0625rem solid var(--mds-color-theme-background-secondary-normal);\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\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");
+
+/***/ }),
+
+/***/ "../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/task/CallControlCAD/call-control-cad.styles.scss":
+/*!********************************************************************************************************************************************************************!*\
+  !*** ../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/task/CallControlCAD/call-control-cad.styles.scss ***!
+  \********************************************************************************************************************************************************************/
+/***/ ((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  position: relative;\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  width: 1rem;\n  height: 1rem;\n  min-width: 2rem;\n  min-height: 2rem;\n  padding: 0.5rem;\n  border-radius: 50%;\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  width: 2rem;\n  height: 2rem;\n  min-width: 2rem;\n  min-height: 2rem;\n  padding: 0.5rem;\n  color: var(--mds-color-theme-inverted-text-primary-normal);\n  background-color: var(--mds-color-theme-button-cancel-normal);\n  border: 0.0625rem solid var(--mds-color-theme-background-secondary-normal);\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\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\n.cad-variables {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-top: 1.3rem;\n}\n.cad-variables .queue,\n.cad-variables .phone-number,\n.cad-variables .rona {\n  font-size: 1rem;\n  color: var(--mds-color-theme-text-primary-normal);\n}\n.cad-variables .queue strong,\n.cad-variables .phone-number strong,\n.cad-variables .rona strong {\n  font-weight: bold;\n}\n.cad-variables .queue span,\n.cad-variables .phone-number span,\n.cad-variables .rona span {\n  font-weight: 250;\n}\n\n/* On-hold chip styling */\n.on-hold {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.2rem 0.6rem;\n  border-radius: 2rem;\n  background-color: var(--mds-color-theme-common-text-warning-hover);\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n.on-hold .call-hold-filled-icon {\n  width: 1rem;\n  height: 1rem;\n  color: var(--mds-color-theme-avatar-yellow);\n}\n.on-hold .on-hold-chip-text {\n  color: var(--mds-color-theme-avatar-yellow);\n}\n\n.recording-indicator {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  color: var(--mds-color-theme-button-cancel-normal);\n  z-index: 10;\n}\n\n.dot {\n  color: var(--mds-color-theme-inverted-outline-button-normal);\n  font-size: 0.875rem;\n  display: inline;\n  filter: brightness(0.1);\n}\n\n.caller-info {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  margin-bottom: 1rem;\n}\n\n.customer-info {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.call-details {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.call-status {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  flex-wrap: nowrap;\n}\n\n.call-icon-background {\n  width: 2.2rem;\n  height: 2.2rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--mds-color-theme-background-secondary-normal);\n  border-radius: 50%;\n  margin-top: -0.25rem;\n  flex-shrink: 0;\n}\n.call-icon-background .call-icon {\n  color: var(--mds-color-theme-common-touchbar-background-green-normal);\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/CallControlCAD/call-control-cad.styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
 
 /***/ }),
 
@@ -1827,6 +1838,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./src/components/task/CallControlCAD/call-control-cad.styles.scss":
+/*!*************************************************************************!*\
+  !*** ./src/components/task/CallControlCAD/call-control-cad.styles.scss ***!
+  \*************************************************************************/
+/***/ ((__unused_webpack_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_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"../../../node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_call_control_cad_styles_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../../node_modules/sass-loader/dist/cjs.js!./call-control-cad.styles.scss */ \"../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/task/CallControlCAD/call-control-cad.styles.scss\");\n\n      \n      \n      \n      \n      \n      \n      \n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\noptions.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_call_control_cad_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_call_control_cad_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_call_control_cad_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_call_control_cad_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControlCAD/call-control-cad.styles.scss?");
+
+/***/ }),
+
 /***/ "./src/components/task/OutdialCall/outdial-call.style.scss":
 /*!*****************************************************************!*\
   !*** ./src/components/task/OutdialCall/outdial-call.style.scss ***!
@@ -2025,6 +2047,17 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 
 /***/ }),
 
+/***/ "./src/components/task/CallControlCAD/call-control-cad.tsx":
+/*!*****************************************************************!*\
+  !*** ./src/components/task/CallControlCAD/call-control-cad.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 call_control_1 = __importDefault(__webpack_require__(/*! ../CallControl/call-control */ \"./src/components/task/CallControl/call-control.tsx\"));\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\");\n__webpack_require__(/*! ./call-control-cad.styles.scss */ \"./src/components/task/CallControlCAD/call-control-cad.styles.scss\");\nconst index_1 = __importDefault(__webpack_require__(/*! ../TaskTimer/index */ \"./src/components/task/TaskTimer/index.tsx\"));\nconst CallControlCADComponent = (props) => {\n    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;\n    const { currentTask, isHeld, isRecording, holdTime, wrapupRequired } = props;\n    // Use the Web Worker-based hold timer\n    const formatTime = (time) => {\n        const minutes = Math.floor((time % 3600) / 60);\n        const seconds = time % 60;\n        return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n    };\n    if (!currentTask)\n        return null;\n    return (react_1.default.createElement(\"div\", { className: \"call-control-container\" },\n        react_1.default.createElement(\"div\", { className: \"caller-info\" },\n            react_1.default.createElement(\"div\", { className: \"call-icon-background\" },\n                react_1.default.createElement(react_2.Icon, { name: \"handset-filled\", size: 1, className: \"call-icon\" })),\n            react_1.default.createElement(\"div\", { className: \"customer-info\" },\n                react_1.default.createElement(react_collaboration_1.Text, { className: \"customer-id\", type: \"body-large-bold\", tagName: 'small' }, ((_c = (_b = (_a = currentTask === null || currentTask === void 0 ? void 0 : currentTask.data) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.callAssociatedDetails) === null || _c === void 0 ? void 0 : _c.ani) || 'No Caller ID'),\n                react_1.default.createElement(\"div\", { className: \"call-details\" },\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"call-timer\", type: \"body-secondary\", tagName: 'small' },\n                        \"Call - \",\n                        react_1.default.createElement(index_1.default, { startTimeStamp: (_e = (_d = currentTask === null || currentTask === void 0 ? void 0 : currentTask.data) === null || _d === void 0 ? void 0 : _d.interaction) === null || _e === void 0 ? void 0 : _e.startTime })),\n                    react_1.default.createElement(\"div\", { className: \"call-status\" }, !wrapupRequired && isHeld && (react_1.default.createElement(react_1.default.Fragment, null,\n                        react_1.default.createElement(\"span\", { className: \"dot\" }, \"\\u2022\"),\n                        react_1.default.createElement(\"div\", { className: \"on-hold\" },\n                            react_1.default.createElement(react_2.Icon, { name: \"call-hold-filled\", size: 1, className: \"call-hold-filled-icon\" }),\n                            react_1.default.createElement(\"span\", { className: \"on-hold-chip-text\" },\n                                \"On hold - \",\n                                formatTime(holdTime))))))))),\n        react_1.default.createElement(\"div\", { className: \"recording-indicator\" },\n            react_1.default.createElement(react_2.Icon, { name: isRecording ? 'record-active-badge-filled' : 'record-paused-badge-filled', size: 1.3 })),\n        react_1.default.createElement(call_control_1.default, Object.assign({}, props)),\n        react_1.default.createElement(\"div\", { className: \"cad-variables\" },\n            react_1.default.createElement(react_collaboration_1.Text, { className: \"queue\", type: \"body-secondary\", tagName: 'small' },\n                react_1.default.createElement(\"strong\", null, \"Queue:\"),\n                ' ',\n                react_1.default.createElement(\"span\", null, ((_h = (_g = (_f = currentTask === null || currentTask === void 0 ? void 0 : currentTask.data) === null || _f === void 0 ? void 0 : _f.interaction) === null || _g === void 0 ? void 0 : _g.callAssociatedDetails) === null || _h === void 0 ? void 0 : _h.virtualTeamName) || 'No Team Name')),\n            react_1.default.createElement(react_collaboration_1.Text, { className: \"phone-number\", type: \"body-secondary\", tagName: 'small' },\n                react_1.default.createElement(\"strong\", null, \"Phone number:\"),\n                ' ',\n                react_1.default.createElement(\"span\", null, ((_l = (_k = (_j = currentTask === null || currentTask === void 0 ? void 0 : currentTask.data) === null || _j === void 0 ? void 0 : _j.interaction) === null || _k === void 0 ? void 0 : _k.callAssociatedDetails) === null || _l === void 0 ? void 0 : _l.ani) || 'No Phone Number')),\n            react_1.default.createElement(react_collaboration_1.Text, { className: \"rona\", type: \"body-secondary\", tagName: 'small' },\n                react_1.default.createElement(\"strong\", null, \"RONA:\"),\n                ' ',\n                react_1.default.createElement(\"span\", null, ((_p = (_o = (_m = currentTask === null || currentTask === void 0 ? void 0 : currentTask.data) === null || _m === void 0 ? void 0 : _m.interaction) === null || _o === void 0 ? void 0 : _o.callAssociatedDetails) === null || _p === void 0 ? void 0 : _p.ronaTimeout) || 'No RONA')))));\n};\nexports[\"default\"] = CallControlCADComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControlCAD/call-control-cad.tsx?");
+
+/***/ }),
+
 /***/ "./src/components/task/IncomingTask/incoming-task.tsx":
 /*!************************************************************!*\
   !*** ./src/components/task/IncomingTask/incoming-task.tsx ***!
@@ -2098,7 +2131,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n\n\n
 /***/ (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 __exportStar = (this && this.__exportStar) || function(m, exports) {\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.OutdialCallComponent = exports.TaskListComponent = exports.IncomingTaskComponent = exports.CallControlComponent = exports.StationLoginComponent = exports.UserStateComponent = void 0;\nconst user_state_1 = __importDefault(__webpack_require__(/*! ./components/UserState/user-state */ \"./src/components/UserState/user-state.tsx\"));\nexports.UserStateComponent = user_state_1.default;\nconst station_login_1 = __importDefault(__webpack_require__(/*! ./components/StationLogin/station-login */ \"./src/components/StationLogin/station-login.tsx\"));\nexports.StationLoginComponent = station_login_1.default;\nconst call_control_1 = __importDefault(__webpack_require__(/*! ./components/task/CallControl/call-control */ \"./src/components/task/CallControl/call-control.tsx\"));\nexports.CallControlComponent = call_control_1.default;\nconst incoming_task_1 = __importDefault(__webpack_require__(/*! ./components/task/IncomingTask/incoming-task */ \"./src/components/task/IncomingTask/incoming-task.tsx\"));\nexports.IncomingTaskComponent = incoming_task_1.default;\nconst task_list_1 = __importDefault(__webpack_require__(/*! ./components/task/TaskList/task-list */ \"./src/components/task/TaskList/task-list.tsx\"));\nexports.TaskListComponent = task_list_1.default;\nconst outdial_call_1 = __importDefault(__webpack_require__(/*! ./components/task/OutdialCall/outdial-call */ \"./src/components/task/OutdialCall/outdial-call.tsx\"));\nexports.OutdialCallComponent = outdial_call_1.default;\n__exportStar(__webpack_require__(/*! ./components/StationLogin/station-login.types */ \"./src/components/StationLogin/station-login.types.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./components/UserState/user-state.types */ \"./src/components/UserState/user-state.types.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./components/task/task.types */ \"./src/components/task/task.types.ts\"), exports);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/index.ts?");
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.OutdialCallComponent = exports.TaskListComponent = exports.IncomingTaskComponent = exports.CallControlCADComponent = exports.CallControlComponent = exports.StationLoginComponent = exports.UserStateComponent = void 0;\nconst user_state_1 = __importDefault(__webpack_require__(/*! ./components/UserState/user-state */ \"./src/components/UserState/user-state.tsx\"));\nexports.UserStateComponent = user_state_1.default;\nconst station_login_1 = __importDefault(__webpack_require__(/*! ./components/StationLogin/station-login */ \"./src/components/StationLogin/station-login.tsx\"));\nexports.StationLoginComponent = station_login_1.default;\nconst call_control_1 = __importDefault(__webpack_require__(/*! ./components/task/CallControl/call-control */ \"./src/components/task/CallControl/call-control.tsx\"));\nexports.CallControlComponent = call_control_1.default;\nconst call_control_cad_1 = __importDefault(__webpack_require__(/*! ./components/task/CallControlCAD/call-control-cad */ \"./src/components/task/CallControlCAD/call-control-cad.tsx\"));\nexports.CallControlCADComponent = call_control_cad_1.default;\nconst incoming_task_1 = __importDefault(__webpack_require__(/*! ./components/task/IncomingTask/incoming-task */ \"./src/components/task/IncomingTask/incoming-task.tsx\"));\nexports.IncomingTaskComponent = incoming_task_1.default;\nconst task_list_1 = __importDefault(__webpack_require__(/*! ./components/task/TaskList/task-list */ \"./src/components/task/TaskList/task-list.tsx\"));\nexports.TaskListComponent = task_list_1.default;\nconst outdial_call_1 = __importDefault(__webpack_require__(/*! ./components/task/OutdialCall/outdial-call */ \"./src/components/task/OutdialCall/outdial-call.tsx\"));\nexports.OutdialCallComponent = outdial_call_1.default;\n__exportStar(__webpack_require__(/*! ./components/StationLogin/station-login.types */ \"./src/components/StationLogin/station-login.types.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./components/UserState/user-state.types */ \"./src/components/UserState/user-state.types.ts\"), exports);\n__exportStar(__webpack_require__(/*! ./components/task/task.types */ \"./src/components/task/task.types.ts\"), exports);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/index.ts?");
 
 /***/ }),
 

package/dist/types/components/task/CallControlCAD/call-control-cad.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CallControlComponentProps } from '../task.types';
+import './call-control-cad.styles.scss';
+declare const CallControlCADComponent: React.FC<CallControlComponentProps>;
+export default CallControlCADComponent;

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

@@ -221,8 +221,12 @@ export interface ControlProps {
      * @param agentName - The name of the consulting agent.
      */
     setConsultAgentName: (agentName: string) => void;
+    /**
+     * Time since the task is in held state
+     */
+    holdTime: number;
 }
-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'>;
+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' | 'holdTime'>;
 /**
  * Interface representing the properties for OutdialCall component.
  */

package/dist/types/index.d.ts

@@ -1,10 +1,11 @@
 import UserStateComponent from './components/UserState/user-state';
 import StationLoginComponent from './components/StationLogin/station-login';
 import CallControlComponent from './components/task/CallControl/call-control';
+import CallControlCADComponent from './components/task/CallControlCAD/call-control-cad';
 import IncomingTaskComponent from './components/task/IncomingTask/incoming-task';
 import TaskListComponent from './components/task/TaskList/task-list';
 import OutdialCallComponent from './components/task/OutdialCall/outdial-call';
-export { UserStateComponent, StationLoginComponent, CallControlComponent, IncomingTaskComponent, TaskListComponent, OutdialCallComponent, };
+export { UserStateComponent, StationLoginComponent, CallControlComponent, CallControlCADComponent, IncomingTaskComponent, TaskListComponent, OutdialCallComponent, };
 export * from './components/StationLogin/station-login.types';
 export * from './components/UserState/user-state.types';
 export * from './components/task/task.types';

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.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");
+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  position: relative;\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  width: 1rem;\n  height: 1rem;\n  min-width: 2rem;\n  min-height: 2rem;\n  padding: 0.5rem;\n  border-radius: 50%;\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  width: 2rem;\n  height: 2rem;\n  min-width: 2rem;\n  min-height: 2rem;\n  padding: 0.5rem;\n  color: var(--mds-color-theme-inverted-text-primary-normal);\n  background-color: var(--mds-color-theme-button-cancel-normal);\n  border: 0.0625rem solid var(--mds-color-theme-background-secondary-normal);\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\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");
 
 /***/ }),
 
@@ -2087,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        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?");
+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 call_control_2 = __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 commonPropsForCallControl = {\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};\nconst WebCallControlCADComponent = (0, react_to_web_component_1.default)(call_control_2.default, {\n    props: commonPropsForCallControl,\n});\nconst WebCallControl = (0, react_to_web_component_1.default)(call_control_1.default, {\n    props: commonPropsForCallControl,\n});\nif (!customElements.get('component-cc-call-control-cad')) {\n    customElements.define('component-cc-call-control-cad', WebCallControlCADComponent);\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.43",
+  "version": "1.28.0-ccwidgets.45",
   "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.43"
+    "@webex/cc-store": "1.28.0-ccwidgets.45"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",