frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/cardLT/StepsMission/StepMission.js

@@ -0,0 +1,108 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useLayoutEffect } from 'react';
+import style from './Planet.module.css.js';
+import Steps from './Steps.js';
+import Button from '../../buttons/index.js';
+import { FowardArrow } from '../../../shared/icons.js';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente Planet: Componente responsável por gerenciar os controles dos steps das missões
+ */
+function MissionSteps(props) {
+    const traducaoPTBR = {
+        next: "Ver missão seguinte >",
+        nextShort: "Próx. >",
+        previous: "< Ver missão anterior",
+        previousShort: "< Ant.",
+        continueChallenge: "Continuar desafio"
+    };
+    const traducaoES = {
+        next: "Ver misión siguiente >",
+        nextShort: "Próx. >",
+        previous: "< Ver misión anterior",
+        previousShort: "< Ant.",
+        continueChallenge: "Continuar desafío"
+    };
+    const traducaoENUS = {
+        next: "View next mission >",
+        nextShort: "Next >",
+        previous: "< View previous mission",
+        previousShort: "< Previous",
+        continueChallenge: "Continue challenge"
+    };
+    const traducaoPT = {
+        next: "Ver missão seguinte >",
+        nextShort: "Próx. >",
+        previous: "< Ver missão anterior",
+        previousShort: "< Ant.",
+        continueChallenge: "Continuar desafio"
+    };
+    const mapTraducao = new Map();
+    mapTraducao.set("pt-BR", traducaoPTBR);
+    mapTraducao.set("es", traducaoES);
+    mapTraducao.set("en-US", traducaoENUS);
+    mapTraducao.set("pt-PT", traducaoPT);
+    const [stepLiberado, setstepLiberado] = useState(props.stepProblem);
+    const [stepActive, setStepActive] = useState(props.stepActive);
+    const [Idioma, setIdioma] = useState(props.idioma ? props.idioma : 'pt-BR');
+    const setStep = (step) => {
+        setStepActive(step);
+        props.onSelected(step);
+    };
+    useEffect(() => {
+        setIdioma(props.idioma ? props.idioma : 'pt-BR');
+    }, [props.idioma]);
+    useEffect(() => {
+        setstepLiberado(props.stepProblem);
+    }, [props.stepProblem]);
+    // 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 = 475;
+    const leftButtonStyle = {
+        position: 'absolute',
+        top: 20,
+        left: 0,
+        cursor: 'pointer'
+    };
+    const rightButtonStyle = {
+        ...leftButtonStyle,
+        right: 0,
+        left: 'auto'
+    };
+    return (jsx(Fragment, { children: jsxs("div", { style: { display: "flex", justifyContent: 'center', width: '100%', position: 'relative', padding: 20, backgroundColor: 'white', marginTop: '10px' }, children: [stepActive > 1 ?
+                    size[0] >= BREAKWIDTH ?
+                        jsx("span", { onClick: () => { setStep(stepActive - 1); }, className: style.missaoTitle, style: leftButtonStyle, children: `${mapTraducao.get(Idioma).previous}` })
+                        :
+                            jsx("span", { onClick: () => { setStep(stepActive - 1); }, className: style.missaoTitle, style: leftButtonStyle, children: `${mapTraducao.get(Idioma).previousShort}` })
+                    : null, stepActive < stepLiberado ?
+                    size[0] >= BREAKWIDTH ?
+                        jsx("span", { onClick: () => { setStep(stepActive + 1); }, className: style.missaoTitle, style: rightButtonStyle, children: `${mapTraducao.get(Idioma).next}` })
+                        :
+                            jsx("span", { onClick: () => { setStep(stepActive + 1); }, className: style.missaoTitle, style: rightButtonStyle, children: `${mapTraducao.get(Idioma).nextShort}` })
+                    : props.stepProblem < 5 &&
+                        props.onClickContinue &&
+                        jsx("span", { className: style.missaoTitle, style: { ...rightButtonStyle, marginTop: '-10px' }, children: jsx(Button, { handleClick: () => props.onClickContinue(), label: mapTraducao.get(Idioma).continueChallenge, variant: "primary", endIcon: jsx(FowardArrow, { fill: "#fff" }), style: { height: '40px' } }) }), jsxs("div", { style: { display: "inline-flex", marginTop: 40, justifyContent: 'center', width: '100%' }, children: [jsx(Steps, { step: 1, idioma: Idioma, status: stepLiberado >= 1 ? stepActive === 1 ? "A" : "I" : "B", onClick: () => {
+                                setStep(1);
+                            } }), jsx(Steps, { step: 2, idioma: Idioma, status: stepLiberado >= 2 ? stepActive === 2 ? "A" : "I" : "B", onClick: () => {
+                                setStep(2);
+                            } }), jsx(Steps, { step: 3, idioma: Idioma, status: stepLiberado >= 3 ? stepActive === 3 ? "A" : "I" : "B", onClick: () => {
+                                setStep(3);
+                            } }), jsx(Steps, { step: 4, idioma: Idioma, status: stepLiberado >= 4 ? stepActive === 4 ? "A" : "I" : "B", onClick: () => {
+                                setStep(4);
+                            } }), jsx(Steps, { step: 5, idioma: Idioma, status: stepLiberado >= 5 ? stepActive === 5 ? "A" : "I" : "B", onClick: () => {
+                                setStep(5);
+                            } })] })] }) }));
+}
+
+export { MissionSteps as default };

