@dialpad/dialtone-vue 3.73.2 → 3.74.0

package/dist/dialtone-vue.js

@@ -1,10 +1,10 @@
-import { openBlock as a, createElementBlock as o, toDisplayString as C, createCommentVNode as g, createElementVNode as _, normalizeClass as b, warn as we, resolveComponent as f, renderSlot as d, createBlock as S, mergeProps as I, createVNode as p, createTextVNode as R, withCtx as c, normalizeStyle as oe, withKeys as Y, Fragment as W, renderList as X, resolveDynamicComponent as se, toHandlers as z, createSlots as ke, withModifiers as te, normalizeProps as Le, Transition as Ge, withDirectives as Se, guardReactiveProps as Ue, vShow as Ie, Teleport as vs, reactive as Tt, ref as me, computed as xe, watch as Ut, onMounted as Ss, nextTick as Is, unref as Wt, markRaw as Cs, shallowReactive as ws, h as ks, provide as Ls, createStaticVNode as Os } from "vue";
-import { _ as v, D as B, g as j, a as Ts, h as M, b as K, u as Q, L as Es, c as As, I as Ds, M as Rs, d as We, e as Ze, E as V, f as pe, v as Zt, i as Et, j as Ke, k as Yt, C as Qt, G as Xt, l as Ye, m as xs, n as Bs, o as Ps, p as Qe, s as Xe } from "./index-a257a50a.js";
-import { r as gd, q as _d, z as bd, y as yd, P as vd, x as Sd, w as Id, F as Cd, B as wd, T as kd, A as Ld, J as Od, H as Td, O as Ed, K as Ad, N as Dd, V as Rd, t as xd } from "./index-a257a50a.js";
+import { openBlock as a, createElementBlock as o, toDisplayString as C, createCommentVNode as g, createElementVNode as _, normalizeClass as y, warn as we, resolveComponent as f, renderSlot as d, createBlock as S, mergeProps as I, createVNode as p, createTextVNode as R, withCtx as c, normalizeStyle as se, withKeys as Y, Fragment as W, renderList as X, resolveDynamicComponent as ie, toHandlers as z, createSlots as ke, withModifiers as te, normalizeProps as Le, Transition as Ge, withDirectives as Se, guardReactiveProps as Ue, vShow as Ie, Teleport as vs, reactive as Et, ref as me, computed as xe, watch as Ut, onMounted as Ss, nextTick as Is, unref as Wt, markRaw as Cs, shallowReactive as ws, h as ks, provide as Ls, createStaticVNode as Os } from "vue";
+import { _ as v, D as B, g as j, a as Es, h as M, b as K, u as Q, L as Ts, c as As, I as Ds, M as Rs, d as We, e as Ze, E as q, f as pe, v as Zt, i as Tt, j as Ke, k as Yt, C as Qt, G as Xt, l as Ye, m as xs, n as Bs, o as Ps, p as Qe, s as Xe } from "./index-a257a50a.js";
+import { r as md, q as pd, z as gd, y as _d, P as bd, x as yd, w as vd, F as Sd, B as Id, T as Cd, A as wd, J as kd, H as Ld, O as Od, K as Ed, N as Td, V as Ad, t as Dd } from "./index-a257a50a.js";
 import { S as Je, a as re, M as Pe, D as et, P as tt, b as $s } from "./popover-3dbe0634.js";
-import { d as Pd, f as $d, c as Nd, e as zd } from "./popover-3dbe0634.js";
+import { d as xd, f as Bd, c as Pd, e as $d } from "./popover-3dbe0634.js";
 import { D as Ns, _ as st, a as zs } from "./emoji_text_wrapper-e07187bc.js";
