@dialpad/dialtone 9.65.1 → 9.66.0

package/dist/vue3/lib/emoji-picker.cjs

@@ -4,22 +4,24 @@ const vue = require("vue");
 const lib_input = require("./input.cjs");
 const lib_icon = require("./icon.cjs");
 const lib_button = require("./button.cjs");
-const tab = require("../chunks/tab-qc3f42Yp.js");
+const tab = require("../chunks/tab-X7IvNGTl.js");
 const dialtoneEmojis = require("@dialpad/dialtone-emojis");
 const lib_tooltip = require("./tooltip.cjs");
 require("../common/constants.cjs");
 require("../common/utils.cjs");
-require("../chunks/input-ttnte8zB.js");
+require("../chunks/input-dLLo3Wtg.js");
 require("../common/validators.cjs");
 require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 require("./validation-messages.cjs");
 require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-bvhFNOPu.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("../chunks/link_constants-x8NwdqmA.js");
-require("../chunks/popover_constants-XnGWXaxX.js");
+require("../chunks/popover_constants-h9MD6WUt.js");
 require("tippy.js");
-const _hoisted_1$5 = { class: "d-emoji-picker__search d-emoji-picker__alignment" };
+const _hoisted_1$5 = {
+  class: "d-emoji-picker__search d-emoji-picker__alignment"
+};
 const _sfc_main$5 = {
   __name: "emoji_search",
   props: {
@@ -33,7 +35,10 @@ const _sfc_main$5 = {
     }
   },
   emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
-  setup(__props, { expose: __expose, emit: __emit }) {
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
     const emits = __emit;
     const searchInput = vue.ref(null);
     function clearSearch() {
@@ -50,53 +55,41 @@ const _sfc_main$5 = {
       focusSearchInput
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
-        vue.createVNode(vue.unref(lib_input.DtInput), {
-          id: "searchInput",
-          ref_key: "searchInput",
-          ref: searchInput,
-          placeholder: __props.searchPlaceholderLabel,
-          "model-value": __props.modelValue,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event)),
-          onKeydown: [
-            _cache[1] || (_cache[1] = vue.withKeys(($event) => _ctx.$emit("focus-tabset"), ["up"])),
-            _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(($event) => _ctx.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
-            _cache[3] || (_cache[3] = vue.withKeys(($event) => _ctx.$emit("select-first-emoji"), ["enter"]))
-          ]
-        }, vue.createSlots({
-          leftIcon: vue.withCtx(() => [
-            vue.createVNode(vue.unref(lib_icon.DtIcon), {
-              name: "search",
-              size: "200"
-            })
-          ]),
-          _: 2
-        }, [
-          __props.modelValue.length > 0 ? {
-            name: "rightIcon",
-            fn: vue.withCtx(() => [
-              vue.createVNode(vue.unref(lib_button.DtButton), {
-                importance: "clear",
-                kind: "muted",
-                onClick: clearSearch
-              }, {
-                icon: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(lib_icon.DtIcon), {
-                    name: "x-circle",
-                    size: "200"
-                  })
-                ]),
-                _: 1
-              })
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1032, ["placeholder", "model-value"])
-      ]);
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [vue.createVNode(vue.unref(lib_input.DtInput), {
+        id: "searchInput",
+        ref_key: "searchInput",
+        ref: searchInput,
+        placeholder: __props.searchPlaceholderLabel,
+        "model-value": __props.modelValue,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event)),
+        onKeydown: [_cache[1] || (_cache[1] = vue.withKeys(($event) => _ctx.$emit("focus-tabset"), ["up"])), _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(($event) => _ctx.$emit("focus-emoji-selector"), ["prevent"]), ["down"])), _cache[3] || (_cache[3] = vue.withKeys(($event) => _ctx.$emit("select-first-emoji"), ["enter"]))]
+      }, vue.createSlots({
+        leftIcon: vue.withCtx(() => [vue.createVNode(vue.unref(lib_icon.DtIcon), {
+          name: "search",
+          size: "200"
+        })]),
+        _: 2
+      }, [__props.modelValue.length > 0 ? {
+        name: "rightIcon",
+        fn: vue.withCtx(() => [vue.createVNode(vue.unref(lib_button.DtButton), {
+          importance: "clear",
+          kind: "muted",
+          onClick: clearSearch
+        }, {
+          icon: vue.withCtx(() => [vue.createVNode(vue.unref(lib_icon.DtIcon), {
+            name: "x-circle",
+            size: "200"
+          })]),
+          _: 1
+        })]),
+        key: "0"
+      } : void 0]), 1032, ["placeholder", "model-value"])]);
     };
   }
 };
