frst-components 0.36.9 → 0.38.0

package/dist/esm/src/components/EBR/rating/ratingStyles.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const WrapperStars = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    flex-direction: ${({ orientation }) => orientation == 'vertical' ? 'column' : 'row'};
+    width: auto;
+`;
+const Raiting = styled.p `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: Work Sans;
+    font-size: 24px;
+    line-height: 100%;
+    font-weight: 500;
+    line-height: 28px;
+    color: #222;
+    padding-top: 3px;
+    margin-left: 16.5px;
+`;
+
+export { Raiting, WrapperStars };

package/dist/esm/src/components/EBR/specialist-contact/index.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Wrapper, Title, WrapperSpecialist, AvatarImg, TextSpecialist, Name, Email, Phone, WrapperButtons } from './specialistContactStyles.js';
+import { WhatAppBordered, MailBordered } from '../../../shared/icons.js';
+import Button from '../../buttons/index.js';
+
+function SpecialistContact({ title, avatar, name, email, telephone, mobileVersion, handleActionConversation, textButtonConversation, handleActionSendEmail, textButtonSendEmail }) {
+    const src = 'https://i.gyazo.com/499dda909b1ebfe0375d1efa2d5d00a8.png';
+    return (jsxs(Wrapper, { mobileVersion: mobileVersion, children: [jsx(Title, { mobileVersion: mobileVersion, children: title }), jsxs(WrapperSpecialist, { mobileVersion: mobileVersion, children: [jsx(AvatarImg, { src: avatar ? avatar : src }), jsxs(TextSpecialist, { mobileVersion: mobileVersion, children: [jsxs(Name, { mobileVersion: mobileVersion, children: [" ", name, " "] }), jsxs(Email, { mobileVersion: mobileVersion, children: [" ", email, " "] }), jsxs(Phone, { mobileVersion: mobileVersion, children: [" ", telephone, " "] })] })] }), jsxs(WrapperButtons, { children: [jsx(Button, { variant: 'primary', label: textButtonConversation ? textButtonConversation : 'Iniciar conversa', handleClick: () => handleActionConversation(), startIcon: !mobileVersion && jsx(WhatAppBordered, {}), sizeIcon: '22px' }), jsx(Button, { variant: 'primary', label: textButtonSendEmail ? textButtonSendEmail : 'Enviar e-mail', handleClick: () => handleActionSendEmail(), startIcon: !mobileVersion && jsx(MailBordered, {}), sizeIcon: '22px' })] })] }));
+}
+
+export { SpecialistContact as default };

package/dist/esm/src/components/EBR/specialist-contact/specialistContactStyles.js

@@ -0,0 +1,91 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    max-width:  ${({ mobileVersion }) => mobileVersion ? '343px' : '400px'};
+`;
+const Title = styled.p `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 130%;
+
+    display: flex;
+    align-items: ${({ mobileVersion }) => mobileVersion ? 'start' : 'center'};
+    letter-spacing: 0.01em;
+    color:  #222;
+`;
+const AvatarImg = styled.img `
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+`;
+const WrapperSpecialist = styled.div `
+    display: flex;
+    margin-top: ${({ mobileVersion }) => mobileVersion ? '32px' : '48px'};
+    flex-direction:${({ mobileVersion }) => mobileVersion ? 'column' : 'row'};
+    align-items: ${({ mobileVersion }) => mobileVersion ? 'center' : 'start'};
+`;
+const TextSpecialist = styled.div `
+    margin-left: ${({ mobileVersion }) => mobileVersion ? '0px' : '24px'};
+`;
+const Phone = styled.p `        
+        font-family: 'Work Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 19px;
+
+        display: flex;
+        align-items: center;
+        justify-content:${({ mobileVersion }) => mobileVersion ? 'center' : 'start'};
+        text-align: center;
+        letter-spacing: 0.25px;
+
+        color: #222222;
+        margin-bottom: 8px;
+    `;
+const Email = styled.p `
+        font-family: 'Work Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 19px;
+        
+        display: flex;
+        align-items: center;
+        text-align: start;
+        justify-content:${({ mobileVersion }) => mobileVersion ? 'center' : 'start'};
+        
+        letter-spacing: 0.25px;
+
+        color: #222222;
+        margin-bottom: 8px;
+    `;
+const Name = styled.p `
+        font-family: 'Work Sans';
+        font-style: normal;
+        font-weight: 600;
+        font-size: 20px;
+        line-height: 23px;
+        display: flex;
+        align-items: center;
+        justify-content:${({ mobileVersion }) => mobileVersion ? 'center' : 'start'};
+        text-align: center;
+        letter-spacing: 0.25px;
+        color:  #222;
+        margin-bottom: 8px;
+        margin-top:${({ mobileVersion }) => mobileVersion ? '24px' : '0px'};
+    `;
+const WrapperButtons = styled.div `
+    display:flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 45px;
+    gap: 16px;
+`;
+
+export { AvatarImg, Email, Name, Phone, TextSpecialist, Title, Wrapper, WrapperButtons, WrapperSpecialist };

