@dialpad/dialtone-vue 3.221.1 → 3.222.0-next.2

package/dist/lib/group-row/group-row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"group-row.cjs","names":[],"sources":["../../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :description=\"names\"\n    :aria-label=\"ariaLabel\"\n    :unread-count=\"unreadCount\"\n    :has-unreads=\"hasUnreads\"\n    :unread-mention-count=\"unreadMentionCount\"\n    :unread-count-tooltip=\"unreadCountTooltip\"\n    :selected=\"selected\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    v-on=\"contactRowListeners\"\n  >\n    <template #left>\n      <dt-icon-users\n        size=\"300\"\n      />\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtIconUsers } from '@dialpad/dialtone-icons/vue3';\nimport { safeConcatStrings, extractVueListeners } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeGroupRow',\n\n  components: {\n    DtIconUsers,\n    DtRecipeGeneralRow,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * Names of the group members\n     */\n    names: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    groupCount () {\n      return this.names.split(',').length;\n    },\n\n    messageCount () {\n      return isNaN(this.unreadCount)\n        ? this.unreadCount\n        : Number(this.unreadCount);\n    },\n\n    mentionCount () {\n      return isNaN(this.unreadMentionCount)\n        ? this.unreadMentionCount\n        : Number(this.unreadMentionCount);\n    },\n\n    unreadCountTooltip () {\n      return safeConcatStrings([\n        this.unreadCount && this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: this.messageCount }),\n        this.unreadMentionCount && this.i18n.$t('DIALTONE_UNREAD_MENTION_COUNT_TEXT', { unreadCount: this.mentionCount }),\n      ]);\n    },\n\n    typingTooltip () {\n      return this.isTyping && this.i18n.$t('DIALTONE_TYPING_TEXT');\n    },\n\n    ariaLabel () {\n      return safeConcatStrings([\n        this.typingTooltip,\n        this.i18n.$t('DIALTONE_GROUP_ROW_GROUP_COUNT_TEXT', { count: this.groupCount }),\n        this.names,\n        this.unreadCountTooltip,\n      ]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n};\n</script>\n"],"mappings":"wVA2BA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,mBAEN,WAAY,CACV,oDAAA,YACA,mBAAA,EAAA,QACD,CAED,aAAc,GAEd,MAAO,CAKL,MAAO,CACL,KAAM,OACN,SAAU,GACX,CAKD,YAAa,CACX,KAAM,OACN,QAAS,KACV,CAKD,mBAAoB,CAClB,KAAM,OACN,QAAS,KACV,CAMD,WAAY,CACV,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,KAAM,IAAI,EAAA,qBACX,EAGH,SAAU,CACR,YAAc,CACZ,OAAO,KAAK,MAAM,MAAM,IAAI,CAAC,QAG/B,cAAgB,CACd,OAAO,MAAM,KAAK,YAAW,CACzB,KAAK,YACL,OAAO,KAAK,YAAY,EAG9B,cAAgB,CACd,OAAO,MAAM,KAAK,mBAAkB,CAChC,KAAK,mBACL,OAAO,KAAK,mBAAmB,EAGrC,oBAAsB,CACpB,OAAO,EAAA,kBAAkB,CACvB,KAAK,aAAe,KAAK,KAAK,GAAG,qCAAsC,CAAE,YAAa,KAAK,aAAc,CAAC,CAC1G,KAAK,oBAAsB,KAAK,KAAK,GAAG,qCAAsC,CAAE,YAAa,KAAK,aAAc,CAAC,CAClH,CAAC,EAGJ,eAAiB,CACf,OAAO,KAAK,UAAY,KAAK,KAAK,GAAG,uBAAuB,EAG9D,WAAa,CACX,OAAO,EAAA,kBAAkB,CACvB,KAAK,cACL,KAAK,KAAK,GAAG,sCAAuC,CAAE,MAAO,KAAK,WAAY,CAAC,CAC/E,KAAK,MACL,KAAK,mBACN,CAAC,EAGJ,qBAAuB,CACrB,OAAO,EAAA,oBAAoB,KAAK,OAAO,EAE1C,CACF,mKAvHyB,GAAA,EAAA,EAAA,YAAA,CAhBrB,YAAa,EAAA,MACb,aAAY,EAAA,UACZ,eAAc,EAAA,YACd,cAAa,EAAA,WACb,uBAAsB,EAAA,mBACtB,uBAAsB,EAAA,mBACtB,SAAU,EAAA,SACV,YAAW,EAAA,UACJ,EAAA,QAAA,EAAA,EAAA,YACkB,EAApB,oBAAmB,CAAA,CAAA,CAEd,MAAA,EAAA,EAAA,aAGP,EAAA,EAAA,EAAA,aAAA,EAAA,CADA,KAAK,MAAK,CAAA,CAAA,CAAA"}
+{"version":3,"file":"group-row.cjs","names":[],"sources":["../../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :description=\"names\"\n    :aria-label=\"ariaLabel\"\n    :unread-count=\"unreadCount\"\n    :has-unreads=\"hasUnreads\"\n    :unread-mention-count=\"unreadMentionCount\"\n    :unread-count-tooltip=\"unreadCountTooltip\"\n    :selected=\"selected\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    v-on=\"contactRowListeners\"\n  >\n    <template #start>\n      <dt-icon-users\n        size=\"300\"\n      />\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtIconUsers } from '@dialpad/dialtone-icons/vue';\nimport { safeConcatStrings, extractVueListeners } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeGroupRow',\n\n  components: {\n    DtIconUsers,\n    DtRecipeGeneralRow,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * Names of the group members\n     */\n    names: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    groupCount () {\n      return this.names.split(',').length;\n    },\n\n    messageCount () {\n      return isNaN(this.unreadCount)\n        ? this.unreadCount\n        : Number(this.unreadCount);\n    },\n\n    mentionCount () {\n      return isNaN(this.unreadMentionCount)\n        ? this.unreadMentionCount\n        : Number(this.unreadMentionCount);\n    },\n\n    unreadCountTooltip () {\n      return safeConcatStrings([\n        this.unreadCount && this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: this.messageCount }),\n        this.unreadMentionCount && this.i18n.$t('DIALTONE_UNREAD_MENTION_COUNT_TEXT', { unreadCount: this.mentionCount }),\n      ]);\n    },\n\n    typingTooltip () {\n      return this.isTyping && this.i18n.$t('DIALTONE_TYPING_TEXT');\n    },\n\n    ariaLabel () {\n      return safeConcatStrings([\n        this.typingTooltip,\n        this.i18n.$t('DIALTONE_GROUP_ROW_GROUP_COUNT_TEXT', { count: this.groupCount }),\n        this.names,\n        this.unreadCountTooltip,\n      ]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n};\n</script>\n"],"mappings":"wVA2BA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,mBAEN,WAAY,CACV,mDAAA,YACA,mBAAA,EAAA,QACD,CAED,aAAc,GAEd,MAAO,CAKL,MAAO,CACL,KAAM,OACN,SAAU,GACX,CAKD,YAAa,CACX,KAAM,OACN,QAAS,KACV,CAKD,mBAAoB,CAClB,KAAM,OACN,QAAS,KACV,CAMD,WAAY,CACV,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,KAAM,IAAI,EAAA,qBACX,EAGH,SAAU,CACR,YAAc,CACZ,OAAO,KAAK,MAAM,MAAM,IAAI,CAAC,QAG/B,cAAgB,CACd,OAAO,MAAM,KAAK,YAAW,CACzB,KAAK,YACL,OAAO,KAAK,YAAY,EAG9B,cAAgB,CACd,OAAO,MAAM,KAAK,mBAAkB,CAChC,KAAK,mBACL,OAAO,KAAK,mBAAmB,EAGrC,oBAAsB,CACpB,OAAO,EAAA,kBAAkB,CACvB,KAAK,aAAe,KAAK,KAAK,GAAG,qCAAsC,CAAE,YAAa,KAAK,aAAc,CAAC,CAC1G,KAAK,oBAAsB,KAAK,KAAK,GAAG,qCAAsC,CAAE,YAAa,KAAK,aAAc,CAAC,CAClH,CAAC,EAGJ,eAAiB,CACf,OAAO,KAAK,UAAY,KAAK,KAAK,GAAG,uBAAuB,EAG9D,WAAa,CACX,OAAO,EAAA,kBAAkB,CACvB,KAAK,cACL,KAAK,KAAK,GAAG,sCAAuC,CAAE,MAAO,KAAK,WAAY,CAAC,CAC/E,KAAK,MACL,KAAK,mBACN,CAAC,EAGJ,qBAAuB,CACrB,OAAO,EAAA,oBAAoB,KAAK,OAAO,EAE1C,CACF,mKAvHyB,GAAA,EAAA,EAAA,YAAA,CAhBrB,YAAa,EAAA,MACb,aAAY,EAAA,UACZ,eAAc,EAAA,YACd,cAAa,EAAA,WACb,uBAAsB,EAAA,mBACtB,uBAAsB,EAAA,mBACtB,SAAU,EAAA,SACV,YAAW,EAAA,UACJ,EAAA,QAAA,EAAA,EAAA,YACkB,EAApB,oBAAmB,CAAA,CAAA,CAEd,OAAA,EAAA,EAAA,aAGP,EAAA,EAAA,EAAA,aAAA,EAAA,CADA,KAAK,MAAK,CAAA,CAAA,CAAA"}

package/dist/lib/group-row/group-row.js

@@ -3,7 +3,7 @@ import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import { DialtoneLocalization as r } from "../../localization/index.js";
 import i from "../general-row/general-row.js";
 import { createBlock as a, createVNode as o, mergeProps as s, openBlock as c, resolveComponent as l, toHandlers as u, withCtx as d } from "vue";
