frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/modal/modalBase/modalBase.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".modalBase-module_modalBox__hfg8v {\n  background-color: #fff;\n  max-width: 670px;\n  max-height: 80%;\n  padding-top: 20px;\n  position: relative;\n  border-radius: 10px;\n  font-family: 'Work Sans';\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  overflow-y: auto;\n}\n\n.modalBase-module_fechar__AKo6B {\n  font-size: 13px;\n  color: #222222;\n}\n\n.modalBase-module_container__6cOTL {\n  overflow: auto;\n  width: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: column;\n  flex-wrap: noWrap;\n\n  margin-top: 10px;\n}\n";
+var style = {"modalBox":"modalBase-module_modalBox__hfg8v","fechar":"modalBase-module_fechar__AKo6B","container":"modalBase-module_container__6cOTL"};
+styleInject(css_248z);
+
+export { style as default };

package/dist/esm/src/components/modal/modalLXP/Modal.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import style from './modal.module.css.js';
+import Button from '../../buttons/index.js';
+import { CloseIcon } from '../../../shared/icons.js';
+import { Modal, Box } from '@mui/material';
+
+function ModalLXP(props) {
+    return (jsx(Modal, { open: props.open, onClose: props.handleClose, children: jsxs(Box, { className: style.modalBox, style: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', ...props.style }, children: [jsx("div", { className: style.fechar, onClick: props.handleClose, children: jsx(CloseIcon, {}) }), jsx("div", { className: style.titulo, children: props.title }), jsx("div", { className: style.container, children: props.children }), jsx("div", { className: style.conclusao, children: props.confirmationButton ?
+                        props.cancelButton ?
+                            jsxs(Fragment, { children: [jsx(Button, { variant: "link", label: props.confirmationButton, handleClick: () => {
+                                            props.handleConfirmation();
+                                            props.handleClose();
+                                        } }), jsx("span", { style: { marginRight: 8, marginLeft: 8 }, children: props.language === 'en-US' ? 'or' : 'ou' }), jsx(Button, { variant: 'primary', label: props.cancelButton, handleClick: props.handleClose })] })
+                            :
+                                jsx(Button, { variant: "primary", label: props.confirmationButton, handleClick: () => {
+                                        props.handleConfirmation();
+                                        props.handleClose();
+                                    } })
+                        :
+                            jsx(Fragment, {}) })] }) }));
+}
+
+export { ModalLXP as default };

package/dist/esm/src/components/modal/modalLXP/modal.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".modal-module_modalBox__14oto{\n    background-color: #FFF;\n    max-width: 900px;\n    min-height: 200px;\n    max-height: 80%;\n    padding-top: 30px;\n    padding-bottom: 30px;\n    padding: 24px;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    flex-direction: column;\n    position: relative;\n    border-radius: 10px;\n    font-family: 'Work Sans';\n}\n\n.modal-module_fechar__-eB6z{\n    font-size: 12px;\n    color: #222222;\n    padding: 24px;\n    background-color: transparent;\n    border-top-right-radius: 10px;\n\n    display: flex;\n    justify-content: right;\n    align-items: center;\n    position: absolute;\n    top: 0px;\n    right: 0px;\n\n    margin-top: 0px;\n    cursor: pointer;\n}\n\n.modal-module_titulo__JU-S9{\n    \n    width: 100%;\n\n    margin-top: 24px;\n    margin-bottom: 12px;\n\n    font-size: 24px;\n    font-weight: 700;\n    display: flex;\n    justify-content: flex-start;\n    align-items: flex-start;\n\n    \n}\n\n.modal-module_container__VvDU9 {\n    overflow: auto;\n    width: 100%;\n    font-family: 'PT Sans';\n    font-style: normal;\n    font-weight: 400;\n    font-size: 16px;\n    display: flex;\n    justify-content: flex-start;\n    align-items: flex-start;\n    flex-direction: column;\n    flex-wrap: noWrap;\n\n    margin-top: 10px;\n\n}\n\n.modal-module_conclusao__ekXzz{\n    margin-top: 30px;\n    gap: 12px;\n    width: 100%;\n    display: inline-flex;\n    justify-content: flex-end;\n    align-items: center;\n    flex-wrap: nowrap;\n}";
+var style = {"modalBox":"modal-module_modalBox__14oto","fechar":"modal-module_fechar__-eB6z","titulo":"modal-module_titulo__JU-S9","container":"modal-module_container__VvDU9","conclusao":"modal-module_conclusao__ekXzz"};
+styleInject(css_248z);
+
+export { style as default };

package/dist/esm/src/components/modal/modalLearningTech/index.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Modal, Box } from '@mui/material';
+import style from './modalLearningTech.module.css.js';
+import Button from '../../buttons/index.js';
+import { CloseIcon } from '../../../shared/icons.js';
+
+function ModalLearningTech(props) {
+    return (jsx(Modal, { open: props.open, onClose: props.handleClose, children: jsxs(Box, { className: style.modalBox, style: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', ...props.style }, children: [jsx("div", { className: style.fechar, onClick: props.handleClose, children: jsx(CloseIcon, {}) }), jsx("div", { className: style.titulo, children: props.title }), jsx("div", { className: style.container, children: props.children }), jsx("div", { className: style.conclusao, children: props.confirmationButton ?
+                        props.cancelButton ?
+                            jsxs(Fragment, { children: [jsx(Button, { variant: 'link', label: props.cancelButton, handleClick: props.handleClose }), jsx("span", { style: { marginRight: 8, marginLeft: 8 }, children: props.language === 'en-US' ? 'or' : 'ou' }), jsx(Button, { variant: props.typeButtonConfirmation, label: props.confirmationButton, handleClick: props.handleConfirmation })] })
+                            :
+                                jsx(Button, { variant: props.typeButtonConfirmation, label: props.confirmationButton, handleClick: props.handleConfirmation })
+                        :
+                            jsx(Fragment, {}) })] }) }));
+}
+
+export { ModalLearningTech as default };

