@dialpad/dialtone-vue 2.152.1 → 2.153.0

package/dist/lib/emoji-picker.js

@@ -1,4 +1,4 @@
-import { DtTabGroup, DtTab } from "../chunks/tab-V4cb44Ry.js";
+import { DtTabGroup, DtTab } from "../chunks/tab-muPOS7JE.js";
 import { DtIcon } from "./icon.js";
 import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
 import { DtInput } from "./input.js";
@@ -6,16 +6,16 @@ import { DtButton } from "./button.js";
 import { emojisGrouped } from "@dialpad/dialtone-emojis";
 import { DtTooltip } from "./tooltip.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-TdxqLsS2.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "../common/constants.js";
 import "../common/utils.js";
 import "vue";
-import "../chunks/input-6kbd8Pju.js";
+import "../chunks/input-PhJeBN6r.js";
 import "../common/validators.js";
 import "./validation-messages.js";
 import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/popover_constants-WsOUIY-m.js";
+import "../chunks/popover_constants-6YkPPbnk.js";
 import "tippy.js";
 const _sfc_main$5 = {
   name: "EmojiTabset",
@@ -50,17 +50,34 @@ const _sfc_main$5 = {
     return {
       selectedTab: "1",
       tabsetRef: [],
-      TABS_DATA: [
-        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: "clock" },
-        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: "satisfied" },
-        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: "living-thing" },
-        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: "food" },
-        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: "object" },
-        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: "transportation" },
-        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: "lightbulb" },
-        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: "heart" },
-        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: "flag" }
-      ]
+      TABS_DATA: [{
+        label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED,
+        icon: "clock"
+      }, {
+        label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE,
+        icon: "satisfied"
+      }, {
+        label: EMOJI_PICKER_CATEGORIES.NATURE,
+        icon: "living-thing"
+      }, {
+        label: EMOJI_PICKER_CATEGORIES.FOOD,
+        icon: "food"
+      }, {
+        label: EMOJI_PICKER_CATEGORIES.ACTIVITY,
+        icon: "object"
+      }, {
+        label: EMOJI_PICKER_CATEGORIES.TRAVEL,
+        icon: "transportation"
+      }, {
+        label: EMOJI_PICKER_CATEGORIES.OBJECTS,
+        icon: "lightbulb"
+      }, {
+        label: EMOJI_PICKER_CATEGORIES.SYMBOLS,
+        icon: "heart"
+      }, {
+        label: EMOJI_PICKER_CATEGORIES.FLAGS,
+        icon: "flag"
+      }]
     };
   },
   computed: {
@@ -138,28 +155,51 @@ const _sfc_main$5 = {
 };
 var _sfc_render$5 = 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 _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();
-        return _vm.selectTabset(tab.id);
-      }, "keydown": function($event) {
-        return _vm.handleKeyDown($event, tab.id);
-      } } }, [_c("dt-icon", { attrs: { "size": "400", "name": tab.icon } })], 1);
-    });
-  }, proxy: true }]) })], 1);
+  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 _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();
+                return _vm.selectTabset(tab.id);
+              },
+              "keydown": function($event) {
+                return _vm.handleKeyDown($event, tab.id);
+              }
+            }
+          }, [_c("dt-icon", {
+            attrs: {
+              "size": "400",
+              "name": tab.icon
+            }
+          })], 1);
+        });
+      },
+      proxy: true
+    }])
+  })], 1);
 };
 var _sfc_staticRenderFns$5 = [];
