frst-components 0.31.4 → 0.31.6

package/dist/index.js

@@ -26,6 +26,7 @@ var Select$4 = require('react-select');
 var ReactDOM = require('react-dom');
 var reactToastify = require('react-toastify');
 var CloseIcon$1 = require('@mui/icons-material/Close');
+var EmojiPicker$1 = require('emoji-picker-react');
 var usehooksTs = require('usehooks-ts');
 var ArrowDropUpOutlinedIcon = require('@mui/icons-material/ArrowDropUpOutlined');
 var ArrowDropDownOutlinedIcon = require('@mui/icons-material/ArrowDropDownOutlined');
@@ -106,6 +107,7 @@ var StepConnector__default = /*#__PURE__*/_interopDefaultLegacy(StepConnector);
 var Select__default$1 = /*#__PURE__*/_interopDefaultLegacy(Select$4);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon$1);
+var EmojiPicker__default = /*#__PURE__*/_interopDefaultLegacy(EmojiPicker$1);
 var ArrowDropUpOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDropUpOutlinedIcon);
 var ArrowDropDownOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDropDownOutlinedIcon);
 var LinearProgress__default = /*#__PURE__*/_interopDefaultLegacy(LinearProgress);
@@ -3684,30 +3686,29 @@ const MenuCustom$2 = styled__default["default"](Menu__default["default"]) `
     border-radius: 8px !important;
     box-shadow: 0px 15px 20px -20px rgba(34, 34, 34, 0.15), 0px 3px 10px 0px rgba(0, 0, 0, 0.15);
     overflow: visible;
-    background: #00000000;
-    ${({ isArrowInMenu }) => isArrowInMenu &&
+    background: ${({ isDarkMode }) => isDarkMode ? '#1f1f1f' : '#00000000'};
+    ${({ isArrowInMenu, isDarkMode }) => isArrowInMenu &&
     `&:before {
-    content: "";
-    position: absolute;
-    top: -15px;
-    right: 8.5px;
-    border-top: 6px solid transparent;
-    border-bottom: 10px solid #EBEBEB;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-  }
+        content: "";
+        position: absolute;
+        top: -15px;
+        right: 8.5px;
+        border-top: 6px solid transparent;
+        border-bottom: 10px solid ${isDarkMode ? '#1f1f1f' : '#EBEBEB'};
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+      }
   
-    &:after {
-    content: "";
-    position: absolute;
-    top: -14px;
-    right: 8.5px;
-    border-top: 6px solid transparent;
-    border-bottom: 10px solid #FFF;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-
-  }`}
+      &:after {
+        content: "";
+        position: absolute;
+        top: -14px;
+        right: 8.5px;
+        border-top: 6px solid transparent;
+        border-bottom: 10px solid ${isDarkMode ? '#1f1f1f' : '#FFF'};
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+      }`}
   }
   ul {
     box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15), 0px 15px 20px -20px rgba(34, 34, 34, 0.15);
