@dialpad/dialtone-vue 3.47.0 → 3.50.0

package/dist/dialtone-vue.umd.js

@@ -1209,6 +1209,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtRecipeIvrNode": () => (/* reexport */ ivr_node),
   "DtRecipeTopBannerInfo": () => (/* reexport */ top_banner_info),
   "DtRootLayout": () => (/* reexport */ root_layout),
+  "DtScroller": () => (/* reexport */ DtScroller),
   "DtSelectMenu": () => (/* reexport */ select_menu),
   "DtSkeleton": () => (/* reexport */ skeleton_skeleton),
   "DtSkeletonListItem": () => (/* reexport */ skeleton_list_item),
@@ -1272,7 +1273,6 @@ __webpack_require__.d(__webpack_exports__, {
   "TOOLTIP_HIDE_ON_CLICK_VARIANTS": () => (/* reexport */ TOOLTIP_HIDE_ON_CLICK_VARIANTS),
   "TOOLTIP_KIND_MODIFIERS": () => (/* reexport */ TOOLTIP_KIND_MODIFIERS),
   "TOOLTIP_STICKY_VALUES": () => (/* reexport */ TOOLTIP_STICKY_VALUES),
-  "USER_STATUS_COLOR_MODIFIERS": () => (/* reexport */ USER_STATUS_COLOR_MODIFIERS),
   "VALIDATION_MESSAGE_TYPES": () => (/* reexport */ VALIDATION_MESSAGE_TYPES),
   "VALID_WIDTH_SIZE": () => (/* reexport */ VALID_WIDTH_SIZE),
   "filterFormattedMessages": () => (/* reexport */ filterFormattedMessages),
@@ -1301,7 +1301,7 @@ if (typeof window !== 'undefined') {
 
 ;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-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/avatar/avatar.vue?vue&type=template&id=0795f071
+;// 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/avatar/avatar.vue?vue&type=template&id=ac8c0ad8
 
 const _hoisted_1 = ["id"];
 const _hoisted_2 = {
@@ -1310,7 +1310,7 @@ const _hoisted_2 = {
 };
 const _hoisted_3 = {
   key: 0,
-  class: "d-avatar__count",
+  class: "d-avatar__count d-zi-base1",
   "data-qa": "dt-avatar-count"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -1323,18 +1323,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "dt-avatar"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", _hoisted_2, [$options.showDefaultSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
     key: 0
-  }) : $options.showInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+  }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.showInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
     key: 1,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($data.AVATAR_KIND_MODIFIERS.initials)
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-ps-absolute d-zi-base", $data.AVATAR_KIND_MODIFIERS.initials])
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.formattedInitials), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 512), $options.showGroup ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_3, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.formattedGroup), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.presence && !$options.showGroup ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_presence, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 1,
     presence: $props.presence,