-const _hoisted_1$4 = { class: "d-emoji-picker__tabset" };
+const _hoisted_1$4 = {
+  class: "d-emoji-picker__tabset"
+};
 const _sfc_main$4 = {
   __name: "emoji_tabset",
   props: {
@@ -141,20 +134,40 @@ const _sfc_main$4 = {
     "focus-search-input",
     "focus-skin-selector"
   ],
-  setup(__props, { expose: __expose, emit: __emit }) {
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
     const props = __props;
     const emits = __emit;
-    const 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" }
-    ];
+    const 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"
+    }];
     const tabs = vue.computed(() => {
       const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);
       return tabsData.map((tab2, index) => ({
@@ -166,24 +179,20 @@ const _sfc_main$4 = {
     });
     const isSearching = vue.computed(() => props.emojiFilter.length > 0);
     const selectedTab = vue.ref("1");
-    const { isScrolling } = vue.toRefs(props);
+    const {
+      isScrolling
+    } = vue.toRefs(props);
     const tabsetRef = vue.ref([]);
-    vue.watch(
-      () => props.scrollIntoTab,
-      () => {
-        if (!isScrolling.value && !isSearching.value) {
-          selectedTab.value = (props.scrollIntoTab + 1).toString();
-        }
+    vue.watch(() => props.scrollIntoTab, () => {
+      if (!isScrolling.value && !isSearching.value) {
+        selectedTab.value = (props.scrollIntoTab + 1).toString();
       }
-    );
-    vue.watch(
-      isSearching,
-      () => {
-        if (isSearching.value) {
-          selectedTab.value = null;
-        }
+    });
+    vue.watch(isSearching, () => {
+      if (isSearching.value) {
+        selectedTab.value = null;
       }
-    );
+    });
     function selectTabset(id) {
       if (!isScrolling.value) {
         selectedTab.value = id;
@@ -217,41 +226,35 @@ const _sfc_main$4 = {
       focusTabset
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
-        vue.createVNode(vue.unref(tab.DtTabGroup), {
-          "tab-list-class": "d-emoji-picker__tabset-list",
-          selected: selectedTab.value
-        }, {
-          tabs: vue.withCtx(() => [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabs.value, (tab$1, index) => {
-              return vue.openBlock(), vue.createBlock(vue.unref(tab.DtTab), {
-                id: tab$1.id,
-                ref_for: true,
-                ref: (el) => {
-                  if (el)
-                    setTabsetRef(el);
-                },
-                key: tab$1.id,
-                "panel-id": tab$1.panelId,
-                label: tab$1.label,
-                "aria-controls": "d-emoji-picker-list",
-                tabindex: index + 1,
-                onClickCapture: vue.withModifiers(($event) => selectTabset(tab$1.id), ["stop"]),
-                onKeydown: ($event) => handleKeyDown($event, tab$1.id)
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(lib_icon.DtIcon), {
-                    size: "400",
-                    name: tab$1.icon
-                  }, null, 8, ["name"])
-                ]),
-                _: 2
-              }, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]);
-            }), 128))
-          ]),
-          _: 1
-        }, 8, ["selected"])
-      ]);
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [vue.createVNode(vue.unref(tab.DtTabGroup), {
+        "tab-list-class": "d-emoji-picker__tabset-list",
+        selected: selectedTab.value
+      }, {
+        tabs: vue.withCtx(() => [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabs.value, (tab$1, index) => {
+          return vue.openBlock(), vue.createBlock(vue.unref(tab.DtTab), {
+            id: tab$1.id,
+            ref_for: true,
+            ref: (el) => {
+              if (el)
+                setTabsetRef(el);
+            },
+            key: tab$1.id,
+            "panel-id": tab$1.panelId,
+            label: tab$1.label,
+            "aria-controls": "d-emoji-picker-list",
+            tabindex: index + 1,
+            onClickCapture: vue.withModifiers(($event) => selectTabset(tab$1.id), ["stop"]),
+            onKeydown: ($event) => handleKeyDown($event, tab$1.id)
+          }, {
+            default: vue.withCtx(() => [vue.createVNode(vue.unref(lib_icon.DtIcon), {
+              size: "400",
+              name: tab$1.icon
+            }, null, 8, ["name"])]),
+            _: 2
+          }, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]);
+        }), 128))]),
+        _: 1
+      }, 8, ["selected"])]);
     };
   }
 };
@@ -429,13 +432,19 @@ function useKeyboardNavigation() {
     handleArrowNavigation
   };
 }
-const _hoisted_1$3 = { class: "d-emoji-picker__selector" };
+const _hoisted_1$3 = {
+  class: "d-emoji-picker__selector"
+};
 const _hoisted_2$3 = {
   key: 0,
   class: "d-emoji-picker__search-label d-emoji-picker__alignment"
 };