package/dist/esm/src/components/cardLT/StepsMission/Steps.js

@@ -0,0 +1,68 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import style from './Planet.module.css.js';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente Planet: Componente responsável por gerenciar os controles dos steps das missões
+ */
+function Steps(props) {
+    const TypeStep = [
+        'https://api-motor.s3.amazonaws.com/marte.png',
+        'https://api-motor.s3.amazonaws.com/jupter.png',
+        'https://api-motor.s3.amazonaws.com/saturno.png',
+        'https://api-motor.s3.amazonaws.com/urano.png',
+        'https://api-motor.s3.amazonaws.com/netuno.png',
+    ];
+    const TypeStepNamePTBR = [
+        'Marte',
+        'Júpiter',
+        'Saturno',
+        'Urano',
+        'Netuno',
+    ];
+    const TypeStepNamePT = [
+        'Marte',
+        'Júpiter',
+        'Saturno',
+        'Urano',
+        'Netuno',
+    ];
+    const TypeStepNameEN = [
+        'Mars',
+        'Jupiter',
+        'Saturn',
+        'Uranus',
+        'Neptune',
+    ];
+    const TypeStepNameES = [
+        'Marte',
+        'Júpiter',
+        'Saturno',
+        'Urano',
+        'Netuno',
+    ];
+    const mapTraducao = new Map();
+    mapTraducao.set("pt-BR", TypeStepNamePTBR);
+    mapTraducao.set("pt-PT", TypeStepNamePT);
+    mapTraducao.set("en-US", TypeStepNameEN);
+    mapTraducao.set("es", TypeStepNameES);
+    const [Idioma, setIdioma] = useState(props.idioma ? props.idioma : 'pt-BR');
+    useEffect(() => {
+        setIdioma(props.idioma ? props.idioma : 'pt-BR');
+    }, [props.idioma]);
+    return (jsx(Fragment, { children: jsxs("div", { className: style.container, style: { ...props.style }, onClick: () => {
+                if (props.status !== 'B') {
+                    props.onClick();
+                }
+            }, children: [jsx("img", { src: TypeStep[props.step - 1], className: props.status === "A" ?
+                        style.imgAtive
+                        : props.status === "I" ?
+                            style.imgInative
+                            : style.imgBlocked }), jsx("div", { className: style.label, children: mapTraducao.get(Idioma)[props.step - 1] }), props.status === 'B' &&
+                    jsx("div", { className: style.block, children: jsx("img", { src: 'https://api-motor.s3.amazonaws.com/lock.png' }) })] }) }));
+}
+
+export { Steps as default };

package/dist/esm/src/components/cardLT/TextIcon/TextIcon.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".TextIcon-module_container__c5xjY {\n  display: flex;\n  justify-content: 'flex-start';\n  align-items: 'center';\n  position: relative;\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n";
+var style = {"container":"TextIcon-module_container__c5xjY"};
+styleInject(css_248z);
+
+export { style as default };

package/dist/esm/src/components/cardLT/TextIcon/index.js

@@ -0,0 +1,14 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import style from './TextIcon.module.css.js';
+
+///-----------------------------------------
+/// Componente
+/**
+ *
+ * @componente
+ */
+function TextIcon(props) {
+    return (jsx(Fragment, { children: jsx("div", { className: style.container, style: { ...props.style }, children: jsxs("div", { style: { display: 'flex', width: '100%', justifyContent: 'flex-start', alignItems: props.flexStart ? 'flex-start' : 'center' }, children: [jsx("div", { style: { display: props.flexStart ? "inline" : 'inline-flex', position: 'relative', justifyContent: 'center', alignItems: props.flexStart ? 'flex-start' : 'center' }, children: props.svg }), jsx("div", { style: { display: props.flexStart ? "inline" : 'inline-flex', marginLeft: 8, whiteSpace: 'pre-wrap' }, children: props.description })] }) }) }));
+}
+
+export { TextIcon as default };