-    class: ['d-avatar__presence', $data.AVATAR_PRESENCE_SIZE_MODIFIERS[$props.size]]
+    class: ["d-zi-base1", ['d-avatar__presence', $data.AVATAR_PRESENCE_SIZE_MODIFIERS[$props.size]]]
   }, $props.presenceProps, {
     "data-qa": "dt-presence"
   }), null, 16, ["presence", "class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 14, _hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=0795f071
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=ac8c0ad8
 
 ;// CONCATENATED MODULE: ./common/constants.js
 /* TODO: Move and sort these in a constants directory
@@ -1410,7 +1410,8 @@ const DEFAULT_PREFIX = 'dt';
 
 const seedrandom = __webpack_require__(377);
 
-let UNIQUE_ID_COUNTER = 0; // selector to find focusable not hidden inputs
+let UNIQUE_ID_COUNTER = 0;
+let TIMER; // selector to find focusable not hidden inputs
 
 const FOCUSABLE_SELECTOR_NOT_HIDDEN = 'input:not([type=hidden]):not(:disabled)'; // selector to find focusable not disables elements
 
@@ -1534,7 +1535,7 @@ function hasSlotContent(slot) {
  */
 
 const kebabCaseToPascalCase = string => {
-  return string.toLowerCase().split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+  return string === null || string === void 0 ? void 0 : string.toLowerCase().split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
 };
 /**
  * Transform a string from PascalCase to kebab-case
@@ -1552,6 +1553,17 @@ const extractVueListeners = attrs => {
   });
   return Object.fromEntries(listeners);
 };
+/*
+* Set's a global timer to debounce the execution of a function.
+* @param { object } func - the function that is going to be called after timeout
+* @param { number } [timeout=300] timeout
+* */
+
+function debounce(func) {
+  let timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
+  clearTimeout(TIMER);
+  TIMER = setTimeout(func, timeout);
+}
 /* harmony default export */ const utils = ({
   getUniqueString,
   getRandomElement,
@@ -1562,7 +1574,8 @@ const extractVueListeners = attrs => {
   htmlFragment,
   flushPromises,
   kebabCaseToPascalCase,
-  extractVueListeners
+  extractVueListeners,
+  debounce
 });
 ;// 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=77957bb3
 
@@ -1667,6 +1680,13 @@ const AVATAR_PRESENCE_SIZE_MODIFIERS = {
   md: 'd-avatar__presence--md',
   lg: 'd-avatar__presence--lg'
 };
+const AVATAR_PRESENCE_STATES = {
+  NONE: null,
+  BUSY: 'busy',
+  AWAY: 'away',
+  OFFLINE: 'offline',
+  ACTIVE: 'active'
+};
 const AVATAR_ICON_SIZES = {
   xs: '100',
   sm: '200',
@@ -1754,7 +1774,10 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
      */
     presence: {
       type: String,
-      default: null
+      default: AVATAR_PRESENCE_STATES.NONE,
+      validator: state => {
+        return Object.values(AVATAR_PRESENCE_STATES).includes(state);
+      }
     },
 
     /**
@@ -1796,13 +1819,14 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
   data() {
     return {
       // initials, image or icon
-      kind: 'image',
+      kind: null,
       AVATAR_SIZE_MODIFIERS: AVATAR_SIZE_MODIFIERS,
       AVATAR_KIND_MODIFIERS: AVATAR_KIND_MODIFIERS,
       AVATAR_PRESENCE_SIZE_MODIFIERS: AVATAR_PRESENCE_SIZE_MODIFIERS,
       imageLoadedSuccessfully: null,
       slottedInitials: '',
-      formattedInitials: ''
+      formattedInitials: '',
+      initializing: false
     };
   },
 
@@ -1815,11 +1839,11 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
     },
 
     showDefaultSlot() {
-      return this.kind !== 'initials' && this.imageLoadedSuccessfully !== false;
+      return this.kind !== 'initials' || this.kind === 'image' && this.imageLoadedSuccessfully === true;
     },
 
     showInitials() {
-      return this.kind === 'initials' || this.initials;
+      return this.kind === 'initials' || this.kind === 'image' && this.initials;
     },
 
     showGroup() {
@@ -1852,28 +1876,27 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
   },
 
   updated() {
-    if (this.kind === 'initials') {
-      this.slottedInitials = this.$el.children[0].textContent;
-      this.formatInitials(this.slottedInitials);
-    }
+    this.init();
   },
 
   methods: {
-    init() {
+    async init() {
+      if (this.initializing) return;
+      this.kind = null;
+      await this.$nextTick();
       const firstChild = this.$refs.canvas.children[0] || this.$refs.canvas;
-
-      if (!firstChild) {
-        return;
-      }
-
+      this.formatInitials(this.initials);
       this.setKind(firstChild);
       this.kindHandler(firstChild);
+      this.initializing = true;
+      await this.$nextTick();
+      this.initializing = false;
     },
 
     kindHandler(el) {
       switch (this.kind) {
         case 'image':
-          el.classList.add('d-avatar__image');
+          el.classList.add('d-avatar__image', 'd-zi-base1');
           this.validateImageAttrsPresence();
           this.setImageListeners(el);
           break;
@@ -1883,25 +1906,27 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
           break;
 
         case 'initials':
+          if (!el.textContent) return;
           this.slottedInitials = el.textContent;
-          this.formatInitials(this.slottedInitials);
+          this.formatInitials(this.slottedInitials.trim() || this.initials);
           break;
       }
     },
 
     setImageListeners(el) {
-      el.addEventListener('error', () => {
-        this.formatInitials(this.initials);
-        this.imageLoadedSuccessfully = false;
+      el.addEventListener('load', () => this._loadedImageEventHandler(el), {
+        once: true
       });
-      el.addEventListener('load', () => {
-        el.classList.add('d-avatar--image-loaded');
-        this.imageLoadedSuccessfully = true;
+      el.addEventListener('error', () => this._erroredImageEventHandler(el), {
+        once: true
       });
     },
 
     formatInitials(initials) {
-      if (!initials) return;
+      if (!initials) {
+        this.formattedInitials = '';
+        return;
+      }
 
       if (this.validatedSize === 'xs') {
         this.formattedInitials = '';
@@ -1913,7 +1938,7 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
     },
 
     setKind(element) {
-      if (this.isSvgType(element)) {
+      if (this.isIconType(element)) {
         this.kind = 'icon';
         return;
       }
@@ -1926,7 +1951,7 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
       this.kind = 'initials';
     },
 
-    isSvgType(element) {
+    isIconType(element) {
       var _element$tagName;
 
       return (element === null || element === void 0 ? void 0 : (_element$tagName = element.tagName) === null || _element$tagName === void 0 ? void 0 : _element$tagName.toUpperCase()) === 'SVG';
@@ -1972,16 +1997,28 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
       if (isSrcMissing || isAltMissing) {
         (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.warn)('src and alt attributes are required for image avatars', this);
       }
+    },
+
+    _loadedImageEventHandler(el) {
+      this.imageLoadedSuccessfully = true;
+      el.classList.remove('d-d-none');
+      el.classList.add('d-avatar--image-loaded');
+    },
+
+    _erroredImageEventHandler(el) {
+      this.imageLoadedSuccessfully = false;
+      el.classList.remove('d-avatar--image-loaded');
+      el.classList.add('d-d-none');
     }
 
   }
 });
 ;// CONCATENATED MODULE: ./components/avatar/avatar.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/avatar/avatar.vue?vue&type=style&index=0&id=0795f071&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/avatar/avatar.vue?vue&type=style&index=0&id=ac8c0ad8&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=0795f071&lang=less
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=ac8c0ad8&lang=less
 
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
 
@@ -3048,7 +3085,7 @@ const notice_action_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(noti
 
 /* harmony default export */ const notice_action = (notice_action_exports_);
 ;// CONCATENATED MODULE: ./common/mixins/modal.js
-const focusableAttrs = ':not(:disabled):not([aria-disabled="true"])';
+const focusableAttrs = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])';
 const tabbableAttrs = `${focusableAttrs}:not([tabindex="-1"])`;
 const focusableElementsList = `button,[href],input,select,textarea,details,[tabindex]`;
 /**
@@ -7055,7 +7092,7 @@ function orderModifiers(modifiers) {
   }, []);
 }
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/debounce.js
-function debounce(fn) {
+function debounce_debounce(fn) {
   var pending;
   return function () {
     if (!pending) {
@@ -7240,7 +7277,7 @@ function popperGenerator(generatorOptions) {
       },
       // Async and optimistically optimized update – it will not be executed if
       // not necessary (debounced to run at most once-per-tick)
-      update: debounce(function () {
+      update: debounce_debounce(function () {
         return new Promise(function (resolve) {
           instance.forceUpdate();
           resolve(state);
@@ -11046,7 +11083,6 @@ const getArrowDetected = fn => ({
 ;// CONCATENATED MODULE: ./components/popover/tippy_utils.js
 
 
-
 const BASE_TIPPY_DIRECTIONS = ['bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end'];
 const TIPPY_STICKY_VALUES = [true, false, 'reference', 'popper'];
 const tippy_utils_createTippy = (anchorElement, options) => {
@@ -11095,24 +11131,17 @@ const getPopperOptions = function () {
   };
 };
 
-const createAnchor = (anchorWrapper, tabIndex) => {
+const createAnchor = anchorWrapper => {
   const span = document.createElement('span');
-  span.setAttribute('tabindex', tabIndex);
   span.innerText = anchorWrapper.innerText || '';
   anchorWrapper.innerText = '';
   anchorWrapper.appendChild(span);
   return span;
 };
 
-const getAnchor = function (anchorWrapper) {
-  let tabIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0';
+const getAnchor = anchorWrapper => {
   const anchor = anchorWrapper === null || anchorWrapper === void 0 ? void 0 : anchorWrapper.children[0];
   if (!anchor) return createAnchor(anchorWrapper);
-
-  if (!findFirstFocusableNode(anchor)) {
-    anchor.setAttribute('tabindex', tabIndex);
-  }
-
   return anchor;
 };
 const getContentWrapper = content => {
@@ -17423,16 +17452,17 @@ 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=52eb174c
+;// 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=1868931e
 
-const tooltipvue_type_template_id_52eb174c_hoisted_1 = {
+const tooltipvue_type_template_id_1868931e_hoisted_1 = {
   "data-qa": "dt-tooltip-container"
 };
-function tooltipvue_type_template_id_52eb174c_render(_ctx, _cache, $props, $setup, $data, $options) {
+function tooltipvue_type_template_id_1868931e_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_52eb174c_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("a", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_1868931e_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("a", {
     ref: "anchor",
+    tabindex: "-1",
     role: "presentation",
     "data-qa": "dt-tooltip-anchor",
     onFocusin: _cache[0] || (_cache[0] = function () {
@@ -17467,7 +17497,7 @@ function tooltipvue_type_template_id_52eb174c_render(_ctx, _cache, $props, $setu
     _: 3
   }, 16, ["id", "show", "appear", "transition", "class"])]);
 }
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=52eb174c
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=1868931e
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
 /*
@@ -17821,10 +17851,10 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 });
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.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/tooltip/tooltip.vue?vue&type=style&index=0&id=52eb174c&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/tooltip/tooltip.vue?vue&type=style&index=0&id=1868931e&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=52eb174c&lang=less
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=1868931e&lang=less
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue
 
@@ -17834,7 +17864,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 ;
 
 
-const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_52eb174c_render]])
+const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_1868931e_render]])
 
 /* harmony default export */ const tooltip = (tooltip_exports_);
 ;// CONCATENATED MODULE: ./components/tooltip/index.js
@@ -18528,249 +18558,1577 @@ const stack_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(stackvue_typ
 /* harmony default export */ const stack = (stack_exports_);
 ;// CONCATENATED MODULE: ./components/stack/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=bdafd0f4
-
-const combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_1 = ["id"];
-const combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_2 = {
-  ref: "header"
-};
-const combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_3 = ["onMouseleave", "onFocusout"];
-const combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_4 = {
-  ref: "footer"
-};
-function combobox_with_popovervue_type_template_id_bdafd0f4_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
-
-  const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
-
-  const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
-
-  const _component_dt_combobox = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-combobox");
-
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_combobox, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
-    ref: "combobox",
-    loading: $props.loading,
-    label: $props.label,
-    "label-visible": $props.labelVisible,
-    size: $props.size,
-    description: $props.description,
-    "empty-list": $props.emptyList,
-    "empty-state-message": $props.emptyStateMessage,
-    "show-list": $data.isListShown,
-    "on-beginning-of-list": $props.onBeginningOfList,
-    "on-end-of-list": $props.onEndOfList,
-    "list-rendered-outside": true,
-    "list-id": $props.listId,
-    "data-qa": "dt-combobox"
-  }, $options.comboboxListeners), {
-    input: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref => {
-      let {
-        inputProps
-      } = _ref;
-      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
-        id: $data.externalAnchor,
-        ref: "input",
-        onFocusin: _cache[0] || (_cache[0] = function () {
-          return $options.onFocusIn && $options.onFocusIn(...arguments);
-        }),
-        onKeydown: [_cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => $options.openOnArrowKeyPress($event), ["up"])), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => $options.openOnArrowKeyPress($event), ["down"]))]
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
-        inputProps: inputProps,
-        onInput: $options.handleDisplayList
-      })], 40, combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_1)];
-    }),
-    list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref2 => {
-      let {
-        opened,
-        listProps,
-        clearHighlightIndex
-      } = _ref2;
-      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_popover, {
-        ref: "popover",
-        open: $data.isListShown,
-        "onUpdate:open": _cache[3] || (_cache[3] = $event => $data.isListShown = $event),
-        "hide-on-click": false,
-        "max-height": $props.maxHeight,
-        "max-width": $props.maxWidth,
-        offset: $props.popoverOffset,
-        sticky: $props.popoverSticky,
-        placement: "bottom-start",
-        "initial-focus-element": "none",
-        padding: "none",
-        role: "listbox",
-        "external-anchor": $data.externalAnchor,
-        "content-width": $props.contentWidth,
-        "content-appear": true,
-        "content-tabindex": null,
-        modal: false,
-        "auto-focus": false,
-        "append-to": $props.appendTo,
-        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-        "visually-hidden-close": _ctx.visuallyHiddenClose,
-        onOpened: opened
-      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
-        content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
-          ref: "listWrapper",
-          class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]),
-          onMouseleave: clearHighlightIndex,
-          onFocusout: clearHighlightIndex
-        }, [$props.loading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
-          key: 0
-        }, listProps)), null, 16)) : $props.emptyList && $props.emptyStateMessage ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
-          key: 1
-        }, listProps, {
-          message: $props.emptyStateMessage
-        }), null, 16, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
-          key: 2,
-          listProps: listProps
-        })], 42, combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_3)]),
-        _: 2
-      }, [$data.hasSlotContent(_ctx.$slots.header) ? {
-        name: "headerContent",
-        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
-        key: "0"
-      } : undefined, $data.hasSlotContent(_ctx.$slots.footer) ? {
-        name: "footerContent",
-        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
-        key: "1"
-      } : undefined]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "append-to", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])];
-    }),
-    _: 3
-  }, 16, ["loading", "label", "label-visible", "size", "description", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-id"]);
-}
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=bdafd0f4
-
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
-/* eslint-disable vuejs-accessibility/no-static-element-interactions */
-
-
-
-
-
-
-
+;// 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/scroller/modules/core-scroller.vue?vue&type=script&setup=true&lang=js
 
 
-/* harmony default export */ const combobox_with_popovervue_type_script_lang_js = ({
-  name: 'DtRecipeComboboxWithPopover',
-  components: {
-    DtCombobox: combobox,
-    DtPopover: popover,
-    ComboboxLoadingList: combobox_loading_list,
-    ComboboxEmptyList: combobox_empty_list
-  },
-  mixins: [sr_only_close_button],
+/* harmony default export */ const core_scrollervue_type_script_setup_true_lang_js = ({
+  __name: 'core-scroller',
   props: {
     /**
-     * String to use for the input label.
-     */
-    label: {
-      type: String,
+       * List of items you want to display in the scroller.
+       */
+    items: {
+      type: Array,
       required: true
     },
 
     /**
-     * Determines visibility of input label.
-     * @values true, false
-     */
-    labelVisible: {
-      type: Boolean,
-      default: true
+       *
+       * Field used to identify items and optimize managing rendered views
+       */
+    keyField: {
+      type: String,
+      default: 'id'
     },
 
     /**
-     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`
-     * @values null, xs, sm, md, lg, xl
-     */
-    size: {
+       * Direction of the scroller. Can be either `vertical` or `horizontal`.
+       */
+    direction: {
       type: String,
-      default: null,
-      validator: t => Object.values(LABEL_SIZES).includes(t)
+      default: 'vertical',
+      validator: value => ['vertical', 'horizontal'].includes(value)
     },
 
     /**
-     * Description for the input
-     */
-    description: {
-      type: String,
-      default: ''
+       * Size of the items in the list.
+       * If it is set to null (the default value), it will use variable size mode.
+       */
+    itemSize: {
+      type: Number,
+      default: null
     },
 
     /**
-     * Determines when to show the list element and also controls the aria-expanded attribute.
-     * Leaving this null will have the combobox trigger on input focus by default.
-     * If you set this value, the default trigger behavior will be disabled and you can
-     * control it as you need.
-     */
-    showList: {
-      type: Boolean,
+       * Minimum size used if the height (or width in horizontal mode) of an item is unknown.
+       */
+    minItemSize: {
+      type: [Number, String],
       default: null
     },
 
     /**
-     * Sets an ID on the list element of the component. Used by several aria attributes
-     * as well as when deriving the IDs for each item.
-     */
-    listId: {
+       * Field used to get the item's size in variable size mode.
+       */
+    sizeField: {
       type: String,
-
-      default() {
-        return getUniqueString();
-      }
-
+      default: 'size'
     },
 
     /**
-     * Additional class for the wrapper list element.
-     */
-    listClass: {
-      type: [String, Array, Object],
-      default: ''
+       * Amount of pixel to add to edges of the scrolling visible area to start rendering items further away.
+       */
+    buffer: {
+      type: Number,
+      default: 200
     },
 
     /**
-     * A method that will be called when the selection goes past the beginning of the list.
-     */
-    onBeginningOfList: {
-      type: Function,
-      default: null
+       * If true, the hover state will be skipped.
+       * This can be useful if you want to use the hover state for other purposes.
+       */
+    skipHover: {
+      type: Boolean,
+      default: false
     },
 
     /**
-     * A method that will be called when the selection goes past the end of the list.
-     */
-    onEndOfList: {
-      type: Function,
-      default: null
+       * The element to render as the list's wrapper.
+       */
+    listTag: {
+      type: String,
+      default: 'div'
     },
 
     /**
-     * Determines maximum height for the popover before overflow.
-     * Possible units rem|px|em
-     */
-    maxHeight: {
+       * The element to render as the list item.
+       */
+    itemTag: {
       type: String,
-      default: ''
+      default: 'div'
     },
 
     /**
-     * Determines maximum width for the popover before overflow.
-     * Possible units rem|px|%|em
-     */
-    maxWidth: {
-      type: String,
+       * The custom classes added to the item list wrapper.
+       */
+    listClass: {
+      type: [String, Object, Array],
       default: ''
     },
 
     /**
-     * Vertical padding size around the list element.
-     */
-    padding: {
-      type: String,
-      default: 'small',
-      validator: padding => {
-        return Object.keys(DROPDOWN_PADDING_CLASSES).some(item => item === padding);
-      }
+       * The custom classes added to each item.
+       */
+    itemClass: {
+      type: [String, Object, Array],
+      default: ''
+    }
+  },
+  emits: ['scroll-start', 'scroll-end'],
+
+  setup(__props, _ref) {
+    let {
+      expose,
+      emit
+    } = _ref;
+    const props = __props;
+    const views = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.reactive)(new Map());
+    const reactiveItems = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.reactive)(props.items);
+    const unusedViews = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.reactive)(new Map());
+    const updateTimeout = null;
+    const pool = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)([]);
+    const hoverKey = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null);
+    const ready = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(false);
+    const scroller = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null);
+    let startIndex = 0;
+    let endIndex = 0;
+    let scrollDirty = false;
+    let lastUpdateScrollPosition = 0;
+    let sortTimer = null;
+    let computedMinItemSize = null;
+    let totalSize = 0;
+    let uid = 0;
+    const sizes = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      if (props.itemSize === null) {
+        const sizes = {
+          '-1': {
+            accumulator: 0
+          }
+        };
+        const items = props.items;
+        const field = props.sizeField;
+        const minItemSize = props.minItemSize;
+        let computedMinSize = 10000;
+        let accumulator = 0;
+        let current;
+
+        for (let i = 0, l = items.length; i < l; i++) {
+          current = items[i][field] || minItemSize;
+
+          if (current < computedMinSize) {
+            computedMinSize = current;
+          }
+
+          accumulator += current;
+          sizes[i] = {
+            accumulator,
+            size: current
+          };
+        }
+
+        computedMinItemSize = computedMinSize;
+        return sizes;
+      }
+
+      return [];
+    });
+    const simpleArray = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      return props.items.length && typeof props.items[0] !== 'object';
+    });
+    const itemIndexByKey = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      const result = {};
+
+      for (let i = 0, l = props.items.length; i < l; i++) {
+        result[props.items[i][props.keyField]] = i;
+      }
+
+      return result;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(reactiveItems, () => {
+      _updateVisibleItems(true);
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(sizes, () => {
+      _updateVisibleItems(false);
+    }, {
+      deep: true
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.onMounted)(() => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.nextTick)(() => {
+        // In SSR mode, render the real number of visible items
+        _updateVisibleItems(true);
+
+        ready.value = true;
+      });
+    });
+
+    const _addView = (pool, index, item, key, type) => {
+      const nr = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.markRaw)({
+        id: uid++,
+        index,
+        used: true,
+        key,
+        type
+      });
+      const view = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.shallowReactive)({
+        item,
+        position: 0,
+        nr
+      });
+      pool.value.push(view);
+      return view;
+    };
+
+    const _unuseView = function (view) {
+      let fake = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      const _unusedViews = unusedViews;
+      const type = view.nr.type;
+
+      let unusedPool = _unusedViews.get(type);
+
+      if (!unusedPool) {
+        unusedPool = [];
+
+        _unusedViews.set(type, unusedPool);
+      }
+
+      unusedPool.push(view);
+
+      if (!fake) {
+        view.nr.used = false;
+        view.position = -9999;
+      }
+    };
+
+    const _getScroll = () => {
+      const isVertical = props.direction === 'vertical';
+      let scrollState;
+
+      if (isVertical) {
+        scrollState = {
+          start: scroller.value.scrollTop,
+          end: scroller.value.scrollTop + scroller.value.clientHeight
+        };
+      } else {
+        scrollState = {
+          start: scroller.value.scrollLeft,
+          end: scroller.value.scrollLeft + scroller.value.clientWidth
+        };
+      }
+
+      return scrollState;
+    };
+
+    const _itemsLimitError = () => {
+      setTimeout(() => {
+        // eslint-disable-next-line max-len
+        console.error('It seems the scroller element isn\'t scrolling, so it tries to render all the items at once.', 'Scroller:', scroller); // eslint-disable-next-line max-len
+
+        console.error('Make sure the scroller has a fixed height (or width) and \'overflow-y\' (or \'overflow-x\') set to \'auto\' so it can scroll correctly and only render the items visible in the scroll viewport.');
+      });
+      throw new Error('Rendered items limit reached');
+    };
+
+    const _sortViews = () => {
+      pool.value.sort((viewA, viewB) => viewA.nr.index - viewB.nr.index);
+    };
+
+    const _updateVisibleItems = function (checkItem) {
+      let checkPositionDiff = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      const itemSize = props.itemSize;
+      const minItemSize = computedMinItemSize;
+      const keyField = simpleArray.value ? null : props.keyField;
+      const items = props.items;
+      const count = items.length;
+      const _sizes = sizes.value;
+      const _views = views;
+      const _unusedViews = unusedViews;
+      const _pool = pool;
+      const _itemIndexByKey = itemIndexByKey;
+
+      let _startIndex, _endIndex;
+
+      let _totalSize;
+
+      let visibleStartIndex, visibleEndIndex;
+
+      if (!count) {
+        _startIndex = _endIndex = visibleStartIndex = visibleEndIndex = _totalSize = 0;
+      } else {
+        const scroll = _getScroll(); // Skip update if use hasn't scrolled enough
+
+
+        if (checkPositionDiff) {
+          let positionDiff = scroll.start - lastUpdateScrollPosition.value;
+          if (positionDiff < 0) positionDiff = -positionDiff;
+
+          if (itemSize === null && positionDiff < minItemSize.value || positionDiff < itemSize) {
+            return {
+              continuous: true
+            };
+          }
+        }
+
+        lastUpdateScrollPosition = scroll.start;
+        const _buffer = props.buffer;
+        scroll.start -= _buffer;
+        scroll.end += _buffer; // Variable size mode
+
+        if (itemSize === null) {
+          var _sizes3;
+
+          let h;
+          let a = 0;
+          let b = count - 1;
+          let i = ~~(count / 2);
+          let oldI; // Searching for _startIndex
+
+          do {
+            var _sizes$i, _sizes2;
+
+            oldI = i;
+            h = (_sizes$i = _sizes[i]) === null || _sizes$i === void 0 ? void 0 : _sizes$i.accumulator;
+
+            if (h < scroll.start) {
+              a = i;
+            } else if (i < count - 1 && ((_sizes2 = _sizes[i + 1]) === null || _sizes2 === void 0 ? void 0 : _sizes2.accumulator) > scroll.start) {
+              b = i;
+            }
+
+            i = ~~((a + b) / 2);
+          } while (i !== oldI);
+
+          i < 0 && (i = 0);
+          _startIndex = i; // For container style
+
+          _totalSize = (_sizes3 = _sizes[count - 1]) === null || _sizes3 === void 0 ? void 0 : _sizes3.accumulator; // Searching for _endIndex
+
+          for (_endIndex = i; _endIndex < count && ((_sizes$_endIndex = _sizes[_endIndex]) === null || _sizes$_endIndex === void 0 ? void 0 : _sizes$_endIndex.accumulator) < scroll.end; _endIndex++) {
+            var _sizes$_endIndex;
+
+            ;
+          }
+
+          if (_endIndex === -1) {
+            _endIndex = items.length - 1;
+          } else {
+            _endIndex++; // Bounds
+
+            _endIndex > count && (_endIndex = count);
+          } // search visible _startIndex
+
+
+          for (visibleStartIndex = startIndex; visibleStartIndex < count && ((_sizes$visibleStartIn = _sizes[visibleStartIndex]) === null || _sizes$visibleStartIn === void 0 ? void 0 : _sizes$visibleStartIn.accumulator) < scroll.start; visibleStartIndex++) {
+            var _sizes$visibleStartIn;
+
+            ;
+          } // search visible endIndex
+
+
+          for (visibleEndIndex = visibleStartIndex; visibleEndIndex < count && ((_sizes$visibleEndInde = _sizes[visibleEndIndex]) === null || _sizes$visibleEndInde === void 0 ? void 0 : _sizes$visibleEndInde.accumulator) < scroll.end; visibleEndIndex++) {
+            var _sizes$visibleEndInde;
+
+            ;
+          }
+        } else {
+          // Fixed size mode
+          _startIndex = ~~(scroll.start / itemSize);
+          const remainer = _startIndex % 1;
+          _startIndex -= remainer;
+          _endIndex = Math.ceil(scroll.end / itemSize);
+          visibleStartIndex = Math.max(0, Math.floor(scroll.start / itemSize));
+          visibleEndIndex = Math.floor(scroll.end / itemSize); // Bounds
+
+          _startIndex < 0 && (_startIndex = 0);
+          _endIndex > count && (_endIndex = count);
+          visibleStartIndex < 0 && (visibleStartIndex = 0);
+          visibleEndIndex > count && (visibleEndIndex = count);
+          _totalSize = Math.ceil(count / 1) * itemSize;
+        }
+      } // items limit 1000
+
+
+      if (_endIndex - _startIndex > 1000) {
+        _itemsLimitError();
+      }
+
+      totalSize = _totalSize;
+      let view;
+      const continuous = _startIndex <= endIndex && _endIndex >= _startIndex; // Unuse views that are no longer visible
+
+      if (continuous) {
+        for (let i = 0, l = _pool.value.length; i < l; i++) {
+          var _view;
+
+          view = _pool.value[i];
+
+          if ((_view = view) !== null && _view !== void 0 && _view.nr.used) {
+            // Update view item index
+            if (checkItem) {
+              view.nr.index = _itemIndexByKey[view.item[keyField]];
+            } // Check if index is still in visible range
+
+
+            if (view.nr.index == null || view.nr.index < _startIndex || view.nr.index >= _endIndex) {
+              _unuseView(view);
+            }
+          }
+        }
+      }
+
+      const unusedIndex = continuous ? null : new Map();
+      let item, type;
+      let v;
+
+      for (let i = _startIndex; i < _endIndex; i++) {
+        var _item, _sizes$i2;
+
+        item = items[i];
+        const key = keyField ? (_item = item) === null || _item === void 0 ? void 0 : _item[keyField] : item;
+
+        if (key == null) {
+          throw new Error(`Key is ${key} on item (keyField is '${keyField}')`);
+        }
+
+        view = _views.get(key);
+
+        if (!itemSize && !((_sizes$i2 = _sizes[i]) !== null && _sizes$i2 !== void 0 && _sizes$i2.size)) {
+          if (view) _unuseView(view);
+          continue;
+        }
+
+        type = item.type;
+
+        let unusedPool = _unusedViews.get(type);
+
+        let newlyUsedView = false; // No view assigned to item
+
+        if (!view) {
+          if (continuous) {
+            // Reuse existing view
+            if (unusedPool && unusedPool.length) {
+              view = unusedPool.pop();
+            } else {
+              view = _addView(_pool, i, item, key, type);
+            }
+          } else {
+            // Use existing view
+            // We don't care if they are already used
+            // because we are not in continous scrolling
+            v = unusedIndex.get(type) || 0;
+
+            if (!unusedPool || v >= unusedPool.length) {
+              view = _addView(_pool, i, item, key, type);
+
+              _unuseView(view, true);
+
+              unusedPool = _unusedViews.get(type);
+            }
+
+            view = unusedPool[v];
+            unusedIndex.set(type, v + 1);
+          } // Assign view to item
+
+
+          _views.delete(view.nr.key);
+
+          view.nr.used = true;
+          view.nr.index = i;
+          view.nr.key = key;
+          view.nr.type = type;
+
+          _views.set(key, view);
+
+          newlyUsedView = true;
+        } else {
+          // View already assigned to item
+          if (!view.nr.used) {
+            view.nr.used = true;
+            newlyUsedView = true;
+
+            if (unusedPool) {
+              const index = unusedPool.indexOf(view);
+              if (index !== -1) unusedPool.splice(index, 1);
+            }
+          }
+        } // Always set item in case it's a new object with the same key
+
+
+        view.item = item;
+
+        if (newlyUsedView) {
+          if (i === items.length - 1) emit('scroll-end');
+          if (i === 0) emit('scroll-start');
+        } // Update position
+
+
+        if (itemSize === null) {
+          var _sizes4;
+
+          view.position = (_sizes4 = _sizes[i - 1]) === null || _sizes4 === void 0 ? void 0 : _sizes4.accumulator;
+          view.offset = 0;
+        } else {
+          view.position = Math.floor(i) * itemSize;
+          view.offset = i % 1 * itemSize;
+        }
+      }
+
+      startIndex = _startIndex;
+      endIndex = _endIndex; // After the user has finished scrolling
+      // Sort views so text selection is correct
+
+      clearTimeout(sortTimer);
+      sortTimer = setTimeout(_sortViews, 300);
+      return {
+        continuous
+      };
+    };
+
+    const _scrollToPosition = position => {
+      const direction = props.direction === 'vertical' ? {
+        scroll: 'scrollTop',
+        start: 'top'
+      } : {
+        scroll: 'scrollLeft',
+        start: 'left'
+      };
+      const viewport = scroller.value;
+      const scrollDirection = direction.scroll;
+      viewport[scrollDirection] = position;
+    };
+
+    const scrollToItem = index => {
+      let scroll;
+
+      if (props.itemSize === null) {
+        var _sizes$value;
+
+        scroll = index > 0 ? (_sizes$value = sizes.value[index - 1]) === null || _sizes$value === void 0 ? void 0 : _sizes$value.accumulator : 0;
+      } else {
+        scroll = Math.floor(index) * props.itemSize;
+      }
+
+      _scrollToPosition(scroll);
+    };
+
+    const handleScroll = () => {
+      if (!scrollDirty) {
+        scrollDirty = true;
+        if (updateTimeout) return;
+
+        const requestUpdate = () => requestAnimationFrame(() => {
+          scrollDirty = false;
+
+          _updateVisibleItems(false, true);
+        });
+
+        requestUpdate();
+      }
+    };
+
+    expose({
+      scrollToItem
+    });
+    return (_ctx, _cache) => {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+        ref_key: "scroller",
+        ref: scroller,
+        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["vue-recycle-scroller", {
+          ready: ready.value,
+          [`direction-${__props.direction}`]: true
+        }]),
+        onScrollPassive: handleScroll
+      }, [((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.listTag), {
+        ref: "wrapper",
+        style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
+          [__props.direction === 'vertical' ? 'minHeight' : 'minWidth']: `${(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)(totalSize)}px`
+        }),
+        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["vue-recycle-scroller__item-wrapper", __props.listClass])
+      }, {
+        default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)(pool.value, view => {
+          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.itemTag), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+            key: view.nr.id,
+            style: ready.value ? {
+              transform: `translate${__props.direction === 'vertical' ? 'Y' : 'X'}(${view.position}px) translate${__props.direction === 'vertical' ? 'X' : 'Y'}(${view.offset}px)`,
+              width: undefined,
+              height: undefined
+            } : null,
+            class: ["vue-recycle-scroller__item-view", [__props.itemClass, {
+              hover: !__props.skipHover && hoverKey.value === view.nr.key
+            }]]
+          }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)(__props.skipHover ? {} : {
+            mouseenter: () => {
+              hoverKey.value = view.nr.key;
+            },
+            mouseleave: () => {
+              hoverKey.value = null;
+            }
+          })), {
+            default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
+              item: view.item,
+              index: view.nr.index,
+              active: view.nr.used
+            })]),
+            _: 2
+          }, 1040, ["style", "class"]);
+        }), 128))]),
+        _: 3
+      }, 8, ["style", "class"]))], 34);
+    };
+  }
+
+});
+;// CONCATENATED MODULE: ./components/scroller/modules/core-scroller.vue?vue&type=script&setup=true&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/scroller/modules/core-scroller.vue?vue&type=style&index=0&id=d2aff5e0&lang=css
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./components/scroller/modules/core-scroller.vue?vue&type=style&index=0&id=d2aff5e0&lang=css
+
+;// CONCATENATED MODULE: ./components/scroller/modules/core-scroller.vue
+
+
+
+;
+
+const core_scroller_exports_ = core_scrollervue_type_script_setup_true_lang_js;
+
+/* harmony default export */ const core_scroller = (core_scroller_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/scroller/modules/dynamic-scroller.vue?vue&type=template&id=419ca1d0
+
+function dynamic_scrollervue_type_template_id_419ca1d0_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_scroller_item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-scroller-item");
+
+  const _component_core_scroller = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("core-scroller");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_core_scroller, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    ref: "scroller",
+    items: $options.itemsWithSize,
+    "min-item-size": $props.minItemSize,
+    direction: $props.direction,
+    "key-field": "id",
+    "list-tag": $props.listTag,
+    "item-tag": $props.itemTag
+  }, _ctx.$attrs), {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref => {
+      let {
+        item: itemWithSize,
+        index,
+        active
+      } = _ref;
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_scroller_item, {
+        item: itemWithSize,
+        active: active,
+        "size-dependencies": [itemWithSize.message],
+        "data-index": index
+      }, {
+        default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)({
+          item: itemWithSize.item,
+          index,
+          active,
+          itemWithSize
+        })))]),
+        _: 2
+      }, 1032, ["item", "active", "size-dependencies", "data-index"])];
+    }),
+    _: 3
+  }, 16, ["items", "min-item-size", "direction", "list-tag", "item-tag"]);
+}
+;// CONCATENATED MODULE: ./components/scroller/modules/dynamic-scroller.vue?vue&type=template&id=419ca1d0
+
+;// 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/scroller/modules/scroller-item.vue?vue&type=script&lang=js
+
+/* harmony default export */ const scroller_itemvue_type_script_lang_js = ({
+  name: 'DtScrollerItem',
+  inject: ['vscrollData', 'vscrollParent', 'vscrollResizeObserver'],
+  props: {
+    // eslint-disable-next-line vue/require-prop-types
+    item: {
+      required: true
+    },
+    watchData: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Indicates if the view is actively used to display an item.
+     */
+    active: {
+      type: Boolean,
+      required: true
+    },
+    index: {
+      type: Number,
+      default: undefined
+    },
+    sizeDependencies: {
+      type: [Array, Object],
+      default: null
+    },
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  computed: {
+    id() {
+      if (this.vscrollData.simpleArray) return this.index; // eslint-disable-next-line no-prototype-builtins
+
+      if (this.vscrollData.keyField in this.item) return this.item[this.vscrollData.keyField];
+      throw new Error(`keyField '${this.vscrollData.keyField}' not found in your item. You should set a valid keyField prop on your Scroller`);
+    },
+
+    size() {
+      return this.vscrollData.sizes[this.id] || 0;
+    },
+
+    finalActive() {
+      return this.active && this.vscrollData.active;
+    }
+
+  },
+  watch: {
+    watchData: 'updateWatchData',
+
+    id(value, oldValue) {
+      this.$el.$_vs_id = this.id;
+
+      if (!this.size) {
+        this.onDataUpdate();
+      }
+
+      if (this.$_sizeObserved) {
+        // In case the old item had the same size, it won't trigger the ResizeObserver
+        // since we are reusing the same DOM node
+        const oldSize = this.vscrollData.sizes[oldValue];
+        const size = this.vscrollData.sizes[value];
+
+        if (oldSize != null && oldSize !== size) {
+          this.applySize(oldSize);
+        }
+      }
+    },
+
+    finalActive(value) {
+      if (!this.size) {
+        if (value) {
+          if (!this.vscrollParent.$_undefinedMap[this.id]) {
+            this.vscrollParent.$_undefinedSizes++;
+            this.vscrollParent.$_undefinedMap[this.id] = true;
+          }
+        } else {
+          if (this.vscrollParent.$_undefinedMap[this.id]) {
+            this.vscrollParent.$_undefinedSizes--;
+            this.vscrollParent.$_undefinedMap[this.id] = false;
+          }
+        }
+      }
+
+      if (this.vscrollResizeObserver) {
+        if (value) {
+          this.observeSize();
+        } else {
+          this.unobserveSize();
+        }
+      } else if (value && this.$_pendingVScrollUpdate === this.id) {
+        this.updateSize();
+      }
+    }
+
+  },
+
+  created() {
+    if (this.$isServer) return;
+    this.$_forceNextVScrollUpdate = null;
+    this.updateWatchData();
+
+    if (!this.vscrollResizeObserver) {
+      for (const k in this.sizeDependencies) {
+        this.$watch(() => this.sizeDependencies[k], this.onDataUpdate);
+      }
+    }
+  },
+
+  mounted() {
+    if (this.finalActive) {
+      this.updateSize();
+      this.observeSize();
+    }
+  },
+
+  beforeUnmount() {
+    this.unobserveSize();
+  },
+
+  methods: {
+    updateSize() {
+      if (this.finalActive) {
+        if (this.$_pendingSizeUpdate !== this.id) {
+          this.$_pendingSizeUpdate = this.id;
+          this.$_forceNextVScrollUpdate = null;
+          this.$_pendingVScrollUpdate = null;
+          this.computeSize(this.id);
+        }
+      } else {
+        this.$_forceNextVScrollUpdate = this.id;
+      }
+    },
+
+    updateWatchData() {
+      if (this.watchData && !this.vscrollResizeObserver) {
+        this.$_watchData = this.$watch('item', () => {
+          this.onDataUpdate();
+        }, {
+          deep: true
+        });
+      } else if (this.$_watchData) {
+        this.$_watchData();
+        this.$_watchData = null;
+      }
+    },
+
+    onVscrollUpdate(_ref) {
+      let {
+        force
+      } = _ref;
+
+      // If not active, sechedule a size update when it becomes active
+      if (!this.finalActive && force) {
+        this.$_pendingVScrollUpdate = this.id;
+      }
+
+      if (this.$_forceNextVScrollUpdate === this.id || force || !this.size) {
+        this.updateSize();
+      }
+    },
+
+    onDataUpdate() {
+      this.updateSize();
+    },
+
+    computeSize(id) {
+      this.$nextTick(() => {
+        if (this.id === id) {
+          const width = this.$el.offsetWidth;
+          const height = this.$el.offsetHeight;
+          this.applyWidthHeight(width, height);
+        }
+
+        this.$_pendingSizeUpdate = null;
+      });
+    },
+
+    applyWidthHeight(width, height) {
+      const size = ~~(this.vscrollParent.direction === 'vertical' ? height : width);
+
+      if (size && this.size !== size) {
+        this.applySize(size);
+      }
+    },
+
+    applySize(size) {
+      if (this.vscrollParent.$_undefinedMap[this.id]) {
+        this.vscrollParent.$_undefinedSizes--;
+        this.vscrollParent.$_undefinedMap[this.id] = undefined;
+      }
+
+      this.vscrollData.sizes[this.id] = size;
+    },
+
+    observeSize() {
+      if (!this.vscrollResizeObserver) return;
+      if (this.$_sizeObserved) return;
+      this.vscrollResizeObserver.observe(this.$el);
+      this.$el.$_vs_id = this.id;
+      this.$el.$_vs_onResize = this.onResize;
+      this.$_sizeObserved = true;
+    },
+
+    unobserveSize() {
+      if (!this.vscrollResizeObserver) return;
+      if (!this.$_sizeObserved) return;
+      this.vscrollResizeObserver.unobserve(this.$el);
+      this.$el.$_vs_onResize = undefined;
+      this.$_sizeObserved = false;
+    },
+
+    onResize(id, width, height) {
+      if (this.id === id) {
+        this.applyWidthHeight(width, height);
+      }
+    }
+
+  },
+
+  render() {
+    return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.h)(this.tag, this.$slots.default());
+  }
+
+});
+;// CONCATENATED MODULE: ./components/scroller/modules/scroller-item.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/scroller/modules/scroller-item.vue
+
+
+
+const scroller_item_exports_ = scroller_itemvue_type_script_lang_js;
+
+/* harmony default export */ const scroller_item = (scroller_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/scroller/modules/dynamic-scroller.vue?vue&type=script&lang=js
+
+
+/* harmony default export */ const dynamic_scrollervue_type_script_lang_js = ({
+  name: 'DynamicScroller',
+  components: {
+    CoreScroller: core_scroller,
+    DtScrollerItem: scroller_item
+  },
+
+  provide() {
+    if (typeof ResizeObserver !== 'undefined') {
+      this.$_resizeObserver = new ResizeObserver(entries => {
+        requestAnimationFrame(() => {
+          if (!Array.isArray(entries)) {
+            return;
+          }
+
+          for (const entry of entries) {
+            if (entry.target && entry.target.$_vs_onResize) {
+              let width, height;
+
+              if (entry.borderBoxSize) {
+                const resizeObserverSize = entry.borderBoxSize[0];
+                width = resizeObserverSize.inlineSize;
+                height = resizeObserverSize.blockSize;
+              } else {
+                // @TODO remove when contentRect is deprecated
+                width = entry.contentRect.width;
+                height = entry.contentRect.height;
+              }
+
+              entry.target.$_vs_onResize(entry.target.$_vs_id, width, height);
+            }
+          }
+        });
+      });
+    }
+
+    return {
+      vscrollData: this.vscrollData,
+      vscrollParent: this,
+      vscrollResizeObserver: this.$_resizeObserver
+    };
+  },
+
+  inheritAttrs: false,
+  props: {
+    /*
+      * The items to render.
+      * If the items are simple arrays, the index will be used as the key.
+      * If the items are objects, the keyField will be used as the key.
+     */
+    items: {
+      type: Array,
+      required: true
+    },
+
+    /*
+      * Indicates if the items are dynamic.
+      * If true, the items will be wrapped in a DtScrollerItem component.
+      * This is required for dynamic items to be able to react to changes in their size.
+     */
+    dynamic: {
+      type: Boolean,
+      default: false
+    },
+
+    /*
+      * The key field to use for the items.
+      * Only used if the items are objects.
+     */
+    keyField: {
+      type: String,
+      default: 'id'
+    },
+
+    /*
+      * The direction of the scroller.
+      * Can be either 'vertical' or 'horizontal'.
+     */
+    direction: {
+      type: String,
+      default: 'vertical',
+      validator: value => ['vertical', 'horizontal'].includes(value)
+    },
+
+    /*
+      * The tag to use for the list.
+     */
+    listTag: {
+      type: String,
+      default: 'div'
+    },
+
+    /*
+      * The tag to use for the items.
+     */
+    itemTag: {
+      type: String,
+      default: 'div'
+    },
+
+    /*
+      * Display height (or width in horizontal mode) of the items in pixels
+      * used to calculate the scroll size and position.
+      * Is required for the initial render of items in DYNAMIC size mode.
+     */
+    minItemSize: {
+      type: [Number, String]
+    }
+  },
+
+  data() {
+    return {
+      vscrollData: {
+        active: true,
+        sizes: {},
+        keyField: this.keyField,
+        simpleArray: false
+      }
+    };
+  },
+
+  computed: {
+    simpleArray() {
+      return this.items.length && typeof this.items[0] !== 'object';
+    },
+
+    itemsWithSize() {
+      const result = [];
+      const {
+        items,
+        keyField,
+        simpleArray
+      } = this;
+      const sizes = this.vscrollData.sizes;
+      const l = items.length;
+
+      for (let i = 0; i < l; i++) {
+        const item = items[i];
+        const id = simpleArray ? i : item[keyField];
+        let size = sizes[id];
+
+        if (typeof size === 'undefined' && !this.$_undefinedMap[id]) {
+          size = 0;
+        }
+
+        result.push({
+          item,
+          id,
+          size
+        });
+      }
+
+      return result;
+    }
+
+  },
+  watch: {
+    simpleArray: {
+      handler(value) {
+        this.vscrollData.simpleArray = value;
+      },
+
+      immediate: true
+    },
+
+    itemsWithSize(next, prev) {
+      const scrollTop = this.$el.scrollTop; // Calculate total diff between prev and next sizes
+      // over current scroll top. Then add it to scrollTop to
+      // avoid jumping the contents that the user is seeing.
+
+      let prevActiveTop = 0;
+      let activeTop = 0;
+      const length = Math.min(next.length, prev.length);
+
+      for (let i = 0; i < length; i++) {
+        if (prevActiveTop >= scrollTop) {
+          break;
+        }
+
+        prevActiveTop += prev[i].size || this.minItemSize;
+        activeTop += next[i].size || this.minItemSize;
+      }
+
+      const offset = activeTop - prevActiveTop;
+
+      if (offset === 0) {
+        return;
+      }
+
+      this.$el.scrollTop += offset;
+    }
+
+  },
+
+  beforeCreate() {
+    this.$_updates = [];
+    this.$_undefinedSizes = 0;
+    this.$_undefinedMap = {};
+  },
+
+  activated() {
+    this.vscrollData.active = true;
+  },
+
+  deactivated() {
+    this.vscrollData.active = false;
+  },
+
+  methods: {
+    scrollToItem(index) {
+      const scroller = this.$refs.scroller;
+      if (scroller) scroller.scrollToItem(index);
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/scroller/modules/dynamic-scroller.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/scroller/modules/dynamic-scroller.vue
+
+
+
+
+;
+const dynamic_scroller_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dynamic_scrollervue_type_script_lang_js, [['render',dynamic_scrollervue_type_template_id_419ca1d0_render]])
+
+/* harmony default export */ const dynamic_scroller = (dynamic_scroller_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/scroller/DtScroller.vue?vue&type=script&setup=true&lang=js
+
+
+
+
+/* harmony default export */ const DtScrollervue_type_script_setup_true_lang_js = ({
+  __name: 'DtScroller',
+  props: {
+    /**
+        * The direction of the scroller.
+        * @values vertical, horizontal
+       */
+    direction: {
+      type: String,
+      default: 'vertical',
+      validator: value => ['vertical', 'horizontal'].includes(value)
+    },
+
+    /**
+       * Indicates if the items need to react to changes in their size.
+       * If disabled the itemSize prop is required and you will get improved performance.
+       * If enabled the minItemSize prop is required and you
+       * will have reduced performance but the ability to reactively size list items
+        * @values true, false
+       */
+    dynamic: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+        * Display height (or width in horizontal mode) of the items in pixels
+        * used to calculate the scroll size and position.
+       *  Required if DYNAMIC is false
+       */
+    itemSize: {
+      type: Number,
+      default: null
+    },
+
+    /**
+        * The tag to use for the items.
+       */
+    itemTag: {
+      type: String,
+      default: 'div'
+    },
+
+    /**
+        * The items to render.
+        * If the items are simple arrays, the index will be used as the key.
+        * If the items are objects, the keyField will be used as the key.
+       * @example items: [ 'item1', 'item2', 'item3' ]
+       * @example items: [ { id: 1, name: 'item1' }, { id: 2, name: 'item2' }, { id: 3, name: 'item3' } ]
+       */
+    items: {
+      type: Array,
+      required: true
+    },
+
+    /**
+        * The key field to use for the items.
+        * If the items are objects, the scroller needs to be able to identify them.
+        * By default it will look for an id field on the items.
+        * This can be configured with this prop if you are using another field name.
+       */
+    keyField: {
+      type: String,
+      default: 'id'
+    },
+
+    /**
+        * The tag to use for the list.
+       */
+    listTag: {
+      type: String,
+      default: 'div'
+    },
+
+    /**
+        * Minimum size used if the height (or width in horizontal mode) of a item is unknown.
+        * Is required for the initial render of items in DYNAMIC size mode.
+       */
+    minItemSize: {
+      type: [Number, String],
+      default: null
+    },
+
+    /**
+        * The height of the scroller.
+        * Can be a number (in pixels) or a string (in CSS units).
+       */
+    scrollerHeight: {
+      type: [String, Number],
+      default: '100%'
+    },
+
+    /**
+      * The width of the scroller.
+      * Can be a number (in pixels) or a string (in CSS units).
+      */
+    scrollerWidth: {
+      type: [String, Number],
+      default: '100%'
+    }
+  },
+  emits: ['scroll-start', 'scroll-end'],
+
+  setup(__props, _ref) {
+    let {
+      expose,
+      emit: emits
+    } = _ref;
+    const props = __props;
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.provide)('emit', emits);
+    const scroller = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null);
+    const computedStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      return {
+        width: typeof props.scrollerWidth === 'number' ? `${props.scrollerWidth}px` : props.scrollerWidth,
+        height: typeof props.scrollerHeight === 'number' ? `${props.scrollerHeight}px` : props.scrollerHeight
+      };
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(props, () => {
+      validateProps();
+    }, {
+      deep: true,
+      immediate: true
+    });
+
+    function scrollToItem(index) {
+      if (scroller.value) scroller.value.scrollToItem(index);
+    }
+
+    function validateProps() {
+      if (props.dynamic && !props.minItemSize) {
+        console.error('DtScroller error: \'minItemSize\' is required on \'dynamic\' mode.');
+      }
+
+      if (!props.dynamic && !props.itemSize) {
+        console.error('DtScroller error: \'itemSize\' is required.');
+      }
+    }
+
+    expose({
+      scrollToItem
+    });
+    return (_ctx, _cache) => {
+      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.dynamic ? dynamic_scroller : core_scroller), {
+        ref_key: "scroller",
+        ref: scroller,
+        "data-qa": "dt-scroller",
+        items: __props.items,
+        "item-size": __props.itemSize,
+        "min-item-size": __props.minItemSize,
+        direction: __props.direction,
+        "key-field": "id",
+        "list-tag": __props.listTag,
+        "item-tag": __props.itemTag,
+        style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)(computedStyle)),
+        tabindex: "0",
+        onScrollStart: _cache[0] || (_cache[0] = $event => _ctx.$emit('scroll-start')),
+        onScrollEnd: _cache[1] || (_cache[1] = $event => _ctx.$emit('scroll-end'))
+      }, {
+        default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref2 => {
+          let {
+            item,
+            index,
+            active
+          } = _ref2;
+          return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)({
+            item: item,
+            index,
+            active
+          })))];
+        }),
+        _: 3
+      }, 40, ["items", "item-size", "min-item-size", "direction", "list-tag", "item-tag", "style"]);
+    };
+  }
+
+});
+;// CONCATENATED MODULE: ./components/scroller/DtScroller.vue?vue&type=script&setup=true&lang=js
+ 
+;// CONCATENATED MODULE: ./components/scroller/DtScroller.vue
+
+
+
+const DtScroller_exports_ = DtScrollervue_type_script_setup_true_lang_js;
+
+/* harmony default export */ const DtScroller = (DtScroller_exports_);
+;// CONCATENATED MODULE: ./components/scroller/index.js
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=bdafd0f4
+
+const combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_1 = ["id"];
+const combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_2 = {
+  ref: "header"
+};
+const combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_3 = ["onMouseleave", "onFocusout"];
+const combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_4 = {
+  ref: "footer"
+};
+function combobox_with_popovervue_type_template_id_bdafd0f4_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
+
+  const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
+
+  const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
+
+  const _component_dt_combobox = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-combobox");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_combobox, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    ref: "combobox",
+    loading: $props.loading,
+    label: $props.label,
+    "label-visible": $props.labelVisible,
+    size: $props.size,
+    description: $props.description,
+    "empty-list": $props.emptyList,
+    "empty-state-message": $props.emptyStateMessage,
+    "show-list": $data.isListShown,
+    "on-beginning-of-list": $props.onBeginningOfList,
+    "on-end-of-list": $props.onEndOfList,
+    "list-rendered-outside": true,
+    "list-id": $props.listId,
+    "data-qa": "dt-combobox"
+  }, $options.comboboxListeners), {
+    input: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref => {
+      let {
+        inputProps
+      } = _ref;
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+        id: $data.externalAnchor,
+        ref: "input",
+        onFocusin: _cache[0] || (_cache[0] = function () {
+          return $options.onFocusIn && $options.onFocusIn(...arguments);
+        }),
+        onKeydown: [_cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => $options.openOnArrowKeyPress($event), ["up"])), _cache[2] || (_cache[2] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)($event => $options.openOnArrowKeyPress($event), ["down"]))]
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
+        inputProps: inputProps,
+        onInput: $options.handleDisplayList
+      })], 40, combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_1)];
+    }),
+    list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref2 => {
+      let {
+        opened,
+        listProps,
+        clearHighlightIndex
+      } = _ref2;
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_popover, {
+        ref: "popover",
+        open: $data.isListShown,
+        "onUpdate:open": _cache[3] || (_cache[3] = $event => $data.isListShown = $event),
+        "hide-on-click": false,
+        "max-height": $props.maxHeight,
+        "max-width": $props.maxWidth,
+        offset: $props.popoverOffset,
+        sticky: $props.popoverSticky,
+        placement: "bottom-start",
+        "initial-focus-element": "none",
+        padding: "none",
+        role: "listbox",
+        "external-anchor": $data.externalAnchor,
+        "content-width": $props.contentWidth,
+        "content-appear": true,
+        "content-tabindex": null,
+        modal: false,
+        "auto-focus": false,
+        "append-to": $props.appendTo,
+        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+        "visually-hidden-close": _ctx.visuallyHiddenClose,
+        onOpened: opened
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
+        content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+          ref: "listWrapper",
+          class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]),
+          onMouseleave: clearHighlightIndex,
+          onFocusout: clearHighlightIndex
+        }, [$props.loading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+          key: 0
+        }, listProps)), null, 16)) : $props.emptyList && $props.emptyStateMessage ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+          key: 1
+        }, listProps, {
+          message: $props.emptyStateMessage
+        }), null, 16, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
+          key: 2,
+          listProps: listProps
+        })], 42, combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_3)]),
+        _: 2
+      }, [$data.hasSlotContent(_ctx.$slots.header) ? {
+        name: "headerContent",
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
+        key: "0"
+      } : undefined, $data.hasSlotContent(_ctx.$slots.footer) ? {
+        name: "footerContent",
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
+        key: "1"
+      } : undefined]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "append-to", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])];
+    }),
+    _: 3
+  }, 16, ["loading", "label", "label-visible", "size", "description", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-id"]);
+}
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=bdafd0f4
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
+/* eslint-disable vuejs-accessibility/no-static-element-interactions */
+
+
+
+
+
+
+
+
+
+/* harmony default export */ const combobox_with_popovervue_type_script_lang_js = ({
+  name: 'DtRecipeComboboxWithPopover',
+  components: {
+    DtCombobox: combobox,
+    DtPopover: popover,
+    ComboboxLoadingList: combobox_loading_list,
+    ComboboxEmptyList: combobox_empty_list
+  },
+  mixins: [sr_only_close_button],
+  props: {
+    /**
+     * String to use for the input label.
+     */
+    label: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Determines visibility of input label.
+     * @values true, false
+     */
+    labelVisible: {
+      type: Boolean,
+      default: true
+    },
+
+    /**
+     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`
+     * @values null, xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: null,
+      validator: t => Object.values(LABEL_SIZES).includes(t)
+    },
+
+    /**
+     * Description for the input
+     */
+    description: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Determines when to show the list element and also controls the aria-expanded attribute.
+     * Leaving this null will have the combobox trigger on input focus by default.
+     * If you set this value, the default trigger behavior will be disabled and you can
+     * control it as you need.
+     */
+    showList: {
+      type: Boolean,
+      default: null
+    },
+
+    /**
+     * Sets an ID on the list element of the component. Used by several aria attributes
+     * as well as when deriving the IDs for each item.
+     */
+    listId: {
+      type: String,
+
+      default() {
+        return getUniqueString();
+      }
+
+    },
+
+    /**
+     * Additional class for the wrapper list element.
+     */
+    listClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * A method that will be called when the selection goes past the beginning of the list.
+     */
+    onBeginningOfList: {
+      type: Function,
+      default: null
+    },
+
+    /**
+     * A method that will be called when the selection goes past the end of the list.
+     */
+    onEndOfList: {
+      type: Function,
+      default: null
+    },
+
+    /**
+     * Determines maximum height for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    maxHeight: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Determines maximum width for the popover before overflow.
+     * Possible units rem|px|%|em
+     */
+    maxWidth: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Vertical padding size around the list element.
+     */
+    padding: {
+      type: String,
+      default: 'small',
+      validator: padding => {
+        return Object.keys(DROPDOWN_PADDING_CLASSES).some(item => item === padding);
+      }
     },
 
     /**
@@ -19739,9 +21097,9 @@ const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=5a354a3a
+;// 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/buttons/callbar_button/callbar_button.vue?vue&type=template&id=26061d5a
 
-function callbar_buttonvue_type_template_id_5a354a3a_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_buttonvue_type_template_id_26061d5a_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_dt_tooltip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-tooltip");
@@ -19756,19 +21114,19 @@ function callbar_buttonvue_type_template_id_5a354a3a_render(_ctx, _cache, $props
       "icon-position": "top",
       disabled: $props.disabled,
       "aria-label": $props.ariaLabel,
-      "label-class": "d-fs-100",
+      "label-class": $options.callbarButtonTextClass,
       width: $options.buttonWidth,
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.callbarButtonClass)
     }, {
       icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")]),
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]),
       _: 3
-    }, 8, ["importance", "disabled", "aria-label", "width", "class"])]),
+    }, 8, ["importance", "disabled", "aria-label", "label-class", "width", "class"])]),
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "tooltip")]),
     _: 3
   }, 8, ["id"]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=5a354a3a
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=26061d5a
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
 
@@ -19856,6 +21214,14 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
       default: ''
     },
 
+    /**
+     * Additional class name for the button text.
+     */
+    textClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
     /*
      * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.
      */
@@ -19867,7 +21233,7 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
   },
   computed: {
     callbarButtonClass() {
-      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-px0', {
+      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-px0', 'd-fc-black-900', {
         'dt-recipe-callbar-button--circle': this.circle,
         'd-btn--icon-only': this.circle,
         'dt-recipe-callbar-button--active': this.active,
@@ -19875,6 +21241,10 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
       }];
     },
 
+    callbarButtonTextClass() {
+      return ['d-fs-100 lg:d-d-none md:d-d-none sm:d-d-none', this.textClass];
+    },
+
     buttonWidth() {
       switch (this.buttonWidthSize) {
         case 'sm':
@@ -19892,10 +21262,10 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 });
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.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]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=5a354a3a&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]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=26061d5a&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=5a354a3a&lang=less
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=26061d5a&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
 
