@dialpad/dialtone 9.71.0-beta.1 → 9.71.0

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

@@ -1,1302 +1,9 @@
-import { ref, onMounted, openBlock, createElementBlock, createVNode, unref, withKeys, withModifiers, createSlots, withCtx, computed, toRefs, watch, Fragment, renderList, createBlock, nextTick, onUnmounted, createElementVNode, toDisplayString, withDirectives, createCommentVNode, vShow, normalizeClass, watchEffect, createTextVNode } from "vue";
-import { DtIconSearch, DtIconXCircle } from "@dialpad/dialtone-icons/vue3";
-import { DtInput } from "./input.js";
-import { DtButton } from "./button.js";
-import { DtTabGroup, DtTab } from "../chunks/tab-RTDgnD9-.js";
-import { DtIcon } from "./icon.js";
-import { emojisGrouped } from "@dialpad/dialtone-emojis";
-import { DtTooltip } from "./tooltip.js";
-import "../common/constants.js";
-import "../common/utils.js";
-import "../chunks/input-NmYDD5bn.js";
-import "../common/validators.js";
-import "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
-import "./validation-messages.js";
-import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/icon_constants-H9ahUVCG.js";
-import "@dialpad/dialtone-icons/icons.js";
-import "../chunks/popover_constants-WsOUIY-m.js";
-import "tippy.js";
-const _hoisted_1$5 = { class: "d-emoji-picker__search d-emoji-picker__alignment" };
-const _sfc_main$5 = {
-  __name: "emoji_search",
-  props: {
-    searchPlaceholderLabel: {
-      type: String,
-      required: true
-    },
-    modelValue: {
-      type: String,
-      default: ""
-    }
-  },
-  emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const emits = __emit;
-    const searchInput = ref(null);
-    function clearSearch() {
-      emits("update:modelValue", "");
-      focusSearchInput();
-    }
-    function focusSearchInput() {
-      searchInput.value.focus();
-    }
-    onMounted(() => {
-      focusSearchInput();
-    });
-    __expose({
-      focusSearchInput
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
-        createVNode(unref(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] = withKeys(($event) => _ctx.$emit("focus-tabset"), ["up"])),
-            _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => _ctx.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
-            _cache[3] || (_cache[3] = withKeys(($event) => _ctx.$emit("select-first-emoji"), ["enter"]))
-          ]
-        }, createSlots({
-          leftIcon: withCtx(() => [
-            createVNode(unref(DtIconSearch), { size: "200" })
-          ]),
-          _: 2
-        }, [
-          __props.modelValue.length > 0 ? {
-            name: "rightIcon",
-            fn: withCtx(() => [
-              createVNode(unref(DtButton), {
-                importance: "clear",
-                kind: "muted",
-                onClick: clearSearch
-              }, {
-                icon: withCtx(() => [
-                  createVNode(unref(DtIconXCircle), { size: "200" })
-                ]),
-                _: 1
-              })
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1032, ["placeholder", "model-value"])
-      ]);
-    };
-  }
-};
-const _hoisted_1$4 = { class: "d-emoji-picker__tabset" };
-const _sfc_main$4 = {
-  __name: "emoji_tabset",
-  props: {
-    /**
-     * Whether to show the recently used tab or not
-     * @type {Boolean}
-     * @default false
-     */
-    showRecentlyUsedTab: {
-      type: Boolean,
-      default: false
-    },
-    scrollIntoTab: {
-      type: Number,
-      required: true
-    },
-    isScrolling: {
-      type: Boolean,
-      default: false
-    },
-    emojiFilter: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The labels for the aria-label
-     * @type {Array}
-     * @required
-     */
-    tabsetLabels: {
-      type: Array,
-      required: true
-    }
-  },
-  emits: [
-    /**
-     * Emitted when a tab is selected
-     * @event selected-tabset
-     * @param {String} tabId - The name of the tab that was selected
-     */
-    "selected-tabset",
-    "focus-search-input",
-    "focus-skin-selector"
-  ],
-  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 = computed(() => {
-      const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);
-      return tabsData.map((tab, index) => ({
-        ...tab,
-        label: props.tabsetLabels[index],
-        id: (index + 1).toString(),
-        panelId: (index + 1).toString()
-      }));
-    });
-    const isSearching = computed(() => props.emojiFilter.length > 0);
-    const selectedTab = ref("1");
-    const { isScrolling } = toRefs(props);
-    const tabsetRef = ref([]);
-    watch(
-      () => props.scrollIntoTab,
-      () => {
-        if (!isScrolling.value && !isSearching.value) {
-          selectedTab.value = (props.scrollIntoTab + 1).toString();
-        }
-      }
-    );
-    watch(
-      isSearching,
-      () => {
-        if (isSearching.value) {
-          selectedTab.value = null;
-        }
-      }
-    );
-    function selectTabset(id) {
-      if (!isScrolling.value) {
-        selectedTab.value = id;
-      }
-      emits("selected-tabset", id);
-    }
-    function setTabsetRef(ref2) {
-      tabsetRef.value.push(ref2.$el);
-    }
-    function focusTabset() {
-      tabsetRef.value[0].focus();
-    }
-    function handleKeyDown(event, tabId) {
-      if (event.key === "Enter") {
-        selectTabset(tabId);
-        tabsetRef.value[tabId - 1].blur();
-      }
-      if (event.key === "Tab") {
-        event.preventDefault();
-        if (event.shiftKey) {
-          emits("focus-skin-selector");
-        } else {
-          emits("focus-search-input");
-        }
-      }
-      if (event.key === "ArrowDown") {
-        emits("focus-search-input");
-      }
-    }
-    __expose({
-      focusTabset
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        createVNode(unref(DtTabGroup), {
-          "tab-list-class": "d-emoji-picker__tabset-list",
-          selected: selectedTab.value
-        }, {
-          tabs: withCtx(() => [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (tab, index) => {
-              return openBlock(), createBlock(unref(DtTab), {
-                id: tab.id,
-                ref_for: true,
-                ref: (el) => {
-                  if (el)
-                    setTabsetRef(el);
-                },
-                key: tab.id,
-                "panel-id": tab.panelId,
-                label: tab.label,
-                "aria-controls": "d-emoji-picker-list",
-                tabindex: index + 1,
-                onClickCapture: withModifiers(($event) => selectTabset(tab.id), ["stop"]),
-                onKeydown: ($event) => handleKeyDown($event, tab.id)
-              }, {
-                default: withCtx(() => [
-                  createVNode(unref(DtIcon), {
-                    size: "400",
-                    name: tab.icon
-                  }, null, 8, ["name"])
-                ]),
-                _: 2
-              }, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]);
-            }), 128))
-          ]),
-          _: 1
-        }, 8, ["selected"])
-      ]);
-    };
-  }
-};
-const ARROW_KEYS = {
-  ARROW_UP: "ArrowUp",
-  ARROW_DOWN: "ArrowDown",
-  ARROW_LEFT: "ArrowLeft",
-  ARROW_RIGHT: "ArrowRight"
-};
-const CDN_URL = "https://static.dialpadcdn.com/joypixels/png/unicode/32/";
-const EMOJIS_PER_ROW = 9;
-const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {
-  DEFAULT: "Default",
-  LIGHT: "Light",
-  MEDIUM_LIGHT: "MediumLight",
-  MEDIUM: "Medium",
-  MEDIUM_DARK: "MediumDark",
-  DARK: "Dark"
-};
-const EMOJI_PICKER_CATEGORIES = {
-  MOST_RECENTLY_USED: "Most recently used",
-  SMILEYS_AND_PEOPLE: "Smileys and people",
-  NATURE: "Nature",
-  FOOD: "Food",
-  ACTIVITY: "Activity",
-  TRAVEL: "Travel",
-  OBJECTS: "Objects",
-  SYMBOLS: "Symbols",
-  FLAGS: "Flags"
-};
-function useKeyboardNavigation() {
-  const emojiRefs = ref([]);
-  const emojiFilteredRefs = ref([]);
-  const isFiltering = ref(false);
-  const hoverFirstEmoji = ref(true);
-  function _handleArrowLeft(indexTab, indexEmoji) {
-    if (!focusEmoji(indexTab, indexEmoji - 1)) {
-      if (emojiRefs.value[indexTab - 1]) {
-        focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);
-      } else {
-        focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);
-      }
-    }
-  }
-  function _handleArrowRight(indexTab, indexEmoji) {
-    if (!focusEmoji(indexTab, indexEmoji + 1)) {
-      if (!focusEmoji(indexTab + 1, 0)) {
-        focusEmoji(0, 0);
-      }
-    }
-  }
-  function _handleArrowLeftFiltered(indexTab, indexEmoji) {
-    if (!focusEmoji(0, indexEmoji - 1)) {
-      focusEmoji(0, emojiFilteredRefs.value.length - 1);
-    }
-  }
-  function _handleArrowRightFiltered(indexTab, indexEmoji) {
-    if (!focusEmoji(0, indexEmoji + 1)) {
-      focusEmoji(0, 0);
-    }
-  }
-  function _handleHorizontalNavigation(direction, indexTab, indexEmoji) {
-    if (isFiltering.value) {
-      if (direction === "left") {
-        _handleArrowLeftFiltered(indexTab, indexEmoji);
-      } else if (direction === "right") {
-        _handleArrowRightFiltered(indexTab, indexEmoji);
-      }
-    } else {
-      if (direction === "left") {
-        _handleArrowLeft(indexTab, indexEmoji);
-      } else if (direction === "right") {
-        _handleArrowRight(indexTab, indexEmoji);
-      }
-    }
-  }
-  function focusEmoji(indexTab, indexEmoji) {
-    var _a, _b, _c;
-    const emojiRef = isFiltering.value ? (_a = emojiFilteredRefs.value) == null ? void 0 : _a[indexEmoji] : (_c = (_b = emojiRefs.value) == null ? void 0 : _b[indexTab]) == null ? void 0 : _c[indexEmoji];
-    if (emojiRef) {
-      emojiRef.focus();
-      return true;
-    }
-    return false;
-  }
-  function setEmojiRef(el, indexTab, indexEmoji) {
-    if (!emojiRefs.value[indexTab]) {
-      emojiRefs.value[indexTab] = [];
-    }
-    emojiRefs.value[indexTab][indexEmoji] = el;
-  }
-  function setFilteredRef(el, index) {
-    emojiFilteredRefs.value[index] = el;
-  }
-  function handleArrowNavigationFiltered(key, indexEmoji) {
-    var _a;
-    hoverFirstEmoji.value = false;
-    if (key === ARROW_KEYS.ARROW_UP) {
-      const position = indexEmoji % EMOJIS_PER_ROW;
-      if (!focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {
-        const lastEmojiPosition = emojiFilteredRefs.value.length - emojiFilteredRefs.value.length % EMOJIS_PER_ROW + position;
-        focusEmoji(0, lastEmojiPosition);
-        if (!focusEmoji(0, lastEmojiPosition)) {
-          focusEmoji(0, emojiFilteredRefs.value.length - 1);
-        }
-      }
-    }
-    if (key === ARROW_KEYS.ARROW_DOWN) {
-      if (!focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {
-        const position = indexEmoji % EMOJIS_PER_ROW;
-        if ((_a = emojiFilteredRefs.value) == null ? void 0 : _a[indexEmoji + (EMOJIS_PER_ROW - position)]) {
-          focusEmoji(0, emojiFilteredRefs.value.length - 1);
-        } else {
-          focusEmoji(0, position);
-        }
-      }
-    }
-    if (key === ARROW_KEYS.ARROW_LEFT) {
-      _handleHorizontalNavigation("left", 0, indexEmoji);
-    }
-    if (key === ARROW_KEYS.ARROW_RIGHT) {
-      _handleHorizontalNavigation("right", 0, indexEmoji);
-    }
-  }
-  function handleArrowNavigation(key, indexTab, indexEmoji) {
-    var _a, _b;
-    if (key === "ArrowUp") {
-      const position = indexEmoji % EMOJIS_PER_ROW;
-      if (indexTab === 0) {
-        const numberOfMissingEmojis = EMOJIS_PER_ROW - emojiRefs.value[emojiRefs.value.length - 1].length % EMOJIS_PER_ROW;
-        const emojiToJump = emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);
-        if (!focusEmoji(emojiRefs.value.length - 1, emojiToJump)) {
-          focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);
-        }
-        return;
-      }
-      if (!focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {
-        const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;
-        const emojisInPreviousTab = emojiRefs.value[previousTab].length;
-        const lastEmojiPosition = emojisInPreviousTab - emojisInPreviousTab % EMOJIS_PER_ROW + position;
-        if (!focusEmoji(previousTab, lastEmojiPosition)) {
-          focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);
-        }
-      }
-    }
-    if (key === "ArrowDown") {
-      if (!focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {
-        const position = indexEmoji % EMOJIS_PER_ROW;
-        if ((_b = (_a = emojiRefs.value) == null ? void 0 : _a[indexTab]) == null ? void 0 : _b[indexEmoji + (EMOJIS_PER_ROW - position)]) {
-          focusEmoji(indexTab, emojiRefs.value[indexTab].length - 1);
-        } else {
-          if (!focusEmoji(indexTab + 1, position)) {
-            if (!focusEmoji(0, position)) {
-              focusEmoji(0, emojiRefs.value[0].length - 1);
-            }
-          }
-        }
-      }
-    }
-    if (key === "ArrowLeft") {
-      _handleHorizontalNavigation("left", indexTab, indexEmoji);
-    }
-    if (key === "ArrowRight") {
-      _handleHorizontalNavigation("right", indexTab, indexEmoji);
-    }
-  }
-  return {
-    emojiFilteredRefs,
-    isFiltering,
-    hoverFirstEmoji,
-    setEmojiRef,
-    setFilteredRef,
-    focusEmoji,
-    handleArrowNavigationFiltered,
-    handleArrowNavigation
-  };
-}
-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_5$1 = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"];
-const _hoisted_6$1 = ["alt", "aria-label", "title", "src"];
-const _hoisted_7$1 = {
-  key: 2,
-  class: "d-emoji-picker__alignment"
-};
-const _hoisted_8 = {
-  class: "d-emoji-picker__tab",
-  "data-qa": "filtered-emojis"
-};
-const _hoisted_9 = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"];
-const _hoisted_10 = ["alt", "aria-label", "title", "src"];
-const _sfc_main$3 = {
-  __name: "emoji_selector",
-  props: {
-    /**
-     * The filter to apply to the emoji list
-     * @type {String}
-     * @default ''
-     */
-    emojiFilter: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The skin tone to apply to the emoji list
-     * @type {String}
-     * @required
-     */
-    skinTone: {
-      type: String,
-      required: true
-    },
-    /**
-     * The labels for the tabset
-     * @type {Array}
-     * @required
-     */
-    tabsetLabels: {
-      type: Array,
-      required: true
-    },
-    selectedTabset: {
-      type: Object,
-      required: true
-    },
-    /**
-     * The label for the search results tab
-     * @type {String}
-     * @required
-     */
-    searchResultsLabel: {
-      type: String,
-      required: true
-    },
-    searchNoResultsLabel: {
-      type: String,
-      required: true
-    },
-    /**
-     * The list of recently used emojis
-     * @type {Array}
-     */
-    recentlyUsedEmojis: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: [
-    /**
-     * Emitted when the user hover over an emoji
-     * @event highlighted-emoji
-     * @param {Object} emoji - The emoji data that was hovered
-      */
-    "highlighted-emoji",
-    /**
-     * Emitted when the user select an emoji
-     * @event selected-emoji
-     * @param {Object} emoji - The emoji data that was selected
-      */
-    "selected-emoji",
-    /**
-     * Emitted when the user scroll into an emoji tab
-     * @event scroll-into-tab
-     * @param {Number} tab-index - The tab that was scrolled into
-      */
-    "scroll-into-tab",
-    /**
-     * Emitted when the scrollTo function starts scrolling and stops scrolling
-     * @event is-scrolling
-     * @param {Boolean} is-scrolling - Whether the user is scrolling with the scroll-to
-      */
-    "is-scrolling",
-    /**
-     * Emitted when the user reach the end of the emoji list
-     * @event focus-skin-selector
-      */
-    "focus-skin-selector",
-    /**
-     * Emitted when the user shift tab in first tab of emoji selector
-     * @event focus-search-input
-      */
-    "focus-search-input"
-  ],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const {
-      emojiFilteredRefs,
-      isFiltering,
-      hoverFirstEmoji,
-      setEmojiRef,
-      setFilteredRef,
-      focusEmoji,
-      handleArrowNavigationFiltered,
-      handleArrowNavigation
-    } = useKeyboardNavigation();
-    const tabCategoryRef = ref(null);
-    const listRef = ref(null);
-    const tabLabelObserver = ref(null);
-    const TABS_DATA = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"];
-    const tabLabels = computed(() => {
-      return props.recentlyUsedEmojis.length ? props.tabsetLabels.map((label) => ({ label, ref: ref(null) })) : props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));
-    });
-    const fixedLabel = ref(tabLabels.value[0].label);
-    const tabs = computed(() => {
-      return props.recentlyUsedEmojis.length ? TABS_DATA : TABS_DATA.slice(1);
-    });
-    const filteredEmojis = ref([]);
-    const currentEmojis = computed(() => {
-      return [
-        ...emojisGrouped[`People${props.skinTone}`],
-        ...emojisGrouped.Nature,
-        ...emojisGrouped.Food,
-        ...emojisGrouped[`Activity${props.skinTone}`],
-        ...emojisGrouped.Travel,
-        ...emojisGrouped[`Objects${props.skinTone}`],
-        ...emojisGrouped.Symbols,
-        ...emojisGrouped.Flags
-      ];
-    });
-    const debouncedSearch = debounce(() => {
-      emojiFilteredRefs.value = [];
-      searchByNameAndKeywords();
-    });
-    watch(currentEmojis, () => {
-      searchByNameAndKeywords();
-    }, { immediate: true });
-    watch(
-      () => props.recentlyUsedEmojis,
-      () => {
-        emojisGrouped["Recently used"] = props.recentlyUsedEmojis;
-      },
-      { immediate: true }
-    );
-    watch(() => props.emojiFilter, () => {
-      resetScroll();
-      if (props.emojiFilter) {
-        isFiltering.value = true;
-      } else {
-        isFiltering.value = false;
-        highlightEmoji(null);
-      }
-      debouncedSearch();
-    });
-    watch(
-      () => props.selectedTabset,
-      (tab) => {
-        scrollToTab(tab.tabId);
-      },
-      { deep: true }
-    );
-    function hoverEmoji(emoji, isFirst = false) {
-      hoverFirstEmoji.value = isFirst;
-      emits("highlighted-emoji", emoji);
-    }
-    function searchByNameAndKeywords() {
-      const searchStr = props.emojiFilter.toLowerCase();
-      filteredEmojis.value = currentEmojis.value.filter((obj) => {
-        const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);
-        const keywordsIncludeSearchStr = obj.keywords.some((keyword) => keyword.toLowerCase().includes(searchStr));
-        return nameIncludesSearchStr || keywordsIncludeSearchStr;
-      });
-      nextTick(() => {
-        if (searchStr) {
-          hoverEmoji(filteredEmojis.value[0], true);
-        }
-      });
-    }
-    function debounce(fn, delay = 300) {
-      let timeout;
-      return (...args) => {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => fn(...args), delay);
-      };
-    }
-    function getImgSrc(emoji) {
-      return `${CDN_URL + emoji}.png`;
-    }
-    function handleImageError(event) {
-      event.target.parentNode.style.display = "none";
-    }
-    function scrollToTab(tabIndex, focusFirstEmoji = true) {
-      const tabLabel = tabLabels.value[tabIndex - 1];
-      const tabElement = tabLabel.ref.value[0];
-      nextTick(() => {
-        const container = listRef.value;
-        const offsetTop = tabIndex === "1" ? 0 : tabElement.offsetTop - 20;
-        let isScrolling = true;
-        let prevScrollTop = container.scrollTop;
-        emits("is-scrolling", true);
-        container.addEventListener("scroll", () => {
-          if (isScrolling) {
-            const scrollTop = container.scrollTop;
-            if (prevScrollTop < scrollTop && scrollTop >= offsetTop || prevScrollTop > scrollTop && scrollTop <= offsetTop) {
-              isScrolling = false;
-              emits("is-scrolling", false);
-            }
-            prevScrollTop = scrollTop;
-          }
-        });
-        container.scrollTop = offsetTop;
-        if (focusFirstEmoji) {
-          focusEmoji(tabIndex - 1, 0);
-        }
-      });
-    }
-    function resetScroll() {
-      const container = listRef.value;
-      container.scrollTop = 0;
-    }
-    function setTabLabelObserver() {
-      tabLabelObserver.value = new IntersectionObserver(async (entries) => {
-        emits("is-scrolling", false);
-        entries.forEach((entry) => {
-          var _a, _b, _c, _d, _e;
-          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);
-            emits("scroll-into-tab", index - 1);
-          } else if (entry.boundingClientRect.bottom <= ((_c = tabCategoryRef.value) == null ? void 0 : _c.getBoundingClientRect().bottom)) {
-            emits("scroll-into-tab", index);
-            fixedLabel.value = (_d = tabLabels.value[index]) == null ? void 0 : _d.label;
-          } else if (index === 1) {
-            emits("scroll-into-tab", index);
-            fixedLabel.value = (_e = tabLabels.value[0]) == null ? void 0 : _e.label;
-          }
-        });
-      });
-      tabLabelObserver.value.observe(tabCategoryRef.value);
-      Array.from(listRef.value.children).forEach((child, index) => {
-        tabLabelObserver.value.observe(child);
-        child.dataset.index = index;
-      });
-    }
-    const handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {
-      event.preventDefault();
-      if (Object.values(ARROW_KEYS).includes(event.key)) {
-        handleArrowNavigationFiltered(event.key, indexEmoji);
-        return;
-      }
-      switch (event.key) {
-        case "Tab":
-          emits("focus-skin-selector");
-          break;
-        case "Enter":
-          selectEmoji(emoji);
-          break;
-      }
-    };
-    const handleKeyDown = (event, indexTab, indexEmoji, emoji) => {
-      event.preventDefault();
-      if (Object.values(ARROW_KEYS).includes(event.key)) {
-        handleArrowNavigation(event.key, indexTab, indexEmoji);
-        return;
-      }
-      switch (event.key) {
-        case "Tab":
-          if (event.shiftKey) {
-            if (focusEmoji(indexTab, 0) && indexTab > 0) {
-              scrollToTab(indexTab, true);
-            } else {
-              scrollToTab(1, false);
-              emits("focus-search-input");
-            }
-          } else {
-            if (focusEmoji(indexTab + 1, 0)) {
-              scrollToTab(indexTab + 1 + 1, false);
-            } else {
-              emits("focus-skin-selector");
-            }
-          }
-          break;
-        case "Enter":
-          selectEmoji(emoji);
-          break;
-      }
-    };
-    function selectEmoji(emoji) {
-      emits("selected-emoji", emoji);
-    }
-    function highlightEmoji(emoji) {
-      emits("highlighted-emoji", emoji);
-    }
-    function focusEmojiSelector() {
-      focusEmoji(0, 0);
-    }
-    function focusLastEmoji() {
-      focusEmoji(tabs.value.length - 1, 0);
-    }
-    onMounted(() => {
-      setTabLabelObserver();
-    });
-    onUnmounted(() => {
-      tabLabelObserver.value.disconnect();
-    });
-    __expose({
-      focusEmojiSelector,
-      focusLastEmoji
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
-        createElementVNode("div", {
-          id: "d-emoji-picker-list",
-          ref_key: "listRef",
-          ref: listRef,
-          class: "d-emoji-picker__list"
-        }, [
-          __props.emojiFilter ? (openBlock(), createElementBlock("p", _hoisted_2$3, toDisplayString(filteredEmojis.value.length > 0 ? __props.searchResultsLabel : __props.searchNoResultsLabel), 1)) : (openBlock(), createElementBlock("div", {
-            key: 1,
-            ref_key: "tabCategoryRef",
-            ref: tabCategoryRef,
-            class: "d-emoji-picker__category d-emoji-picker__alignment"
-          }, [
-            createElementVNode("p", null, toDisplayString(fixedLabel.value), 1)
-          ], 512)),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(tabLabels.value, (tabLabel, indexTab) => {
-            return withDirectives((openBlock(), createElementBlock("div", {
-              key: indexTab,
-              ref_for: true,
-              ref: tabLabel.ref,
-              class: "d-emoji-picker__alignment"
-            }, [
-              indexTab ? (openBlock(), createElementBlock("p", _hoisted_3$2, toDisplayString(tabLabel.label), 1)) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_4$2, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(emojisGrouped)[tabs.value[indexTab] + __props.skinTone] ? unref(emojisGrouped)[tabs.value[indexTab] + __props.skinTone] : unref(emojisGrouped)[tabs.value[indexTab]], (emoji, indexEmoji) => {
-                  return openBlock(), createElementBlock("button", {
-                    key: emoji.shortname,
-                    ref_for: true,
-                    ref: (el) => {
-                      if (el)
-                        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)
-                  }, [
-                    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))
-              ])
-            ])), [
-              [vShow, !__props.emojiFilter]
-            ]);
-          }), 128)),
-          __props.emojiFilter ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
-            createElementVNode("div", _hoisted_8, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(filteredEmojis.value, (emoji, index) => {
-                return openBlock(), createElementBlock("button", {
-                  key: emoji.shortname,
-                  ref_for: true,
-                  ref: (el) => {
-                    if (el)
-                      unref(setFilteredRef)(el, index);
-                  },
-                  type: "button",
-                  "aria-label": emoji.name,
-                  class: normalizeClass({
-                    "hover-emoji": index === 0 && 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)
-                }, [
-                  createElementVNode("img", {
-                    class: "d-icon d-icon--size-500",
-                    alt: emoji.name,
-                    "aria-label": emoji.name,
-                    title: emoji.name,
-                    src: `${unref(CDN_URL) + emoji.unicode_character}.png`
-                  }, null, 8, _hoisted_10)
-                ], 42, _hoisted_9);
-              }), 128))
-            ])
-          ])) : createCommentVNode("", true)
-        ], 512)
-      ]);
-    };
-  }
-};
-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_6 = ["aria-label"];
-const _hoisted_7 = ["alt", "aria-label", "title", "src"];
-const _sfc_main$2 = {
-  __name: "emoji_skin_selector",
-  props: {
-    /**
-     * The skin tone to apply to the emoji list
-     * @type {String}
-     * @required
-     */
-    skinTone: {
-      type: String,
-      required: true
-    },
-    isHovering: {
-      type: Boolean,
-      default: false
-    },
-    skinSelectorButtonTooltipLabel: {
-      type: String,
-      required: true
-    }
-  },
-  emits: [
-    /**
-     * The skin tone that was selected
-     * @event skin-tone
-     * @type {Number}
-     */
-    "skin-tone",
-    "focus-tabset",
-    "focus-last-emoji"
-  ],
-  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 isOpen = ref(false);
-    const skinSelectorRef = ref(null);
-    const skinsRef = ref([]);
-    watchEffect(
-      () => props.isHovering && (isOpen.value = false)
-    );
-    const skinPassedIn = computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));
-    const skinSelected = ref(skinPassedIn.value);
-    watchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));
-    function setSkinsRef(ref2) {
-      skinsRef.value.push(ref2);
-    }
-    function focusSkinSelector() {
-      skinSelectorRef.value.focus();
-    }
-    function selectSkin(skin) {
-      skinSelected.value = skin;
-      isOpen.value = false;
-      emits("skin-tone", skin.skinTone);
-      nextTick(() => focusSkinSelector());
-    }
-    const handleKeyDown = (event, skin, index) => {
-      var _a, _b, _c;
-      event.preventDefault();
-      if (event.key === "ArrowLeft") {
-        if (index === 0)
-          (_a = skinsRef.value[skinsRef.value.length - 1]) == null ? void 0 : _a.focus();
-        (_b = skinsRef.value[index - 1]) == null ? void 0 : _b.focus();
-      }
-      if (event.key === "ArrowRight") {
-        (_c = skinsRef.value[index + 1]) == null ? void 0 : _c.focus();
-      }
-      if (event.key === "Enter") {
-        if (skin) {
-          selectSkin(skin);
-        } else {
-          toggleSkinList();
-        }
-      }
-      if (event.key === "Tab") {
-        if (event.shiftKey) {
-          emits("focus-last-emoji");
-        } else {
-          emits("focus-tabset");
-        }
-      }
-    };
-    function toggleSkinList() {
-      isOpen.value = !isOpen.value;
-      nextTick(() => skinsRef.value[0].focus());
-    }
-    __expose({
-      focusSkinSelector
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
-        withDirectives(createElementVNode("div", _hoisted_2$2, [
-          (openBlock(), createElementBlock(Fragment, null, renderList(skinList, (skin, index) => {
-            return createElementVNode("button", {
-              ref_for: true,
-              ref: (el) => {
-                if (el)
-                  setSkinsRef(el);
-              },
-              key: skin.name,
-              class: normalizeClass({
-                "selected": skinSelected.value.skinCode === skin.skinCode
-              }),
-              onKeydown: (event) => handleKeyDown(event, skin, index),
-              onClick: ($event) => selectSkin(skin)
-            }, [
-              createElementVNode("img", {
-                class: "d-icon d-icon--size-500",
-                alt: skin.name,
-                "aria-label": skin.name,
-                title: skin.name,
-                src: `${unref(CDN_URL) + skin.unicode_output}.png`
-              }, null, 8, _hoisted_4$1)
-            ], 42, _hoisted_3$1);
-          }), 64))
-        ], 512), [
-          [vShow, isOpen.value]
-        ]),
-        withDirectives(createElementVNode("div", _hoisted_5, [
-          createVNode(unref(DtTooltip), { placement: "top-end" }, {
-            anchor: withCtx(() => [
-              createElementVNode("button", {
-                ref_key: "skinSelectorRef",
-                ref: skinSelectorRef,
-                "aria-label": __props.skinSelectorButtonTooltipLabel,
-                tabindex: "-1",
-                onClick: toggleSkinList,
-                onKeydown: _cache[0] || (_cache[0] = (event) => handleKeyDown(event))
-              }, [
-                createElementVNode("img", {
-                  class: "d-icon d-icon--size-500",
-                  alt: skinSelected.value.name,
-                  "aria-label": skinSelected.value.name,
-                  title: skinSelected.value.name,
-                  src: `${unref(CDN_URL) + skinSelected.value.unicode_output}.png`
-                }, null, 8, _hoisted_7)
-              ], 40, _hoisted_6)
-            ]),
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(__props.skinSelectorButtonTooltipLabel) + " ", 1)
-            ]),
-            _: 1
-          })
-        ], 512), [
-          [vShow, !isOpen.value]
-        ])
-      ]);
-    };
-  }
-};
-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",
-  props: {
-    /**
-     * Emoji data
-     * @type {Object}
-     * @default null
-     */
-    emoji: {
-      type: Object,
-      default: null
-    }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
-        __props.emoji ? (openBlock(), 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: `${unref(CDN_URL) + __props.emoji.unicode_character}.png`
-        }, null, 8, _hoisted_2$1)) : createCommentVNode("", true),
-        createElementVNode("div", null, 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 _sfc_main = {
-  __name: "emoji_picker",
-  props: {
-    /**
-     * The array with recently used  emoji object
-     * This list is necessary to fill the recently used tab
-     * @type {Array}
-     * @default []
-     * @example
-     * <dt-emoji-picker :recentlyUsedEmojis="[emojiObject, emojiObject]" />
-     */
-    // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object
-    recentlyUsedEmojis: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * The placeholder text for the search input
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :searchPlaceholderLabel="'Search...'" />
-     */
-    searchPlaceholderLabel: {
-      type: String,
-      required: true
-    },
-    /**
-     * The label for the search results tab
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :searchResultsLabel="'Search results'" />
-     */
-    searchResultsLabel: {
-      type: String,
-      required: true
-    },
-    /**
-     * The label for the search no results
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :searchNoResultsLabel="'No results'" />
-     */
-    searchNoResultsLabel: {
-      type: String,
-      required: true
-    },
-    /**
-     * The list of tabsets to show, it is necessary to be updated with the correct language
-     * It must respect the provided order.
-     * @type {Array}
-     * @required
-     * @example
-     * <dt-emoji-picker
-     *  :tabSetLabels="['Most recently used', 'Smileys and people', 'Nature',
-     *    'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags']" />
-     */
-    tabSetLabels: {
-      type: Array,
-      required: true
-    },
-    /**
-     * The skin tone to show the emojis
-     * This prop gives the possibility to use the skin tone selected by the user previously
-     * @type {String}
-     * @default 'Default'
-     * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'
-     * @example
-     * <dt-emoji-picker :skinTone="'Default'" />
-     */
-    skinTone: {
-      type: String,
-      default: "Default"
-    },
-    /**
-     * Tooltip shown when skin selector button is hovered.
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :skin-selector-button-tooltip-label="'Change default skin tone'" />
-     */
-    skinSelectorButtonTooltipLabel: {
-      type: String,
-      required: true
-    },
-    /**
-     * Sets the search query that filters emojis.
-     * @type {String}
-     * @example
-     * <dt-emoji-picker search-query="smile" />
-     */
-    searchQuery: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Shows the search input
-     * @type {Boolean}
-     * @example
-     * <dt-emoji-picker :show-search="false" />
-     */
-    showSearch: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: [
-    /**
-     * It will emit the selected emoji
-     * @event selected-emoji
-     * @param {Object} emoji - The selected emoji from the emoji selector
-     */
-    "selected-emoji",
-    /**
-     * It will emit the selected skin tone
-     * @event skin-tone
-     * @param {String} skin - The selected skin tone from the skin selector
-     */
-    "skin-tone",
-    /**
-     * Since the keyboard events are encapsulated, we emit this event to close the picker
-     * @event close
-     */
-    "close"
-  ],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const internalSearchQuery = ref(props.searchQuery.value);
-    const highlightedEmoji = ref(null);
-    const selectedTabset = ref({});
-    const scrollIntoTab = ref(0);
-    const isScrolling = ref(false);
-    const showRecentlyUsedTab = computed(() => props.recentlyUsedEmojis.length > 0);
-    watch(
-      () => props.searchQuery,
-      (newValue) => {
-        internalSearchQuery.value = newValue;
-      }
-    );
-    function scrollToSelectedTabset(tabId) {
-      internalSearchQuery.value = "";
-      selectedTabset.value = tabId;
-      selectedTabset.value = { ...selectedTabset.value, tabId };
-    }
-    function updateScrollIntoTab(value) {
-      scrollIntoTab.value = value;
-    }
-    function updateIsScrolling(value) {
-      isScrolling.value = value;
-    }
-    function updateHighlightedEmoji(emoji) {
-      highlightedEmoji.value = emoji;
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          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] = withKeys(($event) => emits("close"), ["esc"]))
-          }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels", "is-scrolling"])
-        ]),
-        createElementVNode("div", _hoisted_3, [
-          __props.showSearch ? (openBlock(), 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] = withKeys(($event) => emits("close"), ["esc"]))
-          }, null, 8, ["modelValue", "search-placeholder-label"])) : createCommentVNode("", true),
-          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] = 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"])
-        ]),
-        createElementVNode("div", _hoisted_4, [
-          createVNode(_sfc_main$1, { emoji: highlightedEmoji.value }, null, 8, ["emoji"]),
-          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] = withKeys(($event) => emits("close"), ["esc"]))
-          }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
-        ])
-      ]);
-    };
-  }
-};
+import { default as default2 } from "../components/emoji_picker/emoji_picker.vue.js";
+import { ARROW_KEYS, CDN_URL, EMOJIS_PER_ROW, EMOJI_PICKER_CATEGORIES, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from "../components/emoji_picker/emoji_picker_constants.js";
 export {
   ARROW_KEYS,
   CDN_URL,
-  _sfc_main as DtEmojiPicker,
+  default2 as DtEmojiPicker,
   EMOJIS_PER_ROW,
   EMOJI_PICKER_CATEGORIES,
   EMOJI_PICKER_SKIN_TONE_MODIFIERS