package/dist/esm/src/components/cards/base/index.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+
+function EmptyCard(props) {
+    return (jsx("div", { className: 'cardContent', style: { height: '100%' }, children: props.children }));
+}
+
+export { EmptyCard as default };

package/dist/esm/src/components/cards/cardDefinicaoFase/cardDefinicaoFase.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".cardDefinicaoFase-module_container__KEYns {\r\n  width: 282px !important;\r\n  max-width: 282px !important;\r\n  color: #222222;\r\n  background-color: #fff;\r\n  border-radius: 10px;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-direction: column;\r\n  position: relative;\r\n  word-break: break-word !important;\r\n  word-wrap: break-word !important;\r\n  overflow-wrap: break-word !important;\r\n}\r\n\r\n.cardDefinicaoFase-module_headerContainer__uxRId {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: flex-end;\r\n  background: rgba(241, 134, 36, 0.2);\r\n  height: 200px;\r\n  max-width: 282px;\r\n}\r\n\r\n.cardDefinicaoFase-module_titleDescription__x7pED {\r\n  font-family: 'PT Sans';\r\n  font-style: normal;\r\n  font-weight: 700;\r\n  font-size: 16px;\r\n  line-height: 110%;\r\n  color: #444444;\r\n  max-width: 250px;\r\n  word-break: break-word !important;\r\n  word-wrap: break-word !important;\r\n  overflow-wrap: break-word !important;\r\n}\r\n\r\n.cardDefinicaoFase-module_description__-pzJG {\r\n  font-family: 'Work Sans';\r\n  font-style: normal;\r\n  font-weight: 500;\r\n  font-size: 20px;\r\n  line-height: 23px;\r\n  color: #f26818;\r\n  max-width: 250px;\r\n  word-break: break-word !important;\r\n  word-wrap: break-word !important;\r\n  overflow-wrap: break-word !important;\r\n  overflow: hidden;\r\n  display: -webkit-box !important;\r\n  -webkit-line-clamp: 6 !important;\r\n  -webkit-box-orient: vertical !important;\r\n}\r\n\r\n.cardDefinicaoFase-module_descriptionContainer__XLHCC {\r\n  padding: 20px;\r\n  height: 197px;\r\n  max-width: 282px !important;\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: flex-start;\r\n  flex-wrap: wrap;\r\n  margin-bottom: 1rem;\r\n  word-break: break-word !important;\r\n  word-wrap: break-word !important;\r\n  overflow-wrap: break-word !important;\r\n}\r\n\r\n.cardDefinicaoFase-module_buttonContainer__6u6bM {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  height: 55px;\r\n  padding: 0 35px;\r\n  border-radius: 0px 0px 8px 8px;\r\n  border: 1px solid #bdbdbd;\r\n}\r\n\r\n.cardDefinicaoFase-module_divisoria__IYAiv {\r\n  border: 1px solid #bdbdbd;\r\n  transform: rotate(360deg);\r\n}\r\n\r\n.cardDefinicaoFase-module_titleAndMenu__aqXT0 {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  align-items: center;\r\n  margin-bottom: 9px;\r\n}\r\n\r\n.cardDefinicaoFase-module_titleFrase__b8v0i {\r\n  font-family: 'PT Sans';\r\n  font-style: normal;\r\n  font-weight: 700;\r\n  font-size: 25px;\r\n  line-height: 110%;\r\n  color: #f18624;\r\n  max-width: 200px;\r\n  padding-left: 1.5rem;\r\n  padding-bottom: 2rem;\r\n  word-break: break-word !important;\r\n  word-wrap: break-word !important;\r\n  overflow-wrap: break-word !important;\r\n}\r\n\r\n.cardDefinicaoFase-module_buttonFinalizado__V8Oas {\r\n  display: flex;\r\n  justify-content: center;\r\n  height: 55px;\r\n  padding: 0 35px;\r\n  border-radius: 0px 0px 8px 8px;\r\n  border: 1px solid #bdbdbd;\r\n}\r\n";
+var style = {"container":"cardDefinicaoFase-module_container__KEYns","headerContainer":"cardDefinicaoFase-module_headerContainer__uxRId","titleDescription":"cardDefinicaoFase-module_titleDescription__x7pED","description":"cardDefinicaoFase-module_description__-pzJG","descriptionContainer":"cardDefinicaoFase-module_descriptionContainer__XLHCC","buttonContainer":"cardDefinicaoFase-module_buttonContainer__6u6bM","divisoria":"cardDefinicaoFase-module_divisoria__IYAiv","titleAndMenu":"cardDefinicaoFase-module_titleAndMenu__aqXT0","titleFrase":"cardDefinicaoFase-module_titleFrase__b8v0i","buttonFinalizado":"cardDefinicaoFase-module_buttonFinalizado__V8Oas"};
+styleInject(css_248z);
+
+export { style as default };