package/dist/esm/src/components/modal/modalLearningTech/modalLearningTech.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".modalLearningTech-module_modalBox__y9RGt{\n    background-color: #FFF;\n    max-width: 900px;\n    min-height: 300px;\n    max-height: 80%;\n    padding-top: 30px;\n    padding-bottom: 30px;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    position: relative;\n\n    border-radius: 10px;\n\n    font-family: 'Work Sans';\n    \n\n}\n\n.modalLearningTech-module_fechar__1Vw6M{\n    font-size: 12px;\n    color: #222222;\n    padding: 12px;\n    background-color: transparent;\n    border-top-right-radius: 10px;\n\n    display: flex;\n    justify-content: right;\n    align-items: center;\n    position: absolute;\n    top: 0px;\n    right: 0px;\n\n    margin-top: 0px;\n    cursor: pointer;\n}\n\n.modalLearningTech-module_titulo__U8Urp{\n    \n    width: 100%;\n\n    margin-top: 10px;\n    \n    font-size: 24px;\n    font-weight: 700;\n    \n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    \n}\n\n.modalLearningTech-module_container__HKtAY {\n    overflow: auto;\n    width: 100%;\n\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    flex-direction: column;\n    flex-wrap: noWrap;\n\n    margin-top: 10px;\n\n}\n\n.modalLearningTech-module_conclusao__KHnxJ{\n    margin-top: 30px;\n\n    display: inline-flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: nowrap;\n\n}";
+var style = {"modalBox":"modalLearningTech-module_modalBox__y9RGt","fechar":"modalLearningTech-module_fechar__1Vw6M","titulo":"modalLearningTech-module_titulo__U8Urp","container":"modalLearningTech-module_container__HKtAY","conclusao":"modalLearningTech-module_conclusao__KHnxJ"};
+styleInject(css_248z);
+
+export { style as default };

package/dist/esm/src/components/modal/modalShowUsers/index.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Modal, Typography, Divider, Box, Avatar } from '@mui/material';
+import { ModalBox, Container, ModalTitle, CloseButton, ListOfUsers, ListOfUsersContent, UsersInfo, Autor } from './styles.js';
+import { CloseIcon, StarIcon } from '../../../shared/icons.js';
+
+function ModalShowUsers({ isOpen, handleClose, goalUsers = [], onClickAvatar }) {
+    const sortedUsers = [...goalUsers].sort((a, b) => b.author - a.author);
+    return (jsx(Modal, { open: isOpen, onClose: handleClose, children: jsx(ModalBox, { children: jsxs(Container, { children: [jsxs(ModalTitle, { children: [jsx(Typography, { component: 'p', children: "Grupo de execu\u00E7\u00E3o do desafio" }), jsx(CloseButton, { onClick: handleClose, children: jsx(CloseIcon, { stroke: '#000' }) })] }), jsx(Divider, { style: { width: '100%', color: '#E0E0E0' } }), jsx(ListOfUsers, { children: sortedUsers.map((user) => (jsxs(ListOfUsersContent, { children: [jsx(Box, { display: 'flex', flexDirection: 'column', marginTop: '9px', width: "100%", children: jsxs(Box, { display: 'flex', alignItems: 'center', gap: '9px', children: [jsx(Avatar, { src: user.avatar || 'https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg', sx: { width: 48, height: 48, marginBottom: '10px', cursor: 'pointer' }, onClick: () => onClickAvatar(user.user_uuid) }), jsxs(UsersInfo, { children: [jsx("p", { children: user.name }), user.area_name && jsx("span", { children: user.area_name })] })] }) }), jsx(Box, { children: user.author && (jsxs(Autor, { children: [jsx(StarIcon, {}), jsx("p", { children: "Autor" })] })) })] }, user.user_uuid))) })] }) }) }));
+}
+
+export { ModalShowUsers as default };

package/dist/esm/src/components/modal/modalShowUsers/styles.js

@@ -0,0 +1,122 @@
+import styled from 'styled-components';
+import { Box } from '@mui/material';
+
+const ModalBox = styled(Box) `
+    background-color: #fff;
+    max-width: 670px;
+    max-height: 80%;
+    padding-top: 11px;
+    position: relative;
+    border-radius: 10px;
+    font-family: 'Work Sans', sans-serif;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+`;
+const CloseButton = styled.div `
+    cursor: pointer;
+    padding: 0rem 2rem 0rem 0rem;
+    display: flex;
+    justify-content: flex-end;
+`;
+const Container = styled.div `
+    overflow: auto;
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+    margin-top: 10px;
+    margin-bottom: -4px;
+
+    > p {
+        color: #222222;
+        font-weight: bold;
+        font-size: 20px;
+        font-family: 'Work Sans';
+    }
+`;
+const ModalTitle = styled.div `
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0rem 0rem 1rem 2rem;
+    > p {
+        color: #222222;
+        font-weight: bold;
+        font-size: 20px;
+        font-family: 'Work Sans';
+    }
+`;
+const ListOfUsers = styled.div `
+    width: 100%;
+    padding: 0rem 1rem 0rem 1rem;
+    overflow-y: auto;
+    height: 430px;
+    border-bottom: 1px solid #e0e0e0;
+
+    ::-webkit-scrollbar {
+        width: 8px; 
+    }
+
+    ::-webkit-scrollbar-track {
+        background: #f1f1f1; 
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: #888; 
+        border-radius: 15px; 
+        border: 2px solid #f1f1f1; 
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: #555; 
+    }
+
+    scrollbar-width: thin;
+    scrollbar-color: #BDBDBD #f1f1f1;
+`;
+const UsersInfo = styled.div `
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 9px;
+
+    > p {
+        font-family: 'PT Sans';
+        font-weight: bold;
+        font-size: 16px;
+        color: #222222;
+    }
+
+    > span {
+        color: #757575;
+        font-size: 14px;
+        font-family: 'PT Sans';
+        font-weight: 400;
+    }
+`;
+const Autor = styled.div `
+    background: #444444;
+    padding: 6px 16px 6px 16px;
+    border-radius: 18px;
+    height: 30px;
+    width: 87px;
+    display: flex;
+    align-items: center;
+    > p {
+        color: #ffffff;
+        font-size: 14px;
+        font-family: 'PT Sans';
+        font-weight: 400;
+        margin-left: 4px;
+    }
+`;
+const ListOfUsersContent = styled.div `
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    border-bottom: 1px solid #e0e0e0;
+`;
+
+export { Autor, CloseButton, Container, ListOfUsers, ListOfUsersContent, ModalBox, ModalTitle, UsersInfo };

