@dialpad/dialtone-vue 3.3.0 → 3.6.0

package/dist/dialtone-vue.common.js

@@ -49,7 +49,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-default-list-item,.dt-default-list
 
 /***/ }),
 
-/***/ 987:
+/***/ 15:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -119,6 +119,54 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".tippy-box[data-popper-escaped] .d-pop
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 475:
+/***/ ((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, ".root-layout__header--sticky{position:-webkit-sticky;position:sticky;top:0}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
+/***/ 669:
+/***/ ((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, ".root-layout__body{display:flex;flex-wrap:wrap;gap:0}.root-layout__body--invert{flex-direction:row-reverse}.root-layout__sidebar{flex-grow:1}.root-layout__content{flex-basis:0;flex-grow:999}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 511:
@@ -145,7 +193,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".skeleton-placeholder{display:flex;str
 
 /***/ }),
 
-/***/ 635:
+/***/ 71:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -377,19 +425,19 @@ var update = add("c62e22ae", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 366:
+/***/ 213:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(987);
+var content = __webpack_require__(15);
 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("48240900", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("7e5f7c46", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -425,6 +473,38 @@ var update = add("3123c041", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 35:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(475);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(402)/* ["default"] */ .Z)
+var update = add("10cf22bb", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 516:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(669);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(402)/* ["default"] */ .Z)
+var update = add("6104adba", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 878:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -441,19 +521,19 @@ var update = add("6f5d0b60", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 96:
+/***/ 126:
 /***/ ((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__(635);
+var content = __webpack_require__(71);
 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("9886cd68", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("762f0436", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1055,8 +1135,11 @@ __webpack_require__.d(__webpack_exports__, {
   "DtPopover": () => (/* reexport */ popover),
   "DtRadio": () => (/* reexport */ radio_radio),
   "DtRadioGroup": () => (/* reexport */ radio_group),
+  "DtRecipeComboboxMultiSelect": () => (/* reexport */ combobox_multi_select),
+  "DtRecipeComboboxWithPopover": () => (/* reexport */ combobox_with_popover),
   "DtRecipeContactInfo": () => (/* reexport */ contact_info),
   "DtRecipeTopBannerInfo": () => (/* reexport */ top_banner_info),
+  "DtRootLayout": () => (/* reexport */ root_layout),
   "DtSelectMenu": () => (/* reexport */ select_menu),
   "DtSkeleton": () => (/* reexport */ skeleton_skeleton),
   "DtSkeletonListItem": () => (/* reexport */ skeleton_list_item),
@@ -1083,6 +1166,7 @@ __webpack_require__.d(__webpack_exports__, {
   "POPOVER_INITIAL_FOCUS_STRINGS": () => (/* reexport */ POPOVER_INITIAL_FOCUS_STRINGS),
   "POPOVER_PADDING_CLASSES": () => (/* reexport */ POPOVER_PADDING_CLASSES),
   "POPOVER_ROLES": () => (/* reexport */ POPOVER_ROLES),
+  "ROOT_LAYOUT_SIDEBAR_POSITIONS": () => (/* reexport */ ROOT_LAYOUT_SIDEBAR_POSITIONS),
   "SELECT_SIZE_MODIFIERS": () => (/* reexport */ SELECT_SIZE_MODIFIERS),
   "SELECT_STATE_MODIFIERS": () => (/* reexport */ SELECT_STATE_MODIFIERS),
   "SHORTCUTS_ALIASES": () => (/* reexport */ SHORTCUTS_ALIASES),
@@ -1146,7 +1230,7 @@ if (typeof window !== 'undefined') {
 
 ;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=3dcc5cfa
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=a43ab9f6
 
 const _hoisted_1 = ["id"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -1156,7 +1240,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "dt-avatar"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=3dcc5cfa
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=a43ab9f6
 
 ;// CONCATENATED MODULE: ./components/avatar/avatar_constants.js
 const AVATAR_KIND_MODIFIERS = {
@@ -1414,16 +1498,23 @@ const flushPromises = () => {
       const firstChild = this.$el.children[0];
 
       if (firstChild) {
-        this.validateElementType(firstChild);
         this.setKind(firstChild);
         this.validateImageAttrsPresence();
       }
     },
 
     setKind(element) {
-      if (this.isSvgType(element)) this.kind = 'icon';
-      if (this.isImageType(element)) this.kind = 'image';
-      if (this.isInitialsType(element)) this.kind = 'initials';
+      if (this.isSvgType(element)) {
+        this.kind = 'icon';
+        return;
+      }
+
+      if (this.isImageType(element)) {
+        this.kind = 'image';
+        return;
+      }
+
+      this.kind = 'initials';
     },
 
     isSvgType(element) {
@@ -1438,15 +1529,6 @@ const flushPromises = () => {
       return (element === null || element === void 0 ? void 0 : (_element$tagName2 = element.tagName) === null || _element$tagName2 === void 0 ? void 0 : _element$tagName2.toUpperCase()) === 'IMG';
     },
 
-    isInitialsType(element) {
-      return (element === null || element === void 0 ? void 0 : element.nodeType) === Node.TEXT_NODE;
-    },
-
-    validateElementType(element) {
-      if (this.isInitialsType(element) || this.isSvgType(element) || this.isImageType(element)) return;
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.warn)('img, svg, and raw text are the only valid elements to put inside the avatar', this);
-    },
-
     validateImageAttrsPresence() {
       if (this.kind === 'image') {
         // Check that default slot image required attributes are provided
@@ -3013,6 +3095,7 @@ function comboboxvue_type_template_id_4901dce5_render(_ctx, _cache, $props, $set
  * the root element of the component.
  */
 
+const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced ' + 'element doesn\'t exist. Received listElement: ';
 /* harmony default export */ const keyboard_list_navigation = (function () {
   let {
     // Role of the list items in the component. This is used to identify the list items
@@ -3036,7 +3119,7 @@ function comboboxvue_type_template_id_4901dce5_render(_ctx, _cache, $props, $set
     endOfListMethod = null,
     // Scroll the active element into view when highlighted by a keyboard event.
     scrollToOnHighlight = true,
-    // Focus the active element on keyboard navigation
+    // Focus the active element on keyboard navigation.
     focusOnKeyboardNavigation = false
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return {
@@ -3070,14 +3153,25 @@ function comboboxvue_type_template_id_4901dce5_render(_ctx, _cache, $props, $set
       // Gets the length of all the items in the list, uses the listItemRole param to determine
       // whether an element is a list item.
       _itemsLength() {
+        const listItems = this._getListItemNodes();
+
+        if (listItems === null) {
+          return 0;
+        }
+
+        return listItems.length;
+      },
+
+      // Gets all the list item nodes within the list element
+      _getListItemNodes() {
         const listElement = this._getListElement();
 
         if (!listElement) {
-          console.error("listElementKey is required or the referenced element doesn't exist. Received\n          listElement: ", listElement);
-          return 0;
+          console.error(ERROR_INVALID_LIST_ELEMENT, listElement);
+          return null;
         }
 
-        return listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")).length;
+        return Array.from(listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")));
       },
 
       onUpKey() {
@@ -3122,6 +3216,35 @@ function comboboxvue_type_template_id_4901dce5_render(_ctx, _cache, $props, $set
         this.focusActiveItemIfNeeded();
       },
 
+      onNavigationKey(key) {
+        const listItems = this._getListItemNodes();
+
+        const matchingItems = listItems.filter(item => {
+          const content = item.textContent.trim().toLowerCase();
+          return content.startsWith(key.toLowerCase());
+        });
+
+        if (matchingItems.length <= 0) {
+          return;
+        }
+
+        const highlightedMatchingItemIndex = matchingItems.findIndex(item => {
+          return this[indexKey] === listItems.indexOf(item);
+        });
+        const nextHighlightedItemIndex = listItems.indexOf(highlightedMatchingItemIndex < matchingItems.length - 1 ? matchingItems[highlightedMatchingItemIndex + 1] : matchingItems[0]);
+        this.setHighlightIndex(nextHighlightedItemIndex);
+        this.scrollActiveItemIntoViewIfNeeded();
+        this.focusActiveItemIfNeeded();
+      },
+
+      isValidLetter(key) {
+        if (key.length > 1) {
+          return false;
+        }
+
+        return key >= 'a' && key <= 'z' || key >= 'A' && key <= 'Z';
+      },
+
       jumpToBeginning() {
         this.setHighlightIndex(0);
       },
@@ -3158,8 +3281,7 @@ function comboboxvue_type_template_id_4901dce5_render(_ctx, _cache, $props, $set
         }
 
         const listItems = Array.from(listElement.querySelectorAll("[role=\"".concat(listItemRole, "\"]")));
-        const index = listItems.indexOf(listElement.querySelector("#".concat(id)));
-        return index;
+        return listItems.indexOf(listElement.querySelector("#".concat(id)));
       },
 
       _getItemId(index) {
@@ -3422,10 +3544,10 @@ const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxv
 /* harmony default export */ const combobox = (combobox_exports_);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=template&id=071e4ebc
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=template&id=b0e1f8ba
 
-const dropdownvue_type_template_id_071e4ebc_hoisted_1 = ["id"];
-function dropdownvue_type_template_id_071e4ebc_render(_ctx, _cache, $props, $setup, $data, $options) {
+const dropdownvue_type_template_id_b0e1f8ba_hoisted_1 = ["id"];
+function dropdownvue_type_template_id_b0e1f8ba_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_popover, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
@@ -3433,7 +3555,7 @@ function dropdownvue_type_template_id_071e4ebc_render(_ctx, _cache, $props, $set
     "content-width": $props.contentWidth,
     open: $props.open,
     placement: $props.placement,
-    "initial-focus-element": "first",
+    "initial-focus-element": $data.openedWithKeyboard ? 'first' : 'dialog',
     "fallback-placements": $props.fallbackPlacements,
     padding: "none",
     role: "menu",
@@ -3443,7 +3565,7 @@ function dropdownvue_type_template_id_071e4ebc_render(_ctx, _cache, $props, $set
     "max-width": $props.maxWidth,
     "open-with-arrow-keys": true,
     onOpened: $options.updateInitialHighlightIndex,
-    onKeydown: [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.onEnterKey, ["enter"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.onSpaceKey, ["space"]), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onUpKeyPress'), ["stop", "prevent"]), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onDownKeyPress'), ["stop", "prevent"]), ["down"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKeyPress'), ["stop", "prevent"]), ["home"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEndKeyPress'), ["stop", "prevent"]), ["end"]))]
+    onKeydown: [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.onEnterKey, ["enter"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($options.onSpaceKey, ["space"]), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onUpKeyPress'), ["stop", "prevent"]), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onDownKeyPress'), ["stop", "prevent"]), ["down"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKeyPress'), ["stop", "prevent"]), ["home"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEndKeyPress'), ["stop", "prevent"]), ["end"])), _cache[6] || (_cache[6] = $event => $options.onKeyValidation($event, 'onKeyPress'))]
   }), {
     anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref => {
       let {
@@ -3470,12 +3592,12 @@ function dropdownvue_type_template_id_071e4ebc_render(_ctx, _cache, $props, $set
         })
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
         close: close
-      })], 42, dropdownvue_type_template_id_071e4ebc_hoisted_1)];
+      })], 42, dropdownvue_type_template_id_b0e1f8ba_hoisted_1)];
     }),
     _: 3
-  }, 16, ["content-width", "open", "placement", "fallback-placements", "modal", "max-height", "max-width", "onOpened", "onKeydown"]);
+  }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "modal", "max-height", "max-width", "onOpened", "onKeydown"]);
 }
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=071e4ebc
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=b0e1f8ba
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=0656612f
 
@@ -8920,7 +9042,6 @@ const DROPDOWN_PADDING_CLASSES = {
   components: {
     DtPopover: popover
   },
-  inheritAttrs: false,
   mixins: [keyboard_list_navigation({
     indexKey: 'highlightIndex',
     idKey: 'highlightId',
@@ -8932,6 +9053,7 @@ const DROPDOWN_PADDING_CLASSES = {
     activeItemKey: 'activeItemEl',
     focusOnKeyboardNavigation: true
   })],
+  inheritAttrs: false,
   props: {
     /**
      * Controls whether the dropdown is shown. Leaving this null will have the dropdown trigger on click by default.
@@ -9080,6 +9202,10 @@ const DROPDOWN_PADDING_CLASSES = {
 
     activeItemEl() {
       return this.getListElement().querySelector('#' + this.highlightId);
+    },
+
+    isArrowKeyNav() {
+      return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;
     }
 
   },
@@ -9139,7 +9265,7 @@ const DROPDOWN_PADDING_CLASSES = {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
+      if (this.isArrowKeyNav) {
         return this.onUpKey();
       }
     },
@@ -9150,29 +9276,35 @@ const DROPDOWN_PADDING_CLASSES = {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
+      if (this.isArrowKeyNav) {
         return this.onDownKey();
       }
     },
 
     onHomeKeyPress() {
-      if (!this.isOpen) {
+      if (!this.isOpen || !this.isArrowKeyNav) {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
-        return this.onHomeKey();
-      }
+      return this.onHomeKey();
     },
 
     onEndKeyPress() {
-      if (!this.isOpen) {
+      if (!this.isOpen || !this.isArrowKeyNav) {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
-        return this.onEndKey();
+      return this.onEndKey();
+    },
+
+    onKeyPress(e) {
+      if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {
+        return;
       }
+
+      e.stopPropagation();
+      e.preventDefault();
+      return this.onNavigationKey(e.key);
     },
 
     onKeyValidation(e, eventHandler) {
@@ -9193,7 +9325,7 @@ const DROPDOWN_PADDING_CLASSES = {
 
 
 ;
-const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_071e4ebc_render]])
+const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_b0e1f8ba_render]])
 
 /* harmony default export */ const dropdown = (dropdown_exports_);
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
@@ -9358,7 +9490,7 @@ async function codeToEmojiData(code) {
 // @returns {string[]}
 
 function findShortCodes(textContent) {
-  const shortCodes = textContent.match(/:[^:]+:/g);
+  const shortCodes = textContent.match(/:\w+:/g);
   const filtered = shortCodes ? shortCodes.filter(code => shortcodeToEmojiData(code)) : [];
   return new Set(filtered);
 } // Finds every emoji in slot text
@@ -10107,15 +10239,15 @@ const emoji_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(emojivue_typ
 ;// CONCATENATED MODULE: ./components/emoji/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=0337d4a5
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=1204d99d
 
-const inputvue_type_template_id_0337d4a5_hoisted_1 = {
+const inputvue_type_template_id_1204d99d_hoisted_1 = {
   ref: "container",
   class: "base-input",
   "data-qa": "dt-input"
 };
-const inputvue_type_template_id_0337d4a5_hoisted_2 = ["aria-details"];
-const inputvue_type_template_id_0337d4a5_hoisted_3 = ["id"];
+const inputvue_type_template_id_1204d99d_hoisted_2 = ["aria-details"];
+const inputvue_type_template_id_1204d99d_hoisted_3 = ["id"];
 const _hoisted_4 = {
   key: 0
 };
@@ -10129,23 +10261,25 @@ const _hoisted_6 = {
 };
 const _hoisted_7 = ["value", "name", "disabled", "maxlength"];
 const _hoisted_8 = ["value", "name", "type", "disabled", "maxlength"];
-function inputvue_type_template_id_0337d4a5_render(_ctx, _cache, $props, $setup, $data, $options) {
+function inputvue_type_template_id_1204d99d_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-validation-messages");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_0337d4a5_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_1204d99d_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
     class: "base-input__label",
     "aria-details": _ctx.$slots.description || $props.description ? $options.descriptionKey : undefined,
     "data-qa": "dt-input-label-wrapper"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "labelSlot", {}, () => [$props.label ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
+    ref: "label",
     "data-qa": "dt-input-label",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['base-input__label-text', 'd-label', $data.labelSizeClasses[$props.size]])
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.label), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), _ctx.$slots.description || $props.description || $options.shouldValidateLength ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
     id: $options.descriptionKey,
+    ref: "description",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['base-input__description', 'd-description', 'd-fd-column', $data.descriptionSizeClasses[$props.size]]),
     "data-qa": "dt-input-description"
-  }, [_ctx.$slots.description || $props.description ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "description", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.description), 1)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.shouldValidateLength ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.validationProps.length.description), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_0337d4a5_hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", _hoisted_6, [_ctx.$slots.leftIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+  }, [_ctx.$slots.description || $props.description ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "description", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.description), 1)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.shouldValidateLength ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.validationProps.length.description), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_1204d99d_hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", _hoisted_6, [_ctx.$slots.leftIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
     key: 0,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.inputIconClasses('left')),
     "data-qa": "dt-input-left-icon-wrapper",
@@ -10178,7 +10312,7 @@ function inputvue_type_template_id_0337d4a5_render(_ctx, _cache, $props, $setup,
     onFocusout: _cache[1] || (_cache[1] = function () {
       return $options.onBlur && $options.onBlur(...arguments);
     })
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "rightIcon")], 34)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])], 8, inputvue_type_template_id_0337d4a5_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_validation_messages, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "rightIcon")], 34)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])], 8, inputvue_type_template_id_1204d99d_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_validation_messages, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     "validation-messages": $options.validationMessages,
     "show-messages": _ctx.showMessages,
     class: _ctx.messagesClass