package/dist/esm/src/components/cards/cardDefinicaoFase/index.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { FaseUm, FaseFinalizado, FaseCinco, FaseQuatro, FaseTres, FaseDois } from '../../../shared/icons.js';
+import style from './cardDefinicaoFase.module.css.js';
+import Button from '../../buttons/index.js';
+import MenuMore from '../../menu-more/index.js';
+
+function CardDefinicaoFase(props) {
+    function handleFase() {
+        switch (props.fase) {
+            case '1':
+                return jsx(FaseUm, {});
+            case '2':
+                return jsx(FaseDois, {});
+            case '3':
+                return jsx(FaseTres, {});
+            case '4':
+                return jsx(FaseQuatro, {});
+            case '5':
+                return jsx(FaseCinco, {});
+            case 'finalizado':
+                return (jsx("div", { style: { paddingRight: '1.5rem' }, children: jsx(FaseFinalizado, {}) }));
+            default:
+                return jsx(FaseUm, {});
+        }
+    }
+    return (jsxs("div", { className: style.container, children: [jsxs("div", { className: style.headerContainer, children: [jsx("div", { className: style.titleFrase, children: props.titleFase ? props.titleFase : 'Definição do objetivo' }), props.fase ? handleFase() : jsx(FaseUm, {})] }), jsxs("div", { className: style.descriptionContainer, children: [jsxs("div", { className: style.titleAndMenu, children: [jsxs("span", { className: style.titleDescription, children: [" ", props.cardTitle] }), jsx(MenuMore, { options: props.optionsMenuMore })] }), jsxs("span", { className: style.description, children: [" ", props.cardDescription] })] }), props.fase === 'finalizado' ? (jsx("div", { className: style.buttonFinalizado, children: jsx(Button, { variant: "link", label: props.textButtonVisualizar ? props.textButtonVisualizar : 'Visualizar', handleClick: props.handleToView }) })) : (jsxs("div", { className: style.buttonContainer, children: [jsx(Button, { variant: "link", label: props.textButtonVisualizar ? props.textButtonVisualizar : 'Visualizar', handleClick: props.handleToView }), jsx("div", { className: style.divisoria }), jsx(Button, { variant: "link", label: props.textButtonContinue ? props.textButtonContinue : 'Continuar', handleClick: props.handleClickContinue })] }))] }));
+}
+
+export { CardDefinicaoFase as default };