package/dist/esm/src/components/modal/modalVideo/index.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Modal, Box, Stack } from '@mui/material';
+import style from './modalVideo.module.css.js';
+import { CloseIcon } from '../../../shared/icons.js';
+import Rating from '../../EBR/rating/index.js';
+import { useState, useEffect } from 'react';
+import Video from '../../LXP/video/index.js';
+
+function ModalVideo(props) {
+    const [IdVideo, setIdVideo] = useState('');
+    const [HashVideo, setHashVideo] = useState('');
+    const [currentRating, setCurrentRating] = useState(props.rating);
+    const getInformationsURL = () => {
+        let parts = props?.videoUrl.split('/');
+        let hash = parts[parts.length - 1];
+        let dataVideo = hash.split('?h=');
+        setIdVideo(dataVideo[0]);
+        setHashVideo(dataVideo[1]);
+    };
+    const convertTimeToString = (time) => {
+        let temp = time;
+        let hora = Math.trunc(time / 3600);
+        temp -= hora * 3600;
+        let min = Math.trunc(temp / 60);
+        temp -= min * 60;
+        if (hora > 0) {
+            return `${hora}h${min}m${temp}s`;
+        }
+        else {
+            return `${min}m${temp}s`;
+        }
+    };
+    useEffect(() => {
+        getInformationsURL();
+        setCurrentRating(props.rating);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.videoUrl]);
+    useEffect(() => {
+        if (props.rating) {
+            setCurrentRating(props.rating);
+        }
+    }, [props.rating]);
+    return (jsx(Modal, { open: props.open, onClose: props.handleClose, children: jsxs(Box, { id: `modal-video${(props.title ? props.title : '').replace(/( )+/g, '')}`, className: style.modalBox, style: {
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                height: props.showRating ? '80%' : '400px',
+                maxHeight: props.showRating ? '620px' : '400px',
+                overflowY: 'auto'
+            }, children: [jsxs(Stack, { flexDirection: "row", alignItems: "flex-start", justifyContent: "space-between", px: 3, children: [jsx(Box, { textAlign: "left", style: { paddingLeft: 6, }, children: props.title }), jsx(Box, { className: style.fechar, onClick: props.handleClose, children: jsx(CloseIcon, {}) })] }), jsxs(Box, { p: 3, children: [props.videoUrl && (jsx(Box, { width: "100%", children: jsx(Video, { videoId: IdVideo, privateHash: HashVideo, autoplay: 1, controls: 1, keyboard: 1, timeStart: convertTimeToString(props.timeBegin), showSpeedControl: 1, width: 620, height: 400 }) })), props.showRating && (jsx(Box, { style: { display: 'flex', justifyContent: 'flex-end' }, children: jsxs(Box, { style: { maxWidth: 240 }, children: [jsx("p", { style: { textAlign: 'left', fontSize: 14, fontWeight: 400 }, children: props.ratingDescription }), jsx(Box, { style: { display: 'flex', justifyContent: 'flex-end' }, children: jsx(Rating, { isVisibleNumberRating: true, marginStars: "3.5px", orientation: "horizontal", qtdStars: 5, rating: currentRating, sizeStars: 25, handleRating: (e) => {
+                                                setCurrentRating(e);
+                                                props.handleChangeRating(props.recommendationId, e);
+                                            }, disabled: false }) })] }) }))] })] }) }));
+}
+
+export { ModalVideo as default };

package/dist/esm/src/components/modal/modalVideo/modalVideo.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".modalVideo-module_modalBox__qB5gT {\n  background-color: #fff;\n  max-width: 670px;\n  max-height: 80%;\n  padding-top: 20px;\n  position: relative;\n  border-radius: 10px;\n  font-family: 'Work Sans';\n}\n\n.modalVideo-module_fechar__jywh1 {\n  font-size: 13px;\n  color: #222222;\n}\n\n.modalVideo-module_container__OYjiD {\n  overflow: auto;\n  width: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction: column;\n  flex-wrap: noWrap;\n\n  margin-top: 10px;\n}\n";
+var style = {"modalBox":"modalVideo-module_modalBox__qB5gT","fechar":"modalVideo-module_fechar__jywh1","container":"modalVideo-module_container__OYjiD"};
+styleInject(css_248z);
+
+export { style as default };

package/dist/esm/src/components/modal/modalWelcome/index.js