@@ -10186,7 +10320,7 @@ function inputvue_type_template_id_0337d4a5_render(_ctx, _cache, $props, $setup,
     "data-qa": "dt-input-messages"
   }), null, 16, ["validation-messages", "show-messages", "class"])], 512);
 }
-;// CONCATENATED MODULE: ./components/input/input.vue?vue&type=template&id=0337d4a5
+;// CONCATENATED MODULE: ./components/input/input.vue?vue&type=template&id=1204d99d
 
 ;// CONCATENATED MODULE: ./components/input/input_constants.js
 // Valid input types, any other input types (for example: 'radio' or 'checkbox') should
@@ -11089,7 +11223,7 @@ const MessagesMixin = {
 
 
 ;
-const input_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(inputvue_type_script_lang_js, [['render',inputvue_type_template_id_0337d4a5_render]])
+const input_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(inputvue_type_script_lang_js, [['render',inputvue_type_template_id_1204d99d_render]])
 
 /* harmony default export */ const input_input = (input_exports_);
 ;// CONCATENATED MODULE: ./components/input/index.js
@@ -11830,9 +11964,9 @@ const list_section_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_
 /* harmony default export */ const list_section = (list_section_exports_);
 ;// CONCATENATED MODULE: ./components/list_section/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=template&id=7876bc36
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=template&id=237d2c10
 
-function list_itemvue_type_template_id_7876bc36_render(_ctx, _cache, $props, $setup, $data, $options) {
+function list_itemvue_type_template_id_237d2c10_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
     class: ['dt-list-item d-ls-none focus-visible', {
@@ -11858,7 +11992,7 @@ function list_itemvue_type_template_id_7876bc36_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=7876bc36
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=237d2c10
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/default_list_item.vue?vue&type=template&id=4c89d4ed
 
@@ -11986,7 +12120,7 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
       validator: t => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t)
     }
   },
-  emits: ['click', 'keydown', 'mousemove', 'mouseleave'],
+  emits: ['keydown', 'mousemove', 'mouseleave', 'mousedown'],
 
   data() {
     return {
@@ -12015,6 +12149,13 @@ 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);
@@ -12053,6 +12194,8 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
   },
   methods: {
     onClick(e) {
+      // disabled as we do not want to override native click
+      // eslint-disable-next-line vue/require-explicit-emits
       this.$emit('click', e);
     },
 
@@ -12068,9 +12211,9 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 });
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=style&index=0&id=7876bc36&lang=less
-var list_itemvue_type_style_index_0_id_7876bc36_lang_less = __webpack_require__(366);
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=7876bc36&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=style&index=0&id=237d2c10&lang=less
+var list_itemvue_type_style_index_0_id_237d2c10_lang_less = __webpack_require__(213);
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=237d2c10&lang=less
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue
 
