@dialpad/dialtone-vue 3.49.0 → 3.51.0

package/dist/dialtone-vue.common.js

@@ -1263,7 +1263,6 @@ __webpack_require__.d(__webpack_exports__, {
   "TOOLTIP_HIDE_ON_CLICK_VARIANTS": () => (/* reexport */ TOOLTIP_HIDE_ON_CLICK_VARIANTS),
   "TOOLTIP_KIND_MODIFIERS": () => (/* reexport */ TOOLTIP_KIND_MODIFIERS),
   "TOOLTIP_STICKY_VALUES": () => (/* reexport */ TOOLTIP_STICKY_VALUES),
-  "USER_STATUS_COLOR_MODIFIERS": () => (/* reexport */ USER_STATUS_COLOR_MODIFIERS),
   "VALIDATION_MESSAGE_TYPES": () => (/* reexport */ VALIDATION_MESSAGE_TYPES),
   "VALID_WIDTH_SIZE": () => (/* reexport */ VALID_WIDTH_SIZE),
   "filterFormattedMessages": () => (/* reexport */ filterFormattedMessages),
@@ -1292,14 +1291,10 @@ if (typeof window !== 'undefined') {
 
 ;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=ac8c0ad8
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=b408742a
 
 const _hoisted_1 = ["id"];
 const _hoisted_2 = {
-  ref: "canvas",
-  class: "d-avatar__canvas"
-};
-const _hoisted_3 = {
   key: 0,
   class: "d-avatar__count d-zi-base1",
   "data-qa": "dt-avatar-count"
@@ -1312,12 +1307,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.avatarClasses),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)($options.initialKindStyle),
     "data-qa": "dt-avatar"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", _hoisted_2, [$options.showDefaultSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+    ref: "canvas",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$props.canvasClass, 'd-avatar__canvas'])
+  }, [$options.showDefaultSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
     key: 0
   }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.showInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
     key: 1,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-ps-absolute d-zi-base", $data.AVATAR_KIND_MODIFIERS.initials])
-  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.formattedInitials), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 512), $options.showGroup ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_3, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.formattedGroup), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.presence && !$options.showGroup ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_presence, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.formattedInitials), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2), $options.showGroup ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.formattedGroup), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.presence && !$options.showGroup ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_presence, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 1,
     presence: $props.presence,
     class: ["d-zi-base1", ['d-avatar__presence', $data.AVATAR_PRESENCE_SIZE_MODIFIERS[$props.size]]]