package/dist/esm/src/components/cards/cardFaseDesafios/index.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { FaseUmDesafio, WarnCard, FaseFinalizadaDesafio, FaseCincoDesafio, FaseQuatroDesafio, FaseTresDesafio, FaseDoisDesafio } from '../../../shared/icons.js';
+import { Container, HeaderContainer, PhaseNumber, DescriptionContainer, CardTitlePhase, TitleDescription, Description, HypothesysAndActions, PendingHypotheses, ButtonContainer } from './styles.js';
+import MenuMore from '../../menu-more/index.js';
+import { Box } from '@mui/material';
+
+function CardFaseDesafios(props) {
+    function handleFase() {
+        switch (props.fase) {
+            case '1':
+                return jsx(FaseUmDesafio, {});
+            case '2':
+                return jsx(FaseDoisDesafio, {});
+            case '3':
+                return jsx(FaseTresDesafio, {});
+            case '4':
+                return jsx(FaseQuatroDesafio, {});
+            case '5':
+                return jsx(FaseCincoDesafio, {});
+            case 'finalizado':
+                return jsx(FaseFinalizadaDesafio, {});
+            default:
+                return jsx(FaseUmDesafio, {});
+        }
+    }
+    return (jsxs(Container, { children: [jsx(HeaderContainer, { children: jsx(PhaseNumber, { children: props.fase ? handleFase() : jsx(FaseUmDesafio, {}) }) }), jsxs(DescriptionContainer, { children: [jsx(CardTitlePhase, { children: props.titleFase ? props.titleFase : 'Definição' }), jsxs(TitleDescription, { children: [" ", props.cardTitle] }), jsxs(Description, { children: [" ", props.cardDescription] })] }), jsxs(HypothesysAndActions, { children: [jsxs(Box, { className: "items", children: [jsx("img", { src: "https://lxp-cdn.frstfalconi.cloud/STORYBOOK/hyphoteses.svg", alt: "" }), jsx("p", { className: "text-items", children: "Hip\u00F3teses" }), jsx("p", { className: "number-items", children: props.Hypotheshis ? props.Hypotheshis : 0 })] }), jsxs(Box, { className: "items", children: [jsx("img", { src: "https://lxp-cdn.frstfalconi.cloud/STORYBOOK/action.svg", alt: "" }), jsx("p", { className: "text-items", children: "A\u00E7\u00F5es" }), jsx("p", { className: "number-items", children: props.Actions ? props.Actions : 0 })] })] }), props.HypothesesToTest ? (jsxs(PendingHypotheses, { children: [jsx(WarnCard, {}), jsxs("span", { style: { fontSize: '14px', fontFamily: 'PT Sans', color: '#334155' }, children: ["Ainda existem ", jsxs("span", { style: { fontWeight: 700 }, children: [props.HypothesesToTest, " hip\u00F3teses"] }), " que n\u00E3o foram testadas."] })] })) : null, props.fase === 'finalizado' ? (jsxs(ButtonContainer, { children: [jsx("p", { onClick: props.handleToView, children: props.textButton ? props.textButton : 'Visualizar' }), jsx(MenuMore, { style: { position: 'absolute', right: '1rem' }, isDarkMode: true, options: props.optionsMenuMore })] })) : (jsxs(ButtonContainer, { children: [jsx("p", { onClick: props.handleToView, children: props.textButton ? props.textButton : 'Continuar desafio' }), jsx(MenuMore, { style: { position: 'absolute', right: '1rem' }, options: props.optionsMenuMore })] }))] }));
+}
+
+export { CardFaseDesafios as default };

package/dist/esm/src/components/cards/cardFaseDesafios/styles.js

