react-emoji-search/dist/index.mjs

Whatsapp like emoji picker

import Ce from"style-inject";import C from"classnames";import a,{useState as h,useEffect as y,useRef as k,useCallback as D}from"react";import{CSSTransition as Y}from"react-transition-group";import O from"./data/emojis.js";import Oe from"scroll-into-view-if-needed";var Se='/*! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.right-3{right:.75rem}.top-0{top:0}.-top-15{top:-3.875rem}.left-8{left:2rem}.z-20{z-index:20}.mb-6{margin-bottom:1.5rem}.mb-2{margin-bottom:.5rem}.mr-3{margin-right:.75rem}.mb-1{margin-bottom:.25rem}.block{display:block}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.h-1{height:.25rem}.w-full{width:100%}.w-min{width:-moz-min-content;width:min-content}.grow{flex-grow:1}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.grid-flow-col{grid-auto-flow:column}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.border-r{border-right-width:1px}.border-primary-300{--tw-border-opacity:1;border-color:rgb(98 102 105/var(--tw-border-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-picker-light{--tw-bg-opacity:1;background-color:rgb(240 240 240/var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.px-3\\.5{padding-left:.875rem;padding-right:.875rem}.px-px{padding-left:1px;padding-right:1px}.px-2{padding-left:.5rem;padding-right:.5rem}.pr-3{padding-right:.75rem}.pr-2{padding-right:.5rem}.pt-3{padding-top:.75rem}.pb-2{padding-bottom:.5rem}.text-left{text-align:left}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.opacity-50{opacity:.5}.opacity-40{opacity:.4}.opacity-90{opacity:.9}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.emoji-picker{font-family:Arial,Helvetica,sans-serif}.emoji-img{background-repeat:no-repeat;background-size:510% 510%;display:block;height:100%;image-rendering:-webkit-optimize-contrast;width:100%}.indicator{transition:all .3s cubic-bezier(.4,0,.2,1) 0ms;width:96px}.emoji-list{height:100%;overflow-x:hidden;overflow-y:scroll;padding-bottom:3.875rem;padding-top:3.875rem;position:relative}.emoji-grid button{display:inline-flex}.emoji-grid{display:grid;padding-right:1.25rem;place-items:center}@media (min-width:768px){.emoji-grid{padding-right:1rem}}.cancel-button::-webkit-search-cancel-button{filter:grayscale(80%);opacity:.5}.dark .cancel-button::-webkit-search-cancel-button{filter:brightness(8);opacity:.5}.slide-enter{transform:translateY(-100%);transition:.5s cubic-bezier(0,1,.5,1)}.slide-enter-active,.slide-exit{transform:translateY(0)}.slide-exit{transition:.5s ease-in-out}.slide-exit-active{transform:translateY(-100%)}.spring-enter{opacity:0;transform:scale(0);transform-origin:left bottom;transition:.15s}.spring-enter-active,.spring-exit{opacity:1;transform:scale(1);transform-origin:left bottom}.spring-exit{transition:.1s}.spring-exit-active{opacity:0;transform:scale(0);transform-origin:left bottom}::-webkit-scrollbar{height:.375rem;width:.375rem}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{--tw-bg-opacity:0.4;background-color:rgb(135 141 146/var(--tw-bg-opacity))}::-webkit-scrollbar-thumb:hover{background:#555}.arrow{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #f0f0f0;position:absolute;top:99%}.dark .arrow{border-top:10px solid #2a2f32}.emoji-native{line-height:normal}.dark .dark\\:bg-primary-500{--tw-bg-opacity:1;background-color:rgb(30 36 40/var(--tw-bg-opacity))}.dark .dark\\:bg-primary-400{--tw-bg-opacity:1;background-color:rgb(38 45 49/var(--tw-bg-opacity))}.dark .dark\\:bg-picker-dark{--tw-bg-opacity:1;background-color:rgb(42 47 50/var(--tw-bg-opacity))}.dark .dark\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark .dark\\:text-secondary-100{color:hsla(240,4%,95%,.45)}.dark .dark\\:text-primary-300{--tw-text-opacity:1;color:rgb(98 102 105/var(--tw-text-opacity))}.dark .dark\\:text-secondary-200{color:hsla(240,4%,95%,.63)}.dark .dark\\:opacity-40{opacity:.4}.dark .dark\\:opacity-90{opacity:.9}.dark .dark\\:shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:640px){.sm\\:px-4{padding-left:1rem;padding-right:1rem}}@media (min-width:768px){.md\\:px-9{padding-left:2.25rem;padding-right:2.25rem}}';Ce(Se);const P="react-emoji-search-recent",G="react-emoji-search-variations",Pe={Recent:"recent","Smileys & People":"smileys-people","Animals & Nature":"animals-nature","Food & Drink":"food-drink",Activity:"activity","Travel & Places":"travel-places",Objects:"objects",Symbols:"symbols",Flags:"flags"},_=t=>{const e=localStorage.getItem(t);return e?JSON.parse(e):null};function U(t,e){const[r,o]=h(e);return y(()=>{const n=_(t);n&&o(n)},[t]),[r,(n,i)=>{o(i),localStorage.setItem(n,JSON.stringify(i))}]}const Ne=(t,e)=>t[1]>e[1]?-1:t[1]<e[1]?1:0,$e=(t,e)=>{const r=_(P);return r?Object.entries(r).sort(Ne).reduce((o,[n])=>{const i=t.find(c=>c[e]&&c.native===n);return i&&o.push(i),o},[]):[]},Te=(t,e,r)=>O.filter(o=>(e==="native"||o[e]===1)&&o.version<=r&&o.keywords.some(n=>n.includes(t))),Me=(t,e)=>{const r={Recent:$e(O,t),"Smileys & People":[],"Animals & Nature":[],"Food & Drink":[],Activity:[],"Travel & Places":[],Objects:[],Symbols:[],Flags:[]},o=O.reduce((n,i)=>(t!=="native"&&i[t]!==1||i.version&&i.version<=e&&n[i.category].push(i),n),r);return o.Recent.length||delete o.Recent,o};function Ie(t,e){return new Promise(r=>{if(!(t instanceof Element))throw new TypeError("Argument 1 must be an Element");let o=0,n=null;Oe(t,{behavior:"smooth",boundary:e,block:"start"}),requestAnimationFrame(i);function i(){const c=t.getBoundingClientRect().top;if(c===n){if(o++>2)return r(void 0)}else o=0,n=c;requestAnimationFrame(i)}})}const X=({children:t,style:e,onClick:r,testId:o,onLongPress:n})=>{const[i,c]=h(!1),[s,p]=h(null),d=k(null),u=function(){return c(!1),p(setTimeout(function(){c(!0),d.current&&n&&n(d.current)},250)),!1},g=function(){s!==null&&(clearTimeout(s),p(null))};return a.createElement("button",{"data-testid":o,style:e,ref:d,onClick:b=>{if(b.stopPropagation(),s!==null&&(clearTimeout(s),p(null)),i){c(!1);return}r&&r(b)},onMouseDown:u,onTouchStart:u,onMouseOut:g,onTouchCancel:g,onTouchEnd:g},t)},H=({emoji:t,size:e=32,quality:r="clean",sheetSize:o=64,set:n="apple",keywords:i})=>{const c=`https://cdn.jsdelivr.net/npm/emoji-datasource-${n}-split@1.0.6/img/sheets-${r}/${o}/${n}/${t.img}`;return a.createElement("span",{"data-testid":"emoji-img","data-image":c,title:i?.join(","),"aria-label":t.native,className:"emoji-img",style:{width:e,height:e,backgroundImage:`url(${c})`,backgroundPositionX:`${t.sheetX*(100/4)}%`,backgroundPositionY:`${t.sheetY*(100/4)}%`}})},J=({emoji:t,size:e=32,keywords:r})=>a.createElement("span",{"data-testid":"emoji-native","aria-label":t,title:r?.join(","),className:"emoji-native",style:{fontSize:`${e}px`}},t);var Ae=Object.defineProperty,N=Object.getOwnPropertySymbols,K=Object.prototype.hasOwnProperty,Z=Object.prototype.propertyIsEnumerable,Q=(t,e,r)=>e in t?Ae(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ve=(t,e)=>{for(var r in e||(e={}))K.call(e,r)&&Q(t,r,e[r]);if(N)for(var r of N(e))Z.call(e,r)&&Q(t,r,e[r]);return t},He=(t,e)=>{var r={};for(var o in t)K.call(t,o)&&e.indexOf(o)<0&&(r[o]=t[o]);if(t!=null&&N)for(var o of N(t))e.indexOf(o)<0&&Z.call(t,o)&&(r[o]=t[o]);return r};const $=t=>{var e=t,{data:r}=e,o=He(e,["data"]);return o.set==="native"?a.createElement(J,{size:o.size,keywords:r.keywords,emoji:r.native}):a.createElement(H,Ve({emoji:r,keywords:r.keywords},o))},ee=10,te=12,re=({boundaryElement:t,arrowRef:e,popoverRef:r,targetElement:o})=>()=>{const n=t?.clientWidth||0,i=t?.getBoundingClientRect().y||0;if(o&&r.current){const c=o.getBoundingClientRect().y-i-o.offsetHeight*1.9;r.current.style.setProperty("top",`${c}px`),o.offsetLeft+r.current.offsetWidth+o.offsetWidth<=n?(r.current.style.setProperty("left",`${o.offsetLeft+ee-6}px`),e.current&&(e.current.style.removeProperty("right"),e.current.style.setProperty("left",`${te}px`))):(r.current.style.setProperty("left",`${o.offsetLeft-r.current.offsetWidth+o.offsetWidth+ee+6}px`),e.current&&(e.current.style.removeProperty("left"),e.current.style.setProperty("right",`${te}px`)))}},Le=({children:t,isOpen:e,targetElement:r,boundaryElement:o,styles:n})=>{const i=k(null),c=k(null),s=re({boundaryElement:o,arrowRef:c,popoverRef:i,targetElement:r});return y(()=>(window.addEventListener("resize",s),()=>{window.removeEventListener("resize",s)}),[re]),a.createElement("div",{ref:i,className:"absolute left-8 z-20"},a.createElement(Y,{in:e,timeout:{appear:150,enter:150,exit:100},classNames:"spring",unmountOnExit:!0,onEntering:s},a.createElement("div",{"data-testid":"popover",onClick:p=>{p.stopPropagation(),p.preventDefault()},className:"shadow-md rounded filter bg-picker-light dark:bg-picker-dark w-min relative select-none flex",style:{backgroundColor:n?.backgroundColor}},e&&a.createElement(a.Fragment,null,t,a.createElement("div",{"data-testid":"arrow",className:"arrow",style:{borderTopColor:n?.backgroundColor},ref:c})))))},Re=({isOpen:t,styles:e,targetElement:r,emojiSize:o,boundaryElement:n,emoji:i,sheetSize:c,set:s,onEmojiClick:p})=>a.createElement(Le,{isOpen:t,boundaryElement:n,targetElement:r,styles:e},i&&a.createElement("ul",{"data-testid":"skin-tone-picker",className:"flex items-center text-3xl py-2 px-3.5"},a.createElement("li",{onClick:()=>{p&&p(i)},className:"border-r border-primary-300 pr-3 mr-3 cursor-pointer flex"},a.createElement($,{data:i,set:s,sheetSize:c,size:o})),i.skinVariations&&Object.values(i.skinVariations).map(d=>a.createElement("li",{key:`variation-${d.native}`,className:"cursor-pointer px-px flex",onClick:()=>{p&&p(d)}},a.createElement($,{data:d,size:o,sheetSize:c,set:s})))));var Be=Object.defineProperty,Fe=Object.defineProperties,We=Object.getOwnPropertyDescriptors,oe=Object.getOwnPropertySymbols,qe=Object.prototype.hasOwnProperty,De=Object.prototype.propertyIsEnumerable,ae=(t,e,r)=>e in t?Be(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,L=(t,e)=>{for(var r in e||(e={}))qe.call(e,r)&&ae(t,r,e[r]);if(oe)for(var r of oe(e))De.call(e,r)&&ae(t,r,e[r]);return t},R=(t,e)=>Fe(t,We(e));const Ye=(t,e)=>{const[r,o]=h(!1),[n,i]=h({width:0,left:0,shouldAnimate:!0}),c=()=>{const s=t.current[e];s&&i(R(L({},n),{width:s.offsetWidth,left:s.offsetLeft,shouldAnimate:!1}))};return y(()=>{localStorage.getItem(P)&&o(!0);const s=t.current[0];s&&i(R(L({},n),{shouldAnimate:!1,width:s.offsetWidth}))},[t]),y(()=>{const s=()=>{c()};return window.addEventListener("resize",s),()=>{window.removeEventListener("resize",s)}},[c]),y(()=>{const s=t.current[e];s&&i(R(L({},n),{shouldAnimate:!0,width:s.offsetWidth,left:s.offsetLeft}))},[e]),{showRecent:r,indicatorState:n}},Ge=()=>a.createElement("svg",{viewBox:"0 0 24 24",width:"24",height:"24"},a.createElement("path",{fill:"currentColor",d:"M14.8 15.3l1.3-3.8c.1-.2 0-.5-.2-.6l-3.3-2.4c-.2-.1-.5-.1-.6 0l-3.3 2.4c-.2.1-.3.4-.2.6l1.3 3.8c.1.2.3.4.5.4h4c.2 0 .4-.2.5-.4z"}),a.createElement("path",{fill:"currentColor",d:"M12 1.9C6.4 1.9 1.9 6.4 1.9 12S6.4 22.1 12 22.1 22.1 17.6 22.1 12 17.6 1.9 12 1.9zM9.8 20.3c.1-.2.1-.4 0-.6l-1.4-2.3c-.1-.1-.2-.2-.4-.3l-2.5-.6c-.2-.1-.5.1-.6.2-.9-1.3-1.4-2.9-1.5-4.5.2 0 .4 0 .5-.2l1.7-2c.1 0 .2-.2.2-.3l-.3-2.6c0-.2-.1-.3-.3-.4C6.2 5.4 7.5 4.5 9 4c0 .1.2.3.3.3l2.5 1.1c.1.1.3.1.4 0l2.5-1.1.3-.3c1.5.6 2.7 1.5 3.7 2.7-.1.1-.2.2-.2.4l-.2 2.6c0 .2 0 .3.1.4l1.7 2c.1.1.3.2.4.2 0 1.6-.5 3.1-1.3 4.4-.1-.1-.2-.1-.4-.1l-2.5.6c-.1 0-.3.1-.4.3l-1.4 2.3c-.1.2-.1.3 0 .5-.8.2-1.6.4-2.5.4-.7-.1-1.5-.2-2.2-.4z"})),_e=()=>a.createElement("svg",{viewBox:"0 0 24 24",width:"24",height:"24"},a.createElement("path",{fill:"currentColor",d:"M5.5 3.8v-.2c0-.3-.2-.5-.5-.5h-.5c-.3 0-.5.2-.5.5V21c0 .3.2.5.5.5H5c.3 0 .5-.2.5-.5v-6.2c5 1.8 9.3-2.7 14.5.6V4.1C14.9 1 10.3 5.6 5.5 3.8zm10.3 8.8c-1.4 0-2.8.3-4.1.6-1.2.3-2.4.5-3.5.5-.9 0-1.8-.2-2.6-.5V5.4c.8.2 1.5.3 2.3.3 1.5 0 2.9-.4 4.3-.7 1.3-.3 2.5-.6 3.8-.6.9 0 1.7.2 2.5.5V13c-.9-.2-1.8-.4-2.7-.4z"})),Ue=()=>a.createElement("svg",{viewBox:"0 0 24 24",width:"24",height:"24"},a.createElement("path",{fill:"currentColor",d:"M7.4 11.4c-.4 0-.8.4-.8.8V14c0 .4.4.8.8.8s.8-.4.6-.8v-1.8c0-.6-.2-.8-.6-.8zM4.6 10.4c-.4 0-.8.4-.8.8V15c0 .4.4.8.8.8s.8-.4.8-.8v-3.8c0-.6-.4-.8-.8-.8z"}),a.createElement("path",{fill:"currentColor",d:"M23 7.2c-.6-.6-1.6-.8-2.8-.6-.2 0-.4.2-.6.2V4.2c0-.6-.6-1.2-1.2-1.2h-17C.8 3 .2 3.6.2 4.2v7.4c0 5.4 3.2 9.6 8.4 9.6h2.2c4.2 0 7-2.6 8-6h.4c2.2-.4 4-2.6 4.4-4.8.4-1.4.2-2.4-.6-3.2zm-4.8-2.8v3H1.6v-3h16.6zM11 19.8H8.8c-5.2 0-7-4.4-7-8.2V8.8h16.6v2.8c-.2 4-2.4 8.2-7.4 8.2zm8.4-6.2c.2-.6.2-1.4.2-2V8.4c.4-.2.6-.4 1-.4.6-.2 1.2 0 1.4.4.4.4.6 1 .4 1.8-.2 1.4-1.6 3-3 3.4z"})),Xe=()=>a.createElement("svg",{viewBox:"0 0 24 24",width:"24",height:"24"},a.createElement("path",{fill:"currentColor",d:"M7.2 12.2c.608 0 1.1.627 1.1 1.4S7.808 15 7.2 15s-1.1-.627-1.1-1.4.492-1.4 1.1-1.4zm9.7 0c.608 0 1.1.627 1.1 1.4s-.492 1.4-1.1 1.4-1.1-.627-1.1-1.4.492-1.4 1.1-1.4zm4.6-1.1l-1.2-2.4c.9-.4 1.7-1.3 2-2.2.3-.7.4-2.1-1-3.5-1-.9-2-1.2-2.9-1-1.1.3-1.9 1.2-2.3 1.9-1.4-.7-2.9-.8-4.1-.8-1.5 0-2.8.3-4 .9-.5-.9-1.2-1.8-2.3-2.1-1-.2-2 .1-2.9 1-1 1-1.4 2.2-1 3.4.4 1.1 1.2 1.9 2 2.3-.2.5-.4 1-.6 1.6l-.2.2c-.3.7-.5 1.3-.8 1.9-.4 1-.9 1.9-.9 3.1 0 1.6.8 6.7 10.5 6.7 3.8 0 6.6-.7 8.5-2.2s2.2-3.4 2.2-4.3c.2-2.1-.2-2.9-1-4.5zm-2.7-7.6c.4-.1.9.1 1.5.6.6.6.8 1.2.6 1.8-.2.6-.7 1.1-1.2 1.3-.6-1.2-1.3-2-2.1-2.6.2-.4.6-1 1.2-1.1zM3.3 5.9c-.2-.6 0-1.2.6-1.8.5-.5 1.1-.7 1.5-.6.5.1 1.1.7 1.3 1.2-.9.7-1.6 1.5-2.2 2.6C4 7 3.4 6.5 3.3 5.9zm17.8 9.7c0 .7-.2 2-1.6 3.1-1.5 1.2-4.1 1.8-7.5 1.8-8.3 0-8.9-3.9-8.9-5.1 0-.8.3-1.5.7-2.4.3-.6.6-1.2.8-2.1l.1-.2c.5-1.5 2-6.2 7.3-6.2 1.2 0 2.5.2 3.7.9.1.1.5.3.5.3.9.7 1.7 1.7 2.4 3.2.6 1.3 1 2.2 1.4 2.9.8 1.6 1.1 2.1 1.1 3.8zM14.6 17c-.1.1-.6.4-1.2.3-.4-.1-.7-.3-.9-.8 0-.1-.1-.1-.1-.2.8-.1 1.3-.6 1.3-1.3s-.7 0-1.7 0c-.9 0-1.7-.7-1.7 0 0 .6.6 1.2 1.4 1.3l-.1.1c-.3.4-.5.7-.9.8-.5.1-1.1-.1-1.3-.3-.2-.2-.5-.1-.7.1s-.1.5.1.7c.1.1.8.5 1.6.5.2 0 .4 0 .5-.1.4-.1.8-.3 1.1-.7.4.4.9.6 1.2.7.8.2 1.7-.2 2-.5.2-.2.2-.5 0-.7-.1 0-.4-.1-.6.1z"})),Je=()=>a.createElement("svg",{viewBox:"0 0 24 24",width:"24",height:"24"},a.createElement("path",{fill:"currentColor",d:"M18.8 6.7c-.9-2.6-3.2-4.6-6-4.9h-1.6c-2.8.3-5.1 2.2-6 4.9-1 3 .1 6.2 2.7 8H8c.2.1.3.4.3.6v2c0 .8.6 1.4 1.4 1.4h4.6c.8 0 1.4-.6 1.4-1.4v-2c0-.2.1-.5.3-.6l.1-.1c2.5-1.8 3.6-5 2.7-7.9zm-3.5 6.9l-.1.1c-.5.4-.9 1-.9 1.7v2s0 .1-.1.1H9.8s-.1 0-.1-.1v-2c0-.7-.3-1.3-.9-1.7l-.1-.1c-2-1.4-3-4-2.2-6.5.7-2.1 2.6-3.7 4.9-3.9H12.7c2.2.2 4.2 1.8 4.9 3.9.7 2.4-.2 5-2.3 6.5zM9.2 21.2c0 .6.5 1 1 1h3.7c.6 0 1-.5 1-1v-1H9.2v1z"}),a.createElement("path",{fill:"currentColor",d:"M13.6 10.5c-.4 0-.8.3-.8.8 0 .1 0 .2.1.3-.2.3-.5.5-.8.5s-.6-.2-.8-.5c0-.1.1-.2.1-.3 0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8 0 .4.3.7.7.8.3.4.7.7 1.1.8V15c0 .2.2.4.4.4s.4-.2.4-.4v-2.1c.4-.1.8-.4 1.1-.8.4 0 .8-.3.8-.8s-.3-.8-.7-.8z"})),Ke=()=>a.createElement("svg",{viewBox:"0 0 24 24",width:"24",height:"24"},a.createElement("path",{fill:"currentColor",d:"M12 22.1C6.4 22.1 1.9 17.6 1.9 12S6.4 1.9 12 1.9 22.1 6.4 22.1 12 17.6 22.1 12 22.1zm0-18.6c-4.7 0-8.5 3.8-8.5 8.5s3.8 8.5 8.5 8.5 8.5-3.8 8.5-8.5-3.8-8.5-8.5-8.5z"}),a.createElement("path",{fill:"currentColor",d:"M8.9 11.6c.7 0 1.3-.7 1.3-1.5s-.6-1.5-1.3-1.5-1.3.7-1.3 1.5.6 1.5 1.3 1.5zM17.1 13.6c-1.1.1-3 .4-5 .4s-4-.3-5-.4c-.4 0-.6.3-.4.7 1.1 2 3.1 3.5 5.5 3.5 2.3 0 4.4-1.5 5.5-3.5.1-.3-.2-.7-.6-.7zM12.3 16c-2.6 0-4.1-1-4.2-1.6 0 0 4.4.9 8 0 0 0-.5 1.6-3.8 1.6zM15.1 11.6c.7 0 1.3-.7 1.3-1.5s-.6-1.5-1.3-1.5-1.3.7-1.3 1.5.6 1.5 1.3 1.5z"})),Ze=()=>a.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24"},a.createElement("path",{d:"M20.538 11.975a8.563 8.563 0 1 0-17.126 0 8.563 8.563 0 0 0 17.126 0zm1.412 0c0 5.509-4.466 9.975-9.975 9.975C6.465 21.95 2 17.484 2 11.975 2 6.465 6.466 2 11.975 2c5.509 0 9.975 4.466 9.975 9.975zm-9.832-5.27v5.692l4.386 2.627a.706.706 0 1 1-.725 1.212l-5.073-3.04v-6.49a.706.706 0 1 1 1.412 0z",fill:"currentColor"})),Qe=()=>a.createElement("svg",{viewBox:"0 0 24 24",width:"24",height:"24"},a.createElement("path",{fill:"currentColor",d:"M14.5 12.9V11h2.2l-.2-1.3h-2V7.3H13v2.5h-2V7.4H9.5v2.4H7.2l.2 1.2h2.1v1.9H7.3l.2 1.3h2v2.4H11v-2.4h2v2.4h1.5v-2.4h2.3l-.2-1.3h-2.1zM11 11h2v1.9h-2V11z"}),a.createElement("path",{fill:"currentColor",d:"M16.1 2.6H7.9C5 2.6 2.6 5 2.6 7.9V16c0 3 2.4 5.3 5.3 5.3H16c3 0 5.3-2.4 5.3-5.3V7.9c.1-2.9-2.3-5.3-5.2-5.3zm3.7 13.5c0 2.1-1.6 3.8-3.7 3.8H7.9c-2.1 0-3.8-1.7-3.8-3.8V7.9c0-2.1 1.7-3.8 3.8-3.8H16c2.1 0 3.8 1.7 3.8 3.8v8.2z"})),et=()=>a.createElement("svg",{viewBox:"0 0 24 24",width:"24",height:"24"},a.createElement("path",{fill:"currentColor",d:"M21.5 11.5c0-.7-.1-1.4-.3-2l-1.5-4.3C19.2 3.9 18 3 16.6 3H7.3c-1.4 0-2.6.9-3.1 2.2L2.6 9.9c-.1.4-.2.7-.2 1.1v8.6c0 .6.5 1.1 1.1 1.1h1.1c.6 0 1.1-.5 1.1-1.1v-1.1h12.7v1.1c0 .6.5 1.1 1.1 1.1h1.1c.6 0 1.1-.5 1.1-1.1v-7.4l-.2-.7zM4.1 10.4l1.6-4.7c.2-.7.9-1.2 1.7-1.2h9.2c.7 0 1.4.5 1.6 1.2l1.5 4.3c.1.3.2.6.2.8H4c-.1-.1 0-.3.1-.4zm1.4 5.7c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5c-.1.8-.7 1.5-1.5 1.5zm9.4-.6H9.3c-.5 0-1-.4-1-1 0-.5.4-1 1-1h5.6c.5 0 1 .4 1 1-.1.6-.5 1-1 1zm3.7.6c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"}));var tt=Object.defineProperty,rt=Object.defineProperties,ot=Object.getOwnPropertyDescriptors,T=Object.getOwnPropertySymbols,ie=Object.prototype.hasOwnProperty,ne=Object.prototype.propertyIsEnumerable,le=(t,e,r)=>e in t?tt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,at=(t,e)=>{for(var r in e||(e={}))ie.call(e,r)&&le(t,r,e[r]);if(T)for(var r of T(e))ne.call(e,r)&&le(t,r,e[r]);return t},it=(t,e)=>rt(t,ot(e)),nt=(t,e)=>{var r={};for(var o in t)ie.call(t,o)&&e.indexOf(o)<0&&(r[o]=t[o]);if(t!=null&&T)for(var o of T(t))e.indexOf(o)<0&&ne.call(t,o)&&(r[o]=t[o]);return r};const lt=[{id:"recent",name:"Recent",icon:a.createElement(Ze,null)},{id:"smileys-people",name:"Smileys & People",icon:a.createElement(Ke,null)},{id:"animals-nature",name:"Animals & Nature",icon:a.createElement(Xe,null)},{id:"food-drink",name:"Food & Drink",icon:a.createElement(Ue,null)},{id:"activity",name:"Activity",icon:a.createElement(Ge,null)},{id:"travel-places",name:"Travel & Places",icon:a.createElement(et,null)},{id:"objects",name:"Objects",icon:a.createElement(Je,null)},{id:"symbols",name:"Symbols",icon:a.createElement(Qe,null)},{id:"flags",name:"Flags",icon:a.createElement(_e,null)}],ct=({variant:t,value:e,onChange:r,showIndicator:o,styles:n})=>{const i=k([]),{indicatorState:c,showRecent:s}=Ye(i,e),p=C("flex items-center text-gray-400 dark:text-primary-300 dark:shadow-sm h-full overflow-hidden",{"grid grid-flow-col justify-between":t==="fullWidth"}),d=c,{shouldAnimate:u}=d,g=nt(d,["shouldAnimate"]);return a.createElement("div",{className:"relative w-full mb-1 text-base"},a.createElement("div",{"data-testid":"tabs",className:p},lt.filter(b=>!(b.id==="recent"&&!s)).map((b,w)=>a.createElement("button",{ref:E=>{i.current[w]=E},key:`tabs-${b.id}`,onClick:E=>r(E,w),"data-id":b.id,title:b.name,className:C("px-2 sm:px-4 md:px-9 tab outline-none pt-3 pb-2 text-gray-600 dark:text-secondary-200",{"opacity-50 dark:opacity-40":e!==w||!o,"dark:opacity-90":o&&e===w}),style:{color:n?.fontColor}},a.createElement("span",{className:"block"},b.icon)))),o&&a.createElement("span",{"data-testid":"indicator",className:C("h-1 bg-green-600 block absolute",{indicator:u&&o}),style:it(at({},g),{backgroundColor:n?.indicatorColor})}))},ce=({emojiSize:t,emojiSpacing:e,children:r})=>a.createElement("div",{"data-testid":"emoji-grid",className:"emoji-grid",style:{gap:`${e}px`,gridTemplateColumns:`repeat(auto-fill, minmax(min(${t}px, 100%), 1fr))`}},r),st=t=>{const e=t.currentTarget.scrollTop+40,r=t.currentTarget;if(t.currentTarget.classList.contains("scrolling"))return;const o=r.querySelectorAll(".emoji-category");for(let n=0;n<o.length;n++){const i=o.item(n);if(e>=i.offsetTop&&e<i.offsetTop+i.clientHeight)return n}};var dt=Object.defineProperty,mt=Object.defineProperties,pt=Object.getOwnPropertyDescriptors,se=Object.getOwnPropertySymbols,ut=Object.prototype.hasOwnProperty,gt=Object.prototype.propertyIsEnumerable,de=(t,e,r)=>e in t?dt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,me=(t,e)=>{for(var r in e||(e={}))ut.call(e,r)&&de(t,r,e[r]);if(se)for(var r of se(e))gt.call(e,r)&&de(t,r,e[r]);return t},pe=(t,e)=>mt(t,pt(e));const bt=({tabsVariant:t="default",mode:e="dark",set:r="apple",emojiVersion:o=12,emojiSpacing:n=12,emojiSize:i=32,sheetSize:c=64,quality:s="clean",onEmojiClick:p=()=>{},styles:d})=>{const u=k(null),g=k(null),b=k(null),[w,E]=U(P,{}),[j,he]=U(G,{}),[we,I]=h(!0),[ve,ye]=h({}),[ke,B]=h(0),[S,A]=h(void 0),[F,x]=h(!1),[z,xe]=h({element:null,emoji:null});y(()=>{const l=Me(r,o);ye(l)},[r,o]);const Ee=D(l=>{const m=st(l);typeof m<"u"&&B(m)},[]),je=D(l=>{const m=l.currentTarget.value;setTimeout(()=>{if(m.trim()){const f=m.toLowerCase(),v=Te(f,r,o);A(v)}else A(void 0)},0)},[]),ze=(l,m)=>{const f=l.currentTarget.getAttribute("data-id");if(f){const v=l.currentTarget.ownerDocument.querySelector(`#category-${f}`);v&&(B(m),setTimeout(()=>{g.current&&(g.current.value="",A(void 0)),I(!0),u.current&&(u.current.classList.add("scrolling"),Ie(v,u.current).then(()=>{u.current&&u.current.classList.remove("scrolling")}))},0))}},V=(l,m)=>{x(!1),xe({element:l,emoji:m}),setTimeout(()=>{x(!0)},100)},W=l=>{E(P,pe(me({},w),{[l.native]:w[l.native]+1||1}))},q=(l,m)=>{if(x(!1),m.skinVariations&&!j[m.native]){V(l.currentTarget,m);return}W(m);const f=j[m.native]||m;p(f.native)};return a.createElement("div",{"data-testid":"emoji-picker",onClick:()=>{F&&x(!1)},className:C("w-full h-full flex flex-col emoji-picker overflow-hidden",e)},a.createElement("div",{className:"dark:text-white w-full h-full flex flex-col bg-gray-100 dark:bg-primary-500",style:{backgroundColor:d?.backgroundColor}},a.createElement(ct,{variant:t,value:ke,styles:{indicatorColor:d?.indicatorColor,fontColor:d?.tabsFontColor},showIndicator:!S,onChange:ze}),a.createElement("div",{className:"w-full h-full relative"},a.createElement("span",{className:"absolute left-0 right-3 pr-3 top-0 z-20 text-base overflow-hidden"},a.createElement(Y,{in:we,timeout:500,classNames:"slide",unmountOnExit:!0},a.createElement("div",{id:"search-input",className:"pr-2 bg-gray-100 dark:bg-primary-500 px-3 py-1.5",style:{backgroundColor:d?.backgroundColor}},a.createElement("input",{"data-testid":"search-input",ref:g,type:"search",className:"cancel-button w-full rounded px-3 py-2 text-gray-600 dark:text-white bg-gray-200 dark:bg-primary-400 outline-none",placeholder:"Search Emoji",onChange:je,style:{backgroundColor:d?.searchBackgroundColor,color:d?.searchFontColor}})))),a.createElement(Re,{isOpen:F,set:r,emojiSize:i,sheetSize:c,boundaryElement:b.current,targetElement:z.element,emoji:z.emoji,styles:{backgroundColor:d?.skinTonePickerBackgroundColor},onEmojiClick:l=>{x(!1),z.emoji&&(he(G,pe(me({},j),{[z.emoji.native]:l})),W(z.emoji)),p(l.native)}}),a.createElement("div",{ref:b,className:"w-full px-3 relative h-full select-none"},S&&a.createElement("div",{"data-testid":"result-emojis",className:"emoji-list"},a.createElement(ce,{emojiSize:i,emojiSpacing:n},S.map(l=>a.createElement(X,{key:`result-${l.native}`,onLongPress:m=>{l.skinVariations&&V(m,l)},onClick:m=>q(m,l)},a.createElement($,{size:i,sheetSize:c,set:r,data:j[l.native]||l,quality:s}))))),a.createElement("div",{id:"emoji-list","data-testid":"emoji-list",className:C("emoji-list",{hidden:!!S}),ref:u,onScroll:Ee,onWheel:l=>{l.currentTarget.scrollTop%150===0||x(!1),l.nativeEvent.deltaY>0?I(!1):I(!0)}},Object.entries(ve).map(([l,m])=>a.createElement("div",{key:l,className:"mb-6 relative emoji-category"},a.createElement("div",{className:"text-left  text-gray-400 dark:text-secondary-100 text-sm mb-2",style:{color:d?.fontColor}},l),a.createElement("span",{id:`category-${Pe[l]}`,className:"absolute -top-15"}),a.createElement(ce,{emojiSize:i,emojiSpacing:n},m.map(f=>a.createElement(X,{testId:`${l}-emoji`,key:`emoji-${f.native}`,onLongPress:v=>{f.skinVariations&&V(v,f)},onClick:v=>q(v,f)},a.createElement($,{size:i,sheetSize:c,set:r,quality:s,data:j[f.native]||f})))))))))))};var ft=Object.defineProperty,M=Object.getOwnPropertySymbols,ue=Object.prototype.hasOwnProperty,ge=Object.prototype.propertyIsEnumerable,be=(t,e,r)=>e in t?ft(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,fe=(t,e)=>{for(var r in e||(e={}))ue.call(e,r)&&be(t,r,e[r]);if(M)for(var r of M(e))ge.call(e,r)&&be(t,r,e[r]);return t},ht=(t,e)=>{var r={};for(var o in t)ue.call(t,o)&&e.indexOf(o)<0&&(r[o]=t[o]);if(t!=null&&M)for(var o of M(t))e.indexOf(o)<0&&ge.call(t,o)&&(r[o]=t[o]);return r};const wt={native:"\u2753",sheetX:58,sheetY:10,apple:1,facebook:1,google:1,twitter:1,img:""},vt=t=>{var e=t,{unicode:r,set:o="apple"}=e,n=ht(e,["unicode","set"]);const[i,c]=h(),[s,p]=h(!1);return y(()=>{let d=!1;for(let u=0;u<O.length;u++){const g=O[u];if(g[o]){if(g.native===r){c(g),d=!0;break}else if(g.skinVariations){const b=g.skinVariations.find(w=>w.native===r&&!!w[o]);if(b){c(b),d=!0;break}}}}p(!d)},[r]),s?o==="native"?a.createElement(a.Fragment,null,"\u2753"):a.createElement(H,fe({emoji:wt,set:o},n)):i?o==="native"?a.createElement(J,{emoji:i.native}):a.createElement(H,fe({emoji:i,set:o},n)):null};export{vt as Emoji,bt as EmojiPicker};
//# sourceMappingURL=index.mjs.map