@@ -1325,7 +1323,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "dt-presence"
   }), null, 16, ["presence", "class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 14, _hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=ac8c0ad8
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=b408742a
 
 ;// CONCATENATED MODULE: ./common/constants.js
 /* TODO: Move and sort these in a constants directory
@@ -1555,6 +1553,25 @@ function debounce(func) {
   clearTimeout(TIMER);
   TIMER = setTimeout(func, timeout);
 }
+/**
+ * Checks if the element is out of the viewport
+ * https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/
+ * @param  {HTMLElement} element The element to check
+ * @return {Object} A set of booleans for each side of the element
+ */
+
+function isOutOfViewPort(element) {
+  const bounding = element.getBoundingClientRect();
+  const isOut = {
+    top: bounding.top < 0,
+    left: bounding.left < 0,
+    bottom: bounding.bottom > (window.innerHeight || document.documentElement.clientHeight),
+    right: bounding.right > (window.innerWidth || document.documentElement.clientWidth)
+  };
+  isOut.any = Object.values(isOut).some(val => val);
+  isOut.all = Object.values(isOut).every(val => val);
+  return isOut;
+}
 /* harmony default export */ const utils = ({
   getUniqueString,
   getRandomElement,
@@ -1566,7 +1583,8 @@ function debounce(func) {
   flushPromises,
   kebabCaseToPascalCase,
   extractVueListeners,
-  debounce
+  debounce,
+  isOutOfViewPort
 });
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/presence/presence.vue?vue&type=template&id=77957bb3
 
@@ -1757,6 +1775,14 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
       default: ''
     },
 
+    /**
+     * Set classes on the avatar canvas. Wrapper around the core avatar image.
+     */
+    canvasClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
     /**
      * Determines whether to show the presence indicator for
      * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
@@ -2006,10 +2032,10 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 });
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=style&index=0&id=ac8c0ad8&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=style&index=0&id=b408742a&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=ac8c0ad8&lang=less
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=b408742a&lang=less
 
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
 
@@ -2034,7 +2060,7 @@ const badgevue_type_template_id_741d001d_hoisted_1 = {
 const badgevue_type_template_id_741d001d_hoisted_2 = {
   class: "d-badge__label"
 };
-const badgevue_type_template_id_741d001d_hoisted_3 = {
+const _hoisted_3 = {
   key: 1,
   class: "d-badge__icon-right"
 };
@@ -2047,7 +2073,7 @@ function badgevue_type_template_id_741d001d_render(_ctx, _cache, $props, $setup,
   }, [$props.iconLeft || $props.type === 'ai' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", badgevue_type_template_id_741d001d_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
     name: $props.iconLeft || 'dialpad-ai',
     size: "200"
-  }, null, 8, ["name"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", badgevue_type_template_id_741d001d_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.text), 1)])]), $props.iconRight ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", badgevue_type_template_id_741d001d_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+  }, null, 8, ["name"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", badgevue_type_template_id_741d001d_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.text), 1)])]), $props.iconRight ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
     name: $props.iconRight,
     size: "200"
   }, null, 8, ["name"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
@@ -6495,11 +6521,11 @@ function dropdownvue_type_template_id_6b5cfae4_render(_ctx, _cache, $props, $set
 }
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=6b5cfae4
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=ed425072
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=348aec1e
 
-const popovervue_type_template_id_ed425072_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_ed425072_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_ed425072_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_348aec1e_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_348aec1e_hoisted_2 = ["id", "tabindex"];
+function popovervue_type_template_id_348aec1e_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_popover_header_footer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("popover-header-footer");
 
   const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
@@ -6513,7 +6539,7 @@ function popovervue_type_template_id_ed425072_render(_ctx, _cache, $props, $setu
     class: "d-modal--transparent",
     "aria-hidden": $props.modal && $data.isOpen ? 'false' : 'true',
     onClick: _cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent", "stop"]))
-  }, null, 8, popovervue_type_template_id_ed425072_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
+  }, null, 8, popovervue_type_template_id_348aec1e_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
     ref: "popover",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-popover', {
       'd-popover__anchor--opened': $data.isOpen
@@ -6545,7 +6571,7 @@ function popovervue_type_template_id_ed425072_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_ed425072_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    })], 40, popovervue_type_template_id_348aec1e_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
       id: $props.id,
       ref: "content",
       role: $props.role,
@@ -6608,7 +6634,7 @@ function popovervue_type_template_id_ed425072_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=ed425072
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=348aec1e
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -11779,6 +11805,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     isOpen(isOpen, isPrev) {
       if (isOpen) {
         this.initTippyInstance();
+        this.tip.show();
       } else if (!isOpen && isPrev !== isOpen) {
         this.removeEventListeners();
         this.tip.hide();
@@ -11794,16 +11821,14 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     if (this.isOpen) {
       this.initTippyInstance();
+      this.tip.show();
     } // rootMargin here must be greater than the margin of the height we are setting in calculatedMaxHeight which
     // currently is var(--space-300) (4px). If not the intersectionObserver will continually trigger in an infinite
     // loop.
     // threshold 1.0 makes this trigger every time the dialog "touches" the edge of the viewport.
 
 
-    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport, {
-      rootMargin: '-8px',
-      threshold: 1.0
-    });
+    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport);
     this.intersectionObserver.observe(this.popoverContentEl);
   },
 
@@ -11821,8 +11846,12 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
    ******************/
   methods: {
     hasIntersectedViewport(entries) {
-      const dialog = entries === null || entries === void 0 ? void 0 : entries[0];
-      this.isOutsideViewport = !(dialog !== null && dialog !== void 0 && dialog.isIntersecting);
+      var _entries$;
+
+      const dialog = entries === null || entries === void 0 ? void 0 : (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.target;
+      if (!dialog) return;
+      const isOut = isOutOfViewPort(dialog);
+      this.isOutsideViewport = isOut.bottom || isOut.top;
     },
 
     popperOptions() {
@@ -11941,6 +11970,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
         if (element.tagName.toLowerCase() === 'body') {
           element.classList.add('d-of-hidden');
+          this.tip.setProps({
+            offset: this.offset
+          });
         } else {
           element.classList.add('d-zi-popover');
         }
@@ -11958,6 +11990,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
         if (element.tagName.toLowerCase() === 'body') {
           element.classList.remove('d-of-hidden');
+          this.tip.setProps({
+            offset: this.offset
+          });
         } else {
           element.classList.remove('d-zi-popover');
         }
@@ -11978,6 +12013,8 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       if (this.contentWidth === null) {
         this.popoverContentEl.style.width = 'auto';
       }
+
+      this.addEventListeners();
     },
 
     async onLeaveTransitionComplete() {
@@ -11990,7 +12027,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       }
 
       (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
-      this.enableScrolling();
+      await this.enableScrolling();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -12000,7 +12037,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     async onEnterTransitionComplete() {
       this.focusInitialElement();
-      this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
+      await this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
 
       await this.$nextTick();
       this.$emit('opened', true, this.$refs.popover__content);
@@ -12108,21 +12145,16 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
         onClickOutside: this.onClickOutside,
         onShow: this.onShow
       });
-      this.tip.setProps({
-        zIndex: this.modal ? 650 : this.calculateAnchorZindex()
-      });
-      this.tip.show();
-      this.addEventListeners();
     }
 
   }
 });
 ;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=ed425072&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=348aec1e&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=ed425072&lang=less
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=348aec1e&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -12132,7 +12164,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 ;
 
 
-const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_ed425072_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_348aec1e_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -21088,9 +21120,9 @@ const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=5a354a3a
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=26061d5a
 
