@dialpad/dialtone-vue 3.82.1 → 3.83.0

package/dist/{notice-67c02f04.js → notice-702ad033.js}

@@ -1,15 +1,15 @@
-import { _, D as O, h as P, f as S, ax as D, i as F, g as L, ay as H, az as N, aA as x } from "./emoji-dedd5dd0.js";
-import { resolveComponent as r, openBlock as l, createElementBlock as y, renderSlot as d, createVNode as m, createCommentVNode as p, createTextVNode as V, toDisplayString as R, createElementVNode as g, createBlock as f, withKeys as C, withModifiers as E, withCtx as u, mergeProps as w, normalizeClass as v, Teleport as q, resolveDynamicComponent as $, toHandlers as K } from "vue";
-const A = ["base", "error", "info", "success", "warning"], z = ["alert", "alertdialog", "status"], M = /* @__PURE__ */ new Map([
+import { _, D as E, h as P, f as L, u as R, ay as V, i as q, g as A, az as M, aA as x, aB as K } from "./emoji-3ed8aeab.js";
+import { resolveComponent as c, openBlock as l, createElementBlock as p, renderSlot as a, createVNode as v, 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 F = ["base", "error", "info", "success", "warning"], G = ["alert", "alertdialog", "status"], Z = /* @__PURE__ */ new Map([
   ["info", "info"],
   ["success", "check-circle"],
   ["warning", "alert-triangle"],
   ["error", "alert-circle"],
   ["base", "bell"]
-]), W = {
+]), X = {
   name: "DtNoticeIcon",
   components: {
-    DtIcon: O
+    DtIcon: E
   },
   props: {
     /**
@@ -20,7 +20,7 @@ const A = ["base", "error", "info", "success", "warning"], z = ["alert", "alertd
       type: String,
       default: "base",
       validate(e) {
-        return A.includes(e);
+        return F.includes(e);
       }
     }
   },
@@ -31,26 +31,26 @@ const A = ["base", "error", "info", "success", "warning"], z = ["alert", "alertd
   },
   computed: {
     defaultIcon() {
-      return M.get(this.kind);
+      return Z.get(this.kind);
     }
   }
-}, j = {
+}, J = {
   key: 0,
   "aria-hidden": "true",
   class: "d-notice__icon"
 };
-function U(e, t, o, i, s, n) {
-  const c = r("dt-icon");
-  return n.defaultIcon || s.hasSlotContent(e.$slots.default) ? (l(), y("div", j, [
-    d(e.$slots, "default", {}, () => [
-      m(c, {
-        name: n.defaultIcon,
+function Q(e, t, o, i, n, s) {
+  const u = c("dt-icon");
+  return s.defaultIcon || n.hasSlotContent(e.$slots.default) ? (l(), p("div", J, [
+    a(e.$slots, "default", {}, () => [
+      v(u, {
+        name: s.defaultIcon,
         size: "400"
       }, null, 8, ["name"])
     ])
-  ])) : p("", !0);
+  ])) : r("", !0);
 }
-const G = /* @__PURE__ */ _(W, [["render", U]]), Y = {
+const ee = /* @__PURE__ */ _(X, [["render", Q]]), te = {
   name: "DtNoticeContent",
   props: {
     /**
@@ -82,32 +82,32 @@ const G = /* @__PURE__ */ _(W, [["render", U]]), Y = {
       hasSlotContent: P
     };
   }
-}, Z = {
+}, oe = {
   class: "d-notice__content",
   "data-qa": "notice-content"
-}, X = ["id"], J = ["id"];
-function Q(e, t, o, i, s, n) {
-  return l(), y("div", Z, [
-    o.title || s.hasSlotContent(e.$slots.titleOverride) ? (l(), y("p", {
+}, se = ["id"], ne = ["id"];
+function ie(e, t, o, i, n, s) {
+  return l(), p("div", oe, [
+    o.title || n.hasSlotContent(e.$slots.titleOverride) ? (l(), p("p", {
       key: 0,
       id: o.titleId,
       class: "d-notice__title",
       "data-qa": "notice-content-title"
     }, [
-      d(e.$slots, "titleOverride", {}, () => [
-        V(R(o.title), 1)
+      a(e.$slots, "titleOverride", {}, () => [
+        z(W(o.title), 1)
       ])
-    ], 8, X)) : p("", !0),
-    g("p", {
+    ], 8, se)) : r("", !0),
+    C("p", {
       id: o.contentId,
       class: "d-notice__message",
       "data-qa": "notice-content-message"
     }, [
-      d(e.$slots, "default")
-    ], 8, J)
+      a(e.$slots, "default")
+    ], 8, ne)
   ]);
 }
-const ee = /* @__PURE__ */ _(Y, [["render", Q]]), k = {
+const le = /* @__PURE__ */ _(te, [["render", ie]]), I = {
   props: {
     /**
      * If true, a hidden close button is included for screen readers
@@ -146,11 +146,11 @@ const ee = /* @__PURE__ */ _(Y, [["render", Q]]), k = {
            a visually hidden close button and you must set the visuallyHiddenCloseLabel prop.`);
     }
   }
-}, te = {
+}, ae = {
   name: "SrOnlyCloseButton",
   components: {
-    DtIcon: O,
-    DtButton: S
+    DtIcon: E,
+    DtButton: L
   },
   props: {
     /**
@@ -169,30 +169,30 @@ const ee = /* @__PURE__ */ _(Y, [["render", Q]]), k = {
     }
   }
 };
-function oe(e, t, o, i, s, n) {
-  const c = r("dt-icon"), h = r("dt-button");
-  return l(), f(h, {
+function re(e, t, o, i, n, s) {
+  const u = c("dt-icon"), m = c("dt-button");
+  return l(), f(m, {
     id: "sr-only-close-button",
     "data-qa": "dt-sr-only-close-button",
     class: "d-vi-visible-sr",
     "aria-label": o.visuallyHiddenCloseLabel,
-    onClick: n.close,
-    onKeydown: C(E(n.close, ["prevent", "stop"]), ["space"])
+    onClick: s.close,
+    onKeydown: g(S(s.close, ["prevent", "stop"]), ["space"])
   }, {
-    default: u(() => [
-      m(c, { name: "close" })
+    default: d(() => [
+      v(u, { name: "close" })
     ]),
     _: 1
   }, 8, ["aria-label", "onClick", "onKeydown"]);
 }
-const I = /* @__PURE__ */ _(te, [["render", oe]]), ne = {
+const $ = /* @__PURE__ */ _(ae, [["render", re]]), de = {
   name: "DtNoticeAction",
   components: {
-    DtIcon: O,
-    DtButton: S,
-    SrOnlyCloseButton: I
+    DtIcon: E,
+    DtButton: L,
+    SrOnlyCloseButton: $
   },
-  mixins: [k],
+  mixins: [I],
   props: {
     /**
      * Props for the notice close button.
@@ -233,15 +233,15 @@ const I = /* @__PURE__ */ _(te, [["render", oe]]), ne = {
       this.$emit("close");
     }
   }
-}, se = {
+}, ce = {
   class: "d-notice__actions",
   "data-qa": "notice-content-actions"
 };
-function ie(e, t, o, i, s, n) {
-  const c = r("dt-icon"), h = r("dt-button"), b = r("sr-only-close-button");
-  return l(), y("div", se, [
-    d(e.$slots, "default"),
-    o.hideClose ? p("", !0) : (l(), f(h, w({
+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(), p("div", ce, [
+    a(e.$slots, "default"),
+    o.hideClose ? r("", !0) : (l(), f(m, k({
       key: 0,
       ref: "closeButton",
       "data-qa": "dt-notice-action-close-button",
@@ -249,23 +249,23 @@ function ie(e, t, o, i, s, n) {
       importance: "clear",
       circle: "",
       "aria-label": o.closeButtonProps.ariaLabel ? o.closeButtonProps.ariaLabel : "Close"
-    }, o.closeButtonProps, { onClick: n.close }), {
-      icon: u(() => [
-        m(c, {
+    }, o.closeButtonProps, { onClick: s.close }), {
+      icon: d(() => [
+        v(u, {
           name: "close",
           size: "200"
         })
       ]),
       _: 1
     }, 16, ["aria-label", "onClick"])),
-    e.showVisuallyHiddenClose ? (l(), f(b, {
+    e.showVisuallyHiddenClose ? (l(), f(y, {
       key: 1,
       "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
-      onClose: n.close
-    }, null, 8, ["visually-hidden-close-label", "onClose"])) : p("", !0)
+      onClose: s.close
+    }, null, 8, ["visually-hidden-close-label", "onClose"])) : r("", !0)
   ]);
 }
-const le = /* @__PURE__ */ _(ne, [["render", ie]]), B = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', ae = `${B}:not([tabindex="-1"])`, re = "button,[href],input,select,textarea,details,[tabindex]", de = {
+const he = /* @__PURE__ */ _(de, [["render", ue]]), N = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', pe = `${N}:not([tabindex="-1"])`, fe = "button,[href],input,select,textarea,details,[tabindex]", me = {
   methods: {
     /**
      * get the first focusable element in your component, includes tabindex="-1".
@@ -309,9 +309,9 @@ const le = /* @__PURE__ */ _(ne, [["render", ie]]), B = ':not(:disabled):not([ar
      * @param {bool} includeNegativeTabIndex - will include tabindex="-1" in the list of focusable elements.
      */
     _getFocusableElements(e = this.$el, t = !1) {
-      return e ? [...e.querySelectorAll(re)].filter((i) => {
-        const s = window.getComputedStyle(i);
-        return s.getPropertyValue("display") !== "none" && s.getPropertyValue("visibility") !== "hidden" && i.matches(t ? B : ae);
+      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 : pe);
       }) : [];
     },
     /**
@@ -328,27 +328,283 @@ const le = /* @__PURE__ */ _(ne, [["render", ie]]), B = ':not(:disabled):not([ar
         e.preventDefault();
         return;
       }
-      const s = this._getFirstFocusElement(i), n = i[i.length - 1];
-      e.shiftKey ? document.activeElement === s && (n.focus(), e.preventDefault()) : document.activeElement === n && (s.focus(), e.preventDefault());
+      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());
     }
   }
 }, T = {
+  DEFAULT: "default",
+  CUSTOM: "custom"
+}, O = {
+  ARROW_KEYS: "arrow-keys",
+  TAB: "tab",
+  NONE: "none"
+}, ye = {
+  name: "DtItemLayout",
+  props: {
+    /**
+     * Set this prop to render layout as a specific HTML element.
+     */
+    as: {
+      type: String,
+      default: "div"
+    }
+  }
+}, ve = {
+  key: 0,
+  "data-qa": "dt-item-layout-left-wrapper",
+  class: "dt-item-layout--left"
+}, _e = {
+  "data-qa": "dt-item-layout-content-wrapper",
+  class: "dt-item-layout--content"
+}, be = {
+  key: 0,
+  "data-qa": "dt-item-layout-title-wrapper",
+  class: "dt-item-layout--title"
+}, ge = {
+  key: 2,
+  "data-qa": "dt-item-layout-bottom-wrapper",
+  class: "dt-item-layout--bottom"
+}, Ce = {
+  key: 1,
+  "data-qa": "dt-item-layout-right-wrapper",
+  class: "dt-item-layout--right"
+};
+function Ee(e, t, o, i, n, s) {
+  return l(), f(w(o.as), { class: "dt-item-layout" }, {
+    default: d(() => [
+      e.$slots.left ? (l(), p("section", ve, [
+        a(e.$slots, "left")
+      ])) : r("", !0),
+      C("section", _e, [
+        e.$slots.default ? (l(), p("div", be, [
+          a(e.$slots, "default")
+        ])) : r("", !0),
+        e.$slots.subtitle ? (l(), p("div", {
+          key: 1,
+          "data-qa": "dt-item-layout-subtitle-wrapper",
+          class: b(["dt-item-layout--subtitle", { "d-mtn2": e.$slots.default }])
+        }, [
+          a(e.$slots, "subtitle")
+        ], 2)) : r("", !0),
+        e.$slots.bottom ? (l(), p("div", ge, [
+          a(e.$slots, "bottom")
+        ])) : r("", !0)
+      ]),
+      e.$slots.right ? (l(), p("section", Ce, [
+        a(e.$slots, "right")
+      ])) : r("", !0),
+      a(e.$slots, "selected")
+    ]),
+    _: 3
+  });
+}
+const B = /* @__PURE__ */ _(ye, [["render", Ee]]);
+const Oe = {
+  name: "DtListItem",
+  components: {
+    DtItemLayout: B,
+    DtIcon: E
+  },
+  /**
+   * Value provided from keyboard_list_navigation.js using id prop.
+   */
+  inject: {
+    highlightId: { default: null }
+  },
+  props: {
+    /**
+     * Id for the item.
+     */
+    id: {
+      type: String,
+      default() {
+        return R.getUniqueString();
+      }
+    },
+    /**
+     * String to use for the item's role.
+     */
+    role: {
+      type: String,
+      default: "listitem"
+    },
+    /**
+     * HTML element type (tag name) of the content wrapper element.
+     */
+    elementType: {
+      type: String,
+      default: "li"
+    },
+    /**
+     * The type of child list item to use.
+     * @values default, custom
+     */
+    type: {
+      type: String,
+      default: T.DEFAULT,
+      validator: (e) => Object.values(T).includes(e)
+    },
+    /**
+     * The type of navigation that this component should support.
+     * - "arrow-keys" for items that are navigated with UP/DOWN keys.
+     * - "tab" for items that are navigated using the TAB key.
+     * - "none" for static items that are not interactive.
+     * @values arrow-keys, tab, none
+     */
+    navigationType: {
+      type: String,
+      default: O.NONE,
+      validator: (e) => Object.values(O).includes(e)
+    },
+    /**
+     * Applies selected styles to the list item
+     */
+    selected: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    /**
+     * Key down event
+     *
+     * @event keydown
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Native mouse move event
+     *
+     * @event mousemove
+     * @type {MouseEvent}
+     */
+    "mousemove",
+    /**
+     * Native mouse leave event
+     *
+     * @event mouseleave
+     * @type {MouseEvent}
+     */
+    "mouseleave",
+    /**
+     * Mouse down event
+     *
+     * @event mousedown
+     */
+    "mousedown"
+  ],
+  data() {
+    return {
+      injected: !1,
+      mouseHighlighted: !1
+    };
+  },
+  computed: {
+    listItemType() {
+      switch (this.type) {
+        case T.DEFAULT:
+          return B;
+        default:
+          return null;
+      }
+    },
+    listItemListeners() {
+      return {
+        keydown: (e) => {
+          ["enter", "space"].includes(e.code.toLowerCase()) && this.onClick(e), this.$emit("keydown", e);
+        },
+        mousemove: (e) => {
+          this.onMouseHover(e), this.$emit("mousemove", e);
+        },
+        mouseleave: (e) => {
+          this.onMouseLeave(e), this.$emit("mouseleave", e);
+        }
+      };
+    },
+    /**
+     * For keyboard navigation, whether this item is currently highlighted.
+     * An injected highlightId will override the default mouseover highlight.
+     */
+    isHighlighted() {
+      return this.isHoverable ? this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted : !1;
+    },
+    isFocusable() {
+      return this.navigationType === O.TAB;
+    },
+    /**
+     * Whether to apply hover styles.
+     */
+    isHoverable() {
+      return this.navigationType !== O.NONE;
+    }
+  },
+  methods: {
+    onClick(e) {
+      this.$emit("click", e);
+    },
+    onMouseHover() {
+      this.mouseHighlighted = !0;
+    },
+    onMouseLeave() {
+      this.mouseHighlighted = !1;
+    }
+  }
+};
+function Se(e, t, o, i, n, s) {
+  const u = c("dt-icon");
+  return l(), f(w(o.elementType), k({
+    id: o.id,
+    class: ["dt-list-item", {
+      "dt-list-item--focusable": s.isFocusable,
+      "dt-list-item--highlighted": s.isHighlighted,
+      "dt-list-item--static": !s.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)
+          ])
+        })),
+        o.selected ? {
+          name: "selected",
+          fn: d(() => [
+            v(u, {
+              name: "check",
+              size: "400",
+              class: "dt-list-item--selected-icon"
+            })
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1024)) : a(e.$slots, "default", { key: 1 })
+    ]),
+    _: 3
+  }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
+}
+const xe = /* @__PURE__ */ _(Oe, [["render", Se]]), H = {
   none: void 0,
   small: "d-p4",
   medium: "d-p8",
   large: "d-p16"
-}, ce = {
+}, we = {
   none: void 0,
   small: "d-pl4",
   medium: "d-pl8",
   large: "d-pl16"
-}, ue = ["dialog", "menu", "listbox", "tree", "grid"], pe = ["", "anchor"], he = ["none", "dialog", "first"], fe = ["parent", "body"], me = [
-  ...D
-], ye = {
+}, Pe = ["dialog", "menu", "listbox", "tree", "grid"], ke = ["", "anchor"], Te = ["none", "dialog", "first"], Le = ["parent", "body"], Ie = [
+  ...V
+], Ae = {
   name: "PopoverHeaderFooter",
   components: {
-    DtButton: S,
-    DtIcon: O
+    DtButton: L,
+    DtIcon: E
   },
   props: {
     // eslint-disable-next-line vue/require-default-prop
@@ -405,23 +661,23 @@ const le = /* @__PURE__ */ _(ne, [["render", ie]]), B = ':not(:disabled):not([ar
     }
   }
 };
-function ve(e, t, o, i, s, n) {
-  const c = r("dt-icon"), h = r("dt-button");
-  return l(), y("div", {
+function Be(e, t, o, i, n, s) {
+  const u = c("dt-icon"), m = c("dt-button");
+  return l(), p("div", {
     "data-qa": "dt-popover-header-footer",
-    class: v({
+    class: b({
       "d-popover__header": o.type === "header",
       "d-popover__footer": o.type === "footer"
     })
   }, [
-    s.hasSlotContent(e.$slots.content) ? (l(), y("div", {
+    n.hasSlotContent(e.$slots.content) ? (l(), p("div", {
       key: 0,
       "data-qa": "dt-popover-header-footer-content",
-      class: v(["d-to-ellipsis", "d-w100p", o.contentClass])
+      class: b(["d-to-ellipsis", "d-w100p", o.contentClass])
     }, [
-      d(e.$slots, "content")
-    ], 2)) : p("", !0),
-    o.showCloseButton ? (l(), f(h, w({
+      a(e.$slots, "content")
+    ], 2)) : r("", !0),
+    o.showCloseButton ? (l(), f(m, k({
       key: 1,
       ref: "popover__close-button",
       "data-qa": "dt-popover-close",
@@ -430,30 +686,30 @@ function ve(e, t, o, i, s, n) {
       kind: "muted",
       circle: ""
     }, o.closeButtonProps, {
-      onClick: t[0] || (t[0] = (b) => e.$emit("close"))
+      onClick: t[0] || (t[0] = (y) => e.$emit("close"))
     }), {
-      icon: u(() => [
-        m(c, {
+      icon: d(() => [
+        v(u, {
           name: "close",
           size: "300"
         })
       ]),
       _: 1
-    }, 16)) : p("", !0)
+    }, 16)) : r("", !0)
   ], 2);
 }
-const _e = /* @__PURE__ */ _(ye, [["render", ve]]);
-const be = {
+const He = /* @__PURE__ */ _(Ae, [["render", Be]]);
+const De = {
   name: "DtPopover",
   /********************
    * CHILD COMPONENTS *
    ********************/
   components: {
-    SrOnlyCloseButton: I,
-    DtLazyShow: F,
-    PopoverHeaderFooter: _e
+    SrOnlyCloseButton: $,
+    DtLazyShow: q,
+    PopoverHeaderFooter: He
   },
-  mixins: [de, k],
+  mixins: [me, I],
   props: {
     /**
      * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
@@ -496,7 +752,7 @@ const be = {
     role: {
       type: String,
       default: "dialog",
-      validator: (e) => ue.includes(e)
+      validator: (e) => Pe.includes(e)
     },
     /**
      * ID of the element that serves as the label for the popover content.
@@ -532,7 +788,7 @@ const be = {
     padding: {
       type: String,
       default: "large",
-      validator: (e) => Object.keys(T).some((t) => t === e)
+      validator: (e) => Object.keys(H).some((t) => t === e)
     },
     /**
      * Additional class name for the content wrapper element.
@@ -549,7 +805,7 @@ const be = {
     contentWidth: {
       type: String,
       default: "",
-      validator: (e) => pe.includes(e)
+      validator: (e) => ke.includes(e)
     },
     /**
      * Whether to apply transition on initial render in the content lazy show component.
@@ -579,7 +835,7 @@ const be = {
     id: {
       type: String,
       default() {
-        return L();
+        return A();
       }
     },
     /**
@@ -683,7 +939,7 @@ const be = {
     sticky: {
       type: [Boolean, String],
       default: !1,
-      validator: (e) => me.includes(e)
+      validator: (e) => Ie.includes(e)
     },
     /**
      * Determines maximum height for the popover before overflow.
@@ -741,7 +997,7 @@ const be = {
     initialFocusElement: {
       type: [String, HTMLElement],
       default: "first",
-      validator: (e) => he.includes(e) || e instanceof HTMLElement || e.startsWith("#")
+      validator: (e) => Te.includes(e) || e instanceof HTMLElement || e.startsWith("#")
     },
     /**
      * If the popover should open pressing up or down arrow key on the anchor element.
@@ -760,7 +1016,7 @@ const be = {
     appendTo: {
       type: [HTMLElement, String],
       default: "body",
-      validator: (e) => fe.includes(e) || e instanceof HTMLElement
+      validator: (e) => Le.includes(e) || e instanceof HTMLElement
     }
   },
   emits: [
@@ -786,8 +1042,8 @@ const be = {
   ],
   data() {
     return {
-      POPOVER_PADDING_CLASSES: T,
-      POPOVER_HEADER_FOOTER_PADDING_CLASSES: ce,
+      POPOVER_PADDING_CLASSES: H,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES: we,
       intersectionObserver: null,
       isOutsideViewport: !1,
       isOpen: !1,
@@ -815,7 +1071,7 @@ const be = {
       return this.isOutsideViewport && this.modal ? "calc(100vh - var(--dt-space-300))" : this.maxHeight;
     },
     labelledBy() {
-      return this.ariaLabelledby || !this.ariaLabel && L("DtPopover__anchor");
+      return this.ariaLabelledby || !this.ariaLabel && A("DtPopover__anchor");
     }
   },
   watch: {
@@ -894,11 +1150,11 @@ const be = {
       const t = (i = e == null ? void 0 : e[0]) == null ? void 0 : i.target;
       if (!t)
         return;
-      const o = H(t);
+      const o = M(t);
       this.isOutsideViewport = o.bottom || o.top;
     },
     popperOptions() {
-      return N({
+      return x({
         fallbackPlacements: this.fallbackPlacements,
         tether: this.tether,
         hasHideModifierEnabled: !0
@@ -1013,7 +1269,7 @@ const be = {
     },
     initTippyInstance() {
       var e, t;
-      this.tip = x(this.anchorEl, {
+      this.tip = K(this.anchorEl, {
         popperOptions: this.popperOptions(),
         contentElement: this.popoverContentEl,
         placement: this.placement,
@@ -1031,114 +1287,114 @@ const be = {
       });
     }
   }
-}, Ce = ["aria-hidden"], ge = ["id", "tabindex"];
-function Ee(e, t, o, i, s, n) {
-  const c = r("popover-header-footer"), h = r("sr-only-close-button"), b = r("dt-lazy-show");
-  return l(), y("div", null, [
-    o.modal && s.isOpen ? (l(), f(q, {
+}, Fe = ["aria-hidden"], $e = ["id", "tabindex"];
+function Ne(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(), p("div", null, [
+    o.modal && n.isOpen ? (l(), f(Y, {
       key: 0,
       to: "body"
     }, [
-      g("div", {
+      C("div", {
         class: "d-modal--transparent",
-        "aria-hidden": o.modal && s.isOpen ? "false" : "true",
-        onClick: t[0] || (t[0] = E(() => {
+        "aria-hidden": o.modal && n.isOpen ? "false" : "true",
+        onClick: t[0] || (t[0] = S(() => {
         }, ["prevent", "stop"]))
-      }, null, 8, Ce)
-    ])) : p("", !0),
-    (l(), f($(o.elementType), {
+      }, null, 8, Fe)
+    ])) : r("", !0),
+    (l(), f(w(o.elementType), {
       ref: "popover",
-      class: v(["d-popover", { "d-popover__anchor--opened": s.isOpen }]),
+      class: b(["d-popover", { "d-popover__anchor--opened": n.isOpen }]),
       "data-qa": "dt-popover-container"
     }, {
-      default: u(() => [
-        g("div", {
-          id: !o.ariaLabelledby && n.labelledBy,
+      default: d(() => [
+        C("div", {
+          id: !o.ariaLabelledby && s.labelledBy,
           ref: "anchor",
           "data-qa": "dt-popover-anchor",
           tabindex: o.openOnContext ? 0 : void 0,
-          onClickCapture: t[1] || (t[1] = (...a) => n.defaultToggleOpen && n.defaultToggleOpen(...a)),
-          onContextmenu: t[2] || (t[2] = (...a) => n.onContext && n.onContext(...a)),
+          onClickCapture: t[1] || (t[1] = (...h) => s.defaultToggleOpen && s.defaultToggleOpen(...h)),
+          onContextmenu: t[2] || (t[2] = (...h) => s.onContext && s.onContext(...h)),
           onKeydown: [
-            t[3] || (t[3] = C(E((...a) => n.onArrowKeyPress && n.onArrowKeyPress(...a), ["prevent"]), ["up"])),
-            t[4] || (t[4] = C(E((...a) => n.onArrowKeyPress && n.onArrowKeyPress(...a), ["prevent"]), ["down"])),
-            t[6] || (t[6] = C((a) => e.$emit("keydown", a), ["enter"])),
-            t[7] || (t[7] = C((a) => e.$emit("keydown", a), ["space"]))
+            t[3] || (t[3] = g(S((...h) => s.onArrowKeyPress && s.onArrowKeyPress(...h), ["prevent"]), ["up"])),
+            t[4] || (t[4] = g(S((...h) => s.onArrowKeyPress && s.onArrowKeyPress(...h), ["prevent"]), ["down"])),
+            t[6] || (t[6] = g((h) => e.$emit("keydown", h), ["enter"])),
+            t[7] || (t[7] = g((h) => e.$emit("keydown", h), ["space"]))
           ],
-          onKeydownCapture: t[5] || (t[5] = C((...a) => n.closePopover && n.closePopover(...a), ["escape"]))
+          onKeydownCapture: t[5] || (t[5] = g((...h) => s.closePopover && s.closePopover(...h), ["escape"]))
         }, [
-          d(e.$slots, "anchor", {
+          a(e.$slots, "anchor", {
             attrs: {
-              "aria-expanded": s.isOpen.toString(),
+              "aria-expanded": n.isOpen.toString(),
               "aria-controls": o.id,
               "aria-haspopup": o.role
             }
           })
-        ], 40, ge),
-        m(b, w({
+        ], 40, $e),
+        v(y, k({
           id: o.id,
           ref: "content",
           role: o.role,
           "data-qa": "dt-popover",
-          "aria-hidden": `${!s.isOpen}`,
-          "aria-labelledby": n.labelledBy,
+          "aria-hidden": `${!n.isOpen}`,
+          "aria-labelledby": s.labelledBy,
           "aria-label": o.ariaLabel,
           "aria-modal": `${!o.modal}`,
           transition: o.transition,
-          show: s.isOpen,
-          appear: s.toAppear,
+          show: n.isOpen,
+          appear: n.toAppear,
           class: ["d-popover__dialog", { "d-popover__dialog--modal": o.modal }, o.dialogClass],
           style: {
-            "max-height": n.calculatedMaxHeight,
+            "max-height": s.calculatedMaxHeight,
             "max-width": o.maxWidth
           },
           css: e.$attrs.css,
           tabindex: o.contentTabindex
-        }, K(n.popoverListeners)), {
-          default: u(() => [
-            s.hasSlotContent(e.$slots.headerContent) || o.showCloseButton ? (l(), f(c, {
+        }, D(s.popoverListeners)), {
+          default: d(() => [
+            n.hasSlotContent(e.$slots.headerContent) || o.showCloseButton ? (l(), f(u, {
               key: 0,
               ref: "popover__header",
-              class: v(s.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),
+              class: b(n.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),
               "content-class": o.headerClass,
               type: "header",
               "show-close-button": o.showCloseButton,
               "close-button-props": o.closeButtonProps,
-              onClose: n.closePopover
+              onClose: s.closePopover
             }, {
-              content: u(() => [
-                d(e.$slots, "headerContent", { close: n.closePopover })
+              content: d(() => [
+                a(e.$slots, "headerContent", { close: s.closePopover })
               ]),
               _: 3
-            }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : p("", !0),
-            g("div", {
+            }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : r("", !0),
+            C("div", {
               ref: "popover__content",
               "data-qa": "dt-popover-content",
-              class: v([
+              class: b([
                 "d-popover__content",
-                s.POPOVER_PADDING_CLASSES[o.padding],
+                n.POPOVER_PADDING_CLASSES[o.padding],
                 o.contentClass
               ])
             }, [
-              d(e.$slots, "content", { close: n.closePopover })
+              a(e.$slots, "content", { close: s.closePopover })
             ], 2),
-            s.hasSlotContent(e.$slots.footerContent) ? (l(), f(c, {
+            n.hasSlotContent(e.$slots.footerContent) ? (l(), f(u, {
               key: 1,
               ref: "popover__footer",
               type: "footer",
-              class: v(s.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),
+              class: b(n.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),
               "content-class": o.footerClass
             }, {
-              content: u(() => [
-                d(e.$slots, "footerContent", { close: n.closePopover })
+              content: d(() => [
+                a(e.$slots, "footerContent", { close: s.closePopover })
               ]),
               _: 3
-            }, 8, ["class", "content-class"])) : p("", !0),
-            e.showVisuallyHiddenClose ? (l(), f(h, {
+            }, 8, ["class", "content-class"])) : r("", !0),
+            e.showVisuallyHiddenClose ? (l(), f(m, {
               key: 2,
               "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
-              onClose: n.closePopover
-            }, null, 8, ["visually-hidden-close-label", "onClose"])) : p("", !0)
+              onClose: s.closePopover
+            }, null, 8, ["visually-hidden-close-label", "onClose"])) : r("", !0)
           ]),
           _: 3
         }, 16, ["id", "role", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "appear", "class", "style", "css", "tabindex"])
@@ -1147,14 +1403,14 @@ function Ee(e, t, o, i, s, n) {
     }, 8, ["class"]))
   ]);
 }
-const ke = /* @__PURE__ */ _(be, [["render", Ee]]), Oe = {
+const Ke = /* @__PURE__ */ _(De, [["render", Ne]]), Re = {
   name: "DtNotice",
   components: {
-    DtNoticeIcon: G,
-    DtNoticeContent: ee,
-    DtNoticeAction: le
+    DtNoticeIcon: ee,
+    DtNoticeContent: le,
+    DtNoticeAction: he
   },
-  mixins: [k],
+  mixins: [I],
   props: {
     /**
      * Sets an ID on the title element of the component. Useful for aria-describedby
@@ -1189,7 +1445,7 @@ const ke = /* @__PURE__ */ _(be, [["render", Ee]]), Oe = {
       type: String,
       default: "status",
       validate(e) {
-        return z.includes(e);
+        return G.includes(e);
       }
     },
     /**
@@ -1209,7 +1465,7 @@ const ke = /* @__PURE__ */ _(be, [["render", Ee]]), Oe = {
       type: String,
       default: "base",
       validate(e) {
-        return A.includes(e);
+        return F.includes(e);
       }
     },
     /**
@@ -1259,61 +1515,64 @@ const ke = /* @__PURE__ */ _(be, [["render", Ee]]), Oe = {
     }
   }
 };
-function Pe(e, t, o, i, s, n) {
-  const c = r("dt-notice-icon"), h = r("dt-notice-content"), b = r("dt-notice-action");
-  return l(), y("aside", {
-    class: v(n.noticeClass),
+function Ve(e, t, o, i, n, s) {
+  const u = c("dt-notice-icon"), m = c("dt-notice-content"), y = c("dt-notice-action");
+  return l(), p("aside", {
+    class: b(s.noticeClass),
     "data-qa": "notice"
   }, [
-    m(c, { kind: o.kind }, {
-      default: u(() => [
-        d(e.$slots, "icon")
+    v(u, { kind: o.kind }, {
+      default: d(() => [
+        a(e.$slots, "icon")
       ]),
       _: 3
     }, 8, ["kind"]),
-    m(h, {
+    v(m, {
       "title-id": o.titleId,
       "content-id": o.contentId,
       title: o.title,
       role: o.role
     }, {
-      titleOverride: u(() => [
-        d(e.$slots, "titleOverride")
+      titleOverride: d(() => [
+        a(e.$slots, "titleOverride")
       ]),
-      default: u(() => [
-        d(e.$slots, "default")
+      default: d(() => [
+        a(e.$slots, "default")
       ]),
       _: 3
     }, 8, ["title-id", "content-id", "title", "role"]),
-    m(b, {
+    v(y, {
       "hide-close": o.hideClose,
       "close-button-props": o.closeButtonProps,
       "visually-hidden-close": e.visuallyHiddenClose,
       "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
-      onClose: t[0] || (t[0] = (a) => e.$emit("close"))
+      onClose: t[0] || (t[0] = (h) => e.$emit("close"))
     }, {
-      default: u(() => [
-        d(e.$slots, "action")
+      default: d(() => [
+        a(e.$slots, "action")
       ]),
       _: 3
     }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
   ], 2);
 }
-const Le = /* @__PURE__ */ _(Oe, [["render", Pe]]);
+const ze = /* @__PURE__ */ _(Re, [["render", Ve]]);
 export {
-  G as D,
-  de as M,
-  A as N,
-  fe as P,
-  k as S,
-  ee as a,
-  le as b,
-  ke as c,
-  I as d,
-  pe as e,
-  Le as f,
-  T as g,
-  ce as h,
-  ue as i,
-  he as j
+  ee as D,
+  O as L,
+  me as M,
+  F as N,
+  Le as P,
+  I as S,
+  le as a,
+  he as b,
+  xe as c,
+  Ke as d,
+  $ as e,
+  ke as f,
+  B as g,
+  ze as h,
+  H as i,
+  we as j,
+  Pe as k,
+  Te as l
 };