@dialpad/dialtone-vue 3.2.0 → 3.5.0

package/dist/dialtone-vue.umd.js

@@ -59,7 +59,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-default-list-item,.dt-default-list
 
 /***/ }),
 
-/***/ 254:
+/***/ 63:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -129,6 +129,54 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".tippy-box[data-popper-escaped] .d-pop
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 660:
+/***/ ((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___);
+
+
+/***/ }),
+
+/***/ 385:
+/***/ ((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___);
+
+
 /***/ }),
 
 /***/ 224:
@@ -155,7 +203,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".skeleton-placeholder{display:flex;str
 
 /***/ }),
 
-/***/ 739:
+/***/ 791:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -387,19 +435,19 @@ var update = add("463815e5", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 32:
+/***/ 621:
 /***/ ((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__(254);
+var content = __webpack_require__(63);
 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("65533ed5", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("51c1283c", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -435,6 +483,38 @@ var update = add("fc300706", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 151:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(660);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(402)/* ["default"] */ .Z)
+var update = add("10623612", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 304:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(385);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(402)/* ["default"] */ .Z)
+var update = add("78ccd05f", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 587:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -451,19 +531,19 @@ var update = add("537a95a4", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 877:
+/***/ 273:
 /***/ ((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__(739);
+var content = __webpack_require__(791);
 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("0480d588", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("72197f1c", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1075,6 +1155,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtRadioGroup": () => (/* reexport */ radio_group),
   "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),
@@ -1101,6 +1182,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),
@@ -3031,6 +3113,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
@@ -3054,7 +3137,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 {
@@ -3088,14 +3171,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() {
@@ -3140,6 +3234,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);
       },
@@ -3176,8 +3299,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) {
@@ -3440,10 +3562,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-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=template&id=071e4ebc
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=template&id=e86dedbc
 
-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_e86dedbc_hoisted_1 = ["id"];
+function dropdownvue_type_template_id_e86dedbc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-popover");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_popover, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
@@ -3461,7 +3583,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_.withKeys)($options.onEnterKey, ["enter"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($options.onSpaceKey, ["space"]), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onUpKeyPress'), ["stop", "prevent"]), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onDownKeyPress'), ["stop", "prevent"]), ["down"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKeyPress'), ["stop", "prevent"]), ["home"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onEndKeyPress'), ["stop", "prevent"]), ["end"]))]
+    onKeydown: [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($options.onEnterKey, ["enter"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($options.onSpaceKey, ["space"]), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onUpKeyPress'), ["stop", "prevent"]), ["up"])), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onDownKeyPress'), ["stop", "prevent"]), ["down"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKeyPress'), ["stop", "prevent"]), ["home"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => $options.onKeyValidation($event, 'onEndKeyPress'), ["stop", "prevent"]), ["end"])), _cache[6] || (_cache[6] = $event => $options.onKeyValidation($event, 'onKeyPress'))]
   }), {
     anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(_ref => {
       let {
@@ -3488,12 +3610,12 @@ function dropdownvue_type_template_id_071e4ebc_render(_ctx, _cache, $props, $set
         })
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "list", {
         close: close
-      })], 42, dropdownvue_type_template_id_071e4ebc_hoisted_1)];
+      })], 42, dropdownvue_type_template_id_e86dedbc_hoisted_1)];
     }),
     _: 3
   }, 16, ["content-width", "open", "placement", "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=e86dedbc
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=0656612f
 
@@ -8938,7 +9060,6 @@ const DROPDOWN_PADDING_CLASSES = {
   components: {
     DtPopover: popover
   },
-  inheritAttrs: false,
   mixins: [keyboard_list_navigation({
     indexKey: 'highlightIndex',
     idKey: 'highlightId',
@@ -8950,6 +9071,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.
@@ -9098,6 +9220,10 @@ const DROPDOWN_PADDING_CLASSES = {
 
     activeItemEl() {
       return this.getListElement().querySelector('#' + this.highlightId);
+    },
+
+    isArrowKeyNav() {
+      return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;
     }
 
   },
@@ -9157,7 +9283,7 @@ const DROPDOWN_PADDING_CLASSES = {
         return;
       }
 
-      if (this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
+      if (this.isArrowKeyNav) {
         return this.onUpKey();
       }
     },
@@ -9168,29 +9294,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) {
@@ -9211,7 +9343,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_e86dedbc_render]])
 
 /* harmony default export */ const dropdown = (dropdown_exports_);
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
@@ -9376,7 +9508,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
@@ -11848,23 +11980,19 @@ 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-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=template&id=642c4ad3
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=template&id=7876bc36
 
-function list_itemvue_type_template_id_642c4ad3_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($props.elementType), {
+function list_itemvue_type_template_id_7876bc36_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($props.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     id: $props.id,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['dt-list-item d-ls-none focus-visible', {
+    class: ['dt-list-item d-ls-none focus-visible', {
       'dt-list-item--focusable': $options.isFocusable,
       'dt-list-item--highlighted': $options.isHighlighted
-    }]),
+    }],
     tabindex: $options.isFocusable ? 0 : -1,
     role: $props.role,
-    "aria-selected": $options.isHighlighted,
-    onKeydown: [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($options.onClick, ["enter"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)($options.onClick, ["space"])],
-    onMousemove: $options.onMouseHover,
-    onMouseleave: $options.onMouseLeave,
-    onClick: $options.onClick
-  }, {
+    "aria-selected": $options.isHighlighted
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toHandlers)($options.listItemListeners)), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [$options.listItemType ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($options.listItemType), {
       key: 0
     }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createSlots)({
@@ -11878,9 +12006,9 @@ function list_itemvue_type_template_id_642c4ad3_render(_ctx, _cache, $props, $se
       key: 1
     })]),
     _: 3
-  }, 40, ["id", "class", "tabindex", "role", "aria-selected", "onKeydown", "onMousemove", "onMouseleave", "onClick"]);
+  }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=642c4ad3
+;// CONCATENATED MODULE: ./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-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/default_list_item.vue?vue&type=template&id=4c89d4ed
 