-import { DtIconUsers as f } from "@dialpad/dialtone-icons/vue3";
+import { DtIconUsers as f } from "@dialpad/dialtone-icons/vue";
 //#region recipes/leftbar/group_row/group_row.vue
 var p = {
 	compatConfig: { MODE: 3 },
@@ -83,7 +83,7 @@ function m(e, t, n, r, i, f) {
 		selected: n.selected,
 		"is-typing": n.isTyping
 	}, e.$attrs, u(f.contactRowListeners)), {
-		left: d(() => [o(p, { size: "300" })]),
+		start: d(() => [o(p, { size: "300" })]),
 		_: 1
 	}, 16, [
 		"description",

package/dist/lib/group-row/group-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"group-row.js","names":[],"sources":["../../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :description=\"names\"\n    :aria-label=\"ariaLabel\"\n    :unread-count=\"unreadCount\"\n    :has-unreads=\"hasUnreads\"\n    :unread-mention-count=\"unreadMentionCount\"\n    :unread-count-tooltip=\"unreadCountTooltip\"\n    :selected=\"selected\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    v-on=\"contactRowListeners\"\n  >\n    <template #left>\n      <dt-icon-users\n        size=\"300\"\n      />\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtIconUsers } from '@dialpad/dialtone-icons/vue3';\nimport { safeConcatStrings, extractVueListeners } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeGroupRow',\n\n  components: {\n    DtIconUsers,\n    DtRecipeGeneralRow,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * Names of the group members\n     */\n    names: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    groupCount () {\n      return this.names.split(',').length;\n    },\n\n    messageCount () {\n      return isNaN(this.unreadCount)\n        ? this.unreadCount\n        : Number(this.unreadCount);\n    },\n\n    mentionCount () {\n      return isNaN(this.unreadMentionCount)\n        ? this.unreadMentionCount\n        : Number(this.unreadMentionCount);\n    },\n\n    unreadCountTooltip () {\n      return safeConcatStrings([\n        this.unreadCount && this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: this.messageCount }),\n        this.unreadMentionCount && this.i18n.$t('DIALTONE_UNREAD_MENTION_COUNT_TEXT', { unreadCount: this.mentionCount }),\n      ]);\n    },\n\n    typingTooltip () {\n      return this.isTyping && this.i18n.$t('DIALTONE_TYPING_TEXT');\n    },\n\n    ariaLabel () {\n      return safeConcatStrings([\n        this.typingTooltip,\n        this.i18n.$t('DIALTONE_GROUP_ROW_GROUP_COUNT_TEXT', { count: this.groupCount }),\n        this.names,\n        this.unreadCountTooltip,\n      ]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;AA2BA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV;EACA,oBAAA;EACD;CAED,cAAc;CAEd,OAAO;EAKL,OAAO;GACL,MAAM;GACN,UAAU;GACX;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,oBAAoB;GAClB,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,MAAM,IAAI,GAAsB,EACjC;;CAGH,UAAU;EACR,aAAc;AACZ,UAAO,KAAK,MAAM,MAAM,IAAI,CAAC;;EAG/B,eAAgB;AACd,UAAO,MAAM,KAAK,YAAW,GACzB,KAAK,cACL,OAAO,KAAK,YAAY;;EAG9B,eAAgB;AACd,UAAO,MAAM,KAAK,mBAAkB,GAChC,KAAK,qBACL,OAAO,KAAK,mBAAmB;;EAGrC,qBAAsB;AACpB,UAAO,EAAkB,CACvB,KAAK,eAAe,KAAK,KAAK,GAAG,sCAAsC,EAAE,aAAa,KAAK,cAAc,CAAC,EAC1G,KAAK,sBAAsB,KAAK,KAAK,GAAG,sCAAsC,EAAE,aAAa,KAAK,cAAc,CAAC,CAClH,CAAC;;EAGJ,gBAAiB;AACf,UAAO,KAAK,YAAY,KAAK,KAAK,GAAG,uBAAuB;;EAG9D,YAAa;AACX,UAAO,EAAkB;IACvB,KAAK;IACL,KAAK,KAAK,GAAG,uCAAuC,EAAE,OAAO,KAAK,YAAY,CAAC;IAC/E,KAAK;IACL,KAAK;IACN,CAAC;;EAGJ,sBAAuB;AACrB,UAAO,EAAoB,KAAK,OAAO;;EAE1C;CACF;;;aAxIC,EAiBwB,GAjBxB,EAiBwB;EAhBrB,aAAa,EAAA;EACb,cAAY,EAAA;EACZ,gBAAc,EAAA;EACd,eAAa,EAAA;EACb,wBAAsB,EAAA;EACtB,wBAAsB,EAAA;EACtB,UAAU,EAAA;EACV,aAAW,EAAA;IACJ,EAAA,QACR,EAA0B,EAApB,oBAAmB,CAAA,EAAA;EAEd,MAAI,QAGX,CAFF,EAEE,GAAA,EADA,MAAK,OAAK,CAAA,CAAA,CAAA"}
+{"version":3,"file":"group-row.js","names":[],"sources":["../../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :description=\"names\"\n    :aria-label=\"ariaLabel\"\n    :unread-count=\"unreadCount\"\n    :has-unreads=\"hasUnreads\"\n    :unread-mention-count=\"unreadMentionCount\"\n    :unread-count-tooltip=\"unreadCountTooltip\"\n    :selected=\"selected\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    v-on=\"contactRowListeners\"\n  >\n    <template #start>\n      <dt-icon-users\n        size=\"300\"\n      />\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtIconUsers } from '@dialpad/dialtone-icons/vue';\nimport { safeConcatStrings, extractVueListeners } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeGroupRow',\n\n  components: {\n    DtIconUsers,\n    DtRecipeGeneralRow,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * Names of the group members\n     */\n    names: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    groupCount () {\n      return this.names.split(',').length;\n    },\n\n    messageCount () {\n      return isNaN(this.unreadCount)\n        ? this.unreadCount\n        : Number(this.unreadCount);\n    },\n\n    mentionCount () {\n      return isNaN(this.unreadMentionCount)\n        ? this.unreadMentionCount\n        : Number(this.unreadMentionCount);\n    },\n\n    unreadCountTooltip () {\n      return safeConcatStrings([\n        this.unreadCount && this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: this.messageCount }),\n        this.unreadMentionCount && this.i18n.$t('DIALTONE_UNREAD_MENTION_COUNT_TEXT', { unreadCount: this.mentionCount }),\n      ]);\n    },\n\n    typingTooltip () {\n      return this.isTyping && this.i18n.$t('DIALTONE_TYPING_TEXT');\n    },\n\n    ariaLabel () {\n      return safeConcatStrings([\n        this.typingTooltip,\n        this.i18n.$t('DIALTONE_GROUP_ROW_GROUP_COUNT_TEXT', { count: this.groupCount }),\n        this.names,\n        this.unreadCountTooltip,\n      ]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;AA2BA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV;EACA,oBAAA;EACD;CAED,cAAc;CAEd,OAAO;EAKL,OAAO;GACL,MAAM;GACN,UAAU;GACX;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,oBAAoB;GAClB,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,MAAM,IAAI,GAAsB,EACjC;;CAGH,UAAU;EACR,aAAc;AACZ,UAAO,KAAK,MAAM,MAAM,IAAI,CAAC;;EAG/B,eAAgB;AACd,UAAO,MAAM,KAAK,YAAW,GACzB,KAAK,cACL,OAAO,KAAK,YAAY;;EAG9B,eAAgB;AACd,UAAO,MAAM,KAAK,mBAAkB,GAChC,KAAK,qBACL,OAAO,KAAK,mBAAmB;;EAGrC,qBAAsB;AACpB,UAAO,EAAkB,CACvB,KAAK,eAAe,KAAK,KAAK,GAAG,sCAAsC,EAAE,aAAa,KAAK,cAAc,CAAC,EAC1G,KAAK,sBAAsB,KAAK,KAAK,GAAG,sCAAsC,EAAE,aAAa,KAAK,cAAc,CAAC,CAClH,CAAC;;EAGJ,gBAAiB;AACf,UAAO,KAAK,YAAY,KAAK,KAAK,GAAG,uBAAuB;;EAG9D,YAAa;AACX,UAAO,EAAkB;IACvB,KAAK;IACL,KAAK,KAAK,GAAG,uCAAuC,EAAE,OAAO,KAAK,YAAY,CAAC;IAC/E,KAAK;IACL,KAAK;IACN,CAAC;;EAGJ,sBAAuB;AACrB,UAAO,EAAoB,KAAK,OAAO;;EAE1C;CACF;;;aAxIC,EAiBwB,GAjBxB,EAiBwB;EAhBrB,aAAa,EAAA;EACb,cAAY,EAAA;EACZ,gBAAc,EAAA;EACd,eAAa,EAAA;EACb,wBAAsB,EAAA;EACtB,wBAAsB,EAAA;EACtB,UAAU,EAAA;EACV,aAAW,EAAA;IACJ,EAAA,QACR,EAA0B,EAApB,oBAAmB,CAAA,EAAA;EAEd,OAAK,QAGZ,CAFF,EAEE,GAAA,EADA,MAAK,OAAK,CAAA,CAAA,CAAA"}

package/dist/lib/grouped-chip/grouped-chip.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../chip/chip.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtRecipeGroupedChip`,components:{DtChip:n.default},data(){return{hasSlotContent:e.hasSlotContent}}},a={"data-qa":`dt-recipe-grouped-chip`,class:`d-recipe-grouped-chip`},o={key:0,"data-qa":`left-grouped-chip-icon`},s={key:0,"data-qa":`left-grouped-chip-content`},c={key:0,"data-qa":`right-grouped-chip-icon`},l={key:0,"data-qa":`right-grouped-chip-content`};function u(e,t,n,i,u,d){let f=(0,r.resolveComponent)(`dt-chip`);return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,a,[(0,r.createVNode)(f,{"hide-close":!0,interactive:!1,size:`xs`,"grouped-chip":!0,class:`d-recipe-grouped-chip__content d-recipe-grouped-chip__content-left`},(0,r.createSlots)({default:(0,r.withCtx)(()=>[u.hasSlotContent(e.$slots.leftContent)?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,s,[(0,r.renderSlot)(e.$slots,`leftContent`)])):(0,r.createCommentVNode)(``,!0)]),_:2},[u.hasSlotContent(e.$slots.leftIcon)?{name:`icon`,fn:(0,r.withCtx)(()=>[u.hasSlotContent(e.$slots.leftIcon)?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,o,[(0,r.renderSlot)(e.$slots,`leftIcon`)])):(0,r.createCommentVNode)(``,!0)]),key:`0`}:void 0]),1024),(0,r.createVNode)(f,{"hide-close":!0,interactive:!1,size:`xs`,"grouped-chip":!0,class:`d-recipe-grouped-chip__content d-recipe-grouped-chip__content-right`},{icon:(0,r.withCtx)(()=>[u.hasSlotContent(e.$slots.rightIcon)?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,c,[(0,r.renderSlot)(e.$slots,`rightIcon`)])):(0,r.createCommentVNode)(``,!0)]),default:(0,r.withCtx)(()=>[u.hasSlotContent(e.$slots.rightContent)?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,l,[(0,r.renderSlot)(e.$slots,`rightContent`)])):(0,r.createCommentVNode)(``,!0)]),_:3})])}var d=t.t(i,[[`render`,u]]);exports.default=d;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../chip/chip.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtRecipeGroupedChip`,components:{DtChip:n.default},data(){return{hasSlotContent:e.hasSlotContent}}},a={"data-qa":`dt-recipe-grouped-chip`,class:`d-recipe-grouped-chip`},o={key:0,"data-qa":`left-grouped-chip-icon`},s={key:0,"data-qa":`left-grouped-chip-content`},c={key:0,"data-qa":`right-grouped-chip-icon`},l={key:0,"data-qa":`right-grouped-chip-content`};function u(e,t,n,i,u,d){let f=(0,r.resolveComponent)(`dt-chip`);return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,a,[(0,r.createVNode)(f,{"show-close":!1,interactive:!1,size:100,"grouped-chip":!0,class:`d-recipe-grouped-chip__content d-recipe-grouped-chip__content-left`},(0,r.createSlots)({default:(0,r.withCtx)(()=>[u.hasSlotContent(e.$slots.startContent)||u.hasSlotContent(e.$slots.leftContent)?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,s,[e.$slots.startContent?(0,r.renderSlot)(e.$slots,`startContent`,{key:0}):(0,r.renderSlot)(e.$slots,`leftContent`,{key:1})])):(0,r.createCommentVNode)(``,!0)]),_:2},[u.hasSlotContent(e.$slots.startIcon)||u.hasSlotContent(e.$slots.leftIcon)?{name:`icon`,fn:(0,r.withCtx)(()=>[u.hasSlotContent(e.$slots.startIcon)||u.hasSlotContent(e.$slots.leftIcon)?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,o,[e.$slots.startIcon?(0,r.renderSlot)(e.$slots,`startIcon`,{key:0}):(0,r.renderSlot)(e.$slots,`leftIcon`,{key:1})])):(0,r.createCommentVNode)(``,!0)]),key:`0`}:void 0]),1024),(0,r.createVNode)(f,{"show-close":!1,interactive:!1,size:100,"grouped-chip":!0,class:`d-recipe-grouped-chip__content d-recipe-grouped-chip__content-right`},{icon:(0,r.withCtx)(()=>[u.hasSlotContent(e.$slots.endIcon)||u.hasSlotContent(e.$slots.rightIcon)?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,c,[e.$slots.endIcon?(0,r.renderSlot)(e.$slots,`endIcon`,{key:0}):(0,r.renderSlot)(e.$slots,`rightIcon`,{key:1})])):(0,r.createCommentVNode)(``,!0)]),default:(0,r.withCtx)(()=>[u.hasSlotContent(e.$slots.endContent)||u.hasSlotContent(e.$slots.rightContent)?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,l,[e.$slots.endContent?(0,r.renderSlot)(e.$slots,`endContent`,{key:0}):(0,r.renderSlot)(e.$slots,`rightContent`,{key:1})])):(0,r.createCommentVNode)(``,!0)]),_:3})])}var d=t.t(i,[[`render`,u]]);exports.default=d;
 //# sourceMappingURL=grouped-chip.cjs.map

