@dialpad/dialtone-vue 3.43.0 → 3.44.0

package/dist/dialtone-vue.umd.js

@@ -1535,6 +1535,13 @@ const kebabCaseToPascalCase = string => {
 const pascalCaseToKebabCase = string => {
   return string.replace(/\.?([A-Z0-9]+)/g, (x, y) => '-' + y.toLowerCase()).replace(/^-/, '');
 };
+const extractVueListeners = attrs => {
+  const listeners = Object.entries(attrs).filter(_ref => {
+    let [key] = _ref;
+    return key.startsWith('on');
+  });
+  return Object.fromEntries(listeners);
+};
 /* harmony default export */ const utils = ({
   getUniqueString,
   getRandomElement,
@@ -1544,7 +1551,8 @@ const pascalCaseToKebabCase = string => {
   getValidationState,
   htmlFragment,
   flushPromises,
-  kebabCaseToPascalCase
+  kebabCaseToPascalCase,
+  extractVueListeners
 });
 ;// 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/presence/presence.vue?vue&type=template&id=85037b42
 
@@ -4214,9 +4222,11 @@ function combobox_loading_listvue_type_template_id_07d9971d_render(_ctx, _cache,
 }
 ;// CONCATENATED MODULE: ./components/combobox/combobox_loading-list.vue?vue&type=template&id=07d9971d
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=template&id=65cb4fdd
+;// 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=28a5ebfc
+
+function list_itemvue_type_template_id_28a5ebfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
-function list_itemvue_type_template_id_65cb4fdd_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', {
@@ -4237,13 +4247,21 @@ function list_itemvue_type_template_id_65cb4fdd_render(_ctx, _cache, $props, $se
         name: slotName,
         fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, slotName)])
       };
-    })]), 1024)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
+    }), $props.selected ? {
+      name: "selected",
+      fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+        name: "check",
+        size: "400",
+        class: "d-ml8"
+      })]),
+      key: "0"
+    } : undefined]), 1024)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
       key: 1
     })]),
     _: 3
   }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=65cb4fdd
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=template&id=28a5ebfc
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item_constants.js
 const LIST_ITEM_TYPES = {
@@ -4259,17 +4277,17 @@ const LIST_ITEM_NAVIGATION_TYPES = {
   LIST_ITEM_TYPES,
   LIST_ITEM_NAVIGATION_TYPES
 });
-;// 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=6b1db142
+;// 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=43d1433f
 
-const default_list_itemvue_type_template_id_6b1db142_hoisted_1 = {
+const default_list_itemvue_type_template_id_43d1433f_hoisted_1 = {
   class: "dt-default-list-item d-fs-200 d-lh-300 d-py4 d-px8 d-d-flex d-ai-center"
 };
-const default_list_itemvue_type_template_id_6b1db142_hoisted_2 = {
+const default_list_itemvue_type_template_id_43d1433f_hoisted_2 = {
   key: 0,
   class: "dt-default-list-item--left d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pr8",
   "data-qa": "dt-default-list-item-left-wrapper"
 };
-const default_list_itemvue_type_template_id_6b1db142_hoisted_3 = {
+const default_list_itemvue_type_template_id_43d1433f_hoisted_3 = {
   class: "d-fl-grow1 d-of-hidden"
 };
 const _hoisted_4 = {
@@ -4285,16 +4303,16 @@ const _hoisted_6 = {
   class: "dt-default-list-item--right d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pl8",
   "data-qa": "dt-default-list-item-right-wrapper"
 };
-function default_list_itemvue_type_template_id_6b1db142_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", default_list_itemvue_type_template_id_6b1db142_hoisted_1, [$data.hasSlotContent(_ctx.$slots.left) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("section", default_list_itemvue_type_template_id_6b1db142_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "left")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("section", default_list_itemvue_type_template_id_6b1db142_hoisted_3, [$data.hasSlotContent(_ctx.$slots.default) ? ((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, "default")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.subtitle) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+function default_list_itemvue_type_template_id_43d1433f_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", default_list_itemvue_type_template_id_43d1433f_hoisted_1, [$data.hasSlotContent(_ctx.$slots.left) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("section", default_list_itemvue_type_template_id_43d1433f_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "left")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("section", default_list_itemvue_type_template_id_43d1433f_hoisted_3, [$data.hasSlotContent(_ctx.$slots.default) ? ((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, "default")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.subtitle) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 1,
     "data-qa": "dt-default-list-item-subtitle-wrapper",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-fs-100 d-fc-black-600', {
       'd-mtn2': _ctx.$slots.default
     }])
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.bottom) ? ((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.renderSlot)(_ctx.$slots, "bottom")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), $data.hasSlotContent(_ctx.$slots.right) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("section", _hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.bottom) ? ((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.renderSlot)(_ctx.$slots, "bottom")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), $data.hasSlotContent(_ctx.$slots.right) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("section", _hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "selected")]);
 }