package/dist/esm/src/components/EBR/stepper/stepper.js

@@ -0,0 +1,8 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { ProgressContainer, Progress } from './styles.js';
+
+function Stepper({ children, }) {
+    return (jsx(Fragment, { children: jsx(ProgressContainer, { children: jsx(Progress, { children: children && children }) }) }));
+}
+
+export { Stepper as default };

package/dist/esm/src/components/EBR/stepper/stepperItem.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ProgressItem, ProgressItemTitle, ProgressItemSubtitle } from './styles.js';
+import Button from '../../buttons/index.js';
+
+function StepperItem({ title, subtitle, buttonText, active = false, onClick }) {
+    return (jsx(ProgressItem, { active: active, children: active
+            ?
+                jsxs(Fragment, { children: [jsx(ProgressItemTitle, { active: active, children: title }), jsx(ProgressItemSubtitle, { active: active, children: subtitle }), jsx(Button, { handleClick: onClick, label: buttonText || 'Agendar reunião', variant: "primary" })] })
+            :
+                jsx(ProgressItemTitle, { children: title }) }));
+}
+
+export { StepperItem as default };

package/dist/esm/src/components/EBR/stepper/styles.js

@@ -0,0 +1,137 @@
+import styled from 'styled-components';
+
+styled.div `
+  width: 100%;
+  width: 1280px;
+  height: 587px;
+  background: #F2F2F2;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+const ProgressContainer = styled.div `
+  position: relative;
+  padding-left: 75px;
+`;
+const Progress = styled.ul `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  list-style: none;
+  align-items: flex-start;
+`;
+const ProgressItem = styled.li `
+  width: 100%;
+  min-height: 78px;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  position: relative;
+  counter-increment: list;
+
+  ${({ active }) => active === true && `
+    padding-bottom: 50px;
+
+    @media (max-width: 768px) {
+      padding-bottom: 50px;
+    }
+  `}
+
+  &:first-child {
+    &::before {
+      top: 10px;
+    }
+  }
+
+  &:last-child {
+    min-height: 46px;
+
+    &::before {
+      top: -30px;
+      display: none;
+    }
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: -79px;
+    top: 2px;
+    height: 100%;
+    background-color: #6A3F86;
+    width: 14px;
+    z-index: 0;
+  }
+
+  &:after {
+    content: counter(list);
+    position: absolute;
+    z-index: 1;
+    left: -95px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: transparent;
+    color: ${({ active }) => active === true ? '#FFFFFF' : '#757575'};;
+    text-align: center;
+    border: 3.5px solid #9C9C9C;
+    background-color: #fff;
+    top: 0;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 28px;
+
+    ${({ active }) => active === true && `
+      background-color: #FF4D0D;
+      border-color: #FF4D0D;
+      -webkit-box-shadow: 0px 0px 0px 15px rgba(255,77,13,0.5); 
+      box-shadow: 0px 0px 0px 15px rgba(255,77,13,0.5);
+    `}
+  }
+`;
+const ProgressItemTitle = styled.p `
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 23px;
+  color: #757575;
+
+  height: 46px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  ${({ active }) => active === true && `
+    color: #222222;
+    height: auto;
+    margin: 11px 0 8px 0;
+    font-weight: 600;
+  `}
+`;
+const ProgressItemSubtitle = styled.p `
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+  color: #222222;
+
+  ${({ active }) => active === true && `
+    margin-bottom: 24px;
+  `}
+`;
+
+export { Progress, ProgressContainer, ProgressItem, ProgressItemSubtitle, ProgressItemTitle };

package/dist/esm/src/components/EBR/trail-list/index.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { Wrapper, Title, WrapperList, ItemList, IconList, TextList } from './trailListStyles.js';
+import { MessageCheckLine } from '../../../shared/icons.js';
+
+function TrailList({ title, trails, style }) {
+    const [trailsList, setTrailsList] = useState(trails);
+    const [windowSize, setWindowSize] = useState([0, 0]);
+    useEffect(() => {
+        function updateSize() {
+            setWindowSize([window.innerWidth, window.innerHeight]);
+        }
+        window.addEventListener('resize', updateSize);
+        updateSize();
+        return () => window.removeEventListener('resize', updateSize);
+    }, []);
+    const renderTrails = () => {
+        return (trailsList.map((item, index) => {
+            return jsxs(ItemList, { isMobile: windowSize[0] < 400, children: [jsxs(IconList, { children: [" ", jsx(MessageCheckLine, {}), " "] }), jsxs(TextList, { children: [" ", item, " "] })] }, index);
+        }));
+    };
+    useEffect(() => {
+        setTrailsList(trails);
+    }, [trails]);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(Wrapper, { style: { ...style }, children: [jsx(Title, { children: title }), jsx(WrapperList, { children: (trailsList && trailsList.length > 0 && trailsList.length <= 2) ?
+                        jsx("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column'
+                            }, children: renderTrails() })
+                        :
+                            (trailsList && trailsList.length > 0 && trailsList.length <= 3) ?
+                                jsx("div", { style: {
+                                        display: 'grid',
+                                        columnGap: '80px',
+                                        gridTemplateColumns: windowSize[0] > 900 ? '1fr 1fr' : '1fr'
+                                    }, children: renderTrails() })
+                                :
+                                    (trailsList && trailsList.length > 0 && trailsList.length <= 5) ?
+                                        jsx("div", { style: {
+                                                display: 'grid',
+                                                columnGap: '80px',
+                                                gridTemplateColumns: windowSize[0] > 1400 ? '1fr 1fr 1fr' :
+                                                    windowSize[0] > 900 ? '1fr 1fr' : '1fr'
+                                            }, children: renderTrails() })
+                                        :
+                                            (trailsList && trailsList.length > 0 && trailsList.length > 5) &&
+                                                jsx("div", { style: {
+                                                        display: 'grid',
+                                                        columnGap: '80px',
+                                                        gridTemplateColumns: windowSize[0] > 1400 ? '1fr 1fr 1fr' :
+                                                            windowSize[0] > 900 ? '1fr 1fr' : '1fr'
+                                                    }, children: renderTrails() }) })] }) }));
+}
+
+export { TrailList as default };

package/dist/esm/src/components/EBR/trail-list/trailListStyles.js

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div `
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+`;
+const Title = styled.p ` 
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 130%;
+
+    display: flex;
+    align-items: center;
+    letter-spacing: 0.01em;
+
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
+
+    margin-bottom: 30px;
+`;
+const WrapperList = styled.div `
+    display: flex;
+    flex-direction: column;
+`;
+const ItemList = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    
+    min-width: ${({ isMobile }) => isMobile ? '0x' : '374px'};
+    margin-bottom: 16px;
+`;
+const TextList = styled.span `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 130%;
+
+    display: flex;
+    align-items: center;
+    letter-spacing: 0.01em;
+    margin-left: 12px;
+`;
+const IconList = styled.span `
+    margin-top: 2px;
+`;
+
+export { IconList, ItemList, TextList, Title, Wrapper, WrapperList };

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

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { CommentaryBoxV2 } from '../../commentaryBoxV2/index.js';
+import { useState, useEffect } from 'react';
+import { Container, CommentarysContainer, ViewReplysButtonContainer, RepplysContainer } from './threadComments.styles.js';
+import { CommentaryBoxReply } from './utilitiesComponents/commentaryBoxReply/index.js';
+import { InputReply } from './utilitiesComponents/inputReply/index.js';
+
+const ThreadComments = ({ mainComment, listReplyComments, placeHolderText, onClickPublishButton, showReplysButtonText, publishButtonText, limitInputs, answerButtonText, loggedInUser, group_uuid, getSearchUsers, showMoreButtonText, showLessButtonText, styles, relationToPhaseText, limitMessageExceeded, size = 5, showMoreReplysButtonText, isGoalOwner, editText, deleteText, onClickDelete, onClickEdit, cancelButtonText, saveButtonText, orText, onClickLike, onClickUnlike, likeButtonText, toViewText, answersText, answerText, darkMode, toHideText, hideRepliesText, showLikeButton = true, showAnswersButton = true, versionFeed = false, primaryColor = '#FF8A15', unlikedButtonText }) => {
+    const threadOpenByDefault = mainComment?.thread_open;
+    const [showAnswers, setShowAnswers] = useState(false);
+    const [showReplysOnClickCounter, setReplysOnClickCounter] = useState(0);
+    const [showReplyInput, setShowReplyInput] = useState(false);
+    const [visibleReplies, setVisibleReplies] = useState(0);
+    const handleLoadMoreReplies = () => {
+        if (showReplysOnClickCounter === 0) {
+            setVisibleReplies((prevVisibleReplies) => prevVisibleReplies + size);
+        }
+        setReplysOnClickCounter((prevShowReplysOnClickCounter) => prevShowReplysOnClickCounter + 1);
+        if (showReplysOnClickCounter >= 1) {
+            setVisibleReplies(listReplyComments?.length);
+        }
+        setShowAnswers(true);
+    };
+    const handleHideReplies = () => {
+        setVisibleReplies(0);
+        setReplysOnClickCounter(0);
+        setShowAnswers(false);
+    };
+    const handleHiddenInput = () => {
+        setShowReplyInput(false);
+    };
+    const handleCommentReply = () => {
+        setShowReplyInput(true);
+    };
+    useEffect(() => {
+        if (threadOpenByDefault) {
+            setShowAnswers(true);
+            setVisibleReplies(listReplyComments?.length);
+        }
+    }, [threadOpenByDefault]);
+    const isMainCommentUser = mainComment.user?.uuid === loggedInUser?.id;
+    return (jsx(Container, { style: styles, children: jsxs(CommentarysContainer, { children: [jsxs("div", { children: [jsx(CommentaryBoxV2, { loggedInUser: loggedInUser, hasActionToClickOnAvatar: false, imgProfile: mainComment.user?.avatar, userId: mainComment.user?.uuid, userName: mainComment.user?.name, userOffice: mainComment.user?.role_name, userCompany: mainComment.user?.company_name, commentId: mainComment.id, commentText: mainComment.text, howLongAgo: mainComment.howLongAgo, showMoreText: showMoreButtonText, showLessText: showLessButtonText, answerButtonText: answerButtonText, actionAnswer: handleCommentReply, actionDeleteComment: onClickDelete, actionEditComment: onClickEdit, relationToPhaseText: relationToPhaseText, commentTextWithMention: mainComment.mentionText, isMainComment: true, isAuthor: isMainCommentUser, isOwnerPost: isGoalOwner, deleteText: deleteText, editText: editText, showOptions: isMainCommentUser || isGoalOwner, commentUuid: mainComment.uuid, limitInput: limitInputs, groupUuid: group_uuid, cancelButtonText: cancelButtonText, saveButtonText: saveButtonText, orText: orText, limitMessageExceeded: limitMessageExceeded, placeHolderText: placeHolderText, getSearchUsers: getSearchUsers, actionLike: onClickLike, actionUnlike: onClickUnlike, showLikeButton: showLikeButton, likeButtonText: likeButtonText, likes: mainComment.likes, darkMode: darkMode, isLiked: mainComment?.isLiked, totalLikes: mainComment?.totalLikes, showAnswersButton: showAnswersButton, versionFeed: versionFeed, configColor: primaryColor, unlikedButtonText: unlikedButtonText }), listReplyComments.length > visibleReplies && (jsx(ViewReplysButtonContainer, { id: "text-viwMsg", darkMode: darkMode, children: jsx("span", { onClick: handleLoadMoreReplies, children: showReplysOnClickCounter === 0 ? showReplysButtonText : showMoreReplysButtonText }) })), showAnswers && visibleReplies && hideRepliesText && (jsx(ViewReplysButtonContainer, { id: "text-viwMsg", darkMode: darkMode, children: jsx("span", { onClick: handleHideReplies, children: hideRepliesText }) })), showReplyInput && (jsx(InputReply, { styles: { marginLeft: '60px' }, imgProfile: loggedInUser?.avatar, idInput: `idInput-${mainComment.id}`, placeHolderText: placeHolderText, publishButtonText: publishButtonText, limitInput: limitInputs, onClickPublishButton: onClickPublishButton, getSearchUsers: getSearchUsers, replyMentionedUser: mainComment.user, parentId: Number(mainComment.id), handleHiddenInput: handleHiddenInput, group_uuid: group_uuid, limitMessageExceeded: limitMessageExceeded, darkMode: darkMode, configColor: primaryColor }))] }), showAnswers && visibleReplies && (jsx(RepplysContainer, { style: { marginTop: '6px' }, children: listReplyComments.slice(0, visibleReplies).map((replyComment) => (jsx("div", { children: jsx(CommentaryBoxReply, { replies: replyComment?.replies, commentData: replyComment, answerButtonText: answerButtonText, showMoreButtonText: showMoreButtonText, showLessButtonText: showLessButtonText, isAuthor: replyComment.user?.uuid === loggedInUser?.id, isOwnerPost: mainComment.user?.uuid === loggedInUser?.id || isGoalOwner, deleteText: deleteText, editText: editText, onClickDelete: onClickDelete, limitInput: limitInputs, groupUuid: group_uuid, cancelButtonText: cancelButtonText, saveButtonText: saveButtonText, orText: orText, limitMessageExceeded: limitMessageExceeded, onClickEdit: onClickEdit, placeHolderText: placeHolderText, getSearchUsers: getSearchUsers, onClickLike: onClickLike, onClickUnlike: onClickUnlike, likeButtonText: likeButtonText, likes: replyComment.likes, loggedInUser: loggedInUser, isGoalOwner: isGoalOwner, group_uuid: group_uuid, publishButtonText: publishButtonText, onClickPublishButton: onClickPublishButton, mainCommentUser: replyComment.user, showReplysButtonText: showReplysButtonText, toViewText: toViewText, answersText: answersText, answerText: answerText, threadOpenByDefault: !!threadOpenByDefault, darkMode: darkMode, toHideText: toHideText, versionFeed: versionFeed, configColor: primaryColor, unlikedButtonText: unlikedButtonText }) }, replyComment.id))) }))] }) }));
+};
+
+export { ThreadComments };