-var __component__$5 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$5,
-  _sfc_render$5,
-  _sfc_staticRenderFns$5,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__$5 = /* @__PURE__ */ normalizeComponent(_sfc_main$5, _sfc_render$5, _sfc_staticRenderFns$5, false, null, null, null, null);
 const EmojiTabset = __component__$5.exports;
 const _sfc_main$4 = {
   name: "EmojiSearch",
@@ -205,38 +245,74 @@ const _sfc_main$4 = {
 };
 var _sfc_render$4 = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "d-emoji-picker__search d-emoji-picker__alignment" }, [_c("dt-input", { ref: "searchInputRef", attrs: { "id": "searchInput", "placeholder": _vm.searchPlaceholderLabel, "value": _vm.modelValue }, on: { "input": _vm.updateModelValue, "keydown": [function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
-      return null;
-    return _vm.focusTabset.apply(null, arguments);
-  }, function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
-      return null;
-    $event.preventDefault();
-    return _vm.focusEmojiSelector.apply(null, arguments);
-  }, function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
-      return null;
-    return _vm.selectFirstEmoji.apply(null, arguments);
-  }] }, scopedSlots: _vm._u([{ key: "leftIcon", fn: function() {
-    return [_c("dt-icon", { attrs: { "name": "search", "size": "200" } })];
-  }, proxy: true }, _vm.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
-    return [_c("dt-button", { attrs: { "importance": "clear", "kind": "muted" }, on: { "click": _vm.clearSearch }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("dt-icon", { attrs: { "name": "x-circle", "size": "200" } })];
-    }, proxy: true }], null, false, 1385861752) })];
-  }, proxy: true } : null], null, true) })], 1);
+  return _c("div", {
+    staticClass: "d-emoji-picker__search d-emoji-picker__alignment"
+  }, [_c("dt-input", {
+    ref: "searchInputRef",
+    attrs: {
+      "id": "searchInput",
+      "placeholder": _vm.searchPlaceholderLabel,
+      "value": _vm.modelValue
+    },
+    on: {
+      "input": _vm.updateModelValue,
+      "keydown": [function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
+          return null;
+        return _vm.focusTabset.apply(null, arguments);
+      }, function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
+          return null;
+        $event.preventDefault();
+        return _vm.focusEmojiSelector.apply(null, arguments);
+      }, function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
+          return null;
+        return _vm.selectFirstEmoji.apply(null, arguments);
+      }]
+    },
+    scopedSlots: _vm._u([{
+      key: "leftIcon",
+      fn: function() {
+        return [_c("dt-icon", {
+          attrs: {
+            "name": "search",
+            "size": "200"
+          }
+        })];
+      },
+      proxy: true
+    }, _vm.modelValue.length > 0 ? {
+      key: "rightIcon",
+      fn: function() {
+        return [_c("dt-button", {
+          attrs: {
+            "importance": "clear",
+            "kind": "muted"
+          },
+          on: {
+            "click": _vm.clearSearch
+          },
+          scopedSlots: _vm._u([{
+            key: "icon",
+            fn: function() {
+              return [_c("dt-icon", {
+                attrs: {
+                  "name": "x-circle",
+                  "size": "200"
+                }
+              })];
+            },
+            proxy: true
+          }], null, false, 1385861752)
+        })];
+      },
+      proxy: true
+    } : null], null, true)
+  })], 1);
 };
 var _sfc_staticRenderFns$4 = [];