@@ -12080,7 +12223,7 @@ var list_itemvue_type_style_index_0_id_7876bc36_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_7876bc36_render]])
+const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_237d2c10_render]])
 
 /* harmony default export */ const list_item = (list_item_exports_);
 ;// CONCATENATED MODULE: ./components/list_item/index.js
@@ -12420,16 +12563,31 @@ const radio_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(radiovue_typ
     }
   },
   emits: ['input'],
+
+  data() {
+    return {
+      internalValue: this.value
+    };
+  },
+
   watch: {
-    /*
-     * watching value to support 2 way binding for slotted radios.
-     * need this to pass value to slotted radios if modified outside
-     * radio group.
-     */
     value(newValue) {
-      this.provideObj.selectedValue = newValue;
-    }
+      this.internalValue = newValue;
+    },
+
+    /*
+    * watching value to support 2 way binding for slotted radios.
+    * need this to pass value to slotted checkboxes if modified outside
+    * radio group.
+    */
+    internalValue: {
+      immediate: true,
 
+      handler(newInternalValue) {
+        this.provideObj.selectedValue = newInternalValue;
+      }
+
+    }
   },
   methods: {
     /*
@@ -13259,79 +13417,64 @@ const checkbox_group_exports_ = checkbox_groupvue_type_script_lang_js;
 /* harmony default export */ const checkbox_group = (checkbox_group_exports_);
 ;// CONCATENATED MODULE: ./components/checkbox_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/chip/chip.vue?vue&type=template&id=4d7bb584
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/chip/chip.vue?vue&type=template&id=1805ca4d
 
-const chipvue_type_template_id_4d7bb584_hoisted_1 = ["id", "tabindex", "aria-labelledby", "aria-label"];
-const chipvue_type_template_id_4d7bb584_hoisted_2 = {
+const chipvue_type_template_id_1805ca4d_hoisted_1 = {
+  class: "d-chip"
+};
+const chipvue_type_template_id_1805ca4d_hoisted_2 = {
   key: 0,
   "data-qa": "dt-chip-icon",
   class: "d-chip__icon"
 };
-const chipvue_type_template_id_4d7bb584_hoisted_3 = {
+const chipvue_type_template_id_1805ca4d_hoisted_3 = {
   key: 1,
   "data-qa": "dt-chip-avatar"
 };
-const chipvue_type_template_id_4d7bb584_hoisted_4 = ["id"];
-const chipvue_type_template_id_4d7bb584_hoisted_5 = {
-  key: 3,
-  class: "d-chip-btn-holder"
-};
-const chipvue_type_template_id_4d7bb584_hoisted_6 = {
-  ref: "closeBtnContainer",
-  class: "d-chip-btn-container"
-};
-function chipvue_type_template_id_4d7bb584_render(_ctx, _cache, $props, $setup, $data, $options) {
+const chipvue_type_template_id_1805ca4d_hoisted_4 = ["id"];
+function chipvue_type_template_id_1805ca4d_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-close");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_1805ca4d_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.chipClasses()),
+    type: $props.interactive && 'button',
+    class: $options.chipClasses(),
     "data-qa": "dt-chip",
-    tabindex: $options.tabIndex,
     "aria-labelledby": $props.ariaLabel ? undefined : "".concat($props.id, "-content"),
-    "aria-label": $props.ariaLabel,
-    onMousedown: _cache[1] || (_cache[1] = function () {
-      return $options.onClick && $options.onClick(...arguments);
-    }),
-    onMouseup: _cache[2] || (_cache[2] = function () {
-      return $options.onClick && $options.onClick(...arguments);
-    }),
-    onMouseleave: _cache[3] || (_cache[3] = $event => $data.isActive = false),
-    onFocusout: _cache[4] || (_cache[4] = $event => $data.isActive = false),
-    onKeydown: _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)(function () {
-      return $options.onClick && $options.onClick(...arguments);
-    }, ["enter"])),
-    onKeyup: [_cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)(function () {
-      return $options.onClick && $options.onClick(...arguments);
-    }, ["enter"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)(function () {
-      return $options.onClose && $options.onClose(...arguments);
-    }, ["delete"]))]
-  }, [_ctx.$slots.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_4d7bb584_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : _ctx.$slots.avatar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_4d7bb584_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
-    key: 2,
-    id: "".concat($props.id, "-content"),
-    "data-qa": "dt-chip-label",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-truncate', $props.contentClass])
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_4d7bb584_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_4d7bb584_hoisted_5)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", chipvue_type_template_id_4d7bb584_hoisted_6, [!$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    "aria-label": $props.ariaLabel
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.chipListeners)), {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [_ctx.$slots.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_1805ca4d_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : _ctx.$slots.avatar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_1805ca4d_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+      key: 2,
+      id: "".concat($props.id, "-content"),
+      "data-qa": "dt-chip-label",
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-truncate', 'd-chip__text', $props.contentClass])
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_1805ca4d_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
+    _: 3
+  }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0
   }, $props.closeButtonProps, {
+    class: $options.chipCloseButtonClasses(),
     "data-qa": "dt-chip-close",
-    circle: "",
-    importance: "clear",
     "aria-label": $props.closeButtonProps.ariaLabel,
     onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('close'))
   }), {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_close)]),