@@ -3801,7 +3802,7 @@ function MenuMore({ iconButton, options, style, closeAfterClick, isHover = true,
     const handleClose = () => {
         setAnchorEl(null);
     };
-    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs("div", { style: { ...style }, children: [jsxRuntime.jsx(ButtonMore$2, { id: "basic-button", disableRipple: isHover ? false : true, "aria-controls": "basic-menu", "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, onClick: handleClick, children: iconButton ? iconButton : jsxRuntime.jsx(MoreDotsVertical, { fill: "#444" }) }), listOptions && listOptions?.length > 0 && (jsxRuntime.jsx(MenuCustom$2, { id: "basic-menu", anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, anchorEl: anchorEl, open: open, onClose: handleClose, isArrowInMenu: isArrowInMenu, isPaddingInMenu: isPaddingInMenu, isDarkMode: isDarkMode, children: listOptions.map((itemOption, index) => {
+    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs("div", { style: { ...style }, children: [jsxRuntime.jsx(ButtonMore$2, { id: "basic-button", disableRipple: isHover ? false : true, "aria-controls": "basic-menu", "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, onClick: handleClick, children: iconButton ? iconButton : jsxRuntime.jsx(MoreDotsVertical, { fill: isDarkMode ? "#EBEBEB" : "#444" }) }), listOptions && listOptions?.length > 0 && (jsxRuntime.jsx(MenuCustom$2, { id: "basic-menu", anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, anchorEl: anchorEl, open: open, onClose: handleClose, isArrowInMenu: isArrowInMenu, isPaddingInMenu: isPaddingInMenu, isDarkMode: isDarkMode, children: listOptions.map((itemOption, index) => {
                         return (jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsxs(ButtonMenuNotification, { onClick: () => {
                                     itemOption?.onClick();
                                     closeAfterClick && handleClose();
@@ -4396,7 +4397,7 @@ const InputWrapper$2 = styled__default["default"].div `
     width: 100%;
     min-height: 48px;
     position: 'relative';
-    background-color: ${({ theme, isInputLimit }) => !isInputLimit ? theme.colors.neutralsGrey9 : theme.colors.inputError};
+    background-color: ${({ theme, isInputLimit, darkMode }) => !isInputLimit ? (darkMode ? '#272727' : theme.colors.neutralsGrey9) : (darkMode ? '#272727' : theme.colors.inputError)};
     
     border-radius: 24px;
 
@@ -4404,10 +4405,10 @@ const InputWrapper$2 = styled__default["default"].div `
 
   
 
-    border: ${({ theme, isPlaceholder, isInputLimit }) => isInputLimit ? `2px solid ${theme.colors.messageError3} !important` : !isPlaceholder ? `1px solid ${theme.colors.neutralsGrey5} !important` : `1px solid ${theme.colors.neutralsGrey5} !important`};
+    border: ${({ theme, isPlaceholder, isInputLimit, darkMode }) => isInputLimit ? `2px solid ${theme.colors.messageError3} !important` : !isPlaceholder ? (darkMode ? `2px solid ${theme.colors.neutralsGrey4}` : `1px solid ${theme.colors.neutralsGrey5} !important`) : `1px solid ${darkMode ? '#272727' : theme.colors.neutralsGrey5} !important`};
     
     &:hover {
-        border: 2px solid ${({ theme, isInputLimit }) => isInputLimit ? theme.colors.messageError3 : theme.colors.neutralsGrey5} !important;
+        border: 2px solid ${({ theme, isInputLimit, darkMode, isPlaceholder }) => isInputLimit ? theme.colors.messageError3 : !isPlaceholder ? (theme.colors.neutralsGrey4) : (darkMode ? '#444444' : theme.colors.neutralsGrey5)} !important;
     }
     
 `;
@@ -4415,7 +4416,7 @@ const InputText$4 = styled__default["default"].div `
     width: 100%;
     height: ${({ height }) => height || '20px'};
     outline: 0;
-    color: ${({ theme }) => theme.colors.neutralsGrey1};
+    color: ${({ theme, darkMode }) => darkMode ? theme.colors.shadeWhite : theme.colors.neutralsGrey1};
     font-family: 'Work Sans';
     font-style: normal;
     font-weight: normal;
@@ -4425,7 +4426,7 @@ const InputText$4 = styled__default["default"].div `
     overflow: hidden;
     background-color: inherit;
     word-break: break-word;
-    
+    caret-color: ${({ theme, darkMode }) => darkMode && theme.colors.shadeWhite};
         
     padding: 0;
     margin: 10px 4px 40px 15px;
@@ -4469,7 +4470,7 @@ styled__default["default"].div `
     transition: all 0.2s ease-in-out;
 `;
 const HelperContainer = styled__default["default"].div `
-    position:relative;
+    position: relative;
     padding: 5px;
 `;
 const HelperText$2 = styled__default["default"].span `
@@ -4485,12 +4486,19 @@ const HelperText$2 = styled__default["default"].span `
     
     letter-spacing: -0.02em;
 
-    color: ${({ theme, isInputLimit }) => isInputLimit === true ? theme.colors.messageError3 : theme.colors.neutralsGrey2};
+    color: ${({ theme, isInputLimit, darkMode }) => isInputLimit ? theme.colors.messageError3 : darkMode ? theme.colors.neutralsGrey3 : theme.colors.neutralsGrey2};
 
     
     top:-30px;
     margin-left: 13px;
 `;
+const EmojiWrapper = styled__default["default"].div `
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: -45px;
+    right: 13px;
+`;
 styled__default["default"].div `
     width: 310px;
     height: 432px;
@@ -4526,6 +4534,7 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
     const [isPlaceholder, setPlaceholder] = React.useState(false);
     const [styleLimitExceeded, setStyleLimitExceeded] = React.useState(false);
     const [mentionedIds, setMentionedIds] = React.useState([]);
+    const [showPicker, setShowPicker] = React.useState(false);
     const createNewRangeAndMoveCursorToTheEnd = (selection, spaceNode) => {
         // Create a new range for setting the cursor position
         const newRange = document.createRange();
@@ -4715,6 +4724,14 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
     };
     const handlePlaceholderInputText = (isPlaceHolderFocus = false) => {
         setTimeout(() => {
+            // Check if the click was on the emoji button or picker
+            const target = document.activeElement;
+            const isEmojiButton = target?.closest('.MuiIconButton-root');
+            const isEmojiPicker = target?.closest('.EmojiPickerReact');
+            const isEmojiWrapper = target?.closest('.emoji-wrapper');
+            if (isEmojiButton || isEmojiPicker || isEmojiWrapper) {
+                return;
+            }
             if (document.activeElement?.id === 'input-comment-component')
                 return;
             // if divInputRef has any element hide the placeholder
@@ -4751,6 +4768,16 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
         });
         return mentionedUsersIdList;
     };
+    const handleEmojiSelected = (emojiData, event) => {
+        if (divInputRef.current) {
+            divInputRef.current.appendChild(document.createTextNode(emojiData.emoji));
+            // Update input state
+            countChars();
+            createFormatAndTextContentToSaveComment();
+            resizeDiv();
+            setShowPicker(false);
+        }
+    };
     React.useEffect(() => {
         if (divInputRef.current && initialText) {
             divInputRef.current.innerHTML = initialText;
@@ -4895,7 +4922,10 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
         textLength,
         isPlaceholder,
         styleLimitExceeded,
-        divPlaceholder
+        divPlaceholder,
+        handleEmojiSelected,
+        showPicker,
+        setShowPicker
     };
 };
 
@@ -4904,7 +4934,7 @@ const DefaultProfile = ({ className, size = 40 }) => {
 };
 
 const Container$r = styled__default["default"].div `
-  background-color: #ffff;
+  background-color: ${({ darkMode }) => darkMode ? '#323232' : '#ffff'} ;
   display: ${({ hide }) => hide ? 'none' : 'flex'};
   justify-content: center;
   align-items: center;
@@ -4917,7 +4947,7 @@ const Container$r = styled__default["default"].div `
   overflow-x: hidden;
   z-index: 100;
   border-radius: 8px;
-  box-shadow: 4px 8px 10px 0 #BDBDBD;
+  box-shadow: ${({ darkMode }) => darkMode ? '4px 8px 10px 0px #0000004D' : '4px 8px 10px 0 #BDBDBD'};
  
   ::-webkit-scrollbar {
     width: 17px; 
@@ -4951,15 +4981,15 @@ const MentionItem = styled__default["default"].div `
   align-items: center;
   justify-content: flex-start;
   padding: 8px;
-  border-bottom:${({ theme }) => `0.5px solid ${theme.colors.neutralsGrey5}`};
+  border-bottom:${({ theme, darkMode }) => `0.5px solid ${darkMode ? theme.colors.neutralsGrey3 : theme.colors.neutralsGrey5}`};
   &:last-child {
     border-bottom: none; /* Remove the border for the last child */
   }
   &:hover {
-    background-color:${({ active }) => active ? '#FCF3EB' : '#F1F5F9'};
+    background-color:${({ active, darkMode }) => active ? (darkMode ? '#3D3D3D' : '#FCF3EB') : (darkMode ? '#3D3D3D' : '#F1F5F9')};
   }
   &:focus{
-    background-color:${({ active }) => active ? '#FCF3EB' : '#F1F5F9'};
+    background-color:${({ active, darkMode }) => active ? (darkMode ? '#4B4B4B' : '#FCF3EB') : (darkMode ? '#4B4B4B' : '#F1F5F9')};
   }
   
   
@@ -4986,14 +5016,14 @@ const MentionUserContainer = styled__default["default"].div `
 const MentionUserName = styled__default["default"].span `
   font-weight: 400;
   font-size: 16px;
-  
+  color: ${({ theme, darkMode }) => darkMode ? theme.colors.shadeWhite : '#343434'};
 `;
 const MentionSubTitleContainer = styled__default["default"].div `
   margin-top: 2px;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: ${({ theme }) => theme.colors.neutralsGrey3};
+  color: ${({ theme, darkMode }) => darkMode ? theme.colors.neutralsGrey5 : theme.colors.neutralsGrey3};
   font-weight: 400;
 `;
 const MentionSubTitleText = styled__default["default"].span `
@@ -5008,12 +5038,12 @@ const Circle = styled__default["default"].div `
   height: 4px;
   border-radius: 50%;
   font-weight: 400;
-  background-color: ${({ theme }) => theme.colors.neutralsGrey3};
-  color: ${({ theme }) => theme.colors.neutralsGrey3};
+  background-color: ${({ theme, darkMode }) => darkMode ? theme.colors.neutralsGrey5 : theme.colors.neutralsGrey3};
+  color: ${({ theme, darkMode }) => darkMode ? theme.colors.neutralsGrey5 : theme.colors.neutralsGrey3};
   margin: 0 8px;
 `;
 const CompanyName = styled__default["default"].span `
-    white-space: nowrap;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 50%;
@@ -5064,18 +5094,21 @@ const useMentions = (mention) => {
 
 const Mentions = (mention) => {
     const { selectedUser, setSelectedUser, mentionListRef } = useMentions(mention);
-    const { top, users } = mention;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Container$r, { top: top, tabIndex: 0, hide: !users || users.length <= 0, children: jsxRuntime.jsx(MentionList, { tabIndex: 1, ref: mentionListRef, children: users?.map((user, index) => {
+    const { top, users, darkMode } = mention;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Container$r, { top: top, tabIndex: 0, hide: !users || users.length <= 0, darkMode: darkMode, children: jsxRuntime.jsx(MentionList, { tabIndex: 1, ref: mentionListRef, children: users?.map((user, index) => {
                     return (jsxRuntime.jsxs(MentionItem, { tabIndex: index += 2, active: user.user_uuid === selectedUser?.user_uuid, onMouseDown: () => setSelectedUser(user), onKeyUpCapture: (e) => {
                             if (e.key.toLowerCase() === 'enter') {
                                 setSelectedUser(user);
                             }
-                        }, children: [!!user.profile.avatar && !!user.profile.avatar.length ? jsxRuntime.jsx(MentionAvatar, { src: user.profile.avatar }) : jsxRuntime.jsx(DefaultAvatar, { children: jsxRuntime.jsx(DefaultProfile, {}) }), jsxRuntime.jsxs(MentionUserContainer, { children: [jsxRuntime.jsx(MentionUserName, { children: user.name }), jsxRuntime.jsx(MentionSubTitleContainer, { children: jsxRuntime.jsxs(MentionSubTitleText, { children: [user.profile.role_name, " ", jsxRuntime.jsx(Circle, {}), jsxRuntime.jsx(CompanyName, { children: user.profile.company_name })] }) })] })] }, user.user_uuid));
+                        }, darkMode: darkMode, children: [!!user.profile.avatar && !!user.profile.avatar.length ? jsxRuntime.jsx(MentionAvatar, { src: user.profile.avatar }) : jsxRuntime.jsx(DefaultAvatar, { children: jsxRuntime.jsx(DefaultProfile, {}) }), jsxRuntime.jsxs(MentionUserContainer, { children: [jsxRuntime.jsx(MentionUserName, { darkMode: darkMode, children: user.name }), jsxRuntime.jsx(MentionSubTitleContainer, { darkMode: darkMode, children: jsxRuntime.jsxs(MentionSubTitleText, { children: [user.profile.role_name, " ", jsxRuntime.jsx(Circle, { darkMode: darkMode }), jsxRuntime.jsx(CompanyName, { children: user.profile.company_name })] }) })] })] }, user.user_uuid));
                 }) }) }) }));
 };
 
-function InputComment$1({ placeholder, onChange, limit, users, showCharacterCounter, styles, onSendMentions, onContentFormat, onContentUnformat, disabled, className, value, replyMentionedUser, group_uuid, limitMessageExceeded, initialText }) {
-    const { divPlaceholder, handleInput, isPlaceholder, divInputRef, handleMentionUser, mentionTopPosition, setShowMention, showMention, textLength, styleLimitExceeded } = useInputHook({
+function EmojiIcon() {
+    return (jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("mask", { id: "path-1-inside-1_2339_11367", fill: "white", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", 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 22ZM16.8474 14.9845C16.2991 16.7176 14.3368 18 12 18C9.66322 18 7.70085 16.7176 7.15257 14.9845C6.98599 14.4579 7.44772 14 8 14H16C16.5523 14 17.014 14.4579 16.8474 14.9845ZM15.75 9.8125C15.75 11.0206 15.75 12 14.8125 12C13.875 12 13.875 11.0206 13.875 9.8125C13.875 8.60438 13.875 7.625 14.8125 7.625C15.75 7.625 15.75 8.60438 15.75 9.8125ZM9.1875 12C10.125 12 10.125 11.0206 10.125 9.8125C10.125 8.60438 10.125 7.625 9.1875 7.625C8.25 7.625 8.25 8.60438 8.25 9.8125C8.25 11.0206 8.25 12 9.1875 12Z" }) }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", 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 22ZM16.8474 14.9845C16.2991 16.7176 14.3368 18 12 18C9.66322 18 7.70085 16.7176 7.15257 14.9845C6.98599 14.4579 7.44772 14 8 14H16C16.5523 14 17.014 14.4579 16.8474 14.9845ZM15.75 9.8125C15.75 11.0206 15.75 12 14.8125 12C13.875 12 13.875 11.0206 13.875 9.8125C13.875 8.60438 13.875 7.625 14.8125 7.625C15.75 7.625 15.75 8.60438 15.75 9.8125ZM9.1875 12C10.125 12 10.125 11.0206 10.125 9.8125C10.125 8.60438 10.125 7.625 9.1875 7.625C8.25 7.625 8.25 8.60438 8.25 9.8125C8.25 11.0206 8.25 12 9.1875 12Z", fill: "#BDBDBD" }), jsxRuntime.jsx("path", { d: "M16.8474 14.9845L17.9915 15.3464L16.8474 14.9845ZM7.15257 14.9845L8.29668 14.6225L7.15257 14.9845ZM22 12H20.8C20.8 16.8601 16.8601 20.8 12 20.8V22V23.2C18.1856 23.2 23.2 18.1856 23.2 12H22ZM12 2V3.2C16.8601 3.2 20.8 7.13989 20.8 12H22H23.2C23.2 5.81441 18.1856 0.8 12 0.8V2ZM2 12H3.2C3.2 7.13989 7.13989 3.2 12 3.2V2V0.8C5.81441 0.8 0.8 5.81441 0.8 12H2ZM12 22V20.8C7.13989 20.8 3.2 16.8601 3.2 12H2H0.8C0.8 18.1856 5.81441 23.2 12 23.2V22ZM12 18V19.2C14.7165 19.2 17.246 17.703 17.9915 15.3464L16.8474 14.9845L15.7033 14.6225C15.3523 15.7321 13.9571 16.8 12 16.8V18ZM7.15257 14.9845L6.00846 15.3464C6.75399 17.703 9.28353 19.2 12 19.2V18V16.8C10.0429 16.8 8.64771 15.7321 8.29668 14.6225L7.15257 14.9845ZM8 14V12.8C7.40113 12.8 6.81957 13.046 6.41813 13.4883C5.99732 13.9519 5.78348 14.6353 6.00846 15.3464L7.15257 14.9845L8.29668 14.6225C8.32033 14.6973 8.32712 14.7933 8.30296 14.8925C8.27988 14.9873 8.23568 15.0568 8.19529 15.1013C8.12114 15.183 8.04658 15.2 8 15.2V14ZM16 14V12.8H8V14V15.2H16V14ZM16.8474 14.9845L17.9915 15.3464C18.2165 14.6353 18.0027 13.9519 17.5819 13.4883C17.1804 13.046 16.5989 12.8 16 12.8V14V15.2C15.9534 15.2 15.8789 15.183 15.8047 15.1013C15.7643 15.0568 15.7201 14.9873 15.697 14.8925C15.6729 14.7933 15.6797 14.6973 15.7033 14.6225L16.8474 14.9845ZM14.8125 12V13.2C15.2663 13.2 15.7345 13.076 16.1261 12.7471C16.4999 12.4332 16.6853 12.0316 16.7835 11.6999C16.9615 11.0986 16.95 10.3466 16.95 9.8125H15.75H14.55C14.55 10.1229 14.5496 10.3752 14.5372 10.5969C14.5246 10.8228 14.5021 10.9515 14.4822 11.0187C14.4632 11.0828 14.4727 11.0016 14.5829 10.9091C14.7109 10.8016 14.8274 10.8 14.8125 10.8V12ZM13.875 9.8125H12.675C12.675 10.3466 12.6635 11.0986 12.8415 11.6999C12.9397 12.0316 13.1251 12.4332 13.4989 12.7471C13.8905 13.076 14.3587 13.2 14.8125 13.2V12V10.8C14.7976 10.8 14.9141 10.8016 15.0421 10.9091C15.1523 11.0016 15.1618 11.0828 15.1428 11.0187C15.1229 10.9515 15.1004 10.8228 15.0878 10.5969C15.0754 10.3752 15.075 10.1229 15.075 9.8125H13.875ZM14.8125 7.625V6.425C14.3587 6.425 13.8905 6.54904 13.4989 6.87789C13.1251 7.19177 12.9397 7.59337 12.8415 7.92508C12.6635 8.52636 12.675 9.27835 12.675 9.8125H13.875H15.075C15.075 9.50214 15.0754 9.24985 15.0878 9.02809C15.1004 8.80222 15.1229 8.6735 15.1428 8.60633C15.1618 8.54218 15.1523 8.62343 15.0421 8.71592C14.9141 8.82338 14.7976 8.825 14.8125 8.825V7.625ZM15.75 9.8125H16.95C16.95 9.27835 16.9615 8.52636 16.7835 7.92508C16.6853 7.59337 16.4999 7.19177 16.1261 6.87789C15.7345 6.54904 15.2663 6.425 14.8125 6.425V7.625V8.825C14.8274 8.825 14.7109 8.82338 14.5829 8.71592C14.4727 8.62343 14.4632 8.54218 14.4822 8.60633C14.5021 8.6735 14.5246 8.80222 14.5372 9.02809C14.5496 9.24985 14.55 9.50214 14.55 9.8125H15.75ZM10.125 9.8125H8.925C8.925 10.1229 8.92464 10.3752 8.91223 10.5969C8.89958 10.8228 8.87706 10.9515 8.85717 11.0187C8.83818 11.0828 8.84771 11.0016 8.95786 10.9091C9.08585 10.8016 9.20243 10.8 9.1875 10.8V12V13.2C9.64132 13.2 10.1095 13.076 10.5011 12.7471C10.8749 12.4332 11.0603 12.0316 11.1585 11.6999C11.3365 11.0986 11.325 10.3466 11.325 9.8125H10.125ZM9.1875 7.625V8.825C9.20243 8.825 9.08585 8.82338 8.95786 8.71592C8.84771 8.62343 8.83818 8.54218 8.85717 8.60633C8.87706 8.6735 8.89958 8.80222 8.91223 9.02809C8.92464 9.24985 8.925 9.50214 8.925 9.8125H10.125H11.325C11.325 9.27835 11.3365 8.52636 11.1585 7.92508C11.0603 7.59337 10.8749 7.19177 10.5011 6.87789C10.1095 6.54904 9.64132 6.425 9.1875 6.425V7.625ZM8.25 9.8125H9.45C9.45 9.50214 9.45036 9.24985 9.46277 9.02809C9.47542 8.80222 9.49794 8.6735 9.51783 8.60633C9.53682 8.54218 9.52729 8.62343 9.41714 8.71592C9.28915 8.82338 9.17257 8.825 9.1875 8.825V7.625V6.425C8.73368 6.425 8.26554 6.54904 7.87388 6.87789C7.50005 7.19177 7.31474 7.59337 7.21655 7.92508C7.03855 8.52636 7.05 9.27835 7.05 9.8125H8.25ZM9.1875 12V10.8C9.17257 10.8 9.28915 10.8016 9.41714 10.9091C9.52729 11.0016 9.53682 11.0828 9.51783 11.0187C9.49794 10.9515 9.47542 10.8228 9.46277 10.5969C9.45036 10.3752 9.45 10.1229 9.45 9.8125H8.25H7.05C7.05 10.3466 7.03855 11.0986 7.21655 11.6999C7.31474 12.0316 7.50005 12.4332 7.87388 12.7471C8.26554 13.076 8.73368 13.2 9.1875 13.2V12Z", fill: "#BDBDBD", mask: "url(#path-1-inside-1_2339_11367)" })] }));
+}
+function InputComment$1({ placeholder, onChange, limit, users, showCharacterCounter, styles, onSendMentions, onContentFormat, onContentUnformat, disabled, className, value, replyMentionedUser, group_uuid, limitMessageExceeded, initialText, darkMode, showEmojiPicker }) {
+    const { divPlaceholder, handleInput, isPlaceholder, divInputRef, handleMentionUser, mentionTopPosition, setShowMention, showMention, textLength, styleLimitExceeded, handleEmojiSelected, showPicker, setShowPicker } = useInputHook({
         limit,
         placeholder,
         onContentFormat,
@@ -5106,12 +5139,25 @@ function InputComment$1({ placeholder, onChange, limit, users, showCharacterCoun
     const removeFormatting = (text) => {
         return text?.replace(/<[^>]*>/g, '');
     };
-    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs("div", { style: { minHeight: '48px', ...styles }, tabIndex: 0, onMouseDown: () => divPlaceholder.current.focus(), children: [jsxRuntime.jsxs(InputWrapper$2, { tabIndex: 1, isPlaceholder: isPlaceholder, isInputLimit: styleLimitExceeded, onMouseDown: () => divPlaceholder.current.focus(), children: [jsxRuntime.jsx(InputText$4, { id: "input-comment-component", tabIndex: 2, contentEditable: true, ref: divInputRef, onKeyUpCapture: (event) => {
+    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs("div", { style: { minHeight: '48px', ...styles }, tabIndex: 0, onMouseDown: () => divPlaceholder.current.focus(), children: [jsxRuntime.jsxs(InputWrapper$2, { tabIndex: 1, isPlaceholder: isPlaceholder, isInputLimit: styleLimitExceeded, onMouseDown: () => divPlaceholder.current.focus(), darkMode: darkMode, children: [jsxRuntime.jsx(InputText$4, { id: "input-comment-component", tabIndex: 2, contentEditable: true, ref: divInputRef, onKeyUpCapture: (event) => {
                                 handleInput(event);
-                            }, "data-text": "enter", suppressContentEditableWarning: true, onPaste: handlePaste, children: jsxRuntime.jsx("p", { children: jsxRuntime.jsx("br", {}) }) }), jsxRuntime.jsx(InputPlaceholder, { style: { display: 'none' }, contentEditable: true, ref: divPlaceholder, children: placeholder }), showMention && users && users.length > 0 && (jsxRuntime.jsx(Mentions, { users: users, top: mentionTopPosition, onSelect: (user) => {
+                            }, "data-text": "enter", suppressContentEditableWarning: true, onPaste: handlePaste, darkMode: darkMode }), jsxRuntime.jsx(InputPlaceholder, { style: { display: 'none' }, contentEditable: true, ref: divPlaceholder, children: placeholder }), showMention && users && users.length > 0 && (jsxRuntime.jsx(Mentions, { users: users, top: mentionTopPosition, onSelect: (user) => {
                                 setShowMention(false);
                                 handleMentionUser(user);
-                            } }))] }), jsxRuntime.jsx(HelperContainer, { children: !isPlaceholder && showCharacterCounter && (jsxRuntime.jsxs(HelperText$2, { isInputLimit: styleLimitExceeded, children: [textLength, "/", limit] })) }), styleLimitExceeded && (jsxRuntime.jsxs(LimitCharsContainer$1, { children: [jsxRuntime.jsx(TagAlert, {}), jsxRuntime.jsx(LimitCharsExceededMessage$1, { children: limitMessageExceeded })] }))] }) }));
+                            }, darkMode: darkMode }))] }), jsxRuntime.jsxs(HelperContainer, { children: [!isPlaceholder && showCharacterCounter && (jsxRuntime.jsxs(HelperText$2, { isInputLimit: styleLimitExceeded, darkMode: darkMode, children: [textLength, "/", limit] })), !isPlaceholder && showEmojiPicker &&
+                            jsxRuntime.jsx(EmojiWrapper, { children: jsxRuntime.jsx(material.IconButton, { onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        setShowPicker(!showPicker);
+                                    }, children: jsxRuntime.jsx(EmojiIcon, {}) }) }), !isPlaceholder && showEmojiPicker &&
+                            jsxRuntime.jsx("div", { onClick: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                }, children: jsxRuntime.jsx(EmojiPicker__default["default"], { theme: darkMode ? EmojiPicker$1.Theme.DARK : EmojiPicker$1.Theme.LIGHT, autoFocusSearch: true, onEmojiClick: (emojiData, event) => {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        handleEmojiSelected(emojiData, event);
+                                    }, open: showPicker, skinTonesDisabled: true, style: { position: 'absolute', right: 0 } }) })] }), styleLimitExceeded && (jsxRuntime.jsxs(LimitCharsContainer$1, { children: [jsxRuntime.jsx(TagAlert, {}), jsxRuntime.jsx(LimitCharsExceededMessage$1, { children: limitMessageExceeded })] }))] }) }));
 }
 
 const HeaderWrapper$1 = styled__default["default"].div `
@@ -5583,17 +5629,17 @@ const Box = styled__default["default"].div `
     justify-content: center;
     align-items: flex-start;
     border-radius: 0px 16px 16px 16px;
-    background-color: #f2f2f2 ;
+    background-color: ${({ darkMode }) => darkMode ? '#272727' : '#f2f2f2'} ;
 `;
 const UserDataContainer = styled__default["default"].div `
     display:flex;
     flex-direction: column;
     width: 100%;
-    heigth: 34px;
+    height: 34px;
     margin-bottom: 8px;
 `;
 const Username = styled__default["default"].h2 `
-    color: var(--neutrals-neutral-1, #222);
+    color: ${({ theme, darkMode }) => darkMode ? theme.colors.shadeWhite : theme.colors.neutralsGrey1};
     font-family: PT Sans;
     font-size: 16px;
     font-style: normal;
@@ -5606,8 +5652,8 @@ const FirstChildUserData = styled__default["default"].div `
     justify-content: space-between;
  `;
 const UserDataLastChild = styled__default["default"].div `
-    display:flex;
-    color: ${({ theme }) => theme.colors.neutralsGrey3};
+    display: flex;
+    color: ${({ theme, darkMode }) => darkMode ? theme.colors.neutralsGrey4 : theme.colors.neutralsGrey3};
     font-family: PT Sans;
     font-size: 12px;
     font-style: normal;
@@ -5615,21 +5661,20 @@ const UserDataLastChild = styled__default["default"].div `
     line-height: normal;
 `;
 const MenuMoreContainer = styled__default["default"].div `
-  border-radius: 8px;
-  height: 32px;
-  width: 24px;
+  border-radius: 50%;
+  height: 36px;
+  width: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 5px;
-  padding: 4px;
   
   &:hover {
-    background-color: #f2f2f2;
+    background-color: ${({ darkMode }) => darkMode ? '#323232' : '#f2f2f2'};
   }
 
 `;
-const LikesContainer = styled__default["default"].div `
+styled__default["default"].div `
     display: flex;
     align-items: center;
     gap: 4px;
@@ -5640,13 +5685,14 @@ const LikesContainer = styled__default["default"].div `
     font-weight: 400;
     line-height: 110%;
 `;
-const IconLikeContainer = styled__default["default"].div `
+styled__default["default"].div `
     & > *:last-child {
-    border-radius: 50%;
-    background-color: #757575;
-    border: 3px solid #757575;
-    width: 14px;
-    height: 14px;
+        border-radius: 50%;
+        background-color: #757575;
+        border: 3px solid #757575;
+        width: 14px;
+        height: 14px;
+    }
 `;
 const RelationContainer = styled__default["default"].div `
     display: flex;
@@ -5679,7 +5725,7 @@ const InteractiveButtonsContainer = styled__default["default"].div `
     line-height: normal;
     
     & > *:last-child {
-        height:24px;
+        /* height:24px; */
         transform: rotate(90deg);
       }
 `;
@@ -5688,26 +5734,25 @@ const FlexButtonContainer = styled__default["default"].div `
     display: flex;
     align-items: center;
     justify-content: center;
-    padding:4px;
-    gap:4px;
-    border-radius: 8px;
+    padding: 8px;
+    border-radius: 100px;
    
     &:hover {
-        background-color: ${({ theme }) => theme.colors.neutralsGrey9};
+        background-color: ${({ theme, darkMode }) => darkMode ? '#272727' : theme.colors.neutralsGrey9};
     }
-        svg {
-            :hover {
-                fill:${({ theme }) => theme.colors.neutralsGrey9};
-                background-color: ${({ theme }) => theme.colors.neutralsGrey9};
-            }
-            :active {
-                stroke:${({ theme }) => theme.colors.neutralsGrey1};
-                background-color:  ${({ theme }) => 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$2 = styled__default["default"].div `
-    color: #444;
+    color: ${({ theme, darkMode }) => darkMode ? theme.colors.neutralsGrey5 : theme.colors.neutralsGrey2};
     font-family: Work Sans;
     font-weight: 400;
     word-break: break-word;
@@ -5723,7 +5768,7 @@ const Text$2 = styled__default["default"].div `
 const TextContainer$2 = styled__default["default"].div `
 `;
 const ShowMore$1 = styled__default["default"].span `
-    color: ${({ theme }) => theme.colors.neutralsGrey2};
+    color: ${({ theme, darkMode }) => darkMode ? theme.colors.neutralsGrey5 : theme.colors.neutralsGrey2};
     font-family: Work Sans;
     font-size: 14px;
     font-style: normal;
@@ -5734,7 +5779,7 @@ const ShowMore$1 = styled__default["default"].span `
 `;
 
 const Button$3 = styled__default["default"].div `
-    ${({ variant, disabled, active, theme, isTooltipActive }) => {
+    ${({ variant, disabled, active, theme, isTooltipActive, darkMode }) => {
     let styleVariant = {
         'primary': styled.css `
                     display: flex;
@@ -5766,7 +5811,7 @@ const Button$3 = styled__default["default"].div `
                     font-weight: 700;
                     font-size: 16px;
                     width: fit-content;
-                    color: ${({ theme }) => disabled ? theme.colors.borderPrimary : theme.colors.neutralsGrey2};
+                    color: ${({ theme }) => disabled ? theme.colors.borderPrimary : (darkMode ? theme.colors.neutralsGrey7 : theme.colors.neutralsGrey2)};
                     cursor: pointer;
                     user-select:none;
                     &:hover {
@@ -5790,15 +5835,15 @@ const Button$3 = styled__default["default"].div `
                 border-radius: 8px;
 
 
-                color: ${({ theme }) => disabled ? theme.colors.borderPrimary : theme.colors.neutralsGrey2};
+                color: ${({ theme }) => disabled ? theme.colors.borderPrimary : (darkMode ? theme.colors.neutralsGrey7 : theme.colors.neutralsGrey2)};
                 cursor: pointer;
                 user-select:none;
                 &:hover {
-                    background-color:  ${({ theme }) => disabled ? theme.colors.borderPrimary : theme.colors.neutralsGrey9};
+                    background-color:  ${({ theme }) => disabled ? theme.colors.borderPrimary : (darkMode ? '#272727' : theme.colors.neutralsGrey9)};
                 }
                 &:active {
-                    color: ${({ theme }) => disabled ? theme.colors.borderPrimary : theme.colors.neutralsGrey1};
-                    background-color:  ${({ theme }) => disabled ? theme.colors.borderPrimary : theme.colors.neutralsGrey9};
+                    color: ${({ theme }) => disabled ? theme.colors.borderPrimary : (darkMode ? theme.colors.neutralsGrey7 : theme.colors.neutralsGrey1)};
+                    background-color:  ${({ theme }) => disabled ? theme.colors.borderPrimary : (darkMode ? '#3D3D3D' : theme.colors.neutralsGrey9)};
                 }
                 ${active && `color : ${theme.colors.primary1}`}
             `,
@@ -5838,9 +5883,9 @@ const Button$3 = styled__default["default"].div `
 }}
 `;
 
-function MiniButton({ variant, label, disabled, onClick, styles, active, tooltipText, }) {
+function MiniButton({ variant, label, disabled, onClick, styles, active, tooltipText, darkMode }) {
     const [isTooltipActive, setIsTooltipActive] = React.useState(false);
-    const generateButtonComponent = () => (jsxRuntime.jsx(Button$3, { onClick: (e) => !disabled && onClick(e), disabled: disabled, variant: variant, style: { ...styles }, active: !!active, isTooltipActive: isTooltipActive, children: label }));
+    const generateButtonComponent = () => (jsxRuntime.jsx(Button$3, { onClick: (e) => !disabled && onClick(e), disabled: disabled, variant: variant, style: { ...styles }, active: !!active, isTooltipActive: isTooltipActive, darkMode: darkMode, children: label }));
     return (jsxRuntime.jsx(styled.ThemeProvider, { theme: { ...FRSTTheme }, children: tooltipText ? (jsxRuntime.jsx(Tooltip$2, { direction: "bottom", content: tooltipText, trigger: "hover", width: tooltipText.length > 18 ? "220px" : "100px", height: "auto", style: { top: '50px', textAlign: 'center' }, setIsActive: setIsTooltipActive, children: generateButtonComponent() })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: generateButtonComponent() })) }));
 }
 
@@ -5875,7 +5920,7 @@ const Container$p = styled__default["default"].div `
     width:100%;
 `;
 const SpanText = styled__default["default"].p `
-    color: #000;
+    color: ${({ darkMode }) => darkMode ? '#EBEBEB' : '#000'};
     font-family: PT Sans;
     font-size: 16px;
     font-style: normal;
@@ -5890,7 +5935,7 @@ const ButtonsContainer = styled__default["default"].div `
     margin-left:auto;
 `;
 
-const InputEdit = ({ placeHolderText, commentText, commentTextWithMention, getSearchUsers, onClickEditButton, limitInput, editButtonText, cancelButtonText, orText, limitMessageExceeded, commentId, group_uuid, setIsModeEdit }) => {
+const InputEdit = ({ placeHolderText, commentText, commentTextWithMention, getSearchUsers, onClickEditButton, limitInput, editButtonText, cancelButtonText, orText, limitMessageExceeded, commentId, group_uuid, setIsModeEdit, darkMode }) => {
     const [comment, setComment] = React.useState(commentText);
     const [CaptureFormattedValue, setCaptureFormattedValue] = React.useState(commentTextWithMention);
     const [captureMentions, setCaptureMentions] = React.useState([]);
@@ -5924,26 +5969,27 @@ const InputEdit = ({ placeHolderText, commentText, commentTextWithMention, getSe
     };
     return (jsxRuntime.jsxs(Container$p, { children: [jsxRuntime.jsx(InputContainer$1, { ref: inputRef, style: { width: '100%' }, children: jsxRuntime.jsx(InputComment$1, { 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 }) }), jsxRuntime.jsxs(ButtonsContainer, { children: [jsxRuntime.jsx(MiniButton, { label: cancelButtonText, onClick: () => setIsModeEdit(false), variant: 'secondary' }), jsxRuntime.jsx(SpanText, { children: orText }), jsxRuntime.jsx(MiniButton, { disabled: comment.length <= 0 || comment.length > limitInput || isLoading, label: editButtonText, onClick: () => handlePublish(), variant: "primary", styles: {} })] }), isLoading && jsxRuntime.jsx(Loading, {})] }));
+                    }, 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 }) }), jsxRuntime.jsxs(ButtonsContainer, { children: [jsxRuntime.jsx(MiniButton, { darkMode: darkMode, label: cancelButtonText, onClick: () => setIsModeEdit(false), variant: 'secondary' }), jsxRuntime.jsx(SpanText, { darkMode: darkMode, children: orText }), jsxRuntime.jsx(MiniButton, { disabled: comment.length <= 0 || comment.length > limitInput || isLoading, label: editButtonText, onClick: () => handlePublish(), variant: "primary", styles: {} })] }), isLoading && jsxRuntime.jsx(Loading, {})] }));
 };
 
-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 }) => {
+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 }) => {
     const iDCommentPosted = commentId ? commentId.toString() : `IDCommentPosted-${createUUID()}`;
     const [isModeEdit, setIsModeEdit] = React.useState(false);
     const [loadingLike, setLoadingLike] = React.useState(false);
-    const itsLiked = likes?.some((like) => like.user_uuid === loggedInUser.id);
-    const likesCount = likes?.length || 0;
+    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: jsxRuntime.jsx(EditIcon, { fill: "#222" }),
-        onClick: () => setIsModeEdit(true)
+        startIcon: jsxRuntime.jsx(EditIcon, { fill: darkMode ? '#FFFFFF' : "#222" }),
+        onClick: () => setIsModeEdit(true),
+        color: darkMode ? '#FFFFFF' : "#222"
     };
     const exclude = {
         description: deleteText,
-        startIcon: jsxRuntime.jsx(TrashIconNew, { fill: "#C1341A" }),
+        startIcon: jsxRuntime.jsx(TrashIconNew, { fill: darkMode ? '#FF4D3E' : "#C1341A" }),
         onClick: () => actionDeleteComment(commentUuid),
-        color: '#C1341A'
+        color: darkMode ? '#FF4D3E' : '#C1341A'
     };
     const authorOptions = [edit, exclude];
     const ownerPost = [exclude];
@@ -5962,7 +6008,7 @@ const CommentaryBoxV2 = ({ userName, imgProfile, userCompany, userOffice, showMo
     const handleUnlike = async () => {
         try {
             setLoadingLike(true);
-            await actionUnlike(likeId);
+            await actionUnlike(likeId ? likeId : commentId.toString());
         }
         catch (error) {
             console.log('error:', error);
@@ -6002,16 +6048,51 @@ const CommentaryBoxV2 = ({ userName, imgProfile, userCompany, userOffice, showMo
                                     left: '16px',
                                     top: '40px',
                                     backgroundColor: '#D1D5DB'
-                                } }))] }), isModeEdit ? (jsxRuntime.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 })) : (jsxRuntime.jsxs(Box, { id: `comment_${commentUuid}`, children: [jsxRuntime.jsxs(UserDataContainer, { children: [jsxRuntime.jsxs(FirstChildUserData, { children: [jsxRuntime.jsx(Username, { children: userName }), likesCount > 0 && (jsxRuntime.jsxs(LikesContainer, { children: [jsxRuntime.jsx(IconLikeContainer, { children: jsxRuntime.jsx(IconLikeFilled, { fill: "#fff", stroke: "#fff", customColor_1: '#757575', width: "16px", height: "16px" }) }), jsxRuntime.jsx("p", { children: likesCount })] }))] }), jsxRuntime.jsxs(UserDataLastChild, { children: [userOffice && userOffice, " ", userCompany && `• ${userCompany}`, " ", howLongAgo && `• ${howLongAgo}`] })] }), relationToPhaseText && jsxRuntime.jsx(RelationContainer, { children: relationToPhaseText }), jsxRuntime.jsxs(TextContainer$2, { id: "textContainerId", children: [jsxRuntime.jsx(Text$2, { style: isExpanded ? { display: 'block' } : { display: '-webkit-box' }, id: iDCommentPosted, dangerouslySetInnerHTML: {
+                                } }))] }), isModeEdit ? (jsxRuntime.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 })) : (jsxRuntime.jsxs(Box, { id: `comment_${commentUuid}`, darkMode: darkMode, children: [jsxRuntime.jsxs(UserDataContainer, { children: [jsxRuntime.jsx(FirstChildUserData, { children: jsxRuntime.jsx(Username, { darkMode: darkMode, children: userName }) }), jsxRuntime.jsxs(UserDataLastChild, { darkMode: darkMode, children: [userOffice && userOffice, " ", userCompany && `• ${userCompany}`, " ", howLongAgo && `• ${howLongAgo}`] })] }), relationToPhaseText && jsxRuntime.jsx(RelationContainer, { children: relationToPhaseText }), jsxRuntime.jsxs(TextContainer$2, { id: "textContainerId", children: [jsxRuntime.jsx(Text$2, { style: isExpanded ? { display: 'block' } : { display: '-webkit-box' }, id: iDCommentPosted, dangerouslySetInnerHTML: {
                                             __html: buildStringWithLinkHTML(commentTextWithMention ? commentTextWithMention : commentText)
-                                        } }), jsxRuntime.jsx(ShowMore$1, { isVisible: isEllipsisVisible, onClick: toggleExpand, children: isExpanded ? showLessText : showMoreText })] })] }))] }), !isModeEdit && (jsxRuntime.jsxs(InteractiveButtonsContainer, { style: isMainComment ? { marginLeft: '55px' } : {}, children: [showLikeButton && (jsxRuntime.jsxs(FlexButtonContainer, { onClick: itsLiked ? handleUnlike : handleLike, style: {
-                            cursor: loadingLike ? 'not-allowed !important' : 'pointer',
-                            pointerEvents: loadingLike ? 'none' : 'auto'
-                        }, children: [itsLiked ? jsxRuntime.jsx(IconLikeFilled, {}) : jsxRuntime.jsx(IconLikeLine, { fill: "#444" }), jsxRuntime.jsx(MiniButton, { variant: "terciary", onClick: () => { }, label: likeButtonText, active: itsLiked, styles: {
-                                    padding: '0px',
-                                    cursor: loadingLike ? 'not-allowed !important' : 'pointer',
-                                    pointerEvents: loadingLike ? 'none' : 'auto'
-                                } })] })), jsxRuntime.jsx(MiniButton, { variant: "terciary", onClick: actionAnswer, label: answerButtonText }), showOptions ? (isAuthor ? (jsxRuntime.jsx(MenuMoreContainer, { children: jsxRuntime.jsx(MenuMore, { options: authorOptions, style: {}, closeAfterClick: true, isHover: false }) })) : isOwnerPost ? (jsxRuntime.jsx(MenuMoreContainer, { children: jsxRuntime.jsx(MenuMore, { options: ownerPost, style: {}, closeAfterClick: true, isHover: false }) })) : (jsxRuntime.jsx(MenuMoreContainer, { children: jsxRuntime.jsx(MenuMore, { options: [], isHover: false }) }))) : (jsxRuntime.jsx("div", {}))] }))] }));
+                                        }, darkMode: darkMode }), jsxRuntime.jsx(ShowMore$1, { darkMode: darkMode, isVisible: isEllipsisVisible, onClick: toggleExpand, children: isExpanded ? showLessText : showMoreText })] })] }))] }), !isModeEdit && (jsxRuntime.jsxs(InteractiveButtonsContainer, { style: isMainComment ? { marginLeft: '55px' } : {}, children: [showLikeButton && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.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: 'PT Sans',
+                                            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: jsxRuntime.jsx(FlexButtonContainer, { onClick: itsLiked ? handleUnlike : handleLike, style: {
+                                        cursor: loadingLike ? 'not-allowed !important' : 'pointer',
+                                        pointerEvents: loadingLike ? 'none' : 'auto'
+                                    }, darkMode: darkMode, children: itsLiked ?
+                                        jsxRuntime.jsx(IconLikeFilled, { customColor_1: darkMode ? '#151515' : '#FFFFFF' })
+                                        :
+                                            jsxRuntime.jsx(IconLikeLine, { fill: darkMode ? "#EBEBEB" : "#444" }) }) }), jsxRuntime.jsx("span", { style: { color: itsLiked ? '#F26818' : (darkMode ? "#EBEBEB" : "#444"),
+                                    fontFamily: 'PT Sans',
+                                    fontSize: '14px',
+                                    fontWeight: 700
+                                }, children: likesCount })] })), jsxRuntime.jsx(MiniButton, { darkMode: darkMode, variant: "terciary", onClick: actionAnswer, label: answerButtonText, styles: { color: darkMode ? '#EBEBEB' : '#444444' } }), showOptions ? (isAuthor ? (jsxRuntime.jsx(MenuMoreContainer, { darkMode: darkMode, children: jsxRuntime.jsx(MenuMore, { isDarkMode: darkMode, options: authorOptions, style: {}, closeAfterClick: true, isHover: false }) })) : isOwnerPost ? (jsxRuntime.jsx(MenuMoreContainer, { darkMode: darkMode, children: jsxRuntime.jsx(MenuMore, { isDarkMode: darkMode, options: ownerPost, style: {}, closeAfterClick: true, isHover: false }) })) : (jsxRuntime.jsx(MenuMoreContainer, { darkMode: darkMode, children: jsxRuntime.jsx(MenuMore, { isDarkMode: darkMode, options: [], isHover: false }) }))) : (jsxRuntime.jsx("div", {}))] }))] }));
 };
 
 const Container$o = styled__default["default"].div `
@@ -6031,21 +6112,7 @@ display:flex;
 flex-direction:column;
 `;
 const ViewReplysButtonContainer = styled__default["default"].div `
-color: #444444;
-font-family: PT Sans;
-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: #444444;
+  color: ${({ darkMode }) => darkMode ? '#EBEBEB' : '#444444'};
   font-family: PT Sans;
   font-size: 14px;
   font-style: normal;
@@ -6054,13 +6121,26 @@ span{
   position: relative;
   left: 59px;
   margin-top: 6px;
-  max-width: 150px !important;
+  span{
+      cursor:pointer;
+  }
+
+  @media screen  and (max-width:768px){
+    color: ${({ darkMode }) => darkMode ? '#EBEBEB' : '#444444'};
+    font-family: PT Sans;
+    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__default["default"].div `
-width: ${({ width }) => (width ? `${width}px` : 'auto')};
-margin-left:60px;
+  width: ${({ width }) => (width ? `${width}px` : 'auto')};
+  margin-left:60px;
 `;
 
 const InputContainer = styled__default["default"].div `
