@dialpad/dialtone-vue 3.13.0 → 3.16.0

package/dist/dialtone-vue.umd.js

@@ -11,6 +11,78 @@
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
+/***/ 607:
+/***/ ((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___);
+
+
+/***/ }),
+
+/***/ 374:
+/***/ ((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___);
+
+
+/***/ }),
+
+/***/ 362:
+/***/ ((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___);
+
+
+/***/ }),
+
 /***/ 403:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
@@ -59,7 +131,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-default-list-item,.dt-default-list
 
 /***/ }),
 
-/***/ 954:
+/***/ 873:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -76,7 +148,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___);
 
@@ -107,7 +179,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-section[tabindex=\"-1\"]:focu
 
 /***/ }),
 
-/***/ 980:
+/***/ 890:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -131,7 +203,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".tippy-box[data-popper-escaped] .d-pop
 
 /***/ }),
 
-/***/ 660:
+/***/ 773:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -148,14 +220,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___);
 
 
 /***/ }),
 
-/***/ 385:
+/***/ 673:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -390,6 +462,54 @@ exports.Z = (sfc, props) => {
 };
 
 
+/***/ }),
+
+/***/ 355:
+/***/ ((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__(607);
+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("8c682078", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 222:
+/***/ ((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__(374);
+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("c4d8c05a", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 244:
+/***/ ((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__(362);
+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("0cb73e22", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ 964:
@@ -424,19 +544,19 @@ var update = add("463815e5", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 241:
+/***/ 531:
 /***/ ((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__(954);
+var content = __webpack_require__(873);
 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("5d0b15ad", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("1b6a83f4", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -456,51 +576,51 @@ var update = add("2344e8ee", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 243:
+/***/ 831:
 /***/ ((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__(980);
+var content = __webpack_require__(890);
 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("32d1927c", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("66230c16", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
-/***/ 151:
+/***/ 643:
 /***/ ((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__(660);
+var content = __webpack_require__(773);
 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("10623612", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("58ac8013", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
-/***/ 304:
+/***/ 712:
 /***/ ((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__(385);
+var content = __webpack_require__(673);
 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("78ccd05f", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("0d1bc6f0", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -926,12 +1046,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),
@@ -1135,13 +1259,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) {
@@ -1427,11 +1551,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-82.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-82.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_.resolveComponent)("dt-notice-icon");
 
   const _component_dt_notice_content = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-notice-content");
@@ -1440,20 +1564,22 @@ function bannervue_type_template_id_5c7f46e2_render(_ctx, _cache, $props, $setup
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("aside", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)($options.bannerClass),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)($options.bannerBackgroundImage),
     role: $options.role,
     onKeydown: _cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)(function () {
       return $options.trapFocus && $options.trapFocus(...arguments);
     }, ["tab"]))
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
-    class: "d-banner__dialog",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(["d-banner__dialog", $props.dialogClass]),
     "aria-labelledby": $props.titleId,
     "aria-describedby": $props.contentId
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_notice_icon, {
+  }, [!$props.hideIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_notice_icon, {
+    key: 0,
     kind: $props.kind
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "icon")]),
     _: 3
-  }, 8, ["kind"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_notice_content, {
+  }, 8, ["kind"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_notice_content, {
     "title-id": $props.titleId,
     "content-id": $props.contentId,
     title: $props.title
@@ -1468,9 +1594,9 @@ function bannervue_type_template_id_5c7f46e2_render(_ctx, _cache, $props, $setup
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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-82.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
 
@@ -1484,139 +1610,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_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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
@@ -1750,31 +1881,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_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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-82.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
@@ -1787,7 +1919,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_.toHandlers)($options.buttonListeners)), [$options.shouldRenderIcon() ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
+  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toHandlers)($options.buttonListeners, true)), [$options.shouldRenderIcon() ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
     key: 0,
     "data-qa": "dt-button-icon",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['base-button__icon', 'd-btn__icon', $data.ICON_POSITION_MODIFIERS[$props.iconPosition]])
@@ -1848,7 +1980,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 = ({
@@ -2192,8 +2328,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
@@ -2398,6 +2534,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: [
@@ -2424,6 +2593,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};`;
     }
 
   },
@@ -2451,7 +2626,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
@@ -2674,7 +2849,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()}`;
     }
 
   }
@@ -2748,13 +2923,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-82.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-82.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-card', $props.containerClass]),
+    "data-qa": "dt-card"
+  }, [_ctx.$slots.header ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
+    key: 0,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-card__header', $props.headerClass])
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "header")], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-card__content', $props.contentClass]),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)({
+      'max-height': $props.maxHeight
+    })
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "content")], 6), _ctx.$slots.footer ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
+    key: 1,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-card__footer', $props.footerClass])
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "footer")], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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-82.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 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-82.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_1b1d987e_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
-const comboboxvue_type_template_id_1b1d987e_hoisted_2 = {
+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_.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("combobox-empty-list");
@@ -2766,7 +3021,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_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onEscapeKey'), ["stop"]), ["esc"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onEnterKey'), ["exact"]), ["enter"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onUpKey'), ["stop", "prevent"]), ["up"])), _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onDownKey'), ["stop", "prevent"]), ["down"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKey'), ["stop", "prevent"]), ["home"])), _cache[8] || (_cache[8] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onEndKey'), ["stop", "prevent"]), ["end"]))]
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", comboboxvue_type_template_id_1b1d987e_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "input", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", comboboxvue_type_template_id_7ec6d064_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "input", {
     inputProps: $options.inputProps
   })]), $props.showList ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
     key: 0,
@@ -2781,9 +3036,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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+  }, [$props.loading && !$props.listRenderedOutside ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     key: 0
-  }, $options.listProps)), null, 16)) : $data.isListEmpty && !$props.listRenderedOutside ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+  }, $options.listProps)), null, 16)) : $props.emptyList && $props.emptyStateMessage && !$props.listRenderedOutside ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     key: 1
   }, $options.listProps, {
     message: $props.emptyStateMessage
@@ -2791,12 +3046,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_.createCommentVNode)("", true)], 40, comboboxvue_type_template_id_1b1d987e_hoisted_1);
+    clearHighlightIndex: $options.clearHighlightIndex
+  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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 = ({
@@ -3017,7 +3270,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() {
@@ -3124,8 +3377,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) {
@@ -3137,7 +3390,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() {
@@ -3200,14 +3453,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-82.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-82.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($props.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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,
@@ -3228,7 +3482,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 = {
@@ -3426,13 +3680,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);
@@ -3488,9 +3735,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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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__(241);
-;// 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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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__(531);
+;// 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
 
@@ -3500,7 +3747,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
@@ -3619,8 +3866,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;
     }
 
@@ -3898,7 +4145,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) {
@@ -4067,10 +4314,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);
       }
     }
@@ -4249,6 +4496,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
      */
@@ -4291,9 +4546,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
     };
   },
 
