@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.cjs","sources":["../../components/tabs/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(this.$el);\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","Modal","firstFocusableElement","element","current","isFirstElement","_createElementBlock","$props","$data","$options","_renderSlot","_ctx"],"mappings":"8WAuBA,MAAKA,EAAU,CACb,KAAM,aAEN,OAAQ,CAACC,EAAAA,CAAK,EAEd,OAAQ,CAAC,cAAc,EAEvB,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,EACX,EAKD,MAAO,CACL,KAAM,OACN,SAAU,EACX,EAMD,OAAQ,CACN,KAAM,QACN,QAAS,EACV,EAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,wBAAyB,GAE5B,EAED,SAAU,CACR,WAAa,CACX,OAAO,KAAK,aAAa,WAAa,KAAK,IAAM,KAAK,MACvD,CACF,EAED,MAAM,SAAW,CACf,MAAMC,EAAwB,MAAM,KAAK,yBAAyB,KAAK,GAAG,EAErEA,EAMH,KAAK,wBAA0B,KAAK,sBAAsBA,CAAqB,EAL/E,KAAK,wBAA0B,EAOlC,EAED,QAAS,CACP,sBAAuBC,EAAS,CAC9B,IAAIC,EAAUD,EACVE,EAAiB,GAErB,KAAOD,GAAS,CACd,GAAIA,EAAQ,yBAA2B,KAAM,CAC3CC,EAAiB,GACjB,KACF,CACAD,EAAUA,EAAQ,aAAe,KAAK,IAAMA,EAAQ,WAAa,IACnE,CAEA,OAAOC,CACR,CACF,CACH,qHAzGEC,EAAAA,mBAYM,MAAA,CAVH,eAAgBC,EAAE,EAAA,GACnB,KAAK,WACJ,SAAUC,EAAuB,wBAAA,GAAA,EACjC,4BAA2BD,EAAK,KAAA,GAChC,iBAAgBE,EAAS,SAAA,GACzB,uBAAOF,EAAa,aAAA,EACrB,UAAQ,iBAGRG,aAAQC,EAAA,OAAA,SAAA,qBAVCF,EAAS,SAAA"}
+{"version":3,"file":"tabs.cjs","sources":["../../components/tabs/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(this.$el);\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["Modal","_createElementBlock","_renderSlot"],"mappings":";;;;;;;;;;AAuBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,QAAQ,CAACA,MAAAA,KAAK;AAAA,EAEd,QAAQ,CAAC,cAAc;AAAA,EAEvB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,yBAAyB;AAAA;EAE5B;AAAA,EAED,UAAU;AAAA,IACR,YAAa;AACX,aAAO,KAAK,aAAa,aAAa,KAAK,MAAM,KAAK;AAAA,IACvD;AAAA,EACF;AAAA,EAED,MAAM,UAAW;AACf,UAAM,wBAAwB,MAAM,KAAK,yBAAyB,KAAK,GAAG;AAE1E,QAAI,CAAC,uBAAuB;AAC1B,WAAK,0BAA0B;AAAA,WAC1B;AAIL,WAAK,0BAA0B,KAAK,sBAAsB,qBAAqB;AAAA,IACjF;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,sBAAuB,SAAS;AAC9B,UAAI,UAAU;AACd,UAAI,iBAAiB;AAErB,aAAO,SAAS;AACd,YAAI,QAAQ,2BAA2B,MAAM;AAC3C,2BAAiB;AACjB;AAAA,QACF;AACA,kBAAU,QAAQ,eAAe,KAAK,MAAM,QAAQ,aAAa;AAAA,MACnE;AAEA,aAAO;AAAA,IACR;AAAA,EACF;AACH;;;8CAzGEC,IAAAA,mBAYM,OAAA;AAAA,IAVH,gBAAgB,OAAE,EAAA;AAAA,IACnB,MAAK;AAAA,IACJ,UAAU,MAAuB,0BAAA,KAAA;AAAA,IACjC,6BAA2B,OAAK,KAAA;AAAA,IAChC,kBAAgB,SAAS,SAAA;AAAA,IACzB,0BAAO,OAAa,aAAA;AAAA,IACrB,WAAQ;AAAA;IAGRC,eAAQ,KAAA,QAAA,SAAA;AAAA;iBAVC,SAAS,SAAA;AAAA;;;;;;;;;;"}

package/dist/lib/tabs.js

@@ -1,14 +1,14 @@
-import { a as O, D as g, d as A, c as B, T as C, b as M } from "../chunks/tab-GQZFMq83.js";
-import { M as l } from "../chunks/modal-VuMFkZFH.js";
-import { withDirectives as r, openBlock as n, createElementBlock as d, normalizeClass as o, renderSlot as m, vShow as u } from "vue";
-import { _ as b } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
+import { DtTab, DtTabGroup, TAB_IMPORTANCE_MODIFIERS, TAB_LIST_IMPORTANCE_MODIFIERS, TAB_LIST_KIND_MODIFIERS, TAB_LIST_SIZES } from "../chunks/tab-RTDgnD9-.js";
+import { Modal } from "../chunks/modal-XOr4kiNZ.js";
+import { withDirectives, openBlock, createElementBlock, normalizeClass, renderSlot, vShow } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import "./button.js";
-import "./utils.js";
-import "./constants.js";
-import "../chunks/link_constants-vIUB92L4.js";
-const c = {
+import "../common/utils.js";
+import "../common/constants.js";
+import "../chunks/link_constants-nWVlXQBs.js";
+const _sfc_main = {
   name: "DtTabPanel",
-  mixins: [l],
+  mixins: [Modal],
   inject: ["groupContext"],
   props: {
     /**
@@ -16,14 +16,14 @@ const c = {
      */
     id: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Id of the associated tab
      */
     tabId: {
       type: String,
-      required: !0
+      required: true
     },
     /**
     * If true, hides the tab content
@@ -31,7 +31,7 @@ const c = {
     */
     hidden: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Used to customize the tab element
@@ -43,7 +43,7 @@ const c = {
   },
   data() {
     return {
-      isFirstElementFocusable: !1
+      isFirstElementFocusable: false
     };
   },
   computed: {
@@ -52,46 +52,52 @@ const c = {
     }
   },
   async mounted() {
-    const e = await this.getFirstFocusableElement(this.$el);
-    e ? this.isFirstElementFocusable = this.isFirstElementOfPanel(e) : this.isFirstElementFocusable = !1;
+    const firstFocusableElement = await this.getFirstFocusableElement(this.$el);
+    if (!firstFocusableElement) {
+      this.isFirstElementFocusable = false;
+    } else {
+      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);
+    }
   },
   methods: {
-    isFirstElementOfPanel(e) {
-      let t = e, a = !0;
-      for (; t; ) {
-        if (t.previousElementSibling !== null) {
-          a = !1;
+    isFirstElementOfPanel(element) {
+      let current = element;
+      let isFirstElement = true;
+      while (current) {
+        if (current.previousElementSibling !== null) {
+          isFirstElement = false;
           break;
         }
-        t = t.parentNode !== this.$el ? t.parentNode : null;
+        current = current.parentNode !== this.$el ? current.parentNode : null;
       }
-      return a;
+      return isFirstElement;
     }
   }
-}, p = ["id", "tabindex", "aria-labelledby", "aria-hidden"];
-function h(e, t, a, _, s, i) {
-  return r((n(), d("div", {
-    id: `dt-panel-${a.id}`,
+};
+const _hoisted_1 = ["id", "tabindex", "aria-labelledby", "aria-hidden"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return withDirectives((openBlock(), createElementBlock("div", {
+    id: `dt-panel-${$props.id}`,
     role: "tabpanel",
-    tabindex: s.isFirstElementFocusable ? -1 : 0,
-    "aria-labelledby": `dt-tab-${a.tabId}`,
-    "aria-hidden": `${i.hidePanel}`,
-    class: o(a.tabPanelClass),
+    tabindex: $data.isFirstElementFocusable ? -1 : 0,
+    "aria-labelledby": `dt-tab-${$props.tabId}`,
+    "aria-hidden": `${$options.hidePanel}`,
+    class: normalizeClass($props.tabPanelClass),
     "data-qa": "dt-tab-panel"
   }, [
-    m(e.$slots, "default")
-  ], 10, p)), [
-    [u, !i.hidePanel]
+    renderSlot(_ctx.$slots, "default")
+  ], 10, _hoisted_1)), [
+    [vShow, !$options.hidePanel]
   ]);
 }
-const D = /* @__PURE__ */ b(c, [["render", h]]);
+const tab_panel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  O as DtTab,
-  g as DtTabGroup,
-  D as DtTabPanel,
-  A as TAB_IMPORTANCE_MODIFIERS,
-  B as TAB_LIST_IMPORTANCE_MODIFIERS,
-  C as TAB_LIST_KIND_MODIFIERS,
-  M as TAB_LIST_SIZES
+  DtTab,
+  DtTabGroup,
+  tab_panel as DtTabPanel,
+  TAB_IMPORTANCE_MODIFIERS,
+  TAB_LIST_IMPORTANCE_MODIFIERS,
+  TAB_LIST_KIND_MODIFIERS,
+  TAB_LIST_SIZES
 };
 //# sourceMappingURL=tabs.js.map

package/dist/lib/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../components/tabs/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(this.$el);\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","Modal","firstFocusableElement","element","current","isFirstElement","_createElementBlock","$props","$data","$options","_renderSlot","_ctx"],"mappings":";;;;;;;;AAuBA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,QAAQ,CAACC,CAAK;AAAA,EAEd,QAAQ,CAAC,cAAc;AAAA,EAEvB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,yBAAyB;AAAA;EAE5B;AAAA,EAED,UAAU;AAAA,IACR,YAAa;AACX,aAAO,KAAK,aAAa,aAAa,KAAK,MAAM,KAAK;AAAA,IACvD;AAAA,EACF;AAAA,EAED,MAAM,UAAW;AACf,UAAMC,IAAwB,MAAM,KAAK,yBAAyB,KAAK,GAAG;AAE1E,IAAKA,IAMH,KAAK,0BAA0B,KAAK,sBAAsBA,CAAqB,IAL/E,KAAK,0BAA0B;AAAA,EAOlC;AAAA,EAED,SAAS;AAAA,IACP,sBAAuBC,GAAS;AAC9B,UAAIC,IAAUD,GACVE,IAAiB;AAErB,aAAOD,KAAS;AACd,YAAIA,EAAQ,2BAA2B,MAAM;AAC3C,UAAAC,IAAiB;AACjB;AAAA,QACF;AACA,QAAAD,IAAUA,EAAQ,eAAe,KAAK,MAAMA,EAAQ,aAAa;AAAA,MACnE;AAEA,aAAOC;AAAA,IACR;AAAA,EACF;AACH;;iBAzGEC,EAYM,OAAA;AAAA,IAVH,gBAAgBC,EAAE,EAAA;AAAA,IACnB,MAAK;AAAA,IACJ,UAAUC,EAAuB,0BAAA,KAAA;AAAA,IACjC,6BAA2BD,EAAK,KAAA;AAAA,IAChC,kBAAgBE,EAAS,SAAA;AAAA,IACzB,SAAOF,EAAa,aAAA;AAAA,IACrB,WAAQ;AAAA;IAGRG,EAAQC,EAAA,QAAA,SAAA;AAAA;SAVCF,EAAS,SAAA;AAAA;;;"}
+{"version":3,"file":"tabs.js","sources":["../../components/tabs/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(this.$el);\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;;;;;;AAuBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,QAAQ,CAAC,KAAK;AAAA,EAEd,QAAQ,CAAC,cAAc;AAAA,EAEvB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,yBAAyB;AAAA;EAE5B;AAAA,EAED,UAAU;AAAA,IACR,YAAa;AACX,aAAO,KAAK,aAAa,aAAa,KAAK,MAAM,KAAK;AAAA,IACvD;AAAA,EACF;AAAA,EAED,MAAM,UAAW;AACf,UAAM,wBAAwB,MAAM,KAAK,yBAAyB,KAAK,GAAG;AAE1E,QAAI,CAAC,uBAAuB;AAC1B,WAAK,0BAA0B;AAAA,WAC1B;AAIL,WAAK,0BAA0B,KAAK,sBAAsB,qBAAqB;AAAA,IACjF;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,sBAAuB,SAAS;AAC9B,UAAI,UAAU;AACd,UAAI,iBAAiB;AAErB,aAAO,SAAS;AACd,YAAI,QAAQ,2BAA2B,MAAM;AAC3C,2BAAiB;AACjB;AAAA,QACF;AACA,kBAAU,QAAQ,eAAe,KAAK,MAAM,QAAQ,aAAa;AAAA,MACnE;AAEA,aAAO;AAAA,IACR;AAAA,EACF;AACH;;;sCAzGEA,mBAYM,OAAA;AAAA,IAVH,gBAAgB,OAAE,EAAA;AAAA,IACnB,MAAK;AAAA,IACJ,UAAU,MAAuB,0BAAA,KAAA;AAAA,IACjC,6BAA2B,OAAK,KAAA;AAAA,IAChC,kBAAgB,SAAS,SAAA;AAAA,IACzB,sBAAO,OAAa,aAAA;AAAA,IACrB,WAAQ;AAAA;IAGRC,WAAQ,KAAA,QAAA,SAAA;AAAA;aAVC,SAAS,SAAA;AAAA;;;"}

package/dist/lib/time-pill.cjs

@@ -1,2 +1,42 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),a=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),n={name:"DtRecipeTimePill",props:{dateTimeDisplay:{type:String,required:!0},dateTime:{type:String,required:!0,validator:i=>{const e=new Date(i);return e instanceof Date&&!isNaN(e)}}}},l=["dateTime"];function c(i,e,r,s,d,u){return t.openBlock(),t.createElementBlock("time",{"data-qa":"dt-time-pill",dateTime:r.dateTime,class:"dt-time-pill"},t.toDisplayString(r.dateTimeDisplay),9,l)}const o=a._(n,[["render",c]]);exports.DtRecipeTimePill=o;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const _sfc_main = {
+  name: "DtRecipeTimePill",
+  props: {
+    /**
+     * Date time display value
+     */
+    dateTimeDisplay: {
+      type: String,
+      required: true
+    },
+    /**
+     * Machine-readable attribute
+     * Accepts a string value of YYYY-MM-DD or YYYY-MM-DDThh:mm:ssTZD
+     */
+    dateTime: {
+      type: String,
+      required: true,
+      validator: (t) => {
+        const x = new Date(t);
+        if (x instanceof Date && !isNaN(x)) {
+          return true;
+        }
+        return false;
+      }
+    }
+  }
+};
+const _hoisted_1 = ["dateTime"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("time", {
+    "data-qa": "dt-time-pill",
+    dateTime: $props.dateTime,
+    class: "dt-time-pill"
+  }, vue.toDisplayString($props.dateTimeDisplay), 9, _hoisted_1);
+}
+const time_pill = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DtRecipeTimePill = time_pill;
 //# sourceMappingURL=time-pill.cjs.map

package/dist/lib/time-pill.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"time-pill.cjs","sources":["../../recipes/conversation_view/time_pill/time_pill.vue"],"sourcesContent":["<template>\n  <time\n    data-qa=\"dt-time-pill\"\n    :dateTime=\"dateTime\"\n    class=\"dt-time-pill\"\n  >\n    {{ dateTimeDisplay }}\n  </time>\n</template>\n\n<script>\nimport {} from './time_pill_constants';\n\nexport default {\n  name: 'DtRecipeTimePill',\n\n  props: {\n    /**\n     * Date time display value\n     */\n    dateTimeDisplay: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Machine-readable attribute\n     * Accepts a string value of YYYY-MM-DD or YYYY-MM-DDThh:mm:ssTZD\n     */\n    dateTime: {\n      type: String,\n      required: true,\n      validator: (t) => {\n        // Since this will only ever be used in the context of a date, we're rejecting non date inputs\n        const x = new Date(t);\n        if (x instanceof Date && !isNaN(x)) {\n          return true;\n        }\n        return false;\n      },\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-time-pill {\n  border: var(--dt-size-100) solid;\n  border-radius: var(--dt-size-radius-pill);\n  border-width: var(--dt-size-100);\n  --bco: 100%;\n  border-color: var(--dt-color-black-300);\n  padding-left: var(--dt-space-500);\n  padding-right: var(--dt-space-500);\n  padding-top: var(--dt-space-300);\n  padding-bottom: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n}\n</style>\n"],"names":["_sfc_main","t","x","_createElementBlock","$props","_hoisted_1"],"mappings":"oKAaKA,EAAU,CACb,KAAM,mBAEN,MAAO,CAIL,gBAAiB,CACf,KAAM,OACN,SAAU,EACX,EAMD,SAAU,CACR,KAAM,OACN,SAAU,GACV,UAAYC,GAAM,CAEhB,MAAMC,EAAI,IAAI,KAAKD,CAAC,EACpB,OAAIC,aAAa,MAAQ,CAAC,MAAMA,CAAC,CAIlC,CACF,CACF,CACH,8DAzCEC,EAMO,mBAAA,OAAA,CALL,UAAQ,eACP,SAAUC,EAAQ,SACnB,MAAM,kCAEHA,EAAe,eAAA,EAAA,EAAAC,CAAA"}
+{"version":3,"file":"time-pill.cjs","sources":["../../recipes/conversation_view/time_pill/time_pill.vue"],"sourcesContent":["<template>\n  <time\n    data-qa=\"dt-time-pill\"\n    :dateTime=\"dateTime\"\n    class=\"dt-time-pill\"\n  >\n    {{ dateTimeDisplay }}\n  </time>\n</template>\n\n<script>\nimport {} from './time_pill_constants';\n\nexport default {\n  name: 'DtRecipeTimePill',\n\n  props: {\n    /**\n     * Date time display value\n     */\n    dateTimeDisplay: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Machine-readable attribute\n     * Accepts a string value of YYYY-MM-DD or YYYY-MM-DDThh:mm:ssTZD\n     */\n    dateTime: {\n      type: String,\n      required: true,\n      validator: (t) => {\n        // Since this will only ever be used in the context of a date, we're rejecting non date inputs\n        const x = new Date(t);\n        if (x instanceof Date && !isNaN(x)) {\n          return true;\n        }\n        return false;\n      },\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-time-pill {\n  border: var(--dt-size-100) solid;\n  border-radius: var(--dt-size-radius-pill);\n  border-width: var(--dt-size-100);\n  --bco: 100%;\n  border-color: var(--dt-color-black-300);\n  padding-left: var(--dt-space-500);\n  padding-right: var(--dt-space-500);\n  padding-top: var(--dt-space-300);\n  padding-bottom: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n}\n</style>\n"],"names":["_createElementBlock"],"mappings":";;;;AAaA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,MAAM;AAEhB,cAAM,IAAI,IAAI,KAAK,CAAC;AACpB,YAAI,aAAa,QAAQ,CAAC,MAAM,CAAC,GAAG;AAClC,iBAAO;AAAA,QACT;AACA,eAAO;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACH;;;0BAzCEA,IAMO,mBAAA,QAAA;AAAA,IALL,WAAQ;AAAA,IACP,UAAU,OAAQ;AAAA,IACnB,OAAM;AAAA,yBAEH,OAAe,eAAA,GAAA,GAAA,UAAA;;;;"}

package/dist/lib/time-pill.js

@@ -1,6 +1,6 @@
-import { openBlock as a, createElementBlock as r, toDisplayString as n } from "vue";
-import { _ as o } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-const s = {
+import { openBlock, createElementBlock, toDisplayString } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+const _sfc_main = {
   name: "DtRecipeTimePill",
   props: {
     /**
@@ -8,7 +8,7 @@ const s = {
      */
     dateTimeDisplay: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Machine-readable attribute
@@ -16,23 +16,27 @@ const s = {
      */
     dateTime: {
       type: String,
-      required: !0,
+      required: true,
       validator: (t) => {
-        const e = new Date(t);
-        return e instanceof Date && !isNaN(e);
+        const x = new Date(t);
+        if (x instanceof Date && !isNaN(x)) {
+          return true;
+        }
+        return false;
       }
     }
   }
-}, l = ["dateTime"];
-function m(t, e, i, c, p, d) {
-  return a(), r("time", {
+};
+const _hoisted_1 = ["dateTime"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("time", {
     "data-qa": "dt-time-pill",
-    dateTime: i.dateTime,
+    dateTime: $props.dateTime,
     class: "dt-time-pill"
-  }, n(i.dateTimeDisplay), 9, l);
+  }, toDisplayString($props.dateTimeDisplay), 9, _hoisted_1);
 }
-const f = /* @__PURE__ */ o(s, [["render", m]]);
+const time_pill = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  f as DtRecipeTimePill
+  time_pill as DtRecipeTimePill
 };
 //# sourceMappingURL=time-pill.js.map

package/dist/lib/time-pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-pill.js","sources":["../../recipes/conversation_view/time_pill/time_pill.vue"],"sourcesContent":["<template>\n  <time\n    data-qa=\"dt-time-pill\"\n    :dateTime=\"dateTime\"\n    class=\"dt-time-pill\"\n  >\n    {{ dateTimeDisplay }}\n  </time>\n</template>\n\n<script>\nimport {} from './time_pill_constants';\n\nexport default {\n  name: 'DtRecipeTimePill',\n\n  props: {\n    /**\n     * Date time display value\n     */\n    dateTimeDisplay: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Machine-readable attribute\n     * Accepts a string value of YYYY-MM-DD or YYYY-MM-DDThh:mm:ssTZD\n     */\n    dateTime: {\n      type: String,\n      required: true,\n      validator: (t) => {\n        // Since this will only ever be used in the context of a date, we're rejecting non date inputs\n        const x = new Date(t);\n        if (x instanceof Date && !isNaN(x)) {\n          return true;\n        }\n        return false;\n      },\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-time-pill {\n  border: var(--dt-size-100) solid;\n  border-radius: var(--dt-size-radius-pill);\n  border-width: var(--dt-size-100);\n  --bco: 100%;\n  border-color: var(--dt-color-black-300);\n  padding-left: var(--dt-space-500);\n  padding-right: var(--dt-space-500);\n  padding-top: var(--dt-space-300);\n  padding-bottom: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n}\n</style>\n"],"names":["_sfc_main","x","_createElementBlock","$props","_hoisted_1"],"mappings":";;AAaA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,MAAM;AAEhB,cAAMC,IAAI,IAAI,KAAK,CAAC;AACpB,eAAIA,aAAa,QAAQ,CAAC,MAAMA,CAAC;AAAA,MAIlC;AAAA,IACF;AAAA,EACF;AACH;;cAzCEC,EAMO,QAAA;AAAA,IALL,WAAQ;AAAA,IACP,UAAUC,EAAQ;AAAA,IACnB,OAAM;AAAA,OAEHA,EAAe,eAAA,GAAA,GAAAC,CAAA;;;"}
+{"version":3,"file":"time-pill.js","sources":["../../recipes/conversation_view/time_pill/time_pill.vue"],"sourcesContent":["<template>\n  <time\n    data-qa=\"dt-time-pill\"\n    :dateTime=\"dateTime\"\n    class=\"dt-time-pill\"\n  >\n    {{ dateTimeDisplay }}\n  </time>\n</template>\n\n<script>\nimport {} from './time_pill_constants';\n\nexport default {\n  name: 'DtRecipeTimePill',\n\n  props: {\n    /**\n     * Date time display value\n     */\n    dateTimeDisplay: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Machine-readable attribute\n     * Accepts a string value of YYYY-MM-DD or YYYY-MM-DDThh:mm:ssTZD\n     */\n    dateTime: {\n      type: String,\n      required: true,\n      validator: (t) => {\n        // Since this will only ever be used in the context of a date, we're rejecting non date inputs\n        const x = new Date(t);\n        if (x instanceof Date && !isNaN(x)) {\n          return true;\n        }\n        return false;\n      },\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-time-pill {\n  border: var(--dt-size-100) solid;\n  border-radius: var(--dt-size-radius-pill);\n  border-width: var(--dt-size-100);\n  --bco: 100%;\n  border-color: var(--dt-color-black-300);\n  padding-left: var(--dt-space-500);\n  padding-right: var(--dt-space-500);\n  padding-top: var(--dt-space-300);\n  padding-bottom: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n}\n</style>\n"],"names":["_createElementBlock"],"mappings":";;AAaA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,MAAM;AAEhB,cAAM,IAAI,IAAI,KAAK,CAAC;AACpB,YAAI,aAAa,QAAQ,CAAC,MAAM,CAAC,GAAG;AAClC,iBAAO;AAAA,QACT;AACA,eAAO;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACH;;;sBAzCEA,mBAMO,QAAA;AAAA,IALL,WAAQ;AAAA,IACP,UAAU,OAAQ;AAAA,IACnB,OAAM;AAAA,qBAEH,OAAe,eAAA,GAAA,GAAA,UAAA;;;"}

package/dist/lib/toast.cjs

@@ -1,2 +1,282 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./utils.cjs"),h=require("../chunks/sr_only_close_button-iD7s1Pbj.js"),e=require("vue"),m=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),i=require("../chunks/notice_action-jO199emq.js"),f=require("../chunks/notice_constants-mC6al2Dm.js");require("./constants.cjs");require("./icon.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("./button.cjs");require("../chunks/link_constants-Kn6kP4i1.js");const d=["status","alert"],n=6e3,_={name:"DtToast",components:{DtNoticeIcon:i.a,DtNoticeContent:i.b,DtNoticeAction:i.D},mixins:[h.a],props:{titleId:{type:String,default(){return a.default.getUniqueString()}},contentId:{type:String,default(){return a.default.getUniqueString()}},title:{type:String,default:""},message:{type:String,default:""},role:{type:String,default:"status",validator:t=>d.includes(t)},kind:{type:String,default:"base",validator:t=>f.N.includes(t)},important:{type:Boolean,default:!1},show:{type:Boolean,default:!1},closeButtonProps:{type:Object,default:()=>({})},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},duration:{type:Number,default:null,validator:t=>t>=n}},emits:["close","click","update:show"],data(){return{isShown:!1,minDuration:n}},computed:{kindClass(){return{error:"d-toast--error",info:"d-toast--info",success:"d-toast--success",warning:"d-toast--warning",base:"d-toast--base"}[this.kind]},shouldSetTimeout(){return!!this.duration&&this.duration>=this.minDuration}},watch:{show:{handler:function(t){this.isShown=t,t?this.setTimeout():clearTimeout(this.displayTimer)},immediate:!0}},unmounted(){clearTimeout(this.displayTimer)},methods:{closeToast(t){this.$emit("update:show",!1),this.$emit("close",t)},setTimeout(){this.shouldSetTimeout&&(this.displayTimer=setTimeout(()=>{this.isShown=!1,this.$emit("update:show",!1)},this.duration))}}},S=["aria-hidden"],y={class:"d-toast__dialog"};function T(t,C,o,g,s,l){const r=e.resolveComponent("dt-notice-icon"),c=e.resolveComponent("dt-notice-content"),u=e.resolveComponent("dt-notice-action");return s.isShown?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["d-toast",l.kindClass,{"d-toast--important":o.important}]),"data-qa":"dt-toast","aria-hidden":(!s.isShown).toString()},[e.createElementVNode("div",y,[o.hideIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(r,{key:0,kind:o.kind},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon")]),_:3},8,["kind"])),e.createVNode(c,{"title-id":o.titleId,"content-id":o.contentId,title:o.title,role:o.role},{titleOverride:e.withCtx(()=>[e.renderSlot(t.$slots,"titleOverride")]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.message),1)])]),_:3},8,["title-id","content-id","title","role"]),e.createVNode(u,{"hide-action":o.hideAction,"hide-close":o.hideClose,"close-button-props":o.closeButtonProps,"visually-hidden-close":t.visuallyHiddenClose,"visually-hidden-close-label":t.visuallyHiddenCloseLabel,onClose:l.closeToast},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"action")]),_:3},8,["hide-action","hide-close","close-button-props","visually-hidden-close","visually-hidden-close-label","onClose"])])],10,S)):e.createCommentVNode("",!0)}const p=m._(_,[["render",T]]);exports.DtToast=p;exports.TOAST_MIN_DURATION=n;exports.TOAST_ROLES=d;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const common_utils = require("../common/utils.cjs");
+const sr_only_close_button = require("../chunks/sr_only_close_button-xGrHFjwA.js");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const notice_action = require("../chunks/notice_action-WTucGhvr.js");
+const notice_constants = require("../chunks/notice_constants-UXo9e3bS.js");
+require("../common/constants.cjs");
+require("./icon.cjs");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("./button.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+const TOAST_ROLES = ["status", "alert"];
+const TOAST_MIN_DURATION = 6e3;
+const _sfc_main = {
+  name: "DtToast",
+  components: {
+    DtNoticeIcon: notice_action.DtNoticeIcon,
+    DtNoticeContent: notice_action.DtNoticeContent,
+    DtNoticeAction: notice_action.DtNoticeAction
+  },
+  mixins: [sr_only_close_button.SrOnlyCloseButtonMixin],
+  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() {
+        return common_utils.default.getUniqueString();
+      }
+    },
+    /**
+     * 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() {
+        return common_utils.default.getUniqueString();
+      }
+    },
+    /**
+     * Title header of the toast. This can be left blank to remove the title from the toast entirely.
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Message of the toast. Overridden by default slot.
+     */
+    message: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to
+     * communicate an important message like an error that does not contain any interactive elements.
+     * @values status, alert
+     */
+    role: {
+      type: String,
+      default: "status",
+      validator: (role) => {
+        return TOAST_ROLES.includes(role);
+      }
+    },
+    /**
+     * Severity level of the toast, sets the icon and background
+     * @values base, error, info, success, warning
+     */
+    kind: {
+      type: String,
+      default: "base",
+      validator: (kind) => {
+        return notice_constants.NOTICE_KINDS.includes(kind);
+      }
+    },
+    /**
+     * Used in scenarios where the message needs to visually dominate the screen.
+     * @values true, false
+     */
+    important: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear
+     * after reaching the duration time, so it's convenient to use `v-model` with this prop to update
+     * the data in your component.
+     * Supports v-model
+     * @values true, false
+     */
+    show: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Props for the toast close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Hides the close button from the toast
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Hides the icon from the notice
+     * @values true, false
+     */
+    hideIcon: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Hides the action from the notice
+     * @values true, false
+     */
+    hideAction: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The duration in ms the toast will display before disappearing.
+     * The toast won't disappear if the duration is not provided.
+     * If it's provided, it should be equal to or greater than 6000.
+     */
+    duration: {
+      type: Number,
+      default: null,
+      validator: (duration) => {
+        return duration >= TOAST_MIN_DURATION;
+      }
+    }
+  },
+  emits: [
+    /**
+     * Close button click event
+     *
+     * @event close
+     */
+    "close",
+    /**
+     * Native click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
+    /**
+     * Sync show value
+     *
+     * @event update:show
+     */
+    "update:show"
+  ],
+  data() {
+    return {
+      isShown: false,
+      minDuration: TOAST_MIN_DURATION
+    };
+  },
+  computed: {
+    kindClass() {
+      const kindClasses = {
+        error: "d-toast--error",
+        info: "d-toast--info",
+        success: "d-toast--success",
+        warning: "d-toast--warning",
+        base: "d-toast--base"
+      };
+      return kindClasses[this.kind];
+    },
+    shouldSetTimeout() {
+      return !!this.duration && this.duration >= this.minDuration;
+    }
+  },
+  watch: {
+    show: {
+      handler: function(show) {
+        this.isShown = show;
+        if (show) {
+          this.setTimeout();
+        } else {
+          clearTimeout(this.displayTimer);
+        }
+      },
+      immediate: true
+    }
+  },
+  unmounted() {
+    clearTimeout(this.displayTimer);
+  },
+  methods: {
+    closeToast(event) {
+      this.$emit("update:show", false);
+      this.$emit("close", event);
+    },
+    setTimeout() {
+      if (this.shouldSetTimeout) {
+        this.displayTimer = setTimeout(() => {
+          this.isShown = false;
+          this.$emit("update:show", false);
+        }, this.duration);
+      }
+    }
+  }
+};
+const _hoisted_1 = ["aria-hidden"];
+const _hoisted_2 = { class: "d-toast__dialog" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_notice_icon = vue.resolveComponent("dt-notice-icon");
+  const _component_dt_notice_content = vue.resolveComponent("dt-notice-content");
+  const _component_dt_notice_action = vue.resolveComponent("dt-notice-action");
+  return $data.isShown ? (vue.openBlock(), vue.createElementBlock("div", {
+    key: 0,
+    class: vue.normalizeClass([
+      "d-toast",
+      $options.kindClass,
+      { "d-toast--important": $props.important }
+    ]),
+    "data-qa": "dt-toast",
+    "aria-hidden": (!$data.isShown).toString()
+  }, [
+    vue.createElementVNode("div", _hoisted_2, [
+      !$props.hideIcon ? (vue.openBlock(), vue.createBlock(_component_dt_notice_icon, {
+        key: 0,
+        kind: $props.kind
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "icon")
+        ]),
+        _: 3
+      }, 8, ["kind"])) : vue.createCommentVNode("", true),
+      vue.createVNode(_component_dt_notice_content, {
+        "title-id": $props.titleId,
+        "content-id": $props.contentId,
+        title: $props.title,
+        role: $props.role
+      }, {
+        titleOverride: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "titleOverride")
+        ]),
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            vue.createTextVNode(vue.toDisplayString($props.message), 1)
+          ])
+        ]),
+        _: 3
+      }, 8, ["title-id", "content-id", "title", "role"]),
+      vue.createVNode(_component_dt_notice_action, {
+        "hide-action": $props.hideAction,
+        "hide-close": $props.hideClose,
+        "close-button-props": $props.closeButtonProps,
+        "visually-hidden-close": _ctx.visuallyHiddenClose,
+        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+        onClose: $options.closeToast
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "action")
+        ]),
+        _: 3
+      }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label", "onClose"])
+    ])
+  ], 10, _hoisted_1)) : vue.createCommentVNode("", true);
+}
+const toast = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DtToast = toast;
+exports.TOAST_MIN_DURATION = TOAST_MIN_DURATION;
+exports.TOAST_ROLES = TOAST_ROLES;
 //# sourceMappingURL=toast.cjs.map