@@ -6073,7 +6153,7 @@ const Container$n = styled__default["default"].div `
     justify-content:center;
 `;
 
-const InputReply = ({ placeHolderText, getSearchUsers, onClickPublishButton, parentId, limitInput, publishButtonText, replyMentionedUser, imgProfile, styles, handleHiddenInput, group_uuid, limitMessageExceeded }) => {
+const InputReply = ({ placeHolderText, getSearchUsers, onClickPublishButton, parentId, limitInput, publishButtonText, replyMentionedUser, imgProfile, styles, handleHiddenInput, group_uuid, limitMessageExceeded, darkMode }) => {
     const [comment, setComment] = React.useState('');
     const [CaptureFormattedValue, setCaptureFormattedValue] = React.useState('');
     const [captureMentions, setCaptureMentions] = React.useState([]);
@@ -6129,20 +6209,23 @@ const InputReply = ({ placeHolderText, getSearchUsers, onClickPublishButton, par
     };
     return (jsxRuntime.jsxs(Container$n, { style: { ...styles }, children: [jsxRuntime.jsx(Avatar, { src: imgProfile, size: "32px", style: { marginTop: '16px', marginRight: '8px' } }), jsxRuntime.jsxs(InputContainer, { ref: inputRef, style: { width: '100%', marginTop: '16px' }, children: [jsxRuntime.jsx(InputComment$1, { 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 }), jsxRuntime.jsx(MiniButton, { disabled: comment.length <= 0 || comment.length > limitInput || isLoading, label: publishButtonText, onClick: () => handlePublish(), variant: "primary", styles: { marginLeft: 'auto', marginTop: '14px' } }), isLoading && jsxRuntime.jsx(Loading, {})] })] }));
+                        }, 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 }), jsxRuntime.jsx(MiniButton, { disabled: comment.length <= 0 || comment.length > limitInput || isLoading, label: publishButtonText, onClick: () => handlePublish(), variant: "primary", styles: { marginLeft: 'auto', marginTop: '14px' } }), isLoading && jsxRuntime.jsx(Loading, {})] })] }));
 };
 
