diff --git a/components/bl-emoji/README.md b/components/bl-emoji/README.md new file mode 100644 index 000000000..560aa6121 --- /dev/null +++ b/components/bl-emoji/README.md @@ -0,0 +1,47 @@ +# Emoji + +Emoji is a component of Backendless UI-Builder designer. The component is designed to select and use emojis. + +

+ main thumbnail +

+ +## Properties + +| Property | Type | Default Value | Logic | Data Binding | UI Setting | Description | +|-----------------------------------------------|--------------------------------------------------------------------|-----------------|------------------------------|--------------|------------|------------------------------------------------------------------------| +| Disabled
`disabled` | Checkbox | `false` | Disabled Logic | YES | YES | This handler allows you to disable a component. | +| Button Color
`buttonColor` | Color | `#000000` | Button Color Logic | YES | YES | This handler allows you to specify the button color. | +| Button Size
`buttonSize` | Text | "24px" | Button Size Logic | YES | YES | This handler allows you to specify the button size. | +| Dropdown List Height
`dropdownHeight` | Text | "500px" | Dropdown List Height Logic | YES | YES | This handler allows you to specify the dropdown list height. | +| Dropdown List Width
`dropdownWidth` | Text | "400px" | Dropdown List Width Logic | YES | YES | This handler allows you to specify the dropdown list width. | +| Dropdown List Position
`dropdownPosition` | Select [Left:`left`
Center:`center`
Right:`right`] | Center:`center` | Dropdown List Position Logic | YES | YES | This handler allows you to select the position of the dropdown. | +| Theme
`theme` | Select [Light:`light`
Dark:`dark`
Auto:`auto`] | Light:`light` | Theme Logic | YES | YES | This handler allows you to select a theme for the emoji dropdown list. | +| Emoji Style
`emojiStyle` | Select [Apple:`apple`
Google:`google`
Facebook:`facebook`] | Apple:`apple` | Emoji Style Logic | YES | YES | This handler allows you to select an emoji style. | +| Search Disabled
`searchDisabled` | Checkbox | `true` | Search Disabled Logic | YES | YES | This handler allows you to disable the emoji search field. | + +## Events + +| Name | Triggers | Context Blocks | +|-----------------------|---------------------------|----------------------------------------------------| +| On Emoji Select Event | when an emoji is selected | Emoji: `String`, Emoji Names: [`String`, `String`] | + +## Styles + +**Theme** +```` +@bl-customComponent-emoji-themeColor: @themePrimary; +@bl-customComponent-emoji-backgroundColor: @appBackgroundColor; +@bl-customComponent-emoji-textColor: @appTextColor; +```` + +**Dimensions** +```` +@bl-customComponent-emoji-disabled-opacity: 0.38; +@bl-customComponent-emoji-button-transform-onHover: scale(1.2); +@bl-customComponent-emoji-button-transition-onHover: transform .3s; +@bl-customComponent-emoji-emojiPicker-zIndex: 100; +@bl-customComponent-emoji-dropdownPosition-left: -93%; +@bl-customComponent-emoji-dropdownPosition-center: -46%; +@bl-customComponent-emoji-dropdownPosition-right: 0%; +```` diff --git a/components/bl-emoji/component.json b/components/bl-emoji/component.json new file mode 100644 index 000000000..c8a86c3d1 --- /dev/null +++ b/components/bl-emoji/component.json @@ -0,0 +1,187 @@ +{ + "id": "c_9a93b7887145faf22c0fe8941612bac3", + "name": "Emoji", + "description": "The component is for emoji selection.", + "showInToolbox": true, + "faIcon": "icons", + "mainJS": "dist/index.js", + "type": "custom", + "category": "Custom Components", + "properties": [ + { + "type": "checkbox", + "name": "disabled", + "label": "Disabled", + "settingTooltip": "This setting allows you to disable the component.", + "showInSettings": true, + "hasLogicHandler": true, + "handlerId": "disabledLogic", + "handlerLabel": "Disabled Logic", + "handlerDescription": "This handler allows you to disable the component.", + "dataBinding": true + }, + { + "type": "color", + "name": "buttonColor", + "label": "Button Color", + "settingTooltip": "This setting allows you to specify the color of the button.", + "showInSettings": true, + "defaultValue": "#000000", + "hasLogicHandler": true, + "handlerId": "buttonColorLogic", + "handlerLabel": "Button Color Logic", + "handlerDescription": "This handler allows you to specify the color of the button.", + "dataBinding": true + }, + { + "type": "text", + "name": "buttonSize", + "label": "Button Size", + "settingTooltip": "This setting allows you to specify the button size.", + "showInSettings": true, + "defaultValue": "24px", + "hasLogicHandler": true, + "handlerId": "buttonSizeLogic", + "handlerLabel": "Button Size Logic", + "handlerDescription": "This handler allows you to specify the button size.", + "dataBinding": true + }, + { + "type": "text", + "name": "dropdownHeight", + "label": "Dropdown List Height", + "settingTooltip": "This setting allows you to specify the dropdown list height.", + "showInSettings": true, + "defaultValue": "500px", + "hasLogicHandler": true, + "handlerId": "dropdownHeightLogic", + "handlerLabel": "Dropdown List Height Logic", + "handlerDescription": "This handler allows you to specify the dropdown list height.", + "dataBinding": true + }, + { + "type": "text", + "name": "dropdownWidth", + "label": "Dropdown List Width", + "settingTooltip": "This setting allows you to specify the dropdown list width.", + "showInSettings": true, + "defaultValue": "400px", + "hasLogicHandler": true, + "handlerId": "dropdownWidthLogic", + "handlerLabel": "Dropdown List Width Logic", + "handlerDescription": "This handler allows you to specify the dropdown list width.", + "dataBinding": true + }, + { + "type": "select", + "name": "dropdownPosition", + "label": "Dropdown List Position", + "settingTooltip": "This setting allows you to select the position of the dropdown.", + "showInSettings": true, + "defaultValue": "center", + "hasLogicHandler": true, + "handlerId": "dropdownPositionLogic", + "handlerLabel": "Dropdown List Position Logic", + "handlerDescription": "This handler allows you to select the position of the dropdown.", + "dataBinding": true, + "options": [ + { + "value": "left", + "label": "Left" + }, + { + "value": "center", + "label": "Center" + }, + { + "value": "right", + "label": "Right" + } + ] + }, + { + "type": "select", + "name": "theme", + "label": "Theme", + "settingTooltip": "This setting allows you to select a theme for the emoji dropdown list.", + "showInSettings": true, + "defaultValue": "light", + "hasLogicHandler": true, + "handlerId": "themeLogic", + "handlerLabel": "Theme Logic", + "handlerDescription": "This handler allows you to select a theme for the emoji dropdown list.", + "dataBinding": true, + "options": [ + { + "value": "light", + "label": "Light" + }, + { + "value": "dark", + "label": "Dark" + }, + { + "value": "auto", + "label": "Auto" + } + ] + }, + { + "type": "select", + "name": "emojiStyle", + "label": "Emoji Style", + "settingTooltip": "This setting allows you to select an emoji style.", + "showInSettings": true, + "defaultValue": "apple", + "hasLogicHandler": true, + "handlerId": "emojiStyleLogic", + "handlerLabel": "Emoji Style Logic", + "handlerDescription": "This handler allows you to select an emoji style.", + "dataBinding": true, + "options": [ + { + "value": "apple", + "label": "Apple" + }, + { + "value": "google", + "label": "Google" + }, + { + "value": "facebook", + "label": "Facebook" + } + ] + }, + { + "type": "checkbox", + "name": "searchDisabled", + "label": "Search Disabled", + "settingTooltip": "This setting allows you to disable the emoji search field.", + "showInSettings": true, + "hasLogicHandler": true, + "handlerId": "searchDisabledLogic", + "handlerLabel": "Search Disabled Logic", + "handlerDescription": "This handler allows you to disable the emoji search field.", + "dataBinding": true + } + ], + "eventHandlers": [ + { + "name": "onEmojiSelect", + "label": "On Emoji Select Event", + "output": false, + "handlerDescription": "This event is triggered when an emoji is selected.", + "contextBlocks": [ + { + "id": "emoji", + "label": "Emoji" + }, + { + "id": "emojiNames", + "label": "Emoji Names" + } + ] + } + ] +} diff --git a/components/bl-emoji/preview.html b/components/bl-emoji/preview.html new file mode 100644 index 000000000..785770ec2 --- /dev/null +++ b/components/bl-emoji/preview.html @@ -0,0 +1 @@ +
diff --git a/components/bl-emoji/src/emoji-picker-react.min.js b/components/bl-emoji/src/emoji-picker-react.min.js new file mode 100644 index 000000000..3f940c60b --- /dev/null +++ b/components/bl-emoji/src/emoji-picker-react.min.js @@ -0,0 +1 @@ +!function(f,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("react"));else if("function"==typeof define&&define.amd)define(["react"],e);else{var a="object"==typeof exports?e(require("react")):e(f.react);for(var n in a)("object"==typeof exports?exports:f)[n]=a[n]}}(self,(f=>(()=>{"use strict";var e={156:e=>{e.exports=f}},a={};function n(f){var r=a[f];if(void 0!==r)return r.exports;var d=a[f]={exports:{}};return e[f](d,d.exports,n),d.exports}n.d=(f,e)=>{for(var a in e)n.o(e,a)&&!n.o(f,a)&&Object.defineProperty(f,a,{enumerable:!0,get:e[a]})},n.o=(f,e)=>Object.prototype.hasOwnProperty.call(f,e),n.r=f=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(f,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(f,"__esModule",{value:!0})};var r={};return(()=>{n.r(r),n.d(r,{default:()=>ka});var f=n(156);function e(f){var a,n,r="";if("string"==typeof f||"number"==typeof f)r+=f;else if("object"==typeof f)if(Array.isArray(f))for(a=0;af.length)&&(e=f.length);for(var a=0,n=new Array(e);a0}function $(f){if(f){if(ef[f])return ef[f];var e=W(f);return ef[e]}}setTimeout((function(){ff.reduce((function(f,e){return H(e),f}),V)}));var ff=Object.values(N).flat();var ef={};setTimeout((function(){ff.reduce((function(f,e){return f[Y(e)]=e,f}),ef)}));var af=["2640-fe0f","2642-fe0f","2695-fe0f"],nf="Search";function rf(f){var e,a;void 0===f&&(f={});var n=df(),r=Object.assign(n.previewConfig,null!=(e=f.previewConfig)?e:{}),d=Object.assign(n,f),i=function(f,e){var a;void 0===f&&(f=[]),void 0===e&&(e={});var n={};e.suggestionMode===s.RECENT&&(n[p.SUGGESTED]=D);var r=L(n);return null!=(a=f)&&a.length?f.map((function(f){return"string"==typeof f?O(f,n[f]):A({},O(f.category,n[f.category]),f)})):r}(f.categories,{suggestionMode:d.suggestedEmojisMode});return(null!=(a=d.customEmojis)?a:[]).forEach((function(f){var e=function(f){var e;return(e={})[F.name]=f.names.map((function(f){return f.toLowerCase()})),e[F.unified]=f.id.toLowerCase(),e[F.added_in]="0",e[F.imgUrl]=f.imgUrl,e}(f);ef[e[F.unified]]||(ff.push(e),ef[e[F.unified]]=e,N[p.CUSTOM].push(e),H(e))})),A({},d,{categories:i,previewConfig:r,skinTonePickerLocation:d.searchDisabled?h.PREVIEW:d.skinTonePickerLocation})}function df(){return{autoFocusSearch:!0,categories:L(),customEmojis:[],defaultSkinTone:m.NEUTRAL,emojiStyle:b.APPLE,emojiVersion:null,getEmojiUrl:Z,height:450,lazyLoadEmojis:!1,onEmojiClick:function(f,e){},previewConfig:A({},tf),searchDisabled:!1,searchPlaceHolder:nf,searchPlaceholder:nf,skinTonePickerLocation:h.SEARCH,skinTonesDisabled:!1,suggestedEmojisMode:s.FREQUENT,theme:g.LIGHT,unicodeToHide:new Set(af),width:350}}var tf={defaultEmoji:"1f60a",defaultCaption:"What's your mood?",showPreview:!0},of=["children"],cf=(0,f.createContext)(df());function uf(e){var a=e.children,n=function(f,e){if(null==f)return{};var a,n,r={},d=Object.keys(f);for(n=0;n=0||(r[a]=f[a]);return r}(e,of),r=(0,f.useState)((function(){return rf(n)}))[0];return(0,f.createElement)(cf.Provider,{value:r},a)}function lf(){return(0,f.useContext)(cf)}function sf(){return lf().skinTonesDisabled}function bf(){return lf().emojiStyle}function gf(){return lf().categories}function mf(){return lf().previewConfig}function pf(){return lf().searchDisabled}function hf(){return lf().skinTonePickerLocation}function vf(){return lf().getEmojiUrl}function wf(f){return"number"==typeof f?f+"px":f}function kf(e,a){void 0===a&&(a=0);var n=(0,f.useState)(e),r=n[0],d=n[1],i=(0,f.useRef)(null);return[r,function(f){return new Promise((function(e){var n;i.current&&clearTimeout(i.current),i.current=null==(n=window)?void 0:n.setTimeout((function(){d(f),e(f)}),a)}))}]}function yf(){var e=(0,f.useRef)({}),a=lf().emojiVersion;return(0,f.useMemo)((function(){var f=parseFloat(""+a);return!a||Number.isNaN(f)?e.current:ff.reduce((function(e,a){return function(f,e){return function(f){return parseFloat(f[F.added_in])}(f)>e}(a,f)&&(e[Y(a)]=!0),e}),e.current)}),[a])}function Ef(e){var a,n=e.children,r=yf(),d=lf().defaultSkinTone,i=(0,f.useRef)(V),t=(0,f.useRef)(!1),o=(0,f.useRef)(!1),c=(0,f.useRef)(r),u=kf(Date.now(),200),l=kf("",100),s=(0,f.useState)(!1),b=(0,f.useState)(d),g=(0,f.useState)(null),m=(0,f.useState)(new Set),p=(0,f.useState)(null),h=(0,f.useState)(!1),v=h[0],w=h[1];return a=w,(0,f.useEffect)((function(){a(!0)}),[a]),(0,f.createElement)(Cf.Provider,{value:{activeCategoryState:g,activeSkinTone:b,disallowClickRef:t,disallowMouseRef:o,disallowedEmojisRef:c,emojiVariationPickerState:p,emojisThatFailedToLoadState:m,filterRef:i,isPastInitialLoad:v,searchTerm:l,skinToneFanOpenState:s,suggestedUpdateState:u}},n)}var Cf=(0,f.createContext)({activeCategoryState:[null,function(){}],activeSkinTone:[m.NEUTRAL,function(){}],disallowClickRef:{current:!1},disallowMouseRef:{current:!1},disallowedEmojisRef:{current:{}},emojiVariationPickerState:[null,function(){}],emojisThatFailedToLoadState:[new Set,function(){}],filterRef:{current:{}},isPastInitialLoad:!0,searchTerm:["",function(){return new Promise((function(){}))}],skinToneFanOpenState:[!1,function(){}],suggestedUpdateState:[Date.now(),function(){}]});function jf(){return(0,f.useContext)(Cf).filterRef}function xf(){return(0,f.useContext)(Cf).disallowMouseRef}function zf(){return(0,f.useContext)(Cf).searchTerm}function Rf(){return(0,f.useContext)(Cf).activeSkinTone}function Af(){return(0,f.useContext)(Cf).emojisThatFailedToLoadState}function Pf(){return(0,f.useContext)(Cf).emojiVariationPickerState}function Sf(){return(0,f.useContext)(Cf).skinToneFanOpenState}function Mf(){var e=(0,f.useContext)(Cf).suggestedUpdateState,a=e[0],n=e[1];return[a,function(){n(Date.now())}]}function Df(){var f=xf();return function(){f.current=!1}}function Tf(){var f=xf();return function(){return f.current}}function Lf(f,e){if(!f||!e)return 0;var a=f.getBoundingClientRect().width,n=e.getBoundingClientRect().width;return Math.floor(a/n)}function Bf(f,e){if(!f||!e)return 0;var a=e.getBoundingClientRect().width,n=e.getBoundingClientRect().left,r=f.getBoundingClientRect().left;return Math.floor((n-r)/a)}function qf(f,e){if(!f||!e)return 0;var a=e.getBoundingClientRect().height,n=e.getBoundingClientRect().top,r=f.getBoundingClientRect().top;return Math.round((n-r)/a)}function Of(f,e,a){if(-1===e){var n=Math.floor((f.length-1)/a)*a,r=f.length-1;return f.slice(n,r+1)}return f.slice(e*a,(e+1)*a)}function Ff(f,e,a,n){var r=Of(f,e,a);return r[n]||r[r.length-1]||null}var Nf="button"+i(d.emoji),Uf=[Nf,i(d.visible),":not("+i(d.hidden)+")"].join("");function If(f){var e;return null!=(e=null==f?void 0:f.closest(Nf))?e:null}function _f(f){var e=Xf(f),a=Qf(f);if(!e)return[];var n=$(e);return n?[n,a]:[]}function Vf(f){var e;return null!=(e=null==f?void 0:f.clientHeight)?e:0}function Hf(f){if(!f)return 0;var e=If(f),a=oe(e),n=Gf(a);return Jf(e)+Jf(a)+n}function Gf(f){var e,a;if(!f)return 0;var n=f.querySelector(i(d.categoryContent));return(null!=(e=null==f?void 0:f.clientHeight)?e:0)-(null!=(a=null==n?void 0:n.clientHeight)?a:0)}function Kf(f){return f?f.matches(i(d.scrollBody))?f:f.querySelector(i(d.scrollBody)):null}function Wf(f){var e,a;return f?Hf(f)-(null!=(e=null==(a=Yf(f))?void 0:a.scrollTop)?e:0):0}function Yf(f){var e;return f&&null!=(e=f.closest(i(d.scrollBody)))?e:null}function Jf(f){var e;return null!=(e=null==f?void 0:f.offsetTop)?e:0}function Zf(f){var e;return null!=(e=null==f?void 0:f.offsetLeft)?e:0}function Qf(f){var e,a;return null!=("unified",e=null!=(a=function(f){var e;return null!=(e=null==f?void 0:f.dataset)?e:{}}(If(f)).unified)?a:null)?e:null}function Xf(f){var e=Qf(f);return e?W(e):null}function $f(f){return f.classList.contains(d.visible)}function fe(f){return!f||f.classList.contains(d.hidden)}function ee(f){return f?Array.from(f.querySelectorAll(Uf)):[]}function ae(f){if(!f)return null;var e=ee(f).slice(-1)[0];return e?$f(e)?e:re(e):null}function ne(f){var e=f.nextElementSibling;return e?$f(e)?e:ne(e):de(te(f))}function re(f){var e=f.previousElementSibling;return e?$f(e)?e:re(e):ae(ie(f))}function de(f){return f?function(f,e){if(!f||!e.length)return null;var a=f.getBoundingClientRect().top,n=f.getBoundingClientRect().bottom;return e.find((function(f){var e=f.getBoundingClientRect().top,r=f.getBoundingClientRect().bottom;return e>=a&&e<=n||r>=a&&r<=n}))||null}(f,ee(f)):null}function ie(f){var e=oe(f);if(!e)return null;var a=e.previousElementSibling;return a?fe(a)?ie(a):a:null}function te(f){var e=oe(f);if(!e)return null;var a=e.nextElementSibling;return a?fe(a)?te(a):a:null}function oe(f){return f?f.closest(i(d.category)):null}function ce(f){return f?f.closest(i(d.categoryContent)):null}function ue(f){return f.split("-").map((function(f){return String.fromCodePoint(parseInt(f,16))})).join("")}var le,se,be,ge="epr_suggested";function me(f){try{var e,a,n;if(null==(e=window)||!e.localStorage)return[];var r=JSON.parse(null!=(a=null==(n=window)?void 0:n.localStorage.getItem(ge))?a:"[]");return f===s.FREQUENT?r.sort((function(f,e){return e.count-f.count})):r}catch(f){return[]}}function pe(f){return void 0!==f.imgUrl}function he(){var e=Pf(),a=e[0],n=e[1],r=Sf(),d=r[0],i=r[1];return(0,f.useCallback)((function(){a&&n(null),d&&i(!1)}),[a,d,n,i])}function ve(){var f=Pf()[0],e=Sf()[0];return function(){return!!f||e}}function we(){var f=C(),e=Pf()[1];return function(a){var n=_f(a)[0];n&&(f(a),e(n))}}function ke(f){var e,a,n=null==f?void 0:f.target;return e=n,Boolean((null==e?void 0:e.matches(Nf))||(null==e||null==(a=e.parentElement)?void 0:a.matches(Nf)))?_f(n):[]}function ye(f,e){void 0===e&&(e=0);var a=Kf(f);a&&requestAnimationFrame((function(){a.scrollTop=e+1}))}function Ee(f){if(f&&function(f){return!!f&&Wf(f)1?[]:J(u),y=0,E=k.map((function(e){var a=Y(e,p),n=s(e),r=n.failedToLoad,d=n.filteredOut,i=n.hidden,t=h(e);return(i||t)&&y++,t?null:(0,f.createElement)(Be,{showVariations:w,key:a,emoji:e,unified:a,hidden:r,hiddenOnSearch:d,emojiStyle:g,lazyLoad:b,getEmojiUrl:v})}));return(0,f.createElement)(qe,{categoryConfig:l,hidden:y===E.length},E)}function Ue(f){var e=de(f);t(e),Ee(e)}function Ie(f){if(f){var e=ne(f);if(!e)return Ue(te(f));t(e),Ee(e)}}function _e(f){if(f){var e=function(f){if(!f)return null;var e,a,n,r=ce(f),d=oe(r),i=Bf(r,f),t=qf(r,f),o=Lf(r,f);if(!function(f,e){if(!f||!e)return!1;var a=e.getBoundingClientRect().height,n=e.getBoundingClientRect().top,r=f.getBoundingClientRect().top,d=f.getBoundingClientRect().height;return Math.round(n-r+a)f.length?[]:Of(f,n,a)}(e,t,o),n[a]||n[n.length-1]||null}(f);return t(e)}}function Ve(){var e,n,r=E(),i=k().VariationPickerRef,t=Pf()[0],o=bf(),c=function(f){var e=E(),a=j(),n=le.Up;return{getMenuDirection:function(){return n},getTop:function(){n=le.Up;var r=0;if(!f.current)return 0;var d=Vf(f.current);if(e.current){var i,t=a.current,o=If(e.current),c=Vf(o);r=Hf(o),(null!=(i=null==t?void 0:t.scrollTop)?i:0)>r-d&&(n=le.Down,r+=c+d)}return r-d}}}(i),u=c.getTop,l=c.getMenuDirection,s=C(),b=function(f){var e=E();return function(){var a={};if(!f.current)return a;if(e.current){var n=If(e.current),r=function(f){var e=If(f),a=oe(e);return Zf(e)+Zf(a)}(n);if(!n)return a;a.left=r+(null==n?void 0:n.clientWidth)/2}return a}}(i),g=vf(),m=If(r.current),p=t&&m&&X(t)&&m.classList.contains(d.emojiHasVariations);return(0,f.useEffect)((function(){p&&Ue(i.current)}),[i,p,r]),!p&&r.current?s(null):(e=u(),n=b()),(0,f.createElement)("div",{ref:i,className:a(d.variationPicker,{visible:p,"pointing-up":l()===le.Down}),style:{top:e}},p&&t?[Y(t)].concat(Q(t)).slice(0,6).map((function(e){return(0,f.createElement)(Be,{key:e,emoji:t,unified:e,emojiStyle:o,showVariations:!1,getEmojiUrl:g})})):null,(0,f.createElement)("div",{className:"epr-emoji-pointer",style:n}))}function He(){var e=j();return function(e){var a=he();(0,f.useEffect)((function(){var f=e.current;if(f)return f.addEventListener("scroll",n,{passive:!0}),function(){null==f||f.removeEventListener("scroll",n)};function n(){a()}}),[e,a])}(e),function(e){var a=(0,f.useRef)(),n=we(),r=(0,f.useContext)(Cf).disallowClickRef,d=Pf()[1],i=he(),t=Rf()[0],o=lf().onEmojiClick,c=Mf()[1],u=vf(),l=bf(),s=(0,f.useCallback)((function(f){if(!r.current){i();var e=ke(f),a=e[0],n=e[1];if(a&&n){var d=function(f){var e=f.split("-")[1];return U.includes(e)?e:null}(n)||t;c(),function(f,e){var a,n=me(),r=Y(f,e),d=Y(f),i=n.find((function(f){return f.unified===r}));a=i?[i].concat(n.filter((function(f){return f!==i}))):[i={unified:r,original:d,count:0}].concat(n),i.count++,a.length=Math.min(a.length,14);try{var t;null==(t=window)||t.localStorage.setItem(ge,JSON.stringify(a))}catch(f){}}(a,d),o(function(f,e,a,n){var r=G(f);if(pe(f)){var d=Y(f);return{activeSkinTone:e,emoji:d,getImageUrl:function(){return f.imgUrl},imageUrl:f.imgUrl,isCustom:!0,names:r,unified:d,unifiedWithoutSkinTone:d}}var i=Y(f,e);return{activeSkinTone:e,emoji:ue(i),getImageUrl:function(f){return void 0===f&&(f=null!=a?a:b.APPLE),n(i,f)},imageUrl:n(i,null!=a?a:b.APPLE),isCustom:!1,names:r,unified:i,unifiedWithoutSkinTone:Y(f)}}(a,d,l,u),f)}}}),[t,i,r,o,c,u,l]),g=(0,f.useCallback)((function(f){var e;a.current&&clearTimeout(a.current);var t=ke(f)[0];t&&X(t)&&(a.current=null==(e=window)?void 0:e.setTimeout((function(){r.current=!0,a.current=void 0,i(),n(f.target),d(t)}),500))}),[r,i,n,d]),m=(0,f.useCallback)((function(){a.current?(clearTimeout(a.current),a.current=void 0):r.current&&requestAnimationFrame((function(){r.current=!1}))}),[r]);(0,f.useEffect)((function(){if(e.current){var f=e.current;return f.addEventListener("click",s,{passive:!0}),f.addEventListener("mousedown",g,{passive:!0}),f.addEventListener("mouseup",m,{passive:!0}),function(){null==f||f.removeEventListener("click",s),null==f||f.removeEventListener("mousedown",g),null==f||f.removeEventListener("mouseup",m)}}}),[e,s,g,m])}(e),function(){var e=j(),a=Df(),n=Tf();(0,f.useEffect)((function(){var f=e.current;function r(){n()&&a()}return null==f||f.addEventListener("mousemove",r,{passive:!0}),function(){null==f||f.removeEventListener("mousemove",r)}}),[e,a,n])}(),(0,f.createElement)("div",{className:d.scrollBody,ref:e},(0,f.createElement)(Ve,null),(0,f.createElement)(Fe,null))}function Ge(){return hf()===h.SEARCH}function Ke(){return hf()===h.PREVIEW}function We(e){var n=e.children,r=e.className,d=e.style,i=void 0===d?{}:d,t=e.direction,o=void 0===t?se.ROW:t;return(0,f.createElement)("div",{style:A({},i),className:a("Flex",r,o)},n)}function Ye(e){var n=e.className,r=e.style,d=void 0===r?{}:r;return(0,f.createElement)("div",{style:A({flex:1},d),className:a(n)})}function Je(e){var a=e.children,n=e.className,r=e.style;return(0,f.createElement)("div",{style:A({},r,{position:"absolute"}),className:n},a)}function Ze(e){var a=e.children,n=e.className,r=e.style;return(0,f.createElement)("div",{style:A({},r,{position:"relative"}),className:n},a)}function Qe(){return(0,f.createElement)(Ze,{style:{height:28}},(0,f.createElement)(Je,{style:{bottom:0,right:0}},(0,f.createElement)(Xe,{direction:be.VERTICAL})))}function Xe(e){var n,r=e.direction,i=void 0===r?be.HORIZONTAL:r,t=z(),o=sf(),c=Sf(),u=c[0],l=c[1],s=Rf(),b=s[0],g=s[1],m=he(),p=Ce();if(o)return null;var h=28*U.length+"px",v=u?h:"28px",w=i===be.VERTICAL;return(0,f.createElement)(Ze,{className:a("epr-skin-tones",i,(n={},n[d.open]=u,n)),style:w?{flexBasis:v,height:v}:{flexBasis:v}},(0,f.createElement)("div",{className:"epr-skin-tone-select",ref:t},U.map((function(e,n){var r,i=e===b;return(0,f.createElement)(Se,{style:{transform:a(w?"translateY(-"+n*(u?28:0)+"px)":"translateX(-"+n*(u?28:0)+"px)",u&&i&&"scale(1.3)")},onClick:function(){u?(g(e),p()):l(!0),m()},key:e,className:a("epr-tone-"+e,"epr-tone",(r={},r[d.active]=i,r)),tabIndex:u?0:-1,"aria-pressed":i,"aria-label":"Skin tone "+I[e]})}))))}function $e(){var e=mf(),a=Ke();return e.showPreview?(0,f.createElement)(We,{className:"epr-preview"},(0,f.createElement)(fa,null),(0,f.createElement)(Ye,null),a?(0,f.createElement)(Qe,null):null):null}function fa(){var e=mf(),a=(0,f.useState)(null),n=a[0],r=a[1],d=bf(),i=Pf()[0],o=vf();!function(e,a){var n=j(),r=Tf(),d=Df();(0,f.useEffect)((function(){if(e){var f=n.current;return null==f||f.addEventListener("keydown",o,{passive:!0}),null==f||f.addEventListener("mouseover",c,!0),null==f||f.addEventListener("focus",d,!0),null==f||f.addEventListener("mouseout",i,{passive:!0}),null==f||f.addEventListener("blur",i,!0),function(){null==f||f.removeEventListener("mouseover",c),null==f||f.removeEventListener("mouseout",i),null==f||f.removeEventListener("focus",d,!0),null==f||f.removeEventListener("blur",i,!0),null==f||f.removeEventListener("keydown",o)}}function d(f){var e=If(f.target);if(!e)return i();var n=Qf(e),r=Xf(e);if(!n||!r)return i();a({unified:n,originalUnified:r})}function i(f){if(f&&!If(f.relatedTarget))return a(null);a(null)}function o(f){"Escape"===f.key&&a(null)}function c(f){if(!r()){var e=If(f.target);e&&t(e)}}}),[n,e,a,r,d])}(e.showPreview,r);var c=$(null==n?void 0:n.originalUnified),u=null!=c&&null!=n;return(0,f.createElement)((function(){var a=null!=i?i:$(e.defaultEmoji);if(!a)return null;var r=i?K(i):e.defaultCaption;return(0,f.createElement)(f.Fragment,null,(0,f.createElement)("div",null,u?(0,f.createElement)(Le,{unified:null==n?void 0:n.unified,emoji:c,emojiStyle:d,size:45,getEmojiUrl:o}):a?(0,f.createElement)(Le,{unified:Y(a),emoji:a,emojiStyle:d,size:45,getEmojiUrl:o}):null),u?(0,f.createElement)("div",{className:"epr-preview-emoji-label"},K(c)):(0,f.createElement)("div",{className:"epr-preview-emoji-label"},r))}),null)}function ea(){return!!zf()[0]}function aa(){var e,n,r=(0,f.useState)(null),t=r[0],o=r[1],c=(e=j(),n=y(),function(f){var a;if(e.current){var r=null==(a=e.current)?void 0:a.querySelector('[data-name="'+f+'"]');if(r){var d=r.offsetTop||0;ye(n.current,d)}}});!function(e){var a=j();(0,f.useEffect)((function(){var f=new Map,n=a.current,r=new IntersectionObserver((function(a){if(n){for(var r,d=function(f,e){var a="undefined"!=typeof Symbol&&f[Symbol.iterator]||f["@@iterator"];if(a)return(a=a.call(f)).next.bind(a);if(Array.isArray(f)||(a=function(f,e){if(f){if("string"==typeof f)return S(f,e);var a=Object.prototype.toString.call(f).slice(8,-1);return"Object"===a&&f.constructor&&(a=f.constructor.name),"Map"===a||"Set"===a?Array.from(f):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?S(f,e):void 0}}(f))||e&&f&&"number"==typeof f.length){a&&(f=a);var n=0;return function(){return n>=f.length?{done:!0}:{done:!1,value:f[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(a);!(r=d()).done;){var i=r.value,t=(void 0,null!=(c=null==(o=i.target)?void 0:o.getAttribute("data-name"))?c:null);f.set(t,i.intersectionRatio)}var o,c,u=Array.from(f),l=u[u.length-1];if(1==l[1])return e(l[0]);for(var s=0,b=u;s*{align-self:center;display:block;justify-self:center}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color-hover)}.__EmojiPicker__.epr-emoji-img{font-size:0}.__EmojiPicker__.epr-emoji-native{align-self:center;font-family:Segoe UI Emoji,Segoe UI Symbol,Segoe UI,Apple Color Emoji,Twemoji Mozilla,Noto Color Emoji,Android Emoji,Times,Symbola,Aegyptus,Code2000,Code2001,Code2002,Musica,serif,LastResort;font-size:var(--epr-emoji-size);justify-self:center;letter-spacing:0;line-height:100%;position:relative;text-align:center}.EmojiPickerReact button.epr-emoji:hover>*{background-color:var(--epr-emoji-hover-color)}.EmojiPickerReact button.epr-emoji:focus>*{background-color:var(--epr-focus-bg-color)}'),Pe(".EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-content{grid-gap:0;display:grid;grid-template-columns:repeat(auto-fill,var(--epr-emoji-fullsize));justify-content:space-between;margin:var(--epr-category-padding);position:relative}.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)){display:none}.EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-label{align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:var(--epr-category-label-bg-color);color:var(--epr-category-label-text-color);display:flex;font-weight:700;height:var(--epr-category-label-height);padding:var(--epr-category-label-padding);position:-webkit-sticky;position:sticky;text-transform:capitalize;top:0;width:100%;z-index:var(--epr-category-label-z-index)}"),Pe(".EmojiPickerReact ul.epr-emoji-list{list-style:none;margin:0;padding:0}"),Pe(".EmojiPickerReact .epr-emoji-variation-picker{align-items:center;background:var(--epr-emoji-variation-picker-bg-color);border:1px solid var(--epr-picker-border-color);border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.2);display:flex;height:0;height:var(--epr-emoji-variation-picker-height);justify-content:space-around;left:15px;opacity:0;padding:5px;pointer-events:none;position:absolute;right:15px;top:0;top:-100%;transform:scale(.9);transition:transform .1s ease-out,opacity .2s ease-out;visibility:hidden;z-index:var(--epr-skin-variation-picker-z-index)}.EmojiPickerReact .epr-emoji-variation-picker.pointing-up{transform:scale(.9);transform-origin:center 0}.EmojiPickerReact .epr-emoji-variation-picker.visible{opacity:1;pointer-events:all;transform:scale(1);visibility:visible}.EmojiPickerReact .epr-emoji-variation-picker .EmojiPickerReact .epr-emoji-variation-picker button.epr-emoji:hover{background:none}.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='15' xml:space='preserve'%3E%3Cg stroke-miterlimit='10'%3E%3Cpath fill='%23FFF' stroke='%23E8E7E7' d='m1.86-.43 9.83 11.53c.59.69 1.56.69 2.14 0L23.66-.43'/%3E%3Cpath fill='%23010202' stroke='%23151617' d='m26.86-.43 9.83 11.53c.59.69 1.56.69 2.14 0L48.66-.43'/%3E%3C/g%3E%3C/svg%3E\");background-position:0 0;background-repeat:no-repeat;background-size:50px 15px;content:\"\";height:15px;position:absolute;top:-10px;width:25px}.EmojiPickerReact.epr-dark-theme .epr-emoji-variation-picker .epr-emoji-pointer{background-position:-25px 0}.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer{top:100%;transform:translateX(-18px)}.EmojiPickerReact .epr-emoji-variation-picker.pointing-up .epr-emoji-pointer{top:0;transform:rotate(180deg) translateY(100%) translateX(18px)}"),function(f){f[f.Up=0]="Up",f[f.Down=1]="Down"}(le||(le={})),Pe(".EmojiPickerReact .epr-body{flex:1;overflow-x:hidden;overflow-y:scroll;position:relative}"),Pe(".EmojiPickerReact .Flex{display:flex}.EmojiPickerReact .Flex.FlexRow{flex-direction:row}.EmojiPickerReact .Flex.FlexColumn{flex-direction:column}"),function(f){f.ROW="FlexRow",f.COLUMN="FlexColumn"}(se||(se={})),Pe(".EmojiPickerReact .epr-preview{align-items:center;border-top:1px solid var(--epr-preview-border-color);height:var(--epr-preview-height);padding:0 var(--epr-horizontal-padding);position:relative;z-index:1;z-index:var(--epr-preview-z-index)}.EmojiPickerReact .epr-preview .epr-preview-emoji-label{color:var(--epr-preview-text-color);font-size:var(--epr-preview-text-size);padding:var(--epr-preview-text-padding);text-transform:capitalize}"),Pe('.EmojiPickerReact .epr-skin-tones{--epr-skin-tone-size:15px;align-items:center;display:flex;justify-content:flex-end;padding:10px 0;transition:all .3s ease-in-out}.EmojiPickerReact .epr-skin-tones.epr-vertical{align-items:flex-end;border:1px solid var(--epr-bg-color);border-radius:6px;flex-direction:column;padding:5px}.EmojiPickerReact .epr-skin-tones.epr-vertical.epr-open{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:var(--epr-skin-tone-picker-menu-color);border:1px solid var(--epr-picker-border-color)}.EmojiPickerReact .epr-skin-tone-select{height:var(--epr-skin-tone-size);position:relative;width:var(--epr-skin-tone-size)}.EmojiPickerReact .epr-skin-tones.epr-open .epr-tone{transition:transform .3s ease-in-out,opacity .3s ease-in-out}.EmojiPickerReact .epr-skin-tones:not(.epr-open) .epr-tone{opacity:0;z-index:0}.EmojiPickerReact .epr-skin-tones .epr-tone{border-radius:4px;box-shadow:0 0 0 0 var(--epr-active-skin-hover-color);cursor:pointer;display:block;height:var(--epr-skin-tone-size);position:absolute;right:0;transition:transform .3s ease-in-out,opacity .5s ease-in-out;width:var(--epr-skin-tone-size);z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone:hover{box-shadow:0 0 0 3px var(--epr-active-skin-hover-color)}.EmojiPickerReact .epr-skin-tones .epr-tone:focus{box-shadow:0 0 0 3px var(--epr-focus-bg-color)}.EmojiPickerReact .epr-skin-tones.epr-open .epr-skin-tone-select .epr-tone.epr-active:after{border:1px solid var(--epr-active-skin-tone-indicator-border-color);border-radius:5px;bottom:-2px;content:"";left:-2px;position:absolute;right:-2px;top:-2px}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-active{opacity:1;z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-neutral{background-color:#ffd225}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fb{background-color:#ffdfbd}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fc{background-color:#e9c197}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fd{background-color:#c88e62}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fe{background-color:#a86637}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3ff{background-color:#60463a}'),function(f){f.VERTICAL="epr-vertical",f.HORIZONTAL="epr-horizontal"}(be||(be={})),Pe(".EmojiPickerReact .epr-category-nav{display:flex;flex-direction:row;justify-content:space-around;padding:var(--epr-header-padding)}.EmojiPickerReact .epr-category-nav>button.epr-cat-btn{background-size:calc(var(--epr-category-navigation-button-size)*10);display:inline-block;height:var(--epr-category-navigation-button-size);outline:none;position:relative;transition:opacity .2s ease-in-out;width:var(--epr-category-navigation-button-size)}.EmojiPickerReact .epr-category-nav>button.epr-cat-btn:focus:before{border:2px solid var(--epr-category-icon-active-color);border-radius:50%;bottom:-2px;content:\"\";left:-2px;position:absolute;right:-2px;top:-2px}aside.EmojiPickerReact.epr-main:has(input:not(:-moz-placeholder-shown)) .epr-category-nav{cursor:default;opacity:.3;pointer-events:none}aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown)) .epr-category-nav{cursor:default;opacity:.3;pointer-events:none}.EmojiPickerReact.epr-search-active .epr-category-nav{cursor:default;opacity:.3;pointer-events:none}aside.EmojiPickerReact.epr-main:has(input:not(:-moz-placeholder-shown)) .epr-category-nav>button.epr-cat-btn:hover{background-position-y:var(--epr-category-navigation-button-size);opacity:1}aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown)) .epr-category-nav>button.epr-cat-btn:hover{background-position-y:var(--epr-category-navigation-button-size);opacity:1}.EmojiPickerReact:not(.epr-search-active) .epr-category-nav>button.epr-cat-btn.epr-active,.EmojiPickerReact:not(.epr-search-active) .epr-category-nav>button.epr-cat-btn:hover{background-position-y:var(--epr-category-navigation-button-size);opacity:1}.EmojiPickerReact .epr-category-nav>button.epr-cat-btn{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='80' xml:space='preserve'%3E%3Cg fill='%233371B7' stroke='%233371B7' stroke-width='.1' stroke-miterlimit='10'%3E%3Cpath d='M12.8 29.5c.6 0 1.1-.5 1.1-1.1 0-.6-.5-1.2-1.1-1.2-.6 0-1.2.5-1.2 1.2 0 .6.6 1.1 1.2 1.1zm0-1.5c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4c0-.3.2-.4.4-.4z'/%3E%3Cpath d='M10 23c-3.8 0-7 3.1-7 7 0 3.8 3.1 7 7 7s7-3.1 7-7c0-3.8-3.2-7-7-7zm0 13.2c-3.4 0-6.2-2.8-6.2-6.2 0-3.4 2.8-6.2 6.2-6.2s6.2 2.8 6.2 6.2c0 3.4-2.8 6.2-6.2 6.2z'/%3E%3Cpath d='M14.6 31.2c-.1-.1-.2-.2-.3-.2H5.7c-.1 0-.2.1-.3.2-.1.1-.1.2 0 .4.7 2 2.5 3.3 4.6 3.3s3.9-1.3 4.6-3.3c.1-.1.1-.3 0-.4zM10 34.1c-1.6 0-3-.9-3.7-2.2h7.3c-.6 1.3-2 2.2-3.6 2.2zm-2.8-4.6c.6 0 1.2-.5 1.2-1.1 0-.6-.5-1.2-1.2-1.2-.6 0-1.1.5-1.1 1.2 0 .6.5 1.1 1.1 1.1zm0-1.5c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4c0-.3.2-.4.4-.4z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%233371B7' d='M64.1 33.4h2.3c.2 0 .4.2.4.4v2.1c0 .2-.2.4-.4.4h-2.3c-.2 0-.4-.2-.4-.4v-2.1c0-.2.1-.4.4-.4zm9.4.1h2.4c.2 0 .4.2.4.4v2c0 .2-.2.4-.4.4h-2.4c-.2 0-.4-.2-.4-.4v-2c0-.3.2-.4.4-.4zm-9.8-5.1h12.6v5H63.7v-5z'/%3E%3Cpath fill='none' stroke='%233371B7' d='M65.5 23.6h8.9c1 0 1.9.8 1.9 1.9v3.1H63.7v-3.1c0-1 .8-1.9 1.8-1.9z'/%3E%3Cellipse fill='%233371B7' cx='66.2' cy='30.9' rx='.9' ry='1'/%3E%3Cellipse fill='%233371B7' cx='73.8' cy='30.9' rx='.9' ry='1'/%3E%3Cg fill='none' stroke='%233371B7'%3E%3Cpath d='M96.4 30c0 3.6-2.9 6.5-6.4 6.5s-6.4-2.9-6.4-6.5 2.9-6.5 6.4-6.5 6.4 2.9 6.4 6.5z'/%3E%3Cpath d='M96.3 28.6v.1c-.9.1-2.9.1-4.6-1.1-1.1-.8-2-1.7-2.6-2.5-.3-.4-.6-.8-.7-1-.1-.1-.1-.1-.1-.2.5-.1 1.2-.2 2-.1 1.2 0 2.5.3 3.5 1.1s1.7 1.8 2.1 2.8c.2.2.3.6.4.9zM84 32.2v-.1c.9-.2 2.9-.4 4.7.6 1.1.7 1.9 1.5 2.4 2.3.4.5.6 1 .7 1.3-.4.1-1 .2-1.7.3-1 0-2.1-.1-3.2-.8s-1.9-1.6-2.4-2.5c-.3-.5-.4-.8-.5-1.1z'/%3E%3C/g%3E%3Cg fill='none' stroke='%233371B7'%3E%3Cpath stroke-linecap='round' d='m116.3 26.8-1.4 2-.8-.8-.6-.6v.9l-.1 8.2h-6.8l-.1-8.2v-.9l-.6.6-.8.8-1.4-2 2.6-2.9c.1-.1.2-.1.3-.1h1.3l.4.7c.7 1.3 2.6 1.3 3.3-.1l.3-.6h1.2c.1 0 .2 0 .3.1l.3-.3-.3.3 2.9 2.9z'/%3E%3Cpath d='M110.1 27.7h2v.9c0 .4-.4.7-1 .7s-1-.3-1-.7v-.9z'/%3E%3C/g%3E%3Cpath d='M126.8 34.3c0 1.2-1 2.2-2.2 2.2s-2.2-1-2.2-2.2 1-2.2 2.2-2.2 2.2 1 2.2 2.2zm10.8 0c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2s1-2.2 2.2-2.2c1.2 0 2.2 1 2.2 2.2zm-10.8-9.9v9.9m10.9-9.9v9.9m-10.9-10.8h10.8v2.7h-10.8v-2.7z' fill='none' stroke='%233371B7'/%3E%3Cg fill='%233371B7'%3E%3Cpath d='M170.8 23.1h-.8c-2.1 0-4 1-5.3 2.5h-.1l-.1-.1-1-1.2-.3 3.4 3.4.3-1.1-1.3-.1-.1.1-.1c1.1-1.5 3-2.3 5-2.1 3.2.3 5.5 3.1 5.2 6.3-.3 3-3.1 5.3-6.1 5.1-3.1-.2-5.4-2.9-5.3-6l-1.3-.1c-.2 3.8 2.6 7.1 6.3 7.4 3.9.3 7.3-2.6 7.6-6.5.3-3.8-2.5-7.1-6.1-7.5z'/%3E%3Cpath d='M170.3 27.4c0-.3-.3-.6-.6-.6s-.6.3-.6.6v3.2c0 .2.1.3.2.4.1.1.3.2.4.2h2.4c.4 0 .6-.3.6-.6 0-.4-.3-.6-.6-.6h-1.8v-2.6z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%233371B7' d='M186.2 23.4h7.7c1.5 0 2.7 1.2 2.7 2.7v7.7c0 1.5-1.2 2.7-2.7 2.7h-7.7c-1.5 0-2.7-1.2-2.7-2.7v-7.7c-.1-1.5 1.2-2.7 2.7-2.7z'/%3E%3Ccircle fill='%233371B7' cx='186' cy='28.9' r='.7'/%3E%3Ccircle fill='%233371B7' cx='194' cy='26.7' r='.7'/%3E%3Cpath fill='none' stroke='%233371B7' stroke-linecap='round' d='m186 33.3.4-.3c.4-.3 1-.3 1.5-.1l1 .4c.5.2 1 .2 1.5-.1l.8-.5c.4-.3 1-.3 1.5-.1l1.8.8'/%3E%3Cpath fill='%233371B7' stroke='%233371B7' stroke-width='.25' stroke-miterlimit='10' d='M156 24.3c-.2-.1-.4-.1-.5 0 0 0-.2.1-.9.2-.7 0-2.4-.1-3.8-.6-.8-.3-1.7-.5-2.5-.5h-.5c-1.3 0-2.5.3-3.6 1-.2.1-.2.2-.2.4v11.6c0 .3.1.5.3.5.6 0 .5-.4.5-.6v-5.7c.7-.3 3.2-1.1 5.8-.1 1.6.6 3.5.7 4.3.7.8 0 1.3-.3 1.3-.3.2-.1.3-.2.3-.4v-5.7c-.3-.2-.4-.4-.5-.5zm-.4 5.9c-.1 0-.7.1-1 .1-.7 0-2.4-.1-3.8-.6-2.5-1-5-.5-6.2-.1v-4.9c.9-.5 2.2-.7 3.2-.7h.4c.7 0 1.5.2 2.2.4 1.6.6 3.5.7 4.3.7.2 0 .8 0 1-.1v5.2z'/%3E%3Cpath fill='none' stroke='%233371B7' d='M48.1 23.5h3.7c2.5 0 4.5 2 4.5 4.5 0 .5-.4.9-.9.9H44.5c-.5 0-.9-.4-.9-.9 0-2.5 2-4.5 4.5-4.5z'/%3E%3Cpath fill='none' stroke='%233371B7' stroke-linecap='round' d='M43.5 28.8c-.2.1-.5 1.2 0 1.5 1.4 1 8.5.8 11.3.6.8-.1 1.6-.4 1.7-1.2 0-.3-.1-.6-.6-.9'/%3E%3Cpath fill='none' stroke='%233371B7' stroke-linecap='round' d='m43.5 30.6-.2.4c-.2.5.2 1 .7.9.3-.1.5 0 .7.3l.1.2c.3.5 1 .6 1.5.2h0c.3-.2.7-.3 1-.2l.8.3c.4.2.8.1 1.2 0l.5-.2c.4-.2.9-.2 1.3 0l.5.2c.4.2.8.2 1.2 0l.2-.1c.3-.2.8-.2 1.1.1l.2.2c.3.3.8.2 1-.2l.1-.2c.1-.2 0-.3.2-.3.5 0 1.2-.3 1.1-.7l-.4-1.1'/%3E%3Cpath fill='none' stroke='%233371B7' stroke-linecap='round' d='M43.5 32.2c-.1.2-.3.8 0 1.1.3.4 3 1.1 6.4 1.1 2.2 0 4.6-.3 6-.6.5-.1.9-.5.8-.9 0-.2-.2-.5-.4-.7'/%3E%3Cpath fill='none' stroke='%233371B7' stroke-linecap='round' d='M43.5 33.3c0 .5.6 2.3 1.3 2.7 1.8.8 5.7.7 8.1.5 1.3-.1 2.5-.7 3.2-1.8.3-.5.5-1 .5-1.4'/%3E%3Cellipse fill='%233371B7' cx='51.6' cy='26.5' rx='.3' ry='.4'/%3E%3Cellipse fill='%233371B7' cx='53' cy='25' rx='.3' ry='.4'/%3E%3Cellipse fill='%233371B7' cx='53' cy='27.2' rx='.3' ry='.4'/%3E%3Cellipse fill='%233371B7' cx='54.3' cy='26.5' rx='.3' ry='.4'/%3E%3Cellipse fill='%233371B7' cx='50.9' cy='25' rx='.3' ry='.4'/%3E%3Cpath fill='none' stroke='%233371B7' d='M24.2 31v-7.6c.1.1.8.9 2.8 3.1 2.5-1.6 5.6-.7 6.9 0l2.4-3.1v7.1c0 1.2-.1 2.5-.9 3.4-1 1.2-2.7 2.5-5.3 2.5-2.9 0-4.5-1.5-5.3-2.9-.6-.6-.6-1.5-.6-2.5z'/%3E%3Cpath fill='none' stroke='%233371B7' stroke-linecap='round' d='m21.2 30 5.4 1.2m-5.4 2.9 5.4-1.2M38.8 30l-5.4 1.2m5.4 2.9-5.4-1.2'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%233371B7' d='m29.5 32.4-.5-.7c-.2-.3 0-.6.3-.6h1.4c.3 0 .5.4.3.6l-.7 1c-.7 1.2-2.6 1.1-3.1-.3l-.1-.2c-.1-.2 0-.4.2-.5s.4 0 .5.2l.1.2c.4.7 1.2.8 1.6.3z'/%3E%3Cpath fill='none' stroke='%233371B7' stroke-linecap='round' d='m32.4 32.1-.1.2c-.4 1-1.8 1.1-2.3.2'/%3E%3Ccircle fill='%233371B7' cx='27.6' cy='29.7' r='.7'/%3E%3Ccircle fill='%233371B7' cx='32.4' cy='29.7' r='.7'/%3E%3Cg fill='%23C0C0BF' stroke='%23C0C0BF' stroke-width='.1' stroke-miterlimit='10'%3E%3Cpath d='M12.8 49.5c.6 0 1.1-.5 1.1-1.1 0-.6-.5-1.2-1.1-1.2-.6 0-1.2.5-1.2 1.2 0 .6.6 1.1 1.2 1.1zm0-1.5c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4c0-.3.2-.4.4-.4zm1.8 3.2c-.1-.1-.2-.2-.3-.2H5.7c-.1 0-.2.1-.3.2-.1.1-.1.2 0 .4.7 2 2.5 3.3 4.6 3.3s3.9-1.3 4.6-3.3c.1-.1.1-.3 0-.4zM10 54.1c-1.6 0-3-.9-3.7-2.2h7.3c-.6 1.3-2 2.2-3.6 2.2zm-2.8-4.6c.6 0 1.2-.5 1.2-1.1 0-.6-.5-1.2-1.2-1.2-.6 0-1.1.5-1.1 1.2 0 .6.5 1.1 1.1 1.1zm0-1.5c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4c0-.3.2-.4.4-.4z'/%3E%3Cpath d='M10 43c-3.8 0-7 3.1-7 7 0 3.8 3.1 7 7 7s7-3.1 7-7c0-3.8-3.2-7-7-7zm0 13.2c-3.4 0-6.2-2.8-6.2-6.2 0-3.4 2.8-6.2 6.2-6.2s6.2 2.8 6.2 6.2c0 3.4-2.8 6.2-6.2 6.2z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23C0C0BF' d='M64.1 53.4h2.3c.2 0 .4.2.4.4v2.1c0 .2-.2.4-.4.4h-2.3c-.2 0-.4-.2-.4-.4v-2.1c0-.2.1-.4.4-.4zm9.4.1h2.4c.2 0 .4.2.4.4v2c0 .2-.2.4-.4.4h-2.4c-.2 0-.4-.2-.4-.4v-2c0-.3.2-.4.4-.4zm-9.8-5.1h12.6v5H63.7v-5z'/%3E%3Cpath fill='none' stroke='%23C0C0BF' d='M65.5 43.6h8.9c1 0 1.9.8 1.9 1.9v3.1H63.7v-3.1c0-1 .8-1.9 1.8-1.9z'/%3E%3Cellipse fill='%23C0C0BF' cx='66.2' cy='50.9' rx='.9' ry='1'/%3E%3Cellipse fill='%23C0C0BF' cx='73.8' cy='50.9' rx='.9' ry='1'/%3E%3Cg fill='none' stroke='%23C0C0BF'%3E%3Cpath d='M96.4 50c0 3.6-2.9 6.5-6.4 6.5s-6.4-2.9-6.4-6.5 2.9-6.5 6.4-6.5 6.4 2.9 6.4 6.5z'/%3E%3Cpath d='M96.3 48.6v.1c-.9.1-2.9.1-4.6-1.2-1.1-.8-2-1.7-2.6-2.5-.3-.4-.6-.8-.7-1-.1-.1-.1-.2-.1-.2.5-.1 1.2-.2 2-.2 1.2 0 2.5.3 3.5 1.1s1.7 1.8 2.1 2.8c.2.4.3.8.4 1.1zM84 52.2v-.1c.9-.2 2.9-.4 4.7.6 1.1.7 1.9 1.5 2.4 2.3.4.5.6 1 .7 1.3-.4.1-1 .2-1.7.3-1 0-2.1-.1-3.2-.8s-1.9-1.6-2.4-2.5c-.3-.5-.4-.8-.5-1.1z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23C0C0BF'%3E%3Cpath stroke-linecap='round' d='m116.3 46.8-1.4 2-.8-.8-.6-.7v.9l-.1 8.2h-6.8l-.1-8.2v-.9l-.6.7-.8.8-1.4-2 2.6-2.9c.1-.1.2-.1.3-.1h1.3l.4.7c.7 1.3 2.6 1.3 3.3-.1l.3-.6h1.2c.1 0 .2 0 .3.1l.3-.3-.3.3 2.9 2.9z'/%3E%3Cpath d='M110.1 47.7h2v.9c0 .4-.4.7-1 .7s-1-.3-1-.7v-.9z'/%3E%3C/g%3E%3Cpath d='M126.8 54.3c0 1.2-1 2.2-2.2 2.2s-2.2-1-2.2-2.2 1-2.2 2.2-2.2 2.2 1 2.2 2.2zm10.8 0c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2s1-2.2 2.2-2.2c1.2 0 2.2 1 2.2 2.2zm-10.8-9.9v9.9m10.9-9.9v9.9m-10.9-10.8h10.8v2.7h-10.8v-2.7z' fill='none' stroke='%23C0C0BF'/%3E%3Cg fill='%23C0C0BF'%3E%3Cpath d='M170.8 43.1h-.8c-2.1 0-4 1-5.3 2.5h-.1l-.1-.1-1-1.2-.3 3.4 3.4.3-1.1-1.3-.1-.1.1-.1c1.1-1.5 3-2.3 5-2.1 3.2.3 5.5 3.1 5.2 6.3-.3 3-3.1 5.3-6.1 5.1-3.1-.2-5.4-2.9-5.3-6l-1.3-.1c-.2 3.8 2.6 7.1 6.3 7.4 3.9.3 7.3-2.6 7.6-6.5.3-3.8-2.5-7.1-6.1-7.5z'/%3E%3Cpath d='M170.3 47.4c0-.3-.3-.6-.6-.6s-.6.3-.6.6v3.2c0 .2.1.3.2.4.1.1.3.2.4.2h2.4c.4 0 .6-.3.6-.6s-.3-.6-.6-.6h-1.8v-2.6z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23C0C0BF' d='M186.2 43.4h7.7c1.5 0 2.7 1.2 2.7 2.7v7.7c0 1.5-1.2 2.7-2.7 2.7h-7.7c-1.5 0-2.7-1.2-2.7-2.7v-7.7c-.1-1.4 1.2-2.7 2.7-2.7z'/%3E%3Ccircle fill='%23C0C0BF' cx='186' cy='48.9' r='.7'/%3E%3Ccircle fill='%23C0C0BF' cx='194' cy='46.7' r='.7'/%3E%3Cpath fill='none' stroke='%23C0C0BF' stroke-linecap='round' d='m186 53.3.4-.3c.4-.3 1-.3 1.5-.1l1 .4c.5.2 1 .2 1.5-.1l.8-.5c.4-.3 1-.3 1.5-.1l1.8.8'/%3E%3Cpath fill='%23C0C0BF' stroke='%23C0C0BF' stroke-width='.25' stroke-miterlimit='10' d='M156 44.3c-.2-.1-.4-.1-.5 0 0 0-.2.1-.9.2-.7 0-2.4-.1-3.8-.6-.8-.3-1.7-.5-2.5-.5h-.5c-1.3 0-2.5.3-3.6 1-.2.1-.2.2-.2.4v11.6c0 .3.1.5.3.5.6 0 .5-.4.5-.6v-5.7c.7-.3 3.2-1.1 5.8-.1 1.6.6 3.5.7 4.3.7.8 0 1.3-.3 1.3-.3.2-.1.3-.2.3-.4v-5.7c-.3-.2-.4-.4-.5-.5zm-.4 5.9c-.1 0-.7.1-1 .1-.7 0-2.4-.1-3.8-.6-2.5-1-5-.5-6.2-.1v-4.9c.9-.5 2.2-.7 3.2-.7h.4c.7 0 1.5.2 2.2.4 1.6.6 3.5.7 4.3.7.2 0 .8 0 1-.1v5.2z'/%3E%3Cpath fill='none' stroke='%23C0C0BF' d='M48.1 43.5h3.7c2.5 0 4.5 2 4.5 4.5 0 .5-.4.9-.9.9H44.5c-.5 0-.9-.4-.9-.9 0-2.5 2-4.5 4.5-4.5z'/%3E%3Cpath fill='none' stroke='%23C0C0BF' stroke-linecap='round' d='M43.5 48.8c-.2.1-.5 1.2 0 1.5 1.4 1 8.5.8 11.3.6.8-.1 1.6-.4 1.7-1.2 0-.3-.1-.6-.6-.9'/%3E%3Cpath fill='none' stroke='%23C0C0BF' stroke-linecap='round' d='m43.5 50.6-.2.4c-.2.5.2 1 .7.9.3-.1.5 0 .7.3l.1.2c.3.5 1 .6 1.5.2h0c.3-.2.7-.3 1-.2l.8.3c.4.2.8.1 1.2 0l.5-.2c.4-.2.9-.2 1.3 0l.5.2c.4.2.8.2 1.2 0l.2-.1c.3-.2.8-.2 1.1.1l.2.2c.3.3.8.2 1-.2l.1-.2c.1-.2 0-.3.2-.3.5 0 1.2-.3 1.1-.7l-.4-1.1'/%3E%3Cpath fill='none' stroke='%23C0C0BF' stroke-linecap='round' d='M43.5 52.2c-.1.2-.3.8 0 1.1.3.4 3 1.1 6.4 1.1 2.2 0 4.6-.3 6-.6.5-.1.9-.5.8-.9 0-.2-.2-.5-.4-.7'/%3E%3Cpath fill='none' stroke='%23C0C0BF' stroke-linecap='round' d='M43.5 53.3c0 .5.6 2.3 1.3 2.7 1.8.8 5.7.7 8.1.5 1.3-.1 2.5-.7 3.2-1.8.3-.5.5-1 .5-1.4'/%3E%3Cellipse fill='%23C0C0BF' cx='51.6' cy='46.5' rx='.3' ry='.4'/%3E%3Cellipse fill='%23C0C0BF' cx='53' cy='45' rx='.3' ry='.4'/%3E%3Cellipse fill='%23C0C0BF' cx='53' cy='47.2' rx='.3' ry='.4'/%3E%3Cellipse fill='%23C0C0BF' cx='54.3' cy='46.5' rx='.3' ry='.4'/%3E%3Cellipse fill='%23C0C0BF' cx='50.9' cy='45' rx='.3' ry='.4'/%3E%3Cpath fill='none' stroke='%23C0C0BF' d='M24.2 51v-7.6c.1.1.8.9 2.8 3.1 2.5-1.7 5.6-.7 6.9 0l2.4-3.1v7.1c0 1.2-.1 2.5-.9 3.4-1 1.2-2.7 2.5-5.3 2.5-2.9 0-4.5-1.5-5.3-2.9-.6-.6-.6-1.5-.6-2.5z'/%3E%3Cpath fill='none' stroke='%23C0C0BF' stroke-linecap='round' d='m21.2 50 5.4 1.2m-5.4 2.9 5.4-1.2M38.8 50l-5.4 1.2m5.4 2.9-5.4-1.2'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23C0C0BF' d='m29.5 52.4-.5-.7c-.2-.3 0-.6.3-.6h1.4c.3 0 .5.4.3.6l-.7 1c-.7 1.2-2.6 1.1-3.1-.3l-.1-.2c-.1-.2 0-.4.2-.5s.4 0 .5.2l.1.2c.4.7 1.2.8 1.6.3z'/%3E%3Cpath fill='none' stroke='%23C0C0BF' stroke-linecap='round' d='m32.4 52.1-.1.2c-.4 1-1.8 1.1-2.3.2'/%3E%3Ccircle fill='%23C0C0BF' cx='27.6' cy='49.7' r='.7'/%3E%3Ccircle fill='%23C0C0BF' cx='32.4' cy='49.7' r='.7'/%3E%3Cg fill='%236AA9DD' stroke='%236AA9DD' stroke-width='.1' stroke-miterlimit='10'%3E%3Cpath d='M14.6 71.2c-.1-.1-.2-.2-.3-.2H5.7c-.1 0-.2.1-.3.2-.1.1-.1.2 0 .4.7 2 2.5 3.3 4.6 3.3s3.9-1.3 4.6-3.3c.1-.1.1-.3 0-.4zM10 74.1c-1.6 0-3-.9-3.7-2.2h7.3c-.6 1.3-2 2.2-3.6 2.2zm2.8-4.6c.6 0 1.1-.5 1.1-1.1 0-.6-.5-1.2-1.1-1.2-.6 0-1.2.5-1.2 1.2 0 .6.6 1.1 1.2 1.1zm0-1.5c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4c0-.3.2-.4.4-.4zm-5.6 1.5c.6 0 1.2-.5 1.2-1.1 0-.6-.5-1.2-1.2-1.2-.6 0-1.1.5-1.1 1.2 0 .6.5 1.1 1.1 1.1zm0-1.5c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4c0-.3.2-.4.4-.4z'/%3E%3Cpath d='M10 63c-3.8 0-7 3.1-7 7 0 3.8 3.1 7 7 7s7-3.1 7-7c0-3.8-3.2-7-7-7zm0 13.2c-3.4 0-6.2-2.8-6.2-6.2 0-3.4 2.8-6.2 6.2-6.2s6.2 2.8 6.2 6.2c0 3.4-2.8 6.2-6.2 6.2z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%236AA9DD' d='M64.1 73.4h2.3c.2 0 .4.2.4.4v2.1c0 .2-.2.4-.4.4h-2.3c-.2 0-.4-.2-.4-.4v-2.1c0-.2.1-.4.4-.4zm9.4.1h2.4c.2 0 .4.2.4.4V76c0 .2-.2.4-.4.4h-2.4c-.2 0-.4-.2-.4-.4v-2.1c0-.3.2-.4.4-.4zm-9.8-5.1h12.6v5H63.7v-5z'/%3E%3Cpath fill='none' stroke='%236AA9DD' d='M65.5 63.6h8.9c1 0 1.9.8 1.9 1.9v3.1H63.7v-3.1c0-1 .8-1.9 1.8-1.9z'/%3E%3Ccircle fill='%236AA9DD' cx='66.2' cy='70.9' r='.9'/%3E%3Ccircle fill='%236AA9DD' cx='73.8' cy='70.9' r='.9'/%3E%3Cg fill='none' stroke='%236AA9DD'%3E%3Cpath d='M96.4 70c0 3.6-2.9 6.5-6.4 6.5s-6.4-2.9-6.4-6.5 2.9-6.5 6.4-6.5 6.4 2.9 6.4 6.5z'/%3E%3Cpath d='M96.3 68.6v.1c-.9.1-2.9.1-4.6-1.2-1.1-.8-2-1.7-2.6-2.5-.3-.4-.6-.8-.7-1.1-.1-.1-.1-.2-.1-.2.5-.1 1.2-.2 2-.2 1.2 0 2.5.3 3.5 1.1s1.7 1.8 2.1 2.8c.2.5.3.9.4 1.2zM84 72.2v-.1c.9-.2 2.9-.4 4.7.6 1.1.7 1.9 1.5 2.4 2.3.4.5.6 1 .7 1.3-.4.1-1 .2-1.7.3-1 0-2.1-.1-3.2-.8s-1.9-1.6-2.4-2.5c-.3-.5-.4-.9-.5-1.1z'/%3E%3C/g%3E%3Cg fill='none' stroke='%236AA9DD'%3E%3Cpath stroke-linecap='round' d='m116.3 66.8-1.4 2-.8-.8-.6-.7v.9l-.1 8.2h-6.8l-.1-8.2v-.9l-.6.7-.8.8-1.4-2 2.6-2.9c.1-.1.2-.1.3-.1h1.3l.4.7c.7 1.3 2.6 1.3 3.3-.1l.3-.6h1.2c.1 0 .2 0 .3.1l.3-.3-.3.3 2.9 2.9z'/%3E%3Cpath d='M110.1 67.7h2v.9c0 .4-.4.7-1 .7s-1-.3-1-.7v-.9z'/%3E%3C/g%3E%3Cpath d='M126.8 74.3c0 1.2-1 2.2-2.2 2.2s-2.2-1-2.2-2.2 1-2.2 2.2-2.2 2.2 1 2.2 2.2zm10.8 0c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2s1-2.2 2.2-2.2c1.2 0 2.2 1 2.2 2.2zm-10.8-9.9v9.9m10.9-9.9v9.9m-10.9-10.8h10.8v2.7h-10.8v-2.7z' fill='none' stroke='%236AA9DD'/%3E%3Cg fill='%236AA9DD'%3E%3Cpath d='M170.8 63.1h-.8c-2.1 0-4 1-5.3 2.5h-.1l-.1-.1-1-1.2-.3 3.4 3.4.3-1.1-1.3-.1-.1.1-.1c1.1-1.4 3-2.3 5-2.1 3.2.3 5.5 3.1 5.2 6.3-.3 3-3.1 5.3-6.1 5.1-3.1-.2-5.4-2.9-5.3-6l-1.3-.1c-.2 3.8 2.6 7.1 6.3 7.4 3.9.3 7.3-2.6 7.6-6.5.3-3.8-2.5-7.1-6.1-7.5z'/%3E%3Cpath d='M170.3 67.4c0-.3-.3-.6-.6-.6s-.6.3-.6.6v3.2c0 .2.1.3.2.4.1.1.3.2.4.2h2.4c.4 0 .6-.3.6-.6s-.3-.6-.7-.6h-1.8v-.2l.1-2.4z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%236AA9DD' d='M186.2 63.4h7.7c1.5 0 2.7 1.2 2.7 2.7v7.7c0 1.5-1.2 2.7-2.7 2.7h-7.7c-1.5 0-2.7-1.2-2.7-2.7v-7.7c-.1-1.4 1.2-2.7 2.7-2.7z'/%3E%3Ccircle fill='%236AA9DD' cx='186' cy='68.9' r='.7'/%3E%3Ccircle fill='%236AA9DD' cx='194' cy='66.7' r='.7'/%3E%3Cpath fill='none' stroke='%236AA9DD' stroke-linecap='round' d='m186 73.3.4-.3c.4-.3 1-.3 1.5-.1l1 .4c.5.2 1 .2 1.5-.1l.8-.5c.4-.3 1-.3 1.5-.1l1.8.8'/%3E%3Cpath fill='%236AA9DD' stroke='%236AA9DD' stroke-width='.25' stroke-miterlimit='10' d='M156 64.3c-.2-.1-.4-.1-.5 0 0 0-.2.1-.9.2-.7 0-2.4-.1-3.8-.6-.8-.3-1.7-.5-2.5-.5h-.5c-1.3 0-2.5.3-3.6 1-.2.1-.2.2-.2.4v11.6c0 .3.1.5.3.5.6 0 .5-.4.5-.6v-5.7c.7-.3 3.2-1.1 5.8-.1 1.6.6 3.5.7 4.3.7.8 0 1.3-.3 1.3-.3.2-.1.3-.2.3-.4v-5.7c-.3-.2-.4-.4-.5-.5zm-.4 5.9c-.1 0-.7.1-1 .1-.7 0-2.4-.1-3.8-.6-2.5-1-5-.5-6.2-.1v-4.9c.9-.5 2.2-.7 3.2-.7h.4c.7 0 1.5.2 2.2.4 1.6.6 3.5.7 4.3.7.2 0 .8 0 1-.1v5.2z'/%3E%3Cpath fill='none' stroke='%236AA9DD' d='M48.1 63.5h3.7c2.5 0 4.5 2 4.5 4.5 0 .5-.4.9-.9.9H44.5c-.5 0-.9-.4-.9-.9 0-2.5 2-4.5 4.5-4.5z'/%3E%3Cpath fill='none' stroke='%236AA9DD' stroke-linecap='round' d='M43.5 68.8c-.2.1-.5 1.2 0 1.5 1.4.9 8.5.8 11.3.6.8-.1 1.6-.4 1.7-1.2 0-.3-.1-.6-.6-.9'/%3E%3Cpath fill='none' stroke='%236AA9DD' stroke-linecap='round' d='m43.5 70.6-.2.4c-.2.5.2 1 .7.9.3-.1.5.1.7.3l.1.2c.3.5 1 .6 1.5.2h0c.3-.2.7-.3 1-.2l.8.3c.4.2.8.1 1.2 0l.5-.2c.4-.2.9-.2 1.3 0l.5.2c.4.2.8.2 1.2-.1l.2-.1c.3-.2.8-.2 1.1.1l.2.2c.3.3.8.2 1-.2l.1-.2c.1-.2 0-.3.2-.3.5 0 1.2-.3 1.1-.7l-.4-1.1'/%3E%3Cpath fill='none' stroke='%236AA9DD' stroke-linecap='round' d='M43.5 72.2c-.1.2-.3.8 0 1.1.3.4 3 1.1 6.4 1.1 2.2 0 4.6-.3 6-.6.5-.1.9-.4.8-.9 0-.2-.2-.5-.4-.7'/%3E%3Cpath fill='none' stroke='%236AA9DD' stroke-linecap='round' d='M43.5 73.3c0 .5.6 2.3 1.3 2.7 1.8.8 5.7.7 8.1.5 1.3-.1 2.5-.7 3.2-1.8.3-.5.5-1 .5-1.4'/%3E%3Cellipse fill='%236AA9DD' cx='51.6' cy='66.5' rx='.3' ry='.4'/%3E%3Cellipse fill='%236AA9DD' cx='53' cy='65' rx='.3' ry='.4'/%3E%3Cellipse fill='%236AA9DD' cx='53' cy='67.2' rx='.3' ry='.4'/%3E%3Cellipse fill='%236AA9DD' cx='54.3' cy='66.5' rx='.3' ry='.4'/%3E%3Cellipse fill='%236AA9DD' cx='50.9' cy='65' rx='.3' ry='.4'/%3E%3Cpath fill='none' stroke='%236AA9DD' d='M24.2 71v-7.6c.1.1.8.9 2.8 3.1 2.5-1.7 5.6-.7 6.9 0l2.4-3.1v7.1c0 1.2-.1 2.5-.9 3.4-1 1.2-2.7 2.5-5.3 2.5-2.9 0-4.5-1.5-5.3-2.9-.6-.6-.6-1.5-.6-2.5z'/%3E%3Cpath fill='none' stroke='%236AA9DD' stroke-linecap='round' d='m21.2 70.1 5.4 1.2m-5.4 2.8 5.4-1.2m12.2-2.8-5.4 1.2m5.4 2.8-5.4-1.2'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%236AA9DD' d='m29.5 72.4-.5-.7c-.2-.3 0-.6.3-.6h1.4c.3 0 .5.4.3.6l-.7 1c-.7 1.2-2.6 1.1-3.1-.3l-.1-.2c-.1-.2 0-.4.2-.5.2-.1.4 0 .5.2l.1.2c.4.7 1.2.8 1.6.3z'/%3E%3Cpath fill='none' stroke='%236AA9DD' stroke-linecap='round' d='m32.4 72.1-.1.2c-.4 1-1.8 1.1-2.3.2'/%3E%3Ccircle fill='%236AA9DD' cx='27.6' cy='69.7' r='.7'/%3E%3Ccircle fill='%236AA9DD' cx='32.4' cy='69.7' r='.7'/%3E%3Cg fill='%23868686' stroke='%23868686' stroke-width='.1' stroke-miterlimit='10'%3E%3Cpath d='M12.8 9.5c.6 0 1.1-.5 1.1-1.2 0-.6-.5-1.1-1.1-1.1-.6 0-1.2.5-1.2 1.1s.6 1.2 1.2 1.2zm0-1.6c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4.2-.4.4-.4zM7.2 9.5c.6 0 1.2-.5 1.2-1.2 0-.6-.5-1.1-1.2-1.1-.6 0-1.1.5-1.1 1.1s.5 1.2 1.1 1.2zm0-1.6c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4.2-.4.4-.4zm7.4 3.3c-.1-.1-.2-.2-.3-.2H5.7c-.1 0-.2.1-.3.2-.1.1-.1.2 0 .4.7 2 2.5 3.3 4.6 3.3s3.9-1.3 4.6-3.3c.1-.2.1-.3 0-.4zM10 14.1c-1.6 0-3-.9-3.7-2.2h7.3c-.6 1.3-2 2.2-3.6 2.2z'/%3E%3Cpath d='M10 3c-3.8 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.2-7-7-7zm0 13.2c-3.4 0-6.2-2.8-6.2-6.2S6.6 3.8 10 3.8s6.2 2.8 6.2 6.2-2.8 6.2-6.2 6.2z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23868686' d='M64.1 13.4h2.3c.2 0 .4.2.4.4v2.1c0 .2-.2.4-.4.4h-2.3c-.2 0-.4-.2-.4-.4v-2.1c0-.2.1-.4.4-.4zm9.4 0h2.4c.2 0 .4.2.4.4v2.1c0 .2-.2.4-.4.4h-2.4c-.2 0-.4-.2-.4-.4v-2.1c0-.2.2-.4.4-.4zm-9.8-5h12.6v5H63.7v-5z'/%3E%3Cpath fill='none' stroke='%23868686' d='M65.5 3.6h8.9c1 0 1.9.8 1.9 1.9v3.1H63.7V5.5c0-1.1.8-1.9 1.8-1.9z'/%3E%3Ccircle fill='%23868686' cx='66.2' cy='10.9' r='.9'/%3E%3Ccircle fill='%23868686' cx='73.8' cy='10.9' r='.9'/%3E%3Cg fill='none' stroke='%23868686'%3E%3Cpath d='M96.4 10c0 3.6-2.9 6.5-6.4 6.5s-6.4-2.9-6.4-6.5 2.9-6.5 6.4-6.5 6.4 2.9 6.4 6.5z'/%3E%3Cpath d='M96.3 8.6v.1c-.9.1-2.9.1-4.6-1.2-1.1-.8-2-1.7-2.6-2.5-.3-.4-.6-.8-.7-1.1-.1-.1-.1-.2-.1-.2.5-.1 1.2-.2 2-.2 1.2 0 2.5.3 3.5 1.1s1.7 1.8 2.1 2.8c.2.5.3.9.4 1.2zM84 12.1V12c.9-.2 2.9-.4 4.7.6 1.1.6 1.9 1.5 2.4 2.3.4.5.6 1 .7 1.3-.4.1-1 .2-1.7.3-1 0-2.1-.1-3.2-.8-1.1-.6-1.9-1.6-2.4-2.5-.3-.4-.4-.8-.5-1.1z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23868686'%3E%3Cpath stroke-linecap='round' d='m116.3 6.8-1.4 2-.8-.8-.6-.7v.9l-.1 8.2h-6.8l-.1-8.2v-.9l-.6.7-.8.8-1.4-2 2.6-2.9c.1-.1.2-.1.3-.1h1.3l.4.7c.7 1.3 2.6 1.3 3.3-.1l.3-.6h1.2c.1 0 .2 0 .3.1l.3-.3-.3.3 2.9 2.9z'/%3E%3Cpath d='M110.1 7.7h2v.9c0 .4-.4.7-1 .7s-1-.3-1-.7v-.9z'/%3E%3C/g%3E%3Cpath d='M126.8 14.3c0 1.2-1 2.2-2.2 2.2s-2.2-1-2.2-2.2 1-2.2 2.2-2.2 2.2 1 2.2 2.2zm10.8 0c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2s1-2.2 2.2-2.2c1.2 0 2.2 1 2.2 2.2zm-10.8-9.9v9.9m10.9-9.9v9.9M126.8 3.5h10.8v2.7h-10.8V3.5z' fill='none' stroke='%23868686'/%3E%3Cg fill='%23868686'%3E%3Cpath d='M170.8 3.1h-.8c-2.1 0-4 1-5.3 2.5h-.1l-.1-.1-1-1.2-.3 3.4 3.4.3-1.1-1.3-.1-.1.1-.1c1.1-1.4 3-2.3 5-2.1 3.2.3 5.5 3.1 5.2 6.3-.3 3-3.1 5.3-6.1 5.1-3.1-.2-5.4-2.9-5.3-6l-1.3-.3c-.2 3.8 2.6 7.1 6.3 7.4 3.9.4 7.3-2.6 7.6-6.5.3-3.6-2.5-6.9-6.1-7.3z'/%3E%3Cpath d='M170.3 7.4c0-.3-.3-.6-.6-.6s-.7.3-.7.6v3.2c0 .2.1.3.2.4.1.1.3.2.4.2h2.4c.4 0 .6-.3.6-.6s-.3-.6-.6-.6h-1.8v-.2l.1-2.4z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23868686' d='M186.2 3.4h7.7c1.5 0 2.7 1.2 2.7 2.7v7.7c0 1.5-1.2 2.7-2.7 2.7h-7.7c-1.5 0-2.7-1.2-2.7-2.7V6.1c-.1-1.5 1.2-2.7 2.7-2.7z'/%3E%3Ccircle fill='%23868686' cx='186' cy='8.9' r='.7'/%3E%3Ccircle fill='%23868686' cx='194' cy='6.7' r='.7'/%3E%3Cpath fill='none' stroke='%23868686' stroke-linecap='round' d='m186 13.3.4-.3c.4-.3 1-.3 1.5-.1l1 .4c.5.2 1 .2 1.5-.1l.8-.5c.4-.3 1-.3 1.5-.1l1.8.8'/%3E%3Cpath fill='%23868686' stroke='%23868686' stroke-width='.25' stroke-miterlimit='10' d='M156 4.3c-.2-.1-.4-.1-.5 0 0 0-.2.1-.9.1s-2.4-.1-3.8-.6c-.8-.3-1.7-.5-2.5-.5h-.5c-1.3 0-2.5.3-3.6 1-.2.1-.2.2-.2.4v11.6c0 .3.1.5.3.5.6 0 .5-.4.5-.6v-5.7c.7-.3 3.2-1.1 5.8-.1 1.6.6 3.5.7 4.3.7.8 0 1.3-.3 1.3-.3.2-.1.3-.2.3-.4V4.7c-.3-.2-.4-.3-.5-.4zm-.4 5.9c-.1 0-.7.1-1 .1-.7 0-2.4-.1-3.8-.6-2.5-1-5-.5-6.2-.1V4.7c.9-.5 2.2-.7 3.2-.7h.4c.7 0 1.5.2 2.2.4 1.6.6 3.5.7 4.3.7.2 0 .8 0 1-.1v5.2z'/%3E%3Cpath fill='none' stroke='%23868686' d='M48.1 3.5h3.7c2.5 0 4.5 2 4.5 4.5 0 .5-.4.9-.9.9H44.5c-.5 0-.9-.4-.9-.9 0-2.5 2-4.5 4.5-4.5z'/%3E%3Cpath fill='none' stroke='%23868686' stroke-linecap='round' d='M43.5 8.7c-.2.1-.5 1.2 0 1.5 1.4.9 8.5.8 11.3.6.8-.1 1.6-.4 1.7-1.2 0-.3-.1-.6-.6-.9'/%3E%3Cpath fill='none' stroke='%23868686' stroke-linecap='round' d='m43.5 10.6-.2.4c-.2.5.2 1 .7.9.3-.1.5.1.7.3l.1.2c.3.5 1 .6 1.5.2h0c.3-.2.7-.3 1-.2l.8.3c.4.1.8.1 1.2 0l.5-.2c.4-.2.9-.2 1.3 0l.5.2c.4.2.8.1 1.2-.1l.2-.1c.3-.2.8-.1 1.1.1l.2.2c.3.3.8.2 1-.2l.1-.2c.1-.2 0-.3.2-.4.5 0 1.2-.3 1.1-.7l-.4-1.1'/%3E%3Cpath fill='none' stroke='%23868686' stroke-linecap='round' d='M43.5 12.1c-.1.2-.3.8 0 1.1.3.4 3 1.1 6.4 1.1 2.2 0 4.6-.3 6-.6.5-.1.9-.4.8-.9 0-.2-.2-.5-.4-.7'/%3E%3Cpath fill='none' stroke='%23868686' stroke-linecap='round' d='M43.5 13.3c0 .5.6 2.4 1.3 2.6 1.8.8 5.7.7 8.1.5 1.3-.1 2.5-.7 3.2-1.8.3-.5.5-1 .5-1.4'/%3E%3Cellipse fill='%23868686' cx='51.6' cy='6.5' rx='.3' ry='.4'/%3E%3Cellipse fill='%23868686' cx='53' cy='4.9' rx='.3' ry='.4'/%3E%3Cellipse fill='%23868686' cx='53' cy='7.2' rx='.3' ry='.4'/%3E%3Cellipse fill='%23868686' cx='54.3' cy='6.5' rx='.3' ry='.4'/%3E%3Cellipse fill='%23868686' cx='50.9' cy='4.9' rx='.3' ry='.4'/%3E%3Cpath fill='none' stroke='%23868686' d='M24.2 11V3.5c.1.1.8.9 2.8 3.1 2.5-1.7 5.6-.7 6.9 0l2.4-3.1v7.1c0 1.2-.1 2.5-.9 3.4-1 1.2-2.7 2.5-5.3 2.5-2.9 0-4.5-1.5-5.3-2.9-.6-.7-.6-1.7-.6-2.6z'/%3E%3Cpath fill='none' stroke='%23868686' stroke-linecap='round' d='m21.2 10 5.4 1.2m-5.4 2.9 5.4-1.2M38.8 10l-5.4 1.2m5.4 2.9-5.4-1.2'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23868686' d='m29.5 12.4-.5-.7c-.2-.3 0-.6.3-.6h1.4c.3 0 .5.4.3.6l-.7 1c-.7 1.2-2.6 1.1-3.1-.3l-.1-.2c-.1-.2 0-.4.2-.5s.4 0 .5.2l.1.2c.4.6 1.2.8 1.6.3z'/%3E%3Cpath fill='none' stroke='%23868686' stroke-linecap='round' d='m32.4 12.1-.1.2c-.4 1-1.8 1.1-2.3.2'/%3E%3Ccircle fill='%23868686' cx='27.6' cy='9.7' r='.7'/%3E%3Ccircle fill='%23868686' cx='32.4' cy='9.7' r='.7'/%3E%3C/svg%3E\");background-position:0 0}.EmojiPickerReact.epr-dark-theme .epr-category-nav>button.epr-cat-btn{background-position-y:calc(var(--epr-category-navigation-button-size)*2)}aside.EmojiPickerReact.epr-main:has(input:-moz-placeholder-shown) .epr-category-nav{background-position-y:calc(var(--epr-category-navigation-button-size)*3)}aside.EmojiPickerReact.epr-main:has(input:placeholder-shown) .epr-category-nav{background-position-y:calc(var(--epr-category-navigation-button-size)*3)}.EmojiPickerReact.epr-dark-theme:not(.epr-search-active) .epr-category-nav>button.epr-cat-btn.epr-active,.EmojiPickerReact.epr-dark-theme:not(.epr-search-active) .epr-category-nav>button.epr-cat-btn:hover{background-position-y:calc(var(--epr-category-navigation-button-size)*3)}.EmojiPickerReact button.epr-cat-btn.epr-icn-suggested{background-position-x:calc(var(--epr-category-navigation-button-size)*-8)}.EmojiPickerReact button.epr-cat-btn.epr-icn-custom{background-position-x:calc(var(--epr-category-navigation-button-size)*-9)}.EmojiPickerReact button.epr-cat-btn.epr-icn-activities{background-position-x:calc(var(--epr-category-navigation-button-size)*-4)}.EmojiPickerReact button.epr-cat-btn.epr-icn-animals_nature{background-position-x:calc(var(--epr-category-navigation-button-size)*-1)}.EmojiPickerReact button.epr-cat-btn.epr-icn-flags{background-position-x:calc(var(--epr-category-navigation-button-size)*-7)}.EmojiPickerReact button.epr-cat-btn.epr-icn-food_drink{background-position-x:calc(var(--epr-category-navigation-button-size)*-2)}.EmojiPickerReact button.epr-cat-btn.epr-icn-objects{background-position-x:calc(var(--epr-category-navigation-button-size)*-5)}.EmojiPickerReact button.epr-cat-btn.epr-icn-smileys_people{background-position-x:0}.EmojiPickerReact button.epr-cat-btn.epr-icn-symbols{background-position-x:calc(var(--epr-category-navigation-button-size)*-6)}.EmojiPickerReact button.epr-cat-btn.epr-icn-travel_places{background-position-x:calc(var(--epr-category-navigation-button-size)*-3)}"),Pe(".EmojiPickerReact .epr-header .epr-header-overlay{padding:var(--epr-header-padding);z-index:var(--epr-header-overlay-z-index)}"),Pe(".EmojiPickerReact .epr-search-container{display:block;flex:1;min-width:0}.EmojiPickerReact .epr-search-container input.epr-search{background-color:var(--epr-search-input-bg-color);border:1px solid var(--epr-search-input-bg-color);border-radius:var(--epr-search-input-border-radius);color:var(--epr-search-input-text-color);height:var(--epr-search-input-height);outline:none;padding:var(--epr-search-input-padding);transition:all .2s ease-in-out;width:100%}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search .epr-icn-clear-search{background-color:transparent;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='80' xml:space='preserve'%3E%3Cpath fill='%23868686' d='M6.98 13.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 8c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.4a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.2-.21.54 0 .74z'/%3E%3Cpath fill='%23868686' d='M10.15 18.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%233371B7' d='M6.98 33.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 28c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%233371B7' d='M10.15 38.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%23C0C0BF' d='M6.98 53.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 48c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%23C0C0BF' d='M10.15 58.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3Cpath fill='%236AA9DD' d='M6.98 73.59a.53.53 0 0 0 .74 0l2.42-2.42 2.43 2.43a.53.53 0 0 0 .74 0c.21-.21.21-.54 0-.75l-2.43-2.43L13.32 68c.21-.21.21-.54 0-.75a.525.525 0 0 0-.75 0l-2.42 2.42-2.41-2.41a.525.525 0 0 0-.75 0c-.21.21-.21.54 0 .75l2.41 2.41-2.42 2.42c-.21.21-.21.55 0 .75z'/%3E%3Cpath fill='%236AA9DD' d='M10.15 78.43c4.41 0 8-3.59 8-8s-3.59-8-8-8-8 3.59-8 8 3.59 8 8 8zm0-14.94c3.83 0 6.94 3.11 6.94 6.94 0 3.83-3.11 6.94-6.94 6.94-3.83 0-6.94-3.11-6.94-6.94 0-3.83 3.12-6.94 6.94-6.94z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:20px;height:20px;width:20px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search{align-items:center;border-radius:50%;display:flex;height:30px;justify-content:center;padding:0;position:absolute;right:var(--epr-search-bar-inner-padding);top:50%;transform:translateY(-50%);width:30px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:focus .epr-icn-clear-search,.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover .epr-icn-clear-search{background-position-y:-20px}.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:focus,.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover{background:var(--epr-hover-bg-color)}.EmojiPickerReact..epr-dark-theme .epr-search-container button.epr-btn-clear-search .epr-icn-clear-search{background-position-y:-40px}.EmojiPickerReact..epr-dark-theme .epr-search-container button.epr-btn-clear-search:hover .epr-icn-clear-search{background-position-y:-60px}.EmojiPickerReact .epr-search-container .epr-icn-search{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' xml:space='preserve'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23868686' d='M12 8.81c0 2.08-1.68 3.76-3.76 3.76s-3.76-1.68-3.76-3.76 1.68-3.76 3.76-3.76S12 6.73 12 8.81zm-.77 3.91c-.83.64-1.87 1.01-2.99 1.01-2.72 0-4.92-2.2-4.92-4.92 0-2.72 2.2-4.92 4.92-4.92 2.72 0 4.92 2.2 4.92 4.92 0 1.13-.38 2.16-1.01 2.99l3.94 3.93c.25.25.25.66 0 .92-.25.25-.66.25-.92 0l-3.94-3.93z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23C0C0BF' d='M12 28.81c0 2.08-1.68 3.76-3.76 3.76s-3.76-1.68-3.76-3.76 1.68-3.76 3.76-3.76S12 26.73 12 28.81zm-.77 3.91c-.83.64-1.87 1.01-2.99 1.01-2.72 0-4.92-2.2-4.92-4.92 0-2.72 2.2-4.92 4.92-4.92 2.72 0 4.92 2.2 4.92 4.92 0 1.13-.38 2.16-1.01 2.99l3.94 3.93c.25.25.25.66 0 .92-.25.25-.66.25-.92 0l-3.94-3.93z'/%3E%3C/svg%3E\");background-position:0 0;background-repeat:no-repeat;background-size:20px;content:\"\";height:20px;left:var(--epr-search-bar-inner-padding);position:absolute;top:50%;transform:translateY(-50%);width:20px}.EmojiPickerReact.epr-dark-theme .epr-search-container .epr-icn-search{background-position-y:-20px}.EmojiPickerReact .epr-search-container input.epr-search::-moz-placeholder{color:var(--epr-search-input-placeholder-color)}.EmojiPickerReact .epr-search-container input.epr-search::placeholder{color:var(--epr-search-input-placeholder-color)}.EmojiPickerReact .epr-search-container input.epr-search:focus{background-color:var(--epr-search-input-bg-color-active);border:1px solid var(--epr-search-border-color)}");var da,ia=i(d.emojiPicker)+" "+i(d.emojiList);function ta(e){var a=e.value;if(!a)return null;var n='button[data-full-name*="'+Ae(a)+'"]';return(0,f.createElement)("style",null,"\n "+ia+" "+i(d.category)+":not(:has("+n+")) {\n display: none;\n }\n\n "+ia+" button"+i(d.emoji)+":not("+n+") {\n display: none;\n }\n ")}function oa(){return(0,f.createElement)(Ze,{className:"epr-header"},(0,f.createElement)(na,null),(0,f.createElement)(aa,null))}function ca(){return document.activeElement}function ua(){var e,a,n,r,d,i,l,s,b;!function(){var e,a,n=y(),r=xe(),d=(a=j(),(0,f.useCallback)((function(f){requestAnimationFrame((function(){a.current&&(a.current.scrollTop=f)}))}),[a])),i=x(),t=Ce(),o=ve(),c=(e=xf(),function(){e.current=!0}),u=he(),l=(0,f.useMemo)((function(){return function(f){var e=f.key;if(c(),e===da.Escape){if(f.preventDefault(),o())return void u();r(),d(0),t()}}}),[d,r,u,t,o,c]);(0,f.useEffect)((function(){var f=n.current;if(f)return f.addEventListener("keydown",l),function(){f.removeEventListener("keydown",l)}}),[n,i,d,l])}(),b=z(),e=(0,f.useCallback)((function(){b.current&&u(b.current)}),[b]),a=y(),n=j(),r=x(),d=Sf()[1],i=la(),l=Ge(),s=(0,f.useMemo)((function(){return function(f){var a;switch(f.key){case da.ArrowRight:if(!l)return;f.preventDefault(),d(!0),e();break;case da.ArrowDown:f.preventDefault(),i();break;case da.Enter:f.preventDefault(),t(a=de(n.current)),null==a||a.click()}}}),[e,i,d,n,l]),(0,f.useEffect)((function(){var f=r.current;if(f)return f.addEventListener("keydown",s),function(){f.removeEventListener("keydown",s)}}),[a,r,s]),function(){var e=z(),a=Ce(),n=x(),r=la(),d=Sf(),i=d[0],t=d[1],o=Ke(),c=Ge(),u=ga(),l=(0,f.useMemo)((function(){return function(f){var e=f.key;if(c)switch(e){case da.ArrowLeft:if(f.preventDefault(),!i)return a();sa(a);break;case da.ArrowRight:if(f.preventDefault(),!i)return a();ba();break;case da.ArrowDown:f.preventDefault(),i&&t(!1),r();break;default:u(f)}if(o)switch(e){case da.ArrowUp:if(f.preventDefault(),!i)return a();sa(a);break;case da.ArrowDown:if(f.preventDefault(),!i)return a();ba();break;default:u(f)}}}),[i,a,t,r,u,o,c]);(0,f.useEffect)((function(){var f=e.current;if(f)return f.addEventListener("keydown",l),function(){f.removeEventListener("keydown",l)}}),[e,n,i,l])}(),function(){var e=Ce(),a=R(),n=j(),r=ga(),d=(0,f.useMemo)((function(){return function(f){switch(f.key){case da.ArrowUp:f.preventDefault(),e();break;case da.ArrowRight:f.preventDefault(),c(ca());break;case da.ArrowLeft:f.preventDefault(),o(ca());break;case da.ArrowDown:f.preventDefault(),Ue(n.current);break;default:r(f)}}}),[n,e,r]);(0,f.useEffect)((function(){var f=a.current;if(f)return f.addEventListener("keydown",d),function(){f.removeEventListener("keydown",d)}}),[a,n,d])}(),function(){var e,a,n,r=j(),d=(e=Ce(),a=je(),n=ea(),(0,f.useCallback)((function(){return n?e():a()}),[e,n,a])),i=we(),o=ve(),c=he(),u=ga(),l=(0,f.useMemo)((function(){return function(f){var e=f.key,a=If(ca());switch(e){case da.ArrowRight:f.preventDefault(),Ie(a);break;case da.ArrowLeft:f.preventDefault(),function(f){if(f){var e=re(f);e?(t(e),Ee(e)):t(ae(ie(f)))}}(a);break;case da.ArrowDown:if(f.preventDefault(),o()){c();break}_e(a);break;case da.ArrowUp:if(f.preventDefault(),o()){c();break}!function(f,e){if(f){var a=function(f){if(!f)return null;var e,a,n=ce(f),r=oe(n),d=Bf(n,f),i=qf(n,f),t=Lf(n,f);if(0===i){var o=ie(r);return o?Ff(ee(o),-1,t,d):null}return e=d,(a=Of(ee(n),i-1,t))[e]||a[a.length-1]||null}(f);if(!a)return e();t(a),Ee(a)}}(a,d);break;case da.Space:f.preventDefault(),i(f.target);break;default:u(f)}}}),[d,u,i,o,c]);(0,f.useEffect)((function(){var f=r.current;if(f)return f.addEventListener("keydown",l),function(){f.removeEventListener("keydown",l)}}),[r,l])}()}function la(){var e=je(),a=ea(),n=j();return(0,f.useCallback)((function(){return a?Ue(n.current):e()}),[n,e,a])}function sa(f){var e=ca();e&&(e.nextElementSibling||f(),c(e))}function ba(){var f=ca();f&&o(f)}function ga(){var f,e,a=(f=x(),e=ze(),function(a){f.current?(f.current.value=""+f.current.value+a,e(Ae(f.current.value))):e(Ae(a))}),n=Ce(),r=pf(),d=he();return function(f){var e=f.key;(function(f){var e=f.metaKey,a=f.ctrlKey,n=f.altKey;return e||a||n})(f)||r||e.match(/(^[a-zA-Z0-9]$){1}/)&&(f.preventDefault(),d(),n(),a(e))}}!function(f){f.ArrowDown="ArrowDown",f.ArrowUp="ArrowUp",f.ArrowLeft="ArrowLeft",f.ArrowRight="ArrowRight",f.Escape="Escape",f.Enter="Enter",f.Space=" "}(da||(da={}));var ma=new Set;function pa(e){var a=e.children;return(0,f.createElement)(Ef,null,(0,f.createElement)(ha,null,a))}function ha(e){var n,r,i,t,o=e.children,c=function(){var f=lf().theme;return f===g.AUTO?"undefined"!=typeof window&&window.matchMedia("(prefers-color-scheme: dark)").matches?g.DARK:g.LIGHT:f}(),u=ea(),l=y(),s=function(){var f=lf(),e=f.height,a=f.width;return{height:wf(e),width:wf(a)}}(),m=s.height,p=s.width;ua(),r=j(),i=bf(),t=vf(),(0,f.useEffect)((function(){if(i!==b.NATIVE){var f=r.current;return null==f||f.addEventListener("focusin",e),function(){null==f||f.removeEventListener("focusin",e)}}function e(f){var e=If(f.target);if(e){var a=_f(e)[0];a&&X(a)&&function(f,e,a){if(e&&a!==b.NATIVE){var n=Y(e);ma.has(n)||(Q(e).forEach((function(e){var n;n=f(e,a),(new Image).src=n})),ma.add(n))}}(t,a,i)}}}),[r,i,t]);var h={height:m,width:p};return(0,f.createElement)("aside",{className:a(d.emojiPicker,"epr-main",(n={},n[d.searchActive]=u,n["epr-dark-theme"]=c===g.DARK,n)),ref:l,style:h},o)}function va(e){return(0,f.createElement)(l,null,(0,f.createElement)(uf,Object.assign({},e),(0,f.createElement)(pa,null,(0,f.createElement)(oa,null),(0,f.createElement)(He,null),(0,f.createElement)($e,null))))}Pe("aside.EmojiPickerReact.epr-main{border-color:var(--epr-picker-border-color);border-radius:var(--epr-picker-border-radius);border-style:solid;border-width:1px;display:flex;flex-direction:column;position:relative}"),Pe(".EmojiPickerReact{--epr-highlight-color:#007aeb;--epr-hover-bg-color:#f1f8ff;--epr-focus-bg-color:#e0f0ff;--epr-text-color:#858585;--epr-search-input-bg-color:#f6f6f6;--epr-picker-border-color:#e7e7e7;--epr-bg-color:#fff;--epr-category-icon-active-color:#6aa8de;--epr-skin-tone-picker-menu-color:#ffffff95;--epr-horizontal-padding:10px;--epr-picker-border-radius:8px;--epr-search-border-color:var(--epr-highlight-color);--epr-header-padding:15px var(--epr-horizontal-padding);--epr-active-skin-tone-indicator-border-color:var(--epr-highlight-color);--epr-active-skin-hover-color:var(--epr-hover-bg-color);--epr-search-input-bg-color-active:var(--epr-search-input-bg-color);--epr-search-input-padding:0 30px;--epr-search-input-border-radius:8px;--epr-search-input-height:40px;--epr-search-input-text-color:var(--epr-text-color);--epr-search-input-placeholder-color:var(--epr-text-color);--epr-search-bar-inner-padding:var(--epr-horizontal-padding);--epr-category-navigation-button-size:30px;--epr-emoji-variation-picker-height:45px;--epr-emoji-variation-picker-bg-color:var(--epr-bg-color);--epr-preview-height:70px;--epr-preview-text-size:14px;--epr-preview-text-padding:0 var(--epr-horizontal-padding);--epr-preview-border-color:var(--epr-picker-border-color);--epr-preview-text-color:var(--epr-text-color);--epr-category-padding:0 var(--epr-horizontal-padding);--epr-category-label-bg-color:#ffffffe6;--epr-category-label-text-color:var(--epr-text-color);--epr-category-label-padding:0 var(--epr-horizontal-padding);--epr-category-label-height:40px;--epr-emoji-size:30px;--epr-emoji-padding:5px;--epr-emoji-fullsize:calc(var(--epr-emoji-size) + var(--epr-emoji-padding)*2);--epr-emoji-hover-color:var(--epr-hover-bg-color);--epr-emoji-variation-indicator-color:var(--epr-picker-border-color);--epr-emoji-variation-indicator-color-hover:var(--epr-text-color);--epr-header-overlay-z-index:3;--epr-emoji-variations-indictator-z-index:1;--epr-category-label-z-index:2;--epr-skin-variation-picker-z-index:5;--epr-preview-z-index:6}.EmojiPickerReact.epr-dark-theme{--epr-dark:#000;--epr-emoji-variation-picker-bg-color:var(--epr-dark);--epr-highlight-color:silver;--epr-text-color:var(--epr-highlight-color);--epr-hover-bg-color:#363636f6;--epr-focus-bg-color:#474747;--epr-search-input-bg-color:#333;--epr-category-label-bg-color:#222222e6;--epr-picker-border-color:#151617;--epr-bg-color:#222;--epr-search-input-bg-color-active:var(--epr-dark);--epr-emoji-variation-indicator-color:#444;--epr-category-icon-active-color:#3271b7;--epr-skin-tone-picker-menu-color:#22222295}.EmojiPickerReact{background-color:var(--epr-bg-color);overflow:hidden}.EmojiPickerReact .epr-hidden,.EmojiPickerReact.epr-search-active .epr-hidden-on-search,.EmojiPickerReact:not(.epr-search-active) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:not(:-moz-placeholder-shown)) .epr-hidden-on-search{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown)) .epr-hidden-on-search{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:-moz-placeholder-shown) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:placeholder-shown) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}.EmojiPickerReact *{box-sizing:border-box;font-family:sans-serif}.EmojiPickerReact button.epr-btn{background:none;border:0;cursor:pointer;outline:none}");var wa=function(f){var e,a;function n(e){var a;return(a=f.call(this,e)||this).state={hasError:!1},a}a=f,(e=n).prototype=Object.create(a.prototype),e.prototype.constructor=e,P(e,a),n.getDerivedStateFromError=function(){return{hasError:!0}};var r=n.prototype;return r.componentDidCatch=function(f,e){console.error("Emoji Picker React failed to render:",f,e)},r.render=function(){return this.state.hasError?null:this.props.children},n}(f.Component);const ka=function(e){return(0,f.createElement)(wa,null,(0,f.createElement)(va,Object.assign({},e)))}})(),r})())); diff --git a/components/bl-emoji/src/index.js b/components/bl-emoji/src/index.js new file mode 100644 index 000000000..a04be5a04 --- /dev/null +++ b/components/bl-emoji/src/index.js @@ -0,0 +1,71 @@ +import { useState, useMemo } from 'react'; + +import EmojiPicker from './emoji-picker-react.min.js'; + +const { cn, normalizeDimensionValue } = BackendlessUI.CSSUtils; + +export default function EmojiComponent({ component, eventHandlers, elRef }) { + const { + classList, style, display, disabled, buttonColor, buttonSize, + dropdownHeight, dropdownWidth, dropdownPosition, theme, emojiStyle, searchDisabled + } = component; + const { onEmojiSelect } = eventHandlers; + + const [pickerVisibility, setPickerVisibility] = useState(false); + + const validButtonSize = useMemo(() => normalizeDimensionValue(buttonSize), [buttonSize]); + const validDropdownWidth = useMemo(() => normalizeDimensionValue(dropdownWidth), [dropdownWidth]); + const validDropdownHeight = useMemo(() => normalizeDimensionValue(dropdownHeight), [dropdownHeight]); + + const handleEmojiButtonClick = () => { + setPickerVisibility(prevState => !prevState); + }; + + const handleEmojiClick = event => { + const { emoji, names } = event; + + navigator.clipboard.writeText(emoji); + onEmojiSelect({ emoji, emojiNames: names }); + }; + + if (!display) { + return null; + } + + return ( +
+
+
+ + + +
+ { pickerVisibility && +
+ +
+ } +
+
+ ); +} + +function getIconPath(pickerVisibility) { + if (pickerVisibility) { + return 'M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm349.5 52.4c18.7-4.4 35.9 12 25.5 28.1C350.4 374.6 306.3 400 255.9 400s-94.5-25.4-119.1-63.5c-10.4-16.1 6.8-32.5 25.5-28.1c28.9 6.8 60.5 10.5 93.6 10.5s64.7-3.7 93.6-10.5zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm165.8 21.7c-7.6 8.1-20.2 8.5-28.3 .9s-8.5-20.2-.9-28.3c14.5-15.5 35.2-22.3 54.6-22.3s40.1 6.8 54.6 22.3c7.6 8.1 7.1 20.7-.9 28.3s-20.7 7.1-28.3-.9c-5.5-5.8-14.8-9.7-25.4-9.7s-19.9 3.8-25.4 9.7z'; + } + + return 'M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm177.6 62.1C192.8 334.5 218.8 352 256 352s63.2-17.5 78.4-33.9c9-9.7 24.2-10.4 33.9-1.4s10.4 24.2 1.4 33.9c-22 23.8-60 49.4-113.6 49.4s-91.7-25.5-113.6-49.4c-9-9.7-8.4-24.9 1.4-33.9s24.9-8.4 33.9 1.4zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'; +} diff --git a/components/bl-emoji/styles/index.less b/components/bl-emoji/styles/index.less new file mode 100644 index 000000000..e4fa5655f --- /dev/null +++ b/components/bl-emoji/styles/index.less @@ -0,0 +1,55 @@ +@bl-customComponent-emoji-themeColor: @themePrimary; +@bl-customComponent-emoji-backgroundColor: @appBackgroundColor; +@bl-customComponent-emoji-textColor: @appTextColor; + +@bl-customComponent-emoji-disabled-opacity: 0.38; + +@bl-customComponent-emoji-button-transform-onHover: scale(1.2); +@bl-customComponent-emoji-button-transition-onHover: transform .3s; +@bl-customComponent-emoji-emojiPicker-zIndex: 100; + +@bl-customComponent-emoji-dropdownPosition-left: -93%; +@bl-customComponent-emoji-dropdownPosition-center: -46%; +@bl-customComponent-emoji-dropdownPosition-right: 0%; + +.bl-customComponent-emoji { + display: flex; + height: auto; + width: auto; + + &--disabled { + opacity: @bl-customComponent-emoji-disabled-opacity; + pointer-events: none; + cursor: default; + } + + .emoji-picker { + position: relative; + + &__button { + cursor: pointer; + + &:hover { + transform: @bl-customComponent-emoji-button-transform-onHover; + transition: @bl-customComponent-emoji-button-transition-onHover; + } + } + + &__dropdown { + position: absolute; + z-index: @bl-customComponent-emoji-emojiPicker-zIndex; + + &-position--left { + transform: translateX(@bl-customComponent-emoji-dropdownPosition-left); + } + + &-position--center { + transform: translateX(@bl-customComponent-emoji-dropdownPosition-center); + } + + &-position--right { + transform: translateX(@bl-customComponent-emoji-dropdownPosition-right); + } + } + } +} diff --git a/components/bl-emoji/thumbnail.png b/components/bl-emoji/thumbnail.png new file mode 100644 index 000000000..f103a245f Binary files /dev/null and b/components/bl-emoji/thumbnail.png differ