@dialpad/dialtone-vue 3.75.2 → 3.76.0

package/dist/{popover-d0be98d5.js → notice-4b77480d.js}

@@ -1,6 +1,113 @@
-import { _ as C, D as w, b as S, X as k, h as L, d as x, g as O, Y as F, Z as B, $ as H } from "./DtEmojiPicker-454f372c.js";
-import { resolveComponent as d, openBlock as r, createBlock as a, withKeys as p, withModifiers as v, withCtx as u, createVNode as g, createElementBlock as E, normalizeClass as h, renderSlot as y, createCommentVNode as f, mergeProps as A, Teleport as I, createElementVNode as b, resolveDynamicComponent as D, toHandlers as R } from "vue";
-const V = {
+import { _, D as O, h as P, c as S, X as D, d as F, g as L, Y as H, Z as N, $ as x } from "./DtEmojiPicker-16507e3f.js";
+import { resolveComponent as r, openBlock as l, createElementBlock as y, renderSlot as d, createVNode as m, createCommentVNode as p, createTextVNode as V, toDisplayString as R, createElementVNode as g, createBlock as f, withKeys as C, withModifiers as E, withCtx as u, mergeProps as w, normalizeClass as v, Teleport as $, resolveDynamicComponent as q, toHandlers as K } from "vue";
+const A = ["base", "error", "info", "success", "warning"], z = ["alert", "alertdialog", "status"], M = /* @__PURE__ */ new Map([
+  ["info", "info"],
+  ["success", "check-circle"],
+  ["warning", "alert-triangle"],
+  ["error", "alert-circle"],
+  ["base", "bell"]
+]), W = {
+  name: "DtNoticeIcon",
+  components: {
+    DtIcon: O
+  },
+  props: {
+    /**
+     * Kind of icon
+     * @values base, error, info, success, warning
+     */
+    kind: {
+      type: String,
+      default: "base",
+      validate(e) {
+        return A.includes(e);
+      }
+    }
+  },
+  data() {
+    return {
+      hasSlotContent: P
+    };
+  },
+  computed: {
+    defaultIcon() {
+      return M.get(this.kind);
+    }
+  }
+}, j = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "d-notice__icon"
+};
+function U(e, t, o, i, s, n) {
+  const c = r("dt-icon");
+  return n.defaultIcon || s.hasSlotContent(e.$slots.default) ? (l(), y("div", j, [
+    d(e.$slots, "default", {}, () => [
+      m(c, {
+        name: n.defaultIcon,
+        size: "400"
+      }, null, 8, ["name"])
+    ])
+  ])) : p("", !0);
+}
+const G = /* @__PURE__ */ _(W, [["render", U]]), Y = {
+  name: "DtNoticeContent",
+  props: {
+    /**
+     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * ID for the title element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the title.
+     */
+    titleId: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * ID for the content element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the content.
+     */
+    contentId: {
+      type: String,
+      default: void 0
+    }
+  },
+  data() {
+    return {
+      hasSlotContent: P
+    };
+  }
+}, Z = {
+  class: "d-notice__content",
+  "data-qa": "notice-content"
+}, X = ["id"], J = ["id"];
+function Q(e, t, o, i, s, n) {
+  return l(), y("div", Z, [
+    o.title || s.hasSlotContent(e.$slots.titleOverride) ? (l(), y("p", {
+      key: 0,
+      id: o.titleId,
+      class: "d-notice__title",
+      "data-qa": "notice-content-title"
+    }, [
+      d(e.$slots, "titleOverride", {}, () => [
+        V(R(o.title), 1)
+      ])
+    ], 8, X)) : p("", !0),
+    g("p", {
+      id: o.contentId,
+      class: "d-notice__message",
+      "data-qa": "notice-content-message"
+    }, [
+      d(e.$slots, "default")
+    ], 8, J)
+  ]);
+}
+const ee = /* @__PURE__ */ _(Y, [["render", Q]]), k = {
   props: {
     /**
      * If true, a hidden close button is included for screen readers
@@ -39,10 +146,10 @@ const V = {
            a visually hidden close button and you must set the visuallyHiddenCloseLabel prop.`);
     }
   }
-}, N = {
+}, te = {
   name: "SrOnlyCloseButton",
   components: {
-    DtIcon: w,
+    DtIcon: O,
     DtButton: S
   },
   props: {
@@ -62,23 +169,103 @@ const V = {
     }
   }
 };
-function K(e, t, o, s, i, n) {
-  const c = d("dt-icon"), m = d("dt-button");
-  return r(), a(m, {
+function oe(e, t, o, i, s, n) {
+  const c = r("dt-icon"), h = r("dt-button");
+  return l(), f(h, {
     id: "sr-only-close-button",
     "data-qa": "dt-sr-only-close-button",
     class: "d-vi-visible-sr",
     "aria-label": o.visuallyHiddenCloseLabel,
     onClick: n.close,
-    onKeydown: p(v(n.close, ["prevent", "stop"]), ["space"])
+    onKeydown: C(E(n.close, ["prevent", "stop"]), ["space"])
   }, {
     default: u(() => [
-      g(c, { name: "close" })
+      m(c, { name: "close" })
     ]),
     _: 1
   }, 8, ["aria-label", "onClick", "onKeydown"]);
 }
-const q = /* @__PURE__ */ C(N, [["render", K]]), T = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', z = `${T}:not([tabindex="-1"])`, M = "button,[href],input,select,textarea,details,[tabindex]", W = {
+const I = /* @__PURE__ */ _(te, [["render", oe]]), ne = {
+  name: "DtNoticeAction",
+  components: {
+    DtIcon: O,
+    DtButton: S,
+    SrOnlyCloseButton: I
+  },
+  mixins: [k],
+  props: {
+    /**
+     * Props for the notice close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Hides the close button from the notice
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    /**
+     * Close button click event
+     *
+     * @event close
+     */
+    "close"
+  ],
+  created() {
+    !this.hideClose && !this.closeButtonProps.ariaLabel && console.error("Invalid props: you must pass in closeButtonProps.ariaLabel if the close button is displayed.");
+  },
+  mounted() {
+    this.hideClose || (this.lastFocusedElement = document.activeElement);
+  },
+  beforeUnmount() {
+    var e;
+    (e = this.lastFocusedElement) == null || e.focus();
+  },
+  methods: {
+    close() {
+      this.$emit("close");
+    }
+  }
+}, se = {
+  class: "d-notice__actions",
+  "data-qa": "notice-content-actions"
+};
+function ie(e, t, o, i, s, n) {
+  const c = r("dt-icon"), h = r("dt-button"), b = r("sr-only-close-button");
+  return l(), y("div", se, [
+    d(e.$slots, "default"),
+    o.hideClose ? p("", !0) : (l(), f(h, w({
+      key: 0,
+      ref: "closeButton",
+      "data-qa": "dt-notice-action-close-button",
+      size: "sm",
+      importance: "clear",
+      circle: "",
+      "aria-label": o.closeButtonProps.ariaLabel ? o.closeButtonProps.ariaLabel : "Close"
+    }, o.closeButtonProps, { onClick: n.close }), {
+      icon: u(() => [
+        m(c, {
+          name: "close",
+          size: "200"
+        })
+      ]),
+      _: 1
+    }, 16, ["aria-label", "onClick"])),
+    e.showVisuallyHiddenClose ? (l(), f(b, {
+      key: 1,
+      "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
+      onClose: n.close
+    }, null, 8, ["visually-hidden-close-label", "onClose"])) : p("", !0)
+  ]);
+}
+const le = /* @__PURE__ */ _(ne, [["render", ie]]), B = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', ae = `${B}:not([tabindex="-1"])`, re = "button,[href],input,select,textarea,details,[tabindex]", de = {
   methods: {
     /**
      * get the first focusable element in your component, includes tabindex="-1".
@@ -122,9 +309,9 @@ const q = /* @__PURE__ */ C(N, [["render", K]]), T = ':not(:disabled):not([aria-
      * @param {bool} includeNegativeTabIndex - will include tabindex="-1" in the list of focusable elements.
      */
     _getFocusableElements(e = this.$el, t = !1) {
-      return e ? [...e.querySelectorAll(M)].filter((s) => {
-        const i = window.getComputedStyle(s);
-        return i.getPropertyValue("display") !== "none" && i.getPropertyValue("visibility") !== "hidden" && s.matches(t ? T : z);
+      return e ? [...e.querySelectorAll(re)].filter((i) => {
+        const s = window.getComputedStyle(i);
+        return s.getPropertyValue("display") !== "none" && s.getPropertyValue("visibility") !== "hidden" && i.matches(t ? B : ae);
       }) : [];
     },
     /**
@@ -136,32 +323,32 @@ const q = /* @__PURE__ */ C(N, [["render", K]]), T = ':not(:disabled):not([aria-
     focusTrappedTabPress(e, t) {
       if (!(e.key === "Tab"))
         return;
-      const s = this._getFocusableElements(t);
-      if (!s.length) {
+      const i = this._getFocusableElements(t);
+      if (!i.length) {
         e.preventDefault();
         return;
       }
-      const i = this._getFirstFocusElement(s), n = s[s.length - 1];
-      e.shiftKey ? document.activeElement === i && (n.focus(), e.preventDefault()) : document.activeElement === n && (i.focus(), e.preventDefault());
+      const s = this._getFirstFocusElement(i), n = i[i.length - 1];
+      e.shiftKey ? document.activeElement === s && (n.focus(), e.preventDefault()) : document.activeElement === n && (s.focus(), e.preventDefault());
     }
   }
-}, P = {
+}, T = {
   none: void 0,
   small: "d-p4",
   medium: "d-p8",
   large: "d-p16"
-}, j = {
+}, ce = {
   none: void 0,
   small: "d-pl4",
   medium: "d-pl8",
   large: "d-pl16"
-}, G = ["dialog", "menu", "listbox", "tree", "grid"], U = ["", "anchor"], Y = ["none", "dialog", "first"], Z = ["parent", "body"], $ = [
-  ...k
-], X = {
+}, ue = ["dialog", "menu", "listbox", "tree", "grid"], pe = ["", "anchor"], he = ["none", "dialog", "first"], fe = ["parent", "body"], me = [
+  ...D
+], ye = {
   name: "PopoverHeaderFooter",
   components: {
     DtButton: S,
-    DtIcon: w
+    DtIcon: O
   },
   props: {
     // eslint-disable-next-line vue/require-default-prop
@@ -207,7 +394,7 @@ const q = /* @__PURE__ */ C(N, [["render", K]]), T = ':not(:disabled):not([aria-
   ],
   data() {
     return {
-      hasSlotContent: L
+      hasSlotContent: P
     };
   },
   methods: {
@@ -218,23 +405,23 @@ const q = /* @__PURE__ */ C(N, [["render", K]]), T = ':not(:disabled):not([aria-
     }
   }
 };
-function J(e, t, o, s, i, n) {
-  const c = d("dt-icon"), m = d("dt-button");
-  return r(), E("div", {
+function ve(e, t, o, i, s, n) {
+  const c = r("dt-icon"), h = r("dt-button");
+  return l(), y("div", {
     "data-qa": "dt-popover-header-footer",
-    class: h({
+    class: v({
       "d-popover__header": o.type === "header",
       "d-popover__footer": o.type === "footer"
     })
   }, [
-    i.hasSlotContent(e.$slots.content) ? (r(), E("div", {
+    s.hasSlotContent(e.$slots.content) ? (l(), y("div", {
       key: 0,
       "data-qa": "dt-popover-header-footer-content",
-      class: h(["d-to-ellipsis", "d-w100p", o.contentClass])
+      class: v(["d-to-ellipsis", "d-w100p", o.contentClass])
     }, [
-      y(e.$slots, "content")
-    ], 2)) : f("", !0),
-    o.showCloseButton ? (r(), a(m, A({
+      d(e.$slots, "content")
+    ], 2)) : p("", !0),
+    o.showCloseButton ? (l(), f(h, w({
       key: 1,
       ref: "popover__close-button",
       "data-qa": "dt-popover-close",
@@ -243,30 +430,30 @@ function J(e, t, o, s, i, n) {
       kind: "muted",
       circle: ""
     }, o.closeButtonProps, {
-      onClick: t[0] || (t[0] = (_) => e.$emit("close"))
+      onClick: t[0] || (t[0] = (b) => e.$emit("close"))
     }), {
       icon: u(() => [
-        g(c, {
+        m(c, {
           name: "close",
           size: "300"
         })
       ]),
       _: 1
-    }, 16)) : f("", !0)
+    }, 16)) : p("", !0)
   ], 2);
 }
-const Q = /* @__PURE__ */ C(X, [["render", J]]);
-const ee = {
+const _e = /* @__PURE__ */ _(ye, [["render", ve]]);
+const be = {
   name: "DtPopover",
   /********************
    * CHILD COMPONENTS *
    ********************/
   components: {
-    SrOnlyCloseButton: q,
-    DtLazyShow: x,
-    PopoverHeaderFooter: Q
+    SrOnlyCloseButton: I,
+    DtLazyShow: F,
+    PopoverHeaderFooter: _e
   },
-  mixins: [W, V],
+  mixins: [de, k],
   props: {
     /**
      * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
@@ -309,7 +496,7 @@ const ee = {
     role: {
       type: String,
       default: "dialog",
-      validator: (e) => G.includes(e)
+      validator: (e) => ue.includes(e)
     },
     /**
      * ID of the element that serves as the label for the popover content.
@@ -345,7 +532,7 @@ const ee = {
     padding: {
       type: String,
       default: "large",
-      validator: (e) => Object.keys(P).some((t) => t === e)
+      validator: (e) => Object.keys(T).some((t) => t === e)
     },
     /**
      * Additional class name for the content wrapper element.
@@ -362,7 +549,7 @@ const ee = {
     contentWidth: {
       type: String,
       default: "",
-      validator: (e) => U.includes(e)
+      validator: (e) => pe.includes(e)
     },
     /**
      * Whether to apply transition on initial render in the content lazy show component.
@@ -392,7 +579,7 @@ const ee = {
     id: {
       type: String,
       default() {
-        return O();
+        return L();
       }
     },
     /**
@@ -496,7 +683,7 @@ const ee = {
     sticky: {
       type: [Boolean, String],
       default: !1,
-      validator: (e) => $.includes(e)
+      validator: (e) => me.includes(e)
     },
     /**
      * Determines maximum height for the popover before overflow.
@@ -554,7 +741,7 @@ const ee = {
     initialFocusElement: {
       type: [String, HTMLElement],
       default: "first",
-      validator: (e) => Y.includes(e) || e instanceof HTMLElement || e.startsWith("#")
+      validator: (e) => he.includes(e) || e instanceof HTMLElement || e.startsWith("#")
     },
     /**
      * If the popover should open pressing up or down arrow key on the anchor element.
@@ -573,7 +760,7 @@ const ee = {
     appendTo: {
       type: [HTMLElement, String],
       default: "body",
-      validator: (e) => Z.includes(e) || e instanceof HTMLElement
+      validator: (e) => fe.includes(e) || e instanceof HTMLElement
     }
   },
   emits: [
@@ -599,15 +786,15 @@ const ee = {
   ],
   data() {
     return {
-      POPOVER_PADDING_CLASSES: P,
-      POPOVER_HEADER_FOOTER_PADDING_CLASSES: j,
+      POPOVER_PADDING_CLASSES: T,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES: ce,
       intersectionObserver: null,
       isOutsideViewport: !1,
       isOpen: !1,
       toAppear: !1,
       anchorEl: null,
       popoverContentEl: null,
-      hasSlotContent: L
+      hasSlotContent: P
     };
   },
   computed: {
@@ -628,7 +815,7 @@ const ee = {
       return this.isOutsideViewport && this.modal ? "calc(100vh - var(--space-300))" : this.maxHeight;
     },
     labelledBy() {
-      return this.ariaLabelledby || !this.ariaLabel && O("DtPopover__anchor");
+      return this.ariaLabelledby || !this.ariaLabel && L("DtPopover__anchor");
     }
   },
   watch: {
@@ -703,15 +890,15 @@ const ee = {
    ******************/
   methods: {
     hasIntersectedViewport(e) {
-      var s;
-      const t = (s = e == null ? void 0 : e[0]) == null ? void 0 : s.target;
+      var i;
+      const t = (i = e == null ? void 0 : e[0]) == null ? void 0 : i.target;
       if (!t)
         return;
-      const o = F(t);
+      const o = H(t);
       this.isOutsideViewport = o.bottom || o.top;
     },
     popperOptions() {
-      return B({
+      return N({
         fallbackPlacements: this.fallbackPlacements,
         tether: this.tether,
         hasHideModifierEnabled: !0
@@ -727,9 +914,9 @@ const ee = {
       (e = this.anchorEl) != null && e.closest(".d-zi-drawer") ? 650 : 300;
     },
     defaultToggleOpen(e) {
-      var t, o, s;
+      var t, o, i;
       if (!this.openOnContext && (this.open === null || this.open === void 0)) {
-        if (!((t = this.anchorEl) != null && t.contains(e.target)) && !((o = this.anchorEl) != null && o.isEqualNode(e.target)) || (s = this.anchorEl) != null && s.disabled)
+        if (!((t = this.anchorEl) != null && t.contains(e.target)) && !((o = this.anchorEl) != null && o.isEqualNode(e.target)) || (i = this.anchorEl) != null && i.disabled)
           return;
         this.toggleOpen();
       }
@@ -801,9 +988,9 @@ const ee = {
       this.initialFocusElement === "dialog" && this.$refs.content.$el.focus(), this.initialFocusElement.startsWith("#") && this.focusInitialElementById(), this.initialFocusElement === "first" && this.focusFirstElementIfNeeded(this.$refs.popover__content), this.initialFocusElement instanceof HTMLElement && this.initialFocusElement.focus();
     },
     focusInitialElementById() {
-      var t, o, s;
+      var t, o, i;
       const e = (o = (t = this.$refs.content) == null ? void 0 : t.$el) == null ? void 0 : o.querySelector(this.initialFocusElement);
-      e ? e.focus() : console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'), e ? e.focus() : (s = this.$refs.content) == null || s.$el.focus();
+      e ? e.focus() : console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'), e ? e.focus() : (i = this.$refs.content) == null || i.$el.focus();
     },
     onResize() {
       this.closePopover();
@@ -821,12 +1008,12 @@ const ee = {
       await this.$nextTick(), this.popoverContentEl.style.width = `${(e = this.anchorEl) == null ? void 0 : e.clientWidth}px`;
     },
     focusFirstElementIfNeeded(e) {
-      var o, s;
-      this._getFocusableElements(e, !0).length !== 0 ? this.focusFirstElement(e) : this.showCloseButton ? (o = this.$refs.popover__header) == null || o.focusCloseButton() : (s = this.$refs.content) == null || s.$el.focus();
+      var o, i;
+      this._getFocusableElements(e, !0).length !== 0 ? this.focusFirstElement(e) : this.showCloseButton ? (o = this.$refs.popover__header) == null || o.focusCloseButton() : (i = this.$refs.content) == null || i.$el.focus();
     },
     initTippyInstance() {
       var e, t;
-      this.tip = H(this.anchorEl, {
+      this.tip = x(this.anchorEl, {
         popperOptions: this.popperOptions(),
         contentElement: this.popoverContentEl,
         placement: this.placement,
@@ -844,62 +1031,62 @@ const ee = {
       });
     }
   }
-}, te = ["aria-hidden"], oe = ["id", "tabindex"];
-function ne(e, t, o, s, i, n) {
-  const c = d("popover-header-footer"), m = d("sr-only-close-button"), _ = d("dt-lazy-show");
-  return r(), E("div", null, [
-    o.modal && i.isOpen ? (r(), a(I, {
+}, Ce = ["aria-hidden"], ge = ["id", "tabindex"];
+function Ee(e, t, o, i, s, n) {
+  const c = r("popover-header-footer"), h = r("sr-only-close-button"), b = r("dt-lazy-show");
+  return l(), y("div", null, [
+    o.modal && s.isOpen ? (l(), f($, {
       key: 0,
       to: "body"
     }, [
-      b("div", {
+      g("div", {
         class: "d-modal--transparent",
-        "aria-hidden": o.modal && i.isOpen ? "false" : "true",
-        onClick: t[0] || (t[0] = v(() => {
+        "aria-hidden": o.modal && s.isOpen ? "false" : "true",
+        onClick: t[0] || (t[0] = E(() => {
         }, ["prevent", "stop"]))
-      }, null, 8, te)
-    ])) : f("", !0),
-    (r(), a(D(o.elementType), {
+      }, null, 8, Ce)
+    ])) : p("", !0),
+    (l(), f(q(o.elementType), {
       ref: "popover",
-      class: h(["d-popover", { "d-popover__anchor--opened": i.isOpen }]),
+      class: v(["d-popover", { "d-popover__anchor--opened": s.isOpen }]),
       "data-qa": "dt-popover-container"
     }, {
       default: u(() => [
-        b("div", {
+        g("div", {
           id: !o.ariaLabelledby && n.labelledBy,
           ref: "anchor",
           "data-qa": "dt-popover-anchor",
           tabindex: o.openOnContext ? 0 : void 0,
-          onClickCapture: t[1] || (t[1] = (...l) => n.defaultToggleOpen && n.defaultToggleOpen(...l)),
-          onContextmenu: t[2] || (t[2] = (...l) => n.onContext && n.onContext(...l)),
+          onClickCapture: t[1] || (t[1] = (...a) => n.defaultToggleOpen && n.defaultToggleOpen(...a)),
+          onContextmenu: t[2] || (t[2] = (...a) => n.onContext && n.onContext(...a)),
           onKeydown: [
-            t[3] || (t[3] = p(v((...l) => n.onArrowKeyPress && n.onArrowKeyPress(...l), ["prevent"]), ["up"])),
-            t[4] || (t[4] = p(v((...l) => n.onArrowKeyPress && n.onArrowKeyPress(...l), ["prevent"]), ["down"])),
-            t[6] || (t[6] = p((l) => e.$emit("keydown", l), ["enter"])),
-            t[7] || (t[7] = p((l) => e.$emit("keydown", l), ["space"]))
+            t[3] || (t[3] = C(E((...a) => n.onArrowKeyPress && n.onArrowKeyPress(...a), ["prevent"]), ["up"])),
+            t[4] || (t[4] = C(E((...a) => n.onArrowKeyPress && n.onArrowKeyPress(...a), ["prevent"]), ["down"])),
+            t[6] || (t[6] = C((a) => e.$emit("keydown", a), ["enter"])),
+            t[7] || (t[7] = C((a) => e.$emit("keydown", a), ["space"]))
           ],
-          onKeydownCapture: t[5] || (t[5] = p((...l) => n.closePopover && n.closePopover(...l), ["escape"]))
+          onKeydownCapture: t[5] || (t[5] = C((...a) => n.closePopover && n.closePopover(...a), ["escape"]))
         }, [
-          y(e.$slots, "anchor", {
+          d(e.$slots, "anchor", {
             attrs: {
-              "aria-expanded": i.isOpen.toString(),
+              "aria-expanded": s.isOpen.toString(),
               "aria-controls": o.id,
               "aria-haspopup": o.role
             }
           })
-        ], 40, oe),
-        g(_, A({
+        ], 40, ge),
+        m(b, w({
           id: o.id,
           ref: "content",
           role: o.role,
           "data-qa": "dt-popover",
-          "aria-hidden": `${!i.isOpen}`,
+          "aria-hidden": `${!s.isOpen}`,
           "aria-labelledby": n.labelledBy,
           "aria-label": o.ariaLabel,
           "aria-modal": `${!o.modal}`,
           transition: o.transition,
-          show: i.isOpen,
-          appear: i.toAppear,
+          show: s.isOpen,
+          appear: s.toAppear,
           class: ["d-popover__dialog", { "d-popover__dialog--modal": o.modal }, o.dialogClass],
           style: {
             "max-height": n.calculatedMaxHeight,
@@ -907,12 +1094,12 @@ function ne(e, t, o, s, i, n) {
           },
           css: e.$attrs.css,
           tabindex: o.contentTabindex
-        }, R(n.popoverListeners)), {
+        }, K(n.popoverListeners)), {
           default: u(() => [
-            i.hasSlotContent(e.$slots.headerContent) || o.showCloseButton ? (r(), a(c, {
+            s.hasSlotContent(e.$slots.headerContent) || o.showCloseButton ? (l(), f(c, {
               key: 0,
               ref: "popover__header",
-              class: h(i.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),
+              class: v(s.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),
               "content-class": o.headerClass,
               type: "header",
               "show-close-button": o.showCloseButton,
@@ -920,38 +1107,38 @@ function ne(e, t, o, s, i, n) {
               onClose: n.closePopover
             }, {
               content: u(() => [
-                y(e.$slots, "headerContent", { close: n.closePopover })
+                d(e.$slots, "headerContent", { close: n.closePopover })
               ]),
               _: 3
-            }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : f("", !0),
-            b("div", {
+            }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : p("", !0),
+            g("div", {
               ref: "popover__content",
               "data-qa": "dt-popover-content",
-              class: h([
+              class: v([
                 "d-popover__content",
-                i.POPOVER_PADDING_CLASSES[o.padding],
+                s.POPOVER_PADDING_CLASSES[o.padding],
                 o.contentClass
               ])
             }, [
-              y(e.$slots, "content", { close: n.closePopover })
+              d(e.$slots, "content", { close: n.closePopover })
             ], 2),
-            i.hasSlotContent(e.$slots.footerContent) ? (r(), a(c, {
+            s.hasSlotContent(e.$slots.footerContent) ? (l(), f(c, {
               key: 1,
               ref: "popover__footer",
               type: "footer",
-              class: h(i.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),
+              class: v(s.POPOVER_HEADER_FOOTER_PADDING_CLASSES[o.padding]),
               "content-class": o.footerClass
             }, {
               content: u(() => [
-                y(e.$slots, "footerContent", { close: n.closePopover })
+                d(e.$slots, "footerContent", { close: n.closePopover })
               ]),
               _: 3
-            }, 8, ["class", "content-class"])) : f("", !0),
-            e.showVisuallyHiddenClose ? (r(), a(m, {
+            }, 8, ["class", "content-class"])) : p("", !0),
+            e.showVisuallyHiddenClose ? (l(), f(h, {
               key: 2,
               "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
               onClose: n.closePopover
-            }, null, 8, ["visually-hidden-close-label", "onClose"])) : f("", !0)
+            }, null, 8, ["visually-hidden-close-label", "onClose"])) : p("", !0)
           ]),
           _: 3
         }, 16, ["id", "role", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "appear", "class", "style", "css", "tabindex"])
@@ -960,16 +1147,173 @@ function ne(e, t, o, s, i, n) {
     }, 8, ["class"]))
   ]);
 }
-const le = /* @__PURE__ */ C(ee, [["render", ne]]);
+const ke = /* @__PURE__ */ _(be, [["render", Ee]]), Oe = {
+  name: "DtNotice",
+  components: {
+    DtNoticeIcon: G,
+    DtNoticeContent: ee,
+    DtNoticeAction: le
+  },
+  mixins: [k],
+  props: {
+    /**
+     * Sets an ID on the title element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the title.
+     */
+    titleId: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Sets an ID on the content element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the content.
+     */
+    contentId: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an
+     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an
+     * important message that does contain interactive elements.
+     * @values alert, alertdialog, status
+     */
+    role: {
+      type: String,
+      default: "status",
+      validate(e) {
+        return z.includes(e);
+      }
+    },
+    /**
+     * Used in scenarios where the message needs to visually dominate the screen.
+     * This will also change the aria role from status to alert.
+     * @values true, false
+     */
+    important: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Severity level of the notice, sets the icon and background
+     * @values base, error, info, success, warning
+     */
+    kind: {
+      type: String,
+      default: "base",
+      validate(e) {
+        return A.includes(e);
+      }
+    },
+    /**
+     * Props for the notice close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Hides the close button from the notice
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    /**
+     * Close button click event
+     *
+     * @event close
+     */
+    "close",
+    /**
+     * Native button click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  computed: {
+    noticeClass() {
+      return [
+        "d-notice",
+        {
+          error: "d-notice--error",
+          info: "d-notice--info",
+          success: "d-notice--success",
+          warning: "d-notice--warning",
+          base: "d-notice--base"
+        }[this.kind],
+        { "d-notice--important": this.important }
+      ];
+    }
+  }
+};
+function Pe(e, t, o, i, s, n) {
+  const c = r("dt-notice-icon"), h = r("dt-notice-content"), b = r("dt-notice-action");
+  return l(), y("aside", {
+    class: v(n.noticeClass),
+    "data-qa": "notice"
+  }, [
+    m(c, { kind: o.kind }, {
+      default: u(() => [
+        d(e.$slots, "icon")
+      ]),
+      _: 3
+    }, 8, ["kind"]),
+    m(h, {
+      "title-id": o.titleId,
+      "content-id": o.contentId,
+      title: o.title,
+      role: o.role
+    }, {
+      titleOverride: u(() => [
+        d(e.$slots, "titleOverride")
+      ]),
+      default: u(() => [
+        d(e.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["title-id", "content-id", "title", "role"]),
+    m(b, {
+      "hide-close": o.hideClose,
+      "close-button-props": o.closeButtonProps,
+      "visually-hidden-close": e.visuallyHiddenClose,
+      "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
+      onClose: t[0] || (t[0] = (a) => e.$emit("close"))
+    }, {
+      default: u(() => [
+        d(e.$slots, "action")
+      ]),
+      _: 3
+    }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
+  ], 2);
+}
+const Le = /* @__PURE__ */ _(Oe, [["render", Pe]]);
 export {
-  le as D,
-  W as M,
-  Z as P,
-  q as S,
-  V as a,
-  U as b,
-  P as c,
-  j as d,
-  G as e,
-  Y as f
+  G as D,
+  de as M,
+  A as N,
+  fe as P,
+  k as S,
+  ee as a,
+  le as b,
+  ke as c,
+  I as d,
+  pe as e,
+  Le as f,
+  T as g,
+  ce as h,
+  ue as i,
+  he as j
 };