-;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=template&id=6b1db142
+;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=template&id=43d1433f
 
 ;// 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/list_item/default_list_item.vue?vue&type=script&lang=js
 
@@ -4310,10 +4328,10 @@ function default_list_itemvue_type_template_id_6b1db142_render(_ctx, _cache, $pr
 });
 ;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.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/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/default_list_item.vue?vue&type=style&index=0&id=6b1db142&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.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/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/default_list_item.vue?vue&type=style&index=0&id=43d1433f&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=style&index=0&id=6b1db142&lang=less
+;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=style&index=0&id=43d1433f&lang=less
 
 ;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue
 
@@ -4323,13 +4341,14 @@ function default_list_itemvue_type_template_id_6b1db142_render(_ctx, _cache, $pr
 ;
 
 
-const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(default_list_itemvue_type_script_lang_js, [['render',default_list_itemvue_type_template_id_6b1db142_render]])
+const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(default_list_itemvue_type_script_lang_js, [['render',default_list_itemvue_type_template_id_43d1433f_render]])
 
 /* harmony default export */ const default_list_item = (default_list_item_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/list_item/list_item.vue?vue&type=script&lang=js
 
 
 
+
 /**
  * A list item is an element that can be used to represent individual items in a list.
  * @see https://dialpad.design/components/list_item.html
@@ -4338,7 +4357,8 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 /* harmony default export */ const list_itemvue_type_script_lang_js = ({
   name: 'ListItem',
   components: {
-    DtDefaultListItem: default_list_item
+    DtDefaultListItem: default_list_item,
+    DtIcon: icon
   },
 
   /**
@@ -4399,6 +4419,14 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
       type: String,
       default: LIST_ITEM_NAVIGATION_TYPES.NONE,
       validator: t => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t)
+    },
+
+    /**
+     * Applies selected styles to the list item
+     */
+    selected: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
@@ -4512,10 +4540,10 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 });
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.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/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=style&index=0&id=65cb4fdd&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.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/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=style&index=0&id=28a5ebfc&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=65cb4fdd&lang=less
+;// CONCATENATED MODULE: ./components/list_item/list_item.vue?vue&type=style&index=0&id=28a5ebfc&lang=less
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item.vue
 
@@ -4525,7 +4553,7 @@ const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 ;
 
 
-const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_65cb4fdd_render]])
+const list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_itemvue_type_script_lang_js, [['render',list_itemvue_type_template_id_28a5ebfc_render]])
 
 /* harmony default export */ const list_item = (list_item_exports_);
 ;// CONCATENATED MODULE: ./components/list_item/index.js
@@ -5803,22 +5831,20 @@ 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/collapsible/collapsible.vue?vue&type=template&id=48280c45
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/collapsible/collapsible.vue?vue&type=template&id=74cfa30e
 
