@dialpad/dialtone-vue 3.13.0 → 3.17.0

package/dist/dialtone-vue.common.js

@@ -1,6 +1,78 @@
 /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
+/***/ 85:
+/***/ ((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, ".enter-active,.leave-active{overflow:hidden;transition:height .3s linear}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
+/***/ 164:
+/***/ ((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, ".d-context-menu-list{width:24rem}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
+/***/ 826:
+/***/ ((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-list-separator{height:1px;list-style:none}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
 /***/ 856:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
@@ -49,7 +121,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-default-list-item,.dt-default-list
 
 /***/ }),
 
-/***/ 330:
+/***/ 83:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -66,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--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___);
 
@@ -97,7 +169,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-section[tabindex=\"-1\"]:focu
 
 /***/ }),
 
-/***/ 848:
+/***/ 765:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -121,7 +193,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".tippy-box[data-popper-escaped] .d-pop
 
 /***/ }),
 
-/***/ 475:
+/***/ 187:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -138,14 +210,14 @@ __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, ".root-layout__header--sticky{position:-webkit-sticky;position:sticky;top:0}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".root-layout__header--sticky{position:sticky;top:0}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
 /***/ }),
 
-/***/ 669:
+/***/ 295:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -215,6 +287,30 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".tippy-box[data-popper-escaped] .d-too
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 987:
+/***/ ((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, ".ivr_node__width{width:280px}.prompt_node_border_color{--bco:100%;border-color:#84bdff!important}.prompt_node_border_color__selected{--bco:100%;border-color:#51a0fe!important}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 239:
@@ -380,6 +476,54 @@ exports.Z = (sfc, props) => {
 };
 
 
+/***/ }),
+
+/***/ 816:
+/***/ ((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__(85);
+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("96e47e7c", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 974:
+/***/ ((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__(164);
+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("8d13d4e2", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 633:
+/***/ ((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__(826);
+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("e7bd0444", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ 51:
@@ -414,19 +558,19 @@ var update = add("c62e22ae", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 537:
+/***/ 69:
 /***/ ((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__(330);
+var content = __webpack_require__(83);
 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("536df671", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("11cd64b8", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -446,51 +590,51 @@ var update = add("f34eb6ac", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 535:
+/***/ 318:
 /***/ ((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__(848);
+var content = __webpack_require__(765);
 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("3be55380", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("155ecfda", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
-/***/ 35:
+/***/ 991:
 /***/ ((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__(475);
+var content = __webpack_require__(187);
 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("10cf22bb", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("71acbdd7", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
-/***/ 516:
+/***/ 195:
 /***/ ((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__(669);
+var content = __webpack_require__(295);
 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("6104adba", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("63cc9fb4", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -526,6 +670,22 @@ var update = add("5de7b68a", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 866:
+/***/ ((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__(987);
+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("1ce953ea", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 260:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -908,12 +1068,16 @@ __webpack_require__.d(__webpack_exports__, {
   "DtBreadcrumbs": () => (/* reexport */ breadcrumbs),
   "DtButton": () => (/* reexport */ button_button),
   "DtButtonGroup": () => (/* reexport */ button_group),
+  "DtCard": () => (/* reexport */ card),
   "DtCheckableInputMixin": () => (/* reexport */ CheckableMixin),
   "DtCheckbox": () => (/* reexport */ checkbox_checkbox),
   "DtCheckboxGroup": () => (/* reexport */ checkbox_group),
   "DtChip": () => (/* reexport */ chip),
+  "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),
@@ -934,6 +1098,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtRecipeComboboxMultiSelect": () => (/* reexport */ combobox_multi_select),
   "DtRecipeComboboxWithPopover": () => (/* reexport */ combobox_with_popover),
   "DtRecipeContactInfo": () => (/* reexport */ contact_info),
+  "DtRecipeIvrNode": () => (/* reexport */ ivr_node),
   "DtRecipeTopBannerInfo": () => (/* reexport */ top_banner_info),
   "DtRootLayout": () => (/* reexport */ root_layout),
   "DtSelectMenu": () => (/* reexport */ select_menu),
@@ -951,6 +1116,16 @@ __webpack_require__.d(__webpack_exports__, {
   "DtValidationMessages": () => (/* reexport */ validation_messages),
   "INPUT_SIZES": () => (/* reexport */ INPUT_SIZES),
   "INPUT_TYPES": () => (/* reexport */ INPUT_TYPES),
+  "IVR_NODE_BRANCH": () => (/* reexport */ IVR_NODE_BRANCH),
+  "IVR_NODE_EXPERT": () => (/* reexport */ IVR_NODE_EXPERT),
+  "IVR_NODE_GO_TO": () => (/* reexport */ IVR_NODE_GO_TO),
+  "IVR_NODE_HANGUP": () => (/* reexport */ IVR_NODE_HANGUP),
+  "IVR_NODE_ICON_TYPES": () => (/* reexport */ IVR_NODE_ICON_TYPES),
+  "IVR_NODE_LABELS": () => (/* reexport */ IVR_NODE_LABELS),
+  "IVR_NODE_PROMPT_COLLECT": () => (/* reexport */ IVR_NODE_PROMPT_COLLECT),
+  "IVR_NODE_PROMPT_MENU": () => (/* reexport */ IVR_NODE_PROMPT_MENU),
+  "IVR_NODE_PROMPT_PLAY": () => (/* reexport */ IVR_NODE_PROMPT_PLAY),
+  "IVR_NODE_TRANSFER": () => (/* reexport */ IVR_NODE_TRANSFER),
   "LINK_KIND_MODIFIERS": () => (/* reexport */ LINK_KIND_MODIFIERS),
   "LINK_VARIANTS": () => (/* reexport */ LINK_VARIANTS),
   "MODAL_KIND_MODIFIERS": () => (/* reexport */ MODAL_KIND_MODIFIERS),
@@ -1117,13 +1292,13 @@ const FOCUSABLE_SELECTOR_NOT_HIDDEN = 'input:not([type=hidden]):not(:disabled)';
 
 const FOCUSABLE_SELECTOR_NOT_DISABLED = 'select:not(:disabled),textarea:not(:disabled),button:not(:disabled)'; // // selector to find focusable not hidden and disabled elements
 
-const FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED = "".concat(FOCUSABLE_SELECTOR_NOT_HIDDEN, ",").concat(FOCUSABLE_SELECTOR_NOT_DISABLED); // selector to find focusable elements
+const FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED = `${FOCUSABLE_SELECTOR_NOT_HIDDEN},${FOCUSABLE_SELECTOR_NOT_DISABLED}`; // selector to find focusable elements
 
-const FOCUSABLE_SELECTOR = "a,frame,iframe,".concat(FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED, ",*[tabindex]");
+const FOCUSABLE_SELECTOR = `a,frame,iframe,${FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED},*[tabindex]`;
 const scheduler = typeof setImmediate === 'function' ? setImmediate : setTimeout;
 function getUniqueString() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_PREFIX;
-  return "".concat(prefix).concat(UNIQUE_ID_COUNTER++);
+  return `${prefix}${UNIQUE_ID_COUNTER++}`;
 }
 function formatMessages(messages) {
   if (!messages) {
@@ -1409,11 +1584,11 @@ const badge_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(badgevue_typ
 ;// CONCATENATED MODULE: ./components/badge/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/banner/banner.vue?vue&type=template&id=5c7f46e2
+;// 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/banner/banner.vue?vue&type=template&id=b340d796
 
-const bannervue_type_template_id_5c7f46e2_hoisted_1 = ["role"];
+const bannervue_type_template_id_b340d796_hoisted_1 = ["role"];
 const _hoisted_2 = ["aria-labelledby", "aria-describedby"];
-function bannervue_type_template_id_5c7f46e2_render(_ctx, _cache, $props, $setup, $data, $options) {
+function bannervue_type_template_id_b340d796_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_notice_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-icon");
 
   const _component_dt_notice_content = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-content");
@@ -1422,20 +1597,22 @@ function bannervue_type_template_id_5c7f46e2_render(_ctx, _cache, $props, $setup
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("aside", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.bannerClass),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)($options.bannerBackgroundImage),
     role: $options.role,
     onKeydown: _cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)(function () {
       return $options.trapFocus && $options.trapFocus(...arguments);
     }, ["tab"]))
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
-    class: "d-banner__dialog",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-banner__dialog", $props.dialogClass]),
     "aria-labelledby": $props.titleId,
     "aria-describedby": $props.contentId
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_icon, {
+  }, [!$props.hideIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_notice_icon, {
+    key: 0,
     kind: $props.kind
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")]),
     _: 3
-  }, 8, ["kind"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_content, {
+  }, 8, ["kind"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_content, {
     "title-id": $props.titleId,
     "content-id": $props.contentId,
     title: $props.title
@@ -1450,9 +1627,9 @@ function bannervue_type_template_id_5c7f46e2_render(_ctx, _cache, $props, $setup
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "action")]),
     _: 3
-  }, 8, ["hide-close", "close-button-props"])], 8, _hoisted_2)], 42, bannervue_type_template_id_5c7f46e2_hoisted_1);
+  }, 8, ["hide-close", "close-button-props"])], 10, _hoisted_2)], 46, bannervue_type_template_id_b340d796_hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/banner/banner.vue?vue&type=template&id=5c7f46e2
+;// CONCATENATED MODULE: ./components/banner/banner.vue?vue&type=template&id=b340d796
 
 ;// 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/notice/notice_icon.vue?vue&type=template&id=58ae40bb
 
@@ -1466,139 +1643,144 @@ function notice_iconvue_type_template_id_58ae40bb_render(_ctx, _cache, $props, $
 }
 ;// CONCATENATED MODULE: ./components/notice/notice_icon.vue?vue&type=template&id=58ae40bb
 
-;// 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/IconLightbulb.vue?vue&type=template&id=07d1b1af
+;// 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/IconLightbulb.vue?vue&type=template&id=d9fc2436
 
 
-const IconLightbulbvue_type_template_id_07d1b1af_hoisted_1 = {
+const IconLightbulbvue_type_template_id_d9fc2436_hoisted_1 = {
   "aria-hidden": "true",
+  focusable: "false",
   "aria-label": "Lightbulb",
   class: "d-svg d-svg--system d-svg__lightbulb",
   viewBox: "0 0 24 24"
 }
-const IconLightbulbvue_type_template_id_07d1b1af_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M9 21c0 .5.4 1 1 1h4c.6 0 1-.5 1-1v-1H9v1zm3-19C8.1 2 5 5.1 5 9c0 2.4 1.2 4.5 3 5.7V17c0 .5.4 1 1 1h6c.6 0 1-.5 1-1v-2.3c1.8-1.3 3-3.4 3-5.7 0-3.9-3.1-7-7-7z" }, null, -1)
+const IconLightbulbvue_type_template_id_d9fc2436_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M9 21c0 .5.4 1 1 1h4c.6 0 1-.5 1-1v-1H9v1Zm3-19C8.1 2 5 5.1 5 9c0 2.4 1.2 4.5 3 5.7V17c0 .5.4 1 1 1h6c.6 0 1-.5 1-1v-2.3c1.8-1.3 3-3.4 3-5.7 0-3.9-3.1-7-7-7Z" }, null, -1)
 const _hoisted_3 = [
-  IconLightbulbvue_type_template_id_07d1b1af_hoisted_2
+  IconLightbulbvue_type_template_id_d9fc2436_hoisted_2
 ]
 
-function IconLightbulbvue_type_template_id_07d1b1af_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", IconLightbulbvue_type_template_id_07d1b1af_hoisted_1, _hoisted_3))
+function IconLightbulbvue_type_template_id_d9fc2436_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", IconLightbulbvue_type_template_id_d9fc2436_hoisted_1, _hoisted_3))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconLightbulb.vue?vue&type=template&id=07d1b1af
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconLightbulb.vue?vue&type=template&id=d9fc2436
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconLightbulb.vue
 
 const script = {}
 
 ;
-const IconLightbulb_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(script, [['render',IconLightbulbvue_type_template_id_07d1b1af_render]])
+const IconLightbulb_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(script, [['render',IconLightbulbvue_type_template_id_d9fc2436_render]])
 
 /* harmony default export */ const IconLightbulb = (IconLightbulb_exports_);
-;// 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/IconInfo.vue?vue&type=template&id=d1105ee6
+;// 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/IconInfo.vue?vue&type=template&id=0ffb14b7
 
 
-const IconInfovue_type_template_id_d1105ee6_hoisted_1 = {
+const IconInfovue_type_template_id_0ffb14b7_hoisted_1 = {
   "aria-hidden": "true",
+  focusable: "false",
   "aria-label": "Info",
   class: "d-svg d-svg--system d-svg__info",
   viewBox: "0 0 24 24"
 }
-const IconInfovue_type_template_id_d1105ee6_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }, null, -1)
-const IconInfovue_type_template_id_d1105ee6_hoisted_3 = [
-  IconInfovue_type_template_id_d1105ee6_hoisted_2
+const IconInfovue_type_template_id_0ffb14b7_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z" }, null, -1)
+const IconInfovue_type_template_id_0ffb14b7_hoisted_3 = [
+  IconInfovue_type_template_id_0ffb14b7_hoisted_2
 ]
 
-function IconInfovue_type_template_id_d1105ee6_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", IconInfovue_type_template_id_d1105ee6_hoisted_1, IconInfovue_type_template_id_d1105ee6_hoisted_3))
+function IconInfovue_type_template_id_0ffb14b7_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", IconInfovue_type_template_id_0ffb14b7_hoisted_1, IconInfovue_type_template_id_0ffb14b7_hoisted_3))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconInfo.vue?vue&type=template&id=d1105ee6
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconInfo.vue?vue&type=template&id=0ffb14b7
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconInfo.vue
 
 const IconInfo_script = {}
 
 ;
-const IconInfo_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconInfo_script, [['render',IconInfovue_type_template_id_d1105ee6_render]])
+const IconInfo_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconInfo_script, [['render',IconInfovue_type_template_id_0ffb14b7_render]])
 
 /* harmony default export */ const IconInfo = (IconInfo_exports_);
-;// 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/IconWarning.vue?vue&type=template&id=0a24defa
+;// 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/IconWarning.vue?vue&type=template&id=0de6c9ad
 
 
-const IconWarningvue_type_template_id_0a24defa_hoisted_1 = {
+const IconWarningvue_type_template_id_0de6c9ad_hoisted_1 = {
   "aria-hidden": "true",
+  focusable: "false",
   "aria-label": "Warning",
   class: "d-svg d-svg--system d-svg__warning",
   viewBox: "0 0 24 24"
 }
-const IconWarningvue_type_template_id_0a24defa_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }, null, -1)
-const IconWarningvue_type_template_id_0a24defa_hoisted_3 = [
-  IconWarningvue_type_template_id_0a24defa_hoisted_2
+const IconWarningvue_type_template_id_0de6c9ad_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-4h2v4Z" }, null, -1)
+const IconWarningvue_type_template_id_0de6c9ad_hoisted_3 = [
+  IconWarningvue_type_template_id_0de6c9ad_hoisted_2
 ]
 
-function IconWarningvue_type_template_id_0a24defa_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", IconWarningvue_type_template_id_0a24defa_hoisted_1, IconWarningvue_type_template_id_0a24defa_hoisted_3))
+function IconWarningvue_type_template_id_0de6c9ad_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", IconWarningvue_type_template_id_0de6c9ad_hoisted_1, IconWarningvue_type_template_id_0de6c9ad_hoisted_3))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconWarning.vue?vue&type=template&id=0a24defa
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconWarning.vue?vue&type=template&id=0de6c9ad
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconWarning.vue
 
 const IconWarning_script = {}
 
 ;
-const IconWarning_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconWarning_script, [['render',IconWarningvue_type_template_id_0a24defa_render]])
+const IconWarning_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconWarning_script, [['render',IconWarningvue_type_template_id_0de6c9ad_render]])
 
 /* harmony default export */ const IconWarning = (IconWarning_exports_);
-;// 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/IconError.vue?vue&type=template&id=4d9e3e9d
+;// 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/IconError.vue?vue&type=template&id=6256a0c7
 
 
-const IconErrorvue_type_template_id_4d9e3e9d_hoisted_1 = {
+const IconErrorvue_type_template_id_6256a0c7_hoisted_1 = {
   "aria-hidden": "true",
+  focusable: "false",
   "aria-label": "Error",
   class: "d-svg d-svg--system d-svg__error",
   viewBox: "0 0 24 24"
 }
-const IconErrorvue_type_template_id_4d9e3e9d_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }, null, -1)
-const IconErrorvue_type_template_id_4d9e3e9d_hoisted_3 = [
-  IconErrorvue_type_template_id_4d9e3e9d_hoisted_2
+const IconErrorvue_type_template_id_6256a0c7_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z" }, null, -1)
+const IconErrorvue_type_template_id_6256a0c7_hoisted_3 = [
+  IconErrorvue_type_template_id_6256a0c7_hoisted_2
 ]
 
-function IconErrorvue_type_template_id_4d9e3e9d_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", IconErrorvue_type_template_id_4d9e3e9d_hoisted_1, IconErrorvue_type_template_id_4d9e3e9d_hoisted_3))
+function IconErrorvue_type_template_id_6256a0c7_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", IconErrorvue_type_template_id_6256a0c7_hoisted_1, IconErrorvue_type_template_id_6256a0c7_hoisted_3))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconError.vue?vue&type=template&id=4d9e3e9d
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconError.vue?vue&type=template&id=6256a0c7
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconError.vue
 
 const IconError_script = {}
 
 ;
-const IconError_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconError_script, [['render',IconErrorvue_type_template_id_4d9e3e9d_render]])
+const IconError_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconError_script, [['render',IconErrorvue_type_template_id_6256a0c7_render]])
 
 /* harmony default export */ const IconError = (IconError_exports_);
-;// 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/IconCheckCircle.vue?vue&type=template&id=016c7d48
+;// 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/IconCheckCircle.vue?vue&type=template&id=a74ac93c
 
 
-const IconCheckCirclevue_type_template_id_016c7d48_hoisted_1 = {
+const IconCheckCirclevue_type_template_id_a74ac93c_hoisted_1 = {
   "aria-hidden": "true",
+  focusable: "false",
   "aria-label": "Check Circle",
   class: "d-svg d-svg--system d-svg__checkCircle",
   viewBox: "0 0 24 24"
 }
-const IconCheckCirclevue_type_template_id_016c7d48_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }, null, -1)
-const IconCheckCirclevue_type_template_id_016c7d48_hoisted_3 = [
-  IconCheckCirclevue_type_template_id_016c7d48_hoisted_2
+const IconCheckCirclevue_type_template_id_a74ac93c_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z" }, null, -1)
+const IconCheckCirclevue_type_template_id_a74ac93c_hoisted_3 = [
+  IconCheckCirclevue_type_template_id_a74ac93c_hoisted_2
 ]
 
-function IconCheckCirclevue_type_template_id_016c7d48_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", IconCheckCirclevue_type_template_id_016c7d48_hoisted_1, IconCheckCirclevue_type_template_id_016c7d48_hoisted_3))
+function IconCheckCirclevue_type_template_id_a74ac93c_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", IconCheckCirclevue_type_template_id_a74ac93c_hoisted_1, IconCheckCirclevue_type_template_id_a74ac93c_hoisted_3))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCheckCircle.vue?vue&type=template&id=016c7d48
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCheckCircle.vue?vue&type=template&id=a74ac93c
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCheckCircle.vue
 
 const IconCheckCircle_script = {}
 
 ;
-const IconCheckCircle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconCheckCircle_script, [['render',IconCheckCirclevue_type_template_id_016c7d48_render]])
+const IconCheckCircle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconCheckCircle_script, [['render',IconCheckCirclevue_type_template_id_a74ac93c_render]])
 
 /* harmony default export */ const IconCheckCircle = (IconCheckCircle_exports_);
 ;// CONCATENATED MODULE: ./components/notice/notice_constants.js
@@ -1732,31 +1914,32 @@ function notice_actionvue_type_template_id_9d2620b0_render(_ctx, _cache, $props,
 }
 ;// CONCATENATED MODULE: ./components/notice/notice_action.vue?vue&type=template&id=9d2620b0
 
-;// 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/IconClose.vue?vue&type=template&id=18642c39
+;// 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/IconClose.vue?vue&type=template&id=4ef5457b
 
 
-const IconClosevue_type_template_id_18642c39_hoisted_1 = {
+const IconClosevue_type_template_id_4ef5457b_hoisted_1 = {
   "aria-hidden": "true",
+  focusable: "false",
   "aria-label": "Close",
   class: "d-svg d-svg--system d-svg__close",
   viewBox: "0 0 24 24"
 }
-const IconClosevue_type_template_id_18642c39_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" }, null, -1)
-const IconClosevue_type_template_id_18642c39_hoisted_3 = [
-  IconClosevue_type_template_id_18642c39_hoisted_2
+const IconClosevue_type_template_id_4ef5457b_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z" }, null, -1)
+const IconClosevue_type_template_id_4ef5457b_hoisted_3 = [
+  IconClosevue_type_template_id_4ef5457b_hoisted_2
 ]
 
-function IconClosevue_type_template_id_18642c39_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", IconClosevue_type_template_id_18642c39_hoisted_1, IconClosevue_type_template_id_18642c39_hoisted_3))
+function IconClosevue_type_template_id_4ef5457b_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", IconClosevue_type_template_id_4ef5457b_hoisted_1, IconClosevue_type_template_id_4ef5457b_hoisted_3))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconClose.vue?vue&type=template&id=18642c39
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconClose.vue?vue&type=template&id=4ef5457b
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconClose.vue
 
 const IconClose_script = {}
 
 ;
-const IconClose_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconClose_script, [['render',IconClosevue_type_template_id_18642c39_render]])
+const IconClose_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconClose_script, [['render',IconClosevue_type_template_id_4ef5457b_render]])
 
 /* harmony default export */ const IconClose = (IconClose_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/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/button/button.vue?vue&type=template&id=88189b5a
@@ -1769,7 +1952,7 @@ function buttonvue_type_template_id_88189b5a_render(_ctx, _cache, $props, $setup
     type: $props.type,
     "aria-live": $options.computedAriaLive,
     "aria-label": $props.loading ? 'loading' : _ctx.$attrs['aria-label']
-  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.buttonListeners)), [$options.shouldRenderIcon() ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.buttonListeners, true)), [$options.shouldRenderIcon() ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
     key: 0,
     "data-qa": "dt-button-icon",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['base-button__icon', 'd-btn__icon', $data.ICON_POSITION_MODIFIERS[$props.iconPosition]])
@@ -1830,7 +2013,11 @@ const INVALID_COMBINATION = [{
 }];
 
 function _invalidCombinationMessage(circle, kind, importance) {
-  return "You cannot have a ".concat(circle ? 'circle ' : '', "button with kind: ").concat(kind, " and importance: ").concat(importance, " as it does not exist in our design system. See https://dialpad.design/components/button for a list of available button styles");
+  return `You cannot have a ${circle ? 'circle ' : ''}button \
+with kind: ${kind} and importance: ${importance} as it \
+does not exist in our design system. \
+See https://dialpad.design/components/button for a \
+list of available button styles`;
 }
 
 /* harmony default export */ const button_constants = ({
@@ -2174,8 +2361,8 @@ const notice_action_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(noti
 /* harmony default export */ const notice_action = (notice_action_exports_);
 ;// CONCATENATED MODULE: ./common/mixins/modal.js
 const focusableAttrs = ':not(:disabled):not([aria-disabled="true"])';
-const tabbableAttrs = "".concat(focusableAttrs, ":not([tabindex=\"-1\"])");
-const focusableElementsList = "button,[href],input,select,textarea,details,[tabindex]";
+const tabbableAttrs = `${focusableAttrs}:not([tabindex="-1"])`;
+const focusableElementsList = `button,[href],input,select,textarea,details,[tabindex]`;
 /**
  * this mixin provides the methods to automatically trap tab focus within
  * the component this mixin is on, meaning it is not possible to tab out
@@ -2380,6 +2567,39 @@ const focusableElementsList = "button,[href],input,select,textarea,details,[tabi
     hideClose: {
       type: Boolean,
       default: false
+    },
+
+    /**
+     * Hides the icon from the notice
+     */
+    hideIcon: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Inner dialog class
+     */
+    dialogClass: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Banner background image
+     */
+    backgroundImage: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Background image size, follows the background-size CSS property values
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
+     */
+    backgroundSize: {
+      type: String,
+      default: 'cover'
     }
   },
   emits: [
@@ -2406,6 +2626,12 @@ const focusableElementsList = "button,[href],input,select,textarea,details,[tabi
         'd-banner--important': this.important,
         'd-banner--pinned': this.pinned
       }];
+    },
+
+    bannerBackgroundImage() {
+      if (this.backgroundImage === '') return null;
+      return `background-image: url(${this.backgroundImage});
+              background-size: ${this.backgroundSize};`;
     }
 
   },
@@ -2433,7 +2659,7 @@ const focusableElementsList = "button,[href],input,select,textarea,details,[tabi
 
 
 ;
-const banner_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(bannervue_type_script_lang_js, [['render',bannervue_type_template_id_5c7f46e2_render]])
+const banner_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(bannervue_type_script_lang_js, [['render',bannervue_type_template_id_b340d796_render]])
 
 /* harmony default export */ const banner = (banner_exports_);
 ;// CONCATENATED MODULE: ./components/banner/index.js
@@ -2656,7 +2882,7 @@ const breadcrumb_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(br
 
   methods: {
     getBreadcrumbItemKey(index) {
-      return "breadcrumbs-item-".concat(index, "-").concat(utils.getUniqueString());
+      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;
     }
 
   }
@@ -2730,13 +2956,93 @@ const button_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(butto
 ;// CONCATENATED MODULE: ./components/button_group/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/combobox/combobox.vue?vue&type=template&id=1b1d987e
+;// 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/card/card.vue?vue&type=template&id=092db2a1
+
+function cardvue_type_template_id_092db2a1_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.createElementBlock)("div", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-card', $props.containerClass]),
+    "data-qa": "dt-card"
+  }, [_ctx.$slots.header ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+    key: 0,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-card__header', $props.headerClass])
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-card__content', $props.contentClass]),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
+      'max-height': $props.maxHeight
+    })
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "content")], 6), _ctx.$slots.footer ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+    key: 1,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-card__footer', $props.footerClass])
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
+}
+;// CONCATENATED MODULE: ./components/card/card.vue?vue&type=template&id=092db2a1
+
+;// 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]!./components/card/card.vue?vue&type=script&lang=js
+/* harmony default export */ const cardvue_type_script_lang_js = ({
+  name: 'DtCard',
+  props: {
+    /**
+     * The maximum height of the card content.
+     * If given, makes content area scrollable.
+     */
+    maxHeight: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * class for card container.
+     */
+    containerClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * class for card content.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * class for card header.
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * class for card footer.
+     */
+    footerClass: {
+      type: [String, Array, Object],
+      default: ''
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/card/card.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/card/card.vue
+
+
 
-const comboboxvue_type_template_id_1b1d987e_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
-const comboboxvue_type_template_id_1b1d987e_hoisted_2 = {
+
+;
+const card_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(cardvue_type_script_lang_js, [['render',cardvue_type_template_id_092db2a1_render]])
+
+/* harmony default export */ const card = (card_exports_);
+;// CONCATENATED MODULE: ./components/card/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/combobox/combobox.vue?vue&type=template&id=7ec6d064
+
+const comboboxvue_type_template_id_7ec6d064_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
+const comboboxvue_type_template_id_7ec6d064_hoisted_2 = {
   "data-qa": "dt-combobox-input-wrapper"
 };
-function comboboxvue_type_template_id_1b1d987e_render(_ctx, _cache, $props, $setup, $data, $options) {
+function comboboxvue_type_template_id_7ec6d064_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
@@ -2748,7 +3054,7 @@ function comboboxvue_type_template_id_1b1d987e_render(_ctx, _cache, $props, $set
     "aria-owns": $props.listId,
     "aria-haspopup": "listbox",
     onKeydown: [_cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEscapeKey'), ["stop"]), ["esc"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEnterKey'), ["exact"]), ["enter"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onUpKey'), ["stop", "prevent"]), ["up"])), _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onDownKey'), ["stop", "prevent"]), ["down"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKey'), ["stop", "prevent"]), ["home"])), _cache[8] || (_cache[8] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEndKey'), ["stop", "prevent"]), ["end"]))]
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_1b1d987e_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_7ec6d064_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
     inputProps: $options.inputProps
   })]), $props.showList ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
@@ -2763,9 +3069,9 @@ function comboboxvue_type_template_id_1b1d987e_render(_ctx, _cache, $props, $set
     onMousemoveCapture: _cache[2] || (_cache[2] = function () {
       return $options.onMouseHighlight && $options.onMouseHighlight(...arguments);
     })
-  }, [$data.isLoading && !$props.listRenderedOutside ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, [$props.loading && !$props.listRenderedOutside ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0
-  }, $options.listProps)), null, 16)) : $data.isListEmpty && !$props.listRenderedOutside ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, $options.listProps)), null, 16)) : $props.emptyList && $props.emptyStateMessage && !$props.listRenderedOutside ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 1
   }, $options.listProps, {
     message: $props.emptyStateMessage
@@ -2773,12 +3079,10 @@ function comboboxvue_type_template_id_1b1d987e_render(_ctx, _cache, $props, $set
     key: 2,
     listProps: $options.listProps,
     opened: $options.onOpen,
-    clearHighlightIndex: $options.clearHighlightIndex,
-    isLoading: $data.isLoading,
-    isListEmpty: $data.isListEmpty
-  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 40, comboboxvue_type_template_id_1b1d987e_hoisted_1);
+    clearHighlightIndex: $options.clearHighlightIndex
+  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 40, comboboxvue_type_template_id_7ec6d064_hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=1b1d987e
+;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=7ec6d064
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
 /* harmony default export */ const dom = ({
@@ -2999,7 +3303,7 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
           return null;
         }
 
-        return Array.from(listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")));
+        return Array.from(listElement.querySelectorAll(`[role="${listItemRole}"]`));
       },
 
       onUpKey() {
@@ -3106,8 +3410,8 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
           return;
         }
 
-        const listItems = Array.from(listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")));
-        return listItems.indexOf(listElement.querySelector("#".concat(id)));
+        const listItems = Array.from(listElement.querySelectorAll(`[role="${listItemRole}"]`));
+        return listItems.indexOf(listElement.querySelector(`#${id}`));
       },
 
       _getItemId(index) {
@@ -3119,7 +3423,7 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
           return;
         }
 
-        return (_listElement$querySel = listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]"))[index]) === null || _listElement$querySel === void 0 ? void 0 : _listElement$querySel.id;
+        return (_listElement$querySel = listElement.querySelectorAll(`[role="${listItemRole}"]`)[index]) === null || _listElement$querySel === void 0 ? void 0 : _listElement$querySel.id;
       },
 
       scrollActiveItemIntoViewIfNeeded() {
@@ -3182,14 +3486,15 @@ 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=7d7cfe61
+;// 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
 
-function list_itemvue_type_template_id_7d7cfe61_render(_ctx, _cache, $props, $setup, $data, $options) {
+function list_itemvue_type_template_id_3ad806bf_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', {
       'dt-list-item--focusable': $options.isFocusable,
-      'dt-list-item--highlighted': $options.isHighlighted
+      'dt-list-item--highlighted': $options.isHighlighted,
+      'dt-list-item--static': !$options.isHoverable
     }],
     tabindex: $options.isFocusable ? 0 : -1,
     role: $props.role,
@@ -3210,7 +3515,7 @@ function list_itemvue_type_template_id_7d7cfe61_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=7d7cfe61
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=3ad806bf
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item_constants.js
 const LIST_ITEM_TYPES = {
@@ -3408,13 +3713,6 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 
           this.$emit('keydown', event);
         },
-        mousedown: event => {
-          if (!this.isFocusable) {
-            event.preventDefault();
-          }
-
-          this.$emit('mousedown', event);
-        },
         mousemove: event => {
           this.onMouseHover(event);
           this.$emit('mousemove', event);
@@ -3470,9 +3768,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=7d7cfe61&lang=less
-var list_itemvue_type_style_index_0_id_7d7cfe61_lang_less = __webpack_require__(537);
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=7d7cfe61&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=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
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue
 
@@ -3482,7 +3780,7 @@ var list_itemvue_type_style_index_0_id_7d7cfe61_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_7d7cfe61_render]])
+const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_3ad806bf_render]])
 
 /* harmony default export */ const list_item = (list_item_exports_);
 ;// CONCATENATED MODULE: ./components/list_item/index.js