@@ -12008,7 +12136,7 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
       validator: t => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t)
     }
   },
-  emits: ['click'],
+  emits: ['click', 'keydown', 'mousemove', 'mouseleave'],
 
   data() {
     return {
@@ -12028,6 +12156,26 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
       }
     },
 
+    listItemListeners() {
+      return {
+        keydown: event => {
+          if (['enter', 'space'].includes(event.code.toLowerCase())) {
+            this.onClick(event);
+          }
+
+          this.$emit('keydown', event);
+        },
+        mousemove: event => {
+          this.onMouseHover(event);
+          this.$emit('mousemove', event);
+        },
+        mouseleave: event => {
+          this.onMouseLeave(event);
+          this.$emit('mouseleave', event);
+        }
+      };
+    },
+
     /**
      * For keyboard navigation, whether or not this item is currently highlighted.
      * An injected highlightId will override the default mouseover highlight.
@@ -12054,8 +12202,8 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 
   },
   methods: {
-    onClick() {
-      this.$emit('click');
+    onClick(e) {
+      this.$emit('click', e);
     },
 
     onMouseHover() {
@@ -12070,9 +12218,9 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 });
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=style&index=0&id=642c4ad3&lang=less
-var list_itemvue_type_style_index_0_id_642c4ad3_lang_less = __webpack_require__(32);
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=642c4ad3&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=style&index=0&id=7876bc36&lang=less
+var list_itemvue_type_style_index_0_id_7876bc36_lang_less = __webpack_require__(621);
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=7876bc36&lang=less
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue
 
@@ -12082,7 +12230,7 @@ var list_itemvue_type_style_index_0_id_642c4ad3_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_642c4ad3_render]])
+const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_7876bc36_render]])
 
 /* harmony default export */ const list_item = (list_item_exports_);
 ;// CONCATENATED MODULE: ./components/list_item/index.js
@@ -13261,79 +13409,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-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/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-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/chip/chip.vue?vue&type=template&id=8a56dabe
 