-const collapsiblevue_type_template_id_48280c45_hoisted_1 = ["id"];
-const collapsiblevue_type_template_id_48280c45_hoisted_2 = ["title"];
-function collapsiblevue_type_template_id_48280c45_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_icon_arrow_accordion_open = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-arrow-accordion-open");
-
-  const _component_icon_arrow_accordion_closed = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-arrow-accordion-closed");
+const collapsiblevue_type_template_id_74cfa30e_hoisted_1 = ["id"];
+const collapsiblevue_type_template_id_74cfa30e_hoisted_2 = ["title"];
+function collapsiblevue_type_template_id_74cfa30e_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_dt_collapsible_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-collapsible-lazy-show");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
+  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)({
     ref: "collapsible"
-  }, {
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.collapsibleListeners)), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
       id: !$props.ariaLabelledBy && $options.labelledBy,
       ref: "anchor",
@@ -5839,18 +5865,15 @@ function collapsiblevue_type_template_id_48280c45_render(_ctx, _cache, $props, $
       }),
       onClick: $options.defaultToggleOpen
     }, {
-      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.isOpen ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_icon_arrow_accordion_open, {
-        key: 0,
-        class: "d-svg--size18 d-mr8 d-fl-shrink0"
-      })) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_icon_arrow_accordion_closed, {
-        key: 1,
-        class: "d-svg--size18 d-mr8 d-fl-shrink0"
-      })), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+        name: $data.isOpen ? 'chevron-down' : 'chevron-right',
+        class: "d-icon d-icon--size-300 d-mr8 d-fl-shrink0"
+      }, null, 8, ["name"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", {
         class: "d-mr-auto d-truncate",
         title: $props.anchorText
-      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.anchorText), 9, collapsiblevue_type_template_id_48280c45_hoisted_2)]),
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.anchorText), 9, collapsiblevue_type_template_id_74cfa30e_hoisted_2)]),
       _: 1
-    }, 8, ["aria-controls", "aria-expanded", "style", "onClick"])])], 10, collapsiblevue_type_template_id_48280c45_hoisted_1), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_collapsible_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    }, 8, ["aria-controls", "aria-expanded", "style", "onClick"])])], 10, collapsiblevue_type_template_id_74cfa30e_hoisted_1), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_collapsible_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
       id: $props.id,
       ref: "contentWrapper",
       "aria-hidden": `${!$data.isOpen}`,
@@ -5865,7 +5888,7 @@ function collapsiblevue_type_template_id_48280c45_render(_ctx, _cache, $props, $
       },
       tabindex: "-1",
       appear: ""
-    }, _ctx.$attrs, {
+    }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.collapsibleListeners), {
       onAfterLeave: $options.onLeaveTransitionComplete,
       onAfterEnter: $options.onEnterTransitionComplete
     }), {
@@ -5873,18 +5896,19 @@ function collapsiblevue_type_template_id_48280c45_render(_ctx, _cache, $props, $
       _: 3
     }, 16, ["id", "aria-hidden", "aria-labelledby", "aria-label", "show", "element-type", "class", "style", "onAfterLeave", "onAfterEnter"])]),
     _: 3
-  }, 512);
+  }, 16);
 }
-;// CONCATENATED MODULE: ./components/collapsible/collapsible.vue?vue&type=template&id=48280c45
+;// CONCATENATED MODULE: ./components/collapsible/collapsible.vue?vue&type=template&id=74cfa30e
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/collapsible/collapsible_lazy_show.vue?vue&type=template&id=2d7320ae
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/collapsible/collapsible_lazy_show.vue?vue&type=template&id=2cca40bc
 
-function collapsible_lazy_showvue_type_template_id_2d7320ae_render(_ctx, _cache, $props, $setup, $data, $options) {
+function collapsible_lazy_showvue_type_template_id_2cca40bc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     appear: $props.appear,
     "enter-active-class": "enter-active",
     "leave-active-class": "leave-active"
   }, _ctx.$attrs, {
+    css: $options.isCSSEnabled,
     onBeforeEnter: $options.beforeEnter,
     onEnter: $options.enter,
     onAfterEnter: $options.afterEnter,
@@ -5899,9 +5923,9 @@ function collapsible_lazy_showvue_type_template_id_2d7320ae_render(_ctx, _cache,
       _: 3
     }, 16)), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
     _: 3