-const _hoisted_3$2 = { key: 0 };
-const _hoisted_4$2 = { class: "d-emoji-picker__tab" };
+const _hoisted_3$2 = {
+  key: 0
+};
+const _hoisted_4$2 = {
+  class: "d-emoji-picker__tab"
+};
 const _hoisted_5$1 = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"];
 const _hoisted_6$1 = ["alt", "aria-label", "title", "src"];
 const _hoisted_7$1 = {
@@ -540,7 +549,10 @@ const _sfc_main$3 = {
       */
     "focus-search-input"
   ],
-  setup(__props, { expose: __expose, emit: __emit }) {
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
     const props = __props;
     const emits = __emit;
     const {
@@ -558,7 +570,13 @@ const _sfc_main$3 = {
     const tabLabelObserver = vue.ref(null);
     const TABS_DATA = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"];
     const tabLabels = vue.computed(() => {
-      return props.recentlyUsedEmojis.length ? props.tabsetLabels.map((label) => ({ label, ref: vue.ref(null) })) : props.tabsetLabels.slice(1).map((label) => ({ label, ref: vue.ref(null) }));
+      return props.recentlyUsedEmojis.length ? props.tabsetLabels.map((label) => ({
+        label,
+        ref: vue.ref(null)
+      })) : props.tabsetLabels.slice(1).map((label) => ({
+        label,
+        ref: vue.ref(null)
+      }));
     });
     const fixedLabel = vue.ref(tabLabels.value[0].label);
     const tabs = vue.computed(() => {
@@ -566,16 +584,7 @@ const _sfc_main$3 = {
     });
     const filteredEmojis = vue.ref([]);
     const currentEmojis = vue.computed(() => {
-      return [
-        ...dialtoneEmojis.emojisGrouped[`People${props.skinTone}`],
-        ...dialtoneEmojis.emojisGrouped.Nature,
-        ...dialtoneEmojis.emojisGrouped.Food,
-        ...dialtoneEmojis.emojisGrouped[`Activity${props.skinTone}`],
-        ...dialtoneEmojis.emojisGrouped.Travel,
-        ...dialtoneEmojis.emojisGrouped[`Objects${props.skinTone}`],
-        ...dialtoneEmojis.emojisGrouped.Symbols,
-        ...dialtoneEmojis.emojisGrouped.Flags
-      ];
+      return [...dialtoneEmojis.emojisGrouped[`People${props.skinTone}`], ...dialtoneEmojis.emojisGrouped.Nature, ...dialtoneEmojis.emojisGrouped.Food, ...dialtoneEmojis.emojisGrouped[`Activity${props.skinTone}`], ...dialtoneEmojis.emojisGrouped.Travel, ...dialtoneEmojis.emojisGrouped[`Objects${props.skinTone}`], ...dialtoneEmojis.emojisGrouped.Symbols, ...dialtoneEmojis.emojisGrouped.Flags];
     });
     const debouncedSearch = debounce(() => {
       emojiFilteredRefs.value = [];
@@ -583,14 +592,14 @@ const _sfc_main$3 = {
     });
     vue.watch(currentEmojis, () => {
       searchByNameAndKeywords();
-    }, { immediate: true });
-    vue.watch(
-      () => props.recentlyUsedEmojis,
-      () => {
-        dialtoneEmojis.emojisGrouped["Recently used"] = props.recentlyUsedEmojis;
-      },
-      { immediate: true }
-    );
+    }, {
+      immediate: true
+    });
+    vue.watch(() => props.recentlyUsedEmojis, () => {
+      dialtoneEmojis.emojisGrouped["Recently used"] = props.recentlyUsedEmojis;
+    }, {
+      immediate: true
+    });
     vue.watch(() => props.emojiFilter, () => {
       resetScroll();
       if (props.emojiFilter) {
@@ -601,13 +610,11 @@ const _sfc_main$3 = {
       }
       debouncedSearch();
     });
-    vue.watch(
-      () => props.selectedTabset,
-      (tab2) => {
-        scrollToTab(tab2.tabId);
-      },
-      { deep: true }
-    );
+    vue.watch(() => props.selectedTabset, (tab2) => {
+      scrollToTab(tab2.tabId);
+    }, {
+      deep: true
+    });
     function hoverEmoji(emoji, isFirst = false) {
       hoverFirstEmoji.value = isFirst;
       emits("highlighted-emoji", emoji);
@@ -672,7 +679,9 @@ const _sfc_main$3 = {
         emits("is-scrolling", false);
         entries.forEach((entry) => {
           var _a, _b, _c, _d, _e;
-          const { target } = entry;
+          const {
+            target
+          } = entry;
           const index = parseInt(target.dataset.index);
           if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {
             fixedLabel.value = ((_a = tabLabels.value[index - 1]) == null ? void 0 : _a.label) ?? ((_b = tabLabels.value[0]) == null ? void 0 : _b.label);
@@ -758,105 +767,88 @@ const _sfc_main$3 = {
       focusLastEmoji
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
-        vue.createElementVNode("div", {
-          id: "d-emoji-picker-list",
-          ref_key: "listRef",
-          ref: listRef,
-          class: "d-emoji-picker__list"
-        }, [
-          __props.emojiFilter ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$3, vue.toDisplayString(filteredEmojis.value.length > 0 ? __props.searchResultsLabel : __props.searchNoResultsLabel), 1)) : (vue.openBlock(), vue.createElementBlock("div", {
-            key: 1,
-            ref_key: "tabCategoryRef",
-            ref: tabCategoryRef,
-            class: "d-emoji-picker__category d-emoji-picker__alignment"
-          }, [
-            vue.createElementVNode("p", null, vue.toDisplayString(fixedLabel.value), 1)
-          ], 512)),
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabLabels.value, (tabLabel, indexTab) => {
-            return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-              key: indexTab,
-              ref_for: true,
-              ref: tabLabel.ref,
-              class: "d-emoji-picker__alignment"
-            }, [
-              indexTab ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3$2, vue.toDisplayString(tabLabel.label), 1)) : vue.createCommentVNode("", true),
-              vue.createElementVNode("div", _hoisted_4$2, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(dialtoneEmojis.emojisGrouped)[tabs.value[indexTab] + __props.skinTone] ? vue.unref(dialtoneEmojis.emojisGrouped)[tabs.value[indexTab] + __props.skinTone] : vue.unref(dialtoneEmojis.emojisGrouped)[tabs.value[indexTab]], (emoji, indexEmoji) => {
-                  return vue.openBlock(), vue.createElementBlock("button", {
-                    key: emoji.shortname,
-                    ref_for: true,
-                    ref: (el) => {
-                      if (el)
-                        vue.unref(setEmojiRef)(el, indexTab, indexEmoji);
-                    },
-                    type: "button",
-                    "aria-label": emoji.name,
-                    onClick: ($event) => selectEmoji(emoji),
-                    onFocusin: ($event) => highlightEmoji(emoji),
-                    onFocusout: _cache[0] || (_cache[0] = ($event) => highlightEmoji(null)),
-                    onMouseover: ($event) => highlightEmoji(emoji),
-                    onMouseleave: _cache[1] || (_cache[1] = ($event) => highlightEmoji(null)),
-                    onKeydown: (event) => handleKeyDown(event, indexTab, indexEmoji, emoji)
-                  }, [
-                    vue.createElementVNode("img", {
-                      class: "d-icon d-icon--size-500",
-                      alt: emoji.name,
-                      "aria-label": emoji.name,
-                      title: emoji.name,
-                      src: getImgSrc(emoji.unicode_character),
-                      onError: handleImageError
-                    }, null, 40, _hoisted_6$1)
-                  ], 40, _hoisted_5$1);
-                }), 128))
-              ])
-            ])), [
-              [vue.vShow, !__props.emojiFilter]
-            ]);
-          }), 128)),
-          __props.emojiFilter ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [
-            vue.createElementVNode("div", _hoisted_8, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredEmojis.value, (emoji, index) => {
-                return vue.openBlock(), vue.createElementBlock("button", {
-                  key: emoji.shortname,
-                  ref_for: true,
-                  ref: (el) => {
-                    if (el)
-                      vue.unref(setFilteredRef)(el, index);
-                  },
-                  type: "button",
-                  "aria-label": emoji.name,
-                  class: vue.normalizeClass({
-                    "hover-emoji": index === 0 && vue.unref(hoverFirstEmoji)
-                  }),
-                  onClick: ($event) => selectEmoji(emoji),
-                  onFocusin: ($event) => highlightEmoji(emoji),
-                  onFocusout: _cache[2] || (_cache[2] = ($event) => highlightEmoji(null)),
-                  onMouseover: ($event) => hoverEmoji(emoji),
-                  onMouseleave: _cache[3] || (_cache[3] = ($event) => hoverEmoji(null)),
-                  onKeydown: (event) => handleKeyDownFilteredEmojis(event, index, emoji)
-                }, [
-                  vue.createElementVNode("img", {
-                    class: "d-icon d-icon--size-500",
-                    alt: emoji.name,
-                    "aria-label": emoji.name,
-                    title: emoji.name,
-                    src: `${vue.unref(CDN_URL) + emoji.unicode_character}.png`
-                  }, null, 8, _hoisted_10)
-                ], 42, _hoisted_9);
-              }), 128))
-            ])
-          ])) : vue.createCommentVNode("", true)
-        ], 512)
-      ]);
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [vue.createElementVNode("div", {
+        id: "d-emoji-picker-list",
+        ref_key: "listRef",
+        ref: listRef,
+        class: "d-emoji-picker__list"
+      }, [__props.emojiFilter ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$3, vue.toDisplayString(filteredEmojis.value.length > 0 ? __props.searchResultsLabel : __props.searchNoResultsLabel), 1)) : (vue.openBlock(), vue.createElementBlock("div", {
+        key: 1,
+        ref_key: "tabCategoryRef",
+        ref: tabCategoryRef,
+        class: "d-emoji-picker__category d-emoji-picker__alignment"
+      }, [vue.createElementVNode("p", null, vue.toDisplayString(fixedLabel.value), 1)], 512)), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabLabels.value, (tabLabel, indexTab) => {
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+          key: indexTab,
+          ref_for: true,
+          ref: tabLabel.ref,
+          class: "d-emoji-picker__alignment"
+        }, [indexTab ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3$2, vue.toDisplayString(tabLabel.label), 1)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_4$2, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(dialtoneEmojis.emojisGrouped)[tabs.value[indexTab] + __props.skinTone] ? vue.unref(dialtoneEmojis.emojisGrouped)[tabs.value[indexTab] + __props.skinTone] : vue.unref(dialtoneEmojis.emojisGrouped)[tabs.value[indexTab]], (emoji, indexEmoji) => {
+          return vue.openBlock(), vue.createElementBlock("button", {
+            key: emoji.shortname,
+            ref_for: true,
+            ref: (el) => {
+              if (el)
+                vue.unref(setEmojiRef)(el, indexTab, indexEmoji);
+            },
+            type: "button",
+            "aria-label": emoji.name,
+            onClick: ($event) => selectEmoji(emoji),
+            onFocusin: ($event) => highlightEmoji(emoji),
+            onFocusout: _cache[0] || (_cache[0] = ($event) => highlightEmoji(null)),
+            onMouseover: ($event) => highlightEmoji(emoji),
+            onMouseleave: _cache[1] || (_cache[1] = ($event) => highlightEmoji(null)),
+            onKeydown: (event) => handleKeyDown(event, indexTab, indexEmoji, emoji)
+          }, [vue.createElementVNode("img", {
+            class: "d-icon d-icon--size-500",
+            alt: emoji.name,
+            "aria-label": emoji.name,
+            title: emoji.name,
+            src: getImgSrc(emoji.unicode_character),
+            onError: handleImageError
+          }, null, 40, _hoisted_6$1)], 40, _hoisted_5$1);
+        }), 128))])])), [[vue.vShow, !__props.emojiFilter]]);
+      }), 128)), __props.emojiFilter ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [vue.createElementVNode("div", _hoisted_8, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredEmojis.value, (emoji, index) => {
+        return vue.openBlock(), vue.createElementBlock("button", {
+          key: emoji.shortname,
+          ref_for: true,
+          ref: (el) => {
+            if (el)
+              vue.unref(setFilteredRef)(el, index);
+          },
+          type: "button",
+          "aria-label": emoji.name,
+          class: vue.normalizeClass({
+            "hover-emoji": index === 0 && vue.unref(hoverFirstEmoji)
+          }),
+          onClick: ($event) => selectEmoji(emoji),
+          onFocusin: ($event) => highlightEmoji(emoji),
+          onFocusout: _cache[2] || (_cache[2] = ($event) => highlightEmoji(null)),
+          onMouseover: ($event) => hoverEmoji(emoji),
+          onMouseleave: _cache[3] || (_cache[3] = ($event) => hoverEmoji(null)),
+          onKeydown: (event) => handleKeyDownFilteredEmojis(event, index, emoji)
+        }, [vue.createElementVNode("img", {
+          class: "d-icon d-icon--size-500",
+          alt: emoji.name,
+          "aria-label": emoji.name,
+          title: emoji.name,
+          src: `${vue.unref(CDN_URL) + emoji.unicode_character}.png`
+        }, null, 8, _hoisted_10)], 42, _hoisted_9);
+      }), 128))])])) : vue.createCommentVNode("", true)], 512)]);
     };
   }
 };