-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 }) => {
+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 }) => {
     const [showAnswers, setShowAnswers] = React.useState(threadOpenByDefault);
     const [showReplyInput, setShowReplyInput] = React.useState(false);
     const handleLoadMoreReplies = () => {
         setShowAnswers(true);
     };
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.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 }), replies.length > 0 && !showAnswers && (jsxRuntime.jsx(ViewReplysButtonContainer, { style: { left: '44px' }, children: jsxRuntime.jsx("span", { onClick: handleLoadMoreReplies, children: `${toViewText} ${replies.length} ${replies.length === 1 ? answerText : answersText}` }) })), showReplyInput && (jsxRuntime.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: commentData.id, handleHiddenInput: () => setShowReplyInput(false), group_uuid: group_uuid, limitMessageExceeded: limitMessageExceeded })), showAnswers &&
-                replies?.map((reply, index) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.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 }, reply.id) })))] }));
+    const handleHideReplies = () => {
+        setShowAnswers(false);
+    };
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.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 }), replies.length > 0 && !showAnswers && (jsxRuntime.jsx(ViewReplysButtonContainer, { style: { left: '44px' }, darkMode: darkMode, children: jsxRuntime.jsx("span", { onClick: handleLoadMoreReplies, children: `${toViewText} ${replies.length} ${replies.length === 1 ? answerText : answersText}` }) })), replies.length > 0 && showAnswers && toHideText && (jsxRuntime.jsx(ViewReplysButtonContainer, { style: { left: '44px' }, darkMode: darkMode, children: jsxRuntime.jsx("span", { onClick: handleHideReplies, children: `${toHideText} ${replies.length} ${replies.length === 1 ? answerText : answersText}` }) })), showReplyInput && (jsxRuntime.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: commentData.id, handleHiddenInput: () => setShowReplyInput(false), group_uuid: group_uuid, limitMessageExceeded: limitMessageExceeded, darkMode: darkMode })), showAnswers &&
+                replies?.map((reply, index) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.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 }, reply.id) })))] }));
 };
 