@@ -4353,25 +4606,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: {
@@ -4387,7 +4643,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() {
@@ -4402,70 +4658,619 @@ 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);
+      }
+    },
+
+    onEscapeKey() {
+      this.$emit('escape');
+    },
+
+    onOpen(open, contentRef) {
+      var _this$outsideRendered2;
+
+      this.outsideRenderedListRef = contentRef;
+      (_this$outsideRendered2 = this.outsideRenderedListRef) === null || _this$outsideRendered2 === void 0 ? void 0 : _this$outsideRendered2.addEventListener('mousemove', this.onMouseHighlight);
+      this.$emit('opened', open);
+
+      if (open) {
+        this.setInitialHighlightIndex();
+      }
+    },
+
+    onKeyValidation(e, eventHandler) {
+      if (!this.showList || !this.getListElement()) return;
+      this[eventHandler](e);
+    },
+
+    setInitialHighlightIndex() {
+      if (!this.showList) return;
+      this.$nextTick(() => {
+        // When the list's is shown, reset the highlight index.
+        // If the list is loading, set to -1
+        this.setHighlightIndex(this.loading ? -1 : 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.`);
+      }
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/combobox/combobox.vue
+
+
+
+
+;
+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-82.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 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_.resolveComponent)("icon-arrow-accordion-open");
+
+  const _component_icon_arrow_accordion_closed = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("icon-arrow-accordion-closed");
+
+  const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-button");
+
+  const _component_dt_collapsible_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-collapsible-lazy-show");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($props.elementType), {
+    ref: "collapsible"
+  }, {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
+      id: !$props.ariaLabelledBy && $options.labelledBy,
+      ref: "anchor",
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.withKeys)(function () {
+        return $options.defaultToggleOpen && $options.defaultToggleOpen(...arguments);
+      }, ["enter"])), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)(function () {
+        return $options.defaultToggleOpen && $options.defaultToggleOpen(...arguments);
+      }, ["space"]))]
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "anchor", {
+      attrs: {
+        'aria-controls': $props.id,
+        'aria-expanded': $data.isOpen.toString(),
+        'role': 'button'
+      }
+    }, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.normalizeStyle)({
+        'width': $props.maxWidth
+      })
+    }, {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [$data.isOpen ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.createElementVNode)("span", {
+        class: "d-mr-auto d-truncate",
+        title: $props.anchorText
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.createVNode)(_component_dt_collapsible_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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-82.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Transition, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.withDirectives)(((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($props.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.guardReactiveProps)(_ctx.$attrs)), {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [$data.initialized ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default", {
+        key: 0
+      }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)]),
+      _: 3
+    }, 16)), [[external_commonjs_vue_commonjs2_vue_root_Vue_.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-82.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-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.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__(355);
+;// 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-82.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Transition, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+    name: $props.transition,
+    appear: $props.appear
+  }, _ctx.$attrs), {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.withDirectives)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.guardReactiveProps)(_ctx.$attrs)), [$data.initialized ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default", {
+      key: 0
+    }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)], 16), [[external_commonjs_vue_commonjs2_vue_root_Vue_.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-82.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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-82.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.highlightIndex >= 0) {
-        this.$emit('select', this.highlightIndex);
+      if (this.open !== null) {
+        this.$emit('update:open', false);
       }
     },
 
-    onEscapeKey() {
-      this.$emit('escape');
-    },
-
-    onOpen(open, contentRef) {
-      var _this$outsideRendered2;
-
-      this.outsideRenderedListRef = contentRef;
-      (_this$outsideRendered2 = this.outsideRenderedListRef) === null || _this$outsideRendered2 === void 0 ? void 0 : _this$outsideRendered2.addEventListener('mousemove', this.onMouseHighlight);
-      this.$emit('opened', open);
+    onEnterTransitionComplete() {
+      this.$emit('opened', true, this.$refs.content);
 
-      if (open) {
-        this.isListEmpty = this.checkItemsLength();
-        this.setInitialHighlightIndex();
+      if (this.open !== null) {
+        this.$emit('update:open', true);
       }
     },
 
-    onKeyValidation(e, eventHandler) {
-      if (!this.showList || !this.getListElement()) return;
-      this[eventHandler](e);
-    },
-
-    setInitialHighlightIndex() {
-      if (!this.showList) return;
-      this.$nextTick(() => {
-        // When the list's is shown, reset the highlight index.
-        // If the list is loading, set to -1
-        this.setHighlightIndex(this.loading ? -1 : 0);
-      });
+    defaultToggleOpen() {
+      if (this.open === null) {
+        this.toggleOpen();
+      }
     },
 
-    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;
+    toggleOpen() {
+      this.isOpen = !this.isOpen;
     }
 
   }
 });
-;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=script&lang=js
+;// CONCATENATED MODULE: ./components/collapsible/collapsible.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./components/combobox/combobox.vue
+;// CONCATENATED MODULE: ./components/collapsible/collapsible.vue
 
 
 
 
 ;
-const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_1b1d987e_render]])
+const collapsible_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collapsiblevue_type_script_lang_js, [['render',collapsiblevue_type_template_id_49f5efb1_render]])
 
-/* harmony default export */ const combobox = (combobox_exports_);
-;// CONCATENATED MODULE: ./components/combobox/index.js
+/* 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-82.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-82.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_2335f54b_hoisted_1 = ["id"];
-function dropdownvue_type_template_id_2335f54b_render(_ctx, _cache, $props, $setup, $data, $options) {
+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_.resolveComponent)("dt-popover");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_popover, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
@@ -4482,6 +5287,7 @@ function dropdownvue_type_template_id_2335f54b_render(_ctx, _cache, $props, $set
     "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_.withKeys)($options.onEnterKey, ["enter"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($options.onSpaceKey, ["space"]), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onUpKeyPress'), ["stop", "prevent"]), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onDownKeyPress'), ["stop", "prevent"]), ["down"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKeyPress'), ["stop", "prevent"]), ["home"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onEndKeyPress'), ["stop", "prevent"]), ["end"])), _cache[6] || (_cache[6] = $event => $options.onKeyValidation($event, 'onKeyPress'))]
   }), {
@@ -4500,7 +5306,7 @@ function dropdownvue_type_template_id_2335f54b_render(_ctx, _cache, $props, $set
       return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("ul", {
         id: $props.listId,
         ref: "listWrapper",
-        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-ps-relative', 'd-px0', $data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]),
+        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)($options.listClasses),
         "data-qa": "dt-dropdown-list-wrapper",
         onMouseleave: _cache[0] || (_cache[0] = function () {
           return $options.clearHighlightIndex && $options.clearHighlightIndex(...arguments);
@@ -4510,18 +5316,18 @@ function dropdownvue_type_template_id_2335f54b_render(_ctx, _cache, $props, $set
         })
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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-82.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-82.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_.resolveComponent)("popover-header-footer");
 
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-lazy-show");
@@ -4533,7 +5339,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_.withModifiers)(() => {}, ["prevent", "stop"]))
-  }, null, 8, popovervue_type_template_id_0fe0a777_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($props.elementType), {
+  }, null, 8, popovervue_type_template_id_bad0388e_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($props.elementType), {
     ref: "popover",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-popover', {
       'd-popover__anchor--modal-opened': $props.modal && $data.isOpen
@@ -4544,16 +5350,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_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)(function () {
+      onContextmenu: _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)(function () {
+        return $options.onContext && $options.onContext(...arguments);
+      }, ["prevent"])),
+      onKeydown: [_cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)(function () {
         return $options.onArrowKeyPress && $options.onArrowKeyPress(...arguments);
-      }, ["prevent"]), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)(function () {
+      }, ["prevent"]), ["up"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.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_.withKeys)(function () {
         return $options.closePopover && $options.closePopover(...arguments);
       }, ["escape"]))
     }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "anchor", {
@@ -4562,15 +5372,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_.createVNode)(_component_dt_lazy_show, {
+    })], 40, popovervue_type_template_id_bad0388e_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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: "",
@@ -4624,7 +5434,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) {
@@ -4667,41 +5477,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
@@ -4802,7 +5634,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
@@ -4937,6 +5769,7 @@ function isTableElement(element) {
 
 
 
+
 function getTrueOffsetParent(element) {
   if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
   getComputedStyle(element).position === 'fixed') {
@@ -4949,8 +5782,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
@@ -5824,31 +6657,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;
     }
@@ -5940,8 +6764,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;
@@ -5953,8 +6777,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`
@@ -5977,18 +6801,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;
@@ -6035,6 +6859,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,
@@ -6049,7 +6875,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,
@@ -9171,78 +9997,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-82.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Transition, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
-    name: $props.transition,
-    appear: $props.appear
-  }, _ctx.$attrs), {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.withDirectives)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.guardReactiveProps)(_ctx.$attrs)), [$data.initialized ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default", {
-      key: 0
-    }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)], 16), [[external_commonjs_vue_commonjs2_vue_root_Vue_.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-82.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-82.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) {
@@ -9374,6 +10128,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.
      */
@@ -9802,8 +10565,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;
 
@@ -9815,6 +10582,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;
     },
@@ -9860,7 +10650,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.
@@ -9868,7 +10658,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) {
@@ -9946,7 +10736,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) {
@@ -9968,9 +10758,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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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__(243);
-;// 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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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__(831);
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=bad0388e&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -9980,7 +10770,7 @@ var popovervue_type_style_index_0_id_0fe0a777_lang_less = __webpack_require__(24
 ;
 
 
-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
@@ -10026,6 +10816,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.
      */
@@ -10181,6 +10980,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
+      }];
     }
 
   },
