frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/step-card/stepCardStyles.js

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+
+const CardWrapper = styled.div `
+    min-width: ${({ width }) => width ? width : '343px'};
+    min-height: 136px;
+    max-width: ${({ width }) => width ? width : '343px'};;
+    max-height: 136px;
+    border-radius: 8px;
+
+
+    background-color: ${({ theme }) => theme.colors.neutralsGrey8};
+    border: 1px solid #E8E8E8;
+
+    ${({ active }) => active === true && `
+        background-color: #FDBC91;
+        border: 1px solid #FF4D0D;
+    `}
+    padding: 24px;
+    margin: 15px;   
+    cursor: pointer;
+`;
+const WrapperHeader = styled.div `
+    display: flex;
+    flex-diretion: row;
+    padding-left: 3.2px;
+`;
+const TitleCard = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+    display: flex;
+    align-items: center;
+
+    color: #222222;
+    margin-left: 11.2px;
+`;
+const WrapperFooter = styled.div `
+    margin-top: 27px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+`;
+const WrapperAvatar = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: end;
+`;
+const AvatarInternal = styled.div `
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: ${({ size }) => size};
+    min-height: ${({ size }) => size};
+    max-width: ${({ size }) => size};
+    max-height: ${({ size }) => size};
+    
+    border: 2px solid #FAFAFA;
+    border-radius: 50%;
+    margin: ${({ margin }) => margin};
+    padding: ${({ padding }) => padding};
+    z-index: ${({ zIndex }) => zIndex};
+    background: ${({ backgroundColor }) => backgroundColor ? backgroundColor : '#FAFAFA'};
+
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 14px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+
+`;
+const ButtonMore = styled.div `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+
+    color: #0645AD;
+    cursor: pointer;
+    margin-right: 4px;
+`;
+
+export { AvatarInternal, ButtonMore, CardWrapper, TitleCard, WrapperAvatar, WrapperFooter, WrapperHeader };

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

@@ -0,0 +1,22 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '../../shared/global.css.js';
+import { AlertCicle, DoubleCheck } from '../../shared/icons.js';
+
+function Tag(props) {
+    function getBG() {
+        return props.selected === props.inverted ? props.color : '#fff';
+    }
+    function getColor() {
+        return props.selected === props.inverted ? '#fff' : props.color;
+    }
+    return (jsx(Fragment, { children: props.loading ? (jsx("div", { className: "shimmer tag", style: props.style, children: jsx("span", { style: { verticalAlign: 'middle', margin: '8px' }, children: "Shimmer Text" }) })) : (jsx("div", { className: "tag", style: { border: `1px solid ${getColor()} `, background: getBG(), color: getColor(), ...props.style }, children: jsxs("span", { style: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    height: '24px',
+                    margin: '0 8px',
+                    gap: '8px'
+                }, onClick: props?.onClick, children: [props.title, props.iconType === 'warning' && jsx(AlertCicle, { fill: getColor() }), props.iconType === 'checked' && jsx(DoubleCheck, { fill: getColor() })] }) })) }));
+}
+
+export { Tag as default };

package/dist/esm/src/components/totalizer-card/index.js

@@ -0,0 +1,16 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { CardWrapper, TitleCardLoading, TitleCard, TotalLoading, AreaCounter, TotalText, TotalNumber, PartialNumber } from './totalizerCardStyles.js';
+
+function TotalizerCard({ titleCard, textTotal, numberTotal, numberPartial, loading, className, hasShadow, styles }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(CardWrapper, { hasShadow: hasShadow, style: { ...styles }, children: [loading ?
+                    jsx(TitleCardLoading, { className: 'shimmer' })
+                    :
+                        jsxs(TitleCard, { children: [" ", titleCard, " "] }), loading ?
+                    jsx(TotalLoading, { className: 'shimmer' }) :
+                    jsxs(AreaCounter, { children: [jsxs(TotalText, { children: [" ", textTotal, " "] }), jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'baseline', marginBottom: '16px' }, children: [jsxs(TotalNumber, { children: [" ", numberTotal, " "] }), numberPartial && jsxs(PartialNumber, { children: ["/", numberPartial, " "] })] })] })] }) }));
+}
+
+export { TotalizerCard as default };

package/dist/esm/src/components/totalizer-card/totalizerCardStyles.js