-const _hoisted_1$2 = { "data-qa": "skin-selector" };
-const _hoisted_2$2 = { class: "d-emoji-picker__skin-list" };
+const _hoisted_1$2 = {
+  "data-qa": "skin-selector"
+};
+const _hoisted_2$2 = {
+  class: "d-emoji-picker__skin-list"
+};
 const _hoisted_3$1 = ["onKeydown", "onClick"];
 const _hoisted_4$1 = ["alt", "aria-label", "title", "src"];
-const _hoisted_5 = { class: "d-emoji-picker__skin-selected" };
+const _hoisted_5 = {
+  class: "d-emoji-picker__skin-selected"
+};
 const _hoisted_6 = ["aria-label"];
 const _hoisted_7 = ["alt", "aria-label", "title", "src"];
 const _sfc_main$2 = {
@@ -890,53 +882,47 @@ const _sfc_main$2 = {
     "focus-tabset",
     "focus-last-emoji"
   ],
-  setup(__props, { expose: __expose, emit: __emit }) {
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
     const props = __props;
     const emits = __emit;
-    const skinList = [
-      {
-        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: ""
-      }
-    ];
+    const skinList = [{
+      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: ""
+    }];
     const isOpen = vue.ref(false);
     const skinSelectorRef = vue.ref(null);
     const skinsRef = vue.ref([]);
-    vue.watchEffect(
-      () => props.isHovering && (isOpen.value = false)
-    );
+    vue.watchEffect(() => props.isHovering && (isOpen.value = false));
     const skinPassedIn = vue.computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));
     const skinSelected = vue.ref(skinPassedIn.value);
     vue.watchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));