-function callbar_buttonvue_type_template_id_5a354a3a_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_buttonvue_type_template_id_26061d5a_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_dt_tooltip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-tooltip");
@@ -21105,19 +21137,19 @@ function callbar_buttonvue_type_template_id_5a354a3a_render(_ctx, _cache, $props
       "icon-position": "top",
       disabled: $props.disabled,
       "aria-label": $props.ariaLabel,
-      "label-class": "d-fs-100",
+      "label-class": $options.callbarButtonTextClass,
       width: $options.buttonWidth,
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.callbarButtonClass)
     }, {
       icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")]),
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]),
       _: 3
-    }, 8, ["importance", "disabled", "aria-label", "width", "class"])]),
+    }, 8, ["importance", "disabled", "aria-label", "label-class", "width", "class"])]),
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "tooltip")]),
     _: 3
   }, 8, ["id"]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=5a354a3a
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=26061d5a
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
 
@@ -21205,6 +21237,14 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
       default: ''
     },
 
+    /**
+     * Additional class name for the button text.
+     */
+    textClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
     /*
      * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.
      */
@@ -21216,7 +21256,7 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
   },
   computed: {
     callbarButtonClass() {
-      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-px0', {
+      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-px0', 'd-fc-black-900', {
         'dt-recipe-callbar-button--circle': this.circle,
         'd-btn--icon-only': this.circle,
         'dt-recipe-callbar-button--active': this.active,
@@ -21224,6 +21264,10 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
       }];
     },
 
+    callbarButtonTextClass() {
+      return ['d-fs-100 lg:d-d-none md:d-d-none sm:d-d-none', this.textClass];
+    },
+
     buttonWidth() {
       switch (this.buttonWidthSize) {
         case 'sm':
@@ -21241,10 +21285,10 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 });
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=5a354a3a&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=26061d5a&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=5a354a3a&lang=less
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=26061d5a&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
 