package/dist/esm/src/components/FI/ThreadComments/threadComments.styles.js

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+  background-color: inerit;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  width:100%;
+`;
+const CommentarysContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  width:100%;
+`;
+styled.div `
+display:flex;
+flex-direction:column;
+`;
+const ViewReplysButtonContainer = styled.div `
+  color: ${({ darkMode }) => darkMode ? '#EBEBEB' : '#444444'};
+  font-family: Poppins, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 110%; 
+  position: relative;
+  left: 59px;
+  margin-top: 6px;
+  span{
+      cursor:pointer;
+  }
+
+  @media screen  and (max-width:768px){
+    color: ${({ darkMode }) => darkMode ? '#EBEBEB' : '#444444'};
+    font-family: Poppins, sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 110%; 
+    position: relative;
+    left: 59px;
+    margin-top: 6px;
+    max-width: 150px !important;
+  }
+`;
+const RepplysContainer = styled.div `
+  width: ${({ width }) => (width ? `${width}px` : 'auto')};
+  margin-left:60px;
+`;
+
+export { CommentarysContainer, Container, RepplysContainer, ViewReplysButtonContainer };

package/dist/esm/src/components/FI/ThreadComments/utilitiesComponents/commentaryBoxReply/index.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { CommentaryBoxV2 } from '../../../../commentaryBoxV2/index.js';
+import { InputReply } from '../inputReply/index.js';
+import { ViewReplysButtonContainer } from '../../threadComments.styles.js';
+
+const CommentaryBoxReply = ({ commentData, showMoreButtonText, showLessButtonText, answerButtonText, isAuthor, isOwnerPost, deleteText, editText, onClickDelete, onClickEdit, limitInput, cancelButtonText, saveButtonText, orText, limitMessageExceeded, placeHolderText, getSearchUsers, onClickLike, onClickUnlike, likeButtonText, loggedInUser, likes, replies = [], isGoalOwner, group_uuid, publishButtonText, onClickPublishButton, mainCommentUser, answersText, toViewText, answerText, threadOpenByDefault, darkMode, toHideText, versionFeed = false, configColor = '#FF8A15', unlikedButtonText }) => {
+    const [showAnswers, setShowAnswers] = useState(threadOpenByDefault);
+    const [showReplyInput, setShowReplyInput] = useState(false);
+    const handleLoadMoreReplies = () => {
+        setShowAnswers(true);
+    };
+    const handleHideReplies = () => {
+        setShowAnswers(false);
+    };
+    return (jsxs("div", { children: [jsx(CommentaryBoxV2, { hasActionToClickOnAvatar: false, imgProfile: commentData.user?.avatar, loggedInUser: loggedInUser, userName: commentData.user?.name, userOffice: commentData.user?.role_name, userCompany: commentData.user?.company_name, commentId: commentData.id, commentText: commentData.text, commentUuid: commentData.uuid, howLongAgo: commentData.howLongAgo, showMoreText: showMoreButtonText, actionAnswer: () => setShowReplyInput(true), showLessText: showLessButtonText, answerButtonText: answerButtonText, styles: { marginTop: '16px' }, commentTextWithMention: commentData.mentionText, isAuthor: isAuthor, isOwnerPost: isOwnerPost, deleteText: deleteText, editText: editText, showOptions: isAuthor || isOwnerPost, actionDeleteComment: onClickDelete, limitInput: limitInput, cancelButtonText: cancelButtonText, saveButtonText: saveButtonText, orText: orText, limitMessageExceeded: limitMessageExceeded, actionEditComment: onClickEdit, placeHolderText: placeHolderText, getSearchUsers: getSearchUsers, likes: likes, actionLike: onClickLike, actionUnlike: onClickUnlike, showLikeButton: true, likeButtonText: likeButtonText, showInterconnectionLine: replies.length > 0 && showAnswers, darkMode: darkMode, isLiked: commentData?.isLiked, totalLikes: commentData?.totalLikes, versionFeed: versionFeed, configColor: configColor, unlikedButtonText: unlikedButtonText }), replies.length > 0 && !showAnswers && (jsx(ViewReplysButtonContainer, { style: { left: '44px' }, darkMode: darkMode, children: jsx("span", { onClick: handleLoadMoreReplies, children: `${toViewText} ${replies.length} ${replies.length === 1 ? answerText : answersText}` }) })), replies.length > 0 && showAnswers && toHideText && (jsx(ViewReplysButtonContainer, { style: { left: '44px' }, darkMode: darkMode, children: jsx("span", { onClick: handleHideReplies, children: `${toHideText} ${replies.length} ${replies.length === 1 ? answerText : answersText}` }) })), showReplyInput && (jsx(InputReply, { imgProfile: loggedInUser?.avatar, styles: { width: '100%' }, idInput: `idInput-${commentData.id}`, placeHolderText: placeHolderText, publishButtonText: publishButtonText, limitInput: limitInput, onClickPublishButton: onClickPublishButton, replyMentionedUser: mainCommentUser, getSearchUsers: getSearchUsers, parentId: Number(commentData.id), handleHiddenInput: () => setShowReplyInput(false), group_uuid: group_uuid, limitMessageExceeded: limitMessageExceeded, darkMode: darkMode, configColor: configColor })), showAnswers &&
+                replies?.map((reply, index) => (jsx(Fragment, { children: jsx(CommentaryBoxV2, { styles: { marginTop: '16px' }, userName: reply.user?.name, userOffice: reply.user?.role_name, userCompany: reply.user?.company_name, commentUuid: reply.uuid, commentId: reply.id, commentText: reply.text, commentTextWithMention: reply.mentionText, howLongAgo: reply.howLongAgo, placeHolderText: placeHolderText, cancelButtonText: cancelButtonText, saveButtonText: saveButtonText, likeButtonText: likeButtonText, editText: editText, deleteText: deleteText, orText: orText, limitInput: limitInput, showMoreText: showMoreButtonText, showLessText: showLessButtonText, hasActionToClickOnAvatar: false, likes: reply.likes, loggedInUser: loggedInUser, limitMessageExceeded: limitMessageExceeded, showLikeButton: true, actionLike: onClickLike, actionUnlike: onClickUnlike, getSearchUsers: getSearchUsers, actionEditComment: onClickEdit, actionDeleteComment: onClickDelete, isAuthor: reply.user?.uuid === loggedInUser?.id, isOwnerPost: isAuthor || isOwnerPost || isGoalOwner, showOptions: isAuthor || isOwnerPost || reply.user?.uuid === loggedInUser?.id || isGoalOwner, imgProfile: reply.user?.avatar, showInterconnectionLine: replies.length != index + 1, darkMode: darkMode, isLiked: reply?.isLiked, totalLikes: reply?.totalLikes, versionFeed: versionFeed, configColor: configColor, unlikedButtonText: unlikedButtonText }, reply.id) })))] }));
+};
+
+export { CommentaryBoxReply };