+    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_close)]),
     _: 1
-  }, 16, ["aria-label"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 512)], 42, chipvue_type_template_id_4d7bb584_hoisted_1);
+  }, 16, ["class", "aria-label"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=4d7bb584
+;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=1805ca4d
 
 ;// CONCATENATED MODULE: ./components/chip/chip_constants.js
 const CHIP_SIZE_MODIFIERS = {
-  xs: 'd-chip--xs',
-  sm: 'd-chip--sm',
+  xs: 'd-chip__label--xs',
+  sm: 'd-chip__label--sm',
+  md: ''
+};
+const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
+  xs: 'd-chip__close--xs',
+  sm: 'd-chip__close--sm',
   md: ''
 };
 /* harmony default export */ const chip_constants = ({
@@ -13354,6 +13497,11 @@ const CHIP_SIZE_MODIFIERS = {
      */
     closeButtonProps: {
       type: Object,
+      default: function () {
+        return {
+          ariaLabel: 'close'
+        };
+      },
       validator: props => {
         return !!props.ariaLabel;
       }
@@ -13415,7 +13563,7 @@ const CHIP_SIZE_MODIFIERS = {
       default: ''
     }
   },
-  emits: ['click', 'close'],
+  emits: ['click', 'close', 'keyup'],
 
   data() {
     return {
@@ -13424,37 +13572,37 @@ const CHIP_SIZE_MODIFIERS = {
   },
 
   computed: {
-    tabIndex() {
-      return this.interactive ? 0 : -1;
+    chipListeners() {
+      return {
+        click: event => {
+          if (this.interactive) this.$emit('click', event);
+        },
+        keyup: event => {
+          var _event$code;
+
+          if (((_event$code = event.code) === null || _event$code === void 0 ? void 0 : _event$code.toLowerCase()) === 'delete') {
+            this.onClose();
+          } else {
+            this.$emit('keyup', event);
+          }
+        }
+      };
     }
 
   },
   methods: {
     chipClasses() {
-      return ['d-chip', CHIP_SIZE_MODIFIERS[this.size], {
-        'd-chip--interactive': this.interactive,
-        'd-chip--active': this.isActive
-      }];
+      return ['d-chip__label', CHIP_SIZE_MODIFIERS[this.size]];
+    },
+
+    chipCloseButtonClasses() {
+      return ['d-chip__close', CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]];
     },
 
     onClose() {
       if (!this.hideClose) {
         this.$emit('close');
       }
-    },
-
-    onClick(event) {
-      // Clicking on the button should not update value of isActive.
-      if (!this.interactive || this.$refs.closeBtnContainer.contains(event.target)) {
-        return;
-      }
-
-      if (event.type === 'mousedown' || event.type === 'keydown') {
-        this.isActive = true;
-      } else {
-        this.isActive = false;
-        this.$emit('click');
-      }
     }
 
   }
@@ -13467,7 +13615,7 @@ const CHIP_SIZE_MODIFIERS = {
 
 
 ;
-const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_4d7bb584_render]])
+const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_1805ca4d_render]])
 
 /* harmony default export */ const chip = (chip_exports_);
 ;// CONCATENATED MODULE: ./components/chip/index.js
@@ -14175,15 +14323,15 @@ const toggle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(togglevue_t
 /* harmony default export */ const toggle = (toggle_exports_);
 ;// CONCATENATED MODULE: ./components/toggle/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=template&id=600c8e6a
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=template&id=044c8b20
 
-const tooltipvue_type_template_id_600c8e6a_hoisted_1 = {
+const tooltipvue_type_template_id_044c8b20_hoisted_1 = {
   "data-qa": "dt-tooltip-container"
 };
-function tooltipvue_type_template_id_600c8e6a_render(_ctx, _cache, $props, $setup, $data, $options) {
+function tooltipvue_type_template_id_044c8b20_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_600c8e6a_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_044c8b20_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     ref: "anchor",
     "data-qa": "dt-tooltip-anchor",
     onFocusin: _cache[0] || (_cache[0] = function () {
@@ -14220,7 +14368,7 @@ function tooltipvue_type_template_id_600c8e6a_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["id", "show", "transition", "class", "onAfterLeave", "onAfterEnter"])]);
 }
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=600c8e6a
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=044c8b20
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
 /*
@@ -14284,7 +14432,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
      */
     offset: {
       type: Array,
-      default: () => [0, 0]
+      default: () => [0, -4]
     },
 
     /**
@@ -14496,9 +14644,9 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 });
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=600c8e6a&lang=less
-var tooltipvue_type_style_index_0_id_600c8e6a_lang_less = __webpack_require__(96);
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=600c8e6a&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=044c8b20&lang=less
+var tooltipvue_type_style_index_0_id_044c8b20_lang_less = __webpack_require__(126);
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=044c8b20&lang=less
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue
 
@@ -14508,7 +14656,7 @@ var tooltipvue_type_style_index_0_id_600c8e6a_lang_less = __webpack_require__(96
 ;
 
 
-const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_600c8e6a_render]])
+const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_044c8b20_render]])
 
 /* harmony default export */ const tooltip = (tooltip_exports_);
 ;// CONCATENATED MODULE: ./components/tooltip/index.js
@@ -14809,85 +14957,1211 @@ const keyboard_shortcut_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=7091b031
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout.vue?vue&type=template&id=2e5fe0a4
 
-const contact_infovue_type_template_id_7091b031_hoisted_1 = {
-  class: "d-ps-relative",
-  "data-qa": "contact-info-left"
-};
-const contact_infovue_type_template_id_7091b031_hoisted_2 = ["src", "alt"];
-const contact_infovue_type_template_id_7091b031_hoisted_3 = {
-  "data-qa": "contact-info-header"
-};
-const contact_infovue_type_template_id_7091b031_hoisted_4 = {
-  "data-qa": "contact-info-subtitle"
-};
-const contact_infovue_type_template_id_7091b031_hoisted_5 = {
-  "data-qa": "contact-info-bottom"
+const root_layoutvue_type_template_id_2e5fe0a4_hoisted_1 = {
+  class: "root-layout"
 };
-const contact_infovue_type_template_id_7091b031_hoisted_6 = {
-  "data-qa": "contact-info-right"
-};
-function contact_infovue_type_template_id_7091b031_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
-
-  const _component_dt_list_item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-list-item");
+function root_layoutvue_type_template_id_2e5fe0a4_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_root_layout_body = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-root-layout-body");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_list_item, {
-    id: $props.id,
-    role: $props.role,
-    "element-type": "div",
-    "data-qa": "contact-info"
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", root_layoutvue_type_template_id_2e5fe0a4_hoisted_1, [_ctx.$slots.header ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("header", {
+    key: 0,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__header', $props.headerClass, {
+      'root-layout__header--sticky': $props.headerSticky
+    }]),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
+      'height': $props.headerHeight
+    }),
+    "data-qa": "root-layout-header"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_root_layout_body, {
+    "content-class": $props.contentClass,
+    "content-wrap-width-percent": $props.contentWrapWidthPercent,
+    "sidebar-class": $props.sidebarClass,
+    "sidebar-width": $props.sidebarWidth,
+    "sidebar-position": $props.sidebarPosition
   }, {
-    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_7091b031_hoisted_1, [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
-      key: 0,
-      kind: "default",
-      size: "lg",
-      "avatar-class": "d-bar2"
-    }, {
-      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
-        "data-qa": "dt-contact-avatar",
-        src: $props.avatarSrc,
-        alt: $props.avatarInitials
-      }, null, 8, contact_infovue_type_template_id_7091b031_hoisted_2)]),
-      _: 1
-    })) : $props.avatarInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
-      key: 1,
-      kind: "initials",
-      size: "lg",
-      color: $props.avatarColor
-    }, {
-      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.avatarInitials), 1)]),
-      _: 1
-    }, 8, ["color"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.showUserStatus ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
-      key: 2,
-      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-ba', 'd-bc-white', 'd-baw2', 'd-bar2', 'd-ps-absolute', 'd-bn1', 'd-rn1', 'd-w20p', 'd-h20p', $data.USER_STATUS_COLOR_MODIFIERS[$props.userStatusColor]]),
-      "data-qa": "contact-info-user-status"
-    }, "   ", 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]),
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_7091b031_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")])]),
-    subtitle: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_7091b031_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")])]),
-    bottom: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_7091b031_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])]),
-    right: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_7091b031_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])]),
+    sidebar: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "sidebar")]),
+    content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]),
     _: 3