@@ -3601,8 +3899,8 @@ const SKELETON_HEADING_HEIGHTS = {
 
       const animationDelay = this.skeletonOffset * SKELETON_RIPPLE_DURATION / 1000;
       const animationDuration = this.animationDuration === -1 ? 1000 : this.animationDuration;
-      style.animationDelay = "".concat(animationDelay, "ms");
-      style.animationDuration = "".concat(animationDuration, "ms");
+      style.animationDelay = `${animationDelay}ms`;
+      style.animationDuration = `${animationDuration}ms`;
       return style;
     }
 
@@ -3880,7 +4178,7 @@ const validator = number => number !== '' && !Number.isNaN(Number(number));
     randomWidthPercentage() {
       const min = Math.min(this.minWidth, this.maxWidth);
       const max = Math.max(this.minWidth, this.maxWidth);
-      return "".concat(Math.round(Math.random() * (max - min)) + min, "%");
+      return `${Math.round(Math.random() * (max - min)) + min}%`;
     },
 
     getSizeParagraphRow(row) {
@@ -4049,10 +4347,10 @@ const skeleton_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
       });
 
       if (filtered.length >= 2) {
-        const errorMessage = "Use only one of ".concat(filtered.map(_ref2 => {
+        const errorMessage = `Use only one of ${filtered.map(_ref2 => {
           let [key] = _ref2;
           return key;
-        }).join(' | '), " options at the same time");
+        }).join(' | ')} options at the same time`;
         console.error(errorMessage);
       }
     }
@@ -4231,6 +4529,14 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
       default: false
     },
 
+    /**
+     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
+     */
+    emptyList: {
+      type: Boolean,
+      default: false
+    },
+
     /**
      * Message to show when the list is empty
      */
@@ -4273,9 +4579,7 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
       // If the list is rendered at the root, rather than as a child
       // of this component, this is the ref to that dom element. Set
       // by the onOpen method.
-      outsideRenderedListRef: null,
-      isListEmpty: undefined,
-      isLoading: undefined
+      outsideRenderedListRef: null
     };
   },
 
@@ -4335,25 +4639,28 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
       if (!showList && this.outsideRenderedListRef) {
         this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);
         this.outsideRenderedListRef = null;
-        this.isListEmpty = undefined;
       }
     },
 
-    loading(isLoading) {
-      this.isListEmpty = undefined;
-      this.isLoading = isLoading;
+    loading(loading) {
       this.$nextTick(() => {
-        this.isListEmpty = this.checkItemsLength();
         this.setInitialHighlightIndex();
       });
-    }
+    },
 
+    $props: {
+      deep: true,
+      immediate: true,
+
+      handler() {
+        this.validateEmptyListProps();
+      }
+
+    }
   },
 
