@dialpad/dialtone-vue 3.71.0 → 3.73.0

package/dist/dialtone-vue.js

@@ -1,6 +1,6 @@
-import { openBlock as a, createElementBlock as l, toDisplayString as I, createCommentVNode as p, createElementVNode as _, normalizeClass as y, warn as we, resolveComponent as f, renderSlot as d, createBlock as S, mergeProps as C, createVNode as m, createTextVNode as P, withKeys as F, withModifiers as U, withCtx as c, normalizeStyle as re, Fragment as Y, renderList as ee, resolveDynamicComponent as X, toHandlers as M, createSlots as Ee, normalizeProps as ke, Transition as Ze, withDirectives as Se, guardReactiveProps as Ye, vShow as Ce, Teleport as Wt, reactive as Lt, ref as pe, computed as Re, watch as Zt, onMounted as ws, nextTick as Es, unref as Yt, markRaw as ks, shallowReactive as Os, h as Ls, provide as Ts, createStaticVNode as As } from "vue";
-import { _ as v, D as x, g as q, a as Ds, h as $, b as K, u as J, L as Ps, c as xs, I as Rs, M as Bs, d as $s, e as $e, f as Qe, T as Ns, i as zs, j as Ms, k as Hs, E as H, l as me, v as Qt, m as Tt, n as We, o as Xt, C as Jt, G as es, p as Xe, q as Fs, r as Vs, s as qs, t as Je, w as et, x as tt, y as Ks } from "./emoji_text_wrapper-2d0e6363.js";
-import { A as Bd, z as $d, Y as Nd, a0 as zd, $ as Md, Z as Hd, K as Fd, J as Vd, a6 as qd, H as Kd, F as jd, a5 as Gd, a1 as Ud, a2 as Wd, a4 as Zd, a3 as Yd, Q as Qd, P as Xd, N as Jd, O as ec, S as tc, R as sc, X as ic, U as nc, W as ac, V as oc, B as lc } from "./emoji_text_wrapper-2d0e6363.js";
+import { openBlock as a, createElementBlock as l, toDisplayString as I, createCommentVNode as f, createElementVNode as b, normalizeClass as y, warn as we, resolveComponent as p, renderSlot as d, createBlock as S, mergeProps as C, createVNode as m, createTextVNode as P, withKeys as V, withModifiers as U, withCtx as c, normalizeStyle as re, Fragment as Y, renderList as ee, resolveDynamicComponent as X, toHandlers as M, createSlots as ke, normalizeProps as Ee, Transition as Ze, withDirectives as Se, guardReactiveProps as Ye, vShow as Ce, Teleport as Wt, reactive as Lt, ref as fe, computed as Re, watch as Zt, onMounted as ws, nextTick as ks, unref as Yt, markRaw as Es, shallowReactive as Os, h as Ls, provide as Ts, createStaticVNode as As } from "vue";
+import { _ as v, D as x, g as q, a as Ds, h as N, b as K, u as J, L as Ps, c as xs, I as Rs, M as Bs, d as Ns, e as Ne, f as Qe, T as $s, i as zs, j as Ms, k as Hs, E as H, l as me, v as Qt, m as Tt, n as We, o as Xt, C as Jt, G as es, p as Xe, q as Vs, r as Fs, s as qs, t as Je, w as et, x as tt, y as Ks } from "./emoji_text_wrapper-a99aed18.js";
+import { A as Bd, z as Nd, Y as $d, a0 as zd, $ as Md, Z as Hd, K as Vd, J as Fd, a6 as qd, H as Kd, F as jd, a5 as Gd, a1 as Ud, a2 as Wd, a4 as Zd, a3 as Yd, Q as Qd, P as Xd, N as Jd, O as ec, S as tc, R as sc, X as ic, U as nc, W as ac, V as oc, B as lc } from "./emoji_text_wrapper-a99aed18.js";
 const be = {
   BUSY: "busy",
   AWAY: "away",
@@ -46,8 +46,8 @@ function Zs(e, s, t, o, n, i) {
     role: "status",
     "aria-live": e.$attrs.ariaLive || "off"
   }, [
-    t.srText ? (a(), l("span", Ws, I(t.srText), 1)) : p("", !0),
-    _("div", {
+    t.srText ? (a(), l("span", Ws, I(t.srText), 1)) : f("", !0),
+    b("div", {
       class: y(["d-presence__inner", {
         "d-presence__inner--active": t.presence === "active",
         "d-presence__inner--away": t.presence === "away",
@@ -339,21 +339,21 @@ const Js = {
   "data-qa": "dt-avatar-count"
 };
 function ii(e, s, t, o, n, i) {
-  const r = f("dt-icon"), h = f("dt-presence");
+  const r = p("dt-icon"), h = p("dt-presence");
   return a(), l("div", {
     id: t.id,
     class: y(i.avatarClasses),
     "data-qa": "dt-avatar"
   }, [
-    _("div", {
+    b("div", {
       ref: "canvas",
       class: y([t.canvasClass, "d-avatar__canvas"])
     }, [
-      i.showDefaultSlot ? d(e.$slots, "default", { key: 0 }) : p("", !0),
+      i.showDefaultSlot ? d(e.$slots, "default", { key: 0 }) : f("", !0),
       i.showInitials ? (a(), l("span", {
         key: 1,
         class: y(["d-ps-absolute d-zi-base", n.AVATAR_KIND_MODIFIERS.initials])
-      }, I(n.formattedInitials), 3)) : p("", !0)
+      }, I(n.formattedInitials), 3)) : f("", !0)
     ], 2),
     t.overlayIcon || t.overlayText ? (a(), l("div", {
       key: 0,
@@ -363,9 +363,9 @@ function ii(e, s, t, o, n, i) {
         key: 0,
         class: "d-fc-white d-w100p",
         name: t.overlayIcon
-      }, null, 8, ["name"])) : t.overlayText ? (a(), l("p", ti, I(t.overlayText), 1)) : p("", !0)
-    ], 2)) : p("", !0),
-    i.showGroup ? (a(), l("span", si, I(i.formattedGroup), 1)) : p("", !0),
+      }, null, 8, ["name"])) : t.overlayText ? (a(), l("p", ti, I(t.overlayText), 1)) : f("", !0)
+    ], 2)) : f("", !0),
+    i.showGroup ? (a(), l("span", si, I(i.formattedGroup), 1)) : f("", !0),
     t.presence && !i.showGroup ? (a(), S(h, C({
       key: 2,
       presence: t.presence,
@@ -373,7 +373,7 @@ function ii(e, s, t, o, n, i) {
         "d-avatar__presence",
         n.AVATAR_PRESENCE_SIZE_MODIFIERS[t.size]
       ]]
-    }, t.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : p("", !0)
+    }, t.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : f("", !0)
   ], 10, ei);
 }
 const st = /* @__PURE__ */ v(Js, [["render", ii]]), xt = {
@@ -514,7 +514,7 @@ const st = /* @__PURE__ */ v(Js, [["render", ii]]), xt = {
   class: "d-badge__icon-right"
 };
 function di(e, s, t, o, n, i) {
-  const r = f("dt-icon");
+  const r = p("dt-icon");
   return a(), l("span", {
     class: y([
       "d-badge",
@@ -524,14 +524,14 @@ function di(e, s, t, o, n, i) {
     ]),
     "data-qa": "dt-badge"
   }, [
-    t.decoration ? (a(), l("span", ai)) : p("", !0),
+    t.decoration ? (a(), l("span", ai)) : f("", !0),
     t.iconLeft || t.type === "ai" ? (a(), l("span", oi, [
       m(r, {
         name: t.iconLeft || "dialpad-ai",
         size: "200"
       }, null, 8, ["name"])
-    ])) : p("", !0),
-    _("span", li, [
+    ])) : f("", !0),
+    b("span", li, [
       d(e.$slots, "default", {}, () => [
         P(I(t.text), 1)
       ])
@@ -541,7 +541,7 @@ function di(e, s, t, o, n, i) {
         name: t.iconRight,
         size: "200"
       }, null, 8, ["name"])
-    ])) : p("", !0)
+    ])) : f("", !0)
   ], 2);
 }
 const ci = /* @__PURE__ */ v(ni, [["render", di]]), Oe = ["base", "error", "info", "success", "warning"], ui = ["alert", "alertdialog", "status"], hi = /* @__PURE__ */ new Map([
@@ -550,7 +550,7 @@ const ci = /* @__PURE__ */ v(ni, [["render", di]]), Oe = ["base", "error", "info
   ["warning", "alert-triangle"],
   ["error", "alert-circle"],
   ["base", "bell"]
-]), fi = {
+]), pi = {
   name: "DtNoticeIcon",
   components: {
     DtIcon: x
@@ -570,7 +570,7 @@ const ci = /* @__PURE__ */ v(ni, [["render", di]]), Oe = ["base", "error", "info
   },
   data() {
     return {
-      hasSlotContent: $
+      hasSlotContent: N
     };
   },
   computed: {
@@ -578,23 +578,23 @@ const ci = /* @__PURE__ */ v(ni, [["render", di]]), Oe = ["base", "error", "info
       return hi.get(this.kind);
     }
   }
-}, pi = {
+}, fi = {
   key: 0,
   "aria-hidden": "true",
   class: "d-notice__icon"
 };
 function mi(e, s, t, o, n, i) {
-  const r = f("dt-icon");
-  return i.defaultIcon || n.hasSlotContent(e.$slots.default) ? (a(), l("div", pi, [
+  const r = p("dt-icon");
+  return i.defaultIcon || n.hasSlotContent(e.$slots.default) ? (a(), l("div", fi, [
     d(e.$slots, "default", {}, () => [
       m(r, {
         name: i.defaultIcon,
         size: "400"
       }, null, 8, ["name"])
     ])
-  ])) : p("", !0);
+  ])) : f("", !0);
 }
-const it = /* @__PURE__ */ v(fi, [["render", mi]]), gi = {
+const it = /* @__PURE__ */ v(pi, [["render", mi]]), gi = {
   name: "DtNoticeContent",
   props: {
     /**
@@ -623,7 +623,7 @@ const it = /* @__PURE__ */ v(fi, [["render", mi]]), gi = {
   },
   data() {
     return {
-      hasSlotContent: $
+      hasSlotContent: N
     };
   }
 }, _i = {
@@ -641,8 +641,8 @@ function vi(e, s, t, o, n, i) {
       d(e.$slots, "titleOverride", {}, () => [
         P(I(t.title), 1)
       ])
-    ], 8, bi)) : p("", !0),
-    _("p", {
+    ], 8, bi)) : f("", !0),
+    b("p", {
       id: t.contentId,
       class: "d-notice__message",
       "data-qa": "notice-content-message"
@@ -714,14 +714,14 @@ const nt = /* @__PURE__ */ v(gi, [["render", vi]]), ie = {
   }
 };
 function Ci(e, s, t, o, n, i) {
-  const r = f("dt-icon"), h = f("dt-button");
+  const r = p("dt-icon"), h = p("dt-button");
   return a(), S(h, {
     id: "sr-only-close-button",
     "data-qa": "dt-sr-only-close-button",
     class: "d-vi-visible-sr",
     "aria-label": t.visuallyHiddenCloseLabel,
     onClick: i.close,
-    onKeydown: F(U(i.close, ["prevent", "stop"]), ["space"])
+    onKeydown: V(U(i.close, ["prevent", "stop"]), ["space"])
   }, {
     default: c(() => [
       m(r, { name: "close" })
@@ -729,12 +729,12 @@ function Ci(e, s, t, o, n, i) {
     _: 1
   }, 8, ["aria-label", "onClick", "onKeydown"]);
 }
-const Ne = /* @__PURE__ */ v(Si, [["render", Ci]]), Ii = {
+const $e = /* @__PURE__ */ v(Si, [["render", Ci]]), Ii = {
   name: "DtNoticeAction",
   components: {
     DtIcon: x,
     DtButton: K,
-    SrOnlyCloseButton: Ne
+    SrOnlyCloseButton: $e
   },
   mixins: [ie],
   props: {
@@ -781,11 +781,11 @@ const Ne = /* @__PURE__ */ v(Si, [["render", Ci]]), Ii = {
   class: "d-notice__actions",
   "data-qa": "notice-content-actions"
 };
-function Ei(e, s, t, o, n, i) {
-  const r = f("dt-icon"), h = f("dt-button"), u = f("sr-only-close-button");
+function ki(e, s, t, o, n, i) {
+  const r = p("dt-icon"), h = p("dt-button"), u = p("sr-only-close-button");
   return a(), l("div", wi, [
     d(e.$slots, "default"),
-    t.hideClose ? p("", !0) : (a(), S(h, C({
+    t.hideClose ? f("", !0) : (a(), S(h, C({
       key: 0,
       ref: "closeButton",
       "data-qa": "dt-notice-action-close-button",
@@ -806,10 +806,10 @@ function Ei(e, s, t, o, n, i) {
       key: 1,
       "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
       onClose: i.close
-    }, null, 8, ["visually-hidden-close-label", "onClose"])) : p("", !0)
+    }, null, 8, ["visually-hidden-close-label", "onClose"])) : f("", !0)
   ]);
 }
-const at = /* @__PURE__ */ v(Ii, [["render", Ei]]), ts = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', ki = `${ts}:not([tabindex="-1"])`, Oi = "button,[href],input,select,textarea,details,[tabindex]", Le = {
+const at = /* @__PURE__ */ v(Ii, [["render", ki]]), ts = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', Ei = `${ts}:not([tabindex="-1"])`, Oi = "button,[href],input,select,textarea,details,[tabindex]", Le = {
   methods: {
     /**
      * get the first focusable element in your component, includes tabindex="-1".
@@ -826,20 +826,10 @@ const at = /* @__PURE__ */ v(Ii, [["render", Ei]]), ts = ':not(:disabled):not([a
      * @param {object} el - optional - ref of dom element to trap focus on.
      *  will default to the root node of the vue component
      */
-    async focusFirstElement(e = this.$el) {
+    async focusFirstElement(e) {
       const s = await this.getFirstFocusableElement(e);
       s == null || s.focus({ preventScroll: !0 });
     },
-    async focusElementById(e) {
-      var t;
-      await this.$nextTick();
-      const s = (t = this.$el) == null ? void 0 : t.querySelector(e);
-      if (s) {
-        s.focus();
-        return;
-      }
-      console.warn('Could not find the element specified in dt-modal prop "initialFocusElement". Defaulting to focusing the first element.'), await this.focusFirstElement();
-    },
     /**
      * internal use only.
      *
@@ -865,7 +855,7 @@ const at = /* @__PURE__ */ v(Ii, [["render", Ei]]), ts = ':not(:disabled):not([a
     _getFocusableElements(e = this.$el, s = !1) {
       return e ? [...e.querySelectorAll(Oi)].filter((o) => {
         const n = window.getComputedStyle(o);
-        return n.getPropertyValue("display") !== "none" && n.getPropertyValue("visibility") !== "hidden" && o.matches(s ? ts : ki);
+        return n.getPropertyValue("display") !== "none" && n.getPropertyValue("visibility") !== "hidden" && o.matches(s ? ts : Ei);
       }) : [];
     },
     /**
@@ -1041,19 +1031,19 @@ const at = /* @__PURE__ */ v(Ii, [["render", Ei]]), ts = ':not(:disabled):not([a
   }
 }, Ti = ["role", "aria-labelledby", "aria-describedby"];
 function Ai(e, s, t, o, n, i) {
-  const r = f("dt-notice-icon"), h = f("dt-notice-content"), u = f("dt-notice-action");
+  const r = p("dt-notice-icon"), h = p("dt-notice-content"), u = p("dt-notice-action");
   return a(), l("aside", {
     class: y(i.bannerClass),
     style: re(i.bannerBackgroundImage),
-    onKeydown: s[1] || (s[1] = F((...g) => i.trapFocus && i.trapFocus(...g), ["tab"]))
+    onKeydown: s[1] || (s[1] = V((...g) => i.trapFocus && i.trapFocus(...g), ["tab"]))
   }, [
-    _("div", {
+    b("div", {
       class: y(["d-banner__dialog", t.dialogClass]),
       role: i.role,
       "aria-labelledby": t.titleId,
       "aria-describedby": t.contentId
     }, [
-      t.hideIcon ? p("", !0) : (a(), S(r, {
+      t.hideIcon ? f("", !0) : (a(), S(r, {
         key: 0,
         kind: t.kind
       }, {
@@ -1122,7 +1112,7 @@ function Ri(e, s, t, o, n, i) {
     d(e.$slots, "default")
   ], 2);
 }
-const Bi = /* @__PURE__ */ v(xi, [["render", Ri]]), $i = {
+const Bi = /* @__PURE__ */ v(xi, [["render", Ri]]), Ni = {
   name: "DtBreadcrumbItem",
   components: {
     DtLink: Bi
@@ -1165,8 +1155,8 @@ const Bi = /* @__PURE__ */ v(xi, [["render", Ri]]), $i = {
     }
   }
 };
-function Ni(e, s, t, o, n, i) {
-  const r = f("dt-link");
+function $i(e, s, t, o, n, i) {
+  const r = p("dt-link");
   return a(), l("li", {
     "data-qa": "dt-breadcrumb-item",
     class: y([
@@ -1188,7 +1178,7 @@ function Ni(e, s, t, o, n, i) {
     }, 16, ["kind", "aria-current"])
   ], 2);
 }
-const zi = /* @__PURE__ */ v($i, [["render", Ni]]), Mi = {
+const zi = /* @__PURE__ */ v(Ni, [["render", $i]]), Mi = {
   name: "DtBreadcrumbs",
   components: {
     DtBreadcrumbItem: zi
@@ -1231,8 +1221,8 @@ const zi = /* @__PURE__ */ v($i, [["render", Ni]]), Mi = {
     }
   }
 }, Hi = ["aria-label"];
-function Fi(e, s, t, o, n, i) {
-  const r = f("dt-breadcrumb-item");
+function Vi(e, s, t, o, n, i) {
+  const r = p("dt-breadcrumb-item");
   return a(), l("nav", {
     "aria-label": t.ariaLabel,
     "data-qa": "dt-breadcrumbs",
@@ -1241,7 +1231,7 @@ function Fi(e, s, t, o, n, i) {
       { [n.BREADCRUMBS_INVERTED_MODIFIER]: t.inverted }
     ])
   }, [
-    _("ol", null, [
+    b("ol", null, [
       d(e.$slots, "default", {}, () => [
         (a(!0), l(Y, null, ee(t.breadcrumbs, (h, u) => (a(), S(r, C({
           key: i.getBreadcrumbItemKey(u),
@@ -1251,11 +1241,11 @@ function Fi(e, s, t, o, n, i) {
     ])
   ], 10, Hi);
 }
-const Zr = /* @__PURE__ */ v(Mi, [["render", Fi]]), $t = {
+const Zr = /* @__PURE__ */ v(Mi, [["render", Vi]]), Nt = {
   start: "d-btn-group--start",
   end: "d-btn-group--end",
   "space-between": "d-btn-group--space-between"
-}, Vi = {
+}, Fi = {
   name: "DtButtonGroup",
   props: {
     /**
@@ -1264,12 +1254,12 @@ const Zr = /* @__PURE__ */ v(Mi, [["render", Fi]]), $t = {
     alignment: {
       type: String,
       default: "start",
-      validator: (e) => Object.keys($t).includes(e)
+      validator: (e) => Object.keys(Nt).includes(e)
     }
   },
   data() {
     return {
-      BUTTON_GROUP_ALIGNMENT: $t
+      BUTTON_GROUP_ALIGNMENT: Nt
     };
   }
 };
@@ -1284,7 +1274,7 @@ function qi(e, s, t, o, n, i) {
     d(e.$slots, "default")
   ], 2);
 }
-const Yr = /* @__PURE__ */ v(Vi, [["render", qi]]), Ki = {
+const Yr = /* @__PURE__ */ v(Fi, [["render", qi]]), Ki = {
   name: "DtCard",
   props: {
     /**
@@ -1326,7 +1316,7 @@ const Yr = /* @__PURE__ */ v(Vi, [["render", qi]]), Ki = {
   },
   data() {
     return {
-      hasSlotContent: $
+      hasSlotContent: N
     };
   }
 };
@@ -1346,8 +1336,8 @@ function ji(e, s, t, o, n, i) {
       ])
     }, [
       d(e.$slots, "header")
-    ], 2)) : p("", !0),
-    _("div", {
+    ], 2)) : f("", !0),
+    b("div", {
       class: y([
         "d-card__content",
         t.contentClass
@@ -1364,7 +1354,7 @@ function ji(e, s, t, o, n, i) {
       ])
     }, [
       d(e.$slots, "footer")
-    ], 2)) : p("", !0)
+    ], 2)) : f("", !0)
   ], 2);
 }
 const Gi = /* @__PURE__ */ v(Ki, [["render", ji]]), Ui = {
@@ -1379,7 +1369,7 @@ const Gi = /* @__PURE__ */ v(Ki, [["render", ji]]), Ui = {
 function Zi(e, s, t, o, n, i) {
   return a(), l("pre", null, [
     P("    "),
-    _("code", Wi, I(t.text), 1),
+    b("code", Wi, I(t.text), 1),
     P(`
   `)
   ]);
@@ -1412,22 +1402,22 @@ const Qr = /* @__PURE__ */ v(Ui, [["render", Zi]]), Yi = {
       if (!e || !e.parentElement)
         return;
       const i = e.offsetTop, r = n || e.parentElement, h = this._getScrollBounds(r), u = h.bottom - h.top, g = this._getElementHeight(e), w = i + g;
-      let b = -1;
+      let _ = -1;
       switch (s) {
         case "top":
-          b = i;
+          _ = i;
           break;
         case "center":
-          b = i + (g - u) / 2;
+          _ = i + (g - u) / 2;
           break;
         case "bottom":
-          b = b = w - u;
+          _ = _ = w - u;
           break;
         default:
-          i - h.top <= u / 2 ? b = i : b = w - u;
+          i - h.top <= u / 2 ? _ = i : _ = w - u;
           break;
       }
-      this._setScrollTop(r, b, h, i, w, t, o);
+      this._setScrollTop(r, _, h, i, w, t, o);
     },
     _setScrollTop(e, s, t, o, n, i, r) {
       t = t || this._getScrollBounds(e);
@@ -1500,19 +1490,19 @@ const Qr = /* @__PURE__ */ v(Ui, [["render", Zi]]), Yi = {
     // this[listElement]() can return a Vue component, in which case we need to target
     // the $el property, or it can simply be an html element.
     _getListElement() {
-      var b;
-      return ((b = this[o]()) == null ? void 0 : b.$el) || this[o]();
+      var _;
+      return ((_ = this[o]()) == null ? void 0 : _.$el) || this[o]();
     },
     // Gets the length of all the items in the list, uses the listItemRole param to determine
     // whether an element is a list item.
     _itemsLength() {
-      const b = this._getListItemNodes();
-      return b === null ? 0 : b.length;
+      const _ = this._getListItemNodes();
+      return _ === null ? 0 : _.length;
     },
     // Gets all the list item nodes within the list element
     _getListItemNodes() {
-      const b = this._getListElement();
-      return b ? Array.from(b.querySelectorAll(`[role="${e}"], #sr-only-close-button`)) : (console.error(Qi, b), null);
+      const _ = this._getListElement();
+      return _ ? Array.from(_.querySelectorAll(`[role="${e}"], #sr-only-close-button`)) : (console.error(Qi, _), null);
     },
     onUpKey() {
       i && this[i](!0), this[s] > 0 ? this.setHighlightIndex(this[s] - 1) : h && this[h](), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
@@ -1526,17 +1516,17 @@ const Qr = /* @__PURE__ */ v(Ui, [["render", Zi]]), Yi = {
     onEndKey() {
       this.jumpToEnd(), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
     },
-    onNavigationKey(b) {
-      const L = this._getListItemNodes(), B = L.filter((fe) => fe.textContent.trim().toLowerCase().startsWith(b.toLowerCase()));
+    onNavigationKey(_) {
+      const L = this._getListItemNodes(), B = L.filter((pe) => pe.textContent.trim().toLowerCase().startsWith(_.toLowerCase()));
       if (B.length <= 0)
         return;
-      const de = B.findIndex((fe) => this[s] === L.indexOf(fe)), he = L.indexOf(
+      const de = B.findIndex((pe) => this[s] === L.indexOf(pe)), he = L.indexOf(
         de < B.length - 1 ? B[de + 1] : B[0]
       );
       this.setHighlightIndex(he), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
     },
-    isValidLetter(b) {
-      return b.length > 1 ? !1 : b >= "a" && b <= "z" || b >= "A" && b <= "Z";
+    isValidLetter(_) {
+      return _.length > 1 ? !1 : _ >= "a" && _ <= "z" || _ >= "A" && _ <= "Z";
     },
     jumpToBeginning() {
       this.setHighlightIndex(0);
@@ -1544,36 +1534,36 @@ const Qr = /* @__PURE__ */ v(Ui, [["render", Zi]]), Yi = {
     jumpToEnd() {
       this.setHighlightIndex(this._itemsLength() - 1);
     },
-    setHighlightIndex(b) {
-      this[s] = b, this[t] = this._getItemId(b), this._itemsLength() && r && this[r](b);
+    setHighlightIndex(_) {
+      this[s] = _, this[t] = this._getItemId(_), this._itemsLength() && r && this[r](_);
     },
-    setHighlightId(b) {
-      this[t] = b, this[s] = this._getItemIndex(b), this._itemsLength() && r && this[r](this._getItemIndex(b));
+    setHighlightId(_) {
+      this[t] = _, this[s] = this._getItemIndex(_), this._itemsLength() && r && this[r](this._getItemIndex(_));
     },
-    _getItemIndex(b) {
+    _getItemIndex(_) {
       const L = this._getListElement();
-      return L ? Array.from(L.querySelectorAll(`[role="${e}"], #sr-only-close-button`)).indexOf(L.querySelector(`#${b}`)) : void 0;
+      return L ? Array.from(L.querySelectorAll(`[role="${e}"], #sr-only-close-button`)).indexOf(L.querySelector(`#${_}`)) : void 0;
     },
-    _getItemId(b) {
+    _getItemId(_) {
       var B;
       const L = this._getListElement();
       if (L)
-        return (B = L.querySelectorAll(`[role="${e}"], #sr-only-close-button`)[b]) == null ? void 0 : B.id;
+        return (B = L.querySelectorAll(`[role="${e}"], #sr-only-close-button`)[_]) == null ? void 0 : B.id;
     },
     scrollActiveItemIntoViewIfNeeded() {
       if (!this.scrollToOnHighlight)
         return;
-      const b = this[n];
-      if (b) {
+      const _ = this[n];
+      if (_) {
         const L = this._getListElement();
-        this.scrollElementIntoViewIfNeeded(b, null, null, L);
+        this.scrollElementIntoViewIfNeeded(_, null, null, L);
       }
     },
     focusActiveItemIfNeeded() {
       if (!this.focusOnKeyboardNavigation)
         return;
-      const b = this[n];
-      b && b.focus();
+      const _ = this[n];
+      _ && _.focus();
     }
   }
 }), je = {
@@ -1588,53 +1578,60 @@ const Xi = {
   name: "DtDefaultListItem",
   data() {
     return {
-      hasSlotContent: $
+      hasSlotContent: N
     };
   }
-}, Ji = { class: "dt-default-list-item d-fs-200 d-lh-300 d-py4 d-px8 d-d-flex d-ai-center" }, en = {
+}, Ji = { class: "dt-default-list-item" }, en = {
   key: 0,
-  class: "dt-default-list-item--left d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pr8 d-jc-flex-end",
-  "data-qa": "dt-default-list-item-left-wrapper"
-}, tn = { class: "d-fl-grow1" }, sn = { key: 0 }, nn = {
+  "data-qa": "dt-default-list-item-left-wrapper",
+  class: "dt-default-list-item--left"
+}, tn = {
+  "data-qa": "dt-default-list-item-content-wrapper",
+  class: "dt-default-list-item--content"
+}, sn = {
+  key: 0,
+  "data-qa": "dt-default-list-item-title-wrapper",
+  class: "dt-default-list-item--title"
+}, nn = {
   key: 2,
   "data-qa": "dt-default-list-item-bottom-wrapper",
-  class: "d-mt2"
+  class: "dt-default-list-item--bottom"
 }, an = {
   key: 1,
-  class: "dt-default-list-item--right d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pl8",
-  "data-qa": "dt-default-list-item-right-wrapper"
+  "data-qa": "dt-default-list-item-right-wrapper",
+  class: "dt-default-list-item--right"
 };
 function on(e, s, t, o, n, i) {
   return a(), l("div", Ji, [
     n.hasSlotContent(e.$slots.left) ? (a(), l("section", en, [
       d(e.$slots, "left")
-    ])) : p("", !0),
-    _("section", tn, [
+    ])) : f("", !0),
+    b("section", tn, [
       n.hasSlotContent(e.$slots.default) ? (a(), l("div", sn, [
         d(e.$slots, "default")
-      ])) : p("", !0),
+      ])) : f("", !0),
       n.hasSlotContent(e.$slots.subtitle) ? (a(), l("div", {
         key: 1,
         "data-qa": "dt-default-list-item-subtitle-wrapper",
-        class: y(["d-fs-100 d-fc-tertiary", { "d-mtn2": e.$slots.default }])
+        class: y(["dt-default-list-item--subtitle", { "d-mtn2": e.$slots.default }])
       }, [
         d(e.$slots, "subtitle")
-      ], 2)) : p("", !0),
+      ], 2)) : f("", !0),
       n.hasSlotContent(e.$slots.bottom) ? (a(), l("div", nn, [
         d(e.$slots, "bottom")
-      ])) : p("", !0)
+      ])) : f("", !0)
     ]),
     n.hasSlotContent(e.$slots.right) ? (a(), l("section", an, [
       d(e.$slots, "right")
-    ])) : p("", !0),
+    ])) : f("", !0),
     d(e.$slots, "selected")
   ]);
 }
-const Nt = /* @__PURE__ */ v(Xi, [["render", on]]);
+const $t = /* @__PURE__ */ v(Xi, [["render", on]]);
 const ln = {
   name: "DtListItem",
   components: {
-    DtDefaultListItem: Nt,
+    DtDefaultListItem: $t,
     DtIcon: x
   },
   /**
@@ -1735,7 +1732,7 @@ const ln = {
     listItemType() {
       switch (this.type) {
         case je.DEFAULT:
-          return Nt;
+          return $t;
         default:
           return null;
       }
@@ -1783,10 +1780,10 @@ const ln = {
   }
 };
 function rn(e, s, t, o, n, i) {
-  const r = f("dt-icon");
+  const r = p("dt-icon");
   return a(), S(X(t.elementType), C({
     id: t.id,
-    class: ["dt-list-item d-ls-none", {
+    class: ["dt-list-item", {
       "dt-list-item--focusable": i.isFocusable,
       "dt-list-item--highlighted": i.isHighlighted,
       "dt-list-item--static": !i.isHoverable
@@ -1796,7 +1793,7 @@ function rn(e, s, t, o, n, i) {
     "aria-selected": i.isHighlighted
   }, M(i.listItemListeners)), {
     default: c(() => [
-      i.listItemType ? (a(), S(X(i.listItemType), { key: 0 }, Ee({ _: 2 }, [
+      i.listItemType ? (a(), S(X(i.listItemType), { key: 0 }, ke({ _: 2 }, [
         ee(e.$slots, (h, u) => ({
           name: u,
           fn: c(() => [
@@ -1809,7 +1806,7 @@ function rn(e, s, t, o, n, i) {
             m(r, {
               name: "check",
               size: "400",
-              class: "d-ml8"
+              class: "dt-list-item--selected-icon"
             })
           ]),
           key: "0"
@@ -1821,13 +1818,13 @@ function rn(e, s, t, o, n, i) {
 }
 const ze = /* @__PURE__ */ v(ln, [["render", rn]]), dn = {
   name: "ComboboxLoadingList",
-  components: { DtListItem: ze, DtSkeleton: $s }
+  components: { DtListItem: ze, DtSkeleton: Ns }
 }, cn = {
   class: "d-p0 d-mt8 d-hmx332 d-of-y-auto",
   "aria-busy": "true"
 };
 function un(e, s, t, o, n, i) {
-  const r = f("dt-skeleton"), h = f("dt-list-item");
+  const r = p("dt-skeleton"), h = p("dt-list-item");
   return a(), l("ol", cn, [
     (a(), l(Y, null, ee(7, (u) => m(h, {
       key: u,
@@ -1866,13 +1863,13 @@ const hn = {
       default: ""
     }
   }
-}, fn = {
+}, pn = {
   class: "d-p0",
   "data-qa": "dt-combobox-empty-list"
 };
-function pn(e, s, t, o, n, i) {
-  const r = f("dt-list-item");
-  return a(), l("ol", fn, [
+function fn(e, s, t, o, n, i) {
+  const r = p("dt-list-item");
+  return a(), l("ol", pn, [
     d(e.$slots, "default", {}, () => [
       m(r, {
         role: "option",
@@ -1881,14 +1878,14 @@ function pn(e, s, t, o, n, i) {
         class: y(["dt-empty-list-item", t.itemClass])
       }, {
         default: c(() => [
-          _("span", null, I(t.message), 1)
+          b("span", null, I(t.message), 1)
         ]),
         _: 1
       }, 8, ["class"])
     ])
   ]);
 }
-const ns = /* @__PURE__ */ v(hn, [["render", pn]]), as = {
+const ns = /* @__PURE__ */ v(hn, [["render", fn]]), as = {
   EXTRA_SMALL: "xs",
   SMALL: "sm",
   DEFAULT: "md",
@@ -2060,7 +2057,7 @@ const ns = /* @__PURE__ */ v(hn, [["render", pn]]), as = {
       // of this component, this is the ref to that dom element. Set
       // by the onOpen method.
       outsideRenderedListRef: null,
-      hasSlotContent: $
+      hasSlotContent: N
     };
   },
   computed: {
@@ -2166,18 +2163,18 @@ const ns = /* @__PURE__ */ v(hn, [["render", pn]]), as = {
   }
 }, gn = { "data-qa": "dt-combobox-input-wrapper" };
 function _n(e, s, t, o, n, i) {
-  const r = f("combobox-loading-list"), h = f("combobox-empty-list");
+  const r = p("combobox-loading-list"), h = p("combobox-empty-list");
   return a(), l("div", {
     onKeydown: [
-      s[3] || (s[3] = F(U((u) => i.onKeyValidation(u, "onEscapeKey"), ["stop"]), ["esc"])),
-      s[4] || (s[4] = F(U((u) => i.onKeyValidation(u, "onEnterKey"), ["exact"]), ["enter"])),
-      s[5] || (s[5] = F(U((u) => i.onKeyValidation(u, "onUpKey"), ["stop", "prevent"]), ["up"])),
-      s[6] || (s[6] = F(U((u) => i.onKeyValidation(u, "onDownKey"), ["stop", "prevent"]), ["down"])),
-      s[7] || (s[7] = F(U((u) => i.onKeyValidation(u, "onHomeKey"), ["stop", "prevent"]), ["home"])),
-      s[8] || (s[8] = F(U((u) => i.onKeyValidation(u, "onEndKey"), ["stop", "prevent"]), ["end"]))
+      s[3] || (s[3] = V(U((u) => i.onKeyValidation(u, "onEscapeKey"), ["stop"]), ["esc"])),
+      s[4] || (s[4] = V(U((u) => i.onKeyValidation(u, "onEnterKey"), ["exact"]), ["enter"])),
+      s[5] || (s[5] = V(U((u) => i.onKeyValidation(u, "onUpKey"), ["stop", "prevent"]), ["up"])),
+      s[6] || (s[6] = V(U((u) => i.onKeyValidation(u, "onDownKey"), ["stop", "prevent"]), ["down"])),
+      s[7] || (s[7] = V(U((u) => i.onKeyValidation(u, "onHomeKey"), ["stop", "prevent"]), ["home"])),
+      s[8] || (s[8] = V(U((u) => i.onKeyValidation(u, "onEndKey"), ["stop", "prevent"]), ["end"]))
     ]
   }, [
-    _("div", gn, [
+    b("div", gn, [
       d(e.$slots, "input", { inputProps: i.inputProps })
     ]),
     t.showList ? (a(), l("div", {
@@ -2188,7 +2185,7 @@ function _n(e, s, t, o, n, i) {
       onFocusout: s[1] || (s[1] = (...u) => i.clearHighlightIndex && i.clearHighlightIndex(...u)),
       onMousemoveCapture: s[2] || (s[2] = (...u) => i.onMouseHighlight && i.onMouseHighlight(...u))
     }, [
-      t.loading && !t.listRenderedOutside ? (a(), S(r, ke(C({ key: 0 }, i.listProps)), null, 16)) : t.emptyList && (t.emptyStateMessage || n.hasSlotContent(e.$slots.emptyListItem)) && !t.listRenderedOutside ? (a(), S(h, C({ key: 1 }, i.listProps, {
+      t.loading && !t.listRenderedOutside ? (a(), S(r, Ee(C({ key: 0 }, i.listProps)), null, 16)) : t.emptyList && (t.emptyStateMessage || n.hasSlotContent(e.$slots.emptyListItem)) && !t.listRenderedOutside ? (a(), S(h, C({ key: 1 }, i.listProps, {
         message: t.emptyStateMessage,
         "item-class": t.emptyStateClass
       }), {
@@ -2202,7 +2199,7 @@ function _n(e, s, t, o, n, i) {
         opened: i.onOpen,
         clearHighlightIndex: i.clearHighlightIndex
       })
-    ], 544)) : p("", !0)
+    ], 544)) : f("", !0)
   ], 32);
 }
 const bn = /* @__PURE__ */ v(mn, [["render", _n]]);
@@ -2331,9 +2328,9 @@ function vn(e, s, t, o, n, i) {
     onAfterLeave: i.afterLeave
   }), {
     default: c(() => [
-      Se((a(), S(X(t.elementType), ke(Ye(e.$attrs)), {
+      Se((a(), S(X(t.elementType), Ee(Ye(e.$attrs)), {
         default: c(() => [
-          n.initialized ? d(e.$slots, "default", { key: 0 }) : p("", !0)
+          n.initialized ? d(e.$slots, "default", { key: 0 }) : f("", !0)
         ]),
         _: 3
       }, 16)), [
@@ -2348,7 +2345,7 @@ const Sn = /* @__PURE__ */ v(yn, [["render", vn]]), Cn = {
   components: {
     DtButton: K,
     DtCollapsibleLazyShow: Sn,
-    DtLazyShow: $e,
+    DtLazyShow: Ne,
     DtIcon: x
   },
   props: {
@@ -2492,15 +2489,15 @@ const Sn = /* @__PURE__ */ v(yn, [["render", vn]]), Cn = {
       this.isOpen = !this.isOpen;
     },
     validateProperAnchor() {
-      !this.anchorText && !$(this.$slots.anchor) && console.error("anchor text and anchor slot content cannot both be falsy");
+      !this.anchorText && !N(this.$slots.anchor) && console.error("anchor text and anchor slot content cannot both be falsy");
     }
   }
 }, In = ["id"], wn = ["title"];
-function En(e, s, t, o, n, i) {
-  const r = f("dt-icon"), h = f("dt-button"), u = f("dt-collapsible-lazy-show");
+function kn(e, s, t, o, n, i) {
+  const r = p("dt-icon"), h = p("dt-button"), u = p("dt-collapsible-lazy-show");
   return a(), S(X(t.elementType), C({ ref: "collapsible" }, M(i.collapsibleListeners)), {
     default: c(() => [
-      _("div", {
+      b("div", {
         id: !t.ariaLabelledBy && i.labelledBy,
         ref: "anchor",
         class: y([
@@ -2530,7 +2527,7 @@ function En(e, s, t, o, n, i) {
                 name: n.isOpen ? "chevron-down" : "chevron-right",
                 class: "d-icon d-icon--size-300 d-mr8 d-fl-shrink0"
               }, null, 8, ["name"]),
-              _("span", {
+              b("span", {
                 class: "d-mr-auto d-truncate",
                 title: t.anchorText
               }, I(t.anchorText), 9, wn)
@@ -2570,18 +2567,18 @@ function En(e, s, t, o, n, i) {
     _: 3
   }, 16);
 }
-const Xr = /* @__PURE__ */ v(Cn, [["render", En]]), zt = {
+const Xr = /* @__PURE__ */ v(Cn, [["render", kn]]), zt = {
   none: void 0,
   small: "d-p4",
   medium: "d-p8",
   large: "d-p16"
-}, kn = {
+}, En = {
   none: void 0,
   small: "d-pl4",
   medium: "d-pl8",
   large: "d-pl16"
 }, On = ["dialog", "menu", "listbox", "tree", "grid"], os = ["", "anchor"], Ln = ["none", "dialog", "first"], Me = ["parent", "body"], Tn = [
-  ...Ns
+  ...$s
 ], An = {
   name: "PopoverHeaderFooter",
   components: {
@@ -2632,7 +2629,7 @@ const Xr = /* @__PURE__ */ v(Cn, [["render", En]]), zt = {
   ],
   data() {
     return {
-      hasSlotContent: $
+      hasSlotContent: N
     };
   },
   methods: {
@@ -2644,7 +2641,7 @@ const Xr = /* @__PURE__ */ v(Cn, [["render", En]]), zt = {
   }
 };
 function Dn(e, s, t, o, n, i) {
-  const r = f("dt-icon"), h = f("dt-button");
+  const r = p("dt-icon"), h = p("dt-button");
   return a(), l("div", {
     "data-qa": "dt-popover-header-footer",
     class: y({
@@ -2658,7 +2655,7 @@ function Dn(e, s, t, o, n, i) {
       class: y(["d-to-ellipsis", "d-w100p", t.contentClass])
     }, [
       d(e.$slots, "content")
-    ], 2)) : p("", !0),
+    ], 2)) : f("", !0),
     t.showCloseButton ? (a(), S(h, C({
       key: 1,
       ref: "popover__close-button",
@@ -2677,7 +2674,7 @@ function Dn(e, s, t, o, n, i) {
         })
       ]),
       _: 1
-    }, 16)) : p("", !0)
+    }, 16)) : f("", !0)
   ], 2);
 }
 const Pn = /* @__PURE__ */ v(An, [["render", Dn]]);
@@ -2687,8 +2684,8 @@ const xn = {
    * CHILD COMPONENTS *
    ********************/
   components: {
-    SrOnlyCloseButton: Ne,
-    DtLazyShow: $e,
+    SrOnlyCloseButton: $e,
+    DtLazyShow: Ne,
     PopoverHeaderFooter: Pn
   },
   mixins: [Le, ie],
@@ -3025,14 +3022,14 @@ const xn = {
   data() {
     return {
       POPOVER_PADDING_CLASSES: zt,
-      POPOVER_HEADER_FOOTER_PADDING_CLASSES: kn,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES: En,
       intersectionObserver: null,
       isOutsideViewport: !1,
       isOpen: !1,
       toAppear: !1,
       anchorEl: null,
       popoverContentEl: null,
-      hasSlotContent: $
+      hasSlotContent: N
     };
   },
   computed: {
@@ -3270,27 +3267,27 @@ const xn = {
     }
   }
 }, Rn = ["aria-hidden"], Bn = ["id", "tabindex"];
-function $n(e, s, t, o, n, i) {
-  const r = f("popover-header-footer"), h = f("sr-only-close-button"), u = f("dt-lazy-show");
+function Nn(e, s, t, o, n, i) {
+  const r = p("popover-header-footer"), h = p("sr-only-close-button"), u = p("dt-lazy-show");
   return a(), l("div", null, [
     t.modal && n.isOpen ? (a(), S(Wt, {
       key: 0,
       to: "body"
     }, [
-      _("div", {
+      b("div", {
         class: "d-modal--transparent",
         "aria-hidden": t.modal && n.isOpen ? "false" : "true",
         onClick: s[0] || (s[0] = U(() => {
         }, ["prevent", "stop"]))
       }, null, 8, Rn)
-    ])) : p("", !0),
+    ])) : f("", !0),
     (a(), S(X(t.elementType), {
       ref: "popover",
       class: y(["d-popover", { "d-popover__anchor--opened": n.isOpen }]),
       "data-qa": "dt-popover-container"
     }, {
       default: c(() => [
-        _("div", {
+        b("div", {
           id: !t.ariaLabelledby && i.labelledBy,
           ref: "anchor",
           "data-qa": "dt-popover-anchor",
@@ -3298,12 +3295,12 @@ function $n(e, s, t, o, n, i) {
           onClickCapture: s[1] || (s[1] = (...g) => i.defaultToggleOpen && i.defaultToggleOpen(...g)),
           onContextmenu: s[2] || (s[2] = (...g) => i.onContext && i.onContext(...g)),
           onKeydown: [
-            s[3] || (s[3] = F(U((...g) => i.onArrowKeyPress && i.onArrowKeyPress(...g), ["prevent"]), ["up"])),
-            s[4] || (s[4] = F(U((...g) => i.onArrowKeyPress && i.onArrowKeyPress(...g), ["prevent"]), ["down"])),
-            s[6] || (s[6] = F((g) => e.$emit("keydown", g), ["enter"])),
-            s[7] || (s[7] = F((g) => e.$emit("keydown", g), ["space"]))
+            s[3] || (s[3] = V(U((...g) => i.onArrowKeyPress && i.onArrowKeyPress(...g), ["prevent"]), ["up"])),
+            s[4] || (s[4] = V(U((...g) => i.onArrowKeyPress && i.onArrowKeyPress(...g), ["prevent"]), ["down"])),
+            s[6] || (s[6] = V((g) => e.$emit("keydown", g), ["enter"])),
+            s[7] || (s[7] = V((g) => e.$emit("keydown", g), ["space"]))
           ],
-          onKeydownCapture: s[5] || (s[5] = F((...g) => i.closePopover && i.closePopover(...g), ["escape"]))
+          onKeydownCapture: s[5] || (s[5] = V((...g) => i.closePopover && i.closePopover(...g), ["escape"]))
         }, [
           d(e.$slots, "anchor", {
             attrs: {
@@ -3348,8 +3345,8 @@ function $n(e, s, t, o, n, i) {
                 d(e.$slots, "headerContent", { close: i.closePopover })
               ]),
               _: 3
-            }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : p("", !0),
-            _("div", {
+            }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : f("", !0),
+            b("div", {
               ref: "popover__content",
               "data-qa": "dt-popover-content",
               class: y([
@@ -3371,12 +3368,12 @@ function $n(e, s, t, o, n, i) {
                 d(e.$slots, "footerContent", { close: i.closePopover })
               ]),
               _: 3
-            }, 8, ["class", "content-class"])) : p("", !0),
+            }, 8, ["class", "content-class"])) : f("", !0),
             e.showVisuallyHiddenClose ? (a(), S(h, {
               key: 2,
               "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
               onClose: i.closePopover
-            }, null, 8, ["visually-hidden-close-label", "onClose"])) : p("", !0)
+            }, null, 8, ["visually-hidden-close-label", "onClose"])) : f("", !0)
           ]),
           _: 3
         }, 16, ["id", "role", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "appear", "class", "style", "css", "tabindex"])
@@ -3385,16 +3382,16 @@ function $n(e, s, t, o, n, i) {
     }, 8, ["class"]))
   ]);
 }
-const ot = /* @__PURE__ */ v(xn, [["render", $n]]), ve = {
+const ot = /* @__PURE__ */ v(xn, [["render", Nn]]), ve = {
   none: void 0,
   small: "d-py0",
   large: "d-py4"
 };
-const Nn = {
+const $n = {
   name: "DtDropdown",
   components: {
     DtPopover: ot,
-    SrOnlyCloseButton: Ne
+    SrOnlyCloseButton: $e
   },
   mixins: [
     ss({
@@ -3729,7 +3726,7 @@ const Nn = {
   }
 }, zn = ["id"];
 function Mn(e, s, t, o, n, i) {
-  const r = f("sr-only-close-button"), h = f("dt-popover");
+  const r = p("sr-only-close-button"), h = p("dt-popover");
   return a(), S(h, C({
     ref: "popover",
     "content-width": t.contentWidth,
@@ -3753,7 +3750,7 @@ function Mn(e, s, t, o, n, i) {
       d(e.$slots, "anchor", C({ ref: "anchor" }, u))
     ]),
     content: c(({ close: u }) => [
-      _("ul", {
+      b("ul", {
         id: t.listId,
         ref: "listWrapper",
         class: y(i.listClasses),
@@ -3767,23 +3764,23 @@ function Mn(e, s, t, o, n, i) {
           "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
           tabindex: i.isArrowKeyNav ? -1 : 0,
           onClose: u
-        }, null, 8, ["visually-hidden-close-label", "tabindex", "onClose"])) : p("", !0)
+        }, null, 8, ["visually-hidden-close-label", "tabindex", "onClose"])) : f("", !0)
       ], 42, zn)
     ]),
     _: 3
   }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "append-to", "modal", "max-height", "max-width", "open-with-arrow-keys", "open-on-context", "tether", "transition"]);
 }
-const Hn = /* @__PURE__ */ v(Nn, [["render", Mn]]);
-const Fn = {
+const Hn = /* @__PURE__ */ v($n, [["render", Mn]]);
+const Vn = {
   name: "DtDropdownSeparator"
-}, Vn = {
+}, Fn = {
   "aria-hidden": "true",
   class: "dt-list-separator d-my4 d-mxn4"
 };
 function qn(e, s, t, o, n, i) {
-  return a(), l("li", Vn);
+  return a(), l("li", Fn);
 }
-const Jr = /* @__PURE__ */ v(Fn, [["render", qn]]), Kn = {
+const Jr = /* @__PURE__ */ v(Vn, [["render", qn]]), Kn = {
   name: "DtImageViewer",
   components: {
     DtButton: K,
@@ -3918,7 +3915,7 @@ const Jr = /* @__PURE__ */ v(Fn, [["render", qn]]), Kn = {
   "aria-modal": "true"
 }, Wn = ["src", "alt"];
 function Zn(e, s, t, o, n, i) {
-  const r = f("dt-button"), h = f("dt-icon");
+  const r = p("dt-button"), h = p("dt-icon");
   return a(), l("div", null, [
     m(r, {
       "data-qa": "dt-image-viewer-preview",
@@ -3928,7 +3925,7 @@ function Zn(e, s, t, o, n, i) {
       onClick: i.openModal
     }, {
       default: c(() => [
-        _("img", {
+        b("img", {
           class: y(t.imageButtonClass),
           src: t.imageSrc,
           alt: t.imageAlt
@@ -3940,7 +3937,7 @@ function Zn(e, s, t, o, n, i) {
       key: 0,
       to: "body"
     }, [
-      _("div", C({
+      b("div", C({
         "aria-hidden": n.isOpen ? "false" : "true",
         class: "d-modal",
         "data-qa": "dt-modal"
@@ -3950,8 +3947,8 @@ function Zn(e, s, t, o, n, i) {
         onFocusin: s[2] || (s[2] = (u) => n.showCloseButton = !0),
         onFocusout: s[3] || (s[3] = (u) => n.showCloseButton = !1)
       }), [
-        _("div", Un, [
-          _("img", {
+        b("div", Un, [
+          b("img", {
             class: "d-wmx100p d-hmx100p",
             src: t.imageSrc,
             alt: t.imageAlt
@@ -3978,12 +3975,12 @@ function Zn(e, s, t, o, n, i) {
                 })
               ]),
               _: 1
-            }, 8, ["aria-label", "onClick"])) : p("", !0)
+            }, 8, ["aria-label", "onClick"])) : f("", !0)
           ]),
           _: 1
         })
       ], 16, Gn)
-    ])) : p("", !0)
+    ])) : f("", !0)
   ]);
 }
 const ed = /* @__PURE__ */ v(Kn, [["render", Zn]]), Yn = {
@@ -4157,7 +4154,7 @@ const ed = /* @__PURE__ */ v(Kn, [["render", Zn]]), Yn = {
   data() {
     return {
       internalValue: this.value,
-      hasSlotContent: $
+      hasSlotContent: N
     };
   },
   watch: {
@@ -4183,7 +4180,7 @@ const ed = /* @__PURE__ */ v(Kn, [["render", Zn]]), Yn = {
   }
 }, Xn = ["data-qa"], Jn = ["data-qa"];
 function ea(e, s, t, o, n, i) {
-  const r = f("dt-validation-messages");
+  const r = p("dt-validation-messages");
   return a(), l("fieldset", { "data-qa": t.dataQaGroup }, [
     n.hasSlotContent(e.$slots.legend) || e.legend ? (a(), l("legend", C({
       key: 0,
@@ -4192,7 +4189,7 @@ function ea(e, s, t, o, n, i) {
       d(e.$slots, "legend", {}, () => [
         P(I(e.legend), 1)
       ])
-    ], 16, Jn)) : p("", !0),
+    ], 16, Jn)) : f("", !0),
     d(e.$slots, "default"),
     m(r, C({
       "validation-messages": e.formattedMessages,
@@ -4208,7 +4205,7 @@ const ls = /* @__PURE__ */ v(Qn, [["render", ea]]), Mt = {
 }, Ht = {
   default: "",
   full: "d-modal--full"
-}, Ft = {
+}, Vt = {
   error: "d-modal__banner--critical",
   info: "d-modal__banner--info",
   success: "d-modal__banner--success",
@@ -4327,7 +4324,7 @@ const ls = /* @__PURE__ */ v(Qn, [["render", ea]]), Mt = {
   }
 };
 function sa(e, s, t, o, n, i) {
-  const r = f("dt-notice-icon"), h = f("dt-notice-content"), u = f("dt-notice-action");
+  const r = p("dt-notice-icon"), h = p("dt-notice-content"), u = p("dt-notice-action");
   return a(), l("aside", {
     class: y(i.noticeClass),
     "data-qa": "notice"
@@ -4369,10 +4366,10 @@ function sa(e, s, t, o, n, i) {
 const td = /* @__PURE__ */ v(ta, [["render", sa]]), ia = {
   name: "DtModal",
   components: {
-    DtLazyShow: $e,
+    DtLazyShow: Ne,
     DtButton: K,
     DtIcon: x,
-    SrOnlyCloseButton: Ne
+    SrOnlyCloseButton: $e
   },
   mixins: [Le, ie],
   props: {
@@ -4521,18 +4518,6 @@ const td = /* @__PURE__ */ v(ta, [["render", sa]]), ia = {
     fixedHeaderFooter: {
       type: Boolean,
       default: !0
-    },
-    /**
-     * The element that is focused when the modal is opened. This can be an
-     * HTMLElement within the modal, a string starting with '#' which will
-     * find the element by ID. 'first' which will automatically focus
-     * the first element, or 'dialog' which will focus the dialog window itself.
-     * If the dialog is modal this prop cannot be 'none'.
-     */
-    initialFocusElement: {
-      type: [String, HTMLElement],
-      default: "first",
-      validator: (e) => e === "first" || e instanceof HTMLElement || e.startsWith("#")
     }
   },
   emits: [
@@ -4563,9 +4548,9 @@ const td = /* @__PURE__ */ v(ta, [["render", sa]]), ia = {
     return {
       MODAL_KIND_MODIFIERS: Mt,
       MODAL_SIZE_MODIFIERS: Ht,
-      MODAL_BANNER_KINDS: Ft,
+      MODAL_BANNER_KINDS: Vt,
       EVENT_KEYNAMES: H,
-      hasSlotContent: $
+      hasSlotContent: N
     };
   },
   computed: {
@@ -4587,7 +4572,7 @@ const td = /* @__PURE__ */ v(ta, [["render", sa]]), ia = {
           this.$emit("keydown", e);
         },
         "after-enter": (e) => {
-          this.$emit("update:show", !0), e.target === e.currentTarget && this.setFocusAfterTransition();
+          e.target === e.currentTarget && this.setFocusAfterTransition();
         }
       };
     },
@@ -4598,7 +4583,7 @@ const td = /* @__PURE__ */ v(ta, [["render", sa]]), ia = {
       return !!this.$slots.footer;
     },
     bannerKindClass() {
-      return Ft[this.bannerKind];
+      return Vt[this.bannerKind];
     }
   },
   watch: {
@@ -4622,7 +4607,7 @@ const td = /* @__PURE__ */ v(ta, [["render", sa]]), ia = {
       this.$emit("update:show", !1);
     },
     setFocusAfterTransition() {
-      this.initialFocusElement === "first" ? this.focusFirstElement() : this.initialFocusElement.startsWith("#") ? this.focusElementById(this.initialFocusElement) : this.initialFocusElement instanceof HTMLElement && this.initialFocusElement.focus();
+      this.focusFirstElement();
     },
     trapFocus(e) {
       this.show && this.focusTrappedTabPress(e);
@@ -4637,7 +4622,7 @@ const td = /* @__PURE__ */ v(ta, [["render", sa]]), ia = {
   class: "d-modal__footer"
 };
 function ra(e, s, t, o, n, i) {
-  const r = f("dt-icon"), h = f("dt-button"), u = f("sr-only-close-button"), g = f("dt-lazy-show");
+  const r = p("dt-icon"), h = p("dt-button"), u = p("sr-only-close-button"), g = p("dt-lazy-show");
   return a(), S(g, C({
     transition: "d-zoom",
     show: t.show,
@@ -4663,13 +4648,13 @@ function ra(e, s, t, o, n, i) {
         d(e.$slots, "banner", {}, () => [
           P(I(t.bannerTitle), 1)
         ])
-      ], 2)) : p("", !0),
+      ], 2)) : f("", !0),
       m(Ze, {
         appear: "",
         name: "d-modal__dialog"
       }, {
         default: c(() => [
-          Se(_("div", {
+          Se(b("div", {
             class: y([
               "d-modal__dialog",
               { "d-modal__dialog--scrollable": t.fixedHeaderFooter },
@@ -4712,8 +4697,8 @@ function ra(e, s, t, o, n, i) {
             }, I(t.copy), 3)),
             i.hasFooterSlot ? (a(), l("footer", la, [
               d(e.$slots, "footer")
-            ])) : p("", !0),
-            t.hideClose ? p("", !0) : (a(), S(h, C({
+            ])) : f("", !0),
+            t.hideClose ? f("", !0) : (a(), S(h, C({
               key: 5,
               class: "d-modal__close",
               circle: "",
@@ -4733,7 +4718,7 @@ function ra(e, s, t, o, n, i) {
               key: 6,
               "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
               onClose: i.close
-            }, null, 8, ["visually-hidden-close-label", "onClose"])) : p("", !0)
+            }, null, 8, ["visually-hidden-close-label", "onClose"])) : f("", !0)
           ], 10, na), [
             [Ce, t.show]
           ])
@@ -4820,9 +4805,9 @@ const da = {
       this.showAll = !this.showAll;
     }
   }
-}, ca = ["id", "aria-labelledby"], ua = ["id"], ha = ["id"], fa = ["id"], pa = { class: "d-d-flex" };
+}, ca = ["id", "aria-labelledby"], ua = ["id"], ha = ["id"], pa = ["id"], fa = { class: "d-d-flex" };
 function ma(e, s, t, o, n, i) {
-  const r = f("vnodes"), h = f("dt-button");
+  const r = p("vnodes"), h = p("dt-button");
   return a(), l("div", {
     id: t.id,
     role: "group",
@@ -4841,7 +4826,7 @@ function ma(e, s, t, o, n, i) {
       key: 0,
       id: `${t.id}-list-section-header`,
       class: "d-pl12 d-mt6"
-    }, I(t.header), 9, ua)) : p("", !0),
+    }, I(t.header), 9, ua)) : f("", !0),
     !i.isCollapsible || n.showAll ? (a(), l("ol", {
       key: 1,
       id: `${t.id}-list-section-content`
@@ -4852,8 +4837,8 @@ function ma(e, s, t, o, n, i) {
       id: `${t.id}-list-section-content`
     }, [
       m(r, { vnodes: i.displayedItems }, null, 8, ["vnodes"])
-    ], 8, fa)),
-    _("div", pa, [
+    ], 8, pa)),
+    b("div", fa, [
       i.isCollapsible ? (a(), S(h, {
         key: 0,
         id: `${t.id}-list-section-show-more-less`,
@@ -4865,7 +4850,7 @@ function ma(e, s, t, o, n, i) {
           P(I(i.showMoreLessText), 1)
         ]),
         _: 1
-      }, 8, ["id", "onClick"])) : p("", !0),
+      }, 8, ["id", "onClick"])) : f("", !0),
       d(e.$slots, "footer")
     ])
   ], 10, ca);
@@ -4923,7 +4908,7 @@ function ya(e, s, t, o, n, i) {
       d(e.$slots, "headingSlot", {}, () => [
         P(I(t.heading), 1)
       ])
-    ], 10, ba)) : p("", !0),
+    ], 10, ba)) : f("", !0),
     d(e.$slots, "default")
   ], 10, _a);
 }
@@ -5039,7 +5024,7 @@ const nd = /* @__PURE__ */ v(ga, [["render", ya]]), va = {
   "data-qa": "dt-pagination-separator"
 };
 function Ia(e, s, t, o, n, i) {
-  const r = f("dt-icon"), h = f("dt-button");
+  const r = p("dt-icon"), h = p("dt-button");
   return a(), l("nav", {
     "aria-label": t.ariaLabel,
     class: "d-d-flex d-fd-row d-gg4 d-ai-center"
@@ -5107,7 +5092,7 @@ const ad = /* @__PURE__ */ v(va, [["render", Ia]]), wa = {
   warning: "d-radio--warning",
   error: "d-radio--error",
   success: "d-radio--success"
-}, Ea = {
+}, ka = {
   name: "DtRadio",
   components: { DtValidationMessages: me },
   mixins: [Xt, Jt, es, Xe],
@@ -5160,7 +5145,7 @@ const ad = /* @__PURE__ */ v(va, [["render", Ia]]), wa = {
   ],
   data() {
     return {
-      hasSlotContent: $
+      hasSlotContent: N
     };
   },
   computed: {
@@ -5199,18 +5184,18 @@ const ad = /* @__PURE__ */ v(va, [["render", Ia]]), wa = {
       e !== this.radioGroupValue && (this.setGroupValue(e), this.$emit("input", e));
     }
   }
-}, ka = { class: "d-radio__input" }, Oa = ["checked", "name", "value", "disabled"], La = {
+}, Ea = { class: "d-radio__input" }, Oa = ["checked", "name", "value", "disabled"], La = {
   class: "d-radio__copy d-radio__label",
   "data-qa": "radio-label-description-container"
 };
 function Ta(e, s, t, o, n, i) {
-  const r = f("dt-validation-messages");
+  const r = p("dt-validation-messages");
   return a(), l("label", null, [
-    _("div", {
+    b("div", {
       class: y(["d-radio-group", { "d-radio-group--disabled": e.internalDisabled }])
     }, [
-      _("div", ka, [
-        _("input", C({
+      b("div", Ea, [
+        b("input", C({
           checked: e.internalChecked,
           name: e.internalName,
           value: t.value,
@@ -5219,8 +5204,8 @@ function Ta(e, s, t, o, n, i) {
           class: ["d-radio", i.inputValidationClass, e.inputClass]
         }, e.$attrs, M(i.inputListeners, !0)), null, 16, Oa)
       ]),
-      _("div", La, [
-        _("div", C({ class: e.labelClass }, e.labelChildProps, { "data-qa": "radio-label" }), [
+      b("div", La, [
+        b("div", C({ class: e.labelClass }, e.labelChildProps, { "data-qa": "radio-label" }), [
           d(e.$slots, "default", {}, () => [
             P(I(e.label), 1)
           ])
@@ -5232,7 +5217,7 @@ function Ta(e, s, t, o, n, i) {
           d(e.$slots, "description", {}, () => [
             P(I(e.description), 1)
           ])
-        ], 16)) : p("", !0),
+        ], 16)) : f("", !0),
         m(r, C({
           "validation-messages": e.formattedMessages,
           "show-messages": e.showMessages,
@@ -5242,7 +5227,7 @@ function Ta(e, s, t, o, n, i) {
     ], 2)
   ]);
 }
-const od = /* @__PURE__ */ v(Ea, [["render", Ta]]), ld = {
+const od = /* @__PURE__ */ v(ka, [["render", Ta]]), ld = {
   name: "DtRadioGroup",
   extends: ls,
   props: {
@@ -5485,28 +5470,28 @@ const rd = /* @__PURE__ */ v(Aa, [["render", Pa]]), xa = {
       this.validateInputLabels(this.hasLabel, this.$attrs["aria-label"]);
     }
   }
-}, Ba = { class: "d-checkbox__input" }, $a = ["checked", "name", "value", "disabled", ".indeterminate"], Na = {
+}, Ba = { class: "d-checkbox__input" }, Na = ["checked", "name", "value", "disabled", ".indeterminate"], $a = {
   key: 0,
   class: "d-checkbox__copy d-checkbox__label",
   "data-qa": "checkbox-label-description-container"
 };
 function za(e, s, t, o, n, i) {
-  const r = f("dt-validation-messages");
+  const r = p("dt-validation-messages");
   return a(), l("label", null, [
-    _("div", {
+    b("div", {
       class: y(["d-checkbox-group", { "d-checkbox-group--disabled": e.internalDisabled }])
     }, [
-      _("div", Ba, [
-        _("input", C({
+      b("div", Ba, [
+        b("input", C({
           type: "checkbox",
           checked: e.internalChecked,
           name: e.internalName,
           value: e.value,
           disabled: e.internalDisabled,
           class: ["d-checkbox", i.inputValidationClass, e.inputClass]
-        }, e.$attrs, { ".indeterminate": e.internalIndeterminate }, M(i.inputListeners, !0)), null, 16, $a)
+        }, e.$attrs, { ".indeterminate": e.internalIndeterminate }, M(i.inputListeners, !0)), null, 16, Na)
       ]),
-      i.hasLabelOrDescription ? (a(), l("div", Na, [
+      i.hasLabelOrDescription ? (a(), l("div", $a, [
         i.hasLabel ? (a(), l("div", C({
           key: 0,
           class: e.labelClass
@@ -5514,7 +5499,7 @@ function za(e, s, t, o, n, i) {
           d(e.$slots, "default", {}, () => [
             P(I(e.label), 1)
           ])
-        ], 16)) : p("", !0),
+        ], 16)) : f("", !0),
         i.hasDescription ? (a(), l("div", C({
           key: 1,
           class: ["d-description", e.descriptionClass]
@@ -5522,13 +5507,13 @@ function za(e, s, t, o, n, i) {
           d(e.$slots, "description", {}, () => [
             P(I(e.description), 1)
           ])
-        ], 16)) : p("", !0),
+        ], 16)) : f("", !0),
         m(r, C({
           "validation-messages": e.formattedMessages,
           "show-messages": e.showMessages,
           class: e.messagesClass
         }, e.messagesChildProps, { "data-qa": "dt-checkbox-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
-      ])) : p("", !0)
+      ])) : f("", !0)
     ], 2)
   ]);
 }
@@ -5624,7 +5609,7 @@ const dd = /* @__PURE__ */ v(Ra, [["render", za]]), cd = {
       return `checkbox-group-message-${e}-${s}-${this.id}`;
     }
   }
-}, Vt = {
+}, Ft = {
   xs: "d-chip__label--xs",
   sm: "d-chip__label--sm",
   md: ""
@@ -5636,7 +5621,7 @@ const dd = /* @__PURE__ */ v(Ra, [["render", za]]), cd = {
   xs: "200",
   sm: "200",
   md: "200"
-}, Fa = {
+}, Va = {
   name: "DtChip",
   components: {
     DtButton: K,
@@ -5668,7 +5653,7 @@ const dd = /* @__PURE__ */ v(Ra, [["render", za]]), cd = {
     size: {
       type: String,
       default: "md",
-      validator: (e) => Object.keys(Vt).includes(e)
+      validator: (e) => Object.keys(Ft).includes(e)
     },
     /**
      * The interactivity of the chip.
@@ -5736,7 +5721,7 @@ const dd = /* @__PURE__ */ v(Ra, [["render", za]]), cd = {
   data() {
     return {
       isActive: !1,
-      hasSlotContent: $
+      hasSlotContent: N
     };
   },
   computed: {
@@ -5759,7 +5744,7 @@ const dd = /* @__PURE__ */ v(Ra, [["render", za]]), cd = {
     chipClasses() {
       return [
         this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
-        Vt[this.size],
+        Ft[this.size],
         this.labelClass
       ];
     },
@@ -5773,7 +5758,7 @@ const dd = /* @__PURE__ */ v(Ra, [["render", za]]), cd = {
       this.hideClose || this.$emit("close");
     }
   }
-}, Va = { class: "d-chip" }, qa = {
+}, Fa = { class: "d-chip" }, qa = {
   key: 0,
   "data-qa": "dt-chip-icon",
   class: "d-chip__icon"
@@ -5782,8 +5767,8 @@ const dd = /* @__PURE__ */ v(Ra, [["render", za]]), cd = {
   "data-qa": "dt-chip-avatar"
 }, ja = ["id"];
 function Ga(e, s, t, o, n, i) {
-  const r = f("dt-icon"), h = f("dt-button");
-  return a(), l("span", Va, [
+  const r = p("dt-icon"), h = p("dt-button");
+  return a(), l("span", Fa, [
     (a(), S(X(t.interactive ? "button" : "span"), C({
       id: t.id,
       type: t.interactive && "button",
@@ -5797,7 +5782,7 @@ function Ga(e, s, t, o, n, i) {
           d(e.$slots, "icon")
         ])) : n.hasSlotContent(e.$slots.avatar) ? (a(), l("span", Ka, [
           d(e.$slots, "avatar")
-        ])) : p("", !0),
+        ])) : f("", !0),
         n.hasSlotContent(e.$slots.default) ? (a(), l("span", {
           key: 2,
           id: `${t.id}-content`,
@@ -5805,11 +5790,11 @@ function Ga(e, s, t, o, n, i) {
           class: y(["d-truncate", "d-chip__text", t.contentClass])
         }, [
           d(e.$slots, "default")
-        ], 10, ja)) : p("", !0)
+        ], 10, ja)) : f("", !0)
       ]),
       _: 3
     }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])),
-    t.hideClose ? p("", !0) : (a(), S(h, C({ key: 0 }, t.closeButtonProps, {
+    t.hideClose ? f("", !0) : (a(), S(h, C({ key: 0 }, t.closeButtonProps, {
       class: i.chipCloseButtonClasses(),
       "data-qa": "dt-chip-close",
       "aria-label": t.closeButtonProps.ariaLabel,
@@ -5825,7 +5810,7 @@ function Ga(e, s, t, o, n, i) {
     }, 16, ["class", "aria-label"]))
   ]);
 }
-const rs = /* @__PURE__ */ v(Fa, [["render", Ga]]), qt = {
+const rs = /* @__PURE__ */ v(Va, [["render", Ga]]), qt = {
   xs: "d-select--xs",
   sm: "d-select--sm",
   md: "",
@@ -5953,11 +5938,11 @@ const rs = /* @__PURE__ */ v(Fa, [["render", Ga]]), qt = {
   ],
   data() {
     return {
-      LABEL_SIZE_MODIFIERS: Fs,
-      DESCRIPTION_SIZE_MODIFIERS: Vs,
+      LABEL_SIZE_MODIFIERS: Vs,
+      DESCRIPTION_SIZE_MODIFIERS: Fs,
       SELECT_SIZE_MODIFIERS: qt,
       SELECT_STATE_MODIFIERS: Ua,
-      hasSlotContent: $
+      hasSlotContent: N
     };
   },
   computed: {
@@ -6006,9 +5991,9 @@ const rs = /* @__PURE__ */ v(Fa, [["render", Ga]]), qt = {
   }
 }, Ja = ["aria-details"], eo = ["id"], to = ["disabled"], so = ["value"];
 function io(e, s, t, o, n, i) {
-  const r = f("dt-validation-messages");
+  const r = p("dt-validation-messages");
   return a(), l("div", null, [
-    _("label", null, [
+    b("label", null, [
       n.hasSlotContent(e.$slots.label) || t.label ? (a(), l("div", C({
         key: 0,
         "aria-details": i.labelAriaDetails,
@@ -6021,7 +6006,7 @@ function io(e, s, t, o, n, i) {
         d(e.$slots, "label", {}, () => [
           P(I(t.label), 1)
         ])
-      ], 16, Ja)) : p("", !0),
+      ], 16, Ja)) : f("", !0),
       n.hasSlotContent(e.$slots.description) || t.description ? (a(), l("div", C({
         key: 1,
         id: i.descriptionKey,
@@ -6034,8 +6019,8 @@ function io(e, s, t, o, n, i) {
         d(e.$slots, "description", {}, () => [
           P(I(t.description), 1)
         ])
-      ], 16, eo)) : p("", !0),
-      _("div", {
+      ], 16, eo)) : f("", !0),
+      b("div", {
         class: y([
           "d-select",
           n.SELECT_SIZE_MODIFIERS[t.size],
@@ -6044,7 +6029,7 @@ function io(e, s, t, o, n, i) {
         ]),
         "data-qa": "dt-select-wrapper"
       }, [
-        _("select", C({
+        b("select", C({
           class: [
             "d-select__input",
             n.SELECT_STATE_MODIFIERS[i.state]
@@ -6241,7 +6226,7 @@ const ud = /* @__PURE__ */ v(Xa, [["render", io]]), no = ["status", "alert"], Kt
   }
 }, oo = ["aria-hidden"], lo = { class: "d-toast__dialog" };
 function ro(e, s, t, o, n, i) {
-  const r = f("dt-notice-icon"), h = f("dt-notice-content"), u = f("dt-notice-action");
+  const r = p("dt-notice-icon"), h = p("dt-notice-content"), u = p("dt-notice-action");
   return n.isShown ? (a(), l("div", {
     key: 0,
     class: y([
@@ -6252,7 +6237,7 @@ function ro(e, s, t, o, n, i) {
     "data-qa": "dt-toast",
     "aria-hidden": (!n.isShown).toString()
   }, [
-    _("div", lo, [
+    b("div", lo, [
       m(r, { kind: t.kind }, {
         default: c(() => [
           d(e.$slots, "icon")
@@ -6288,7 +6273,7 @@ function ro(e, s, t, o, n, i) {
         _: 3
       }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label", "onClose"])
     ])
-  ], 10, oo)) : p("", !0);
+  ], 10, oo)) : f("", !0);
 }
 const hd = /* @__PURE__ */ v(ao, [["render", ro]]), jt = {
   sm: "d-toggle--small",
@@ -6382,7 +6367,7 @@ const hd = /* @__PURE__ */ v(ao, [["render", ro]]), jt = {
   data() {
     return {
       internalChecked: this.checked,
-      hasSlotContent: $
+      hasSlotContent: N
     };
   },
   computed: {
@@ -6435,7 +6420,7 @@ const hd = /* @__PURE__ */ v(ao, [["render", ro]]), jt = {
       );
     }
   }
-}, ho = { class: "d-d-flex d-ai-center" }, fo = ["for"], po = ["id", "role", "aria-checked", "disabled", "aria-disabled"], mo = {
+}, ho = { class: "d-d-flex d-ai-center" }, po = ["for"], fo = ["id", "role", "aria-checked", "disabled", "aria-disabled"], mo = {
   key: 0,
   class: "d-toggle__inner"
 };
@@ -6447,8 +6432,8 @@ function go(e, s, t, o, n, i) {
       for: t.id
     }, t.labelChildProps, { "data-qa": "toggle-label" }), [
       d(e.$slots, "default")
-    ], 16, fo)) : p("", !0),
-    _("button", C({
+    ], 16, po)) : f("", !0),
+    b("button", C({
       id: t.id,
       role: i.toggleRole,
       type: "button",
@@ -6457,11 +6442,11 @@ function go(e, s, t, o, n, i) {
       "aria-disabled": t.disabled.toString(),
       class: i.toggleClasses
     }, i.inputListeners), [
-      t.showIcon ? (a(), l("span", mo)) : p("", !0)
-    ], 16, po)
+      t.showIcon ? (a(), l("span", mo)) : f("", !0)
+    ], 16, fo)
   ]);
 }
-const fd = /* @__PURE__ */ v(uo, [["render", go]]), ye = {
+const pd = /* @__PURE__ */ v(uo, [["render", go]]), ye = {
   "{win}": "layout-grid",
   "{arrow-right}": "arrow-right",
   "{arrow-left}": "arrow-left",
@@ -6470,7 +6455,7 @@ const fd = /* @__PURE__ */ v(uo, [["render", go]]), ye = {
   "{cmd}": "command"
 }, _o = {
   "{plus}": "plus"
-}, pd = Object.keys(ye), bo = {
+}, fd = Object.keys(ye), bo = {
   name: "DtKeyboardShortcut",
   components: {
     DtIcon: x
@@ -6527,7 +6512,7 @@ const fd = /* @__PURE__ */ v(uo, [["render", go]]), ye = {
   class: "sr-only"
 }, vo = ["innerHTML"];
 function So(e, s, t, o, n, i) {
-  const r = f("dt-icon");
+  const r = p("dt-icon");
   return a(), l("kbd", {
     class: y([
       "d-d-inline-flex",
@@ -6542,7 +6527,7 @@ function So(e, s, t, o, n, i) {
       t.inverted ? "d-bc-moderate-inverted" : "d-bc-default"
     ])
   }, [
-    t.screenReaderText ? (a(), l("span", yo, I(t.screenReaderText), 1)) : p("", !0),
+    t.screenReaderText ? (a(), l("span", yo, I(t.screenReaderText), 1)) : f("", !0),
     (a(!0), l(Y, null, ee(i.formattedShortcutSplit, (h, u) => (a(), l(Y, null, [
       i.icons[h] ? (a(), S(r, {
         key: `${u}-${h}`,
@@ -6620,7 +6605,7 @@ const md = /* @__PURE__ */ v(bo, [["render", So]]), ds = {
   },
   data() {
     return {
-      hasSlotContent: $
+      hasSlotContent: N
     };
   },
   computed: {
@@ -6646,7 +6631,7 @@ function wo(e, s, t, o, n, i) {
       "data-qa": "dt-root-layout-sidebar"
     }, [
       d(e.$slots, "sidebar")
-    ], 6)) : p("", !0),
+    ], 6)) : f("", !0),
     n.hasSlotContent(e.$slots.content) ? (a(), l("main", {
       key: 1,
       ref: "root-layout-content",
@@ -6655,13 +6640,13 @@ function wo(e, s, t, o, n, i) {
       tabindex: "0"
     }, [
       d(e.$slots, "content")
-    ], 2)) : p("", !0)
+    ], 2)) : f("", !0)
   ], 2);
 }
-const Eo = /* @__PURE__ */ v(Io, [["render", wo]]), ko = {
+const ko = /* @__PURE__ */ v(Io, [["render", wo]]), Eo = {
   name: "DtRootLayout",
   components: {
-    DtRootLayoutBody: Eo
+    DtRootLayoutBody: ko
   },
   props: {
     /**
@@ -6762,7 +6747,7 @@ const Eo = /* @__PURE__ */ v(Io, [["render", wo]]), ko = {
   },
   data() {
     return {
-      hasSlotContent: $
+      hasSlotContent: N
     };
   },
   computed: {
@@ -6773,7 +6758,7 @@ const Eo = /* @__PURE__ */ v(Io, [["render", wo]]), ko = {
   }
 };
 function Oo(e, s, t, o, n, i) {
-  const r = f("dt-root-layout-body");
+  const r = p("dt-root-layout-body");
   return a(), l("div", {
     class: y(["root-layout d-root-layout", { "d-root-layout--fixed": t.fixed }, i.responsiveClass]),
     "data-qa": "dt-root-layout"
@@ -6785,7 +6770,7 @@ function Oo(e, s, t, o, n, i) {
       "data-qa": "dt-root-layout-header"
     }, [
       d(e.$slots, "header")
-    ], 6)) : p("", !0),
+    ], 6)) : f("", !0),
     m(r, {
       "body-class": t.bodyClass,
       "content-class": t.contentClass,
@@ -6795,7 +6780,7 @@ function Oo(e, s, t, o, n, i) {
       "header-height": n.hasSlotContent(e.$slots.header) ? t.headerHeight : "0px",
       "footer-height": n.hasSlotContent(e.$slots.footer) ? t.footerHeight : "0px",
       fixed: t.fixed
-    }, Ee({ _: 2 }, [
+    }, ke({ _: 2 }, [
       n.hasSlotContent(e.$slots.sidebar) ? {
         name: "sidebar",
         fn: c(() => [
@@ -6818,10 +6803,10 @@ function Oo(e, s, t, o, n, i) {
       "data-qa": "dt-root-layout-footer"
     }, [
       d(e.$slots, "footer")
-    ], 6)) : p("", !0)
+    ], 6)) : f("", !0)
   ], 2);
 }
-const gd = /* @__PURE__ */ v(ko, [["render", Oo]]), ue = {
+const gd = /* @__PURE__ */ v(Eo, [["render", Oo]]), ue = {
   default: "column",
   column: "column",
   row: "row",
@@ -7025,49 +7010,49 @@ const us = {
   },
   emits: ["user-position"],
   setup(e, { expose: s, emit: t }) {
-    const o = e, n = Lt(/* @__PURE__ */ new Map()), i = Lt(/* @__PURE__ */ new Map()), r = pe([]), h = pe(null), u = pe(!1), g = pe(null), w = pe("top");
-    let b = 0, L = 0, B = !1, de = 0, he = null, fe = null, Fe = 0, ps = 0;
-    const Ve = Re(() => {
+    const o = e, n = Lt(/* @__PURE__ */ new Map()), i = Lt(/* @__PURE__ */ new Map()), r = fe([]), h = fe(null), u = fe(!1), g = fe(null), w = fe("top");
+    let _ = 0, L = 0, B = !1, de = 0, he = null, pe = null, Ve = 0, fs = 0;
+    const Fe = Re(() => {
       if (o.itemSize === null) {
         const O = {
           "-1": { accumulator: 0 }
-        }, A = o.items, E = o.sizeField, Q = o.minItemSize;
-        let V = 1e4, ne = 0, D;
+        }, A = o.items, k = o.sizeField, Q = o.minItemSize;
+        let F = 1e4, ne = 0, D;
         for (let j = 0, ge = A.length; j < ge; j++)
-          D = A[j][E] || Q, D < V && (V = D), ne += D, O[j] = { accumulator: ne, size: D };
-        return fe = V, O;
+          D = A[j][k] || Q, D < F && (F = D), ne += D, O[j] = { accumulator: ne, size: D };
+        return pe = F, O;
       }
       return [];
     }), ms = Re(() => o.items.length && typeof o.items[0] != "object"), gs = Re(() => {
       const O = {};
-      for (let A = 0, E = o.items.length; A < E; A++)
+      for (let A = 0, k = o.items.length; A < k; A++)
         O[o.items[A][o.keyField]] = A;
       return O;
     });
-    Zt(Ve, () => {
+    Zt(Fe, () => {
       Te(!1);
     }, { deep: !0 }), ws(() => {
-      Es(() => {
+      ks(() => {
         Te(!0), u.value = !0;
       });
     });
-    const mt = (O, A, E, Q, V) => {
-      const ne = ks({
-        id: ps++,
+    const mt = (O, A, k, Q, F) => {
+      const ne = Es({
+        id: fs++,
         index: A,
         used: !0,
         key: Q,
-        type: V
+        type: F
       }), D = Os({
-        item: E,
+        item: k,
         position: 0,
         nr: ne
       });
       return O.value.push(D), D;
     }, qe = (O, A = !1) => {
-      const E = i, Q = O.nr.type;
-      let V = E.get(Q);
-      V || (V = [], E.set(Q, V)), V.push(O), A || (O.nr.used = !1, O.position = -9999);
+      const k = i, Q = O.nr.type;
+      let F = k.get(Q);
+      F || (F = [], k.set(Q, F)), F.push(O), A || (O.nr.used = !1, O.position = -9999);
     }, _s = () => {
       const O = o.direction === "vertical";
       let A;
@@ -7085,76 +7070,76 @@ const us = {
     }, ys = () => {
       r.value.sort((O, A) => O.nr.index - A.nr.index);
     }, Te = (O, A = !1) => {
-      var bt, yt, vt, St, Ct, It, wt, Et;
-      const E = o.itemSize, Q = fe, V = ms.value ? null : o.keyField, ne = o.items, D = ne.length, j = Ve.value, ge = n, gt = i, Ae = r, Is = gs;
-      let G, N, De, te, ae;
+      var bt, yt, vt, St, Ct, It, wt, kt;
+      const k = o.itemSize, Q = pe, F = ms.value ? null : o.keyField, ne = o.items, D = ne.length, j = Fe.value, ge = n, gt = i, Ae = r, Is = gs;
+      let G, $, De, te, ae;
       if (!D)
-        G = N = te = ae = De = 0;
+        G = $ = te = ae = De = 0;
       else {
         const T = _s();
         if (A) {
           let R = T.start - de.value;
-          if (R < 0 && (R = -R), E === null && R < Q.value || R < E)
+          if (R < 0 && (R = -R), k === null && R < Q.value || R < k)
             return {
               continuous: !0
             };
         }
         de = T.start;
         const W = o.buffer;
-        if (T.start -= W, T.end += W, E === null) {
-          let R, _e = 0, kt = D - 1, Z = ~~(D / 2), Ot;
+        if (T.start -= W, T.end += W, k === null) {
+          let R, _e = 0, Et = D - 1, Z = ~~(D / 2), Ot;
           do
-            Ot = Z, R = (bt = j[Z]) == null ? void 0 : bt.accumulator, R < T.start ? _e = Z : Z < D - 1 && ((yt = j[Z + 1]) == null ? void 0 : yt.accumulator) > T.start && (kt = Z), Z = ~~((_e + kt) / 2);
+            Ot = Z, R = (bt = j[Z]) == null ? void 0 : bt.accumulator, R < T.start ? _e = Z : Z < D - 1 && ((yt = j[Z + 1]) == null ? void 0 : yt.accumulator) > T.start && (Et = Z), Z = ~~((_e + Et) / 2);
           while (Z !== Ot);
-          for (Z < 0 && (Z = 0), G = Z, De = (vt = j[D - 1]) == null ? void 0 : vt.accumulator, N = Z; N < D && ((St = j[N]) == null ? void 0 : St.accumulator) < T.end; N++)
+          for (Z < 0 && (Z = 0), G = Z, De = (vt = j[D - 1]) == null ? void 0 : vt.accumulator, $ = Z; $ < D && ((St = j[$]) == null ? void 0 : St.accumulator) < T.end; $++)
             ;
-          for (N === -1 ? N = ne.length - 1 : (N++, N > D && (N = D)), te = b; te < D && ((Ct = j[te]) == null ? void 0 : Ct.accumulator) < T.start; te++)
+          for ($ === -1 ? $ = ne.length - 1 : ($++, $ > D && ($ = D)), te = _; te < D && ((Ct = j[te]) == null ? void 0 : Ct.accumulator) < T.start; te++)
             ;
           for (ae = te; ae < D && ((It = j[ae]) == null ? void 0 : It.accumulator) < T.end; ae++)
             ;
         } else {
-          G = ~~(T.start / E);
+          G = ~~(T.start / k);
           const R = G % 1;
-          G -= R, N = Math.ceil(T.end / E), te = Math.max(0, Math.floor(T.start / E)), ae = Math.floor(T.end / E), G < 0 && (G = 0), N > D && (N = D), te < 0 && (te = 0), ae > D && (ae = D), De = Math.ceil(D / 1) * E;
+          G -= R, $ = Math.ceil(T.end / k), te = Math.max(0, Math.floor(T.start / k)), ae = Math.floor(T.end / k), G < 0 && (G = 0), $ > D && ($ = D), te < 0 && (te = 0), ae > D && (ae = D), De = Math.ceil(D / 1) * k;
         }
       }
-      N - G > 1e3 && bs(), Fe = De;
-      let k;
-      const Pe = G <= L && N >= G;
+      $ - G > 1e3 && bs(), Ve = De;
+      let E;
+      const Pe = G <= L && $ >= G;
       if (Pe)
         for (let T = 0, W = Ae.value.length; T < W; T++)
-          k = Ae.value[T], k != null && k.nr.used && (O && (k.nr.index = Is[k.item[V]]), (k.nr.index == null || k.nr.index < G || k.nr.index >= N) && qe(k));
+          E = Ae.value[T], E != null && E.nr.used && (O && (E.nr.index = Is[E.item[F]]), (E.nr.index == null || E.nr.index < G || E.nr.index >= $) && qe(E));
       const _t = Pe ? null : /* @__PURE__ */ new Map();
       let se, oe, xe;
-      for (let T = G; T < N; T++) {
+      for (let T = G; T < $; T++) {
         se = ne[T];
-        const W = V ? se == null ? void 0 : se[V] : se;
+        const W = F ? se == null ? void 0 : se[F] : se;
         if (W == null)
-          throw new Error(`Key is ${W} on item (keyField is '${V}')`);
-        if (k = ge.get(W), !E && !((wt = j[T]) != null && wt.size)) {
-          k && qe(k);
+          throw new Error(`Key is ${W} on item (keyField is '${F}')`);
+        if (E = ge.get(W), !k && !((wt = j[T]) != null && wt.size)) {
+          E && qe(E);
           continue;
         }
         oe = se.type;
         let R = gt.get(oe);
-        if (!k)
-          Pe ? R && R.length ? k = R.pop() : k = mt(Ae, T, se, W, oe) : (xe = _t.get(oe) || 0, (!R || xe >= R.length) && (k = mt(Ae, T, se, W, oe), qe(k, !0), R = gt.get(oe)), k = R[xe], _t.set(oe, xe + 1)), ge.delete(k.nr.key), k.nr.used = !0, k.nr.index = T, k.nr.key = W, k.nr.type = oe, ge.set(W, k);
-        else if (!k.nr.used && (k.nr.used = !0, R)) {
-          const _e = R.indexOf(k);
+        if (!E)
+          Pe ? R && R.length ? E = R.pop() : E = mt(Ae, T, se, W, oe) : (xe = _t.get(oe) || 0, (!R || xe >= R.length) && (E = mt(Ae, T, se, W, oe), qe(E, !0), R = gt.get(oe)), E = R[xe], _t.set(oe, xe + 1)), ge.delete(E.nr.key), E.nr.used = !0, E.nr.index = T, E.nr.key = W, E.nr.type = oe, ge.set(W, E);
+        else if (!E.nr.used && (E.nr.used = !0, R)) {
+          const _e = R.indexOf(E);
           _e !== -1 && R.splice(_e, 1);
         }
-        k.item = se, E === null ? (k.position = (Et = j[T - 1]) == null ? void 0 : Et.accumulator, k.offset = 0) : (k.position = Math.floor(T) * E, k.offset = T % 1 * E);
+        E.item = se, k === null ? (E.position = (kt = j[T - 1]) == null ? void 0 : kt.accumulator, E.offset = 0) : (E.position = Math.floor(T) * k, E.offset = T % 1 * k);
       }
-      return b = G, L = N, clearTimeout(he), he = setTimeout(ys, 300), {
+      return _ = G, L = $, clearTimeout(he), he = setTimeout(ys, 300), {
         continuous: Pe
       };
     }, vs = (O) => {
-      const A = o.direction === "vertical" ? { scroll: "scrollTop", start: "top" } : { scroll: "scrollLeft", start: "left" }, E = g.value, Q = A.scroll;
-      E[Q] = O;
+      const A = o.direction === "vertical" ? { scroll: "scrollTop", start: "top" } : { scroll: "scrollLeft", start: "left" }, k = g.value, Q = A.scroll;
+      k[Q] = O;
     }, Ss = (O) => {
-      var E;
+      var k;
       let A;
-      o.itemSize === null ? A = O > 0 ? (E = Ve.value[O - 1]) == null ? void 0 : E.accumulator : 0 : A = Math.floor(O) * o.itemSize, vs(A);
+      o.itemSize === null ? A = O > 0 ? (k = Fe.value[O - 1]) == null ? void 0 : k.accumulator : 0 : A = Math.floor(O) * o.itemSize, vs(A);
     }, Cs = () => {
       const O = g.value;
       w.value !== "middle" && (w.value = "middle", t("user-position", "middle")), O.scrollTop === 0 && (w.value = "top", t("user-position", "top")), O.scrollTop + O.clientHeight === O.scrollHeight && (w.value = "bottom", t("user-position", "bottom")), B || (B = !0, requestAnimationFrame(() => {
@@ -7175,26 +7160,26 @@ const us = {
     }, [
       (a(), S(X(e.listTag), {
         ref: "wrapper",
-        style: re({ [e.direction === "vertical" ? "minHeight" : "minWidth"]: `${Yt(Fe)}px` }),
+        style: re({ [e.direction === "vertical" ? "minHeight" : "minWidth"]: `${Yt(Ve)}px` }),
         class: y(["vue-recycle-scroller__item-wrapper", e.listClass])
       }, {
         default: c(() => [
-          (a(!0), l(Y, null, ee(r.value, (E) => (a(), S(X(e.itemTag), C({
-            key: E.nr.id,
+          (a(!0), l(Y, null, ee(r.value, (k) => (a(), S(X(e.itemTag), C({
+            key: k.nr.id,
             style: u.value ? {
-              transform: `translate${e.direction === "vertical" ? "Y" : "X"}(${E.position}px) translate${e.direction === "vertical" ? "X" : "Y"}(${E.offset}px)`,
+              transform: `translate${e.direction === "vertical" ? "Y" : "X"}(${k.position}px) translate${e.direction === "vertical" ? "X" : "Y"}(${k.offset}px)`,
               width: void 0,
               height: void 0
             } : null,
             class: ["vue-recycle-scroller__item-view", [
               e.itemClass,
               {
-                hover: !e.skipHover && h.value === E.nr.key
+                hover: !e.skipHover && h.value === k.nr.key
               }
             ]]
           }, M(e.skipHover ? {} : {
             mouseenter: () => {
-              h.value = E.nr.key;
+              h.value = k.nr.key;
             },
             mouseleave: () => {
               h.value = null;
@@ -7202,9 +7187,9 @@ const us = {
           })), {
             default: c(() => [
               d(O.$slots, "default", {
-                item: E.item,
-                index: E.nr.index,
-                active: E.nr.used
+                item: k.item,
+                index: k.nr.index,
+                active: k.nr.used
               })
             ]),
             _: 2
@@ -7334,7 +7319,7 @@ const us = {
   render() {
     return Ls(this.tag, this.$slots.default());
   }
-}, $o = {
+}, No = {
   name: "DynamicScroller",
   components: {
     CoreScroller: us,
@@ -7506,8 +7491,8 @@ const us = {
     }
   }
 };
-function No(e, s, t, o, n, i) {
-  const r = f("dt-scroller-item"), h = f("core-scroller");
+function $o(e, s, t, o, n, i) {
+  const r = p("dt-scroller-item"), h = p("core-scroller");
   return a(), S(h, C({
     ref: "scroller",
     items: i.itemsWithSize,
@@ -7527,7 +7512,7 @@ function No(e, s, t, o, n, i) {
         "data-index": g
       }, {
         default: c(() => [
-          d(e.$slots, "default", ke(Ye({
+          d(e.$slots, "default", Ee(Ye({
             item: u.item,
             index: g,
             active: w,
@@ -7540,7 +7525,7 @@ function No(e, s, t, o, n, i) {
     _: 3
   }, 16, ["items", "min-item-size", "direction", "key-field", "list-tag", "item-tag"]);
 }
-const zo = /* @__PURE__ */ v($o, [["render", No]]), bd = {
+const zo = /* @__PURE__ */ v(No, [["render", $o]]), bd = {
   __name: "scroller",
   props: {
     /**
@@ -7643,7 +7628,7 @@ const zo = /* @__PURE__ */ v($o, [["render", No]]), bd = {
   setup(e, { expose: s, emit: t }) {
     const o = e;
     Ts("emit", t);
-    const n = pe(null), i = Re(() => ({
+    const n = fe(null), i = Re(() => ({
       width: typeof o.scrollerWidth == "number" ? `${o.scrollerWidth}px` : o.scrollerWidth,
       height: typeof o.scrollerHeight == "number" ? `${o.scrollerHeight}px` : o.scrollerHeight
     }));
@@ -7653,8 +7638,8 @@ const zo = /* @__PURE__ */ v($o, [["render", No]]), bd = {
     function r() {
       n.value && n.value.scrollToBottom();
     }
-    function h(b) {
-      n.value && n.value.scrollToItem(b);
+    function h(_) {
+      n.value && n.value.scrollToItem(_);
     }
     function u() {
       n.value && (o.dynamic ? n.value.dynamicScrollerUpdateItems() : n.value._updateVisibleItems(!0));
@@ -7670,7 +7655,7 @@ const zo = /* @__PURE__ */ v($o, [["render", No]]), bd = {
       scrollToItem: h,
       updateItems: u,
       updateItemsFromBottom: g
-    }), (b, L) => (a(), S(X(e.dynamic ? zo : us), {
+    }), (_, L) => (a(), S(X(e.dynamic ? zo : us), {
       ref_key: "scroller",
       ref: n,
       "data-qa": "dt-scroller",
@@ -7683,10 +7668,10 @@ const zo = /* @__PURE__ */ v($o, [["render", No]]), bd = {
       "item-tag": e.itemTag,
       style: re(Yt(i)),
       tabindex: "0",
-      onUserPosition: L[0] || (L[0] = (B) => b.$emit("user-position", B))
+      onUserPosition: L[0] || (L[0] = (B) => _.$emit("user-position", B))
     }, {
       default: c(({ item: B, index: de, active: he }) => [
-        d(b.$slots, "default", ke(Ye({
+        d(_.$slots, "default", Ee(Ye({
           item: B,
           index: de,
           active: he
@@ -7917,7 +7902,7 @@ const zo = /* @__PURE__ */ v($o, [["render", No]]), bd = {
       isInputFocused: !1,
       isListFocused: !1,
       externalAnchor: q(),
-      hasSlotContent: $
+      hasSlotContent: N
     };
   },
   computed: {
@@ -7976,9 +7961,9 @@ const zo = /* @__PURE__ */ v($o, [["render", No]]), bd = {
       this.showList !== null || this.isListShown || !this.openWithArrowKeys || this.showComboboxList();
     }
   }
-}, Ho = ["id"], Fo = { ref: "header" }, Vo = ["onMouseleave", "onFocusout"], qo = { ref: "footer" };
+}, Ho = ["id"], Vo = { ref: "header" }, Fo = ["onMouseleave", "onFocusout"], qo = { ref: "footer" };
 function Ko(e, s, t, o, n, i) {
-  const r = f("combobox-loading-list"), h = f("combobox-empty-list"), u = f("dt-popover"), g = f("dt-combobox");
+  const r = p("combobox-loading-list"), h = p("combobox-empty-list"), u = p("dt-popover"), g = p("dt-combobox");
   return a(), S(g, C({
     ref: "combobox",
     loading: t.loading,
@@ -7996,13 +7981,13 @@ function Ko(e, s, t, o, n, i) {
     "data-qa": "dt-combobox"
   }, i.comboboxListeners), {
     input: c(({ inputProps: w }) => [
-      _("div", {
+      b("div", {
         id: n.externalAnchor,
         ref: "input",
-        onFocusin: s[0] || (s[0] = (...b) => i.onFocusIn && i.onFocusIn(...b)),
+        onFocusin: s[0] || (s[0] = (..._) => i.onFocusIn && i.onFocusIn(..._)),
         onKeydown: [
-          s[1] || (s[1] = F((b) => i.openOnArrowKeyPress(b), ["up"])),
-          s[2] || (s[2] = F((b) => i.openOnArrowKeyPress(b), ["down"]))
+          s[1] || (s[1] = V((_) => i.openOnArrowKeyPress(_), ["up"])),
+          s[2] || (s[2] = V((_) => i.openOnArrowKeyPress(_), ["down"]))
         ]
       }, [
         d(e.$slots, "input", {
@@ -8011,7 +7996,7 @@ function Ko(e, s, t, o, n, i) {
         })
       ], 40, Ho)
     ]),
-    list: c(({ opened: w, listProps: b, clearHighlightIndex: L }) => [
+    list: c(({ opened: w, listProps: _, clearHighlightIndex: L }) => [
       m(u, {
         ref: "popover",
         open: n.isListShown,
@@ -8036,26 +8021,26 @@ function Ko(e, s, t, o, n, i) {
         "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
         "visually-hidden-close": e.visuallyHiddenClose,
         onOpened: w
-      }, Ee({
+      }, ke({
         content: c(() => [
-          _("div", {
+          b("div", {
             ref: "listWrapper",
             class: y([n.DROPDOWN_PADDING_CLASSES[t.padding], t.listClass]),
             onMouseleave: L,
             onFocusout: L
           }, [
-            t.loading ? (a(), S(r, ke(C({ key: 0 }, b)), null, 16)) : t.emptyList && t.emptyStateMessage ? (a(), S(h, C({ key: 1 }, b, { message: t.emptyStateMessage }), null, 16, ["message"])) : d(e.$slots, "list", {
+            t.loading ? (a(), S(r, Ee(C({ key: 0 }, _)), null, 16)) : t.emptyList && t.emptyStateMessage ? (a(), S(h, C({ key: 1 }, _, { message: t.emptyStateMessage }), null, 16, ["message"])) : d(e.$slots, "list", {
               key: 2,
-              listProps: b
+              listProps: _
             })
-          ], 42, Vo)
+          ], 42, Fo)
         ]),
         _: 2
       }, [
         n.hasSlotContent(e.$slots.header) ? {
           name: "headerContent",
           fn: c(() => [
-            _("div", Fo, [
+            b("div", Vo, [
               d(e.$slots, "header")
             ], 512)
           ]),
@@ -8064,7 +8049,7 @@ function Ko(e, s, t, o, n, i) {
         n.hasSlotContent(e.$slots.footer) ? {
           name: "footerContent",
           fn: c(() => [
-            _("div", qo, [
+            b("div", qo, [
               d(e.$slots, "footer")
             ], 512)
           ]),
@@ -8287,7 +8272,7 @@ const jo = /* @__PURE__ */ v(Mo, [["render", Ko]]), Go = {
       resizeWindowObserver: null,
       originalInputSize: null,
       CHIP_SIZES: Uo,
-      hasSlotContent: $
+      hasSlotContent: N
     };
   },
   computed: {
@@ -8448,7 +8433,7 @@ const jo = /* @__PURE__ */ v(Mo, [["render", Ko]]), Go = {
   class: "d-ta-center d-py16"
 }, el = { ref: "footer" };
 function tl(e, s, t, o, n, i) {
-  const r = f("dt-chip"), h = f("dt-input"), u = f("dt-validation-messages"), g = f("dt-recipe-combobox-with-popover");
+  const r = p("dt-chip"), h = p("dt-input"), u = p("dt-validation-messages"), g = p("dt-recipe-combobox-with-popover");
   return a(), S(g, {
     ref: "comboboxWithPopover",
     label: t.label,
@@ -8462,24 +8447,24 @@ function tl(e, s, t, o, n, i) {
     "append-to": t.appendTo,
     transition: t.transition,
     onSelect: i.onComboboxSelect
-  }, Ee({
+  }, ke({
     input: c(({ onInput: w }) => [
-      _("span", Yo, [
-        _("span", Qo, [
-          (a(!0), l(Y, null, ee(t.selectedItems, (b) => (a(), S(r, C({
+      b("span", Yo, [
+        b("span", Qo, [
+          (a(!0), l(Y, null, ee(t.selectedItems, (_) => (a(), S(r, C({
             ref_for: !0,
             ref: "chips",
-            key: b,
+            key: _,
             "label-class": ["d-chip__label"],
             class: ["d-mt4", "d-mx2", "d-zi-base1"],
             "close-button-props": { ariaLabel: "close" },
             size: n.CHIP_SIZES[t.size]
           }, M(i.chipListeners), {
-            onKeyup: F((L) => i.onChipRemove(b), ["backspace"]),
-            onClose: (L) => i.onChipRemove(b)
+            onKeyup: V((L) => i.onChipRemove(_), ["backspace"]),
+            onClose: (L) => i.onChipRemove(_)
           }), {
             default: c(() => [
-              P(I(b), 1)
+              P(I(_), 1)
             ]),
             _: 2
           }, 1040, ["size", "onKeyup", "onClose"]))), 128))
@@ -8487,7 +8472,7 @@ function tl(e, s, t, o, n, i) {
         m(h, C({
           ref: "input",
           modelValue: n.value,
-          "onUpdate:modelValue": s[0] || (s[0] = (b) => n.value = b),
+          "onUpdate:modelValue": s[0] || (s[0] = (_) => n.value = _),
           class: "d-fl-grow1",
           "aria-label": t.label,
           label: t.labelVisible ? t.label : "",
@@ -8504,7 +8489,7 @@ function tl(e, s, t, o, n, i) {
       ], 512)
     ]),
     list: c(() => [
-      _("div", {
+      b("div", {
         ref: "list",
         onMousedown: s[1] || (s[1] = U(() => {
         }, ["prevent"]))
@@ -8517,7 +8502,7 @@ function tl(e, s, t, o, n, i) {
     n.hasSlotContent(e.$slots.header) ? {
       name: "header",
       fn: c(() => [
-        _("div", Xo, [
+        b("div", Xo, [
           d(e.$slots, "header")
         ], 512)
       ]),
@@ -8526,7 +8511,7 @@ function tl(e, s, t, o, n, i) {
     n.hasSlotContent(e.$slots.footer) ? {
       name: "footer",
       fn: c(() => [
-        _("div", el, [
+        b("div", el, [
           d(e.$slots, "footer")
         ], 512)
       ]),
@@ -8664,13 +8649,13 @@ const sl = {
   }
 };
 function il(e, s, t, o, n, i) {
-  const r = f("dt-button"), h = f("dt-tooltip");
+  const r = p("dt-button"), h = p("dt-tooltip");
   return a(), S(h, {
     id: t.id,
     offset: [0, 8]
   }, {
     anchor: c(() => [
-      _("span", {
+      b("span", {
         class: y({ "d-c-not-allowed": t.disabled })
       }, [
         m(r, {
@@ -8882,7 +8867,7 @@ const al = {
   }
 }, ol = { class: "d-d-flex d-ai-center" };
 function ll(e, s, t, o, n, i) {
-  const r = f("dt-recipe-callbar-button"), h = f("dt-icon"), u = f("dt-button"), g = f("dt-popover");
+  const r = p("dt-recipe-callbar-button"), h = p("dt-icon"), u = p("dt-button"), g = p("dt-popover");
   return a(), l("div", ol, [
     m(r, {
       "aria-label": t.ariaLabel,
@@ -8949,7 +8934,7 @@ function ll(e, s, t, o, n, i) {
         d(e.$slots, "footerContent")
       ]),
       _: 3
-    }, 16, ["id", "open", "placement", "initial-focus-element", "show-close-button", "dialog-class", "onOpened"])) : p("", !0)
+    }, 16, ["id", "open", "placement", "initial-focus-element", "show-close-button", "dialog-class", "onOpened"])) : f("", !0)
   ]);
 }
 const vd = /* @__PURE__ */ v(al, [["render", ll]]), rl = {
@@ -9057,9 +9042,9 @@ const vd = /* @__PURE__ */ v(al, [["render", ll]]), rl = {
 }, cl = {
   key: 0,
   class: "d-mrn4 d-d-flex d-fd-row"
-}, ul = ["src", "alt"], hl = { key: 1 }, fl = ["src", "initials", "seed", "alt"], pl = { key: 1 }, ml = { "data-qa": "contact-info-header" }, gl = { "data-qa": "contact-info-subtitle" }, _l = { "data-qa": "contact-info-bottom" }, bl = { "data-qa": "contact-info-right" };
+}, ul = ["src", "alt"], hl = { key: 1 }, pl = ["src", "initials", "seed", "alt"], fl = { key: 1 }, ml = { "data-qa": "contact-info-header" }, gl = { "data-qa": "contact-info-subtitle" }, _l = { "data-qa": "contact-info-bottom" }, bl = { "data-qa": "contact-info-right" };
 function yl(e, s, t, o, n, i) {
-  const r = f("dt-icon"), h = f("dt-avatar"), u = f("dt-list-item");
+  const r = p("dt-icon"), h = p("dt-avatar"), u = p("dt-list-item");
   return a(), S(u, {
     id: t.id,
     role: t.role,
@@ -9108,32 +9093,32 @@ function yl(e, s, t, o, n, i) {
               initials: t.avatarInitials,
               seed: t.avatarSeed,
               alt: t.avatarInitials
-            }, null, 8, fl)) : t.avatarInitials ? (a(), l("div", pl, I(t.avatarInitials), 1)) : (a(), S(r, {
+            }, null, 8, pl)) : t.avatarInitials ? (a(), l("div", fl, I(t.avatarInitials), 1)) : (a(), S(r, {
               key: 2,
               name: t.avatarIcon
             }, null, 8, ["name"]))
           ]),
           _: 1
         }, 8, ["size", "initials", "seed", "presence"]))
-      ])) : p("", !0)
+      ])) : f("", !0)
     ]),
     default: c(() => [
-      _("div", ml, [
+      b("div", ml, [
         d(e.$slots, "header")
       ])
     ]),
     subtitle: c(() => [
-      _("div", gl, [
+      b("div", gl, [
         d(e.$slots, "subtitle")
       ])
     ]),
     bottom: c(() => [
-      _("div", _l, [
+      b("div", _l, [
         d(e.$slots, "bottom")
       ])
     ]),
     right: c(() => [
-      _("div", bl, [
+      b("div", bl, [
         d(e.$slots, "right")
       ])
     ]),
@@ -9181,31 +9166,31 @@ const Sl = {
     }
   }
 }, Cl = { class: "d-top-banner-info__left" }, Il = { class: "d-top-banner-info__middle d-my4" }, wl = { class: "d-top-banner-info__right d-ta-right" };
-function El(e, s, t, o, n, i) {
+function kl(e, s, t, o, n, i) {
   return a(), l("div", {
     class: y(["d-fs-100 d-d-flex d-top-banner-info d-jc-space-between d-ai-center d-fc-primary", i.bannerInfoClass]),
     "data-qa": "banner-info"
   }, [
-    _("div", Cl, [
+    b("div", Cl, [
       d(e.$slots, "left")
     ]),
-    _("div", Il, [
+    b("div", Il, [
       d(e.$slots, "default")
     ]),
-    _("div", wl, [
+    b("div", wl, [
       d(e.$slots, "right")
     ])
   ], 2);
 }
-const Cd = /* @__PURE__ */ v(Sl, [["render", El]]), rt = "promptmenu", dt = "promptcollect", ct = "promptplay", ut = "gotoexpert", He = "goto", ht = "branch", ft = "transfer", pt = "hangup", kl = {
+const Cd = /* @__PURE__ */ v(Sl, [["render", kl]]), rt = "promptmenu", dt = "promptcollect", ct = "promptplay", ut = "gotoexpert", He = "goto", ht = "branch", pt = "transfer", ft = "hangup", El = {
   [rt]: "keypad",
   [dt]: "dialer",
   [ct]: "volume-2",
   [ut]: "expert-node",
   [ht]: "branch",
   [He]: "call-merge",
-  [ft]: "transfer",
-  [pt]: "phone-hang-up"
+  [pt]: "transfer",
+  [ft]: "phone-hang-up"
 }, Id = {
   [rt]: "Menu",
   [dt]: "Collect",
@@ -9213,8 +9198,8 @@ const Cd = /* @__PURE__ */ v(Sl, [["render", El]]), rt = "promptmenu", dt = "pro
   [ut]: "Expert",
   [ht]: "Branch",
   [He]: "Go-to",
-  [ft]: "Transfer",
-  [pt]: "Hangup"
+  [pt]: "Transfer",
+  [ft]: "Hangup"
 }, le = {
   PROMPT: {
     normal: "d-bc-blue-200",
@@ -9235,8 +9220,8 @@ const Cd = /* @__PURE__ */ v(Sl, [["render", El]]), rt = "promptmenu", dt = "pro
   [ut]: le.LOGIC,
   [ht]: le.LOGIC,
   [He]: le.LOGIC,
-  [ft]: le.TERMINAL,
-  [pt]: le.TERMINAL
+  [pt]: le.TERMINAL,
+  [ft]: le.TERMINAL
 };
 const Ll = {
   name: "DtRecipeIvrNode",
@@ -9304,7 +9289,7 @@ const Ll = {
       };
     },
     nodeIcon() {
-      return kl[this.nodeType];
+      return El[this.nodeType];
     },
     headerColor() {
       const { normal: e, selected: s } = Ol[this.nodeType];
@@ -9324,19 +9309,19 @@ const Ll = {
   "data-qa": "ivr-node-label"
 }, Dl = { class: "d-w164" };
 function Pl(e, s, t, o, n, i) {
-  const r = f("dt-icon"), h = f("dt-button"), u = f("dt-dropdown"), g = f("dt-card");
+  const r = p("dt-icon"), h = p("dt-button"), u = p("dt-dropdown"), g = p("dt-card");
   return a(), l("div", C({ class: "d-d-flex d-fd-column d-ai-center d-c-pointer ivr_node__width" }, M(i.nodeListeners, !0)), [
     t.dtmfKey ? (a(), l("div", {
       key: 0,
       "data-qa": "dt-top-connector-dtmf",
       class: y(["ivr-connector d-w24 d-h24 d-bar-circle d-mbn12 d-fc-white d-fs-200", { "d-mbn16": t.isSelected }])
-    }, I(t.dtmfKey), 3)) : p("", !0),
-    e.$slots.connector ? d(e.$slots, "connector", { key: 1 }) : p("", !0),
+    }, I(t.dtmfKey), 3)) : f("", !0),
+    e.$slots.connector ? d(e.$slots, "connector", { key: 1 }) : f("", !0),
     !t.dtmfKey && !e.$slots.connector ? (a(), l("div", {
       key: 2,
       "data-qa": "dt-top-connector",
       class: y(["ivr-connector d-w8 d-h8 d-bar-circle d-mbn4", { "d-mbn8": t.isSelected }])
-    }, null, 2)) : p("", !0),
+    }, null, 2)) : f("", !0),
     m(g, {
       "content-class": "d-bt d-bc-black-300 d-px12 d-pt8 d-pb12",
       "container-class": [
@@ -9354,7 +9339,7 @@ function Pl(e, s, t, o, n, i) {
       ]
     }, {
       header: c(() => [
-        _("div", Tl, [
+        b("div", Tl, [
           m(h, {
             "aria-label": t.nodeType,
             importance: "clear",
@@ -9370,7 +9355,7 @@ function Pl(e, s, t, o, n, i) {
             ]),
             _: 1
           }, 8, ["aria-label"]),
-          _("p", Al, I(t.nodeLabel), 1)
+          b("p", Al, I(t.nodeLabel), 1)
         ]),
         m(u, {
           open: n.isOpen,
@@ -9394,7 +9379,7 @@ function Pl(e, s, t, o, n, i) {
             }, 8, ["aria-label", "onClick"])
           ]),
           list: c(({ close: w }) => [
-            _("div", Dl, [
+            b("div", Dl, [
               d(e.$slots, "menuItems", { close: w })
             ])
           ]),
@@ -9416,7 +9401,7 @@ const xl = {
   },
   data() {
     return {
-      hasSlotContent: $
+      hasSlotContent: N
     };
   }
 }, Rl = {
@@ -9425,10 +9410,10 @@ const xl = {
 }, Bl = {
   key: 0,
   "data-qa": "left-grouped-chip-icon"
-}, $l = {
+}, Nl = {
   key: 0,
   "data-qa": "left-grouped-chip-content"
-}, Nl = {
+}, $l = {
   key: 0,
   "data-qa": "right-grouped-chip-icon"
 }, zl = {
@@ -9436,7 +9421,7 @@ const xl = {
   "data-qa": "right-grouped-chip-content"
 };
 function Ml(e, s, t, o, n, i) {
-  const r = f("dt-chip");
+  const r = p("dt-chip");
   return a(), l("div", Rl, [
     m(r, {
       "hide-close": !0,
@@ -9445,11 +9430,11 @@ function Ml(e, s, t, o, n, i) {
       size: "xs",
       "grouped-chip": !0,
       class: "d-blr-pill d-bgc-moderate-opaque d-wmx84 dt-chip-content"
-    }, Ee({
+    }, ke({
       default: c(() => [
-        n.hasSlotContent(e.$slots.leftContent) ? (a(), l("div", $l, [
+        n.hasSlotContent(e.$slots.leftContent) ? (a(), l("div", Nl, [
           d(e.$slots, "leftContent")
-        ])) : p("", !0)
+        ])) : f("", !0)
       ]),
       _: 2
     }, [
@@ -9458,7 +9443,7 @@ function Ml(e, s, t, o, n, i) {
         fn: c(() => [
           n.hasSlotContent(e.$slots.leftIcon) ? (a(), l("div", Bl, [
             d(e.$slots, "leftIcon")
-          ])) : p("", !0)
+          ])) : f("", !0)
         ]),
         key: "0"
       } : void 0
@@ -9472,20 +9457,20 @@ function Ml(e, s, t, o, n, i) {
       class: "d-brr-pill d-bgc-purple-200 d-wmx84 dt-chip-content"
     }, {
       icon: c(() => [
-        n.hasSlotContent(e.$slots.rightIcon) ? (a(), l("div", Nl, [
+        n.hasSlotContent(e.$slots.rightIcon) ? (a(), l("div", $l, [
           d(e.$slots, "rightIcon")
-        ])) : p("", !0)
+        ])) : f("", !0)
       ]),
       default: c(() => [
         n.hasSlotContent(e.$slots.rightContent) ? (a(), l("div", zl, [
           d(e.$slots, "rightContent")
-        ])) : p("", !0)
+        ])) : f("", !0)
       ]),
       _: 3
     })
   ]);
 }
-const Ed = /* @__PURE__ */ v(xl, [["render", Ml]]);
+const kd = /* @__PURE__ */ v(xl, [["render", Ml]]);
 const Hl = {
   name: "DtRecipeSettingsMenuButton",
   components: {
@@ -9512,8 +9497,8 @@ const Hl = {
     }
   }
 };
-function Fl(e, s, t, o, n, i) {
-  const r = f("dt-icon"), h = f("dt-button");
+function Vl(e, s, t, o, n, i) {
+  const r = p("dt-icon"), h = p("dt-button");
   return t.updateAvailable ? (a(), S(h, C({
     key: 0,
     importance: "outlined",
@@ -9549,7 +9534,7 @@ function Fl(e, s, t, o, n, i) {
     _: 1
   }, 16, ["aria-label"]));
 }
-const kd = /* @__PURE__ */ v(Hl, [["render", Fl], ["__scopeId", "data-v-7712e6e1"]]), z = {
+const Ed = /* @__PURE__ */ v(Hl, [["render", Vl], ["__scopeId", "data-v-7712e6e1"]]), z = {
   INBOX: "inbox",
   CONTACTS: "contacts",
   CHANNELS: "channels",
@@ -9562,7 +9547,7 @@ const kd = /* @__PURE__ */ v(Hl, [["render", Fl], ["__scopeId", "data-v-7712e6e1
   DIALBOT: "dialbot",
   ASSIGNED: "assigned",
   DIGITAL: "digital"
-}, Vl = {
+}, Fl = {
   [z.INBOX]: "inbox",
   [z.CONTACTS]: "contacts",
   [z.CHANNELS]: "hash",
@@ -9632,7 +9617,7 @@ const Yl = /* @__PURE__ */ v(jl, [["render", Zl]]), Ql = {
       return this.type === z.DIALBOT;
     },
     getIconName() {
-      return Vl[this.type];
+      return Fl[this.type];
     },
     contactCenterIconClasses() {
       return [
@@ -9652,7 +9637,7 @@ const Yl = /* @__PURE__ */ v(jl, [["render", Zl]]), Ql = {
   }
 };
 function Xl(e, s, t, o, n, i) {
-  const r = f("dt-icon"), h = f("icon-dialbot");
+  const r = p("dt-icon"), h = p("icon-dialbot");
   return i.isIconType ? (a(), S(r, {
     key: 0,
     name: i.getIconName,
@@ -9666,7 +9651,7 @@ function Xl(e, s, t, o, n, i) {
     "data-qa": "general-row-dialbot"
   }, [
     m(h, { class: "d-svg--size24" })
-  ], 2)) : p("", !0);
+  ], 2)) : f("", !0);
 }
 const Jl = /* @__PURE__ */ v(Ql, [["render", Xl]]);
 const er = {
@@ -9846,6 +9831,12 @@ const er = {
     },
     getAriaLabel() {
       return this.ariaLabel ? this.ariaLabel : tt([this.description, this.unreadCountTooltip, this.dndTextTooltip]);
+    },
+    hasActions() {
+      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton;
+    },
+    showUnreadCount() {
+      return !!this.unreadCount && this.hasUnreads;
     }
   },
   watch: {
@@ -9865,32 +9856,35 @@ const er = {
 }, tr = ["data-qa", "aria-label", "title", "href"], sr = { class: "dt-leftbar-row__alpha" }, ir = {
   key: 0,
   class: "dt-leftbar-row__is-typing"
-}, nr = /* @__PURE__ */ _("span", null, null, -1), ar = /* @__PURE__ */ _("span", null, null, -1), or = /* @__PURE__ */ _("span", null, null, -1), lr = [
+}, nr = /* @__PURE__ */ b("span", null, null, -1), ar = /* @__PURE__ */ b("span", null, null, -1), or = /* @__PURE__ */ b("span", null, null, -1), lr = [
   nr,
   ar,
   or
-], rr = { class: "dt-leftbar-row__label" }, dr = { class: "dt-leftbar-row__omega" }, cr = { class: "dt-leftbar-row__dnd" }, ur = {
+], rr = { class: "dt-leftbar-row__label" }, dr = {
+  key: 0,
+  class: "dt-leftbar-row__omega"
+}, cr = { class: "dt-leftbar-row__dnd" }, ur = {
   key: 1,
   class: "dt-leftbar-row__active-voice"
 }, hr = {
-  key: 0,
+  key: 3,
   class: "dt-leftbar-row__action",
   "data-qa": "dt-leftbar-row-action"
 };
-function fr(e, s, t, o, n, i) {
-  const r = f("dt-recipe-leftbar-general-row-icon"), h = f("dt-emoji-text-wrapper"), u = f("dt-tooltip"), g = f("dt-icon"), w = f("dt-badge"), b = f("dt-button");
+function pr(e, s, t, o, n, i) {
+  const r = p("dt-recipe-leftbar-general-row-icon"), h = p("dt-emoji-text-wrapper"), u = p("dt-tooltip"), g = p("dt-icon"), w = p("dt-badge"), _ = p("dt-button");
   return a(), l("div", {
     class: y(i.leftbarGeneralRowClasses),
     "data-qa": "dt-leftbar-row"
   }, [
-    _("a", C({
+    b("a", C({
       class: "dt-leftbar-row__primary",
       "data-qa": "data-qa" in e.$attrs ? e.$attrs["data-qa"] : "dt-leftbar-row-link",
       "aria-label": i.getAriaLabel,
       title: t.description,
       href: "href" in e.$attrs ? e.$attrs.href : "javascript:void(0)"
     }, e.$attrs), [
-      _("div", sr, [
+      b("div", sr, [
         t.isTyping ? (a(), l("div", ir, lr)) : d(e.$slots, "left", { key: 1 }, () => [
           m(r, {
             type: i.getIcon,
@@ -9900,7 +9894,7 @@ function fr(e, s, t, o, n, i) {
           }, null, 8, ["type", "color", "icon-size"])
         ])
       ]),
-      _("div", rr, [
+      b("div", rr, [
         d(e.$slots, "label", {}, () => [
           m(h, {
             class: "dt-leftbar-row__description",
@@ -9913,81 +9907,81 @@ function fr(e, s, t, o, n, i) {
             _: 1
           })
         ])
-      ]),
-      _("div", dr, [
-        t.dndText ? (a(), S(u, {
-          key: 0,
-          placement: "top",
-          message: t.dndTextTooltip
-        }, {
-          anchor: c(() => [
-            _("div", cr, I(t.dndText), 1)
-          ]),
-          _: 1
-        }, 8, ["message"])) : p("", !0),
-        t.activeVoiceChat ? (a(), l("div", ur, [
-          m(g, {
-            size: "300",
-            name: "activity"
-          })
-        ])) : t.unreadCount && t.hasUnreads ? (a(), S(u, {
-          key: 2,
-          message: t.unreadCountTooltip,
-          placement: "top"
-        }, {
-          anchor: c(() => [
-            m(w, {
-              kind: "count",
-              type: "bulletin",
-              "data-qa": "dt-leftbar-row-unread-badge"
-            }, {
-              default: c(() => [
-                P(I(t.unreadCount), 1)
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["message"])) : p("", !0)
       ])
     ], 16, tr),
-    t.hasCallButton ? (a(), l("div", hr, [
-      m(u, {
-        message: t.callButtonTooltip,
+    i.hasActions ? (a(), l("div", dr, [
+      t.dndText ? (a(), S(u, {
+        key: 0,
+        placement: "top",
+        message: t.dndTextTooltip
+      }, {
+        anchor: c(() => [
+          b("div", cr, I(t.dndText), 1)
+        ]),
+        _: 1
+      }, 8, ["message"])) : f("", !0),
+      t.activeVoiceChat ? (a(), l("div", ur, [
+        m(g, {
+          size: "300",
+          name: "activity"
+        })
+      ])) : i.showUnreadCount ? (a(), S(u, {
+        key: 2,
+        message: t.unreadCountTooltip,
         placement: "top"
       }, {
         anchor: c(() => [
-          m(b, {
-            class: "dt-leftbar-row__action-button",
-            "data-qa": "dt-leftbar-row-action-call-button",
-            circle: "",
-            size: "xs",
-            kind: "inverted",
-            "aria-label": t.callButtonTooltip,
-            onFocus: s[0] || (s[0] = (L) => n.actionFocused = !0),
-            onBlur: s[1] || (s[1] = (L) => n.actionFocused = !1),
-            onMouseleave: s[2] || (s[2] = (L) => n.actionFocused = !1),
-            onClick: s[3] || (s[3] = U((L) => e.$emit("call", L), ["stop"]))
+          m(w, {
+            kind: "count",
+            type: "bulletin",
+            "data-qa": "dt-leftbar-row-unread-badge",
+            class: "dt-leftbar-row__unread-badge"
           }, {
-            icon: c(() => [
-              m(g, {
-                name: "phone",
-                size: "200"
-              })
+            default: c(() => [
+              P(I(t.unreadCount), 1)
             ]),
             _: 1
-          }, 8, ["aria-label"])
+          })
         ]),
         _: 1
-      }, 8, ["message"])
-    ])) : p("", !0)
+      }, 8, ["message"])) : f("", !0),
+      t.hasCallButton ? (a(), l("div", hr, [
+        m(u, {
+          message: t.callButtonTooltip,
+          placement: "top"
+        }, {
+          anchor: c(() => [
+            m(_, {
+              class: "dt-leftbar-row__action-button",
+              "data-qa": "dt-leftbar-row-action-call-button",
+              circle: !0,
+              size: "xs",
+              kind: "inverted",
+              "aria-label": t.callButtonTooltip,
+              onFocus: s[0] || (s[0] = (L) => n.actionFocused = !0),
+              onBlur: s[1] || (s[1] = (L) => n.actionFocused = !1),
+              onClick: s[2] || (s[2] = U((L) => e.$emit("call", L), ["stop"]))
+            }, {
+              icon: c(() => [
+                m(g, {
+                  name: "phone",
+                  size: "200"
+                })
+              ]),
+              _: 1
+            }, 8, ["aria-label"])
+          ]),
+          _: 1
+        }, 8, ["message"])
+      ])) : f("", !0)
+    ])) : f("", !0)
   ], 2);
 }
-const fs = /* @__PURE__ */ v(er, [["render", fr]]), pr = {
+const ps = /* @__PURE__ */ v(er, [["render", pr]]), fr = {
   name: "DtRecipeGroupRow",
   components: {
     DtIcon: x,
-    DtRecipeGeneralRow: fs
+    DtRecipeGeneralRow: ps
   },
   inheritAttrs: !1,
   props: {
@@ -10058,7 +10052,7 @@ const fs = /* @__PURE__ */ v(er, [["render", fr]]), pr = {
   }
 };
 function mr(e, s, t, o, n, i) {
-  const r = f("dt-icon"), h = f("dt-recipe-general-row");
+  const r = p("dt-icon"), h = p("dt-recipe-general-row");
   return a(), S(h, C({
     description: t.names,
     "aria-label": i.ariaLabel,
@@ -10077,12 +10071,12 @@ function mr(e, s, t, o, n, i) {
     _: 1
   }, 16, ["description", "aria-label", "unread-count", "has-unreads", "unread-count-tooltip", "selected", "is-typing"]);
 }
-const Od = /* @__PURE__ */ v(pr, [["render", mr]]), gr = {
+const Od = /* @__PURE__ */ v(fr, [["render", mr]]), gr = {
   name: "DtRecipeGroupRow",
   components: {
     DtAvatar: st,
     DtIcon: x,
-    DtRecipeGeneralRow: fs,
+    DtRecipeGeneralRow: ps,
     DtEmojiTextWrapper: et
   },
   inheritAttrs: !1,
@@ -10234,7 +10228,7 @@ const Od = /* @__PURE__ */ v(pr, [["render", mr]]), gr = {
   }
 }, _r = ["src"], br = { class: "dt-leftbar-row__status" };
 function yr(e, s, t, o, n, i) {
-  const r = f("dt-icon"), h = f("dt-avatar"), u = f("dt-emoji-text-wrapper"), g = f("dt-recipe-general-row");
+  const r = p("dt-icon"), h = p("dt-avatar"), u = p("dt-emoji-text-wrapper"), g = p("dt-recipe-general-row");
   return a(), S(g, C({
     "unread-count": t.unreadCount,
     description: i.contactDescription,
@@ -10282,12 +10276,12 @@ function yr(e, s, t, o, n, i) {
         ]),
         _: 1
       }),
-      _("div", br, [
+      b("div", br, [
         t.presenceText ? (a(), l("span", {
           key: 0,
           "data-qa": "dt-leftbar-row-presence-text",
           class: y(["dt-leftbar-row__meta-context", i.presenceColorClass])
-        }, I(t.presenceText), 3)) : p("", !0),
+        }, I(t.presenceText), 3)) : f("", !0),
         t.userStatus ? (a(), S(u, {
           key: 1,
           size: "100",
@@ -10299,7 +10293,7 @@ function yr(e, s, t, o, n, i) {
             P(I(t.userStatus), 1)
           ]),
           _: 1
-        })) : p("", !0)
+        })) : f("", !0)
       ])
     ]),
     _: 1
@@ -10349,7 +10343,7 @@ const Cr = {
   }
 }, Ir = { "data-qa": "dt-leftbar-unread-pill__label" };
 function wr(e, s, t, o, n, i) {
-  const r = f("dt-icon");
+  const r = p("dt-icon");
   return a(), l("button", C({
     class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${t.kind}`],
     type: "button",
@@ -10359,7 +10353,7 @@ function wr(e, s, t, o, n, i) {
       name: `arrow-${t.direction}`,
       size: "300"
     }, null, 8, ["name"]),
-    _("span", Ir, [
+    b("span", Ir, [
       d(e.$slots, "default")
     ])
   ], 16);
@@ -10369,11 +10363,11 @@ const Td = /* @__PURE__ */ v(Cr, [["render", wr]]), Ge = {
   SEARCHED: "d-bgc-warning-subtle",
   ERROR: "d-bgc-critical-subtle"
 }, Ue = "NORMAL";
-const Er = {
+const kr = {
   name: "DtRecipeFeedItemRow",
   components: {
     DtAvatar: st,
-    DtLazyShow: $e,
+    DtLazyShow: Ne,
     DtListItem: ze
   },
   inheritAttrs: !1,
@@ -10489,7 +10483,7 @@ const Er = {
       this.state === Ue || this.faded === !0 || (this.$refs.FeedItemRef.$el.classList.remove(Ge[this.state]), this.faded = !0);
     }
   }
-}, kr = ["src"], Or = {
+}, Er = ["src"], Or = {
   key: 0,
   "data-qa": "feed-item-row-header",
   class: "d-d-flex d-ai-center"
@@ -10504,7 +10498,7 @@ const Er = {
   class: "d-ps-absolute d-tn16 d-r12"
 };
 function xr(e, s, t, o, n, i) {
-  const r = f("dt-avatar"), h = f("dt-lazy-show"), u = f("dt-list-item");
+  const r = p("dt-avatar"), h = p("dt-lazy-show"), u = p("dt-list-item");
   return a(), S(u, C({
     ref: "FeedItemRef",
     "navigation-type": "none"
@@ -10524,11 +10518,11 @@ function xr(e, s, t, o, n, i) {
             "data-qa": "feed-item-row-avatar-img",
             alt: "",
             src: t.avatarImageUrl
-          }, null, 8, kr)) : p("", !0)
+          }, null, 8, Er)) : f("", !0)
         ]),
         _: 1
-      }, 8, ["initials"])) : p("", !0),
-      t.showHeader ? p("", !0) : Se((a(), l("div", {
+      }, 8, ["initials"])) : f("", !0),
+      t.showHeader ? f("", !0) : Se((a(), l("div", {
         key: 1,
         class: "d-fs-100 d-fw-normal d-ws-nowrap d-lh-100 d-fc-tertiary d-mb6",
         "data-qa": "feed-item-row-left-time"
@@ -10537,13 +10531,13 @@ function xr(e, s, t, o, n, i) {
       ])
     ]),
     bottom: c(() => [
-      _("div", Dr, [
+      b("div", Dr, [
         d(e.$slots, "reactions")
       ]),
       d(e.$slots, "threading")
     ]),
     right: c(() => [
-      Se(_("div", Pr, [
+      Se(b("div", Pr, [
         m(h, {
           appear: !0,
           transition: "fade",
@@ -10559,12 +10553,12 @@ function xr(e, s, t, o, n, i) {
       ])
     ]),
     default: c(() => [
-      _("article", null, [
+      b("article", null, [
         t.showHeader ? (a(), l("div", Or, [
-          _("p", Lr, I(t.displayName), 1),
-          _("time", Tr, I(t.time), 1)
-        ])) : p("", !0),
-        _("span", Ar, [
+          b("p", Lr, I(t.displayName), 1),
+          b("time", Tr, I(t.time), 1)
+        ])) : f("", !0),
+        b("span", Ar, [
           d(e.$slots, "default")
         ])
       ])
@@ -10572,7 +10566,7 @@ function xr(e, s, t, o, n, i) {
     _: 3
   }, 16, ["class"]);
 }
-const Ad = /* @__PURE__ */ v(Er, [["render", xr]]), Rr = {
+const Ad = /* @__PURE__ */ v(kr, [["render", xr]]), Rr = {
   name: "DtRecipeTimePill",
   props: {
     /**
@@ -10596,14 +10590,14 @@ const Ad = /* @__PURE__ */ v(Er, [["render", xr]]), Rr = {
     }
   }
 }, Br = ["dateTime"];
-function $r(e, s, t, o, n, i) {
+function Nr(e, s, t, o, n, i) {
   return a(), l("time", {
     "data-qa": "dt-time-pill",
     dateTime: t.dateTime,
     class: "d-ba d-bar-pill d-baw1 d-bc-black-300 d-px16 d-py4 d-fs-100"
   }, I(t.dateTimeDisplay), 9, Br);
 }
-const Dd = /* @__PURE__ */ v(Rr, [["render", $r]]), Nr = [
+const Dd = /* @__PURE__ */ v(Rr, [["render", Nr]]), $r = [
   "emojiUnicodeOrShortname",
   "isSelected",
   "ariaLabel",
@@ -10622,7 +10616,7 @@ const Dd = /* @__PURE__ */ v(Rr, [["render", $r]]), Nr = [
       default: () => [],
       validator: (e) => {
         for (const s of e)
-          if (!Nr.every((o) => s[o] !== void 0))
+          if (!$r.every((o) => s[o] !== void 0))
             return !1;
         return !0;
       }
@@ -10643,9 +10637,9 @@ const Dd = /* @__PURE__ */ v(Rr, [["render", $r]]), Nr = [
       });
     }
   }
-}, Mr = { class: "d-d-flex d-fw-wrap" }, Hr = ["reaction"], Fr = { "aria-hidden": "true" }, Vr = { class: "d-mr4" }, qr = { class: "d-fw-bold d-fs-100" };
+}, Mr = { class: "d-d-flex d-fw-wrap" }, Hr = ["reaction"], Vr = { "aria-hidden": "true" }, Fr = { class: "d-mr4" }, qr = { class: "d-fw-bold d-fs-100" };
 function Kr(e, s, t, o, n, i) {
-  const r = f("dt-emoji-text-wrapper"), h = f("dt-emoji"), u = f("dt-button"), g = f("dt-tooltip");
+  const r = p("dt-emoji-text-wrapper"), h = p("dt-emoji"), u = p("dt-button"), g = p("dt-tooltip");
   return a(), l("span", Mr, [
     (a(!0), l(Y, null, ee(t.reactions, (w) => (a(), l("span", {
       key: w.unicodeOutput,
@@ -10655,9 +10649,9 @@ function Kr(e, s, t, o, n, i) {
       m(g, {
         class: "d-d-inline-block",
         "content-class": "d-wmx464",
-        onShown: (b) => i.emojiHovered(w, b)
+        onShown: (_) => i.emojiHovered(w, _)
       }, {
-        anchor: c(({ attrs: b }) => [
+        anchor: c(({ attrs: _ }) => [
           m(u, {
             importance: "clear",
             size: "sm",
@@ -10668,23 +10662,23 @@ function Kr(e, s, t, o, n, i) {
                   'h:d-bgc-purple-400 h:d-bco25 a:d-bgc-purple-400 a:d-bco25` : "d-fc-black-600 d-bgc-black-100 h:d-bgc-white h:d-bc-black-600 a:d-bgc-white a:d-bc-black-600"
             ]),
             "aria-label": w.ariaLabel,
-            attrs: b,
+            attrs: _,
             onClick: (L) => i.emojiClicked(w)
           }, {
             default: c(() => [
-              _("span", Vr, [
+              b("span", Fr, [
                 m(h, {
                   size: "200",
                   code: w.emojiUnicodeOrShortname
                 }, null, 8, ["code"])
               ]),
-              _("span", qr, I(w.num), 1)
+              b("span", qr, I(w.num), 1)
             ]),
             _: 2
           }, 1032, ["class", "aria-label", "attrs", "onClick"])
         ]),
         default: c(() => [
-          _("span", Fr, [
+          b("span", Vr, [
             m(r, { size: "200" }, {
               default: c(() => [
                 P(I(w.tooltip), 1)
@@ -10712,12 +10706,12 @@ export {
   xt as BADGE_TYPE_MODIFIERS,
   Pi as BREADCRUMBS_INVERTED_MODIFIER,
   Di as BREADCRUMB_ITEM_SELECTED_MODIFIER,
-  $t as BUTTON_GROUP_ALIGNMENT,
+  Nt as BUTTON_GROUP_ALIGNMENT,
   hs as CALLBAR_BUTTON_VALID_WIDTH_SIZE,
-  Vt as CHIP_SIZE_MODIFIERS,
+  Ft as CHIP_SIZE_MODIFIERS,
   vl as COLOR_CODES,
   Bd as DEFAULT_VALIDATION_MESSAGE_TYPE,
-  $d as DESCRIPTION_SIZE_TYPES,
+  Nd as DESCRIPTION_SIZE_TYPES,
   st as DtAvatar,
   ci as DtBadge,
   Wr as DtBanner,
@@ -10744,7 +10738,7 @@ export {
   Xt as DtInputMixin,
   ss as DtKeyboardListNavigationMixin,
   md as DtKeyboardShortcut,
-  $e as DtLazyShow,
+  Ne as DtLazyShow,
   Bi as DtLink,
   ze as DtListItem,
   nd as DtListItemGroup,
@@ -10764,28 +10758,28 @@ export {
   Ld as DtRecipeContactRow,
   Pd as DtRecipeEmojiRow,
   Ad as DtRecipeFeedItemRow,
-  fs as DtRecipeGeneralRow,
+  ps as DtRecipeGeneralRow,
   Od as DtRecipeGroupRow,
-  Ed as DtRecipeGroupedChip,
+  kd as DtRecipeGroupedChip,
   wd as DtRecipeIvrNode,
-  kd as DtRecipeSettingsMenuButton,
+  Ed as DtRecipeSettingsMenuButton,
   Dd as DtRecipeTimePill,
   Cd as DtRecipeTopBannerInfo,
   Td as DtRecipeUnreadPill,
   gd as DtRootLayout,
   bd as DtScroller,
   ud as DtSelectMenu,
-  $s as DtSkeleton,
-  Nd as DtSkeletonListItem,
+  Ns as DtSkeleton,
+  $d as DtSkeletonListItem,
   zd as DtSkeletonParagraph,
   Md as DtSkeletonShape,
   Hd as DtSkeletonText,
   _d as DtStack,
-  Fd as DtTab,
-  Vd as DtTabGroup,
+  Vd as DtTab,
+  Fd as DtTabGroup,
   rd as DtTabPanel,
   hd as DtToast,
-  fd as DtToggle,
+  pd as DtToggle,
   Je as DtTooltip,
   me as DtValidationMessages,
   qd as ICON_SIZE_MODIFIERS,
@@ -10794,16 +10788,16 @@ export {
   ht as IVR_NODE_BRANCH,
   ut as IVR_NODE_EXPERT,
   He as IVR_NODE_GO_TO,
-  pt as IVR_NODE_HANGUP,
-  kl as IVR_NODE_ICON_TYPES,
+  ft as IVR_NODE_HANGUP,
+  El as IVR_NODE_ICON_TYPES,
   Id as IVR_NODE_LABELS,
   dt as IVR_NODE_PROMPT_COLLECT,
   rt as IVR_NODE_PROMPT_MENU,
   ct as IVR_NODE_PROMPT_PLAY,
-  ft as IVR_NODE_TRANSFER,
+  pt as IVR_NODE_TRANSFER,
   Be as LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,
   ql as LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,
-  Vl as LEFTBAR_GENERAL_ROW_ICON_MAPPING,
+  Fl as LEFTBAR_GENERAL_ROW_ICON_MAPPING,
   Kl as LEFTBAR_GENERAL_ROW_ICON_SIZES,
   z as LEFTBAR_GENERAL_ROW_TYPES,
   xs as LINK_KIND_MODIFIERS,
@@ -10813,18 +10807,18 @@ export {
   Go as MULTI_SELECT_SIZES,
   Oe as NOTICE_KINDS,
   os as POPOVER_CONTENT_WIDTHS,
-  kn as POPOVER_HEADER_FOOTER_PADDING_CLASSES,
+  En as POPOVER_HEADER_FOOTER_PADDING_CLASSES,
   Ln as POPOVER_INITIAL_FOCUS_STRINGS,
   zt as POPOVER_PADDING_CLASSES,
   On as POPOVER_ROLES,
   be as PRESENCE_STATES,
   js as PRESENCE_STATES_LIST,
-  Nr as REACTIONS_ATTRIBUTES,
+  $r as REACTIONS_ATTRIBUTES,
   Co as ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS,
   ds as ROOT_LAYOUT_SIDEBAR_POSITIONS,
   qt as SELECT_SIZE_MODIFIERS,
   Ua as SELECT_STATE_MODIFIERS,
-  pd as SHORTCUTS_ALIASES_LIST,
+  fd as SHORTCUTS_ALIASES_LIST,
   ye as SHORTCUTS_ICON_ALIASES,
   _o as SHORTCUTS_ICON_SEPARATOR,
   Gd as SKELETON_HEADING_HEIGHTS,