@@ -0,0 +1,84 @@
+import styled from 'styled-components';
+
+styled.img `
+    width: ${props => props.size || '120px'};
+    height: ${props => props.size || '120px'};
+    border-radius: 50%;
+    object-fit: cover;
+
+    ${({ disabled }) => disabled === true && `
+        filter: grayscale(100%);
+    `}
+`;
+const CardWrapper = styled.div `
+    width: auto;
+    min-height: auto;
+
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid #E8E8E8;
+    border-radius: 4px;
+    padding: 20px;
+    ${({ hasShadow }) => hasShadow && 'box-shadow: 0px 18px 40px -15px #D3D3D3'};
+`;
+const TitleCard = styled.p `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 23px;
+
+    color: #F55E0E;
+    margin-top: 3px;
+    margin-left: 5px;
+`;
+const TitleCardLoading = styled.div `
+    height: 22px;
+    width: 100px;
+    border-radius: 8px;
+
+    margin-top: 3px;
+    margin-left: 5px;
+`;
+const AreaCounter = styled.div `
+    margin-top: 36px;
+    margin-left: 5px;
+    display: flex;
+    flex-direction: column;
+`;
+const TotalText = styled.span `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 300;
+    font-size: 14px;
+    line-height: 16px;
+
+    color: #222222;
+`;
+const TotalLoading = styled.div `
+    margin-top: 36px;
+    margin-left: 5px;
+    height: 50px;
+    width: 100px;
+    border-radius: 10px;
+`;
+const TotalNumber = styled.p `
+    font-family: 'Work Sans' ;
+    font-style: normal;
+    font-weight: 300;
+    font-size: 48px;
+    line-height: 56px;
+
+    color: #222222;
+    margin-top: -13px;
+`;
+const PartialNumber = styled.p `
+    font-family: 'Work Sans' ;
+    font-style: normal;
+    font-weight: 300;
+    font-size: 24px;
+    line-height: 56px;
+
+    color: #222222;
+`;
+
+export { AreaCounter, CardWrapper, PartialNumber, TitleCard, TitleCardLoading, TotalLoading, TotalNumber, TotalText };

package/dist/esm/src/components/users-challenge/index.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box } from '@mui/material';
+import { Container } from './styles.js';
+import UsersChallengeFeed from './variant-feed/index.js';
+import UsersChallengeForm from './variant-form/index.js';
+import UsersChallengeVitrine from './variant-vitrine/index.js';
+import UsersChallengeLXP from './variant-lxp/index.js';
+
+function UsersChallenge({ goalUsers = [], hasOnlyAutor, onUserNameClick, onClickAvatar, avatar, name, userId, areaName, companyName, createData, variant, accessLevel, configColor }) {
+    return (jsx(Container, { children: jsxs(Box, { children: [variant === 'feed' && (jsx(UsersChallengeFeed, { areaName: areaName, avatar: avatar, companyName: companyName, createData: createData, goalUsers: goalUsers, hasOnlyAutor: hasOnlyAutor, name: name, onClickAvatar: onClickAvatar, onUserNameClick: onUserNameClick, userId: userId, accessLevel: accessLevel, configColor: configColor })), variant === 'form' && (jsx(UsersChallengeForm, { areaName: areaName, avatar: avatar, companyName: companyName, createData: createData, goalUsers: goalUsers, hasOnlyAutor: hasOnlyAutor, name: name, onClickAvatar: onClickAvatar, onUserNameClick: onUserNameClick, userId: userId })), variant === 'vitrine' && (jsx(UsersChallengeVitrine, { areaName: areaName, avatar: avatar, companyName: companyName, createData: createData, goalUsers: goalUsers, hasOnlyAutor: hasOnlyAutor, name: name, onClickAvatar: onClickAvatar, onUserNameClick: onUserNameClick, userId: userId, accessLevel: accessLevel })), variant === 'lxp' && (jsx(UsersChallengeLXP, { areaName: areaName, avatar: avatar, companyName: companyName, createData: createData, goalUsers: goalUsers, hasOnlyAutor: hasOnlyAutor, name: name, onClickAvatar: onClickAvatar, onUserNameClick: onUserNameClick, userId: userId }))] }) }));
+}
+
+export { UsersChallenge as default };