-  }, 16, ["appear", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
+  }, 16, ["appear", "css", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
 }
-;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=template&id=2d7320ae
+;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=template&id=2cca40bc
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/collapsible/collapsible_lazy_show.vue?vue&type=script&lang=js
 /* harmony default export */ const collapsible_lazy_showvue_type_script_lang_js = ({
@@ -5946,6 +5970,22 @@ function collapsible_lazy_showvue_type_template_id_2d7320ae_render(_ctx, _cache,
     };
   },
 
+  /******************
+   *    COMPUTED    *
+   ******************/
+  computed: {
+    /**
+     * Set the css property to false when running tests only.
+     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about
+     * transition `css` property
+     * @returns {boolean}
+     */
+    isCSSEnabled() {
+      return "production" !== 'test';
+    }
+
+  },
+
   /******************
    *      WATCH     *
    ******************/
@@ -6020,10 +6060,10 @@ function collapsible_lazy_showvue_type_template_id_2d7320ae_render(_ctx, _cache,
 });
 ;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/collapsible/collapsible_lazy_show.vue?vue&type=style&index=0&id=2d7320ae&lang=css
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/collapsible/collapsible_lazy_show.vue?vue&type=style&index=0&id=2cca40bc&lang=css
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=style&index=0&id=2d7320ae&lang=css
+;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue?vue&type=style&index=0&id=2cca40bc&lang=css
 
 ;// CONCATENATED MODULE: ./components/collapsible/collapsible_lazy_show.vue
 
@@ -6033,23 +6073,25 @@ function collapsible_lazy_showvue_type_template_id_2d7320ae_render(_ctx, _cache,
 ;
 
 
-const collapsible_lazy_show_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collapsible_lazy_showvue_type_script_lang_js, [['render',collapsible_lazy_showvue_type_template_id_2d7320ae_render]])
+const collapsible_lazy_show_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collapsible_lazy_showvue_type_script_lang_js, [['render',collapsible_lazy_showvue_type_template_id_2cca40bc_render]])
 
 /* harmony default export */ const collapsible_lazy_show = (collapsible_lazy_show_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/lazy_show/lazy_show.vue?vue&type=template&id=bca72c4e
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/lazy_show/lazy_show.vue?vue&type=template&id=2bc88a98
 
-function lazy_showvue_type_template_id_bca72c4e_render(_ctx, _cache, $props, $setup, $data, $options) {
+function lazy_showvue_type_template_id_2bc88a98_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     name: $props.transition,
     appear: $props.appear
-  }, _ctx.$attrs), {
+  }, _ctx.$attrs, {
+    css: $options.isCSSEnabled
+  }), {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)(_ctx.$attrs)), [$data.initialized ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
       key: 0
     }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 16), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
     _: 3
-  }, 16, ["name", "appear"]);
+  }, 16, ["name", "appear", "css"]);
 }
-;// CONCATENATED MODULE: ./components/lazy_show/lazy_show.vue?vue&type=template&id=bca72c4e
+;// CONCATENATED MODULE: ./components/lazy_show/lazy_show.vue?vue&type=template&id=2bc88a98
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/lazy_show/lazy_show.vue?vue&type=script&lang=js
 /**
@@ -6100,6 +6142,19 @@ function lazy_showvue_type_template_id_bca72c4e_render(_ctx, _cache, $props, $se
     };
   },
 
+  computed: {
+    /**
+     * Set the css property to false when running tests only.
+     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about
+     * transition `css` property
+     * @returns {boolean}
+     */
+    isCSSEnabled() {
+      return "production" !== 'test';
+    }
+
+  },
+
   /******************
    *      WATCH     *
    ******************/