@@ -19905,17 +21275,17 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 ;
 
 
-const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_5a354a3a_render]])
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_26061d5a_render]])
 
 /* harmony default export */ const callbar_button = (callbar_button_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/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/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=fef43d00
+;// 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/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=20c26330
 
-const callbar_button_with_popovervue_type_template_id_fef43d00_hoisted_1 = {
+const callbar_button_with_popovervue_type_template_id_20c26330_hoisted_1 = {
   class: "d-d-flex d-ai-center"
 };
-function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_button_with_popovervue_type_template_id_20c26330_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_recipe_callbar_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-recipe-callbar-button");
 
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
@@ -19924,13 +21294,14 @@ function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _
 
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", callbar_button_with_popovervue_type_template_id_fef43d00_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_recipe_callbar_button, {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", callbar_button_with_popovervue_type_template_id_20c26330_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_recipe_callbar_button, {
     "aria-label": $props.ariaLabel,
     disabled: $props.disabled,
     active: $props.active,
     danger: $props.danger,
     "button-class": $props.buttonClass,
     "button-width-size": $props.buttonWidthSize,
+    "text-class": $props.textClass,
     class: "dt-recipe--callbar-button-with-popover--main-button",
     onClick: $options.buttonClick
   }, {
@@ -19938,7 +21309,7 @@ function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _
     tooltip: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "tooltip")]),
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]),
     _: 3
