@dialpad/dialtone 9.3.0 → 9.4.1

package/dist/vue2/stack-klSxDym-.js

@@ -0,0 +1,1796 @@
+import { n as a, g as _, a as $, u as k, b as L, B as x, c as D, i as R, d as N, e as F } from "./tooltip-PDBwUvGD.js";
+import { t as V, w as p, I as H, L as B, x as q, y as I } from "./emoji-k30EufQP.js";
+import u from "vue";
+const r = {
+  BUSY: "busy",
+  AWAY: "away",
+  OFFLINE: "offline",
+  ACTIVE: "active"
+}, M = [
+  r.BUSY,
+  r.AWAY,
+  r.OFFLINE,
+  r.ACTIVE
+], z = {
+  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: r.ACTIVE,
+      validator: (t) => M.includes(t)
+    },
+    /**
+     * 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
+    }
+  }
+};
+var j = function() {
+  var e = this, s = e._self._c;
+  return s("div", { staticClass: "d-presence", attrs: { "data-qa": "dt-presence", role: "status", "aria-live": e.$attrs.ariaLive || "off" } }, [e.srText ? s("span", { staticClass: "sr-only", attrs: { "data-qa": "dt-presence-sr-text" } }, [e._v(e._s(e.srText) + " ")]) : e._e(), s("div", { staticClass: "d-presence__inner", class: {
+    "d-presence__inner--active": e.presence === "active",
+    "d-presence__inner--away": e.presence === "away",
+    "d-presence__inner--busy": e.presence === "busy",
+    "d-presence__inner--offline": e.presence === "offline"
+  } })]);
+}, K = [], W = /* @__PURE__ */ a(
+  z,
+  j,
+  K,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const G = W.exports, f = {
+  xs: "d-avatar--xs",
+  sm: "d-avatar--sm",
+  md: "d-avatar--md",
+  lg: "d-avatar--lg",
+  xl: "d-avatar--xl"
+}, U = {
+  default: "",
+  icon: "d-avatar__icon",
+  initials: "d-avatar__initials"
+}, Y = {
+  md: "d-avatar__presence--md",
+  lg: "d-avatar__presence--lg"
+}, g = {
+  NONE: "",
+  BUSY: "busy",
+  AWAY: "away",
+  OFFLINE: "offline",
+  ACTIVE: "active"
+}, Z = {
+  xs: "100",
+  sm: "200",
+  md: "300",
+  lg: "500",
+  xl: "600"
+}, X = [
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "1000",
+  "1100",
+  "1200",
+  "1300",
+  "1400",
+  "1500",
+  "1600",
+  "1700",
+  "1800"
+], S = (t) => t > 1;
+function J() {
+  return [void 0, ...V];
+}
+const Q = (t) => {
+  if (typeof t != "string" || !t.trim())
+    return "";
+  const e = t.trim().split(/\s+/g);
+  return e.length === 1 ? e.join("").substring(0, 2) : e.filter((s, n) => n === 0 || n === e.length - 1).map((s) => s.slice(0, 1).toUpperCase()).join("");
+}, ee = J(), te = {
+  name: "DtAvatar",
+  components: { DtPresence: G, DtIcon: p },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Id of the avatar content wrapper element
+     */
+    id: {
+      type: String,
+      default() {
+        return _();
+      }
+    },
+    /**
+     * 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: (t) => Object.keys(f).includes(t)
+    },
+    /**
+     * 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: g.NONE,
+      validator: (t) => Object.values(g).includes(t)
+    },
+    /**
+     * 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: (t) => S(t)
+    },
+    /**
+     * 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: (t) => ee.includes(t)
+    },
+    /**
+     * Icon size to be displayed on the avatar
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    iconSize: {
+      type: String,
+      default: "",
+      validator: (t) => !t || Object.keys(H).includes(t)
+    },
+    /**
+     * 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: f,
+      AVATAR_KIND_MODIFIERS: U,
+      AVATAR_PRESENCE_SIZE_MODIFIERS: Y,
+      AVATAR_ICON_SIZES: Z,
+      imageLoadedSuccessfully: null,
+      formattedInitials: "",
+      initializing: !1
+    };
+  },
+  computed: {
+    isNotIconType() {
+      return !this.iconName;
+    },
+    avatarClasses() {
+      return [
+        "d-avatar",
+        f[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 S(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() {
+        this.formatInitials();
+      }
+    },
+    size: {
+      immediate: !0,
+      handler() {
+        this.formatInitials();
+      }
+    },
+    group: {
+      immediate: !0,
+      handler() {
+        this.formatInitials();
+      }
+    },
+    imageSrc(t) {
+      this.imageLoadedSuccessfully = null, t && (this.validateProps(), this.setImageListeners());
+    }
+  },
+  mounted() {
+    this.validateProps(), this.setImageListeners();
+  },
+  methods: {
+    async setImageListeners() {
+      await this.$nextTick();
+      const t = this.$refs.avatarImage;
+      t && (t.addEventListener("load", () => this._loadedImageEventHandler(t), { once: !0 }), t.addEventListener("error", () => this._erroredImageEventHandler(t), { once: !0 }));
+    },
+    formatInitials() {
+      const t = Q(this.fullName);
+      this.validatedSize === "xs" ? this.formattedInitials = "" : this.validatedSize === "sm" ? this.formattedInitials = t[0] : this.formattedInitials = t;
+    },
+    getColor() {
+      return this.color ?? $(X, this.seed);
+    },
+    _loadedImageEventHandler(t) {
+      this.imageLoadedSuccessfully = !0, t.classList.remove("d-d-none");
+    },
+    _erroredImageEventHandler(t) {
+      this.imageLoadedSuccessfully = !1, t.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(t) {
+      this.clickable && this.$emit("click", t);
+    }
+  }
+};
+var se = function() {
+  var e = this, s = e._self._c;
+  return s(e.clickable ? "button" : "div", { tag: "component", class: e.avatarClasses, attrs: { id: e.id, "data-qa": "dt-avatar", "aria-label": e.buttonAriaLabel }, on: { click: e.handleClick } }, [s("div", { ref: "canvas", class: [
+    e.canvasClass,
+    "d-avatar__canvas",
+    { "d-avatar--image-loaded": e.imageLoadedSuccessfully }
+  ] }, [e.showImage ? s("img", { ref: "avatarImage", staticClass: "d-avatar__image", attrs: { "data-qa": "dt-avatar-image", src: e.imageSrc, alt: e.imageAlt || e.fullName } }) : e.iconName ? s("dt-icon", { class: [e.iconClass, e.AVATAR_KIND_MODIFIERS.icon], attrs: { name: e.iconName, size: e.iconSize || e.AVATAR_ICON_SIZES[e.size], "data-qa": "dt-avatar-icon" } }) : s("span", { class: [e.AVATAR_KIND_MODIFIERS.initials] }, [e._v(" " + e._s(e.formattedInitials) + " ")])], 1), e.overlayIcon || e.overlayText ? s("div", { class: e.overlayClasses }, [e.overlayIcon ? s("dt-icon", { staticClass: "d-avatar__overlay-icon", attrs: { name: e.overlayIcon } }) : e.overlayText ? s("p", { staticClass: "d-avatar__overlay-text" }, [e._v(" " + e._s(e.overlayText) + " ")]) : e._e()], 1) : e._e(), e.showGroup ? s("span", { staticClass: "d-avatar__count", attrs: { "data-qa": "dt-avatar-count" } }, [e._v(e._s(e.formattedGroup))]) : e._e(), e.presence && !e.showGroup ? s("dt-presence", e._b({ class: [
+    "d-avatar__presence",
+    e.AVATAR_PRESENCE_SIZE_MODIFIERS[e.size]
+  ], attrs: { presence: e.presence, "data-qa": "dt-presence" } }, "dt-presence", e.presenceProps, !1)) : e._e()], 1);
+}, ne = [], ae = /* @__PURE__ */ a(
+  te,
+  se,
+  ne,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const at = ae.exports, oe = {
+  name: "DtLink",
+  props: {
+    /**
+     * Applies the link variant styles
+     * @values null, danger, warning, success, muted, inverted
+     */
+    kind: {
+      type: String,
+      default: "",
+      validator(t) {
+        return B.includes(t);
+      }
+    }
+  },
+  emits: [
+    /**
+     * Native click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
+    /**
+     * Native focus in event
+     *
+     * @event focusin
+     * @type {FocusEvent}
+     */
+    "focusin",
+    /**
+     * Native focus out event
+     *
+     * @event focusout
+     * @type {FocusEvent}
+     */
+    "focusout"
+  ],
+  data() {
+    return {
+      LINK_KIND_MODIFIERS: q
+    };
+  }
+};
+var ie = function() {
+  var e = this, s = e._self._c;
+  return s("a", e._g({ class: [
+    "d-link",
+    e.LINK_KIND_MODIFIERS[e.kind]
+  ], attrs: { "data-qa": "dt-link", href: "href" in e.$attrs ? e.$attrs.href : "javascript:void(0)" } }, e.$listeners), [e._t("default")], 2);
+}, re = [], le = /* @__PURE__ */ a(
+  oe,
+  ie,
+  re,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const ot = le.exports, de = {
+  props: {
+    /**
+     * If true, a hidden close button is included for screen readers
+     * @values true, false
+     */
+    visuallyHiddenClose: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Label for the visually hidden close button
+     * Required if visuallyHiddenClose is set to `true`
+     */
+    visuallyHiddenCloseLabel: {
+      type: String,
+      default: null
+    }
+  },
+  watch: {
+    $props: {
+      immediate: !0,
+      deep: !0,
+      handler() {
+        this.validateVisuallyHiddenCloseProps();
+      }
+    }
+  },
+  computed: {
+    showVisuallyHiddenClose() {
+      return this.visuallyHiddenClose && this.visuallyHiddenCloseLabel != null;
+    }
+  },
+  methods: {
+    validateVisuallyHiddenCloseProps() {
+      this.visuallyHiddenClose && !this.visuallyHiddenCloseLabel && console.error(`If visuallyHiddenClose prop is true, the component includes
+           a visually hidden close button and you must set the visuallyHiddenCloseLabel prop.`);
+    }
+  }
+}, ce = {
+  name: "SrOnlyCloseButton",
+  components: {
+    DtIcon: p,
+    DtButton: I
+  },
+  props: {
+    /**
+     * Label for the visually hidden close button
+     * Required if visuallyHiddenClose is set to `true`
+     */
+    visuallyHiddenCloseLabel: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ["close"],
+  methods: {
+    close() {
+      this.$emit("close");
+    }
+  }
+};
+var ue = function() {
+  var e = this, s = e._self._c;
+  return s("dt-button", { staticClass: "d-vi-visible-sr", attrs: { id: "sr-only-close-button", "data-qa": "dt-sr-only-close-button", "aria-label": e.visuallyHiddenCloseLabel }, on: { click: e.close, keydown: function(n) {
+    return !n.type.indexOf("key") && e._k(n.keyCode, "space", 32, n.key, [" ", "Spacebar"]) ? null : (n.preventDefault(), n.stopPropagation(), e.close.apply(null, arguments));
+  } } }, [s("dt-icon", { attrs: { name: "close" } })], 1);
+}, pe = [], fe = /* @__PURE__ */ a(
+  ce,
+  ue,
+  pe,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const he = fe.exports, T = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', me = `${T}:not([tabindex="-1"])`, _e = "button,[href],input,select,textarea,details,[tabindex]", ye = {
+  methods: {
+    /**
+     * get the first focusable element in your component, includes tabindex="-1".
+     * @param {object} el - optional - ref of dom element to trap focus on.
+     *  will default to the root node of the vue component
+     */
+    async getFirstFocusableElement(t) {
+      await this.$nextTick();
+      const e = this._getFocusableElements(t, !0);
+      return this._getFirstFocusElement(e);
+    },
+    /**
+     * set focus to the first focusable element in your component, includes tabindex="-1".
+     * @param {object} el - optional - ref of dom element to trap focus on.
+     *  will default to the root node of the vue component
+     */
+    async focusFirstElement(t = this.$el) {
+      const e = await this.getFirstFocusableElement(t);
+      e == null || e.focus({ preventScroll: !0 });
+    },
+    async focusElementById(t) {
+      var s;
+      await this.$nextTick();
+      const e = (s = this.$el) == null ? void 0 : s.querySelector(t);
+      if (e) {
+        e.focus();
+        return;
+      }
+      console.warn('Could not find the element specified in dt-modal prop "initialFocusElement". Defaulting to focusing the first element.'), await this.focusFirstElement();
+    },
+    /**
+     * internal use only.
+     *
+     * @param focusableElements - list of focusable elements
+     * @returns {*} - first DOM element that is focusable.
+     * @private
+     */
+    _getFirstFocusElement(t) {
+      if (!t.length)
+        return;
+      let e = t[0];
+      return e.matches('[type="radio"]:not(:checked)') && (e = t.find((s) => s.checked && s.name === e.name) || e), e;
+    },
+    /**
+     * internal use only.
+     *
+     * gets all the focusable elements within the component
+     * and sets the first and last of those elements.
+     *
+     * @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(t = this.$el, e = !1) {
+      return t ? [...t.querySelectorAll(_e)].filter((n) => {
+        const o = window.getComputedStyle(n);
+        return o.getPropertyValue("display") !== "none" && o.getPropertyValue("visibility") !== "hidden" && n.matches(e ? T : me);
+      }) : [];
+    },
+    /**
+     * tabs to the next element contained within your component, does not include tabindex="-1".
+     * @param {object} e - keypress event
+     * @param {object} el - optional - ref of dom element to trap focus on.
+     *  will default to the root node of the vue component
+     */
+    focusTrappedTabPress(t, e) {
+      if (!(t.key === "Tab"))
+        return;
+      const n = this._getFocusableElements(e);
+      if (!n.length) {
+        t.preventDefault();
+        return;
+      }
+      const o = this._getFirstFocusElement(n), v = n[n.length - 1];
+      t.shiftKey ? document.activeElement === o && (v.focus(), t.preventDefault()) : document.activeElement === v && (o.focus(), t.preventDefault());
+    }
+  }
+}, h = {
+  DEFAULT: "default",
+  CUSTOM: "custom"
+}, d = {
+  ARROW_KEYS: "arrow-keys",
+  TAB: "tab",
+  NONE: "none"
+}, ve = {
+  name: "DtItemLayout",
+  props: {
+    /**
+     * Set this prop to render layout as a specific HTML element.
+     */
+    as: {
+      type: String,
+      default: "div"
+    }
+  }
+};
+var ge = function() {
+  var e = this, s = e._self._c;
+  return s(e.as, { tag: "component", staticClass: "dt-item-layout" }, [e.$slots.left ? s("section", { staticClass: "dt-item-layout--left", attrs: { "data-qa": "dt-item-layout-left-wrapper" } }, [e._t("left")], 2) : e._e(), s("section", { staticClass: "dt-item-layout--content", attrs: { "data-qa": "dt-item-layout-content-wrapper" } }, [e.$slots.default ? s("div", { staticClass: "dt-item-layout--title", attrs: { "data-qa": "dt-item-layout-title-wrapper" } }, [e._t("default")], 2) : e._e(), e.$slots.subtitle ? s("div", { class: ["dt-item-layout--subtitle", { "dt-item-layout--subtitle--with-title": e.$slots.default }], attrs: { "data-qa": "dt-item-layout-subtitle-wrapper" } }, [e._t("subtitle")], 2) : e._e(), e.$slots.bottom ? s("div", { staticClass: "dt-item-layout--bottom", attrs: { "data-qa": "dt-item-layout-bottom-wrapper" } }, [e._t("bottom")], 2) : e._e()]), e.$slots.right ? s("section", { staticClass: "dt-item-layout--right", attrs: { "data-qa": "dt-item-layout-right-wrapper" } }, [e._t("right")], 2) : e._e(), e.$slots.selected ? s("section", { staticClass: "dt-item-layout--selected", attrs: { "data-qa": "dt-item-layout-selected-wrapper" } }, [e._t("selected")], 2) : e._e()]);
+}, Se = [], Ee = /* @__PURE__ */ a(
+  ve,
+  ge,
+  Se,
+  !1,
+  null,
+  "411cb81e",
+  null,
+  null
+);
+const E = Ee.exports, be = {
+  name: "DtListItem",
+  components: {
+    DtItemLayout: E,
+    DtIcon: p
+  },
+  /**
+   * Value provided from keyboard_list_navigation.js using id prop.
+   */
+  inject: {
+    highlightId: { default: null }
+  },
+  props: {
+    /**
+     * Id for the item.
+     */
+    id: {
+      type: String,
+      default() {
+        return k.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: h.DEFAULT,
+      validator: (t) => Object.values(h).includes(t)
+    },
+    /**
+     * 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: d.NONE,
+      validator: (t) => Object.values(d).includes(t)
+    },
+    /**
+     * Applies selected styles to the list item
+     */
+    selected: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    /**
+     * Native click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
+    /**
+     * 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"
+  ],
+  data() {
+    return {
+      injected: !1,
+      mouseHighlighted: !1
+    };
+  },
+  computed: {
+    listItemType() {
+      switch (this.type) {
+        case h.DEFAULT:
+          return E;
+        default:
+          return null;
+      }
+    },
+    listItemListeners() {
+      return {
+        ...this.$listeners,
+        keydown: (t) => {
+          ["enter", "space"].includes(t.code.toLowerCase()) && this.onClick(t), this.$emit("keydown", t);
+        },
+        mousemove: (t) => {
+          this.onMouseHover(t), this.$emit("mousemove", t);
+        },
+        mouseleave: (t) => {
+          this.onMouseLeave(t), this.$emit("mouseleave", t);
+        }
+      };
+    },
+    /**
+     * 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 === d.TAB;
+    },
+    /**
+     * Whether to apply hover styles.
+     */
+    isHoverable() {
+      return this.navigationType !== d.NONE;
+    }
+  },
+  methods: {
+    onClick(t) {
+      this.$emit("click", t);
+    },
+    onMouseHover() {
+      this.mouseHighlighted = !0;
+    },
+    onMouseLeave() {
+      this.mouseHighlighted = !1;
+    }
+  }
+};
+var Ce = function() {
+  var e = this, s = e._self._c;
+  return s(e.elementType, e._g({ tag: "component", class: ["dt-list-item", {
+    "dt-list-item--focusable": e.isFocusable,
+    "dt-list-item--highlighted": e.isHighlighted,
+    "dt-list-item--static": !e.isHoverable
+  }], attrs: { id: e.id, tabindex: e.isFocusable ? 0 : -1, role: e.role, "aria-selected": e.isHighlighted } }, e.listItemListeners), [e.listItemType ? s(e.listItemType, { tag: "component", scopedSlots: e._u([e._l(e.$slots, function(n, o) {
+    return { key: o, fn: function() {
+      return [e._t(o)];
+    }, proxy: !0 };
+  }), e.selected ? { key: "selected", fn: function() {
+    return [s("dt-icon", { staticClass: "dt-list-item--selected-icon", attrs: { name: "check", size: "400" } })];
+  }, proxy: !0 } : null], null, !0) }) : e._t("default")], 2);
+}, Oe = [], Ie = /* @__PURE__ */ a(
+  be,
+  Ce,
+  Oe,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const it = Ie.exports, i = {
+  default: "column",
+  column: "column",
+  row: "row",
+  "row-reverse": "row-reverse",
+  "column-reverse": "column-reverse"
+}, A = ["sm", "md", "lg", "xl"], y = ["0", "100", "200", "300", "400", "500", "600"], b = {
+  none: void 0,
+  small: "d-p4",
+  medium: "d-p8",
+  large: "d-p16"
+}, Te = {
+  none: void 0,
+  small: "d-pl4",
+  medium: "d-pl8",
+  large: "d-pl16"
+}, Ae = ["dialog", "menu", "listbox", "tree", "grid"], we = ["", "anchor"], Pe = ["none", "dialog", "first"], $e = ["parent", "body"], ke = [
+  ...L
+], rt = [
+  ...x
+];
+let Le = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", xe = (t = 21) => {
+  let e = "", s = t;
+  for (; s--; )
+    e += Le[Math.random() * 64 | 0];
+  return e;
+};
+function c(t) {
+  "@babel/helpers - typeof";
+  return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? c = function(e) {
+    return typeof e;
+  } : c = function(e) {
+    return e && typeof Symbol == "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+  }, c(t);
+}
+var w = {
+  selector: "vue-portal-target-".concat(xe())
+}, De = function(e) {
+  return w.selector = e;
+}, m = typeof window < "u" && (typeof document > "u" ? "undefined" : c(document)) !== void 0, Re = u.extend({
+  // as an abstract component, it doesn't appear in
+  // the $parent chain of components.
+  // which means the next parent of any component rendered inside of this oen
+  // will be the parent from which is was sent
+  // @ts-expect-error
+  abstract: !0,
+  name: "PortalOutlet",
+  props: ["nodes", "tag"],
+  data: function(e) {
+    return {
+      updatedNodes: e.nodes
+    };
+  },
+  render: function(e) {
+    var s = this.updatedNodes && this.updatedNodes();
+    return s ? s.length === 1 && !s[0].text ? s : e(this.tag || "DIV", s) : e();
+  },
+  destroyed: function() {
+    var e = this.$el;
+    e && e.parentNode.removeChild(e);
+  }
+}), P = u.extend({
+  name: "VueSimplePortal",
+  props: {
+    disabled: {
+      type: Boolean
+    },
+    prepend: {
+      type: Boolean
+    },
+    selector: {
+      type: String,
+      default: function() {
+        return "#".concat(w.selector);
+      }
+    },
+    tag: {
+      type: String,
+      default: "DIV"
+    }
+  },
+  render: function(e) {
+    if (this.disabled) {
+      var s = this.$scopedSlots && this.$scopedSlots.default();
+      return s ? s.length < 2 && !s[0].text ? s : e(this.tag, s) : e();
+    }
+    return e();
+  },
+  created: function() {
+    this.getTargetEl() || this.insertTargetEl();
+  },
+  updated: function() {
+    var e = this;
+    this.$nextTick(function() {
+      !e.disabled && e.slotFn !== e.$scopedSlots.default && (e.container.updatedNodes = e.$scopedSlots.default), e.slotFn = e.$scopedSlots.default;
+    });
+  },
+  beforeDestroy: function() {
+    this.unmount();
+  },
+  watch: {
+    disabled: {
+      immediate: !0,
+      handler: function(e) {
+        e ? this.unmount() : this.$nextTick(this.mount);
+      }
+    }
+  },
+  methods: {
+    // This returns the element into which the content should be mounted.
+    getTargetEl: function() {
+      if (m)
+        return document.querySelector(this.selector);
+    },
+    insertTargetEl: function() {
+      if (m) {
+        var e = document.querySelector("body"), s = document.createElement(this.tag);
+        s.id = this.selector.substring(1), e.appendChild(s);
+      }
+    },
+    mount: function() {
+      if (m) {
+        var e = this.getTargetEl(), s = document.createElement("DIV");
+        this.prepend && e.firstChild ? e.insertBefore(s, e.firstChild) : e.appendChild(s), this.container = new Re({
+          el: s,
+          parent: this,
+          propsData: {
+            tag: this.tag,
+            nodes: this.$scopedSlots.default
+          }
+        });
+      }
+    },
+    unmount: function() {
+      this.container && (this.container.$destroy(), delete this.container);
+    }
+  }
+});
+function Ne(t) {
+  var e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  t.component(e.name || "portal", P), e.defaultSelector && De(e.defaultSelector);
+}
+typeof window < "u" && window.Vue && window.Vue === u && u.use(Ne);
+const Fe = {
+  name: "PopoverHeaderFooter",
+  components: {
+    DtButton: I,
+    DtIcon: p
+  },
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    type: {
+      type: String,
+      validator: function(t) {
+        return ["header", "footer"].includes(t);
+      }
+    },
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Determines visibility for close button
+     * @values true, false
+     */
+    showCloseButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * A set of props to be passed into the popover's header close button.
+     * Requires an 'ariaLabel' property.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  emits: [
+    /**
+     * Emitted when popover is closed
+     *
+     * @event close
+     * @type { Boolean }
+     */
+    "close"
+  ],
+  methods: {
+    focusCloseButton() {
+      var e;
+      const t = (e = this.$refs["popover__close-button"]) == null ? void 0 : e.$el;
+      t == null || t.focus();
+    }
+  }
+};
+var Ve = function() {
+  var e = this, s = e._self._c;
+  return s("div", { class: {
+    "d-popover__header": e.type === "header",
+    "d-popover__footer": e.type === "footer"
+  }, attrs: { "data-qa": "dt-popover-header-footer" } }, [e.$slots.content ? s("div", { class: [{
+    "d-popover__header__content": e.type === "header",
+    "d-popover__footer__content": e.type === "footer"
+  }, e.contentClass], attrs: { "data-qa": "dt-popover-header-footer-content" } }, [e._t("content")], 2) : e._e(), e.showCloseButton ? s("dt-button", e._b({ ref: "popover__close-button", class: {
+    "d-popover__header__close-button": e.type === "header",
+    "d-popover__footer__close-button": e.type === "footer"
+  }, attrs: { "data-qa": "dt-popover-close", importance: "outlined", kind: "muted", circle: "" }, on: { click: function(n) {
+    return e.$emit("close");
+  } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [s("dt-icon", { attrs: { name: "close", size: "300" } })];
+  }, proxy: !0 }], null, !1, 2538694920) }, "dt-button", e.closeButtonProps, !1)) : e._e()], 1);
+}, He = [], Be = /* @__PURE__ */ a(
+  Fe,
+  Ve,
+  He,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const qe = Be.exports, Me = {
+  name: "DtPopover",
+  /********************
+   * CHILD COMPONENTS *
+   ********************/
+  components: {
+    SrOnlyCloseButton: he,
+    DtLazyShow: D,
+    PopoverHeaderFooter: qe,
+    Portal: P
+  },
+  mixins: [ye, de],
+  props: {
+    /**
+     * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
+     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    open: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Opens the popover on right click (context menu). If you set this value to `true`,
+     * the default trigger behavior will be disabled.
+     * @values true, false
+     */
+    openOnContext: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Element type (tag name) of the root element of the component.
+     */
+    elementType: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * Named transition when the content display is toggled.
+     * @see DtLazyShow
+     */
+    transition: {
+      type: String,
+      default: "fade"
+    },
+    /**
+     * ARIA role for the content of the popover. Defaults to "dialog".
+     * <a class="d-link" href="https://www.w3.org/TR/wai-aria/#aria-haspopup" target="_blank">aria-haspopup</a>
+     */
+    role: {
+      type: String,
+      default: "dialog",
+      validator: (t) => Ae.includes(t)
+    },
+    /**
+     * ID of the element that serves as the label for the popover content.
+     * Defaults to the "anchor" element; this exists to provide a different
+     * ID of the label element if, for example, the anchor slot contains
+     * other items that do not serve as a label. You should provide this
+     * or ariaLabel, but not both.
+     */
+    ariaLabelledby: {
+      type: String,
+      default: null
+    },
+    /**
+     * Descriptive label for the popover content. You should provide this
+     * or ariaLabelledby, but not both.
+     */
+    ariaLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * A set of props to be passed into the popover's header close button.
+     * Requires an 'ariaLabel' property, when the header popover is visible
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Padding size class for the popover content.
+     * @values none, small, medium, large
+     */
+    padding: {
+      type: String,
+      default: "large",
+      validator: (t) => Object.keys(b).some((e) => e === t)
+    },
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Width configuration for the popover content. When its value is 'anchor',
+     * the popover content will have the same width as the anchor.
+     * @values null, anchor
+     */
+    contentWidth: {
+      type: String,
+      default: "",
+      validator: (t) => we.includes(t)
+    },
+    /**
+     * Tabindex value for the content. Passing null, no tabindex attribute will be set.
+     */
+    contentTabindex: {
+      type: Number || null,
+      default: -1
+    },
+    /**
+     * External anchor id to use in those cases the anchor can't be provided via the slot.
+     * For instance, using the combobox's input as the anchor for the popover.
+     */
+    externalAnchor: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The id of the tooltip
+     */
+    id: {
+      type: String,
+      default() {
+        return _();
+      }
+    },
+    /**
+     *  Displaces the content box from its anchor element
+     *  by the specified number of pixels.
+     *  <a
+     *    class="d-link"
+     *    href="https://atomiks.github.io/tippyjs/v6/all-props/#offset"
+     *    target="_blank"
+     *  >
+     *    Tippy.js docs
+     *  </a>
+     */
+    offset: {
+      type: Array,
+      default: () => [0, 4]
+    },
+    /**
+     * Determines if the popover hides upon clicking the
+     * anchor or outside the content box.
+     * @values true, false
+     */
+    hideOnClick: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Determines modal state. If enabled popover has a modal overlay
+     * preventing interaction with elements below it, but it is invisible.
+     * @values true, false
+     */
+    modal: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * If the popover does not fit in the direction described by "placement",
+     * it will attempt to change its direction to the "fallbackPlacements".
+     * <a
+     *   class="d-link"
+     *   href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements"
+     *   target="_blank"
+     * >
+     *   Popper.js docs
+     * </a>
+     * */
+    fallbackPlacements: {
+      type: Array,
+      default: () => ["auto"]
+    },
+    /**
+     * The direction the popover displays relative to the anchor.
+     * <a
+     *   class="d-link"
+     *   href="https://atomiks.github.io/tippyjs/v6/all-props/#placement"
+     *   target="_blank"
+     * >
+     *   Tippy.js docs
+     * </a>
+     * @values top, top-start, top-end,
+     * right, right-start, right-end,
+     * left, left-start, left-end,
+     * bottom, bottom-start, bottom-end,
+     * auto, auto-start, auto-end
+     */
+    placement: {
+      type: String,
+      default: "bottom-end"
+    },
+    /**
+     * If set to false the dialog will display over top of the anchor when there is insufficient space.
+     * If set to true it will never move from its position relative to the anchor and will clip instead.
+     * <a
+     *   class="d-link"
+     *   href="https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether"
+     *   target="_blank"
+     * >
+     *   Popper.js docs
+     * </a>
+     * @values true, false
+     */
+    tether: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * If the popover sticks to the anchor. This is usually not needed, but can be needed
+     * if the reference element's position is animating, or to automatically update the popover
+     * position in those cases the DOM layout changes the reference element's position.
+     * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
+     * checks the "popper" rect for changes.
+     * <a
+     *   class="d-link"
+     *   href="https://atomiks.github.io/tippyjs/v6/all-props/#sticky"
+     *   target="_blank"
+     * >
+     *   Tippy.js docs
+     * </a>
+     * @values true, false, reference, popper
+     */
+    sticky: {
+      type: [Boolean, String],
+      default: !1,
+      validator: (t) => ke.includes(t)
+    },
+    /**
+     * Determines maximum height for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    maxHeight: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Determines maximum width for the popover before overflow.
+     * Possible units rem|px|%|em
+     */
+    maxWidth: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Determines visibility for close button
+     * @values true, false
+     */
+    showCloseButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Additional class name for the header content wrapper element.
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional class name for the footer content wrapper element.
+     */
+    footerClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional class name for the dialog element.
+     */
+    dialogClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * The element that is focused when the popover is opened. This can be an
+     * HTMLElement within the popover, a string starting with '#' which will
+     * find the element by ID. 'first' which will automatically focus
+     * the first element, or 'dialog' which will focus the dialog window itself.
+     * If the dialog is modal this prop cannot be 'none'.
+     * @values none, dialog, first
+     */
+    initialFocusElement: {
+      type: [String, HTMLElement],
+      default: "first",
+      validator: (t) => Pe.includes(t) || t instanceof HTMLElement || t.startsWith("#")
+    },
+    /**
+     * If the popover should open pressing up or down arrow key on the anchor element.
+     * This can be set when not passing open prop.
+     * @values true, false
+     */
+    openWithArrowKeys: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets the element to which the popover is going to append to.
+     * 'body' will append to the nearest body (supports shadow DOM).
+     * @values 'body', 'parent', HTMLElement,
+     */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: "body",
+      validator: (t) => $e.includes(t) || t instanceof HTMLElement
+    }
+  },
+  emits: [
+    /**
+     * Emitted when popover is shown or hidden
+     *
+     * @event opened
+     * @type {Boolean | Array}
+     */
+    "opened",
+    /**
+     * Emitted to sync value with parent
+     *
+     * @event update:opened
+     * @type {Boolean | Array}
+     */
+    "update:open"
+  ],
+  data() {
+    return {
+      POPOVER_PADDING_CLASSES: b,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES: Te,
+      intersectionObserver: null,
+      isOutsideViewport: !1,
+      isOpen: !1,
+      anchorEl: null,
+      popoverContentEl: null
+    };
+  },
+  computed: {
+    popoverListeners() {
+      return {
+        ...this.$listeners,
+        keydown: (t) => {
+          this.onKeydown(t), this.$emit("keydown", t);
+        },
+        "after-leave": (t) => {
+          this.onLeaveTransitionComplete();
+        },
+        "after-enter": (t) => {
+          this.onEnterTransitionComplete();
+        }
+      };
+    },
+    calculatedMaxHeight() {
+      return this.isOutsideViewport && this.modal ? "calc(100vh - var(--dt-space-300))" : this.maxHeight;
+    },
+    labelledBy() {
+      return this.ariaLabelledby || !this.ariaLabel && _("DtPopover__anchor");
+    }
+  },
+  watch: {
+    $props: {
+      immediate: !0,
+      deep: !0,
+      handler() {
+        this.validateProps();
+      }
+    },
+    modal(t) {
+      var e;
+      (e = this.tip) == null || e.setProps({
+        zIndex: t ? 650 : this.calculateAnchorZindex()
+      });
+    },
+    offset(t) {
+      var e;
+      (e = this.tip) == null || e.setProps({
+        offset: t
+      });
+    },
+    sticky(t) {
+      var e;
+      (e = this.tip) == null || e.setProps({
+        sticky: t
+      });
+    },
+    fallbackPlacements() {
+      var t;
+      (t = this.tip) == null || t.setProps({
+        popperOptions: this.popperOptions()
+      });
+    },
+    tether() {
+      var t;
+      (t = this.tip) == null || t.setProps({
+        popperOptions: this.popperOptions()
+      });
+    },
+    placement(t) {
+      var e;
+      (e = this.tip) == null || e.setProps({
+        placement: t
+      });
+    },
+    open: {
+      handler: function(t) {
+        t !== null && (this.isOpen = t);
+      },
+      immediate: !0
+    },
+    isOpen(t, e) {
+      t ? (this.initTippyInstance(), this.tip.show()) : !t && e !== t && (this.removeEventListeners(), this.tip.hide());
+    }
+  },
+  mounted() {
+    const t = this.externalAnchor ? this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`) : null;
+    this.anchorEl = t ?? this.$refs.anchor.children[0], this.popoverContentEl = this.$refs.content.$el, this.isOpen && (this.initTippyInstance(), this.tip.show()), this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport), this.intersectionObserver.observe(this.popoverContentEl);
+  },
+  beforeDestroy() {
+    var t;
+    (t = this.tip) == null || t.destroy(), this.intersectionObserver.disconnect(), this.removeReferences(), this.removeEventListeners();
+  },
+  /******************
+   *     METHODS    *
+   ******************/
+  methods: {
+    hasIntersectedViewport(t) {
+      var n;
+      const e = (n = t == null ? void 0 : t[0]) == null ? void 0 : n.target;
+      if (!e)
+        return;
+      const s = R(e);
+      this.isOutsideViewport = s.bottom || s.top;
+    },
+    popperOptions() {
+      return N({
+        fallbackPlacements: this.fallbackPlacements,
+        tether: this.tether,
+        hasHideModifierEnabled: !0
+      });
+    },
+    validateProps() {
+      this.modal && this.initialFocusElement === "none" && console.error('If the popover is modal you must set the initialFocusElement prop. Possible values: "dialog", "first", HTMLElement');
+    },
+    calculateAnchorZindex() {
+      var t;
+      return this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]') || // Special case because we don't have any dialtone drawer component yet. Render at 650 when
+      // anchor of popover is within a drawer.
+      (t = this.anchorEl) != null && t.closest(".d-zi-drawer") ? 650 : 300;
+    },
+    defaultToggleOpen(t) {
+      var e, s;
+      this.openOnContext || (this.open ?? ((e = this.anchorEl) != null && e.contains(t.target) && !((s = this.anchorEl) != null && s.disabled) && this.toggleOpen()));
+    },
+    async onContext(t) {
+      this.openOnContext && (t.preventDefault(), this.isOpen = !0, await this.$nextTick(), this.tip.setProps({
+        placement: "right-start",
+        getReferenceClientRect: () => ({
+          width: 0,
+          height: 0,
+          top: t.clientY,
+          bottom: t.clientY,
+          left: t.clientX,
+          right: t.clientX
+        })
+      }));
+    },
+    toggleOpen() {
+      this.isOpen = !this.isOpen;
+    },
+    onArrowKeyPress(t) {
+      var e;
+      this.open === null && this.openWithArrowKeys && (e = this.anchorEl) != null && e.contains(t.target) && (this.isOpen || (this.isOpen = !0));
+    },
+    addEventListeners() {
+      window.addEventListener("dt-popover-close", this.closePopover), this.contentWidth === "anchor" && window.addEventListener("resize", this.onResize);
+    },
+    removeEventListeners() {
+      window.removeEventListener("dt-popover-close", this.closePopover), this.contentWidth === "anchor" && window.removeEventListener("resize", this.onResize);
+    },
+    closePopover() {
+      this.isOpen = !1;
+    },
+    /*
+    * Prevents scrolling outside of the currently opened modal popover by:
+    *   - when anchor is not within another popover: setting the body to overflow: hidden
+    *   - when anchor is within another popover: set the popover dialog container to it's non-modal z-index
+    *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
+    **/
+    preventScrolling() {
+      var t;
+      if (this.modal) {
+        const e = (t = this.anchorEl) == null ? void 0 : t.closest("body, .tippy-box");
+        e.tagName.toLowerCase() === "body" ? (e.classList.add("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : e.classList.add("d-zi-popover");
+      }
+    },
+    /*
+    * Resets the prevent scrolling properties set in preventScrolling() back to normal.
+    **/
+    enableScrolling() {
+      var e, s;
+      const t = (e = this.anchorEl) == null ? void 0 : e.closest("body, .tippy-box");
+      t && (((s = t.tagName) == null ? void 0 : s.toLowerCase()) === "body" ? (t.classList.remove("d-of-hidden"), this.tip.setProps({ offset: this.offset })) : t.classList.remove("d-zi-popover"));
+    },
+    removeReferences() {
+      this.anchorEl = null, this.popoverContentEl = null, this.tip = null;
+    },
+    async onShow() {
+      this.contentWidth === "anchor" && await this.setPopoverContentAnchorWidth(), this.contentWidth === null && (this.popoverContentEl.style.width = "auto"), this.addEventListeners();
+    },
+    async onLeaveTransitionComplete() {
+      var t;
+      this.modal && (await this.focusFirstElement(this.$refs.anchor), await this.$nextTick(), this.enableScrolling()), (t = this.tip) == null || t.unmount(), this.$emit("opened", !1), this.open !== null && this.$emit("update:open", !1);
+    },
+    async onEnterTransitionComplete() {
+      this.focusInitialElement(), await this.$nextTick(), this.preventScrolling(), this.$emit("opened", !0, this.$refs.popover__content), this.open !== null && this.$emit("update:open", !0);
+    },
+    focusInitialElement() {
+      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 e, s, n;
+      const t = (s = (e = this.$refs.content) == null ? void 0 : e.$el) == null ? void 0 : s.querySelector(this.initialFocusElement);
+      t ? t.focus() : console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'), t ? t.focus() : (n = this.$refs.content) == null || n.$el.focus();
+    },
+    onResize() {
+      this.closePopover();
+    },
+    onClickOutside() {
+      if (!this.hideOnClick)
+        return;
+      this.popoverContentEl.querySelector(".d-popover__anchor--opened") || this.closePopover();
+    },
+    onKeydown(t) {
+      t.key === "Tab" && this.modal && this.focusTrappedTabPress(t, this.popoverContentEl), t.key === "Escape" && this.closePopover();
+    },
+    async setPopoverContentAnchorWidth() {
+      var t;
+      await this.$nextTick(), this.popoverContentEl.style.width = `${(t = this.anchorEl) == null ? void 0 : t.clientWidth}px`;
+    },
+    focusFirstElementIfNeeded(t) {
+      var s, n;
+      this._getFocusableElements(t, !0).length !== 0 ? this.focusFirstElement(t) : this.showCloseButton ? (s = this.$refs.popover__header) == null || s.focusCloseButton() : (n = this.$refs.content) == null || n.$el.focus();
+    },
+    initTippyInstance() {
+      var t, e;
+      this.tip = F(this.anchorEl, {
+        popperOptions: this.popperOptions(),
+        contentElement: this.popoverContentEl,
+        placement: this.placement,
+        offset: this.offset,
+        sticky: this.sticky,
+        appendTo: this.appendTo === "body" ? (e = (t = this.anchorEl) == null ? void 0 : t.getRootNode()) == null ? void 0 : e.querySelector("body") : this.appendTo,
+        interactive: !0,
+        trigger: "manual",
+        // We have to manage hideOnClick functionality manually to handle
+        // popover within popover situations.
+        hideOnClick: !1,
+        zIndex: this.modal ? 650 : this.calculateAnchorZindex(),
+        onClickOutside: this.onClickOutside,
+        onShow: this.onShow
+      });
+    }
+  }
+};
+var ze = function() {
+  var e = this, s = e._self._c;
+  return s("div", [e.modal && e.isOpen ? s("portal", [s("div", { staticClass: "d-modal--transparent", attrs: { "aria-hidden": e.modal && e.isOpen ? "false" : "true" }, on: { click: function(n) {
+    n.preventDefault(), n.stopPropagation();
+  } } })]) : e._e(), s(e.elementType, e._g({ ref: "popover", tag: "component", class: ["d-popover", { "d-popover__anchor--opened": e.isOpen }], attrs: { "data-qa": "dt-popover-container" } }, e.$listeners), [s("div", { ref: "anchor", attrs: { id: !e.ariaLabelledby && e.labelledBy, "data-qa": "dt-popover-anchor", tabindex: e.openOnContext ? 0 : void 0 }, on: { "!click": function(n) {
+    return e.defaultToggleOpen.apply(null, arguments);
+  }, contextmenu: e.onContext, keydown: [function(n) {
+    return !n.type.indexOf("key") && e._k(n.keyCode, "up", 38, n.key, ["Up", "ArrowUp"]) ? null : (n.preventDefault(), e.onArrowKeyPress.apply(null, arguments));
+  }, function(n) {
+    return !n.type.indexOf("key") && e._k(n.keyCode, "down", 40, n.key, ["Down", "ArrowDown"]) ? null : (n.preventDefault(), e.onArrowKeyPress.apply(null, arguments));
+  }], "!keydown": function(n) {
+    return !n.type.indexOf("key") && e._k(n.keyCode, "escape", void 0, n.key, void 0) ? null : e.closePopover.apply(null, arguments);
+  } } }, [e._t("anchor", null, { attrs: {
+    "aria-expanded": e.isOpen.toString(),
+    "aria-controls": e.id,
+    "aria-haspopup": e.role
+  } })], 2), s("dt-lazy-show", e._g({ ref: "content", class: ["d-popover__dialog", { "d-popover__dialog--modal": e.modal }, e.dialogClass], style: {
+    "max-height": e.calculatedMaxHeight,
+    "max-width": e.maxWidth
+  }, attrs: { id: e.id, role: e.role, "data-qa": "dt-popover", "aria-hidden": `${!e.isOpen}`, "aria-labelledby": e.labelledBy, "aria-label": e.ariaLabel, "aria-modal": `${!e.modal}`, transition: e.transition, show: e.isOpen, tabindex: e.contentTabindex, appear: "" } }, e.popoverListeners), [e.$slots.headerContent || e.showCloseButton ? s("popover-header-footer", { ref: "popover__header", class: e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding], attrs: { "content-class": e.headerClass, type: "header", "show-close-button": e.showCloseButton, "close-button-props": e.closeButtonProps }, on: { close: e.closePopover }, scopedSlots: e._u([{ key: "content", fn: function() {
+    return [e._t("headerContent", null, { close: e.closePopover })];
+  }, proxy: !0 }], null, !0) }) : e._e(), s("div", { ref: "popover__content", class: [
+    "d-popover__content",
+    e.POPOVER_PADDING_CLASSES[e.padding],
+    e.contentClass
+  ], attrs: { "data-qa": "dt-popover-content" } }, [e._t("content", null, { close: e.closePopover })], 2), e.$slots.footerContent ? s("popover-header-footer", { ref: "popover__footer", class: e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding], attrs: { type: "footer", "content-class": e.footerClass }, scopedSlots: e._u([{ key: "content", fn: function() {
+    return [e._t("footerContent", null, { close: e.closePopover })];
+  }, proxy: !0 }], null, !0) }) : e._e(), e.showVisuallyHiddenClose ? s("sr-only-close-button", { attrs: { "visually-hidden-close-label": e.visuallyHiddenCloseLabel }, on: { close: e.closePopover } }) : e._e()], 1)], 1)], 1);
+}, je = [], Ke = /* @__PURE__ */ a(
+  Me,
+  ze,
+  je,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const lt = Ke.exports;
+function C(t) {
+  return t === i.default;
+}
+function O(t) {
+  if (l(t) === "string")
+    return C(t) ? null : i[t];
+  if (l(t) === "object") {
+    const { default: e } = t;
+    return C(e) ? null : i[e];
+  } else
+    return null;
+}
+function l(t) {
+  return typeof t;
+}
+function We(t) {
+  return O(t) ? `d-stack--${i[O(t)]}` : null;
+}
+function Ge(t) {
+  return l(t) === "object" ? [
+    ...A.map((e) => t[e] ? `d-stack--${e}--${t[e]}` : null)
+  ] : null;
+}
+function Ue(t) {
+  return y.includes(t) ? `d-stack--gap-${t}` : null;
+}
+function Ye(t) {
+  if (l(t) === "string")
+    return Object.keys(i).includes(t);
+  if (l(t) === "object") {
+    const { default: e } = t;
+    return Object.keys(i).includes(e);
+  } else
+    return null;
+}
+function Ze(t) {
+  return y.includes(t);
+}
+const Xe = {
+  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: (t) => Ye(t)
+    },
+    /**
+     * 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: (t) => Ze(t)
+    }
+  },
+  data() {
+    return {
+      DT_STACK_DIRECTION: i,
+      DT_STACK_GAP: y,
+      DT_STACK_RESPONSIVE_BREAKPOINTS: A
+    };
+  },
+  computed: {
+    stackGap() {
+      return Ue(this.gap);
+    },
+    defaultDirection() {
+      return We(this.direction);
+    },
+    stackResponsive() {
+      return Ge(this.direction);
+    }
+  }
+};
+var Je = function() {
+  var e = this, s = e._self._c;
+  return s(e.as, { tag: "component", class: [
+    "d-stack",
+    e.defaultDirection,
+    e.stackResponsive,
+    e.stackGap
+  ] }, [e._t("default")], 2);
+}, Qe = [], et = /* @__PURE__ */ a(
+  Xe,
+  Je,
+  Qe,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const dt = et.exports;
+export {
+  f as A,
+  A as B,
+  it as D,
+  d as L,
+  ye as M,
+  $e as P,
+  he as S,
+  dt as a,
+  ot as b,
+  at as c,
+  lt as d,
+  de as e,
+  y as f,
+  P as g,
+  we as h,
+  E as i,
+  U as j,
+  Y as k,
+  g as l,
+  Z as m,
+  X as n,
+  S as o,
+  h as p,
+  b as q,
+  Te as r,
+  Ae as s,
+  Pe as t,
+  ke as u,
+  rt as v,
+  G as w,
+  r as x,
+  M as y,
+  i as z
+};