@@ -21254,17 +21298,17 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 ;
 
 
-const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_5a354a3a_render]])
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_26061d5a_render]])
 
 /* harmony default export */ const callbar_button = (callbar_button_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=fef43d00
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=20c26330
 
-const callbar_button_with_popovervue_type_template_id_fef43d00_hoisted_1 = {
+const callbar_button_with_popovervue_type_template_id_20c26330_hoisted_1 = {
   class: "d-d-flex d-ai-center"
 };
-function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_button_with_popovervue_type_template_id_20c26330_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_recipe_callbar_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-recipe-callbar-button");
 
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
@@ -21273,13 +21317,14 @@ function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _
 
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", callbar_button_with_popovervue_type_template_id_fef43d00_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_recipe_callbar_button, {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", callbar_button_with_popovervue_type_template_id_20c26330_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_recipe_callbar_button, {
     "aria-label": $props.ariaLabel,
     disabled: $props.disabled,
     active: $props.active,
     danger: $props.danger,
     "button-class": $props.buttonClass,
     "button-width-size": $props.buttonWidthSize,
+    "text-class": $props.textClass,
     class: "dt-recipe--callbar-button-with-popover--main-button",
     onClick: $options.buttonClick
   }, {
@@ -21287,7 +21332,7 @@ function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _
     tooltip: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "tooltip")]),
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]),
     _: 3
-  }, 8, ["aria-label", "disabled", "active", "danger", "button-class", "button-width-size", "onClick"]), $options.showArrowButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_popover, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, 8, ["aria-label", "disabled", "active", "danger", "button-class", "button-width-size", "text-class", "onClick"]), $options.showArrowButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_popover, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0,
     id: $props.id,
     open: $data.open,
@@ -21323,7 +21368,7 @@ function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _
     _: 3
   }, 16, ["id", "open", "placement", "initial-focus-element", "show-close-button", "dialog-class", "onOpened"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=fef43d00
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=20c26330
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=script&lang=js
 
@@ -21478,6 +21523,14 @@ function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _
       default: ''
     },
 
+    /**
+     * Additional class name for the button text.
+     */
+    textClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
     /*
      * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.
      */
@@ -21548,10 +21601,10 @@ function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _
 });
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=fef43d00&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=20c26330&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=fef43d00&lang=less
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=20c26330&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue
 
@@ -21561,31 +21614,31 @@ function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _
 ;
 
 
-const callbar_button_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_button_with_popovervue_type_script_lang_js, [['render',callbar_button_with_popovervue_type_template_id_fef43d00_render]])
+const callbar_button_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_button_with_popovervue_type_script_lang_js, [['render',callbar_button_with_popovervue_type_template_id_20c26330_render]])
 
 /* harmony default export */ const callbar_button_with_popover = (callbar_button_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=9fe40f88
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=0720678b
 
-const contact_infovue_type_template_id_9fe40f88_hoisted_1 = {
+const contact_infovue_type_template_id_0720678b_hoisted_1 = {
   class: "d-ps-relative",
   "data-qa": "contact-info-left"
 };
-const contact_infovue_type_template_id_9fe40f88_hoisted_2 = ["src", "alt"];
-const contact_infovue_type_template_id_9fe40f88_hoisted_3 = {
+const contact_infovue_type_template_id_0720678b_hoisted_2 = ["src", "alt"];
+const contact_infovue_type_template_id_0720678b_hoisted_3 = {
   "data-qa": "contact-info-header"
 };
-const contact_infovue_type_template_id_9fe40f88_hoisted_4 = {
+const contact_infovue_type_template_id_0720678b_hoisted_4 = {
   "data-qa": "contact-info-subtitle"
 };
-const contact_infovue_type_template_id_9fe40f88_hoisted_5 = {
+const contact_infovue_type_template_id_0720678b_hoisted_5 = {
   "data-qa": "contact-info-bottom"
 };
-const contact_infovue_type_template_id_9fe40f88_hoisted_6 = {
+const contact_infovue_type_template_id_0720678b_hoisted_6 = {
   "data-qa": "contact-info-right"
 };
-function contact_infovue_type_template_id_9fe40f88_render(_ctx, _cache, $props, $setup, $data, $options) {
+function contact_infovue_type_template_id_0720678b_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
 
   const _component_dt_list_item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-list-item");
@@ -21596,48 +21649,35 @@ function contact_infovue_type_template_id_9fe40f88_render(_ctx, _cache, $props,
     "element-type": "div",
     "data-qa": "contact-info"
   }, {
-    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_1, [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
+    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_0720678b_hoisted_1, [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
       key: 0,
-      size: "lg"
+      size: $props.avatarSize,
+      presence: $props.presence
     }, {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
         "data-qa": "dt-contact-avatar",
         src: $props.avatarSrc,
         alt: $props.avatarInitials
-      }, null, 8, contact_infovue_type_template_id_9fe40f88_hoisted_2)]),
+      }, null, 8, contact_infovue_type_template_id_0720678b_hoisted_2)]),
       _: 1
-    })) : $props.avatarInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
+    }, 8, ["size", "presence"])) : $props.avatarInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
       key: 1,