-var __component__$4 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$4,
-  _sfc_render$4,
-  _sfc_staticRenderFns$4,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__$4 = /* @__PURE__ */ normalizeComponent(_sfc_main$4, _sfc_render$4, _sfc_staticRenderFns$4, false, null, null, null, null);
 const EmojiSearch = __component__$4.exports;
 const _sfc_main$3 = {
   name: "EmojiSelector",
@@ -285,16 +361,7 @@ const _sfc_main$3 = {
   computed: {
     /* eslint-disable-next-line complexity */
     currentEmojis() {
-      return [
-        ...this.emojis[`People${this.skinTone}`] || [],
-        ...this.emojis.Nature || [],
-        ...this.emojis.Food || [],
-        ...this.emojis[`Activity${this.skinTone}`] || [],
-        ...this.emojis.Travel || [],
-        ...this.emojis[`Objects${this.skinTone}`] || [],
-        ...this.emojis.Symbols || [],
-        ...this.emojis.Flags || []
-      ];
+      return [...this.emojis[`People${this.skinTone}`] || [], ...this.emojis.Nature || [], ...this.emojis.Food || [], ...this.emojis[`Activity${this.skinTone}`] || [], ...this.emojis.Travel || [], ...this.emojis[`Objects${this.skinTone}`] || [], ...this.emojis.Symbols || [], ...this.emojis.Flags || []];
     },
     emojis() {
       return emojisGrouped;
@@ -303,7 +370,13 @@ const _sfc_main$3 = {
       return CDN_URL;
     },
     tabLabels() {
-      return this.recentlyUsedEmojis.length ? this.tabSetLabels.map((label, index) => ({ label, ref: this.$refs[`tabLabelRef-${index}`] })) : this.tabSetLabels.slice(1).map((label, index) => ({ label, ref: this.$refs[`tabLabelRef-${index}`] }));
+      return this.recentlyUsedEmojis.length ? this.tabSetLabels.map((label, index) => ({
+        label,
+        ref: this.$refs[`tabLabelRef-${index}`]
+      })) : this.tabSetLabels.slice(1).map((label, index) => ({
+        label,
+        ref: this.$refs[`tabLabelRef-${index}`]
+      }));
     },
     tabs() {
       return this.recentlyUsedEmojis.length ? this.TABS_DATA : this.TABS_DATA.slice(1);
@@ -363,7 +436,10 @@ const _sfc_main$3 = {
       (_a = this.tabSetLabels) == null ? void 0 : _a.forEach((label, index) => {
         const refKey = `tabLabelRef-${index}`;
         if (this.$refs[refKey]) {
-          this.$set(this.tabLabels, index, { label, ref: this.$refs[refKey] });
+          this.$set(this.tabLabels, index, {
+            label,
+            ref: this.$refs[refKey]
+          });
         }
       });
     },
@@ -634,7 +710,9 @@ const _sfc_main$3 = {
         this.$emit("is-scrolling", false);
         entries.forEach((entry) => {
           var _a, _b, _c, _d, _e, _f;
-          const { target } = entry;
+          const {
+            target
+          } = entry;
           const index = parseInt(target.dataset.index);
           if (entry.isIntersecting && target.offsetTop <= ((_a = this.$refs.tabCategoryRef) == null ? void 0 : _a.offsetTop) + 50) {
             this.fixedLabel = ((_b = this.tabLabels[index - 1]) == null ? void 0 : _b.label) ?? ((_c = this.tabLabels[0]) == null ? void 0 : _c.label);
@@ -661,47 +739,123 @@ const _sfc_main$3 = {
 };
 var _sfc_render$3 = function render3() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "d-emoji-picker__selector" }, [_c("div", { ref: "listRef", staticClass: "d-emoji-picker__list", attrs: { "id": "d-emoji-picker-list" } }, [_vm.emojiFilter ? _c("p", { staticClass: "d-emoji-picker__search-label d-emoji-picker__alignment" }, [_vm._v(" " + _vm._s(_vm.filteredEmojis.length > 0 ? _vm.searchResultsLabel : _vm.searchNoResultsLabel) + " ")]) : _c("div", { ref: "tabCategoryRef", staticClass: "d-emoji-picker__category d-emoji-picker__alignment" }, [_c("p", [_vm._v(" " + _vm._s(_vm.fixedLabel) + " ")])]), _vm._l(_vm.tabLabels, function(tabLabel, indexTab) {
-    return _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.emojiFilter, expression: "!emojiFilter" }], key: indexTab, ref: `tabLabelRef-${indexTab}`, refInFor: true, staticClass: "d-emoji-picker__alignment" }, [indexTab ? _c("p", [_vm._v(" " + _vm._s(tabLabel.label) + " ")]) : _vm._e(), _c("div", { staticClass: "d-emoji-picker__tab" }, _vm._l(_vm.emojis[_vm.tabs[indexTab] + _vm.skinTone] ? _vm.emojis[_vm.tabs[indexTab] + _vm.skinTone] : _vm.emojis[_vm.tabs[indexTab]], function(emoji, indexEmoji) {
-      return _c("button", { key: emoji.shortname, ref: `emojiRef-${indexTab}`, refInFor: true, attrs: { "type": "button", "aria-label": emoji.name }, on: { "click": function($event) {
-        return _vm.$emit("selected-emoji", emoji);
-      }, "focusin": function($event) {
-        return _vm.$emit("highlighted-emoji", emoji);
-      }, "focusout": function($event) {
-        return _vm.$emit("highlighted-emoji", null);
-      }, "mouseover": function($event) {
-        return _vm.$emit("highlighted-emoji", emoji);
-      }, "mouseleave": function($event) {
-        return _vm.$emit("highlighted-emoji", null);
-      }, "keydown": (event) => _vm.handleKeyDown(event, indexTab, indexEmoji, emoji) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": emoji.name, "aria-label": emoji.name, "title": emoji.name, "src": _vm.getImgSrc(emoji.unicode_character) }, on: { "error": _vm.handleImageError } })]);
+  return _c("div", {
+    staticClass: "d-emoji-picker__selector"
+  }, [_c("div", {
+    ref: "listRef",
+    staticClass: "d-emoji-picker__list",
+    attrs: {
+      "id": "d-emoji-picker-list"
+    }
+  }, [_vm.emojiFilter ? _c("p", {
+    staticClass: "d-emoji-picker__search-label d-emoji-picker__alignment"
+  }, [_vm._v(" " + _vm._s(_vm.filteredEmojis.length > 0 ? _vm.searchResultsLabel : _vm.searchNoResultsLabel) + " ")]) : _c("div", {
+    ref: "tabCategoryRef",
+    staticClass: "d-emoji-picker__category d-emoji-picker__alignment"
+  }, [_c("p", [_vm._v(" " + _vm._s(_vm.fixedLabel) + " ")])]), _vm._l(_vm.tabLabels, function(tabLabel, indexTab) {
+    return _c("div", {
+      directives: [{
+        name: "show",
+        rawName: "v-show",
+        value: !_vm.emojiFilter,
+        expression: "!emojiFilter"
+      }],
+      key: indexTab,
+      ref: `tabLabelRef-${indexTab}`,
+      refInFor: true,
+      staticClass: "d-emoji-picker__alignment"
+    }, [indexTab ? _c("p", [_vm._v(" " + _vm._s(tabLabel.label) + " ")]) : _vm._e(), _c("div", {
+      staticClass: "d-emoji-picker__tab"
+    }, _vm._l(_vm.emojis[_vm.tabs[indexTab] + _vm.skinTone] ? _vm.emojis[_vm.tabs[indexTab] + _vm.skinTone] : _vm.emojis[_vm.tabs[indexTab]], function(emoji, indexEmoji) {
+      return _c("button", {
+        key: emoji.shortname,
+        ref: `emojiRef-${indexTab}`,
+        refInFor: true,
+        attrs: {
+          "type": "button",
+          "aria-label": emoji.name
+        },
+        on: {
+          "click": function($event) {
+            return _vm.$emit("selected-emoji", emoji);
+          },
+          "focusin": function($event) {
+            return _vm.$emit("highlighted-emoji", emoji);
+          },
+          "focusout": function($event) {
+            return _vm.$emit("highlighted-emoji", null);
+          },
+          "mouseover": function($event) {
+            return _vm.$emit("highlighted-emoji", emoji);
+          },
+          "mouseleave": function($event) {
+            return _vm.$emit("highlighted-emoji", null);
+          },
+          "keydown": (event) => _vm.handleKeyDown(event, indexTab, indexEmoji, emoji)
+        }
+      }, [_c("img", {
+        staticClass: "d-icon d-icon--size-500",
+        attrs: {
+          "alt": emoji.name,
+          "aria-label": emoji.name,
+          "title": emoji.name,
+          "src": _vm.getImgSrc(emoji.unicode_character)
+        },
+        on: {
+          "error": _vm.handleImageError
+        }
+      })]);
     }), 0)]);
-  }), _vm.emojiFilter ? _c("div", { staticClass: "d-emoji-picker__alignment" }, [_c("div", { staticClass: "d-emoji-picker__tab", attrs: { "data-qa": "filtered-emojis" } }, _vm._l(_vm.filteredEmojis, function(emoji, index) {
-    return _c("button", { key: emoji.shortname, ref: `filteredEmoji-${index}`, refInFor: true, class: {
-      "hover-emoji": index === 0 && _vm.hoverFirstEmoji
-    }, attrs: { "type": "button", "aria-label": emoji.name }, on: { "click": function($event) {
-      return _vm.$emit("selected-emoji", emoji);
-    }, "focusin": function($event) {
-      return _vm.$emit("highlighted-emoji", emoji);
-    }, "focusout": function($event) {
-      return _vm.$emit("highlighted-emoji", null);
-    }, "mouseover": function($event) {
-      return _vm.hoverEmoji(emoji);
-    }, "mouseleave": function($event) {
-      return _vm.hoverEmoji(null);
-    }, "keydown": (event) => _vm.handleKeyDownFilteredEmojis(event, index, emoji) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": emoji.name, "aria-label": emoji.name, "title": emoji.name, "src": `${_vm.CDN_URL + emoji.unicode_character}.png` } })]);
+  }), _vm.emojiFilter ? _c("div", {
+    staticClass: "d-emoji-picker__alignment"
+  }, [_c("div", {
+    staticClass: "d-emoji-picker__tab",
+    attrs: {
+      "data-qa": "filtered-emojis"
+    }
+  }, _vm._l(_vm.filteredEmojis, function(emoji, index) {
+    return _c("button", {
+      key: emoji.shortname,
+      ref: `filteredEmoji-${index}`,
+      refInFor: true,
+      class: {
+        "hover-emoji": index === 0 && _vm.hoverFirstEmoji
+      },
+      attrs: {
+        "type": "button",
+        "aria-label": emoji.name
+      },
+      on: {
+        "click": function($event) {
+          return _vm.$emit("selected-emoji", emoji);
+        },
+        "focusin": function($event) {
+          return _vm.$emit("highlighted-emoji", emoji);
+        },
+        "focusout": function($event) {
+          return _vm.$emit("highlighted-emoji", null);
+        },
+        "mouseover": function($event) {
+          return _vm.hoverEmoji(emoji);
+        },
+        "mouseleave": function($event) {
+          return _vm.hoverEmoji(null);
+        },
+        "keydown": (event) => _vm.handleKeyDownFilteredEmojis(event, index, emoji)
+      }
+    }, [_c("img", {
+      staticClass: "d-icon d-icon--size-500",
+      attrs: {
+        "alt": emoji.name,
+        "aria-label": emoji.name,
+        "title": emoji.name,
+        "src": `${_vm.CDN_URL + emoji.unicode_character}.png`
+      }
+    })]);
   }), 0)]) : _vm._e()], 2)]);
 };
 var _sfc_staticRenderFns$3 = [];
-var __component__$3 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$3,
-  _sfc_render$3,
-  _sfc_staticRenderFns$3,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__$3 = /* @__PURE__ */ normalizeComponent(_sfc_main$3, _sfc_render$3, _sfc_staticRenderFns$3, false, null, null, null, null);
 const EmojiSelector = __component__$3.exports;
 const CDN_URL = "https://static.dialpadcdn.com/joypixels/png/unicode/32/";
 const EMOJIS_PER_ROW = 9;
@@ -746,19 +900,20 @@ const _sfc_main$2 = {
 var _sfc_render$2 = function render4() {
   var _a;
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "d-emoji-picker__data" }, [_vm.emoji ? _c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": _vm.emoji.name, "aria-label": _vm.emoji.name, "title": _vm.emoji.name, "src": `${_vm.CDN_URL + _vm.emoji.unicode_character}.png` } }) : _vm._e(), _c("div", [_vm._v(_vm._s((_a = _vm.emoji) == null ? void 0 : _a.name))])]);
+  return _c("div", {
+    staticClass: "d-emoji-picker__data"
+  }, [_vm.emoji ? _c("img", {
+    staticClass: "d-icon d-icon--size-500",
+    attrs: {
+      "alt": _vm.emoji.name,
+      "aria-label": _vm.emoji.name,
+      "title": _vm.emoji.name,
+      "src": `${_vm.CDN_URL + _vm.emoji.unicode_character}.png`
+    }
+  }) : _vm._e(), _c("div", [_vm._v(_vm._s((_a = _vm.emoji) == null ? void 0 : _a.name))])]);
 };
 var _sfc_staticRenderFns$2 = [];
-var __component__$2 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$2,
-  _sfc_render$2,
-  _sfc_staticRenderFns$2,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__$2 = /* @__PURE__ */ normalizeComponent(_sfc_main$2, _sfc_render$2, _sfc_staticRenderFns$2, false, null, null, null, null);
 const EmojiDescription = __component__$2.exports;
 const _sfc_main$1 = {
   name: "EmojiSkinSelector",
@@ -792,44 +947,37 @@ const _sfc_main$1 = {
       return this.skinList.find((skin) => skin.skinTone === this.skinTone);
     },
     skinList() {
-      return [
-        {
-          name: ":wave_tone1:",
-          unicode_output: "1f44b-1f3fb",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
-          skinCode: "_tone1"
-        },
-        {
-          name: ":wave_tone2:",
-          unicode_output: "1f44b-1f3fc",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
-          skinCode: "_tone2"
-        },
-        {
-          name: ":wave_tone3:",
-          unicode_output: "1f44b-1f3fd",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
-          skinCode: "_tone3"
-        },
-        {
-          name: ":wave_tone4:",
-          unicode_output: "1f44b-1f3fe",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
-          skinCode: "_tone4"
-        },
-        {
-          name: ":wave_tone5:",
-          unicode_output: "1f44b-1f3ff",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
-          skinCode: "_tone5"
-        },
-        {
-          name: ":wave:",
-          unicode_output: "1f44b",
-          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
-          skinCode: ""
-        }
-      ];
+      return [{
+        name: ":wave_tone1:",
+        unicode_output: "1f44b-1f3fb",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
+        skinCode: "_tone1"
+      }, {
+        name: ":wave_tone2:",
+        unicode_output: "1f44b-1f3fc",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
+        skinCode: "_tone2"
+      }, {
+        name: ":wave_tone3:",
+        unicode_output: "1f44b-1f3fd",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
+        skinCode: "_tone3"
+      }, {
+        name: ":wave_tone4:",
+        unicode_output: "1f44b-1f3fe",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
+        skinCode: "_tone4"
+      }, {
+        name: ":wave_tone5:",
+        unicode_output: "1f44b-1f3ff",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
+        skinCode: "_tone5"
+      }, {
+        name: ":wave:",
+        unicode_output: "1f44b",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
+        skinCode: ""
+      }];
     }
   },
   watch: {
@@ -912,29 +1060,84 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render5() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { attrs: { "data-qa": "skin-selector" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.isOpen, expression: "isOpen" }], staticClass: "d-emoji-picker__skin-list" }, _vm._l(_vm.skinList, function(skin, index) {
+  return _c("div", {
+    attrs: {
+      "data-qa": "skin-selector"
+    }
+  }, [_c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.isOpen,
+      expression: "isOpen"
+    }],
+    staticClass: "d-emoji-picker__skin-list"
+  }, _vm._l(_vm.skinList, function(skin, index) {
     var _a;
-    return _c("button", { key: skin.name, ref: `skinRef-${index}`, refInFor: true, class: {
-      "selected": ((_a = _vm.skinSelected) == null ? void 0 : _a.skinCode) === skin.skinCode
-    }, on: { "click": function($event) {
-      return _vm.selectSkin(skin);
-    }, "keydown": (event) => _vm.handleKeyDown(event, skin, index) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": skin.name, "aria-label": skin.name, "title": skin.name, "src": `${_vm.cdnUrl + skin.unicode_output}.png` } })]);
-  }), 0), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.isOpen, expression: "!isOpen" }], staticClass: "d-emoji-picker__skin-selected" }, [_c("dt-tooltip", { attrs: { "placement": "top-end" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
-    var _a, _b, _c2, _d;
-    return [_c("button", { ref: "skinSelectorRef", attrs: { "aria-label": _vm.skinSelectorButtonTooltipLabel, "tabindex": "-1" }, on: { "click": _vm.toggleSkinList, "keydown": (event) => _vm.handleKeyDown(event) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": (_a = _vm.skinSelected) == null ? void 0 : _a.name, "aria-label": (_b = _vm.skinSelected) == null ? void 0 : _b.name, "title": (_c2 = _vm.skinSelected) == null ? void 0 : _c2.name, "src": `${_vm.cdnUrl + ((_d = _vm.skinSelected) == null ? void 0 : _d.unicode_output)}.png` } })])];
-  }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
+    return _c("button", {
+      key: skin.name,
+      ref: `skinRef-${index}`,
+      refInFor: true,
+      class: {
+        "selected": ((_a = _vm.skinSelected) == null ? void 0 : _a.skinCode) === skin.skinCode
+      },
+      on: {
+        "click": function($event) {
+          return _vm.selectSkin(skin);
+        },
+        "keydown": (event) => _vm.handleKeyDown(event, skin, index)
+      }
+    }, [_c("img", {
+      staticClass: "d-icon d-icon--size-500",
+      attrs: {
+        "alt": skin.name,
+        "aria-label": skin.name,
+        "title": skin.name,
+        "src": `${_vm.cdnUrl + skin.unicode_output}.png`
+      }
+    })]);
+  }), 0), _c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !_vm.isOpen,
+      expression: "!isOpen"
+    }],
+    staticClass: "d-emoji-picker__skin-selected"
+  }, [_c("dt-tooltip", {
+    attrs: {
+      "placement": "top-end"
+    },
+    scopedSlots: _vm._u([{
+      key: "anchor",
+      fn: function() {
+        var _a, _b, _c2, _d;
+        return [_c("button", {
+          ref: "skinSelectorRef",
+          attrs: {
+            "aria-label": _vm.skinSelectorButtonTooltipLabel,
+            "tabindex": "-1"
+          },
+          on: {
+            "click": _vm.toggleSkinList,
+            "keydown": (event) => _vm.handleKeyDown(event)
+          }
+        }, [_c("img", {
+          staticClass: "d-icon d-icon--size-500",
+          attrs: {
+            "alt": (_a = _vm.skinSelected) == null ? void 0 : _a.name,
+            "aria-label": (_b = _vm.skinSelected) == null ? void 0 : _b.name,
+            "title": (_c2 = _vm.skinSelected) == null ? void 0 : _c2.name,
+            "src": `${_vm.cdnUrl + ((_d = _vm.skinSelected) == null ? void 0 : _d.unicode_output)}.png`
+          }
+        })])];
+      },
+      proxy: true
+    }])
+  }, [_vm._v(" " + _vm._s(_vm.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
 };
 var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$1,
-  _sfc_render$1,
-  _sfc_staticRenderFns$1,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__$1 = /* @__PURE__ */ normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, null, null, null);
 const EmojiSkinSelector = __component__$1.exports;
 const _sfc_main = {
   name: "DtEmojiPicker",
@@ -1073,7 +1276,10 @@ const _sfc_main = {
   methods: {
     scrollToSelectedTabset(tabId) {
       this.internalSearchQuery = "";
-      this.selectedTabset = { ...this.selectedTabset, tabId };
+      this.selectedTabset = {
+        ...this.selectedTabset,
+        tabId
+      };
     },
     updateScrollIntoTab(value) {
       this.scrollIntoTab = value;
@@ -1088,57 +1294,129 @@ const _sfc_main = {
 };
 var _sfc_render = function render6() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "d-emoji-picker" }, [_c("div", { staticClass: "d-emoji-picker--header" }, [_c("emoji-tabset", { ref: "tabsetRef", attrs: { "emoji-filter": _vm.internalSearchQuery, "show-recently-used-tab": _vm.showRecentlyUsedTab, "scroll-into-tab": _vm.scrollIntoTab, "tab-set-labels": _vm.tabSetLabels, "is-scrolling": _vm.isScrolling }, on: { "focus-skin-selector": function($event) {
-    return _vm.$refs.skinSelectorRef.focusSkinSelector();
-  }, "focus-search-input": function($event) {
-    _vm.showSearch ? _vm.$refs.searchInputRef.focusSearchInput() : _vm.$refs.emojiSelectorRef.focusEmojiSelector();
-  }, "selected-tabset": _vm.scrollToSelectedTabset }, nativeOn: { "keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
-      return null;
-    return _vm.$emit("close");
-  } } })], 1), _c("div", { staticClass: "d-emoji-picker--body" }, [_vm.showSearch ? _c("emoji-search", { ref: "searchInputRef", attrs: { "model-value": _vm.internalSearchQuery, "search-placeholder-label": _vm.searchPlaceholderLabel }, on: { "update:model-value": (newValue) => _vm.internalSearchQuery = newValue, "select-first-emoji": function($event) {
-    return _vm.$emit("selected-emoji", _vm.highlightedEmoji);
-  }, "focus-tabset": function($event) {
-    return _vm.$refs.tabsetRef.focusTabset();
-  }, "focus-emoji-selector": function($event) {
-    return _vm.$refs.emojiSelectorRef.focusEmojiSelector();
-  } }, nativeOn: { "keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
-      return null;
-    return _vm.$emit("close");
-  } } }) : _vm._e(), _c("emoji-selector", { ref: "emojiSelectorRef", attrs: { "emoji-filter": _vm.internalSearchQuery, "skin-tone": _vm.skinTone, "tab-set-labels": _vm.tabSetLabels, "search-results-label": _vm.searchResultsLabel, "search-no-results-label": _vm.searchNoResultsLabel, "recently-used-emojis": _vm.recentlyUsedEmojis, "selected-tabset": _vm.selectedTabset }, on: { "scroll-into-tab": _vm.updateScrollIntoTab, "is-scrolling": _vm.updateIsScrolling, "highlighted-emoji": _vm.updateHighlightedEmoji, "selected-emoji": function($event) {
-    return _vm.$emit("selected-emoji", $event);
-  }, "focus-skin-selector": function($event) {
-    return _vm.$refs.skinSelectorRef.focusSkinSelector();
-  }, "focus-search-input": function($event) {
-    _vm.showSearch ? _vm.$refs.searchInputRef.focusSearchInput() : _vm.$refs.tabsetRef.focusTabset();
-  } }, nativeOn: { "keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
-      return null;
-    return _vm.$emit("close");
-  } } })], 1), _c("div", { staticClass: "d-emoji-picker--footer" }, [_c("emoji-description", { attrs: { "emoji": _vm.highlightedEmoji } }), _c("emoji-skin-selector", { ref: "skinSelectorRef", attrs: { "is-hovering": !!_vm.highlightedEmoji, "skin-selector-button-tooltip-label": _vm.skinSelectorButtonTooltipLabel, "skin-tone": _vm.skinTone }, on: { "skin-tone": function($event) {
-    return _vm.$emit("skin-tone", $event);
-  }, "focus-tabset": function($event) {
-    return _vm.$refs.tabsetRef.focusTabset();
-  }, "focus-last-emoji": function($event) {
-    return _vm.$refs.emojiSelectorRef.focusLastEmoji();
-  } }, nativeOn: { "keydown": function($event) {
-    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
-      return null;
-    return _vm.$emit("close");
-  } } })], 1)]);
+  return _c("div", {
+    staticClass: "d-emoji-picker"
+  }, [_c("div", {
+    staticClass: "d-emoji-picker--header"
+  }, [_c("emoji-tabset", {
+    ref: "tabsetRef",
+    attrs: {
+      "emoji-filter": _vm.internalSearchQuery,
+      "show-recently-used-tab": _vm.showRecentlyUsedTab,
+      "scroll-into-tab": _vm.scrollIntoTab,
+      "tab-set-labels": _vm.tabSetLabels,
+      "is-scrolling": _vm.isScrolling
+    },
+    on: {
+      "focus-skin-selector": function($event) {
+        return _vm.$refs.skinSelectorRef.focusSkinSelector();
+      },
+      "focus-search-input": function($event) {
+        _vm.showSearch ? _vm.$refs.searchInputRef.focusSearchInput() : _vm.$refs.emojiSelectorRef.focusEmojiSelector();
+      },
+      "selected-tabset": _vm.scrollToSelectedTabset
+    },
+    nativeOn: {
+      "keydown": function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+          return null;
+        return _vm.$emit("close");
+      }
+    }
+  })], 1), _c("div", {
+    staticClass: "d-emoji-picker--body"
+  }, [_vm.showSearch ? _c("emoji-search", {
+    ref: "searchInputRef",
+    attrs: {
+      "model-value": _vm.internalSearchQuery,
+      "search-placeholder-label": _vm.searchPlaceholderLabel
+    },
+    on: {
+      "update:model-value": (newValue) => _vm.internalSearchQuery = newValue,
+      "select-first-emoji": function($event) {
+        return _vm.$emit("selected-emoji", _vm.highlightedEmoji);
+      },
+      "focus-tabset": function($event) {
+        return _vm.$refs.tabsetRef.focusTabset();
+      },
+      "focus-emoji-selector": function($event) {
+        return _vm.$refs.emojiSelectorRef.focusEmojiSelector();
+      }
+    },
+    nativeOn: {
+      "keydown": function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+          return null;
+        return _vm.$emit("close");
+      }
+    }
+  }) : _vm._e(), _c("emoji-selector", {
+    ref: "emojiSelectorRef",
+    attrs: {
+      "emoji-filter": _vm.internalSearchQuery,
+      "skin-tone": _vm.skinTone,
+      "tab-set-labels": _vm.tabSetLabels,
+      "search-results-label": _vm.searchResultsLabel,
+      "search-no-results-label": _vm.searchNoResultsLabel,
+      "recently-used-emojis": _vm.recentlyUsedEmojis,
+      "selected-tabset": _vm.selectedTabset
+    },
+    on: {
+      "scroll-into-tab": _vm.updateScrollIntoTab,
+      "is-scrolling": _vm.updateIsScrolling,
+      "highlighted-emoji": _vm.updateHighlightedEmoji,
+      "selected-emoji": function($event) {
+        return _vm.$emit("selected-emoji", $event);
+      },
+      "focus-skin-selector": function($event) {
+        return _vm.$refs.skinSelectorRef.focusSkinSelector();
+      },
+      "focus-search-input": function($event) {
+        _vm.showSearch ? _vm.$refs.searchInputRef.focusSearchInput() : _vm.$refs.tabsetRef.focusTabset();
+      }
+    },
+    nativeOn: {
+      "keydown": function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+          return null;
+        return _vm.$emit("close");
+      }
+    }
+  })], 1), _c("div", {
+    staticClass: "d-emoji-picker--footer"
+  }, [_c("emoji-description", {
+    attrs: {
+      "emoji": _vm.highlightedEmoji
+    }
+  }), _c("emoji-skin-selector", {
+    ref: "skinSelectorRef",
+    attrs: {
+      "is-hovering": !!_vm.highlightedEmoji,
+      "skin-selector-button-tooltip-label": _vm.skinSelectorButtonTooltipLabel,
+      "skin-tone": _vm.skinTone
+    },
+    on: {
+      "skin-tone": function($event) {
+        return _vm.$emit("skin-tone", $event);
+      },
+      "focus-tabset": function($event) {
+        return _vm.$refs.tabsetRef.focusTabset();
+      },
+      "focus-last-emoji": function($event) {
+        return _vm.$refs.emojiSelectorRef.focusLastEmoji();
+      }
+    },
+    nativeOn: {
+      "keydown": function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+          return null;
+        return _vm.$emit("close");
+      }
+    }
+  })], 1)]);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const DtEmojiPicker = __component__.exports;
 export {
   CDN_URL,