package/dist/lib/grouped-chip/grouped-chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"grouped-chip.cjs","names":[],"sources":["../../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-grouped-chip\"\n    class=\"d-recipe-grouped-chip\"\n  >\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-left\"\n    >\n      <template\n        v-if=\"hasSlotContent($slots.leftIcon)\"\n        #icon\n      >\n        <!-- @slot Slot for left chip icon information -->\n        <div\n          v-if=\"hasSlotContent($slots.leftIcon)\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <slot name=\"leftIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.leftContent)\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for left chip content information -->\n          <slot name=\"leftContent\" />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- Right side split chip -->\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"hasSlotContent($slots.rightIcon)\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.rightContent)\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightContent\" />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/chip';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"mappings":"gSAqEA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,sBAEN,WAAY,CACV,OAAA,EAAA,QACD,CAED,MAAQ,CACN,MAAO,CACL,eAAA,EAAA,eACD,EAEJ,IAhFG,UAAQ,yBACR,MAAM,kCAgBA,UAAQ,mCAQR,UAAQ,sCAmBR,UAAQ,oCASR,UAAQ,+IAOV,MA7DN,EA6DM,EAAA,EAAA,EAAA,aA7BM,EAAA,CA3BP,aAAY,GACZ,YAAa,GACd,KAAK,KACJ,eAAc,GACf,MAAM,yFAcK,SAAA,EAAA,EAAA,aAOH,CALE,EAAA,eAAe,EAAA,OAAO,YAAW,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAKnC,MANN,EAMM,EAAA,EAAA,EAAA,YADuB,EAAA,OAAA,cAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,OAjBvB,EAAA,eAAe,EAAA,OAAO,SAAQ,CAAA,MACnC,4BAQK,CAJE,EAAA,eAAe,EAAA,OAAO,SAAQ,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAIhC,MALN,EAKM,EAAA,EAAA,EAAA,YADoB,EAAA,OAAA,WAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,2CAwCpB,EAAA,CAxBP,aAAY,GACZ,YAAa,GACd,KAAK,KACJ,eAAc,GACf,MAAM,wEAEK,MAAA,EAAA,EAAA,aAOH,CALE,EAAA,eAAe,EAAA,OAAO,UAAS,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAKjC,MANN,EAMM,EAAA,EAAA,EAAA,YADqB,EAAA,OAAA,YAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,CAGlB,SAAA,EAAA,EAAA,aAOH,CALE,EAAA,eAAe,EAAA,OAAO,aAAY,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAKpC,MANN,EAMM,EAAA,EAAA,EAAA,YADwB,EAAA,OAAA,eAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"grouped-chip.cjs","names":[],"sources":["../../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-grouped-chip\"\n    class=\"d-recipe-grouped-chip\"\n  >\n    <dt-chip\n      :show-close=\"false\"\n      :interactive=\"false\"\n      :size=\"100\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-left\"\n    >\n      <template\n        v-if=\"hasSlotContent($slots.startIcon) || hasSlotContent($slots.leftIcon)\"\n        #icon\n      >\n        <div\n          v-if=\"hasSlotContent($slots.startIcon) || hasSlotContent($slots.leftIcon)\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for start chip icon information -->\n          <slot\n            v-if=\"$slots.startIcon\"\n            name=\"startIcon\"\n          />\n          <!-- @slot @deprecated Use startIcon -->\n          <slot\n            v-else\n            name=\"leftIcon\"\n          />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.startContent) || hasSlotContent($slots.leftContent)\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for start chip content information -->\n          <slot\n            v-if=\"$slots.startContent\"\n            name=\"startContent\"\n          />\n          <!-- @slot @deprecated Use startContent -->\n          <slot\n            v-else\n            name=\"leftContent\"\n          />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- End side split chip -->\n    <dt-chip\n      :show-close=\"false\"\n      :interactive=\"false\"\n      :size=\"100\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"hasSlotContent($slots.endIcon) || hasSlotContent($slots.rightIcon)\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for end chip icon information -->\n          <slot\n            v-if=\"$slots.endIcon\"\n            name=\"endIcon\"\n          />\n          <!-- @slot @deprecated Use endIcon -->\n          <slot\n            v-else\n            name=\"rightIcon\"\n          />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.endContent) || hasSlotContent($slots.rightContent)\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for end chip content information -->\n          <slot\n            v-if=\"$slots.endContent\"\n            name=\"endContent\"\n          />\n          <!-- @slot @deprecated Use endContent -->\n          <slot\n            v-else\n            name=\"rightContent\"\n          />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/Chip';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"mappings":"gSAqGA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,sBAEN,WAAY,CACV,OAAA,EAAA,QACD,CAED,MAAQ,CACN,MAAO,CACL,eAAA,EAAA,eACD,EAEJ,IAhHG,UAAQ,yBACR,MAAM,kCAeA,UAAQ,mCAiBR,UAAQ,sCA2BR,UAAQ,oCAiBR,UAAQ,+IAeV,MA7FN,EA6FM,EAAA,EAAA,EAAA,aA7CM,EAAA,CA3CP,aAAY,GACZ,YAAa,GACb,KAAM,IACN,eAAc,GACf,MAAM,yFAsBK,SAAA,EAAA,EAAA,aAeH,CAbE,EAAA,eAAe,EAAA,OAAO,aAAY,EAAK,EAAA,eAAe,EAAA,OAAO,YAAW,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAa1E,MAdN,EAcM,CARI,EAAA,OAAO,cAAA,EAAA,EAAA,YAEb,EAAA,OAAA,eAAA,CAAA,IAAA,EAAA,CAAA,EAAA,EAAA,EAAA,YAKA,EAAA,OAAA,cAAA,CAAA,IAAA,EAAA,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,OAjCE,EAAA,eAAe,EAAA,OAAO,UAAS,EAAK,EAAA,eAAe,EAAA,OAAO,SAAQ,CAAA,MACvE,4BAgBK,CAbE,EAAA,eAAe,EAAA,OAAO,UAAS,EAAK,EAAA,eAAe,EAAA,OAAO,SAAQ,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAapE,MAdN,EAcM,CARI,EAAA,OAAO,WAAA,EAAA,EAAA,YAEb,EAAA,OAAA,YAAA,CAAA,IAAA,EAAA,CAAA,EAAA,EAAA,EAAA,YAKA,EAAA,OAAA,WAAA,CAAA,IAAA,EAAA,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,2CAgEE,EAAA,CAxCP,aAAY,GACZ,YAAa,GACb,KAAM,IACN,eAAc,GACf,MAAM,wEAEK,MAAA,EAAA,EAAA,aAeH,CAbE,EAAA,eAAe,EAAA,OAAO,QAAO,EAAK,EAAA,eAAe,EAAA,OAAO,UAAS,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAanE,MAdN,EAcM,CARI,EAAA,OAAO,SAAA,EAAA,EAAA,YAEb,EAAA,OAAA,UAAA,CAAA,IAAA,EAAA,CAAA,EAAA,EAAA,EAAA,YAKA,EAAA,OAAA,YAAA,CAAA,IAAA,EAAA,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,CAGK,SAAA,EAAA,EAAA,aAeH,CAbE,EAAA,eAAe,EAAA,OAAO,WAAU,EAAK,EAAA,eAAe,EAAA,OAAO,aAAY,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAazE,MAdN,EAcM,CARI,EAAA,OAAO,YAAA,EAAA,EAAA,YAEb,EAAA,OAAA,aAAA,CAAA,IAAA,EAAA,CAAA,EAAA,EAAA,EAAA,YAKA,EAAA,OAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA"}

package/dist/lib/grouped-chip/grouped-chip.js

@@ -29,27 +29,27 @@ var d = {
 function _(e, t, n, d, _, v) {
 	let y = l("dt-chip");
 	return s(), i("div", f, [o(y, {
-		"hide-close": !0,
+		"show-close": !1,
 		interactive: !1,
-		size: "xs",
+		size: 100,
 		"grouped-chip": !0,
 		class: "d-recipe-grouped-chip__content d-recipe-grouped-chip__content-left"
 	}, a({
-		default: u(() => [_.hasSlotContent(e.$slots.leftContent) ? (s(), i("div", m, [c(e.$slots, "leftContent")])) : r("", !0)]),
+		default: u(() => [_.hasSlotContent(e.$slots.startContent) || _.hasSlotContent(e.$slots.leftContent) ? (s(), i("div", m, [e.$slots.startContent ? c(e.$slots, "startContent", { key: 0 }) : c(e.$slots, "leftContent", { key: 1 })])) : r("", !0)]),
 		_: 2
-	}, [_.hasSlotContent(e.$slots.leftIcon) ? {
+	}, [_.hasSlotContent(e.$slots.startIcon) || _.hasSlotContent(e.$slots.leftIcon) ? {
 		name: "icon",
-		fn: u(() => [_.hasSlotContent(e.$slots.leftIcon) ? (s(), i("div", p, [c(e.$slots, "leftIcon")])) : r("", !0)]),
+		fn: u(() => [_.hasSlotContent(e.$slots.startIcon) || _.hasSlotContent(e.$slots.leftIcon) ? (s(), i("div", p, [e.$slots.startIcon ? c(e.$slots, "startIcon", { key: 0 }) : c(e.$slots, "leftIcon", { key: 1 })])) : r("", !0)]),
 		key: "0"
 	} : void 0]), 1024), o(y, {
-		"hide-close": !0,
+		"show-close": !1,
 		interactive: !1,
-		size: "xs",
+		size: 100,
 		"grouped-chip": !0,
 		class: "d-recipe-grouped-chip__content d-recipe-grouped-chip__content-right"
 	}, {
-		icon: u(() => [_.hasSlotContent(e.$slots.rightIcon) ? (s(), i("div", h, [c(e.$slots, "rightIcon")])) : r("", !0)]),
-		default: u(() => [_.hasSlotContent(e.$slots.rightContent) ? (s(), i("div", g, [c(e.$slots, "rightContent")])) : r("", !0)]),
+		icon: u(() => [_.hasSlotContent(e.$slots.endIcon) || _.hasSlotContent(e.$slots.rightIcon) ? (s(), i("div", h, [e.$slots.endIcon ? c(e.$slots, "endIcon", { key: 0 }) : c(e.$slots, "rightIcon", { key: 1 })])) : r("", !0)]),
+		default: u(() => [_.hasSlotContent(e.$slots.endContent) || _.hasSlotContent(e.$slots.rightContent) ? (s(), i("div", g, [e.$slots.endContent ? c(e.$slots, "endContent", { key: 0 }) : c(e.$slots, "rightContent", { key: 1 })])) : r("", !0)]),
 		_: 3
 	})]);
 }

package/dist/lib/grouped-chip/grouped-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"grouped-chip.js","names":[],"sources":["../../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-grouped-chip\"\n    class=\"d-recipe-grouped-chip\"\n  >\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-left\"\n    >\n      <template\n        v-if=\"hasSlotContent($slots.leftIcon)\"\n        #icon\n      >\n        <!-- @slot Slot for left chip icon information -->\n        <div\n          v-if=\"hasSlotContent($slots.leftIcon)\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <slot name=\"leftIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.leftContent)\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for left chip content information -->\n          <slot name=\"leftContent\" />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- Right side split chip -->\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"hasSlotContent($slots.rightIcon)\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.rightContent)\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightContent\" />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/chip';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"mappings":";;;;;AAqEA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY,EACV,QAAA,GACD;CAED,OAAQ;AACN,SAAO,EACL,mBACD;;CAEJ;CAhFG,WAAQ;CACR,OAAM;;;CAgBA,WAAQ;;;CAQR,WAAQ;;;CAmBR,WAAQ;;;CASR,WAAQ;;;;aAtDhB,EA6DM,OA7DN,GA6DM,CAzDJ,EA4BU,GAAA;EA3BP,cAAY;EACZ,aAAa;EACd,MAAK;EACJ,gBAAc;EACf,OAAM;;EAcK,SAAO,QAOV,CALE,EAAA,eAAe,EAAA,OAAO,YAAW,IAAA,GAAA,EADzC,EAMM,OANN,GAMM,CADJ,EAA2B,EAAA,QAAA,cAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;;KAjBvB,EAAA,eAAe,EAAA,OAAO,SAAQ,GAAA;QACnC;cAQK,CAJE,EAAA,eAAe,EAAA,OAAO,SAAQ,IAAA,GAAA,EADtC,EAKM,OALN,GAKM,CADJ,EAAwB,EAAA,QAAA,WAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;;sBAe9B,EAyBU,GAAA;EAxBP,cAAY;EACZ,aAAa;EACd,MAAK;EACJ,gBAAc;EACf,OAAM;;EAEK,MAAI,QAOP,CALE,EAAA,eAAe,EAAA,OAAO,UAAS,IAAA,GAAA,EADvC,EAMM,OANN,GAMM,CADJ,EAAyB,EAAA,QAAA,YAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;EAGlB,SAAO,QAOV,CALE,EAAA,eAAe,EAAA,OAAO,aAAY,IAAA,GAAA,EAD1C,EAMM,OANN,GAMM,CADJ,EAA4B,EAAA,QAAA,eAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"grouped-chip.js","names":[],"sources":["../../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-grouped-chip\"\n    class=\"d-recipe-grouped-chip\"\n  >\n    <dt-chip\n      :show-close=\"false\"\n      :interactive=\"false\"\n      :size=\"100\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-left\"\n    >\n      <template\n        v-if=\"hasSlotContent($slots.startIcon) || hasSlotContent($slots.leftIcon)\"\n        #icon\n      >\n        <div\n          v-if=\"hasSlotContent($slots.startIcon) || hasSlotContent($slots.leftIcon)\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for start chip icon information -->\n          <slot\n            v-if=\"$slots.startIcon\"\n            name=\"startIcon\"\n          />\n          <!-- @slot @deprecated Use startIcon -->\n          <slot\n            v-else\n            name=\"leftIcon\"\n          />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.startContent) || hasSlotContent($slots.leftContent)\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for start chip content information -->\n          <slot\n            v-if=\"$slots.startContent\"\n            name=\"startContent\"\n          />\n          <!-- @slot @deprecated Use startContent -->\n          <slot\n            v-else\n            name=\"leftContent\"\n          />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- End side split chip -->\n    <dt-chip\n      :show-close=\"false\"\n      :interactive=\"false\"\n      :size=\"100\"\n      :grouped-chip=\"true\"\n      class=\"d-recipe-grouped-chip__content d-recipe-grouped-chip__content-right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"hasSlotContent($slots.endIcon) || hasSlotContent($slots.rightIcon)\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for end chip icon information -->\n          <slot\n            v-if=\"$slots.endIcon\"\n            name=\"endIcon\"\n          />\n          <!-- @slot @deprecated Use endIcon -->\n          <slot\n            v-else\n            name=\"rightIcon\"\n          />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.endContent) || hasSlotContent($slots.rightContent)\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for end chip content information -->\n          <slot\n            v-if=\"$slots.endContent\"\n            name=\"endContent\"\n          />\n          <!-- @slot @deprecated Use endContent -->\n          <slot\n            v-else\n            name=\"rightContent\"\n          />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/Chip';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"mappings":";;;;;AAqGA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY,EACV,QAAA,GACD;CAED,OAAQ;AACN,SAAO,EACL,mBACD;;CAEJ;CAhHG,WAAQ;CACR,OAAM;;;CAeA,WAAQ;;;CAiBR,WAAQ;;;CA2BR,WAAQ;;;CAiBR,WAAQ;;;;aA9EhB,EA6FM,OA7FN,GA6FM,CAzFJ,EA4CU,GAAA;EA3CP,cAAY;EACZ,aAAa;EACb,MAAM;EACN,gBAAc;EACf,OAAM;;EAsBK,SAAO,QAeV,CAbE,EAAA,eAAe,EAAA,OAAO,aAAY,IAAK,EAAA,eAAe,EAAA,OAAO,YAAW,IAAA,GAAA,EADhF,EAcM,OAdN,GAcM,CARI,EAAA,OAAO,eADf,EAGE,EAAA,QAAA,gBAAA,EAAA,KAAA,GAAA,CAAA,GAEF,EAGE,EAAA,QAAA,eAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;;KAjCE,EAAA,eAAe,EAAA,OAAO,UAAS,IAAK,EAAA,eAAe,EAAA,OAAO,SAAQ,GAAA;QACvE;cAgBK,CAbE,EAAA,eAAe,EAAA,OAAO,UAAS,IAAK,EAAA,eAAe,EAAA,OAAO,SAAQ,IAAA,GAAA,EAD1E,EAcM,OAdN,GAcM,CARI,EAAA,OAAO,YADf,EAGE,EAAA,QAAA,aAAA,EAAA,KAAA,GAAA,CAAA,GAEF,EAGE,EAAA,QAAA,YAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;;sBAuBR,EAyCU,GAAA;EAxCP,cAAY;EACZ,aAAa;EACb,MAAM;EACN,gBAAc;EACf,OAAM;;EAEK,MAAI,QAeP,CAbE,EAAA,eAAe,EAAA,OAAO,QAAO,IAAK,EAAA,eAAe,EAAA,OAAO,UAAS,IAAA,GAAA,EADzE,EAcM,OAdN,GAcM,CARI,EAAA,OAAO,UADf,EAGE,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,GAEF,EAGE,EAAA,QAAA,aAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;EAGK,SAAO,QAeV,CAbE,EAAA,eAAe,EAAA,OAAO,WAAU,IAAK,EAAA,eAAe,EAAA,OAAO,aAAY,IAAA,GAAA,EAD/E,EAcM,OAdN,GAcM,CARI,EAAA,OAAO,aADf,EAGE,EAAA,QAAA,cAAA,EAAA,KAAA,GAAA,CAAA,GAEF,EAGE,EAAA,QAAA,gBAAA,EAAA,KAAA,GAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/lib/hovercard/hovercard.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../tooltip/tooltip-constants.cjs`),n=require(`../popover/popover-constants.cjs`),r=require(`../popover/popover.cjs`);let i=require(`vue`);var a={__name:`hovercard`,props:{transition:{type:Boolean,default:!1},open:{type:Boolean,default:null},fallbackPlacements:{type:Array,default:()=>[`auto`]},placement:{type:String,default:`top-start`,validator(e){return t.TOOLTIP_DIRECTIONS.includes(e)}},padding:{type:String,default:`large`,validator:e=>Object.keys(n.POPOVER_PADDING_CLASSES).some(t=>t===e)},offset:{type:Array,default:()=>[0,16]},id:{type:String,default(){return e.getUniqueString()}},headerClass:{type:[String,Array,Object],default:``},footerClass:{type:[String,Array,Object],default:``},dialogClass:{type:[String,Array,Object],default:``},contentClass:{type:[String,Array,Object],default:``},appendTo:{type:[HTMLElement,String],default:`body`,validator:e=>n.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},enterDelay:{type:Number,default:300},leaveDelay:{type:Number,default:300},externalAnchorElement:{type:HTMLElement,default:null}},emits:[`opened`],setup(e,{expose:t}){let n=e,a=(0,i.ref)(n.open),o=(0,i.ref)(!1),s=(0,i.ref)(!1),c=(0,i.ref)(null),l=(0,i.ref)(null),u=(0,i.ref)(null),d=(0,i.ref)(null),f=(0,i.ref)(null);(0,i.onMounted)(()=>{(0,i.nextTick)(()=>{u.value=f.value?.$refs?.anchor?.firstElementChild,d.value=new MutationObserver(()=>{u.value&&!u.value.isConnected&&(a.value=!1)}),d.value.observe(document.body,{childList:!0,subtree:!0})})}),(0,i.onBeforeUnmount)(()=>{d.value&&d.value.disconnect(),clearTimeout(c),clearTimeout(l)}),(0,i.watch)(()=>n.open,e=>{a.value=e},{immediate:!0}),t({show:h,hide:g});function p(){n.open===null&&(clearTimeout(l.value),c.value=setTimeout(()=>{a.value=!0},n.enterDelay))}function m(){n.open===null&&(clearTimeout(c.value),l.value=setTimeout(()=>{a.value=!1},n.leaveDelay))}function h(){s.value=!0,p()}function g(){s.value=!1,!o.value&&m()}function _(){o.value=!0,p()}function v(){o.value=!1,s.value||m()}return(t,n)=>((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(r.default),{id:e.id,ref_key:`popover`,ref:f,open:a.value,placement:e.placement,"content-class":e.contentClass,"dialog-class":e.dialogClass,"fallback-placements":e.fallbackPlacements,padding:e.padding,transition:e.transition?`fade`:null,offset:e.offset,modal:!1,"initial-focus-element":`none`,"header-class":e.headerClass,"footer-class":e.footerClass,"append-to":e.appendTo,"external-anchor-element":e.externalAnchorElement,"data-qa":`dt-hovercard`,"enter-delay":e.enterDelay,"leave-delay":e.leaveDelay,onOpened:n[0]||(n[0]=e=>t.$emit(`opened`,e)),onMouseenterPopover:h,onMouseleavePopover:g,onMouseenterPopoverAnchor:h,onMouseleavePopoverAnchor:g},{anchor:(0,i.withCtx)(({attrs:e})=>[(0,i.renderSlot)(t.$slots,`anchor`,(0,i.normalizeProps)((0,i.guardReactiveProps)(e)))]),content:(0,i.withCtx)(()=>[(0,i.createElementVNode)(`div`,{onFocusin:_,onFocusout:v},[(0,i.renderSlot)(t.$slots,`content`)],32)]),headerContent:(0,i.withCtx)(()=>[(0,i.renderSlot)(t.$slots,`headerContent`)]),footerContent:(0,i.withCtx)(()=>[(0,i.renderSlot)(t.$slots,`footerContent`)]),_:3},8,[`id`,`open`,`placement`,`content-class`,`dialog-class`,`fallback-placements`,`padding`,`transition`,`offset`,`header-class`,`footer-class`,`append-to`,`external-anchor-element`,`enter-delay`,`leave-delay`]))}};exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../mode_constants-CzYJW9ua.cjs`),n=require(`../tooltip/tooltip-constants.cjs`),r=require(`../popover/popover-constants.cjs`),i=require(`../popover/popover.cjs`);let a=require(`vue`);var o=Object.assign({name:`DtHovercard`},{__name:`Hovercard`,props:{contentMode:t.t,transition:{type:Boolean,default:!1},open:{type:Boolean,default:null},fallbackPlacements:{type:Array,default:()=>[`auto`]},placement:{type:String,default:`top-start`,validator(e){return n.TOOLTIP_DIRECTIONS.includes(e)}},padding:{type:String,default:`large`,validator:e=>Object.keys(r.POPOVER_PADDING_CLASSES).some(t=>t===e)},offset:{type:Array,default:()=>[0,16]},id:{type:String,default(){return e.getUniqueString()}},anchorClass:{type:[String,Array,Object],default:``},headerClass:{type:[String,Array,Object],default:``},footerClass:{type:[String,Array,Object],default:``},dialogClass:{type:[String,Array,Object],default:``},contentClass:{type:[String,Array,Object],default:``},appendTo:{type:[HTMLElement,String],default:`body`,validator:e=>r.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},enterDelay:{type:Number,default:300},leaveDelay:{type:Number,default:300},externalAnchorElement:{type:HTMLElement,default:null}},emits:[`opened`],setup(e,{expose:t}){let n=e,r=(0,a.ref)(n.open),o=(0,a.ref)(!1),s=(0,a.ref)(!1),c=(0,a.ref)(null),l=(0,a.ref)(null),u=(0,a.ref)(null),d=(0,a.ref)(null),f=(0,a.ref)(null);(0,a.onMounted)(()=>{(0,a.nextTick)(()=>{u.value=f.value?.$refs?.anchor?.firstElementChild,d.value=new MutationObserver(()=>{u.value&&!u.value.isConnected&&(r.value=!1)}),d.value.observe(document.body,{childList:!0,subtree:!0})})}),(0,a.onBeforeUnmount)(()=>{d.value&&d.value.disconnect(),clearTimeout(c),clearTimeout(l)}),(0,a.watch)(()=>n.open,e=>{r.value=e},{immediate:!0}),t({show:h,hide:g});function p(){n.open===null&&(clearTimeout(l.value),c.value=setTimeout(()=>{r.value=!0},n.enterDelay))}function m(){n.open===null&&(clearTimeout(c.value),l.value=setTimeout(()=>{r.value=!1},n.leaveDelay))}function h(){s.value=!0,p()}function g(){s.value=!1,!o.value&&m()}function _(){o.value=!0,p()}function v(){o.value=!1,s.value||m()}return(t,n)=>((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(i.default),{id:e.id,ref_key:`popover`,ref:f,open:r.value,placement:e.placement,"content-class":e.contentClass,"content-mode":e.contentMode,"dialog-class":e.dialogClass,"fallback-placements":e.fallbackPlacements,padding:e.padding,transition:e.transition?`fade`:null,offset:e.offset,modal:!1,"initial-focus-element":`none`,"header-class":e.headerClass,"footer-class":e.footerClass,"append-to":e.appendTo,"anchor-class":e.anchorClass,"external-anchor-element":e.externalAnchorElement,"data-qa":`dt-hovercard`,"enter-delay":e.enterDelay,"leave-delay":e.leaveDelay,onOpened:n[0]||(n[0]=e=>t.$emit(`opened`,e)),onMouseenterPopover:h,onMouseleavePopover:g,onMouseenterPopoverAnchor:h,onMouseleavePopoverAnchor:g},{anchor:(0,a.withCtx)(({attrs:e})=>[(0,a.renderSlot)(t.$slots,`anchor`,(0,a.normalizeProps)((0,a.guardReactiveProps)(e)))]),content:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,{onFocusin:_,onFocusout:v},[(0,a.renderSlot)(t.$slots,`content`)],32)]),headerContent:(0,a.withCtx)(()=>[(0,a.renderSlot)(t.$slots,`headerContent`)]),footerContent:(0,a.withCtx)(()=>[(0,a.renderSlot)(t.$slots,`footerContent`)]),_:3},8,[`id`,`open`,`placement`,`content-class`,`content-mode`,`dialog-class`,`fallback-placements`,`padding`,`transition`,`offset`,`header-class`,`footer-class`,`append-to`,`anchor-class`,`external-anchor-element`,`enter-delay`,`leave-delay`]))}});exports.default=o;
 //# sourceMappingURL=hovercard.cjs.map

