@dialpad/dialtone 9.72.1 → 9.73.0-beta.1

package/dist/vue3/components/empty_state/empty_state.vue.cjs

@@ -1,19 +1,15 @@
 "use strict";
 const vue = require("vue");
-const empty_state_constants = require("./empty_state_constants.cjs");
 const common_utils = require("../../common/utils.cjs");
-const illustration_constants = require("../illustration/illustration_constants.cjs");
-const icon_constants = require("../icon/icon_constants.cjs");
+const empty_state_constants = require("./empty_state_constants.cjs");
 const stack = require("../stack/stack.vue.cjs");
-const icon = require("../icon/icon.vue.cjs");
-const illustration = require("../illustration/illustration.vue.cjs");
 const _hoisted_1 = {
   key: 0,
-  class: "d-empty-state__icon"
+  class: "d-empty-state__illustration"
 };
 const _hoisted_2 = {
   key: 1,
-  class: "d-empty-state__illustration"
+  class: "d-empty-state__icon"
 };
 const _sfc_main = {
   __name: "empty_state",
@@ -27,28 +23,6 @@ const _sfc_main = {
       default: "lg",
       validator: (s) => Object.keys(empty_state_constants.EMPTY_STATE_SIZE_MODIFIERS).includes(s)
     },
-    /**
-      * The illustration name in kebab-case
-     * This only displays when size is 'lg' or 'md'
-     * This has priority over icon.
-      * @type {String}
-      */
-    illustrationName: {
-      type: String,
-      default: null,
-      validator: (name) => illustration_constants.ILLUSTRATION_NAMES.includes(name)
-    },
-    /**
-      * The icon name in kebab-case
-     * This will be shown in 'lg' and 'md' size only if illustrationName prop is not provided and
-     * Will always be shown in 'sm' size.
-      * @type {String}
-      */
-    iconName: {
-      type: String,
-      default: null,
-      validator: (name) => icon_constants.ICON_NAMES.includes(name)
-    },
     /**
       * Header text
       * @type {String}
@@ -64,68 +38,26 @@ const _sfc_main = {
     bodyText: {
       type: String,
       default: null
-    },
-    /**
-      * Whether to show the illustration
-      * @type {Boolean}
-      */
-    showIllustration: {
-      type: Boolean,
-      default: true
     }
   },
   setup(__props) {
     const slots = vue.useSlots();
     const props = __props;
-    const notSmSize = vue.computed(() => props.size !== "sm");
-    const showIllustrationComponent = vue.computed(() => props.illustrationName && notSmSize.value);
-    const showIcon = vue.computed(() => {
-      if (!props.iconName) {
-        return false;
-      }
-      return !(props.illustrationName && notSmSize.value);
+    const hasIcon = vue.computed(() => {
+      return common_utils.hasSlotContent(slots.icon);
     });
+    const hasIllustration = vue.computed(() => common_utils.hasSlotContent(slots.illustration));
+    const isSmallSize = vue.computed(() => props.size === "sm");
+    const showIcon = vue.computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));
+    const showIllustration = vue.computed(() => hasIllustration.value && !isSmallSize.value);
     const sizeClass = vue.computed(() => empty_state_constants.EMPTY_STATE_SIZE_MODIFIERS[props.size]);
     const emptyStateClasses = vue.computed(() => ["d-empty-state", sizeClass.value]);
-    const contentClass = vue.computed(() => {
-      switch (props.size) {
-        case "sm":
-          return "d-empty-state__content--sm";
-        case "md":
-          return "d-empty-state__content--md";
-        case "lg":
-          return "d-empty-state__content--lg";
-        default:
-          return "d-empty-state__content--lg";
-      }
-    });
-    const headlineClass = vue.computed(() => {
-      switch (props.size) {
-        case "sm":
-          return "d-headline--md";
-        case "md":
-          return "d-headline--xl";
-        case "lg":
-          return "d-headline--xxl";
-        default:
-          return "d-headline--xxl";
-      }
-    });
-    const bodyClass = vue.computed(() => {
-      switch (props.size) {
-        case "sm":
-          return "d-body--sm";
-        case "md":
-          return "d-body--sm";
-        case "lg":
-          return "d-body--md";
-        default:
-          return "d-body--md";
-      }
-    });
+    const contentClass = vue.computed(() => empty_state_constants.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[props.size]);
+    const headlineClass = vue.computed(() => empty_state_constants.EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[props.size]);
+    const bodyClass = vue.computed(() => empty_state_constants.EMPTY_STATE_BODY_SIZE_MODIFIERS[props.size]);
     vue.onMounted(() => {
       if (!props.bodyText && !common_utils.hasSlotContent(slots.body)) {
-        console.warn("Dialtone Empty State component: You should provide either bodyText or content on body slot.");
+        console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
       }
     });
     return (_ctx, _cache) => {
@@ -133,17 +65,12 @@ const _sfc_main = {
         class: vue.normalizeClass(emptyStateClasses.value)
       }, {
         default: vue.withCtx(() => [
-          __props.showIllustration ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            showIcon.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
-              vue.createVNode(vue.unref(icon), {
-                name: __props.iconName,
-                size: "800"
-              }, null, 8, ["name"])
-            ])) : vue.createCommentVNode("", true),
-            showIllustrationComponent.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
-              vue.createVNode(vue.unref(illustration), { name: __props.illustrationName }, null, 8, ["name"])
-            ])) : vue.createCommentVNode("", true)
-          ], 64)) : vue.createCommentVNode("", true),
+          showIllustration.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
+            vue.renderSlot(_ctx.$slots, "illustration")
+          ])) : vue.createCommentVNode("", true),
+          showIcon.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
+            vue.renderSlot(_ctx.$slots, "icon", { iconSize: "800" })
+          ])) : vue.createCommentVNode("", true),
           vue.createVNode(vue.unref(stack), {
             gap: "450",
             class: vue.normalizeClass(["d-empty-state__content", contentClass.value])

package/dist/vue3/components/empty_state/empty_state.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty_state.vue.cjs","sources":["../../../components/empty_state/empty_state.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <template v-if=\"showIllustration\">\n      <span\n        v-if=\"showIcon\"\n        class=\"d-empty-state__icon\"\n      >\n        <dt-icon\n          :name=\"iconName\"\n          size=\"800\"\n        />\n      </span>\n\n      <span\n        v-if=\"showIllustrationComponent\"\n        class=\"d-empty-state__illustration\"\n      >\n        <dt-illustration\n          :name=\"illustrationName\"\n        />\n      </span>\n    </template>\n\n    <dt-stack\n      gap=\"450\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <div :class=\"['d-empty-state__header-text', headlineClass]\">\n        {{ headerText }}\n      </div>\n\n      <p\n        v-if=\"bodyText\"\n        :class=\"['d-empty-state__body-text', bodyClass]\"\n      >\n        {{ bodyText }}\n      </p>\n    </dt-stack>\n\n    <slot name=\"body\" />\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { EMPTY_STATE_SIZE_MODIFIERS } from './empty_state_constants.js';\nimport { DtIllustration, ILLUSTRATION_NAMES } from '@/components/illustration';\nimport { DtIcon, ICON_NAMES } from '@/components/icon';\nimport { DtStack } from '@/components/stack';\nimport { hasSlotContent } from '@/common/utils';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 'sm', 'md', 'lg'\n    */\n  size: {\n    type: String,\n    default: 'lg',\n    validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n  },\n\n  /**\n    * The illustration name in kebab-case\n   * This only displays when size is 'lg' or 'md'\n   * This has priority over icon.\n    * @type {String}\n    */\n  illustrationName: {\n    type: String,\n    default: null,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n\n  /**\n    * The icon name in kebab-case\n   * This will be shown in 'lg' and 'md' size only if illustrationName prop is not provided and\n   * Will always be shown in 'sm' size.\n    * @type {String}\n    */\n  iconName: {\n    type: String,\n    default: null,\n    validator: (name) => ICON_NAMES.includes(name),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Whether to show the illustration\n    * @type {Boolean}\n    */\n  showIllustration: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst notSmSize = computed(() => props.size !== 'sm');\n\nconst showIllustrationComponent = computed(() => props.illustrationName && notSmSize.value);\n\nconst showIcon = computed(() => {\n  if (!props.iconName) {\n    return false;\n  }\n  return !(props.illustrationName && notSmSize.value);\n});\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-empty-state__content--sm';\n    case 'md':\n      return 'd-empty-state__content--md';\n    case 'lg':\n      return 'd-empty-state__content--lg';\n    default:\n      return 'd-empty-state__content--lg';\n  }\n});\n\nconst headlineClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-headline--md';\n    case 'md':\n      return 'd-headline--xl';\n    case 'lg':\n      return 'd-headline--xxl';\n    default:\n      return 'd-headline--xxl';\n  }\n});\n\nconst bodyClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-body--sm';\n    case 'md':\n      return 'd-body--sm';\n    case 'lg':\n      return 'd-body--md';\n    default:\n      return 'd-body--md';\n  }\n});\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.warn('Dialtone Empty State component: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"names":["useSlots","computed","EMPTY_STATE_SIZE_MODIFIERS","onMounted","hasSlotContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,UAAM,QAAQA,IAAQ,SAAA;AAEtB,UAAM,QAAQ;AA+Dd,UAAM,YAAYC,IAAAA,SAAS,MAAM,MAAM,SAAS,IAAI;AAEpD,UAAM,4BAA4BA,IAAQ,SAAC,MAAM,MAAM,oBAAoB,UAAU,KAAK;AAE1F,UAAM,WAAWA,IAAQ,SAAC,MAAM;AAC9B,UAAI,CAAC,MAAM,UAAU;AACnB,eAAO;AAAA,MACR;AACD,aAAO,EAAE,MAAM,oBAAoB,UAAU;AAAA,IAC/C,CAAC;AAED,UAAM,YAAYA,IAAQ,SAAC,MAAMC,sBAAAA,2BAA2B,MAAM,IAAI,CAAC;AAEvE,UAAM,oBAAoBD,IAAQ,SAAC,MAAM,CAAC,iBAAiB,UAAU,KAAK,CAAC;AAE3E,UAAM,eAAeA,IAAQ,SAAC,MAAM;AAClC,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,UAAM,gBAAgBA,IAAQ,SAAC,MAAM;AACnC,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,UAAM,YAAYA,IAAQ,SAAC,MAAM;AAC/B,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAEDE,QAAAA,UAAU,MAAM;AACd,UAAI,CAAC,MAAM,YAAY,CAACC,aAAAA,eAAe,MAAM,IAAI,GAAG;AAClD,gBAAQ,KAAK,6FAA6F;AAAA,MAC3G;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"empty_state.vue.cjs","sources":["../../../components/empty_state/empty_state.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <span\n      v-if=\"showIllustration\"\n      class=\"d-empty-state__illustration\"\n    >\n      <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n      <slot name=\"illustration\" />\n    </span>\n\n    <span\n      v-if=\"showIcon\"\n      class=\"d-empty-state__icon\"\n    >\n      <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"'800'\"\n      />\n    </span>\n\n    <dt-stack\n      gap=\"450\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <div :class=\"['d-empty-state__header-text', headlineClass]\">\n        {{ headerText }}\n      </div>\n\n      <p\n        v-if=\"bodyText\"\n        :class=\"['d-empty-state__body-text', bodyClass]\"\n      >\n        {{ bodyText }}\n      </p>\n    </dt-stack>\n\n    <slot name=\"body\" />\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/stack';\nimport { hasSlotContent } from '@/common/utils';\nimport {\n  EMPTY_STATE_BODY_SIZE_MODIFIERS,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_SIZE_MODIFIERS,\n  EMPTY_STATE_SIZE_MODIFIERS,\n} from './empty_state_constants.js';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 'sm', 'md', 'lg'\n    */\n  size: {\n    type: String,\n    default: 'lg',\n    validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n});\n\nconst hasIcon = computed(() => {\n  return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\nconst isSmallSize = computed(() => props.size === 'sm');\n\n/**\n * Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n */\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));\n\n/**\n * Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[props.size]);\n\nconst headlineClass = computed(() => EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[props.size]);\n\nconst bodyClass = computed(() => EMPTY_STATE_BODY_SIZE_MODIFIERS[props.size]);\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"names":["useSlots","computed","hasSlotContent","EMPTY_STATE_SIZE_MODIFIERS","EMPTY_STATE_CONTENT_SIZE_MODIFIERS","EMPTY_STATE_HEADLINE_SIZE_MODIFIERS","EMPTY_STATE_BODY_SIZE_MODIFIERS","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,UAAM,QAAQA,IAAQ,SAAA;AAEtB,UAAM,QAAQ;AA8Bd,UAAM,UAAUC,IAAQ,SAAC,MAAM;AAC7B,aAAOC,aAAc,eAAC,MAAM,IAAI;AAAA,IAClC,CAAC;AACD,UAAM,kBAAkBD,IAAQ,SAAC,MAAMC,aAAAA,eAAe,MAAM,YAAY,CAAC;AACzE,UAAM,cAAcD,IAAAA,SAAS,MAAM,MAAM,SAAS,IAAI;AAMtD,UAAM,WAAWA,IAAAA,SAAS,MAAM,QAAQ,UAAU,CAAC,gBAAgB,SAAS,YAAY,MAAM;AAM9F,UAAM,mBAAmBA,IAAQ,SAAC,MAAM,gBAAgB,SAAS,CAAC,YAAY,KAAK;AAEnF,UAAM,YAAYA,IAAQ,SAAC,MAAME,sBAAAA,2BAA2B,MAAM,IAAI,CAAC;AAEvE,UAAM,oBAAoBF,IAAQ,SAAC,MAAM,CAAC,iBAAiB,UAAU,KAAK,CAAC;AAE3E,UAAM,eAAeA,IAAQ,SAAC,MAAMG,sBAAAA,mCAAmC,MAAM,IAAI,CAAC;AAElF,UAAM,gBAAgBH,IAAQ,SAAC,MAAMI,sBAAAA,oCAAoC,MAAM,IAAI,CAAC;AAEpF,UAAM,YAAYJ,IAAQ,SAAC,MAAMK,sBAAAA,gCAAgC,MAAM,IAAI,CAAC;AAE5EC,QAAAA,UAAU,MAAM;AACd,UAAI,CAAC,MAAM,YAAY,CAACL,aAAAA,eAAe,MAAM,IAAI,GAAG;AAClD,gBAAQ,MAAM,2EAA2E;AAAA,MAC1F;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/empty_state/empty_state.vue.js

@@ -1,18 +1,14 @@
-import { useSlots, computed, onMounted, openBlock, createBlock, unref, normalizeClass, withCtx, createElementBlock, Fragment, createVNode, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
-import { EMPTY_STATE_SIZE_MODIFIERS } from "./empty_state_constants.js";
+import { useSlots, computed, onMounted, openBlock, createBlock, unref, normalizeClass, withCtx, createElementBlock, renderSlot, createCommentVNode, createVNode, createElementVNode, toDisplayString } from "vue";
 import { hasSlotContent } from "../../common/utils.js";
-import { ILLUSTRATION_NAMES } from "../illustration/illustration_constants.js";
-import { ICON_NAMES } from "../icon/icon_constants.js";
+import { EMPTY_STATE_SIZE_MODIFIERS, EMPTY_STATE_CONTENT_SIZE_MODIFIERS, EMPTY_STATE_HEADLINE_SIZE_MODIFIERS, EMPTY_STATE_BODY_SIZE_MODIFIERS } from "./empty_state_constants.js";
 import DtStack from "../stack/stack.vue.js";
-import DtIcon from "../icon/icon.vue.js";
-import DtIllustration from "../illustration/illustration.vue.js";
 const _hoisted_1 = {
   key: 0,
-  class: "d-empty-state__icon"
+  class: "d-empty-state__illustration"
 };
 const _hoisted_2 = {
   key: 1,
-  class: "d-empty-state__illustration"
+  class: "d-empty-state__icon"
 };
 const _sfc_main = {
   __name: "empty_state",
@@ -26,28 +22,6 @@ const _sfc_main = {
       default: "lg",
       validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s)
     },
-    /**
-      * The illustration name in kebab-case
-     * This only displays when size is 'lg' or 'md'
-     * This has priority over icon.
-      * @type {String}
-      */
-    illustrationName: {
-      type: String,
-      default: null,
-      validator: (name) => ILLUSTRATION_NAMES.includes(name)
-    },
-    /**
-      * The icon name in kebab-case
-     * This will be shown in 'lg' and 'md' size only if illustrationName prop is not provided and
-     * Will always be shown in 'sm' size.
-      * @type {String}
-      */
-    iconName: {
-      type: String,
-      default: null,
-      validator: (name) => ICON_NAMES.includes(name)
-    },
     /**
       * Header text
       * @type {String}
@@ -63,68 +37,26 @@ const _sfc_main = {
     bodyText: {
       type: String,
       default: null
-    },
-    /**
-      * Whether to show the illustration
-      * @type {Boolean}
-      */
-    showIllustration: {
-      type: Boolean,
-      default: true
     }
   },
   setup(__props) {
     const slots = useSlots();
     const props = __props;
-    const notSmSize = computed(() => props.size !== "sm");
-    const showIllustrationComponent = computed(() => props.illustrationName && notSmSize.value);
-    const showIcon = computed(() => {
-      if (!props.iconName) {
-        return false;
-      }
-      return !(props.illustrationName && notSmSize.value);
+    const hasIcon = computed(() => {
+      return hasSlotContent(slots.icon);
     });
+    const hasIllustration = computed(() => hasSlotContent(slots.illustration));
+    const isSmallSize = computed(() => props.size === "sm");
+    const showIcon = computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));
+    const showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);
     const sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);
     const emptyStateClasses = computed(() => ["d-empty-state", sizeClass.value]);
-    const contentClass = computed(() => {
-      switch (props.size) {
-        case "sm":
-          return "d-empty-state__content--sm";
-        case "md":
-          return "d-empty-state__content--md";
-        case "lg":
-          return "d-empty-state__content--lg";
-        default:
-          return "d-empty-state__content--lg";
-      }
-    });
-    const headlineClass = computed(() => {
-      switch (props.size) {
-        case "sm":
-          return "d-headline--md";
-        case "md":
-          return "d-headline--xl";
-        case "lg":
-          return "d-headline--xxl";
-        default:
-          return "d-headline--xxl";
-      }
-    });
-    const bodyClass = computed(() => {
-      switch (props.size) {
-        case "sm":
-          return "d-body--sm";
-        case "md":
-          return "d-body--sm";
-        case "lg":
-          return "d-body--md";
-        default:
-          return "d-body--md";
-      }
-    });
+    const contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[props.size]);
+    const headlineClass = computed(() => EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[props.size]);
+    const bodyClass = computed(() => EMPTY_STATE_BODY_SIZE_MODIFIERS[props.size]);
     onMounted(() => {
       if (!props.bodyText && !hasSlotContent(slots.body)) {
-        console.warn("Dialtone Empty State component: You should provide either bodyText or content on body slot.");
+        console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
       }
     });
     return (_ctx, _cache) => {
@@ -132,17 +64,12 @@ const _sfc_main = {
         class: normalizeClass(emptyStateClasses.value)
       }, {
         default: withCtx(() => [
-          __props.showIllustration ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            showIcon.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
-              createVNode(unref(DtIcon), {
-                name: __props.iconName,
-                size: "800"
-              }, null, 8, ["name"])
-            ])) : createCommentVNode("", true),
-            showIllustrationComponent.value ? (openBlock(), createElementBlock("span", _hoisted_2, [
-              createVNode(unref(DtIllustration), { name: __props.illustrationName }, null, 8, ["name"])
-            ])) : createCommentVNode("", true)
-          ], 64)) : createCommentVNode("", true),
+          showIllustration.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
+            renderSlot(_ctx.$slots, "illustration")
+          ])) : createCommentVNode("", true),
+          showIcon.value ? (openBlock(), createElementBlock("span", _hoisted_2, [
+            renderSlot(_ctx.$slots, "icon", { iconSize: "800" })
+          ])) : createCommentVNode("", true),
           createVNode(unref(DtStack), {
             gap: "450",
             class: normalizeClass(["d-empty-state__content", contentClass.value])

package/dist/vue3/components/empty_state/empty_state.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty_state.vue.js","sources":["../../../components/empty_state/empty_state.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <template v-if=\"showIllustration\">\n      <span\n        v-if=\"showIcon\"\n        class=\"d-empty-state__icon\"\n      >\n        <dt-icon\n          :name=\"iconName\"\n          size=\"800\"\n        />\n      </span>\n\n      <span\n        v-if=\"showIllustrationComponent\"\n        class=\"d-empty-state__illustration\"\n      >\n        <dt-illustration\n          :name=\"illustrationName\"\n        />\n      </span>\n    </template>\n\n    <dt-stack\n      gap=\"450\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <div :class=\"['d-empty-state__header-text', headlineClass]\">\n        {{ headerText }}\n      </div>\n\n      <p\n        v-if=\"bodyText\"\n        :class=\"['d-empty-state__body-text', bodyClass]\"\n      >\n        {{ bodyText }}\n      </p>\n    </dt-stack>\n\n    <slot name=\"body\" />\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { EMPTY_STATE_SIZE_MODIFIERS } from './empty_state_constants.js';\nimport { DtIllustration, ILLUSTRATION_NAMES } from '@/components/illustration';\nimport { DtIcon, ICON_NAMES } from '@/components/icon';\nimport { DtStack } from '@/components/stack';\nimport { hasSlotContent } from '@/common/utils';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 'sm', 'md', 'lg'\n    */\n  size: {\n    type: String,\n    default: 'lg',\n    validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n  },\n\n  /**\n    * The illustration name in kebab-case\n   * This only displays when size is 'lg' or 'md'\n   * This has priority over icon.\n    * @type {String}\n    */\n  illustrationName: {\n    type: String,\n    default: null,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n\n  /**\n    * The icon name in kebab-case\n   * This will be shown in 'lg' and 'md' size only if illustrationName prop is not provided and\n   * Will always be shown in 'sm' size.\n    * @type {String}\n    */\n  iconName: {\n    type: String,\n    default: null,\n    validator: (name) => ICON_NAMES.includes(name),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Whether to show the illustration\n    * @type {Boolean}\n    */\n  showIllustration: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst notSmSize = computed(() => props.size !== 'sm');\n\nconst showIllustrationComponent = computed(() => props.illustrationName && notSmSize.value);\n\nconst showIcon = computed(() => {\n  if (!props.iconName) {\n    return false;\n  }\n  return !(props.illustrationName && notSmSize.value);\n});\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-empty-state__content--sm';\n    case 'md':\n      return 'd-empty-state__content--md';\n    case 'lg':\n      return 'd-empty-state__content--lg';\n    default:\n      return 'd-empty-state__content--lg';\n  }\n});\n\nconst headlineClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-headline--md';\n    case 'md':\n      return 'd-headline--xl';\n    case 'lg':\n      return 'd-headline--xxl';\n    default:\n      return 'd-headline--xxl';\n  }\n});\n\nconst bodyClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-body--sm';\n    case 'md':\n      return 'd-body--sm';\n    case 'lg':\n      return 'd-body--md';\n    default:\n      return 'd-body--md';\n  }\n});\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.warn('Dialtone Empty State component: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,UAAM,QAAQ,SAAQ;AAEtB,UAAM,QAAQ;AA+Dd,UAAM,YAAY,SAAS,MAAM,MAAM,SAAS,IAAI;AAEpD,UAAM,4BAA4B,SAAS,MAAM,MAAM,oBAAoB,UAAU,KAAK;AAE1F,UAAM,WAAW,SAAS,MAAM;AAC9B,UAAI,CAAC,MAAM,UAAU;AACnB,eAAO;AAAA,MACR;AACD,aAAO,EAAE,MAAM,oBAAoB,UAAU;AAAA,IAC/C,CAAC;AAED,UAAM,YAAY,SAAS,MAAM,2BAA2B,MAAM,IAAI,CAAC;AAEvE,UAAM,oBAAoB,SAAS,MAAM,CAAC,iBAAiB,UAAU,KAAK,CAAC;AAE3E,UAAM,eAAe,SAAS,MAAM;AAClC,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,UAAM,gBAAgB,SAAS,MAAM;AACnC,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,UAAM,YAAY,SAAS,MAAM;AAC/B,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,cAAU,MAAM;AACd,UAAI,CAAC,MAAM,YAAY,CAAC,eAAe,MAAM,IAAI,GAAG;AAClD,gBAAQ,KAAK,6FAA6F;AAAA,MAC3G;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"empty_state.vue.js","sources":["../../../components/empty_state/empty_state.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <span\n      v-if=\"showIllustration\"\n      class=\"d-empty-state__illustration\"\n    >\n      <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n      <slot name=\"illustration\" />\n    </span>\n\n    <span\n      v-if=\"showIcon\"\n      class=\"d-empty-state__icon\"\n    >\n      <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"'800'\"\n      />\n    </span>\n\n    <dt-stack\n      gap=\"450\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <div :class=\"['d-empty-state__header-text', headlineClass]\">\n        {{ headerText }}\n      </div>\n\n      <p\n        v-if=\"bodyText\"\n        :class=\"['d-empty-state__body-text', bodyClass]\"\n      >\n        {{ bodyText }}\n      </p>\n    </dt-stack>\n\n    <slot name=\"body\" />\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/stack';\nimport { hasSlotContent } from '@/common/utils';\nimport {\n  EMPTY_STATE_BODY_SIZE_MODIFIERS,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_SIZE_MODIFIERS,\n  EMPTY_STATE_SIZE_MODIFIERS,\n} from './empty_state_constants.js';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 'sm', 'md', 'lg'\n    */\n  size: {\n    type: String,\n    default: 'lg',\n    validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n});\n\nconst hasIcon = computed(() => {\n  return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\nconst isSmallSize = computed(() => props.size === 'sm');\n\n/**\n * Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n */\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));\n\n/**\n * Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[props.size]);\n\nconst headlineClass = computed(() => EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[props.size]);\n\nconst bodyClass = computed(() => EMPTY_STATE_BODY_SIZE_MODIFIERS[props.size]);\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,UAAM,QAAQ,SAAQ;AAEtB,UAAM,QAAQ;AA8Bd,UAAM,UAAU,SAAS,MAAM;AAC7B,aAAO,eAAe,MAAM,IAAI;AAAA,IAClC,CAAC;AACD,UAAM,kBAAkB,SAAS,MAAM,eAAe,MAAM,YAAY,CAAC;AACzE,UAAM,cAAc,SAAS,MAAM,MAAM,SAAS,IAAI;AAMtD,UAAM,WAAW,SAAS,MAAM,QAAQ,UAAU,CAAC,gBAAgB,SAAS,YAAY,MAAM;AAM9F,UAAM,mBAAmB,SAAS,MAAM,gBAAgB,SAAS,CAAC,YAAY,KAAK;AAEnF,UAAM,YAAY,SAAS,MAAM,2BAA2B,MAAM,IAAI,CAAC;AAEvE,UAAM,oBAAoB,SAAS,MAAM,CAAC,iBAAiB,UAAU,KAAK,CAAC;AAE3E,UAAM,eAAe,SAAS,MAAM,mCAAmC,MAAM,IAAI,CAAC;AAElF,UAAM,gBAAgB,SAAS,MAAM,oCAAoC,MAAM,IAAI,CAAC;AAEpF,UAAM,YAAY,SAAS,MAAM,gCAAgC,MAAM,IAAI,CAAC;AAE5E,cAAU,MAAM;AACd,UAAI,CAAC,MAAM,YAAY,CAAC,eAAe,MAAM,IAAI,GAAG;AAClD,gBAAQ,MAAM,2EAA2E;AAAA,MAC1F;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/empty_state/empty_state_constants.cjs

@@ -5,5 +5,23 @@ const EMPTY_STATE_SIZE_MODIFIERS = {
   md: "d-empty-state--size-md",
   lg: "d-empty-state--size-lg"
 };
+const EMPTY_STATE_CONTENT_SIZE_MODIFIERS = {
+  sm: "d-empty-state__content--sm",
+  md: "d-empty-state__content--md",
+  lg: "d-empty-state__content--lg"
+};
+const EMPTY_STATE_HEADLINE_SIZE_MODIFIERS = {
+  sm: "d-headline--md",
+  md: "d-headline--xl",
+  lg: "d-headline--xxl"
+};
+const EMPTY_STATE_BODY_SIZE_MODIFIERS = {
+  sm: "d-body--sm",
+  md: "d-body--sm",
+  lg: "d-body--md"
+};
+exports.EMPTY_STATE_BODY_SIZE_MODIFIERS = EMPTY_STATE_BODY_SIZE_MODIFIERS;
+exports.EMPTY_STATE_CONTENT_SIZE_MODIFIERS = EMPTY_STATE_CONTENT_SIZE_MODIFIERS;
+exports.EMPTY_STATE_HEADLINE_SIZE_MODIFIERS = EMPTY_STATE_HEADLINE_SIZE_MODIFIERS;
 exports.EMPTY_STATE_SIZE_MODIFIERS = EMPTY_STATE_SIZE_MODIFIERS;
 //# sourceMappingURL=empty_state_constants.cjs.map

package/dist/vue3/components/empty_state/empty_state_constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty_state_constants.cjs","sources":["../../../components/empty_state/empty_state_constants.js"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n  sm: 'd-empty-state--size-sm',\n  md: 'd-empty-state--size-md',\n  lg: 'd-empty-state--size-lg',\n};\n\nexport default {\n  EMPTY_STATE_SIZE_MODIFIERS,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;"}
+{"version":3,"file":"empty_state_constants.cjs","sources":["../../../components/empty_state/empty_state_constants.js"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n  sm: 'd-empty-state--size-sm',\n  md: 'd-empty-state--size-md',\n  lg: 'd-empty-state--size-lg',\n};\n\nexport const EMPTY_STATE_CONTENT_SIZE_MODIFIERS = {\n  sm: 'd-empty-state__content--sm',\n  md: 'd-empty-state__content--md',\n  lg: 'd-empty-state__content--lg',\n};\n\nexport const EMPTY_STATE_HEADLINE_SIZE_MODIFIERS = {\n  sm: 'd-headline--md',\n  md: 'd-headline--xl',\n  lg: 'd-headline--xxl',\n};\n\nexport const EMPTY_STATE_BODY_SIZE_MODIFIERS = {\n  sm: 'd-body--sm',\n  md: 'd-body--sm',\n  lg: 'd-body--md',\n};\n\nexport default {\n  EMPTY_STATE_SIZE_MODIFIERS,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_SIZE_MODIFIERS,\n  EMPTY_STATE_BODY_SIZE_MODIFIERS,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,qCAAqC;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,sCAAsC;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,kCAAkC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;;;"}

package/dist/vue3/components/empty_state/empty_state_constants.js

@@ -3,7 +3,25 @@ const EMPTY_STATE_SIZE_MODIFIERS = {
   md: "d-empty-state--size-md",
   lg: "d-empty-state--size-lg"
 };
+const EMPTY_STATE_CONTENT_SIZE_MODIFIERS = {
+  sm: "d-empty-state__content--sm",
+  md: "d-empty-state__content--md",
+  lg: "d-empty-state__content--lg"
+};
+const EMPTY_STATE_HEADLINE_SIZE_MODIFIERS = {
+  sm: "d-headline--md",
+  md: "d-headline--xl",
+  lg: "d-headline--xxl"
+};
+const EMPTY_STATE_BODY_SIZE_MODIFIERS = {
+  sm: "d-body--sm",
+  md: "d-body--sm",
+  lg: "d-body--md"
+};
 export {
+  EMPTY_STATE_BODY_SIZE_MODIFIERS,
+  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,
+  EMPTY_STATE_HEADLINE_SIZE_MODIFIERS,
   EMPTY_STATE_SIZE_MODIFIERS
 };
 //# sourceMappingURL=empty_state_constants.js.map

package/dist/vue3/components/empty_state/empty_state_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty_state_constants.js","sources":["../../../components/empty_state/empty_state_constants.js"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n  sm: 'd-empty-state--size-sm',\n  md: 'd-empty-state--size-md',\n  lg: 'd-empty-state--size-lg',\n};\n\nexport default {\n  EMPTY_STATE_SIZE_MODIFIERS,\n};\n"],"names":[],"mappings":"AAAY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;"}
+{"version":3,"file":"empty_state_constants.js","sources":["../../../components/empty_state/empty_state_constants.js"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n  sm: 'd-empty-state--size-sm',\n  md: 'd-empty-state--size-md',\n  lg: 'd-empty-state--size-lg',\n};\n\nexport const EMPTY_STATE_CONTENT_SIZE_MODIFIERS = {\n  sm: 'd-empty-state__content--sm',\n  md: 'd-empty-state__content--md',\n  lg: 'd-empty-state__content--lg',\n};\n\nexport const EMPTY_STATE_HEADLINE_SIZE_MODIFIERS = {\n  sm: 'd-headline--md',\n  md: 'd-headline--xl',\n  lg: 'd-headline--xxl',\n};\n\nexport const EMPTY_STATE_BODY_SIZE_MODIFIERS = {\n  sm: 'd-body--sm',\n  md: 'd-body--sm',\n  lg: 'd-body--md',\n};\n\nexport default {\n  EMPTY_STATE_SIZE_MODIFIERS,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_SIZE_MODIFIERS,\n  EMPTY_STATE_BODY_SIZE_MODIFIERS,\n};\n"],"names":[],"mappings":"AAAY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,qCAAqC;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,sCAAsC;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,kCAAkC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;"}

package/dist/vue3/components/illustration/illustration.vue.cjs

@@ -25,6 +25,6 @@ const _sfc_main = {
     };
   }
 };