package/dist/esm/src/components/users-challenge/styles.js

@@ -0,0 +1,125 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Box, Typography } from '@mui/material';
+
+const Container = styled.div `
+    display: flex;
+    .avatar-image-only-owner {
+        border: 3px solid #e2e8f0 !important;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+    .avatar-image-owner {
+        border: 2px solid #f26818 !important;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+    .avatar-image-user {
+        border: 2px solid #e2e8f0 !important;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+`;
+styled.div `
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9;
+    background: ${({ $bgColor }) => $bgColor ? $bgColor : '#f26818'};
+    border-radius: 18px;
+    right: 0.5rem;
+    height: 12px;
+    bottom: 10px;
+    > p {
+        color: #ffffff;
+        font-weight: 700;
+        font-size: 10px;
+    }
+`;
+styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+`;
+styled.p `
+    color: #bdbdbd;
+    font-family: PT Sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+`;
+styled(({ isCardVersion, ...rest }) => jsx(Box, { ...rest })) `
+    margin-left: 10px;
+    max-width: 34rem;
+    margin-bottom: 6px;
+    .list-users {
+        font-weight: 700;
+        font-size: 16px;
+        font-family: 'PT Sans';
+        color: ${({ isCardVersion }) => (isCardVersion ? '#7e7e7e' : '#f7f9fc')}; 
+        cursor: pointer;
+        &:hover {
+            color: #f18624;
+            text-decoration: underline #f18624;
+        }
+    }
+    .owner {
+        color: #f18624;
+    }
+    .not-owner {
+        color: ${({ isCardVersion }) => (isCardVersion ? '#222222' : '#f7f9fc')};
+    }
+    .more-users {
+        color: ${({ isCardVersion }) => (isCardVersion ? '#222222' : '#f7f9fc')};
+        font-weight: 700;
+        font-size: 16px;
+        font-family: 'PT Sans';
+        cursor: pointer;
+        &:hover {
+            text-decoration: underline;
+        }
+        &:active {
+            text-decoration: underline #f18624;
+            color: #f18624;
+        }
+    }
+`;
+styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .MuiAvatarGroup-avatar {
+        margin: -4px !important;
+    }
+    .plus-users {
+        width: 48px !important;
+        height: 48px !important;
+        background-color: #444444 !important;
+        border-radius: 50% !important;
+        font-weight: bold !important;
+        cursor: pointer;
+        border: none !important;
+
+        > span {
+            font-size: 19px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+            margin-top: -1px;
+            color: #ffffff;
+        }
+    }
+`;
+styled(({ isCardVersion, ...rest }) => jsx(Typography, { ...rest })) `
+  color: ${({ isCardVersion }) => (isCardVersion ? '#7e7e7e' : '#bdbdbd')};
+  font-weight: 400 !important;
+  font-size: 12px !important;
+  font-family: 'PT Sans' !important;
+`;
+
+export { Container };