package/dist/lib/hovercard/hovercard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"hovercard.cjs","names":["$emit"],"sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-popover\n    :id=\"id\"\n    ref=\"popover\"\n    :open=\"hovercardOpen\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :dialog-class=\"dialogClass\"\n    :fallback-placements=\"fallbackPlacements\"\n    :padding=\"padding\"\n    :transition=\"transition ? 'fade' : null\"\n    :offset=\"offset\"\n    :modal=\"false\"\n    initial-focus-element=\"none\"\n    :header-class=\"headerClass\"\n    :footer-class=\"footerClass\"\n    :append-to=\"appendTo\"\n    :external-anchor-element=\"externalAnchorElement\"\n    data-qa=\"dt-hovercard\"\n    :enter-delay=\"enterDelay\"\n    :leave-delay=\"leaveDelay\"\n    @opened=\"(e) => ($emit('opened', e))\"\n    @mouseenter-popover=\"onMouseEnter\"\n    @mouseleave-popover=\"onMouseLeave\"\n    @mouseenter-popover-anchor=\"onMouseEnter\"\n    @mouseleave-popover-anchor=\"onMouseLeave\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <!-- @slot Anchor element that activates the hovercard. Usually a button. -->\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <div\n        @focusin=\"onContentFocusIn\"\n        @focusout=\"onContentFocusOut\"\n      >\n        <!-- @slot Slot for the content that is displayed in the hovercard. -->\n        <slot name=\"content\" />\n      </div>\n    </template>\n    <template #headerContent>\n      <!-- @slot Slot for hovercard header content -->\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <!-- @slot Slot for the footer content. -->\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script setup>\nimport { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\n\nconst props = defineProps({\n  /**\n     * Fade transition when the content display is toggled.\n     * @type boolean\n     * @values true, false\n     */\n  transition: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n     * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover 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      * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\".\n     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     */\n  fallbackPlacements: {\n    type: Array,\n    default: () => {\n      return ['auto'];\n    },\n  },\n\n  /**\n     * The direction the popover displays relative to the anchor.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n  placement: {\n    type: String,\n    default: 'top-start',\n    validator (placement) {\n      return TOOLTIP_DIRECTIONS.includes(placement);\n    },\n  },\n\n  /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n  padding: {\n    type: String,\n    default: 'large',\n    validator: (padding) => {\n      return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n    },\n  },\n\n  /**\n     * Displaces the content box from its anchor element\n     * by the specified number of pixels.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     */\n  offset: {\n    type: Array,\n    default: () => [0, 16],\n  },\n\n  /**\n     * The id of the tooltip\n     */\n  id: {\n    type: String,\n    default () { return getUniqueString(); },\n  },\n\n  /**\n     * Additional class name for the header content wrapper element.\n     */\n  headerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the footer content wrapper element.\n     */\n  footerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the dialog element.\n     */\n  dialogClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the content wrapper element.\n     */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n  appendTo: {\n    type: [HTMLElement, String],\n    default: 'body',\n    validator: appendTo => {\n      return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n    },\n  },\n\n  /**\n   * The enter delay in milliseconds before the hovercard is shown.\n   * @type number\n   */\n  enterDelay: {\n    type: Number,\n    default: TOOLTIP_DELAY_MS,\n  },\n\n  /**\n   * The leave delay in milliseconds before the hovercard is hidden.\n   * @type number\n   */\n  leaveDelay: {\n    type: Number,\n    default: TOOLTIP_DELAY_MS,\n  },\n\n  /**\n   * External anchor element reference. Use this instead of the anchor slot when\n   * the anchor may be inside a Shadow DOM, as querySelector cannot pierce shadow boundaries.\n   */\n  externalAnchorElement: {\n    type: HTMLElement,\n    default: null,\n  },\n});\n\ndefineEmits([\n  /**\n   * Emitted when hovercard is shown or hidden\n   *\n   * @event opened\n   * @type {Boolean | Array}\n   */\n  'opened',\n]);\n\nconst hovercardOpen = ref(props.open);\nconst contentFocused = ref(false);\nconst mouseOverHovercard = ref(false);\nconst inTimer = ref(null);\nconst outTimer = ref(null);\nconst anchorEl = ref(null);\nconst observer = ref(null);\nconst popover = ref(null);\n\nonMounted(() => {\n  nextTick(() => {\n    anchorEl.value = popover.value?.$refs?.anchor?.firstElementChild;\n\n    observer.value = new MutationObserver(() => {\n      if (anchorEl.value && !anchorEl.value.isConnected) {\n        hovercardOpen.value = false;\n      }\n    });\n\n    observer.value.observe(document.body, {\n      childList: true,\n      subtree: true,\n    });\n  });\n});\n\nonBeforeUnmount(() => {\n  if (observer.value) {\n    observer.value.disconnect();\n  }\n  clearTimeout(inTimer);\n  clearTimeout(outTimer);\n});\n\nwatch(() => props.open, (open) => {\n  hovercardOpen.value = open;\n}, { immediate: true });\n\ndefineExpose({ show: onMouseEnter, hide: onMouseLeave });\n\nfunction setInTimer () {\n  if (props.open === null) {\n    clearTimeout(outTimer.value);\n    inTimer.value = setTimeout(() => {\n      hovercardOpen.value = true;\n    }, props.enterDelay);\n  }\n}\n\nfunction setOutTimer () {\n  if (props.open === null) {\n    clearTimeout(inTimer.value);\n    outTimer.value = setTimeout(() => {\n      hovercardOpen.value = false;\n    }, props.leaveDelay);\n  }\n}\n\nfunction onMouseEnter () {\n  mouseOverHovercard.value = true;\n  setInTimer();\n}\n\nfunction onMouseLeave () {\n  mouseOverHovercard.value = false;\n  if (contentFocused.value) {\n    return;\n  }\n  setOutTimer();\n}\n\nfunction onContentFocusIn () {\n  contentFocused.value = true;\n  setInTimer();\n}\n\nfunction onContentFocusOut () {\n  contentFocused.value = false;\n\n  // If mouse is not over the hovercard, close it\n  if (!mouseOverHovercard.value) {\n    setOutTimer();\n  }\n}\n</script>\n"],"mappings":"swCA8DA,IAAM,EAAQ,EAqKR,GAAA,EAAA,EAAA,KAAoB,EAAM,KAAK,CAC/B,GAAA,EAAA,EAAA,KAAqB,GAAM,CAC3B,GAAA,EAAA,EAAA,KAAyB,GAAM,CAC/B,GAAA,EAAA,EAAA,KAAc,KAAK,CACnB,GAAA,EAAA,EAAA,KAAe,KAAK,CACpB,GAAA,EAAA,EAAA,KAAe,KAAK,CACpB,GAAA,EAAA,EAAA,KAAe,KAAK,CACpB,GAAA,EAAA,EAAA,KAAc,KAAK,EAEzB,EAAA,EAAA,eAAgB,EACd,EAAA,EAAA,cAAe,CACb,EAAS,MAAQ,EAAQ,OAAO,OAAO,QAAQ,kBAE/C,EAAS,MAAQ,IAAI,qBAAuB,CACtC,EAAS,OAAS,CAAC,EAAS,MAAM,cACpC,EAAc,MAAQ,KAExB,CAEF,EAAS,MAAM,QAAQ,SAAS,KAAM,CACpC,UAAW,GACX,QAAS,GACV,CAAC,EACF,EACF,EAEF,EAAA,EAAA,qBAAsB,CAChB,EAAS,OACX,EAAS,MAAM,YAAY,CAE7B,aAAa,EAAQ,CACrB,aAAa,EAAS,EACtB,EAEF,EAAA,EAAA,WAAY,EAAM,KAAO,GAAS,CAChC,EAAc,MAAQ,GACrB,CAAE,UAAW,GAAM,CAAC,CAEvB,EAAa,CAAE,KAAM,EAAc,KAAM,EAAc,CAAC,CAExD,SAAS,GAAc,CACjB,EAAM,OAAS,OACjB,aAAa,EAAS,MAAM,CAC5B,EAAQ,MAAQ,eAAiB,CAC/B,EAAc,MAAQ,IACrB,EAAM,WAAW,EAIxB,SAAS,GAAe,CAClB,EAAM,OAAS,OACjB,aAAa,EAAQ,MAAM,CAC3B,EAAS,MAAQ,eAAiB,CAChC,EAAc,MAAQ,IACrB,EAAM,WAAW,EAIxB,SAAS,GAAgB,CACvB,EAAmB,MAAQ,GAC3B,GAAY,CAGd,SAAS,GAAgB,CACvB,EAAmB,MAAQ,GACvB,GAAe,OAGnB,GAAa,CAGf,SAAS,GAAoB,CAC3B,EAAe,MAAQ,GACvB,GAAY,CAGd,SAAS,GAAqB,CAC5B,EAAe,MAAQ,GAGlB,EAAmB,OACtB,GAAa,+DA/PF,EAAA,QAAA,CAAA,CAlDV,GAAI,EAAA,WACD,UAAJ,IAAI,EACH,KAAM,EAAA,MACN,UAAW,EAAA,UACX,gBAAe,EAAA,aACf,eAAc,EAAA,YACd,sBAAqB,EAAA,mBACrB,QAAS,EAAA,QACT,WAAY,EAAA,WAAU,OAAA,KACtB,OAAQ,EAAA,OACR,MAAO,GACR,wBAAsB,OACrB,eAAc,EAAA,YACd,eAAc,EAAA,YACd,YAAW,EAAA,SACX,0BAAyB,EAAA,sBAC1B,UAAQ,eACP,cAAa,EAAA,WACb,cAAa,EAAA,WACb,SAAM,EAAA,KAAA,EAAA,GAAG,GAAOA,EAAAA,MAAK,SAAW,EAAC,EACjC,oBAAoB,EACpB,oBAAoB,EACpB,0BAA2B,EAC3B,0BAA2B,IAEjB,QAAA,EAAA,EAAA,UAKP,CALiB,WAAK,EAAA,EAAA,EAAA,YAKtB,EAAA,OAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBADQ,EAAK,CAAA,CAAA,CAAA,CAAA,CAGN,SAAA,EAAA,EAAA,aAOH,EAAA,EAAA,EAAA,oBAAA,MAAA,CALH,UAAS,EACT,WAAU,qBAGY,EAAA,OAAA,UAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAGhB,eAAA,EAAA,EAAA,aAEoB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,gBAAA,CAAA,CAAA,CAGpB,eAAA,EAAA,EAAA,aAEoB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,gBAAA,CAAA,CAAA"}
+{"version":3,"file":"hovercard.cjs","names":["$emit"],"sources":["../../../components/Hovercard/Hovercard.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-popover\n    :id=\"id\"\n    ref=\"popover\"\n    :open=\"hovercardOpen\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :content-mode=\"contentMode\"\n    :dialog-class=\"dialogClass\"\n    :fallback-placements=\"fallbackPlacements\"\n    :padding=\"padding\"\n    :transition=\"transition ? 'fade' : null\"\n    :offset=\"offset\"\n    :modal=\"false\"\n    initial-focus-element=\"none\"\n    :header-class=\"headerClass\"\n    :footer-class=\"footerClass\"\n    :append-to=\"appendTo\"\n    :anchor-class=\"anchorClass\"\n    :external-anchor-element=\"externalAnchorElement\"\n    data-qa=\"dt-hovercard\"\n    :enter-delay=\"enterDelay\"\n    :leave-delay=\"leaveDelay\"\n    @opened=\"(e) => ($emit('opened', e))\"\n    @mouseenter-popover=\"onMouseEnter\"\n    @mouseleave-popover=\"onMouseLeave\"\n    @mouseenter-popover-anchor=\"onMouseEnter\"\n    @mouseleave-popover-anchor=\"onMouseLeave\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <!-- @slot Anchor element that activates the hovercard. Usually a button. -->\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <div\n        @focusin=\"onContentFocusIn\"\n        @focusout=\"onContentFocusOut\"\n      >\n        <!-- @slot Slot for the content that is displayed in the hovercard. -->\n        <slot name=\"content\" />\n      </div>\n    </template>\n    <template #headerContent>\n      <!-- @slot Slot for hovercard header content -->\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <!-- @slot Slot for the footer content. -->\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script setup>\nimport { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/Popover/index.js';\nimport { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/Tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\n\ndefineOptions({\n  name: 'DtHovercard',\n});\n\nconst props = defineProps({\n  /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n  contentMode: CONTENT_MODE_PROP,\n\n  /**\n     * Fade transition when the content display is toggled.\n     * @type boolean\n     * @values true, false\n     */\n  transition: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n     * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover 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      * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\".\n     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     */\n  fallbackPlacements: {\n    type: Array,\n    default: () => {\n      return ['auto'];\n    },\n  },\n\n  /**\n     * The direction the popover displays relative to the anchor.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n  placement: {\n    type: String,\n    default: 'top-start',\n    validator (placement) {\n      return TOOLTIP_DIRECTIONS.includes(placement);\n    },\n  },\n\n  /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n  padding: {\n    type: String,\n    default: 'large',\n    validator: (padding) => {\n      return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n    },\n  },\n\n  /**\n     * Displaces the content box from its anchor element\n     * by the specified number of pixels.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     */\n  offset: {\n    type: Array,\n    default: () => [0, 16],\n  },\n\n  /**\n     * The id of the tooltip\n     */\n  id: {\n    type: String,\n    default () { return getUniqueString(); },\n  },\n\n  /**\n     * Additional class name for the anchor wrapper element.\n     */\n  anchorClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the header content wrapper element.\n     */\n  headerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the footer content wrapper element.\n     */\n  footerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the dialog element.\n     */\n  dialogClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the content wrapper element.\n     */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n  appendTo: {\n    type: [HTMLElement, String],\n    default: 'body',\n    validator: appendTo => {\n      return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n    },\n  },\n\n  /**\n   * The enter delay in milliseconds before the hovercard is shown.\n   * @type number\n   */\n  enterDelay: {\n    type: Number,\n    default: TOOLTIP_DELAY_MS,\n  },\n\n  /**\n   * The leave delay in milliseconds before the hovercard is hidden.\n   * @type number\n   */\n  leaveDelay: {\n    type: Number,\n    default: TOOLTIP_DELAY_MS,\n  },\n\n  /**\n   * External anchor element reference. Use this instead of the anchor slot when\n   * the anchor may be inside a Shadow DOM, as querySelector cannot pierce shadow boundaries.\n   */\n  externalAnchorElement: {\n    type: HTMLElement,\n    default: null,\n  },\n});\n\ndefineEmits([\n  /**\n   * Emitted when hovercard is shown or hidden\n   *\n   * @event opened\n   * @type {Boolean | Array}\n   */\n  'opened',\n]);\n\nconst hovercardOpen = ref(props.open);\nconst contentFocused = ref(false);\nconst mouseOverHovercard = ref(false);\nconst inTimer = ref(null);\nconst outTimer = ref(null);\nconst anchorEl = ref(null);\nconst observer = ref(null);\nconst popover = ref(null);\n\nonMounted(() => {\n  nextTick(() => {\n    anchorEl.value = popover.value?.$refs?.anchor?.firstElementChild;\n\n    observer.value = new MutationObserver(() => {\n      if (anchorEl.value && !anchorEl.value.isConnected) {\n        hovercardOpen.value = false;\n      }\n    });\n\n    observer.value.observe(document.body, {\n      childList: true,\n      subtree: true,\n    });\n  });\n});\n\nonBeforeUnmount(() => {\n  if (observer.value) {\n    observer.value.disconnect();\n  }\n  clearTimeout(inTimer);\n  clearTimeout(outTimer);\n});\n\nwatch(() => props.open, (open) => {\n  hovercardOpen.value = open;\n}, { immediate: true });\n\ndefineExpose({ show: onMouseEnter, hide: onMouseLeave });\n\nfunction setInTimer () {\n  if (props.open === null) {\n    clearTimeout(outTimer.value);\n    inTimer.value = setTimeout(() => {\n      hovercardOpen.value = true;\n    }, props.enterDelay);\n  }\n}\n\nfunction setOutTimer () {\n  if (props.open === null) {\n    clearTimeout(inTimer.value);\n    outTimer.value = setTimeout(() => {\n      hovercardOpen.value = false;\n    }, props.leaveDelay);\n  }\n}\n\nfunction onMouseEnter () {\n  mouseOverHovercard.value = true;\n  setInTimer();\n}\n\nfunction onMouseLeave () {\n  mouseOverHovercard.value = false;\n  if (contentFocused.value) {\n    return;\n  }\n  setOutTimer();\n}\n\nfunction onContentFocusIn () {\n  contentFocused.value = true;\n  setInTimer();\n}\n\nfunction onContentFocusOut () {\n  contentFocused.value = false;\n\n  // If mouse is not over the hovercard, close it\n  if (!mouseOverHovercard.value) {\n    setOutTimer();\n  }\n}\n</script>\n"],"mappings":"45CAqEA,IAAM,EAAQ,EAmLR,GAAA,EAAA,EAAA,KAAoB,EAAM,KAAK,CAC/B,GAAA,EAAA,EAAA,KAAqB,GAAM,CAC3B,GAAA,EAAA,EAAA,KAAyB,GAAM,CAC/B,GAAA,EAAA,EAAA,KAAc,KAAK,CACnB,GAAA,EAAA,EAAA,KAAe,KAAK,CACpB,GAAA,EAAA,EAAA,KAAe,KAAK,CACpB,GAAA,EAAA,EAAA,KAAe,KAAK,CACpB,GAAA,EAAA,EAAA,KAAc,KAAK,EAEzB,EAAA,EAAA,eAAgB,EACd,EAAA,EAAA,cAAe,CACb,EAAS,MAAQ,EAAQ,OAAO,OAAO,QAAQ,kBAE/C,EAAS,MAAQ,IAAI,qBAAuB,CACtC,EAAS,OAAS,CAAC,EAAS,MAAM,cACpC,EAAc,MAAQ,KAExB,CAEF,EAAS,MAAM,QAAQ,SAAS,KAAM,CACpC,UAAW,GACX,QAAS,GACV,CAAC,EACF,EACF,EAEF,EAAA,EAAA,qBAAsB,CAChB,EAAS,OACX,EAAS,MAAM,YAAY,CAE7B,aAAa,EAAQ,CACrB,aAAa,EAAS,EACtB,EAEF,EAAA,EAAA,WAAY,EAAM,KAAO,GAAS,CAChC,EAAc,MAAQ,GACrB,CAAE,UAAW,GAAM,CAAC,CAEvB,EAAa,CAAE,KAAM,EAAc,KAAM,EAAc,CAAC,CAExD,SAAS,GAAc,CACjB,EAAM,OAAS,OACjB,aAAa,EAAS,MAAM,CAC5B,EAAQ,MAAQ,eAAiB,CAC/B,EAAc,MAAQ,IACrB,EAAM,WAAW,EAIxB,SAAS,GAAe,CAClB,EAAM,OAAS,OACjB,aAAa,EAAQ,MAAM,CAC3B,EAAS,MAAQ,eAAiB,CAChC,EAAc,MAAQ,IACrB,EAAM,WAAW,EAIxB,SAAS,GAAgB,CACvB,EAAmB,MAAQ,GAC3B,GAAY,CAGd,SAAS,GAAgB,CACvB,EAAmB,MAAQ,GACvB,GAAe,OAGnB,GAAa,CAGf,SAAS,GAAoB,CAC3B,EAAe,MAAQ,GACvB,GAAY,CAGd,SAAS,GAAqB,CAC5B,EAAe,MAAQ,GAGlB,EAAmB,OACtB,GAAa,+DAlRF,EAAA,QAAA,CAAA,CApDV,GAAI,EAAA,WACD,UAAJ,IAAI,EACH,KAAM,EAAA,MACN,UAAW,EAAA,UACX,gBAAe,EAAA,aACf,eAAc,EAAA,YACd,eAAc,EAAA,YACd,sBAAqB,EAAA,mBACrB,QAAS,EAAA,QACT,WAAY,EAAA,WAAU,OAAA,KACtB,OAAQ,EAAA,OACR,MAAO,GACR,wBAAsB,OACrB,eAAc,EAAA,YACd,eAAc,EAAA,YACd,YAAW,EAAA,SACX,eAAc,EAAA,YACd,0BAAyB,EAAA,sBAC1B,UAAQ,eACP,cAAa,EAAA,WACb,cAAa,EAAA,WACb,SAAM,EAAA,KAAA,EAAA,GAAG,GAAOA,EAAAA,MAAK,SAAW,EAAC,EACjC,oBAAoB,EACpB,oBAAoB,EACpB,0BAA2B,EAC3B,0BAA2B,IAEjB,QAAA,EAAA,EAAA,UAKP,CALiB,WAAK,EAAA,EAAA,EAAA,YAKtB,EAAA,OAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBADQ,EAAK,CAAA,CAAA,CAAA,CAAA,CAGN,SAAA,EAAA,EAAA,aAOH,EAAA,EAAA,EAAA,oBAAA,MAAA,CALH,UAAS,EACT,WAAU,qBAGY,EAAA,OAAA,UAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAGhB,eAAA,EAAA,EAAA,aAEoB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,gBAAA,CAAA,CAAA,CAGpB,eAAA,EAAA,EAAA,aAEoB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,gBAAA,CAAA,CAAA"}