@@ -0,0 +1,43 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { ContainerModalBoasVindas } from './styles.js';
+import Modal from '../../DS/modal/index.js';
+
+const ModalBoasVindas = (props) => {
+    const [isOpenModalBoasVindas, setIsOpenModalBoasVindas] = useState(false);
+    useEffect(() => {
+        setIsOpenModalBoasVindas(props.isOpen);
+    }, [props.isOpen]);
+    function handleStepText(step) {
+        switch (step) {
+            case 1:
+                return (jsxs("div", { children: [jsx("h1", { children: "Boas-vindas \u00E0 fase 1!" }), jsx("p", { children: "Para concluir essa fase voc\u00EA precisar\u00E1:" }), jsxs("ul", { children: [jsx("li", { children: "Escolher um desafio que voc\u00EA ainda n\u00E3o saiba como solucionar;" }), jsx("li", { children: "Definir qual o seu objetivo com este desafio;" }), jsx("li", { children: "Escolher um indicador para mensurar o cen\u00E1rio atual e o resultado alcan\u00E7ado;" }), jsx("li", { children: "Refletir sobre o que voc\u00EA j\u00E1 sabe acerca do desafio;" }), jsx("li", { children: "Refletir sobre o que voc\u00EA ainda n\u00E3o sabe, ou precisa descobrir." })] })] }));
+            case 2:
+                return (jsxs("div", { children: [jsx("h1", { children: "Boas-vindas \u00E0 fase 2!" }), jsx("p", { children: "Para concluir essa fase voc\u00EA precisar\u00E1:" }), jsxs("ul", { children: [jsx("li", { children: "Definir Causas;" }), jsx("li", { children: "Definir hip\u00F3teses;" }), jsx("li", { children: "Criar pelo menos uma a\u00E7\u00E3o para a sua hip\u00F3tese priorizada." })] }), jsxs("p", { children: [jsx("strong", { children: "Dica: " }), "Acesse nosso material de apoio com mais informa\u00E7\u00F5es."] })] }));
+            case 3:
+                return (jsxs("div", { children: [jsx("h1", { children: "Boas-vindas \u00E0 fase 3!" }), jsx("p", { children: "Para concluir essa fase voc\u00EA precisar\u00E1:" }), jsxs("ul", { children: [jsx("li", { children: "Preencher quais testes foram feitos para suas a\u00E7\u00F5es" }), jsx("li", { children: "Definir o status das suas a\u00E7\u00F5es" }), jsx("li", { children: "Definir o n\u00EDvel de sucesso para cada uma de suas a\u00E7\u00F5es" }), jsx("li", { children: "Adicionar novas a\u00E7\u00F5es que n\u00E3o foram levantadas na fase anterior, mas que foram executadas." })] })] }));
+            case 4:
+                return (jsxs("div", { children: [jsx("h1", { children: "Boas-vindas \u00E0 fase 4!" }), jsx("p", { children: "Para concluir essa fase voc\u00EA precisar\u00E1:" }), jsxs("ul", { children: [jsx("li", { children: "Definir se alcan\u00E7ou seu objetivo principal" }), jsx("li", { children: "Mostrar seus resultados ou seus aprendizados com o desafio" }), jsx("li", { children: "Mostrar se obteve algum resultado ou aprendizado relacionado a alguma outra hipotese que n\u00E3o foi priorizada" })] })] }));
+            case 5:
+                return (jsxs("div", { children: [jsx("h1", { children: "Boas-vindas \u00E0 fase 5!" }), jsx("p", { children: "Para concluir essa fase voc\u00EA precisar\u00E1:" }), jsx("ul", { children: jsx("li", { children: "Definir quais s\u00E3o os pr\u00F3ximos passos do seu desafio" }) })] }));
+            default:
+                return (jsxs("div", { children: [jsx("h1", { children: "Boas-vindas \u00E0 fase 1!" }), jsx("p", { children: "Para concluir essa fase voc\u00EA precisar\u00E1:" }), jsxs("ul", { children: [jsx("li", { children: "Escolher um desafio que voc\u00EA ainda n\u00E3o saiba como solucionar;" }), jsx("li", { children: "Definir qual o seu objetivo com este desafio;" }), jsx("li", { children: "Escolher um indicador para mensurar o cen\u00E1rio atual e o resultado alcan\u00E7ado;" }), jsx("li", { children: "Refletir sobre o que voc\u00EA j\u00E1 sabe acerca do desafio;" }), jsx("li", { children: "Refletir sobre o que voc\u00EA ainda n\u00E3o sabe, ou precisa descobrir." })] })] }));
+        }
+    }
+    function handleModalBoasVindas() {
+        return (jsxs(ContainerModalBoasVindas, { children: [jsx("img", { src: props.suppMaterials[0]?.cover_img
+                        ? props.suppMaterials[0]?.cover_img
+                        : "https://lxp-cdn.frstfalconi.cloud/FORMS/boasVindasModal2.png", alt: "imgModalBoasVindas" }), props.suppMaterials[0]?.step ? (handleStepText(props.suppMaterials[0]?.step)) : (jsxs("div", { children: [jsx("h1", { children: "Boas-vindas \u00E0 fase 1!" }), jsx("p", { children: "Para concluir essa fase voc\u00EA precisar\u00E1:" }), jsxs("ul", { children: [jsx("li", { children: "Escolher um desafio que voc\u00EA ainda n\u00E3o saiba como solucionar;" }), jsx("li", { children: "Definir qual o seu objetivo com este desafio;" }), jsx("li", { children: "Escolher um indicador para mensurar o cen\u00E1rio atual e o resultado alcan\u00E7ado;" }), jsx("li", { children: "Refletir sobre o que voc\u00EA j\u00E1 sabe acerca do desafio;" }), jsx("li", { children: "Refletir sobre o que voc\u00EA ainda n\u00E3o sabe, ou precisa descobrir." })] })] }))] }));
+    }
+    function handleClose() {
+        props.onClose();
+        setIsOpenModalBoasVindas(false);
+    }
+    return (jsx(Fragment, { children: jsx(Modal, { open: isOpenModalBoasVindas, onClose: handleClose, onOpen: () => setIsOpenModalBoasVindas(true), animation: "BlowUp", handleCloseOnIcon: handleClose, showCloseButton: true, style: {
+                width: "100%",
+                maxWidth: "fit-content",
+                background: "#FFF9D7",
+            }, children: handleModalBoasVindas() }) }));
+};
+
+export { ModalBoasVindas as default };