-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 }) => {
+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 }) => {
     const threadOpenByDefault = mainComment?.thread_open;
     const [showAnswers, setShowAnswers] = React.useState(false);
     const [showReplysOnClickCounter, setReplysOnClickCounter] = React.useState(0);
@@ -6158,6 +6241,11 @@ const ThreadComments = ({ mainComment, listReplyComments, placeHolderText, onCli
         }
         setShowAnswers(true);
     };
+    const handleHideReplies = () => {
+        setVisibleReplies(0);
+        setReplysOnClickCounter(0);
+        setShowAnswers(false);
+    };
     const handleHiddenInput = () => {
         setShowReplyInput(false);
     };
@@ -6171,7 +6259,7 @@ const ThreadComments = ({ mainComment, listReplyComments, placeHolderText, onCli
         }
     }, [threadOpenByDefault]);
     const isMainCommentUser = mainComment.user?.uuid === loggedInUser?.id;
-    return (jsxRuntime.jsx(Container$o, { style: styles, children: jsxRuntime.jsxs(CommentarysContainer, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.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: true, likeButtonText: likeButtonText, likes: mainComment.likes }), listReplyComments.length > visibleReplies && (jsxRuntime.jsx(ViewReplysButtonContainer, { id: "text-viwMsg", children: jsxRuntime.jsx("span", { onClick: handleLoadMoreReplies, children: showReplysOnClickCounter === 0 ? showReplysButtonText : showMoreReplysButtonText }) })), showReplyInput && (jsxRuntime.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 }))] }), showAnswers && visibleReplies && (jsxRuntime.jsx(RepplysContainer, { style: { marginTop: '6px' }, children: listReplyComments.slice(0, visibleReplies).map((replyComment) => (jsxRuntime.jsx("div", { children: jsxRuntime.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 }) }, replyComment.id))) }))] }) }));
+    return (jsxRuntime.jsx(Container$o, { style: styles, children: jsxRuntime.jsxs(CommentarysContainer, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.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: true, likeButtonText: likeButtonText, likes: mainComment.likes, darkMode: darkMode, isLiked: mainComment?.isLiked, totalLikes: mainComment?.totalLikes }), listReplyComments.length > visibleReplies && (jsxRuntime.jsx(ViewReplysButtonContainer, { id: "text-viwMsg", darkMode: darkMode, children: jsxRuntime.jsx("span", { onClick: handleLoadMoreReplies, children: showReplysOnClickCounter === 0 ? showReplysButtonText : showMoreReplysButtonText }) })), showAnswers && visibleReplies && hideRepliesText && (jsxRuntime.jsx(ViewReplysButtonContainer, { id: "text-viwMsg", darkMode: darkMode, children: jsxRuntime.jsx("span", { onClick: handleHideReplies, children: hideRepliesText }) })), showReplyInput && (jsxRuntime.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 }))] }), showAnswers && visibleReplies && (jsxRuntime.jsx(RepplysContainer, { style: { marginTop: '6px' }, children: listReplyComments.slice(0, visibleReplies).map((replyComment) => (jsxRuntime.jsx("div", { children: jsxRuntime.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 }) }, replyComment.id))) }))] }) }));
 };
 
 const ButtonCheckmark = styled__default["default"].div `
@@ -23575,11 +23663,11 @@ const TextContainer = styled__default["default"].div `
     text-overflow: ellipsis;
     max-width: 100%;
 `;
-const selectTag = styled__default["default"].div `
+const SelectTag = styled__default["default"].div `
     display: inline-flex;
     align-items: center;
     min-height: 32px;
-    background: ${({ isVariant }) => (isVariant ? '#6A3F86' : '#00828c')};
+    background: ${({ isVariant, tagColor }) => (tagColor ? tagColor : isVariant ? '#6A3F86' : '#00828c')};
     border-radius: 4px;
     gap: 8px;
     padding: 4px 8px;
@@ -23587,7 +23675,7 @@ const selectTag = styled__default["default"].div `
     z-index: 999;
 
     :hover {
-        background: ${({ isVariant }) => (isVariant ? '#6A3F86' : '#1f6e74')};
+        background: ${({ isVariant, tagColor }) => (tagColor ? tagColor : isVariant ? '#6A3F86' : '#1f6e74')};
     }
 
     & > p {
@@ -23699,46 +23787,67 @@ var css_248z = ".p-component,\n.p-component * {\n  box-sizing: border-box;\n}\n\
 styleInject(css_248z);
 
 function DropdownMultiselect(props) {
-    const { canShowAvatar = true, useTextFilter = false, searchTerm, hiddenAddAll, variantModeDescritpion, width } = props;
+    const { canShowAvatar = true, useTextFilter = false, searchTerm, hiddenAddAll, variantModeDescritpion, width, listItems, selectedDefault, getSelectedItems, onSearch, tagColor } = props;
     const [selectedValues, setSelectedValues] = React.useState([]);
     const [textFilter, setTextFilter] = React.useState(searchTerm || '');
-    const [listItemsFilter, setListItemsFilter] = React.useState(props.listItems);
+    const [listItemsFilter, setListItemsFilter] = React.useState(listItems);
     const [showModal, setShowModal] = React.useState(false);
     const [listFilterSearch, setListFilterSearch] = React.useState();
     const [lazyLoading, setLazyLoading] = React.useState(false);
     const [lazyItems, setLazyItems] = React.useState([]);
     const loadLazyTimeout = React.useRef(null);
+    // Atualiza a lista de itens quando props.listItems muda
     React.useEffect(() => {
-        setListFilterSearch(props.listItems);
-    }, [props.listItems]);
+        if (listItems) {
+            setListItemsFilter(listItems);
+            setListFilterSearch(listItems);
+        }
+    }, [listItems]);
+    // Atualiza o termo de busca quando searchTerm muda
     React.useEffect(() => {
-        setTextFilter(searchTerm || '');
+        if (searchTerm !== undefined) {
+            setTextFilter(searchTerm || '');
+        }
     }, [searchTerm]);