@@ -986,67 +972,52 @@ const _sfc_main$2 = {
       focusSkinSelector
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
-        vue.withDirectives(vue.createElementVNode("div", _hoisted_2$2, [
-          (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(skinList, (skin, index) => {
-            return vue.createElementVNode("button", {
-              ref_for: true,
-              ref: (el) => {
-                if (el)
-                  setSkinsRef(el);
-              },
-              key: skin.name,
-              class: vue.normalizeClass({
-                "selected": skinSelected.value.skinCode === skin.skinCode
-              }),
-              onKeydown: (event) => handleKeyDown(event, skin, index),
-              onClick: ($event) => selectSkin(skin)
-            }, [
-              vue.createElementVNode("img", {
-                class: "d-icon d-icon--size-500",
-                alt: skin.name,
-                "aria-label": skin.name,
-                title: skin.name,
-                src: `${vue.unref(CDN_URL) + skin.unicode_output}.png`
-              }, null, 8, _hoisted_4$1)
-            ], 42, _hoisted_3$1);
-          }), 64))
-        ], 512), [
-          [vue.vShow, isOpen.value]
-        ]),
-        vue.withDirectives(vue.createElementVNode("div", _hoisted_5, [
-          vue.createVNode(vue.unref(lib_tooltip.DtTooltip), { placement: "top-end" }, {
-            anchor: vue.withCtx(() => [
-              vue.createElementVNode("button", {
-                ref_key: "skinSelectorRef",
-                ref: skinSelectorRef,
-                "aria-label": __props.skinSelectorButtonTooltipLabel,
-                tabindex: "-1",
-                onClick: toggleSkinList,
-                onKeydown: _cache[0] || (_cache[0] = (event) => handleKeyDown(event))
-              }, [
-                vue.createElementVNode("img", {
-                  class: "d-icon d-icon--size-500",
-                  alt: skinSelected.value.name,
-                  "aria-label": skinSelected.value.name,
-                  title: skinSelected.value.name,
-                  src: `${vue.unref(CDN_URL) + skinSelected.value.unicode_output}.png`
-                }, null, 8, _hoisted_7)
-              ], 40, _hoisted_6)
-            ]),
-            default: vue.withCtx(() => [
-              vue.createTextVNode(vue.toDisplayString(__props.skinSelectorButtonTooltipLabel) + " ", 1)
-            ]),
-            _: 1
-          })
-        ], 512), [
-          [vue.vShow, !isOpen.value]
-        ])
-      ]);
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [vue.withDirectives(vue.createElementVNode("div", _hoisted_2$2, [(vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(skinList, (skin, index) => {
+        return vue.createElementVNode("button", {
+          ref_for: true,
+          ref: (el) => {
+            if (el)
+              setSkinsRef(el);
+          },
+          key: skin.name,
+          class: vue.normalizeClass({
+            "selected": skinSelected.value.skinCode === skin.skinCode
+          }),
+          onKeydown: (event) => handleKeyDown(event, skin, index),
+          onClick: ($event) => selectSkin(skin)
+        }, [vue.createElementVNode("img", {
+          class: "d-icon d-icon--size-500",
+          alt: skin.name,
+          "aria-label": skin.name,
+          title: skin.name,
+          src: `${vue.unref(CDN_URL) + skin.unicode_output}.png`
+        }, null, 8, _hoisted_4$1)], 42, _hoisted_3$1);
+      }), 64))], 512), [[vue.vShow, isOpen.value]]), vue.withDirectives(vue.createElementVNode("div", _hoisted_5, [vue.createVNode(vue.unref(lib_tooltip.DtTooltip), {
+        placement: "top-end"
+      }, {
+        anchor: vue.withCtx(() => [vue.createElementVNode("button", {
+          ref_key: "skinSelectorRef",
+          ref: skinSelectorRef,
+          "aria-label": __props.skinSelectorButtonTooltipLabel,
+          tabindex: "-1",
+          onClick: toggleSkinList,
+          onKeydown: _cache[0] || (_cache[0] = (event) => handleKeyDown(event))
+        }, [vue.createElementVNode("img", {
+          class: "d-icon d-icon--size-500",
+          alt: skinSelected.value.name,
+          "aria-label": skinSelected.value.name,
+          title: skinSelected.value.name,
+          src: `${vue.unref(CDN_URL) + skinSelected.value.unicode_output}.png`
+        }, null, 8, _hoisted_7)], 40, _hoisted_6)]),
+        default: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString(__props.skinSelectorButtonTooltipLabel) + " ", 1)]),
+        _: 1
+      })], 512), [[vue.vShow, !isOpen.value]])]);
     };
   }
 };
