@dialpad/dialtone-vue 2.107.0 → 2.109.0

package/dist/stack-DRdhbSNl.js

@@ -0,0 +1,2336 @@
+import { n as a, g, a as P, u as x, b as $, B as L, c as D, i as R, d as N, e as F } from "./tooltip-PDBwUvGD.js";
+import { t as p, I as V, L as z, w as H, x as C } from "./emoji-BMxSCSLg.js";
+import u from "vue";
+const r = {
+  BUSY: "busy",
+  AWAY: "away",
+  OFFLINE: "offline",
+  ACTIVE: "active"
+}, B = [
+  r.BUSY,
+  r.AWAY,
+  r.OFFLINE,
+  r.ACTIVE
+], q = {
+  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) => B.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"
+  } })]);
+}, M = [], K = /* @__PURE__ */ a(
+  q,
+  j,
+  M,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const W = K.exports, f = {
+  xs: "d-avatar--xs",
+  sm: "d-avatar--sm",
+  md: "d-avatar--md",
+  lg: "d-avatar--lg",
+  xl: "d-avatar--xl"
+}, G = {
+  default: "",
+  icon: "d-avatar__icon",
+  initials: "d-avatar__initials"
+}, U = {
+  md: "d-avatar__presence--md",
+  lg: "d-avatar__presence--lg"
+}, _ = {
+  NONE: "",
+  BUSY: "busy",
+  AWAY: "away",
+  OFFLINE: "offline",
+  ACTIVE: "active"
+}, Y = {
+  xs: "100",
+  sm: "200",
+  md: "300",
+  lg: "500",
+  xl: "600"
+}, Z = [
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "1000",
+  "1100",
+  "1200",
+  "1300",
+  "1400",
+  "1500",
+  "1600",
+  "1700",
+  "1800"
+], b = (t) => t > 1, X = [
+  "accessibility",
+  "activity",
+  "add-task",
+  "agent-assist",
+  "ai-notes",
+  "airplay",
+  "airtable",
+  "alarm-check",
+  "alarm-clock-off",
+  "alarm-minus",
+  "alarm-plus",
+  "album",
+  "alert-circle",
+  "alert-triangle",
+  "amex",
+  "app-store-badge",
+  "apple",
+  "archive",
+  "archive-restore",
+  "arrow-down",
+  "arrow-down-left",
+  "arrow-down-right",
+  "arrow-left",
+  "arrow-left-right",
+  "arrow-right",
+  "arrow-up",
+  "arrow-up-down",
+  "arrow-up-left",
+  "arrow-up-right",
+  "asana",
+  "asterisk",
+  "at-sign",
+  "ata-adapter",
+  "attestation",
+  "attestation-outline",
+  "axis-3d",
+  "bar-chart",
+  "bar-chart-2",
+  "bar-chart-3",
+  "bar-chart-4",
+  "bar-chart-horizontal",
+  "barge",
+  "baseline",
+  "battery",
+  "battery-charging",
+  "battery-full",
+  "battery-low",
+  "battery-medium",
+  "bell",
+  "bell-minus",
+  "bell-off",
+  "bell-plus",
+  "bell-ring",
+  "binary",
+  "bluetooth",
+  "bluetooth-connected",
+  "bluetooth-off",
+  "bluetooth-searching",
+  "blur-background",
+  "bold",
+  "book",
+  "book-open",
+  "bookmark",
+  "bookmark-minus",
+  "bookmark-plus",
+  "box",
+  "box-select",
+  "boxes",
+  "branch",
+  "brand-dialpad",
+  "brand-dialpad-meetings",
+  "briefcase",
+  "building",
+  "building-2",
+  "bullhorn",
+  "calculator",
+  "calendar",
+  "calendar-check",
+  "calendar-check-2",
+  "calendar-clock",
+  "calendar-days",
+  "calendar-heart",
+  "calendar-minus",
+  "calendar-off",
+  "calendar-plus",
+  "calendar-range",
+  "calendar-search",
+  "calendar-x",
+  "call-abandoned",
+  "call-merge",
+  "call-rejected",
+  "camera",
+  "camera-off",
+  "camera-tracking",
+  "cast",
+  "check",
+  "check-circle",
+  "check-circle-filled",
+  "chevron-down",
+  "chevron-first",
+  "chevron-last",
+  "chevron-left",
+  "chevron-right",
+  "chevron-up",
+  "chevrons-down",
+  "chevrons-down-up",
+  "chevrons-left",
+  "chevrons-left-right",
+  "chevrons-right",
+  "chevrons-right-left",
+  "chevrons-up",
+  "chevrons-up-down",
+  "circle-half-filled",
+  "circle-slashed",
+  "clipboard",
+  "clipboard-check",
+  "clipboard-copy",
+  "clipboard-edit",
+  "clipboard-list",
+  "clipboard-signature",
+  "clipboard-type",
+  "clipboard-x",
+  "clock",
+  "clock-1",
+  "clock-10",
+  "clock-11",
+  "clock-12",
+  "clock-2",
+  "clock-3",
+  "clock-4",
+  "clock-5",
+  "clock-6",
+  "clock-7",
+  "clock-8",
+  "clock-9",
+  "clockify",
+  "close",
+  "cloud",
+  "cloud-cog",
+  "cloud-drizzle",
+  "cloud-fog",
+  "cloud-hail",
+  "cloud-lightning",
+  "cloud-moon",
+  "cloud-moon-rain",
+  "cloud-off",
+  "cloud-rain",
+  "cloud-rain-wind",
+  "cloud-snow",
+  "cloud-sun",
+  "cloud-sun-rain",
+  "cloudy",
+  "coaching-hub",
+  "code",
+  "command",
+  "concierge-bell",
+  "contacts",
+  "copper-crm",
+  "copy",
+  "copyright",
+  "corner-down-left",
+  "corner-down-right",
+  "corner-left-down",
+  "corner-left-up",
+  "corner-right-down",
+  "corner-right-up",
+  "corner-up-left",
+  "corner-up-right",
+  "cpu",
+  "credit-card",
+  "dash",
+  "dect-base-station",
+  "dect-handset",
+  "delete",
+  "deskphone",
+  "dialbot",
+  "dialer",
+  "dialpad-ai",
+  "dialpad-ai-color",
+  "dialpad-logomark",
+  "digital-whisper",
+  "diners-club",
+  "discover",
+  "dissatisfied",
+  "double-check",
+  "download",
+  "download-cloud",
+  "dp-phone",
+  "edit",
+  "edit-2",
+  "empty",
+  "end-chat",
+  "equal",
+  "eraser",
+  "evernote",
+  "expand",
+  "expert-node",
+  "external-link",
+  "eye",
+  "eye-off",
+  "facebook",
+  "factory",
+  "fast-forward",
+  "file",
+  "file-audio",
+  "files",
+  "film",
+  "filter",
+  "fingerprint",
+  "flag",
+  "flag-off",
+  "flame",
+  "focus",
+  "folder",
+  "folder-tree",
+  "folders",
+  "food",
+  "form-input",
+  "forward",
+  "freshsales-crm",
+  "front",
+  "gamepad",
+  "gauge",
+  "gif-filled",
+  "gif-outline",
+  "giphy",
+  "globe-2",
+  "gmail",
+  "google-business-messaging",
+  "google-calendar",
+  "google-docs",
+  "google-drive",
+  "google-glyph",
+  "google-sheets",
+  "google-slides",
+  "greenhouse",
+  "grid",
+  "grip-horizontal",
+  "grip-vertical",
+  "hand",
+  "hard-drive",
+  "hash",
+  "hash-bold",
+  "haze",
+  "hd",
+  "headphones",
+  "hear",
+  "heart",
+  "help-circle",
+  "highfive",
+  "history",
+  "hold",
+  "home",
+  "hourglass",
+  "hubspot",
+  "image",
+  "import",
+  "inbox",
+  "indent",
+  "infinity",
+  "info",
+  "inspect",
+  "instagram",
+  "intercom",
+  "isolated-queries",
+  "italic",
+  "jcb",
+  "jira-service-desk",
+  "key",
+  "keyboard",
+  "keypad",
+  "languages",
+  "laptop-2",
+  "large-self-view",
+  "layout",
+  "layout-dashboard",
+  "layout-filmstrip",
+  "layout-grid",
+  "layout-template",
+  "library",
+  "life-buoy",
+  "lightbulb",
+  "lightbulb-off",
+  "lightning-bolt",
+  "line-chart",
+  "line-messenger",
+  "link-2",
+  "link-2-off",
+  "linkedin",
+  "list-add",
+  "list-bullet",
+  "list-checks",
+  "list-ordered",
+  "listen",
+  "listen",
+  "listening",
+  "live-queue",
+  "living-thing",
+  "loading",
+  "lock",
+  "lock-filled",
+  "log-in",
+  "log-out",
+  "maestro",
+  "mail",
+  "mail-open",
+  "mails",
+  "map",
+  "map-pin",
+  "mastercard",
+  "maximize",
+  "megaphone",
+  "megaphone-off",
+  "menu",
+  "message",
+  "messenger",
+  "mic",
+  "mic-off",
+  "microsoft",
+  "microsoft-dynamics-365",
+  "microsoft-teams",
+  "minimize",
+  "minimize-alt",
+  "minus-circle",
+  "miro",
+  "monday-com",
+  "monitor",
+  "monitor-off",
+  "monitor-speaker",
+  "moon",
+  "more-horizontal",
+  "more-vertical",
+  "mouse",
+  "multi-line-dept",
+  "music",
+  "music-off",
+  "network",
+  "neutral",
+  "newspaper",
+  "not-enough-queries",
+  "notes",
+  "object",
+  "office-365",
+  "option",
+  "package",
+  "paperclip",
+  "park",
+  "party-popper",
+  "past-conversations",
+  "pause",
+  "pause-circle",
+  "phone",
+  "phone-call",
+  "phone-forward",
+  "phone-hang-up",
+  "phone-hang-up",
+  "phone-hold",
+  "phone-incoming",
+  "phone-missed",
+  "phone-off",
+  "phone-outgoing",
+  "picture-in-picture",
+  "pie-chart",
+  "pin",
+  "pin-off",
+  "pipedrive",
+  "play",
+  "play-circle",
+  "play-filled",
+  "play-store-badge",
+  "plug",
+  "plus",
+  "plus-circle",
+  "power",
+  "print-fax",
+  "printer",
+  "puzzle",
+  "qr-code",
+  "queries",
+  "quote",
+  "record",
+  "record-filled",
+  "redo",
+  "refresh",
+  "repeat",
+  "reply",
+  "reply-all",
+  "rewind",
+  "rewind-15-sec",
+  "salesforce-glyph",
+  "salesforce-logo",
+  "satisfied",
+  "save",
+  "scan",
+  "scan-face",
+  "scissors",
+  "screen-share-off",
+  "scroll",
+  "search",
+  "send",
+  "servicenow",
+  "settings",
+  "share",
+  "share-2",
+  "share-screen",
+  "sheet",
+  "shield",
+  "shield-alert",
+  "shield-check",
+  "shield-close",
+  "shield-off",
+  "shortcuts",
+  "shuffle",
+  "sidebar",
+  "sidebar-close",
+  "sidebar-open",
+  "signal-best",
+  "signal-high",
+  "signal-low",
+  "signal-medium",
+  "signal-zero",
+  "siren",
+  "skip-15-sec",
+  "skip-back",
+  "skip-back-ten",
+  "skip-forward",
+  "skip-forward-ten",
+  "slack",
+  "slash",
+  "sliders",
+  "sliders-horizontal",
+  "small-self-view",
+  "smartphone",
+  "smartphone-charging",
+  "snapchat",
+  "snooze",
+  "snowflake",
+  "somewhat-dissatisfied",
+  "somewhat-satisfied",
+  "sort-asc",
+  "sort-desc",
+  "sparkle",
+  "speaker",
+  "star",
+  "star-filled",
+  "sticker",
+  "stop-circle",
+  "stop-filled",
+  "strikethrough",
+  "sun",
+  "sun-dim",
+  "sun-medium",
+  "sunrise",
+  "sunset",
+  "switch-to-cellular",
+  "switch-to-hd",
+  "table",
+  "tag",
+  "tags",
+  "takeover",
+  "task",
+  "telegram",
+  "text-cursor",
+  "text-cursor-input",
+  "thermometer",
+  "thermometer-snowflake",
+  "thermometer-sun",
+  "thread",
+  "threads",
+  "thumbs-down",
+  "thumbs-up",
+  "tiktok",
+  "timer",
+  "timer-off",
+  "timer-reset",
+  "toggl",
+  "too-many-queries",
+  "tools",
+  "toy-brick",
+  "transfer",
+  "transfer-webchat",
+  "transportation",
+  "trash",
+  "trending-down",
+  "trending-up",
+  "triangle",
+  "twitter",
+  "type",
+  "umbrella",
+  "underline",
+  "undo-2",
+  "union-pay",
+  "unlink-2",
+  "unlock",
+  "unlock-filled",
+  "unread",
+  "upload",
+  "upload-cloud",
+  "usb",
+  "user",
+  "user-check",
+  "user-minus",
+  "user-plus",
+  "user-rematch",
+  "user-remove",
+  "users",
+  "very-dissatisfied",
+  "very-satisfied",
+  "viber",
+  "video",
+  "video-off",
+  "video-settings",
+  "visa",
+  "voicemail",
+  "voicemail-drop",
+  "volume",
+  "volume-1",
+  "volume-2",
+  "volume-x",
+  "waveform",
+  "we-chat",
+  "webcam",
+  "webchat",
+  "whatsapp",
+  "whisper",
+  "wifi",
+  "wifi-off",
+  "wind",
+  "x-brand",
+  "x-circle",
+  "zap-off",
+  "zendesk",
+  "zoho",
+  "zoho-crm",
+  "zoho-desk",
+  "zoom",
+  "zoom-in",
+  "zoom-logo",
+  "zoom-out"
+];
+function J() {
+  return [void 0, ...X];
+}
+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, o) => o === 0 || o === e.length - 1).map((s) => s.slice(0, 1).toUpperCase()).join("");
+}, ee = J(), te = {
+  name: "DtAvatar",
+  components: { DtPresence: W, DtIcon: p },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Id of the avatar content wrapper element
+     */
+    id: {
+      type: String,
+      default() {
+        return g();
+      }
+    },
+    /**
+     * 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: _.NONE,
+      validator: (t) => Object.values(_).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) => b(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(V).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: G,
+      AVATAR_PRESENCE_SIZE_MODIFIERS: U,
+      AVATAR_ICON_SIZES: Y,
+      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 b(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 ?? P(Z, 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);
+}, oe = [], ae = /* @__PURE__ */ a(
+  te,
+  se,
+  oe,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const at = ae.exports, ne = {
+  name: "DtLink",
+  props: {
+    /**
+     * Applies the link variant styles
+     * @values null, danger, warning, success, muted, inverted
+     */
+    kind: {
+      type: String,
+      default: "",
+      validator(t) {
+        return z.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: H
+    };
+  }
+};
+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(
+  ne,
+  ie,
+  re,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const nt = le.exports, ce = {
+  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.`);
+    }
+  }
+}, de = {
+  name: "SrOnlyCloseButton",
+  components: {
+    DtIcon: p,
+    DtButton: C
+  },
+  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(o) {
+    return !o.type.indexOf("key") && e._k(o.keyCode, "space", 32, o.key, [" ", "Spacebar"]) ? null : (o.preventDefault(), o.stopPropagation(), e.close.apply(null, arguments));
+  } } }, [s("dt-icon", { attrs: { name: "close" } })], 1);
+}, pe = [], fe = /* @__PURE__ */ a(
+  de,
+  ue,
+  pe,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const he = fe.exports, O = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', me = `${O}:not([tabindex="-1"])`, ge = "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(ge)].filter((o) => {
+        const n = window.getComputedStyle(o);
+        return n.getPropertyValue("display") !== "none" && n.getPropertyValue("visibility") !== "hidden" && o.matches(e ? O : 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 o = this._getFocusableElements(e);
+      if (!o.length) {
+        t.preventDefault();
+        return;
+      }
+      const n = this._getFirstFocusElement(o), v = o[o.length - 1];
+      t.shiftKey ? document.activeElement === n && (v.focus(), t.preventDefault()) : document.activeElement === v && (n.focus(), t.preventDefault());
+    }
+  }
+}, h = {
+  DEFAULT: "default",
+  CUSTOM: "custom"
+}, c = {
+  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 _e = 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()]);
+}, be = [], Se = /* @__PURE__ */ a(
+  ve,
+  _e,
+  be,
+  !1,
+  null,
+  "411cb81e",
+  null,
+  null
+);
+const S = Se.exports, Ee = {
+  name: "DtListItem",
+  components: {
+    DtItemLayout: S,
+    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 x.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: c.NONE,
+      validator: (t) => Object.values(c).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 S;
+        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 === c.TAB;
+    },
+    /**
+     * Whether to apply hover styles.
+     */
+    isHoverable() {
+      return this.navigationType !== c.NONE;
+    }
+  },
+  methods: {
+    onClick(t) {
+      this.$emit("click", t);
+    },
+    onMouseHover() {
+      this.mouseHighlighted = !0;
+    },
+    onMouseLeave() {
+      this.mouseHighlighted = !1;
+    }
+  }
+};
+var ke = 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(o, n) {
+    return { key: n, fn: function() {
+      return [e._t(n)];
+    }, 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);
+}, we = [], Ce = /* @__PURE__ */ a(
+  Ee,
+  ke,
+  we,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const it = Ce.exports, i = {
+  default: "column",
+  column: "column",
+  row: "row",
+  "row-reverse": "row-reverse",
+  "column-reverse": "column-reverse"
+}, I = ["sm", "md", "lg", "xl"], y = ["0", "100", "200", "300", "400", "500", "600"], E = {
+  none: void 0,
+  small: "d-p4",
+  medium: "d-p8",
+  large: "d-p16"
+}, Oe = {
+  none: void 0,
+  small: "d-pl4",
+  medium: "d-pl8",
+  large: "d-pl16"
+}, Ie = ["dialog", "menu", "listbox", "tree", "grid"], Te = ["", "anchor"], Ae = ["none", "dialog", "first"], Pe = ["parent", "body"], xe = [
+  ...$
+], rt = [
+  ...L
+];
+let $e = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", Le = (t = 21) => {
+  let e = "", s = t;
+  for (; s--; )
+    e += $e[Math.random() * 64 | 0];
+  return e;
+};
+function d(t) {
+  "@babel/helpers - typeof";
+  return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? d = function(e) {
+    return typeof e;
+  } : d = function(e) {
+    return e && typeof Symbol == "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+  }, d(t);
+}
+var T = {
+  selector: "vue-portal-target-".concat(Le())
+}, De = function(e) {
+  return T.selector = e;
+}, m = typeof window < "u" && (typeof document > "u" ? "undefined" : d(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);
+  }
+}), A = u.extend({
+  name: "VueSimplePortal",
+  props: {
+    disabled: {
+      type: Boolean
+    },
+    prepend: {
+      type: Boolean
+    },
+    selector: {
+      type: String,
+      default: function() {
+        return "#".concat(T.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", A), e.defaultSelector && De(e.defaultSelector);
+}
+typeof window < "u" && window.Vue && window.Vue === u && u.use(Ne);
+const Fe = {
+  name: "PopoverHeaderFooter",
+  components: {
+    DtButton: C,
+    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(o) {
+    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);
+}, ze = [], He = /* @__PURE__ */ a(
+  Fe,
+  Ve,
+  ze,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const Be = He.exports, qe = {
+  name: "DtPopover",
+  /********************
+   * CHILD COMPONENTS *
+   ********************/
+  components: {
+    SrOnlyCloseButton: he,
+    DtLazyShow: D,
+    PopoverHeaderFooter: Be,
+    Portal: A
+  },
+  mixins: [ye, ce],
+  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) => Ie.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(E).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) => Te.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 g();
+      }
+    },
+    /**
+     *  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) => xe.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) => Ae.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) => Pe.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: E,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES: Oe,
+      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 && g("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 o;
+      const e = (o = t == null ? void 0 : t[0]) == null ? void 0 : o.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, o;
+      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() : (o = this.$refs.content) == null || o.$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, o;
+      this._getFocusableElements(t, !0).length !== 0 ? this.focusFirstElement(t) : this.showCloseButton ? (s = this.$refs.popover__header) == null || s.focusCloseButton() : (o = this.$refs.content) == null || o.$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 je = 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(o) {
+    o.preventDefault(), o.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(o) {
+    return e.defaultToggleOpen.apply(null, arguments);
+  }, contextmenu: e.onContext, keydown: [function(o) {
+    return !o.type.indexOf("key") && e._k(o.keyCode, "up", 38, o.key, ["Up", "ArrowUp"]) ? null : (o.preventDefault(), e.onArrowKeyPress.apply(null, arguments));
+  }, function(o) {
+    return !o.type.indexOf("key") && e._k(o.keyCode, "down", 40, o.key, ["Down", "ArrowDown"]) ? null : (o.preventDefault(), e.onArrowKeyPress.apply(null, arguments));
+  }], "!keydown": function(o) {
+    return !o.type.indexOf("key") && e._k(o.keyCode, "escape", void 0, o.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);
+}, Me = [], Ke = /* @__PURE__ */ a(
+  qe,
+  je,
+  Me,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const lt = Ke.exports;
+function k(t) {
+  return t === i.default;
+}
+function w(t) {
+  if (l(t) === "string")
+    return k(t) ? null : i[t];
+  if (l(t) === "object") {
+    const { default: e } = t;
+    return k(e) ? null : i[e];
+  } else
+    return null;
+}
+function l(t) {
+  return typeof t;
+}
+function We(t) {
+  return w(t) ? `d-stack--${i[w(t)]}` : null;
+}
+function Ge(t) {
+  return l(t) === "object" ? [
+    ...I.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: I
+    };
+  },
+  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 ct = et.exports;
+export {
+  f as A,
+  I as B,
+  it as D,
+  c as L,
+  ye as M,
+  Pe as P,
+  he as S,
+  ct as a,
+  nt as b,
+  at as c,
+  lt as d,
+  ce as e,
+  y as f,
+  A as g,
+  Te as h,
+  S as i,
+  G as j,
+  U as k,
+  _ as l,
+  Y as m,
+  Z as n,
+  b as o,
+  h as p,
+  E as q,
+  Oe as r,
+  Ie as s,
+  Ae as t,
+  xe as u,
+  rt as v,
+  W as w,
+  r as x,
+  B as y,
+  i as z
+};