@dialpad/dialtone-vue 3.70.0 → 3.72.0

package/dist/dialtone-vue.js

@@ -1,17 +1,17 @@
-import { openBlock as a, createElementBlock as l, toDisplayString as I, createCommentVNode as p, createElementVNode as _, normalizeClass as y, warn as we, resolveComponent as f, renderSlot as d, createBlock as S, mergeProps as C, createVNode as m, createTextVNode as P, withKeys as V, withModifiers as U, withCtx as c, normalizeStyle as re, Fragment as Y, renderList as ee, resolveDynamicComponent as X, toHandlers as M, createSlots as ke, normalizeProps as Ee, Transition as Ue, withDirectives as Se, guardReactiveProps as We, vShow as Ce, Teleport as jt, reactive as kt, ref as pe, computed as Re, watch as Gt, onMounted as Ss, nextTick as Cs, unref as Ut, markRaw as Is, shallowReactive as ws, h as ks, provide as Es, createStaticVNode as Os } from "vue";
-import { _ as v, D as x, g as q, a as Ls, h as $, b as K, u as J, L as Ts, c as As, I as Ds, M as Ps, d as xs, e as $e, f as Ze, T as Rs, i as Bs, j as $s, k as Ns, E as H, l as me, v as Wt, m as Et, n as Ge, o as Zt, C as Yt, G as Qt, p as Ye, q as zs, r as Ms, s as Hs, t as Qe, w as Xe, x as Vs } from "./emoji_text_wrapper-a6cf0407.js";
-import { z as Pd, y as xd, X as Rd, $ as Bd, Z as $d, Y as Nd, J as zd, H as Md, a5 as Hd, F as Vd, B as Fd, a4 as qd, a0 as Kd, a1 as jd, a3 as Gd, a2 as Ud, P as Wd, O as Zd, K as Yd, N as Qd, R as Xd, Q as Jd, W as ec, S as tc, U as sc, V as ic, A as nc } from "./emoji_text_wrapper-a6cf0407.js";
+import { openBlock as a, createElementBlock as l, toDisplayString as I, createCommentVNode as p, createElementVNode as _, normalizeClass as y, warn as we, resolveComponent as f, renderSlot as d, createBlock as S, mergeProps as C, createVNode as m, createTextVNode as P, withKeys as F, withModifiers as U, withCtx as c, normalizeStyle as re, Fragment as Y, renderList as ee, resolveDynamicComponent as X, toHandlers as M, createSlots as Ee, normalizeProps as ke, Transition as Ze, withDirectives as Se, guardReactiveProps as Ye, vShow as Ce, Teleport as Wt, reactive as Lt, ref as pe, computed as Re, watch as Zt, onMounted as ws, nextTick as Es, unref as Yt, markRaw as ks, shallowReactive as Os, h as Ls, provide as Ts, createStaticVNode as As } from "vue";
+import { _ as v, D as x, g as q, a as Ds, h as $, b as K, u as J, L as Ps, c as xs, I as Rs, M as Bs, d as $s, e as $e, f as Qe, T as Ns, i as zs, j as Ms, k as Hs, E as H, l as me, v as Qt, m as Tt, n as We, o as Xt, C as Jt, G as es, p as Xe, q as Fs, r as Vs, s as qs, t as Je, w as et, x as tt, y as Ks } from "./emoji_text_wrapper-2d0e6363.js";
+import { A as Bd, z as $d, Y as Nd, a0 as zd, $ as Md, Z as Hd, K as Fd, J as Vd, a6 as qd, H as Kd, F as jd, a5 as Gd, a1 as Ud, a2 as Wd, a4 as Zd, a3 as Yd, Q as Qd, P as Xd, N as Jd, O as ec, S as tc, R as sc, X as ic, U as nc, W as ac, V as oc, B as lc } from "./emoji_text_wrapper-2d0e6363.js";
 const be = {
   BUSY: "busy",
   AWAY: "away",
   OFFLINE: "offline",
   ACTIVE: "active"
-}, Fs = [
+}, js = [
   be.BUSY,
   be.AWAY,
   be.OFFLINE,
   be.ACTIVE
-], qs = {
+], Gs = {
   name: "DtPresence",
   props: {
     /**
@@ -22,7 +22,7 @@ const be = {
     presence: {
       type: String,
       default: be.ACTIVE,
-      validator: (e) => Fs.includes(e)
+      validator: (e) => js.includes(e)
     },
     /**
      * Since Presence is a visual element, we need SRs to read out any state changes
@@ -34,19 +34,19 @@ const be = {
       default: null
     }
   }
-}, Ks = ["aria-live"], js = {
+}, Us = ["aria-live"], Ws = {
   key: 0,
   "data-qa": "dt-presence-sr-text",
   class: "sr-only"
 };
-function Gs(e, s, t, o, n, i) {
+function Zs(e, s, t, o, n, i) {
   return a(), l("div", {
     class: "d-presence",
     "data-qa": "dt-presence",
     role: "status",
     "aria-live": e.$attrs.ariaLive || "off"
   }, [
-    t.srText ? (a(), l("span", js, I(t.srText), 1)) : p("", !0),
+    t.srText ? (a(), l("span", Ws, I(t.srText), 1)) : p("", !0),
     _("div", {
       class: y(["d-presence__inner", {
         "d-presence__inner--active": t.presence === "active",
@@ -55,34 +55,34 @@ function Gs(e, s, t, o, n, i) {
         "d-presence__inner--offline": t.presence === "offline"
       }])
     }, null, 2)
-  ], 8, Ks);
+  ], 8, Us);
 }
-const Us = /* @__PURE__ */ v(qs, [["render", Gs]]), Ke = {
+const Ys = /* @__PURE__ */ v(Gs, [["render", Zs]]), Ke = {
   xs: "d-avatar--xs",
   sm: "d-avatar--sm",
   md: "d-avatar--md",
   lg: "d-avatar--lg",
   xl: "d-avatar--xl"
-}, Ot = {
+}, At = {
   default: "",
   icon: "d-avatar__icon",
   initials: "d-avatar__initials"
-}, Ws = {
+}, Qs = {
   md: "d-avatar__presence--md",
   lg: "d-avatar__presence--lg"
-}, Lt = {
+}, Dt = {
   NONE: "",
   BUSY: "busy",
   AWAY: "away",
   OFFLINE: "offline",
   ACTIVE: "active"
-}, Kr = {
+}, Ur = {
   xs: void 0,
   sm: "200",
   md: "300",
   lg: "500",
   xl: "600"
-}, Zs = [
+}, Xs = [
   void 0,
   "100",
   "200",
@@ -102,10 +102,10 @@ const Us = /* @__PURE__ */ v(qs, [["render", Gs]]), Ke = {
   "1600",
   "1700",
   "1800"
-], Tt = (e) => e > 1;
-const Ys = {
+], Pt = (e) => e > 1;
+const Js = {
   name: "DtAvatar",
-  components: { DtPresence: Us, DtIcon: x },
+  components: { DtPresence: Ys, DtIcon: x },
   inheritAttrs: !1,
   props: {
     /**
@@ -164,8 +164,8 @@ const Ys = {
      */
     presence: {
       type: String,
-      default: Lt.NONE,
-      validator: (e) => Object.values(Lt).includes(e)
+      default: Dt.NONE,
+      validator: (e) => Object.values(Dt).includes(e)
     },
     /**
      * A set of props to be passed into the presence component.
@@ -189,7 +189,7 @@ const Ys = {
     group: {
       type: Number,
       default: void 0,
-      validator: (e) => Tt(e)
+      validator: (e) => Pt(e)
     },
     /**
      * The icon that overlays the avatar
@@ -218,8 +218,8 @@ const Ys = {
       // initials, image or icon
       kind: null,
       AVATAR_SIZE_MODIFIERS: Ke,
-      AVATAR_KIND_MODIFIERS: Ot,
-      AVATAR_PRESENCE_SIZE_MODIFIERS: Ws,
+      AVATAR_KIND_MODIFIERS: At,
+      AVATAR_PRESENCE_SIZE_MODIFIERS: Qs,
       imageLoadedSuccessfully: null,
       slottedInitials: "",
       formattedInitials: "",
@@ -251,7 +251,7 @@ const Ys = {
       return this.kind === "initials" || this.kind === "image" && this.initials && this.imageLoadedSuccessfully !== !0;
     },
     showGroup() {
-      return Tt(this.group);
+      return Pt(this.group);
     },
     formattedGroup() {
       return this.group > 99 ? "99+" : this.group;
@@ -282,7 +282,7 @@ const Ys = {
           e.classList.add("d-avatar__image"), this.validateImageAttrsPresence(), this.setImageListeners(e);
           break;
         case "icon":
-          e.classList.add(Ot.icon);
+          e.classList.add(At.icon);
           break;
         case "initials":
           if (!e.textContent)
@@ -317,7 +317,7 @@ const Ys = {
       return ((s = e == null ? void 0 : e.tagName) == null ? void 0 : s.toUpperCase()) === "IMG";
     },
     getColor() {
-      return this.color ?? Ls(Zs, this.seed);
+      return this.color ?? Ds(Xs, this.seed);
     },
     validateImageAttrsPresence() {
       const e = !this.$refs.canvas.children[0].getAttribute("src"), s = this.$refs.canvas.children[0].getAttribute("alt") === null;
@@ -330,15 +330,15 @@ const Ys = {
       this.imageLoadedSuccessfully = !1, e.classList.remove("d-avatar--image-loaded"), e.classList.add("d-d-none");
     }
   }
-}, Qs = ["id"], Xs = {
+}, ei = ["id"], ti = {
   key: 1,
   class: "d-fs-200 d-fw-bold d-fc-white d-w100p d-ta-center"
-}, Js = {
+}, si = {
   key: 1,
   class: "d-avatar__count d-zi-base",
   "data-qa": "dt-avatar-count"
 };
-function ei(e, s, t, o, n, i) {
+function ii(e, s, t, o, n, i) {
   const r = f("dt-icon"), h = f("dt-presence");
   return a(), l("div", {
     id: t.id,
@@ -363,9 +363,9 @@ function ei(e, s, t, o, n, i) {
         key: 0,
         class: "d-fc-white d-w100p",
         name: t.overlayIcon
-      }, null, 8, ["name"])) : t.overlayText ? (a(), l("p", Xs, I(t.overlayText), 1)) : p("", !0)
+      }, null, 8, ["name"])) : t.overlayText ? (a(), l("p", ti, I(t.overlayText), 1)) : p("", !0)
     ], 2)) : p("", !0),
-    i.showGroup ? (a(), l("span", Js, I(i.formattedGroup), 1)) : p("", !0),
+    i.showGroup ? (a(), l("span", si, I(i.formattedGroup), 1)) : p("", !0),
     t.presence && !i.showGroup ? (a(), S(h, C({
       key: 2,
       presence: t.presence,
@@ -374,9 +374,9 @@ function ei(e, s, t, o, n, i) {
         n.AVATAR_PRESENCE_SIZE_MODIFIERS[t.size]
       ]]
     }, t.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : p("", !0)
-  ], 10, Qs);
+  ], 10, ei);
 }
-const Je = /* @__PURE__ */ v(Ys, [["render", ei]]), At = {
+const st = /* @__PURE__ */ v(Js, [["render", ii]]), xt = {
   default: "",
   info: "d-badge--info",
   success: "d-badge--success",
@@ -384,10 +384,10 @@ const Je = /* @__PURE__ */ v(Ys, [["render", ei]]), At = {
   critical: "d-badge--critical",
   bulletin: "d-badge--bulletin",
   ai: "d-badge--ai"
-}, Dt = {
+}, Rt = {
   label: "",
   count: "d-badge--count"
-}, Pt = {
+}, Bt = {
   "black-400": "d-badge--decorate-black-400",
   "black-500": "d-badge--decorate-black-500",
   "black-900": "d-badge--decorate-black-900",
@@ -410,7 +410,7 @@ const Je = /* @__PURE__ */ v(Ys, [["render", ei]]), At = {
   "magenta-200": "d-badge--decorate-magenta-200",
   "magenta-300": "d-badge--decorate-magenta-300",
   "magenta-400": "d-badge--decorate-magenta-400"
-}, ti = {
+}, ni = {
   name: "DtBadge",
   components: {
     DtIcon: x
@@ -447,7 +447,7 @@ const Je = /* @__PURE__ */ v(Ys, [["render", ei]]), At = {
     kind: {
       type: String,
       default: "label",
-      validator: (e) => Object.keys(Dt).includes(e)
+      validator: (e) => Object.keys(Rt).includes(e)
     },
     /**
      * Color for the badge background
@@ -456,7 +456,7 @@ const Je = /* @__PURE__ */ v(Ys, [["render", ei]]), At = {
     type: {
       type: String,
       default: "default",
-      validator: (e) => Object.keys(At).includes(e)
+      validator: (e) => Object.keys(xt).includes(e)
     },
     /**
      * Decoration for the badge. This can be only used with kind: label and type: default
@@ -468,14 +468,14 @@ const Je = /* @__PURE__ */ v(Ys, [["render", ei]]), At = {
     decoration: {
       type: String,
       default: void 0,
-      validator: (e) => Object.keys(Pt).includes(e)
+      validator: (e) => Object.keys(Bt).includes(e)
     }
   },
   data() {
     return {
-      BADGE_TYPE_MODIFIERS: At,
-      BADGE_KIND_MODIFIERS: Dt,
-      BADGE_DECORATION_MODIFIERS: Pt
+      BADGE_TYPE_MODIFIERS: xt,
+      BADGE_KIND_MODIFIERS: Rt,
+      BADGE_DECORATION_MODIFIERS: Bt
     };
   },
   computed: {
@@ -503,17 +503,17 @@ const Je = /* @__PURE__ */ v(Ys, [["render", ei]]), At = {
       this.decoration && ((this.kind !== "label" || this.type !== "default") && console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."), this.hasIcons && console.error("DtBadge error: decoration prop cannot be used with iconLeft or iconRight."));
     }
   }
-}, si = {
+}, ai = {
   key: 0,
   class: "d-badge__decorative"
-}, ii = {
+}, oi = {
   key: 1,
   class: "d-badge__icon-left"
-}, ni = { class: "d-badge__label" }, ai = {
+}, li = { class: "d-badge__label" }, ri = {
   key: 2,
   class: "d-badge__icon-right"
 };
-function oi(e, s, t, o, n, i) {
+function di(e, s, t, o, n, i) {
   const r = f("dt-icon");
   return a(), l("span", {
     class: y([
@@ -524,19 +524,19 @@ function oi(e, s, t, o, n, i) {
     ]),
     "data-qa": "dt-badge"
   }, [
-    t.decoration ? (a(), l("span", si)) : p("", !0),
-    t.iconLeft || t.type === "ai" ? (a(), l("span", ii, [
+    t.decoration ? (a(), l("span", ai)) : p("", !0),
+    t.iconLeft || t.type === "ai" ? (a(), l("span", oi, [
       m(r, {
         name: t.iconLeft || "dialpad-ai",
         size: "200"
       }, null, 8, ["name"])
     ])) : p("", !0),
-    _("span", ni, [
+    _("span", li, [
       d(e.$slots, "default", {}, () => [
         P(I(t.text), 1)
       ])
     ]),
-    t.iconRight ? (a(), l("span", ai, [
+    t.iconRight ? (a(), l("span", ri, [
       m(r, {
         name: t.iconRight,
         size: "200"
@@ -544,13 +544,13 @@ function oi(e, s, t, o, n, i) {
     ])) : p("", !0)
   ], 2);
 }
-const li = /* @__PURE__ */ v(ti, [["render", oi]]), Oe = ["base", "error", "info", "success", "warning"], ri = ["alert", "alertdialog", "status"], di = /* @__PURE__ */ new Map([
+const ci = /* @__PURE__ */ v(ni, [["render", di]]), Oe = ["base", "error", "info", "success", "warning"], ui = ["alert", "alertdialog", "status"], hi = /* @__PURE__ */ new Map([
   ["info", "info"],
   ["success", "check-circle"],
   ["warning", "alert-triangle"],
   ["error", "alert-circle"],
   ["base", "bell"]
-]), ci = {
+]), fi = {
   name: "DtNoticeIcon",
   components: {
     DtIcon: x
@@ -575,17 +575,17 @@ const li = /* @__PURE__ */ v(ti, [["render", oi]]), Oe = ["base", "error", "info
   },
   computed: {
     defaultIcon() {
-      return di.get(this.kind);
+      return hi.get(this.kind);
     }
   }
-}, ui = {
+}, pi = {
   key: 0,
   "aria-hidden": "true",
   class: "d-notice__icon"
 };
-function hi(e, s, t, o, n, i) {
+function mi(e, s, t, o, n, i) {
   const r = f("dt-icon");
-  return i.defaultIcon || n.hasSlotContent(e.$slots.default) ? (a(), l("div", ui, [
+  return i.defaultIcon || n.hasSlotContent(e.$slots.default) ? (a(), l("div", pi, [
     d(e.$slots, "default", {}, () => [
       m(r, {
         name: i.defaultIcon,
@@ -594,7 +594,7 @@ function hi(e, s, t, o, n, i) {
     ])
   ])) : p("", !0);
 }
-const et = /* @__PURE__ */ v(ci, [["render", hi]]), fi = {
+const it = /* @__PURE__ */ v(fi, [["render", mi]]), gi = {
   name: "DtNoticeContent",
   props: {
     /**
@@ -626,12 +626,12 @@ const et = /* @__PURE__ */ v(ci, [["render", hi]]), fi = {
       hasSlotContent: $
     };
   }
-}, pi = {
+}, _i = {
   class: "d-notice__content",
   "data-qa": "notice-content"
-}, mi = ["id"], gi = ["id"];
-function _i(e, s, t, o, n, i) {
-  return a(), l("div", pi, [
+}, bi = ["id"], yi = ["id"];
+function vi(e, s, t, o, n, i) {
+  return a(), l("div", _i, [
     t.title || n.hasSlotContent(e.$slots.titleOverride) ? (a(), l("p", {
       key: 0,
       id: t.titleId,
@@ -641,17 +641,17 @@ function _i(e, s, t, o, n, i) {
       d(e.$slots, "titleOverride", {}, () => [
         P(I(t.title), 1)
       ])
-    ], 8, mi)) : p("", !0),
+    ], 8, bi)) : p("", !0),
     _("p", {
       id: t.contentId,
       class: "d-notice__message",
       "data-qa": "notice-content-message"
     }, [
       d(e.$slots, "default")
-    ], 8, gi)
+    ], 8, yi)
   ]);
 }
-const tt = /* @__PURE__ */ v(fi, [["render", _i]]), ie = {
+const nt = /* @__PURE__ */ v(gi, [["render", vi]]), ie = {
   props: {
     /**
      * If true, a hidden close button is included for screen readers
@@ -690,7 +690,7 @@ const tt = /* @__PURE__ */ v(fi, [["render", _i]]), ie = {
            a visually hidden close button and you must set the visuallyHiddenCloseLabel prop.`);
     }
   }
-}, bi = {
+}, Si = {
   name: "SrOnlyCloseButton",
   components: {
     DtIcon: x,
@@ -713,7 +713,7 @@ const tt = /* @__PURE__ */ v(fi, [["render", _i]]), ie = {
     }
   }
 };
-function yi(e, s, t, o, n, i) {
+function Ci(e, s, t, o, n, i) {
   const r = f("dt-icon"), h = f("dt-button");
   return a(), S(h, {
     id: "sr-only-close-button",
@@ -721,7 +721,7 @@ function yi(e, s, t, o, n, i) {
     class: "d-vi-visible-sr",
     "aria-label": t.visuallyHiddenCloseLabel,
     onClick: i.close,
-    onKeydown: V(U(i.close, ["prevent", "stop"]), ["space"])
+    onKeydown: F(U(i.close, ["prevent", "stop"]), ["space"])
   }, {
     default: c(() => [
       m(r, { name: "close" })
@@ -729,7 +729,7 @@ function yi(e, s, t, o, n, i) {
     _: 1
   }, 8, ["aria-label", "onClick", "onKeydown"]);
 }
-const Ne = /* @__PURE__ */ v(bi, [["render", yi]]), vi = {
+const Ne = /* @__PURE__ */ v(Si, [["render", Ci]]), Ii = {
   name: "DtNoticeAction",
   components: {
     DtIcon: x,
@@ -777,13 +777,13 @@ const Ne = /* @__PURE__ */ v(bi, [["render", yi]]), vi = {
       this.$emit("close");
     }
   }
-}, Si = {
+}, wi = {
   class: "d-notice__actions",
   "data-qa": "notice-content-actions"
 };
-function Ci(e, s, t, o, n, i) {
+function Ei(e, s, t, o, n, i) {
   const r = f("dt-icon"), h = f("dt-button"), u = f("sr-only-close-button");
-  return a(), l("div", Si, [
+  return a(), l("div", wi, [
     d(e.$slots, "default"),
     t.hideClose ? p("", !0) : (a(), S(h, C({
       key: 0,
@@ -809,7 +809,7 @@ function Ci(e, s, t, o, n, i) {
     }, null, 8, ["visually-hidden-close-label", "onClose"])) : p("", !0)
   ]);
 }
-const st = /* @__PURE__ */ v(vi, [["render", Ci]]), Xt = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', Ii = `${Xt}:not([tabindex="-1"])`, wi = "button,[href],input,select,textarea,details,[tabindex]", Le = {
+const at = /* @__PURE__ */ v(Ii, [["render", Ei]]), ts = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', ki = `${ts}:not([tabindex="-1"])`, Oi = "button,[href],input,select,textarea,details,[tabindex]", Le = {
   methods: {
     /**
      * get the first focusable element in your component, includes tabindex="-1".
@@ -826,10 +826,20 @@ const st = /* @__PURE__ */ v(vi, [["render", Ci]]), Xt = ':not(:disabled):not([a
      * @param {object} el - optional - ref of dom element to trap focus on.
      *  will default to the root node of the vue component
      */
-    async focusFirstElement(e) {
+    async focusFirstElement(e = this.$el) {
       const s = await this.getFirstFocusableElement(e);
       s == null || s.focus({ preventScroll: !0 });
     },
+    async focusElementById(e) {
+      var t;
+      await this.$nextTick();
+      const s = (t = this.$el) == null ? void 0 : t.querySelector(e);
+      if (s) {
+        s.focus();
+        return;
+      }
+      console.warn('Could not find the element specified in dt-modal prop "initialFocusElement". Defaulting to focusing the first element.'), await this.focusFirstElement();
+    },
     /**
      * internal use only.
      *
@@ -853,9 +863,9 @@ const st = /* @__PURE__ */ v(vi, [["render", Ci]]), Xt = ':not(:disabled):not([a
      * @param {bool} includeNegativeTabIndex - will include tabindex="-1" in the list of focusable elements.
      */
     _getFocusableElements(e = this.$el, s = !1) {
-      return e ? [...e.querySelectorAll(wi)].filter((o) => {
+      return e ? [...e.querySelectorAll(Oi)].filter((o) => {
         const n = window.getComputedStyle(o);
-        return n.getPropertyValue("display") !== "none" && n.getPropertyValue("visibility") !== "hidden" && o.matches(s ? Xt : Ii);
+        return n.getPropertyValue("display") !== "none" && n.getPropertyValue("visibility") !== "hidden" && o.matches(s ? ts : ki);
       }) : [];
     },
     /**
@@ -876,12 +886,12 @@ const st = /* @__PURE__ */ v(vi, [["render", Ci]]), Xt = ':not(:disabled):not([a
       e.shiftKey ? document.activeElement === n && (i.focus(), e.preventDefault()) : document.activeElement === i && (n.focus(), e.preventDefault());
     }
   }
-}, ki = {
+}, Li = {
   name: "DtBanner",
   components: {
-    DtNoticeIcon: et,
-    DtNoticeContent: tt,
-    DtNoticeAction: st
+    DtNoticeIcon: it,
+    DtNoticeContent: nt,
+    DtNoticeAction: at
   },
   mixins: [Le, ie],
   props: {
@@ -1029,13 +1039,13 @@ const st = /* @__PURE__ */ v(vi, [["render", Ci]]), Xt = ':not(:disabled):not([a
       this.important && this.focusTrappedTabPress(e);
     }
   }
-}, Ei = ["role", "aria-labelledby", "aria-describedby"];
-function Oi(e, s, t, o, n, i) {
+}, Ti = ["role", "aria-labelledby", "aria-describedby"];
+function Ai(e, s, t, o, n, i) {
   const r = f("dt-notice-icon"), h = f("dt-notice-content"), u = f("dt-notice-action");
   return a(), l("aside", {
     class: y(i.bannerClass),
     style: re(i.bannerBackgroundImage),
-    onKeydown: s[1] || (s[1] = V((...g) => i.trapFocus && i.trapFocus(...g), ["tab"]))
+    onKeydown: s[1] || (s[1] = F((...g) => i.trapFocus && i.trapFocus(...g), ["tab"]))
   }, [
     _("div", {
       class: y(["d-banner__dialog", t.dialogClass]),
@@ -1077,10 +1087,10 @@ function Oi(e, s, t, o, n, i) {
         ]),
         _: 3
       }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
-    ], 10, Ei)
+    ], 10, Ti)
   ], 38);
 }
-const jr = /* @__PURE__ */ v(ki, [["render", Oi]]), Li = "d-breadcrumbs__item--selected", Ti = "d-breadcrumbs--inverted", Ai = {
+const Wr = /* @__PURE__ */ v(Li, [["render", Ai]]), Di = "d-breadcrumbs__item--selected", Pi = "d-breadcrumbs--inverted", xi = {
   name: "DtLink",
   props: {
     /**
@@ -1091,17 +1101,17 @@ const jr = /* @__PURE__ */ v(ki, [["render", Oi]]), Li = "d-breadcrumbs__item--s
       type: String,
       default: "",
       validator(e) {
-        return Ts.includes(e);
+        return Ps.includes(e);
       }
     }
   },
   data() {
     return {
-      LINK_KIND_MODIFIERS: As
+      LINK_KIND_MODIFIERS: xs
     };
   }
 };
-function Di(e, s, t, o, n, i) {
+function Ri(e, s, t, o, n, i) {
   return a(), l("a", {
     class: y([
       "d-link",
@@ -1112,10 +1122,10 @@ function Di(e, s, t, o, n, i) {
     d(e.$slots, "default")
   ], 2);
 }
-const Pi = /* @__PURE__ */ v(Ai, [["render", Di]]), xi = {
+const Bi = /* @__PURE__ */ v(xi, [["render", Ri]]), $i = {
   name: "DtBreadcrumbItem",
   components: {
-    DtLink: Pi
+    DtLink: Bi
   },
   inheritAttrs: !1,
   props: {
@@ -1143,19 +1153,19 @@ const Pi = /* @__PURE__ */ v(Ai, [["render", Di]]), xi = {
   },
   data() {
     return {
-      BREADCRUMB_ITEM_SELECTED_MODIFIER: Li
+      BREADCRUMB_ITEM_SELECTED_MODIFIER: Di
     };
   },
   computed: {
     linkKind() {
-      return this.inverted ? Ds : Ps;
+      return this.inverted ? Rs : Bs;
     },
     ariaCurrent() {
       return this.selected ? "location" : void 0;
     }
   }
 };
-function Ri(e, s, t, o, n, i) {
+function Ni(e, s, t, o, n, i) {
   const r = f("dt-link");
   return a(), l("li", {
     "data-qa": "dt-breadcrumb-item",
@@ -1178,10 +1188,10 @@ function Ri(e, s, t, o, n, i) {
     }, 16, ["kind", "aria-current"])
   ], 2);
 }
-const Bi = /* @__PURE__ */ v(xi, [["render", Ri]]), $i = {
+const zi = /* @__PURE__ */ v($i, [["render", Ni]]), Mi = {
   name: "DtBreadcrumbs",
   components: {
-    DtBreadcrumbItem: Bi
+    DtBreadcrumbItem: zi
   },
   props: {
     /**
@@ -1212,7 +1222,7 @@ const Bi = /* @__PURE__ */ v(xi, [["render", Ri]]), $i = {
   },
   data() {
     return {
-      BREADCRUMBS_INVERTED_MODIFIER: Ti
+      BREADCRUMBS_INVERTED_MODIFIER: Pi
     };
   },
   methods: {
@@ -1220,8 +1230,8 @@ const Bi = /* @__PURE__ */ v(xi, [["render", Ri]]), $i = {
       return `breadcrumbs-item-${e}-${J.getUniqueString()}`;
     }
   }
-}, Ni = ["aria-label"];
-function zi(e, s, t, o, n, i) {
+}, Hi = ["aria-label"];
+function Fi(e, s, t, o, n, i) {
   const r = f("dt-breadcrumb-item");
   return a(), l("nav", {
     "aria-label": t.ariaLabel,
@@ -1239,13 +1249,13 @@ function zi(e, s, t, o, n, i) {
         }, h), null, 16, ["inverted"]))), 128))
       ])
     ])
-  ], 10, Ni);
+  ], 10, Hi);
 }
-const Gr = /* @__PURE__ */ v($i, [["render", zi]]), xt = {
+const Zr = /* @__PURE__ */ v(Mi, [["render", Fi]]), $t = {
   start: "d-btn-group--start",
   end: "d-btn-group--end",
   "space-between": "d-btn-group--space-between"
-}, Mi = {
+}, Vi = {
   name: "DtButtonGroup",
   props: {
     /**
@@ -1254,16 +1264,16 @@ const Gr = /* @__PURE__ */ v($i, [["render", zi]]), xt = {
     alignment: {
       type: String,
       default: "start",
-      validator: (e) => Object.keys(xt).includes(e)
+      validator: (e) => Object.keys($t).includes(e)
     }
   },
   data() {
     return {
-      BUTTON_GROUP_ALIGNMENT: xt
+      BUTTON_GROUP_ALIGNMENT: $t
     };
   }
 };
-function Hi(e, s, t, o, n, i) {
+function qi(e, s, t, o, n, i) {
   return a(), l("div", {
     class: y([
       "d-btn-group",
@@ -1274,7 +1284,7 @@ function Hi(e, s, t, o, n, i) {
     d(e.$slots, "default")
   ], 2);
 }
-const Ur = /* @__PURE__ */ v(Mi, [["render", Hi]]), Vi = {
+const Yr = /* @__PURE__ */ v(Vi, [["render", qi]]), Ki = {
   name: "DtCard",
   props: {
     /**
@@ -1320,7 +1330,7 @@ const Ur = /* @__PURE__ */ v(Mi, [["render", Hi]]), Vi = {
     };
   }
 };
-function Fi(e, s, t, o, n, i) {
+function ji(e, s, t, o, n, i) {
   return a(), l("div", {
     class: y([
       "d-card",
@@ -1357,7 +1367,7 @@ function Fi(e, s, t, o, n, i) {
     ], 2)) : p("", !0)
   ], 2);
 }
-const qi = /* @__PURE__ */ v(Vi, [["render", Fi]]), Ki = {
+const Gi = /* @__PURE__ */ v(Ki, [["render", ji]]), Ui = {
   name: "DtCodeblock",
   props: {
     text: {
@@ -1365,16 +1375,16 @@ const qi = /* @__PURE__ */ v(Vi, [["render", Fi]]), Ki = {
       required: !0
     }
   }
-}, ji = { class: "d-d-block d-bgc-secondary d-ws-pre-wrap d-p8 d-ba d-bc-subtle d-bar8 d-fs-200 d-ff-mono d-lh-400 d-fc-secondary" };
-function Gi(e, s, t, o, n, i) {
+}, Wi = { class: "d-d-block d-bgc-secondary d-ws-pre-wrap d-p8 d-ba d-bc-subtle d-bar8 d-fs-200 d-ff-mono d-lh-400 d-fc-secondary" };
+function Zi(e, s, t, o, n, i) {
   return a(), l("pre", null, [
     P("    "),
-    _("code", ji, I(t.text), 1),
+    _("code", Wi, I(t.text), 1),
     P(`
   `)
   ]);
 }
-const Wr = /* @__PURE__ */ v(Ki, [["render", Gi]]), Ui = {
+const Qr = /* @__PURE__ */ v(Ui, [["render", Zi]]), Yi = {
   methods: {
     /**
      * Scroll an element into view if it is not fully visible in its nearest scrollable ancestor.
@@ -1446,7 +1456,7 @@ const Wr = /* @__PURE__ */ v(Ki, [["render", Gi]]), Ui = {
       return s <= t.bottom + 3 * o / 4 && e >= t.top - o / 4;
     }
   }
-}, Wi = "listElementKey is required or the referenced element doesn't exist. Received listElement: ", Jt = ({
+}, Qi = "listElementKey is required or the referenced element doesn't exist. Received listElement: ", ss = ({
   // 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",
@@ -1471,7 +1481,7 @@ const Wr = /* @__PURE__ */ v(Ki, [["render", Gi]]), Ui = {
   // Focus the active element on keyboard navigation.
   focusOnKeyboardNavigation: w = !1
 } = {}) => ({
-  mixins: [Ui],
+  mixins: [Yi],
   data() {
     return {
       [s]: -1,
@@ -1502,7 +1512,7 @@ const Wr = /* @__PURE__ */ v(Ki, [["render", Gi]]), Ui = {
     // Gets all the list item nodes within the list element
     _getListItemNodes() {
       const b = this._getListElement();
-      return b ? Array.from(b.querySelectorAll(`[role="${e}"], #sr-only-close-button`)) : (console.error(Wi, b), null);
+      return b ? Array.from(b.querySelectorAll(`[role="${e}"], #sr-only-close-button`)) : (console.error(Qi, b), null);
     },
     onUpKey() {
       i && this[i](!0), this[s] > 0 ? this.setHighlightIndex(this[s] - 1) : h && this[h](), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
@@ -1574,57 +1584,64 @@ const Wr = /* @__PURE__ */ v(Ki, [["render", Gi]]), Ui = {
   TAB: "tab",
   NONE: "none"
 };
-const Zi = {
+const Xi = {
   name: "DtDefaultListItem",
   data() {
     return {
       hasSlotContent: $
     };
   }
-}, Yi = { class: "dt-default-list-item d-fs-200 d-lh-300 d-py4 d-px8 d-d-flex d-ai-center" }, Qi = {
+}, Ji = { class: "dt-default-list-item" }, en = {
   key: 0,
-  class: "dt-default-list-item--left d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pr8 d-jc-flex-end",
-  "data-qa": "dt-default-list-item-left-wrapper"
-}, Xi = { class: "d-fl-grow1" }, Ji = { key: 0 }, en = {
+  "data-qa": "dt-default-list-item-left-wrapper",
+  class: "dt-default-list-item--left"
+}, tn = {
+  "data-qa": "dt-default-list-item-content-wrapper",
+  class: "dt-default-list-item--content"
+}, sn = {
+  key: 0,
+  "data-qa": "dt-default-list-item-title-wrapper",
+  class: "dt-default-list-item--title"
+}, nn = {
   key: 2,
   "data-qa": "dt-default-list-item-bottom-wrapper",
-  class: "d-mt2"
-}, tn = {
+  class: "dt-default-list-item--bottom"
+}, an = {
   key: 1,
-  class: "dt-default-list-item--right d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pl8",
-  "data-qa": "dt-default-list-item-right-wrapper"
+  "data-qa": "dt-default-list-item-right-wrapper",
+  class: "dt-default-list-item--right"
 };
-function sn(e, s, t, o, n, i) {
-  return a(), l("div", Yi, [
-    n.hasSlotContent(e.$slots.left) ? (a(), l("section", Qi, [
+function on(e, s, t, o, n, i) {
+  return a(), l("div", Ji, [
+    n.hasSlotContent(e.$slots.left) ? (a(), l("section", en, [
       d(e.$slots, "left")
     ])) : p("", !0),
-    _("section", Xi, [
-      n.hasSlotContent(e.$slots.default) ? (a(), l("div", Ji, [
+    _("section", tn, [
+      n.hasSlotContent(e.$slots.default) ? (a(), l("div", sn, [
         d(e.$slots, "default")
       ])) : p("", !0),
       n.hasSlotContent(e.$slots.subtitle) ? (a(), l("div", {
         key: 1,
         "data-qa": "dt-default-list-item-subtitle-wrapper",
-        class: y(["d-fs-100 d-fc-tertiary", { "d-mtn2": e.$slots.default }])
+        class: y(["dt-default-list-item--subtitle", { "d-mtn2": e.$slots.default }])
       }, [
         d(e.$slots, "subtitle")
       ], 2)) : p("", !0),
-      n.hasSlotContent(e.$slots.bottom) ? (a(), l("div", en, [
+      n.hasSlotContent(e.$slots.bottom) ? (a(), l("div", nn, [
         d(e.$slots, "bottom")
       ])) : p("", !0)
     ]),
-    n.hasSlotContent(e.$slots.right) ? (a(), l("section", tn, [
+    n.hasSlotContent(e.$slots.right) ? (a(), l("section", an, [
       d(e.$slots, "right")
     ])) : p("", !0),
     d(e.$slots, "selected")
   ]);
 }
-const Rt = /* @__PURE__ */ v(Zi, [["render", sn]]);
-const nn = {
+const Nt = /* @__PURE__ */ v(Xi, [["render", on]]);
+const ln = {
   name: "DtListItem",
   components: {
-    DtDefaultListItem: Rt,
+    DtDefaultListItem: Nt,
     DtIcon: x
   },
   /**
@@ -1725,7 +1742,7 @@ const nn = {
     listItemType() {
       switch (this.type) {
         case je.DEFAULT:
-          return Rt;
+          return Nt;
         default:
           return null;
       }
@@ -1772,11 +1789,11 @@ const nn = {
     }
   }
 };
-function an(e, s, t, o, n, i) {
+function rn(e, s, t, o, n, i) {
   const r = f("dt-icon");
   return a(), S(X(t.elementType), C({
     id: t.id,
-    class: ["dt-list-item d-ls-none", {
+    class: ["dt-list-item", {
       "dt-list-item--focusable": i.isFocusable,
       "dt-list-item--highlighted": i.isHighlighted,
       "dt-list-item--static": !i.isHoverable
@@ -1786,7 +1803,7 @@ function an(e, s, t, o, n, i) {
     "aria-selected": i.isHighlighted
   }, M(i.listItemListeners)), {
     default: c(() => [
-      i.listItemType ? (a(), S(X(i.listItemType), { key: 0 }, ke({ _: 2 }, [
+      i.listItemType ? (a(), S(X(i.listItemType), { key: 0 }, Ee({ _: 2 }, [
         ee(e.$slots, (h, u) => ({
           name: u,
           fn: c(() => [
@@ -1799,7 +1816,7 @@ function an(e, s, t, o, n, i) {
             m(r, {
               name: "check",
               size: "400",
-              class: "d-ml8"
+              class: "dt-list-item--selected-icon"
             })
           ]),
           key: "0"
@@ -1809,16 +1826,16 @@ function an(e, s, t, o, n, i) {
     _: 3
   }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-const ze = /* @__PURE__ */ v(nn, [["render", an]]), on = {
+const ze = /* @__PURE__ */ v(ln, [["render", rn]]), dn = {
   name: "ComboboxLoadingList",
-  components: { DtListItem: ze, DtSkeleton: xs }
-}, ln = {
+  components: { DtListItem: ze, DtSkeleton: $s }
+}, cn = {
   class: "d-p0 d-mt8 d-hmx332 d-of-y-auto",
   "aria-busy": "true"
 };
-function rn(e, s, t, o, n, i) {
+function un(e, s, t, o, n, i) {
   const r = f("dt-skeleton"), h = f("dt-list-item");
-  return a(), l("ol", ln, [
+  return a(), l("ol", cn, [
     (a(), l(Y, null, ee(7, (u) => m(h, {
       key: u,
       role: "option",
@@ -1834,8 +1851,8 @@ function rn(e, s, t, o, n, i) {
     }, 1024)), 64))
   ]);
 }
-const es = /* @__PURE__ */ v(on, [["render", rn]]);
-const dn = {
+const is = /* @__PURE__ */ v(dn, [["render", un]]);
+const hn = {
   name: "ComboboxEmptyList",
   components: { DtListItem: ze },
   props: {
@@ -1856,13 +1873,13 @@ const dn = {
       default: ""
     }
   }
-}, cn = {
+}, fn = {
   class: "d-p0",
   "data-qa": "dt-combobox-empty-list"
 };
-function un(e, s, t, o, n, i) {
+function pn(e, s, t, o, n, i) {
   const r = f("dt-list-item");
-  return a(), l("ol", cn, [
+  return a(), l("ol", fn, [
     d(e.$slots, "default", {}, () => [
       m(r, {
         role: "option",
@@ -1878,20 +1895,20 @@ function un(e, s, t, o, n, i) {
     ])
   ]);
 }
-const ts = /* @__PURE__ */ v(dn, [["render", un]]), ss = {
+const ns = /* @__PURE__ */ v(hn, [["render", pn]]), as = {
   EXTRA_SMALL: "xs",
   SMALL: "sm",
   DEFAULT: "md",
   LARGE: "lg",
   EXTRA_LARGE: "xl"
-}, hn = {
+}, mn = {
   name: "DtCombobox",
   components: {
-    ComboboxLoadingList: es,
-    ComboboxEmptyList: ts
+    ComboboxLoadingList: is,
+    ComboboxEmptyList: ns
   },
   mixins: [
-    Jt({
+    ss({
       indexKey: "highlightIndex",
       idKey: "highlightId",
       listElementKey: "getListElement",
@@ -1924,7 +1941,7 @@ const ts = /* @__PURE__ */ v(dn, [["render", un]]), ss = {
     size: {
       type: String,
       default: null,
-      validator: (e) => Object.values(ss).includes(e)
+      validator: (e) => Object.values(as).includes(e)
     },
     /**
      * Description for the input
@@ -2154,20 +2171,20 @@ const ts = /* @__PURE__ */ v(dn, [["render", un]]), ss = {
       empty message.`);
     }
   }
-}, fn = { "data-qa": "dt-combobox-input-wrapper" };
-function pn(e, s, t, o, n, i) {
+}, gn = { "data-qa": "dt-combobox-input-wrapper" };
+function _n(e, s, t, o, n, i) {
   const r = f("combobox-loading-list"), h = f("combobox-empty-list");
   return a(), l("div", {
     onKeydown: [
-      s[3] || (s[3] = V(U((u) => i.onKeyValidation(u, "onEscapeKey"), ["stop"]), ["esc"])),
-      s[4] || (s[4] = V(U((u) => i.onKeyValidation(u, "onEnterKey"), ["exact"]), ["enter"])),
-      s[5] || (s[5] = V(U((u) => i.onKeyValidation(u, "onUpKey"), ["stop", "prevent"]), ["up"])),
-      s[6] || (s[6] = V(U((u) => i.onKeyValidation(u, "onDownKey"), ["stop", "prevent"]), ["down"])),
-      s[7] || (s[7] = V(U((u) => i.onKeyValidation(u, "onHomeKey"), ["stop", "prevent"]), ["home"])),
-      s[8] || (s[8] = V(U((u) => i.onKeyValidation(u, "onEndKey"), ["stop", "prevent"]), ["end"]))
+      s[3] || (s[3] = F(U((u) => i.onKeyValidation(u, "onEscapeKey"), ["stop"]), ["esc"])),
+      s[4] || (s[4] = F(U((u) => i.onKeyValidation(u, "onEnterKey"), ["exact"]), ["enter"])),
+      s[5] || (s[5] = F(U((u) => i.onKeyValidation(u, "onUpKey"), ["stop", "prevent"]), ["up"])),
+      s[6] || (s[6] = F(U((u) => i.onKeyValidation(u, "onDownKey"), ["stop", "prevent"]), ["down"])),
+      s[7] || (s[7] = F(U((u) => i.onKeyValidation(u, "onHomeKey"), ["stop", "prevent"]), ["home"])),
+      s[8] || (s[8] = F(U((u) => i.onKeyValidation(u, "onEndKey"), ["stop", "prevent"]), ["end"]))
     ]
   }, [
-    _("div", fn, [
+    _("div", gn, [
       d(e.$slots, "input", { inputProps: i.inputProps })
     ]),
     t.showList ? (a(), l("div", {
@@ -2178,7 +2195,7 @@ function pn(e, s, t, o, n, i) {
       onFocusout: s[1] || (s[1] = (...u) => i.clearHighlightIndex && i.clearHighlightIndex(...u)),
       onMousemoveCapture: s[2] || (s[2] = (...u) => i.onMouseHighlight && i.onMouseHighlight(...u))
     }, [
-      t.loading && !t.listRenderedOutside ? (a(), S(r, Ee(C({ key: 0 }, i.listProps)), null, 16)) : t.emptyList && (t.emptyStateMessage || n.hasSlotContent(e.$slots.emptyListItem)) && !t.listRenderedOutside ? (a(), S(h, C({ key: 1 }, i.listProps, {
+      t.loading && !t.listRenderedOutside ? (a(), S(r, ke(C({ key: 0 }, i.listProps)), null, 16)) : t.emptyList && (t.emptyStateMessage || n.hasSlotContent(e.$slots.emptyListItem)) && !t.listRenderedOutside ? (a(), S(h, C({ key: 1 }, i.listProps, {
         message: t.emptyStateMessage,
         "item-class": t.emptyStateClass
       }), {
@@ -2195,8 +2212,8 @@ function pn(e, s, t, o, n, i) {
     ], 544)) : p("", !0)
   ], 32);
 }
-const mn = /* @__PURE__ */ v(hn, [["render", pn]]);
-const gn = {
+const bn = /* @__PURE__ */ v(mn, [["render", _n]]);
+const yn = {
   name: "DtCollapsibleLazyShow",
   inheritAttrs: !1,
   /******************
@@ -2306,8 +2323,8 @@ const gn = {
     }
   }
 };
-function _n(e, s, t, o, n, i) {
-  return a(), S(Ue, C({
+function vn(e, s, t, o, n, i) {
+  return a(), S(Ze, C({
     appear: t.appear,
     "enter-active-class": "enter-active",
     "leave-active-class": "leave-active"
@@ -2321,7 +2338,7 @@ function _n(e, s, t, o, n, i) {
     onAfterLeave: i.afterLeave
   }), {
     default: c(() => [
-      Se((a(), S(X(t.elementType), Ee(We(e.$attrs)), {
+      Se((a(), S(X(t.elementType), ke(Ye(e.$attrs)), {
         default: c(() => [
           n.initialized ? d(e.$slots, "default", { key: 0 }) : p("", !0)
         ]),
@@ -2333,11 +2350,11 @@ function _n(e, s, t, o, n, i) {
     _: 3
   }, 16, ["appear", "css", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
 }
-const bn = /* @__PURE__ */ v(gn, [["render", _n]]), yn = {
+const Sn = /* @__PURE__ */ v(yn, [["render", vn]]), Cn = {
   name: "DtCollapsible",
   components: {
     DtButton: K,
-    DtCollapsibleLazyShow: bn,
+    DtCollapsibleLazyShow: Sn,
     DtLazyShow: $e,
     DtIcon: x
   },
@@ -2454,7 +2471,7 @@ const bn = /* @__PURE__ */ v(gn, [["render", _n]]), yn = {
       return this.ariaLabelledBy || !this.ariaLabel && q("DtCollapsible__anchor");
     },
     collapsibleListeners() {
-      return Ze(this.$attrs);
+      return Qe(this.$attrs);
     }
   },
   watch: {
@@ -2485,8 +2502,8 @@ const bn = /* @__PURE__ */ v(gn, [["render", _n]]), yn = {
       !this.anchorText && !$(this.$slots.anchor) && console.error("anchor text and anchor slot content cannot both be falsy");
     }
   }
-}, vn = ["id"], Sn = ["title"];
-function Cn(e, s, t, o, n, i) {
+}, In = ["id"], wn = ["title"];
+function En(e, s, t, o, n, i) {
   const r = f("dt-icon"), h = f("dt-button"), u = f("dt-collapsible-lazy-show");
   return a(), S(X(t.elementType), C({ ref: "collapsible" }, M(i.collapsibleListeners)), {
     default: c(() => [
@@ -2523,12 +2540,12 @@ function Cn(e, s, t, o, n, i) {
               _("span", {
                 class: "d-mr-auto d-truncate",
                 title: t.anchorText
-              }, I(t.anchorText), 9, Sn)
+              }, I(t.anchorText), 9, wn)
             ]),
             _: 1
           }, 8, ["aria-controls", "aria-expanded", "style", "onClick"])
         ])
-      ], 10, vn),
+      ], 10, In),
       m(u, C({
         id: t.id,
         ref: "contentWrapper",
@@ -2560,19 +2577,19 @@ function Cn(e, s, t, o, n, i) {
     _: 3
   }, 16);
 }
-const Zr = /* @__PURE__ */ v(yn, [["render", Cn]]), Bt = {
+const Xr = /* @__PURE__ */ v(Cn, [["render", En]]), zt = {
   none: void 0,
   small: "d-p4",
   medium: "d-p8",
   large: "d-p16"
-}, In = {
+}, kn = {
   none: void 0,
   small: "d-pl4",
   medium: "d-pl8",
   large: "d-pl16"
-}, wn = ["dialog", "menu", "listbox", "tree", "grid"], is = ["", "anchor"], kn = ["none", "dialog", "first"], Me = ["parent", "body"], En = [
-  ...Rs
-], On = {
+}, On = ["dialog", "menu", "listbox", "tree", "grid"], os = ["", "anchor"], Ln = ["none", "dialog", "first"], Me = ["parent", "body"], Tn = [
+  ...Ns
+], An = {
   name: "PopoverHeaderFooter",
   components: {
     DtButton: K,
@@ -2633,7 +2650,7 @@ const Zr = /* @__PURE__ */ v(yn, [["render", Cn]]), Bt = {
     }
   }
 };
-function Ln(e, s, t, o, n, i) {
+function Dn(e, s, t, o, n, i) {
   const r = f("dt-icon"), h = f("dt-button");
   return a(), l("div", {
     "data-qa": "dt-popover-header-footer",
@@ -2670,8 +2687,8 @@ function Ln(e, s, t, o, n, i) {
     }, 16)) : p("", !0)
   ], 2);
 }
-const Tn = /* @__PURE__ */ v(On, [["render", Ln]]);
-const An = {
+const Pn = /* @__PURE__ */ v(An, [["render", Dn]]);
+const xn = {
   name: "DtPopover",
   /********************
    * CHILD COMPONENTS *
@@ -2679,7 +2696,7 @@ const An = {
   components: {
     SrOnlyCloseButton: Ne,
     DtLazyShow: $e,
-    PopoverHeaderFooter: Tn
+    PopoverHeaderFooter: Pn
   },
   mixins: [Le, ie],
   props: {
@@ -2724,7 +2741,7 @@ const An = {
     role: {
       type: String,
       default: "dialog",
-      validator: (e) => wn.includes(e)
+      validator: (e) => On.includes(e)
     },
     /**
      * ID of the element that serves as the label for the popover content.
@@ -2760,7 +2777,7 @@ const An = {
     padding: {
       type: String,
       default: "large",
-      validator: (e) => Object.keys(Bt).some((s) => s === e)
+      validator: (e) => Object.keys(zt).some((s) => s === e)
     },
     /**
      * Additional class name for the content wrapper element.
@@ -2777,7 +2794,7 @@ const An = {
     contentWidth: {
       type: String,
       default: "",
-      validator: (e) => is.includes(e)
+      validator: (e) => os.includes(e)
     },
     /**
      * Whether to apply transition on initial render in the content lazy show component.
@@ -2911,7 +2928,7 @@ const An = {
     sticky: {
       type: [Boolean, String],
       default: !1,
-      validator: (e) => En.includes(e)
+      validator: (e) => Tn.includes(e)
     },
     /**
      * Determines maximum height for the popover before overflow.
@@ -2969,7 +2986,7 @@ const An = {
     initialFocusElement: {
       type: [String, HTMLElement],
       default: "first",
-      validator: (e) => kn.includes(e) || e instanceof HTMLElement || e.startsWith("#")
+      validator: (e) => Ln.includes(e) || e instanceof HTMLElement || e.startsWith("#")
     },
     /**
      * If the popover should open pressing up or down arrow key on the anchor element.
@@ -3014,8 +3031,8 @@ const An = {
   ],
   data() {
     return {
-      POPOVER_PADDING_CLASSES: Bt,
-      POPOVER_HEADER_FOOTER_PADDING_CLASSES: In,
+      POPOVER_PADDING_CLASSES: zt,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES: kn,
       intersectionObserver: null,
       isOutsideViewport: !1,
       isOpen: !1,
@@ -3122,11 +3139,11 @@ const An = {
       const s = (o = e == null ? void 0 : e[0]) == null ? void 0 : o.target;
       if (!s)
         return;
-      const t = Bs(s);
+      const t = zs(s);
       this.isOutsideViewport = t.bottom || t.top;
     },
     popperOptions() {
-      return $s({
+      return Ms({
         fallbackPlacements: this.fallbackPlacements,
         tether: this.tether,
         hasHideModifierEnabled: !0
@@ -3241,7 +3258,7 @@ const An = {
     },
     initTippyInstance() {
       var e, s;
-      this.tip = Ns(this.anchorEl, {
+      this.tip = Hs(this.anchorEl, {
         popperOptions: this.popperOptions(),
         contentElement: this.popoverContentEl,
         placement: this.placement,
@@ -3259,11 +3276,11 @@ const An = {
       });
     }
   }
-}, Dn = ["aria-hidden"], Pn = ["id", "tabindex"];
-function xn(e, s, t, o, n, i) {
+}, Rn = ["aria-hidden"], Bn = ["id", "tabindex"];
+function $n(e, s, t, o, n, i) {
   const r = f("popover-header-footer"), h = f("sr-only-close-button"), u = f("dt-lazy-show");
   return a(), l("div", null, [
-    t.modal && n.isOpen ? (a(), S(jt, {
+    t.modal && n.isOpen ? (a(), S(Wt, {
       key: 0,
       to: "body"
     }, [
@@ -3272,7 +3289,7 @@ function xn(e, s, t, o, n, i) {
         "aria-hidden": t.modal && n.isOpen ? "false" : "true",
         onClick: s[0] || (s[0] = U(() => {
         }, ["prevent", "stop"]))
-      }, null, 8, Dn)
+      }, null, 8, Rn)
     ])) : p("", !0),
     (a(), S(X(t.elementType), {
       ref: "popover",
@@ -3288,12 +3305,12 @@ function xn(e, s, t, o, n, i) {
           onClickCapture: s[1] || (s[1] = (...g) => i.defaultToggleOpen && i.defaultToggleOpen(...g)),
           onContextmenu: s[2] || (s[2] = (...g) => i.onContext && i.onContext(...g)),
           onKeydown: [
-            s[3] || (s[3] = V(U((...g) => i.onArrowKeyPress && i.onArrowKeyPress(...g), ["prevent"]), ["up"])),
-            s[4] || (s[4] = V(U((...g) => i.onArrowKeyPress && i.onArrowKeyPress(...g), ["prevent"]), ["down"])),
-            s[6] || (s[6] = V((g) => e.$emit("keydown", g), ["enter"])),
-            s[7] || (s[7] = V((g) => e.$emit("keydown", g), ["space"]))
+            s[3] || (s[3] = F(U((...g) => i.onArrowKeyPress && i.onArrowKeyPress(...g), ["prevent"]), ["up"])),
+            s[4] || (s[4] = F(U((...g) => i.onArrowKeyPress && i.onArrowKeyPress(...g), ["prevent"]), ["down"])),
+            s[6] || (s[6] = F((g) => e.$emit("keydown", g), ["enter"])),
+            s[7] || (s[7] = F((g) => e.$emit("keydown", g), ["space"]))
           ],
-          onKeydownCapture: s[5] || (s[5] = V((...g) => i.closePopover && i.closePopover(...g), ["escape"]))
+          onKeydownCapture: s[5] || (s[5] = F((...g) => i.closePopover && i.closePopover(...g), ["escape"]))
         }, [
           d(e.$slots, "anchor", {
             attrs: {
@@ -3302,7 +3319,7 @@ function xn(e, s, t, o, n, i) {
               "aria-haspopup": t.role
             }
           })
-        ], 40, Pn),
+        ], 40, Bn),
         m(u, C({
           id: t.id,
           ref: "content",
@@ -3375,19 +3392,19 @@ function xn(e, s, t, o, n, i) {
     }, 8, ["class"]))
   ]);
 }
-const it = /* @__PURE__ */ v(An, [["render", xn]]), ve = {
+const ot = /* @__PURE__ */ v(xn, [["render", $n]]), ve = {
   none: void 0,
   small: "d-py0",
   large: "d-py4"
 };
-const Rn = {
+const Nn = {
   name: "DtDropdown",
   components: {
-    DtPopover: it,
+    DtPopover: ot,
     SrOnlyCloseButton: Ne
   },
   mixins: [
-    Jt({
+    ss({
       indexKey: "highlightIndex",
       idKey: "highlightId",
       listElementKey: "getListElement",
@@ -3717,8 +3734,8 @@ const Rn = {
         return e.stopPropagation(), e.preventDefault(), this.onNavigationKey(e.key);
     }
   }
-}, Bn = ["id"];
-function $n(e, s, t, o, n, i) {
+}, zn = ["id"];
+function Mn(e, s, t, o, n, i) {
   const r = f("sr-only-close-button"), h = f("dt-popover");
   return a(), S(h, C({
     ref: "popover",
@@ -3758,22 +3775,22 @@ function $n(e, s, t, o, n, i) {
           tabindex: i.isArrowKeyNav ? -1 : 0,
           onClose: u
         }, null, 8, ["visually-hidden-close-label", "tabindex", "onClose"])) : p("", !0)
-      ], 42, Bn)
+      ], 42, zn)
     ]),
     _: 3
   }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "append-to", "modal", "max-height", "max-width", "open-with-arrow-keys", "open-on-context", "tether", "transition"]);
 }
-const Nn = /* @__PURE__ */ v(Rn, [["render", $n]]);
-const zn = {
+const Hn = /* @__PURE__ */ v(Nn, [["render", Mn]]);
+const Fn = {
   name: "DtDropdownSeparator"
-}, Mn = {
+}, Vn = {
   "aria-hidden": "true",
   class: "dt-list-separator d-my4 d-mxn4"
 };
-function Hn(e, s, t, o, n, i) {
-  return a(), l("li", Mn);
+function qn(e, s, t, o, n, i) {
+  return a(), l("li", Vn);
 }
-const Yr = /* @__PURE__ */ v(zn, [["render", Hn]]), Vn = {
+const Jr = /* @__PURE__ */ v(Fn, [["render", qn]]), Kn = {
   name: "DtImageViewer",
   components: {
     DtButton: K,
@@ -3901,13 +3918,13 @@ const Yr = /* @__PURE__ */ v(zn, [["render", Hn]]), Vn = {
       this.isOpen && this.focusTrappedTabPress(e);
     }
   }
-}, Fn = ["src", "alt"], qn = ["aria-hidden"], Kn = {
+}, jn = ["src", "alt"], Gn = ["aria-hidden"], Un = {
   "data-qa": "dt-image-viewer-full",
   class: "d-p0 d-bar0 d-wmx80p d-hmx80p",
   role: "dialog",
   "aria-modal": "true"
-}, jn = ["src", "alt"];
-function Gn(e, s, t, o, n, i) {
+}, Wn = ["src", "alt"];
+function Zn(e, s, t, o, n, i) {
   const r = f("dt-button"), h = f("dt-icon");
   return a(), l("div", null, [
     m(r, {
@@ -3922,11 +3939,11 @@ function Gn(e, s, t, o, n, i) {
           class: y(t.imageButtonClass),
           src: t.imageSrc,
           alt: t.imageAlt
-        }, null, 10, Fn)
+        }, null, 10, jn)
       ]),
       _: 1
     }, 8, ["aria-label", "onClick"]),
-    n.isOpen ? (a(), S(jt, {
+    n.isOpen ? (a(), S(Wt, {
       key: 0,
       to: "body"
     }, [
@@ -3940,14 +3957,14 @@ function Gn(e, s, t, o, n, i) {
         onFocusin: s[2] || (s[2] = (u) => n.showCloseButton = !0),
         onFocusout: s[3] || (s[3] = (u) => n.showCloseButton = !1)
       }), [
-        _("div", Kn, [
+        _("div", Un, [
           _("img", {
             class: "d-wmx100p d-hmx100p",
             src: t.imageSrc,
             alt: t.imageAlt
-          }, null, 8, jn)
+          }, null, 8, Wn)
         ]),
-        m(Ue, { name: "fade" }, {
+        m(Ze, { name: "fade" }, {
           default: c(() => [
             n.showCloseButton ? (a(), S(r, {
               key: 0,
@@ -3972,11 +3989,11 @@ function Gn(e, s, t, o, n, i) {
           ]),
           _: 1
         })
-      ], 16, qn)
+      ], 16, Gn)
     ])) : p("", !0)
   ]);
 }
-const Qr = /* @__PURE__ */ v(Vn, [["render", Gn]]), Un = {
+const ed = /* @__PURE__ */ v(Kn, [["render", Zn]]), Yn = {
   components: { DtValidationMessages: me },
   // provide data to slotted components
   provide() {
@@ -4030,7 +4047,7 @@ const Qr = /* @__PURE__ */ v(Vn, [["render", Gn]]), Un = {
     messages: {
       type: Array,
       default: () => [],
-      validator: (e) => Wt(e)
+      validator: (e) => Qt(e)
     },
     /**
      * Show validation messages
@@ -4079,22 +4096,22 @@ const Qr = /* @__PURE__ */ v(Vn, [["render", Gn]]), Un = {
     "input"
   ],
   data() {
-    const e = Et(this.messages);
+    const e = Tt(this.messages);
     return {
       // wrap values in object to make reactive
       provideObj: {
         name: this.name,
         disabled: this.disabled,
-        validationState: Ge(e)
+        validationState: We(e)
       }
     };
   },
   computed: {
     formattedMessages() {
-      return Et(this.messages);
+      return Tt(this.messages);
     },
     validationState() {
-      return Ge(this.formattedMessages);
+      return We(this.formattedMessages);
     }
   },
   watch: {
@@ -4117,10 +4134,10 @@ const Qr = /* @__PURE__ */ v(Vn, [["render", Gn]]), Un = {
   mounted() {
     !this.legend && !this.$slots.legend && !this.$attrs["aria-label"] && we("It is expected that an aria-label is provided when there is no legend.", this);
   }
-}, Wn = {
+}, Qn = {
   name: "DtInputGroup",
   components: { DtValidationMessages: me },
-  mixins: [Un],
+  mixins: [Yn],
   props: {
     /**
      * A data qa tag for the input group
@@ -4171,8 +4188,8 @@ const Qr = /* @__PURE__ */ v(Vn, [["render", Gn]]), Un = {
       return `input-group-message-${e}-${s}-${this.id}`;
     }
   }
-}, Zn = ["data-qa"], Yn = ["data-qa"];
-function Qn(e, s, t, o, n, i) {
+}, Xn = ["data-qa"], Jn = ["data-qa"];
+function ea(e, s, t, o, n, i) {
   const r = f("dt-validation-messages");
   return a(), l("fieldset", { "data-qa": t.dataQaGroup }, [
     n.hasSlotContent(e.$slots.legend) || e.legend ? (a(), l("legend", C({
@@ -4182,7 +4199,7 @@ function Qn(e, s, t, o, n, i) {
       d(e.$slots, "legend", {}, () => [
         P(I(e.legend), 1)
       ])
-    ], 16, Yn)) : p("", !0),
+    ], 16, Jn)) : p("", !0),
     d(e.$slots, "default"),
     m(r, C({
       "validation-messages": e.formattedMessages,
@@ -4190,26 +4207,26 @@ function Qn(e, s, t, o, n, i) {
       class: e.messagesClass,
       "data-qa": t.dataQaGroupMessages
     }, e.messagesChildProps), null, 16, ["validation-messages", "show-messages", "class", "data-qa"])
-  ], 8, Zn);
+  ], 8, Xn);
 }
-const ns = /* @__PURE__ */ v(Wn, [["render", Qn]]), $t = {
+const ls = /* @__PURE__ */ v(Qn, [["render", ea]]), Mt = {
   default: "",
   danger: "d-modal--danger"
-}, Nt = {
+}, Ht = {
   default: "",
   full: "d-modal--full"
-}, zt = {
+}, Ft = {
   error: "d-modal__banner--critical",
   info: "d-modal__banner--info",
   success: "d-modal__banner--success",
   warning: "d-modal__banner--warning",
   base: "d-modal__banner--general"
-}, Xn = {
+}, ta = {
   name: "DtNotice",
   components: {
-    DtNoticeIcon: et,
-    DtNoticeContent: tt,
-    DtNoticeAction: st
+    DtNoticeIcon: it,
+    DtNoticeContent: nt,
+    DtNoticeAction: at
   },
   mixins: [ie],
   props: {
@@ -4246,7 +4263,7 @@ const ns = /* @__PURE__ */ v(Wn, [["render", Qn]]), $t = {
       type: String,
       default: "status",
       validate(e) {
-        return ri.includes(e);
+        return ui.includes(e);
       }
     },
     /**
@@ -4316,7 +4333,7 @@ const ns = /* @__PURE__ */ v(Wn, [["render", Qn]]), $t = {
     }
   }
 };
-function Jn(e, s, t, o, n, i) {
+function sa(e, s, t, o, n, i) {
   const r = f("dt-notice-icon"), h = f("dt-notice-content"), u = f("dt-notice-action");
   return a(), l("aside", {
     class: y(i.noticeClass),
@@ -4356,7 +4373,7 @@ function Jn(e, s, t, o, n, i) {
     }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
   ], 2);
 }
-const Xr = /* @__PURE__ */ v(Xn, [["render", Jn]]), ea = {
+const td = /* @__PURE__ */ v(ta, [["render", sa]]), ia = {
   name: "DtModal",
   components: {
     DtLazyShow: $e,
@@ -4430,7 +4447,7 @@ const Xr = /* @__PURE__ */ v(Xn, [["render", Jn]]), ea = {
     kind: {
       type: String,
       default: "default",
-      validator: (e) => Object.keys($t).includes(e)
+      validator: (e) => Object.keys(Mt).includes(e)
     },
     /**
      * The size of the modal. size - default or full,
@@ -4439,7 +4456,7 @@ const Xr = /* @__PURE__ */ v(Xn, [["render", Jn]]), ea = {
     size: {
       type: String,
       default: "default",
-      validator: (e) => Object.keys(Nt).includes(e)
+      validator: (e) => Object.keys(Ht).includes(e)
     },
     /**
      * Additional class name for the root modal element.
@@ -4511,6 +4528,18 @@ const Xr = /* @__PURE__ */ v(Xn, [["render", Jn]]), ea = {
     fixedHeaderFooter: {
       type: Boolean,
       default: !0
+    },
+    /**
+     * The element that is focused when the modal is opened. This can be an
+     * HTMLElement within the modal, a string starting with '#' which will
+     * find the element by ID. 'first' which will automatically focus
+     * the first element, or 'dialog' which will focus the dialog window itself.
+     * If the dialog is modal this prop cannot be 'none'.
+     */
+    initialFocusElement: {
+      type: [String, HTMLElement],
+      default: "first",
+      validator: (e) => e === "first" || e instanceof HTMLElement || e.startsWith("#")
     }
   },
   emits: [
@@ -4539,9 +4568,9 @@ const Xr = /* @__PURE__ */ v(Xn, [["render", Jn]]), ea = {
   ],
   data() {
     return {
-      MODAL_KIND_MODIFIERS: $t,
-      MODAL_SIZE_MODIFIERS: Nt,
-      MODAL_BANNER_KINDS: zt,
+      MODAL_KIND_MODIFIERS: Mt,
+      MODAL_SIZE_MODIFIERS: Ht,
+      MODAL_BANNER_KINDS: Ft,
       EVENT_KEYNAMES: H,
       hasSlotContent: $
     };
@@ -4565,7 +4594,7 @@ const Xr = /* @__PURE__ */ v(Xn, [["render", Jn]]), ea = {
           this.$emit("keydown", e);
         },
         "after-enter": (e) => {
-          e.target === e.currentTarget && this.setFocusAfterTransition();
+          this.$emit("update:show", !0), e.target === e.currentTarget && this.setFocusAfterTransition();
         }
       };
     },
@@ -4576,7 +4605,7 @@ const Xr = /* @__PURE__ */ v(Xn, [["render", Jn]]), ea = {
       return !!this.$slots.footer;
     },
     bannerKindClass() {
-      return zt[this.bannerKind];
+      return Ft[this.bannerKind];
     }
   },
   watch: {
@@ -4600,7 +4629,7 @@ const Xr = /* @__PURE__ */ v(Xn, [["render", Jn]]), ea = {
       this.$emit("update:show", !1);
     },
     setFocusAfterTransition() {
-      this.focusFirstElement();
+      this.initialFocusElement === "first" ? this.focusFirstElement() : this.initialFocusElement.startsWith("#") ? this.focusElementById(this.initialFocusElement) : this.initialFocusElement instanceof HTMLElement && this.initialFocusElement.focus();
     },
     trapFocus(e) {
       this.show && this.focusTrappedTabPress(e);
@@ -4610,11 +4639,11 @@ const Xr = /* @__PURE__ */ v(Xn, [["render", Jn]]), ea = {
         need to be set so the component always includes a close button`);
     }
   }
-}, ta = ["aria-describedby", "aria-labelledby"], sa = ["id"], ia = ["id"], na = {
+}, na = ["aria-describedby", "aria-labelledby"], aa = ["id"], oa = ["id"], la = {
   key: 4,
   class: "d-modal__footer"
 };
-function aa(e, s, t, o, n, i) {
+function ra(e, s, t, o, n, i) {
   const r = f("dt-icon"), h = f("dt-button"), u = f("sr-only-close-button"), g = f("dt-lazy-show");
   return a(), S(g, C({
     transition: "d-zoom",
@@ -4642,7 +4671,7 @@ function aa(e, s, t, o, n, i) {
           P(I(t.bannerTitle), 1)
         ])
       ], 2)) : p("", !0),
-      m(Ue, {
+      m(Ze, {
         appear: "",
         name: "d-modal__dialog"
       }, {
@@ -4665,12 +4694,12 @@ function aa(e, s, t, o, n, i) {
               "data-qa": "dt-modal-title"
             }, [
               d(e.$slots, "header")
-            ], 8, sa)) : (a(), l("h2", {
+            ], 8, aa)) : (a(), l("h2", {
               key: 1,
               id: t.labelledById,
               class: "d-modal__header",
               "data-qa": "dt-modal-title"
-            }, I(t.title), 9, ia)),
+            }, I(t.title), 9, oa)),
             n.hasSlotContent(e.$slots.default) ? (a(), l("div", {
               key: 2,
               class: y([
@@ -4688,7 +4717,7 @@ function aa(e, s, t, o, n, i) {
               ]),
               "data-qa": "dt-modal-copy"
             }, I(t.copy), 3)),
-            i.hasFooterSlot ? (a(), l("footer", na, [
+            i.hasFooterSlot ? (a(), l("footer", la, [
               d(e.$slots, "footer")
             ])) : p("", !0),
             t.hideClose ? p("", !0) : (a(), S(h, C({
@@ -4712,7 +4741,7 @@ function aa(e, s, t, o, n, i) {
               "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
               onClose: i.close
             }, null, 8, ["visually-hidden-close-label", "onClose"])) : p("", !0)
-          ], 10, ta), [
+          ], 10, na), [
             [Ce, t.show]
           ])
         ]),
@@ -4722,8 +4751,8 @@ function aa(e, s, t, o, n, i) {
     _: 3
   }, 16, ["show", "class", "aria-hidden"]);
 }
-const Jr = /* @__PURE__ */ v(ea, [["render", aa]]);
-const oa = {
+const sd = /* @__PURE__ */ v(ia, [["render", ra]]);
+const da = {
   name: "ListSection",
   components: {
     // little trick to render vnode objects via a render function
@@ -4798,8 +4827,8 @@ const oa = {
       this.showAll = !this.showAll;
     }
   }
-}, la = ["id", "aria-labelledby"], ra = ["id"], da = ["id"], ca = ["id"], ua = { class: "d-d-flex" };
-function ha(e, s, t, o, n, i) {
+}, ca = ["id", "aria-labelledby"], ua = ["id"], ha = ["id"], fa = ["id"], pa = { class: "d-d-flex" };
+function ma(e, s, t, o, n, i) {
   const r = f("vnodes"), h = f("dt-button");
   return a(), l("div", {
     id: t.id,
@@ -4819,19 +4848,19 @@ function ha(e, s, t, o, n, i) {
       key: 0,
       id: `${t.id}-list-section-header`,
       class: "d-pl12 d-mt6"
-    }, I(t.header), 9, ra)) : p("", !0),
+    }, I(t.header), 9, ua)) : p("", !0),
     !i.isCollapsible || n.showAll ? (a(), l("ol", {
       key: 1,
       id: `${t.id}-list-section-content`
     }, [
       d(e.$slots, "default")
-    ], 8, da)) : (a(), l("ol", {
+    ], 8, ha)) : (a(), l("ol", {
       key: 2,
       id: `${t.id}-list-section-content`
     }, [
       m(r, { vnodes: i.displayedItems }, null, 8, ["vnodes"])
-    ], 8, ca)),
-    _("div", ua, [
+    ], 8, fa)),
+    _("div", pa, [
       i.isCollapsible ? (a(), S(h, {
         key: 0,
         id: `${t.id}-list-section-show-more-less`,
@@ -4846,9 +4875,9 @@ function ha(e, s, t, o, n, i) {
       }, 8, ["id", "onClick"])) : p("", !0),
       d(e.$slots, "footer")
     ])
-  ], 10, la);
+  ], 10, ca);
 }
-const ed = /* @__PURE__ */ v(oa, [["render", ha]]), fa = {
+const id = /* @__PURE__ */ v(da, [["render", ma]]), ga = {
   name: "DtListItemGroup",
   props: {
     /**
@@ -4882,8 +4911,8 @@ const ed = /* @__PURE__ */ v(oa, [["render", ha]]), fa = {
       default: ""
     }
   }
-}, pa = ["id", "aria-labelledby"], ma = ["id"];
-function ga(e, s, t, o, n, i) {
+}, _a = ["id", "aria-labelledby"], ba = ["id"];
+function ya(e, s, t, o, n, i) {
   return a(), l("ul", {
     id: t.id,
     class: y(["d-ps-relative", "d-px0", t.listClass]),
@@ -4901,11 +4930,11 @@ function ga(e, s, t, o, n, i) {
       d(e.$slots, "headingSlot", {}, () => [
         P(I(t.heading), 1)
       ])
-    ], 10, ma)) : p("", !0),
+    ], 10, ba)) : p("", !0),
     d(e.$slots, "default")
-  ], 10, pa);
+  ], 10, _a);
 }
-const td = /* @__PURE__ */ v(fa, [["render", ga]]), _a = {
+const nd = /* @__PURE__ */ v(ga, [["render", ya]]), va = {
   name: "DtPagination",
   components: {
     DtButton: K,
@@ -5011,12 +5040,12 @@ const td = /* @__PURE__ */ v(fa, [["render", ga]]), _a = {
       this.currentPage = e, this.$emit("change", this.currentPage);
     }
   }
-}, ba = ["aria-label"], ya = {
+}, Sa = ["aria-label"], Ca = {
   key: 0,
   class: "d-fc-tertiary d-w24 d-ta-center",
   "data-qa": "dt-pagination-separator"
 };
-function va(e, s, t, o, n, i) {
+function Ia(e, s, t, o, n, i) {
   const r = f("dt-icon"), h = f("dt-button");
   return a(), l("nav", {
     "aria-label": t.ariaLabel,
@@ -5043,7 +5072,7 @@ function va(e, s, t, o, n, i) {
       key: `page-${u}-${g}`,
       class: y({ "d-as-flex-end": isNaN(Number(u)) })
     }, [
-      isNaN(Number(u)) ? (a(), l("div", ya, [
+      isNaN(Number(u)) ? (a(), l("div", Ca, [
         m(r, {
           name: "more-horizontal",
           size: "300"
@@ -5079,16 +5108,16 @@ function va(e, s, t, o, n, i) {
       ]),
       _: 1
     }, 8, ["aria-label", "disabled", "importance", "class"])
-  ], 8, ba);
+  ], 8, Sa);
 }
-const sd = /* @__PURE__ */ v(_a, [["render", va]]), Sa = {
+const ad = /* @__PURE__ */ v(va, [["render", Ia]]), wa = {
   warning: "d-radio--warning",
   error: "d-radio--error",
   success: "d-radio--success"
-}, Ca = {
+}, Ea = {
   name: "DtRadio",
   components: { DtValidationMessages: me },
-  mixins: [Zt, Yt, Qt, Ye],
+  mixins: [Xt, Jt, es, Xe],
   inheritAttrs: !1,
   props: {
     /**
@@ -5143,7 +5172,7 @@ const sd = /* @__PURE__ */ v(_a, [["render", va]]), Sa = {
   },
   computed: {
     inputValidationClass() {
-      return Sa[this.internalValidationState];
+      return wa[this.internalValidationState];
     },
     radioGroupValue() {
       var e;
@@ -5177,17 +5206,17 @@ const sd = /* @__PURE__ */ v(_a, [["render", va]]), Sa = {
       e !== this.radioGroupValue && (this.setGroupValue(e), this.$emit("input", e));
     }
   }
-}, Ia = { class: "d-radio__input" }, wa = ["checked", "name", "value", "disabled"], ka = {
+}, ka = { class: "d-radio__input" }, Oa = ["checked", "name", "value", "disabled"], La = {
   class: "d-radio__copy d-radio__label",
   "data-qa": "radio-label-description-container"
 };
-function Ea(e, s, t, o, n, i) {
+function Ta(e, s, t, o, n, i) {
   const r = f("dt-validation-messages");
   return a(), l("label", null, [
     _("div", {
       class: y(["d-radio-group", { "d-radio-group--disabled": e.internalDisabled }])
     }, [
-      _("div", Ia, [
+      _("div", ka, [
         _("input", C({
           checked: e.internalChecked,
           name: e.internalName,
@@ -5195,9 +5224,9 @@ function Ea(e, s, t, o, n, i) {
           disabled: e.internalDisabled,
           type: "radio",
           class: ["d-radio", i.inputValidationClass, e.inputClass]
-        }, e.$attrs, M(i.inputListeners, !0)), null, 16, wa)
+        }, e.$attrs, M(i.inputListeners, !0)), null, 16, Oa)
       ]),
-      _("div", ka, [
+      _("div", La, [
         _("div", C({ class: e.labelClass }, e.labelChildProps, { "data-qa": "radio-label" }), [
           d(e.$slots, "default", {}, () => [
             P(I(e.label), 1)
@@ -5220,9 +5249,9 @@ function Ea(e, s, t, o, n, i) {
     ], 2)
   ]);
 }
-const id = /* @__PURE__ */ v(Ca, [["render", Ea]]), nd = {
+const od = /* @__PURE__ */ v(Ea, [["render", Ta]]), ld = {
   name: "DtRadioGroup",
-  extends: ns,
+  extends: ls,
   props: {
     /**
      * A provided value for the radio group
@@ -5296,7 +5325,7 @@ const id = /* @__PURE__ */ v(Ca, [["render", Ea]]), nd = {
       return `radio-group-message-${e}-${s}-${this.id}`;
     }
   }
-}, Oa = {
+}, Aa = {
   name: "DtTabPanel",
   mixins: [Le],
   inject: ["groupContext"],
@@ -5358,8 +5387,8 @@ const id = /* @__PURE__ */ v(Ca, [["render", Ea]]), nd = {
       return t;
     }
   }
-}, La = ["id", "tabindex", "aria-labelledby", "aria-hidden"];
-function Ta(e, s, t, o, n, i) {
+}, Da = ["id", "tabindex", "aria-labelledby", "aria-hidden"];
+function Pa(e, s, t, o, n, i) {
   return Se((a(), l("div", {
     id: `dt-panel-${t.id}`,
     role: "tabpanel",
@@ -5375,18 +5404,18 @@ function Ta(e, s, t, o, n, i) {
     "data-qa": "dt-tab-panel"
   }, [
     d(e.$slots, "default")
-  ], 10, La)), [
+  ], 10, Da)), [
     [Ce, !t.hidden]
   ]);
 }
-const ad = /* @__PURE__ */ v(Oa, [["render", Ta]]), Aa = {
+const rd = /* @__PURE__ */ v(Aa, [["render", Pa]]), xa = {
   error: "d-checkbox--error",
   warning: "d-checkbox--warning",
   success: "d-checkbox--success"
-}, Da = {
+}, Ra = {
   name: "DtCheckbox",
   components: { DtValidationMessages: me },
-  mixins: [Zt, Yt, Qt, Ye],
+  mixins: [Xt, Jt, es, Xe],
   inheritAttrs: !1,
   emits: [
     /**
@@ -5413,7 +5442,7 @@ const ad = /* @__PURE__ */ v(Oa, [["render", Ta]]), Aa = {
   ],
   computed: {
     inputValidationClass() {
-      return Aa[this.internalValidationState];
+      return xa[this.internalValidationState];
     },
     checkboxGroupValueChecked() {
       var e, s;
@@ -5463,18 +5492,18 @@ const ad = /* @__PURE__ */ v(Oa, [["render", Ta]]), Aa = {
       this.validateInputLabels(this.hasLabel, this.$attrs["aria-label"]);
     }
   }
-}, Pa = { class: "d-checkbox__input" }, xa = ["checked", "name", "value", "disabled", ".indeterminate"], Ra = {
+}, Ba = { class: "d-checkbox__input" }, $a = ["checked", "name", "value", "disabled", ".indeterminate"], Na = {
   key: 0,
   class: "d-checkbox__copy d-checkbox__label",
   "data-qa": "checkbox-label-description-container"
 };
-function Ba(e, s, t, o, n, i) {
+function za(e, s, t, o, n, i) {
   const r = f("dt-validation-messages");
   return a(), l("label", null, [
     _("div", {
       class: y(["d-checkbox-group", { "d-checkbox-group--disabled": e.internalDisabled }])
     }, [
-      _("div", Pa, [
+      _("div", Ba, [
         _("input", C({
           type: "checkbox",
           checked: e.internalChecked,
@@ -5482,9 +5511,9 @@ function Ba(e, s, t, o, n, i) {
           value: e.value,
           disabled: e.internalDisabled,
           class: ["d-checkbox", i.inputValidationClass, e.inputClass]
-        }, e.$attrs, { ".indeterminate": e.internalIndeterminate }, M(i.inputListeners, !0)), null, 16, xa)
+        }, e.$attrs, { ".indeterminate": e.internalIndeterminate }, M(i.inputListeners, !0)), null, 16, $a)
       ]),
-      i.hasLabelOrDescription ? (a(), l("div", Ra, [
+      i.hasLabelOrDescription ? (a(), l("div", Na, [
         i.hasLabel ? (a(), l("div", C({
           key: 0,
           class: e.labelClass
@@ -5510,9 +5539,9 @@ function Ba(e, s, t, o, n, i) {
     ], 2)
   ]);
 }
-const od = /* @__PURE__ */ v(Da, [["render", Ba]]), ld = {
+const dd = /* @__PURE__ */ v(Ra, [["render", za]]), cd = {
   name: "DtCheckboxGroup",
-  extends: ns,
+  extends: ls,
   model: {
     prop: "selectedValues"
   },
@@ -5602,19 +5631,19 @@ const od = /* @__PURE__ */ v(Da, [["render", Ba]]), ld = {
       return `checkbox-group-message-${e}-${s}-${this.id}`;
     }
   }
-}, Mt = {
+}, Vt = {
   xs: "d-chip__label--xs",
   sm: "d-chip__label--sm",
   md: ""
-}, $a = {
+}, Ma = {
   xs: "d-chip__close--xs",
   sm: "d-chip__close--sm",
   md: ""
-}, Na = {
+}, Ha = {
   xs: "200",
   sm: "200",
   md: "200"
-}, za = {
+}, Fa = {
   name: "DtChip",
   components: {
     DtButton: K,
@@ -5646,7 +5675,7 @@ const od = /* @__PURE__ */ v(Da, [["render", Ba]]), ld = {
     size: {
       type: String,
       default: "md",
-      validator: (e) => Object.keys(Mt).includes(e)
+      validator: (e) => Object.keys(Vt).includes(e)
     },
     /**
      * The interactivity of the chip.
@@ -5730,38 +5759,38 @@ const od = /* @__PURE__ */ v(Da, [["render", Ba]]), ld = {
       };
     },
     closeButtonIconSize() {
-      return Na[this.size];
+      return Ha[this.size];
     }
   },
   methods: {
     chipClasses() {
       return [
         this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
-        Mt[this.size],
+        Vt[this.size],
         this.labelClass
       ];
     },
     chipCloseButtonClasses() {
       return [
         "d-chip__close",
-        $a[this.size]
+        Ma[this.size]
       ];
     },
     onClose() {
       this.hideClose || this.$emit("close");
     }
   }
-}, Ma = { class: "d-chip" }, Ha = {
+}, Va = { class: "d-chip" }, qa = {
   key: 0,
   "data-qa": "dt-chip-icon",
   class: "d-chip__icon"
-}, Va = {
+}, Ka = {
   key: 1,
   "data-qa": "dt-chip-avatar"
-}, Fa = ["id"];
-function qa(e, s, t, o, n, i) {
+}, ja = ["id"];
+function Ga(e, s, t, o, n, i) {
   const r = f("dt-icon"), h = f("dt-button");
-  return a(), l("span", Ma, [
+  return a(), l("span", Va, [
     (a(), S(X(t.interactive ? "button" : "span"), C({
       id: t.id,
       type: t.interactive && "button",
@@ -5771,9 +5800,9 @@ function qa(e, s, t, o, n, i) {
       "aria-label": t.ariaLabel
     }, M(i.chipListeners)), {
       default: c(() => [
-        n.hasSlotContent(e.$slots.icon) ? (a(), l("span", Ha, [
+        n.hasSlotContent(e.$slots.icon) ? (a(), l("span", qa, [
           d(e.$slots, "icon")
-        ])) : n.hasSlotContent(e.$slots.avatar) ? (a(), l("span", Va, [
+        ])) : n.hasSlotContent(e.$slots.avatar) ? (a(), l("span", Ka, [
           d(e.$slots, "avatar")
         ])) : p("", !0),
         n.hasSlotContent(e.$slots.default) ? (a(), l("span", {
@@ -5783,7 +5812,7 @@ function qa(e, s, t, o, n, i) {
           class: y(["d-truncate", "d-chip__text", t.contentClass])
         }, [
           d(e.$slots, "default")
-        ], 10, Fa)) : p("", !0)
+        ], 10, ja)) : p("", !0)
       ]),
       _: 3
     }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])),
@@ -5803,20 +5832,20 @@ function qa(e, s, t, o, n, i) {
     }, 16, ["class", "aria-label"]))
   ]);
 }
-const as = /* @__PURE__ */ v(za, [["render", qa]]), Ht = {
+const rs = /* @__PURE__ */ v(Fa, [["render", Ga]]), qt = {
   xs: "d-select--xs",
   sm: "d-select--sm",
   md: "",
   lg: "d-select--lg",
   xl: "d-select--xl"
-}, Ka = {
+}, Ua = {
   error: "d-select__input--error",
   warning: "d-select__input--warning",
   success: "d-select__input--success"
-}, ja = (e) => !e.index || typeof e.index == "number", Ga = (e) => e.value ? typeof e.value == "string" || typeof e.value == "number" : !1, Ua = (e) => e.label ? typeof e.label == "string" : !1, Wa = (e) => e ? e.every((s) => !(!ja(s) || !Ga(s) || !Ua(s))) : !0, Za = {
+}, Wa = (e) => !e.index || typeof e.index == "number", Za = (e) => e.value ? typeof e.value == "string" || typeof e.value == "number" : !1, Ya = (e) => e.label ? typeof e.label == "string" : !1, Qa = (e) => e ? e.every((s) => !(!Wa(s) || !Za(s) || !Ya(s))) : !0, Xa = {
   name: "DtSelectMenu",
   components: { DtValidationMessages: me },
-  mixins: [Ye],
+  mixins: [Xe],
   inheritAttrs: !1,
   props: {
     /**
@@ -5844,7 +5873,7 @@ const as = /* @__PURE__ */ v(za, [["render", qa]]), Ht = {
     options: {
       type: Array,
       default: () => [],
-      validator: (e) => Wa(e)
+      validator: (e) => Qa(e)
     },
     /**
      * Controls the size of the select
@@ -5853,7 +5882,7 @@ const as = /* @__PURE__ */ v(za, [["render", qa]]), Ht = {
     size: {
       type: String,
       default: "md",
-      validator: (e) => Object.keys(Ht).includes(e)
+      validator: (e) => Object.keys(qt).includes(e)
     },
     /**
      * Used to customize the label container
@@ -5931,10 +5960,10 @@ const as = /* @__PURE__ */ v(za, [["render", qa]]), Ht = {
   ],
   data() {
     return {
-      LABEL_SIZE_MODIFIERS: zs,
-      DESCRIPTION_SIZE_MODIFIERS: Ms,
-      SELECT_SIZE_MODIFIERS: Ht,
-      SELECT_STATE_MODIFIERS: Ka,
+      LABEL_SIZE_MODIFIERS: Fs,
+      DESCRIPTION_SIZE_MODIFIERS: Vs,
+      SELECT_SIZE_MODIFIERS: qt,
+      SELECT_STATE_MODIFIERS: Ua,
       hasSlotContent: $
     };
   },
@@ -5952,7 +5981,7 @@ const as = /* @__PURE__ */ v(za, [["render", qa]]), Ht = {
       };
     },
     state() {
-      return Ge(this.formattedMessages);
+      return We(this.formattedMessages);
     },
     selectKey() {
       return q();
@@ -5982,8 +6011,8 @@ const as = /* @__PURE__ */ v(za, [["render", qa]]), Ht = {
       ((e = this.options) == null ? void 0 : e.length) < 1 && !this.$slots.default && we("Options are expected to be provided via prop or slot", this);
     }
   }
-}, Ya = ["aria-details"], Qa = ["id"], Xa = ["disabled"], Ja = ["value"];
-function eo(e, s, t, o, n, i) {
+}, Ja = ["aria-details"], eo = ["id"], to = ["disabled"], so = ["value"];
+function io(e, s, t, o, n, i) {
   const r = f("dt-validation-messages");
   return a(), l("div", null, [
     _("label", null, [
@@ -5999,7 +6028,7 @@ function eo(e, s, t, o, n, i) {
         d(e.$slots, "label", {}, () => [
           P(I(t.label), 1)
         ])
-      ], 16, Ya)) : p("", !0),
+      ], 16, Ja)) : p("", !0),
       n.hasSlotContent(e.$slots.description) || t.description ? (a(), l("div", C({
         key: 1,
         id: i.descriptionKey,
@@ -6012,7 +6041,7 @@ function eo(e, s, t, o, n, i) {
         d(e.$slots, "description", {}, () => [
           P(I(t.description), 1)
         ])
-      ], 16, Qa)) : p("", !0),
+      ], 16, eo)) : p("", !0),
       _("div", {
         class: y([
           "d-select",
@@ -6036,9 +6065,9 @@ function eo(e, s, t, o, n, i) {
               key: i.getOptionKey(h.value),
               value: h.value,
               class: t.optionClass
-            }, t.optionChildProps), I(h.label), 17, Ja))), 128))
+            }, t.optionChildProps), I(h.label), 17, so))), 128))
           ])
-        ], 16, Xa)
+        ], 16, to)
       ], 2)
     ]),
     m(r, C({
@@ -6048,12 +6077,12 @@ function eo(e, s, t, o, n, i) {
     }, e.messagesChildProps, { "data-qa": "dt-select-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
   ]);
 }
-const rd = /* @__PURE__ */ v(Za, [["render", eo]]), to = ["status", "alert"], Vt = 6e3, so = {
+const ud = /* @__PURE__ */ v(Xa, [["render", io]]), no = ["status", "alert"], Kt = 6e3, ao = {
   name: "DtToast",
   components: {
-    DtNoticeIcon: et,
-    DtNoticeContent: tt,
-    DtNoticeAction: st
+    DtNoticeIcon: it,
+    DtNoticeContent: nt,
+    DtNoticeAction: at
   },
   mixins: [ie],
   props: {
@@ -6099,7 +6128,7 @@ const rd = /* @__PURE__ */ v(Za, [["render", eo]]), to = ["status", "alert"], Vt
     role: {
       type: String,
       default: "status",
-      validator: (e) => to.includes(e)
+      validator: (e) => no.includes(e)
     },
     /**
      * Severity level of the toast, sets the icon and background
@@ -6152,7 +6181,7 @@ const rd = /* @__PURE__ */ v(Za, [["render", eo]]), to = ["status", "alert"], Vt
     duration: {
       type: Number,
       default: null,
-      validator: (e) => e >= Vt
+      validator: (e) => e >= Kt
     }
   },
   emits: [
@@ -6179,7 +6208,7 @@ const rd = /* @__PURE__ */ v(Za, [["render", eo]]), to = ["status", "alert"], Vt
   data() {
     return {
       isShown: !1,
-      minDuration: Vt
+      minDuration: Kt
     };
   },
   computed: {
@@ -6217,8 +6246,8 @@ const rd = /* @__PURE__ */ v(Za, [["render", eo]]), to = ["status", "alert"], Vt
       }, this.duration));
     }
   }
-}, io = ["aria-hidden"], no = { class: "d-toast__dialog" };
-function ao(e, s, t, o, n, i) {
+}, oo = ["aria-hidden"], lo = { class: "d-toast__dialog" };
+function ro(e, s, t, o, n, i) {
   const r = f("dt-notice-icon"), h = f("dt-notice-content"), u = f("dt-notice-action");
   return n.isShown ? (a(), l("div", {
     key: 0,
@@ -6230,7 +6259,7 @@ function ao(e, s, t, o, n, i) {
     "data-qa": "dt-toast",
     "aria-hidden": (!n.isShown).toString()
   }, [
-    _("div", no, [
+    _("div", lo, [
       m(r, { kind: t.kind }, {
         default: c(() => [
           d(e.$slots, "icon")
@@ -6266,12 +6295,12 @@ function ao(e, s, t, o, n, i) {
         _: 3
       }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label", "onClose"])
     ])
-  ], 10, io)) : p("", !0);
+  ], 10, oo)) : p("", !0);
 }
-const dd = /* @__PURE__ */ v(so, [["render", ao]]), Ft = {
+const hd = /* @__PURE__ */ v(ao, [["render", ro]]), jt = {
   sm: "d-toggle--small",
   md: ""
-}, oo = [!1, !0, "mixed"], lo = {
+}, co = [!1, !0, "mixed"], uo = {
   name: "DtToggle",
   inheritAttrs: !1,
   model: {
@@ -6304,7 +6333,7 @@ const dd = /* @__PURE__ */ v(so, [["render", ao]]), Ft = {
     checked: {
       type: [Boolean, String],
       default: !1,
-      validator: (e) => oo.includes(e)
+      validator: (e) => co.includes(e)
     },
     /**
      * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually
@@ -6322,7 +6351,7 @@ const dd = /* @__PURE__ */ v(so, [["render", ao]]), Ft = {
     size: {
       type: String,
       default: "md",
-      validator: (e) => Object.keys(Ft).includes(e)
+      validator: (e) => Object.keys(jt).includes(e)
     },
     /**
      * Shows the icon
@@ -6379,7 +6408,7 @@ const dd = /* @__PURE__ */ v(so, [["render", ao]]), Ft = {
     toggleClasses() {
       return [
         "d-toggle",
-        Ft[this.size],
+        jt[this.size],
         {
           "d-toggle--checked": this.internalChecked === !0,
           "d-toggle--disabled": this.disabled,
@@ -6413,19 +6442,19 @@ const dd = /* @__PURE__ */ v(so, [["render", ao]]), Ft = {
       );
     }
   }
-}, ro = { class: "d-d-flex d-ai-center" }, co = ["for"], uo = ["id", "role", "aria-checked", "disabled", "aria-disabled"], ho = {
+}, ho = { class: "d-d-flex d-ai-center" }, fo = ["for"], po = ["id", "role", "aria-checked", "disabled", "aria-disabled"], mo = {
   key: 0,
   class: "d-toggle__inner"
 };
-function fo(e, s, t, o, n, i) {
-  return a(), l("div", ro, [
+function go(e, s, t, o, n, i) {
+  return a(), l("div", ho, [
     n.hasSlotContent(e.$slots.default) ? (a(), l("label", C({
       key: 0,
       class: t.labelClass,
       for: t.id
     }, t.labelChildProps, { "data-qa": "toggle-label" }), [
       d(e.$slots, "default")
-    ], 16, co)) : p("", !0),
+    ], 16, fo)) : p("", !0),
     _("button", C({
       id: t.id,
       role: i.toggleRole,
@@ -6435,20 +6464,20 @@ function fo(e, s, t, o, n, i) {
       "aria-disabled": t.disabled.toString(),
       class: i.toggleClasses
     }, i.inputListeners), [
-      t.showIcon ? (a(), l("span", ho)) : p("", !0)
-    ], 16, uo)
+      t.showIcon ? (a(), l("span", mo)) : p("", !0)
+    ], 16, po)
   ]);
 }
-const cd = /* @__PURE__ */ v(lo, [["render", fo]]), ye = {
+const fd = /* @__PURE__ */ v(uo, [["render", go]]), ye = {
   "{win}": "layout-grid",
   "{arrow-right}": "arrow-right",
   "{arrow-left}": "arrow-left",
   "{arrow-up}": "arrow-up",
   "{arrow-down}": "arrow-down",
   "{cmd}": "command"
-}, po = {
+}, _o = {
   "{plus}": "plus"
-}, ud = Object.keys(ye), mo = {
+}, pd = Object.keys(ye), bo = {
   name: "DtKeyboardShortcut",
   components: {
     DtIcon: x
@@ -6486,7 +6515,7 @@ const cd = /* @__PURE__ */ v(lo, [["render", fo]]), ye = {
   },
   computed: {
     icons() {
-      return { ...ye, ...po };
+      return { ...ye, ..._o };
     },
     shortcutWithSeparator() {
       return this.shortcut.replace(this.separator, "{plus}");
@@ -6500,11 +6529,11 @@ const cd = /* @__PURE__ */ v(lo, [["render", fo]]), ye = {
       return this.formattedShortcut.split(s).filter(Boolean);
     }
   }
-}, go = {
+}, yo = {
   key: 0,
   class: "sr-only"
-}, _o = ["innerHTML"];
-function bo(e, s, t, o, n, i) {
+}, vo = ["innerHTML"];
+function So(e, s, t, o, n, i) {
   const r = f("dt-icon");
   return a(), l("kbd", {
     class: y([
@@ -6520,7 +6549,7 @@ function bo(e, s, t, o, n, i) {
       t.inverted ? "d-bc-moderate-inverted" : "d-bc-default"
     ])
   }, [
-    t.screenReaderText ? (a(), l("span", go, I(t.screenReaderText), 1)) : p("", !0),
+    t.screenReaderText ? (a(), l("span", yo, I(t.screenReaderText), 1)) : p("", !0),
     (a(!0), l(Y, null, ee(i.formattedShortcutSplit, (h, u) => (a(), l(Y, null, [
       i.icons[h] ? (a(), S(r, {
         key: `${u}-${h}`,
@@ -6539,14 +6568,14 @@ function bo(e, s, t, o, n, i) {
           "d-mr2"
         ]),
         innerHTML: h
-      }, null, 10, _o))
+      }, null, 10, vo))
     ], 64))), 256))
   ], 2);
 }
-const hd = /* @__PURE__ */ v(mo, [["render", bo]]), os = {
+const md = /* @__PURE__ */ v(bo, [["render", So]]), ds = {
   LEFT: "left",
   RIGHT: "right"
-}, yo = ["sm", "md", "lg", null], vo = {
+}, Co = ["sm", "md", "lg", null], Io = {
   name: "DtRootLayoutBody",
   props: {
     /**
@@ -6605,12 +6634,12 @@ const hd = /* @__PURE__ */ v(mo, [["render", bo]]), os = {
     bodyClasses() {
       return [
         this.bodyClass,
-        { "d-root-layout__body--invert": this.sidebarPosition === os.RIGHT }
+        { "d-root-layout__body--invert": this.sidebarPosition === ds.RIGHT }
       ];
     }
   }
 };
-function So(e, s, t, o, n, i) {
+function wo(e, s, t, o, n, i) {
   return a(), l("div", {
     ref: "root-layout-body",
     class: y(["d-root-layout__body", i.bodyClasses]),
@@ -6636,10 +6665,10 @@ function So(e, s, t, o, n, i) {
     ], 2)) : p("", !0)
   ], 2);
 }
-const Co = /* @__PURE__ */ v(vo, [["render", So]]), Io = {
+const Eo = /* @__PURE__ */ v(Io, [["render", wo]]), ko = {
   name: "DtRootLayout",
   components: {
-    DtRootLayoutBody: Co
+    DtRootLayoutBody: Eo
   },
   props: {
     /**
@@ -6711,7 +6740,7 @@ const Co = /* @__PURE__ */ v(vo, [["render", So]]), Io = {
     sidebarPosition: {
       type: String,
       default: "left",
-      validator: (e) => Object.values(os).includes(e)
+      validator: (e) => Object.values(ds).includes(e)
     },
     /**
      * Additional class name for the footer element
@@ -6735,7 +6764,7 @@ const Co = /* @__PURE__ */ v(vo, [["render", So]]), Io = {
     responsiveBreakpoint: {
       type: String,
       default: null,
-      validator: (e) => yo.includes(e)
+      validator: (e) => Co.includes(e)
     }
   },
   data() {
@@ -6750,7 +6779,7 @@ const Co = /* @__PURE__ */ v(vo, [["render", So]]), Io = {
     }
   }
 };
-function wo(e, s, t, o, n, i) {
+function Oo(e, s, t, o, n, i) {
   const r = f("dt-root-layout-body");
   return a(), l("div", {
     class: y(["root-layout d-root-layout", { "d-root-layout--fixed": t.fixed }, i.responsiveClass]),
@@ -6773,7 +6802,7 @@ function wo(e, s, t, o, n, i) {
       "header-height": n.hasSlotContent(e.$slots.header) ? t.headerHeight : "0px",
       "footer-height": n.hasSlotContent(e.$slots.footer) ? t.footerHeight : "0px",
       fixed: t.fixed
-    }, ke({ _: 2 }, [
+    }, Ee({ _: 2 }, [
       n.hasSlotContent(e.$slots.sidebar) ? {
         name: "sidebar",
         fn: c(() => [
@@ -6799,40 +6828,40 @@ function wo(e, s, t, o, n, i) {
     ], 6)) : p("", !0)
   ], 2);
 }
-const fd = /* @__PURE__ */ v(Io, [["render", wo]]), ue = {
+const gd = /* @__PURE__ */ v(ko, [["render", Oo]]), ue = {
   default: "column",
   column: "column",
   row: "row",
   "row-reverse": "row-reverse",
   "column-reverse": "column-reverse"
-}, ls = ["sm", "md", "lg", "xl"], nt = ["0", "100", "200", "300", "400", "500", "600"];
-function qt(e) {
+}, cs = ["sm", "md", "lg", "xl"], lt = ["0", "100", "200", "300", "400", "500", "600"];
+function Gt(e) {
   return e === ue.default;
 }
-function Kt(e) {
+function Ut(e) {
   if (Ie(e) === "string")
-    return qt(e) ? null : ue[e];
+    return Gt(e) ? null : ue[e];
   if (Ie(e) === "object") {
     const { default: s } = e;
-    return qt(s) ? null : ue[s];
+    return Gt(s) ? null : ue[s];
   } else
     return null;
 }
 function Ie(e) {
   return typeof e;
 }
-function ko(e) {
-  return Kt(e) ? `d-stack--${ue[Kt(e)]}` : null;
+function Lo(e) {
+  return Ut(e) ? `d-stack--${ue[Ut(e)]}` : null;
 }
-function Eo(e) {
+function To(e) {
   return Ie(e) === "object" ? [
-    ...ls.map((s) => e[s] ? `d-stack--${s}--${e[s]}` : null)
+    ...cs.map((s) => e[s] ? `d-stack--${s}--${e[s]}` : null)
   ] : null;
 }
-function Oo(e) {
-  return nt.includes(e) ? `d-stack--gap-${e}` : null;
+function Ao(e) {
+  return lt.includes(e) ? `d-stack--gap-${e}` : null;
 }
-function Lo(e) {
+function Do(e) {
   if (Ie(e) === "string")
     return Object.keys(ue).includes(e);
   if (Ie(e) === "object") {
@@ -6841,10 +6870,10 @@ function Lo(e) {
   } else
     return null;
 }
-function To(e) {
-  return nt.includes(e);
+function Po(e) {
+  return lt.includes(e);
 }
-const Ao = {
+const xo = {
   name: "DtStack",
   props: {
     /**
@@ -6855,7 +6884,7 @@ const Ao = {
     direction: {
       type: [String, Object],
       default: "column",
-      validator: (e) => Lo(e)
+      validator: (e) => Do(e)
     },
     /**
      * Set this prop to render stack as a specific HTML element.
@@ -6871,29 +6900,29 @@ const Ao = {
     gap: {
       type: String,
       default: "0",
-      validator: (e) => To(e)
+      validator: (e) => Po(e)
     }
   },
   data() {
     return {
       DT_STACK_DIRECTION: ue,
-      DT_STACK_GAP: nt,
-      DT_STACK_RESPONSIVE_BREAKPOINTS: ls
+      DT_STACK_GAP: lt,
+      DT_STACK_RESPONSIVE_BREAKPOINTS: cs
     };
   },
   computed: {
     stackGap() {
-      return Oo(this.gap);
+      return Ao(this.gap);
     },
     defaultDirection() {
-      return ko(this.direction);
+      return Lo(this.direction);
     },
     stackResponsive() {
-      return Eo(this.direction);
+      return To(this.direction);
     }
   }
 };
-function Do(e, s, t, o, n, i) {
+function Ro(e, s, t, o, n, i) {
   return a(), S(X(t.as), {
     class: y([
       "d-stack",
@@ -6908,8 +6937,8 @@ function Do(e, s, t, o, n, i) {
     _: 3
   }, 8, ["class"]);
 }
-const pd = /* @__PURE__ */ v(Ao, [["render", Do]]);
-const rs = {
+const _d = /* @__PURE__ */ v(xo, [["render", Ro]]);
+const us = {
   __name: "core_scroller",
   props: {
     /**
@@ -7003,50 +7032,50 @@ const rs = {
   },
   emits: ["user-position"],
   setup(e, { expose: s, emit: t }) {
-    const o = e, n = kt(/* @__PURE__ */ new Map()), i = kt(/* @__PURE__ */ new Map()), r = pe([]), h = pe(null), u = pe(!1), g = pe(null), w = pe("top");
-    let b = 0, L = 0, B = !1, de = 0, he = null, fe = null, Ve = 0, us = 0;
-    const Fe = Re(() => {
+    const o = e, n = Lt(/* @__PURE__ */ new Map()), i = Lt(/* @__PURE__ */ new Map()), r = pe([]), h = pe(null), u = pe(!1), g = pe(null), w = pe("top");
+    let b = 0, L = 0, B = !1, de = 0, he = null, fe = null, Fe = 0, ps = 0;
+    const Ve = Re(() => {
       if (o.itemSize === null) {
         const O = {
           "-1": { accumulator: 0 }
-        }, A = o.items, k = o.sizeField, Q = o.minItemSize;
-        let F = 1e4, ne = 0, D;
+        }, A = o.items, E = o.sizeField, Q = o.minItemSize;
+        let V = 1e4, ne = 0, D;
         for (let j = 0, ge = A.length; j < ge; j++)
-          D = A[j][k] || Q, D < F && (F = D), ne += D, O[j] = { accumulator: ne, size: D };
-        return fe = F, O;
+          D = A[j][E] || Q, D < V && (V = D), ne += D, O[j] = { accumulator: ne, size: D };
+        return fe = V, O;
       }
       return [];
-    }), hs = Re(() => o.items.length && typeof o.items[0] != "object"), fs = Re(() => {
+    }), ms = Re(() => o.items.length && typeof o.items[0] != "object"), gs = Re(() => {
       const O = {};
-      for (let A = 0, k = o.items.length; A < k; A++)
+      for (let A = 0, E = o.items.length; A < E; A++)
         O[o.items[A][o.keyField]] = A;
       return O;
     });
-    Gt(Fe, () => {
+    Zt(Ve, () => {
       Te(!1);
-    }, { deep: !0 }), Ss(() => {
-      Cs(() => {
+    }, { deep: !0 }), ws(() => {
+      Es(() => {
         Te(!0), u.value = !0;
       });
     });
-    const ht = (O, A, k, Q, F) => {
-      const ne = Is({
-        id: us++,
+    const mt = (O, A, E, Q, V) => {
+      const ne = ks({
+        id: ps++,
         index: A,
         used: !0,
         key: Q,
-        type: F
-      }), D = ws({
-        item: k,
+        type: V
+      }), D = Os({
+        item: E,
         position: 0,
         nr: ne
       });
       return O.value.push(D), D;
     }, qe = (O, A = !1) => {
-      const k = i, Q = O.nr.type;
-      let F = k.get(Q);
-      F || (F = [], k.set(Q, F)), F.push(O), A || (O.nr.used = !1, O.position = -9999);
-    }, ps = () => {
+      const E = i, Q = O.nr.type;
+      let V = E.get(Q);
+      V || (V = [], E.set(Q, V)), V.push(O), A || (O.nr.used = !1, O.position = -9999);
+    }, _s = () => {
       const O = o.direction === "vertical";
       let A;
       return O ? A = {
@@ -7056,91 +7085,91 @@ const rs = {
         start: g.value.scrollLeft,
         end: g.value.scrollLeft + g.value.clientWidth
       }, A;
-    }, ms = () => {
+    }, bs = () => {
       throw setTimeout(() => {
         console.error("It seems the scroller element isn't scrolling, so it tries to render all the items at once.", "Scroller:", g), 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");
-    }, gs = () => {
+    }, ys = () => {
       r.value.sort((O, A) => O.nr.index - A.nr.index);
     }, Te = (O, A = !1) => {
-      var mt, gt, _t, bt, yt, vt, St, Ct;
-      const k = o.itemSize, Q = fe, F = hs.value ? null : o.keyField, ne = o.items, D = ne.length, j = Fe.value, ge = n, ft = i, Ae = r, vs = fs;
+      var bt, yt, vt, St, Ct, It, wt, Et;
+      const E = o.itemSize, Q = fe, V = ms.value ? null : o.keyField, ne = o.items, D = ne.length, j = Ve.value, ge = n, gt = i, Ae = r, Is = gs;
       let G, N, De, te, ae;
       if (!D)
         G = N = te = ae = De = 0;
       else {
-        const T = ps();
+        const T = _s();
         if (A) {
           let R = T.start - de.value;
-          if (R < 0 && (R = -R), k === null && R < Q.value || R < k)
+          if (R < 0 && (R = -R), E === null && R < Q.value || R < E)
             return {
               continuous: !0
             };
         }
         de = T.start;
         const W = o.buffer;
-        if (T.start -= W, T.end += W, k === null) {
-          let R, _e = 0, It = D - 1, Z = ~~(D / 2), wt;
+        if (T.start -= W, T.end += W, E === null) {
+          let R, _e = 0, kt = D - 1, Z = ~~(D / 2), Ot;
           do
-            wt = Z, R = (mt = j[Z]) == null ? void 0 : mt.accumulator, R < T.start ? _e = Z : Z < D - 1 && ((gt = j[Z + 1]) == null ? void 0 : gt.accumulator) > T.start && (It = Z), Z = ~~((_e + It) / 2);
-          while (Z !== wt);
-          for (Z < 0 && (Z = 0), G = Z, De = (_t = j[D - 1]) == null ? void 0 : _t.accumulator, N = Z; N < D && ((bt = j[N]) == null ? void 0 : bt.accumulator) < T.end; N++)
+            Ot = Z, R = (bt = j[Z]) == null ? void 0 : bt.accumulator, R < T.start ? _e = Z : Z < D - 1 && ((yt = j[Z + 1]) == null ? void 0 : yt.accumulator) > T.start && (kt = Z), Z = ~~((_e + kt) / 2);
+          while (Z !== Ot);
+          for (Z < 0 && (Z = 0), G = Z, De = (vt = j[D - 1]) == null ? void 0 : vt.accumulator, N = Z; N < D && ((St = j[N]) == null ? void 0 : St.accumulator) < T.end; N++)
             ;
-          for (N === -1 ? N = ne.length - 1 : (N++, N > D && (N = D)), te = b; te < D && ((yt = j[te]) == null ? void 0 : yt.accumulator) < T.start; te++)
+          for (N === -1 ? N = ne.length - 1 : (N++, N > D && (N = D)), te = b; te < D && ((Ct = j[te]) == null ? void 0 : Ct.accumulator) < T.start; te++)
             ;
-          for (ae = te; ae < D && ((vt = j[ae]) == null ? void 0 : vt.accumulator) < T.end; ae++)
+          for (ae = te; ae < D && ((It = j[ae]) == null ? void 0 : It.accumulator) < T.end; ae++)
             ;
         } else {
-          G = ~~(T.start / k);
+          G = ~~(T.start / E);
           const R = G % 1;
-          G -= R, N = Math.ceil(T.end / k), te = Math.max(0, Math.floor(T.start / k)), ae = Math.floor(T.end / k), G < 0 && (G = 0), N > D && (N = D), te < 0 && (te = 0), ae > D && (ae = D), De = Math.ceil(D / 1) * k;
+          G -= R, N = Math.ceil(T.end / E), te = Math.max(0, Math.floor(T.start / E)), ae = Math.floor(T.end / E), G < 0 && (G = 0), N > D && (N = D), te < 0 && (te = 0), ae > D && (ae = D), De = Math.ceil(D / 1) * E;
         }
       }
-      N - G > 1e3 && ms(), Ve = De;
-      let E;
+      N - G > 1e3 && bs(), Fe = De;
+      let k;
       const Pe = G <= L && N >= G;
       if (Pe)
         for (let T = 0, W = Ae.value.length; T < W; T++)
-          E = Ae.value[T], E != null && E.nr.used && (O && (E.nr.index = vs[E.item[F]]), (E.nr.index == null || E.nr.index < G || E.nr.index >= N) && qe(E));
-      const pt = Pe ? null : /* @__PURE__ */ new Map();
+          k = Ae.value[T], k != null && k.nr.used && (O && (k.nr.index = Is[k.item[V]]), (k.nr.index == null || k.nr.index < G || k.nr.index >= N) && qe(k));
+      const _t = Pe ? null : /* @__PURE__ */ new Map();
       let se, oe, xe;
       for (let T = G; T < N; T++) {
         se = ne[T];
-        const W = F ? se == null ? void 0 : se[F] : se;
+        const W = V ? se == null ? void 0 : se[V] : se;
         if (W == null)
-          throw new Error(`Key is ${W} on item (keyField is '${F}')`);
-        if (E = ge.get(W), !k && !((St = j[T]) != null && St.size)) {
-          E && qe(E);
+          throw new Error(`Key is ${W} on item (keyField is '${V}')`);
+        if (k = ge.get(W), !E && !((wt = j[T]) != null && wt.size)) {
+          k && qe(k);
           continue;
         }
         oe = se.type;
-        let R = ft.get(oe);
-        if (!E)
-          Pe ? R && R.length ? E = R.pop() : E = ht(Ae, T, se, W, oe) : (xe = pt.get(oe) || 0, (!R || xe >= R.length) && (E = ht(Ae, T, se, W, oe), qe(E, !0), R = ft.get(oe)), E = R[xe], pt.set(oe, xe + 1)), ge.delete(E.nr.key), E.nr.used = !0, E.nr.index = T, E.nr.key = W, E.nr.type = oe, ge.set(W, E);
-        else if (!E.nr.used && (E.nr.used = !0, R)) {
-          const _e = R.indexOf(E);
+        let R = gt.get(oe);
+        if (!k)
+          Pe ? R && R.length ? k = R.pop() : k = mt(Ae, T, se, W, oe) : (xe = _t.get(oe) || 0, (!R || xe >= R.length) && (k = mt(Ae, T, se, W, oe), qe(k, !0), R = gt.get(oe)), k = R[xe], _t.set(oe, xe + 1)), ge.delete(k.nr.key), k.nr.used = !0, k.nr.index = T, k.nr.key = W, k.nr.type = oe, ge.set(W, k);
+        else if (!k.nr.used && (k.nr.used = !0, R)) {
+          const _e = R.indexOf(k);
           _e !== -1 && R.splice(_e, 1);
         }
-        E.item = se, k === null ? (E.position = (Ct = j[T - 1]) == null ? void 0 : Ct.accumulator, E.offset = 0) : (E.position = Math.floor(T) * k, E.offset = T % 1 * k);
+        k.item = se, E === null ? (k.position = (Et = j[T - 1]) == null ? void 0 : Et.accumulator, k.offset = 0) : (k.position = Math.floor(T) * E, k.offset = T % 1 * E);
       }
-      return b = G, L = N, clearTimeout(he), he = setTimeout(gs, 300), {
+      return b = G, L = N, clearTimeout(he), he = setTimeout(ys, 300), {
         continuous: Pe
       };
-    }, _s = (O) => {
-      const A = o.direction === "vertical" ? { scroll: "scrollTop", start: "top" } : { scroll: "scrollLeft", start: "left" }, k = g.value, Q = A.scroll;
-      k[Q] = O;
-    }, bs = (O) => {
-      var k;
+    }, vs = (O) => {
+      const A = o.direction === "vertical" ? { scroll: "scrollTop", start: "top" } : { scroll: "scrollLeft", start: "left" }, E = g.value, Q = A.scroll;
+      E[Q] = O;
+    }, Ss = (O) => {
+      var E;
       let A;
-      o.itemSize === null ? A = O > 0 ? (k = Fe.value[O - 1]) == null ? void 0 : k.accumulator : 0 : A = Math.floor(O) * o.itemSize, _s(A);
-    }, ys = () => {
+      o.itemSize === null ? A = O > 0 ? (E = Ve.value[O - 1]) == null ? void 0 : E.accumulator : 0 : A = Math.floor(O) * o.itemSize, vs(A);
+    }, Cs = () => {
       const O = g.value;
       w.value !== "middle" && (w.value = "middle", t("user-position", "middle")), O.scrollTop === 0 && (w.value = "top", t("user-position", "top")), O.scrollTop + O.clientHeight === O.scrollHeight && (w.value = "bottom", t("user-position", "bottom")), B || (B = !0, requestAnimationFrame(() => {
         B = !1, Te(!1, !0);
       }));
     };
     return s({
-      scrollToItem: bs,
+      scrollToItem: Ss,
       _updateVisibleItems: Te
     }), (O, A) => (a(), l("div", {
       ref_key: "scroller",
@@ -7149,30 +7178,30 @@ const rs = {
         ready: u.value,
         [`direction-${e.direction}`]: !0
       }]),
-      onScrollPassive: ys
+      onScrollPassive: Cs
     }, [
       (a(), S(X(e.listTag), {
         ref: "wrapper",
-        style: re({ [e.direction === "vertical" ? "minHeight" : "minWidth"]: `${Ut(Ve)}px` }),
+        style: re({ [e.direction === "vertical" ? "minHeight" : "minWidth"]: `${Yt(Fe)}px` }),
         class: y(["vue-recycle-scroller__item-wrapper", e.listClass])
       }, {
         default: c(() => [
-          (a(!0), l(Y, null, ee(r.value, (k) => (a(), S(X(e.itemTag), C({
-            key: k.nr.id,
+          (a(!0), l(Y, null, ee(r.value, (E) => (a(), S(X(e.itemTag), C({
+            key: E.nr.id,
             style: u.value ? {
-              transform: `translate${e.direction === "vertical" ? "Y" : "X"}(${k.position}px) translate${e.direction === "vertical" ? "X" : "Y"}(${k.offset}px)`,
+              transform: `translate${e.direction === "vertical" ? "Y" : "X"}(${E.position}px) translate${e.direction === "vertical" ? "X" : "Y"}(${E.offset}px)`,
               width: void 0,
               height: void 0
             } : null,
             class: ["vue-recycle-scroller__item-view", [
               e.itemClass,
               {
-                hover: !e.skipHover && h.value === k.nr.key
+                hover: !e.skipHover && h.value === E.nr.key
               }
             ]]
           }, M(e.skipHover ? {} : {
             mouseenter: () => {
-              h.value = k.nr.key;
+              h.value = E.nr.key;
             },
             mouseleave: () => {
               h.value = null;
@@ -7180,9 +7209,9 @@ const rs = {
           })), {
             default: c(() => [
               d(O.$slots, "default", {
-                item: k.item,
-                index: k.nr.index,
-                active: k.nr.used
+                item: E.item,
+                index: E.nr.index,
+                active: E.nr.used
               })
             ]),
             _: 2
@@ -7192,7 +7221,7 @@ const rs = {
       }, 8, ["style", "class"]))
     ], 34));
   }
-}, Po = {
+}, Bo = {
   name: "DtScrollerItem",
   inject: [
     "vscrollData",
@@ -7310,13 +7339,13 @@ const rs = {
     }
   },
   render() {
-    return ks(this.tag, this.$slots.default());
+    return Ls(this.tag, this.$slots.default());
   }
-}, xo = {
+}, $o = {
   name: "DynamicScroller",
   components: {
-    CoreScroller: rs,
-    DtScrollerItem: Po
+    CoreScroller: us,
+    DtScrollerItem: Bo
   },
   provide() {
     return typeof ResizeObserver < "u" && (this.$_resizeObserver = new ResizeObserver((e) => {
@@ -7484,7 +7513,7 @@ const rs = {
     }
   }
 };
-function Ro(e, s, t, o, n, i) {
+function No(e, s, t, o, n, i) {
   const r = f("dt-scroller-item"), h = f("core-scroller");
   return a(), S(h, C({
     ref: "scroller",
@@ -7505,7 +7534,7 @@ function Ro(e, s, t, o, n, i) {
         "data-index": g
       }, {
         default: c(() => [
-          d(e.$slots, "default", Ee(We({
+          d(e.$slots, "default", ke(Ye({
             item: u.item,
             index: g,
             active: w,
@@ -7518,7 +7547,7 @@ function Ro(e, s, t, o, n, i) {
     _: 3
   }, 16, ["items", "min-item-size", "direction", "key-field", "list-tag", "item-tag"]);
 }
-const Bo = /* @__PURE__ */ v(xo, [["render", Ro]]), md = {
+const zo = /* @__PURE__ */ v($o, [["render", No]]), bd = {
   __name: "scroller",
   props: {
     /**
@@ -7620,12 +7649,12 @@ const Bo = /* @__PURE__ */ v(xo, [["render", Ro]]), md = {
   ],
   setup(e, { expose: s, emit: t }) {
     const o = e;
-    Es("emit", t);
+    Ts("emit", t);
     const n = pe(null), i = Re(() => ({
       width: typeof o.scrollerWidth == "number" ? `${o.scrollerWidth}px` : o.scrollerWidth,
       height: typeof o.scrollerHeight == "number" ? `${o.scrollerHeight}px` : o.scrollerHeight
     }));
-    Gt(o, () => {
+    Zt(o, () => {
       w();
     }, { deep: !0, immediate: !0 });
     function r() {
@@ -7648,7 +7677,7 @@ const Bo = /* @__PURE__ */ v(xo, [["render", Ro]]), md = {
       scrollToItem: h,
       updateItems: u,
       updateItemsFromBottom: g
-    }), (b, L) => (a(), S(X(e.dynamic ? Bo : rs), {
+    }), (b, L) => (a(), S(X(e.dynamic ? zo : us), {
       ref_key: "scroller",
       ref: n,
       "data-qa": "dt-scroller",
@@ -7659,12 +7688,12 @@ const Bo = /* @__PURE__ */ v(xo, [["render", Ro]]), md = {
       "key-field": e.keyField,
       "list-tag": e.listTag,
       "item-tag": e.itemTag,
-      style: re(Ut(i)),
+      style: re(Yt(i)),
       tabindex: "0",
       onUserPosition: L[0] || (L[0] = (B) => b.$emit("user-position", B))
     }, {
       default: c(({ item: B, index: de, active: he }) => [
-        d(b.$slots, "default", Ee(We({
+        d(b.$slots, "default", ke(Ye({
           item: B,
           index: de,
           active: he
@@ -7673,13 +7702,13 @@ const Bo = /* @__PURE__ */ v(xo, [["render", Ro]]), md = {
       _: 3
     }, 40, ["items", "item-size", "min-item-size", "direction", "key-field", "list-tag", "item-tag", "style"]));
   }
-}, $o = {
+}, Mo = {
   name: "DtRecipeComboboxWithPopover",
   components: {
-    DtCombobox: mn,
-    DtPopover: it,
-    ComboboxLoadingList: es,
-    ComboboxEmptyList: ts
+    DtCombobox: bn,
+    DtPopover: ot,
+    ComboboxLoadingList: is,
+    ComboboxEmptyList: ns
   },
   mixins: [ie],
   props: {
@@ -7705,7 +7734,7 @@ const Bo = /* @__PURE__ */ v(xo, [["render", Ro]]), md = {
     size: {
       type: String,
       default: null,
-      validator: (e) => Object.values(ss).includes(e)
+      validator: (e) => Object.values(as).includes(e)
     },
     /**
      * Description for the input
@@ -7786,7 +7815,7 @@ const Bo = /* @__PURE__ */ v(xo, [["render", Ro]]), md = {
     contentWidth: {
       type: String,
       default: null,
-      validator: (e) => is.includes(e)
+      validator: (e) => os.includes(e)
     },
     /**
      * If the list should be shown by pressing up or down arrow key on the input element.
@@ -7954,8 +7983,8 @@ const Bo = /* @__PURE__ */ v(xo, [["render", Ro]]), md = {
       this.showList !== null || this.isListShown || !this.openWithArrowKeys || this.showComboboxList();
     }
   }
-}, No = ["id"], zo = { ref: "header" }, Mo = ["onMouseleave", "onFocusout"], Ho = { ref: "footer" };
-function Vo(e, s, t, o, n, i) {
+}, Ho = ["id"], Fo = { ref: "header" }, Vo = ["onMouseleave", "onFocusout"], qo = { ref: "footer" };
+function Ko(e, s, t, o, n, i) {
   const r = f("combobox-loading-list"), h = f("combobox-empty-list"), u = f("dt-popover"), g = f("dt-combobox");
   return a(), S(g, C({
     ref: "combobox",
@@ -7979,15 +8008,15 @@ function Vo(e, s, t, o, n, i) {
         ref: "input",
         onFocusin: s[0] || (s[0] = (...b) => i.onFocusIn && i.onFocusIn(...b)),
         onKeydown: [
-          s[1] || (s[1] = V((b) => i.openOnArrowKeyPress(b), ["up"])),
-          s[2] || (s[2] = V((b) => i.openOnArrowKeyPress(b), ["down"]))
+          s[1] || (s[1] = F((b) => i.openOnArrowKeyPress(b), ["up"])),
+          s[2] || (s[2] = F((b) => i.openOnArrowKeyPress(b), ["down"]))
         ]
       }, [
         d(e.$slots, "input", {
           inputProps: w,
           onInput: i.handleDisplayList
         })
-      ], 40, No)
+      ], 40, Ho)
     ]),
     list: c(({ opened: w, listProps: b, clearHighlightIndex: L }) => [
       m(u, {
@@ -8014,7 +8043,7 @@ function Vo(e, s, t, o, n, i) {
         "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
         "visually-hidden-close": e.visuallyHiddenClose,
         onOpened: w
-      }, ke({
+      }, Ee({
         content: c(() => [
           _("div", {
             ref: "listWrapper",
@@ -8022,18 +8051,18 @@ function Vo(e, s, t, o, n, i) {
             onMouseleave: L,
             onFocusout: L
           }, [
-            t.loading ? (a(), S(r, Ee(C({ key: 0 }, b)), null, 16)) : t.emptyList && t.emptyStateMessage ? (a(), S(h, C({ key: 1 }, b, { message: t.emptyStateMessage }), null, 16, ["message"])) : d(e.$slots, "list", {
+            t.loading ? (a(), S(r, ke(C({ key: 0 }, b)), null, 16)) : t.emptyList && t.emptyStateMessage ? (a(), S(h, C({ key: 1 }, b, { message: t.emptyStateMessage }), null, 16, ["message"])) : d(e.$slots, "list", {
               key: 2,
               listProps: b
             })
-          ], 42, Mo)
+          ], 42, Vo)
         ]),
         _: 2
       }, [
         n.hasSlotContent(e.$slots.header) ? {
           name: "headerContent",
           fn: c(() => [
-            _("div", zo, [
+            _("div", Fo, [
               d(e.$slots, "header")
             ], 512)
           ]),
@@ -8042,7 +8071,7 @@ function Vo(e, s, t, o, n, i) {
         n.hasSlotContent(e.$slots.footer) ? {
           name: "footerContent",
           fn: c(() => [
-            _("div", Ho, [
+            _("div", qo, [
               d(e.$slots, "footer")
             ], 512)
           ]),
@@ -8053,25 +8082,25 @@ function Vo(e, s, t, o, n, i) {
     _: 3
   }, 16, ["loading", "label", "label-visible", "size", "description", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-id"]);
 }
-const Fo = /* @__PURE__ */ v($o, [["render", Vo]]), qo = {
+const jo = /* @__PURE__ */ v(Mo, [["render", Ko]]), Go = {
   // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.
   EXTRA_SMALL: "xs",
   SMALL: "sm",
   DEFAULT: "md"
-}, Ko = {
+}, Uo = {
   xs: "xs",
   sm: "xs",
   md: "sm"
-}, jo = {
+}, Wo = {
   xs: 1.4,
   sm: 0.4,
   md: 0.2
-}, Go = {
+}, Zo = {
   name: "DtRecipeComboboxMultiSelect",
   components: {
-    DtRecipeComboboxWithPopover: Fo,
-    DtInput: Hs,
-    DtChip: as,
+    DtRecipeComboboxWithPopover: jo,
+    DtInput: qs,
+    DtChip: rs,
     DtValidationMessages: me
   },
   mixins: [ie],
@@ -8111,7 +8140,7 @@ const Fo = /* @__PURE__ */ v($o, [["render", Vo]]), qo = {
     inputMessages: {
       type: Array,
       default: () => [],
-      validator: (e) => Wt(e)
+      validator: (e) => Qt(e)
     },
     /**
      * Show input validation message
@@ -8198,7 +8227,7 @@ const Fo = /* @__PURE__ */ v($o, [["render", Vo]]), qo = {
     size: {
       type: String,
       default: "md",
-      validator: (e) => Object.values(qo).includes(e)
+      validator: (e) => Object.values(Go).includes(e)
     },
     /**
      * Sets the element to which the popover is going to append to.
@@ -8264,7 +8293,7 @@ const Fo = /* @__PURE__ */ v($o, [["render", Vo]]), qo = {
       initialInputPadding: {},
       resizeWindowObserver: null,
       originalInputSize: null,
-      CHIP_SIZES: Ko,
+      CHIP_SIZES: Uo,
       hasSlotContent: $
     };
   },
@@ -8389,7 +8418,7 @@ const Fo = /* @__PURE__ */ v($o, [["render", Vo]]), qo = {
       if (!e)
         return;
       const s = this.$refs.inputSlotWrapper, t = e.getBoundingClientRect().top - s.getBoundingClientRect().top, o = this.$refs.chipsWrapper;
-      o.style.top = t - jo[this.size] + "px";
+      o.style.top = t - Wo[this.size] + "px";
     },
     setInputPadding() {
       const e = this.getLastChip(), s = this.getInput(), t = this.$refs.chipsWrapper;
@@ -8415,17 +8444,17 @@ const Fo = /* @__PURE__ */ v($o, [["render", Vo]]), qo = {
       this.maxSelected !== 0 && (this.selectedItems.length > this.maxSelected ? (this.showValidationMessages = !0, this.$emit("max-selected")) : this.showValidationMessages = !1);
     }
   }
-}, Uo = {
+}, Yo = {
   ref: "inputSlotWrapper",
   class: "d-ps-relative d-d-block"
-}, Wo = {
+}, Qo = {
   ref: "chipsWrapper",
   class: "d-ps-absolute d-mx2 d-pl1"
-}, Zo = { ref: "header" }, Yo = {
+}, Xo = { ref: "header" }, Jo = {
   key: 1,
   class: "d-ta-center d-py16"
-}, Qo = { ref: "footer" };
-function Xo(e, s, t, o, n, i) {
+}, el = { ref: "footer" };
+function tl(e, s, t, o, n, i) {
   const r = f("dt-chip"), h = f("dt-input"), u = f("dt-validation-messages"), g = f("dt-recipe-combobox-with-popover");
   return a(), S(g, {
     ref: "comboboxWithPopover",
@@ -8440,10 +8469,10 @@ function Xo(e, s, t, o, n, i) {
     "append-to": t.appendTo,
     transition: t.transition,
     onSelect: i.onComboboxSelect
-  }, ke({
+  }, Ee({
     input: c(({ onInput: w }) => [
-      _("span", Uo, [
-        _("span", Wo, [
+      _("span", Yo, [
+        _("span", Qo, [
           (a(!0), l(Y, null, ee(t.selectedItems, (b) => (a(), S(r, C({
             ref_for: !0,
             ref: "chips",
@@ -8453,7 +8482,7 @@ function Xo(e, s, t, o, n, i) {
             "close-button-props": { ariaLabel: "close" },
             size: n.CHIP_SIZES[t.size]
           }, M(i.chipListeners), {
-            onKeyup: V((L) => i.onChipRemove(b), ["backspace"]),
+            onKeyup: F((L) => i.onChipRemove(b), ["backspace"]),
             onClose: (L) => i.onChipRemove(b)
           }), {
             default: c(() => [
@@ -8487,7 +8516,7 @@ function Xo(e, s, t, o, n, i) {
         onMousedown: s[1] || (s[1] = U(() => {
         }, ["prevent"]))
       }, [
-        t.loading ? (a(), l("div", Yo, I(t.loadingMessage), 1)) : d(e.$slots, "list", { key: 0 })
+        t.loading ? (a(), l("div", Jo, I(t.loadingMessage), 1)) : d(e.$slots, "list", { key: 0 })
       ], 544)
     ]),
     _: 2
@@ -8495,7 +8524,7 @@ function Xo(e, s, t, o, n, i) {
     n.hasSlotContent(e.$slots.header) ? {
       name: "header",
       fn: c(() => [
-        _("div", Zo, [
+        _("div", Xo, [
           d(e.$slots, "header")
         ], 512)
       ]),
@@ -8504,7 +8533,7 @@ function Xo(e, s, t, o, n, i) {
     n.hasSlotContent(e.$slots.footer) ? {
       name: "footer",
       fn: c(() => [
-        _("div", Qo, [
+        _("div", el, [
           d(e.$slots, "footer")
         ], 512)
       ]),
@@ -8512,10 +8541,10 @@ function Xo(e, s, t, o, 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 gd = /* @__PURE__ */ v(Go, [["render", Xo]]), ds = ["sm", "md", "lg", "xl"];
-const Jo = {
+const yd = /* @__PURE__ */ v(Zo, [["render", tl]]), hs = ["sm", "md", "lg", "xl"];
+const sl = {
   name: "DtRecipeCallbarButton",
-  components: { DtButton: K, DtTooltip: Qe },
+  components: { DtButton: K, DtTooltip: Je },
   inheritAttrs: !0,
   props: {
     /**
@@ -8593,7 +8622,7 @@ const Jo = {
     buttonWidthSize: {
       type: String,
       default: "xl",
-      validator: (e) => ds.includes(e)
+      validator: (e) => hs.includes(e)
     },
     /**
      * The fill and outline of the button associated with its visual importance.
@@ -8641,7 +8670,7 @@ const Jo = {
     }
   }
 };
-function el(e, s, t, o, n, i) {
+function il(e, s, t, o, n, i) {
   const r = f("dt-button"), h = f("dt-tooltip");
   return a(), S(h, {
     id: t.id,
@@ -8675,10 +8704,10 @@ function el(e, s, t, o, n, i) {
     _: 3
   }, 8, ["id"]);
 }
-const tl = /* @__PURE__ */ v(Jo, [["render", el]]);
-const sl = {
+const nl = /* @__PURE__ */ v(sl, [["render", il]]);
+const al = {
   name: "DtRecipeCallbarButtonWithPopover",
-  components: { DtRecipeCallbarButton: tl, DtPopover: it, DtButton: K, DtIcon: x },
+  components: { DtRecipeCallbarButton: nl, DtPopover: ot, DtButton: K, DtIcon: x },
   /* inheritAttrs: false is generally an option we want to set on library
     components. This allows any attributes passed in that are not recognized
     as props to be passed down to another element or component using v-bind:$attrs
@@ -8811,7 +8840,7 @@ const sl = {
     buttonWidthSize: {
       type: String,
       default: "xl",
-      validator: (e) => ds.includes(e)
+      validator: (e) => hs.includes(e)
     },
     /**
      * Additional class name for the popover content wrapper element.
@@ -8858,10 +8887,10 @@ const sl = {
       this.open = e;
     }
   }
-}, il = { class: "d-d-flex d-ai-center" };
-function nl(e, s, t, o, n, i) {
+}, ol = { class: "d-d-flex d-ai-center" };
+function ll(e, s, t, o, n, i) {
   const r = f("dt-recipe-callbar-button"), h = f("dt-icon"), u = f("dt-button"), g = f("dt-popover");
-  return a(), l("div", il, [
+  return a(), l("div", ol, [
     m(r, {
       "aria-label": t.ariaLabel,
       disabled: t.disabled,
@@ -8930,10 +8959,10 @@ function nl(e, s, t, o, n, i) {
     }, 16, ["id", "open", "placement", "initial-focus-element", "show-close-button", "dialog-class", "onOpened"])) : p("", !0)
   ]);
 }
-const _d = /* @__PURE__ */ v(sl, [["render", nl]]), al = {
+const vd = /* @__PURE__ */ v(al, [["render", ll]]), rl = {
   name: "DtRecipeContactInfo",
   components: {
-    DtAvatar: Je,
+    DtAvatar: st,
     DtIcon: x,
     DtListItem: ze
   },
@@ -9028,15 +9057,15 @@ const _d = /* @__PURE__ */ v(sl, [["render", nl]]), al = {
       default: null
     }
   }
-}, ol = {
+}, dl = {
   key: 0,
   class: "d-ps-relative",
   "data-qa": "contact-info-left"
-}, ll = {
+}, cl = {
   key: 0,
   class: "d-mrn4 d-d-flex d-fd-row"
-}, rl = ["src", "alt"], dl = { key: 1 }, cl = ["src", "initials", "seed", "alt"], ul = { key: 1 }, hl = { "data-qa": "contact-info-header" }, fl = { "data-qa": "contact-info-subtitle" }, pl = { "data-qa": "contact-info-bottom" }, ml = { "data-qa": "contact-info-right" };
-function gl(e, s, t, o, n, i) {
+}, ul = ["src", "alt"], hl = { key: 1 }, fl = ["src", "initials", "seed", "alt"], pl = { key: 1 }, ml = { "data-qa": "contact-info-header" }, gl = { "data-qa": "contact-info-subtitle" }, _l = { "data-qa": "contact-info-bottom" }, bl = { "data-qa": "contact-info-right" };
+function yl(e, s, t, o, n, i) {
   const r = f("dt-icon"), h = f("dt-avatar"), u = f("dt-list-item");
   return a(), S(u, {
     id: t.id,
@@ -9045,8 +9074,8 @@ function gl(e, s, t, o, n, i) {
     "data-qa": "contact-info"
   }, {
     left: c(() => [
-      t.showAvatar ? (a(), l("div", ol, [
-        t.avatarList ? (a(), l("div", ll, [
+      t.showAvatar ? (a(), l("div", dl, [
+        t.avatarList ? (a(), l("div", cl, [
           (a(!0), l(Y, null, ee(t.avatarList, (g, w) => (a(), l("div", { key: w }, [
             m(h, {
               size: t.avatarSize,
@@ -9063,7 +9092,7 @@ function gl(e, s, t, o, n, i) {
                   "data-qa": "dt-contact-avatar",
                   src: g.src,
                   alt: g.initials
-                }, null, 8, rl)) : g.initials ? (a(), l("div", dl, I(g.initials), 1)) : (a(), S(r, {
+                }, null, 8, ul)) : g.initials ? (a(), l("div", hl, I(g.initials), 1)) : (a(), S(r, {
                   key: 2,
                   name: t.avatarIcon
                 }, null, 8, ["name"]))
@@ -9086,7 +9115,7 @@ function gl(e, s, t, o, n, i) {
               initials: t.avatarInitials,
               seed: t.avatarSeed,
               alt: t.avatarInitials
-            }, null, 8, cl)) : t.avatarInitials ? (a(), l("div", ul, I(t.avatarInitials), 1)) : (a(), S(r, {
+            }, null, 8, fl)) : t.avatarInitials ? (a(), l("div", pl, I(t.avatarInitials), 1)) : (a(), S(r, {
               key: 2,
               name: t.avatarIcon
             }, null, 8, ["name"]))
@@ -9096,29 +9125,29 @@ function gl(e, s, t, o, n, i) {
       ])) : p("", !0)
     ]),
     default: c(() => [
-      _("div", hl, [
+      _("div", ml, [
         d(e.$slots, "header")
       ])
     ]),
     subtitle: c(() => [
-      _("div", fl, [
+      _("div", gl, [
         d(e.$slots, "subtitle")
       ])
     ]),
     bottom: c(() => [
-      _("div", pl, [
+      _("div", _l, [
         d(e.$slots, "bottom")
       ])
     ]),
     right: c(() => [
-      _("div", ml, [
+      _("div", bl, [
         d(e.$slots, "right")
       ])
     ]),
     _: 3
   }, 8, ["id", "role"]);
 }
-const bd = /* @__PURE__ */ v(al, [["render", gl]]), _l = [
+const Sd = /* @__PURE__ */ v(rl, [["render", yl]]), vl = [
   "green300",
   "green100",
   "red200",
@@ -9128,7 +9157,7 @@ const bd = /* @__PURE__ */ v(al, [["render", gl]]), _l = [
   "black100",
   "white"
 ];
-const bl = {
+const Sl = {
   name: "DtRecipeTopBannerInfo",
   props: {
     /**
@@ -9138,7 +9167,7 @@ const bl = {
       type: String,
       default: "green300",
       validator: function(e) {
-        return _l.includes(e);
+        return vl.includes(e);
       }
     }
   },
@@ -9158,41 +9187,41 @@ const bl = {
       }[this.colorCode]];
     }
   }
-}, yl = { class: "d-top-banner-info__left" }, vl = { class: "d-top-banner-info__middle d-my4" }, Sl = { class: "d-top-banner-info__right d-ta-right" };
-function Cl(e, s, t, o, n, i) {
+}, Cl = { class: "d-top-banner-info__left" }, Il = { class: "d-top-banner-info__middle d-my4" }, wl = { class: "d-top-banner-info__right d-ta-right" };
+function El(e, s, t, o, n, i) {
   return a(), l("div", {
     class: y(["d-fs-100 d-d-flex d-top-banner-info d-jc-space-between d-ai-center d-fc-primary", i.bannerInfoClass]),
     "data-qa": "banner-info"
   }, [
-    _("div", yl, [
+    _("div", Cl, [
       d(e.$slots, "left")
     ]),
-    _("div", vl, [
+    _("div", Il, [
       d(e.$slots, "default")
     ]),
-    _("div", Sl, [
+    _("div", wl, [
       d(e.$slots, "right")
     ])
   ], 2);
 }
-const yd = /* @__PURE__ */ v(bl, [["render", Cl]]), at = "promptmenu", ot = "promptcollect", lt = "promptplay", rt = "gotoexpert", He = "goto", dt = "branch", ct = "transfer", ut = "hangup", Il = {
-  [at]: "keypad",
-  [ot]: "dialer",
-  [lt]: "volume-2",
-  [rt]: "expert-node",
-  [dt]: "branch",
+const Cd = /* @__PURE__ */ v(Sl, [["render", El]]), rt = "promptmenu", dt = "promptcollect", ct = "promptplay", ut = "gotoexpert", He = "goto", ht = "branch", ft = "transfer", pt = "hangup", kl = {
+  [rt]: "keypad",
+  [dt]: "dialer",
+  [ct]: "volume-2",
+  [ut]: "expert-node",
+  [ht]: "branch",
   [He]: "call-merge",
-  [ct]: "transfer",
-  [ut]: "phone-hang-up"
-}, vd = {
-  [at]: "Menu",
-  [ot]: "Collect",
-  [lt]: "Play",
-  [rt]: "Expert",
-  [dt]: "Branch",
+  [ft]: "transfer",
+  [pt]: "phone-hang-up"
+}, Id = {
+  [rt]: "Menu",
+  [dt]: "Collect",
+  [ct]: "Play",
+  [ut]: "Expert",
+  [ht]: "Branch",
   [He]: "Go-to",
-  [ct]: "Transfer",
-  [ut]: "Hangup"
+  [ft]: "Transfer",
+  [pt]: "Hangup"
 }, le = {
   PROMPT: {
     normal: "d-bc-blue-200",
@@ -9206,22 +9235,22 @@ const yd = /* @__PURE__ */ v(bl, [["render", Cl]]), at = "promptmenu", ot = "pro
     normal: "d-bc-red-100",
     selected: "d-bc-red-200"
   }
-}, wl = {
-  [at]: le.PROMPT,
-  [ot]: le.PROMPT,
-  [lt]: le.PROMPT,
-  [rt]: le.LOGIC,
-  [dt]: le.LOGIC,
+}, Ol = {
+  [rt]: le.PROMPT,
+  [dt]: le.PROMPT,
+  [ct]: le.PROMPT,
+  [ut]: le.LOGIC,
+  [ht]: le.LOGIC,
   [He]: le.LOGIC,
-  [ct]: le.TERMINAL,
-  [ut]: le.TERMINAL
+  [ft]: le.TERMINAL,
+  [pt]: le.TERMINAL
 };
-const kl = {
+const Ll = {
   name: "DtRecipeIvrNode",
   components: {
-    DtCard: qi,
+    DtCard: Gi,
     DtButton: K,
-    DtDropdown: Nn,
+    DtDropdown: Hn,
     DtIcon: x
   },
   props: {
@@ -9282,10 +9311,10 @@ const kl = {
       };
     },
     nodeIcon() {
-      return Il[this.nodeType];
+      return kl[this.nodeType];
     },
     headerColor() {
-      const { normal: e, selected: s } = wl[this.nodeType];
+      const { normal: e, selected: s } = Ol[this.nodeType];
       return this.isSelected ? s : e;
     },
     isGotoNode() {
@@ -9297,11 +9326,11 @@ const kl = {
       this.isOpen = !0;
     }
   }
-}, El = { class: "d-d-flex d-ai-center" }, Ol = {
+}, Tl = { class: "d-d-flex d-ai-center" }, Al = {
   class: "d-fs-200 d-fw-bold",
   "data-qa": "ivr-node-label"
-}, Ll = { class: "d-w164" };
-function Tl(e, s, t, o, n, i) {
+}, Dl = { class: "d-w164" };
+function Pl(e, s, t, o, n, i) {
   const r = f("dt-icon"), h = f("dt-button"), u = f("dt-dropdown"), g = f("dt-card");
   return a(), l("div", C({ class: "d-d-flex d-fd-column d-ai-center d-c-pointer ivr_node__width" }, M(i.nodeListeners, !0)), [
     t.dtmfKey ? (a(), l("div", {
@@ -9332,7 +9361,7 @@ function Tl(e, s, t, o, n, i) {
       ]
     }, {
       header: c(() => [
-        _("div", El, [
+        _("div", Tl, [
           m(h, {
             "aria-label": t.nodeType,
             importance: "clear",
@@ -9348,7 +9377,7 @@ function Tl(e, s, t, o, n, i) {
             ]),
             _: 1
           }, 8, ["aria-label"]),
-          _("p", Ol, I(t.nodeLabel), 1)
+          _("p", Al, I(t.nodeLabel), 1)
         ]),
         m(u, {
           open: n.isOpen,
@@ -9372,7 +9401,7 @@ function Tl(e, s, t, o, n, i) {
             }, 8, ["aria-label", "onClick"])
           ]),
           list: c(({ close: w }) => [
-            _("div", Ll, [
+            _("div", Dl, [
               d(e.$slots, "menuItems", { close: w })
             ])
           ]),
@@ -9386,36 +9415,36 @@ function Tl(e, s, t, o, n, i) {
     }, 8, ["container-class", "header-class"])
   ], 16);
 }
-const Sd = /* @__PURE__ */ v(kl, [["render", Tl]]);
-const Al = {
+const wd = /* @__PURE__ */ v(Ll, [["render", Pl]]);
+const xl = {
   name: "DtRecipeGroupedChip",
   components: {
-    DtChip: as
+    DtChip: rs
   },
   data() {
     return {
       hasSlotContent: $
     };
   }
-}, Dl = {
+}, Rl = {
   "data-qa": "grouped-chip",
   class: "d-d-inline-flex d-ws-nowrap d-bgc-unset"
-}, Pl = {
+}, Bl = {
   key: 0,
   "data-qa": "left-grouped-chip-icon"
-}, xl = {
+}, $l = {
   key: 0,
   "data-qa": "left-grouped-chip-content"
-}, Rl = {
+}, Nl = {
   key: 0,
   "data-qa": "right-grouped-chip-icon"
-}, Bl = {
+}, zl = {
   key: 0,
   "data-qa": "right-grouped-chip-content"
 };
-function $l(e, s, t, o, n, i) {
+function Ml(e, s, t, o, n, i) {
   const r = f("dt-chip");
-  return a(), l("div", Dl, [
+  return a(), l("div", Rl, [
     m(r, {
       "hide-close": !0,
       interactive: !1,
@@ -9423,9 +9452,9 @@ function $l(e, s, t, o, n, i) {
       size: "xs",
       "grouped-chip": !0,
       class: "d-blr-pill d-bgc-moderate-opaque d-wmx84 dt-chip-content"
-    }, ke({
+    }, Ee({
       default: c(() => [
-        n.hasSlotContent(e.$slots.leftContent) ? (a(), l("div", xl, [
+        n.hasSlotContent(e.$slots.leftContent) ? (a(), l("div", $l, [
           d(e.$slots, "leftContent")
         ])) : p("", !0)
       ]),
@@ -9434,7 +9463,7 @@ function $l(e, s, t, o, n, i) {
       n.hasSlotContent(e.$slots.leftIcon) ? {
         name: "icon",
         fn: c(() => [
-          n.hasSlotContent(e.$slots.leftIcon) ? (a(), l("div", Pl, [
+          n.hasSlotContent(e.$slots.leftIcon) ? (a(), l("div", Bl, [
             d(e.$slots, "leftIcon")
           ])) : p("", !0)
         ]),
@@ -9450,12 +9479,12 @@ function $l(e, s, t, o, n, i) {
       class: "d-brr-pill d-bgc-purple-200 d-wmx84 dt-chip-content"
     }, {
       icon: c(() => [
-        n.hasSlotContent(e.$slots.rightIcon) ? (a(), l("div", Rl, [
+        n.hasSlotContent(e.$slots.rightIcon) ? (a(), l("div", Nl, [
           d(e.$slots, "rightIcon")
         ])) : p("", !0)
       ]),
       default: c(() => [
-        n.hasSlotContent(e.$slots.rightContent) ? (a(), l("div", Bl, [
+        n.hasSlotContent(e.$slots.rightContent) ? (a(), l("div", zl, [
           d(e.$slots, "rightContent")
         ])) : p("", !0)
       ]),
@@ -9463,8 +9492,8 @@ function $l(e, s, t, o, n, i) {
     })
   ]);
 }
-const Cd = /* @__PURE__ */ v(Al, [["render", $l]]);
-const Nl = {
+const Ed = /* @__PURE__ */ v(xl, [["render", Ml]]);
+const Hl = {
   name: "DtRecipeSettingsMenuButton",
   components: {
     DtButton: K,
@@ -9490,7 +9519,7 @@ const Nl = {
     }
   }
 };
-function zl(e, s, t, o, n, i) {
+function Fl(e, s, t, o, n, i) {
   const r = f("dt-icon"), h = f("dt-button");
   return t.updateAvailable ? (a(), S(h, C({
     key: 0,
@@ -9527,7 +9556,7 @@ function zl(e, s, t, o, n, i) {
     _: 1
   }, 16, ["aria-label"]));
 }
-const Id = /* @__PURE__ */ v(Nl, [["render", zl], ["__scopeId", "data-v-7712e6e1"]]), z = {
+const kd = /* @__PURE__ */ v(Hl, [["render", Fl], ["__scopeId", "data-v-7712e6e1"]]), z = {
   INBOX: "inbox",
   CONTACTS: "contacts",
   CHANNELS: "channels",
@@ -9540,7 +9569,7 @@ const Id = /* @__PURE__ */ v(Nl, [["render", zl], ["__scopeId", "data-v-7712e6e1
   DIALBOT: "dialbot",
   ASSIGNED: "assigned",
   DIGITAL: "digital"
-}, Ml = {
+}, Vl = {
   [z.INBOX]: "inbox",
   [z.CONTACTS]: "contacts",
   [z.CHANNELS]: "hash",
@@ -9564,10 +9593,10 @@ const Id = /* @__PURE__ */ v(Nl, [["render", zl], ["__scopeId", "data-v-7712e6e1
   "purple-100": "d-bgc-purple-100",
   "magenta-400": "d-bgc-magenta-400",
   "magenta-100": "d-bgc-magenta-100"
-}, Hl = "If type is contact center, color must be oneof the following:" + Object.keys(Be).join(", "), Vl = [
+}, ql = "If type is contact center, color must be oneof the following:" + Object.keys(Be).join(", "), Kl = [
   "300",
   "200"
-], Fl = {}, ql = {
+], jl = {}, Gl = {
   "aria-hidden": "true",
   focusable: "false",
   "aria-label": "Dialbot",
@@ -9576,15 +9605,15 @@ const Id = /* @__PURE__ */ v(Nl, [["render", zl], ["__scopeId", "data-v-7712e6e1
   height: "358",
   viewBox: "0 0 358 358",
   fill: "none"
-}, Kl = /* @__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), jl = [
-  Kl
+}, Ul = /* @__PURE__ */ As('<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), Wl = [
+  Ul
 ];
-function Gl(e, s) {
-  return a(), l("svg", ql, jl);
+function Zl(e, s) {
+  return a(), l("svg", Gl, Wl);
 }
-const Ul = /* @__PURE__ */ v(Fl, [["render", Gl]]), Wl = {
+const Yl = /* @__PURE__ */ v(jl, [["render", Zl]]), Ql = {
   name: "DtRecipeLeftbarGeneralRowIcon",
-  components: { DtIcon: x, IconDialbot: Ul },
+  components: { DtIcon: x, IconDialbot: Yl },
   props: {
     type: {
       type: String,
@@ -9610,7 +9639,7 @@ const Ul = /* @__PURE__ */ v(Fl, [["render", Gl]]), Wl = {
       return this.type === z.DIALBOT;
     },
     getIconName() {
-      return Ml[this.type];
+      return Vl[this.type];
     },
     contactCenterIconClasses() {
       return [
@@ -9629,7 +9658,7 @@ const Ul = /* @__PURE__ */ v(Fl, [["render", Gl]]), Wl = {
     }
   }
 };
-function Zl(e, s, t, o, n, i) {
+function Xl(e, s, t, o, n, i) {
   const r = f("dt-icon"), h = f("icon-dialbot");
   return i.isIconType ? (a(), S(r, {
     key: 0,
@@ -9646,16 +9675,16 @@ function Zl(e, s, t, o, n, i) {
     m(h, { class: "d-svg--size24" })
   ], 2)) : p("", !0);
 }
-const Yl = /* @__PURE__ */ v(Wl, [["render", Zl]]);
-const Ql = {
+const Jl = /* @__PURE__ */ v(Ql, [["render", Xl]]);
+const er = {
   name: "DtRecipeGeneralRow",
   components: {
-    DtEmojiTextWrapper: Xe,
-    DtBadge: li,
+    DtEmojiTextWrapper: et,
+    DtBadge: ci,
     DtIcon: x,
     DtButton: K,
-    DtTooltip: Qe,
-    DtRecipeLeftbarGeneralRowIcon: Yl
+    DtTooltip: Je,
+    DtRecipeLeftbarGeneralRowIcon: Jl
   },
   inheritAttrs: !1,
   props: {
@@ -9776,7 +9805,7 @@ const Ql = {
     iconSize: {
       type: String,
       default: "300",
-      validator: (e) => Vl.includes(e)
+      validator: (e) => Kl.includes(e)
     }
   },
   emits: [
@@ -9820,10 +9849,10 @@ const Ql = {
       return this.type;
     },
     generalRowListeners() {
-      return Ze(this.$attrs);
+      return Qe(this.$attrs);
     },
     getAriaLabel() {
-      return this.ariaLabel ? this.ariaLabel : `${this.description} ${this.unreadCountTooltip} ${this.dndTextTooltip}`;
+      return this.ariaLabel ? this.ariaLabel : tt([this.description, this.unreadCountTooltip, this.dndTextTooltip]);
     }
   },
   watch: {
@@ -9837,25 +9866,25 @@ const Ql = {
   },
   methods: {
     validateProps() {
-      this.type === z.CONTACT_CENTER && !Object.keys(Be).includes(this.color) && console.error(Hl);
+      this.type === z.CONTACT_CENTER && !Object.keys(Be).includes(this.color) && console.error(ql);
     }
   }
-}, Xl = ["data-qa", "aria-label", "title", "href"], Jl = { class: "dt-leftbar-row__alpha" }, er = {
+}, tr = ["data-qa", "aria-label", "title", "href"], sr = { class: "dt-leftbar-row__alpha" }, ir = {
   key: 0,
   class: "dt-leftbar-row__is-typing"
-}, tr = /* @__PURE__ */ _("span", null, null, -1), sr = /* @__PURE__ */ _("span", null, null, -1), ir = /* @__PURE__ */ _("span", null, null, -1), nr = [
-  tr,
-  sr,
-  ir
-], ar = { class: "dt-leftbar-row__label" }, or = { class: "dt-leftbar-row__omega" }, lr = { class: "dt-leftbar-row__dnd" }, rr = {
+}, nr = /* @__PURE__ */ _("span", null, null, -1), ar = /* @__PURE__ */ _("span", null, null, -1), or = /* @__PURE__ */ _("span", null, null, -1), lr = [
+  nr,
+  ar,
+  or
+], rr = { class: "dt-leftbar-row__label" }, dr = { class: "dt-leftbar-row__omega" }, cr = { class: "dt-leftbar-row__dnd" }, ur = {
   key: 1,
   class: "dt-leftbar-row__active-voice"
-}, dr = {
+}, hr = {
   key: 0,
   class: "dt-leftbar-row__action",
   "data-qa": "dt-leftbar-row-action"
 };
-function cr(e, s, t, o, n, i) {
+function fr(e, s, t, o, n, i) {
   const r = f("dt-recipe-leftbar-general-row-icon"), h = f("dt-emoji-text-wrapper"), u = f("dt-tooltip"), g = f("dt-icon"), w = f("dt-badge"), b = f("dt-button");
   return a(), l("div", {
     class: y(i.leftbarGeneralRowClasses),
@@ -9868,8 +9897,8 @@ function cr(e, s, t, o, n, i) {
       title: t.description,
       href: "href" in e.$attrs ? e.$attrs.href : "javascript:void(0)"
     }, e.$attrs), [
-      _("div", Jl, [
-        t.isTyping ? (a(), l("div", er, nr)) : d(e.$slots, "left", { key: 1 }, () => [
+      _("div", sr, [
+        t.isTyping ? (a(), l("div", ir, lr)) : d(e.$slots, "left", { key: 1 }, () => [
           m(r, {
             type: i.getIcon,
             color: t.color,
@@ -9878,7 +9907,7 @@ function cr(e, s, t, o, n, i) {
           }, null, 8, ["type", "color", "icon-size"])
         ])
       ]),
-      _("div", ar, [
+      _("div", rr, [
         d(e.$slots, "label", {}, () => [
           m(h, {
             class: "dt-leftbar-row__description",
@@ -9892,18 +9921,18 @@ function cr(e, s, t, o, n, i) {
           })
         ])
       ]),
-      _("div", or, [
+      _("div", dr, [
         t.dndText ? (a(), S(u, {
           key: 0,
           placement: "top",
           message: t.dndTextTooltip
         }, {
           anchor: c(() => [
-            _("div", lr, I(t.dndText), 1)
+            _("div", cr, I(t.dndText), 1)
           ]),
           _: 1
         }, 8, ["message"])) : p("", !0),
-        t.activeVoiceChat ? (a(), l("div", rr, [
+        t.activeVoiceChat ? (a(), l("div", ur, [
           m(g, {
             size: "300",
             name: "activity"
@@ -9928,8 +9957,8 @@ function cr(e, s, t, o, n, i) {
           _: 1
         }, 8, ["message"])) : p("", !0)
       ])
-    ], 16, Xl),
-    t.hasCallButton ? (a(), l("div", dr, [
+    ], 16, tr),
+    t.hasCallButton ? (a(), l("div", hr, [
       m(u, {
         message: t.callButtonTooltip,
         placement: "top"
@@ -9961,11 +9990,11 @@ function cr(e, s, t, o, n, i) {
     ])) : p("", !0)
   ], 2);
 }
-const cs = /* @__PURE__ */ v(Ql, [["render", cr]]), ur = {
+const fs = /* @__PURE__ */ v(er, [["render", fr]]), pr = {
   name: "DtRecipeGroupRow",
   components: {
     DtIcon: x,
-    DtRecipeGeneralRow: cs
+    DtRecipeGeneralRow: fs
   },
   inheritAttrs: !1,
   props: {
@@ -10028,13 +10057,18 @@ const cs = /* @__PURE__ */ v(Ql, [["render", cr]]), ur = {
      * @type {PointerEvent | KeyboardEvent}
      */
     "click"
-  ]
+  ],
+  computed: {
+    ariaLabel() {
+      return tt([this.groupCountText, this.names]);
+    }
+  }
 };
-function hr(e, s, t, o, n, i) {
+function mr(e, s, t, o, n, i) {
   const r = f("dt-icon"), h = f("dt-recipe-general-row");
   return a(), S(h, C({
     description: t.names,
-    "aria-label": `${t.groupCountText} ${t.names}`,
+    "aria-label": i.ariaLabel,
     "unread-count": t.unreadCount,
     "has-unreads": t.hasUnreads,
     "unread-count-tooltip": t.unreadCountTooltip,
@@ -10050,13 +10084,13 @@ function hr(e, s, t, o, n, i) {
     _: 1
   }, 16, ["description", "aria-label", "unread-count", "has-unreads", "unread-count-tooltip", "selected", "is-typing"]);
 }
-const wd = /* @__PURE__ */ v(ur, [["render", hr]]), fr = {
+const Od = /* @__PURE__ */ v(pr, [["render", mr]]), gr = {
   name: "DtRecipeGroupRow",
   components: {
-    DtAvatar: Je,
+    DtAvatar: st,
     DtIcon: x,
-    DtRecipeGeneralRow: cs,
-    DtEmojiTextWrapper: Xe
+    DtRecipeGeneralRow: fs,
+    DtEmojiTextWrapper: et
   },
   inheritAttrs: !1,
   props: {
@@ -10195,19 +10229,22 @@ const wd = /* @__PURE__ */ v(ur, [["render", hr]]), fr = {
       }
     },
     contactRowListeners() {
-      return Ze(this.$attrs);
+      return Qe(this.$attrs);
     },
     avatarInitial() {
       var e;
       return ((e = this.name) == null ? void 0 : e[0]) ?? "";
+    },
+    contactDescription() {
+      return tt([this.name, this.presenceText, this.userStatus]);
     }
   }
-}, pr = ["src"], mr = { class: "dt-leftbar-row__status" };
-function gr(e, s, t, o, n, i) {
+}, _r = ["src"], br = { class: "dt-leftbar-row__status" };
+function yr(e, s, t, o, n, i) {
   const r = f("dt-icon"), h = f("dt-avatar"), u = f("dt-emoji-text-wrapper"), g = f("dt-recipe-general-row");
   return a(), S(g, C({
     "unread-count": t.unreadCount,
-    description: `${t.name} ${t.presenceText} ${t.userStatus}`,
+    description: i.contactDescription,
     "has-unreads": t.hasUnreads,
     selected: t.selected,
     "has-call-button": t.hasCallButton,
@@ -10230,7 +10267,7 @@ function gr(e, s, t, o, n, i) {
             "data-qa": "dt-avatar-image",
             src: t.avatarSrc,
             alt: ""
-          }, null, 8, pr)) : t.noInitials ? (a(), S(r, {
+          }, null, 8, _r)) : t.noInitials ? (a(), S(r, {
             key: 1,
             name: "user",
             size: "200"
@@ -10252,7 +10289,7 @@ function gr(e, s, t, o, n, i) {
         ]),
         _: 1
       }),
-      _("div", mr, [
+      _("div", br, [
         t.presenceText ? (a(), l("span", {
           key: 0,
           "data-qa": "dt-leftbar-row-presence-text",
@@ -10275,8 +10312,8 @@ function gr(e, s, t, o, n, i) {
     _: 1
   }, 16, ["unread-count", "description", "has-unreads", "selected", "has-call-button", "muted", "is-typing", "call-button-tooltip", "unread-count-tooltip"]);
 }
-const kd = /* @__PURE__ */ v(fr, [["render", gr]]), _r = ["up", "down"], br = ["mentions", "messages"];
-const yr = {
+const Ld = /* @__PURE__ */ v(gr, [["render", yr]]), vr = ["up", "down"], Sr = ["mentions", "messages"];
+const Cr = {
   name: "DtRecipeUnreadPill",
   components: {
     DtIcon: x
@@ -10289,7 +10326,7 @@ const yr = {
     kind: {
       type: String,
       required: !0,
-      validator: (e) => br.includes(e)
+      validator: (e) => Sr.includes(e)
     },
     /**
      * The direction of the arrow icon
@@ -10298,7 +10335,7 @@ const yr = {
     direction: {
       type: String,
       required: !0,
-      validator: (e) => _r.includes(e)
+      validator: (e) => vr.includes(e)
     }
   },
   emits: [
@@ -10317,8 +10354,8 @@ const yr = {
       };
     }
   }
-}, vr = { "data-qa": "dt-leftbar-unread-pill__label" };
-function Sr(e, s, t, o, n, i) {
+}, Ir = { "data-qa": "dt-leftbar-unread-pill__label" };
+function wr(e, s, t, o, n, i) {
   const r = f("dt-icon");
   return a(), l("button", C({
     class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${t.kind}`],
@@ -10329,16 +10366,20 @@ function Sr(e, s, t, o, n, i) {
       name: `arrow-${t.direction}`,
       size: "300"
     }, null, 8, ["name"]),
-    _("span", vr, [
+    _("span", Ir, [
       d(e.$slots, "default")
     ])
   ], 16);
 }
-const Ed = /* @__PURE__ */ v(yr, [["render", Sr]]);
-const Cr = {
+const Td = /* @__PURE__ */ v(Cr, [["render", wr]]), Ge = {
+  NORMAL: "",
+  SEARCHED: "d-bgc-warning-subtle",
+  ERROR: "d-bgc-critical-subtle"
+}, Ue = "NORMAL";
+const Er = {
   name: "DtRecipeFeedItemRow",
   components: {
-    DtAvatar: Je,
+    DtAvatar: st,
     DtLazyShow: $e,
     DtListItem: ze
   },
@@ -10387,12 +10428,15 @@ const Cr = {
     isActive: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * state for the feed item row. Can be default, searched & error
+     */
+    state: {
+      type: String,
+      default: Ue,
+      validator: (e) => Object.keys(Ge).includes(e)
     }
-    // TODO: implement as part of DT-1157
-    // state: {
-    //   type: String,
-    //   default: 'normal',
-    // },
   },
   emits: [
     /**
@@ -10410,6 +10454,11 @@ const Cr = {
      */
     "focus"
   ],
+  data() {
+    return {
+      faded: !1
+    };
+  },
   computed: {
     avatarInitials() {
       return (this.displayName || "").split(" ").map((t) => t.charAt(0)).join("").slice(0, 2).toUpperCase();
@@ -10421,6 +10470,19 @@ const Cr = {
         focusin: () => this.setFocus(!0),
         focusout: () => this.setFocus(!1)
       };
+    },
+    listItemClasses() {
+      return [
+        "d-w100p",
+        "d-box-border",
+        "d-ps-relative",
+        "d-px8",
+        { "d-bgc-secondary-opaque": this.isActive && this.state === Ue },
+        Ge[this.state],
+        "feed-item-row",
+        "d-t",
+        "d-tp-bgc"
+      ];
     }
   },
   methods: {
@@ -10429,29 +10491,32 @@ const Cr = {
     },
     setHover(e) {
       this.$emit("hover", e);
+    },
+    fade() {
+      this.state === Ue || this.faded === !0 || (this.$refs.FeedItemRef.$el.classList.remove(Ge[this.state]), this.faded = !0);
     }
   }
-}, Ir = ["src"], wr = {
+}, kr = ["src"], Or = {
   key: 0,
   "data-qa": "feed-item-row-header",
   class: "d-d-flex d-ai-center"
-}, kr = { class: "d-fs-200 d-lh-300 d-fw-bold d-to-ellipsis d-of-hidden d-ws-nowrap" }, Er = { class: "d-fs-100 d-mt2 d-lh-300 d-fc-tertiary d-fw-normal d-ml4 d-fl-shrink0" }, Or = {
+}, Lr = { class: "d-fs-200 d-lh-300 d-fw-bold d-to-ellipsis d-of-hidden d-ws-nowrap" }, Tr = { class: "d-fs-100 d-mt2 d-lh-300 d-fc-tertiary d-fw-normal d-ml4 d-fl-shrink0" }, Ar = {
   class: "content-text-wrapper-class",
   "data-qa": "feed-item-row-content"
-}, Lr = {
+}, Dr = {
   class: "d-d-flex d-fw-wrap",
   "data-qa": "feed-item-row-reactions"
-}, Tr = {
+}, Pr = {
   "data-qa": "feed-item-row-menu",
   class: "d-ps-absolute d-tn16 d-r12"
 };
-function Ar(e, s, t, o, n, i) {
+function xr(e, s, t, o, n, i) {
   const r = f("dt-avatar"), h = f("dt-lazy-show"), u = f("dt-list-item");
   return a(), S(u, C({
     ref: "FeedItemRef",
     "navigation-type": "none"
   }, e.$attrs, {
-    class: ["d-w100p", "d-box-border", "d-ps-relative", "d-px8", { "d-bgc-secondary-opaque": t.isActive }],
+    class: i.listItemClasses,
     "data-qa": "feed-item-row"
   }, M(i.feedListeners)), {
     left: c(() => [
@@ -10466,7 +10531,7 @@ function Ar(e, s, t, o, n, i) {
             "data-qa": "feed-item-row-avatar-img",
             alt: "",
             src: t.avatarImageUrl
-          }, null, 8, Ir)) : p("", !0)
+          }, null, 8, kr)) : p("", !0)
         ]),
         _: 1
       }, 8, ["initials"])) : p("", !0),
@@ -10479,13 +10544,13 @@ function Ar(e, s, t, o, n, i) {
       ])
     ]),
     bottom: c(() => [
-      _("div", Lr, [
+      _("div", Dr, [
         d(e.$slots, "reactions")
       ]),
       d(e.$slots, "threading")
     ]),
     right: c(() => [
-      Se(_("div", Tr, [
+      Se(_("div", Pr, [
         m(h, {
           appear: !0,
           transition: "fade",
@@ -10502,11 +10567,11 @@ function Ar(e, s, t, o, n, i) {
     ]),
     default: c(() => [
       _("article", null, [
-        t.showHeader ? (a(), l("div", wr, [
-          _("p", kr, I(t.displayName), 1),
-          _("time", Er, I(t.time), 1)
+        t.showHeader ? (a(), l("div", Or, [
+          _("p", Lr, I(t.displayName), 1),
+          _("time", Tr, I(t.time), 1)
         ])) : p("", !0),
-        _("span", Or, [
+        _("span", Ar, [
           d(e.$slots, "default")
         ])
       ])
@@ -10514,7 +10579,7 @@ function Ar(e, s, t, o, n, i) {
     _: 3
   }, 16, ["class"]);
 }
-const Od = /* @__PURE__ */ v(Cr, [["render", Ar]]), Dr = {
+const Ad = /* @__PURE__ */ v(Er, [["render", xr]]), Rr = {
   name: "DtRecipeTimePill",
   props: {
     /**
@@ -10537,23 +10602,23 @@ const Od = /* @__PURE__ */ v(Cr, [["render", Ar]]), Dr = {
       }
     }
   }
-}, Pr = ["dateTime"];
-function xr(e, s, t, o, n, i) {
+}, Br = ["dateTime"];
+function $r(e, s, t, o, n, i) {
   return a(), l("time", {
     "data-qa": "dt-time-pill",
     dateTime: t.dateTime,
     class: "d-ba d-bar-pill d-baw1 d-bc-black-300 d-px16 d-py4 d-fs-100"
-  }, I(t.dateTimeDisplay), 9, Pr);
+  }, I(t.dateTimeDisplay), 9, Br);
 }
-const Ld = /* @__PURE__ */ v(Dr, [["render", xr]]), Rr = [
+const Dd = /* @__PURE__ */ v(Rr, [["render", $r]]), Nr = [
   "emojiUnicodeOrShortname",
   "isSelected",
   "ariaLabel",
   "tooltip",
   "num"
-], Br = {
+], zr = {
   name: "DtRecipeEmojiRow",
-  components: { DtTooltip: Qe, DtButton: K, DtEmoji: Vs, DtEmojiTextWrapper: Xe },
+  components: { DtTooltip: Je, DtButton: K, DtEmoji: Ks, DtEmojiTextWrapper: et },
   mixins: [],
   props: {
     /**
@@ -10564,7 +10629,7 @@ const Ld = /* @__PURE__ */ v(Dr, [["render", xr]]), Rr = [
       default: () => [],
       validator: (e) => {
         for (const s of e)
-          if (!Rr.every((o) => s[o] !== void 0))
+          if (!Nr.every((o) => s[o] !== void 0))
             return !1;
         return !0;
       }
@@ -10585,10 +10650,10 @@ const Ld = /* @__PURE__ */ v(Dr, [["render", xr]]), Rr = [
       });
     }
   }
-}, $r = { class: "d-d-flex d-fw-wrap" }, Nr = ["reaction"], zr = { "aria-hidden": "true" }, Mr = { class: "d-mr4" }, Hr = { class: "d-fw-bold d-fs-100" };
-function Vr(e, s, t, o, n, i) {
+}, Mr = { class: "d-d-flex d-fw-wrap" }, Hr = ["reaction"], Fr = { "aria-hidden": "true" }, Vr = { class: "d-mr4" }, qr = { class: "d-fw-bold d-fs-100" };
+function Kr(e, s, t, o, n, i) {
   const r = f("dt-emoji-text-wrapper"), h = f("dt-emoji"), u = f("dt-button"), g = f("dt-tooltip");
-  return a(), l("span", $r, [
+  return a(), l("span", Mr, [
     (a(!0), l(Y, null, ee(t.reactions, (w) => (a(), l("span", {
       key: w.unicodeOutput,
       reaction: w,
@@ -10614,19 +10679,19 @@ function Vr(e, s, t, o, n, i) {
             onClick: (L) => i.emojiClicked(w)
           }, {
             default: c(() => [
-              _("span", Mr, [
+              _("span", Vr, [
                 m(h, {
                   size: "200",
                   code: w.emojiUnicodeOrShortname
                 }, null, 8, ["code"])
               ]),
-              _("span", Hr, I(w.num), 1)
+              _("span", qr, I(w.num), 1)
             ]),
             _: 2
           }, 1032, ["class", "aria-label", "attrs", "onClick"])
         ]),
         default: c(() => [
-          _("span", zr, [
+          _("span", Fr, [
             m(r, { size: "200" }, {
               default: c(() => [
                 P(I(w.tooltip), 1)
@@ -10637,159 +10702,159 @@ function Vr(e, s, t, o, n, i) {
         ]),
         _: 2
       }, 1032, ["onShown"])
-    ], 8, Nr))), 128))
+    ], 8, Hr))), 128))
   ]);
 }
-const Td = /* @__PURE__ */ v(Br, [["render", Vr]]);
+const Pd = /* @__PURE__ */ v(zr, [["render", Kr]]);
 export {
-  Zs as AVATAR_COLORS,
-  Tt as AVATAR_GROUP_VALIDATOR,
-  Kr as AVATAR_ICON_SIZES,
-  Ot as AVATAR_KIND_MODIFIERS,
-  Ws as AVATAR_PRESENCE_SIZE_MODIFIERS,
-  Lt as AVATAR_PRESENCE_STATES,
+  Xs as AVATAR_COLORS,
+  Pt as AVATAR_GROUP_VALIDATOR,
+  Ur as AVATAR_ICON_SIZES,
+  At as AVATAR_KIND_MODIFIERS,
+  Qs as AVATAR_PRESENCE_SIZE_MODIFIERS,
+  Dt as AVATAR_PRESENCE_STATES,
   Ke as AVATAR_SIZE_MODIFIERS,
-  Pt as BADGE_DECORATION_MODIFIERS,
-  Dt as BADGE_KIND_MODIFIERS,
-  At as BADGE_TYPE_MODIFIERS,
-  Ti as BREADCRUMBS_INVERTED_MODIFIER,
-  Li as BREADCRUMB_ITEM_SELECTED_MODIFIER,
-  xt as BUTTON_GROUP_ALIGNMENT,
-  ds as CALLBAR_BUTTON_VALID_WIDTH_SIZE,
-  Mt as CHIP_SIZE_MODIFIERS,
-  _l as COLOR_CODES,
-  Pd as DEFAULT_VALIDATION_MESSAGE_TYPE,
-  xd as DESCRIPTION_SIZE_TYPES,
-  Je as DtAvatar,
-  li as DtBadge,
-  jr as DtBanner,
-  Bi as DtBreadcrumbItem,
-  Gr as DtBreadcrumbs,
+  Bt as BADGE_DECORATION_MODIFIERS,
+  Rt as BADGE_KIND_MODIFIERS,
+  xt as BADGE_TYPE_MODIFIERS,
+  Pi as BREADCRUMBS_INVERTED_MODIFIER,
+  Di as BREADCRUMB_ITEM_SELECTED_MODIFIER,
+  $t as BUTTON_GROUP_ALIGNMENT,
+  hs as CALLBAR_BUTTON_VALID_WIDTH_SIZE,
+  Vt as CHIP_SIZE_MODIFIERS,
+  vl as COLOR_CODES,
+  Bd as DEFAULT_VALIDATION_MESSAGE_TYPE,
+  $d as DESCRIPTION_SIZE_TYPES,
+  st as DtAvatar,
+  ci as DtBadge,
+  Wr as DtBanner,
+  zi as DtBreadcrumbItem,
+  Zr as DtBreadcrumbs,
   K as DtButton,
-  Ur as DtButtonGroup,
-  qi as DtCard,
-  Yt as DtCheckableInputMixin,
-  od as DtCheckbox,
-  ld as DtCheckboxGroup,
-  as as DtChip,
-  Wr as DtCodeblock,
-  Zr as DtCollapsible,
-  mn as DtCombobox,
-  Nn as DtDropdown,
-  Yr as DtDropdownSeparator,
-  Qt as DtGroupableInputMixin,
+  Yr as DtButtonGroup,
+  Gi as DtCard,
+  Jt as DtCheckableInputMixin,
+  dd as DtCheckbox,
+  cd as DtCheckboxGroup,
+  rs as DtChip,
+  Qr as DtCodeblock,
+  Xr as DtCollapsible,
+  bn as DtCombobox,
+  Hn as DtDropdown,
+  Jr as DtDropdownSeparator,
+  es as DtGroupableInputMixin,
   x as DtIcon,
-  Qr as DtImageViewer,
-  Hs as DtInput,
-  ns as DtInputGroup,
-  Un as DtInputGroupMixin,
-  Zt as DtInputMixin,
-  Jt as DtKeyboardListNavigationMixin,
-  hd as DtKeyboardShortcut,
+  ed as DtImageViewer,
+  qs as DtInput,
+  ls as DtInputGroup,
+  Yn as DtInputGroupMixin,
+  Xt as DtInputMixin,
+  ss as DtKeyboardListNavigationMixin,
+  md as DtKeyboardShortcut,
   $e as DtLazyShow,
-  Pi as DtLink,
+  Bi as DtLink,
   ze as DtListItem,
-  td as DtListItemGroup,
-  ed as DtListSection,
-  Jr as DtModal,
-  Xr as DtNotice,
-  sd as DtPagination,
-  it as DtPopover,
-  Us as DtPresence,
-  id as DtRadio,
-  nd as DtRadioGroup,
-  tl as DtRecipeCallbarButton,
-  _d as DtRecipeCallbarButtonWithPopover,
-  gd as DtRecipeComboboxMultiSelect,
-  Fo as DtRecipeComboboxWithPopover,
-  bd as DtRecipeContactInfo,
-  kd as DtRecipeContactRow,
-  Td as DtRecipeEmojiRow,
-  Od as DtRecipeFeedItemRow,
-  cs as DtRecipeGeneralRow,
-  wd as DtRecipeGroupRow,
-  Cd as DtRecipeGroupedChip,
-  Sd as DtRecipeIvrNode,
-  Id as DtRecipeSettingsMenuButton,
-  Ld as DtRecipeTimePill,
-  yd as DtRecipeTopBannerInfo,
-  Ed as DtRecipeUnreadPill,
-  fd as DtRootLayout,
-  md as DtScroller,
-  rd as DtSelectMenu,
-  xs as DtSkeleton,
-  Rd as DtSkeletonListItem,
-  Bd as DtSkeletonParagraph,
-  $d as DtSkeletonShape,
-  Nd as DtSkeletonText,
-  pd as DtStack,
-  zd as DtTab,
-  Md as DtTabGroup,
-  ad as DtTabPanel,
-  dd as DtToast,
-  cd as DtToggle,
-  Qe as DtTooltip,
+  nd as DtListItemGroup,
+  id as DtListSection,
+  sd as DtModal,
+  td as DtNotice,
+  ad as DtPagination,
+  ot as DtPopover,
+  Ys as DtPresence,
+  od as DtRadio,
+  ld as DtRadioGroup,
+  nl as DtRecipeCallbarButton,
+  vd as DtRecipeCallbarButtonWithPopover,
+  yd as DtRecipeComboboxMultiSelect,
+  jo as DtRecipeComboboxWithPopover,
+  Sd as DtRecipeContactInfo,
+  Ld as DtRecipeContactRow,
+  Pd as DtRecipeEmojiRow,
+  Ad as DtRecipeFeedItemRow,
+  fs as DtRecipeGeneralRow,
+  Od as DtRecipeGroupRow,
+  Ed as DtRecipeGroupedChip,
+  wd as DtRecipeIvrNode,
+  kd as DtRecipeSettingsMenuButton,
+  Dd as DtRecipeTimePill,
+  Cd as DtRecipeTopBannerInfo,
+  Td as DtRecipeUnreadPill,
+  gd as DtRootLayout,
+  bd as DtScroller,
+  ud as DtSelectMenu,
+  $s as DtSkeleton,
+  Nd as DtSkeletonListItem,
+  zd as DtSkeletonParagraph,
+  Md as DtSkeletonShape,
+  Hd as DtSkeletonText,
+  _d as DtStack,
+  Fd as DtTab,
+  Vd as DtTabGroup,
+  rd as DtTabPanel,
+  hd as DtToast,
+  fd as DtToggle,
+  Je as DtTooltip,
   me as DtValidationMessages,
-  Hd as ICON_SIZE_MODIFIERS,
-  Vd as INPUT_SIZES,
-  Fd as INPUT_TYPES,
-  dt as IVR_NODE_BRANCH,
-  rt as IVR_NODE_EXPERT,
+  qd as ICON_SIZE_MODIFIERS,
+  Kd as INPUT_SIZES,
+  jd as INPUT_TYPES,
+  ht as IVR_NODE_BRANCH,
+  ut as IVR_NODE_EXPERT,
   He as IVR_NODE_GO_TO,
-  ut as IVR_NODE_HANGUP,
-  Il as IVR_NODE_ICON_TYPES,
-  vd as IVR_NODE_LABELS,
-  ot as IVR_NODE_PROMPT_COLLECT,
-  at as IVR_NODE_PROMPT_MENU,
-  lt as IVR_NODE_PROMPT_PLAY,
-  ct as IVR_NODE_TRANSFER,
+  pt as IVR_NODE_HANGUP,
+  kl as IVR_NODE_ICON_TYPES,
+  Id as IVR_NODE_LABELS,
+  dt as IVR_NODE_PROMPT_COLLECT,
+  rt as IVR_NODE_PROMPT_MENU,
+  ct as IVR_NODE_PROMPT_PLAY,
+  ft as IVR_NODE_TRANSFER,
   Be as LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,
-  Hl as LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,
-  Ml as LEFTBAR_GENERAL_ROW_ICON_MAPPING,
-  Vl as LEFTBAR_GENERAL_ROW_ICON_SIZES,
+  ql as LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,
+  Vl as LEFTBAR_GENERAL_ROW_ICON_MAPPING,
+  Kl as LEFTBAR_GENERAL_ROW_ICON_SIZES,
   z as LEFTBAR_GENERAL_ROW_TYPES,
-  As as LINK_KIND_MODIFIERS,
-  Ts as LINK_VARIANTS,
-  $t as MODAL_KIND_MODIFIERS,
-  Nt as MODAL_SIZE_MODIFIERS,
-  qo as MULTI_SELECT_SIZES,
+  xs as LINK_KIND_MODIFIERS,
+  Ps as LINK_VARIANTS,
+  Mt as MODAL_KIND_MODIFIERS,
+  Ht as MODAL_SIZE_MODIFIERS,
+  Go as MULTI_SELECT_SIZES,
   Oe as NOTICE_KINDS,
-  is as POPOVER_CONTENT_WIDTHS,
-  In as POPOVER_HEADER_FOOTER_PADDING_CLASSES,
-  kn as POPOVER_INITIAL_FOCUS_STRINGS,
-  Bt as POPOVER_PADDING_CLASSES,
-  wn as POPOVER_ROLES,
+  os as POPOVER_CONTENT_WIDTHS,
+  kn as POPOVER_HEADER_FOOTER_PADDING_CLASSES,
+  Ln as POPOVER_INITIAL_FOCUS_STRINGS,
+  zt as POPOVER_PADDING_CLASSES,
+  On as POPOVER_ROLES,
   be as PRESENCE_STATES,
-  Fs as PRESENCE_STATES_LIST,
-  Rr as REACTIONS_ATTRIBUTES,
-  yo as ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS,
-  os as ROOT_LAYOUT_SIDEBAR_POSITIONS,
-  Ht as SELECT_SIZE_MODIFIERS,
-  Ka as SELECT_STATE_MODIFIERS,
-  ud as SHORTCUTS_ALIASES_LIST,
+  js as PRESENCE_STATES_LIST,
+  Nr as REACTIONS_ATTRIBUTES,
+  Co as ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS,
+  ds as ROOT_LAYOUT_SIDEBAR_POSITIONS,
+  qt as SELECT_SIZE_MODIFIERS,
+  Ua as SELECT_STATE_MODIFIERS,
+  pd as SHORTCUTS_ALIASES_LIST,
   ye as SHORTCUTS_ICON_ALIASES,
-  po as SHORTCUTS_ICON_SEPARATOR,
-  qd as SKELETON_HEADING_HEIGHTS,
-  Kd as SKELETON_RIPPLE_DURATION,
-  jd as SKELETON_SHAPES,
-  Gd as SKELETON_SHAPE_SIZES,
-  Ud as SKELETON_TEXT_TYPES,
-  Wd as TAB_IMPORTANCE_MODIFIERS,
-  Zd as TAB_LIST_IMPORTANCE_MODIFIERS,
-  Yd as TAB_LIST_KIND_MODIFIERS,
-  Qd as TAB_LIST_SIZES,
-  to as TOAST_ROLES,
-  Xd as TOOLTIP_DELAY_MS,
-  Jd as TOOLTIP_DIRECTIONS,
-  ec as TOOLTIP_HIDE_ON_CLICK_VARIANTS,
-  tc as TOOLTIP_KIND_MODIFIERS,
-  sc as TOOLTIP_STICKY_VALUES,
-  _r as UNREAD_PILL_DIRECTIONS,
-  br as UNREAD_PILL_KINDS,
-  ic as VALIDATION_MESSAGE_TYPES,
-  nc as filterFormattedMessages,
-  Et as formatMessages,
+  _o as SHORTCUTS_ICON_SEPARATOR,
+  Gd as SKELETON_HEADING_HEIGHTS,
+  Ud as SKELETON_RIPPLE_DURATION,
+  Wd as SKELETON_SHAPES,
+  Zd as SKELETON_SHAPE_SIZES,
+  Yd as SKELETON_TEXT_TYPES,
+  Qd as TAB_IMPORTANCE_MODIFIERS,
+  Xd as TAB_LIST_IMPORTANCE_MODIFIERS,
+  Jd as TAB_LIST_KIND_MODIFIERS,
+  ec as TAB_LIST_SIZES,
+  no as TOAST_ROLES,
+  tc as TOOLTIP_DELAY_MS,
+  sc as TOOLTIP_DIRECTIONS,
+  ic as TOOLTIP_HIDE_ON_CLICK_VARIANTS,
+  nc as TOOLTIP_KIND_MODIFIERS,
+  ac as TOOLTIP_STICKY_VALUES,
+  vr as UNREAD_PILL_DIRECTIONS,
+  Sr as UNREAD_PILL_KINDS,
+  oc as VALIDATION_MESSAGE_TYPES,
+  lc as filterFormattedMessages,
+  Tt as formatMessages,
   q as getUniqueString,
-  Ge as getValidationState,
-  Wt as validationMessageValidator
+  We as getValidationState,
+  Qt as validationMessageValidator
 };