@dialpad/dialtone-vue 3.17.0 → 3.18.0

package/dist/dialtone-vue.common.js

@@ -121,7 +121,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-default-list-item,.dt-default-list
 
 /***/ }),
 
-/***/ 83:
+/***/ 338:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -138,7 +138,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___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()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-item:not(.dt-list-item--static){cursor:pointer}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:hsla(var(--black-400-h),var(--black-400-s),var(--black-400-l),.15)}.dt-list-item:focus-visible{outline-color:var(--primary-color)}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-item:not(.dt-list-item--static){cursor:pointer}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:hsla(var(--black-400-h),var(--black-400-s),var(--black-400-l),.15)}.dt-list-item:focus-visible{outline-color:var(--purple-500)}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -265,7 +265,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".skeleton-placeholder{display:flex;str
 
 /***/ }),
 
-/***/ 883:
+/***/ 545:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -287,6 +287,54 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".tippy-box[data-popper-escaped] .d-too
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 994:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
+/* 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__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
+/* 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__);
+// Imports
+
+
+var ___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()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){width:8rem;height:6.2rem;letter-spacing:-.011rem;line-height:1.6rem}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn .d-btn__icon .d-svg{width:2.4rem;height:2.4rem}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--active{--button--fc:var(--muted-color-hover);--button--bgc:hsla(var(--muted-color-hsl)/15%)}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active{--button--bgc:hsla(var(--error-color-hsl)/10%);--button--fc:var(--error-color-hover)}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active:hover{--button--bgc:hsla(var(--error-color-hsl)/20%);--button--fc:var(--error-color-hover)}.dt-recipe-callbar-button--circle.d-btn--icon-only .d-btn__label{display:none}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
+/***/ 162:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
+/* 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__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
+/* 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__);
+// Imports
+
+
+var ___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()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-recipe--callbar-button-with-popover--button{position:relative;display:inline-block}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle{position:absolute;top:2rem;right:0;width:var(--su16);height:var(--su16);padding:var(--su8);border-radius:var(--su4)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle.d-btn--active{background:var(--black-025)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header{background:var(--black-900);color:var(--white)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header button{color:var(--white)}.dt-recipe--callbar-button-with-popover--button .d-tab--selected:after,.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover:after{--tab--bgc:var(--black-900)}.dt-recipe--callbar-button-with-popover--button .tab-group{display:flex;flex-direction:column;height:100%}.dt-recipe--callbar-button-with-popover--button .tab-content{flex:1 1 100%;overflow-y:auto}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 987:
@@ -558,19 +606,19 @@ var update = add("c62e22ae", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 69:
+/***/ 203:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(83);
+var content = __webpack_require__(338);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("11cd64b8", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("39437a49", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -654,19 +702,51 @@ var update = add("6f5d0b60", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 361:
+/***/ 121:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(883);
+var content = __webpack_require__(545);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("5de7b68a", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("2e953ef2", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 580:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(994);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(402)/* ["default"] */ .Z)
+var update = add("760ad33a", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 68:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(162);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(402)/* ["default"] */ .Z)
+var update = add("122349a2", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1095,6 +1175,8 @@ __webpack_require__.d(__webpack_exports__, {
   "DtPopover": () => (/* reexport */ popover),
   "DtRadio": () => (/* reexport */ radio_radio),
   "DtRadioGroup": () => (/* reexport */ radio_group),
+  "DtRecipeCallbarButton": () => (/* reexport */ callbar_button),
+  "DtRecipeCallbarButtonWithPopover": () => (/* reexport */ callbar_button_with_popover),
   "DtRecipeComboboxMultiSelect": () => (/* reexport */ combobox_multi_select),
   "DtRecipeComboboxWithPopover": () => (/* reexport */ combobox_with_popover),
   "DtRecipeContactInfo": () => (/* reexport */ contact_info),
@@ -3486,9 +3568,9 @@ function combobox_loading_listvue_type_template_id_07d9971d_render(_ctx, _cache,
 }
 ;// CONCATENATED MODULE: ./components/combobox/combobox_loading-list.vue?vue&type=template&id=07d9971d
 
-;// 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/list_item/list_item.vue?vue&type=template&id=3ad806bf
+;// 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/list_item/list_item.vue?vue&type=template&id=173961c7
 
-function list_itemvue_type_template_id_3ad806bf_render(_ctx, _cache, $props, $setup, $data, $options) {
+function list_itemvue_type_template_id_173961c7_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (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), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
     class: ['dt-list-item d-ls-none focus-visible', {
@@ -3515,7 +3597,7 @@ function list_itemvue_type_template_id_3ad806bf_render(_ctx, _cache, $props, $se
     _: 3
   }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=3ad806bf
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=173961c7
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item_constants.js
 const LIST_ITEM_TYPES = {
@@ -3768,9 +3850,9 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 });
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.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/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=style&index=0&id=3ad806bf&lang=less
-var list_itemvue_type_style_index_0_id_3ad806bf_lang_less = __webpack_require__(69);
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=3ad806bf&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.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/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=style&index=0&id=173961c7&lang=less
+var list_itemvue_type_style_index_0_id_173961c7_lang_less = __webpack_require__(203);
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=173961c7&lang=less
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue
 
@@ -3780,7 +3862,7 @@ var list_itemvue_type_style_index_0_id_3ad806bf_lang_less = __webpack_require__(
 ;
 
 
-const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_3ad806bf_render]])
+const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_173961c7_render]])
 
 /* harmony default export */ const list_item = (list_item_exports_);
 ;// CONCATENATED MODULE: ./components/list_item/index.js
@@ -15541,15 +15623,15 @@ const toggle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(togglevue_t
 /* harmony default export */ const toggle = (toggle_exports_);
 ;// CONCATENATED MODULE: ./components/toggle/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]!./components/tooltip/tooltip.vue?vue&type=template&id=30019e74
+;// 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/tooltip/tooltip.vue?vue&type=template&id=5bef87da
 
-const tooltipvue_type_template_id_30019e74_hoisted_1 = {
+const tooltipvue_type_template_id_5bef87da_hoisted_1 = {
   "data-qa": "dt-tooltip-container"
 };
-function tooltipvue_type_template_id_30019e74_render(_ctx, _cache, $props, $setup, $data, $options) {
+function tooltipvue_type_template_id_5bef87da_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_30019e74_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_5bef87da_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     ref: "anchor",
     "data-qa": "dt-tooltip-anchor",
     onFocusin: _cache[0] || (_cache[0] = function () {
@@ -15570,7 +15652,7 @@ function tooltipvue_type_template_id_30019e74_render(_ctx, _cache, $props, $setu
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "anchor")], 544), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, {
     id: $props.id,
     ref: "content",
-    show: $data.isShown && (!!$props.message.trim() || !!_ctx.$slots.default),
+    show: $data.isShown && (!!$props.message.trim() || !$options.defaultSlotIsEmpty),
     role: "tooltip",
     "aria-hidden": "false",
     "data-qa": "dt-tooltip",
@@ -15586,7 +15668,7 @@ function tooltipvue_type_template_id_30019e74_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["id", "show", "transition", "class", "onAfterLeave", "onAfterEnter"])]);
 }
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=30019e74
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=5bef87da
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
 /*
@@ -15757,6 +15839,15 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
           onChangePlacement: this.onChangePlacement
         })
       };
+    },
+
+    defaultSlotIsEmpty() {
+      var _this$$slots;
+
+      const defaultSlotContents = (_this$$slots = this.$slots) === null || _this$$slots === void 0 ? void 0 : _this$$slots.default();
+      const slotItemCount = defaultSlotContents === null || defaultSlotContents === void 0 ? void 0 : defaultSlotContents.length;
+      const slotIsEmpty = slotItemCount === 1 && (defaultSlotContents[0].type.toString() === 'Symbol(Comment)' || defaultSlotContents[0].type.toString() === 'Symbol(Fragment)' && defaultSlotContents[0].children.length === 0);
+      return !slotItemCount || slotIsEmpty;
     }
 
   },
@@ -15892,9 +15983,9 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 });
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.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/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=30019e74&lang=less
-var tooltipvue_type_style_index_0_id_30019e74_lang_less = __webpack_require__(361);
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=30019e74&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.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/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=5bef87da&lang=less
+var tooltipvue_type_style_index_0_id_5bef87da_lang_less = __webpack_require__(121);
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=5bef87da&lang=less
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue
 
@@ -15904,7 +15995,7 @@ var tooltipvue_type_style_index_0_id_30019e74_lang_less = __webpack_require__(36
 ;
 
 
-const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_30019e74_render]])
+const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_5bef87da_render]])
 
 /* harmony default export */ const tooltip = (tooltip_exports_);
 ;// CONCATENATED MODULE: ./components/tooltip/index.js
@@ -16925,27 +17016,27 @@ const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_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/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=43f74cb7
+;// 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/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=0291e6d2
 
-const combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_1 = {
+const combobox_multi_selectvue_type_template_id_0291e6d2_hoisted_1 = {
   ref: "inputSlotWrapper",
   class: "d-ps-relative"
 };
-const combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_2 = {
+const combobox_multi_selectvue_type_template_id_0291e6d2_hoisted_2 = {
   ref: "chipsWrapper",
   class: "d-ps-absolute d-mx2"
 };
-const combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_3 = {
+const combobox_multi_selectvue_type_template_id_0291e6d2_hoisted_3 = {
   ref: "header"
 };
-const combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_4 = {
+const combobox_multi_selectvue_type_template_id_0291e6d2_hoisted_4 = {
   key: 1,
   class: "d-ta-center d-py16"
 };
-const combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_5 = {
+const combobox_multi_selectvue_type_template_id_0291e6d2_hoisted_5 = {
   ref: "footer"
 };
-function combobox_multi_selectvue_type_template_id_43f74cb7_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_multi_selectvue_type_template_id_0291e6d2_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_chip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-chip");
 
   const _component_dt_input = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-input");
@@ -16968,7 +17059,7 @@ function combobox_multi_selectvue_type_template_id_43f74cb7_render(_ctx, _cache,
       let {
         onInput
       } = _ref;
-      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_0291e6d2_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_0291e6d2_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_chip, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
           ref_for: true,
           ref: "chips",
@@ -17008,19 +17099,19 @@ function combobox_multi_selectvue_type_template_id_43f74cb7_render(_ctx, _cache,
       onMousedown: _cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent"]))
     }, [!$props.loading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
       key: 0
-    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 544)]),
+    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_0291e6d2_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 544)]),
     _: 2
   }, [_ctx.$slots.header ? {
     name: "header",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_0291e6d2_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
     key: "0"
   } : undefined, _ctx.$slots.footer ? {
     name: "footer",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_0291e6d2_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
     key: "1"
   } : undefined]), 1032, ["show-list", "max-height", "popover-offset", "has-suggestion-list", "onSelect"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=43f74cb7
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=0291e6d2
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
 // The item list for default story
@@ -17120,7 +17211,9 @@ const MULTI_SELECT_SIZES = {
   DEFAULT: 'md'
 };
 ;// 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/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=script&lang=js
-/* eslint-disable max-lines */
+
+
+
 
 
 
@@ -17551,32 +17644,449 @@ const MULTI_SELECT_SIZES = {
 
 
 ;
-const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_43f74cb7_render]])
+const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_0291e6d2_render]])
 
 /* harmony default export */ const combobox_multi_select = (combobox_multi_select_exports_);
 ;// 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/list_items/contact_info/contact_info.vue?vue&type=template&id=38fc10e0
