frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/criar-ideia/criarIdeiaStyles.js

@@ -0,0 +1,144 @@
+import styled from 'styled-components';
+
+const ButtonCriarIdeia = styled.div `
+  width: 282px;
+  height: 196px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 20px 24px;
+  background: #f7f9fc;
+  border: 1px dashed #9c9c9c;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0px 0px 16px 16px;
+  cursor: pointer;
+  :hover {
+    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
+  }
+  margin-right: 2rem;
+`;
+styled.div `
+  display: flex;
+  flex-direction: row;
+`;
+const CriarIdeia = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 20px 20px 24px;
+  width: 282px;
+  background: ${(props) => (props.isErro ? '#FFE0E0' : '#fff2cc')};
+`;
+styled.div `
+  width: 2px;
+  height: 2px;
+  background: #757575;
+  margin: 0 0.3rem;
+`;
+styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #757575;
+`;
+styled.div `
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 110%;
+  color: #444444;
+  margin-bottom: 4px;
+`;
+const ButtonDigiteIdeia = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 28px 40px;
+  width: 242px;
+  height: 96px;
+  border: 1px solid #69a9e1;
+  margin-bottom: 24px;
+  word-break: break-all;
+  cursor: pointer;
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 140%;
+  color: #9c9c9c;
+  text-align: center;
+`;
+const TextAreaDigite = styled.textarea `
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 4px;
+  width: 242px;
+  border: 1px solid #549fe4;
+  background: ${(props) => (props.isErro ? '#FFE0E0' : '#fff2cc')};
+  margin-bottom: 16px;
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  color: #222222;
+  overflow: hidden;
+  resize: none;
+`;
+const CountCaracter = styled.div `
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #757575;
+  margin-bottom: 16px;
+`;
+const ButtonPublicarAndCancelar = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  p {
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 110%;
+    color: #000000;
+    margin-right: 1rem;
+  }
+  div {
+    margin-right: 1rem;
+  }
+`;
+const containerError = styled.div `
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  svg {
+    margin-right: 0.5rem;
+  }
+  p {
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: #923534;
+  }
+`;
+
+export { ButtonCriarIdeia, ButtonDigiteIdeia, ButtonPublicarAndCancelar, CountCaracter, CriarIdeia, TextAreaDigite, containerError };

package/dist/esm/src/components/criar-ideia/index.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { CriarIdeia as CriarIdeia$1, TextAreaDigite, CountCaracter, containerError, ButtonPublicarAndCancelar, ButtonDigiteIdeia, ButtonCriarIdeia } from './criarIdeiaStyles.js';
+import { ErrorAlert, IconCriarIdeia } from '../../shared/icons.js';
+import { useState, useRef, useEffect } from 'react';
+import useAutosizeTextArea from './useAutosizeTextArea.js';
+import MiniButton from '../mini-button/index.js';
+
+function CriarIdeia(props) {
+    const [criarIdeia, setCriarIdeia] = useState(false);
+    const [digiteIdeia, setDigiteIdeia] = useState(false);
+    const textAreaRef = useRef(null);
+    const [stringValueTextArea, setStringValueTextArea] = useState('');
+    useAutosizeTextArea(textAreaRef.current, stringValueTextArea);
+    const [textCount, setTextCount] = useState(0);
+    const [buttonDisabled, setButtonDisabled] = useState(false);
+    const [isError, setIsError] = useState(false);
+    useEffect(() => {
+        const txList = stringValueTextArea.split('');
+        if (txList.length === 0) {
+            setButtonDisabled(true);
+        }
+        else {
+            setButtonDisabled(false);
+        }
+        setTextCount(txList.length);
+        if (props.valueMaxTexto) {
+            if (txList.length > props.valueMaxTexto) {
+                setIsError(true);
+            }
+            else {
+                setIsError(false);
+            }
+        }
+        else if (txList.length > 350) {
+            setIsError(true);
+        }
+        else if (txList.length < 350) {
+            setIsError(false);
+        }
+    }, [stringValueTextArea]);
+    useEffect(() => {
+        props.onChange(stringValueTextArea);
+    }, [stringValueTextArea]);
+    const handleChange = (evt) => {
+        const texto = evt.target?.value;
+        setStringValueTextArea(texto);
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: criarIdeia ? (jsx(CriarIdeia$1, { isErro: isError, children: digiteIdeia ? (jsxs(Fragment, { children: [jsx(TextAreaDigite, { cols: 30, rows: 5, id: "txtTextArea", ref: textAreaRef, value: stringValueTextArea, onChange: handleChange, isErro: isError }), jsxs(CountCaracter, { children: [textCount, "/", props.valueMaxTexto, " ", props.textoValueMax] }), isError && (jsxs(containerError, { children: [jsx(ErrorAlert, {}), jsx("p", { children: props.txtError })] })), jsxs(ButtonPublicarAndCancelar, { children: [jsx(MiniButton, { variant: 'secondary', label: props.textCancelarButton, disabled: false, onClick: props.onClickCancelar }), jsx("p", { children: props.textOuButton }), jsx(MiniButton, { variant: 'primary', label: props.textPublicarButton, disabled: isError ? true : buttonDisabled, onClick: props.onClickButtonPublicar })] })] })) : (jsxs(Fragment, { children: [jsx(ButtonDigiteIdeia, { onClick: () => {
+                            setDigiteIdeia(true);
+                        }, children: props.textoDigitarIdeia }), jsx(MiniButton, { variant: 'secondary', label: props.textCancelarButton, disabled: false, onClick: () => {
+                            setCriarIdeia(false);
+                        } })] })) })) : (jsxs(ButtonCriarIdeia, { onClick: () => setCriarIdeia(true), children: [jsx(IconCriarIdeia, {}), props.textoCriar] })) }));
+}
+
+export { CriarIdeia as default };

