@dialpad/dialtone-vue 3.64.0 → 3.65.2

package/dist/emoji.js

@@ -0,0 +1,721 @@
+import { _ as N, t as Q, D as B, H as W, J as X, a6 as k, w as Y } from "./emoji_text_wrapper-7edbe839.js";
+import { as as Je, x as Ge, ao as Ke, a9 as Qe, a8 as We, ad as Xe, ab as Ye, ac as Ze, aa as et, ae as tt, a7 as lt, aq as ot, ar as st, ap as nt, af as at, aj as it, ai as rt, ah as ct, ag as ut, al as dt, an as mt, am as bt, ak as _t } from "./emoji_text_wrapper-7edbe839.js";
+import { openBlock as i, createElementBlock as d, createVNode as T, createSlots as Z, withCtx as F, createElementVNode as v, computed as D, ref as f, toRefs as ee, watch as w, Fragment as U, renderList as R, unref as h, createBlock as te, withModifiers as le, nextTick as oe, onMounted as se, onUnmounted as ne, toDisplayString as A, withDirectives as M, createCommentVNode as O, vShow as x, watchEffect as ae, normalizeClass as ie, createTextVNode as P } from "vue";
+const re = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ce = { class: "d-emoji-picker__search-button" }, ue = {
+  __name: "emoji_search",
+  props: {
+    searchPlaceholderLabel: {
+      type: String,
+      required: !0
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    return (_, l) => (i(), d("div", re, [
+      T(Q, {
+        placeholder: e.searchPlaceholderLabel,
+        "model-value": e.modelValue,
+        "onUpdate:modelValue": l[1] || (l[1] = (s) => _.$emit("update:modelValue", s))
+      }, Z({
+        leftIcon: F(() => [
+          T(B, { name: "search" })
+        ]),
+        _: 2
+      }, [
+        e.modelValue.length > 0 ? {
+          name: "rightIcon",
+          fn: F(() => [
+            v("button", ce, [
+              T(B, {
+                name: "close",
+                onClick: l[0] || (l[0] = (s) => _.$emit("update:modelValue", ""))
+              })
+            ])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["placeholder", "model-value"])
+    ]));
+  }
+}, de = /* @__PURE__ */ N(ue, [["__scopeId", "data-v-20dd73b1"]]);
+const me = { class: "d-emoji-picker__tabset" }, be = {
+  __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"
+  ],
+  setup(e, { emit: _ }) {
+    const l = e, s = [
+      { 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" }
+    ], b = D(() => (l.showRecentlyUsedTab ? s : s.slice(1)).map(($, p) => ({
+      ...$,
+      label: l.tabsetLabels[p],
+      id: (p + 1).toString(),
+      panelId: (p + 1).toString()
+    }))), r = D(() => l.emojiFilter.length > 0), g = f("1"), { isScrolling: c } = ee(l);
+    w(
+      () => l.scrollIntoTab,
+      () => {
+        !c.value && !r.value && (g.value = (l.scrollIntoTab + 1).toString());
+      }
+    ), w(
+      r,
+      () => {
+        r.value && (g.value = null);
+      }
+    );
+    function y(u) {
+      c.value || (g.value = u), _("selected-tabset", u);
+    }
+    return (u, $) => (i(), d("div", me, [
+      T(W, {
+        "tab-list-class": "d-emoji-picker__tabset-list",
+        selected: g.value
+      }, {
+        tabs: F(() => [
+          (i(!0), d(U, null, R(h(b), (p) => (i(), te(X, {
+            id: p.id,
+            key: p.id,
+            "panel-id": p.panelId,
+            label: p.label,
+            "aria-controls": "d-emoji-picker-list",
+            onClickCapture: le((V) => y(p.id), ["stop"])
+          }, {
+            default: F(() => [
+              T(B, {
+                size: "400",
+                name: p.icon
+              }, null, 8, ["name"])
+            ]),
+            _: 2
+          }, 1032, ["id", "panel-id", "label", "onClickCapture"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["selected"])
+    ]));
+  }
+}, q = "https://static.dialpadcdn.com/joypixels/png/unicode/32/";
+const _e = { class: "d-emoji-picker__selector" }, ve = {
+  key: 0,
+  class: "d-emoji-picker__search-label d-emoji-picker__alignment"
+}, pe = { key: 0 }, fe = { class: "d-emoji-picker__tab" }, he = ["aria-label", "onClick", "onFocusin", "onMouseover"], ge = ["alt", "aria-label", "title", "src"], je = {
+  key: 2,
+  class: "d-emoji-picker__alignment"
+}, ke = { class: "d-emoji-picker__tab" }, ye = ["aria-label", "onClick", "onFocusin", "onMouseover"], Te = ["alt", "aria-label", "title", "src"], Se = {
+  __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"
+  ],
+  setup(e, { emit: _ }) {
+    const l = e, s = f(null), b = f(null), r = f(null), g = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"], c = D(() => l.recentlyUsedEmojis.length ? l.tabsetLabels.map((t) => ({ label: t, ref: f(null) })) : l.tabsetLabels.slice(1).map((t) => ({ label: t, ref: f(null) }))), y = f(c.value[0].label), u = D(() => l.recentlyUsedEmojis.length ? g : g.slice(1)), $ = f([]), p = D(() => [
+      ...k[`People${l.skinTone}`],
+      ...k.Nature,
+      ...k.Food,
+      ...k[`Activity${l.skinTone}`],
+      ...k.Travel,
+      ...k[`Objects${l.skinTone}`],
+      ...k.Symbols,
+      ...k.Flags
+    ]), V = E(() => {
+      j();
+    });
+    w(p, () => {
+      j();
+    }, { immediate: !0 }), w(
+      () => l.recentlyUsedEmojis,
+      () => {
+        k["Recently used"] = l.recentlyUsedEmojis;
+      },
+      { immediate: !0 }
+    ), w(() => l.emojiFilter, () => {
+      G(), V();
+    }), w(
+      () => l.selectedTabset,
+      (t) => {
+        J(t.tabId);
+      },
+      { deep: !0 }
+    );
+    function j() {
+      const t = l.emojiFilter.toLowerCase();
+      $.value = p.value.filter((a) => {
+        const n = a.name.toLowerCase().includes(t), o = a.keywords.some((m) => m.toLowerCase().includes(t));
+        return n || o;
+      });
+    }
+    function E(t, a = 300) {
+      let n;
+      return (...o) => {
+        clearTimeout(n), n = setTimeout(() => t(...o), a);
+      };
+    }
+    function C(t) {
+      return `${q + t}.png`;
+    }
+    function H(t) {
+      t.target.parentNode.style.display = "none";
+    }
+    function J(t) {
+      const n = c.value[t - 1].ref.value[0];
+      oe(() => {
+        const o = b.value, m = t === "1" ? 0 : n.offsetTop - 20;
+        let S = !0, I = o.scrollTop;
+        _("is-scrolling", !0), o.addEventListener("scroll", () => {
+          if (S) {
+            const L = o.scrollTop;
+            (I < L && L >= m || I > L && L <= m) && (S = !1, _("is-scrolling", !1)), I = L;
+          }
+        }), o.scrollTop = m;
+      });
+    }
+    function G() {
+      const t = b.value;
+      t.scrollTop = 0;
+    }
+    function K() {
+      r.value = new IntersectionObserver((t) => {
+        t.forEach((a) => {
+          var m, S, I, L, z;
+          const { target: n } = a, o = parseInt(n.dataset.index);
+          a.isIntersecting && n.offsetTop <= s.value.offsetTop + 50 ? (y.value = ((m = c.value[o - 1]) == null ? void 0 : m.label) ?? ((S = c.value[0]) == null ? void 0 : S.label), _("scroll-into-tab", o - 1)) : a.boundingClientRect.bottom <= ((I = s.value) == null ? void 0 : I.getBoundingClientRect().bottom) ? (_("scroll-into-tab", o), y.value = (L = c.value[o]) == null ? void 0 : L.label) : o === 1 && (_("scroll-into-tab", o), y.value = (z = c.value[0]) == null ? void 0 : z.label);
+        });
+      }), r.value.observe(s.value), Array.from(b.value.children).forEach((t, a) => {
+        r.value.observe(t), t.dataset.index = a;
+      });
+    }
+    return se(() => {
+      K();
+    }), ne(() => {
+      r.value.disconnect();
+    }), (t, a) => (i(), d("div", _e, [
+      v("div", {
+        id: "d-emoji-picker-list",
+        ref_key: "listRef",
+        ref: b,
+        class: "d-emoji-picker__list"
+      }, [
+        e.emojiFilter ? (i(), d("p", ve, A($.value.length > 0 ? e.searchResultsLabel : e.searchNoResultsLabel), 1)) : (i(), d("div", {
+          key: 1,
+          ref_key: "tabCategoryRef",
+          ref: s,
+          class: "d-emoji-picker__category d-emoji-picker__alignment"
+        }, [
+          v("p", null, A(y.value), 1)
+        ], 512)),
+        (i(!0), d(U, null, R(h(c), (n, o) => M((i(), d("div", {
+          key: o,
+          ref_for: !0,
+          ref: n.ref,
+          class: "d-emoji-picker__alignment"
+        }, [
+          o ? (i(), d("p", pe, A(n.label), 1)) : O("", !0),
+          v("div", fe, [
+            (i(!0), d(U, null, R(h(k)[h(u)[o] + e.skinTone] ? h(k)[h(u)[o] + e.skinTone] : h(k)[h(u)[o]], (m) => (i(), d("button", {
+              key: m.shortname,
+              type: "button",
+              "aria-label": m.name,
+              onClick: (S) => t.$emit("selected-emoji", m),
+              onFocusin: (S) => t.$emit("highlighted-emoji", m),
+              onFocusout: a[0] || (a[0] = (S) => t.$emit("highlighted-emoji", null)),
+              onMouseover: (S) => t.$emit("highlighted-emoji", m),
+              onMouseleave: a[1] || (a[1] = (S) => t.$emit("highlighted-emoji", null))
+            }, [
+              v("img", {
+                class: "d-icon d-icon--size-500",
+                alt: m.name,
+                "aria-label": m.name,
+                title: m.name,
+                src: C(m.unicode_character),
+                onError: H
+              }, null, 40, ge)
+            ], 40, he))), 128))
+          ])
+        ])), [
+          [x, !e.emojiFilter]
+        ])), 128)),
+        e.emojiFilter ? (i(), d("div", je, [
+          v("div", ke, [
+            (i(!0), d(U, null, R($.value, (n) => (i(), d("button", {
+              key: n.shortname,
+              type: "button",
+              "aria-label": n.name,
+              onClick: (o) => t.$emit("selected-emoji", n),
+              onFocusin: (o) => t.$emit("highlighted-emoji", n),
+              onFocusout: a[2] || (a[2] = (o) => t.$emit("highlighted-emoji", null)),
+              onMouseover: (o) => t.$emit("highlighted-emoji", n),
+              onMouseleave: a[3] || (a[3] = (o) => t.$emit("highlighted-emoji", null))
+            }, [
+              v("img", {
+                class: "d-icon d-icon--size-500",
+                alt: n.name,
+                "aria-label": n.name,
+                title: n.name,
+                src: `${h(q) + n.unicode_character}.png`
+              }, null, 8, Te)
+            ], 40, ye))), 128))
+          ])
+        ])) : O("", !0)
+      ], 512)
+    ]));
+  }
+}, $e = /* @__PURE__ */ N(Se, [["__scopeId", "data-v-183240d8"]]);
+const Ee = { class: "d-emoji-picker__skin-list" }, Le = ["onClick"], Ce = ["alt", "aria-label", "title", "src"], Ie = { class: "d-emoji-picker__skin-selected" }, we = ["alt", "aria-label", "title", "src"], De = {
+  __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"
+  ],
+  setup(e, { emit: _ }) {
+    const l = e, s = [
+      {
+        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: ""
+      }
+    ], b = f(s.find((c) => c.skinTone === l.skinTone)), r = f(!1);
+    ae(
+      () => l.isHovering && (r.value = !1)
+    );
+    function g(c) {
+      b.value = c, r.value = !1, _("skin-tone", c.skinTone);
+    }
+    return (c, y) => (i(), d("div", null, [
+      M(v("div", Ee, [
+        (i(), d(U, null, R(s, (u) => v("button", {
+          key: u.name,
+          class: ie({
+            selected: b.value.skinCode === u.skinCode
+          }),
+          onClick: ($) => g(u)
+        }, [
+          v("img", {
+            class: "d-icon d-icon--size-500",
+            alt: u.name,
+            "aria-label": u.name,
+            title: u.name,
+            src: `${h(q) + u.unicode_output}.png`
+          }, null, 8, Ce)
+        ], 10, Le)), 64))
+      ], 512), [
+        [x, r.value]
+      ]),
+      M(v("div", Ie, [
+        T(Y, { placement: "top-end" }, {
+          anchor: F(() => [
+            v("button", {
+              onClick: y[0] || (y[0] = (u) => r.value = !0)
+            }, [
+              v("img", {
+                class: "d-icon d-icon--size-500",
+                alt: b.value.name,
+                "aria-label": b.value.name,
+                title: b.value.name,
+                src: `${h(q) + b.value.unicode_output}.png`
+              }, null, 8, we)
+            ])
+          ]),
+          default: F(() => [
+            P(A(e.skinSelectorButtonTooltipLabel) + " ", 1)
+          ]),
+          _: 1
+        })
+      ], 512), [
+        [x, !r.value]
+      ])
+    ]));
+  }
+}, Fe = /* @__PURE__ */ N(De, [["__scopeId", "data-v-5c3fd4f6"]]);
+const Ue = { class: "d-emoji-picker__data" }, Re = ["alt", "aria-label", "title", "src"], Ae = {
+  __name: "emoji_description",
+  props: {
+    /**
+     * Emoji data
+     * @type {Object}
+     * @default null
+     */
+    emoji: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(e) {
+    return (_, l) => {
+      var s;
+      return i(), d("div", Ue, [
+        e.emoji ? (i(), d("img", {
+          key: 0,
+          class: "d-icon d-icon--size-500",
+          alt: e.emoji.name,
+          "aria-label": e.emoji.name,
+          title: e.emoji.name,
+          src: `${h(q) + e.emoji.unicode_character}.png`
+        }, null, 8, Re)) : O("", !0),
+        P(" " + A((s = e.emoji) == null ? void 0 : s.name), 1)
+      ]);
+    };
+  }
+}, qe = /* @__PURE__ */ N(Ae, [["__scopeId", "data-v-48c61881"]]);
+const Ve = { class: "d-emoji-picker" }, Ne = { class: "d-emoji-picker--header" }, Be = { class: "d-emoji-picker--body" }, Me = { class: "d-emoji-picker--footer" }, ze = {
+  __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"
+  ],
+  setup(e, { emit: _ }) {
+    const l = e, s = f(""), b = f(null), r = f({}), g = f(0), c = f(!1), y = D(() => l.recentlyUsedEmojis.length > 0);
+    function u(j) {
+      s.value = "", r.value = j, r.value = { ...r.value, tabId: j };
+    }
+    function $(j) {
+      g.value = j;
+    }
+    function p(j) {
+      c.value = j;
+    }
+    function V(j) {
+      b.value = j;
+    }
+    return (j, E) => (i(), d("div", Ve, [
+      v("div", Ne, [
+        T(be, {
+          "emoji-filter": s.value,
+          "show-recently-used-tab": h(y),
+          "scroll-into-tab": g.value,
+          "tabset-labels": e.tabSetLabels,
+          "is-scrolling": c.value,
+          onSelectedTabset: u
+        }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels", "is-scrolling"])
+      ]),
+      v("div", Be, [
+        T(de, {
+          modelValue: s.value,
+          "onUpdate:modelValue": E[0] || (E[0] = (C) => s.value = C),
+          "search-placeholder-label": e.searchPlaceholderLabel
+        }, null, 8, ["modelValue", "search-placeholder-label"]),
+        T($e, {
+          "emoji-filter": s.value,
+          "skin-tone": e.skinTone,
+          "tabset-labels": e.tabSetLabels,
+          "search-results-label": e.searchResultsLabel,
+          "search-no-results-label": e.searchNoResultsLabel,
+          "recently-used-emojis": e.recentlyUsedEmojis,
+          "selected-tabset": r.value,
+          onScrollIntoTab: $,
+          onIsScrolling: p,
+          onHighlightedEmoji: V,
+          onSelectedEmoji: E[1] || (E[1] = (C) => _("selected-emoji", C))
+        }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])
+      ]),
+      v("div", Me, [
+        T(qe, { emoji: b.value }, null, 8, ["emoji"]),
+        T(Fe, {
+          "is-hovering": !!b.value,
+          "skin-selector-button-tooltip-label": e.skinSelectorButtonTooltipLabel,
+          "skin-tone": e.skinTone,
+          onSkinTone: E[2] || (E[2] = (C) => _("skin-tone", C))
+        }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
+      ])
+    ]));
+  }
+};
+export {
+  Je as DtEmoji,
+  ze as DtEmojiPicker,
+  Ge as DtEmojiTextWrapper,
+  Ke as codeToEmojiData,
+  Qe as customEmojiAssetUrl,
+  We as defaultEmojiAssetUrl,
+  Xe as emojiFileExtensionLarge,
+  Ye as emojiFileExtensionSmall,
+  Ze as emojiImageUrlLarge,
+  et as emojiImageUrlSmall,
+  tt as emojiJson,
+  lt as emojiVersion,
+  ot as filterValidShortCodes,
+  st as findEmojis,
+  nt as findShortCodes,
+  at as getEmojiData,
+  it as setCustomEmojiJson,
+  rt as setCustomEmojiUrl,
+  ct as setEmojiAssetUrlLarge,
+  ut as setEmojiAssetUrlSmall,
+  dt as shortcodeToEmojiData,
+  mt as stringToUnicode,
+  bt as unicodeToString,
+  _t as validateCustomEmojiJson
+};