-  }, 8, ["aria-label", "disabled", "active", "danger", "button-class", "button-width-size", "onClick"]), $options.showArrowButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_popover, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, 8, ["aria-label", "disabled", "active", "danger", "button-class", "button-width-size", "text-class", "onClick"]), $options.showArrowButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_popover, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0,
     id: $props.id,
     open: $data.open,
@@ -19974,7 +21345,7 @@ function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _
     _: 3
   }, 16, ["id", "open", "placement", "initial-focus-element", "show-close-button", "dialog-class", "onOpened"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=fef43d00
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=20c26330
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=script&lang=js
 
@@ -20129,6 +21500,14 @@ function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _
       default: ''
     },
 
+    /**
+     * Additional class name for the button text.
+     */
+    textClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
     /*
      * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.
      */
@@ -20199,10 +21578,10 @@ function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _
 });
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.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]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=fef43d00&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]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=20c26330&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=fef43d00&lang=less
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=20c26330&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue
 
@@ -20212,31 +21591,31 @@ function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _
 ;
 
 
-const callbar_button_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_button_with_popovervue_type_script_lang_js, [['render',callbar_button_with_popovervue_type_template_id_fef43d00_render]])
+const callbar_button_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_button_with_popovervue_type_script_lang_js, [['render',callbar_button_with_popovervue_type_template_id_20c26330_render]])
 
 /* harmony default export */ const callbar_button_with_popover = (callbar_button_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=9fe40f88
+;// 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=0720678b
 
-const contact_infovue_type_template_id_9fe40f88_hoisted_1 = {
+const contact_infovue_type_template_id_0720678b_hoisted_1 = {
   class: "d-ps-relative",
   "data-qa": "contact-info-left"
 };
-const contact_infovue_type_template_id_9fe40f88_hoisted_2 = ["src", "alt"];
-const contact_infovue_type_template_id_9fe40f88_hoisted_3 = {
+const contact_infovue_type_template_id_0720678b_hoisted_2 = ["src", "alt"];
+const contact_infovue_type_template_id_0720678b_hoisted_3 = {
   "data-qa": "contact-info-header"
 };
-const contact_infovue_type_template_id_9fe40f88_hoisted_4 = {
+const contact_infovue_type_template_id_0720678b_hoisted_4 = {
   "data-qa": "contact-info-subtitle"
 };
-const contact_infovue_type_template_id_9fe40f88_hoisted_5 = {
+const contact_infovue_type_template_id_0720678b_hoisted_5 = {
   "data-qa": "contact-info-bottom"
 };
-const contact_infovue_type_template_id_9fe40f88_hoisted_6 = {
+const contact_infovue_type_template_id_0720678b_hoisted_6 = {
   "data-qa": "contact-info-right"
 };
-function contact_infovue_type_template_id_9fe40f88_render(_ctx, _cache, $props, $setup, $data, $options) {
+function contact_infovue_type_template_id_0720678b_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
 
   const _component_dt_list_item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-list-item");
@@ -20247,48 +21626,35 @@ function contact_infovue_type_template_id_9fe40f88_render(_ctx, _cache, $props,
     "element-type": "div",
     "data-qa": "contact-info"
   }, {
-    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_1, [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
+    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_0720678b_hoisted_1, [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
       key: 0,
-      size: "lg"
+      size: $props.avatarSize,
+      presence: $props.presence
     }, {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
         "data-qa": "dt-contact-avatar",
         src: $props.avatarSrc,
         alt: $props.avatarInitials
-      }, null, 8, contact_infovue_type_template_id_9fe40f88_hoisted_2)]),
+      }, null, 8, contact_infovue_type_template_id_0720678b_hoisted_2)]),
       _: 1
-    })) : $props.avatarInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
+    }, 8, ["size", "presence"])) : $props.avatarInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
       key: 1,