-import { b as Vd, e as qd, d as Hd, c as Fd, i as jd, S as Kd, f as Gd, h as Ud, g as Wd } from "./emoji_text_wrapper-e07187bc.js";
+import { b as zd, e as Md, d as qd, c as Vd, i as Hd, S as Fd, f as jd, h as Kd, g as Gd } from "./emoji_text_wrapper-e07187bc.js";
 const be = {
   BUSY: "busy",
   AWAY: "away",
@@ -15,7 +15,7 @@ const be = {
   be.AWAY,
   be.OFFLINE,
   be.ACTIVE
-], Vs = {
+], qs = {
   name: "DtPresence",
   props: {
     /**
@@ -38,7 +38,7 @@ const be = {
       default: null
     }
   }
-}, qs = ["aria-live"], Hs = {
+}, Vs = ["aria-live"], Hs = {
   key: 0,
   "data-qa": "dt-presence-sr-text",
   class: "sr-only"
@@ -52,16 +52,16 @@ function Fs(e, s, t, l, n, i) {
   }, [
     t.srText ? (a(), o("span", Hs, C(t.srText), 1)) : g("", !0),
     _("div", {
-      class: b(["d-presence__inner", {
+      class: y(["d-presence__inner", {
         "d-presence__inner--active": t.presence === "active",
         "d-presence__inner--away": t.presence === "away",
         "d-presence__inner--busy": t.presence === "busy",
         "d-presence__inner--offline": t.presence === "offline"
       }])
     }, null, 2)
-  ], 8, qs);
+  ], 8, Vs);
 }
-const js = /* @__PURE__ */ v(Vs, [["render", Fs]]), qe = {
+const js = /* @__PURE__ */ v(qs, [["render", Fs]]), Ve = {
   xs: "d-avatar--xs",
   sm: "d-avatar--sm",
   md: "d-avatar--md",
@@ -80,7 +80,7 @@ const js = /* @__PURE__ */ v(Vs, [["render", Fs]]), qe = {
   AWAY: "away",
   OFFLINE: "offline",
   ACTIVE: "active"
-}, Tr = {
+}, Lr = {
   xs: void 0,
   sm: "200",
   md: "300",
@@ -144,7 +144,7 @@ const Us = {
     size: {
       type: String,
       default: "md",
-      validator: (e) => Object.keys(qe).includes(e)
+      validator: (e) => Object.keys(Ve).includes(e)
     },
     /**
      * Used to customize the avatar container
@@ -221,7 +221,7 @@ const Us = {
     return {
       // initials, image or icon
       kind: null,
-      AVATAR_SIZE_MODIFIERS: qe,
+      AVATAR_SIZE_MODIFIERS: Ve,
       AVATAR_KIND_MODIFIERS: At,
       AVATAR_PRESENCE_SIZE_MODIFIERS: Ks,
       imageLoadedSuccessfully: null,
@@ -234,7 +234,7 @@ const Us = {
     avatarClasses() {
       return [
         "d-avatar",
-        qe[this.validatedSize],
+        Ve[this.validatedSize],
         this.avatarClass,
         {
           "d-avatar--group": this.showGroup,
@@ -321,7 +321,7 @@ const Us = {
       return ((s = e == null ? void 0 : e.tagName) == null ? void 0 : s.toUpperCase()) === "IMG";
     },
     getColor() {
-      return this.color ?? Ts(Gs, this.seed);
+      return this.color ?? Es(Gs, this.seed);
     },
     validateImageAttrsPresence() {
       const e = !this.$refs.canvas.children[0].getAttribute("src"), s = this.$refs.canvas.children[0].getAttribute("alt") === null;
@@ -346,22 +346,22 @@ function Qs(e, s, t, l, n, i) {
   const r = f("dt-icon"), h = f("dt-presence");
   return a(), o("div", {
     id: t.id,
-    class: b(i.avatarClasses),
+    class: y(i.avatarClasses),
     "data-qa": "dt-avatar"
   }, [
     _("div", {
       ref: "canvas",
-      class: b([t.canvasClass, "d-avatar__canvas"])
+      class: y([t.canvasClass, "d-avatar__canvas"])
     }, [
       i.showDefaultSlot ? d(e.$slots, "default", { key: 0 }) : g("", !0),
       i.showInitials ? (a(), o("span", {
         key: 1,
-        class: b(["d-ps-absolute d-zi-base", n.AVATAR_KIND_MODIFIERS.initials])
+        class: y(["d-ps-absolute d-zi-base", n.AVATAR_KIND_MODIFIERS.initials])
       }, C(n.formattedInitials), 3)) : g("", !0)
     ], 2),
     t.overlayIcon || t.overlayText ? (a(), o("div", {
       key: 0,
-      class: b(i.overlayClasses)
+      class: y(i.overlayClasses)
     }, [
       t.overlayIcon ? (a(), S(r, {
         key: 0,
@@ -520,7 +520,7 @@ const it = /* @__PURE__ */ v(Us, [["render", Qs]]), xt = {
 function ii(e, s, t, l, n, i) {
   const r = f("dt-icon");
   return a(), o("span", {
-    class: b([
+    class: y([
       "d-badge",
       n.BADGE_TYPE_MODIFIERS[t.type],
       n.BADGE_KIND_MODIFIERS[t.kind],
@@ -892,12 +892,12 @@ const lt = /* @__PURE__ */ v(pi, [["render", _i]]), bi = {
 function vi(e, s, t, l, n, i) {
   const r = f("dt-notice-icon"), h = f("dt-notice-content"), u = f("dt-notice-action");
   return a(), o("aside", {
-    class: b(i.bannerClass),
-    style: oe(i.bannerBackgroundImage),
-    onKeydown: s[1] || (s[1] = Y((...y) => i.trapFocus && i.trapFocus(...y), ["tab"]))
+    class: y(i.bannerClass),
+    style: se(i.bannerBackgroundImage),
+    onKeydown: s[1] || (s[1] = Y((...b) => i.trapFocus && i.trapFocus(...b), ["tab"]))
   }, [
     _("div", {
-      class: b(["d-banner__dialog", t.dialogClass]),
+      class: y(["d-banner__dialog", t.dialogClass]),
       role: i.role,
       "aria-labelledby": t.titleId,
       "aria-describedby": t.contentId
@@ -929,7 +929,7 @@ function vi(e, s, t, l, n, i) {
         "close-button-props": t.closeButtonProps,
         "visually-hidden-close": e.visuallyHiddenClose,
         "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
-        onClose: s[0] || (s[0] = (y) => e.$emit("close"))
+        onClose: s[0] || (s[0] = (b) => e.$emit("close"))
       }, {
         default: c(() => [
           d(e.$slots, "action")
@@ -939,7 +939,7 @@ function vi(e, s, t, l, n, i) {
     ], 10, yi)
   ], 38);
 }
-const Er = /* @__PURE__ */ v(bi, [["render", vi]]), Si = "d-breadcrumbs__item--selected", Ii = "d-breadcrumbs--inverted", Ci = {
+const Or = /* @__PURE__ */ v(bi, [["render", vi]]), Si = "d-breadcrumbs__item--selected", Ii = "d-breadcrumbs--inverted", Ci = {
   name: "DtLink",
   props: {
     /**
@@ -950,7 +950,7 @@ const Er = /* @__PURE__ */ v(bi, [["render", vi]]), Si = "d-breadcrumbs__item--s
       type: String,
       default: "",
       validator(e) {
-        return Es.includes(e);
+        return Ts.includes(e);
       }
     }
   },
@@ -962,7 +962,7 @@ const Er = /* @__PURE__ */ v(bi, [["render", vi]]), Si = "d-breadcrumbs__item--s
 };
 function wi(e, s, t, l, n, i) {
   return a(), o("a", {
-    class: b([
+    class: y([
       "d-link",
       n.LINK_KIND_MODIFIERS[t.kind]
     ]),
@@ -1018,7 +1018,7 @@ function Oi(e, s, t, l, n, i) {
   const r = f("dt-link");
   return a(), o("li", {
     "data-qa": "dt-breadcrumb-item",
-    class: b([
+    class: y([
       "d-breadcrumbs__item",
       { [n.BREADCRUMB_ITEM_SELECTED_MODIFIER]: t.selected }
     ])
@@ -1037,10 +1037,10 @@ function Oi(e, s, t, l, n, i) {
     }, 16, ["kind", "aria-current"])
   ], 2);
 }
-const Ti = /* @__PURE__ */ v(Li, [["render", Oi]]), Ei = {
+const Ei = /* @__PURE__ */ v(Li, [["render", Oi]]), Ti = {
   name: "DtBreadcrumbs",
   components: {
-    DtBreadcrumbItem: Ti
+    DtBreadcrumbItem: Ei
   },
   props: {
     /**
@@ -1085,7 +1085,7 @@ function Di(e, s, t, l, n, i) {
   return a(), o("nav", {
     "aria-label": t.ariaLabel,
     "data-qa": "dt-breadcrumbs",
-    class: b([
+    class: y([
       "d-breadcrumbs",
       { [n.BREADCRUMBS_INVERTED_MODIFIER]: t.inverted }
     ])
@@ -1100,7 +1100,7 @@ function Di(e, s, t, l, n, i) {
     ])
   ], 10, Ai);
 }
-const Ar = /* @__PURE__ */ v(Ei, [["render", Di]]), $t = {
+const Er = /* @__PURE__ */ v(Ti, [["render", Di]]), $t = {
   start: "d-btn-group--start",
   end: "d-btn-group--end",
   "space-between": "d-btn-group--space-between"
@@ -1124,7 +1124,7 @@ const Ar = /* @__PURE__ */ v(Ei, [["render", Di]]), $t = {
 };
 function xi(e, s, t, l, n, i) {
   return a(), o("div", {
-    class: b([
+    class: y([
       "d-btn-group",
       n.BUTTON_GROUP_ALIGNMENT[t.alignment]
     ]),
@@ -1133,7 +1133,7 @@ function xi(e, s, t, l, n, i) {
     d(e.$slots, "default")
   ], 2);
 }
-const Dr = /* @__PURE__ */ v(Ri, [["render", xi]]), Bi = {
+const Tr = /* @__PURE__ */ v(Ri, [["render", xi]]), Bi = {
   name: "DtCard",
   props: {
     /**
@@ -1181,7 +1181,7 @@ const Dr = /* @__PURE__ */ v(Ri, [["render", xi]]), Bi = {
 };
 function Pi(e, s, t, l, n, i) {
   return a(), o("div", {
-    class: b([
+    class: y([
       "d-card",
       t.containerClass
     ]),
@@ -1189,7 +1189,7 @@ function Pi(e, s, t, l, n, i) {
   }, [
     n.hasSlotContent(e.$slots.header) ? (a(), o("div", {
       key: 0,
-      class: b([
+      class: y([
         "d-card__header",
         t.headerClass
       ])
@@ -1197,17 +1197,17 @@ function Pi(e, s, t, l, n, i) {
       d(e.$slots, "header")
     ], 2)) : g("", !0),
     _("div", {
-      class: b([
+      class: y([
         "d-card__content",
         t.contentClass
       ]),
-      style: oe({ "max-height": t.maxHeight })
+      style: se({ "max-height": t.maxHeight })
     }, [
       d(e.$slots, "content")
     ], 6),
     n.hasSlotContent(e.$slots.footer) ? (a(), o("div", {
       key: 1,
-      class: b([
+      class: y([
         "d-card__footer",
         t.footerClass
       ])
@@ -1233,7 +1233,7 @@ function Mi(e, s, t, l, n, i) {
   `)
   ]);
 }
-const Rr = /* @__PURE__ */ v(Ni, [["render", Mi]]), Vi = {
+const Ar = /* @__PURE__ */ v(Ni, [["render", Mi]]), qi = {
   methods: {
     /**
      * Scroll an element into view if it is not fully visible in its nearest scrollable ancestor.
@@ -1260,14 +1260,14 @@ const Rr = /* @__PURE__ */ v(Ni, [["render", Mi]]), Vi = {
     scrollIntoView(e, s, t, l, n) {
       if (!e || !e.parentElement)
         return;
-      const i = e.offsetTop, r = n || e.parentElement, h = this._getScrollBounds(r), u = h.bottom - h.top, y = this._getElementHeight(e), w = i + y;
+      const i = e.offsetTop, r = n || e.parentElement, h = this._getScrollBounds(r), u = h.bottom - h.top, b = this._getElementHeight(e), w = i + b;
       let m = -1;
       switch (s) {
         case "top":
           m = i;
           break;
         case "center":
-          m = i + (y - u) / 2;
+          m = i + (b - u) / 2;
           break;
         case "bottom":
           m = m = w - u;
@@ -1305,7 +1305,7 @@ const Rr = /* @__PURE__ */ v(Ni, [["render", Mi]]), Vi = {
       return s <= t.bottom + 3 * l / 4 && e >= t.top - l / 4;
     }
   }
-}, qi = "listElementKey is required or the referenced element doesn't exist. Received listElement: ", Jt = ({
+}, Vi = "listElementKey is required or the referenced element doesn't exist. Received listElement: ", Jt = ({
   // Role of the list items in the component. This is used to identify the list items
   // so you must update this if the role of your list items is anything other than 'option'
   listItemRole: e = "option",
@@ -1326,16 +1326,16 @@ const Rr = /* @__PURE__ */ v(Ni, [["render", Mi]]), Vi = {
   // Optional, method to call when the highlightIndex goes past the end of the list.
   endOfListMethod: u = null,
   // Scroll the active element into view when highlighted by a keyboard event.
-  scrollToOnHighlight: y = !0,
+  scrollToOnHighlight: b = !0,
   // Focus the active element on keyboard navigation.
   focusOnKeyboardNavigation: w = !1
 } = {}) => ({
-  mixins: [Vi],
+  mixins: [qi],
   data() {
     return {
       [s]: -1,
       [t]: "",
-      scrollToOnHighlight: y,
+      scrollToOnHighlight: b,
       focusOnKeyboardNavigation: w
     };
   },
@@ -1361,7 +1361,7 @@ const Rr = /* @__PURE__ */ v(Ni, [["render", Mi]]), Vi = {
     // Gets all the list item nodes within the list element
     _getListItemNodes() {
       const m = this._getListElement();
-      return m ? Array.from(m.querySelectorAll(`[role="${e}"], #sr-only-close-button`)) : (console.error(qi, m), null);
+      return m ? Array.from(m.querySelectorAll(`[role="${e}"], #sr-only-close-button`)) : (console.error(Vi, m), null);
     },
     onUpKey() {
       i && this[i](!0), this[s] > 0 ? this.setHighlightIndex(this[s] - 1) : h && this[h](), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
@@ -1376,10 +1376,10 @@ const Rr = /* @__PURE__ */ v(Ni, [["render", Mi]]), Vi = {
       this.jumpToEnd(), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
     },
     onNavigationKey(m) {
-      const T = this._getListItemNodes(), P = T.filter((fe) => fe.textContent.trim().toLowerCase().startsWith(m.toLowerCase()));
+      const E = this._getListItemNodes(), P = E.filter((fe) => fe.textContent.trim().toLowerCase().startsWith(m.toLowerCase()));
       if (P.length <= 0)
         return;
-      const de = P.findIndex((fe) => this[s] === T.indexOf(fe)), he = T.indexOf(
+      const de = P.findIndex((fe) => this[s] === E.indexOf(fe)), he = E.indexOf(
         de < P.length - 1 ? P[de + 1] : P[0]
       );
       this.setHighlightIndex(he), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
@@ -1400,22 +1400,22 @@ const Rr = /* @__PURE__ */ v(Ni, [["render", Mi]]), Vi = {
       this[t] = m, this[s] = this._getItemIndex(m), this._itemsLength() && r && this[r](this._getItemIndex(m));
     },
     _getItemIndex(m) {
-      const T = this._getListElement();
-      return T ? Array.from(T.querySelectorAll(`[role="${e}"], #sr-only-close-button`)).indexOf(T.querySelector(`#${m}`)) : void 0;
+      const E = this._getListElement();
+      return E ? Array.from(E.querySelectorAll(`[role="${e}"], #sr-only-close-button`)).indexOf(E.querySelector(`#${m}`)) : void 0;
     },
     _getItemId(m) {
       var P;
-      const T = this._getListElement();
-      if (T)
-        return (P = T.querySelectorAll(`[role="${e}"], #sr-only-close-button`)[m]) == null ? void 0 : P.id;
+      const E = this._getListElement();
+      if (E)
+        return (P = E.querySelectorAll(`[role="${e}"], #sr-only-close-button`)[m]) == null ? void 0 : P.id;
     },
     scrollActiveItemIntoViewIfNeeded() {
       if (!this.scrollToOnHighlight)
         return;
       const m = this[n];
       if (m) {
-        const T = this._getListElement();
-        this.scrollElementIntoViewIfNeeded(m, null, null, T);
+        const E = this._getListElement();
+        this.scrollElementIntoViewIfNeeded(m, null, null, E);
       }
     },
     focusActiveItemIfNeeded() {
@@ -1472,7 +1472,7 @@ function Zi(e, s, t, l, n, i) {
       n.hasSlotContent(e.$slots.subtitle) ? (a(), o("div", {
         key: 1,
         "data-qa": "dt-default-list-item-subtitle-wrapper",
-        class: b(["dt-default-list-item--subtitle", { "d-mtn2": e.$slots.default }])
+        class: y(["dt-default-list-item--subtitle", { "d-mtn2": e.$slots.default }])
       }, [
         d(e.$slots, "subtitle")
       ], 2)) : g("", !0),
@@ -1640,7 +1640,7 @@ const Yi = {
 };
 function Qi(e, s, t, l, n, i) {
   const r = f("dt-icon");
-  return a(), S(se(t.elementType), I({
+  return a(), S(ie(t.elementType), I({
     id: t.id,
     class: ["dt-list-item", {
       "dt-list-item--focusable": i.isFocusable,
@@ -1652,7 +1652,7 @@ function Qi(e, s, t, l, n, i) {
     "aria-selected": i.isHighlighted
   }, z(i.listItemListeners)), {
     default: c(() => [
-      i.listItemType ? (a(), S(se(i.listItemType), { key: 0 }, ke({ _: 2 }, [
+      i.listItemType ? (a(), S(ie(i.listItemType), { key: 0 }, ke({ _: 2 }, [
         X(e.$slots, (h, u) => ({
           name: u,
           fn: c(() => [
@@ -1734,7 +1734,7 @@ function nn(e, s, t, l, n, i) {
         role: "option",
         "navigation-type": "none",
         type: "custom",
-        class: b(["dt-empty-list-item", t.itemClass])
+        class: y(["dt-empty-list-item", t.itemClass])
       }, {
         default: c(() => [
           _("span", null, C(t.message), 1)
@@ -2187,7 +2187,7 @@ function cn(e, s, t, l, n, i) {
     onAfterLeave: i.afterLeave
   }), {
     default: c(() => [
-      Se((a(), S(se(t.elementType), Le(Ue(e.$attrs)), {
+      Se((a(), S(ie(t.elementType), Le(Ue(e.$attrs)), {
         default: c(() => [
           n.initialized ? d(e.$slots, "default", { key: 0 }) : g("", !0)
         ]),
@@ -2354,12 +2354,12 @@ const un = /* @__PURE__ */ v(dn, [["render", cn]]), hn = {
 }, fn = ["id"], mn = ["title"];
 function pn(e, s, t, l, n, i) {
   const r = f("dt-icon"), h = f("dt-button"), u = f("dt-collapsible-lazy-show");
-  return a(), S(se(t.elementType), I({ ref: "collapsible" }, z(i.collapsibleListeners)), {
+  return a(), S(ie(t.elementType), I({ ref: "collapsible" }, z(i.collapsibleListeners)), {
     default: c(() => [
       _("div", {
         id: !t.ariaLabelledBy && i.labelledBy,
         ref: "anchor",
-        class: b([
+        class: y([
           "d-dt-collapsibe__anchor",
           t.anchorClass
         ])
@@ -2376,7 +2376,7 @@ function pn(e, s, t, l, n, i) {
             kind: "muted",
             "aria-controls": t.id,
             "aria-expanded": `${n.isOpen}`,
-            style: oe({
+            style: se({
               width: t.maxWidth
             }),
             onClick: i.defaultToggleOpen
@@ -2426,7 +2426,7 @@ function pn(e, s, t, l, n, i) {
     _: 3
   }, 16);
 }
-const xr = /* @__PURE__ */ v(hn, [["render", pn]]), ve = {
+const Dr = /* @__PURE__ */ v(hn, [["render", pn]]), ve = {
   none: void 0,
   small: "d-py0",
   large: "d-py4"
@@ -2660,25 +2660,25 @@ const gn = {
         },
         keydown: (e) => {
           switch (e.code) {
-            case V.up:
-            case V.arrowup:
+            case q.up:
+            case q.arrowup:
               this.onUpKeyPress(e), e.stopPropagation(), e.preventDefault();
               break;
-            case V.down:
-            case V.arrowdown:
+            case q.down:
+            case q.arrowdown:
               this.onDownKeyPress(e), e.stopPropagation(), e.preventDefault();
               break;
-            case V.space:
-            case V.spacebar:
+            case q.space:
+            case q.spacebar:
               this.onSpaceKey();
               break;
-            case V.enter:
+            case q.enter:
               this.onEnterKey();
               break;
-            case V.home:
+            case q.home:
               this.onHomeKeyPress(e), e.stopPropagation(), e.preventDefault();
               break;
-            case V.end:
+            case q.end:
               this.onEndKeyPress(e), e.stopPropagation(), e.preventDefault();
               break;
             default:
@@ -2797,10 +2797,10 @@ function bn(e, s, t, l, n, i) {
       _("ul", {
         id: t.listId,
         ref: "listWrapper",
-        class: b(i.listClasses),
+        class: y(i.listClasses),
         "data-qa": "dt-dropdown-list-wrapper",
-        onMouseleave: s[0] || (s[0] = (...y) => i.clearHighlightIndex && i.clearHighlightIndex(...y)),
-        onMousemoveCapture: s[1] || (s[1] = (...y) => i.onMouseHighlight && i.onMouseHighlight(...y))
+        onMouseleave: s[0] || (s[0] = (...b) => i.clearHighlightIndex && i.clearHighlightIndex(...b)),
+        onMousemoveCapture: s[1] || (s[1] = (...b) => i.onMouseHighlight && i.onMouseHighlight(...b))
       }, [
         d(e.$slots, "list", { close: u }),
         e.showVisuallyHiddenClose ? (a(), S(r, {
@@ -2824,7 +2824,7 @@ const vn = {
 function In(e, s, t, l, n, i) {
   return a(), o("li", Sn);
 }
-const Br = /* @__PURE__ */ v(vn, [["render", In]]), Cn = {
+const Rr = /* @__PURE__ */ v(vn, [["render", In]]), Cn = {
   name: "DtImageViewer",
   components: {
     DtButton: K,
@@ -2908,11 +2908,11 @@ const Br = /* @__PURE__ */ v(vn, [["render", In]]), Cn = {
         },
         keydown: (e) => {
           switch (e.code) {
-            case V.esc:
-            case V.escape:
+            case q.esc:
+            case q.escape:
               this.close();
               break;
-            case V.tab:
+            case q.tab:
               this.trapFocus(e);
               break;
           }
@@ -2958,7 +2958,7 @@ const Br = /* @__PURE__ */ v(vn, [["render", In]]), Cn = {
   role: "dialog",
   "aria-modal": "true"
 }, On = ["src", "alt"];
-function Tn(e, s, t, l, n, i) {
+function En(e, s, t, l, n, i) {
   const r = f("dt-button"), h = f("dt-icon");
   return a(), o("div", null, [
     p(r, {
@@ -2970,7 +2970,7 @@ function Tn(e, s, t, l, n, i) {
     }, {
       default: c(() => [
         _("img", {
-          class: b(t.imageButtonClass),
+          class: y(t.imageButtonClass),
           src: t.imageSrc,
           alt: t.imageAlt
         }, null, 10, wn)
@@ -3027,7 +3027,7 @@ function Tn(e, s, t, l, n, i) {
     ])) : g("", !0)
   ]);
 }
-const Pr = /* @__PURE__ */ v(Cn, [["render", Tn]]), En = {
+const xr = /* @__PURE__ */ v(Cn, [["render", En]]), Tn = {
   components: { DtValidationMessages: pe },
   // provide data to slotted components
   provide() {
@@ -3130,7 +3130,7 @@ const Pr = /* @__PURE__ */ v(Cn, [["render", Tn]]), En = {
     "input"
   ],
   data() {
-    const e = Et(this.messages);
+    const e = Tt(this.messages);
     return {
       // wrap values in object to make reactive
       provideObj: {
@@ -3142,7 +3142,7 @@ const Pr = /* @__PURE__ */ v(Cn, [["render", Tn]]), En = {
   },
   computed: {
     formattedMessages() {
-      return Et(this.messages);
+      return Tt(this.messages);
     },
     validationState() {
       return Ke(this.formattedMessages);
@@ -3171,7 +3171,7 @@ const Pr = /* @__PURE__ */ v(Cn, [["render", Tn]]), En = {
 }, An = {
   name: "DtInputGroup",
   components: { DtValidationMessages: pe },
-  mixins: [En],
+  mixins: [Tn],
   props: {
     /**
      * A data qa tag for the input group
@@ -3249,7 +3249,7 @@ const is = /* @__PURE__ */ v(An, [["render", xn]]), zt = {
 }, Mt = {
   default: "",
   full: "d-modal--full"
-}, Vt = {
+}, qt = {
   error: "d-modal__banner--critical",
   info: "d-modal__banner--info",
   success: "d-modal__banner--success",
@@ -3370,7 +3370,7 @@ const is = /* @__PURE__ */ v(An, [["render", xn]]), zt = {
 function Pn(e, s, t, l, n, i) {
   const r = f("dt-notice-icon"), h = f("dt-notice-content"), u = f("dt-notice-action");
   return a(), o("aside", {
-    class: b(i.noticeClass),
+    class: y(i.noticeClass),
     "data-qa": "notice"
   }, [
     p(r, { kind: t.kind }, {
@@ -3398,7 +3398,7 @@ function Pn(e, s, t, l, n, i) {
       "close-button-props": t.closeButtonProps,
       "visually-hidden-close": e.visuallyHiddenClose,
       "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
-      onClose: s[0] || (s[0] = (y) => e.$emit("close"))
+      onClose: s[0] || (s[0] = (b) => e.$emit("close"))
     }, {
       default: c(() => [
         d(e.$slots, "action")
@@ -3407,7 +3407,7 @@ function Pn(e, s, t, l, n, i) {
     }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
   ], 2);
 }
-const $r = /* @__PURE__ */ v(Bn, [["render", Pn]]), $n = {
+const Br = /* @__PURE__ */ v(Bn, [["render", Pn]]), $n = {
   name: "DtModal",
   components: {
     DtLazyShow: We,
@@ -3592,8 +3592,8 @@ const $r = /* @__PURE__ */ v(Bn, [["render", Pn]]), $n = {
     return {
       MODAL_KIND_MODIFIERS: zt,
       MODAL_SIZE_MODIFIERS: Mt,
-      MODAL_BANNER_KINDS: Vt,
-      EVENT_KEYNAMES: V,
+      MODAL_BANNER_KINDS: qt,
+      EVENT_KEYNAMES: q,
       hasSlotContent: M
     };
   },
@@ -3605,11 +3605,11 @@ const $r = /* @__PURE__ */ v(Bn, [["render", Pn]]), $n = {
         },
         keydown: (e) => {
           switch (e.code) {
-            case V.esc:
-            case V.escape:
+            case q.esc:
+            case q.escape:
               this.close();
               break;
-            case V.tab:
+            case q.tab:
               this.trapFocus(e);
               break;
           }
@@ -3627,7 +3627,7 @@ const $r = /* @__PURE__ */ v(Bn, [["render", Pn]]), $n = {
       return !!this.$slots.footer;
     },
     bannerKindClass() {
-      return Vt[this.bannerKind];
+      return qt[this.bannerKind];
     }
   },
   watch: {
@@ -3661,13 +3661,13 @@ const $r = /* @__PURE__ */ v(Bn, [["render", Pn]]), $n = {
         need to be set so the component always includes a close button`);
     }
   }
-}, Nn = ["aria-describedby", "aria-labelledby"], zn = ["id"], Mn = ["id"], Vn = {
+}, Nn = ["aria-describedby", "aria-labelledby"], zn = ["id"], Mn = ["id"], qn = {
   key: 4,
   class: "d-modal__footer"
 };
-function qn(e, s, t, l, n, i) {
-  const r = f("dt-icon"), h = f("dt-button"), u = f("sr-only-close-button"), y = f("dt-lazy-show");
-  return a(), S(y, I({
+function Vn(e, s, t, l, n, i) {
+  const r = f("dt-icon"), h = f("dt-button"), u = f("sr-only-close-button"), b = f("dt-lazy-show");
+  return a(), S(b, I({
     transition: "d-zoom",
     show: t.show,
     class: [
@@ -3683,7 +3683,7 @@ function qn(e, s, t, l, n, i) {
       t.show && (n.hasSlotContent(e.$slots.banner) || t.bannerTitle) ? (a(), o("div", {
         key: 0,
         "data-qa": "dt-modal-banner",
-        class: b([
+        class: y([
           "d-modal__banner",
           t.bannerClass,
           i.bannerKindClass
@@ -3699,7 +3699,7 @@ function qn(e, s, t, l, n, i) {
       }, {
         default: c(() => [
           Se(_("div", {
-            class: b([
+            class: y([
               "d-modal__dialog",
               { "d-modal__dialog--scrollable": t.fixedHeaderFooter },
               t.dialogClass
@@ -3724,7 +3724,7 @@ function qn(e, s, t, l, n, i) {
             }, C(t.title), 9, Mn)),
             n.hasSlotContent(e.$slots.default) ? (a(), o("div", {
               key: 2,
-              class: b([
+              class: y([
                 "d-modal__content",
                 t.contentClass
               ]),
@@ -3733,13 +3733,13 @@ function qn(e, s, t, l, n, i) {
               d(e.$slots, "default")
             ], 2)) : (a(), o("p", {
               key: 3,
-              class: b([
+              class: y([
                 "d-modal__content",
                 t.contentClass
               ]),
               "data-qa": "dt-modal-copy"
             }, C(t.copy), 3)),
-            i.hasFooterSlot ? (a(), o("footer", Vn, [
+            i.hasFooterSlot ? (a(), o("footer", qn, [
               d(e.$slots, "footer")
             ])) : g("", !0),
             t.hideClose ? g("", !0) : (a(), S(h, I({
@@ -3773,7 +3773,7 @@ function qn(e, s, t, l, n, i) {
     _: 3
   }, 16, ["show", "class", "aria-hidden"]);
 }
-const Nr = /* @__PURE__ */ v($n, [["render", qn]]);
+const Pr = /* @__PURE__ */ v($n, [["render", Vn]]);
 const Hn = {
   name: "ListSection",
   components: {
@@ -3857,7 +3857,7 @@ function Wn(e, s, t, l, n, i) {
     role: "group",
     "aria-labelledby": `${t.id}-list-section-header`,
     tabindex: "-1",
-    class: b([
+    class: y([
       "dt-list-section",
       "d-fs-200",
       "d-lh6",
@@ -3899,7 +3899,7 @@ function Wn(e, s, t, l, n, i) {
     ])
   ], 10, Fn);
 }
-const zr = /* @__PURE__ */ v(Hn, [["render", Wn]]), Zn = {
+const $r = /* @__PURE__ */ v(Hn, [["render", Wn]]), Zn = {
   name: "DtListItemGroup",
   props: {
     /**
@@ -3937,7 +3937,7 @@ const zr = /* @__PURE__ */ v(Hn, [["render", Wn]]), Zn = {
 function Xn(e, s, t, l, n, i) {
   return a(), o("ul", {
     id: t.id,
-    class: b(["d-ps-relative", "d-px0", t.listClass]),
+    class: y(["d-ps-relative", "d-px0", t.listClass]),
     role: "group",
     "data-qa": "dt-dropdown-list-wrapper",
     "aria-labelledby": `${t.id}-heading`
@@ -3947,7 +3947,7 @@ function Xn(e, s, t, l, n, i) {
       id: `${t.id}-heading`,
       role: "presentation",
       "data-qa": "dt-dropdown-list-heading",
-      class: b(["dt-dropdown-list--header", t.headingClass])
+      class: y(["dt-dropdown-list--header", t.headingClass])
     }, [
       d(e.$slots, "headingSlot", {}, () => [
         R(C(t.heading), 1)
@@ -3956,7 +3956,7 @@ function Xn(e, s, t, l, n, i) {
     d(e.$slots, "default")
   ], 10, Yn);
 }
-const Mr = /* @__PURE__ */ v(Zn, [["render", Xn]]), Jn = {
+const Nr = /* @__PURE__ */ v(Zn, [["render", Xn]]), Jn = {
   name: "DtPagination",
   components: {
     DtButton: K,
@@ -4074,7 +4074,7 @@ function sa(e, s, t, l, n, i) {
     class: "d-d-flex d-fd-row d-gg4 d-ai-center"
   }, [
     p(h, {
-      class: b(["d-px8", i.isFirstPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
+      class: y(["d-px8", i.isFirstPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
       "data-qa": "dt-pagination-prev",
       "aria-label": t.prevAriaLabel,
       kind: i.isFirstPage ? "default" : "muted",
@@ -4090,9 +4090,9 @@ function sa(e, s, t, l, n, i) {
       ]),
       _: 1
     }, 8, ["aria-label", "kind", "importance", "disabled", "class"]),
-    (a(!0), o(W, null, X(i.pages, (u, y) => (a(), o("div", {
-      key: `page-${u}-${y}`,
-      class: b({ "d-as-flex-end": isNaN(Number(u)) })
+    (a(!0), o(W, null, X(i.pages, (u, b) => (a(), o("div", {
+      key: `page-${u}-${b}`,
+      class: y({ "d-as-flex-end": isNaN(Number(u)) })
     }, [
       isNaN(Number(u)) ? (a(), o("div", ta, [
         p(r, {
@@ -4114,7 +4114,7 @@ function sa(e, s, t, l, n, i) {
       }, 1032, ["aria-label", "kind", "importance", "onClick"]))
     ], 2))), 128)),
     p(h, {
-      class: b(["d-px8", i.isLastPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
+      class: y(["d-px8", i.isLastPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
       "data-qa": "dt-pagination-next",
       "aria-label": t.nextAriaLabel,
       disabled: i.isLastPage,
@@ -4132,7 +4132,7 @@ function sa(e, s, t, l, n, i) {
     }, 8, ["aria-label", "disabled", "importance", "class"])
   ], 8, ea);
 }
-const Vr = /* @__PURE__ */ v(Jn, [["render", sa]]), ia = {
+const zr = /* @__PURE__ */ v(Jn, [["render", sa]]), ia = {
   warning: "d-radio--warning",
   error: "d-radio--error",
   success: "d-radio--success"
@@ -4236,7 +4236,7 @@ function ra(e, s, t, l, n, i) {
   const r = f("dt-validation-messages");
   return a(), o("label", null, [
     _("div", {
-      class: b(["d-radio-group", { "d-radio-group--disabled": e.internalDisabled }])
+      class: y(["d-radio-group", { "d-radio-group--disabled": e.internalDisabled }])
     }, [
       _("div", aa, [
         _("input", I({
@@ -4271,7 +4271,7 @@ function ra(e, s, t, l, n, i) {
     ], 2)
   ]);
 }
-const qr = /* @__PURE__ */ v(na, [["render", ra]]), Hr = {
+const Mr = /* @__PURE__ */ v(na, [["render", ra]]), qr = {
   name: "DtRadioGroup",
   extends: is,
   props: {
@@ -4417,7 +4417,7 @@ function ua(e, s, t, l, n, i) {
     tabindex: n.isFirstElementFocusable ? -1 : 0,
     "aria-labelledby": `dt-tab-${t.tabId}`,
     "aria-hidden": `${i.hidePanel}`,
-    class: b([
+    class: y([
       {
         "d-d-none": i.hidePanel
       },
@@ -4430,7 +4430,7 @@ function ua(e, s, t, l, n, i) {
     [Ie, !t.hidden]
   ]);
 }
-const Fr = /* @__PURE__ */ v(da, [["render", ua]]), ha = {
+const Vr = /* @__PURE__ */ v(da, [["render", ua]]), ha = {
   error: "d-checkbox--error",
   warning: "d-checkbox--warning",
   success: "d-checkbox--success"
@@ -4523,7 +4523,7 @@ function _a(e, s, t, l, n, i) {
   const r = f("dt-validation-messages");
   return a(), o("label", null, [
     _("div", {
-      class: b(["d-checkbox-group", { "d-checkbox-group--disabled": e.internalDisabled }])
+      class: y(["d-checkbox-group", { "d-checkbox-group--disabled": e.internalDisabled }])
     }, [
       _("div", ma, [
         _("input", I({
@@ -4561,7 +4561,7 @@ function _a(e, s, t, l, n, i) {
     ], 2)
   ]);
 }
-const jr = /* @__PURE__ */ v(fa, [["render", _a]]), Kr = {
+const Hr = /* @__PURE__ */ v(fa, [["render", _a]]), Fr = {
   name: "DtCheckboxGroup",
   extends: is,
   model: {
@@ -4653,7 +4653,7 @@ const jr = /* @__PURE__ */ v(fa, [["render", _a]]), Kr = {
       return `checkbox-group-message-${e}-${s}-${this.id}`;
     }
   }
-}, qt = {
+}, Vt = {
   xs: "d-chip__label--xs",
   sm: "d-chip__label--sm",
   md: ""
@@ -4697,7 +4697,7 @@ const jr = /* @__PURE__ */ v(fa, [["render", _a]]), Kr = {
     size: {
       type: String,
       default: "md",
-      validator: (e) => Object.keys(qt).includes(e)
+      validator: (e) => Object.keys(Vt).includes(e)
     },
     /**
      * The interactivity of the chip.
@@ -4788,7 +4788,7 @@ const jr = /* @__PURE__ */ v(fa, [["render", _a]]), Kr = {
     chipClasses() {
       return [
         this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
-        qt[this.size],
+        Vt[this.size],
         this.labelClass
       ];
     },
@@ -4813,7 +4813,7 @@ const jr = /* @__PURE__ */ v(fa, [["render", _a]]), Kr = {
 function ka(e, s, t, l, n, i) {
   const r = f("dt-icon"), h = f("dt-button");
   return a(), o("span", Sa, [
-    (a(), S(se(t.interactive ? "button" : "span"), I({
+    (a(), S(ie(t.interactive ? "button" : "span"), I({
       id: t.id,
       type: t.interactive && "button",
       class: i.chipClasses(),
@@ -4831,7 +4831,7 @@ function ka(e, s, t, l, n, i) {
           key: 2,
           id: `${t.id}-content`,
           "data-qa": "dt-chip-label",
-          class: b(["d-truncate", "d-chip__text", t.contentClass])
+          class: y(["d-truncate", "d-chip__text", t.contentClass])
         }, [
           d(e.$slots, "default")
         ], 10, wa)) : g("", !0)
@@ -4864,7 +4864,7 @@ const ns = /* @__PURE__ */ v(va, [["render", ka]]), Ht = {
   error: "d-select__input--error",
   warning: "d-select__input--warning",
   success: "d-select__input--success"
-}, Oa = (e) => !e.index || typeof e.index == "number", Ta = (e) => e.value ? typeof e.value == "string" || typeof e.value == "number" : !1, Ea = (e) => e.label ? typeof e.label == "string" : !1, Aa = (e) => e ? e.every((s) => !(!Oa(s) || !Ta(s) || !Ea(s))) : !0, Da = {
+}, Oa = (e) => !e.index || typeof e.index == "number", Ea = (e) => e.value ? typeof e.value == "string" || typeof e.value == "number" : !1, Ta = (e) => e.label ? typeof e.label == "string" : !1, Aa = (e) => e ? e.every((s) => !(!Oa(s) || !Ea(s) || !Ta(s))) : !0, Da = {
   name: "DtSelectMenu",
   components: { DtValidationMessages: pe },
   mixins: [Ye],
@@ -5065,7 +5065,7 @@ function $a(e, s, t, l, n, i) {
         ])
       ], 16, xa)) : g("", !0),
       _("div", {
-        class: b([
+        class: y([
           "d-select",
           n.SELECT_SIZE_MODIFIERS[t.size],
           t.selectClass,
@@ -5099,7 +5099,7 @@ function $a(e, s, t, l, n, i) {
     }, e.messagesChildProps, { "data-qa": "dt-select-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
   ]);
 }
-const Gr = /* @__PURE__ */ v(Da, [["render", $a]]), Na = ["status", "alert"], Ft = 6e3, za = {
+const jr = /* @__PURE__ */ v(Da, [["render", $a]]), Na = ["status", "alert"], Ft = 6e3, za = {
   name: "DtToast",
   components: {
     DtNoticeIcon: nt,
@@ -5268,12 +5268,12 @@ const Gr = /* @__PURE__ */ v(Da, [["render", $a]]), Na = ["status", "alert"], Ft
       }, this.duration));
     }
   }
-}, Ma = ["aria-hidden"], Va = { class: "d-toast__dialog" };
-function qa(e, s, t, l, n, i) {
+}, Ma = ["aria-hidden"], qa = { class: "d-toast__dialog" };
+function Va(e, s, t, l, n, i) {
   const r = f("dt-notice-icon"), h = f("dt-notice-content"), u = f("dt-notice-action");
   return n.isShown ? (a(), o("div", {
     key: 0,
-    class: b([
+    class: y([
       "d-toast",
       i.kindClass,
       { "d-toast--important": t.important }
@@ -5281,7 +5281,7 @@ function qa(e, s, t, l, n, i) {
     "data-qa": "dt-toast",
     "aria-hidden": (!n.isShown).toString()
   }, [
-    _("div", Va, [
+    _("div", qa, [
       p(r, { kind: t.kind }, {
         default: c(() => [
           d(e.$slots, "icon")
@@ -5319,7 +5319,7 @@ function qa(e, s, t, l, n, i) {
     ])
   ], 10, Ma)) : g("", !0);
 }
-const Ur = /* @__PURE__ */ v(za, [["render", qa]]), jt = {
+const Kr = /* @__PURE__ */ v(za, [["render", Va]]), jt = {
   sm: "d-toggle--small",
   md: ""
 }, Ha = [!1, !0, "mixed"], Fa = {
@@ -5490,7 +5490,7 @@ function Wa(e, s, t, l, n, i) {
     ], 16, Ga)
   ]);
 }
-const Wr = /* @__PURE__ */ v(Fa, [["render", Wa]]), ye = {
+const Gr = /* @__PURE__ */ v(Fa, [["render", Wa]]), ye = {
   "{win}": "layout-grid",
   "{arrow-right}": "arrow-right",
   "{arrow-left}": "arrow-left",
@@ -5499,7 +5499,7 @@ const Wr = /* @__PURE__ */ v(Fa, [["render", Wa]]), ye = {
   "{cmd}": "command"
 }, Za = {
   "{plus}": "plus"
-}, Zr = Object.keys(ye), Ya = {
+}, Ur = Object.keys(ye), Ya = {
   name: "DtKeyboardShortcut",
   components: {
     DtIcon: B
@@ -5558,7 +5558,7 @@ const Wr = /* @__PURE__ */ v(Fa, [["render", Wa]]), ye = {
 function Ja(e, s, t, l, n, i) {
   const r = f("dt-icon");
   return a(), o("kbd", {
-    class: b([
+    class: y([
       "d-d-inline-flex",
       "d-ff-custom",
       "d-ai-center",
@@ -5578,14 +5578,14 @@ function Ja(e, s, t, l, n, i) {
         name: i.icons[h],
         size: "100",
         "aria-hidden": "true",
-        class: b([
+        class: y([
           t.inverted ? "d-fc-secondary-inverted" : "d-fc-tertiary",
           "d-mr2"
         ])
       }, null, 8, ["name", "class"])) : (a(), o("span", {
         key: `${u}-${h}`,
         "aria-hidden": "true",
-        class: b([
+        class: y([
           t.inverted ? "d-fc-secondary-inverted" : "d-fc-tertiary",
           "d-mr2"
         ]),
@@ -5594,7 +5594,7 @@ function Ja(e, s, t, l, n, i) {
     ], 64))), 256))
   ], 2);
 }
-const Yr = /* @__PURE__ */ v(Ya, [["render", Ja]]), as = {
+const Wr = /* @__PURE__ */ v(Ya, [["render", Ja]]), as = {
   LEFT: "left",
   RIGHT: "right"
 }, el = ["sm", "md", "lg", null], tl = {
@@ -5664,14 +5664,14 @@ const Yr = /* @__PURE__ */ v(Ya, [["render", Ja]]), as = {
 function sl(e, s, t, l, n, i) {
   return a(), o("div", {
     ref: "root-layout-body",
-    class: b(["d-root-layout__body", i.bodyClasses]),
+    class: y(["d-root-layout__body", i.bodyClasses]),
     "data-qa": "dt-root-layout-body"
   }, [
     n.hasSlotContent(e.$slots.sidebar) ? (a(), o("aside", {
       key: 0,
       ref: "root-layout-sidebar",
-      class: b(["d-root-layout__sidebar", { "d-root-layout__sidebar--sticky": t.fixed }, t.sidebarClass]),
-      style: oe({ "flex-basis": t.sidebarWidth }),
+      class: y(["d-root-layout__sidebar", { "d-root-layout__sidebar--sticky": t.fixed }, t.sidebarClass]),
+      style: se({ "flex-basis": t.sidebarWidth }),
       "data-qa": "dt-root-layout-sidebar"
     }, [
       d(e.$slots, "sidebar")
@@ -5679,7 +5679,7 @@ function sl(e, s, t, l, n, i) {
     n.hasSlotContent(e.$slots.content) ? (a(), o("main", {
       key: 1,
       ref: "root-layout-content",
-      class: b(["d-root-layout__content", t.contentClass]),
+      class: y(["d-root-layout__content", t.contentClass]),
       "data-qa": "dt-root-layout-content",
       tabindex: "0"
     }, [
@@ -5804,13 +5804,13 @@ const il = /* @__PURE__ */ v(tl, [["render", sl]]), nl = {
 function al(e, s, t, l, n, i) {
   const r = f("dt-root-layout-body");
   return a(), o("div", {
-    class: b(["root-layout d-root-layout", { "d-root-layout--fixed": t.fixed }, i.responsiveClass]),
+    class: y(["root-layout d-root-layout", { "d-root-layout--fixed": t.fixed }, i.responsiveClass]),
     "data-qa": "dt-root-layout"
   }, [
     n.hasSlotContent(e.$slots.header) ? (a(), o("header", {
       key: 0,
-      class: b(["d-root-layout__header", { "d-root-layout__header--sticky": t.headerSticky }, t.headerClass]),
-      style: oe({ height: t.headerHeight, "min-height": t.headerHeight }),
+      class: y(["d-root-layout__header", { "d-root-layout__header--sticky": t.headerSticky }, t.headerClass]),
+      style: se({ height: t.headerHeight, "min-height": t.headerHeight }),
       "data-qa": "dt-root-layout-header"
     }, [
       d(e.$slots, "header")
@@ -5842,15 +5842,15 @@ function al(e, s, t, l, n, i) {
     ]), 1032, ["body-class", "content-class", "sidebar-class", "sidebar-width", "sidebar-position", "header-height", "footer-height", "fixed"]),
     n.hasSlotContent(e.$slots.footer) ? (a(), o("footer", {
       key: 1,
-      class: b(["d-root-layout__footer", t.footerClass]),
-      style: oe({ height: t.footerHeight, "min-height": t.footerHeight }),
+      class: y(["d-root-layout__footer", t.footerClass]),
+      style: se({ height: t.footerHeight, "min-height": t.footerHeight }),
       "data-qa": "dt-root-layout-footer"
     }, [
       d(e.$slots, "footer")
     ], 6)) : g("", !0)
   ], 2);
 }
-const Qr = /* @__PURE__ */ v(nl, [["render", al]]), ue = {
+const Zr = /* @__PURE__ */ v(nl, [["render", al]]), ue = {
   default: "column",
   column: "column",
   row: "row",
@@ -5945,8 +5945,8 @@ const ul = {
   }
 };
 function hl(e, s, t, l, n, i) {
-  return a(), S(se(t.as), {
-    class: b([
+  return a(), S(ie(t.as), {
+    class: y([
       "d-stack",
       i.defaultDirection,
       i.stackResponsive,
@@ -5959,7 +5959,7 @@ function hl(e, s, t, l, n, i) {
     _: 3
   }, 8, ["class"]);
 }
-const Xr = /* @__PURE__ */ v(ul, [["render", hl]]);
+const Yr = /* @__PURE__ */ v(ul, [["render", hl]]);
 const os = {
   __name: "core_scroller",
   props: {
@@ -6054,17 +6054,17 @@ const os = {
   },
   emits: ["user-position"],
   setup(e, { expose: s, emit: t }) {
-    const l = e, n = Tt(/* @__PURE__ */ new Map()), i = Tt(/* @__PURE__ */ new Map()), r = me([]), h = me(null), u = me(!1), y = me(null), w = me("top");
-    let m = 0, T = 0, P = !1, de = 0, he = null, fe = null, ze = 0, cs = 0;
+    const l = e, n = Et(/* @__PURE__ */ new Map()), i = Et(/* @__PURE__ */ new Map()), r = me([]), h = me(null), u = me(!1), b = me(null), w = me("top");
+    let m = 0, E = 0, P = !1, de = 0, he = null, fe = null, ze = 0, cs = 0;
     const Me = xe(() => {
       if (l.itemSize === null) {
         const O = {
           "-1": { accumulator: 0 }
         }, A = l.items, k = l.sizeField, Z = l.minItemSize;
-        let q = 1e4, ie = 0, D;
+        let V = 1e4, ne = 0, D;
         for (let H = 0, ge = A.length; H < ge; H++)
-          D = A[H][k] || Z, D < q && (q = D), ie += D, O[H] = { accumulator: ie, size: D };
-        return fe = q, O;
+          D = A[H][k] || Z, D < V && (V = D), ne += D, O[H] = { accumulator: ne, size: D };
+        return fe = V, O;
       }
       return [];
     }), us = xe(() => l.items.length && typeof l.items[0] != "object"), hs = xe(() => {
@@ -6074,141 +6074,141 @@ const os = {
       return O;
     });
     Ut(Me, () => {
-      Te(!1);
+      Ee(!1);
     }, { deep: !0 }), Ss(() => {
       Is(() => {
-        Te(!0), u.value = !0;
+        Ee(!0), u.value = !0;
       });
     });
-    const pt = (O, A, k, Z, q) => {
-      const ie = Cs({
+    const pt = (O, A, k, Z, V) => {
+      const ne = Cs({
         id: cs++,
         index: A,
         used: !0,
         key: Z,
-        type: q
+        type: V
       }), D = ws({
         item: k,
         position: 0,
-        nr: ie
+        nr: ne
       });
       return O.value.push(D), D;
-    }, Ve = (O, A = !1) => {
+    }, qe = (O, A = !1) => {
       const k = i, Z = O.nr.type;
-      let q = k.get(Z);
-      q || (q = [], k.set(Z, q)), q.push(O), A || (O.nr.used = !1, O.position = -9999);
+      let V = k.get(Z);
+      V || (V = [], k.set(Z, V)), V.push(O), A || (O.nr.used = !1, O.position = -9999);
     }, fs = () => {
       const O = l.direction === "vertical";
       let A;
       return O ? A = {
-        start: y.value.scrollTop,
-        end: y.value.scrollTop + y.value.clientHeight
+        start: b.value.scrollTop,
+        end: b.value.scrollTop + b.value.clientHeight
       } : A = {
-        start: y.value.scrollLeft,
-        end: y.value.scrollLeft + y.value.clientWidth
+        start: b.value.scrollLeft,
+        end: b.value.scrollLeft + b.value.clientWidth
       }, A;
     }, ms = () => {
       throw setTimeout(() => {
-        console.error("It seems the scroller element isn't scrolling, so it tries to render all the items at once.", "Scroller:", y), console.error("Make sure the scroller has a fixed height (or width) and 'overflow-y' (or 'overflow-x') set to 'auto' so it can scroll correctly and only render the items visible in the scroll viewport.");
+        console.error("It seems the scroller element isn't scrolling, so it tries to render all the items at once.", "Scroller:", b), console.error("Make sure the scroller has a fixed height (or width) and 'overflow-y' (or 'overflow-x') set to 'auto' so it can scroll correctly and only render the items visible in the scroll viewport.");
       }), new Error("Rendered items limit reached");
     }, ps = () => {
       r.value.sort((O, A) => O.nr.index - A.nr.index);
-    }, Te = (O, A = !1) => {
+    }, Ee = (O, A = !1) => {
       var bt, yt, vt, St, It, Ct, wt, kt;
-      const k = l.itemSize, Z = fe, q = us.value ? null : l.keyField, ie = l.items, D = ie.length, H = Me.value, ge = n, gt = i, Ee = r, ys = hs;
-      let F, $, Ae, J, ne;
+      const k = l.itemSize, Z = fe, V = us.value ? null : l.keyField, ne = l.items, D = ne.length, H = Me.value, ge = n, gt = i, Te = r, ys = hs;
+      let F, $, Ae, J, ae;
       if (!D)
-        F = $ = J = ne = Ae = 0;
+        F = $ = J = ae = Ae = 0;
       else {
-        const E = fs();
+        const T = fs();
         if (A) {
-          let x = E.start - de.value;
+          let x = T.start - de.value;
           if (x < 0 && (x = -x), k === null && x < Z.value || x < k)
             return {
               continuous: !0
             };
         }
-        de = E.start;
+        de = T.start;
         const G = l.buffer;
-        if (E.start -= G, E.end += G, k === null) {
+        if (T.start -= G, T.end += G, k === null) {
           let x, _e = 0, Lt = D - 1, U = ~~(D / 2), Ot;
           do
-            Ot = U, x = (bt = H[U]) == null ? void 0 : bt.accumulator, x < E.start ? _e = U : U < D - 1 && ((yt = H[U + 1]) == null ? void 0 : yt.accumulator) > E.start && (Lt = U), U = ~~((_e + Lt) / 2);
+            Ot = U, x = (bt = H[U]) == null ? void 0 : bt.accumulator, x < T.start ? _e = U : U < D - 1 && ((yt = H[U + 1]) == null ? void 0 : yt.accumulator) > T.start && (Lt = U), U = ~~((_e + Lt) / 2);
           while (U !== Ot);
-          for (U < 0 && (U = 0), F = U, Ae = (vt = H[D - 1]) == null ? void 0 : vt.accumulator, $ = U; $ < D && ((St = H[$]) == null ? void 0 : St.accumulator) < E.end; $++)
+          for (U < 0 && (U = 0), F = U, Ae = (vt = H[D - 1]) == null ? void 0 : vt.accumulator, $ = U; $ < D && ((St = H[$]) == null ? void 0 : St.accumulator) < T.end; $++)
             ;
-          for ($ === -1 ? $ = ie.length - 1 : ($++, $ > D && ($ = D)), J = m; J < D && ((It = H[J]) == null ? void 0 : It.accumulator) < E.start; J++)
+          for ($ === -1 ? $ = ne.length - 1 : ($++, $ > D && ($ = D)), J = m; J < D && ((It = H[J]) == null ? void 0 : It.accumulator) < T.start; J++)
             ;
-          for (ne = J; ne < D && ((Ct = H[ne]) == null ? void 0 : Ct.accumulator) < E.end; ne++)
+          for (ae = J; ae < D && ((Ct = H[ae]) == null ? void 0 : Ct.accumulator) < T.end; ae++)
             ;
         } else {
-          F = ~~(E.start / k);
+          F = ~~(T.start / k);
           const x = F % 1;
-          F -= x, $ = Math.ceil(E.end / k), J = Math.max(0, Math.floor(E.start / k)), ne = Math.floor(E.end / k), F < 0 && (F = 0), $ > D && ($ = D), J < 0 && (J = 0), ne > D && (ne = D), Ae = Math.ceil(D / 1) * k;
+          F -= x, $ = Math.ceil(T.end / k), J = Math.max(0, Math.floor(T.start / k)), ae = Math.floor(T.end / k), F < 0 && (F = 0), $ > D && ($ = D), J < 0 && (J = 0), ae > D && (ae = D), Ae = Math.ceil(D / 1) * k;
         }
       }
       $ - F > 1e3 && ms(), ze = Ae;
       let L;
-      const De = F <= T && $ >= F;
+      const De = F <= E && $ >= F;
       if (De)
-        for (let E = 0, G = Ee.value.length; E < G; E++)
-          L = Ee.value[E], L != null && L.nr.used && (O && (L.nr.index = ys[L.item[q]]), (L.nr.index == null || L.nr.index < F || L.nr.index >= $) && Ve(L));
+        for (let T = 0, G = Te.value.length; T < G; T++)
+          L = Te.value[T], L != null && L.nr.used && (O && (L.nr.index = ys[L.item[V]]), (L.nr.index == null || L.nr.index < F || L.nr.index >= $) && qe(L));
       const _t = De ? null : /* @__PURE__ */ new Map();
-      let ee, ae, Re;
-      for (let E = F; E < $; E++) {
-        ee = ie[E];
-        const G = q ? ee == null ? void 0 : ee[q] : ee;
+      let ee, le, Re;
+      for (let T = F; T < $; T++) {
+        ee = ne[T];
+        const G = V ? ee == null ? void 0 : ee[V] : ee;
         if (G == null)
-          throw new Error(`Key is ${G} on item (keyField is '${q}')`);
-        if (L = ge.get(G), !k && !((wt = H[E]) != null && wt.size)) {
-          L && Ve(L);
+          throw new Error(`Key is ${G} on item (keyField is '${V}')`);
+        if (L = ge.get(G), !k && !((wt = H[T]) != null && wt.size)) {
+          L && qe(L);
           continue;
         }
-        ae = ee.type;
-        let x = gt.get(ae);
+        le = ee.type;
+        let x = gt.get(le);
         if (!L)
-          De ? x && x.length ? L = x.pop() : L = pt(Ee, E, ee, G, ae) : (Re = _t.get(ae) || 0, (!x || Re >= x.length) && (L = pt(Ee, E, ee, G, ae), Ve(L, !0), x = gt.get(ae)), L = x[Re], _t.set(ae, Re + 1)), ge.delete(L.nr.key), L.nr.used = !0, L.nr.index = E, L.nr.key = G, L.nr.type = ae, ge.set(G, L);
+          De ? x && x.length ? L = x.pop() : L = pt(Te, T, ee, G, le) : (Re = _t.get(le) || 0, (!x || Re >= x.length) && (L = pt(Te, T, ee, G, le), qe(L, !0), x = gt.get(le)), L = x[Re], _t.set(le, Re + 1)), ge.delete(L.nr.key), L.nr.used = !0, L.nr.index = T, L.nr.key = G, L.nr.type = le, ge.set(G, L);
         else if (!L.nr.used && (L.nr.used = !0, x)) {
           const _e = x.indexOf(L);
           _e !== -1 && x.splice(_e, 1);
         }
-        L.item = ee, k === null ? (L.position = (kt = H[E - 1]) == null ? void 0 : kt.accumulator, L.offset = 0) : (L.position = Math.floor(E) * k, L.offset = E % 1 * k);
+        L.item = ee, k === null ? (L.position = (kt = H[T - 1]) == null ? void 0 : kt.accumulator, L.offset = 0) : (L.position = Math.floor(T) * k, L.offset = T % 1 * k);
       }
-      return m = F, T = $, clearTimeout(he), he = setTimeout(ps, 300), {
+      return m = F, E = $, clearTimeout(he), he = setTimeout(ps, 300), {
         continuous: De
       };
     }, gs = (O) => {
-      const A = l.direction === "vertical" ? { scroll: "scrollTop", start: "top" } : { scroll: "scrollLeft", start: "left" }, k = y.value, Z = A.scroll;
+      const A = l.direction === "vertical" ? { scroll: "scrollTop", start: "top" } : { scroll: "scrollLeft", start: "left" }, k = b.value, Z = A.scroll;
       k[Z] = O;
     }, _s = (O) => {
       var k;
       let A;
       l.itemSize === null ? A = O > 0 ? (k = Me.value[O - 1]) == null ? void 0 : k.accumulator : 0 : A = Math.floor(O) * l.itemSize, gs(A);
     }, bs = () => {
-      const O = y.value;
+      const O = b.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")), P || (P = !0, requestAnimationFrame(() => {
-        P = !1, Te(!1, !0);
+        P = !1, Ee(!1, !0);
       }));
     };
     return s({
       scrollToItem: _s,
-      _updateVisibleItems: Te
+      _updateVisibleItems: Ee
     }), (O, A) => (a(), o("div", {
       ref_key: "scroller",
-      ref: y,
-      class: b(["vue-recycle-scroller", {
+      ref: b,
+      class: y(["vue-recycle-scroller", {
         ready: u.value,
         [`direction-${e.direction}`]: !0
       }]),
       onScrollPassive: bs
     }, [
-      (a(), S(se(e.listTag), {
+      (a(), S(ie(e.listTag), {
         ref: "wrapper",
-        style: oe({ [e.direction === "vertical" ? "minHeight" : "minWidth"]: `${Wt(ze)}px` }),
-        class: b(["vue-recycle-scroller__item-wrapper", e.listClass])
+        style: se({ [e.direction === "vertical" ? "minHeight" : "minWidth"]: `${Wt(ze)}px` }),
+        class: y(["vue-recycle-scroller__item-wrapper", e.listClass])
       }, {
         default: c(() => [
-          (a(!0), o(W, null, X(r.value, (k) => (a(), S(se(e.itemTag), I({
+          (a(!0), o(W, null, X(r.value, (k) => (a(), S(ie(e.itemTag), I({
             key: k.nr.id,
             style: u.value ? {
               transform: `translate${e.direction === "vertical" ? "Y" : "X"}(${k.position}px) translate${e.direction === "vertical" ? "X" : "Y"}(${k.offset}px)`,
@@ -6469,11 +6469,11 @@ const os = {
       const e = [], { items: s, keyField: t, simpleArray: l } = this, n = this.vscrollData.sizes, i = s.length;
       for (let r = 0; r < i; r++) {
         const h = s[r], u = l ? r : h[t];
-        let y = n[u];
-        typeof y > "u" && !this.$_undefinedMap[u] && (y = 0), e.push({
+        let b = n[u];
+        typeof b > "u" && !this.$_undefinedMap[u] && (b = 0), e.push({
           item: h,
           [t]: u,
-          size: y
+          size: b
         });
       }
       return e;
@@ -6546,19 +6546,19 @@ function pl(e, s, t, l, n, i) {
     "list-tag": t.listTag,
     "item-tag": t.itemTag
   }, e.$attrs), {
-    default: c(({ item: u, index: y, active: w }) => [
+    default: c(({ item: u, index: b, active: w }) => [
       p(r, {
         item: u,
         active: w,
         "size-dependencies": [
           u.message
         ],
-        "data-index": y
+        "data-index": b
       }, {
         default: c(() => [
           d(e.$slots, "default", Le(Ue({
             item: u.item,
-            index: y,
+            index: b,
             active: w,
             itemWithSize: u
           })))
@@ -6569,7 +6569,7 @@ function pl(e, s, t, l, n, i) {
     _: 3
   }, 16, ["items", "min-item-size", "direction", "key-field", "list-tag", "item-tag"]);
 }
-const gl = /* @__PURE__ */ v(ml, [["render", pl]]), Jr = {
+const gl = /* @__PURE__ */ v(ml, [["render", pl]]), Qr = {
   __name: "scroller",
   props: {
     /**
@@ -6688,7 +6688,7 @@ const gl = /* @__PURE__ */ v(ml, [["render", pl]]), Jr = {
     function u() {
       n.value && (l.dynamic ? n.value.dynamicScrollerUpdateItems() : n.value._updateVisibleItems(!0));
     }
-    function y() {
+    function b() {
       n.value && (l.dynamic ? n.value.dynamicScrollerUpdateItemsFromBottom() : n.value._updateVisibleItems(!1, !0));
     }
     function w() {
@@ -6698,8 +6698,8 @@ const gl = /* @__PURE__ */ v(ml, [["render", pl]]), Jr = {
       scrollToBottom: r,
       scrollToItem: h,
       updateItems: u,
-      updateItemsFromBottom: y
-    }), (m, T) => (a(), S(se(e.dynamic ? gl : os), {
+      updateItemsFromBottom: b
+    }), (m, E) => (a(), S(ie(e.dynamic ? gl : os), {
       ref_key: "scroller",
       ref: n,
       "data-qa": "dt-scroller",
@@ -6710,9 +6710,9 @@ const gl = /* @__PURE__ */ v(ml, [["render", pl]]), Jr = {
       "key-field": e.keyField,
       "list-tag": e.listTag,
       "item-tag": e.itemTag,
-      style: oe(Wt(i)),
+      style: se(Wt(i)),
       tabindex: "0",
-      onUserPosition: T[0] || (T[0] = (P) => m.$emit("user-position", P))
+      onUserPosition: E[0] || (E[0] = (P) => m.$emit("user-position", P))
     }, {
       default: c(({ item: P, index: de, active: he }) => [
         d(m.$slots, "default", Le(Ue({
@@ -7007,8 +7007,8 @@ const gl = /* @__PURE__ */ v(ml, [["render", pl]]), Jr = {
   }
 }, bl = ["id"], yl = { ref: "header" }, vl = ["onMouseleave", "onFocusout"], Sl = { ref: "footer" };
 function Il(e, s, t, l, n, i) {
-  const r = f("combobox-loading-list"), h = f("combobox-empty-list"), u = f("dt-popover"), y = f("dt-combobox");
-  return a(), S(y, I({
+  const r = f("combobox-loading-list"), h = f("combobox-empty-list"), u = f("dt-popover"), b = f("dt-combobox");
+  return a(), S(b, I({
     ref: "combobox",
     loading: t.loading,
     label: t.label,
@@ -7040,7 +7040,7 @@ function Il(e, s, t, l, n, i) {
         })
       ], 40, bl)
     ]),
-    list: c(({ opened: w, listProps: m, clearHighlightIndex: T }) => [
+    list: c(({ opened: w, listProps: m, clearHighlightIndex: E }) => [
       p(u, {
         ref: "popover",
         open: n.isListShown,
@@ -7069,9 +7069,9 @@ function Il(e, s, t, l, n, i) {
         content: c(() => [
           _("div", {
             ref: "listWrapper",
-            class: b([n.DROPDOWN_PADDING_CLASSES[t.padding], t.listClass]),
-            onMouseleave: T,
-            onFocusout: T
+            class: y([n.DROPDOWN_PADDING_CLASSES[t.padding], t.listClass]),
+            onMouseleave: E,
+            onFocusout: E
           }, [
             t.loading ? (a(), S(r, Le(I({ key: 0 }, m)), null, 16)) : t.emptyList && t.emptyStateMessage ? (a(), S(h, I({ key: 1 }, m, { message: t.emptyStateMessage }), null, 16, ["message"])) : d(e.$slots, "list", {
               key: 2,
@@ -7466,10 +7466,10 @@ const Cl = /* @__PURE__ */ v(_l, [["render", Il]]), wl = {
       this.maxSelected !== 0 && (this.selectedItems.length > this.maxSelected ? (this.showValidationMessages = !0, this.$emit("max-selected")) : this.showValidationMessages = !1);
     }
   }
-}, Tl = {
+}, El = {
   ref: "inputSlotWrapper",
   class: "d-ps-relative d-d-block"
-}, El = {
+}, Tl = {
   ref: "chipsWrapper",
   class: "d-ps-absolute d-mx2 d-pl1"
 }, Al = { ref: "header" }, Dl = {
@@ -7477,8 +7477,8 @@ const Cl = /* @__PURE__ */ v(_l, [["render", Il]]), wl = {
   class: "d-ta-center d-py16"
 }, Rl = { ref: "footer" };
 function xl(e, s, t, l, n, i) {
-  const r = f("dt-chip"), h = f("dt-input"), u = f("dt-validation-messages"), y = f("dt-recipe-combobox-with-popover");
-  return a(), S(y, {
+  const r = f("dt-chip"), h = f("dt-input"), u = f("dt-validation-messages"), b = f("dt-recipe-combobox-with-popover");
+  return a(), S(b, {
     ref: "comboboxWithPopover",
     label: t.label,
     "show-list": t.showList,
@@ -7493,8 +7493,8 @@ function xl(e, s, t, l, n, i) {
     onSelect: i.onComboboxSelect
   }, ke({
     input: c(({ onInput: w }) => [
-      _("span", Tl, [
-        _("span", El, [
+      _("span", El, [
+        _("span", Tl, [
           (a(!0), o(W, null, X(t.selectedItems, (m) => (a(), S(r, I({
             ref_for: !0,
             ref: "chips",
@@ -7504,8 +7504,8 @@ function xl(e, s, t, l, n, i) {
             "close-button-props": { ariaLabel: "close" },
             size: n.CHIP_SIZES[t.size]
           }, z(i.chipListeners), {
-            onKeyup: Y((T) => i.onChipRemove(m), ["backspace"]),
-            onClose: (T) => i.onChipRemove(m)
+            onKeyup: Y((E) => i.onChipRemove(m), ["backspace"]),
+            onClose: (E) => i.onChipRemove(m)
           }), {
             default: c(() => [
               R(C(m), 1)
@@ -7563,7 +7563,7 @@ function xl(e, s, t, l, n, i) {
     } : void 0
   ]), 1032, ["label", "show-list", "max-height", "popover-offset", "has-suggestion-list", "visually-hidden-close-label", "visually-hidden-close", "append-to", "transition", "onSelect"]);
 }
-const ed = /* @__PURE__ */ v(Ol, [["render", xl]]), rs = ["sm", "md", "lg", "xl"];
+const Xr = /* @__PURE__ */ v(Ol, [["render", xl]]), rs = ["sm", "md", "lg", "xl"];
 const Bl = {
   name: "DtRecipeCallbarButton",
   components: { DtButton: K, DtTooltip: Qe },
@@ -7700,7 +7700,7 @@ function Pl(e, s, t, l, n, i) {
   }, {
     anchor: c(() => [
       _("span", {
-        class: b({ "d-c-not-allowed": t.disabled })
+        class: y({ "d-c-not-allowed": t.disabled })
       }, [
         p(r, {
           importance: i.buttonImportance,
@@ -7710,7 +7710,7 @@ function Pl(e, s, t, l, n, i) {
           "aria-label": t.ariaLabel,
           "label-class": i.callbarButtonTextClass,
           width: i.buttonWidth,
-          class: b(i.callbarButtonClass)
+          class: y(i.callbarButtonClass)
         }, {
           default: c(() => [
             d(e.$slots, "default"),
@@ -7870,6 +7870,13 @@ const Nl = {
     contentClass: {
       type: [String, Array, Object],
       default: ""
+    },
+    /**
+     * To auto open the modal popover.
+     */
+    openPopover: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: [
@@ -7883,7 +7890,11 @@ const Nl = {
      * @event click
      * @type {PointerEvent | KeyboardEvent}
      */
-    "click"
+    "click",
+    /**
+     * Emitted when modal popover is opened or closed.
+     */
+    "opened"
   ],
   data() {
     return {
@@ -7896,6 +7907,9 @@ const Nl = {
     },
     isCompactMode() {
       return this.buttonWidthSize === "sm" || this.buttonWidthSize === "md";
+    },
+    showPopover() {
+      return !this.openPopover || this.open ? !1 : this.arrowClick();
     }
   },
   methods: {
@@ -7906,12 +7920,12 @@ const Nl = {
       this.$props.onClick ? this.$emit("click", e) : this.arrowClick(e);
     },
     onModalIsOpened(e) {
-      this.open = e;
+      this.open = e, this.$emit("opened", e);
     }
   }
 }, zl = { class: "d-d-flex d-ai-center" };
 function Ml(e, s, t, l, n, i) {
-  const r = f("dt-recipe-callbar-button"), h = f("dt-icon"), u = f("dt-button"), y = f("dt-popover");
+  const r = f("dt-recipe-callbar-button"), h = f("dt-icon"), u = f("dt-button"), b = f("dt-popover");
   return a(), o("div", zl, [
     p(r, {
       "aria-label": t.ariaLabel,
@@ -7935,7 +7949,7 @@ function Ml(e, s, t, l, n, i) {
       ]),
       _: 3
     }, 8, ["aria-label", "disabled", "active", "danger", "button-class", "button-width-size", "text-class", "onClick"]),
-    i.showArrowButton ? (a(), S(y, I({
+    i.showArrowButton ? (a(), S(b, I({
       key: 0,
       id: t.id,
       open: n.open,
@@ -7947,13 +7961,16 @@ function Ml(e, s, t, l, n, i) {
       class: "dt-recipe--callbar-button-with-popover--popover-wrapper",
       "dialog-class": ["dt-recipe--callbar-button-with-popover--popover", t.contentClass],
       "header-class": "d-d-flex d-ai-center d-fw-normal d-px12"
-    }, e.$attrs, { onOpened: i.onModalIsOpened }), {
+    }, e.$attrs, {
+      "open-popover": i.showPopover,
+      onOpened: i.onModalIsOpened
+    }), {
       anchor: c(() => [
         p(u, {
           circle: "",
           importance: "clear",
           size: "lg",
-          class: b(["dt-recipe--callbar-button-with-popover--arrow", { "d-mln24": !i.isCompactMode }]),
+          class: y(["dt-recipe--callbar-button-with-popover--arrow", { "d-mln24": !i.isCompactMode }]),
           width: "2rem",
           "aria-label": t.arrowButtonLabel,
           active: n.open,
@@ -7979,10 +7996,10 @@ function Ml(e, s, t, l, n, i) {
         d(e.$slots, "footerContent")
       ]),
       _: 3
-    }, 16, ["id", "open", "placement", "initial-focus-element", "show-close-button", "dialog-class", "onOpened"])) : g("", !0)
+    }, 16, ["id", "open", "placement", "initial-focus-element", "show-close-button", "dialog-class", "open-popover", "onOpened"])) : g("", !0)
   ]);
 }
-const td = /* @__PURE__ */ v(Nl, [["render", Ml]]), Vl = {
+const Jr = /* @__PURE__ */ v(Nl, [["render", Ml]]), ql = {
   name: "DtRecipeContactInfo",
   components: {
     DtAvatar: it,
@@ -8080,7 +8097,7 @@ const td = /* @__PURE__ */ v(Nl, [["render", Ml]]), Vl = {
       default: null
     }
   }
-}, ql = {
+}, Vl = {
   key: 0,
   class: "d-ps-relative",
   "data-qa": "contact-info-left"
@@ -8097,25 +8114,25 @@ function Ql(e, s, t, l, n, i) {
     "data-qa": "contact-info"
   }, {
     left: c(() => [
-      t.showAvatar ? (a(), o("div", ql, [
+      t.showAvatar ? (a(), o("div", Vl, [
         t.avatarList ? (a(), o("div", Hl, [
-          (a(!0), o(W, null, X(t.avatarList, (y, w) => (a(), o("div", { key: w }, [
+          (a(!0), o(W, null, X(t.avatarList, (b, w) => (a(), o("div", { key: w }, [
             p(h, {
               size: t.avatarSize,
-              seed: y.seed,
-              initials: y.initials,
-              "overlay-icon": y.icon,
-              "overlay-text": y.text,
+              seed: b.seed,
+              initials: b.initials,
+              "overlay-icon": b.icon,
+              "overlay-text": b.text,
               "overlay-class": "d-mn4 d-ba d-baw4 d-bc-white d-box-unset",
               "avatar-class": ["d-ba d-baw4 d-bc-white d-bar-pill", { "d-mln24": w > 0 }]
             }, {
               default: c(() => [
-                y.src ? (a(), o("img", {
+                b.src ? (a(), o("img", {
                   key: 0,
                   "data-qa": "dt-contact-avatar",
-                  src: y.src,
-                  alt: y.initials
-                }, null, 8, Fl)) : y.initials ? (a(), o("div", jl, C(y.initials), 1)) : (a(), S(r, {
+                  src: b.src,
+                  alt: b.initials
+                }, null, 8, Fl)) : b.initials ? (a(), o("div", jl, C(b.initials), 1)) : (a(), S(r, {
                   key: 2,
                   name: t.avatarIcon
                 }, null, 8, ["name"]))
@@ -8170,7 +8187,7 @@ function Ql(e, s, t, l, n, i) {
     _: 3
   }, 8, ["id", "role"]);
 }
-const sd = /* @__PURE__ */ v(Vl, [["render", Ql]]), Xl = [
+const ed = /* @__PURE__ */ v(ql, [["render", Ql]]), Xl = [
   "green300",
   "green100",
   "red200",
@@ -8213,7 +8230,7 @@ const Jl = {
 }, eo = { class: "d-top-banner-info__left" }, to = { class: "d-top-banner-info__middle d-my4" }, so = { class: "d-top-banner-info__right d-ta-right" };
 function io(e, s, t, l, n, i) {
   return a(), o("div", {
-    class: b(["d-fs-100 d-d-flex d-top-banner-info d-jc-space-between d-ai-center d-fc-primary", i.bannerInfoClass]),
+    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", eo, [
@@ -8227,7 +8244,7 @@ function io(e, s, t, l, n, i) {
     ])
   ], 2);
 }
-const id = /* @__PURE__ */ v(Jl, [["render", io]]), rt = "promptmenu", dt = "promptcollect", ct = "promptplay", ut = "gotoexpert", Ne = "goto", ht = "branch", ft = "transfer", mt = "hangup", no = {
+const td = /* @__PURE__ */ v(Jl, [["render", io]]), rt = "promptmenu", dt = "promptcollect", ct = "promptplay", ut = "gotoexpert", Ne = "goto", ht = "branch", ft = "transfer", mt = "hangup", no = {
   [rt]: "keypad",
   [dt]: "dialer",
   [ct]: "volume-2",
@@ -8236,7 +8253,7 @@ const id = /* @__PURE__ */ v(Jl, [["render", io]]), rt = "promptmenu", dt = "pro
   [Ne]: "call-merge",
   [ft]: "transfer",
   [mt]: "phone-hang-up"
-}, nd = {
+}, sd = {
   [rt]: "Menu",
   [dt]: "Collect",
   [ct]: "Play",
@@ -8245,7 +8262,7 @@ const id = /* @__PURE__ */ v(Jl, [["render", io]]), rt = "promptmenu", dt = "pro
   [Ne]: "Go-to",
   [ft]: "Transfer",
   [mt]: "Hangup"
-}, le = {
+}, oe = {
   PROMPT: {
     normal: "d-bc-blue-200",
     selected: "d-bc-blue-300"
@@ -8259,14 +8276,14 @@ const id = /* @__PURE__ */ v(Jl, [["render", io]]), rt = "promptmenu", dt = "pro
     selected: "d-bc-red-200"
   }
 }, ao = {
-  [rt]: le.PROMPT,
-  [dt]: le.PROMPT,
-  [ct]: le.PROMPT,
-  [ut]: le.LOGIC,
-  [ht]: le.LOGIC,
-  [Ne]: le.LOGIC,
-  [ft]: le.TERMINAL,
-  [mt]: le.TERMINAL
+  [rt]: oe.PROMPT,
+  [dt]: oe.PROMPT,
+  [ct]: oe.PROMPT,
+  [ut]: oe.LOGIC,
+  [ht]: oe.LOGIC,
+  [Ne]: oe.LOGIC,
+  [ft]: oe.TERMINAL,
+  [mt]: oe.TERMINAL
 };
 const lo = {
   name: "DtRecipeIvrNode",
@@ -8354,20 +8371,20 @@ const lo = {
   "data-qa": "ivr-node-label"
 }, co = { class: "d-w164" };
 function uo(e, s, t, l, n, i) {
-  const r = f("dt-icon"), h = f("dt-button"), u = f("dt-dropdown"), y = f("dt-card");
+  const r = f("dt-icon"), h = f("dt-button"), u = f("dt-dropdown"), b = f("dt-card");
   return a(), o("div", I({ class: "d-d-flex d-fd-column d-ai-center d-c-pointer ivr_node__width" }, z(i.nodeListeners, !0)), [
     t.dtmfKey ? (a(), o("div", {
       key: 0,
       "data-qa": "dt-top-connector-dtmf",
-      class: b(["ivr-connector d-w24 d-h24 d-bar-circle d-mbn12 d-fc-white d-fs-200", { "d-mbn16": t.isSelected }])
+      class: y(["ivr-connector d-w24 d-h24 d-bar-circle d-mbn12 d-fc-white d-fs-200", { "d-mbn16": t.isSelected }])
     }, C(t.dtmfKey), 3)) : g("", !0),
     e.$slots.connector ? d(e.$slots, "connector", { key: 1 }) : g("", !0),
     !t.dtmfKey && !e.$slots.connector ? (a(), o("div", {
       key: 2,
       "data-qa": "dt-top-connector",
-      class: b(["ivr-connector d-w8 d-h8 d-bar-circle d-mbn4", { "d-mbn8": t.isSelected }])
+      class: y(["ivr-connector d-w8 d-h8 d-bar-circle d-mbn4", { "d-mbn8": t.isSelected }])
     }, null, 2)) : g("", !0),
-    p(y, {
+    p(b, {
       "content-class": "d-bt d-bc-black-300 d-px12 d-pt8 d-pb12",
       "container-class": [
         "d-w100p",
@@ -8395,7 +8412,7 @@ function uo(e, s, t, l, n, i) {
               p(r, {
                 name: i.nodeIcon,
                 size: "200",
-                class: b(["", { ivr_node__goto_icon: i.isGotoNode }])
+                class: y(["", { ivr_node__goto_icon: i.isGotoNode }])
               }, null, 8, ["name", "class"])
             ]),
             _: 1
@@ -8438,7 +8455,7 @@ function uo(e, s, t, l, n, i) {
     }, 8, ["container-class", "header-class"])
   ], 16);
 }
-const ad = /* @__PURE__ */ v(lo, [["render", uo]]);
+const id = /* @__PURE__ */ v(lo, [["render", uo]]);
 const ho = {
   name: "DtRecipeGroupedChip",
   components: {
@@ -8515,7 +8532,7 @@ function bo(e, s, t, l, n, i) {
     })
   ]);
 }
-const ld = /* @__PURE__ */ v(ho, [["render", bo]]);
+const nd = /* @__PURE__ */ v(ho, [["render", bo]]);
 const yo = {
   name: "DtRecipeSettingsMenuButton",
   components: {
@@ -8579,7 +8596,7 @@ function vo(e, s, t, l, n, i) {
     _: 1
   }, 16, ["aria-label"]));
 }
-const od = /* @__PURE__ */ v(yo, [["render", vo], ["__scopeId", "data-v-7712e6e1"]]), N = {
+const ad = /* @__PURE__ */ v(yo, [["render", vo], ["__scopeId", "data-v-7712e6e1"]]), N = {
   INBOX: "inbox",
   CONTACTS: "contacts",
   CHANNELS: "channels",
@@ -8631,12 +8648,12 @@ const od = /* @__PURE__ */ v(yo, [["render", vo], ["__scopeId", "data-v-7712e6e1
 }, Lo = /* @__PURE__ */ Os('<circle cx="179" cy="179" r="179" fill="url(#paint0_linear_4_44)"></circle><path d="M179 268.5v-11.933V268.5Zm86.517 0v11.933h19.308l-8.635-17.27-10.673 5.337Zm-16.73-33.459-9.3-7.478-4.797 5.967 3.424 6.848 10.673-5.337ZM179 101.433c42.839 0 77.567 34.728 77.567 77.567h23.866c0-56.02-45.413-101.433-101.433-101.433v23.866ZM101.433 179c0-42.839 34.728-77.567 77.567-77.567V77.567C122.98 77.567 77.567 122.98 77.567 179h23.866ZM179 256.567c-42.839 0-77.567-34.728-77.567-77.567H77.567c0 56.02 45.413 101.433 101.433 101.433v-23.866Zm86.517 0H179v23.866h86.517v-23.866Zm-27.403-16.189 16.729 33.459 21.347-10.674-16.729-33.459-21.347 10.674ZM256.567 179c0 18.396-6.39 35.268-17.08 48.563l18.6 14.955c13.975-17.38 22.346-39.488 22.346-63.518h-23.866Z" fill="white"></path><path d="M226.733 202.867c-6.527 5.701-13.942 10.11-22.243 13.226-8.302 3.116-16.781 4.674-25.437 4.674-8.727 0-17.241-1.558-25.543-4.674-8.301-3.116-15.716-7.525-22.243-13.226v-11.934c4.399 2.652 9.365 4.939 14.9 6.862a112.163 112.163 0 0 0 16.815 4.674c5.748 1.127 11.105 1.69 16.071 1.69 5.038 0 10.395-.563 16.071-1.69a112.209 112.209 0 0 0 16.816-4.674c5.534-1.923 10.465-4.21 14.793-6.862v11.934Z" fill="white"></path><defs><linearGradient id="paint0_linear_4_44" x1="0" y1="0" x2="358" y2="358" gradientUnits="userSpaceOnUse"><stop stop-color="#7C52FF"></stop><stop offset="1" stop-color="#F9008E"></stop></linearGradient></defs>', 4), Oo = [
   Lo
 ];
-function To(e, s) {
+function Eo(e, s) {
   return a(), o("svg", ko, Oo);
 }
-const Eo = /* @__PURE__ */ v(wo, [["render", To]]), Ao = {
+const To = /* @__PURE__ */ v(wo, [["render", Eo]]), Ao = {
   name: "DtRecipeLeftbarGeneralRowIcon",
-  components: { DtIcon: B, IconDialbot: Eo },
+  components: { DtIcon: B, IconDialbot: To },
   props: {
     type: {
       type: String,
@@ -8689,10 +8706,10 @@ function Do(e, s, t, l, n, i) {
     size: t.iconSize
   }, null, 8, ["name", "size"])) : i.isContactCenterType ? (a(), o("div", {
     key: 1,
-    class: b(i.contactCenterIconClasses)
+    class: y(i.contactCenterIconClasses)
   }, null, 2)) : i.isDialbotType ? (a(), o("div", {
     key: 2,
-    class: b(i.dialbotClasses),
+    class: y(i.dialbotClasses),
     "data-qa": "general-row-dialbot"
   }, [
     p(h, { class: "d-svg--size24" })
@@ -8842,7 +8859,8 @@ const xo = {
   ],
   data() {
     return {
-      actionFocused: !1
+      actionFocused: !1,
+      labelWidth: "100%"
     };
   },
   computed: {
@@ -8893,33 +8911,47 @@ const xo = {
       }
     }
   },
+  beforeUpdate() {
+    this.handleResize();
+  },
+  mounted: function() {
+    this.handleResize(), window.addEventListener("resize", this.handleResize);
+  },
+  beforeUnmount: function() {
+    window.removeEventListener("resize", this.handleResize);
+  },
   methods: {
     validateProps() {
       this.type === N.CONTACT_CENTER && !Object.keys(Be).includes(this.color) && console.error(Io);
+    },
+    async handleResize() {
+      var n, i, r, h, u, b;
+      const e = ((i = (n = this.$el) == null ? void 0 : n.querySelector(".dt-leftbar-row__primary")) == null ? void 0 : i.clientWidth) || 0, s = ((h = (r = this.$el) == null ? void 0 : r.querySelector(".dt-leftbar-row__omega")) == null ? void 0 : h.clientWidth) || 0, t = ((b = (u = this.$el) == null ? void 0 : u.querySelector(".dt-leftbar-row__alpha")) == null ? void 0 : b.clientWidth) || 0, l = 16;
+      this.labelWidth = e - (s + t + l) + "px";
     }
   }
 }, Bo = ["data-qa", "aria-label", "title", "href"], Po = { class: "dt-leftbar-row__alpha" }, $o = {
   key: 0,
   class: "dt-leftbar-row__is-typing"
-}, No = /* @__PURE__ */ _("span", null, null, -1), zo = /* @__PURE__ */ _("span", null, null, -1), Mo = /* @__PURE__ */ _("span", null, null, -1), Vo = [
+}, No = /* @__PURE__ */ _("span", null, null, -1), zo = /* @__PURE__ */ _("span", null, null, -1), Mo = /* @__PURE__ */ _("span", null, null, -1), qo = [
   No,
   zo,
   Mo
-], qo = { class: "dt-leftbar-row__label" }, Ho = {
+], Vo = {
   key: 0,
   class: "dt-leftbar-row__omega"
-}, Fo = { class: "dt-leftbar-row__dnd" }, jo = {
+}, Ho = {
   key: 1,
   class: "dt-leftbar-row__active-voice"
-}, Ko = {
+}, Fo = {
   key: 3,
   class: "dt-leftbar-row__action",
   "data-qa": "dt-leftbar-row-action"
 };
-function Go(e, s, t, l, n, i) {
-  const r = f("dt-recipe-leftbar-general-row-icon"), h = f("dt-emoji-text-wrapper"), u = f("dt-tooltip"), y = f("dt-icon"), w = f("dt-badge"), m = f("dt-button");
+function jo(e, s, t, l, n, i) {
+  const r = f("dt-recipe-leftbar-general-row-icon"), h = f("dt-emoji-text-wrapper"), u = f("dt-tooltip"), b = f("dt-icon"), w = f("dt-badge"), m = f("dt-button");
   return a(), o("div", {
-    class: b(i.leftbarGeneralRowClasses),
+    class: y(i.leftbarGeneralRowClasses),
     "data-qa": "dt-leftbar-row"
   }, [
     _("a", I({
@@ -8930,7 +8962,7 @@ function Go(e, s, t, l, n, i) {
       href: "href" in e.$attrs ? e.$attrs.href : "javascript:void(0)"
     }, e.$attrs), [
       _("div", Po, [
-        t.isTyping ? (a(), o("div", $o, Vo)) : d(e.$slots, "left", { key: 1 }, () => [
+        t.isTyping ? (a(), o("div", $o, qo)) : d(e.$slots, "left", { key: 1 }, () => [
           p(r, {
             type: i.getIcon,
             color: t.color,
@@ -8939,7 +8971,10 @@ function Go(e, s, t, l, n, i) {
           }, null, 8, ["type", "color", "icon-size"])
         ])
       ]),
-      _("div", qo, [
+      _("div", {
+        class: "dt-leftbar-row__label",
+        style: se(`flex-basis: ${n.labelWidth}`)
+      }, [
         d(e.$slots, "label", {}, () => [
           p(h, {
             class: "dt-leftbar-row__description",
@@ -8952,21 +8987,25 @@ function Go(e, s, t, l, n, i) {
             _: 1
           })
         ])
-      ])
+      ], 4)
     ], 16, Bo),
-    i.hasActions ? (a(), o("div", Ho, [
+    i.hasActions ? (a(), o("div", Vo, [
       t.dndText ? (a(), S(u, {
         key: 0,
         placement: "top",
         message: t.dndTextTooltip
       }, {
         anchor: c(() => [
-          _("div", Fo, C(t.dndText), 1)
+          _("div", {
+            ref: "dt-leftbar-row-dnd",
+            class: "dt-leftbar-row__dnd",
+            "data-qa": "dt-leftbar-row-dnd"
+          }, C(t.dndText), 513)
         ]),
         _: 1
       }, 8, ["message"])) : g("", !0),
-      t.activeVoiceChat ? (a(), o("div", jo, [
-        p(y, {
+      t.activeVoiceChat ? (a(), o("div", Ho, [
+        p(b, {
           size: "300",
           name: "activity"
         })
@@ -8990,7 +9029,7 @@ function Go(e, s, t, l, n, i) {
         ]),
         _: 1
       }, 8, ["message"])) : g("", !0),
-      t.hasCallButton ? (a(), o("div", Ko, [
+      t.hasCallButton ? (a(), o("div", Fo, [
         p(u, {
           message: t.callButtonTooltip,
           placement: "top"
@@ -9003,12 +9042,12 @@ function Go(e, s, t, l, n, i) {
               size: "xs",
               kind: "inverted",
               "aria-label": t.callButtonTooltip,
-              onFocus: s[0] || (s[0] = (T) => n.actionFocused = !0),
-              onBlur: s[1] || (s[1] = (T) => n.actionFocused = !1),
-              onClick: s[2] || (s[2] = te((T) => e.$emit("call", T), ["stop"]))
+              onFocus: s[0] || (s[0] = (E) => n.actionFocused = !0),
+              onBlur: s[1] || (s[1] = (E) => n.actionFocused = !1),
+              onClick: s[2] || (s[2] = te((E) => e.$emit("call", E), ["stop"]))
             }, {
               icon: c(() => [
-                p(y, {
+                p(b, {
                   name: "phone",
                   size: "200"
                 })
@@ -9022,7 +9061,7 @@ function Go(e, s, t, l, n, i) {
     ])) : g("", !0)
   ], 2);
 }
-const ds = /* @__PURE__ */ v(xo, [["render", Go]]), Uo = {
+const ds = /* @__PURE__ */ v(xo, [["render", jo]]), Ko = {
   name: "DtRecipeGroupRow",
   components: {
     DtIcon: B,
@@ -9096,7 +9135,7 @@ const ds = /* @__PURE__ */ v(xo, [["render", Go]]), Uo = {
     }
   }
 };
-function Wo(e, s, t, l, n, i) {
+function Go(e, s, t, l, n, i) {
   const r = f("dt-icon"), h = f("dt-recipe-general-row");
   return a(), S(h, I({
     description: t.names,
@@ -9116,7 +9155,7 @@ function Wo(e, s, t, l, n, i) {
     _: 1
   }, 16, ["description", "aria-label", "unread-count", "has-unreads", "unread-count-tooltip", "selected", "is-typing"]);
 }
-const rd = /* @__PURE__ */ v(Uo, [["render", Wo]]), Zo = {
+const ld = /* @__PURE__ */ v(Ko, [["render", Go]]), Uo = {
   name: "DtRecipeGroupRow",
   components: {
     DtAvatar: it,
@@ -9271,10 +9310,10 @@ const rd = /* @__PURE__ */ v(Uo, [["render", Wo]]), Zo = {
       return Xe([this.name, this.presenceText, this.userStatus]);
     }
   }
-}, Yo = ["src"], Qo = { class: "dt-leftbar-row__status" };
-function Xo(e, s, t, l, n, i) {
-  const r = f("dt-icon"), h = f("dt-avatar"), u = f("dt-emoji-text-wrapper"), y = f("dt-recipe-general-row");
-  return a(), S(y, I({
+}, Wo = ["src"], Zo = { class: "dt-leftbar-row__status" };
+function Yo(e, s, t, l, n, i) {
+  const r = f("dt-icon"), h = f("dt-avatar"), u = f("dt-emoji-text-wrapper"), b = f("dt-recipe-general-row");
+  return a(), S(b, I({
     "unread-count": t.unreadCount,
     description: i.contactDescription,
     "has-unreads": t.hasUnreads,
@@ -9299,7 +9338,7 @@ function Xo(e, s, t, l, n, i) {
             "data-qa": "dt-avatar-image",
             src: t.avatarSrc,
             alt: ""
-          }, null, 8, Yo)) : t.noInitials ? (a(), S(r, {
+          }, null, 8, Wo)) : t.noInitials ? (a(), S(r, {
             key: 1,
             name: "user",
             size: "200"
@@ -9321,11 +9360,11 @@ function Xo(e, s, t, l, n, i) {
         ]),
         _: 1
       }),
-      _("div", Qo, [
+      _("div", Zo, [
         t.presenceText ? (a(), o("span", {
           key: 0,
           "data-qa": "dt-leftbar-row-presence-text",
-          class: b(["dt-leftbar-row__meta-context", i.presenceColorClass])
+          class: y(["dt-leftbar-row__meta-context", i.presenceColorClass])
         }, C(t.presenceText), 3)) : g("", !0),
         t.userStatus ? (a(), S(u, {
           key: 1,
@@ -9344,8 +9383,8 @@ function Xo(e, s, t, l, n, i) {
     _: 1
   }, 16, ["unread-count", "description", "has-unreads", "selected", "has-call-button", "muted", "is-typing", "call-button-tooltip", "unread-count-tooltip"]);
 }
-const dd = /* @__PURE__ */ v(Zo, [["render", Xo]]), Jo = ["up", "down"], er = ["mentions", "messages"];
-const tr = {
+const od = /* @__PURE__ */ v(Uo, [["render", Yo]]), Qo = ["up", "down"], Xo = ["mentions", "messages"];
+const Jo = {
   name: "DtRecipeUnreadPill",
   components: {
     DtIcon: B
@@ -9358,7 +9397,7 @@ const tr = {
     kind: {
       type: String,
       required: !0,
-      validator: (e) => er.includes(e)
+      validator: (e) => Xo.includes(e)
     },
     /**
      * The direction of the arrow icon
@@ -9367,7 +9406,7 @@ const tr = {
     direction: {
       type: String,
       required: !0,
-      validator: (e) => Jo.includes(e)
+      validator: (e) => Qo.includes(e)
     }
   },
   emits: [
@@ -9386,8 +9425,8 @@ const tr = {
       };
     }
   }
-}, sr = { "data-qa": "dt-leftbar-unread-pill__label" };
-function ir(e, s, t, l, n, i) {
+}, er = { "data-qa": "dt-leftbar-unread-pill__label" };
+function tr(e, s, t, l, n, i) {
   const r = f("dt-icon");
   return a(), o("button", I({
     class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${t.kind}`],
@@ -9398,17 +9437,17 @@ function ir(e, s, t, l, n, i) {
       name: `arrow-${t.direction}`,
       size: "300"
     }, null, 8, ["name"]),
-    _("span", sr, [
+    _("span", er, [
       d(e.$slots, "default")
     ])
   ], 16);
 }
-const cd = /* @__PURE__ */ v(tr, [["render", ir]]), Fe = {
+const rd = /* @__PURE__ */ v(Jo, [["render", tr]]), Fe = {
   NORMAL: "",
   SEARCHED: "d-bgc-warning-subtle",
   ERROR: "d-bgc-critical-subtle"
 }, je = "NORMAL";
-const nr = {
+const sr = {
   name: "DtRecipeFeedItemRow",
   components: {
     DtAvatar: it,
@@ -9528,21 +9567,21 @@ const nr = {
       this.state === je || this.faded === !0 || (this.$refs.FeedItemRef.$el.classList.remove(Fe[this.state]), this.faded = !0);
     }
   }
-}, ar = ["src"], lr = {
+}, ir = ["src"], nr = {
   key: 0,
   "data-qa": "feed-item-row-header",
   class: "d-d-flex d-ai-center"
-}, or = { class: "d-fs-200 d-lh-300 d-fw-bold d-to-ellipsis d-of-hidden d-ws-nowrap" }, rr = { class: "d-fs-100 d-mt2 d-lh-300 d-fc-tertiary d-fw-normal d-ml4 d-fl-shrink0" }, dr = {
+}, ar = { class: "d-fs-200 d-lh-300 d-fw-bold d-to-ellipsis d-of-hidden d-ws-nowrap" }, lr = { class: "d-fs-100 d-mt2 d-lh-300 d-fc-tertiary d-fw-normal d-ml4 d-fl-shrink0" }, or = {
   class: "content-text-wrapper-class",
   "data-qa": "feed-item-row-content"
-}, cr = {
+}, rr = {
   class: "d-d-flex d-fw-wrap",
   "data-qa": "feed-item-row-reactions"
-}, ur = {
+}, dr = {
   "data-qa": "feed-item-row-menu",
   class: "d-ps-absolute d-tn16 d-r12"
 };
-function hr(e, s, t, l, n, i) {
+function cr(e, s, t, l, n, i) {
   const r = f("dt-avatar"), h = f("dt-lazy-show"), u = f("dt-list-item");
   return a(), S(u, I({
     ref: "FeedItemRef",
@@ -9563,7 +9602,7 @@ function hr(e, s, t, l, n, i) {
             "data-qa": "feed-item-row-avatar-img",
             alt: "",
             src: t.avatarImageUrl
-          }, null, 8, ar)) : g("", !0)
+          }, null, 8, ir)) : g("", !0)
         ]),
         _: 1
       }, 8, ["initials"])) : g("", !0),
@@ -9576,13 +9615,13 @@ function hr(e, s, t, l, n, i) {
       ])
     ]),
     bottom: c(() => [
-      _("div", cr, [
+      _("div", rr, [
         d(e.$slots, "reactions")
       ]),
       d(e.$slots, "threading")
     ]),
     right: c(() => [
-      Se(_("div", ur, [
+      Se(_("div", dr, [
         p(h, {
           appear: !0,
           transition: "fade",
@@ -9599,11 +9638,11 @@ function hr(e, s, t, l, n, i) {
     ]),
     default: c(() => [
       _("article", null, [
-        t.showHeader ? (a(), o("div", lr, [
-          _("p", or, C(t.displayName), 1),
-          _("time", rr, C(t.time), 1)
+        t.showHeader ? (a(), o("div", nr, [
+          _("p", ar, C(t.displayName), 1),
+          _("time", lr, C(t.time), 1)
         ])) : g("", !0),
-        _("span", dr, [
+        _("span", or, [
           d(e.$slots, "default")
         ])
       ])
@@ -9611,7 +9650,7 @@ function hr(e, s, t, l, n, i) {
     _: 3
   }, 16, ["class"]);
 }
-const ud = /* @__PURE__ */ v(nr, [["render", hr]]), fr = {
+const dd = /* @__PURE__ */ v(sr, [["render", cr]]), ur = {
   name: "DtRecipeTimePill",
   props: {
     /**
@@ -9634,21 +9673,21 @@ const ud = /* @__PURE__ */ v(nr, [["render", hr]]), fr = {
       }
     }
   }
-}, mr = ["dateTime"];
-function pr(e, s, t, l, n, i) {
+}, hr = ["dateTime"];
+function fr(e, s, t, l, n, i) {
   return a(), o("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"
-  }, C(t.dateTimeDisplay), 9, mr);
+  }, C(t.dateTimeDisplay), 9, hr);
 }
-const hd = /* @__PURE__ */ v(fr, [["render", pr]]), gr = [
+const cd = /* @__PURE__ */ v(ur, [["render", fr]]), mr = [
   "emojiUnicodeOrShortname",
   "isSelected",
   "ariaLabel",
   "tooltip",
   "num"
-], _r = {
+], pr = {
   name: "DtRecipeEmojiRow",
   components: { DtTooltip: Qe, DtButton: K, DtEmoji: zs, DtEmojiTextWrapper: st },
   mixins: [],
@@ -9661,7 +9700,7 @@ const hd = /* @__PURE__ */ v(fr, [["render", pr]]), gr = [
       default: () => [],
       validator: (e) => {
         for (const s of e)
-          if (!gr.every((l) => s[l] !== void 0))
+          if (!mr.every((l) => s[l] !== void 0))
             return !1;
         return !0;
       }
@@ -9682,16 +9721,16 @@ const hd = /* @__PURE__ */ v(fr, [["render", pr]]), gr = [
       });
     }
   }
-}, br = { class: "d-d-flex d-fw-wrap" }, yr = ["reaction"], vr = { "aria-hidden": "true" }, Sr = { class: "d-mr4" }, Ir = { class: "d-fw-bold d-fs-100" };
-function Cr(e, s, t, l, n, i) {
-  const r = f("dt-emoji-text-wrapper"), h = f("dt-emoji"), u = f("dt-button"), y = f("dt-tooltip");
-  return a(), o("span", br, [
+}, gr = { class: "d-d-flex d-fw-wrap" }, _r = ["reaction"], br = { "aria-hidden": "true" }, yr = { class: "d-mr4" }, vr = { class: "d-fw-bold d-fs-100" };
+function Sr(e, s, t, l, n, i) {
+  const r = f("dt-emoji-text-wrapper"), h = f("dt-emoji"), u = f("dt-button"), b = f("dt-tooltip");
+  return a(), o("span", gr, [
     (a(!0), o(W, null, X(t.reactions, (w) => (a(), o("span", {
       key: w.unicodeOutput,
       reaction: w,
       class: "d-mr4 d-mb4"
     }, [
-      p(y, {
+      p(b, {
         class: "d-d-inline-block",
         "content-class": "d-wmx464",
         onShown: (m) => i.emojiHovered(w, m)
@@ -9701,29 +9740,29 @@ function Cr(e, s, t, l, n, i) {
             importance: "clear",
             size: "sm",
             "data-qa": "feed-item-reaction-button",
-            class: b([
+            class: y([
               "d-h24 d-bar16 d-py0 d-fs-200 d-mb0 d-t",
               w.isSelected ? `d-fc-purple-500 d-bgc-purple-400 d-bgo10 d-bc-purple-400 d-bco50 ' +
                   '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: m,
-            onClick: (T) => i.emojiClicked(w)
+            onClick: (E) => i.emojiClicked(w)
           }, {
             default: c(() => [
-              _("span", Sr, [
+              _("span", yr, [
                 p(h, {
                   size: "200",
                   code: w.emojiUnicodeOrShortname
                 }, null, 8, ["code"])
               ]),
-              _("span", Ir, C(w.num), 1)
+              _("span", vr, C(w.num), 1)
             ]),
             _: 2
           }, 1032, ["class", "aria-label", "attrs", "onClick"])
         ]),
         default: c(() => [
-          _("span", vr, [
+          _("span", br, [
             p(r, { size: "200" }, {
               default: c(() => [
                 R(C(w.tooltip), 1)
@@ -9734,18 +9773,18 @@ function Cr(e, s, t, l, n, i) {
         ]),
         _: 2
       }, 1032, ["onShown"])
-    ], 8, yr))), 128))
+    ], 8, _r))), 128))
   ]);
 }
-const fd = /* @__PURE__ */ v(_r, [["render", Cr]]);
+const ud = /* @__PURE__ */ v(pr, [["render", Sr]]);
 export {
   Gs as AVATAR_COLORS,
   Rt as AVATAR_GROUP_VALIDATOR,
-  Tr as AVATAR_ICON_SIZES,
+  Lr as AVATAR_ICON_SIZES,
   At as AVATAR_KIND_MODIFIERS,
   Ks as AVATAR_PRESENCE_SIZE_MODIFIERS,
   Dt as AVATAR_PRESENCE_STATES,
-  qe as AVATAR_SIZE_MODIFIERS,
+  Ve as AVATAR_SIZE_MODIFIERS,
   Pt as BADGE_DECORATION_MODIFIERS,
   Bt as BADGE_KIND_MODIFIERS,
   xt as BADGE_TYPE_MODIFIERS,
@@ -9753,89 +9792,89 @@ export {
   Si as BREADCRUMB_ITEM_SELECTED_MODIFIER,
   $t as BUTTON_GROUP_ALIGNMENT,
   rs as CALLBAR_BUTTON_VALID_WIDTH_SIZE,
-  qt as CHIP_SIZE_MODIFIERS,
+  Vt as CHIP_SIZE_MODIFIERS,
   Xl as COLOR_CODES,
-  gd as DEFAULT_VALIDATION_MESSAGE_TYPE,
-  _d as DESCRIPTION_SIZE_TYPES,
+  md as DEFAULT_VALIDATION_MESSAGE_TYPE,
+  pd as DESCRIPTION_SIZE_TYPES,
   it as DtAvatar,
   ni as DtBadge,
-  Er as DtBanner,
-  Ti as DtBreadcrumbItem,
-  Ar as DtBreadcrumbs,
+  Or as DtBanner,
+  Ei as DtBreadcrumbItem,
+  Er as DtBreadcrumbs,
   K as DtButton,
-  Dr as DtButtonGroup,
+  Tr as DtButtonGroup,
   $i as DtCard,
   Qt as DtCheckableInputMixin,
-  jr as DtCheckbox,
-  Kr as DtCheckboxGroup,
+  Hr as DtCheckbox,
+  Fr as DtCheckboxGroup,
   ns as DtChip,
-  Rr as DtCodeblock,
-  xr as DtCollapsible,
+  Ar as DtCodeblock,
+  Dr as DtCollapsible,
   rn as DtCombobox,
   yn as DtDropdown,
-  Br as DtDropdownSeparator,
+  Rr as DtDropdownSeparator,
   Xt as DtGroupableInputMixin,
   B as DtIcon,
-  Pr as DtImageViewer,
+  xr as DtImageViewer,
   Ps as DtInput,
   is as DtInputGroup,
-  En as DtInputGroupMixin,
+  Tn as DtInputGroupMixin,
   Yt as DtInputMixin,
   Jt as DtKeyboardListNavigationMixin,
-  Yr as DtKeyboardShortcut,
+  Wr as DtKeyboardShortcut,
   We as DtLazyShow,
   ki as DtLink,
   $e as DtListItem,
-  Mr as DtListItemGroup,
-  zr as DtListSection,
-  Nr as DtModal,
-  $r as DtNotice,
-  Vr as DtPagination,
+  Nr as DtListItemGroup,
+  $r as DtListSection,
+  Pr as DtModal,
+  Br as DtNotice,
+  zr as DtPagination,
   et as DtPopover,
   js as DtPresence,
-  qr as DtRadio,
-  Hr as DtRadioGroup,
+  Mr as DtRadio,
+  qr as DtRadioGroup,
   $l as DtRecipeCallbarButton,
-  td as DtRecipeCallbarButtonWithPopover,
-  ed as DtRecipeComboboxMultiSelect,
+  Jr as DtRecipeCallbarButtonWithPopover,
+  Xr as DtRecipeComboboxMultiSelect,
   Cl as DtRecipeComboboxWithPopover,
-  sd as DtRecipeContactInfo,
-  dd as DtRecipeContactRow,
-  fd as DtRecipeEmojiRow,
-  ud as DtRecipeFeedItemRow,
+  ed as DtRecipeContactInfo,
+  od as DtRecipeContactRow,
+  ud as DtRecipeEmojiRow,
+  dd as DtRecipeFeedItemRow,
   ds as DtRecipeGeneralRow,
-  rd as DtRecipeGroupRow,
-  ld as DtRecipeGroupedChip,
-  ad as DtRecipeIvrNode,
-  od as DtRecipeSettingsMenuButton,
-  hd as DtRecipeTimePill,
-  id as DtRecipeTopBannerInfo,
-  cd as DtRecipeUnreadPill,
-  Qr as DtRootLayout,
-  Jr as DtScroller,
-  Gr as DtSelectMenu,
+  ld as DtRecipeGroupRow,
+  nd as DtRecipeGroupedChip,
+  id as DtRecipeIvrNode,
+  ad as DtRecipeSettingsMenuButton,
+  cd as DtRecipeTimePill,
+  td as DtRecipeTopBannerInfo,
+  rd as DtRecipeUnreadPill,
+  Zr as DtRootLayout,
+  Qr as DtScroller,
+  jr as DtSelectMenu,
   Ns as DtSkeleton,
-  Vd as DtSkeletonListItem,
-  qd as DtSkeletonParagraph,
-  Hd as DtSkeletonShape,
-  Fd as DtSkeletonText,
-  Xr as DtStack,
-  bd as DtTab,
-  yd as DtTabGroup,
-  Fr as DtTabPanel,
-  Ur as DtToast,
-  Wr as DtToggle,
+  zd as DtSkeletonListItem,
+  Md as DtSkeletonParagraph,
+  qd as DtSkeletonShape,
+  Vd as DtSkeletonText,
+  Yr as DtStack,
+  gd as DtTab,
+  _d as DtTabGroup,
+  Vr as DtTabPanel,
+  Kr as DtToast,
+  Gr as DtToggle,
   Qe as DtTooltip,
   pe as DtValidationMessages,
-  vd as ICON_SIZE_MODIFIERS,
-  Sd as INPUT_SIZES,
-  Id as INPUT_TYPES,
+  bd as ICON_SIZE_MODIFIERS,
+  yd as INPUT_SIZES,
+  vd as INPUT_TYPES,
   ht as IVR_NODE_BRANCH,
   ut as IVR_NODE_EXPERT,
   Ne as IVR_NODE_GO_TO,
   mt as IVR_NODE_HANGUP,
   no as IVR_NODE_ICON_TYPES,
-  nd as IVR_NODE_LABELS,
+  sd as IVR_NODE_LABELS,
   dt as IVR_NODE_PROMPT_COLLECT,
   rt as IVR_NODE_PROMPT_MENU,
   ct as IVR_NODE_PROMPT_PLAY,
@@ -9846,46 +9885,46 @@ export {
   Co as LEFTBAR_GENERAL_ROW_ICON_SIZES,
   N as LEFTBAR_GENERAL_ROW_TYPES,
   As as LINK_KIND_MODIFIERS,
-  Es as LINK_VARIANTS,
+  Ts as LINK_VARIANTS,
   zt as MODAL_KIND_MODIFIERS,
   Mt as MODAL_SIZE_MODIFIERS,
   wl as MULTI_SELECT_SIZES,
   Oe as NOTICE_KINDS,
   $s as POPOVER_CONTENT_WIDTHS,
-  Pd as POPOVER_HEADER_FOOTER_PADDING_CLASSES,
-  $d as POPOVER_INITIAL_FOCUS_STRINGS,
-  Nd as POPOVER_PADDING_CLASSES,
-  zd as POPOVER_ROLES,
+  xd as POPOVER_HEADER_FOOTER_PADDING_CLASSES,
+  Bd as POPOVER_INITIAL_FOCUS_STRINGS,
+  Pd as POPOVER_PADDING_CLASSES,
+  $d as POPOVER_ROLES,
   be as PRESENCE_STATES,
   Ms as PRESENCE_STATES_LIST,
-  gr as REACTIONS_ATTRIBUTES,
+  mr as REACTIONS_ATTRIBUTES,
   el as ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS,
   as as ROOT_LAYOUT_SIDEBAR_POSITIONS,
   Ht as SELECT_SIZE_MODIFIERS,
   La as SELECT_STATE_MODIFIERS,
-  Zr as SHORTCUTS_ALIASES_LIST,
+  Ur as SHORTCUTS_ALIASES_LIST,
   ye as SHORTCUTS_ICON_ALIASES,
   Za as SHORTCUTS_ICON_SEPARATOR,
-  jd as SKELETON_HEADING_HEIGHTS,
-  Kd as SKELETON_RIPPLE_DURATION,
-  Gd as SKELETON_SHAPES,
-  Ud as SKELETON_SHAPE_SIZES,
-  Wd as SKELETON_TEXT_TYPES,
-  Cd as TAB_IMPORTANCE_MODIFIERS,
-  wd as TAB_LIST_IMPORTANCE_MODIFIERS,
-  kd as TAB_LIST_KIND_MODIFIERS,
-  Ld as TAB_LIST_SIZES,
+  Hd as SKELETON_HEADING_HEIGHTS,
+  Fd as SKELETON_RIPPLE_DURATION,
+  jd as SKELETON_SHAPES,
+  Kd as SKELETON_SHAPE_SIZES,
+  Gd as SKELETON_TEXT_TYPES,
+  Sd as TAB_IMPORTANCE_MODIFIERS,
+  Id as TAB_LIST_IMPORTANCE_MODIFIERS,
+  Cd as TAB_LIST_KIND_MODIFIERS,
+  wd as TAB_LIST_SIZES,
   Na as TOAST_ROLES,
-  Od as TOOLTIP_DELAY_MS,
-  Td as TOOLTIP_DIRECTIONS,
-  Ed as TOOLTIP_HIDE_ON_CLICK_VARIANTS,
-  Ad as TOOLTIP_KIND_MODIFIERS,
-  Dd as TOOLTIP_STICKY_VALUES,
-  Jo as UNREAD_PILL_DIRECTIONS,
-  er as UNREAD_PILL_KINDS,
-  Rd as VALIDATION_MESSAGE_TYPES,
-  xd as filterFormattedMessages,
-  Et as formatMessages,
+  kd as TOOLTIP_DELAY_MS,
+  Ld as TOOLTIP_DIRECTIONS,
+  Od as TOOLTIP_HIDE_ON_CLICK_VARIANTS,
+  Ed as TOOLTIP_KIND_MODIFIERS,
+  Td as TOOLTIP_STICKY_VALUES,
+  Qo as UNREAD_PILL_DIRECTIONS,
+  Xo as UNREAD_PILL_KINDS,
+  Ad as VALIDATION_MESSAGE_TYPES,
+  Dd as filterFormattedMessages,
+  Tt as formatMessages,
   j as getUniqueString,
   Ke as getValidationState,
   Zt as validationMessageValidator