@dialpad/dialtone-vue 3.88.0 → 3.89.0

package/dist/{notice-1ead279e.js → stack-5e05e7f3.js}

@@ -1,15 +1,449 @@
-import { _ as v, D as E, h as P, a as L, u as R, T as V, b as q, g as A, i as M, c as x, d as K } from "./emoji-3ea15d88.js";
-import { resolveComponent as c, openBlock as l, createElementBlock as h, renderSlot as a, createVNode as _, createCommentVNode as r, createTextVNode as z, toDisplayString as W, createElementVNode as C, createBlock as f, withKeys as g, withModifiers as S, withCtx as d, mergeProps as k, resolveDynamicComponent as w, normalizeClass as b, toHandlers as D, createSlots as j, renderList as U, Teleport as Y } from "vue";
-const $ = ["base", "error", "info", "success", "warning"], G = ["alert", "alertdialog", "status"], Z = /* @__PURE__ */ new Map([
+import { _ as y, d as Y, p as Z, D as I, g as R, I as X, a as J, h as L, b as F, L as Q, c as ee, u as te, T as se, e as ne, i as oe, f as ie, j as ae } from "./emoji-e5c98301.js";
+import { openBlock as i, createElementBlock as r, toDisplayString as A, createCommentVNode as d, createElementVNode as b, normalizeClass as p, resolveComponent as f, createBlock as u, resolveDynamicComponent as C, withCtx as h, mergeProps as T, renderSlot as l, createVNode as g, createTextVNode as le, withKeys as E, withModifiers as P, toHandlers as z, createSlots as re, renderList as de, Teleport as ce } from "vue";
+const O = {
+  BUSY: "busy",
+  AWAY: "away",
+  OFFLINE: "offline",
+  ACTIVE: "active"
+}, ue = [
+  O.BUSY,
+  O.AWAY,
+  O.OFFLINE,
+  O.ACTIVE
+], he = {
+  name: "DtPresence",
+  props: {
+    /**
+     * Determines the color of the inner presence circle, indicating status.
+     * Accepts one of 4 values: 'busy', 'away', 'active', 'offline'
+     * @values busy, away, active, offline
+     */
+    presence: {
+      type: String,
+      default: O.ACTIVE,
+      validator: (e) => ue.includes(e)
+    },
+    /**
+     * Since Presence is a visual element, we need SRs to read out any state changes
+     * that occur.
+     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.
+     */
+    srText: {
+      type: String,
+      default: null
+    }
+  }
+}, fe = ["aria-live"], pe = {
+  key: 0,
+  "data-qa": "dt-presence-sr-text",
+  class: "sr-only"
+};
+function me(e, s, t, a, o, n) {
+  return i(), r("div", {
+    class: "d-presence",
+    "data-qa": "dt-presence",
+    role: "status",
+    "aria-live": e.$attrs.ariaLive || "off"
+  }, [
+    t.srText ? (i(), r("span", pe, A(t.srText), 1)) : d("", !0),
+    b("div", {
+      class: p(["d-presence__inner", {
+        "d-presence__inner--active": t.presence === "active",
+        "d-presence__inner--away": t.presence === "away",
+        "d-presence__inner--busy": t.presence === "busy",
+        "d-presence__inner--offline": t.presence === "offline"
+      }])
+    }, null, 2)
+  ], 8, fe);
+}
+const ye = /* @__PURE__ */ y(he, [["render", me]]), N = {
+  xs: "d-avatar--xs",
+  sm: "d-avatar--sm",
+  md: "d-avatar--md",
+  lg: "d-avatar--lg",
+  xl: "d-avatar--xl"
+}, _e = {
+  default: "",
+  icon: "d-avatar__icon",
+  initials: "d-avatar__initials"
+}, ve = {
+  md: "d-avatar__presence--md",
+  lg: "d-avatar__presence--lg"
+}, V = {
+  NONE: "",
+  BUSY: "busy",
+  AWAY: "away",
+  OFFLINE: "offline",
+  ACTIVE: "active"
+}, ge = {
+  xs: "100",
+  sm: "200",
+  md: "300",
+  lg: "500",
+  xl: "600"
+}, be = [
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "1000",
+  "1100",
+  "1200",
+  "1300",
+  "1400",
+  "1500",
+  "1600",
+  "1700",
+  "1800"
+], x = (e) => e > 1;
+function Se() {
+  return [void 0, ...Object.keys(Y).map((e) => Z(e))];
+}
+const Ee = (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, a) => a === 0 || a === s.length - 1).map((t) => t.slice(0, 1).toUpperCase()).join("");
+};
+const Ce = Se(), Ie = {
+  name: "DtAvatar",
+  components: { DtPresence: ye, DtIcon: I },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Id of the avatar content wrapper element
+     */
+    id: {
+      type: String,
+      default() {
+        return R();
+      }
+    },
+    /**
+     * Pass in a seed to get the random color generation based on that string. For example if you pass in a
+     * user ID as the string it will return the same randomly generated colors every time for that user.
+     */
+    seed: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic
+     * if the seed prop is set.
+     */
+    color: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The size of the avatar
+     * @values xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => Object.keys(N).includes(e)
+    },
+    /**
+     * Used to customize the avatar container
+     */
+    avatarClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Set classes on the avatar canvas. Wrapper around the core avatar image.
+     */
+    canvasClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Pass through classes. Used to customize the avatar icon
+     */
+    iconClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     * @values null, busy, away, offline, active
+     */
+    presence: {
+      type: String,
+      default: V.NONE,
+      validator: (e) => Object.values(V).includes(e)
+    },
+    /**
+     * A set of props to be passed into the presence component.
+     */
+    presenceProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Determines whether to show a group avatar.
+     * Limit to 2 digits max, more than 99 will be rendered as “99+”.
+     * if the number is 1 or less it would just show the regular avatar as if group had not been set.
+     */
+    group: {
+      type: Number,
+      default: void 0,
+      validator: (e) => x(e)
+    },
+    /**
+     * The icon that overlays the avatar
+     */
+    overlayIcon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The text that overlays the avatar
+     */
+    overlayText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Used to customize the avatar overlay
+     */
+    overlayClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Source of the image
+     */
+    imageSrc: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Alt attribute of the image, by default
+     * it'd be the full name
+     */
+    imageAlt: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Icon name to be displayed on the avatar
+     */
+    iconName: {
+      type: String,
+      default: void 0,
+      validator: (e) => Ce.includes(e)
+    },
+    /**
+     * Icon size to be displayed on the avatar
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    iconSize: {
+      type: String,
+      default: "",
+      validator: (e) => !e || Object.keys(X).includes(e)
+    },
+    /**
+     * Full name used to extract initials and set alt attribute.
+     */
+    fullName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Makes the avatar focusable and clickable,
+     * emits a click event when clicked.
+     */
+    clickable: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    /**
+     * Avatar click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  data() {
+    return {
+      AVATAR_SIZE_MODIFIERS: N,
+      AVATAR_KIND_MODIFIERS: _e,
+      AVATAR_PRESENCE_SIZE_MODIFIERS: ve,
+      AVATAR_ICON_SIZES: ge,
+      imageLoadedSuccessfully: null,
+      formattedInitials: "",
+      initializing: !1
+    };
+  },
+  computed: {
+    isNotIconType() {
+      return !this.iconName;
+    },
+    avatarClasses() {
+      return [
+        "d-avatar",
+        N[this.validatedSize],
+        this.avatarClass,
+        {
+          "d-avatar--group": this.showGroup,
+          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,
+          "d-avatar--clickable": this.clickable
+        }
+      ];
+    },
+    overlayClasses() {
+      return [
+        "d-avatar__overlay",
+        this.overlayClass
+      ];
+    },
+    showGroup() {
+      return x(this.group);
+    },
+    formattedGroup() {
+      return this.group > 99 ? "99+" : this.group;
+    },
+    validatedSize() {
+      return this.group ? "xs" : this.size;
+    },
+    showImage() {
+      return this.imageLoadedSuccessfully !== !1 && this.imageSrc;
+    },
+    buttonAriaLabel() {
+      if (this.clickable)
+        return this.fullName || this.imageAlt || this.$attrs["aria-label"];
+    }
+  },
+  watch: {
+    fullName: {
+      immediate: !0,
+      handler(e) {
+        this.formatInitials(e);
+      }
+    },
+    imageSrc(e) {
+      this.imageLoadedSuccessfully = null, e && (this.validateProps(), this.setImageListeners());
+    }
+  },
+  mounted() {
+    this.validateProps(), this.setImageListeners();
+  },
+  methods: {
+    async setImageListeners() {
+      await this.$nextTick();
+      const e = this.$refs.avatarImage;
+      e && (e.addEventListener("load", () => this._loadedImageEventHandler(e), { once: !0 }), e.addEventListener("error", () => this._erroredImageEventHandler(e), { once: !0 }));
+    },
+    formatInitials(e) {
+      const s = Ee(e);
+      this.validatedSize === "xs" ? this.formattedInitials = "" : this.validatedSize === "sm" ? this.formattedInitials = s[0] : this.formattedInitials = s;
+    },
+    getColor() {
+      return this.color ?? J(be, this.seed);
+    },
+    _loadedImageEventHandler(e) {
+      this.imageLoadedSuccessfully = !0, e.classList.remove("d-d-none");
+    },
+    _erroredImageEventHandler(e) {
+      this.imageLoadedSuccessfully = !1, e.classList.add("d-d-none");
+    },
+    validateProps() {
+      if (this.imageSrc && !(this.fullName || this.imageAlt))
+        throw new Error("full-name or image-alt must be set if image-src is provided");
+    },
+    handleClick(e) {
+      this.clickable && this.$emit("click", e);
+    }
+  }
+}, Oe = ["src", "alt"], Ae = {
+  key: 1,
+  class: "d-avatar__overlay-text"
+}, ke = {
+  key: 1,
+  class: "d-avatar__count",
+  "data-qa": "dt-avatar-count"
+};
+function Te(e, s, t, a, o, n) {
+  const c = f("dt-icon"), _ = f("dt-presence");
+  return i(), u(C(t.clickable ? "button" : "div"), {
+    id: t.id,
+    class: p(n.avatarClasses),
+    "data-qa": "dt-avatar",
+    "aria-label": n.buttonAriaLabel,
+    onClick: n.handleClick
+  }, {
+    default: h(() => [
+      b("div", {
+        ref: "canvas",
+        class: p([
+          t.canvasClass,
+          "d-avatar__canvas",
+          { "d-avatar--image-loaded": o.imageLoadedSuccessfully }
+        ])
+      }, [
+        n.showImage ? (i(), r("img", {
+          key: 0,
+          ref: "avatarImage",
+          class: "d-avatar__image",
+          "data-qa": "dt-avatar-image",
+          src: t.imageSrc,
+          alt: t.imageAlt || t.fullName
+        }, null, 8, Oe)) : t.iconName ? (i(), u(c, {
+          key: 1,
+          name: t.iconName,
+          size: t.iconSize || o.AVATAR_ICON_SIZES[t.size],
+          class: p([t.iconClass, o.AVATAR_KIND_MODIFIERS.icon]),
+          "data-qa": "dt-avatar-icon"
+        }, null, 8, ["name", "size", "class"])) : (i(), r("span", {
+          key: 2,
+          class: p([o.AVATAR_KIND_MODIFIERS.initials, "d-ps-absolute d-zi-base d-us-none"])
+        }, A(o.formattedInitials), 3))
+      ], 2),
+      t.overlayIcon || t.overlayText ? (i(), r("div", {
+        key: 0,
+        class: p(n.overlayClasses)
+      }, [
+        t.overlayIcon ? (i(), u(c, {
+          key: 0,
+          class: "d-avatar__overlay-icon",
+          name: t.overlayIcon
+        }, null, 8, ["name"])) : t.overlayText ? (i(), r("p", Ae, A(t.overlayText), 1)) : d("", !0)
+      ], 2)) : d("", !0),
+      n.showGroup ? (i(), r("span", ke, A(n.formattedGroup), 1)) : d("", !0),
+      t.presence && !n.showGroup ? (i(), u(_, T({
+        key: 2,
+        presence: t.presence,
+        class: [
+          "d-avatar__presence",
+          o.AVATAR_PRESENCE_SIZE_MODIFIERS[t.size]
+        ]
+      }, t.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : d("", !0)
+    ]),
+    _: 1
+  }, 8, ["id", "class", "aria-label", "onClick"]);
+}
+const Dt = /* @__PURE__ */ y(Ie, [["render", Te]]), M = ["base", "error", "info", "success", "warning"], we = ["alert", "alertdialog", "status"], Pe = /* @__PURE__ */ new Map([
   ["info", "info"],
   ["success", "check-circle"],
   ["warning", "alert-triangle"],
   ["error", "alert-circle"],
   ["base", "bell"]
-]), X = {
+]), Le = {
   name: "DtNoticeIcon",
   components: {
-    DtIcon: E
+    DtIcon: I
   },
   props: {
     /**
@@ -20,37 +454,37 @@ const $ = ["base", "error", "info", "success", "warning"], G = ["alert", "alertd
       type: String,
       default: "base",
       validate(e) {
-        return $.includes(e);
+        return M.includes(e);
       }
     }
   },
   data() {
     return {
-      hasSlotContent: P
+      hasSlotContent: L
     };
   },
   computed: {
     defaultIcon() {
-      return Z.get(this.kind);
+      return Pe.get(this.kind);
     }
   }
-}, J = {
+}, Ne = {
   key: 0,
   "aria-hidden": "true",
   class: "d-notice__icon"
 };
-function Q(e, t, o, i, n, s) {
-  const u = c("dt-icon");
-  return s.defaultIcon || n.hasSlotContent(e.$slots.default) ? (l(), h("div", J, [
-    a(e.$slots, "default", {}, () => [
-      _(u, {
-        name: s.defaultIcon,
+function De(e, s, t, a, o, n) {
+  const c = f("dt-icon");
+  return n.defaultIcon || o.hasSlotContent(e.$slots.default) ? (i(), r("div", Ne, [
+    l(e.$slots, "default", {}, () => [
+      g(c, {
+        name: n.defaultIcon,
         size: "400"
       }, null, 8, ["name"])
     ])
-  ])) : r("", !0);
+  ])) : d("", !0);
 }
-const ee = /* @__PURE__ */ v(X, [["render", Q]]), te = {
+const Re = /* @__PURE__ */ y(Le, [["render", De]]), Fe = {
   name: "DtNoticeContent",
   props: {
     /**
@@ -79,35 +513,35 @@ const ee = /* @__PURE__ */ v(X, [["render", Q]]), te = {
   },
   data() {
     return {
-      hasSlotContent: P
+      hasSlotContent: L
     };
   }
-}, oe = {
+}, Be = {
   class: "d-notice__content",
   "data-qa": "notice-content"
-}, se = ["id"], ne = ["id"];
-function ie(e, t, o, i, n, s) {
-  return l(), h("div", oe, [
-    o.title || n.hasSlotContent(e.$slots.titleOverride) ? (l(), h("p", {
+}, He = ["id"], Ve = ["id"];
+function xe(e, s, t, a, o, n) {
+  return i(), r("div", Be, [
+    t.title || o.hasSlotContent(e.$slots.titleOverride) ? (i(), r("p", {
       key: 0,
-      id: o.titleId,
+      id: t.titleId,
       class: "d-notice__title",
       "data-qa": "notice-content-title"
     }, [
-      a(e.$slots, "titleOverride", {}, () => [
-        z(W(o.title), 1)
+      l(e.$slots, "titleOverride", {}, () => [
+        le(A(t.title), 1)
       ])
-    ], 8, se)) : r("", !0),
-    C("p", {
-      id: o.contentId,
+    ], 8, He)) : d("", !0),
+    b("p", {
+      id: t.contentId,
       class: "d-notice__message",
       "data-qa": "notice-content-message"
     }, [
-      a(e.$slots, "default")
-    ], 8, ne)
+      l(e.$slots, "default")
+    ], 8, Ve)
   ]);
 }
-const le = /* @__PURE__ */ v(te, [["render", ie]]), I = {
+const $e = /* @__PURE__ */ y(Fe, [["render", xe]]), B = {
   props: {
     /**
      * If true, a hidden close button is included for screen readers
@@ -146,11 +580,11 @@ const le = /* @__PURE__ */ v(te, [["render", ie]]), I = {
            a visually hidden close button and you must set the visuallyHiddenCloseLabel prop.`);
     }
   }
-}, ae = {
+}, qe = {
   name: "SrOnlyCloseButton",
   components: {
-    DtIcon: E,
-    DtButton: L
+    DtIcon: I,
+    DtButton: F
   },
   props: {
     /**
@@ -169,30 +603,30 @@ const le = /* @__PURE__ */ v(te, [["render", ie]]), I = {
     }
   }
 };
-function re(e, t, o, i, n, s) {
-  const u = c("dt-icon"), m = c("dt-button");
-  return l(), f(m, {
+function je(e, s, t, a, o, n) {
+  const c = f("dt-icon"), _ = f("dt-button");
+  return i(), u(_, {
     id: "sr-only-close-button",
     "data-qa": "dt-sr-only-close-button",
     class: "d-vi-visible-sr",
-    "aria-label": o.visuallyHiddenCloseLabel,
-    onClick: s.close,
-    onKeydown: g(S(s.close, ["prevent", "stop"]), ["space"])
+    "aria-label": t.visuallyHiddenCloseLabel,
+    onClick: n.close,
+    onKeydown: E(P(n.close, ["prevent", "stop"]), ["space"])
   }, {
-    default: d(() => [
-      _(u, { name: "close" })
+    default: h(() => [
+      g(c, { name: "close" })
     ]),
     _: 1
   }, 8, ["aria-label", "onClick", "onKeydown"]);
 }
-const F = /* @__PURE__ */ v(ae, [["render", re]]), de = {
+const W = /* @__PURE__ */ y(qe, [["render", je]]), Ke = {
   name: "DtNoticeAction",
   components: {
-    DtIcon: E,
-    DtButton: L,
-    SrOnlyCloseButton: F
+    DtIcon: I,
+    DtButton: F,
+    SrOnlyCloseButton: W
   },
-  mixins: [I],
+  mixins: [B],
   props: {
     /**
      * Props for the notice close button.
@@ -233,39 +667,39 @@ const F = /* @__PURE__ */ v(ae, [["render", re]]), de = {
       this.$emit("close");
     }
   }
-}, ce = {
+}, ze = {
   class: "d-notice__actions",
   "data-qa": "notice-content-actions"
 };
-function ue(e, t, o, i, n, s) {
-  const u = c("dt-icon"), m = c("dt-button"), y = c("sr-only-close-button");
-  return l(), h("div", ce, [
-    a(e.$slots, "default"),
-    o.hideClose ? r("", !0) : (l(), f(m, k({
+function Me(e, s, t, a, o, n) {
+  const c = f("dt-icon"), _ = f("dt-button"), v = f("sr-only-close-button");
+  return i(), r("div", ze, [
+    l(e.$slots, "default"),
+    t.hideClose ? d("", !0) : (i(), u(_, T({
       key: 0,
       ref: "closeButton",
       "data-qa": "dt-notice-action-close-button",
       size: "sm",
       importance: "clear",
       circle: "",
-      "aria-label": o.closeButtonProps.ariaLabel ? o.closeButtonProps.ariaLabel : "Close"
-    }, o.closeButtonProps, { onClick: s.close }), {
-      icon: d(() => [
-        _(u, {
+      "aria-label": t.closeButtonProps.ariaLabel ? t.closeButtonProps.ariaLabel : "Close"
+    }, t.closeButtonProps, { onClick: n.close }), {
+      icon: h(() => [
+        g(c, {
           name: "close",
           size: "200"
         })
       ]),
       _: 1
     }, 16, ["aria-label", "onClick"])),
-    e.showVisuallyHiddenClose ? (l(), f(y, {
+    e.showVisuallyHiddenClose ? (i(), u(v, {
       key: 1,
       "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
-      onClose: s.close
-    }, null, 8, ["visually-hidden-close-label", "onClose"])) : r("", !0)
+      onClose: n.close
+    }, null, 8, ["visually-hidden-close-label", "onClose"])) : d("", !0)
   ]);
 }
-const pe = /* @__PURE__ */ v(de, [["render", ue]]), N = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', he = `${N}:not([tabindex="-1"])`, fe = "button,[href],input,select,textarea,details,[tabindex]", me = {
+const We = /* @__PURE__ */ y(Ke, [["render", Me]]), G = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', Ge = `${G}:not([tabindex="-1"])`, Ue = "button,[href],input,select,textarea,details,[tabindex]", Ye = {
   methods: {
     /**
      * get the first focusable element in your component, includes tabindex="-1".
@@ -274,8 +708,8 @@ const pe = /* @__PURE__ */ v(de, [["render", ue]]), N = ':not(:disabled):not([ar
      */
     async getFirstFocusableElement(e) {
       await this.$nextTick();
-      const t = this._getFocusableElements(e, !0);
-      return this._getFirstFocusElement(t);
+      const s = this._getFocusableElements(e, !0);
+      return this._getFirstFocusElement(s);
     },
     /**
      * set focus to the first focusable element in your component, includes tabindex="-1".
@@ -283,8 +717,8 @@ const pe = /* @__PURE__ */ v(de, [["render", ue]]), N = ':not(:disabled):not([ar
      *  will default to the root node of the vue component
      */
     async focusFirstElement(e) {
-      const t = await this.getFirstFocusableElement(e);
-      t == null || t.focus({ preventScroll: !0 });
+      const s = await this.getFirstFocusableElement(e);
+      s == null || s.focus({ preventScroll: !0 });
     },
     /**
      * internal use only.
@@ -296,8 +730,8 @@ const pe = /* @__PURE__ */ v(de, [["render", ue]]), N = ':not(:disabled):not([ar
     _getFirstFocusElement(e) {
       if (!e.length)
         return;
-      let t = e[0];
-      return t.matches('[type="radio"]:not(:checked)') && (t = e.find((o) => o.checked && o.name === t.name) || t), t;
+      let s = e[0];
+      return s.matches('[type="radio"]:not(:checked)') && (s = e.find((t) => t.checked && t.name === s.name) || s), s;
     },
     /**
      * internal use only.
@@ -308,10 +742,10 @@ const pe = /* @__PURE__ */ v(de, [["render", ue]]), N = ':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, t = !1) {
-      return e ? [...e.querySelectorAll(fe)].filter((i) => {
-        const n = window.getComputedStyle(i);
-        return n.getPropertyValue("display") !== "none" && n.getPropertyValue("visibility") !== "hidden" && i.matches(t ? N : he);
+    _getFocusableElements(e = this.$el, s = !1) {
+      return e ? [...e.querySelectorAll(Ue)].filter((a) => {
+        const o = window.getComputedStyle(a);
+        return o.getPropertyValue("display") !== "none" && o.getPropertyValue("visibility") !== "hidden" && a.matches(s ? G : Ge);
       }) : [];
     },
     /**
@@ -320,27 +754,60 @@ const pe = /* @__PURE__ */ v(de, [["render", ue]]), N = ':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, t) {
+    focusTrappedTabPress(e, s) {
       if (!(e.key === "Tab"))
         return;
-      const i = this._getFocusableElements(t);
-      if (!i.length) {
+      const a = this._getFocusableElements(s);
+      if (!a.length) {
         e.preventDefault();
         return;
       }
-      const n = this._getFirstFocusElement(i), s = i[i.length - 1];
-      e.shiftKey ? document.activeElement === n && (s.focus(), e.preventDefault()) : document.activeElement === s && (n.focus(), e.preventDefault());
+      const o = this._getFirstFocusElement(a), n = a[a.length - 1];
+      e.shiftKey ? document.activeElement === o && (n.focus(), e.preventDefault()) : document.activeElement === n && (o.focus(), e.preventDefault());
     }
   }
-}, T = {
+}, Ze = {
+  name: "DtLink",
+  props: {
+    /**
+     * Applies the link variant styles
+     * @values null, danger, warning, success, muted, inverted
+     */
+    kind: {
+      type: String,
+      default: "",
+      validator(e) {
+        return Q.includes(e);
+      }
+    }
+  },
+  data() {
+    return {
+      LINK_KIND_MODIFIERS: ee
+    };
+  }
+}, Xe = ["href"];
+function Je(e, s, t, a, o, n) {
+  return i(), r("a", {
+    class: p([
+      "d-link",
+      o.LINK_KIND_MODIFIERS[t.kind]
+    ]),
+    "data-qa": "dt-link",
+    href: "href" in e.$attrs ? e.$attrs.href : "javascript:void(0)"
+  }, [
+    l(e.$slots, "default")
+  ], 10, Xe);
+}
+const Rt = /* @__PURE__ */ y(Ze, [["render", Je]]), D = {
   DEFAULT: "default",
   CUSTOM: "custom"
-}, O = {
+}, w = {
   ARROW_KEYS: "arrow-keys",
   TAB: "tab",
   NONE: "none"
 };
-const ye = {
+const Qe = {
   name: "DtItemLayout",
   props: {
     /**
@@ -351,67 +818,67 @@ const ye = {
       default: "div"
     }
   }
-}, _e = {
+}, et = {
   key: 0,
   "data-qa": "dt-item-layout-left-wrapper",
   class: "dt-item-layout--left"
-}, ve = {
+}, tt = {
   "data-qa": "dt-item-layout-content-wrapper",
   class: "dt-item-layout--content"
-}, be = {
+}, st = {
   key: 0,
   "data-qa": "dt-item-layout-title-wrapper",
   class: "dt-item-layout--title"
-}, ge = {
+}, nt = {
   key: 2,
   "data-qa": "dt-item-layout-bottom-wrapper",
   class: "dt-item-layout--bottom"
-}, Ce = {
+}, ot = {
   key: 1,
   "data-qa": "dt-item-layout-right-wrapper",
   class: "dt-item-layout--right"
-}, Ee = {
+}, it = {
   key: 2,
   "data-qa": "dt-item-layout-selected-wrapper",
   class: "dt-item-layout--selected"
 };
-function Oe(e, t, o, i, n, s) {
-  return l(), f(w(o.as), { class: "dt-item-layout" }, {
-    default: d(() => [
-      e.$slots.left ? (l(), h("section", _e, [
-        a(e.$slots, "left", {}, void 0, !0)
-      ])) : r("", !0),
-      C("section", ve, [
-        e.$slots.default ? (l(), h("div", be, [
-          a(e.$slots, "default", {}, void 0, !0)
-        ])) : r("", !0),
-        e.$slots.subtitle ? (l(), h("div", {
+function at(e, s, t, a, o, n) {
+  return i(), u(C(t.as), { class: "dt-item-layout" }, {
+    default: h(() => [
+      e.$slots.left ? (i(), r("section", et, [
+        l(e.$slots, "left", {}, void 0, !0)
+      ])) : d("", !0),
+      b("section", tt, [
+        e.$slots.default ? (i(), r("div", st, [
+          l(e.$slots, "default", {}, void 0, !0)
+        ])) : d("", !0),
+        e.$slots.subtitle ? (i(), r("div", {
           key: 1,
           "data-qa": "dt-item-layout-subtitle-wrapper",
-          class: b(["dt-item-layout--subtitle", { "d-mtn2": e.$slots.default }])
+          class: p(["dt-item-layout--subtitle", { "d-mtn2": e.$slots.default }])
         }, [
-          a(e.$slots, "subtitle", {}, void 0, !0)
-        ], 2)) : r("", !0),
-        e.$slots.bottom ? (l(), h("div", ge, [
-          a(e.$slots, "bottom", {}, void 0, !0)
-        ])) : r("", !0)
+          l(e.$slots, "subtitle", {}, void 0, !0)
+        ], 2)) : d("", !0),
+        e.$slots.bottom ? (i(), r("div", nt, [
+          l(e.$slots, "bottom", {}, void 0, !0)
+        ])) : d("", !0)
       ]),
-      e.$slots.right ? (l(), h("section", Ce, [
-        a(e.$slots, "right", {}, void 0, !0)
-      ])) : r("", !0),
-      e.$slots.selected ? (l(), h("section", Ee, [
-        a(e.$slots, "selected", {}, void 0, !0)
-      ])) : r("", !0)
+      e.$slots.right ? (i(), r("section", ot, [
+        l(e.$slots, "right", {}, void 0, !0)
+      ])) : d("", !0),
+      e.$slots.selected ? (i(), r("section", it, [
+        l(e.$slots, "selected", {}, void 0, !0)
+      ])) : d("", !0)
     ]),
     _: 3
   });
 }
-const B = /* @__PURE__ */ v(ye, [["render", Oe], ["__scopeId", "data-v-9afad3c4"]]);
-const Se = {
+const $ = /* @__PURE__ */ y(Qe, [["render", at], ["__scopeId", "data-v-9afad3c4"]]);
+const lt = {
   name: "DtListItem",
   components: {
-    DtItemLayout: B,
-    DtIcon: E
+    DtItemLayout: $,
+    DtIcon: I
   },
   /**
    * Value provided from keyboard_list_navigation.js using id prop.
@@ -426,7 +893,7 @@ const Se = {
     id: {
       type: String,
       default() {
-        return R.getUniqueString();
+        return te.getUniqueString();
       }
     },
     /**
@@ -449,8 +916,8 @@ const Se = {
      */
     type: {
       type: String,
-      default: T.DEFAULT,
-      validator: (e) => Object.values(T).includes(e)
+      default: D.DEFAULT,
+      validator: (e) => Object.values(D).includes(e)
     },
     /**
      * The type of navigation that this component should support.
@@ -461,8 +928,8 @@ const Se = {
      */
     navigationType: {
       type: String,
-      default: O.NONE,
-      validator: (e) => Object.values(O).includes(e)
+      default: w.NONE,
+      validator: (e) => Object.values(w).includes(e)
     },
     /**
      * Applies selected styles to the list item
@@ -510,8 +977,8 @@ const Se = {
   computed: {
     listItemType() {
       switch (this.type) {
-        case T.DEFAULT:
-          return B;
+        case D.DEFAULT:
+          return $;
         default:
           return null;
       }
@@ -537,13 +1004,13 @@ const Se = {
       return this.isHoverable ? this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted : !1;
     },
     isFocusable() {
-      return this.navigationType === O.TAB;
+      return this.navigationType === w.TAB;
     },
     /**
      * Whether to apply hover styles.
      */
     isHoverable() {
-      return this.navigationType !== O.NONE;
+      return this.navigationType !== w.NONE;
     }
   },
   methods: {
@@ -558,31 +1025,31 @@ const Se = {
     }
   }
 };
-function we(e, t, o, i, n, s) {
-  const u = c("dt-icon");
-  return l(), f(w(o.elementType), k({
-    id: o.id,
+function rt(e, s, t, a, o, n) {
+  const c = f("dt-icon");
+  return i(), u(C(t.elementType), T({
+    id: t.id,
     class: ["dt-list-item", {
-      "dt-list-item--focusable": s.isFocusable,
-      "dt-list-item--highlighted": s.isHighlighted,
-      "dt-list-item--static": !s.isHoverable
+      "dt-list-item--focusable": n.isFocusable,
+      "dt-list-item--highlighted": n.isHighlighted,
+      "dt-list-item--static": !n.isHoverable
     }],
-    tabindex: s.isFocusable ? 0 : -1,
-    role: o.role,
-    "aria-selected": s.isHighlighted
-  }, D(s.listItemListeners)), {
-    default: d(() => [
-      s.listItemType ? (l(), f(w(s.listItemType), { key: 0 }, j({ _: 2 }, [
-        U(e.$slots, (m, y) => ({
-          name: y,
-          fn: d(() => [
-            a(e.$slots, y)
+    tabindex: n.isFocusable ? 0 : -1,
+    role: t.role,
+    "aria-selected": n.isHighlighted
+  }, z(n.listItemListeners)), {
+    default: h(() => [
+      n.listItemType ? (i(), u(C(n.listItemType), { key: 0 }, re({ _: 2 }, [
+        de(e.$slots, (_, v) => ({
+          name: v,
+          fn: h(() => [
+            l(e.$slots, v)
           ])
         })),
-        o.selected ? {
+        t.selected ? {
           name: "selected",
-          fn: d(() => [
-            _(u, {
+          fn: h(() => [
+            g(c, {
               name: "check",
               size: "400",
               class: "dt-list-item--selected-icon"
@@ -590,28 +1057,28 @@ function we(e, t, o, i, n, s) {
           ]),
           key: "0"
         } : void 0
-      ]), 1024)) : a(e.$slots, "default", { key: 1 })
+      ]), 1024)) : l(e.$slots, "default", { key: 1 })
     ]),
     _: 3
   }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-const Ke = /* @__PURE__ */ v(Se, [["render", we]]), H = {
+const Ft = /* @__PURE__ */ y(lt, [["render", rt]]), q = {
   none: void 0,
   small: "d-p4",
   medium: "d-p8",
   large: "d-p16"
-}, Pe = {
+}, dt = {
   none: void 0,
   small: "d-pl4",
   medium: "d-pl8",
   large: "d-pl16"
-}, ke = ["dialog", "menu", "listbox", "tree", "grid"], Te = ["", "anchor"], Le = ["none", "dialog", "first"], Ie = ["parent", "body"], Ae = [
-  ...V
-], Be = {
+}, ct = ["dialog", "menu", "listbox", "tree", "grid"], ut = ["", "anchor"], ht = ["none", "dialog", "first"], ft = ["parent", "body"], pt = [
+  ...se
+], mt = {
   name: "PopoverHeaderFooter",
   components: {
-    DtButton: L,
-    DtIcon: E
+    DtButton: F,
+    DtIcon: I
   },
   props: {
     // eslint-disable-next-line vue/require-default-prop
@@ -657,34 +1124,34 @@ const Ke = /* @__PURE__ */ v(Se, [["render", we]]), H = {
   ],
   data() {
     return {
-      hasSlotContent: P
+      hasSlotContent: L
     };
   },
   methods: {
     focusCloseButton() {
-      var t;
-      const e = (t = this.$refs["popover__close-button"]) == null ? void 0 : t.$el;
+      var s;
+      const e = (s = this.$refs["popover__close-button"]) == null ? void 0 : s.$el;
       e == null || e.focus();
     }
   }
 };
-function He(e, t, o, i, n, s) {
-  const u = c("dt-icon"), m = c("dt-button");
-  return l(), h("div", {
+function yt(e, s, t, a, o, n) {
+  const c = f("dt-icon"), _ = f("dt-button");
+  return i(), r("div", {
     "data-qa": "dt-popover-header-footer",
-    class: b({
-      "d-popover__header": o.type === "header",
-      "d-popover__footer": o.type === "footer"
+    class: p({
+      "d-popover__header": t.type === "header",
+      "d-popover__footer": t.type === "footer"
     })
   }, [
-    n.hasSlotContent(e.$slots.content) ? (l(), h("div", {
+    o.hasSlotContent(e.$slots.content) ? (i(), r("div", {
       key: 0,
       "data-qa": "dt-popover-header-footer-content",
-      class: b(["d-to-ellipsis", "d-w100p", o.contentClass])
+      class: p(["d-to-ellipsis", "d-w100p", t.contentClass])
     }, [
-      a(e.$slots, "content")
-    ], 2)) : r("", !0),
-    o.showCloseButton ? (l(), f(m, k({
+      l(e.$slots, "content")
+    ], 2)) : d("", !0),
+    t.showCloseButton ? (i(), u(_, T({
       key: 1,
       ref: "popover__close-button",
       "data-qa": "dt-popover-close",
@@ -692,31 +1159,31 @@ function He(e, t, o, i, n, s) {
       importance: "outlined",
       kind: "muted",
       circle: ""
-    }, o.closeButtonProps, {
-      onClick: t[0] || (t[0] = (y) => e.$emit("close"))
+    }, t.closeButtonProps, {
+      onClick: s[0] || (s[0] = (v) => e.$emit("close"))
     }), {
-      icon: d(() => [
-        _(u, {
+      icon: h(() => [
+        g(c, {
           name: "close",
           size: "300"
         })
       ]),
       _: 1
-    }, 16)) : r("", !0)
+    }, 16)) : d("", !0)
   ], 2);
 }
-const De = /* @__PURE__ */ v(Be, [["render", He]]);
-const $e = {
+const _t = /* @__PURE__ */ y(mt, [["render", yt]]);
+const vt = {
   name: "DtPopover",
   /********************
    * CHILD COMPONENTS *
    ********************/
   components: {
-    SrOnlyCloseButton: F,
-    DtLazyShow: q,
-    PopoverHeaderFooter: De
+    SrOnlyCloseButton: W,
+    DtLazyShow: ne,
+    PopoverHeaderFooter: _t
   },
-  mixins: [me, I],
+  mixins: [Ye, B],
   props: {
     /**
      * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
@@ -759,7 +1226,7 @@ const $e = {
     role: {
       type: String,
       default: "dialog",
-      validator: (e) => ke.includes(e)
+      validator: (e) => ct.includes(e)
     },
     /**
      * ID of the element that serves as the label for the popover content.
@@ -795,7 +1262,7 @@ const $e = {
     padding: {
       type: String,
       default: "large",
-      validator: (e) => Object.keys(H).some((t) => t === e)
+      validator: (e) => Object.keys(q).some((s) => s === e)
     },
     /**
      * Additional class name for the content wrapper element.
@@ -812,7 +1279,7 @@ const $e = {
     contentWidth: {
       type: String,
       default: "",
-      validator: (e) => Te.includes(e)
+      validator: (e) => ut.includes(e)
     },
     /**
      * Whether to apply transition on initial render in the content lazy show component.
@@ -842,7 +1309,7 @@ const $e = {
     id: {
       type: String,
       default() {
-        return A();
+        return R();
       }
     },
     /**
@@ -946,7 +1413,7 @@ const $e = {
     sticky: {
       type: [Boolean, String],
       default: !1,
-      validator: (e) => Ae.includes(e)
+      validator: (e) => pt.includes(e)
     },
     /**
      * Determines maximum height for the popover before overflow.
@@ -1004,7 +1471,7 @@ const $e = {
     initialFocusElement: {
       type: [String, HTMLElement],
       default: "first",
-      validator: (e) => Le.includes(e) || e instanceof HTMLElement || e.startsWith("#")
+      validator: (e) => ht.includes(e) || e instanceof HTMLElement || e.startsWith("#")
     },
     /**
      * If the popover should open pressing up or down arrow key on the anchor element.
@@ -1023,7 +1490,7 @@ const $e = {
     appendTo: {
       type: [HTMLElement, String],
       default: "body",
-      validator: (e) => Ie.includes(e) || e instanceof HTMLElement
+      validator: (e) => ft.includes(e) || e instanceof HTMLElement
     }
   },
   emits: [
@@ -1049,15 +1516,15 @@ const $e = {
   ],
   data() {
     return {
-      POPOVER_PADDING_CLASSES: H,
-      POPOVER_HEADER_FOOTER_PADDING_CLASSES: Pe,
+      POPOVER_PADDING_CLASSES: q,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES: dt,
       intersectionObserver: null,
       isOutsideViewport: !1,
       isOpen: !1,
       toAppear: !1,
       anchorEl: null,
       popoverContentEl: null,
-      hasSlotContent: P
+      hasSlotContent: L
     };
   },
   computed: {
@@ -1078,7 +1545,7 @@ const $e = {
       return this.isOutsideViewport && this.modal ? "calc(100vh - var(--dt-space-300))" : this.maxHeight;
     },
     labelledBy() {
-      return this.ariaLabelledby || !this.ariaLabel && A("DtPopover__anchor");
+      return this.ariaLabelledby || !this.ariaLabel && R("DtPopover__anchor");
     }
   },
   watch: {
@@ -1090,20 +1557,20 @@ const $e = {
       }
     },
     modal(e) {
-      var t;
-      (t = this.tip) == null || t.setProps({
+      var s;
+      (s = this.tip) == null || s.setProps({
         zIndex: e ? 650 : this.calculateAnchorZindex()
       });
     },
     offset(e) {
-      var t;
-      (t = this.tip) == null || t.setProps({
+      var s;
+      (s = this.tip) == null || s.setProps({
         offset: e
       });
     },
     sticky(e) {
-      var t;
-      (t = this.tip) == null || t.setProps({
+      var s;
+      (s = this.tip) == null || s.setProps({
         sticky: e
       });
     },
@@ -1120,8 +1587,8 @@ const $e = {
       });
     },
     placement(e) {
-      var t;
-      (t = this.tip) == null || t.setProps({
+      var s;
+      (s = this.tip) == null || s.setProps({
         placement: e
       });
     },
@@ -1136,8 +1603,8 @@ const $e = {
         e !== null && (this.toAppear = e);
       }
     },
-    isOpen(e, t) {
-      e ? (this.initTippyInstance(), this.tip.show()) : !e && t !== e && (this.removeEventListeners(), this.tip.hide());
+    isOpen(e, s) {
+      e ? (this.initTippyInstance(), this.tip.show()) : !e && s !== e && (this.removeEventListeners(), this.tip.hide());
     }
   },
   mounted() {
@@ -1153,15 +1620,15 @@ const $e = {
    ******************/
   methods: {
     hasIntersectedViewport(e) {
-      var i;
-      const t = (i = e == null ? void 0 : e[0]) == null ? void 0 : i.target;
-      if (!t)
+      var a;
+      const s = (a = e == null ? void 0 : e[0]) == null ? void 0 : a.target;
+      if (!s)
         return;
-      const o = M(t);
-      this.isOutsideViewport = o.bottom || o.top;
+      const t = oe(s);
+      this.isOutsideViewport = t.bottom || t.top;
     },
     popperOptions() {
-      return x({
+      return ie({
         fallbackPlacements: this.fallbackPlacements,
         tether: this.tether,
         hasHideModifierEnabled: !0
@@ -1177,9 +1644,9 @@ const $e = {
       (e = this.anchorEl) != null && e.closest(".d-zi-drawer") ? 650 : 300;
     },
     defaultToggleOpen(e) {
-      var t, o, i;
+      var s, t, a;
       if (!this.openOnContext && (this.open === null || this.open === void 0)) {
-        if (!((t = this.anchorEl) != null && t.contains(e.target)) && !((o = this.anchorEl) != null && o.isEqualNode(e.target)) || (i = this.anchorEl) != null && i.disabled)
+        if (!((s = this.anchorEl) != null && s.contains(e.target)) && !((t = this.anchorEl) != null && t.isEqualNode(e.target)) || (a = this.anchorEl) != null && a.disabled)
           return;
         this.toggleOpen();
       }
@@ -1201,8 +1668,8 @@ const $e = {
       this.isOpen = !this.isOpen;
     },
     onArrowKeyPress(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));
+      var s;
+      this.open === null && (this.openWithArrowKeys && ((s = this.anchorEl) != null && s.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);
@@ -1222,17 +1689,17 @@ const $e = {
     preventScrolling() {
       var e;
       if (this.modal) {
-        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");
+        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");
       }
     },
     /*
     * Resets the prevent scrolling properties set in preventScrolling() back to normal.
     **/
     enableScrolling() {
-      var t, o;
-      const e = (t = this.anchorEl) == null ? void 0 : t.closest("body, .tippy-box");
-      e && (((o = e.tagName) == null ? void 0 : o.toLowerCase()) === "body" ? (e.classList.remove("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : e.classList.remove("d-zi-popover"));
+      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"));
     },
     removeReferences() {
       this.anchorEl = null, this.popoverContentEl = null, this.tip = null;
@@ -1251,9 +1718,9 @@ const $e = {
       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 t, o, i;
-      const e = (o = (t = this.$refs.content) == null ? void 0 : t.$el) == null ? void 0 : o.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();
+      var s, t, a;
+      const e = (t = (s = this.$refs.content) == null ? void 0 : s.$el) == null ? void 0 : t.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() : (a = this.$refs.content) == null || a.$el.focus();
     },
     onResize() {
       this.closePopover();
@@ -1271,18 +1738,18 @@ const $e = {
       await this.$nextTick(), this.popoverContentEl.style.width = `${(e = this.anchorEl) == null ? void 0 : e.clientWidth}px`;
     },
     focusFirstElementIfNeeded(e) {
-      var o, i;
-      this._getFocusableElements(e, !0).length !== 0 ? this.focusFirstElement(e) : this.showCloseButton ? (o = this.$refs.popover__header) == null || o.focusCloseButton() : (i = this.$refs.content) == null || i.$el.focus();
+      var t, a;
+      this._getFocusableElements(e, !0).length !== 0 ? this.focusFirstElement(e) : this.showCloseButton ? (t = this.$refs.popover__header) == null || t.focusCloseButton() : (a = this.$refs.content) == null || a.$el.focus();
     },
     initTippyInstance() {
-      var e, t;
-      this.tip = K(this.anchorEl, {
+      var e, s;
+      this.tip = ae(this.anchorEl, {
         popperOptions: this.popperOptions(),
         contentElement: this.popoverContentEl,
         placement: this.placement,
         offset: this.offset,
         sticky: this.sticky,
-        appendTo: this.appendTo === "body" ? (t = (e = this.anchorEl) == null ? void 0 : e.getRootNode()) == null ? void 0 : t.querySelector("body") : this.appendTo,
+        appendTo: this.appendTo === "body" ? (s = (e = this.anchorEl) == null ? void 0 : e.getRootNode()) == null ? void 0 : s.querySelector("body") : this.appendTo,
         interactive: !0,
         trigger: "manual",
         // We have to manage hideOnClick functionality manually to handle
@@ -1294,114 +1761,114 @@ const $e = {
       });
     }
   }
-}, Fe = ["aria-hidden"], Ne = ["id", "tabindex"];
-function Re(e, t, o, i, n, s) {
-  const u = c("popover-header-footer"), m = c("sr-only-close-button"), y = c("dt-lazy-show");
-  return l(), h("div", null, [
-    o.modal && n.isOpen ? (l(), f(Y, {
+}, gt = ["aria-hidden"], bt = ["id", "tabindex"];
+function St(e, s, t, a, o, n) {
+  const c = f("popover-header-footer"), _ = f("sr-only-close-button"), v = f("dt-lazy-show");
+  return i(), r("div", null, [
+    t.modal && o.isOpen ? (i(), u(ce, {
       key: 0,
       to: "body"
     }, [
-      C("div", {
+      b("div", {
         class: "d-modal--transparent",
-        "aria-hidden": o.modal && n.isOpen ? "false" : "true",
-        onClick: t[0] || (t[0] = S(() => {
+        "aria-hidden": t.modal && o.isOpen ? "false" : "true",
+        onClick: s[0] || (s[0] = P(() => {
         }, ["prevent", "stop"]))
-      }, null, 8, Fe)
-    ])) : r("", !0),
-    (l(), f(w(o.elementType), {
+      }, null, 8, gt)
+    ])) : d("", !0),
+    (i(), u(C(t.elementType), {
       ref: "popover",
-      class: b(["d-popover", { "d-popover__anchor--opened": n.isOpen }]),
+      class: p(["d-popover", { "d-popover__anchor--opened": o.isOpen }]),
       "data-qa": "dt-popover-container"
     }, {
-      default: d(() => [
-        C("div", {
-          id: !o.ariaLabelledby && s.labelledBy,
+      default: h(() => [
+        b("div", {
+          id: !t.ariaLabelledby && n.labelledBy,
           ref: "anchor",
           "data-qa": "dt-popover-anchor",
-          tabindex: o.openOnContext ? 0 : void 0,
-          onClickCapture: t[1] || (t[1] = (...p) => s.defaultToggleOpen && s.defaultToggleOpen(...p)),
-          onContextmenu: t[2] || (t[2] = (...p) => s.onContext && s.onContext(...p)),
+          tabindex: t.openOnContext ? 0 : void 0,
+          onClickCapture: s[1] || (s[1] = (...m) => n.defaultToggleOpen && n.defaultToggleOpen(...m)),
+          onContextmenu: s[2] || (s[2] = (...m) => n.onContext && n.onContext(...m)),
           onKeydown: [
-            t[3] || (t[3] = g(S((...p) => s.onArrowKeyPress && s.onArrowKeyPress(...p), ["prevent"]), ["up"])),
-            t[4] || (t[4] = g(S((...p) => s.onArrowKeyPress && s.onArrowKeyPress(...p), ["prevent"]), ["down"])),
-            t[6] || (t[6] = g((p) => e.$emit("keydown", p), ["enter"])),
-            t[7] || (t[7] = g((p) => e.$emit("keydown", p), ["space"]))
+            s[3] || (s[3] = E(P((...m) => n.onArrowKeyPress && n.onArrowKeyPress(...m), ["prevent"]), ["up"])),
+            s[4] || (s[4] = E(P((...m) => n.onArrowKeyPress && n.onArrowKeyPress(...m), ["prevent"]), ["down"])),
+            s[6] || (s[6] = E((m) => e.$emit("keydown", m), ["enter"])),
+            s[7] || (s[7] = E((m) => e.$emit("keydown", m), ["space"]))
           ],
-          onKeydownCapture: t[5] || (t[5] = g((...p) => s.closePopover && s.closePopover(...p), ["escape"]))
+          onKeydownCapture: s[5] || (s[5] = E((...m) => n.closePopover && n.closePopover(...m), ["escape"]))
         }, [
-          a(e.$slots, "anchor", {
+          l(e.$slots, "anchor", {
             attrs: {
-              "aria-expanded": n.isOpen.toString(),
-              "aria-controls": o.id,
-              "aria-haspopup": o.role
+              "aria-expanded": o.isOpen.toString(),
+              "aria-controls": t.id,
+              "aria-haspopup": t.role
             }
           })
-        ], 40, Ne),
-        _(y, k({
-          id: o.id,
+        ], 40, bt),
+        g(v, T({
+          id: t.id,
           ref: "content",
-          role: o.role,
+          role: t.role,
           "data-qa": "dt-popover",
-          "aria-hidden": `${!n.isOpen}`,
-          "aria-labelledby": s.labelledBy,
-          "aria-label": o.ariaLabel,
-          "aria-modal": `${!o.modal}`,
-          transition: o.transition,
-          show: n.isOpen,
-          appear: n.toAppear,
-          class: ["d-popover__dialog", { "d-popover__dialog--modal": o.modal }, o.dialogClass],
+          "aria-hidden": `${!o.isOpen}`,
+          "aria-labelledby": n.labelledBy,
+          "aria-label": t.ariaLabel,
+          "aria-modal": `${!t.modal}`,
+          transition: t.transition,
+          show: o.isOpen,
+          appear: o.toAppear,
+          class: ["d-popover__dialog", { "d-popover__dialog--modal": t.modal }, t.dialogClass],
           style: {
-            "max-height": s.calculatedMaxHeight,
-            "max-width": o.maxWidth
+            "max-height": n.calculatedMaxHeight,
+            "max-width": t.maxWidth
           },
           css: e.$attrs.css,
-          tabindex: o.contentTabindex
-        }, D(s.popoverListeners)), {
-          default: d(() => [
-            n.hasSlotContent(e.$slots.headerContent) || o.showCloseButton ? (l(), f(u, {
+          tabindex: t.contentTabindex
+        }, z(n.popoverListeners)), {
+          default: h(() => [
+            o.hasSlotContent(e.$slots.headerContent) || t.showCloseButton ? (i(), u(c, {
               key: 0,
               ref: "popover__header",
-              class: b(n.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),
-              "content-class": o.headerClass,
+              class: p(o.POPOVER_HEADER_FOOTER_PADDING_CLASSES[t.padding]),
+              "content-class": t.headerClass,
               type: "header",
-              "show-close-button": o.showCloseButton,
-              "close-button-props": o.closeButtonProps,
-              onClose: s.closePopover
+              "show-close-button": t.showCloseButton,
+              "close-button-props": t.closeButtonProps,
+              onClose: n.closePopover
             }, {
-              content: d(() => [
-                a(e.$slots, "headerContent", { close: s.closePopover })
+              content: h(() => [
+                l(e.$slots, "headerContent", { close: n.closePopover })
               ]),
               _: 3
-            }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : r("", !0),
-            C("div", {
+            }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : d("", !0),
+            b("div", {
               ref: "popover__content",
               "data-qa": "dt-popover-content",
-              class: b([
+              class: p([
                 "d-popover__content",
-                n.POPOVER_PADDING_CLASSES[o.padding],
-                o.contentClass
+                o.POPOVER_PADDING_CLASSES[t.padding],
+                t.contentClass
               ])
             }, [
-              a(e.$slots, "content", { close: s.closePopover })
+              l(e.$slots, "content", { close: n.closePopover })
             ], 2),
-            n.hasSlotContent(e.$slots.footerContent) ? (l(), f(u, {
+            o.hasSlotContent(e.$slots.footerContent) ? (i(), u(c, {
               key: 1,
               ref: "popover__footer",
               type: "footer",
-              class: b(n.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),
-              "content-class": o.footerClass
+              class: p(o.POPOVER_HEADER_FOOTER_PADDING_CLASSES[t.padding]),
+              "content-class": t.footerClass
             }, {
-              content: d(() => [
-                a(e.$slots, "footerContent", { close: s.closePopover })
+              content: h(() => [
+                l(e.$slots, "footerContent", { close: n.closePopover })
               ]),
               _: 3
-            }, 8, ["class", "content-class"])) : r("", !0),
-            e.showVisuallyHiddenClose ? (l(), f(m, {
+            }, 8, ["class", "content-class"])) : d("", !0),
+            e.showVisuallyHiddenClose ? (i(), u(_, {
               key: 2,
               "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
-              onClose: s.closePopover
-            }, null, 8, ["visually-hidden-close-label", "onClose"])) : r("", !0)
+              onClose: n.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"])
@@ -1410,14 +1877,14 @@ function Re(e, t, o, i, n, s) {
     }, 8, ["class"]))
   ]);
 }
-const ze = /* @__PURE__ */ v($e, [["render", Re]]), Ve = {
+const Bt = /* @__PURE__ */ y(vt, [["render", St]]), Et = {
   name: "DtNotice",
   components: {
-    DtNoticeIcon: ee,
-    DtNoticeContent: le,
-    DtNoticeAction: pe
+    DtNoticeIcon: Re,
+    DtNoticeContent: $e,
+    DtNoticeAction: We
   },
-  mixins: [I],
+  mixins: [B],
   props: {
     /**
      * Sets an ID on the title element of the component. Useful for aria-describedby
@@ -1452,7 +1919,7 @@ const ze = /* @__PURE__ */ v($e, [["render", Re]]), Ve = {
       type: String,
       default: "status",
       validate(e) {
-        return G.includes(e);
+        return we.includes(e);
       }
     },
     /**
@@ -1472,7 +1939,7 @@ const ze = /* @__PURE__ */ v($e, [["render", Re]]), Ve = {
       type: String,
       default: "base",
       validate(e) {
-        return $.includes(e);
+        return M.includes(e);
       }
     },
     /**
@@ -1522,64 +1989,189 @@ const ze = /* @__PURE__ */ v($e, [["render", Re]]), Ve = {
     }
   }
 };
-function qe(e, t, o, i, n, s) {
-  const u = c("dt-notice-icon"), m = c("dt-notice-content"), y = c("dt-notice-action");
-  return l(), h("aside", {
-    class: b(s.noticeClass),
+function Ct(e, s, t, a, o, n) {
+  const c = f("dt-notice-icon"), _ = f("dt-notice-content"), v = f("dt-notice-action");
+  return i(), r("aside", {
+    class: p(n.noticeClass),
     "data-qa": "notice"
   }, [
-    _(u, { kind: o.kind }, {
-      default: d(() => [
-        a(e.$slots, "icon")
+    g(c, { kind: t.kind }, {
+      default: h(() => [
+        l(e.$slots, "icon")
       ]),
       _: 3
     }, 8, ["kind"]),
-    _(m, {
-      "title-id": o.titleId,
-      "content-id": o.contentId,
-      title: o.title,
-      role: o.role
+    g(_, {
+      "title-id": t.titleId,
+      "content-id": t.contentId,
+      title: t.title,
+      role: t.role
     }, {
-      titleOverride: d(() => [
-        a(e.$slots, "titleOverride")
+      titleOverride: h(() => [
+        l(e.$slots, "titleOverride")
       ]),
-      default: d(() => [
-        a(e.$slots, "default")
+      default: h(() => [
+        l(e.$slots, "default")
       ]),
       _: 3
     }, 8, ["title-id", "content-id", "title", "role"]),
-    _(y, {
-      "hide-close": o.hideClose,
-      "close-button-props": o.closeButtonProps,
+    g(v, {
+      "hide-close": t.hideClose,
+      "close-button-props": t.closeButtonProps,
       "visually-hidden-close": e.visuallyHiddenClose,
       "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
-      onClose: t[0] || (t[0] = (p) => e.$emit("close"))
+      onClose: s[0] || (s[0] = (m) => e.$emit("close"))
     }, {
-      default: d(() => [
-        a(e.$slots, "action")
+      default: h(() => [
+        l(e.$slots, "action")
       ]),
       _: 3
     }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
   ], 2);
 }
-const We = /* @__PURE__ */ v(Ve, [["render", qe]]);
+const Ht = /* @__PURE__ */ y(Et, [["render", Ct]]), S = {
+  default: "column",
+  column: "column",
+  row: "row",
+  "row-reverse": "row-reverse",
+  "column-reverse": "column-reverse"
+}, U = ["sm", "md", "lg", "xl"], H = ["0", "100", "200", "300", "400", "500", "600"];
+function j(e) {
+  return e === S.default;
+}
+function K(e) {
+  if (k(e) === "string")
+    return j(e) ? null : S[e];
+  if (k(e) === "object") {
+    const { default: s } = e;
+    return j(s) ? null : S[s];
+  } else
+    return null;
+}
+function k(e) {
+  return typeof e;
+}
+function It(e) {
+  return K(e) ? `d-stack--${S[K(e)]}` : null;
+}
+function Ot(e) {
+  return k(e) === "object" ? [
+    ...U.map((s) => e[s] ? `d-stack--${s}--${e[s]}` : null)
+  ] : null;
+}
+function At(e) {
+  return H.includes(e) ? `d-stack--gap-${e}` : null;
+}
+function kt(e) {
+  if (k(e) === "string")
+    return Object.keys(S).includes(e);
+  if (k(e) === "object") {
+    const { default: s } = e;
+    return Object.keys(S).includes(s);
+  } else
+    return null;
+}
+function Tt(e) {
+  return H.includes(e);
+}
+const wt = {
+  name: "DtStack",
+  props: {
+    /**
+     * Set this prop to the direction to stack the items.
+     * You can override the default direction with 'default' key.
+     * All the undefined breakpoints will have 'default' value.
+     * By default, for the column direction it will have `justify-content: flex-start`
+     * and for the row direction `align-items: center`. This can be overriden
+     * by utility classes.
+     */
+    direction: {
+      type: [String, Object],
+      default: "column",
+      validator: (e) => kt(e)
+    },
+    /**
+     * Set this prop to render stack as a specific HTML element.
+     */
+    as: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * Set this prop to have the space between each stack item
+     * @values 0, 100, 200, 300, 400, 500, 600
+     */
+    gap: {
+      type: String,
+      default: "0",
+      validator: (e) => Tt(e)
+    }
+  },
+  data() {
+    return {
+      DT_STACK_DIRECTION: S,
+      DT_STACK_GAP: H,
+      DT_STACK_RESPONSIVE_BREAKPOINTS: U
+    };
+  },
+  computed: {
+    stackGap() {
+      return At(this.gap);
+    },
+    defaultDirection() {
+      return It(this.direction);
+    },
+    stackResponsive() {
+      return Ot(this.direction);
+    }
+  }
+};
+function Pt(e, s, t, a, o, n) {
+  return i(), u(C(t.as), {
+    class: p([
+      "d-stack",
+      n.defaultDirection,
+      n.stackResponsive,
+      n.stackGap
+    ])
+  }, {
+    default: h(() => [
+      l(e.$slots, "default")
+    ]),
+    _: 3
+  }, 8, ["class"]);
+}
+const Vt = /* @__PURE__ */ y(wt, [["render", Pt]]);
 export {
-  Ke as D,
-  O as L,
-  me as M,
-  $ as N,
-  Ie as P,
-  I as S,
-  We as a,
-  ze as b,
-  ee as c,
-  le as d,
-  pe as e,
-  F as f,
-  Te as g,
-  B as h,
-  H as i,
-  Pe as j,
-  ke as k,
-  Le as l
+  N as A,
+  Ft as D,
+  w as L,
+  Ye as M,
+  M as N,
+  ft as P,
+  B as S,
+  Vt as a,
+  Rt as b,
+  Dt as c,
+  Ht as d,
+  Bt as e,
+  Re as f,
+  $e as g,
+  We as h,
+  W as i,
+  ut as j,
+  $ as k,
+  _e as l,
+  ve as m,
+  V as n,
+  ge as o,
+  be as p,
+  x as q,
+  q as r,
+  dt as s,
+  ct as t,
+  ht as u,
+  ye as v,
+  O as w,
+  ue as x
 };