-const DtIllustration = _sfc_main;
-module.exports = DtIllustration;
+const _sfc_main$1 = _sfc_main;
+module.exports = _sfc_main$1;
 //# sourceMappingURL=illustration.vue.cjs.map

package/dist/vue3/components/illustration/illustration.vue.js

@@ -24,8 +24,8 @@ const _sfc_main = {
     };
   }
 };
-const DtIllustration = _sfc_main;
+const _sfc_main$1 = _sfc_main;
 export {
-  DtIllustration as default
+  _sfc_main$1 as default
 };
 //# sourceMappingURL=illustration.vue.js.map

package/dist/vue3/components/image_viewer/image_viewer.vue.cjs

@@ -1,15 +1,15 @@
 "use strict";
 const modal = require("../../common/mixins/modal.cjs");
 const common_constants = require("../../common/constants.cjs");
+const vue3 = require("@dialpad/dialtone-icons/vue3");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const button = require("../button/button.vue.cjs");
-const icon = require("../icon/icon.vue.cjs");
 const _sfc_main = {
   name: "DtImageViewer",
   components: {
     DtButton: button,
-    DtIcon: icon
+    DtIconClose: vue3.DtIconClose
   },
   mixins: [modal],
   props: {
@@ -174,7 +174,7 @@ const _hoisted_3 = {
 const _hoisted_4 = ["src", "alt"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = vue.resolveComponent("dt-button");
-  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
   return vue.openBlock(), vue.createElementBlock("div", null, [
     vue.createVNode(_component_dt_button, {
       "data-qa": "dt-image-viewer-preview",
@@ -228,9 +228,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               onClick: $options.close
             }, {
               icon: vue.withCtx(() => [
-                vue.createVNode(_component_dt_icon, {
+                vue.createVNode(_component_dt_icon_close, {
                   class: "d-image-viewer__close-button",
-                  name: "close",
                   size: "400"
                 })
               ]),

package/dist/vue3/components/image_viewer/image_viewer.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"image_viewer.vue.cjs","sources":["../../../components/image_viewer/image_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-button\n      data-qa=\"dt-image-viewer-preview\"\n      class=\"d-image-viewer__preview-button\"\n      :aria-label=\"ariaLabel\"\n      importance=\"clear\"\n      @click=\"openModal\"\n    >\n      <img\n        :class=\"imageButtonClass\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n    </dt-button>\n    <Teleport\n      v-if=\"isOpen\"\n      :to=\"appendTo\"\n    >\n      <div\n        :aria-hidden=\"!isOpen ? 'true' : 'false'\"\n        class=\"d-modal\"\n        data-qa=\"dt-modal\"\n        v-on=\"modalListeners\"\n        @mouseover=\"showCloseButton = true\"\n        @mouseleave=\"showCloseButton = false\"\n        @focusin=\" showCloseButton = true\"\n        @focusout=\" showCloseButton = false\"\n      >\n        <div\n          data-qa=\"dt-image-viewer-full\"\n          class=\"d-image-viewer__full\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <img\n            class=\"d-image-viewer__full__image\"\n            :src=\"imageSrc\"\n            :alt=\"imageAlt\"\n          >\n        </div>\n        <transition name=\"fade\">\n          <dt-button\n            v-if=\"showCloseButton\"\n            ref=\"closeImage\"\n            data-qa=\"dt-image-viewer-close-btn\"\n            class=\"d-modal__close\"\n            circle\n            size=\"lg\"\n            importance=\"clear\"\n            kind=\"inverted\"\n            :aria-label=\"closeAriaLabel\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon\n                class=\"d-image-viewer__close-button\"\n                name=\"close\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'DtImageViewer',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * By default the portal appends to the body of the root parent. We can modify\n     * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.\n     * The appendTo prop expects a CSS selector string or an actual DOM node.\n     * type: string | HTMLElement, default: 'body'\n    */\n    appendTo: {\n      type: String,\n      default: 'body',\n    },\n    /**\n     * Controls whether the image modal is shown. Leaving this null will have the image modal\n     * trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * URL of the image to be shown\n     */\n    imageSrc: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Alt text of image\n     */\n    imageAlt: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Image Class\n     */\n    imageButtonClass: {\n      type: String,\n      required: false,\n      default: '',\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Aria label for close button\n     */\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      showCloseButton: true,\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          (event.target === event.currentTarget) && this.close();\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n        },\n      };\n    },\n  },\n\n  watch: {\n    isOpen: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    openModal () {\n      // Has custom control passed in\n      if (this.open !== null) {\n        return;\n      }\n      this.isOpen = true;\n      this.showCloseButton = true;\n      this.$emit('opened', true);\n\n      setTimeout(() => {\n        this.focusAfterOpen();\n      });\n    },\n\n    close () {\n      this.isOpen = false;\n      this.$emit('opened', false);\n\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    focusAfterOpen () {\n      this.$refs.closeImage?.$el.focus();\n    },\n\n    trapFocus (e) {\n      if (this.isOpen) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtIcon","Modal","EVENT_KEYNAMES","_createElementBlock","_createVNode","_createElementVNode","_createBlock","_Teleport","_mergeProps","_toHandlers","_Transition"],"mappings":"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"}
+{"version":3,"file":"image_viewer.vue.cjs","sources":["../../../components/image_viewer/image_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-button\n      data-qa=\"dt-image-viewer-preview\"\n      class=\"d-image-viewer__preview-button\"\n      :aria-label=\"ariaLabel\"\n      importance=\"clear\"\n      @click=\"openModal\"\n    >\n      <img\n        :class=\"imageButtonClass\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n    </dt-button>\n    <Teleport\n      v-if=\"isOpen\"\n      :to=\"appendTo\"\n    >\n      <div\n        :aria-hidden=\"!isOpen ? 'true' : 'false'\"\n        class=\"d-modal\"\n        data-qa=\"dt-modal\"\n        v-on=\"modalListeners\"\n        @mouseover=\"showCloseButton = true\"\n        @mouseleave=\"showCloseButton = false\"\n        @focusin=\" showCloseButton = true\"\n        @focusout=\" showCloseButton = false\"\n      >\n        <div\n          data-qa=\"dt-image-viewer-full\"\n          class=\"d-image-viewer__full\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <img\n            class=\"d-image-viewer__full__image\"\n            :src=\"imageSrc\"\n            :alt=\"imageAlt\"\n          >\n        </div>\n        <transition name=\"fade\">\n          <dt-button\n            v-if=\"showCloseButton\"\n            ref=\"closeImage\"\n            data-qa=\"dt-image-viewer-close-btn\"\n            class=\"d-modal__close\"\n            circle\n            size=\"lg\"\n            importance=\"clear\"\n            kind=\"inverted\"\n            :aria-label=\"closeAriaLabel\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon-close\n                class=\"d-image-viewer__close-button\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'DtImageViewer',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * By default the portal appends to the body of the root parent. We can modify\n     * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.\n     * The appendTo prop expects a CSS selector string or an actual DOM node.\n     * type: string | HTMLElement, default: 'body'\n    */\n    appendTo: {\n      type: String,\n      default: 'body',\n    },\n\n    /**\n     * Controls whether the image modal is shown. Leaving this null will have the image modal\n     * trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * URL of the image to be shown\n     */\n    imageSrc: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Alt text of image\n     */\n    imageAlt: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Image Class\n     */\n    imageButtonClass: {\n      type: String,\n      required: false,\n      default: '',\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Aria label for close button\n     */\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      showCloseButton: true,\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          (event.target === event.currentTarget) && this.close();\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n        },\n      };\n    },\n  },\n\n  watch: {\n    isOpen: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    openModal () {\n      // Has custom control passed in\n      if (this.open !== null) {\n        return;\n      }\n      this.isOpen = true;\n      this.showCloseButton = true;\n      this.$emit('opened', true);\n\n      setTimeout(() => {\n        this.focusAfterOpen();\n      });\n    },\n\n    close () {\n      this.isOpen = false;\n      this.$emit('opened', false);\n\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    focusAfterOpen () {\n      this.$refs.closeImage?.$el.focus();\n    },\n\n    trapFocus (e) {\n      if (this.isOpen) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtIconClose","Modal","EVENT_KEYNAMES","_createElementBlock","_createVNode","_createElementVNode","_createBlock","_Teleport","_mergeProps","_toHandlers","_Transition"],"mappings":"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"}

package/dist/vue3/components/image_viewer/image_viewer.vue.js

@@ -1,14 +1,14 @@
 import Modal from "../../common/mixins/modal.js";
 import { EVENT_KEYNAMES } from "../../common/constants.js";
+import { DtIconClose } from "@dialpad/dialtone-icons/vue3";
 import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, normalizeClass, createBlock, Teleport, mergeProps, toHandlers, Transition, createCommentVNode } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import DtButton from "../button/button.vue.js";
-import DtIcon from "../icon/icon.vue.js";
 const _sfc_main = {
   name: "DtImageViewer",
   components: {
     DtButton,
-    DtIcon
+    DtIconClose
   },
   mixins: [Modal],
   props: {
@@ -173,7 +173,7 @@ const _hoisted_3 = {
 const _hoisted_4 = ["src", "alt"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = resolveComponent("dt-button");
-  const _component_dt_icon = resolveComponent("dt-icon");
+  const _component_dt_icon_close = resolveComponent("dt-icon-close");
   return openBlock(), createElementBlock("div", null, [
     createVNode(_component_dt_button, {
       "data-qa": "dt-image-viewer-preview",
@@ -227,9 +227,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               onClick: $options.close
             }, {
               icon: withCtx(() => [
-                createVNode(_component_dt_icon, {
+                createVNode(_component_dt_icon_close, {
                   class: "d-image-viewer__close-button",
-                  name: "close",
                   size: "400"
                 })
               ]),