@@ -6118,74 +6173,17 @@ function lazy_showvue_type_template_id_bca72c4e_render(_ctx, _cache, $props, $se
 
 
 ;
-const lazy_show_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(lazy_showvue_type_script_lang_js, [['render',lazy_showvue_type_template_id_bca72c4e_render]])
+const lazy_show_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(lazy_showvue_type_script_lang_js, [['render',lazy_showvue_type_template_id_2bc88a98_render]])
 
 /* harmony default export */ const lazy_show = (lazy_show_exports_);
 ;// CONCATENATED MODULE: ./components/lazy_show/index.js
 
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionOpen.vue?vue&type=template&id=67591df8
-
-
-const IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Arrow Accordion Open",
-  class: "d-svg d-svg--system d-svg__arrowAccordionOpen",
-  viewBox: "0 0 24 24"
-}
-const IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M8.738 8a1 1 0 0 0-.865 1.502l3.262 5.614a1 1 0 0 0 1.73 0l3.262-5.614A1 1 0 0 0 15.262 8H8.738Z" }, null, -1)
-const IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_3 = [
-  IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_2
-]
-
-function IconArrowAccordionOpenvue_type_template_id_67591df8_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_1, IconArrowAccordionOpenvue_type_template_id_67591df8_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionOpen.vue?vue&type=template&id=67591df8
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionOpen.vue
-
-const script = {}
-
-;
-const IconArrowAccordionOpen_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(script, [['render',IconArrowAccordionOpenvue_type_template_id_67591df8_render]])
-
-/* harmony default export */ const IconArrowAccordionOpen = (IconArrowAccordionOpen_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionClosed.vue?vue&type=template&id=5e7762fe
-
-
-const IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Arrow Accordion Closed",
-  class: "d-svg d-svg--system d-svg__arrowAccordionClosed",
-  viewBox: "0 0 24 24"
-}
-const IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M8 15.262a1 1 0 0 0 1.502.865l5.614-3.262a1 1 0 0 0 0-1.73L9.502 7.873A1 1 0 0 0 8 8.738v6.524Z" }, null, -1)
-const IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_3 = [
-  IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_2
-]
-
-function IconArrowAccordionClosedvue_type_template_id_5e7762fe_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_1, IconArrowAccordionClosedvue_type_template_id_5e7762fe_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionClosed.vue?vue&type=template&id=5e7762fe
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionClosed.vue
-
-const IconArrowAccordionClosed_script = {}
-
-;
-const IconArrowAccordionClosed_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowAccordionClosed_script, [['render',IconArrowAccordionClosedvue_type_template_id_5e7762fe_render]])
-
-/* harmony default export */ const IconArrowAccordionClosed = (IconArrowAccordionClosed_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/collapsible/collapsible.vue?vue&type=script&lang=js
 
 
 
 
 
-
 /**
  * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.
  * @see https://dialpad.design/components/collapsible.html
@@ -6197,10 +6195,8 @@ const IconArrowAccordionClosed_exports_ = /*#__PURE__*/(0,exportHelper/* default
     DtButton: button_button,
     DtCollapsibleLazyShow: collapsible_lazy_show,
     DtLazyShow: lazy_show,
-    IconArrowAccordionOpen: IconArrowAccordionOpen,
-    IconArrowAccordionClosed: IconArrowAccordionClosed
+    DtIcon: icon
   },
-  inheritAttrs: false,
   props: {
     /**
      * Text that is displayed on the anchor if nothing is passed in the slot.
@@ -6327,6 +6323,10 @@ const IconArrowAccordionClosed_exports_ = /*#__PURE__*/(0,exportHelper/* default
       // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if
       // there is no aria-label and the labelledby should point to the anchor
       return this.ariaLabelledBy || !this.ariaLabel && getUniqueString('DtCollapsible__anchor');
+    },
+
+    collapsibleListeners() {
+      return extractVueListeners(this.$attrs);
     }
 
   },
@@ -6388,7 +6388,7 @@ const IconArrowAccordionClosed_exports_ = /*#__PURE__*/(0,exportHelper/* default
 
 
 ;
-const collapsible_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collapsiblevue_type_script_lang_js, [['render',collapsiblevue_type_template_id_48280c45_render]])
+const collapsible_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collapsiblevue_type_script_lang_js, [['render',collapsiblevue_type_template_id_74cfa30e_render]])
 
 /* harmony default export */ const collapsible = (collapsible_exports_);
 ;// CONCATENATED MODULE: ./components/collapsible/index.js
@@ -18001,33 +18001,44 @@ function root_layoutvue_type_template_id_115594cd_render(_ctx, _cache, $props, $
 }
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=template&id=115594cd
 
-;// 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=e95be78c
+;// 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=2bcc4e0e
 
-function root_layout_bodyvue_type_template_id_e95be78c_render(_ctx, _cache, $props, $setup, $data, $options) {
+function root_layout_bodyvue_type_template_id_2bcc4e0e_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", {
     ref: "root-layout-body",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__body', 'd-fl-grow1', $options.bodyClasses]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__body', {
+      'd-of-y-auto': $options.isInMobileMode
+    }, 'd-fl-grow1', $options.bodyClasses]),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
+      'height': $options.isInMobileMode ? $options.mainHeight : null
+    }),
     "data-qa": "root-layout-body"
   }, [$data.hasSlotContent(_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,
     ref: "root-layout-sidebar",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__sidebar', $props.sidebarClass]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__sidebar', {
+      'd-of-y-auto': !$options.isInMobileMode
+    }, $props.sidebarClass]),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
-      'flex-basis': $props.sidebarWidth
+      'flex-basis': $props.sidebarWidth,
+      'height': !$options.isInMobileMode ? $options.mainHeight : null
     }),
     "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), $data.hasSlotContent(_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,
     ref: "root-layout-content",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__content', $props.contentClass]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__content', {
+      'd-of-y-auto': !$options.isInMobileMode
+    }, $props.contentClass]),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
       'min-inline-size': $props.contentWrapWidthPercent,