-      size: "lg"
+      size: $props.avatarSize,
+      presence: $props.presence
     }, {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.avatarInitials), 1)]),
       _: 1
-    })) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.showUserStatus ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
-      key: 2,
-      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-ba', 'd-bc-white', 'd-baw2', 'd-bar2', 'd-ps-absolute', 'd-bn1', 'd-rn1', 'd-w20p', 'd-h20p', $data.USER_STATUS_COLOR_MODIFIERS[$props.userStatusColor]]),
-      "data-qa": "contact-info-user-status"
-    }, "   ", 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]),
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")])]),
-    subtitle: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")])]),
-    bottom: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])]),
-    right: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])]),
+    }, 8, ["size", "presence"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]),
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_0720678b_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")])]),
+    subtitle: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_0720678b_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")])]),
+    bottom: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_0720678b_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])]),
+    right: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_0720678b_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])]),
     _: 3
   }, 8, ["id", "role"]);
 }
-;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=9fe40f88
-
-;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
-const USER_STATUS_COLOR_MODIFIERS = {
-  none: '',
-  green: 'd-bgc-green-300',
-  gold: 'd-bgc-gold-200',
-  red: 'd-bgc-red-200'
-};
-/* harmony default export */ const contact_info_constants = ({
-  USER_STATUS_COLOR_MODIFIERS
-});
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=script&lang=js
+;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=0720678b
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=script&lang=js
 
 
 