-  async mounted() {
-    this.isLoading = this.loading;
-    await this.$nextTick();
-    this.isListEmpty = this.checkItemsLength();
+  created() {
+    this.validateEmptyListProps();
   },
 
   methods: {
@@ -4369,7 +4676,7 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
     getListElement() {
       var _this$outsideRendered, _this$$refs$listWrapp;
 
-      return (_this$outsideRendered = this.outsideRenderedListRef) !== null && _this$outsideRendered !== void 0 ? _this$outsideRendered : (_this$$refs$listWrapp = this.$refs.listWrapper) === null || _this$$refs$listWrapp === void 0 ? void 0 : _this$$refs$listWrapp.querySelector("#".concat(this.listId));
+      return (_this$outsideRendered = this.outsideRenderedListRef) !== null && _this$outsideRendered !== void 0 ? _this$outsideRendered : (_this$$refs$listWrapp = this.$refs.listWrapper) === null || _this$$refs$listWrapp === void 0 ? void 0 : _this$$refs$listWrapp.querySelector(`#${this.listId}`);
     },
 
     clearHighlightIndex() {
@@ -4384,7 +4691,7 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
     },
 
     onEnterKey() {
-      if (this.loading || this.isListEmpty) return;
+      if (this.loading || this.emptyList) return;
 
       if (this.highlightIndex >= 0) {
         this.$emit('select', this.highlightIndex);
@@ -4403,7 +4710,6 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
       this.$emit('opened', open);
 
       if (open) {
-        this.isListEmpty = this.checkItemsLength();
         this.setInitialHighlightIndex();
       }
     },
@@ -4422,11 +4728,11 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
       });
     },
 
