@dialpad/dialtone-vue 2.22.2 → 2.24.0

package/dist/dialtone-vue.common.js

@@ -23,6 +23,54 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".enter-active,.leave-active{overflow:h
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 804:
+/***/ ((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_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(481);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(400);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".d-context-menu-list{width:24rem}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
+/***/ 229:
+/***/ ((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_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(481);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(400);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-separator{height:1px;list-style:none}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 771:
@@ -90,7 +138,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".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);cursor:pointer}.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(--primary-color)}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -239,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___);
 
 
+/***/ }),
+
+/***/ 41:
+/***/ ((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_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(481);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(400);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_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)}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
+/***/ 489:
+/***/ ((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_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(481);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(400);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_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)}.d-tab--selected:after,.d-tab--selected:hover:after{--tab--bgc:var(--black-900)}.tab-group{display:flex;flex-direction:column;height:100%}.tab-content{flex:1 1 100%;overflow-y:auto}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 3:
@@ -402,6 +498,38 @@ var update = add("056a7866", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 782:
+/***/ ((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__(804);
+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("a8a3178a", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 209:
+/***/ ((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__(229);
+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("e3db0e0a", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 245:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -546,6 +674,38 @@ var update = add("0a135999", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 759:
+/***/ ((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__(41);
+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("326eb2ad", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 545:
+/***/ ((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__(489);
+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("6de67338", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 9:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -935,6 +1095,8 @@ __webpack_require__.d(__webpack_exports__, {
   "DtCollapsible": () => (/* reexport */ collapsible),
   "DtCombobox": () => (/* reexport */ combobox),
   "DtDropdown": () => (/* reexport */ dropdown),
+  "DtDropdownList": () => (/* reexport */ dropdown_list),
+  "DtDropdownSeparator": () => (/* reexport */ dropdown_separator),
   "DtGroupableInputMixin": () => (/* reexport */ GroupableMixin),
   "DtInput": () => (/* reexport */ input_input),
   "DtInputGroup": () => (/* reexport */ input_group_input_group),
@@ -952,6 +1114,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),
@@ -3482,12 +3646,13 @@ var combobox_loading_listvue_type_template_id_07d9971d_render = function () {var
 var combobox_loading_listvue_type_template_id_07d9971d_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/list_item/list_item.vue?vue&type=template&id=4c19058e&
-var list_itemvue_type_template_id_4c19058e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none focus-visible', {
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/list_item/list_item.vue?vue&type=template&id=8dfbba78&
+var list_itemvue_type_template_id_8dfbba78_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none focus-visible', {
     'dt-list-item--focusable': _vm.isFocusable,
     'dt-list-item--highlighted': _vm.isHighlighted,
+    'dt-list-item--static': !_vm.isHoverable,
   }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted}},_vm.listItemListeners),[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)}):_vm._t("default")],2)}
-var list_itemvue_type_template_id_4c19058e_staticRenderFns = []
+var list_itemvue_type_template_id_8dfbba78_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item_constants.js
@@ -3613,6 +3778,7 @@ var default_list_item_component = normalizeComponent(
 //
 //
 //
+//
 
 
 
@@ -3737,13 +3903,6 @@ var default_list_item_component = normalizeComponent(
 
           this.$emit('keydown', event);
         },
-        mousedown: event => {
-          if (!this.isFocusable) {
-            event.preventDefault();
-          }
-
-          this.$emit('mousedown', event);
-        },
         mousemove: event => {
           this.onMouseHover(event);
           this.$emit('mousemove', event);
@@ -3812,8 +3971,8 @@ var list_itemvue_type_style_index_0_lang_less_ = __webpack_require__(502);
 
 var list_item_component = normalizeComponent(
   list_item_list_itemvue_type_script_lang_js_,
-  list_itemvue_type_template_id_4c19058e_render,
-  list_itemvue_type_template_id_4c19058e_staticRenderFns,
+  list_itemvue_type_template_id_8dfbba78_render,
+  list_itemvue_type_template_id_8dfbba78_staticRenderFns,
   false,
   null,
   null,
@@ -5602,17 +5761,17 @@ var collapsible_component = normalizeComponent(
 /* harmony default export */ const collapsible = (collapsible_component.exports);
 ;// CONCATENATED MODULE: ./components/collapsible/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=template&id=230c0da9&
-var dropdownvue_type_template_id_230c0da9_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.openedWithKeyboard ? 'first' : 'dialog',"fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":true},on:{"opened":_vm.updateInitialHighlightIndex,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnterKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpaceKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKeyPress')},function($event){return _vm.onKeyValidation($event, 'onKeyPress')}]},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=template&id=02543726&
+var dropdownvue_type_template_id_02543726_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.openedWithKeyboard ? 'first' : 'dialog',"fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":true,"open-on-context":_vm.openOnContext},on:{"opened":_vm.updateInitialHighlightIndex,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnterKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpaceKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKeyPress')},function($event){return _vm.onKeyValidation($event, 'onKeyPress')}]},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
 var attrs = ref.attrs;
 return [_vm._t("anchor",null,null,attrs)]}},{key:"content",fn:function(ref){
 var close = ref.close;
-return [_c('ul',{ref:"listWrapper",class:['d-ps-relative', 'd-px0', _vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],attrs:{"id":_vm.listId,"data-qa":"dt-dropdown-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[_vm._t("list",null,{"close":close})],2)]}}],null,true)},_vm.$listeners))}
-var dropdownvue_type_template_id_230c0da9_staticRenderFns = []
+return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,"data-qa":"dt-dropdown-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[_vm._t("list",null,{"close":close})],2)]}}],null,true)},_vm.$listeners))}
+var dropdownvue_type_template_id_02543726_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=27ddd8bc&
-var popovervue_type_template_id_27ddd8bc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--modal-opened': _vm.modal && _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor"},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"wheel":function (e) { return (_vm.isOpen && _vm.modal) && e.preventDefault(); },"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=d85b2e98&
+var popovervue_type_template_id_d85b2e98_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--modal-opened': _vm.modal && _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":function($event){$event.preventDefault();return _vm.onContext.apply(null, arguments)},"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"wheel":function (e) { return (_vm.isOpen && _vm.modal) && e.preventDefault(); },"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
@@ -5623,7 +5782,7 @@ var popovervue_type_template_id_27ddd8bc_render = function () {var _vm=this;var
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_27ddd8bc_staticRenderFns = []
+var popovervue_type_template_id_d85b2e98_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -10556,6 +10715,8 @@ var popover_header_footer_component = normalizeComponent(
 //
 //
 //
+//
+//
 
 /* eslint-disable max-lines */
 
@@ -10588,6 +10749,15 @@ var popover_header_footer_component = normalizeComponent(
       default: null
     },
 
+    /**
+     * Opens the popover on right click (context menu). If you set this value to `true`,
+     * the default trigger behavior will be disabled.
+     */
+    openOnContext: {
+      type: Boolean,
+      default: false
+    },
+
     /**
      * Element type (tag name) of the root element of the component.
      */
@@ -11018,11 +11188,38 @@ var popover_header_footer_component = normalizeComponent(
     defaultToggleOpen(e) {
       var _this$open, _this$anchorEl;
 
-      // Only use default toggle behaviour if the user has not set the open prop.
+      if (this.openOnContext) {
+        return;
+      } // Only use default toggle behaviour if the user has not set the open prop.
       // Check that the anchor element specifically was clicked.
+
+
       (_this$open = this.open) !== null && _this$open !== void 0 ? _this$open : this.anchorEl.contains(e.target) && !((_this$anchorEl = this.anchorEl) !== null && _this$anchorEl !== void 0 && _this$anchorEl.disabled) && this.toggleOpen();
     },
 
+    onContext(event) {
+      var _this$tip3;
+
+      if (!this.openOnContext) {
+        return;
+      }
+
+      (_this$tip3 = this.tip) === null || _this$tip3 === void 0 ? void 0 : _this$tip3.setProps({
+        placement: 'right-start'
+      });
+      this.tip.setProps({
+        getReferenceClientRect: () => ({
+          width: 0,
+          height: 0,
+          top: event.clientY,
+          bottom: event.clientY,
+          left: event.clientX,
+          right: event.clientX
+        })
+      });
+      this.toggleOpen();
+    },
+
     toggleOpen() {
       this.isOpen = !this.isOpen;
     },
@@ -11068,7 +11265,7 @@ var popover_header_footer_component = normalizeComponent(
     },
 
     async onLeaveTransitionComplete() {
-      var _this$tip3;
+      var _this$tip4;
 
       if (this.modal) {
         this.focusFirstElement(this.$refs.anchor); // await next tick in case the user wants to change focus themselves.
@@ -11076,7 +11273,7 @@ var popover_header_footer_component = normalizeComponent(
         await this.$nextTick();
       }
 
-      (_this$tip3 = this.tip) === null || _this$tip3 === void 0 ? void 0 : _this$tip3.unmount();
+      (_this$tip4 = this.tip) === null || _this$tip4 === void 0 ? void 0 : _this$tip4.unmount();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -11191,8 +11388,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(230);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_27ddd8bc_render,
-  popovervue_type_template_id_27ddd8bc_staticRenderFns,
+  popovervue_type_template_id_d85b2e98_render,
+  popovervue_type_template_id_d85b2e98_staticRenderFns,
   false,
   null,
   null,
@@ -11263,6 +11460,7 @@ const DROPDOWN_PADDING_CLASSES = {
 //
 //
 //
+//
 
 
 
@@ -11295,6 +11493,15 @@ const DROPDOWN_PADDING_CLASSES = {
       default: null
     },
 
+    /**
+     * Opens the dropdown on right click (context menu). If you set this value to `true`,
+     * the default trigger behavior will be disabled.
+     */
+    openOnContext: {
+      type: Boolean,
+      default: false
+    },
+
     /**
      * Vertical padding size around the list element.
      */
@@ -11450,6 +11657,12 @@ const DROPDOWN_PADDING_CLASSES = {
 
     isArrowKeyNav() {
       return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;
+    },
+
+    listClasses() {
+      return ['d-ps-relative', 'd-px0', DROPDOWN_PADDING_CLASSES[this.padding], this.listClass, {
+        'd-context-menu-list': this.openOnContext
+      }];
     }
 
   },
@@ -11457,7 +11670,7 @@ const DROPDOWN_PADDING_CLASSES = {
     onMouseHighlight(e) {
       const liElement = e.target.closest('li');
 
-      if (liElement && this.highlightId !== liElement.id) {
+      if (liElement && liElement.role && this.highlightId !== liElement.id) {
         this.setHighlightId(liElement.id);
         liElement.focus();
       }
@@ -11552,7 +11765,7 @@ const DROPDOWN_PADDING_CLASSES = {
     },
 
     onKeyValidation(e, eventHandler) {
-      if (this.open !== null) {
+      if (this.open !== null && !this.openOnContext) {
         return;
       }
 
@@ -11563,18 +11776,23 @@ const DROPDOWN_PADDING_CLASSES = {
 });
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=script&lang=js&
  /* harmony default export */ const dropdown_dropdownvue_type_script_lang_js_ = (dropdownvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=style&index=0&lang=less&
+var dropdownvue_type_style_index_0_lang_less_ = __webpack_require__(782);
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=style&index=0&lang=less&
+
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue
 
 
 
+;
 
 
 /* normalize component */
-;
+
 var dropdown_component = normalizeComponent(
   dropdown_dropdownvue_type_script_lang_js_,
-  dropdownvue_type_template_id_230c0da9_render,
-  dropdownvue_type_template_id_230c0da9_staticRenderFns,
+  dropdownvue_type_template_id_02543726_render,
+  dropdownvue_type_template_id_02543726_staticRenderFns,
   false,
   null,
   null,
@@ -11583,77 +11801,192 @@ var dropdown_component = normalizeComponent(
 )
 
 /* harmony default export */ const dropdown = (dropdown_component.exports);
-;// CONCATENATED MODULE: ./components/dropdown/index.js
-
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/input/input.vue?vue&type=template&id=fc19976e&
-var inputvue_type_template_id_fc19976e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"base-input",attrs:{"data-qa":"dt-input"}},[_c('label',{staticClass:"base-input__label",attrs:{"aria-details":_vm.$slots.description || _vm.description ? _vm.descriptionKey : undefined,"data-qa":"dt-input-label-wrapper"}},[_vm._t("labelSlot",function(){return [(_vm.label)?_c('div',{ref:"label",class:[
-          'base-input__label-text',
-          'd-label',
-          _vm.labelSizeClasses[_vm.size] ],attrs:{"data-qa":"dt-input-label"}},[_vm._v(" "+_vm._s(_vm.label)+" ")]):_vm._e()]}),(_vm.$slots.description || _vm.description || _vm.shouldValidateLength)?_c('div',{ref:"description",class:[
-        'base-input__description',
-        'd-description',
-        'd-fd-column',
-        _vm.descriptionSizeClasses[_vm.size] ],attrs:{"id":_vm.descriptionKey,"data-qa":"dt-input-description"}},[(_vm.$slots.description || _vm.description)?_c('div',[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),(_vm.shouldValidateLength)?_c('div',{class:[
-          'd-mb2' ],attrs:{"data-qa":"dt-input-length-description"}},[_vm._v(" "+_vm._s(_vm.validationProps.length.description)+" ")]):_vm._e()]):_vm._e(),_c('div',{staticClass:"d-input__wrapper"},[(_vm.$slots.leftIcon)?_c('span',{class:_vm.inputIconClasses('left'),attrs:{"data-qa":"dt-input-left-icon-wrapper"},on:{"focusout":_vm.onBlur}},[_vm._t("leftIcon")],2):_vm._e(),(_vm.isTextarea)?_c('textarea',_vm._g(_vm._b({ref:"input",class:_vm.inputClasses(),attrs:{"name":_vm.name,"disabled":_vm.disabled,"maxlength":_vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null,"data-qa":"dt-input-input"},domProps:{"value":_vm.value}},'textarea',_vm.$attrs,false),_vm.inputListeners)):_c('input',_vm._g(_vm._b({ref:"input",class:_vm.inputClasses(),attrs:{"name":_vm.name,"type":_vm.type,"disabled":_vm.disabled,"maxlength":_vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null,"data-qa":"dt-input-input"},domProps:{"value":_vm.value}},'input',_vm.$attrs,false),_vm.inputListeners)),(_vm.$slots.rightIcon)?_c('span',{class:_vm.inputIconClasses('right'),attrs:{"data-qa":"dt-input-right-icon-wrapper"},on:{"focusout":_vm.onBlur}},[_vm._t("rightIcon")],2):_vm._e()])],2),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.validationMessages,"show-messages":_vm.showMessages,"data-qa":"dt-input-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1)}
-var inputvue_type_template_id_fc19976e_staticRenderFns = []
-
-
-;// CONCATENATED MODULE: ./components/input/input_constants.js
-// Valid input types, any other input types (for example: 'radio' or 'checkbox') should
-// use the respective base vue components (radio.vue and checkout.vue).
-const INPUT_TYPES = {
-  TEXT: 'text',
-  TEXTAREA: 'textarea',
-  PASSWORD: 'password',
-  EMAIL: 'email',
-  NUMBER: 'number'
-};
-const INPUT_SIZES = {
-  EXTRA_SMALL: 'xs',
-  SMALL: 'sm',
-  DEFAULT: 'md',
-  LARGE: 'lg',
-  EXTRA_LARGE: 'xl'
-};
-/* harmony default export */ const input_constants = ({
-  INPUT_TYPES,
-  INPUT_SIZES
-});
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/validation_messages/validation_messages.vue?vue&type=template&id=e7311664&
-var validation_messagesvue_type_template_id_e7311664_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.showMessages && !_vm.isFilteredValidationMessagesEmpty)?_c('div',{staticClass:"base-input__messages d-d-flex d-fd-column",attrs:{"data-qa":"validation-messages-container"}},_vm._l((_vm.filteredValidationMessages),function(ref,index){
-var message = ref.message;
-var type = ref.type;
-return _c('div',{key:_vm.getMessageKey(type, index),class:[
-      'base-input__message',
-      'd-validation-message',
-      _vm.messageTypeClass(type) ],attrs:{"role":"status","aria-live":"polite","data-qa":"validation-message"}},[_c('p',{domProps:{"innerHTML":_vm._s(message)}})])}),0):_vm._e()}
-var validation_messagesvue_type_template_id_e7311664_staticRenderFns = []
-
-
-;// CONCATENATED MODULE: ./common/validators.js
-
-function validationMessageValidator(rawMessages) {
-  if (!rawMessages) {
-    return true;
-  }
-
-  return rawMessages.every(message => {
-    if (typeof message === 'string') {
-      return true;
-    }
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown_list.vue?vue&type=template&id=294ae37b&scoped=true&
+var dropdown_listvue_type_template_id_294ae37b_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',[(_vm.heading)?_c('div',{staticClass:"dt-dropdown-list--header d-fs12 d-fc-black-400 d-fw-bold d-lh4 d-py4 d-px12 d-d-flex d-ai-center"},[_c('span',[_vm._v(_vm._s(_vm.heading))])]):_vm._e(),_c('ul',{class:['d-ps-relative', 'd-px0', _vm.listClass],attrs:{"data-qa":"dt-dropdown-list-wrapper"}},[_vm._t("default")],2)])}
+var dropdown_listvue_type_template_id_294ae37b_scoped_true_staticRenderFns = []
 
-    if (typeof message === 'object') {
-      return Object.values(VALIDATION_MESSAGE_TYPES).includes(message === null || message === void 0 ? void 0 : message.type);
-    }
 
-    return false;
-  });
-}
-/* harmony default export */ const validators = ({
-  validationMessageValidator
-});
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/validation_messages/validation_messages.vue?vue&type=script&lang=js&
-//
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown_list.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+/* harmony default export */ const dropdown_listvue_type_script_lang_js_ = ({
+  name: 'DtDropdownList',
+  props: {
+    /**
+     * List's heading.
+     */
+    heading: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Additional class for the wrapper list element.
+     */
+    listClass: {
+      type: [String, Array, Object],
+      default: ''
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/dropdown/dropdown_list.vue?vue&type=script&lang=js&
+ /* harmony default export */ const dropdown_dropdown_listvue_type_script_lang_js_ = (dropdown_listvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/dropdown/dropdown_list.vue
+
+
+
+
+
+/* normalize component */
+;
+var dropdown_list_component = normalizeComponent(
+  dropdown_dropdown_listvue_type_script_lang_js_,
+  dropdown_listvue_type_template_id_294ae37b_scoped_true_render,
+  dropdown_listvue_type_template_id_294ae37b_scoped_true_staticRenderFns,
+  false,
+  null,
+  "294ae37b",
+  null
+  
+)
+
+/* harmony default export */ const dropdown_list = (dropdown_list_component.exports);
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown_separator.vue?vue&type=template&id=6a948a17&
+var dropdown_separatorvue_type_template_id_6a948a17_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{staticClass:"dt-list-separator d-bgc-black-075 d-my8",attrs:{"aria-hidden":"true"}})}
+var dropdown_separatorvue_type_template_id_6a948a17_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown_separator.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+/* harmony default export */ const dropdown_separatorvue_type_script_lang_js_ = ({
+  name: 'DtDropdownSeparator'
+});
+;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue?vue&type=script&lang=js&
+ /* harmony default export */ const dropdown_dropdown_separatorvue_type_script_lang_js_ = (dropdown_separatorvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown_separator.vue?vue&type=style&index=0&lang=less&
+var dropdown_separatorvue_type_style_index_0_lang_less_ = __webpack_require__(209);
+;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue?vue&type=style&index=0&lang=less&
+
+;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var dropdown_separator_component = normalizeComponent(
+  dropdown_dropdown_separatorvue_type_script_lang_js_,
+  dropdown_separatorvue_type_template_id_6a948a17_render,
+  dropdown_separatorvue_type_template_id_6a948a17_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const dropdown_separator = (dropdown_separator_component.exports);
+;// CONCATENATED MODULE: ./components/dropdown/index.js
+
+
+
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/input/input.vue?vue&type=template&id=fc19976e&
+var inputvue_type_template_id_fc19976e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"base-input",attrs:{"data-qa":"dt-input"}},[_c('label',{staticClass:"base-input__label",attrs:{"aria-details":_vm.$slots.description || _vm.description ? _vm.descriptionKey : undefined,"data-qa":"dt-input-label-wrapper"}},[_vm._t("labelSlot",function(){return [(_vm.label)?_c('div',{ref:"label",class:[
+          'base-input__label-text',
+          'd-label',
+          _vm.labelSizeClasses[_vm.size] ],attrs:{"data-qa":"dt-input-label"}},[_vm._v(" "+_vm._s(_vm.label)+" ")]):_vm._e()]}),(_vm.$slots.description || _vm.description || _vm.shouldValidateLength)?_c('div',{ref:"description",class:[
+        'base-input__description',
+        'd-description',
+        'd-fd-column',
+        _vm.descriptionSizeClasses[_vm.size] ],attrs:{"id":_vm.descriptionKey,"data-qa":"dt-input-description"}},[(_vm.$slots.description || _vm.description)?_c('div',[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),(_vm.shouldValidateLength)?_c('div',{class:[
+          'd-mb2' ],attrs:{"data-qa":"dt-input-length-description"}},[_vm._v(" "+_vm._s(_vm.validationProps.length.description)+" ")]):_vm._e()]):_vm._e(),_c('div',{staticClass:"d-input__wrapper"},[(_vm.$slots.leftIcon)?_c('span',{class:_vm.inputIconClasses('left'),attrs:{"data-qa":"dt-input-left-icon-wrapper"},on:{"focusout":_vm.onBlur}},[_vm._t("leftIcon")],2):_vm._e(),(_vm.isTextarea)?_c('textarea',_vm._g(_vm._b({ref:"input",class:_vm.inputClasses(),attrs:{"name":_vm.name,"disabled":_vm.disabled,"maxlength":_vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null,"data-qa":"dt-input-input"},domProps:{"value":_vm.value}},'textarea',_vm.$attrs,false),_vm.inputListeners)):_c('input',_vm._g(_vm._b({ref:"input",class:_vm.inputClasses(),attrs:{"name":_vm.name,"type":_vm.type,"disabled":_vm.disabled,"maxlength":_vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null,"data-qa":"dt-input-input"},domProps:{"value":_vm.value}},'input',_vm.$attrs,false),_vm.inputListeners)),(_vm.$slots.rightIcon)?_c('span',{class:_vm.inputIconClasses('right'),attrs:{"data-qa":"dt-input-right-icon-wrapper"},on:{"focusout":_vm.onBlur}},[_vm._t("rightIcon")],2):_vm._e()])],2),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.validationMessages,"show-messages":_vm.showMessages,"data-qa":"dt-input-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1)}
+var inputvue_type_template_id_fc19976e_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./components/input/input_constants.js
+// Valid input types, any other input types (for example: 'radio' or 'checkbox') should
+// use the respective base vue components (radio.vue and checkout.vue).
+const INPUT_TYPES = {
+  TEXT: 'text',
+  TEXTAREA: 'textarea',
+  PASSWORD: 'password',
+  EMAIL: 'email',
+  NUMBER: 'number'
+};
+const INPUT_SIZES = {
+  EXTRA_SMALL: 'xs',
+  SMALL: 'sm',
+  DEFAULT: 'md',
+  LARGE: 'lg',
+  EXTRA_LARGE: 'xl'
+};
+/* harmony default export */ const input_constants = ({
+  INPUT_TYPES,
+  INPUT_SIZES
+});
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/validation_messages/validation_messages.vue?vue&type=template&id=e7311664&
+var validation_messagesvue_type_template_id_e7311664_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.showMessages && !_vm.isFilteredValidationMessagesEmpty)?_c('div',{staticClass:"base-input__messages d-d-flex d-fd-column",attrs:{"data-qa":"validation-messages-container"}},_vm._l((_vm.filteredValidationMessages),function(ref,index){
+var message = ref.message;
+var type = ref.type;
+return _c('div',{key:_vm.getMessageKey(type, index),class:[
+      'base-input__message',
+      'd-validation-message',
+      _vm.messageTypeClass(type) ],attrs:{"role":"status","aria-live":"polite","data-qa":"validation-message"}},[_c('p',{domProps:{"innerHTML":_vm._s(message)}})])}),0):_vm._e()}
+var validation_messagesvue_type_template_id_e7311664_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./common/validators.js
+
+function validationMessageValidator(rawMessages) {
+  if (!rawMessages) {
+    return true;
+  }
+
+  return rawMessages.every(message => {
+    if (typeof message === 'string') {
+      return true;
+    }
+
+    if (typeof message === 'object') {
+      return Object.values(VALIDATION_MESSAGE_TYPES).includes(message === null || message === void 0 ? void 0 : message.type);
+    }
+
+    return false;
+  });
+}
+/* harmony default export */ const validators = ({
+  validationMessageValidator
+});
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/validation_messages/validation_messages.vue?vue&type=script&lang=js&
+//
+//
+//
+//
 //
 //
 //
@@ -11673,10 +12006,7 @@ function validationMessageValidator(rawMessages) {
 //
 //
 //
-//
-//
-//
-
+
 
 /* harmony default export */ const validation_messagesvue_type_script_lang_js_ = ({
   name: 'DtValidationMessages',
@@ -17052,14 +17382,14 @@ var keyboard_shortcut_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/root_layout/root_layout.vue?vue&type=template&id=2e5fe0a4&
-var root_layoutvue_type_template_id_2e5fe0a4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"root-layout"},[(_vm.$slots.header)?_c('header',{class:['root-layout__header', _vm.headerClass, { 'root-layout__header--sticky': _vm.headerSticky }],style:({ 'height': _vm.headerHeight }),attrs:{"data-qa":"root-layout-header"}},[_vm._t("header")],2):_vm._e(),_c('dt-root-layout-body',{attrs:{"content-class":_vm.contentClass,"content-wrap-width-percent":_vm.contentWrapWidthPercent,"sidebar-class":_vm.sidebarClass,"sidebar-width":_vm.sidebarWidth,"sidebar-position":_vm.sidebarPosition},scopedSlots:_vm._u([{key:"sidebar",fn:function(){return [_vm._t("sidebar")]},proxy:true},{key:"content",fn:function(){return [_vm._t("default")]},proxy:true}],null,true)}),(_vm.$slots.footer)?_c('footer',{class:['root-layout__footer', _vm.footerClass],style:({ 'height': _vm.footerHeight }),attrs:{"data-qa":"root-layout-footer"}},[_vm._t("footer")],2):_vm._e()],1)}
-var root_layoutvue_type_template_id_2e5fe0a4_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/root_layout/root_layout.vue?vue&type=template&id=7ea2ab50&
+var root_layoutvue_type_template_id_7ea2ab50_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"root-layout"},[(_vm.$slots.header)?_c('header',{class:['root-layout__header', _vm.headerClass, { 'root-layout__header--sticky': _vm.headerSticky }],style:({ 'height': _vm.headerHeight }),attrs:{"data-qa":"root-layout-header"}},[_vm._t("header")],2):_vm._e(),_c('dt-root-layout-body',{attrs:{"body-class":_vm.bodyClass,"content-class":_vm.contentClass,"content-wrap-width-percent":_vm.contentWrapWidthPercent,"sidebar-class":_vm.sidebarClass,"sidebar-width":_vm.sidebarWidth,"sidebar-position":_vm.sidebarPosition},scopedSlots:_vm._u([{key:"sidebar",fn:function(){return [_vm._t("sidebar")]},proxy:true},{key:"content",fn:function(){return [_vm._t("default")]},proxy:true}],null,true)}),(_vm.$slots.footer)?_c('footer',{class:['root-layout__footer', _vm.footerClass],style:({ 'height': _vm.footerHeight }),attrs:{"data-qa":"root-layout-footer"}},[_vm._t("footer")],2):_vm._e()],1)}
+var root_layoutvue_type_template_id_7ea2ab50_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/root_layout/root_layout_body.vue?vue&type=template&id=dfb53770&
-var root_layout_bodyvue_type_template_id_dfb53770_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['root-layout__body', _vm.bodyClass],attrs:{"data-qa":"root-layout-body"}},[(_vm.$slots.sidebar)?_c('aside',{class:['root-layout__sidebar', _vm.sidebarClass],style:({ 'flex-basis': _vm.sidebarWidth }),attrs:{"data-qa":"root-layout-sidebar"}},[_vm._t("sidebar")],2):_vm._e(),(_vm.$slots.content)?_c('main',{class:['root-layout__content', _vm.contentClass],style:({ 'min-inline-size': _vm.contentWrapWidthPercent }),attrs:{"data-qa":"root-layout-content"}},[_vm._t("content")],2):_vm._e()])}
-var root_layout_bodyvue_type_template_id_dfb53770_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/root_layout/root_layout_body.vue?vue&type=template&id=6ef959c4&
+var root_layout_bodyvue_type_template_id_6ef959c4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['root-layout__body', _vm.bodyClasses],attrs:{"data-qa":"root-layout-body"}},[(_vm.$slots.sidebar)?_c('aside',{class:['root-layout__sidebar', _vm.sidebarClass],style:({ 'flex-basis': _vm.sidebarWidth }),attrs:{"data-qa":"root-layout-sidebar"}},[_vm._t("sidebar")],2):_vm._e(),(_vm.$slots.content)?_c('main',{class:['root-layout__content', _vm.contentClass],style:({ 'min-inline-size': _vm.contentWrapWidthPercent }),attrs:{"data-qa":"root-layout-content"}},[_vm._t("content")],2):_vm._e()])}
+var root_layout_bodyvue_type_template_id_6ef959c4_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_constants.js
@@ -17099,6 +17429,14 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 /* harmony default export */ const root_layout_bodyvue_type_script_lang_js_ = ({
   name: 'DtRootLayoutBody',
   props: {
+    /**
+     * Additional class name for the body
+     */
+    bodyClass: {
+      type: [String, Array, Object],
+      default: undefined
+    },
+
     /**
      * Additional class name for the content element
      */
@@ -17145,10 +17483,10 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
     }
   },
   computed: {
-    bodyClass() {
-      return {
+    bodyClasses() {
+      return [this.bodyClass, {
         'root-layout__body--invert': this.sidebarPosition === ROOT_LAYOUT_SIDEBAR_POSITIONS.RIGHT
-      };
+      }];
     }
 
   }
@@ -17170,8 +17508,8 @@ var root_layout_bodyvue_type_style_index_0_lang_less_ = __webpack_require__(125)
 
 var root_layout_body_component = normalizeComponent(
   root_layout_root_layout_bodyvue_type_script_lang_js_,
-  root_layout_bodyvue_type_template_id_dfb53770_render,
-  root_layout_bodyvue_type_template_id_dfb53770_staticRenderFns,
+  root_layout_bodyvue_type_template_id_6ef959c4_render,
+  root_layout_bodyvue_type_template_id_6ef959c4_staticRenderFns,
   false,
   null,
   null,
@@ -17216,6 +17554,7 @@ var root_layout_body_component = normalizeComponent(
 //
 //
 //
+//
 
 
 /* harmony default export */ const root_layoutvue_type_script_lang_js_ = ({
@@ -17241,6 +17580,14 @@ var root_layout_body_component = normalizeComponent(
       default: '64px'
     },
 
+    /**
+     * Additional class name for the body
+     */
+    bodyClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
     /**
      * Scroll the header with the page
      */
@@ -17330,8 +17677,8 @@ var root_layoutvue_type_style_index_0_lang_less_ = __webpack_require__(426);
 
 var root_layout_component = normalizeComponent(
   root_layout_root_layoutvue_type_script_lang_js_,
-  root_layoutvue_type_template_id_2e5fe0a4_render,
-  root_layoutvue_type_template_id_2e5fe0a4_staticRenderFns,
+  root_layoutvue_type_template_id_7ea2ab50_render,
+  root_layoutvue_type_template_id_7ea2ab50_staticRenderFns,
   false,
   null,
   null,
@@ -17343,15 +17690,15 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=58cb1065&
-var combobox_with_popovervue_type_template_id_58cb1065_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=093b6076&
+var combobox_with_popovervue_type_template_id_093b6076_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
 return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"focusout":_vm.onFocusOut,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.openOnArrowKeyPress($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.openOnArrowKeyPress($event)}]}},[_vm._t("input",null,{"inputProps":inputProps,"onInput":_vm.handleDisplayList})],2)]}},{key:"list",fn:function(ref){
 var opened = ref.opened;
 var listProps = ref.listProps;
 var clearHighlightIndex = ref.clearHighlightIndex;
-return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
-var combobox_with_popovervue_type_template_id_58cb1065_staticRenderFns = []
+return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":_vm.modal,"auto-focus":false},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
+var combobox_with_popovervue_type_template_id_093b6076_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -17591,6 +17938,15 @@ var combobox_with_popovervue_type_template_id_58cb1065_staticRenderFns = []
       default: false
     },
 
+    /**
+     * Determines modal state. If enabled popover has a modal overlay
+     * preventing interaction with elements below it, but it is invisible.
+     */
+    modal: {
+      type: Boolean,
+      default: true
+    },
+
     /**
      * Displays the list when the combobox is focused, before the user has typed anything.
      * When this is enabled the list will not close after selection.
@@ -17722,15 +18078,20 @@ var combobox_with_popovervue_type_template_id_58cb1065_staticRenderFns = []
     },
 
     onFocusOut(e) {
-      const comboboxRefs = ['input', 'header', 'footer', 'listWrapper'];
+      const comboboxRefs = ['input', 'header', 'footer', 'listWrapper']; // Check if the focus change was to another target within the combobox component
+
       const isComboboxStillFocused = comboboxRefs.some(ref => {
         var _this$$refs$ref;
 
         return (_this$$refs$ref = this.$refs[ref]) === null || _this$$refs$ref === void 0 ? void 0 : _this$$refs$ref.contains(e.relatedTarget);
-      });
+      }); // If outside of the combobox then close
 
       if (!isComboboxStillFocused) {
         this.closeComboboxList();
+      } else {
+        // if focus is anywhere within the combobox input or list,
+        // keep the focus on the input, or keyboard nav will break.
+        e.target.focus();
       }
     },
 
@@ -17756,8 +18117,8 @@ var combobox_with_popovervue_type_template_id_58cb1065_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_58cb1065_render,
-  combobox_with_popovervue_type_template_id_58cb1065_staticRenderFns,
+  combobox_with_popovervue_type_template_id_093b6076_render,
+  combobox_with_popovervue_type_template_id_093b6076_staticRenderFns,
   false,
   null,
   null,
@@ -17768,11 +18129,11 @@ var combobox_with_popover_component = normalizeComponent(
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=50e5c78d&
-var combobox_multi_selectvue_type_template_id_50e5c78d_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"list-aria-label":"listAriaLabel","show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=14e17b26&
+var combobox_multi_selectvue_type_template_id_14e17b26_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"list-aria-label":"listAriaLabel","show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var onInput = ref.onInput;
 return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,staticClass:"d-mt4 d-mx2 d-zi-base1",attrs:{"close-button-props":{ ariaLabel: 'close' },"size":_vm.size},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1 d-mb4",attrs:{"label":_vm.label,"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list"},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
-var combobox_multi_selectvue_type_template_id_50e5c78d_staticRenderFns = []
+var combobox_multi_selectvue_type_template_id_14e17b26_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -17976,6 +18337,9 @@ const MULTI_SELECT_SIZES = {
 
 
 
+
+
+
 /* harmony default export */ const combobox_multi_selectvue_type_script_lang_js_ = ({
   name: 'DtRecipeComboboxMultiSelect',
   components: {
@@ -18408,8 +18772,8 @@ const MULTI_SELECT_SIZES = {
 ;
 var combobox_multi_select_component = normalizeComponent(
   combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
-  combobox_multi_selectvue_type_template_id_50e5c78d_render,
-  combobox_multi_selectvue_type_template_id_50e5c78d_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_14e17b26_render,
+  combobox_multi_selectvue_type_template_id_14e17b26_staticRenderFns,
   false,
   null,
   null,
@@ -18421,85 +18785,210 @@ var combobox_multi_select_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=3f590359&
-var contact_infovue_type_template_id_3f590359_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-list-item',{attrs:{"id":_vm.id,"role":_vm.role,"element-type":"div","data-qa":"contact-info"},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('div',{staticClass:"d-ps-relative",attrs:{"data-qa":"contact-info-left"}},[(_vm.avatarSrc)?_c('dt-avatar',{attrs:{"size":"lg","avatar-class":"d-bar2"}},[_c('img',{attrs:{"data-qa":"dt-contact-avatar","src":_vm.avatarSrc,"alt":_vm.avatarInitials}})]):(_vm.avatarInitials)?_c('dt-avatar',{attrs:{"kind":"initials","size":"lg","color":_vm.avatarColor}},[_vm._v(" "+_vm._s(_vm.avatarInitials)+" ")]):_vm._e(),(_vm.showUserStatus)?_c('div',{class:[
-          'd-ba',
-          'd-bc-white',
-          'd-baw2',
-          'd-bar2',
-          'd-ps-absolute',
-          'd-bn1',
-          'd-rn1',
-          'd-w20p',
-          'd-h20p',
-          _vm.USER_STATUS_COLOR_MODIFIERS[_vm.userStatusColor] ],attrs:{"data-qa":"contact-info-user-status"}},[_vm._v("   ")]):_vm._e()],1)]},proxy:true},{key:"default",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-header"}},[_vm._t("header")],2)]},proxy:true},{key:"subtitle",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-subtitle"}},[_vm._t("subtitle")],2)]},proxy:true},{key:"bottom",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-bottom"}},[_vm._t("bottom")],2)]},proxy:true},{key:"right",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-right"}},[_vm._t("right")],2)]},proxy:true}],null,true)})}
-var contact_infovue_type_template_id_3f590359_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=0421e5c4&
+var callbar_buttonvue_type_template_id_0421e5c4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-tooltip',{attrs:{"id":_vm.id,"offset":[0, -12]},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.circle ? 'outlined' : 'clear',"kind":"muted","icon-position":"top","disabled":_vm.disabled,"aria-label":_vm.ariaLabel,"label-class":"d-fs11"}},_vm.$listeners),[_vm._t("default"),_vm._t("icon",null,{"slot":"icon"})],2)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
+var callbar_buttonvue_type_template_id_0421e5c4_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
-const USER_STATUS_COLOR_MODIFIERS = {
-  none: '',
-  green: 'd-bgc-green-400',
-  yellow: 'd-bgc-yellow-400',
-  red: 'd-bgc-red-400'
-};
-/* 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[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/list_items/contact_info/contact_info.vue?vue&type=script&lang=js&
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./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;
+      }
+    }
+  },
+  emits: ['click'],
+  computed: {
+    callbarButtonClass() {
+      return ['dt-recipe-callbar-button', 'd-stack4', {
+        'dt-recipe-callbar-button--circle': 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&
+ /* harmony default export */ const callbar_button_callbar_buttonvue_type_script_lang_js_ = (callbar_buttonvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&lang=less&
+var callbar_buttonvue_type_style_index_0_lang_less_ = __webpack_require__(759);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&lang=less&
+
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var callbar_button_component = normalizeComponent(
+  callbar_button_callbar_buttonvue_type_script_lang_js_,
+  callbar_buttonvue_type_template_id_0421e5c4_render,
+  callbar_buttonvue_type_template_id_0421e5c4_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const callbar_button = (callbar_button_component.exports);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js
+
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=d1e0f278&
+var callbar_button_with_popovervue_type_template_id_d1e0f278_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dt-recipe--callbar-button-with-popover--button"},[_c('dt-recipe-callbar-button',{staticClass:"dt-recipe--callbar-button-with-popover--main-button",attrs:{"aria-label":_vm.ariaLabel,"disabled":_vm.disabled,"active":_vm.active,"danger":_vm.danger},on:{"click":_vm.buttonClick}},[_vm._t("icon",null,{"slot":"icon"}),_vm._t("tooltip",null,{"slot":"tooltip"}),_vm._t("default")],2),(!_vm.disabled)?_c('dt-popover',_vm._b({staticClass:"dt-recipe--callbar-button-with-popover--popover-wrapper",attrs:{"id":_vm.id,"disabled":_vm.disabled,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.initialFocusElement,"show-close-button":_vm.showCloseButton,"padding":"none","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"},on:{"opened":_vm.onModalIsOpened},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',{staticClass:"dt-recipe--callbar-button-with-popover--arrow",attrs:{"circle":"","importance":"clear","size":"lg","aria-label":_vm.arrowButtonLabel,"active":_vm.open},on:{"click":_vm.arrowClick},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-arrow-drop-up',{staticClass:"d-svg--size-16"})]},proxy:true}],null,false,2876394386)})]},proxy:true}],null,false,4054443748)},'dt-popover',_vm.$attrs,false),[_vm._t("content",null,{"slot":"content"}),_vm._t("headerContent",null,{"slot":"headerContent"}),_vm._t("footerContent",null,{"slot":"footerContent"})],2):_vm._e()],1)}
+var callbar_button_with_popovervue_type_template_id_d1e0f278_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDropUp.vue?vue&type=template&id=35fc0e49&
+var IconArrowDropUpvue_type_template_id_35fc0e49_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{staticClass:"d-svg d-svg--system d-svg__arrowDropUp",attrs:{"aria-hidden":"true","aria-label":"Arrow Drop Up","viewBox":"0 0 24 24"}},[_c('path',{attrs:{"d":"M7 14l5-5 5 5H7z"}})])}
+var IconArrowDropUpvue_type_template_id_35fc0e49_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDropUp.vue
+
+var IconArrowDropUp_script = {}
+
+
+/* normalize component */
+;
+var IconArrowDropUp_component = normalizeComponent(
+  IconArrowDropUp_script,
+  IconArrowDropUpvue_type_template_id_35fc0e49_render,
+  IconArrowDropUpvue_type_template_id_35fc0e49_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const IconArrowDropUp = (IconArrowDropUp_component.exports);
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 //
 //
 //
@@ -18528,6 +19017,313 @@ const USER_STATUS_COLOR_MODIFIERS = {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+
+
+/* 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
+    },
+
+    /**
+     * 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
+    }
+  },
+  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.$listeners.click) {
+        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&
+ /* harmony default export */ const callbar_button_with_popover_callbar_button_with_popovervue_type_script_lang_js_ = (callbar_button_with_popovervue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&lang=less&
+var callbar_button_with_popovervue_type_style_index_0_lang_less_ = __webpack_require__(545);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&lang=less&
+
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var callbar_button_with_popover_component = normalizeComponent(
+  callbar_button_with_popover_callbar_button_with_popovervue_type_script_lang_js_,
+  callbar_button_with_popovervue_type_template_id_d1e0f278_render,
+  callbar_button_with_popovervue_type_template_id_d1e0f278_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const callbar_button_with_popover = (callbar_button_with_popover_component.exports);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/index.js
+
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=2ea57cf6&
+var contact_infovue_type_template_id_2ea57cf6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-list-item',{attrs:{"id":_vm.id,"role":_vm.role,"element-type":"div","data-qa":"contact-info"},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('div',{staticClass:"d-ps-relative",attrs:{"data-qa":"contact-info-left"}},[(_vm.avatarSrc)?_c('dt-avatar',{attrs:{"size":"lg","avatar-class":"d-bar2"}},[_c('img',{attrs:{"data-qa":"dt-contact-avatar","src":_vm.avatarSrc,"alt":_vm.avatarInitials}})]):(_vm.avatarInitials)?_c('dt-avatar',{attrs:{"kind":"initials","size":"lg","color":_vm.avatarColor}},[_vm._v(" "+_vm._s(_vm.avatarInitials)+" ")]):_vm._e(),(_vm.showUserStatus)?_c('div',{class:[
+          'd-ba',
+          'd-bc-white',
+          'd-baw2',
+          'd-bar2',
+          'd-ps-absolute',
+          'd-bn1',
+          'd-rn1',
+          'd-w20p',
+          'd-h20p',
+          _vm.USER_STATUS_COLOR_MODIFIERS[_vm.userStatusColor] ],attrs:{"data-qa":"contact-info-user-status"}},[_vm._v("   ")]):_vm._e()],1)]},proxy:true},{key:"default",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-header"}},[_vm._t("header")],2)]},proxy:true},{key:"subtitle",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-subtitle"}},[_vm._t("subtitle")],2)]},proxy:true},{key:"bottom",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-bottom"}},[_vm._t("bottom")],2)]},proxy:true},{key:"right",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-right"}},[_vm._t("right")],2)]},proxy:true}],null,true)})}
+var contact_infovue_type_template_id_2ea57cf6_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
+const USER_STATUS_COLOR_MODIFIERS = {
+  none: '',
+  green: 'd-bgc-green-400',
+  yellow: 'd-bgc-yellow-400',
+  red: 'd-bgc-red-400'
+};
+/* 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[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/list_items/contact_info/contact_info.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
 
 
 
@@ -18624,8 +19420,8 @@ const USER_STATUS_COLOR_MODIFIERS = {
 ;
 var contact_info_component = normalizeComponent(
   contact_info_contact_infovue_type_script_lang_js_,
-  contact_infovue_type_template_id_3f590359_render,
-  contact_infovue_type_template_id_3f590359_staticRenderFns,
+  contact_infovue_type_template_id_2ea57cf6_render,
+  contact_infovue_type_template_id_2ea57cf6_staticRenderFns,
   false,
   null,
   null,
@@ -18773,6 +19569,8 @@ var top_banner_info_component = normalizeComponent(
 
 
 
+
+
  // Mixins
 
  // Constants