frst-components 0.36.9 → 0.38.0

package/dist/esm/src/components/commentaryBoxV2/CommentaryBoxV2.styles.js

@@ -0,0 +1,282 @@
+import styled, { css } from 'styled-components';
+
+const mentionLinkStyles = css `
+    a[data-mention-id] {
+        font-weight: bold !important;
+        color: ${({ $primaryColor, theme }) => $primaryColor || theme.colors.primary1} !important;
+        text-decoration: none;
+    }
+`;
+const Container = styled.div `
+    display: flex;
+    gap: ${({ $versionFeed }) => ($versionFeed ? '12px' : '0')};
+    width: ${({ width }) => width ? width : "100%"};
+    height: ${({ height }) => height ? height : "auto"};
+`;
+const Box = styled.div `
+    width: ${({ width }) => width ? width : "100%"};
+    height: ${({ height }) => height ? height : "auto"};
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    border-radius: 0px 16px 16px 16px;
+    background-color: ${({ darkMode }) => darkMode ? '#272727' : '#f2f2f2'} ;
+`;
+const UserDataContainer = styled.div `
+    display:flex;
+    flex-direction: column;
+    width: 100%;
+    height: 34px;
+    margin-bottom: 8px;
+`;
+const Username = styled.h2 `
+    color: ${({ theme, darkMode }) => darkMode ? theme.colors.shadeWhite : theme.colors.neutralsGrey1};
+    font-family: Poppins, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 110%;
+    margin-bottom: 2px;
+`;
+const FirstChildUserData = styled.div `
+    display:flex;
+    justify-content: space-between;
+ `;
+const UserDataLastChild = styled.div `
+    display: flex;
+    color: ${({ theme, darkMode }) => darkMode ? theme.colors.neutralsGrey4 : theme.colors.neutralsGrey3};
+    font-family: Poppins, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+`;
+const MenuMoreContainer = styled.div `
+  border-radius: 50%;
+  height: 36px;
+  width: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 5px;
+  
+  &:hover {
+    background-color: ${({ darkMode }) => darkMode ? '#323232' : '#f2f2f2'};
+  }
+
+`;
+styled.div `
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: #444;
+    font-family: Poppins, sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 110%;
+`;
+styled.div `
+    & > *:last-child {
+        border-radius: 50%;
+        background-color: #757575;
+        border: 3px solid #757575;
+        width: 14px;
+        height: 14px;
+    }
+`;
+const RelationContainer = styled.div `
+    display: flex;
+    padding: 2px 8px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin: 8px 0px;
+    border-radius: 4px;
+    background: #9CA3AF;
+    color: #FFFFFF;
+    font-family: Poppins, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+`;
+const InteractiveButtonsContainer = styled.div `
+    display:flex;
+    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
+    gap:4px;
+    margin-top: 4px;
+    margin-left: 40px;
+    align-items: center;
+    color: #444;
+    font-family: Poppins, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    
+    & > *:last-child {
+        /* height:24px; */
+        transform: rotate(90deg);
+      }
+`;
+const FlexButtonContainer = styled.div `
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    border-radius: 100px;
+   
+    &:hover {
+        background-color: ${({ theme, darkMode }) => darkMode ? '#272727' : theme.colors.neutralsGrey9};
+    }
+    svg {
+        :hover {
+            /* fill:${({ theme }) => theme.colors.neutralsGrey9}; */
+            /* background-color: ${({ theme, darkMode }) => darkMode ? 'red' : theme.colors.neutralsGrey9}; */
+        }
+        :active {
+            /* stroke:${({ theme }) => theme.colors.neutralsGrey1};
+            background-color:  ${({ theme }) => theme.colors.neutralsGrey9}; */
+        }
+    }
+`;
+const Text = styled.div `
+    color: ${({ theme, darkMode }) => darkMode ? theme.colors.neutralsGrey5 : theme.colors.neutralsGrey2};
+    font-family: Poppins, sans-serif;
+    font-weight: 400;
+    word-break: break-word;
+    line-height: 140%;
+    font-size: 16px;
+    font-style: normal;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+    margin: 0;
+
+    ${mentionLinkStyles}
+`;
+const TextContainer = styled.div `
+`;
+const ShowMore = styled.span `
+    color: ${({ theme, darkMode }) => darkMode ? theme.colors.neutralsGrey5 : theme.colors.neutralsGrey2};
+    font-family: Poppins, sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 140%;
+    cursor: pointer;
+    display: ${({ isVisible }) => (isVisible ? 'inline' : 'none')};
+`;
+const FeedBody = styled.div `
+    flex: 1;
+`;
+const FeedBubble = styled.div `
+    background: #f8f8f8;
+    border-radius: 16px;
+    border-top-left-radius: 4px;
+    padding: 14px;
+    transition: background-color 0.2s ease;
+    width: 100%;
+
+    &:hover {
+        background: #f5f5f5;
+    }
+`;
+const FeedHeader = styled.div `
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 6px;
+    gap: 8px;
+`;
+const FeedAuthor = styled.p `
+    margin: 0;
+    font-family: Poppins, sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
+`;
+const FeedTime = styled.p `
+    margin: 2px 0 0;
+    font-family: Poppins, sans-serif;
+    font-weight: 400;
+    font-size: 11px;
+    color: ${({ theme }) => theme.colors.neutralsGrey3};
+`;
+const FeedRelationText = styled.span `
+    margin: 0 0 6px;
+    font-family: Poppins, sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    color: #FFFFFF;
+    background-color: #9CA3AF;
+    border-radius: 4px;
+    padding: 2px 8px;
+`;
+const LikeBadge = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    border-radius: 8px;
+    flex-shrink: 0;
+    background: ${({ $primaryColor }) => `${$primaryColor}1a`};
+    color: ${({ $primaryColor }) => $primaryColor};
+    font-family: Poppins, sans-serif;
+    font-weight: 600;
+    font-size: 12px;
+`;
+const FeedText = styled.div `
+    color: ${({ theme }) => theme.colors.neutralsGrey2};
+    font-family: Poppins, sans-serif;
+    font-weight: 400;
+    word-break: break-word;
+    line-height: 1.5;
+    font-size: 14px;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+    margin: 0;
+
+    ${mentionLinkStyles}
+`;
+const FeedActions = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 8px;
+    margin-left: 12px;
+    align-items: center;
+
+    & > *:last-child {
+        transform: rotate(90deg);
+    }
+`;
+const FeedAction = styled.button `
+    border: 0;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+    font-family: Poppins, sans-serif;
+    font-weight: 600;
+    font-size: 12px;
+    color: ${({ theme, $primaryColor, $highlight }) => $highlight ? $primaryColor : theme.colors.neutralsGrey3};
+    transition: color 0.2s ease;
+
+    &:hover {
+        color: ${({ $primaryColor }) => $primaryColor};
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+`;
+
+export { Box, Container, FeedAction, FeedActions, FeedAuthor, FeedBody, FeedBubble, FeedHeader, FeedRelationText, FeedText, FeedTime, FirstChildUserData, FlexButtonContainer, InteractiveButtonsContainer, LikeBadge, MenuMoreContainer, RelationContainer, ShowMore, Text, TextContainer, UserDataContainer, UserDataLastChild, Username };