-      size: "lg"
+      size: $props.avatarSize,
+      presence: $props.presence
     }, {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.avatarInitials), 1)]),
       _: 1
-    })) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.showUserStatus ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
-      key: 2,
-      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-ba', 'd-bc-white', 'd-baw2', 'd-bar2', 'd-ps-absolute', 'd-bn1', 'd-rn1', 'd-w20p', 'd-h20p', $data.USER_STATUS_COLOR_MODIFIERS[$props.userStatusColor]]),
-      "data-qa": "contact-info-user-status"
-    }, "   ", 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]),
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")])]),
-    subtitle: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")])]),
-    bottom: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])]),
-    right: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])]),
+    }, 8, ["size", "presence"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]),
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_0720678b_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")])]),
+    subtitle: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_0720678b_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")])]),
+    bottom: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_0720678b_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])]),
+    right: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_0720678b_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])]),
     _: 3
   }, 8, ["id", "role"]);
 }
-;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=9fe40f88
-
-;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
-const USER_STATUS_COLOR_MODIFIERS = {
-  none: '',
-  green: 'd-bgc-green-300',
-  gold: 'd-bgc-gold-200',
-  red: 'd-bgc-red-200'
-};
-/* harmony default export */ const contact_info_constants = ({
-  USER_STATUS_COLOR_MODIFIERS
-});
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=script&lang=js
+;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=0720678b
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=script&lang=js
 
 
 
@@ -21694,25 +21734,24 @@ const USER_STATUS_COLOR_MODIFIERS = {
 
     /**
      * Status color of user from contact.
+     * The size of the avatar
+     * @values xs, sm, md, lg, xl
      */
-    userStatusColor: {
+    avatarSize: {
       type: String,
-      default: 'none',
-      validator: color => Object.keys(USER_STATUS_COLOR_MODIFIERS).includes(color)
-    }
-  },
-
-  data() {
-    return {
-      USER_STATUS_COLOR_MODIFIERS: USER_STATUS_COLOR_MODIFIERS
-    };
-  },
+      default: 'lg'
+    },
 
-  computed: {
-    showUserStatus() {
-      return this.userStatusColor !== 'none';
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     * @values null, busy, away, offline, active
+     */
+    presence: {
+      type: String,
+      default: null
     }
-
   }
 });
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=script&lang=js
@@ -21723,12 +21762,11 @@ const USER_STATUS_COLOR_MODIFIERS = {
 
 
 ;
-const contact_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_infovue_type_script_lang_js, [['render',contact_infovue_type_template_id_9fe40f88_render]])
+const contact_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_infovue_type_script_lang_js, [['render',contact_infovue_type_template_id_0720678b_render]])
 
 /* harmony default export */ const contact_info = (contact_info_exports_);
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/index.js
 