@@ -10188,7 +10993,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();
       }
@@ -10283,7 +11088,7 @@ const DROPDOWN_PADDING_CLASSES = {
     },
 
     onKeyValidation(e, eventHandler) {
-      if (this.open !== null) {
+      if (this.open !== null && !this.openOnContext) {
         return;
       }
 
@@ -10294,17 +11099,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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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__(222);
+;// 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-82.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("li", null, [$props.heading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", dropdown_listvue_type_template_id_559d9d2e_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)($props.heading), 1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("ul", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-ps-relative', 'd-px0', $props.listClass]),
+    "data-qa": "dt-dropdown-list-wrapper"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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-82.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-82.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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-82.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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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__(244);
+;// 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-82.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 = {
@@ -10361,7 +11252,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_.toHandlers)($options.inputListeners)), null, 16, _hoisted_7)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("input", (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toHandlers)($options.inputListeners, true)), null, 16, _hoisted_7)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("input", (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     key: 2,
     ref: "input",
     value: $props.modelValue,
@@ -10371,7 +11262,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_.toHandlers)($options.inputListeners)), null, 16, _hoisted_8)), _ctx.$slots.rightIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
+  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toHandlers)($options.inputListeners, true)), null, 16, _hoisted_8)), _ctx.$slots.rightIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
     key: 3,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)($options.inputIconClasses('right')),
     "data-qa": "dt-input-right-icon-wrapper",