package/dist/esm/src/components/users-challenge/variant-feed/index.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Avatar, Typography, AvatarGroup } from '@mui/material';
+import { useState } from 'react';
+import { Container, AvatarInfo, StyledTypography, AvatarsSection, AvatarAutor, AllAvatarUsers } from './styles.js';
+import ModalShowUsers from '../../modal/modalShowUsers/index.js';
+import { LightTooltip } from '../../DS/LightTooltip/index.js';
+import { LightPrivateIcon, LightProtectedIcon } from '../../../shared/icons.js';
+
+function UsersChallengeFeed({ goalUsers = [], hasOnlyAutor, onUserNameClick, onClickAvatar, avatar, name, userId, areaName, companyName, createData, accessLevel, configColor }) {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const maxVisibleUsers = 4;
+    const reorderedUsers = [...goalUsers.filter((user) => user.author), ...goalUsers.filter((user) => !user.author)];
+    const remainingUsersCount = reorderedUsers.length - maxVisibleUsers;
+    const AccessLevelIcon = ({ accessLevel }) => {
+        if (accessLevel === 'private') {
+            return (jsx(LightTooltip, { title: "Este desafio pode ser visto e acessado apenas por pessoas selecionadas", children: jsx("span", { style: { display: 'inline-flex', cursor: 'pointer' }, children: jsx(LightPrivateIcon, {}) }) }));
+        }
+        if (accessLevel === 'protected') {
+            return (jsx(LightTooltip, { title: "Este desafio pode ser visto e acessado por todas as pessoas da organiza\u00E7\u00E3o de seu autor", children: jsx("span", { style: { display: 'inline-flex', cursor: 'pointer' }, children: jsx(LightProtectedIcon, {}) }) }));
+        }
+        return null;
+    };
+    return (jsxs(Container, { "$borderColor": configColor, children: [hasOnlyAutor ? (jsxs(AvatarInfo, { children: [jsx(Box, { children: jsx(Avatar, { sx: { width: 56, height: 56, cursor: 'pointer' }, className: 'avatar-image-only-owner', src: avatar || 'https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg', onClick: () => onClickAvatar(userId) }) }), jsxs(Box, { children: [jsx(Typography, { sx: {
+                                    color: '#222222',
+                                    fontWeight: 700,
+                                    fontSize: '16px',
+                                    fontFamily: 'PT Sans',
+                                    cursor: 'pointer'
+                                }, onClick: () => onUserNameClick(userId), children: name }), jsxs(Box, { sx: { display: 'flex', gap: '4px' }, children: [jsxs(StyledTypography, { children: [`${areaName} `, " \u00B7 ", ` ${companyName}`, " ."] }), jsx("span", { children: jsx(AccessLevelIcon, { accessLevel: accessLevel }) })] }), jsx(StyledTypography, { children: `${createData}` })] })] })) : (jsxs(AvatarsSection, { children: [jsxs(AvatarGroup, { spacing: "small", children: [reorderedUsers.slice(0, maxVisibleUsers).map((user) => (jsxs(Box, { children: [jsx(Avatar, { alt: user.name, sx: { width: 48, height: 48 }, className: user.author ? 'avatar-image-owner' : 'avatar-image-user', src: user.avatar || 'https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg', onClick: () => onClickAvatar(user.user_uuid) }), user.author && (jsx(AvatarAutor, { "$bgColor": configColor, children: jsx("p", { children: "Autor" }) }))] }, user.user_uuid))), remainingUsersCount > 0 && (jsx("div", { className: "plus-users", onClick: () => setIsModalOpen(true), children: jsxs("span", { children: ["+", remainingUsersCount] }) }))] }), jsx(AllAvatarUsers, { "$color": configColor, children: jsxs(Box, { display: 'flex', gap: '4px', alignItems: 'center', flexWrap: 'wrap', children: [reorderedUsers.slice(0, maxVisibleUsers).map((user, index) => (jsxs(Box, { onClick: () => onUserNameClick(user.user_uuid), color: '#222222', children: [jsx("span", { className: `list-users ${user.author ? 'owner' : 'not-owner'}`, children: user.name }), index === reorderedUsers.slice(0, maxVisibleUsers).length - 2 ? (jsxs("span", { style: { color: '#222222', fontFamily: 'PT Sans', fontWeight: 'bold' }, children: [' ', "e", ' '] })) : (index < reorderedUsers.slice(0, maxVisibleUsers).length - 1 && ', ')] }, user.user_uuid))), remainingUsersCount > 0 && (jsxs("span", { onClick: () => {
+                                        setIsModalOpen(true);
+                                    }, className: "more-users", children: [' ', "e mais ", remainingUsersCount, " pessoa", remainingUsersCount > 1 ? 's' : ''] })), jsx("span", { children: jsx(AccessLevelIcon, { accessLevel: accessLevel }) })] }) })] })), jsx(ModalShowUsers, { isOpen: isModalOpen, handleClose: () => setIsModalOpen(false), goalUsers: goalUsers, onClickAvatar: onClickAvatar })] }));
+}
+
+export { UsersChallengeFeed as default };

package/dist/esm/src/components/users-challenge/variant-feed/styles.js