-
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/notices/top_banner_info/top_banner_info.vue?vue&type=template&id=ca4ec176
 
 const top_banner_infovue_type_template_id_ca4ec176_hoisted_1 = {
@@ -21809,19 +21847,19 @@ const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(to
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=19695402
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=61018687
 
-const ivr_nodevue_type_template_id_19695402_hoisted_1 = {
+const ivr_nodevue_type_template_id_61018687_hoisted_1 = {
   class: "d-d-flex d-ai-center"
 };
-const ivr_nodevue_type_template_id_19695402_hoisted_2 = {
+const ivr_nodevue_type_template_id_61018687_hoisted_2 = {
   class: "d-fs-200 d-fw-bold",
   "data-qa": "ivr-node-label"
 };
-const ivr_nodevue_type_template_id_19695402_hoisted_3 = {
+const ivr_nodevue_type_template_id_61018687_hoisted_3 = {
   class: "d-w164"
 };
-function ivr_nodevue_type_template_id_19695402_render(_ctx, _cache, $props, $setup, $data, $options) {
+function ivr_nodevue_type_template_id_61018687_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
@@ -21835,16 +21873,18 @@ function ivr_nodevue_type_template_id_19695402_render(_ctx, _cache, $props, $set
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.nodeListeners, true)), [$props.dtmfKey ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
     "data-qa": "dt-top-connector-dtmf",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-zi-base1 d-ai-center d-jc-center d-d-flex d-w24 d-h24 d-bar-circle d-bc-purple-600 d-bgc-purple-600 d-mbn12 d-fc-white d-fs-200", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["ivr-connector d-w24 d-h24 d-bar-circle d-mbn12 d-fc-white d-fs-200", {
       'd-mbn16': $props.isSelected
     }])
-  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.dtmfKey), 3)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
-    key: 1,
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.dtmfKey), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.$slots.connector ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "connector", {
+    key: 1
+  }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.dtmfKey && !_ctx.$slots.connector ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+    key: 2,
     "data-qa": "dt-top-connector",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-zi-base1 d-d-flex d-w8 d-h8 d-bar-circle d-bc-purple-600 d-bgc-purple-600 d-mbn4", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["ivr-connector d-w8 d-h8 d-bar-circle d-mbn4", {
       'd-mbn8': $props.isSelected
     }])
-  }, null, 2)), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_card, {
+  }, null, 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_card, {
     "content-class": "d-bt d-bc-black-300 d-px12 d-pt8 d-pb12",
     "container-class": ['d-w100p', {
       'd-ba d-bar8 d-baw4': $props.isSelected
@@ -21853,7 +21893,7 @@ function ivr_nodevue_type_template_id_19695402_render(_ctx, _cache, $props, $set
       'd-btr4': !$props.isSelected
     }]
   }, {
-    header: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_19695402_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+    header: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_61018687_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
       "aria-label": $props.nodeType,
       importance: "clear",
       "data-qa": "dt-ivr-node-icon"
@@ -21866,7 +21906,7 @@ function ivr_nodevue_type_template_id_19695402_render(_ctx, _cache, $props, $set
         }])
       }, null, 8, ["name", "class"])]),
       _: 1
-    }, 8, ["aria-label"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", ivr_nodevue_type_template_id_19695402_hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.nodeLabel), 1)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_dropdown, {
+    }, 8, ["aria-label"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", ivr_nodevue_type_template_id_61018687_hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.nodeLabel), 1)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_dropdown, {
       open: $data.isOpen,
       "onUpdate:open": _cache[0] || (_cache[0] = $event => $data.isOpen = $event),
       placement: "bottom"
@@ -21887,7 +21927,7 @@ function ivr_nodevue_type_template_id_19695402_render(_ctx, _cache, $props, $set
         let {
           close
         } = _ref;
-        return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_19695402_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "menuItems", {
+        return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_61018687_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "menuItems", {
           close: close
         })])];
       }),
@@ -21897,7 +21937,7 @@ function ivr_nodevue_type_template_id_19695402_render(_ctx, _cache, $props, $set
     _: 3
   }, 8, ["container-class", "header-class"])], 16);
 }
-;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=19695402
+;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=61018687
 
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node_constants.js
 const IVR_NODE_PROMPT_MENU = 'promptmenu';
@@ -22055,10 +22095,10 @@ const IVR_NODE_COLOR_MAPPING = {
 });
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=19695402&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=61018687&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=19695402&lang=less
+;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=61018687&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue
 
