@dialpad/dialtone-vue 3.151.2 → 3.152.0-beta.2

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

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

package/dist/components/keyboard_shortcut/keyboard_shortcut.vue.cjs

@@ -1,12 +1,25 @@
 "use strict";
-const keyboard_shortcut_constants = require("./keyboard_shortcut_constants.cjs");
+const vue3 = require("@dialpad/dialtone-icons/vue3");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
-const icon = require("../icon/icon.vue.cjs");
+const SHORTCUTS_ICON_ALIASES = {
+  "{win}": vue3.DtIconLayoutGrid,
+  "{arrow-right}": vue3.DtIconArrowRight,
+  "{arrow-left}": vue3.DtIconArrowLeft,
+  "{arrow-up}": vue3.DtIconArrowUp,
+  "{arrow-down}": vue3.DtIconArrowDown,
+  "{cmd}": vue3.DtIconCommand
+};
 const _sfc_main = {
   name: "DtKeyboardShortcut",
   components: {
-    DtIcon: icon
+    DtIconLayoutGrid: vue3.DtIconLayoutGrid,
+    DtIconArrowRight: vue3.DtIconArrowRight,
+    DtIconArrowLeft: vue3.DtIconArrowLeft,
+    DtIconArrowUp: vue3.DtIconArrowUp,
+    DtIconArrowDown: vue3.DtIconArrowDown,
+    DtIconCommand: vue3.DtIconCommand,
+    DtIconPlus: vue3.DtIconPlus
   },
   props: {
     /**
@@ -35,20 +48,22 @@ const _sfc_main = {
   },
   data() {
     return {
-      SHORTCUTS_ICON_ALIASES: keyboard_shortcut_constants.SHORTCUTS_ICON_ALIASES,
       separator: /\+/gi
     };
   },
   computed: {
     icons() {
-      return { ...keyboard_shortcut_constants.SHORTCUTS_ICON_ALIASES, ...keyboard_shortcut_constants.SHORTCUTS_ICON_SEPARATOR };
+      return {
+        ...SHORTCUTS_ICON_ALIASES,
+        "{plus}": vue3.DtIconPlus
+      };
     },
     shortcutWithSeparator() {
       return this.shortcut.replace(this.separator, "{plus}");
     },
     formattedShortcut() {
-      return Object.keys(keyboard_shortcut_constants.SHORTCUTS_ICON_ALIASES).reduce((result, key) => {
-        return result.replace(new RegExp("{" + key + "}", "gi"), keyboard_shortcut_constants.SHORTCUTS_ICON_ALIASES[key]);
+      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {
+        return result.replace(new RegExp("{" + key + "}", "gi"), SHORTCUTS_ICON_ALIASES[key]);
       }, this.shortcutWithSeparator);
     },
     // Splits any icon based aliases into their own array items.
@@ -65,7 +80,6 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = ["innerHTML"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = vue.resolveComponent("dt-icon");
   return vue.openBlock(), vue.createElementBlock("kbd", {
     class: vue.normalizeClass([
       "d-keyboard-shortcut",
@@ -75,16 +89,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     $props.screenReaderText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString($props.screenReaderText), 1)) : vue.createCommentVNode("", true),
     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.formattedShortcutSplit, (item, i) => {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        $options.icons[item] ? (vue.openBlock(), vue.createBlock(_component_dt_icon, {
+        $options.icons[item] ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.icons[item]), {
           key: `${i}-${item}`,
-          name: $options.icons[item],
           size: "100",
           "aria-hidden": "true",
           class: vue.normalizeClass([
             "d-keyboard-shortcut__icon",
             { "d-keyboard-shortcut__icon--inverted": $props.inverted }
           ])
-        }, null, 8, ["name", "class"])) : (vue.openBlock(), vue.createElementBlock("span", {
+        }, null, 8, ["class"])) : (vue.openBlock(), vue.createElementBlock("span", {
           key: `${i}-${item}`,
           "aria-hidden": "true",
           class: vue.normalizeClass([

package/dist/components/keyboard_shortcut/keyboard_shortcut.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard_shortcut.vue.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <dt-icon\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        :name=\"icons[item]\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { SHORTCUTS_ICON_ALIASES, SHORTCUTS_ICON_SEPARATOR } from './keyboard_shortcut_constants';\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      SHORTCUTS_ICON_ALIASES,\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return { ...SHORTCUTS_ICON_ALIASES, ...SHORTCUTS_ICON_SEPARATOR };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["DtIcon","SHORTCUTS_ICON_ALIASES","SHORTCUTS_ICON_SEPARATOR","_createElementBlock","_normalizeClass","_toDisplayString","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":";;;;;AAkDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAA;AAAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,8BACLC,4BAAsB;AAAA,MACtB,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO,EAAE,GAAGA,4BAAAA,wBAAwB,GAAGC,4BAAAA;IACxC;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAKD,4BAAsB,sBAAA,EAAE,OAAO,CAAC,QAAQ,QAAQ;AACjE,eAAO,OAAO,QAAQ,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,GAAGA,mDAAuB,GAAG,CAAC;AAAA,SACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAM,kBAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG;AAOxD,YAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;;EA9GM,OAAM;;;;;0BARVE,IAqCM,mBAAA,OAAA;AAAA,IApCH,OAAKC,IAAAA,eAAA;AAAA;yCAA0E,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,qCADxBD,IAKO,mBAAA,QALP,YAKOE,IAAAA,gBADF,OAAgB,gBAAA,GAAA,CAAA;KAErBC,IAAAA,UAAA,IAAA,GAAAH,IAAA,mBAwBWI,cAvBW,MAAAC,IAAA,WAAA,SAAA,wBAAZ,CAAA,MAAM,MAAC;;QAGP,SAAA,MAAM,IAAI,sBADlBC,IAUE,YAAA,oBAAA;AAAA,UARC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UACjB,MAAM,SAAK,MAAC,IAAI;AAAA,UACjB,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAAKL,IAAAA,eAAA;AAAA;qDAA8F,OAAQ,SAAA;AAAA;4DAK9GD,IASE,mBAAA,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAAKC,IAAAA,eAAA;AAAA;qDAA8F,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA;;;;;;;"}
+{"version":3,"file":"keyboard_shortcut.vue.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        :is=\"icons[item]\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconPlus","_createElementBlock","_normalizeClass","_toDisplayString","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":";;;;AAqDA,MAAM,yBAAyB;AAAA,EAC7B,SAASA,KAAgB;AAAA,EACzB,iBAAiBC,KAAgB;AAAA,EACjC,gBAAgBC,KAAe;AAAA,EAC/B,cAAcC,KAAa;AAAA,EAC3B,gBAAgBC,KAAe;AAAA,EAC/B,SAASC,KAAa;AACxB;AAMA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,kBAAAL,KAAgB;AAAA,IAChB,kBAAAC,KAAgB;AAAA,IAChB,iBAAAC,KAAe;AAAA,mBACfC,KAAa;AAAA,IACb,iBAAAC,KAAe;AAAA,mBACfC,KAAa;AAAA,gBACbC,KAAU;AAAA,EACX;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAUA,KAAU;AAAA;IAEvB;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC,QAAQ,QAAQ;AACjE,eAAO,OAAO,QAAQ,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,GAAG,uBAAuB,GAAG,CAAC;AAAA,SACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAM,kBAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG;AAOxD,YAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;;EAtIM,OAAM;;;;0BARVC,IAqCM,mBAAA,OAAA;AAAA,IApCH,OAAKC,IAAAA,eAAA;AAAA;yCAA0E,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,qCADxBD,IAKO,mBAAA,QALP,YAKOE,IAAAA,gBADF,OAAgB,gBAAA,GAAA,CAAA;KAErBC,IAAAA,UAAA,IAAA,GAAAH,IAAA,mBAwBWI,cAvBW,MAAAC,IAAA,WAAA,SAAA,wBAAZ,CAAA,MAAM,MAAC;;QAGP,SAAA,MAAM,IAAI,sBADlBC,IAAAA,YAUEC,IAAA,wBAPK,SAAK,MAAC,IAAI,CAAA,GAAA;AAAA,UADd,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAElB,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAAKN,IAAAA,eAAA;AAAA;qDAA8F,OAAQ,SAAA;AAAA;oDAK9GD,IASE,mBAAA,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAAKC,IAAAA,eAAA;AAAA;qDAA8F,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA;;;;;;;"}

package/dist/components/keyboard_shortcut/keyboard_shortcut.vue.js

@@ -1,11 +1,24 @@
-import { SHORTCUTS_ICON_ALIASES, SHORTCUTS_ICON_SEPARATOR } from "./keyboard_shortcut_constants.js";
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, Fragment, renderList, createBlock } from "vue";
+import { DtIconLayoutGrid, DtIconArrowRight, DtIconArrowLeft, DtIconArrowUp, DtIconArrowDown, DtIconCommand, DtIconPlus } from "@dialpad/dialtone-icons/vue3";
+import { openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, resolveDynamicComponent } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
-import DtIcon from "../icon/icon.vue.js";
+const SHORTCUTS_ICON_ALIASES = {
+  "{win}": DtIconLayoutGrid,
+  "{arrow-right}": DtIconArrowRight,
+  "{arrow-left}": DtIconArrowLeft,
+  "{arrow-up}": DtIconArrowUp,
+  "{arrow-down}": DtIconArrowDown,
+  "{cmd}": DtIconCommand
+};
 const _sfc_main = {
   name: "DtKeyboardShortcut",
   components: {
-    DtIcon
+    DtIconLayoutGrid,
+    DtIconArrowRight,
+    DtIconArrowLeft,
+    DtIconArrowUp,
+    DtIconArrowDown,
+    DtIconCommand,
+    DtIconPlus
   },
   props: {
     /**
@@ -34,13 +47,15 @@ const _sfc_main = {
   },
   data() {
     return {
-      SHORTCUTS_ICON_ALIASES,
       separator: /\+/gi
     };
   },
   computed: {
     icons() {
-      return { ...SHORTCUTS_ICON_ALIASES, ...SHORTCUTS_ICON_SEPARATOR };
+      return {
+        ...SHORTCUTS_ICON_ALIASES,
+        "{plus}": DtIconPlus
+      };
     },
     shortcutWithSeparator() {
       return this.shortcut.replace(this.separator, "{plus}");
@@ -64,7 +79,6 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = ["innerHTML"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = resolveComponent("dt-icon");
   return openBlock(), createElementBlock("kbd", {
     class: normalizeClass([
       "d-keyboard-shortcut",
@@ -74,16 +88,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     $props.screenReaderText ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString($props.screenReaderText), 1)) : createCommentVNode("", true),
     (openBlock(true), createElementBlock(Fragment, null, renderList($options.formattedShortcutSplit, (item, i) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        $options.icons[item] ? (openBlock(), createBlock(_component_dt_icon, {
+        $options.icons[item] ? (openBlock(), createBlock(resolveDynamicComponent($options.icons[item]), {
           key: `${i}-${item}`,
-          name: $options.icons[item],
           size: "100",
           "aria-hidden": "true",
           class: normalizeClass([
             "d-keyboard-shortcut__icon",
             { "d-keyboard-shortcut__icon--inverted": $props.inverted }
           ])
-        }, null, 8, ["name", "class"])) : (openBlock(), createElementBlock("span", {
+        }, null, 8, ["class"])) : (openBlock(), createElementBlock("span", {
           key: `${i}-${item}`,
           "aria-hidden": "true",
           class: normalizeClass([

package/dist/components/keyboard_shortcut/keyboard_shortcut.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard_shortcut.vue.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <dt-icon\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        :name=\"icons[item]\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { SHORTCUTS_ICON_ALIASES, SHORTCUTS_ICON_SEPARATOR } from './keyboard_shortcut_constants';\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      SHORTCUTS_ICON_ALIASES,\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return { ...SHORTCUTS_ICON_ALIASES, ...SHORTCUTS_ICON_SEPARATOR };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_toDisplayString","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":";;;;AAkDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA,MACA,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO,EAAE,GAAG,wBAAwB,GAAG;IACxC;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC,QAAQ,QAAQ;AACjE,eAAO,OAAO,QAAQ,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,GAAG,uBAAuB,GAAG,CAAC;AAAA,SACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAM,kBAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG;AAOxD,YAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;;EA9GM,OAAM;;;;;sBARVA,mBAqCM,OAAA;AAAA,IApCH,OAAKC,eAAA;AAAA;yCAA0E,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,iCADxBD,mBAKO,QALP,YAKOE,gBADF,OAAgB,gBAAA,GAAA,CAAA;KAErBC,UAAA,IAAA,GAAAH,mBAwBWI,UAvBW,MAAAC,WAAA,SAAA,wBAAZ,CAAA,MAAM,MAAC;;QAGP,SAAA,MAAM,IAAI,kBADlBC,YAUE,oBAAA;AAAA,UARC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UACjB,MAAM,SAAK,MAAC,IAAI;AAAA,UACjB,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAAKL,eAAA;AAAA;qDAA8F,OAAQ,SAAA;AAAA;wDAK9GD,mBASE,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAAKC,eAAA;AAAA;qDAA8F,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA;;;;;;"}
+{"version":3,"file":"keyboard_shortcut.vue.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        :is=\"icons[item]\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_toDisplayString","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":";;;AAqDA,MAAM,yBAAyB;AAAA,EAC7B,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX;AAMA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAU;AAAA;IAEb;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC,QAAQ,QAAQ;AACjE,eAAO,OAAO,QAAQ,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,GAAG,uBAAuB,GAAG,CAAC;AAAA,SACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAM,kBAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG;AAOxD,YAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;;EAtIM,OAAM;;;;sBARVA,mBAqCM,OAAA;AAAA,IApCH,OAAKC,eAAA;AAAA;yCAA0E,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,iCADxBD,mBAKO,QALP,YAKOE,gBADF,OAAgB,gBAAA,GAAA,CAAA;KAErBC,UAAA,IAAA,GAAAH,mBAwBWI,UAvBW,MAAAC,WAAA,SAAA,wBAAZ,CAAA,MAAM,MAAC;;QAGP,SAAA,MAAM,IAAI,kBADlBC,YAUEC,wBAPK,SAAK,MAAC,IAAI,CAAA,GAAA;AAAA,UADd,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAElB,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAAKN,eAAA;AAAA;qDAA8F,OAAQ,SAAA;AAAA;gDAK9GD,mBASE,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAAKC,eAAA;AAAA;qDAA8F,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA;;;;;;"}

package/dist/components/keyboard_shortcut/keyboard_shortcut_constants.cjs

@@ -1,18 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const SHORTCUTS_ICON_ALIASES = {
-  "{win}": "layout-grid",
-  "{arrow-right}": "arrow-right",
-  "{arrow-left}": "arrow-left",
-  "{arrow-up}": "arrow-up",
-  "{arrow-down}": "arrow-down",
-  "{cmd}": "command"
-};
-const SHORTCUTS_ICON_SEPARATOR = {
-  "{plus}": "plus"
-};
-const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ICON_ALIASES);
+const SHORTCUTS_ALIASES_LIST = [
+  "{win}",
+  "{arrow-right}",
+  "{arrow-left}",
+  "{arrow-up}",
+  "{arrow-down}",
+  "{cmd}"
+];
 exports.SHORTCUTS_ALIASES_LIST = SHORTCUTS_ALIASES_LIST;
-exports.SHORTCUTS_ICON_ALIASES = SHORTCUTS_ICON_ALIASES;
-exports.SHORTCUTS_ICON_SEPARATOR = SHORTCUTS_ICON_SEPARATOR;
 //# sourceMappingURL=keyboard_shortcut_constants.cjs.map

package/dist/components/keyboard_shortcut/keyboard_shortcut_constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard_shortcut_constants.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut_constants.js"],"sourcesContent":["export const SHORTCUTS_ICON_ALIASES = {\n  '{win}': 'layout-grid',\n  '{arrow-right}': 'arrow-right',\n  '{arrow-left}': 'arrow-left',\n  '{arrow-up}': 'arrow-up',\n  '{arrow-down}': 'arrow-down',\n  '{cmd}': 'command',\n};\n\nexport const SHORTCUTS_ICON_SEPARATOR = {\n  '{plus}': 'plus',\n};\n\nexport const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ICON_ALIASES);\n"],"names":[],"mappings":";;AAAY,MAAC,yBAAyB;AAAA,EACpC,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX;AAEY,MAAC,2BAA2B;AAAA,EACtC,UAAU;AACZ;AAEY,MAAC,yBAAyB,OAAO,KAAK,sBAAsB;;;;"}
+{"version":3,"file":"keyboard_shortcut_constants.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut_constants.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n  '{win}',\n  '{arrow-right}',\n  '{arrow-left}',\n  '{arrow-up}',\n  '{arrow-down}',\n  '{cmd}',\n];\n"],"names":[],"mappings":";;AAAY,MAAC,yBAAyB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;"}

package/dist/components/keyboard_shortcut/keyboard_shortcut_constants.js

@@ -1,18 +1,12 @@
-const SHORTCUTS_ICON_ALIASES = {
-  "{win}": "layout-grid",
-  "{arrow-right}": "arrow-right",
-  "{arrow-left}": "arrow-left",
-  "{arrow-up}": "arrow-up",
-  "{arrow-down}": "arrow-down",
-  "{cmd}": "command"
-};
-const SHORTCUTS_ICON_SEPARATOR = {
-  "{plus}": "plus"
-};
-const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ICON_ALIASES);
+const SHORTCUTS_ALIASES_LIST = [
+  "{win}",
+  "{arrow-right}",
+  "{arrow-left}",
+  "{arrow-up}",
+  "{arrow-down}",
+  "{cmd}"
+];
 export {
-  SHORTCUTS_ALIASES_LIST,
-  SHORTCUTS_ICON_ALIASES,
-  SHORTCUTS_ICON_SEPARATOR
+  SHORTCUTS_ALIASES_LIST
 };
 //# sourceMappingURL=keyboard_shortcut_constants.js.map

package/dist/components/keyboard_shortcut/keyboard_shortcut_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard_shortcut_constants.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut_constants.js"],"sourcesContent":["export const SHORTCUTS_ICON_ALIASES = {\n  '{win}': 'layout-grid',\n  '{arrow-right}': 'arrow-right',\n  '{arrow-left}': 'arrow-left',\n  '{arrow-up}': 'arrow-up',\n  '{arrow-down}': 'arrow-down',\n  '{cmd}': 'command',\n};\n\nexport const SHORTCUTS_ICON_SEPARATOR = {\n  '{plus}': 'plus',\n};\n\nexport const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ICON_ALIASES);\n"],"names":[],"mappings":"AAAY,MAAC,yBAAyB;AAAA,EACpC,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX;AAEY,MAAC,2BAA2B;AAAA,EACtC,UAAU;AACZ;AAEY,MAAC,yBAAyB,OAAO,KAAK,sBAAsB;"}
+{"version":3,"file":"keyboard_shortcut_constants.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut_constants.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n  '{win}',\n  '{arrow-right}',\n  '{arrow-left}',\n  '{arrow-up}',\n  '{arrow-down}',\n  '{cmd}',\n];\n"],"names":[],"mappings":"AAAY,MAAC,yBAAyB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/components/list_item/list_item.vue.cjs

@@ -1,17 +1,17 @@
 "use strict";
 const list_item_constants = require("./list_item_constants.cjs");
 const common_utils = require("../../common/utils.cjs");
+const vue3 = require("@dialpad/dialtone-icons/vue3");
 const vue = require("vue");
 ;/* empty css                 */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const item_layout = require("../item_layout/item_layout.vue.cjs");
-const icon = require("../icon/icon.vue.cjs");
 const ROLES = ["listitem", "menuitem", "option"];
 const _sfc_main = {
   name: "DtListItem",
   components: {
     DtItemLayout: item_layout,
-    DtIcon: icon
+    DtIconCheck: vue3.DtIconCheck
   },
   /**
    * Value provided from keyboard_list_navigation.js using id prop.
@@ -168,7 +168,7 @@ const _sfc_main = {
   }
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_icon_check = vue.resolveComponent("dt-icon-check");
   return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.elementType), vue.mergeProps({
     id: $props.id,
     class: ["dt-list-item", {
@@ -193,8 +193,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         $props.selected ? {
           name: "selected",
           fn: vue.withCtx(() => [
-            vue.createVNode(_component_dt_icon, {
-              name: "check",
+            vue.createVNode(_component_dt_icon_check, {
               size: "400",
               class: "dt-list-item--selected-icon"
             })

package/dist/components/list_item/list_item.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list_item.vue.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['dt-list-item', {\n      'dt-list-item--focusable': isFocusable,\n      'dt-list-item--highlighted': isHighlighted,\n      'dt-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon\n          name=\"check\"\n          size=\"400\"\n          class=\"dt-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIcon } from '@/components/icon';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIcon,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n\n    /**\n     * Mouse down event\n     *\n     * @event mousedown\n     */\n    'mousedown',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item {\n  list-style: none;\n  background-color: var(--dt-action-color-background-muted-default);\n\n  &:not(.dt-list-item--static) {\n    cursor: pointer;\n    border-radius: var(--dt-size-radius-300);\n  }\n\n  &--focusable:focus,\n  &--focusable:focus-within,\n  &--highlighted {\n    background-color: var(--dt-action-color-background-muted-hover);\n  }\n\n  &--highlighted:active {\n    background-color: var(--dt-action-color-background-muted-active);\n  }\n\n  &--selected-icon {\n    margin-left: var(--dt-space-400);\n  }\n\n  :focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n}\n</style>\n"],"names":["DtItemLayout","DtIcon","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_openBlock","_createSlots","_renderSlot","_createVNode"],"mappings":"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"}
+{"version":3,"file":"list_item.vue.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['dt-list-item', {\n      'dt-list-item--focusable': isFocusable,\n      'dt-list-item--highlighted': isHighlighted,\n      'dt-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check\n          size=\"400\"\n          class=\"dt-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n\n    /**\n     * Mouse down event\n     *\n     * @event mousedown\n     */\n    'mousedown',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item {\n  list-style: none;\n  background-color: var(--dt-action-color-background-muted-default);\n\n  &:not(.dt-list-item--static) {\n    cursor: pointer;\n    border-radius: var(--dt-size-radius-300);\n  }\n\n  &--focusable:focus,\n  &--focusable:focus-within,\n  &--highlighted {\n    background-color: var(--dt-action-color-background-muted-hover);\n  }\n\n  &--highlighted:active {\n    background-color: var(--dt-action-color-background-muted-active);\n  }\n\n  &--selected-icon {\n    margin-left: var(--dt-space-400);\n  }\n\n  :focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n}\n</style>\n"],"names":["DtItemLayout","DtIconCheck","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_openBlock","_createSlots","_renderSlot","_createVNode"],"mappings":"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"}

package/dist/components/list_item/list_item.vue.js

@@ -1,16 +1,16 @@
 import { LIST_ITEM_TYPES, LIST_ITEM_NAVIGATION_TYPES } from "./list_item_constants.js";
 import utils from "../../common/utils.js";
+import { DtIconCheck } from "@dialpad/dialtone-icons/vue3";
 import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, mergeProps, toHandlers, withCtx, createSlots, renderList, renderSlot, createVNode } from "vue";
 /* empty css               */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import DtItemLayout from "../item_layout/item_layout.vue.js";
-import DtIcon from "../icon/icon.vue.js";
 const ROLES = ["listitem", "menuitem", "option"];
 const _sfc_main = {
   name: "DtListItem",
   components: {
     DtItemLayout,
-    DtIcon
+    DtIconCheck
   },
   /**
    * Value provided from keyboard_list_navigation.js using id prop.
@@ -167,7 +167,7 @@ const _sfc_main = {
   }
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = resolveComponent("dt-icon");
+  const _component_dt_icon_check = resolveComponent("dt-icon-check");
   return openBlock(), createBlock(resolveDynamicComponent($props.elementType), mergeProps({
     id: $props.id,
     class: ["dt-list-item", {
@@ -192,8 +192,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         $props.selected ? {
           name: "selected",
           fn: withCtx(() => [
-            createVNode(_component_dt_icon, {
-              name: "check",
+            createVNode(_component_dt_icon_check, {
               size: "400",
               class: "dt-list-item--selected-icon"
             })

package/dist/components/list_item/list_item.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"list_item.vue.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['dt-list-item', {\n      'dt-list-item--focusable': isFocusable,\n      'dt-list-item--highlighted': isHighlighted,\n      'dt-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon\n          name=\"check\"\n          size=\"400\"\n          class=\"dt-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIcon } from '@/components/icon';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIcon,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n\n    /**\n     * Mouse down event\n     *\n     * @event mousedown\n     */\n    'mousedown',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item {\n  list-style: none;\n  background-color: var(--dt-action-color-background-muted-default);\n\n  &:not(.dt-list-item--static) {\n    cursor: pointer;\n    border-radius: var(--dt-size-radius-300);\n  }\n\n  &--focusable:focus,\n  &--focusable:focus-within,\n  &--highlighted {\n    background-color: var(--dt-action-color-background-muted-hover);\n  }\n\n  &--highlighted:active {\n    background-color: var(--dt-action-color-background-muted-active);\n  }\n\n  &--selected-icon {\n    margin-left: var(--dt-space-400);\n  }\n\n  :focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n}\n</style>\n"],"names":["_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_openBlock","_createSlots","_renderSlot","_createVNode"],"mappings":";;;;;;;AAmDA,MAAM,QAAQ,CAAC,YAAY,YAAY,QAAQ;AAM/C,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACD;AAAA;AAAA;AAAA;AAAA,EAKD,QAAQ;AAAA,IACN,aAAa,EAAE,SAAS,KAAM;AAAA,EAC/B;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AAAE,eAAO,MAAM,gBAAiB;AAAA,MAAG;AAAA,IAC/C;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAU,MAAO,SAAS,IAAI;AAAA,IAC3C;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS,gBAAgB;AAAA,MACzB,WAAW,CAAC,MAAM,OAAO,OAAO,eAAe,EAAE,SAAS,CAAC;AAAA,IAC5D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS,2BAA2B;AAAA,MACpC,WAAW,CAAC,MAAM,OAAO,OAAO,0BAA0B,EAAE,SAAS,CAAC;AAAA,IACvE;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,UAAU;AAAA,MACV,kBAAkB;AAAA;EAErB;AAAA,EAED,UAAU;AAAA,IACR,eAAgB;AACd,cAAQ,KAAK,MAAI;AAAA,QACf,KAAK,gBAAgB;AACnB,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACX;AAAA,IACD;AAAA,IAED,oBAAqB;AACnB,aAAO;AAAA,QACL,SAAS,WAAS;AAChB,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,MAAM,KAAK,YAAW,CAAE,GAAG;AACzD,iBAAK,QAAQ,KAAK;AAAA,UACpB;AACA,eAAK,MAAM,WAAW,KAAK;AAAA,QAC5B;AAAA,QAED,WAAW,WAAS;AAClB,eAAK,aAAa,KAAK;AACvB,eAAK,MAAM,aAAa,KAAK;AAAA,QAC9B;AAAA,QAED,YAAY,WAAS;AACnB,eAAK,aAAa,KAAK;AACvB,eAAK,MAAM,cAAc,KAAK;AAAA,QAC/B;AAAA;IAEJ;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAiB;AACf,UAAI,KAAK,aAAa;AACpB,eAAO,KAAK,eAAe,KAAK,YAAW,IAAK,KAAK,OAAO,KAAK,gBAAgB,KAAK;AAAA,MACxF;AACA,aAAO;AAAA,IACR;AAAA,IAED,cAAe;AAEb,aAAO,KAAK,mBAAmB,2BAA2B;AAAA,IAC3D;AAAA;AAAA;AAAA;AAAA,IAKD,cAAe;AACb,aAAO,KAAK,mBAAmB,2BAA2B;AAAA,IAC3D;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,QAAS,GAAG;AAGV,WAAK,MAAM,SAAS,CAAC;AAAA,IACtB;AAAA,IAED,eAAgB;AACd,WAAK,mBAAmB;AAAA,IACzB;AAAA,IAED,eAAgB;AACd,WAAK,mBAAmB;AAAA,IACzB;AAAA,EACF;AACH;;;sBA9OEA,YAqCYC,wBApCL,OAAW,WAAA,GADlBC,WAqCY;AAAA,IAnCT,IAAI,OAAE;AAAA,IACN,OAAK,CAAA,gBAAA;AAAA,iCAAsD,SAAW;AAAA,mCAAqC,SAAa;AAAA,+BAAiC,SAAW;AAAA;IAKpK,UAAU,SAAW,cAAA,IAAA;AAAA,IACrB,MAAM,OAAI;AAAA,IACV,iBAAe,OAAA,SAAsB,aAAA,SAAY,SAAa;AAAA,EAC/D,GAAAC,WAAM,SAAiB,iBAAA,CAAA,GAAA;AAAA,qBAEvB,MAqBY;AAAA,MAnBJ,SAAY,gBAFpBC,UAAA,GAAAJ,YAqBYC,wBApBL,SAAY,YAAA,GAAA,EAAA,KAAA,EAAA,GAAAI,YAAA,EAAA,GAAA,EAAA,GAAA;AAAA,mBAIS,KAAM,QAAA,CAAtB,GAAG,aAAQ;;kBAClB;AAAA,wBAGD,MAAyB;AAAA,cAAzBC,WAAyB,aAAZ,QAAQ;AAAA;;;QAGf,OAAQ;gBACb;AAAA,sBAED,MAIE;AAAA,YAJFC,YAIE,oBAAA;AAAA,cAHA,MAAK;AAAA,cACL,MAAK;AAAA,cACL,OAAM;AAAA;;;;mBAKZD,WAAe,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA;AAAA;;;;;"}
+{"version":3,"file":"list_item.vue.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['dt-list-item', {\n      'dt-list-item--focusable': isFocusable,\n      'dt-list-item--highlighted': isHighlighted,\n      'dt-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check\n          size=\"400\"\n          class=\"dt-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n\n    /**\n     * Mouse down event\n     *\n     * @event mousedown\n     */\n    'mousedown',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item {\n  list-style: none;\n  background-color: var(--dt-action-color-background-muted-default);\n\n  &:not(.dt-list-item--static) {\n    cursor: pointer;\n    border-radius: var(--dt-size-radius-300);\n  }\n\n  &--focusable:focus,\n  &--focusable:focus-within,\n  &--highlighted {\n    background-color: var(--dt-action-color-background-muted-hover);\n  }\n\n  &--highlighted:active {\n    background-color: var(--dt-action-color-background-muted-active);\n  }\n\n  &--selected-icon {\n    margin-left: var(--dt-space-400);\n  }\n\n  :focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n}\n</style>\n"],"names":["_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_openBlock","_createSlots","_renderSlot","_createVNode"],"mappings":"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"}

package/dist/components/modal/modal.vue.cjs

@@ -1,4 +1,5 @@
 "use strict";
+const vue3 = require("@dialpad/dialtone-icons/vue3");
 const modal$1 = require("../../common/mixins/modal.cjs");
 const modal_constants = require("./modal_constants.cjs");
 const common_utils = require("../../common/utils.cjs");
@@ -9,14 +10,13 @@ const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const lazy_show = require("../lazy_show/lazy_show.vue.cjs");
 const button = require("../button/button.vue.cjs");
-const icon = require("../icon/icon.vue.cjs");
 const notice_constants = require("../notice/notice_constants.cjs");
 const _sfc_main = {
   name: "DtModal",
   components: {
     DtLazyShow: lazy_show,
     DtButton: button,
-    DtIcon: icon,
+    DtIconClose: vue3.DtIconClose,
     SrOnlyCloseButton: sr_only_close_button
   },
   mixins: [modal$1, sr_only_close_button$1],
@@ -308,7 +308,7 @@ const _hoisted_4 = {
   class: "d-modal__footer"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
   const _component_dt_button = vue.resolveComponent("dt-button");
   const _component_sr_only_close_button = vue.resolveComponent("sr-only-close-button");
   const _component_dt_lazy_show = vue.resolveComponent("dt-lazy-show");
@@ -396,10 +396,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               "aria-label": $props.closeButtonProps.ariaLabel
             }, $props.closeButtonProps, { onClick: $options.close }), {
               icon: vue.withCtx(() => [
-                vue.createVNode(_component_dt_icon, {
-                  name: "close",
-                  size: "400"
-                })
+                vue.createVNode(_component_dt_icon_close, { size: "400" })
               ]),
               _: 1
             }, 16, ["aria-label", "onClick"])) : vue.createCommentVNode("", true),