+    // Filtra os itens quando useTextFilter está ativado
     React.useEffect(() => {
-        if (!useTextFilter)
+        if (!useTextFilter || !listItemsFilter)
             return;
-        let temp = listItemsFilter.filter((resp) => resp.name.toLowerCase().includes(textFilter.toLowerCase()));
+        const temp = listItemsFilter.filter((resp) => resp.name.toLowerCase().includes(textFilter.toLowerCase()));
         setListFilterSearch(temp);
-    }, [textFilter]);
+    }, [textFilter, listItemsFilter, useTextFilter]);
+    // Inicializa valores selecionados com selectedDefault
     React.useEffect(() => {
-        if (props.selectedDefault) {
-            setSelectedValues(props?.selectedDefault);
+        if (selectedDefault) {
+            setSelectedValues(selectedDefault);
         }
-    }, [props?.selectedDefault]);
-    React.useEffect(() => {
-        setListItemsFilter(props.listItems);
-    }, [props.listItems]);
+    }, [selectedDefault]);
+    // Notifica o componente pai sobre alterações nos valores selecionados
+    // Envolvendo em um useCallback para evitar loops infinitos
+    const notifySelectedItemsChange = React.useCallback(() => {
+        if (getSelectedItems) {
+            getSelectedItems(selectedValues);
+        }
+    }, [selectedValues, getSelectedItems]);
     React.useEffect(() => {
-        props.getSelectedItems(selectedValues);
-    }, [selectedValues]);
+        notifySelectedItemsChange();
+    }, [notifySelectedItemsChange]);
     const removeSelectedValue = (id) => {
         setSelectedValues((prev) => {
-            prev = [...prev];
-            const index = prev.map((value) => value.id).indexOf(id);
-            prev.splice(index, 1);
-            return prev;
+            const newValues = [...prev];
+            const index = newValues.map((value) => value.id).indexOf(id);
+            if (index !== -1) {
+                newValues.splice(index, 1);
+            }
+            return newValues;
         });
     };