package/dist/lib/hovercard/hovercard.js

@@ -1,12 +1,14 @@
 import { getUniqueString as e } from "../../common/utils/index.js";
-import { TOOLTIP_DIRECTIONS as t } from "../tooltip/tooltip-constants.js";
-import { POPOVER_APPEND_TO_VALUES as n, POPOVER_PADDING_CLASSES as r } from "../popover/popover-constants.js";
-import i from "../popover/popover.js";
-import { createBlock as a, createElementVNode as o, guardReactiveProps as s, nextTick as c, normalizeProps as l, onBeforeUnmount as u, onMounted as d, openBlock as f, ref as p, renderSlot as m, unref as h, watch as g, withCtx as _ } from "vue";
-//#region components/hovercard/hovercard.vue
-var v = {
-	__name: "hovercard",
+import { t } from "../../mode_constants-tb7TL85q.js";
+import { TOOLTIP_DIRECTIONS as n } from "../tooltip/tooltip-constants.js";
+import { POPOVER_APPEND_TO_VALUES as r, POPOVER_PADDING_CLASSES as i } from "../popover/popover-constants.js";
+import a from "../popover/popover.js";
+import { createBlock as o, createElementVNode as s, guardReactiveProps as c, nextTick as l, normalizeProps as u, onBeforeUnmount as d, onMounted as f, openBlock as p, ref as m, renderSlot as h, unref as g, watch as _, withCtx as v } from "vue";
+//#region components/Hovercard/Hovercard.vue
+var y = /* @__PURE__ */ Object.assign({ name: "DtHovercard" }, {
+	__name: "Hovercard",
 	props: {
+		contentMode: t,
 		transition: {
 			type: Boolean,
 			default: !1
@@ -23,13 +25,13 @@ var v = {
 			type: String,
 			default: "top-start",
 			validator(e) {
-				return t.includes(e);
+				return n.includes(e);
 			}
 		},
 		padding: {
 			type: String,
 			default: "large",
-			validator: (e) => Object.keys(r).some((t) => t === e)
+			validator: (e) => Object.keys(i).some((t) => t === e)
 		},
 		offset: {
 			type: Array,
@@ -41,6 +43,14 @@ var v = {
 				return e();
 			}
 		},
+		anchorClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
 		headerClass: {
 			type: [
 				String,
@@ -76,7 +86,7 @@ var v = {
 		appendTo: {
 			type: [HTMLElement, String],
 			default: "body",
-			validator: (e) => n.includes(e) || e instanceof HTMLElement
+			validator: (e) => r.includes(e) || e instanceof HTMLElement
 		},
 		enterDelay: {
 			type: Number,
@@ -93,9 +103,9 @@ var v = {
 	},
 	emits: ["opened"],
 	setup(e, { expose: t }) {
-		let n = e, r = p(n.open), v = p(!1), y = p(!1), b = p(null), x = p(null), S = p(null), C = p(null), w = p(null);
-		d(() => {
-			c(() => {
+		let n = e, r = m(n.open), i = m(!1), y = m(!1), b = m(null), x = m(null), S = m(null), C = m(null), w = m(null);
+		f(() => {
+			l(() => {
 				S.value = w.value?.$refs?.anchor?.firstElementChild, C.value = new MutationObserver(() => {
 					S.value && !S.value.isConnected && (r.value = !1);
 				}), C.value.observe(document.body, {
@@ -103,9 +113,9 @@ var v = {
 					subtree: !0
 				});
 			});
-		}), u(() => {
+		}), d(() => {
 			C.value && C.value.disconnect(), clearTimeout(b), clearTimeout(x);
-		}), g(() => n.open, (e) => {
+		}), _(() => n.open, (e) => {
 			r.value = e;
 		}, { immediate: !0 }), t({
 			show: D,
@@ -125,21 +135,22 @@ var v = {
 			y.value = !0, T();
 		}
 		function O() {
-			y.value = !1, !v.value && E();
+			y.value = !1, !i.value && E();
 		}
 		function k() {
-			v.value = !0, T();
+			i.value = !0, T();
 		}
 		function A() {
-			v.value = !1, y.value || E();
+			i.value = !1, y.value || E();
 		}
-		return (t, n) => (f(), a(h(i), {
+		return (t, n) => (p(), o(g(a), {
 			id: e.id,
 			ref_key: "popover",
 			ref: w,
 			open: r.value,
 			placement: e.placement,
 			"content-class": e.contentClass,
+			"content-mode": e.contentMode,
 			"dialog-class": e.dialogClass,
 			"fallback-placements": e.fallbackPlacements,
 			padding: e.padding,
@@ -150,6 +161,7 @@ var v = {
 			"header-class": e.headerClass,
 			"footer-class": e.footerClass,
 			"append-to": e.appendTo,
+			"anchor-class": e.anchorClass,
 			"external-anchor-element": e.externalAnchorElement,
 			"data-qa": "dt-hovercard",
 			"enter-delay": e.enterDelay,
@@ -160,19 +172,20 @@ var v = {
 			onMouseenterPopoverAnchor: D,
 			onMouseleavePopoverAnchor: O
 		}, {
-			anchor: _(({ attrs: e }) => [m(t.$slots, "anchor", l(s(e)))]),
-			content: _(() => [o("div", {
+			anchor: v(({ attrs: e }) => [h(t.$slots, "anchor", u(c(e)))]),
+			content: v(() => [s("div", {
 				onFocusin: k,
 				onFocusout: A
-			}, [m(t.$slots, "content")], 32)]),
-			headerContent: _(() => [m(t.$slots, "headerContent")]),
-			footerContent: _(() => [m(t.$slots, "footerContent")]),
+			}, [h(t.$slots, "content")], 32)]),
+			headerContent: v(() => [h(t.$slots, "headerContent")]),
+			footerContent: v(() => [h(t.$slots, "footerContent")]),
 			_: 3
 		}, 8, [
 			"id",
 			"open",
 			"placement",
 			"content-class",
+			"content-mode",
 			"dialog-class",
 			"fallback-placements",
 			"padding",
@@ -181,13 +194,14 @@ var v = {
 			"header-class",
 			"footer-class",
 			"append-to",
+			"anchor-class",
 			"external-anchor-element",
 			"enter-delay",
 			"leave-delay"
 		]));
 	}
-};
+});
 //#endregion
-export { v as default };
+export { y as default };
 
 //# sourceMappingURL=hovercard.js.map

package/dist/lib/hovercard/hovercard.js.map

@@ -1 +1 @@
-{"version":3,"file":"hovercard.js","names":["$emit"],"sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-popover\n    :id=\"id\"\n    ref=\"popover\"\n    :open=\"hovercardOpen\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :dialog-class=\"dialogClass\"\n    :fallback-placements=\"fallbackPlacements\"\n    :padding=\"padding\"\n    :transition=\"transition ? 'fade' : null\"\n    :offset=\"offset\"\n    :modal=\"false\"\n    initial-focus-element=\"none\"\n    :header-class=\"headerClass\"\n    :footer-class=\"footerClass\"\n    :append-to=\"appendTo\"\n    :external-anchor-element=\"externalAnchorElement\"\n    data-qa=\"dt-hovercard\"\n    :enter-delay=\"enterDelay\"\n    :leave-delay=\"leaveDelay\"\n    @opened=\"(e) => ($emit('opened', e))\"\n    @mouseenter-popover=\"onMouseEnter\"\n    @mouseleave-popover=\"onMouseLeave\"\n    @mouseenter-popover-anchor=\"onMouseEnter\"\n    @mouseleave-popover-anchor=\"onMouseLeave\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <!-- @slot Anchor element that activates the hovercard. Usually a button. -->\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <div\n        @focusin=\"onContentFocusIn\"\n        @focusout=\"onContentFocusOut\"\n      >\n        <!-- @slot Slot for the content that is displayed in the hovercard. -->\n        <slot name=\"content\" />\n      </div>\n    </template>\n    <template #headerContent>\n      <!-- @slot Slot for hovercard header content -->\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <!-- @slot Slot for the footer content. -->\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script setup>\nimport { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\n\nconst props = defineProps({\n  /**\n     * Fade transition when the content display is toggled.\n     * @type boolean\n     * @values true, false\n     */\n  transition: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n     * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover 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      * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\".\n     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     */\n  fallbackPlacements: {\n    type: Array,\n    default: () => {\n      return ['auto'];\n    },\n  },\n\n  /**\n     * The direction the popover displays relative to the anchor.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n  placement: {\n    type: String,\n    default: 'top-start',\n    validator (placement) {\n      return TOOLTIP_DIRECTIONS.includes(placement);\n    },\n  },\n\n  /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n  padding: {\n    type: String,\n    default: 'large',\n    validator: (padding) => {\n      return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n    },\n  },\n\n  /**\n     * Displaces the content box from its anchor element\n     * by the specified number of pixels.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     */\n  offset: {\n    type: Array,\n    default: () => [0, 16],\n  },\n\n  /**\n     * The id of the tooltip\n     */\n  id: {\n    type: String,\n    default () { return getUniqueString(); },\n  },\n\n  /**\n     * Additional class name for the header content wrapper element.\n     */\n  headerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the footer content wrapper element.\n     */\n  footerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the dialog element.\n     */\n  dialogClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the content wrapper element.\n     */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n  appendTo: {\n    type: [HTMLElement, String],\n    default: 'body',\n    validator: appendTo => {\n      return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n    },\n  },\n\n  /**\n   * The enter delay in milliseconds before the hovercard is shown.\n   * @type number\n   */\n  enterDelay: {\n    type: Number,\n    default: TOOLTIP_DELAY_MS,\n  },\n\n  /**\n   * The leave delay in milliseconds before the hovercard is hidden.\n   * @type number\n   */\n  leaveDelay: {\n    type: Number,\n    default: TOOLTIP_DELAY_MS,\n  },\n\n  /**\n   * External anchor element reference. Use this instead of the anchor slot when\n   * the anchor may be inside a Shadow DOM, as querySelector cannot pierce shadow boundaries.\n   */\n  externalAnchorElement: {\n    type: HTMLElement,\n    default: null,\n  },\n});\n\ndefineEmits([\n  /**\n   * Emitted when hovercard is shown or hidden\n   *\n   * @event opened\n   * @type {Boolean | Array}\n   */\n  'opened',\n]);\n\nconst hovercardOpen = ref(props.open);\nconst contentFocused = ref(false);\nconst mouseOverHovercard = ref(false);\nconst inTimer = ref(null);\nconst outTimer = ref(null);\nconst anchorEl = ref(null);\nconst observer = ref(null);\nconst popover = ref(null);\n\nonMounted(() => {\n  nextTick(() => {\n    anchorEl.value = popover.value?.$refs?.anchor?.firstElementChild;\n\n    observer.value = new MutationObserver(() => {\n      if (anchorEl.value && !anchorEl.value.isConnected) {\n        hovercardOpen.value = false;\n      }\n    });\n\n    observer.value.observe(document.body, {\n      childList: true,\n      subtree: true,\n    });\n  });\n});\n\nonBeforeUnmount(() => {\n  if (observer.value) {\n    observer.value.disconnect();\n  }\n  clearTimeout(inTimer);\n  clearTimeout(outTimer);\n});\n\nwatch(() => props.open, (open) => {\n  hovercardOpen.value = open;\n}, { immediate: true });\n\ndefineExpose({ show: onMouseEnter, hide: onMouseLeave });\n\nfunction setInTimer () {\n  if (props.open === null) {\n    clearTimeout(outTimer.value);\n    inTimer.value = setTimeout(() => {\n      hovercardOpen.value = true;\n    }, props.enterDelay);\n  }\n}\n\nfunction setOutTimer () {\n  if (props.open === null) {\n    clearTimeout(inTimer.value);\n    outTimer.value = setTimeout(() => {\n      hovercardOpen.value = false;\n    }, props.leaveDelay);\n  }\n}\n\nfunction onMouseEnter () {\n  mouseOverHovercard.value = true;\n  setInTimer();\n}\n\nfunction onMouseLeave () {\n  mouseOverHovercard.value = false;\n  if (contentFocused.value) {\n    return;\n  }\n  setOutTimer();\n}\n\nfunction onContentFocusIn () {\n  contentFocused.value = true;\n  setInTimer();\n}\n\nfunction onContentFocusOut () {\n  contentFocused.value = false;\n\n  // If mouse is not over the hovercard, close it\n  if (!mouseOverHovercard.value) {\n    setOutTimer();\n  }\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8DA,IAAM,IAAQ,GAqKR,IAAgB,EAAI,EAAM,KAAK,EAC/B,IAAiB,EAAI,GAAM,EAC3B,IAAqB,EAAI,GAAM,EAC/B,IAAU,EAAI,KAAK,EACnB,IAAW,EAAI,KAAK,EACpB,IAAW,EAAI,KAAK,EACpB,IAAW,EAAI,KAAK,EACpB,IAAU,EAAI,KAAK;AA+BzB,EA7BA,QAAgB;AACd,WAAe;AASb,IARA,EAAS,QAAQ,EAAQ,OAAO,OAAO,QAAQ,mBAE/C,EAAS,QAAQ,IAAI,uBAAuB;AAC1C,KAAI,EAAS,SAAS,CAAC,EAAS,MAAM,gBACpC,EAAc,QAAQ;MAExB,EAEF,EAAS,MAAM,QAAQ,SAAS,MAAM;KACpC,WAAW;KACX,SAAS;KACV,CAAC;KACF;IACF,EAEF,QAAsB;AAKpB,GAJI,EAAS,SACX,EAAS,MAAM,YAAY,EAE7B,aAAa,EAAQ,EACrB,aAAa,EAAS;IACtB,EAEF,QAAY,EAAM,OAAO,MAAS;AAChC,KAAc,QAAQ;KACrB,EAAE,WAAW,IAAM,CAAC,EAEvB,EAAa;GAAE,MAAM;GAAc,MAAM;GAAc,CAAC;EAExD,SAAS,IAAc;AACrB,GAAI,EAAM,SAAS,SACjB,aAAa,EAAS,MAAM,EAC5B,EAAQ,QAAQ,iBAAiB;AAC/B,MAAc,QAAQ;MACrB,EAAM,WAAW;;EAIxB,SAAS,IAAe;AACtB,GAAI,EAAM,SAAS,SACjB,aAAa,EAAQ,MAAM,EAC3B,EAAS,QAAQ,iBAAiB;AAChC,MAAc,QAAQ;MACrB,EAAM,WAAW;;EAIxB,SAAS,IAAgB;AAEvB,GADA,EAAmB,QAAQ,IAC3B,GAAY;;EAGd,SAAS,IAAgB;AACvB,KAAmB,QAAQ,IACvB,GAAe,SAGnB,GAAa;;EAGf,SAAS,IAAoB;AAE3B,GADA,EAAe,QAAQ,IACvB,GAAY;;EAGd,SAAS,IAAqB;AAI5B,GAHA,EAAe,QAAQ,IAGlB,EAAmB,SACtB,GAAa;;yBAlTf,EAmDa,EAAA,EAAA,EAAA;GAlDV,IAAI,EAAA;YACD;GAAJ,KAAI;GACH,MAAM,EAAA;GACN,WAAW,EAAA;GACX,iBAAe,EAAA;GACf,gBAAc,EAAA;GACd,uBAAqB,EAAA;GACrB,SAAS,EAAA;GACT,YAAY,EAAA,aAAU,SAAA;GACtB,QAAQ,EAAA;GACR,OAAO;GACR,yBAAsB;GACrB,gBAAc,EAAA;GACd,gBAAc,EAAA;GACd,aAAW,EAAA;GACX,2BAAyB,EAAA;GAC1B,WAAQ;GACP,eAAa,EAAA;GACb,eAAa,EAAA;GACb,UAAM,EAAA,OAAA,EAAA,MAAG,MAAOA,EAAAA,MAAK,UAAW,EAAC;GACjC,qBAAoB;GACpB,qBAAoB;GACpB,2BAA2B;GAC3B,2BAA2B;;GAEjB,QAAM,GAKb,EALiB,eAAK,CAExB,EAGE,EAAA,QAAA,UAAA,EAAA,EADQ,EAAK,CAAA,CAAA,CAAA,CAAA;GAGN,SAAO,QAOV,CANN,EAMM,OAAA;IALH,WAAS;IACT,YAAU;OAGX,EAAuB,EAAA,QAAA,UAAA,CAAA,EAAA,GAAA,CAAA,CAAA;GAGhB,eAAa,QAEO,CAA7B,EAA6B,EAAA,QAAA,gBAAA,CAAA,CAAA;GAGpB,eAAa,QAEO,CAA7B,EAA6B,EAAA,QAAA,gBAAA,CAAA,CAAA"}
+{"version":3,"file":"hovercard.js","names":["$emit"],"sources":["../../../components/Hovercard/Hovercard.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-popover\n    :id=\"id\"\n    ref=\"popover\"\n    :open=\"hovercardOpen\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :content-mode=\"contentMode\"\n    :dialog-class=\"dialogClass\"\n    :fallback-placements=\"fallbackPlacements\"\n    :padding=\"padding\"\n    :transition=\"transition ? 'fade' : null\"\n    :offset=\"offset\"\n    :modal=\"false\"\n    initial-focus-element=\"none\"\n    :header-class=\"headerClass\"\n    :footer-class=\"footerClass\"\n    :append-to=\"appendTo\"\n    :anchor-class=\"anchorClass\"\n    :external-anchor-element=\"externalAnchorElement\"\n    data-qa=\"dt-hovercard\"\n    :enter-delay=\"enterDelay\"\n    :leave-delay=\"leaveDelay\"\n    @opened=\"(e) => ($emit('opened', e))\"\n    @mouseenter-popover=\"onMouseEnter\"\n    @mouseleave-popover=\"onMouseLeave\"\n    @mouseenter-popover-anchor=\"onMouseEnter\"\n    @mouseleave-popover-anchor=\"onMouseLeave\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <!-- @slot Anchor element that activates the hovercard. Usually a button. -->\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <div\n        @focusin=\"onContentFocusIn\"\n        @focusout=\"onContentFocusOut\"\n      >\n        <!-- @slot Slot for the content that is displayed in the hovercard. -->\n        <slot name=\"content\" />\n      </div>\n    </template>\n    <template #headerContent>\n      <!-- @slot Slot for hovercard header content -->\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <!-- @slot Slot for the footer content. -->\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script setup>\nimport { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/Popover/index.js';\nimport { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/Tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\n\ndefineOptions({\n  name: 'DtHovercard',\n});\n\nconst props = defineProps({\n  /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n  contentMode: CONTENT_MODE_PROP,\n\n  /**\n     * Fade transition when the content display is toggled.\n     * @type boolean\n     * @values true, false\n     */\n  transition: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n     * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover 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      * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\".\n     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     */\n  fallbackPlacements: {\n    type: Array,\n    default: () => {\n      return ['auto'];\n    },\n  },\n\n  /**\n     * The direction the popover displays relative to the anchor.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n  placement: {\n    type: String,\n    default: 'top-start',\n    validator (placement) {\n      return TOOLTIP_DIRECTIONS.includes(placement);\n    },\n  },\n\n  /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n  padding: {\n    type: String,\n    default: 'large',\n    validator: (padding) => {\n      return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n    },\n  },\n\n  /**\n     * Displaces the content box from its anchor element\n     * by the specified number of pixels.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     */\n  offset: {\n    type: Array,\n    default: () => [0, 16],\n  },\n\n  /**\n     * The id of the tooltip\n     */\n  id: {\n    type: String,\n    default () { return getUniqueString(); },\n  },\n\n  /**\n     * Additional class name for the anchor wrapper element.\n     */\n  anchorClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the header content wrapper element.\n     */\n  headerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the footer content wrapper element.\n     */\n  footerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the dialog element.\n     */\n  dialogClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the content wrapper element.\n     */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n  appendTo: {\n    type: [HTMLElement, String],\n    default: 'body',\n    validator: appendTo => {\n      return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n    },\n  },\n\n  /**\n   * The enter delay in milliseconds before the hovercard is shown.\n   * @type number\n   */\n  enterDelay: {\n    type: Number,\n    default: TOOLTIP_DELAY_MS,\n  },\n\n  /**\n   * The leave delay in milliseconds before the hovercard is hidden.\n   * @type number\n   */\n  leaveDelay: {\n    type: Number,\n    default: TOOLTIP_DELAY_MS,\n  },\n\n  /**\n   * External anchor element reference. Use this instead of the anchor slot when\n   * the anchor may be inside a Shadow DOM, as querySelector cannot pierce shadow boundaries.\n   */\n  externalAnchorElement: {\n    type: HTMLElement,\n    default: null,\n  },\n});\n\ndefineEmits([\n  /**\n   * Emitted when hovercard is shown or hidden\n   *\n   * @event opened\n   * @type {Boolean | Array}\n   */\n  'opened',\n]);\n\nconst hovercardOpen = ref(props.open);\nconst contentFocused = ref(false);\nconst mouseOverHovercard = ref(false);\nconst inTimer = ref(null);\nconst outTimer = ref(null);\nconst anchorEl = ref(null);\nconst observer = ref(null);\nconst popover = ref(null);\n\nonMounted(() => {\n  nextTick(() => {\n    anchorEl.value = popover.value?.$refs?.anchor?.firstElementChild;\n\n    observer.value = new MutationObserver(() => {\n      if (anchorEl.value && !anchorEl.value.isConnected) {\n        hovercardOpen.value = false;\n      }\n    });\n\n    observer.value.observe(document.body, {\n      childList: true,\n      subtree: true,\n    });\n  });\n});\n\nonBeforeUnmount(() => {\n  if (observer.value) {\n    observer.value.disconnect();\n  }\n  clearTimeout(inTimer);\n  clearTimeout(outTimer);\n});\n\nwatch(() => props.open, (open) => {\n  hovercardOpen.value = open;\n}, { immediate: true });\n\ndefineExpose({ show: onMouseEnter, hide: onMouseLeave });\n\nfunction setInTimer () {\n  if (props.open === null) {\n    clearTimeout(outTimer.value);\n    inTimer.value = setTimeout(() => {\n      hovercardOpen.value = true;\n    }, props.enterDelay);\n  }\n}\n\nfunction setOutTimer () {\n  if (props.open === null) {\n    clearTimeout(inTimer.value);\n    outTimer.value = setTimeout(() => {\n      hovercardOpen.value = false;\n    }, props.leaveDelay);\n  }\n}\n\nfunction onMouseEnter () {\n  mouseOverHovercard.value = true;\n  setInTimer();\n}\n\nfunction onMouseLeave () {\n  mouseOverHovercard.value = false;\n  if (contentFocused.value) {\n    return;\n  }\n  setOutTimer();\n}\n\nfunction onContentFocusIn () {\n  contentFocused.value = true;\n  setInTimer();\n}\n\nfunction onContentFocusOut () {\n  contentFocused.value = false;\n\n  // If mouse is not over the hovercard, close it\n  if (!mouseOverHovercard.value) {\n    setOutTimer();\n  }\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqEA,IAAM,IAAQ,GAmLR,IAAgB,EAAI,EAAM,KAAK,EAC/B,IAAiB,EAAI,GAAM,EAC3B,IAAqB,EAAI,GAAM,EAC/B,IAAU,EAAI,KAAK,EACnB,IAAW,EAAI,KAAK,EACpB,IAAW,EAAI,KAAK,EACpB,IAAW,EAAI,KAAK,EACpB,IAAU,EAAI,KAAK;AA+BzB,EA7BA,QAAgB;AACd,WAAe;AASb,IARA,EAAS,QAAQ,EAAQ,OAAO,OAAO,QAAQ,mBAE/C,EAAS,QAAQ,IAAI,uBAAuB;AAC1C,KAAI,EAAS,SAAS,CAAC,EAAS,MAAM,gBACpC,EAAc,QAAQ;MAExB,EAEF,EAAS,MAAM,QAAQ,SAAS,MAAM;KACpC,WAAW;KACX,SAAS;KACV,CAAC;KACF;IACF,EAEF,QAAsB;AAKpB,GAJI,EAAS,SACX,EAAS,MAAM,YAAY,EAE7B,aAAa,EAAQ,EACrB,aAAa,EAAS;IACtB,EAEF,QAAY,EAAM,OAAO,MAAS;AAChC,KAAc,QAAQ;KACrB,EAAE,WAAW,IAAM,CAAC,EAEvB,EAAa;GAAE,MAAM;GAAc,MAAM;GAAc,CAAC;EAExD,SAAS,IAAc;AACrB,GAAI,EAAM,SAAS,SACjB,aAAa,EAAS,MAAM,EAC5B,EAAQ,QAAQ,iBAAiB;AAC/B,MAAc,QAAQ;MACrB,EAAM,WAAW;;EAIxB,SAAS,IAAe;AACtB,GAAI,EAAM,SAAS,SACjB,aAAa,EAAQ,MAAM,EAC3B,EAAS,QAAQ,iBAAiB;AAChC,MAAc,QAAQ;MACrB,EAAM,WAAW;;EAIxB,SAAS,IAAgB;AAEvB,GADA,EAAmB,QAAQ,IAC3B,GAAY;;EAGd,SAAS,IAAgB;AACvB,KAAmB,QAAQ,IACvB,GAAe,SAGnB,GAAa;;EAGf,SAAS,IAAoB;AAE3B,GADA,EAAe,QAAQ,IACvB,GAAY;;EAGd,SAAS,IAAqB;AAI5B,GAHA,EAAe,QAAQ,IAGlB,EAAmB,SACtB,GAAa;;yBAvUf,EAqDa,EAAA,EAAA,EAAA;GApDV,IAAI,EAAA;YACD;GAAJ,KAAI;GACH,MAAM,EAAA;GACN,WAAW,EAAA;GACX,iBAAe,EAAA;GACf,gBAAc,EAAA;GACd,gBAAc,EAAA;GACd,uBAAqB,EAAA;GACrB,SAAS,EAAA;GACT,YAAY,EAAA,aAAU,SAAA;GACtB,QAAQ,EAAA;GACR,OAAO;GACR,yBAAsB;GACrB,gBAAc,EAAA;GACd,gBAAc,EAAA;GACd,aAAW,EAAA;GACX,gBAAc,EAAA;GACd,2BAAyB,EAAA;GAC1B,WAAQ;GACP,eAAa,EAAA;GACb,eAAa,EAAA;GACb,UAAM,EAAA,OAAA,EAAA,MAAG,MAAOA,EAAAA,MAAK,UAAW,EAAC;GACjC,qBAAoB;GACpB,qBAAoB;GACpB,2BAA2B;GAC3B,2BAA2B;;GAEjB,QAAM,GAKb,EALiB,eAAK,CAExB,EAGE,EAAA,QAAA,UAAA,EAAA,EADQ,EAAK,CAAA,CAAA,CAAA,CAAA;GAGN,SAAO,QAOV,CANN,EAMM,OAAA;IALH,WAAS;IACT,YAAU;OAGX,EAAuB,EAAA,QAAA,UAAA,CAAA,EAAA,GAAA,CAAA,CAAA;GAGhB,eAAa,QAEO,CAA7B,EAA6B,EAAA,QAAA,gBAAA,CAAA,CAAA;GAGpB,eAAa,QAEO,CAA7B,EAA6B,EAAA,QAAA,gBAAA,CAAA,CAAA"}

package/dist/lib/icon/icon-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon-constants.cjs","names":["iconNames"],"sources":["../../../components/icon/icon_constants.js"],"sourcesContent":["import iconNames from '@dialpad/dialtone-icons/icons.js';\n\nexport const ICON_SIZE_MODIFIERS = {\n  100: 'd-icon--size-100',\n  200: 'd-icon--size-200',\n  300: 'd-icon--size-300',\n  400: 'd-icon--size-400',\n  500: 'd-icon--size-500',\n  600: 'd-icon--size-600',\n  700: 'd-icon--size-700',\n  800: 'd-icon--size-800',\n};\n\nexport const ICON_NAMES = iconNames;\n\nexport default {\n  ICON_SIZE_MODIFIERS,\n  ICON_NAMES,\n};\n"],"mappings":"sMAEA,IAAa,EAAsB,CACjC,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACN,CAEY,EAAaA,EAAAA,QAE1B,EAAe,CACb,sBACA,aACD"}
+{"version":3,"file":"icon-constants.cjs","names":["iconNames"],"sources":["../../../components/Icon/IconConstants.js"],"sourcesContent":["import iconNames from '@dialpad/dialtone-icons/icons.js';\n\nexport const ICON_SIZE_MODIFIERS = {\n  100: 'd-icon--size-100',\n  200: 'd-icon--size-200',\n  300: 'd-icon--size-300',\n  400: 'd-icon--size-400',\n  500: 'd-icon--size-500',\n  600: 'd-icon--size-600',\n  700: 'd-icon--size-700',\n  800: 'd-icon--size-800',\n};\n\nexport const ICON_NAMES = iconNames;\n\nexport default {\n  ICON_SIZE_MODIFIERS,\n  ICON_NAMES,\n};\n"],"mappings":"sMAEA,IAAa,EAAsB,CACjC,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACN,CAEY,EAAaA,EAAAA,QAE1B,EAAe,CACb,sBACA,aACD"}

package/dist/lib/icon/icon-constants.js

@@ -1,5 +1,5 @@
 import e from "@dialpad/dialtone-icons/icons.js";
-//#region components/icon/icon_constants.js
+//#region components/Icon/IconConstants.js
 var t = {
 	100: "d-icon--size-100",
 	200: "d-icon--size-200",

package/dist/lib/icon/icon-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-constants.js","names":[],"sources":["../../../components/icon/icon_constants.js"],"sourcesContent":["import iconNames from '@dialpad/dialtone-icons/icons.js';\n\nexport const ICON_SIZE_MODIFIERS = {\n  100: 'd-icon--size-100',\n  200: 'd-icon--size-200',\n  300: 'd-icon--size-300',\n  400: 'd-icon--size-400',\n  500: 'd-icon--size-500',\n  600: 'd-icon--size-600',\n  700: 'd-icon--size-700',\n  800: 'd-icon--size-800',\n};\n\nexport const ICON_NAMES = iconNames;\n\nexport default {\n  ICON_SIZE_MODIFIERS,\n  ICON_NAMES,\n};\n"],"mappings":";;AAEA,IAAa,IAAsB;CACjC,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN,EAEY,IAAa,GAE1B,IAAe;CACb;CACA;CACD"}
+{"version":3,"file":"icon-constants.js","names":[],"sources":["../../../components/Icon/IconConstants.js"],"sourcesContent":["import iconNames from '@dialpad/dialtone-icons/icons.js';\n\nexport const ICON_SIZE_MODIFIERS = {\n  100: 'd-icon--size-100',\n  200: 'd-icon--size-200',\n  300: 'd-icon--size-300',\n  400: 'd-icon--size-400',\n  500: 'd-icon--size-500',\n  600: 'd-icon--size-600',\n  700: 'd-icon--size-700',\n  800: 'd-icon--size-800',\n};\n\nexport const ICON_NAMES = iconNames;\n\nexport default {\n  ICON_SIZE_MODIFIERS,\n  ICON_NAMES,\n};\n"],"mappings":";;AAEA,IAAa,IAAsB;CACjC,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN,EAEY,IAAa,GAE1B,IAAe;CACb;CACA;CACD"}

package/dist/lib/icon/icon.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./icon-constants.cjs`);let n=require(`vue`),r=require(`@dialpad/dialtone-icons/vue3`);var i={compatConfig:{MODE:3},name:`DtIcon`,props:{size:{type:String,default:`500`,validator:e=>Object.keys(t.ICON_SIZE_MODIFIERS).includes(e)},name:{type:String,required:!0,validator:e=>t.ICON_NAMES.includes(e)},ariaLabel:{type:String,default:void 0}},data(){return{}},computed:{icon(){return r.icons[`./src/icons/${this.name}.vue`]},iconAriaLabel(){return this.ariaLabel}}};function a(e,t,r,i,a,o){return o.icon?((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(o.icon),{key:0,size:r.size,"aria-label":o.iconAriaLabel,"data-qa":e.$attrs[`data-qa`]??`dt-icon`},null,8,[`size`,`aria-label`,`data-qa`])):(0,n.createCommentVNode)(``,!0)}var o=e.t(i,[[`render`,a]]);exports.default=o;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./icon-constants.cjs`);let n=require(`vue`),r=require(`@dialpad/dialtone-icons/vue`);var i={name:`DtIcon`,props:{size:{type:String,default:`500`,validator:e=>Object.keys(t.ICON_SIZE_MODIFIERS).includes(e)},name:{type:String,required:!0,validator:e=>t.ICON_NAMES.includes(e)},ariaLabel:{type:String,default:void 0}},data(){return{}},computed:{icon(){return r.icons[`./src/icons/${this.name}.vue`]},iconAriaLabel(){return this.ariaLabel}}};function a(e,t,r,i,a,o){return o.icon?((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(o.icon),{key:0,size:r.size,"aria-label":o.iconAriaLabel,"data-qa":e.$attrs[`data-qa`]??`dt-icon`},null,8,[`size`,`aria-label`,`data-qa`])):(0,n.createCommentVNode)(``,!0)}var o=e.t(i,[[`render`,a]]);exports.default=o;
 //# sourceMappingURL=icon.cjs.map

package/dist/lib/icon/icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon.cjs","names":[],"sources":["../../../components/icon/icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"iconAriaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue3';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './icon_constants';\n// import { DialtoneLocalization } from '@/localization';\n// import { toFluentKeyString } from '@/common/utils';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      // i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n\n    iconAriaLabel () {\n      // const fluentKey = toFluentKeyString(this.name);\n      // return this.ariaLabel || this.i18n.$t(`DIALTONE_ICON_${fluentKey}`);\n      return this.ariaLabel;\n    },\n  },\n};\n</script>\n"],"mappings":"oSAoBA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,SAEN,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAE,CAC/D,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACV,UAAY,GAAS,EAAA,WAAW,SAAS,EAAK,CAC/C,CAKD,UAAW,CACT,KAAM,OACN,QAAS,IAAA,GACV,CACF,CAED,MAAQ,CACN,MAAO,EAEN,EAGH,SAAU,CACR,MAAQ,CACN,OAAO,EAAA,MAAM,eAAe,KAAK,KAAK,QAGxC,eAAiB,CAGf,OAAO,KAAK,WAEf,CACF,gCAnES,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBADD,EAAA,KAAI,CAAA,OAER,KAAM,EAAA,KACN,aAAY,EAAA,cACZ,UAAS,EAAA,OAAM,YAAA"}
+{"version":3,"file":"icon.cjs","names":[],"sources":["../../../components/Icon/Icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"iconAriaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './IconConstants';\n// import { DialtoneLocalization } from '@/localization';\n// import { toFluentKeyString } from '@/common/utils';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      // i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n\n    iconAriaLabel () {\n      // const fluentKey = toFluentKeyString(this.name);\n      // return this.ariaLabel || this.i18n.$t(`DIALTONE_ICON_${fluentKey}`);\n      return this.ariaLabel;\n    },\n  },\n};\n</script>\n"],"mappings":"mSAoBA,IAAK,EAAU,CACb,KAAM,SAEN,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAE,CAC/D,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACV,UAAY,GAAS,EAAA,WAAW,SAAS,EAAK,CAC/C,CAKD,UAAW,CACT,KAAM,OACN,QAAS,IAAA,GACV,CACF,CAED,MAAQ,CACN,MAAO,EAEN,EAGH,SAAU,CACR,MAAQ,CACN,OAAO,EAAA,MAAM,eAAe,KAAK,KAAK,QAGxC,eAAiB,CAGf,OAAO,KAAK,WAEf,CACF,gCAlES,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBADD,EAAA,KAAI,CAAA,OAER,KAAM,EAAA,KACN,aAAY,EAAA,cACZ,UAAS,EAAA,OAAM,YAAA"}

package/dist/lib/icon/icon.js

@@ -1,10 +1,9 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import { ICON_NAMES as t, ICON_SIZE_MODIFIERS as n } from "./icon-constants.js";
 import { createBlock as r, createCommentVNode as i, openBlock as a, resolveDynamicComponent as o } from "vue";
-import { icons as s } from "@dialpad/dialtone-icons/vue3";
-//#region components/icon/icon.vue
+import { icons as s } from "@dialpad/dialtone-icons/vue";
+//#region components/Icon/Icon.vue
 var c = {
-	compatConfig: { MODE: 3 },
 	name: "DtIcon",
 	props: {
 		size: {

package/dist/lib/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../../../components/icon/icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"iconAriaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue3';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './icon_constants';\n// import { DialtoneLocalization } from '@/localization';\n// import { toFluentKeyString } from '@/common/utils';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      // i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n\n    iconAriaLabel () {\n      // const fluentKey = toFluentKeyString(this.name);\n      // return this.ariaLabel || this.i18n.$t(`DIALTONE_ICON_${fluentKey}`);\n      return this.ariaLabel;\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AAoBA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,OAAO;EAKL,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAE;GAC/D;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACV,YAAY,MAAS,EAAW,SAAS,EAAK;GAC/C;EAKD,WAAW;GACT,MAAM;GACN,SAAS,KAAA;GACV;EACF;CAED,OAAQ;AACN,SAAO,EAEN;;CAGH,UAAU;EACR,OAAQ;AACN,UAAO,EAAM,eAAe,KAAK,KAAK;;EAGxC,gBAAiB;AAGf,UAAO,KAAK;;EAEf;CACF;;QAnES,EAAA,QAAA,GAAA,EAFR,EAME,EALK,EAAA,KAAI,EAAA;;EAER,MAAM,EAAA;EACN,cAAY,EAAA;EACZ,WAAS,EAAA,OAAM,cAAA"}
+{"version":3,"file":"icon.js","names":[],"sources":["../../../components/Icon/Icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"iconAriaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './IconConstants';\n// import { DialtoneLocalization } from '@/localization';\n// import { toFluentKeyString } from '@/common/utils';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      // i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n\n    iconAriaLabel () {\n      // const fluentKey = toFluentKeyString(this.name);\n      // return this.ariaLabel || this.i18n.$t(`DIALTONE_ICON_${fluentKey}`);\n      return this.ariaLabel;\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AAoBA,IAAK,IAAU;CACb,MAAM;CAEN,OAAO;EAKL,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAE;GAC/D;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACV,YAAY,MAAS,EAAW,SAAS,EAAK;GAC/C;EAKD,WAAW;GACT,MAAM;GACN,SAAS,KAAA;GACV;EACF;CAED,OAAQ;AACN,SAAO,EAEN;;CAGH,UAAU;EACR,OAAQ;AACN,UAAO,EAAM,eAAe,KAAK,KAAK;;EAGxC,gBAAiB;AAGf,UAAO,KAAK;;EAEf;CACF;;QAlES,EAAA,QAAA,GAAA,EAFR,EAME,EALK,EAAA,KAAI,EAAA;;EAER,MAAM,EAAA;EACN,cAAY,EAAA;EACZ,WAAS,EAAA,OAAM,cAAA"}

package/dist/lib/illustration/illustration-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"illustration-constants.cjs","names":["illustrationNames"],"sources":["../../../components/illustration/illustration_constants.js"],"sourcesContent":["import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';\n\nexport const ILLUSTRATION_NAMES = illustrationNames;\n\nexport default {\n  ILLUSTRATION_NAMES,\n};\n"],"mappings":"8MAEA,IAAa,EAAqBA,EAAAA,QAElC,EAAe,CACb,qBACD"}
+{"version":3,"file":"illustration-constants.cjs","names":["illustrationNames"],"sources":["../../../components/Illustration/IllustrationConstants.js"],"sourcesContent":["import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';\n\nexport const ILLUSTRATION_NAMES = illustrationNames;\n\nexport default {\n  ILLUSTRATION_NAMES,\n};\n"],"mappings":"8MAEA,IAAa,EAAqBA,EAAAA,QAElC,EAAe,CACb,qBACD"}

package/dist/lib/illustration/illustration-constants.js

@@ -1,5 +1,5 @@
 import e from "@dialpad/dialtone-icons/illustrations.js";
-//#region components/illustration/illustration_constants.js
+//#region components/Illustration/IllustrationConstants.js
 var t = e, n = { ILLUSTRATION_NAMES: t };
 //#endregion
 export { t as ILLUSTRATION_NAMES, n as default };

package/dist/lib/illustration/illustration-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"illustration-constants.js","names":[],"sources":["../../../components/illustration/illustration_constants.js"],"sourcesContent":["import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';\n\nexport const ILLUSTRATION_NAMES = illustrationNames;\n\nexport default {\n  ILLUSTRATION_NAMES,\n};\n"],"mappings":";;AAEA,IAAa,IAAqB,GAElC,IAAe,EACb,uBACD"}
+{"version":3,"file":"illustration-constants.js","names":[],"sources":["../../../components/Illustration/IllustrationConstants.js"],"sourcesContent":["import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';\n\nexport const ILLUSTRATION_NAMES = illustrationNames;\n\nexport default {\n  ILLUSTRATION_NAMES,\n};\n"],"mappings":";;AAEA,IAAa,IAAqB,GAElC,IAAe,EACb,uBACD"}

package/dist/lib/illustration/illustration.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`./illustration-constants.cjs`);let t=require(`vue`),n=require(`@dialpad/dialtone-icons/vue3`);var r=Object.assign({name:`DtIllustration`},{__name:`illustration`,props:{name:{type:String,required:!0,validator:t=>e.ILLUSTRATION_NAMES.includes(t)}},setup(e){let r=e,i=(0,t.computed)(()=>n.illustrations[`./src/illustrations/${r.name}.vue`]);return(e,n)=>i.value?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(i.value),{key:0,"data-qa":e.$attrs[`data-qa`]??`dt-illustration`},null,8,[`data-qa`])):(0,t.createCommentVNode)(``,!0)}});exports.default=r;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`./illustration-constants.cjs`);let t=require(`vue`),n=require(`@dialpad/dialtone-icons/vue`);var r=Object.assign({name:`DtIllustration`},{__name:`Illustration`,props:{name:{type:String,required:!0,validator:t=>e.ILLUSTRATION_NAMES.includes(t)}},setup(e){let r=e,i=(0,t.computed)(()=>n.illustrations[`./src/illustrations/${r.name}.vue`]);return(e,n)=>i.value?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(i.value),{key:0,"data-qa":e.$attrs[`data-qa`]??`dt-illustration`},null,8,[`data-qa`])):(0,t.createCommentVNode)(``,!0)}});exports.default=r;
 //# sourceMappingURL=illustration.cjs.map

package/dist/lib/illustration/illustration.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"illustration.cjs","names":["$attrs"],"sources":["../../../components/illustration/illustration.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"illustration\"\n    v-if=\"illustration\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n  />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue3';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\ndefineOptions({\n  name: 'DtIllustration',\n});\n\nconst props = defineProps({\n  /**\n     * The illustration name in kebab-case\n     */\n  name: {\n    type: String,\n    required: true,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"mappings":"mZAiBA,IAAM,EAAQ,EAWR,GAAA,EAAA,EAAA,cAA8B,EAAA,cAAc,uBAAuB,EAAM,KAAK,OAAO,cAzBjF,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBADD,EAAA,MAAY,CAAA,OAEhB,UAASA,EAAAA,OAAM,YAAA"}
+{"version":3,"file":"illustration.cjs","names":["$attrs"],"sources":["../../../components/Illustration/Illustration.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"illustration\"\n    v-if=\"illustration\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n  />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue';\nimport { ILLUSTRATION_NAMES } from './IllustrationConstants';\n\ndefineOptions({\n  name: 'DtIllustration',\n});\n\nconst props = defineProps({\n  /**\n     * The illustration name in kebab-case\n     */\n  name: {\n    type: String,\n    required: true,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"mappings":"kZAiBA,IAAM,EAAQ,EAWR,GAAA,EAAA,EAAA,cAA8B,EAAA,cAAc,uBAAuB,EAAM,KAAK,OAAO,cAzBjF,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBADD,EAAA,MAAY,CAAA,OAEhB,UAASA,EAAAA,OAAM,YAAA"}