package/dist/esm/src/components/commentaryBoxV2/index.js

@@ -0,0 +1,157 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Container, FeedBody, FeedBubble, FeedHeader, FeedAuthor, FeedTime, LikeBadge, FeedRelationText, Box, UserDataContainer, FirstChildUserData, Username, UserDataLastChild, RelationContainer, TextContainer, FeedText, Text, ShowMore, FeedActions, FeedAction, InteractiveButtonsContainer, FlexButtonContainer, MenuMoreContainer } from './CommentaryBoxV2.styles.js';
+import Avatar from '../avatar/index.js';
+import { EditIcon, TrashIconNew, IconLikeFilled, IconLikeLine } from '../../shared/icons.js';
+import MiniButton from '../mini-button/index.js';
+import MenuMore from '../menu-more/index.js';
+import { buildStringWithLinkHTML } from '../../utilityFunctions/buildStringWithHTML.js';
+import { createUUID } from '../../utilityFunctions/createUUID.js';
+import { useState, useEffect, useLayoutEffect } from 'react';
+import { FRSTTheme } from '../../theme/index.js';
+import { ThemeProvider } from 'styled-components';
+import { InputEdit } from './utilitiesComponents/inputEdit/index.js';
+import { Tooltip } from '@mui/material';
+import { ThumbsUp } from 'lucide-react';
+
+const DEFAULT_PRIMARY_COLOR = '#FF8A15';
+const CommentaryBoxV2 = ({ userName, imgProfile, userCompany, userOffice, showMoreText, relationToPhaseText, showLessText, showLikeButton, styles, actionLike, actionUnlike, answerButtonText, likeButtonText, commentTextWithMention, editText, deleteText, isAuthor, isOwnerPost, howLongAgo, commentId, commentUuid, commentText, actionAnswer, onClickUserInfo, actionEditComment, actionDeleteComment, isMainComment, hasActionToClickOnAvatar, showOptions, limitInput = 800, saveButtonText, cancelButtonText, orText, groupUuid, limitMessageExceeded, placeHolderText, getSearchUsers, likes, loggedInUser, showInterconnectionLine = false, darkMode, isLiked, totalLikes = 0, showAnswersButton, versionFeed, configColor = DEFAULT_PRIMARY_COLOR, unlikedButtonText }) => {
+    const iDCommentPosted = commentId ? commentId.toString() : `IDCommentPosted-${createUUID()}`;
+    const [isModeEdit, setIsModeEdit] = useState(false);
+    const [loadingLike, setLoadingLike] = useState(false);
+    const itsLiked = likes?.length > 0 ? likes?.some((like) => like.user_uuid === loggedInUser.id) : isLiked;
+    const likesCount = likes?.length > 0 ? likes?.length : totalLikes;
+    const likeId = likes?.find((like) => like.user_uuid === loggedInUser.id || like.user?.uuid === loggedInUser.id)?.id || null;
+    const edit = {
+        description: editText,
+        startIcon: jsx(EditIcon, { fill: darkMode ? '#FFFFFF' : "#222" }),
+        onClick: () => setIsModeEdit(true),
+        color: darkMode ? '#FFFFFF' : "#222"
+    };
+    const exclude = {
+        description: deleteText,
+        startIcon: jsx(TrashIconNew, { fill: darkMode ? '#FF4D3E' : "#C1341A" }),
+        onClick: () => actionDeleteComment(commentUuid),
+        color: darkMode ? '#FF4D3E' : '#C1341A'
+    };
+    const authorOptions = [edit, exclude];
+    const ownerPost = [exclude];
+    const handleLike = async () => {
+        try {
+            setLoadingLike(true);
+            await actionLike(commentId);
+        }
+        catch (error) {
+            console.log('error:', error);
+        }
+        finally {
+            setLoadingLike(false);
+        }
+    };
+    const handleUnlike = async () => {
+        try {
+            setLoadingLike(true);
+            await actionUnlike(likeId ? likeId : commentId.toString());
+        }
+        catch (error) {
+            console.log('error:', error);
+        }
+        finally {
+            setLoadingLike(false);
+        }
+    };
+    const [isExpanded, setIsExpanded] = useState(false);
+    const toggleExpand = () => {
+        setIsExpanded(!isExpanded);
+    };
+    const [isEllipsisVisible, setIsEllipsisVisible] = useState(false);
+    useEffect(() => {
+        const textContainer = document.getElementById(iDCommentPosted);
+        if (textContainer) {
+            setIsEllipsisVisible(textContainer.scrollHeight > textContainer.clientHeight);
+        }
+    }, [commentText]);
+    useLayoutEffect(() => {
+        const handleResize = () => {
+            const textContainer = document.getElementById(iDCommentPosted);
+            if (textContainer) {
+                setIsEllipsisVisible(textContainer.scrollHeight > textContainer.clientHeight);
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    const renderMenuMore = () => {
+        if (!showOptions)
+            return jsx("div", {});
+        if (isAuthor) {
+            return (jsx(MenuMoreContainer, { darkMode: darkMode, children: jsx(MenuMore, { isDarkMode: darkMode, options: authorOptions, style: {}, closeAfterClick: true, isHover: false }) }));
+        }
+        if (isOwnerPost) {
+            return (jsx(MenuMoreContainer, { darkMode: darkMode, children: jsx(MenuMore, { isDarkMode: darkMode, options: ownerPost, style: {}, closeAfterClick: true, isHover: false }) }));
+        }
+        return (jsx(MenuMoreContainer, { darkMode: darkMode, children: jsx(MenuMore, { isDarkMode: darkMode, options: [], isHover: false }) }));
+    };
+    const renderCommentContent = () => (jsxs(TextContainer, { id: "textContainerId", children: [versionFeed ? (jsx(FeedText, { "$primaryColor": configColor, style: isExpanded ? { display: 'block' } : { display: '-webkit-box' }, id: iDCommentPosted, dangerouslySetInnerHTML: {
+                    __html: buildStringWithLinkHTML(commentTextWithMention ? commentTextWithMention : commentText)
+                } })) : (jsx(Text, { "$primaryColor": configColor, style: isExpanded ? { display: 'block' } : { display: '-webkit-box' }, id: iDCommentPosted, dangerouslySetInnerHTML: {
+                    __html: buildStringWithLinkHTML(commentTextWithMention ? commentTextWithMention : commentText)
+                }, darkMode: darkMode })), jsx(ShowMore, { darkMode: darkMode, isVisible: isEllipsisVisible, onClick: toggleExpand, children: isExpanded ? showLessText : showMoreText })] }));
+    const renderFeedActions = () => (jsxs(FeedActions, { children: [showLikeButton && (jsx(FeedAction, { "$primaryColor": configColor, type: "button", onClick: itsLiked ? handleUnlike : handleLike, disabled: loadingLike, children: itsLiked ? unlikedButtonText : likeButtonText })), showAnswersButton && (jsx(FeedAction, { "$primaryColor": configColor, type: "button", onClick: actionAnswer, children: answerButtonText })), renderMenuMore()] }));
+    const renderDefaultActions = () => (jsxs(InteractiveButtonsContainer, { style: isMainComment ? { marginLeft: '55px' } : {}, children: [showLikeButton && (jsxs(Fragment, { children: [jsx(Tooltip, { title: itsLiked ? 'Remover curtida' : 'Curtir', placement: 'bottom', arrow: true, slotProps: {
+                            popper: {
+                                modifiers: [
+                                    {
+                                        name: 'offset',
+                                        options: {
+                                            offset: [0, 0]
+                                        }
+                                    }
+                                ],
+                            },
+                            tooltip: {
+                                sx: {
+                                    backgroundColor: darkMode ? '#323232' : '#FFFFFF',
+                                    fontFamily: 'Poppins, sans-serif',
+                                    fontWeight: 400,
+                                    fontSize: '14px',
+                                    lineHeight: 1.3,
+                                    textAlign: 'center',
+                                    color: darkMode ? '#FFFFFF' : '#757575',
+                                    border: darkMode ? '1px solid #323232' : '1px solid #BDBDBD',
+                                    boxShadow: '0px 25px 18px -20px #22222233'
+                                }
+                            },
+                            arrow: {
+                                sx: {
+                                    ":before": {
+                                        border: darkMode ? '1px solid #323232' : '1px solid #BDBDBD'
+                                    },
+                                    color: darkMode ? '#323232' : '#FFFFFF'
+                                }
+                            }
+                        }, children: jsx(FlexButtonContainer, { onClick: itsLiked ? handleUnlike : handleLike, style: {
+                                cursor: loadingLike ? 'not-allowed !important' : 'pointer',
+                                pointerEvents: loadingLike ? 'none' : 'auto'
+                            }, darkMode: darkMode, children: itsLiked ?
+                                jsx(IconLikeFilled, { customColor_1: darkMode ? '#151515' : '#FFFFFF' })
+                                :
+                                    jsx(IconLikeLine, { fill: darkMode ? "#EBEBEB" : "#444" }) }) }), jsx("span", { style: { color: itsLiked ? '#F26818' : (darkMode ? "#EBEBEB" : "#444"),
+                            fontFamily: 'Poppins, sans-serif',
+                            fontSize: '14px',
+                            fontWeight: 700
+                        }, children: likesCount })] })), showAnswersButton &&
+                jsx(MiniButton, { darkMode: darkMode, variant: "terciary", onClick: actionAnswer, label: answerButtonText, styles: { color: darkMode ? '#EBEBEB' : '#444444' } }), renderMenuMore()] }));
+    return (jsxs(ThemeProvider, { theme: FRSTTheme, children: [jsxs(Container, { style: { ...styles }, "$versionFeed": versionFeed, children: [jsxs("div", { style: { position: 'relative' }, children: [jsx(Avatar, { size: versionFeed ? '40px' : isMainComment ? '48px' : '32px', src: imgProfile, onClick: onClickUserInfo, style: { cursor: hasActionToClickOnAvatar ? 'pointer' : 'default', marginRight: versionFeed ? '0' : '6px' } }), showInterconnectionLine && (jsx("div", { style: {
+                                    height: '100%',
+                                    width: '2px',
+                                    position: 'absolute',
+                                    left: '16px',
+                                    top: '40px',
+                                    backgroundColor: '#D1D5DB'
+                                } }))] }), isModeEdit ? (versionFeed ? (jsx(FeedBody, { children: jsx(InputEdit, { placeHolderText: placeHolderText, commentText: buildStringWithLinkHTML(commentText), commentTextWithMention: commentTextWithMention && buildStringWithLinkHTML(commentTextWithMention), editButtonText: saveButtonText, onClickEditButton: actionEditComment, limitInput: limitInput, cancelButtonText: cancelButtonText, orText: orText, limitMessageExceeded: limitMessageExceeded, commentId: commentId, setIsModeEdit: setIsModeEdit, group_uuid: groupUuid, getSearchUsers: getSearchUsers, darkMode: darkMode, configColor: configColor }) })) : (jsx(InputEdit, { placeHolderText: placeHolderText, commentText: buildStringWithLinkHTML(commentText), commentTextWithMention: commentTextWithMention && buildStringWithLinkHTML(commentTextWithMention), editButtonText: saveButtonText, onClickEditButton: actionEditComment, limitInput: limitInput, cancelButtonText: cancelButtonText, orText: orText, limitMessageExceeded: limitMessageExceeded, commentId: commentId, setIsModeEdit: setIsModeEdit, group_uuid: groupUuid, getSearchUsers: getSearchUsers, darkMode: darkMode, configColor: configColor }))) : versionFeed ? (jsxs(FeedBody, { children: [jsxs(FeedBubble, { id: `comment_${commentUuid}`, children: [jsxs(FeedHeader, { children: [jsxs("div", { children: [jsx(FeedAuthor, { children: userName }), jsxs(FeedTime, { children: [userOffice && userOffice, " ", userCompany && `• ${userCompany}`, " ", howLongAgo && `• ${howLongAgo}`] })] }), likesCount > 0 ? (jsxs(LikeBadge, { "$primaryColor": configColor, children: [jsx(ThumbsUp, { size: 12, fill: configColor, color: configColor }), likesCount] })) : null] }), relationToPhaseText ? (jsx(FeedRelationText, { children: relationToPhaseText })) : null, renderCommentContent()] }), !isModeEdit && renderFeedActions()] })) : (jsxs(Box, { id: `comment_${commentUuid}`, darkMode: darkMode, children: [jsxs(UserDataContainer, { children: [jsx(FirstChildUserData, { children: jsx(Username, { darkMode: darkMode, children: userName }) }), jsxs(UserDataLastChild, { darkMode: darkMode, children: [userOffice && userOffice, " ", userCompany && `• ${userCompany}`, " ", howLongAgo && `• ${howLongAgo}`] })] }), relationToPhaseText && jsx(RelationContainer, { children: relationToPhaseText }), renderCommentContent()] }))] }), !isModeEdit && !versionFeed && renderDefaultActions()] }));
+};
+
+export { CommentaryBoxV2 };

package/dist/esm/src/components/commentaryBoxV2/utilitiesComponents/inputEdit/index.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Loading from '../../../DS/loading/index.js';
+import InputComment from '../../../input-comment/index.js';
+import MiniButton from '../../../mini-button/index.js';
+import { useState, useRef } from 'react';
+import { Container, InputContainer, ButtonsContainer, SpanText, SaveButton } from './inputEdit.styles.js';
+
+const InputEdit = ({ placeHolderText, commentText, commentTextWithMention, getSearchUsers, onClickEditButton, limitInput, editButtonText, cancelButtonText, orText, limitMessageExceeded, commentId, group_uuid, setIsModeEdit, darkMode, configColor = '#FF8A15' }) => {
+    const [comment, setComment] = useState(commentText);
+    const [CaptureFormattedValue, setCaptureFormattedValue] = useState(commentTextWithMention);
+    const [captureMentions, setCaptureMentions] = useState([]);
+    const [users, setUsers] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const inputRef = useRef(null);
+    const handlePublish = async () => {
+        setIsLoading(true);
+        await onClickEditButton({
+            commentId,
+            content: comment,
+            contentMention: CaptureFormattedValue,
+            mentions: captureMentions
+        });
+        setIsLoading(false);
+        setIsModeEdit(false);
+        setComment('');
+        setCaptureFormattedValue('');
+        setCaptureMentions([]);
+    };
+    let timeout;
+    const setCommentData = (value) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            setComment(value);
+        }, 300);
+    };
+    const handleSearchUsers = async (value) => {
+        const response = await getSearchUsers(value);
+        setUsers(response?.data?.results || response);
+    };
+    return (jsxs(Container, { children: [jsx(InputContainer, { ref: inputRef, style: { width: '100%' }, children: jsx(InputComment, { styles: { width: '100%' }, 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, group_uuid: group_uuid, limitMessageExceeded: limitMessageExceeded, initialText: CaptureFormattedValue || comment, darkMode: darkMode, showEmojiPicker: darkMode, configColor: configColor }) }), jsxs(ButtonsContainer, { children: [jsx(MiniButton, { darkMode: darkMode, label: cancelButtonText, onClick: () => setIsModeEdit(false), variant: 'secondary' }), jsx(SpanText, { darkMode: darkMode, children: orText }), jsx(SaveButton, { type: "button", "$primaryColor": configColor, disabled: comment.length <= 0 || comment.length > limitInput || isLoading, onClick: () => handlePublish(), children: editButtonText })] }), isLoading && jsx(Loading, {})] }));
+};
+
+export { InputEdit };

package/dist/esm/src/components/commentaryBoxV2/utilitiesComponents/inputEdit/inputEdit.styles.js

@@ -0,0 +1,54 @@
+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;
+    flex-direction:column;
+    width:100%;
+`;
+const SpanText = styled.p `
+    color: ${({ darkMode }) => darkMode ? '#EBEBEB' : '#000'};
+    font-family: Poppins, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 110%;
+`;
+const ButtonsContainer = styled.div `
+    width:175px;
+    display:flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left:auto;
+`;
+const SaveButton = styled.button `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 4px 16px;
+    gap: 8px;
+    width: fit-content;
+    height: 32px;
+    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 { ButtonsContainer, Container, InputContainer, SaveButton, SpanText };

package/dist/esm/src/components/conquistaCarrossel/index.js

@@ -0,0 +1,26 @@
+import { jsx } 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 ScrollContainer from '../scroll-container/index.js';
+import CardResultConquista from '../cards/cardResultConquista/index.js';
+
+function ConquistaCarrossel({ onSelected, objectCards, marginsArrowButton, sizeArrowButton, horizontalMarginInternScroll, positionArrowButton, marginTopArrrowButton, textMoreDetails, }) {
+    useState(-1);
+    const [Refresh, setRefresh] = useState(0);
+    const [btnViewMore, setBtnViewMore] = useState('');
+    useEffect(() => {
+        let temp = Refresh;
+        setRefresh(temp + 1);
+    }, [objectCards]);
+    useEffect(() => {
+        setBtnViewMore(textMoreDetails);
+    }, [textMoreDetails]);
+    function renderCard(item, index) {
+        return (jsx(CardResultConquista, { textMoreDetails: btnViewMore ? btnViewMore : 'Mais detalhes', description: item.description, problemId: item.problemId, statusCard: item.statusCard, userArea: item.userArea, userName: item.userName, userAvatar: item.userAvatar, onClick: () => onSelected(item.problemId), style: { marginRight: '24px', whiteSpace: 'pre-wrap' }, onClickAvatar: item.onClickUserInfo, onClickName: item.onClickUserInfo, textVisitProfile: item.textVisitProfile }, index));
+    }
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(ScrollContainer, { stepMove: 380, isVisibleControlsButtons: true, sizeArrowButton: sizeArrowButton, marginsArrowButton: marginsArrowButton, horizontalMarginInternScroll: horizontalMarginInternScroll, positionArrowButton: positionArrowButton ? positionArrowButton : '', marginTopArrrowButton: marginTopArrrowButton ? marginTopArrrowButton : '20px', refreshResize: Refresh, children: objectCards.map(renderCard) }) }));
+}
+
+export { ConquistaCarrossel as default };