package/dist/esm/src/components/criar-ideia/useAutosizeTextArea.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+const useAutosizeTextArea = (textAreaRef, value) => {
+    useEffect(() => {
+        if (textAreaRef) {
+            textAreaRef.style.height = '96px';
+            const scrollHeight = textAreaRef.scrollHeight;
+            textAreaRef.style.height = scrollHeight + 'px';
+        }
+    }, [textAreaRef, value]);
+};
+
+export { useAutosizeTextArea as default };

package/dist/esm/src/components/demo/stepController/StepControllerStyle.js

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+
+const ContainerStepController = styled.div `
+  width: 100%;
+  height: 51px;
+  background: #efeded;
+  padding: 10px;
+  position: relative;
+  top: 25px;
+  display: flex;
+  justify-content: space-between;
+  color: #272727;
+  font-weight: lighter;
+  border-radius: 0 0 10px 10px;
+  border-top: 1px solid #bdbdbd;
+  font-size: 14px;
+  font-weight: 600;
+  > div {
+    font-size: 0.8rem;
+    cursor: pointer;
+    display: inline-flex;
+    vertical-align: text-bottom;
+    box-sizing: inherit;
+    text-align: center;
+    align-items: center;
+  }
+`;
+const StepControllerArrow = styled.span `
+  height: 20px;
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+  color: #272727;
+  transition: all 0.2s;
+  margin: 5px;
+
+  :hover {
+    opacity: 0.5;
+    background-color: #272727;
+    color: #bdbdbd;
+  }
+`;
+
+export { ContainerStepController, StepControllerArrow };

package/dist/esm/src/components/demo/stepController/index.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ContainerStepController, StepControllerArrow } from './StepControllerStyle.js';
+import ComputerIcon from '@mui/icons-material/Computer';
+import PersonAddIcon from '@mui/icons-material/PersonAdd';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+
+function StepController({ top = '25px', numberCurrentStep, numberTotalSteps, labelHome, labelContact, prevStep, nextStep, goToStart, goToContact }) {
+    return (jsxs(ContainerStepController, { style: { top: top }, children: [jsxs("div", { onClick: goToStart, children: [jsx(ComputerIcon, { sx: { color: '#242424', fontSize: '0.9rem', marginRight: '8px' } }), labelHome] }), jsxs("div", { children: [jsx(StepControllerArrow, { onClick: prevStep, children: jsx(ArrowBackIosIcon, { sx: { fontSize: '0.8rem', marginLeft: '2px' } }) }), jsx("span", { style: { fontSize: '0.8rem', margin: '0 3px' }, children: numberCurrentStep }), jsx("span", { style: { fontSize: '0.8rem', margin: '0 3px' }, children: "de" }), jsx("span", { style: { fontSize: '0.8rem', margin: '0 3px' }, children: numberTotalSteps }), jsx(StepControllerArrow, { onClick: nextStep, children: jsx(ArrowForwardIosIcon, { sx: { fontSize: '0.8rem' } }) })] }), jsxs("div", { onClick: goToContact, children: [jsx(PersonAddIcon, { sx: { color: 'inherit', fontSize: '0.8rem', marginRight: '8px' } }), labelContact] })] }));
+}
+
+export { StepController as default };