-    checkItemsLength() {
-      if (!this.showList) return undefined;
-      const list = this.getListElement();
-      const options = list === null || list === void 0 ? void 0 : list.querySelectorAll("[role=\"option\"]");
-      return (options === null || options === void 0 ? void 0 : options.length) === 0;
+    validateEmptyListProps() {
+      if (this.emptyList && !this.emptyStateMessage || !this.emptyList && this.emptyStateMessage) {
+        console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the
+      empty message.`);
+      }
     }
 
   }
@@ -4439,31 +4745,582 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
 
 
 ;
-const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_1b1d987e_render]])
+const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_7ec6d064_render]])
 
 /* harmony default export */ const combobox = (combobox_exports_);
 ;// CONCATENATED MODULE: ./components/combobox/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/dropdown/dropdown.vue?vue&type=template&id=2335f54b
+;// 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/collapsible/collapsible.vue?vue&type=template&id=49f5efb1
 
-const dropdownvue_type_template_id_2335f54b_hoisted_1 = ["id"];
-function dropdownvue_type_template_id_2335f54b_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
+const collapsiblevue_type_template_id_49f5efb1_hoisted_1 = ["id"];
+const collapsiblevue_type_template_id_49f5efb1_hoisted_2 = ["title"];
+function collapsiblevue_type_template_id_49f5efb1_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_icon_arrow_accordion_open = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-arrow-accordion-open");
 
-  return (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)({
-    ref: "popover",
-    "content-width": $props.contentWidth,
-    open: $props.open,
-    placement: $props.placement,
-    "initial-focus-element": $data.openedWithKeyboard ? 'first' : 'dialog',
-    "fallback-placements": $props.fallbackPlacements,
-    padding: "none",
-    role: "menu",
-    modal: $props.modal
-  }, _ctx.$attrs, {
-    "max-height": $props.maxHeight,
-    "max-width": $props.maxWidth,
+  const _component_icon_arrow_accordion_closed = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-arrow-accordion-closed");
+
+  const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
+
+  const _component_dt_collapsible_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-collapsible-lazy-show");
+
+  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), {
+    ref: "collapsible"
+  }, {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+      id: !$props.ariaLabelledBy && $options.labelledBy,
+      ref: "anchor",
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-dt-collapsibe__anchor', $props.anchorClass]),
+      onClickCapture: _cache[0] || (_cache[0] = function () {
+        return $options.defaultToggleOpen && $options.defaultToggleOpen(...arguments);
+      }),
+      onKeydown: [_cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)(function () {
+        return $options.defaultToggleOpen && $options.defaultToggleOpen(...arguments);
+      }, ["enter"])), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)(function () {
+        return $options.defaultToggleOpen && $options.defaultToggleOpen(...arguments);
+      }, ["space"]))]
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "anchor", {
+      attrs: {
+        'aria-controls': $props.id,
+        'aria-expanded': $data.isOpen.toString(),
+        'role': 'button'
+      }
+    }, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+      importance: "clear",
+      kind: "muted",
+      "aria-controls": $props.id,
+      "aria-expanded": `${$data.isOpen}`,
+      style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
+        'width': $props.maxWidth
+      })
+    }, {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.isOpen ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_icon_arrow_accordion_open, {
+        key: 0,
+        class: "d-svg--size18 d-mr8 d-fl-shrink0"
+      })) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_icon_arrow_accordion_closed, {
+        key: 1,
+        class: "d-svg--size18 d-mr8 d-fl-shrink0"
+      })), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", {
+        class: "d-mr-auto d-truncate",
+        title: $props.anchorText
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.anchorText), 9, collapsiblevue_type_template_id_49f5efb1_hoisted_2)]),
+      _: 1
+    }, 8, ["aria-controls", "aria-expanded", "style"])])], 42, collapsiblevue_type_template_id_49f5efb1_hoisted_1), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_collapsible_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+      id: $props.id,
+      ref: "contentWrapper",
+      "aria-hidden": `${!$data.isOpen}`,
+      "aria-labelledby": $options.labelledBy,
+      "aria-label": $props.ariaLabel,
+      show: $data.isOpen,
+      "element-type": $props.contentElementType,
+      class: ['d-dt-collapsible__content', $props.contentClass],
+      style: {
+        'max-height': $props.maxHeight,
+        'max-width': $props.maxWidth
+      },
+      tabindex: "-1",
+      appear: ""
+    }, _ctx.$attrs, {
+      onAfterLeave: $options.onLeaveTransitionComplete,
+      onAfterEnter: $options.onEnterTransitionComplete
+    }), {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "content")]),
+      _: 3
+    }, 16, ["id", "aria-hidden", "aria-labelledby", "aria-label", "show", "element-type", "class", "style", "onAfterLeave", "onAfterEnter"])]),
+    _: 3
+  }, 512);
+}
+;// CONCATENATED MODULE: ./components/collapsible/collapsible.vue?vue&type=template&id=49f5efb1
+
+;// 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/collapsible/collapsible_lazy_show.vue?vue&type=template&id=49e7370e
+
+function collapsible_lazy_showvue_type_template_id_49e7370e_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)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    appear: $props.appear,
+    "enter-active-class": "enter-active",
+    "leave-active-class": "leave-active"
+  }, _ctx.$attrs, {
+    onBeforeEnter: $options.beforeEnter,
+    onEnter: $options.enter,
+    onAfterEnter: $options.afterEnter,
+    onBeforeLeave: $options.beforeLeave,
+    onLeave: $options.leave,
+    onAfterLeave: $options.afterLeave
+  }), {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)(((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.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)(_ctx.$attrs)), {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.initialized ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
+        key: 0
+      }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
+      _: 3
+    }, 16)), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
+    _: 3
+  }, 16, ["appear", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
+}
+;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=template&id=49e7370e
+
+;// 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]!./components/collapsible/collapsible_lazy_show.vue?vue&type=script&lang=js
+/* harmony default export */ const collapsible_lazy_showvue_type_script_lang_js = ({
+  name: 'DtCollapsibleLazyShow',
+  inheritAttrs: false,
+
+  /******************
+   *     PROPS      *
+   ******************/
+  props: {
+    /**
+     * Whether the child slot is shown.
+     */
+    show: Boolean,
+    appear: {
+      type: Boolean,
+      default: false
+    },
+    elementType: {
+      type: String,
+      default: 'div'
+    }
+  },
+
+  /******************
+   *      DATA      *
+   ******************/
+  data() {
+    return {
+      initialized: !!this.show
+    };
+  },
+
+  /******************
+   *      WATCH     *
+   ******************/
+  watch: {
+    show: function (newValue) {
+      if (!newValue || this.initialized) return;
+      this.initialized = true;
+    }
+  },
+  methods: {
+    /**
+     * @param {HTMLElement} element
+     */
+    beforeEnter(element) {
+      requestAnimationFrame(() => {
+        if (!element.style.height) {
+          element.style.height = '0px';
+        }
+
+        element.style.display = null;
+      });
+    },
+
+    /**
+     * @param {HTMLElement} element
+     */
+    enter(element) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          element.style.height = `${element.scrollHeight}px`;
+        });
+      });
+    },
+
+    /**
+     * @param {HTMLElement} element
+     */
+    afterEnter(element) {
+      element.style.height = null;
+    },
+
+    /**
+     * @param {HTMLElement} element
+     */
+    beforeLeave(element) {
+      requestAnimationFrame(() => {
+        if (!element.style.height) {
+          element.style.height = `${element.offsetHeight}px`;
+        }
+      });
+    },
+
+    /**
+     * @param {HTMLElement} element
+     */
+    leave(element) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          element.style.height = '0px';
+        });
+      });
+    },
+
+    /**
+     * @param {HTMLElement} element
+     */
+    afterLeave(element) {
+      element.style.height = null;
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=script&lang=js
+ 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/collapsible/collapsible_lazy_show.vue?vue&type=style&index=0&id=49e7370e&lang=css
+var collapsible_lazy_showvue_type_style_index_0_id_49e7370e_lang_css = __webpack_require__(816);
+;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=style&index=0&id=49e7370e&lang=css
+
+;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue
+
+
+
+
+;
+
+
+const collapsible_lazy_show_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collapsible_lazy_showvue_type_script_lang_js, [['render',collapsible_lazy_showvue_type_template_id_49e7370e_render]])
+
+/* harmony default export */ const collapsible_lazy_show = (collapsible_lazy_show_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/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/lazy_show/lazy_show.vue?vue&type=template&id=7659d16a
+
+function lazy_showvue_type_template_id_7659d16a_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)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    name: $props.transition,
+    appear: $props.appear
+  }, _ctx.$attrs), {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)(_ctx.$attrs)), [$data.initialized ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
+      key: 0
+    }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 16), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
+    _: 3
+  }, 16, ["name", "appear"]);
+}
+;// CONCATENATED MODULE: ./components/lazy_show/lazy_show.vue?vue&type=template&id=7659d16a
+
+;// 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]!./components/lazy_show/lazy_show.vue?vue&type=script&lang=js
+/* harmony default export */ const lazy_showvue_type_script_lang_js = ({
+  name: 'DtLazyShow',
+  inheritAttrs: false,
+
+  /******************
+   *     PROPS      *
+   ******************/
+  props: {
+    /**
+     * Whether the child slot is shown.
+     */
+    show: Boolean,
+
+    /**
+     * A valid Vue enter/leave CSS transition name.
+     */
+    transition: {
+      type: String,
+      default: null
+    },
+    appear: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  /******************
+   *      DATA      *
+   ******************/
+  data() {
+    return {
+      initialized: !!this.show
+    };
+  },
+
+  /******************
+   *      WATCH     *
+   ******************/
+  watch: {
+    show: function (newValue) {
+      if (!newValue || this.initialized) return;
+      this.initialized = true;
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/lazy_show/lazy_show.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/lazy_show/lazy_show.vue
+
+
+
+
+;
+const lazy_show_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(lazy_showvue_type_script_lang_js, [['render',lazy_showvue_type_template_id_7659d16a_render]])
+
+/* harmony default export */ const lazy_show = (lazy_show_exports_);
+;// CONCATENATED MODULE: ./components/lazy_show/index.js
+
+;// 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/IconArrowAccordionOpen.vue?vue&type=template&id=67591df8
+
+
+const IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_1 = {
+  "aria-hidden": "true",
+  focusable: "false",
+  "aria-label": "Arrow Accordion Open",
+  class: "d-svg d-svg--system d-svg__arrowAccordionOpen",
+  viewBox: "0 0 24 24"
+}
+const IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M8.738 8a1 1 0 0 0-.865 1.502l3.262 5.614a1 1 0 0 0 1.73 0l3.262-5.614A1 1 0 0 0 15.262 8H8.738Z" }, null, -1)
+const IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_3 = [
+  IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_2
+]
+
+function IconArrowAccordionOpenvue_type_template_id_67591df8_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", IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_1, IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_3))
+}
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionOpen.vue?vue&type=template&id=67591df8
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionOpen.vue
+
+const IconArrowAccordionOpen_script = {}
+
+;
+const IconArrowAccordionOpen_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowAccordionOpen_script, [['render',IconArrowAccordionOpenvue_type_template_id_67591df8_render]])
+
+/* harmony default export */ const IconArrowAccordionOpen = (IconArrowAccordionOpen_exports_);
+;// 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/IconArrowAccordionClosed.vue?vue&type=template&id=5e7762fe
+
+
+const IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_1 = {
+  "aria-hidden": "true",
+  focusable: "false",
+  "aria-label": "Arrow Accordion Closed",
+  class: "d-svg d-svg--system d-svg__arrowAccordionClosed",
+  viewBox: "0 0 24 24"
+}
+const IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M8 15.262a1 1 0 0 0 1.502.865l5.614-3.262a1 1 0 0 0 0-1.73L9.502 7.873A1 1 0 0 0 8 8.738v6.524Z" }, null, -1)
+const IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_3 = [
+  IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_2
+]
+
+function IconArrowAccordionClosedvue_type_template_id_5e7762fe_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", IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_1, IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_3))
+}
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionClosed.vue?vue&type=template&id=5e7762fe
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionClosed.vue
+
+const IconArrowAccordionClosed_script = {}
+
+;
+const IconArrowAccordionClosed_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowAccordionClosed_script, [['render',IconArrowAccordionClosedvue_type_template_id_5e7762fe_render]])
+
+/* harmony default export */ const IconArrowAccordionClosed = (IconArrowAccordionClosed_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]!./components/collapsible/collapsible.vue?vue&type=script&lang=js
+
+
+
+
+
+
+/* harmony default export */ const collapsiblevue_type_script_lang_js = ({
+  name: 'DtCollapsible',
+  components: {
+    DtButton: button_button,
+    DtCollapsibleLazyShow: collapsible_lazy_show,
+    DtLazyShow: lazy_show,
+    IconArrowAccordionOpen: IconArrowAccordionOpen,
+    IconArrowAccordionClosed: IconArrowAccordionClosed
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Text that is displayed on the anchor if nothing is passed in the slot.
+     * Ignored if the anchor slot is used.
+     */
+    anchorText: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start
+     * expanded and trigger on click by default. If you set this value, the default trigger
+     * behavior will be disabled and you can control it as you need.
+     * Supports .sync modifier
+     */
+    open: {
+      type: Boolean,
+      default: null
+    },
+
+    /**
+     * The id of the content wrapper.
+     */
+    id: {
+      type: String,
+
+      default() {
+        return getUniqueString();
+      }
+
+    },
+
+    /**
+     * Element type (tag name) of the root element of the component.
+     */
+    elementType: {
+      type: String,
+      default: 'div'
+    },
+
+    /**
+     * Element type (tag name) of the content wrapper element.
+     */
+    contentElementType: {
+      type: String,
+      default: 'div'
+    },
+
+    /**
+     * Additional class name for the anchor wrapper element.
+     */
+    anchorClass: {
+      type: [String, Array, Object],
+      default: null
+    },
+
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: null
+    },
+
+    /**
+     * The maximum width of the anchor and collapsible element.
+     * Possible units rem|px|%|em
+     */
+    maxWidth: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * The maximum height of the collapsible element.
+     * Possible units rem|px|%|em
+     */
+    maxHeight: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.
+     */
+    ariaLabel: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * Id of the element that labels the collapsible content. Defaults to the anchor element.
+     * Should provide this or ariaLabel but not both.
+     */
+    ariaLabelledBy: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ['update:open', 'opened'],
+
+  data() {
+    return {
+      isOpen: true
+    };
+  },
+
+  computed: {
+    labelledBy() {
+      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if
+      // there is no aria-label and the labelledby should point to the anchor
+      return this.ariaLabelledby || !this.ariaLabel && getUniqueString('DtCollapsible__anchor');
+    },
+
+    contentStyle() {
+      return {
+        'max-height': this.maxHeight,
+        'max-width': this.maxWidth
+      };
+    }
+
+  },
+  watch: {
+    open: {
+      handler: function (open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    onLeaveTransitionComplete() {
+      this.$emit('opened', false);
+
+      if (this.open !== null) {
+        this.$emit('update:open', false);
+      }
+    },
+
+    onEnterTransitionComplete() {
+      this.$emit('opened', true, this.$refs.content);
+
+      if (this.open !== null) {
+        this.$emit('update:open', true);
+      }
+    },
+
+    defaultToggleOpen() {
+      if (this.open === null) {
+        this.toggleOpen();
+      }
+    },
+
+    toggleOpen() {
+      this.isOpen = !this.isOpen;
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/collapsible/collapsible.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/collapsible/collapsible.vue
+
+
+
+
+;
+const collapsible_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collapsiblevue_type_script_lang_js, [['render',collapsiblevue_type_template_id_49f5efb1_render]])
+
+/* harmony default export */ const collapsible = (collapsible_exports_);
+;// CONCATENATED MODULE: ./components/collapsible/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/dropdown/dropdown.vue?vue&type=template&id=a4809d24
+
+const dropdownvue_type_template_id_a4809d24_hoisted_1 = ["id"];
+function dropdownvue_type_template_id_a4809d24_render(_ctx, _cache, $props, $setup, $data, $options) {
+  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.createBlock)(_component_dt_popover, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    ref: "popover",
+    "content-width": $props.contentWidth,
+    open: $props.open,
+    placement: $props.placement,
+    "initial-focus-element": $data.openedWithKeyboard ? 'first' : 'dialog',
+    "fallback-placements": $props.fallbackPlacements,
+    padding: "none",
+    role: "menu",
+    modal: $props.modal
+  }, _ctx.$attrs, {
+    "max-height": $props.maxHeight,
+    "max-width": $props.maxWidth,
     "open-with-arrow-keys": true,
+    "open-on-context": $props.openOnContext,
     onOpened: $options.updateInitialHighlightIndex,
     onKeydown: [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.onEnterKey, ["enter"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.onSpaceKey, ["space"]), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onUpKeyPress'), ["stop", "prevent"]), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onDownKeyPress'), ["stop", "prevent"]), ["down"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKeyPress'), ["stop", "prevent"]), ["home"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEndKeyPress'), ["stop", "prevent"]), ["end"])), _cache[6] || (_cache[6] = $event => $options.onKeyValidation($event, 'onKeyPress'))]
   }), {
@@ -4482,7 +5339,7 @@ function dropdownvue_type_template_id_2335f54b_render(_ctx, _cache, $props, $set
       return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("ul", {
         id: $props.listId,
         ref: "listWrapper",
-        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-ps-relative', 'd-px0', $data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]),
+        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.listClasses),
         "data-qa": "dt-dropdown-list-wrapper",
         onMouseleave: _cache[0] || (_cache[0] = function () {
           return $options.clearHighlightIndex && $options.clearHighlightIndex(...arguments);
@@ -4492,18 +5349,18 @@ function dropdownvue_type_template_id_2335f54b_render(_ctx, _cache, $props, $set
         })
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
         close: close
-      })], 42, dropdownvue_type_template_id_2335f54b_hoisted_1)];
+      })], 42, dropdownvue_type_template_id_a4809d24_hoisted_1)];
     }),
     _: 3
-  }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "modal", "max-height", "max-width", "onOpened", "onKeydown"]);
+  }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "modal", "max-height", "max-width", "open-on-context", "onOpened", "onKeydown"]);
 }
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=2335f54b
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=a4809d24
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=0fe0a777
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=bad0388e
 
-const popovervue_type_template_id_0fe0a777_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_0fe0a777_hoisted_2 = ["id"];
-function popovervue_type_template_id_0fe0a777_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_bad0388e_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_bad0388e_hoisted_2 = ["id", "tabindex"];
+function popovervue_type_template_id_bad0388e_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_popover_header_footer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("popover-header-footer");
 
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
@@ -4515,7 +5372,7 @@ function popovervue_type_template_id_0fe0a777_render(_ctx, _cache, $props, $setu
     class: "d-modal--transparent",
     "aria-hidden": $props.modal && $data.isOpen ? 'false' : 'true',
     onClick: _cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent", "stop"]))
-  }, null, 8, popovervue_type_template_id_0fe0a777_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
+  }, null, 8, popovervue_type_template_id_bad0388e_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
     ref: "popover",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-popover', {
       'd-popover__anchor--modal-opened': $props.modal && $data.isOpen
@@ -4526,16 +5383,20 @@ function popovervue_type_template_id_0fe0a777_render(_ctx, _cache, $props, $setu
       id: !$props.ariaLabelledby && $options.labelledBy,
       ref: "anchor",
       "data-qa": "dt-popover-anchor",
+      tabindex: $props.openOnContext ? 0 : undefined,
       onClickCapture: _cache[1] || (_cache[1] = function () {
         return $options.defaultToggleOpen && $options.defaultToggleOpen(...arguments);
       }),
-      onKeydown: [_cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
+      onContextmenu: _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
+        return $options.onContext && $options.onContext(...arguments);
+      }, ["prevent"])),
+      onKeydown: [_cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
         return $options.onArrowKeyPress && $options.onArrowKeyPress(...arguments);
-      }, ["prevent"]), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
+      }, ["prevent"]), ["up"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(function () {
         return $options.onArrowKeyPress && $options.onArrowKeyPress(...arguments);
       }, ["prevent"]), ["down"]))],
-      onWheel: _cache[4] || (_cache[4] = e => $data.isOpen && $props.modal && e.preventDefault()),
-      onKeydownCapture: _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)(function () {
+      onWheel: _cache[5] || (_cache[5] = e => $data.isOpen && $props.modal && e.preventDefault()),
+      onKeydownCapture: _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)(function () {
         return $options.closePopover && $options.closePopover(...arguments);
       }, ["escape"]))
     }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "anchor", {
@@ -4544,15 +5405,15 @@ function popovervue_type_template_id_0fe0a777_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_0fe0a777_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, {
+    })], 40, popovervue_type_template_id_bad0388e_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, {
       id: $props.id,
       ref: "content",
       role: $props.role,
       "data-qa": "dt-popover",
-      "aria-hidden": "".concat(!$data.isOpen),
+      "aria-hidden": `${!$data.isOpen}`,
       "aria-labelledby": $options.labelledBy,
       "aria-label": $props.ariaLabel,
-      "aria-modal": "".concat(!$props.modal),
+      "aria-modal": `${!$props.modal}`,
       transition: $props.transition,
       show: $data.isOpen,
       appear: "",
@@ -4606,7 +5467,7 @@ function popovervue_type_template_id_0fe0a777_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=0fe0a777
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=bad0388e
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -4649,41 +5510,63 @@ function isShadowRoot(node) {
 var math_max = Math.max;
 var math_min = Math.min;
 var round = Math.round;
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/userAgent.js
+function getUAString() {
+  var uaData = navigator.userAgentData;
+
+  if (uaData != null && uaData.brands) {
+    return uaData.brands.map(function (item) {
+      return item.brand + "/" + item.version;
+    }).join(' ');
+  }
+
+  return navigator.userAgent;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isLayoutViewport.js
+
+function isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
 
 
-function getBoundingClientRect(element, includeScale) {
+
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
   if (includeScale === void 0) {
     includeScale = false;
   }
 
-  var rect = element.getBoundingClientRect();
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+
+  var clientRect = element.getBoundingClientRect();
   var scaleX = 1;
   var scaleY = 1;
 
-  if (isHTMLElement(element) && includeScale) {
-    var offsetHeight = element.offsetHeight;
-    var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
-    // Fallback to 1 in case both values are `0`
-
-    if (offsetWidth > 0) {
-      scaleX = round(rect.width) / offsetWidth || 1;
-    }
-
-    if (offsetHeight > 0) {
-      scaleY = round(rect.height) / offsetHeight || 1;
-    }
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
   }
 
+  var _ref = isElement(element) ? getWindow(element) : window,
+      visualViewport = _ref.visualViewport;
+
+  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+  var width = clientRect.width / scaleX;
+  var height = clientRect.height / scaleY;
   return {
-    width: rect.width / scaleX,
-    height: rect.height / scaleY,
-    top: rect.top / scaleY,
-    right: rect.right / scaleX,
-    bottom: rect.bottom / scaleY,
-    left: rect.left / scaleX,
-    x: rect.left / scaleX,
-    y: rect.top / scaleY
+    width: width,
+    height: height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x: x,
+    y: y
   };
 }
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScroll.js
@@ -4784,7 +5667,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
   var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
   var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -4919,6 +5802,7 @@ function isTableElement(element) {
 
 
 
+
 function getTrueOffsetParent(element) {
   if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
   getComputedStyle(element).position === 'fixed') {
@@ -4931,8 +5815,8 @@ function getTrueOffsetParent(element) {
 
 
 function getContainingBlock(element) {
-  var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
-  var isIE = navigator.userAgent.indexOf('Trident') !== -1;
+  var isFirefox = /firefox/i.test(getUAString());
+  var isIE = /Trident/i.test(getUAString());
 
   if (isIE && isHTMLElement(element)) {
     // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
@@ -5806,31 +6690,22 @@ function getOppositeVariationPlacement(placement) {
 
 
 
-function getViewportRect(element) {
+
+function getViewportRect(element, strategy) {
   var win = getWindow(element);
   var html = getDocumentElement(element);
   var visualViewport = win.visualViewport;
   var width = html.clientWidth;
   var height = html.clientHeight;
   var x = 0;
-  var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper
-  // can be obscured underneath it.
-  // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
-  // if it isn't open, so if this isn't available, the popper will be detected
-  // to overflow the bottom of the screen too early.
+  var y = 0;
 
   if (visualViewport) {
     width = visualViewport.width;
-    height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently)
-    // In Chrome, it returns a value very close to 0 (+/-) but contains rounding
-    // errors due to floating point numbers, so we need to check precision.
-    // Safari returns a number <= 0, usually < -1 when pinch-zoomed
-    // Feature detection fails in mobile emulation mode in Chrome.
-    // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
-    // 0.001
-    // Fallback here: "Not Safari" userAgent
-
-    if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+    height = visualViewport.height;
+    var layoutViewport = isLayoutViewport();
+
+    if (layoutViewport || !layoutViewport && strategy === 'fixed') {
       x = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
     }
@@ -5922,8 +6797,8 @@ function rectToClientRect(rect) {
 
 
 
-function getInnerBoundingClientRect(element) {
-  var rect = getBoundingClientRect(element);
+function getInnerBoundingClientRect(element, strategy) {
+  var rect = getBoundingClientRect(element, false, strategy === 'fixed');
   rect.top = rect.top + element.clientTop;
   rect.left = rect.left + element.clientLeft;
   rect.bottom = rect.top + element.clientHeight;
@@ -5935,8 +6810,8 @@ function getInnerBoundingClientRect(element) {
   return rect;
 }
 
-function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+function getClientRectFromMixedType(element, clippingParent, strategy) {
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 } // A "clipping parent" is an overflowable container with the characteristic of
 // clipping (or hiding) overflowing elements with a position different from
 // `initial`
@@ -5959,18 +6834,18 @@ function getClippingParents(element) {
 // clipping parents
 
 
-function getClippingRect(element, boundary, rootBoundary) {
+function getClippingRect(element, boundary, rootBoundary, strategy) {
   var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
   var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
   var firstClippingParent = clippingParents[0];
   var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
-    var rect = getClientRectFromMixedType(element, clippingParent);
+    var rect = getClientRectFromMixedType(element, clippingParent, strategy);
     accRect.top = math_max(rect.top, accRect.top);
     accRect.right = math_min(rect.right, accRect.right);
     accRect.bottom = math_min(rect.bottom, accRect.bottom);
     accRect.left = math_max(rect.left, accRect.left);
     return accRect;
-  }, getClientRectFromMixedType(element, firstClippingParent));
+  }, getClientRectFromMixedType(element, firstClippingParent, strategy));
   clippingRect.width = clippingRect.right - clippingRect.left;
   clippingRect.height = clippingRect.bottom - clippingRect.top;
   clippingRect.x = clippingRect.left;
@@ -6017,6 +6892,8 @@ function detectOverflow(state, options) {
   var _options = options,
       _options$placement = _options.placement,
       placement = _options$placement === void 0 ? state.placement : _options$placement,
+      _options$strategy = _options.strategy,
+      strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
       _options$boundary = _options.boundary,
       boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
       _options$rootBoundary = _options.rootBoundary,
@@ -6031,7 +6908,7 @@ function detectOverflow(state, options) {
   var altContext = elementContext === popper ? reference : popper;
   var popperRect = state.rects.popper;
   var element = state.elements[altBoundary ? altContext : elementContext];
-  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
+  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
   var referenceClientRect = getBoundingClientRect(state.elements.reference);
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
@@ -9153,78 +10030,6 @@ const POPOVER_CONTENT_WIDTHS = [null, 'anchor'];
 const POPOVER_INITIAL_FOCUS_STRINGS = ['none', 'dialog', 'first'];
 const POPOVER_STICKY_VALUES = [...TIPPY_STICKY_VALUES];
 const POPOVER_DIRECTIONS = [...BASE_TIPPY_DIRECTIONS];
-;// 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/lazy_show/lazy_show.vue?vue&type=template&id=7659d16a
-
-function lazy_showvue_type_template_id_7659d16a_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)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
-    name: $props.transition,
-    appear: $props.appear
-  }, _ctx.$attrs), {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)(_ctx.$attrs)), [$data.initialized ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
-      key: 0
-    }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 16), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
-    _: 3
-  }, 16, ["name", "appear"]);
-}
-;// CONCATENATED MODULE: ./components/lazy_show/lazy_show.vue?vue&type=template&id=7659d16a
-
-;// 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]!./components/lazy_show/lazy_show.vue?vue&type=script&lang=js
-/* harmony default export */ const lazy_showvue_type_script_lang_js = ({
-  name: 'DtLazyShow',
-  inheritAttrs: false,
-
-  /******************
-   *     PROPS      *
-   ******************/
-  props: {
-    /**
-     * Whether the child slot is shown.
-     */
-    show: Boolean,
-
-    /**
-     * A valid Vue enter/leave CSS transition name.
-     */
-    transition: {
-      type: String,
-      default: null
-    },
-    appear: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  /******************
-   *      DATA      *
-   ******************/
-  data() {
-    return {
-      initialized: !!this.show
-    };
-  },
-
-  /******************
-   *      WATCH     *
-   ******************/
-  watch: {
-    show: function (newValue) {
-      if (!newValue || this.initialized) return;
-      this.initialized = true;
-    }
-  }
-});
-;// CONCATENATED MODULE: ./components/lazy_show/lazy_show.vue?vue&type=script&lang=js
- 
-;// CONCATENATED MODULE: ./components/lazy_show/lazy_show.vue
-
-
-
-
-;
-const lazy_show_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(lazy_showvue_type_script_lang_js, [['render',lazy_showvue_type_template_id_7659d16a_render]])
-
-/* harmony default export */ const lazy_show = (lazy_show_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/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover_header_footer.vue?vue&type=template&id=29ff8217
 
 function popover_header_footervue_type_template_id_29ff8217_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -9356,6 +10161,15 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       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.
      */
@@ -9784,8 +10598,12 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     defaultToggleOpen(e) {
-      // 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.
+
+
       if (this.open === null || this.open === undefined) {
         var _this$anchorEl;
 
@@ -9797,6 +10615,29 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       }
     },
 
+    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;
     },
@@ -9842,7 +10683,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     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.
@@ -9850,7 +10691,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
         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) {
@@ -9928,7 +10769,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     async setPopoverContentAnchorWidth() {
       await this.$nextTick();
-      this.popoverContentEl.style.width = "".concat(this.anchorEl.clientWidth, "px");
+      this.popoverContentEl.style.width = `${this.anchorEl.clientWidth}px`;
     },
 
     focusFirstElementIfNeeded(domEl) {
@@ -9950,9 +10791,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 });
 ;// CONCATENATED MODULE: ./components/popover/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]!./components/popover/popover.vue?vue&type=style&index=0&id=0fe0a777&lang=less
-var popovervue_type_style_index_0_id_0fe0a777_lang_less = __webpack_require__(535);
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=0fe0a777&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/popover/popover.vue?vue&type=style&index=0&id=bad0388e&lang=less
+var popovervue_type_style_index_0_id_bad0388e_lang_less = __webpack_require__(318);
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=bad0388e&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -9962,7 +10803,7 @@ var popovervue_type_style_index_0_id_0fe0a777_lang_less = __webpack_require__(53
 ;
 
 
-const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_0fe0a777_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_bad0388e_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -10008,6 +10849,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.
      */
@@ -10163,6 +11013,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
+      }];
     }
 
   },
@@ -10170,7 +11026,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();
       }
@@ -10265,7 +11121,7 @@ const DROPDOWN_PADDING_CLASSES = {
     },
 
     onKeyValidation(e, eventHandler) {
-      if (this.open !== null) {
+      if (this.open !== null && !this.openOnContext) {
         return;
       }
 
@@ -10276,17 +11132,103 @@ const DROPDOWN_PADDING_CLASSES = {
 });
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.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/dropdown/dropdown.vue?vue&type=style&index=0&id=a4809d24&lang=less
+var dropdownvue_type_style_index_0_id_a4809d24_lang_less = __webpack_require__(974);
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=style&index=0&id=a4809d24&lang=less
+
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue
 
 
 
 
 ;
-const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_2335f54b_render]])
+
+
+const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_a4809d24_render]])
 
 /* harmony default export */ const dropdown = (dropdown_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/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown_list.vue?vue&type=template&id=559d9d2e
+
+const dropdown_listvue_type_template_id_559d9d2e_hoisted_1 = {
+  key: 0,
+  class: "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"
+};
+function dropdown_listvue_type_template_id_559d9d2e_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.createElementBlock)("li", null, [$props.heading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", dropdown_listvue_type_template_id_559d9d2e_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.heading), 1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("ul", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-ps-relative', 'd-px0', $props.listClass]),
+    "data-qa": "dt-dropdown-list-wrapper"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2)]);
+}
+;// CONCATENATED MODULE: ./components/dropdown/dropdown_list.vue?vue&type=template&id=559d9d2e
+
+;// 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]!./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
+ 
+;// CONCATENATED MODULE: ./components/dropdown/dropdown_list.vue
+
+
+
+
+;
+const dropdown_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdown_listvue_type_script_lang_js, [['render',dropdown_listvue_type_template_id_559d9d2e_render]])
+
+/* harmony default export */ const dropdown_list = (dropdown_list_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/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown_separator.vue?vue&type=template&id=6a948a17
+
+const dropdown_separatorvue_type_template_id_6a948a17_hoisted_1 = {
+  "aria-hidden": "true",
+  class: "dt-list-separator d-bgc-black-075 d-my8"
+};
+function dropdown_separatorvue_type_template_id_6a948a17_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.createElementBlock)("li", dropdown_separatorvue_type_template_id_6a948a17_hoisted_1);
+}
+;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue?vue&type=template&id=6a948a17
+
+;// 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]!./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
+ 
+// 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/dropdown/dropdown_separator.vue?vue&type=style&index=0&id=6a948a17&lang=less
+var dropdown_separatorvue_type_style_index_0_id_6a948a17_lang_less = __webpack_require__(633);
+;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue?vue&type=style&index=0&id=6a948a17&lang=less
+
+;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue
+
+
+
+
+;
+
+
+const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdown_separatorvue_type_script_lang_js, [['render',dropdown_separatorvue_type_template_id_6a948a17_render]])
+
+/* harmony default export */ const dropdown_separator = (dropdown_separator_exports_);
 ;// CONCATENATED MODULE: ./components/dropdown/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/input/input.vue?vue&type=template&id=9d954110
 
 const inputvue_type_template_id_9d954110_hoisted_1 = {
@@ -10343,7 +11285,7 @@ function inputvue_type_template_id_9d954110_render(_ctx, _cache, $props, $setup,
     class: $options.inputClasses(),
     maxlength: $options.shouldLimitMaxLength ? $options.validationProps.length.max : null,
     "data-qa": "dt-input-input"
-  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.inputListeners)), null, 16, _hoisted_7)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("input", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.inputListeners, true)), null, 16, _hoisted_7)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("input", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 2,
     ref: "input",
     value: $props.modelValue,
@@ -10353,7 +11295,7 @@ function inputvue_type_template_id_9d954110_render(_ctx, _cache, $props, $setup,
     class: $options.inputClasses(),
     maxlength: $options.shouldLimitMaxLength ? $options.validationProps.length.max : null,
     "data-qa": "dt-input-input"
-  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.inputListeners)), null, 16, _hoisted_8)), _ctx.$slots.rightIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.inputListeners, true)), null, 16, _hoisted_8)), _ctx.$slots.rightIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
     key: 3,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.inputIconClasses('right')),
     "data-qa": "dt-input-right-icon-wrapper",
@@ -10492,7 +11434,7 @@ function validationMessageValidator(rawMessages) {
   },
   methods: {
     getMessageKey(type, index) {
-      return "validation-message-".concat(type, "-").concat(index, "-").concat(this.id);
+      return `validation-message-${type}-${index}-${this.id}`;
     },
 
     messageTypeClass(type) {
@@ -10826,7 +11768,7 @@ const GroupableMixin = {
     const reactiveGroupName = (_this$groupContext5 = this.groupContext) === null || _this$groupContext5 === void 0 ? void 0 : _this$groupContext5.name;
 
     if (!!this.name && hasGroupName && reactiveGroupName !== this.name) {
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.warn)('Component is being used inside a Group. Did you mean to override the name prop value ' + "(".concat(reactiveGroupName, ") with (").concat(this.name, ")? It is recommended to only set name at the Group level."), this);
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.warn)('Component is being used inside a Group. Did you mean to override the name prop value ' + `(${reactiveGroupName}) with (${this.name})? It is recommended to only set name at the Group level.`, this);
     }
   }
 
@@ -11129,7 +12071,7 @@ const MessagesMixin = {
     },
 
     descriptionKey() {
-      return "input-description-".concat(getUniqueString());
+      return `input-description-${getUniqueString()}`;
     },
 
     inputState() {
@@ -11315,7 +12257,7 @@ const MessagesMixin = {
     },
 
     getMessageKey(type, index) {
-      return "message-".concat(type, "-").concat(index);
+      return `message-${type}-${index}`;
     },
 
     validateLength(length) {
@@ -11596,7 +12538,7 @@ const InputGroupMixin = {
   },
   methods: {
     getMessageKey(type, index) {
-      return "input-group-message-".concat(type, "-").concat(index, "-").concat(this.id);
+      return `input-group-message-${type}-${index}-${this.id}`;
     }
 
   }
@@ -11878,7 +12820,7 @@ const MODAL_SIZE_MODIFIERS = {
 
   computed: {
     open() {
-      return "".concat(!this.show);
+      return `${!this.show}`;
     },
 
     hasFooterSlot() {
@@ -11936,8 +12878,6 @@ const modal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(modalvue_typ
 ;// CONCATENATED MODULE: ./components/modal/index.js
 
 
-;// CONCATENATED MODULE: ./components/lazy_show/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/list_section/list_section.vue?vue&type=template&id=0edadf84
 
 const list_sectionvue_type_template_id_0edadf84_hoisted_1 = ["id", "aria-labelledby"];
@@ -11955,26 +12895,26 @@ function list_sectionvue_type_template_id_0edadf84_render(_ctx, _cache, $props,
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     id: $props.id,
     role: "group",
-    "aria-labelledby": "".concat($props.id, "-list-section-header"),
+    "aria-labelledby": `${$props.id}-list-section-header`,
     tabindex: "-1",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['dt-list-section', 'd-fs14', 'd-lh6', 'd-py6', 'd-bc-black-200', {
       'd-bb': $props.separator
     }])
   }, [$props.header ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("h3", {
     key: 0,
-    id: "".concat($props.id, "-list-section-header"),
+    id: `${$props.id}-list-section-header`,
     class: "d-pl12 d-mt6"
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.header), 9, list_sectionvue_type_template_id_0edadf84_hoisted_2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$options.isCollapsible || $data.showAll ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("ol", {
     key: 1,
-    id: "".concat($props.id, "-list-section-content")
+    id: `${$props.id}-list-section-content`
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 8, list_sectionvue_type_template_id_0edadf84_hoisted_3)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("ol", {
     key: 2,
-    id: "".concat($props.id, "-list-section-content")
+    id: `${$props.id}-list-section-content`
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_vnodes, {
     vnodes: $options.displayedItems
   }, null, 8, ["vnodes"])], 8, list_sectionvue_type_template_id_0edadf84_hoisted_4)), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", list_sectionvue_type_template_id_0edadf84_hoisted_5, [$options.isCollapsible ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
     key: 0,
-    id: "".concat($props.id, "-list-section-show-more-less"),
+    id: `${$props.id}-list-section-show-more-less`,
     link: "",
     class: "d-ml12 d-py6",
     onClick: $options.showMoreLessClicked
@@ -12305,7 +13245,7 @@ function paginationvue_type_template_id_294973d0_render(_ctx, _cache, $props, $s
     _: 1
   }, 8, ["aria-label", "importance", "disabled"]), ((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)($options.pages, (page, index) => {
     return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
-      key: "page-".concat(page, "-").concat(index)
+      key: `page-${page}-${index}`
     }, [isNaN(Number(page)) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", paginationvue_type_template_id_294973d0_hoisted_2, " … ")) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
       key: 1,
       "aria-label": $props.pageNumberAriaLabel(page),
@@ -12331,58 +13271,60 @@ function paginationvue_type_template_id_294973d0_render(_ctx, _cache, $props, $s
 }
 ;// CONCATENATED MODULE: ./components/pagination/pagination.vue?vue&type=template&id=294973d0
 
-;// 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/IconChevronLeft.vue?vue&type=template&id=bdbc37f6
+;// 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/IconChevronLeft.vue?vue&type=template&id=dc01e37a
 
 
-const IconChevronLeftvue_type_template_id_bdbc37f6_hoisted_1 = {
+const IconChevronLeftvue_type_template_id_dc01e37a_hoisted_1 = {
   "aria-hidden": "true",
+  focusable: "false",
   "aria-label": "Chevron Left",
   class: "d-svg d-svg--system d-svg__chevronLeft",
   viewBox: "0 0 24 24"
 }
-const IconChevronLeftvue_type_template_id_bdbc37f6_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z" }, null, -1)
-const IconChevronLeftvue_type_template_id_bdbc37f6_hoisted_3 = [
-  IconChevronLeftvue_type_template_id_bdbc37f6_hoisted_2
+const IconChevronLeftvue_type_template_id_dc01e37a_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59Z" }, null, -1)
+const IconChevronLeftvue_type_template_id_dc01e37a_hoisted_3 = [
+  IconChevronLeftvue_type_template_id_dc01e37a_hoisted_2
 ]
 
-function IconChevronLeftvue_type_template_id_bdbc37f6_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", IconChevronLeftvue_type_template_id_bdbc37f6_hoisted_1, IconChevronLeftvue_type_template_id_bdbc37f6_hoisted_3))
+function IconChevronLeftvue_type_template_id_dc01e37a_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", IconChevronLeftvue_type_template_id_dc01e37a_hoisted_1, IconChevronLeftvue_type_template_id_dc01e37a_hoisted_3))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronLeft.vue?vue&type=template&id=bdbc37f6
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronLeft.vue?vue&type=template&id=dc01e37a
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronLeft.vue
 
 const IconChevronLeft_script = {}
 
 ;
-const IconChevronLeft_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconChevronLeft_script, [['render',IconChevronLeftvue_type_template_id_bdbc37f6_render]])
+const IconChevronLeft_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconChevronLeft_script, [['render',IconChevronLeftvue_type_template_id_dc01e37a_render]])
 
 /* harmony default export */ const IconChevronLeft = (IconChevronLeft_exports_);
-;// 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/IconChevronRight.vue?vue&type=template&id=c72b3d10
+;// 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/IconChevronRight.vue?vue&type=template&id=83063a0c
 
 
-const IconChevronRightvue_type_template_id_c72b3d10_hoisted_1 = {
+const IconChevronRightvue_type_template_id_83063a0c_hoisted_1 = {
   "aria-hidden": "true",
+  focusable: "false",
   "aria-label": "Chevron Right",
   class: "d-svg d-svg--system d-svg__chevronRight",
   viewBox: "0 0 24 24"
 }
-const IconChevronRightvue_type_template_id_c72b3d10_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z" }, null, -1)
-const IconChevronRightvue_type_template_id_c72b3d10_hoisted_3 = [
-  IconChevronRightvue_type_template_id_c72b3d10_hoisted_2
+const IconChevronRightvue_type_template_id_83063a0c_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6Z" }, null, -1)
+const IconChevronRightvue_type_template_id_83063a0c_hoisted_3 = [
+  IconChevronRightvue_type_template_id_83063a0c_hoisted_2
 ]
 
-function IconChevronRightvue_type_template_id_c72b3d10_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", IconChevronRightvue_type_template_id_c72b3d10_hoisted_1, IconChevronRightvue_type_template_id_c72b3d10_hoisted_3))
+function IconChevronRightvue_type_template_id_83063a0c_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", IconChevronRightvue_type_template_id_83063a0c_hoisted_1, IconChevronRightvue_type_template_id_83063a0c_hoisted_3))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronRight.vue?vue&type=template&id=c72b3d10
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronRight.vue?vue&type=template&id=83063a0c
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronRight.vue
 
 const IconChevronRight_script = {}
 
 ;
-const IconChevronRight_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconChevronRight_script, [['render',IconChevronRightvue_type_template_id_c72b3d10_render]])
+const IconChevronRight_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconChevronRight_script, [['render',IconChevronRightvue_type_template_id_83063a0c_render]])
 
 /* harmony default export */ const IconChevronRight = (IconChevronRight_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]!./components/pagination/pagination.vue?vue&type=script&lang=js
@@ -12565,7 +13507,7 @@ function radiovue_type_template_id_acb64ede_render(_ctx, _cache, $props, $setup,
     disabled: _ctx.internalDisabled,
     type: "radio",
     class: ['d-radio', $options.inputValidationClass, _ctx.inputClass]
-  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.inputListeners)), null, 16, radiovue_type_template_id_acb64ede_hoisted_2)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", radiovue_type_template_id_acb64ede_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.inputListeners, true)), null, 16, radiovue_type_template_id_acb64ede_hoisted_2)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", radiovue_type_template_id_acb64ede_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     class: _ctx.labelClass
   }, _ctx.labelChildProps, {
     "data-qa": "radio-label"
@@ -12781,7 +13723,7 @@ const radio_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(radiovue_typ
     },
 
     getMessageKey(type, index) {
-      return "radio-group-message-".concat(type, "-").concat(index, "-").concat(this.id);
+      return `radio-group-message-${type}-${index}-${this.id}`;
     }
 
   }
@@ -13077,7 +14019,7 @@ const TAB_IMPORTANCE_MODIFIERS = {
     },
 
     getIndexAndTabs() {
-      const index = this.tabs.findIndex(context => this.focusId ? context.id === "".concat(this.focusId) : context.isSelected);
+      const index = this.tabs.findIndex(context => this.focusId ? context.id === `${this.focusId}` : context.isSelected);
       return {
         tabs: this.tabs,
         index
@@ -13117,13 +14059,13 @@ function tabvue_type_template_id_0bc212ec_render(_ctx, _cache, $props, $setup, $
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
-    id: "dt-tab-".concat($props.id),
+    id: `dt-tab-${$props.id}`,
     class: ['d-tab', {
       [$data.TAB_IMPORTANCE_MODIFIERS.selected]: $options.isSelected
     }, $props.tabClass],
     role: "tab",
-    "aria-selected": "".concat($options.isSelected),
-    "aria-controls": "dt-panel-".concat($props.panelId),
+    "aria-selected": `${$options.isSelected}`,
+    "aria-controls": `dt-panel-${$props.panelId}`,
     "aria-label": $props.label,
     "data-qa": "dt-tab",
     tabindex: $options.isSelected ? '0' : '-1',
@@ -13248,11 +14190,11 @@ const tab_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tabvue_type_sc
 const tab_panelvue_type_template_id_71dc1413_hoisted_1 = ["id", "aria-labelledby", "aria-hidden"];
 function tab_panelvue_type_template_id_71dc1413_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)(((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
-    id: "dt-panel-".concat($props.id),
+    id: `dt-panel-${$props.id}`,
     role: "tabpanel",
     tabindex: "0",
-    "aria-labelledby": "dt-tab-".concat($props.tabId),
-    "aria-hidden": "".concat($options.hidePanel),
+    "aria-labelledby": `dt-tab-${$props.tabId}`,
+    "aria-hidden": `${$options.hidePanel}`,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([{
       'd-d-none': $options.hidePanel
     }, $props.tabPanelClass]),
@@ -13348,7 +14290,7 @@ function checkboxvue_type_template_id_06a6bc3e_render(_ctx, _cache, $props, $set
     class: ['d-checkbox', $options.inputValidationClass, _ctx.inputClass]
   }, _ctx.$attrs, {
     ".indeterminate": _ctx.internalIndeterminate
-  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.inputListeners)), null, 16, checkboxvue_type_template_id_06a6bc3e_hoisted_2)]), $options.hasLabelOrDescription ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", checkboxvue_type_template_id_06a6bc3e_hoisted_3, [$options.hasLabel ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.inputListeners, true)), null, 16, checkboxvue_type_template_id_06a6bc3e_hoisted_2)]), $options.hasLabelOrDescription ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", checkboxvue_type_template_id_06a6bc3e_hoisted_3, [$options.hasLabel ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0,
     class: _ctx.labelClass
   }, _ctx.labelChildProps, {
@@ -13619,7 +14561,7 @@ const checkbox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(checkboxv
     },
 
     getMessageKey(type, index) {
-      return "checkbox-group-message-".concat(type, "-").concat(index, "-").concat(this.id);
+      return `checkbox-group-message-${type}-${index}-${this.id}`;
     }
 
   }
@@ -13660,12 +14602,12 @@ function chipvue_type_template_id_7c802724_render(_ctx, _cache, $props, $setup,
     type: $props.interactive && 'button',
     class: $options.chipClasses(),
     "data-qa": "dt-chip",
-    "aria-labelledby": $props.ariaLabel ? undefined : "".concat($props.id, "-content"),
+    "aria-labelledby": $props.ariaLabel ? undefined : `${$props.id}-content`,
     "aria-label": $props.ariaLabel
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.chipListeners)), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [_ctx.$slots.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_7c802724_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : _ctx.$slots.avatar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_7c802724_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
       key: 2,
-      id: "".concat($props.id, "-content"),
+      id: `${$props.id}-content`,
       "data-qa": "dt-chip-label",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-truncate', 'd-chip__text', $props.contentClass])
     }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_7c802724_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
@@ -13890,7 +14832,7 @@ function select_menuvue_type_template_id_f0e00a1a_render(_ctx, _cache, $props, $
   }, _ctx.$attrs, {
     "data-qa": "dt-select",
     disabled: $props.disabled
-  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.selectListeners)), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [((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.options, option => {
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.selectListeners, true)), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [((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.options, option => {
     return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("option", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
       key: $options.getOptionKey(option.value),
       value: option.value,
@@ -14137,7 +15079,7 @@ const optionsValidator = options => {
     },
 
     descriptionKey() {
-      return "select-".concat(this.selectKey, "-description");
+      return `select-${this.selectKey}-description`;
     },
 
     labelAriaDetails() {
@@ -14165,7 +15107,7 @@ const optionsValidator = options => {
     },
 
     getOptionKey(value) {
-      return "select-".concat(this.selectKey, "-option-").concat(value);
+      return `select-${this.selectKey}-option-${value}`;
     },
 
     validateOptionsPresence() {
@@ -14634,7 +15576,7 @@ function tooltipvue_type_template_id_30019e74_render(_ctx, _cache, $props, $setu
     "data-qa": "dt-tooltip",
     appear: "",
     transition: $props.transition,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-tooltip', "d-tooltip__arrow-tippy--".concat($data.currentPlacement), {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-tooltip', `d-tooltip__arrow-tippy--${$data.currentPlacement}`, {
       [$data.TOOLTIP_KIND_MODIFIERS.inverted]: $props.inverted
     }, $props.contentClass]),
     onAfterLeave: $options.onLeaveTransitionComplete,
@@ -14653,10 +15595,10 @@ function tooltipvue_type_template_id_30019e74_render(_ctx, _cache, $props, $setu
 
 const TOOLTIP_DIRECTIONS = [...BASE_TIPPY_DIRECTIONS];
 const TOOLTIP_KIND_MODIFIERS = {
-  hover: "d-tooltip--hover",
-  show: "d-tooltip--show",
-  inverted: "d-tooltip--inverted",
-  hide: "d-tooltip--hide"
+  hover: `d-tooltip--hover`,
+  show: `d-tooltip--show`,
+  inverted: `d-tooltip--inverted`,
+  hide: `d-tooltip--hide`
 };
 const TOOLTIP_STICKY_VALUES = [...TIPPY_STICKY_VALUES];
 const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
@@ -14980,11 +15922,11 @@ function keyboard_shortcutvue_type_template_id_b5fd217c_render(_ctx, _cache, $pr
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-d-inline-flex', 'd-ff-custom', 'd-ai-center', 'd-jc-center', 'd-box-border', 'd-px4', 'd-ba', 'd-bar4', 'd-fs12', $props.inverted ? 'd-bc-black-400' : 'd-bc-black-100'])
   }, [$props.screenReaderText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", keyboard_shortcutvue_type_template_id_b5fd217c_hoisted_1, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.screenReaderText), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((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)($options.formattedShortcutSplit, (item, i) => {
     return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, [$options.icons[item] ? ((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)($options.icons[item]), {
-      key: "".concat(i, "-").concat(item),
+      key: `${i}-${item}`,
       "aria-hidden": "true",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['dt-keyboard-shortcut__svg', $props.inverted ? 'd-fc-black-075' : 'd-fc-black-500', 'd-mr2'])
     }, null, 8, ["class"])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
-      key: "".concat(i, "-").concat(item),
+      key: `${i}-${item}`,
       "aria-hidden": "true",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$props.inverted ? 'd-fc-black-075' : 'd-fc-black-500', 'd-mr2']),
       innerHTML: item
@@ -14993,166 +15935,178 @@ function keyboard_shortcutvue_type_template_id_b5fd217c_render(_ctx, _cache, $pr
 }
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/keyboard_shortcut.vue?vue&type=template&id=b5fd217c
 
-;// 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/IconWindows.vue?vue&type=template&id=19a76dd9
+;// 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/IconWindows.vue?vue&type=template&id=04be6782
 
 
-const IconWindowsvue_type_template_id_19a76dd9_hoisted_1 = {
+const IconWindowsvue_type_template_id_04be6782_hoisted_1 = {
   "aria-hidden": "true",
+  focusable: "false",
   "aria-label": "Windows",
   class: "d-svg d-svg--system d-svg__windows",
   viewBox: "0 0 24 24"
 }
-const IconWindowsvue_type_template_id_19a76dd9_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M19.903 12.819v7.532L10.936 19v-6.197l8.967.016zM10.936 5.334l8.967-1.249V11.5h-8.967V5.334zM9.745 12.757v6.134l-6.643-.885v-5.28l6.643.03zM3.097 6.328l6.647-.885v6.134H3.1l-.003-5.25z" }, null, -1)
-const IconWindowsvue_type_template_id_19a76dd9_hoisted_3 = [
-  IconWindowsvue_type_template_id_19a76dd9_hoisted_2
+const IconWindowsvue_type_template_id_04be6782_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M19.903 12.819v7.532L10.936 19v-6.197l8.967.016Z" }, null, -1)
+const IconWindowsvue_type_template_id_04be6782_hoisted_3 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "m10.936 5.334 8.967-1.249V11.5h-8.967V5.334Z" }, null, -1)
+const IconWindowsvue_type_template_id_04be6782_hoisted_4 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M9.745 12.757v6.134l-6.643-.885v-5.28l6.643.03Z" }, null, -1)
+const IconWindowsvue_type_template_id_04be6782_hoisted_5 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "m3.097 6.328 6.647-.885v6.134H3.1l-.003-5.25Z" }, null, -1)
+const IconWindowsvue_type_template_id_04be6782_hoisted_6 = [
+  IconWindowsvue_type_template_id_04be6782_hoisted_2,
+  IconWindowsvue_type_template_id_04be6782_hoisted_3,
+  IconWindowsvue_type_template_id_04be6782_hoisted_4,
+  IconWindowsvue_type_template_id_04be6782_hoisted_5
 ]
 
-function IconWindowsvue_type_template_id_19a76dd9_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", IconWindowsvue_type_template_id_19a76dd9_hoisted_1, IconWindowsvue_type_template_id_19a76dd9_hoisted_3))
+function IconWindowsvue_type_template_id_04be6782_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", IconWindowsvue_type_template_id_04be6782_hoisted_1, IconWindowsvue_type_template_id_04be6782_hoisted_6))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconWindows.vue?vue&type=template&id=19a76dd9
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconWindows.vue?vue&type=template&id=04be6782
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconWindows.vue
 
 const IconWindows_script = {}
 
 ;
-const IconWindows_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconWindows_script, [['render',IconWindowsvue_type_template_id_19a76dd9_render]])
+const IconWindows_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconWindows_script, [['render',IconWindowsvue_type_template_id_04be6782_render]])
 
 /* harmony default export */ const IconWindows = (IconWindows_exports_);
-;// 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/IconAdd.vue?vue&type=template&id=37aa578e
+;// 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/IconAdd.vue?vue&type=template&id=57b884e2
 
 
-const IconAddvue_type_template_id_37aa578e_hoisted_1 = {
+const IconAddvue_type_template_id_57b884e2_hoisted_1 = {
   "aria-hidden": "true",
+  focusable: "false",
   "aria-label": "Add",
   class: "d-svg d-svg--system d-svg__add",
   viewBox: "0 0 24 24"
 }
-const IconAddvue_type_template_id_37aa578e_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }, null, -1)
-const IconAddvue_type_template_id_37aa578e_hoisted_3 = [
-  IconAddvue_type_template_id_37aa578e_hoisted_2
+const IconAddvue_type_template_id_57b884e2_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2Z" }, null, -1)
+const IconAddvue_type_template_id_57b884e2_hoisted_3 = [
+  IconAddvue_type_template_id_57b884e2_hoisted_2
 ]
 
-function IconAddvue_type_template_id_37aa578e_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", IconAddvue_type_template_id_37aa578e_hoisted_1, IconAddvue_type_template_id_37aa578e_hoisted_3))
+function IconAddvue_type_template_id_57b884e2_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", IconAddvue_type_template_id_57b884e2_hoisted_1, IconAddvue_type_template_id_57b884e2_hoisted_3))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconAdd.vue?vue&type=template&id=37aa578e
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconAdd.vue?vue&type=template&id=57b884e2
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconAdd.vue
 
 const IconAdd_script = {}
 
 ;
-const IconAdd_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconAdd_script, [['render',IconAddvue_type_template_id_37aa578e_render]])
+const IconAdd_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconAdd_script, [['render',IconAddvue_type_template_id_57b884e2_render]])
 
 /* harmony default export */ const IconAdd = (IconAdd_exports_);
-;// 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/IconArrowDownward.vue?vue&type=template&id=3615192c
+;// 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/IconArrowDownward.vue?vue&type=template&id=fd64adf8
 
 
-const IconArrowDownwardvue_type_template_id_3615192c_hoisted_1 = {
+const IconArrowDownwardvue_type_template_id_fd64adf8_hoisted_1 = {
   "aria-hidden": "true",
+  focusable: "false",
   "aria-label": "Arrow Downward",
   class: "d-svg d-svg--system d-svg__arrowDownward",
   viewBox: "0 0 24 24"
 }
-const IconArrowDownwardvue_type_template_id_3615192c_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" }, null, -1)
-const IconArrowDownwardvue_type_template_id_3615192c_hoisted_3 = [
-  IconArrowDownwardvue_type_template_id_3615192c_hoisted_2
+const IconArrowDownwardvue_type_template_id_fd64adf8_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8Z" }, null, -1)
+const IconArrowDownwardvue_type_template_id_fd64adf8_hoisted_3 = [
+  IconArrowDownwardvue_type_template_id_fd64adf8_hoisted_2
 ]
 
-function IconArrowDownwardvue_type_template_id_3615192c_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", IconArrowDownwardvue_type_template_id_3615192c_hoisted_1, IconArrowDownwardvue_type_template_id_3615192c_hoisted_3))
+function IconArrowDownwardvue_type_template_id_fd64adf8_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", IconArrowDownwardvue_type_template_id_fd64adf8_hoisted_1, IconArrowDownwardvue_type_template_id_fd64adf8_hoisted_3))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDownward.vue?vue&type=template&id=3615192c
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDownward.vue?vue&type=template&id=fd64adf8
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDownward.vue
 
 const IconArrowDownward_script = {}
 
 ;
-const IconArrowDownward_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowDownward_script, [['render',IconArrowDownwardvue_type_template_id_3615192c_render]])
+const IconArrowDownward_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowDownward_script, [['render',IconArrowDownwardvue_type_template_id_fd64adf8_render]])
 
 /* harmony default export */ const IconArrowDownward = (IconArrowDownward_exports_);
-;// 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/IconArrowUpward.vue?vue&type=template&id=10122176
+;// 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/IconArrowUpward.vue?vue&type=template&id=007435f4
 
 
-const IconArrowUpwardvue_type_template_id_10122176_hoisted_1 = {
+const IconArrowUpwardvue_type_template_id_007435f4_hoisted_1 = {
   "aria-hidden": "true",
+  focusable: "false",
   "aria-label": "Arrow Upward",
   class: "d-svg d-svg--system d-svg__arrowUpward",
   viewBox: "0 0 24 24"
 }
-const IconArrowUpwardvue_type_template_id_10122176_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" }, null, -1)
-const IconArrowUpwardvue_type_template_id_10122176_hoisted_3 = [
-  IconArrowUpwardvue_type_template_id_10122176_hoisted_2
+const IconArrowUpwardvue_type_template_id_007435f4_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8Z" }, null, -1)
+const IconArrowUpwardvue_type_template_id_007435f4_hoisted_3 = [
+  IconArrowUpwardvue_type_template_id_007435f4_hoisted_2
 ]
 
-function IconArrowUpwardvue_type_template_id_10122176_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", IconArrowUpwardvue_type_template_id_10122176_hoisted_1, IconArrowUpwardvue_type_template_id_10122176_hoisted_3))
+function IconArrowUpwardvue_type_template_id_007435f4_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", IconArrowUpwardvue_type_template_id_007435f4_hoisted_1, IconArrowUpwardvue_type_template_id_007435f4_hoisted_3))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowUpward.vue?vue&type=template&id=10122176
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowUpward.vue?vue&type=template&id=007435f4
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowUpward.vue
 
 const IconArrowUpward_script = {}
 
 ;
-const IconArrowUpward_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowUpward_script, [['render',IconArrowUpwardvue_type_template_id_10122176_render]])
+const IconArrowUpward_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowUpward_script, [['render',IconArrowUpwardvue_type_template_id_007435f4_render]])
 
 /* harmony default export */ const IconArrowUpward = (IconArrowUpward_exports_);
-;// 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/IconArrowForward.vue?vue&type=template&id=24d9c0d4
+;// 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/IconArrowForward.vue?vue&type=template&id=3fbcc666
 
 
-const IconArrowForwardvue_type_template_id_24d9c0d4_hoisted_1 = {
+const IconArrowForwardvue_type_template_id_3fbcc666_hoisted_1 = {
   "aria-hidden": "true",
+  focusable: "false",
   "aria-label": "Arrow Forward",
   class: "d-svg d-svg--system d-svg__arrowForward",
   viewBox: "0 0 24 24"
 }
-const IconArrowForwardvue_type_template_id_24d9c0d4_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z" }, null, -1)
-const IconArrowForwardvue_type_template_id_24d9c0d4_hoisted_3 = [
-  IconArrowForwardvue_type_template_id_24d9c0d4_hoisted_2
+const IconArrowForwardvue_type_template_id_3fbcc666_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z" }, null, -1)
+const IconArrowForwardvue_type_template_id_3fbcc666_hoisted_3 = [
+  IconArrowForwardvue_type_template_id_3fbcc666_hoisted_2
 ]
 
-function IconArrowForwardvue_type_template_id_24d9c0d4_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", IconArrowForwardvue_type_template_id_24d9c0d4_hoisted_1, IconArrowForwardvue_type_template_id_24d9c0d4_hoisted_3))
+function IconArrowForwardvue_type_template_id_3fbcc666_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", IconArrowForwardvue_type_template_id_3fbcc666_hoisted_1, IconArrowForwardvue_type_template_id_3fbcc666_hoisted_3))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowForward.vue?vue&type=template&id=24d9c0d4
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowForward.vue?vue&type=template&id=3fbcc666
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowForward.vue
 
 const IconArrowForward_script = {}
 
 ;
-const IconArrowForward_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowForward_script, [['render',IconArrowForwardvue_type_template_id_24d9c0d4_render]])
+const IconArrowForward_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowForward_script, [['render',IconArrowForwardvue_type_template_id_3fbcc666_render]])
 
 /* harmony default export */ const IconArrowForward = (IconArrowForward_exports_);
-;// 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/IconArrowBackwards.vue?vue&type=template&id=422cf4b0
+;// 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/IconArrowBackwards.vue?vue&type=template&id=1f13cb5c
 
 
-const IconArrowBackwardsvue_type_template_id_422cf4b0_hoisted_1 = {
+const IconArrowBackwardsvue_type_template_id_1f13cb5c_hoisted_1 = {
   "aria-hidden": "true",
+  focusable: "false",
   "aria-label": "Arrow Backwards",
   class: "d-svg d-svg--system d-svg__arrowBackwards",
   viewBox: "0 0 24 24"
 }
-const IconArrowBackwardsvue_type_template_id_422cf4b0_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 20l1.41-1.41L7.83 13H20v-2H7.83l5.58-5.59L12 4l-8 8 8 8z" }, null, -1)
-const IconArrowBackwardsvue_type_template_id_422cf4b0_hoisted_3 = [
-  IconArrowBackwardsvue_type_template_id_422cf4b0_hoisted_2
+const IconArrowBackwardsvue_type_template_id_1f13cb5c_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "m12 20 1.41-1.41L7.83 13H20v-2H7.83l5.58-5.59L12 4l-8 8 8 8Z" }, null, -1)
+const IconArrowBackwardsvue_type_template_id_1f13cb5c_hoisted_3 = [
+  IconArrowBackwardsvue_type_template_id_1f13cb5c_hoisted_2
 ]
 
-function IconArrowBackwardsvue_type_template_id_422cf4b0_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", IconArrowBackwardsvue_type_template_id_422cf4b0_hoisted_1, IconArrowBackwardsvue_type_template_id_422cf4b0_hoisted_3))
+function IconArrowBackwardsvue_type_template_id_1f13cb5c_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", IconArrowBackwardsvue_type_template_id_1f13cb5c_hoisted_1, IconArrowBackwardsvue_type_template_id_1f13cb5c_hoisted_3))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowBackwards.vue?vue&type=template&id=422cf4b0
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowBackwards.vue?vue&type=template&id=1f13cb5c
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowBackwards.vue
 
 const IconArrowBackwards_script = {}
 
 ;
-const IconArrowBackwards_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowBackwards_script, [['render',IconArrowBackwardsvue_type_template_id_422cf4b0_render]])
+const IconArrowBackwards_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowBackwards_script, [['render',IconArrowBackwardsvue_type_template_id_1f13cb5c_render]])
 
 /* harmony default export */ const IconArrowBackwards = (IconArrowBackwards_exports_);
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/keyboard_shortcut_constants.js
@@ -15170,7 +16124,7 @@ const SHORTCUTS_ICON_ALIASES = {
 const SHORTCUTS_ICON_SEPARATOR = {
   '{plus}': 'IconAdd'
 };
-const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ALIASES).map(key => "{".concat(key, "}")).concat(Object.keys(SHORTCUTS_ICON_ALIASES));
+const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ALIASES).map(key => `{${key}}`).concat(Object.keys(SHORTCUTS_ICON_ALIASES));
 ;// 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]!./components/keyboard_shortcut/keyboard_shortcut.vue?vue&type=script&lang=js
 
 
@@ -15237,7 +16191,7 @@ const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ALIASES).map(key => "{".con
          '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]
       */
 
-      const regex = new RegExp("(".concat(iconAliasString, ")"), 'gi');
+      const regex = new RegExp(`(${iconAliasString})`, 'gi');
       return this.formattedShortcut.split(regex).filter(Boolean);
     }
 
@@ -15263,15 +16217,15 @@ const keyboard_shortcut_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/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/root_layout/root_layout.vue?vue&type=template&id=2e5fe0a4
+;// 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/root_layout/root_layout.vue?vue&type=template&id=45a068b6
 
-const root_layoutvue_type_template_id_2e5fe0a4_hoisted_1 = {
+const root_layoutvue_type_template_id_45a068b6_hoisted_1 = {
   class: "root-layout"
 };
-function root_layoutvue_type_template_id_2e5fe0a4_render(_ctx, _cache, $props, $setup, $data, $options) {
+function root_layoutvue_type_template_id_45a068b6_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_root_layout_body = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-root-layout-body");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", root_layoutvue_type_template_id_2e5fe0a4_hoisted_1, [_ctx.$slots.header ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("header", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", root_layoutvue_type_template_id_45a068b6_hoisted_1, [_ctx.$slots.header ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("header", {
     key: 0,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__header', $props.headerClass, {
       'root-layout__header--sticky': $props.headerSticky
@@ -15281,6 +16235,7 @@ function root_layoutvue_type_template_id_2e5fe0a4_render(_ctx, _cache, $props, $
     }),
     "data-qa": "root-layout-header"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_root_layout_body, {
+    "body-class": $props.bodyClass,
     "content-class": $props.contentClass,
     "content-wrap-width-percent": $props.contentWrapWidthPercent,
     "sidebar-class": $props.sidebarClass,
@@ -15290,7 +16245,7 @@ function root_layoutvue_type_template_id_2e5fe0a4_render(_ctx, _cache, $props, $
     sidebar: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "sidebar")]),
     content: (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, ["content-class", "content-wrap-width-percent", "sidebar-class", "sidebar-width", "sidebar-position"]), _ctx.$slots.footer ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", {
+  }, 8, ["body-class", "content-class", "content-wrap-width-percent", "sidebar-class", "sidebar-width", "sidebar-position"]), _ctx.$slots.footer ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", {
     key: 1,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__footer', $props.footerClass]),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
@@ -15299,13 +16254,13 @@ function root_layoutvue_type_template_id_2e5fe0a4_render(_ctx, _cache, $props, $
     "data-qa": "root-layout-footer"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=template&id=2e5fe0a4
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=template&id=45a068b6
 
-;// 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/root_layout/root_layout_body.vue?vue&type=template&id=dfb53770
+;// 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/root_layout/root_layout_body.vue?vue&type=template&id=cab3a148
 
-function root_layout_bodyvue_type_template_id_dfb53770_render(_ctx, _cache, $props, $setup, $data, $options) {
+function root_layout_bodyvue_type_template_id_cab3a148_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.createElementBlock)("div", {
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__body', $options.bodyClass]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__body', $options.bodyClasses]),
     "data-qa": "root-layout-body"
   }, [_ctx.$slots.sidebar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("aside", {
     key: 0,
@@ -15323,7 +16278,7 @@ function root_layout_bodyvue_type_template_id_dfb53770_render(_ctx, _cache, $pro
     "data-qa": "root-layout-content"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "content")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
 }
-;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=template&id=dfb53770
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=template&id=cab3a148
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_constants.js
 const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
@@ -15338,6 +16293,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
      */
@@ -15384,19 +16347,19 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
     }
   },
   computed: {
-    bodyClass() {
-      return {
+    bodyClasses() {
+      return [this.bodyClass, {
         'root-layout__body--invert': this.sidebarPosition === ROOT_LAYOUT_SIDEBAR_POSITIONS.RIGHT
-      };
+      }];
     }
 
   }
 });
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.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/root_layout/root_layout_body.vue?vue&type=style&index=0&id=dfb53770&lang=less
-var root_layout_bodyvue_type_style_index_0_id_dfb53770_lang_less = __webpack_require__(516);
-;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=dfb53770&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/root_layout/root_layout_body.vue?vue&type=style&index=0&id=cab3a148&lang=less
+var root_layout_bodyvue_type_style_index_0_id_cab3a148_lang_less = __webpack_require__(195);
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=cab3a148&lang=less
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue
 
@@ -15406,7 +16369,7 @@ var root_layout_bodyvue_type_style_index_0_id_dfb53770_lang_less = __webpack_req
 ;
 
 
-const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layout_bodyvue_type_script_lang_js, [['render',root_layout_bodyvue_type_template_id_dfb53770_render]])
+const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layout_bodyvue_type_script_lang_js, [['render',root_layout_bodyvue_type_template_id_cab3a148_render]])
 
 /* harmony default export */ const root_layout_body = (root_layout_body_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]!./components/root_layout/root_layout.vue?vue&type=script&lang=js
@@ -15443,6 +16406,14 @@ const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(r
       default: false
     },
 
+    /**
+     * Additional class name for the body
+     */
+    bodyClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
     /**
      * Additional class name for the content element
      */
@@ -15509,9 +16480,9 @@ const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(r
 });
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout.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/root_layout/root_layout.vue?vue&type=style&index=0&id=2e5fe0a4&lang=less
-var root_layoutvue_type_style_index_0_id_2e5fe0a4_lang_less = __webpack_require__(35);
-;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=style&index=0&id=2e5fe0a4&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/root_layout/root_layout.vue?vue&type=style&index=0&id=45a068b6&lang=less
+var root_layoutvue_type_style_index_0_id_45a068b6_lang_less = __webpack_require__(991);
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=style&index=0&id=45a068b6&lang=less
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue
 
@@ -15521,17 +16492,17 @@ var root_layoutvue_type_style_index_0_id_2e5fe0a4_lang_less = __webpack_require_
 ;
 
 
-const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layoutvue_type_script_lang_js, [['render',root_layoutvue_type_template_id_2e5fe0a4_render]])
+const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layoutvue_type_script_lang_js, [['render',root_layoutvue_type_template_id_45a068b6_render]])
 
 /* harmony default export */ const root_layout = (root_layout_exports_);
 ;// CONCATENATED MODULE: ./components/root_layout/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_with_popover/combobox_with_popover.vue?vue&type=template&id=01d7fb04
+;// 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_with_popover/combobox_with_popover.vue?vue&type=template&id=882f1ab2
 
-const combobox_with_popovervue_type_template_id_01d7fb04_hoisted_1 = ["id"];
-const combobox_with_popovervue_type_template_id_01d7fb04_hoisted_2 = ["onMouseleave", "onFocusout"];
-function combobox_with_popovervue_type_template_id_01d7fb04_render(_ctx, _cache, $props, $setup, $data, $options) {
+const combobox_with_popovervue_type_template_id_882f1ab2_hoisted_1 = ["id"];
+const combobox_with_popovervue_type_template_id_882f1ab2_hoisted_2 = ["onMouseleave", "onFocusout"];
+function combobox_with_popovervue_type_template_id_882f1ab2_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
@@ -15543,6 +16514,8 @@ function combobox_with_popovervue_type_template_id_01d7fb04_render(_ctx, _cache,
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_combobox, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     ref: "combobox",
     loading: $props.loading,
+    "empty-list": $props.emptyList,
+    "empty-state-message": $props.emptyStateMessage,
     "show-list": $data.isListShown,
     "on-beginning-of-list": $props.onBeginningOfList,
     "on-end-of-list": $props.onEndOfList,
@@ -15568,15 +16541,13 @@ function combobox_with_popovervue_type_template_id_01d7fb04_render(_ctx, _cache,
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
         inputProps: inputProps,
         onInput: $options.handleDisplayList
-      })], 40, combobox_with_popovervue_type_template_id_01d7fb04_hoisted_1)];
+      })], 40, combobox_with_popovervue_type_template_id_882f1ab2_hoisted_1)];
     }),
     list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref2 => {
       let {
         opened,
         listProps,
-        clearHighlightIndex,
-        isLoading,
-        isListEmpty
+        clearHighlightIndex
       } = _ref2;
       return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_popover, {
         ref: "popover",
@@ -15593,7 +16564,7 @@ function combobox_with_popovervue_type_template_id_01d7fb04_render(_ctx, _cache,
         "external-anchor": $data.externalAnchor,
         "content-width": $props.contentWidth,
         "content-tabindex": null,
-        modal: false,
+        modal: $props.modal,
         "auto-focus": false,
         onOpened: opened
       }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
@@ -15605,16 +16576,16 @@ function combobox_with_popovervue_type_template_id_01d7fb04_render(_ctx, _cache,
             clearHighlightIndex;
             $options.onFocusOut;
           }
-        }, [isLoading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+        }, [$props.loading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
           key: 0
-        }, listProps)), null, 16)) : isListEmpty ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+        }, listProps)), null, 16)) : $props.emptyList && $props.emptyStateMessage ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
           key: 1
         }, listProps, {
           message: $props.emptyStateMessage
         }), null, 16, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
           key: 2,
           listProps: listProps
-        })], 42, combobox_with_popovervue_type_template_id_01d7fb04_hoisted_2)]),
+        })], 42, combobox_with_popovervue_type_template_id_882f1ab2_hoisted_2)]),
         _: 2
       }, [_ctx.$slots.header ? {
         name: "headerContent",
@@ -15623,7 +16594,8 @@ function combobox_with_popovervue_type_template_id_01d7fb04_render(_ctx, _cache,
           onFocusout: _cache[4] || (_cache[4] = function () {
             return $options.onFocusOut && $options.onFocusOut(...arguments);
           })
-        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 544)])
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 544)]),
+        key: "0"
       } : undefined, _ctx.$slots.footer ? {
         name: "footerContent",
         fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
@@ -15631,13 +16603,14 @@ function combobox_with_popovervue_type_template_id_01d7fb04_render(_ctx, _cache,
           onFocusout: _cache[5] || (_cache[5] = function () {
             return $options.onFocusOut && $options.onFocusOut(...arguments);
           })
-        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 544)])
-      } : undefined]), 1032, ["open", "hide-on-click", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "onOpened"])];
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 544)]),
+        key: "1"
+      } : undefined]), 1032, ["open", "hide-on-click", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "modal", "onOpened"])];
     }),
     _: 3
-  }, 16, ["loading", "show-list", "on-beginning-of-list", "on-end-of-list", "list-aria-label", "list-id"]);
+  }, 16, ["loading", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-aria-label", "list-id"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=01d7fb04
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=882f1ab2
 
 ;// 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_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
 
@@ -15776,6 +16749,15 @@ function combobox_with_popovervue_type_template_id_01d7fb04_render(_ctx, _cache,
       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.
@@ -15793,6 +16775,14 @@ function combobox_with_popovervue_type_template_id_01d7fb04_render(_ctx, _cache,
       default: false
     },
 
+    /**
+     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
+     */
+    emptyList: {
+      type: Boolean,
+      default: false
+    },
+
     /**
      * Message to show when the list is empty
      */
@@ -15899,12 +16889,13 @@ function combobox_with_popovervue_type_template_id_01d7fb04_render(_ctx, _cache,
     },
 
     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();
@@ -15929,35 +16920,32 @@ function combobox_with_popovervue_type_template_id_01d7fb04_render(_ctx, _cache,
 
 
 ;
-const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_01d7fb04_render]])
+const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_882f1ab2_render]])
 
 /* 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=d29708fc
+;// 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
 
-const combobox_multi_selectvue_type_template_id_d29708fc_hoisted_1 = {
+const combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_1 = {
   ref: "inputSlotWrapper",
   class: "d-ps-relative"
 };
-const combobox_multi_selectvue_type_template_id_d29708fc_hoisted_2 = {
+const combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_2 = {
   ref: "chipsWrapper",
   class: "d-ps-absolute d-mx2"
 };
-const combobox_multi_selectvue_type_template_id_d29708fc_hoisted_3 = {
+const combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_3 = {
   ref: "header"
 };
-const combobox_multi_selectvue_type_template_id_d29708fc_hoisted_4 = {
-  ref: "list"
-};
-const combobox_multi_selectvue_type_template_id_d29708fc_hoisted_5 = {
+const combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_4 = {
   key: 1,
   class: "d-ta-center d-py16"
 };
-const combobox_multi_selectvue_type_template_id_d29708fc_hoisted_6 = {
+const combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_5 = {
   ref: "footer"
 };
-function combobox_multi_selectvue_type_template_id_d29708fc_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_multi_selectvue_type_template_id_43f74cb7_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");
@@ -15980,7 +16968,7 @@ function combobox_multi_selectvue_type_template_id_d29708fc_render(_ctx, _cache,
       let {
         onInput
       } = _ref;
-      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_d29708fc_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_d29708fc_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_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.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",
@@ -16015,19 +17003,24 @@ function combobox_multi_selectvue_type_template_id_d29708fc_render(_ctx, _cache,
         "show-messages": $data.showValidationMessages
       }, null, 8, ["validation-messages", "show-messages"])], 512)];
     }),
-    list: (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_d29708fc_hoisted_4, [!$props.loading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
+    list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+      ref: "list",
+      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_d29708fc_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 512)]),
+    }) : ((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)]),
     _: 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_d29708fc_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_43f74cb7_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_d29708fc_hoisted_6, [(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_43f74cb7_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=d29708fc
+;// 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_story_constants.js
 // The item list for default story
@@ -16558,32 +17551,32 @@ 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_d29708fc_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_43f74cb7_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=3f590359
+;// 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
 
-const contact_infovue_type_template_id_3f590359_hoisted_1 = {
+const contact_infovue_type_template_id_38fc10e0_hoisted_1 = {
   class: "d-ps-relative",
   "data-qa": "contact-info-left"
 };
-const contact_infovue_type_template_id_3f590359_hoisted_2 = ["src", "alt"];
-const contact_infovue_type_template_id_3f590359_hoisted_3 = {
+const contact_infovue_type_template_id_38fc10e0_hoisted_2 = ["src", "alt"];
+const contact_infovue_type_template_id_38fc10e0_hoisted_3 = {
   "data-qa": "contact-info-header"
 };
-const contact_infovue_type_template_id_3f590359_hoisted_4 = {
+const contact_infovue_type_template_id_38fc10e0_hoisted_4 = {
   "data-qa": "contact-info-subtitle"
 };
-const contact_infovue_type_template_id_3f590359_hoisted_5 = {
+const contact_infovue_type_template_id_38fc10e0_hoisted_5 = {
   "data-qa": "contact-info-bottom"
 };
-const contact_infovue_type_template_id_3f590359_hoisted_6 = {
+const contact_infovue_type_template_id_38fc10e0_hoisted_6 = {
   "data-qa": "contact-info-right"
 };
-function contact_infovue_type_template_id_3f590359_render(_ctx, _cache, $props, $setup, $data, $options) {
+function contact_infovue_type_template_id_38fc10e0_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");
@@ -16594,16 +17587,15 @@ function contact_infovue_type_template_id_3f590359_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_3f590359_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_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, {
       key: 0,
-      size: "lg",
-      "avatar-class": "d-bar2"
+      size: "lg"
     }, {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
         "data-qa": "dt-contact-avatar",
         src: $props.avatarSrc,
         alt: $props.avatarInitials
-      }, null, 8, contact_infovue_type_template_id_3f590359_hoisted_2)]),
+      }, null, 8, contact_infovue_type_template_id_38fc10e0_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,
@@ -16618,14 +17610,14 @@ function contact_infovue_type_template_id_3f590359_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_3f590359_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_3f590359_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_3f590359_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_3f590359_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_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")])]),
     _: 3
   }, 8, ["id", "role"]);
 }
-;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=3f590359
+;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=38fc10e0
 
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
 const USER_STATUS_COLOR_MODIFIERS = {
@@ -16730,7 +17722,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_3f590359_render]])
+const contact_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_infovue_type_script_lang_js, [['render',contact_infovue_type_template_id_38fc10e0_render]])
 
 /* harmony default export */ const contact_info = (contact_info_exports_);
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/index.js
@@ -16813,6 +17805,527 @@ const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(to
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=6ffb5756
+
+const ivr_nodevue_type_template_id_6ffb5756_hoisted_1 = {
+  class: "d-d-flex d-ai-center"
+};
+const ivr_nodevue_type_template_id_6ffb5756_hoisted_2 = {
+  class: "d-fs14 d-fw-bold",
+  "data-qa": "ivr-node-label"
+};
+const ivr_nodevue_type_template_id_6ffb5756_hoisted_3 = {
+  class: "d-w164"
+};
+function ivr_nodevue_type_template_id_6ffb5756_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_icon_menu_vertical = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-menu-vertical");
+
+  const _component_dt_dropdown = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-dropdown");
+
+  const _component_dt_card = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-card");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    class: "d-d-flex d-fd-column d-ai-center d-c-pointer ivr_node__width"
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.nodeListeners, true)), [$props.dtmfKey ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+    key: 0,
+    "data-qa": "dt-top-connector-dtmf",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-zi-base1 d-ai-center d-jc-center d-d-flex d-w24 d-h24 d-bar-circle d-bc-purple-800 d-bgc-purple-800 d-mbn12 d-fc-white d-fs14", {
+      'd-mbn16': $props.isSelected
+    }])
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.dtmfKey), 3)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+    key: 1,
+    "data-qa": "dt-top-connector",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-zi-base1 d-d-flex d-w8 d-h8 d-bar-circle d-bc-purple-800 d-bgc-purple-800 d-mbn4", {
+      'd-mbn8': $props.isSelected
+    }])
+  }, null, 2)), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_card, {
+    "content-class": "d-bt d-bc-black-075 d-px12 d-pt8 d-pb12",
+    "container-class": ['d-w100p', {
+      'd-ba d-bar8 d-baw4': $props.isSelected
+    }, $options.headerColor],
+    "header-class": ['d-mtn1', 'd-bt', 'd-btw4', 'd-p0', $options.headerColor, {
+      'd-btr4': !$props.isSelected
+    }]
+  }, {
+    header: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_6ffb5756_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+      "aria-label": $props.nodeType,
+      importance: "clear",
+      "data-qa": "dt-ivr-node-icon"
+    }, {
+      icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [((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)($options.nodeIcon), {
+        class: "d-fc-black-900"
+      }))]),
+      _: 1
+    }, 8, ["aria-label"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", ivr_nodevue_type_template_id_6ffb5756_hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.nodeLabel), 1)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_dropdown, {
+      open: $data.isOpen,
+      "onUpdate:open": _cache[0] || (_cache[0] = $event => $data.isOpen = $event),
+      placement: "bottom"
+    }, {
+      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: "clear",
+        "aria-label": $props.menuButtonAriaLabel,
+        onClick: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($options.openMenu, ["stop", "prevent"])
+      }, {
+        icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_menu_vertical, {
+          class: "d-fc-black-900"
+        })]),
+        _: 1
+      }, 8, ["aria-label", "onClick"])]),
+      list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_6ffb5756_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "menuItems")])]),
+      _: 3
+    }, 8, ["open"])]),
+    content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "content")]),
+    _: 3
+  }, 8, ["container-class", "header-class"])], 16);
+}
+;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=6ffb5756
+
+;// 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/IconMenuVertical.vue?vue&type=template&id=7bb36528
+
+
+const IconMenuVerticalvue_type_template_id_7bb36528_hoisted_1 = {
+  "aria-hidden": "true",
+  focusable: "false",
+  "aria-label": "Menu Vertical",
+  class: "d-svg d-svg--system d-svg__menuVertical",
+  viewBox: "0 0 24 24"
+}
+const IconMenuVerticalvue_type_template_id_7bb36528_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z" }, null, -1)
+const IconMenuVerticalvue_type_template_id_7bb36528_hoisted_3 = [
+  IconMenuVerticalvue_type_template_id_7bb36528_hoisted_2
+]
+
+function IconMenuVerticalvue_type_template_id_7bb36528_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", IconMenuVerticalvue_type_template_id_7bb36528_hoisted_1, IconMenuVerticalvue_type_template_id_7bb36528_hoisted_3))
+}
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconMenuVertical.vue?vue&type=template&id=7bb36528
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconMenuVertical.vue
+
+const IconMenuVertical_script = {}
+
+;
+const IconMenuVertical_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconMenuVertical_script, [['render',IconMenuVerticalvue_type_template_id_7bb36528_render]])
+
+/* harmony default export */ const IconMenuVertical = (IconMenuVertical_exports_);
+;// 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/IconDialpad.vue?vue&type=template&id=523e1cca
+
+
+const IconDialpadvue_type_template_id_523e1cca_hoisted_1 = {
+  "aria-hidden": "true",
+  focusable: "false",
+  "aria-label": "Dialpad",
+  class: "d-svg d-svg--system d-svg__dialpad",
+  viewBox: "0 0 24 24"
+}
+const IconDialpadvue_type_template_id_523e1cca_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M6 4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm12-8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm-6 8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z" }, null, -1)
+const IconDialpadvue_type_template_id_523e1cca_hoisted_3 = [
+  IconDialpadvue_type_template_id_523e1cca_hoisted_2
+]
+
+function IconDialpadvue_type_template_id_523e1cca_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", IconDialpadvue_type_template_id_523e1cca_hoisted_1, IconDialpadvue_type_template_id_523e1cca_hoisted_3))
+}
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconDialpad.vue?vue&type=template&id=523e1cca
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconDialpad.vue
+
+const IconDialpad_script = {}
+
+;
+const IconDialpad_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconDialpad_script, [['render',IconDialpadvue_type_template_id_523e1cca_render]])
+
+/* harmony default export */ const IconDialpad = (IconDialpad_exports_);
+;// 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/IconPhoneDialer.vue?vue&type=template&id=be0e06dc
+
+
+const IconPhoneDialervue_type_template_id_be0e06dc_hoisted_1 = {
+  "aria-hidden": "true",
+  focusable: "false",
+  "aria-label": "Phone Dialer",
+  class: "d-svg d-svg--system d-svg__phoneDialer",
+  viewBox: "0 0 24 24"
+}
+const IconPhoneDialervue_type_template_id_be0e06dc_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M16.48 14.82c1.11.36 2.3.56 3.53.56.54 0 .99.45.99.99v3.45c0 .55-.28 1.18-.99 1.18C10.73 21 3 13.28 3 3.99 3 3.24 3.65 3 4.19 3h3.46c.54 0 .99.45.99.99 0 1.23.19 2.42.56 3.53.11.35.03.74-.24 1.02L7.01 10.2c1.41 2.93 4.06 5.48 6.89 6.83l1.57-1.97c.27-.27.66-.36 1.01-.24Z" }, null, -1)
+const IconPhoneDialervue_type_template_id_be0e06dc_hoisted_3 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M20 6h-8v1h8V6Zm0-2h-8v1h8V4Zm-8 7h4v-1h-4v1Z" }, null, -1)
+const IconPhoneDialervue_type_template_id_be0e06dc_hoisted_4 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 8h8v1h-8V8Z" }, null, -1)
+const IconPhoneDialervue_type_template_id_be0e06dc_hoisted_5 = [
+  IconPhoneDialervue_type_template_id_be0e06dc_hoisted_2,
+  IconPhoneDialervue_type_template_id_be0e06dc_hoisted_3,
+  IconPhoneDialervue_type_template_id_be0e06dc_hoisted_4
+]
+
+function IconPhoneDialervue_type_template_id_be0e06dc_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", IconPhoneDialervue_type_template_id_be0e06dc_hoisted_1, IconPhoneDialervue_type_template_id_be0e06dc_hoisted_5))
+}
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconPhoneDialer.vue?vue&type=template&id=be0e06dc
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconPhoneDialer.vue
+
+const IconPhoneDialer_script = {}
+
+;
+const IconPhoneDialer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconPhoneDialer_script, [['render',IconPhoneDialervue_type_template_id_be0e06dc_render]])
+
+/* harmony default export */ const IconPhoneDialer = (IconPhoneDialer_exports_);
+;// 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/IconVolumeUp.vue?vue&type=template&id=6e71f4fc
+
+
+const IconVolumeUpvue_type_template_id_6e71f4fc_hoisted_1 = {
+  "aria-hidden": "true",
+  focusable: "false",
+  "aria-label": "Volume Up",
+  class: "d-svg d-svg--system d-svg__volumeUp",
+  viewBox: "0 0 24 24"
+}
+const IconVolumeUpvue_type_template_id_6e71f4fc_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M3 9v6h4l5 5V4L7 9H3Zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02ZM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77 0-4.28-2.99-7.86-7-8.77Z" }, null, -1)
+const IconVolumeUpvue_type_template_id_6e71f4fc_hoisted_3 = [
+  IconVolumeUpvue_type_template_id_6e71f4fc_hoisted_2
+]
+
+function IconVolumeUpvue_type_template_id_6e71f4fc_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", IconVolumeUpvue_type_template_id_6e71f4fc_hoisted_1, IconVolumeUpvue_type_template_id_6e71f4fc_hoisted_3))
+}
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconVolumeUp.vue?vue&type=template&id=6e71f4fc
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconVolumeUp.vue
+
+const IconVolumeUp_script = {}
+
+;
+const IconVolumeUp_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconVolumeUp_script, [['render',IconVolumeUpvue_type_template_id_6e71f4fc_render]])
+
+/* harmony default export */ const IconVolumeUp = (IconVolumeUp_exports_);
+;// 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/IconPhoneTransfer.vue?vue&type=template&id=67939a33
+
+
+const IconPhoneTransfervue_type_template_id_67939a33_hoisted_1 = {
+  "aria-hidden": "true",
+  focusable: "false",
+  "aria-label": "Phone Transfer",
+  class: "d-svg d-svg--system d-svg__phoneTransfer",
+  viewBox: "0 0 24 24"
+}
+const IconPhoneTransfervue_type_template_id_67939a33_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M16.48 14.82c1.11.36 2.3.56 3.53.56.54 0 .99.45.99.99v3.45c0 .55-.28 1.18-.99 1.18C10.73 21 3 13.28 3 3.99 3 3.24 3.65 3 4.19 3h3.46c.54 0 .99.45.99.99 0 1.23.19 2.42.56 3.53.11.35.03.74-.24 1.02L7.01 10.2c1.41 2.93 4.06 5.48 6.89 6.83l1.57-1.97c.27-.27.66-.36 1.01-.24Z" }, null, -1)
+const IconPhoneTransfervue_type_template_id_67939a33_hoisted_3 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M15.49 4.75V3L13 5.5 15.49 8V6.25H21v-1.5h-5.51Z" }, null, -1)
+const IconPhoneTransfervue_type_template_id_67939a33_hoisted_4 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M18.51 9H13v1.5h5.51v1.75L21 9.75l-2.49-2.5V9Z" }, null, -1)
+const IconPhoneTransfervue_type_template_id_67939a33_hoisted_5 = [
+  IconPhoneTransfervue_type_template_id_67939a33_hoisted_2,
+  IconPhoneTransfervue_type_template_id_67939a33_hoisted_3,
+  IconPhoneTransfervue_type_template_id_67939a33_hoisted_4
+]
+
+function IconPhoneTransfervue_type_template_id_67939a33_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", IconPhoneTransfervue_type_template_id_67939a33_hoisted_1, IconPhoneTransfervue_type_template_id_67939a33_hoisted_5))
+}
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconPhoneTransfer.vue?vue&type=template&id=67939a33
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconPhoneTransfer.vue
+
+const IconPhoneTransfer_script = {}
+
+;
+const IconPhoneTransfer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconPhoneTransfer_script, [['render',IconPhoneTransfervue_type_template_id_67939a33_render]])
+
+/* harmony default export */ const IconPhoneTransfer = (IconPhoneTransfer_exports_);
+;// 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/IconCallEndArrow.vue?vue&type=template&id=9ec0258e
+
+
+const IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_1 = {
+  "aria-hidden": "true",
+  focusable: "false",
+  "aria-label": "Call End Arrow",
+  class: "d-svg d-svg--system d-svg__callEndArrow",
+  viewBox: "0 0 24 24"
+}
+const IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 7c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 11.08a.956.956 0 0 1-.29-.7c0-.28.11-.53.29-.71C3.34 6.78 7.46 5 12 5c4.54 0 8.66 1.78 11.71 4.67.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28a11.27 11.27 0 0 0-2.67-1.85.996.996 0 0 1-.56-.9v-3.1C15.15 7.25 13.6 7 12 7Z" }, null, -1)
+const IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_3 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M15.59 16.09 13 18.67V11h-2v7.67l-2.59-2.58L7 17.5l5 5 5-5-1.41-1.41Z" }, null, -1)
+const IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_4 = [
+  IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_2,
+  IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_3
+]
+
+function IconCallEndArrowvue_type_template_id_9ec0258e_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", IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_1, IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_4))
+}
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCallEndArrow.vue?vue&type=template&id=9ec0258e
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCallEndArrow.vue
+
+const IconCallEndArrow_script = {}
+
+;
+const IconCallEndArrow_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconCallEndArrow_script, [['render',IconCallEndArrowvue_type_template_id_9ec0258e_render]])
+
+/* harmony default export */ const IconCallEndArrow = (IconCallEndArrow_exports_);
+;// 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/IconCallMerge.vue?vue&type=template&id=2c6dac0e
+
+
+const IconCallMergevue_type_template_id_2c6dac0e_hoisted_1 = {
+  "aria-hidden": "true",
+  focusable: "false",
+  "aria-label": "Call Merge",
+  class: "d-svg d-svg--system d-svg__callMerge",
+  viewBox: "0 0 24 24"
+}
+const IconCallMergevue_type_template_id_2c6dac0e_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M17 20.41 18.41 19 15 15.59 13.59 17 17 20.41ZM7.5 8H11v5.59L5.59 19 7 20.41l6-6V8h3.5L12 3.5 7.5 8Z" }, null, -1)
+const IconCallMergevue_type_template_id_2c6dac0e_hoisted_3 = [
+  IconCallMergevue_type_template_id_2c6dac0e_hoisted_2
+]
+
+function IconCallMergevue_type_template_id_2c6dac0e_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", IconCallMergevue_type_template_id_2c6dac0e_hoisted_1, IconCallMergevue_type_template_id_2c6dac0e_hoisted_3))
+}
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCallMerge.vue?vue&type=template&id=2c6dac0e
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCallMerge.vue
+
+const IconCallMerge_script = {}
+
+;
+const IconCallMerge_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconCallMerge_script, [['render',IconCallMergevue_type_template_id_2c6dac0e_render]])
+
+/* harmony default export */ const IconCallMerge = (IconCallMerge_exports_);
+;// 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/IconExpertNode.vue?vue&type=template&id=7bb944b9
+
+
+const IconExpertNodevue_type_template_id_7bb944b9_hoisted_1 = {
+  "aria-hidden": "true",
+  focusable: "false",
+  "aria-label": "Expert Node",
+  class: "d-svg d-svg--system d-svg__expertNode",
+  viewBox: "0 0 24 24"
+}
+const IconExpertNodevue_type_template_id_7bb944b9_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M18 5H6a1 1 0 0 0-1 1v4.25c0 .414.336.75.75.75h5.42L9.126 8.946l1.41-1.41L15 12l-4.464 4.465-1.41-1.41L11.17 13H5.25A2.25 2.25 0 0 1 3 10.75V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-3h2v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1Z" }, null, -1)
+const IconExpertNodevue_type_template_id_7bb944b9_hoisted_3 = [
+  IconExpertNodevue_type_template_id_7bb944b9_hoisted_2
+]
+
+function IconExpertNodevue_type_template_id_7bb944b9_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", IconExpertNodevue_type_template_id_7bb944b9_hoisted_1, IconExpertNodevue_type_template_id_7bb944b9_hoisted_3))
+}
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconExpertNode.vue?vue&type=template&id=7bb944b9
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconExpertNode.vue
+
+const IconExpertNode_script = {}
+
+;
+const IconExpertNode_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconExpertNode_script, [['render',IconExpertNodevue_type_template_id_7bb944b9_render]])
+
+/* harmony default export */ const IconExpertNode = (IconExpertNode_exports_);
+;// 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/IconBranch.vue?vue&type=template&id=71269722
+
+
+const IconBranchvue_type_template_id_71269722_hoisted_1 = {
+  "aria-hidden": "true",
+  focusable: "false",
+  "aria-label": "Branch",
+  class: "d-svg d-svg--system d-svg__branch",
+  viewBox: "0 0 24 24"
+}
+const IconBranchvue_type_template_id_71269722_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M13 7.83a3.001 3.001 0 1 0-2 0V10H7a3 3 0 0 0-3 3v.17a3.001 3.001 0 1 0 2 0V13a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v3.17a3.001 3.001 0 1 0 2 0V13a3 3 0 0 0-3-3h-4V7.83ZM13 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM5 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm15 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+}, null, -1)
+const IconBranchvue_type_template_id_71269722_hoisted_3 = [
+  IconBranchvue_type_template_id_71269722_hoisted_2
+]
+
+function IconBranchvue_type_template_id_71269722_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", IconBranchvue_type_template_id_71269722_hoisted_1, IconBranchvue_type_template_id_71269722_hoisted_3))
+}
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconBranch.vue?vue&type=template&id=71269722
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconBranch.vue
+
+const IconBranch_script = {}
+
+;
+const IconBranch_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconBranch_script, [['render',IconBranchvue_type_template_id_71269722_render]])
+
+/* harmony default export */ const IconBranch = (IconBranch_exports_);
+;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node_constants.js
+
+
+
+
+
+
+
+
+const IVR_NODE_PROMPT_MENU = 'promptmenu';
+const IVR_NODE_PROMPT_COLLECT = 'promptcollect';
+const IVR_NODE_PROMPT_PLAY = 'promptplay';
+const IVR_NODE_EXPERT = 'gotoexpert';
+const IVR_NODE_GO_TO = 'goto';
+const IVR_NODE_BRANCH = 'branch';
+const IVR_NODE_TRANSFER = 'transfer';
+const IVR_NODE_HANGUP = 'hangup';
+const IVR_NODE_ICON_TYPES = {
+  [IVR_NODE_PROMPT_MENU]: IconDialpad,
+  [IVR_NODE_PROMPT_COLLECT]: IconPhoneDialer,
+  [IVR_NODE_PROMPT_PLAY]: IconVolumeUp,
+  [IVR_NODE_EXPERT]: IconExpertNode,
+  [IVR_NODE_BRANCH]: IconBranch,
+  [IVR_NODE_GO_TO]: IconCallMerge,
+  [IVR_NODE_TRANSFER]: IconPhoneTransfer,
+  [IVR_NODE_HANGUP]: IconCallEndArrow
+};
+const IVR_NODE_LABELS = {
+  [IVR_NODE_PROMPT_MENU]: 'Menu',
+  [IVR_NODE_PROMPT_COLLECT]: 'Collect',
+  [IVR_NODE_PROMPT_PLAY]: 'Play',
+  [IVR_NODE_EXPERT]: 'Expert',
+  [IVR_NODE_BRANCH]: 'Branch',
+  [IVR_NODE_GO_TO]: 'Go-to',
+  [IVR_NODE_TRANSFER]: 'Transfer',
+  [IVR_NODE_HANGUP]: 'Hangup'
+};
+const IVR_NODE_COLORS = {
+  PROMPT: {
+    normal: 'prompt_node_border_color',
+    selected: 'prompt_node_border_color__selected'
+  },
+  LOGIC: {
+    normal: 'd-bc-purple-200',
+    selected: 'd-bc-purple-500'
+  },
+  TERMINAL: {
+    normal: 'd-bc-red-200',
+    selected: 'd-bc-red-400'
+  }
+};
+const IVR_NODE_COLOR_MAPPING = {
+  [IVR_NODE_PROMPT_MENU]: IVR_NODE_COLORS.PROMPT,
+  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_COLORS.PROMPT,
+  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_COLORS.PROMPT,
+  [IVR_NODE_EXPERT]: IVR_NODE_COLORS.LOGIC,
+  [IVR_NODE_BRANCH]: IVR_NODE_COLORS.LOGIC,
+  [IVR_NODE_GO_TO]: IVR_NODE_COLORS.LOGIC,
+  [IVR_NODE_TRANSFER]: IVR_NODE_COLORS.TERMINAL,
+  [IVR_NODE_HANGUP]: IVR_NODE_COLORS.TERMINAL
+};
+;// 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/cards/ivr_node/ivr_node.vue?vue&type=script&lang=js
+
+
+
+
+
+/* harmony default export */ const ivr_nodevue_type_script_lang_js = ({
+  name: 'DtRecipeIvrNode',
+  components: {
+    DtCard: card,
+    DtButton: button_button,
+    DtDropdown: dropdown,
+    IconMenuVertical: IconMenuVertical
+  },
+  props: {
+    /**
+     * type of IVR Node.
+     */
+    nodeType: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Descriptive label for the node name.
+     */
+    nodeLabel: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Selected state of the node
+     */
+    isSelected: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Translated aria-label for header menu button
+     */
+    menuButtonAriaLabel: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * DTMF input
+     */
+    dtmfKey: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+  /**
+   * Add node click event
+   *
+   * @event click
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'click'],
+
+  data() {
+    return {
+      isOpen: false
+    };
+  },
+
+  computed: {
+    nodeListeners() {
+      return {
+        click: e => this.$emit('click', e)
+      };
+    },
+
+    nodeIcon() {
+      return IVR_NODE_ICON_TYPES[this.nodeType];
+    },
+
+    headerColor() {
+      const {
+        normal,
+        selected
+      } = IVR_NODE_COLOR_MAPPING[this.nodeType];
+      return this.isSelected ? selected : normal;
+    }
+
+  },
+  methods: {
+    openMenu() {
+      this.isOpen = true;
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.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/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=6ffb5756&lang=less
+var ivr_nodevue_type_style_index_0_id_6ffb5756_lang_less = __webpack_require__(866);
+;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=6ffb5756&lang=less
+
+;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue
+
+
+
+
+;
+
+
+const ivr_node_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ivr_nodevue_type_script_lang_js, [['render',ivr_nodevue_type_template_id_6ffb5756_render]])
+
+/* harmony default export */ const ivr_node = (ivr_node_exports_);
+;// CONCATENATED MODULE: ./recipes/cards/ivr_node/index.js
+
+
 ;// CONCATENATED MODULE: ./common/mixins/index.js
 
 
@@ -16847,6 +18360,8 @@ const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(to
 
 
 
+
+
 
 
 
@@ -16855,6 +18370,7 @@ const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(to
 
 
 
+
  // Mixins
 
  // Constants