@dialpad/dialtone 9.137.0 → 9.138.0

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

@@ -1,5 +1,5 @@
-import { ref as S, onMounted as re, createElementBlock as j, openBlock as E, 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, createCommentVNode as Y, toDisplayString as z, withDirectives as te, 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 { ref as S, onMounted as re, createElementBlock as I, openBlock as E, createVNode as F, 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, createCommentVNode as Y, toDisplayString as z, withDirectives as te, vShow as oe, normalizeClass as ce, watchEffect as ae, createTextVNode as fe } from "vue";
+import { DtIconSearch as je, DtIconClose as Ie, DtIconClock as Re, DtIconSatisfied as Ae, DtIconLivingThing as $e, DtIconFood as we, DtIconObject as Oe, DtIconTransportation as Ce, DtIconLightbulb as De, DtIconHeart as Be, DtIconFlag as Fe, 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";
@@ -22,7 +22,7 @@ const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ze = {
     }
   },
   emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
-  setup(o, { expose: g, emit: y }) {
+  setup(t, { expose: g, emit: y }) {
     const l = y, f = S(null);
     function R() {
       l("update:modelValue", ""), L();
@@ -34,29 +34,29 @@ const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ze = {
       L();
     }), g({
       focusSearchInput: L
-    }), (I, m) => (E(), j("div", He, [
-      B(k(Ne), {
+    }), (j, m) => (E(), I("div", He, [
+      F(k(Ne), {
         id: "searchInput",
         ref_key: "searchInput",
         ref: f,
-        placeholder: o.searchPlaceholderLabel,
-        "model-value": o.modelValue,
-        "onUpdate:modelValue": m[0] || (m[0] = (a) => I.$emit("update:modelValue", a)),
+        placeholder: t.searchPlaceholderLabel,
+        "model-value": t.modelValue,
+        "onUpdate:modelValue": m[0] || (m[0] = (a) => j.$emit("update:modelValue", a)),
         onKeydown: [
-          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"]))
+          m[1] || (m[1] = J((a) => j.$emit("focus-tabset"), ["up"])),
+          m[2] || (m[2] = J(ue((a) => j.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
+          m[3] || (m[3] = J((a) => j.$emit("select-first-emoji"), ["enter"]))
         ]
       }, ye({
         leftIcon: N(() => [
-          B(k(Ie), { size: "200" })
+          F(k(je), { size: "200" })
         ]),
         _: 2
       }, [
-        o.modelValue.length > 0 ? {
+        t.modelValue.length > 0 ? {
           name: "rightIcon",
           fn: N(() => [
-            B(k(de), {
+            F(k(de), {
               importance: "clear",
               size: "xs",
               class: "d-emoji-picker__search-x-button",
@@ -65,7 +65,7 @@ const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ze = {
               onClick: R
             }, {
               icon: N(() => [
-                B(k(je), { size: "200" })
+                F(k(Ie), { size: "200" })
               ]),
               _: 1
             })
@@ -124,8 +124,8 @@ const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ze = {
     "focus-search-input",
     "focus-skin-selector"
   ],
-  setup(o, { expose: g, emit: y }) {
-    const l = o, f = y, R = [
+  setup(t, { expose: g, emit: y }) {
+    const l = t, f = y, R = [
       { label: l.tabSetLabels[0], icon: Re },
       { label: l.tabSetLabels[1], icon: Ae },
       { label: l.tabSetLabels[2], icon: $e },
@@ -133,52 +133,52 @@ const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ze = {
       { 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[7], icon: Be },
+      { label: l.tabSetLabels[8], icon: Fe },
       { 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) => ({
+      const o = l.showRecentlyUsedTab ? R : R.slice(1);
+      return l.showCustomEmojisTab || o.pop(), o.map((e, n) => ({
         ...e,
         // IDs on dt-tab component need to be on string
         id: (n + 1).toString(),
         panelId: (n + 1).toString()
       }));
-    }), I = M(() => l.emojiFilter.length > 0), m = S("1"), a = S([]);
+    }), j = M(() => l.emojiFilter.length > 0), m = S("1"), a = S([]);
     K(
       () => l.scrollIntoTab,
       () => {
-        I.value || (m.value = (l.scrollIntoTab + 1).toString());
+        j.value || (m.value = (l.scrollIntoTab + 1).toString());
       }
     ), K(
-      I,
+      j,
       () => {
-        I.value && (m.value = null);
+        j.value && (m.value = null);
       }
     );
-    function d(t) {
-      const e = parseInt(t);
-      m.value = t, f("selected-tabset", e);
+    function d(o) {
+      const e = parseInt(o);
+      m.value = o, f("selected-tabset", e);
     }
-    function D(t) {
-      a.value.push(Me(t.$el));
+    function D(o) {
+      a.value.push(Me(o.$el));
     }
-    function F() {
+    function B() {
       a.value[0].focus();
     }
-    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");
+    function w(o, e) {
+      o.key === "Enter" && (d(e), a.value[e - 1].blur()), o.key === "Tab" && (o.preventDefault(), o.shiftKey ? f("focus-skin-selector") : f("focus-search-input")), o.key === "ArrowDown" && f("focus-search-input");
     }
     return g({
-      focusTabset: F
-    }), (t, e) => (E(), j("div", qe, [
-      B(k(Pe), {
+      focusTabset: B
+    }), (o, e) => (E(), I("div", qe, [
+      F(k(Pe), {
         selected: m.value,
         size: "sm",
         "tab-list-class": "d-emoji-picker__tabset-list"
       }, {
         tabs: N(() => [
-          (E(!0), j(W, null, G(L.value, (n, v) => (E(), Z(k(Ue), {
+          (E(!0), I(W, null, G(L.value, (n, v) => (E(), Z(k(Ue), {
             id: n.id,
             key: n.id,
             ref_for: !0,
@@ -204,67 +204,67 @@ const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ze = {
   }
 };
 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));
+  const t = S([]), g = S([]), y = S(!1), l = S(!0);
+  function f(o, e) {
+    a(o, e - 1) || (t.value[o - 1] ? a(o - 1, t.value[o - 1].length - 1) : a(t.value.length - 1, t.value[t.value.length - 1].length - 1));
   }
-  function R(t, e) {
-    a(t, e + 1) || a(t + 1, 0) || a(0, 0);
+  function R(o, e) {
+    a(o, e + 1) || a(o + 1, 0) || a(0, 0);
   }
-  function L(t, e) {
+  function L(o, e) {
     a(0, e - 1) || a(0, g.value.length - 1);
   }
-  function I(t, e) {
+  function j(o, e) {
     a(0, e + 1) || a(0, 0);
   }
-  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 m(o, e, n) {
+    y.value ? o === "left" ? L(e, n) : o === "right" && j(e, n) : o === "left" ? f(e, n) : o === "right" && R(e, n);
   }
-  function a(t, e) {
+  function a(o, 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];
+    const n = y.value ? (v = g.value) == null ? void 0 : v[e] : (T = (c = t.value) == null ? void 0 : c[o]) == null ? void 0 : T[e];
     return n ? (n.focus(), !0) : !1;
   }
-  function d(t, e, n) {
-    o.value[e] || (o.value[e] = []), o.value[e][n] = t;
+  function d(o, e, n) {
+    t.value[e] || (t.value[e] = []), t.value[e][n] = o;
   }
-  function D(t, e) {
-    g.value[e] = t;
+  function D(o, e) {
+    g.value[e] = o;
   }
-  function F(t, e) {
+  function B(o, e) {
     var n;
-    if (l.value = !1, t === H.ARROW_UP) {
+    if (l.value = !1, o === 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 (t === H.ARROW_DOWN && !a(0, e + $)) {
+    if (o === 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);
     }
-    t === H.ARROW_LEFT && m("left", 0, e), t === H.ARROW_RIGHT && m("right", 0, e);
+    o === H.ARROW_LEFT && m("left", 0, e), o === H.ARROW_RIGHT && m("right", 0, e);
   }
-  function w(t, e, n) {
+  function w(o, e, n) {
     var v, c;
-    if (t === "ArrowUp") {
+    if (o === "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);
+        const r = $ - t.value[t.value.length - 1].length % $, i = t.value[t.value.length - 1].length + r - ($ - T);
+        a(t.value.length - 1, i) || a(t.value.length - 1, t.value[t.value.length - 1].length - 1);
         return;
       }
       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);
+        const r = e - 1 < 0 ? 0 : e - 1, i = t.value[r].length, _ = i - i % $ + T;
+        a(r, _) || a(e - 1, t.value[e - 1].length - 1);
       }
     }
-    if (t === "ArrowDown" && !a(e, n + $)) {
+    if (o === "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);
+      (c = (v = t.value) == null ? void 0 : v[e]) != null && c[n + ($ - T)] ? a(e, t.value[e].length - 1) : a(e + 1, T) || a(0, T) || a(0, t.value[0].length - 1);
     }
-    t === "ArrowLeft" && m("left", e, n), t === "ArrowRight" && m("right", e, n);
+    o === "ArrowLeft" && m("left", e, n), o === "ArrowRight" && m("right", e, n);
   }
   return {
     emojiFilteredRefs: g,
@@ -273,7 +273,7 @@ function Ge() {
     setEmojiRef: d,
     setFilteredRef: D,
     focusEmoji: a,
-    handleArrowNavigationFiltered: F,
+    handleArrowNavigationFiltered: B,
     handleArrowNavigation: w
   };
 }
@@ -386,17 +386,17 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
       */
     "focus-search-input"
   ],
-  setup(o, { expose: g, emit: y }) {
-    const l = o, f = y, {
+  setup(t, { expose: g, emit: y }) {
+    const l = t, f = y, {
       emojiFilteredRefs: R,
       isFiltering: L,
-      hoverFirstEmoji: I,
+      hoverFirstEmoji: j,
       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(() => {
+      handleArrowNavigation: B
+    } = Ge(), w = S(null), o = 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(() => {
@@ -414,7 +414,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     ]), _ = me(() => {
       R.value = [], se();
     }), le = () => {
-      const s = t.value;
+      const s = o.value;
       s.scrollTop + s.clientHeight >= s.scrollHeight && f("scroll-bottom-reached");
     };
     K(i, () => {
@@ -441,7 +441,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
       { deep: !0 }
     );
     function ee(s, u = !1) {
-      I.value = u, f("highlighted-emoji", s);
+      j.value = u, f("highlighted-emoji", s);
     }
     function se() {
       const s = l.emojiFilter.toLowerCase();
@@ -467,16 +467,16 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     function q(s, u = !0) {
       const p = v.value[s - 1].ref.value[0];
       x(() => {
-        const b = t.value, U = s === 1 ? 0 : p.offsetTop - 15;
+        const b = o.value, U = s === 1 ? 0 : p.offsetTop - 15;
         b.scrollTop = U, u && d(s - 1, 0);
       });
     }
     function he() {
-      const s = t.value;
+      const s = o.value;
       s.scrollTop = 0;
     }
     function pe() {
-      t.value.addEventListener("scroll", le);
+      o.value.addEventListener("scroll", le);
     }
     function _e() {
       e.value = new IntersectionObserver(async (s) => {
@@ -485,7 +485,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
           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);
         });
-      }), e.value.observe(w.value), Array.from(t.value.children).forEach((s, u) => {
+      }), e.value.observe(w.value), Array.from(o.value.children).forEach((s, u) => {
         e.value.observe(s), s.dataset.index = u;
       });
     }
@@ -504,7 +504,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
       }
     }, ke = (s, u, h, p) => {
       if (s.preventDefault(), Object.values(H).includes(s.key)) {
-        F(s.key, u, h);
+        B(s.key, u, h);
         return;
       }
       switch (s.key) {
@@ -531,18 +531,18 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     return re(() => {
       _e(), pe();
     }), Te(() => {
-      e.value.disconnect(), t.value.removeEventListener("scroll", le);
+      e.value.disconnect(), o.value.removeEventListener("scroll", le);
     }), g({
       focusEmojiSelector: Se,
       focusLastEmoji: ge
-    }), (s, u) => (E(), j("div", Ye, [
+    }), (s, u) => (E(), I("div", Ye, [
       A("div", {
         id: "d-emoji-picker-list",
         ref_key: "listRef",
-        ref: t,
+        ref: o,
         class: "d-emoji-picker__list"
       }, [
-        o.emojiFilter ? (E(), j("p", Qe, z(r.value.length > 0 ? o.searchResultsLabel : o.searchNoResultsLabel), 1)) : (E(), j("div", {
+        t.emojiFilter ? (E(), I("p", Qe, z(r.value.length > 0 ? t.searchResultsLabel : t.searchNoResultsLabel), 1)) : (E(), I("div", {
           key: 1,
           ref_key: "tabCategoryRef",
           ref: w,
@@ -550,15 +550,15 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
         }, [
           A("p", null, z(c.value), 1)
         ], 512)),
-        (E(!0), j(W, null, G(v.value, (h, p) => te((E(), j("div", {
+        (E(!0), I(W, null, G(v.value, (h, p) => te((E(), I("div", {
           key: p,
           ref_for: !0,
           ref: h.ref,
           class: "d-emoji-picker__alignment"
         }, [
-          p ? (E(), j("p", Xe, z(h.label), 1)) : Y("", !0),
+          p ? (E(), I("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", {
+            (E(!0), I(W, null, G(k(C)[T.value[p] + t.skinTone] ? k(C)[T.value[p] + t.skinTone] : k(C)[T.value[p]], (b, U) => (E(), I("button", {
               key: b.shortname,
               ref_for: !0,
               ref: (O) => {
@@ -584,11 +584,11 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
             ], 40, xe))), 128))
           ])
         ])), [
-          [oe, !o.emojiFilter]
+          [oe, !t.emojiFilter]
         ])), 128)),
-        o.emojiFilter ? (E(), j("div", tt, [
+        t.emojiFilter ? (E(), I("div", tt, [
           A("div", ot, [
-            (E(!0), j(W, null, G(r.value, (h, p) => (E(), j("button", {
+            (E(!0), I(W, null, G(r.value, (h, p) => (E(), I("button", {
               key: h.shortname,
               ref_for: !0,
               ref: (b) => {
@@ -597,7 +597,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
               type: "button",
               "aria-label": h.name,
               class: ce({
-                "hover-emoji": p === 0 && k(I)
+                "hover-emoji": p === 0 && k(j)
               }),
               onClick: (b) => X(h, b),
               onFocusin: (b) => P(h),
@@ -650,8 +650,8 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     "focus-tabset",
     "focus-last-emoji"
   ],
-  setup(o, { expose: g, emit: y }) {
-    const l = o, f = y, R = [
+  setup(t, { expose: g, emit: y }) {
+    const l = t, f = y, R = [
       {
         name: ":wave_tone1:",
         unicode_output: "1f44b-1f3fb",
@@ -688,7 +688,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
         skinTone: V.DEFAULT,
         skinCode: ""
       }
-    ], L = S(!1), I = S(null), m = S([]);
+    ], L = S(!1), j = S(null), m = S([]);
     ae(
       () => l.isHovering && (L.value = !1)
     );
@@ -697,13 +697,13 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     function D(n) {
       m.value.push(n);
     }
-    function F() {
-      I.value.focus();
+    function B() {
+      j.value.focus();
     }
     function w(n) {
-      d.value = n, L.value = !1, f("skin-tone", n.skinTone), x(() => F());
+      d.value = n, L.value = !1, f("skin-tone", n.skinTone), x(() => B());
     }
-    const t = (n, v, c) => {
+    const o = (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"));
     };
@@ -711,10 +711,10 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
       L.value = !L.value, x(() => m.value[0].focus());
     }
     return g({
-      focusSkinSelector: F
-    }), (n, v) => (E(), j("div", it, [
+      focusSkinSelector: B
+    }), (n, v) => (E(), I("div", it, [
       te(A("div", at, [
-        (E(), j(W, null, G(R, (c, T) => A("button", {
+        (E(), I(W, null, G(R, (c, T) => A("button", {
           ref_for: !0,
           ref: (r) => {
             r && D(r);
@@ -723,7 +723,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
           class: ce({
             selected: d.value.skinCode === c.skinCode
           }),
-          onKeydown: (r) => t(r, c, T),
+          onKeydown: (r) => o(r, c, T),
           onClick: (r) => w(c)
         }, [
           A("img", {
@@ -738,15 +738,15 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
         [oe, L.value]
       ]),
       te(A("div", ct, [
-        B(k(Je), { placement: "top-end" }, {
+        F(k(Je), { placement: "top-end" }, {
           anchor: N(() => [
             A("button", {
               ref_key: "skinSelectorRef",
-              ref: I,
-              "aria-label": o.skinSelectorButtonTooltipLabel,
+              ref: j,
+              "aria-label": t.skinSelectorButtonTooltipLabel,
               tabindex: "-1",
               onClick: e,
-              onKeydown: v[0] || (v[0] = (c) => t(c))
+              onKeydown: v[0] || (v[0] = (c) => o(c))
             }, [
               A("img", {
                 class: "d-icon d-icon--size-500",
@@ -758,7 +758,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
             ], 40, ft)
           ]),
           default: N(() => [
-            fe(z(o.skinSelectorButtonTooltipLabel) + " ", 1)
+            fe(z(t.skinSelectorButtonTooltipLabel) + " ", 1)
           ]),
           _: 1
         })
@@ -780,22 +780,22 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
       default: null
     }
   },
-  setup(o) {
+  setup(t) {
     function g(y) {
       return y.date_added ? y.image : `${Q + y.unicode_character}.png`;
     }
     return (y, l) => {
       var f;
-      return E(), j("div", vt, [
-        o.emoji ? (E(), j("img", {
+      return E(), I("div", vt, [
+        t.emoji ? (E(), I("img", {
           key: 0,
           class: "d-icon d-icon--size-500",
-          alt: o.emoji.name,
-          "aria-label": o.emoji.name,
-          title: o.emoji.name,
-          src: g(o.emoji)
+          alt: t.emoji.name,
+          "aria-label": t.emoji.name,
+          title: t.emoji.name,
+          src: g(t.emoji)
         }, null, 8, bt)) : Y("", !0),
-        A("div", null, z((f = o.emoji) == null ? void 0 : f.name), 1)
+        A("div", null, z((f = t.emoji) == null ? void 0 : f.name), 1)
       ]);
     };
   }
@@ -859,6 +859,16 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     showSearch: {
       type: Boolean,
       default: !0
+    },
+    /**
+       * Shows the add emoji button in the footer when no emoji is highlighted
+       * @type {Boolean}
+       * @example
+       * <dt-emoji-picker :show-add-emoji-button="true" />
+       */
+    showAddEmojiButton: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: [
@@ -891,8 +901,8 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
      */
     "add-emoji"
   ],
-  setup(o, { emit: g }) {
-    const y = o, l = g, f = S(y.searchQuery.value), R = S(null), L = S({}), I = S(0), m = M(() => {
+  setup(t, { emit: g }) {
+    const y = t, l = g, f = S(y.searchQuery.value), R = S(null), L = S({}), j = S(0), m = M(() => {
       var r;
       return ((r = y.recentlyUsedEmojis) == null ? void 0 : r.length) > 0;
     }), a = M(() => {
@@ -909,7 +919,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
       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");
+    ], B = d.$t("DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL"), w = d.$t("DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL"), o = 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) => {
@@ -920,59 +930,59 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
       f.value = "", L.value = { ...L.value, tabId: r };
     }
     function c(r) {
-      I.value = r;
+      j.value = r;
     }
     function T(r) {
       R.value = r;
     }
-    return (r, i) => (E(), j("div", pt, [
+    return (r, i) => (E(), I("div", pt, [
       A("div", _t, [
-        B(We, {
+        F(We, {
           ref: "tabsetRef",
           "emoji-filter": f.value,
           "show-custom-emojis-tab": a.value,
           "show-recently-used-tab": m.value,
-          "scroll-into-tab": I.value,
+          "scroll-into-tab": j.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()),
+          onFocusSearchInput: i[1] || (i[1] = (_) => t.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"])
       ]),
       A("div", Et, [
-        o.showSearch ? (E(), Z(ze, {
+        t.showSearch ? (E(), Z(ze, {
           key: 0,
           ref: "searchInputRef",
           modelValue: f.value,
           "onUpdate:modelValue": i[3] || (i[3] = (_) => f.value = _),
-          "search-placeholder-label": k(F),
+          "search-placeholder-label": k(B),
           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),
-        B(nt, {
+        F(nt, {
           ref: "emojiSelectorRef",
           "emoji-filter": f.value,
-          "skin-tone": o.skinTone,
+          "skin-tone": t.skinTone,
           "tabset-labels": D,
           "search-results-label": k(w),
-          "search-no-results-label": k(t),
-          "recently-used-emojis": o.recentlyUsedEmojis,
-          "custom-emojis": o.customEmojis,
+          "search-no-results-label": k(o),
+          "recently-used-emojis": t.recentlyUsedEmojis,
+          "custom-emojis": t.customEmojis,
           "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()),
+          onFocusSearchInput: i[10] || (i[10] = (_) => t.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"])
       ]),
       A("div", kt, [
-        a.value && !R.value ? (E(), Z(k(de), {
+        t.showAddEmojiButton && !R.value ? (E(), Z(k(de), {
           key: 0,
           importance: "outlined",
           "aria-label": k(n),
@@ -984,12 +994,12 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
           ]),
           _: 1
         }, 8, ["aria-label"])) : Y("", !0),
-        B(ht, { emoji: R.value }, null, 8, ["emoji"]),
-        B(mt, {
+        F(ht, { emoji: R.value }, null, 8, ["emoji"]),
+        F(mt, {
           ref: "skinSelectorRef",
           "is-hovering": !!R.value,
           "skin-selector-button-tooltip-label": k(e),
-          "skin-tone": o.skinTone,
+          "skin-tone": t.skinTone,
           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()),