package/dist/esm/src/components/dropdown-profile-menu/dropdownProfileMenuStyle.js

@@ -0,0 +1,162 @@
+import styled from 'styled-components';
+import Avatar from '@mui/material/Avatar';
+import MenuItem from '@mui/material/MenuItem';
+import Menu from '@mui/material/Menu';
+
+const Container = styled.div `
+  width: auto;
+  height: auto;
+`;
+const ProfileInfos = styled.div `
+  display: flex;
+  flex-direction: row;
+  width: 290px;
+  background-color: #222;
+  padding: 12px;
+`;
+const WrapperRightProfileInfo = styled.div `
+    display: flex;
+    flex-direction: column;
+    margin-left: 16px;
+  `;
+const ProfileNameInfo = styled.span `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 21px;
+    
+    display: flex;
+    align-items: center;
+    
+    color: #FFFFFF;
+  `;
+const ProfileCompanyInfo = styled.span `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 21px;
+    /* identical to box height */
+    
+    display: flex;
+    align-items: center;
+    
+    color: #FFFFFF;
+  `;
+const WrapperButtonFrst = styled.div `
+    & > button {
+      margin-top: 16px;
+      
+      font-family: 'Work Sans';
+      font-style: normal;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 19px;
+      /* identical to box height */
+
+      display: flex;
+      align-items: center;
+
+      color: #FFF; 
+      border: 1px solid #FFF;
+      width: fit-content;
+      height: 48px;
+      border-radius: 8px;
+      white-space: nowrap;
+
+      &:hover {
+        color: #FFF; 
+        border: 1.8px solid #FFF;        
+      }
+      &:focus {
+        color: #FFF; 
+        border: 2px solid #FFF;        
+      }
+    }
+  `;
+const UserName = styled.span `
+  color: white;
+  padding-left: 8px;
+  padding-right: 8px;
+
+  text-transform: none;
+
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 21px;
+
+  display: flex;
+  align-items: center;
+  text-align: right;
+
+  color: #FFFFFF;
+`;
+const AvatarCustomUser = styled(Avatar) `
+  height: 32px;
+  width: 32px;
+`;
+const MenuCustom = styled(Menu) `
+  & .MuiPaper-root{
+    border-radius: 0px;
+    ${({ $variantstyle }) => $variantstyle == 'LXP' && `border-bottom-left-radius: 8px;
+      border-bottom-right-radius: 8px;
+      box-shadow: none !important;`}
+  }
+  ul {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+`;
+styled(Menu) `
+  & .MuiPaper-root{
+    border-radius: 0px;
+    box-shadow: none !important;
+    background: linear-gradient(359.72deg, rgba(166, 166, 166, 0.4) 69.54%, rgba(0, 0, 0, 0.4) 88.63%), #000000 !important;
+  }
+  ul {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+`;
+const MenuItemCustom = styled(MenuItem) `
+  color: white !important;
+  border: 0;
+
+  ${({ $variantstyle }) => $variantstyle == 'LXP' ?
+    `background-color: #222222 !important;
+     border-top: 0.5px solid #757575 !important;`
+    :
+        `
+     width: 185px;
+     background-color: #FF4D0D !important;
+     border-top: 0.5px solid #F5792A !important;`}
+
+  &:hover {
+
+    ${({ $variantstyle }) => $variantstyle == 'LXP' ?
+    `background-color: #444444 !important;`
+    :
+        `background-color: #F5792A !important;`}
+    
+  }
+`;
+const SubMenuItemCustom = styled(MenuItem) `
+  color: white !important;
+
+  ${({ $variantstyle }) => $variantstyle == 'LXP' ?
+    `background-color: #222222 !important;`
+    :
+        `background-color: #FF4D0D !important;`}
+
+  &:hover {
+    ${({ $variantstyle }) => $variantstyle == 'LXP' ?
+    `background-color: #444444 !important;`
+    :
+        `background-color: #F5792A !important;`}
+  }
+`;
+
+export { AvatarCustomUser, Container, MenuCustom, MenuItemCustom, ProfileCompanyInfo, ProfileInfos, ProfileNameInfo, SubMenuItemCustom, UserName, WrapperButtonFrst, WrapperRightProfileInfo };

package/dist/esm/src/components/dropdown-profile-menu/index.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Container, AvatarCustomUser, UserName, MenuCustom, ProfileInfos, WrapperRightProfileInfo, ProfileNameInfo, ProfileCompanyInfo, WrapperButtonFrst, MenuItemCustom, SubMenuItemCustom } from './dropdownProfileMenuStyle.js';
+import Button from '@mui/material/Button';
+import { DropdownIcon, DropdownSideIconWhite } from '../../shared/icons.js';
+import Button$1 from '../buttons/index.js';
+
+function DropdownProfileMenu({ variant, user, menuItems, profileMenuText, isMobileVersion, hiddenProfileMenu, handleProfileMenuClick, style, showProfile }) {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [anchorSub, setAnchorSub] = React.useState(null);
+    const [subMenu, setSubMenu] = React.useState(null);
+    const [isMobile, setIsMobile] = React.useState(isMobileVersion);
+    const open = Boolean(anchorEl);
+    const openSub = Boolean(anchorSub);
+    React.useEffect(() => {
+        setIsMobile(isMobileVersion);
+    }, [isMobileVersion]);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+        setAnchorSub(null);
+    };
+    const handleSubitens = (subItens) => (event) => {
+        setAnchorSub(event.currentTarget);
+        setSubMenu(subItens);
+    };
+    return (jsx(Container, { style: { ...style }, children: variant == 'LXP' ? (jsxs(Fragment, { children: [showProfile ?
+                    jsxs(Button, { id: "profile-dropdown", "aria-controls": "basic-menu", "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, style: { padding: 0 }, onClick: handleClick, children: [jsx(AvatarCustomUser, { alt: "User Photo", src: user.avatar || 'https://certificates-mentor.s3.amazonaws.com/frst-avatar-default.png' }), !isMobileVersion && (jsxs(Fragment, { children: [jsxs(UserName, { children: [" ", user.textIsMe, " "] }), jsx(DropdownIcon, { fill: "white" })] }))] })
+                    : null, jsxs(MenuCustom, { id: "basic-menu", anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, anchorEl: anchorEl, open: open, onClose: handleClose, "$variantstyle": 'LXP', children: [jsxs(ProfileInfos, { children: [jsx(AvatarCustomUser, { alt: "User Photo", src: user.avatar || 'https://certificates-mentor.s3.amazonaws.com/frst-avatar-default.png', style: { width: '70px', height: '70px' } }), jsxs(WrapperRightProfileInfo, { children: [jsxs(ProfileNameInfo, { children: [" ", user.name, " "] }), jsxs(ProfileCompanyInfo, { children: [" ", user.company, " "] }), !hiddenProfileMenu && (jsx(WrapperButtonFrst, { children: jsx(Button$1, { variant: 'secondary', label: profileMenuText, handleClick: handleProfileMenuClick }) }))] })] }), menuItems &&
+                            menuItems.length > 0 &&
+                            menuItems.map((item, index) => {
+                                if (item.subItens) {
+                                    if (item.subItens.length > 1)
+                                        return (jsxs(MenuItemCustom, { onClick: handleSubitens(item.subItens), "$variantstyle": 'LXP', children: [item.iconBegin && item.iconBegin, item.iconBegin && jsx("span", { children: "\u00A0" }), jsxs("div", { style: {
+                                                        width: '100%',
+                                                        display: 'flex',
+                                                        flexDirection: 'row',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'space-between'
+                                                    }, children: [jsx("div", { style: { marginLeft: '7px' }, children: item.label }), jsx(DropdownSideIconWhite, {})] })] }, index));
+                                }
+                                else
+                                    return (jsxs(MenuItemCustom, { onClick: item.onClick || handleClose, "$variantstyle": 'LXP', children: [item.iconBegin && item.iconBegin, jsx("div", { style: {
+                                                    width: '100%',
+                                                    display: 'flex',
+                                                    flexDirection: 'row',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'space-between'
+                                                }, children: jsx("div", { style: { marginLeft: item.iconBegin ? '9px' : '0px' }, children: item.label }) })] }, index));
+                            })] }), jsx(MenuCustom, { id: "sub-menu", anchorOrigin: { vertical: 'top', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, anchorEl: anchorSub, open: openSub, onClose: handleClose, "$variantstyle": 'default', children: subMenu &&
+                        subMenu.map((item, index) => {
+                            return (jsx(SubMenuItemCustom, { onClick: (e) => item.onClick(e), "$variantstyle": 'LXP', children: item.label }, item.id));
+                        }) })] })) : (jsxs(Fragment, { children: [showProfile ?
+                    jsxs(Button, { id: "profile-dropdown", "aria-controls": "basic-menu", "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, style: { background: '#FF4D0D', borderRadius: '0px', padding: '5px', width: '185px', whiteSpace: 'nowrap' }, onClick: handleClick, children: [jsx(AvatarCustomUser, { alt: "User Photo", src: user.avatar || 'https://certificates-mentor.s3.amazonaws.com/frst-avatar-default.png' }), jsxs(UserName, { children: [" ", user.textIsMe, " "] }), jsx(DropdownIcon, { fill: "white" })] })
+                    : null, jsx(MenuCustom, { id: "basic-menu", anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, anchorEl: anchorEl, open: open, onClose: handleClose, "$variantstyle": 'default', children: menuItems &&
+                        menuItems.length > 0 &&
+                        menuItems.map((item, index) => {
+                            if (item.subItens) {
+                                if (item.subItens.length > 1)
+                                    return (jsxs(MenuItemCustom, { onClick: handleSubitens(item.subItens), "$variantstyle": 'default', children: [item.iconBegin && item.iconBegin, item.iconBegin && jsx("span", { children: "\u00A0" }), jsxs("div", { style: {
+                                                    width: '100%',
+                                                    display: 'flex',
+                                                    flexDirection: 'row',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'space-between'
+                                                }, children: [jsx("div", { style: { marginLeft: '7px' }, children: item.label }), jsx(DropdownSideIconWhite, {})] })] }, index));
+                            }
+                            else
+                                return (jsxs(MenuItemCustom, { onClick: item.onClick || handleClose, "$variantstyle": 'default', children: [item.iconBegin && item.iconBegin, jsx("div", { style: {
+                                                width: '100%',
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                alignItems: 'center',
+                                                justifyContent: 'space-between'
+                                            }, children: jsx("div", { style: { marginLeft: item.iconBegin ? '9px' : '0px' }, children: item.label }) })] }, index));
+                        }) }), jsx(MenuCustom, { id: "sub-menu", anchorOrigin: { vertical: 'top', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, anchorEl: anchorSub, open: openSub, onClose: handleClose, "$variantstyle": 'default', children: subMenu &&
+                        subMenu.map((item, index) => {
+                            return (jsx(SubMenuItemCustom, { onClick: (e) => item.onClick(e), "$variantstyle": 'default', children: item.label }, item.id));
+                        }) })] })) }));
+}
+
+export { DropdownProfileMenu as default };

package/dist/esm/src/components/emoji-picker/emojiPickerStyles.js

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+
+const SmileIcon = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 40px;
+    height: 40px;
+    
+    min-width: 40px;
+    border-radius: 50%;
+    background-color: transparent;
+    margin: 4px;
+    &:hover {
+        background-color: ${({ theme }) => theme.colors.neutralsGrey6};
+    }
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+`;
+const EmojiWindow = styled.div `
+    width: 375px;
+    height: 332px;
+    overflow: hidden;
+    display:${({ visible }) => visible ? 'flex' : 'none'};
+    flex-direction: column;
+    align-items: center;
+    top: -330px;
+    right: 0px;
+    background-color:  ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid  ${({ theme }) => theme.colors.neutralsGrey4};
+    position: absolute;
+
+    
+    & > div:nth-child(1) > em-emoji-picker:nth-child(1) {
+        padding: 10px;
+        padding-top: 5px;
+        height: 332px;
+        
+        & .padding-lr {
+            border: 2px solid #000 !important;
+        }
+    }
+`;
+const ButtonClose = styled.div `
+    cursor: pointer;
+    align-self: flex-end;
+    height: 40px;
+    margin-bottom: -42px;
+    margin-top: 10x;
+    z-index: 6;
+    padding: 10px;
+    border-radius: 5px;
+    margin-right: 2px;
+    &:hover {
+        background: #efefef;
+    }
+}
+`;
+
+export { ButtonClose, EmojiWindow, SmileIcon };

