@dialpad/dialtone 9.71.0-beta.2 → 9.72.0

package/dist/vue2/components/emoji_picker/modules/emoji_tabset.vue.cjs

@@ -125,7 +125,7 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "d-emoji-picker__tabset" }, [_c("dt-tab-group", { attrs: { "tab-list-class": "d-emoji-picker__tabset-list", "selected": _vm.selectedTab }, scopedSlots: _vm._u([{ key: "tabs", fn: function() {
+  return _c("div", { staticClass: "d-emoji-picker__tabset" }, [_c("dt-tab-group", { attrs: { "size": "sm", "tab-list-class": "d-emoji-picker__tabset-list", "selected": _vm.selectedTab }, scopedSlots: _vm._u([{ key: "tabs", fn: function() {
     return _vm._l(_vm.tabs, function(tab2, index) {
       return _c("dt-tab", { key: tab2.id, ref: `tabsetRef-${index}`, refInFor: true, attrs: { "id": tab2.id, "panel-id": tab2.panelId, "label": tab2.label, "aria-controls": "d-emoji-picker-list", "tabindex": index + 1 }, on: { "!click": function($event) {
         $event.stopPropagation();

package/dist/vue2/components/emoji_picker/modules/emoji_tabset.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_tabset.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_tabset.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__tabset\">\n    <dt-tab-group\n      tab-list-class=\"d-emoji-picker__tabset-list\"\n      :selected=\"selectedTab\"\n    >\n      <template #tabs>\n        <dt-tab\n          v-for=\"(tab, index) in tabs\"\n          :id=\"tab.id\"\n          :ref=\"`tabsetRef-${index}`\"\n          :key=\"tab.id\"\n          :panel-id=\"tab.panelId\"\n          :label=\"tab.label\"\n          aria-controls=\"d-emoji-picker-list\"\n          :tabindex=\"index + 1\"\n          @click.capture.stop=\"selectTabset(tab.id)\"\n          @keydown=\"handleKeyDown($event, tab.id)\"\n        >\n          <dt-icon\n            size=\"400\"\n            :name=\"tab.icon\"\n          />\n        </dt-tab>\n      </template>\n    </dt-tab-group>\n  </div>\n</template>\n\n<script>\nimport DtTabGroup from '@/components/tabs/tab_group.vue';\nimport DtTab from '@/components/tabs/tab.vue';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nexport default {\n  name: 'EmojiTabset',\n\n  components: {\n    DtTabGroup,\n    DtTab,\n    DtIcon,\n  },\n\n  props: {\n    showRecentlyUsedTab: {\n      type: Boolean,\n      default: false,\n    },\n\n    scrollIntoTab: {\n      type: Number,\n      required: true,\n    },\n\n    isScrolling: {\n      type: Boolean,\n      default: false,\n    },\n\n    emojiFilter: {\n      type: String,\n      default: '',\n    },\n\n    tabSetLabels: {\n      type: Array,\n      required: true,\n    },\n  },\n\n  data () {\n    return {\n      selectedTab: '1',\n      tabsetRef: [],\n      TABS_DATA: [\n        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: 'clock' },\n        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: 'satisfied' },\n        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: 'living-thing' },\n        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: 'food' },\n        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: 'object' },\n        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: 'transportation' },\n        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: 'lightbulb' },\n        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: 'heart' },\n        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: 'flag' },\n      ],\n    };\n  },\n\n  computed: {\n    tabs () {\n      const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n      return tabsData.map((tab, index) => ({\n        ...tab,\n        label: this.tabSetLabels[index],\n        id: (index + 1).toString(),\n        panelId: (index + 1).toString(),\n      }));\n    },\n\n    isSearching () {\n      return this.emojiFilter.length > 0;\n    },\n  },\n\n  watch: {\n    scrollIntoTab: function (newVal) {\n      if (!this.isScrolling && !this.isSearching) {\n        this.selectedTab = (newVal + 1).toString();\n      }\n    },\n\n    isSearching: function (newVal) {\n      if (newVal) {\n        this.selectedTab = null;\n      }\n    },\n  },\n\n  mounted () {\n    this.$nextTick(() => {\n      this.setTabsetRef();\n    });\n  },\n\n  methods: {\n    selectTabset (id) {\n      if (!this.isScrolling) {\n        this.selectedTab = id;\n      }\n      this.$emit('selected-tabset', id);\n    },\n\n    setTabsetRef () {\n      this.tabs.forEach((skin, index) => {\n        const refKey = `tabsetRef-${index}`;\n        if (this.$refs[refKey]) {\n          this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n        }\n      });\n    },\n\n    focusTabset () {\n      if (this.tabsetRef[0]) {\n        this.tabsetRef[0].focus();\n      }\n    },\n\n    // eslint-disable-next-line complexity\n    handleKeyDown (event, tabId) {\n      if (event.key === 'Enter') {\n        this.selectTabset(tabId);\n        if (this.tabsetRef[tabId - 1]) {\n          this.tabsetRef[tabId - 1].blur();\n        }\n      }\n\n      if (event.key === 'Tab') {\n        event.preventDefault();\n        if (event.shiftKey) {\n          this.$emit('focus-skin-selector');\n        } else {\n          this.$emit('focus-search-input');\n        }\n      }\n\n      if (event.key === 'ArrowDown') {\n        this.$emit('focus-search-input');\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtTabGroup","DtTab","DtIcon","EMOJI_PICKER_CATEGORIES","tab"],"mappings":"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"}
+{"version":3,"file":"emoji_tabset.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_tabset.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__tabset\">\n    <dt-tab-group\n      size=\"sm\"\n      tab-list-class=\"d-emoji-picker__tabset-list\"\n      :selected=\"selectedTab\"\n    >\n      <template #tabs>\n        <dt-tab\n          v-for=\"(tab, index) in tabs\"\n          :id=\"tab.id\"\n          :ref=\"`tabsetRef-${index}`\"\n          :key=\"tab.id\"\n          :panel-id=\"tab.panelId\"\n          :label=\"tab.label\"\n          aria-controls=\"d-emoji-picker-list\"\n          :tabindex=\"index + 1\"\n          @click.capture.stop=\"selectTabset(tab.id)\"\n          @keydown=\"handleKeyDown($event, tab.id)\"\n        >\n          <dt-icon\n            size=\"400\"\n            :name=\"tab.icon\"\n          />\n        </dt-tab>\n      </template>\n    </dt-tab-group>\n  </div>\n</template>\n\n<script>\nimport DtTabGroup from '@/components/tabs/tab_group.vue';\nimport DtTab from '@/components/tabs/tab.vue';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nexport default {\n  name: 'EmojiTabset',\n\n  components: {\n    DtTabGroup,\n    DtTab,\n    DtIcon,\n  },\n\n  props: {\n    showRecentlyUsedTab: {\n      type: Boolean,\n      default: false,\n    },\n\n    scrollIntoTab: {\n      type: Number,\n      required: true,\n    },\n\n    isScrolling: {\n      type: Boolean,\n      default: false,\n    },\n\n    emojiFilter: {\n      type: String,\n      default: '',\n    },\n\n    tabSetLabels: {\n      type: Array,\n      required: true,\n    },\n  },\n\n  data () {\n    return {\n      selectedTab: '1',\n      tabsetRef: [],\n      TABS_DATA: [\n        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: 'clock' },\n        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: 'satisfied' },\n        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: 'living-thing' },\n        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: 'food' },\n        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: 'object' },\n        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: 'transportation' },\n        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: 'lightbulb' },\n        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: 'heart' },\n        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: 'flag' },\n      ],\n    };\n  },\n\n  computed: {\n    tabs () {\n      const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n      return tabsData.map((tab, index) => ({\n        ...tab,\n        label: this.tabSetLabels[index],\n        id: (index + 1).toString(),\n        panelId: (index + 1).toString(),\n      }));\n    },\n\n    isSearching () {\n      return this.emojiFilter.length > 0;\n    },\n  },\n\n  watch: {\n    scrollIntoTab: function (newVal) {\n      if (!this.isScrolling && !this.isSearching) {\n        this.selectedTab = (newVal + 1).toString();\n      }\n    },\n\n    isSearching: function (newVal) {\n      if (newVal) {\n        this.selectedTab = null;\n      }\n    },\n  },\n\n  mounted () {\n    this.$nextTick(() => {\n      this.setTabsetRef();\n    });\n  },\n\n  methods: {\n    selectTabset (id) {\n      if (!this.isScrolling) {\n        this.selectedTab = id;\n      }\n      this.$emit('selected-tabset', id);\n    },\n\n    setTabsetRef () {\n      this.tabs.forEach((skin, index) => {\n        const refKey = `tabsetRef-${index}`;\n        if (this.$refs[refKey]) {\n          this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n        }\n      });\n    },\n\n    focusTabset () {\n      if (this.tabsetRef[0]) {\n        this.tabsetRef[0].focus();\n      }\n    },\n\n    // eslint-disable-next-line complexity\n    handleKeyDown (event, tabId) {\n      if (event.key === 'Enter') {\n        this.selectTabset(tabId);\n        if (this.tabsetRef[tabId - 1]) {\n          this.tabsetRef[tabId - 1].blur();\n        }\n      }\n\n      if (event.key === 'Tab') {\n        event.preventDefault();\n        if (event.shiftKey) {\n          this.$emit('focus-skin-selector');\n        } else {\n          this.$emit('focus-search-input');\n        }\n      }\n\n      if (event.key === 'ArrowDown') {\n        this.$emit('focus-search-input');\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtTabGroup","DtTab","DtIcon","EMOJI_PICKER_CATEGORIES","tab"],"mappings":"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"}

package/dist/vue2/components/emoji_picker/modules/emoji_tabset.vue.js

@@ -124,7 +124,7 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "d-emoji-picker__tabset" }, [_c("dt-tab-group", { attrs: { "tab-list-class": "d-emoji-picker__tabset-list", "selected": _vm.selectedTab }, scopedSlots: _vm._u([{ key: "tabs", fn: function() {
+  return _c("div", { staticClass: "d-emoji-picker__tabset" }, [_c("dt-tab-group", { attrs: { "size": "sm", "tab-list-class": "d-emoji-picker__tabset-list", "selected": _vm.selectedTab }, scopedSlots: _vm._u([{ key: "tabs", fn: function() {
     return _vm._l(_vm.tabs, function(tab, index) {
       return _c("dt-tab", { key: tab.id, ref: `tabsetRef-${index}`, refInFor: true, attrs: { "id": tab.id, "panel-id": tab.panelId, "label": tab.label, "aria-controls": "d-emoji-picker-list", "tabindex": index + 1 }, on: { "!click": function($event) {
         $event.stopPropagation();

package/dist/vue2/components/emoji_picker/modules/emoji_tabset.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_tabset.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_tabset.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__tabset\">\n    <dt-tab-group\n      tab-list-class=\"d-emoji-picker__tabset-list\"\n      :selected=\"selectedTab\"\n    >\n      <template #tabs>\n        <dt-tab\n          v-for=\"(tab, index) in tabs\"\n          :id=\"tab.id\"\n          :ref=\"`tabsetRef-${index}`\"\n          :key=\"tab.id\"\n          :panel-id=\"tab.panelId\"\n          :label=\"tab.label\"\n          aria-controls=\"d-emoji-picker-list\"\n          :tabindex=\"index + 1\"\n          @click.capture.stop=\"selectTabset(tab.id)\"\n          @keydown=\"handleKeyDown($event, tab.id)\"\n        >\n          <dt-icon\n            size=\"400\"\n            :name=\"tab.icon\"\n          />\n        </dt-tab>\n      </template>\n    </dt-tab-group>\n  </div>\n</template>\n\n<script>\nimport DtTabGroup from '@/components/tabs/tab_group.vue';\nimport DtTab from '@/components/tabs/tab.vue';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nexport default {\n  name: 'EmojiTabset',\n\n  components: {\n    DtTabGroup,\n    DtTab,\n    DtIcon,\n  },\n\n  props: {\n    showRecentlyUsedTab: {\n      type: Boolean,\n      default: false,\n    },\n\n    scrollIntoTab: {\n      type: Number,\n      required: true,\n    },\n\n    isScrolling: {\n      type: Boolean,\n      default: false,\n    },\n\n    emojiFilter: {\n      type: String,\n      default: '',\n    },\n\n    tabSetLabels: {\n      type: Array,\n      required: true,\n    },\n  },\n\n  data () {\n    return {\n      selectedTab: '1',\n      tabsetRef: [],\n      TABS_DATA: [\n        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: 'clock' },\n        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: 'satisfied' },\n        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: 'living-thing' },\n        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: 'food' },\n        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: 'object' },\n        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: 'transportation' },\n        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: 'lightbulb' },\n        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: 'heart' },\n        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: 'flag' },\n      ],\n    };\n  },\n\n  computed: {\n    tabs () {\n      const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n      return tabsData.map((tab, index) => ({\n        ...tab,\n        label: this.tabSetLabels[index],\n        id: (index + 1).toString(),\n        panelId: (index + 1).toString(),\n      }));\n    },\n\n    isSearching () {\n      return this.emojiFilter.length > 0;\n    },\n  },\n\n  watch: {\n    scrollIntoTab: function (newVal) {\n      if (!this.isScrolling && !this.isSearching) {\n        this.selectedTab = (newVal + 1).toString();\n      }\n    },\n\n    isSearching: function (newVal) {\n      if (newVal) {\n        this.selectedTab = null;\n      }\n    },\n  },\n\n  mounted () {\n    this.$nextTick(() => {\n      this.setTabsetRef();\n    });\n  },\n\n  methods: {\n    selectTabset (id) {\n      if (!this.isScrolling) {\n        this.selectedTab = id;\n      }\n      this.$emit('selected-tabset', id);\n    },\n\n    setTabsetRef () {\n      this.tabs.forEach((skin, index) => {\n        const refKey = `tabsetRef-${index}`;\n        if (this.$refs[refKey]) {\n          this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n        }\n      });\n    },\n\n    focusTabset () {\n      if (this.tabsetRef[0]) {\n        this.tabsetRef[0].focus();\n      }\n    },\n\n    // eslint-disable-next-line complexity\n    handleKeyDown (event, tabId) {\n      if (event.key === 'Enter') {\n        this.selectTabset(tabId);\n        if (this.tabsetRef[tabId - 1]) {\n          this.tabsetRef[tabId - 1].blur();\n        }\n      }\n\n      if (event.key === 'Tab') {\n        event.preventDefault();\n        if (event.shiftKey) {\n          this.$emit('focus-skin-selector');\n        } else {\n          this.$emit('focus-search-input');\n        }\n      }\n\n      if (event.key === 'ArrowDown') {\n        this.$emit('focus-search-input');\n      }\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"emoji_tabset.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_tabset.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__tabset\">\n    <dt-tab-group\n      size=\"sm\"\n      tab-list-class=\"d-emoji-picker__tabset-list\"\n      :selected=\"selectedTab\"\n    >\n      <template #tabs>\n        <dt-tab\n          v-for=\"(tab, index) in tabs\"\n          :id=\"tab.id\"\n          :ref=\"`tabsetRef-${index}`\"\n          :key=\"tab.id\"\n          :panel-id=\"tab.panelId\"\n          :label=\"tab.label\"\n          aria-controls=\"d-emoji-picker-list\"\n          :tabindex=\"index + 1\"\n          @click.capture.stop=\"selectTabset(tab.id)\"\n          @keydown=\"handleKeyDown($event, tab.id)\"\n        >\n          <dt-icon\n            size=\"400\"\n            :name=\"tab.icon\"\n          />\n        </dt-tab>\n      </template>\n    </dt-tab-group>\n  </div>\n</template>\n\n<script>\nimport DtTabGroup from '@/components/tabs/tab_group.vue';\nimport DtTab from '@/components/tabs/tab.vue';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { EMOJI_PICKER_CATEGORIES } from '@/components/emoji_picker';\n\nexport default {\n  name: 'EmojiTabset',\n\n  components: {\n    DtTabGroup,\n    DtTab,\n    DtIcon,\n  },\n\n  props: {\n    showRecentlyUsedTab: {\n      type: Boolean,\n      default: false,\n    },\n\n    scrollIntoTab: {\n      type: Number,\n      required: true,\n    },\n\n    isScrolling: {\n      type: Boolean,\n      default: false,\n    },\n\n    emojiFilter: {\n      type: String,\n      default: '',\n    },\n\n    tabSetLabels: {\n      type: Array,\n      required: true,\n    },\n  },\n\n  data () {\n    return {\n      selectedTab: '1',\n      tabsetRef: [],\n      TABS_DATA: [\n        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: 'clock' },\n        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: 'satisfied' },\n        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: 'living-thing' },\n        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: 'food' },\n        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: 'object' },\n        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: 'transportation' },\n        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: 'lightbulb' },\n        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: 'heart' },\n        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: 'flag' },\n      ],\n    };\n  },\n\n  computed: {\n    tabs () {\n      const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);\n      return tabsData.map((tab, index) => ({\n        ...tab,\n        label: this.tabSetLabels[index],\n        id: (index + 1).toString(),\n        panelId: (index + 1).toString(),\n      }));\n    },\n\n    isSearching () {\n      return this.emojiFilter.length > 0;\n    },\n  },\n\n  watch: {\n    scrollIntoTab: function (newVal) {\n      if (!this.isScrolling && !this.isSearching) {\n        this.selectedTab = (newVal + 1).toString();\n      }\n    },\n\n    isSearching: function (newVal) {\n      if (newVal) {\n        this.selectedTab = null;\n      }\n    },\n  },\n\n  mounted () {\n    this.$nextTick(() => {\n      this.setTabsetRef();\n    });\n  },\n\n  methods: {\n    selectTabset (id) {\n      if (!this.isScrolling) {\n        this.selectedTab = id;\n      }\n      this.$emit('selected-tabset', id);\n    },\n\n    setTabsetRef () {\n      this.tabs.forEach((skin, index) => {\n        const refKey = `tabsetRef-${index}`;\n        if (this.$refs[refKey]) {\n          this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);\n        }\n      });\n    },\n\n    focusTabset () {\n      if (this.tabsetRef[0]) {\n        this.tabsetRef[0].focus();\n      }\n    },\n\n    // eslint-disable-next-line complexity\n    handleKeyDown (event, tabId) {\n      if (event.key === 'Enter') {\n        this.selectTabset(tabId);\n        if (this.tabsetRef[tabId - 1]) {\n          this.tabsetRef[tabId - 1].blur();\n        }\n      }\n\n      if (event.key === 'Tab') {\n        event.preventDefault();\n        if (event.shiftKey) {\n          this.$emit('focus-skin-selector');\n        } else {\n          this.$emit('focus-search-input');\n        }\n      }\n\n      if (event.key === 'ArrowDown') {\n        this.$emit('focus-search-input');\n      }\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}

package/dist/vue3/common/sr_only_close_button.vue.cjs

@@ -1,12 +1,12 @@
 "use strict";
-const vue3 = require("@dialpad/dialtone-icons/vue3");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../_virtual/_plugin-vue_export-helper.cjs");
+const icon = require("../components/icon/icon.vue.cjs");
 const button = require("../components/button/button.vue.cjs");
 const _sfc_main = {
   name: "SrOnlyCloseButton",
   components: {
-    DtIconClose: vue3.DtIconClose,
+    DtIcon: icon,
     DtButton: button
   },
   props: {
@@ -27,7 +27,7 @@ const _sfc_main = {
   }
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
   const _component_dt_button = vue.resolveComponent("dt-button");
   return vue.openBlock(), vue.createBlock(_component_dt_button, {
     id: "sr-only-close-button",
@@ -38,7 +38,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: vue.withKeys(vue.withModifiers($options.close, ["prevent", "stop"]), ["space"])
   }, {
     default: vue.withCtx(() => [
-      vue.createVNode(_component_dt_icon_close)
+      vue.createVNode(_component_dt_icon, { name: "close" })
     ]),
     _: 1
   }, 8, ["aria-label", "onClick", "onKeydown"]);

package/dist/vue3/common/sr_only_close_button.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sr_only_close_button.vue.cjs","sources":["../../common/sr_only_close_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    id=\"sr-only-close-button\"\n    data-qa=\"dt-sr-only-close-button\"\n    class=\"d-vi-visible-sr\"\n    :aria-label=\"visuallyHiddenCloseLabel\"\n    @click=\"close\"\n    @keydown.space.prevent.stop=\"close\"\n  >\n    <dt-icon-close />\n  </dt-button>\n</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'SrOnlyCloseButton',\n  components: {\n    DtIconClose,\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Label for the visually hidden close button\n     * Required if visuallyHiddenClose is set to `true`\n     */\n    visuallyHiddenCloseLabel: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: ['close'],\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["DtIconClose","DtButton","_createBlock","_createVNode"],"mappings":";;;;;AAiBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,iBACVA,KAAW;AAAA,IACX,UAAAC;AAAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,0BAA0B;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACnB;AAAA,EACF;AACH;;;;0BAzCEC,IASY,YAAA,sBAAA;AAAA,IARV,IAAG;AAAA,IACH,WAAQ;AAAA,IACR,OAAM;AAAA,IACL,cAAY,OAAwB;AAAA,IACpC,SAAO,SAAK;AAAA,IACZ,0CAA4B,SAAK,OAAA,CAAA,WAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;yBAElC,MAAiB;AAAA,MAAjBC,IAAAA,YAAiB,wBAAA;AAAA;;;;;;"}
+{"version":3,"file":"sr_only_close_button.vue.cjs","sources":["../../common/sr_only_close_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    id=\"sr-only-close-button\"\n    data-qa=\"dt-sr-only-close-button\"\n    class=\"d-vi-visible-sr\"\n    :aria-label=\"visuallyHiddenCloseLabel\"\n    @click=\"close\"\n    @keydown.space.prevent.stop=\"close\"\n  >\n    <dt-icon name=\"close\" />\n  </dt-button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'SrOnlyCloseButton',\n  components: {\n    DtIcon,\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Label for the visually hidden close button\n     * Required if visuallyHiddenClose is set to `true`\n     */\n    visuallyHiddenCloseLabel: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: ['close'],\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["DtIcon","DtButton","_createBlock","_createVNode"],"mappings":";;;;;AAiBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV,QAAAA;AAAAA,IACA,UAAAC;AAAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,0BAA0B;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACnB;AAAA,EACF;AACH;;;;0BAzCEC,IASY,YAAA,sBAAA;AAAA,IARV,IAAG;AAAA,IACH,WAAQ;AAAA,IACR,OAAM;AAAA,IACL,cAAY,OAAwB;AAAA,IACpC,SAAO,SAAK;AAAA,IACZ,0CAA4B,SAAK,OAAA,CAAA,WAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;yBAElC,MAAwB;AAAA,MAAxBC,IAAAA,YAAwB,oBAAA,EAAf,MAAK,QAAO,CAAA;AAAA;;;;;;"}

package/dist/vue3/common/sr_only_close_button.vue.js

@@ -1,11 +1,11 @@
-import { DtIconClose } from "@dialpad/dialtone-icons/vue3";
 import { resolveComponent, openBlock, createBlock, withKeys, withModifiers, withCtx, createVNode } from "vue";
 import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+import DtIcon from "../components/icon/icon.vue.js";
 import DtButton from "../components/button/button.vue.js";
 const _sfc_main = {
   name: "SrOnlyCloseButton",
   components: {
-    DtIconClose,
+    DtIcon,
     DtButton
   },
   props: {
@@ -26,7 +26,7 @@ const _sfc_main = {
   }
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon_close = resolveComponent("dt-icon-close");
+  const _component_dt_icon = resolveComponent("dt-icon");
   const _component_dt_button = resolveComponent("dt-button");
   return openBlock(), createBlock(_component_dt_button, {
     id: "sr-only-close-button",
@@ -37,7 +37,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: withKeys(withModifiers($options.close, ["prevent", "stop"]), ["space"])
   }, {
     default: withCtx(() => [
-      createVNode(_component_dt_icon_close)
+      createVNode(_component_dt_icon, { name: "close" })
     ]),
     _: 1
   }, 8, ["aria-label", "onClick", "onKeydown"]);

package/dist/vue3/common/sr_only_close_button.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"sr_only_close_button.vue.js","sources":["../../common/sr_only_close_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    id=\"sr-only-close-button\"\n    data-qa=\"dt-sr-only-close-button\"\n    class=\"d-vi-visible-sr\"\n    :aria-label=\"visuallyHiddenCloseLabel\"\n    @click=\"close\"\n    @keydown.space.prevent.stop=\"close\"\n  >\n    <dt-icon-close />\n  </dt-button>\n</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'SrOnlyCloseButton',\n  components: {\n    DtIconClose,\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Label for the visually hidden close button\n     * Required if visuallyHiddenClose is set to `true`\n     */\n    visuallyHiddenCloseLabel: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: ['close'],\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["_createBlock","_createVNode"],"mappings":";;;;AAiBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,0BAA0B;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACnB;AAAA,EACF;AACH;;;;sBAzCEA,YASY,sBAAA;AAAA,IARV,IAAG;AAAA,IACH,WAAQ;AAAA,IACR,OAAM;AAAA,IACL,cAAY,OAAwB;AAAA,IACpC,SAAO,SAAK;AAAA,IACZ,kCAA4B,SAAK,OAAA,CAAA,WAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;qBAElC,MAAiB;AAAA,MAAjBC,YAAiB,wBAAA;AAAA;;;;;"}
+{"version":3,"file":"sr_only_close_button.vue.js","sources":["../../common/sr_only_close_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    id=\"sr-only-close-button\"\n    data-qa=\"dt-sr-only-close-button\"\n    class=\"d-vi-visible-sr\"\n    :aria-label=\"visuallyHiddenCloseLabel\"\n    @click=\"close\"\n    @keydown.space.prevent.stop=\"close\"\n  >\n    <dt-icon name=\"close\" />\n  </dt-button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'SrOnlyCloseButton',\n  components: {\n    DtIcon,\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Label for the visually hidden close button\n     * Required if visuallyHiddenClose is set to `true`\n     */\n    visuallyHiddenCloseLabel: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: ['close'],\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["_createBlock","_createVNode"],"mappings":";;;;AAiBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,0BAA0B;AAAA,MACxB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACnB;AAAA,EACF;AACH;;;;sBAzCEA,YASY,sBAAA;AAAA,IARV,IAAG;AAAA,IACH,WAAQ;AAAA,IACR,OAAM;AAAA,IACL,cAAY,OAAwB;AAAA,IACpC,SAAO,SAAK;AAAA,IACZ,kCAA4B,SAAK,OAAA,CAAA,WAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;qBAElC,MAAwB;AAAA,MAAxBC,YAAwB,oBAAA,EAAf,MAAK,QAAO,CAAA;AAAA;;;;;"}

package/dist/vue3/common/storybook_utils.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const iconNames = require("@dialpad/dialtone-icons/icons.js");
+function getIconNames() {
+  return [void 0, ...iconNames];
+}
+exports.getIconNames = getIconNames;
+//# sourceMappingURL=storybook_utils.cjs.map

package/dist/vue3/common/storybook_utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"storybook_utils.cjs","sources":["../../common/storybook_utils.js"],"sourcesContent":["import iconNames from '@dialpad/dialtone-icons/icons.js';\nimport illustrationNames from '@dialpad/dialtone-icons/illustrations.js';\n\n/**\n * Will use a Vue SFC to render the template rather than a template string.\n * This is useful for more complex components that are hard to work with and\n * get messy when rendered via a template string. Will pass args and argTypes\n * into the component so it is able to be live edited with storybook controls addon.\n * @param {object} args storybook control args\n * @param {component} templateComponent vue component template for rendering to storybook.\n *                                      Note this should not be the component itself,\n *                                      but rather the usage of that component.\n * @returns {component} the template component with props and args added.\n */\nexport const createTemplateFromVueFile = (args, argTypes, templateComponent) => ({\n  components: { templateComponent },\n  setup () {\n    return { args };\n  },\n  template: '<template-component v-bind=\"args\"></template-component>',\n});\n\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIconNames () {\n  return [undefined, ...iconNames];\n}\n\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIllustrationNames () {\n  return [undefined, ...illustrationNames];\n}\n\nexport const generateTemplate = (component,\n  { props = [], excludeProps = [], customProps = [], childTemplate } = {}) => {\n  if (!component) {\n    console.warn('Generate template: Please provide a component');\n    return '';\n  }\n\n  const { name, props: componentProps } = component;\n  const finalProps = props.length ? props : Object.keys(componentProps);\n  const normalizedName = name.split(/(?=[A-Z])/).join('-').toLowerCase();\n\n  const startFragment = `<${normalizedName}`;\n\n  const propFragments = finalProps\n    .filter(prop => !excludeProps.includes(prop))\n    .map(prop => `:${prop}=\"${prop}\"`);\n\n  const endFragment = childTemplate ? `>${childTemplate}</${normalizedName}>` : ' />';\n\n  return [startFragment, ...propFragments, ...customProps, endFragment].join(' ');\n};\n\nexport default {\n  generateTemplate,\n  createTemplateFromVueFile,\n  getIllustrationNames,\n  getIconNames,\n};\n"],"names":[],"mappings":";;;AA0BO,SAAS,eAAgB;AAC9B,SAAO,CAAC,QAAW,GAAG,SAAS;AACjC;;"}

package/dist/vue3/common/storybook_utils.js

@@ -0,0 +1,8 @@
+import iconNames from "@dialpad/dialtone-icons/icons.js";
+function getIconNames() {
+  return [void 0, ...iconNames];
+}
+export {
+  getIconNames
+};
+//# sourceMappingURL=storybook_utils.js.map

package/dist/vue3/common/storybook_utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storybook_utils.js","sources":["../../common/storybook_utils.js"],"sourcesContent":["import iconNames from '@dialpad/dialtone-icons/icons.js';\nimport illustrationNames from '@dialpad/dialtone-icons/illustrations.js';\n\n/**\n * Will use a Vue SFC to render the template rather than a template string.\n * This is useful for more complex components that are hard to work with and\n * get messy when rendered via a template string. Will pass args and argTypes\n * into the component so it is able to be live edited with storybook controls addon.\n * @param {object} args storybook control args\n * @param {component} templateComponent vue component template for rendering to storybook.\n *                                      Note this should not be the component itself,\n *                                      but rather the usage of that component.\n * @returns {component} the template component with props and args added.\n */\nexport const createTemplateFromVueFile = (args, argTypes, templateComponent) => ({\n  components: { templateComponent },\n  setup () {\n    return { args };\n  },\n  template: '<template-component v-bind=\"args\"></template-component>',\n});\n\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIconNames () {\n  return [undefined, ...iconNames];\n}\n\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIllustrationNames () {\n  return [undefined, ...illustrationNames];\n}\n\nexport const generateTemplate = (component,\n  { props = [], excludeProps = [], customProps = [], childTemplate } = {}) => {\n  if (!component) {\n    console.warn('Generate template: Please provide a component');\n    return '';\n  }\n\n  const { name, props: componentProps } = component;\n  const finalProps = props.length ? props : Object.keys(componentProps);\n  const normalizedName = name.split(/(?=[A-Z])/).join('-').toLowerCase();\n\n  const startFragment = `<${normalizedName}`;\n\n  const propFragments = finalProps\n    .filter(prop => !excludeProps.includes(prop))\n    .map(prop => `:${prop}=\"${prop}\"`);\n\n  const endFragment = childTemplate ? `>${childTemplate}</${normalizedName}>` : ' />';\n\n  return [startFragment, ...propFragments, ...customProps, endFragment].join(' ');\n};\n\nexport default {\n  generateTemplate,\n  createTemplateFromVueFile,\n  getIllustrationNames,\n  getIconNames,\n};\n"],"names":[],"mappings":";AA0BO,SAAS,eAAgB;AAC9B,SAAO,CAAC,QAAW,GAAG,SAAS;AACjC;"}