-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_8a56dabe_hoisted_1 = {
+  class: "d-chip"
+};
+const chipvue_type_template_id_8a56dabe_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_8a56dabe_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_8a56dabe_hoisted_4 = ["id"];
+function chipvue_type_template_id_8a56dabe_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("icon-close");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-button");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_8a56dabe_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     id: $props.id,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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_.withKeys)(function () {
-      return $options.onClick && $options.onClick(...arguments);
-    }, ["enter"])),
-    onKeyup: [_cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)(function () {
-      return $options.onClick && $options.onClick(...arguments);
-    }, ["enter"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)(function () {
-      return $options.onClose && $options.onClose(...arguments);
-    }, ["delete"]))]
-  }, [_ctx.$slots.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_4d7bb584_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "icon")])) : _ctx.$slots.avatar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_4d7bb584_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
-    key: 2,
-    id: "".concat($props.id, "-content"),
-    "data-qa": "dt-chip-label",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-truncate', $props.contentClass])
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_4d7bb584_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_4d7bb584_hoisted_5)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", chipvue_type_template_id_4d7bb584_hoisted_6, [!$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
+    "aria-label": $props.ariaLabel
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toHandlers)($options.chipListeners)), {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [_ctx.$slots.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_8a56dabe_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "icon")])) : _ctx.$slots.avatar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", chipvue_type_template_id_8a56dabe_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("span", {
+      key: 2,
+      id: "".concat($props.id, "-content"),
+      "data-qa": "dt-chip-label",
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-truncate', 'd-chip__text', $props.contentClass])
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_8a56dabe_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)]),
+    _: 3
+  }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)({
     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_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_icon_close)]),
+    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_icon_close)]),
     _: 1
-  }, 16, ["aria-label"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)], 512)], 42, chipvue_type_template_id_4d7bb584_hoisted_1);
+  }, 16, ["class", "aria-label"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=4d7bb584
+;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=8a56dabe
 
 ;// 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 = ({
@@ -13417,7 +13550,7 @@ const CHIP_SIZE_MODIFIERS = {
       default: ''
     }
   },
-  emits: ['click', 'close'],
+  emits: ['click', 'close', 'keyup'],
 
   data() {
     return {
@@ -13426,37 +13559,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');
-      }
     }
 
   }
@@ -13469,7 +13602,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_8a56dabe_render]])
 
 /* harmony default export */ const chip = (chip_exports_);
 ;// CONCATENATED MODULE: ./components/chip/index.js
@@ -13788,27 +13921,27 @@ const select_menu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(select
 ;// CONCATENATED MODULE: ./components/select_menu/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/toast/toast.vue?vue&type=template&id=1cc09485
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/toast/toast.vue?vue&type=template&id=b9998f6e
 
-const toastvue_type_template_id_1cc09485_hoisted_1 = ["aria-hidden"];
-const toastvue_type_template_id_1cc09485_hoisted_2 = {
+const toastvue_type_template_id_b9998f6e_hoisted_1 = ["aria-hidden"];
+const toastvue_type_template_id_b9998f6e_hoisted_2 = {
   class: "d-toast__dialog"
 };
-function toastvue_type_template_id_1cc09485_render(_ctx, _cache, $props, $setup, $data, $options) {
+function toastvue_type_template_id_b9998f6e_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_notice_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-notice-icon");
 
   const _component_dt_notice_content = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-notice-content");
 
   const _component_dt_notice_action = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)("dt-notice-action");
 
-  return !$data.hidden ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
+  return $data.isShown ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
     key: 0,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['d-toast', $options.kindClass, {
       'd-toast--important': $props.important
     }]),
     "data-qa": "dt-toast",
-    "aria-hidden": $data.hidden.toString()
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", toastvue_type_template_id_1cc09485_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_notice_icon, {
+    "aria-hidden": (!$data.isShown).toString()
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", toastvue_type_template_id_b9998f6e_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_notice_icon, {
     kind: $props.kind
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "icon")]),
@@ -13825,18 +13958,20 @@ function toastvue_type_template_id_1cc09485_render(_ctx, _cache, $props, $setup,
   }, 8, ["title-id", "content-id", "title", "role"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_notice_action, {
     "hide-close": $props.hideClose,
     "close-button-props": $props.closeButtonProps,
-    onClose: _cache[0] || (_cache[0] = $event => _ctx.$emit('close'))
+    onClose: $options.closeToast
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "action")]),
     _: 3