package/dist/esm/src/components/modal/modalWelcome/styles.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+const ContainerModalBoasVindas = styled.div `
+  width: 100%;
+  display: flex;
+
+  img {
+    width: fit-content;
+    height: fit-content;
+  }
+  div {
+    padding: 0rem 1rem;
+    margin-bottom: 20px;
+  }
+  h1 {
+    padding-left: 1rem;
+    font-family: "Work Sans";
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 24px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #222222;
+  }
+  p {
+    padding-left: 1rem;
+    padding-bottom: 0.2rem;
+    padding-top: 0.5rem;
+    color: #222222;
+    font-size: 16px;
+  }
+  li{
+    color:#222222;
+    font-size: 16px;
+  }
+`;
+
+export { ContainerModalBoasVindas };

package/dist/esm/src/components/modal/statusProblema/index.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useLayoutEffect } from 'react';
+import { Modal, Box } from '@mui/material';
+import style from './statusProblema.module.css.js';
+import Button from '../../buttons/index.js';
+import Avatar from '../../avatar/index.js';
+import problemaFRST from './problemaFRST.png.js';
+import { CloseIcon, StatusProblemaSawBadgeIcon, StatusProblemaEdit, StatusProblemaSendIcon } from '../../../shared/icons.js';
+
+function ApprovesItem(props) {
+    return (jsxs(Fragment, { children: [jsxs("div", { className: style.containerItem, children: [jsx("div", { className: style.avatar, style: { width: props.size, cursor: props.onClickUserInfo ? 'pointer' : 'auto' }, onClick: () => props.onClickUserInfo ? props.onClickUserInfo() : {}, children: jsx(Avatar, { src: props.avatar, size: props.avatarSize, isActiveClick: !!props.onClickUserInfo }) }), props.statusApprove === 'reviewed' ?
+                        jsx("div", { children: jsx(StatusProblemaSawBadgeIcon, {}) })
+                        : props.statusApprove === 'adjustments' ?
+                            jsx("div", { children: jsx(StatusProblemaEdit, {}) })
+                            :
+                                jsx("div", { children: jsx(StatusProblemaSendIcon, {}) }), jsx("div", { style: { width: props.size }, className: style.status_logo, children: jsx(Avatar, { src: problemaFRST, size: props.avatarSize }) })] }), jsx("div", { className: style.containerItem, style: { marginTop: '8px', cursor: props.onClickUserInfo ? 'pointer' : 'auto' }, onClick: () => props.onClickUserInfo ? props.onClickUserInfo() : {}, children: jsxs("div", { className: style.containerData, style: { width: props.size }, children: [jsx("span", { className: style.name, children: props.nomeAvatar }), jsx("span", { className: style.sub_title, children: props.dataAvatar })] }) })] }));
+}
+function ModalStatusProblema(props) {
+    // Função para pegar o width da tela
+    const [size, setSize] = useState([0, 0]);
+    useLayoutEffect(() => {
+        function updateSize() {
+            setSize([window.innerWidth, window.innerHeight]);
+        }
+        window.addEventListener('resize', updateSize);
+        updateSize();
+        return () => window.removeEventListener('resize', updateSize);
+    }, []);
+    const BREAKWIDTH = 500;
+    return (jsx(Modal, { open: props.open, onClose: props.handleClose, children: jsxs(Box, { className: style.modalBox, style: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', ...props.style }, children: [jsx("div", { className: style.fechar, onClick: props.handleClose, children: jsx(CloseIcon, {}) }), jsx("div", { className: style.titulo, children: props.title }), jsx("div", { className: style.container, style: { height: props.approves.length >= 3 ? 555 : 185 * props.approves.length }, children: props.approves.map((item, index) => (jsx(ApprovesItem, { avatarSize: (size[0] >= BREAKWIDTH) ? '120px' : '100px', size: (size[0] >= BREAKWIDTH) ? '160px' : '120px', nomeAvatar: item.nome, dataAvatar: item.data, statusApprove: item.approve, avatar: item.avatarFoto, onClickUserInfo: item?.onClickUserInfo }, index))) }), jsxs("div", { className: style.modal_controls_wrapper, children: [jsx("div", { className: style.descricao, children: props.description }), jsx("div", { className: style.conclusao, children: jsx(Button, { variant: 'primary', label: props.language === 'en-US' ? 'ok, close' : 'Ok, entendi', handleClick: props.handleClose, style: { width: '100%', minWidth: '140px' } }) })] })] }) }));
+}
+
+export { ModalStatusProblema as default };

package/dist/esm/src/components/modal/statusProblema/problemaFRST.png.js

@@ -0,0 +1,3 @@
+var problemaFRST = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAyZSURBVHgB7Z1PbBTXHcd/b3ZdVbUNmwu5hTWXXCCYSlUjNRWG5ED5Y+CWkAO2RKXQi91TG3LAHEKTU+0eaKVGtakC9FJhDKQ5BLBFIjVqJUzg0lbCm0g9wKUbbKo29s7L+86bx87Ozu7O7s6fN8v7SOPd+bMz6/nO7/d+773fe8uoB+AjhQINbAyTzYpk8WFifDNx8Z6JRVJwFz8l4rwsXtVy11lnbJnW8stssVymjMMog/CDAyNCCCEk2y2WYbGpSPGAB2BZLEsQnV1bW6SMkQmBHQvtXx8TN/mwK2iB0qEsxF4km18hu7LIPv5fiTRHW4F9oo6Qjkixz+sstnYCO+6XmBCWDlN6ltoJc0Lw87q5cW0ElsLSaW2tNSwos20+wz56MkcakLrAjrDMmhXvitRblKhin0lb6NQE7hmLbQ0i8fG0XHfiAvN9hSLlN2afAWH9zNH6+pmkg7FEBeaH+ieJrNOUreApSlDNmhbWfIYSIhGBn2GrbURJWPOeJKzZophxrLavcseIW0OR+vru8APwaPESmwU7DRWDG8Ids9j/iWwjXPbVtZ9TTMQisHTJ9mXR6D9MhjDE5rIjF5jv7x+mXO5yD9Zr4yYWkSMtg/lPBo9QzrplxO0IWS7jHkZIZBbMR/uPE7fmyNA9zB5jC0/OUwREIrARNwYiErlrgY24MRKByF0J7JQXebpMhvjYoKPsL6vz1CEdC+xUhdCA8ew2OyZFWfRK7RG9UsvUAR1F0VJcW0TLRtwEKIiayWW+77tF6oDOqkmOuKYqlCCi4eg7l53WwTZpW2B+aODXRtwUQKug0/TbHm0JLLv7TNtyerDJdjsoQgdZJqjShrJo0twVtkkzvAWboEoXCpTvmw17cCiB+ejAaVPuagSjkbCuuqWLNq5ZW0K56tYWnK9MkRFXR0K56qYWLHOW2S0y6Avne5ql5Da3YCch3aA3rGnduKHAfP/gmAmsMgACLjmIIJDGFpxjbbeaGFKCsYaeNlBgY72Zo9jIioMt2OITZMgYwR63TmA3cjbprlmjQVkcYMFsjAzZhLHjdZu8K26r1QoZskqZVnND3tmBai3YqoyQIcvIeU085Gt25/hxjedlSZb+zUSvHiMaeonoyddENy4QPfpKblsT6zcvkpYwC3ObTD9dVW9Sc88/PEC07aX67fduE93/lFLjlBDw5YPV9emTRANC9BPvyfWJHxGt3CMtWc09p9x01YLTcs+4ia++Wb/9jbeJHn5J9M4BaTlJAutV4p7YLq+PbVtekKLCorHoinTTjhVXBc5RpGNi2gYW+yfXOnAjIfDzW6UlTb5SfzyOAY3EhyBYGonRbD+2K9T5cQzEheV2cr0k8bjpqsCMdhOn9MCNhMgKvP/gvnTf21+puutDwlUeE+L3uz2YsPIPfkn0+XW5DuEnfku048fVcz34gmjmpBQIIuCh8e7HOc4ek/vxYGFRLDyWr5d+Jb/T2Y/k+ugm+Yrz4Xped47r4XxJex4Fo6ftGE4ULed+1KzP1yu4unmvCyF/+j45ocPCORn4wMrfuSQfAnD2uhQPDwREwTF4SE68L/ejDMX+B/fk/r9eq3oKgO3qYQE3LsrlQYPy9t3r8vup86nrzXxW6wmSpaAaPaQFOwO1NYyelQWoG/WaW1bDOpT4OAYWh5sMUbdslds/+bAa6WI7hAQQDy4UD4gqW/FZiAzr/1wct/KFDP7AzFvV77PdV1RgfZsbZZ99o/p9cR48RKM/k6KnAXcG3y+6LtoaIR0Z8FiAE+S44k2cq90OVCQO4XFzJ38nrP09aVmwKgWExjEQ52Uh4naPq4bI7bhVdU24du/n8EDhOwztoNSwrBHxd9oVmO2kVAvgBqgbpMpOxb3P6o999KV8RdSNqBwLPo8bjQWiYt/eY1J4lOFOMRBBVex7DVzxQKql3k78yfMjhQJVKkXSDZS3ymJhdRADrhBC3/iwGnTBHWJR63td962sFm5SlbtABWio1968ID+LxotOQDAFnn+hGkED5crV/nQoYqhLnjY2MLE2pQ5uyrtucLNtRzVKRhmm3B/eQyxErSoQgpvFgwDBUHbCNQPV8qRu9kNVnheqn2PCa+311MFR7rYjCh4qVSRMfyrLfFwP67jewjlKlYGN4dzUi32i/sv2UVogwEFZBneGMhDL+v+J/vl3WbXxlp//+Jt8xfHff43oxR+QExz+cYro4z+IpvZHUlScA/txo/EeQiAIgoX956HcjnPg2nD/t/8st+F8d27I42D5wBskOdb+Zu12nBvWq4oCdT0EZ//+F6WKzZeYCKenhAVnLz1HuW9V9vpxGh7EQ/OkHNzwgM9796njG52vFa2ulwacz+Qz27nfSohWLUr+z3fbAqVj8yXjm0VDB0+tNm6IGW4NWdq1YBmig9FWYcHWc2ToWSzhp7eSoVcpxD6dsCFVjMC9jhG4xzEC9zgiyKLM/8KmoTF5stnXIpJOry6M9l2k5oQFbc1IhGv1eTQZoi8Y6TzNsh9Veiz6hdHJ8bQJ1HedZtfq9LvHTylPvQrahdH4j9SZi2erCX1eIBhSfLb0aE2R8bJw0XbvD1U5dqo+3QYg1adXxQXCO4umStZh90nGCMq99mZC9iIivhIuGj9xnmKHP8ollYIa1eeDUme974HKY/aClB6VzBeUEdntd00azpctYcYdzUOsNRACyQLN8Avoz8tup+sPDxTyp9XSTSAWJRxlsMVLZEgzhzk+GBMWnM/3ngWDgRaCBQ1XgVtPM9U1atbyyxabL5d7LtCCWK+/XbttzScoBPbnQCMQQ7Xq0ldypMPoyeoYqKzBqIQRhmpkA6w4+foCqi6oqvgDoCAaNRKEbXxYCciWRNbjiYD6MerQiLCxYMgLMi3RYJLmcNZ24XQXL25btL1ISaJSZDGQK4y4URA0hAQCQ7hWoxmQgYnvGlSX1hVbaioF5glH0shdTkpY4M2t9uNY8XY53gnvm1mpSqXNAkxq6rhoTGbJRwfLieVnYaRCEjcLyee/OVlb/aEm30kNUEMZDqtF0OUtg4NmItCTspqgtNpdyCk5K1Y3Uo3y86IaE/xLo0Z6dfyp/fX7MKRkrYPOMnwvPBRB58wGS+qNpz/YvkJJseKOpYVoUQ3vgGsNOhei4V6s4zbFnlfvqgLn+uYoKWAhEDjqRHEETH53jKEk/ipTGPBQ7PUNSlvTeF4OL7nKonr7tLsQ9WF+aBA7RijLoInSP7r+sCjv79+uHbnvJ0x1678ZEJjTEpuvTvPvS9lJ0E3HBcrk6bfqt0cRIH1ygbSH2XPe1VqB4aZ7IYUHluotj+G6u51KAWX8zQwI7HHPoCajw3HTBwevCJGPU9aBoLDa3/+iswnL1GCye66wYapa6TPndc+griPY/BBHhgn4gY7Ann4RbEHgETJkB9GfwBbWdvk3B+dFc36GDNmC85mgzQ1zdfjophXxoSIZ9AddgwurQ0G7Go9ssO1xMmQDbjf0uM1/+cyUxfrTxHpB87FJpizWH5s39bRNBXZD7kUy6Mpcs98tBK1HF+Zy42aAmoZAk9x6Sw/bUmDRulUizoyr1g2bzfhbrYIIPaTBBFwa0SKw8hJ+ALhx1XoADaz1PWEPDy2wcdWaIDQI45oVbY86E50R06IzYoIMySOaI0XUPNnOR9oXGPNL2/Ytd8p4Q1K0Ue56aXsSFmeoi2UdFVZcIkMyCHHbKXdrP9oh/Ej/MNnWLTPXZczIoGpXO+Wul46nUWLzT5bJJtMhETfiHncqLuhqnix2bRX5t0bk+Bh373HHRDJ3g2gEGRMvs2SIknF2dXWOuiSyyTmMyJESibgg0tlX+MHBI8Lpz5rAq0MQUNndu+XaU0aMqCcX3XpykQzhcapC9lEneI30tDFgRG4TjOW1vjnaTbTciFhmm0W7NVt4PNQo08/gAffIsvbEIS6IfQY0fmjTJDF+2pTLPlDeouPg6uNpipFEprgzLruOJcqtj8VltV4SncOQj26aEn8nnllrTshqay+ZMI41b1SmemKAW3skZrVeUpuF1BnkZlmzz4DbXhL/41Sr7Me4SP13ZZ0WMPw4Zq8JjXqtzcfTErb6NTTBbepEtsJOyjapWqwfbQRWOK6b2FimymgneKJ5Iex5XYRVaCewwgnGKpUR8XZMLLtJT5acKYtyfXNOpouGaCuwF4/YR8Q33p1aNUta6l3dRfWSCYH9yGkmkPRnYbqJnbEFaJhm2ZmJ117EfJ66ud8wZFJgP06m58bGsCM6ZwX3V80LzuKsB/zCqtM1x+TEV4yXhGWWnN+vwE8cYBb8fH45Cxbaim8BADv613K+UEgAAAAASUVORK5CYII=";
+
+export { problemaFRST as default };

package/dist/esm/src/components/modal/statusProblema/statusProblema.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".statusProblema-module_modalBox__SJtEw{\n    background-color: #FFF;\n    width: 800px;\n    min-height: 400px;\n    max-height: 80%;\n    padding-top: 20px;\n    padding-bottom: 20px;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    position: relative;\n\n    border-radius: 10px;\n\n    font-family: 'Work Sans';\n\n}\n\n.statusProblema-module_fechar__6ESi1{\n    font-size: 12px;\n    padding: 8px;\n    display: flex;\n    justify-content: right;\n    align-items: center;\n    position: absolute;\n    top: 0;\n    right: 0;\n    margin-top: 0px;\n    cursor: default;\n    margin-top: 10px;\n    margin-right: 10px;\n}\n\n.statusProblema-module_titulo__6REcF{\n    width: 100%;\n    margin-top: 10px;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    padding-left: 24px;\n    font-family: 'Work Sans';\n    font-style: normal;\n    font-weight: 700;\n    font-size: 24px;\n    line-height: 130%;\n    text-align: center;\n    letter-spacing: 0.01em;\n    color: #222222;\n}\n\n.statusProblema-module_container__KLG2- {\n    overflow: auto;\n    min-width: 100%;\n    max-width: 100%;\n    \n    \n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    flex-direction: column;\n    flex-wrap: noWrap;\n\n    margin-top: 20px;\n    margin-left: 0px;\n\n    border: 1px solid #BDBDBD;\n    border-left: 0px;\n    padding-bottom: 16px;\n}\n\n.statusProblema-module_containerItem__-Ui-d {\n    width: 400px;\n    margin-top: 24px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.statusProblema-module_containerData__QoS0I {\n    text-align: center;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n}\n\n@media (max-width: 500px) {    \n    .statusProblema-module_containerItem__-Ui-d {\n        width: 90vw;\n    }\n}\n\n.statusProblema-module_avatar__4mtlc{\n\n    font-size: 14px;\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n}\n\n.statusProblema-module_descricao__OJJt7{    \n    text-align: left;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-family: 'PT Sans';\n    font-style: normal;\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 110%;\n}\n\n\n.statusProblema-module_modal_controls_wrapper__1dEvp {\n    gap: 23px;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-top: 20px;\n    padding: 0 24px;\n}\n\n.statusProblema-module_status_logo__1zV01 {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.statusProblema-module_name__BZi68 {\n    font-family: 'Work Sans';\n    font-style: normal;\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 20px;\n    display: flex;\n    align-items: center;\n    text-align: center;\n    letter-spacing: -0.02em;\n    color: #FF4D0D;\n}\n\n.statusProblema-module_sub_title__s8MA4 {\n    font-family: 'PT Sans';\n    font-style: normal;\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 18px;\n    text-align: center;\n}\n";
+var style = {"modalBox":"statusProblema-module_modalBox__SJtEw","fechar":"statusProblema-module_fechar__6ESi1","titulo":"statusProblema-module_titulo__6REcF","container":"statusProblema-module_container__KLG2-","containerItem":"statusProblema-module_containerItem__-Ui-d","containerData":"statusProblema-module_containerData__QoS0I","avatar":"statusProblema-module_avatar__4mtlc","descricao":"statusProblema-module_descricao__OJJt7","modal_controls_wrapper":"statusProblema-module_modal_controls_wrapper__1dEvp","status_logo":"statusProblema-module_status_logo__1zV01","name":"statusProblema-module_name__BZi68","sub_title":"statusProblema-module_sub_title__s8MA4"};
+styleInject(css_248z);
+
+export { style as default };

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

@@ -0,0 +1,73 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ContainerDesafios, ContainerItemDesafio, containerTitleDesafio, TitleDesafiosWhite, TitleDesafiosGrey } from './quantidadeDesafios.js';
+import { Stats } from './stats.js';
+import { StatsWithResult } from './statsWithResult.js';
+
+function QuantidadeDesafios({ definicao, hipoteses, testes, resultados, proximosPassos, finalizados, languagem }) {
+    return (jsxs(ContainerDesafios, { children: [jsx(ContainerItemDesafio, { children: !finalizados ?
+                    jsx(Stats, { definicao: definicao, hipoteses: hipoteses, testes: testes, resultados: resultados, proximosPassos: proximosPassos })
+                    :
+                        jsx(StatsWithResult, { definicao: definicao, hipoteses: hipoteses, testes: testes, resultados: resultados, proximosPassos: proximosPassos, finalizados: finalizados }) }), jsxs(containerTitleDesafio, { hasFish: !!finalizados, children: [jsx(TitleDesafiosWhite, { children: languagem
+                            ? languagem === 'en-US'
+                                ? definicao.title_en
+                                    ? definicao.title_en
+                                    : definicao.title
+                                : languagem === 'es'
+                                    ? definicao.title_es
+                                        ? definicao.title_es
+                                        : definicao.title
+                                    : definicao.title
+                            : definicao.title }), jsx(TitleDesafiosGrey, { children: languagem
+                            ? languagem === 'en-US'
+                                ? hipoteses.title_en
+                                    ? hipoteses.title_en
+                                    : hipoteses.title
+                                : languagem === 'es'
+                                    ? hipoteses.title_es
+                                        ? hipoteses.title_es
+                                        : hipoteses.title
+                                    : hipoteses.title
+                            : hipoteses.title }), jsx(TitleDesafiosWhite, { children: languagem
+                            ? languagem === 'en-US'
+                                ? testes.title_en
+                                    ? testes.title_en
+                                    : testes.title
+                                : languagem === 'es'
+                                    ? testes.title_es
+                                        ? testes.title_es
+                                        : testes.title
+                                    : testes.title
+                            : testes.title }), jsx(TitleDesafiosGrey, { children: languagem
+                            ? languagem === 'en-US'
+                                ? resultados.title_en
+                                    ? resultados.title_en
+                                    : resultados.title
+                                : languagem === 'es'
+                                    ? resultados.title_es
+                                        ? resultados.title_es
+                                        : resultados.title
+                                    : resultados.title
+                            : resultados.title }), jsx(TitleDesafiosWhite, { children: languagem
+                            ? languagem === 'en-US'
+                                ? proximosPassos.title_en
+                                    ? proximosPassos.title_en
+                                    : proximosPassos.title
+                                : languagem === 'es'
+                                    ? proximosPassos.title_es
+                                        ? proximosPassos.title_es
+                                        : proximosPassos.title
+                                    : proximosPassos.title
+                            : proximosPassos.title }), finalizados && jsx(TitleDesafiosGrey, { children: languagem
+                            ? languagem === 'en-US'
+                                ? finalizados.title_en
+                                    ? finalizados.title_en
+                                    : finalizados.title
+                                : languagem === 'es'
+                                    ? finalizados.title_es
+                                        ? finalizados.title_es
+                                        : finalizados.title
+                                    : finalizados.title
+                            : finalizados.title })] })] }));
+}
+
+export { QuantidadeDesafios as default };

package/dist/esm/src/components/quantidadeDesafios/quantidadeDesafios.js

@@ -0,0 +1,95 @@
+import styled from 'styled-components';
+
+const ContainerDesafios = styled.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 1136px;
+`;
+const ContainerItemDesafio = styled.div `
+  width: 100%;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  background-size: 100%;
+  background-position: top 5rem;
+  background-position: -2rem;
+  justify-content: center;
+  margin-bottom: 1rem;
+`;
+const containerTitleDesafio = styled.div `
+  width: 100%;
+  height: 24px;
+  ${({ hasFish }) => hasFish ? "padding-left: 2rem" : "padding: 0 4rem"};
+  display: flex;
+  flex-direction: row;
+`;
+const TitleDesafiosWhite = styled.div `
+  width: 240px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 30px;
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 15px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #1b191a;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  z-index: 9999;
+  margin-right: -2rem;
+  margin-left: -2rem;
+`;
+const TitleDesafiosGrey = styled.div `
+  width: 240px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 30px;
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 15px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #ffffff;
+  display: flex;
+  justify-content: center;
+  position: relative;
+`;
+const DataTitle = styled.text `
+  color: #222;
+  text-align: center;
+  font-family: Work Sans;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  text-anchor: middle;
+  width: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+`;
+const DataSubTitle = styled.text `
+  color: #222;
+  text-align: center;
+  font-family: Work Sans;
+  font-size: 16px; 
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-anchor: middle;
+  width: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export { ContainerDesafios, ContainerItemDesafio, DataSubTitle, DataTitle, TitleDesafiosGrey, TitleDesafiosWhite, containerTitleDesafio };