@@ -0,0 +1,160 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+  width: 282px !important;
+  max-width: 282px !important;
+  height: 472px;
+  max-height: 472px;
+  color: #222222;
+  background-color: #fff;
+  border-radius: 10px;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+  display: flex;
+  position: relative;
+  word-break: break-word !important;
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+`;
+const PhaseNumber = styled.div `
+  background: #fce7d3;
+  height: 89.6px;
+  width: 91.2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: 5px solid #f18624;
+  margin-bottom: -1rem;
+  padding: 0px 4px 0px 0px;
+`;
+const HeaderContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  background: #f18624;
+  width: 100%;
+  height: 45px;
+  max-width: 282px;
+  border-radius: 8px 8px 0px 0px;
+`;
+const DescriptionContainer = styled.div `
+  padding: 20px;
+  gap: 2px;
+  max-width: 282px !important;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  word-break: break-word !important;
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+  flex-direction: column;
+`;
+const Description = styled.span `
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  color: #f18624;
+  max-width: 250px;
+  max-height: 70px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  word-break: break-word !important;
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+  -webkit-line-clamp: 6 !important;
+  -webkit-box-orient: vertical !important;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #fce7d3;
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #f18624;
+    border-radius: 10px;
+    border: 2px solid #f0f0f0;
+  }
+`;
+const CardTitlePhase = styled.div `
+  display: flex;
+  color: #f18624;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: 0.25px;
+  width: 100%;
+  align-items: center;
+  margin-bottom: 9px;
+`;
+const TitleDescription = styled.span `
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 110%;
+  color: #444444;
+  max-width: 250px;
+  word-break: break-word !important;
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+`;
+const ButtonContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 47px;
+  padding: 0 5px;
+  border-radius: 0px 0px 8px 8px;
+  background: #f18624;
+  color: #fff;
+  font-weight: 600;
+  font-family: 'PT Sans';
+  cursor: pointer;
+  width: 100%;
+`;
+const HypothesysAndActions = styled.div `
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  width: 100%;
+
+  .items {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .text-items {
+      font-size: 14px;
+      font-family: 'PT Sans';
+      font-weight: 700;
+    }
+
+    .number-items {
+      font-size: 40px;
+      font-weight: 700;
+      color: #475569;
+      margin-top: -3px;
+    }
+  }
+`;
+const PendingHypotheses = styled.div `
+  background: #f8d784;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 28px 9px;
+  gap: 11px;
+`;
+
+export { ButtonContainer, CardTitlePhase, Container, Description, DescriptionContainer, HeaderContainer, HypothesysAndActions, PendingHypotheses, PhaseNumber, TitleDescription };

package/dist/esm/src/components/cards/cardProblem/cardProblem.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".cardProblem-module_container__eYX3j {\n  width: 100%;\n  border-radius: 10px;\n  padding-right: 24px;\n  padding-left: 48px;\n  padding-top: 40px;\n  padding-bottom: 24px;\n\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-direction: row;\n  position: relative;\n}\n\n.cardProblem-module_container__eYX3j:hover {\n  box-shadow: 4px 8px 8px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.cardProblem-module_tagStatusProblem__11NQe {\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex;\n  font-size: 12px;\n  font-weight: 500;\n  padding: 8px;\n  border-bottom-left-radius: 8px;\n  border-top-right-radius: 5px;\n}\n\n.cardProblem-module_checkBox__hhdF6 {\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  height: 100%;\n  padding-top: 17px;\n  padding-left: 16px;\n\n  position: absolute;\n  left: 0;\n}\n\n.cardProblem-module_contentCard__oBqoN {\n  margin-left: 8px;\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  flex-direction: column;\n}\n\n.cardProblem-module_avatarInfoUser__0ppVK {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 24px;\n}\n\n.cardProblem-module_infoUser__Zx6rx {\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  flex-direction: column;\n  margin-left: 16px;\n}\n\n.cardProblem-module_tituloCard__JD95u {\n  margin-top: 4px;\n  margin-bottom: 8px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n\n  font-weight: 600;\n  font-size: 18px;\n  word-break: break-word;\n}\n\n.cardProblem-module_tagsContainer__IwGeV {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n.cardProblem-module_buttonVerMais__qgmLA {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  font-weight: 600;\n\n  margin-bottom: 26px;\n  margin-right: 30px;\n}\n";
+var style = {"container":"cardProblem-module_container__eYX3j","tagStatusProblem":"cardProblem-module_tagStatusProblem__11NQe","checkBox":"cardProblem-module_checkBox__hhdF6","contentCard":"cardProblem-module_contentCard__oBqoN","avatarInfoUser":"cardProblem-module_avatarInfoUser__0ppVK","infoUser":"cardProblem-module_infoUser__Zx6rx","tituloCard":"cardProblem-module_tituloCard__JD95u","tagsContainer":"cardProblem-module_tagsContainer__IwGeV","buttonVerMais":"cardProblem-module_buttonVerMais__qgmLA"};
+styleInject(css_248z);
+
+export { style as default };

package/dist/esm/src/components/cards/cardProblem/index.js

@@ -0,0 +1,144 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { useState, useEffect, useLayoutEffect } from 'react';
+import { CardFinished, CheckboxChecked, CheckboxEmpty, SawBadgeIcon } from '../../../shared/icons.js';
+import style from './cardProblem.module.css.js';
+import Avatar from '../../avatar/index.js';
+import Button from '../../buttons/index.js';
+import Tooltip from '../../DS/tooltip/index.js';
+
+const translate = {
+    'pt-BR': {
+        notStarted: 'Não iniciou',
+        finished: 'Finalizado',
+        nextSteps: 'Próximos passos',
+        resultsAndLearnings: 'Resultados',
+        testsPerformed: 'Testes',
+        hypothesesTaised: 'Hipóteses',
+        problemDefined: 'Definição',
+        problemCreated: 'Problema criado',
+        evaluation: 'avaliação',
+        impact: 'Impacto',
+        relevance: 'Relevância',
+        problemApproved: 'Problema aprovado',
+        reviewProblem: 'Revisar problema proposto',
+        waitingApproval: 'Aguardando aprovação',
+        linkedTrail: 'Vinculado à trilha',
+        notLinkedTrail: 'Ainda não está vinculado a uma trilha',
+        verifiedChallenge: 'Desafio verificado',
+        challenge: 'Desafio',
+        viewMore: 'Ver mais'
+    },
+    'en-US': {
+        notStarted: 'Not started',
+        finished: 'Finished',
+        nextSteps: 'Next steps',
+        resultsAndLearnings: 'Results',
+        testsPerformed: 'Tests',
+        hypothesesTaised: 'Hypothesis',
+        problemDefined: 'Definition',
+        problemCreated: 'Problem created',
+        evaluation: 'evaluation(s)',
+        impact: 'Impact',
+        relevance: 'Relevance',
+        problemApproved: 'Problem approved',
+        reviewProblem: 'Review proposed problem',
+        waitingApproval: 'Waiting for approval',
+        linkedTrail: 'Linked to trail',
+        notLinkedTrail: 'Not yet linked to a trail',
+        verifiedChallenge: 'Verified Challenge',
+        challenge: 'Challenge',
+        viewMore: 'View more'
+    },
+    'es-ES': {
+        notStarted: 'No empezado',
+        finished: 'Acabado',
+        nextSteps: 'Próximos pasos',
+        resultsAndLearnings: 'Resultados',
+        testsPerformed: 'Pruebas',
+        hypothesesTaised: 'Hipótesis',
+        problemDefined: 'Definición',
+        problemCreated: 'Problema creado',
+        evaluation: 'evaluación',
+        impact: 'Impacto',
+        relevance: 'Relevancia',
+        problemApproved: 'Problema aprobado',
+        reviewProblem: 'Revisar el problema propuesto',
+        waitingApproval: 'Aguardando aprobación',
+        linkedTrail: 'Vinculado a sendero',
+        notLinkedTrail: 'Aún no vinculado a un sendero',
+        verifiedChallenge: 'Desafío verificado',
+        challenge: 'Desafío',
+        viewMore: 'Ver más'
+    }
+};
+const isValidLanguage = (lang) => {
+    return lang == 'en-US' || lang == 'pt-BR' || lang == 'es-ES';
+};
+/**
+ * @param {CardProblemProps} props
+ */
+function CardProblem(props) {
+    const [languageSlected, onChangeLanguage] = useState(isValidLanguage(props.language) ? props.language : 'pt-BR');
+    useEffect(() => {
+        onChangeLanguage(isValidLanguage(props.language) ? props.language : 'pt-BR');
+    }, [props.language]);
+    const [statusName, setStatusName] = useState(translate[languageSlected]['notStarted']);
+    const [selected, setSelected] = useState(props.selected);
+    const [statusColor, setStatusColor] = useState('');
+    useEffect(() => {
+        switch (props.problemStatus) {
+            case 'finalizado':
+                setStatusColor('#158214'), setStatusName(translate[languageSlected]['finished']);
+                break;
+            case 'proxPassos':
+                setStatusColor('#222222'), setStatusName(translate[languageSlected]['nextSteps']);
+                break;
+            case 'resultadosAprendizados':
+                setStatusColor('#AD005C'), setStatusName(translate[languageSlected]['resultsAndLearnings']);
+                break;
+            case 'testesRealizados':
+                setStatusColor('#663366'), setStatusName(translate[languageSlected]['testsPerformed']);
+                break;
+            case 'hipoteseLevantada':
+                setStatusColor('#F8B911'), setStatusName(translate[languageSlected]['hypothesesTaised']);
+                break;
+            case 'problemaDefinido':
+                setStatusColor('#252BB1'), setStatusName(translate[languageSlected]['problemDefined']);
+                break;
+            case 'problemaCriado':
+            default:
+                setStatusColor(''), setStatusName('');
+                break;
+        }
+    }, [props.problemStatus, languageSlected]);
+    useEffect(() => {
+        setSelected(props.selected);
+    }, [props.selected]);
+    // 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);
+    }, []);
+    return (jsxs("div", { className: style.container, style: {
+            border: '1px solid ',
+            borderColor: statusColor,
+            backgroundColor: selected ? '#FF4D0D' : '#FFF',
+            color: selected ? '#FFF' : '#000'
+        }, children: [jsxs("div", { className: style.tagStatusProblem, style: {
+                    background: statusColor,
+                    color: statusName === translate[languageSlected]['hypothesesTaised'] ? '#222222' : '#FFF'
+                }, children: [statusName, statusName === translate[languageSlected]['finished'] && (jsx("div", { style: { marginLeft: '0.5rem' }, children: jsx(CardFinished, {}) }))] }), jsx("div", { className: style.checkBox, onClick: () => {
+                    props.handleSelect(props.problemID);
+                }, children: selected ? jsx(CheckboxChecked, {}) : jsx(CheckboxEmpty, {}) }), jsxs("div", { className: style.contentCard, children: [props.onClickUserInfo ?
+                        jsx(Tooltip, { direction: "bottom", content: props.textVisitProfile ? props.textVisitProfile : 'Visitar perfil', trigger: 'hover', width: '101px', height: '32px', style: { top: '-10px', textAlign: 'center' }, children: jsxs("div", { className: style.avatarInfoUser, onClick: () => props.onClickUserInfo ? props.onClickUserInfo() : {}, style: { cursor: 'pointer' }, children: [jsxs("div", { children: [' ', jsx(Avatar, { size: "40px", src: props.userAvatar, isActiveClick: true }), ' '] }), jsxs("div", { className: style.infoUser, children: [jsx("span", { style: { fontSize: 16, fontWeight: 600, cursor: 'pointer' }, children: props.userName }), jsx("span", { style: { fontSize: 14, fontWeight: 400 }, children: props.userCargo })] })] }) })
+                        :
+                            jsxs("div", { className: style.avatarInfoUser, children: [jsxs("div", { children: [' ', jsx(Avatar, { size: "40px", src: props.userAvatar }), ' '] }), jsxs("div", { className: style.infoUser, children: [jsx("span", { style: { fontSize: 16, fontWeight: 600, cursor: 'auto' }, children: props.userName }), jsx("span", { style: { fontSize: 14, fontWeight: 400 }, children: props.userCargo })] })] }), props.isVerified ? (jsxs("div", { style: { textAlign: 'center', display: 'flex' }, children: [jsx("div", { style: { color: selected ? '#FFF' : '#000', width: '100%', fontWeight: 700 }, children: jsx("span", { children: translate[languageSlected]['verifiedChallenge'] }) }), jsx(SawBadgeIcon, {})] })) : (jsx("div", { style: { color: selected ? '#FFF' : '#000', width: '100%', fontWeight: 700 }, children: jsx("span", { children: translate[languageSlected]['challenge'] }) })), props.cardTitle && (jsx("div", { className: style.tituloCard, style: { color: selected ? '#FFF' : '#FF4D0D', width: '100%' }, children: jsx("span", { children: props.cardTitle }) })), props.lastUpdated && (jsxs("div", { style: { color: '#000', fontSize: 12, fontWeight: 400, marginTop: 40 }, children: [props.lastUpdated, " "] })), props.isButtonVerMais && (jsx("div", { className: style.buttonVerMais, children: jsx(Button, { variant: "link", label: translate[languageSlected]['viewMore'], handleClick: () => props.onClick(props.problemID) }) }))] })] }));
+}
+
+export { CardProblem as default };

package/dist/esm/src/components/cards/cardProblemGestor/cardProblemaGestor.module.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".cardProblemaGestor-module_container__si6gB {\n    width: 100%;\n    padding-top: 30px;\n    padding-left: 16px;\n    padding-right: 16px;\n    padding-bottom: 16px;\n\n    justify-content: flex-start;\n    align-items: flex-start;\n    flex-direction: row;\n    position: relative;\n}\n\n.cardProblemaGestor-module_container__si6gB:hover {\n    cursor: pointer;\n}\n\n.cardProblemaGestor-module_tagStatusProblem__SKKTK {\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    font-size: 12px;\n    font-weight: 500;\n    padding: 8px;\n\n    border-bottom-left-radius: 8px;\n    \n\n}\n\n.cardProblemaGestor-module_checkBox__SK00W {\n    \n    display: flex;\n    justify-content: flex-start;\n    align-items: flex-start;\n    height: 100%;\n    padding-top: 20px;\n    padding-left: 12px;\n    \n\n    position: absolute;\n    left: 0;\n\n}\n\n.cardProblemaGestor-module_contentCard__0-ex3 {\n    \n    \n    display: flex;\n    justify-content: center;\n    align-items: flex-start;\n    flex-direction: column;\n}\n\n.cardProblemaGestor-module_avatarInfoUser__dZei- {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n}\n\n.cardProblemaGestor-module_infoUser__naGfk {\n    display: flex;\n    justify-content: center;\n    align-items: flex-start;\n    flex-direction: column;\n    margin-left: 4px;\n}\n\n.cardProblemaGestor-module_tituloCard__i4n9p {\n    \n    margin-top: 4px;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n\n    font-weight: 600;\n    font-size: 18px;\n    word-wrap: break-word;\n}\n\n.cardProblemaGestor-module_tagsContainer__K2zv5 {\n    \n    \n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.cardProblemaGestor-module_avaliacao__w2-fB {\n\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    flex-wrap: wrap;\n    \n}\n";
+var style = {"container":"cardProblemaGestor-module_container__si6gB","tagStatusProblem":"cardProblemaGestor-module_tagStatusProblem__SKKTK","checkBox":"cardProblemaGestor-module_checkBox__SK00W","contentCard":"cardProblemaGestor-module_contentCard__0-ex3","avatarInfoUser":"cardProblemaGestor-module_avatarInfoUser__dZei-","infoUser":"cardProblemaGestor-module_infoUser__naGfk","tituloCard":"cardProblemaGestor-module_tituloCard__i4n9p","tagsContainer":"cardProblemaGestor-module_tagsContainer__K2zv5","avaliacao":"cardProblemaGestor-module_avaliacao__w2-fB"};
+styleInject(css_248z);
+
+export { style as default };