+;// 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=217368f3
+
+function callbar_buttonvue_type_template_id_217368f3_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");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_tooltip, {
+    id: $props.id,
+    offset: [0, -12]
+  }, {
+    anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+      importance: $props.circle ? 'outlined' : 'clear',
+      kind: "muted",
+      "icon-position": "top",
+      disabled: $props.disabled,
+      "aria-label": $props.ariaLabel,
+      "label-class": "d-fs11",
+      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", "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=217368f3
+
+;// 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
+
+
+
+/* harmony default export */ const callbar_buttonvue_type_script_lang_js = ({
+  name: 'DtRecipeCallbarButton',
+  components: {
+    DtButton: button_button,
+    DtTooltip: tooltip
+  },
+  inheritAttrs: true,
+  props: {
+    /**
+     * Id for the item.
+     */
+    id: {
+      type: String,
+
+      default() {
+        return utils.getUniqueString();
+      }
+
+    },
+
+    /**
+     * Determines whether the button should have active styling
+     * default is false.
+     * @values true, false
+     * @see https://dialpad.design/components/button/
+     */
+    active: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Determines whether the button should have danger styling
+     * default is false.
+     * @values true, false
+     * @see https://dialpad.design/components/button/
+     */
+    danger: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Determines whether the button should be disabled
+     * default is false.
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Whether the button is a circle or not.
+     * @values true, false
+     * @see https://dialpad.design/components/button/
+     */
+    circle: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Aria label for the button. If empty, it takes its value from the default slot.
+     */
+    ariaLabel: {
+      type: String,
+      default: null,
+      validator: label => {
+        return label || undefined.$slots.default;
+      }
+    }
+  },
+  computed: {
+    callbarButtonClass() {
+      return ['dt-recipe-callbar-button', 'd-stack4', {
+        'dt-recipe-callbar-button--circle': this.circle,
+        'd-btn--icon-only': this.circle,
+        'dt-recipe-callbar-button--active': this.active,
+        'dt-recipe-callbar-button--danger': this.danger
+      }];
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
+ 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.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/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=217368f3&lang=less
+var callbar_buttonvue_type_style_index_0_id_217368f3_lang_less = __webpack_require__(580);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=217368f3&lang=less
+
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
+
+
+
+
+;
+
+
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_217368f3_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=bd123e44
+
+const callbar_button_with_popovervue_type_template_id_bd123e44_hoisted_1 = {
+  class: "dt-recipe--callbar-button-with-popover--button"
+};
+function callbar_button_with_popovervue_type_template_id_bd123e44_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_icon_arrow_drop_up = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-arrow-drop-up");
+
+  const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
+
+  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_bd123e44_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,
+    class: "dt-recipe--callbar-button-with-popover--main-button",
+    onClick: $options.buttonClick
+  }, {
+    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")]),
+    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", "onClick"]), !$props.disabled ? ((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,
+    disabled: $props.disabled,
+    open: $data.open,
+    placement: $props.placement,
+    "initial-focus-element": $props.initialFocusElement,
+    "show-close-button": $props.showCloseButton,
+    padding: "none",
+    class: "dt-recipe--callbar-button-with-popover--popover-wrapper",
+    "dialog-class": "d-h464 d-w512 dt-recipe--callbar-button-with-popover--popover",
+    "header-class": "d-d-flex d-ai-center d-fw-normal d-px12"
+  }, _ctx.$attrs, {
+    onOpened: $options.onModalIsOpened
+  }), {
+    anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+      circle: "",
+      importance: "clear",
+      size: "lg",
+      class: "dt-recipe--callbar-button-with-popover--arrow",
+      "aria-label": $props.arrowButtonLabel,
+      active: $data.open,
+      onClick: $options.arrowClick
+    }, {
+      icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_arrow_drop_up, {
+        class: "d-svg--size-16"
+      })]),
+      _: 1
+    }, 8, ["aria-label", "active", "onClick"])]),
+    content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "content")]),
+    headerContent: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "headerContent")]),
+    footerContent: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footerContent")]),
+    _: 3
+  }, 16, ["id", "disabled", "open", "placement", "initial-focus-element", "show-close-button", "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=bd123e44
+
+;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDropUp.vue?vue&type=template&id=65ee6042
+
+
+const IconArrowDropUpvue_type_template_id_65ee6042_hoisted_1 = {
+  "aria-hidden": "true",
+  focusable: "false",
+  "aria-label": "Arrow Drop Up",
+  class: "d-svg d-svg--system d-svg__arrowDropUp",
+  viewBox: "0 0 24 24"
+}
+const IconArrowDropUpvue_type_template_id_65ee6042_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "m7 14 5-5 5 5H7Z" }, null, -1)
+const IconArrowDropUpvue_type_template_id_65ee6042_hoisted_3 = [
+  IconArrowDropUpvue_type_template_id_65ee6042_hoisted_2
+]
+
+function IconArrowDropUpvue_type_template_id_65ee6042_render(_ctx, _cache) {
+  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconArrowDropUpvue_type_template_id_65ee6042_hoisted_1, IconArrowDropUpvue_type_template_id_65ee6042_hoisted_3))
+}
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDropUp.vue?vue&type=template&id=65ee6042
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDropUp.vue
+
+const IconArrowDropUp_script = {}
+
+;
+const IconArrowDropUp_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowDropUp_script, [['render',IconArrowDropUpvue_type_template_id_65ee6042_render]])
+
+/* harmony default export */ const IconArrowDropUp = (IconArrowDropUp_exports_);
+;// 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
+
+
+
+
+
+/* harmony default export */ const callbar_button_with_popovervue_type_script_lang_js = ({
+  name: 'DtRecipeCallbarButtonWithPopover',
+  components: {
+    DtRecipeCallbarButton: callbar_button,
+    DtPopover: popover,
+    DtButton: button_button,
+    IconArrowDropUp: IconArrowDropUp
+  },
+
+  /* inheritAttrs: false is generally an option we want to set on library
+    components. This allows any attributes passed in that are not recognized
+    as props to be passed down to another element or component using v-bind:$attrs
+    more info: https://vuejs.org/v2/api/#inheritAttrs */
+  inheritAttrs: false,
+  props: {
+    /**
+     * Id for the item.
+     */
+    id: {
+      type: String,
+
+      default() {
+        return utils.getUniqueString();
+      }
+
+    },
+
+    /**
+     * Aria label for the button. If empty, it takes its value from the default slot.
+     */
+    ariaLabel: {
+      type: String,
+      default: null,
+      validator: label => {
+        return label || undefined.$slots.default;
+      }
+    },
+
+    /**
+     * Aria label for the arrow. Cannot be empty.
+     */
+    arrowButtonLabel: {
+      type: String,
+      required: true,
+      validator: label => {
+        return !!label;
+      }
+    },
+
+    /**
+     * The direction the popover displays relative to the anchor.
+     * @values 'bottom', 'bottom-start', 'bottom-end',
+     *         'right', 'right-start', 'right-end',
+     *         'left', 'left-start', 'left-end',
+     *         'top', 'top-start', 'top-end'
+     * @default 'top'
+     */
+    placement: {
+      type: String,
+      default: 'top'
+    },
+
+    /**
+     * The element that is focused when the popover is opened. This can be an
+     * HTMLElement within the popover, a string starting with '#' which will
+     * find the element by ID. 'first' which will automatically focus
+     * the first element, or 'dialog' which will focus the dialog window itself.
+     * If the dialog is modal this prop cannot be 'none'.
+     */
+    initialFocusElement: {
+      type: String,
+      default: 'first'
+    },
+
+    /**
+     * Determines visibility for close button
+     */
+    showCloseButton: {
+      type: Boolean,
+      default: true
+    },
 
-const contact_infovue_type_template_id_38fc10e0_hoisted_1 = {
+    /**
+     * Determines whether the button should be disabled
+     * default is false.
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Determines whether the button should have active styling
+     * default is false.
+     * @values true, false
+     * @see https://dialpad.design/components/button/
+     */
+    active: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Determines whether the button should have danger styling
+     * default is false.
+     * @values true, false
+     * @see https://dialpad.design/components/button/
+     */
+    danger: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * We need this declaration because of how Vue3 informs the component about a listener.
+     * Spoiler alert: it doesn't.
+     * Vue3 intends to work as a real pub-sub, meaning the publisher has not a clue of who the subscribers are.
+     * This makes it impossible from the regular declaration (emits: ['click']) to check whether
+     * we actually have a click handler or not.
+     * We're hacking it by adding an onClick prop: https://github.com/vuejs/core/issues/5220
+    */
+
+    /* eslint-disable-next-line vue/no-unused-properties */
+    onClick: {
+      type: Function,
+      default: null
+    }
+  },
+  emits: [
+  /**
+   * Emitted when the arrow is clicked
+   */
+  'arrowClick', 'click'],
+
+  data() {
+    return {
+      open: false
+    };
+  },
+
+  methods: {
+    arrowClick(ev) {
+      this.$emit('arrowClick', ev);
+      return this.open = !this.open;
+    },
+
+    buttonClick(ev) {
+      // If no listener for the click event, the button click opens the popover
+      // the same as if the arrow was clicked.
+      if (!this.$props.onClick) {
+        this.arrowClick(ev);
+      } else {
+        this.$emit('click', ev);
+      }
+    },
+
+    onModalIsOpened(isOpened) {
+      this.open = isOpened;
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=script&lang=js
+ 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.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/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./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=bd123e44&lang=less
+var callbar_button_with_popovervue_type_style_index_0_id_bd123e44_lang_less = __webpack_require__(68);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=bd123e44&lang=less
+
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue
+
+
+
+
+;
+
+
+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_bd123e44_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=466e560c
+
+const contact_infovue_type_template_id_466e560c_hoisted_1 = {
   class: "d-ps-relative",
   "data-qa": "contact-info-left"
 };
-const contact_infovue_type_template_id_38fc10e0_hoisted_2 = ["src", "alt"];
-const contact_infovue_type_template_id_38fc10e0_hoisted_3 = {
+const contact_infovue_type_template_id_466e560c_hoisted_2 = ["src", "alt"];
+const contact_infovue_type_template_id_466e560c_hoisted_3 = {
   "data-qa": "contact-info-header"
 };
-const contact_infovue_type_template_id_38fc10e0_hoisted_4 = {
+const contact_infovue_type_template_id_466e560c_hoisted_4 = {
   "data-qa": "contact-info-subtitle"
 };
-const contact_infovue_type_template_id_38fc10e0_hoisted_5 = {
+const contact_infovue_type_template_id_466e560c_hoisted_5 = {
   "data-qa": "contact-info-bottom"
 };
-const contact_infovue_type_template_id_38fc10e0_hoisted_6 = {
+const contact_infovue_type_template_id_466e560c_hoisted_6 = {
   "data-qa": "contact-info-right"
 };
-function contact_infovue_type_template_id_38fc10e0_render(_ctx, _cache, $props, $setup, $data, $options) {
+function contact_infovue_type_template_id_466e560c_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");
@@ -17587,7 +18097,7 @@ function contact_infovue_type_template_id_38fc10e0_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_38fc10e0_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_466e560c_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"
     }, {
@@ -17595,7 +18105,7 @@ function contact_infovue_type_template_id_38fc10e0_render(_ctx, _cache, $props,
         "data-qa": "dt-contact-avatar",
         src: $props.avatarSrc,
         alt: $props.avatarInitials
-      }, null, 8, contact_infovue_type_template_id_38fc10e0_hoisted_2)]),
+      }, null, 8, contact_infovue_type_template_id_466e560c_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, {
       key: 1,
@@ -17610,14 +18120,14 @@ function contact_infovue_type_template_id_38fc10e0_render(_ctx, _cache, $props,
       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_38fc10e0_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_38fc10e0_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_38fc10e0_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_38fc10e0_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])]),
+    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_466e560c_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_466e560c_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_466e560c_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_466e560c_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=38fc10e0
+;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=466e560c
 
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
 const USER_STATUS_COLOR_MODIFIERS = {
@@ -17633,6 +18143,8 @@ const USER_STATUS_COLOR_MODIFIERS = {
 
 
 
+
+
 /* harmony default export */ const contact_infovue_type_script_lang_js = ({
   name: 'DtRecipeContactInfo',
   components: {
@@ -17722,7 +18234,7 @@ 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_38fc10e0_render]])
+const contact_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_infovue_type_script_lang_js, [['render',contact_infovue_type_template_id_466e560c_render]])
 
 /* harmony default export */ const contact_info = (contact_info_exports_);
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/index.js
@@ -18371,6 +18883,8 @@ const ivr_node_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ivr_nodev
 
 
 
+
+
  // Mixins
 
  // Constants