@@ -10510,7 +11401,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) {
@@ -10844,7 +11735,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_.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_.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);
     }
   }
 
@@ -11147,7 +12038,7 @@ const MessagesMixin = {
     },
 
     descriptionKey() {
-      return "input-description-".concat(getUniqueString());
+      return `input-description-${getUniqueString()}`;
     },
 
     inputState() {
@@ -11333,7 +12224,7 @@ const MessagesMixin = {
     },
 
     getMessageKey(type, index) {
-      return "message-".concat(type, "-").concat(index);
+      return `message-${type}-${index}`;
     },
 
     validateLength(length) {
@@ -11614,7 +12505,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}`;
     }
 
   }
@@ -11896,7 +12787,7 @@ const MODAL_SIZE_MODIFIERS = {
 
   computed: {
     open() {
-      return "".concat(!this.show);
+      return `${!this.show}`;
     },
 
     hasFooterSlot() {
@@ -11954,8 +12845,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-82.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"];
@@ -11973,26 +12862,26 @@ function list_sectionvue_type_template_id_0edadf84_render(_ctx, _cache, $props,
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.toDisplayString)($props.header), 9, list_sectionvue_type_template_id_0edadf84_hoisted_2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), !$options.isCollapsible || $data.showAll ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.renderSlot)(_ctx.$slots, "default")], 8, list_sectionvue_type_template_id_0edadf84_hoisted_3)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.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_.createElementVNode)("div", list_sectionvue_type_template_id_0edadf84_hoisted_5, [$options.isCollapsible ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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
@@ -12323,7 +13212,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_.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)($options.pages, (page, index) => {
     return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
-      key: "page-".concat(page, "-").concat(index)
+      key: `page-${page}-${index}`
     }, [isNaN(Number(page)) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", paginationvue_type_template_id_294973d0_hoisted_2, " … ")) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_button, {
       key: 1,
       "aria-label": $props.pageNumberAriaLabel(page),
@@ -12349,58 +13238,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_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/pagination/pagination.vue?vue&type=script&lang=js
@@ -12583,7 +13474,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_.toHandlers)($options.inputListeners)), null, 16, radiovue_type_template_id_acb64ede_hoisted_2)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", radiovue_type_template_id_acb64ede_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toHandlers)($options.inputListeners, true)), null, 16, radiovue_type_template_id_acb64ede_hoisted_2)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", radiovue_type_template_id_acb64ede_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     class: _ctx.labelClass
   }, _ctx.labelChildProps, {
     "data-qa": "radio-label"
@@ -12799,7 +13690,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}`;
     }
 
   }