-const _hoisted_1$1 = { class: "d-emoji-picker__data" };
+const _hoisted_1$1 = {
+  class: "d-emoji-picker__data"
+};
 const _hoisted_2$1 = ["alt", "aria-label", "title", "src"];
 const _sfc_main$1 = {
   __name: "emoji_description",
@@ -1064,24 +1035,29 @@ const _sfc_main$1 = {
   setup(__props) {
     return (_ctx, _cache) => {
       var _a;
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
-        __props.emoji ? (vue.openBlock(), vue.createElementBlock("img", {
-          key: 0,
-          class: "d-icon d-icon--size-500",
-          alt: __props.emoji.name,
-          "aria-label": __props.emoji.name,
-          title: __props.emoji.name,
-          src: `${vue.unref(CDN_URL) + __props.emoji.unicode_character}.png`
-        }, null, 8, _hoisted_2$1)) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", null, vue.toDisplayString((_a = __props.emoji) == null ? void 0 : _a.name), 1)
-      ]);
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [__props.emoji ? (vue.openBlock(), vue.createElementBlock("img", {
+        key: 0,
+        class: "d-icon d-icon--size-500",
+        alt: __props.emoji.name,
+        "aria-label": __props.emoji.name,
+        title: __props.emoji.name,
+        src: `${vue.unref(CDN_URL) + __props.emoji.unicode_character}.png`
+      }, null, 8, _hoisted_2$1)) : vue.createCommentVNode("", true), vue.createElementVNode("div", null, vue.toDisplayString((_a = __props.emoji) == null ? void 0 : _a.name), 1)]);
     };
   }
 };
