@dialpad/dialtone-vue 3.73.0 → 3.73.1

package/dist/emoji.js

@@ -1,925 +1,30 @@
-import { _ as W, s as be, D as Q, J as he, K as pe, a7 as C, t as ge } from "./emoji_text_wrapper-a99aed18.js";
-import { y as ft, w as dt, ap as mt, aa as vt, a9 as bt, ae as ht, ac as pt, ad as gt, ab as yt, af as kt, a8 as _t, ar as jt, as as St, aq as $t, ag as wt, ak as Tt, aj as Rt, ai as Et, ah as Lt, am as Ft, ao as It, an as Ct, al as At } from "./emoji_text_wrapper-a99aed18.js";
-import { ref as y, onMounted as te, openBlock as j, createElementBlock as S, createVNode as K, withKeys as q, withModifiers as oe, createSlots as ye, withCtx as B, createElementVNode as T, computed as V, toRefs as ke, watch as N, Fragment as M, renderList as O, unref as $, createBlock as _e, nextTick as G, onUnmounted as je, toDisplayString as P, withDirectives as X, createCommentVNode as Y, vShow as Z, normalizeClass as le, watchEffect as Se, createTextVNode as se } from "vue";
-const $e = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, we = ["onKeydown"], Te = {
-  __name: "emoji_search",
-  props: {
-    searchPlaceholderLabel: {
-      type: String,
-      required: !0
-    },
-    modelValue: {
-      type: String,
-      default: ""
-    }
-  },
-  emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
-  setup(i, { expose: v, emit: d }) {
-    const s = y(null);
-    function u() {
-      d("update:modelValue", ""), h();
-    }
-    function h() {
-      s.value.focus();
-    }
-    return te(() => {
-      h();
-    }), v({
-      focusSearchInput: h
-    }), (g, p) => (j(), S("div", $e, [
-      K(be, {
-        id: "searchInput",
-        ref_key: "searchInput",
-        ref: s,
-        placeholder: i.searchPlaceholderLabel,
-        "model-value": i.modelValue,
-        "onUpdate:modelValue": p[0] || (p[0] = (c) => g.$emit("update:modelValue", c)),
-        onKeydown: [
-          p[1] || (p[1] = q((c) => g.$emit("focus-tabset"), ["up"])),
-          p[2] || (p[2] = q(oe((c) => g.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
-          p[3] || (p[3] = q((c) => g.$emit("select-first-emoji"), ["enter"]))
-        ]
-      }, ye({
-        leftIcon: B(() => [
-          K(Q, { name: "search" })
-        ]),
-        _: 2
-      }, [
-        i.modelValue.length > 0 ? {
-          name: "rightIcon",
-          fn: B(() => [
-            T("button", {
-              class: "d-emoji-picker__search-button",
-              onClick: u,
-              onKeydown: q(u, ["enter"])
-            }, [
-              K(Q, { name: "close" })
-            ], 40, we)
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["placeholder", "model-value"])
-    ]));
-  }
-}, Re = /* @__PURE__ */ W(Te, [["__scopeId", "data-v-640002c1"]]);
-const Ee = { class: "d-emoji-picker__tabset" }, Le = {
-  __name: "emoji_tabset",
-  props: {
-    /**
-     * Whether to show the recently used tab or not
-     * @type {Boolean}
-     * @default false
-     */
-    showRecentlyUsedTab: {
-      type: Boolean,
-      default: !1
-    },
-    scrollIntoTab: {
-      type: Number,
-      required: !0
-    },
-    isScrolling: {
-      type: Boolean,
-      default: !1
-    },
-    emojiFilter: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The labels for the aria-label
-     * @type {Array}
-     * @required
-     */
-    tabsetLabels: {
-      type: Array,
-      required: !0
-    }
-  },
-  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"
-  ],
-  setup(i, { expose: v, emit: d }) {
-    const s = i, u = [
-      { label: "Recently used", icon: "clock" },
-      { label: "Smiley’s and people", icon: "satisfied" },
-      { label: "Nature", icon: "living-thing" },
-      { label: "Food", icon: "food" },
-      { label: "Activity", icon: "object" },
-      { label: "Travel", icon: "transportation" },
-      { label: "Objects", icon: "lightbulb" },
-      { label: "Symbols", icon: "heart" },
-      { label: "Flags", icon: "flag" }
-    ], h = V(() => (s.showRecentlyUsedTab ? u : u.slice(1)).map((t, n) => ({
-      ...t,
-      label: s.tabsetLabels[n],
-      id: (n + 1).toString(),
-      panelId: (n + 1).toString()
-    }))), g = V(() => s.emojiFilter.length > 0), p = y("1"), { isScrolling: c } = ke(s), A = y([]);
-    N(
-      () => s.scrollIntoTab,
-      () => {
-        !c.value && !g.value && (p.value = (s.scrollIntoTab + 1).toString());
-      }
-    ), N(
-      g,
-      () => {
-        g.value && (p.value = null);
-      }
-    );
-    function L(e) {
-      c.value || (p.value = e), d("selected-tabset", e);
-    }
-    function f(e) {
-      A.value.push(e.$el);
-    }
-    function F() {
-      A.value[0].focus();
-    }
-    function b(e, t) {
-      e.key === "Enter" && (L(t), A.value[t - 1].blur()), e.key === "Tab" && (e.preventDefault(), d("focus-search-input")), e.key === "ArrowDown" && d("focus-search-input");
-    }
-    return v({
-      focusTabset: F
-    }), (e, t) => (j(), S("div", Ee, [
-      K(he, {
-        "tab-list-class": "d-emoji-picker__tabset-list",
-        selected: p.value
-      }, {
-        tabs: B(() => [
-          (j(!0), S(M, null, O($(h), (n, w) => (j(), _e(pe, {
-            id: n.id,
-            ref_for: !0,
-            ref: (k) => {
-              k && f(k);
-            },
-            key: n.id,
-            "panel-id": n.panelId,
-            label: n.label,
-            "aria-controls": "d-emoji-picker-list",
-            tabindex: w + 1,
-            onClickCapture: oe((k) => L(n.id), ["stop"]),
-            onKeydown: (k) => b(k, n.id)
-          }, {
-            default: B(() => [
-              K(Q, {
-                size: "400",
-                name: n.icon
-              }, null, 8, ["name"])
-            ]),
-            _: 2
-          }, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]))), 128))
-        ]),
-        _: 1
-      }, 8, ["selected"])
-    ]));
-  }
-}, z = "https://static.dialpadcdn.com/joypixels/png/unicode/32/", E = 9;
-function Fe(i) {
-  const v = y([]), d = y([]), s = y(!1), u = y(!0);
-  function h(e, t = !1) {
-    u.value = t, i("highlighted-emoji", e);
-  }
-  function g(e, t, n) {
-    v.value[t] || (v.value[t] = []), v.value[t][n] = e;
-  }
-  function p(e, t) {
-    d.value[t] = e;
-  }
-  function c(e, t) {
-    var w, k, U;
-    const n = s.value ? (w = d.value) == null ? void 0 : w[t] : (U = (k = v.value) == null ? void 0 : k[e]) == null ? void 0 : U[t];
-    return n ? (n.focus(), !0) : !1;
-  }
-  function A(e, t) {
-    c(e, t - 1) || (v.value[e - 1] ? c(e - 1, v.value[e - 1].length - 1) : c(v.value.length - 1, v.value[v.value.length - 1].length - 1));
-  }
-  function L(e, t) {
-    c(e, t + 1) || c(e + 1, 0) || c(0, 0);
-  }
-  function f(e, t) {
-    c(0, t - 1) || c(0, d.value.length - 1);
-  }
-  function F(e, t) {
-    c(0, t + 1) || c(0, 0);
-  }
-  function b(e, t, n) {
-    s.value ? e === "left" ? f(t, n) : e === "right" && F(t, n) : e === "left" ? A(t, n) : e === "right" && L(t, n);
-  }
-  return {
-    emojiRefs: v,
-    emojiFilteredRefs: d,
-    isFiltering: s,
-    hoverFirstEmoji: u,
-    setEmojiRef: g,
-    setFilteredRef: p,
-    hoverEmoji: h,
-    focusEmoji: c,
-    handleHorizontalNavigation: b
-  };
-}
-const Ie = { class: "d-emoji-picker__selector" }, Ce = {
-  key: 0,
-  class: "d-emoji-picker__search-label d-emoji-picker__alignment"
-}, Ae = { key: 0 }, De = { class: "d-emoji-picker__tab" }, Ke = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], Ue = ["alt", "aria-label", "title", "src"], qe = {
-  key: 2,
-  class: "d-emoji-picker__alignment"
-}, Ne = {
-  class: "d-emoji-picker__tab",
-  "data-qa": "filtered-emojis"
-}, Ve = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], Be = ["alt", "aria-label", "title", "src"], Me = {
-  __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: !0
-    },
-    /**
-     * The labels for the tabset
-     * @type {Array}
-     * @required
-     */
-    tabsetLabels: {
-      type: Array,
-      required: !0
-    },
-    selectedTabset: {
-      type: Object,
-      required: !0
-    },
-    /**
-     * The label for the search results tab
-     * @type {String}
-     * @required
-     */
-    searchResultsLabel: {
-      type: String,
-      required: !0
-    },
-    searchNoResultsLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * 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(i, { expose: v, emit: d }) {
-    const s = i, {
-      emojiRefs: u,
-      emojiFilteredRefs: h,
-      isFiltering: g,
-      hoverFirstEmoji: p,
-      setEmojiRef: c,
-      setFilteredRef: A,
-      hoverEmoji: L,
-      focusEmoji: f,
-      handleHorizontalNavigation: F
-    } = Fe(d), b = y(null), e = y(null), t = y(null), n = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"], w = V(() => s.recentlyUsedEmojis.length ? s.tabsetLabels.map((o) => ({ label: o, ref: y(null) })) : s.tabsetLabels.slice(1).map((o) => ({ label: o, ref: y(null) }))), k = y(w.value[0].label), U = V(() => s.recentlyUsedEmojis.length ? n : n.slice(1)), H = y([]), x = V(() => [
-      ...C[`People${s.skinTone}`],
-      ...C.Nature,
-      ...C.Food,
-      ...C[`Activity${s.skinTone}`],
-      ...C.Travel,
-      ...C[`Objects${s.skinTone}`],
-      ...C.Symbols,
-      ...C.Flags
-    ]), ne = ie(() => {
-      h.value = [], ee();
-    });
-    N(x, () => {
-      ee();
-    }, { immediate: !0 }), N(
-      () => s.recentlyUsedEmojis,
-      () => {
-        C["Recently used"] = s.recentlyUsedEmojis;
-      },
-      { immediate: !0 }
-    ), N(() => s.emojiFilter, () => {
-      ue(), s.emojiFilter ? g.value = !0 : (g.value = !1, d("highlighted-emoji", null)), ne();
-    }), N(
-      () => s.selectedTabset,
-      (o) => {
-        J(o.tabId);
-      },
-      { deep: !0 }
-    );
-    function ee() {
-      const o = s.emojiFilter.toLowerCase();
-      H.value = x.value.filter((l) => {
-        const r = l.name.toLowerCase().includes(o), m = l.keywords.some((a) => a.toLowerCase().includes(o));
-        return r || m;
-      }), G(() => {
-        o && L(H.value[0], !0);
-      });
-    }
-    function ie(o, l = 300) {
-      let r;
-      return (...m) => {
-        clearTimeout(r), r = setTimeout(() => o(...m), l);
-      };
-    }
-    function ae(o) {
-      return `${z + o}.png`;
-    }
-    function re(o) {
-      o.target.parentNode.style.display = "none";
-    }
-    function J(o, l = !0) {
-      const m = w.value[o - 1].ref.value[0];
-      G(() => {
-        const a = e.value, R = o === "1" ? 0 : m.offsetTop - 20;
-        let _ = !0, D = a.scrollTop;
-        d("is-scrolling", !0), a.addEventListener("scroll", () => {
-          if (_) {
-            const I = a.scrollTop;
-            (D < I && I >= R || D > I && I <= R) && (_ = !1, d("is-scrolling", !1)), D = I;
-          }
-        }), a.scrollTop = R, l && f(o - 1, 0);
-      });
-    }
-    function ue() {
-      const o = e.value;
-      o.scrollTop = 0;
-    }
-    function ce() {
-      t.value = new IntersectionObserver((o) => {
-        o.forEach((l) => {
-          var a, R, _, D, I;
-          const { target: r } = l, m = parseInt(r.dataset.index);
-          l.isIntersecting && r.offsetTop <= b.value.offsetTop + 50 ? (k.value = ((a = w.value[m - 1]) == null ? void 0 : a.label) ?? ((R = w.value[0]) == null ? void 0 : R.label), d("scroll-into-tab", m - 1)) : l.boundingClientRect.bottom <= ((_ = b.value) == null ? void 0 : _.getBoundingClientRect().bottom) ? (d("scroll-into-tab", m), k.value = (D = w.value[m]) == null ? void 0 : D.label) : m === 1 && (d("scroll-into-tab", m), k.value = (I = w.value[0]) == null ? void 0 : I.label);
-        });
-      }), t.value.observe(b.value), Array.from(e.value.children).forEach((o, l) => {
-        t.value.observe(o), o.dataset.index = l;
-      });
-    }
-    const fe = (o, l, r) => {
-      var m;
-      if (o.preventDefault(), p.value = !1, o.key === "ArrowUp") {
-        const a = l % E;
-        if (!f(0, l - E)) {
-          const R = h.value.length - h.value.length % E + a;
-          f(0, R), f(0, R) || f(0, h.value.length - 1);
-        }
-      }
-      if (o.key === "ArrowDown" && !f(0, l + E)) {
-        const a = l % E;
-        (m = h.value) != null && m[l + (E - a)] ? f(0, h.value.length - 1) : f(0, a);
-      }
-      o.key === "ArrowLeft" && F("left", 0, l), o.key === "ArrowRight" && F("right", 0, l), o.key === "Tab" && d("focus-skin-selector"), o.key === "Enter" && d("selected-emoji", r);
-    }, de = (o, l, r, m) => {
-      var a, R;
-      if (o.preventDefault(), o.key === "ArrowUp") {
-        const _ = r % E;
-        if (l === 0) {
-          const D = E - u.value[u.value.length - 1].length % E, I = u.value[u.value.length - 1].length + D - (E - _);
-          f(u.value.length - 1, I) || f(u.value.length - 1, u.value[u.value.length - 1].length - 1);
-          return;
-        }
-        if (!f(l, r - E)) {
-          const D = l - 1 < 0 ? 0 : l - 1, I = u.value[D].length, ve = I - I % E + _;
-          f(D, ve) || f(l - 1, u.value[l - 1].length - 1);
-        }
-      }
-      if (o.key === "ArrowDown" && !f(l, r + E)) {
-        const _ = r % E;
-        (R = (a = u.value) == null ? void 0 : a[l]) != null && R[r + (E - _)] ? f(l, u.value[l].length - 1) : f(l + 1, _) || f(0, _) || f(0, u.value[0].length - 1);
-      }
-      o.key === "ArrowLeft" && F("left", l, r), o.key === "ArrowRight" && F("right", l, r), o.key === "Tab" && (f(l + 1, 0) ? J(l + 1 + 1, !1) : d("focus-skin-selector")), o.key === "Tab" && o.shiftKey && (f(l, 0) && l > 0 ? J(l, !0) : (J(1, !1), d("focus-search-input"))), o.key === "Enter" && d("selected-emoji", m);
-    };
-    function me() {
-      f(0, 0);
-    }
-    return te(() => {
-      ce();
-    }), je(() => {
-      t.value.disconnect();
-    }), v({
-      focusEmojiSelector: me
-    }), (o, l) => (j(), S("div", Ie, [
-      T("div", {
-        id: "d-emoji-picker-list",
-        ref_key: "listRef",
-        ref: e,
-        class: "d-emoji-picker__list"
-      }, [
-        i.emojiFilter ? (j(), S("p", Ce, P(H.value.length > 0 ? i.searchResultsLabel : i.searchNoResultsLabel), 1)) : (j(), S("div", {
-          key: 1,
-          ref_key: "tabCategoryRef",
-          ref: b,
-          class: "d-emoji-picker__category d-emoji-picker__alignment"
-        }, [
-          T("p", null, P(k.value), 1)
-        ], 512)),
-        (j(!0), S(M, null, O($(w), (r, m) => X((j(), S("div", {
-          key: m,
-          ref_for: !0,
-          ref: r.ref,
-          class: "d-emoji-picker__alignment"
-        }, [
-          m ? (j(), S("p", Ae, P(r.label), 1)) : Y("", !0),
-          T("div", De, [
-            (j(!0), S(M, null, O($(C)[$(U)[m] + i.skinTone] ? $(C)[$(U)[m] + i.skinTone] : $(C)[$(U)[m]], (a, R) => (j(), S("button", {
-              key: a.shortname,
-              ref_for: !0,
-              ref: (_) => {
-                _ && $(c)(_, m, R);
-              },
-              type: "button",
-              "aria-label": a.name,
-              onClick: (_) => o.$emit("selected-emoji", a),
-              onFocusin: (_) => o.$emit("highlighted-emoji", a),
-              onFocusout: l[0] || (l[0] = (_) => o.$emit("highlighted-emoji", null)),
-              onMouseover: (_) => o.$emit("highlighted-emoji", a),
-              onMouseleave: l[1] || (l[1] = (_) => o.$emit("highlighted-emoji", null)),
-              onKeydown: (_) => de(_, m, R, a)
-            }, [
-              T("img", {
-                class: "d-icon d-icon--size-500",
-                alt: a.name,
-                "aria-label": a.name,
-                title: a.name,
-                src: ae(a.unicode_character),
-                onError: re
-              }, null, 40, Ue)
-            ], 40, Ke))), 128))
-          ])
-        ])), [
-          [Z, !i.emojiFilter]
-        ])), 128)),
-        i.emojiFilter ? (j(), S("div", qe, [
-          T("div", Ne, [
-            (j(!0), S(M, null, O(H.value, (r, m) => (j(), S("button", {
-              key: r.shortname,
-              ref_for: !0,
-              ref: (a) => {
-                a && $(A)(a, m);
-              },
-              type: "button",
-              "aria-label": r.name,
-              class: le({
-                "hover-emoji": m === 0 && $(p)
-              }),
-              onClick: (a) => o.$emit("selected-emoji", r),
-              onFocusin: (a) => o.$emit("highlighted-emoji", r),
-              onFocusout: l[2] || (l[2] = (a) => o.$emit("highlighted-emoji", null)),
-              onMouseover: (a) => $(L)(r),
-              onMouseleave: l[3] || (l[3] = (a) => $(L)(null)),
-              onKeydown: (a) => fe(a, m, r)
-            }, [
-              T("img", {
-                class: "d-icon d-icon--size-500",
-                alt: r.name,
-                "aria-label": r.name,
-                title: r.name,
-                src: `${$(z) + r.unicode_character}.png`
-              }, null, 8, Be)
-            ], 42, Ve))), 128))
-          ])
-        ])) : Y("", !0)
-      ], 512)
-    ]));
-  }
-}, Oe = /* @__PURE__ */ W(Me, [["__scopeId", "data-v-067b0cfe"]]);
-const Pe = { "data-qa": "skin-selector" }, ze = { class: "d-emoji-picker__skin-list" }, He = ["onKeydown", "onClick"], Je = ["alt", "aria-label", "title", "src"], Ge = { class: "d-emoji-picker__skin-selected" }, We = ["aria-label"], Qe = ["alt", "aria-label", "title", "src"], Xe = {
-  __name: "emoji_skin_selector",
-  props: {
-    /**
-     * The skin tone to apply to the emoji list
-     * @type {String}
-     * @required
-     */
-    skinTone: {
-      type: String,
-      required: !0
-    },
-    isHovering: {
-      type: Boolean,
-      default: !1
-    },
-    skinSelectorButtonTooltipLabel: {
-      type: String,
-      required: !0
-    }
-  },
-  emits: [
-    /**
-     * The skin tone that was selected
-     * @event skin-tone
-     * @type {Number}
-     */
-    "skin-tone",
-    "focus-tabset"
-  ],
-  setup(i, { expose: v, emit: d }) {
-    const s = i, u = [
-      {
-        name: ":wave_tone1:",
-        unicode_output: "1f44b-1f3fb",
-        skinTone: "Light",
-        skinCode: "_tone1"
-      },
-      {
-        name: ":wave_tone2:",
-        unicode_output: "1f44b-1f3fc",
-        skinTone: "MediumLight",
-        skinCode: "_tone2"
-      },
-      {
-        name: ":wave_tone3:",
-        unicode_output: "1f44b-1f3fd",
-        skinTone: "Medium",
-        skinCode: "_tone3"
-      },
-      {
-        name: ":wave_tone4:",
-        unicode_output: "1f44b-1f3fe",
-        skinTone: "MediumDark",
-        skinCode: "_tone4"
-      },
-      {
-        name: ":wave_tone5:",
-        unicode_output: "1f44b-1f3ff",
-        skinTone: "Dark",
-        skinCode: "_tone5"
-      },
-      {
-        name: ":wave:",
-        unicode_output: "1f44b",
-        skinTone: "Default",
-        skinCode: ""
-      }
-    ], h = y(u.find((e) => e.skinTone === s.skinTone)), g = y(!1), p = y(null), c = y([]);
-    Se(
-      () => s.isHovering && (g.value = !1)
-    );
-    function A(e) {
-      c.value.push(e);
-    }
-    function L() {
-      p.value.focus();
-    }
-    function f(e) {
-      h.value = e, g.value = !1, d("skin-tone", e.skinTone), G(() => L());
-    }
-    const F = (e, t, n) => {
-      var w, k, U;
-      e.preventDefault(), e.key === "ArrowLeft" && (n === 0 && ((w = c.value[c.value.length - 1]) == null || w.focus()), (k = c.value[n - 1]) == null || k.focus()), e.key === "ArrowRight" && ((U = c.value[n + 1]) == null || U.focus()), e.key === "Enter" && (t ? f(t) : b()), e.key === "Tab" && d("focus-tabset");
-    };
-    function b() {
-      g.value = !g.value, G(() => c.value[0].focus());
-    }
-    return v({
-      focusSkinSelector: L
-    }), (e, t) => (j(), S("div", Pe, [
-      X(T("div", ze, [
-        (j(), S(M, null, O(u, (n, w) => T("button", {
-          ref_for: !0,
-          ref: (k) => {
-            k && A(k);
-          },
-          key: n.name,
-          class: le({
-            selected: h.value.skinCode === n.skinCode
-          }),
-          onKeydown: (k) => F(k, n, w),
-          onClick: (k) => f(n)
-        }, [
-          T("img", {
-            class: "d-icon d-icon--size-500",
-            alt: n.name,
-            "aria-label": n.name,
-            title: n.name,
-            src: `${$(z) + n.unicode_output}.png`
-          }, null, 8, Je)
-        ], 42, He)), 64))
-      ], 512), [
-        [Z, g.value]
-      ]),
-      X(T("div", Ge, [
-        K(ge, { placement: "top-end" }, {
-          anchor: B(() => [
-            T("button", {
-              ref_key: "skinSelectorRef",
-              ref: p,
-              "aria-label": i.skinSelectorButtonTooltipLabel,
-              tabindex: "-1",
-              onClick: b,
-              onKeydown: t[0] || (t[0] = (n) => F(n))
-            }, [
-              T("img", {
-                class: "d-icon d-icon--size-500",
-                alt: h.value.name,
-                "aria-label": h.value.name,
-                title: h.value.name,
-                src: `${$(z) + h.value.unicode_output}.png`
-              }, null, 8, Qe)
-            ], 40, We)
-          ]),
-          default: B(() => [
-            se(P(i.skinSelectorButtonTooltipLabel) + " ", 1)
-          ]),
-          _: 1
-        })
-      ], 512), [
-        [Z, !g.value]
-      ])
-    ]));
-  }
-}, Ye = /* @__PURE__ */ W(Xe, [["__scopeId", "data-v-3a6fb9c2"]]);
-const Ze = { class: "d-emoji-picker__data" }, xe = ["alt", "aria-label", "title", "src"], et = {
-  __name: "emoji_description",
-  props: {
-    /**
-     * Emoji data
-     * @type {Object}
-     * @default null
-     */
-    emoji: {
-      type: Object,
-      default: null
-    }
-  },
-  setup(i) {
-    return (v, d) => {
-      var s;
-      return j(), S("div", Ze, [
-        i.emoji ? (j(), S("img", {
-          key: 0,
-          class: "d-icon d-icon--size-500",
-          alt: i.emoji.name,
-          "aria-label": i.emoji.name,
-          title: i.emoji.name,
-          src: `${$(z) + i.emoji.unicode_character}.png`
-        }, null, 8, xe)) : Y("", !0),
-        se(" " + P((s = i.emoji) == null ? void 0 : s.name), 1)
-      ]);
-    };
-  }
-}, tt = /* @__PURE__ */ W(et, [["__scopeId", "data-v-48c61881"]]);
-const ot = { class: "d-emoji-picker" }, lt = { class: "d-emoji-picker--header" }, st = { class: "d-emoji-picker--body" }, nt = { class: "d-emoji-picker--footer" }, rt = {
-  __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: !0
-    },
-    /**
-     * The label for the search results tab
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :searchResultsLabel="'Search results'" />
-     */
-    searchResultsLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * The label for the search no results
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :searchNoResultsLabel="'No results'" />
-     */
-    searchNoResultsLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * 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: !0
-    },
-    /**
-     * 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: !0
-    }
-  },
-  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(i, { emit: v }) {
-    const d = i, s = y(""), u = y(null), h = y({}), g = y(0), p = y(!1), c = V(() => d.recentlyUsedEmojis.length > 0);
-    function A(b) {
-      s.value = "", h.value = b, h.value = { ...h.value, tabId: b };
-    }
-    function L(b) {
-      g.value = b;
-    }
-    function f(b) {
-      p.value = b;
-    }
-    function F(b) {
-      u.value = b;
-    }
-    return (b, e) => (j(), S("div", ot, [
-      T("div", lt, [
-        K(Le, {
-          ref: "tabsetRef",
-          "emoji-filter": s.value,
-          "show-recently-used-tab": $(c),
-          "scroll-into-tab": g.value,
-          "tabset-labels": i.tabSetLabels,
-          "is-scrolling": p.value,
-          onFocusSearchInput: e[0] || (e[0] = (t) => b.$refs.searchInputRef.focusSearchInput()),
-          onSelectedTabset: A,
-          onKeydown: e[1] || (e[1] = q((t) => v("close"), ["esc"]))
-        }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels", "is-scrolling"])
-      ]),
-      T("div", st, [
-        K(Re, {
-          ref: "searchInputRef",
-          modelValue: s.value,
-          "onUpdate:modelValue": e[2] || (e[2] = (t) => s.value = t),
-          "search-placeholder-label": i.searchPlaceholderLabel,
-          onSelectFirstEmoji: e[3] || (e[3] = (t) => v("selected-emoji", u.value)),
-          onFocusTabset: e[4] || (e[4] = (t) => b.$refs.tabsetRef.focusTabset()),
-          onFocusEmojiSelector: e[5] || (e[5] = (t) => b.$refs.emojiSelectorRef.focusEmojiSelector()),
-          onKeydown: e[6] || (e[6] = q((t) => v("close"), ["esc"]))
-        }, null, 8, ["modelValue", "search-placeholder-label"]),
-        K(Oe, {
-          ref: "emojiSelectorRef",
-          "emoji-filter": s.value,
-          "skin-tone": i.skinTone,
-          "tabset-labels": i.tabSetLabels,
-          "search-results-label": i.searchResultsLabel,
-          "search-no-results-label": i.searchNoResultsLabel,
-          "recently-used-emojis": i.recentlyUsedEmojis,
-          "selected-tabset": h.value,
-          onScrollIntoTab: L,
-          onIsScrolling: f,
-          onHighlightedEmoji: F,
-          onSelectedEmoji: e[7] || (e[7] = (t) => v("selected-emoji", t)),
-          onFocusSkinSelector: e[8] || (e[8] = (t) => b.$refs.skinSelectorRef.focusSkinSelector()),
-          onFocusSearchInput: e[9] || (e[9] = (t) => b.$refs.searchInputRef.focusSearchInput()),
-          onKeydown: e[10] || (e[10] = q((t) => v("close"), ["esc"]))
-        }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])
-      ]),
-      T("div", nt, [
-        K(tt, { emoji: u.value }, null, 8, ["emoji"]),
-        K(Ye, {
-          ref: "skinSelectorRef",
-          "is-hovering": !!u.value,
-          "skin-selector-button-tooltip-label": i.skinSelectorButtonTooltipLabel,
-          "skin-tone": i.skinTone,
-          onSkinTone: e[11] || (e[11] = (t) => v("skin-tone", t)),
-          onFocusTabset: e[12] || (e[12] = (t) => b.$refs.tabsetRef.focusTabset()),
-          onKeydown: e[13] || (e[13] = q((t) => v("close"), ["esc"]))
-        }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
-      ])
-    ]));
-  }
-};
+import { a as i, _ as t, A as m, l as r, k as j, p as l, n as E, o as n, m as d, q as g, j as U, C as p, E as u, B as c, r as f, v as x, u as C, t as D, s as S, x as A, z as T, y as h, w as J } from "./emoji_text_wrapper-124e7b04.js";
+import { _ as k } from "./emoji_picker-8485a649.js";
+import "./index-6b22d90d.js";
+import "vue";
 export {
-  ft as DtEmoji,
-  rt as DtEmojiPicker,
-  dt as DtEmojiTextWrapper,
-  mt as codeToEmojiData,
-  vt as customEmojiAssetUrl,
-  bt as defaultEmojiAssetUrl,
-  ht as emojiFileExtensionLarge,
-  pt as emojiFileExtensionSmall,
-  gt as emojiImageUrlLarge,
-  yt as emojiImageUrlSmall,
-  kt as emojiJson,
-  _t as emojiVersion,
-  jt as filterValidShortCodes,
-  St as findEmojis,
-  $t as findShortCodes,
-  wt as getEmojiData,
-  Tt as setCustomEmojiJson,
-  Rt as setCustomEmojiUrl,
-  Et as setEmojiAssetUrlLarge,
-  Lt as setEmojiAssetUrlSmall,
-  Ft as shortcodeToEmojiData,
-  It as stringToUnicode,
-  Ct as unicodeToString,
-  At as validateCustomEmojiJson
+  i as DtEmoji,
+  k as DtEmojiPicker,
+  t as DtEmojiTextWrapper,
+  m as codeToEmojiData,
+  r as customEmojiAssetUrl,
+  j as defaultEmojiAssetUrl,
+  l as emojiFileExtensionLarge,
+  E as emojiFileExtensionSmall,
+  n as emojiImageUrlLarge,
+  d as emojiImageUrlSmall,
+  g as emojiJson,
+  U as emojiVersion,
+  p as filterValidShortCodes,
+  u as findEmojis,
+  c as findShortCodes,
+  f as getEmojiData,
+  x as setCustomEmojiJson,
+  C as setCustomEmojiUrl,
+  D as setEmojiAssetUrlLarge,
+  S as setEmojiAssetUrlSmall,
+  A as shortcodeToEmojiData,
+  T as stringToUnicode,
+  h as unicodeToString,
+  J as validateCustomEmojiJson
 };