package/dist/esm/src/components/FI/ThreadComments/utilitiesComponents/inputReply/index.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Loading from '../../../../DS/loading/index.js';
+import Avatar from '../../../../avatar/index.js';
+import InputComment from '../../../../input-comment/index.js';
+import { useState, useRef, useEffect } from 'react';
+import { Container, InputContainer, PublishButton } from './inputReply.styles.js';
+
+const InputReply = ({ placeHolderText, getSearchUsers, onClickPublishButton, parentId, limitInput, publishButtonText, replyMentionedUser, imgProfile, styles, handleHiddenInput, group_uuid, limitMessageExceeded, darkMode, configColor = '#FF8A15' }) => {
+    const [comment, setComment] = useState('');
+    const [CaptureFormattedValue, setCaptureFormattedValue] = useState('');
+    const [captureMentions, setCaptureMentions] = useState([]);
+    const [users, setUsers] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const inputRef = useRef(null);
+    const user = {
+        user_uuid: replyMentionedUser.uuid,
+        name: replyMentionedUser.name,
+        profile: {
+            avatar: replyMentionedUser.avatar,
+            company_name: replyMentionedUser.company_name,
+            role_name: replyMentionedUser.role_name
+        }
+    };
+    const [userMentionedOnReplied, setUserMentionedOnReply] = useState(false);
+    const handleClickOutside = (event) => {
+        if (inputRef.current && !inputRef.current.contains(event.target) && comment.length === 0) {
+            handleHiddenInput();
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [comment, handleHiddenInput]);
+    const handlePublish = async () => {
+        setIsLoading(true);
+        await onClickPublishButton({
+            comment,
+            contentMention: CaptureFormattedValue,
+            mentions: captureMentions,
+            parentId
+        });
+        setIsLoading(false);
+        handleHiddenInput();
+        setComment('');
+        setCaptureFormattedValue('');
+        setCaptureMentions([]);
+    };
+    let timeout;
+    const setCommentData = (value) => {
+        setUserMentionedOnReply(true);
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            setComment(value);
+        }, 300);
+    };
+    const handleSearchUsers = async (value) => {
+        const response = await getSearchUsers(value);
+        setUsers(response?.data?.results || response);
+    };
+    return (jsxs(Container, { style: { ...styles }, children: [jsx(Avatar, { src: imgProfile, size: "32px", style: { marginTop: '16px', marginRight: '8px' } }), jsxs(InputContainer, { ref: inputRef, style: { width: '100%', marginTop: '16px' }, children: [jsx(InputComment, { styles: { width: '100%' }, className: "userComment", onChange: (e) => {
+                            handleSearchUsers(e);
+                        }, value: comment, placeholder: placeHolderText, limit: limitInput, showCharacterCounter: true, onContentUnformat: (unformattedValue) => setCommentData(unformattedValue), onContentFormat: (formattedValue) => setCaptureFormattedValue(formattedValue), onSendMentions: (mentions) => setCaptureMentions(mentions), users: users, replyMentionedUser: !userMentionedOnReplied && user, group_uuid: group_uuid, limitMessageExceeded: limitMessageExceeded, darkMode: darkMode, showEmojiPicker: darkMode, configColor: configColor }), jsx(PublishButton, { type: "button", "$primaryColor": configColor, disabled: comment.length <= 0 || comment.length > limitInput || isLoading, onClick: () => handlePublish(), children: publishButtonText }), isLoading && jsx(Loading, {})] })] }));
+};
+
+export { InputReply };

package/dist/esm/src/components/FI/ThreadComments/utilitiesComponents/inputReply/inputReply.styles.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+const InputContainer = styled.div `
+    display:flex;
+    flex-direction:column;
+    position:relative;
+`;
+const Container = styled.div `
+    display:flex;
+    justify-content:center;
+`;
+const PublishButton = styled.button `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 4px 16px;
+    gap: 8px;
+    width: fit-content;
+    height: 32px;
+    margin-left: auto;
+    margin-top: 14px;
+    background: ${({ $primaryColor, disabled }) => (disabled ? '#BDBDBD' : $primaryColor)};
+    border: 0;
+    border-radius: 8px;
+    cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+    font-family: Poppins, sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+    color: #ffffff;
+    user-select: none;
+
+    &:hover:not(:disabled) {
+        filter: brightness(0.9);
+    }
+`;
+
+export { Container, InputContainer, PublishButton };