@@ -20345,25 +21711,24 @@ const USER_STATUS_COLOR_MODIFIERS = {
 
     /**
      * Status color of user from contact.
+     * The size of the avatar
+     * @values xs, sm, md, lg, xl
      */
-    userStatusColor: {
+    avatarSize: {
       type: String,
-      default: 'none',
-      validator: color => Object.keys(USER_STATUS_COLOR_MODIFIERS).includes(color)
-    }
-  },
-
-  data() {
-    return {
-      USER_STATUS_COLOR_MODIFIERS: USER_STATUS_COLOR_MODIFIERS
-    };
-  },
+      default: 'lg'
+    },
 
-  computed: {
-    showUserStatus() {
-      return this.userStatusColor !== 'none';
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     * @values null, busy, away, offline, active
+     */
+    presence: {
+      type: String,
+      default: null
     }
-
   }
 });
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=script&lang=js
@@ -20374,12 +21739,11 @@ const USER_STATUS_COLOR_MODIFIERS = {
 
 
 ;
-const contact_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_infovue_type_script_lang_js, [['render',contact_infovue_type_template_id_9fe40f88_render]])
+const contact_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_infovue_type_script_lang_js, [['render',contact_infovue_type_template_id_0720678b_render]])
 
 /* harmony default export */ const contact_info = (contact_info_exports_);
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/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/notices/top_banner_info/top_banner_info.vue?vue&type=template&id=ca4ec176
 
 const top_banner_infovue_type_template_id_ca4ec176_hoisted_1 = {
@@ -20460,19 +21824,19 @@ const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(to
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-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/cards/ivr_node/ivr_node.vue?vue&type=template&id=19695402
+;// 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/cards/ivr_node/ivr_node.vue?vue&type=template&id=61018687
 
-const ivr_nodevue_type_template_id_19695402_hoisted_1 = {
+const ivr_nodevue_type_template_id_61018687_hoisted_1 = {
   class: "d-d-flex d-ai-center"
 };
-const ivr_nodevue_type_template_id_19695402_hoisted_2 = {
+const ivr_nodevue_type_template_id_61018687_hoisted_2 = {
   class: "d-fs-200 d-fw-bold",
   "data-qa": "ivr-node-label"
 };
-const ivr_nodevue_type_template_id_19695402_hoisted_3 = {
+const ivr_nodevue_type_template_id_61018687_hoisted_3 = {
   class: "d-w164"
 };
-function ivr_nodevue_type_template_id_19695402_render(_ctx, _cache, $props, $setup, $data, $options) {
+function ivr_nodevue_type_template_id_61018687_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");
@@ -20486,16 +21850,18 @@ function ivr_nodevue_type_template_id_19695402_render(_ctx, _cache, $props, $set
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.nodeListeners, true)), [$props.dtmfKey ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
     "data-qa": "dt-top-connector-dtmf",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-zi-base1 d-ai-center d-jc-center d-d-flex d-w24 d-h24 d-bar-circle d-bc-purple-600 d-bgc-purple-600 d-mbn12 d-fc-white d-fs-200", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["ivr-connector d-w24 d-h24 d-bar-circle d-mbn12 d-fc-white d-fs-200", {
       'd-mbn16': $props.isSelected
     }])
-  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.dtmfKey), 3)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
-    key: 1,
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.dtmfKey), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.$slots.connector ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "connector", {
+    key: 1
+  }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.dtmfKey && !_ctx.$slots.connector ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+    key: 2,
     "data-qa": "dt-top-connector",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-zi-base1 d-d-flex d-w8 d-h8 d-bar-circle d-bc-purple-600 d-bgc-purple-600 d-mbn4", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["ivr-connector d-w8 d-h8 d-bar-circle d-mbn4", {
       'd-mbn8': $props.isSelected
     }])
-  }, null, 2)), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_card, {
+  }, null, 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_card, {
     "content-class": "d-bt d-bc-black-300 d-px12 d-pt8 d-pb12",
     "container-class": ['d-w100p', {
       'd-ba d-bar8 d-baw4': $props.isSelected
@@ -20504,7 +21870,7 @@ function ivr_nodevue_type_template_id_19695402_render(_ctx, _cache, $props, $set
       'd-btr4': !$props.isSelected
     }]
   }, {
-    header: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_19695402_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+    header: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_61018687_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
       "aria-label": $props.nodeType,
       importance: "clear",
       "data-qa": "dt-ivr-node-icon"
@@ -20517,7 +21883,7 @@ function ivr_nodevue_type_template_id_19695402_render(_ctx, _cache, $props, $set
         }])
       }, null, 8, ["name", "class"])]),
       _: 1
-    }, 8, ["aria-label"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", ivr_nodevue_type_template_id_19695402_hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.nodeLabel), 1)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_dropdown, {
+    }, 8, ["aria-label"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", ivr_nodevue_type_template_id_61018687_hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.nodeLabel), 1)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_dropdown, {
       open: $data.isOpen,
       "onUpdate:open": _cache[0] || (_cache[0] = $event => $data.isOpen = $event),
       placement: "bottom"
@@ -20538,7 +21904,7 @@ function ivr_nodevue_type_template_id_19695402_render(_ctx, _cache, $props, $set
         let {
           close
         } = _ref;
-        return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_19695402_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "menuItems", {
+        return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_61018687_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "menuItems", {
           close: close
         })])];
       }),
@@ -20548,7 +21914,7 @@ function ivr_nodevue_type_template_id_19695402_render(_ctx, _cache, $props, $set
     _: 3
   }, 8, ["container-class", "header-class"])], 16);
 }
-;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=19695402
+;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=61018687
 
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node_constants.js
 const IVR_NODE_PROMPT_MENU = 'promptmenu';
@@ -20706,10 +22072,10 @@ const IVR_NODE_COLOR_MAPPING = {
 });
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.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]!./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=19695402&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]!./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=61018687&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=19695402&lang=less
+;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=61018687&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue
 
@@ -20719,7 +22085,7 @@ const IVR_NODE_COLOR_MAPPING = {
 ;
 
 
-const ivr_node_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ivr_nodevue_type_script_lang_js, [['render',ivr_nodevue_type_template_id_19695402_render]])
+const ivr_node_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ivr_nodevue_type_script_lang_js, [['render',ivr_nodevue_type_template_id_61018687_render]])
 
 /* harmony default export */ const ivr_node = (ivr_node_exports_);
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/index.js
@@ -20809,35 +22175,49 @@ const grouped_chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(group
 /* harmony default export */ const grouped_chip = (grouped_chip_exports_);
 ;// CONCATENATED MODULE: ./recipes/chips/grouped_chip/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/leftbar/general_row/general_row.vue?vue&type=template&id=06ebf262
+;// 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/leftbar/general_row/general_row.vue?vue&type=template&id=46f0cd86
 
-const general_rowvue_type_template_id_06ebf262_hoisted_1 = {
+const general_rowvue_type_template_id_46f0cd86_hoisted_1 = ["aria-label", "title"];
+const general_rowvue_type_template_id_46f0cd86_hoisted_2 = {
   class: "dt-leftbar-row__alpha"
 };
-const general_rowvue_type_template_id_06ebf262_hoisted_2 = {
+const general_rowvue_type_template_id_46f0cd86_hoisted_3 = {
+  key: 0,
+  class: "dt-leftbar-row__is-typing"
+};
+
+const general_rowvue_type_template_id_46f0cd86_hoisted_4 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", null, null, -1);
+
+const general_rowvue_type_template_id_46f0cd86_hoisted_5 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", null, null, -1);
+
+const general_rowvue_type_template_id_46f0cd86_hoisted_6 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", null, null, -1);
+
+const general_rowvue_type_template_id_46f0cd86_hoisted_7 = [general_rowvue_type_template_id_46f0cd86_hoisted_4, general_rowvue_type_template_id_46f0cd86_hoisted_5, general_rowvue_type_template_id_46f0cd86_hoisted_6];
+const general_rowvue_type_template_id_46f0cd86_hoisted_8 = {
   class: "dt-leftbar-row__label"
 };
-const general_rowvue_type_template_id_06ebf262_hoisted_3 = {
+const _hoisted_9 = {
   class: "dt-leftbar-row__omega"
 };
-const general_rowvue_type_template_id_06ebf262_hoisted_4 = {
-  key: 0,
+const _hoisted_10 = {
   class: "dt-leftbar-row__dnd"
 };
-const general_rowvue_type_template_id_06ebf262_hoisted_5 = {
+const _hoisted_11 = {
   key: 1,
   class: "dt-leftbar-row__active-voice"
 };
-const general_rowvue_type_template_id_06ebf262_hoisted_6 = {
+const _hoisted_12 = {
   key: 0,
   class: "dt-leftbar-row__action",
   "data-qa": "dt-leftbar-row-action"
 };
-function general_rowvue_type_template_id_06ebf262_render(_ctx, _cache, $props, $setup, $data, $options) {
+function general_rowvue_type_template_id_46f0cd86_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_recipe_leftbar_general_row_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-recipe-leftbar-general-row-icon");
 
   const _component_dt_emoji_text_wrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-emoji-text-wrapper");
 
+  const _component_dt_tooltip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-tooltip");
+
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_badge = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-badge");
@@ -20849,47 +22229,74 @@ function general_rowvue_type_template_id_06ebf262_render(_ctx, _cache, $props, $
     "data-qa": "dt-leftbar-row"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("button", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     class: "dt-leftbar-row__primary",
-    "data-qa": "dt-leftbar-row-link"
-  }, _ctx.$attrs), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", general_rowvue_type_template_id_06ebf262_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "left", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_recipe_leftbar_general_row_icon, {
+    "data-qa": "dt-leftbar-row-link",
+    "aria-label": $options.getAriaLabel,
+    title: $props.description
+  }, _ctx.$attrs), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", general_rowvue_type_template_id_46f0cd86_hoisted_2, [$props.isTyping ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", general_rowvue_type_template_id_46f0cd86_hoisted_3, general_rowvue_type_template_id_46f0cd86_hoisted_7)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "left", {
+    key: 1
+  }, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_recipe_leftbar_general_row_icon, {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)({
+      'd-o50': $props.isTyping
+    }),
     type: $options.getIcon,
     color: $props.color,
     "data-qa": "dt-leftbar-row-icon"
-  }, null, 8, ["type", "color"])])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", general_rowvue_type_template_id_06ebf262_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "label", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_emoji_text_wrapper, {
+  }, null, 8, ["class", "type", "color"])])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", general_rowvue_type_template_id_46f0cd86_hoisted_8, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "label", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_emoji_text_wrapper, {
     class: "dt-leftbar-row__description",
     "data-qa": "dt-leftbar-row-description"
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.description), 1)]),
     _: 1