+    const handleSearchChange = (value) => {
+        setTextFilter(value);
+        if (onSearch) {
+            onSearch(value);
+        }
+    };
     const itemTemplate = (item) => {
         const fullText = variantModeDescritpion
             ? `${item?.name} ${item?.description ? `- ${item.description}` : ''} ${item?.subDescription ? `- ${item.subDescription}` : ''} ${!!item?.isVariant ? ' (Externo)' : ''}`
@@ -23747,43 +23856,38 @@ function DropdownMultiselect(props) {
                         (item?.isVariant ? jsxRuntime.jsx(ExternalAvatar, {}) : jsxRuntime.jsx(Avatar, { src: item?.avatar, size: "24px" })), jsxRuntime.jsxs(TextContainer, { children: [item?.name, variantModeDescritpion ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!item?.description && ` - ${item.description}`, !!item?.subDescription && ` - ${item.subDescription}`, !!item?.isVariant && jsxRuntime.jsx("span", { style: { color: '#757575' }, children: ` (Externo)` })] })) : (item?.description && jsxRuntime.jsxs("span", { style: { color: '#757575' }, children: [" (", item.description, ") "] }))] })] }) }));
     };
     const selectTemplate = (option) => {
-        const pessoasAMais = selectedValues?.length - props.maxSelectedShow;
-        if (option) {
-            return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: option.map((item, index) => {
-                    if (index < props.maxSelectedShow) {
-                        return props.optionLayout ? (props.optionLayout(item)) : (jsxRuntime.jsxs(selectTag, { id: "tag-container", isVariant: !!item?.isVariant, children: [canShowAvatar &&
-                                    (item?.isVariant ? (externaAvatarBackgroundWhite) : (jsxRuntime.jsx(Avatar, { src: item?.avatar, size: "24px" }))), jsxRuntime.jsxs("p", { children: [" ", item?.name, " "] }), jsxRuntime.jsx(material.IconButton, { id: "close-icon", onClick: () => removeSelectedValue(item.id), children: jsxRuntime.jsx(CloseIcon, { width: "8", height: "8", fill: "#FFFFFF" }) })] }, index));
-                    }
-                    else if (index === props?.maxSelectedShow) {
-                        return (jsxRuntime.jsx(overShowInfo, { onClick: () => setShowModal(true), id: "number-people", children: jsxRuntime.jsx("p", { children: `+ ${pessoasAMais} ${pessoasAMais > 1 ? props?.people : props?.person}` }) }, index));
-                    }
-                }) }));
-        }
-        else {
+        if (!option || option.length === 0)
             return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-        }
