@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/emoji-picker.cjs

@@ -1,2 +1,1278 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),te=require("./input.cjs"),P=require("./icon.cjs"),W=require("../chunks/tab-at7WWglk.js"),T=require("@dialpad/dialtone-emojis"),oe=require("./tooltip.cjs");require("./constants.cjs");require("./utils.cjs");require("../chunks/input-0Uksk4DP.js");require("./validators.cjs");require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./validation-messages.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("./button.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("./lazy-show.cjs");const le={class:"d-emoji-picker__search d-emoji-picker__alignment"},ne=["onKeydown"],se={__name:"emoji_search",props:{searchPlaceholderLabel:{type:String,required:!0},modelValue:{type:String,default:""}},emits:["update:modelValue","focus-emoji-selector","focus-tabset","select-first-emoji"],setup(l,{expose:g,emit:R}){const i=R,u=e.ref(null);function E(){i("update:modelValue",""),h()}function h(){u.value.focus()}return e.onMounted(()=>{h()}),g({focusSearchInput:h}),(y,f)=>(e.openBlock(),e.createElementBlock("div",le,[e.createVNode(e.unref(te.DtInput),{id:"searchInput",ref_key:"searchInput",ref:u,placeholder:l.searchPlaceholderLabel,"model-value":l.modelValue,"onUpdate:modelValue":f[0]||(f[0]=s=>y.$emit("update:modelValue",s)),onKeydown:[f[1]||(f[1]=e.withKeys(s=>y.$emit("focus-tabset"),["up"])),f[2]||(f[2]=e.withKeys(e.withModifiers(s=>y.$emit("focus-emoji-selector"),["prevent"]),["down"])),f[3]||(f[3]=e.withKeys(s=>y.$emit("select-first-emoji"),["enter"]))]},e.createSlots({leftIcon:e.withCtx(()=>[e.createVNode(e.unref(P.DtIcon),{name:"search",size:"200"})]),_:2},[l.modelValue.length>0?{name:"rightIcon",fn:e.withCtx(()=>[e.createElementVNode("button",{class:"d-emoji-picker__search-button",onClick:E,onKeydown:e.withKeys(E,["enter"])},[e.createVNode(e.unref(P.DtIcon),{name:"close"})],40,ne)]),key:"0"}:void 0]),1032,["placeholder","model-value"])]))}},re={class:"d-emoji-picker__tabset"},ie={__name:"emoji_tabset",props:{showRecentlyUsedTab:{type:Boolean,default:!1},scrollIntoTab:{type:Number,required:!0},isScrolling:{type:Boolean,default:!1},emojiFilter:{type:String,default:""},tabsetLabels:{type:Array,required:!0}},emits:["selected-tabset","focus-search-input","focus-skin-selector"],setup(l,{expose:g,emit:R}){const i=l,u=R,E=[{label:A.MOST_RECENTLY_USED,icon:"clock"},{label:A.SMILEYS_AND_PEOPLE,icon:"satisfied"},{label:A.NATURE,icon:"living-thing"},{label:A.FOOD,icon:"food"},{label:A.ACTIVITY,icon:"object"},{label:A.TRAVEL,icon:"transportation"},{label:A.OBJECTS,icon:"lightbulb"},{label:A.SYMBOLS,icon:"heart"},{label:A.FLAGS,icon:"flag"}],h=e.computed(()=>(i.showRecentlyUsedTab?E:E.slice(1)).map((o,a)=>({...o,label:i.tabsetLabels[a],id:(a+1).toString(),panelId:(a+1).toString()}))),y=e.computed(()=>i.emojiFilter.length>0),f=e.ref("1"),{isScrolling:s}=e.toRefs(i),k=e.ref([]);e.watch(()=>i.scrollIntoTab,()=>{!s.value&&!y.value&&(f.value=(i.scrollIntoTab+1).toString())}),e.watch(y,()=>{y.value&&(f.value=null)});function L(t){s.value||(f.value=t),u("selected-tabset",t)}function I(t){k.value.push(t.$el)}function w(){k.value[0].focus()}function n(t,o){t.key==="Enter"&&(L(o),k.value[o-1].blur()),t.key==="Tab"&&(t.preventDefault(),t.shiftKey?u("focus-skin-selector"):u("focus-search-input")),t.key==="ArrowDown"&&u("focus-search-input")}return g({focusTabset:w}),(t,o)=>(e.openBlock(),e.createElementBlock("div",re,[e.createVNode(e.unref(W.D),{"tab-list-class":"d-emoji-picker__tabset-list",selected:f.value},{tabs:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(a,d)=>(e.openBlock(),e.createBlock(e.unref(W.a),{id:a.id,ref_for:!0,ref:b=>{b&&I(b)},key:a.id,"panel-id":a.panelId,label:a.label,"aria-controls":"d-emoji-picker-list",tabindex:d+1,onClickCapture:e.withModifiers(b=>L(a.id),["stop"]),onKeydown:b=>n(b,a.id)},{default:e.withCtx(()=>[e.createVNode(e.unref(P.DtIcon),{size:"400",name:a.icon},null,8,["name"])]),_:2},1032,["id","panel-id","label","tabindex","onClickCapture","onKeydown"]))),128))]),_:1},8,["selected"])]))}},C={ARROW_UP:"ArrowUp",ARROW_DOWN:"ArrowDown",ARROW_LEFT:"ArrowLeft",ARROW_RIGHT:"ArrowRight"},V="https://static.dialpadcdn.com/joypixels/png/unicode/32/",_=9,B={DEFAULT:"Default",LIGHT:"Light",MEDIUM_LIGHT:"MediumLight",MEDIUM:"Medium",MEDIUM_DARK:"MediumDark",DARK:"Dark"},A={MOST_RECENTLY_USED:"Most recently used",SMILEYS_AND_PEOPLE:"Smileys and people",NATURE:"Nature",FOOD:"Food",ACTIVITY:"Activity",TRAVEL:"Travel",OBJECTS:"Objects",SYMBOLS:"Symbols",FLAGS:"Flags"};function ae(){const l=e.ref([]),g=e.ref([]),R=e.ref(!1),i=e.ref(!0);function u(n,t){s(n,t-1)||(l.value[n-1]?s(n-1,l.value[n-1].length-1):s(l.value.length-1,l.value[l.value.length-1].length-1))}function E(n,t){s(n,t+1)||s(n+1,0)||s(0,0)}function h(n,t){s(0,t-1)||s(0,g.value.length-1)}function y(n,t){s(0,t+1)||s(0,0)}function f(n,t,o){R.value?n==="left"?h(t,o):n==="right"&&y(t,o):n==="left"?u(t,o):n==="right"&&E(t,o)}function s(n,t){var a,d,b;const o=R.value?(a=g.value)==null?void 0:a[t]:(b=(d=l.value)==null?void 0:d[n])==null?void 0:b[t];return o?(o.focus(),!0):!1}function k(n,t,o){l.value[t]||(l.value[t]=[]),l.value[t][o]=n}function L(n,t){g.value[t]=n}function I(n,t){var o;if(i.value=!1,n===C.ARROW_UP){const a=t%_;if(!s(0,t-_)){const d=g.value.length-g.value.length%_+a;s(0,d),s(0,d)||s(0,g.value.length-1)}}if(n===C.ARROW_DOWN&&!s(0,t+_)){const a=t%_;(o=g.value)!=null&&o[t+(_-a)]?s(0,g.value.length-1):s(0,a)}n===C.ARROW_LEFT&&f("left",0,t),n===C.ARROW_RIGHT&&f("right",0,t)}function w(n,t,o){var a,d;if(n==="ArrowUp"){const b=o%_;if(t===0){const S=_-l.value[l.value.length-1].length%_,$=l.value[l.value.length-1].length+S-(_-b);s(l.value.length-1,$)||s(l.value.length-1,l.value[l.value.length-1].length-1);return}if(!s(t,o-_)){const S=t-1<0?0:t-1,$=l.value[S].length,q=$-$%_+b;s(S,q)||s(t-1,l.value[t-1].length-1)}}if(n==="ArrowDown"&&!s(t,o+_)){const b=o%_;(d=(a=l.value)==null?void 0:a[t])!=null&&d[o+(_-b)]?s(t,l.value[t].length-1):s(t+1,b)||s(0,b)||s(0,l.value[0].length-1)}n==="ArrowLeft"&&f("left",t,o),n==="ArrowRight"&&f("right",t,o)}return{emojiFilteredRefs:g,isFiltering:R,hoverFirstEmoji:i,setEmojiRef:k,setFilteredRef:L,focusEmoji:s,handleArrowNavigationFiltered:I,handleArrowNavigation:w}}const ce={class:"d-emoji-picker__selector"},ue={key:0,class:"d-emoji-picker__search-label d-emoji-picker__alignment"},fe={key:0},de={class:"d-emoji-picker__tab"},me=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],ve=["alt","aria-label","title","src"],pe={key:2,class:"d-emoji-picker__alignment"},be={class:"d-emoji-picker__tab","data-qa":"filtered-emojis"},he=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],ke=["alt","aria-label","title","src"],ge={__name:"emoji_selector",props:{emojiFilter:{type:String,default:""},skinTone:{type:String,required:!0},tabsetLabels:{type:Array,required:!0},selectedTabset:{type:Object,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},recentlyUsedEmojis:{type:Array,default:()=>[]}},emits:["highlighted-emoji","selected-emoji","scroll-into-tab","is-scrolling","focus-skin-selector","focus-search-input"],setup(l,{expose:g,emit:R}){const i=l,u=R,{emojiFilteredRefs:E,isFiltering:h,hoverFirstEmoji:y,setEmojiRef:f,setFilteredRef:s,focusEmoji:k,handleArrowNavigationFiltered:L,handleArrowNavigation:I}=ae(),w=e.ref(null),n=e.ref(null),t=e.ref(null),o=["Recently used","People","Nature","Food","Activity","Travel","Objects","Symbols","Flags"],a=e.computed(()=>i.recentlyUsedEmojis.length?i.tabsetLabels.map(r=>({label:r,ref:e.ref(null)})):i.tabsetLabels.slice(1).map(r=>({label:r,ref:e.ref(null)}))),d=e.ref(a.value[0].label),b=e.computed(()=>i.recentlyUsedEmojis.length?o:o.slice(1)),S=e.ref([]),$=e.computed(()=>[...T.emojisGrouped[`People${i.skinTone}`],...T.emojisGrouped.Nature,...T.emojisGrouped.Food,...T.emojisGrouped[`Activity${i.skinTone}`],...T.emojisGrouped.Travel,...T.emojisGrouped[`Objects${i.skinTone}`],...T.emojisGrouped.Symbols,...T.emojisGrouped.Flags]),q=H(()=>{E.value=[],G()});e.watch($,()=>{G()},{immediate:!0}),e.watch(()=>i.recentlyUsedEmojis,()=>{T.emojisGrouped["Recently used"]=i.recentlyUsedEmojis},{immediate:!0}),e.watch(()=>i.emojiFilter,()=>{J(),i.emojiFilter?h.value=!0:(h.value=!1,F(null)),q()}),e.watch(()=>i.selectedTabset,r=>{K(r.tabId)},{deep:!0});function U(r,c=!1){y.value=c,u("highlighted-emoji",r)}function G(){const r=i.emojiFilter.toLowerCase();S.value=$.value.filter(c=>{const v=c.name.toLowerCase().includes(r),p=c.keywords.some(m=>m.toLowerCase().includes(r));return v||p}),e.nextTick(()=>{r&&U(S.value[0],!0)})}function H(r,c=300){let v;return(...p)=>{clearTimeout(v),v=setTimeout(()=>r(...p),c)}}function z(r){return`${V+r}.png`}function Y(r){r.target.parentNode.style.display="none"}function K(r,c=!0){const p=a.value[r-1].ref.value[0];e.nextTick(()=>{const m=n.value,N=r==="1"?0:p.offsetTop-20;let j=!0,O=m.scrollTop;u("is-scrolling",!0),m.addEventListener("scroll",()=>{if(j){const D=m.scrollTop;(O<D&&D>=N||O>D&&D<=N)&&(j=!1,u("is-scrolling",!1)),O=D}}),m.scrollTop=N,c&&k(r-1,0)})}function J(){const r=n.value;r.scrollTop=0}function Q(){t.value=new IntersectionObserver(r=>{r.forEach(c=>{var m,N,j,O,D;const{target:v}=c,p=parseInt(v.dataset.index);c.isIntersecting&&v.offsetTop<=w.value.offsetTop+50?(d.value=((m=a.value[p-1])==null?void 0:m.label)??((N=a.value[0])==null?void 0:N.label),u("scroll-into-tab",p-1)):c.boundingClientRect.bottom<=((j=w.value)==null?void 0:j.getBoundingClientRect().bottom)?(u("scroll-into-tab",p),d.value=(O=a.value[p])==null?void 0:O.label):p===1&&(u("scroll-into-tab",p),d.value=(D=a.value[0])==null?void 0:D.label)})}),t.value.observe(w.value),Array.from(n.value.children).forEach((r,c)=>{t.value.observe(r),r.dataset.index=c})}const X=(r,c,v)=>{if(r.preventDefault(),Object.values(C).includes(r.key)){L(r.key,c);return}switch(r.key){case"Tab":u("focus-skin-selector");break;case"Enter":M(v);break}},Z=(r,c,v,p)=>{if(r.preventDefault(),Object.values(C).includes(r.key)){I(r.key,c,v);return}switch(r.key){case"Tab":r.shiftKey?k(c,0)&&c>0?K(c,!0):(K(1,!1),u("focus-search-input")):k(c+1,0)?K(c+1+1,!1):u("focus-skin-selector");break;case"Enter":M(p);break}};function M(r){u("selected-emoji",r)}function F(r){u("highlighted-emoji",r)}function x(){k(0,0)}function ee(){k(b.value.length-1,0)}return e.onMounted(()=>{Q()}),e.onUnmounted(()=>{t.value.disconnect()}),g({focusEmojiSelector:x,focusLastEmoji:ee}),(r,c)=>(e.openBlock(),e.createElementBlock("div",ce,[e.createElementVNode("div",{id:"d-emoji-picker-list",ref_key:"listRef",ref:n,class:"d-emoji-picker__list"},[l.emojiFilter?(e.openBlock(),e.createElementBlock("p",ue,e.toDisplayString(S.value.length>0?l.searchResultsLabel:l.searchNoResultsLabel),1)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"tabCategoryRef",ref:w,class:"d-emoji-picker__category d-emoji-picker__alignment"},[e.createElementVNode("p",null,e.toDisplayString(d.value),1)],512)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(v,p)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:p,ref_for:!0,ref:v.ref,class:"d-emoji-picker__alignment"},[p?(e.openBlock(),e.createElementBlock("p",fe,e.toDisplayString(v.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",de,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(T.emojisGrouped)[b.value[p]+l.skinTone]?e.unref(T.emojisGrouped)[b.value[p]+l.skinTone]:e.unref(T.emojisGrouped)[b.value[p]],(m,N)=>(e.openBlock(),e.createElementBlock("button",{key:m.shortname,ref_for:!0,ref:j=>{j&&e.unref(f)(j,p,N)},type:"button","aria-label":m.name,onClick:j=>M(m),onFocusin:j=>F(m),onFocusout:c[0]||(c[0]=j=>F(null)),onMouseover:j=>F(m),onMouseleave:c[1]||(c[1]=j=>F(null)),onKeydown:j=>Z(j,p,N,m)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:m.name,"aria-label":m.name,title:m.name,src:z(m.unicode_character),onError:Y},null,40,ve)],40,me))),128))])])),[[e.vShow,!l.emojiFilter]])),128)),l.emojiFilter?(e.openBlock(),e.createElementBlock("div",pe,[e.createElementVNode("div",be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(S.value,(v,p)=>(e.openBlock(),e.createElementBlock("button",{key:v.shortname,ref_for:!0,ref:m=>{m&&e.unref(s)(m,p)},type:"button","aria-label":v.name,class:e.normalizeClass({"hover-emoji":p===0&&e.unref(y)}),onClick:m=>M(v),onFocusin:m=>F(v),onFocusout:c[2]||(c[2]=m=>F(null)),onMouseover:m=>U(v),onMouseleave:c[3]||(c[3]=m=>U(null)),onKeydown:m=>X(m,p,v)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:v.name,"aria-label":v.name,title:v.name,src:`${e.unref(V)+v.unicode_character}.png`},null,8,ke)],42,he))),128))])])):e.createCommentVNode("",!0)],512)]))}},ye={"data-qa":"skin-selector"},Se={class:"d-emoji-picker__skin-list"},Ee=["onKeydown","onClick"],_e=["alt","aria-label","title","src"],je={class:"d-emoji-picker__skin-selected"},Re=["aria-label"],we=["alt","aria-label","title","src"],Te={__name:"emoji_skin_selector",props:{skinTone:{type:String,required:!0},isHovering:{type:Boolean,default:!1},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["skin-tone","focus-tabset","focus-last-emoji"],setup(l,{expose:g,emit:R}){const i=l,u=R,E=[{name:":wave_tone1:",unicode_output:"1f44b-1f3fb",skinTone:B.LIGHT,skinCode:"_tone1"},{name:":wave_tone2:",unicode_output:"1f44b-1f3fc",skinTone:B.MEDIUM_LIGHT,skinCode:"_tone2"},{name:":wave_tone3:",unicode_output:"1f44b-1f3fd",skinTone:B.MEDIUM,skinCode:"_tone3"},{name:":wave_tone4:",unicode_output:"1f44b-1f3fe",skinTone:B.MEDIUM_DARK,skinCode:"_tone4"},{name:":wave_tone5:",unicode_output:"1f44b-1f3ff",skinTone:B.DARK,skinCode:"_tone5"},{name:":wave:",unicode_output:"1f44b",skinTone:B.DEFAULT,skinCode:""}],h=e.ref(!1),y=e.ref(null),f=e.ref([]);e.watchEffect(()=>i.isHovering&&(h.value=!1));const s=e.computed(()=>E.find(o=>o.skinTone===i.skinTone)),k=e.ref(s.value);e.watchEffect(()=>s.value&&(k.value=s.value));function L(o){f.value.push(o)}function I(){y.value.focus()}function w(o){k.value=o,h.value=!1,u("skin-tone",o.skinTone),e.nextTick(()=>I())}const n=(o,a,d)=>{var b,S,$;o.preventDefault(),o.key==="ArrowLeft"&&(d===0&&((b=f.value[f.value.length-1])==null||b.focus()),(S=f.value[d-1])==null||S.focus()),o.key==="ArrowRight"&&(($=f.value[d+1])==null||$.focus()),o.key==="Enter"&&(a?w(a):t()),o.key==="Tab"&&(o.shiftKey?u("focus-last-emoji"):u("focus-tabset"))};function t(){h.value=!h.value,e.nextTick(()=>f.value[0].focus())}return g({focusSkinSelector:I}),(o,a)=>(e.openBlock(),e.createElementBlock("div",ye,[e.withDirectives(e.createElementVNode("div",Se,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(E,(d,b)=>e.createElementVNode("button",{ref_for:!0,ref:S=>{S&&L(S)},key:d.name,class:e.normalizeClass({selected:k.value.skinCode===d.skinCode}),onKeydown:S=>n(S,d,b),onClick:S=>w(d)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:d.name,"aria-label":d.name,title:d.name,src:`${e.unref(V)+d.unicode_output}.png`},null,8,_e)],42,Ee)),64))],512),[[e.vShow,h.value]]),e.withDirectives(e.createElementVNode("div",je,[e.createVNode(e.unref(oe.DtTooltip),{placement:"top-end"},{anchor:e.withCtx(()=>[e.createElementVNode("button",{ref_key:"skinSelectorRef",ref:y,"aria-label":l.skinSelectorButtonTooltipLabel,tabindex:"-1",onClick:t,onKeydown:a[0]||(a[0]=d=>n(d))},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:k.value.name,"aria-label":k.value.name,title:k.value.name,src:`${e.unref(V)+k.value.unicode_output}.png`},null,8,we)],40,Re)]),default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.skinSelectorButtonTooltipLabel)+" ",1)]),_:1})],512),[[e.vShow,!h.value]])]))}},Le={class:"d-emoji-picker__data"},Ie=["alt","aria-label","title","src"],$e={__name:"emoji_description",props:{emoji:{type:Object,default:null}},setup(l){return(g,R)=>{var i;return e.openBlock(),e.createElementBlock("div",Le,[l.emoji?(e.openBlock(),e.createElementBlock("img",{key:0,class:"d-icon d-icon--size-500",alt:l.emoji.name,"aria-label":l.emoji.name,title:l.emoji.name,src:`${e.unref(V)+l.emoji.unicode_character}.png`},null,8,Ie)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString((i=l.emoji)==null?void 0:i.name),1)])}}},Ae={class:"d-emoji-picker"},Ne={class:"d-emoji-picker--header"},De={class:"d-emoji-picker--body"},Fe={class:"d-emoji-picker--footer"},Be={__name:"emoji_picker",props:{recentlyUsedEmojis:{type:Array,default:()=>[]},searchPlaceholderLabel:{type:String,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},tabSetLabels:{type:Array,required:!0},skinTone:{type:String,default:"Default"},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["selected-emoji","skin-tone","close"],setup(l,{emit:g}){const R=l,i=g,u=e.ref(""),E=e.ref(null),h=e.ref({}),y=e.ref(0),f=e.ref(!1),s=e.computed(()=>R.recentlyUsedEmojis.length>0);function k(n){u.value="",h.value=n,h.value={...h.value,tabId:n}}function L(n){y.value=n}function I(n){f.value=n}function w(n){E.value=n}return(n,t)=>(e.openBlock(),e.createElementBlock("div",Ae,[e.createElementVNode("div",Ne,[e.createVNode(ie,{ref:"tabsetRef","emoji-filter":u.value,"show-recently-used-tab":s.value,"scroll-into-tab":y.value,"tabset-labels":l.tabSetLabels,"is-scrolling":f.value,onFocusSearchInput:t[0]||(t[0]=o=>n.$refs.searchInputRef.focusSearchInput()),onFocusSkinSelector:t[1]||(t[1]=o=>n.$refs.skinSelectorRef.focusSkinSelector()),onSelectedTabset:k,onKeydown:t[2]||(t[2]=e.withKeys(o=>i("close"),["esc"]))},null,8,["emoji-filter","show-recently-used-tab","scroll-into-tab","tabset-labels","is-scrolling"])]),e.createElementVNode("div",De,[e.createVNode(se,{ref:"searchInputRef",modelValue:u.value,"onUpdate:modelValue":t[3]||(t[3]=o=>u.value=o),"search-placeholder-label":l.searchPlaceholderLabel,onSelectFirstEmoji:t[4]||(t[4]=o=>i("selected-emoji",E.value)),onFocusTabset:t[5]||(t[5]=o=>n.$refs.tabsetRef.focusTabset()),onFocusEmojiSelector:t[6]||(t[6]=o=>n.$refs.emojiSelectorRef.focusEmojiSelector()),onKeydown:t[7]||(t[7]=e.withKeys(o=>i("close"),["esc"]))},null,8,["modelValue","search-placeholder-label"]),e.createVNode(ge,{ref:"emojiSelectorRef","emoji-filter":u.value,"skin-tone":l.skinTone,"tabset-labels":l.tabSetLabels,"search-results-label":l.searchResultsLabel,"search-no-results-label":l.searchNoResultsLabel,"recently-used-emojis":l.recentlyUsedEmojis,"selected-tabset":h.value,onScrollIntoTab:L,onIsScrolling:I,onHighlightedEmoji:w,onSelectedEmoji:t[8]||(t[8]=o=>i("selected-emoji",o)),onFocusSkinSelector:t[9]||(t[9]=o=>n.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:t[10]||(t[10]=o=>n.$refs.searchInputRef.focusSearchInput()),onKeydown:t[11]||(t[11]=e.withKeys(o=>i("close"),["esc"]))},null,8,["emoji-filter","skin-tone","tabset-labels","search-results-label","search-no-results-label","recently-used-emojis","selected-tabset"])]),e.createElementVNode("div",Fe,[e.createVNode($e,{emoji:E.value},null,8,["emoji"]),e.createVNode(Te,{ref:"skinSelectorRef","is-hovering":!!E.value,"skin-selector-button-tooltip-label":l.skinSelectorButtonTooltipLabel,"skin-tone":l.skinTone,onSkinTone:t[12]||(t[12]=o=>i("skin-tone",o)),onFocusTabset:t[13]||(t[13]=o=>n.$refs.tabsetRef.focusTabset()),onFocusLastEmoji:t[14]||(t[14]=o=>n.$refs.emojiSelectorRef.focusLastEmoji()),onKeydown:t[15]||(t[15]=e.withKeys(o=>i("close"),["esc"]))},null,8,["is-hovering","skin-selector-button-tooltip-label","skin-tone"])])]))}};exports.ARROW_KEYS=C;exports.CDN_URL=V;exports.DtEmojiPicker=Be;exports.EMOJIS_PER_ROW=_;exports.EMOJI_PICKER_CATEGORIES=A;exports.EMOJI_PICKER_SKIN_TONE_MODIFIERS=B;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const lib_input = require("./input.cjs");
+const lib_icon = require("./icon.cjs");
+const tab = require("../chunks/tab-qc3f42Yp.js");
+const dialtoneEmojis = require("@dialpad/dialtone-emojis");
+const lib_tooltip = require("./tooltip.cjs");
+require("../common/constants.cjs");
+require("../common/utils.cjs");
+require("../chunks/input-ttnte8zB.js");
+require("../common/validators.cjs");
+require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+require("./validation-messages.cjs");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("./button.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("../chunks/popover_constants-JwBF9h1Z.js");
+require("tippy.js");
+require("./lazy-show.cjs");
+const _hoisted_1$5 = { class: "d-emoji-picker__search d-emoji-picker__alignment" };
+const _hoisted_2$4 = ["onKeydown"];
+const _sfc_main$5 = {
+  __name: "emoji_search",
+  props: {
+    searchPlaceholderLabel: {
+      type: String,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emits = __emit;
+    const searchInput = vue.ref(null);
+    function clearSearch() {
+      emits("update:modelValue", "");
+      focusSearchInput();
+    }
+    function focusSearchInput() {
+      searchInput.value.focus();
+    }
+    vue.onMounted(() => {
+      focusSearchInput();
+    });
+    __expose({
+      focusSearchInput
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+        vue.createVNode(vue.unref(lib_input.DtInput), {
+          id: "searchInput",
+          ref_key: "searchInput",
+          ref: searchInput,
+          placeholder: __props.searchPlaceholderLabel,
+          "model-value": __props.modelValue,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event)),
+          onKeydown: [
+            _cache[1] || (_cache[1] = vue.withKeys(($event) => _ctx.$emit("focus-tabset"), ["up"])),
+            _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(($event) => _ctx.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
+            _cache[3] || (_cache[3] = vue.withKeys(($event) => _ctx.$emit("select-first-emoji"), ["enter"]))
+          ]
+        }, vue.createSlots({
+          leftIcon: vue.withCtx(() => [
+            vue.createVNode(vue.unref(lib_icon.DtIcon), {
+              name: "search",
+              size: "200"
+            })
+          ]),
+          _: 2
+        }, [
+          __props.modelValue.length > 0 ? {
+            name: "rightIcon",
+            fn: vue.withCtx(() => [
+              vue.createElementVNode("button", {
+                class: "d-emoji-picker__search-button",
+                onClick: clearSearch,
+                onKeydown: vue.withKeys(clearSearch, ["enter"])
+              }, [
+                vue.createVNode(vue.unref(lib_icon.DtIcon), { name: "close" })
+              ], 40, _hoisted_2$4)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["placeholder", "model-value"])
+      ]);
+    };
+  }
+};
+const _hoisted_1$4 = { class: "d-emoji-picker__tabset" };
+const _sfc_main$4 = {
+  __name: "emoji_tabset",
+  props: {
+    /**
+     * Whether to show the recently used tab or not
+     * @type {Boolean}
+     * @default false
+     */
+    showRecentlyUsedTab: {
+      type: Boolean,
+      default: false
+    },
+    scrollIntoTab: {
+      type: Number,
+      required: true
+    },
+    isScrolling: {
+      type: Boolean,
+      default: false
+    },
+    emojiFilter: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The labels for the aria-label
+     * @type {Array}
+     * @required
+     */
+    tabsetLabels: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: [
+    /**
+     * Emitted when a tab is selected
+     * @event selected-tabset
+     * @param {String} tabId - The name of the tab that was selected
+     */
+    "selected-tabset",
+    "focus-search-input",
+    "focus-skin-selector"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const TABS_DATA = [
+      { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: "clock" },
+      { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: "satisfied" },
+      { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: "living-thing" },
+      { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: "food" },
+      { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: "object" },
+      { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: "transportation" },
+      { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: "lightbulb" },
+      { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: "heart" },
+      { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: "flag" }
+    ];
+    const tabs = vue.computed(() => {
+      const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);
+      return tabsData.map((tab2, index) => ({
+        ...tab2,
+        label: props.tabsetLabels[index],
+        id: (index + 1).toString(),
+        panelId: (index + 1).toString()
+      }));
+    });
+    const isSearching = vue.computed(() => props.emojiFilter.length > 0);
+    const selectedTab = vue.ref("1");
+    const { isScrolling } = vue.toRefs(props);
+    const tabsetRef = vue.ref([]);
+    vue.watch(
+      () => props.scrollIntoTab,
+      () => {
+        if (!isScrolling.value && !isSearching.value) {
+          selectedTab.value = (props.scrollIntoTab + 1).toString();
+        }
+      }
+    );
+    vue.watch(
+      isSearching,
+      () => {
+        if (isSearching.value) {
+          selectedTab.value = null;
+        }
+      }
+    );
+    function selectTabset(id) {
+      if (!isScrolling.value) {
+        selectedTab.value = id;
+      }
+      emits("selected-tabset", id);
+    }
+    function setTabsetRef(ref) {
+      tabsetRef.value.push(ref.$el);
+    }
+    function focusTabset() {
+      tabsetRef.value[0].focus();
+    }
+    function handleKeyDown(event, tabId) {
+      if (event.key === "Enter") {
+        selectTabset(tabId);
+        tabsetRef.value[tabId - 1].blur();
+      }
+      if (event.key === "Tab") {
+        event.preventDefault();
+        if (event.shiftKey) {
+          emits("focus-skin-selector");
+        } else {
+          emits("focus-search-input");
+        }
+      }
+      if (event.key === "ArrowDown") {
+        emits("focus-search-input");
+      }
+    }
+    __expose({
+      focusTabset
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+        vue.createVNode(vue.unref(tab.DtTabGroup), {
+          "tab-list-class": "d-emoji-picker__tabset-list",
+          selected: selectedTab.value
+        }, {
+          tabs: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabs.value, (tab$1, index) => {
+              return vue.openBlock(), vue.createBlock(vue.unref(tab.DtTab), {
+                id: tab$1.id,
+                ref_for: true,
+                ref: (el) => {
+                  if (el)
+                    setTabsetRef(el);
+                },
+                key: tab$1.id,
+                "panel-id": tab$1.panelId,
+                label: tab$1.label,
+                "aria-controls": "d-emoji-picker-list",
+                tabindex: index + 1,
+                onClickCapture: vue.withModifiers(($event) => selectTabset(tab$1.id), ["stop"]),
+                onKeydown: ($event) => handleKeyDown($event, tab$1.id)
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(lib_icon.DtIcon), {
+                    size: "400",
+                    name: tab$1.icon
+                  }, null, 8, ["name"])
+                ]),
+                _: 2
+              }, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["selected"])
+      ]);
+    };
+  }
+};
+const ARROW_KEYS = {
+  ARROW_UP: "ArrowUp",
+  ARROW_DOWN: "ArrowDown",
+  ARROW_LEFT: "ArrowLeft",
+  ARROW_RIGHT: "ArrowRight"
+};
+const CDN_URL = "https://static.dialpadcdn.com/joypixels/png/unicode/32/";
+const EMOJIS_PER_ROW = 9;
+const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {
+  DEFAULT: "Default",
+  LIGHT: "Light",
+  MEDIUM_LIGHT: "MediumLight",
+  MEDIUM: "Medium",
+  MEDIUM_DARK: "MediumDark",
+  DARK: "Dark"
+};
+const EMOJI_PICKER_CATEGORIES = {
+  MOST_RECENTLY_USED: "Most recently used",
+  SMILEYS_AND_PEOPLE: "Smileys and people",
+  NATURE: "Nature",
+  FOOD: "Food",
+  ACTIVITY: "Activity",
+  TRAVEL: "Travel",
+  OBJECTS: "Objects",
+  SYMBOLS: "Symbols",
+  FLAGS: "Flags"
+};
+function useKeyboardNavigation() {
+  const emojiRefs = vue.ref([]);
+  const emojiFilteredRefs = vue.ref([]);
+  const isFiltering = vue.ref(false);
+  const hoverFirstEmoji = vue.ref(true);
+  function _handleArrowLeft(indexTab, indexEmoji) {
+    if (!focusEmoji(indexTab, indexEmoji - 1)) {
+      if (emojiRefs.value[indexTab - 1]) {
+        focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);
+      } else {
+        focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);
+      }
+    }
+  }
+  function _handleArrowRight(indexTab, indexEmoji) {
+    if (!focusEmoji(indexTab, indexEmoji + 1)) {
+      if (!focusEmoji(indexTab + 1, 0)) {
+        focusEmoji(0, 0);
+      }
+    }
+  }
+  function _handleArrowLeftFiltered(indexTab, indexEmoji) {
+    if (!focusEmoji(0, indexEmoji - 1)) {
+      focusEmoji(0, emojiFilteredRefs.value.length - 1);
+    }
+  }
+  function _handleArrowRightFiltered(indexTab, indexEmoji) {
+    if (!focusEmoji(0, indexEmoji + 1)) {
+      focusEmoji(0, 0);
+    }
+  }
+  function _handleHorizontalNavigation(direction, indexTab, indexEmoji) {
+    if (isFiltering.value) {
+      if (direction === "left") {
+        _handleArrowLeftFiltered(indexTab, indexEmoji);
+      } else if (direction === "right") {
+        _handleArrowRightFiltered(indexTab, indexEmoji);
+      }
+    } else {
+      if (direction === "left") {
+        _handleArrowLeft(indexTab, indexEmoji);
+      } else if (direction === "right") {
+        _handleArrowRight(indexTab, indexEmoji);
+      }
+    }
+  }
+  function focusEmoji(indexTab, indexEmoji) {
+    var _a, _b, _c;
+    const emojiRef = isFiltering.value ? (_a = emojiFilteredRefs.value) == null ? void 0 : _a[indexEmoji] : (_c = (_b = emojiRefs.value) == null ? void 0 : _b[indexTab]) == null ? void 0 : _c[indexEmoji];
+    if (emojiRef) {
+      emojiRef.focus();
+      return true;
+    }
+    return false;
+  }
+  function setEmojiRef(el, indexTab, indexEmoji) {
+    if (!emojiRefs.value[indexTab]) {
+      emojiRefs.value[indexTab] = [];
+    }
+    emojiRefs.value[indexTab][indexEmoji] = el;
+  }
+  function setFilteredRef(el, index) {
+    emojiFilteredRefs.value[index] = el;
+  }
+  function handleArrowNavigationFiltered(key, indexEmoji) {
+    var _a;
+    hoverFirstEmoji.value = false;
+    if (key === ARROW_KEYS.ARROW_UP) {
+      const position = indexEmoji % EMOJIS_PER_ROW;
+      if (!focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {
+        const lastEmojiPosition = emojiFilteredRefs.value.length - emojiFilteredRefs.value.length % EMOJIS_PER_ROW + position;
+        focusEmoji(0, lastEmojiPosition);
+        if (!focusEmoji(0, lastEmojiPosition)) {
+          focusEmoji(0, emojiFilteredRefs.value.length - 1);
+        }
+      }
+    }
+    if (key === ARROW_KEYS.ARROW_DOWN) {
+      if (!focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {
+        const position = indexEmoji % EMOJIS_PER_ROW;
+        if ((_a = emojiFilteredRefs.value) == null ? void 0 : _a[indexEmoji + (EMOJIS_PER_ROW - position)]) {
+          focusEmoji(0, emojiFilteredRefs.value.length - 1);
+        } else {
+          focusEmoji(0, position);
+        }
+      }
+    }
+    if (key === ARROW_KEYS.ARROW_LEFT) {
+      _handleHorizontalNavigation("left", 0, indexEmoji);
+    }
+    if (key === ARROW_KEYS.ARROW_RIGHT) {
+      _handleHorizontalNavigation("right", 0, indexEmoji);
+    }
+  }
+  function handleArrowNavigation(key, indexTab, indexEmoji) {
+    var _a, _b;
+    if (key === "ArrowUp") {
+      const position = indexEmoji % EMOJIS_PER_ROW;
+      if (indexTab === 0) {
+        const numberOfMissingEmojis = EMOJIS_PER_ROW - emojiRefs.value[emojiRefs.value.length - 1].length % EMOJIS_PER_ROW;
+        const emojiToJump = emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);
+        if (!focusEmoji(emojiRefs.value.length - 1, emojiToJump)) {
+          focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);
+        }
+        return;
+      }
+      if (!focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {
+        const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;
+        const emojisInPreviousTab = emojiRefs.value[previousTab].length;
+        const lastEmojiPosition = emojisInPreviousTab - emojisInPreviousTab % EMOJIS_PER_ROW + position;
+        if (!focusEmoji(previousTab, lastEmojiPosition)) {
+          focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);
+        }
+      }
+    }
+    if (key === "ArrowDown") {
+      if (!focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {
+        const position = indexEmoji % EMOJIS_PER_ROW;
+        if ((_b = (_a = emojiRefs.value) == null ? void 0 : _a[indexTab]) == null ? void 0 : _b[indexEmoji + (EMOJIS_PER_ROW - position)]) {
+          focusEmoji(indexTab, emojiRefs.value[indexTab].length - 1);
+        } else {
+          if (!focusEmoji(indexTab + 1, position)) {
+            if (!focusEmoji(0, position)) {
+              focusEmoji(0, emojiRefs.value[0].length - 1);
+            }
+          }
+        }
+      }
+    }
+    if (key === "ArrowLeft") {
+      _handleHorizontalNavigation("left", indexTab, indexEmoji);
+    }
+    if (key === "ArrowRight") {
+      _handleHorizontalNavigation("right", indexTab, indexEmoji);
+    }
+  }
+  return {
+    emojiFilteredRefs,
+    isFiltering,
+    hoverFirstEmoji,
+    setEmojiRef,
+    setFilteredRef,
+    focusEmoji,
+    handleArrowNavigationFiltered,
+    handleArrowNavigation
+  };
+}
+const _hoisted_1$3 = { class: "d-emoji-picker__selector" };
+const _hoisted_2$3 = {
+  key: 0,
+  class: "d-emoji-picker__search-label d-emoji-picker__alignment"
+};
+const _hoisted_3$2 = { key: 0 };
+const _hoisted_4$2 = { class: "d-emoji-picker__tab" };
+const _hoisted_5$1 = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"];
+const _hoisted_6$1 = ["alt", "aria-label", "title", "src"];
+const _hoisted_7$1 = {
+  key: 2,
+  class: "d-emoji-picker__alignment"
+};
+const _hoisted_8 = {
+  class: "d-emoji-picker__tab",
+  "data-qa": "filtered-emojis"
+};
+const _hoisted_9 = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"];
+const _hoisted_10 = ["alt", "aria-label", "title", "src"];
+const _sfc_main$3 = {
+  __name: "emoji_selector",
+  props: {
+    /**
+     * The filter to apply to the emoji list
+     * @type {String}
+     * @default ''
+     */
+    emojiFilter: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The skin tone to apply to the emoji list
+     * @type {String}
+     * @required
+     */
+    skinTone: {
+      type: String,
+      required: true
+    },
+    /**
+     * The labels for the tabset
+     * @type {Array}
+     * @required
+     */
+    tabsetLabels: {
+      type: Array,
+      required: true
+    },
+    selectedTabset: {
+      type: Object,
+      required: true
+    },
+    /**
+     * The label for the search results tab
+     * @type {String}
+     * @required
+     */
+    searchResultsLabel: {
+      type: String,
+      required: true
+    },
+    searchNoResultsLabel: {
+      type: String,
+      required: true
+    },
+    /**
+     * The list of recently used emojis
+     * @type {Array}
+     */
+    recentlyUsedEmojis: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: [
+    /**
+     * Emitted when the user hover over an emoji
+     * @event highlighted-emoji
+     * @param {Object} emoji - The emoji data that was hovered
+      */
+    "highlighted-emoji",
+    /**
+     * Emitted when the user select an emoji
+     * @event selected-emoji
+     * @param {Object} emoji - The emoji data that was selected
+      */
+    "selected-emoji",
+    /**
+     * Emitted when the user scroll into an emoji tab
+     * @event scroll-into-tab
+     * @param {Number} tab-index - The tab that was scrolled into
+      */
+    "scroll-into-tab",
+    /**
+     * Emitted when the scrollTo function starts scrolling and stops scrolling
+     * @event is-scrolling
+     * @param {Boolean} is-scrolling - Whether the user is scrolling with the scroll-to
+      */
+    "is-scrolling",
+    /**
+     * Emitted when the user reach the end of the emoji list
+     * @event focus-skin-selector
+      */
+    "focus-skin-selector",
+    /**
+     * Emitted when the user shift tab in first tab of emoji selector
+     * @event focus-search-input
+      */
+    "focus-search-input"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const {
+      emojiFilteredRefs,
+      isFiltering,
+      hoverFirstEmoji,
+      setEmojiRef,
+      setFilteredRef,
+      focusEmoji,
+      handleArrowNavigationFiltered,
+      handleArrowNavigation
+    } = useKeyboardNavigation();
+    const tabCategoryRef = vue.ref(null);
+    const listRef = vue.ref(null);
+    const tabLabelObserver = vue.ref(null);
+    const TABS_DATA = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"];
+    const tabLabels = vue.computed(() => {
+      return props.recentlyUsedEmojis.length ? props.tabsetLabels.map((label) => ({ label, ref: vue.ref(null) })) : props.tabsetLabels.slice(1).map((label) => ({ label, ref: vue.ref(null) }));
+    });
+    const fixedLabel = vue.ref(tabLabels.value[0].label);
+    const tabs = vue.computed(() => {
+      return props.recentlyUsedEmojis.length ? TABS_DATA : TABS_DATA.slice(1);
+    });
+    const filteredEmojis = vue.ref([]);
+    const currentEmojis = vue.computed(() => {
+      return [
+        ...dialtoneEmojis.emojisGrouped[`People${props.skinTone}`],
+        ...dialtoneEmojis.emojisGrouped.Nature,
+        ...dialtoneEmojis.emojisGrouped.Food,
+        ...dialtoneEmojis.emojisGrouped[`Activity${props.skinTone}`],
+        ...dialtoneEmojis.emojisGrouped.Travel,
+        ...dialtoneEmojis.emojisGrouped[`Objects${props.skinTone}`],
+        ...dialtoneEmojis.emojisGrouped.Symbols,
+        ...dialtoneEmojis.emojisGrouped.Flags
+      ];
+    });
+    const debouncedSearch = debounce(() => {
+      emojiFilteredRefs.value = [];
+      searchByNameAndKeywords();
+    });
+    vue.watch(currentEmojis, () => {
+      searchByNameAndKeywords();
+    }, { immediate: true });
+    vue.watch(
+      () => props.recentlyUsedEmojis,
+      () => {
+        dialtoneEmojis.emojisGrouped["Recently used"] = props.recentlyUsedEmojis;
+      },
+      { immediate: true }
+    );
+    vue.watch(() => props.emojiFilter, () => {
+      resetScroll();
+      if (props.emojiFilter) {
+        isFiltering.value = true;
+      } else {
+        isFiltering.value = false;
+        highlightEmoji(null);
+      }
+      debouncedSearch();
+    });
+    vue.watch(
+      () => props.selectedTabset,
+      (tab2) => {
+        scrollToTab(tab2.tabId);
+      },
+      { deep: true }
+    );
+    function hoverEmoji(emoji, isFirst = false) {
+      hoverFirstEmoji.value = isFirst;
+      emits("highlighted-emoji", emoji);
+    }
+    function searchByNameAndKeywords() {
+      const searchStr = props.emojiFilter.toLowerCase();
+      filteredEmojis.value = currentEmojis.value.filter((obj) => {
+        const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);
+        const keywordsIncludeSearchStr = obj.keywords.some((keyword) => keyword.toLowerCase().includes(searchStr));
+        return nameIncludesSearchStr || keywordsIncludeSearchStr;
+      });
+      vue.nextTick(() => {
+        if (searchStr) {
+          hoverEmoji(filteredEmojis.value[0], true);
+        }
+      });
+    }
+    function debounce(fn, delay = 300) {
+      let timeout;
+      return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => fn(...args), delay);
+      };
+    }
+    function getImgSrc(emoji) {
+      return `${CDN_URL + emoji}.png`;
+    }
+    function handleImageError(event) {
+      event.target.parentNode.style.display = "none";
+    }
+    function scrollToTab(tabIndex, focusFirstEmoji = true) {
+      const tabLabel = tabLabels.value[tabIndex - 1];
+      const tabElement = tabLabel.ref.value[0];
+      vue.nextTick(() => {
+        const container = listRef.value;
+        const offsetTop = tabIndex === "1" ? 0 : tabElement.offsetTop - 20;
+        let isScrolling = true;
+        let prevScrollTop = container.scrollTop;
+        emits("is-scrolling", true);
+        container.addEventListener("scroll", () => {
+          if (isScrolling) {
+            const scrollTop = container.scrollTop;
+            if (prevScrollTop < scrollTop && scrollTop >= offsetTop || prevScrollTop > scrollTop && scrollTop <= offsetTop) {
+              isScrolling = false;
+              emits("is-scrolling", false);
+            }
+            prevScrollTop = scrollTop;
+          }
+        });
+        container.scrollTop = offsetTop;
+        if (focusFirstEmoji) {
+          focusEmoji(tabIndex - 1, 0);
+        }
+      });
+    }
+    function resetScroll() {
+      const container = listRef.value;
+      container.scrollTop = 0;
+    }
+    function setTabLabelObserver() {
+      tabLabelObserver.value = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          var _a, _b, _c, _d, _e;
+          const { target } = entry;
+          const index = parseInt(target.dataset.index);
+          if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {
+            fixedLabel.value = ((_a = tabLabels.value[index - 1]) == null ? void 0 : _a.label) ?? ((_b = tabLabels.value[0]) == null ? void 0 : _b.label);
+            emits("scroll-into-tab", index - 1);
+          } else if (entry.boundingClientRect.bottom <= ((_c = tabCategoryRef.value) == null ? void 0 : _c.getBoundingClientRect().bottom)) {
+            emits("scroll-into-tab", index);
+            fixedLabel.value = (_d = tabLabels.value[index]) == null ? void 0 : _d.label;
+          } else if (index === 1) {
+            emits("scroll-into-tab", index);
+            fixedLabel.value = (_e = tabLabels.value[0]) == null ? void 0 : _e.label;
+          }
+        });
+      });
+      tabLabelObserver.value.observe(tabCategoryRef.value);
+      Array.from(listRef.value.children).forEach((child, index) => {
+        tabLabelObserver.value.observe(child);
+        child.dataset.index = index;
+      });
+    }
+    const handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {
+      event.preventDefault();
+      if (Object.values(ARROW_KEYS).includes(event.key)) {
+        handleArrowNavigationFiltered(event.key, indexEmoji);
+        return;
+      }
+      switch (event.key) {
+        case "Tab":
+          emits("focus-skin-selector");
+          break;
+        case "Enter":
+          selectEmoji(emoji);
+          break;
+      }
+    };
+    const handleKeyDown = (event, indexTab, indexEmoji, emoji) => {
+      event.preventDefault();
+      if (Object.values(ARROW_KEYS).includes(event.key)) {
+        handleArrowNavigation(event.key, indexTab, indexEmoji);
+        return;
+      }
+      switch (event.key) {
+        case "Tab":
+          if (event.shiftKey) {
+            if (focusEmoji(indexTab, 0) && indexTab > 0) {
+              scrollToTab(indexTab, true);
+            } else {
+              scrollToTab(1, false);
+              emits("focus-search-input");
+            }
+          } else {
+            if (focusEmoji(indexTab + 1, 0)) {
+              scrollToTab(indexTab + 1 + 1, false);
+            } else {
+              emits("focus-skin-selector");
+            }
+          }
+          break;
+        case "Enter":
+          selectEmoji(emoji);
+          break;
+      }
+    };
+    function selectEmoji(emoji) {
+      emits("selected-emoji", emoji);
+    }
+    function highlightEmoji(emoji) {
+      emits("highlighted-emoji", emoji);
+    }
+    function focusEmojiSelector() {
+      focusEmoji(0, 0);
+    }
+    function focusLastEmoji() {
+      focusEmoji(tabs.value.length - 1, 0);
+    }
+    vue.onMounted(() => {
+      setTabLabelObserver();
+    });
+    vue.onUnmounted(() => {
+      tabLabelObserver.value.disconnect();
+    });
+    __expose({
+      focusEmojiSelector,
+      focusLastEmoji
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+        vue.createElementVNode("div", {
+          id: "d-emoji-picker-list",
+          ref_key: "listRef",
+          ref: listRef,
+          class: "d-emoji-picker__list"
+        }, [
+          __props.emojiFilter ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$3, vue.toDisplayString(filteredEmojis.value.length > 0 ? __props.searchResultsLabel : __props.searchNoResultsLabel), 1)) : (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            ref_key: "tabCategoryRef",
+            ref: tabCategoryRef,
+            class: "d-emoji-picker__category d-emoji-picker__alignment"
+          }, [
+            vue.createElementVNode("p", null, vue.toDisplayString(fixedLabel.value), 1)
+          ], 512)),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabLabels.value, (tabLabel, indexTab) => {
+            return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+              key: indexTab,
+              ref_for: true,
+              ref: tabLabel.ref,
+              class: "d-emoji-picker__alignment"
+            }, [
+              indexTab ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3$2, vue.toDisplayString(tabLabel.label), 1)) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", _hoisted_4$2, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(dialtoneEmojis.emojisGrouped)[tabs.value[indexTab] + __props.skinTone] ? vue.unref(dialtoneEmojis.emojisGrouped)[tabs.value[indexTab] + __props.skinTone] : vue.unref(dialtoneEmojis.emojisGrouped)[tabs.value[indexTab]], (emoji, indexEmoji) => {
+                  return vue.openBlock(), vue.createElementBlock("button", {
+                    key: emoji.shortname,
+                    ref_for: true,
+                    ref: (el) => {
+                      if (el)
+                        vue.unref(setEmojiRef)(el, indexTab, indexEmoji);
+                    },
+                    type: "button",
+                    "aria-label": emoji.name,
+                    onClick: ($event) => selectEmoji(emoji),
+                    onFocusin: ($event) => highlightEmoji(emoji),
+                    onFocusout: _cache[0] || (_cache[0] = ($event) => highlightEmoji(null)),
+                    onMouseover: ($event) => highlightEmoji(emoji),
+                    onMouseleave: _cache[1] || (_cache[1] = ($event) => highlightEmoji(null)),
+                    onKeydown: (event) => handleKeyDown(event, indexTab, indexEmoji, emoji)
+                  }, [
+                    vue.createElementVNode("img", {
+                      class: "d-icon d-icon--size-500",
+                      alt: emoji.name,
+                      "aria-label": emoji.name,
+                      title: emoji.name,
+                      src: getImgSrc(emoji.unicode_character),
+                      onError: handleImageError
+                    }, null, 40, _hoisted_6$1)
+                  ], 40, _hoisted_5$1);
+                }), 128))
+              ])
+            ])), [
+              [vue.vShow, !__props.emojiFilter]
+            ]);
+          }), 128)),
+          __props.emojiFilter ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [
+            vue.createElementVNode("div", _hoisted_8, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredEmojis.value, (emoji, index) => {
+                return vue.openBlock(), vue.createElementBlock("button", {
+                  key: emoji.shortname,
+                  ref_for: true,
+                  ref: (el) => {
+                    if (el)
+                      vue.unref(setFilteredRef)(el, index);
+                  },
+                  type: "button",
+                  "aria-label": emoji.name,
+                  class: vue.normalizeClass({
+                    "hover-emoji": index === 0 && vue.unref(hoverFirstEmoji)
+                  }),
+                  onClick: ($event) => selectEmoji(emoji),
+                  onFocusin: ($event) => highlightEmoji(emoji),
+                  onFocusout: _cache[2] || (_cache[2] = ($event) => highlightEmoji(null)),
+                  onMouseover: ($event) => hoverEmoji(emoji),
+                  onMouseleave: _cache[3] || (_cache[3] = ($event) => hoverEmoji(null)),
+                  onKeydown: (event) => handleKeyDownFilteredEmojis(event, index, emoji)
+                }, [
+                  vue.createElementVNode("img", {
+                    class: "d-icon d-icon--size-500",
+                    alt: emoji.name,
+                    "aria-label": emoji.name,
+                    title: emoji.name,
+                    src: `${vue.unref(CDN_URL) + emoji.unicode_character}.png`
+                  }, null, 8, _hoisted_10)
+                ], 42, _hoisted_9);
+              }), 128))
+            ])
+          ])) : vue.createCommentVNode("", true)
+        ], 512)
+      ]);
+    };
+  }
+};
+const _hoisted_1$2 = { "data-qa": "skin-selector" };
+const _hoisted_2$2 = { class: "d-emoji-picker__skin-list" };
+const _hoisted_3$1 = ["onKeydown", "onClick"];
+const _hoisted_4$1 = ["alt", "aria-label", "title", "src"];
+const _hoisted_5 = { class: "d-emoji-picker__skin-selected" };
+const _hoisted_6 = ["aria-label"];
+const _hoisted_7 = ["alt", "aria-label", "title", "src"];
+const _sfc_main$2 = {
+  __name: "emoji_skin_selector",
+  props: {
+    /**
+     * The skin tone to apply to the emoji list
+     * @type {String}
+     * @required
+     */
+    skinTone: {
+      type: String,
+      required: true
+    },
+    isHovering: {
+      type: Boolean,
+      default: false
+    },
+    skinSelectorButtonTooltipLabel: {
+      type: String,
+      required: true
+    }
+  },
+  emits: [
+    /**
+     * The skin tone that was selected
+     * @event skin-tone
+     * @type {Number}
+     */
+    "skin-tone",
+    "focus-tabset",
+    "focus-last-emoji"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const skinList = [
+      {
+        name: ":wave_tone1:",
+        unicode_output: "1f44b-1f3fb",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
+        skinCode: "_tone1"
+      },
+      {
+        name: ":wave_tone2:",
+        unicode_output: "1f44b-1f3fc",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
+        skinCode: "_tone2"
+      },
+      {
+        name: ":wave_tone3:",
+        unicode_output: "1f44b-1f3fd",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
+        skinCode: "_tone3"
+      },
+      {
+        name: ":wave_tone4:",
+        unicode_output: "1f44b-1f3fe",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
+        skinCode: "_tone4"
+      },
+      {
+        name: ":wave_tone5:",
+        unicode_output: "1f44b-1f3ff",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
+        skinCode: "_tone5"
+      },
+      {
+        name: ":wave:",
+        unicode_output: "1f44b",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
+        skinCode: ""
+      }
+    ];
+    const isOpen = vue.ref(false);
+    const skinSelectorRef = vue.ref(null);
+    const skinsRef = vue.ref([]);
+    vue.watchEffect(
+      () => props.isHovering && (isOpen.value = false)
+    );
+    const skinPassedIn = vue.computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));
+    const skinSelected = vue.ref(skinPassedIn.value);
+    vue.watchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));
+    function setSkinsRef(ref) {
+      skinsRef.value.push(ref);
+    }
+    function focusSkinSelector() {
+      skinSelectorRef.value.focus();
+    }
+    function selectSkin(skin) {
+      skinSelected.value = skin;
+      isOpen.value = false;
+      emits("skin-tone", skin.skinTone);
+      vue.nextTick(() => focusSkinSelector());
+    }
+    const handleKeyDown = (event, skin, index) => {
+      var _a, _b, _c;
+      event.preventDefault();
+      if (event.key === "ArrowLeft") {
+        if (index === 0)
+          (_a = skinsRef.value[skinsRef.value.length - 1]) == null ? void 0 : _a.focus();
+        (_b = skinsRef.value[index - 1]) == null ? void 0 : _b.focus();
+      }
+      if (event.key === "ArrowRight") {
+        (_c = skinsRef.value[index + 1]) == null ? void 0 : _c.focus();
+      }
+      if (event.key === "Enter") {
+        if (skin) {
+          selectSkin(skin);
+        } else {
+          toggleSkinList();
+        }
+      }
+      if (event.key === "Tab") {
+        if (event.shiftKey) {
+          emits("focus-last-emoji");
+        } else {
+          emits("focus-tabset");
+        }
+      }
+    };
+    function toggleSkinList() {
+      isOpen.value = !isOpen.value;
+      vue.nextTick(() => skinsRef.value[0].focus());
+    }
+    __expose({
+      focusSkinSelector
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+        vue.withDirectives(vue.createElementVNode("div", _hoisted_2$2, [
+          (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(skinList, (skin, index) => {
+            return vue.createElementVNode("button", {
+              ref_for: true,
+              ref: (el) => {
+                if (el)
+                  setSkinsRef(el);
+              },
+              key: skin.name,
+              class: vue.normalizeClass({
+                "selected": skinSelected.value.skinCode === skin.skinCode
+              }),
+              onKeydown: (event) => handleKeyDown(event, skin, index),
+              onClick: ($event) => selectSkin(skin)
+            }, [
+              vue.createElementVNode("img", {
+                class: "d-icon d-icon--size-500",
+                alt: skin.name,
+                "aria-label": skin.name,
+                title: skin.name,
+                src: `${vue.unref(CDN_URL) + skin.unicode_output}.png`
+              }, null, 8, _hoisted_4$1)
+            ], 42, _hoisted_3$1);
+          }), 64))
+        ], 512), [
+          [vue.vShow, isOpen.value]
+        ]),
+        vue.withDirectives(vue.createElementVNode("div", _hoisted_5, [
+          vue.createVNode(vue.unref(lib_tooltip.DtTooltip), { placement: "top-end" }, {
+            anchor: vue.withCtx(() => [
+              vue.createElementVNode("button", {
+                ref_key: "skinSelectorRef",
+                ref: skinSelectorRef,
+                "aria-label": __props.skinSelectorButtonTooltipLabel,
+                tabindex: "-1",
+                onClick: toggleSkinList,
+                onKeydown: _cache[0] || (_cache[0] = (event) => handleKeyDown(event))
+              }, [
+                vue.createElementVNode("img", {
+                  class: "d-icon d-icon--size-500",
+                  alt: skinSelected.value.name,
+                  "aria-label": skinSelected.value.name,
+                  title: skinSelected.value.name,
+                  src: `${vue.unref(CDN_URL) + skinSelected.value.unicode_output}.png`
+                }, null, 8, _hoisted_7)
+              ], 40, _hoisted_6)
+            ]),
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(__props.skinSelectorButtonTooltipLabel) + " ", 1)
+            ]),
+            _: 1
+          })
+        ], 512), [
+          [vue.vShow, !isOpen.value]
+        ])
+      ]);
+    };
+  }
+};
+const _hoisted_1$1 = { class: "d-emoji-picker__data" };
+const _hoisted_2$1 = ["alt", "aria-label", "title", "src"];
+const _sfc_main$1 = {
+  __name: "emoji_description",
+  props: {
+    /**
+     * Emoji data
+     * @type {Object}
+     * @default null
+     */
+    emoji: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      var _a;
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+        __props.emoji ? (vue.openBlock(), vue.createElementBlock("img", {
+          key: 0,
+          class: "d-icon d-icon--size-500",
+          alt: __props.emoji.name,
+          "aria-label": __props.emoji.name,
+          title: __props.emoji.name,
+          src: `${vue.unref(CDN_URL) + __props.emoji.unicode_character}.png`
+        }, null, 8, _hoisted_2$1)) : vue.createCommentVNode("", true),
+        vue.createTextVNode(" " + vue.toDisplayString((_a = __props.emoji) == null ? void 0 : _a.name), 1)
+      ]);
+    };
+  }
+};
+const _hoisted_1 = { class: "d-emoji-picker" };
+const _hoisted_2 = { class: "d-emoji-picker--header" };
+const _hoisted_3 = { class: "d-emoji-picker--body" };
+const _hoisted_4 = { class: "d-emoji-picker--footer" };
+const _sfc_main = {
+  __name: "emoji_picker",
+  props: {
+    /**
+     * The array with recently used  emoji object
+     * This list is necessary to fill the recently used tab
+     * @type {Array}
+     * @default []
+     * @example
+     * <dt-emoji-picker :recentlyUsedEmojis="[emojiObject, emojiObject]" />
+     */
+    // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object
+    recentlyUsedEmojis: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * The placeholder text for the search input
+     * @type {String}
+     * @required
+     * @example
+     * <dt-emoji-picker :searchPlaceholderLabel="'Search...'" />
+     */
+    searchPlaceholderLabel: {
+      type: String,
+      required: true
+    },
+    /**
+     * The label for the search results tab
+     * @type {String}
+     * @required
+     * @example
+     * <dt-emoji-picker :searchResultsLabel="'Search results'" />
+     */
+    searchResultsLabel: {
+      type: String,
+      required: true
+    },
+    /**
+     * The label for the search no results
+     * @type {String}
+     * @required
+     * @example
+     * <dt-emoji-picker :searchNoResultsLabel="'No results'" />
+     */
+    searchNoResultsLabel: {
+      type: String,
+      required: true
+    },
+    /**
+     * The list of tabsets to show, it is necessary to be updated with the correct language
+     * It must respect the provided order.
+     * @type {Array}
+     * @required
+     * @example
+     * <dt-emoji-picker
+     *  :tabSetLabels="['Most recently used', 'Smileys and people', 'Nature',
+     *    'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags']" />
+     */
+    tabSetLabels: {
+      type: Array,
+      required: true
+    },
+    /**
+     * The skin tone to show the emojis
+     * This prop gives the possibility to use the skin tone selected by the user previously
+     * @type {String}
+     * @default 'Default'
+     * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'
+     * @example
+     * <dt-emoji-picker :skinTone="'Default'" />
+     */
+    skinTone: {
+      type: String,
+      default: "Default"
+    },
+    /**
+     * Tooltip shown when skin selector button is hovered.
+     * @type {String}
+     * @required
+     * @example
+     * <dt-emoji-picker :skin-selector-button-tooltip-label="'Change default skin tone'" />
+     */
+    skinSelectorButtonTooltipLabel: {
+      type: String,
+      required: true
+    }
+  },
+  emits: [
+    /**
+     * It will emit the selected emoji
+     * @event selected-emoji
+     * @param {Object} emoji - The selected emoji from the emoji selector
+     */
+    "selected-emoji",
+    /**
+     * It will emit the selected skin tone
+     * @event skin-tone
+     * @param {String} skin - The selected skin tone from the skin selector
+     */
+    "skin-tone",
+    /**
+     * Since the keyboard events are encapsulated, we emit this event to close the picker
+     * @event close
+     */
+    "close"
+  ],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const searchQuery = vue.ref("");
+    const highlightedEmoji = vue.ref(null);
+    const selectedTabset = vue.ref({});
+    const scrollIntoTab = vue.ref(0);
+    const isScrolling = vue.ref(false);
+    const showRecentlyUsedTab = vue.computed(() => props.recentlyUsedEmojis.length > 0);
+    function scrollToSelectedTabset(tabId) {
+      searchQuery.value = "";
+      selectedTabset.value = tabId;
+      selectedTabset.value = { ...selectedTabset.value, tabId };
+    }
+    function updateScrollIntoTab(value) {
+      scrollIntoTab.value = value;
+    }
+    function updateIsScrolling(value) {
+      isScrolling.value = value;
+    }
+    function updateHighlightedEmoji(emoji) {
+      highlightedEmoji.value = emoji;
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createVNode(_sfc_main$4, {
+            ref: "tabsetRef",
+            "emoji-filter": searchQuery.value,
+            "show-recently-used-tab": showRecentlyUsedTab.value,
+            "scroll-into-tab": scrollIntoTab.value,
+            "tabset-labels": __props.tabSetLabels,
+            "is-scrolling": isScrolling.value,
+            onFocusSearchInput: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.searchInputRef.focusSearchInput()),
+            onFocusSkinSelector: _cache[1] || (_cache[1] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
+            onSelectedTabset: scrollToSelectedTabset,
+            onKeydown: _cache[2] || (_cache[2] = vue.withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels", "is-scrolling"])
+        ]),
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.createVNode(_sfc_main$5, {
+            ref: "searchInputRef",
+            modelValue: searchQuery.value,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => searchQuery.value = $event),
+            "search-placeholder-label": __props.searchPlaceholderLabel,
+            onSelectFirstEmoji: _cache[4] || (_cache[4] = ($event) => emits("selected-emoji", highlightedEmoji.value)),
+            onFocusTabset: _cache[5] || (_cache[5] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
+            onFocusEmojiSelector: _cache[6] || (_cache[6] = ($event) => _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
+            onKeydown: _cache[7] || (_cache[7] = vue.withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["modelValue", "search-placeholder-label"]),
+          vue.createVNode(_sfc_main$3, {
+            ref: "emojiSelectorRef",
+            "emoji-filter": searchQuery.value,
+            "skin-tone": __props.skinTone,
+            "tabset-labels": __props.tabSetLabels,
+            "search-results-label": __props.searchResultsLabel,
+            "search-no-results-label": __props.searchNoResultsLabel,
+            "recently-used-emojis": __props.recentlyUsedEmojis,
+            "selected-tabset": selectedTabset.value,
+            onScrollIntoTab: updateScrollIntoTab,
+            onIsScrolling: updateIsScrolling,
+            onHighlightedEmoji: updateHighlightedEmoji,
+            onSelectedEmoji: _cache[8] || (_cache[8] = ($event) => emits("selected-emoji", $event)),
+            onFocusSkinSelector: _cache[9] || (_cache[9] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
+            onFocusSearchInput: _cache[10] || (_cache[10] = ($event) => _ctx.$refs.searchInputRef.focusSearchInput()),
+            onKeydown: _cache[11] || (_cache[11] = vue.withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])
+        ]),
+        vue.createElementVNode("div", _hoisted_4, [
+          vue.createVNode(_sfc_main$1, { emoji: highlightedEmoji.value }, null, 8, ["emoji"]),
+          vue.createVNode(_sfc_main$2, {
+            ref: "skinSelectorRef",
+            "is-hovering": !!highlightedEmoji.value,
+            "skin-selector-button-tooltip-label": __props.skinSelectorButtonTooltipLabel,
+            "skin-tone": __props.skinTone,
+            onSkinTone: _cache[12] || (_cache[12] = ($event) => emits("skin-tone", $event)),
+            onFocusTabset: _cache[13] || (_cache[13] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
+            onFocusLastEmoji: _cache[14] || (_cache[14] = ($event) => _ctx.$refs.emojiSelectorRef.focusLastEmoji()),
+            onKeydown: _cache[15] || (_cache[15] = vue.withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
+        ])
+      ]);
+    };
+  }
+};
+exports.ARROW_KEYS = ARROW_KEYS;
+exports.CDN_URL = CDN_URL;
+exports.DtEmojiPicker = _sfc_main;
+exports.EMOJIS_PER_ROW = EMOJIS_PER_ROW;
+exports.EMOJI_PICKER_CATEGORIES = EMOJI_PICKER_CATEGORIES;
+exports.EMOJI_PICKER_SKIN_TONE_MODIFIERS = EMOJI_PICKER_SKIN_TONE_MODIFIERS;
 //# sourceMappingURL=emoji-picker.cjs.map