frst-components 0.36.9 → 0.38.0

package/dist/esm/src/components/FI/inputCommentPost-it/inputCommentPost-ItStyles.js

@@ -0,0 +1,190 @@
+import styled from 'styled-components';
+
+const InputWrapper = styled.div `
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    width: 100%;
+    height: 40px;
+    background-color: ${({ theme }) => theme.colors.neutralsGrey9};
+    border: 1px solid ${({ theme }) => '#BDBDBD'};
+    border-radius: 24px;
+    ${({ isError }) => isError &&
+    `
+        background-color: #FFE0E0;
+        border: 1px solid #C00F00;
+        `}
+    transition: all 0.2s ease-in-out;
+    &:hover {
+        border: 1px solid #F26818;
+    }
+    ${({ active, theme, isOnEditing, isError }) => active &&
+    `border: 1px solid ${theme.colors.primary1} !important;
+         height: ${isOnEditing ? 'fit-content !important' : '88px'};
+         border: 2px solid  ${isError ? '#C00F00' : '#757575'} !important;
+         border-radius: 16px;
+         flex-direction: column;
+         `}
+`;
+const InputText = styled.textarea `
+    display: flex;
+    align-items: center;
+    background-color: ${({ theme }) => theme.colors.neutralsGrey9};
+    width: calc(100% - 28px);
+    height: ${({ height }) => height || '20px'};
+    outline: 0;
+    
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 16px;
+    align-self: center;
+    
+    overflow: hidden;
+    resize: none;
+    padding: 0;
+    margin: 8px;
+    border: none;    
+    align-self: baseline;
+    ::placeholder {
+        padding-top: 2px;
+        color: ${({ theme }) => theme.colors.neutralsGrey4};
+    }
+    ${({ active, theme }) => active &&
+    `
+            align-items: flex-end;
+         `}
+    ${({ isError }) => isError &&
+    `
+        background-color: #FFE0E0;
+    `}
+`;
+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;
+`;
+styled.span `
+    display: flex;
+    position: absolute;
+    align-items: center;
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    letter-spacing: -0.02em;
+    color: ${({ theme }) => theme.colors.neutralsGrey2};
+    margin-top: 8px;
+    margin-left: 13px;
+`;
+styled.div `
+    width: 375px;
+    height: 332px;
+    overflow: hidden;
+    display:${({ visible }) => visible ? 'flex' : 'none'};
+    justify-content: 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;
+    }
+`;
+const TextLimitTx = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+    /* neutrals/neutral_3 */
+    color: #757575;
+    margin-left: 16px
+`;
+const WrapperBtn = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    width: 90%;
+    color: #FFF;
+    margin-top: 22px;
+`;
+styled.div `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 110%;
+    /* identical to box height, or 18px */
+    text-align: right;
+    /* neutrals/neutral_2 */
+    color: #444444;
+    cursor: pointer;
+`;
+styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 4px 16px;
+    gap: 8px;
+    width: 98px;
+    height: 32px;
+    background: ${({ disabled }) => disabled ? '#BDBDBD' : '#F26818'};
+    border-radius: 8px;
+    cursor: ${({ disabled }) => disabled ? 'default' : 'pointer'};
+    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;
+    /* shade/white */
+    color: #FFFFFF;
+`;
+const AlertManyChars = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-top: 16px;
+    color: #923534;
+    gap: 8px;
+    
+`;
+const Or = styled.div `
+    margin-left: 8px;
+    margin-right: 8px;
+    color: #000;
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+`;
+
+export { AlertManyChars, InputText, InputWrapper, Or, TextLimitTx, WrapperBtn };

package/dist/esm/src/components/FI/interactionsModal/InteractionsModalStyles.js

@@ -0,0 +1,152 @@
+import styled from 'styled-components';
+import { Box } from '@mui/material';
+
+// <{image, notstarted}>
+const Container = styled(Box) `
+    background-color: #FFF;
+    width: 488px !important;
+    max-width: 80%;
+    height: 488px !important;
+    max-height: 80%;
+
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    position: relative;
+
+    border-radius: 16px;
+
+    font-family: 'Work Sans';
+    overflow: hidden;
+`;
+const Typography = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 21px;
+
+    /* neutrals/neutral_1 */
+
+    color: ${({ theme }) => theme.colors.neutral_1};
+    margin-left: 25px;
+`;
+const CloseButton = styled.div `
+    cursor: pointer;    
+    align-self: flex-end;
+    width: 20px;
+    margin-top: 20px;
+    margin-right: 15px;
+`;
+const HeaderDiv = styled.div `
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    width: 100%;
+    border-bottom: 1px solid #BDBDBD;
+    padding-bottom: 24px;
+`;
+const ContentDiv = styled.div `
+    width: 100%;
+    heigth: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    overflow-y: scroll;
+    overflow-x: hidden;
+
+    ::-webkit-scrollbar {
+        width: 7px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+        background: #0000;
+        border-radius: 10px;
+        margin: 16px;
+    }
+    
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+        background: #BDBDBD; 
+        border-radius: 10px;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+        background: #888; 
+    }
+
+`;
+styled.div `
+    position: relative;
+`;
+const ContentScroll = styled.div `
+    width: 100%;
+    heigth: fit-content;
+`;
+const CardItemUser = styled.div `
+    width: calc(100% + 10px);
+    min-height: 86px;
+    border-bottom: 1px solid #BDBDBD;
+    padding: 16px;
+    padding-left: 24px;
+
+    display: flex;
+    flex-direction: row;
+`;
+const UserInfoContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    margin-left: 16px;
+`;
+const NameUser = styled.div `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 110%;
+
+    color: #222222;
+
+`;
+const PositionUser = styled.div `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 110%;
+    /* or 18px */
+
+    display: flex;
+    align-items: center;
+
+    /* neutrals/neutral_1 */
+
+    color: #222222;
+
+`;
+const OrgUser = styled.div `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 110%;
+    /* or 18px */
+
+    /* neutrals/neutral_1 */
+
+    color: #222222;
+
+    max-width: 40ch;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+`;
+
+export { CardItemUser, CloseButton, Container, ContentDiv, ContentScroll, HeaderDiv, NameUser, OrgUser, PositionUser, Typography, UserInfoContainer };

package/dist/esm/src/components/FI/interactionsModal/index.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { Modal } from '@mui/material';
+import { Container, HeaderDiv, CloseButton, Typography, ContentDiv, ContentScroll, CardItemUser, UserInfoContainer, NameUser, PositionUser, OrgUser } from './InteractionsModalStyles.js';
+import { CloseIcon } from '../../../shared/icons.js';
+import Avatar from '../../avatar/index.js';
+import Tooltip from '../../DS/tooltip/index.js';
+
+function InteractionsModal({ textTitle, textSubtitle, listUsers, isOpen, handleClickClose, newListUsers, checkScrollEnd, trackClick, style }) {
+    const scrollContainerRef = useRef(null);
+    const handleScroll = (e) => {
+        const { scrollTop, scrollHeight, clientHeight } = e.target;
+        if (scrollTop + clientHeight >= scrollHeight) {
+            if (checkScrollEnd)
+                checkScrollEnd();
+        }
+    };
+    useEffect(() => {
+        const scrollContainer = scrollContainerRef.current;
+        if (scrollContainer) {
+            scrollContainer.addEventListener('scroll', handleScroll);
+        }
+        return () => {
+            if (scrollContainer) {
+                scrollContainer.removeEventListener('scroll', handleScroll);
+            }
+        };
+    }, []);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(Modal, { open: isOpen, onClose: () => handleClickClose(), children: jsxs(Container, { style: {
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    ...style
+                }, children: [jsxs(HeaderDiv, { children: [jsx("div", { style: { width: '100%', display: 'flex', justifyContent: 'flex-end' }, children: jsx(CloseButton, { onClick: () => handleClickClose(), children: jsx(CloseIcon, { width: '11' }) }) }), jsx(Typography, { children: textTitle }), jsx(Typography, { children: textSubtitle })] }), jsx(ContentDiv, { ref: scrollContainerRef, onScroll: handleScroll, onClick: trackClick ? () => trackClick() : () => { }, children: jsx(ContentScroll, { children: newListUsers && newListUsers.map((item) => {
+                                return (jsx(CardItemUser, { children: item?.onClickUserInfo ?
+                                        jsxs(Tooltip, { direction: "bottom", content: item.textVisitProfile ? item.textVisitProfile : 'Visitar perfil', trigger: 'hover', width: '101px', height: '32px', style: { top: '10px', textAlign: 'center' }, children: [jsx(Avatar, { size: '50px', src: item?.avatar, isActiveClick: true, onClick: () => item?.onClickUserInfo ? item?.onClickUserInfo() : {} }), jsxs(UserInfoContainer, { onClick: () => item?.onClickUserInfo ? item?.onClickUserInfo() : {}, style: { cursor: item?.onClickUserInfo ? 'pointer' : 'auto' }, children: [jsxs(NameUser, { children: [" ", item?.name, " "] }), jsxs(PositionUser, { children: [" ", item?.position, "  "] }), jsxs(OrgUser, { children: [" ", item?.organization, " "] })] })] })
+                                        : jsxs(Fragment, { children: [jsx(Avatar, { size: '50px', src: item?.avatar }), jsxs(UserInfoContainer, { onClick: () => item?.onClickUserInfo ? item?.onClickUserInfo() : {}, style: { cursor: item?.onClickUserInfo ? 'pointer' : 'auto' }, children: [jsxs(NameUser, { children: [" ", item?.name, " "] }), jsxs(PositionUser, { children: [" ", item?.position, "  "] }), jsxs(OrgUser, { children: [" ", item?.organization, " "] })] })] }) }, item?.id));
+                            }) }) })] }) }) }));
+}
+
+export { InteractionsModal as default };

package/dist/esm/src/components/FI/modal-invite/index.js

@@ -0,0 +1,146 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { WrapperContent, TitleModal, DesriptionModal, WrapperInputs, WrapperInputPerson, CustomTextField, ButtonRemove, ButtonAddNewPerson, LabelButtonAddPerson } from './modalInviteStyles.js';
+import Modal from '../../DS/modal/index.js';
+import Button from '../../buttons/index.js';
+import { TrashIconNew } from '../../../shared/icons.js';
+import MessageBox from '../../cardLT/MessageBox/index.js';
+
+function ModalInvite({ isInviteMultiple, statusSend, onClickInvite, isOpenModal, labels }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: isInviteMultiple ? jsx(Modal, { open: isOpenModal, 
+            // onClose={() => console.log('closed')}
+            // onOpen={() => console.log('opened')}
+            children: jsx(ContentModalInviteMultiple, { labels: labels, onClickInvite: onClickInvite, statusSend: statusSend }), animation: 'BlowUp', 
+            // handleCloseOnIcon={ () => {
+            //     console.log('custom close with handleCloseOnIcon')
+            // }}
+            showCloseButton: true, style: { width: '756px', maxWidth: '90%' } }) : null }));
+}
+function ContentModalInviteMultiple({ labels, onClickInvite, statusSend }) {
+    const [statusSendLocal, setStatusSendLocal] = useState(statusSend);
+    useEffect(() => {
+        setStatusSendLocal(statusSend);
+    }, [statusSend]);
+    const [inputMultiplePerson, setInputMultiplePerson] = useState([]);
+    useEffect(() => {
+        setTimeout(() => {
+            setInputMultiplePerson([{
+                    id: 1,
+                    name: '',
+                    errorName: false,
+                    lastName: '',
+                    errorLastName: false,
+                    email: '',
+                    errorEmail: false
+                }]);
+        }, 200);
+    }, []);
+    const [isDisabledSendInvite, setIsDisabledSendInvite] = useState(false);
+    const onChangeInput = ({ e, type, id }) => {
+        setInputMultiplePerson((inputMultiplePerson) => {
+            let cpy = [...inputMultiplePerson];
+            cpy[id - 1][type] = e?.target?.value;
+            cpy[id - 1]['errorEmail'] = type == 'email' && !validateEmail(e?.target?.value);
+            return cpy;
+        });
+    };
+    const handleAddNewInput = () => {
+        setInputMultiplePerson((inputMultiplePerson) => {
+            let cpy = [
+                ...inputMultiplePerson,
+                {
+                    id: inputMultiplePerson.length + 1,
+                    name: '',
+                    errorName: false,
+                    lastName: '',
+                    errorLastName: false,
+                    email: '',
+                    errorEmail: false
+                }
+            ];
+            return cpy;
+        });
+    };
+    const handleRemoveInput = () => {
+        if (inputMultiplePerson.length > 1) {
+            setInputMultiplePerson((inputMultiplePerson) => {
+                let cpy = [
+                    ...inputMultiplePerson
+                ];
+                cpy.pop();
+                return cpy;
+            });
+        }
+    };
+    const resetStates = () => {
+        setInputMultiplePerson([{
+                id: 1,
+                name: '',
+                errorName: false,
+                lastName: '',
+                errorLastName: false,
+                email: '',
+                errorEmail: false
+            }]);
+    };
+    const sendListInput = () => {
+        let filterInfo = inputMultiplePerson.map((item) => {
+            if (item.errorEmail ||
+                item.errorLastName ||
+                item.errorName ||
+                item.email.length < 5 ||
+                item.name.length < 3) ;
+            return { name: item?.name, lastName: item?.lastName, email: item?.email };
+        });
+        onClickInvite(filterInfo);
+        resetStates();
+    };
+    useEffect(() => {
+        for (let item of inputMultiplePerson) {
+            if (item.errorEmail ||
+                item.errorLastName ||
+                item.errorName ||
+                item.email.length < 5 ||
+                item.name.length < 3) {
+                setIsDisabledSendInvite(true);
+                break;
+            }
+            else {
+                setIsDisabledSendInvite(false);
+            }
+        }
+    }, [inputMultiplePerson]);
+    return (jsxs(WrapperContent, { children: [jsxs("div", { children: [jsx(TitleModal, { children: labels?.title }), jsx(DesriptionModal, { children: labels?.description }), jsx(WrapperInputs, { children: inputMultiplePerson?.map((inputPerson, index) => {
+                            return (jsxs(WrapperInputPerson, { children: [jsx(CustomTextField, { label: labels?.name, placeholder: labels?.placeholderName, onChange: (e) => onChangeInput({ e, type: 'name', id: inputPerson.id }), type: 'text', value: inputPerson?.name, required: true, error: inputPerson?.errorName }), jsx(CustomTextField, { label: labels?.lastName, placeholder: labels.placeholderLastName, onChange: (e) => onChangeInput({ e, type: 'lastName', id: inputPerson?.id }), type: 'text', value: inputPerson?.lastName, required: true, error: inputPerson?.errorLastName }), jsx(CustomTextField, { label: labels?.email, placeholder: labels.placeholderEmail, onChange: (e) => onChangeInput({ e, type: 'email', id: inputPerson?.id }), type: 'text', value: inputPerson?.email, required: true, error: inputPerson?.errorEmail })] }, index));
+                        }) }), inputMultiplePerson?.length > 1 &&
+                        jsxs(ButtonRemove, { onClick: () => handleRemoveInput(), children: [jsx(TrashIconNew, { fill: '#444' }), labels?.delete] }), jsxs(ButtonAddNewPerson, { onClick: () => handleAddNewInput(), children: [jsx("div", { style: { width: '24px', display: 'flex', alignItems: 'center' }, children: jsx(IconPlusCicle, {}) }), jsx(LabelButtonAddPerson, { children: labels?.buttonAddMore })] })] }), jsxs("div", { style: { width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: '14px' }, children: [jsx(StatusSendInvite, { statusSendLocal: statusSendLocal, labels: labels, setStatusSendLocal: setStatusSendLocal }), jsx(Button, { variant: 'primary', label: labels?.invite, handleClick: () => sendListInput(), disabled: isDisabledSendInvite })] })] }));
+}
+function IconPlusCicle() {
+    return (jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "#F26818", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M12 8V16", stroke: "#F26818", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M8 12H16", stroke: "#F26818", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+function StatusSendInvite({ statusSendLocal, labels, setStatusSendLocal }) {
+    return (jsx("div", { style: {
+            whiteSpace: 'nowrap',
+            width: '100%',
+            marginRight: '20px',
+            opacity: (statusSendLocal == 'success' || statusSendLocal == 'fail' || statusSendLocal == 'info') ? 1 : 0,
+            transition: 'all 0.5s ease-in-out'
+        }, children: jsx(MessageBox, { texto: statusSendLocal == 'success' ? (labels?.messageStatusSuccess) :
+                (statusSendLocal == 'fail' ? (labels?.messageStatusFail) :
+                    (statusSendLocal == 'info' ? labels?.messageStatusInfo : '')), tipoVisualizacao: statusSendLocal == 'success' ? (1) :
+                (statusSendLocal == 'fail' ? (3) :
+                    (statusSendLocal == 'info' ? 4 : 0)), hasClickExit: true, onClickExit: () => setStatusSendLocal('none') }) }));
+}
+function validateEmail(email) {
+    // Expressão regular para validar o e-mail
+    const regex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
+    if (email.startsWith("+")) {
+        return false;
+    }
+    return regex.test(email);
+}
+
+export { ModalInvite as default };

package/dist/esm/src/components/FI/modal-invite/modalInviteStyles.js

@@ -0,0 +1,115 @@
+import styled from 'styled-components';
+import TextField from '../../form-elements/textfield/index.js';
+
+const WrapperContent = styled.div `
+    width: 100%;
+    min-height: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+`;
+const WrapperInputs = styled.div `
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 12px;
+    
+    max-height: 40vh;
+    overflow: auto;
+`;
+const CustomTextField = styled(TextField) `
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+`;
+const TitleModal = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 21px;
+
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
+    margin-bottom: 16px;
+
+`;
+const DesriptionModal = styled.div `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 110%;
+
+    display: flex;
+    align-items: center;
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
+    margin-bottom: 16px;
+`;
+styled.div ``;
+const WrapperInputPerson = styled.div `
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 24px;
+    margin-top: 8px;
+    @media (max-width: 800px) {
+        gap: 8px;
+    }
+`;
+const ButtonAddNewPerson = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+
+    cursor: pointer;
+
+    height: 48px;
+    width: fit-content;
+    padding: 14px;
+    border: 1px solid ${({ theme }) => theme.colors.primary1};
+    border-radius: 8px;
+
+    margin-top: 12px;
+    white-space: nowrap;
+
+`;
+const ButtonRemove = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+
+    cursor: pointer;
+
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    margin-top: 18px;
+    margin-bottom: 24px;
+    color: #444;
+
+    @media (max-width: 500px) {
+        font-size: 14px;
+    }
+`;
+const LabelButtonAddPerson = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+
+    display: flex;
+    align-items: center;
+
+    color: ${({ theme }) => theme.colors.primary1};
+    @media (max-width: 500px) {
+        font-size: 14px;
+      }
+`;
+
+export { ButtonAddNewPerson, ButtonRemove, CustomTextField, DesriptionModal, LabelButtonAddPerson, TitleModal, WrapperContent, WrapperInputPerson, WrapperInputs };

package/dist/esm/src/components/FI/notificationCard/index.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import Avatar from '../../avatar/index.js';
+import Markdown from 'markdown-to-jsx';
+import { useState, useEffect } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { notificationContainer, notificationInfo, notificationDescription, notificationDate, TrashIconContainer } from './notificationCardStyles.js';
+import Tooltip from '../../LXP/tooltip/index.js';
+import { SmallTrash } from '../../../../public/customIcons/SmallTrash.js';
+import Loading from '../../DS/loading/index.js';
+
+const Divider = ({ fill = '#757575' }) => {
+    return (jsx("svg", { width: "5", height: "5", viewBox: "0 0 5 5", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("circle", { cx: "2.5", cy: "2.5", r: "2.5", fill: fill }) }));
+};
+function NotificationCard(props) {
+    const [descriptionNotification, setDescriptionNotification] = useState(props.notificationDescription);
+    useEffect(() => {
+        setDescriptionNotification(props.notificationDescription);
+    }, [props.notificationDescription]);
+    const handleChildClick = (event) => {
+        event.stopPropagation();
+        props.onClickUserInfo && props.onClickUserInfo();
+    };
+    const [isloading, setIsLoading] = useState(false);
+    const handleDelete = async () => {
+        try {
+            setIsLoading(true);
+            props.handleClickDelete && (await props.handleClickDelete());
+            setIsLoading(false);
+        }
+        catch (error) {
+            console.error('Error deleting notification', error);
+        }
+    };
+    return (jsxs(ThemeProvider, { theme: FRSTTheme, children: [jsxs(notificationContainer, { style: {
+                    ...props.style,
+                    backgroundColor: props.isNewNotification ? '#444444' : '#313131'
+                }, children: [!!props?.onClickUserInfo ? (jsx(Tooltip, { position: "right", textTooltip: props?.textVisitProfile ? props?.textVisitProfile : 'Visitar Perfil', customWidth: '106px', customMarginLeft: '-30px', children: jsx("div", { onClick: (e) => handleChildClick(e), children: jsx(Avatar, { src: props.notificationAvatar, size: "40px", isActiveClick: true }) }) })) : (jsx(Avatar, { src: props.notificationAvatar, size: "40px", isActiveClick: false })), jsxs(notificationInfo, { onClick: props.handleClick, children: [jsx(notificationDescription, { children: jsx(Markdown, { children: descriptionNotification }) }), props.isNewNotification ? (jsxs(notificationDate, { style: { color: FRSTTheme['colors'].primary1 }, children: [jsx("span", { style: { fontWeight: 700 }, children: props.textNew }), jsx(Divider, { fill: FRSTTheme['colors'].primary1 }), props.notificationHour ? (jsxs(Fragment, { children: [jsx("span", { children: props.notificationHour }), jsx(Divider, { fill: props.isNewNotification ? FRSTTheme['colors'].primary1 : undefined })] })) : (jsx(Fragment, {})), props.notificationDate] })) : (jsxs(notificationDate, { children: [props.notificationDate, props.notificationHour ? (jsxs(Fragment, { children: [jsx(Divider, {}), jsx("span", { children: props.notificationHour })] })) : (jsx(Fragment, {}))] }))] }), jsx(TrashIconContainer, { isNewNotification: props.isNewNotification, onClick: () => handleDelete(), children: jsx(SmallTrash, {}) })] }), isloading && jsx(Loading, {})] }));
+}
+
+export { NotificationCard as default };