-const _hoisted_1 = { class: "d-emoji-picker" };
-const _hoisted_2 = { class: "d-emoji-picker--header" };
-const _hoisted_3 = { class: "d-emoji-picker--body" };
-const _hoisted_4 = { class: "d-emoji-picker--footer" };
+const _hoisted_1 = {
+  class: "d-emoji-picker"
+};
+const _hoisted_2 = {
+  class: "d-emoji-picker--header"
+};
+const _hoisted_3 = {
+  class: "d-emoji-picker--body"
+};
+const _hoisted_4 = {
+  class: "d-emoji-picker--footer"
+};
 const _sfc_main = {
   __name: "emoji_picker",
   props: {
@@ -1209,7 +1185,9 @@ const _sfc_main = {
      */
     "close"
   ],
-  setup(__props, { emit: __emit }) {
+  setup(__props, {
+    emit: __emit
+  }) {
     const props = __props;
     const emits = __emit;
     const internalSearchQuery = vue.ref(props.searchQuery.value);
@@ -1218,16 +1196,16 @@ const _sfc_main = {
     const scrollIntoTab = vue.ref(0);
     const isScrolling = vue.ref(false);
     const showRecentlyUsedTab = vue.computed(() => props.recentlyUsedEmojis.length > 0);
-    vue.watch(
-      () => props.searchQuery,
-      (newValue) => {
-        internalSearchQuery.value = newValue;
-      }
-    );
+    vue.watch(() => props.searchQuery, (newValue) => {
+      internalSearchQuery.value = newValue;
+    });
     function scrollToSelectedTabset(tabId) {
       internalSearchQuery.value = "";
       selectedTabset.value = tabId;
-      selectedTabset.value = { ...selectedTabset.value, tabId };
+      selectedTabset.value = {
+        ...selectedTabset.value,
+        tabId
+      };
     }
     function updateScrollIntoTab(value) {
       scrollIntoTab.value = value;
@@ -1239,65 +1217,55 @@ const _sfc_main = {
       highlightedEmoji.value = emoji;
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.createElementVNode("div", _hoisted_2, [
-          vue.createVNode(_sfc_main$4, {
-            ref: "tabsetRef",
-            "emoji-filter": internalSearchQuery.value,
-            "show-recently-used-tab": showRecentlyUsedTab.value,
-            "scroll-into-tab": scrollIntoTab.value,
-            "tabset-labels": __props.tabSetLabels,
-            "is-scrolling": isScrolling.value,
-            onFocusSkinSelector: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
-            onFocusSearchInput: _cache[1] || (_cache[1] = ($event) => __props.showSearch ? _ctx.$refs.searchInputRef.focusSearchInput() : _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
-            onSelectedTabset: scrollToSelectedTabset,
-            onKeydown: _cache[2] || (_cache[2] = vue.withKeys(($event) => emits("close"), ["esc"]))
-          }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels", "is-scrolling"])
-        ]),
-        vue.createElementVNode("div", _hoisted_3, [
-          __props.showSearch ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
-            key: 0,
-            ref: "searchInputRef",
-            modelValue: internalSearchQuery.value,
-            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => internalSearchQuery.value = $event),
-            "search-placeholder-label": __props.searchPlaceholderLabel,
-            onSelectFirstEmoji: _cache[4] || (_cache[4] = ($event) => emits("selected-emoji", highlightedEmoji.value)),
-            onFocusTabset: _cache[5] || (_cache[5] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
-            onFocusEmojiSelector: _cache[6] || (_cache[6] = ($event) => _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
-            onKeydown: _cache[7] || (_cache[7] = vue.withKeys(($event) => emits("close"), ["esc"]))
-          }, null, 8, ["modelValue", "search-placeholder-label"])) : vue.createCommentVNode("", true),
-          vue.createVNode(_sfc_main$3, {
-            ref: "emojiSelectorRef",
-            "emoji-filter": internalSearchQuery.value,
-            "skin-tone": __props.skinTone,
-            "tabset-labels": __props.tabSetLabels,
-            "search-results-label": __props.searchResultsLabel,
-            "search-no-results-label": __props.searchNoResultsLabel,
-            "recently-used-emojis": __props.recentlyUsedEmojis,
-            "selected-tabset": selectedTabset.value,
-            onScrollIntoTab: updateScrollIntoTab,
-            onIsScrolling: updateIsScrolling,
-            onHighlightedEmoji: updateHighlightedEmoji,
-            onSelectedEmoji: _cache[8] || (_cache[8] = ($event) => emits("selected-emoji", $event)),
-            onFocusSkinSelector: _cache[9] || (_cache[9] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
-            onFocusSearchInput: _cache[10] || (_cache[10] = ($event) => __props.showSearch ? _ctx.$refs.searchInputRef.focusSearchInput() : _ctx.$refs.tabsetRef.focusTabset()),
-            onKeydown: _cache[11] || (_cache[11] = vue.withKeys(($event) => emits("close"), ["esc"]))
-          }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])
-        ]),
-        vue.createElementVNode("div", _hoisted_4, [
-          vue.createVNode(_sfc_main$1, { emoji: highlightedEmoji.value }, null, 8, ["emoji"]),
-          vue.createVNode(_sfc_main$2, {
-            ref: "skinSelectorRef",
-            "is-hovering": !!highlightedEmoji.value,
-            "skin-selector-button-tooltip-label": __props.skinSelectorButtonTooltipLabel,
-            "skin-tone": __props.skinTone,
-            onSkinTone: _cache[12] || (_cache[12] = ($event) => emits("skin-tone", $event)),
-            onFocusTabset: _cache[13] || (_cache[13] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
-            onFocusLastEmoji: _cache[14] || (_cache[14] = ($event) => _ctx.$refs.emojiSelectorRef.focusLastEmoji()),
-            onKeydown: _cache[15] || (_cache[15] = vue.withKeys(($event) => emits("close"), ["esc"]))
-          }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
-        ])
-      ]);
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [vue.createElementVNode("div", _hoisted_2, [vue.createVNode(_sfc_main$4, {
+        ref: "tabsetRef",
+        "emoji-filter": internalSearchQuery.value,
+        "show-recently-used-tab": showRecentlyUsedTab.value,
+        "scroll-into-tab": scrollIntoTab.value,
+        "tabset-labels": __props.tabSetLabels,
+        "is-scrolling": isScrolling.value,
+        onFocusSkinSelector: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
+        onFocusSearchInput: _cache[1] || (_cache[1] = ($event) => __props.showSearch ? _ctx.$refs.searchInputRef.focusSearchInput() : _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
+        onSelectedTabset: scrollToSelectedTabset,
+        onKeydown: _cache[2] || (_cache[2] = vue.withKeys(($event) => emits("close"), ["esc"]))
+      }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels", "is-scrolling"])]), vue.createElementVNode("div", _hoisted_3, [__props.showSearch ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
+        key: 0,
+        ref: "searchInputRef",
+        modelValue: internalSearchQuery.value,
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => internalSearchQuery.value = $event),
+        "search-placeholder-label": __props.searchPlaceholderLabel,
+        onSelectFirstEmoji: _cache[4] || (_cache[4] = ($event) => emits("selected-emoji", highlightedEmoji.value)),
+        onFocusTabset: _cache[5] || (_cache[5] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
+        onFocusEmojiSelector: _cache[6] || (_cache[6] = ($event) => _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
+        onKeydown: _cache[7] || (_cache[7] = vue.withKeys(($event) => emits("close"), ["esc"]))
+      }, null, 8, ["modelValue", "search-placeholder-label"])) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$3, {
+        ref: "emojiSelectorRef",
+        "emoji-filter": internalSearchQuery.value,
+        "skin-tone": __props.skinTone,
+        "tabset-labels": __props.tabSetLabels,
+        "search-results-label": __props.searchResultsLabel,
+        "search-no-results-label": __props.searchNoResultsLabel,
+        "recently-used-emojis": __props.recentlyUsedEmojis,
+        "selected-tabset": selectedTabset.value,
+        onScrollIntoTab: updateScrollIntoTab,
+        onIsScrolling: updateIsScrolling,
+        onHighlightedEmoji: updateHighlightedEmoji,
+        onSelectedEmoji: _cache[8] || (_cache[8] = ($event) => emits("selected-emoji", $event)),
+        onFocusSkinSelector: _cache[9] || (_cache[9] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
+        onFocusSearchInput: _cache[10] || (_cache[10] = ($event) => __props.showSearch ? _ctx.$refs.searchInputRef.focusSearchInput() : _ctx.$refs.tabsetRef.focusTabset()),
+        onKeydown: _cache[11] || (_cache[11] = vue.withKeys(($event) => emits("close"), ["esc"]))
+      }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])]), vue.createElementVNode("div", _hoisted_4, [vue.createVNode(_sfc_main$1, {
+        emoji: highlightedEmoji.value
+      }, null, 8, ["emoji"]), vue.createVNode(_sfc_main$2, {
+        ref: "skinSelectorRef",
+        "is-hovering": !!highlightedEmoji.value,
+        "skin-selector-button-tooltip-label": __props.skinSelectorButtonTooltipLabel,
+        "skin-tone": __props.skinTone,
+        onSkinTone: _cache[12] || (_cache[12] = ($event) => emits("skin-tone", $event)),
+        onFocusTabset: _cache[13] || (_cache[13] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
+        onFocusLastEmoji: _cache[14] || (_cache[14] = ($event) => _ctx.$refs.emojiSelectorRef.focusLastEmoji()),
+        onKeydown: _cache[15] || (_cache[15] = vue.withKeys(($event) => emits("close"), ["esc"]))
+      }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])])]);
     };
   }
 };