-  }, 8, ["id", "role"]);
+  }, 8, ["content-class", "content-wrap-width-percent", "sidebar-class", "sidebar-width", "sidebar-position"]), _ctx.$slots.footer ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", {
+    key: 1,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__footer', $props.footerClass]),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
+      'height': $props.footerHeight
+    }),
+    "data-qa": "root-layout-footer"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=7091b031
-
-;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
-const USER_STATUS_COLOR_MODIFIERS = {
-  none: '',
-  green: 'd-bgc-green-400',
-  yellow: 'd-bgc-yellow-400',
-  red: 'd-bgc-red-400'
-};
-/* harmony default export */ const contact_info_constants = ({
-  USER_STATUS_COLOR_MODIFIERS
-});
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=script&lang=js
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=template&id=2e5fe0a4
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout_body.vue?vue&type=template&id=dfb53770
 
-
-/* harmony default export */ const contact_infovue_type_script_lang_js = ({
+function root_layout_bodyvue_type_template_id_dfb53770_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__body', $options.bodyClass]),
+    "data-qa": "root-layout-body"
+  }, [_ctx.$slots.sidebar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("aside", {
+    key: 0,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__sidebar', $props.sidebarClass]),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
+      'flex-basis': $props.sidebarWidth
+    }),
+    "data-qa": "root-layout-sidebar"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "sidebar")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.$slots.content ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("main", {
+    key: 1,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__content', $props.contentClass]),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
+      'min-inline-size': $props.contentWrapWidthPercent
+    }),
+    "data-qa": "root-layout-content"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "content")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
+}
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=template&id=dfb53770
+
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_constants.js
+const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
+  LEFT: 'left',
+  RIGHT: 'right'
+};
+/* harmony default export */ const root_layout_constants = ({
+  ROOT_LAYOUT_SIDEBAR_POSITIONS
+});
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout_body.vue?vue&type=script&lang=js
+
+/* harmony default export */ const root_layout_bodyvue_type_script_lang_js = ({
+  name: 'DtRootLayoutBody',
+  props: {
+    /**
+     * Additional class name for the content element
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: undefined
+    },
+
+    /**
+     * Additional class name for the sidebar element
+     */
+    sidebarClass: {
+      type: [String, Array, Object],
+      default: undefined
+    },
+
+    /**
+     * The width of the sidebar
+     * Possible units rem|px|%|em
+     */
+    sidebarWidth: {
+      type: String,
+      default: undefined
+    },
+
+    /**
+     * Whether the sidebar is on the left or right side
+     * Possible options: 'left', 'right'
+     */
+    sidebarPosition: {
+      type: String,
+      default: undefined
+    },
+
+    /**
+     * For responsive layouts. When the main content is at the specified width percentage,
+     * the sidebar will display above the content rather than beside it. Please enter a percentage string value
+     *
+     * ex: '50%', '30%'
+     */
+    contentWrapWidthPercent: {
+      type: String,
+      default: undefined
+    }
+  },
+  computed: {
+    bodyClass() {
+      return {
+        'root-layout__body--invert': this.sidebarPosition === ROOT_LAYOUT_SIDEBAR_POSITIONS.RIGHT
+      };
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=script&lang=js
+ 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=dfb53770&lang=less
+var root_layout_bodyvue_type_style_index_0_id_dfb53770_lang_less = __webpack_require__(516);
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=dfb53770&lang=less
+
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue
+
+
+
+
+;
+
+
+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]])
+
+/* harmony default export */ const root_layout_body = (root_layout_body_exports_);
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout.vue?vue&type=script&lang=js
+
+
+/* harmony default export */ const root_layoutvue_type_script_lang_js = ({
+  name: 'DtRootLayout',
+  components: {
+    DtRootLayoutBody: root_layout_body
+  },
+  props: {
+    /**
+     * Additional class name for the header element
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * The height of the header
+     * Possible units rem|px|%|em
+     */
+    headerHeight: {
+      type: String,
+      default: '64px'
+    },
+
+    /**
+     * Scroll the header with the page
+     */
+    headerSticky: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Additional class name for the content element
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * For responsive layouts. When the main content is at the specified width percentage,
+     * the sidebar will display above the content rather than beside it. Please enter a percentage string value
+     *
+     * ex: '50%', '30%'
+     */
+    contentWrapWidthPercent: {
+      type: String,
+      default: '50%'
+    },
+
+    /**
+     * Additional class name for the sidebar element
+     */
+    sidebarClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * The width of the sidebar
+     * Possible units rem|px|%|em
+     */
+    sidebarWidth: {
+      type: String,
+      default: '256px'
+    },
+
+    /**
+     * Whether the sidebar is on the left or right side
+     * Possible options: 'left', 'right'
+     */
+    sidebarPosition: {
+      type: String,
+      default: 'left',
+      validator: s => Object.values(ROOT_LAYOUT_SIDEBAR_POSITIONS).includes(s)
+    },
+
+    /**
+     * Additional class name for the footer element
+     */
+    footerClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * The height of the footer
+     * Possible units rem|px|%|em
+     */
+    footerHeight: {
+      type: String,
+      default: '64px'
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=script&lang=js
+ 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout.vue?vue&type=style&index=0&id=2e5fe0a4&lang=less
+var root_layoutvue_type_style_index_0_id_2e5fe0a4_lang_less = __webpack_require__(35);
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=style&index=0&id=2e5fe0a4&lang=less
+
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue
+
+
+
+
+;
+
+
+const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layoutvue_type_script_lang_js, [['render',root_layoutvue_type_template_id_2e5fe0a4_render]])
+
+/* harmony default export */ const root_layout = (root_layout_exports_);
+;// CONCATENATED MODULE: ./components/root_layout/index.js
+
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=6e4f62a5
+
+const combobox_with_popovervue_type_template_id_6e4f62a5_hoisted_1 = ["id"];
+const combobox_with_popovervue_type_template_id_6e4f62a5_hoisted_2 = ["onMouseleave", "onFocusout"];
+function combobox_with_popovervue_type_template_id_6e4f62a5_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
+
+  const _component_dt_combobox = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-combobox");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_combobox, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    ref: "combobox",
+    "show-list": $data.isListShown,
+    "on-beginning-of-list": $props.onBeginningOfList,
+    "on-end-of-list": $props.onEndOfList,
+    "list-aria-label": $props.listAriaLabel,
+    "list-rendered-outside": true,
+    "list-id": $props.listId,
+    "data-qa": "dt-combobox"
+  }, $options.comboboxListeners), {
+    input: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref => {
+      let {
+        inputProps
+      } = _ref;
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+        id: $data.externalAnchor,
+        ref: "input",
+        onFocusin: _cache[0] || (_cache[0] = function () {
+          return $options.onFocusIn && $options.onFocusIn(...arguments);
+        }),
+        onFocusout: _cache[1] || (_cache[1] = function () {
+          return $options.onFocusOut && $options.onFocusOut(...arguments);
+        }),
+        onKeydown: [_cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => $options.openOnArrowKeyPress($event), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => $options.openOnArrowKeyPress($event), ["down"]))]
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
+        inputProps: inputProps,
+        onInput: $options.handleDisplayList
+      })], 40, combobox_with_popovervue_type_template_id_6e4f62a5_hoisted_1)];
+    }),
+    list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref2 => {
+      let {
+        opened,
+        listProps,
+        clearHighlightIndex
+      } = _ref2;
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_popover, {
+        ref: "popover",
+        open: $data.isListShown,
+        "onUpdate:open": _cache[6] || (_cache[6] = $event => $data.isListShown = $event),
+        "hide-on-click": true,
+        "max-height": $props.maxHeight,
+        "max-width": $props.maxWidth,
+        offset: $props.popoverOffset,
+        placement: "bottom-start",
+        padding: "none",
+        role: "listbox",
+        "external-anchor": $data.externalAnchor,
+        "content-width": $props.contentWidth,
+        "content-tabindex": null,
+        modal: false,
+        "auto-focus": false,
+        onOpened: opened
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
+        content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+          ref: "listWrapper",
+          class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]),
+          onMouseleave: clearHighlightIndex,
+          onFocusout: $event => {
+            clearHighlightIndex;
+            $options.onFocusOut;
+          }
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
+          listProps: listProps
+        })], 42, combobox_with_popovervue_type_template_id_6e4f62a5_hoisted_2)]),
+        _: 2
+      }, [_ctx.$slots.header ? {
+        name: "headerContent",
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+          ref: "header",
+          onFocusout: _cache[4] || (_cache[4] = function () {
+            return $options.onFocusOut && $options.onFocusOut(...arguments);
+          })
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 544)])
+      } : undefined, _ctx.$slots.footer ? {
+        name: "footerContent",
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+          ref: "footer",
+          onFocusout: _cache[5] || (_cache[5] = function () {
+            return $options.onFocusOut && $options.onFocusOut(...arguments);
+          })
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 544)])
+      } : undefined]), 1032, ["open", "max-height", "max-width", "offset", "external-anchor", "content-width", "onOpened"])];
+    }),
+    _: 3
+  }, 16, ["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=6e4f62a5
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
+
+
+
+/* harmony default export */ const combobox_with_popovervue_type_script_lang_js = ({
+  name: 'DtRecipeComboboxWithPopover',
+  components: {
+    DtCombobox: combobox,
+    DtPopover: popover
+  },
+  props: {
+    /**
+     * String to use for the list's aria-label.
+     */
+    listAriaLabel: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Determines when to show the list element and also controls the aria-expanded attribute.
+     * Leaving this null will have the combobox trigger on input focus by default.
+     * If you set this value, the default trigger behavior will be disabled and you can
+     * control it as you need.
+     */
+    showList: {
+      type: Boolean,
+      default: null
+    },
+
+    /**
+     * Sets an ID on the list element of the component. Used by several aria attributes
+     * as well as when deriving the IDs for each item.
+     */
+    listId: {
+      type: String,
+
+      default() {
+        return getUniqueString();
+      }
+
+    },
+
+    /**
+     * Additional class for the wrapper list element.
+     */
+    listClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * A method that will be called when the selection goes past the beginning of the list.
+     */
+    onBeginningOfList: {
+      type: Function,
+      default: null
+    },
+
+    /**
+     * A method that will be called when the selection goes past the end of the list.
+     */
+    onEndOfList: {
+      type: Function,
+      default: null
+    },
+
+    /**
+     * Determines maximum height for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    maxHeight: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Determines maximum width for the popover before overflow.
+     * Possible units rem|px|%|em
+     */
+    maxWidth: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Vertical padding size around the list element.
+     */
+    padding: {
+      type: String,
+      default: 'small',
+      validator: padding => {
+        return Object.keys(DROPDOWN_PADDING_CLASSES).some(item => item === padding);
+      }
+    },
+
+    /**
+     * Width configuration for the popover content. When its value is 'anchor',
+     * the popover content will have the same width as the anchor.
+     */
+    contentWidth: {
+      type: String,
+      default: null,
+      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth)
+    },
+
+    /**
+     * If the list should be shown by pressing up or down arrow key on the input element.
+     * This can be set when not passing showList prop.
+     */
+    openWithArrowKeys: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     *  Displaces the popover content box from its anchor element
+     *  by the specified number of pixels.
+     */
+    popoverOffset: {
+      type: Array,
+      default: () => [0, 4]
+    },
+
+    /**
+     * 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.
+     */
+    hasSuggestionList: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['select', 'escape', 'highlight', 'opened'],
+
+  data() {
+    return {
+      DROPDOWN_PADDING_CLASSES: DROPDOWN_PADDING_CLASSES,
+      isListShown: false,
+      isInputFocused: false,
+      isListFocused: false,
+      externalAnchor: getUniqueString()
+    };
+  },
+
+  computed: {
+    comboboxListeners() {
+      return { ...this.$attrs,
+        onSelect: this.onSelect,
+        onEscape: this.onEscape,
+        onHighlight: this.onHighlight
+      };
+    }
+
+  },
+  watch: {
+    showList: {
+      handler: function (show) {
+        if (show !== null) {
+          this.isListShown = show;
+        }
+      },
+      immediate: true
+    },
+
+    isListShown(val) {
+      this.onOpened(val);
+    }
+
+  },
+  methods: {
+    async handleDisplayList(value) {
+      if (this.isListShown) {
+        // After the list is updated, hightlight the first item
+        await this.$nextTick();
+        this.$refs.combobox.setInitialHighlightIndex();
+      }
+
+      if (!this.hasSuggestionList) {
+        if (value) {
+          // Displays the list after the user has typed anything
+          this.showComboboxList();
+        } else {
+          this.closeComboboxList();
+        }
+      }
+    },
+
+    showComboboxList() {
+      if (this.showList != null) {
+        return;
+      }
+
+      this.isListShown = true;
+    },
+
+    closeComboboxList() {
+      if (this.showList != null) {
+        return;
+      }
+
+      this.isListShown = false;
+    },
+
+    onSelect(highlightIndex) {
+      this.$emit('select', highlightIndex);
+
+      if (!this.hasSuggestionList) {
+        // we don't display the list before the user has typed anything
+        this.closeComboboxList();
+      }
+    },
+
+    onEscape() {
+      this.$emit('escape');
+      this.closeComboboxList();
+    },
+
+    onHighlight(highlightIndex) {
+      this.$emit('highlight', highlightIndex);
+    },
+
+    onOpened(opened) {
+      this.$emit('opened', opened);
+    },
+
+    onFocusIn(e) {
+      if (this.hasSuggestionList && e && this.$refs.input.querySelector('input') === e.target) {
+        // only trigger if we show suggestion list when focus and
+        // it's the input specifically that was focused
+        this.showComboboxList();
+      }
+    },
+
+    onFocusOut(e) {
+      const comboboxRefs = ['input', 'header', 'footer', 'listWrapper'];
+      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 (!isComboboxStillFocused) {
+        this.closeComboboxList();
+      }
+    },
+
+    openOnArrowKeyPress(e) {
+      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) {
+        return;
+      }
+
+      this.showComboboxList();
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue
+
+
+
+
+;
+const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_6e4f62a5_render]])
+
+/* harmony default export */ const combobox_with_popover = (combobox_with_popover_exports_);
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=74f7079d
+
+const combobox_multi_selectvue_type_template_id_74f7079d_hoisted_1 = {
+  ref: "inputSlotWrapper",
+  class: "d-ps-relative"
+};
+const combobox_multi_selectvue_type_template_id_74f7079d_hoisted_2 = {
+  ref: "chipsWrapper",
+  class: "d-ps-absolute d-mx2"
+};
+const combobox_multi_selectvue_type_template_id_74f7079d_hoisted_3 = {
+  ref: "header"
+};
+const combobox_multi_selectvue_type_template_id_74f7079d_hoisted_4 = {
+  ref: "list"
+};
+const combobox_multi_selectvue_type_template_id_74f7079d_hoisted_5 = {
+  key: 1,
+  class: "d-ta-center d-py16"
+};
+const combobox_multi_selectvue_type_template_id_74f7079d_hoisted_6 = {
+  ref: "footer"
+};
+function combobox_multi_selectvue_type_template_id_74f7079d_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_chip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-chip");
+
+  const _component_dt_input = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-input");
+
+  const _component_dt_validation_messages = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-validation-messages");
+
+  const _component_dt_recipe_combobox_with_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-recipe-combobox-with-popover");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_recipe_combobox_with_popover, {
+    ref: "comboboxWithPopover",
+    "list-aria-label": "listAriaLabel",
+    "show-list": $props.showList,
+    "max-height": $props.listMaxHeight,
+    "popover-offset": $data.popoverOffset,
+    "has-suggestion-list": $props.hasSuggestionList,
+    "content-width": "anchor",
+    onSelect: $options.onComboboxSelect
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
+    input: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref => {
+      let {
+        onInput
+      } = _ref;
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_74f7079d_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_74f7079d_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_chip, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+          ref_for: true,
+          ref: "chips",
+          key: item,
+          class: "d-mt4 d-mx2 d-zi-base1",
+          "close-button-props": {
+            ariaLabel: 'close'
+          }
+        }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.chipListeners), {
+          onKeyup: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => $options.onChipRemove(item), ["backspace"]),
+          onClose: $event => $options.onChipRemove(item)
+        }), {
+          default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(item), 1)]),
+          _: 2
+        }, 1040, ["onKeyup", "onClose"]);
+      }), 128))], 512), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_input, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+        ref: "input",
+        modelValue: $data.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => $data.value = $event),
+        class: "d-fl-grow1 d-mb4",
+        label: $props.label,
+        description: $props.description,
+        placeholder: $options.inputPlaceHolder,
+        "show-messages": $props.showInputMessages,
+        messages: $props.inputMessages
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.inputListeners), {
+        onInput: onInput
+      }), null, 16, ["modelValue", "label", "description", "placeholder", "show-messages", "messages", "onInput"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_validation_messages, {
+        "validation-messages": $props.maxSelectedMessage,
+        "show-messages": $data.showValidationMessages
+      }, null, 8, ["validation-messages", "show-messages"])], 512)];
+    }),
+    list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_74f7079d_hoisted_4, [!$props.loading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
+      key: 0
+    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_74f7079d_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 512)]),
+    _: 2
+  }, [_ctx.$slots.header ? {
+    name: "header",
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_74f7079d_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)])
+  } : undefined, _ctx.$slots.footer ? {
+    name: "footer",
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_74f7079d_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)])
+  } : 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=74f7079d
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=script&lang=js
+/* eslint-disable max-lines */
+
+
+/* harmony default export */ const combobox_multi_selectvue_type_script_lang_js = ({
+  name: 'DtRecipeComboboxMultiSelect',
+  components: {
+    DtRecipeComboboxWithPopover: combobox_with_popover,
+    DtInput: input_input,
+    DtChip: chip,
+    DtValidationMessages: validation_messages
+  },
+  props: {
+    /**
+     * Label for the combobox
+     */
+    label: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * Description for the combobox
+     */
+    description: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * Input placeholder
+     */
+    placeholder: {
+      type: String,
+      default: 'Select one or start typing'
+    },
+
+    /**
+     * Input validation messages
+     */
+    inputMessages: {
+      type: Array,
+      default: () => [],
+      validator: inputMessages => {
+        return validationMessageValidator(inputMessages);
+      }
+    },
+
+    /**
+     * Show input validation message
+     */
+    showInputMessages: {
+      type: Boolean,
+      default: true
+    },
+    // @TODO: https://dialpad.atlassian.net/browse/DP-52324
+    // type: {
+    //   type: String,
+    //   values: ['input', 'select'],
+    //   default: 'select',
+    // },
+
+    /**
+     * Determines if the list is loading
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * The message when the list is loading
+     */
+    loadingMessage: {
+      type: String,
+      default: 'loading...'
+    },
+
+    /**
+     * Determines when to show the list element and also controls the aria-expanded attribute.
+     * Leaving this null will have the combobox trigger on input focus by default.
+     * If you set this value, the default trigger behavior will be disabled and you can
+     * control it as you need.
+     */
+    showList: {
+      type: Boolean,
+      default: null
+    },
+
+    /**
+     * Determines maximum height for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    listMaxHeight: {
+      type: String,
+      default: '300px'
+    },
+
+    /**
+     * The selected items
+     */
+    selectedItems: {
+      type: Array,
+      default: function () {
+        return [];
+      }
+    },
+
+    /**
+     * Would be the maximum number of selections you can make. 0 is unlimited
+     */
+    maxSelected: {
+      type: Number,
+      default: 0
+    },
+
+    /**
+     * Max select message when the max selections has been reached with the structure:
+     * `[{"message": string, "type": VALIDATION_MESSAGE_TYPES }]`
+     */
+    maxSelectedMessage: {
+      type: Array,
+      default: function () {
+        return [];
+      }
+    },
+
+    /**
+     * 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.
+     */
+    hasSuggestionList: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['input', 'select', 'remove', 'max-selected', 'keyup'],
+
+  data() {
+    return {
+      value: '',
+      popoverOffset: [0, 0],
+      showValidationMessages: false,
+      initialInputPadding: {},
+      resizeWindowObserver: null
+    };
+  },
+
+  computed: {
+    inputPlaceHolder() {
+      var _this$selectedItems;
+
+      return ((_this$selectedItems = this.selectedItems) === null || _this$selectedItems === void 0 ? void 0 : _this$selectedItems.length) > 0 ? '' : this.placeholder;
+    },
+
+    chipListeners() {
+      return {
+        keyup: event => {
+          this.onChipKeyup(event);
+          this.$emit('keyup', event);
+        }
+      };
+    },
+
+    inputListeners() {
+      return {
+        input: event => {
+          this.$emit('input', event);
+        },
+        keyup: event => {
+          this.onInputKeyup(event);
+          this.$emit('keyup', event);
+        }
+      };
+    }
+
+  },
+  watch: {
+    selectedItems: {
+      deep: true,
+      immediate: true,
+      handler: async function () {
+        await this.$nextTick();
+        this.setInputPadding();
+        this.setInputMinWidth();
+        this.checkMaxSelected();
+      }
+    },
+
+    async label() {
+      await this.$nextTick(); // Adjust the chips position if label changed
+
+      this.setChipsTopPosition();
+    },
+
+    async description() {
+      await this.$nextTick(); // Adjust the chips position if description changed
+
+      this.setChipsTopPosition();
+    }
+
+  },
+
+  mounted() {
+    this.setChipsTopPosition(); // Recalculate chip position and input padding when resizing window
+
+    this.resizeWindowObserver = new ResizeObserver(() => {
+      this.setChipsTopPosition();
+      this.setInputPadding();
+    }).observe(document.body);
+  },
+
+  beforeUnmount() {
+    var _this$resizeWindowObs;
+
+    (_this$resizeWindowObs = this.resizeWindowObserver) === null || _this$resizeWindowObs === void 0 ? void 0 : _this$resizeWindowObs.unobserve(document.body);
+  },
+
+  methods: {
+    onChipRemove(item) {
+      this.$emit('remove', item);
+      this.$refs.input.focus();
+    },
+
+    onComboboxSelect(i) {
+      this.value = '';
+      this.$emit('select', i);
+    },
+
+    getChipButtons() {
+      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));
+    },
+
+    getChips() {
+      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);
+    },
+
+    getLastChipButton() {
+      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];
+    },
+
+    getLastChip() {
+      return this.$refs.chips && this.getChips()[this.getChips().length - 1];
+    },
+
+    getFirstChip() {
+      return this.$refs.chips && this.getChips()[0];
+    },
+
+    getInput() {
+      var _this$$refs$input;
+
+      return (_this$$refs$input = this.$refs.input) === null || _this$$refs$input === void 0 ? void 0 : _this$$refs$input.$refs.input;
+    },
+
+    onChipKeyup(event) {
+      var _event$code;
+
+      const key = (_event$code = event.code) === null || _event$code === void 0 ? void 0 : _event$code.toLowerCase();
+
+      if (key === 'arrowleft') {
+        // Move to the previous chip
+        this.navigateBetweenChips(event.target, true);
+      } else if (key === 'arrowright') {
+        if (event.target.id === this.getLastChipButton().id) {
+          // Move to the input if it's the last chip
+          this.moveFromChipToInput();
+        } else {
+          // Move to the next chip
+          this.navigateBetweenChips(event.target, false);
+        }
+      }
+    },
+
+    onInputKeyup(event) {
+      var _event$code2;
+
+      const key = (_event$code2 = event.code) === null || _event$code2 === void 0 ? void 0 : _event$code2.toLowerCase(); // If the cursor is at the start of the text,
+      // press 'backspace' or 'left' focuses the last chip
+
+      if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {
+        if (key === 'backspace' || key === 'arrowleft') {
+          this.moveFromInputToChip();
+        }
+      }
+    },
+
+    moveFromInputToChip() {
+      this.getLastChipButton().focus();
+      this.$refs.input.blur();
+      this.$refs.comboboxWithPopover.closeComboboxList();
+    },
+
+    moveFromChipToInput() {
+      this.getLastChipButton().blur();
+      this.$refs.input.focus();
+      this.$refs.comboboxWithPopover.showComboboxList();
+    },
+
+    navigateBetweenChips(target, toLeft) {
+      const from = this.getChipButtons().indexOf(target);
+      const to = toLeft ? from - 1 : from + 1;
+
+      if (to < 0 || to >= this.$refs.chips.length) {
+        return;
+      }
+
+      this.getChipButtons()[from].blur();
+      this.getChipButtons()[to].focus();
+      this.$refs.comboboxWithPopover.closeComboboxList();
+    },
+
+    setChipsTopPosition() {
+      // To place the chips in the input box
+      // The chip "top" position should be the same line as the input box
+      if (!this.$refs.input) {
+        return;
+      }
+
+      const input = this.getInput();
+      if (!input) return;
+      const inputSlotWrapper = this.$refs.inputSlotWrapper;
+      const top = input.getBoundingClientRect().top - inputSlotWrapper.getBoundingClientRect().top;
+      const chipsWrapper = this.$refs.chipsWrapper;
+      chipsWrapper.style.top = top + 'px';
+    },
+
+    setInputPadding() {
+      const lastChip = this.getLastChip();
+      const input = this.getInput();
+      if (!input) return;
+
+      if (!lastChip) {
+        // Revert padding if no chip
+        this.revertInputPadding(input);
+        return;
+      } // Get the position of the last chip
+      // The input cursor should be the same "top" as that chip and next besides it
+
+
+      const left = lastChip.offsetLeft + this.getFullWidth(lastChip);
+      input.style.paddingLeft = left + 'px'; // Chip has vertical margin. We add buffer to top center the input text
+
+      const top = lastChip.offsetTop + 3;
+      input.style.paddingTop = top + 'px'; // TODO: refresh the tippy.js instance in the popover
+      // If the new chip goes to the next line and the input box expands,
+      // move the popover down to the next line. Same when chips are removed
+
+      this.popoverOffset = [0, 0];
+    },
+
+    getFullWidth(el) {
+      const styles = window.getComputedStyle(el);
+      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);
+    },
+
+    revertInputPadding(input) {
+      input.style.paddingLeft = '';
+      input.style.paddingTop = '';
+      input.style.paddingBottom = '';
+    },
+
+    setInputMinWidth() {
+      // Ensure the width of the input is "slightly bigger" than the width of a single chip
+      const firstChip = this.getFirstChip();
+      const input = this.getInput();
+      if (!input) return;
+
+      if (firstChip) {
+        // Add 4px buffer for typing room
+        input.style.minWidth = this.getFullWidth(firstChip) + 4 + 'px';
+      } else {
+        input.style.minWidth = '';
+      }
+    },
+
+    checkMaxSelected() {
+      if (this.maxSelected === 0) return;
+
+      if (this.selectedItems.length >= this.maxSelected) {
+        this.showValidationMessages = true;
+        this.$emit('max-selected');
+      } else {
+        this.showValidationMessages = false;
+      }
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue
+
+
+
+
+;
+const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_74f7079d_render]])
+
+/* harmony default export */ const combobox_multi_select = (combobox_multi_select_exports_);
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=7091b031
+
+const contact_infovue_type_template_id_7091b031_hoisted_1 = {
+  class: "d-ps-relative",
+  "data-qa": "contact-info-left"
+};
+const contact_infovue_type_template_id_7091b031_hoisted_2 = ["src", "alt"];
+const contact_infovue_type_template_id_7091b031_hoisted_3 = {
+  "data-qa": "contact-info-header"
+};
+const contact_infovue_type_template_id_7091b031_hoisted_4 = {
+  "data-qa": "contact-info-subtitle"
+};
+const contact_infovue_type_template_id_7091b031_hoisted_5 = {
+  "data-qa": "contact-info-bottom"
+};
+const contact_infovue_type_template_id_7091b031_hoisted_6 = {
+  "data-qa": "contact-info-right"
+};
+function contact_infovue_type_template_id_7091b031_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
+
+  const _component_dt_list_item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-list-item");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_list_item, {
+    id: $props.id,
+    role: $props.role,
+    "element-type": "div",
+    "data-qa": "contact-info"
+  }, {
+    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_7091b031_hoisted_1, [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
+      key: 0,
+      kind: "default",
+      size: "lg",
+      "avatar-class": "d-bar2"
+    }, {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
+        "data-qa": "dt-contact-avatar",
+        src: $props.avatarSrc,
+        alt: $props.avatarInitials
+      }, null, 8, contact_infovue_type_template_id_7091b031_hoisted_2)]),
+      _: 1
+    })) : $props.avatarInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
+      key: 1,
+      kind: "initials",
+      size: "lg",
+      color: $props.avatarColor
+    }, {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.avatarInitials), 1)]),
+      _: 1
+    }, 8, ["color"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.showUserStatus ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+      key: 2,
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-ba', 'd-bc-white', 'd-baw2', 'd-bar2', 'd-ps-absolute', 'd-bn1', 'd-rn1', 'd-w20p', 'd-h20p', $data.USER_STATUS_COLOR_MODIFIERS[$props.userStatusColor]]),
+      "data-qa": "contact-info-user-status"
+    }, "   ", 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]),
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_7091b031_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")])]),
+    subtitle: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_7091b031_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")])]),
+    bottom: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_7091b031_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])]),
+    right: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_7091b031_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])]),
+    _: 3
+  }, 8, ["id", "role"]);
+}
+;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=7091b031
+
+;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
+const USER_STATUS_COLOR_MODIFIERS = {
+  none: '',
+  green: 'd-bgc-green-400',
+  yellow: 'd-bgc-yellow-400',
+  red: 'd-bgc-red-400'
+};
+/* harmony default export */ const contact_info_constants = ({
+  USER_STATUS_COLOR_MODIFIERS
+});
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=script&lang=js
+
+
+
+/* harmony default export */ const contact_infovue_type_script_lang_js = ({
   name: 'DtRecipeContactInfo',
   components: {
     DtAvatar: avatar,
@@ -15093,11 +16367,14 @@ const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(to
 
 
 
+
 
 
  /// Recipes
 
 
+
+
  // Mixins
 
  // Emoji