@@ -22068,7 +22108,7 @@ const IVR_NODE_COLOR_MAPPING = {
 ;
 
 
-const ivr_node_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ivr_nodevue_type_script_lang_js, [['render',ivr_nodevue_type_template_id_19695402_render]])
+const ivr_node_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ivr_nodevue_type_script_lang_js, [['render',ivr_nodevue_type_template_id_61018687_render]])
 
 /* harmony default export */ const ivr_node = (ivr_node_exports_);
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/index.js
@@ -23341,13 +23381,13 @@ const group_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(group_ro
 /* harmony default export */ const group_row = (group_row_exports_);
 ;// CONCATENATED MODULE: ./recipes/leftbar/group_row/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=69299a5d
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=d7e9fd4e
 
-const contact_rowvue_type_template_id_69299a5d_hoisted_1 = ["src", "alt"];
-const contact_rowvue_type_template_id_69299a5d_hoisted_2 = {
+const contact_rowvue_type_template_id_d7e9fd4e_hoisted_1 = ["src", "alt"];
+const contact_rowvue_type_template_id_d7e9fd4e_hoisted_2 = {
   class: "dt-leftbar-row__status"
 };
-function contact_rowvue_type_template_id_69299a5d_render(_ctx, _cache, $props, $setup, $data, $options) {
+function contact_rowvue_type_template_id_d7e9fd4e_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
@@ -23361,7 +23401,7 @@ function contact_rowvue_type_template_id_69299a5d_render(_ctx, _cache, $props, $
     description: `${$props.name} ${$props.presenceText} ${$props.userStatus}`,
     "has-unreads": $props.hasUnreads,
     selected: $props.selected,
-    "has-call-button": true,
+    "has-call-button": $props.hasCallButton,
     muted: $props.muted,
     "is-typing": $props.isTyping,
     "call-button-tooltip": $props.callButtonTooltip,
@@ -23379,7 +23419,7 @@ function contact_rowvue_type_template_id_69299a5d_render(_ctx, _cache, $props, $
         "data-qa": "dt-avatar-image",
         src: $props.avatarSrc,
         alt: $props.name
-      }, null, 8, contact_rowvue_type_template_id_69299a5d_hoisted_1)) : $props.noInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_icon, {
+      }, null, 8, contact_rowvue_type_template_id_d7e9fd4e_hoisted_1)) : $props.noInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_icon, {
         key: 1,
         name: "user",
         size: "200"
@@ -23395,7 +23435,7 @@ function contact_rowvue_type_template_id_69299a5d_render(_ctx, _cache, $props, $
     }, {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.name), 1)]),
       _: 1
-    }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_rowvue_type_template_id_69299a5d_hoisted_2, [$props.presenceText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+    }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_rowvue_type_template_id_d7e9fd4e_hoisted_2, [$props.presenceText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
       key: 0,
       "data-qa": "dt-leftbar-row-presence-text",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['dt-leftbar-row__meta-context', $options.presenceColorClass])
@@ -23410,9 +23450,9 @@ function contact_rowvue_type_template_id_69299a5d_render(_ctx, _cache, $props, $
       _: 1
     })) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]),
     _: 1
-  }, 16, ["unread-count", "description", "has-unreads", "selected", "muted", "is-typing", "call-button-tooltip", "unread-count-tooltip"]);
+  }, 16, ["unread-count", "description", "has-unreads", "selected", "has-call-button", "muted", "is-typing", "call-button-tooltip", "unread-count-tooltip"]);
 }
-;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=69299a5d
+;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=d7e9fd4e
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/contact_row/contact_row.vue?vue&type=script&lang=js
 
@@ -23531,6 +23571,14 @@ function contact_rowvue_type_template_id_69299a5d_render(_ctx, _cache, $props, $
       default: false
     },
 
+    /**
+     * Whether the contact row should display a call button when hovered.
+     */
+    hasCallButton: {
+      type: Boolean,
+      default: true
+    },
+
     /**
      * Text shown when the call button is hovered.
      */
@@ -23592,7 +23640,7 @@ function contact_rowvue_type_template_id_69299a5d_render(_ctx, _cache, $props, $
 
 
 ;
-const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_rowvue_type_script_lang_js, [['render',contact_rowvue_type_template_id_69299a5d_render]])
+const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_rowvue_type_script_lang_js, [['render',contact_rowvue_type_template_id_d7e9fd4e_render]])
 
 /* harmony default export */ const contact_row = (contact_row_exports_);
 ;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/index.js