-      'height': $options.mainHeight
+      'height': !$options.isInMobileMode ? $options.mainHeight : null
     }),
-    "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);
+    "data-qa": "root-layout-content",
+    tabindex: "0"
+  }, [(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)], 6);
 }
-;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=template&id=e95be78c
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=template&id=2bcc4e0e
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_constants.js
 const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
@@ -18127,21 +18138,19 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 
     mainHeight() {
       if (this.fixed) {
-        return `calc(${this.documentHeight}
-          - (${this.headerHeight} + ${this.extraSidebarHeight} + ${this.footerHeight}))`;
+        return `calc(${this.documentHeight} - (${this.headerHeight} + ${this.footerHeight}))`;
       }
 
       return null;
     },
 
-    // When the sidebar is above the header due to contentWrapWidthPercent, it needs to be excluded
-    // in the main content height calculation. Otherwise it is 0 since it is at equal height with the main content.
-    extraSidebarHeight() {
+    // When the sidebar is above the header due to contentWrapWidthPercent it is considered to be in mobile mode.
+    isInMobileMode() {
       if (this.contentTop > this.sidebarTop) {
-        return this.$refs['root-layout-sidebar'].offsetHeight + 'px';
+        return true;
       }
 
-      return '0px';
+      return false;
     }
 
   },
@@ -18175,10 +18184,10 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 });
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.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/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=e95be78c&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.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/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=2bcc4e0e&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=e95be78c&lang=less
+;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue?vue&type=style&index=0&id=2bcc4e0e&lang=less
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_body.vue
 
@@ -18188,7 +18197,7 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 ;
 
 
-const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layout_bodyvue_type_script_lang_js, [['render',root_layout_bodyvue_type_template_id_e95be78c_render]])
+const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layout_bodyvue_type_script_lang_js, [['render',root_layout_bodyvue_type_template_id_2bcc4e0e_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