+        const pessoasAMais = selectedValues?.length - props.maxSelectedShow;
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: option.map((item, index) => {
+                if (index < props.maxSelectedShow) {
+                    return props.optionLayout ? (props.optionLayout(item)) : (jsxRuntime.jsxs(SelectTag, { id: "tag-container", isVariant: !!item?.isVariant, tagColor: tagColor, children: [canShowAvatar &&
+                                (item?.isVariant ? (externaAvatarBackgroundWhite) : (jsxRuntime.jsx(Avatar, { src: item?.avatar, size: "24px" }))), jsxRuntime.jsxs("p", { children: [" ", item?.name, " "] }), jsxRuntime.jsx(material.IconButton, { id: "close-icon", onClick: () => removeSelectedValue(item.id), children: jsxRuntime.jsx(CloseIcon, { width: "8", height: "8", fill: "#FFFFFF" }) })] }, index));
+                }
+                else if (index === props?.maxSelectedShow) {
+                    return (jsxRuntime.jsx(overShowInfo, { onClick: () => setShowModal(true), id: "number-people", children: jsxRuntime.jsx("p", { children: `+ ${pessoasAMais} ${pessoasAMais > 1 ? props?.people : props?.person}` }) }, index));
+                }
+                return null;
+            }) }));
+    };
+    const handleSelectAll = () => {
+        if (!listFilterSearch)
+            return;
+        setSelectedValues((prev) => {
+            const currentIds = new Set(prev.map(item => item.id));
+            const newItems = listFilterSearch.filter(value => !currentIds.has(value.id));
+            return [...prev, ...newItems];
+        });
     };
     const handleTemplateHeader = () => {
-        const selectedItems = selectedValues;
-        selectedItems ? selectedItems?.length : 0;
-        return (jsxRuntime.jsxs(searchAndButton, { children: [jsxRuntime.jsx("div", { style: { marginBottom: hiddenAddAll ? '0rem' : '1rem' }, children: jsxRuntime.jsx(SearchField, { placeholder: props.searchSelectPlaceholder ? props.searchSelectPlaceholder : 'Buscar', className: null, handleClickButton: null, isButton: true, hasSearchIcon: true, value: textFilter, onChange: (e) => {
-                            props.onSearch(e.target.value);
-                            setTextFilter(e.target.value);
-                        } }) }), props.listItems?.length > 0 && !hiddenAddAll ? (jsxRuntime.jsx(Button$5, { id: "select-all", variant: 'link', label: props.btnSelectAllText ? props.btnSelectAllText : 'Selecionar todos', disabled: false, handleClick: () => {
-                        setSelectedValues([
-                            ...selectedValues,
-                            ...listFilterSearch.filter((value) => {
-                                if (!selectedValues.find((item) => item.id === value.id)) {
-                                    return value;
-                                }
-                            })
-                        ]);
-                    } })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}))] }));
+        return (jsxRuntime.jsxs(searchAndButton, { children: [jsxRuntime.jsx("div", { style: { marginBottom: hiddenAddAll ? '0rem' : '1rem' }, children: jsxRuntime.jsx(SearchField, { placeholder: props.searchSelectPlaceholder ? props.searchSelectPlaceholder : 'Buscar', className: null, handleClickButton: null, isButton: true, hasSearchIcon: true, value: textFilter, onChange: (e) => handleSearchChange(e.target.value) }) }), listFilterSearch?.length > 0 && !hiddenAddAll ? (jsxRuntime.jsx(Button$5, { id: "select-all", variant: 'link', label: props.btnSelectAllText ? props.btnSelectAllText : 'Selecionar todos', disabled: false, handleClick: handleSelectAll })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}))] }));
     };
     const selectValuesModal = () => {
-        return (jsxRuntime.jsx(material.Modal, { open: showModal, onClose: () => setShowModal(false), children: jsxRuntime.jsxs(modalContainer, { id: "container-modal", children: [jsxRuntime.jsx(modalHeader, { id: "header-people", children: jsxRuntime.jsxs("p", { children: [' ', props.modalTitle ? props.modalTitle : 'Este grupo é administrado por', ' ', selectedValues.length, " ", selectedValues.length > 1 ? props.people : props.person, ' '] }) }), jsxRuntime.jsx(modalContent, { children: selectedValues.map((item, index) => {
+        if (!selectedValues || !showModal)
+            return null;
+        return (jsxRuntime.jsx(material.Modal, { open: showModal, onClose: () => setShowModal(false), children: jsxRuntime.jsxs(modalContainer, { id: "container-modal", children: [jsxRuntime.jsx(modalHeader, { id: "header-people", children: jsxRuntime.jsxs("p", { children: [props.modalTitle ? props.modalTitle : 'Este grupo é administrado por', ' ', selectedValues.length, " ", selectedValues.length > 1 ? props.people : props.person, ' '] }) }), jsxRuntime.jsx(modalContent, { children: selectedValues.map((item, index) => {
                             return (jsxRuntime.jsxs(modalCards, { style: { background: index % 2 === 0 ? '#F2F2F2' : '#FFF' }, children: [jsxRuntime.jsxs("div", { style: { display: 'flex', gap: '12px' }, children: [canShowAvatar &&
-                                                (item?.isVariant ? (jsxRuntime.jsx(ExternalAvatar, { size: "50px" })) : (jsxRuntime.jsx(Avatar, { src: item?.avatar, size: "50px" }))), jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '4px' }, children: [jsxRuntime.jsxs(cardTitle, { children: [" ", item?.name, " "] }), jsxRuntime.jsxs(cardDescription, { children: [" ", item?.description, " "] }), jsxRuntime.jsxs(cardDescription, { children: [" ", item?.subDescription, " "] })] })] }), jsxRuntime.jsxs("div", { id: "remove-people-admin", style: { display: 'flex', cursor: 'pointer' }, onClick: () => removeSelectedValue(item?.id), children: [jsxRuntime.jsx(Trash, { fill: "#A50000", width: "24", height: "24" }), jsxRuntime.jsxs(cardTitle, { style: { color: '#A50000' }, children: [' ', props?.removeModalText ? props.removeModalText : 'Remover', ' '] })] })] }, index));
+                                                (item?.isVariant ? (jsxRuntime.jsx(ExternalAvatar, { size: "50px" })) : (jsxRuntime.jsx(Avatar, { src: item?.avatar, size: "50px" }))), jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '4px' }, children: [jsxRuntime.jsxs(cardTitle, { children: [" ", item?.name, " "] }), jsxRuntime.jsxs(cardDescription, { children: [" ", item?.description, " "] }), jsxRuntime.jsxs(cardDescription, { children: [" ", item?.subDescription, " "] })] })] }), jsxRuntime.jsxs("div", { id: "remove-people-admin", style: { display: 'flex', cursor: 'pointer' }, onClick: () => removeSelectedValue(item?.id), children: [jsxRuntime.jsx(Trash, { fill: "#A50000", width: "24", height: "24" }), jsxRuntime.jsxs(cardTitle, { style: { color: '#A50000' }, children: [props?.removeModalText ? props.removeModalText : 'Remover', ' '] })] })] }, index));
                         }) }), jsxRuntime.jsx(closeModal, { children: jsxRuntime.jsx(material.IconButton, { id: "close-modal", onClick: () => setShowModal(false), children: jsxRuntime.jsx(CloseIcon, {}) }) })] }) }));
     };
     const onLazyLoad = (event) => {
@@ -23802,29 +23906,30 @@ function DropdownMultiselect(props) {
             setLazyLoading(false);
         }, Math.random() * 500 + 250);
     };
-    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs(containerSelect, { style: { ...props.style }, id: "container-select", children: [selectedValues?.length > 0 && (jsxRuntime.jsxs(headerSelect, { children: [selectTemplate(selectedValues), selectedValues?.length > 1 && (jsxRuntime.jsx("div", { style: { zIndex: 999, position: 'absolute', right: 40 }, id: "remove-all-selected", children: jsxRuntime.jsx(Tooltip$2, { content: props.removeItemsToolTip ? props.removeItemsToolTip : 'Excluir todos', direction: "bottom", trigger: "hover", style: { height: 'auto' }, children: jsxRuntime.jsx(material.IconButton, { onClick: () => setSelectedValues([]), children: jsxRuntime.jsx(Trash, { fill: "#9C9C9C" }) }) }) }))] })), jsxRuntime.jsx(customSelect, { onClick: () => setTextFilter(''), children: jsxRuntime.jsx(multiselect.MultiSelect, { id: "list-selected", panelStyle: {
+    const renderVirtualScrollerOptions = () => {
+        if (!props.activeLazyLoad)
+            return null;
+        return {
+            lazy: true,
+            onLazyLoad: onLazyLoad,
+            itemSize: 50,
+            showLoader: true,
+            loading: lazyLoading,
+            delay: 100,
+            loadingTemplate: (option) => (jsxRuntime.jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: 2,
+                    height: '50px'
+                }, children: jsxRuntime.jsx(material.Skeleton, { width: option.even ? '70%' : '60%', height: '2rem' }) }))
+        };
+    };
+    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs(containerSelect, { style: { ...props.style }, id: "container-select", children: [selectedValues?.length > 0 && (jsxRuntime.jsxs(headerSelect, { children: [selectTemplate(selectedValues), selectedValues?.length > 1 && (jsxRuntime.jsx("div", { style: { zIndex: 999, position: 'absolute', right: 40 }, id: "remove-all-selected", children: jsxRuntime.jsx(Tooltip$2, { content: props.removeItemsToolTip ? props.removeItemsToolTip : 'Excluir todos', direction: "bottom", trigger: "hover", style: { height: 'auto' }, children: jsxRuntime.jsx(material.IconButton, { onClick: () => setSelectedValues([]), children: jsxRuntime.jsx(Trash, { fill: "#9C9C9C" }) }) }) }))] })), jsxRuntime.jsx(customSelect, { onClick: () => textFilter !== '' && setTextFilter(''), children: jsxRuntime.jsx(multiselect.MultiSelect, { id: "list-selected", panelStyle: {
                             display: props.isModalOpen !== undefined ? (props.isModalOpen ? 'block' : 'none') : 'block',
                             background: '#fff'
                         }, value: selectedValues, options: listFilterSearch, onChange: (e) => setSelectedValues(e.value), placeholder: props.selectPlaceholder ? props.selectPlaceholder : 'Selecione aqui', className: "custom-multiselect", dropdownIcon: jsxRuntime.jsx(DropdownIcon, { fill: FRSTTheme['colors'].shadeBlack }), panelHeaderTemplate: handleTemplateHeader(), itemTemplate: itemTemplate, disabled: props.isDisabled, maxSelectedLabels: 0, selectedItemsLabel: " ", style: {
                             border: selectedValues?.length > 0 ? 'none' : `1px solid ${FRSTTheme['colors'].borderPrimary}`
-                        }, virtualScrollerOptions: !props.activeLazyLoad
-                            ? null
-                            : {
-                                lazy: true,
-                                onLazyLoad: onLazyLoad,
-                                itemSize: 50,
-                                showLoader: true,
-                                loading: lazyLoading,
-                                delay: 100,
-                                loadingTemplate: (option) => {
-                                    return (jsxRuntime.jsx("div", { style: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            padding: 2,
-                                            height: '50px'
-                                        }, children: jsxRuntime.jsx(material.Skeleton, { width: option.even ? '70%' : '60%', height: '2rem' }) }));
-                                }
-                            } }) }), selectedValues && selectValuesModal()] }) }));
+                        }, virtualScrollerOptions: renderVirtualScrollerOptions() }) }), selectValuesModal()] }) }));
 }
 const ExternalAvatar = ({ size = '24' }) => {
     return (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 25 24", fill: "white", children: [jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M12.5231 0.333496C6.08311 0.333496 0.856445 5.56016 0.856445 12.0002C0.856445 18.4402 6.08311 23.6668 12.5231 23.6668C18.9631 23.6668 24.1898 18.4402 24.1898 12.0002C24.1898 5.56016 18.9631 0.333496 12.5231 0.333496ZM12.5231 3.8335C14.4598 3.8335 16.0231 5.39683 16.0231 7.3335C16.0231 9.27016 14.4598 10.8335 12.5231 10.8335C10.5864 10.8335 9.02311 9.27016 9.02311 7.3335C9.02311 5.39683 10.5864 3.8335 12.5231 3.8335ZM12.5231 20.4002C9.60645 20.4002 7.02811 18.9068 5.52311 16.6435C5.55811 14.3218 10.1898 13.0502 12.5231 13.0502C14.8448 13.0502 19.4881 14.3218 19.5231 16.6435C18.0181 18.9068 15.4398 20.4002 12.5231 20.4002Z", fill: "#6A3F86" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { children: jsxRuntime.jsx("rect", { width: size, height: size, fill: "white" }) }) })] }));