-  }, 8, ["hide-close", "close-button-props"])])], 10, toastvue_type_template_id_1cc09485_hoisted_1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true);
+  }, 8, ["hide-close", "close-button-props", "onClose"])])], 10, toastvue_type_template_id_b9998f6e_hoisted_1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true);
 }
-;// CONCATENATED MODULE: ./components/toast/toast.vue?vue&type=template&id=1cc09485
+;// CONCATENATED MODULE: ./components/toast/toast.vue?vue&type=template&id=b9998f6e
 
 ;// CONCATENATED MODULE: ./components/toast/toast_constants.js
 const TOAST_ROLES = ['status', 'alert'];
+const TOAST_MIN_DURATION = 6000;
 /* harmony default export */ const toast_constants = ({
-  TOAST_ROLES
+  TOAST_ROLES,
+  TOAST_MIN_DURATION
 });
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/toast/toast.vue?vue&type=script&lang=js
 
@@ -13926,6 +14061,17 @@ const TOAST_ROLES = ['status', 'alert'];
       default: false
     },
 
+    /**
+     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear
+     * after reaching the duration time, so it's convenient to use `v-model` with this prop to update
+     * the data in your component.
+     * Supports v-model
+     */
+    show: {
+      type: Boolean,
+      default: false
+    },
+
     /**
      * Props for the toast close button.
      */
@@ -13944,21 +14090,23 @@ const TOAST_ROLES = ['status', 'alert'];
 
     /**
      * The duration in ms the toast will display before disappearing.
-     * Defaults to 6000 ms and the prop validation is that provided duration is equal to or greater than 6000.
+     * The toast won't disappear if the duration is not provided.
+     * If it's provided, it should be equal to or greater than 6000.
      */
     duration: {
       type: Number,
-      default: 6000,
+      default: null,
       validator: duration => {
-        return duration >= 6000;
+        return duration >= TOAST_MIN_DURATION;
       }
     }
   },
-  emits: ['close', 'click'],
+  emits: ['close', 'click', 'update:show'],
 
   data() {
     return {
-      hidden: true
+      isShown: false,
+      minDuration: TOAST_MIN_DURATION
     };
   },
 
@@ -13972,25 +14120,45 @@ const TOAST_ROLES = ['status', 'alert'];
         base: 'd-toast--base'
       };
       return kindClasses[this.kind];
+    },
+
+    shouldSetTimeout() {
+      return !!this.duration && this.duration >= this.minDuration;
     }
 
   },
