@dialpad/dialtone 9.126.5 → 9.127.0

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

@@ -1,14 +1,15 @@
-import { ref as k, onMounted as ue, openBlock as h, createElementBlock as R, createVNode as O, unref as $, withKeys as P, withModifiers as ce, createSlots as Re, withCtx as U, computed as M, watch as N, Fragment as W, renderList as J, createBlock as Z, resolveDynamicComponent as we, nextTick as x, onBeforeUnmount as Te, createElementVNode as _, toDisplayString as H, withDirectives as oe, createCommentVNode as Y, vShow as le, normalizeClass as fe, watchEffect as re, createTextVNode as de } from "vue";
-import { DtIconSearch as $e, DtIconClose as _e, DtIconClock as Le, DtIconSatisfied as Ie, DtIconLivingThing as Fe, DtIconFood as Ae, DtIconObject as Ce, DtIconTransportation as De, DtIconLightbulb as Oe, DtIconHeart as Ke, DtIconFlag as Ne, DtIconTiktok as Ue } from "@dialpad/dialtone-icons/vue3";
-import Me from "../input/input.js";
-import me from "../button/button.js";
-import { returnFirstEl as Be } from "../../common/utils/index.js";
-import { EMOJI_PICKER_CATEGORIES as D, ARROW_KEYS as z, EMOJIS_PER_ROW as L, CDN_URL as Q, EMOJI_PICKER_SKIN_TONE_MODIFIERS as V } from "./emoji-picker-constants.js";
-import qe from "../tab/tab-group.js";
-import Pe from "../tab/tab.js";
-import { emojisGrouped as F } from "@dialpad/dialtone-emojis";
-import Ve from "../tooltip/tooltip.js";
-const ze = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, He = {
+import { ref as S, onMounted as re, openBlock as E, createElementBlock as j, createVNode as B, unref as k, withKeys as J, withModifiers as ue, createSlots as ye, withCtx as N, computed as M, watch as K, Fragment as W, renderList as G, createBlock as Z, resolveDynamicComponent as Le, nextTick as x, onBeforeUnmount as Te, createElementVNode as A, toDisplayString as z, withDirectives as te, createCommentVNode as Y, vShow as oe, normalizeClass as ce, watchEffect as ae, createTextVNode as fe } from "vue";
+import { DtIconSearch as Ie, DtIconClose as je, DtIconClock as Re, DtIconSatisfied as Ae, DtIconLivingThing as $e, DtIconFood as we, DtIconObject as Oe, DtIconTransportation as Ce, DtIconLightbulb as De, DtIconHeart as Fe, DtIconFlag as Be, DtIconTiktok as Ke } from "@dialpad/dialtone-icons/vue3";
+import Ne from "../input/input.js";
+import de from "../button/button.js";
+import { returnFirstEl as Me } from "../../common/utils/index.js";
+import Pe from "../tab/tab-group.js";
+import Ue from "../tab/tab.js";
+import { emojisGrouped as C } from "@dialpad/dialtone-emojis";
+import { ARROW_KEYS as H, EMOJIS_PER_ROW as $, CDN_URL as Q, EMOJI_PICKER_SKIN_TONE_MODIFIERS as V } from "./emoji-picker-constants.js";
+import Je from "../tooltip/tooltip.js";
+import { DialtoneLocalization as Ve } from "../../localization/index.js";
+const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ze = {
   __name: "emoji_search",
   props: {
     searchPlaceholderLabel: {
@@ -22,49 +23,49 @@ const ze = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, He = {
   },
   emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
   setup(o, { expose: g, emit: y }) {
-    const n = y, u = k(null);
-    function T() {
-      n("update:modelValue", ""), p();
+    const l = y, f = S(null);
+    function R() {
+      l("update:modelValue", ""), L();
     }
-    function p() {
-      u.value.focus();
+    function L() {
+      f.value.focus();
     }
-    return ue(() => {
-      p();
+    return re(() => {
+      L();
     }), g({
-      focusSearchInput: p
-    }), (j, f) => (h(), R("div", ze, [
-      O($(Me), {
+      focusSearchInput: L
+    }), (I, m) => (E(), j("div", He, [
+      B(k(Ne), {
         id: "searchInput",
         ref_key: "searchInput",
-        ref: u,
+        ref: f,
         placeholder: o.searchPlaceholderLabel,
         "model-value": o.modelValue,
-        "onUpdate:modelValue": f[0] || (f[0] = (i) => j.$emit("update:modelValue", i)),
+        "onUpdate:modelValue": m[0] || (m[0] = (a) => I.$emit("update:modelValue", a)),
         onKeydown: [
-          f[1] || (f[1] = P((i) => j.$emit("focus-tabset"), ["up"])),
-          f[2] || (f[2] = P(ce((i) => j.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
-          f[3] || (f[3] = P((i) => j.$emit("select-first-emoji"), ["enter"]))
+          m[1] || (m[1] = J((a) => I.$emit("focus-tabset"), ["up"])),
+          m[2] || (m[2] = J(ue((a) => I.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
+          m[3] || (m[3] = J((a) => I.$emit("select-first-emoji"), ["enter"]))
         ]
-      }, Re({
-        leftIcon: U(() => [
-          O($($e), { size: "200" })
+      }, ye({
+        leftIcon: N(() => [
+          B(k(Ie), { size: "200" })
         ]),
         _: 2
       }, [
         o.modelValue.length > 0 ? {
           name: "rightIcon",
-          fn: U(() => [
-            O($(me), {
+          fn: N(() => [
+            B(k(de), {
               importance: "clear",
               size: "xs",
               class: "d-emoji-picker__search-x-button",
               circle: "",
               kind: "muted",
-              onClick: T
+              onClick: R
             }, {
-              icon: U(() => [
-                O($(_e), { size: "200" })
+              icon: N(() => [
+                B(k(je), { size: "200" })
               ]),
               _: 1
             })
@@ -74,7 +75,7 @@ const ze = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, He = {
       ]), 1032, ["placeholder", "model-value"])
     ]));
   }
-}, Ge = { class: "d-emoji-picker__tabset" }, We = {
+}, qe = { class: "d-emoji-picker__tabset" }, We = {
   __name: "emoji_tabset",
   props: {
     /**
@@ -108,7 +109,7 @@ const ze = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, He = {
      * @type {Array}
      * @required
      */
-    tabsetLabels: {
+    tabSetLabels: {
       type: Array,
       required: !0
     }
@@ -124,157 +125,156 @@ const ze = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, He = {
     "focus-skin-selector"
   ],
   setup(o, { expose: g, emit: y }) {
-    const n = o, u = y, T = [
-      { label: D.MOST_RECENTLY_USED, icon: Le },
-      { label: D.SMILEYS_AND_PEOPLE, icon: Ie },
-      { label: D.NATURE, icon: Fe },
-      { label: D.FOOD, icon: Ae },
-      { label: D.ACTIVITY, icon: Ce },
-      { label: D.TRAVEL, icon: De },
-      { label: D.OBJECTS, icon: Oe },
-      { label: D.SYMBOLS, icon: Ke },
-      { label: D.FLAGS, icon: Ne },
-      { label: D.CUSTOM, icon: Ue }
-    ], p = M(() => {
-      const e = n.showRecentlyUsedTab ? T : T.slice(1);
-      return n.showCustomEmojisTab || e.pop(), e.map((t, s) => ({
-        ...t,
-        label: n.tabsetLabels[s],
+    const l = o, f = y, R = [
+      { label: l.tabSetLabels[0], icon: Re },
+      { label: l.tabSetLabels[1], icon: Ae },
+      { label: l.tabSetLabels[2], icon: $e },
+      { label: l.tabSetLabels[3], icon: we },
+      { label: l.tabSetLabels[4], icon: Oe },
+      { label: l.tabSetLabels[5], icon: Ce },
+      { label: l.tabSetLabels[6], icon: De },
+      { label: l.tabSetLabels[7], icon: Fe },
+      { label: l.tabSetLabels[8], icon: Be },
+      { label: l.tabSetLabels[9], icon: Ke }
+    ], L = M(() => {
+      const t = l.showRecentlyUsedTab ? R : R.slice(1);
+      return l.showCustomEmojisTab || t.pop(), t.map((e, n) => ({
+        ...e,
         // IDs on dt-tab component need to be on string
-        id: (s + 1).toString(),
-        panelId: (s + 1).toString()
+        id: (n + 1).toString(),
+        panelId: (n + 1).toString()
       }));
-    }), j = M(() => n.emojiFilter.length > 0), f = k("1"), i = k([]);
-    N(
-      () => n.scrollIntoTab,
+    }), I = M(() => l.emojiFilter.length > 0), m = S("1"), a = S([]);
+    K(
+      () => l.scrollIntoTab,
       () => {
-        j.value || (f.value = (n.scrollIntoTab + 1).toString());
+        I.value || (m.value = (l.scrollIntoTab + 1).toString());
       }
-    ), N(
-      j,
+    ), K(
+      I,
       () => {
-        j.value && (f.value = null);
+        I.value && (m.value = null);
       }
     );
-    function S(e) {
-      const t = parseInt(e);
-      f.value = e, u("selected-tabset", t);
+    function d(t) {
+      const e = parseInt(t);
+      m.value = t, f("selected-tabset", e);
     }
-    function K(e) {
-      i.value.push(Be(e.$el));
+    function D(t) {
+      a.value.push(Me(t.$el));
     }
-    function A() {
-      i.value[0].focus();
+    function F() {
+      a.value[0].focus();
     }
-    function r(e, t) {
-      e.key === "Enter" && (S(t), i.value[t - 1].blur()), e.key === "Tab" && (e.preventDefault(), e.shiftKey ? u("focus-skin-selector") : u("focus-search-input")), e.key === "ArrowDown" && u("focus-search-input");
+    function w(t, e) {
+      t.key === "Enter" && (d(e), a.value[e - 1].blur()), t.key === "Tab" && (t.preventDefault(), t.shiftKey ? f("focus-skin-selector") : f("focus-search-input")), t.key === "ArrowDown" && f("focus-search-input");
     }
     return g({
-      focusTabset: A
-    }), (e, t) => (h(), R("div", Ge, [
-      O($(qe), {
+      focusTabset: F
+    }), (t, e) => (E(), j("div", qe, [
+      B(k(Pe), {
+        selected: m.value,
         size: "sm",
-        "tab-list-class": "d-emoji-picker__tabset-list",
-        selected: f.value
+        "tab-list-class": "d-emoji-picker__tabset-list"
       }, {
-        tabs: U(() => [
-          (h(!0), R(W, null, J(p.value, (s, m) => (h(), Z($(Pe), {
-            id: s.id,
+        tabs: N(() => [
+          (E(!0), j(W, null, G(L.value, (n, v) => (E(), Z(k(Ue), {
+            id: n.id,
+            key: n.id,
             ref_for: !0,
             ref: (c) => {
-              c && K(c);
+              c && D(c);
             },
-            key: s.id,
-            "panel-id": s.panelId,
-            label: s.label,
+            label: n.label,
+            "panel-id": n.panelId,
+            tabindex: v + 1,
             "aria-controls": "d-emoji-picker-list",
-            tabindex: m + 1,
-            onClickCapture: ce((c) => S(s.id), ["stop"]),
-            onKeydown: (c) => r(c, s.id)
+            onKeydown: (c) => w(c, n.id),
+            onClickCapture: ue((c) => d(n.id), ["stop"])
           }, {
-            default: U(() => [
-              (h(), Z(we(s.icon), { size: "400" }))
+            default: N(() => [
+              (E(), Z(Le(n.icon), { size: "400" }))
             ]),
             _: 2
-          }, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]))), 128))
+          }, 1032, ["id", "label", "panel-id", "tabindex", "onKeydown", "onClickCapture"]))), 128))
         ]),
         _: 1
       }, 8, ["selected"])
     ]));
   }
 };
-function Je() {
-  const o = k([]), g = k([]), y = k(!1), n = k(!0);
-  function u(e, t) {
-    i(e, t - 1) || (o.value[e - 1] ? i(e - 1, o.value[e - 1].length - 1) : i(o.value.length - 1, o.value[o.value.length - 1].length - 1));
+function Ge() {
+  const o = S([]), g = S([]), y = S(!1), l = S(!0);
+  function f(t, e) {
+    a(t, e - 1) || (o.value[t - 1] ? a(t - 1, o.value[t - 1].length - 1) : a(o.value.length - 1, o.value[o.value.length - 1].length - 1));
   }
-  function T(e, t) {
-    i(e, t + 1) || i(e + 1, 0) || i(0, 0);
+  function R(t, e) {
+    a(t, e + 1) || a(t + 1, 0) || a(0, 0);
   }
-  function p(e, t) {
-    i(0, t - 1) || i(0, g.value.length - 1);
+  function L(t, e) {
+    a(0, e - 1) || a(0, g.value.length - 1);
   }
-  function j(e, t) {
-    i(0, t + 1) || i(0, 0);
+  function I(t, e) {
+    a(0, e + 1) || a(0, 0);
   }
-  function f(e, t, s) {
-    y.value ? e === "left" ? p(t, s) : e === "right" && j(t, s) : e === "left" ? u(t, s) : e === "right" && T(t, s);
+  function m(t, e, n) {
+    y.value ? t === "left" ? L(e, n) : t === "right" && I(e, n) : t === "left" ? f(e, n) : t === "right" && R(e, n);
   }
-  function i(e, t) {
-    var m, c, E;
-    const s = y.value ? (m = g.value) == null ? void 0 : m[t] : (E = (c = o.value) == null ? void 0 : c[e]) == null ? void 0 : E[t];
-    return s ? (s.focus(), !0) : !1;
+  function a(t, e) {
+    var v, c, T;
+    const n = y.value ? (v = g.value) == null ? void 0 : v[e] : (T = (c = o.value) == null ? void 0 : c[t]) == null ? void 0 : T[e];
+    return n ? (n.focus(), !0) : !1;
   }
-  function S(e, t, s) {
-    o.value[t] || (o.value[t] = []), o.value[t][s] = e;
+  function d(t, e, n) {
+    o.value[e] || (o.value[e] = []), o.value[e][n] = t;
   }
-  function K(e, t) {
-    g.value[t] = e;
+  function D(t, e) {
+    g.value[e] = t;
   }
-  function A(e, t) {
-    var s;
-    if (n.value = !1, e === z.ARROW_UP) {
-      const m = t % L;
-      if (!i(0, t - L)) {
-        const c = g.value.length - g.value.length % L + m;
-        i(0, c), i(0, c) || i(0, g.value.length - 1);
+  function F(t, e) {
+    var n;
+    if (l.value = !1, t === H.ARROW_UP) {
+      const v = e % $;
+      if (!a(0, e - $)) {
+        const c = g.value.length - g.value.length % $ + v;
+        a(0, c), a(0, c) || a(0, g.value.length - 1);
       }
     }
-    if (e === z.ARROW_DOWN && !i(0, t + L)) {
-      const m = t % L;
-      (s = g.value) != null && s[t + (L - m)] ? i(0, g.value.length - 1) : i(0, m);
+    if (t === H.ARROW_DOWN && !a(0, e + $)) {
+      const v = e % $;
+      (n = g.value) != null && n[e + ($ - v)] ? a(0, g.value.length - 1) : a(0, v);
     }
-    e === z.ARROW_LEFT && f("left", 0, t), e === z.ARROW_RIGHT && f("right", 0, t);
+    t === H.ARROW_LEFT && m("left", 0, e), t === H.ARROW_RIGHT && m("right", 0, e);
   }
-  function r(e, t, s) {
-    var m, c;
-    if (e === "ArrowUp") {
-      const E = s % L;
-      if (t === 0) {
-        const w = L - o.value[o.value.length - 1].length % L, C = o.value[o.value.length - 1].length + w - (L - E);
-        i(o.value.length - 1, C) || i(o.value.length - 1, o.value[o.value.length - 1].length - 1);
+  function w(t, e, n) {
+    var v, c;
+    if (t === "ArrowUp") {
+      const T = n % $;
+      if (e === 0) {
+        const r = $ - o.value[o.value.length - 1].length % $, i = o.value[o.value.length - 1].length + r - ($ - T);
+        a(o.value.length - 1, i) || a(o.value.length - 1, o.value[o.value.length - 1].length - 1);
         return;
       }
-      if (!i(t, s - L)) {
-        const w = t - 1 < 0 ? 0 : t - 1, C = o.value[w].length, ee = C - C % L + E;
-        i(w, ee) || i(t - 1, o.value[t - 1].length - 1);
+      if (!a(e, n - $)) {
+        const r = e - 1 < 0 ? 0 : e - 1, i = o.value[r].length, _ = i - i % $ + T;
+        a(r, _) || a(e - 1, o.value[e - 1].length - 1);
       }
     }
-    if (e === "ArrowDown" && !i(t, s + L)) {
-      const E = s % L;
-      (c = (m = o.value) == null ? void 0 : m[t]) != null && c[s + (L - E)] ? i(t, o.value[t].length - 1) : i(t + 1, E) || i(0, E) || i(0, o.value[0].length - 1);
+    if (t === "ArrowDown" && !a(e, n + $)) {
+      const T = n % $;
+      (c = (v = o.value) == null ? void 0 : v[e]) != null && c[n + ($ - T)] ? a(e, o.value[e].length - 1) : a(e + 1, T) || a(0, T) || a(0, o.value[0].length - 1);
     }
-    e === "ArrowLeft" && f("left", t, s), e === "ArrowRight" && f("right", t, s);
+    t === "ArrowLeft" && m("left", e, n), t === "ArrowRight" && m("right", e, n);
   }
   return {
     emojiFilteredRefs: g,
     isFiltering: y,
-    hoverFirstEmoji: n,
-    setEmojiRef: S,
-    setFilteredRef: K,
-    focusEmoji: i,
-    handleArrowNavigationFiltered: A,
-    handleArrowNavigation: r
+    hoverFirstEmoji: l,
+    setEmojiRef: d,
+    setFilteredRef: D,
+    focusEmoji: a,
+    handleArrowNavigationFiltered: F,
+    handleArrowNavigation: w
   };
 }
 const Ye = { class: "d-emoji-picker__selector" }, Qe = {
@@ -387,231 +387,231 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     "focus-search-input"
   ],
   setup(o, { expose: g, emit: y }) {
-    const n = o, u = y, {
-      emojiFilteredRefs: T,
-      isFiltering: p,
-      hoverFirstEmoji: j,
-      setEmojiRef: f,
-      setFilteredRef: i,
-      focusEmoji: S,
-      handleArrowNavigationFiltered: K,
-      handleArrowNavigation: A
-    } = Je(), r = k(null), e = k(null), t = k(null), s = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags", "Custom"], m = M(() => {
-      let l = n.tabsetLabels.map((a) => ({ label: a, ref: k(null) }));
-      return n.recentlyUsedEmojis && !n.recentlyUsedEmojis.length && (l = n.tabsetLabels.slice(1).map((a) => ({ label: a, ref: k(null) }))), n.customEmojis && !n.customEmojis.length && l.pop(), l;
-    }), c = k(m.value[0].label), E = M(() => {
-      const l = n.recentlyUsedEmojis.length ? s.slice() : s.slice(1);
-      return n.customEmojis && !n.customEmojis.length && l.pop(), l;
-    }), w = k([]), C = M(() => [
-      ...F[`People${n.skinTone}`],
-      ...F.Nature,
-      ...F.Food,
-      ...F[`Activity${n.skinTone}`],
-      ...F.Travel,
-      ...F[`Objects${n.skinTone}`],
-      ...F.Symbols,
-      ...F.Flags
-    ]), ee = ve(() => {
-      T.value = [], ne();
-    }), se = () => {
-      const l = e.value;
-      l.scrollTop + l.clientHeight >= l.scrollHeight && u("scroll-bottom-reached");
+    const l = o, f = y, {
+      emojiFilteredRefs: R,
+      isFiltering: L,
+      hoverFirstEmoji: I,
+      setEmojiRef: m,
+      setFilteredRef: a,
+      focusEmoji: d,
+      handleArrowNavigationFiltered: D,
+      handleArrowNavigation: F
+    } = Ge(), w = S(null), t = S(null), e = S(null), n = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags", "Custom"], v = M(() => {
+      let s = l.tabsetLabels.map((u) => ({ label: u, ref: S(null) }));
+      return l.recentlyUsedEmojis && !l.recentlyUsedEmojis.length && (s = l.tabsetLabels.slice(1).map((u) => ({ label: u, ref: S(null) }))), l.customEmojis && !l.customEmojis.length && s.pop(), s;
+    }), c = S(v.value[0].label), T = M(() => {
+      const s = l.recentlyUsedEmojis.length ? n.slice() : n.slice(1);
+      return l.customEmojis && !l.customEmojis.length && s.pop(), s;
+    }), r = S([]), i = M(() => [
+      ...C[`People${l.skinTone}`],
+      ...C.Nature,
+      ...C.Food,
+      ...C[`Activity${l.skinTone}`],
+      ...C.Travel,
+      ...C[`Objects${l.skinTone}`],
+      ...C.Symbols,
+      ...C.Flags
+    ]), _ = me(() => {
+      R.value = [], se();
+    }), le = () => {
+      const s = t.value;
+      s.scrollTop + s.clientHeight >= s.scrollHeight && f("scroll-bottom-reached");
     };
-    N(C, () => {
-      ne();
-    }, { immediate: !0 }), N(
-      () => n.recentlyUsedEmojis,
+    K(i, () => {
+      se();
+    }, { immediate: !0 }), K(
+      () => l.recentlyUsedEmojis,
       () => {
-        F["Recently used"] = n.recentlyUsedEmojis;
+        C["Recently used"] = l.recentlyUsedEmojis;
       },
       { immediate: !0 }
-    ), N(
-      () => n.customEmojis,
+    ), K(
+      () => l.customEmojis,
       () => {
-        F.Custom = n.customEmojis;
+        C.Custom = l.customEmojis;
       },
       { immediate: !0 }
-    ), N(() => n.emojiFilter, () => {
-      pe(), n.emojiFilter ? p.value = !0 : (p.value = !1, B(null)), ee();
-    }), N(
-      () => n.selectedTabset,
-      (l) => {
-        G(l.tabId);
+    ), K(() => l.emojiFilter, () => {
+      he(), l.emojiFilter ? L.value = !0 : (L.value = !1, P(null)), _();
+    }), K(
+      () => l.selectedTabset,
+      (s) => {
+        q(s.tabId);
       },
       { deep: !0 }
     );
-    function te(l, a = !1) {
-      j.value = a, u("highlighted-emoji", l);
-    }
-    function ne() {
-      const l = n.emojiFilter.toLowerCase();
-      w.value = C.value.filter((a) => {
-        const v = a.name.toLowerCase().includes(l), b = a.keywords.some((d) => d.toLowerCase().includes(l));
-        return v || b;
+    function ee(s, u = !1) {
+      I.value = u, f("highlighted-emoji", s);
+    }
+    function se() {
+      const s = l.emojiFilter.toLowerCase();
+      r.value = i.value.filter((u) => {
+        const h = u.name.toLowerCase().includes(s), p = u.keywords.some((b) => b.toLowerCase().includes(s));
+        return h || p;
       }), x(() => {
-        l && te(w.value[0], !0);
+        s && ee(r.value[0], !0);
       });
     }
-    function ve(l, a = 300) {
-      let v;
-      return (...b) => {
-        clearTimeout(v), v = setTimeout(() => l(...b), a);
+    function me(s, u = 300) {
+      let h;
+      return (...p) => {
+        clearTimeout(h), h = setTimeout(() => s(...p), u);
       };
     }
-    function be(l) {
-      return l.date_added ? l.image : Q + l.unicode_character + ".png";
+    function ve(s) {
+      return s.date_added ? s.image : Q + s.unicode_character + ".png";
     }
-    function he(l) {
-      l.target.parentNode.style.display = "none";
+    function be(s) {
+      s.target.parentNode.style.display = "none";
     }
-    function G(l, a = !0) {
-      const b = m.value[l - 1].ref.value[0];
+    function q(s, u = !0) {
+      const p = v.value[s - 1].ref.value[0];
       x(() => {
-        const d = e.value, q = l === 1 ? 0 : b.offsetTop - 15;
-        d.scrollTop = q, a && S(l - 1, 0);
+        const b = t.value, U = s === 1 ? 0 : p.offsetTop - 15;
+        b.scrollTop = U, u && d(s - 1, 0);
       });
     }
-    function pe() {
-      const l = e.value;
-      l.scrollTop = 0;
-    }
-    function ke() {
-      e.value.addEventListener("scroll", se);
+    function he() {
+      const s = t.value;
+      s.scrollTop = 0;
     }
-    function ge() {
-      t.value = new IntersectionObserver(async (l) => {
-        l.forEach((a) => {
-          var d, q, I, ie, ae;
-          const { target: v } = a, b = parseInt(v.dataset.index);
-          a.isIntersecting && v.offsetTop <= r.value.offsetTop + 50 ? (c.value = ((d = m.value[b - 1]) == null ? void 0 : d.label) ?? ((q = m.value[0]) == null ? void 0 : q.label), u("scroll-into-tab", b - 1)) : a.boundingClientRect.bottom <= ((I = r.value) == null ? void 0 : I.getBoundingClientRect().bottom) ? (u("scroll-into-tab", b), c.value = (ie = m.value[b]) == null ? void 0 : ie.label) : b === 1 && (u("scroll-into-tab", b), c.value = (ae = m.value[0]) == null ? void 0 : ae.label);
+    function pe() {
+      t.value.addEventListener("scroll", le);
+    }
+    function _e() {
+      e.value = new IntersectionObserver(async (s) => {
+        s.forEach((u) => {
+          var b, U, O, ne, ie;
+          const { target: h } = u, p = parseInt(h.dataset.index);
+          u.isIntersecting && h.offsetTop <= w.value.offsetTop + 50 ? (c.value = ((b = v.value[p - 1]) == null ? void 0 : b.label) ?? ((U = v.value[0]) == null ? void 0 : U.label), f("scroll-into-tab", p - 1)) : u.boundingClientRect.bottom <= ((O = w.value) == null ? void 0 : O.getBoundingClientRect().bottom) ? (f("scroll-into-tab", p), c.value = (ne = v.value[p]) == null ? void 0 : ne.label) : p === 1 && (f("scroll-into-tab", p), c.value = (ie = v.value[0]) == null ? void 0 : ie.label);
         });
-      }), t.value.observe(r.value), Array.from(e.value.children).forEach((l, a) => {
-        t.value.observe(l), l.dataset.index = a;
+      }), e.value.observe(w.value), Array.from(t.value.children).forEach((s, u) => {
+        e.value.observe(s), s.dataset.index = u;
       });
     }
-    const ye = (l, a, v) => {
-      if (l.preventDefault(), Object.values(z).includes(l.key)) {
-        K(l.key, a);
+    const Ee = (s, u, h) => {
+      if (s.preventDefault(), Object.values(H).includes(s.key)) {
+        D(s.key, u);
         return;
       }
-      switch (l.key) {
+      switch (s.key) {
         case "Tab":
-          u("focus-skin-selector");
+          f("focus-skin-selector");
           break;
         case "Enter":
-          X(v, l);
+          X(h, s);
           break;
       }
-    }, je = (l, a, v, b) => {
-      if (l.preventDefault(), Object.values(z).includes(l.key)) {
-        A(l.key, a, v);
+    }, ke = (s, u, h, p) => {
+      if (s.preventDefault(), Object.values(H).includes(s.key)) {
+        F(s.key, u, h);
         return;
       }
-      switch (l.key) {
+      switch (s.key) {
         case "Tab":
-          l.shiftKey ? S(a, 0) && a > 0 ? G(a, !0) : (G(1, !1), u("focus-search-input")) : S(a + 1, 0) ? G(a + 1 + 1, !1) : u("focus-skin-selector");
+          s.shiftKey ? d(u, 0) && u > 0 ? q(u, !0) : (q(1, !1), f("focus-search-input")) : d(u + 1, 0) ? q(u + 1 + 1, !1) : f("focus-skin-selector");
           break;
         case "Enter":
-          X(b, l);
+          X(p, s);
           break;
       }
     };
-    function X(l, a) {
-      u("selected-emoji", { ...l, shift_key: a.shiftKey });
+    function X(s, u) {
+      f("selected-emoji", { ...s, shift_key: u.shiftKey });
     }
-    function B(l) {
-      u("highlighted-emoji", l);
+    function P(s) {
+      f("highlighted-emoji", s);
     }
     function Se() {
-      S(0, 0);
+      d(0, 0);
     }
-    function Ee() {
-      G(E.value.length, !0);
+    function ge() {
+      q(T.value.length, !0);
     }
-    return ue(() => {
-      ge(), ke();
+    return re(() => {
+      _e(), pe();
     }), Te(() => {
-      t.value.disconnect(), e.value.removeEventListener("scroll", se);
+      e.value.disconnect(), t.value.removeEventListener("scroll", le);
     }), g({
       focusEmojiSelector: Se,
-      focusLastEmoji: Ee
-    }), (l, a) => (h(), R("div", Ye, [
-      _("div", {
+      focusLastEmoji: ge
+    }), (s, u) => (E(), j("div", Ye, [
+      A("div", {
         id: "d-emoji-picker-list",
         ref_key: "listRef",
-        ref: e,
+        ref: t,
         class: "d-emoji-picker__list"
       }, [
-        o.emojiFilter ? (h(), R("p", Qe, H(w.value.length > 0 ? o.searchResultsLabel : o.searchNoResultsLabel), 1)) : (h(), R("div", {
+        o.emojiFilter ? (E(), j("p", Qe, z(r.value.length > 0 ? o.searchResultsLabel : o.searchNoResultsLabel), 1)) : (E(), j("div", {
           key: 1,
           ref_key: "tabCategoryRef",
-          ref: r,
+          ref: w,
           class: "d-emoji-picker__category d-emoji-picker__alignment"
         }, [
-          _("p", null, H(c.value), 1)
+          A("p", null, z(c.value), 1)
         ], 512)),
-        (h(!0), R(W, null, J(m.value, (v, b) => oe((h(), R("div", {
-          key: b,
+        (E(!0), j(W, null, G(v.value, (h, p) => te((E(), j("div", {
+          key: p,
           ref_for: !0,
-          ref: v.ref,
+          ref: h.ref,
           class: "d-emoji-picker__alignment"
         }, [
-          b ? (h(), R("p", Xe, H(v.label), 1)) : Y("", !0),
-          _("div", Ze, [
-            (h(!0), R(W, null, J($(F)[E.value[b] + o.skinTone] ? $(F)[E.value[b] + o.skinTone] : $(F)[E.value[b]], (d, q) => (h(), R("button", {
-              key: d.shortname,
+          p ? (E(), j("p", Xe, z(h.label), 1)) : Y("", !0),
+          A("div", Ze, [
+            (E(!0), j(W, null, G(k(C)[T.value[p] + o.skinTone] ? k(C)[T.value[p] + o.skinTone] : k(C)[T.value[p]], (b, U) => (E(), j("button", {
+              key: b.shortname,
               ref_for: !0,
-              ref: (I) => {
-                I && $(f)(I, b, q);
+              ref: (O) => {
+                O && k(m)(O, p, U);
               },
               type: "button",
-              "aria-label": d.name,
-              onClick: (I) => X(d, I),
-              onFocusin: (I) => B(d),
-              onFocusout: a[0] || (a[0] = (I) => B(null)),
-              onMouseover: (I) => B(d),
-              onMouseleave: a[1] || (a[1] = (I) => B(null)),
-              onKeydown: (I) => je(I, b, q, d)
+              "aria-label": b.name,
+              onClick: (O) => X(b, O),
+              onFocusin: (O) => P(b),
+              onFocusout: u[0] || (u[0] = (O) => P(null)),
+              onMouseover: (O) => P(b),
+              onMouseleave: u[1] || (u[1] = (O) => P(null)),
+              onKeydown: (O) => ke(O, p, U, b)
             }, [
-              _("img", {
+              A("img", {
                 class: "d-icon d-icon--size-500",
-                alt: d.name,
-                "aria-label": d.name,
-                title: d.name,
-                src: be(d),
-                onError: he
+                alt: b.name,
+                "aria-label": b.name,
+                title: b.name,
+                src: ve(b),
+                onError: be
               }, null, 40, et)
             ], 40, xe))), 128))
           ])
         ])), [
-          [le, !o.emojiFilter]
+          [oe, !o.emojiFilter]
         ])), 128)),
-        o.emojiFilter ? (h(), R("div", tt, [
-          _("div", ot, [
-            (h(!0), R(W, null, J(w.value, (v, b) => (h(), R("button", {
-              key: v.shortname,
+        o.emojiFilter ? (E(), j("div", tt, [
+          A("div", ot, [
+            (E(!0), j(W, null, G(r.value, (h, p) => (E(), j("button", {
+              key: h.shortname,
               ref_for: !0,
-              ref: (d) => {
-                d && $(i)(d, b);
+              ref: (b) => {
+                b && k(a)(b, p);
               },
               type: "button",
-              "aria-label": v.name,
-              class: fe({
-                "hover-emoji": b === 0 && $(j)
+              "aria-label": h.name,
+              class: ce({
+                "hover-emoji": p === 0 && k(I)
               }),
-              onClick: (d) => X(v, d),
-              onFocusin: (d) => B(v),
-              onFocusout: a[2] || (a[2] = (d) => B(null)),
-              onMouseover: (d) => te(v),
-              onMouseleave: a[3] || (a[3] = (d) => te(null)),
-              onKeydown: (d) => ye(d, b, v)
+              onClick: (b) => X(h, b),
+              onFocusin: (b) => P(h),
+              onFocusout: u[2] || (u[2] = (b) => P(null)),
+              onMouseover: (b) => ee(h),
+              onMouseleave: u[3] || (u[3] = (b) => ee(null)),
+              onKeydown: (b) => Ee(b, p, h)
             }, [
-              _("img", {
+              A("img", {
                 class: "d-icon d-icon--size-500",
-                alt: v.name,
-                "aria-label": v.name,
-                title: v.name,
-                src: `${$(Q) + v.unicode_character}.png`
+                alt: h.name,
+                "aria-label": h.name,
+                title: h.name,
+                src: `${k(Q) + h.unicode_character}.png`
               }, null, 8, st)
             ], 42, lt))), 128))
           ])
@@ -651,7 +651,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     "focus-last-emoji"
   ],
   setup(o, { expose: g, emit: y }) {
-    const n = o, u = y, T = [
+    const l = o, f = y, R = [
       {
         name: ":wave_tone1:",
         unicode_output: "1f44b-1f3fb",
@@ -688,82 +688,82 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
         skinTone: V.DEFAULT,
         skinCode: ""
       }
-    ], p = k(!1), j = k(null), f = k([]);
-    re(
-      () => n.isHovering && (p.value = !1)
+    ], L = S(!1), I = S(null), m = S([]);
+    ae(
+      () => l.isHovering && (L.value = !1)
     );
-    const i = M(() => T.find((s) => s.skinTone === n.skinTone)), S = k(i.value);
-    re(() => i.value && (S.value = i.value));
-    function K(s) {
-      f.value.push(s);
+    const a = M(() => R.find((n) => n.skinTone === l.skinTone)), d = S(a.value);
+    ae(() => a.value && (d.value = a.value));
+    function D(n) {
+      m.value.push(n);
     }
-    function A() {
-      j.value.focus();
+    function F() {
+      I.value.focus();
     }
-    function r(s) {
-      S.value = s, p.value = !1, u("skin-tone", s.skinTone), x(() => A());
+    function w(n) {
+      d.value = n, L.value = !1, f("skin-tone", n.skinTone), x(() => F());
     }
-    const e = (s, m, c) => {
-      var E, w, C;
-      s.preventDefault(), s.key === "ArrowLeft" && (c === 0 && ((E = f.value[f.value.length - 1]) == null || E.focus()), (w = f.value[c - 1]) == null || w.focus()), s.key === "ArrowRight" && ((C = f.value[c + 1]) == null || C.focus()), s.key === "Enter" && (m ? r(m) : t()), s.key === "Tab" && (s.shiftKey ? u("focus-last-emoji") : u("focus-tabset"));
+    const t = (n, v, c) => {
+      var T, r, i;
+      n.preventDefault(), n.key === "ArrowLeft" && (c === 0 && ((T = m.value[m.value.length - 1]) == null || T.focus()), (r = m.value[c - 1]) == null || r.focus()), n.key === "ArrowRight" && ((i = m.value[c + 1]) == null || i.focus()), n.key === "Enter" && (v ? w(v) : e()), n.key === "Tab" && (n.shiftKey ? f("focus-last-emoji") : f("focus-tabset"));
     };
-    function t() {
-      p.value = !p.value, x(() => f.value[0].focus());
+    function e() {
+      L.value = !L.value, x(() => m.value[0].focus());
     }
     return g({
-      focusSkinSelector: A
-    }), (s, m) => (h(), R("div", it, [
-      oe(_("div", at, [
-        (h(), R(W, null, J(T, (c, E) => _("button", {
+      focusSkinSelector: F
+    }), (n, v) => (E(), j("div", it, [
+      te(A("div", at, [
+        (E(), j(W, null, G(R, (c, T) => A("button", {
           ref_for: !0,
-          ref: (w) => {
-            w && K(w);
+          ref: (r) => {
+            r && D(r);
           },
           key: c.name,
-          class: fe({
-            selected: S.value.skinCode === c.skinCode
+          class: ce({
+            selected: d.value.skinCode === c.skinCode
           }),
-          onKeydown: (w) => e(w, c, E),
-          onClick: (w) => r(c)
+          onKeydown: (r) => t(r, c, T),
+          onClick: (r) => w(c)
         }, [
-          _("img", {
+          A("img", {
             class: "d-icon d-icon--size-500",
             alt: c.name,
             "aria-label": c.name,
             title: c.name,
-            src: `${$(Q) + c.unicode_output}.png`
+            src: `${k(Q) + c.unicode_output}.png`
           }, null, 8, ut)
         ], 42, rt)), 64))
       ], 512), [
-        [le, p.value]
+        [oe, L.value]
       ]),
-      oe(_("div", ct, [
-        O($(Ve), { placement: "top-end" }, {
-          anchor: U(() => [
-            _("button", {
+      te(A("div", ct, [
+        B(k(Je), { placement: "top-end" }, {
+          anchor: N(() => [
+            A("button", {
               ref_key: "skinSelectorRef",
-              ref: j,
+              ref: I,
               "aria-label": o.skinSelectorButtonTooltipLabel,
               tabindex: "-1",
-              onClick: t,
-              onKeydown: m[0] || (m[0] = (c) => e(c))
+              onClick: e,
+              onKeydown: v[0] || (v[0] = (c) => t(c))
             }, [
-              _("img", {
+              A("img", {
                 class: "d-icon d-icon--size-500",
-                alt: S.value.name,
-                "aria-label": S.value.name,
-                title: S.value.name,
-                src: `${$(Q) + S.value.unicode_output}.png`
+                alt: d.value.name,
+                "aria-label": d.value.name,
+                title: d.value.name,
+                src: `${k(Q) + d.value.unicode_output}.png`
               }, null, 8, dt)
             ], 40, ft)
           ]),
-          default: U(() => [
-            de(H(o.skinSelectorButtonTooltipLabel) + " ", 1)
+          default: N(() => [
+            fe(z(o.skinSelectorButtonTooltipLabel) + " ", 1)
           ]),
           _: 1
         })
       ], 512), [
-        [le, !p.value]
+        [oe, !L.value]
       ])
     ]));
   }
@@ -784,10 +784,10 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     function g(y) {
       return y.date_added ? y.image : `${Q + y.unicode_character}.png`;
     }
-    return (y, n) => {
-      var u;
-      return h(), R("div", vt, [
-        o.emoji ? (h(), R("img", {
+    return (y, l) => {
+      var f;
+      return E(), j("div", vt, [
+        o.emoji ? (E(), j("img", {
           key: 0,
           class: "d-icon d-icon--size-500",
           alt: o.emoji.name,
@@ -795,11 +795,11 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
           title: o.emoji.name,
           src: g(o.emoji)
         }, null, 8, bt)) : Y("", !0),
-        _("div", null, H((u = o.emoji) == null ? void 0 : u.name), 1)
+        A("div", null, z((f = o.emoji) == null ? void 0 : f.name), 1)
       ]);
     };
   }
-}, pt = { class: "d-emoji-picker" }, kt = { class: "d-emoji-picker--header" }, gt = { class: "d-emoji-picker--body" }, yt = { class: "d-emoji-picker--footer" }, Ft = {
+}, pt = { class: "d-emoji-picker" }, _t = { class: "d-emoji-picker--header" }, Et = { class: "d-emoji-picker--body" }, kt = { class: "d-emoji-picker--footer" }, Ot = {
   __name: "emoji_picker",
   props: {
     /**
@@ -826,65 +826,6 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     customEmojis: {
       type: Array
     },
-    /**
-       * The label for the add emoji button
-       * required false because it is still experimental
-       * @type {String}
-       * @example
-       * <dt-emoji-picker :addEmojiLabel="'Add emoji'" />
-       */
-    addEmojiLabel: {
-      type: String,
-      required: !1,
-      default: "Add emoji"
-    },
-    /**
-     * 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', 'Custom']" />
-     */
-    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
@@ -899,22 +840,12 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
       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
-    },
-    /**
-     * Sets the search query that filters emojis.
-     * @type {String}
-     * @example
-     * <dt-emoji-picker search-query="smile" />
-     */
+    
+       * Sets the search query that filters emojis.
+       * @type {String}
+       * @example
+       * <dt-emoji-picker search-query="smile" />
+       */
     searchQuery: {
       type: String,
       default: ""
@@ -961,103 +892,114 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     "add-emoji"
   ],
   setup(o, { emit: g }) {
-    const y = o, n = g, u = k(y.searchQuery.value), T = k(null), p = k({}), j = k(0), f = M(() => {
+    const y = o, l = g, f = S(y.searchQuery.value), R = S(null), L = S({}), I = S(0), m = M(() => {
       var r;
       return ((r = y.recentlyUsedEmojis) == null ? void 0 : r.length) > 0;
-    }), i = M(() => {
+    }), a = M(() => {
       var r;
       return ((r = y.customEmojis) == null ? void 0 : r.length) > 0;
-    });
-    N(
+    }), d = new Ve(), D = [
+      d.$t("DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL"),
+      d.$t("DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL"),
+      d.$t("DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL"),
+      d.$t("DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL"),
+      d.$t("DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL"),
+      d.$t("DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL"),
+      d.$t("DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL"),
+      d.$t("DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL"),
+      d.$t("DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL"),
+      d.$t("DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL")
+    ], F = d.$t("DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL"), w = d.$t("DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL"), t = d.$t("DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL"), e = d.$t("DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL"), n = d.$t("DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL");
+    K(
       () => y.searchQuery,
       (r) => {
-        u.value = r;
+        f.value = r;
       }
     );
-    function S(r) {
-      u.value = "", p.value = r, p.value = { ...p.value, tabId: r };
+    function v(r) {
+      f.value = "", L.value = { ...L.value, tabId: r };
     }
-    function K(r) {
-      j.value = r;
+    function c(r) {
+      I.value = r;
     }
-    function A(r) {
-      T.value = r;
+    function T(r) {
+      R.value = r;
     }
-    return (r, e) => (h(), R("div", pt, [
-      _("div", kt, [
-        O(We, {
+    return (r, i) => (E(), j("div", pt, [
+      A("div", _t, [
+        B(We, {
           ref: "tabsetRef",
-          "emoji-filter": u.value,
-          "show-custom-emojis-tab": i.value,
-          "show-recently-used-tab": f.value,
-          "scroll-into-tab": j.value,
-          "tabset-labels": o.tabSetLabels,
-          onFocusSkinSelector: e[0] || (e[0] = (t) => r.$refs.skinSelectorRef.focusSkinSelector()),
-          onFocusSearchInput: e[1] || (e[1] = (t) => o.showSearch ? r.$refs.searchInputRef.focusSearchInput() : r.$refs.emojiSelectorRef.focusEmojiSelector()),
-          onSelectedTabset: S,
-          onKeydown: e[2] || (e[2] = P((t) => n("close"), ["esc"]))
-        }, null, 8, ["emoji-filter", "show-custom-emojis-tab", "show-recently-used-tab", "scroll-into-tab", "tabset-labels"])
+          "emoji-filter": f.value,
+          "show-custom-emojis-tab": a.value,
+          "show-recently-used-tab": m.value,
+          "scroll-into-tab": I.value,
+          "tab-set-labels": D,
+          onFocusSkinSelector: i[0] || (i[0] = (_) => r.$refs.skinSelectorRef.focusSkinSelector()),
+          onFocusSearchInput: i[1] || (i[1] = (_) => o.showSearch ? r.$refs.searchInputRef.focusSearchInput() : r.$refs.emojiSelectorRef.focusEmojiSelector()),
+          onSelectedTabset: v,
+          onKeydown: i[2] || (i[2] = J((_) => l("close"), ["esc"]))
+        }, null, 8, ["emoji-filter", "show-custom-emojis-tab", "show-recently-used-tab", "scroll-into-tab"])
       ]),
-      _("div", gt, [
-        o.showSearch ? (h(), Z(He, {
+      A("div", Et, [
+        o.showSearch ? (E(), Z(ze, {
           key: 0,
           ref: "searchInputRef",
-          modelValue: u.value,
-          "onUpdate:modelValue": e[3] || (e[3] = (t) => u.value = t),
-          "search-placeholder-label": o.searchPlaceholderLabel,
-          onSelectFirstEmoji: e[4] || (e[4] = (t) => n("selected-emoji", T.value)),
-          onFocusTabset: e[5] || (e[5] = (t) => r.$refs.tabsetRef.focusTabset()),
-          onFocusEmojiSelector: e[6] || (e[6] = (t) => r.$refs.emojiSelectorRef.focusEmojiSelector()),
-          onKeydown: e[7] || (e[7] = P((t) => n("close"), ["esc"]))
+          modelValue: f.value,
+          "onUpdate:modelValue": i[3] || (i[3] = (_) => f.value = _),
+          "search-placeholder-label": k(F),
+          onSelectFirstEmoji: i[4] || (i[4] = (_) => l("selected-emoji", R.value)),
+          onFocusTabset: i[5] || (i[5] = (_) => r.$refs.tabsetRef.focusTabset()),
+          onFocusEmojiSelector: i[6] || (i[6] = (_) => r.$refs.emojiSelectorRef.focusEmojiSelector()),
+          onKeydown: i[7] || (i[7] = J((_) => l("close"), ["esc"]))
         }, null, 8, ["modelValue", "search-placeholder-label"])) : Y("", !0),
-        O(nt, {
+        B(nt, {
           ref: "emojiSelectorRef",
-          "emoji-filter": u.value,
+          "emoji-filter": f.value,
           "skin-tone": o.skinTone,
-          "tabset-labels": o.tabSetLabels,
-          "search-results-label": o.searchResultsLabel,
-          "search-no-results-label": o.searchNoResultsLabel,
+          "tabset-labels": D,
+          "search-results-label": k(w),
+          "search-no-results-label": k(t),
           "recently-used-emojis": o.recentlyUsedEmojis,
           "custom-emojis": o.customEmojis,
-          "selected-tabset": p.value,
-          onScrollIntoTab: K,
-          onHighlightedEmoji: A,
-          onSelectedEmoji: e[8] || (e[8] = (t) => n("selected-emoji", t)),
-          onFocusSkinSelector: e[9] || (e[9] = (t) => r.$refs.skinSelectorRef.focusSkinSelector()),
-          onFocusSearchInput: e[10] || (e[10] = (t) => o.showSearch ? r.$refs.searchInputRef.focusSearchInput() : r.$refs.tabsetRef.focusTabset()),
-          onKeydown: e[11] || (e[11] = P((t) => n("close"), ["esc"])),
-          onScrollBottomReached: e[12] || (e[12] = (t) => n("scroll-bottom-reached"))
-        }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "custom-emojis", "selected-tabset"])
+          "selected-tabset": L.value,
+          onScrollIntoTab: c,
+          onHighlightedEmoji: T,
+          onSelectedEmoji: i[8] || (i[8] = (_) => l("selected-emoji", _)),
+          onFocusSkinSelector: i[9] || (i[9] = (_) => r.$refs.skinSelectorRef.focusSkinSelector()),
+          onFocusSearchInput: i[10] || (i[10] = (_) => o.showSearch ? r.$refs.searchInputRef.focusSearchInput() : r.$refs.tabsetRef.focusTabset()),
+          onKeydown: i[11] || (i[11] = J((_) => l("close"), ["esc"])),
+          onScrollBottomReached: i[12] || (i[12] = (_) => l("scroll-bottom-reached"))
+        }, null, 8, ["emoji-filter", "skin-tone", "search-results-label", "search-no-results-label", "recently-used-emojis", "custom-emojis", "selected-tabset"])
       ]),
-      _("div", yt, [
-        i.value && !T.value ? (h(), Z($(me), {
+      A("div", kt, [
+        a.value && !R.value ? (E(), Z(k(de), {
           key: 0,
           importance: "outlined",
-          "aria-label": o.addEmojiLabel,
+          "aria-label": k(n),
           class: "d-emoji-picker__add-emoji",
-          onClick: e[13] || (e[13] = (t) => n("add-emoji"))
+          onClick: i[13] || (i[13] = (_) => l("add-emoji"))
         }, {
-          default: U(() => [
-            de(H(o.addEmojiLabel), 1)
+          default: N(() => [
+            fe(z(k(n)), 1)
           ]),
           _: 1
         }, 8, ["aria-label"])) : Y("", !0),
-        O(ht, { emoji: T.value }, null, 8, ["emoji"]),
-        O(mt, {
+        B(ht, { emoji: R.value }, null, 8, ["emoji"]),
+        B(mt, {
           ref: "skinSelectorRef",
-          "is-hovering": !!T.value,
-          "skin-selector-button-tooltip-label": o.skinSelectorButtonTooltipLabel,
+          "is-hovering": !!R.value,
+          "skin-selector-button-tooltip-label": k(e),
           "skin-tone": o.skinTone,
-          onSkinTone: e[14] || (e[14] = (t) => n("skin-tone", t)),
-          onFocusTabset: e[15] || (e[15] = (t) => r.$refs.tabsetRef.focusTabset()),
-          onFocusLastEmoji: e[16] || (e[16] = (t) => r.$refs.emojiSelectorRef.focusLastEmoji()),
-          onKeydown: e[17] || (e[17] = P((t) => n("close"), ["esc"]))
+          onSkinTone: i[14] || (i[14] = (_) => l("skin-tone", _)),
+          onFocusTabset: i[15] || (i[15] = (_) => r.$refs.tabsetRef.focusTabset()),
+          onFocusLastEmoji: i[16] || (i[16] = (_) => r.$refs.emojiSelectorRef.focusLastEmoji()),
+          onKeydown: i[17] || (i[17] = J((_) => l("close"), ["esc"]))
         }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
       ])
     ]));
   }
 };
 export {
-  Ft as default
+  Ot as default
 };
 //# sourceMappingURL=emoji-picker.js.map