package/dist/esm/src/components/emoji-picker/index.js

@@ -0,0 +1,87 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { EmojiWindow, ButtonClose, SmileIcon } from './emojiPickerStyles.js';
+import data from '@emoji-mart/data';
+import { Picker } from 'emoji-mart';
+import { SmileOutlined } from '../../shared/icons.js';
+import * as de from '@emoji-mart/data/i18n/de.json';
+import * as en from '@emoji-mart/data/i18n/en.json';
+import * as fr from '@emoji-mart/data/i18n/fr.json';
+import * as it from '@emoji-mart/data/i18n/it.json';
+import * as pl from '@emoji-mart/data/i18n/pl.json';
+import * as pt from '@emoji-mart/data/i18n/pt.json';
+import * as ru from '@emoji-mart/data/i18n/ru.json';
+import * as zh from '@emoji-mart/data/i18n/zh.json';
+
+function EmojiPicker({ isOpenPicker, setIsOpenPicker, onEmojiSelect, configPicker, styles }) {
+    const ref = useRef();
+    const [actionAreaEmojiButton, setActionAreaEmojiButton] = useState(false);
+    const [colorEmojiButton, setColorEmojiButton] = useState('');
+    useEffect(() => {
+        let title = configPicker.title ? configPicker?.title : 'FRST FALCONI';
+        let emojiSize = configPicker?.emojiSize;
+        let perLine = configPicker?.perLine;
+        let SheetSize = configPicker?.sheetSize;
+        let i18n = choseLanguage(configPicker?.language);
+        // let filteredEmoji = excludeEmojiCode();
+        new Picker({ title, data, ref, i18n, emojiSize, perLine, SheetSize, onEmojiSelect });
+    }, [configPicker?.language]);
+    useEffect(() => {
+        (isOpenPicker) ? configsWhenOpenWindowEmoji() : configsWhenCloseWindowEmoji();
+        if (isOpenPicker) {
+            let myComponent = document.querySelector('em-emoji-picker');
+            let myClassElement = myComponent.shadowRoot.querySelector('#nav');
+            let myBoryElement = myComponent.shadowRoot.querySelector('#root');
+            try {
+                //@ts-ignore
+                myClassElement.style.paddingRight = '50px';
+                //@ts-ignore
+                myBoryElement.style.paddingBottom = '100px';
+            }
+            catch (e) { }
+        }
+    }, [isOpenPicker]);
+    return jsx(Fragment, { children: jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs("div", { style: { position: 'relative' }, children: [jsxs(EmojiWindow, { visible: isOpenPicker, onMouseOver: () => setActionAreaEmojiButton(true), onMouseOut: () => setActionAreaEmojiButton(false), style: { ...styles }, children: [jsx(ButtonClose, { onClick: () => setIsOpenPicker(false), children: jsx(XIcon, {}) }), jsx("div", { ref: ref })] }), jsx(SmileIcon, { onMouseOver: () => setActionAreaEmojiButton(true), onMouseOut: () => setActionAreaEmojiButton(false), onClick: () => {
+                            setIsOpenPicker(!isOpenPicker);
+                        }, children: jsx(SmileOutlined, { fill: colorEmojiButton }) })] }) }) });
+    function configsWhenOpenWindowEmoji() {
+        setColorEmojiButton(FRSTTheme['colors'].primary1);
+        // document.body.addEventListener("click", (e: any) => verifyClick(), true);
+        // document.getElementById(iDEmojiButton).removeEventListener("click", (e: any) => setIsVisibleEmojiWindow(!isVisibleEmojiWindow), false);
+    }
+    function configsWhenCloseWindowEmoji() {
+        setColorEmojiButton(FRSTTheme['colors'].neutralsGrey2);
+        // document.body.removeEventListener("click", (e: any) => verifyClick(), true);
+        // document.getElementById(iDEmojiButton).addEventListener("click", (e: any) => setIsVisibleEmojiWindow(!isVisibleEmojiWindow), false);
+    }
+}
+function choseLanguage(props) {
+    switch (props) {
+        case 'de':
+            return de;
+        case 'en':
+            return en;
+        case 'fr':
+            return fr;
+        case 'it':
+            return it;
+        case 'pl':
+            return pl;
+        case 'pt':
+            return pt;
+        case 'ru':
+            return ru;
+        case 'zh':
+            return zh;
+        default:
+            return en;
+    }
+}
+function XIcon() {
+    return (jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M17 1L1 17", stroke: "#BDBDBD", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M1 1L17 17", stroke: "#BDBDBD", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+
+export { EmojiPicker as default };