@@ -13095,7 +13986,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
@@ -13135,13 +14026,13 @@ function tabvue_type_template_id_0bc212ec_render(_ctx, _cache, $props, $setup, $
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-button");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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',
@@ -13266,11 +14157,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_.withDirectives)(((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.normalizeClass)([{
       'd-d-none': $options.hidePanel
     }, $props.tabPanelClass]),
@@ -13366,7 +14257,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_.toHandlers)($options.inputListeners)), null, 16, checkboxvue_type_template_id_06a6bc3e_hoisted_2)]), $options.hasLabelOrDescription ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", checkboxvue_type_template_id_06a6bc3e_hoisted_3, [$options.hasLabel ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toHandlers)($options.inputListeners, true)), null, 16, checkboxvue_type_template_id_06a6bc3e_hoisted_2)]), $options.hasLabelOrDescription ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", checkboxvue_type_template_id_06a6bc3e_hoisted_3, [$options.hasLabel ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     key: 0,
     class: _ctx.labelClass
   }, _ctx.labelChildProps, {
@@ -13637,7 +14528,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}`;
     }
 
   }
@@ -13678,12 +14569,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_.toHandlers)($options.chipListeners)), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [_ctx.$slots.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_7c802724_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "icon")])) : _ctx.$slots.avatar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_7c802724_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.normalizeClass)(['d-truncate', 'd-chip__text', $props.contentClass])
     }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_7c802724_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)]),
@@ -13908,7 +14799,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_.toHandlers)($options.selectListeners)), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default", {}, () => [((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)($props.options, option => {
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toHandlers)($options.selectListeners, true)), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default", {}, () => [((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)($props.options, option => {
     return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("option", (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
       key: $options.getOptionKey(option.value),
       value: option.value,
@@ -14155,7 +15046,7 @@ const optionsValidator = options => {
     },
 
     descriptionKey() {
-      return "select-".concat(this.selectKey, "-description");
+      return `select-${this.selectKey}-description`;
     },
 
     labelAriaDetails() {
@@ -14183,7 +15074,7 @@ const optionsValidator = options => {
     },
 
     getOptionKey(value) {
-      return "select-".concat(this.selectKey, "-option-").concat(value);
+      return `select-${this.selectKey}-option-${value}`;
     },
 
     validateOptionsPresence() {
@@ -14652,7 +15543,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_.normalizeClass)(['d-tooltip', "d-tooltip__arrow-tippy--".concat($data.currentPlacement), {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-tooltip', `d-tooltip__arrow-tippy--${$data.currentPlacement}`, {
       [$data.TOOLTIP_KIND_MODIFIERS.inverted]: $props.inverted
     }, $props.contentClass]),
     onAfterLeave: $options.onLeaveTransitionComplete,
@@ -14671,10 +15562,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'];
@@ -14998,11 +15889,11 @@ function keyboard_shortcutvue_type_template_id_b5fd217c_render(_ctx, _cache, $pr
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", keyboard_shortcutvue_type_template_id_b5fd217c_hoisted_1, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)($props.screenReaderText), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)($options.formattedShortcutSplit, (item, i) => {
     return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, [$options.icons[item] ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($options.icons[item]), {
-      key: "".concat(i, "-").concat(item),
+      key: `${i}-${item}`,
       "aria-hidden": "true",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
-      key: "".concat(i, "-").concat(item),
+      key: `${i}-${item}`,
       "aria-hidden": "true",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)([$props.inverted ? 'd-fc-black-075' : 'd-fc-black-500', 'd-mr2']),
       innerHTML: item
@@ -15011,166 +15902,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_.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_.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_.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_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.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_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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
@@ -15188,7 +16091,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-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/keyboard_shortcut/keyboard_shortcut.vue?vue&type=script&lang=js
 
 
@@ -15255,7 +16158,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);
     }
 
@@ -15281,15 +16184,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-82.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-82.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_.resolveComponent)("dt-root-layout-body");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", root_layoutvue_type_template_id_2e5fe0a4_hoisted_1, [_ctx.$slots.header ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("header", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", root_layoutvue_type_template_id_45a068b6_hoisted_1, [_ctx.$slots.header ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("header", {
     key: 0,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['root-layout__header', $props.headerClass, {
       'root-layout__header--sticky': $props.headerSticky
@@ -15299,6 +16202,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_.renderSlot)(_ctx.$slots, "header")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_root_layout_body, {
+    "body-class": $props.bodyClass,
     "content-class": $props.contentClass,
     "content-wrap-width-percent": $props.contentWrapWidthPercent,
     "sidebar-class": $props.sidebarClass,
@@ -15308,7 +16212,7 @@ function root_layoutvue_type_template_id_2e5fe0a4_render(_ctx, _cache, $props, $
     sidebar: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "sidebar")]),
     content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("footer", {
     key: 1,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['root-layout__footer', $props.footerClass]),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)({
@@ -15317,13 +16221,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_.renderSlot)(_ctx.$slots, "footer")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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-82.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-82.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['root-layout__body', $options.bodyClass]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['root-layout__body', $options.bodyClasses]),
     "data-qa": "root-layout-body"
   }, [_ctx.$slots.sidebar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("aside", {
     key: 0,
@@ -15341,7 +16245,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_.renderSlot)(_ctx.$slots, "content")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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 = {
@@ -15356,6 +16260,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
      */
@@ -15402,19 +16314,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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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__(304);
-;// 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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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__(712);
+;// 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
 
@@ -15424,7 +16336,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-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout.vue?vue&type=script&lang=js
@@ -15461,6 +16373,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
      */
@@ -15527,9 +16447,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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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__(151);
-;// 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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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__(643);
+;// 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
 
@@ -15539,17 +16459,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-82.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-82.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_.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("combobox-empty-list");
@@ -15561,6 +16481,8 @@ function combobox_with_popovervue_type_template_id_01d7fb04_render(_ctx, _cache,
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_combobox, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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,
@@ -15586,15 +16508,13 @@ function combobox_with_popovervue_type_template_id_01d7fb04_render(_ctx, _cache,
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.withCtx)(_ref2 => {
       let {
         opened,
         listProps,
-        clearHighlightIndex,
-        isLoading,
-        isListEmpty
+        clearHighlightIndex
       } = _ref2;
       return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_popover, {
         ref: "popover",
@@ -15611,7 +16531,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_.createSlots)({
@@ -15623,16 +16543,16 @@ function combobox_with_popovervue_type_template_id_01d7fb04_render(_ctx, _cache,
             clearHighlightIndex;
             $options.onFocusOut;
           }
-        }, [isLoading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+        }, [$props.loading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
           key: 0
-        }, listProps)), null, 16)) : isListEmpty ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+        }, listProps)), null, 16)) : $props.emptyList && $props.emptyStateMessage ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
           key: 1
         }, listProps, {
           message: $props.emptyStateMessage
         }), null, 16, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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",
@@ -15641,7 +16561,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_.renderSlot)(_ctx.$slots, "header")], 544)])
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "header")], 544)]),
+        key: "0"
       } : undefined, _ctx.$slots.footer ? {
         name: "footerContent",
         fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
@@ -15649,13 +16570,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_.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_.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-82.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
 
@@ -15794,6 +16716,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.
@@ -15811,6 +16742,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
      */
@@ -15917,12 +16856,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();
@@ -15947,35 +16887,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-82.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-82.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_.resolveComponent)("dt-chip");
 
   const _component_dt_input = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-input");
@@ -15998,7 +16935,7 @@ function combobox_multi_selectvue_type_template_id_d29708fc_render(_ctx, _cache,
       let {
         onInput
       } = _ref;
-      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", combobox_multi_selectvue_type_template_id_d29708fc_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", combobox_multi_selectvue_type_template_id_d29708fc_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)($props.selectedItems, item => {
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)($props.selectedItems, item => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_chip, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
           ref_for: true,
           ref: "chips",
@@ -16033,19 +16970,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_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", combobox_multi_selectvue_type_template_id_d29708fc_hoisted_4, [!$props.loading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "list", {
+    list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
+      ref: "list",
+      onMousedown: _cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)(() => {}, ["prevent"]))
+    }, [!$props.loading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "list", {
       key: 0
-    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", combobox_multi_selectvue_type_template_id_d29708fc_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)($props.loadingMessage), 1))], 512)]),
+    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)($props.loadingMessage), 1))], 544)]),
     _: 2
   }, [_ctx.$slots.header ? {
     name: "header",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", combobox_multi_selectvue_type_template_id_d29708fc_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "header")], 512)])
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "header")], 512)]),
+    key: "0"
   } : undefined, _ctx.$slots.footer ? {
     name: "footer",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", combobox_multi_selectvue_type_template_id_d29708fc_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "footer")], 512)])
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", combobox_multi_selectvue_type_template_id_43f74cb7_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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
@@ -16576,32 +17518,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-82.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-82.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_.resolveComponent)("dt-avatar");
 
   const _component_dt_list_item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-list-item");
@@ -16612,16 +17554,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_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", contact_infovue_type_template_id_3f590359_hoisted_1, [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_avatar, {
+    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", contact_infovue_type_template_id_38fc10e0_hoisted_1, [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_avatar, {
       key: 0,
-      size: "lg",
-      "avatar-class": "d-bar2"
+      size: "lg"
     }, {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_avatar, {
       key: 1,
@@ -16636,14 +17577,14 @@ function contact_infovue_type_template_id_3f590359_render(_ctx, _cache, $props,
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.createCommentVNode)("", true)])]),
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", contact_infovue_type_template_id_3f590359_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "header")])]),
-    subtitle: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", contact_infovue_type_template_id_3f590359_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "subtitle")])]),
-    bottom: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", contact_infovue_type_template_id_3f590359_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "bottom")])]),
-    right: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", contact_infovue_type_template_id_3f590359_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "right")])]),
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", contact_infovue_type_template_id_38fc10e0_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "header")])]),
+    subtitle: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", contact_infovue_type_template_id_38fc10e0_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "subtitle")])]),
+    bottom: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", contact_infovue_type_template_id_38fc10e0_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "bottom")])]),
+    right: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", contact_infovue_type_template_id_38fc10e0_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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 = {
@@ -16748,7 +17689,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
@@ -16865,6 +17806,8 @@ const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(to
 
 
 
+
+