+  watch: {
+    show: {
+      handler: function (show) {
+        this.isShown = show;
+
+        if (show) {
+          this.setTimeout();
+        } else {
+          clearTimeout(this.displayTimer);
+        }
+      },
+      immediate: true
+    }
+  },
 
   unmounted() {
     clearTimeout(this.displayTimer);
   },
 
   methods: {
-    show() {
-      this.hidden = false;
-      this.displayTimer = setTimeout(() => {
-        this.hidden = true;
-      }, this.duration);
+    closeToast(event) {
+      this.$emit('update:show', false);
+      this.$emit('close', event);
     },
 
-    close() {
-      this.hidden = true;
-      clearTimeout(this.displayTimer);
+    setTimeout() {
+      if (this.shouldSetTimeout) {
+        this.displayTimer = setTimeout(() => {
+          this.isShown = false;
+          this.$emit('update:show', false);
+        }, this.duration);
+      }
     }
 
   }
@@ -14003,7 +14171,7 @@ const TOAST_ROLES = ['status', 'alert'];
 
 
 ;
-const toast_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(toastvue_type_script_lang_js, [['render',toastvue_type_template_id_1cc09485_render]])
+const toast_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(toastvue_type_script_lang_js, [['render',toastvue_type_template_id_b9998f6e_render]])
 
 /* harmony default export */ const toast = (toast_exports_);
 ;// CONCATENATED MODULE: ./components/toast/index.js
@@ -14142,15 +14310,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-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/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-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/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_.resolveComponent)("dt-lazy-show");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", tooltipvue_type_template_id_600c8e6a_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", tooltipvue_type_template_id_044c8b20_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("div", {
     ref: "anchor",
     "data-qa": "dt-tooltip-anchor",
     onFocusin: _cache[0] || (_cache[0] = function () {
@@ -14187,7 +14355,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
 /*
@@ -14251,7 +14419,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
      */
     offset: {
       type: Array,
-      default: () => [0, 0]
+      default: () => [0, -4]
     },
 
     /**
@@ -14463,9 +14631,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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=600c8e6a&lang=less
-var tooltipvue_type_style_index_0_id_600c8e6a_lang_less = __webpack_require__(877);
-;// 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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=044c8b20&lang=less
+var tooltipvue_type_style_index_0_id_044c8b20_lang_less = __webpack_require__(273);
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=044c8b20&lang=less
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue
 
@@ -14475,7 +14643,7 @@ var tooltipvue_type_style_index_0_id_600c8e6a_lang_less = __webpack_require__(87
 ;
 
 
-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
@@ -14776,6 +14944,270 @@ const keyboard_shortcut_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout.vue?vue&type=template&id=2e5fe0a4
+
+const root_layoutvue_type_template_id_2e5fe0a4_hoisted_1 = {
+  class: "root-layout"
+};
+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_.resolveComponent)("dt-root-layout-body");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", root_layoutvue_type_template_id_2e5fe0a4_hoisted_1, [_ctx.$slots.header ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("header", {
+    key: 0,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['root-layout__header', $props.headerClass, {
+      'root-layout__header--sticky': $props.headerSticky
+    }]),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)({
+      'height': $props.headerHeight
+    }),
+    "data-qa": "root-layout-header"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "header")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(_component_dt_root_layout_body, {
+    "content-class": $props.contentClass,
+    "content-wrap-width-percent": $props.contentWrapWidthPercent,
+    "sidebar-class": $props.sidebarClass,
+    "sidebar-width": $props.sidebarWidth,
+    "sidebar-position": $props.sidebarPosition
+  }, {
+    sidebar: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "sidebar")]),
+    content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")]),
+    _: 3
+  }, 8, ["content-class", "content-wrap-width-percent", "sidebar-class", "sidebar-width", "sidebar-position"]), _ctx.$slots.footer ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("footer", {
+    key: 1,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['root-layout__footer', $props.footerClass]),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)({
+      'height': $props.footerHeight
+    }),
+    "data-qa": "root-layout-footer"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "footer")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)]);
+}
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=template&id=2e5fe0a4
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout_body.vue?vue&type=template&id=dfb53770
+
+function root_layout_bodyvue_type_template_id_dfb53770_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['root-layout__body', $options.bodyClass]),
+    "data-qa": "root-layout-body"
+  }, [_ctx.$slots.sidebar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("aside", {
+    key: 0,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['root-layout__sidebar', $props.sidebarClass]),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)({
+      'flex-basis': $props.sidebarWidth
+    }),
+    "data-qa": "root-layout-sidebar"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "sidebar")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), _ctx.$slots.content ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("main", {
+    key: 1,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(['root-layout__content', $props.contentClass]),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeStyle)({
+      'min-inline-size': $props.contentWrapWidthPercent
+    }),
+    "data-qa": "root-layout-content"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "content")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)], 2);
+}
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=template&id=dfb53770
+
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_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-82.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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=dfb53770&lang=less
+var root_layout_bodyvue_type_style_index_0_id_dfb53770_lang_less = __webpack_require__(304);
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=dfb53770&lang=less
+
+;// 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-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout.vue?vue&type=script&lang=js
+
+
+/* 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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout.vue?vue&type=style&index=0&id=2e5fe0a4&lang=less
+var root_layoutvue_type_style_index_0_id_2e5fe0a4_lang_less = __webpack_require__(151);
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=style&index=0&id=2e5fe0a4&lang=less
+
+;// 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-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=7091b031
 
 const contact_infovue_type_template_id_7091b031_hoisted_1 = {
@@ -15060,6 +15492,7 @@ const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(to
 
 
 
+
 
 
  /// Recipes