@dialpad/dialtone-vue 3.97.0 → 3.99.0

package/dist/{stack-q9VLdD1J.js → stack--ux25GPn.js}

@@ -1,17 +1,17 @@
-import { _ as y, g as R, a as Y, h as L, u as Z, b as X, B as J, c as Q, i as ee, d as te, e as se } from "./tooltip-H27s49LR.js";
-import { openBlock as a, createElementBlock as r, toDisplayString as I, createCommentVNode as d, createElementVNode as b, normalizeClass as f, resolveComponent as p, createBlock as u, resolveDynamicComponent as E, withCtx as h, mergeProps as A, renderSlot as l, createVNode as _, createTextVNode as oe, withKeys as S, withModifiers as P, toHandlers as K, createSlots as ne, renderList as ae, Teleport as ie } from "vue";
-import { w, I as le, L as re, A as de, B as F } from "./emoji-64scMQZS.js";
-const C = {
+import { _ as y, g as N, a as U, u as Y, b as $, B as Z, h as M, c as X, i as J, d as Q, e as ee, f as x } from "./tooltip-Cr_G7ib3.js";
+import { openBlock as n, createElementBlock as l, toDisplayString as O, createCommentVNode as d, createElementVNode as _, normalizeClass as u, resolveComponent as m, createBlock as h, resolveDynamicComponent as E, withCtx as p, mergeProps as T, renderSlot as c, withKeys as b, withModifiers as I, createVNode as A, toHandlers as j, createSlots as te, renderList as se, Teleport as oe } from "vue";
+import { w as P, I as ae, L as ne, A as ie, B as K } from "./emoji-ZUS2Xysh.js";
+const S = {
   BUSY: "busy",
   AWAY: "away",
   OFFLINE: "offline",
   ACTIVE: "active"
-}, ce = [
-  C.BUSY,
-  C.AWAY,
-  C.OFFLINE,
-  C.ACTIVE
-], ue = {
+}, re = [
+  S.BUSY,
+  S.AWAY,
+  S.OFFLINE,
+  S.ACTIVE
+], le = {
   name: "DtPresence",
   props: {
     /**
@@ -21,8 +21,8 @@ const C = {
      */
     presence: {
       type: String,
-      default: C.ACTIVE,
-      validator: (e) => ce.includes(e)
+      default: S.ACTIVE,
+      validator: (e) => re.includes(e)
     },
     /**
      * Since Presence is a visual element, we need SRs to read out any state changes
@@ -34,55 +34,55 @@ const C = {
       default: null
     }
   }
-}, he = ["aria-live"], pe = {
+}, de = ["aria-live"], ce = {
   key: 0,
   "data-qa": "dt-presence-sr-text",
   class: "sr-only"
 };
-function fe(e, s, t, i, n, o) {
-  return a(), r("div", {
+function ue(e, t, s, i, a, o) {
+  return n(), l("div", {
     class: "d-presence",
     "data-qa": "dt-presence",
     role: "status",
     "aria-live": e.$attrs.ariaLive || "off"
   }, [
-    t.srText ? (a(), r("span", pe, I(t.srText), 1)) : d("", !0),
-    b("div", {
-      class: f(["d-presence__inner", {
-        "d-presence__inner--active": t.presence === "active",
-        "d-presence__inner--away": t.presence === "away",
-        "d-presence__inner--busy": t.presence === "busy",
-        "d-presence__inner--offline": t.presence === "offline"
+    s.srText ? (n(), l("span", ce, O(s.srText), 1)) : d("", !0),
+    _("div", {
+      class: u(["d-presence__inner", {
+        "d-presence__inner--active": s.presence === "active",
+        "d-presence__inner--away": s.presence === "away",
+        "d-presence__inner--busy": s.presence === "busy",
+        "d-presence__inner--offline": s.presence === "offline"
       }])
     }, null, 2)
-  ], 8, he);
+  ], 8, de);
 }
-const me = /* @__PURE__ */ y(ue, [["render", fe]]), N = {
+const he = /* @__PURE__ */ y(le, [["render", ue]]), L = {
   xs: "d-avatar--xs",
   sm: "d-avatar--sm",
   md: "d-avatar--md",
   lg: "d-avatar--lg",
   xl: "d-avatar--xl"
-}, ye = {
+}, pe = {
   default: "",
   icon: "d-avatar__icon",
   initials: "d-avatar__initials"
-}, ge = {
+}, fe = {
   md: "d-avatar__presence--md",
   lg: "d-avatar__presence--lg"
-}, z = {
+}, F = {
   NONE: "",
   BUSY: "busy",
   AWAY: "away",
   OFFLINE: "offline",
   ACTIVE: "active"
-}, ve = {
+}, me = {
   xs: "100",
   sm: "200",
   md: "300",
   lg: "500",
   xl: "600"
-}, _e = [
+}, ye = [
   "100",
   "200",
   "300",
@@ -101,10 +101,11 @@ const me = /* @__PURE__ */ y(ue, [["render", fe]]), N = {
   "1600",
   "1700",
   "1800"
-], H = (e) => e > 1, be = [
+], z = (e) => e > 1, ge = [
   "accessibility",
   "activity",
   "add-task",
+  "agent-assist",
   "ai-notes",
   "airplay",
   "airtable",
@@ -635,17 +636,17 @@ const me = /* @__PURE__ */ y(ue, [["render", fe]]), N = {
   "zoom-logo",
   "zoom-out"
 ];
-function ke() {
-  return [void 0, ...be];
+function ve() {
+  return [void 0, ...ge];
 }
-const Se = (e) => {
+const be = (e) => {
   if (typeof e != "string" || !e.trim())
     return "";
-  const s = e.trim().split(/\s+/g);
-  return s.length === 1 ? s.join("").substring(0, 2) : s.filter((t, i) => i === 0 || i === s.length - 1).map((t) => t.slice(0, 1).toUpperCase()).join("");
-}, Ee = ke(), we = {
+  const t = e.trim().split(/\s+/g);
+  return t.length === 1 ? t.join("").substring(0, 2) : t.filter((s, i) => i === 0 || i === t.length - 1).map((s) => s.slice(0, 1).toUpperCase()).join("");
+}, _e = ve(), Ee = {
   name: "DtAvatar",
-  components: { DtPresence: me, DtIcon: w },
+  components: { DtPresence: he, DtIcon: P },
   inheritAttrs: !1,
   props: {
     /**
@@ -654,7 +655,7 @@ const Se = (e) => {
     id: {
       type: String,
       default() {
-        return R();
+        return N();
       }
     },
     /**
@@ -680,7 +681,7 @@ const Se = (e) => {
     size: {
       type: String,
       default: "md",
-      validator: (e) => Object.keys(N).includes(e)
+      validator: (e) => Object.keys(L).includes(e)
     },
     /**
      * Used to customize the avatar container
@@ -711,8 +712,8 @@ const Se = (e) => {
      */
     presence: {
       type: String,
-      default: z.NONE,
-      validator: (e) => Object.values(z).includes(e)
+      default: F.NONE,
+      validator: (e) => Object.values(F).includes(e)
     },
     /**
      * A set of props to be passed into the presence component.
@@ -729,7 +730,7 @@ const Se = (e) => {
     group: {
       type: Number,
       default: void 0,
-      validator: (e) => H(e)
+      validator: (e) => z(e)
     },
     /**
      * The icon that overlays the avatar
@@ -773,7 +774,7 @@ const Se = (e) => {
     iconName: {
       type: String,
       default: void 0,
-      validator: (e) => Ee.includes(e)
+      validator: (e) => _e.includes(e)
     },
     /**
      * Icon size to be displayed on the avatar
@@ -782,7 +783,7 @@ const Se = (e) => {
     iconSize: {
       type: String,
       default: "",
-      validator: (e) => !e || Object.keys(le).includes(e)
+      validator: (e) => !e || Object.keys(ae).includes(e)
     },
     /**
      * Full name used to extract initials and set alt attribute.
@@ -811,10 +812,10 @@ const Se = (e) => {
   ],
   data() {
     return {
-      AVATAR_SIZE_MODIFIERS: N,
-      AVATAR_KIND_MODIFIERS: ye,
-      AVATAR_PRESENCE_SIZE_MODIFIERS: ge,
-      AVATAR_ICON_SIZES: ve,
+      AVATAR_SIZE_MODIFIERS: L,
+      AVATAR_KIND_MODIFIERS: pe,
+      AVATAR_PRESENCE_SIZE_MODIFIERS: fe,
+      AVATAR_ICON_SIZES: me,
       imageLoadedSuccessfully: null,
       formattedInitials: "",
       initializing: !1
@@ -827,7 +828,7 @@ const Se = (e) => {
     avatarClasses() {
       return [
         "d-avatar",
-        N[this.validatedSize],
+        L[this.validatedSize],
         this.avatarClass,
         {
           "d-avatar--group": this.showGroup,
@@ -843,7 +844,7 @@ const Se = (e) => {
       ];
     },
     showGroup() {
-      return H(this.group);
+      return z(this.group);
     },
     formattedGroup() {
       return this.group > 99 ? "99+" : this.group;
@@ -880,11 +881,11 @@ const Se = (e) => {
       e && (e.addEventListener("load", () => this._loadedImageEventHandler(e), { once: !0 }), e.addEventListener("error", () => this._erroredImageEventHandler(e), { once: !0 }));
     },
     formatInitials(e) {
-      const s = Se(e);
-      this.validatedSize === "xs" ? this.formattedInitials = "" : this.validatedSize === "sm" ? this.formattedInitials = s[0] : this.formattedInitials = s;
+      const t = be(e);
+      this.validatedSize === "xs" ? this.formattedInitials = "" : this.validatedSize === "sm" ? this.formattedInitials = t[0] : this.formattedInitials = t;
     },
     getColor() {
-      return this.color ?? Y(_e, this.seed);
+      return this.color ?? U(ye, this.seed);
     },
     _loadedImageEventHandler(e) {
       this.imageLoadedSuccessfully = !0, e.classList.remove("d-d-none");
@@ -900,181 +901,74 @@ const Se = (e) => {
       this.clickable && this.$emit("click", e);
     }
   }
-}, Ce = ["src", "alt"], Ie = {
+}, ke = ["src", "alt"], Se = {
   key: 1,
   class: "d-avatar__overlay-text"
-}, Oe = {
+}, we = {
   key: 1,
   class: "d-avatar__count",
   "data-qa": "dt-avatar-count"
 };
-function Ae(e, s, t, i, n, o) {
-  const c = p("dt-icon"), g = p("dt-presence");
-  return a(), u(E(t.clickable ? "button" : "div"), {
-    id: t.id,
-    class: f(o.avatarClasses),
+function Ce(e, t, s, i, a, o) {
+  const f = m("dt-icon"), g = m("dt-presence");
+  return n(), h(E(s.clickable ? "button" : "div"), {
+    id: s.id,
+    class: u(o.avatarClasses),
     "data-qa": "dt-avatar",
     "aria-label": o.buttonAriaLabel,
     onClick: o.handleClick
   }, {
-    default: h(() => [
-      b("div", {
+    default: p(() => [
+      _("div", {
         ref: "canvas",
-        class: f([
-          t.canvasClass,
+        class: u([
+          s.canvasClass,
           "d-avatar__canvas",
-          { "d-avatar--image-loaded": n.imageLoadedSuccessfully }
+          { "d-avatar--image-loaded": a.imageLoadedSuccessfully }
         ])
       }, [
-        o.showImage ? (a(), r("img", {
+        o.showImage ? (n(), l("img", {
           key: 0,
           ref: "avatarImage",
           class: "d-avatar__image",
           "data-qa": "dt-avatar-image",
-          src: t.imageSrc,
-          alt: t.imageAlt || t.fullName
-        }, null, 8, Ce)) : t.iconName ? (a(), u(c, {
+          src: s.imageSrc,
+          alt: s.imageAlt || s.fullName
+        }, null, 8, ke)) : s.iconName ? (n(), h(f, {
           key: 1,
-          name: t.iconName,
-          size: t.iconSize || n.AVATAR_ICON_SIZES[t.size],
-          class: f([t.iconClass, n.AVATAR_KIND_MODIFIERS.icon]),
+          name: s.iconName,
+          size: s.iconSize || a.AVATAR_ICON_SIZES[s.size],
+          class: u([s.iconClass, a.AVATAR_KIND_MODIFIERS.icon]),
           "data-qa": "dt-avatar-icon"
-        }, null, 8, ["name", "size", "class"])) : (a(), r("span", {
+        }, null, 8, ["name", "size", "class"])) : (n(), l("span", {
           key: 2,
-          class: f([n.AVATAR_KIND_MODIFIERS.initials])
-        }, I(n.formattedInitials), 3))
+          class: u([a.AVATAR_KIND_MODIFIERS.initials])
+        }, O(a.formattedInitials), 3))
       ], 2),
-      t.overlayIcon || t.overlayText ? (a(), r("div", {
+      s.overlayIcon || s.overlayText ? (n(), l("div", {
         key: 0,
-        class: f(o.overlayClasses)
+        class: u(o.overlayClasses)
       }, [
-        t.overlayIcon ? (a(), u(c, {
+        s.overlayIcon ? (n(), h(f, {
           key: 0,
           class: "d-avatar__overlay-icon",
-          name: t.overlayIcon
-        }, null, 8, ["name"])) : t.overlayText ? (a(), r("p", Ie, I(t.overlayText), 1)) : d("", !0)
+          name: s.overlayIcon
+        }, null, 8, ["name"])) : s.overlayText ? (n(), l("p", Se, O(s.overlayText), 1)) : d("", !0)
       ], 2)) : d("", !0),
-      o.showGroup ? (a(), r("span", Oe, I(o.formattedGroup), 1)) : d("", !0),
-      t.presence && !o.showGroup ? (a(), u(g, A({
+      o.showGroup ? (n(), l("span", we, O(o.formattedGroup), 1)) : d("", !0),
+      s.presence && !o.showGroup ? (n(), h(g, T({
         key: 2,
-        presence: t.presence,
+        presence: s.presence,
         class: [
           "d-avatar__presence",
-          n.AVATAR_PRESENCE_SIZE_MODIFIERS[t.size]
+          a.AVATAR_PRESENCE_SIZE_MODIFIERS[s.size]
         ]
-      }, t.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : d("", !0)
+      }, s.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : d("", !0)
     ]),
     _: 1
   }, 8, ["id", "class", "aria-label", "onClick"]);
 }
-const Rt = /* @__PURE__ */ y(we, [["render", Ae]]), M = ["base", "error", "info", "success", "warning"], Te = ["alert", "alertdialog", "status"], Pe = /* @__PURE__ */ new Map([
-  ["info", "info"],
-  ["success", "check-circle"],
-  ["warning", "alert-triangle"],
-  ["error", "alert-circle"],
-  ["base", "bell"]
-]), Le = {
-  name: "DtNoticeIcon",
-  components: {
-    DtIcon: w
-  },
-  props: {
-    /**
-     * Kind of icon
-     * @values base, error, info, success, warning
-     */
-    kind: {
-      type: String,
-      default: "base",
-      validate(e) {
-        return M.includes(e);
-      }
-    }
-  },
-  data() {
-    return {
-      hasSlotContent: L
-    };
-  },
-  computed: {
-    defaultIcon() {
-      return Pe.get(this.kind);
-    }
-  }
-}, Ne = {
-  key: 0,
-  "aria-hidden": "true",
-  class: "d-notice__icon"
-};
-function De(e, s, t, i, n, o) {
-  const c = p("dt-icon");
-  return o.defaultIcon || n.hasSlotContent(e.$slots.default) ? (a(), r("div", Ne, [
-    l(e.$slots, "default", {}, () => [
-      _(c, {
-        name: o.defaultIcon,
-        size: "400"
-      }, null, 8, ["name"])
-    ])
-  ])) : d("", !0);
-}
-const Re = /* @__PURE__ */ y(Le, [["render", De]]), Fe = {
-  name: "DtNoticeContent",
-  props: {
-    /**
-     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
-     */
-    title: {
-      type: String,
-      default: ""
-    },
-    /**
-     * ID for the title element of the component. Useful for aria-describedby
-     * or aria-labelledby or any other reason you may need an id to refer to the title.
-     */
-    titleId: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * ID for the content element of the component. Useful for aria-describedby
-     * or aria-labelledby or any other reason you may need an id to refer to the content.
-     */
-    contentId: {
-      type: String,
-      default: void 0
-    }
-  },
-  data() {
-    return {
-      hasSlotContent: L
-    };
-  }
-}, Be = {
-  class: "d-notice__content",
-  "data-qa": "notice-content"
-}, xe = ["id"], ze = ["id"];
-function He(e, s, t, i, n, o) {
-  return a(), r("div", Be, [
-    t.title || n.hasSlotContent(e.$slots.titleOverride) ? (a(), r("p", {
-      key: 0,
-      id: t.titleId,
-      class: "d-notice__title",
-      "data-qa": "notice-content-title"
-    }, [
-      l(e.$slots, "titleOverride", {}, () => [
-        oe(I(t.title), 1)
-      ])
-    ], 8, xe)) : d("", !0),
-    b("p", {
-      id: t.contentId,
-      class: "d-notice__message",
-      "data-qa": "notice-content-message"
-    }, [
-      l(e.$slots, "default")
-    ], 8, ze)
-  ]);
-}
-const Ve = /* @__PURE__ */ y(Fe, [["render", He]]), qe = {
+const mt = /* @__PURE__ */ y(Ee, [["render", Ce]]), Oe = {
   name: "DtLink",
   props: {
     /**
@@ -1085,29 +979,29 @@ const Ve = /* @__PURE__ */ y(Fe, [["render", He]]), qe = {
       type: String,
       default: "",
       validator(e) {
-        return re.includes(e);
+        return ne.includes(e);
       }
     }
   },
   data() {
     return {
-      LINK_KIND_MODIFIERS: de
+      LINK_KIND_MODIFIERS: ie
     };
   }
-}, $e = ["href"];
-function je(e, s, t, i, n, o) {
-  return a(), r("a", {
-    class: f([
+}, Ie = ["href"];
+function Te(e, t, s, i, a, o) {
+  return n(), l("a", {
+    class: u([
       "d-link",
-      n.LINK_KIND_MODIFIERS[t.kind]
+      a.LINK_KIND_MODIFIERS[s.kind]
     ]),
     "data-qa": "dt-link",
     href: "href" in e.$attrs ? e.$attrs.href : "javascript:void(0)"
   }, [
-    l(e.$slots, "default")
-  ], 10, $e);
+    c(e.$slots, "default")
+  ], 10, Ie);
 }
-const Ft = /* @__PURE__ */ y(qe, [["render", je]]), B = {
+const yt = /* @__PURE__ */ y(Oe, [["render", Te]]), Ae = {
   props: {
     /**
      * If true, a hidden close button is included for screen readers
@@ -1146,11 +1040,11 @@ const Ft = /* @__PURE__ */ y(qe, [["render", je]]), B = {
            a visually hidden close button and you must set the visuallyHiddenCloseLabel prop.`);
     }
   }
-}, Ke = {
+}, Pe = {
   name: "SrOnlyCloseButton",
   components: {
-    DtIcon: w,
-    DtButton: F
+    DtIcon: P,
+    DtButton: K
   },
   props: {
     /**
@@ -1169,255 +1063,23 @@ const Ft = /* @__PURE__ */ y(qe, [["render", je]]), B = {
     }
   }
 };
-function Me(e, s, t, i, n, o) {
-  const c = p("dt-icon"), g = p("dt-button");
-  return a(), u(g, {
+function Le(e, t, s, i, a, o) {
+  const f = m("dt-icon"), g = m("dt-button");
+  return n(), h(g, {
     id: "sr-only-close-button",
     "data-qa": "dt-sr-only-close-button",
     class: "d-vi-visible-sr",
-    "aria-label": t.visuallyHiddenCloseLabel,
+    "aria-label": s.visuallyHiddenCloseLabel,
     onClick: o.close,
-    onKeydown: S(P(o.close, ["prevent", "stop"]), ["space"])
+    onKeydown: b(I(o.close, ["prevent", "stop"]), ["space"])
   }, {
-    default: h(() => [
-      _(c, { name: "close" })
+    default: p(() => [
+      A(f, { name: "close" })
     ]),
     _: 1
   }, 8, ["aria-label", "onClick", "onKeydown"]);
 }
-const G = /* @__PURE__ */ y(Ke, [["render", Me]]), Ge = {
-  name: "DtNoticeAction",
-  components: {
-    DtIcon: w,
-    DtButton: F,
-    SrOnlyCloseButton: G
-  },
-  mixins: [B],
-  props: {
-    /**
-     * Props for the notice close button.
-     */
-    closeButtonProps: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * Hides the close button from the notice
-     * @values true, false
-     */
-    hideClose: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    /**
-     * Close button click event
-     *
-     * @event close
-     */
-    "close"
-  ],
-  created() {
-    !this.hideClose && !this.closeButtonProps.ariaLabel && console.error("Invalid props: you must pass in closeButtonProps.ariaLabel if the close button is displayed.");
-  },
-  mounted() {
-    this.hideClose || (this.lastFocusedElement = document.activeElement);
-  },
-  beforeUnmount() {
-    var e;
-    (e = this.lastFocusedElement) == null || e.focus();
-  },
-  methods: {
-    close() {
-      this.$emit("close");
-    }
-  }
-}, We = {
-  class: "d-notice__actions",
-  "data-qa": "notice-content-actions"
-};
-function Ue(e, s, t, i, n, o) {
-  const c = p("dt-icon"), g = p("dt-button"), v = p("sr-only-close-button");
-  return a(), r("div", We, [
-    l(e.$slots, "default"),
-    t.hideClose ? d("", !0) : (a(), u(g, A({
-      key: 0,
-      ref: "closeButton",
-      "data-qa": "dt-notice-action-close-button",
-      size: "sm",
-      importance: "clear",
-      circle: "",
-      "aria-label": t.closeButtonProps.ariaLabel ? t.closeButtonProps.ariaLabel : "Close"
-    }, t.closeButtonProps, { onClick: o.close }), {
-      icon: h(() => [
-        _(c, {
-          name: "close",
-          size: "200"
-        })
-      ]),
-      _: 1
-    }, 16, ["aria-label", "onClick"])),
-    e.showVisuallyHiddenClose ? (a(), u(v, {
-      key: 1,
-      "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
-      onClose: o.close
-    }, null, 8, ["visually-hidden-close-label", "onClose"])) : d("", !0)
-  ]);
-}
-const Ye = /* @__PURE__ */ y(Ge, [["render", Ue]]), Ze = {
-  name: "DtNotice",
-  components: {
-    DtNoticeIcon: Re,
-    DtNoticeContent: Ve,
-    DtNoticeAction: Ye
-  },
-  mixins: [B],
-  props: {
-    /**
-     * Sets an ID on the title element of the component. Useful for aria-describedby
-     * or aria-labelledby or any other reason you may need an id to refer to the title.
-     */
-    titleId: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Sets an ID on the content element of the component. Useful for aria-describedby
-     * or aria-labelledby or any other reason you may need an id to refer to the content.
-     */
-    contentId: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
-     */
-    title: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an
-     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an
-     * important message that does contain interactive elements.
-     * @values alert, alertdialog, status
-     */
-    role: {
-      type: String,
-      default: "status",
-      validate(e) {
-        return Te.includes(e);
-      }
-    },
-    /**
-     * Used in scenarios where the message needs to visually dominate the screen.
-     * This will also change the aria role from status to alert.
-     * @values true, false
-     */
-    important: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Severity level of the notice, sets the icon and background
-     * @values base, error, info, success, warning
-     */
-    kind: {
-      type: String,
-      default: "base",
-      validate(e) {
-        return M.includes(e);
-      }
-    },
-    /**
-     * Props for the notice close button.
-     */
-    closeButtonProps: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * Hides the close button from the notice
-     * @values true, false
-     */
-    hideClose: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    /**
-     * Close button click event
-     *
-     * @event close
-     */
-    "close",
-    /**
-     * Native button click event
-     *
-     * @event click
-     * @type {PointerEvent | KeyboardEvent}
-     */
-    "click"
-  ],
-  computed: {
-    noticeClass() {
-      return [
-        "d-notice",
-        {
-          error: "d-notice--error",
-          info: "d-notice--info",
-          success: "d-notice--success",
-          warning: "d-notice--warning",
-          base: "d-notice--base"
-        }[this.kind],
-        { "d-notice--important": this.important }
-      ];
-    }
-  }
-};
-function Xe(e, s, t, i, n, o) {
-  const c = p("dt-notice-icon"), g = p("dt-notice-content"), v = p("dt-notice-action");
-  return a(), r("aside", {
-    class: f(o.noticeClass),
-    "data-qa": "notice"
-  }, [
-    _(c, { kind: t.kind }, {
-      default: h(() => [
-        l(e.$slots, "icon")
-      ]),
-      _: 3
-    }, 8, ["kind"]),
-    _(g, {
-      "title-id": t.titleId,
-      "content-id": t.contentId,
-      title: t.title,
-      role: t.role
-    }, {
-      titleOverride: h(() => [
-        l(e.$slots, "titleOverride")
-      ]),
-      default: h(() => [
-        l(e.$slots, "default")
-      ]),
-      _: 3
-    }, 8, ["title-id", "content-id", "title", "role"]),
-    _(v, {
-      "hide-close": t.hideClose,
-      "close-button-props": t.closeButtonProps,
-      "visually-hidden-close": e.visuallyHiddenClose,
-      "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
-      onClose: s[0] || (s[0] = (m) => e.$emit("close"))
-    }, {
-      default: h(() => [
-        l(e.$slots, "action")
-      ]),
-      _: 3
-    }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
-  ], 2);
-}
-const Bt = /* @__PURE__ */ y(Ze, [["render", Xe]]), W = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', Je = `${W}:not([tabindex="-1"])`, Qe = "button,[href],input,select,textarea,details,[tabindex]", et = {
+const De = /* @__PURE__ */ y(Pe, [["render", Le]]), W = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', Ne = `${W}:not([tabindex="-1"])`, Re = "button,[href],input,select,textarea,details,[tabindex]", xe = {
   methods: {
     /**
      * get the first focusable element in your component, includes tabindex="-1".
@@ -1426,8 +1088,8 @@ const Bt = /* @__PURE__ */ y(Ze, [["render", Xe]]), W = ':not(:disabled):not([ar
      */
     async getFirstFocusableElement(e) {
       await this.$nextTick();
-      const s = this._getFocusableElements(e, !0);
-      return this._getFirstFocusElement(s);
+      const t = this._getFocusableElements(e, !0);
+      return this._getFirstFocusElement(t);
     },
     /**
      * set focus to the first focusable element in your component, includes tabindex="-1".
@@ -1435,8 +1097,8 @@ const Bt = /* @__PURE__ */ y(Ze, [["render", Xe]]), W = ':not(:disabled):not([ar
      *  will default to the root node of the vue component
      */
     async focusFirstElement(e) {
-      const s = await this.getFirstFocusableElement(e);
-      s == null || s.focus({ preventScroll: !0 });
+      const t = await this.getFirstFocusableElement(e);
+      t == null || t.focus({ preventScroll: !0 });
     },
     /**
      * internal use only.
@@ -1448,8 +1110,8 @@ const Bt = /* @__PURE__ */ y(Ze, [["render", Xe]]), W = ':not(:disabled):not([ar
     _getFirstFocusElement(e) {
       if (!e.length)
         return;
-      let s = e[0];
-      return s.matches('[type="radio"]:not(:checked)') && (s = e.find((t) => t.checked && t.name === s.name) || s), s;
+      let t = e[0];
+      return t.matches('[type="radio"]:not(:checked)') && (t = e.find((s) => s.checked && s.name === t.name) || t), t;
     },
     /**
      * internal use only.
@@ -1460,10 +1122,10 @@ const Bt = /* @__PURE__ */ y(Ze, [["render", Xe]]), W = ':not(:disabled):not([ar
      * @param {object} el - the root dom element to find focusable elements in.
      * @param {bool} includeNegativeTabIndex - will include tabindex="-1" in the list of focusable elements.
      */
-    _getFocusableElements(e = this.$el, s = !1) {
-      return e ? [...e.querySelectorAll(Qe)].filter((i) => {
-        const n = window.getComputedStyle(i);
-        return n.getPropertyValue("display") !== "none" && n.getPropertyValue("visibility") !== "hidden" && i.matches(s ? W : Je);
+    _getFocusableElements(e = this.$el, t = !1) {
+      return e ? [...e.querySelectorAll(Re)].filter((i) => {
+        const a = window.getComputedStyle(i);
+        return a.getPropertyValue("display") !== "none" && a.getPropertyValue("visibility") !== "hidden" && i.matches(t ? W : Ne);
       }) : [];
     },
     /**
@@ -1472,26 +1134,26 @@ const Bt = /* @__PURE__ */ y(Ze, [["render", Xe]]), W = ':not(:disabled):not([ar
      * @param {object} el - optional - ref of dom element to trap focus on.
      *  will default to the root node of the vue component
      */
-    focusTrappedTabPress(e, s) {
+    focusTrappedTabPress(e, t) {
       if (!(e.key === "Tab"))
         return;
-      const i = this._getFocusableElements(s);
+      const i = this._getFocusableElements(t);
       if (!i.length) {
         e.preventDefault();
         return;
       }
-      const n = this._getFirstFocusElement(i), o = i[i.length - 1];
-      e.shiftKey ? document.activeElement === n && (o.focus(), e.preventDefault()) : document.activeElement === o && (n.focus(), e.preventDefault());
+      const a = this._getFirstFocusElement(i), o = i[i.length - 1];
+      e.shiftKey ? document.activeElement === a && (o.focus(), e.preventDefault()) : document.activeElement === o && (a.focus(), e.preventDefault());
     }
   }
 }, D = {
   DEFAULT: "default",
   CUSTOM: "custom"
-}, T = {
+}, C = {
   ARROW_KEYS: "arrow-keys",
   TAB: "tab",
   NONE: "none"
-}, tt = {
+}, Fe = {
   name: "DtItemLayout",
   props: {
     /**
@@ -1502,66 +1164,66 @@ const Bt = /* @__PURE__ */ y(Ze, [["render", Xe]]), W = ':not(:disabled):not([ar
       default: "div"
     }
   }
-}, st = {
+}, ze = {
   key: 0,
   "data-qa": "dt-item-layout-left-wrapper",
   class: "dt-item-layout--left"
-}, ot = {
+}, Ve = {
   "data-qa": "dt-item-layout-content-wrapper",
   class: "dt-item-layout--content"
-}, nt = {
+}, He = {
   key: 0,
   "data-qa": "dt-item-layout-title-wrapper",
   class: "dt-item-layout--title"
-}, at = {
+}, Be = {
   key: 2,
   "data-qa": "dt-item-layout-bottom-wrapper",
   class: "dt-item-layout--bottom"
-}, it = {
+}, qe = {
   key: 1,
   "data-qa": "dt-item-layout-right-wrapper",
   class: "dt-item-layout--right"
-}, lt = {
+}, Me = {
   key: 2,
   "data-qa": "dt-item-layout-selected-wrapper",
   class: "dt-item-layout--selected"
 };
-function rt(e, s, t, i, n, o) {
-  return a(), u(E(t.as), { class: "dt-item-layout" }, {
-    default: h(() => [
-      e.$slots.left ? (a(), r("section", st, [
-        l(e.$slots, "left", {}, void 0, !0)
+function je(e, t, s, i, a, o) {
+  return n(), h(E(s.as), { class: "dt-item-layout" }, {
+    default: p(() => [
+      e.$slots.left ? (n(), l("section", ze, [
+        c(e.$slots, "left", {}, void 0, !0)
       ])) : d("", !0),
-      b("section", ot, [
-        e.$slots.default ? (a(), r("div", nt, [
-          l(e.$slots, "default", {}, void 0, !0)
+      _("section", Ve, [
+        e.$slots.default ? (n(), l("div", He, [
+          c(e.$slots, "default", {}, void 0, !0)
         ])) : d("", !0),
-        e.$slots.subtitle ? (a(), r("div", {
+        e.$slots.subtitle ? (n(), l("div", {
           key: 1,
           "data-qa": "dt-item-layout-subtitle-wrapper",
-          class: f(["dt-item-layout--subtitle", { "dt-item-layout--subtitle--with-title": e.$slots.default }])
+          class: u(["dt-item-layout--subtitle", { "dt-item-layout--subtitle--with-title": e.$slots.default }])
         }, [
-          l(e.$slots, "subtitle", {}, void 0, !0)
+          c(e.$slots, "subtitle", {}, void 0, !0)
         ], 2)) : d("", !0),
-        e.$slots.bottom ? (a(), r("div", at, [
-          l(e.$slots, "bottom", {}, void 0, !0)
+        e.$slots.bottom ? (n(), l("div", Be, [
+          c(e.$slots, "bottom", {}, void 0, !0)
         ])) : d("", !0)
       ]),
-      e.$slots.right ? (a(), r("section", it, [
-        l(e.$slots, "right", {}, void 0, !0)
+      e.$slots.right ? (n(), l("section", qe, [
+        c(e.$slots, "right", {}, void 0, !0)
       ])) : d("", !0),
-      e.$slots.selected ? (a(), r("section", lt, [
-        l(e.$slots, "selected", {}, void 0, !0)
+      e.$slots.selected ? (n(), l("section", Me, [
+        c(e.$slots, "selected", {}, void 0, !0)
       ])) : d("", !0)
     ]),
     _: 3
   });
 }
-const V = /* @__PURE__ */ y(tt, [["render", rt], ["__scopeId", "data-v-c04dbbaa"]]), dt = {
+const V = /* @__PURE__ */ y(Fe, [["render", je], ["__scopeId", "data-v-c04dbbaa"]]), Ke = {
   name: "DtListItem",
   components: {
     DtItemLayout: V,
-    DtIcon: w
+    DtIcon: P
   },
   /**
    * Value provided from keyboard_list_navigation.js using id prop.
@@ -1576,7 +1238,7 @@ const V = /* @__PURE__ */ y(tt, [["render", rt], ["__scopeId", "data-v-c04dbbaa"
     id: {
       type: String,
       default() {
-        return Z.getUniqueString();
+        return Y.getUniqueString();
       }
     },
     /**
@@ -1611,8 +1273,8 @@ const V = /* @__PURE__ */ y(tt, [["render", rt], ["__scopeId", "data-v-c04dbbaa"
      */
     navigationType: {
       type: String,
-      default: T.NONE,
-      validator: (e) => Object.values(T).includes(e)
+      default: C.NONE,
+      validator: (e) => Object.values(C).includes(e)
     },
     /**
      * Applies selected styles to the list item
@@ -1687,13 +1349,13 @@ const V = /* @__PURE__ */ y(tt, [["render", rt], ["__scopeId", "data-v-c04dbbaa"
       return this.isHoverable ? this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted : !1;
     },
     isFocusable() {
-      return this.navigationType === T.TAB;
+      return this.navigationType === C.TAB;
     },
     /**
      * Whether to apply hover styles.
      */
     isHoverable() {
-      return this.navigationType !== T.NONE;
+      return this.navigationType !== C.NONE;
     }
   },
   methods: {
@@ -1708,31 +1370,31 @@ const V = /* @__PURE__ */ y(tt, [["render", rt], ["__scopeId", "data-v-c04dbbaa"
     }
   }
 };
-function ct(e, s, t, i, n, o) {
-  const c = p("dt-icon");
-  return a(), u(E(t.elementType), A({
-    id: t.id,
+function We(e, t, s, i, a, o) {
+  const f = m("dt-icon");
+  return n(), h(E(s.elementType), T({
+    id: s.id,
     class: ["dt-list-item", {
       "dt-list-item--focusable": o.isFocusable,
       "dt-list-item--highlighted": o.isHighlighted,
       "dt-list-item--static": !o.isHoverable
     }],
     tabindex: o.isFocusable ? 0 : -1,
-    role: t.role,
+    role: s.role,
     "aria-selected": o.isHighlighted
-  }, K(o.listItemListeners)), {
-    default: h(() => [
-      o.listItemType ? (a(), u(E(o.listItemType), { key: 0 }, ne({ _: 2 }, [
-        ae(e.$slots, (g, v) => ({
-          name: v,
-          fn: h(() => [
-            l(e.$slots, v)
+  }, j(o.listItemListeners)), {
+    default: p(() => [
+      o.listItemType ? (n(), h(E(o.listItemType), { key: 0 }, te({ _: 2 }, [
+        se(e.$slots, (g, k) => ({
+          name: k,
+          fn: p(() => [
+            c(e.$slots, k)
           ])
         })),
-        t.selected ? {
+        s.selected ? {
           name: "selected",
-          fn: h(() => [
-            _(c, {
+          fn: p(() => [
+            A(f, {
               name: "check",
               size: "400",
               class: "dt-list-item--selected-icon"
@@ -1740,36 +1402,36 @@ function ct(e, s, t, i, n, o) {
           ]),
           key: "0"
         } : void 0
-      ]), 1024)) : l(e.$slots, "default", { key: 1 })
+      ]), 1024)) : c(e.$slots, "default", { key: 1 })
     ]),
     _: 3
   }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-const xt = /* @__PURE__ */ y(dt, [["render", ct]]), k = {
+const gt = /* @__PURE__ */ y(Ke, [["render", We]]), v = {
   default: "column",
   column: "column",
   row: "row",
   "row-reverse": "row-reverse",
   "column-reverse": "column-reverse"
-}, U = ["sm", "md", "lg", "xl"], x = ["0", "100", "200", "300", "400", "500", "600"], q = {
+}, G = ["sm", "md", "lg", "xl"], R = ["0", "100", "200", "300", "400", "500", "600"], H = {
   none: void 0,
   small: "d-p4",
   medium: "d-p8",
   large: "d-p16"
-}, ut = {
+}, Ge = {
   none: void 0,
   small: "d-pl4",
   medium: "d-pl8",
   large: "d-pl16"
-}, ht = ["dialog", "menu", "listbox", "tree", "grid"], pt = ["", "anchor"], ft = ["none", "dialog", "first"], mt = ["parent", "body"], yt = [
-  ...X
-], zt = [
-  ...J
-], gt = {
+}, Ue = ["dialog", "menu", "listbox", "tree", "grid"], Ye = ["", "anchor"], $e = ["none", "dialog", "first"], Ze = ["parent", "body"], Xe = [
+  ...$
+], vt = [
+  ...Z
+], Je = {
   name: "PopoverHeaderFooter",
   components: {
-    DtButton: F,
-    DtIcon: w
+    DtButton: K,
+    DtIcon: P
   },
   props: {
     // eslint-disable-next-line vue/require-default-prop
@@ -1815,52 +1477,52 @@ const xt = /* @__PURE__ */ y(dt, [["render", ct]]), k = {
   ],
   data() {
     return {
-      hasSlotContent: L
+      hasSlotContent: M
     };
   },
   methods: {
     focusCloseButton() {
-      var s;
-      const e = (s = this.$refs["popover__close-button"]) == null ? void 0 : s.$el;
+      var t;
+      const e = (t = this.$refs["popover__close-button"]) == null ? void 0 : t.$el;
       e == null || e.focus();
     }
   }
 };
-function vt(e, s, t, i, n, o) {
-  const c = p("dt-icon"), g = p("dt-button");
-  return a(), r("div", {
+function Qe(e, t, s, i, a, o) {
+  const f = m("dt-icon"), g = m("dt-button");
+  return n(), l("div", {
     "data-qa": "dt-popover-header-footer",
-    class: f({
-      "d-popover__header": t.type === "header",
-      "d-popover__footer": t.type === "footer"
+    class: u({
+      "d-popover__header": s.type === "header",
+      "d-popover__footer": s.type === "footer"
     })
   }, [
-    n.hasSlotContent(e.$slots.content) ? (a(), r("div", {
+    a.hasSlotContent(e.$slots.content) ? (n(), l("div", {
       key: 0,
       "data-qa": "dt-popover-header-footer-content",
-      class: f([{
-        "d-popover__header__content": t.type === "header",
-        "d-popover__footer__content": t.type === "footer"
-      }, t.contentClass])
+      class: u([{
+        "d-popover__header__content": s.type === "header",
+        "d-popover__footer__content": s.type === "footer"
+      }, s.contentClass])
     }, [
-      l(e.$slots, "content")
+      c(e.$slots, "content")
     ], 2)) : d("", !0),
-    t.showCloseButton ? (a(), u(g, A({
+    s.showCloseButton ? (n(), h(g, T({
       key: 1,
       ref: "popover__close-button",
       "data-qa": "dt-popover-close",
       class: {
-        "d-popover__header__close-button": t.type === "header",
-        "d-popover__footer__close-button": t.type === "footer"
+        "d-popover__header__close-button": s.type === "header",
+        "d-popover__footer__close-button": s.type === "footer"
       },
       importance: "outlined",
       kind: "muted",
       circle: ""
-    }, t.closeButtonProps, {
-      onClick: s[0] || (s[0] = (v) => e.$emit("close"))
+    }, s.closeButtonProps, {
+      onClick: t[0] || (t[0] = (k) => e.$emit("close"))
     }), {
-      icon: h(() => [
-        _(c, {
+      icon: p(() => [
+        A(f, {
           name: "close",
           size: "300"
         })
@@ -1869,17 +1531,17 @@ function vt(e, s, t, i, n, o) {
     }, 16, ["class"])) : d("", !0)
   ], 2);
 }
-const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
+const et = /* @__PURE__ */ y(Je, [["render", Qe]]), tt = {
   name: "DtPopover",
   /********************
    * CHILD COMPONENTS *
    ********************/
   components: {
-    SrOnlyCloseButton: G,
-    DtLazyShow: Q,
-    PopoverHeaderFooter: _t
+    SrOnlyCloseButton: De,
+    DtLazyShow: X,
+    PopoverHeaderFooter: et
   },
-  mixins: [et, B],
+  mixins: [xe, Ae],
   props: {
     /**
      * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
@@ -1922,7 +1584,7 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
     role: {
       type: String,
       default: "dialog",
-      validator: (e) => ht.includes(e)
+      validator: (e) => Ue.includes(e)
     },
     /**
      * ID of the element that serves as the label for the popover content.
@@ -1958,7 +1620,7 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
     padding: {
       type: String,
       default: "large",
-      validator: (e) => Object.keys(q).some((s) => s === e)
+      validator: (e) => Object.keys(H).some((t) => t === e)
     },
     /**
      * Additional class name for the content wrapper element.
@@ -1975,7 +1637,7 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
     contentWidth: {
       type: String,
       default: "",
-      validator: (e) => pt.includes(e)
+      validator: (e) => Ye.includes(e)
     },
     /**
      * Whether to apply transition on initial render in the content lazy show component.
@@ -2005,7 +1667,7 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
     id: {
       type: String,
       default() {
-        return R();
+        return N();
       }
     },
     /**
@@ -2109,7 +1771,7 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
     sticky: {
       type: [Boolean, String],
       default: !1,
-      validator: (e) => yt.includes(e)
+      validator: (e) => Xe.includes(e)
     },
     /**
      * Determines maximum height for the popover before overflow.
@@ -2167,7 +1829,7 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
     initialFocusElement: {
       type: [String, HTMLElement],
       default: "first",
-      validator: (e) => ft.includes(e) || e instanceof HTMLElement || e.startsWith("#")
+      validator: (e) => $e.includes(e) || e instanceof HTMLElement || e.startsWith("#")
     },
     /**
      * If the popover should open pressing up or down arrow key on the anchor element.
@@ -2186,7 +1848,15 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
     appendTo: {
       type: [HTMLElement, String],
       default: "body",
-      validator: (e) => mt.includes(e) || e instanceof HTMLElement
+      validator: (e) => Ze.includes(e) || e instanceof HTMLElement
+    },
+    /**
+     * Set this prop to true and popover component will support hovercard behaviour
+     * It will open on mouseenter and close on mouseleave with timer delay of 300ms
+     */
+    hovercard: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: [
@@ -2212,15 +1882,17 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
   ],
   data() {
     return {
-      POPOVER_PADDING_CLASSES: q,
-      POPOVER_HEADER_FOOTER_PADDING_CLASSES: ut,
+      POPOVER_PADDING_CLASSES: H,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES: Ge,
       intersectionObserver: null,
       isOutsideViewport: !1,
       isOpen: !1,
       toAppear: !1,
       anchorEl: null,
       popoverContentEl: null,
-      hasSlotContent: L
+      hasSlotContent: M,
+      inTimer: null,
+      outTimer: null
     };
   },
   computed: {
@@ -2241,7 +1913,7 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
       return this.isOutsideViewport && this.modal ? "calc(100vh - var(--dt-space-300))" : this.maxHeight;
     },
     labelledBy() {
-      return this.ariaLabelledby || !this.ariaLabel && R("DtPopover__anchor");
+      return this.ariaLabelledby || !this.ariaLabel && N("DtPopover__anchor");
     }
   },
   watch: {
@@ -2253,20 +1925,20 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
       }
     },
     modal(e) {
-      var s;
-      (s = this.tip) == null || s.setProps({
+      var t;
+      (t = this.tip) == null || t.setProps({
         zIndex: e ? 650 : this.calculateAnchorZindex()
       });
     },
     offset(e) {
-      var s;
-      (s = this.tip) == null || s.setProps({
+      var t;
+      (t = this.tip) == null || t.setProps({
         offset: e
       });
     },
     sticky(e) {
-      var s;
-      (s = this.tip) == null || s.setProps({
+      var t;
+      (t = this.tip) == null || t.setProps({
         sticky: e
       });
     },
@@ -2283,8 +1955,8 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
       });
     },
     placement(e) {
-      var s;
-      (s = this.tip) == null || s.setProps({
+      var t;
+      (t = this.tip) == null || t.setProps({
         placement: e
       });
     },
@@ -2299,8 +1971,8 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
         e !== null && (this.toAppear = e);
       }
     },
-    isOpen(e, s) {
-      e ? (this.initTippyInstance(), this.tip.show()) : !e && s !== e && (this.removeEventListeners(), this.tip.hide());
+    isOpen(e, t) {
+      e ? (this.initTippyInstance(), this.tip.show()) : !e && t !== e && (this.removeEventListeners(), this.tip.hide());
     }
   },
   mounted() {
@@ -2317,14 +1989,14 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
   methods: {
     hasIntersectedViewport(e) {
       var i;
-      const s = (i = e == null ? void 0 : e[0]) == null ? void 0 : i.target;
-      if (!s)
+      const t = (i = e == null ? void 0 : e[0]) == null ? void 0 : i.target;
+      if (!t)
         return;
-      const t = ee(s);
-      this.isOutsideViewport = t.bottom || t.top;
+      const s = J(t);
+      this.isOutsideViewport = s.bottom || s.top;
     },
     popperOptions() {
-      return te({
+      return Q({
         fallbackPlacements: this.fallbackPlacements,
         tether: this.tether,
         hasHideModifierEnabled: !0
@@ -2340,9 +2012,9 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
       (e = this.anchorEl) != null && e.closest(".d-zi-drawer") ? 650 : 300;
     },
     defaultToggleOpen(e) {
-      var s, t, i;
-      if (!this.openOnContext && (this.open === null || this.open === void 0)) {
-        if (!((s = this.anchorEl) != null && s.contains(e.target)) && !((t = this.anchorEl) != null && t.isEqualNode(e.target)) || (i = this.anchorEl) != null && i.disabled)
+      var t, s, i;
+      if (!this.hovercard && !this.openOnContext && (this.open === null || this.open === void 0)) {
+        if (!((t = this.anchorEl) != null && t.contains(e.target)) && !((s = this.anchorEl) != null && s.isEqualNode(e.target)) || (i = this.anchorEl) != null && i.disabled)
           return;
         this.toggleOpen();
       }
@@ -2364,8 +2036,8 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
       this.isOpen = !this.isOpen;
     },
     onArrowKeyPress(e) {
-      var s;
-      this.open === null && (this.openWithArrowKeys && ((s = this.anchorEl) != null && s.contains(e.target)) && (this.isOpen || (this.isOpen = !0)), this.$emit("keydown", e));
+      var t;
+      this.open === null && (this.openWithArrowKeys && ((t = this.anchorEl) != null && t.contains(e.target)) && (this.isOpen || (this.isOpen = !0)), this.$emit("keydown", e));
     },
     addEventListeners() {
       window.addEventListener("dt-popover-close", this.closePopover), this.contentWidth === "anchor" && window.addEventListener("resize", this.onResize);
@@ -2385,17 +2057,17 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
     preventScrolling() {
       var e;
       if (this.modal) {
-        const s = (e = this.anchorEl) == null ? void 0 : e.closest("body, .tippy-box");
-        s.tagName.toLowerCase() === "body" ? (s.classList.add("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : s.classList.add("d-zi-popover");
+        const t = (e = this.anchorEl) == null ? void 0 : e.closest("body, .tippy-box");
+        t.tagName.toLowerCase() === "body" ? (t.classList.add("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : t.classList.add("d-zi-popover");
       }
     },
     /*
     * Resets the prevent scrolling properties set in preventScrolling() back to normal.
     **/
     enableScrolling() {
-      var s, t;
-      const e = (s = this.anchorEl) == null ? void 0 : s.closest("body, .tippy-box");
-      e && (((t = e.tagName) == null ? void 0 : t.toLowerCase()) === "body" ? (e.classList.remove("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : e.classList.remove("d-zi-popover"));
+      var t, s;
+      const e = (t = this.anchorEl) == null ? void 0 : t.closest("body, .tippy-box");
+      e && (((s = e.tagName) == null ? void 0 : s.toLowerCase()) === "body" ? (e.classList.remove("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : e.classList.remove("d-zi-popover"));
     },
     removeReferences() {
       this.anchorEl = null, this.popoverContentEl = null, this.tip = null;
@@ -2414,8 +2086,8 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
       this.initialFocusElement === "dialog" && this.$refs.content.$el.focus(), this.initialFocusElement.startsWith("#") && this.focusInitialElementById(), this.initialFocusElement === "first" && this.focusFirstElementIfNeeded(this.$refs.popover__content), this.initialFocusElement instanceof HTMLElement && this.initialFocusElement.focus();
     },
     focusInitialElementById() {
-      var s, t, i;
-      const e = (t = (s = this.$refs.content) == null ? void 0 : s.$el) == null ? void 0 : t.querySelector(this.initialFocusElement);
+      var t, s, i;
+      const e = (s = (t = this.$refs.content) == null ? void 0 : t.$el) == null ? void 0 : s.querySelector(this.initialFocusElement);
       e ? e.focus() : console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'), e ? e.focus() : (i = this.$refs.content) == null || i.$el.focus();
     },
     onResize() {
@@ -2434,18 +2106,18 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
       await this.$nextTick(), this.popoverContentEl.style.width = `${(e = this.anchorEl) == null ? void 0 : e.clientWidth}px`;
     },
     focusFirstElementIfNeeded(e) {
-      var t, i;
-      this._getFocusableElements(e, !0).length !== 0 ? this.focusFirstElement(e) : this.showCloseButton ? (t = this.$refs.popover__header) == null || t.focusCloseButton() : (i = this.$refs.content) == null || i.$el.focus();
+      var s, i;
+      this._getFocusableElements(e, !0).length !== 0 ? this.focusFirstElement(e) : this.showCloseButton ? (s = this.$refs.popover__header) == null || s.focusCloseButton() : (i = this.$refs.content) == null || i.$el.focus();
     },
     initTippyInstance() {
-      var e, s;
-      this.tip = se(this.anchorEl, {
+      var e, t;
+      this.tip = ee(this.anchorEl, {
         popperOptions: this.popperOptions(),
         contentElement: this.popoverContentEl,
         placement: this.placement,
         offset: this.offset,
         sticky: this.sticky,
-        appendTo: this.appendTo === "body" ? (s = (e = this.anchorEl) == null ? void 0 : e.getRootNode()) == null ? void 0 : s.querySelector("body") : this.appendTo,
+        appendTo: this.appendTo === "body" ? (t = (e = this.anchorEl) == null ? void 0 : e.getRootNode()) == null ? void 0 : t.querySelector("body") : this.appendTo,
         interactive: !0,
         trigger: "manual",
         // We have to manage hideOnClick functionality manually to handle
@@ -2455,164 +2127,197 @@ const _t = /* @__PURE__ */ y(gt, [["render", vt]]), bt = {
         onClickOutside: this.onClickOutside,
         onShow: this.onShow
       });
+    },
+    //  ============================================================================
+    //  $ HOVERCARD
+    //  ----------------------------------------------------------------------------
+    setInTimer() {
+      this.inTimer = setTimeout(() => {
+        this.isOpen = !0;
+      }, x);
+    },
+    setOutTimer() {
+      this.outTimer = setTimeout(() => {
+        this.isOpen = !1;
+      }, x);
+    },
+    onEnterAnchor(e) {
+      this.hovercard && (clearTimeout(this.outTimer), this.setInTimer(e));
+    },
+    onLeaveAnchor(e) {
+      this.hovercard && (clearTimeout(this.inTimer), this.setOutTimer(e));
+    },
+    onEnterContent() {
+      this.hovercard && clearTimeout(this.outTimer);
+    },
+    onLeaveContent(e) {
+      this.hovercard && this.setOutTimer(e);
     }
+    //  ============================================================================
+    //  $ HOVERCARD
+    //  ----------------------------------------------------------------------------
   }
-}, kt = ["aria-hidden"], St = ["id", "tabindex"];
-function Et(e, s, t, i, n, o) {
-  const c = p("popover-header-footer"), g = p("sr-only-close-button"), v = p("dt-lazy-show");
-  return a(), r("div", null, [
-    t.modal && n.isOpen ? (a(), u(ie, {
+}, st = ["aria-hidden"], ot = ["id", "tabindex"];
+function at(e, t, s, i, a, o) {
+  const f = m("popover-header-footer"), g = m("sr-only-close-button"), k = m("dt-lazy-show");
+  return n(), l("div", null, [
+    s.modal && a.isOpen ? (n(), h(oe, {
       key: 0,
       to: "body"
     }, [
-      b("div", {
+      _("div", {
         class: "d-modal--transparent",
-        "aria-hidden": t.modal && n.isOpen ? "false" : "true",
-        onClick: s[0] || (s[0] = P(() => {
+        "aria-hidden": s.modal && a.isOpen ? "false" : "true",
+        onClick: t[0] || (t[0] = I(() => {
         }, ["prevent", "stop"]))
-      }, null, 8, kt)
+      }, null, 8, st)
     ])) : d("", !0),
-    (a(), u(E(t.elementType), {
+    (n(), h(E(s.elementType), {
       ref: "popover",
-      class: f(["d-popover", { "d-popover__anchor--opened": n.isOpen }]),
+      class: u(["d-popover", { "d-popover__anchor--opened": a.isOpen }]),
       "data-qa": "dt-popover-container"
     }, {
-      default: h(() => [
-        b("div", {
-          id: !t.ariaLabelledby && o.labelledBy,
+      default: p(() => [
+        _("div", {
+          id: !s.ariaLabelledby && o.labelledBy,
           ref: "anchor",
           "data-qa": "dt-popover-anchor",
-          tabindex: t.openOnContext ? 0 : void 0,
-          onClickCapture: s[1] || (s[1] = (...m) => o.defaultToggleOpen && o.defaultToggleOpen(...m)),
-          onContextmenu: s[2] || (s[2] = (...m) => o.onContext && o.onContext(...m)),
+          tabindex: s.openOnContext ? 0 : void 0,
+          onClickCapture: t[1] || (t[1] = (...r) => o.defaultToggleOpen && o.defaultToggleOpen(...r)),
+          onContextmenu: t[2] || (t[2] = (...r) => o.onContext && o.onContext(...r)),
           onKeydown: [
-            s[3] || (s[3] = S(P((...m) => o.onArrowKeyPress && o.onArrowKeyPress(...m), ["prevent"]), ["up"])),
-            s[4] || (s[4] = S(P((...m) => o.onArrowKeyPress && o.onArrowKeyPress(...m), ["prevent"]), ["down"])),
-            s[6] || (s[6] = S((m) => e.$emit("keydown", m), ["enter"])),
-            s[7] || (s[7] = S((m) => e.$emit("keydown", m), ["space"]))
+            t[3] || (t[3] = b(I((...r) => o.onArrowKeyPress && o.onArrowKeyPress(...r), ["prevent"]), ["up"])),
+            t[4] || (t[4] = b(I((...r) => o.onArrowKeyPress && o.onArrowKeyPress(...r), ["prevent"]), ["down"])),
+            t[6] || (t[6] = b((r) => e.$emit("keydown", r), ["enter"])),
+            t[7] || (t[7] = b((r) => e.$emit("keydown", r), ["space"]))
           ],
-          onKeydownCapture: s[5] || (s[5] = S((...m) => o.closePopover && o.closePopover(...m), ["escape"]))
+          onKeydownCapture: t[5] || (t[5] = b((...r) => o.closePopover && o.closePopover(...r), ["escape"])),
+          onMouseenter: t[8] || (t[8] = (...r) => o.onEnterAnchor && o.onEnterAnchor(...r)),
+          onMouseleave: t[9] || (t[9] = (...r) => o.onLeaveAnchor && o.onLeaveAnchor(...r))
         }, [
-          l(e.$slots, "anchor", {
+          c(e.$slots, "anchor", {
             attrs: {
-              "aria-expanded": n.isOpen.toString(),
-              "aria-controls": t.id,
-              "aria-haspopup": t.role
+              "aria-expanded": a.isOpen.toString(),
+              "aria-controls": s.id,
+              "aria-haspopup": s.role
             }
           })
-        ], 40, St),
-        _(v, A({
-          id: t.id,
+        ], 40, ot),
+        A(k, T({
+          id: s.id,
           ref: "content",
-          role: t.role,
+          role: s.role,
           "data-qa": "dt-popover",
-          "aria-hidden": `${!n.isOpen}`,
+          "aria-hidden": `${!a.isOpen}`,
           "aria-labelledby": o.labelledBy,
-          "aria-label": t.ariaLabel,
-          "aria-modal": `${!t.modal}`,
-          transition: t.transition,
-          show: n.isOpen,
-          appear: n.toAppear,
-          class: ["d-popover__dialog", { "d-popover__dialog--modal": t.modal }, t.dialogClass],
+          "aria-label": s.ariaLabel,
+          "aria-modal": `${!s.modal}`,
+          transition: s.transition,
+          show: a.isOpen,
+          appear: a.toAppear,
+          class: ["d-popover__dialog", { "d-popover__dialog--modal": s.modal }, s.dialogClass],
           style: {
             "max-height": o.calculatedMaxHeight,
-            "max-width": t.maxWidth
+            "max-width": s.maxWidth
           },
           css: e.$attrs.css,
-          tabindex: t.contentTabindex
-        }, K(o.popoverListeners)), {
-          default: h(() => [
-            n.hasSlotContent(e.$slots.headerContent) || t.showCloseButton ? (a(), u(c, {
+          tabindex: s.contentTabindex
+        }, j(o.popoverListeners), {
+          onMouseenter: o.onEnterContent,
+          onMouseleave: o.onLeaveContent
+        }), {
+          default: p(() => [
+            a.hasSlotContent(e.$slots.headerContent) || s.showCloseButton ? (n(), h(f, {
               key: 0,
               ref: "popover__header",
-              class: f(n.POPOVER_HEADER_FOOTER_PADDING_CLASSES[t.padding]),
-              "content-class": t.headerClass,
+              class: u(a.POPOVER_HEADER_FOOTER_PADDING_CLASSES[s.padding]),
+              "content-class": s.headerClass,
               type: "header",
-              "show-close-button": t.showCloseButton,
-              "close-button-props": t.closeButtonProps,
+              "show-close-button": s.showCloseButton,
+              "close-button-props": s.closeButtonProps,
               onClose: o.closePopover
             }, {
-              content: h(() => [
-                l(e.$slots, "headerContent", { close: o.closePopover })
+              content: p(() => [
+                c(e.$slots, "headerContent", { close: o.closePopover })
               ]),
               _: 3
             }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : d("", !0),
-            b("div", {
+            _("div", {
               ref: "popover__content",
               "data-qa": "dt-popover-content",
-              class: f([
+              class: u([
                 "d-popover__content",
-                n.POPOVER_PADDING_CLASSES[t.padding],
-                t.contentClass
+                a.POPOVER_PADDING_CLASSES[s.padding],
+                s.contentClass
               ])
             }, [
-              l(e.$slots, "content", { close: o.closePopover })
+              c(e.$slots, "content", { close: o.closePopover })
             ], 2),
-            n.hasSlotContent(e.$slots.footerContent) ? (a(), u(c, {
+            a.hasSlotContent(e.$slots.footerContent) ? (n(), h(f, {
               key: 1,
               ref: "popover__footer",
               type: "footer",
-              class: f(n.POPOVER_HEADER_FOOTER_PADDING_CLASSES[t.padding]),
-              "content-class": t.footerClass
+              class: u(a.POPOVER_HEADER_FOOTER_PADDING_CLASSES[s.padding]),
+              "content-class": s.footerClass
             }, {
-              content: h(() => [
-                l(e.$slots, "footerContent", { close: o.closePopover })
+              content: p(() => [
+                c(e.$slots, "footerContent", { close: o.closePopover })
               ]),
               _: 3
             }, 8, ["class", "content-class"])) : d("", !0),
-            e.showVisuallyHiddenClose ? (a(), u(g, {
+            e.showVisuallyHiddenClose ? (n(), h(g, {
               key: 2,
               "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
               onClose: o.closePopover
             }, null, 8, ["visually-hidden-close-label", "onClose"])) : d("", !0)
           ]),
           _: 3
-        }, 16, ["id", "role", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "appear", "class", "style", "css", "tabindex"])
+        }, 16, ["id", "role", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "appear", "class", "style", "css", "tabindex", "onMouseenter", "onMouseleave"])
       ]),
       _: 3
     }, 8, ["class"]))
   ]);
 }
-const Ht = /* @__PURE__ */ y(bt, [["render", Et]]);
-function $(e) {
-  return e === k.default;
+const bt = /* @__PURE__ */ y(tt, [["render", at]]);
+function B(e) {
+  return e === v.default;
 }
-function j(e) {
-  if (O(e) === "string")
-    return $(e) ? null : k[e];
-  if (O(e) === "object") {
-    const { default: s } = e;
-    return $(s) ? null : k[s];
+function q(e) {
+  if (w(e) === "string")
+    return B(e) ? null : v[e];
+  if (w(e) === "object") {
+    const { default: t } = e;
+    return B(t) ? null : v[t];
   } else
     return null;
 }
-function O(e) {
+function w(e) {
   return typeof e;
 }
-function wt(e) {
-  return j(e) ? `d-stack--${k[j(e)]}` : null;
+function nt(e) {
+  return q(e) ? `d-stack--${v[q(e)]}` : null;
 }
-function Ct(e) {
-  return O(e) === "object" ? [
-    ...U.map((s) => e[s] ? `d-stack--${s}--${e[s]}` : null)
+function it(e) {
+  return w(e) === "object" ? [
+    ...G.map((t) => e[t] ? `d-stack--${t}--${e[t]}` : null)
   ] : null;
 }
-function It(e) {
-  return x.includes(e) ? `d-stack--gap-${e}` : null;
+function rt(e) {
+  return R.includes(e) ? `d-stack--gap-${e}` : null;
 }
-function Ot(e) {
-  if (O(e) === "string")
-    return Object.keys(k).includes(e);
-  if (O(e) === "object") {
-    const { default: s } = e;
-    return Object.keys(k).includes(s);
+function lt(e) {
+  if (w(e) === "string")
+    return Object.keys(v).includes(e);
+  if (w(e) === "object") {
+    const { default: t } = e;
+    return Object.keys(v).includes(t);
   } else
     return null;
 }
-function At(e) {
-  return x.includes(e);
+function dt(e) {
+  return R.includes(e);
 }
-const Tt = {
+const ct = {
   name: "DtStack",
   props: {
     /**
@@ -2626,7 +2331,7 @@ const Tt = {
     direction: {
       type: [String, Object],
       default: "column",
-      validator: (e) => Ot(e)
+      validator: (e) => lt(e)
     },
     /**
      * Set this prop to render stack as a specific HTML element.
@@ -2642,81 +2347,75 @@ const Tt = {
     gap: {
       type: String,
       default: "0",
-      validator: (e) => At(e)
+      validator: (e) => dt(e)
     }
   },
   data() {
     return {
-      DT_STACK_DIRECTION: k,
-      DT_STACK_GAP: x,
-      DT_STACK_RESPONSIVE_BREAKPOINTS: U
+      DT_STACK_DIRECTION: v,
+      DT_STACK_GAP: R,
+      DT_STACK_RESPONSIVE_BREAKPOINTS: G
     };
   },
   computed: {
     stackGap() {
-      return It(this.gap);
+      return rt(this.gap);
     },
     defaultDirection() {
-      return wt(this.direction);
+      return nt(this.direction);
     },
     stackResponsive() {
-      return Ct(this.direction);
+      return it(this.direction);
     }
   }
 };
-function Pt(e, s, t, i, n, o) {
-  return a(), u(E(t.as), {
-    class: f([
+function ut(e, t, s, i, a, o) {
+  return n(), h(E(s.as), {
+    class: u([
       "d-stack",
       o.defaultDirection,
       o.stackResponsive,
       o.stackGap
     ])
   }, {
-    default: h(() => [
-      l(e.$slots, "default")
+    default: p(() => [
+      c(e.$slots, "default")
     ]),
     _: 3
   }, 8, ["class"]);
 }
-const Vt = /* @__PURE__ */ y(Tt, [["render", Pt]]);
+const _t = /* @__PURE__ */ y(ct, [["render", ut]]);
 export {
-  N as A,
-  me as B,
-  C,
-  xt as D,
-  ce as E,
-  k as F,
-  U as G,
-  T as L,
-  et as M,
-  M as N,
-  mt as P,
-  B as S,
-  Vt as a,
-  Ft as b,
-  Rt as c,
-  Bt as d,
-  Ht as e,
-  Re as f,
-  Ve as g,
-  Ye as h,
-  x as i,
-  G as j,
-  pt as k,
-  V as l,
+  L as A,
+  gt as D,
+  C as L,
+  xe as M,
+  Ze as P,
+  De as S,
+  _t as a,
+  yt as b,
+  mt as c,
+  bt as d,
+  Ae as e,
+  R as f,
+  Ye as g,
+  V as h,
+  pe as i,
+  fe as j,
+  F as k,
+  me as l,
   ye as m,
-  ge as n,
-  z as o,
-  ve as p,
-  _e as q,
-  H as r,
-  D as s,
-  Te as t,
-  q as u,
-  ut as v,
-  ht as w,
-  ft as x,
-  yt as y,
-  zt as z
+  z as n,
+  D as o,
+  H as p,
+  Ge as q,
+  Ue as r,
+  $e as s,
+  Xe as t,
+  vt as u,
+  he as v,
+  S as w,
+  re as x,
+  v as y,
+  G as z
 };