package/dist/esm/src/components/counter-like/counterLikeStyles.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+const WrapperButton = styled.div `
+    display: flex;
+    flex-direction: row;
+    width: fit-content;
+    cursor: pointer;
+    gap: 6px;
+`;
+const Counter = styled.div `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: ${({ isLiked }) => isLiked ? '700' : '400'};
+    font-size: 14px;
+    line-height: 120%;
+
+    display: flex;
+    align-items: center;
+    text-align: right;
+
+    color: ${({ theme, active }) => active ? theme.colors.linkOnfocus : theme.colors.neutralsGrey2};
+
+    text-decoration: ${({ active }) => active ? 'underline' : 'none'};
+`;
+
+export { Counter, WrapperButton };

package/dist/esm/src/components/counter-like/index.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs, Fragment } 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 { WrapperButton, Counter } from './counterLikeStyles.js';
+import { IconLikeFilled, IconLikeLine } from '../../shared/icons.js';
+
+function CounterLike({ onClick, total, styles }) {
+    const [actionArea, setActionArea] = useState(false);
+    const [counter, setCounter] = useState(0);
+    const [isPressed, setIsPressed] = useState(false);
+    useEffect(() => {
+        setCounter(total);
+    }, [total]);
+    const handleClick = () => {
+        setIsPressed(true);
+        onClick();
+        setTimeout(() => {
+            setIsPressed(false);
+        }, 1000);
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(WrapperButton, { onClick: () => handleClick(), onMouseOver: () => setActionArea(true), onMouseOut: () => setActionArea(false), style: { ...styles }, children: [jsx(Fragment, { children: isPressed ?
+                        jsx(IconLikeFilled, {})
+                        : jsx(IconLikeLine, { fill: actionArea ? '#F26818' : '#444444' }) }), counter >= 1 && jsx(Counter, { active: actionArea, isLiked: isPressed, children: counter })] }) }));
+}
+
+export { CounterLike as default };