-  })])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", general_rowvue_type_template_id_06ebf262_hoisted_3, [$props.dndText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", general_rowvue_type_template_id_06ebf262_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.dndText), 1)) : $props.activeVoiceChat ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", general_rowvue_type_template_id_06ebf262_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+  })])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", _hoisted_9, [$props.dndText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_tooltip, {
+    key: 0,
+    placement: "top",
+    message: $props.dndTextTooltip
+  }, {
+    anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", _hoisted_10, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.dndText), 1)]),
+    _: 1
+  }, 8, ["message"])) : $props.activeVoiceChat ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_11, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
     size: "300",
     name: "activity"
-  })])) : !!$props.unreadCount && $props.hasUnreads ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_badge, {
+  })])) : !!$props.unreadCount && $props.hasUnreads ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_tooltip, {
     key: 2,
-    kind: "count",
-    type: "bulletin",
-    "data-qa": "dt-leftbar-row-unread-badge"
+    message: $props.unreadCountTooltip,
+    placement: "top"
   }, {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.unreadCount), 1)]),
+    anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_badge, {
+      kind: "count",
+      type: "bulletin",
+      "data-qa": "dt-leftbar-row-unread-badge"
+    }, {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.unreadCount), 1)]),
+      _: 1
+    })]),
     _: 1
-  })) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])], 16), $props.hasCallButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", general_rowvue_type_template_id_06ebf262_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
-    class: "dt-leftbar-row__action-button",
-    "data-qa": "dt-leftbar-row-action-call-button",
-    circle: "",
-    size: "xs",
-    kind: "inverted",
-    onFocus: _cache[0] || (_cache[0] = $event => $data.actionFocused = true),
-    onBlur: _cache[1] || (_cache[1] = $event => $data.actionFocused = false),
-    onMouseout: _cache[2] || (_cache[2] = $event => $data.actionFocused = false),
-    onClick: _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => _ctx.$emit('call', $event), ["stop"]))
+  }, 8, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])], 16, general_rowvue_type_template_id_46f0cd86_hoisted_1), $props.hasCallButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_12, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_tooltip, {
+    message: $props.callButtonTooltip,
+    placement: "top"
   }, {
-    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
-      name: "phone",
-      size: "200"
-    })]),
+    anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+      class: "dt-leftbar-row__action-button",
+      "data-qa": "dt-leftbar-row-action-call-button",
+      circle: "",
+      size: "xs",
+      kind: "inverted",
+      "aria-label": $props.callButtonTooltip,
+      onFocus: _cache[0] || (_cache[0] = $event => $data.actionFocused = true),
+      onBlur: _cache[1] || (_cache[1] = $event => $data.actionFocused = false),
+      onMouseleave: _cache[2] || (_cache[2] = $event => $data.actionFocused = false),
+      onClick: _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => _ctx.$emit('call', $event), ["stop"]))
+    }, {
+      icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+        name: "phone",
+        size: "200"
+      })]),
+      _: 1
+    }, 8, ["aria-label"])]),
     _: 1
-  })])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
+  }, 8, ["message"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
 }
-;// CONCATENATED MODULE: ./recipes/leftbar/general_row/general_row.vue?vue&type=template&id=06ebf262
+;// CONCATENATED MODULE: ./recipes/leftbar/general_row/general_row.vue?vue&type=template&id=46f0cd86
 
 ;// CONCATENATED MODULE: ./recipes/leftbar/general_row/general_row_constants.js
 const LEFTBAR_GENERAL_ROW_TYPES = {
@@ -20899,6 +22306,9 @@ const LEFTBAR_GENERAL_ROW_TYPES = {
   THREADS: 'threads',
   LOCKED_CHANNEL: 'locked channel',
   CONTACT_CENTER: 'contact center',
+  QUICK_START: 'quick start',
+  COACHING_GROUP: 'coaching group',
+  COACHING_CENTER: 'coaching center',
   DIALBOT: 'dialbot',
   ASSIGNED: 'assigned',
   DIGITAL: 'digital'
@@ -20909,6 +22319,9 @@ const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {
   [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: 'hash',
   [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: 'thread',
   [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: 'lock',
+  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: 'sparkle',
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: 'users',
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: 'external-link',
   'locked channel unread': 'lock-filled',
   'channel unread': 'hash-bold',
   [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: 'at-sign',
@@ -21441,12 +22854,12 @@ const emoji_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(emojivue_typ
 const emoji_text_wrapper_exports_ = emoji_text_wrappervue_type_script_lang_js;
 
 /* harmony default export */ const emoji_text_wrapper = (emoji_text_wrapper_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]!./recipes/leftbar/general_row/leftbar_general_row_icon.vue?vue&type=template&id=06ed62b0
+;// 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/leftbar/general_row/leftbar_general_row_icon.vue?vue&type=template&id=27d28559
 
-function leftbar_general_row_iconvue_type_template_id_06ed62b0_render(_ctx, _cache, $props, $setup, $data, $options) {
+function leftbar_general_row_iconvue_type_template_id_27d28559_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_icon_dialpad_glyph = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-dialpad-glyph");
+  const _component_icon_dialbot = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-dialbot");
 
   return $options.isIconType ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_icon, {
     key: 0,
@@ -21458,45 +22871,43 @@ function leftbar_general_row_iconvue_type_template_id_06ed62b0_render(_ctx, _cac
   }, null, 2)) : $options.isDialbotType ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 2,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.dialbotClasses)
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_dialpad_glyph, {
-    class: "d-svg--size18",
-    color: "white"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_dialbot, {
+    class: "d-svg--size24"
   })], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true);
 }
-;// CONCATENATED MODULE: ./recipes/leftbar/general_row/leftbar_general_row_icon.vue?vue&type=template&id=06ed62b0
+;// CONCATENATED MODULE: ./recipes/leftbar/general_row/leftbar_general_row_icon.vue?vue&type=template&id=27d28559
 
-;// 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/IconDialpadGlyph.vue?vue&type=template&id=85d2b6f4
+;// 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/IconDialbot.vue?vue&type=template&id=afc48fb0
 
 
-const IconDialpadGlyphvue_type_template_id_85d2b6f4_hoisted_1 = {
+const IconDialbotvue_type_template_id_afc48fb0_hoisted_1 = {
   "aria-hidden": "true",
   focusable: "false",
-  "aria-label": "Dialpad Glyph",
-  class: "d-svg d-svg--system d-svg__dialpadGlyph",
-  viewBox: "0 0 24 24"
+  "aria-label": "Dialbot",
+  class: "d-svg d-svg--native d-svg__dialbot",
+  width: "358",
+  height: "358",
+  viewBox: "0 0 358 358",
+  fill: "none"
 }
-const IconDialpadGlyphvue_type_template_id_85d2b6f4_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
-  "fill-rule": "evenodd",
-  "clip-rule": "evenodd",
-  d: "M12.025 11.197V4.18a.077.077 0 0 0-.132-.053L8.91 7.204a5.095 5.095 0 0 0-7.08 4.693 5.095 5.095 0 0 0 5.096 5.094 5.096 5.096 0 0 0 5.049-4.394v7.019c0 .069.083.102.131.053l2.982-3.079c.61.258 1.28.4 1.984.4a5.095 5.095 0 0 0 5.096-5.093 5.095 5.095 0 0 0-5.096-5.093 5.096 5.096 0 0 0-5.048 4.393Z"
-}, null, -1)
-const IconDialpadGlyphvue_type_template_id_85d2b6f4_hoisted_3 = [
-  IconDialpadGlyphvue_type_template_id_85d2b6f4_hoisted_2
+const IconDialbotvue_type_template_id_afc48fb0_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createStaticVNode)("<circle cx=\"179\" cy=\"179\" r=\"179\" fill=\"url(#paint0_linear_1957_89480)\"></circle><path d=\"M179 268.5v-11.933V268.5Zm86.517 0v11.933h19.308l-8.635-17.27-10.673 5.337Zm-16.73-33.459-9.3-7.478-4.797 5.967 3.424 6.848 10.673-5.337ZM179 101.433c42.839 0 77.567 34.728 77.567 77.567h23.866c0-56.02-45.413-101.433-101.433-101.433v23.866ZM101.433 179c0-42.839 34.728-77.567 77.567-77.567V77.567C122.98 77.567 77.567 122.98 77.567 179h23.866ZM179 256.567c-42.839 0-77.567-34.728-77.567-77.567H77.567c0 56.02 45.413 101.433 101.433 101.433v-23.866Zm86.517 0H179v23.866h86.517v-23.866Zm-27.403-16.189 16.729 33.459 21.347-10.674-16.729-33.459-21.347 10.674ZM256.567 179c0 18.396-6.39 35.268-17.08 48.563l18.6 14.955c13.975-17.38 22.346-39.488 22.346-63.518h-23.866Z\" fill=\"white\"></path><path d=\"M226.733 202.867c-6.527 5.701-13.942 10.11-22.243 13.226-8.302 3.116-16.781 4.674-25.437 4.674-8.727 0-17.241-1.558-25.543-4.674-8.301-3.116-15.716-7.525-22.243-13.226v-11.933c4.399 2.651 9.365 4.939 14.9 6.861a112.143 112.143 0 0 0 16.816 4.674c5.747 1.127 11.104 1.691 16.07 1.691 5.038 0 10.395-.564 16.071-1.691a112.209 112.209 0 0 0 16.816-4.674c5.534-1.922 10.465-4.21 14.793-6.861v11.933Z\" fill=\"white\"></path><defs><linearGradient id=\"paint0_linear_1957_89480\" x1=\"0\" y1=\"0\" x2=\"358\" y2=\"358\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#7C52FF\"></stop><stop offset=\"1\" stop-color=\"#F9008E\"></stop></linearGradient></defs>", 4)
+const IconDialbotvue_type_template_id_afc48fb0_hoisted_6 = [
+  IconDialbotvue_type_template_id_afc48fb0_hoisted_2
 ]
 
-function IconDialpadGlyphvue_type_template_id_85d2b6f4_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", IconDialpadGlyphvue_type_template_id_85d2b6f4_hoisted_1, IconDialpadGlyphvue_type_template_id_85d2b6f4_hoisted_3))
+function IconDialbotvue_type_template_id_afc48fb0_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", IconDialbotvue_type_template_id_afc48fb0_hoisted_1, IconDialbotvue_type_template_id_afc48fb0_hoisted_6))
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconDialpadGlyph.vue?vue&type=template&id=85d2b6f4
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconDialbot.vue?vue&type=template&id=afc48fb0
 
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconDialpadGlyph.vue
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconDialbot.vue
 
 const script = {}
 
 ;
-const IconDialpadGlyph_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(script, [['render',IconDialpadGlyphvue_type_template_id_85d2b6f4_render]])
+const IconDialbot_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(script, [['render',IconDialbotvue_type_template_id_afc48fb0_render]])
 
-/* harmony default export */ const IconDialpadGlyph = (IconDialpadGlyph_exports_);
+/* harmony default export */ const IconDialbot = (IconDialbot_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]!./recipes/leftbar/general_row/leftbar_general_row_icon.vue?vue&type=script&lang=js
 
 
@@ -21505,7 +22916,7 @@ const IconDialpadGlyph_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(s
   name: 'DtRecipeLeftbarGeneralRowIcon',
   components: {
     DtIcon: icon,
-    IconDialpadGlyph: IconDialpadGlyph
+    IconDialbot: IconDialbot
   },
   props: {
     type: {
@@ -21539,7 +22950,7 @@ const IconDialpadGlyph_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(s
     },
 
     dialbotClasses() {
-      return ['d-bar-circle', 'd-bgc-purple-400', 'd-w24', 'd-h24', 'd-d-flex', 'd-ai-center', 'd-jc-center'];
+      return ['d-w24', 'd-h24', 'd-d-flex', 'd-ai-center', 'd-jc-center'];
     }
 
   }
@@ -21552,7 +22963,7 @@ const IconDialpadGlyph_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(s
 
 
 ;
-const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(leftbar_general_row_iconvue_type_script_lang_js, [['render',leftbar_general_row_iconvue_type_template_id_06ed62b0_render]])
+const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(leftbar_general_row_iconvue_type_script_lang_js, [['render',leftbar_general_row_iconvue_type_template_id_27d28559_render]])
 
 /* harmony default export */ const leftbar_general_row_icon = (leftbar_general_row_icon_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]!./recipes/leftbar/general_row/general_row.vue?vue&type=script&lang=js
@@ -21563,6 +22974,7 @@ const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default
 
 
 
+
 /* harmony default export */ const general_rowvue_type_script_lang_js = ({
   name: 'DtRecipeGeneralRow',
   components: {
@@ -21570,6 +22982,7 @@ const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default
     DtBadge: badge,
     DtIcon: icon,
     DtButton: button_button,
+    DtTooltip: tooltip,
     DtRecipeLeftbarGeneralRowIcon: leftbar_general_row_icon
   },
   inheritAttrs: false,
@@ -21587,13 +23000,22 @@ const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default
     },
 
     /**
-     * Text displayed next to the icon
+     * Will be read out by a screen reader upon focus of this row. If not defined "description" will be read.
      */
-    description: {
+    ariaLabel: {
       type: String,
       default: ''
     },
 
+    /**
+     * Text displayed next to the icon. Required. Even if you are overriding this field using the label slot
+     * you still must input this as it will be displayed as the "title" attribute for the row.
+     */
+    description: {
+      type: String,
+      required: true
+    },
+
     /**
      * Determines the color of the contact center icon
      */
@@ -21622,6 +23044,14 @@ const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default
       default: null
     },
 
+    /**
+     * Text shown when the unread count is hovered.
+     */
+    unreadCountTooltip: {
+      type: String,
+      default: ''
+    },
+
     /**
      * Determines if the row is selected
      */
@@ -21655,12 +23085,36 @@ const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default
       default: ''
     },
 
+    /**
+     * Text shown in tooltip when you hover the dndText
+     */
+    dndTextTooltip: {
+      type: String,
+      default: ''
+    },
+
     /**
      * Whether the row should have a call button. Usually only applicable to individual contact rows.
      */
     hasCallButton: {
       type: Boolean,
       default: false
+    },
+
+    /**
+     * Text shown when the call button is hovered.
+     */
+    callButtonTooltip: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Shows an "is typing" animation over the avatar when true.
+     */
+    isTyping: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
@@ -21705,6 +23159,10 @@ const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default
 
     generalRowListeners() {
       return extractVueListeners(this.$attrs);
+    },
+
+    getAriaLabel() {
+      return this.ariaLabel ? this.ariaLabel : `${this.description} ${this.unreadCountTooltip} ${this.dndTextTooltip}`;
     }
 
   },
@@ -21730,10 +23188,10 @@ const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default
 });
 ;// CONCATENATED MODULE: ./recipes/leftbar/general_row/general_row.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]!./recipes/leftbar/general_row/general_row.vue?vue&type=style&index=0&id=06ebf262&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]!./recipes/leftbar/general_row/general_row.vue?vue&type=style&index=0&id=46f0cd86&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/leftbar/general_row/general_row.vue?vue&type=style&index=0&id=06ebf262&lang=less
+;// CONCATENATED MODULE: ./recipes/leftbar/general_row/general_row.vue?vue&type=style&index=0&id=46f0cd86&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/leftbar/general_row/general_row.vue
 
@@ -21743,41 +23201,45 @@ const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default
 ;
 
 
-const general_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(general_rowvue_type_script_lang_js, [['render',general_rowvue_type_template_id_06ebf262_render]])
+const general_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(general_rowvue_type_script_lang_js, [['render',general_rowvue_type_template_id_46f0cd86_render]])
 
 /* harmony default export */ const general_row = (general_row_exports_);
 ;// CONCATENATED MODULE: ./recipes/leftbar/general_row/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/leftbar/group_row/group_row.vue?vue&type=template&id=29f5cb33
+;// 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/leftbar/group_row/group_row.vue?vue&type=template&id=af6d6b56
 
-const group_rowvue_type_template_id_29f5cb33_hoisted_1 = ["src", "alt"];
-function group_rowvue_type_template_id_29f5cb33_render(_ctx, _cache, $props, $setup, $data, $options) {
+const group_rowvue_type_template_id_af6d6b56_hoisted_1 = ["src", "alt"];
+function group_rowvue_type_template_id_af6d6b56_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
 
   const _component_dt_recipe_general_row = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-recipe-general-row");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_recipe_general_row, {
     description: $props.names,
+    "aria-label": `${$props.groupCountText} ${$props.names}`,
     "unread-count": $props.unreadCount,
     "has-unreads": $props.hasUnreads,
-    selected: $props.selected
+    "unread-count-tooltip": $props.unreadCountTooltip,
+    selected: $props.selected,
+    "is-typing": $props.isTyping
   }, {
     left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_avatar, {
       initials: $props.avatarInitials,
       group: $props.groupCount
     }, {
-      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("img", {
+        key: 0,
         "data-qa": "dt-avatar-image",
         src: $props.avatarSrc,
         alt: $props.avatarInitials
-      }, null, 8, group_rowvue_type_template_id_29f5cb33_hoisted_1)]),
+      }, null, 8, group_rowvue_type_template_id_af6d6b56_hoisted_1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
       _: 1
     }, 8, ["initials", "group"])]),
     _: 1