@@ -0,0 +1,125 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+    display: flex;
+    .avatar-image-only-owner {
+        border: 2px solid #e2e8f0 !important;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+    .avatar-image-owner {
+        border: 2px solid ${({ $borderColor }) => $borderColor ? $borderColor : '#f26818'} !important;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+    .avatar-image-user {
+        border: 2px solid #e2e8f0 !important;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+`;
+const AvatarAutor = styled.div `
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9;
+    background: ${({ $bgColor }) => $bgColor ? $bgColor : '#f26818'};
+    border-radius: 18px;
+    right: 0.5rem;
+    height: 12px;
+    bottom: 10px;
+    > p {
+        color: #ffffff;
+        font-weight: 700;
+        font-size: 10px;
+    }
+`;
+const AvatarInfo = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+`;
+styled.p `
+    color: #bdbdbd;
+    font-family: PT Sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+`;
+const AllAvatarUsers = styled.div `
+    margin-left: 10px;
+    max-width: 34rem;
+    margin-bottom: 6px;
+    .list-users {
+        font-weight: 700;
+        font-size: 16px;
+        font-family: 'PT Sans';
+        color: #7e7e7e;
+        cursor: pointer;
+        &:hover {
+            color: ${({ $color }) => $color ? $color : '#f18624'};
+            text-decoration: underline ${({ $color }) => $color ? $color : '#f18624'};
+        }
+    }
+    .owner {
+        color: ${({ $color }) => $color ? $color : '#f18624'};
+    }
+    .not-owner {
+        color: #222222;
+    }
+    .more-users {
+        color: #222222;
+        font-weight: 700;
+        font-size: 16px;
+        font-family: 'PT Sans';
+        cursor: pointer;
+        &:hover {
+            text-decoration: underline;
+        }
+        &:active {
+            text-decoration: underline #f18624;
+            color: #f18624;
+        }
+    }
+`;
+const AvatarsSection = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 1rem;
+    margin-top: 0.5rem;
+    .MuiAvatarGroup-avatar {
+        margin: -4px !important;
+    }
+    .plus-users {
+        width: 48px !important;
+        height: 48px !important;
+        background-color: #444444 !important;
+        border-radius: 50% !important;
+        font-weight: bold !important;
+        cursor: pointer;
+        border: none !important;
+
+        > span {
+            font-size: 19px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+            margin-top: -1px;
+            color: #ffffff;
+        }
+    }
+`;
+const StyledTypography = styled.p `
+    color: #7e7e7e;
+    font-weight: 400 !important;
+    font-size: 12px !important;
+    font-family: 'PT Sans' !important;
+`;
+
+export { AllAvatarUsers, AvatarAutor, AvatarInfo, AvatarsSection, Container, StyledTypography };

package/dist/esm/src/components/users-challenge/variant-form/index.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Avatar, Typography, AvatarGroup } from '@mui/material';
+import { useState } from 'react';
+import { Container, AvatarInfo, StyledTypography, AvatarsSection, AvatarAutor, AllAvatarUsers } from './styles.js';
+import ModalShowUsers from '../../modal/modalShowUsers/index.js';
+
+function UsersChallengeForm({ goalUsers = [], hasOnlyAutor, onUserNameClick, onClickAvatar, avatar, name, userId, areaName, companyName, createData, }) {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const maxVisibleUsers = 4;
+    const reorderedUsers = [...goalUsers.filter((user) => user.author), ...goalUsers.filter((user) => !user.author)];
+    const remainingUsersCount = reorderedUsers.length - maxVisibleUsers;
+    return (jsxs(Container, { children: [hasOnlyAutor ? (jsxs(AvatarInfo, { children: [jsx(Box, { children: jsx(Avatar, { sx: { width: 56, height: 56, cursor: 'pointer' }, className: 'avatar-image-only-owner', src: avatar || 'https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg', onClick: () => onClickAvatar(userId) }) }), jsxs(Box, { children: [jsx(Typography, { sx: {
+                                    color: '#222222',
+                                    fontWeight: 700,
+                                    fontSize: '16px',
+                                    fontFamily: 'PT Sans',
+                                    cursor: 'pointer'
+                                }, onClick: () => onUserNameClick(userId), children: name }), jsxs(Box, { children: [jsx(StyledTypography, { children: `${areaName} ` }), jsx(StyledTypography, { children: ` ${companyName}` })] })] })] })) : (jsxs(AvatarsSection, { children: [jsxs(AvatarGroup, { spacing: "small", children: [reorderedUsers.slice(0, maxVisibleUsers).map((user) => (jsxs(Box, { children: [jsx(Avatar, { alt: user.name, sx: { width: 48, height: 48 }, className: user.author ? 'avatar-image-owner' : 'avatar-image-user', src: user.avatar || 'https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg', onClick: () => onClickAvatar(user.user_uuid) }), user.author && (jsx(AvatarAutor, { children: jsx("p", { children: "Autor" }) }))] }, user.user_uuid))), remainingUsersCount > 0 && (jsx("div", { className: "plus-users", onClick: () => setIsModalOpen(true), children: jsxs("span", { children: ["+", remainingUsersCount] }) }))] }), jsx(AllAvatarUsers, { children: jsxs(Box, { display: 'flex', gap: '4px', alignItems: 'center', flexWrap: 'wrap', children: [reorderedUsers.slice(0, maxVisibleUsers).map((user, index) => (jsxs(Box, { onClick: () => onUserNameClick(user.user_uuid), color: '#222222', children: [jsx("span", { className: `list-users ${user.author ? 'owner' : 'not-owner'}`, children: user.name }), index === reorderedUsers.slice(0, maxVisibleUsers).length - 2 ? (jsxs("span", { style: { color: '#222222', fontFamily: 'PT Sans', fontWeight: 'bold' }, children: [' ', "e", ' '] })) : (index < reorderedUsers.slice(0, maxVisibleUsers).length - 1 && ', ')] }, user.user_uuid))), remainingUsersCount > 0 && (jsxs("span", { onClick: () => {
+                                        setIsModalOpen(true);
+                                    }, className: "more-users", children: [' ', "e mais ", remainingUsersCount, " pessoa", remainingUsersCount > 1 ? 's' : ''] }))] }) })] })), jsx(ModalShowUsers, { isOpen: isModalOpen, handleClose: () => setIsModalOpen(false), goalUsers: goalUsers, onClickAvatar: onClickAvatar })] }));
+}
+
+export { UsersChallengeForm as default };

package/dist/esm/src/components/users-challenge/variant-form/styles.js

@@ -0,0 +1,125 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+    display: flex;
+    .avatar-image-only-owner {
+        border: 2px solid #e2e8f0 !important;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+    .avatar-image-owner {
+        border: 2px solid #f26818 !important;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+    .avatar-image-user {
+        border: 2px solid #e2e8f0 !important;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+`;
+const AvatarAutor = styled.div `
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9;
+    background: #f26818;
+    border-radius: 18px;
+    right: 0.5rem;
+    height: 12px;
+    bottom: 10px;
+    > p {
+        color: #ffffff;
+        font-weight: 700;
+        font-size: 10px;
+    }
+`;
+const AvatarInfo = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+`;
+styled.p `
+    color: #bdbdbd;
+    font-family: PT Sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+`;
+const AllAvatarUsers = styled.div `
+    margin-left: 10px;
+    max-width: 34rem;
+    margin-bottom: 6px;
+    .list-users {
+        font-weight: 700;
+        font-size: 16px;
+        font-family: 'PT Sans';
+        color: #7e7e7e;
+        cursor: pointer;
+        &:hover {
+            color: #f18624;
+            text-decoration: underline #f18624;
+        }
+    }
+    .owner {
+        color: #f18624;
+    }
+    .not-owner {
+        color: #222222;
+    }
+    .more-users {
+        color: #222222;
+        font-weight: 700;
+        font-size: 16px;
+        font-family: 'PT Sans';
+        cursor: pointer;
+        &:hover {
+            text-decoration: underline;
+        }
+        &:active {
+            text-decoration: underline #f18624;
+            color: #f18624;
+        }
+    }
+`;
+const AvatarsSection = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 1rem;
+    margin-top: 0.5rem;
+    .MuiAvatarGroup-avatar {
+        margin: -4px !important;
+    }
+    .plus-users {
+        width: 48px !important;
+        height: 48px !important;
+        background-color: #444444 !important;
+        border-radius: 50% !important;
+        font-weight: bold !important;
+        cursor: pointer;
+        border: none !important;
+
+        > span {
+            font-size: 19px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+            margin-top: -1px;
+            color: #ffffff;
+        }
+    }
+`;
+const StyledTypography = styled.p `
+    color: #7e7e7e;
+    font-weight: 400 !important;
+    font-size: 12px !important;
+    font-family: 'PT Sans' !important;
+`;
+
+export { AllAvatarUsers, AvatarAutor, AvatarInfo, AvatarsSection, Container, StyledTypography };