@dialpad/dialtone 9.66.0 → 9.67.0

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

@@ -4,24 +4,22 @@ 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-X7IvNGTl.js");
+const tab = require("../chunks/tab-qc3f42Yp.js");
 const dialtoneEmojis = require("@dialpad/dialtone-emojis");
 const lib_tooltip = require("./tooltip.cjs");
 require("../common/constants.cjs");
 require("../common/utils.cjs");
-require("../chunks/input-dLLo3Wtg.js");
+require("../chunks/input-ttnte8zB.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-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("../chunks/link_constants-x8NwdqmA.js");
-require("../chunks/popover_constants-h9MD6WUt.js");
+require("../chunks/popover_constants-XnGWXaxX.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: {
@@ -35,10 +33,7 @@ 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() {
@@ -55,41 +50,53 @@ 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: {
@@ -134,40 +141,20 @@ 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) => ({
@@ -179,20 +166,24 @@ 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;
@@ -226,35 +217,41 @@ 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"])
+      ]);
     };
   }
 };
@@ -432,19 +429,13 @@ 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 = {
@@ -549,10 +540,7 @@ 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 {
@@ -570,13 +558,7 @@ 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(() => {
@@ -584,7 +566,16 @@ 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 = [];
@@ -592,14 +583,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) {
@@ -610,11 +601,13 @@ 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);
@@ -679,9 +672,7 @@ 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);
@@ -767,88 +758,105 @@ 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 = {
@@ -882,47 +890,53 @@ 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));
@@ -972,52 +986,67 @@ 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",
@@ -1035,29 +1064,24 @@ 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: {
@@ -1185,9 +1209,7 @@ 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);
@@ -1196,16 +1218,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;
@@ -1217,55 +1239,65 @@ 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"])
+        ])
+      ]);
     };
   }
 };