-  }, 8, ["description", "unread-count", "has-unreads", "selected"]);
+  }, 8, ["description", "aria-label", "unread-count", "has-unreads", "unread-count-tooltip", "selected", "is-typing"]);
 }
-;// CONCATENATED MODULE: ./recipes/leftbar/group_row/group_row.vue?vue&type=template&id=29f5cb33
+;// CONCATENATED MODULE: ./recipes/leftbar/group_row/group_row.vue?vue&type=template&id=af6d6b56
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/group_row/group_row.vue?vue&type=script&lang=js
 
@@ -21817,12 +23279,20 @@ function group_rowvue_type_template_id_29f5cb33_render(_ctx, _cache, $props, $se
       required: true
     },
 
+    /**
+     * Screen reader will read out the number of users in the group using this text. Ex: "2 users"
+     */
+    groupCountText: {
+      type: String,
+      default: ''
+    },
+
     /**
      * Names of the group members
      */
     names: {
       type: String,
-      default: ''
+      required: true
     },
 
     /**
@@ -21833,6 +23303,14 @@ function group_rowvue_type_template_id_29f5cb33_render(_ctx, _cache, $props, $se
       default: null
     },
 
+    /**
+     * Text shown when the unread count is hovered.
+     */
+    unreadCountTooltip: {
+      type: String,
+      default: null
+    },
+
     /**
      * Styles the row with an increased font weight to convey it has unreads. This must be true to see
      * the unread count badge.
@@ -21848,6 +23326,14 @@ function group_rowvue_type_template_id_29f5cb33_render(_ctx, _cache, $props, $se
     selected: {
       type: Boolean,
       default: false
+    },
+
+    /**
+     * Shows an "is typing" animation over the avatar when true.
+     */
+    isTyping: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
@@ -21867,18 +23353,18 @@ function group_rowvue_type_template_id_29f5cb33_render(_ctx, _cache, $props, $se
 
 
 ;
-const group_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(group_rowvue_type_script_lang_js, [['render',group_rowvue_type_template_id_29f5cb33_render]])
+const group_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(group_rowvue_type_script_lang_js, [['render',group_rowvue_type_template_id_af6d6b56_render]])
 
 /* harmony default export */ const group_row = (group_row_exports_);
 ;// CONCATENATED MODULE: ./recipes/leftbar/group_row/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/leftbar/contact_row/contact_row.vue?vue&type=template&id=8a190578
+;// 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/leftbar/contact_row/contact_row.vue?vue&type=template&id=69299a5d
 
-const contact_rowvue_type_template_id_8a190578_hoisted_1 = ["src", "alt"];
-const contact_rowvue_type_template_id_8a190578_hoisted_2 = {
+const contact_rowvue_type_template_id_69299a5d_hoisted_1 = ["src", "alt"];
+const contact_rowvue_type_template_id_69299a5d_hoisted_2 = {
   class: "dt-leftbar-row__status"
 };
-function contact_rowvue_type_template_id_8a190578_render(_ctx, _cache, $props, $setup, $data, $options) {
+function contact_rowvue_type_template_id_69299a5d_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_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
@@ -21889,10 +23375,14 @@ function contact_rowvue_type_template_id_8a190578_render(_ctx, _cache, $props, $
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_recipe_general_row, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     "unread-count": $props.unreadCount,
+    description: `${$props.name} ${$props.presenceText} ${$props.userStatus}`,
     "has-unreads": $props.hasUnreads,
     selected: $props.selected,
     "has-call-button": true,
-    muted: $props.muted
+    muted: $props.muted,
+    "is-typing": $props.isTyping,
+    "call-button-tooltip": $props.callButtonTooltip,
+    "unread-count-tooltip": $props.unreadCountTooltip
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.contactRowListeners), {
     onCall: _cache[0] || (_cache[0] = $event => _ctx.$emit('call', $event))
   }), {
@@ -21906,7 +23396,7 @@ function contact_rowvue_type_template_id_8a190578_render(_ctx, _cache, $props, $
         "data-qa": "dt-avatar-image",
         src: $props.avatarSrc,
         alt: $props.name
-      }, null, 8, contact_rowvue_type_template_id_8a190578_hoisted_1)) : $props.noInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_icon, {
+      }, null, 8, contact_rowvue_type_template_id_69299a5d_hoisted_1)) : $props.noInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_icon, {
         key: 1,
         name: "user",
         size: "200"
@@ -21922,7 +23412,7 @@ function contact_rowvue_type_template_id_8a190578_render(_ctx, _cache, $props, $
     }, {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.name), 1)]),
       _: 1
-    }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_rowvue_type_template_id_8a190578_hoisted_2, [$props.presenceText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+    }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_rowvue_type_template_id_69299a5d_hoisted_2, [$props.presenceText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
       key: 0,
       "data-qa": "dt-leftbar-row-presence-text",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['dt-leftbar-row__meta-context', $options.presenceColorClass])
@@ -21937,9 +23427,9 @@ function contact_rowvue_type_template_id_8a190578_render(_ctx, _cache, $props, $
       _: 1
     })) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]),
     _: 1
-  }, 16, ["unread-count", "has-unreads", "selected", "muted"]);
+  }, 16, ["unread-count", "description", "has-unreads", "selected", "muted", "is-typing", "call-button-tooltip", "unread-count-tooltip"]);
 }
-;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=8a190578
+;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=69299a5d
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/contact_row/contact_row.vue?vue&type=script&lang=js
 
@@ -21947,7 +23437,6 @@ function contact_rowvue_type_template_id_8a190578_render(_ctx, _cache, $props, $
 
 
 
-
 /* harmony default export */ const contact_rowvue_type_script_lang_js = ({
   name: 'DtRecipeGroupRow',
   components: {
@@ -21968,15 +23457,14 @@ function contact_rowvue_type_template_id_8a190578_render(_ctx, _cache, $props, $
 
     /**
      * Determines whether to show the presence indicator for
-     * Avatar - accepts PRESENCE_STATES values: 'active', 'busy', 'away', 'offline'. defaults to active.
-     * @values active, busy, away, offline
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     * defer validation to avatar component.
+     * @values null, busy, away, offline, active
      */
     avatarPresence: {
       type: String,
-      default: PRESENCE_STATES.ACTIVE,
-      validator: role => {
-        return PRESENCE_STATES_LIST.includes(role);
-      }
+      default: null
     },
 
     /**
@@ -22050,6 +23538,30 @@ function contact_rowvue_type_template_id_8a190578_render(_ctx, _cache, $props, $
     noInitials: {
       type: Boolean,
       default: false
+    },
+
+    /**
+     * Shows an "is typing" animation over the avatar when true.
+     */
+    isTyping: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Text shown when the call button is hovered.
+     */
+    callButtonTooltip: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Text shown when the unread count is hovered.
+     */
+    unreadCountTooltip: {
+      type: String,
+      default: ''
     }
   },
   emits: [
@@ -22097,7 +23609,7 @@ function contact_rowvue_type_template_id_8a190578_render(_ctx, _cache, $props, $
 
 
 ;
-const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_rowvue_type_script_lang_js, [['render',contact_rowvue_type_template_id_8a190578_render]])
+const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_rowvue_type_script_lang_js, [['render',contact_rowvue_type_template_id_69299a5d_render]])
 
 /* harmony default export */ const contact_row = (contact_row_exports_);
 ;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/index.js
@@ -22143,6 +23655,7 @@ const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contac
 
 
 
+
 
 
  /// Recipes